CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2021-01-06 1e5fcd2cd2981b29f06cff08e588077b2dd02f45
提交 | 用户 | age
ba068b 1 import type { MenuSetting } from '/@/types/config';
V 2
97180e 3 import { computed, unref, ref } from 'vue';
ba068b 4
V 5 import { appStore } from '/@/store/modules/app';
6
7 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
8 import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
27e50b 9 import { useFullContent } from '/@/hooks/web/useFullContent';
97180e 10
V 11 const mixSideHasChildren = ref(false);
ba068b 12
88f4a3 13 // Get menu configuration
V 14 const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting);
15
16 const getCollapsed = computed(() => unref(getMenuSetting).collapsed);
17
18 const getMenuType = computed(() => unref(getMenuSetting).type);
19
20 const getMenuMode = computed(() => unref(getMenuSetting).mode);
21
22 const getMenuFixed = computed(() => unref(getMenuSetting).fixed);
23
24 const getShowMenu = computed(() => unref(getMenuSetting).show);
25
26 const getMenuHidden = computed(() => unref(getMenuSetting).hidden);
27
28 const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth);
29
30 const getTrigger = computed(() => unref(getMenuSetting).trigger);
31
32 const getMenuTheme = computed(() => unref(getMenuSetting).theme);
33
34 const getSplit = computed(() => unref(getMenuSetting).split);
35
36 const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
37
0419a0 38 const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);
V 39
88f4a3 40 const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
V 41
42 const getAccordion = computed(() => unref(getMenuSetting).accordion);
97180e 43
V 44 const getMixSideFixed = computed(() => unref(getMenuSetting).mixSideFixed);
88f4a3 45
V 46 const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
e6db0d 47
V 48 const getCloseMixSidebarOnChange = computed(() => unref(getMenuSetting).closeMixSidebarOnChange);
88f4a3 49
V 50 const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
51
52 const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
53
f69aae 54 const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
V 55
88f4a3 56 const getShowTopMenu = computed(() => {
V 57   return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
58 });
59
60 const getShowHeaderTrigger = computed(() => {
c774a6 61   if (unref(getMenuType) === MenuTypeEnum.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) {
88f4a3 62     return false;
V 63   }
64
65   return unref(getTrigger) === TriggerEnum.HEADER;
66 });
67
68 const getIsHorizontal = computed(() => {
69   return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
70 });
71
e6db0d 72 const getIsMixSidebar = computed(() => {
V 73   return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
74 });
75
a65ad9 76 const getIsMixMode = computed(() => {
V 77   return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
78 });
79
88f4a3 80 const getRealWidth = computed(() => {
0e7c57 81   return unref(getCollapsed) && !unref(getMixSideFixed)
V 82     ? unref(getMiniWidthNumber)
83     : unref(getMenuWidth);
88f4a3 84 });
V 85
86 const getMiniWidthNumber = computed(() => {
f69aae 87   const { collapsedShowTitle } = unref(getMenuSetting);
V 88   return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
88f4a3 89 });
V 90
91 const getCalcContentWidth = computed(() => {
c774a6 92   const width =
V 93     unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
94       ? 0
e6db0d 95       : unref(getIsMixSidebar)
1e5fcd 96       ? unref(getCollapsed)
V 97         ? SIDE_BAR_MINI_WIDTH
98         : SIDE_BAR_SHOW_TIT_MINI_WIDTH +
99           (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
c774a6 100       : unref(getRealWidth);
88f4a3 101   return `calc(100% - ${unref(width)}px)`;
V 102 });
103
27e50b 104 const { getFullContent: fullContent } = useFullContent();
V 105
106 const getShowSidebar = computed(() => {
107   return (
108     unref(getSplit) ||
109     (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent))
110   );
111 });
112
88f4a3 113 // Set menu configuration
V 114 function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
115   appStore.commitProjectConfigState({ menuSetting });
116 }
117
118 function toggleCollapsed() {
119   setMenuSetting({
120     collapsed: !unref(getCollapsed),
121   });
122 }
123
ba068b 124 export function useMenuSetting() {
V 125   return {
126     setMenuSetting,
127
128     toggleCollapsed,
129
0692b4 130     getMenuFixed,
ba068b 131     getMenuSetting,
0692b4 132     getRealWidth,
V 133     getMenuType,
134     getMenuMode,
135     getShowMenu,
ba068b 136     getCollapsed,
V 137     getMiniWidthNumber,
138     getCalcContentWidth,
139     getMenuWidth,
140     getTrigger,
141     getSplit,
0692b4 142     getMenuTheme,
cedba3 143     getCanDrag,
f69aae 144     getCollapsedShowTitle,
ba068b 145     getIsHorizontal,
V 146     getIsSidebarType,
147     getAccordion,
148     getShowTopMenu,
149     getShowHeaderTrigger,
150     getTopMenuAlign,
0692b4 151     getMenuHidden,
V 152     getIsTopMenu,
153     getMenuBgColor,
27e50b 154     getShowSidebar,
a65ad9 155     getIsMixMode,
e6db0d 156     getIsMixSidebar,
V 157     getCloseMixSidebarOnChange,
0419a0 158     getMixSideTrigger,
97180e 159     getMixSideFixed,
V 160     mixSideHasChildren,
ba068b 161   };
V 162 }