From ddc0ed066db0f4d75609219ab5737e240d552b39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?=
 <nanaeonn@outlook.com>
Date: Fri, 15 Nov 2024 13:03:18 +0800
Subject: [PATCH] feat: nav

---
 napcat.webui/src/components/Dashboard.vue  | 24 +++++++++++++------
 napcat.webui/src/components/QQLogin.vue    |  1 +
 napcat.webui/src/components/WebUiLogin.vue |  1 +
 napcat.webui/src/components/webui/Nav.vue  | 27 ++++++++++++++++++++++
 napcat.webui/src/main.ts                   | 10 +++++++-
 5 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 napcat.webui/src/components/webui/Nav.vue

diff --git a/napcat.webui/src/components/Dashboard.vue b/napcat.webui/src/components/Dashboard.vue
index 14edff81..fa7b5542 100644
--- a/napcat.webui/src/components/Dashboard.vue
+++ b/napcat.webui/src/components/Dashboard.vue
@@ -1,13 +1,23 @@
 <template>
-    <div>
-        <h1>面板</h1>
-        <p>欢迎来到面板页面！</p>
-    </div>
+  <SidebarMenu :menuItems="menuItems" />
 </template>
 
 <script>
-import '../css/style.css';
+import SidebarMenu from './webui/Nav.vue';
+
 export default {
-  name: 'Dashboard'
-};
+  components: {
+    SidebarMenu
+  },
+  data() {
+    return {
+      menuItems: [
+        { value: 'item1', icon: 'dashboard', label: '基础信息', route: '/basic-info' },
+        { value: 'item3', icon: 'play-circle', label: '网络配置', route: '/network-config' },
+        { value: 'item4', icon: 'edit-1', label: '日志查看', route: '/log-view' },
+        { value: 'item5', icon: 'info-circle', label: '关于我们', route: '/about-us' }
+      ]
+    };
+  }
+}
 </script>
\ No newline at end of file
diff --git a/napcat.webui/src/components/QQLogin.vue b/napcat.webui/src/components/QQLogin.vue
index 3286d5e3..3a6ad5b6 100644
--- a/napcat.webui/src/components/QQLogin.vue
+++ b/napcat.webui/src/components/QQLogin.vue
@@ -21,6 +21,7 @@
 </template>
 
 <script setup>
+import '../css/style.css';
 import { ref, onMounted } from 'vue';
 import { Button as TButton, Select as TSelect, Option as TOption, MessagePlugin } from 'tdesign-vue-next';
 import QRCode from 'qrcode';
diff --git a/napcat.webui/src/components/WebUiLogin.vue b/napcat.webui/src/components/WebUiLogin.vue
index 31ba2996..2d51fd9b 100644
--- a/napcat.webui/src/components/WebUiLogin.vue
+++ b/napcat.webui/src/components/WebUiLogin.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script setup>
+import '../css/style.css';
 import '../css/font.css';
 import { reactive, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
diff --git a/napcat.webui/src/components/webui/Nav.vue b/napcat.webui/src/components/webui/Nav.vue
new file mode 100644
index 00000000..a8dacb82
--- /dev/null
+++ b/napcat.webui/src/components/webui/Nav.vue
@@ -0,0 +1,27 @@
+<template>
+  <t-menu theme="light" default-value="2-1" :collapsed="collapsed">
+    <template #logo>
+      <span>WebUi</span>
+    </template>
+    <router-link v-for="item in menuItems" :key="item.value" :to="item.route">
+      <t-menu-item :value="item.value" :disabled="item.disabled">
+        <template #icon>
+          <t-icon :name="item.icon" />
+        </template>
+        {{ item.label }}
+      </t-menu-item>
+    </router-link>
+  </t-menu>
+</template>
+
+<script>
+export default {
+  name: 'SidebarMenu',
+  props: {
+    menuItems: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/napcat.webui/src/main.ts b/napcat.webui/src/main.ts
index 9c9c0679..7112cef7 100644
--- a/napcat.webui/src/main.ts
+++ b/napcat.webui/src/main.ts
@@ -6,7 +6,11 @@ import {
     Form as TForm,
     FormItem as TFormItem,
     Select as TSelect,
-    Option as TOption
+    Option as TOption,
+    Menu as TMenu,
+    MenuItem as TMenuItem,
+    Icon as TIcon,
+    Submenu as TSubmenu,
 
 } from 'tdesign-vue-next';
 import { router } from './router';
@@ -19,4 +23,8 @@ app.use(TForm);
 app.use(TFormItem);
 app.use(TSelect);
 app.use(TOption);
+app.use(TMenu);
+app.use(TMenuItem);
+app.use(TIcon);
+app.use(TSubmenu);
 app.mount('#app');
\ No newline at end of file