perf: theme

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: `<font-awesome-icon :icon="icon" v-bind:[property]="true" />`
     });
+  } else if (type === "fa") {
+    return defineComponent({
+      name: "faIcon",
+      data() {
+        return { icon: `fa ${icon}` };
+      },
+      template: `<i :class="icon" />`
+    });
   } else if (type === "IF") {
     return defineComponent({
       name: "IfIcon",

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

src/utils/theme/index.ts → src/layout/theme/element-plus.ts

@@ -1,3 +1,4 @@
+/* 动态改变element-plus主题色 */
 import rgbHex from "rgb-hex";
 import color from "css-color-function";
 import epCss from "element-plus/dist/index.css";
@@ -15,13 +16,13 @@ const formula = {
   "light-9": "color(primary tint(90%))"
 };
 
-export const writeNewStyle = newStyle => {
+export const writeNewStyle = (newStyle: string): void => {
   const style = window.document.createElement("style");
   style.innerText = newStyle;
   window.document.head.appendChild(style);
 };
 
-export const createNewStyle = primaryStyle => {
+export const createNewStyle = (primaryStyle: string): string => {
   const colors = createColors(primaryStyle);
   let cssText = getOriginStyle();
   Object.keys(colors).forEach(key => {
@@ -33,7 +34,7 @@ export const createNewStyle = primaryStyle => {
   return cssText;
 };
 
-export const createColors = primary => {
+export const createColors = (primary: string) => {
   if (!primary) return;
   const colors = {
     primary
@@ -49,7 +50,7 @@ export const getOriginStyle = () => {
   return getStyleTemplate(epCss);
 };
 
-const getStyleTemplate = data => {
+const getStyleTemplate = (data: string): string => {
   const colorMap = {
     "#3a8ee6": "shade-1",
     "#409eff": "primary",