From b4a566b2bfa5177e74760c4b44927966dbffe832 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 3 Dec 2022 21:38:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=89=A9=E5=B1=95=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E9=A6=96=E5=90=AF=E5=8A=A8=E5=86=8D=E6=AC=A1=E5=87=8F=E5=B0=91?=
 =?UTF-8?q?=20`13`=20=E4=B8=AA=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/asyncRoutes.ts                      | 22 ++++------
 src/components/ReIcon/src/offlineIcon.ts | 51 ++++++++++++++++++++++++
 src/components/ReQrcode/src/index.tsx    |  3 +-
 src/components/ReTable/src/bar.tsx       |  3 +-
 src/layout/index.vue                     |  2 +
 src/layout/types.ts                      |  3 +-
 src/router/modules/able.ts               |  3 +-
 src/router/modules/components.ts         |  3 +-
 src/router/modules/editor.ts             |  3 +-
 src/router/modules/error.ts              |  3 +-
 src/router/modules/flowchart.ts          |  3 +-
 src/router/modules/formdesign.ts         |  4 +-
 src/router/modules/guide.ts              |  3 +-
 src/router/modules/home.ts               |  3 +-
 src/router/modules/list.ts               |  6 +--
 src/router/modules/nested.ts             |  3 +-
 src/router/modules/ppt.ts                |  3 +-
 src/router/modules/remaining.ts          |  3 +-
 src/router/modules/result.ts             |  3 +-
 19 files changed, 77 insertions(+), 50 deletions(-)
 create mode 100644 src/components/ReIcon/src/offlineIcon.ts

diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index f77bf54fc..d7b0aff0c 100644
--- a/mock/asyncRoutes.ts
+++ b/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
   },
diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts
new file mode 100644
index 000000000..f93d2d52d
--- /dev/null
+++ b/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);
diff --git a/src/components/ReQrcode/src/index.tsx b/src/components/ReQrcode/src/index.tsx
index 78c0f3cba..f6e39930c 100644
--- a/src/components/ReQrcode/src/index.tsx
+++ b/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)"
                 />
diff --git a/src/components/ReTable/src/bar.tsx b/src/components/ReTable/src/bar.tsx
index beb98eae6..591a5af6b 100644
--- a/src/components/ReTable/src/bar.tsx
+++ b/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")}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index b97effb4e..9eed85295 100644
--- a/src/layout/index.vue
+++ b/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";
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 61b00ff8b..8757a65a0 100644
--- a/src/layout/types.ts
+++ b/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"
     }
   }
 ];
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index 6026a851b..aaca0bdf5 100644
--- a/src/router/modules/able.ts
+++ b/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
   },
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index ab7ecc915..1b2ea9f9d 100644
--- a/src/router/modules/components.ts
+++ b/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
   },
diff --git a/src/router/modules/editor.ts b/src/router/modules/editor.ts
index 2cd690172..c727582af 100644
--- a/src/router/modules/editor.ts
+++ b/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
   },
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index 8ded6ef85..37b27479f 100644
--- a/src/router/modules/error.ts
+++ b/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
   },
diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts
index 9a8ac8325..999c7e16c 100644
--- a/src/router/modules/flowchart.ts
+++ b/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
   },
diff --git a/src/router/modules/formdesign.ts b/src/router/modules/formdesign.ts
index 74b0bd46f..2e6f7e014 100644
--- a/src/router/modules/formdesign.ts
+++ b/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
   },
diff --git a/src/router/modules/guide.ts b/src/router/modules/guide.ts
index 19e14665c..12c63c18f 100644
--- a/src/router/modules/guide.ts
+++ b/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
   },
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 885a026fb..1f2606fe5 100644
--- a/src/router/modules/home.ts
+++ b/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
   },
diff --git a/src/router/modules/list.ts b/src/router/modules/list.ts
index 78dad1542..f772e33cc 100644
--- a/src/router/modules/list.ts
+++ b/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
       }
diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts
index 53989a88c..8fb9833ee 100644
--- a/src/router/modules/nested.ts
+++ b/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: [
diff --git a/src/router/modules/ppt.ts b/src/router/modules/ppt.ts
index f78542ea8..5da80c4a5 100644
--- a/src/router/modules/ppt.ts
+++ b/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
   },
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index ccbd5a0ed..ef7efb8ed 100644
--- a/src/router/modules/remaining.ts
+++ b/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
diff --git a/src/router/modules/result.ts b/src/router/modules/result.ts
index 2f64f545e..9e5d1feea 100644
--- a/src/router/modules/result.ts
+++ b/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
   },