twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 16:37:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: 修复项目配置中开启灰色模式和深色整体风格，刷新页面整体风格异常

Browse Source
This commit is contained in:
xiaoxian521 2024-03-06 00:46:07 +08:00
parent 45a359017e
commit 5c4fd951bc
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/layout/components/setting/index.vue
View File

@ -13,7 +13,7 @@ import panel from "../panel/index.vue";
import { emitter } from "@/utils/mitt"; import { emitter } from "@/utils/mitt";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import { useAppStoreHook } from "@/store/modules/app"; import { useAppStoreHook } from "@/store/modules/app";
import { useDark, debounce, useGlobal } from "@pureadmin/utils"; import { useDark, useGlobal, debounce } from "@pureadmin/utils";
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils"; import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import Segmented, { type OptionsType } from "@/components/ReSegmented"; import Segmented, { type OptionsType } from "@/components/ReSegmented";
@ -88,17 +88,15 @@ function storageConfigureChange<T>(key: string, val: T): void {
/** 灰色模式设置 */ /** 灰色模式设置 */
const greyChange = (value): void => { const greyChange = (value): void => {
toggleClass(settings.greyVal, "html-grey", document.querySelector("html")); const htmlEl = document.querySelector("html");
toggleClass(settings.greyVal, "html-grey", htmlEl);
storageConfigureChange("grey", value); storageConfigureChange("grey", value);
}; };
/** 色弱模式设置 */ /** 色弱模式设置 */
const weekChange = (value): void => { const weekChange = (value): void => {
toggleClass( const htmlEl = document.querySelector("html");
settings.weakVal, toggleClass(settings.weakVal, "html-weakness", htmlEl);
"html-weakness",
document.querySelector("html")
);
storageConfigureChange("weak", value); storageConfigureChange("weak", value);
}; };
@ -266,9 +264,9 @@ onBeforeMount(() => {
nextTick(() => { nextTick(() => {
watchSystemThemeChange(); watchSystemThemeChange();
settings.greyVal && settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey"); document.querySelector("html")?.classList.add("html-grey");
settings.weakVal && settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness"); document.querySelector("html")?.classList.add("html-weakness");
settings.tabsVal && tagsChange(); settings.tabsVal && tagsChange();
settings.hideFooter && hideFooterChange(); settings.hideFooter && hideFooterChange();
}); });

2
src/layout/hooks/useDataThemeChange.ts
View File

@ -45,7 +45,7 @@ export function useDataThemeChange() {
const targetEl = target || document.body; const targetEl = target || document.body;
let { className } = targetEl; let { className } = targetEl;
className = className.replace(clsName, "").trim(); className = className.replace(clsName, "").trim();
targetEl.className = flag ? `${className} ${clsName} ` : className; targetEl.className = flag ? `${className} ${clsName}` : className;
} }
/** 设置导航主题色 */ /** 设置导航主题色 */