feat(layouts): ✨ [App] 设置添加色弱模式、灰色模式

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", 

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>

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>

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>

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>

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;
 }

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 };
+};

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>

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;

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>

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;

src/locales/zh-ch/modules/layout.ts

@@ -1,7 +1,10 @@
 const layout = {
   setup: '设置',
   layoutSettings: '布局设置',
-  ThemeSettings: '主题设置',
+  themeSettings: '主题设置',
+  customTheme: '自定义主题',
+  greyMode: '灰色模式',
+  colorWeaknessMode: '色弱模式',
 };
 
 export default layout;

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<

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);

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