fix: ai应用侧边栏调整

Yi.Ai.Vue3/src/pages/chat/index.vue

@@ -61,7 +61,7 @@ window.addEventListener('resize', checkIsMobile);
       </div>
       <el-menu
         :default-active="activeNav"
-        class="nav-menu"
+        class="nav-menu custom-menu"
         :collapse="isCollapsed"
         :collapse-transition="false"
       >
@@ -69,13 +69,16 @@ window.addEventListener('resize', checkIsMobile);
           v-for="item in navItems"
           :key="item.name"
           :index="item.name"
+          class="nav-menu-item"
           @click="handleNavSelect(item)"
         >
-          <el-icon>
+          <template #default>
+            <div class="menu-content">
+              <el-icon class="menu-icon">
                 <component :is="item.icon" />
               </el-icon>
-          <template #title>
-            <span>{{ item.label }}</span>
+              <span class="menu-label">{{ item.label }}</span>
+            </div>
           </template>
         </el-menu-item>
       </el-menu>
@@ -302,4 +305,41 @@ window.addEventListener('resize', checkIsMobile);
     padding: 15px;
   }
 }
+
+/* 重要：需要深度选择器覆盖 Element Plus 默认样式 */
+.custom-menu :deep(.el-menu-item) {
+  height: auto !important;
+  min-height: 56px !important; /* 设置最小高度 */
+  padding: 12px 0 !important;
+  line-height: normal !important;
+}
+
+.custom-menu :deep(.el-menu-item .menu-content) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.custom-menu :deep(.el-menu-item .menu-icon) {
+  margin: 0 !important;
+  font-size: 20px;
+}
+
+.custom-menu :deep(.el-menu-item .menu-label) {
+  margin-top: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* 处理激活状态 */
+.custom-menu :deep(.el-menu-item.is-active) {
+  background-color: var(--el-color-primary-light-9);
+}
+
+.custom-menu :deep(.el-menu-item:hover) {
+  background-color: var(--el-color-primary-light-8);
+}
 </style>