From 168d3e625b591ed87b9e7aab70bdff7ce8caea73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=96=AF=EF=BC=88xiaosi=EF=BC=89?=
 <1531733886@qq.com>
Date: Sat, 24 Dec 2022 22:42:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(locales):=20=F0=9F=90=9B=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B7=E6=96=B0=20=E7=81=B0=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20=E8=89=B2=E5=BC=B1=E6=A8=A1=E5=BC=8F=E4=B8=8D?=
 =?UTF-8?q?=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |  4 --
 src/components/Application/AppTheme.vue       | 21 +++---
 src/config/index.ts                           |  2 +
 src/hooks/useTransformTheme.ts                | 66 ------------------
 .../components/Seting/ThemeSettings/index.vue |  6 +-
 .../pageLayouts/components/Seting/index.vue   |  1 -
 .../components/SideNavigationBar/index.vue    |  2 +-
 src/store/types.ts                            |  4 +-
 src/utils/theme/transformTheme.ts             | 69 +++++++++++++++++++
 9 files changed, 84 insertions(+), 91 deletions(-)
 delete mode 100644 src/hooks/useTransformTheme.ts
 create mode 100644 src/utils/theme/transformTheme.ts

diff --git a/index.html b/index.html
index 8ff0a55b..6ea386a8 100644
--- a/index.html
+++ b/index.html
@@ -172,10 +172,6 @@
         if (primaryColor) {
           const loading = document.getElementById('html_loding');
           loading.style.color = primaryColor;
-          const style = document.getElementById('admin-style-root-color');
-          style.innerHTML = `html:root{ --el-color-primary: ${primaryColor};\n}`;
-          // const body = document.documentElement;
-          // body.style.setProperty('--el-color-primary', primaryColor);
         }
       }
     </script>
diff --git a/src/components/Application/AppTheme.vue b/src/components/Application/AppTheme.vue
index fd8f3a24..6276b76f 100644
--- a/src/components/Application/AppTheme.vue
+++ b/src/components/Application/AppTheme.vue
@@ -2,27 +2,22 @@
   import { useColorMode } from '@vueuse/core';
   import { watch } from 'vue';
   import SvgIcon from '../SvgIcon/index.vue';
-  import { useTransformTheme } from '@/hooks/useTransformTheme';
   import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import type { AppConfig } from '@/store/types';
+  import { updateColor } from '@/utils/theme/transformTheme';
 
   const color = useColorMode();
 
-  const { setAppConfigMode } = useRootSetting();
-
-  const { updateColor } = useTransformTheme();
+  const { appConfig, setAppConfigMode } = useRootSetting();
 
   const toggleDarkMode = () => {
-    setAppConfigMode({ themeMode: color.value });
+    setAppConfigMode({ themeMode: color.value as AppConfig['themeMode'] });
   };
 
-  watch(
-    color,
-    () => {
-      toggleDarkMode();
-      updateColor();
-    },
-    { immediate: true },
-  );
+  watch(color, () => {
+    toggleDarkMode();
+    updateColor(appConfig.value.primaryColor, color.value as AppConfig['themeMode']);
+  });
 </script>
 
 <template>
diff --git a/src/config/index.ts b/src/config/index.ts
index 11d62cf0..2ca25546 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { getConfigInfo } from '@/server/config';
 import type { AppConfig } from '@/store/types';
 import { setStorageConfig } from '@/utils/storage';
+import { configTheme } from '@/utils/theme/transformTheme';
 
 let config: AppConfig = {} as AppConfig;
 
@@ -23,6 +24,7 @@ export async function getServerConfig(app: App): Promise<AppConfig> {
       throw `\npublic文件夹下无法查找到serverConfig配置文件\nUnable to find serverconfig configuration file under public folder`;
     }
   }
+  configTheme(config);
   setStorageConfig({ ...config.StorageConfig, prefix: config.title });
   app.config.globalProperties.$config = getConfig();
   return config;
