add admin head.

src/shared/layout/admin.vue

@@ -1,34 +1,100 @@
 <script setup lang="ts">
 import { MenuOption } from "naive-ui"
+import { RouterLink } from "vue-router"
 import Login from "../Login.vue"
-import Signup from "../Signup.vue"
 
+const route = useRoute()
 const options: MenuOption[] = [
-  { label: "题目", key: "problem", disabled: true },
-  { label: "题目列表", key: "problem list" },
-  { label: "创建题目", key: "create problem" },
+  {
+    label: () => h(RouterLink, { to: "/admin" }, { default: () => "首页" }),
+    key: "home",
+  },
+  {
+    label: "题目",
+    key: "problem",
+    disabled: true,
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        { to: "/admin/problem/list" },
+        { default: () => "题目列表" }
+      ),
+    key: "problem list",
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        { to: "/admin/problem/create" },
+        { default: () => "创建题目" }
+      ),
+    key: "problem create",
+  },
   { label: "用户", key: "user", disabled: true },
-  { label: "用户列表", key: "user list" },
-  { label: "导入用户", key: "user import" },
+  {
+    label: () =>
+      h(RouterLink, { to: "/admin/user/list" }, { default: () => "用户列表" }),
+    key: "user list",
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        { to: "/admin/user/import" },
+        { default: () => "导入用户" }
+      ),
+    key: "user importing",
+  },
   { label: "比赛", key: "contest", disabled: true },
-  { label: "比赛列表", key: "contest list" },
-  { label: "创建比赛", key: "create contest" },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        { to: "/admin/contest/list" },
+        { default: () => "比赛列表" }
+      ),
+    key: "contest list",
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        { to: "/admin/contest/create" },
+        { default: () => "创建比赛" }
+      ),
+    key: "contest create",
+  },
   { label: "其他", key: "other", disabled: true },
-  { label: "系统配置", key: "config" },
-  { label: "公告配置", key: "announcement" },
+  {
+    label: () =>
+      h(RouterLink, { to: "/admin/config" }, { default: () => "系统配置" }),
+    key: "config",
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        { to: "/admin/announcement" },
+        { default: () => "公告配置" }
+      ),
+    key: "announcement",
+  },
 ]
+
+const active = computed(() => (route.name as string) || "")
 </script>
 
 <template>
   <n-layout has-sider position="absolute">
     <n-layout-sider bordered :native-scrollbar="false">
-      <n-menu :options="options" />
+      <n-menu :options="options" :value="active" />
     </n-layout-sider>
     <n-layout-content :native-scrollbar="false">
       <router-view></router-view>
     </n-layout-content>
     <Login />
-    <Signup />
   </n-layout>
 </template>