修改布局、修改侧边栏高亮逻辑

src/components/SliderMenu.vue

@@ -282,4 +282,5 @@ export default {
 // .el-menu--collapse .el-submenu.is-opened > .el-menu {
 //   opacity: 0;
 //   height: 0;
-// }</style>
+// }
+</style>

src/components/SliderScond.vue

@@ -77,11 +77,23 @@ export default {
         GuipToolTip
     },
     watch: {
-        menuList(newVal) {
-            let subtitle = this.renderKeyNew.subtitle;
-            this.activeFloor = newVal[this.curIndex]?.list?.[0][subtitle];
-            this.componentsName = newVal[this.curIndex]?.list?.[0]?.componentsName || '';
-            store.commit('SET_CURRENTMENUITEM', newVal[this.curIndex]?.list?.[0]);
+        menuList:{
+            handler(newVal, oldVal) {
+                // 初次加载或强制刷新时，oldVal为空
+                if (!oldVal || oldVal.length === 0) {
+                    this.setDefaultActive(newVal);
+                    return;
+                }
+                console.log(newVal,'newVal===');
+                // 检查当前高亮的菜单项是否仍然存在于新的menuList中
+                const currentItemExists = this.checkCurrentItem(newVal);
+                console.log(currentItemExists,'currentItemExists--');
+                // 不存在默认高亮第一项
+                if (!currentItemExists) {
+                    this.setDefaultActive(newVal);
+                }
+            },
+            immediate: true
         }
     },
     mounted() {
@@ -105,6 +117,32 @@ export default {
         }
     },
     methods: {
+        checkCurrentItem(newMenuList) {
+            const subtitle = this.renderKeyNew.subtitle;
+            // 如果当前没有高亮的菜单项，返回
+            if (!this.activeFloor) return false;
+            // 遍历新的menuList，先检查高亮的菜单项是否存在
+            for (const item of newMenuList) {
+                if (item.list) {
+                    const found = item.list.some(subItem => 
+                        subItem[subtitle] === this.activeFloor || 
+                        subItem.componentsName === this.activeFloor
+                    );
+                    if (found) return true;
+                }
+            }
+            return false;
+        },
+        setDefaultActive(menuList) {
+            // 设置默认高亮项
+            if (menuList && menuList.length > 0 && menuList[0].list && menuList[0].list.length > 0) {
+                const subtitle = this.renderKeyNew.subtitle;
+                this.activeFloor = menuList[0].list[0][subtitle] || menuList[0].list[0]?.componentsName || '';
+                this.componentsName = menuList[0].list[0]?.componentsName || '';
+                store.commit('SET_CURRENTMENUITEM', menuList[0].list[0]);
+                this.curIndex = 0;
+            }
+        },
         handleChange(val) {
             console.log("面板状态变化:", val);
         },

src/store/index.js

@@ -567,7 +567,7 @@ export default new Vuex.Store({
   },
   mutations: {
     SET_CURRENTMENUITEM(state,data){
-      state.currentMenuItem = JSON.parse(JSON.stringify(data));
+      state.currentMenuItem = data && JSON.parse(JSON.stringify(data));
     },
     SET_COMPONENTS_NAME(state,name){
       state.componentsName = name;
@@ -576,7 +576,7 @@ export default new Vuex.Store({
       state.slidermenu = state[type]
     },
     SET_SECOND_MENU(state,data){
-      state.secondMenu = JSON.parse(JSON.stringify(data))
+      state.secondMenu = data && JSON.parse(JSON.stringify(data))
     },
     SET_CUSTOMIZE(state,show) {
       state.customize = show