feat: 实现管理后台 W1-W3 假数据界面

2026-09-30 07:02:33 +08:00
parent 8dde564517
commit 1cff321f2a
33 changed files with 4773 additions and 31 deletions
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute, useRouter, RouterView } from "vue-router";
+import {
+  NButton,
+  NLayout,
+  NLayoutContent,
+  NLayoutHeader,
+  NLayoutSider,
+  NMenu,
+  NSpace,
+  NText,
+} from "naive-ui";
+import type { MenuOption } from "naive-ui";
+import { useAuthStore } from "@/stores/auth";
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+
+const menuOptions: MenuOption[] = [
+  { label: "概览", key: "/overview" },
+  { label: "端", key: "/endpoints" },
+  { label: "注册设置", key: "/registration" },
+  { label: "群", key: "/groups" },
+  { label: "投递记录", key: "/messages" },
+  { label: "API 令牌", key: "/tokens" },
+  { label: "系统", key: "/settings" },
+];
+
+const activeKey = computed(() => {
+  const path = route.path;
+  const hit = menuOptions.find((m) => typeof m.key === "string" && path.startsWith(String(m.key)));
+  return hit?.key ?? "/overview";
+});
+
+function onMenuUpdate(key: string) {
+  void router.push(key);
+}
+
+async function onLogout() {
+  await auth.logout();
+  void router.push({ name: "login" });
+}
+</script>
+
+<template>
+  <n-layout has-sider style="height: 100vh">
+    <n-layout-sider bordered :width="180" :native-scrollbar="false" content-style="padding-top: 8px">
+      <div style="padding: 12px 16px">
+        <n-text strong>NixMsg</n-text>
+      </div>
+      <n-menu :value="activeKey" :options="menuOptions" @update:value="onMenuUpdate" />
+    </n-layout-sider>
+    <n-layout>
+      <n-layout-header bordered style="height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between">
+        <n-text depth="3">管理后台</n-text>
+        <n-space align="center">
+          <n-text>{{ auth.username }}</n-text>
+          <n-button quaternary size="small" @click="onLogout">退出</n-button>
+        </n-space>
+      </n-layout-header>
+      <n-layout-content
+        :native-scrollbar="false"
+        content-style="height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden"
+      >
+        <RouterView />
+      </n-layout-content>
+    </n-layout>
+  </n-layout>
+</template>