release: update 3.4.5

src/layout/theme/element-plus.ts

@@ -1,84 +0,0 @@
-/* 动态改变element-plus主题色 */
-import rgbHex from "rgb-hex";
-import epCss from "./element.scss";
-import { TinyColor } from "@ctrl/tinycolor";
-import { convert } from "css-color-function";
-
-// 色值表
-const formula = {
-  "shade-1": "color(primary shade(10%))",
-  "light-1": "color(primary tint(10%))",
-  "light-2": "color(primary tint(20%))",
-  "light-3": "color(primary tint(30%))",
-  "light-4": "color(primary tint(40%))",
-  "light-5": "color(primary tint(50%))",
-  "light-6": "color(primary tint(60%))",
-  "light-7": "color(primary tint(70%))",
-  "light-8": "color(primary tint(80%))",
-  "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: Record<string, any>
-): Record<string, any> => {
-  // 根据主色生成色值表
-  const colors = createColors(primaryStyle);
-  // 在当前ep的默认样式表中标记需要替换的色值
-  let cssText = getStyleTemplate(epCss);
-  // 遍历生成的色值表，在 默认样式表 进行全局替换
-  Object.keys(colors).forEach(key => {
-    cssText = cssText.replace(
-      new RegExp("(:|\\s+)" + key, "g"),
-      "$1" + colors[key]
-    );
-  });
-  return cssText;
-};
-
-export const createColors = (
-  primary: Record<string, any>
-): Record<string, any> => {
-  if (!primary) return;
-  const colors = {
-    primary
-  };
-  Object.keys(formula).forEach(key => {
-    const value = formula[key].replace(/primary/, primary);
-    colors[key] = "#" + rgbHex(convert(value));
-  });
-  return colors;
-};
-
-const getStyleTemplate = (data: Record<string, any>): Record<string, any> => {
-  const colorMap = {
-    "#3a8ee6": "shade-1",
-    "#409eff": "primary",
-    "#53a8ff": "light-1",
-    "#66b1ff": "light-2",
-    "#79bbff": "light-3",
-    "#8cc5ff": "light-4",
-    "#a0cfff": "light-5",
-    "#b3d8ff": "light-6",
-    "#c6e2ff": "light-7",
-    "#d9ecff": "light-8",
-    "#ecf5ff": "light-9"
-  };
-  Object.keys(colorMap).forEach(key => {
-    const value = colorMap[key];
-    data = data.replace(new RegExp(key, "ig"), value);
-  });
-  return data;
-};
-
-// 自动计算hover和active颜色 https://element-plus.gitee.io/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2-%E6%B5%8B%E8%AF%95%E7%89%88
-export const shadeBgColor = (color: string): string => {
-  return new TinyColor(color).shade(10).toString();
-};

src/layout/theme/element.scss

@@ -1,2 +0,0 @@
-/* 通过scss模块本地导入element-plus的全局样式文件，解决vite2.7.13版本后使用 import epCss from "element-plus/dist/index.css"，打包后加载不到样式的问题 */
-@import "element-plus/dist/index.css";

src/layout/theme/index.ts

