From 2f12556d26ba386d9dca2ecf8a88e3764abab870 Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 19 Oct 2020 22:56:10 +0800 Subject: [PATCH] fix: fix the top menu adaptive failure --- src/App.vue | 1 + src/components/Menu/src/BasicMenu.tsx | 3 +- src/components/Menu/src/useOpenKeys.ts | 36 ++++++++++++++---------- src/components/Modal/src/BasicModal.tsx | 6 +++- src/hooks/event/useWindowSize.ts | 7 ++++- src/layouts/default/LayoutHeader.tsx | 37 +++++++++++++++++++++++-- src/layouts/default/index.less | 6 ++-- 7 files changed, 72 insertions(+), 24 deletions(-) diff --git a/src/App.vue b/src/App.vue index ebba7fa1d..92b6a4823 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,6 +18,7 @@ import { useSetting } from '/@/hooks/core/useSetting'; moment.locale('zh-cn'); + export default defineComponent({ name: 'App', components: { ConfigProvider }, diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx index f02ab07be..538bbb56c 100644 --- a/src/components/Menu/src/BasicMenu.tsx +++ b/src/components/Menu/src/BasicMenu.tsx @@ -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(() => { diff --git a/src/components/Menu/src/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts index 94aff8920..47d4ea319 100644 --- a/src/components/Menu/src/useOpenKeys.ts +++ b/src/components/Menu/src/useOpenKeys.ts @@ -1,3 +1,4 @@ +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, flatMenusRef: Ref, - isAppMenu: Ref + isAppMenu: Ref, + mode: Ref ) { /** * @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 (!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] : []; - } + if (unref(mode) === MenuModeEnum.HORIZONTAL) { + menuState.openKeys = openKeys; } else { - menuState.collapsedOpenKeys = openKeys; + 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; + } else { + menuState.openKeys = latestOpenKey ? [latestOpenKey] : []; + } + } else { + menuState.collapsedOpenKeys = openKeys; + } } } return { setOpenKeys, resetKeys, handleOpenChange }; diff --git a/src/components/Modal/src/BasicModal.tsx b/src/components/Modal/src/BasicModal.tsx index 1deb95fef..0be402a6b 100644 --- a/src/components/Modal/src/BasicModal.tsx +++ b/src/components/Modal/src/BasicModal.tsx @@ -217,7 +217,11 @@ export default defineComponent({ const uuid = buildUUID(); emit('register', modalMethods, uuid); return () => ( - + document.querySelector('.default-layout__main')} + > {{ ...extendSlots(slots, ['default']), default: () => renderContent(), diff --git a/src/hooks/event/useWindowSize.ts b/src/hooks/event/useWindowSize.ts index 6f0cf0e5c..0591a4446 100644 --- a/src/hooks/event/useWindowSize.ts +++ b/src/hooks/event/useWindowSize.ts @@ -4,6 +4,7 @@ import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper'; 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(fn: Fn, wait = 150, options?: WindowSizeOptions): void { +export function useWindowSizeFn(fn: Fn, wait = 150, options?: WindowSizeOptions): CancelFn { let handler = () => { fn(); }; @@ -19,6 +20,9 @@ export function useWindowSizeFn(fn: Fn, wait = 150, options?: WindowSizeOp handler = handleSize; tryOnMounted(() => { + if (options && options.immediate) { + handler(); + } window.addEventListener('resize', handler); }); @@ -26,6 +30,7 @@ export function useWindowSizeFn(fn: Fn, wait = 150, options?: WindowSizeOp window.removeEventListener('resize', handler); cancel(); }); + return cancel; } export const useWindowSize = (wait = 150, options?: WindowSizeOptions) => { diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/LayoutHeader.tsx index 214aa8f2a..6f7c0d11b 100644 --- a/src/layouts/default/LayoutHeader.tsx +++ b/src/layouts/default/LayoutHeader.tsx @@ -1,4 +1,4 @@ -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 './actions/LockActionItem'; 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 ( {() => ( @@ -74,8 +102,11 @@ export default defineComponent({ {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && ( )} - {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && ( -
+ {unref(showTopMenu) && ( +