diff --git a/src/hooks/useTransformTheme.ts b/src/hooks/useTransformTheme.ts
deleted file mode 100644
index 70077678..00000000
--- a/src/hooks/useTransformTheme.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useRootSetting } from './setting/useRootSetting';
-
-export function useTransformTheme() {
-  const { appConfig } = useRootSetting();
-
-  const body = document.documentElement as HTMLElement;
-
-  // hex转rgb
-  function hexToRgb(str: string) {
-    const hxs: string[] = str.replace('#', '').match(/../g) || [];
-    const newHxs: number[] = [];
-    for (let i = 0; i < 3; i++) newHxs[i] = parseInt(hxs[i], 16);
-    return newHxs;
-  }
-
-  // rgb转hex
-  function rgbToHex(a: number, b: number, c: number) {
-    const hexs = [a.toString(16), b.toString(16), c.toString(16)];
-    for (let i = 0; i < 3; i++) {
-      if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
-    }
-    return `#${hexs.join('')}`;
-  }
-
-  // 参考element style 计算
-  function mix(color1: string, color2: string, weight: number) {
-    weight = Math.max(Math.min(Number(weight), 1), 0);
-    const mainColor = hexToRgb(color1);
-    const mixColor = hexToRgb(color2);
-    const hex = [];
-    for (let i = 0; i < mainColor.length; i++)
-      hex[i] = Math.round(mainColor[i] * (1 - weight) + mixColor[i] * weight);
-    return rgbToHex(hex[0], hex[1], hex[2]);
-  }
-
-  function updateColor() {
-    const { primaryColor, themeMode } = appConfig.value;
-    if (!primaryColor) return;
-
-    const style = document.getElementById('admin-style-root-color');
-
-    const mixColor = themeMode === 'dark' ? '#141414' : '#ffffff';
-    let innerHTML = `html${
-      themeMode === 'dark' ? '.dark' : ''
-    }:root{ --el-color-primary: ${primaryColor};\n`;
-
-    // body.style.setProperty('--el-color-primary', primaryColor);
-    for (let i = 1; i <= 9; i++) {
-      // body.style.setProperty(`--el-color-primary-light-${i}`, mix(primaryColor, mixWhite, i * 0.1));
-      innerHTML += `--el-color-primary-light-${i}: ${mix(primaryColor, mixColor, i * 0.1)};\n`;
-    }
-
-    if (style) style.innerHTML = innerHTML + '}';
-  }
-
-  function themeHtmlClassName(className: string, isShow: boolean) {
-    if (isShow) {
-      body.className = `${body.className} ${className}`;
-    } else {
-      const exp = new RegExp(` ${className}`, 'g');
-      body.className = body.className.replace(exp, '');
-    }
-  }
-
-  return { updateColor, themeHtmlClassName };
-}
diff --git a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
index 1f106cbd..ebd3378e 100644
--- a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
-  import { useTransformTheme } from '@/hooks/useTransformTheme';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import type { AppConfig } from '@/store/types';
   import { useRootSetting } from '@/hooks/setting/useRootSetting';
-
-  const { updateColor, themeHtmlClassName } = useTransformTheme();
+  import { themeHtmlClassName, updateColor } from '@/utils/theme/transformTheme';
 
   const { appConfig, setAppConfigMode } = useRootSetting();
 
@@ -17,7 +15,7 @@
 
   watch([pureColor], () => {
     setAppConfigMode({ primaryColor: pureColor.value });
-    updateColor();
+    updateColor(pureColor.value, appConfig.value.themeMode);
   });
 
   const htmlGrey = ref<boolean>(greyMode || false);
diff --git a/src/layouts/pageLayouts/components/Seting/index.vue b/src/layouts/pageLayouts/components/Seting/index.vue
index 5ad71924..b8b9420d 100644
--- a/src/layouts/pageLayouts/components/Seting/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/index.vue
@@ -56,7 +56,6 @@
   <div class="setting">
     <el-drawer
       v-model="drawer"
-      custom-class="setting-drawer"
       :title="$t('layout.setup')"
       :size="320"
       @close="emit('update:modelValue', false)"
