vben
authored
|
1
|
import { defineComponent, computed, unref } from 'vue';
|
|
2
|
import { BasicDrawer } from '/@/components/Drawer/index';
|
vben
authored
|
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
|
|
vben
authored
|
13
|
import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
|
|
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';
|
|
21
|
|
vben
authored
|
22
|
import { baseHandler } from './handler';
|
vben
authored
|
23
|
|
vben
authored
|
24
25
26
27
|
import {
HandlerEnum,
contentModeOptions,
topMenuAlignOptions,
|
vben
authored
|
28
|
getMenuTriggerOptions,
|
vben
authored
|
29
|
routerTransitionOptions,
|
vben
authored
|
30
|
menuTypeList,
|
无木成林
authored
|
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';
|
|
39
|
|
vben
authored
|
40
|
const { t } = useI18n();
|
vben
authored
|
41
|
|
|
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,
|
vben
authored
|
54
|
getLockTime,
|
vben
authored
|
55
|
getThemeColor,
|
vben
authored
|
56
|
} = useRootSetting();
|
|
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,
|
vben
authored
|
73
|
getCanDrag,
|
vben
authored
|
74
75
76
77
78
79
|
getTopMenuAlign,
getAccordion,
getMenuWidth,
getMenuBgColor,
getIsTopMenu,
getSplit,
|
vben
authored
|
80
81
|
getIsMixSidebar,
getCloseMixSidebarOnChange,
|
无木成林
authored
|
82
|
getMixSideTrigger,
|
vben
authored
|
83
|
getMixSideFixed,
|
vben
authored
|
84
|
} = useMenuSetting();
|
|
85
|
|
vben
authored
|
86
87
88
89
90
91
|
const {
getShowHeader,
getFixed: getHeaderFixed,
getHeaderBgColor,
getShowSearch,
} = useHeaderSetting();
|
|
92
|
|
vben
authored
|
93
|
const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
|
|
94
95
|
const getShowMenuRef = computed(() => {
|
vben
authored
|
96
|
return unref(getShowMenu) && !unref(getIsHorizontal);
|
|
97
98
|
});
|
vben
authored
|
99
100
101
|
function renderSidebar() {
return (
<>
|
vben
authored
|
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
|
</>
|
|
114
115
116
|
);
}
|
vben
authored
|
117
|
function renderHeaderTheme() {
|
vben
authored
|
118
|
return (
|
vben
authored
|
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
|
);
|
vben
authored
|
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}
/>
);
}
|
|
147
148
149
150
|
/**
* @description:
*/
function renderFeatures() {
|
vben
authored
|
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;
}
|
vben
authored
|
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
|
vben
authored
|
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
|
/>
|
vben
authored
|
212
|
|
vben
authored
|
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)}
|
vben
authored
|
223
|
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
|
vben
authored
|
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
|
vben
authored
|
233
234
235
236
|
title={t('layout.setting.topMenuLayout')}
event={HandlerEnum.MENU_TOP_ALIGN}
def={unref(getTopMenuAlign)}
options={topMenuAlignOptions}
|
vben
authored
|
237
|
disabled={
|
vben
authored
|
238
239
240
241
|
!unref(getShowHeader) ||
unref(getSplit) ||
(!unref(getIsTopMenu) && !unref(getSplit)) ||
unref(getIsMixSidebar)
|
vben
authored
|
242
|
}
|
vben
authored
|
243
244
245
246
|
/>
<SelectItem
title={t('layout.setting.menuCollapseButton')}
event={HandlerEnum.MENU_TRIGGER}
|
vben
authored
|
247
248
|
def={triggerDef}
options={triggerOptions}
|
vben
authored
|
249
|
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
|
vben
authored
|
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')}
|
|
259
|
min={0}
|
vben
authored
|
260
261
|
event={HandlerEnum.LOCK_TIME}
defaultValue={unref(getLockTime)}
|
|
262
|
formatter={(value: string) => {
|
vben
authored
|
263
264
265
|
return parseInt(value) === 0
? `0(${t('layout.setting.notAutoScreenLock')})`
: `${value}${t('layout.setting.minute')}`;
|
|
266
267
|
}}
/>
|
vben
authored
|
268
269
|
<InputNumberItem
title={t('layout.setting.expandedMenuWidth')}
|
|
270
271
272
|
max={600}
min={100}
step={10}
|
vben
authored
|
273
|
event={HandlerEnum.MENU_WIDTH}
|
|
274
|
disabled={!unref(getShowMenuRef)}
|
vben
authored
|
275
|
defaultValue={unref(getMenuWidth)}
|
|
276
277
|
formatter={(value: string) => `${parseInt(value)}px`}
/>
|
vben
authored
|
278
279
|
</>
);
|
|
280
281
282
|
}
function renderContent() {
|
vben
authored
|
283
284
|
return (
<>
|
vben
authored
|
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
|
vben
authored
|
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)}
/>
|
vben
authored
|
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)}
/>
|
vben
authored
|
337
338
339
340
341
342
|
<SwitchItem
title="Logo"
event={HandlerEnum.SHOW_LOGO}
def={unref(getShowLogo)}
disabled={unref(getIsMixSidebar)}
/>
|
vben
authored
|
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
|
|
vben
authored
|
354
355
356
357
358
|
<SwitchItem
title={t('layout.setting.grayMode')}
event={HandlerEnum.GRAY_MODE}
def={unref(getGrayMode)}
/>
|
vben
authored
|
359
|
|
vben
authored
|
360
361
362
363
364
|
<SwitchItem
title={t('layout.setting.colorWeak')}
event={HandlerEnum.COLOR_WEAK}
def={unref(getColorWeak)}
/>
|
vben
authored
|
365
366
367
368
|
</>
);
}
|
vben
authored
|
369
|
function renderTransition() {
|
|
370
|
return (
|
vben
authored
|
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)}
|
|
381
382
|
/>
|
vben
authored
|
383
384
385
386
|
<SwitchItem
title={t('layout.setting.switchAnimation')}
event={HandlerEnum.OPEN_ROUTE_TRANSITION}
def={unref(getEnableTransition)}
|
|
387
|
/>
|
vben
authored
|
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)}
/>
</>
|
|
397
398
|
);
}
|
vben
authored
|
399
|
|
|
400
|
return () => (
|
vben
authored
|
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 />
|
|
423
424
425
426
|
</BasicDrawer>
);
},
});
|