perf: 扩展本地图标使用方式，首启动再次减少 13 个请求

mock/asyncRoutes.ts

@@ -2,14 +2,6 @@
 import { MockMethod } from "vite-plugin-mock";
 import { system, permission, frame, tabs } from "@/router/enums";
 
-import FlUser from "@iconify-icons/ri/admin-line";
-import Role from "@iconify-icons/ri/admin-fill";
-import Dict from "@iconify-icons/ri/git-repository-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
-import Dept from "@iconify-icons/ri/git-branch-line";
-import Lollipop from "@iconify-icons/ep/lollipop";
-import Monitor from "@iconify-icons/ep/monitor";
-
 /**
  * roles：页面级别权限，这里模拟二种 "admin"、"common"
  * admin：管理员角色
@@ -19,7 +11,7 @@ import Monitor from "@iconify-icons/ep/monitor";
 const systemRouter = {
   path: "/system",
   meta: {
-    icon: Setting,
+    icon: "setting",
     title: "menus.hssysManagement",
     rank: system
   },
@@ -28,7 +20,7 @@ const systemRouter = {
       path: "/system/user/index",
       name: "User",
       meta: {
-        icon: FlUser,
+        icon: "flUser",
         title: "menus.hsUser",
         roles: ["admin"]
       }
@@ -37,7 +29,7 @@ const systemRouter = {
       path: "/system/role/index",
       name: "Role",
       meta: {
-        icon: Role,
+        icon: "role",
         title: "menus.hsRole",
         roles: ["admin"]
       }
@@ -46,7 +38,7 @@ const systemRouter = {
       path: "/system/dept/index",
       name: "Dept",
       meta: {
-        icon: Dept,
+        icon: "dept",
         title: "menus.hsDept",
         roles: ["admin"]
       }
@@ -56,7 +48,7 @@ const systemRouter = {
       component: "/system/dict/index",
       name: "Dict",
       meta: {
-        icon: Dict,
+        icon: "dict",
         title: "menus.hsDict",
         keepAlive: true,
         roles: ["admin"]
@@ -69,7 +61,7 @@ const permissionRouter = {
   path: "/permission",
   meta: {
     title: "menus.permission",
-    icon: Lollipop,
+    icon: "lollipop",
     rank: permission
   },
   children: [
@@ -96,7 +88,7 @@ const permissionRouter = {
 const frameRouter = {
   path: "/iframe",
   meta: {
-    icon: Monitor,
+    icon: "monitor",
     title: "menus.hsExternalPage",
     rank: frame
   },

src/components/ReIcon/src/offlineIcon.ts

@@ -0,0 +1,51 @@
+import { addIcon } from "@iconify/vue/dist/offline";
+
+/**
+ * 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+ */
+
+// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
+import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
+import Menu from "@iconify-icons/ep/menu";
+import Edit from "@iconify-icons/ep/edit";
+import InformationLine from "@iconify-icons/ri/information-line";
+import SetUp from "@iconify-icons/ep/set-up";
+import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import Guide from "@iconify-icons/ep/guide";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import Card from "@iconify-icons/ri/bank-card-line";
+import ListCheck from "@iconify-icons/ri/list-check";
+import Histogram from "@iconify-icons/ep/histogram";
+import Ppt from "@iconify-icons/ri/file-ppt-2-line";
+import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+import FlUser from "@iconify-icons/ri/admin-line";
+import Role from "@iconify-icons/ri/admin-fill";
+import Dict from "@iconify-icons/ri/git-repository-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import Lollipop from "@iconify-icons/ep/lollipop";
+import Monitor from "@iconify-icons/ep/monitor";
+addIcon("ubuntuFill", UbuntuFill);
+addIcon("menu", Menu);
+addIcon("edit", Edit);
+addIcon("informationLine", InformationLine);
+addIcon("setUp", SetUp);
+addIcon("terminalWindowLine", TerminalWindowLine);
+addIcon("guide", Guide);
+addIcon("homeFilled", HomeFilled);
+addIcon("card", Card);
+addIcon("listCheck", ListCheck);
+addIcon("histogram", Histogram);
+addIcon("ppt", Ppt);
+addIcon("checkboxCircleLine", CheckboxCircleLine);
+addIcon("flUser", FlUser);
+addIcon("role", Role);
+addIcon("dict", Dict);
+addIcon("setting", Setting);
+addIcon("dept", Dept);
+addIcon("lollipop", Lollipop);
+addIcon("monitor", Monitor);
+
+// 非菜单图标
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+addIcon("refreshRight", RefreshRight);

