wip: refactor layout

vben

2020-11-23 ba068ba1df797627e88dcf61af3ea13d0c2929ab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import type { MenuSetting } from '/@/types/config';
 
import { computed, unref } from 'vue';
 
import { appStore } 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';
 
export function useMenuSetting() {
  // Get menu configuration
  const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting);
 
  const getMiniWidth = computed(() => unref(getMenuSetting).menuWidth);
 
  const getCollapsed = computed(() => unref(getMenuSetting).collapsed);
 
  const getType = computed(() => unref(getMenuSetting).type);
 
  const getMode = computed(() => unref(getMenuSetting).mode);
 
  const getShow = computed(() => unref(getMenuSetting).show);
 
  const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth);
 
  const getTrigger = computed(() => unref(getMenuSetting).trigger);
 
  const getTheme = computed(() => unref(getMenuSetting).theme);
 
  const getSplit = computed(() => unref(getMenuSetting).split);
 
  const getHasDrag = computed(() => unref(getMenuSetting).hasDrag);
 
  const getAccordion = computed(() => unref(getMenuSetting).accordion);
 
  const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
 
  const getCollapsedShowSearch = computed(() => unref(getMenuSetting).collapsedShowSearch);
 
  const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
 
  const getIsSidebarType = computed(() => unref(getType) === MenuTypeEnum.SIDEBAR);
 
  const getShowTopMenu = computed(() => {
    return unref(getMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
  });
 
  const getShowHeaderTrigger = computed(() => {
    if (
      unref(getType) === MenuTypeEnum.TOP_MENU ||
      !unref(getShow) ||
      !unref(getMenuSetting).hidden
    ) {
      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(getMode) === MenuModeEnum.HORIZONTAL;
  });
 
  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(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMiniWidth);
    return `calc(100% - ${width}px)`;
  });
 
  // Set menu configuration
  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
    appStore.commitProjectConfigState({ menuSetting });
  }
 
  function toggleCollapsed() {
    setMenuSetting({
      collapsed: !unref(getCollapsed),
    });
  }
 
  return {
    setMenuSetting,
 
    toggleCollapsed,
 
    getMenuSetting,
    getMiniWidth,
    getType,
    getMode,
    getShow,
    getCollapsed,
    getMiniWidthNumber,
    getCalcContentWidth,
    getMenuWidth,
    getTrigger,
    getSplit,
    getTheme,
    getHasDrag,
    getIsHorizontal,
    getShowSearch,
    getCollapsedShowTitle,
    getCollapsedShowSearch,
    getIsSidebarType,
    getAccordion,
    getShowTopMenu,
    getShowHeaderTrigger,
    getTopMenuAlign,
  };
}