From 6b28aa21702934ae76dbc1eb6045315b8d1b44ec Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 22 Dec 2021 10:12:52 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=89=88=E5=88=86=E6=94=AF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/serverConfig.json                |  1 +
 src/layout/components/setting/index.vue | 58 ++++++++++++++++++++++-----------
 src/layout/index.vue                    |  6 ++--
 src/layout/theme/element-plus.ts        | 12 ++++---
 src/utils/storage/responsive.ts         |  3 +-
 types/global.d.ts                       |  1 +
 6 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/public/serverConfig.json b/public/serverConfig.json
index 2462e96..ad1279a 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -8,6 +8,7 @@
   "Locale": "zh",
   "Layout": "vertical",
   "Theme": "default",
+  "DarkMode": false,
   "Grey": false,
   "Weak": false,
   "HideTabs": false,
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index ee20f45..8c43984 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -145,23 +145,14 @@ const multiTagsCacheChange = () => {
   useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
 };
 
-//初始化项目配置
-nextTick(() => {
-  settings.greyVal &&
-    document.querySelector("html")?.setAttribute("class", "html-grey");
-  settings.weakVal &&
-    document.querySelector("html")?.setAttribute("class", "html-weakness");
-  settings.tabsVal && tagsChange();
-
-  writeNewStyle(createNewStyle(epThemeColor.value));
-});
-
 // 清空缓存并返回登录页
 function onReset() {
-  storageLocal.clear();
-  storageSession.clear();
-  toggleClass(false, "html-grey", document.querySelector("html"));
-  toggleClass(false, "html-weakness", document.querySelector("html"));
+  toggleClass(getConfig().Grey, "html-grey", document.querySelector("html"));
+  toggleClass(
+    getConfig().Weak,
+    "html-weakness",
+    document.querySelector("html")
+  );
   useMultiTagsStoreHook().handleTags("equal", [
     {
       path: "/welcome",
@@ -176,6 +167,8 @@ function onReset() {
   ]);
   useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache);
   useEpThemeStoreHook().setEpThemeColor("#409EFF");
+  storageLocal.clear();
+  storageSession.clear();
   router.push("/login");
 }
 
@@ -234,7 +227,11 @@ const getThemeColor = computed(() => {
 function setLayoutModel(layout: string) {
   layoutTheme.value.layout = layout;
   window.document.body.setAttribute("layout", layout);
-  instance.layout = { layout, theme: layoutTheme.value.theme };
+  instance.layout = {
+    layout,
+    theme: layoutTheme.value.theme,
+    darkMode: instance.layout.darkMode
+  };
   useAppStoreHook().setLayout(layout);
 }
 
@@ -244,7 +241,11 @@ function setLayoutThemeColor(theme: string) {
   toggleTheme({
     scopeName: `layout-theme-${theme}`
   });
-  instance.layout = { layout: useAppStoreHook().layout, theme };
+  instance.layout = {
+    layout: useAppStoreHook().layout,
+    theme,
+    darkMode: dataTheme.value
+  };
 
   if (theme === "default" || theme === "light") {
     setEpThemeColor("#409EFF");
@@ -261,7 +262,7 @@ const setEpThemeColor = (color: string) => {
   useEpThemeStoreHook().setEpThemeColor(color);
 };
 
-let dataTheme = ref<boolean>(false);
+let dataTheme = ref<boolean>(instance.layout.darkMode);
 
 // 日间、夜间主题切换
 function dataThemeChange() {
@@ -269,8 +270,27 @@ function dataThemeChange() {
   if (dataTheme.value) {
     body.setAttribute("data-theme", "dark");
     setLayoutThemeColor("light");
-  } else body.setAttribute("data-theme", "");
+  } else {
+    body.setAttribute("data-theme", "");
+    instance.layout = {
+      layout: useAppStoreHook().layout,
+      theme: instance.layout.theme,
+      darkMode: dataTheme.value
+    };
+  }
 }
+
+//初始化项目配置
+nextTick(() => {
+  settings.greyVal &&
+    document.querySelector("html")?.setAttribute("class", "html-grey");
+  settings.weakVal &&
+    document.querySelector("html")?.setAttribute("class", "html-weakness");
+  settings.tabsVal && tagsChange();
+
+  writeNewStyle(createNewStyle(epThemeColor.value));
+  dataThemeChange();
+});
 </script>
 
 <template>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7944e5f..98de564 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -51,7 +51,8 @@ const layout = computed(() => {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     instance.$storage.layout = {
       layout: instance.$config?.Layout ?? "vertical",
-      theme: instance.$config?.Theme ?? "default"
+      theme: instance.$config?.Theme ?? "default",
+      darkMode: instance.$config?.DarkMode ?? false
     };
   }
   // 灰色模式、色弱模式、隐藏标签页
@@ -98,7 +99,8 @@ function setTheme(layoutModel: string) {
   window.document.body.setAttribute("layout", layoutModel);
   instance.$storage.layout = {
     layout: `${layoutModel}`,
-    theme: instance.$storage.layout?.theme
+    theme: instance.$storage.layout?.theme,
+    darkMode: instance.$storage.layout?.darkMode
   };
 }
 
diff --git a/src/layout/theme/element-plus.ts b/src/layout/theme/element-plus.ts
index 0f9823a..d48733a 100644
--- a/src/layout/theme/element-plus.ts
+++ b/src/layout/theme/element-plus.ts
@@ -3,6 +3,7 @@ import rgbHex from "rgb-hex";
 import color from "css-color-function";
 import epCss from "element-plus/dist/index.css";
 
+// 色值表
 const formula = {
   "shade-1": "color(primary shade(10%))",
   "light-1": "color(primary tint(10%))",
@@ -16,15 +17,20 @@ const formula = {
   "light-9": "color(primary tint(90%))"
 };
 
+// 把生成的样式表写入到style中
 export const writeNewStyle = (newStyle: string): void => {
   const style = window.document.createElement("style");
   style.innerText = newStyle;
   window.document.head.appendChild(style);
 };
 
+// 根据主题色，生成最新的样式表
 export const createNewStyle = (primaryStyle: string): string => {
+  // 根据主色生成色值表
   const colors = createColors(primaryStyle);
-  let cssText = getOriginStyle();
+  // 在当前ep的默认样式表中标记需要替换的色值
+  let cssText = getStyleTemplate(epCss);
+  // 遍历生成的色值表，在 默认样式表 进行全局替换
   Object.keys(colors).forEach(key => {
     cssText = cssText.replace(
       new RegExp("(:|\\s+)" + key, "g"),
@@ -46,10 +52,6 @@ export const createColors = (primary: string) => {
   return colors;
 };
 
-export const getOriginStyle = () => {
-  return getStyleTemplate(epCss);
-};
-
 const getStyleTemplate = (data: string): string => {
   const colorMap = {
     "#3a8ee6": "shade-1",
diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts
index e1e2fd4..46d272e 100644
--- a/src/utils/storage/responsive.ts
+++ b/src/utils/storage/responsive.ts
@@ -17,7 +17,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
         type: Object,
         default: Storage.getData(undefined, "layout") ?? {
           layout: config.Layout ?? "vertical",
-          theme: config.Theme ?? "default"
+          theme: config.Theme ?? "default",
+          darkMode: config.DarkMode ?? false
         }
       },
       sets: {
diff --git a/types/global.d.ts b/types/global.d.ts
index 3b5fb1a..90396fb 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -82,6 +82,7 @@ declare global {
     Locale?: string;
     Layout?: string;
     Theme?: string;
+    DarkMode?: boolean;
     Grey?: boolean;
     Weak?: boolean;
     HideTabs?: boolean;