release: update 3.8.7

perf: 使用 unplugin-vue-define-options 替换 unplugin-vue-macros，打包速度提升数倍
chore: update
2025-11-03 13:44:47 +08:00 · 2022-11-28 01:25:43 +08:00 · 2022-11-28 01:17:03 +08:00 · 2022-11-28 00:48:02 +08:00 · 2022-11-28 00:35:12 +08:00 · 2022-11-27 18:53:15 +08:00
155 changed files with 3207 additions and 1640 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,46 @@
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- Add `message` message prompt function, compatible with `Element Plus` and `Ant Design` two `Message` style styles, use and package size are extremely low cost and adapt to dark mode, really fragrant 😂
+
+### 🍏 Perf
+
+- perf: No need to install `@vue/runtime-core`, compatible with `volar` hints of all `element-plus` components
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- Great optimization, remove `@pureadmin/components` and use compatible writing, the package size of the platform is reduced by `0.4` MB before compression is not enabled, and the resource of `2.3` MB is reduced for the first screen request, which is for the [lite version ](https://github.com/xiaoxian521/pure-admin-thin) is a very big optimization, the streamlined version has synchronized code
+
+# 3.8.0 (2022-11-26)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` multiple data format (deep structure) examples
+- Add `@pureadmin/table` image preview example
+- Add `@pureadmin/table` row and column drag example
+- Add `@pureadmin/table` context menu example
+- Add `@pureadmin/table` export `Excel` example
+- Add `@pureadmin/table` edit cell example
+- Add `@pureadmin/table` watermark example
+- Add `@pureadmin/table` print example
+- Add `@pureadmin/table` embedded `echarts` chart example
+- Add `svgo` to compress all `svg` files on the platform to reduce the size
+
+### 🍏 Perf
+
+- The static routing platform automatically imports without manual import
+- Improved global type hints
+- Optimize `vite` to rely on pre-built configurations in the platform, and the loading speed of page switching is significantly accelerated
+
 # 3.7.1 (2022-11-22)

 ### 🔥 hotfix
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,46 @@
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- Add `message` message prompt function, compatible with `Element Plus` and `Ant Design` two `Message` style styles, use and package size are extremely low cost and adapt to dark mode, really fragrant 😂
+
+### 🍏 Perf
+
+- perf: No need to install `@vue/runtime-core`, compatible with `volar` hints of all `element-plus` components
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- Great optimization, remove `@pureadmin/components` and use compatible writing, the package size of the platform is reduced by `0.4` MB before compression is not enabled, and the resource of `2.3` MB is reduced for the first screen request, which is for the [lite version ](https://github.com/xiaoxian521/pure-admin-thin) is a very big optimization, the streamlined version has synchronized code
+
+# 3.8.0 (2022-11-26)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` multiple data format (deep structure) examples
+- Add `@pureadmin/table` image preview example
+- Add `@pureadmin/table` row and column drag example
+- Add `@pureadmin/table` context menu example
+- Add `@pureadmin/table` export `Excel` example
+- Add `@pureadmin/table` edit cell example
+- Add `@pureadmin/table` watermark example
+- Add `@pureadmin/table` print example
+- Add `@pureadmin/table` embedded `echarts` chart example
+- Add `svgo` to compress all `svg` files on the platform to reduce the size
+
+### 🍏 Perf
+
+- The static routing platform automatically imports without manual import
+- Improved global type hints
+- Optimize `vite` to rely on pre-built configurations in the platform, and the loading speed of page switching is significantly accelerated
+
 # 3.7.1 (2022-11-22)

 ### 🔥 hotfix
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,46 @@
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: 打包大优化，请务必升级！使用 `unplugin-vue-define-options` 替换 `unplugin-vue-macros` ，打包速度提升数倍，使用 `unplugin-vue-macros` 以性能中等偏上的 `mac` 为例完整版打包时长为 `6` 分钟 😭，使用 `unplugin-vue-define-options` 替换后，相同电脑下打包时长为 `50` 秒 ☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- 添加 `message` 消息提示函数，兼容 `Element Plus` 和 `Ant Design` 两种 `Message` 样式风格，使用和打包大小成本极低并适配暗黑模式，真香 😂
+
+### 🍏 Perf
+
+- perf: 无需安装 `@vue/runtime-core` ，兼容所有 `element-plus` 组件的 `volar` 提示
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- 大优化，移除 `@pureadmin/components` 并采用兼容写法，平台打包大小在未启用压缩前对比优化前减少 `0.4` MB , 首屏请求减少 `2.3` MB 的资源，这对于 [精简版](https://github.com/xiaoxian521/pure-admin-thin) 来说是非常大的优化，精简版已经同步代码
+
+# 3.8.0 (2022-11-26)
+
+### 🎫 Feat
+
+- 添加 `@pureadmin/table` 多种数据格式（深层结构）示例
+- 添加 `@pureadmin/table` 图像预览示例
+- 添加 `@pureadmin/table` 行、列拖拽示例
+- 添加 `@pureadmin/table` 右键菜单示例
+- 添加 `@pureadmin/table` 导出 `Excel` 示例
+- 添加 `@pureadmin/table` 编辑单元格示例
+- 添加 `@pureadmin/table` 水印示例
+- 添加 `@pureadmin/table` 打印示例
+- 添加 `@pureadmin/table` 内嵌 `echarts` 图表示例
+- 添加 `svgo` 压缩平台所有 `svg` 文件，减少体积
+
+### 🍏 Perf
+
+- 静态路由平台自动导入，无需手动引入
+- 更完善的全局类型提示
+- 优化 `vite` 依赖预构建在平台里的配置，页面切换加载速度显著加快
+
 # 3.7.1 (2022-11-22)

 ### 🔥 hotfix
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -10,6 +10,13 @@

 `vue-pure-admin` is an open source free and out-of-the-box middle and background management system template. Developed using the latest mainstream technologies such as `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss`

+## Thin version (offering non-internationalized and internationalized versions)
+
+The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
+
+- [Click me to view the non-internationalized version](https://github.com/xiaoxian521/pure-admin-thin)
+- [Click me to view Internationalization version](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
+
 ## Supporting Video

 - [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
@@ -20,11 +27,6 @@
 - [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
 - [Click me to view foreign document site](https://xiaoxian521.github.io/pure-admin-doc)

-## Thin version (offering non-internationalized and internationalized versions)
-
- [Click me to view the non-internationalized version](https://github.com/xiaoxian521/pure-admin-thin)
- [Click me to view Internationalization version](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
-
 ## Tauri

 - [Click Watch Tauri](https://github.com/xiaoxian521/tauri-pure-admin)
@@ -162,6 +164,18 @@ Thank you very much for your support, I believe the project will get better and

 ## Contributors

-This project exists thanks to all the people who contribute :heart:
+Thanks to all the people who contribute :heart:

 <a href="https://github.com/xiaoxian521/vue-pure-admin/graphs/contributors"><img src="https://contrib.rocks/image?repo=xiaoxian521/vue-pure-admin" /></a>
+
+## `Star`
+
+Many thanks to the kind individuals who leave a star. Your support is much appreciated :heart:
+
+[![Stargazers for vue-pure-admin](https://reporoster.com/stars/xiaoxian521/vue-pure-admin)](https://github.com/xiaoxian521/vue-pure-admin/stargazers)
+
+## `Fork`
+
+It's so cool that you study hard :heart:
+
+[![Forkers repo roster for vue-pure-admin](https://reporoster.com/forks/xiaoxian521/vue-pure-admin)](https://github.com/xiaoxian521/vue-pure-admin/network/members)
--- a/README.md
+++ b/README.md
@@ -10,6 +10,13 @@

 `vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发

+## 精简版（实际项目开发请用精简版，提供 `非国际化` 、`国际化` 两个版本选择）
+
+精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
+
+- [点我查看非国际化精简版](https://github.com/xiaoxian521/pure-admin-thin)
+- [点我查看国际化精简版](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
+
 ## 配套视频

 - [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
@@ -20,16 +27,11 @@
 - [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
 - [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)

-## 精简版（提供非国际化、国际化两个版本选择）
-
- [点我查看非国际化精简版](https://github.com/xiaoxian521/pure-admin-thin)
- [点我查看国际化精简版](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
-
-## Tauri 版
+## `Tauri` 版

 - [点我查看 Tauri 版](https://github.com/xiaoxian521/tauri-pure-admin)

-## Electron 版
+## `Electron` 版

 - [点我查看 Electron 版](https://github.com/xiaoxian521/electron-pure-admin)

@@ -53,7 +55,7 @@
  <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3061c7b92f6d4cb4bcdf227d966ac696~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
 </p>

-### 使用 Gitpod
+### 使用 `Gitpod`

 在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.

@@ -96,17 +98,17 @@ pnpm build

 ## 如何贡献

-非常欢迎你的加入！[提一个 Issue](https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose) 或者提交一个 Pull Request
+非常欢迎您的加入！[提一个 Issue](https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose) 或者提交一个 `Pull Request`

 **Pull Request:**

 1. Fork 代码!
 2. 创建自己的分支: `git checkout -b feat/xxxx`
-3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
+3. 提交您的修改: `git commit -am 'feat(function): add xxxxx'`
 4. 推送您的分支: `git push origin feat/xxxx`
 5. 提交`pull request`

-## Git 贡献提交规范
+## `Git` 贡献提交规范

 - 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))

@@ -126,9 +128,9 @@ pnpm build

 ## 浏览器支持

-本地开发推荐使用`Chrome 80+` 浏览器
+本地开发推荐使用 `Chrome 80+` 浏览器

-支持现代浏览器, 不支持 IE
+支持现代浏览器, 不支持 `IE`

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
@@ -140,11 +142,11 @@ pnpm build

 ## 捐赠

-如果你觉得这个项目对您有帮助，可以帮作者买一杯果汁 🍹 表示支持
+如果您觉得这个项目对您有帮助，可以帮作者买一杯果汁 🍹 表示支持

 <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f69bf13c5b854ed5b699807cafa0e3ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" width="150px" height="150px" />

-## QQ 交流群
+## `QQ` 交流群

 一群已满，下面是二群，群里严禁`黄`、`赌`、`毒`、`vpn`等违法行为！

@@ -158,7 +160,7 @@ pnpm build

 ## 捐赠者

-非常感谢你们的支持，相信项目会越来越好 :heart:
+非常感谢您们的支持，相信项目会越来越好 :heart:

 |                                                                xueyuheng                                                                 |                                                                taolei1990                                                                 |                                                                hang-kim                                                                 |                                                               madwolfcrazy                                                                |                                                                limuen                                                                 |                                                                BenLakes                                                                 |
 | :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: |
@@ -168,6 +170,18 @@ pnpm build

 ## 贡献者

-这个项目的存在感谢所有做出贡献的人 :heart:
+感谢所有做出贡献的人 :heart:

 <a href="https://github.com/xiaoxian521/vue-pure-admin/graphs/contributors"><img src="https://contrib.rocks/image?repo=xiaoxian521/vue-pure-admin" /></a>
+
+## `Star`
+
+非常感谢留下星星的好心人，感谢您的支持 :heart:
+
+[![Stargazers for vue-pure-admin](https://reporoster.com/stars/xiaoxian521/vue-pure-admin)](https://github.com/xiaoxian521/vue-pure-admin/stargazers)
+
+## `Fork`
+
+瞧，那些 `小哥哥` 、`小姐姐` 认真 `学习` 的样子真滴是 `哎呦不错哦` :heart:
+
+[![Forkers repo roster for vue-pure-admin](https://reporoster.com/forks/xiaoxian521/vue-pure-admin)](https://github.com/xiaoxian521/vue-pure-admin/network/members)
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -0,0 +1,50 @@
+/**
+ * 此文件作用于 `vite.config.ts` 的 `optimizeDeps.include` 依赖预构建配置项
+ * 依赖预构建，`vite` 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
+ * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
+ * 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
+ */
+export const include = [
+  "qs",
+  "mitt",
+  "xlsx",
+  "dayjs",
+  "axios",
+  "pinia",
+  "swiper",
+  "lodash",
+  "echarts",
+  "intro.js",
+  "vue-i18n",
+  "xe-utils",
+  "vxe-table",
+  "js-cookie",
+  "lodash-es",
+  "cropperjs",
+  "jsbarcode",
+  "sortablejs",
+  "swiper/vue",
+  "@vueuse/core",
+  "vue3-danmaku",
+  "v-contextmenu",
+  "vue-pdf-embed",
+  "lodash-unified",
+  "@ctrl/tinycolor",
+  "china-area-data",
+  "@faker-js/faker",
+  "vue-json-pretty",
+  "@logicflow/core",
+  "@pureadmin/utils",
+  "responsive-storage",
+  "@howdyjs/mouse-menu",
+  "@logicflow/extension",
+  "element-resize-detector",
+  "@amap/amap-jsapi-loader",
+  "el-table-infinite-scroll",
+  "@wangeditor/editor-for-vue",
+  "xgplayer/dist/simple_player",
+  "xgplayer/es/controls/volume",
+  "vuedraggable/src/vuedraggable",
+  "xgplayer/es/controls/screenShot",
+  "xgplayer/es/controls/playbackRate"
+];
--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -4,13 +4,13 @@ import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import VueMacros from "unplugin-vue-macros/vite";
 import { viteMockServe } from "vite-plugin-mock";
 import { configCompressPlugin } from "./compress";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
+import DefineOptions from "unplugin-vue-define-options/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";

 export function getPluginsList(
@@ -32,7 +32,7 @@ export function getPluginsList(
    vueJsx(),
    VITE_CDN ? cdn : null,
    configCompressPlugin(VITE_COMPRESSION),
-    VueMacros(),
+    DefineOptions(),
    // 线上环境删除console
    removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
    viteBuildInfo(),
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -37,6 +37,7 @@ menus:
  hsfourZeroOne: "403"
  hsFive: "500"
  hscomponents: Components
+  hsmessage: Message Tips Components
  hsvideo: Video Components
  hsmap: Map Components
  hsdraggable: Draggable Components
@@ -72,6 +73,11 @@ menus:
  hsPureDocument: Pure Doc(Embedded)
  externalLink: Pure Doc(External)
  hsEpDocument: Element Plus Doc(Embedded)
+  hsVueDocument: Vue3 Doc(Embedded)
+  hsViteDocument: Vite Doc(Embedded)
+  hsPiniaDocument: Pinia Doc(Embedded)
+  hsRouterDocument: Vue Router Doc(Embedded)
+  hsTailwindcssDocument: Tailwindcss Doc(Embedded)
  hsAbout: About
  hsResult: Result Page
  hsSuccess: Success Page
@@ -79,9 +85,6 @@ menus:
  hsIconSelect: Icon Select
  hsTimeline: Time Line
  hsLineTree: LineTree
-  hsAntTabs: Imitate Antdv Tabs
-  hsAntAnchor: Imitate Antdv Anchor
-  hsAntTreeSelect: Imitate Antdv TreeSelector
  hsList: List Page
  hsListCard: Card List Page
  hsDebounce: Debounce & Throttle
@@ -95,6 +98,9 @@ menus:
  hsExecl: Export Excel
  hsInfiniteScroll: Table Infinite Scroll
  hsdanmaku: Danmaku Components
+  hsPureTableBase: Base Usage
+  hsPureTableHigh: High Usage
+  hsTree: Big Data Tree
 status:
  hsLoad: Loading...
 login:
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -37,6 +37,7 @@ menus:
  hsfourZeroOne: "403"
  hsFive: "500"
  hscomponents: 组件
+  hsmessage: 消息提示组件
  hsvideo: 视频组件
  hsmap: 地图组件
  hsdraggable: 拖拽组件
@@ -69,9 +70,14 @@ menus:
  hsPrint: 打印
  hsDownload: 下载
  hsExternalPage: 外部页面
-  hsPureDocument: 平台文档(内嵌)
-  externalLink: 平台文档(外链)
-  hsEpDocument: Element Plus文档(内嵌)
+  hsPureDocument: 平台文档（内嵌）
+  externalLink: 平台文档（外链）
+  hsEpDocument: Element Plus 文档（内嵌）
+  hsVueDocument: Vue3 文档（内嵌）
+  hsViteDocument: Vite 文档（内嵌）
+  hsPiniaDocument: Pinia 文档（内嵌）
+  hsRouterDocument: Vue Router 文档（内嵌）
+  hsTailwindcssDocument: Tailwindcss 文档（内嵌）
  hsAbout: 关于
  hsResult: 结果页面
  hsSuccess: 成功页面
@@ -79,9 +85,6 @@ menus:
  hsIconSelect: 图标选择器
  hsTimeline: 时间线
  hsLineTree: 树形连接线
-  hsAntTabs: 仿antdv标签页
-  hsAntAnchor: 仿antdv锚点
-  hsAntTreeSelect: 仿antdv树型选择器
  hsList: 列表页
  hsListCard: 卡片列表页
  hsDebounce: 防抖节流
@@ -95,6 +98,9 @@ menus:
  hsExecl: 导出Excel
  hsInfiniteScroll: 表格无限滚动
  hsdanmaku: 弹幕组件
+  hsPureTableBase: 基础用法（23个示例）
+  hsPureTableHigh: 高级用法（8个示例）
+  hsTree: 大数据树业务组件
 status:
  hsLoad: 加载中...
 login:
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -1,5 +1,6 @@
 // 模拟后端动态生成路由
 import { MockMethod } from "vite-plugin-mock";
+import { system, permission, frame, tabs } from "@/router/enums";

 /**
 * roles：页面级别权限，这里模拟二种 "admin"、"common"
@@ -12,7 +13,7 @@ const systemRouter = {
  meta: {
    icon: "setting",
    title: "menus.hssysManagement",
-    rank: 11
+    rank: system
  },
  children: [
    {
@@ -61,7 +62,7 @@ const permissionRouter = {
  meta: {
    title: "menus.permission",
    icon: "lollipop",
-    rank: 10
+    rank: permission
  },
  children: [
    {
@@ -89,9 +90,17 @@ const frameRouter = {
  meta: {
    icon: "monitor",
    title: "menus.hsExternalPage",
-    rank: 8
+    rank: frame
  },
  children: [
+    {
+      path: "/external",
+      name: "https://yiming_chang.gitee.io/pure-admin-doc",
+      meta: {
+        title: "menus.externalLink",
+        roles: ["admin", "common"]
+      }
+    },
    {
      path: "/iframe/pure",
      name: "FramePure",
@@ -101,14 +110,6 @@ const frameRouter = {
        roles: ["admin", "common"]
      }
    },
-    {
-      path: "/external",
-      name: "https://yiming_chang.gitee.io/pure-admin-doc",
-      meta: {
-        title: "menus.externalLink",
-        roles: ["admin", "common"]
-      }
-    },
    {
      path: "/iframe/ep",
      name: "FrameEp",
@@ -117,6 +118,51 @@ const frameRouter = {
        frameSrc: "https://element-plus.org/zh-CN/",
        roles: ["admin", "common"]
      }
+    },
+    {
+      path: "/iframe/vue3",
+      name: "FrameVue",
+      meta: {
+        title: "menus.hsVueDocument",
+        frameSrc: "https://cn.vuejs.org/",
+        roles: ["admin", "common"]
+      }
+    },
+    {
+      path: "/iframe/vite",
+      name: "FrameVite",
+      meta: {
+        title: "menus.hsViteDocument",
+        frameSrc: "https://cn.vitejs.dev/",
+        roles: ["admin", "common"]
+      }
+    },
+    {
+      path: "/iframe/pinia",
+      name: "FramePinia",
+      meta: {
+        title: "menus.hsPiniaDocument",
+        frameSrc: "https://pinia.vuejs.org/zh/index.html",
+        roles: ["admin", "common"]
+      }
+    },
+    {
+      path: "/iframe/vue-router",
+      name: "FrameRouter",
+      meta: {
+        title: "menus.hsRouterDocument",
+        frameSrc: "https://router.vuejs.org/zh/",
+        roles: ["admin", "common"]
+      }
+    },
+    {
+      path: "/iframe/tailwindcss",
+      name: "FrameTailwindcss",
+      meta: {
+        title: "menus.hsTailwindcssDocument",
+        frameSrc: "https://tailwindcss.com/docs/installation",
+        roles: ["admin", "common"]
+      }
    }
  ]
 };
@@ -126,7 +172,7 @@ const tabsRouter = {
  meta: {
    icon: "IF-team-icontabs",
    title: "menus.hstabs",
-    rank: 13
+    rank: tabs
  },
  children: [
    {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "3.7.1",
+  "version": "3.8.7",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -11,6 +11,7 @@
    "preview": "vite preview",
    "preview:build": "pnpm build && vite preview",
    "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
+    "svgo": "svgo -f src/assets/svg -o src/assets/svg",
    "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
@@ -30,24 +31,24 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@ctrl/tinycolor": "^3.4.1",
+    "@howdyjs/mouse-menu": "^2.0.5",
    "@logicflow/core": "^1.1.30",
    "@logicflow/extension": "^1.1.30",
-    "@pureadmin/components": "^1.1.0",
    "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.6.0",
+    "@pureadmin/table": "^1.8.0",
    "@pureadmin/utils": "^1.6.7",
-    "@vueuse/core": "^9.5.0",
+    "@vueuse/core": "^9.6.0",
    "@vueuse/motion": "2.0.0-beta.12",
    "@wangeditor/editor": "^5.1.21",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "animate.css": "^4.1.1",
-    "axios": "^1.1.3",
+    "axios": "^1.2.0",
    "china-area-data": "^5.0.1",
    "cropperjs": "^1.5.12",
-    "dayjs": "^1.11.5",
+    "dayjs": "^1.11.6",
    "echarts": "^5.4.0",
    "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.2.22",
+    "element-plus": "^2.2.25",
    "element-resize-detector": "^1.2.4",
    "intro.js": "^6.0.0",
    "js-cookie": "^3.0.1",
@@ -59,10 +60,9 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.24",
+    "pinia": "^2.0.26",
    "qrcode": "^1.5.1",
    "qs": "^6.11.0",
-    "resize-observer-polyfill": "^1.5.1",
    "responsive-storage": "^2.1.0",
    "sortablejs": "^1.15.0",
    "swiper": "^8.4.4",
@@ -77,7 +77,7 @@
    "vue-virtual-scroller": "^2.0.0-alpha.1",
    "vue3-danmaku": "^1.0.0",
    "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.3.5",
+    "vxe-table": "^4.3.6",
    "xe-utils": "^3.5.7",
    "xgplayer": "^2.32.1",
    "xlsx": "^0.18.5"
@@ -107,14 +107,13 @@
    "@types/nprogress": "0.2.0",
    "@types/qrcode": "^1.4.2",
    "@types/qs": "^6.9.7",
-    "@types/sortablejs": "^1.13.0",
+    "@types/sortablejs": "^1.15.0",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vitejs/plugin-vue-jsx": "^2.1.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/runtime-core": "^3.2.45",
    "autoprefixer": "^10.4.13",
    "cloc": "^2.10.0",
    "cssnano": "^5.1.14",
@@ -141,10 +140,11 @@
    "stylelint-config-recommended": "^9.0.0",
    "stylelint-config-standard": "^29.0.0",
    "stylelint-order": "^5.0.0",
+    "svgo": "^3.0.2",
    "tailwindcss": "^3.2.4",
    "terser": "^5.15.1",
    "typescript": "^4.9.3",
-    "unplugin-vue-macros": "^0.16.3",
+    "unplugin-vue-define-options": "^1.0.0",
    "vite": "3.1.8",
    "vite-plugin-cdn-import": "^0.3.5",
    "vite-plugin-compression": "^0.5.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "3.7.1",
+  "Version": "3.8.7",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
@@ -16,7 +16,7 @@
  "EpThemeColor": "#409EFF",
  "ShowLogo": true,
  "ShowModel": "smart",
-  "MenuArrowIconNoTransition": false,
+  "MenuArrowIconNoTransition": true,
  "MapConfigure": {
    "amapKey": "97b3248d1553172e81f168cf94ea667e",
    "options": {
--- a/src/assets/login/avatar.svg
+++ b/src/assets/login/avatar.svg
@@ -1 +1 @@
-<svg t="1636193306629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1847" width="32" height="32"><path d="M410.558481 0.10861C410.558481 211.083075 109.682285 361.860579 109.682285 633.656511c0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527C711.407525 361.751969 410.558481 210.974465 410.558481 0.10861z" fill="#386BF3" p-id="1848"></path><path d="M613.468671 73.664572c0 211.055922-300.876197 361.914883-300.876196 633.547901 0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527c-0.054305-271.633018-300.876197-422.491979-300.876197-633.547901z" fill="#C3D2FB" p-id="1849"></path><path d="M312.592475 707.212473c0-183.713414 137.635722-312.171612 226.72288-441.390078 81.701694 106.111739 172.119322 218.740063 172.119323 367.725506a309.755045 309.755045 0 0 1-291.074166 316.516003 323.114046 323.114046 0 0 1-107.768037-242.851431z" fill="#303F5B" p-id="1850"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></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 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="500" height="380" viewBox="0 0 896 529.1129" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M832.06729,623.22778s-26.37759,9.89441-38.806,32.94348S787.06,706.69574,787.06,706.69574s26.37759-9.89447,38.806-32.94348S832.06729,623.22778,832.06729,623.22778Z" transform="translate(-158 -185.8871)" fill="#3f3d56"/><path d="M867.5,657.59637s-8.64182,26.814-31.0802,40.31373-50.17651,8.57293-50.17651,8.57293,8.64175-26.81408,31.08017-40.31378S867.5,657.59637,867.5,657.59637Z" transform="translate(-158 -185.8871)" fill="#5392f0"/><rect y="527.1129" width="896" height="2" fill="#2f2e41"/><path d="M519.87238,620.97461a95.44448,95.44448,0,0,1-35.748-14.44629L485.306,604.915a93.36283,93.36283,0,0,0,34.999,14.10547c18.93164,3.40137,47.26075,1.73144,74.707-25.52735,53.41358-53.04785,104.39307-58.39062,104.90186-58.43847l.18652,1.99219c-.50146.04687-50.76806,5.31738-103.67822,57.86621-21.61328,21.46386-43.792,27.40234-61.71777,27.40234A83.49962,83.49962,0,0,1,519.87238,620.97461Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><circle cx="515.15271" cy="381.1129" r="12" fill="#2f2e41"/><circle cx="430.15271" cy="437.1129" r="12" fill="#2f2e41"/><path d="M841.5,714s-17.46191-5.41315-52.26129-10.84192L790,692.5c6-60-34-150-34-150a401.561,401.561,0,0,1,21.4693,139.0246C772.13214,672.2124,761.82056,662.16638,742,656c0,0,25.77765,22.106,33.15918,45.10175a997.84042,997.84042,0,0,0-102.02258-8.21589L682,672.5l-17,17s-7-51-22-53l11,50s-13-10-16-9l7.39746,14.79486c-49.819-.51654-109.08453,1.7356-177.76581,8.95227L476,682l-17,17s-7-51-22-53l11,50s-13-10-16-9l8.64288,17.28583Q406.9763,708.2897,370.5,714Z" transform="translate(-158 -185.8871)" fill="#3f3d56"/><path d="M565.64813,230.37817c-10.89964,11.74783,17.59745,40.25959,17.59745,40.25959s-57.70662,9.73051-53.12783,9.14083,2.20622-49.13151,2.20622-49.13151S576.54777,218.63035,565.64813,230.37817Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M605.81236,356.10945l-50.139,25.6141-27.22969,15.6059s-32.09862,40.43116-38.08709,64.39234,25.92963,68.247,29.54371,72.82286a54.36088,54.36088,0,0,1,4.98908,7.42355c1.24727,1.85589,12.02944-.541,23.80342-3.06554S547.13,518.93875,547.13,518.93875s-15.02732-38.39505-16.14686-39.25912c-1.04554-.807-4.60093-7.44631-2.04309-10.35234a25.94993,25.94993,0,0,0,5.44489-8.89825,30.09064,30.09064,0,0,1,4.18709-7.94151s45.361-36.83645,59.52776-49.37835,51.82952-4.65839,51.82952-4.65839-17.78167,68.20027-22.22979,72.80616-4.929,8.70085-2.91535,16.50759,28.28157.39078,28.28157.39078L662.766,461.6996s15.74879-34.2925,24.29946-69.67451c4.27533-17.691-3.88828-28.23462-13.12073-34.35549a41.39094,41.39094,0,0,0-30.02983-5.97766l-46.34848,8.1308,32.14706-13.84923Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><path d="M420.87777,290.19133,361.02366,271.685s-24.179-31.16689-12.78824-36.6669,25.65172,26.94419,25.65172,26.94419l41.686,2.69751Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M672.49431,257.78673l53.2121-33.06768s15.49333-36.27612,3.0807-38.71059-17.98787,32.56435-17.98787,32.56435l-39.64232,13.17143Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M682.45318,220.40023l1.01427,39.19147-89.68779,16.025c13.19231,28.22441,9.84118,60.34675,43.04725,74.4259L524.9027,404.78717c4.9871-43.03806-15.81748-75.456-35.263-115.75876-23.68547-8.58589-51.19594-2.29078-80.33649,10.34619l-5.237-40.66416,123.87841-8.896,20.34848,7.77932,21.81842-9.17677C602.17891,238.88953,648.22076,220.77584,682.45318,220.40023Z" transform="translate(-158 -185.8871)" fill="#5392f0"/><path d="M626.64006,486.51727c-2.72,2.36681-5.25213,21.84984-5.34982,28.92023s9.21178,8.89624,14.29855,9.2494,4.47816,3.45631,7.83678,6.04854,14.39625,2.179,28.89019-2.71238-9.75274-20.92568-11.86409-21.662-11-22.78156-11-22.78156S629.36,484.15046,626.64006,486.51727Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><path d="M547.368,531.00717c3.23089,1.60043,10.61681,19.80614,12.50274,26.62107s-6.65716,10.93994-11.48848,12.5704-3.45631,4.47816-6.04855,7.83678-13.3744,5.75546-28.63472,4.696,4.13258-22.71391,5.98847-23.96118,4.86893-24.82526,4.86893-24.82526S544.13715,529.40674,547.368,531.00717Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><circle cx="389.47074" cy="35.42904" r="23.99585" fill="#a0616a"/><path d="M519.73448,218.90923a22.82668,22.82668,0,0,1-.83378-18.59281c2.35891-5.8153,7.59174-11.65569,18.87309-13.4,24.61387-3.80572,37.71267,13.43543,37.02452,19.07449s-3.99294,19.27051-3.99294,19.27051,1.47587-12.90619-4.85883-13.362-30.90178-2.37835-37.12217,4.145a14.23268,14.23268,0,0,0-3.71042,13.82977Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/></svg>
+<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/illustration4.svg
+++ b/src/assets/login/illustration4.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/assets/status/403.svg
+++ b/src/assets/status/403.svg
--- a/src/assets/status/404.svg
+++ b/src/assets/status/404.svg
--- a/src/assets/status/500.svg
+++ b/src/assets/status/500.svg
--- a/src/assets/svg/back.svg
+++ b/src/assets/svg/back.svg
@@ -1 +1 @@
-<svg width="32" height="32" viewBox="0 0 48 48"><path fill="#2F88FF" fill-rule="evenodd" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M44 40.8361C39.1069 34.8632 34.7617 31.4739 30.9644 30.6682C27.1671 29.8625 23.5517 29.7408 20.1182 30.303V41L4 23.5453L20.1182 7V17.167C26.4667 17.2172 31.8638 19.4948 36.3095 24C40.7553 28.5052 43.3187 34.1172 44 40.8361Z" clip-rule="evenodd"/></svg>
+<svg width="32" height="32" viewBox="0 0 48 48"><path fill="#2F88FF" fill-rule="evenodd" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M44 40.836c-4.893-5.973-9.238-9.362-13.036-10.168-3.797-.805-7.412-.927-10.846-.365V41L4 23.545 20.118 7v10.167c6.349.05 11.746 2.328 16.192 6.833 4.445 4.505 7.009 10.117 7.69 16.836Z" clip-rule="evenodd"/></svg>
--- a/src/assets/svg/back_top.svg
+++ b/src/assets/svg/back_top.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123l1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
--- a/src/assets/svg/calendar.svg
+++ b/src/assets/svg/calendar.svg
@@ -1 +1 @@
-<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar" data-v-7be81122=""><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fillOpacity="0.9"></path></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-calendar" viewBox="0 0 16 16"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"/></svg>
--- a/src/assets/svg/dark.svg
+++ b/src/assets/svg/dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>
--- a/src/assets/svg/day.svg
+++ b/src/assets/svg/day.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
--- a/src/assets/svg/enter_outlined.svg
+++ b/src/assets/svg/enter_outlined.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ant-design" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"/></svg>
--- a/src/assets/svg/exit_screen.svg
+++ b/src/assets/svg/exit_screen.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" color="#00000073" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5l-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>
--- a/src/assets/svg/full_screen.svg
+++ b/src/assets/svg/full_screen.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" color="#00000073" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>
--- a/src/assets/svg/globalization.svg
+++ b/src/assets/svg/globalization.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="globalization" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="globalization" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"/></svg>
--- a/src/assets/svg/hot.svg
+++ b/src/assets/svg/hot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024"><path fill="#FF5D50" d="M428.698 107.315c-6.503 72.192-36.352 207.258-160.256 337.408 3.686-48.025-7.117-83.763-19.047-107.673-6.605-13.159-26.06-10.599-28.877 3.84-5.734 29.44-20.582 75.059-57.6 137.779-71.628 121.395-62.566 459.878 340.736 459.878S934.093 585.728 876.8 442.522c-37.376-93.44-93.952-152.525-128.82-182.324-11.417-9.779-29.132-1.945-29.593 13.056-.921 30.464-7.321 73.37-33.075 102.144-.666-52.787-38.144-208.384-202.445-296.857-23.296-12.544-51.763 2.457-54.17 28.774z"/><path fill="#FFDF99" d="M702.26 678.4c-4.2-45.056-60.673-166.554-212.634-246.426-10.599-5.58-23.092 3.124-21.504 15.002 6.246 46.848 12.953 140.493-24.064 184.73 4.044-40.397-18.125-73.83-36.66-94.31-8.396-9.217-23.552-4.66-25.497 7.68-3.533 22.322-12.851 56.268-36.557 97.945-42.086 74.035-86.989 188.672 124.57 294.656 10.956.563 22.17.87 33.74.87a617.97 617.97 0 0 0 32.717-.87C694.631 878.182 709.837 759.706 702.26 678.4z"/></svg>
--- a/src/assets/svg/keyboard_esc.svg
+++ b/src/assets/svg/keyboard_esc.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"/></svg>
--- a/src/assets/svg/laptop.svg
+++ b/src/assets/svg/laptop.svg
@@ -1 +1 @@
-<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-laptop" data-v-7be81122=""><path fill="currentColor" d="M2.5 12a1 1 0 01-1-1V4a1 1 0 011-1h11a1 1 0 011 1v7a1 1 0 01-1 1h-11zm0-1h11V4h-11v7zM15 13H1v1h14v-1z" fillOpacity="0.9"></path></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-laptop" viewBox="0 0 16 16"><path fill="currentColor" d="M2.5 12a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-11zm0-1h11V4h-11v7zM15 13H1v1h14v-1z"/></svg>
--- a/src/assets/svg/service.svg
+++ b/src/assets/svg/service.svg
@@ -1 +1 @@
-<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-service" data-v-7be81122=""><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0110.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 019 14.7H8v-1h1a3.5 3.5 0 003.4-2.7h-1.9a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 00-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z" fillOpacity="0.9"></path></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-service" viewBox="0 0 16 16"><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0 1 10.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 0 1 9 14.7H8v-1h1a3.5 3.5 0 0 0 3.4-2.7h-1.9a.5.5 0 0 1-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 0 0-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z"/></svg>
--- a/src/assets/svg/shop.svg
+++ b/src/assets/svg/shop.svg
@@ -1 +1 @@
-<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-shop" data-v-7be81122=""><path fill="currentColor" d="M8 1a2.5 2.5 0 00-2.5 2.5V5h-2a.5.5 0 00-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-2V3.5A2.5 2.5 0 008 1zm1.5 5v2h1V6H12v8H4V6h1.5v2h1V6h3zm0-1h-3V3.5a1.5 1.5 0 113 0V5z" fillOpacity="0.9"></path></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-shop" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V5h-2a.5.5 0 0 0-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-2V3.5A2.5 2.5 0 0 0 8 1zm1.5 5v2h1V6H12v8H4V6h1.5v2h1V6h3zm0-1h-3V3.5a1.5 1.5 0 1 1 3 0V5z"/></svg>
--- a/src/assets/svg/user_avatar.svg
+++ b/src/assets/svg/user_avatar.svg
@@ -1 +1 @@
-<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-user-avatar" data-v-7be81122=""><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 00-.49-.84 8.48 8.48 0 00-8.02 0 .94.94 0 00-.49.84v1.14h1v-1.12A7.47 7.47 0 018 10.5zM10.5 6a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-1 0a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"></path><path fill="currentColor" d="M2.5 1.5a1 1 0 00-1 1v11a1 1 0 001 1h11a1 1 0 001-1v-11a1 1 0 00-1-1h-11zm11 1v11h-11v-11h11z"></path></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-user-avatar" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 0 0-.49-.84 8.48 8.48 0 0 0-8.02 0 .94.94 0 0 0-.49.84v1.14h1v-1.12A7.47 7.47 0 0 1 8 10.5zM10.5 6a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zm-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/><path fill="currentColor" d="M2.5 1.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-11zm11 1v11h-11v-11h11z"/></svg>
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ b/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -79,6 +79,7 @@ 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";
@@ -114,6 +115,7 @@ 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);
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -2,25 +2,16 @@
 import { ref } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
-import { Tabs, TabPane } from "@pureadmin/components";
-
-const dropdownDom = ref();
-const activeKey = ref(noticesData[0].key);
-
-const notices = ref(noticesData);

 const noticesNum = ref(0);
-notices.value.forEach(notice => {
-  noticesNum.value += notice.list.length;
-});
+const notices = ref(noticesData);
+const activeKey = ref(noticesData[0].key);

-function tabClick() {
-  (dropdownDom as any).value.handleOpen();
-}
+notices.value.map(v => (noticesNum.value += v.list.length));
 </script>

 <template>
-  <el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
+  <el-dropdown trigger="click" placement="bottom-end">
    <span class="dropdown-badge navbar-bg-hover select-none">
      <el-badge :value="noticesNum" :max="99">
        <span class="header-notice-icon">
@@ -30,34 +21,25 @@ function tabClick() {
    </span>
    <template #dropdown>
      <el-dropdown-menu>
-        <Tabs
-          centered
-          class="dropdown-tabs"
-          :tabBarStyle="{ marginLeft: notices?.length > 4 ? '8px' : '0' }"
-          v-model:activeKey="activeKey"
-          @tabClick="tabClick"
-        >
+        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
          <template v-for="item in notices" :key="item.key">
-            <TabPane :tab="`${item.name}(${item.list.length})`">
+            <el-tab-pane
+              :label="`${item.name}(${item.list.length})`"
+              :name="`${item.key}`"
+            >
              <el-scrollbar max-height="330px">
                <div class="noticeList-container">
                  <NoticeList :list="item.list" />
                </div>
              </el-scrollbar>
-            </TabPane>
+            </el-tab-pane>
          </template>
-        </Tabs>
+        </el-tabs>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
 </template>

-<style>
-.ant-tabs-dropdown {
-  z-index: 2900 !important;
-}
-</style>
-
 <style lang="scss" scoped>
 .dropdown-badge {
  display: flex;
@@ -73,30 +55,28 @@ function tabClick() {
 }

 .dropdown-tabs {
-  width: 336px;
-  background-color: #fff;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
-  border-radius: 4px;
+  width: 330px;
+
+  .noticeList-container {
+    padding: 15px 24px 0 24px;
+  }

  :deep(.el-tabs__header) {
    margin: 0;
  }

-  :deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: center;
-  }
-
  :deep(.el-tabs__nav-wrap)::after {
    height: 1px;
  }

-  :deep(.noticeList-container) {
-    padding: 15px 24px 0 24px;
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px 0 36px;
+  }
+
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__active-bar) {
+    margin: 0 36px 0 36px;
  }
 }
-
-:deep(.ant-tabs-nav) {
-  margin-bottom: 0;
-}
 </style>
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -3,9 +3,9 @@ import { useRouter } from "vue-router";
 import { cloneDeep } from "lodash-unified";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
+import { deleteChildren } from "@/utils/tree";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
-import { deleteChildren } from "@pureadmin/utils";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { ref, watch, computed, nextTick, shallowRef } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -4,7 +4,6 @@ import { useRoute } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
 import leftCollapse from "./leftCollapse.vue";
-import type { StorageConfigs } from "/#/index";
 import { useNav } from "@/layout/hooks/useNav";
 import { storageLocal } from "@pureadmin/utils";
 import { ref, computed, watch, onBeforeMount } from "vue";
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -9,7 +9,6 @@ import {
  getCurrentInstance
 } from "vue";
 import { tagsViewsType } from "../types";
-import type { StorageConfigs } from "/#/index";
 import { useEventListener } from "@vueuse/core";
 import { useRoute, useRouter } from "vue-router";
 import { transformI18n, $t } from "@/plugins/i18n";
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,9 +20,6 @@ import "./style/reset.scss";
 // 导入公共样式
 import "./style/index.scss";
 import "element-plus/dist/index.css";
-import "@pureadmin/components/dist/index.css";
-import "@pureadmin/components/dist/theme.css";
-import "@pureadmin/components/dist/dark.scss";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -1,6 +1,5 @@
 // 多组件库的国际化和本地项目国际化兼容
 import { App, WritableComputedRef } from "vue";
-import type { StorageConfigs } from "/#/index";
 import { storageLocal } from "@pureadmin/utils";
 import { type I18n, createI18n } from "vue-i18n";

--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@@ -0,0 +1,47 @@
+// 完整版菜单比较多，将 rank 抽离出来，在此方便维护
+
+const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从 1 开始哦
+  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,
+  tabs = 14,
+  formdesign = 15,
+  flowchart = 16,
+  ppt = 17,
+  editor = 18,
+  guide = 19,
+  about = 20;
+
+export {
+  home,
+  doc,
+  utils,
+  table,
+  tree,
+  components,
+  able,
+  frame,
+  nested,
+  result,
+  error,
+  list,
+  permission,
+  system,
+  tabs,
+  formdesign,
+  flowchart,
+  ppt,
+  editor,
+  guide,
+  about
+};
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,5 @@
 import "@/utils/sso";
 import { getConfig } from "@/config";
-import { toRouteType } from "./types";
 import NProgress from "@/utils/progress";
 import { findIndex } from "lodash-unified";
 import { transformI18n } from "@/plugins/i18n";
@@ -23,46 +22,28 @@ import {
  formatTwoStageRoutes,
  formatFlatteningRoutes
 } from "./utils";
-import {
-  buildHierarchyTree,
-  openLink,
-  isUrl,
-  storageSession
-} from "@pureadmin/utils";
+import { buildHierarchyTree } from "@/utils/tree";
+import { isUrl, openLink, storageSession } from "@pureadmin/utils";

-import pptRouter from "./modules/ppt";
-import homeRouter from "./modules/home";
-import ableRouter from "./modules/able";
-import listRouter from "./modules/list";
-import tableRouter from "./modules/table";
-import aboutRouter from "./modules/about";
-import errorRouter from "./modules/error";
-import guideRouter from "./modules/guide";
-import resultRouter from "./modules/result";
-import editorRouter from "./modules/editor";
-import nestedRouter from "./modules/nested";
-import flowChartRouter from "./modules/flowchart";
 import remainingRouter from "./modules/remaining";
-import componentsRouter from "./modules/components";
-import formDesignRouter from "./modules/formdesign";
+
+/** 自动导入全部静态路由，无需再手动引入！匹配 src/router/modules 目录（任何嵌套级别）中具有 .ts 扩展名的所有文件，除了 remaining.ts 文件
+ * 如何匹配所有文件请看：https://github.com/mrmlnc/fast-glob#basic-syntax
+ * 如何排除文件请看：https://cn.vitejs.dev/guide/features.html#negative-patterns
+ */
+const modules: Record<string, any> = import.meta.glob(
+  ["./modules/**/*.ts", "!./modules/**/remaining.ts"],
+  {
+    eager: true
+  }
+);

 /** 原始静态路由（未做任何处理） */
-const routes = [
-  pptRouter,
-  homeRouter,
-  ableRouter,
-  listRouter,
-  tableRouter,
-  aboutRouter,
-  errorRouter,
-  guideRouter,
-  resultRouter,
-  nestedRouter,
-  editorRouter,
-  flowChartRouter,
-  componentsRouter,
-  formDesignRouter
-];
+const routes = [];
+
+Object.keys(modules).forEach(key => {
+  routes.push(modules[key].default);
+});

 /** 导出处理后的静态路由（三级及以上的路由全部拍成二级） */
 export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { able } from "@/router/enums";

-const ableRouter: RouteConfigsTable = {
+export default {
  path: "/able",
  redirect: "/able/watermark",
  meta: {
    icon: "ubuntu-fill",
    title: $t("menus.hsAble"),
-    rank: 5
+    rank: able
  },
  children: [
    {
@@ -66,30 +66,6 @@ const ableRouter: RouteConfigsTable = {
        title: $t("menus.hsLineTree")
      }
    },
-    {
-      path: "/able/antTabs",
-      name: "AntTabs",
-      component: () => import("@/views/able/ant-tabs.vue"),
-      meta: {
-        title: $t("menus.hsAntTabs")
-      }
-    },
-    {
-      path: "/able/antAnchor",
-      name: "AntAnchor",
-      component: () => import("@/views/able/ant-anchor.vue"),
-      meta: {
-        title: $t("menus.hsAntAnchor")
-      }
-    },
-    {
-      path: "/able/antTreeSelect",
-      name: "AntTreeSelect",
-      component: () => import("@/views/able/ant-treeSelect.vue"),
-      meta: {
-        title: $t("menus.hsAntTreeSelect")
-      }
-    },
    {
      path: "/able/debounce",
      name: "Debounce",
@@ -163,6 +139,4 @@ const ableRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default ableRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { about } from "@/router/enums";

-const aboutRouter: RouteConfigsTable = {
+export default {
  path: "/about",
  redirect: "/about/index",
  meta: {
    // icon: "question-line",
    title: $t("menus.hsAbout"),
-    rank: 15
+    rank: about
  },
  children: [
    {
@@ -19,6 +19,4 @@ const aboutRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default aboutRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -1,15 +1,31 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { components } from "@/router/enums";

-const componentsRouter: RouteConfigsTable = {
+export default {
  path: "/components",
  redirect: "/components/video",
  meta: {
    icon: "menu",
    title: $t("menus.hscomponents"),
-    rank: 6
+    rank: components
  },
  children: [
+    {
+      path: "/components/message",
+      name: "Message",
+      component: () => import("@/views/components/message/index.vue"),
+      meta: {
+        title: $t("menus.hsmessage"),
+        extraIcon: {
+          svg: true,
+          name: "team-iconxinpinrenqiwang"
+        },
+        transition: {
+          enterTransition: "animate__fadeInLeft",
+          leaveTransition: "animate__fadeOutRight"
+        }
+      }
+    },
    {
      path: "/components/video",
      name: "Video",
@@ -47,11 +63,7 @@ const componentsRouter: RouteConfigsTable = {
      name: "SplitPane",
      component: () => import("@/views/components/split-pane/index.vue"),
      meta: {
-        title: $t("menus.hssplitPane"),
-        extraIcon: {
-          svg: true,
-          name: "team-iconxinpinrenqiwang"
-        }
+        title: $t("menus.hssplitPane")
      }
    },
    {
@@ -127,6 +139,4 @@ const componentsRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default componentsRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { editor } from "@/router/enums";

-const editorRouter: RouteConfigsTable = {
+export default {
  path: "/editor",
  redirect: "/editor/index",
  meta: {
    icon: "edit",
    title: $t("menus.hseditor"),
-    rank: 2
+    rank: editor
  },
  children: [
    {
@@ -20,6 +20,4 @@ const editorRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default editorRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { error } from "@/router/enums";

-const errorRouter: RouteConfigsTable = {
+export default {
  path: "/error",
  redirect: "/error/403",
  meta: {
    icon: "information-line",
    title: $t("menus.hsabnormal"),
-    rank: 9
+    rank: error
  },
  children: [
    {
@@ -35,6 +35,4 @@ const errorRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default errorRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { flowchart } from "@/router/enums";

-const flowChartRouter: RouteConfigsTable = {
+export default {
  path: "/flowChart",
  redirect: "/flowChart/index",
  meta: {
    icon: "set-up",
    title: $t("menus.hsflowChart"),
-    rank: 1
+    rank: flowchart
  },
  children: [
    {
@@ -19,6 +19,4 @@ const flowChartRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default flowChartRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/formdesign.ts
+++ b/src/router/modules/formdesign.ts
@@ -1,14 +1,14 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { formdesign } from "@/router/enums";
 const IFrame = () => import("@/layout/frameView.vue");

-const formDesignRouter: RouteConfigsTable = {
+export default {
  path: "/formDesign",
  redirect: "/formDesign/index",
  meta: {
    icon: "terminal-window-line",
    title: $t("menus.hsFormDesign"),
-    rank: 2
+    rank: formdesign
  },
  children: [
    {
@@ -22,6 +22,4 @@ const formDesignRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default formDesignRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/guide.ts
+++ b/src/router/modules/guide.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { guide } from "@/router/enums";

-const guideRouter: RouteConfigsTable = {
+export default {
  path: "/guide",
  redirect: "/guide/index",
  meta: {
    icon: "guide",
    title: $t("menus.hsguide"),
-    rank: 14
+    rank: guide
  },
  children: [
    {
@@ -19,6 +19,4 @@ const guideRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default guideRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -1,8 +1,8 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { home } from "@/router/enums";
 const Layout = () => import("@/layout/index.vue");

-const homeRouter: RouteConfigsTable = {
+export default {
  path: "/",
  name: "Home",
  component: Layout,
@@ -10,7 +10,7 @@ const homeRouter: RouteConfigsTable = {
  meta: {
    icon: "home-filled",
    title: $t("menus.hshome"),
-    rank: 0
+    rank: home
  },
  children: [
    {
@@ -22,6 +22,4 @@ const homeRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default homeRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { list } from "@/router/enums";

-const ableRouter: RouteConfigsTable = {
+export default {
  path: "/list",
  redirect: "/list/card",
  meta: {
    icon: "list-check",
    title: $t("menus.hsList"),
-    rank: 12
+    rank: list
  },
  children: [
    {
@@ -21,6 +21,4 @@ const ableRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default ableRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { nested } from "@/router/enums";

-const nestedRouter: RouteConfigsTable = {
+export default {
  path: "/nested",
  redirect: "/nested/menu1/menu1-1",
  meta: {
    title: $t("menus.hsmenus"),
    icon: "histogram",
-    rank: 7
+    rank: nested
  },
  children: [
    {
@@ -82,6 +82,4 @@ const nestedRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default nestedRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/ppt.ts
+++ b/src/router/modules/ppt.ts
@@ -1,13 +1,13 @@
-import type { RouteConfigsTable } from "/#/index";
+import { ppt } from "@/router/enums";
 const IFrame = () => import("@/layout/frameView.vue");

-const pptRouter: RouteConfigsTable = {
+export default {
  path: "/ppt",
  redirect: "/ppt/index",
  meta: {
    icon: "ppt",
    title: "PPT",
-    rank: 3
+    rank: ppt
  },
  children: [
    {
@@ -21,6 +21,4 @@ const pptRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default pptRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/puredoc.ts
+++ b/src/router/modules/puredoc.ts
@@ -0,0 +1,24 @@
+import { doc } from "@/router/enums";
+import hot from "@/assets/svg/hot.svg?component";
+const IFrame = () => import("@/layout/frameView.vue");
+
+export default {
+  path: "/pure-admin-doc",
+  redirect: "/pure-admin-doc/index",
+  meta: {
+    icon: hot,
+    title: "pure-admin-doc",
+    rank: doc
+  },
+  children: [
+    {
+      path: "/pure-admin-doc/index",
+      name: "FrameDoc",
+      component: IFrame,
+      meta: {
+        title: "pure-admin-doc",
+        frameSrc: "https://yiming_chang.gitee.io/pure-admin-doc/"
+      }
+    }
+  ]
+} as RouteConfigsTable;
--- a/src/router/modules/pureutils.ts
+++ b/src/router/modules/pureutils.ts
@@ -0,0 +1,24 @@
+import { utils } from "@/router/enums";
+import hot from "@/assets/svg/hot.svg?component";
+const IFrame = () => import("@/layout/frameView.vue");
+
+export default {
+  path: "/pure-admin-utils",
+  redirect: "/pure-admin-utils/index",
+  meta: {
+    icon: hot,
+    title: "pure-admin-utils",
+    rank: utils
+  },
+  children: [
+    {
+      path: "/pure-admin-utils/index",
+      name: "FrameUtils",
+      component: IFrame,
+      meta: {
+        title: "pure-admin-utils",
+        frameSrc: "https://pure-admin-utils.netlify.app/"
+      }
+    }
+  ]
+} as RouteConfigsTable;
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -1,8 +1,7 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("@/layout/index.vue");

-const remainingRouter: Array<RouteConfigsTable> = [
+export default [
  {
    path: "/login",
    name: "Login",
@@ -20,7 +19,7 @@ const remainingRouter: Array<RouteConfigsTable> = [
      icon: "home-filled",
      title: $t("menus.hshome"),
      showLink: false,
-      rank: 104
+      rank: 102
    },
    children: [
      {
@@ -38,9 +37,7 @@ const remainingRouter: Array<RouteConfigsTable> = [
    meta: {
      title: $t("menus.hsempty"),
      showLink: false,
-      rank: 105
+      rank: 103
    }
  }
-];
-
-export default remainingRouter;
+] as Array<RouteConfigsTable>;
--- a/src/router/modules/result.ts
+++ b/src/router/modules/result.ts
@@ -1,13 +1,13 @@
 import { $t } from "@/plugins/i18n";
-import type { RouteConfigsTable } from "/#/index";
+import { result } from "@/router/enums";

-const resultRouter: RouteConfigsTable = {
+export default {
  path: "/result",
  redirect: "/result/success",
  meta: {
    icon: "checkbox-circle-line",
    title: $t("menus.hsResult"),
-    rank: 8
+    rank: result
  },
  children: [
    {
@@ -27,6 +27,4 @@ const resultRouter: RouteConfigsTable = {
      }
    }
  ]
-};
-
-export default resultRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -1,12 +1,14 @@
-import type { RouteConfigsTable } from "/#/index";
+import { $t } from "@/plugins/i18n";
+import { table } from "@/router/enums";
+import hot from "@/assets/svg/hot.svg?component";

-const flowChartRouter: RouteConfigsTable = {
+export default {
  path: "/pure-table",
  redirect: "/pure-table/index",
  meta: {
-    icon: "mdi:table-large",
+    icon: hot,
    title: "pure-admin-table",
-    rank: 4
+    rank: table
  },
  children: [
    {
@@ -14,14 +16,16 @@ const flowChartRouter: RouteConfigsTable = {
      name: "PureTable",
      component: () => import("@/views/pure-table/index.vue"),
      meta: {
-        title: "pure-admin-table",
-        extraIcon: {
-          svg: true,
-          name: "team-iconxinpin"
-        }
+        title: $t("menus.hsPureTableBase")
+      }
+    },
+    {
+      path: "/pure-table/high",
+      name: "PureTableHigh",
+      component: () => import("@/views/pure-table/high.vue"),
+      meta: {
+        title: $t("menus.hsPureTableHigh")
      }
    }
  ]
-};
-
-export default flowChartRouter;
+} as RouteConfigsTable;
--- a/src/router/modules/tree.ts
+++ b/src/router/modules/tree.ts
@@ -0,0 +1,23 @@
+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/types.ts
+++ b/src/router/types.ts
@@ -1,9 +0,0 @@
-import { RouteLocationNormalized } from "vue-router";
-
-export interface toRouteType extends RouteLocationNormalized {
-  meta: {
-    roles: Array<string>;
-    keepAlive?: boolean;
-    dynamicLevel?: string;
-  };
-}
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -14,9 +14,9 @@ import { RouteConfigs } from "@/layout/types";
 import {
  isString,
  storageSession,
-  buildHierarchyTree,
  isIncludeAllChildren
 } from "@pureadmin/utils";
+import { buildHierarchyTree } from "@/utils/tree";
 import { cloneDeep, intersection } from "lodash-unified";
 import { sessionKey, type DataInfo } from "@/utils/auth";
 import { usePermissionStoreHook } from "@/store/modules/permission";
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -2,7 +2,6 @@ import { store } from "@/store";
 import { appType } from "./types";
 import { defineStore } from "pinia";
 import { getConfig } from "@/config";
-import type { StorageConfigs } from "/#/index";
 import { deviceDetection, storageLocal } from "@pureadmin/utils";

 export const useAppStore = defineStore({
@@ -19,7 +18,9 @@ export const useAppStore = defineStore({
    layout:
      storageLocal.getItem<StorageConfigs>("responsive-layout")?.layout ??
      getConfig().Layout,
-    device: deviceDetection() ? "mobile" : "desktop"
+    device: deviceDetection() ? "mobile" : "desktop",
+    // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
+    sortSwap: false
  }),
  getters: {
    getSidebarStatus() {
@@ -56,6 +57,9 @@ export const useAppStore = defineStore({
    },
    setLayout(layout) {
      this.layout = layout;
+    },
+    setSortSwap(val) {
+      this.sortSwap = val;
    }
  }
 });
--- a/src/store/modules/epTheme.ts
+++ b/src/store/modules/epTheme.ts
@@ -1,7 +1,6 @@
 import { store } from "@/store";
 import { defineStore } from "pinia";
 import { getConfig } from "@/config";
-import type { StorageConfigs } from "/#/index";
 import { storageLocal } from "@pureadmin/utils";

 export const useEpThemeStore = defineStore({
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -1,7 +1,6 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import { isEqual } from "@pureadmin/utils";
-import type { StorageConfigs } from "/#/index";
 import { routerArrays } from "@/layout/types";
 import { multiType, positionType } from "./types";
 import { isUrl, storageLocal } from "@pureadmin/utils";
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -19,6 +19,7 @@ export type appType = {
  };
  layout: string;
  device: string;
+  sortSwap: boolean;
 };

 export type multiType = {
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -28,11 +28,6 @@ html.dark {
    filter: invert(0.9) hue-rotate(180deg);
  }

-  .ant-tabs {
-    background: var(--el-bg-color);
-    color: $color-white;
-  }
-
  /* 标签页 */
  .tags-view {
    .arrow-left,
@@ -191,4 +186,25 @@ html.dark {
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: transparent;
  }
+
+  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
+  .pure-message {
+    background-image: initial !important;
+    background-color: rgb(36, 37, 37) !important;
+    box-shadow: rgb(13 13 13 / 12%) 0px 3px 6px -4px,
+      rgb(13 13 13 / 8%) 0px 6px 16px 0px, rgb(13 13 13 / 5%) 0px 9px 28px 8px !important;
+
+    & .el-message__content {
+      color: $color-white !important;
+      pointer-events: all !important;
+      background-image: initial !important;
+    }
+
+    & .el-message__closeBtn {
+      &:hover {
+        color: rgba(255, 255, 255, 0.85);
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+  }
 }
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -62,3 +62,37 @@
    border-left-color: var(--el-color-primary);
  }
 }
+
+/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
+.pure-message {
+  border-width: 0 !important;
+  background: #fff !important;
+  padding: 10px 13px !important;
+  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
+    0 9px 28px 8px #0000000d !important;
+
+  &.el-message.is-closable .el-message__content {
+    padding-right: 17px !important;
+  }
+
+  & .el-message__content {
+    color: #000000d9 !important;
+    pointer-events: all !important;
+    background-image: initial !important;
+  }
+
+  & .el-message__icon {
+    margin-right: 8px !important;
+  }
+
+  & .el-message__closeBtn {
+    outline: none;
+    border-radius: 4px;
+    right: 9px !important;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+  }
+}
--- a/src/style/transition.scss
+++ b/src/style/transition.scss
@@ -40,3 +40,15 @@
 .breadcrumb-leave-active {
  position: absolute;
 }
+
+/**
+ * @description 重置el-menu的展开收起动画时长
+ */
+.outer-most .el-collapse-transition-leave-active,
+.outer-most .el-collapse-transition-enter-active {
+  transition: 0.2s all ease-in-out !important;
+}
+
+.horizontal-collapse-transition {
+  transition: var(--pure-transition-duration) all !important;
+}
--- a/src/utils/message.ts
+++ b/src/utils/message.ts
@@ -0,0 +1,85 @@
+import { type VNode } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import { type MessageHandler, ElMessage } from "element-plus";
+
+type messageStyle = "el" | "antd";
+type messageTypes = "info" | "success" | "warning" | "error";
+
+interface MessageParams {
+  /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
+  type?: messageTypes;
+  /** 自定义图标，该属性会覆盖 `type` 的图标 */
+  icon?: any;
+  /** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */
+  dangerouslyUseHTMLString?: boolean;
+  /** 消息风格，可选 `el` 、`antd` ，默认 `antd` */
+  customClass?: messageStyle;
+  /** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */
+  duration?: number;
+  /** 是否显示关闭按钮，默认值 `false` */
+  showClose?: boolean;
+  /** 文字是否居中，默认值 `false` */
+  center?: boolean;
+  /** `Message` 距离窗口顶部的偏移量，默认 `20` */
+  offset?: number;
+  /** 设置组件的根元素，默认 `document.body` */
+  appendTo?: string | HTMLElement;
+  /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
+  grouping?: boolean;
+  /** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
+  onClose?: Function | null;
+}
+
+/** 用法非常简单，参考 src/views/components/message/index.vue 文件 */
+
+/**
+ * `Message` 消息提示函数
+ */
+const message = (
+  message: string | VNode | (() => VNode),
+  params?: MessageParams
+): MessageHandler => {
+  if (!params) {
+    return ElMessage({
+      message,
+      customClass: "pure-message"
+    });
+  } else {
+    const {
+      icon,
+      type = "info",
+      dangerouslyUseHTMLString = false,
+      customClass = "antd",
+      duration = 2000,
+      showClose = false,
+      center = false,
+      offset = 20,
+      appendTo = document.body,
+      grouping = false,
+      onClose
+    } = params;
+
+    return ElMessage({
+      message,
+      type,
+      icon,
+      dangerouslyUseHTMLString,
+      duration,
+      showClose,
+      center,
+      offset,
+      appendTo,
+      grouping,
+      // 全局搜 pure-message 即可知道该类的样式位置
+      customClass: customClass === "antd" ? "pure-message" : "",
+      onClose: () => (isFunction(onClose) ? onClose() : null)
+    });
+  }
+};
+
+/**
+ * 关闭所有 `Message` 消息提示函数
+ */
+const closeAllMessage = (): void => ElMessage.closeAll();
+
+export { message, closeAllMessage };
--- a/src/utils/tree.ts
+++ b/src/utils/tree.ts
@@ -0,0 +1,188 @@
+/**
+ * @description 提取菜单树中的每一项uniqueId
+ * @param tree 树
+ * @returns 每一项uniqueId组成的数组
+ */
+export const extractPathList = (tree: any[]): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("tree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  const expandedPaths: Array<number | string> = [];
+  for (const node of tree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (hasChildren) {
+      extractPathList(node.children);
+    }
+    expandedPaths.push(node.uniqueId);
+  }
+  return expandedPaths;
+};
+
+/**
+ * @description 如果父级下children的length为1，删除children并自动组建唯一uniqueId
+ * @param tree 树
+ * @param pathList 每一项的id组成的数组
+ * @returns 组件唯一uniqueId后的树
+ */
+export const deleteChildren = (tree: any[], pathList = []): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("menuTree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  for (const [key, node] of tree.entries()) {
+    if (node.children && node.children.length === 1) delete node.children;
+    node.id = key;
+    node.parentId = pathList.length ? pathList[pathList.length - 1] : null;
+    node.pathList = [...pathList, node.id];
+    node.uniqueId =
+      node.pathList.length > 1 ? node.pathList.join("-") : node.pathList[0];
+    const hasChildren = node.children && node.children.length > 0;
+    if (hasChildren) {
+      deleteChildren(node.children, node.pathList);
+    }
+  }
+  return tree;
+};
+
+/**
+ * @description 创建层级关系
+ * @param tree 树
+ * @param pathList 每一项的id组成的数组
+ * @returns 创建层级关系后的树
+ */
+export const buildHierarchyTree = (tree: any[], pathList = []): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("tree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  for (const [key, node] of tree.entries()) {
+    node.id = key;
+    node.parentId = pathList.length ? pathList[pathList.length - 1] : null;
+    node.pathList = [...pathList, node.id];
+    const hasChildren = node.children && node.children.length > 0;
+    if (hasChildren) {
+      buildHierarchyTree(node.children, node.pathList);
+    }
+  }
+  return tree;
+};
+
+/**
+ * @description 广度优先遍历，根据唯一uniqueId找当前节点信息
+ * @param tree 树
+ * @param uniqueId 唯一uniqueId
+ * @returns 当前节点信息
+ */
+export const getNodeByUniqueId = (
+  tree: any[],
+  uniqueId: number | string
+): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("menuTree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  const item = tree.find(node => node.uniqueId === uniqueId);
+  if (item) return item;
+  const childrenList = tree
+    .filter(node => node.children)
+    .map(i => i.children)
+    .flat(1) as unknown;
+  return getNodeByUniqueId(childrenList as any[], uniqueId);
+};
+
+/**
+ * @description 向当前唯一uniqueId节点中追加字段
+ * @param tree 树
+ * @param uniqueId 唯一uniqueId
+ * @param fields 需要追加的字段
+ * @returns 追加字段后的树
+ */
+export const appendFieldByUniqueId = (
+  tree: any[],
+  uniqueId: number | string,
+  fields: object
+): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("menuTree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  for (const node of tree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (
+      node.uniqueId === uniqueId &&
+      Object.prototype.toString.call(fields) === "[object Object]"
+    )
+      Object.assign(node, fields);
+    if (hasChildren) {
+      appendFieldByUniqueId(node.children, uniqueId, fields);
+    }
+  }
+  return tree;
+};
+
+/**
+ * @description 构造树型结构数据
+ * @param data 数据源
+ * @param id id字段 默认id
+ * @param parentId 父节点字段，默认parentId
+ * @param children 子节点字段，默认children
+ * @returns 追加字段后的树
+ */
+export const handleTree = (
+  data: any[],
+  id?: string,
+  parentId?: string,
+  children?: string
+): any => {
+  if (!Array.isArray(data)) {
+    console.warn("data must be an array");
+    return [];
+  }
+  const config = {
+    id: id || "id",
+    parentId: parentId || "parentId",
+    childrenList: children || "children"
+  };
+
+  const childrenListMap: any = {};
+  const nodeIds: any = {};
+  const tree = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o: Record<string, any>) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+};
--- a/src/views/able/ant-anchor.vue
+++ b/src/views/able/ant-anchor.vue
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { Anchor, AnchorLink } from "@pureadmin/components";
-
-defineOptions({
-  name: "AntAnchor"
-});
-
-function handleAnchorClick(e, link) {
-  e.preventDefault();
-  const srcolls = document.getElementById(link.href);
-  srcolls.scrollIntoView({ block: "start", behavior: "smooth" });
-}
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          仿antdv锚点，采用
-          <el-link
-            href="https://www.npmjs.com/package/@pureadmin/components"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            @pureadmin/components
-          </el-link>
-          ，完全兼容antdv的
-          <el-link
-            href="https://next.antdv.com/components/anchor-cn"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            Anchor
-          </el-link>
-          写法
-        </span>
-      </div>
-    </template>
-    <div class="w-[400px]">
-      <Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
-        <AnchorLink href="one" title="测试one" />
-        <AnchorLink href="two" title="测试two" />
-        <AnchorLink href="three" title="测试three" />
-      </Anchor>
-
-      <el-scrollbar class="float-right overflow-auto" height="600px">
-        <header
-          id="one"
-          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
-          style="background: #409eff"
-        >
-          测试one
-        </header>
-        <header
-          id="two"
-          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
-          style="background: #67c23a"
-        >
-          测试two
-        </header>
-        <header
-          id="three"
-          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
-          style="background: #f56c6c"
-        >
-          测试three
-        </header>
-      </el-scrollbar>
-    </div>
-  </el-card>
-</template>
--- a/src/views/able/ant-tabs.vue
+++ b/src/views/able/ant-tabs.vue
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { Tabs, TabPane } from "@pureadmin/components";
-
-defineOptions({
-  name: "AntTabs"
-});
-
-const mode = ref("top");
-const activeKey = ref(1);
-const callback = (val: string) => {
-  console.log(val);
-};
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          仿antdv标签页，采用
-          <el-link
-            href="https://www.npmjs.com/package/@pureadmin/components"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            @pureadmin/components
-          </el-link>
-          ，完全兼容antdv的
-          <el-link
-            href="https://next.antdv.com/components/tabs-cn"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            Tabs
-          </el-link>
-          写法
-        </span>
-      </div>
-    </template>
-    <el-radio-group v-model="mode" size="small" class="mb-2">
-      <el-radio label="top" border>Horizontal</el-radio>
-      <el-radio label="left" border>Vertical</el-radio>
-    </el-radio-group>
-    <Tabs
-      v-model:activeKey="activeKey"
-      :tab-position="mode"
-      :style="{ height: '200px' }"
-      @tabScroll="callback"
-    >
-      <TabPane v-for="i in 30" :key="i" :tab="`Tab-${i}`">
-        Content of tab {{ i }}
-      </TabPane>
-    </Tabs>
-  </el-card>
-</template>
--- a/src/views/able/ant-treeSelect.vue
+++ b/src/views/able/ant-treeSelect.vue
@@ -1,217 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { TreeSelect } from "@pureadmin/components";
-
-defineOptions({
-  name: "AntTreeSelect"
-});
-
-const value1 = ref<string>("");
-const treeData1 = ref([
-  {
-    title: "parent 1",
-    value: "parent 1",
-    children: [
-      {
-        title: "parent 1-0",
-        value: "parent 1-0",
-        children: [
-          {
-            title: "my leaf",
-            value: "leaf1"
-          },
-          {
-            title: "your leaf",
-            value: "leaf2"
-          }
-        ]
-      },
-      {
-        title: "parent 1-1",
-        value: "parent 1-1"
-      }
-    ]
-  }
-]);
-
-const SHOW_PARENT = TreeSelect.SHOW_PARENT;
-
-function dig(path = "0", level = 3) {
-  const list = [];
-  for (let i = 0; i < 10; i += 1) {
-    const value = `${path}-${i}`;
-    const treeNode = {
-      title: value,
-      value
-    };
-
-    if (level > 0) {
-      (treeNode as any).children = dig(value, level - 1);
-    }
-
-    list.push(treeNode);
-  }
-  return list;
-}
-
-const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
-
-const value2 = ref<string[]>(["0-0-0"]);
-const treeData2 = [
-  {
-    title: "Node1",
-    value: "0-0",
-    children: [
-      {
-        title: "Child Node1",
-        value: "0-0-0"
-      }
-    ]
-  },
-  {
-    title: "Node2",
-    value: "0-1",
-
-    children: [
-      {
-        title: "Child Node3",
-        value: "0-1-0",
-        disabled: true
-      },
-      {
-        title: "Child Node4",
-        value: "0-1-1"
-      },
-      {
-        title: "Child Node5",
-        value: "0-1-2"
-      }
-    ]
-  }
-];
-
-const value3 = ref<string>();
-const treeData3 = ref([
-  { id: 1, pId: 0, value: "1", title: "Expand to load" },
-  { id: 2, pId: 0, value: "2", title: "Expand to load" },
-  { id: 3, pId: 0, value: "3", title: "Tree Node", isLeaf: true }
-]);
-const genTreeNode = (parentId: number, isLeaf = false) => {
-  const random = Math.random().toString(36).substring(2, 6);
-  return {
-    id: random,
-    pId: parentId,
-    value: random,
-    title: isLeaf ? "Tree Node" : "Expand to load",
-    isLeaf
-  };
-};
-const onLoadData = treeNode => {
-  return new Promise(resolve => {
-    const { id } = treeNode.dataRef;
-    setTimeout(() => {
-      treeData3.value = (treeData3 as any).value.concat([
-        genTreeNode(id, false),
-        genTreeNode(id, true)
-      ]);
-      resolve(true);
-    }, 300);
-  });
-};
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          仿antdv树选择，采用
-          <el-link
-            href="https://www.npmjs.com/package/@pureadmin/components"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            @pureadmin/components
-          </el-link>
-          ，完全兼容antdv的
-          <el-link
-            href="https://next.antdv.com/components/tree-select-cn"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            TreeSelect
-          </el-link>
-          写法
-        </span>
-      </div>
-    </template>
-    <div class="flex justify-around flex-wrap">
-      <div>
-        <span>线性样式：</span>
-        <TreeSelect
-          class="w-[200px]"
-          v-model:value="value1"
-          show-search
-          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-          placeholder="Please select"
-          allow-clear
-          :tree-line="true"
-          tree-default-expand-all
-          :tree-data="treeData1"
-        >
-          <template #title="{ value: val, title }">
-            <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
-            <template v-else>{{ title }}</template>
-          </template>
-        </TreeSelect>
-      </div>
-
-      <div>
-        <span>虚拟滚动：</span>
-        <TreeSelect
-          class="w-[200px] mt-6"
-          v-model:value="checkedKeys"
-          tree-checkable
-          tree-default-expand-all
-          :show-checked-strategy="SHOW_PARENT"
-          :height="233"
-          :tree-data="dig()"
-          :max-tag-count="10"
-        >
-          <template #title="{ title, value }">
-            <span v-if="value === '0-0-1-0'" style="color: #1890ff">
-              {{ title }}
-            </span>
-            <template v-else>{{ title }}</template>
-          </template>
-        </TreeSelect>
-      </div>
-
-      <div>
-        <span>可勾选：</span>
-        <TreeSelect
-          class="w-[200px]"
-          v-model:value="value2"
-          :tree-data="treeData2"
-          tree-checkable
-          allow-clear
-          :show-checked-strategy="SHOW_PARENT"
-          placeholder="Please select"
-        />
-      </div>
-
-      <div>
-        <span>异步加载：</span>
-        <TreeSelect
-          class="w-[200px]"
-          v-model:value="value3"
-          tree-data-simple-mode
-          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-          :tree-data="treeData3"
-          placeholder="Please select"
-          :load-data="onLoadData"
-        />
-      </div>
-    </div>
-  </el-card>
-</template>
--- a/src/views/able/debounce.vue
+++ b/src/views/able/debounce.vue
@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { ElMessage } from "element-plus";
+import { message } from "@/utils/message";
 import { debounce, throttle } from "@pureadmin/utils";

 defineOptions({
  name: "Debounce"
 });

-const handle = () => {
-  ElMessage({
-    message: "恭喜你，这是一条成功消息",
-    type: "success"
-  });
-};
+const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });

 const immediateDebounce = debounce(handle, 1000, true);

--- a/src/views/able/execl.vue
+++ b/src/views/able/execl.vue
@@ -64,7 +64,7 @@ const exportExcel = () => {
  const workSheet = utils.aoa_to_sheet(res);
  const workBook = utils.book_new();
  utils.book_append_sheet(workBook, workSheet, "数据报表");
-  writeFile(workBook, "tale-list.xlsx");
+  writeFile(workBook, "tableV2.xlsx");
 };
 </script>

@@ -83,7 +83,7 @@ const exportExcel = () => {
        ）
      </div>
    </template>
-    <el-button type="primary" @click="exportExcel">导出Excel </el-button>
+    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
    <div class="h-[25rem] mt-3">
      <el-auto-resizer>
        <template #default="{ height, width }">
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 import { clone } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import ElTreeLine from "@/components/ReTreeLine";
-import { extractPathList, deleteChildren } from "@pureadmin/utils";
+import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";

 defineOptions({
--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -4,7 +4,7 @@ import { clone } from "@pureadmin/utils";
 import type { ElTreeV2 } from "element-plus";
 import { transformI18n } from "@/plugins/i18n";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { extractPathList, deleteChildren } from "@pureadmin/utils";
+import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";

--- a/src/views/able/print.vue
+++ b/src/views/able/print.vue
@@ -270,7 +270,7 @@ const tableData: User[] = [
        }"
      >
        <p class="font-medium pt-1">Echart</p>
-        <Line class="echart" style="margin: 0 auto" />
+        <Line class="echart" style="margin: 0 auto; height: 300px" />
      </el-col>

      <el-col
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, unref } from "vue";
-import { ElMessage } from "element-plus";
+import { message } from "@/utils/message";
 import ReQrcode from "@/components/ReQrcode";

 defineOptions({
@@ -14,10 +14,10 @@ setTimeout(() => {
  asyncTitle.value = unref(qrcodeText);
 }, 3000);
 const codeClick = () => {
-  ElMessage.info("点击事件");
+  message("点击事件", { type: "info" });
 };
 const disabledClick = () => {
-  ElMessage.info("失效");
+  message("失效", { type: "info" });
 };
 </script>

--- a/src/views/components/draggable/index.vue
+++ b/src/views/components/draggable/index.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import Sortable from "sortablejs";
 import { ref, onMounted } from "vue";
+import Sortable, { Swap } from "sortablejs";
 import draggable from "vuedraggable/src/vuedraggable";
+import { useAppStoreHook } from "@/store/modules/app";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

 defineOptions({
  name: "Draggable"
 });

+const { setSortSwap } = useAppStoreHook();
+
 const gridLists = ref<Array<Object>>([
  { grid: "cn", num: 1 },
  { grid: "cn", num: 2 },
@@ -39,7 +42,8 @@ const change = (evt): void => {
 };

 onMounted(() => {
-  // 使用原生sortable实现元素位置切换
+  if (!useAppStoreHook().sortSwap) Sortable.mount(new Swap());
+  setSortSwap(true);
  new Sortable(document.querySelector(".cut-container"), {
    swap: true,
    forceFallback: true,
@@ -121,7 +125,7 @@ onMounted(() => {
          <el-card>
            <template #header>
              <div class="card-header">
-                <span>拖拽实现元素位置切换</span>
+                <span>拖拽实现元素位置交换</span>
              </div>
            </template>
            <!-- 拖拽实现元素位置切换 -->
--- a/src/views/components/message/index.vue
+++ b/src/views/components/message/index.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+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";
+
+defineOptions({
+  name: "Message"
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"> Message提示 </span>
+      </div>
+    </template>
+
+    <h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
+
+    <el-space wrap>
+      <el-button
+        type="info"
+        @click="message('Info类型消息', { customClass: 'el' })"
+      >
+        Info
+      </el-button>
+      <el-button
+        type="success"
+        @click="
+          message('Success类型消息', { customClass: 'el', type: 'success' })
+        "
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="
+          message('Warning类型消息', { customClass: 'el', type: 'warning' })
+        "
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { customClass: 'el', type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button
+        @click="message('可关闭消息', { customClass: 'el', showClose: true })"
+      >
+        可关闭
+      </el-button>
+      <el-button
+        @click="
+          message('分组消息合并', {
+            customClass: 'el',
+            type: 'success',
+            grouping: true
+          })
+        "
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            customClass: 'el',
+            icon: useRenderIcon('check')
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            customClass: 'el',
+            duration: 3000,
+            onClose: () =>
+              message('消息已关闭', { customClass: 'el', type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ]),
+            { customClass: 'el' }
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            customClass: 'el',
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <h4 class="mb-4">
+      类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
+      样式改版，不会影响 ElMessage
+      原本样式，使用和打包大小成本极低并适配暗黑模式）
+    </h4>
+
+    <el-space wrap>
+      <el-button type="info" @click="message('Info类型消息')">Info</el-button>
+      <el-button
+        type="success"
+        @click="message('Success类型消息', { type: 'success' })"
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="message('Warning类型消息', { type: 'warning' })"
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button @click="message('可关闭消息', { showClose: true })">
+        可关闭
+      </el-button>
+      <el-button
+        @click="message('分组消息合并', { type: 'success', grouping: true })"
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            icon: hot
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            duration: 3000,
+            onClose: () => message('消息已关闭', { type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ])
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
+  </el-card>
+</template>
--- a/src/views/list/card/components/DialogForm.vue
+++ b/src/views/list/card/components/DialogForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { ElMessage, FormInstance } from "element-plus";
+import { message } from "@/utils/message";
+import { FormInstance } from "element-plus";

 const SELECT_OPTIONS = [
  { label: "网关", value: 1 },
@@ -33,7 +34,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
-      ElMessage.success("提交成功");
+      message("提交成功", { type: "success" });
      formVisible.value = false;
      resetForm(formEl);
    }
--- a/src/views/list/card/index.vue
+++ b/src/views/list/card/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import Card from "./components/Card.vue";
 import { getCardList } from "@/api/list";
+import { message } from "@/utils/message";
+import { ElMessageBox } from "element-plus";
 import { ref, onMounted, nextTick } from "vue";
 import dialogForm from "./components/DialogForm.vue";
-import { ElMessage, ElMessageBox } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

 defineOptions({
@@ -77,10 +78,7 @@ const handleDeleteItem = product => {
    }
  )
    .then(() => {
-      ElMessage({
-        type: "success",
-        message: "删除成功"
-      });
+      message("删除成功", { type: "success" });
    })
    .catch(() => {});
 };
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@@ -2,8 +2,8 @@
 import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
+import { message } from "@/utils/message";
 import { phoneRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
@@ -26,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
    if (valid) {
      // 模拟登录请求，需根据实际开发进行修改
      setTimeout(() => {
-        message.success(transformI18n($t("login.loginSuccess")));
+        message(transformI18n($t("login.loginSuccess")), { type: "success" });
        loading.value = false;
      }, 2000);
    } else {
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/regist.vue
@@ -2,8 +2,8 @@
 import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
+import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
@@ -45,12 +45,14 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
      if (checked.value) {
        // 模拟请求，需根据实际开发进行修改
        setTimeout(() => {
-          message.success(transformI18n($t("login.registerSuccess")));
+          message(transformI18n($t("login.registerSuccess")), {
+            type: "success"
+          });
          loading.value = false;
        }, 2000);
      } else {
        loading.value = false;
-        message.warning(transformI18n($t("login.tickPrivacy")));
+        message(transformI18n($t("login.tickPrivacy")), { type: "warning" });
      }
    } else {
      loading.value = false;
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/update.vue
@@ -2,8 +2,8 @@
 import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
+import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
@@ -42,7 +42,9 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
    if (valid) {
      // 模拟请求，需根据实际开发进行修改
      setTimeout(() => {
-        message.success(transformI18n($t("login.passwordUpdateReg")));
+        message(transformI18n($t("login.passwordUpdateReg")), {
+          type: "success"
+        });
        loading.value = false;
      }, 2000);
    } else {
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -10,6 +10,7 @@ import {
 import { useI18n } from "vue-i18n";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
+import { message } from "@/utils/message";
 import { loginRules } from "./utils/rule";
 import phone from "./components/phone.vue";
 import TypeIt from "@/components/ReTypeit";
@@ -18,7 +19,6 @@ import regist from "./components/regist.vue";
 import update from "./components/update.vue";
 import { initRouter } from "@/router/utils";
 import { useNav } from "@/layout/hooks/useNav";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
@@ -72,8 +72,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
          if (res.success) {
            // 获取后端路由
            initRouter().then(() => {
-              message.success("登录成功");
              router.push("/");
+              message("登录成功", { type: "success" });
            });
          }
        });
--- a/src/views/pure-table/components/base.vue
+++ b/src/views/pure-table/components/base.vue
--- a/src/views/pure-table/components/border.vue
+++ b/src/views/pure-table/components/border.vue
--- a/src/views/pure-table/components/column-template/columns.tsx
+++ b/src/views/pure-table/components/column-template/columns.tsx
@@ -1,4 +1,4 @@
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { tableData } from "../data";

 // 如果您不习惯tsx写法，可以传slot，然后在template里写
@@ -56,11 +56,13 @@ export function useColumns() {
  ];

  const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
  };

  const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
  };

  return {
--- a/src/views/pure-table/components/column-template/index.vue
+++ b/src/views/pure-table/components/column-template/index.vue
--- a/src/views/pure-table/components/customIndex.vue
+++ b/src/views/pure-table/components/customIndex.vue
--- a/src/views/pure-table/components/data.ts
+++ b/src/views/pure-table/components/data.ts
@@ -56,6 +56,14 @@ const tableDataMore = cloneData.map(item =>
  })
 );

+const tableDataImage = cloneData.map((item, index) =>
+  Object.assign(item, {
+    image: `https://xiaoxian521.github.io/pure-admin-table/imgs/${
+      index + 1
+    }.jpg`
+  })
+);
+
 const tableDataSortable = cloneData.map((item, index) =>
  Object.assign(item, {
    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
@@ -282,4 +290,10 @@ const tableDataExpand = [
  }
 ];

-export { tableData, tableDataMore, tableDataSortable, tableDataExpand };
+export {
+  tableData,
+  tableDataMore,
+  tableDataImage,
+  tableDataExpand,
+  tableDataSortable
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
xiaoxian521	5734d0391f	release: update `3.8.7`	2022-11-28 01:25:43 +08:00
xiaoxian521	e81fb5bb10	perf: 使用 `unplugin-vue-define-options` 替换 `unplugin-vue-macros`，打包速度提升数倍	2022-11-28 01:17:03 +08:00
xiaoxian521	0c5ecd0a4e	chore: update	2022-11-28 00:48:02 +08:00
xiaoxian521	1d76946968	style: update message	2022-11-28 00:35:12 +08:00
xiaoxian521	297319f668	chore: update	2022-11-27 18:53:15 +08:00
xiaoxian521	e23971b680	docs: update	2022-11-27 18:14:44 +08:00
xiaoxian521	18927d4750	release: update `3.8.6`	2022-11-27 16:34:46 +08:00
xiaoxian521	33bd64d9ff	feat: 添加 `message` 消息提示函数，兼容 `Element Plus` 和 `Ant Design` 两种 `Message` 风格	2022-11-27 16:14:55 +08:00
xiaoxian521	667ef918fc	perf: 无需安装 `@vue/runtime-core`，兼容 `element-plus` 的组件 `volar` 提示	2022-11-27 02:25:09 +08:00
xiaoxian521	cc55de03ee	release: update `3.8.5`	2022-11-27 00:03:19 +08:00
xiaoxian521	4f786d6262	perf: 大优化，移除 `@pureadmin/components` , 打包大小未启用压缩前减少 `0.4 MB` , 首屏请求减少 `2.3 MB` 的资源	2022-11-26 23:37:00 +08:00
xiaoxian521	63f2540745	chore: update	2022-11-26 18:23:52 +08:00
xiaoxian521	fde7f927df	release: update `3.8.0`	2022-11-26 15:07:07 +08:00
xiaoxian521	b4d1cff464	chore: update	2022-11-26 14:26:19 +08:00
xiaoxian521	aedc10a6dc	perf: 优化 `vite` 依赖预构建在平台里的配置	2022-11-25 15:50:21 +08:00
xiaoxian521	78820f1049	feat: 使用 `svgo` 压缩平台所有 `svg` 文件，减少体积	2022-11-25 13:25:35 +08:00
RealityBoy	301356ebd7	perf: 更完善的全局类型提示	2022-11-25 12:49:38 +08:00
xiaoxian521	ecba3c2e7f	perf: 静态路由平台自动导入，无需手动引入	2022-11-24 23:46:06 +08:00
xiaoxian521	a4e4045abd	chore: update	2022-11-24 18:49:51 +08:00
xiaoxian521	0d0d33ca29	chore: update	2022-11-24 17:34:36 +08:00
xiaoxian521	10fdb30e07	feat: 新增 `@pureadmin/table` 内嵌 `echarts` 图表示例	2022-11-24 15:06:56 +08:00
xiaoxian521	d7364d59a9	chore: update	2022-11-24 11:48:52 +08:00
xiaoxian521	7d40e36574	feat: 新增 `@pureadmin/table` 打印示例	2022-11-24 01:34:15 +08:00
xiaoxian521	3aad64746d	feat: 新增 `@pureadmin/table` 水印示例	2022-11-23 20:11:34 +08:00
xiaoxian521	b5215b33bf	feat: 新增 `@pureadmin/table` 编辑单元格示例	2022-11-23 18:29:10 +08:00
xiaoxian521	ab44405b52	feat: 新增 @pureadmin/table 导出 `Excel` 示例	2022-11-23 15:57:05 +08:00
xiaoxian521	c16ee6cf68	feat: 新增 `@pureadmin/table` 右键菜单示例	2022-11-23 15:17:26 +08:00
xiaoxian521	7472c25c0a	feat: 新增 `@pureadmin/table` 行、列拖拽示例	2022-11-23 12:03:17 +08:00
xiaoxian521	27d9339a4c	style: update	2022-11-22 13:38:46 +08:00
xiaoxian521	23c23bf02f	docs: update	2022-11-22 11:52:10 +08:00
xiaoxian521	5649f6216f	docs: update	2022-11-22 11:15:50 +08:00
xiaoxian521	4ed2bb9e57	feat: 新增 `@pureadmin/table` 图像预览示例	2022-11-22 10:56:00 +08:00
xiaoxian521	46567cb15c	feat: 新增 `@pureadmin/table` 多种数据格式（深层结构）示例	2022-11-22 10:05:54 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024"><path fill="#FF5D50" d="M428.698 107.315c-6.503 72.192-36.352 207.258-160.256 337.408 3.686-48.025-7.117-83.763-19.047-107.673-6.605-13.159-26.06-10.599-28.877 3.84-5.734 29.44-20.582 75.059-57.6 137.779-71.628 121.395-62.566 459.878 340.736 459.878S934.093 585.728 876.8 442.522c-37.376-93.44-93.952-152.525-128.82-182.324-11.417-9.779-29.132-1.945-29.593 13.056-.921 30.464-7.321 73.37-33.075 102.144-.666-52.787-38.144-208.384-202.445-296.857-23.296-12.544-51.763 2.457-54.17 28.774z"/><path fill="#FFDF99" d="M702.26 678.4c-4.2-45.056-60.673-166.554-212.634-246.426-10.599-5.58-23.092 3.124-21.504 15.002 6.246 46.848 12.953 140.493-24.064 184.73 4.044-40.397-18.125-73.83-36.66-94.31-8.396-9.217-23.552-4.66-25.497 7.68-3.533 22.322-12.851 56.268-36.557 97.945-42.086 74.035-86.989 188.672 124.57 294.656 10.956.563 22.17.87 33.74.87a617.97 617.97 0 0 0 32.717-.87C694.631 878.182 709.837 759.706 702.26 678.4z"/></svg>