Blame view

src/layouts/default/setting/SettingDrawer.tsx 12.5 KB
1
import { defineComponent, computed, unref } from 'vue';
陈文彬 authored
2
import { BasicDrawer } from '/@/components/Drawer/index';
3
4
5
6
7
8
9
10
11
import { Divider } from 'ant-design-vue';
import {
  TypePicker,
  ThemePicker,
  SettingFooter,
  SwitchItem,
  SelectItem,
  InputNumberItem,
} from './components';
vben authored
12
13
import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
陈文彬 authored
14
vben authored
15
16
17
18
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
vben authored
19
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
vben authored
20
import { useI18n } from '/@/hooks/web/useI18n';
陈文彬 authored
21
22
import { baseHandler } from './handler';
vben authored
23
24
25
26
27
import {
  HandlerEnum,
  contentModeOptions,
  topMenuAlignOptions,
28
  getMenuTriggerOptions,
29
  routerTransitionOptions,
vben authored
30
  menuTypeList,
31
  mixSidebarTriggerOptions,
vben authored
32
33
} from './enum';
vben authored
34
35
36
37
38
import {
  HEADER_PRESET_BG_COLOR_LIST,
  SIDE_BAR_BG_COLOR_LIST,
  APP_PRESET_COLOR_LIST,
} from '/@/settings/designSetting';
陈文彬 authored
39
40
const { t } = useI18n();
vben authored
41
陈文彬 authored
42
43
44
export default defineComponent({
  name: 'SettingDrawer',
  setup(_, { attrs }) {
vben authored
45
46
47
48
49
50
51
52
53
    const {
      getContentMode,
      getShowFooter,
      getShowBreadCrumb,
      getShowBreadCrumbIcon,
      getShowLogo,
      getFullContent,
      getColorWeak,
      getGrayMode,
54
      getLockTime,
vben authored
55
      getThemeColor,
vben authored
56
    } = useRootSetting();
陈文彬 authored
57
vben authored
58
    const {
vben authored
59
60
61
62
63
64
65
      getOpenPageLoading,
      getBasicTransition,
      getEnableTransition,
      getOpenNProgress,
    } = useTransitionSetting();

    const {
vben authored
66
67
68
69
      getIsHorizontal,
      getShowMenu,
      getMenuType,
      getTrigger,
vben authored
70
      getCollapsedShowTitle,
vben authored
71
72
      getMenuFixed,
      getCollapsed,
73
      getCanDrag,
vben authored
74
75
76
77
78
79
      getTopMenuAlign,
      getAccordion,
      getMenuWidth,
      getMenuBgColor,
      getIsTopMenu,
      getSplit,
80
81
      getIsMixSidebar,
      getCloseMixSidebarOnChange,
82
      getMixSideTrigger,
83
      getMixSideFixed,
vben authored
84
    } = useMenuSetting();
陈文彬 authored
85
vben authored
86
87
88
89
90
91
    const {
      getShowHeader,
      getFixed: getHeaderFixed,
      getHeaderBgColor,
      getShowSearch,
    } = useHeaderSetting();
陈文彬 authored
92
vben authored
93
    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
陈文彬 authored
94
95

    const getShowMenuRef = computed(() => {
vben authored
96
      return unref(getShowMenu) && !unref(getIsHorizontal);
陈文彬 authored
97
98
    });
vben authored
99
100
101
    function renderSidebar() {
      return (
        <>
102
103
104
105
106
107
108
109
110
111
112
          <TypePicker
            menuTypeList={menuTypeList}
            handler={(item: typeof menuTypeList[0]) => {
              baseHandler(HandlerEnum.CHANGE_LAYOUT, {
                mode: item.mode,
                type: item.type,
                split: unref(getIsHorizontal) ? false : undefined,
              });
            }}
            def={unref(getMenuType)}
          />
vben authored
113
        </>
陈文彬 authored
114
115
116
      );
    }
117
    function renderHeaderTheme() {
vben authored
118
      return (
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
        <ThemePicker
          colorList={HEADER_PRESET_BG_COLOR_LIST}
          def={unref(getHeaderBgColor)}
          event={HandlerEnum.HEADER_THEME}
        />
      );
    }

    function renderSiderTheme() {
      return (
        <ThemePicker
          colorList={SIDE_BAR_BG_COLOR_LIST}
          def={unref(getMenuBgColor)}
          event={HandlerEnum.MENU_THEME}
        />
vben authored
134
      );
135
136
    }
vben authored
137
138
139
140
141
142
143
144
145
146
    function renderMainTheme() {
      return (
        <ThemePicker
          colorList={APP_PRESET_COLOR_LIST}
          def={unref(getThemeColor)}
          event={HandlerEnum.CHANGE_THEME_COLOR}
        />
      );
    }
陈文彬 authored
147
148
149
150
    /**
     * @description:
     */
    function renderFeatures() {
151
152
153
154
155
156
157
158
      let triggerDef = unref(getTrigger);

      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
      const some = triggerOptions.some((item) => item.value === triggerDef);
      if (!some) {
        triggerDef = TriggerEnum.FOOTER;
      }
159
160
161
      return (
        <>
          <SwitchItem
vben authored
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
            title={t('layout.setting.splitMenu')}
            event={HandlerEnum.MENU_SPLIT}
            def={unref(getSplit)}
            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
          />
          <SwitchItem
            title={t('layout.setting.mixSidebarFixed')}
            event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
            def={unref(getMixSideFixed)}
            disabled={!unref(getIsMixSidebar)}
          />

          <SwitchItem
            title={t('layout.setting.closeMixSidebarOnChange')}
            event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
            def={unref(getCloseMixSidebarOnChange)}
            disabled={!unref(getIsMixSidebar)}
          />
          <SwitchItem
            title={t('layout.setting.menuCollapse')}
            event={HandlerEnum.MENU_COLLAPSED}
            def={unref(getCollapsed)}
            disabled={!unref(getShowMenuRef)}
          />

          <SwitchItem
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
            title={t('layout.setting.menuDrag')}
            event={HandlerEnum.MENU_HAS_DRAG}
            def={unref(getCanDrag)}
            disabled={!unref(getShowMenuRef)}
          />
          <SwitchItem
            title={t('layout.setting.menuSearch')}
            event={HandlerEnum.HEADER_SEARCH}
            def={unref(getShowSearch)}
            disabled={!unref(getShowHeader)}
          />
          <SwitchItem
            title={t('layout.setting.menuAccordion')}
            event={HandlerEnum.MENU_ACCORDION}
            def={unref(getAccordion)}
            disabled={!unref(getShowMenuRef)}
          />
vben authored
205
vben authored
206
207
208
209
          <SwitchItem
            title={t('layout.setting.collapseMenuDisplayName')}
            event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
            def={unref(getCollapsedShowTitle)}
vben authored
210
            disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
vben authored
211
          />
212
213
214
215
216
217
218
219
220
221
222
          <SwitchItem
            title={t('layout.setting.fixedHeader')}
            event={HandlerEnum.HEADER_FIXED}
            def={unref(getHeaderFixed)}
            disabled={!unref(getShowHeader)}
          />
          <SwitchItem
            title={t('layout.setting.fixedSideBar')}
            event={HandlerEnum.MENU_FIXED}
            def={unref(getMenuFixed)}
223
            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
224
225
          />
          <SelectItem
vben authored
226
227
228
229
230
231
232
            title={t('layout.setting.mixSidebarTrigger')}
            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
            def={unref(getMixSideTrigger)}
            options={mixSidebarTriggerOptions}
            disabled={!unref(getIsMixSidebar)}
          />
          <SelectItem
233
234
235
236
            title={t('layout.setting.topMenuLayout')}
            event={HandlerEnum.MENU_TOP_ALIGN}
            def={unref(getTopMenuAlign)}
            options={topMenuAlignOptions}
237
            disabled={
238
239
240
241
              !unref(getShowHeader) ||
              unref(getSplit) ||
              (!unref(getIsTopMenu) && !unref(getSplit)) ||
              unref(getIsMixSidebar)
242
            }
243
244
245
246
          />
          <SelectItem
            title={t('layout.setting.menuCollapseButton')}
            event={HandlerEnum.MENU_TRIGGER}
247
248
            def={triggerDef}
            options={triggerOptions}
249
            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
250
251
252
253
254
255
256
257
258
          />
          <SelectItem
            title={t('layout.setting.contentMode')}
            event={HandlerEnum.CONTENT_MODE}
            def={unref(getContentMode)}
            options={contentModeOptions}
          />
          <InputNumberItem
            title={t('layout.setting.autoScreenLock')}
陈文彬 authored
259
            min={0}
260
261
            event={HandlerEnum.LOCK_TIME}
            defaultValue={unref(getLockTime)}
陈文彬 authored
262
            formatter={(value: string) => {
263
264
265
              return parseInt(value) === 0
                ? `0(${t('layout.setting.notAutoScreenLock')})`
                : `${value}${t('layout.setting.minute')}`;
陈文彬 authored
266
267
            }}
          />
268
269
          <InputNumberItem
            title={t('layout.setting.expandedMenuWidth')}
陈文彬 authored
270
271
272
            max={600}
            min={100}
            step={10}
273
            event={HandlerEnum.MENU_WIDTH}
陈文彬 authored
274
            disabled={!unref(getShowMenuRef)}
vben authored
275
            defaultValue={unref(getMenuWidth)}
陈文彬 authored
276
277
            formatter={(value: string) => `${parseInt(value)}px`}
          />
278
279
        </>
      );
陈文彬 authored
280
281
282
    }

    function renderContent() {
vben authored
283
284
      return (
        <>
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
          <SwitchItem
            title={t('layout.setting.breadcrumb')}
            event={HandlerEnum.SHOW_BREADCRUMB}
            def={unref(getShowBreadCrumb)}
            disabled={!unref(getShowHeader)}
          />

          <SwitchItem
            title={t('layout.setting.breadcrumbIcon')}
            event={HandlerEnum.SHOW_BREADCRUMB_ICON}
            def={unref(getShowBreadCrumbIcon)}
            disabled={!unref(getShowHeader)}
          />

          <SwitchItem
            title={t('layout.setting.tabs')}
            event={HandlerEnum.TABS_SHOW}
            def={unref(getShowMultipleTab)}
          />

          <SwitchItem
vben authored
306
307
308
309
310
311
312
            title={t('layout.setting.tabsRedoBtn')}
            event={HandlerEnum.TABS_SHOW_REDO}
            def={unref(getShowRedo)}
            disabled={!unref(getShowMultipleTab)}
          />

          <SwitchItem
313
314
315
316
317
            title={t('layout.setting.tabsQuickBtn')}
            event={HandlerEnum.TABS_SHOW_QUICK}
            def={unref(getShowQuick)}
            disabled={!unref(getShowMultipleTab)}
          />
vben authored
318
319
320
321
322
323
          <SwitchItem
            title={t('layout.setting.tabsFoldBtn')}
            event={HandlerEnum.TABS_SHOW_FOLD}
            def={unref(getShowFold)}
            disabled={!unref(getShowMultipleTab)}
          />
324
325
326
327
328
329
330
331
332
333
334
335
336

          <SwitchItem
            title={t('layout.setting.sidebar')}
            event={HandlerEnum.MENU_SHOW_SIDEBAR}
            def={unref(getShowMenu)}
            disabled={unref(getIsHorizontal)}
          />

          <SwitchItem
            title={t('layout.setting.header')}
            event={HandlerEnum.HEADER_SHOW}
            def={unref(getShowHeader)}
          />
337
338
339
340
341
342
          <SwitchItem
            title="Logo"
            event={HandlerEnum.SHOW_LOGO}
            def={unref(getShowLogo)}
            disabled={unref(getIsMixSidebar)}
          />
343
344
345
346
347
348
349
350
351
352
          <SwitchItem
            title={t('layout.setting.footer')}
            event={HandlerEnum.SHOW_FOOTER}
            def={unref(getShowFooter)}
          />
          <SwitchItem
            title={t('layout.setting.fullContent')}
            event={HandlerEnum.FULL_CONTENT}
            def={unref(getFullContent)}
          />
vben authored
353
354
355
356
357
358
          <SwitchItem
            title={t('layout.setting.grayMode')}
            event={HandlerEnum.GRAY_MODE}
            def={unref(getGrayMode)}
          />
vben authored
359
360
361
362
363
364
          <SwitchItem
            title={t('layout.setting.colorWeak')}
            event={HandlerEnum.COLOR_WEAK}
            def={unref(getColorWeak)}
          />
vben authored
365
366
367
368
        </>
      );
    }
369
    function renderTransition() {
陈文彬 authored
370
      return (
371
372
373
374
375
376
377
378
379
380
        <>
          <SwitchItem
            title={t('layout.setting.progress')}
            event={HandlerEnum.OPEN_PROGRESS}
            def={unref(getOpenNProgress)}
          />
          <SwitchItem
            title={t('layout.setting.switchLoading')}
            event={HandlerEnum.OPEN_PAGE_LOADING}
            def={unref(getOpenPageLoading)}
陈文彬 authored
381
382
          />
383
384
385
386
          <SwitchItem
            title={t('layout.setting.switchAnimation')}
            event={HandlerEnum.OPEN_ROUTE_TRANSITION}
            def={unref(getEnableTransition)}
陈文彬 authored
387
          />
388
389
390
391
392
393
394
395
396

          <SelectItem
            title={t('layout.setting.animationType')}
            event={HandlerEnum.ROUTER_TRANSITION}
            def={unref(getBasicTransition)}
            options={routerTransitionOptions}
            disabled={!unref(getEnableTransition)}
          />
        </>
陈文彬 authored
397
398
      );
    }
399
陈文彬 authored
400
    return () => (
401
402
403
404
405
406
      <BasicDrawer
        {...attrs}
        title={t('layout.setting.drawerTitle')}
        width={330}
        wrapClassName="setting-drawer"
      >
vben authored
407
408
        <Divider>{() => t('layout.setting.navMode')}</Divider>
        {renderSidebar()}
vben authored
409
410
        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
        {renderMainTheme()}
vben authored
411
412
413
414
415
416
417
418
419
420
421
422
        <Divider>{() => t('layout.setting.headerTheme')}</Divider>
        {renderHeaderTheme()}
        <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
        {renderSiderTheme()}
        <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
        {renderFeatures()}
        <Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
        {renderContent()}
        <Divider>{() => t('layout.setting.animation')}</Divider>
        {renderTransition()}
        <Divider />
        <SettingFooter />
陈文彬 authored
423
424
425
426
      </BasicDrawer>
    );
  },
});