Fixes bug 新增 顶部混合菜单

src/layout/components/Menu/index.vue

@@ -8,17 +8,17 @@
     :collapsed-icon-size="20"
     :indent="24"
     :expanded-keys="openKeys"
-    v-model:value="selectedKeys"
+    :value="getSelectedKeys"
     @update:value="clickMenuItem"
     @update:expanded-keys="menuExpanded"
   />
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, computed, watch, toRefs, unref } from 'vue';
+  import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
-  import { generatorMenu } from '@/utils';
+  import { generatorMenu, generatorMenuMix } from '@/utils';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
   export default defineComponent({
@@ -34,6 +34,11 @@
         // 侧边栏菜单是否收起
         type: Boolean,
       },
+      //位置
+      location: {
+        type: String,
+        default: 'left',
+      },
     },
     setup(props) {
       // 当前路由
@@ -41,6 +46,9 @@
       const router = useRouter();
       const asyncRouteStore = useAsyncRouteStore();
       const settingStore = useProjectSettingStore();
+      const menus = ref<any[]>([]);
+      const selectedKeys = ref<string>(currentRoute.name as string);
+      const headerMenuSelectKey = ref<string>('');
 
       // 获取当前打开的子菜单
       const matched = currentRoute.matched;
@@ -49,23 +57,30 @@
 
       const state = reactive({
         openKeys: getOpenKeys,
-        selectedKeys: currentRoute.name,
       });
 
       const inverted = computed(() => {
         return ['dark', 'header-dark'].includes(settingStore.navTheme);
       });
 
-      const menus = computed(() => {
-        return generatorMenu(asyncRouteStore.getMenus);
+      const getSelectedKeys = computed(() => {
+        return props.location === 'left' ? unref(selectedKeys) : unref(headerMenuSelectKey);
       });
 
+      // 监听分割菜单
+      watch(
+        () => settingStore.menuSetting.mixMenu,
+        () => {
+          updateMenu();
+        }
+      );
+
       // 监听菜单收缩状态
       watch(
         () => props.collapsed,
         (newVal) => {
           state.openKeys = newVal ? [] : getOpenKeys;
-          state.selectedKeys = currentRoute.name;
+          selectedKeys.value = currentRoute.name as string;
         }
       );
 
@@ -73,12 +88,26 @@
       watch(
         () => currentRoute.fullPath,
         () => {
+          updateMenu();
           const matched = currentRoute.matched;
           state.openKeys = matched.map((item) => item.name);
-          state.selectedKeys = currentRoute.name;
+          const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+          selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
         }
       );
 
+      function updateMenu() {
+        if (!settingStore.menuSetting.mixMenu) {
+          menus.value = generatorMenu(asyncRouteStore.getMenus);
+        } else {
+          //混合菜单
+          const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
+          menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
+          const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
+          headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
+        }
+      }
+
       // 点击菜单
       function clickMenuItem(key: string) {
         if (/http(s)?:/.test(key)) {
@@ -101,17 +130,24 @@
         if (!key) return false;
         const subRouteChildren: string[] = [];
         for (const { children, key } of unref(menus)) {
-          if (children && children.length > 0) {
+          if (children && children.length) {
             subRouteChildren.push(key as string);
           }
         }
         return subRouteChildren.includes(key);
       }
 
+      onMounted(() => {
+        updateMenu();
+      });
+
       return {
         ...toRefs(state),
         inverted,
         menus,
+        selectedKeys,
+        headerMenuSelectKey,
+        getSelectedKeys,
         clickMenuItem,
         menuExpanded,
       };