release: update 3.9.1

chore: update
feat: 添加目录、菜单文字超出显示 Tooltip 文字提示demo
2025-11-03 13:44:47 +08:00 · 2022-12-02 19:32:48 +08:00 · 2022-12-02 18:15:46 +08:00 · 2022-12-02 17:57:51 +08:00 · 2022-12-02 16:46:48 +08:00 · 2022-12-02 11:08:11 +08:00
113 changed files with 1115 additions and 1253 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,27 @@
+# 3.9.1 (2022-12-02)
+
+### 🎫 Feat
+
+- Add `CachingAsyncRoutes` whether to enable dynamic route cache local global configuration, default `true`
+- Add `TooltipEffect` global configuration, you can configure the `effect` attribute of all `el-tooltip` on the platform body, the default `light`, does not affect the business code
+- Add directory, menu text exceeds display `Tooltip` text prompt demo
+
+### 🍏 Perf
+
+- Optimize `initRouter` method, compatible with `sso` scenario
+- Breadcrumb animation style optimization
+
+# 3.9.0 (2022-11-30)
+
+### 🐞 Bug fixes
+
+- Fixed the jitter problem caused by the scroll bar on the page when the text is too long when exiting the full screen
+- Fix some type errors
+
+### 🍏 Perf
+
+- perf: Great optimization of the first screen loading. Compared with the version before `3.9.0`, the first screen requests are reduced by `71`, and the first screen loading resources are reduced by `4.1 MB`
+
 # 3.8.7 (2022-11-28)

 ### 🍏 Perf
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,27 @@
+# 3.9.1 (2022-12-02)
+
+### 🎫 Feat
+
+- Add `CachingAsyncRoutes` whether to enable dynamic route cache local global configuration, default `true`
+- Add `TooltipEffect` global configuration, you can configure the `effect` attribute of all `el-tooltip` on the platform body, the default `light`, does not affect the business code
+- Add directory, menu text exceeds display `Tooltip` text prompt demo
+
+### 🍏 Perf
+
+- Optimize `initRouter` method, compatible with `sso` scenario
+- Breadcrumb animation style optimization
+
+# 3.9.0 (2022-11-30)
+
+### 🐞 Bug fixes
+
+- Fixed the jitter problem caused by the scroll bar on the page when the text is too long when exiting the full screen
+- Fix some type errors
+
+### 🍏 Perf
+
+- perf: Great optimization of the first screen loading. Compared with the version before `3.9.0`, the first screen requests are reduced by `71`, and the first screen loading resources are reduced by `4.1 MB`
+
 # 3.8.7 (2022-11-28)

 ### 🍏 Perf
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,27 @@
+# 3.9.1 (2022-12-02)
+
+### 🎫 Feat
+
+- 添加 `CachingAsyncRoutes` 是否开启动态路由缓存本地的全局配置，默认 `true`
+- 添加 `TooltipEffect` 全局配置，可配置平台主体所有 `el-tooltip` 的 `effect` 属性，默认 `light`，不影响业务代码
+- 添加目录、菜单文字超出显示 `Tooltip` 文字提示演示
+
+### 🍏 Perf
+
+- 优化 `initRouter` 方法，兼容 `sso` 场景
+- 面包屑动画样式优化
+
+# 3.9.0 (2022-11-30)
+
+### 🐞 Bug fixes
+
+- 修复退出全屏时文字过长导致页面出现滚动条后带来的抖动问题
+- 修复一些类型错误
+
+### 🍏 Perf
+
+- perf: 首屏加载大优化，对比 `3.9.0` 之前版本，首屏请求减少 `71` 个，首屏加载资源减少 `4.1 MB`
+
 # 3.8.7 (2022-11-28)

 ### 🍏 Perf
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -4,7 +4,7 @@
 * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
 * 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
 */
