From 1e2c76bb4715789327aeee7bc9e3ee94f5fe9b75 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:25:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 napcat.webui/src/components/Dashboard.vue | 25 +++++++++++++++++------
 napcat.webui/src/components/webui/Nav.vue | 20 +++++++++++++++---
 napcat.webui/src/pages/AboutUs.vue        |  6 ++++++
 napcat.webui/src/pages/BasicInfo.vue      |  6 ++++++
 napcat.webui/src/pages/Log.vue            |  6 ++++++
 napcat.webui/src/pages/NetWork.vue        |  6 ++++++
 napcat.webui/src/pages/OtherConfig.vue    |  6 ++++++
 napcat.webui/src/router/index.ts          | 22 +++++++++++++++++---
 8 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 napcat.webui/src/pages/AboutUs.vue
 create mode 100644 napcat.webui/src/pages/BasicInfo.vue
 create mode 100644 napcat.webui/src/pages/Log.vue
 create mode 100644 napcat.webui/src/pages/NetWork.vue
 create mode 100644 napcat.webui/src/pages/OtherConfig.vue

diff --git a/napcat.webui/src/components/Dashboard.vue b/napcat.webui/src/components/Dashboard.vue
index fa7b5542..4c71cbf2 100644
--- a/napcat.webui/src/components/Dashboard.vue
+++ b/napcat.webui/src/components/Dashboard.vue
@@ -1,5 +1,10 @@
 <template>
-  <SidebarMenu :menuItems="menuItems" />
+  <div>
+    <SidebarMenu :menuItems="menuItems" />
+    <div class="content">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -12,12 +17,20 @@ export default {
   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' }
+        { value: 'item1', icon: 'dashboard', label: '基础信息', route: '/dashboard/basic-info' },
+        { value: 'item3', icon: 'play-circle', label: '网络配置', route: '/dashboard/network-config' },
+        { value: 'item4', icon: 'play-circle', label: '其余配置', route: '/dashboard/other-config' },
+        { value: 'item5', icon: 'edit-1', label: '日志查看', route: '/dashboard/log-view' },
+        { value: 'item6', icon: 'info-circle', label: '关于我们', route: '/dashboard/about-us' }
       ]
     };
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.content {
+  margin-left: 200px; /* 根据侧边栏宽度调整 */
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/napcat.webui/src/components/webui/Nav.vue b/napcat.webui/src/components/webui/Nav.vue
index a8dacb82..c21edea4 100644
--- a/napcat.webui/src/components/webui/Nav.vue
+++ b/napcat.webui/src/components/webui/Nav.vue
@@ -1,10 +1,10 @@
 <template>
-  <t-menu theme="light" default-value="2-1" :collapsed="collapsed">
+  <t-menu theme="light" default-value="2-1" :collapsed="collapsed" class="sidebar-menu">
     <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">
+      <t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
         <template #icon>
           <t-icon :name="item.icon" />
         </template>
@@ -24,4 +24,18 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.sidebar-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 200px; /* 根据需要调整宽度 */
+}
+
+.menu-item {
+  margin-bottom: 10px; /* 根据需要调整间距 */
+}
+</style>
\ No newline at end of file
diff --git a/napcat.webui/src/pages/AboutUs.vue b/napcat.webui/src/pages/AboutUs.vue
new file mode 100644
index 00000000..0dcd1b7a
--- /dev/null
+++ b/napcat.webui/src/pages/AboutUs.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="about-us">
+        <h1>面板关于信息</h1>
+        <p>这里显示面板的关于信息。</p>
+    </div>
+</template>
diff --git a/napcat.webui/src/pages/BasicInfo.vue b/napcat.webui/src/pages/BasicInfo.vue
new file mode 100644
index 00000000..1f9e8418
--- /dev/null
+++ b/napcat.webui/src/pages/BasicInfo.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="basic-info">
+        <h1>面板基础信息</h1>
+        <p>这里显示面板的基础信息。</p>
+    </div>
+</template>
diff --git a/napcat.webui/src/pages/Log.vue b/napcat.webui/src/pages/Log.vue
new file mode 100644
index 00000000..bc19a827
--- /dev/null
+++ b/napcat.webui/src/pages/Log.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="log-view">
+        <h1>面板日志信息</h1>
+        <p>这里显示面板的日志信息。</p>
+    </div>
+</template>
diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
new file mode 100644
index 00000000..57a5b293
--- /dev/null
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="network-config">
+        <h1>网络配置面板</h1>
+        <p>这里显示面板的网络配置面板。</p>
+    </div>
+</template>
diff --git a/napcat.webui/src/pages/OtherConfig.vue b/napcat.webui/src/pages/OtherConfig.vue
new file mode 100644
index 00000000..6a16d33b
--- /dev/null
+++ b/napcat.webui/src/pages/OtherConfig.vue
@@ -0,0 +1,6 @@
+<template>
+    <div class="other-config">
+        <h1>面板其余配置</h1>
+        <p>这里显示面板的其余配置。</p>
+    </div>
+</template>
diff --git a/napcat.webui/src/router/index.ts b/napcat.webui/src/router/index.ts
index e30aea82..5d3173ca 100644
--- a/napcat.webui/src/router/index.ts
+++ b/napcat.webui/src/router/index.ts
@@ -1,13 +1,29 @@
 import { createWebHistory, createRouter } from 'vue-router'
 import Dashboard from '../components/Dashboard.vue';
+import BasicInfo from '../pages/BasicInfo.vue';
+import AboutUs from '../pages/AboutUs.vue';
+import LogView from '../pages/Log.vue';
+import NetWork from '../pages/NetWork.vue';
 import QQLogin from '../components/QQLogin.vue';
 import WebUiLogin from '../components/WebUiLogin.vue';
-
+import OtherConfig from '../pages/OtherConfig.vue';
 const routes = [
   { path: '/', redirect: '/webui' },
   { path: '/webui', component: WebUiLogin, name: 'WebUiLogin' },
-  { path: '/qqlogin', component: QQLogin , name: 'QQLogin'},
-  { path: '/dashboard', component: Dashboard, name: 'Dashboard' }
+  { path: '/qqlogin', component: QQLogin, name: 'QQLogin' },
+  {
+    path: '/dashboard',
+    component: Dashboard,
+    name: 'Dashboard',
+    children: [
+      { path: '', redirect: 'basic-info' },
+      { path: 'basic-info', component: BasicInfo, name: 'BasicInfo' },
+      { path: 'network-config', component: NetWork, name: 'NetWork' },
+      { path: 'log-view', component: LogView, name: 'LogView' },
+      { path: 'other-config', component: OtherConfig, name: 'OtherConfig' },
+      { path: 'about-us', component: AboutUs, name: 'AboutUs' }
+    ]
+  }
 ]
 
 export const router = createRouter({