fix:修改侧边栏样式

src/components/layout/SidebarMenuItem.vue

@@ -1,22 +1,25 @@
 <template>
   <el-sub-menu v-if="hasChildren" :index="menu.path">
     <template #title>
-      <el-icon v-if="menu.icon || menu.meta?.icon">
+      <el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
         <component :is="menu.icon || menu.meta?.icon" />
       </el-icon>
-      <span>{{ menu.title || menu.meta?.title }}</span>
+      <span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
     </template>
     <sidebar-menu-item 
       v-for="child in menu.children" 
       :key="child.path" 
-      :menu="child" 
+      :menu="child"
+      :level="level + 1"
     />
   </el-sub-menu>
   <el-menu-item v-else :index="menu.path">
-    <el-icon v-if="menu.icon || menu.meta?.icon">
+    <el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
       <component :is="menu.icon || menu.meta?.icon" />
     </el-icon>
-    <template #title>{{ menu.title || menu.meta?.title }}</template>
+    <template #title>
+      <span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
+    </template>
   </el-menu-item>
 </template>
 
@@ -29,6 +32,10 @@ const props = defineProps({
   menu: {
     type: Object,
     required: true
+  },
+  level: {
+    type: Number,
+    default: 1
   }
 })
 
@@ -39,49 +46,45 @@ const hasChildren = computed(() => {
 </script>
 
 <style scoped>
-.el-icon {
-  margin-right: 12px;
+/* 菜单图标样式 */
+.menu-icon {
+  margin-right: 10px;
   width: 20px;
   height: 20px;
   text-align: center;
   color: #7f8c8d;
   transition: color 0.2s ease;
   font-size: 18px;
+  flex-shrink: 0;
 }
 
-.el-menu-item .el-icon, :deep(.el-sub-menu__title .el-icon) {
+/* 菜单标题 */
+.menu-title {
+  font-size: inherit;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 图标交互状态 */
+.el-menu-item .menu-icon, 
+:deep(.el-sub-menu__title .menu-icon) {
   color: #7f8c8d !important;
   transition: color 0.2s ease;
 }
 
-.el-menu-item:hover .el-icon, 
-:deep(.el-sub-menu__title:hover .el-icon) {
+.el-menu-item:hover .menu-icon, 
+:deep(.el-sub-menu__title:hover .menu-icon) {
   color: #34495e !important;
 }
 
 /* 激活菜单项图标 */
-.el-menu-item.is-active .el-icon {
+.el-menu-item.is-active .menu-icon {
   color: #2c3e50 !important;
 }
 
-:deep(.el-sub-menu.is-active > .el-sub-menu__title .el-icon) {
+:deep(.el-sub-menu.is-opened > .el-sub-menu__title .menu-icon) {
   color: #2c3e50 !important;
 }
-
-/* 菜单文字样式 */
-.el-menu-item span, :deep(.el-sub-menu__title span) {
-  font-size: 14px;
-  letter-spacing: 0.2px;
-}
-
-/* 子菜单项样式优化 */
-:deep(.el-sub-menu .el-menu-item) {
-  font-size: 13px;
-  padding-left: 48px !important;
-}
-
-:deep(.el-sub-menu .el-menu-item .el-icon) {
-  font-size: 16px;
-  margin-right: 10px;
-}
 </style>