release: update 3.9.6

chore: 更新流程图业务代码
chore: 升级vite4
2025-11-03 13:44:47 +08:00 · 2022-12-19 12:14:18 +08:00 · 2022-12-19 12:02:32 +08:00 · 2022-12-19 11:58:49 +08:00 · 2022-12-19 10:42:26 +08:00 · 2022-12-16 14:34:10 +08:00
86 changed files with 5968 additions and 3843 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,50 @@
+# 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
+
+- 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,3 +1,50 @@
+# 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
+
+- 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,3 +1,50 @@
+# 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
+
+- 完全移除了 `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)
--- 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解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
  prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
  modules: [
    {
@@ -56,12 +56,6 @@ 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,9 +27,4 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
  return ret;
 };

-/** 获取环境变量 */
-const loadEnv = (): ViteEnv => {
-  return import.meta.env;
-};
-
-export { warpperEnv, loadEnv };
+export { warpperEnv };
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -12,14 +12,10 @@ const include = [
  "axios",
  "pinia",
  "swiper",
-  "lodash",
  "echarts",
  "intro.js",
  "vue-i18n",
-  "xe-utils",
-  "vxe-table",
  "js-cookie",
-  "lodash-es",
  "cropperjs",
  "jsbarcode",
  "sortablejs",
@@ -29,8 +25,6 @@ const include = [
  "vue3-danmaku",
  "v-contextmenu",
  "vue-pdf-embed",
-  "lodash-unified",
-  "@ctrl/tinycolor",
  "china-area-data",
  "vue-json-pretty",
  "@logicflow/core",
@@ -58,7 +52,6 @@ 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,8 +22,7 @@ export function getPluginsList(
  const lifecycle = process.env.npm_lifecycle_event;
  return [
    vue(),
-    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
-    VueI18n({
+    VueI18nPlugin({
      runtimeOnly: true,
      compositionOnly: true,
      include: [resolve("locales/**")]
@@ -40,14 +39,7 @@ export function getPluginsList(
    themePreprocessorPlugin({
      scss: {
        multipleScopeVars: genScssMultipleScopeVars(),
-        // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
-        extract: true,
-        // 会选取defaultScopeName对应的主题css文件在html添加link
-        themeLinkTagId: "head",
-        // "head"||"head-prepend" || "body" ||"body-prepend"
-        themeLinkTagInjectTo: "head",
-        // 是否对抽取的css文件内对应scopeName的权重类名移除
-        removeCssScopeName: false
+        extract: true
      }
    }),
    // svg组件化支持
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -28,7 +28,6 @@ menus:
  hsempty: Empty Page
  hssysManagement: System Manage
  hsUser: User Manage
-  hsDict: Dict Manage
  hsRole: Role Manage
  hsDept: Dept Manage
  hseditor: Editor
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -28,7 +28,6 @@ menus:
  hsempty: 无Layout页
  hssysManagement: 系统管理
  hsUser: 用户管理
-  hsDict: 字典管理
  hsRole: 角色管理
  hsDept: 部门管理
  hseditor: 编辑器
@@ -99,7 +98,7 @@ menus:
  hsInfiniteScroll: 表格无限滚动
  hsdanmaku: 弹幕组件
  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（9个示例）
+  hsPureTableHigh: 高级用法（10个示例）
  hsTree: 大数据树业务组件
  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -42,17 +42,6 @@ const systemRouter = {
        title: "menus.hsDept",
        roles: ["admin"]
      }
-    },
-    {
-      path: "/system/dict",
-      component: "/system/dict/index",
-      name: "Dict",
-      meta: {
-        icon: "dict",
-        title: "menus.hsDict",
-        keepAlive: true,
-        roles: ["admin"]
-      }
    }
  ]
 };
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "3.9.3",
+  "version": "3.9.6",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -30,13 +30,12 @@
  ],
  "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.8.3",
-    "@pureadmin/utils": "^1.7.4",
+    "@pureadmin/table": "^1.9.0",
+    "@pureadmin/utils": "^1.8.5",
    "@vueuse/core": "^9.6.0",
    "@vueuse/motion": "2.0.0-beta.12",
    "@wangeditor/editor": "^5.1.21",
@@ -53,9 +52,6 @@
    "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",
@@ -75,11 +71,9 @@
    "vue-pdf-embed": "^1.1.5",
    "vue-router": "^4.1.6",
    "vue-types": "^4.2.1",
-    "vue-virtual-scroller": "^2.0.0-alpha.1",
-    "vue3-danmaku": "^1.1.0",
+    "vue-virtual-scroller": "2.0.0-beta.7",
+    "vue3-danmaku": "^1.2.0",
    "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.3.6",
-    "xe-utils": "^3.5.7",
    "xgplayer": "^2.32.1",
    "xlsx": "^0.18.5"
  },
@@ -87,16 +81,13 @@
    "@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/vite-plugin-vue-i18n": "^6.0.3",
-    "@pureadmin/theme": "^2.4.0",
+    "@intlify/unplugin-vue-i18n": "^0.8.1",
+    "@pureadmin/theme": "^3.0.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",
@@ -105,8 +96,8 @@
    "@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",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "autoprefixer": "^10.4.13",
@@ -115,7 +106,6 @@
    "eslint": "^8.8.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^9.7.0",
-    "font-awesome": "^4.7.0",
    "husky": "^7.0.4",
    "lint-staged": "11.1.2",
    "picocolors": "^1.0.0",
@@ -140,7 +130,7 @@
    "terser": "^5.15.1",
    "typescript": "^4.9.3",
    "unplugin-vue-define-options": "^1.0.0",
-    "vite": "3.1.8",
+    "vite": "^4.0.2",
    "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.3",
+  "Version": "3.9.6",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -10,6 +10,11 @@ type Result = {
  };
 };

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

 /** 获取部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<Result>("post", "/dept", { data });
+  return http.request<ResultDept>("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 "lodash-unified";
+import { cloneDeep } from "@pureadmin/utils";
 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
@@ -20,7 +20,6 @@ import Ppt from "@iconify-icons/ri/file-ppt-2-line";
 import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
 import FlUser from "@iconify-icons/ri/admin-line";
 import Role from "@iconify-icons/ri/admin-fill";
-import Dict from "@iconify-icons/ri/git-repository-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
 import Dept from "@iconify-icons/ri/git-branch-line";
 import Lollipop from "@iconify-icons/ep/lollipop";
@@ -40,12 +39,7 @@ addIcon("ppt", Ppt);
 addIcon("checkboxCircleLine", CheckboxCircleLine);
 addIcon("flUser", FlUser);
 addIcon("role", Role);
-addIcon("dict", Dict);
 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
@@ -0,0 +1,5 @@
+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/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,54 +1,25 @@
-import { defineComponent, ref, computed, PropType } from "vue";
+import { delay } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-
-import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
-import { IconifyIconOffline } from "../../ReIcon";
-import Expand from "@iconify-icons/mdi/arrow-expand-down";
-import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical";
-import Setting from "@iconify-icons/ri/settings-3-line";
-
-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)"
-  />
-`;
+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";

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

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

    const getDropdownItemStyle = computed(() => {
      return s => {
@@ -67,9 +39,26 @@ 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.dataList, isExpandAll.value);
+      toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
    }

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

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

    return () => (
      <>
-        <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 {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
          <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">
@@ -138,36 +118,32 @@ export default defineComponent({
                    content={isExpandAll.value ? "折叠" : "展开"}
                    placement="top"
                  >
-                    <IconifyIconOffline
-                      class="cursor-pointer"
-                      icon={isExpandAll.value ? UnExpand : Expand}
-                      width="16"
-                      color="text_color_regular"
+                    <ExpandIcon
+                      class={["w-[16px]", iconClass.value]}
+                      style={{
+                        transform: isExpandAll.value ? "none" : "rotate(-90deg)"
+                      }}
                      onClick={() => onExpand()}
                    />
                  </el-tooltip>
                  <el-divider direction="vertical" />
                </>
-              ) : undefined}
+              ) : null}
              <el-tooltip effect="dark" content="刷新" placement="top">
-                <IconifyIconOffline
-                  class="cursor-pointer"
-                  icon="refreshRight"
-                  width="16"
-                  color="text_color_regular"
-                  onClick={() => emit("refresh")}
+                <RefreshIcon
+                  class={[
+                    "w-[16px]",
+                    iconClass.value,
+                    loading.value ? "animate-spin" : ""
+                  ]}
+                  onClick={() => onReFresh()}
                />
              </el-tooltip>
              <el-divider direction="vertical" />

              <el-tooltip effect="dark" content="密度" placement="top">
                <el-dropdown v-slots={dropdown} trigger="click">
-                  <IconifyIconOffline
-                    class="cursor-pointer"
-                    icon={ArrowCollapse}
-                    width="16"
-                    color="text_color_regular"
-                  />
+                  <CollapseIcon class={["w-[16px]", iconClass.value]} />
                </el-dropdown>
              </el-tooltip>
              <el-divider direction="vertical" />
@@ -199,11 +175,7 @@ export default defineComponent({
              content="列设置"
            />
          </div>
-          {props.dataList.length > 0 ? (
-            slots.default({ size: size.value, checkList: checkList.value })
-          ) : (
-            <el-empty description="暂无数据" />
-          )}
+          {slots.default({ size: size.value, checkList: checkList.value })}
        </div>
      </>
    );
--- a/src/components/RePureTableBar/src/svg/collapse.svg
+++ b/src/components/RePureTableBar/src/svg/collapse.svg
@@ -0,0 +1 @@
+<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
@@ -0,0 +1 @@
+<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
@@ -0,0 +1 @@
+<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
@@ -0,0 +1 @@
+<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,11 +8,10 @@ import {
  defineComponent
 } from "vue";
 import "./index.scss";
-import { cloneDeep } from "lodash-unified";
-import { isString } from "@pureadmin/utils";
 import { propTypes } from "@/utils/propTypes";
-import { IconifyIconOffline } from "../../ReIcon";
+import { isString, cloneDeep } from "@pureadmin/utils";
 import QRCode, { QRCodeRenderersOptions } from "qrcode";
+import RefreshRight from "@iconify-icons/ep/refresh-right";

 interface QrcodeLogo {
  src?: string;
@@ -97,7 +96,7 @@ export default defineComponent({
          width: props.width,
          ...options
        });
-        (unref(wrapRef) as HTMLImageElement).src = url;
+        (unref(wrapRef) as any).src = url;
        emit("done", url);
        loading.value = false;
      }
@@ -245,9 +244,9 @@ export default defineComponent({
              onClick={disabledClick}
            >
              <div class="absolute top-[50%] left-[50%] font-bold">
-                <IconifyIconOffline
+                <iconify-icon-offline
                  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
@@ -1,5 +0,0 @@
-import tableProBar from "./src/bar";
-import { withInstall } from "@pureadmin/utils";
-
-/** table-crud组件 */
-export const TableProBar = withInstall(tableProBar);
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,9 +1,8 @@
 import { App } from "vue";
 import axios from "axios";
-import { loadEnv } from "@build/index";

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

 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/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 "lodash-unified";
+import { cloneDeep } from "@pureadmin/utils";
 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/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -12,7 +12,8 @@ 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, isEmpty } from "lodash-unified";
+import { isEqual, isAllEmpty } from "@pureadmin/utils";
 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 (isEmpty(query)) {
+  if (isAllEmpty(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,9 +1,7 @@
 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 {
@@ -56,35 +54,27 @@ export function useDataThemeChange() {
    if (theme === "default" || theme === "light") {
      setEpThemeColor(getConfig().EpThemeColor);
    } else {
-      const colors = find(themeColors.value, { themeColor: theme });
+      const colors = themeColors.value.find(v => v.themeColor === theme);
      setEpThemeColor(colors.color);
    }
  }

-  /**
-   * @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();
-  };
+  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)
+    );
+  }

  /** 设置 `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 <= 9; i++) {
-      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)
-      );
+      setPropertyPrimary("dark", i, color);
+    }
+    for (let i = 1; i <= 9; i++) {
+      setPropertyPrimary("light", i, color);
    }
  };

--- 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/index.vue
+++ b/src/layout/index.vue
@@ -2,8 +2,6 @@
 import "animate.css";
 // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
 import "@/components/ReIcon/src/offlineIcon";
-// vxe-table的所有icon不支持component模式，间接依赖了font-awesome
-import "font-awesome/css/font-awesome.min.css";
 import { setType } from "./types";
 import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";
--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@@ -2,19 +2,11 @@
 * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
 */

-import { EpThemeColor } from "../../../public/serverConfig.json";
+import { type multipleScopeVarsOptions } from "@pureadmin/theme";

-type MultipleScopeVarsItem = {
-  scopeName: string;
-  varsContent: string;
-};
-
-/** 将vxe默认主题色和ep默认主题色保持一致 */
-const vxeColor = EpThemeColor;
 /** 预设主题色 */
 const themeColors = {
  default: {
-    vxeColor,
    subMenuActiveText: "#fff",
    menuBg: "#001529",
    menuHover: "#4091f7",
@@ -26,7 +18,6 @@ const themeColors = {
    menuActiveBefore: "#4091f7"
  },
  light: {
-    vxeColor,
    subMenuActiveText: "#409eff",
    menuBg: "#fff",
    menuHover: "#e0ebf6",
@@ -38,7 +29,6 @@ const themeColors = {
    menuActiveBefore: "#4091f7"
  },
  dusk: {
-    vxeColor: "#f5222d",
    subMenuActiveText: "#fff",
    menuBg: "#2a0608",
    menuHover: "#e13c39",
@@ -50,7 +40,6 @@ const themeColors = {
    menuActiveBefore: "#e13c39"
  },
  volcano: {
-    vxeColor: "#fa541c",
    subMenuActiveText: "#fff",
    menuBg: "#2b0e05",
    menuHover: "#e85f33",
@@ -62,7 +51,6 @@ const themeColors = {
    menuActiveBefore: "#e85f33"
  },
  yellow: {
-    vxeColor: "#fadb14",
    subMenuActiveText: "#d25f00",
    menuBg: "#2b2503",
    menuHover: "#f6da4d",
@@ -74,7 +62,6 @@ const themeColors = {
    menuActiveBefore: "#f6da4d"
  },
  mingQing: {
-    vxeColor: "#13c2c2",
    subMenuActiveText: "#fff",
    menuBg: "#032121",
    menuHover: "#59bfc1",
@@ -86,7 +73,6 @@ const themeColors = {
    menuActiveBefore: "#59bfc1"
  },
  auroraGreen: {
-    vxeColor: "#52c41a",
    subMenuActiveText: "#fff",
    menuBg: "#0b1e15",
    menuHover: "#60ac80",
@@ -98,7 +84,6 @@ const themeColors = {
    menuActiveBefore: "#60ac80"
  },
  pink: {
-    vxeColor: "#eb2f96",
    subMenuActiveText: "#fff",
    menuBg: "#28081a",
    menuHover: "#d84493",
@@ -110,7 +95,6 @@ const themeColors = {
    menuActiveBefore: "#d84493"
  },
  saucePurple: {
-    vxeColor: "#722ed1",
    subMenuActiveText: "#fff",
    menuBg: "#130824",
    menuHover: "#693ac9",
@@ -126,13 +110,12 @@ const themeColors = {
 /**
 * @description 将预设主题色处理成主题插件所需格式
 */
-export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
-  const result = [] as MultipleScopeVarsItem[];
+export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
+  const result = [] as multipleScopeVarsOptions[];
  Object.keys(themeColors).forEach(key => {
    result.push({
      scopeName: `layout-theme-${key}`,
      varsContent: `
-        $vxe-primary-color: ${themeColors[key].vxeColor} !default;
        $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
        $menuBg: ${themeColors[key].menuBg} !default;
        $menuHover: ${themeColors[key].menuHover} !default;
@@ -143,7 +126,7 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
      `
-    } as MultipleScopeVarsItem);
+    } as multipleScopeVarsOptions);
  });
  return result;
 };
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,6 @@ import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
-import { useTable } from "@/plugins/vxe-table";
 import { injectResponsiveStorage } from "@/utils/responsive";

 import Table from "@pureadmin/table";
@@ -17,6 +16,8 @@ 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";
@@ -55,7 +56,6 @@ getServerConfig(app).then(async config => {
    .use(ElementPlus)
    .use(Table)
    .use(PureDescriptions)
-    .use(useTable)
    .use(useEcharts);
  app.mount("#app");
 });
--- 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/plugins/vxe-table/index.scss
+++ b/src/plugins/vxe-table/index.scss
@@ -1,6 +0,0 @@
-@import "vxe-table/styles/variable.scss";
-@import "vxe-table/styles/modules.scss";
-
-i {
-  border-color: initial;
-}
--- a/src/plugins/vxe-table/index.ts
+++ b/src/plugins/vxe-table/index.ts
@@ -1,113 +0,0 @@
-import "xe-utils";
-import "./index.scss";
-import XEUtils from "xe-utils";
-import { App, unref } from "vue";
-import { i18n } from "@/plugins/i18n";
-import zh from "vxe-table/lib/locale/lang/zh-CN";
-import en from "vxe-table/lib/locale/lang/en-US";
-
-import {
-  // 核心
-  VXETable,
-  // 表格功能
-  Icon,
-  Filter,
-  Edit,
-  Menu,
-  Export,
-  Keyboard,
-  Validator,
-  // 可选组件
-  Column,
-  Colgroup,
-  Grid,
-  Tooltip,
-  Toolbar,
-  Pager,
-  Form,
-  FormItem,
-  FormGather,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Switch,
-  Input,
-  Select,
-  Optgroup,
-  Option,
-  Textarea,
-  Button,
-  Modal,
-  List,
-  Pulldown,
-  // 表格
-  Table
-} from "vxe-table";
-
-// 全局默认参数
-VXETable.setup({
-  size: "medium",
-  version: 0,
-  zIndex: 1002,
-  table: {
-    // 自动监听父元素的变化去重新计算表格
-    autoResize: true,
-    // 鼠标移到行是否要高亮显示
-    highlightHoverRow: true
-  },
-  input: {
-    clearable: true
-  },
-  i18n: (key, args) => {
-    return unref(i18n.global.locale) === "zh"
-      ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
-      : XEUtils.toFormatString(XEUtils.get(en, key), args);
-  },
-  translate(key) {
-    const NAMESPACED = ["el.", "buttons."];
-    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
-      return i18n.global.t.call(i18n.global.locale, key);
-    }
-    return key;
-  }
-});
-
-export function useTable(app: App) {
-  app
-    .use(Icon)
-    .use(Filter)
-    .use(Edit)
-    .use(Menu)
-    .use(Export)
-    .use(Keyboard)
-    .use(Validator)
-    // 可选组件
-    .use(Column)
-    .use(Colgroup)
-    .use(Grid)
-    .use(Tooltip)
-    .use(Toolbar)
-    .use(Pager)
-    .use(Form)
-    .use(FormItem)
-    .use(FormGather)
-    .use(Checkbox)
-    .use(CheckboxGroup)
-    .use(Radio)
-    .use(RadioGroup)
-    .use(RadioButton)
-    .use(Switch)
-    .use(Input)
-    .use(Select)
-    .use(Optgroup)
-    .use(Option)
-    .use(Textarea)
-    .use(Button)
-    .use(Modal)
-    .use(List)
-    .use(Pulldown)
-    // 安装表格
-    .use(Table);
-}
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,6 @@
 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";
@@ -106,7 +105,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) {
@@ -144,14 +143,10 @@ router.beforeEach((to: toRouteType, _from, next) => {
        initRouter().then((router: Router) => {
          if (!useMultiTagsStoreHook().getMultiTagsCache) {
            const { path } = to;
-            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);
+            const route = findRouteByPath(
+              path,
+              router.options.routes[0].children
+            );
            // query、params模式路由传参数的标签页不在此处处理
            if (route && route.meta?.title) {
              useMultiTagsStoreHook().handleTags("push", {
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -6,6 +6,7 @@ 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,17 +8,18 @@ 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");
@@ -28,19 +29,25 @@ 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 => {
-    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");
-      }
-    }
+  arr.forEach((v, index) => {
+    // 当rank不存在时，根据顺序自动创建，首页路由永远在第一位
+    if (handRank(v)) v.meta.rank = index + 2;
  });
  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;
    }
  );
 }
@@ -77,7 +84,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)
  );
@@ -189,7 +196,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);
@@ -199,7 +206,7 @@ function initRouter() {
      return new Promise(resolve => {
        getAsyncRoutes().then(({ data }) => {
          handleAsyncRoutes(cloneDeep(data));
-          storageSession.setItem(key, data);
+          storageSession().setItem(key, data);
          resolve(router);
        });
      });
@@ -252,7 +259,7 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
        children: []
      });
    } else {
-      newRoutesList[0].children.push({ ...v });
+      newRoutesList[0]?.children.push({ ...v });
    }
  });
  return newRoutesList;
@@ -316,7 +323,7 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {

 /** 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html */
 function getHistoryMode(): RouterHistory {
-  const routerHistory = loadEnv().VITE_ROUTER_HISTORY;
+  const routerHistory = import.meta.env.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];
@@ -348,6 +355,7 @@ 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,7 +32,8 @@ 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;
@@ -47,7 +48,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,12 +30,13 @@ 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,12 +9,13 @@ 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() {
@@ -25,14 +26,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 @@
-@import "element-plus/theme-chalk/src/dark/css-vars.scss";
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

 /* 暗黑模式适配 */
 html.dark {
@@ -41,97 +41,6 @@ html.dark {
    }
  }

-  /* vxe-table */
-  .vxe-table--header-wrapper,
-  .vxe-table--body-wrapper {
-    color: var(--el-text-color-primary);
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-table--render-default.border--full .vxe-header--column,
-  .vxe-table--render-default.border--full .vxe-body--column,
-  .vxe-table--render-default.border--full .vxe-footer--column {
-    background-image: linear-gradient(
-        var(--el-border-color-lighter),
-        var(--el-border-color-lighter)
-      ),
-      linear-gradient(
-        var(--el-border-color-lighter),
-        var(--el-border-color-lighter)
-      );
-  }
-
-  /* 表头 */
-  .vxe-table--header-wrapper {
-    background: #262727 !important;
-  }
-
-  .vxe-table--render-wrapper,
-  .vxe-table--main-wrapper {
-    border: none;
-  }
-
-  .vxe-pager.is--perfect,
-  .vxe-table--render-default .vxe-table--border-line {
-    border: 1px solid var(--el-border-color-lighter);
-  }
-
-  .vxe-table--header-border-line {
-    border-bottom: 1px solid var(--el-border-color-lighter) !important;
-  }
-
-  .vxe-body--row.row--hover,
-  .vxe-pager {
-    background-color: #262727;
-  }
-
-  .vxe-input--inner,
-  .vxe-pager .vxe-pager--jump-prev,
-  .vxe-pager .vxe-pager--prev-btn,
-  .vxe-pager .vxe-pager--next-btn,
-  .vxe-pager .vxe-pager--jump-next,
-  .vxe-pager .vxe-pager--num-btn,
-  .vxe-pager .vxe-pager--jump .vxe-pager--goto {
-    background-color: transparent;
-    color: var(--el-text-color-primary);
-    // outline: none !important;
-  }
-
-  .vxe-select-option--wrapper {
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-select-option:not(.is--disabled).is--hover {
-    background: var(--el-color-primary-light-6) !important;
-  }
-
-  .vxe-modal--wrapper.type--modal .vxe-modal--box,
-  .vxe-modal--wrapper.type--alert .vxe-modal--box,
-  .vxe-modal--wrapper.type--confirm .vxe-modal--box,
-  .vxe-form {
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-modal--box,
-  .vxe-modal--header {
-    border: none;
-    background: var(--el-bg-color) !important;
-  }
-
-  .vxe-modal--title,
-  .vxe-button--content,
-  .vxe-modal--header-title {
-    color: var(--el-text-color-primary);
-  }
-
-  .vxe-button.type--button:hover {
-    background: var(--el-color-primary) !important;
-  }
-
-  .vxe-button {
-    background-color: transparent;
-  }
-
  /* 项目配置面板 */
  .right-panel-items {
    .el-divider__text {
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -3,7 +3,6 @@
@import "./element-plus.scss";
@import "./sidebar.scss";
@import "./dark.scss";
-@import "./tailwind.css";

 /* 自定义全局 CssVar */
 :root {
@@ -19,9 +18,3 @@
 .html-weakness {
  filter: invert(80%);
 }
-
-/* 重置 vxe-table 样式 */
-.vxe-button.type--button.theme--primary:hover,
-.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
-  color: #fff !important;
-}
--- 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 "lodash-unified";
+import { cloneDeep } from "@pureadmin/utils";

 interface ProvinceData {
  value: string;
--- a/src/views/able/print.vue
+++ b/src/views/able/print.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import Print from "@/utils/print";
-import { reactive, ref } from "vue";
-import { VxeTablePropTypes } from "vxe-table";
 import Line from "../welcome/components/Line.vue";

 defineOptions({
@@ -14,43 +13,6 @@ interface User {
  address: string;
 }

-const demo1 = reactive({
-  tableData: [
-    {
-      id: 10001,
-      name: "Test1",
-      role: "Develop",
-      sex: "Man",
-      age: 28,
-      address: "test abc"
-    },
-    {
-      id: 10002,
-      name: "Test2",
-      role: "Test",
-      sex: "Women",
-      age: 22,
-      address: "Guangzhou"
-    },
-    {
-      id: 10003,
-      name: "Test3",
-      role: "PM",
-      sex: "Man",
-      age: 32,
-      address: "Shanghai"
-    },
-    {
-      id: 10004,
-      name: "Test4",
-      role: "Designer",
-      sex: "Women",
-      age: 24,
-      address: "Shanghai"
-    }
-  ]
-});
-
 const value = ref("1");

 const options = [
@@ -59,11 +21,6 @@ const options = [
    el: ".el-table",
    label: "Element-Plus Table"
  },
-  {
-    value: "2",
-    el: ".vxe-table",
-    label: "Vxe Table"
-  },
  {
    value: "3",
    el: ".echart",
@@ -81,38 +38,6 @@ function onPrint() {
  Print(el).toPrint;
 }

-const headerCellStyle: VxeTablePropTypes.HeaderCellStyle = ({ column }) => {
-  if (column.property === "name") {
-    return {
-      backgroundColor: "#f60",
-      color: "#ffffff"
-    };
-  }
-};
-
-const rowStyle: VxeTablePropTypes.RowStyle = ({ rowIndex }) => {
-  if ([2, 3, 5].includes(rowIndex)) {
-    return {
-      backgroundColor: "red",
-      color: "#ffffff"
-    };
-  }
-};
-
-const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
-  if (column.property === "sex") {
-    if (row.sex >= "1") {
-      return {
-        backgroundColor: "#187"
-      };
-    } else if (row.age === 26) {
-      return {
-        backgroundColor: "#2db7f5"
-      };
-    }
-  }
-};
-
 const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
  if (rowIndex === 1) {
    return "warning-row";
@@ -205,45 +130,6 @@ const tableData: User[] = [
        </el-table>
      </el-col>

-      <el-col
-        :xs="22"
-        :sm="22"
-        :md="11"
-        :lg="11"
-        :xl="11"
-        style="margin: 10px; border: 0.01rem solid var(--el-color-primary)"
-        v-motion
-        :initial="{
-          opacity: 0,
-          y: 100
-        }"
-        :enter="{
-          opacity: 1,
-          y: 0,
-          transition: {
-            delay: 200
-          }
-        }"
-      >
-        <p class="font-medium pt-1">Vxe Table</p>
-        <vxe-table
-          class="vxe-table"
-          border
-          style="margin: 40px auto"
-          :header-cell-style="headerCellStyle"
-          :row-style="rowStyle"
-          :cell-style="cellStyle"
-          :data="demo1.tableData"
-        >
-          <vxe-column type="seq" width="60" />
-          <vxe-column field="name" title="Name" />
-          <vxe-column field="sex" title="Sex" />
-          <vxe-column field="age" title="Age" />
-          <vxe-column field="attr1" title="Attr1" />
-          <vxe-column field="address" title="Address" show-overflow />
-        </vxe-table>
-      </el-col>
-
      <el-col
        :xs="22"
        :sm="22"
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { loadEnv } from "@build/index";

 defineOptions({
  name: "Button"
 });

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

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

 <template>
-  <div class="back" title="返回上一页" @click="$router.go(-1)">
-    <back class="w-[80px] h-[80px]" />
+  <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>
 </template>

--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -7,6 +7,7 @@ import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
 import Print from "./prints/index.vue";
 import Echarts from "./echarts/index.vue";
+import TableSelect from "./table-select/index.vue";

 const rendContent = (val: string) =>
  `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -15,9 +16,15 @@ export const list = [
  {
    key: "page",
    content: rendContent("page"),
-    title: "分页、加载动画",
+    title: "分页、加载动画、动态列",
    component: Page
  },
+  {
+    key: "tableSelect",
+    content: rendContent("table-select"),
+    title: "表格选择器",
+    component: TableSelect
+  },
  {
    key: "rowDrag",
    content: rendContent("drag/row"),
--- a/src/views/pure-table/high/page/columns.tsx
+++ b/src/views/pure-table/high/page/columns.tsx
@@ -6,19 +6,25 @@ 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"
+      prop: "date",
+      hide: () => (hideVal.value === "hideDate" ? true : false)
    },
    {
      label: "姓名",
-      prop: "name"
+      prop: "name",
+      hide: () => (hideVal.value === "hideName" ? true : false)
    },
    {
      label: "地址",
-      prop: "address"
+      prop: "address",
+      hide: () => (hideVal.value === "hideAddress" ? true : false)
    }
  ];

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

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

+  function onChange(val) {
+    pagination.small = val;
+  }
+
  function onSizeChange(val) {
    console.log("onSizeChange", val);
  }
@@ -82,9 +93,13 @@ 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,9 +5,13 @@ const {
  loading,
  columns,
  dataList,
+  hideVal,
+  tableSize,
  pagination,
  loadingConfig,
  paginationAlign,
+  paginationSmall,
+  onChange,
  onSizeChange,
  onCurrentChange
 } = useColumns();
@@ -15,22 +19,45 @@ const {

 <template>
  <div>
-    <el-space class="float-right mb-2">
-      <p>分页的对齐方式：</p>
-      <el-radio-group v-model="paginationAlign">
+    <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-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="440"
+      :height="tableSize === 'small' ? 352 : 440"
      :data="
        dataList.slice(
          (pagination.currentPage - 1) * pagination.pageSize,
--- a/src/views/pure-table/high/table-select/index.vue
+++ b/src/views/pure-table/high/table-select/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import radioSelectTable from "./radio/index.vue";
+import multipleSelectTable from "./multiple/index.vue";
+
+const model = ref("radio");
+</script>
+
+<template>
+  <el-space>
+    <el-radio-group v-model="model">
+      <el-radio-button label="radio">单选</el-radio-button>
+      <el-radio-button label="multiple">多选</el-radio-button>
+    </el-radio-group>
+    <el-divider direction="vertical" />
+    <component
+      :is="model === 'radio' ? radioSelectTable : multipleSelectTable"
+    />
+  </el-space>
+</template>
--- a/src/views/pure-table/high/table-select/multiple/columns.tsx
+++ b/src/views/pure-table/high/table-select/multiple/columns.tsx
@@ -0,0 +1,74 @@
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref, tableRef: Ref) {
+  const selectValue = ref([]);
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left"
+    },
+    {
+      label: "ID",
+      prop: "id",
+      width: 80
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableDataEdit.length,
+    background: true,
+    small: true
+  });
+
+  const handleSelectionChange = val => {
+    const arr = [];
+    val.forEach(v => {
+      arr.push(v.name);
+    });
+    selectValue.value = arr;
+  };
+
+  const removeTag = val => {
+    // TODO optimize el-select add formatter
+    const { toggleRowSelection } = tableRef.value.getTableRef();
+    toggleRowSelection(tableDataEdit.filter(v => v.name === val)[0], false);
+  };
+
+  const onClear = () => {
+    const { clearSelection } = tableRef.value.getTableRef();
+    clearSelection();
+  };
+
+  const onSure = () => {
+    selectRef.value.blur();
+  };
+
+  return {
+    columns,
+    pagination,
+    selectValue,
+    tableDataEdit,
+    onSure,
+    onClear,
+    removeTag,
+    handleSelectionChange
+  };
+}
--- a/src/views/pure-table/high/table-select/multiple/index.vue
+++ b/src/views/pure-table/high/table-select/multiple/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const selectRef = ref();
+const tableRef = ref();
+const {
+  columns,
+  pagination,
+  selectValue,
+  tableDataEdit,
+  onClear,
+  onSure,
+  removeTag,
+  handleSelectionChange
+} = useColumns(selectRef, tableRef);
+</script>
+
+<template>
+  <el-select
+    class="w-[160px]"
+    ref="selectRef"
+    v-model="selectValue"
+    placeholder="请选择"
+    clearable
+    multiple
+    collapse-tags
+    collapse-tags-tooltip
+    @remove-tag="removeTag"
+    @clear="onClear"
+  >
+    <template #empty>
+      <div class="w-[600px] m-4">
+        <pure-table
+          ref="tableRef"
+          height="355"
+          row-key="id"
+          :header-cell-style="{
+            background: '#f5f7fa',
+            color: '#303133'
+          }"
+          :data="
+            tableDataEdit.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @selection-change="handleSelectionChange"
+        />
+        <el-button
+          class="absolute bottom-[17px]"
+          type="primary"
+          size="small"
+          text
+          bg
+          @click="onSure"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-select>
+</template>
--- a/src/views/pure-table/high/table-select/radio/columns.tsx
+++ b/src/views/pure-table/high/table-select/radio/columns.tsx
@@ -0,0 +1,61 @@
+import { message } from "@/utils/message";
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref) {
+  const selectValue = ref("");
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id",
+      width: 80
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 5,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableDataEdit.length,
+    background: true,
+    small: true
+  });
+
+  /** 高亮当前选中行 */
+  function rowStyle({ row: { name } }) {
+    return {
+      cursor: "pointer",
+      background: name === selectValue.value ? "#f5f7fa" : ""
+    };
+  }
+
+  /** 行点击 */
+  function onRowClick(row) {
+    selectValue.value = row.name;
+    selectRef.value.blur();
+    message(`当前选中行的数据为：${JSON.stringify(row)}`, { type: "success" });
+  }
+
+  return {
+    columns,
+    pagination,
+    selectValue,
+    tableDataEdit,
+    rowStyle,
+    onRowClick
+  };
+}
--- a/src/views/pure-table/high/table-select/radio/index.vue
+++ b/src/views/pure-table/high/table-select/radio/index.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const selectRef = ref();
+const {
+  columns,
+  pagination,
+  selectValue,
+  tableDataEdit,
+  rowStyle,
+  onRowClick
+} = useColumns(selectRef);
+</script>
+
+<template>
+  <el-select
+    ref="selectRef"
+    v-model="selectValue"
+    placeholder="请选择"
+    clearable
+  >
+    <template #empty>
+      <div class="w-[600px] m-4">
+        <pure-table
+          height="355"
+          row-key="id"
+          :header-cell-style="{
+            background: '#f5f7fa',
+            color: '#303133'
+          }"
+          :row-style="rowStyle"
+          :data="
+            tableDataEdit.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @row-click="onRowClick"
+        />
+      </div>
+    </template>
+  </el-select>
+</template>
--- a/src/views/result/columns.tsx
+++ b/src/views/result/columns.tsx
@@ -1,4 +1,3 @@
-import { IconifyIconOffline } from "@/components/ReIcon";
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import CloseCircleLine from "@iconify-icons/ri/close-circle-line";

@@ -8,7 +7,7 @@ export function useColumns() {
      cellRenderer: () => {
        return (
          <span class="flex items-center -mt-6">
-            <IconifyIconOffline
+            <iconify-icon-offline
              icon={CloseCircleLine}
              color="#F56C6C"
              width="18px"
@@ -21,7 +20,7 @@ export function useColumns() {
              style="color: var(--el-color-primary)"
            >
              立即解冻
-              <IconifyIconOffline
+              <iconify-icon-offline
                icon={ArrowRightSLine}
                color="var(--el-color-primary)"
                width="18px"
@@ -36,7 +35,7 @@ export function useColumns() {
      cellRenderer: () => {
        return (
          <span class="flex items-center -mt-8">
-            <IconifyIconOffline
+            <iconify-icon-offline
              icon={CloseCircleLine}
              color="#F56C6C"
              width="18px"
@@ -49,7 +48,7 @@ export function useColumns() {
              style="color: var(--el-color-primary)"
            >
              立即升级
-              <IconifyIconOffline
+              <iconify-icon-offline
                icon={ArrowRightSLine}
                color="var(--el-color-primary)"
                width="18px"
--- a/src/views/system/dept/columns.tsx
+++ b/src/views/system/dept/columns.tsx
@@ -1,64 +0,0 @@
-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
@@ -0,0 +1,114 @@
+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,11 +1,9 @@
 <script setup lang="ts">
-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 { ref } from "vue";
+import { useDept } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 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";
@@ -16,47 +14,19 @@ defineOptions({
  name: "Dept"
 });

-const form = reactive({
-  user: "",
-  status: ""
-});
-const dataList = ref([]);
-const loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
+const formRef = ref();
 const tableRef = ref();
-
-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();
-});
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSelectionChange
+} = useDept();
 </script>

 <template>
@@ -68,10 +38,20 @@ onMounted(() => {
      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 />
+        <el-input
+          v-model="form.user"
+          placeholder="请输入部门名称"
+          clearable
+          class="!w-[200px]"
+        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择状态" clearable>
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
          <el-option label="开启" value="1" />
          <el-option label="关闭" value="0" />
        </el-select>
@@ -91,11 +71,9 @@ onMounted(() => {
      </el-form-item>
    </el-form>

-    <TableProBar
+    <PureTableBar
      title="部门列表"
-      :loading="loading"
      :tableRef="tableRef?.getTableRef()"
-      :dataList="dataList"
      @refresh="onSearch"
    >
      <template #buttons>
@@ -112,6 +90,7 @@ onMounted(() => {
          showOverflowTooltip
          table-layout="auto"
          default-expand-all
+          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="columns"
@@ -150,6 +129,6 @@ onMounted(() => {
          </template>
        </pure-table>
      </template>
-    </TableProBar>
+    </PureTableBar>
  </div>
 </template>
--- a/src/views/system/dict/config.vue
+++ b/src/views/system/dict/config.vue
@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { ref, reactive } from "vue";
-import { type Direction } from "element-plus";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-
-interface Props {
-  drawer: boolean;
-  drawTitle?: string;
-  direction?: Direction;
-}
-
-withDefaults(defineProps<Props>(), {
-  drawer: false,
-  drawTitle: "",
-  direction: "rtl"
-});
-
-const emit = defineEmits<{
-  (e: "handleClose"): void;
-}>();
-
-const { t } = useI18n();
-
-const xTable = ref({} as VxeTableInstance);
-
-const configData = reactive({
-  tableData: [
-    {
-      name: "禁用",
-      dataval: "0"
-    },
-    {
-      name: "启用",
-      dataval: "1"
-    }
-  ],
-  isAllChecked: false,
-  isIndeterminate: false,
-  selectRecords: [] as any[],
-  tablePage: {
-    total: 0,
-    currentPage: 1,
-    pageSize: 10
-  }
-});
-
-// 抽屉关闭
-function handleClose() {
-  configData.isAllChecked = false;
-  configData.isIndeterminate = false;
-  emit("handleClose");
-}
-
-function editConfig(row) {
-  console.log("editConfig", row);
-}
-
-function delConfig(row) {
-  console.log("delConfig", row);
-}
-
-const changeAllEvent = () => {
-  setTimeout(() => {
-    console.log(xTable);
-  }, 1000);
-  const $table = xTable.value;
-  $table.setAllCheckboxRow(configData.isAllChecked);
-  configData.selectRecords = $table.getCheckboxRecords();
-};
-
-const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
-  const $table = xTable.value;
-  configData.isAllChecked = $table.isAllCheckboxChecked();
-  configData.isIndeterminate = $table.isAllCheckboxIndeterminate();
-  configData.selectRecords = records;
-};
-</script>
-
-<template>
-  <div class="config">
-    <el-drawer
-      :model-value="drawer"
-      :direction="direction"
-      :before-close="handleClose"
-      destroy-on-close
-      size="680px"
-    >
-      <template #header>
-        <span class="text-black dark:text-white">{{ drawTitle }}</span>
-      </template>
-      <el-divider />
-      <!-- 列表 -->
-      <div class="p-2">
-        <vxe-table
-          ref="xTable"
-          border
-          :data="configData.tableData"
-          @checkbox-change="checkboxChangeEvent"
-          @checkbox-all="checkboxChangeEvent"
-        >
-          <vxe-table-column type="checkbox" width="60" />
-          <vxe-table-column field="name" title="名称" />
-          <vxe-table-column field="dataval" title="数据值" />
-          <vxe-table-column title="操作" fixed="right">
-            <template #default="{ row }">
-              <el-button
-                link
-                type="primary"
-                :icon="useRenderIcon(EditPen)"
-                @click="editConfig(row)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                link
-                type="primary"
-                :icon="useRenderIcon(Delete)"
-                @click="delConfig(row)"
-              >
-                删除
-              </el-button>
-            </template>
-          </vxe-table-column>
-        </vxe-table>
-        <vxe-pager
-          perfect
-          v-model:current-page="configData.tablePage.currentPage"
-          v-model:page-size="configData.tablePage.pageSize"
-          :total="configData.tablePage.total"
-          :layouts="[
-            'PrevJump',
-            'PrevPage',
-            'Number',
-            'NextPage',
-            'NextJump',
-            'Sizes',
-            'FullJump',
-            'Total'
-          ]"
-        >
-          <template #left>
-            <span class="absolute left-3 flex items-center">
-              <vxe-checkbox
-                v-model="configData.isAllChecked"
-                :indeterminate="configData.isIndeterminate"
-                @change="changeAllEvent"
-              />
-              <p>已选中{{ configData.selectRecords.length }}条</p>
-              <el-button link type="danger" class="ml-1">
-                {{ t("buttons.hsdelete") }}
-              </el-button>
-            </span>
-          </template>
-        </vxe-pager>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-drawer__header) {
-  margin-bottom: 0;
-}
-
-:deep(.el-drawer__body) {
-  padding: 0;
-}
-
-:deep(.el-divider--horizontal) {
-  margin: 13px 0;
-}
-</style>
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,386 +0,0 @@
-<script setup lang="ts">
-import XEUtils from "xe-utils";
-import Config from "./config.vue";
-import { useI18n } from "vue-i18n";
-import { clone } from "@pureadmin/utils";
-import { reactive, ref, unref, nextTick } from "vue";
-import { useCopyToClipboard } from "@pureadmin/utils";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import {
-  VXETable,
-  type TablePublicMethods,
-  type VxeTableInstance,
-  type VxeFormPropTypes,
-  type VxeTableEvents,
-  type FormMethods
-} from "vxe-table";
-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-
-type onEditNRow = {
-  name: string;
-  model: string;
-};
-
-defineOptions({
-  name: "Dict"
-});
-
-const { t } = useI18n();
-
-const dictData = reactive({
-  submitLoading: false,
-  showEdit: false,
-  selectRow: null,
-  filterName: "",
-  tableData: [
-    {
-      id: 1,
-      name: "状态",
-      model: "",
-      children: [
-        {
-          id: "1-1",
-          name: "服务状态",
-          model: "serviceStatus"
-        },
-        {
-          id: "1-2",
-          name: "在线状态",
-          model: "onlienStatus"
-        }
-      ]
-    },
-    { id: 2, name: "操作系统", model: "operatingSystem" }
-  ],
-  formData: {
-    name: "",
-    model: ""
-  },
-  formItems: [
-    {
-      field: "name",
-      title: "字典名称",
-      span: 24,
-      itemRender: {
-        name: "$input",
-        props: { placeholder: "请输入字典名称" }
-      }
-    },
-    {
-      field: "model",
-      title: "字典类型",
-      span: 24,
-      itemRender: {
-        name: "$input",
-        props: {
-          placeholder: "请输入字典类型",
-          //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
-          disabled: true
-        }
-      }
-    },
-    {
-      align: "right",
-      span: 24,
-      itemRender: {
-        name: "$buttons",
-        children: [
-          { props: { type: "submit", content: "提交", status: "primary" } },
-          { props: { type: "reset", content: "重置" } }
-        ]
-      }
-    }
-  ] as VxeFormPropTypes.Items
-});
-
-const originData = clone(dictData.tableData, true);
-
-const xTree = ref<TablePublicMethods>();
-const xForm = ref<FormMethods>();
-
-const handleSearch = () => {
-  const filterName = XEUtils.toValueString(dictData.filterName).trim();
-
-  if (filterName) {
-    const options = { children: "children" };
-    const searchProps = ["name"];
-
-    dictData.tableData = XEUtils.searchTree(
-      originData,
-      item =>
-        searchProps.some(
-          key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
-        ),
-      options
-    );
-
-    // 搜索之后默认展开所有子节点
-    nextTick(() => {
-      const $table = xTree.value;
-      $table.setAllTreeExpand(true);
-    });
-  } else {
-    dictData.tableData = originData;
-  }
-};
-
-// 创建一个防防抖函数，调用频率间隔 100 毫秒
-const searchEvent = XEUtils.debounce(
-  function () {
-    handleSearch();
-  },
-  100,
-  { leading: false, trailing: true }
-);
-
-const confirmEvent = async () => {
-  const type = await VXETable.modal.confirm("您确定要删除吗？");
-  (await type) === "confirm" &&
-    VXETable.modal.message({
-      content: "测试数据，不可删除",
-      status: "error"
-    });
-};
-
-function commonFn(value, disabled) {
-  dictData.selectRow = value;
-  dictData.showEdit = true;
-  dictData.formItems[1].itemRender.props.disabled = disabled;
-}
-
-// 新增
-function onAdd() {
-  commonFn(null, false);
-}
-
-// 新增子类型
-function onAddChild(row?: object) {
-  console.log("onAddChild", row);
-  commonFn(null, false);
-}
-
-// 编辑
-function onEdit(row?: onEditNRow) {
-  dictData.formData = {
-    name: row.name,
-    model: row.model ? row.model : "暂无字典类型"
-  };
-  commonFn(row, true);
-  // VXETable.modal.message({
-  //   content: "测试数据，不可编辑",
-  //   status: "error"
-  // });
-}
-
-// 拷贝当前列表项的数据（字典类型）
-const { clipboardValue } = useCopyToClipboard();
-const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
-  clipboardValue.value = unref(row).model;
-};
-
-const xTable = ref({} as VxeTableInstance);
-
-const submitEvent = () => {
-  dictData.submitLoading = true;
-  setTimeout(() => {
-    const $table = xTable.value;
-    dictData.submitLoading = false;
-    dictData.showEdit = false;
-    if (dictData.selectRow) {
-      VXETable.modal.message({ content: "保存成功", status: "success" });
-      Object.assign(dictData.selectRow, dictData.formData);
-    } else {
-      VXETable.modal.message({ content: "新增成功", status: "success" });
-      $table.insert(dictData.formData);
-    }
-  }, 500);
-};
-
-const drawer = ref(false);
-
-function onDeploy(value?: object) {
-  console.log("onDeploy", value);
-  drawer.value = true;
-}
-
-function handleClose() {
-  drawer.value = false;
-}
-
-function onExpand() {
-  xTree.value.setAllTreeExpand(true);
-}
-
-function onUnExpand() {
-  xTree.value.clearTreeExpand();
-}
-
-function onHide() {
-  xForm.value.reset();
-}
-</script>
-
-<template>
-  <div>
-    <!-- 工具栏 -->
-    <vxe-toolbar class="bg-bg_color">
-      <template #buttons>
-        <div class="ml-[20px]">
-          <label class="dark:text-text_color_regular">字典名称： </label>
-          <el-input
-            class="!w-[200px]"
-            v-model="dictData.filterName"
-            :placeholder="t('buttons.hssearch')"
-            @keyup.prevent="searchEvent"
-            @input="searchEvent"
-            clearable
-          />
-        </div>
-      </template>
-      <template #tools>
-        <el-button-group>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon('fa:plus-square-o')"
-            @click="onAdd"
-          >
-            {{ t("buttons.hsadd") }}
-          </el-button>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon('fa:folder-open-o')"
-            @click="onExpand"
-          >
-            {{ t("buttons.hsexpendAll") }}
-          </el-button>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon('fa:folder-o')"
-            @click="onUnExpand"
-          >
-            {{ t("buttons.hscollapseAll") }}
-          </el-button>
-        </el-button-group>
-      </template>
-    </vxe-toolbar>
-
-    <!-- 列表 -->
-    <vxe-table
-      ref="xTree"
-      border
-      resizable
-      :tree-config="{
-        children: 'children',
-        iconOpen: 'fa fa-minus-square-o',
-        iconClose: 'fa fa-plus-square-o'
-      }"
-      :data="dictData.tableData"
-      @cell-dblclick="cellDBLClickEvent"
-    >
-      <vxe-table-column tree-node field="name" title="字典名称" />
-      <vxe-table-column title="字典类型">
-        <template #default="{ row }">
-          <el-tooltip
-            effect="dark"
-            :content="'双击复制：' + row.model"
-            placement="right"
-          >
-            <span class="text-model">{{ row.model }}</span>
-          </el-tooltip>
-        </template>
-      </vxe-table-column>
-      <vxe-table-column title="操作" width="360" fixed="right">
-        <template #default="{ row }">
-          <el-button
-            link
-            type="primary"
-            :icon="useRenderIcon(EditPen)"
-            @click="onEdit(row)"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            :icon="useRenderIcon('fa:plus-square-o')"
-            @click="onAddChild(row)"
-          >
-            新增子类型
-          </el-button>
-          <el-button
-            v-show="row.model"
-            link
-            type="primary"
-            :icon="useRenderIcon('fa:cog')"
-            @click="onDeploy(row)"
-          >
-            字典配置
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            :icon="useRenderIcon(Delete)"
-            @click="confirmEvent"
-          >
-            删除
-          </el-button>
-        </template>
-      </vxe-table-column>
-    </vxe-table>
-
-    <!-- 修改、添加弹框 -->
-    <vxe-modal
-      resize
-      width="450"
-      v-model="dictData.showEdit"
-      :title="dictData.selectRow ? '编辑' : '新增'"
-      :loading="dictData.submitLoading"
-      @hide="onHide"
-    >
-      <template #default>
-        <vxe-form
-          ref="xForm"
-          :data="dictData.formData"
-          :items="dictData.formItems"
-          title-align="right"
-          title-width="100"
-          @submit="submitEvent"
-        />
-      </template>
-    </vxe-modal>
-
-    <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.vxe-input + .vxe-button,
-.vxe-input + .vxe-button--dropdown,
-.vxe-button + .vxe-button,
-.vxe-button + .vxe-button--dropdown {
-  margin-left: 0;
-}
-
-.vxe-button.type--button:not(.is--round) {
-  border-radius: 0;
-}
-
-.vxe-toolbar.size--medium {
-  padding: 10px;
-}
-
-.vxe-table--render-default.size--medium {
-  margin-top: 12px;
-}
-
-.vxe-button.size--medium.type--button {
-  margin-right: 0.07em;
-}
-
-.text-model {
-  &:hover {
-    cursor: pointer;
-  }
-}
-</style>
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@@ -1,11 +1,25 @@
-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 useColumns() {
+export function useRole() {
+  const form = reactive({
+    name: "",
+    code: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
  const switchLoadMap = ref({});
-
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
  const columns: TableColumnList = [
    {
      type: "selection",
@@ -21,19 +35,23 @@ export function useColumns() {
    },
    {
      label: "角色编号",
-      prop: "id"
+      prop: "id",
+      minWidth: 100
    },
    {
      label: "角色名称",
-      prop: "name"
+      prop: "name",
+      minWidth: 120
    },
    {
      label: "角色标识",
-      prop: "code"
+      prop: "code",
+      minWidth: 150
    },
    {
      label: "角色类型",
      prop: "type",
+      minWidth: 150,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
@@ -46,12 +64,12 @@ export function useColumns() {
    },
    {
      label: "显示顺序",
-      prop: "sort"
+      prop: "sort",
+      minWidth: 100
    },
    {
      label: "状态",
-      prop: "status",
-      width: 130,
+      minWidth: 130,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
@@ -68,7 +86,7 @@ export function useColumns() {
    },
    {
      label: "创建时间",
-      width: 180,
+      minWidth: 180,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -80,6 +98,15 @@ export function useColumns() {
      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(
@@ -123,7 +150,59 @@ export function useColumns() {
      });
  }

+  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 {
-    columns
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
  };
 }
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-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 { ref } from "vue";
+import { useRole } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 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";
@@ -19,64 +17,22 @@ defineOptions({
  name: "Role"
 });

-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();
-});
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  buttonClass,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole();
 </script>

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

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

--- a/src/views/system/user/columns.tsx
+++ b/src/views/system/user/columns.tsx
@@ -1,11 +1,25 @@
-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 useColumns() {
+export function useUser() {
+  const form = reactive({
+    username: "",
+    mobile: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
  const switchLoadMap = ref({});
-
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
  const columns: TableColumnList = [
    {
      type: "selection",
@@ -21,19 +35,23 @@ export function useColumns() {
    },
    {
      label: "用户编号",
-      prop: "id"
+      prop: "id",
+      minWidth: 130
    },
    {
      label: "用户名称",
-      prop: "username"
+      prop: "username",
+      minWidth: 130
    },
    {
      label: "用户昵称",
-      prop: "nickname"
+      prop: "nickname",
+      minWidth: 130
    },
    {
      label: "性别",
      prop: "sex",
+      minWidth: 90,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
@@ -47,16 +65,18 @@ export function useColumns() {
    {
      label: "部门",
      prop: "dept",
+      minWidth: 90,
      formatter: ({ dept }) => dept.name
    },
    {
      label: "手机号码",
-      prop: "mobile"
+      prop: "mobile",
+      minWidth: 90
    },
    {
      label: "状态",
      prop: "status",
-      width: 130,
+      minWidth: 90,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
@@ -73,7 +93,7 @@ export function useColumns() {
    },
    {
      label: "创建时间",
-      width: 180,
+      minWidth: 90,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -85,6 +105,15 @@ export function useColumns() {
      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(
@@ -128,7 +157,59 @@ export function useColumns() {
      });
  }

+  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 {
-    columns
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
  };
 }
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import tree from "./tree.vue";
-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 { useUser } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

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

-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();
-});
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  buttonClass,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useUser();
 </script>

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

-      <TableProBar
-        title="用户管理"
-        :loading="loading"
-        :dataList="dataList"
-        @refresh="onSearch"
-      >
+      <PureTableBar title="用户管理" @refresh="onSearch">
        <template #buttons>
          <el-button type="primary" :icon="useRenderIcon(AddFill)">
            新增用户
@@ -141,6 +99,7 @@ onMounted(() => {
            border
            align-whole="center"
            table-layout="auto"
+            :loading="loading"
            :size="size"
            :data="dataList"
            :columns="columns"
@@ -182,7 +141,7 @@ onMounted(() => {
              </el-popconfirm>
              <el-dropdown>
                <el-button
-                  class="ml-3"
+                  class="ml-3 mt-[2px]"
                  link
                  type="primary"
                  :size="size"
@@ -193,7 +152,7 @@ onMounted(() => {
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
-                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                        :class="buttonClass"
                        link
                        type="primary"
                        :size="size"
@@ -204,7 +163,7 @@ onMounted(() => {
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
-                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                        :class="buttonClass"
                        link
                        type="primary"
                        :size="size"
@@ -219,7 +178,7 @@ onMounted(() => {
            </template>
          </pure-table>
        </template>
-      </TableProBar>
+      </PureTableBar>
    </div>
  </div>
 </template>
--- a/src/views/system/user/svg/expand.svg
+++ b/src/views/system/user/svg/expand.svg
@@ -0,0 +1 @@
+<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
@@ -0,0 +1 @@
+<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,18 +1,17 @@
 <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, watch, onMounted, getCurrentInstance } from "vue";
+import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";

-import LocationCompany from "@iconify-icons/ep/add-location";
-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 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";

 interface Tree {
  id: number;
@@ -20,17 +19,26 @@ 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 treeData = ref([]);
-const searchValue = ref("");
-const { proxy } = getCurrentInstance();
-const treeRef = ref<InstanceType<typeof ElTree>>();
-
-const highlightMap = ref({});
+const buttonClass = computed(() => {
+  return [
+    "!h-[20px]",
+    "reset-margin",
+    "!text-gray-500",
+    "dark:!text-white",
+    "dark:hover:!text-primary"
+  ];
+});

 const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
@@ -54,13 +62,14 @@ 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 = "";
@@ -73,12 +82,12 @@ watch(searchValue, val => {

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

 <template>
-  <div class="max-w-[260px] h-full min-h-[780px] bg-bg_color">
+  <div class="h-full min-h-[780px] bg-bg_color overflow-auto">
    <div class="flex items-center h-[34px]">
      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
        部门列表
@@ -99,7 +108,7 @@ onMounted(async () => {
          </el-icon>
        </template>
      </el-input>
-      <el-dropdown>
+      <el-dropdown :hide-on-click="false">
        <IconifyIconOffline
          class="w-[28px] cursor-pointer"
          width="18px"
@@ -109,29 +118,18 @@ onMounted(async () => {
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                :class="buttonClass"
                link
                type="primary"
-                :icon="useRenderIcon(Expand)"
-                @click="toggleRowExpansionAll(true)"
+                :icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
+                @click="toggleRowExpansionAll(isExpand ? false : true)"
              >
-                展开全部
+                {{ isExpand ? "折叠全部" : "展开全部" }}
              </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(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"
+                :class="buttonClass"
                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,4 +1,3 @@
-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";
@@ -21,7 +20,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <IconifyIconOffline icon={User} />
+            <iconify-icon-offline icon={User} />
          </el-icon>
          用户名
        </div>
@@ -32,7 +31,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <IconifyIconOffline icon={Iphone} />
+            <iconify-icon-offline icon={Iphone} />
          </el-icon>
          手机号
        </div>
@@ -43,7 +42,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <IconifyIconOffline icon={Location} />
+            <iconify-icon-offline icon={Location} />
          </el-icon>
          居住地
        </div>
@@ -57,7 +56,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <IconifyIconOffline icon={Tickets} />
+            <iconify-icon-offline icon={Tickets} />
          </el-icon>
          标签
        </div>
@@ -76,7 +75,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <IconifyIconOffline icon={OfficeBuilding} />
+            <iconify-icon-offline icon={OfficeBuilding} />
          </el-icon>
          联系地址
        </div>
@@ -90,7 +89,7 @@ export function useColumns() {
      labelRenderer: () => (
        <div class="flex items-center">
          <el-icon>
-            <IconifyIconOffline icon={Notebook} />
+            <iconify-icon-offline icon={Notebook} />
          </el-icon>
          好好学习，天天向上
        </div>
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -4,6 +4,7 @@ import type {
  PropType as VuePropType,
  ComponentPublicInstance
 } from "vue";
+import type { ECharts } from "echarts";
 import type { IconifyIcon } from "@iconify/vue";
 import type { TableColumns } from "@pureadmin/table";
 import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@@ -9,7 +9,5 @@ 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";
Author	SHA1	Message	Date
xiaoxian521	dac3ea3c21	release: update `3.9.6`	2022-12-19 12:14:18 +08:00
xiaoxian521	01a32988c1	chore: 更新流程图业务代码	2022-12-19 12:02:32 +08:00
xiaoxian521	2e2c306097	chore: 升级`vite4`	2022-12-19 11:58:49 +08:00
xiaoxian521	d36d5b09c5	fix: 修复`tailwind.css`错误的引入方式导致`vite`的`hmr`慢的问题	2022-12-19 10:42:26 +08:00
RealityBoy	923f09db5b	refactor: system pages (#399 ) * refactor: system pages * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update	2022-12-16 14:34:10 +08:00
xiaoxian521	66fdfebb5e	chore: update `@pureadmin/theme` latest	2022-12-15 12:28:51 +08:00
xiaoxian521	e032f9a6a7	chore: update	2022-12-13 15:24:29 +08:00
xiaoxian521	4d68d6a220	release: update `3.9.5`	2022-12-13 14:19:31 +08:00
xiaoxian521	2338dcab1f	refactor: 将`lodash`以及相关库从平台中移除	2022-12-13 11:42:06 +08:00
xiaoxian521	60e33f3782	feat: 添加 `@pureadmin/table` 表格动态列示例	2022-12-09 22:31:10 +08:00
xiaoxian521	3933f34883	fix: 修复暗黑主题样式问题	2022-12-09 20:18:49 +08:00
xiaoxian521	49dabd6b36	chore: update	2022-12-09 12:12:09 +08:00
xiaoxian521	6d697ee19c	docs: update	2022-12-08 13:30:29 +08:00
xiaoxian521	2206b9a9ae	chore: update	2022-12-08 13:21:08 +08:00
xiaoxian521	1419df10d2	fix: 修复动态路由 `rank` 问题	2022-12-07 17:14:29 +08:00
xiaoxian521	7987a18c70	perf: 优化路由 `rank`，当`rank` 不存在时，根据顺序自动创建，首页路由永远在第一位	2022-12-06 21:08:41 +08:00
xiaoxian521	152a2f8f56	release: update `3.9.4`	2022-12-05 14:03:01 +08:00
xiaoxian521	3629a66535	refactor: 完全移除内置 `vxe-table` 支持	2022-12-05 13:41:58 +08:00
xiaoxian521	95940312a9	feat: 添加 `@pureadmin/table` 表格选择器（单选、多选）示例	2022-12-05 01:57:30 +08:00
				`@@ -0,0 +1 @@`
				`<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>`
				`@@ -0,0 +1 @@`
				<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>