refactor: 代码调整

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 160,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "my-app",
+  "name": "Zhiju",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-app",
+      "name": "Zhiju",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -933,7 +933,6 @@
       "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chalk": "^4.1.1",
         "fs-extra": "^9.0.1",
@@ -2089,7 +2088,6 @@
       "integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^3.0.1",
         "@inquirer/confirm": "^4.0.1",
@@ -3174,7 +3172,6 @@
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -3195,7 +3192,6 @@
       "integrity": "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -3625,7 +3621,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3692,7 +3687,6 @@
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -3978,7 +3972,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -5531,6 +5524,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -7740,15 +7744,13 @@
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash-es": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
       "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
@@ -10016,7 +10018,6 @@
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10137,7 +10138,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -10197,7 +10197,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.32.tgz",
       "integrity": "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.32",
         "@vue/compiler-sfc": "3.5.32",
@@ -10278,7 +10277,6 @@
       "integrity": "sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",

src/renderer/App.vue

@@ -2,12 +2,7 @@
   <div class="flex flex-col h-screen w-screen overflow-hidden">
     <div class="flex flex-1 overflow-hidden">
       <!-- 侧边栏 -->
-      <aside
+      <aside :class="['flex flex-col bg-white border-r border-gray-200 transition-all duration-300 no-drag', appStore.collapsed ? 'w-16' : 'w-56']">
-        :class="[
-          'flex flex-col bg-white border-r border-gray-200 transition-all duration-300 no-drag',
-          appStore.collapsed ? 'w-16' : 'w-56',
-        ]"
-      >
         <!-- Logo -->
         <div class="flex items-center h-14 px-4 border-b border-gray-200 shrink-0">
           <el-icon class="text-blue-500 text-xl shrink-0"><Monitor /></el-icon>
@@ -18,27 +13,45 @@
           </template>
         </div>
 
-        <!-- 导航菜单 -->
+        <!-- 自定义菜单 -->
-        <el-menu
+        <nav class="flex-1 px-3 py-4 space-y-1">
-          :default-active="$route.path"
+          <div
-          :collapse="appStore.collapsed"
+            v-for="(item, index) in menus"
-          :collapse-transition="false"
+            :key="index"
-          router
+            :class="[
-          class="flex-1 border-none"
+              'flex items-center rounded-xl cursor-pointer transition-all duration-200 ease-out group relative overflow-hidden',
+              appStore.collapsed ? 'justify-center px-0 py-3 mx-auto w-11' : 'px-4 py-3 mx-0',
+              $route.path === item.index
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-md shadow-blue-200'
+                : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
+            ]"
+            @click="router.push(item.index)"
           >
-          <el-menu-item index="/">
+            <!-- 图标 -->
-            <el-icon><House /></el-icon>
+            <div
-            <template #title>首页</template>
+              :class="[
-          </el-menu-item>
+                'flex items-center justify-center shrink-0 transition-transform duration-200',
-          <el-menu-item index="/chat">
+                appStore.collapsed ? 'w-6 h-6' : 'w-5 h-5',
-            <el-icon><ChatDotRound /></el-icon>
+                $route.path === item.index ? 'scale-110' : 'group-hover:scale-105',
-            <template #title>OpenCode 对话</template>
+              ]"
-          </el-menu-item>
+            >
-          <el-menu-item index="/bonjour">
+              <el-icon :class="['transition-colors duration-200', appStore.collapsed ? 'text-xl' : 'text-lg']">
-            <el-icon><Search /></el-icon>
+                <component :is="item.icon" />
-            <template #title>发现设备</template>
+              </el-icon>
-          </el-menu-item>
+            </div>
-        </el-menu>
+
+            <!-- 文字 -->
+            <span v-show="!appStore.collapsed" class="ml-3 text-sm font-medium whitespace-nowrap transition-all duration-200">
+              {{ item.name }}
+            </span>
+
+            <!-- Active 指示条 -->
+            <div
+              v-if="$route.path === item.index && !appStore.collapsed"
+              class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-white/50 rounded-l-full"
+            />
+          </div>
+        </nav>
 
         <!-- 折叠按钮 -->
         <div class="p-3 border-t border-gray-200">
@@ -84,11 +97,20 @@
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useAppStore } from '@/stores/app';
-import { House, Monitor, Expand, Fold, ChatDotRound, Search } from '@element-plus/icons-vue';
+import { House, Monitor, Expand, Fold, ChatDotRound, Search, Collection, Clock } from '@element-plus/icons-vue';
+import router from '@/router';
 
 const route = useRoute();
 const appStore = useAppStore();
 
+const menus = ref([
+  { name: '新对话', index: '/', icon: House },
+  { name: '知识空间', index: '/knowledge', icon: Collection },
+  { name: 'opencode对话', index: '/chat', icon: ChatDotRound },
+  { name: '发现设备', index: '/bonjour', icon: Search },
+  { name: '历史对话', index: '/history', icon: Clock },
+]);
+
 const showAppInfo = ref(false);
 
 const currentTitle = computed(() => route.meta?.title || appStore.title);