fix: fix the top menu adaptive failure

vben
1 parent 5737e478
Showing 7 changed files with 70 additions and 22 deletions
src/App.vue
src/components/Menu/src/BasicMenu.tsx
src/components/Menu/src/useOpenKeys.ts
src/components/Modal/src/BasicModal.tsx
src/hooks/event/useWindowSize.ts
src/layouts/default/LayoutHeader.tsx
src/layouts/default/index.less
@@ -18,6 +18,7 @@
   import { useSetting } from '/@/hooks/core/useSetting';
  
   moment.locale('zh-cn');
+
   export default defineComponent({
     name: 'App',
     components: { ConfigProvider },
@@ -45,7 +45,8 @@ export default defineComponent({
       menuState,
       toRef(props, 'items'),
       toRef(props, 'flatItems'),
-      toRef(props, 'isAppMenu')
+      toRef(props, 'isAppMenu'),
+      toRef(props, 'mode')
     );
  
     const getOpenKeys = computed(() => {
+import { MenuModeEnum } from '/@/enums/menuEnum';
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
 import type { Ref } from 'vue';
@@ -10,7 +11,8 @@ export function useOpenKeys(
   menuState: MenuState,
   menus: Ref<MenuType[]>,
   flatMenusRef: Ref<MenuType[]>,
-  isAppMenu: Ref<boolean>
+  isAppMenu: Ref<boolean>,
+  mode: Ref<MenuModeEnum>
 ) {
   /**
    * @description:设置展开
@@ -28,21 +30,25 @@ export function useOpenKeys(
   }
  
   function handleOpenChange(openKeys: string[]) {
-    const rootSubMenuKeys: string[] = [];
-    for (const { children, path } of unref(menus)) {
-      if (children && children.length > 0) {
-        rootSubMenuKeys.push(path);
+    if (unref(mode) === MenuModeEnum.HORIZONTAL) {
+      menuState.openKeys = openKeys;
+    } else {
+      const rootSubMenuKeys: string[] = [];
+      for (const { children, path } of unref(menus)) {
+        if (children && children.length > 0) {
+          rootSubMenuKeys.push(path);
+        }
       }
-    }
-    if (!menuStore.getCollapsedState || !unref(isAppMenu)) {
-      const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1);
-      if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
-        menuState.openKeys = openKeys;
+      if (!menuStore.getCollapsedState || !unref(isAppMenu)) {
+        const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1);
+        if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
+          menuState.openKeys = openKeys;
+        } else {
+          menuState.openKeys = latestOpenKey ? [latestOpenKey] : [];
+        }
       } else {
-        menuState.openKeys = latestOpenKey ? [latestOpenKey] : [];
+        menuState.collapsedOpenKeys = openKeys;
       }
-    } else {
-      menuState.collapsedOpenKeys = openKeys;
     }
   }
   return { setOpenKeys, resetKeys, handleOpenChange };
@@ -217,7 +217,11 @@ export default defineComponent({
     const uuid = buildUUID();
     emit('register', modalMethods, uuid);
     return () => (
-      <Modal onCancel={handleCancel} {...{ ...attrs, ...props, ...unref(getProps) }}>
+      <Modal
+        onCancel={handleCancel}
+        {...{ ...attrs, ...props, ...unref(getProps) }}
+        getContainer={() => document.querySelector('.default-layout__main')}
+      >
         {{
           ...extendSlots(slots, ['default']),
           default: () => renderContent(),
@@ -4,6 +4,7 @@ import { tryOnMounted, tryOnUnmounted } from &#39;/@/utils/helper/vueHelper&#39;;
 import { ref } from 'vue';
  
 import { useDebounce } from '/@/hooks/core/useDebounce';
+import { CancelFn } from '../core/types';
  
 interface WindowSizeOptions {
   once?: boolean;
@@ -11,7 +12,7 @@ interface WindowSizeOptions {
   listenerOptions?: AddEventListenerOptions | boolean;
 }
  
-export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions): void {
+export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions): CancelFn {
   let handler = () => {
     fn();
   };
@@ -19,6 +20,9 @@ export function useWindowSizeFn&lt;T&gt;(fn: Fn&lt;T&gt;, wait = 150, options?: WindowSizeOp
   handler = handleSize;
  
   tryOnMounted(() => {
+    if (options && options.immediate) {
+      handler();
+    }
     window.addEventListener('resize', handler);
   });
  
@@ -26,6 +30,7 @@ export function useWindowSizeFn&lt;T&gt;(fn: Fn&lt;T&gt;, wait = 150, options?: WindowSizeOp
     window.removeEventListener('resize', handler);
     cancel();
   });
+  return cancel;
 }
  
 export const useWindowSize = (wait = 150, options?: WindowSizeOptions) => {
-import { defineComponent, unref, computed } from 'vue';
+import { defineComponent, unref, computed, ref } from 'vue';
 import { Layout, Tooltip, Badge } from 'ant-design-vue';
 import Logo from '/@/layouts/Logo.vue';
 import UserDropdown from './UserDropdown';
@@ -21,17 +21,44 @@ import LockAction from &#39;./actions/LockActionItem&#39;;
 import { useModal } from '/@/components/Modal/index';
 import { errorStore } from '/@/store/modules/error';
 import { useGo } from '/@/hooks/web/usePage';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
  
 export default defineComponent({
   name: 'DefaultLayoutHeader',
   setup() {
+    const widthRef = ref(200);
     const { refreshPage } = useTabs();
     const [register, { openModal }] = useModal();
     const { toggleFullscreen, isFullscreenRef } = useFullscreen();
+
     const go = useGo();
     const getProjectConfigRef = computed(() => {
       return appStore.getProjectConfig;
     });
+    const showTopMenu = computed(() => {
+      const getProjectConfig = unref(getProjectConfigRef);
+      const {
+        menuSetting: { mode, split: splitMenu },
+      } = getProjectConfig;
+      return mode === MenuModeEnum.HORIZONTAL || splitMenu;
+    });
+
+    let logoEl: Element | null;
+    useWindowSizeFn(
+      () => {
+        if (!unref(showTopMenu)) return;
+        let width = 0;
+        if (!logoEl) {
+          logoEl = document.querySelector('.layout-header__logo');
+        }
+        if (logoEl) {
+          width += logoEl.clientWidth;
+        }
+        widthRef.value = width + 60;
+      },
+      200,
+      { immediate: true }
+    );
  
     function goToGithub() {
       window.open(GITHUB_URL, '__blank');
@@ -64,6 +91,7 @@ export default defineComponent({
       } = getProjectConfig;
  
       const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
+      const width = unref(widthRef);
       return (
         <Layout.Header class={['layout-header', 'flex p-0 px-4 ', unref(headerClass)]}>
           {() => (
@@ -74,8 +102,11 @@ export default defineComponent({
                 {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
                   <LayoutBreadcrumb />
                 )}
-                {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && (
-                  <div class={[`layout-header__menu `, `justify-${topMenuAlign}`]}>
+                {unref(showTopMenu) && (
+                  <div
+                    class={[`layout-header__menu `, `justify-${topMenuAlign}`]}
+                    style={{ width: `calc(100% - ${unref(width)}px)` }}
+                  >
                     <LayoutMenu
                       theme={headerTheme}
                       splitType={splitMenu ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE}
@@ -206,7 +206,7 @@
   &__content {
     flex-grow: 1;
     display: flex;
-    justify-content: center;
+    // justify-content: center;
     align-items: center;
   }
  
@@ -346,11 +346,11 @@
   }
  
   &__menu {
-    display: flex;
+    // display: flex;
     margin-left: 20px;
     overflow: hidden;
     align-items: center;
-    flex-grow: 1;
+    // flex-grow: 1;
   }
  
   &__user-dropdown {