diff --git a/src/layouts/pageLayouts/components/SideNavigationBar/index.vue b/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
index 82d82adf..23309bc9 100644
--- a/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
+++ b/src/layouts/pageLayouts/components/SideNavigationBar/index.vue
@@ -53,7 +53,7 @@
     v-if="isPhoneScreen"
     v-model="drawer"
     :with-header="false"
-    custom-class="drawer-sidebar"
+    class="drawer-sidebar"
     direction="ltr"
     :before-close="handleClose"
   >
diff --git a/src/store/types.ts b/src/store/types.ts
index 898aec55..8cb551a3 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -15,8 +15,8 @@ export interface AppConfig {
   collapseMenu: boolean;
   // 菜单显示模式： 'vertical'：左侧模式 | 'horizontal'：顶部模式 | 'blend'：混合模式
   sidebarMode: SidebarMode;
-  // 主题模式：夜间主题、白天主题
-  themeMode: string;
+  // 主题模式：白天主题、夜间主题
+  themeMode: 'light' | 'dark';
   // 国际化
   locale: string;
   // storage配置
diff --git a/src/utils/theme/transformTheme.ts b/src/utils/theme/transformTheme.ts
new file mode 100644
index 00000000..de5e852e
--- /dev/null
+++ b/src/utils/theme/transformTheme.ts
@@ -0,0 +1,69 @@
+import type { AppConfig } from '@/store/types';
+
+const body = document.documentElement as HTMLElement;
+
+// hex转rgb
+function hexToRgb(str: string) {
+  const hxs: string[] = str.replace('#', '').match(/../g) || [];
+  const newHxs: number[] = [];
+  for (let i = 0; i < 3; i++) newHxs[i] = parseInt(hxs[i], 16);
+  return newHxs;
+}
+
+// rgb转hex
+function rgbToHex(a: number, b: number, c: number) {
+  const hexs = [a.toString(16), b.toString(16), c.toString(16)];
+  for (let i = 0; i < 3; i++) {
+    if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+  }
+  return `#${hexs.join('')}`;
+}
+
+// 参考element style 计算
+function mix(color1: string, color2: string, weight: number) {
+  weight = Math.max(Math.min(Number(weight), 1), 0);
+  const mainColor = hexToRgb(color1);
+  const mixColor = hexToRgb(color2);
+  const hex = [];
+  for (let i = 0; i < mainColor.length; i++)
+    hex[i] = Math.round(mainColor[i] * (1 - weight) + mixColor[i] * weight);
+  return rgbToHex(hex[0], hex[1], hex[2]);
+}
+
+export function updateColor(primaryColor: string, themeMode: 'light' | 'dark') {
+  if (!primaryColor) return;
+
+  const style = document.getElementById('admin-style-root-color');
+
+  const mixColor = themeMode === 'dark' ? '#141414' : '#ffffff';
+  let innerHTML = `html${
+    themeMode === 'dark' ? '.dark' : ''
+  }:root{ --el-color-primary: ${primaryColor};\n`;
+
+  // body.style.setProperty('--el-color-primary', primaryColor);
+  for (let i = 1; i <= 9; i++) {
+    // body.style.setProperty(`--el-color-primary-light-${i}`, mix(primaryColor, mixWhite, i * 0.1));
+    innerHTML += `--el-color-primary-light-${i}: ${mix(primaryColor, mixColor, i * 0.1)};\n`;
+  }
+
+  if (style) style.innerHTML = innerHTML + '}';
+}
+
+export function themeHtmlClassName(className: string, isShow: boolean) {
+  if (isShow) {
+    body.classList.add(className);
+  } else {
+    body.classList.remove(className);
+  }
+}
+
+export function configTheme(appConfig: AppConfig) {
+  if (!appConfig) return;
+  const { primaryColor, themeMode, colorWeaknessMode, greyMode } = appConfig;
+
+  updateColor(primaryColor, themeMode);
+  if (greyMode || colorWeaknessMode) {
+    if (greyMode) themeHtmlClassName('html-grey', greyMode);
+    else if (colorWeaknessMode) themeHtmlClassName('html-weakness', colorWeaknessMode);
+  }
+}