| | |
| | | import type { MenuSetting } from '/@/types/config'; |
| | | import type { MenuSetting } from '/#/config'; |
| | | |
| | | import { computed, unref } from 'vue'; |
| | | import { computed, unref, ref } from 'vue'; |
| | | |
| | | import { appStore } from '/@/store/modules/app'; |
| | | import { useAppStore } from '/@/store/modules/app'; |
| | | |
| | | import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum'; |
| | | import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum'; |
| | | import { useFullContent } from '/@/hooks/web/useFullContent'; |
| | | |
| | | // Get menu configuration |
| | | const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting); |
| | | |
| | | const getCollapsed = computed(() => unref(getMenuSetting).collapsed); |
| | | |
| | | const getMenuType = computed(() => unref(getMenuSetting).type); |
| | | |
| | | const getMenuMode = computed(() => unref(getMenuSetting).mode); |
| | | |
| | | const getMenuFixed = computed(() => unref(getMenuSetting).fixed); |
| | | |
| | | const getShowMenu = computed(() => unref(getMenuSetting).show); |
| | | |
| | | const getMenuHidden = computed(() => unref(getMenuSetting).hidden); |
| | | |
| | | const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth); |
| | | |
| | | const getTrigger = computed(() => unref(getMenuSetting).trigger); |
| | | |
| | | const getMenuTheme = computed(() => unref(getMenuSetting).theme); |
| | | |
| | | const getSplit = computed(() => unref(getMenuSetting).split); |
| | | |
| | | const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor); |
| | | |
| | | const getCanDrag = computed(() => unref(getMenuSetting).canDrag); |
| | | |
| | | const getAccordion = computed(() => unref(getMenuSetting).accordion); |
| | | |
| | | const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle); |
| | | |
| | | const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign); |
| | | |
| | | const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR); |
| | | |
| | | const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU); |
| | | |
| | | const getShowTopMenu = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit); |
| | | }); |
| | | |
| | | const getShowHeaderTrigger = computed(() => { |
| | | if (unref(getMenuType) === MenuTypeEnum.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) { |
| | | return false; |
| | | } |
| | | |
| | | return unref(getTrigger) === TriggerEnum.HEADER; |
| | | }); |
| | | |
| | | const getIsHorizontal = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.HORIZONTAL; |
| | | }); |
| | | |
| | | const getIsMixMode = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX; |
| | | }); |
| | | |
| | | const getRealWidth = computed(() => { |
| | | return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth); |
| | | }); |
| | | |
| | | const getMiniWidthNumber = computed(() => { |
| | | const { collapsedShowTitle } = unref(getMenuSetting); |
| | | return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH; |
| | | }); |
| | | |
| | | const getCalcContentWidth = computed(() => { |
| | | const width = |
| | | unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden)) |
| | | ? 0 |
| | | : unref(getRealWidth); |
| | | |
| | | return `calc(100% - ${unref(width)}px)`; |
| | | }); |
| | | |
| | | const { getFullContent: fullContent } = useFullContent(); |
| | | |
| | | const getShowSidebar = computed(() => { |
| | | return ( |
| | | unref(getSplit) || |
| | | (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent)) |
| | | ); |
| | | }); |
| | | |
| | | // Set menu configuration |
| | | function setMenuSetting(menuSetting: Partial<MenuSetting>): void { |
| | | appStore.commitProjectConfigState({ menuSetting }); |
| | | } |
| | | |
| | | function toggleCollapsed() { |
| | | setMenuSetting({ |
| | | collapsed: !unref(getCollapsed), |
| | | }); |
| | | } |
| | | const mixSideHasChildren = ref(false); |
| | | |
| | | export function useMenuSetting() { |
| | | const { getFullContent: fullContent } = useFullContent(); |
| | | const appStore = useAppStore(); |
| | | |
| | | const getShowSidebar = computed(() => { |
| | | return ( |
| | | unref(getSplit) || |
| | | (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent)) |
| | | ); |
| | | }); |
| | | |
| | | const getCollapsed = computed(() => appStore.getMenuSetting.collapsed); |
| | | |
| | | const getMenuType = computed(() => appStore.getMenuSetting.type); |
| | | |
| | | const getMenuMode = computed(() => appStore.getMenuSetting.mode); |
| | | |
| | | const getMenuFixed = computed(() => appStore.getMenuSetting.fixed); |
| | | |
| | | const getShowMenu = computed(() => appStore.getMenuSetting.show); |
| | | |
| | | const getMenuHidden = computed(() => appStore.getMenuSetting.hidden); |
| | | |
| | | const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth); |
| | | |
| | | const getTrigger = computed(() => appStore.getMenuSetting.trigger); |
| | | |
| | | const getMenuTheme = computed(() => appStore.getMenuSetting.theme); |
| | | |
| | | const getSplit = computed(() => appStore.getMenuSetting.split); |
| | | |
| | | const getMenuBgColor = computed(() => appStore.getMenuSetting.bgColor); |
| | | |
| | | const getMixSideTrigger = computed(() => appStore.getMenuSetting.mixSideTrigger); |
| | | |
| | | const getCanDrag = computed(() => appStore.getMenuSetting.canDrag); |
| | | |
| | | const getAccordion = computed(() => appStore.getMenuSetting.accordion); |
| | | |
| | | const getMixSideFixed = computed(() => appStore.getMenuSetting.mixSideFixed); |
| | | |
| | | const getTopMenuAlign = computed(() => appStore.getMenuSetting.topMenuAlign); |
| | | |
| | | const getCloseMixSidebarOnChange = computed( |
| | | () => appStore.getMenuSetting.closeMixSidebarOnChange, |
| | | ); |
| | | |
| | | const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR); |
| | | |
| | | const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU); |
| | | |
| | | const getCollapsedShowTitle = computed(() => appStore.getMenuSetting.collapsedShowTitle); |
| | | |
| | | const getShowTopMenu = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit); |
| | | }); |
| | | |
| | | const getShowHeaderTrigger = computed(() => { |
| | | if ( |
| | | unref(getMenuType) === MenuTypeEnum.TOP_MENU || |
| | | !unref(getShowMenu) || |
| | | unref(getMenuHidden) |
| | | ) { |
| | | return false; |
| | | } |
| | | |
| | | return unref(getTrigger) === TriggerEnum.HEADER; |
| | | }); |
| | | |
| | | const getIsHorizontal = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.HORIZONTAL; |
| | | }); |
| | | |
| | | const getIsMixSidebar = computed(() => { |
| | | return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR; |
| | | }); |
| | | |
| | | const getIsMixMode = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX; |
| | | }); |
| | | |
| | | const getRealWidth = computed(() => { |
| | | if (unref(getIsMixSidebar)) { |
| | | return unref(getCollapsed) && !unref(getMixSideFixed) |
| | | ? unref(getMiniWidthNumber) |
| | | : unref(getMenuWidth); |
| | | } |
| | | return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth); |
| | | }); |
| | | |
| | | const getMiniWidthNumber = computed(() => { |
| | | const { collapsedShowTitle } = appStore.getMenuSetting; |
| | | return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH; |
| | | }); |
| | | |
| | | const getCalcContentWidth = computed(() => { |
| | | const width = |
| | | unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden)) |
| | | ? 0 |
| | | : unref(getIsMixSidebar) |
| | | ? (unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH) + |
| | | (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0) |
| | | : unref(getRealWidth); |
| | | |
| | | return `calc(100% - ${unref(width)}px)`; |
| | | }); |
| | | |
| | | // Set menu configuration |
| | | function setMenuSetting(menuSetting: Partial<MenuSetting>): void { |
| | | appStore.setProjectConfig({ menuSetting }); |
| | | } |
| | | |
| | | function toggleCollapsed() { |
| | | setMenuSetting({ |
| | | collapsed: !unref(getCollapsed), |
| | | }); |
| | | } |
| | | return { |
| | | setMenuSetting, |
| | | |
| | | toggleCollapsed, |
| | | |
| | | getMenuFixed, |
| | | getMenuSetting, |
| | | getRealWidth, |
| | | getMenuType, |
| | | getMenuMode, |
| | |
| | | getSplit, |
| | | getMenuTheme, |
| | | getCanDrag, |
| | | getIsHorizontal, |
| | | getCollapsedShowTitle, |
| | | getIsHorizontal, |
| | | getIsSidebarType, |
| | | getAccordion, |
| | | getShowTopMenu, |
| | |
| | | getMenuBgColor, |
| | | getShowSidebar, |
| | | getIsMixMode, |
| | | getIsMixSidebar, |
| | | getCloseMixSidebarOnChange, |
| | | getMixSideTrigger, |
| | | getMixSideFixed, |
| | | mixSideHasChildren, |
| | | }; |
| | | } |