src/components/ReQrcode/src/index.tsx

@@ -13,7 +13,6 @@ import { isString } from "@pureadmin/utils";
 import { propTypes } from "@/utils/propTypes";
 import { IconifyIconOffline } from "../../ReIcon";
 import QRCode, { QRCodeRenderersOptions } from "qrcode";
-import RefreshRight from "@iconify-icons/ep/refresh-right";
 
 interface QrcodeLogo {
   src?: string;
@@ -248,7 +247,7 @@ export default defineComponent({
               <div class="absolute top-[50%] left-[50%] font-bold">
                 <IconifyIconOffline
                   class="cursor-pointer"
-                  icon={RefreshRight}
+                  icon="refreshRight"
                   width="30"
                   color="var(--el-color-primary)"
                 />

src/components/ReTable/src/bar.tsx

@@ -6,7 +6,6 @@ import { IconifyIconOffline } from "../../ReIcon";
 import Expand from "@iconify-icons/mdi/arrow-expand-down";
 import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical";
 import Setting from "@iconify-icons/ri/settings-3-line";
-import RefreshRight from "@iconify-icons/ep/refresh-right";
 
 export const loadingSvg = `
   <path class="path" d="
@@ -153,7 +152,7 @@ export default defineComponent({
               <el-tooltip effect="dark" content="刷新" placement="top">
                 <IconifyIconOffline
                   class="cursor-pointer"
-                  icon={RefreshRight}
+                  icon="refreshRight"
                   width="16"
                   color="text_color_regular"
                   onClick={() => emit("refresh")}

src/layout/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import "animate.css";
+// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
+import "@/components/ReIcon/src/offlineIcon";
 // vxe-table的所有icon不支持component模式，间接依赖了font-awesome
 import "font-awesome/css/font-awesome.min.css";
 import { setType } from "./types";

src/layout/types.ts

@@ -1,5 +1,4 @@
 import type { IconifyIcon } from "@iconify/vue";
-import HomeFilled from "@iconify-icons/ep/home-filled";
 
 export const routerArrays: Array<RouteConfigs> = [
   {
@@ -7,7 +6,7 @@ export const routerArrays: Array<RouteConfigs> = [
     parentPath: "/",
     meta: {
       title: "menus.hshome",
-      icon: HomeFilled
+      icon: "homeFilled"
     }
   }
 ];

src/router/modules/able.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { able } from "@/router/enums";
-import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
 
 export default {
   path: "/able",
   redirect: "/able/watermark",
   meta: {
-    icon: UbuntuFill,
+    icon: "ubuntuFill",
     title: $t("menus.hsAble"),
     rank: able
   },

src/router/modules/components.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { components } from "@/router/enums";
-import Menu from "@iconify-icons/ep/menu";
 
 export default {
   path: "/components",
   redirect: "/components/video",
   meta: {
-    icon: Menu,
+    icon: "menu",
     title: $t("menus.hscomponents"),
     rank: components
   },

src/router/modules/editor.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { editor } from "@/router/enums";
-import Edit from "@iconify-icons/ep/edit";
 
 export default {
   path: "/editor",
   redirect: "/editor/index",
   meta: {
-    icon: Edit,
+    icon: "edit",
     title: $t("menus.hseditor"),
     rank: editor
   },

src/router/modules/error.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { error } from "@/router/enums";
-import InformationLine from "@iconify-icons/ri/information-line";
 
 export default {
   path: "/error",
   redirect: "/error/403",
   meta: {
-    icon: InformationLine,
+    icon: "informationLine",
     title: $t("menus.hsabnormal"),
     rank: error
   },

src/router/modules/flowchart.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { flowchart } from "@/router/enums";
-import SetUp from "@iconify-icons/ep/set-up";
 
 export default {
   path: "/flowChart",
   redirect: "/flowChart/index",
   meta: {
-    icon: SetUp,
+    icon: "setUp",
     title: $t("menus.hsflowChart"),
     rank: flowchart
   },

src/router/modules/formdesign.ts

@@ -2,13 +2,11 @@ import { $t } from "@/plugins/i18n";
 import { formdesign } from "@/router/enums";
 const IFrame = () => import("@/layout/frameView.vue");
 
-import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
-
 export default {
   path: "/formDesign",
   redirect: "/formDesign/index",
   meta: {
-    icon: TerminalWindowLine,
+    icon: "terminalWindowLine",
     title: $t("menus.hsFormDesign"),
     rank: formdesign
   },

src/router/modules/guide.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { guide } from "@/router/enums";
-import Guide from "@iconify-icons/ep/guide";
 
 export default {
   path: "/guide",
   redirect: "/guide/index",
   meta: {
-    icon: Guide,
+    icon: "guide",
     title: $t("menus.hsguide"),
     rank: guide
   },

src/router/modules/home.ts

@@ -1,7 +1,6 @@
 import { $t } from "@/plugins/i18n";
 import { home } from "@/router/enums";
 const Layout = () => import("@/layout/index.vue");
-import HomeFilled from "@iconify-icons/ep/home-filled";
 
 export default {
   path: "/",
@@ -9,7 +8,7 @@ export default {
   component: Layout,
   redirect: "/welcome",
   meta: {
-    icon: HomeFilled,
+    icon: "homeFilled",
     title: $t("menus.hshome"),
     rank: home
   },

src/router/modules/list.ts

@@ -1,13 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { list } from "@/router/enums";
-import ListCheck from "@iconify-icons/ri/list-check";
-import Card from "@iconify-icons/ri/bank-card-line";
 
 export default {
   path: "/list",
   redirect: "/list/card",
   meta: {
-    icon: ListCheck,
+    icon: "listCheck",
     title: $t("menus.hsList"),
     rank: list
   },
@@ -17,7 +15,7 @@ export default {
       name: "ListCard",
       component: () => import("@/views/list/card/index.vue"),
       meta: {
-        icon: Card,
+        icon: "card",
         title: $t("menus.hsListCard"),
         showParent: true
       }

src/router/modules/nested.ts

@@ -1,13 +1,12 @@
 import { $t } from "@/plugins/i18n";
 import { nested } from "@/router/enums";
-import Histogram from "@iconify-icons/ep/histogram";
 
 export default {
   path: "/nested",
   redirect: "/nested/menu1/menu1-1",
   meta: {
     title: $t("menus.hsmenus"),
-    icon: Histogram,
+    icon: "histogram",
     rank: nested
   },
   children: [

src/router/modules/ppt.ts

@@ -1,12 +1,11 @@
 import { ppt } from "@/router/enums";
 const IFrame = () => import("@/layout/frameView.vue");
-import Ppt from "@iconify-icons/ri/file-ppt-2-line";
 
 export default {
   path: "/ppt",
   redirect: "/ppt/index",
   meta: {
-    icon: Ppt,
+    icon: "ppt",
     title: "PPT",
     rank: ppt
   },

src/router/modules/remaining.ts

@@ -1,6 +1,5 @@
 import { $t } from "@/plugins/i18n";
 const Layout = () => import("@/layout/index.vue");
-import HomeFilled from "@iconify-icons/ep/home-filled";
 
 export default [
   {
@@ -17,7 +16,7 @@ export default [
     path: "/redirect",
     component: Layout,
     meta: {
-      icon: HomeFilled,
+      icon: "homeFilled",
       title: $t("menus.hshome"),
       showLink: false,
       rank: 102

src/router/modules/result.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { result } from "@/router/enums";
-import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
 
 export default {
   path: "/result",
   redirect: "/result/success",
   meta: {
-    icon: CheckboxCircleLine,
+    icon: "checkboxCircleLine",
     title: $t("menus.hsResult"),
     rank: result
   },