admin pages and menu.

src/shared/Header.vue

@@ -75,7 +75,14 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
       onClick: () => router.push("/setting"),
     },
   },
-  { label: "后台管理", key: "admin", show: userStore.isAdminRole },
+  {
+    label: "后台管理",
+    key: "admin",
+    show: userStore.isAdminRole,
+    props: {
+      onClick: () => router.push("/admin"),
+    },
+  },
   { type: "divider" },
   { label: "退出", key: "logout", props: { onClick: handleLogout } },
 ])
@@ -136,7 +143,7 @@ function run() {
     <n-button circle @click="toggleDark()">
       <template #icon>
         <n-icon v-if="isDark"><i-ep-sunny /></n-icon>
-        <n-icon v-else> <i-ep-moon /></n-icon>
+        <n-icon v-else><i-ep-moon /></n-icon>
       </template>
     </n-button>
   </n-space>

src/shared/composables/monaco.ts

@@ -4,7 +4,7 @@ export const monaco = ref<Monaco>()
 
 export async function init() {
   loader.config({
-    paths: { vs: "https://cdn.staticfile.org/monaco-editor/0.34.1/min/vs" },
+    paths: { vs: "https://cdn.staticfile.org/monaco-editor/0.36.1/min/vs" },
     "vs/nls": { availableLanguages: { "*": "zh-cn" } },
   })
 

src/shared/layout/admin.vue

@@ -1,11 +1,39 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { MenuOption } from "naive-ui"
+import Login from "../Login.vue"
+import Signup from "../Signup.vue"
+
+const options: MenuOption[] = [
+  { label: "题目", key: "problem", disabled: true },
+  { label: "题目列表", key: "problem list" },
+  { label: "创建题目", key: "create problem" },
+  { label: "用户", key: "user", disabled: true },
+  { label: "用户列表", key: "user list" },
+  { label: "导入用户", key: "user import" },
+  { label: "比赛", key: "contest", disabled: true },
+  { label: "比赛列表", key: "contest list" },
+  { label: "创建比赛", key: "create contest" },
+  { label: "其他", key: "other", disabled: true },
+  { label: "系统配置", key: "config" },
+  { label: "公告配置", key: "announcement" },
+]
+</script>
 
 <template>
-  <n-layout>
-    <n-layout-content bordered>
+  <n-layout has-sider position="absolute">
+    <n-layout-sider bordered :native-scrollbar="false">
+      <n-menu :options="options" />
+    </n-layout-sider>
+    <n-layout-content :native-scrollbar="false">
       <router-view></router-view>
     </n-layout-content>
+    <Login />
+    <Signup />
   </n-layout>
 </template>
 
-<style scoped></style>
+<style scoped>
+.content {
+  padding: 16px;
+}
+</style>