Blame view

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

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

    const getShowMenuRef = computed(() => {
vben authored
99
      return unref(getShowMenu) && !unref(getIsHorizontal);
陈文彬 authored
100
101
    });
vben authored
102
103
104
    function renderSidebar() {
      return (
        <>
105
106
107
108
109
110
111
112
113
114
115
          <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
116
        </>
陈文彬 authored
117
118
119
      );
    }
120
    function renderHeaderTheme() {
vben authored
121
      return (
Vben authored
122
        <ThemeColorPicker
123
124
125
126
127
128
129
130
131
          colorList={HEADER_PRESET_BG_COLOR_LIST}
          def={unref(getHeaderBgColor)}
          event={HandlerEnum.HEADER_THEME}
        />
      );
    }

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

      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
      const some = triggerOptions.some((item) => item.value === triggerDef);
      if (!some) {
        triggerDef = TriggerEnum.FOOTER;
      }
162
163
164
      return (
        <>
          <SwitchItem
vben authored
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
            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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
            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
208
vben authored
209
210
211
212
          <SwitchItem
            title={t('layout.setting.collapseMenuDisplayName')}
            event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
            def={unref(getCollapsedShowTitle)}
vben authored
213
            disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
vben authored
214
          />
215
216
217
218
219
220
221
222
223
224
225
          <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)}
226
            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
227
228
          />
          <SelectItem
vben authored
229
230
231
232
233
234
235
            title={t('layout.setting.mixSidebarTrigger')}
            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
            def={unref(getMixSideTrigger)}
            options={mixSidebarTriggerOptions}
            disabled={!unref(getIsMixSidebar)}
          />
          <SelectItem
236
237
238
239
            title={t('layout.setting.topMenuLayout')}
            event={HandlerEnum.MENU_TOP_ALIGN}
            def={unref(getTopMenuAlign)}
            options={topMenuAlignOptions}
240
            disabled={
241
242
243
244
              !unref(getShowHeader) ||
              unref(getSplit) ||
              (!unref(getIsTopMenu) && !unref(getSplit)) ||
              unref(getIsMixSidebar)
245
            }
246
247
248
249
          />
          <SelectItem
            title={t('layout.setting.menuCollapseButton')}
            event={HandlerEnum.MENU_TRIGGER}
250
251
            def={triggerDef}
            options={triggerOptions}
252
            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
253
254
255
256
257
258
259
260
261
          />
          <SelectItem
            title={t('layout.setting.contentMode')}
            event={HandlerEnum.CONTENT_MODE}
            def={unref(getContentMode)}
            options={contentModeOptions}
          />
          <InputNumberItem
            title={t('layout.setting.autoScreenLock')}
陈文彬 authored
262
            min={0}
263
264
            event={HandlerEnum.LOCK_TIME}
            defaultValue={unref(getLockTime)}
陈文彬 authored
265
            formatter={(value: string) => {
266
267
268
              return parseInt(value) === 0
                ? `0(${t('layout.setting.notAutoScreenLock')})`
                : `${value}${t('layout.setting.minute')}`;
陈文彬 authored
269
270
            }}
          />
271
272
          <InputNumberItem
            title={t('layout.setting.expandedMenuWidth')}
陈文彬 authored
273
274
275
            max={600}
            min={100}
            step={10}
276
            event={HandlerEnum.MENU_WIDTH}
陈文彬 authored
277
            disabled={!unref(getShowMenuRef)}
vben authored
278
            defaultValue={unref(getMenuWidth)}
陈文彬 authored
279
280
            formatter={(value: string) => `${parseInt(value)}px`}
          />
281
282
        </>
      );
陈文彬 authored
283
284
285
    }

    function renderContent() {
vben authored
286
287
      return (
        <>
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
          <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
309
310
311
312
313
314
315
            title={t('layout.setting.tabsRedoBtn')}
            event={HandlerEnum.TABS_SHOW_REDO}
            def={unref(getShowRedo)}
            disabled={!unref(getShowMultipleTab)}
          />

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

          <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)}
          />
340
341
342
343
344
345
          <SwitchItem
            title="Logo"
            event={HandlerEnum.SHOW_LOGO}
            def={unref(getShowLogo)}
            disabled={unref(getIsMixSidebar)}
          />
346
347
348
349
350
351
352
353
354
355
          <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
356
357
358
359
360
361
          <SwitchItem
            title={t('layout.setting.grayMode')}
            event={HandlerEnum.GRAY_MODE}
            def={unref(getGrayMode)}
          />
vben authored
362
363
364
365
366
367
          <SwitchItem
            title={t('layout.setting.colorWeak')}
            event={HandlerEnum.COLOR_WEAK}
            def={unref(getColorWeak)}
          />
vben authored
368
369
370
371
        </>
      );
    }
372
    function renderTransition() {
陈文彬 authored
373
      return (
374
375
376
377
378
379
380
381
382
383
        <>
          <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
384
385
          />
386
387
388
389
          <SwitchItem
            title={t('layout.setting.switchAnimation')}
            event={HandlerEnum.OPEN_ROUTE_TRANSITION}
            def={unref(getEnableTransition)}
陈文彬 authored
390
          />
391
392
393
394
395
396
397
398
399

          <SelectItem
            title={t('layout.setting.animationType')}
            event={HandlerEnum.ROUTER_TRANSITION}
            def={unref(getBasicTransition)}
            options={routerTransitionOptions}
            disabled={!unref(getEnableTransition)}
          />
        </>
陈文彬 authored
400
401
      );
    }
402
陈文彬 authored
403
    return () => (
404
405
406
407
408
409
      <BasicDrawer
        {...attrs}
        title={t('layout.setting.drawerTitle')}
        width={330}
        wrapClassName="setting-drawer"
      >
Vben authored
410
        {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
411
        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
vben authored
412
413
        <Divider>{() => t('layout.setting.navMode')}</Divider>
        {renderSidebar()}
vben authored
414
415
        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
        {renderMainTheme()}
vben authored
416
417
418
419
420
421
422
423
424
425
426
427
        <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
428
429
430
431
      </BasicDrawer>
    );
  },
});