Fixes bug 新增顶部混合菜单

2026-02-16 19:22:27 +08:00 · 2021-08-06 17:06:33 +08:00
parent 450234e7ea
commit 3e0b8efe7e
19 changed files with 432 additions and 63 deletions
--- a/src/layout/components/Header/ProjectSetting.vue
+++ b/src/layout/components/Header/ProjectSetting.vue
@@ -46,7 +46,11 @@
          <div class="drawer-setting-item-style align-items-top">
            <n-tooltip placement="top">
              <template #trigger>
-                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')" />
+                <img
+                  src="~@/assets/images/nav-theme-dark.svg"
+                  @click="togNavMode('vertical')"
+                  alt="左侧菜单模式"
+                />
              </template>
              <span>左侧菜单模式</span>
            </n-tooltip>
@@ -56,12 +60,30 @@
          <div class="drawer-setting-item-style">
            <n-tooltip placement="top">
              <template #trigger>
-                <img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')" />
+                <img
+                  src="~@/assets/images/nav-horizontal.svg"
+                  alt="顶部菜单模式"
+                  @click="togNavMode('horizontal')"
+                />
              </template>
              <span>顶部菜单模式</span>
            </n-tooltip>
            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
          </div>
+
+          <div class="drawer-setting-item-style">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-horizontal-mix.svg"
+                  @click="togNavMode('horizontal-mix')"
+                  alt="顶部菜单混合模式"
+                />
+              </template>
+              <span>顶部菜单混合模式</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal-mix'" />
+          </div>
        </div>

        <n-divider title-placement="center">导航栏风格</n-divider>
@@ -70,7 +92,11 @@
          <div class="drawer-setting-item-style align-items-top">
            <n-tooltip placement="top">
              <template #trigger>
-                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')" />
+                <img
+                  src="~@/assets/images/nav-theme-dark.svg"
+                  alt="暗色侧边栏"
+                  @click="togNavTheme('dark')"
+                />
              </template>
              <span>暗色侧边栏</span>
            </n-tooltip>
@@ -80,7 +106,11 @@
          <div class="drawer-setting-item-style">
            <n-tooltip placement="top">
              <template #trigger>
-                <img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')" />
+                <img
+                  src="~@/assets/images/nav-theme-light.svg"
+                  alt="白色侧边栏"
+                  @click="togNavTheme('light')"
+                />
              </template>
              <span>白色侧边栏</span>
            </n-tooltip>
@@ -95,6 +125,7 @@
                <img
                  src="~@/assets/images/header-theme-dark.svg"
                  @click="togNavTheme('header-dark')"
+                  alt="暗色顶栏"
                />
              </template>
              <span>暗色顶栏</span>
@@ -105,6 +136,16 @@

        <n-divider title-placement="center">界面功能</n-divider>

+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 分割菜单 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch
+              :disabled="settingStore.navMode === 'horizontal-mix' ? false : true"
+              v-model:value="settingStore.menuSetting.mixMenu"
+            />
+          </div>
+        </div>
+
        <div class="drawer-setting-item">
          <div class="drawer-setting-item-title"> 固定顶栏 </div>
          <div class="drawer-setting-item-action">
@@ -312,6 +353,7 @@
    .justify-center {
      justify-content: center;
    }
+
    .dark-switch .n-switch {
      ::v-deep(.n-switch__rail) {
        background-color: #000e1c;
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -1,8 +1,16 @@
 <template>
  <div class="layout-header">
    <!--顶部菜单-->
-    <div class="layout-header-left" v-if="navMode === 'horizontal'">
-      <AsideMenu v-model:collapsed="collapsed" :inverted="getInverted" mode="horizontal" />
+    <div
+      class="layout-header-left"
+      v-if="navMode === 'horizontal' || (navMode === 'horizontal-mix' && mixMenu)"
+    >
+      <AsideMenu
+        v-model:collapsed="collapsed"
+        v-model:location="getMenuLocation"
+        :inverted="getInverted"
+        mode="horizontal"
+      />
    </div>
    <!--左侧菜单-->
    <div class="layout-header-left" v-else>
@@ -161,6 +169,10 @@
        return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
      });

+      const mixMenu = computed(() => {
+        return unref(getMenuSetting).mixMenu;
+      });
+
      const getChangeStyle = computed(() => {
        const { collapsed } = props;
        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
@@ -170,6 +182,10 @@
        };
      });

+      const getMenuLocation = computed(() => {
+        return 'header';
+      });
+
      const router = useRouter();
      const route = useRoute();

@@ -314,6 +330,8 @@
        drawerSetting,
        openSetting,
        getInverted,
+        getMenuLocation,
+        mixMenu,
      };
    },
  });
@@ -330,11 +348,6 @@
    transition: all 0.2s ease-in-out;
    width: 100%;
    z-index: 11;
-    //color: #fff;
-
-    //.n-icon {
-    //  color: #fff
-    //}

    &-left {
      display: flex;
@@ -344,10 +357,6 @@
        color: #515a6e;
      }

-      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
-        color: #fff;
-      }
-
      .n-breadcrumb {
        display: inline-block;
      }
--- a/src/layout/components/Menu/index.vue
+++ b/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,
      };
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -116,6 +116,7 @@
  import { renderIcon } from '@/utils/index';
  import elementResizeDetectorMaker from 'element-resize-detector';
  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';

  export default defineComponent({
    name: 'TabsView',
@@ -135,6 +136,7 @@
      const { getDarkTheme } = useDesignSetting();
      const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting } =
        useProjectSetting();
+      const settingStore = useProjectSettingStore();

      const message = useMessage();
      const route = useRoute();
@@ -165,6 +167,17 @@
        return { fullPath, hash, meta, name, params, path, query };
      };

+      const isMixMenuNoneSub = computed(() => {
+        const mixMenu = settingStore.menuSetting.mixMenu;
+        const currentRoute = useRoute();
+        const navMode = unref(getNavMode);
+        if (unref(navMode) != 'horizontal-mix') return true;
+        if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+          return false;
+        }
+        return true;
+      });
+
      //动态组装样式 菜单缩进
      const getChangeStyle = computed(() => {
        const { collapsed } = props;
@@ -172,7 +185,11 @@
        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
        const { fixed }: any = unref(getMultiTabsSetting);
        let lenNum =
-          navMode === 'horizontal' ? '0px' : collapsed ? `${minMenuWidth}px` : `${menuWidth}px`;
+          navMode === 'horizontal' || !isMixMenuNoneSub.value
+            ? '0px'
+            : collapsed
+            ? `${minMenuWidth}px`
+            : `${menuWidth}px`;
        return {
          left: lenNum,
          width: `calc(100% - ${!fixed ? '0px' : lenNum})`,