feat: nav

napcat.webui/src/components/Dashboard.vue

@@ -1,13 +1,23 @@
 <template>
-    <div>
+  <SidebarMenu :menuItems="menuItems" />
-        <h1>面板</h1>
-        <p>欢迎来到面板页面！</p>
-    </div>
 </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>

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';

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';

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>

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');