feat: implement Vue 3 frontend with all pages
Complete web UI built with Vue 3, TypeScript, Element Plus, and Pinia. Includes Login, Dashboard, Servers, Repositories, Sync Logs, and Settings pages with API client, auth store, and Vue Router configuration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
42
web/src/views/Layout.vue
Normal file
42
web/src/views/Layout.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<el-container style="height:100vh">
|
||||
<el-aside width="200px" style="background:#001529">
|
||||
<div style="padding:20px;text-align:center;border-bottom:1px solid #1f1f1f">
|
||||
<h2 style="margin:0;color:#fff">GitM</h2>
|
||||
</div>
|
||||
<el-menu :default-active="$route.path" router background-color="#001529" text-color="#fff" active-text-color="#1890ff">
|
||||
<el-menu-item index="/"><el-icon><DataBoard /></el-icon><span>Dashboard</span></el-menu-item>
|
||||
<el-menu-item index="/servers"><el-icon><Monitor /></el-icon><span>Servers</span></el-menu-item>
|
||||
<el-menu-item index="/repos"><el-icon><DocumentCopy /></el-icon><span>Repositories</span></el-menu-item>
|
||||
<el-menu-item index="/logs"><el-icon><Document /></el-icon><span>Sync Logs</span></el-menu-item>
|
||||
<el-menu-item index="/settings"><el-icon><Setting /></el-icon><span>Settings</span></el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header style="background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center">
|
||||
<div style="width:100%;display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:18px;font-weight:500">{{ pageTitle }}</span>
|
||||
<el-button text @click="handleLogout"><el-icon><SwitchButton /></el-icon> Logout</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main style="background:#f5f5f5"><router-view /></el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const pageTitle = computed(() => {
|
||||
const titles: Record<string,string> = { '/':'Dashboard','/servers':'Gitea Servers','/repos':'Repositories','/logs':'Sync Logs','/settings':'Settings' }
|
||||
return titles[route.path] || 'GitM'
|
||||
})
|
||||
|
||||
function handleLogout() { authStore.logout(); router.push('/login') }
|
||||
</script>
|
||||
Reference in New Issue
Block a user