7 changed files with 673 additions and 653 deletions
@ -0,0 +1,302 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
import { useClipboard, useCssVar } from '@vueuse/core' |
||||||
|
|
||||||
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
import { setCssVar, trim } from '@/utils' |
||||||
|
import { colorIsDark, hexToRGB, lighten } from '@/utils/color' |
||||||
|
import { useAppStore } from '@/store/modules/app' |
||||||
|
import { ThemeSwitch } from '@/layout/components/ThemeSwitch' |
||||||
|
import ColorRadioPicker from './components/ColorRadioPicker.vue' |
||||||
|
import InterfaceDisplay from './components/InterfaceDisplay.vue' |
||||||
|
import LayoutRadioPicker from './components/LayoutRadioPicker.vue' |
||||||
|
|
||||||
|
defineOptions({ name: 'Setting' }) |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
const appStore = useAppStore() |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
const prefixCls = getPrefixCls('setting') |
||||||
|
const layout = computed(() => appStore.getLayout) |
||||||
|
const drawer = ref(false) |
||||||
|
|
||||||
|
// 主题色相关 |
||||||
|
const systemTheme = ref(appStore.getTheme.elColorPrimary) |
||||||
|
|
||||||
|
const setSystemTheme = (color: string) => { |
||||||
|
setCssVar('--el-color-primary', color) |
||||||
|
appStore.setTheme({ elColorPrimary: color }) |
||||||
|
const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement) |
||||||
|
setMenuTheme(trim(unref(leftMenuBgColor))) |
||||||
|
} |
||||||
|
|
||||||
|
// 头部主题相关 |
||||||
|
const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '') |
||||||
|
|
||||||
|
const setHeaderTheme = (color: string) => { |
||||||
|
const isDarkColor = colorIsDark(color) |
||||||
|
const textColor = isDarkColor ? '#fff' : 'inherit' |
||||||
|
const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6' |
||||||
|
const topToolBorderColor = isDarkColor ? color : '#eee' |
||||||
|
setCssVar('--top-header-bg-color', color) |
||||||
|
setCssVar('--top-header-text-color', textColor) |
||||||
|
setCssVar('--top-header-hover-color', textHoverColor) |
||||||
|
appStore.setTheme({ |
||||||
|
topHeaderBgColor: color, |
||||||
|
topHeaderTextColor: textColor, |
||||||
|
topHeaderHoverColor: textHoverColor, |
||||||
|
topToolBorderColor |
||||||
|
}) |
||||||
|
if (unref(layout) === 'top') { |
||||||
|
setMenuTheme(color) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 菜单主题相关 |
||||||
|
const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '') |
||||||
|
|
||||||
|
const setMenuTheme = (color: string) => { |
||||||
|
const primaryColor = useCssVar('--el-color-primary', document.documentElement) |
||||||
|
const isDarkColor = colorIsDark(color) |
||||||
|
const theme: Recordable = { |
||||||
|
// 左侧菜单边框颜色 |
||||||
|
leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee', |
||||||
|
// 左侧菜单背景颜色 |
||||||
|
leftMenuBgColor: color, |
||||||
|
// 左侧菜单浅色背景颜色 |
||||||
|
leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color, |
||||||
|
// 左侧菜单选中背景颜色 |
||||||
|
leftMenuBgActiveColor: isDarkColor |
||||||
|
? 'var(--el-color-primary)' |
||||||
|
: hexToRGB(unref(primaryColor), 0.1), |
||||||
|
// 左侧菜单收起选中背景颜色 |
||||||
|
leftMenuCollapseBgActiveColor: isDarkColor |
||||||
|
? 'var(--el-color-primary)' |
||||||
|
: hexToRGB(unref(primaryColor), 0.1), |
||||||
|
// 左侧菜单字体颜色 |
||||||
|
leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333', |
||||||
|
// 左侧菜单选中字体颜色 |
||||||
|
leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)', |
||||||
|
// logo字体颜色 |
||||||
|
logoTitleTextColor: isDarkColor ? '#fff' : 'inherit', |
||||||
|
// logo边框颜色 |
||||||
|
logoBorderColor: isDarkColor ? color : '#eee' |
||||||
|
} |
||||||
|
appStore.setTheme(theme) |
||||||
|
appStore.setCssVarTheme() |
||||||
|
} |
||||||
|
if (layout.value === 'top' && !appStore.getIsDark) { |
||||||
|
headerTheme.value = '#fff' |
||||||
|
setHeaderTheme('#fff') |
||||||
|
} |
||||||
|
|
||||||
|
// 监听layout变化，重置一些主题色 |
||||||
|
watch( |
||||||
|
() => layout.value, |
||||||
|
(n) => { |
||||||
|
if (n === 'top' && !appStore.getIsDark) { |
||||||
|
headerTheme.value = '#fff' |
||||||
|
setHeaderTheme('#fff') |
||||||
|
} else { |
||||||
|
setMenuTheme(unref(menuTheme)) |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 拷贝 |
||||||
|
const copyConfig = async () => { |
||||||
|
const { copy, copied, isSupported } = useClipboard({ |
||||||
|
source: ` |
||||||
|
// 面包屑 |
||||||
|
breadcrumb: ${appStore.getBreadcrumb}, |
||||||
|
// 面包屑图标 |
||||||
|
breadcrumbIcon: ${appStore.getBreadcrumbIcon}, |
||||||
|
// 折叠图标 |
||||||
|
hamburger: ${appStore.getHamburger}, |
||||||
|
// 全屏图标 |
||||||
|
screenfull: ${appStore.getScreenfull}, |
||||||
|
// 尺寸图标 |
||||||
|
size: ${appStore.getSize}, |
||||||
|
// 多语言图标 |
||||||
|
locale: ${appStore.getLocale}, |
||||||
|
// 消息图标 |
||||||
|
message: ${appStore.getMessage}, |
||||||
|
// 标签页 |
||||||
|
tagsView: ${appStore.getTagsView}, |
||||||
|
// 标签页 |
||||||
|
tagsViewImmerse: ${appStore.getTagsViewImmerse}, |
||||||
|
// 标签页图标 |
||||||
|
tagsViewIcon: ${appStore.getTagsViewIcon}, |
||||||
|
// logo |
||||||
|
logo: ${appStore.getLogo}, |
||||||
|
// 菜单手风琴 |
||||||
|
uniqueOpened: ${appStore.getUniqueOpened}, |
||||||
|
// 固定header |
||||||
|
fixedHeader: ${appStore.getFixedHeader}, |
||||||
|
// 页脚 |
||||||
|
footer: ${appStore.getFooter}, |
||||||
|
// 灰色模式 |
||||||
|
greyMode: ${appStore.getGreyMode}, |
||||||
|
// layout布局 |
||||||
|
layout: '${appStore.getLayout}', |
||||||
|
// 暗黑模式 |
||||||
|
isDark: ${appStore.getIsDark}, |
||||||
|
// 组件尺寸 |
||||||
|
currentSize: '${appStore.getCurrentSize}', |
||||||
|
// 主题相关 |
||||||
|
theme: { |
||||||
|
// 主题色 |
||||||
|
elColorPrimary: '${appStore.getTheme.elColorPrimary}', |
||||||
|
// 左侧菜单边框颜色 |
||||||
|
leftMenuBorderColor: '${appStore.getTheme.leftMenuBorderColor}', |
||||||
|
// 左侧菜单背景颜色 |
||||||
|
leftMenuBgColor: '${appStore.getTheme.leftMenuBgColor}', |
||||||
|
// 左侧菜单浅色背景颜色 |
||||||
|
leftMenuBgLightColor: '${appStore.getTheme.leftMenuBgLightColor}', |
||||||
|
// 左侧菜单选中背景颜色 |
||||||
|
leftMenuBgActiveColor: '${appStore.getTheme.leftMenuBgActiveColor}', |
||||||
|
// 左侧菜单收起选中背景颜色 |
||||||
|
leftMenuCollapseBgActiveColor: '${appStore.getTheme.leftMenuCollapseBgActiveColor}', |
||||||
|
// 左侧菜单字体颜色 |
||||||
|
leftMenuTextColor: '${appStore.getTheme.leftMenuTextColor}', |
||||||
|
// 左侧菜单选中字体颜色 |
||||||
|
leftMenuTextActiveColor: '${appStore.getTheme.leftMenuTextActiveColor}', |
||||||
|
// logo字体颜色 |
||||||
|
logoTitleTextColor: '${appStore.getTheme.logoTitleTextColor}', |
||||||
|
// logo边框颜色 |
||||||
|
logoBorderColor: '${appStore.getTheme.logoBorderColor}', |
||||||
|
// 头部背景颜色 |
||||||
|
topHeaderBgColor: '${appStore.getTheme.topHeaderBgColor}', |
||||||
|
// 头部字体颜色 |
||||||
|
topHeaderTextColor: '${appStore.getTheme.topHeaderTextColor}', |
||||||
|
// 头部悬停颜色 |
||||||
|
topHeaderHoverColor: '${appStore.getTheme.topHeaderHoverColor}', |
||||||
|
// 头部边框颜色 |
||||||
|
topToolBorderColor: '${appStore.getTheme.topToolBorderColor}' |
||||||
|
} |
||||||
|
` |
||||||
|
}) |
||||||
|
if (!isSupported) { |
||||||
|
ElMessage.error(t('setting.copyFailed')) |
||||||
|
} else { |
||||||
|
await copy() |
||||||
|
if (unref(copied)) { |
||||||
|
ElMessage.success(t('setting.copySuccess')) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 清空缓存 |
||||||
|
const clear = () => { |
||||||
|
const { wsCache } = useCache() |
||||||
|
wsCache.delete(CACHE_KEY.LAYOUT) |
||||||
|
wsCache.delete(CACHE_KEY.THEME) |
||||||
|
wsCache.delete(CACHE_KEY.IS_DARK) |
||||||
|
window.location.reload() |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
:class="prefixCls" |
||||||
|
class="fixed right-0 top-[45%] h-40px w-40px cursor-pointer bg-[var(--el-color-primary)] text-center leading-40px" |
||||||
|
@click="drawer = true" |
||||||
|
> |
||||||
|
<Icon color="#fff" icon="ep:setting" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px"> |
||||||
|
<template #header> |
||||||
|
<span class="text-16px font-700">{{ t('setting.projectSetting') }}</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<div class="text-center"> |
||||||
|
<!-- 主题 --> |
||||||
|
<ElDivider>{{ t('setting.theme') }}</ElDivider> |
||||||
|
<ThemeSwitch /> |
||||||
|
|
||||||
|
<!-- 布局 --> |
||||||
|
<ElDivider>{{ t('setting.layout') }}</ElDivider> |
||||||
|
<LayoutRadioPicker /> |
||||||
|
|
||||||
|
<!-- 系统主题 --> |
||||||
|
<ElDivider>{{ t('setting.systemTheme') }}</ElDivider> |
||||||
|
<ColorRadioPicker |
||||||
|
v-model="systemTheme" |
||||||
|
:schema="[ |
||||||
|
'#409eff', |
||||||
|
'#009688', |
||||||
|
'#536dfe', |
||||||
|
'#ff5c93', |
||||||
|
'#ee4f12', |
||||||
|
'#0096c7', |
||||||
|
'#9c27b0', |
||||||
|
'#ff9800' |
||||||
|
]" |
||||||
|
@change="setSystemTheme" |
||||||
|
/> |
||||||
|
|
||||||
|
<!-- 头部主题 --> |
||||||
|
<ElDivider>{{ t('setting.headerTheme') }}</ElDivider> |
||||||
|
<ColorRadioPicker |
||||||
|
v-model="headerTheme" |
||||||
|
:schema="[ |
||||||
|
'#fff', |
||||||
|
'#151515', |
||||||
|
'#5172dc', |
||||||
|
'#e74c3c', |
||||||
|
'#24292e', |
||||||
|
'#394664', |
||||||
|
'#009688', |
||||||
|
'#383f45' |
||||||
|
]" |
||||||
|
@change="setHeaderTheme" |
||||||
|
/> |
||||||
|
|
||||||
|
<!-- 菜单主题 --> |
||||||
|
<template v-if="layout !== 'top'"> |
||||||
|
<ElDivider>{{ t('setting.menuTheme') }}</ElDivider> |
||||||
|
<ColorRadioPicker |
||||||
|
v-model="menuTheme" |
||||||
|
:schema="[ |
||||||
|
'#fff', |
||||||
|
'#001529', |
||||||
|
'#212121', |
||||||
|
'#273352', |
||||||
|
'#191b24', |
||||||
|
'#383f45', |
||||||
|
'#001628', |
||||||
|
'#344058' |
||||||
|
]" |
||||||
|
@change="setMenuTheme" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 界面显示 --> |
||||||
|
<ElDivider>{{ t('setting.interfaceDisplay') }}</ElDivider> |
||||||
|
<InterfaceDisplay /> |
||||||
|
|
||||||
|
<ElDivider /> |
||||||
|
<div> |
||||||
|
<ElButton class="w-full" type="primary" @click="copyConfig">{{ t('setting.copy') }}</ElButton> |
||||||
|
</div> |
||||||
|
<div class="mt-5px"> |
||||||
|
<ElButton class="w-full" type="danger" @click="clear"> |
||||||
|
{{ t('setting.clearAndReset') }} |
||||||
|
</ElButton> |
||||||
|
</div> |
||||||
|
</ElDrawer> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$prefix-cls: #{$namespace}-setting; |
||||||
|
|
||||||
|
.#{$prefix-cls} { |
||||||
|
border-radius: 6px 0 0 6px; |
||||||
|
z-index: 1200;/*修正没有z-index会被表格层覆盖,值不要超过4000*/ |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue