From c4de900bc0ec46ea1514a846f4567254d7d60ff8 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 21 Dec 2021 17:05:54 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=95=B4?=
=?UTF-8?q?=E7=89=88=E5=88=86=E6=94=AF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ReIcon/index.ts | 22 +++++++---
src/layout/components/setting/index.vue | 2 +-
src/layout/theme/element-plus.ts | 72 +++++++++++++++++++++++++++++++++
src/utils/theme/index.ts | 71 --------------------------------
4 files changed, 90 insertions(+), 77 deletions(-)
create mode 100644 src/layout/theme/element-plus.ts
delete mode 100644 src/utils/theme/index.ts
diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts
index 9861527..233473a 100644
--- a/src/components/ReIcon/index.ts
+++ b/src/components/ReIcon/index.ts
@@ -9,20 +9,24 @@ import { iconComponents } from "/@/plugins/element-plus";
* @returns component
*/
export function findIconReg(icon: string) {
- // fontawesome
- const faReg = /^FA-/;
+ // fontawesome4
+ const fa4Reg = /^fa-/;
+ // fontawesome5+
+ const fa5Reg = /^FA-/;
// iconfont
const iFReg = /^IF-/;
// remixicon
const riReg = /^RI-/;
// typeof icon === "function" 属于SVG
- if (faReg.test(icon)) {
- const text = icon.split(faReg)[1];
+ if (fa5Reg.test(icon)) {
+ const text = icon.split(fa5Reg)[1];
return findIcon(
- text.slice(0, text.indexOf(" ")),
+ text.slice(0, text.indexOf(" ") == -1 ? text.length : text.indexOf(" ")),
"FA",
text.slice(text.indexOf(" ") + 1, text.length)
);
+ } else if (fa4Reg.test(icon)) {
+ return findIcon(icon.split(fa4Reg)[1], "fa");
} else if (iFReg.test(icon)) {
return findIcon(icon.split(iFReg)[1], "IF");
} else if (typeof icon === "function") {
@@ -45,6 +49,14 @@ export function findIcon(icon: String, type = "EL", property?: string) {
components: { FontAwesomeIcon },
template: ``
});
+ } else if (type === "fa") {
+ return defineComponent({
+ name: "faIcon",
+ data() {
+ return { icon: `fa ${icon}` };
+ },
+ template: ``
+ });
} else if (type === "IF") {
return defineComponent({
name: "IfIcon",
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index dd39f7e..ee20f45 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -24,7 +24,7 @@ import { useAppStoreHook } from "/@/store/modules/app";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
import { storageLocal, storageSession } from "/@/utils/storage";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-import { createNewStyle, writeNewStyle } from "/@/utils/theme";
+import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
const router = useRouter();
diff --git a/src/layout/theme/element-plus.ts b/src/layout/theme/element-plus.ts
new file mode 100644
index 0000000..0f9823a
--- /dev/null
+++ b/src/layout/theme/element-plus.ts
@@ -0,0 +1,72 @@
+/* 动态改变element-plus主题色 */
+import rgbHex from "rgb-hex";
+import color from "css-color-function";
+import epCss from "element-plus/dist/index.css";
+
+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%))"
+};
+
+export const writeNewStyle = (newStyle: string): void => {
+ const style = window.document.createElement("style");
+ style.innerText = newStyle;
+ window.document.head.appendChild(style);
+};
+
+export const createNewStyle = (primaryStyle: string): string => {
+ const colors = createColors(primaryStyle);
+ let cssText = getOriginStyle();
+ Object.keys(colors).forEach(key => {
+ cssText = cssText.replace(
+ new RegExp("(:|\\s+)" + key, "g"),
+ "$1" + colors[key]
+ );
+ });
+ return cssText;
+};
+
+export const createColors = (primary: string) => {
+ if (!primary) return;
+ const colors = {
+ primary
+ };
+ Object.keys(formula).forEach(key => {
+ const value = formula[key].replace(/primary/, primary);
+ colors[key] = "#" + rgbHex(color.convert(value));
+ });
+ return colors;
+};
+
+export const getOriginStyle = () => {
+ return getStyleTemplate(epCss);
+};
+
+const getStyleTemplate = (data: string): string => {
+ 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;
+};
diff --git a/src/utils/theme/index.ts b/src/utils/theme/index.ts
deleted file mode 100644
index 936e8c4..0000000
--- a/src/utils/theme/index.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import rgbHex from "rgb-hex";
-import color from "css-color-function";
-import epCss from "element-plus/dist/index.css";
-
-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%))"
-};
-
-export const writeNewStyle = newStyle => {
- const style = window.document.createElement("style");
- style.innerText = newStyle;
- window.document.head.appendChild(style);
-};
-
-export const createNewStyle = primaryStyle => {
- const colors = createColors(primaryStyle);
- let cssText = getOriginStyle();
- Object.keys(colors).forEach(key => {
- cssText = cssText.replace(
- new RegExp("(:|\\s+)" + key, "g"),
- "$1" + colors[key]
- );
- });
- return cssText;
-};
-
-export const createColors = primary => {
- if (!primary) return;
- const colors = {
- primary
- };
- Object.keys(formula).forEach(key => {
- const value = formula[key].replace(/primary/, primary);
- colors[key] = "#" + rgbHex(color.convert(value));
- });
- return colors;
-};
-
-export const getOriginStyle = () => {
- return getStyleTemplate(epCss);
-};
-
-const getStyleTemplate = data => {
- 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;
-};