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