From 0ec1a62e596c363f3f017d6ac3b374a1b5caa7c5 Mon Sep 17 00:00:00 2001 From: vben <anncwb@126.com> Date: 星期一, 25 一月 2021 23:51:55 +0800 Subject: [PATCH] fix(menu): top submenu disappeared problem #214 --- src/layouts/default/menu/useLayoutMenu.ts | 73 +++++++++++------------------------- 1 files changed, 22 insertions(+), 51 deletions(-) diff --git a/src/layouts/default/menu/useLayoutMenu.ts b/src/layouts/default/menu/useLayoutMenu.ts index 42de616..2b32854 100644 --- a/src/layouts/default/menu/useLayoutMenu.ts +++ b/src/layouts/default/menu/useLayoutMenu.ts @@ -8,27 +8,15 @@ import { useThrottle } from '/@/hooks/core/useThrottle'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; -import { - getChildrenMenus, - getCurrentParentPath, - getFlatChildrenMenus, - getFlatMenus, - getMenus, - getShallowMenus, -} from '/@/router/menus'; +import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus'; import { permissionStore } from '/@/store/modules/permission'; -import { useI18n } from '/@/hooks/web/useI18n'; -import { cloneDeep } from 'lodash-es'; +import { useAppInject } from '/@/hooks/web/useAppInject'; -const { t } = useI18n(); export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) { // Menu array const menusRef = ref<Menu[]>([]); - // flat menu array - const flatMenusRef = ref<Menu[]>([]); - const { currentRoute } = useRouter(); - + const { getIsMobile } = useAppInject(); const { setMenuSetting, getIsHorizontal, getSplit } = useMenuSetting(); const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50); @@ -37,28 +25,27 @@ () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal) ); - const splitLeft = computed(() => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT); + const getSplitLeft = computed( + () => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT + ); - const spiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP); + const getSpiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP); const normalType = computed(() => { return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit); }); - const getI18nFlatMenus = computed(() => { - return setI18nName(flatMenusRef.value, true, false); - }); - - const getI18nMenus = computed(() => { - return setI18nName(menusRef.value, true, true); - }); - watch( [() => unref(currentRoute).path, () => unref(splitType)], async ([path]: [string, MenuSplitTyeEnum]) => { - if (unref(splitNotLeft)) return; + if (unref(splitNotLeft) || unref(getIsMobile)) return; - const parentPath = await getCurrentParentPath(path); + const { meta } = unref(currentRoute); + const currentActiveMenu = meta.currentActiveMenu; + let parentPath = await getCurrentParentPath(path); + if (!parentPath) { + parentPath = await getCurrentParentPath(currentActiveMenu); + } parentPath && throttleHandleSplitLeftMenu(parentPath); }, { @@ -83,55 +70,39 @@ genMenus(); }); - function setI18nName(list: Menu[], clone = false, deep = true) { - const menus = clone ? cloneDeep(list) : list; - menus.forEach((item) => { - if (!item.name.includes('.')) return; - item.name = t(item.name); - if (item.children && deep) { - setI18nName(item.children, false, deep); - } - }); - return menus; - } - // Handle left menu split async function handleSplitLeftMenu(parentPath: string) { - if (unref(splitLeft)) return; + if (unref(getSplitLeft) || unref(getIsMobile)) return; // spilt mode left const children = await getChildrenMenus(parentPath); - if (!children) { - setMenuSetting({ hidden: false }); - flatMenusRef.value = []; + + if (!children || !children.length) { + setMenuSetting({ hidden: true }); menusRef.value = []; return; } - const flatChildren = await getFlatChildrenMenus(children); - setMenuSetting({ hidden: true }); - flatMenusRef.value = flatChildren; + setMenuSetting({ hidden: false }); menusRef.value = children; } // get menus async function genMenus() { // normal mode - if (unref(normalType)) { - flatMenusRef.value = await getFlatMenus(); + if (unref(normalType) || unref(getIsMobile)) { menusRef.value = await getMenus(); return; } // split-top - if (unref(spiltTop)) { + if (unref(getSpiltTop)) { const shallowMenus = await getShallowMenus(); - flatMenusRef.value = shallowMenus; menusRef.value = shallowMenus; return; } } - return { flatMenusRef: getI18nFlatMenus, menusRef: getI18nMenus }; + return { menusRef }; } -- Gitblit v1.8.0