feat(M5): 前端完善 + 部署 — Vue3 全量页面、仪表盘统计与我的审计接口、systemd/sudoers/迁移脚本、部署文档

2026-08-30 10:50:46 +08:00
parent c0e2ff975a
commit b305d7b371
67 changed files with 3209 additions and 171 deletions
@@ -0,0 +1,86 @@
+<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 auth = useAuthStore()
+
+const activeMenu = computed(() => route.path)
+const username = computed(() => auth.me?.username ?? '')
+
+async function onLogout() {
+  await auth.logout()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <el-container class="user-layout">
+    <el-header class="header">
+      <span class="logo">
+        <el-icon><Monitor /></el-icon>
+        <span>服务器用户管理</span>
+      </span>
+      <el-menu :default-active="activeMenu" router mode="horizontal" :ellipsis="false" class="nav">
+        <el-menu-item index="/me/profile">账号信息</el-menu-item>
+        <el-menu-item index="/me/keys">我的密钥</el-menu-item>
+        <el-menu-item index="/me/audit">我的审计</el-menu-item>
+      </el-menu>
+      <el-dropdown @command="onLogout">
+        <span class="user-chip">
+          <el-avatar :size="26" class="avatar">{{ username.slice(0, 1).toUpperCase() }}</el-avatar>
+          <span>{{ username }}</span>
+          <el-icon><ArrowDown /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </el-header>
+    <el-main class="main">
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<style scoped>
+.user-layout {
+  min-height: 100vh;
+}
+.header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  background: var(--el-bg-color);
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 15px;
+}
+.nav {
+  flex: 1;
+  border-bottom: none;
+}
+.user-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  outline: none;
+}
+.avatar {
+  background: var(--el-color-primary);
+  color: #fff;
+}
+.main {
+  padding: 20px;
+}
+</style>