From 44b0f151a37b4d7d18ad11e911dcf388e03f9e7b Mon Sep 17 00:00:00 2001
From: SuperCuteXiaoSi <1531733886@qq.com>
Date: Tue, 25 Oct 2022 21:28:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(layouts):=20=E2=9C=A8=20[App]=20=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=B7=BB=E5=8A=A0=E8=89=B2=E5=BC=B1=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E3=80=81=E7=81=B0=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/serverConfig.json                      |  4 +-
 src/App.vue                                   |  8 ---
 src/components/Application/AppAccount.vue     |  2 +-
 src/components/Application/AppLocale.vue      |  2 +-
 src/components/Application/AppTheme.vue       | 26 ++++++--
 src/config/index.ts                           |  2 -
 src/hooks/useTransformTheme.ts                | 59 ++++++++++++++++++-
 .../pageLayouts/components/Navbart/index.vue  |  2 +-
 .../components/Seting/ThemeSettings/index.vue | 38 ++++++++----
 .../pageLayouts/components/Seting/index.vue   |  8 ++-
 src/locales/en/modules/layout.ts              |  5 +-
 src/locales/zh-ch/modules/layout.ts           |  5 +-
 src/store/types.ts                            |  2 +
 src/styles/index.scss                         |  9 +++
 src/utils/plugin/element.ts                   |  2 +
 src/utils/transformTheme.ts                   | 41 -------------
 16 files changed, 140 insertions(+), 75 deletions(-)
 delete mode 100644 src/utils/transformTheme.ts

diff --git a/public/serverConfig.json b/public/serverConfig.json
index 9cdb7d3e..b90b2563 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -2,9 +2,11 @@
   "title":"xiaosiAdmin",
   "collapseMenu": false,
   "sidebarMode": "vertical",
-  "themeMode": "day",
+  "themeMode": "dark",
   "locale": "zh-ch",
   "primaryColor": "#409eff",
+  "greyMode": false,
+  "colorWeaknessMode":false,
   "StorageConfig":{
     "type": "localStorage",
     "prefix": "xiaosiAdmin", 
diff --git a/src/App.vue b/src/App.vue
index f81dbbd1..15f05bc4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,7 @@
 <script setup lang="ts">
   import { ElConfigProvider } from 'element-plus';
-  import { useColorMode } from '@vueuse/core';
-  import { useAppStoreHook } from './store/modules/app';
   import { deffElementLocale } from '@/hooks/web/useI18n';
   const { tolocale } = deffElementLocale();
-
-  const appStore = useAppStoreHook();
-  const color = useColorMode();
-
-  console.log(color);
-  console.log(JSON.parse(JSON.stringify(appStore.appConfigMode)));
 </script>
 
 <template>
diff --git a/src/components/Application/AppAccount.vue b/src/components/Application/AppAccount.vue
index cc895eaa..347040ad 100644
--- a/src/components/Application/AppAccount.vue
+++ b/src/components/Application/AppAccount.vue
@@ -14,7 +14,7 @@
 </script>
 
 <template>
-  <div class="account">
+  <div class="account cursor">
     <el-dropdown trigger="click" @command="command">
       <img src="@/assets/login/logo.png" class="wave" />
       <template #dropdown>
diff --git a/src/components/Application/AppLocale.vue b/src/components/Application/AppLocale.vue
index 14a847de..072c122d 100644
--- a/src/components/Application/AppLocale.vue
+++ b/src/components/Application/AppLocale.vue
@@ -26,7 +26,7 @@
 <template>
   <el-dropdown trigger="click" @command="tolochos">
     <span>
-      <SvgIcon class="icon" name="locales"></SvgIcon>
+      <SvgIcon class="icon cursor" name="locales"></SvgIcon>
     </span>
     <template #dropdown>
       <el-dropdown-menu>
diff --git a/src/components/Application/AppTheme.vue b/src/components/Application/AppTheme.vue
index 7cc68407..4d82d714 100644
--- a/src/components/Application/AppTheme.vue
+++ b/src/components/Application/AppTheme.vue
@@ -1,22 +1,40 @@
 <script setup lang="ts">
   import { useColorMode } from '@vueuse/core';
+  import { watch } from 'vue';
   import SvgIcon from '../SvgIcon/index.vue';
   import { useAppStoreHook } from '@/store/modules/app';
-  import { updateColor } from '@/utils/transformTheme';
+  import { useTransformTheme } from '@/hooks/useTransformTheme';
 
   const appStore = useAppStoreHook();
   const color = useColorMode();
 
+  const { updateColor } = useTransformTheme();
+
   const toggleDarkMode = () => {
-    color.value = color.value === 'dark' ? 'light' : 'dark';
     appStore.appConfigMode.themeMode = color.value;
     appStore.setAppConfigMode(appStore.appConfigMode);
-    updateColor();
   };
+
+  watch(
+    color,
+    () => {
+      toggleDarkMode();
+      updateColor();
+    },
+    { immediate: true },
+  );
 </script>
 
 <template>
-  <div class="theme" :class="{ 'theme-dark': color === 'dark' }" @click="toggleDarkMode">
+  <div
+    class="theme cursor"
+    :class="{ 'theme-dark': color === 'dark' }"
+    @click="
+      () => {
+        color = color === 'dark' ? 'light' : 'dark';
+      }
+    "
+  >
     <div class="theme-inner"></div>
     <SvgIcon name="sun"></SvgIcon>
     <SvgIcon name="moon"></SvgIcon>
diff --git a/src/config/index.ts b/src/config/index.ts
index c6b4eb20..bd580865 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -2,7 +2,6 @@ import type { App } from 'vue';
 import { getConfigInfo } from '@/server/config';
 import type { AppConfig } from '@/store/types';
 import { setStorageConfig } from '@/utils/storage';
-import { updateColor } from '@/utils/transformTheme';
 
 let config: AppConfig = {} as AppConfig;
 
@@ -25,7 +24,6 @@ export async function getServerConfig(app: App): Promise<AppConfig> {
     }
   }
   setStorageConfig(config.StorageConfig);
