Sidebar navigation (#39)

* sider bar

web/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@traptitech/markdown-it-katex": "^3.6.0",
+    "@vicons/ionicons5": "^0.12.0",
     "@vueuse/core": "^9.13.0",
     "highlight.js": "^11.7.0",
     "html2canvas": "^1.4.1",
@@ -61,6 +62,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "rimraf": "^4.2.0",
+    "sass": "^1.60.0",
     "tailwindcss": "^3.2.7",
     "typescript": "~4.9.5",
     "vite": "^4.1.4",

web/src/locales/zh-CN.json

@@ -53,6 +53,9 @@
   },
   "admin": {
     "title": "管理",
+    "hideSubMenu": "隐藏子菜单",
+    "showSubMenu": "显示子菜单",
+    "userStat": "用户统计",
     "permission": "权限",
     "rateLimit": "限流"
   },

web/src/router/index.ts

@@ -9,6 +9,18 @@ const routes: RouteRecordRaw[] = [
     path: '/admin',
     name: 'Admin',
     component: () => import('@/views/admin/index.vue'),
+    children: [
+      {
+        path: 'user',
+        name: 'AdminUser',
+        component: () => import('@/views/admin/user/index.vue'),
+      },
+      {
+        path: 'system',
+        name: 'AdminSystem',
+        component: () => import('@/views/admin/user/index.vue'),
+      },
+    ],
   },
   {
     path: '/',

web/src/views/admin/index.vue

@@ -1,35 +1,68 @@
-<script setup lang='ts'>
-import { NTabPane, NTabs } from 'naive-ui'
-import UserStat from './UserStat.vue'
+<script setup lang="ts">
+import type { Component, Ref } from 'vue'
+import { h, reactive, ref } from 'vue'
+import { NIcon, NLayout, NLayoutSider, NMenu, NSpace } from 'naive-ui'
+import type { MenuOption } from 'naive-ui'
+import { PulseOutline, ShieldCheckmarkOutline } from '@vicons/ionicons5'
+import { RouterLink } from 'vue-router'
+import i18n from '@/locales'
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions: MenuOption[] = reactive([
+  {
+    label:
+      () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: 'AdminUser',
+            },
+          },
+          { default: () => i18n.global.t('admin.rateLimit') },
+        ),
+    key: 'hear-the-wind-sing',
+    icon: renderIcon(PulseOutline),
+  },
+  {
+    label: () => h(
+      RouterLink,
+      {
+        to: {
+          name: 'AdminSystem',
+        },
+      },
+      { default: () => i18n.global.t('admin.permission') },
+    ),
+    key: 'a-wild-sheep-chase',
+    icon: renderIcon(ShieldCheckmarkOutline),
+  },
+])
+
+const collapsed: Ref<boolean> = ref(false)
+const activeKey: Ref<string | null> = ref(null)
 </script>
 
 <template>
   <div>
-    <h1 class="text-2xl font-bold mt-8 mx-4 ">
-      {{ $t('admin.title') }}
-    </h1>
-    <NTabs
-      class="card-tabs" default-value="user_stat" size="large" animated style="margin: 0 -4px"
-      pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
-    >
-      <NTabPane :label="$t('admin.permission')" name="tab2">
-        Content of Tab Pane 2
-      </NTabPane>
-      <NTabPane :label="$t('admin.rateLimit')" name="user_stat">
-        <UserStat />
-      </NTabPane>
-    </NTabs>
+    <NSpace vertical>
+      <NLayout has-sider>
+        <NLayoutSider
+          bordered collapse-mode="width" :collapsed-width="64" :width="240" :collapsed="collapsed"
+          show-trigger @collapse="collapsed = true" @expand="collapsed = false"
+        >
+          <NMenu
+            v-model:value="activeKey" :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22"
+            :options="menuOptions"
+          />
+        </NLayoutSider>
+        <NLayout>
+          <router-view />
+        </NLayout>
+      </NLayout>
+    </NSpace>
   </div>
 </template>
-
-<style scoped>
-.card-tabs {
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-h1 {
-  color: #2c3e50;
-}
-</style>