@@ -1,6 +1,20 @@
+/**
+ * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
+ */
+
+import { EpThemeColor } from "../../../public/serverConfig.json";
+
+type MultipleScopeVarsItem = {
+  scopeName: string;
+  varsContent: string;
+};
+
+/** 将vxe默认主题色和ep默认主题色保持一致 */
+const vxeColor = EpThemeColor;
+/** 预设主题色 */
 const themeColors = {
   default: {
-    color: "#409EFF",
+    vxeColor,
     subMenuActiveText: "#fff",
     menuBg: "#001529",
     menuHover: "#4091f7",
@@ -13,7 +27,7 @@ const themeColors = {
     menuActiveBefore: "#4091f7"
   },
   light: {
-    color: "#409EFF",
+    vxeColor,
     subMenuActiveText: "#409eff",
     menuBg: "#fff",
     menuHover: "#e0ebf6",
@@ -26,7 +40,7 @@ const themeColors = {
     menuActiveBefore: "#4091f7"
   },
   dusk: {
-    color: "#f5222d",
+    vxeColor: "#f5222d",
     subMenuActiveText: "#fff",
     menuBg: "#2a0608",
     menuHover: "#e13c39",
@@ -39,7 +53,7 @@ const themeColors = {
     menuActiveBefore: "#e13c39"
   },
   volcano: {
-    color: "#fa541c",
+    vxeColor: "#fa541c",
     subMenuActiveText: "#fff",
     menuBg: "#2b0e05",
     menuHover: "#e85f33",
@@ -52,7 +66,7 @@ const themeColors = {
     menuActiveBefore: "#e85f33"
   },
   yellow: {
-    color: "#fadb14",
+    vxeColor: "#fadb14",
     subMenuActiveText: "#d25f00",
     menuBg: "#2b2503",
     menuHover: "#f6da4d",
@@ -65,7 +79,7 @@ const themeColors = {
     menuActiveBefore: "#f6da4d"
   },
   mingQing: {
-    color: "#13c2c2",
+    vxeColor: "#13c2c2",
     subMenuActiveText: "#fff",
     menuBg: "#032121",
     menuHover: "#59bfc1",
@@ -78,7 +92,7 @@ const themeColors = {
     menuActiveBefore: "#59bfc1"
   },
   auroraGreen: {
-    color: "#52c41a",
+    vxeColor: "#52c41a",
     subMenuActiveText: "#fff",
     menuBg: "#0b1e15",
     menuHover: "#60ac80",
@@ -91,7 +105,7 @@ const themeColors = {
     menuActiveBefore: "#60ac80"
   },
   pink: {
-    color: "#eb2f96",
+    vxeColor: "#eb2f96",
     subMenuActiveText: "#fff",
     menuBg: "#28081a",
     menuHover: "#d84493",
@@ -104,7 +118,7 @@ const themeColors = {
     menuActiveBefore: "#d84493"
   },
   saucePurple: {
-    color: "#722ed1",
+    vxeColor: "#722ed1",
     subMenuActiveText: "#fff",
     menuBg: "#130824",
     menuHover: "#693ac9",
@@ -118,19 +132,28 @@ const themeColors = {
   }
 };
 
-type MultipleScopeVarsItem = {
-  scopeName: string;
-  path: string;
-  varsContent: string;
-};
-
-export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
+/**
+ * @description 将预设主题色处理成主题插件所需格式
+ */
+export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
   const result = [] as MultipleScopeVarsItem[];
   Object.keys(themeColors).forEach(key => {
     result.push({
       scopeName: `layout-theme-${key}`,
-      varsContent: `$primary-color: ${themeColors[key].color} !default;$vxe-primary-color: $primary-color;$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;$menuBg: ${themeColors[key].menuBg} !default;$menuHover: ${themeColors[key].menuHover} !default;$subMenuBg: ${themeColors[key].subMenuBg} !default;$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;$navTextColor: ${themeColors[key].navTextColor} !default;$menuText: ${themeColors[key].menuText} !default;$sidebarLogo: ${themeColors[key].sidebarLogo} !default;$menuTitleHover: ${themeColors[key].menuTitleHover} !default;$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;`
+      varsContent: `
+        $vxe-primary-color: ${themeColors[key].vxeColor} !default;
+        $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
+        $menuBg: ${themeColors[key].menuBg} !default;
+        $menuHover: ${themeColors[key].menuHover} !default;
+        $subMenuBg: ${themeColors[key].subMenuBg} !default;
+        $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
+        $navTextColor: ${themeColors[key].navTextColor} !default;
+        $menuText: ${themeColors[key].menuText} !default;
+        $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
+        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
+        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
+      `
     } as MultipleScopeVarsItem);
   });
   return result;
-}
+};