-  updateColor();
   app.config.globalProperties.$config = getConfig();
   return config;
 }
diff --git a/src/hooks/useTransformTheme.ts b/src/hooks/useTransformTheme.ts
index c56bfe0b..a8e57b43 100644
--- a/src/hooks/useTransformTheme.ts
+++ b/src/hooks/useTransformTheme.ts
@@ -1 +1,58 @@
-export const useTransformTheme = () => {};
+import { useAppStoreHook } from '@/store/modules/app';
+
+export const useTransformTheme = () => {
+  const appStore = useAppStoreHook();
+
+  const body = document.documentElement as HTMLElement;
+
+  console.log(body.className);
+
+  // 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 } = appStore.appConfigMode;
+    if (!primaryColor) return;
+    const mixWhite = themeMode === 'dark' ? '#141414' : '#ffffff';
+    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));
+    }
+  }
+
+  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/Navbart/index.vue b/src/layouts/pageLayouts/components/Navbart/index.vue
index a5c03dd4..8c8da1de 100644
--- a/src/layouts/pageLayouts/components/Navbart/index.vue
+++ b/src/layouts/pageLayouts/components/Navbart/index.vue
@@ -48,7 +48,7 @@
       <AppTheme></AppTheme>
       <AppLocale class="icon"></AppLocale>
       <AppAccount></AppAccount>
-      <SvgIcon class="icon" name="iEL-setting" @click="drawer = true"></SvgIcon>
+      <SvgIcon class="icon cursor" name="iEL-setting" @click="drawer = true"></SvgIcon>
     </div>
 
     <Setting v-model:modelValue="drawer"></Setting>
diff --git a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
index b545fdbb..abb96c48 100644
--- a/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/ThemeSettings/index.vue
@@ -3,23 +3,38 @@
   import { ColorPicker } from 'vue3-colorpicker';
   import 'vue3-colorpicker/style.css';
   import { useAppStoreHook } from '@/store/modules/app';
-  import { updateColor } from '@/utils/transformTheme';
+  import { useTransformTheme } from '@/hooks/useTransformTheme';
   import SvgIcon from '@/components/SvgIcon/index.vue';
+  import type { AppConfig } from '@/store/types';
+
+  const { updateColor, themeHtmlClassName } = useTransformTheme();
 
   const appStore = useAppStoreHook();
 
-  const pureColor = ref(appStore.appConfigMode.primaryColor);
+  const { primaryColor, greyMode, colorWeaknessMode } = appStore.appConfigMode;
+
+  const pureColor = ref(primaryColor);
 
   const showPicker = ref<boolean>(false);
 
   const colorList = ['#722ed1', '#eb2f96', '#52c41a', '#13c2c2', '#fadb14', '#fa541c', '#f5222d'];
 
   watch([pureColor], () => {
-    console.log(pureColor.value);
     appStore.appConfigMode.primaryColor = pureColor.value;
     appStore.setAppConfigMode(appStore.appConfigMode);
     updateColor();
   });
+
+  const htmlGrey = ref<boolean>(greyMode || false);
+  const htmlWeakness = ref<boolean>(colorWeaknessMode || false);
+
+  const themeChange = (e: boolean, key: string) => {
+    themeHtmlClassName(key, e);
+    const appData = {} as AppConfig;
+    if (key === 'html-grey') appData['greyMode'] = e;
+    else appData['colorWeaknessMode'] = e;
+    appStore.setAppConfigMode(appData);
+  };
 </script>
 
 <template>
@@ -36,7 +51,7 @@
       </div>
     </div>
     <div class="options">
-      <span>自定义主题：</span>
+      <span>{{ $t('layout.customTheme') }}：</span>
       <div class="color-picker">
         <span
           class="cursor"
@@ -54,14 +69,14 @@
         </div>
       </div>
     </div>
-    <!-- <div class="options">
-      <span>自定义主题：</span>
-      <ColorPicker v-model:pureColor="pureColor" format="hex" />
+    <div class="options">
+      <span>灰色模式：</span>
+      <el-switch v-model="htmlGrey" @change="(e:boolean) => themeChange(e,'html-grey')" />
     </div>
     <div class="options">
