From 59d4ed4dd9d6b6f0d5881b4d466e7a621770ad75 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Mon, 15 Jan 2024 09:46:41 +0800 Subject: [PATCH] fix: #399 --- src/components/Setting/src/Setting.vue | 47 +---------------------- src/store/modules/app.ts | 52 +++++++++++++++++++++++++- src/views/Login/Login.vue | 10 ++++- 3 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue index b9972f4..8bf2da6 100644 --- a/src/components/Setting/src/Setting.vue +++ b/src/components/Setting/src/Setting.vue @@ -3,7 +3,6 @@ import { ElDrawer, ElDivider, ElMessage } from 'element-plus' import { ref, unref, computed } from 'vue' import { useI18n } from '@/hooks/web/useI18n' import { ThemeSwitch } from '@/components/ThemeSwitch' -import { colorIsDark, lighten, hexToRGB } from '@/utils/color' import { useCssVar } from '@vueuse/core' import { useAppStore } from '@/store/modules/app' import { trim, setCssVar, getCssVar } from '@/utils' @@ -42,56 +41,14 @@ const setSystemTheme = (color: string) => { 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) - } + appStore.setHeaderTheme(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() + appStore.setMenuTheme(color) } // 监听layout变化，重置一些主题色 diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 4126dcf..0179646 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -1,8 +1,10 @@ import { defineStore } from 'pinia' import { store } from '../index' import { setCssVar, humpToUnderline } from '@/utils' -import { mix } from '@/utils/color' +import { colorIsDark, hexToRGB, lighten, mix } from '@/utils/color' import { ElMessage, ComponentSize } from 'element-plus' +import { useCssVar } from '@vueuse/core' +import { unref } from 'vue' interface AppState { breadcrumb: boolean @@ -270,6 +272,54 @@ export const useAppStore = defineStore('app', { }) setCssVar(`--el-color-primary-dark-2`, mix(color, elColorPrimary, 0.2)) } + }, + 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' + } + this.setTheme(theme) + this.setCssVarTheme() + }, + 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) + this.setTheme({ + topHeaderBgColor: color, + topHeaderTextColor: textColor, + topHeaderHoverColor: textHoverColor, + topToolBorderColor + }) + if (this.getLayout === 'top') { + this.setMenuTheme(color) + } } }, persist: true diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 9a23cb5..d022b1c 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -3,7 +3,7 @@ import { LoginForm, RegisterForm } from './components' import { ThemeSwitch } from '@/components/ThemeSwitch' import { LocaleDropdown } from '@/components/LocaleDropdown' import { useI18n } from '@/hooks/web/useI18n' -import { underlineToHump } from '@/utils' +import { getCssVar, underlineToHump } from '@/utils' import { useAppStore } from '@/store/modules/app' import { useDesign } from '@/hooks/web/useDesign' import { ref } from 'vue' @@ -26,6 +26,12 @@ const toRegister = () => { const toLogin = () => { isLogin.value = true } + +const themeChange = () => { + const color = getCssVar('--el-bg-color') + appStore.setMenuTheme(color) + appStore.setHeaderTheme(color) +}