twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +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 { useNav } from "@/layout/hooks/useNav";
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 { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
@ -88,17 +88,15 @@ function storageConfigureChange<T>(key: string, val: T): 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);
};
/** 色弱模式设置 */
const weekChange = (value): void => {
toggleClass(
settings.weakVal,
"html-weakness",
document.querySelector("html")
);
const htmlEl = document.querySelector("html");
toggleClass(settings.weakVal, "html-weakness", htmlEl);
storageConfigureChange("weak", value);
};
@ -266,9 +264,9 @@ onBeforeMount(() => {
nextTick(() => {
watchSystemThemeChange();
settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey");
document.querySelector("html")?.classList.add("html-grey");
settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness");
document.querySelector("html")?.classList.add("html-weakness");
settings.tabsVal && tagsChange();
settings.hideFooter && hideFooterChange();
});

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

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