解决左侧图标问题

src/layouts/MainLayout.vue

@@ -231,27 +231,42 @@ const handleLogout = () => {
   color: #666;
   font-size: 14px;
   background-color: #fff;
+  height: 40px;
+  line-height: 40px;
 }
 ::v-deep .el-sub-menu {
   color: #666;
   font-size: 14px;
   background-color: #fff;
   .el-sub-menu__title {
-    height: 100%;
+    height: 40px;
+    line-height: 40px;
   }
 }
 :deep(.el-menu-item.is-active) {
   color: #0084ff;
-  border-right: 4px solid #3d84ee;
   background-color: #f1f7ff;
 }
 
+/* 子菜单被激活时，父菜单也高亮 */
+:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+  color: #0084ff !important;
+  // background-color: #b3d7ff !important;
+}
+
 /* 完全去掉系统管理子菜单的背景色 */
 :deep(.el-sub-menu__title) {
   color: #666;
   background-color: #fff !important;
 }
 
+/* 图标样式 */
+:deep(.el-menu-item .el-icon),
+:deep(.el-sub-menu__title .el-icon) {
+  font-size: 14px;
+  margin-right: 8px;
+}
+
 .city-header {
   width: 100%;
   height: 48px;
@@ -315,7 +330,7 @@ const handleLogout = () => {
 
 .city-aside {
   background-color: #fff;
-  width: 240px;
+  width: 210px;
   height: 100%;
   box-shadow: 0 6px 10px 0 rgba(36, 36, 63, 0.05);
   overflow: auto;

src/layouts/leftMenu.vue

 <template>
-    <el-menu
-        :default-active="$route.path"
-        router
-    >
-        <template v-for="item in menuList">
-            <template v-if="item.children && item.children.length">
-                <left-menu-item :key="item.id?.toString()" :menuItem="item"></left-menu-item>
-            </template>
-            <template v-else>
-                <el-menu-item :key="item.id?.toString()" :index="item.url">
-                    <span>{{ item.name }}</span>
-                </el-menu-item>
-            </template>
-        </template>
-    </el-menu>
+  <el-menu :default-active="$route.path" router>
+    <template v-for="item in menuList">
+      <template v-if="item.children && item.children.length">
+        <left-menu-item
+          :key="item.id?.toString()"
+          :menuItem="item"
+        ></left-menu-item>
+      </template>
+      <template v-else>
+        <el-menu-item :key="item.id?.toString()" :index="item.url">
+          <el-icon><component :is="getIcon(item.name)" /></el-icon>
+          <span>{{ item.name }}</span>
+        </el-menu-item>
+      </template>
+    </template>
+  </el-menu>
 </template>
 
 <script setup>
-    import LeftMenuItem from "./leftMenuItem.vue";
-    const menuList = sessionStorage.getItem("userInfo") ? JSON.parse(sessionStorage.getItem("userInfo")).menus : [];
+import LeftMenuItem from "./leftMenuItem.vue";
+import * as Icons from "@element-plus/icons-vue";
+
+const menuList = sessionStorage.getItem("userInfo")
+  ? JSON.parse(sessionStorage.getItem("userInfo")).menus
+  : [];
+
+// 根据菜单名称获取对应图标
+const getIcon = (name) => {
+  const iconMap = {
+    数据大屏: "DataLine",
+    消息中心: "Bell",
+    模板管理: "MagicStick",
+  };
+
+  const iconName = iconMap[name] || "Menu";
+  return Icons[iconName] || Icons.Menu;
+};
 </script>
 
-<style lang="less"></style>
\ No newline at end of file
+<style lang="less"></style>

src/layouts/leftMenuItem.vue

 <template>
-    <el-sub-menu :index="menuItem.id?.toString()">
-        <template #title>
-            <span>{{ menuItem.name }}</span>
-        </template>
-        <template v-for="(child, index) in menuItem.children" :key="index">
-            <left-menu-item v-if="child.children && child.children.length"></left-menu-item>
-            <el-menu-item v-else
-                :index="child.url"
-            >
-                <span>{{ child.name }}</span>
-            </el-menu-item>
-        </template>
-    </el-sub-menu>
+  <el-sub-menu :index="menuItem.id?.toString()">
+    <template #title>
+      <el-icon><component :is="getIcon(menuItem.name)" /></el-icon>
+      <span>{{ menuItem.name }}</span>
+    </template>
+    <template v-for="(child, index) in menuItem.children" :key="index">
+      <left-menu-item
+        v-if="child.children && child.children.length"
+        :menuItem="child"
+      ></left-menu-item>
+      <el-menu-item v-else :index="child.url">
+        <span>{{ child.name }}</span>
+      </el-menu-item>
+    </template>
+  </el-sub-menu>
 </template>
 
 <script setup>
-    import { defineProps } from 'vue';
-    const props = defineProps({
-        menuItem: {
-            type: Object,
-            default: {}
-        }
-    })
+import { defineProps } from "vue";
+import * as Icons from "@element-plus/icons-vue";
+
+const props = defineProps({
+  menuItem: {
+    type: Object,
+    default: {},
+  },
+});
+
+// 根据菜单名称获取对应图标（仅用于父菜单，子菜单不显示图标）
+const getIcon = (name) => {
+  const iconMap = {
+    系统管理: "Setting",
+    代码生成: "MagicStick",
+    投前管理: "Calendar",
+    投中管理: "Cloudy",
+    投后管理: "Wallet",
+    日常管理: "Document",
+    其他管理: "Files",
+    模板管理: "DocumentCopy",
+  };
+
+  const iconName = iconMap[name] || "Menu";
+  return Icons[iconName] || Icons.Menu;
+};
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>