From 6c4790898292b7121ceb597512359d1ae5a8023f Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Tue, 2 Jan 2024 16:11:01 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BA=AE=E7=99=BD?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=85=8D=E8=89=B2=EF=BC=8C=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E6=9A=97=E8=89=B2=E4=B8=BB=E9=A2=98=E5=90=8E=E5=86=8D=E5=88=87?= =?UTF-8?q?=E5=9B=9E=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98=E6=97=B6=EF=BC=8C?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=81=A2=E5=A4=8D=E4=B9=8B=E5=89=8D=E7=9A=84?= =?UTF-8?q?=E4=BA=AE=E7=99=BD=E4=B8=BB=E9=A2=98=E9=85=8D=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/setting/index.vue | 3 ++- src/layout/hooks/useDataThemeChange.ts | 17 +++++++++++++---- src/layout/hooks/useLayout.ts | 5 +++-- src/layout/index.vue | 3 ++- src/utils/responsive.ts | 6 ++++-- types/global.d.ts | 9 ++------- types/router.d.ts | 3 ++- 7 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 7288cea901..aed1c56814 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -194,7 +194,8 @@ function setLayoutModel(layout: string) { theme: layoutTheme.value.theme, darkMode: $storage.layout?.darkMode, sidebarStatus: $storage.layout?.sidebarStatus, - epThemeColor: $storage.layout?.epThemeColor + epThemeColor: $storage.layout?.epThemeColor, + themeColor: layoutTheme.value.theme }; useAppStoreHook().setLayout(layout); } diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts index cd6999685f..a06e72b23e 100644 --- a/src/layout/hooks/useDataThemeChange.ts +++ b/src/layout/hooks/useDataThemeChange.ts @@ -48,17 +48,23 @@ export function useDataThemeChange() { } /** 设置导航主题色 */ - function setLayoutThemeColor(theme = getConfig().Theme ?? "default") { + function setLayoutThemeColor( + theme = getConfig().Theme ?? "light", + isClick = true + ) { layoutTheme.value.theme = theme; toggleTheme({ scopeName: `layout-theme-${theme}` }); + // 如果非isClick，保留之前的themeColor + const storageThemeColor = $storage.layout.themeColor; $storage.layout = { layout: layout.value, theme, darkMode: dataTheme.value, sidebarStatus: $storage.layout?.sidebarStatus, - epThemeColor: $storage.layout?.epThemeColor + epThemeColor: $storage.layout?.epThemeColor, + themeColor: isClick ? theme : storageThemeColor }; if (theme === "default" || theme === "light") { @@ -91,14 +97,17 @@ export function useDataThemeChange() { /** 亮色、暗色整体风格切换 */ function dataThemeChange() { if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) { - setLayoutThemeColor("default"); + setLayoutThemeColor("default", false); } else { - setLayoutThemeColor(useEpThemeStoreHook().epTheme); + setLayoutThemeColor(useEpThemeStoreHook().epTheme, false); } if (dataTheme.value) { document.documentElement.classList.add("dark"); } else { + if ($storage.layout.themeColor === "light") { + setLayoutThemeColor("light", false); + } document.documentElement.classList.remove("dark"); } } diff --git a/src/layout/hooks/useLayout.ts b/src/layout/hooks/useLayout.ts index b022cafcf9..5e4fb32e3d 100644 --- a/src/layout/hooks/useLayout.ts +++ b/src/layout/hooks/useLayout.ts @@ -24,10 +24,11 @@ export function useLayout() { if (!$storage.layout) { $storage.layout = { layout: $config?.Layout ?? "vertical", - theme: $config?.Theme ?? "default", + theme: $config?.Theme ?? "light", darkMode: $config?.DarkMode ?? false, sidebarStatus: $config?.SidebarStatus ?? true, - epThemeColor: $config?.EpThemeColor ?? "#409EFF" + epThemeColor: $config?.EpThemeColor ?? "#409EFF", + themeColor: $config?.Theme ?? "light" }; } /** 灰色模式、色弱模式、隐藏标签页 */ diff --git a/src/layout/index.vue b/src/layout/index.vue index e5d8b1de0c..b18f4fe191 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -68,7 +68,8 @@ function setTheme(layoutModel: string) { theme: $storage.layout?.theme, darkMode: $storage.layout?.darkMode, sidebarStatus: $storage.layout?.sidebarStatus, - epThemeColor: $storage.layout?.epThemeColor + epThemeColor: $storage.layout?.epThemeColor, + themeColor: $storage.layout?.themeColor }; } diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts index 37c9f2b684..b5e77986ea 100644 --- a/src/utils/responsive.ts +++ b/src/utils/responsive.ts @@ -15,11 +15,13 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => { // layout模式以及主题 layout: Storage.getData("layout", nameSpace) ?? { layout: config.Layout ?? "vertical", - theme: config.Theme ?? "default", + theme: config.Theme ?? "light", darkMode: config.DarkMode ?? false, sidebarStatus: config.SidebarStatus ?? true, - epThemeColor: config.EpThemeColor ?? "#409EFF" + epThemeColor: config.EpThemeColor ?? "#409EFF", + themeColor: config.Theme ?? "light" // 主题色（对应项目配置中的主题色，与theme不同的是它不会受到亮色、暗色整体风格切换的影响，只会在手动点击主题色时改变） }, + // 项目配置-界面显示 configure: Storage.getData("configure", nameSpace) ?? { grey: config.Grey ?? false, weak: config.Weak ?? false, diff --git a/types/global.d.ts b/types/global.d.ts index b9c4c243bd..bdc8e0e6ec 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -1,11 +1,4 @@ -import type { - VNode, - FunctionalComponent, - PropType as VuePropType, - ComponentPublicInstance -} from "vue"; import type { ECharts } from "echarts"; -import type { IconifyIcon } from "@iconify/vue"; import type { TableColumns } from "@pureadmin/table"; /** @@ -129,6 +122,7 @@ declare global { hideFooter?: boolean; sidebarStatus?: boolean; epThemeColor?: string; + themeColor?: string; showLogo?: boolean; showModel?: string; mapConfigure?: { @@ -155,6 +149,7 @@ declare global { darkMode?: boolean; sidebarStatus?: boolean; epThemeColor?: string; + themeColor?: string; }; configure: { grey?: boolean; diff --git a/types/router.d.ts b/types/router.d.ts index 6f6880a8be..1287e0d48e 100644 --- a/types/router.d.ts +++ b/types/router.d.ts @@ -1,6 +1,7 @@ // 全局路由类型声明 -import { type RouteComponent, type RouteLocationNormalized } from "vue-router"; +import type { RouteComponent, RouteLocationNormalized } from "vue-router"; +import type { FunctionalComponent } from "vue"; declare global { interface ToRouteType extends RouteLocationNormalized {