release: update 3.9.7

* refactor: system pages

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

CHANGELOG.en_US.md

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

CHANGELOG.md

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

CHANGELOG.zh_CN.md

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

README.md

@@ -22,7 +22,7 @@
 - [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
 - [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
 
-## 配套文档（支持 `PWA` 快速、离线访问）
+## 配套保姆级文档（支持 `PWA` 快速、离线访问）
 
 - [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
 - [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
@@ -140,7 +140,7 @@ pnpm build
 
 [xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
-## 捐赠
+## 支持
 
 如果您觉得这个项目对您有帮助，可以帮作者买一杯果汁 🍹 表示支持
 
@@ -148,9 +148,7 @@ pnpm build
 
 ## `QQ` 交流群
 
-一群已满，下面是二群，群里严禁`黄`、`赌`、`毒`、`vpn`等违法行为！
-
-<img src="https://yiming_chang.gitee.io/pure-admin-doc/img/support/qq.png" width="150px" height="225px" />
+[点击去加入](https://yiming_chang.gitee.io/pure-admin-doc/pages/support/#qq-%E4%BA%A4%E6%B5%81%E7%BE%A4)
 
 ## 许可证
 
@@ -158,7 +156,7 @@ pnpm build
 
 [MIT © xiaoxian521-2020](./LICENSE)
 
-## 捐赠者
+## 支持者
 
 非常感谢您们的支持，相信项目会越来越好 :heart:
 

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"
     }
   ]
 });

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

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"
 ];
 

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组件化支持

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

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 文字提示

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"]
-      }
     }
   ]
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-admin",
-  "version": "3.9.3",
+  "version": "3.9.7",
   "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",
@@ -48,20 +47,17 @@
     "dayjs": "^1.11.6",
     "echarts": "^5.4.0",
     "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.2.26",
+    "element-plus": "^2.2.27",
     "element-resize-detector": "^1.2.4",
     "intro.js": "^6.0.0",
     "js-cookie": "^3.0.1",
     "jsbarcode": "^3.11.5",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "lodash-unified": "^1.0.2",
     "md-editor-v3": "^2.5.0",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.27",
+    "pinia": "^2.0.28",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "responsive-storage": "^2.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.3",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "3.9.3",
+  "Version": "3.9.7",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,
@@ -17,7 +17,7 @@
   "ShowLogo": true,
   "ShowModel": "smart",
   "MenuArrowIconNoTransition": true,
-  "CachingAsyncRoutes": true,
+  "CachingAsyncRoutes": false,
   "TooltipEffect": "light",
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",

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

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;

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

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

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>
       </>
     );

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>

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>

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>

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>

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)"
                 />

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

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

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']\"");
     }

src/layout/components/notice/index.vue

@@ -70,14 +70,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
     height: 1px;
   }
 
-  // 如果上面的 notices 长度大于 3 请注释掉下面代码
   :deep(.el-tabs__nav-wrap) {
     padding: 0 36px 0 36px;
   }
-
-  // 如果上面的 notices 长度大于 3 请注释掉下面代码
-  :deep(.el-tabs__active-bar) {
-    margin: 0 36px 0 36px;
-  }
 }
 </style>

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";

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

src/layout/components/sidebar/sidebarItem.vue

@@ -144,7 +144,8 @@ function resolvePath(routePath) {
   if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
     return routePath || props.basePath;
   } else {
-    return path.resolve(props.basePath, routePath);
+    // 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
+    return path.posix.resolve(props.basePath, routePath);
   }
 }
 </script>

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 } =

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

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

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

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";

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

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

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

src/plugins/vxe-table/index.scss

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

src/plugins/vxe-table/index.ts

@@ -1,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);
-}

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", {

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
   },

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

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

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

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,

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：忘记密码）

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 {

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

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

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;

src/views/able/print.vue

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

src/views/components/button/index.vue

@@ -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>

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>
 

src/views/permission/page/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { initRouter } from "@/router/utils";
+import { storageSession } from "@pureadmin/utils";
 import { type CSSProperties, ref, computed } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -33,7 +34,7 @@ function onChange() {
     .loginByUsername({ username: username.value, password: "admin123" })
     .then(res => {
       if (res.success) {
-        sessionStorage.removeItem("async-routes");
+        storageSession().removeItem("async-routes");
         usePermissionStoreHook().clearAllCachePage();
         initRouter();
       }

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"),

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

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,

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

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

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

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

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

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

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

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

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

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

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

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

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
+  };
+}

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>

src/views/system/dict/config.vue

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

src/views/system/dict/index.vue

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

src/views/system/role/hook.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
   };
 }

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>
 

src/views/system/user/hook.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
   };
 }

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>

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>

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>

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)"

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>

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>

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";

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";