Refactor/themes (#311)

* refactor: theme

src/layout/components/setting/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import {
-  reactive,
   ref,
   unref,
   watch,
+  reactive,
   computed,
   nextTick,
   useCssModule,
@@ -15,21 +15,30 @@ import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
+import { TinyColor } from "@ctrl/tinycolor";
 import { themeColorsType } from "../../types";
 import { routerArrays } from "/@/layout/types";
 import type { StorageConfigs } from "/#/index";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { shadeBgColor } from "../../theme/element-plus";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
-import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
-import { debounce, storageLocal, storageSession } from "@pureadmin/utils";
+import {
+  useDark,
+  debounce,
+  storageLocal,
+  storageSession
+} from "@pureadmin/utils";
+import {
+  darken,
+  lighten,
+  toggleTheme
+} from "@pureadmin/theme/dist/browser-utils";
 
 import dayIcon from "/@/assets/svg/day.svg?component";
 import darkIcon from "/@/assets/svg/dark.svg?component";
 
 const router = useRouter();
+const { isDark } = useDark();
 const { isSelect } = useCssModule();
 const body = document.documentElement as HTMLElement;
 const instance =
@@ -39,29 +48,29 @@ const instanceConfig =
   getCurrentInstance().appContext.app.config.globalProperties.$config;
 
 let themeColors = ref<Array<themeColorsType>>([
-  // 道奇蓝（默认）
+  /* 道奇蓝（默认） */
   { color: "#1b2a47", themeColor: "default" },
-  // 亮白色
+  /* 亮白色 */
   { color: "#ffffff", themeColor: "light" },
-  // 猩红色
+  /* 猩红色 */
   { color: "#f5222d", themeColor: "dusk" },
-  // 橙红色
+  /* 橙红色 */
   { color: "#fa541c", themeColor: "volcano" },
-  // 金色
+  /* 金色 */
   { color: "#fadb14", themeColor: "yellow" },
-  // 绿宝石
+  /* 绿宝石 */
   { color: "#13c2c2", themeColor: "mingQing" },
-  // 酸橙绿
+  /* 酸橙绿 */
   { color: "#52c41a", themeColor: "auroraGreen" },
-  // 深粉色
+  /* 深粉色 */
   { color: "#eb2f96", themeColor: "pink" },
-  // 深紫罗兰色
+  /* 深紫罗兰色 */
   { color: "#722ed1", themeColor: "saucePurple" }
 ]);
 
+const mixRef = templateRef<HTMLElement | null>("mixRef", null);
 const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
 const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
-const mixRef = templateRef<HTMLElement | null>("mixRef", null);
 
 let layoutTheme =
   ref(storageLocal.getItem<StorageConfigs>("responsive-layout")) ||
@@ -70,7 +79,7 @@ let layoutTheme =
     theme: instanceConfig?.Theme ?? "default"
   });
 
