refactor: 代码调整

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
-        :class="[
-          'flex flex-col bg-white border-r border-gray-200 transition-all duration-300 no-drag',
-          appStore.collapsed ? 'w-16' : 'w-56',
-        ]"
-      >
+      <aside :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
-          :default-active="$route.path"
-          :collapse="appStore.collapsed"
-          :collapse-transition="false"
-          router
-          class="flex-1 border-none"
-        >
-          <el-menu-item index="/">
-            <el-icon><House /></el-icon>
-            <template #title>首页</template>
-          </el-menu-item>
-          <el-menu-item index="/chat">
-            <el-icon><ChatDotRound /></el-icon>
-            <template #title>OpenCode 对话</template>
-          </el-menu-item>
-          <el-menu-item index="/bonjour">
-            <el-icon><Search /></el-icon>
-            <template #title>发现设备</template>
-          </el-menu-item>
-        </el-menu>
+        <!-- 自定义菜单 -->
+        <nav class="flex-1 px-3 py-4 space-y-1">
+          <div
+            v-for="(item, index) in menus"
+            :key="index"
+            :class="[
+              '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)"
+          >
+            <!-- 图标 -->
+            <div
+              :class="[
+                'flex items-center justify-center shrink-0 transition-transform duration-200',
+                appStore.collapsed ? 'w-6 h-6' : 'w-5 h-5',
+                $route.path === item.index ? 'scale-110' : 'group-hover:scale-105',
+              ]"
+            >
+              <el-icon :class="['transition-colors duration-200', appStore.collapsed ? 'text-xl' : 'text-lg']">
+                <component :is="item.icon" />
+              </el-icon>
+            </div>
+
+            <!-- 文字 -->
+            <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);