-      <span>自定义主题：</span>
-      <ColorPicker v-model:pureColor="pureColor" format="hex" />
-    </div> -->
+      <span>色弱模式：</span>
+      <el-switch v-model="htmlWeakness" @change="(e:boolean) => themeChange(e,'html-weakness')" />
+    </div>
   </div>
 </template>
 
@@ -70,6 +85,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: 24px;
     .color-list-item {
       width: 20px;
       height: 20px;
@@ -85,7 +101,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 20px 0;
+    margin-bottom: 24px;
     .color-picker {
       position: relative;
       width: 50px;
diff --git a/src/layouts/pageLayouts/components/Seting/index.vue b/src/layouts/pageLayouts/components/Seting/index.vue
index 597cf215..03066e27 100644
--- a/src/layouts/pageLayouts/components/Seting/index.vue
+++ b/src/layouts/pageLayouts/components/Seting/index.vue
@@ -66,7 +66,7 @@
               placement="bottom"
             >
               <div
-                class="sidebar_mode"
+                class="sidebar_mode cursor"
                 :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === item.value }"
                 @click="handerShowElmenu(item.value)"
               >
@@ -76,7 +76,7 @@
             </el-tooltip>
           </div>
         </div>
-        <el-divider content-position="center">{{ $t('layout.ThemeSettings') }}</el-divider>
+        <el-divider content-position="center">{{ $t('layout.themeSettings') }}</el-divider>
         <div>
           <ThemeSettings></ThemeSettings>
         </div>
@@ -164,5 +164,9 @@
         }
       }
     }
+
+    :deep(.el-divider__text) {
+      text-align: center;
+    }
   }
 </style>
diff --git a/src/locales/en/modules/layout.ts b/src/locales/en/modules/layout.ts
index 1cf0f1ec..97bb88b3 100644
--- a/src/locales/en/modules/layout.ts
+++ b/src/locales/en/modules/layout.ts
@@ -1,7 +1,10 @@
 const layout = {
   setup: 'Set Up',
   layoutSettings: 'Layout Settings',
-  ThemeSettings: 'Theme Settings',
+  themeSettings: 'Theme Settings',
+  customTheme: 'Custom Theme',
+  greyMode: 'Grey Mode',
+  colorWeaknessMode: 'Color Weakness Mode',
 };
 
 export default layout;
diff --git a/src/locales/zh-ch/modules/layout.ts b/src/locales/zh-ch/modules/layout.ts
index 0efb9e04..a8851373 100644
--- a/src/locales/zh-ch/modules/layout.ts
+++ b/src/locales/zh-ch/modules/layout.ts
@@ -1,7 +1,10 @@
 const layout = {
   setup: '设置',
   layoutSettings: '布局设置',
-  ThemeSettings: '主题设置',
+  themeSettings: '主题设置',
+  customTheme: '自定义主题',
+  greyMode: '灰色模式',
+  colorWeaknessMode: '色弱模式',
 };
 
 export default layout;
diff --git a/src/store/types.ts b/src/store/types.ts
index 41b7fbee..bc34c275 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -17,6 +17,8 @@ export interface AppConfig {
   StorageConfig: StorageConfig;
   drawerSidebar?: boolean;
   primaryColor: string;
+  greyMode: boolean;
+  colorWeaknessMode: boolean;
 }
 
 export type MultiTabsType = Omit<
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 70c7da3b..d5fcf3fe 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -102,6 +102,15 @@ ul {
   }
 }
 
+// 灰色
+.html-grey {
+  filter: grayscale(100%);
+}
+// 色弱
+.html-weakness {
+  filter: invert(80%);
+}
+
 @for $i from 1 to 6 {
   * > .enter-x:nth-child(#{$i}) {
     transform: translateX(50px);
diff --git a/src/utils/plugin/element.ts b/src/utils/plugin/element.ts
index 945cb582..604cfec6 100644
--- a/src/utils/plugin/element.ts
+++ b/src/utils/plugin/element.ts
@@ -37,6 +37,7 @@ import {
   ElTabs,
   ElTabPane,
   ElDivider,
+  ElSwitch,
   // 指令
   ElLoading,
   ElInfiniteScroll,
@@ -99,6 +100,7 @@ const components = [
   ElTabs,
   ElTabPane,
   ElDivider,
+  ElSwitch,
 ];
 
 // Icon
diff --git a/src/utils/transformTheme.ts b/src/utils/transformTheme.ts
deleted file mode 100644
index 0fb19c81..00000000
--- a/src/utils/transformTheme.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// 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 计算
-const 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 const updateColor = () => {
-  const appConfigMode = localStorage.getItem('appConfigMode');
-  if (appConfigMode) {
-    const { primaryColor, themeMode } = JSON.parse(appConfigMode);
-    if (!primaryColor) return;
-    const body = document.documentElement as HTMLElement;
-    const mixWhite = themeMode === 'dark' ? '#141414' : '#ffffff';
-    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));
-    }
-  }
-};