release: update 3.9.4

Co-authored-by: zhiqi.xiao <zhiqi.xiao20@tendcloud.com>

CHANGELOG.en_US.md

@@ -1,3 +1,48 @@
+# 3.9.4 (2022-12-05)
+
+### ✔️ refactor
+
+- Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
+  [Click here to see Why Removed? How to integrate it yourself?](https://xiaoxian521.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+
+# 3.9.3 (2022-12-04)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` pagination and loading animation example
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the refresh page would be blank due to changes in dynamic routes stored in local storage after enabling `CachingAsyncRoutes`
+- Fixed `Tooltip` displayed abnormally after the menu is collapsed
+
+### 🍏 Perf
+
+- Expand the use of local icons, the first launch of the full version reduces `13` requests again
+- When the menu loading is slow, add `loading` animation to optimize user experience
+- Theme initialization is placed in `onBeforeMount` to avoid flashing of the initialization page
+
+# 3.9.2 (2022-12-03)
+
+### 🍏 Perf
+
+- Global coverage of `el-dialog`, `el-drawer`, `el-message-box`, `el-notification` components of `element-plus`The style of the close icon in the upper right corner makes it more vivid [specific modification Code record](https://github.com/xiaoxian521/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)
+- The packaging output information is compatible with different packaging output paths
+- Optimize some animations
+
+# 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

CHANGELOG.md

@@ -1,3 +1,48 @@
+# 3.9.4 (2022-12-05)
+
+### ✔️ refactor
+
+- Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
+  [Click here to see Why Removed? How to integrate it yourself?](https://xiaoxian521.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+
+# 3.9.3 (2022-12-04)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` pagination and loading animation example
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the refresh page would be blank due to changes in dynamic routes stored in local storage after enabling `CachingAsyncRoutes`
+- Fixed `Tooltip` displayed abnormally after the menu is collapsed
+
+### 🍏 Perf
+
+- Expand the use of local icons, the first launch of the full version reduces `13` requests again
+- When the menu loading is slow, add `loading` animation to optimize user experience
+- Theme initialization is placed in `onBeforeMount` to avoid flashing of the initialization page
+
+# 3.9.2 (2022-12-03)
+
+### 🍏 Perf
+
+- Global coverage of `el-dialog`, `el-drawer`, `el-message-box`, `el-notification` components of `element-plus`The style of the close icon in the upper right corner makes it more vivid [specific modification Code record](https://github.com/xiaoxian521/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)
+- The packaging output information is compatible with different packaging output paths
+- Optimize some animations
+
+# 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

CHANGELOG.zh_CN.md

@@ -1,3 +1,48 @@
+# 3.9.4 (2022-12-05)
+
+### ✔️ refactor
+
+- 完全移除了 `vxe-table`，移除后，完整版整体打包大小减少 `1.82MB`，首启动时长基本和精简版持平 🐮
+  [点击此处查看为什么移除？如何自行集成？](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+
+# 3.9.3 (2022-12-04)
+
+### 🎫 Feat
+
+- 添加 `@pureadmin/table` 分页和加载动画示例
+
+### 🐞 Bug fixes
+
+- 修复开启 `CachingAsyncRoutes` 后，存入本地存储的动态路由改变造成刷新页面空白的问题
+- 修复菜单折叠后 `Tooltip` 显示异常
+
+### 🍏 Perf
+
+- 扩展本地图标使用方式，完整版首启动再次减少 `13` 个请求
+- 当菜单加载慢时，添加 `loading` 动画，优化用户体验
+- 主题初始化放在 `onBeforeMount` 里，避免初始化页面闪烁
+
+# 3.9.2 (2022-12-03)
+
+### 🍏 Perf
+
+- 全局覆盖 `element-plus` 的 `el-dialog`、`el-drawer`、`el-message-box`、`el-notification` 组件右上角关闭图标的样式，使其表现更鲜明 [具体代码修改记录](https://github.com/xiaoxian521/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)
+- 打包输出信息兼容不同打包输出路径
+- 优化一些动画
+
+# 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

build/info.ts

@@ -9,10 +9,12 @@ export function viteBuildInfo(): Plugin {
   let config: { command: string };
   let startTime: Dayjs;
   let endTime: Dayjs;
+  let outDir: string;
   return {
     name: "vite:buildInfo",
-    configResolved(resolvedConfig: { command: string }) {
+    configResolved(resolvedConfig) {
       config = resolvedConfig;
+      outDir = resolvedConfig.build?.outDir ?? "dist";
     },
     buildStart() {
       console.log(
@@ -32,6 +34,7 @@ export function viteBuildInfo(): Plugin {
       if (config.command === "build") {
         endTime = dayjs(new Date());
         getPackageSize({
+          folder: outDir,
           callback: (size: string) => {
             console.log(
               bold(

build/optimize.ts

@@ -16,8 +16,6 @@ const include = [
   "echarts",
   "intro.js",
   "vue-i18n",
-  "xe-utils",
-  "vxe-table",
   "js-cookie",
   "lodash-es",
   "cropperjs",

locales/en.yaml

@@ -28,7 +28,6 @@ menus:
   hsempty: Empty Page
   hssysManagement: System Manage
   hsUser: User Manage
-  hsDict: Dict Manage
   hsRole: Role Manage
   hsDept: Dept Manage
   hseditor: Editor
@@ -101,6 +100,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:

locales/zh-CN.yaml

@@ -28,7 +28,6 @@ menus:
   hsempty: 无Layout页
   hssysManagement: 系统管理
   hsUser: 用户管理
-  hsDict: 字典管理
   hsRole: 角色管理
   hsDept: 部门管理
   hseditor: 编辑器
@@ -99,8 +98,10 @@ menus:
   hsInfiniteScroll: 表格无限滚动
   hsdanmaku: 弹幕组件
   hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（8个示例）
+  hsPureTableHigh: 高级用法（10个示例）
   hsTree: 大数据树业务组件
+  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
+  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
 status:
   hsLoad: 加载中...
 login:

mock/asyncRoutes.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-admin",
-  "version": "3.9.0",
+  "version": "3.9.4",
   "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.7.1",
+    "@pureadmin/table": "^1.8.3",
+    "@pureadmin/utils": "^1.7.4",
     "@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,30 +56,28 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
-    "md-editor-v3": "^2.4.2",
+    "md-editor-v3": "^2.5.0",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.26",
+    "pinia": "^2.0.27",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "responsive-storage": "^2.1.0",
     "sortablejs": "^1.15.0",
-    "swiper": "^8.4.4",
+    "swiper": "^8.4.5",
     "typeit": "^8.7.0",
     "v-contextmenu": "3.0.0",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
-    "vue-json-pretty": "^2.2.2",
-    "vue-pdf-embed": "^1.1.4",
+    "vue-json-pretty": "^2.2.3",
+    "vue-pdf-embed": "^1.1.5",
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
-    "vue3-danmaku": "^1.0.0",
+    "vue3-danmaku": "^1.1.0",
     "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.3.6",
-    "xe-utils": "^3.5.7",
     "xgplayer": "^2.32.1",
     "xlsx": "^0.18.5"
   },
@@ -115,7 +113,6 @@
     "eslint": "^8.8.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.7.0",
-    "font-awesome": "^4.7.0",
     "husky": "^7.0.4",
     "lint-staged": "11.1.2",
     "picocolors": "^1.0.0",

pnpm-lock.yaml

@@ -14,9 +14,9 @@ specifiers:
   "@logicflow/core": ^1.1.30
   "@logicflow/extension": ^1.1.30
   "@pureadmin/descriptions": ^1.1.0
-  "@pureadmin/table": ^1.8.0
+  "@pureadmin/table": ^1.8.3
   "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.7.1
+  "@pureadmin/utils": ^1.7.4
   "@types/element-resize-detector": 1.1.3
   "@types/intro.js": ^5.1.0
   "@types/js-cookie": ^3.0.1
@@ -48,12 +48,11 @@ specifiers:
   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
   eslint: ^8.8.0
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^9.7.0
-  font-awesome: ^4.7.0
   husky: ^7.0.4
   intro.js: ^6.0.0
   js-cookie: ^3.0.1
@@ -62,13 +61,13 @@ specifiers:
   lodash: ^4.17.21
   lodash-es: ^4.17.21
   lodash-unified: ^1.0.2
-  md-editor-v3: ^2.4.2
+  md-editor-v3: ^2.5.0
   mitt: ^3.0.0
   mockjs: ^1.1.0
   nprogress: ^0.2.0
   path: ^0.12.7
   picocolors: ^1.0.0
-  pinia: ^2.0.26
+  pinia: ^2.0.27
   postcss: ^8.4.18
   postcss-html: ^1.5.0
   postcss-import: ^15.0.0
@@ -90,7 +89,7 @@ specifiers:
   stylelint-config-standard: ^29.0.0
   stylelint-order: ^5.0.0
   svgo: ^3.0.2
-  swiper: ^8.4.4
+  swiper: ^8.4.5
   tailwindcss: ^3.2.4
   terser: ^5.15.1
   typeit: ^8.7.0
@@ -106,16 +105,14 @@ specifiers:
   vue: ^3.2.45
   vue-eslint-parser: ^9.1.0
   vue-i18n: ^9.2.2
-  vue-json-pretty: ^2.2.2
-  vue-pdf-embed: ^1.1.4
+  vue-json-pretty: ^2.2.3
+  vue-pdf-embed: ^1.1.5
   vue-router: ^4.1.6
   vue-tsc: ^1.0.9
   vue-types: ^4.2.1
   vue-virtual-scroller: ^2.0.0-alpha.1
-  vue3-danmaku: ^1.0.0
+  vue3-danmaku: ^1.1.0
   vuedraggable: ^4.1.0
-  vxe-table: ^4.3.6
-  xe-utils: ^3.5.7
   xgplayer: ^2.32.1
   xlsx: ^0.18.5
 
@@ -125,9 +122,9 @@ dependencies:
   "@howdyjs/mouse-menu": 2.0.5_vue@3.2.45
   "@logicflow/core": 1.1.31
   "@logicflow/extension": 1.1.31
-  "@pureadmin/descriptions": 1.1.1_element-plus@2.2.25
-  "@pureadmin/table": 1.8.1_element-plus@2.2.25
-  "@pureadmin/utils": 1.7.1_aotapuqn7htzdjltsyimavekky
+  "@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
+  "@pureadmin/table": 1.8.3_element-plus@2.2.26
+  "@pureadmin/utils": 1.7.4_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.6.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
   "@wangeditor/editor": 5.1.23
@@ -139,7 +136,7 @@ dependencies:
   dayjs: 1.11.6
   echarts: 5.4.0
   el-table-infinite-scroll: 3.0.1
-  element-plus: 2.2.25_vue@3.2.45
+  element-plus: 2.2.26_vue@3.2.45
   element-resize-detector: 1.2.4
   intro.js: 6.0.0
   js-cookie: 3.0.1
@@ -147,7 +144,7 @@ dependencies:
   lodash: 4.17.21
   lodash-es: 4.17.21
   lodash-unified: 1.0.3_3ib2ivapxullxkx3xftsimdk7u
-  md-editor-v3: 2.4.2
+  md-editor-v3: 2.5.0
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
@@ -167,10 +164,8 @@ dependencies:
   vue-router: 4.1.6_vue@3.2.45
   vue-types: 4.2.1_vue@3.2.45
   vue-virtual-scroller: 2.0.0-beta.3_vue@3.2.45
-  vue3-danmaku: 1.0.0_vue@3.2.45
+  vue3-danmaku: 1.1.0_vue@3.2.45
   vuedraggable: 4.1.0_vue@3.2.45
-  vxe-table: 4.3.6_vue@3.2.45+xe-utils@3.5.7
-  xe-utils: 3.5.7
   xgplayer: 2.32.2
   xlsx: 0.18.5
 
@@ -206,7 +201,6 @@ devDependencies:
   eslint: 8.28.0
   eslint-plugin-prettier: 4.2.1_5qrnzwqb344w6up62gv3safeoi
   eslint-plugin-vue: 9.8.0_eslint@8.28.0
-  font-awesome: 4.7.0
   husky: 7.0.4
   lint-staged: 11.1.2
   picocolors: 1.0.0
@@ -1264,7 +1258,7 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@pureadmin/descriptions/1.1.1_element-plus@2.2.25:
+  /@pureadmin/descriptions/1.1.1_element-plus@2.2.26:
     resolution:
       {
         integrity: sha512-4BHLKomLU/LxGs5EUA+h+aKNrJEkhrU6+QE8VoWfJZ8VTU6ddvFLT/Pi4WuO5CWNXM9ZjqvHLFFVwEPlKntqtg==
@@ -1273,19 +1267,19 @@ packages:
       element-plus: ^2.0.0
     dependencies:
       "@element-plus/icons-vue": 2.0.10_vue@3.2.45
-      element-plus: 2.2.25_vue@3.2.45
+      element-plus: 2.2.26_vue@3.2.45
       vue: 3.2.45
     dev: false
 
-  /@pureadmin/table/1.8.1_element-plus@2.2.25:
+  /@pureadmin/table/1.8.3_element-plus@2.2.26:
     resolution:
       {
-        integrity: sha512-oZ5GYmLTDgQ64U6+yKFjvpZG2Seuudk3hOWnUogMvKxhIvaRQsGBHbvyg47asMmXxUyeilq+nRumyuiuV7WJTg==
+        integrity: sha512-M+I+CDu74s/ffNybbDg0rHhiMHTdkgVIaksfmmrEwjuLB2nEaz7R0tob2qC5rKE96U2Z246meDHBidyQNx2z9w==
       }
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
-      element-plus: 2.2.25_vue@3.2.45
+      element-plus: 2.2.26_vue@3.2.45
       vue: 3.2.45
     dev: false
 
@@ -1300,10 +1294,10 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.7.1_aotapuqn7htzdjltsyimavekky:
+  /@pureadmin/utils/1.7.4_aotapuqn7htzdjltsyimavekky:
     resolution:
       {
-        integrity: sha512-LqYdMR1xvRDtPp66osOY6usmta6LNGMuON14iONv4ZUC/esQ3RflHlT5glGjOfGUSGCk8O94F5LVS/PVC9Q3Ng==
+        integrity: sha512-uJNHcb2sO7R2avALf+v4TGyuZtJix0Wpw/kMb6eO4C003ZQImuGGi9WlxHaOlESrMyFHZ1AjWm5AqLwJLnpVlw==
       }
     peerDependencies:
       dayjs: "*"
@@ -3758,7 +3752,7 @@ packages:
       }
     dependencies:
       core-js: 3.26.1
-      element-plus: 2.2.25_vue@3.2.45
+      element-plus: 2.2.26_vue@3.2.45
       vue: 3.2.45
     transitivePeerDependencies:
       - "@vue/composition-api"
@@ -3771,10 +3765,10 @@ packages:
       }
     dev: true
 
-  /element-plus/2.2.25_vue@3.2.45:
+  /element-plus/2.2.26_vue@3.2.45:
     resolution:
       {
-        integrity: sha512-HC8CWY31e6pPyBpgqI0QnWkBgs0vRzdYnEw3mpdM/NlKfp0PtNFX7NESQLomqoIulH5ftL09hjQmJNvZBQpthQ==
+        integrity: sha512-O/rdY5m9DkclpVg8r3GynyqCunm7MxSR142xSsjrZA77bi7bcwA3SIy6SPEDqHi5R4KqgkGYgKSp4Q4e3irbYg==
       }
     peerDependencies:
       vue: ^3.2.0
@@ -4717,14 +4711,6 @@ packages:
         optional: true
     dev: false
 
-  /font-awesome/4.7.0:
-    resolution:
-      {
-        integrity: sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==
-      }
-    engines: { node: ">=0.10.3" }
-    dev: true
-
   /form-data/4.0.0:
     resolution:
       {
@@ -5895,10 +5881,10 @@ packages:
       }
     dev: true
 
-  /md-editor-v3/2.4.2:
+  /md-editor-v3/2.5.0:
     resolution:
       {
-        integrity: sha512-qVbvfIifrXwfi9In8l14nW+A5MXaE9UxN7d+Iw2QtXFV0kaDfS5H2Z5kMeVP61GaLLkdbOi4GCt0X2izZ0rdJw==
+        integrity: sha512-qB6w4jQU7uItAcJYuG/JaFVLDWZ2NgegLsCHNeQV5R1CgMC8MKJYcFxMpCDf8YNRMrN9zK0Kd+grYp1rq4KhNw==
       }
     engines: { node: ">=12.0.0" }
     dev: false
@@ -8862,10 +8848,10 @@ packages:
       "@vue/server-renderer": 3.2.45_vue@3.2.45
       "@vue/shared": 3.2.45
 
-  /vue3-danmaku/1.0.0_vue@3.2.45:
+  /vue3-danmaku/1.1.0_vue@3.2.45:
     resolution:
       {
-        integrity: sha512-1DVPQeQBdv/iGyuumebZLKPHcfvSgPwxe/ExKF1jc/dJ3MINbXkw23iIajE8JKNvttagOX7eZnuwWnQ4ug8pqg==
+        integrity: sha512-8I+WOC8/79I2/8PRZ2fPIPd45pM4G3l7SkS9l8IvdpFjf2CzZgAp5rF+5BMcURDQu0ckVVYSmUb6TU0r0YJ3LQ==
       }
     peerDependencies:
       vue: ^3.0.0
@@ -8885,19 +8871,6 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /vxe-table/4.3.6_vue@3.2.45+xe-utils@3.5.7:
-    resolution:
-      {
-        integrity: sha512-SZ+ocVoOFc1PSzvpz6q5n7YvWvPSXUV+raet0zaSbQy3g8Dj7jKNlFbcsSoWZm8Uys9ufAQxeqYO5rRwOB2m7A==
-      }
-    peerDependencies:
-      vue: ^3.2.28
-      xe-utils: ^3.5.0
-    dependencies:
-      vue: 3.2.45
-      xe-utils: 3.5.7
-    dev: false
-
   /webpack-sources/3.2.3:
     resolution:
       {
@@ -9013,13 +8986,6 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
-  /xe-utils/3.5.7:
-    resolution:
-      {
-        integrity: sha512-3H+fDBKBR2wLJgyA7k9C/w1Xljx6Maml5ukV0WDY06HjYyGs2FEz6XhcwRCLIDXX4pBP3Gu0nX9DbCeuuRA2Ew==
-      }
-    dev: false
-
   /xgplayer-subtitles/1.0.22:
     resolution:
       {

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "3.9.0",
+  "Version": "3.9.4",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,
@@ -17,6 +17,8 @@
   "ShowLogo": true,
   "ShowModel": "smart",
   "MenuArrowIconNoTransition": true,
+  "CachingAsyncRoutes": true,
+  "TooltipEffect": "light",
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
     "options": {

src/components/ReIcon/src/offlineIcon.ts

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

src/components/ReQrcode/src/index.tsx

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

src/components/ReTable/src/bar.tsx

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

src/layout/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"

src/layout/components/panel/index.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { onClickOutside } from "@vueuse/core";
+import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
+import { onClickOutside } from "@vueuse/core";
 import Close from "@iconify-icons/ep/close";
 
-const show = ref<Boolean>(false);
 const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    "mr-[20px]",
+    "outline-none",
+    "width-[20px]",
+    "height-[20px]",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
 onClickOutside(target, (event: any) => {
   if (event.clientX > target.value.offsetLeft) return;
   show.value = false;
@@ -23,9 +39,11 @@ emitter.on("openPanel", () => {
       <div class="right-panel-items">
         <div class="project-configuration">
           <h4 class="dark:text-white">项目配置</h4>
-          <span title="关闭配置">
+          <span title="关闭配置" :class="iconClass">
             <IconifyIconOffline
               class="dark:text-white"
+              width="20px"
+              height="20px"
               :icon="Close"
               @click="show = !show"
             />
@@ -69,7 +87,6 @@ emitter.on("openPanel", () => {
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  // background: #fff;
   z-index: 40000;
 }
 
@@ -125,16 +142,6 @@ emitter.on("openPanel", () => {
   align-items: center;
   top: 15px;
   margin-left: 10px;
-
-  svg {
-    font-size: 20px;
-    margin-right: 20px;
-
-    &:hover {
-      cursor: pointer;
-      color: var(--el-color-primary);
-    }
-  }
 }
 
 :deep(.el-divider--horizontal) {

src/layout/components/setting/index.vue

@@ -6,8 +6,15 @@ import {
   reactive,
   computed,
   nextTick,
-  useCssModule
+  onBeforeMount
 } from "vue";
+import {
+  useDark,
+  debounce,
+  useGlobal,
+  storageLocal,
+  storageSession
+} from "@pureadmin/utils";
 import { getConfig } from "@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
@@ -17,16 +24,9 @@ import { removeToken } from "@/utils/auth";
 import { routerArrays } from "@/layout/types";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
+import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 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 dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
@@ -34,9 +34,8 @@ 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();
@@ -161,30 +160,10 @@ function logoChange() {
 
 function setFalse(Doms): any {
   Doms.forEach(v => {
-    toggleClass(false, isSelect, unref(v));
+    toggleClass(false, "is-select", unref(v));
   });
 }
 
-watch($storage, ({ layout }) => {
-  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 => {
@@ -218,14 +197,36 @@ function setLayoutModel(layout: string) {
   useAppStoreHook().setLayout(layout);
 }
 
-/* 初始化项目配置 */
-nextTick(() => {
-  settings.greyVal &&
-    document.querySelector("html")?.setAttribute("class", "html-grey");
-  settings.weakVal &&
-    document.querySelector("html")?.setAttribute("class", "html-weakness");
-  settings.tabsVal && tagsChange();
+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;
+  }
+});
+
+onBeforeMount(() => {
   dataThemeChange();
+  /* 初始化项目配置 */
+  nextTick(() => {
+    settings.greyVal &&
+      document.querySelector("html")?.setAttribute("class", "html-grey");
+    settings.weakVal &&
+      document.querySelector("html")?.setAttribute("class", "html-weakness");
+    settings.tabsVal && tagsChange();
+  });
 });
 </script>
 
@@ -243,9 +244,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')"
         >
@@ -256,12 +263,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')"
         >
@@ -272,12 +281,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')"
         >
@@ -392,13 +403,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%;
 
@@ -410,11 +424,6 @@ nextTick(() => {
   }
 }
 
-:deep(.el-divider__text) {
-  font-size: 16px;
-  font-weight: 700;
-}
-
 .pure-datatheme {
   width: 100%;
   height: 50px;

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>

src/layout/components/sidebar/horizontal.vue

@@ -41,7 +41,10 @@ watch(
 </script>
 
 <template>
-  <div class="horizontal-header">
+  <div
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
     <div class="horizontal-header-left" @click="backHome">
       <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
       <h4>{{ title }}</h4>
@@ -129,6 +132,10 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
 .translation {
   ::v-deep(.el-dropdown-menu__item) {
     padding: 5px 40px;

src/layout/components/sidebar/leftCollapse.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useDark } from "@pureadmin/utils";
+import { ref, computed } 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;
@@ -10,7 +10,25 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   isActive: false
 });
-const { isDark } = useDark();
+
+const visible = ref(false);
+const { tooltipEffect } = useNav();
+
+const iconClass = computed(() => {
+  return [
+    "ml-4",
+    "mb-1",
+    "w-[16px]",
+    "h-[16px]",
+    "inline-block",
+    "align-middle",
+    "text-primary",
+    "cursor-pointer",
+    "duration-[360ms]",
+    "hover:text-primary",
+    "dark:hover:!text-white"
+  ];
+});
 
 const emit = defineEmits<{
   (e: "toggleClick"): void;
@@ -25,13 +43,17 @@ const toggleClick = () => {
   <div class="container">
     <el-tooltip
       placement="right"
-      :effect="isDark ? 'dark' : 'light'"
+      :visible="visible"
+      :effect="tooltipEffect"
       :content="props.isActive ? '点击折叠' : '点击展开'"
     >
       <IconifyIconOffline
-        :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"
+        :icon="MenuFold"
+        :class="iconClass"
+        :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
         @click="toggleClick"
+        @mouseenter="visible = true"
+        @mouseleave="visible = false"
       />
     </el-tooltip>
   </div>

src/layout/components/sidebar/mixNav.vue

@@ -58,7 +58,11 @@ watch(
 </script>
 
 <template>
-  <div v-if="device !== 'mobile'" class="horizontal-header">
+  <div
+    v-if="device !== 'mobile'"
+    class="horizontal-header"
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+  >
     <el-menu
       router
       ref="menuRef"
@@ -161,6 +165,10 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
 .translation {
   ::v-deep(.el-dropdown-menu__item) {
     padding: 5px 40px;

src/layout/components/sidebar/sidebarItem.vue

@@ -12,7 +12,7 @@ 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 } = useNav();
+const { layout, isCollapse, tooltipEffect } = useNav();
 
 const props = defineProps({
   item: {
@@ -201,6 +201,7 @@ function resolvePath(routePath) {
           <el-tooltip
             v-else
             placement="top"
+            :effect="tooltipEffect"
             :offset="-10"
             :disabled="!onlyOneChild.showTooltip"
           >
@@ -246,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) }}

src/layout/components/sidebar/vertical.vue

@@ -59,7 +59,10 @@ watch(
 </script>
 
 <template>
-  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
+  <div
+    v-loading="menuData.length === 0"
+    :class="['sidebar-container', showLogo ? 'has-logo' : '']"
+  >
     <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar
       wrap-class="scrollbar-wrapper"
@@ -91,3 +94,9 @@ watch(
     />
   </div>
 </template>
+
+<style scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+</style>

src/layout/hooks/useNav.ts

@@ -18,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(() => {
@@ -153,6 +155,7 @@ export function useNav() {
     pureApp,
     username,
     avatarsStyle,
+    tooltipEffect,
     getDropdownItemStyle,
     getDropdownItemClass
   };

src/layout/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import "animate.css";
+// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
+import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
 import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";

src/layout/theme/index.ts

@@ -2,19 +2,14 @@
  * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
  */
 
-import { EpThemeColor } from "../../../public/serverConfig.json";
-
 type MultipleScopeVarsItem = {
   scopeName: string;
   varsContent: string;
 };
 
-/** 将vxe默认主题色和ep默认主题色保持一致 */
-const vxeColor = EpThemeColor;
 /** 预设主题色 */
 const themeColors = {
   default: {
-    vxeColor,
     subMenuActiveText: "#fff",
     menuBg: "#001529",
     menuHover: "#4091f7",
@@ -26,7 +21,6 @@ const themeColors = {
     menuActiveBefore: "#4091f7"
   },
   light: {
-    vxeColor,
     subMenuActiveText: "#409eff",
     menuBg: "#fff",
     menuHover: "#e0ebf6",
@@ -38,7 +32,6 @@ const themeColors = {
     menuActiveBefore: "#4091f7"
   },
   dusk: {
-    vxeColor: "#f5222d",
     subMenuActiveText: "#fff",
     menuBg: "#2a0608",
     menuHover: "#e13c39",
@@ -50,7 +43,6 @@ const themeColors = {
     menuActiveBefore: "#e13c39"
   },
   volcano: {
-    vxeColor: "#fa541c",
     subMenuActiveText: "#fff",
     menuBg: "#2b0e05",
     menuHover: "#e85f33",
@@ -62,7 +54,6 @@ const themeColors = {
     menuActiveBefore: "#e85f33"
   },
   yellow: {
-    vxeColor: "#fadb14",
     subMenuActiveText: "#d25f00",
     menuBg: "#2b2503",
     menuHover: "#f6da4d",
@@ -74,7 +65,6 @@ const themeColors = {
     menuActiveBefore: "#f6da4d"
   },
   mingQing: {
-    vxeColor: "#13c2c2",
     subMenuActiveText: "#fff",
     menuBg: "#032121",
     menuHover: "#59bfc1",
@@ -86,7 +76,6 @@ const themeColors = {
     menuActiveBefore: "#59bfc1"
   },
   auroraGreen: {
-    vxeColor: "#52c41a",
     subMenuActiveText: "#fff",
     menuBg: "#0b1e15",
     menuHover: "#60ac80",
@@ -98,7 +87,6 @@ const themeColors = {
     menuActiveBefore: "#60ac80"
   },
   pink: {
-    vxeColor: "#eb2f96",
     subMenuActiveText: "#fff",
     menuBg: "#28081a",
     menuHover: "#d84493",
@@ -110,7 +98,6 @@ const themeColors = {
     menuActiveBefore: "#d84493"
   },
   saucePurple: {
-    vxeColor: "#722ed1",
     subMenuActiveText: "#fff",
     menuBg: "#130824",
     menuHover: "#693ac9",
@@ -132,7 +119,6 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
     result.push({
       scopeName: `layout-theme-${key}`,
       varsContent: `
-        $vxe-primary-color: ${themeColors[key].vxeColor} !default;
         $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
         $menuBg: ${themeColors[key].menuBg} !default;
         $menuHover: ${themeColors[key].menuHover} !default;

src/layout/types.ts

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

src/main.ts

@@ -7,7 +7,6 @@ import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
-import { useTable } from "@/plugins/vxe-table";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
 import Table from "@pureadmin/table";
@@ -55,7 +54,6 @@ getServerConfig(app).then(async config => {
     .use(ElementPlus)
     .use(Table)
     .use(PureDescriptions)
-    .use(useTable)
     .use(useEcharts);
   app.mount("#app");
 });

src/plugins/vxe-table/index.scss

@@ -1,6 +0,0 @@
-@import "vxe-table/styles/variable.scss";
-@import "vxe-table/styles/modules.scss";
-
-i {
-  border-color: initial;
-}

src/plugins/vxe-table/index.ts

@@ -1,114 +0,0 @@
-import "xe-utils";
-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";
-
-import {
-  // 核心
-  VXETable,
-  // 表格功能
-  Icon,
-  Filter,
-  Edit,
-  Menu,
-  Export,
-  Keyboard,
-  Validator,
-  // 可选组件
-  Column,
-  Colgroup,
-  Grid,
-  Tooltip,
-  Toolbar,
-  Pager,
-  Form,
-  FormItem,
-  FormGather,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Switch,
-  Input,
-  Select,
-  Optgroup,
-  Option,
-  Textarea,
-  Button,
-  Modal,
-  List,
-  Pulldown,
-  // 表格
-  Table
-} from "vxe-table";
-
-// 全局默认参数
-VXETable.setup({
-  size: "medium",
-  version: 0,
-  zIndex: 1002,
-  table: {
-    // 自动监听父元素的变化去重新计算表格
-    autoResize: true,
-    // 鼠标移到行是否要高亮显示
-    highlightHoverRow: true
-  },
-  input: {
-    clearable: true
-  },
-  i18n: (key, args) => {
-    return unref(i18n.global.locale) === "zh"
-      ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
-      : XEUtils.toFormatString(XEUtils.get(en, key), args);
-  },
-  translate(key) {
-    const NAMESPACED = ["el.", "buttons."];
-    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
-      return i18n.global.t.call(i18n.global.locale, key);
-    }
-    return key;
-  }
-});
-
-export function useTable(app: App) {
-  app
-    .use(Icon)
-    .use(Filter)
-    .use(Edit)
-    .use(Menu)
-    .use(Export)
-    .use(Keyboard)
-    .use(Validator)
-    // 可选组件
-    .use(Column)
-    .use(Colgroup)
-    .use(Grid)
-    .use(Tooltip)
-    .use(Toolbar)
-    .use(Pager)
-    .use(Form)
-    .use(FormItem)
-    .use(FormGather)
-    .use(Checkbox)
-    .use(CheckboxGroup)
-    .use(Radio)
-    .use(RadioGroup)
-    .use(RadioButton)
-    .use(Switch)
-    .use(Input)
-    .use(Select)
-    .use(Optgroup)
-    .use(Option)
-    .use(Textarea)
-    .use(Button)
-    .use(Modal)
-    .use(List)
-    .use(Pulldown)
-    // 安装表格
-    .use(Table);
-}

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,

src/router/modules/able.ts

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

src/router/modules/components.ts

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

src/router/modules/editor.ts

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

src/router/modules/error.ts

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

src/router/modules/flowchart.ts

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

src/router/modules/formdesign.ts

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

src/router/modules/guide.ts

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

src/router/modules/home.ts

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

src/router/modules/list.ts

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

src/router/modules/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;

src/router/modules/nested.ts

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

src/router/modules/ppt.ts

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

src/router/modules/remaining.ts

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

src/router/modules/result.ts

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

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;

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(cloneDeep(data));
+          storageSession.setItem(key, data);
+          resolve(router);
+        });
+      });
+    }
+  } else {
+    return new Promise(resolve => {
+      getAsyncRoutes().then(({ data }) => {
+        handleAsyncRoutes(cloneDeep(data));
+        resolve(router);
+      });
     });
-  });
+  }
 }
 
 /**

src/style/dark.scss

@@ -41,97 +41,6 @@ html.dark {
     }
   }
 
-  /* vxe-table */
-  .vxe-table--header-wrapper,
-  .vxe-table--body-wrapper {
-    color: var(--el-text-color-primary);
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-table--render-default.border--full .vxe-header--column,
-  .vxe-table--render-default.border--full .vxe-body--column,
-  .vxe-table--render-default.border--full .vxe-footer--column {
-    background-image: linear-gradient(
-        var(--el-border-color-lighter),
-        var(--el-border-color-lighter)
-      ),
-      linear-gradient(
-        var(--el-border-color-lighter),
-        var(--el-border-color-lighter)
-      );
-  }
-
-  /* 表头 */
-  .vxe-table--header-wrapper {
-    background: #262727 !important;
-  }
-
-  .vxe-table--render-wrapper,
-  .vxe-table--main-wrapper {
-    border: none;
-  }
-
-  .vxe-pager.is--perfect,
-  .vxe-table--render-default .vxe-table--border-line {
-    border: 1px solid var(--el-border-color-lighter);
-  }
-
-  .vxe-table--header-border-line {
-    border-bottom: 1px solid var(--el-border-color-lighter) !important;
-  }
-
-  .vxe-body--row.row--hover,
-  .vxe-pager {
-    background-color: #262727;
-  }
-
-  .vxe-input--inner,
-  .vxe-pager .vxe-pager--jump-prev,
-  .vxe-pager .vxe-pager--prev-btn,
-  .vxe-pager .vxe-pager--next-btn,
-  .vxe-pager .vxe-pager--jump-next,
-  .vxe-pager .vxe-pager--num-btn,
-  .vxe-pager .vxe-pager--jump .vxe-pager--goto {
-    background-color: transparent;
-    color: var(--el-text-color-primary);
-    // outline: none !important;
-  }
-
-  .vxe-select-option--wrapper {
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-select-option:not(.is--disabled).is--hover {
-    background: var(--el-color-primary-light-6) !important;
-  }
-
-  .vxe-modal--wrapper.type--modal .vxe-modal--box,
-  .vxe-modal--wrapper.type--alert .vxe-modal--box,
-  .vxe-modal--wrapper.type--confirm .vxe-modal--box,
-  .vxe-form {
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-modal--box,
-  .vxe-modal--header {
-    border: none;
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-modal--title,
-  .vxe-button--content,
-  .vxe-modal--header-title {
-    color: var(--el-text-color-primary);
-  }
-
-  .vxe-button.type--button:hover {
-    background: var(--el-color-primary) !important;
-  }
-
-  .vxe-button {
-    background-color: transparent;
-  }
-
   /* 项目配置面板 */
   .right-panel-items {
     .el-divider__text {
@@ -187,6 +96,19 @@ html.dark {
     background: transparent;
   }
 
+  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+  .el-icon {
+    &.el-dialog__close,
+    &.el-drawer__close,
+    &.el-message-box__close,
+    &.el-notification__closeBtn {
+      &:hover {
+        color: rgba(255, 255, 255, 0.85) !important;
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+  }
+
   /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
   .pure-message {
     background-image: initial !important;

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 {
@@ -63,6 +69,33 @@
   }
 }
 
+/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+.el-dialog__headerbtn,
+.el-message-box__headerbtn {
+  &:hover {
+    .el-dialog__close {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+.el-icon {
+  &.el-dialog__close,
+  &.el-drawer__close,
+  &.el-message-box__close,
+  &.el-notification__closeBtn {
+    width: 24px;
+    height: 24px;
+    outline: none;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+    &:hover {
+      color: rgba(0, 0, 0, 0.88) !important;
+      background-color: rgba(0, 0, 0, 0.06);
+      text-decoration: none;
+    }
+  }
+}
+
 /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
 .pure-message {
   border-width: 0 !important;

src/style/index.scss

@@ -19,9 +19,3 @@
 .html-weakness {
   filter: invert(80%);
 }
-
-/* 重置 vxe-table 样式 */
-.vxe-button.type--button.theme--primary:hover,
-.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
-  color: #fff !important;
-}

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,

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格式） */

src/views/able/print.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import Print from "@/utils/print";
-import { reactive, ref } from "vue";
-import { VxeTablePropTypes } from "vxe-table";
 import Line from "../welcome/components/Line.vue";
 
 defineOptions({
@@ -14,43 +13,6 @@ interface User {
   address: string;
 }
 
-const demo1 = reactive({
-  tableData: [
-    {
-      id: 10001,
-      name: "Test1",
-      role: "Develop",
-      sex: "Man",
-      age: 28,
-      address: "test abc"
-    },
-    {
-      id: 10002,
-      name: "Test2",
-      role: "Test",
-      sex: "Women",
-      age: 22,
-      address: "Guangzhou"
-    },
-    {
-      id: 10003,
-      name: "Test3",
-      role: "PM",
-      sex: "Man",
-      age: 32,
-      address: "Shanghai"
-    },
-    {
-      id: 10004,
-      name: "Test4",
-      role: "Designer",
-      sex: "Women",
-      age: 24,
-      address: "Shanghai"
-    }
-  ]
-});
-
 const value = ref("1");
 
 const options = [
@@ -59,11 +21,6 @@ const options = [
     el: ".el-table",
     label: "Element-Plus Table"
   },
-  {
-    value: "2",
-    el: ".vxe-table",
-    label: "Vxe Table"
-  },
   {
     value: "3",
     el: ".echart",
@@ -81,38 +38,6 @@ function onPrint() {
   Print(el).toPrint;
 }
 
-const headerCellStyle: VxeTablePropTypes.HeaderCellStyle = ({ column }) => {
-  if (column.property === "name") {
-    return {
-      backgroundColor: "#f60",
-      color: "#ffffff"
-    };
-  }
-};
-
-const rowStyle: VxeTablePropTypes.RowStyle = ({ rowIndex }) => {
-  if ([2, 3, 5].includes(rowIndex)) {
-    return {
-      backgroundColor: "red",
-      color: "#ffffff"
-    };
-  }
-};
-
-const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
-  if (column.property === "sex") {
-    if (row.sex >= "1") {
-      return {
-        backgroundColor: "#187"
-      };
-    } else if (row.age === 26) {
-      return {
-        backgroundColor: "#2db7f5"
-      };
-    }
-  }
-};
-
 const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
   if (rowIndex === 1) {
     return "warning-row";
@@ -205,45 +130,6 @@ const tableData: User[] = [
         </el-table>
       </el-col>
 
-      <el-col
-        :xs="22"
-        :sm="22"
-        :md="11"
-        :lg="11"
-        :xl="11"
-        style="margin: 10px; border: 0.01rem solid var(--el-color-primary)"
-        v-motion
-        :initial="{
-          opacity: 0,
-          y: 100
-        }"
-        :enter="{
-          opacity: 1,
-          y: 0,
-          transition: {
-            delay: 200
-          }
-        }"
-      >
-        <p class="font-medium pt-1">Vxe Table</p>
-        <vxe-table
-          class="vxe-table"
-          border
-          style="margin: 40px auto"
-          :header-cell-style="headerCellStyle"
-          :row-style="rowStyle"
-          :cell-style="cellStyle"
-          :data="demo1.tableData"
-        >
-          <vxe-column type="seq" width="60" />
-          <vxe-column field="name" title="Name" />
-          <vxe-column field="sex" title="Sex" />
-          <vxe-column field="age" title="Age" />
-          <vxe-column field="attr1" title="Attr1" />
-          <vxe-column field="address" title="Address" show-overflow />
-        </vxe-table>
-      </el-col>
-
       <el-col
         :xs="22"
         :sm="22"

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>

src/views/menuoverflow/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: "MenuOverflow"
+});
+</script>
+
+<template>
+  <div>目录、菜单文字超出显示 Tooltip 文字提示</div>
+</template>

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();
       }

src/views/pure-table/high/list.tsx

@@ -1,3 +1,4 @@
+import Page from "./page/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
@@ -6,11 +7,24 @@ import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
 import Print from "./prints/index.vue";
 import Echarts from "./echarts/index.vue";
+import TableSelect from "./table-select/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
 
 export const list = [
+  {
+    key: "page",
+    content: rendContent("page"),
+    title: "分页、加载动画",
+    component: Page
+  },
+  {
+    key: "tableSelect",
+    content: rendContent("table-select"),
+    title: "表格选择器",
+    component: TableSelect
+  },
   {
     key: "rowDrag",
     content: rendContent("drag/row"),

src/views/pure-table/high/page/columns.tsx

@@ -0,0 +1,91 @@
+import { tableData } from "../data";
+import { clone, delay } from "@pureadmin/utils";
+import { ref, onMounted, reactive, watchEffect } from "vue";
+import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const paginationAlign = ref("right");
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    pageSizes: [10, 15, 20],
+    total: 0,
+    align: "right",
+    background: true
+  });
+
+  /** 加载动画配置 */
+  const loadingConfig = reactive<LoadingConfig>({
+    text: "正在加载第一页...",
+    viewBox: "-10, -10, 50, 50",
+    spinner: `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `
+    // svg: "",
+    // background: rgba()
+  });
+
+  function onSizeChange(val) {
+    console.log("onSizeChange", val);
+  }
+
+  function onCurrentChange(val) {
+    loadingConfig.text = `正在加载第${val}页...`;
+    loading.value = true;
+    delay(600).then(() => {
+      loading.value = false;
+    });
+  }
+
+  watchEffect(() => {
+    pagination.align = paginationAlign.value as Align;
+  });
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      dataList.value = newList.flat(Infinity);
+      pagination.total = dataList.value.length;
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    columns,
+    dataList,
+    pagination,
+    loadingConfig,
+    paginationAlign,
+    onSizeChange,
+    onCurrentChange
+  };
+}

src/views/pure-table/high/page/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const {
+  loading,
+  columns,
+  dataList,
+  pagination,
+  loadingConfig,
+  paginationAlign,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-space class="float-right mb-2">
+      <p>分页的对齐方式：</p>
+      <el-radio-group v-model="paginationAlign">
+        <el-radio-button label="right">right</el-radio-button>
+        <el-radio-button label="center">center</el-radio-button>
+        <el-radio-button label="left">left</el-radio-button>
+      </el-radio-group>
+    </el-space>
+    <pure-table
+      border
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :loading="loading"
+      :loading-config="loadingConfig"
+      :height="440"
+      :data="
+        dataList.slice(
+          (pagination.currentPage - 1) * pagination.pageSize,
+          pagination.currentPage * pagination.pageSize
+        )
+      "
+      :columns="columns"
+      :pagination="pagination"
+      @size-change="onSizeChange"
+      @current-change="onCurrentChange"
+    />
+  </div>
+</template>

src/views/pure-table/high/table-select/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import radioSelectTable from "./radio/index.vue";
+import multipleSelectTable from "./multiple/index.vue";
+
+const model = ref("radio");
+</script>
+
+<template>
+  <el-space>
+    <el-radio-group v-model="model">
+      <el-radio-button label="radio">单选</el-radio-button>
+      <el-radio-button label="multiple">多选</el-radio-button>
+    </el-radio-group>
+    <el-divider direction="vertical" />
+    <component
+      :is="model === 'radio' ? radioSelectTable : multipleSelectTable"
+    />
+  </el-space>
+</template>

src/views/pure-table/high/table-select/multiple/columns.tsx

@@ -0,0 +1,74 @@
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref, tableRef: Ref) {
+  const selectValue = ref([]);
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left"
+    },
+    {
+      label: "ID",
+      prop: "id",
+      width: 80
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableDataEdit.length,
+    background: true,
+    small: true
+  });
+
+  const handleSelectionChange = val => {
+    const arr = [];
+    val.forEach(v => {
+      arr.push(v.name);
+    });
+    selectValue.value = arr;
+  };
+
+  const removeTag = val => {
+    // TODO optimize el-select add formatter
+    const { toggleRowSelection } = tableRef.value.getTableRef();
+    toggleRowSelection(tableDataEdit.filter(v => v.name === val)[0], false);
+  };
+
+  const onClear = () => {
+    const { clearSelection } = tableRef.value.getTableRef();
+    clearSelection();
+  };
+
+  const onSure = () => {
+    selectRef.value.blur();
+  };
+
+  return {
+    columns,
+    pagination,
+    selectValue,
+    tableDataEdit,
+    onSure,
+    onClear,
+    removeTag,
+    handleSelectionChange
+  };
+}

src/views/pure-table/high/table-select/multiple/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const selectRef = ref();
+const tableRef = ref();
+const {
+  columns,
+  pagination,
+  selectValue,
+  tableDataEdit,
+  onClear,
+  onSure,
+  removeTag,
+  handleSelectionChange
+} = useColumns(selectRef, tableRef);
+</script>
+
+<template>
+  <el-select
+    class="w-[160px]"
+    ref="selectRef"
+    v-model="selectValue"
+    placeholder="请选择"
+    clearable
+    multiple
+    collapse-tags
+    collapse-tags-tooltip
+    @remove-tag="removeTag"
+    @clear="onClear"
+  >
+    <template #empty>
+      <div class="w-[600px] m-4">
+        <pure-table
+          ref="tableRef"
+          height="355"
+          row-key="id"
+          :header-cell-style="{
+            background: '#f5f7fa',
+            color: '#303133'
+          }"
+          :data="
+            tableDataEdit.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @selection-change="handleSelectionChange"
+        />
+        <el-button
+          class="absolute bottom-[17px]"
+          type="primary"
+          size="small"
+          text
+          bg
+          @click="onSure"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-select>
+</template>

src/views/pure-table/high/table-select/radio/columns.tsx

@@ -0,0 +1,61 @@
+import { message } from "@/utils/message";
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref) {
+  const selectValue = ref("");
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id",
+      width: 80
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 5,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableDataEdit.length,
+    background: true,
+    small: true
+  });
+
+  /** 高亮当前选中行 */
+  function rowStyle({ row: { name } }) {
+    return {
+      cursor: "pointer",
+      background: name === selectValue.value ? "#f5f7fa" : ""
+    };
+  }
+
+  /** 行点击 */
+  function onRowClick(row) {
+    selectValue.value = row.name;
+    selectRef.value.blur();
+    message(`当前选中行的数据为：${JSON.stringify(row)}`, { type: "success" });
+  }
+
+  return {
+    columns,
+    pagination,
+    selectValue,
+    tableDataEdit,
+    rowStyle,
+    onRowClick
+  };
+}

src/views/pure-table/high/table-select/radio/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const selectRef = ref();
+const {
+  columns,
+  pagination,
+  selectValue,
+  tableDataEdit,
+  rowStyle,
+  onRowClick
+} = useColumns(selectRef);
+</script>
+
+<template>
+  <el-select
+    ref="selectRef"
+    v-model="selectValue"
+    placeholder="请选择"
+    clearable
+  >
+    <template #empty>
+      <div class="w-[600px] m-4">
+        <pure-table
+          height="355"
+          row-key="id"
+          :header-cell-style="{
+            background: '#f5f7fa',
+            color: '#303133'
+          }"
+          :row-style="rowStyle"
+          :data="
+            tableDataEdit.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @row-click="onRowClick"
+        />
+      </div>
+    </template>
+  </el-select>
+</template>

src/views/system/dict/config.vue

@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-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;
-  drawTitle?: string;
-  direction?: Direction;
-}
-
-withDefaults(defineProps<Props>(), {
-  drawer: false,
-  drawTitle: "",
-  direction: "rtl"
-});
-
-const emit = defineEmits<{
-  (e: "handleClose"): void;
-}>();
-
-const { t } = useI18n();
-
-const xTable = ref({} as VxeTableInstance);
-
-const configData = reactive({
-  tableData: [
-    {
-      name: "禁用",
-      dataval: "0"
-    },
-    {
-      name: "启用",
-      dataval: "1"
-    }
-  ],
-  isAllChecked: false,
-  isIndeterminate: false,
-  selectRecords: [] as any[],
-  tablePage: {
-    total: 0,
-    currentPage: 1,
-    pageSize: 10
-  }
-});
-
-// 抽屉关闭
-function handleClose() {
-  configData.isAllChecked = false;
-  configData.isIndeterminate = false;
-  emit("handleClose");
-}
-
-function editConfig(row) {
-  console.log("editConfig", row);
-}
-
-function delConfig(row) {
-  console.log("delConfig", row);
-}
-
-const changeAllEvent = () => {
-  setTimeout(() => {
-    console.log(xTable);
-  }, 1000);
-  const $table = xTable.value;
-  $table.setAllCheckboxRow(configData.isAllChecked);
-  configData.selectRecords = $table.getCheckboxRecords();
-};
-
-const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
-  const $table = xTable.value;
-  configData.isAllChecked = $table.isAllCheckboxChecked();
-  configData.isIndeterminate = $table.isAllCheckboxIndeterminate();
-  configData.selectRecords = records;
-};
-</script>
-
-<template>
-  <div class="config">
-    <el-drawer
-      :model-value="drawer"
-      :direction="direction"
-      :before-close="handleClose"
-      destroy-on-close
-      size="680px"
-    >
-      <template #header>
-        <span class="text-black dark:text-white">{{ drawTitle }}</span>
-      </template>
-      <el-divider />
-      <!-- 列表 -->
-      <div class="p-2">
-        <vxe-table
-          ref="xTable"
-          border
-          :data="configData.tableData"
-          @checkbox-change="checkboxChangeEvent"
-          @checkbox-all="checkboxChangeEvent"
-        >
-          <vxe-table-column type="checkbox" width="60" />
-          <vxe-table-column field="name" title="名称" />
-          <vxe-table-column field="dataval" title="数据值" />
-          <vxe-table-column title="操作" fixed="right">
-            <template #default="{ row }">
-              <el-button
-                link
-                type="primary"
-                :icon="useRenderIcon(EditPen)"
-                @click="editConfig(row)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                link
-                type="primary"
-                :icon="useRenderIcon(Delete)"
-                @click="delConfig(row)"
-              >
-                删除
-              </el-button>
-            </template>
-          </vxe-table-column>
-        </vxe-table>
-        <vxe-pager
-          perfect
-          v-model:current-page="configData.tablePage.currentPage"
-          v-model:page-size="configData.tablePage.pageSize"
-          :total="configData.tablePage.total"
-          :layouts="[
-            'PrevJump',
-            'PrevPage',
-            'Number',
-            'NextPage',
-            'NextJump',
-            'Sizes',
-            'FullJump',
-            'Total'
-          ]"
-        >
-          <template #left>
-            <span class="absolute left-3 flex items-center">
-              <vxe-checkbox
-                v-model="configData.isAllChecked"
-                :indeterminate="configData.isIndeterminate"
-                @change="changeAllEvent"
-              />
-              <p>已选中{{ configData.selectRecords.length }}条</p>
-              <el-button link type="danger" class="ml-1">
-                {{ t("buttons.hsdelete") }}
-              </el-button>
-            </span>
-          </template>
-        </vxe-pager>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-drawer__header) {
-  margin-bottom: 0;
-}
-
-:deep(.el-drawer__body) {
-  padding: 0;
-}
-
-:deep(.el-divider--horizontal) {
-  margin: 13px 0;
-}
-</style>

src/views/system/dict/index.vue

@@ -1,386 +0,0 @@
-<script setup lang="ts">
-import XEUtils from "xe-utils";
-import Config from "./config.vue";
-import { useI18n } from "vue-i18n";
-import { clone } from "@pureadmin/utils";
-import { reactive, ref, unref, nextTick } from "vue";
-import { useCopyToClipboard } from "@pureadmin/utils";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import {
-  VXETable,
-  type TablePublicMethods,
-  type VxeTableInstance,
-  type VxeFormPropTypes,
-  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;
-  model: string;
-};
-
-defineOptions({
-  name: "Dict"
-});
-
-const { t } = useI18n();
-
-const dictData = reactive({
-  submitLoading: false,
-  showEdit: false,
-  selectRow: null,
-  filterName: "",
-  tableData: [
-    {
-      id: 1,
-      name: "状态",
-      model: "",
-      children: [
-        {
-          id: "1-1",
-          name: "服务状态",
-          model: "serviceStatus"
-        },
-        {
-          id: "1-2",
-          name: "在线状态",
-          model: "onlienStatus"
-        }
-      ]
-    },
-    { id: 2, name: "操作系统", model: "operatingSystem" }
-  ],
-  formData: {
-    name: "",
-    model: ""
-  },
-  formItems: [
-    {
-      field: "name",
-      title: "字典名称",
-      span: 24,
-      itemRender: {
-        name: "$input",
-        props: { placeholder: "请输入字典名称" }
-      }
-    },
-    {
-      field: "model",
-      title: "字典类型",
-      span: 24,
-      itemRender: {
-        name: "$input",
-        props: {
-          placeholder: "请输入字典类型",
-          //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
-          disabled: true
-        }
-      }
-    },
-    {
-      align: "right",
-      span: 24,
-      itemRender: {
-        name: "$buttons",
-        children: [
-          { props: { type: "submit", content: "提交", status: "primary" } },
-          { props: { type: "reset", content: "重置" } }
-        ]
-      }
-    }
-  ] as VxeFormPropTypes.Items
-});
-
-const originData = clone(dictData.tableData, true);
-
-const xTree = ref<TablePublicMethods>();
-const xForm = ref<FormMethods>();
-
-const handleSearch = () => {
-  const filterName = XEUtils.toValueString(dictData.filterName).trim();
-
-  if (filterName) {
-    const options = { children: "children" };
-    const searchProps = ["name"];
-
-    dictData.tableData = XEUtils.searchTree(
-      originData,
-      item =>
-        searchProps.some(
-          key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
-        ),
-      options
-    );
-
-    // 搜索之后默认展开所有子节点
-    nextTick(() => {
-      const $table = xTree.value;
-      $table.setAllTreeExpand(true);
-    });
-  } else {
-    dictData.tableData = originData;
-  }
-};
-
-// 创建一个防防抖函数，调用频率间隔 100 毫秒
-const searchEvent = XEUtils.debounce(
-  function () {
-    handleSearch();
-  },
-  100,
-  { leading: false, trailing: true }
-);
-
-const confirmEvent = async () => {
-  const type = await VXETable.modal.confirm("您确定要删除吗？");
-  (await type) === "confirm" &&
-    VXETable.modal.message({
-      content: "测试数据，不可删除",
-      status: "error"
-    });
-};
-
-function commonFn(value, disabled) {
-  dictData.selectRow = value;
-  dictData.showEdit = true;
-  dictData.formItems[1].itemRender.props.disabled = disabled;
-}
-
-// 新增
-function onAdd() {
-  commonFn(null, false);
-}
-
-// 新增子类型
-function onAddChild(row?: object) {
-  console.log("onAddChild", row);
-  commonFn(null, false);
-}
-
-// 编辑
-function onEdit(row?: onEditNRow) {
-  dictData.formData = {
-    name: row.name,
-    model: row.model ? row.model : "暂无字典类型"
-  };
-  commonFn(row, true);
-  // VXETable.modal.message({
-  //   content: "测试数据，不可编辑",
-  //   status: "error"
-  // });
-}
-
-// 拷贝当前列表项的数据（字典类型）
-const { clipboardValue } = useCopyToClipboard();
-const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
-  clipboardValue.value = unref(row).model;
-};
-
-const xTable = ref({} as VxeTableInstance);
-
-const submitEvent = () => {
-  dictData.submitLoading = true;
-  setTimeout(() => {
-    const $table = xTable.value;
-    dictData.submitLoading = false;
-    dictData.showEdit = false;
-    if (dictData.selectRow) {
-      VXETable.modal.message({ content: "保存成功", status: "success" });
-      Object.assign(dictData.selectRow, dictData.formData);
-    } else {
-      VXETable.modal.message({ content: "新增成功", status: "success" });
-      $table.insert(dictData.formData);
-    }
-  }, 500);
-};
-
-const drawer = ref(false);
-
-function onDeploy(value?: object) {
-  console.log("onDeploy", value);
-  drawer.value = true;
-}
-
-function handleClose() {
-  drawer.value = false;
-}
-
-function onExpand() {
-  xTree.value.setAllTreeExpand(true);
-}
-
-function onUnExpand() {
-  xTree.value.clearTreeExpand();
-}
-
-function onHide() {
-  xForm.value.reset();
-}
-</script>
-
-<template>
-  <div>
-    <!-- 工具栏 -->
-    <vxe-toolbar class="bg-bg_color">
-      <template #buttons>
-        <div class="ml-[20px]">
-          <label class="dark:text-text_color_regular">字典名称： </label>
-          <el-input
-            class="!w-[200px]"
-            v-model="dictData.filterName"
-            :placeholder="t('buttons.hssearch')"
-            @keyup.prevent="searchEvent"
-            @input="searchEvent"
-            clearable
-          />
-        </div>
-      </template>
-      <template #tools>
-        <el-button-group>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon('fa:plus-square-o')"
-            @click="onAdd"
-          >
-            {{ t("buttons.hsadd") }}
-          </el-button>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon('fa:folder-open-o')"
-            @click="onExpand"
-          >
-            {{ t("buttons.hsexpendAll") }}
-          </el-button>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon('fa:folder-o')"
-            @click="onUnExpand"
-          >
-            {{ t("buttons.hscollapseAll") }}
-          </el-button>
-        </el-button-group>
-      </template>
-    </vxe-toolbar>
-
-    <!-- 列表 -->
-    <vxe-table
-      ref="xTree"
-      border
-      resizable
-      :tree-config="{
-        children: 'children',
-        iconOpen: 'fa fa-minus-square-o',
-        iconClose: 'fa fa-plus-square-o'
-      }"
-      :data="dictData.tableData"
-      @cell-dblclick="cellDBLClickEvent"
-    >
-      <vxe-table-column tree-node field="name" title="字典名称" />
-      <vxe-table-column title="字典类型">
-        <template #default="{ row }">
-          <el-tooltip
-            effect="dark"
-            :content="'双击复制：' + row.model"
-            placement="right"
-          >
-            <span class="text-model">{{ row.model }}</span>
-          </el-tooltip>
-        </template>
-      </vxe-table-column>
-      <vxe-table-column title="操作" width="360" fixed="right">
-        <template #default="{ row }">
-          <el-button
-            link
-            type="primary"
-            :icon="useRenderIcon(EditPen)"
-            @click="onEdit(row)"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            :icon="useRenderIcon('fa:plus-square-o')"
-            @click="onAddChild(row)"
-          >
-            新增子类型
-          </el-button>
-          <el-button
-            v-show="row.model"
-            link
-            type="primary"
-            :icon="useRenderIcon('fa:cog')"
-            @click="onDeploy(row)"
-          >
-            字典配置
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            :icon="useRenderIcon(Delete)"
-            @click="confirmEvent"
-          >
-            删除
-          </el-button>
-        </template>
-      </vxe-table-column>
-    </vxe-table>
-
-    <!-- 修改、添加弹框 -->
-    <vxe-modal
-      resize
-      width="450"
-      v-model="dictData.showEdit"
-      :title="dictData.selectRow ? '编辑' : '新增'"
-      :loading="dictData.submitLoading"
-      @hide="onHide"
-    >
-      <template #default>
-        <vxe-form
-          ref="xForm"
-          :data="dictData.formData"
-          :items="dictData.formItems"
-          title-align="right"
-          title-width="100"
-          @submit="submitEvent"
-        />
-      </template>
-    </vxe-modal>
-
-    <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.vxe-input + .vxe-button,
-.vxe-input + .vxe-button--dropdown,
-.vxe-button + .vxe-button,
-.vxe-button + .vxe-button--dropdown {
-  margin-left: 0;
-}
-
-.vxe-button.type--button:not(.is--round) {
-  border-radius: 0;
-}
-
-.vxe-toolbar.size--medium {
-  padding: 10px;
-}
-
-.vxe-table--render-default.size--medium {
-  margin-top: 12px;
-}
-
-.vxe-button.size--medium.type--button {
-  margin-right: 0.07em;
-}
-
-.text-model {
-  &:hover {
-    cursor: pointer;
-  }
-}
-</style>

src/views/tree/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>即将发布</div>
-</template>
-
-<style scoped></style>

types/global.d.ts

@@ -6,7 +6,6 @@ import type {
 } from "vue";
 import type { ECharts } from "echarts";
 import type { IconifyIcon } from "@iconify/vue";
-import type { ResponsiveStorage } from "./index";
 import type { TableColumns } from "@pureadmin/table";
 import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
 
@@ -95,6 +94,8 @@ declare global {
     ShowLogo?: boolean;
     ShowModel?: string;
     MenuArrowIconNoTransition?: boolean;
+    CachingAsyncRoutes?: boolean;
+    TooltipEffect?: Effect;
     MapConfigure?: {
       amapKey?: string;
       options: {

types/index.d.ts

@@ -45,6 +45,8 @@ type TimeoutHandle = ReturnType<typeof setTimeout>;
 
 type IntervalHandle = ReturnType<typeof setInterval>;
 
+type Effect = "light" | "dark";
+
 interface ChangeEvent extends Event {
   target: HTMLInputElement;
 }