{
- baseHandler(HandlerEnum.MENU_THEME, e);
- }}
- />
- >
+
+ );
+ }
+
+ function renderSiderTheme() {
+ return (
+
);
}
@@ -268,264 +134,192 @@ export default defineComponent({
* @description:
*/
function renderFeatures() {
- return [
- renderSwitchItem(t('layout.setting.menuDrag'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_HAS_DRAG, e);
- },
- def: unref(getCanDrag),
- disabled: !unref(getShowMenuRef),
- }),
- renderSwitchItem(t('layout.setting.menuSearch'), {
- handler: (e) => {
- baseHandler(HandlerEnum.HEADER_SEARCH, e);
- },
- def: unref(getShowSearch),
- disabled: !unref(getShowHeader),
- }),
- renderSwitchItem(t('layout.setting.menuAccordion'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_ACCORDION, e);
- },
- def: unref(getAccordion),
- disabled: !unref(getShowMenuRef),
- }),
- renderSwitchItem(t('layout.setting.menuCollapse'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_COLLAPSED, e);
- },
- def: unref(getCollapsed),
- disabled: !unref(getShowMenuRef),
- }),
- renderSwitchItem(t('layout.setting.collapseMenuDisplayName'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_COLLAPSED_SHOW_TITLE, e);
- },
- def: unref(getCollapsedShowTitle),
- disabled: !unref(getShowMenuRef) || !unref(getCollapsed),
- }),
- renderSwitchItem(t('layout.setting.fixedHeader'), {
- handler: (e) => {
- baseHandler(HandlerEnum.HEADER_FIXED, e);
- },
- def: unref(getHeaderFixed),
- disabled: !unref(getShowHeader),
- }),
- renderSwitchItem(t('layout.setting.fixedSideBar'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_FIXED, e);
- },
- def: unref(getMenuFixed),
- disabled: !unref(getShowMenuRef),
- }),
- renderSelectItem(t('layout.setting.topMenuLayout'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_TOP_ALIGN, e);
- },
- def: unref(getTopMenuAlign),
- options: topMenuAlignOptions,
- disabled: !unref(getShowHeader) || (!unref(getIsTopMenu) && !unref(getSplit)),
- }),
- renderSelectItem(t('layout.setting.menuCollapseButton'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_TRIGGER, e);
- },
- disabled: !unref(getShowMenuRef),
- def: unref(getTrigger),
- options: menuTriggerOptions,
- }),
-
- renderSelectItem(t('layout.setting.contentMode'), {
- handler: (e) => {
- baseHandler(HandlerEnum.CONTENT_MODE, e);
- },
- def: unref(getContentMode),
- options: contentModeOptions,
- }),
-
- {t('layout.setting.autoScreenLock')}
-
+
+
+
+
+
+
+
+
+
+
+ {
- baseHandler(HandlerEnum.LOCK_TIME, e);
- }}
- defaultValue={appStore.getProjectConfig.lockTime}
+ event={HandlerEnum.LOCK_TIME}
+ defaultValue={unref(getLockTime)}
formatter={(value: string) => {
- if (parseInt(value) === 0) {
- return `0(${t('layout.setting.notAutoScreenLock')})`;
- }
- return `${value}${t('layout.setting.minute')}`;
+ return parseInt(value) === 0
+ ? `0(${t('layout.setting.notAutoScreenLock')})`
+ : `${value}${t('layout.setting.minute')}`;
}}
/>
-
,
-
- {t('layout.setting.expandedMenuWidth')}
- `${parseInt(value)}px`}
- onChange={(e: any) => {
- baseHandler(HandlerEnum.MENU_WIDTH, e);
- }}
/>
-
,
- ];
+ >
+ );
}
function renderContent() {
- return [
- renderSwitchItem(t('layout.setting.breadcrumb'), {
- handler: (e) => {
- baseHandler(HandlerEnum.SHOW_BREADCRUMB, e);
- },
- def: unref(getShowBreadCrumb),
- disabled: !unref(getShowHeader),
- }),
- renderSwitchItem(t('layout.setting.breadcrumbIcon'), {
- handler: (e) => {
- baseHandler(HandlerEnum.SHOW_BREADCRUMB_ICON, e);
- },
- def: unref(getShowBreadCrumbIcon),
- disabled: !unref(getShowHeader),
- }),
- renderSwitchItem(t('layout.setting.tabs'), {
- handler: (e) => {
- baseHandler(HandlerEnum.TABS_SHOW, e);
- },
- def: unref(getShowMultipleTab),
- }),
- renderSwitchItem(t('layout.setting.tabsQuickBtn'), {
- handler: (e) => {
- baseHandler(HandlerEnum.TABS_SHOW_QUICK, e);
- },
- def: unref(getShowQuick),
- disabled: !unref(getShowMultipleTab),
- }),
-
- renderSwitchItem(t('layout.setting.sidebar'), {
- handler: (e) => {
- baseHandler(HandlerEnum.MENU_SHOW_SIDEBAR, e);
- },
- def: unref(getShowMenu),
- disabled: unref(getIsHorizontal),
- }),
- renderSwitchItem(t('layout.setting.header'), {
- handler: (e) => {
- baseHandler(HandlerEnum.HEADER_SHOW, e);
- },
- def: unref(getShowHeader),
- }),
- renderSwitchItem('Logo', {
- handler: (e) => {
- baseHandler(HandlerEnum.SHOW_LOGO, e);
- },
- def: unref(getShowLogo),
- }),
- renderSwitchItem(t('layout.setting.footer'), {
- handler: (e) => {
- baseHandler(HandlerEnum.SHOW_FOOTER, e);
- },
- def: unref(getShowFooter),
- }),
- renderSwitchItem(t('layout.setting.fullContent'), {
- handler: (e) => {
- baseHandler(HandlerEnum.FULL_CONTENT, e);
- },
- def: unref(getFullContent),
- }),
- renderSwitchItem(t('layout.setting.grayMode'), {
- handler: (e) => {
- baseHandler(HandlerEnum.GRAY_MODE, e);
- },
- def: unref(getGrayMode),
- }),
- renderSwitchItem(t('layout.setting.colorWeak'), {
- handler: (e) => {
- baseHandler(HandlerEnum.COLOR_WEAK, e);
- },
- def: unref(getColorWeak),
- }),
- ];
- }
-
- function renderTransition() {
return (
<>
- {renderSwitchItem(t('layout.setting.progress'), {
- handler: (e) => {
- baseHandler(HandlerEnum.OPEN_PROGRESS, e);
- },
- def: unref(getOpenNProgress),
- })}
- {renderSwitchItem(t('layout.setting.switchLoading'), {
- handler: (e) => {
- baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
- },
- def: unref(getOpenPageLoading),
- })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {renderSwitchItem(t('layout.setting.switchAnimation'), {
- handler: (e) => {
- baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
- },
- def: unref(getEnableTransition),
- })}
+
- {renderSelectItem(t('layout.setting.animationType'), {
- handler: (e) => {
- baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
- },
- def: unref(getBasicTransition),
- options: routerTransitionOptions,
- disabled: !unref(getEnableTransition),
- })}
+
>
);
}
- function renderSelectItem(text: string, config?: SelectConfig) {
- const { handler, def, disabled = false, options } = config || {};
- const opt = def ? { value: def, defaultValue: def } : {};
+ function renderTransition() {
return (
-
- {text}
-
- );
- }
- function renderSwitchItem(text: string, options?: SwitchOptions) {
- const { handler, def, disabled = false } = options || {};
- const opt = def ? { checked: def } : {};
- return (
-
- {text}
- {
- handler && handler(e);
- }}
- checkedChildren={t('layout.setting.on')}
- unCheckedChildren={t('layout.setting.off')}
+
-
+
+
+ >
);
}
@@ -541,7 +335,10 @@ export default defineComponent({
<>
{() => t('layout.setting.navMode')}
{renderSidebar()}
- {renderTheme()}
+ {() => t('layout.setting.headerTheme')}
+ {renderHeaderTheme()}
+ {() => t('layout.setting.sidebarTheme')}
+ {renderSiderTheme()}
{() => t('layout.setting.interfaceFunction')}
{renderFeatures()}
{() => t('layout.setting.interfaceDisplay')}
@@ -549,7 +346,7 @@ export default defineComponent({
{() => t('layout.setting.animation')}
{renderTransition()}
-
+
>
),
}}
diff --git a/src/layouts/default/setting/components/InputNumberItem.vue b/src/layouts/default/setting/components/InputNumberItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0af48b8fa06660b624f7e5b74f4df45b19017f9
--- /dev/null
+++ b/src/layouts/default/setting/components/InputNumberItem.vue
@@ -0,0 +1,58 @@
+
+
+ {{ title }}
+
+
+
+
+
diff --git a/src/layouts/default/setting/components/SelectItem.vue b/src/layouts/default/setting/components/SelectItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d52774bdc673e7513cbe11cd6e24215beec198aa
--- /dev/null
+++ b/src/layouts/default/setting/components/SelectItem.vue
@@ -0,0 +1,77 @@
+
+
+ {{ title }}
+
+
+
+
+
diff --git a/src/layouts/default/setting/components/SettingFooter.vue b/src/layouts/default/setting/components/SettingFooter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..270b85f117fc28f53aa5ff3ff1014fcaeccd3d60
--- /dev/null
+++ b/src/layouts/default/setting/components/SettingFooter.vue
@@ -0,0 +1,86 @@
+
+
+
+
+ {{ t('layout.setting.copyBtn') }}
+
+
+
+
+ {{ t('layout.setting.resetBtn') }}
+
+
+
+
+ {{ t('layout.setting.clearBtn') }}
+
+
+
+
+
diff --git a/src/layouts/default/setting/components/SwitchItem.vue b/src/layouts/default/setting/components/SwitchItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b571e56815ed2ff6be0a90f2405bfcd9b640550
--- /dev/null
+++ b/src/layouts/default/setting/components/SwitchItem.vue
@@ -0,0 +1,68 @@
+
+
+ {{ title }}
+
+
+
+
+
diff --git a/src/layouts/default/setting/components/ThemePicker.vue b/src/layouts/default/setting/components/ThemePicker.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e785d227dffd23f1ba491c864e96bd4ddf10d805
--- /dev/null
+++ b/src/layouts/default/setting/components/ThemePicker.vue
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/default/setting/components/TypePicker.vue b/src/layouts/default/setting/components/TypePicker.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d9a3b4167cdcd7403203c0ff6a032ac1a8cd597
--- /dev/null
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
diff --git a/src/layouts/default/setting/components/index.ts b/src/layouts/default/setting/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ff4fe8b8f64be9419c644a11f2bc4c464c27760
--- /dev/null
+++ b/src/layouts/default/setting/components/index.ts
@@ -0,0 +1,8 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
+export const ThemePicker = createAsyncComponent(() => import('./ThemePicker.vue'));
+export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.vue'));
+export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'));
+export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'));
+export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'));
diff --git a/src/layouts/default/setting/index.less b/src/layouts/default/setting/index.less
deleted file mode 100644
index 46486176a157c6282d7ecc7fc6e277e120d032ad..0000000000000000000000000000000000000000
--- a/src/layouts/default/setting/index.less
+++ /dev/null
@@ -1,73 +0,0 @@
-.setting-drawer {
- .ant-drawer-body {
- padding-top: 0;
- background: @white;
- }
-
- &__footer {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- &__cell-item {
- display: flex;
- justify-content: space-between;
- margin: 16px 0;
- }
-
- &__theme-item {
- display: flex;
- flex-wrap: wrap;
- margin: 16px 0;
- justify-content: space-around;
-
- > span {
- width: 20px;
- height: 20px;
- cursor: pointer;
- border: 1px solid #ddd;
- border-radius: 2px;
-
- svg {
- display: none;
- }
-
- &.active {
- border: 1px solid lighten(@primary-color, 10%);
-
- svg {
- display: inline-block;
- margin: 0 0 3px 3px;
- font-size: 12px;
- fill: @white;
- }
- }
- }
- }
-
- &__siderbar {
- display: flex;
-
- > div {
- position: relative;
-
- .check-icon {
- position: absolute;
- top: 40%;
- left: 40%;
- display: none;
- color: @primary-color;
-
- &.active {
- display: inline-block;
- }
- }
- }
-
- img {
- margin-right: 10px;
- cursor: pointer;
- }
- }
-}
diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue
index 7d3c604244d50a17e2480d7f9422f9e8f174facd..ec6e5e053eddef3adc5df62911f2cd375f99297d 100644
--- a/src/layouts/default/setting/index.vue
+++ b/src/layouts/default/setting/index.vue
@@ -1,5 +1,5 @@
-