-// body添加layout属性，作用于src/style/sidebar.scss
+/* body添加layout属性，作用于src/style/sidebar.scss */
 if (unref(layoutTheme)) {
   let layout = unref(layoutTheme).layout;
   let theme = unref(layoutTheme).theme;
@@ -80,13 +89,11 @@ if (unref(layoutTheme)) {
   setLayoutModel(layout);
 }
 
-// 默认灵动模式
+/** 默认灵动模式 */
 const markValue = ref(instance.configure?.showModel ?? "smart");
 
 const logoVal = ref(instance.configure?.showLogo ?? true);
 
-const epThemeColor = ref(useEpThemeStoreHook().getEpThemeColor);
-
 const settings = reactive({
   greyVal: instance.configure.grey,
   weakVal: instance.configure.weak,
@@ -102,6 +109,13 @@ const getThemeColorStyle = computed(() => {
   };
 });
 
+/** 当网页为暗黑模式时不显示亮白色切换选项 */
+const showThemeColors = computed(() => {
+  return themeColor => {
+    return themeColor === "light" && isDark.value ? false : true;
+  };
+});
+
 function storageConfigureChange<T>(key: string, val: T): void {
   const storageConfigure = instance.configure;
   storageConfigure[key] = val;
@@ -115,13 +129,13 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
   targetEl.className = flag ? `${className} ${clsName} ` : className;
 }
 
-// 灰色模式设置
+/** 灰色模式设置 */
 const greyChange = (value): void => {
   toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
   storageConfigureChange("grey", value);
 };
 
-// 色弱模式设置
+/** 色弱模式设置 */
 const weekChange = (value): void => {
   toggleClass(
     settings.weakVal,
@@ -143,7 +157,7 @@ const multiTagsCacheChange = () => {
   useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
 };
 
-// 清空缓存并返回登录页
+/** 清空缓存并返回登录页 */
 function onReset() {
   router.push("/login");
   const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
@@ -162,7 +176,7 @@ function onChange(label) {
   emitter.emit("tagViewsShowModel", label);
 }
 
-// 侧边栏Logo
+/** 侧边栏Logo */
 function logoChange() {
   unref(logoVal)
     ? storageConfigureChange("showLogo", true)
@@ -177,7 +191,7 @@ function setFalse(Doms): any {
 }
 
 watch(instance, ({ layout }) => {
-  // 设置wangeditorV5主题色
+  /* 设置wangeditorV5主题色 */
   body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
   switch (layout["layout"]) {
     case "vertical":
@@ -198,7 +212,7 @@ watch(instance, ({ layout }) => {
   }
 });
 
-// 主题色 激活选择项
+/** 主题色 激活选择项 */
 const getThemeColor = computed(() => {
   return current => {
     if (
@@ -217,7 +231,7 @@ const getThemeColor = computed(() => {
   };
 });
 
-// 设置导航模式
+/** 设置导航模式 */
 function setLayoutModel(layout: string) {
   layoutTheme.value.layout = layout;
   window.document.body.setAttribute("layout", layout);
@@ -231,12 +245,8 @@ function setLayoutModel(layout: string) {
   useAppStoreHook().setLayout(layout);
 }
 
-// 存放夜间主题切换前的导航主题色
-let tempLayoutThemeColor;
-
-// 设置导航主题色
+/** 设置导航主题色 */
 function setLayoutThemeColor(theme: string) {
-  tempLayoutThemeColor = instance.layout.theme;
   layoutTheme.value.theme = theme;
   toggleTheme({
     scopeName: `layout-theme-${theme}`
@@ -257,43 +267,60 @@ function setLayoutThemeColor(theme: string) {
   }
 }
 
-// 设置ep主题色
+/**
+ * @description 自动计算hover和active颜色
+ * @see {@link https://element-plus.org/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2}
+ */
+const shadeBgColor = (color: string): string => {
+  return new TinyColor(color).shade(10).toString();
+};
+
+/** 设置ep主题色 */
 const setEpThemeColor = (color: string) => {
-  // @ts-expect-error
-  writeNewStyle(createNewStyle(color));
   useEpThemeStoreHook().setEpThemeColor(color);
   body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
+  document.documentElement.style.setProperty("--el-color-primary", color);
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(
+      `--el-color-primary-light-${i}`,
+      lighten(color, i / 10)
+    );
+  }
+  for (let i = 1; i <= 2; i++) {
+    document.documentElement.style.setProperty(
+      `--el-color-primary-dark-${i}`,
+      darken(color, i / 10)
+    );
+  }
 };
 
 let dataTheme = ref<boolean>(instance.layout.darkMode);
 
-// 日间、夜间主题切换
+/** 日间、夜间主题切换 */
 function dataThemeChange() {
-  if (dataTheme.value) {
-    body.setAttribute("data-theme", "dark");
-    setLayoutThemeColor("light");
+  /* 如果当前是light夜间主题，默认切换到default主题 */
+  if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
+    setLayoutThemeColor("default");
   } else {
-    body.setAttribute("data-theme", "");
-    tempLayoutThemeColor && setLayoutThemeColor(tempLayoutThemeColor);
-    instance.layout = {
-      layout: useAppStoreHook().layout,
-      theme: instance.layout.theme,
-      darkMode: dataTheme.value,
-      sidebarStatus: instance.layout.sidebarStatus,
-      epThemeColor: instance.layout.epThemeColor
-    };
+    setLayoutThemeColor(useEpThemeStoreHook().epTheme);
+  }
+
+  if (dataTheme.value) {
+    instance.layout.darkMode = true;
+    document.documentElement.classList.add("dark");
+  } else {
+    instance.layout.darkMode = false;
+    document.documentElement.classList.remove("dark");
   }
 }
 
-//初始化项目配置
+/* 初始化项目配置 */
 nextTick(() => {
   settings.greyVal &&
     document.querySelector("html")?.setAttribute("class", "html-grey");
   settings.weakVal &&
     document.querySelector("html")?.setAttribute("class", "html-weakness");
   settings.tabsVal && tagsChange();
-  // @ts-expect-error
-  writeNewStyle(createNewStyle(epThemeColor.value));
   dataThemeChange();
 });
 </script>
@@ -346,11 +373,12 @@ nextTick(() => {
       </el-tooltip>
     </ul>
 
-    <el-divider v-show="!dataTheme">主题色</el-divider>
-    <ul class="theme-color" v-show="!dataTheme">
+    <el-divider>主题色</el-divider>
+    <ul class="theme-color">
       <li
         v-for="(item, index) in themeColors"
         :key="index"
+        v-show="showThemeColors(item.themeColor)"
         :style="getThemeColorStyle(item.color)"
         @click="setLayoutThemeColor(item.themeColor)"
       >
@@ -366,7 +394,7 @@ nextTick(() => {
 
     <el-divider>界面显示</el-divider>
     <ul class="setting">
-      <li v-show="!dataTheme">
+      <li>
         <span>灰色模式</span>
         <el-switch
           v-model="settings.greyVal"
@@ -377,7 +405,7 @@ nextTick(() => {
           @change="greyChange"
         />
       </li>
-      <li v-show="!dataTheme">
+      <li>
         <span>色弱模式</span>
         <el-switch
           v-model="settings.weakVal"