373cb70633
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>
43 lines
2.0 KiB
Vue
43 lines
2.0 KiB
Vue
<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>
|