| | |
| | | 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'; |
| | | |
| | | const mixSideHasChildren = ref(false); |
| | | |
| | | export function useMenuSetting() { |
| | | // Get menu configuration |
| | | const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting); |
| | | const { getFullContent: fullContent } = useFullContent(); |
| | | const appStore = useAppStore(); |
| | | |
| | | const getMiniWidth = computed(() => unref(getMenuSetting).menuWidth); |
| | | const getShowSidebar = computed(() => { |
| | | return ( |
| | | unref(getSplit) || |
| | | (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent)) |
| | | ); |
| | | }); |
| | | |
| | | const getCollapsed = computed(() => unref(getMenuSetting).collapsed); |
| | | const getCollapsed = computed(() => appStore.getMenuSetting.collapsed); |
| | | |
| | | const getType = computed(() => unref(getMenuSetting).type); |
| | | const getMenuType = computed(() => appStore.getMenuSetting.type); |
| | | |
| | | const getMode = computed(() => unref(getMenuSetting).mode); |
| | | const getMenuMode = computed(() => appStore.getMenuSetting.mode); |
| | | |
| | | const getShow = computed(() => unref(getMenuSetting).show); |
| | | const getMenuFixed = computed(() => appStore.getMenuSetting.fixed); |
| | | |
| | | const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth); |
| | | const getShowMenu = computed(() => appStore.getMenuSetting.show); |
| | | |
| | | const getTrigger = computed(() => unref(getMenuSetting).trigger); |
| | | const getMenuHidden = computed(() => appStore.getMenuSetting.hidden); |
| | | |
| | | const getTheme = computed(() => unref(getMenuSetting).theme); |
| | | const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth); |
| | | |
| | | const getSplit = computed(() => unref(getMenuSetting).split); |
| | | const getTrigger = computed(() => appStore.getMenuSetting.trigger); |
| | | |
| | | const getHasDrag = computed(() => unref(getMenuSetting).hasDrag); |
| | | const getMenuTheme = computed(() => appStore.getMenuSetting.theme); |
| | | |
| | | const getAccordion = computed(() => unref(getMenuSetting).accordion); |
| | | const getSplit = computed(() => appStore.getMenuSetting.split); |
| | | |
| | | const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle); |
| | | const getMenuBgColor = computed(() => appStore.getMenuSetting.bgColor); |
| | | |
| | | const getCollapsedShowSearch = computed(() => unref(getMenuSetting).collapsedShowSearch); |
| | | const getMixSideTrigger = computed(() => appStore.getMenuSetting.mixSideTrigger); |
| | | |
| | | const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign); |
| | | const getCanDrag = computed(() => appStore.getMenuSetting.canDrag); |
| | | |
| | | const getIsSidebarType = computed(() => unref(getType) === MenuTypeEnum.SIDEBAR); |
| | | 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(getMode) === MenuModeEnum.HORIZONTAL || unref(getSplit); |
| | | return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit); |
| | | }); |
| | | |
| | | const getShowHeaderTrigger = computed(() => { |
| | | if ( |
| | | unref(getType) === MenuTypeEnum.TOP_MENU || |
| | | !unref(getShow) || |
| | | !unref(getMenuSetting).hidden |
| | | unref(getMenuType) === MenuTypeEnum.TOP_MENU || |
| | | !unref(getShowMenu) || |
| | | unref(getMenuHidden) |
| | | ) { |
| | | return false; |
| | | } |
| | |
| | | return unref(getTrigger) === TriggerEnum.HEADER; |
| | | }); |
| | | |
| | | const getShowSearch = computed(() => { |
| | | return ( |
| | | unref(getMenuSetting).showSearch && |
| | | !(unref(getType) === MenuTypeEnum.MIX && unref(getMode) === MenuModeEnum.HORIZONTAL) |
| | | ); |
| | | const getIsHorizontal = computed(() => { |
| | | return unref(getMenuMode) === MenuModeEnum.HORIZONTAL; |
| | | }); |
| | | |
| | | const getIsHorizontal = computed(() => { |
| | | return unref(getMode) === 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 } = unref(getMenuSetting); |
| | | const { collapsedShowTitle } = appStore.getMenuSetting; |
| | | return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH; |
| | | }); |
| | | |
| | | const getCalcContentWidth = computed(() => { |
| | | const width = unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMiniWidth); |
| | | return `calc(100% - ${width}px)`; |
| | | 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.commitProjectConfigState({ menuSetting }); |
| | | appStore.setProjectConfig({ menuSetting }); |
| | | } |
| | | |
| | | function toggleCollapsed() { |
| | |
| | | collapsed: !unref(getCollapsed), |
| | | }); |
| | | } |
| | | |
| | | return { |
| | | setMenuSetting, |
| | | |
| | | toggleCollapsed, |
| | | |
| | | getMenuSetting, |
| | | getMiniWidth, |
| | | getType, |
| | | getMode, |
| | | getShow, |
| | | getMenuFixed, |
| | | getRealWidth, |
| | | getMenuType, |
| | | getMenuMode, |
| | | getShowMenu, |
| | | getCollapsed, |
| | | getMiniWidthNumber, |
| | | getCalcContentWidth, |
| | | getMenuWidth, |
| | | getTrigger, |
| | | getSplit, |
| | | getTheme, |
| | | getHasDrag, |
| | | getIsHorizontal, |
| | | getShowSearch, |
| | | getMenuTheme, |
| | | getCanDrag, |
| | | getCollapsedShowTitle, |
| | | getCollapsedShowSearch, |
| | | getIsHorizontal, |
| | | getIsSidebarType, |
| | | getAccordion, |
| | | getShowTopMenu, |
| | | getShowHeaderTrigger, |
| | | getTopMenuAlign, |
| | | getMenuHidden, |
| | | getIsTopMenu, |
| | | getMenuBgColor, |
| | | getShowSidebar, |
| | | getIsMixMode, |
| | | getIsMixSidebar, |
| | | getCloseMixSidebarOnChange, |
| | | getMixSideTrigger, |
| | | getMixSideFixed, |
| | | mixSideHasChildren, |
| | | }; |
| | | } |