feat: 布局面板基础结构

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>
+</script>
+
+<style scoped>
+.content {
+  margin-left: 200px; /* 根据侧边栏宽度调整 */
+  padding: 20px;
+}
+</style>

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>
+</script>
+
+<style scoped>
+.sidebar-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 200px; /* 根据需要调整宽度 */
+}
+
+.menu-item {
+  margin-bottom: 10px; /* 根据需要调整间距 */
+}
+</style>

napcat.webui/src/pages/AboutUs.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="about-us">
+        <h1>面板关于信息</h1>
+        <p>这里显示面板的关于信息。</p>
+    </div>
+</template>

napcat.webui/src/pages/BasicInfo.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="basic-info">
+        <h1>面板基础信息</h1>
+        <p>这里显示面板的基础信息。</p>
+    </div>
+</template>

napcat.webui/src/pages/Log.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="log-view">
+        <h1>面板日志信息</h1>
+        <p>这里显示面板的日志信息。</p>
+    </div>
+</template>

napcat.webui/src/pages/NetWork.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="network-config">
+        <h1>网络配置面板</h1>
+        <p>这里显示面板的网络配置面板。</p>
+    </div>
+</template>

napcat.webui/src/pages/OtherConfig.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="other-config">
+        <h1>面板其余配置</h1>
+        <p>这里显示面板的其余配置。</p>
+    </div>
+</template>

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({