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,115 @@
+<script setup lang="ts">
+import { computed, ref } 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 ?? '')
+const email = computed(() => auth.me?.email ?? '')
+
+async function onLogout() {
+  await auth.logout()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <el-container class="admin-layout">
+    <el-aside width="220px" class="aside">
+      <div class="logo">
+        <el-icon><Monitor /></el-icon>
+        <span>用户管理节点</span>
+      </div>
+      <el-menu :default-active="activeMenu" router class="menu">
+        <el-menu-item index="/admin/dashboard">
+          <el-icon><Odometer /></el-icon><span>仪表盘</span>
+        </el-menu-item>
+        <el-menu-item index="/admin/users">
+          <el-icon><User /></el-icon><span>用户管理</span>
+        </el-menu-item>
+        <el-menu-item index="/admin/approvals">
+          <el-icon><Tickets /></el-icon><span>申请审批</span>
+        </el-menu-item>
+        <el-menu-item index="/admin/audit">
+          <el-icon><Document /></el-icon><span>审计日志</span>
+        </el-menu-item>
+        <el-menu-item index="/admin/settings">
+          <el-icon><Setting /></el-icon><span>系统设置</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header class="header">
+        <span class="page-title">{{ route.meta.title ?? '' }}</span>
+        <el-dropdown @command="onLogout">
+          <span class="user-chip">
+            <el-avatar :size="28" 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 disabled>{{ email }}</el-dropdown-item>
+              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-header>
+      <el-main class="main">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+.admin-layout {
+  min-height: 100vh;
+}
+.aside {
+  background: var(--el-bg-color);
+  border-right: 1px solid var(--el-border-color-light);
+}
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 60px;
+  padding: 0 16px;
+  font-weight: 600;
+  font-size: 15px;
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+.menu {
+  border-right: none;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--el-bg-color);
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+.page-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+.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>