Skip to content

B
basic-vue-admin
提交 ed41e508 作者: vben
操作

perf(setting-drawer): perf setting-drawer

上级 0362ab26
正在显示 包含 801 行增加 和 563 行删除
build/vite/plugin/html.ts 0 → 100644
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;
}
build/vite/plugin/index.ts
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;
}
build/vite/plugin/mock.ts 0 → 100644
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;
}
build/vite/plugin/pwa.ts 0 → 100644
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;
}
src/components/Menu/src/BasicMenu.tsx
......@@ -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',
};
}
......
src/hooks/web/useI18n.ts
......@@ -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>));
},
};
}
......
src/layouts/default/setting/SettingDrawer.tsx
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,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,
}),
<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),
}),
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),
})}
<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
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)}
/>
{renderSwitchItem(t('layout.setting.switchAnimation'), {
handler: (e) => {
baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
},
def: unref(getEnableTransition),
})}
<SwitchItem
title={t('layout.setting.grayMode')}
event={HandlerEnum.GRAY_MODE}
def={unref(getGrayMode)}
/>
{renderSelectItem(t('layout.setting.animationType'), {
handler: (e) => {
baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
},
def: unref(getBasicTransition),
options: routerTransitionOptions,
disabled: !unref(getEnableTransition),
})}
<SwitchItem
title={t('layout.setting.colorWeak')}
event={HandlerEnum.COLOR_WEAK}
def={unref(getColorWeak)}
/>
</>
);
}
function renderSelectItem(text: string, config?: SelectConfig) {
const { handler, def, disabled = false, options } = config || {};
const opt = def ? { value: def, defaultValue: def } : {};
function renderTransition() {
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}
<>
<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)}
/>
</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')}
<SwitchItem
title={t('layout.setting.switchAnimation')}
event={HandlerEnum.OPEN_ROUTE_TRANSITION}
def={unref(getEnableTransition)}
/>
</div>
<SelectItem
title={t('layout.setting.animationType')}
event={HandlerEnum.ROUTER_TRANSITION}
def={unref(getBasicTransition)}
options={routerTransitionOptions}
disabled={!unref(getEnableTransition)}
/>
</>
);
}
......@@ -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 />
</>
),
}}
......
src/layouts/default/setting/components/InputNumberItem.vue 0 → 100644
<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>
src/layouts/default/setting/components/SelectItem.vue 0 → 100644
<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>
src/layouts/default/setting/components/SettingFooter.vue 0 → 100644
<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>
src/layouts/default/setting/components/SwitchItem.vue 0 → 100644
<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>
src/layouts/default/setting/components/ThemePicker.vue 0 → 100644
<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>
src/layouts/default/setting/components/TypePicker.vue 0 → 100644
<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>
src/layouts/default/setting/components/index.ts 0 → 100644
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'));
src/layouts/default/setting/index.less deleted 100644 → 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;
}
}
}
src/layouts/default/setting/index.vue
<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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论