release: update 3.9.4

2025-11-03 13:44:47 +08:00 · 2022-12-05 13:59:54 +08:00
74 changed files with 1368 additions and 1619 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,46 +1,3 @@
-# 3.9.7 (2022-12-26)
-
-### 🍏 Perf
-
- Use `path.posix.resolve` instead of `path.resolve` to avoid drive letter problems when using `electron` in `windows` environment
- By default, the `CachingAsyncRoutes` dynamic routing cache is turned off locally, making it easier to debug in the development environment. It is not necessary to clear the local cached dynamic routing every time you modify the dynamic routing. It is recommended to enable it in the production environment
-
-# 3.9.6 (2022-12-19)
-
-### 🎫 Chores
-
- Upgrade `vite4` version
-
-### 🐞 Bug fixes
-
- Fix the problem that `hmr` of `vite` is slow due to the wrong way of importing `tailwind.css`
-
-### 🍏 Perf
-
- Update [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) to the latest version, bringing more friendly type hints
- Optimize [PureTableBar](https://github.com/xiaoxian521/vue-pure-admin/tree/main/src/components/RePureTableBar) component
- Optimize the business code of the system management page to bring better code reference
-
-# 3.9.5 (2022-12-13)
-
-### ✔️ refactor
-
- completely removed `lodash` and its related libraries
-  [Click here to see Why Removed? How to integrate it yourself? ](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9 %99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
-
-### 🎫 Feat
-
- Add `@pureadmin/table` table dynamic column example
-
-### 🐞 Bug fixes
-
- Fix dynamic route `rank` issue
- Fix dark theme styling issues
-
-### 🍏 Perf
-
- optimize the route `rank`, when `rank` does not exist, it will be created automatically according to the order, the home page route will always be the first
-
 # 3.9.4 (2022-12-05)

 ### ✔️ refactor
@@ -48,10 +5,6 @@
 - Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
  [Click here to see Why Removed? How to integrate it yourself?](https://xiaoxian521.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)

-### 🎫 Feat
-
- Add `@pureadmin/table` table selector (single select, multiple select) example
-
 # 3.9.3 (2022-12-04)

 ### 🎫 Feat
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,46 +1,3 @@
-# 3.9.7 (2022-12-26)
-
-### 🍏 Perf
-
- Use `path.posix.resolve` instead of `path.resolve` to avoid drive letter problems when using `electron` in `windows` environment
- By default, the `CachingAsyncRoutes` dynamic routing cache is turned off locally, making it easier to debug in the development environment. It is not necessary to clear the local cached dynamic routing every time you modify the dynamic routing. It is recommended to enable it in the production environment
-
-# 3.9.6 (2022-12-19)
-
-### 🎫 Chores
-
- Upgrade `vite4` version
-
-### 🐞 Bug fixes
-
- Fix the problem that `hmr` of `vite` is slow due to the wrong way of importing `tailwind.css`
-
-### 🍏 Perf
-
- Update [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) to the latest version, bringing more friendly type hints
- Optimize [PureTableBar](https://github.com/xiaoxian521/vue-pure-admin/tree/main/src/components/RePureTableBar) component
- Optimize the business code of the system management page to bring better code reference
-
-# 3.9.5 (2022-12-13)
-
-### ✔️ refactor
-
- completely removed `lodash` and its related libraries
-  [Click here to see Why Removed? How to integrate it yourself? ](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9 %99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
-
-### 🎫 Feat
-
- Add `@pureadmin/table` table dynamic column example
-
-### 🐞 Bug fixes
-
- Fix dynamic route `rank` issue
- Fix dark theme styling issues
-
-### 🍏 Perf
-
- optimize the route `rank`, when `rank` does not exist, it will be created automatically according to the order, the home page route will always be the first
-
 # 3.9.4 (2022-12-05)

 ### ✔️ refactor
@@ -48,10 +5,6 @@
 - Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
  [Click here to see Why Removed? How to integrate it yourself?](https://xiaoxian521.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)

-### 🎫 Feat
-
- Add `@pureadmin/table` table selector (single select, multiple select) example
-
 # 3.9.3 (2022-12-04)

 ### 🎫 Feat
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,46 +1,3 @@
-# 3.9.7 (2022-12-26)
-
-### 🍏 Perf
-
- 使用 `path.posix.resolve` 替代 `path.resolve` 避免 `windows` 环境下使用 `electron` 出现盘符问题
- 默认关闭 `CachingAsyncRoutes` 动态路由缓存本地，使其在开发环境下调试更方便，不用每次修改动态路由都要先清空本地缓存的动态路由，更推荐在生产环境开启
-
-# 3.9.6 (2022-12-19)
-
-### 🎫 Chores
-
- 升级 `vite4` 版本
-
-### 🐞 Bug fixes
-
- 修复 `tailwind.css` 错误的引入方式导致 `vite` 的 `hmr` 慢的问题
-
-### 🍏 Perf
-
- 更新 [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) 至最新版，带来更友好的类型提示
- 优化 [PureTableBar](https://github.com/xiaoxian521/vue-pure-admin/tree/main/src/components/RePureTableBar) 组件
- 优化系统管理页面业务代码，带来更好的代码参考
-
-# 3.9.5 (2022-12-13)
-
-### ✔️ refactor
-
- 完全移除了 `lodash` 和其相关库
-  [点击此处查看为什么移除？如何自行集成？](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
-
-### 🎫 Feat
-
- 添加 `@pureadmin/table` 表格动态列示例
-
-### 🐞 Bug fixes
-
- 修复动态路由 `rank` 问题
- 修复暗黑主题样式问题
-
-### 🍏 Perf
-
- 优化路由 `rank` ，当 `rank` 不存在时，根据顺序自动创建，首页路由永远在第一位
-
 # 3.9.4 (2022-12-05)

 ### ✔️ refactor
@@ -48,10 +5,6 @@
 - 完全移除了 `vxe-table`，移除后，完整版整体打包大小减少 `1.82MB`，首启动时长基本和精简版持平 🐮
  [点击此处查看为什么移除？如何自行集成？](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)

-### 🎫 Feat
-
- 添加 `@pureadmin/table` 表格选择器（单选、多选）示例
-
 # 3.9.3 (2022-12-04)

 ### 🎫 Feat
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@
 - [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
 - [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)

-## 配套保姆级文档（支持 `PWA` 快速、离线访问）
+## 配套文档（支持 `PWA` 快速、离线访问）

 - [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
 - [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
@@ -140,7 +140,7 @@ pnpm build

 [xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)

-## 支持
+## 捐赠

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

@@ -148,7 +148,9 @@ pnpm build

 ## `QQ` 交流群

-[点击去加入](https://yiming_chang.gitee.io/pure-admin-doc/pages/support/#qq-%E4%BA%A4%E6%B5%81%E7%BE%A4)
+一群已满，下面是二群，群里严禁`黄`、`赌`、`毒`、`vpn`等违法行为！
+
+<img src="https://yiming_chang.gitee.io/pure-admin-doc/img/support/qq.png" width="150px" height="225px" />

 ## 许可证

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

 [MIT © xiaoxian521-2020](./LICENSE)

-## 支持者
+## 捐赠者

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

--- a/build/cdn.ts
+++ b/build/cdn.ts
@@ -7,7 +7,7 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
 * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
 */
 export const cdn = importToCDN({
-  //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
+  //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path）
  prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
  modules: [
    {
@@ -56,6 +56,12 @@ export const cdn = importToCDN({
      name: "echarts",
      var: "echarts",
      path: "echarts.min.js"
+    },
+    {
+      name: "lodash",
+      var: "lodash",
+      // 可写`完整路径`，会替换`prodUrl`
+      path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    }
  ]
 });
--- a/build/index.ts
+++ b/build/index.ts
@@ -27,4 +27,9 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
  return ret;
 };

-export { warpperEnv };
+/** 获取环境变量 */
+const loadEnv = (): ViteEnv => {
+  return import.meta.env;
+};
+
+export { warpperEnv, loadEnv };
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -12,10 +12,12 @@ const include = [
  "axios",
  "pinia",
  "swiper",
+  "lodash",
  "echarts",
  "intro.js",
  "vue-i18n",
  "js-cookie",
+  "lodash-es",
  "cropperjs",
  "jsbarcode",
  "sortablejs",
@@ -25,6 +27,8 @@ const include = [
  "vue3-danmaku",
  "v-contextmenu",
  "vue-pdf-embed",
+  "lodash-unified",
+  "@ctrl/tinycolor",
  "china-area-data",
  "vue-json-pretty",
  "@logicflow/core",
@@ -52,6 +56,7 @@ const include = [
 const exclude = [
  "@iconify-icons/ep",
  "@iconify-icons/ri",
+  "@iconify-icons/mdi",
  "@pureadmin/theme/dist/browser-utils"
 ];

--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -6,10 +6,10 @@ import svgLoader from "vite-svg-loader";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 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 VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import DefineOptions from "unplugin-vue-define-options/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";

@@ -22,7 +22,8 @@ export function getPluginsList(
  const lifecycle = process.env.npm_lifecycle_event;
  return [
    vue(),
-    VueI18nPlugin({
+    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
+    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [resolve("locales/**")]
@@ -39,7 +40,14 @@ export function getPluginsList(
    themePreprocessorPlugin({
      scss: {
        multipleScopeVars: genScssMultipleScopeVars(),
-        extract: true
+        // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+        extract: true,
+        // 会选取defaultScopeName对应的主题css文件在html添加link
+        themeLinkTagId: "head",
+        // "head"||"head-prepend" || "body" ||"body-prepend"
+        themeLinkTagInjectTo: "head",
+        // 是否对抽取的css文件内对应scopeName的权重类名移除
+        removeCssScopeName: false
      }
    }),
    // svg组件化支持
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "3.9.7",
+  "version": "3.9.4",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -30,12 +30,13 @@
  ],
  "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/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.9.0",
-    "@pureadmin/utils": "^1.8.5",
+    "@pureadmin/table": "^1.8.3",
+    "@pureadmin/utils": "^1.7.4",
    "@vueuse/core": "^9.6.0",
    "@vueuse/motion": "2.0.0-beta.12",
    "@wangeditor/editor": "^5.1.21",
@@ -47,17 +48,20 @@
    "dayjs": "^1.11.6",
    "echarts": "^5.4.0",
    "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.2.27",
+    "element-plus": "^2.2.26",
    "element-resize-detector": "^1.2.4",
    "intro.js": "^6.0.0",
    "js-cookie": "^3.0.1",
    "jsbarcode": "^3.11.5",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash-unified": "^1.0.2",
    "md-editor-v3": "^2.5.0",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.28",
+    "pinia": "^2.0.27",
    "qrcode": "^1.5.1",
    "qs": "^6.11.0",
    "responsive-storage": "^2.1.0",
@@ -71,8 +75,8 @@
    "vue-pdf-embed": "^1.1.5",
    "vue-router": "^4.1.6",
    "vue-types": "^4.2.1",
-    "vue-virtual-scroller": "2.0.0-beta.7",
-    "vue3-danmaku": "^1.2.0",
+    "vue-virtual-scroller": "^2.0.0-alpha.1",
+    "vue3-danmaku": "^1.1.0",
    "vuedraggable": "^4.1.0",
    "xgplayer": "^2.32.1",
    "xlsx": "^0.18.5"
@@ -81,13 +85,16 @@
    "@commitlint/cli": "13.1.0",
    "@commitlint/config-conventional": "13.1.0",
    "@iconify-icons/ep": "^1.2.7",
+    "@iconify-icons/mdi": "^1.2.8",
    "@iconify-icons/ri": "^1.2.3",
    "@iconify/vue": "^4.0.0",
-    "@intlify/unplugin-vue-i18n": "^0.8.1",
-    "@pureadmin/theme": "^3.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
+    "@pureadmin/theme": "^2.4.0",
    "@types/element-resize-detector": "1.1.3",
    "@types/intro.js": "^5.1.0",
    "@types/js-cookie": "^3.0.1",
+    "@types/lodash": "^4.14.180",
+    "@types/lodash-es": "^4.17.6",
    "@types/mockjs": "^1.0.7",
    "@types/node": "^18.11.9",
    "@types/nprogress": "0.2.0",
@@ -96,8 +103,8 @@
    "@types/sortablejs": "^1.15.0",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.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",
    "autoprefixer": "^10.4.13",
@@ -130,7 +137,7 @@
    "terser": "^5.15.1",
    "typescript": "^4.9.3",
    "unplugin-vue-define-options": "^1.0.0",
-    "vite": "^4.0.3",
+    "vite": "3.1.8",
    "vite-plugin-cdn-import": "^0.3.5",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "^2.9.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "3.9.7",
+  "Version": "3.9.4",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
@@ -17,7 +17,7 @@
  "ShowLogo": true,
  "ShowModel": "smart",
  "MenuArrowIconNoTransition": true,
-  "CachingAsyncRoutes": false,
+  "CachingAsyncRoutes": true,
  "TooltipEffect": "light",
  "MapConfigure": {
    "amapKey": "97b3248d1553172e81f168cf94ea667e",
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -10,11 +10,6 @@ type Result = {
  };
 };

-type ResultDept = {
-  success: boolean;
-  data?: Array<any>;
-};
-
 /** 获取用户管理列表 */
 export const getUserList = (data?: object) => {
  return http.request<Result>("post", "/user", { data });
@@ -27,5 +22,5 @@ export const getRoleList = (data?: object) => {

 /** 获取部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<ResultDept>("post", "/dept", { data });
+  return http.request<Result>("post", "/dept", { data });
 };
--- a/src/components/ReFlowChart/src/NodePanel.vue
+++ b/src/components/ReFlowChart/src/NodePanel.vue
--- a/src/components/ReFlowChart/src/assets/background/click.png
+++ b/src/components/ReFlowChart/src/assets/background/click.png
--- a/src/components/ReFlowChart/src/assets/background/download.png
+++ b/src/components/ReFlowChart/src/assets/background/download.png
--- a/src/components/ReFlowChart/src/assets/background/end.png
+++ b/src/components/ReFlowChart/src/assets/background/end.png
--- a/src/components/ReFlowChart/src/assets/background/push.png
+++ b/src/components/ReFlowChart/src/assets/background/push.png
--- a/src/components/ReFlowChart/src/assets/background/start.png
+++ b/src/components/ReFlowChart/src/assets/background/start.png
--- a/src/components/ReFlowChart/src/assets/background/time.png
+++ b/src/components/ReFlowChart/src/assets/background/time.png
--- a/src/components/ReFlowChart/src/assets/background/user.png
+++ b/src/components/ReFlowChart/src/assets/background/user.png
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cloneDeep } from "@pureadmin/utils";
+import { cloneDeep } from "lodash-unified";
 import { IconJson } from "@/components/ReIcon/data";
 import { ref, computed, CSSProperties, toRef, watch } from "vue";
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
--- a/src/components/ReIcon/src/offlineIcon.ts
+++ b/src/components/ReIcon/src/offlineIcon.ts
@@ -43,3 +43,7 @@ addIcon("setting", Setting);
 addIcon("dept", Dept);
 addIcon("lollipop", Lollipop);
 addIcon("monitor", Monitor);
+
+// 非菜单图标
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+addIcon("refreshRight", RefreshRight);
--- a/src/components/RePureTableBar/index.ts
+++ b/src/components/RePureTableBar/index.ts
@@ -1,5 +0,0 @@
-import pureTableBar from "./src/bar";
-import { withInstall } from "@pureadmin/utils";
-
-/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/xiaoxian521/pure-admin-table */
-export const PureTableBar = withInstall(pureTableBar);
--- a/src/components/RePureTableBar/src/svg/collapse.svg
+++ b/src/components/RePureTableBar/src/svg/collapse.svg
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2Zm10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z"/></svg>
--- a/src/components/RePureTableBar/src/svg/expand.svg
+++ b/src/components/RePureTableBar/src/svg/expand.svg
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
--- a/src/components/RePureTableBar/src/svg/refresh.svg
+++ b/src/components/RePureTableBar/src/svg/refresh.svg
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
--- a/src/components/RePureTableBar/src/svg/settings.svg
+++ b/src/components/RePureTableBar/src/svg/settings.svg
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A9.99 9.99 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.803a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12a4.99 4.99 0 0 1-1.273 3.334 8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 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/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -8,10 +8,11 @@ import {
  defineComponent
 } from "vue";
 import "./index.scss";
+import { cloneDeep } from "lodash-unified";
+import { isString } from "@pureadmin/utils";
 import { propTypes } from "@/utils/propTypes";
-import { isString, cloneDeep } from "@pureadmin/utils";
+import { IconifyIconOffline } from "../../ReIcon";
 import QRCode, { QRCodeRenderersOptions } from "qrcode";
-import RefreshRight from "@iconify-icons/ep/refresh-right";

 interface QrcodeLogo {
  src?: string;
@@ -96,7 +97,7 @@ export default defineComponent({
          width: props.width,
          ...options
        });
-        (unref(wrapRef) as any).src = url;
+        (unref(wrapRef) as HTMLImageElement).src = url;
        emit("done", url);
        loading.value = false;
      }
@@ -244,9 +245,9 @@ export default defineComponent({
              onClick={disabledClick}
            >
              <div class="absolute top-[50%] left-[50%] font-bold">
-                <iconify-icon-offline
+                <IconifyIconOffline
                  class="cursor-pointer"
-                  icon={RefreshRight}
+                  icon="refreshRight"
                  width="30"
                  color="var(--el-color-primary)"
                />
--- a/src/components/ReTable/index.ts
+++ b/src/components/ReTable/index.ts
@@ -0,0 +1,5 @@
+import tableProBar from "./src/bar";
+import { withInstall } from "@pureadmin/utils";
+
+/** table-crud组件 */
+export const TableProBar = withInstall(tableProBar);
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,25 +1,54 @@
-import { delay } from "@pureadmin/utils";
+import { defineComponent, ref, computed, PropType } from "vue";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-import { defineComponent, ref, computed, type PropType } from "vue";
-import ExpandIcon from "./svg/expand.svg?component";
-import RefreshIcon from "./svg/refresh.svg?component";
-import SettingIcon from "./svg/settings.svg?component";
-import CollapseIcon from "./svg/collapse.svg?component";
+
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
+import { IconifyIconOffline } from "../../ReIcon";
+import Expand from "@iconify-icons/mdi/arrow-expand-down";
+import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical";
+import Setting from "@iconify-icons/ri/settings-3-line";
+
+export const loadingSvg = `
+  <path class="path" d="
+    M 30 15
+    L 28 17
+    M 25.61 25.61
+    A 15 15, 0, 0, 1, 15 30
+    A 15 15, 0, 1, 1, 27.99 7.5
+    L 15 15
+  "
+    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+  />
+`;

 const props = {
-  /** 头部最左边的标题 */
+  // 头部最左边的标题
  title: {
    type: String,
    default: "列表"
  },
-  /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
+  // 表格数据
+  dataList: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  // 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可
  tableRef: {
-    type: Object as PropType<any>
+    type: Object as PropType<any>,
+    default() {
+      return {};
+    }
+  },
+  // 是否显示加载动画，默认false 不加载
+  loading: {
+    type: Boolean,
+    default: false
  }
 };

 export default defineComponent({
-  name: "PureTableBar",
+  name: "TableProBar",
  props,
  emits: ["refresh"],
  setup(props, { emit, slots, attrs }) {
@@ -27,7 +56,6 @@ export default defineComponent({
    const checkList = ref([]);
    const size = ref("default");
    const isExpandAll = ref(true);
-    const loading = ref(false);

    const getDropdownItemStyle = computed(() => {
      return s => {
@@ -39,26 +67,9 @@ export default defineComponent({
      };
    });

-    const iconClass = computed(() => {
-      return [
-        "text-black",
-        "dark:text-white",
-        "duration-100",
-        "hover:!text-primary",
-        "cursor-pointer",
-        "outline-none"
-      ];
-    });
-
-    function onReFresh() {
-      loading.value = true;
-      emit("refresh");
-      delay(500).then(() => (loading.value = false));
-    }
-
    function onExpand() {
      isExpandAll.value = !isExpandAll.value;
-      toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
+      toggleRowExpansionAll(props.dataList, isExpandAll.value);
    }

    function toggleRowExpansionAll(data, isExpansion) {
@@ -77,7 +88,7 @@ export default defineComponent({
            style={getDropdownItemStyle.value("large")}
            onClick={() => (size.value = "large")}
          >
-            宽松
+            松散
          </el-dropdown-item>
          <el-dropdown-item
            style={getDropdownItemStyle.value("default")}
@@ -97,8 +108,11 @@ export default defineComponent({

    const reference = {
      reference: () => (
-        <SettingIcon
-          class={["w-[16px]", iconClass.value]}
+        <IconifyIconOffline
+          class="cursor-pointer"
+          icon={Setting}
+          width="16"
+          color="text_color_regular"
          onMouseover={e => (buttonRef.value = e.currentTarget)}
        />
      )
@@ -106,7 +120,13 @@ export default defineComponent({

    return () => (
      <>
-        <div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
+        <div
+          {...attrs}
+          class="w-[99/100] mt-6 p-2 bg-bg_color"
+          v-loading={props.loading}
+          element-loading-svg={loadingSvg}
+          element-loading-svg-view-box="-10, -10, 50, 50"
+        >
          <div class="flex justify-between w-full h-[60px] p-4">
            <p class="font-bold truncate">{props.title}</p>
            <div class="flex items-center justify-around">
@@ -118,32 +138,36 @@ export default defineComponent({
                    content={isExpandAll.value ? "折叠" : "展开"}
                    placement="top"
                  >
-                    <ExpandIcon
-                      class={["w-[16px]", iconClass.value]}
-                      style={{
-                        transform: isExpandAll.value ? "none" : "rotate(-90deg)"
-                      }}
+                    <IconifyIconOffline
+                      class="cursor-pointer"
+                      icon={isExpandAll.value ? UnExpand : Expand}
+                      width="16"
+                      color="text_color_regular"
                      onClick={() => onExpand()}
                    />
                  </el-tooltip>
                  <el-divider direction="vertical" />
                </>
-              ) : null}
+              ) : undefined}
              <el-tooltip effect="dark" content="刷新" placement="top">
-                <RefreshIcon
-                  class={[
-                    "w-[16px]",
-                    iconClass.value,
-                    loading.value ? "animate-spin" : ""
-                  ]}
-                  onClick={() => onReFresh()}
+                <IconifyIconOffline
+                  class="cursor-pointer"
+                  icon="refreshRight"
+                  width="16"
+                  color="text_color_regular"
+                  onClick={() => emit("refresh")}
                />
              </el-tooltip>
              <el-divider direction="vertical" />

              <el-tooltip effect="dark" content="密度" placement="top">
                <el-dropdown v-slots={dropdown} trigger="click">
-                  <CollapseIcon class={["w-[16px]", iconClass.value]} />
+                  <IconifyIconOffline
+                    class="cursor-pointer"
+                    icon={ArrowCollapse}
+                    width="16"
+                    color="text_color_regular"
+                  />
                </el-dropdown>
              </el-tooltip>
              <el-divider direction="vertical" />
@@ -175,7 +199,11 @@ export default defineComponent({
              content="列设置"
            />
          </div>
-          {slots.default({ size: size.value, checkList: checkList.value })}
+          {props.dataList.length > 0 ? (
+            slots.default({ size: size.value, checkList: checkList.value })
+          ) : (
+            <el-empty description="暂无数据" />
+          )}
        </div>
      </>
    );
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,8 +1,9 @@
 import { App } from "vue";
 import axios from "axios";
+import { loadEnv } from "@build/index";

 let config: object = {};
-const { VITE_PUBLIC_PATH } = import.meta.env;
+const { VITE_PUBLIC_PATH } = loadEnv();

 const setConfig = (cfg?: unknown) => {
  config = Object.assign(config, cfg);
--- a/src/directives/auth/index.ts
+++ b/src/directives/auth/index.ts
@@ -5,7 +5,7 @@ export const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding;
    if (value) {
-      !hasAuth(value) && el.parentNode?.removeChild(el);
+      !hasAuth(value) && el.parentNode.removeChild(el);
    } else {
      throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
    }
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -70,8 +70,14 @@ notices.value.map(v => (noticesNum.value += v.list.length));
    height: 1px;
  }

+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
  :deep(.el-tabs__nav-wrap) {
    padding: 0 36px 0 36px;
  }
+
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__active-bar) {
+    margin: 0 36px 0 36px;
+  }
 }
 </style>
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { cloneDeep } from "@pureadmin/utils";
+import { cloneDeep } from "lodash-unified";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
 import { deleteChildren } from "@/utils/tree";
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -132,8 +132,8 @@ const multiTagsCacheChange = () => {
 /** 清空缓存并返回登录页 */
 function onReset() {
  removeToken();
-  storageLocal().clear();
-  storageSession().clear();
+  storageLocal.clear();
+  storageSession.clear();
  const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
  useAppStoreHook().setLayout(Layout);
  setEpThemeColor(EpThemeColor);
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -144,8 +144,7 @@ function resolvePath(routePath) {
  if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
    return routePath || props.basePath;
  } else {
-    // 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
-    return path.posix.resolve(props.basePath, routePath);
+    return path.resolve(props.basePath, routePath);
  }
 }
 </script>
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -12,8 +12,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";

 const route = useRoute();
 const showLogo = ref(
-  storageLocal().getItem<StorageConfigs>("responsive-configure")?.showLogo ??
-    true
+  storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
 );

 const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
-import { isEqual, isAllEmpty } from "@pureadmin/utils";
+import { isEqual, isEmpty } from "lodash-unified";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
 import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
@@ -349,7 +349,7 @@ function showMenuModel(
  const allRoute = multiTags.value;
  const routeLength = multiTags.value.length;
  let currentIndex = -1;
-  if (isAllEmpty(query)) {
+  if (isEmpty(query)) {
    currentIndex = allRoute.findIndex(v => v.path === currentPath);
  } else {
    currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -1,7 +1,9 @@
 import { ref } from "vue";
 import { getConfig } from "@/config";
+import { find } from "lodash-unified";
 import { useLayout } from "./useLayout";
 import { themeColorsType } from "../types";
+import { TinyColor } from "@ctrl/tinycolor";
 import { useGlobal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import {
@@ -54,27 +56,35 @@ export function useDataThemeChange() {
    if (theme === "default" || theme === "light") {
      setEpThemeColor(getConfig().EpThemeColor);
    } else {
-      const colors = themeColors.value.find(v => v.themeColor === theme);
+      const colors = find(themeColors.value, { themeColor: theme });
      setEpThemeColor(colors.color);
    }
  }

-  function setPropertyPrimary(mode: string, i: number, color: string) {
-    document.documentElement.style.setProperty(
-      `--el-color-primary-${mode}-${i}`,
-      dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
-    );
-  }
+  /**
+   * @description 自动计算hover和active颜色
+   * @see {@link https://element-plus.org/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2}
+   */
+  const shadeBgColor = (color: string): string => {
+    return new TinyColor(color).shade(10).toString();
+  };

  /** 设置 `element-plus` 主题色 */
  const setEpThemeColor = (color: string) => {
    useEpThemeStoreHook().setEpThemeColor(color);
+    body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
    document.documentElement.style.setProperty("--el-color-primary", color);
-    for (let i = 1; i <= 2; i++) {
-      setPropertyPrimary("dark", i, color);
-    }
    for (let i = 1; i <= 9; i++) {
-      setPropertyPrimary("light", i, color);
+      document.documentElement.style.setProperty(
+        `--el-color-primary-light-${i}`,
+        lighten(color, i / 10)
+      );
+    }
+    for (let i = 1; i <= 2; i++) {
+      document.documentElement.style.setProperty(
+        `--el-color-primary-dark-${i}`,
+        darken(color, i / 10)
+      );
    }
  };

--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -41,13 +41,13 @@ export function useTags() {

  /** 显示模式，默认灵动模式 */
  const showModel = ref(
-    storageLocal().getItem<StorageConfigs>("responsive-configure")?.showModel ||
+    storageLocal.getItem<StorageConfigs>("responsive-configure")?.showModel ||
      "smart"
  );
  /** 是否隐藏标签页，默认显示 */
  const showTags =
    ref(
-      storageLocal().getItem<StorageConfigs>("responsive-configure").hideTabs
+      storageLocal.getItem<StorageConfigs>("responsive-configure").hideTabs
    ) ?? ref("false");
  const multiTags: any = computed(() => {
    return useMultiTagsStoreHook().multiTags;
@@ -195,11 +195,11 @@ export function useTags() {

  onMounted(() => {
    if (!showModel.value) {
-      const configure = storageLocal().getItem<StorageConfigs>(
+      const configure = storageLocal.getItem<StorageConfigs>(
        "responsive-configure"
      );
      configure.showModel = "card";
-      storageLocal().setItem("responsive-configure", configure);
+      storageLocal.setItem("responsive-configure", configure);
    }
  });

--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@@ -2,7 +2,10 @@
 * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
 */

-import { type multipleScopeVarsOptions } from "@pureadmin/theme";
+type MultipleScopeVarsItem = {
+  scopeName: string;
+  varsContent: string;
+};

 /** 预设主题色 */
 const themeColors = {
@@ -110,8 +113,8 @@ const themeColors = {
 /**
 * @description 将预设主题色处理成主题插件所需格式
 */
-export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
-  const result = [] as multipleScopeVarsOptions[];
+export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
+  const result = [] as MultipleScopeVarsItem[];
  Object.keys(themeColors).forEach(key => {
    result.push({
      scopeName: `layout-theme-${key}`,
@@ -126,7 +129,7 @@ export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
      `
-    } as multipleScopeVarsOptions);
+    } as MultipleScopeVarsItem);
  });
  return result;
 };
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,8 +16,6 @@ import PureDescriptions from "@pureadmin/descriptions";
 import "./style/reset.scss";
 // 导入公共样式
 import "./style/index.scss";
-// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
-import "./style/tailwind.css";
 import "element-plus/dist/index.css";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -63,7 +63,7 @@ export const $t = (key: string) => key;
 export const i18n: I18n = createI18n({
  legacy: false,
  locale:
-    storageLocal().getItem<StorageConfigs>("responsive-locale")?.locale ?? "zh",
+    storageLocal.getItem<StorageConfigs>("responsive-locale")?.locale ?? "zh",
  fallbackLocale: "en",
  messages: localesConfigs
 });
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import "@/utils/sso";
 import { getConfig } from "@/config";
 import NProgress from "@/utils/progress";
+import { findIndex } from "lodash-unified";
 import { transformI18n } from "@/plugins/i18n";
 import { sessionKey, type DataInfo } from "@/utils/auth";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
@@ -105,7 +106,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
      handleAliveRoute(newMatched);
    }
  }
-  const userInfo = storageSession().getItem<DataInfo<number>>(sessionKey);
+  const userInfo = storageSession.getItem<DataInfo<number>>(sessionKey);
  NProgress.start();
  const externalLink = isUrl(to?.name as string);
  if (!externalLink) {
@@ -143,10 +144,14 @@ router.beforeEach((to: toRouteType, _from, next) => {
        initRouter().then((router: Router) => {
          if (!useMultiTagsStoreHook().getMultiTagsCache) {
            const { path } = to;
-            const route = findRouteByPath(
-              path,
-              router.options.routes[0].children
-            );
+            const index = findIndex(remainingRouter, v => {
+              return v.path == path;
+            });
+            const routes: any =
+              index === -1
+                ? router.options.routes[0].children
+                : router.options.routes;
+            const route = findRouteByPath(path, routes);
            // query、params模式路由传参数的标签页不在此处处理
            if (route && route.meta?.title) {
              useMultiTagsStoreHook().handleTags("push", {
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -6,7 +6,6 @@ export default {
  redirect: "/error/403",
  meta: {
    icon: "informationLine",
-    // showLink: false,
    title: $t("menus.hsabnormal"),
    rank: error
  },
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -8,18 +8,17 @@ import {
 } from "vue-router";
 import { router } from "./index";
 import { isProxy, toRaw } from "vue";
+import { loadEnv } from "../../build";
 import { useTimeoutFn } from "@vueuse/core";
 import { RouteConfigs } from "@/layout/types";
 import {
  isString,
-  cloneDeep,
-  isAllEmpty,
-  intersection,
  storageSession,
  isIncludeAllChildren
 } from "@pureadmin/utils";
 import { getConfig } from "@/config";
 import { buildHierarchyTree } from "@/utils/tree";
+import { cloneDeep, intersection } from "lodash-unified";
 import { sessionKey, type DataInfo } from "@/utils/auth";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 const IFrame = () => import("@/layout/frameView.vue");
@@ -29,25 +28,19 @@ const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
 // 动态路由
 import { getAsyncRoutes } from "@/api/routes";

-function handRank(routeInfo: any) {
-  const { name, path, parentId, meta } = routeInfo;
-  return isAllEmpty(parentId)
-    ? isAllEmpty(meta?.rank) ||
-      (meta?.rank === 0 && name !== "Home" && path !== "/")
-      ? true
-      : false
-    : false;
-}
-
 /** 按照路由中meta下的rank等级升序来排序路由 */
 function ascending(arr: any[]) {
-  arr.forEach((v, index) => {
-    // 当rank不存在时，根据顺序自动创建，首页路由永远在第一位
-    if (handRank(v)) v.meta.rank = index + 2;
+  arr.forEach(v => {
+    if (v?.meta?.rank === null) v.meta.rank = undefined;
+    if (v?.meta?.rank === 0) {
+      if (v.name !== "Home" && v.path !== "/") {
+        console.warn("rank only the home page can be 0");
+      }
+    }
  });
  return arr.sort(
    (a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
-      return a?.meta.rank - b?.meta.rank;
+      return a?.meta?.rank - b?.meta?.rank;
    }
  );
 }
@@ -84,7 +77,7 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
 /** 从sessionStorage里取出当前登陆用户的角色roles，过滤无权限的菜单 */
 function filterNoPermissionTree(data: RouteComponent[]) {
  const currentRoles =
-    storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
+    storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
  const newTree = cloneDeep(data).filter((v: any) =>
    isOneOfArray(v.meta?.roles, currentRoles)
  );
@@ -196,7 +189,7 @@ function initRouter() {
  if (getConfig()?.CachingAsyncRoutes) {
    // 开启动态路由缓存本地sessionStorage
    const key = "async-routes";
-    const asyncRouteList = storageSession().getItem(key) as any;
+    const asyncRouteList = storageSession.getItem(key) as any;
    if (asyncRouteList && asyncRouteList?.length > 0) {
      return new Promise(resolve => {
        handleAsyncRoutes(asyncRouteList);
@@ -206,7 +199,7 @@ function initRouter() {
      return new Promise(resolve => {
        getAsyncRoutes().then(({ data }) => {
          handleAsyncRoutes(cloneDeep(data));
-          storageSession().setItem(key, data);
+          storageSession.setItem(key, data);
          resolve(router);
        });
      });
@@ -259,7 +252,7 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
        children: []
      });
    } else {
-      newRoutesList[0]?.children.push({ ...v });
+      newRoutesList[0].children.push({ ...v });
    }
  });
  return newRoutesList;
@@ -323,7 +316,7 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {

 /** 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html */
 function getHistoryMode(): RouterHistory {
-  const routerHistory = import.meta.env.VITE_ROUTER_HISTORY;
+  const routerHistory = loadEnv().VITE_ROUTER_HISTORY;
  // len为1 代表只有历史模式 为2 代表历史模式中存在base参数 https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
  const historyMode = routerHistory.split(",");
  const leftMode = historyMode[0];
@@ -355,7 +348,6 @@ function hasAuth(value: string | Array<string>): boolean {
  if (!value) return false;
  /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
  const metaAuths = getAuths();
-  if (!metaAuths) return false;
  const isAuths = isString(value)
    ? metaAuths.includes(value)
    : isIncludeAllChildren(value, metaAuths);
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -9,14 +9,14 @@ export const useAppStore = defineStore({
  state: (): appType => ({
    sidebar: {
      opened:
-        storageLocal().getItem<StorageConfigs>("responsive-layout")
+        storageLocal.getItem<StorageConfigs>("responsive-layout")
          ?.sidebarStatus ?? getConfig().SidebarStatus,
      withoutAnimation: false,
      isClickCollapse: false
    },
    // 这里的layout用于监听容器拖拉后恢复对应的导航模式
    layout:
-      storageLocal().getItem<StorageConfigs>("responsive-layout")?.layout ??
+      storageLocal.getItem<StorageConfigs>("responsive-layout")?.layout ??
      getConfig().Layout,
    device: deviceDetection() ? "mobile" : "desktop",
    // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
@@ -32,8 +32,7 @@ export const useAppStore = defineStore({
  },
  actions: {
    TOGGLE_SIDEBAR(opened?: boolean, resize?: string) {
-      const layout =
-        storageLocal().getItem<StorageConfigs>("responsive-layout");
+      const layout = storageLocal.getItem<StorageConfigs>("responsive-layout");
      if (opened && resize) {
        this.sidebar.withoutAnimation = true;
        this.sidebar.opened = true;
@@ -48,7 +47,7 @@ export const useAppStore = defineStore({
        this.sidebar.isClickCollapse = !this.sidebar.opened;
        layout.sidebarStatus = this.sidebar.opened;
      }
-      storageLocal().setItem("responsive-layout", layout);
+      storageLocal.setItem("responsive-layout", layout);
    },
    async toggleSideBar(opened?: boolean, resize?: string) {
      await this.TOGGLE_SIDEBAR(opened, resize);
--- a/src/store/modules/epTheme.ts
+++ b/src/store/modules/epTheme.ts
@@ -7,10 +7,10 @@ export const useEpThemeStore = defineStore({
  id: "pure-epTheme",
  state: () => ({
    epThemeColor:
-      storageLocal().getItem<StorageConfigs>("responsive-layout")
-        ?.epThemeColor ?? getConfig().EpThemeColor,
+      storageLocal.getItem<StorageConfigs>("responsive-layout")?.epThemeColor ??
+      getConfig().EpThemeColor,
    epTheme:
-      storageLocal().getItem<StorageConfigs>("responsive-layout")?.theme ??
+      storageLocal.getItem<StorageConfigs>("responsive-layout")?.theme ??
      getConfig().Theme
  }),
  getters: {
@@ -30,13 +30,12 @@ export const useEpThemeStore = defineStore({
  },
  actions: {
    setEpThemeColor(newColor: string): void {
-      const layout =
-        storageLocal().getItem<StorageConfigs>("responsive-layout");
+      const layout = storageLocal.getItem<StorageConfigs>("responsive-layout");
      this.epTheme = layout?.theme;
      this.epThemeColor = newColor;
      if (!layout) return;
      layout.epThemeColor = newColor;
-      storageLocal().setItem("responsive-layout", layout);
+      storageLocal.setItem("responsive-layout", layout);
    }
  }
 });
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -9,13 +9,12 @@ export const useMultiTagsStore = defineStore({
  id: "pure-multiTags",
  state: () => ({
    // 存储标签页信息（路由信息）
-    multiTags: storageLocal().getItem<StorageConfigs>("responsive-configure")
+    multiTags: storageLocal.getItem<StorageConfigs>("responsive-configure")
      ?.multiTagsCache
-      ? storageLocal().getItem<StorageConfigs>("responsive-tags")
+      ? storageLocal.getItem<StorageConfigs>("responsive-tags")
      : [...routerArrays],
-    multiTagsCache: storageLocal().getItem<StorageConfigs>(
-      "responsive-configure"
-    )?.multiTagsCache
+    multiTagsCache: storageLocal.getItem<StorageConfigs>("responsive-configure")
+      ?.multiTagsCache
  }),
  getters: {
    getMultiTagsCache() {
@@ -26,14 +25,14 @@ export const useMultiTagsStore = defineStore({
    multiTagsCacheChange(multiTagsCache: boolean) {
      this.multiTagsCache = multiTagsCache;
      if (multiTagsCache) {
-        storageLocal().setItem("responsive-tags", this.multiTags);
+        storageLocal.setItem("responsive-tags", this.multiTags);
      } else {
-        storageLocal().removeItem("responsive-tags");
+        storageLocal.removeItem("responsive-tags");
      }
    },
    tagsCache(multiTags) {
      this.getMultiTagsCache &&
-        storageLocal().setItem("responsive-tags", multiTags);
+        storageLocal.setItem("responsive-tags", multiTags);
    },
    handleTags<T>(
      mode: string,
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -14,9 +14,9 @@ export const useUserStore = defineStore({
  state: (): userType => ({
    // 用户名
    username:
-      storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "",
+      storageSession.getItem<DataInfo<number>>(sessionKey)?.username ?? "",
    // 页面级别权限
-    roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [],
+    roles: storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? [],
    // 前端生成的验证码（按实际需求替换）
    verifyCode: "",
    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -1,4 +1,4 @@
-@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+@import "element-plus/theme-chalk/src/dark/css-vars.scss";

 /* 暗黑模式适配 */
 html.dark {
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -3,6 +3,7 @@
@import "./element-plus.scss";
@import "./sidebar.scss";
@import "./dark.scss";
+@import "./tailwind.css";

 /* 自定义全局 CssVar */
 :root {
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -23,7 +23,7 @@ export function getToken(): DataInfo<number> {
  // 此处与`TokenKey`相同，此写法解决初始化时`Cookies`中不存在`TokenKey`报错
  return Cookies.get(TokenKey)
    ? JSON.parse(Cookies.get(TokenKey))
-    : storageSession().getItem(sessionKey);
+    : storageSession.getItem(sessionKey);
 }

 /**
@@ -47,7 +47,7 @@ export function setToken(data: DataInfo<Date>) {
  function setSessionKey(username: string, roles: Array<string>) {
    useUserStoreHook().SET_USERNAME(username);
    useUserStoreHook().SET_ROLES(roles);
-    storageSession().setItem(sessionKey, {
+    storageSession.setItem(sessionKey, {
      refreshToken,
      expires,
      username,
@@ -60,9 +60,9 @@ export function setToken(data: DataInfo<Date>) {
    setSessionKey(username, roles);
  } else {
    const username =
-      storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "";
+      storageSession.getItem<DataInfo<number>>(sessionKey)?.username ?? "";
    const roles =
-      storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
+      storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
    setSessionKey(username, roles);
  }
 }
--- a/src/utils/chinaArea.ts
+++ b/src/utils/chinaArea.ts
@@ -1,5 +1,5 @@
 import REGION_DATA from "china-area-data";
-import { cloneDeep } from "@pureadmin/utils";
+import { cloneDeep } from "lodash-unified";

 interface ProvinceData {
  value: string;
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { loadEnv } from "@build/index";

 defineOptions({
  name: "Button"
 });

-const { VITE_PUBLIC_PATH } = import.meta.env;
+const { VITE_PUBLIC_PATH } = loadEnv();

 const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
 </script>
--- a/src/views/empty/index.vue
+++ b/src/views/empty/index.vue
@@ -7,12 +7,8 @@ defineOptions({
 </script>

 <template>
-  <div class="w-full h-full text-center">
-    <h1>业务内容模块</h1>
-    <p>使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块</p>
-    <div class="back" title="返回上一页" @click="$router.go(-1)">
-      <back class="w-[80px] h-[80px]" />
-    </div>
+  <div class="back" title="返回上一页" @click="$router.go(-1)">
+    <back class="w-[80px] h-[80px]" />
  </div>
 </template>

--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { initRouter } from "@/router/utils";
-import { storageSession } from "@pureadmin/utils";
 import { type CSSProperties, ref, computed } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -34,7 +33,7 @@ function onChange() {
    .loginByUsername({ username: username.value, password: "admin123" })
    .then(res => {
      if (res.success) {
-        storageSession().removeItem("async-routes");
+        sessionStorage.removeItem("async-routes");
        usePermissionStoreHook().clearAllCachePage();
        initRouter();
      }
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -16,7 +16,7 @@ export const list = [
  {
    key: "page",
    content: rendContent("page"),
-    title: "分页、加载动画、动态列",
+    title: "分页、加载动画",
    component: Page
  },
  {
--- a/src/views/pure-table/high/page/columns.tsx
+++ b/src/views/pure-table/high/page/columns.tsx
@@ -6,25 +6,19 @@ import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
 export function useColumns() {
  const dataList = ref([]);
  const loading = ref(true);
-  const hideVal = ref("nohide");
-  const tableSize = ref("default");
-  const paginationSmall = ref(false);
  const paginationAlign = ref("right");
  const columns: TableColumnList = [
    {
      label: "日期",
-      prop: "date",
-      hide: () => (hideVal.value === "hideDate" ? true : false)
+      prop: "date"
    },
    {
      label: "姓名",
-      prop: "name",
-      hide: () => (hideVal.value === "hideName" ? true : false)
+      prop: "name"
    },
    {
      label: "地址",
-      prop: "address",
-      hide: () => (hideVal.value === "hideAddress" ? true : false)
+      prop: "address"
    }
  ];

@@ -35,8 +29,7 @@ export function useColumns() {
    pageSizes: [10, 15, 20],
    total: 0,
    align: "right",
-    background: true,
-    small: false
+    background: true
  });

  /** 加载动画配置 */
@@ -57,10 +50,6 @@ export function useColumns() {
    // background: rgba()
  });

-  function onChange(val) {
-    pagination.small = val;
-  }
-
  function onSizeChange(val) {
    console.log("onSizeChange", val);
  }
@@ -93,13 +82,9 @@ export function useColumns() {
    loading,
    columns,
    dataList,
-    hideVal,
-    tableSize,
    pagination,
    loadingConfig,
    paginationAlign,
-    paginationSmall,
-    onChange,
    onSizeChange,
    onCurrentChange
  };
--- a/src/views/pure-table/high/page/index.vue
+++ b/src/views/pure-table/high/page/index.vue
@@ -5,13 +5,9 @@ const {
  loading,
  columns,
  dataList,
-  hideVal,
-  tableSize,
  pagination,
  loadingConfig,
  paginationAlign,
-  paginationSmall,
-  onChange,
  onSizeChange,
  onCurrentChange
 } = useColumns();
@@ -19,45 +15,22 @@ const {

 <template>
  <div>
-    <el-space class="float-right mb-4">
-      <p class="text-sm">动态列：</p>
-      <el-radio-group v-model="hideVal" size="small">
-        <el-radio-button label="nohide">不隐藏</el-radio-button>
-        <el-radio-button label="hideDate">隐藏日期</el-radio-button>
-        <el-radio-button label="hideName">隐藏姓名</el-radio-button>
-        <el-radio-button label="hideAddress">隐藏地址</el-radio-button>
-      </el-radio-group>
-      <el-divider direction="vertical" />
-      <p class="text-sm">表格大小：</p>
-      <el-radio-group v-model="tableSize" size="small">
-        <el-radio-button label="large">large</el-radio-button>
-        <el-radio-button label="default">default</el-radio-button>
-        <el-radio-button label="small">small</el-radio-button>
-      </el-radio-group>
-      <el-divider direction="vertical" />
-      <p class="text-sm">分页大小：</p>
-      <el-radio-group v-model="paginationSmall" size="small" @change="onChange">
-        <el-radio-button :label="false">no small</el-radio-button>
-        <el-radio-button :label="true">small</el-radio-button>
-      </el-radio-group>
-      <el-divider direction="vertical" />
-      <p class="text-sm">分页的对齐方式：</p>
-      <el-radio-group v-model="paginationAlign" size="small">
+    <el-space class="float-right mb-2">
+      <p>分页的对齐方式：</p>
+      <el-radio-group v-model="paginationAlign">
        <el-radio-button label="right">right</el-radio-button>
        <el-radio-button label="center">center</el-radio-button>
        <el-radio-button label="left">left</el-radio-button>
      </el-radio-group>
    </el-space>
-
    <pure-table
      border
      row-key="id"
      alignWhole="center"
      showOverflowTooltip
-      :size="tableSize"
      :loading="loading"
      :loading-config="loadingConfig"
-      :height="tableSize === 'small' ? 352 : 440"
+      :height="440"
      :data="
        dataList.slice(
          (pagination.currentPage - 1) * pagination.pageSize,
--- a/src/views/result/columns.tsx
+++ b/src/views/result/columns.tsx
@@ -1,3 +1,4 @@
+import { IconifyIconOffline } from "@/components/ReIcon";
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import CloseCircleLine from "@iconify-icons/ri/close-circle-line";

@@ -7,7 +8,7 @@ export function useColumns() {
      cellRenderer: () => {
        return (
          <span class="flex items-center -mt-6">
-            <iconify-icon-offline
+            <IconifyIconOffline
              icon={CloseCircleLine}
              color="#F56C6C"
              width="18px"
@@ -20,7 +21,7 @@ export function useColumns() {
              style="color: var(--el-color-primary)"
            >
              立即解冻
-              <iconify-icon-offline
+              <IconifyIconOffline
                icon={ArrowRightSLine}
                color="var(--el-color-primary)"
                width="18px"
@@ -35,7 +36,7 @@ export function useColumns() {
      cellRenderer: () => {
        return (
          <span class="flex items-center -mt-8">
-            <iconify-icon-offline
+            <IconifyIconOffline
              icon={CloseCircleLine}
              color="#F56C6C"
              width="18px"
@@ -48,7 +49,7 @@ export function useColumns() {
              style="color: var(--el-color-primary)"
            >
              立即升级
-              <iconify-icon-offline
+              <IconifyIconOffline
                icon={ArrowRightSLine}
                color="var(--el-color-primary)"
                width="18px"
--- a/src/views/system/dept/columns.tsx
+++ b/src/views/system/dept/columns.tsx
@@ -0,0 +1,64 @@
+import dayjs from "dayjs";
+
+export function useColumns() {
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 60,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "部门名称",
+      prop: "name",
+      width: 180,
+      align: "left"
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      width: 60
+    },
+    {
+      label: "状态",
+      prop: "status",
+      width: 80,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.status === 1 ? "danger" : "success"}
+          effect="plain"
+        >
+          {row.status === 0 ? "关闭" : "开启"}
+        </el-tag>
+      )
+    },
+    {
+      label: "创建时间",
+      width: 180,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "备注",
+      prop: "remark"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 140,
+      slot: "operation"
+    }
+  ];
+
+  return {
+    columns
+  };
+}
--- a/src/views/system/dept/hook.tsx
+++ b/src/views/system/dept/hook.tsx
@@ -1,114 +0,0 @@
-import dayjs from "dayjs";
-import { handleTree } from "@/utils/tree";
-import { getDeptList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
-
-export function useDept() {
-  const form = reactive({
-    user: "",
-    status: ""
-  });
-  const dataList = ref([]);
-  const loading = ref(true);
-
-  const columns: TableColumnList = [
-    {
-      type: "selection",
-      width: 55,
-      align: "left",
-      hide: ({ checkList }) => !checkList.includes("勾选列")
-    },
-    {
-      label: "序号",
-      type: "index",
-      minWidth: 70,
-      hide: ({ checkList }) => !checkList.includes("序号列")
-    },
-    {
-      label: "部门名称",
-      prop: "name",
-      width: 180,
-      align: "left"
-    },
-    {
-      label: "排序",
-      prop: "sort",
-      minWidth: 70
-    },
-    {
-      label: "状态",
-      prop: "status",
-      minWidth: 100,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.status === 1 ? "danger" : "success"}
-          effect="plain"
-        >
-          {row.status === 0 ? "关闭" : "开启"}
-        </el-tag>
-      )
-    },
-    {
-      label: "创建时间",
-      minWidth: 200,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "备注",
-      prop: "remark",
-      minWidth: 200
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 160,
-      slot: "operation"
-    }
-  ];
-
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  function resetForm(formEl) {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getDeptList();
-    dataList.value = handleTree(data);
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  onMounted(() => {
-    onSearch();
-  });
-
-  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    onSearch,
-    resetForm,
-    handleUpdate,
-    handleDelete,
-    handleSelectionChange
-  };
-}
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useDept } from "./hook";
-import { PureTableBar } from "@/components/RePureTableBar";
+import { useColumns } from "./columns";
+import { handleTree } from "@/utils/tree";
+import { getDeptList } from "@/api/system";
+import { FormInstance } from "element-plus";
+import { reactive, ref, onMounted } from "vue";
+import { TableProBar } from "@/components/ReTable";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
@@ -14,19 +16,47 @@ defineOptions({
  name: "Dept"
 });

-const formRef = ref();
+const form = reactive({
+  user: "",
+  status: ""
+});
+const dataList = ref([]);
+const loading = ref(true);
+const { columns } = useColumns();
+
+const formRef = ref<FormInstance>();
 const tableRef = ref();
-const {
-  form,
-  loading,
-  columns,
-  dataList,
-  onSearch,
-  resetForm,
-  handleUpdate,
-  handleDelete,
-  handleSelectionChange
-} = useDept();
+
+function handleUpdate(row) {
+  console.log(row);
+}
+
+function handleDelete(row) {
+  console.log(row);
+}
+
+function handleSelectionChange(val) {
+  console.log("handleSelectionChange", val);
+}
+
+async function onSearch() {
+  loading.value = true;
+  const { data } = await getDeptList();
+  dataList.value = handleTree(data as any);
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+onMounted(() => {
+  onSearch();
+});
 </script>

 <template>
@@ -38,20 +68,10 @@ const {
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="部门名称：" prop="user">
-        <el-input
-          v-model="form.user"
-          placeholder="请输入部门名称"
-          clearable
-          class="!w-[200px]"
-        />
+        <el-input v-model="form.user" placeholder="请输入部门名称" clearable />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="form.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-[180px]"
-        >
+        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option label="开启" value="1" />
          <el-option label="关闭" value="0" />
        </el-select>
@@ -71,9 +91,11 @@ const {
      </el-form-item>
    </el-form>

-    <PureTableBar
+    <TableProBar
      title="部门列表"
+      :loading="loading"
      :tableRef="tableRef?.getTableRef()"
+      :dataList="dataList"
      @refresh="onSearch"
    >
      <template #buttons>
@@ -90,7 +112,6 @@ const {
          showOverflowTooltip
          table-layout="auto"
          default-expand-all
-          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="columns"
@@ -129,6 +150,6 @@ const {
          </template>
        </pure-table>
      </template>
-    </PureTableBar>
+    </TableProBar>
  </div>
 </template>
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@@ -1,25 +1,11 @@
+import { ref } from "vue";
 import dayjs from "dayjs";
 import { message } from "@/utils/message";
-import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
-import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";

-export function useRole() {
-  const form = reactive({
-    name: "",
-    code: "",
-    status: ""
-  });
-  const dataList = ref([]);
-  const loading = ref(true);
+export function useColumns() {
  const switchLoadMap = ref({});
-  const pagination = reactive<PaginationProps>({
-    total: 0,
-    pageSize: 10,
-    currentPage: 1,
-    background: true
-  });
+
  const columns: TableColumnList = [
    {
      type: "selection",
@@ -35,23 +21,19 @@ export function useRole() {
    },
    {
      label: "角色编号",
-      prop: "id",
-      minWidth: 100
+      prop: "id"
    },
    {
      label: "角色名称",
-      prop: "name",
-      minWidth: 120
+      prop: "name"
    },
    {
      label: "角色标识",
-      prop: "code",
-      minWidth: 150
+      prop: "code"
    },
    {
      label: "角色类型",
      prop: "type",
-      minWidth: 150,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
@@ -64,12 +46,12 @@ export function useRole() {
    },
    {
      label: "显示顺序",
-      prop: "sort",
-      minWidth: 100
+      prop: "sort"
    },
    {
      label: "状态",
-      minWidth: 130,
+      prop: "status",
+      width: 130,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
@@ -86,7 +68,7 @@ export function useRole() {
    },
    {
      label: "创建时间",
-      minWidth: 180,
+      width: 180,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -98,15 +80,6 @@ export function useRole() {
      slot: "operation"
    }
  ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });

  function onChange({ row, index }) {
    ElMessageBox.confirm(
@@ -150,59 +123,7 @@ export function useRole() {
      });
  }

-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
-  function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-  }
-
-  function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getRoleList();
-    dataList.value = data.list;
-    pagination.total = data.total;
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  const resetForm = formEl => {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  };
-
-  onMounted(() => {
-    onSearch();
-  });
-
  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    pagination,
-    buttonClass,
-    onSearch,
-    resetForm,
-    handleUpdate,
-    handleDelete,
-    handleSizeChange,
-    handleCurrentChange,
-    handleSelectionChange
+    columns
  };
 }
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRole } from "./hook";
-import { PureTableBar } from "@/components/RePureTableBar";
+import { useColumns } from "./columns";
+import { getRoleList } from "@/api/system";
+import { reactive, ref, onMounted } from "vue";
+import { type FormInstance } from "element-plus";
+import { TableProBar } from "@/components/ReTable";
+import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-
 import Database from "@iconify-icons/ri/database-2-line";
 import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
@@ -17,22 +19,64 @@ defineOptions({
  name: "Role"
 });

-const formRef = ref();
-const {
-  form,
-  loading,
-  columns,
-  dataList,
-  pagination,
-  buttonClass,
-  onSearch,
-  resetForm,
-  handleUpdate,
-  handleDelete,
-  handleSizeChange,
-  handleCurrentChange,
-  handleSelectionChange
-} = useRole();
+const form = reactive({
+  name: "",
+  code: "",
+  status: ""
+});
+
+const dataList = ref([]);
+const loading = ref(true);
+const { columns } = useColumns();
+
+const formRef = ref<FormInstance>();
+
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true
+});
+
+function handleUpdate(row) {
+  console.log(row);
+}
+
+function handleDelete(row) {
+  console.log(row);
+}
+
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`);
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`);
+}
+
+function handleSelectionChange(val) {
+  console.log("handleSelectionChange", val);
+}
+
+async function onSearch() {
+  loading.value = true;
+  const { data } = await getRoleList();
+  dataList.value = data.list;
+  pagination.total = data.total;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+onMounted(() => {
+  onSearch();
+});
 </script>

 <template>
@@ -44,28 +88,13 @@ const {
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="角色名称：" prop="name">
-        <el-input
-          v-model="form.name"
-          placeholder="请输入角色名称"
-          clearable
-          class="!w-[200px]"
-        />
+        <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
      </el-form-item>
      <el-form-item label="角色标识：" prop="code">
-        <el-input
-          v-model="form.code"
-          placeholder="请输入角色标识"
-          clearable
-          class="!w-[180px]"
-        />
+        <el-input v-model="form.code" placeholder="请输入角色标识" clearable />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="form.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-[180px]"
-        >
+        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option label="已开启" value="1" />
          <el-option label="已关闭" value="0" />
        </el-select>
@@ -85,7 +114,12 @@ const {
      </el-form-item>
    </el-form>

-    <PureTableBar title="角色列表" @refresh="onSearch">
+    <TableProBar
+      title="角色列表"
+      :loading="loading"
+      :dataList="dataList"
+      @refresh="onSearch"
+    >
      <template #buttons>
        <el-button type="primary" :icon="useRenderIcon(AddFill)">
          新增角色
@@ -97,7 +131,6 @@ const {
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
-          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="columns"
@@ -118,8 +151,8 @@ const {
              link
              type="primary"
              :size="size"
-              :icon="useRenderIcon(EditPen)"
              @click="handleUpdate(row)"
+              :icon="useRenderIcon(EditPen)"
            >
              修改
            </el-button>
@@ -139,18 +172,18 @@ const {
            </el-popconfirm>
            <el-dropdown>
              <el-button
-                class="ml-3 mt-[2px]"
+                class="ml-3"
                link
                type="primary"
                :size="size"
-                :icon="useRenderIcon(More)"
                @click="handleUpdate(row)"
+                :icon="useRenderIcon(More)"
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button
-                      :class="buttonClass"
+                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                      link
                      type="primary"
                      :size="size"
@@ -161,7 +194,7 @@ const {
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
-                      :class="buttonClass"
+                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                      link
                      type="primary"
                      :size="size"
@@ -176,7 +209,7 @@ const {
          </template>
        </pure-table>
      </template>
-    </PureTableBar>
+    </TableProBar>
  </div>
 </template>

--- a/src/views/system/user/columns.tsx
+++ b/src/views/system/user/columns.tsx
@@ -1,25 +1,11 @@
+import { ref } from "vue";
 import dayjs from "dayjs";
 import { message } from "@/utils/message";
-import { getUserList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
-import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";

-export function useUser() {
-  const form = reactive({
-    username: "",
-    mobile: "",
-    status: ""
-  });
-  const dataList = ref([]);
-  const loading = ref(true);
+export function useColumns() {
  const switchLoadMap = ref({});
-  const pagination = reactive<PaginationProps>({
-    total: 0,
-    pageSize: 10,
-    currentPage: 1,
-    background: true
-  });
+
  const columns: TableColumnList = [
    {
      type: "selection",
@@ -35,23 +21,19 @@ export function useUser() {
    },
    {
      label: "用户编号",
-      prop: "id",
-      minWidth: 130
+      prop: "id"
    },
    {
      label: "用户名称",
-      prop: "username",
-      minWidth: 130
+      prop: "username"
    },
    {
      label: "用户昵称",
-      prop: "nickname",
-      minWidth: 130
+      prop: "nickname"
    },
    {
      label: "性别",
      prop: "sex",
-      minWidth: 90,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
@@ -65,18 +47,16 @@ export function useUser() {
    {
      label: "部门",
      prop: "dept",
-      minWidth: 90,
      formatter: ({ dept }) => dept.name
    },
    {
      label: "手机号码",
-      prop: "mobile",
-      minWidth: 90
+      prop: "mobile"
    },
    {
      label: "状态",
      prop: "status",
-      minWidth: 90,
+      width: 130,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
@@ -93,7 +73,7 @@ export function useUser() {
    },
    {
      label: "创建时间",
-      minWidth: 90,
+      width: 180,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -105,15 +85,6 @@ export function useUser() {
      slot: "operation"
    }
  ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });

  function onChange({ row, index }) {
    ElMessageBox.confirm(
@@ -157,59 +128,7 @@ export function useUser() {
      });
  }

-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
-  function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-  }
-
-  function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getUserList();
-    dataList.value = data.list;
-    pagination.total = data.total;
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  const resetForm = formEl => {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  };
-
-  onMounted(() => {
-    onSearch();
-  });
-
  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    pagination,
-    buttonClass,
-    onSearch,
-    resetForm,
-    handleUpdate,
-    handleDelete,
-    handleSizeChange,
-    handleCurrentChange,
-    handleSelectionChange
+    columns
  };
 }
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import tree from "./tree.vue";
-import { useUser } from "./hook";
-import { PureTableBar } from "@/components/RePureTableBar";
+import { useColumns } from "./columns";
+import { getUserList } from "@/api/system";
+import { reactive, ref, onMounted } from "vue";
+import { type FormInstance } from "element-plus";
+import { TableProBar } from "@/components/ReTable";
+import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

 import Role from "@iconify-icons/ri/admin-line";
@@ -18,28 +21,69 @@ defineOptions({
  name: "User"
 });

-const formRef = ref();
-const {
-  form,
-  loading,
-  columns,
-  dataList,
-  pagination,
-  buttonClass,
-  onSearch,
-  resetForm,
-  handleUpdate,
-  handleDelete,
-  handleSizeChange,
-  handleCurrentChange,
-  handleSelectionChange
-} = useUser();
+const form = reactive({
+  username: "",
+  mobile: "",
+  status: ""
+});
+const dataList = ref([]);
+const loading = ref(true);
+const { columns } = useColumns();
+
+const formRef = ref<FormInstance>();
+
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true
+});
+
+function handleUpdate(row) {
+  console.log(row);
+}
+
+function handleDelete(row) {
+  console.log(row);
+}
+
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`);
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`);
+}
+
+function handleSelectionChange(val) {
+  console.log("handleSelectionChange", val);
+}
+
+async function onSearch() {
+  loading.value = true;
+  const { data } = await getUserList();
+  dataList.value = data.list;
+  pagination.total = data.total;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+onMounted(() => {
+  onSearch();
+});
 </script>

 <template>
-  <div class="main">
-    <tree class="w-[17%] float-left" />
-    <div class="float-right w-[81%]">
+  <div class="main flex">
+    <tree />
+    <div class="flex-1 ml-4">
      <el-form
        ref="formRef"
        :inline="true"
@@ -51,7 +95,6 @@ const {
            v-model="form.username"
            placeholder="请输入用户名称"
            clearable
-            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="手机号码：" prop="mobile">
@@ -59,16 +102,10 @@ const {
            v-model="form.mobile"
            placeholder="请输入手机号码"
            clearable
-            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
-          <el-select
-            v-model="form.status"
-            placeholder="请选择"
-            clearable
-            class="!w-[160px]"
-          >
+          <el-select v-model="form.status" placeholder="请选择" clearable>
            <el-option label="已开启" value="1" />
            <el-option label="已关闭" value="0" />
          </el-select>
@@ -88,7 +125,12 @@ const {
        </el-form-item>
      </el-form>

-      <PureTableBar title="用户管理" @refresh="onSearch">
+      <TableProBar
+        title="用户管理"
+        :loading="loading"
+        :dataList="dataList"
+        @refresh="onSearch"
+      >
        <template #buttons>
          <el-button type="primary" :icon="useRenderIcon(AddFill)">
            新增用户
@@ -99,7 +141,6 @@ const {
            border
            align-whole="center"
            table-layout="auto"
-            :loading="loading"
            :size="size"
            :data="dataList"
            :columns="columns"
@@ -141,7 +182,7 @@ const {
              </el-popconfirm>
              <el-dropdown>
                <el-button
-                  class="ml-3 mt-[2px]"
+                  class="ml-3"
                  link
                  type="primary"
                  :size="size"
@@ -152,7 +193,7 @@ const {
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
-                        :class="buttonClass"
+                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                        link
                        type="primary"
                        :size="size"
@@ -163,7 +204,7 @@ const {
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
-                        :class="buttonClass"
+                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                        link
                        type="primary"
                        :size="size"
@@ -178,7 +219,7 @@ const {
            </template>
          </pure-table>
        </template>
-      </PureTableBar>
+      </TableProBar>
    </div>
  </div>
 </template>
--- a/src/views/system/user/svg/expand.svg
+++ b/src/views/system/user/svg/expand.svg
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
--- a/src/views/system/user/svg/unexpand.svg
+++ b/src/views/system/user/svg/unexpand.svg
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { handleTree } from "@/utils/tree";
+import type { ElTree } from "element-plus";
 import { getDeptList } from "@/api/system";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
+import { ref, watch, onMounted, getCurrentInstance } from "vue";

-import Dept from "@iconify-icons/ri/git-branch-line";
-import Reset from "@iconify-icons/ri/restart-line";
-import Search from "@iconify-icons/ep/search";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
-import OfficeBuilding from "@iconify-icons/ep/office-building";
 import LocationCompany from "@iconify-icons/ep/add-location";
-import ExpandIcon from "./svg/expand.svg?component";
-import UnExpandIcon from "./svg/unexpand.svg?component";
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
+import Expand from "@iconify-icons/mdi/arrow-expand-down";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import Reset from "@iconify-icons/ri/restart-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Search from "@iconify-icons/ep/search";

 interface Tree {
  id: number;
@@ -19,26 +20,17 @@ interface Tree {
  highlight?: boolean;
  children?: Tree[];
 }
-
-const treeRef = ref();
-const treeData = ref([]);
-const isExpand = ref(true);
-const searchValue = ref("");
-const highlightMap = ref({});
-const { proxy } = getCurrentInstance();
 const defaultProps = {
  children: "children",
  label: "name"
 };
-const buttonClass = computed(() => {
-  return [
-    "!h-[20px]",
-    "reset-margin",
-    "!text-gray-500",
-    "dark:!text-white",
-    "dark:hover:!text-primary"
-  ];
-});
+
+const treeData = ref([]);
+const searchValue = ref("");
+const { proxy } = getCurrentInstance();
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+const highlightMap = ref({});

 const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
@@ -62,14 +54,13 @@ function nodeClick(value) {
 }

 function toggleRowExpansionAll(status) {
-  isExpand.value = status;
  const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].expanded = status;
  }
 }

-/** 重置状态（选中状态、搜索框值、树初始化） */
+// 重置状态（选中状态、搜索框值、树初始化）
 function onReset() {
  highlightMap.value = {};
  searchValue.value = "";
@@ -82,12 +73,12 @@ watch(searchValue, val => {

 onMounted(async () => {
  const { data } = await getDeptList();
-  treeData.value = handleTree(data);
+  treeData.value = handleTree(data as any);
 });
 </script>

 <template>
-  <div class="h-full min-h-[780px] bg-bg_color overflow-auto">
+  <div class="max-w-[260px] h-full min-h-[780px] bg-bg_color">
    <div class="flex items-center h-[34px]">
      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
        部门列表
@@ -108,7 +99,7 @@ onMounted(async () => {
          </el-icon>
        </template>
      </el-input>
-      <el-dropdown :hide-on-click="false">
+      <el-dropdown>
        <IconifyIconOffline
          class="w-[28px] cursor-pointer"
          width="18px"
@@ -118,18 +109,29 @@ onMounted(async () => {
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button
-                :class="buttonClass"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                link
                type="primary"
-                :icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
-                @click="toggleRowExpansionAll(isExpand ? false : true)"
+                :icon="useRenderIcon(Expand)"
+                @click="toggleRowExpansionAll(true)"
              >
-                {{ isExpand ? "折叠全部" : "展开全部" }}
+                展开全部
              </el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button
-                :class="buttonClass"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                link
+                type="primary"
+                :icon="useRenderIcon(UnExpand)"
+                @click="toggleRowExpansionAll(false)"
+              >
+                折叠全部
+              </el-button>
+            </el-dropdown-item>
+            <el-dropdown-item>
+              <el-button
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                link
                type="primary"
                :icon="useRenderIcon(Reset)"
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -48,7 +48,7 @@ function onCloseTags() {
 <template>
  <el-card>
    <template #header>
-      <div>标签页复用，超出限制自动关闭</div>
+      <div>标签页复用，超出限制自动关闭（使用场景: 动态路由）</div>
    </template>
    <div class="flex flex-wrap items-center">
      <p>query传参模式：</p>
--- a/src/views/welcome/components/columns.tsx
+++ b/src/views/welcome/components/columns.tsx
@@ -1,3 +1,4 @@
+import { IconifyIconOffline } from "@/components/ReIcon";
 import TypeIt from "@/components/ReTypeit";
 import OfficeBuilding from "@iconify-icons/ep/office-building";
 import Tickets from "@iconify-icons/ep/tickets";
@@ -20,7 +21,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <iconify-icon-offline icon={User} />
+            <IconifyIconOffline icon={User} />
          </el-icon>
          用户名
        </div>
@@ -31,7 +32,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <iconify-icon-offline icon={Iphone} />
+            <IconifyIconOffline icon={Iphone} />
          </el-icon>
          手机号
        </div>
@@ -42,7 +43,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <iconify-icon-offline icon={Location} />
+            <IconifyIconOffline icon={Location} />
          </el-icon>
          居住地
        </div>
@@ -56,7 +57,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <iconify-icon-offline icon={Tickets} />
+            <IconifyIconOffline icon={Tickets} />
          </el-icon>
          标签
        </div>
@@ -75,7 +76,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <iconify-icon-offline icon={OfficeBuilding} />
+            <IconifyIconOffline icon={OfficeBuilding} />
          </el-icon>
          联系地址
        </div>
@@ -89,7 +90,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <iconify-icon-offline icon={Notebook} />
+            <IconifyIconOffline icon={Notebook} />
          </el-icon>
          好好学习，天天向上
        </div>
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@@ -9,5 +9,7 @@ declare module "*.scss" {
  export default scss;
 }

+declare module "@pureadmin/theme";
 declare module "vue-virtual-scroller";
 declare module "vuedraggable/src/vuedraggable";
+declare module "@pureadmin/theme/dist/browser-utils";
				`@@ -1 +0,0 @@`
				`<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2Zm10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z"/></svg>`
				`@@ -1 +0,0 @@`
				<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A9.99 9.99 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.803a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12a4.99 4.99 0 0 1-1.273 3.334 8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 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>