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:
panw
2026-03-31 16:38:45 +08:00
parent 333e999d76
commit 373cb70633
19 changed files with 2360 additions and 0 deletions

42
web/src/views/Layout.vue Normal file
View 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>