mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-02-02 19:08:40 +08:00
perf(setting-drawer): perf setting-drawer
This commit is contained in:
vben
parent
0362ab26b5
commit
ed41e5082f
32
build/vite/plugin/html.ts
Normal file
32
build/vite/plugin/html.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import type { Plugin } from 'vite';
|
||||
import ViteHtmlPlugin from 'vite-plugin-html';
|
||||
import { isProdFn, isSiteMode, ViteEnv } from '../../utils';
|
||||
|
||||
import { hmScript } from '../hm';
|
||||
// @ts-ignore
|
||||
import pkg from '../../../package.json';
|
||||
import { GLOB_CONFIG_FILE_NAME } from '../../constant';
|
||||
|
||||
export function setupHtmlPlugin(plugins: Plugin[], env: ViteEnv) {
|
||||
const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
|
||||
|
||||
const htmlPlugin = ViteHtmlPlugin({
|
||||
// html title
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
minify: isProdFn(),
|
||||
options: {
|
||||
// Package and insert additional configuration files
|
||||
injectConfig: isProdFn()
|
||||
? `<script src='${VITE_PUBLIC_PATH || './'}${GLOB_CONFIG_FILE_NAME}?v=${
|
||||
pkg.version
|
||||
}-${new Date().getTime()}'></script>`
|
||||
: '',
|
||||
// Insert Baidu statistics code
|
||||
hmScript: isSiteMode() ? hmScript : '',
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
},
|
||||
});
|
||||
|
||||
plugins.push(htmlPlugin);
|
||||
return plugins;
|
||||
}
|
||||
@ -1,84 +1,32 @@
|
||||
import type { Plugin as VitePlugin } from 'vite';
|
||||
import type { Plugin as rollupPlugin } from 'rollup';
|
||||
|
||||
import { createMockServer } from 'vite-plugin-mock';
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
import ViteHtmlPlugin from 'vite-plugin-html';
|
||||
import PurgeIcons from 'vite-plugin-purge-icons';
|
||||
|
||||
import visualizer from 'rollup-plugin-visualizer';
|
||||
import gzipPlugin from './gzip/index';
|
||||
|
||||
import { hmScript } from '../hm';
|
||||
|
||||
// @ts-ignore
|
||||
import pkg from '../../../package.json';
|
||||
import { isDevFn, isProdFn, isSiteMode, ViteEnv, isReportMode, isBuildGzip } from '../../utils';
|
||||
import { GLOB_CONFIG_FILE_NAME } from '../../constant';
|
||||
import { isProdFn, isSiteMode, ViteEnv, isReportMode, isBuildGzip } from '../../utils';
|
||||
import { setupHtmlPlugin } from './html';
|
||||
import { setupPwaPlugin } from './pwa';
|
||||
import { setupMockPlugin } from './mock';
|
||||
|
||||
// gen vite plugins
|
||||
export function createVitePlugins(viteEnv: ViteEnv) {
|
||||
const { VITE_USE_MOCK, VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH, VITE_USE_PWA } = viteEnv;
|
||||
|
||||
const vitePlugins: VitePlugin[] = [];
|
||||
|
||||
// vite-plugin-html
|
||||
vitePlugins.push(
|
||||
ViteHtmlPlugin({
|
||||
// html title
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
minify: isProdFn(),
|
||||
options: {
|
||||
// Package and insert additional configuration files
|
||||
injectConfig: isProdFn()
|
||||
? `<script src='${VITE_PUBLIC_PATH || './'}${GLOB_CONFIG_FILE_NAME}?v=${
|
||||
pkg.version
|
||||
}-${new Date().getTime()}'></script>`
|
||||
: '',
|
||||
// Insert Baidu statistics code
|
||||
hmScript: isSiteMode() ? hmScript : '',
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
},
|
||||
})
|
||||
);
|
||||
setupHtmlPlugin(vitePlugins, viteEnv);
|
||||
// vite-plugin-pwa
|
||||
setupPwaPlugin(vitePlugins, viteEnv);
|
||||
// vite-plugin-mock
|
||||
setupMockPlugin(vitePlugins, viteEnv);
|
||||
|
||||
// vite-plugin-purge-icons
|
||||
vitePlugins.push(PurgeIcons());
|
||||
|
||||
if (isProdFn() && VITE_USE_PWA) {
|
||||
vitePlugins.push(
|
||||
VitePWA({
|
||||
manifest: {
|
||||
name: 'Vben Admin',
|
||||
short_name: 'vben_admin',
|
||||
icons: [
|
||||
{
|
||||
src: './resource/img/pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: './resource/img/pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// vite-plugin-mock
|
||||
if (isDevFn() && VITE_USE_MOCK) {
|
||||
// open mock
|
||||
vitePlugins.push(
|
||||
createMockServer({
|
||||
ignore: /^\_/,
|
||||
mockPath: 'mock',
|
||||
showTime: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
return vitePlugins;
|
||||
}
|
||||
|
||||
@ -86,17 +34,15 @@ export function createVitePlugins(viteEnv: ViteEnv) {
|
||||
export function createRollupPlugin() {
|
||||
const rollupPlugins: rollupPlugin[] = [];
|
||||
|
||||
if (isProdFn()) {
|
||||
if (isReportMode()) {
|
||||
// rollup-plugin-visualizer
|
||||
rollupPlugins.push(
|
||||
visualizer({ filename: './build/.cache/stats.html', open: true }) as Plugin
|
||||
);
|
||||
}
|
||||
if (isBuildGzip() || isSiteMode()) {
|
||||
// rollup-plugin-gizp
|
||||
rollupPlugins.push(gzipPlugin());
|
||||
}
|
||||
if (!isProdFn() && isReportMode()) {
|
||||
// rollup-plugin-visualizer
|
||||
rollupPlugins.push(visualizer({ filename: './build/.cache/stats.html', open: true }) as Plugin);
|
||||
}
|
||||
|
||||
if (!isProdFn() && (isBuildGzip() || isSiteMode())) {
|
||||
// rollup-plugin-gizp
|
||||
rollupPlugins.push(gzipPlugin());
|
||||
}
|
||||
|
||||
return rollupPlugins;
|
||||
}
|
||||
|
||||
16
build/vite/plugin/mock.ts
Normal file
16
build/vite/plugin/mock.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { createMockServer } from 'vite-plugin-mock';
|
||||
import type { Plugin } from 'vite';
|
||||
import { isDevFn, ViteEnv } from '../../utils';
|
||||
|
||||
export function setupMockPlugin(plugins: Plugin[], env: ViteEnv) {
|
||||
const { VITE_USE_MOCK } = env;
|
||||
const mockPlugin = createMockServer({
|
||||
ignore: /^\_/,
|
||||
mockPath: 'mock',
|
||||
showTime: true,
|
||||
});
|
||||
if (isDevFn() && VITE_USE_MOCK) {
|
||||
plugins.push(mockPlugin);
|
||||
}
|
||||
return plugins;
|
||||
}
|
||||
31
build/vite/plugin/pwa.ts
Normal file
31
build/vite/plugin/pwa.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
import type { Plugin } from 'vite';
|
||||
import { isProdFn, ViteEnv } from '../../utils';
|
||||
|
||||
export function setupPwaPlugin(plugins: Plugin[], env: ViteEnv) {
|
||||
const { VITE_USE_PWA } = env;
|
||||
|
||||
const pwaPlugin = VitePWA({
|
||||
manifest: {
|
||||
name: 'Vben Admin',
|
||||
short_name: 'vben_admin',
|
||||
icons: [
|
||||
{
|
||||
src: './resource/img/pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: './resource/img/pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
if (isProdFn() && VITE_USE_PWA) {
|
||||
plugins.push(pwaPlugin);
|
||||
}
|
||||
return plugins;
|
||||
}
|
||||
@ -103,7 +103,7 @@ export default defineComponent({
|
||||
const isHorizontal = unref(getIsHorizontal) || getSplit.value;
|
||||
|
||||
return {
|
||||
height: isHorizontal ? `calc(100%)` : `calc(100% - ${props.showLogo ? '48px' : '0px'})`,
|
||||
height: isHorizontal ? '100%' : `calc(100% - ${props.showLogo ? '48px' : '0px'})`,
|
||||
overflowY: isHorizontal ? 'hidden' : 'auto',
|
||||
};
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@ export function useI18n(namespace?: string) {
|
||||
|
||||
return {
|
||||
...methods,
|
||||
t: (key: string, ...arg: Parameters<typeof t>) => {
|
||||
t: (key: string, ...arg: Partial<Parameters<typeof t>>) => {
|
||||
if (!key) return '';
|
||||
return t(getKey(key), ...arg);
|
||||
return t(getKey(key), ...(arg as Parameters<typeof t>));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
import type { ProjectConfig } from '/@/types/config';
|
||||
|
||||
import defaultSetting from '/@/settings/projectSetting';
|
||||
|
||||
import { defineComponent, computed, unref, FunctionalComponent } from 'vue';
|
||||
import { defineComponent, computed, unref } from 'vue';
|
||||
import { BasicDrawer } from '/@/components/Drawer/index';
|
||||
import { Divider, Switch, Tooltip, InputNumber, Select } from 'ant-design-vue';
|
||||
import { Button } from '/@/components/Button';
|
||||
import { CopyOutlined, RedoOutlined, CheckOutlined } from '@ant-design/icons-vue';
|
||||
import { Divider } from 'ant-design-vue';
|
||||
import {
|
||||
TypePicker,
|
||||
ThemePicker,
|
||||
SettingFooter,
|
||||
SwitchItem,
|
||||
SelectItem,
|
||||
InputNumberItem,
|
||||
} from './components';
|
||||
|
||||
import { MenuTypeEnum } from '/@/enums/menuEnum';
|
||||
import { appStore } from '/@/store/modules/app';
|
||||
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
@ -20,8 +19,6 @@ import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
|
||||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
|
||||
|
||||
import { baseHandler } from './handler';
|
||||
|
||||
import {
|
||||
@ -35,146 +32,8 @@ import {
|
||||
|
||||
import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/colorSetting';
|
||||
|
||||
interface SwitchOptions {
|
||||
config?: DeepPartial<ProjectConfig>;
|
||||
def?: any;
|
||||
disabled?: boolean;
|
||||
handler?: Fn;
|
||||
}
|
||||
|
||||
interface SelectConfig {
|
||||
options?: LabelValueOptions;
|
||||
def?: any;
|
||||
disabled?: boolean;
|
||||
handler?: Fn;
|
||||
}
|
||||
|
||||
interface ThemePickerProps {
|
||||
colorList: string[];
|
||||
handler: Fn;
|
||||
def: string;
|
||||
}
|
||||
|
||||
const { createSuccessModal, createMessage } = useMessage();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**
|
||||
* Menu type Picker comp
|
||||
*/
|
||||
const MenuTypePicker: FunctionalComponent = () => {
|
||||
const { getIsHorizontal, getMenuType } = useMenuSetting();
|
||||
return (
|
||||
<div class={`setting-drawer__siderbar`}>
|
||||
{menuTypeList.map((item) => {
|
||||
const { title, type: ItemType, mode, src } = item;
|
||||
return (
|
||||
<Tooltip title={title} placement="bottom" key={title}>
|
||||
{{
|
||||
default: () => (
|
||||
<div
|
||||
onClick={baseHandler.bind(null, HandlerEnum.CHANGE_LAYOUT, {
|
||||
mode: mode,
|
||||
type: ItemType,
|
||||
split: unref(getIsHorizontal) ? false : undefined,
|
||||
})}
|
||||
>
|
||||
<CheckOutlined
|
||||
class={['check-icon', unref(getMenuType) === ItemType ? 'active' : '']}
|
||||
/>
|
||||
<img src={src} />
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ThemePicker: FunctionalComponent<ThemePickerProps> = (props) => {
|
||||
return (
|
||||
<div class={`setting-drawer__theme-item`}>
|
||||
{props.colorList.map((color) => {
|
||||
return (
|
||||
<span
|
||||
onClick={() => props.handler?.(color)}
|
||||
key={color}
|
||||
class={[props.def === color ? 'active' : '']}
|
||||
style={{
|
||||
background: color,
|
||||
}}
|
||||
>
|
||||
<CheckOutlined class="icon" />
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* FooterButton component
|
||||
*/
|
||||
const FooterButton: FunctionalComponent = () => {
|
||||
const { getRootSetting } = useRootSetting();
|
||||
function handleCopy() {
|
||||
const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(getRootSetting), null, 2));
|
||||
unref(isSuccessRef) &&
|
||||
createSuccessModal({
|
||||
title: t('layout.setting.operatingTitle'),
|
||||
content: t('layout.setting.operatingContent'),
|
||||
});
|
||||
}
|
||||
function handleResetSetting() {
|
||||
try {
|
||||
appStore.commitProjectConfigState(defaultSetting);
|
||||
const { colorWeak, grayMode } = defaultSetting;
|
||||
// updateTheme(themeColor);
|
||||
updateColorWeak(colorWeak);
|
||||
updateGrayMode(grayMode);
|
||||
createMessage.success(t('layout.setting.resetSuccess'));
|
||||
} catch (error) {
|
||||
createMessage.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClearAndRedo() {
|
||||
localStorage.clear();
|
||||
appStore.resumeAllState();
|
||||
location.reload();
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="setting-drawer__footer">
|
||||
<Button type="primary" block onClick={handleCopy}>
|
||||
{() => (
|
||||
<>
|
||||
<CopyOutlined class="mr-2" />
|
||||
{t('layout.setting.copyBtn')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button block class="mt-2" onClick={handleResetSetting} color="warning">
|
||||
{() => (
|
||||
<>
|
||||
<RedoOutlined class="mr-2" />
|
||||
{t('layout.setting.resetBtn')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button block class="mt-2" onClick={handleClearAndRedo} color="error">
|
||||
{() => (
|
||||
<>
|
||||
<RedoOutlined class="mr-2" />
|
||||
{t('layout.setting.clearBtn')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingDrawer',
|
||||
setup(_, { attrs }) {
|
||||
@ -187,6 +46,7 @@ export default defineComponent({
|
||||
getFullContent,
|
||||
getColorWeak,
|
||||
getGrayMode,
|
||||
getLockTime,
|
||||
} = useRootSetting();
|
||||
|
||||
const {
|
||||
@ -229,38 +89,44 @@ export default defineComponent({
|
||||
function renderSidebar() {
|
||||
return (
|
||||
<>
|
||||
<MenuTypePicker />
|
||||
{renderSwitchItem(t('layout.setting.splitMenu'), {
|
||||
handler: (e) => {
|
||||
baseHandler(HandlerEnum.MENU_SPLIT, e);
|
||||
},
|
||||
def: unref(getSplit),
|
||||
disabled: !unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX,
|
||||
})}
|
||||
<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)}
|
||||
/>
|
||||
<SwitchItem
|
||||
title={t('layout.setting.splitMenu')}
|
||||
event={HandlerEnum.MENU_SPLIT}
|
||||
def={unref(getSplit)}
|
||||
disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function renderTheme() {
|
||||
function renderHeaderTheme() {
|
||||
return (
|
||||
<>
|
||||
<Divider>{() => t('layout.setting.headerTheme')}</Divider>
|
||||
<ThemePicker
|
||||
colorList={HEADER_PRESET_BG_COLOR_LIST}
|
||||
def={unref(getHeaderBgColor)}
|
||||
handler={(e) => {
|
||||
baseHandler(HandlerEnum.HEADER_THEME, e);
|
||||
}}
|
||||
/>
|
||||
<Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
|
||||
<ThemePicker
|
||||
colorList={SIDE_BAR_BG_COLOR_LIST}
|
||||
def={unref(getMenuBgColor)}
|
||||
handler={(e) => {
|
||||
baseHandler(HandlerEnum.MENU_THEME, e);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -268,267 +134,195 @@ 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,
|
||||
}),
|
||||
<div class={`setting-drawer__cell-item`}>
|
||||
<span>{t('layout.setting.autoScreenLock')}</span>
|
||||
<InputNumber
|
||||
style="width:126px"
|
||||
size="small"
|
||||
return (
|
||||
<>
|
||||
<SwitchItem
|
||||
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)}
|
||||
/>
|
||||
<SwitchItem
|
||||
title={t('layout.setting.menuCollapse')}
|
||||
event={HandlerEnum.MENU_COLLAPSED}
|
||||
def={unref(getCollapsed)}
|
||||
disabled={!unref(getShowMenuRef)}
|
||||
/>
|
||||
<SwitchItem
|
||||
title={t('layout.setting.collapseMenuDisplayName')}
|
||||
event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
|
||||
def={unref(getCollapsedShowTitle)}
|
||||
disabled={!unref(getShowMenuRef) || !unref(getCollapsed)}
|
||||
/>
|
||||
<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)}
|
||||
disabled={!unref(getShowMenuRef)}
|
||||
/>
|
||||
<SelectItem
|
||||
title={t('layout.setting.topMenuLayout')}
|
||||
event={HandlerEnum.MENU_TOP_ALIGN}
|
||||
def={unref(getTopMenuAlign)}
|
||||
options={topMenuAlignOptions}
|
||||
disabled={!unref(getShowHeader) || (!unref(getIsTopMenu) && !unref(getSplit))}
|
||||
/>
|
||||
<SelectItem
|
||||
title={t('layout.setting.menuCollapseButton')}
|
||||
event={HandlerEnum.MENU_TRIGGER}
|
||||
def={unref(getTrigger)}
|
||||
options={menuTriggerOptions}
|
||||
disabled={!unref(getShowMenuRef)}
|
||||
/>
|
||||
<SelectItem
|
||||
title={t('layout.setting.contentMode')}
|
||||
event={HandlerEnum.CONTENT_MODE}
|
||||
def={unref(getContentMode)}
|
||||
options={contentModeOptions}
|
||||
/>
|
||||
<InputNumberItem
|
||||
title={t('layout.setting.autoScreenLock')}
|
||||
min={0}
|
||||
onChange={(e: any) => {
|
||||
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')}`;
|
||||
}}
|
||||
/>
|
||||
</div>,
|
||||
<div class={`setting-drawer__cell-item`}>
|
||||
<span>{t('layout.setting.expandedMenuWidth')}</span>
|
||||
<InputNumber
|
||||
style="width:126px"
|
||||
size="small"
|
||||
<InputNumberItem
|
||||
title={t('layout.setting.expandedMenuWidth')}
|
||||
max={600}
|
||||
min={100}
|
||||
step={10}
|
||||
event={HandlerEnum.MENU_WIDTH}
|
||||
disabled={!unref(getShowMenuRef)}
|
||||
defaultValue={unref(getMenuWidth)}
|
||||
formatter={(value: string) => `${parseInt(value)}px`}
|
||||
onChange={(e: any) => {
|
||||
baseHandler(HandlerEnum.MENU_WIDTH, e);
|
||||
}}
|
||||
/>
|
||||
</div>,
|
||||
];
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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),
|
||||
}),
|
||||
return (
|
||||
<>
|
||||
<SwitchItem
|
||||
title={t('layout.setting.breadcrumb')}
|
||||
event={HandlerEnum.SHOW_BREADCRUMB}
|
||||
def={unref(getShowBreadCrumb)}
|
||||
disabled={!unref(getShowHeader)}
|
||||
/>
|
||||
|
||||
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),
|
||||
}),
|
||||
];
|
||||
<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
|
||||
title={t('layout.setting.tabsQuickBtn')}
|
||||
event={HandlerEnum.TABS_SHOW_QUICK}
|
||||
def={unref(getShowQuick)}
|
||||
disabled={!unref(getShowMultipleTab)}
|
||||
/>
|
||||
|
||||
<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)}
|
||||
/>
|
||||
<SwitchItem title="Logo" event={HandlerEnum.SHOW_LOGO} def={unref(getShowLogo)} />
|
||||
<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)}
|
||||
/>
|
||||
|
||||
<SwitchItem
|
||||
title={t('layout.setting.grayMode')}
|
||||
event={HandlerEnum.GRAY_MODE}
|
||||
def={unref(getGrayMode)}
|
||||
/>
|
||||
|
||||
<SwitchItem
|
||||
title={t('layout.setting.colorWeak')}
|
||||
event={HandlerEnum.COLOR_WEAK}
|
||||
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),
|
||||
})}
|
||||
<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)}
|
||||
/>
|
||||
|
||||
{renderSwitchItem(t('layout.setting.switchAnimation'), {
|
||||
handler: (e) => {
|
||||
baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
|
||||
},
|
||||
def: unref(getEnableTransition),
|
||||
})}
|
||||
<SwitchItem
|
||||
title={t('layout.setting.switchAnimation')}
|
||||
event={HandlerEnum.OPEN_ROUTE_TRANSITION}
|
||||
def={unref(getEnableTransition)}
|
||||
/>
|
||||
|
||||
{renderSelectItem(t('layout.setting.animationType'), {
|
||||
handler: (e) => {
|
||||
baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
|
||||
},
|
||||
def: unref(getBasicTransition),
|
||||
options: routerTransitionOptions,
|
||||
disabled: !unref(getEnableTransition),
|
||||
})}
|
||||
<SelectItem
|
||||
title={t('layout.setting.animationType')}
|
||||
event={HandlerEnum.ROUTER_TRANSITION}
|
||||
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 } : {};
|
||||
return (
|
||||
<div class={`setting-drawer__cell-item`}>
|
||||
<span>{text}</span>
|
||||
<Select
|
||||
{...opt}
|
||||
disabled={disabled}
|
||||
size="small"
|
||||
style={{ width: '126px' }}
|
||||
onChange={(e) => {
|
||||
handler && handler(e);
|
||||
}}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderSwitchItem(text: string, options?: SwitchOptions) {
|
||||
const { handler, def, disabled = false } = options || {};
|
||||
const opt = def ? { checked: def } : {};
|
||||
return (
|
||||
<div class={`setting-drawer__cell-item`}>
|
||||
<span>{text}</span>
|
||||
<Switch
|
||||
{...opt}
|
||||
disabled={disabled}
|
||||
onChange={(e: any) => {
|
||||
handler && handler(e);
|
||||
}}
|
||||
checkedChildren={t('layout.setting.on')}
|
||||
unCheckedChildren={t('layout.setting.off')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return () => (
|
||||
<BasicDrawer
|
||||
{...attrs}
|
||||
@ -541,7 +335,10 @@ export default defineComponent({
|
||||
<>
|
||||
<Divider>{() => t('layout.setting.navMode')}</Divider>
|
||||
{renderSidebar()}
|
||||
{renderTheme()}
|
||||
<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>
|
||||
@ -549,7 +346,7 @@ export default defineComponent({
|
||||
<Divider>{() => t('layout.setting.animation')}</Divider>
|
||||
{renderTransition()}
|
||||
<Divider />
|
||||
<FooterButton />
|
||||
<SettingFooter />
|
||||
</>
|
||||
),
|
||||
}}
|
||||
|
||||
58
src/layouts/default/setting/components/InputNumberItem.vue
Normal file
58
src/layouts/default/setting/components/InputNumberItem.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<span> {{ title }}</span>
|
||||
<InputNumber
|
||||
v-bind="$attrs"
|
||||
size="small"
|
||||
:class="`${prefixCls}-input-number`"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
import { InputNumber } from 'ant-design-vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { baseHandler } from '../handler';
|
||||
import { HandlerEnum } from '../enum';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'InputNumberItem',
|
||||
components: { InputNumber },
|
||||
props: {
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>,
|
||||
default: () => {},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('setting-input-number-item');
|
||||
|
||||
function handleChange(e: ChangeEvent) {
|
||||
props.event && baseHandler(props.event, e);
|
||||
}
|
||||
return {
|
||||
prefixCls,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-input-number-item';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
|
||||
&-input-number {
|
||||
width: 126px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
src/layouts/default/setting/components/SelectItem.vue
Normal file
77
src/layouts/default/setting/components/SelectItem.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<span> {{ title }}</span>
|
||||
<Select
|
||||
v-bind="getBindValue"
|
||||
:class="`${prefixCls}-select`"
|
||||
@change="handleChange"
|
||||
:disabled="disabled"
|
||||
size="small"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, computed } from 'vue';
|
||||
|
||||
import { Select } from 'ant-design-vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { baseHandler } from '../handler';
|
||||
import { HandlerEnum } from '../enum';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SelectItem',
|
||||
components: { Select },
|
||||
props: {
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>,
|
||||
default: () => {},
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
def: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
},
|
||||
initValue: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
},
|
||||
options: {
|
||||
type: Array as PropType<LabelValueOptions>,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('setting-select-item');
|
||||
const getBindValue = computed(() => {
|
||||
return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
|
||||
});
|
||||
|
||||
function handleChange(e: ChangeEvent) {
|
||||
props.event && baseHandler(props.event, e);
|
||||
}
|
||||
return {
|
||||
prefixCls,
|
||||
handleChange,
|
||||
getBindValue,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-select-item';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
|
||||
&-select {
|
||||
width: 126px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
src/layouts/default/setting/components/SettingFooter.vue
Normal file
86
src/layouts/default/setting/components/SettingFooter.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<a-button type="primary" block @click="handleCopy">
|
||||
<CopyOutlined class="mr-2" />
|
||||
{{ t('layout.setting.copyBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-button color="warning" block @click="handleResetSetting" class="my-3">
|
||||
<RedoOutlined class="mr-2" />
|
||||
{{ t('layout.setting.resetBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-button color="error" block @click="handleClearAndRedo">
|
||||
<RedoOutlined class="mr-2" />
|
||||
{{ t('layout.setting.clearBtn') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, unref } from 'vue';
|
||||
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
|
||||
import { appStore } from '/@/store/modules/app';
|
||||
import defaultSetting from '/@/settings/projectSetting';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingFooter',
|
||||
components: { CopyOutlined, RedoOutlined },
|
||||
setup() {
|
||||
const { getRootSetting } = useRootSetting();
|
||||
const { prefixCls } = useDesign('setting-footer');
|
||||
const { t } = useI18n();
|
||||
const { createSuccessModal, createMessage } = useMessage();
|
||||
|
||||
function handleCopy() {
|
||||
const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(getRootSetting), null, 2));
|
||||
unref(isSuccessRef) &&
|
||||
createSuccessModal({
|
||||
title: t('layout.setting.operatingTitle'),
|
||||
content: t('layout.setting.operatingContent'),
|
||||
});
|
||||
}
|
||||
function handleResetSetting() {
|
||||
try {
|
||||
appStore.commitProjectConfigState(defaultSetting);
|
||||
const { colorWeak, grayMode } = defaultSetting;
|
||||
// updateTheme(themeColor);
|
||||
updateColorWeak(colorWeak);
|
||||
updateGrayMode(grayMode);
|
||||
createMessage.success(t('layout.setting.resetSuccess'));
|
||||
} catch (error) {
|
||||
createMessage.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClearAndRedo() {
|
||||
localStorage.clear();
|
||||
appStore.resumeAllState();
|
||||
location.reload();
|
||||
}
|
||||
return {
|
||||
prefixCls,
|
||||
t,
|
||||
handleCopy,
|
||||
handleResetSetting,
|
||||
handleClearAndRedo,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-footer';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
68
src/layouts/default/setting/components/SwitchItem.vue
Normal file
68
src/layouts/default/setting/components/SwitchItem.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<span> {{ title }}</span>
|
||||
<Switch
|
||||
v-bind="getBindValue"
|
||||
@change="handleChange"
|
||||
:disabled="disabled"
|
||||
:checkedChildren="t('layout.setting.on')"
|
||||
:unCheckedChildren="t('layout.setting.off')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, computed } from 'vue';
|
||||
|
||||
import { Switch } from 'ant-design-vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { baseHandler } from '../handler';
|
||||
import { HandlerEnum } from '../enum';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SwitchItem',
|
||||
components: { Switch },
|
||||
props: {
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>,
|
||||
default: () => {},
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
def: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('setting-switch-item');
|
||||
const { t } = useI18n();
|
||||
|
||||
const getBindValue = computed(() => {
|
||||
return props.def ? { checked: props.def } : {};
|
||||
});
|
||||
function handleChange(e: ChangeEvent) {
|
||||
props.event && baseHandler(props.event, e);
|
||||
}
|
||||
return {
|
||||
prefixCls,
|
||||
t,
|
||||
handleChange,
|
||||
getBindValue,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-switch-item';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
}
|
||||
</style>
|
||||
90
src/layouts/default/setting/components/ThemePicker.vue
Normal file
90
src/layouts/default/setting/components/ThemePicker.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<template v-for="color in colorList || []" :key="color">
|
||||
<span
|
||||
@click="handleClick(color)"
|
||||
:class="[
|
||||
`${prefixCls}__item`,
|
||||
{
|
||||
[`${prefixCls}__item--active`]: def === color,
|
||||
},
|
||||
]"
|
||||
:style="{ background: color }"
|
||||
>
|
||||
<CheckOutlined />
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
import { CheckOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { baseHandler } from '../handler';
|
||||
import { HandlerEnum } from '../enum';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ThemePicker',
|
||||
components: { CheckOutlined },
|
||||
props: {
|
||||
colorList: {
|
||||
type: Array as PropType<string[]>,
|
||||
defualt: [],
|
||||
},
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>,
|
||||
default: () => {},
|
||||
},
|
||||
def: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('setting-theme-picker');
|
||||
|
||||
function handleClick(color: string) {
|
||||
props.event && baseHandler(props.event, color);
|
||||
}
|
||||
return {
|
||||
prefixCls,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import (reference) '../../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-theme-picker';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 16px 0;
|
||||
justify-content: space-around;
|
||||
|
||||
&__item {
|
||||
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 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
src/layouts/default/setting/components/TypePicker.vue
Normal file
98
src/layouts/default/setting/components/TypePicker.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<template v-for="item in menuTypeList || []" :key="item.title">
|
||||
<Tooltip :title="item.title" placement="bottom">
|
||||
<div
|
||||
@click="handler(item)"
|
||||
:class="[
|
||||
`${prefixCls}__item`,
|
||||
{
|
||||
[`${prefixCls}__item--active`]: def === item.type,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<img :src="item.src" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { menuTypeList } from '../enum';
|
||||
export default defineComponent({
|
||||
name: 'MenuTypePicker',
|
||||
components: { Tooltip },
|
||||
props: {
|
||||
menuTypeList: {
|
||||
type: Array as PropType<typeof menuTypeList>,
|
||||
defualt: [],
|
||||
},
|
||||
handler: {
|
||||
type: Function as PropType<Fn>,
|
||||
default: () => {},
|
||||
},
|
||||
def: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('setting-menu-type-picker');
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-menu-type-picker';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
margin: 0 20px 20px 0;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&--active {
|
||||
&::after {
|
||||
top: -8px;
|
||||
left: -4px;
|
||||
width: 80px;
|
||||
height: 64px;
|
||||
border: 2px solid @primary-color;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
src/layouts/default/setting/components/index.ts
Normal file
8
src/layouts/default/setting/components/index.ts
Normal file
@ -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'));
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div @click="openDrawer" class="setting-button">
|
||||
<div @click="openDrawer" :class="prefixCls">
|
||||
<SettingOutlined />
|
||||
<SettingDrawer @register="register" />
|
||||
</div>
|
||||
@ -10,13 +10,17 @@
|
||||
import SettingDrawer from './SettingDrawer';
|
||||
|
||||
import { useDrawer } from '/@/components/Drawer';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingBtn',
|
||||
components: { SettingOutlined, SettingDrawer },
|
||||
setup() {
|
||||
const [register, { openDrawer }] = useDrawer();
|
||||
|
||||
const { prefixCls } = useDesign('setting-button');
|
||||
return {
|
||||
prefixCls,
|
||||
register,
|
||||
openDrawer,
|
||||
};
|
||||
@ -25,9 +29,9 @@
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import (reference) '../../../design/index.less';
|
||||
@import './index.less';
|
||||
@prefix-cls: ~'@{namespace}-setting-button';
|
||||
|
||||
.setting-button {
|
||||
.@{prefix-cls} {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user