feat: 修复菜单收缩问题

README.md

@@ -26,6 +26,8 @@
 
 ## 线上发布注意事项
 
+- loading 界面与产品确认是否需要修改或者移除
+
 - electron客户端图标修改。
   - 启动程序图标 (electron/build/icons/icon.ico)
   - 窗口图标 (electron/main/public/icons/icon.png)

src/layout/main/LeftMenu.vue

@@ -1,22 +1,25 @@
 <template>
   <el-menu
+    ref="menuRef"
     class="main-layout-left-menu"
     unique-opened
     :default-active="defaultActive"
-    :default-openeds="defaultOpeneds"
+    :default-openeds="defaultOpened"
     :collapse="mainLayoutStore.collapse"
+    @open="onOpen"
   >
     <menu-item
       v-for="menu in mainLayoutStore.renderMenus"
       :key="menu.index"
-      :current-index="defaultActive"
+      :current-index="activeIndex"
       :menu="menu"
+      @handle="onHandle"
     ></menu-item>
   </el-menu>
 </template>
 
 <script setup lang="ts" name="MainLayoutLeftMenu">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMenu } from 'element-plus'
 import useMainLayoutStore from '@/store/layout'
@@ -25,7 +28,9 @@ import MenuItem from '@/layout/main/MenuItem.vue'
 const route = useRoute()
 const mainLayoutStore = useMainLayoutStore()
 
-const defaultActive = computed(() => {
+const menuRef = ref<InstanceType<typeof ElMenu> & { close: (index: string) => void }>()
+
+const activeIndex = computed(() => {
   if (route.meta?.menu) {
     return route.meta.menuId
   }
@@ -33,10 +38,28 @@ const defaultActive = computed(() => {
   return ids?.slice(0, -1)?.join('-') || ''
 })
 
-const defaultOpeneds = computed(() => {
-  const rootSub = defaultActive.value.split('-')[0]
+const defaultActive = ref(activeIndex.value)
+
+const defaultOpened = computed(() => {
+  const rootSub = activeIndex.value.split('-')[0]
   return [rootSub]
 })
+
+watch(activeIndex, () => {
+  if (defaultActive.value) {
+    defaultActive.value = ''
+  }
+})
+
+let opened = ''
+
+const onOpen = (index: string) => {
+  opened = index
+}
+
+const onHandle = () => {
+  opened && menuRef.value?.close(opened)
+}
 </script>
 
 <style scoped lang="scss">

src/layout/main/MenuItem.vue

@@ -4,7 +4,8 @@
     :index="menuInfo.index"
     popper-class="main-layout-submenu-popper"
     class="main-layout-sub-menu"
-    :class="{ 'is-collapse': mainLayoutStore.collapse, 'is-active': currentIndex === menuInfo.index }"
+    :class="{ 'is-collapse': mainLayoutStore.collapse, 'active-index': currentIndex === menuInfo.index }"
+    @click="$emit('handle')"
   >
     <div class="flex items-center flex-1 menu-padding-left main-layout-sub-menu-title">
       <component
@@ -24,7 +25,7 @@
     :index="menuInfo.index"
     popper-class="main-layout-submenu-popper"
     class="main-layout-sub-menu"
-    :class="{ 'is-collapse': mainLayoutStore.collapse, 'is-active': currentIndex === menuInfo.index }"
+    :class="{ 'is-collapse': mainLayoutStore.collapse, 'active-index': currentIndex?.startsWith(menu.index) }"
   >
     <template #title>
       <div class="flex items-center flex-1 main-layout-sub-menu-title" :class="{ 'menu-padding-left': hasChildren }">
@@ -39,7 +40,12 @@
       </div>
     </template>
     <template v-for="child in menuInfo.children" :key="child.key">
-      <el-menu-item v-if="!child.children?.length" :index="child.index" class="main-layout-menu-item">
+      <el-menu-item
+        v-if="!child.children?.length"
+        :index="child.index"
+        class="main-layout-menu-item"
+        :class="{ 'active-index': currentIndex === child.index }"
+      >
         <component :is="child.path ? 'router-link' : 'div'" :to="child.path" class="flex items-center flex-1 menu-item">
           <span class="menu-label">{{ child.label }}</span>
         </component>
@@ -97,7 +103,7 @@ const hasChildren = computed(() => !!menuInfo.value.children.length)
     &:hover {
       color: $LayoutLeftMenuItemHoverColor;
     }
-    &.is-active {
+    &.active-index {
       color: $LayoutLeftMenuItemActiveColor;
     }
   }
@@ -113,7 +119,7 @@ const hasChildren = computed(() => !!menuInfo.value.children.length)
       text-align: center;
     }
   }
-  &.is-active {
+  &.active-index {
     > .main-layout-sub-menu-title,
     > .el-sub-menu__title > .main-layout-sub-menu-title {
       color: $color--primary;
@@ -122,7 +128,7 @@ const hasChildren = computed(() => !!menuInfo.value.children.length)
 
   &:not(.is-collapse) {
     // &.is-opened,
-    &.is-active {
+    &.active-index {
       > .main-layout-sub-menu-title,
       > .el-sub-menu__title > .main-layout-sub-menu-title {
         background: $color--primary;