feat: 菜单支持fontawesome、iconfont、ep/icons、自定义svg

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1636197082361") format("woff2"),
-    url("iconfont.woff?t=1636197082361") format("woff"),
-    url("iconfont.ttf?t=1636197082361") format("truetype");
+  src: url("iconfont.woff2?t=1638023560828") format("woff2"),
+    url("iconfont.woff?t=1638023560828") format("woff"),
+    url("iconfont.ttf?t=1638023560828") format("truetype");
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.team-icontabs::before {
+  content: "\e63e";
+}
+
 .team-iconlogo::before {
   content: "\e620";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "team-icon",
   "description": "pure-admin",
   "glyphs": [
+    {
+      "icon_id": "20594647",
+      "name": "标签页",
+      "font_class": "tabs",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
     {
       "icon_id": "22129506",
       "name": "水能",

src/components/ReIcon/index.ts

@@ -3,39 +3,53 @@ import icon from "./src/Icon.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { iconComponents } from "/@/plugins/element-plus";
 
-export const Icon = Object.assign(icon, {
-  install(app: App) {
-    app.component(icon.name, icon);
-  }
-});
-
-export default {
-  Icon
-};
 /**
  * find icon component
  * @param icon icon图标
  * @returns component
  */
 export function findIconReg(icon: string) {
-  const faReg = /^fa-/;
+  // fontawesome
+  const faReg = /^FA-/;
+  // iconfont
+  const iFReg = /^IF-/;
+  // typeof icon === "function" 属于SVG
   if (faReg.test(icon)) {
-    return findIcon(icon.split(faReg)[1]);
+    const text = icon.split(faReg)[1];
+    return findIcon(
+      text.slice(0, text.indexOf(" ")),
+      "FA",
+      text.slice(text.indexOf(" ") + 1, text.length)
+    );
+  } else if (iFReg.test(icon)) {
+    return findIcon(icon.split(iFReg)[1], "IF");
+  } else if (typeof icon === "function") {
+    return findIcon(icon, "SVG");
   } else {
-    return findIcon(icon, false);
+    return findIcon(icon, "EL");
   }
 }
-export function findIcon(icon: String, isFa: Boolean = true) {
-  if (isFa) {
+
+// 支持fontawesome、iconfont、element-plus/icons、自定义svg
+export function findIcon(icon: String, type = "EL", property?: string) {
+  if (type === "FA") {
     return defineComponent({
       name: "FaIcon",
-      data() {
-        return { icon: icon };
+      setup() {
+        return { icon, property };
       },
       components: { FontAwesomeIcon },
-      template: `<font-awesome-icon :icon="icon" />`
+      template: `<font-awesome-icon :icon="icon" v-bind:[property]="true" />`
     });
-  } else {
+  } else if (type === "IF") {
+    return defineComponent({
+      name: "IfIcon",
+      data() {
+        return { icon: `iconfont ${icon}` };
+      },
+      template: `<i :class="icon" />`
+    });
+  } else if (type === "EL") {
     const components = iconComponents.filter(
       component => component.name === icon
     );
@@ -44,5 +58,17 @@ export function findIcon(icon: String, isFa: Boolean = true) {
     } else {
       return null;
     }
+  } else if (type === "SVG") {
+    return icon;
   }
 }
+
+export const Icon = Object.assign(icon, {
+  install(app: App) {
+    app.component(icon.name, icon);
+  }
+});
+
+export default {
+  Icon
+};

src/plugins/fontawesome/index.ts

@@ -6,12 +6,16 @@
 import { App } from "vue";
 import "font-awesome/css/font-awesome.css";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUserSecret,
+  faCoffee,
+  faSpinner
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 // github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
 import "remixicon/fonts/remixicon.css";
 
 export function useFontawesome(app: App) {
-  library.add(faUserSecret);
+  library.add(faUserSecret, faCoffee, faSpinner);
   app.component("font-awesome-icon", FontAwesomeIcon);
 }

src/plugins/i18n/config.ts

@@ -42,6 +42,7 @@ export const menusConfig = {
       permission: "权限管理",
       permissionPage: "页面权限",
       permissionButton: "按钮权限",
+      hstabs: "标签页操作",
       externalLink: "外链"
     }
   },
@@ -78,6 +79,7 @@ export const menusConfig = {
       permission: "Permission Manage",
       permissionPage: "Page Permission",
       permissionButton: "Button Permission",
+      hstabs: "Tabs Operate",
       externalLink: "External Link"
     }
   }

src/router/index.ts

@@ -15,6 +15,7 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 
 // 静态路由
+import tabsRouter from "./modules/tabs";
 import homeRouter from "./modules/home";
 import Layout from "/@/layout/index.vue";
 import errorRouter from "./modules/error";
@@ -32,6 +33,7 @@ import { transformI18n } from "../utils/i18n";
 const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
 
 const constantRoutes: Array<RouteComponent> = [
+  tabsRouter,
   homeRouter,
   flowChartRouter,
   editorRouter,

src/router/modules/tabs.ts

@@ -0,0 +1,29 @@
+import Layout from "/@/layout/index.vue";
+
+const tabsRouter = {
+  path: "/tabs",
+  name: "reTabs",
+  component: Layout,
+  redirect: "/tags/index",
+  meta: {
+    icon: "IF-team-icontabs",
+    title: "message.hstabs",
+    i18n: true,
+    showLink: true,
+    rank: 8
+  },
+  children: [
+    {
+      path: "/tabs/index",
+      name: "reTabs",
+      component: () => import("/@/views/tabs/index.vue"),
+      meta: {
+        title: "message.hstabs",
+        showLink: true,
+        i18n: true
+      }
+    }
+  ]
+};
+
+export default tabsRouter;

src/views/tabs/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="tabs-container">111</div>
+</template>
+
+<style lang="scss" scoped>
+// .tabs-container {
+// }
+</style>