shasteel-ui.git

houzhongjian

2024-10-09 314507f8ddadd9c66e98d260c3b2a5dad1a04015

提交 \| 用户 \| 时间
314507	1	<script lang="ts" setup>
H	2	import { ElMessage } from 'element-plus'
	3	import { useClipboard, useCssVar } from '@vueuse/core'
	4
	5	import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
	6	import { useDesign } from '@/hooks/web/useDesign'
	7
	8	import { setCssVar, trim } from '@/utils'
	9	import { colorIsDark, hexToRGB, lighten } from '@/utils/color'
	10	import { useAppStore } from '@/store/modules/app'
	11	import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
	12	import ColorRadioPicker from './components/ColorRadioPicker.vue'
	13	import InterfaceDisplay from './components/InterfaceDisplay.vue'
	14	import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
	15
	16	defineOptions({ name: 'Setting' })
	17
	18	const { t } = useI18n()
	19	const appStore = useAppStore()
	20
	21	const { getPrefixCls } = useDesign()
	22	const prefixCls = getPrefixCls('setting')
	23	const layout = computed(() => appStore.getLayout)
	24	const drawer = ref(false)
	25
	26	// 主题色相关
	27	const systemTheme = ref(appStore.getTheme.elColorPrimary)
	28
	29	const setSystemTheme = (color: string) => {
	30	setCssVar('--el-color-primary', color)
	31	appStore.setTheme({ elColorPrimary: color })
	32	const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement)
	33	setMenuTheme(trim(unref(leftMenuBgColor)))
	34	}
	35
	36	// 头部主题相关
	37	const headerTheme = ref(appStore.getTheme.topHeaderBgColor \|\| '')
	38
	39	const setHeaderTheme = (color: string) => {
	40	const isDarkColor = colorIsDark(color)
	41	const textColor = isDarkColor ? '#fff' : 'inherit'
	42	const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
	43	const topToolBorderColor = isDarkColor ? color : '#eee'
	44	setCssVar('--top-header-bg-color', color)
	45	setCssVar('--top-header-text-color', textColor)
	46	setCssVar('--top-header-hover-color', textHoverColor)
	47	appStore.setTheme({
	48	topHeaderBgColor: color,
	49	topHeaderTextColor: textColor,
	50	topHeaderHoverColor: textHoverColor,
	51	topToolBorderColor
	52	})
	53	if (unref(layout) === 'top') {
	54	setMenuTheme(color)
	55	}
	56	}
	57
	58	// 菜单主题相关
	59	const menuTheme = ref(appStore.getTheme.leftMenuBgColor \|\| '')
	60
	61	const setMenuTheme = (color: string) => {
	62	const primaryColor = useCssVar('--el-color-primary', document.documentElement)
	63	const isDarkColor = colorIsDark(color)
	64	const theme: Recordable = {
	65	// 左侧菜单边框颜色
	66	leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
	67	// 左侧菜单背景颜色
	68	leftMenuBgColor: color,
	69	// 左侧菜单浅色背景颜色
	70	leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
	71	// 左侧菜单选中背景颜色
	72	leftMenuBgActiveColor: isDarkColor
	73	? 'var(--el-color-primary)'
	74	: hexToRGB(unref(primaryColor), 0.1),
	75	// 左侧菜单收起选中背景颜色
	76	leftMenuCollapseBgActiveColor: isDarkColor
	77	? 'var(--el-color-primary)'
	78	: hexToRGB(unref(primaryColor), 0.1),
	79	// 左侧菜单字体颜色
	80	leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
	81	// 左侧菜单选中字体颜色
	82	leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
	83	// logo字体颜色
	84	logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
	85	// logo边框颜色
	86	logoBorderColor: isDarkColor ? color : '#eee'
	87	}
	88	appStore.setTheme(theme)
	89	appStore.setCssVarTheme()
	90	}
	91	if (layout.value === 'top' && !appStore.getIsDark) {
	92	headerTheme.value = '#fff'
	93	setHeaderTheme('#fff')
	94	}
	95
	96	// 监听layout变化，重置一些主题色
	97	watch(
	98	() => layout.value,
	99	(n) => {
	100	if (n === 'top' && !appStore.getIsDark) {
	101	headerTheme.value = '#fff'
	102	setHeaderTheme('#fff')
	103	} else {
	104	setMenuTheme(unref(menuTheme))
	105	}
	106	}
	107	)
	108
	109	// 拷贝
	110	const copyConfig = async () => {
	111	const { copy, copied, isSupported } = useClipboard({
	112	source: `
	113	// 面包屑
	114	breadcrumb: ${appStore.getBreadcrumb},
	115	// 面包屑图标
	116	breadcrumbIcon: ${appStore.getBreadcrumbIcon},
	117	// 折叠图标
	118	hamburger: ${appStore.getHamburger},
	119	// 全屏图标
	120	screenfull: ${appStore.getScreenfull},
	121	// 尺寸图标
	122	size: ${appStore.getSize},
	123	// 多语言图标
	124	locale: ${appStore.getLocale},
	125	// 消息图标
	126	message: ${appStore.getMessage},
	127	// 标签页
	128	tagsView: ${appStore.getTagsView},
	129	// 标签页图标
	130	getTagsViewIcon: ${appStore.getTagsViewIcon},
	131	// logo
	132	logo: ${appStore.getLogo},
	133	// 菜单手风琴
	134	uniqueOpened: ${appStore.getUniqueOpened},
	135	// 固定header
	136	fixedHeader: ${appStore.getFixedHeader},
	137	// 页脚
	138	footer: ${appStore.getFooter},
	139	// 灰色模式
	140	greyMode: ${appStore.getGreyMode},
	141	// layout布局
	142	layout: '${appStore.getLayout}',
	143	// 暗黑模式
	144	isDark: ${appStore.getIsDark},
	145	// 组件尺寸
	146	currentSize: '${appStore.getCurrentSize}',
	147	// 主题相关
	148	theme: {
	149	// 主题色
	150	elColorPrimary: '${appStore.getTheme.elColorPrimary}',
	151	// 左侧菜单边框颜色
	152	leftMenuBorderColor: '${appStore.getTheme.leftMenuBorderColor}',
	153	// 左侧菜单背景颜色
	154	leftMenuBgColor: '${appStore.getTheme.leftMenuBgColor}',
	155	// 左侧菜单浅色背景颜色
	156	leftMenuBgLightColor: '${appStore.getTheme.leftMenuBgLightColor}',
	157	// 左侧菜单选中背景颜色
	158	leftMenuBgActiveColor: '${appStore.getTheme.leftMenuBgActiveColor}',
	159	// 左侧菜单收起选中背景颜色
	160	leftMenuCollapseBgActiveColor: '${appStore.getTheme.leftMenuCollapseBgActiveColor}',
	161	// 左侧菜单字体颜色
	162	leftMenuTextColor: '${appStore.getTheme.leftMenuTextColor}',
	163	// 左侧菜单选中字体颜色
	164	leftMenuTextActiveColor: '${appStore.getTheme.leftMenuTextActiveColor}',
	165	// logo字体颜色
	166	logoTitleTextColor: '${appStore.getTheme.logoTitleTextColor}',
	167	// logo边框颜色
	168	logoBorderColor: '${appStore.getTheme.logoBorderColor}',
	169	// 头部背景颜色
	170	topHeaderBgColor: '${appStore.getTheme.topHeaderBgColor}',
	171	// 头部字体颜色
	172	topHeaderTextColor: '${appStore.getTheme.topHeaderTextColor}',
	173	// 头部悬停颜色
	174	topHeaderHoverColor: '${appStore.getTheme.topHeaderHoverColor}',
	175	// 头部边框颜色
	176	topToolBorderColor: '${appStore.getTheme.topToolBorderColor}'
	177	}
	178	`
	179	})
	180	if (!isSupported) {
	181	ElMessage.error(t('setting.copyFailed'))
	182	} else {
	183	await copy()
	184	if (unref(copied)) {
	185	ElMessage.success(t('setting.copySuccess'))
	186	}
	187	}
	188	}
	189
	190	// 清空缓存
	191	const clear = () => {
	192	const { wsCache } = useCache()
	193	wsCache.delete(CACHE_KEY.LAYOUT)
	194	wsCache.delete(CACHE_KEY.THEME)
	195	wsCache.delete(CACHE_KEY.IS_DARK)
	196	window.location.reload()
	197	}
	198	</script>
	199
	200	<template>
	201	<div
	202	:class="prefixCls"
	203	class="fixed right-0 top-[45%] h-40px w-40px cursor-pointer bg-[var(--el-color-primary)] text-center leading-40px"
	204	@click="drawer = true"
	205	>
	206	<Icon color="#fff" icon="ep:setting" />
	207	</div>
	208
	209	<ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px">
	210	<template #header>
	211	<span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
	212	</template>
	213
	214	<div class="text-center">
	215	<!-- 主题 -->
	216	<ElDivider>{{ t('setting.theme') }}</ElDivider>
	217	<ThemeSwitch />
	218
	219	<!-- 布局 -->
	220	<ElDivider>{{ t('setting.layout') }}</ElDivider>
	221	<LayoutRadioPicker />
	222
	223	<!-- 系统主题 -->
	224	<ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
	225	<ColorRadioPicker
	226	v-model="systemTheme"
	227	:schema="[
	228	'#409eff',
	229	'#009688',
	230	'#536dfe',
	231	'#ff5c93',
	232	'#ee4f12',
	233	'#0096c7',
	234	'#9c27b0',
	235	'#ff9800'
	236	]"
	237	@change="setSystemTheme"
	238	/>
	239
	240	<!-- 头部主题 -->
	241	<ElDivider>{{ t('setting.headerTheme') }}</ElDivider>
	242	<ColorRadioPicker
	243	v-model="headerTheme"
	244	:schema="[
	245	'#fff',
	246	'#151515',
	247	'#5172dc',
	248	'#e74c3c',
	249	'#24292e',
	250	'#394664',
	251	'#009688',
	252	'#383f45'
	253	]"
	254	@change="setHeaderTheme"
	255	/>
	256
	257	<!-- 菜单主题 -->
	258	<template v-if="layout !== 'top'">
	259	<ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
	260	<ColorRadioPicker
	261	v-model="menuTheme"
	262	:schema="[
	263	'#fff',
	264	'#001529',
	265	'#212121',
	266	'#273352',
	267	'#191b24',
	268	'#383f45',
	269	'#001628',
	270	'#344058'
	271	]"
	272	@change="setMenuTheme"
	273	/>
	274	</template>
	275	</div>
	276
	277	<!-- 界面显示 -->
	278	<ElDivider>{{ t('setting.interfaceDisplay') }}</ElDivider>
	279	<InterfaceDisplay />
	280
	281	<ElDivider />
	282	<div>
	283	<ElButton class="w-full" type="primary" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
	284	</div>
	285	<div class="mt-5px">
	286	<ElButton class="w-full" type="danger" @click="clear">
	287	{{ t('setting.clearAndReset') }}
	288	</ElButton>
	289	</div>
	290	</ElDrawer>
	291	</template>
	292
	293	<style lang="scss" scoped>
	294	$prefix-cls: #{$namespace}-setting;
	295
	296	.#{$prefix-cls} {
	297	border-radius: 6px 0 0 6px;
	298	}
	299	</style>