优化左侧菜单

src/assets/json/authMenuList.json

@@ -6,7 +6,8 @@
       "name": "home",
       "component": "/home/index",
       "meta": {
-        "icon": "HomeFilled",
+        "icon": "alarm",
+        "iconActive": "alarmActive",
         "title": "首页",
         "isLink": "",
         "isHide": false,
@@ -20,7 +21,8 @@
       "name": "monitoringAlarms",
       "redirect": "/alarm/allData",
       "meta": {
-        "icon": "MessageBox",
+        "icon": "alarm",
+        "iconActive": "alarmActive",
         "title": "实时监测报警",
         "isLink": "",
         "isHide": false,
@@ -127,7 +129,8 @@
       "name": "dataAnalysis",
       "redirect": "/analysis/dataSynthesis",
       "meta": {
-        "icon": "MessageBox",
+        "icon": "analysis",
+        "iconActive": "analysisActive",
         "title": "数据分析显示",
         "isLink": "",
         "isHide": false,
@@ -208,7 +211,8 @@
       "name": "dataQueryOutput",
       "redirect": "/query/queryObservationData",
       "meta": {
-        "icon": "MessageBox",
+        "icon": "query",
+        "iconActive": "queryActive",
         "title": "数据查询输出",
         "isLink": "",
         "isHide": false,
@@ -328,7 +332,8 @@
       "name": "system",
       "redirect": "/system/user",
       "meta": {
-        "icon": "MessageBox",
+        "icon": "system",
+        "iconActive": "systemActive",
         "title": "系统管理",
         "isLink": "",
         "isHide": false,
@@ -396,7 +401,8 @@
       "name": "maintenance",
       "redirect": "/maintenance/siteRecords",
       "meta": {
-        "icon": "MessageBox",
+        "icon": "maintenance",
+        "iconActive": "maintenanceActive",
         "title": "维护管理",
         "isLink": "",
         "isHide": false,

src/layouts/components/Header/ToolBarLeft.vue

@@ -24,6 +24,7 @@ const globalStore = useGlobalStore();
 
 .toolText {
   color: var(--el-header-text-color);
-  font-size: 18px;
+  font-size: 16px;
+  margin-bottom: 5px;
 }
 </style>

src/layouts/components/Menu/SubMenu.vue

@@ -3,15 +3,15 @@
     <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
       <template #title>
         <el-icon v-if="subItem.meta.icon">
-          <component :is="subItem.meta.icon"></component>
+          <img class="img-icons" :src="getCustomIcon(isActive(subItem) ? subItem.meta.iconActive : subItem.meta.icon)" />
         </el-icon>
-        <span class="sle">{{ subItem.meta.title }}</span>
+        <span class="sle" :class="isActive(subItem) ? 'menu-title-active' : 'menu-title'">{{ subItem.meta.title }}</span>
       </template>
       <SubMenu :menu-list="subItem.children" />
     </el-sub-menu>
     <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
       <el-icon v-if="subItem.meta.icon">
-        <component :is="subItem.meta.icon"></component>
+        <img class="img-icons" :src="getCustomIcon(isActive(subItem) ? subItem.meta.iconActive : subItem.meta.icon)" />
       </el-icon>
       <template #title>
         <span class="sle">{{ subItem.meta.title }}</span>
@@ -22,6 +22,16 @@
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
+import alarm from "@/assets/images/alarm.png";
+import alarmActive from "@/assets/images/alarm-active.png";
+import analysis from "@/assets/images/analysis.png";
+import analysisActive from "@/assets/images/analysis-active.png";
+import query from "@/assets/images/query.png";
+import queryActive from "@/assets/images/query-active.png";
+import system from "@/assets/images/system.png";
+import systemActive from "@/assets/images/system-active.png";
+import maintenance from "@/assets/images/maintenance.png";
+import maintenanceActive from "@/assets/images/maintenance-active.png";
 
 defineProps<{ menuList: Menu.MenuOptions[] }>();
 
@@ -30,6 +40,27 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
   if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
   router.push(subItem.path);
 };
+
+const isActive = (subItem: Menu.MenuOptions) => {
+  const currentPath = router.currentRoute.value.fullPath;
+  return subItem.path === currentPath || subItem.children?.some(child => child.path === currentPath);
+};
+
+const getCustomIcon = (iconName: string) => {
+  const icons = {
+    alarm: alarm,
+    alarmActive: alarmActive,
+    analysis: analysis,
+    analysisActive: analysisActive,
+    query: query,
+    queryActive: queryActive,
+    system: system,
+    systemActive: systemActive,
+    maintenance: maintenance,
+    maintenanceActive: maintenanceActive
+  };
+  return icons[iconName] || null;
+};
 </script>
 
 <style lang="scss">
@@ -37,6 +68,20 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
   color: var(--el-menu-hover-text-color) !important;
   background-color: transparent !important;
 }
+.menu-title-active {
+  color: var(--el-menu-active-color) !important;
+}
+
+.menu-title {
+  color: var(--el-menu-hover-text-color) !important;
+}
+
+.img-icons {
+  width: 24px;
+  height: 24px;
+  margin-right: 5px;
+}
+
 .el-menu--collapse {
   .is-active {
     .el-sub-menu__title {

src/typings/global.d.ts

@@ -10,6 +10,7 @@ declare namespace Menu {
   }
   interface MetaProps {
     icon: string;
+    iconActive?: string;
     title: string;
     activeMenu?: string;
     isLink?: string;