refactor: use @iconify-icons/ep

.vscode/extensions.json

@@ -1,12 +1,16 @@
 {
   "recommendations": [
+    "johnsoncodehk.vscode-typescript-vue-plugin",
     "voorjaar.windicss-intellisense",
+    "vscode-icons-team.vscode-icons",
+    "davidanson.vscode-markdownlint",
     "stylelint.vscode-stylelint",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "johnsoncodehk.volar",
     "lokalise.i18n-ally",
     "mikestead.dotenv",
+    "eamodio.gitlens",
     "antfu.iconify"
   ]
 }

.vscode/settings.json

@@ -1,15 +1,4 @@
 {
-  /** 你需要安装这些插件，以便带来更好的提示体验
-   * ESLint
-   * Prettier - Code formatter
-   * stylelint
-   * vscode-icons
-   * i18n Ally
-   * Iconify IntelliSense
-   * WindiCSS IntelliSense
-   * TypeScript Vue Plugin (Volar)
-   * Vue Language Features (Volar)
-   */
   "editor.formatOnType": true,
   "editor.formatOnSave": true,
   "javascript.updateImportsOnFileMove.enabled": "always",
@@ -27,14 +16,12 @@
   "editor.suggestSelection": "first",
   "editor.acceptSuggestionOnCommitCharacter": false,
   "css.lint.propertyIgnoredDueToDisplay": "ignore",
-  // Prevent inline styles from being automatically formatted to all lowercase
   "editor.quickSuggestions": {
     "other": true,
     "comments": true,
     "strings": true
   },
   "files.associations": {
-    // Specifies the location of snippets in the suggestion widget
     "editor.snippetSuggestions": "top"
   },
   "[css]": {

mock/asyncRoutes.ts

@@ -7,7 +7,7 @@ const systemRouter = {
   name: "system",
   redirect: "/system/user/index",
   meta: {
-    icon: "Setting",
+    icon: "setting",
     title: "menus.hssysManagement",
     i18n: true,
     showLink: true,
@@ -42,7 +42,7 @@ const permissionRouter = {
   redirect: "/permission/page/index",
   meta: {
     title: "menus.permission",
-    icon: "Lollipop",
+    icon: "lollipop",
     i18n: true,
     showLink: true,
     rank: 3

package.json

@@ -30,16 +30,16 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@ctrl/tinycolor": "^3.4.0",
-    "@element-plus/icons-vue": "^0.2.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
-    "@vueuse/core": "^6.7.1",
-    "@vueuse/motion": "^2.0.0-beta.4",
+    "@vueuse/core": "^7.5.3",
+    "@vueuse/motion": "^2.0.0-beta.9",
+    "@vueuse/shared": "^7.5.3",
     "animate.css": "^4.1.1",
-    "axios": "^0.21.1",
+    "axios": "^0.25.0",
     "cropperjs": "^1.5.11",
     "css-color-function": "^1.3.3",
     "dayjs": "^1.10.7",
@@ -61,11 +61,11 @@
     "responsive-storage": "^1.0.11",
     "rgb-hex": "^4.0.0",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.2.24",
-    "vue-i18n": "^9.2.0-beta.3",
+    "vue": "^3.2.27",
+    "vue-i18n": "^9.2.0-beta.26",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.12",
-    "vue-types": "^4.1.0",
+    "vue-types": "^4.1.1",
     "vuedraggable": "4.1.0",
     "vxe-table": "^4.1.18",
     "wangeditor": "^4.7.9",
@@ -75,6 +75,8 @@
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
+    "@iconify-icons/ep": "^1.1.3",
+    "@iconify/vue": "^3.1.2",
     "@types/element-resize-detector": "1.1.3",
     "@types/js-cookie": "^3.0.1",
     "@types/mockjs": "1.0.3",
@@ -84,12 +86,11 @@
     "@typescript-eslint/eslint-plugin": "4.31.0",
     "@typescript-eslint/parser": "4.31.0",
     "@vitejs/plugin-legacy": "^1.6.4",
-    "@vitejs/plugin-vue": "^1.10.2",
-    "@vitejs/plugin-vue-jsx": "^1.3.1",
-    "@vue/compiler-sfc": "^3.2.24",
+    "@vitejs/plugin-vue": "^2.0.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-typescript": "7.0.0",
-    "@zougt/vite-plugin-theme-preprocessor": "^1.4.0",
+    "@zougt/vite-plugin-theme-preprocessor": "^1.4.4",
     "autoprefixer": "10.2.4",
     "cross-env": "7.0.3",
     "eslint": "7.30.0",
@@ -109,16 +110,16 @@
     "stylelint-config-standard": "22.0.0",
     "stylelint-order": "4.1.0",
     "typescript": "4.4.2",
-    "unplugin-element-plus": "^0.1.3",
-    "vite": "2.6.14",
+    "unplugin-element-plus": "^0.2.0",
+    "vite": "^2.7.13",
     "vite-plugin-live-reload": "^2.1.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^0.0.6",
-    "vite-plugin-style-import": "^1.2.1",
+    "vite-plugin-style-import": "^1.4.1",
     "vite-plugin-windicss": "^1.6.1",
-    "vite-svg-loader": "^2.2.0",
+    "vite-svg-loader": "2.2.0",
     "vue-eslint-parser": "7.10.0",
-    "windicss": "^3.4.2"
+    "windicss": "^3.4.3"
   },
   "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
   "author": "xiaoxian521",

src/components/ReCharts/src/Github.vue

@@ -13,21 +13,27 @@ const lists = ref([
   <el-descriptions class="margin-top" direction="vertical" :column="3" border>
     <el-descriptions-item>
       <template #label>
-        <el-icon><user /></el-icon>
+        <el-icon>
+          <IconifyIconOffline icon="user" />
+        </el-icon>
         用户名
       </template>
       xiaoxian
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><iphone /></el-icon>
+        <el-icon>
+          <IconifyIconOffline icon="iphone" />
+        </el-icon>
         手机号
       </template>
       123456789
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><location /></el-icon>
+        <el-icon>
+          <IconifyIconOffline icon="location" />
+        </el-icon>
         居住地
       </template>
       上海
@@ -36,7 +42,9 @@ const lists = ref([
   <el-descriptions class="margin-top" direction="vertical" :column="2" border>
     <el-descriptions-item>
       <template #label>
-        <el-icon><tickets /></el-icon>
+        <el-icon>
+          <IconifyIconOffline icon="tickets" />
+        </el-icon>
         标签
       </template>
       <el-tag
@@ -51,7 +59,9 @@ const lists = ref([
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><office-building /></el-icon>
+        <el-icon>
+          <IconifyIconOffline icon="office-building" />
+        </el-icon>
         联系地址
       </template>
       上海市徐汇区
@@ -60,7 +70,9 @@ const lists = ref([
   <el-descriptions class="margin-top" direction="vertical" :column="1" border>
     <el-descriptions-item>
       <template #label>
-        <el-icon><notebook /></el-icon>
+        <el-icon>
+          <IconifyIconOffline icon="notebook" />
+        </el-icon>
         留言
       </template>
       好好学习，天天向上

src/components/ReIcon/index.ts

@@ -1,7 +1,8 @@
 import { App, defineComponent } from "vue";
 import icon from "./src/Icon.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { iconComponents } from "/@/plugins/element-plus";
+import iconifyIconOffline from "./src/iconifyIconOffline";
+import iconifyIconOnline from "./src/iconifyIconOnline";
 
 /**
  * find icon component
@@ -67,21 +68,20 @@ export function findIcon(icon: String, type = "EL", property?: string) {
     });
   } else if (type === "RI") {
     return defineComponent({
-      name: "RIIcon",
+      name: "RiIcon",
       data() {
         return { icon: `ri-${icon}` };
       },
       template: `<i :class="icon" />`
     });
   } else if (type === "EL") {
-    const components = iconComponents.filter(
-      component => component.name === icon
-    );
-    if (components.length > 0) {
-      return components[0];
-    } else {
-      return null;
-    }
+    return defineComponent({
+      name: "ElIcon",
+      data() {
+        return { icon };
+      },
+      template: `<IconifyIconOffline :icon="icon" />`
+    });
   } else if (type === "SVG") {
     return icon;
   }
@@ -93,6 +93,11 @@ export const Icon = Object.assign(icon, {
   }
 });
 
+export const IconifyIconOffline = iconifyIconOffline;
+export const IconifyIconOnline = iconifyIconOnline;
+
 export default {
-  Icon
+  Icon,
+  IconifyIconOffline,
+  IconifyIconOnline
 };

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -0,0 +1,70 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
+import Check from "@iconify-icons/ep/check";
+import Menu from "@iconify-icons/ep/menu";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import SetUp from "@iconify-icons/ep/set-up";
+import Edit from "@iconify-icons/ep/edit";
+import Setting from "@iconify-icons/ep/setting";
+import Lollipop from "@iconify-icons/ep/lollipop";
+import Link from "@iconify-icons/ep/link";
+import Position from "@iconify-icons/ep/position";
+import Histogram from "@iconify-icons/ep/histogram";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+import ArrowDown from "@iconify-icons/ep/arrow-down";
+import Close from "@iconify-icons/ep/close";
+import CloseBold from "@iconify-icons/ep/close-bold";
+import Bell from "@iconify-icons/ep/bell";
+import Guide from "@iconify-icons/ep/guide";
+import User from "@iconify-icons/ep/user";
+import Iphone from "@iconify-icons/ep/iphone";
+import Location from "@iconify-icons/ep/location";
+import Tickets from "@iconify-icons/ep/tickets";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Notebook from "@iconify-icons/ep/notebook";
+addIcon("check", Check);
+addIcon("menu", Menu);
+addIcon("home-filled", HomeFilled);
+addIcon("set-up", SetUp);
+addIcon("edit", Edit);
+addIcon("setting", Setting);
+addIcon("lollipop", Lollipop);
+addIcon("link", Link);
+addIcon("position", Position);
+addIcon("histogram", Histogram);
+addIcon("refresh-right", RefreshRight);
+addIcon("arrow-down", ArrowDown);
+addIcon("close", Close);
+addIcon("close-bold", CloseBold);
+addIcon("bell", Bell);
+addIcon("guide", Guide);
+addIcon("user", User);
+addIcon("iphone", Iphone);
+addIcon("location", Location);
+addIcon("tickets", Tickets);
+addIcon("office-building", OfficeBuilding);
+addIcon("notebook", Notebook);
+
+// Iconify Icon在Vue里离线使用（用于内网环境）
+// https://docs.iconify.design/icon-components/vue/offline.html
+export default defineComponent({
+  name: "IconifyIcon",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.icon}`
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon } from "@iconify/vue";
+
+// Iconify Icon在Vue里在线使用（用于外网环境）
+// https://docs.iconify.design/icon-components/vue/offline.html
+export default defineComponent({
+  name: "IconifyIcon",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "ep:"
+    }
+  },
+  render() {
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.type}${this.icon}`
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});

src/layout/components/appMain.vue

@@ -8,7 +8,7 @@ import {
   getCurrentInstance
 } from "vue";
 import { RouterView } from "vue-router";
-import backTop from "/@/assets/svg/back_top.svg";
+import backTop from "/@/assets/svg/back_top.svg?component";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 const props = defineProps({

src/layout/components/navbar.vue

@@ -13,8 +13,8 @@ import { useAppStoreHook } from "/@/store/modules/app";
 import { unref, watch, getCurrentInstance } from "vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import screenfull from "../components/screenfull/index.vue";
-import globalization from "/@/assets/svg/globalization.svg";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
+import globalization from "/@/assets/svg/globalization.svg?component";
 
 const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
@@ -95,15 +95,17 @@ function translationEn() {
             <el-dropdown-item
               :style="getDropdownItemStyle('zh')"
               @click="translationCh"
-              ><el-icon class="check-zh" v-show="locale === 'zh'"
-                ><check /></el-icon
-              >简体中文</el-dropdown-item
+              ><IconifyIconOffline
+                class="check-zh"
+                v-show="locale === 'zh'"
+                icon="check"
+              />简体中文</el-dropdown-item
             >
             <el-dropdown-item
               :style="getDropdownItemStyle('en')"
               @click="translationEn"
               ><el-icon class="check-en" v-show="locale === 'en'"
-                ><check /></el-icon
+                ><IconifyIconOffline icon="check" /></el-icon
               >English</el-dropdown-item
             >
           </el-dropdown-menu>
@@ -129,7 +131,7 @@ function translationEn() {
         :title="$t('buttons.hssystemSet')"
         @click="onPanel"
       >
-        <Setting />
+        <IconifyIconOffline icon="setting" />
       </el-icon>
     </div>
   </div>

src/layout/components/notice/index.vue

@@ -16,7 +16,9 @@ notices.value.forEach(notice => {
   <el-dropdown trigger="click" placement="bottom-end">
     <span class="dropdown-badge">
       <el-badge :value="noticesNum" :max="99">
-        <el-icon class="header-notice-icon"><bell /></el-icon>
+        <el-icon class="header-notice-icon"
+          ><IconifyIconOffline icon="bell"
+        /></el-icon>
       </el-badge>
     </span>
     <template #dropdown>

src/layout/components/panel/index.vue

@@ -23,7 +23,7 @@ emitter.on("openPanel", () => {
         <div class="project-configuration">
           <h3>项目配置</h3>
           <el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
-            <Close />
+            <IconifyIconOffline icon="close" />
           </el-icon>
         </div>
         <div style="border-bottom: 1px solid #dcdfe6"></div>

src/layout/components/setting/index.vue

@@ -16,9 +16,7 @@ import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
-import dayIcon from "/@/assets/svg/day.svg";
 import { debounce } from "/@/utils/debounce";
-import darkIcon from "/@/assets/svg/dark.svg";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { shadeBgColor } from "../../theme/element-plus";
@@ -28,6 +26,9 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
 
+import dayIcon from "/@/assets/svg/day.svg?component";
+import darkIcon from "/@/assets/svg/dark.svg?component";
+
 const router = useRouter();
 const { isSelect } = useCssModule();
 const body = document.documentElement as HTMLElement;
@@ -155,7 +156,7 @@ function onReset() {
       parentPath: "/",
       meta: {
         title: "menus.hshome",
-        icon: "HomeFilled",
+        icon: "home-filled",
         i18n: true,
         showLink: true
       }
@@ -351,7 +352,7 @@ nextTick(() => {
           :size="17"
           :color="getThemeColor(item.themeColor)"
         >
-          <Check />
+          <IconifyIconOffline icon="check" />
         </el-icon>
       </li>
     </ul>

src/layout/components/sidebar/horizontal.vue

@@ -19,8 +19,8 @@ import { useRoute, useRouter } from "vue-router";
 import { storageSession } from "/@/utils/storage";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
-import globalization from "/@/assets/svg/globalization.svg";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
+import globalization from "/@/assets/svg/globalization.svg?component";
 
 const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
@@ -161,14 +161,14 @@ onMounted(() => {
               :style="getDropdownItemStyle('zh')"
               @click="translationCh"
               ><el-icon class="check-zh" v-show="locale === 'zh'"
-                ><check /></el-icon
+                ><IconifyIconOffline icon="check" /></el-icon
               >简体中文</el-dropdown-item
             >
             <el-dropdown-item
               :style="getDropdownItemStyle('en')"
               @click="translationEn"
               ><el-icon class="check-en" v-show="locale === 'en'"
-                ><check /></el-icon
+                ><IconifyIconOffline icon="check" /></el-icon
               >English</el-dropdown-item
             >
           </el-dropdown-menu>
@@ -194,7 +194,7 @@ onMounted(() => {
         :title="$t('buttons.hssystemSet')"
         @click="onPanel"
       >
-        <Setting />
+        <IconifyIconOffline icon="setting" />
       </el-icon>
     </div>
   </div>

src/layout/components/tag/index.vue

@@ -3,6 +3,7 @@ import {
   ref,
   watch,
   unref,
+  reactive,
   nextTick,
   computed,
   ComputedRef,
@@ -11,15 +12,15 @@ import {
   getCurrentInstance
 } from "vue";
 
-import close from "/@/assets/svg/close.svg";
-import refresh from "/@/assets/svg/refresh.svg";
-import closeAll from "/@/assets/svg/close_all.svg";
-import closeLeft from "/@/assets/svg/close_left.svg";
-import closeOther from "/@/assets/svg/close_other.svg";
-import closeRight from "/@/assets/svg/close_right.svg";
+import close from "/@/assets/svg/close.svg?component";
+import refresh from "/@/assets/svg/refresh.svg?component";
+import closeAll from "/@/assets/svg/close_all.svg?component";
+import closeLeft from "/@/assets/svg/close_left.svg?component";
+import closeOther from "/@/assets/svg/close_other.svg?component";
+import closeRight from "/@/assets/svg/close_right.svg?component";
 
-import { $t as t } from "/@/plugins/i18n";
 import { emitter } from "/@/utils/mitt";
+import { $t as t } from "/@/plugins/i18n";
 import { isEqual, isEmpty } from "lodash-es";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageLocal } from "/@/utils/storage";
@@ -30,7 +31,6 @@ import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
-
 import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 
 const route = useRoute();
@@ -128,7 +128,7 @@ const moveToView = (index: number): void => {
   if (!instance.refs["dynamic" + index]) {
     return;
   }
-  const tabItemEl = instance.refs["dynamic" + index];
+  const tabItemEl = instance.refs["dynamic" + index][0];
   const tabItemElOffsetLeft = (tabItemEl as HTMLElement).offsetLeft;
   const tabItemOffsetWidth = (tabItemEl as HTMLElement).offsetWidth;
   // 标签页导航栏可视长度（不包含溢出部分）
@@ -186,7 +186,7 @@ const handleScroll = (offset: number): void => {
   }
 };
 
-const tagsViews = ref<Array<tagsViewsType>>([
+const tagsViews = reactive<Array<tagsViewsType>>([
   {
     icon: refresh,
     text: t("buttons.hsreload"),
@@ -435,13 +435,13 @@ function closeMenu() {
 
 function showMenus(value: boolean) {
   Array.of(1, 2, 3, 4, 5).forEach(v => {
-    tagsViews.value[v].show = value;
+    tagsViews[v].show = value;
   });
 }
 
 function disabledMenus(value: boolean) {
   Array.of(1, 2, 3, 4, 5).forEach(v => {
-    tagsViews.value[v].disabled = value;
+    tagsViews[v].disabled = value;
   });
 }
 
@@ -463,7 +463,7 @@ function showMenuModel(
   showMenus(true);
 
   if (refresh) {
-    tagsViews.value[0].show = true;
+    tagsViews[0].show = true;
   }
 
   /**
@@ -473,25 +473,25 @@ function showMenuModel(
 
   if (currentIndex === 1 && routeLength !== 2) {
     // 左侧的菜单是首页，右侧存在别的菜单
-    tagsViews.value[2].show = false;
+    tagsViews[2].show = false;
     Array.of(1, 3, 4, 5).forEach(v => {
-      tagsViews.value[v].disabled = false;
+      tagsViews[v].disabled = false;
     });
-    tagsViews.value[2].disabled = true;
+    tagsViews[2].disabled = true;
   } else if (currentIndex === 1 && routeLength === 2) {
     disabledMenus(false);
     // 左侧的菜单是首页，右侧不存在别的菜单
     Array.of(2, 3, 4).forEach(v => {
-      tagsViews.value[v].show = false;
-      tagsViews.value[v].disabled = true;
+      tagsViews[v].show = false;
+      tagsViews[v].disabled = true;
     });
   } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
     // 当前路由是所有路由中的最后一个
-    tagsViews.value[3].show = false;
+    tagsViews[3].show = false;
     Array.of(1, 2, 4, 5).forEach(v => {
-      tagsViews.value[v].disabled = false;
+      tagsViews[v].disabled = false;
     });
-    tagsViews.value[3].disabled = true;
+    tagsViews[3].disabled = true;
   } else if (currentIndex === 0 || currentPath === "/redirect/welcome") {
     // 当前路由为首页
     disabledMenus(true);
@@ -505,10 +505,10 @@ function openMenu(tag, e) {
   if (tag.path === "/welcome") {
     // 右键菜单为首页，只显示刷新
     showMenus(false);
-    tagsViews.value[0].show = true;
+    tagsViews[0].show = true;
   } else if (route.path !== tag.path) {
     // 右键菜单不匹配当前路由，隐藏刷新
-    tagsViews.value[0].show = false;
+    tagsViews[0].show = false;
     showMenuModel(tag.path, tag.query);
   } else if (
     // eslint-disable-next-line no-dupe-else-if
@@ -517,7 +517,7 @@ function openMenu(tag, e) {
   ) {
     showMenus(true);
     // 只有两个标签时不显示关闭其他标签页
-    tagsViews.value[4].show = false;
+    tagsViews[4].show = false;
   } else if (route.path === tag.path) {
     // 右键当前激活的菜单
     showMenuModel(tag.path, tag.query, true);
@@ -552,30 +552,32 @@ function tagOnClick(item) {
 }
 
 // 鼠标移入
-function onMouseenter(item, index) {
+function onMouseenter(index) {
   if (index) activeIndex.value = index;
   if (unref(showModel) === "smart") {
-    if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
-    toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
-    toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
+    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+      return;
+    toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
+    toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
   } else {
-    if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
-    toggleClass(true, "card-in", instance.refs["dynamic" + index]);
-    toggleClass(false, "card-out", instance.refs["dynamic" + index]);
+    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+    toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
+    toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
   }
 }
 
 // 鼠标移出
-function onMouseleave(item, index) {
+function onMouseleave(index) {
   activeIndex.value = -1;
   if (unref(showModel) === "smart") {
-    if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
-    toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
-    toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
+    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+      return;
+    toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
+    toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
   } else {
-    if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
-    toggleClass(false, "card-in", instance.refs["dynamic" + index]);
-    toggleClass(true, "card-out", instance.refs["dynamic" + index]);
+    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+    toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
+    toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
   }
 }
 
@@ -644,8 +646,8 @@ const getContextMenuStyle = computed((): CSSProperties => {
               : ''
           ]"
           @contextmenu.prevent="openMenu(item, $event)"
-          @mouseenter.prevent="onMouseenter(item, index)"
-          @mouseleave.prevent="onMouseleave(item, index)"
+          @mouseenter.prevent="onMouseenter(index)"
+          @mouseleave.prevent="onMouseleave(index)"
           @click="tagOnClick(item)"
         >
           <router-link :to="item.path"
@@ -659,7 +661,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
             class="el-icon-close"
             @click.stop="deleteMenu(item)"
           >
-            <CloseBold />
+            <IconifyIconOffline icon="close-bold" />
           </el-icon>
           <div
             :ref="'schedule' + index"
@@ -698,13 +700,13 @@ const getContextMenuStyle = computed((): CSSProperties => {
           class="el-icon-refresh-right rotate"
           @click="onFresh"
         >
-          <RefreshRight />
+          <IconifyIconOffline icon="refresh-right" />
         </el-icon>
       </li>
       <li>
         <el-dropdown trigger="click" placement="bottom-end">
           <el-icon>
-            <ArrowDown />
+            <IconifyIconOffline icon="arrow-down" />
           </el-icon>
           <template #dropdown>
             <el-dropdown-menu>

src/layout/index.vue

@@ -11,14 +11,15 @@ import { setType } from "./types";
 import { useI18n } from "vue-i18n";
 import { routerArrays } from "./types";
 import { emitter } from "/@/utils/mitt";
-import backTop from "/@/assets/svg/back_top.svg";
 import { useAppStoreHook } from "/@/store/modules/app";
-import fullScreen from "/@/assets/svg/full_screen.svg";
-import exitScreen from "/@/assets/svg/exit_screen.svg";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { useMultiTagsStore } from "/@/store/modules/multiTags";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 
+import backTop from "/@/assets/svg/back_top.svg?component";
+import fullScreen from "/@/assets/svg/full_screen.svg?component";
+import exitScreen from "/@/assets/svg/exit_screen.svg?component";
+
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
 import appMain from "./components/appMain.vue";

src/layout/types.ts

@@ -1,3 +1,4 @@
+import { Component } from "vue";
 export const routerArrays: Array<RouteConfigs> = [
   {
     path: "/welcome",
@@ -5,7 +6,7 @@ export const routerArrays: Array<RouteConfigs> = [
     meta: {
       title: "menus.hshome",
       i18n: true,
-      icon: "HomeFilled",
+      icon: "home-filled",
       showLink: true
     }
   }
@@ -32,7 +33,7 @@ export type multiTagsType = {
 };
 
 export type tagsViewsType = {
-  icon: string;
+  icon: Component;
   text: string;
   divided: boolean;
   disabled: boolean;

src/main.ts

@@ -27,6 +27,11 @@ Object.keys(directives).forEach(key => {
   app.directive(key, (directives as { [key: string]: Directive })[key]);
 });
 
+// 全局注册`@iconify/vue`图标库
+import { IconifyIconOffline, IconifyIconOnline } from "./components/ReIcon";
+app.component("IconifyIconOffline", IconifyIconOffline);
+app.component("IconifyIconOnline", IconifyIconOnline);
+
 getServerConfig(app).then(async config => {
   injectResponsiveStorage(app, config);
   setupStore(app);

src/plugins/element-plus/index.ts

@@ -99,58 +99,6 @@ const components = [
   ElTreeV2
 ];
 
-// https://element-plus.org/zh-CN/component/icon.html
-import {
-  Check,
-  Menu,
-  HomeFilled,
-  SetUp,
-  Edit,
-  Setting,
-  Lollipop,
-  Link,
-  Position,
-  Histogram,
-  RefreshRight,
-  ArrowDown,
-  Close,
-  CloseBold,
-  Bell,
-  Guide,
-  User,
-  Iphone,
-  Location,
-  Tickets,
-  OfficeBuilding,
-  Notebook
-} from "@element-plus/icons-vue";
-
-// Icon
-export const iconComponents = [
-  Check,
-  Menu,
-  HomeFilled,
-  SetUp,
-  Edit,
-  Setting,
-  Lollipop,
-  Link,
-  Position,
-  Histogram,
-  RefreshRight,
-  ArrowDown,
-  Close,
-  CloseBold,
-  Bell,
-  Guide,
-  User,
-  Iphone,
-  Location,
-  Tickets,
-  OfficeBuilding,
-  Notebook
-];
-
 export function useElementPlus(app: App) {
   // 注册组件
   components.forEach((component: Component) => {
@@ -158,10 +106,7 @@ export function useElementPlus(app: App) {
   });
   // 注册指令
   plugins.forEach(plugin => {
+    // @ts-ignore
     app.use(plugin);
   });
-  // 注册图标
-  iconComponents.forEach((component: Component) => {
-    app.component(component.name, component);
-  });
 }

src/router/modules/components.ts

@@ -7,7 +7,7 @@ const componentsRouter = {
   component: Layout,
   redirect: "/components/video",
   meta: {
-    icon: "Menu",
+    icon: "menu",
     title: $t("menus.hscomponents"),
     i18n: true,
     showLink: true,

src/router/modules/editor.ts

@@ -7,7 +7,7 @@ const editorRouter = {
   component: Layout,
   redirect: "/editor/index",
   meta: {
-    icon: "Edit",
+    icon: "edit",
     title: $t("menus.hseditor"),
     i18n: true,
     showLink: true,

src/router/modules/error.ts

@@ -7,7 +7,7 @@ const errorRouter = {
   component: Layout,
   redirect: "/error/401",
   meta: {
-    icon: "Position",
+    icon: "position",
     title: $t("menus.hserror"),
     showLink: true,
     i18n: true,

src/router/modules/externalLink.ts

@@ -6,7 +6,7 @@ const externalLink = {
   name: "external",
   component: Layout,
   meta: {
-    icon: "Link",
+    icon: "link",
     title: $t("menus.externalLink"),
     showLink: true,
     i18n: true,

src/router/modules/flowchart.ts

@@ -7,7 +7,7 @@ const flowChartRouter = {
   component: Layout,
   redirect: "/flowChart/index",
   meta: {
-    icon: "SetUp",
+    icon: "set-up",
     title: $t("menus.hsflowChart"),
     showLink: true,
     i18n: true,

src/router/modules/guide.ts

@@ -7,7 +7,7 @@ const guideRouter = {
   component: Layout,
   redirect: "/guide/index",
   meta: {
-    icon: "Guide",
+    icon: "guide",
     title: $t("menus.hsguide"),
     i18n: true,
     showLink: true,

src/router/modules/home.ts

@@ -7,7 +7,7 @@ const homeRouter = {
   component: Layout,
   redirect: "/welcome",
   meta: {
-    icon: "HomeFilled",
+    icon: "home-filled",
     title: $t("menus.hshome"),
     showLink: true,
     i18n: true,

src/router/modules/nested.ts

@@ -8,7 +8,7 @@ const nestedRouter = {
   name: "Nested",
   meta: {
     title: $t("menus.hsmenus"),
-    icon: "Histogram",
+    icon: "histogram",
     showLink: true,
     i18n: true,
     rank: 5

src/router/modules/remaining.ts

@@ -18,7 +18,7 @@ const remainingRouter = [
     name: "redirect",
     component: Layout,
     meta: {
-      icon: "HomeFilled",
+      icon: "home-filled",
       title: $t("menus.hshome"),
       i18n: true,
       showLink: false,

src/router/utils.ts

@@ -19,16 +19,16 @@ const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
 import { getAsyncRoutes } from "/@/api/routes";
 
 // 按照路由中meta下的rank等级升序来排序路由
-const ascending = (arr: any[]) => {
+function ascending(arr: any[]) {
   return arr.sort(
     (a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
       return a?.meta?.rank - b?.meta?.rank;
     }
   );
-};
+}
 
 // 过滤meta中showLink为false的路由
-const filterTree = (data: RouteComponent[]) => {
+function filterTree(data: RouteComponent[]) {
   const newTree = data.filter(
     (v: { meta: { showLink: boolean } }) => v.meta.showLink
   );
@@ -36,20 +36,20 @@ const filterTree = (data: RouteComponent[]) => {
     (v: { children }) => v.children && (v.children = filterTree(v.children))
   );
   return newTree;
-};
+}
 
 // 批量删除缓存路由(keepalive)
-const delAliveRoutes = (delAliveRouteList: Array<RouteConfigs>) => {
+function delAliveRoutes(delAliveRouteList: Array<RouteConfigs>) {
   delAliveRouteList.forEach(route => {
     usePermissionStoreHook().cacheOperate({
       mode: "delete",
       name: route?.name
     });
   });
-};
+}
 
 // 通过path获取父级路径
-const getParentPaths = (path: string, routes: RouteRecordRaw[]) => {
+function getParentPaths(path: string, routes: RouteRecordRaw[]) {
   // 深度遍历查找
   function dfs(routes: RouteRecordRaw[], path: string, parents: string[]) {
     for (let i = 0; i < routes.length; i++) {
@@ -70,10 +70,10 @@ const getParentPaths = (path: string, routes: RouteRecordRaw[]) => {
   }
 
   return dfs(routes, path, []);
-};
+}
 
 // 查找对应path的路由信息
-const findRouteByPath = (path: string, routes: RouteRecordRaw[]) => {
+function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
   let res = routes.find((item: { path: string }) => item.path == path);
   if (res) {
     return res;
@@ -91,20 +91,20 @@ const findRouteByPath = (path: string, routes: RouteRecordRaw[]) => {
     }
     return null;
   }
-};
+}
 
 // 重置路由
-const resetRouter = (): void => {
+function resetRouter(): void {
   router.getRoutes().forEach(route => {
     const { name } = route;
     if (name) {
       router.hasRoute(name) && router.removeRoute(name);
     }
   });
-};
+}
 
 // 初始化路由
-const initRouter = (name: string) => {
+function initRouter(name: string) {
   return new Promise(resolve => {
     getAsyncRoutes({ name }).then(({ info }) => {
       if (info.length === 0) {
@@ -137,15 +137,15 @@ const initRouter = (name: string) => {
       });
     });
   });
-};
+}
 
 /**
  * 将多级嵌套路由处理成一维数组
  * @param routesList 传入路由
  * @returns 返回处理后的一维路由
  */
-const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
-  if (routesList.length <= 0) return routesList;
+function formatFlatteningRoutes(routesList: RouteRecordRaw[]) {
+  if (routesList.length === 0) return routesList;
   for (let i = 0; i < routesList.length; i++) {
     if (routesList[i].children) {
       routesList = routesList
@@ -154,7 +154,7 @@ const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
     }
   }
   return routesList;
-};
+}
 
 /**
  * 一维数组处理成多级嵌套数组（三级及以上的路由全部拍成二级，keep-alive 只支持到二级缓存）
@@ -162,8 +162,8 @@ const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
  * @param routesList 处理后的一维路由菜单数组
  * @returns 返回将一维数组重新处理成规定路由的格式
  */
-const formatTwoStageRoutes = (routesList: RouteRecordRaw[]) => {
-  if (routesList.length <= 0) return routesList;
+function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
+  if (routesList.length === 0) return routesList;
   const newRoutesList: RouteRecordRaw[] = [];
   routesList.forEach((v: RouteRecordRaw) => {
     if (v.path === "/") {
@@ -180,10 +180,10 @@ const formatTwoStageRoutes = (routesList: RouteRecordRaw[]) => {
     }
   });
   return newRoutesList;
-};
+}
 
 // 处理缓存路由（添加、删除、刷新）
-const handleAliveRoute = (matched: RouteRecordNormalized[], mode?: string) => {
+function handleAliveRoute(matched: RouteRecordNormalized[], mode?: string) {
   switch (mode) {
     case "add":
       matched.forEach(v => {
@@ -207,10 +207,10 @@ const handleAliveRoute = (matched: RouteRecordNormalized[], mode?: string) => {
         });
       }, 100);
   }
-};
+}
 
 // 过滤后端传来的动态路由 重新生成规范路由
-const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
+function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
   if (!arrRoutes || !arrRoutes.length) return;
   const modulesRoutesKeys = Object.keys(modulesRoutes);
   arrRoutes.forEach((v: RouteRecordRaw) => {
@@ -225,10 +225,10 @@ const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
     }
   });
   return arrRoutes;
-};
+}
 
 // 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html
-const getHistoryMode = (): RouterHistory => {
+function getHistoryMode(): RouterHistory {
   const routerHistory = loadEnv().VITE_ROUTER_HISTORY;
   // len为1 代表只有历史模式 为2 代表历史模式中存在base参数 https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
   const historyMode = routerHistory.split(",");
@@ -249,10 +249,10 @@ const getHistoryMode = (): RouterHistory => {
       return createWebHistory(rightMode);
     }
   }
-};
+}
 
 // 是否有权限
-const hasPermissions = (value: Array<string>): boolean => {
+function hasPermissions(value: Array<string>): boolean {
   if (value && value instanceof Array && value.length > 0) {
     const roles = usePermissionStoreHook().buttonAuth;
     const permissionRoles = value;
@@ -268,7 +268,7 @@ const hasPermissions = (value: Array<string>): boolean => {
   } else {
     return false;
   }
-};
+}
 
 export {
   ascending,

src/store/modules/multiTags.ts

@@ -16,7 +16,7 @@ export const useMultiTagsStore = defineStore({
             parentPath: "/",
             meta: {
               title: "menus.hshome",
-              icon: "HomeFilled",
+              icon: "home-filled",
               i18n: true,
               showLink: true
             }

src/store/modules/user.ts

@@ -59,7 +59,7 @@ export const useUserStore = defineStore({
           parentPath: "/",
           meta: {
             title: "menus.hshome",
-            icon: "HomeFilled",
+            icon: "home-filled",
             i18n: true,
             showLink: true
           }

src/utils/storage/responsive.ts

@@ -47,7 +47,7 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
                 meta: {
                   title: "menus.hshome",
                   i18n: true,
-                  icon: "HomeFilled",
+                  icon: "home-filled",
                   showLink: true
                 }
               }

src/views/login.vue

@@ -5,14 +5,14 @@ import { initRouter } from "/@/router/utils";
 import { storageSession } from "/@/utils/storage";
 import { addClass, removeClass } from "/@/utils/operate";
 import bg from "/@/assets/login/bg.png";
-import avatar from "/@/assets/login/avatar.svg";
-import illustration0 from "/@/assets/login/illustration0.svg";
-import illustration1 from "/@/assets/login/illustration1.svg";
-import illustration2 from "/@/assets/login/illustration2.svg";
-import illustration3 from "/@/assets/login/illustration3.svg";
-import illustration4 from "/@/assets/login/illustration4.svg";
-import illustration5 from "/@/assets/login/illustration5.svg";
-import illustration6 from "/@/assets/login/illustration6.svg";
+import avatar from "/@/assets/login/avatar.svg?component";
+import illustration0 from "/@/assets/login/illustration0.svg?component";
+import illustration1 from "/@/assets/login/illustration1.svg?component";
+import illustration2 from "/@/assets/login/illustration2.svg?component";
+import illustration3 from "/@/assets/login/illustration3.svg?component";
+import illustration4 from "/@/assets/login/illustration4.svg?component";
+import illustration5 from "/@/assets/login/illustration5.svg?component";
+import illustration6 from "/@/assets/login/illustration6.svg?component";
 
 const router = useRouter();
 

types/global.d.ts

@@ -6,16 +6,15 @@ import type {
   PropType as VuePropType
 } from "vue";
 
+// GlobalComponents for Volar
+declare module "vue" {
+  export interface GlobalComponents {
+    IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
+    IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
+  }
+}
+
 declare global {
-  const __APP_INFO__: {
-    pkg: {
-      name: string;
-      version: string;
-      dependencies: Recordable<string>;
-      devDependencies: Recordable<string>;
-    };
-    lastBuildTime: string;
-  };
   interface Window {
     // Global vue app instance
     __APP__: App<Element>;

vite.config.ts

@@ -183,6 +183,10 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
     ],
     optimizeDeps: {
       include: [
+        "pinia",
+        "vue-i18n",
+        "lodash-es",
+        "@vueuse/core",
         "element-plus/lib/locale/lang/zh-cn",
         "element-plus/lib/locale/lang/en",
         "vxe-table/lib/locale/lang/zh-CN",

windi.config.ts

@@ -6,7 +6,6 @@ import typography from "windicss/plugin/typography";
 export default defineConfig({
   darkMode: "class",
   attributify: true,
-
   plugins: [typography()],
   theme: {
     extend: {