-export const include = [
+const include = [
  "qs",
  "mitt",
  "xlsx",
@@ -24,6 +24,7 @@ export const include = [
  "jsbarcode",
  "sortablejs",
  "swiper/vue",
+  "md-editor-v3",
  "@vueuse/core",
  "vue3-danmaku",
  "v-contextmenu",
@@ -31,13 +32,14 @@ export const include = [
  "lodash-unified",
  "@ctrl/tinycolor",
  "china-area-data",
-  "@faker-js/faker",
  "vue-json-pretty",
  "@logicflow/core",
  "@pureadmin/utils",
+  "@wangeditor/editor",
  "responsive-storage",
  "@howdyjs/mouse-menu",
  "@logicflow/extension",
+  "vue-virtual-scroller",
  "element-resize-detector",
  "@amap/amap-jsapi-loader",
  "el-table-infinite-scroll",
@@ -48,3 +50,16 @@ export const include = [
  "xgplayer/es/controls/screenShot",
  "xgplayer/es/controls/playbackRate"
 ];
+
+/**
+ * 在预构建中强制排除的依赖项
+ * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
+ */
+const exclude = [
+  "@iconify-icons/ep",
+  "@iconify-icons/ri",
+  "@iconify-icons/mdi",
+  "@pureadmin/theme/dist/browser-utils"
+];
+
+export { include, exclude };
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -18,8 +18,8 @@ buttons:
  hscloseRightTabs: Close RightTabs
  hscloseOtherTabs: Close OtherTabs
  hscloseAllTabs: Close AllTabs
-  hswholeFullScreen: Whole FullScreen
-  hswholeExitFullScreen: Whole ExitFullScreen
+  hswholeFullScreen: FullScreen
+  hswholeExitFullScreen: ExitFull
  hscontentFullScreen: Content FullScreen
  hscontentExitFullScreen: Content ExitFullScreen
 menus:
@@ -101,6 +101,8 @@ menus:
  hsPureTableBase: Base Usage
  hsPureTableHigh: High Usage
  hsTree: Big Data Tree
+  hsMenuoverflow: Menu Overflow Show Tooltip Text
+  hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
 status:
  hsLoad: Loading...
 login:
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -18,8 +18,8 @@ buttons:
  hscloseRightTabs: 关闭右侧标签页
  hscloseOtherTabs: 关闭其他标签页
  hscloseAllTabs: 关闭全部标签页
-  hswholeFullScreen: 整体页面全屏
-  hswholeExitFullScreen: 整体页面退出全屏
+  hswholeFullScreen: 全屏
+  hswholeExitFullScreen: 退出全屏
  hscontentFullScreen: 内容区全屏
  hscontentExitFullScreen: 内容区退出全屏
 menus:
@@ -101,6 +101,8 @@ menus:
  hsPureTableBase: 基础用法（23个示例）
  hsPureTableHigh: 高级用法（8个示例）
  hsTree: 大数据树业务组件
+  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
+  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
 status:
  hsLoad: 加载中...
 login:
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -2,6 +2,14 @@
 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：管理员角色
@@ -11,7 +19,7 @@ import { system, permission, frame, tabs } from "@/router/enums";
 const systemRouter = {
  path: "/system",
  meta: {
-    icon: "setting",
+    icon: Setting,
    title: "menus.hssysManagement",
    rank: system
  },
@@ -20,7 +28,7 @@ const systemRouter = {
      path: "/system/user/index",
      name: "User",
      meta: {
-        icon: "flUser",
+        icon: FlUser,
        title: "menus.hsUser",
        roles: ["admin"]
      }
@@ -29,7 +37,7 @@ const systemRouter = {
      path: "/system/role/index",
      name: "Role",
      meta: {
-        icon: "role",
+        icon: Role,
        title: "menus.hsRole",
        roles: ["admin"]
      }
@@ -38,7 +46,7 @@ const systemRouter = {
      path: "/system/dept/index",
      name: "Dept",
      meta: {
-        icon: "dept",
+        icon: Dept,
        title: "menus.hsDept",
        roles: ["admin"]
      }
@@ -48,7 +56,7 @@ const systemRouter = {
      component: "/system/dict/index",
      name: "Dict",
      meta: {
-        icon: "dict",
+        icon: Dict,
        title: "menus.hsDict",
        keepAlive: true,
        roles: ["admin"]
@@ -61,7 +69,7 @@ const permissionRouter = {
  path: "/permission",
  meta: {
    title: "menus.permission",
-    icon: "lollipop",
+    icon: Lollipop,
    rank: permission
  },
  children: [
@@ -88,7 +96,7 @@ const permissionRouter = {
 const frameRouter = {
  path: "/iframe",
  meta: {
-    icon: "monitor",
+    icon: Monitor,
    title: "menus.hsExternalPage",
    rank: frame
  },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "3.8.7",
+  "version": "3.9.1",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -35,8 +35,8 @@
    "@logicflow/core": "^1.1.30",
    "@logicflow/extension": "^1.1.30",
    "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.8.0",
-    "@pureadmin/utils": "^1.6.7",
+    "@pureadmin/table": "^1.8.1",
+    "@pureadmin/utils": "^1.7.1",
    "@vueuse/core": "^9.6.0",
    "@vueuse/motion": "2.0.0-beta.12",
    "@wangeditor/editor": "^5.1.21",
@@ -48,7 +48,7 @@
    "dayjs": "^1.11.6",
    "echarts": "^5.4.0",
    "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.2.25",
+    "element-plus": "^2.2.26",
    "element-resize-detector": "^1.2.4",
    "intro.js": "^6.0.0",
    "js-cookie": "^3.0.1",
@@ -56,6 +56,7 @@
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "lodash-unified": "^1.0.2",
+    "md-editor-v3": "^2.4.2",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
@@ -85,15 +86,9 @@
  "devDependencies": {
    "@commitlint/cli": "13.1.0",
    "@commitlint/config-conventional": "13.1.0",
-    "@faker-js/faker": "^7.5.0",
-    "@iconify-icons/carbon": "^1.2.8",
    "@iconify-icons/ep": "^1.2.7",
-    "@iconify-icons/fa": "^1.2.3",
-    "@iconify-icons/fa-solid": "^1.2.3",
-    "@iconify-icons/fluent": "^1.2.16",
    "@iconify-icons/mdi": "^1.2.8",
    "@iconify-icons/ri": "^1.2.3",
-    "@iconify-icons/uil": "^1.2.2",
    "@iconify/vue": "^4.0.0",
    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
    "@pureadmin/theme": "^2.4.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "3.8.7",
+  "Version": "3.9.1",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
@@ -17,6 +17,8 @@
  "ShowLogo": true,
  "ShowModel": "smart",
  "MenuArrowIconNoTransition": true,
+  "CachingAsyncRoutes": true,
+  "TooltipEffect": "light",
  "MapConfigure": {
    "amapKey": "97b3248d1553172e81f168cf94ea667e",
    "options": {
--- a/src/assets/login/illustration4.svg
+++ b/src/assets/login/illustration4.svg
--- a/src/assets/login/illustration0.svg
+++ b/src/assets/login/illustration0.svg
--- a/src/assets/login/illustration1.svg
+++ b/src/assets/login/illustration1.svg
--- a/src/assets/login/illustration2.svg
+++ b/src/assets/login/illustration2.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="380" data-name="Layer 1" viewBox="0 0 896 529.113"><path fill="#3f3d56" d="M674.067 437.34s-26.377 9.895-38.806 32.944-6.201 50.525-6.201 50.525 26.378-9.895 38.806-32.944 6.201-50.524 6.201-50.524Z"/><path fill="#5392f0" d="M709.5 471.71s-8.642 26.813-31.08 40.313-50.177 8.573-50.177 8.573 8.642-26.814 31.08-40.314 50.177-8.573 50.177-8.573Z"/><path fill="#2f2e41" d="M0 527.113h896v2H0zM361.872 435.088a95.444 95.444 0 0 1-35.748-14.447l1.182-1.613a93.363 93.363 0 0 0 34.999 14.105c18.932 3.402 47.26 1.732 74.707-25.527 53.414-53.048 104.393-58.39 104.902-58.438l.186 1.992c-.501.047-50.768 5.317-103.678 57.866-21.613 21.464-43.792 27.402-61.718 27.402a83.5 83.5 0 0 1-14.832-1.34Z"/><circle cx="515.153" cy="381.113" r="12" fill="#2f2e41"/><circle cx="430.153" cy="437.113" r="12" fill="#2f2e41"/><path fill="#3f3d56" d="M683.5 528.113s-17.462-5.413-52.261-10.842l.761-10.658c6-60-34-150-34-150a401.561 401.561 0 0 1 21.47 139.024c-5.338-9.312-15.65-19.358-35.47-25.524 0 0 25.778 22.106 33.16 45.102a997.84 997.84 0 0 0-102.023-8.216L524 486.613l-17 17s-7-51-22-53l11 50s-13-10-16-9l7.397 14.795c-49.819-.517-109.084 1.735-177.765 8.952L318 496.113l-17 17s-7-51-22-53l11 50s-13-10-16-9l8.643 17.286q-33.667 4.004-70.143 9.714Z"/><path fill="#a0616a" d="M407.648 44.491c-10.9 11.748 17.598 40.26 17.598 40.26s-57.707 9.73-53.128 9.14 2.206-49.131 2.206-49.131 44.224-12.017 33.324-.269Z"/><path fill="#2f2e41" d="m447.812 170.222-50.139 25.614-27.23 15.606s-32.098 40.432-38.086 64.393 25.93 68.247 29.543 72.823a54.36 54.36 0 0 1 4.99 7.423c1.247 1.856 12.029-.54 23.803-3.065s-1.563-19.964-1.563-19.964-15.027-38.395-16.147-39.26c-1.045-.806-4.6-7.446-2.043-10.352a25.95 25.95 0 0 0 5.445-8.898 30.09 30.09 0 0 1 4.187-7.942s45.361-36.836 59.528-49.378 51.83-4.658 51.83-4.658-17.782 68.2-22.23 72.806-4.93 8.7-2.916 16.507 28.282.391 28.282.391l9.7-26.455s15.749-34.293 24.3-69.675c4.275-17.691-3.889-28.235-13.121-34.356a41.39 41.39 0 0 0-30.03-5.977l-46.349 8.13 32.147-13.849Z"/><path fill="#a0616a" d="m262.878 104.304-59.854-18.506s-24.18-31.167-12.789-36.667 25.652 26.944 25.652 26.944l41.686 2.698ZM514.494 71.9l53.212-33.068S583.2 2.556 570.787.122 552.8 32.685 552.8 32.685l-39.642 13.171Z"/><path fill="#5392f0" d="m524.453 34.513 1.014 39.192L435.78 89.73c13.192 28.224 9.84 60.346 43.047 74.425L366.903 218.9c4.987-43.038-15.818-75.456-35.263-115.759-23.686-8.586-51.196-2.29-80.337 10.346l-5.237-40.664 123.879-8.896 20.348 7.78 21.819-9.177c32.067-9.528 78.109-27.641 112.341-28.017Z"/><path fill="#2f2e41" d="M468.64 300.63c-2.72 2.367-5.252 21.85-5.35 28.92s9.212 8.897 14.299 9.25 4.478 3.456 7.837 6.048 14.396 2.18 28.89-2.712-9.753-20.926-11.864-21.662-11-22.782-11-22.782-20.092.571-22.812 2.938ZM389.368 345.12c3.23 1.6 10.617 19.806 12.503 26.621s-6.657 10.94-11.489 12.57-3.456 4.479-6.048 7.837-13.375 5.756-28.635 4.696 4.133-22.714 5.988-23.96 4.87-24.826 4.87-24.826 19.58-4.538 22.811-2.938Z"/><circle cx="389.471" cy="35.429" r="23.996" fill="#a0616a"/><path fill="#2f2e41" d="M361.734 33.022a22.827 22.827 0 0 1-.833-18.593c2.359-5.815 7.591-11.655 18.873-13.4 24.614-3.805 37.712 13.436 37.024 19.075s-3.993 19.27-3.993 19.27 1.476-12.906-4.858-13.362-30.902-2.378-37.123 4.145a14.233 14.233 0 0 0-3.71 13.83Z"/></svg>
--- a/src/assets/login/illustration3.svg
+++ b/src/assets/login/illustration3.svg
--- a/src/assets/login/illustration5.svg
+++ b/src/assets/login/illustration5.svg
--- a/src/assets/login/illustration6.svg
+++ b/src/assets/login/illustration6.svg
--- a/src/components/ReIcon/index.ts
+++ b/src/components/ReIcon/index.ts
@@ -1,15 +1,12 @@
 import iconifyIconOffline from "./src/iconifyIconOffline";
 import iconifyIconOnline from "./src/iconifyIconOnline";
-import iconSelect from "./src/Select.vue";
 import fontIcon from "./src/iconfont";

 /** 本地图标组件 */
 const IconifyIconOffline = iconifyIconOffline;
 /** 在线图标组件 */
 const IconifyIconOnline = iconifyIconOnline;
-/** 图标选择器组件 */
-const IconSelect = iconSelect;
 /** iconfont组件 */
 const FontIcon = fontIcon;

-export { IconifyIconOffline, IconifyIconOnline, IconSelect, FontIcon };
+export { IconifyIconOffline, IconifyIconOnline, FontIcon };
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cloneDeep } from "lodash-unified";
-import { ref, computed, CSSProperties, toRef, watch } from "vue";
 import { IconJson } from "@/components/ReIcon/data";
+import { ref, computed, CSSProperties, toRef, watch } from "vue";
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;

 defineOptions({
--- a/src/components/ReIcon/src/hooks.ts
+++ b/src/components/ReIcon/src/hooks.ts
@@ -34,6 +34,16 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
  } else if (typeof icon === "function" || typeof icon?.render === "function") {
    // svg
    return icon;
+  } else if (typeof icon === "object") {
+    return defineComponent({
+      name: "OfflineIcon",
+      render() {
+        return h(IconifyIconOffline, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
  } else {
    // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
    return defineComponent({
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ b/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -1,192 +1,22 @@
 import { h, defineComponent } from "vue";
 import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";

-// element-plus icon
-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 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 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 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";
-import Rank from "@iconify-icons/ep/rank";
-import VideoPlay from "@iconify-icons/ep/video-play";
-import Monitor from "@iconify-icons/ep/monitor";
-import Search from "@iconify-icons/ep/search";
-import Refresh from "@iconify-icons/ep/refresh";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Delete from "@iconify-icons/ep/delete";
-import More from "@iconify-icons/ep/more-filled";
-import EpArrowDown from "@iconify-icons/ep/arrow-down";
-import ArrowUp from "@iconify-icons/ep/arrow-up";
-import ArrowRight from "@iconify-icons/ep/arrow-right";
-import ArrowLeft from "@iconify-icons/ep/arrow-left";
-addIcon("check", Check);
-addIcon("menu", Menu);
-addIcon("home-filled", HomeFilled);
-addIcon("set-up", SetUp);
-addIcon("edit", Edit);
-addIcon("lollipop", Lollipop);
-addIcon("link", Link);
-addIcon("position", Position);
-addIcon("histogram", Histogram);
-addIcon("refresh-right", RefreshRight);
-addIcon("close", Close);
-addIcon("close-bold", CloseBold);
-addIcon("bell", Bell);
-addIcon("guide", Guide);
-addIcon("iphone", Iphone);
-addIcon("location", Location);
-addIcon("tickets", Tickets);
-addIcon("office-building", OfficeBuilding);
-addIcon("notebook", Notebook);
-addIcon("video-play", VideoPlay);
-addIcon("rank", Rank);
-addIcon("monitor", Monitor);
-addIcon("search", Search);
-addIcon("refresh", Refresh);
-addIcon("edits", EditPen);
-addIcon("delete", Delete);
-addIcon("more", More);
-addIcon("ep-arrow-down", EpArrowDown);
-addIcon("ep-arrow-up", ArrowUp);
-addIcon("ep-arrow-right", ArrowRight);
-addIcon("ep-arrow-left", ArrowLeft);
-
-// remixicon
-import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
-import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import NodeTree from "@iconify-icons/ri/node-tree";
-import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import QuestionLine from "@iconify-icons/ri/question-line";
-import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-import InformationLine from "@iconify-icons/ri/information-line";
-import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
-import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
-import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
-import AddFill from "@iconify-icons/ri/add-circle-line";
-import AddLine from "@iconify-icons/ri/add-line";
-import ListCheck from "@iconify-icons/ri/list-check";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
-import Database from "@iconify-icons/ri/database-2-line";
-import Dict from "@iconify-icons/ri/git-repository-line";
-import Card from "@iconify-icons/ri/bank-card-line";
-import Reset from "@iconify-icons/ri/restart-line";
-import Dept from "@iconify-icons/ri/git-branch-line";
-import Password from "@iconify-icons/ri/lock-password-line";
-import Ppt from "@iconify-icons/ri/file-ppt-2-line";
-import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
-import User from "@iconify-icons/ri/user-3-fill";
-import Lock from "@iconify-icons/ri/lock-fill";
-import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
-import MenuFold from "@iconify-icons/ri/menu-fold-fill";
-import Setting from "@iconify-icons/ri/settings-3-line";
-import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
-import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
-import CloseRightTags from "@iconify-icons/ri/text-direction-l";
-import CloseOtherTags from "@iconify-icons/ri/text-spacing";
-import CloseAllTags from "@iconify-icons/ri/subtract-line";
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
-addIcon("arrow-right-s-line", ArrowRightSLine);
-addIcon("arrow-left-s-line", ArrowLeftSLine);
-addIcon("logout-circle-r-line", LogoutCircleRLine);
-addIcon("node-tree", NodeTree);
-addIcon("ubuntu-fill", UbuntuFill);
-addIcon("question-line", QuestionLine);
-addIcon("checkbox-circle-line", CheckboxCircleLine);
-addIcon("information-line", InformationLine);
-addIcon("close-circle-line", CloseCircleLine);
-addIcon("arrow-up-line", ArrowUpLine);
-addIcon("arrow-down-line", ArrowDownLine);
-addIcon("bookmark-2-line", Bookmark2Line);
-addIcon("add", AddFill);
-addIcon("add-line", AddLine);
-addIcon("list-check", ListCheck);
-addIcon("more-vertical", More2Fill);
-addIcon("database", Database);
-addIcon("dict", Dict);
-addIcon("card", Card);
-addIcon("reset", Reset);
-addIcon("dept", Dept);
-addIcon("password", Password);
-addIcon("ppt", Ppt);
-addIcon("terminal-window-line", TerminalWindowLine);
-addIcon("user", User);
-addIcon("lock", Lock);
-addIcon("menu-unfold", MenuUnfold);
-addIcon("menu-fold", MenuFold);
-addIcon("setting", Setting);
-addIcon("arrow-down", ArrowDown);
-addIcon("close-left-tags", CloseLeftTags);
-addIcon("close-right-tags", CloseRightTags);
-addIcon("close-other-tags", CloseOtherTags);
-addIcon("close-all-tags", CloseAllTags);
-addIcon("fullscreen", Fullscreen);
-addIcon("exit-fullscreen", ExitFullscreen);
-
-// Font Awesome 4
-import FaUser from "@iconify-icons/fa/user";
-import FaLock from "@iconify-icons/fa/lock";
-import FaSignOut from "@iconify-icons/fa/sign-out";
-addIcon("fa-user", FaUser);
-addIcon("fa-lock", FaLock);
-addIcon("fa-sign-out", FaSignOut);
-
-// Unicons
-import Import from "@iconify-icons/uil/import";
-import Export from "@iconify-icons/uil/export";
-import ArrowsShrinkV from "@iconify-icons/uil/arrows-shrink-v";
-addIcon("import", Import);
-addIcon("export", Export);
-addIcon("density", ArrowsShrinkV);
-
-// fluent
-import Role from "@iconify-icons/fluent/people-swap-28-filled";
-import FlUser from "@iconify-icons/fluent/person-12-filled";
-addIcon("role", Role);
-addIcon("flUser", FlUser);
-
-// Material Design Icons
-import Expand from "@iconify-icons/mdi/arrow-expand-down";
-import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
-addIcon("expand", Expand);
-addIcon("unExpand", UnExpand);
-
-// carbon
-import LocationCompany from "@iconify-icons/carbon/location-company";
-addIcon("location-company", LocationCompany);
-
 // Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
  name: "IconifyIconOffline",
  components: { IconifyIcon },
  props: {
    icon: {
-      type: String,
-      default: ""
+      default: null
    }
  },
  render() {
+    if (typeof this.icon === "object") addIcon(this.icon, this.icon);
    const attrs = this.$attrs;
    return h(
      IconifyIcon,
      {
-        icon: `${this.icon}`,
+        icon: this.icon,
        style: attrs?.style
          ? Object.assign(attrs.style, { outline: "none" })
          : { outline: "none" },
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -13,6 +13,7 @@ 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;
@@ -247,7 +248,7 @@ export default defineComponent({
              <div class="absolute top-[50%] left-[50%] font-bold">
                <IconifyIconOffline
                  class="cursor-pointer"
-                  icon="refresh-right"
+                  icon={RefreshRight}
                  width="30"
                  color="var(--el-color-primary)"
                />
--- a/src/components/ReTable/src/bar.tsx
+++ b/src/components/ReTable/src/bar.tsx
@@ -1,6 +1,12 @@
 import { defineComponent, ref, computed, PropType } from "vue";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
 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="
@@ -105,7 +111,7 @@ export default defineComponent({
      reference: () => (
        <IconifyIconOffline
          class="cursor-pointer"
-          icon="setting"
+          icon={Setting}
          width="16"
          color="text_color_regular"
          onMouseover={e => (buttonRef.value = e.currentTarget)}
@@ -135,7 +141,7 @@ export default defineComponent({
                  >
                    <IconifyIconOffline
                      class="cursor-pointer"
-                      icon={isExpandAll.value ? "unExpand" : "expand"}
+                      icon={isExpandAll.value ? UnExpand : Expand}
                      width="16"
                      color="text_color_regular"
                      onClick={() => onExpand()}
@@ -147,7 +153,7 @@ export default defineComponent({
              <el-tooltip effect="dark" content="刷新" placement="top">
                <IconifyIconOffline
                  class="cursor-pointer"
-                  icon="refresh-right"
+                  icon={RefreshRight}
                  width="16"
                  color="text_color_regular"
                  onClick={() => emit("refresh")}
@@ -159,7 +165,7 @@ export default defineComponent({
                <el-dropdown v-slots={dropdown} trigger="click">
                  <IconifyIconOffline
                    class="cursor-pointer"
-                    icon="density"
+                    icon={ArrowCollapse}
                    width="16"
                    color="text_color_regular"
                  />
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -7,6 +7,9 @@ import Breadcrumb from "./sidebar/breadCrumb.vue";
 import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 import globalization from "@/assets/svg/globalization.svg?component";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Check from "@iconify-icons/ep/check";

 const {
  layout,
@@ -62,7 +65,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
              <IconifyIconOffline
                class="check-zh"
                v-show="locale === 'zh'"
-                icon="check"
+                :icon="Check"
              />
              简体中文
            </el-dropdown-item>
@@ -72,7 +75,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
              </span>
              English
            </el-dropdown-item>
@@ -92,7 +95,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
          <el-dropdown-menu class="logout">
            <el-dropdown-item @click="logout">
              <IconifyIconOffline
-                icon="logout-circle-r-line"
+                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
              {{ t("buttons.hsLoginOut") }}
@@ -105,7 +108,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
        :title="t('buttons.hssystemSet')"
        @click="onPanel"
      >
-        <IconifyIconOffline icon="setting" />
+        <IconifyIconOffline :icon="Setting" />
      </span>
    </div>
  </div>
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
+import Bell from "@iconify-icons/ep/bell";

 const noticesNum = ref(0);
 const notices = ref(noticesData);
@@ -15,7 +16,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
    <span class="dropdown-badge navbar-bg-hover select-none">
      <el-badge :value="noticesNum" :max="99">
        <span class="header-notice-icon">
-          <IconifyIconOffline icon="bell" />
+          <IconifyIconOffline :icon="Bell" />
        </span>
      </el-badge>
    </span>
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ListItem } from "./data";
 import { ref, PropType, nextTick } from "vue";
+import { useNav } from "@/layout/hooks/useNav";

 const props = defineProps({
  noticeItem: {
@@ -13,6 +14,7 @@ const titleRef = ref(null);
 const titleTooltip = ref(false);
 const descriptionRef = ref(null);
 const descriptionTooltip = ref(false);
+const { tooltipEffect } = useNav();

 function hoverTitle() {
  nextTick(() => {
@@ -57,6 +59,7 @@ function hoverDescription(event, description) {
      <div class="notice-text-title text-[#000000d9] dark:text-white">
        <el-tooltip
          popper-class="notice-title-popper"
+          :effect="tooltipEffect"
          :disabled="!titleTooltip"
          :content="props.noticeItem.title"
          placement="top-start"
@@ -81,6 +84,7 @@ function hoverDescription(event, description) {

      <el-tooltip
        popper-class="notice-title-popper"
+        :effect="tooltipEffect"
        :disabled="!descriptionTooltip"
        :content="props.noticeItem.description"
        placement="top-start"
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { emitter } from "@/utils/mitt";
+import Close from "@iconify-icons/ep/close";

 const show = ref<Boolean>(false);
 const target = ref(null);
@@ -25,7 +26,7 @@ emitter.on("openPanel", () => {
          <span title="关闭配置">
            <IconifyIconOffline
              class="dark:text-white"
-              icon="close"
+              :icon="Close"
              @click="show = !show"
            />
          </span>
--- a/src/layout/components/search/components/SearchFooter.vue
+++ b/src/layout/components/search/components/SearchFooter.vue
@@ -5,8 +5,8 @@
      确认
    </span>
    <span class="search-footer-item">
-      <IconifyIconOffline icon="arrow-up-line" class="icon" />
-      <IconifyIconOffline icon="arrow-down-line" class="icon" />
+      <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
+      <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
      切换
    </span>
    <span class="search-footer-item">
@@ -17,6 +17,8 @@
 </template>

 <script setup lang="ts">
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
 import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 </script>
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -9,6 +9,7 @@ import { transformI18n } from "@/plugins/i18n";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { ref, watch, computed, nextTick, shallowRef } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import Search from "@iconify-icons/ep/search";

 interface Props {
  /** 弹窗显隐 */
@@ -148,7 +149,7 @@ onKeyStroke("ArrowDown", handleDown);
    >
      <template #prefix>
        <span class="el-input__icon">
-          <IconifyIconOffline icon="search" />
+          <IconifyIconOffline :icon="Search" />
        </span>
      </template>
    </el-input>
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
+import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";

 const { t } = useI18n();

@@ -67,7 +68,7 @@ function handleTo() {
        @click="handleTo"
        @mouseenter="handleMouse(item)"
      >
-        <component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
+        <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
        <span class="result-item-title">{{ t(item.meta?.title) }}</span>
        <enterOutlined />
      </div>
--- a/src/layout/components/search/index.vue
+++ b/src/layout/components/search/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { SearchModal } from "./components";
 import { useBoolean } from "../../hooks/useBoolean";
+import Search from "@iconify-icons/ep/search";
+
 const { bool: show, toggle } = useBoolean();
 function handleSearch() {
  toggle();
@@ -12,7 +14,7 @@ function handleSearch() {
    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
    @click="handleSearch"
  >
-    <IconifyIconOffline icon="search" />
+    <IconifyIconOffline :icon="Search" />
  </div>
  <SearchModal v-model:value="show" />
 </template>
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import {
-  ref,
-  unref,
-  watch,
-  reactive,
-  computed,
-  nextTick,
-  useCssModule
-} from "vue";
+  useDark,
+  debounce,
+  useGlobal,
+  storageLocal,
+  storageSession
+} from "@pureadmin/utils";
 import { getConfig } from "@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
@@ -17,24 +15,19 @@ import { removeToken } from "@/utils/auth";
 import { routerArrays } from "@/layout/types";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
-import {
-  useDark,
-  debounce,
-  useGlobal,
-  storageLocal,
-  storageSession
-} from "@pureadmin/utils";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { ref, unref, watch, reactive, computed, nextTick } from "vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
+import Check from "@iconify-icons/ep/check";
+import Logout from "@iconify-icons/ri/logout-circle-r-line";

 const router = useRouter();
-const { device } = useNav();
 const { isDark } = useDark();
-const { isSelect } = useCssModule();
+const { device, tooltipEffect } = useNav();
 const { $storage } = useGlobal<GlobalPropertiesApi>();

 const mixRef = ref();
@@ -42,7 +35,6 @@ const verticalRef = ref();
 const horizontalRef = ref();

 const {
-  body,
  dataTheme,
  layoutTheme,
  themeColors,
@@ -160,32 +152,10 @@ function logoChange() {

 function setFalse(Doms): any {
  Doms.forEach(v => {
-    toggleClass(false, isSelect, unref(v));
+    toggleClass(false, "is-select", unref(v));
  });
 }

-watch($storage, ({ layout }) => {
-  /* 设置wangeditorV5主题色 */
-  body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
-  switch (layout["layout"]) {
-    case "vertical":
-      toggleClass(true, isSelect, unref(verticalRef));
-      debounce(setFalse([horizontalRef]), 50);
-      debounce(setFalse([mixRef]), 50);
-      break;
-    case "horizontal":
-      toggleClass(true, isSelect, unref(horizontalRef));
-      debounce(setFalse([verticalRef]), 50);
-      debounce(setFalse([mixRef]), 50);
-      break;
-    case "mix":
-      toggleClass(true, isSelect, unref(mixRef));
-      debounce(setFalse([verticalRef]), 50);
-      debounce(setFalse([horizontalRef]), 50);
-      break;
-  }
-});
-
 /** 主题色 激活选择项 */
 const getThemeColor = computed(() => {
  return current => {
@@ -228,6 +198,26 @@ nextTick(() => {
  settings.tabsVal && tagsChange();
  dataThemeChange();
 });
+
+watch($storage, ({ layout }) => {
+  switch (layout["layout"]) {
+    case "vertical":
+      toggleClass(true, "is-select", unref(verticalRef));
+      debounce(setFalse([horizontalRef]), 50);
+      debounce(setFalse([mixRef]), 50);
+      break;
+    case "horizontal":
+      toggleClass(true, "is-select", unref(horizontalRef));
+      debounce(setFalse([verticalRef]), 50);
+      debounce(setFalse([mixRef]), 50);
+      break;
+    case "mix":
+      toggleClass(true, "is-select", unref(mixRef));
+      debounce(setFalse([verticalRef]), 50);
+      debounce(setFalse([horizontalRef]), 50);
+      break;
+  }
+});
 </script>

 <template>
@@ -244,9 +234,15 @@ nextTick(() => {

    <el-divider>导航栏模式</el-divider>
    <ul class="pure-theme">
-      <el-tooltip class="item" content="左侧模式" placement="bottom">
+      <el-tooltip
+        :effect="tooltipEffect"
+        class="item"
+        content="左侧模式"
+        placement="bottom"
+        popper-class="pure-tooltip"
+      >
        <li
-          :class="layoutTheme.layout === 'vertical' ? $style.isSelect : ''"
+          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
          ref="verticalRef"
          @click="setLayoutModel('vertical')"
        >
@@ -257,12 +253,14 @@ nextTick(() => {

      <el-tooltip
        v-if="device !== 'mobile'"
+        :effect="tooltipEffect"
        class="item"
        content="顶部模式"
        placement="bottom"
+        popper-class="pure-tooltip"
      >
        <li
-          :class="layoutTheme.layout === 'horizontal' ? $style.isSelect : ''"
+          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
          ref="horizontalRef"
          @click="setLayoutModel('horizontal')"
        >
@@ -273,12 +271,14 @@ nextTick(() => {

      <el-tooltip
        v-if="device !== 'mobile'"
+        :effect="tooltipEffect"
        class="item"
        content="混合模式"
        placement="bottom"
+        popper-class="pure-tooltip"
      >
        <li
-          :class="layoutTheme.layout === 'mix' ? $style.isSelect : ''"
+          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
          ref="mixRef"
          @click="setLayoutModel('mix')"
        >
@@ -302,7 +302,7 @@ nextTick(() => {
          :size="17"
          :color="getThemeColor(item.themeColor)"
        >
-          <IconifyIconOffline icon="check" />
+          <IconifyIconOffline :icon="Check" />
        </el-icon>
      </li>
    </ul>
@@ -383,7 +383,7 @@ nextTick(() => {
      @click="onReset"
    >
      <IconifyIconOffline
-        icon="fa-sign-out"
+        :icon="Logout"
        width="15"
        height="15"
        style="margin-right: 4px"
@@ -393,13 +393,16 @@ nextTick(() => {
  </panel>
 </template>

-<style scoped module>
-.isSelect {
+<style lang="scss" scoped>
+:deep(.el-divider__text) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.is-select {
  border: 2px solid var(--el-color-primary);
 }
-</style>

-<style lang="scss" scoped>
 .setting {
  width: 100%;

@@ -411,11 +414,6 @@ nextTick(() => {
  }
 }

-:deep(.el-divider__text) {
-  font-size: 16px;
-  font-weight: 700;
-}
-
 .pure-datatheme {
  width: 100%;
  height: 50px;
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -97,8 +97,12 @@ watch(

 <template>
  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
-    <transition-group appear name="breadcrumb">
-      <el-breadcrumb-item v-for="item in levelList" :key="item.path">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item
+        class="!inline !items-stretch"
+        v-for="item in levelList"
+        :key="item.path"
+      >
        <a @click.prevent="handleLink(item)">
          {{ transformI18n(item.meta.title) }}
        </a>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -7,6 +7,9 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import globalization from "@/assets/svg/globalization.svg?component";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Check from "@iconify-icons/ep/check";

 const menuRef = ref();

@@ -76,7 +79,7 @@ watch(
              @click="translationCh"
            >
              <span class="check-zh" v-show="locale === 'zh'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
              </span>
              简体中文
            </el-dropdown-item>
@@ -86,7 +89,7 @@ watch(
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
              </span>
              English
            </el-dropdown-item>
@@ -106,7 +109,7 @@ watch(
          <el-dropdown-menu class="logout">
            <el-dropdown-item @click="logout">
              <IconifyIconOffline
-                icon="logout-circle-r-line"
+                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
              {{ t("buttons.hsLoginOut") }}
@@ -119,7 +122,7 @@ watch(
        :title="t('buttons.hssystemSet')"
        @click="onPanel"
      >
-        <IconifyIconOffline icon="setting" />
+        <IconifyIconOffline :icon="Setting" />
      </span>
    </div>
  </div>
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { useDark } from "@pureadmin/utils";
+import { ref } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";

 interface Props {
  isActive: boolean;
@@ -8,7 +11,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
  isActive: false
 });
-const { isDark } = useDark();
+
+const visible = ref(false);
+const { tooltipEffect } = useNav();

 const emit = defineEmits<{
  (e: "toggleClick"): void;
@@ -23,13 +28,16 @@ const toggleClick = () => {
  <div class="container">
    <el-tooltip
      placement="right"
-      :effect="isDark ? 'dark' : 'light'"
+      :visible="visible"
+      :effect="tooltipEffect"
      :content="props.isActive ? '点击折叠' : '点击展开'"
    >
      <IconifyIconOffline
-        :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
+        :icon="props.isActive ? MenuFold : MenuUnfold"
        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
        @click="toggleClick"
+        @mouseenter="visible = true"
+        @mouseleave="visible = false"
      />
    </el-tooltip>
  </div>
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -9,6 +9,9 @@ import { getParentPaths, findRouteByPath } from "@/router/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import globalization from "@/assets/svg/globalization.svg?component";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Check from "@iconify-icons/ep/check";

 const menuRef = ref();
 const defaultActive = ref(null);
@@ -108,7 +111,7 @@ watch(
              @click="translationCh"
            >
              <span class="check-zh" v-show="locale === 'zh'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
              </span>
              简体中文
            </el-dropdown-item>
@@ -118,7 +121,7 @@ watch(
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
              </span>
              English
            </el-dropdown-item>
@@ -138,7 +141,7 @@ watch(
          <el-dropdown-menu class="logout">
            <el-dropdown-item @click="logout">
              <IconifyIconOffline
-                icon="logout-circle-r-line"
+                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
              {{ t("buttons.hsLoginOut") }}
@@ -151,7 +154,7 @@ watch(
        :title="t('buttons.hssystemSet')"
        @click="onPanel"
      >
-        <IconifyIconOffline icon="setting" />
+        <IconifyIconOffline :icon="Setting" />
      </span>
    </div>
  </div>
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -7,7 +7,12 @@ import { transformI18n } from "@/plugins/i18n";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";

-const { layout, isCollapse } = useNav();
+import ArrowUp from "@iconify-icons/ep/arrow-up";
+import EpArrowDown from "@iconify-icons/ep/arrow-down";
+import ArrowLeft from "@iconify-icons/ep/arrow-left";
+import ArrowRight from "@iconify-icons/ep/arrow-right";
+
+const { layout, isCollapse, tooltipEffect } = useNav();

 const props = defineProps({
  item: {
@@ -78,7 +83,13 @@ const getSpanStyle = computed(() => {
 });

 const expandCloseIcon = computed(() => {
-  return getConfig()?.MenuArrowIconNoTransition ? "expand-close-icon" : "";
+  if (!getConfig()?.MenuArrowIconNoTransition) return "";
+  return {
+    "expand-close-icon": useRenderIcon(EpArrowDown),
+    "expand-open-icon": useRenderIcon(ArrowUp),
+    "collapse-close-icon": useRenderIcon(ArrowRight),
+    "collapse-open-icon": useRenderIcon(ArrowLeft)
+  };
 });

 const onlyOneChild: childrenType = ref(null);
@@ -190,8 +201,9 @@ function resolvePath(routePath) {
          <el-tooltip
            v-else
            placement="top"
+            :effect="tooltipEffect"
            :offset="-10"
-            :disabled="!onlyOneChild.showTooltip"
+            :disabled="!isCollapse && !onlyOneChild.showTooltip"
          >
            <template #content>
              {{ transformI18n(onlyOneChild.meta.title) }}
@@ -220,11 +232,8 @@ function resolvePath(routePath) {
  <el-sub-menu
    v-else
    ref="subMenu"
+    v-bind="expandCloseIcon"
    :index="resolvePath(props.item.path)"
-    v-bind:[expandCloseIcon]="useRenderIcon('ep-arrow-down')"
-    :expand-open-icon="useRenderIcon('ep-arrow-up')"
-    :collapse-close-icon="useRenderIcon('ep-arrow-right')"
-    :collapse-open-icon="useRenderIcon('ep-arrow-left')"
  >
    <template #title>
      <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
@@ -238,8 +247,9 @@ function resolvePath(routePath) {
      <el-tooltip
        v-else
        placement="top"
+        :effect="tooltipEffect"
        :offset="-10"
-        :disabled="!isCollapse || !props.item.showTooltip"
+        :disabled="!props.item.showTooltip"
      >
        <template #content>
          {{ transformI18n(props.item.meta.title) }}
--- a/src/layout/components/sidebar/topCollapse.vue
+++ b/src/layout/components/sidebar/topCollapse.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
+
 interface Props {
  isActive: boolean;
 }
@@ -23,7 +26,7 @@ const toggleClick = () => {
    @click="toggleClick"
  >
    <IconifyIconOffline
-      :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
+      :icon="props.isActive ? MenuFold : MenuUnfold"
      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
    />
  </div>
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -11,6 +11,13 @@ import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";

+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import CloseBold from "@iconify-icons/ep/close-bold";
+
 const {
  route,
  router,
@@ -284,10 +291,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      toggle();
      setTimeout(() => {
        if (isFullscreen.value) {
-          tagsViews[6].icon = "exit-fullscreen";
+          tagsViews[6].icon = ExitFullscreen;
          tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
        } else {
-          tagsViews[6].icon = "fullscreen";
+          tagsViews[6].icon = Fullscreen;
          tagsViews[6].text = $t("buttons.hswholeFullScreen");
        }
      }, 100);
@@ -297,10 +304,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      onContentFullScreen();
      setTimeout(() => {
        if (pureSetting.hiddenSideBar) {
-          tagsViews[7].icon = "exit-fullscreen";
+          tagsViews[7].icon = ExitFullscreen;
          tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
        } else {
-          tagsViews[7].icon = "fullscreen";
+          tagsViews[7].icon = Fullscreen;
          tagsViews[7].text = $t("buttons.hscontentFullScreen");
        }
      }, 100);
@@ -496,7 +503,7 @@ onMounted(() => {
 <template>
  <div ref="containerDom" class="tags-view" v-if="!showTags">
    <span v-show="isShowArrow" class="arrow-left">
-      <IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
+      <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
    </span>
    <div ref="scrollbarDom" class="scroll-container">
      <div class="tab select-none" ref="tabDom" :style="getTabStyle">
@@ -530,7 +537,7 @@ onMounted(() => {
            class="el-icon-close"
            @click.stop="deleteMenu(item)"
          >
-            <IconifyIconOffline icon="close-bold" />
+            <IconifyIconOffline :icon="CloseBold" />
          </span>
          <div
            :ref="'schedule' + index"
@@ -541,10 +548,7 @@ onMounted(() => {
      </div>
    </div>
    <span v-show="isShowArrow" class="arrow-right">
-      <IconifyIconOffline
-        icon="arrow-right-s-line"
-        @click="handleScroll(-200)"
-      />
+      <IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
    </span>
    <!-- 右键菜单按钮 -->
    <transition name="el-zoom-in-top">
@@ -573,7 +577,7 @@ onMounted(() => {
      @command="handleCommand"
    >
      <span class="arrow-down">
-        <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
+        <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -8,7 +8,6 @@ import { useGlobal } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import { router, remainingPaths } from "@/router";
 import { useAppStoreHook } from "@/store/modules/app";
-import { i18nChangeLanguage } from "@wangeditor/editor";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -19,6 +18,8 @@ export function useNav() {
  const pureApp = useAppStoreHook();
  const routers = useRouter().options.routes;
  const { wholeMenus } = storeToRefs(usePermissionStoreHook());
+  /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
+  const tooltipEffect = getConfig()?.TooltipEffect ?? "light";

  /** 用户名 */
  const username = computed(() => {
@@ -136,15 +137,6 @@ export function useNav() {
    return remainingPaths.includes(path);
  }

-  /**
-   * 切换wangEditorV5国际化
-   * @param language string 可选值 en、zh-CN
-   * @returns void
-   */
-  function changeWangeditorLanguage(language: string): void {
-    i18nChangeLanguage(language);
-  }
-
  return {
    title,
    device,
@@ -163,8 +155,8 @@ export function useNav() {
    pureApp,
    username,
    avatarsStyle,
+    tooltipEffect,
    getDropdownItemStyle,
-    getDropdownItemClass,
-    changeWangeditorLanguage
+    getDropdownItemClass
  };
 }
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -17,6 +17,14 @@ import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";

+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import CloseAllTags from "@iconify-icons/ri/subtract-line";
+import CloseOtherTags from "@iconify-icons/ri/text-spacing";
+import CloseRightTags from "@iconify-icons/ri/text-direction-l";
+import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+import Close from "@iconify-icons/ep/close";
+
 export function useTags() {
  const route = useRoute();
  const router = useRouter();
@@ -47,56 +55,56 @@ export function useTags() {

  const tagsViews = reactive<Array<tagsViewsType>>([
    {
-      icon: "refresh-right",
+      icon: RefreshRight,
      text: $t("buttons.hsreload"),
      divided: false,
      disabled: false,
      show: true
    },
    {
-      icon: "close",
+      icon: Close,
      text: $t("buttons.hscloseCurrentTab"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
-      icon: "close-left-tags",
+      icon: CloseLeftTags,
      text: $t("buttons.hscloseLeftTabs"),
      divided: true,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
-      icon: "close-right-tags",
+      icon: CloseRightTags,
      text: $t("buttons.hscloseRightTabs"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
-      icon: "close-other-tags",
+      icon: CloseOtherTags,
      text: $t("buttons.hscloseOtherTabs"),
      divided: true,
      disabled: multiTags.value.length > 2 ? false : true,
      show: true
    },
    {
-      icon: "close-all-tags",
+      icon: CloseAllTags,
      text: $t("buttons.hscloseAllTabs"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
-      icon: "fullscreen",
+      icon: Fullscreen,
      text: $t("buttons.hswholeFullScreen"),
      divided: true,
      disabled: false,
      show: true
    },
    {
-      icon: "fullscreen",
+      icon: Fullscreen,
      text: $t("buttons.hscontentFullScreen"),
      divided: false,
      disabled: false,
--- a/src/layout/hooks/useTranslationLang.ts
+++ b/src/layout/hooks/useTranslationLang.ts
@@ -4,8 +4,7 @@ import { useRoute } from "vue-router";
 import { watch, type Ref } from "vue";

 export function useTranslationLang(ref?: Ref) {
-  const { $storage, changeTitle, changeWangeditorLanguage, handleResize } =
-    useNav();
+  const { $storage, changeTitle, handleResize } = useNav();
  const { locale, t } = useI18n();
  const route = useRoute();

@@ -25,9 +24,6 @@ export function useTranslationLang(ref?: Ref) {
    () => locale.value,
    () => {
      changeTitle(route.meta);
-      locale.value === "en"
-        ? changeWangeditorLanguage(locale.value)
-        : changeWangeditorLanguage("zh-CN");
    }
  );

--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import "animate.css";
+// vxe-table的所有icon不支持component模式，间接依赖了font-awesome
+import "font-awesome/css/font-awesome.min.css";
 import { setType } from "./types";
 import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -1,17 +1,20 @@
+import type { IconifyIcon } from "@iconify/vue";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+
 export const routerArrays: Array<RouteConfigs> = [
  {
    path: "/welcome",
    parentPath: "/",
    meta: {
      title: "menus.hshome",
-      icon: "home-filled"
+      icon: HomeFilled
    }
  }
 ];

 export type routeMetaType = {
  title?: string;
-  icon?: string;
+  icon?: string | IconifyIcon;
  showLink?: boolean;
  savedPosition?: boolean;
  auths?: Array<string>;
@@ -32,7 +35,7 @@ export type multiTagsType = {
 };

 export type tagsViewsType = {
-  icon: string;
+  icon: string | IconifyIcon;
  text: string;
  divided: boolean;
  disabled: boolean;
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,13 +8,11 @@ import { createApp, Directive } from "vue";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { useTable } from "@/plugins/vxe-table";
-import VirtualScroller from "vue-virtual-scroller";
 import { injectResponsiveStorage } from "@/utils/responsive";

 import Table from "@pureadmin/table";
 import PureDescriptions from "@pureadmin/descriptions";

-import "animate.css";
 // 引入重置样式
 import "./style/reset.scss";
 // 导入公共样式
@@ -23,8 +21,6 @@ import "element-plus/dist/index.css";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";
-import "v-contextmenu/dist/themes/default.css";
-import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

 const app = createApp(App);

@@ -60,7 +56,6 @@ getServerConfig(app).then(async config => {
    .use(Table)
    .use(PureDescriptions)
    .use(useTable)
-    .use(useEcharts)
-    .use(VirtualScroller);
+    .use(useEcharts);
  app.mount("#app");
 });
--- a/src/plugins/echarts/index.ts
+++ b/src/plugins/echarts/index.ts
@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import * as echarts from "echarts/core";
-import { SVGRenderer } from "echarts/renderers";
+import { CanvasRenderer } from "echarts/renderers";
 import { PieChart, BarChart, LineChart } from "echarts/charts";
 import {
  GridComponent,
@@ -20,7 +20,7 @@ use([
  PieChart,
  BarChart,
  LineChart,
-  SVGRenderer,
+  CanvasRenderer,
  GridComponent,
  TitleComponent,
  LegendComponent,
@@ -41,6 +41,7 @@ use([
 /**
 * @description 按需引入echarts
 * @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
+ * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，为了配合 https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html 使用
 */
 export function useEcharts(app: App) {
  app.config.globalProperties.$echarts = echarts;
--- a/src/plugins/vxe-table/index.ts
+++ b/src/plugins/vxe-table/index.ts
@@ -3,7 +3,6 @@ import "./index.scss";
 import XEUtils from "xe-utils";
 import { App, unref } from "vue";
 import { i18n } from "@/plugins/i18n";
-import "font-awesome/css/font-awesome.min.css";
 import zh from "vxe-table/lib/locale/lang/zh-CN";
 import en from "vxe-table/lib/locale/lang/en-US";

--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@@ -4,16 +4,16 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
  doc = 1,
  utils = 2,
  table = 3,
-  tree = 4,
-  components = 5,
-  able = 6,
-  frame = 7,
-  nested = 8,
-  result = 9,
-  error = 10,
-  list = 11,
-  permission = 12,
-  system = 13,
+  components = 4,
+  able = 5,
+  frame = 6,
+  nested = 7,
+  result = 8,
+  error = 9,
+  list = 10,
+  permission = 11,
+  system = 12,
+  menuoverflow = 13,
  tabs = 14,
  formdesign = 15,
  flowchart = 16,
@@ -27,7 +27,6 @@ export {
  doc,
  utils,
  table,
-  tree,
  components,
  able,
  frame,
@@ -37,6 +36,7 @@ export {
  list,
  permission,
  system,
+  menuoverflow,
  tabs,
  formdesign,
  flowchart,
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -1,11 +1,12 @@
 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: "ubuntu-fill",
+    icon: UbuntuFill,
    title: $t("menus.hsAble"),
    rank: able
  },
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -5,7 +5,6 @@ export default {
  path: "/about",
  redirect: "/about/index",
  meta: {
-    // icon: "question-line",
    title: $t("menus.hsAbout"),
    rank: about
  },
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -1,11 +1,12 @@
 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
  },
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -1,11 +1,12 @@
 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
  },
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -1,11 +1,12 @@
 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: "information-line",
+    icon: InformationLine,
    title: $t("menus.hsabnormal"),
    rank: error
  },
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -1,11 +1,12 @@
 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: "set-up",
+    icon: SetUp,
    title: $t("menus.hsflowChart"),
    rank: flowchart
  },
--- a/src/router/modules/formdesign.ts
+++ b/src/router/modules/formdesign.ts
@@ -2,11 +2,13 @@ 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: "terminal-window-line",
+    icon: TerminalWindowLine,
    title: $t("menus.hsFormDesign"),
    rank: formdesign
  },
--- a/src/router/modules/guide.ts
+++ b/src/router/modules/guide.ts
@@ -1,11 +1,12 @@
 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
  },
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -1,6 +1,7 @@
 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: "/",
@@ -8,7 +9,7 @@ export default {
  component: Layout,
  redirect: "/welcome",
  meta: {
-    icon: "home-filled",
+    icon: HomeFilled,
    title: $t("menus.hshome"),
    rank: home
  },
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -1,11 +1,13 @@
 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: "list-check",
+    icon: ListCheck,
    title: $t("menus.hsList"),
    rank: list
  },
@@ -15,7 +17,7 @@ export default {
      name: "ListCard",
      component: () => import("@/views/list/card/index.vue"),
      meta: {
-        icon: "card",
+        icon: Card,
        title: $t("menus.hsListCard"),
        showParent: true
      }
--- a/src/router/modules/menuoverflow.ts
+++ b/src/router/modules/menuoverflow.ts
@@ -0,0 +1,22 @@
+import { $t } from "@/plugins/i18n";
+import { menuoverflow } from "@/router/enums";
+
+export default {
+  path: "/menuoverflow",
+  redirect: "/menuoverflow/index",
+  meta: {
+    title: $t("menus.hsMenuoverflow"),
+    rank: menuoverflow
+  },
+  children: [
+    {
+      path: "/menuoverflow/index",
+      name: "MenuOverflow",
+      component: () => import("@/views/menuoverflow/index.vue"),
+      meta: {
+        title: $t("menus.hsChildMenuoverflow"),
+        showParent: true
+      }
+    }
+  ]
+} as RouteConfigsTable;
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -1,12 +1,13 @@
 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: [
--- a/src/router/modules/ppt.ts
+++ b/src/router/modules/ppt.ts
@@ -1,11 +1,12 @@
 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
  },
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -1,5 +1,6 @@
 import { $t } from "@/plugins/i18n";
 const Layout = () => import("@/layout/index.vue");
+import HomeFilled from "@iconify-icons/ep/home-filled";

 export default [
  {
@@ -16,7 +17,7 @@ export default [
    path: "/redirect",
    component: Layout,
    meta: {
-      icon: "home-filled",
+      icon: HomeFilled,
      title: $t("menus.hshome"),
      showLink: false,
      rank: 102
--- a/src/router/modules/result.ts
+++ b/src/router/modules/result.ts
@@ -1,11 +1,12 @@
 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: "checkbox-circle-line",
+    icon: CheckboxCircleLine,
    title: $t("menus.hsResult"),
    rank: result
  },
--- a/src/router/modules/tree.ts
+++ b/src/router/modules/tree.ts
@@ -1,23 +0,0 @@
-import { $t } from "@/plugins/i18n";
-import { tree } from "@/router/enums";
-import hot from "@/assets/svg/hot.svg?component";
-
-export default {
-  path: "/tree",
-  redirect: "/tree/index",
-  meta: {
-    icon: hot,
-    title: $t("menus.hsTree"),
-    rank: tree
-  },
-  children: [
-    {
-      path: "/tree/index",
-      name: "Tree",
-      component: () => import("@/views/tree/index.vue"),
-      meta: {
-        title: $t("menus.hsTree")
-      }
-    }
-  ]
-} as RouteConfigsTable;
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -16,6 +16,7 @@ import {
  storageSession,
  isIncludeAllChildren
 } from "@pureadmin/utils";
+import { getConfig } from "@/config";
 import { buildHierarchyTree } from "@/utils/tree";
 import { cloneDeep, intersection } from "lodash-unified";
 import { sessionKey, type DataInfo } from "@/utils/auth";
@@ -151,42 +152,66 @@ function addPathMatch() {
  }
 }

-/** 初始化路由 */
-function initRouter() {
-  return new Promise(resolve => {
-    getAsyncRoutes().then(({ data }) => {
-      if (data.length === 0) {
-        usePermissionStoreHook().handleWholeMenus(data);
-        resolve(router);
-      } else {
-        formatFlatteningRoutes(addAsyncRoutes(data)).map(
-          (v: RouteRecordRaw) => {
-            // 防止重复添加路由
-            if (
-              router.options.routes[0].children.findIndex(
-                value => value.path === v.path
-              ) !== -1
-            ) {
-              return;
-            } else {
-              // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
-              router.options.routes[0].children.push(v);
-              // 最终路由进行升序
-              ascending(router.options.routes[0].children);
-              if (!router.hasRoute(v?.name)) router.addRoute(v);
-              const flattenRouters: any = router
-                .getRoutes()
-                .find(n => n.path === "/");
-              router.addRoute(flattenRouters);
-            }
-            resolve(router);
-          }
-        );
-        usePermissionStoreHook().handleWholeMenus(data);
+/** 处理动态路由（后端返回的路由） */
+function handleAsyncRoutes(routeList) {
+  if (routeList.length === 0) {
+    usePermissionStoreHook().handleWholeMenus(routeList);
+  } else {
+    formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
+      (v: RouteRecordRaw) => {
+        // 防止重复添加路由
+        if (
+          router.options.routes[0].children.findIndex(
+            value => value.path === v.path
+          ) !== -1
+        ) {
+          return;
+        } else {
+          // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
+          router.options.routes[0].children.push(v);
+          // 最终路由进行升序
+          ascending(router.options.routes[0].children);
+          if (!router.hasRoute(v?.name)) router.addRoute(v);
+          const flattenRouters: any = router
+            .getRoutes()
+            .find(n => n.path === "/");
+          router.addRoute(flattenRouters);
+        }
      }
-      addPathMatch();
+    );
+    usePermissionStoreHook().handleWholeMenus(routeList);
+  }
+  addPathMatch();
+}
+
+/** 初始化路由（`new Promise` 写法防止在异步请求中造成无限循环）*/
+function initRouter() {
+  if (getConfig()?.CachingAsyncRoutes) {
+    // 开启动态路由缓存本地sessionStorage
+    const key = "async-routes";
+    const asyncRouteList = storageSession.getItem(key) as any;
+    if (asyncRouteList && asyncRouteList?.length > 0) {
+      return new Promise(resolve => {
+        handleAsyncRoutes(asyncRouteList);
+        resolve(router);
+      });
+    } else {
+      return new Promise(resolve => {
+        getAsyncRoutes().then(({ data }) => {
+          handleAsyncRoutes(data);
+          storageSession.setItem(key, data);
+          resolve(router);
+        });
+      });
+    }
+  } else {
+    return new Promise(resolve => {
+      getAsyncRoutes().then(({ data }) => {
+        handleAsyncRoutes(data);
+        resolve(router);
+      });
    });
-  });
+  }
 }

 /**
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -46,6 +46,12 @@
  padding: 0 !important;
 }

+/* 自定义 tooltip 的类名 */
+.pure-tooltip {
+  // 右侧操作面板right-panel类名的z-index为40000，tooltip需要大于它才能显示
+  z-index: 41000 !important;
+}
+
 /* nprogress 适配 element-plus 的主题色 */
 #nprogress {
  & .bar {
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -111,7 +111,6 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
  background-image: none;
 }

@@ -133,16 +132,10 @@ progress {
 }

 [type="search"] {
-  -webkit-appearance: textfield;
  outline-offset: -2px;
 }

-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
  font: inherit;
 }

@@ -211,7 +204,6 @@ iframe,
 embed,
 object {
  display: block;
-  vertical-align: middle;
 }

 img,
--- a/src/style/transition.scss
+++ b/src/style/transition.scss
@@ -26,9 +26,12 @@
 }

 /* breadcrumb transition */
-.breadcrumb-enter-active,
+.breadcrumb-enter-active {
+  transition: all 0.4s;
+}
+
 .breadcrumb-leave-active {
-  transition: all 0.5s;
+  transition: all 0.3s;
 }

 .breadcrumb-enter-from,
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -70,7 +70,7 @@ export function setToken(data: DataInfo<Date>) {
 /** 删除`token`以及key值为`user-info`的session信息 */
 export function removeToken() {
  Cookies.remove(TokenKey);
-  sessionStorage.removeItem(sessionKey);
+  sessionStorage.clear();
 }

 /** 格式化token（jwt格式） */
--- a/src/utils/http/index.ts
+++ b/src/utils/http/index.ts
@@ -175,7 +175,7 @@ class PureHttp {
  /** 单独抽离的post工具函数 */
  public post<T, P>(
    url: string,
-    params?: T,
+    params?: AxiosRequestConfig<T>,
    config?: PureHttpRequestConfig
  ): Promise<P> {
    return this.request<P>("post", url, params, config);
@@ -184,7 +184,7 @@ class PureHttp {
  /** 单独抽离的get工具函数 */
  public get<T, P>(
    url: string,
-    params?: T,
+    params?: AxiosRequestConfig<T>,
    config?: PureHttpRequestConfig
  ): Promise<P> {
    return this.request<P>("get", url, params, config);
--- a/src/views/able/icon-select.vue
+++ b/src/views/able/icon-select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { IconSelect } from "@/components/ReIcon";
+import IconSelect from "@/components/ReIcon/src/Select.vue";

 defineOptions({
  name: "IconSelect"
--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -7,6 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
+import NodeTree from "@iconify-icons/ri/node-tree";

 defineOptions({
  name: "MenuTree"
@@ -50,7 +51,7 @@ const filterMethod = (query: string, node: treeNode) => {
          <el-link
            href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
            target="_blank"
-            :icon="useRenderIcon('node-tree')"
+            :icon="useRenderIcon(NodeTree)"
            style="font-size: 16px; margin: 0 5px 4px 0"
          >
            Tree V2
--- a/src/views/able/timeline.vue
+++ b/src/views/able/timeline.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { markRaw } from "vue";
 import { useRenderFlicker } from "@/components/ReFlicker";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";

 defineOptions({
  name: "TimeLine"
@@ -11,12 +13,12 @@ const activities = [
  {
    content: "支持圆点闪动",
    timestamp: lastBuildTime,
-    icon: useRenderFlicker()
+    icon: markRaw(useRenderFlicker())
  },
  {
    content: "支持方形闪动",
    timestamp: lastBuildTime,
-    icon: useRenderFlicker({ borderRadius: 0, background: "#67C23A" })
+    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
  },
  {
    content: "支持默认颜色",
@@ -31,7 +33,7 @@ const activities = [
    content: "支持自定义图标",
    timestamp: lastBuildTime,
    color: "transparent",
-    icon: useRenderIcon("iphone", {
+    icon: useRenderIcon(Iphone, {
      color: "#0bbd87"
    })
  }
--- a/src/views/able/virtual-list/data.ts
+++ b/src/views/able/virtual-list/data.ts
@@ -1,70 +0,0 @@
-import { faker } from "@faker-js/faker";
-
-let uid = 0;
-
-function generateItem() {
-  return {
-    name: faker.name.findName(),
-    avatar: faker.internet.avatar()
-  };
-}
-
-export function getData(count, letters) {
-  const raw = {};
-
-  const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
-
-  for (const l of alphabet) {
-    raw[l] = [];
-  }
-
-  for (let i = 0; i < count; i++) {
-    const item = generateItem();
-    const letter = item.name.charAt(0).toLowerCase();
-    raw[letter].push(item);
-  }
-
-  const list = [];
-  let index = 1;
-
-  for (const l of alphabet) {
-    raw[l] = raw[l].sort((a, b) => (a.name < b.name ? -1 : 1));
-    if (letters) {
-      list.push({
-        id: uid++,
-        index: index++,
-        type: "letter",
-        value: l,
-        height: 200
-      });
-    }
-    for (const item of raw[l]) {
-      list.push({
-        id: uid++,
-        index: index++,
-        type: "person",
-        value: item,
-        height: 50
-      });
-    }
-  }
-
-  return list;
-}
-
-export function addItem(list) {
-  list.push({
-    id: uid++,
-    index: list.length + 1,
-    type: "person",
-    value: generateItem(),
-    height: 50
-  });
-}
-
-export function generateMessage() {
-  return {
-    avatar: faker.internet.avatar(),
-    message: faker.lorem.text()
-  };
-}
--- a/src/views/able/virtual-list/horizontal.vue
+++ b/src/views/able/virtual-list/horizontal.vue
@@ -1,33 +1,27 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { generateMessage } from "./data";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";

 const items = ref([]);
 const search = ref("");

-for (let i = 0; i < 10000; i++) {
+for (let i = 0; i < 800; i++) {
  items.value.push({
-    id: i,
-    ...generateMessage()
+    id: i
  });
 }

 const filteredItems = computed(() => {
  if (!search.value) return items.value;
-  const lowerCaseSearch = search.value.toLowerCase();
-  return items.value.filter(i =>
-    i.message.toLowerCase().includes(lowerCaseSearch)
-  );
+  const lowerCaseSearch = search.value;
+  return items.value.filter(i => i.id == lowerCaseSearch);
 });
-
-function changeMessage(message) {
-  Object.assign(message, generateMessage());
-}
 </script>

 <template>
  <div class="dynamic-scroller-demo">
-    <div class="flex justify-around mb-4">
+    <div class="flex-ac mb-4 shadow-2xl">
+      水平模式 horizontal
      <el-input
        class="mr-2 !w-[1/1.5]"
        clearable
@@ -35,7 +29,6 @@ function changeMessage(message) {
        placeholder="Filter..."
        style="width: 300px"
      />
-      <el-tag effect="dark">水平模式horizontal</el-tag>
    </div>

    <DynamicScroller
@@ -48,31 +41,21 @@ function changeMessage(message) {
        <DynamicScrollerItem
          :item="item"
          :active="active"
-          :size-dependencies="[item.message]"
+          :size-dependencies="[item.id]"
          :data-index="index"
          :data-active="active"
          :title="`Click to change message ${index}`"
          :style="{
-            width: `${Math.max(
-              130,
-              Math.round((item.message.length / 20) * 20)
-            )}px`
+            width: `${Math.max(130, Math.round((item.id?.length / 20) * 20))}px`
          }"
          class="message"
-          @click="changeMessage(item)"
        >
-          <div class="avatar">
+          <div>
            <IconifyIconOnline
              icon="openmoji:beaming-face-with-smiling-eyes"
              width="40"
            />
-          </div>
-          <div class="text">
-            {{ item.message }}
-          </div>
-          <div class="index">
-            <span>{{ item.id }} (id)</span>
-            <span>{{ index }} (index)</span>
+            <p class="text-center">{{ item.id }}</p>
          </div>
        </DynamicScrollerItem>
      </template>
@@ -104,35 +87,4 @@ function changeMessage(message) {
  padding: 12px;
  box-sizing: border-box;
 }
-
-.avatar {
-  flex: auto 0 0;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  margin-bottom: 12px;
-}
-
-.avatar .image {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 50%;
-}
-
-.index,
-.text {
-  flex: 1;
-}
-
-.text {
-  margin-bottom: 12px;
-}
-
-.index {
-  opacity: 0.5;
-}
-
-.index span {
-  display: block;
-}
 </style>
--- a/src/views/able/virtual-list/index.vue
+++ b/src/views/able/virtual-list/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import verticalList from "./vertical.vue";
 import horizontalList from "./horizontal.vue";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

 defineOptions({
  name: "VirtualList"
--- a/src/views/able/virtual-list/vertical.vue
+++ b/src/views/able/virtual-list/vertical.vue
@@ -1,75 +1,56 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { generateMessage } from "./data";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";

 const items = ref([]);
 const search = ref("");

-for (let i = 0; i < 10000; i++) {
+for (let i = 0; i < 800; i++) {
  items.value.push({
-    id: i,
-    ...generateMessage()
+    id: i
  });
 }

 const filteredItems = computed(() => {
  if (!search.value) return items.value;
-  const lowerCaseSearch = search.value.toLowerCase();
-  return items.value.filter(i =>
-    i.message.toLowerCase().includes(lowerCaseSearch)
-  );
+  const lowerCaseSearch = search.value;
+  return items.value.filter(i => i.id == lowerCaseSearch);
 });
-
-function changeMessage(message) {
-  Object.assign(message, generateMessage());
-}
-
-function onResize() {
-  console.log("resize");
-}
 </script>

 <template>
  <div class="dynamic-scroller-demo">
-    <div class="flex justify-around mb-4">
+    <div class="flex-ac mb-4 shadow-2xl">
+      垂直模式 vertical
      <el-input
-        class="mr-2 !w-[1/1.5]"
+        class="!w-[350px]"
        clearable
        v-model="search"
        placeholder="Filter..."
      />
-      <el-tag effect="dark">垂直模式vertical</el-tag>
    </div>

    <DynamicScroller
      :items="filteredItems"
      :min-item-size="54"
      class="scroller"
-      @resize="onResize"
    >
      <template #default="{ item, index, active }">
        <DynamicScrollerItem
          :item="item"
          :active="active"
-          :size-dependencies="[item.message]"
+          :size-dependencies="[item.id]"
          :data-index="index"
          :data-active="active"
          :title="`Click to change message ${index}`"
          class="message"
-          @click="changeMessage(item)"
        >
-          <div class="avatar">
+          <div class="flex items-center">
            <IconifyIconOnline
              icon="openmoji:beaming-face-with-smiling-eyes"
              width="40"
            />
-          </div>
-          <div class="text">
-            {{ item.message }}
-          </div>
-          <div class="index">
-            <span>{{ item.id }} (id)</span>
-            <span>{{ index }} (index)</span>
+            <span>{{ item.id }}</span>
          </div>
        </DynamicScrollerItem>
      </template>
@@ -94,31 +75,4 @@ function onResize() {
  padding: 12px;
  box-sizing: border-box;
 }
-
-.avatar {
-  flex: auto 0 0;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  margin-right: 12px;
-}
-
-.index,
-.text {
-  flex: 1;
-}
-
-.text {
-  max-width: 400px;
-}
-
-.index {
-  opacity: 0.5;
-}
-
-.index span {
-  display: inline-block;
-  width: 160px;
-  text-align: right;
-}
 </style>
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -21,9 +21,3 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
    <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
  </el-card>
 </template>
-
-<style lang="scss" scoped>
-.iframe {
-  filter: invert(0.9) hue-rotate(180deg);
-}
-</style>
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -2,6 +2,7 @@
 import basic from "./basic.vue";
 import menuGroup from "./menuGroup.vue";
 import menuDynamic from "./menuDynamic.vue";
+import "v-contextmenu/dist/themes/default.css";

 defineOptions({
  name: "ContextMenu"
--- a/src/views/components/danmaku/danmu.ts
+++ b/src/views/components/danmaku/danmu.ts
--- a/src/views/components/danmaku/index.vue
+++ b/src/views/components/danmaku/index.vue
@@ -7,7 +7,7 @@ defineOptions({
  name: "Danmaku"
 });

-const danmaku = ref<any>(null);
+const danmaku = ref();
 const danmus = ref<any[]>(getDanmuData());
 const danmuMsg = ref<string>("");
 let timer = 0;
@@ -112,7 +112,7 @@ function addDanmu() {
            target="_blank"
            style="font-size: 16px; margin: 0 4px 5px"
          >
-            vue-danmaku
+            vue3-danmaku
          </el-link>
        </span>
      </div>
--- a/src/views/components/draggable/index.vue
+++ b/src/views/components/draggable/index.vue
@@ -4,6 +4,7 @@ import Sortable, { Swap } from "sortablejs";
 import draggable from "vuedraggable/src/vuedraggable";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Rank from "@iconify-icons/ep/rank";

 defineOptions({
  name: "Draggable"
@@ -63,7 +64,7 @@ onMounted(() => {
          <el-link
            href="https://sortablejs.github.io/vue.draggable.next/#/simple"
            target="_blank"
-            :icon="useRenderIcon('rank')"
+            :icon="useRenderIcon(Rank)"
            style="font-size: 16px; margin: 0 4px 5px"
          >
            vuedraggable
--- a/src/views/components/message/index.vue
+++ b/src/views/components/message/index.vue
@@ -3,6 +3,7 @@ import { h } from "vue";
 import hot from "@/assets/svg/hot.svg?component";
 import { message, closeAllMessage } from "@/utils/message";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Check from "@iconify-icons/ep/check";

 defineOptions({
  name: "Message"
@@ -68,7 +69,7 @@ defineOptions({
        @click="
          message('自定义消息图标', {
            customClass: 'el',
-            icon: useRenderIcon('check')
+            icon: useRenderIcon(Check)
          })
        "
      >
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -6,6 +6,7 @@ import { deviceDetection } from "@pureadmin/utils";
 import screenShot from "xgplayer/es/controls/screenShot";
 import playbackRate from "xgplayer/es/controls/playbackRate";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import VideoPlay from "@iconify-icons/ep/video-play";

 defineOptions({
  name: "Video"
@@ -38,7 +39,7 @@ onMounted(() => {
          <el-link
            href="https://v2.h5player.bytedance.com"
            target="_blank"
-            :icon="useRenderIcon('video-play')"
+            :icon="useRenderIcon(VideoPlay)"
            style="font-size: 16px; margin: 0 4px 5px"
          >
            西瓜播放器
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -3,6 +3,7 @@ import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import Edit from "@iconify-icons/ep/edit";

 defineOptions({
  name: "Editor"
@@ -46,7 +47,7 @@ const handleCreated = editor => {
          <el-link
            href="https://www.wangeditor.com"
            target="_blank"
-            :icon="useRenderIcon('edit')"
+            :icon="useRenderIcon(Edit)"
            style="font-size: 16px; margin: 0 4px 5px"
          >
            Wangeditor
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -11,6 +11,8 @@ import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
 import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
 import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";

+import SetUp from "@iconify-icons/ep/set-up";
+
 defineOptions({
  name: "FlowChart"
 });
@@ -71,7 +73,7 @@ onMounted(() => {
          <el-link
            href="http://logic-flow.org/"
            target="_blank"
-            :icon="useRenderIcon('set-up')"
+            :icon="useRenderIcon(SetUp)"
            style="font-size: 16px; margin: 0 4px 5px"
          >
            LogicFlow
--- a/src/views/list/card/components/Card.vue
+++ b/src/views/list/card/components/Card.vue
@@ -5,6 +5,7 @@ import laptopIcon from "@/assets/svg/laptop.svg?component";
 import serviceIcon from "@/assets/svg/service.svg?component";
 import calendarIcon from "@/assets/svg/calendar.svg?component";
 import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
+import More2Fill from "@iconify-icons/ri/more-2-fill";

 defineOptions({
  name: "ReCard"
@@ -64,7 +65,7 @@ const cardLogoClass = computed(() => [
            {{ product.isSetup ? "已启用" : "已停用" }}
          </el-tag>
          <el-dropdown trigger="click" :disabled="!product.isSetup">
-            <IconifyIconOffline icon="more-vertical" class="text-[24px]" />
+            <IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
            <template #dropdown>
              <el-dropdown-menu :disabled="!product.isSetup">
                <el-dropdown-item @click="handleClickManage(product)">
--- a/src/views/list/card/index.vue
+++ b/src/views/list/card/index.vue
@@ -6,6 +6,8 @@ import { ElMessageBox } from "element-plus";
 import { ref, onMounted, nextTick } from "vue";
 import dialogForm from "./components/DialogForm.vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Search from "@iconify-icons/ep/search";
+import AddFill from "@iconify-icons/ri/add-circle-line";

 defineOptions({
  name: "ListCard"
@@ -93,7 +95,10 @@ const handleManageProduct = product => {
 <template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
-      <el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true">
+      <el-button
+        :icon="useRenderIcon(AddFill)"
+        @click="formDialogVisible = true"
+      >
        新建产品
      </el-button>
      <el-input
@@ -106,7 +111,7 @@ const handleManageProduct = product => {
          <el-icon class="el-input__icon">
            <IconifyIconOffline
              v-show="searchValue.length === 0"
-              icon="search"
+              :icon="Search"
            />
          </el-icon>
        </template>
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@@ -9,6 +9,7 @@ import { $t, transformI18n } from "@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";

 const { t } = useI18n();
 const loading = ref(false);
@@ -50,7 +51,7 @@ function onBack() {
          clearable
          v-model="ruleForm.phone"
          :placeholder="t('login.phone')"
-          :prefix-icon="useRenderIcon('iphone')"
+          :prefix-icon="useRenderIcon(Iphone)"
        />
      </el-form-item>
    </Motion>
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/regist.vue
@@ -9,6 +9,9 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+import User from "@iconify-icons/ri/user-3-fill";

 const { t } = useI18n();
 const checked = ref(false);
@@ -89,7 +92,7 @@ function onBack() {
          clearable
          v-model="ruleForm.username"
          :placeholder="t('login.username')"
-          :prefix-icon="useRenderIcon('user')"
+          :prefix-icon="useRenderIcon(User)"
        />
      </el-form-item>
    </Motion>
@@ -100,7 +103,7 @@ function onBack() {
          clearable
          v-model="ruleForm.phone"
          :placeholder="t('login.phone')"
-          :prefix-icon="useRenderIcon('iphone')"
+          :prefix-icon="useRenderIcon(Iphone)"
        />
      </el-form-item>
    </Motion>
@@ -136,7 +139,7 @@ function onBack() {
          show-password
          v-model="ruleForm.password"
          :placeholder="t('login.password')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>
@@ -148,7 +151,7 @@ function onBack() {
          show-password
          v-model="ruleForm.repeatPassword"
          :placeholder="t('login.sure')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/update.vue
@@ -9,6 +9,8 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";

 const { t } = useI18n();
 const loading = ref(false);
@@ -73,7 +75,7 @@ function onBack() {
          clearable
          v-model="ruleForm.phone"
          :placeholder="t('login.phone')"
-          :prefix-icon="useRenderIcon('iphone')"
+          :prefix-icon="useRenderIcon(Iphone)"
        />
      </el-form-item>
    </Motion>
@@ -109,7 +111,7 @@ function onBack() {
          show-password
          v-model="ruleForm.password"
          :placeholder="t('login.password')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>
@@ -121,7 +123,7 @@ function onBack() {
          show-password
          v-model="ruleForm.repeatPassword"
          :placeholder="t('login.sure')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
  ref,
+  toRaw,
  reactive,
  watch,
  computed,
@@ -24,7 +25,7 @@ import { $t, transformI18n } from "@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
-import { bg, avatar, currentWeek } from "./utils/static";
+import { bg, avatar, illustration } from "./utils/static";
 import { ReImageVerify } from "@/components/ReImageVerify";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
@@ -33,6 +34,9 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import globalization from "@/assets/svg/globalization.svg?component";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Check from "@iconify-icons/ep/check";
+import User from "@iconify-icons/ri/user-3-fill";

 defineOptions({
  name: "Login"
@@ -131,7 +135,7 @@ watch(imgCode, value => {
              <IconifyIconOffline
                class="check-zh"
                v-show="locale === 'zh'"
-                icon="check"
+                :icon="Check"
              />
              简体中文
            </el-dropdown-item>
@@ -141,7 +145,7 @@ watch(imgCode, value => {
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
              </span>
              English
            </el-dropdown-item>
@@ -151,7 +155,7 @@ watch(imgCode, value => {
    </div>
    <div class="login-container">
      <div class="img">
-        <component :is="currentWeek" />
+        <component :is="toRaw(illustration)" />
      </div>
      <div class="login-box">
        <div class="login-form">
@@ -184,7 +188,7 @@ watch(imgCode, value => {
                  clearable
                  v-model="ruleForm.username"
                  :placeholder="t('login.username')"
-                  :prefix-icon="useRenderIcon('user')"
+                  :prefix-icon="useRenderIcon(User)"
                />
              </el-form-item>
            </Motion>
@@ -196,7 +200,7 @@ watch(imgCode, value => {
                  show-password
                  v-model="ruleForm.password"
                  :placeholder="t('login.password')"
-                  :prefix-icon="useRenderIcon('lock')"
+                  :prefix-icon="useRenderIcon(Lock)"
                />
              </el-form-item>
            </Motion>
--- a/src/views/login/utils/static.ts
+++ b/src/views/login/utils/static.ts
@@ -1,34 +1,5 @@
-import { computed } from "vue";
 import bg from "@/assets/login/bg.png";
 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";
+import illustration from "@/assets/login/illustration.svg?component";

-/** Show a different background every day */
-const currentWeek = computed(() => {
-  switch (String(new Date().getDay())) {
-    case "0":
-      return illustration0;
-    case "1":
-      return illustration1;
-    case "2":
-      return illustration2;
-    case "3":
-      return illustration3;
-    case "4":
-      return illustration4;
-    case "5":
-      return illustration5;
-    case "6":
-      return illustration6;
-    default:
-      return illustration4;
-  }
-});
-
-export { bg, avatar, currentWeek };
+export { bg, avatar, illustration };
--- a/src/views/menuoverflow/index.vue
+++ b/src/views/menuoverflow/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: "MenuOverflow"
+});
+</script>
+
+<template>
+  <div>目录、菜单文字超出显示 Tooltip 文字提示</div>
+</template>
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -33,6 +33,7 @@ function onChange() {
    .loginByUsername({ username: username.value, password: "admin123" })
    .then(res => {
      if (res.success) {
+        sessionStorage.removeItem("async-routes");
        usePermissionStoreHook().clearAllCachePage();
        initRouter();
      }
--- a/src/views/pure-table/high/edit/columns.tsx
+++ b/src/views/pure-table/high/edit/columns.tsx
@@ -2,6 +2,8 @@ import { tableDataEdit } from "../data";
 import { message } from "@/utils/message";
 import { ref, computed, Transition } from "vue";
 import { clone, delay } from "@pureadmin/utils";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Check from "@iconify-icons/ep/check";

 // 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
 export function useColumns() {
@@ -60,13 +62,13 @@ export function useColumns() {
          </Transition>
          <iconify-icon-offline
            v-show={editing.value(index)}
-            icon="check"
+            icon={Check}
            class={iconClass.value(index)}
            onClick={() => onSure(index)}
          />
          <iconify-icon-offline
            v-show={activeIndex.value === index && !editing.value(index)}
-            icon="edits"
+            icon={EditPen}
            class={iconClass.value(index, true)}
            onClick={() => onEdit(row, index)}
          />
--- a/src/views/result/columns.tsx
+++ b/src/views/result/columns.tsx
@@ -1,4 +1,6 @@
 import { IconifyIconOffline } from "@/components/ReIcon";
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import CloseCircleLine from "@iconify-icons/ri/close-circle-line";

 export function useColumns() {
  const columns = [
@@ -7,7 +9,7 @@ export function useColumns() {
        return (
          <span class="flex items-center -mt-6">
            <IconifyIconOffline
-              icon="close-circle-line"
+              icon={CloseCircleLine}
              color="#F56C6C"
              width="18px"
              height="18px"
@@ -20,7 +22,7 @@ export function useColumns() {
            >
              立即解冻
              <IconifyIconOffline
-                icon="arrow-right-s-line"
+                icon={ArrowRightSLine}
                color="var(--el-color-primary)"
                width="18px"
                height="18px"
@@ -35,7 +37,7 @@ export function useColumns() {
        return (
          <span class="flex items-center -mt-8">
            <IconifyIconOffline
-              icon="close-circle-line"
+              icon={CloseCircleLine}
              color="#F56C6C"
              width="18px"
              height="18px"
@@ -48,7 +50,7 @@ export function useColumns() {
            >
              立即升级
              <IconifyIconOffline
-                icon="arrow-right-s-line"
+                icon={ArrowRightSLine}
                color="var(--el-color-primary)"
                width="18px"
                height="18px"
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -6,6 +6,11 @@ import { FormInstance } from "element-plus";
 import { reactive, ref, onMounted } from "vue";
 import { TableProBar } from "@/components/ReTable";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";

 defineOptions({
  name: "Dept"
@@ -74,13 +79,13 @@ onMounted(() => {
      <el-form-item>
        <el-button
          type="primary"
-          :icon="useRenderIcon('search')"
+          :icon="useRenderIcon(Search)"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
@@ -94,7 +99,7 @@ onMounted(() => {
      @refresh="onSearch"
    >
      <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon('add')">
+        <el-button type="primary" :icon="useRenderIcon(AddFill)">
          新增部门
        </el-button>
      </template>
@@ -124,7 +129,7 @@ onMounted(() => {
              type="primary"
              :size="size"
              @click="handleUpdate(row)"
-              :icon="useRenderIcon('edits')"
+              :icon="useRenderIcon(EditPen)"
            >
              修改
            </el-button>
@@ -135,7 +140,7 @@ onMounted(() => {
                  link
                  type="primary"
                  :size="size"
-                  :icon="useRenderIcon('delete')"
+                  :icon="useRenderIcon(Delete)"
                  @click="handleDelete(row)"
                >
                  删除
--- a/src/views/system/dict/config.vue
+++ b/src/views/system/dict/config.vue
@@ -4,6 +4,8 @@ import { ref, reactive } from "vue";
 import { type Direction } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";

 interface Props {
  drawer: boolean;
@@ -108,7 +110,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
              <el-button
                link
                type="primary"
-                :icon="useRenderIcon('edits')"
+                :icon="useRenderIcon(EditPen)"
                @click="editConfig(row)"
              >
                编辑
@@ -116,7 +118,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
              <el-button
                link
                type="primary"
-                :icon="useRenderIcon('delete')"
+                :icon="useRenderIcon(Delete)"
                @click="delConfig(row)"
              >
                删除
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -14,6 +14,8 @@ import {
  type VxeTableEvents,
  type FormMethods
 } from "vxe-table";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";

 type onEditNRow = {
  name: string;
@@ -293,7 +295,7 @@ function onHide() {
          <el-button
            link
            type="primary"
-            :icon="useRenderIcon('edits')"
+            :icon="useRenderIcon(EditPen)"
            @click="onEdit(row)"
          >
            编辑
@@ -318,7 +320,7 @@ function onHide() {
          <el-button
            link
            type="primary"
-            :icon="useRenderIcon('delete')"
+            :icon="useRenderIcon(Delete)"
            @click="confirmEvent"
          >
            删除
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
xiaoxian521	1ef6ce70db	release: update `3.9.1`	2022-12-02 19:32:48 +08:00
xiaoxian521	d5d7dd8e57	chore: update	2022-12-02 18:15:46 +08:00
xiaoxian521	1a39d0962e	feat: 添加目录、菜单文字超出显示 Tooltip 文字提示demo	2022-12-02 17:57:51 +08:00
xiaoxian521	86b77c2877	feat: 添加 `TooltipEffect` 全局配置，可配置平台主体所有 `el-tooltip` 的 `effect`，不影响业务代码	2022-12-02 16:46:48 +08:00
xiaoxian521	cf8e5897fb	style: update	2022-12-02 11:08:11 +08:00
xiaoxian521	f1e6ddff18	perf: 优化 `initRouter` ，兼容 `sso` 场景	2022-12-01 15:56:29 +08:00
xiaoxian521	059a704f53	chore: update	2022-12-01 12:45:09 +08:00
xiaoxian521	4c29bcc49a	feat: 添加 `CachingAsyncRoutes` 是否开启动态路由缓存本地，默认 `true`	2022-12-01 11:31:52 +08:00
xiaoxian521	47960bbaf9	chore: update	2022-11-30 20:18:01 +08:00
xiaoxian521	b2ec77275d	chore: update	2022-11-30 18:18:16 +08:00
xiaoxian521	6fc12a2498	release: update `3.9.0`	2022-11-30 14:11:08 +08:00
xiaoxian521	a72557f4e2	perf: 优化首屏加载	2022-11-30 13:43:55 +08:00
xiaoxian521	71d0ec8ba8	chore: update	2022-11-30 13:27:27 +08:00
xiaoxian521	ee5d82c021	types: fix	2022-11-30 12:51:15 +08:00
RealityBoy	c7ab236e10	perf: 将本地图标全部按需引入，首屏加载减少 `61` 个图标资源，首屏加载再次变快 (#389 ) * perf: 优化图标，将本地图标按需引入，首屏加载减少 `61` 个图标资源，首屏加载再次变快	2022-11-30 12:39:12 +08:00
xiaoxian521	d2b1bd5b44	perf: 首屏优化，减少 `1.5MB` 资源	2022-11-29 19:30:33 +08:00
xiaoxian521	a22bc8622e	chore: update	2022-11-29 16:56:18 +08:00
xiaoxian521	fe9f6e5493	perf: 优化首页	2022-11-29 15:08:05 +08:00
xiaoxian521	7f0354cd63	feat: 首页添加版本更新日志模块	2022-11-29 11:08:48 +08:00
xiaoxian521	c437371db6	fix: 修复退出全屏时文字过长导致页面出现滚动条后抖动问题	2022-11-29 00:03:18 +08:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="500" height="380" data-name="Layer 1" viewBox="0 0 896 529.113"><path fill="#3f3d56" d="M674.067 437.34s-26.377 9.895-38.806 32.944-6.201 50.525-6.201 50.525 26.378-9.895 38.806-32.944 6.201-50.524 6.201-50.524Z"/><path fill="#5392f0" d="M709.5 471.71s-8.642 26.813-31.08 40.313-50.177 8.573-50.177 8.573 8.642-26.814 31.08-40.314 50.177-8.573 50.177-8.573Z"/><path fill="#2f2e41" d="M0 527.113h896v2H0zM361.872 435.088a95.444 95.444 0 0 1-35.748-14.447l1.182-1.613a93.363 93.363 0 0 0 34.999 14.105c18.932 3.402 47.26 1.732 74.707-25.527 53.414-53.048 104.393-58.39 104.902-58.438l.186 1.992c-.501.047-50.768 5.317-103.678 57.866-21.613 21.464-43.792 27.402-61.718 27.402a83.5 83.5 0 0 1-14.832-1.34Z"/><circle cx="515.153" cy="381.113" r="12" fill="#2f2e41"/><circle cx="430.153" cy="437.113" r="12" fill="#2f2e41"/><path fill="#3f3d56" d="M683.5 528.113s-17.462-5.413-52.261-10.842l.761-10.658c6-60-34-150-34-150a401.561 401.561 0 0 1 21.47 139.024c-5.338-9.312-15.65-19.358-35.47-25.524 0 0 25.778 22.106 33.16 45.102a997.84 997.84 0 0 0-102.023-8.216L524 486.613l-17 17s-7-51-22-53l11 50s-13-10-16-9l7.397 14.795c-49.819-.517-109.084 1.735-177.765 8.952L318 496.113l-17 17s-7-51-22-53l11 50s-13-10-16-9l8.643 17.286q-33.667 4.004-70.143 9.714Z"/><path fill="#a0616a" d="M407.648 44.491c-10.9 11.748 17.598 40.26 17.598 40.26s-57.707 9.73-53.128 9.14 2.206-49.131 2.206-49.131 44.224-12.017 33.324-.269Z"/><path fill="#2f2e41" d="m447.812 170.222-50.139 25.614-27.23 15.606s-32.098 40.432-38.086 64.393 25.93 68.247 29.543 72.823a54.36 54.36 0 0 1 4.99 7.423c1.247 1.856 12.029-.54 23.803-3.065s-1.563-19.964-1.563-19.964-15.027-38.395-16.147-39.26c-1.045-.806-4.6-7.446-2.043-10.352a25.95 25.95 0 0 0 5.445-8.898 30.09 30.09 0 0 1 4.187-7.942s45.361-36.836 59.528-49.378 51.83-4.658 51.83-4.658-17.782 68.2-22.23 72.806-4.93 8.7-2.916 16.507 28.282.391 28.282.391l9.7-26.455s15.749-34.293 24.3-69.675c4.275-17.691-3.889-28.235-13.121-34.356a41.39 41.39 0 0 0-30.03-5.977l-46.349 8.13 32.147-13.849Z"/><path fill="#a0616a" d="m262.878 104.304-59.854-18.506s-24.18-31.167-12.789-36.667 25.652 26.944 25.652 26.944l41.686 2.698ZM514.494 71.9l53.212-33.068S583.2 2.556 570.787.122 552.8 32.685 552.8 32.685l-39.642 13.171Z"/><path fill="#5392f0" d="m524.453 34.513 1.014 39.192L435.78 89.73c13.192 28.224 9.84 60.346 43.047 74.425L366.903 218.9c4.987-43.038-15.818-75.456-35.263-115.759-23.686-8.586-51.196-2.29-80.337 10.346l-5.237-40.664 123.879-8.896 20.348 7.78 21.819-9.177c32.067-9.528 78.109-27.641 112.341-28.017Z"/><path fill="#2f2e41" d="M468.64 300.63c-2.72 2.367-5.252 21.85-5.35 28.92s9.212 8.897 14.299 9.25 4.478 3.456 7.837 6.048 14.396 2.18 28.89-2.712-9.753-20.926-11.864-21.662-11-22.782-11-22.782-20.092.571-22.812 2.938ZM389.368 345.12c3.23 1.6 10.617 19.806 12.503 26.621s-6.657 10.94-11.489 12.57-3.456 4.479-6.048 7.837-13.375 5.756-28.635 4.696 4.133-22.714 5.988-23.96 4.87-24.826 4.87-24.826 19.58-4.538 22.811-2.938Z"/><circle cx="389.471" cy="35.429" r="23.996" fill="#a0616a"/><path fill="#2f2e41" d="M361.734 33.022a22.827 22.827 0 0 1-.833-18.593c2.359-5.815 7.591-11.655 18.873-13.4 24.614-3.805 37.712 13.436 37.024 19.075s-3.993 19.27-3.993 19.27 1.476-12.906-4.858-13.362-30.902-2.378-37.123 4.145a14.233 14.233 0 0 0-3.71 13.83Z"/></svg>