feat: 调整基础样式

napcat.webui/src/components/Dashboard.vue

@@ -18,9 +18,9 @@ export default {
     return {
       menuItems: [
         { 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: 'item3', icon: 'wifi-1', label: '网络配置', route: '/dashboard/network-config' },
+        { value: 'item4', icon: 'setting', label: '其余配置', route: '/dashboard/other-config' },
+        { value: 'item5', icon: 'system-log', label: '日志查看', route: '/dashboard/log-view' },
         { value: 'item6', icon: 'info-circle', label: '关于我们', route: '/dashboard/about-us' }
       ]
     };
@@ -33,4 +33,11 @@ export default {
   margin-left: 200px; /* 根据侧边栏宽度调整 */
   padding: 20px;
 }
+
+@media (max-width: 768px) {
+  .content {
+    margin-left: 0; /* 移动端侧边栏收起 */
+    padding: 10px;
+  }
+}
 </style>

napcat.webui/src/components/webui/Nav.vue

@@ -1,7 +1,6 @@
 <template>
   <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" class="menu-item">
@@ -11,19 +10,42 @@
         {{ item.label }}
       </t-menu-item>
     </router-link>
+    <template #operations>
+      <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
+        <template #icon><t-icon :name="iconName" /></template>
+      </t-button>
+    </template>
   </t-menu>
 </template>
 
 <script>
-export default {
+import { defineComponent, ref, onMounted } from 'vue';
+
+export default defineComponent({
   name: 'SidebarMenu',
   props: {
     menuItems: {
       type: Array,
       required: true
     }
+  },
+  setup() {
+    const collapsed = ref(localStorage.getItem('sidebar-collapsed') === 'true');
+    const iconName = ref(collapsed.value ? 'menu-unfold' : 'menu-fold');
+
+    const changeCollapsed = () => {
+      collapsed.value = !collapsed.value;
+      iconName.value = collapsed.value ? 'menu-unfold' : 'menu-fold';
+      localStorage.setItem('sidebar-collapsed', collapsed.value);
+    };
+
+    return {
+      collapsed,
+      iconName,
+      changeCollapsed
+    };
   }
-}
+});
 </script>
 
 <style scoped>
@@ -32,10 +54,24 @@ export default {
   top: 0;
   left: 0;
   height: 100%;
-  width: 200px; /* 根据需要调整宽度 */
+  width: 200px; 
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
+}
+
+@media (max-width: 768px) {
+  .sidebar-menu {
+    width: 100px; /* 移动端侧边栏宽度 */
+  }
+}
+
+.logo-text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .menu-item {
-  margin-bottom: 10px; /* 根据需要调整间距 */
+  margin-bottom: 10px;
 }
 </style>

napcat.webui/src/router/index.ts

@@ -7,6 +7,7 @@ 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' },
@@ -14,7 +15,6 @@ const routes = [
   {
     path: '/dashboard',
     component: Dashboard,
-    name: 'Dashboard',
     children: [
       { path: '', redirect: 'basic-info' },
       { path: 'basic-info', component: BasicInfo, name: 'BasicInfo' },