Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

* perf: Page supports custom height offset for flexible content height control.

允许通过 height 属性调整页面内容高度计算。修改了 Page 组件以支持自定义高度偏移量，用于更灵活的内容高度控制。

* chore: typo

* perf(page): replace height with heightOffset for flexible content sizing

The `height` prop was replaced with `heightOffset` to better describe its purpose when used with `autoContentHeight`. The new prop allows custom offset values (in pixels) to adjust content area sizing, with clearer documentation.

.gitee/ISSUE_TEMPLATE/bug.yml

@@ -20,6 +20,12 @@ body:
       options:
         - label: 未点赞(star)问题直接删除, 不予理会
           required: true
+  - type: checkboxes
+    attributes:
+      label: 基础框架问题(如布局,modal,drawer等)请提交给vben官方
+      options:
+        - label: 我确认是业务问题而非基础框架问题
+          required: true
   - type: textarea
     attributes:
       label: 如何复现

.github/CODEOWNERS

@@ -1,14 +1,14 @@
 # default onwer
-* anncwb@126.com vince292007@gmail.com
+* anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
 
 # vben core onwer
-/.github/ anncwb@126.com vince292007@gmail.com
-/.vscode/ anncwb@126.com vince292007@gmail.com
-/packages/ anncwb@126.com vince292007@gmail.com
-/packages/@core/ anncwb@126.com vince292007@gmail.com
-/internal/ anncwb@126.com vince292007@gmail.com
-/scripts/ anncwb@126.com vince292007@gmail.com
+/.github/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
+/.vscode/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
+/packages/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
+/packages/@core/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
+/internal/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
+/scripts/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
 
 # vben team onwer
-apps/ anncwb@126.com vince292007@gmail.com @vbenjs/team-v5
-docs/ anncwb@126.com vince292007@gmail.com @vbenjs/team-v5
+apps/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5 jinmao88@qq.com
+docs/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5 jinmao88@qq.com

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -62,7 +62,7 @@ body:
       description: Before submitting the issue, please make sure you do the following
       # description: By submitting this issue, you agree to follow our [Code of Conduct](https://example.com).
       options:
-        - label: Read the [docs](https://anncwb.github.io/vue-vben-admin-doc/)
+        - label: Read the [docs](https://doc.vben.pro/)
           required: true
         - label: Ensure the code is up to date. (Some issues have been fixed in the latest version)
           required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -62,7 +62,7 @@ body:
       label: Validations
       description: Before submitting the issue, please make sure you do the following
       options:
-        - label: Read the [docs](https://anncwb.github.io/vue-vben-admin-doc/)
+        - label: Read the [docs](https://doc.vben.pro/)
           required: true
         - label: Ensure the code is up to date. (Some issues have been fixed in the latest version)
           required: true

.github/workflows/deploy.yml

@@ -153,3 +153,20 @@ jobs:
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}
           password: ${{ secrets.WEB_NAIVE_FTP_PASSWORD }}
           local-dir: ./apps/web-naive/dist/
+
+  rerun-on-failure:
+    name: Rerun on failure
+    needs:
+      - deploy-playground-ftp
+      - deploy-docs-ftp
+      - deploy-antd-ftp
+      - deploy-ele-ftp
+      - deploy-naive-ftp
+    if: failure() && fromJSON(github.run_attempt) < 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Retry ${{ fromJSON(github.run_attempt) }} of 10
+        env:
+          GH_REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+        run: gh workflow run rerun.yml -F run_id=${{ github.run_id }}

.github/workflows/rerun.yml

@@ -0,0 +1,19 @@
+name: Rerun workflow
+
+on:
+  workflow_dispatch:
+    inputs:
+      run_id:
+        description: The workflow id to relanch
+        required: true
+jobs:
+  rerun:
+    runs-on: ubuntu-latest
+    steps:
+      - name: rerun ${{ inputs.run_id }}
+        env:
+          GH_REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh run watch ${{ inputs.run_id }} > /dev/null 2>&1
+          gh run rerun ${{ inputs.run_id }} --failed

.gitpod.yml

@@ -2,5 +2,5 @@ ports:
   - port: 5555
     onOpen: open-preview
 tasks:
-  - init: corepack enable && pnpm install
+  - init: npm i -g corepack && pnpm install
     command: pnpm run dev:play

.lintstagedrc.mjs

@@ -1,4 +1,10 @@
 export default {
+  '*.md': ['prettier --cache --ignore-unknown --write'],
+  '*.vue': [
+    'prettier --write',
+    'eslint --cache --fix',
+    'stylelint --fix --allow-empty-input',
+  ],
   '*.{js,jsx,ts,tsx}': [
     'prettier --cache --ignore-unknown  --write',
     'eslint --cache --fix',
@@ -7,14 +13,8 @@ export default {
     'prettier --cache --ignore-unknown --write',
     'stylelint --fix --allow-empty-input',
   ],
-  '*.md': ['prettier --cache --ignore-unknown --write'],
-  '*.vue': [
-    'prettier --write',
-    'eslint --cache --fix',
-    'stylelint --fix --allow-empty-input',
-  ],
-  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
-    'prettier --cache --write--parser json',
-  ],
   'package.json': ['prettier --cache --write'],
+  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
+    'prettier --cache --write --parser json',
+  ],
 };

.node-version

@@ -1 +1 @@
-20.14.0
+22.1.0

.vscode/launch.json

@@ -9,7 +9,7 @@
       "url": "http://localhost:5555",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/playground"
     },
     {
       "type": "chrome",
@@ -18,7 +18,7 @@
       "url": "http://localhost:5666",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/apps/web-antd"
     },
     {
       "type": "chrome",
@@ -27,7 +27,7 @@
       "url": "http://localhost:5777",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/apps/web-ele"
     },
     {
       "type": "chrome",
@@ -36,7 +36,7 @@
       "url": "http://localhost:5888",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/apps/web-naive"
     }
   ]
 }

.vscode/settings.json

@@ -14,7 +14,7 @@
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
   "editor.cursorBlinking": "expand",
-  "editor.largeFileOptimizations": false,
+  "editor.largeFileOptimizations": true,
   "editor.accessibilitySupport": "off",
   "editor.cursorSmoothCaretAnimation": "on",
   "editor.guides.bracketPairs": "active",
@@ -91,6 +91,7 @@
     "**/bower_components": true,
     "**/.turbo": true,
     "**/.idea": true,
+    "**/.vitepress": true,
     "**/tmp": true,
     "**/.git": true,
     "**/.svn": true,
@@ -99,7 +100,8 @@
     "**/.stylelintcache": true,
     "**/.DS_Store": true,
     "**/vite.config.mts.*": true,
-    "**/tea.yaml": true
+    "**/tea.yaml": true,
+    "**/public/tinymce/**": true
   },
   "files.watcherExclude": {
     "**/.git/objects/**": true,
@@ -112,6 +114,8 @@
     "**/yarn.lock": true
   },
 
+  "typescript.tsserver.exclude": ["**/node_modules", "**/dist", "**/.turbo"],
+
   // search
   "search.searchEditor.singleClickBehaviour": "peekDefinition",
   "search.followSymlinks": false,
@@ -223,10 +227,20 @@
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
   "vitest.disableWorkspaceWarning": true,
-  "cSpell.words": ["tinymce", "vditor"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.linkedEditing": true, // 自动同步更改html标签,
   "vscodeCustomCodeColor.highlightValue": "v-access", // v-access显示的颜色
   "vscodeCustomCodeColor.highlightValueColor": "#CCFFFF",
-  "oxc.enable": false
+  "oxc.enable": false,
+  "cSpell.words": [
+    "archiver",
+    "axios",
+    "dotenv",
+    "isequal",
+    "jspm",
+    "napi",
+    "nolebase",
+    "rollup",
+    "vitest"
+  ]
 }

CHANGELOG.md

@@ -1,3 +1,187 @@
+# 1.3.3
+
+**BUG FIX**
+
+- 工作流list展示在开启缩放会有误差导致触底逻辑不会触发
+
+**OTHER**
+
+- 代码生成预览对模板的提示...（下载都懒得点一下吗）
+
+# 1.3.2
+
+**REFACTOR**
+
+- 所有表格操作列宽度调整为'auto', 这样会根据子元素宽度适配(比如没有分配权限的情况)
+- 菜单图标更新了一部分 sql同步更新
+
+**OTHER**
+
+- 暂时锁死vite依赖 i18n会报错
+
+# 1.3.1
+
+**REFACTOR**
+
+- 所有Modal/Drawer表单关闭前会进行表单数据对比来弹出提示框
+- 字典项颜色选择从`原生input type=color`改为`vue3-colorpicker`组件
+- 全局Header: ClientID 更改大小写 [spring的问题导致](https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC0BDS)
+
+**BUG FIX**
+
+- getVxePopupContainer逻辑调整 解决表格固定高度展开不全的问题
+
+**FEATURES**
+
+- 字典渲染支持loading(length为0情况)
+
+**OTHERS**
+
+- useForm的组件改为异步导入(官方更新) bootstrap.js体积从2M降到600K 首屏加载速度提升
+
+# 1.3.0
+
+注意: 如果你使用老版本的`文件上传`/`图片上传` 可暂时使用
+
+- `component: 'ImageUploadOld'`
+- `component: 'FileUploadOld'`
+
+代替 **建议替换为新版本**
+
+大致变动:
+
+- `accept string[] -> string`
+- `resultField 已经移除 统一使用ossId`
+- `maxNumber -> maxCount`
+
+具体参数查看: `apps/web-antd/src/components/upload/src/props.d.ts`
+
+不再推荐使用useDescription, 这个版本会标记为@deprecated, 下个次版本将会移除
+
+框架所有使用useDescription组件的会替换为原生(TODO)
+
+**REFACTOR**
+
+- **文件上传/图片上传重构(破坏性更新 不兼容之前的api)**
+- **文件上传/图片上传不再支持url用法 强制使用ossId**
+- TableSwitch组件重构
+- 管理员租户切换不再返回首页 直接刷新当前页(除特殊页面外会回到首页)
+- 租户切换Select增加loading
+- ~~modalLoading/drawerLoading改为调用内部的lock/unlock方法~~ 有待商榷暂时按老版本逻辑不变
+- 登录验证码 增加loading
+- DictEnum使用const代替enum
+- TinyMCE组件重构 移除冗余代码/功能 增加loading
+
+**ALPHA功能**
+
+- 弹窗表单数据更改关闭时的提示框(可能最终不会加入) 测试页面: 参数管理
+
+**BUG FIX**
+
+- 重新登录 字典会unknown的情况[详细分析](https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IBY27D)
+- 测试菜单 请假申请 选中删除 需要根据状态判断
+- 修复文件/图片在Safari中无法上传 file-type库与Safari不兼容导致
+- 头像裁剪 图片加载失败一直处于loading无法上传
+- 头像裁剪 私有桶会拼接timestamp参数导致sign计算异常无法上传 感谢cropperjs作者 https://github.com/fengyuanchen/cropperjs/issues/1230
+- 租户选择下拉框会跟随body滚动(将下拉框样式的默认absolute改为fixed)
+
+**OTHER**
+
+- 字典管理 字典类型 表格选中行增加bold效果
+- 全局圆角修改 与antd保持一致
+- vditor(Markdown)升级3.10.9
+- 老版本的文件/图片上传将于下个版本移除
+- useDescription将于下个版本移除
+- getVxePopupContainer与新版Vxe不兼容 先返回body(会导致滚动不跟随)后续版本再优化
+
+# 1.2.3
+
+**BUG FIX**
+
+- `withDefaultPlaceholder`中将`placeholder`修改为computed, 解决后续使用`updateSchema`无法正常更新显示placeholder(响应式问题)
+
+- 流程定义 修改accept类型 解决无法拖拽上传
+
+**FEATURES**
+
+- 增加`环境变量`打包配置demo -> build:antd:test
+- 角色管理 勾选权限组件添加对错误用法的校验提示
+
+**REFACTOR**
+
+- OAuth内部逻辑重构 增加新的默认OAuth登录方式
+- 重构部分setup组件为setup语法糖形式
+
+# 1.2.2
+
+**FEATURES**
+
+- 代码生成支持路径方式生成
+- 代码生成 支持选择表单生成类型(需要模板支持)
+- 工作流 支持按钮权限
+
+# 1.2.1
+
+# BUG FIXES
+
+- 客户端管理 错误的status disabled
+- modal/drawer升级后zIndex(2000)会遮挡Tinymce的下拉框zIndex(1300)
+
+# 1.2.0
+
+**REFACTOR**
+
+- 菜单选择组件重构为Table形式
+- 字典相关功能重构 采用一个Map储存字典(之前为两个Map)
+- 代码生成配置页面重构 去除步骤条
+
+**Features**
+
+- 对接后端工作流
+- ~~通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理)~~
+- getDict/getDictOptions 提取公共逻辑 减少冗余代码
+- 字典新增对Number类型的支持 -> `getDictOptions('', true);`即可获取number类型的value
+- 文件上传 增加上传进度条 下方上传提示
+- 图片上传 增加上传进度条 下方上传提示
+- oss下载进度提示
+
+**BUG FIXES**
+
+- 字典项为空时getDict方法无限调用接口(无奈兼容 不给字典item本来就是错误用法)
+- 表格排序翻页会丢失排序参数
+- 下载文件时(responseType === 'blob')需要判断下载失败(返回json而非二进制)的情况
+- requestClient缺失i18n内容
+
+**OTHERS**
+
+- 用户管理 新增只获取一次(mounted)默认密码而非每次打开modal都获取
+- `apps/web-antd/src/utils/dict.ts` `getDict`方法将于下个版本删除 使用`getDictOptions`替代
+- VxeTable升级V4.10.0
+- 移除`@deprecated` `apps/web-antd/src/adapter/vxe-table.ts`的`tableCheckboxEvent`方法
+- 移除`由于更新方案弃用的` `apps/web-antd/src/adapter/vxe-table.ts`的`vxeSortEvent`方法
+- 移除apps下的ele和naive目录
+
+# 1.1.3
+
+**REFACTOR**
+
+- 重构: 判断vxe-table的复选框是否选中
+
+**Bug Fixes**
+
+- 节点树在编辑 & 空数组(不勾选)情况 勾选节点会造成watch延迟触发 导致会带上父节点id造成id重复
+- 节点树在节点独立情况下的控制台warning: Invalid prop: type check failed for prop "value". Expected Array, got Object
+
+**Others**
+
+- 角色管理 优化Drawer布局
+- unplugin-vue-components插件(默认未开启) 需要排除Button组件 全局已经默认导入了
+
+**BUG FIXES**
+
+- 操作日志详情 在description组件中json预览样式异常
+- 微服务版本 区间查询和中文搜索条件一起使用 无法正确查询
+
 # 1.1.2
 
 **Features**

README.ja-JP.md

@@ -1,8 +1,13 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center">
+  <a href="https://github.com/anncwb/vue-vben-admin">
+    <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp">
+  </a>
+  <br>
+  <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
-<h1>Vue Vben Admin</h1>
+  <h1>Vue Vben Admin</h1>
 </div>
 
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
@@ -15,27 +20,27 @@ Vue Vben Adminは、最新の`vue3`、`vite`、`TypeScript`などの主流技術
 
 ## アップグレード通知
 
-これは最新バージョン5.0であり、以前のバージョンとは互換性がありません。新しいプロジェクトを開始する場合は、最新バージョンを使用することをお勧めします。古いバージョンを表示したい場合は、[v2ブランチ](https://github.com/vbenjs/vue-vben-admin/tree/v2)を使用してください。
+これは最新バージョン `5.0` であり、以前のバージョンとは互換性がありません。新しいプロジェクトを開始する場合は、最新バージョンを使用することをお勧めします。古いバージョンを表示したい場合は、[v2ブランチ](https://github.com/vbenjs/vue-vben-admin/tree/v2)を使用してください。
 
 ## 特徴
 
-- **最新技術スタック**: Vue 3やViteなどの最先端フロントエンド技術で開発
-- **TypeScript**: アプリケーション規模のJavaScriptのための言語
-- **テーマ**: 複数のテーマカラーが利用可能で、カスタマイズオプションも豊富
-- **国際化**: 完全な内蔵国際化サポート
-- **権限管理**: 動的ルートベースの権限生成ソリューションを内蔵
+- **最新技術スタック**：Vue 3やViteなどの最先端フロントエンド技術で開発
+- **TypeScript**：アプリケーション規模のJavaScriptのための言語
+- **テーマ**：複数のテーマカラーが利用可能で、カスタマイズオプションも豊富
+- **国際化**：完全な内蔵国際化サポート
+- **権限管理**：動的ルートベースの権限生成ソリューションを内蔵
 
 ## プレビュー
 
 - [Vben Admin](https://vben.pro/) - フルバージョンの中国語サイト
 
-テストアカウント: vben/123456
+テストアカウント：vben/123456
 
-<p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
-</p>
+<div align="center">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</div>
 
 ### Gitpodを使用
 
@@ -49,30 +54,27 @@ Gitpod（GitHub用の無料オンライン開発環境）でプロジェクト
 
 ## インストールと使用
 
-- プロジェクトコードを取得
+1. プロジェクトコードを取得
 
 ```bash
 git clone https://github.com/vbenjs/vue-vben-admin.git
 ```
 
-- 依存関係のインストール
+2. 依存関係のインストール
 
 ```bash
 cd vue-vben-admin
-
-corepack enable
-
+npm i -g corepack
 pnpm install
-
 ```
 
-- 実行
+3. 実行
 
 ```bash
 pnpm dev
 ```
 
-- ビルド
+4. ビルド
 
 ```bash
 pnpm build
@@ -86,40 +88,39 @@ pnpm build
 
 ご参加をお待ちしております！[Issueを提出](https://github.com/anncwb/vue-vben-admin/issues/new/choose)するか、Pull Requestを送信してください。
 
-**Pull Request:**
+**Pull Request プロセス：**
 
-1. コードをフォーク！
-2. 自分のブランチを作成: `git checkout -b feat/xxxx`
-3. 変更をコミット: `git commit -am 'feat(function): add xxxxx'`
-4. ブランチをプッシュ: `git push origin feat/xxxx`
+1. コードをフォーク
+2. 自分のブランチを作成：`git checkout -b feat/xxxx`
+3. 変更をコミット：`git commit -am 'feat(function): add xxxxx'`
+4. ブランチをプッシュ：`git push origin feat/xxxx`
 5. `pull request`を送信
 
 ## Git貢献提出規則
 
-- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 規則 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 規則 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
 
-  - `feat` 新機能の追加
-  - `fix` 問題/バグの修正
-  - `style` コードスタイルに関連し、実行結果に影響しない
-  - `perf` 最適化/パフォーマンス向上
-  - `refactor` リファクタリング
-  - `revert` 変更の取り消し
-  - `test` テスト関連
-  - `docs` ドキュメント/注釈
-  - `chore` 依存関係の更新/スキャフォールディング設定の変更など
-  - `ci` 継続的インテグレーション
-  - `types` 型定義ファイルの変更
-  - `wip` 開発中
+- `feat` 新機能の追加
+- `fix` 問題/バグの修正
+- `style` コードスタイルに関連し、実行結果に影響しない
+- `perf` 最適化/パフォーマンス向上
+- `refactor` リファクタリング
+- `revert` 変更の取り消し
+- `test` テスト関連
+- `docs` ドキュメント/注釈
+- `chore` 依存関係の更新/スキャフォールディング設定の変更など
+- `ci` 継続的インテグレーション
+- `types` 型定義ファイルの変更
 
 ## ブラウザサポート
 
-ローカル開発には`Chrome 80+`ブラウザを推奨します
+ローカル開発には `Chrome 80+` ブラウザを推奨します
 
 モダンブラウザをサポートし、IEはサポートしません
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| :-: | :-: | :-: | :-: | :-: |
-| サポートしない | 最新2バージョン | 最新2バージョン | 最新2バージョン | 最新2バージョン |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: |
+| 最新2バージョン | 最新2バージョン | 最新2バージョン | 最新2バージョン |
 
 ## メンテナー
 
@@ -140,8 +141,7 @@ pnpm build
 ## 貢献者
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
- <img alt="Contributors"
-        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+  <img alt="Contributors" src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord

README.md

@@ -1,8 +1,13 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center">
+  <a href="https://github.com/anncwb/vue-vben-admin">
+    <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp">
+  </a>
+  <br>
+  <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
-<h1>Vue Vben Admin</h1>
+  <h1>Vue Vben Admin</h1>
 </div>
 
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
@@ -17,7 +22,7 @@ Vue Vben Admin is a free and open source middle and back-end template. Using the
 
 This is the latest version, 5.0, and it is not compatible with previous versions. If you are starting a new project, it is recommended to use the latest version. If you wish to view the old version, please use the [v2 branch](https://github.com/vbenjs/vue-vben-admin/tree/v2).
 
-## Feature
+## Features
 
 - **Latest Technology Stack**: Developed with cutting-edge front-end technologies like Vue 3 and Vite
 - **TypeScript**: A language for application-scale JavaScript
@@ -31,11 +36,11 @@ This is the latest version, 5.0, and it is not compatible with previous versions
 
 Test Account: vben/123456
 
-<p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
-</p>
+<div align="center">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</div>
 
 ### Use Gitpod
 
@@ -47,31 +52,29 @@ Open the project in Gitpod (free online dev environment for GitHub) and start co
 
 [Document](https://doc.vben.pro/)
 
-## Install and use
+## Install and Use
 
-- Get the project code
+1. Get the project code
 
 ```bash
 git clone https://github.com/vbenjs/vue-vben-admin.git
 ```
 
-- Installation dependencies
+2. Install dependencies
 
 ```bash
 cd vue-vben-admin
-
-corepack enable
-
+npm i -g corepack
 pnpm install
 ```
 
-- run
+3. Run
 
 ```bash
 pnpm dev
 ```
 
-- build
+4. Build
 
 ```bash
 pnpm build
@@ -81,44 +84,43 @@ pnpm build
 
 [CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
 
-## How to contribute
+## How to Contribute
 
-You are very welcome to join！[Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) Or submit a Pull Request。
+You are very welcome to join! [Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) or submit a Pull Request.
 
-**Pull Request:**
+**Pull Request Process:**
 
-1. Fork code!
-2. Create your own branch: `git checkout -b feat/xxxx`
+1. Fork the code
+2. Create your branch: `git checkout -b feat/xxxx`
 3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
 4. Push your branch: `git push origin feat/xxxx`
-5. submit`pull request`
+5. Submit `pull request`
 
-## Git Contribution submission specification
+## Git Contribution Submission Specification
 
-- reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+Reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
 
-  - `feat` Add new features
-  - `fix` Fix the problem/BUG
-  - `style` The code style is related and does not affect the running result
-  - `perf` Optimization/performance improvement
-  - `refactor` Refactor
-  - `revert` Undo edit
-  - `test` Test related
-  - `docs` Documentation/notes
-  - `chore` Dependency update/scaffolding configuration modification etc.
-  - `ci` Continuous integration
-  - `types` Type definition file changes
-  - `wip` In development
+- `feat` Add new features
+- `fix` Fix the problem/BUG
+- `style` The code style is related and does not affect the running result
+- `perf` Optimization/performance improvement
+- `refactor` Refactor
+- `revert` Undo edit
+- `test` Test related
+- `docs` Documentation/notes
+- `chore` Dependency update/scaffolding configuration modification etc.
+- `ci` Continuous integration
+- `types` Type definition file changes
 
-## Browser support
+## Browser Support
 
 The `Chrome 80+` browser is recommended for local development
 
 Support modern browsers, not IE
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| :-: | :-: | :-: | :-: | :-: |
-| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## Maintainer
 
@@ -136,11 +138,10 @@ If you think this project is helpful to you, you can help the author buy a cup o
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
-## Contributor
+## Contributors
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-  <img alt="Contributors"
-        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+  <img alt="Contributors" src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord

README.zh-CN.md

@@ -2,21 +2,15 @@
 
 ## 提示
 
-该仓库使用vben最新版本v5开发, ~~老版本v2地址(不维护)~~ [前往](https://gitee.com/dapppp/ruoyi-plus-vben)
+该仓库使用vben最新版本v5开发
 
 v5版本采用分仓(包)目录结构, 具体开发路径为: `根目录/apps/web-antd`
 
-目前对应后端版本: **5.2.3/2.2.3**
+目前对应后端版本: **分布式5.3.1/微服务2.3.0**
 
 V1.1.0版本已支持离线图标
 
-## 进度
-
-**工作流相关模块等待后端重构后开发**
-
-基础功能已经开发完毕
-
-👉 [更新日志](https://gitee.com/dapppp/ruoyi-plus-vben5/blob/main/CHANGELOG.md)
+V1.2.0版本对接warmflow工作流
 
 ## 简介
 
@@ -24,9 +18,9 @@ V1.1.0版本已支持离线图标
 
 | 组件/框架      | 版本   |
 | :------------- | :----- |
-| vben           | 5.4.5  |
-| ant-design-vue | 4.2.5  |
-| vue            | 3.5.11 |
+| vben           | 5.5.4  |
+| ant-design-vue | 4.2.6  |
+| vue            | 3.5.13 |
 
 对应后端项目: **(分布式 5.X 分支 微服务 2.分支)**
 
@@ -52,9 +46,17 @@ admin 账号: admin admin123
 
 [RuoYi-Plus 文档地址](https://plus-doc.dromara.org/#/)
 
+## 关于表单
+
+如果你觉得`useVbenForm`难度很大, 完全可以**使用原生antd表单**进行开发, 不一定非得用`useVbenForm`进行开发
+
+`apps/web-antd/src/views/system/notice/notice-modal.vue`即`通知公告modal`使用**原生antd form**进行(反向🤔)重构, 不想用`useVbenForm`可参考该页面进行表单开发
+
+复杂表单(如各种联动, 需要自定义样式布局, 需要自定义组件)**优先使用原生表单**(反正说了也没人听听😅)
+
 ## 预览图
 
-![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/1.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/2.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/3.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/4.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/5.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/6.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/7.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/8.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/9.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/10.png)
+![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/1.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/2.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/3.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/4.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/5.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/6.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/7.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/8.png) ![图片](https://gitee.com/dapppp/ruoyi-plus-vben5/raw/main/scripts/preview/9.png)
 
 ## 安装使用
 
@@ -74,7 +76,7 @@ admin 账号: admin admin123
 git clone https://gitee.com/dapppp/ruoyi-plus-vben5.git
 ```
 
-- 安装依赖
+2. 安装依赖
 
 ```bash
 cd ruoyi-plus-vben5
@@ -148,7 +150,7 @@ VITE_GLOB_WEBSOCKET_ENABLE=false
 pnpm dev:antd
 ```
 
-- 打包
+4. 打包
 
 ```bash
 pnpm build:antd
@@ -162,21 +164,21 @@ pnpm build:antd
 
 ## Git 贡献提交规范
 
-- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
 
-  - `feat` 增加新功能
-  - `fix` 修复问题/BUG
-  - `style` 代码风格相关无影响运行结果的
-  - `perf` 优化/性能提升
-  - `refactor` 重构
-  - `revert` 撤销修改
-  - `test` 测试相关
-  - `docs` 文档/注释
-  - `chore` 依赖更新/脚手架配置修改等
-  - `workflow` 工作流改进
-  - `ci` 持续集成
-  - `types` 类型定义文件更改
-  - `wip` 开发中
+- `feat` 增加新功能
+- `fix` 修复问题/BUG
+- `style` 代码风格相关无影响运行结果的
+- `perf` 优化/性能提升
+- `refactor` 重构
+- `revert` 撤销修改
+- `test` 测试相关
+- `docs` 文档/注释
+- `chore` 依赖更新/脚手架配置修改等
+- `workflow` 工作流改进
+- `ci` 持续集成
+- `types` 类型定义文件更改
+- `wip` 开发中
 
 ## 浏览器支持
 
@@ -184,14 +186,8 @@ pnpm build:antd
 
 本地开发推荐使用`Chrome` 最新版本浏览器
 
-支持现代浏览器, 不支持 IE
+支持现代浏览器，不支持 IE
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | :-: | :-: | :-: | :-: | :-: |
 | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
-
-## 捐赠
-
-如果项目帮助到您 可以考虑请作者喝杯咖啡 万分感谢您对开源的支持!
-
-<img src=https://plus.dapdap.top/minio-server/plus/2024/03/16/98a9d704eb0c4c04b721bf7799217571.jpg height=360px />

apps/backend-mock/api/system/dept/.post.ts

@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(600);
+  return useResponseSuccess(null);
+});

apps/backend-mock/api/system/dept/[id].delete.ts

@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(1000);
+  return useResponseSuccess(null);
+});

apps/backend-mock/api/system/dept/[id].put.ts

@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(2000);
+  return useResponseSuccess(null);
+});

apps/backend-mock/api/system/dept/list.ts

@@ -0,0 +1,61 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      pid: 0,
+      name: faker.commerce.department(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2021-01-01', to: '2022-12-31' }),
+      ),
+      remark: faker.lorem.sentence(),
+    };
+    if (faker.datatype.boolean()) {
+      dataItem.children = Array.from(
+        { length: faker.number.int({ min: 1, max: 5 }) },
+        () => ({
+          id: faker.string.uuid(),
+          pid: dataItem.id,
+          name: faker.commerce.department(),
+          status: faker.helpers.arrayElement([0, 1]),
+          createTime: formatterCN.format(
+            faker.date.between({ from: '2023-01-01', to: '2023-12-31' }),
+          ),
+          remark: faker.lorem.sentence(),
+        }),
+      );
+    }
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(10);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const listData = structuredClone(mockData);
+
+  return useResponseSuccess(listData);
+});

apps/backend-mock/api/system/menu/list.ts

@@ -0,0 +1,12 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  return useResponseSuccess(MOCK_MENU_LIST);
+});

apps/backend-mock/api/system/menu/name-exists.ts

@@ -0,0 +1,28 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse } from '~/utils/response';
+
+const namesMap: Record<string, any> = {};
+
+function getNames(menus: any[]) {
+  menus.forEach((menu) => {
+    namesMap[menu.name] = String(menu.id);
+    if (menu.children) {
+      getNames(menu.children);
+    }
+  });
+}
+getNames(MOCK_MENU_LIST);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { id, name } = getQuery(event);
+
+  return (name as string) in namesMap &&
+    (!id || namesMap[name as string] !== String(id))
+    ? useResponseSuccess(true)
+    : useResponseSuccess(false);
+});

apps/backend-mock/api/system/menu/path-exists.ts

@@ -0,0 +1,28 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse } from '~/utils/response';
+
+const pathMap: Record<string, any> = { '/': 0 };
+
+function getPaths(menus: any[]) {
+  menus.forEach((menu) => {
+    pathMap[menu.path] = String(menu.id);
+    if (menu.children) {
+      getPaths(menu.children);
+    }
+  });
+}
+getPaths(MOCK_MENU_LIST);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { id, path } = getQuery(event);
+
+  return (path as string) in pathMap &&
+    (!id || pathMap[path as string] !== String(id))
+    ? useResponseSuccess(true)
+    : useResponseSuccess(false);
+});

apps/backend-mock/api/system/role/list.ts

@@ -0,0 +1,83 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { getMenuIds, MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+const menuIds = getMenuIds(MOCK_MENU_LIST);
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      name: faker.commerce.product(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2022-01-01', to: '2025-01-01' }),
+      ),
+      permissions: faker.helpers.arrayElements(menuIds),
+      remark: faker.lorem.sentence(),
+    };
+
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(100);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const {
+    page = 1,
+    pageSize = 20,
+    name,
+    id,
+    remark,
+    startTime,
+    endTime,
+    status,
+  } = getQuery(event);
+  let listData = structuredClone(mockData);
+  if (name) {
+    listData = listData.filter((item) =>
+      item.name.toLowerCase().includes(String(name).toLowerCase()),
+    );
+  }
+  if (id) {
+    listData = listData.filter((item) =>
+      item.id.toLowerCase().includes(String(id).toLowerCase()),
+    );
+  }
+  if (remark) {
+    listData = listData.filter((item) =>
+      item.remark?.toLowerCase()?.includes(String(remark).toLowerCase()),
+    );
+  }
+  if (startTime) {
+    listData = listData.filter((item) => item.createTime >= startTime);
+  }
+  if (endTime) {
+    listData = listData.filter((item) => item.createTime <= endTime);
+  }
+  if (['0', '1'].includes(status as string)) {
+    listData = listData.filter((item) => item.status === Number(status));
+  }
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
+});

apps/backend-mock/api/table/list.ts

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import { verifyAccessToken } from '~/utils/jwt-utils';
-import { unAuthorizedResponse } from '~/utils/response';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
 
 function generateMockDataList(count: number) {
   const dataList = [];
@@ -43,6 +43,31 @@ export default eventHandler(async (event) => {
 
   await sleep(600);
 
-  const { page, pageSize } = getQuery(event);
-  return usePageResponseSuccess(page as string, pageSize as string, mockData);
+  const { page, pageSize, sortBy, sortOrder } = getQuery(event);
+  const listData = structuredClone(mockData);
+  if (sortBy && Reflect.has(listData[0], sortBy as string)) {
+    listData.sort((a, b) => {
+      if (sortOrder === 'asc') {
+        if (sortBy === 'price') {
+          return (
+            Number.parseFloat(a[sortBy as string]) -
+            Number.parseFloat(b[sortBy as string])
+          );
+        } else {
+          return a[sortBy as string] > b[sortBy as string] ? 1 : -1;
+        }
+      } else {
+        if (sortBy === 'price') {
+          return (
+            Number.parseFloat(b[sortBy as string]) -
+            Number.parseFloat(a[sortBy as string])
+          );
+        } else {
+          return a[sortBy as string] < b[sortBy as string] ? 1 : -1;
+        }
+      }
+    });
+  }
+
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
 });

apps/backend-mock/api/upload.ts

@@ -0,0 +1,13 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess({
+    url: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+  });
+  // return useResponseError("test")
+});

apps/backend-mock/middleware/1.api.ts

@@ -1,7 +1,19 @@
-export default defineEventHandler((event) => {
+import { forbiddenResponse, sleep } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+  event.node.res.setHeader(
+    'Access-Control-Allow-Origin',
+    event.headers.get('Origin') ?? '*',
+  );
   if (event.method === 'OPTIONS') {
     event.node.res.statusCode = 204;
     event.node.res.statusMessage = 'No Content.';
     return 'OK';
+  } else if (
+    ['DELETE', 'PATCH', 'POST', 'PUT'].includes(event.method) &&
+    event.path.startsWith('/api/system/')
+  ) {
+    await sleep(Math.floor(Math.random() * 2000));
+    return forbiddenResponse(event, '演示环境，禁止修改');
   }
 });

apps/backend-mock/nitro.config.ts

@@ -9,7 +9,8 @@ export default defineNitroConfig({
       cors: true,
       headers: {
         'Access-Control-Allow-Credentials': 'true',
-        'Access-Control-Allow-Headers': '*',
+        'Access-Control-Allow-Headers':
+          'Accept, Authorization, Content-Length, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',
         'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Expose-Headers': '*',

apps/backend-mock/routes/[...].ts

@@ -7,6 +7,7 @@ export default defineEventHandler(() => {
 <li><a href="/api/menu">/api/menu/all</a></li>
 <li><a href="/api/auth/codes">/api/auth/codes</a></li>
 <li><a href="/api/auth/login">/api/auth/login</a></li>
+<li><a href="/api/upload">/api/upload</a></li>
 </ul>
 `;
 });

apps/backend-mock/utils/cookie-utils.ts

@@ -14,7 +14,7 @@ export function setRefreshTokenCookie(
 ) {
   setCookie(event, 'jwt', refreshToken, {
     httpOnly: true,
-    maxAge: 24 * 60 * 60 * 1000,
+    maxAge: 24 * 60 * 60, // unit: seconds
     sameSite: 'none',
     secure: true,
   });

apps/backend-mock/utils/mock-data.ts

@@ -4,6 +4,7 @@ export interface UserInfo {
   realName: string;
   roles: string[];
   username: string;
+  homePath?: string;
 }
 
 export const MOCK_USERS: UserInfo[] = [
@@ -20,6 +21,7 @@ export const MOCK_USERS: UserInfo[] = [
     realName: 'Admin',
     roles: ['admin'],
     username: 'admin',
+    homePath: '/workspace',
   },
   {
     id: 2,
@@ -27,6 +29,7 @@ export const MOCK_USERS: UserInfo[] = [
     realName: 'Jack',
     roles: ['user'],
     username: 'jack',
+    homePath: '/analytics',
   },
 ];
 
@@ -50,13 +53,12 @@ export const MOCK_CODES = [
 
 const dashboardMenus = [
   {
-    component: 'BasicLayout',
     meta: {
       order: -1,
       title: 'page.dashboard.title',
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     redirect: '/analytics',
     children: [
       {
@@ -113,7 +115,6 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
 
   return [
     {
-      component: 'BasicLayout',
       meta: {
         icon: 'ic:baseline-view-in-ar',
         keepAlive: true,
@@ -184,3 +185,206 @@ export const MOCK_MENUS = [
     username: 'jack',
   },
 ];
+
+export const MOCK_MENU_LIST = [
+  {
+    id: 1,
+    name: 'Workspace',
+    status: 1,
+    type: 'menu',
+    icon: 'mdi:dashboard',
+    path: '/workspace',
+    component: '/dashboard/workspace/index',
+    meta: {
+      icon: 'carbon:workspace',
+      title: 'page.dashboard.workspace',
+      affixTab: true,
+      order: 0,
+    },
+  },
+  {
+    id: 2,
+    meta: {
+      icon: 'carbon:settings',
+      order: 9997,
+      title: 'system.title',
+      badge: 'new',
+      badgeType: 'normal',
+      badgeVariants: 'primary',
+    },
+    status: 1,
+    type: 'catalog',
+    name: 'System',
+    path: '/system',
+    children: [
+      {
+        id: 201,
+        pid: 2,
+        path: '/system/menu',
+        name: 'SystemMenu',
+        authCode: 'System:Menu:List',
+        status: 1,
+        type: 'menu',
+        meta: {
+          icon: 'carbon:menu',
+          title: 'system.menu.title',
+        },
+        component: '/system/menu/list',
+        children: [
+          {
+            id: 20_101,
+            pid: 201,
+            name: 'SystemMenuCreate',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Menu:Create',
+            meta: { title: 'common.create' },
+          },
+          {
+            id: 20_102,
+            pid: 201,
+            name: 'SystemMenuEdit',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Menu:Edit',
+            meta: { title: 'common.edit' },
+          },
+          {
+            id: 20_103,
+            pid: 201,
+            name: 'SystemMenuDelete',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Menu:Delete',
+            meta: { title: 'common.delete' },
+          },
+        ],
+      },
+      {
+        id: 202,
+        pid: 2,
+        path: '/system/dept',
+        name: 'SystemDept',
+        status: 1,
+        type: 'menu',
+        authCode: 'System:Dept:List',
+        meta: {
+          icon: 'carbon:container-services',
+          title: 'system.dept.title',
+        },
+        component: '/system/dept/list',
+        children: [
+          {
+            id: 20_401,
+            pid: 201,
+            name: 'SystemDeptCreate',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Dept:Create',
+            meta: { title: 'common.create' },
+          },
+          {
+            id: 20_402,
+            pid: 201,
+            name: 'SystemDeptEdit',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Dept:Edit',
+            meta: { title: 'common.edit' },
+          },
+          {
+            id: 20_403,
+            pid: 201,
+            name: 'SystemDeptDelete',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Dept:Delete',
+            meta: { title: 'common.delete' },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 9,
+    meta: {
+      badgeType: 'dot',
+      order: 9998,
+      title: 'demos.vben.title',
+      icon: 'carbon:data-center',
+    },
+    name: 'Project',
+    path: '/vben-admin',
+    type: 'catalog',
+    status: 1,
+    children: [
+      {
+        id: 901,
+        pid: 9,
+        name: 'VbenDocument',
+        path: '/vben-admin/document',
+        component: 'IFrameView',
+        type: 'embedded',
+        status: 1,
+        meta: {
+          icon: 'carbon:book',
+          iframeSrc: 'https://doc.vben.pro',
+          title: 'demos.vben.document',
+        },
+      },
+      {
+        id: 902,
+        pid: 9,
+        name: 'VbenGithub',
+        path: '/vben-admin/github',
+        component: 'IFrameView',
+        type: 'link',
+        status: 1,
+        meta: {
+          icon: 'carbon:logo-github',
+          link: 'https://github.com/vbenjs/vue-vben-admin',
+          title: 'Github',
+        },
+      },
+      {
+        id: 903,
+        pid: 9,
+        name: 'VbenAntdv',
+        path: '/vben-admin/antdv',
+        component: 'IFrameView',
+        type: 'link',
+        status: 0,
+        meta: {
+          icon: 'carbon:hexagon-vertical-solid',
+          badgeType: 'dot',
+          link: 'https://ant.vben.pro',
+          title: 'demos.vben.antdv',
+        },
+      },
+    ],
+  },
+  {
+    id: 10,
+    component: '_core/about/index',
+    type: 'menu',
+    status: 1,
+    meta: {
+      icon: 'lucide:copyright',
+      order: 9999,
+      title: 'demos.vben.about',
+    },
+    name: 'About',
+    path: '/about',
+  },
+];
+
+export function getMenuIds(menus: any[]) {
+  const ids: number[] = [];
+  menus.forEach((item) => {
+    ids.push(item.id);
+    if (item.children && item.children.length > 0) {
+      ids.push(...getMenuIds(item.children));
+    }
+  });
+  return ids;
+}

apps/web-antd/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Plus Admin
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-antd
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key

apps/web-antd/.env.development

@@ -21,5 +21,5 @@ VITE_GLOB_RSA_PRIVATE_KEY=MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3CuP
 # 客户端id
 VITE_GLOB_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e
 
-# 开启WEBSOCKET
-VITE_GLOB_WEBSOCKET_ENABLE=false
+# 开启SSE
+VITE_GLOB_SSE_ENABLE=true

apps/web-antd/.env.production

@@ -15,7 +15,7 @@ VITE_INJECT_APP_LOADING=true
 # 打包后是否生成dist.zip
 VITE_ARCHIVER=true
 
-# 后台请求路径 具体在vite.config.mts配置代理
+# 后端接口地址
 VITE_GLOB_API_URL=/prod-api
 
 # 全局加密开关(即开启了加解密功能才会生效 不是全部接口加密 需要和后端对应)
@@ -27,6 +27,6 @@ VITE_GLOB_RSA_PRIVATE_KEY=MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3CuP
 # 客户端id
 VITE_GLOB_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e
 
-# 开启WEBSOCKET
-VITE_GLOB_WEBSOCKET_ENABLE=false
+# 开启SSE
+VITE_GLOB_SSE_ENABLE=true
 

apps/web-antd/.env.test

@@ -0,0 +1,35 @@
+# 该文件是为了给一个增加环境变量打包的例子
+# 对应在根目录package.json -> build:antd:test 命令
+
+VITE_BASE=/
+
+# 是否开启压缩，可以设置为 none, brotli, gzip
+VITE_COMPRESS=gzip
+
+# 是否开启 PWA
+VITE_PWA=false
+
+# vue-router 的模式
+VITE_ROUTER_HISTORY=history
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
+
+# 后端接口地址
+VITE_GLOB_API_URL=/test-api
+
+# 全局加密开关(即开启了加解密功能才会生效 不是全部接口加密 需要和后端对应)
+VITE_GLOB_ENABLE_ENCRYPT=true
+# RSA公钥 请求加密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
+VITE_GLOB_RSA_PUBLIC_KEY=MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==
+# RSA私钥 响应解密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
+VITE_GLOB_RSA_PRIVATE_KEY=MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3CuPiGL/LcIIm7zryCEIbl1SPzBkr75E2VMtxegyZ1lYRD+7TZGAPkvIsBcaMs6Nsy0L78n2qh+lIZMpLH8wIDAQABAkEAk82Mhz0tlv6IVCyIcw/s3f0E+WLmtPFyR9/WtV3Y5aaejUkU60JpX4m5xNR2VaqOLTZAYjW8Wy0aXr3zYIhhQQIhAMfqR9oFdYw1J9SsNc+CrhugAvKTi0+BF6VoL6psWhvbAiEAxPPNTmrkmrXwdm/pQQu3UOQmc2vCZ5tiKpW10CgJi8kCIFGkL6utxw93Ncj4exE/gPLvKcT+1Emnoox+O9kRXss5AiAMtYLJDaLEzPrAWcZeeSgSIzbL+ecokmFKSDDcRske6QIgSMkHedwND1olF8vlKsJUGK3BcdtM8w4Xq7BpSBwsloE=
+# 客户端id
+VITE_GLOB_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e
+
+# 开启SSE
+VITE_GLOB_SSE_ENABLE=true
+

apps/web-antd/.vscode/settings.json

@@ -1,9 +0,0 @@
-{
-  "editor.tabSize": 2,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.fixAll.stylelint": "explicit"
-  }
-}

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "1.1.2",
+  "version": "1.3.2",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -16,7 +16,7 @@
   },
   "type": "module",
   "scripts": {
-    "build": "pnpm vite build --mode production",
+    "build": "pnpm vite build",
     "build:analyze": "pnpm vite build --mode analyze",
     "dev": "pnpm vite --mode development",
     "preview": "vite preview",
@@ -54,7 +54,8 @@
     "tinymce": "^7.3.0",
     "unplugin-vue-components": "^0.27.3",
     "vue": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vue3-colorpicker": "^2.3.0"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",

apps/web-antd/src/adapter/component/index.ts

@@ -3,54 +3,130 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
-
-import type { Component, SetupContext } from 'vue';
-import { h } from 'vue';
-
-import { globalShareState } from '@vben/common-ui';
-import { $t } from '@vben/locales';
+import type { Recordable } from '@vben/types';
 
 import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  notification,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
-import { Tinymce as RichTextarea } from '#/components/tinymce';
-import { FileUpload, ImageUpload } from '#/components/upload';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { notification } from 'ant-design-vue';
+
+import { FileUploadOld, ImageUploadOld } from '#/components/upload-old';
+
+const RichTextarea = defineAsyncComponent(() =>
+  import('#/components/tinymce/index').then((res) => res.Tinymce),
+);
+
+const FileUpload = defineAsyncComponent(() =>
+  import('#/components/upload').then((res) => res.FileUpload),
+);
+
+const ImageUpload = defineAsyncComponent(() =>
+  import('#/components/upload').then((res) => res.ImageUpload),
+);
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          {
+            ...componentProps,
+            placeholder,
+            ...props,
+            ...attrs,
+            ref: innerRef,
+          },
+          slots,
+        );
+    },
+  });
 };
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'AutoComplete'
   | 'Checkbox'
   | 'CheckboxGroup'
@@ -58,7 +134,10 @@ export type ComponentType =
   | 'DefaultButton'
   | 'Divider'
   | 'FileUpload'
+  | 'FileUploadOld'
+  | 'IconPicker'
   | 'ImageUpload'
+  | 'ImageUploadOld'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
@@ -83,7 +162,34 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -93,6 +199,11 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
@@ -115,6 +226,8 @@ async function initComponentAdapter() {
     ImageUpload,
     FileUpload,
     RichTextarea,
+    ImageUploadOld,
+    FileUploadOld,
   };
 
   // 将组件注册到全局共享状态中

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,10 +1,8 @@
-import { h, type Ref } from 'vue';
+import type { VxeGridPropTypes } from '@vben/plugins/vxe-table';
 
-import {
-  setupVbenVxeTable,
-  useVbenVxeGrid,
-  type VxeGridDefines,
-} from '@vben/plugins/vxe-table';
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
 import { Button, Image } from 'ant-design-vue';
 
@@ -43,7 +41,7 @@ setupVbenVxeTable({
           // 鼠标移入行显示 hover 样式
           isHover: true,
           // 点击行高亮
-          isCurrent: true,
+          isCurrent: false,
         },
         columnConfig: {
           // 可拖拽列宽
@@ -106,15 +104,32 @@ export { useVbenVxeGrid };
 export type * from '@vben/plugins/vxe-table';
 
 /**
- * 通用的表格复选框是否选中事件
- * @param checked 是否选中
- * @returns function
+ * 判断vxe-table的复选框是否选中
+ * @param tableApi api
+ * @returns boolean
  */
-export function tableCheckboxEvent(checked: Ref<boolean>) {
-  const event: (params: VxeGridDefines.CheckboxChangeEventParams) => void = (
-    params,
-  ) => {
-    checked.value = params.$table.getCheckboxRecords().length > 0;
-  };
-  return event;
+export function vxeCheckboxChecked(
+  tableApi: ReturnType<typeof useVbenVxeGrid>[1],
+) {
+  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
+}
+
+/**
+ * 通用的 排序参数添加到请求参数中
+ * @param params 请求参数
+ * @param sortList vxe-table的排序参数
+ */
+export function addSortParams(
+  params: Record<string, any>,
+  sortList: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams[],
+) {
+  // 这里是排序取消 length为0 就不添加参数了
+  if (sortList.length === 0) {
+    return;
+  }
+  // 支持单/多字段排序
+  const orderByColumn = sortList.map((item) => item.field).join(',');
+  const isAsc = sortList.map((item) => item.order).join(',');
+  params.orderByColumn = orderByColumn;
+  params.isAsc = isAsc;
 }

apps/web-antd/src/api/common.d.ts

@@ -21,14 +21,22 @@ export interface PageResult<T = any> {
 
 /**
  * 分页查询参数
+ *
+ * 排序支持的用法如下:
+ * {isAsc:"asc",orderByColumn:"id"} order by id asc
+ * {isAsc:"asc",orderByColumn:"id,createTime"} order by id asc,create_time asc
+ * {isAsc:"desc",orderByColumn:"id,createTime"} order by id desc,create_time desc
+ * {isAsc:"asc,desc",orderByColumn:"id,createTime"} order by id asc,create_time desc
+ *
  * @param pageNum 当前页
  * @param pageSize 每页大小
  * @param orderByColumn 排序字段
  * @param isAsc 是否升序
  */
 export interface PageQuery {
-  isAsc?: boolean;
+  isAsc?: string;
   orderByColumn?: string;
   pageNum?: number;
   pageSize?: number;
+  [key: string]: any;
 }

apps/web-antd/src/api/core/auth.ts

@@ -4,7 +4,10 @@ import { useAppConfig } from '@vben/hooks';
 
 import { requestClient } from '#/api/request';
 
-const { clientId } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const { clientId, sseEnable } = useAppConfig(
+  import.meta.env,
+  import.meta.env.PROD,
+);
 
 export namespace AuthApi {
   /**
@@ -96,6 +99,12 @@ export function doLogout() {
  * @returns void
  */
 export function seeConnectionClose() {
+  /**
+   * 未开启sse 不需要处理
+   */
+  if (!sseEnable) {
+    return;
+  }
   return requestClient.get<void>('/resource/sse/close');
 }
 

apps/web-antd/src/api/core/menu.ts

@@ -19,7 +19,7 @@ export interface MenuMeta {
  * @param name 菜单名
  * @param path 菜单路径
  * @param hidden 是否隐藏
- * @param component 组件名称 Laout
+ * @param component 组件名称 Layout
  * @param alwaysShow 总是显示
  * @param query 路由参数(json形式)
  * @param meta 路由信息

apps/web-antd/src/api/core/upload.ts

@@ -1,13 +1,12 @@
+import type { AxiosRequestConfig } from '@vben/request';
+
 import { requestClient } from '#/api/request';
 
 /**
- * 通过单文件上传接口
- * @param file 上传的文件
- * @returns 上传结果
+ * Axios上传进度事件
  */
-export function uploadApi(file: Blob | File) {
-  return requestClient.upload('/resource/oss/upload', { file });
-}
+export type AxiosProgressEvent = AxiosRequestConfig['onUploadProgress'];
+
 /**
  * 默认上传结果
  */
@@ -16,3 +15,33 @@ export interface UploadResult {
   fileName: string;
   ossId: string;
 }
+
+/**
+ * 通过单文件上传接口
+ * @param file 上传的文件
+ * @param options 一些配置项
+ * @param options.onUploadProgress 上传进度事件
+ * @param options.signal 上传取消信号
+ * @param options.otherData 其他请求参数 后端拓展可能会用到
+ * @returns 上传结果
+ */
+export function uploadApi(
+  file: Blob | File,
+  options?: {
+    onUploadProgress?: AxiosProgressEvent;
+    otherData?: Record<string, any>;
+    signal?: AbortSignal;
+  },
+) {
+  const { onUploadProgress, signal, otherData = {} } = options ?? {};
+  return requestClient.upload<UploadResult>(
+    '/resource/oss/upload',
+    { file, ...otherData },
+    { onUploadProgress, signal, timeout: 60_000 },
+  );
+}
+
+/**
+ * 上传api type
+ */
+export type UploadApi = typeof uploadApi;

apps/web-antd/src/api/helper.ts

@@ -3,14 +3,14 @@ import { requestClient } from './request';
 /**
  * @description:  contentType
  */
-export enum ContentTypeEnum {
+export const ContentTypeEnum = {
   // form-data  upload
-  FORM_DATA = 'multipart/form-data;charset=UTF-8',
+  FORM_DATA: 'multipart/form-data;charset=UTF-8',
   // form-data qs
-  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+  FORM_URLENCODED: 'application/x-www-form-urlencoded;charset=UTF-8',
   // json
-  JSON = 'application/json;charset=UTF-8',
-}
+  JSON: 'application/json;charset=UTF-8',
+} as const;
 
 /**
  * 通用下载接口 封装一层

apps/web-antd/src/api/monitor/logininfo/model.d.ts

@@ -9,4 +9,5 @@ export interface LoginLog {
   os: string;
   msg: string;
   loginTime: string;
+  clientKey: string;
 }

apps/web-antd/src/api/monitor/online/index.ts

@@ -17,6 +17,11 @@ export function onlineDeviceList() {
   return requestClient.get<PageResult<OnlineUser>>(Api.root);
 }
 
+/**
+ * 这里的分页参数无效 返回的是全部的分页
+ * @param params 请求参数
+ * @returns 结果
+ */
 export function onlineList(params?: PageQuery) {
   return requestClient.get<PageResult<OnlineUser>>(Api.onlineList, { params });
 }
@@ -36,5 +41,5 @@ export function forceLogout(tokenId: string) {
  * @returns void
  */
 export function forceLogout2(tokenId: string) {
-  return requestClient.postWithMsg<void>(`${Api.root}/${tokenId}`);
+  return requestClient.deleteWithMsg<void>(`${Api.root}/myself/${tokenId}`);
 }

apps/web-antd/src/api/monitor/operlog/index.ts

@@ -12,20 +12,36 @@ enum Api {
   root = '/monitor/operlog',
 }
 
+/**
+ * 操作日志分页
+ * @param params 查询参数
+ * @returns 分页结果
+ */
 export function operLogList(params?: PageQuery) {
   return requestClient.get<PageResult<OperationLog>>(Api.operLogList, {
     params,
   });
 }
 
+/**
+ * 删除操作日志
+ * @param operIds id/ids
+ */
 export function operLogDelete(operIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${operIds}`);
 }
 
+/**
+ * 清空全部分页日志
+ */
 export function operLogClean() {
   return requestClient.deleteWithMsg<void>(Api.operLogClean);
 }
 
-export function operLogExport(data: any) {
+/**
+ * 导出操作日志
+ * @param data 查询参数
+ */
+export function operLogExport(data: Partial<OperationLog>) {
   return commonExport(Api.operLogExport, data);
 }

apps/web-antd/src/api/monitor/operlog/model.d.ts

@@ -2,7 +2,7 @@ export interface OperationLog {
   operId: string;
   tenantId: string;
   title: string;
-  businessType: number;
+  businessType: string;
   businessTypes?: any;
   method: string;
   requestMethod: string;
@@ -14,7 +14,7 @@ export interface OperationLog {
   operLocation: string;
   operParam: string;
   jsonResult: string;
-  status: number;
+  status: string;
   errorMsg: string;
   operTime: string;
   costTime: number;

apps/web-antd/src/api/request.ts

@@ -1,6 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
+
 import type { HttpResponse } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
@@ -10,6 +11,7 @@ import {
   authenticateResponseInterceptor,
   errorMessageResponseInterceptor,
   RequestClient,
+  stringify,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
@@ -91,8 +93,28 @@ function createRequestClient(baseURL: string) {
       const language = preferences.app.locale.replace('-', '_');
       config.headers['Accept-Language'] = language;
       config.headers['Content-Language'] = language;
-      // 添加全局clientId
-      config.headers.clientId = clientId;
+      /**
+       * 添加全局clientId
+       * 关于header的clientId被错误绑定到实体类
+       * https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC0BDS
+       */
+      config.headers.ClientID = clientId;
+      /**
+       * 格式化get/delete参数
+       * 如果包含自定义的paramsSerializer则不走此逻辑
+       */
+      if (
+        ['DELETE', 'GET'].includes(config.method?.toUpperCase() || '') &&
+        config.params &&
+        !config.paramsSerializer
+      ) {
+        /**
+         * 1. 格式化参数 微服务在传递区间时间选择(后端的params Map类型参数)需要格式化key 否则接收不到
+         * 2. 数组参数需要格式化 后端才能正常接收 会变成arr=1&arr=2&arr=3的格式来接收
+         */
+        config.paramsSerializer = (params) =>
+          stringify(params, { arrayFormat: 'repeat' });
+      }
 
       const { encrypt } = config;
       // 全局开启请求加密功能 && 该请求开启 && 是post/put请求
@@ -116,14 +138,14 @@ function createRequestClient(baseURL: string) {
   });
 
   // 通用的错误处理, 如果没有进入上面的错误处理逻辑，就会进入这里
-  // 主要处理http状态码不为200的情况 必须放在在下面的响应拦截器之前
+  // 主要处理http状态码不为200(如网络异常/离线)的情况 必须放在在下面的响应拦截器之前
   client.addResponseInterceptor(
     errorMessageResponseInterceptor((msg: string) => message.error(msg)),
   );
 
   client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const encryptKey = (response.headers || {})['encrypt-key'];
+    fulfilled: async (response) => {
+      const encryptKey = (response.headers ?? {})['encrypt-key'];
       if (encryptKey) {
         /** RSA私钥解密 拿到解密秘钥的base64 */
         const base64Str = encryptUtil.decrypt(encryptKey);
@@ -146,39 +168,57 @@ function createRequestClient(baseURL: string) {
       // 不进行任何处理，直接返回
       // 用于页面代码可能需要直接获取code，data，message这些信息时开启
       if (!isTransformResponse) {
-        return response.data;
+        /**
+         * 需要判断下载二进制的情况 正常是返回二进制 报错会返回json
+         * 当type为blob且content-type为application/json时 则判断已经下载出错
+         */
+        if (
+          response.config.responseType === 'blob' &&
+          response.headers['content-type']?.includes?.('application/json')
+        ) {
+          // 这时候的data为blob类型
+          const blob = response.data as unknown as Blob;
+          // 拿到字符串转json对象
+          response.data = JSON.parse(await blob.text());
+          // 然后按正常逻辑执行下面的代码(判断业务状态码)
+        } else {
+          // 其他情况 直接返回
+          return response.data;
+        }
       }
 
       const axiosResponseData = response.data;
       if (!axiosResponseData) {
-        throw new Error($t('fallback.http.apiRequestFailed'));
+        throw new Error($t('http.apiRequestFailed'));
       }
 
-      //  ruoyi-plus没有采用严格的{code, msg, data}模式
+      // 后端并没有采用严格的{code, msg, data}模式
       const { code, data, msg, ...other } = axiosResponseData;
 
-      // 这里逻辑可以根据项目进行修改
+      // 业务状态码为200则请求成功
       const hasSuccess = Reflect.has(axiosResponseData, 'code') && code === 200;
       if (hasSuccess) {
         let successMsg = msg;
 
         if (isNull(successMsg) || isEmpty(successMsg)) {
-          successMsg = $t(`fallback.http.operationSuccess`);
+          successMsg = $t(`http.operationSuccess`);
         }
 
         if (response.config.successMessageMode === 'modal') {
           Modal.success({
             content: successMsg,
-            title: $t('fallback.http.successTip'),
+            title: $t('http.successTip'),
           });
         } else if (response.config.successMessageMode === 'message') {
           message.success(successMsg);
         }
+        // 分页情况下为code msg rows total 并没有data字段
         // 如果有data 直接返回data 没有data将剩余参数(...other)封装为data返回
-        // 需要考虑data为null的情况(比如查询为空)
+        // 需要考虑data为null的情况(比如查询为空) 所以这里直接判断undefined
         if (data !== undefined) {
           return data;
         }
+        // 没有data 将其他参数包装为data
         return other;
       }
       // 在此处根据自己项目的实际情况对不同的code执行不同的操作
@@ -188,17 +228,17 @@ function createRequestClient(baseURL: string) {
         case 401: {
           // 已经在登出过程中 不再执行
           if (isLogoutProcessing) {
-            return;
+            throw new Error(timeoutMsg);
           }
           isLogoutProcessing = true;
-          const _msg = '登录超时, 请重新登录';
+          const _msg = $t('http.loginTimeout');
           const userStore = useAuthStore();
           userStore.logout().finally(() => {
             message.error(_msg);
             isLogoutProcessing = false;
           });
           // 不再执行下面逻辑
-          return;
+          throw new Error(_msg);
         }
         default: {
           if (msg) {
@@ -212,13 +252,13 @@ function createRequestClient(baseURL: string) {
       if (response.config.errorMessageMode === 'modal') {
         Modal.error({
           content: timeoutMsg,
-          title: $t('fallback.http.errorTip'),
+          title: $t('http.errorTip'),
         });
       } else if (response.config.errorMessageMode === 'message') {
         message.error(timeoutMsg);
       }
 
-      throw new Error(timeoutMsg || $t('fallback.http.apiRequestFailed'));
+      throw new Error(timeoutMsg || $t('http.apiRequestFailed'));
     },
   });
 

apps/web-antd/src/api/system/client/index.ts

@@ -12,30 +12,64 @@ enum Api {
   root = '/system/client',
 }
 
+/**
+ * 查询客户端分页列表
+ * @param params 请求参数
+ * @returns 列表
+ */
 export function clientList(params?: PageQuery) {
   return requestClient.get<PageResult<Client>>(Api.clientList, { params });
 }
 
-export function clientExport(data: any) {
+/**
+ * 导出客户端excel
+ * @param data 请求参数
+ */
+export function clientExport(data: Partial<Client>) {
   return commonExport(Api.clientExport, data);
 }
 
+/**
+ * 客户端详情
+ * @param id id
+ * @returns 详情
+ */
 export function clientInfo(id: ID) {
   return requestClient.get<Client>(`${Api.root}/${id}`);
 }
 
-export function clientAdd(data: any) {
+/**
+ * 客户端新增
+ * @param data 参数
+ */
+export function clientAdd(data: Partial<Client>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
-export function clientUpdate(data: any) {
+/**
+ * 客户端修改
+ * @param data 参数
+ */
+export function clientUpdate(data: Partial<Client>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
+/**
+ * 客户端状态修改
+ * @param data 状态
+ */
 export function clientChangeStatus(data: any) {
-  return requestClient.putWithMsg<void>(Api.root, data);
+  const requestData = {
+    clientId: data.clientId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.clientChangeStatus, requestData);
 }
 
+/**
+ * 客户端删除
+ * @param ids id集合
+ */
 export function clientRemove(ids: IDS) {
-  return requestClient.deleteWithMsg(`${Api.root}/${ids}`);
+  return requestClient.deleteWithMsg<void>(`${Api.root}/${ids}`);
 }

apps/web-antd/src/api/system/config/index.ts

@@ -1,4 +1,4 @@
-import type { Config } from './model';
+import type { SysConfig } from './model';
 
 import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
@@ -13,15 +13,24 @@ enum Api {
   root = '/system/config',
 }
 
+/**
+ * 系统参数分页列表
+ * @param params 请求参数
+ * @returns 列表
+ */
 export function configList(params?: PageQuery) {
-  return requestClient.get<PageResult<Config>>(Api.configList, { params });
+  return requestClient.get<PageResult<SysConfig>>(Api.configList, { params });
 }
 
 export function configInfo(configId: ID) {
-  return requestClient.get<Config>(`${Api.root}/${configId}`);
+  return requestClient.get<SysConfig>(`${Api.root}/${configId}`);
 }
 
-export function configExport(data: any) {
+/**
+ * 导出
+ * @param data 参数
+ */
+export function configExport(data: Partial<SysConfig>) {
   return commonExport(Api.configExport, data);
 }
 
@@ -33,14 +42,26 @@ export function configRefreshCache() {
   return requestClient.deleteWithMsg<void>(Api.configRefreshCache);
 }
 
-export function configUpdate(data: any) {
+/**
+ * 更新系统配置
+ * @param data 参数
+ */
+export function configUpdate(data: Partial<SysConfig>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
-export function configAdd(data: any) {
+/**
+ * 新增系统配置
+ * @param data 参数
+ */
+export function configAdd(data: Partial<SysConfig>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
+/**
+ * 删除配置
+ * @param configIds ids
+ */
 export function configRemove(configIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${configIds}`);
 }

apps/web-antd/src/api/system/config/model.d.ts

@@ -1,4 +1,4 @@
-export interface Config {
+export interface SysConfig {
   configId: number;
   configName: string;
   configKey: string;

apps/web-antd/src/api/system/dept/index.ts

@@ -10,7 +10,11 @@ enum Api {
   root = '/system/dept',
 }
 
-export function deptList(params?: any) {
+/**
+ * 部门列表
+ * @returns list
+ */
+export function deptList(params?: { deptName?: string; status?: string }) {
   return requestClient.get<Dept[]>(Api.deptList, { params });
 }
 
@@ -23,15 +27,28 @@ export function deptNodeList(deptId: ID) {
   return requestClient.get<Dept[]>(`${Api.deptNodeInfo}/${deptId}`);
 }
 
+/**
+ * 部门详情
+ * @param deptId 部门id
+ * @returns 部门信息
+ */
 export function deptInfo(deptId: ID) {
   return requestClient.get<Dept>(`${Api.root}/${deptId}`);
 }
 
-export function deptAdd(data: any) {
+/**
+ * 部门新增
+ * @param data 参数
+ */
+export function deptAdd(data: Partial<Dept>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
-export function deptUpdate(data: any) {
+/**
+ * 部门更新
+ * @param data 参数
+ */
+export function deptUpdate(data: Partial<Dept>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 

apps/web-antd/src/api/system/dict/dict-data.ts

@@ -34,7 +34,7 @@ export function dictDataList(params?: PageQuery) {
  * @param data 表单参数
  * @returns blob
  */
-export function dictDataExport(data: any) {
+export function dictDataExport(data: Partial<DictData>) {
   return commonExport(Api.dictDataExport, data);
 }
 
@@ -52,7 +52,7 @@ export function dictDataRemove(dictIds: IDS) {
  * @param data 表单参数
  * @returns void
  */
-export function dictDataAdd(data: any) {
+export function dictDataAdd(data: Partial<DictData>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
@@ -61,7 +61,7 @@ export function dictDataAdd(data: any) {
  * @param data 表单参数
  * @returns void
  */
-export function dictDataUpdate(data: any) {
+export function dictDataUpdate(data: Partial<DictData>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 

apps/web-antd/src/api/system/dict/dict-type.ts

@@ -27,7 +27,7 @@ export function dictTypeList(params?: PageQuery) {
  * @param data 表单参数
  * @returns blob
  */
-export function dictTypeExport(data: any) {
+export function dictTypeExport(data: Partial<DictType>) {
   return commonExport(Api.dictTypeExport, data);
 }
 
@@ -53,7 +53,7 @@ export function refreshDictTypeCache() {
  * @param data 表单参数
  * @returns void
  */
-export function dictTypeAdd(data: any) {
+export function dictTypeAdd(data: Partial<DictType>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
@@ -62,7 +62,7 @@ export function dictTypeAdd(data: any) {
  * @param data 表单参数
  * @returns void
  */
-export function dictTypeUpdate(data: any) {
+export function dictTypeUpdate(data: Partial<DictType>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
@@ -76,6 +76,7 @@ export function dictTypeInfo(dictId: ID) {
 }
 
 /**
+ * 这个在ele用到 v5用不上
  * 下拉框  返回值和list一样
  * @returns options
  */

apps/web-antd/src/api/system/menu/index.ts

@@ -1,4 +1,4 @@
-import type { Menu, MenuOption, MenuResp } from './model';
+import type { Menu, MenuOption, MenuQuery, MenuResp } from './model';
 
 import type { ID, IDS } from '#/api/common';
 
@@ -12,22 +12,44 @@ enum Api {
   tenantPackageMenuTreeselect = '/system/menu/tenantPackageMenuTreeselect',
 }
 
-export function menuList(params?: any) {
+/**
+ * 菜单列表
+ * @param params 参数
+ * @returns 列表
+ */
+export function menuList(params?: MenuQuery) {
   return requestClient.get<Menu[]>(Api.menuList, { params });
 }
 
+/**
+ * 菜单详情
+ * @param menuId 菜单id
+ * @returns 菜单详情
+ */
 export function menuInfo(menuId: ID) {
   return requestClient.get<Menu>(`${Api.root}/${menuId}`);
 }
 
-export function menuAdd(data: any) {
+/**
+ * 菜单新增
+ * @param data 参数
+ */
+export function menuAdd(data: Partial<Menu>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
-export function menuUpdate(data: any) {
+/**
+ * 菜单更新
+ * @param data 参数
+ */
+export function menuUpdate(data: Partial<Menu>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
+/**
+ * 菜单删除
+ * @param menuIds ids
+ */
 export function menuRemove(menuIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${menuIds}`);
 }

apps/web-antd/src/api/system/menu/model.d.ts

@@ -33,6 +33,8 @@ export interface MenuOption {
   weight: number;
   children: MenuOption[];
   key: string; // 实际上不存在 ide报错
+  menuType: string;
+  icon: string;
 }
 
 /**
@@ -44,3 +46,12 @@ export interface MenuResp {
   checkedKeys: number[];
   menus: MenuOption[];
 }
+
+/**
+ * 菜单表单查询
+ */
+export interface MenuQuery {
+  menuName?: string;
+  visible?: string;
+  status?: string;
+}

apps/web-antd/src/api/system/notice/index.ts

@@ -9,22 +9,44 @@ enum Api {
   root = '/system/notice',
 }
 
+/**
+ * 通知公告分页
+ * @param params 分页参数
+ * @returns 分页结果
+ */
 export function noticeList(params?: PageQuery) {
   return requestClient.get<Notice[]>(Api.noticeList, { params });
 }
 
+/**
+ * 通知公告详情
+ * @param noticeId id
+ * @returns 详情
+ */
 export function noticeInfo(noticeId: ID) {
   return requestClient.get<Notice>(`${Api.root}/${noticeId}`);
 }
 
-export function noticeAdd(data: any) {
+/**
+ * 通知公告新增
+ * @param data 参数
+ */
+export function noticeAdd(data: Partial<Notice>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
+/**
+ * 通知公告更新
+ * @param data 参数
+ */
 export function noticeUpdate(data: any) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
+/**
+ * 通知公告删除
+ * @param noticeIds ids
+ */
 export function noticeRemove(noticeIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${noticeIds}`);
 }

apps/web-antd/src/api/system/oss-config/index.ts

@@ -21,12 +21,12 @@ export function ossConfigInfo(ossConfigId: ID) {
 }
 
 // 添加新的OSS配置
-export function ossConfigAdd(data: any) {
+export function ossConfigAdd(data: Partial<OssConfig>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
 // 更新现有的OSS配置
-export function ossConfigUpdate(data: any) {
+export function ossConfigUpdate(data: Partial<OssConfig>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
@@ -37,5 +37,9 @@ export function ossConfigRemove(ossConfigIds: IDS) {
 
 // 更改OSS配置的状态
 export function ossConfigChangeStatus(data: any) {
-  return requestClient.putWithMsg(Api.ossConfigChangeStatus, data);
+  const requestData = {
+    ossConfigId: data.ossConfigId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg(Api.ossConfigChangeStatus, requestData);
 }

apps/web-antd/src/api/system/oss/index.ts

@@ -1,3 +1,5 @@
+import type { AxiosRequestConfig } from '@vben/request';
+
 import type { OssFile } from './model';
 
 import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
@@ -13,20 +15,30 @@ enum Api {
   root = '/resource/oss',
 }
 
+/**
+ * 文件list
+ * @param params 参数
+ * @returns 分页
+ */
 export function ossList(params?: PageQuery) {
   return requestClient.get<PageResult<OssFile>>(Api.ossList, { params });
 }
 
-export function ossInfo(ossIds: IDS) {
-  return requestClient.get<OssFile>(`${Api.ossInfo}/${ossIds}`);
+/**
+ * 查询文件信息 返回为数组
+ * @param ossIds id数组
+ * @returns 信息数组
+ */
+export function ossInfo(ossIds: ID | IDS) {
+  return requestClient.get<OssFile[]>(`${Api.ossInfo}/${ossIds}`);
 }
 
 /**
- * @deprecated
+ * @deprecated 使用apps/web-antd/src/api/core/upload.ts uploadApi方法
  * @param file 文件
  * @returns void
  */
-export function ossUpload(file: any) {
+export function ossUpload(file: Blob | File) {
   const formData = new FormData();
   formData.append('file', file);
   return requestClient.postWithMsg(Api.ossUpload, formData, {
@@ -38,16 +50,26 @@ export function ossUpload(file: any) {
 /**
  * 下载文件  返回为二进制
  * @param ossId ossId
+ * @param onDownloadProgress 下载进度(可选)
  * @returns blob
  */
-export function ossDownload(ossId: ID) {
+export function ossDownload(
+  ossId: ID,
+  onDownloadProgress?: AxiosRequestConfig['onDownloadProgress'],
+) {
   return requestClient.get<Blob>(`${Api.ossDownload}/${ossId}`, {
     responseType: 'blob',
     timeout: 30 * 1000,
     isTransformResponse: false,
+    onDownloadProgress,
   });
 }
 
+/**
+ * 删除文件
+ * @param ossIds id数组
+ * @returns void
+ */
 export function ossRemove(ossIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${ossIds}`);
 }

apps/web-antd/src/api/system/post/index.ts

@@ -21,26 +21,56 @@ export function postList(params?: PageQuery) {
   return requestClient.get<Post[]>(Api.postList, { params });
 }
 
-export function postExport(data: any) {
+/**
+ * 导出岗位信息
+ * @param data 请求参数
+ * @returns blob
+ */
+export function postExport(data: Partial<Post>) {
   return commonExport(Api.postExport, data);
 }
 
+/**
+ * 查询岗位信息
+ * @param postId id
+ * @returns 岗位信息
+ */
 export function postInfo(postId: ID) {
   return requestClient.get<Post>(`${Api.root}/${postId}`);
 }
 
-export function postAdd(data: any) {
+/**
+ * 岗位新增
+ * @param data 参数
+ * @returns void
+ */
+export function postAdd(data: Partial<Post>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
-export function postUpdate(data: any) {
+/**
+ * 岗位更新
+ * @param data 参数
+ * @returns void
+ */
+export function postUpdate(data: Partial<Post>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
+/**
+ * 岗位删除
+ * @param postIds ids
+ * @returns void
+ */
 export function postRemove(postIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${postIds}`);
 }
 
+/**
+ * 根据部门id获取岗位下拉列表
+ * @param deptId 部门id
+ * @returns 岗位
+ */
 export function postOptionSelect(deptId: ID) {
   return requestClient.get<Post[]>(Api.postSelect, { params: { deptId } });
 }

apps/web-antd/src/api/system/role/index.ts

@@ -1,3 +1,4 @@
+import type { User } from '../user/model';
 import type { DeptResp, Role } from './model';
 
 import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
@@ -20,30 +21,69 @@ enum Api {
   root = '/system/role',
 }
 
+/**
+ * 查询角色分页列表
+ * @param params 搜索条件
+ * @returns 分页列表
+ */
 export function roleList(params?: PageQuery) {
   return requestClient.get<PageResult<Role>>(Api.roleList, { params });
 }
 
-export function roleExport(data: any) {
+/**
+ * 导出角色信息
+ * @param data 查询参数
+ * @returns blob
+ */
+export function roleExport(data: Partial<Role>) {
   return commonExport(Api.roleExport, data);
 }
 
+/**
+ * 查询角色信息
+ * @param roleId 角色id
+ * @returns 角色信息
+ */
 export function roleInfo(roleId: ID) {
   return requestClient.get<Role>(`${Api.root}/${roleId}`);
 }
 
-export function roleAdd(data: any) {
+/**
+ * 角色新增
+ * @param data 参数
+ * @returns void
+ */
+export function roleAdd(data: Partial<Role>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
-export function roleUpdate(data: any) {
+/**
+ * 角色更新
+ * @param data 参数
+ * @returns void
+ */
+export function roleUpdate(data: Partial<Role>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
-export function roleChangeStatus(data: any) {
-  return requestClient.putWithMsg<void>(Api.roleChangeStatus, data);
+/**
+ * 修改角色状态
+ * @param data 参数
+ * @returns void
+ */
+export function roleChangeStatus(data: Partial<Role>) {
+  const requestData = {
+    roleId: data.roleId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.roleChangeStatus, requestData);
 }
 
+/**
+ * 角色删除
+ * @param roleIds ids
+ * @returns void
+ */
 export function roleRemove(roleIds: IDS) {
   return requestClient.deleteWithMsg<void>(`${Api.root}/${roleIds}`);
 }
@@ -57,12 +97,20 @@ export function roleDataScope(data: any) {
   return requestClient.putWithMsg<void>(Api.roleDataScope, data);
 }
 
+/**
+ * @deprecated 全局并没有用到这个方法
+ */
 export function roleOptionSelect(params?: any) {
   return requestClient.get(Api.roleOptionSelect, { params });
 }
 
-export function roleAllocatedList(params: any) {
-  return requestClient.get(Api.roleAllocatedList, { params });
+/**
+ * 已分配角色的用户分页
+ * @param params 请求参数
+ * @returns 分页
+ */
+export function roleAllocatedList(params?: PageQuery) {
+  return requestClient.get<PageResult<User>>(Api.roleAllocatedList, { params });
 }
 
 /**
@@ -71,28 +119,26 @@ export function roleAllocatedList(params: any) {
  * @returns void
  */
 export function roleUnallocatedList(params: any) {
-  return requestClient.get(Api.roleUnallocatedList, { params });
+  return requestClient.get<PageResult<User>>(Api.roleUnallocatedList, {
+    params,
+  });
 }
 
 /**
- * 取消授权
- * @param data {userId: 2, roleId: "2"}
+ * 取消用户角色授权
  * @returns void
  */
-export function roleAuthCancel(data: any) {
+export function roleAuthCancel(data: { roleId: ID; userId: ID }) {
   return requestClient.putWithMsg<void>(Api.roleAuthCancel, data);
 }
 
 /**
  * 批量取消授权
- * @param roleId
- * @param userIds
+ * @param roleId 角色ID
+ * @param userIds 用户ID集合
  * @returns void
  */
-export function roleAuthCancelAll(
-  roleId: number | string,
-  userIds: number[] | string[],
-) {
+export function roleAuthCancelAll(roleId: ID, userIds: IDS) {
   return requestClient.putWithMsg<void>(
     `${Api.roleAuthCancelAll}?roleId=${roleId}&userIds=${userIds.join(',')}`,
   );
@@ -100,21 +146,18 @@ export function roleAuthCancelAll(
 
 /**
  * 批量授权用户
- * @param roleId
- * @param userIds
+ * @param roleId 角色ID
+ * @param userIds 用户ID集合
  * @returns void
  */
-export function roleSelectAll(
-  roleId: number | string,
-  userIds: number[] | string[],
-) {
+export function roleSelectAll(roleId: ID, userIds: IDS) {
   return requestClient.putWithMsg<void>(
     `${Api.roleAuthSelectAll}?roleId=${roleId}&userIds=${userIds.join(',')}`,
   );
 }
 
 /**
- * 部门树
+ * 根据角色id获取部门树
  * @param roleId 角色id
  * @returns DeptResp
  */

apps/web-antd/src/api/system/social/index.ts

@@ -1,5 +1,7 @@
 import type { SocialInfo } from './model';
 
+import type { ID } from '#/api/common';
+
 import { requestClient } from '#/api/request';
 
 enum Api {
@@ -15,6 +17,9 @@ export function socialList() {
   return requestClient.get<SocialInfo[]>(Api.socialList);
 }
 
-export function socialInfo(id: number | string) {
+/**
+ * @deprecated 并没有用到这个方法
+ */
+export function socialInfo(id: ID) {
   return requestClient.get(`${Api.root}/${id}`);
 }

apps/web-antd/src/api/system/tenant-package/index.ts

@@ -13,37 +13,79 @@ enum Api {
   root = '/system/tenant/package',
 }
 
+/**
+ * 租户套餐分页列表
+ * @param params 请求参数
+ * @returns 分页列表
+ */
 export function packageList(params?: PageQuery) {
   return requestClient.get<PageResult<TenantPackage>>(Api.packageList, {
     params,
   });
 }
 
-// 下拉框
+/**
+ * 租户套餐下拉框
+ * @returns 下拉框
+ */
 export function packageSelectList() {
   return requestClient.get<TenantPackage[]>(Api.packageSelectList);
 }
 
-export function packageExport(data: any) {
+/**
+ * 租户套餐导出
+ * @param data 参数
+ * @returns blob
+ */
+export function packageExport(data: Partial<TenantPackage>) {
   return commonExport(Api.packageExport, data);
 }
 
+/**
+ * 租户套餐信息
+ * @param id id
+ * @returns 信息
+ */
 export function packageInfo(id: ID) {
   return requestClient.get<TenantPackage>(`${Api.root}/${id}`);
 }
 
-export function packageAdd(data: any) {
+/**
+ * 租户套餐新增
+ * @param data data
+ * @returns void
+ */
+export function packageAdd(data: Partial<TenantPackage>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
-export function packageUpdate(data: any) {
+/**
+ * 租户套餐更新
+ * @param data data
+ * @returns void
+ */
+export function packageUpdate(data: Partial<TenantPackage>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
-export function packageChangeStatus(data: any) {
-  return requestClient.putWithMsg(Api.packageChangeStatus, data);
+/**
+ * 租户套餐状态变更
+ * @param data data
+ * @returns void
+ */
+export function packageChangeStatus(data: Partial<TenantPackage>) {
+  const packageId = {
+    packageId: data.packageId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.packageChangeStatus, packageId);
 }
 
+/**
+ * 租户套餐移除
+ * @param ids ids
+ * @returns void
+ */
 export function packageRemove(ids: IDS) {
-  return requestClient.deleteWithMsg(`${Api.root}/${ids}`);
+  return requestClient.deleteWithMsg<void>(`${Api.root}/${ids}`);
 }

apps/web-antd/src/api/system/tenant/index.ts

@@ -16,14 +16,29 @@ enum Api {
   tenantSyncPackage = '/system/tenant/syncTenantPackage',
 }
 
+/**
+ * 查询租户分页列表
+ * @param params 参数
+ * @returns 分页
+ */
 export function tenantList(params?: PageQuery) {
   return requestClient.get<Tenant[]>(Api.tenantList, { params });
 }
 
-export function tenantExport(data: any) {
+/**
+ * 租户导出
+ * @param data data
+ * @returns void
+ */
+export function tenantExport(data: Partial<Tenant>) {
   return commonExport(Api.tenantExport, data);
 }
 
+/**
+ * 查询租户信息
+ * @param id id
+ * @returns 租户信息
+ */
 export function tenantInfo(id: ID) {
   return requestClient.get<Tenant>(`${Api.root}/${id}`);
 }
@@ -33,18 +48,38 @@ export function tenantInfo(id: ID) {
  * @param data data
  * @returns void
  */
-export function tenantAdd(data: any) {
+export function tenantAdd(data: Partial<Tenant>) {
   return requestClient.postWithMsg<void>(Api.root, data, { encrypt: true });
 }
 
-export function tenantUpdate(data: any) {
+/**
+ * 租户更新
+ * @param data data
+ * @returns void
+ */
+export function tenantUpdate(data: Partial<Tenant>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
-export function tenantStatusChange(data: any) {
-  return requestClient.putWithMsg(Api.tenantStatus, data);
+/**
+ * 租户状态更新
+ * @param data data
+ * @returns void
+ */
+export function tenantStatusChange(data: Partial<Tenant>) {
+  const requestData = {
+    id: data.id,
+    tenantId: data.tenantId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg(Api.tenantStatus, requestData);
 }
 
+/**
+ * 租户删除
+ * @param ids ids
+ * @returns void
+ */
 export function tenantRemove(ids: IDS) {
   return requestClient.deleteWithMsg(`${Api.root}/${ids}`);
 }
@@ -70,17 +105,12 @@ export function tenantDynamicClear() {
  * 租户套餐同步
  * @param tenantId 租户id
  * @param packageId 套餐id
- * @param showMsg 是否显示成功信息
  * @returns void
  */
-export function tenantSyncPackage(
-  tenantId: string,
-  packageId: string,
-  showMsg = true,
-) {
+export function tenantSyncPackage(tenantId: string, packageId: string) {
   return requestClient.get<void>(Api.tenantSyncPackage, {
     params: { packageId, tenantId },
-    successMessageMode: showMsg ? 'message' : 'none',
+    successMessageMode: 'message',
   });
 }
 

apps/web-antd/src/api/system/tenant/model.d.ts

@@ -9,7 +9,7 @@ export interface Tenant {
   id: number;
   intro: string;
   licenseNumber?: any;
-  packageId?: string;
+  packageId: string;
   remark?: string;
   status: string;
   tenantId: string;

apps/web-antd/src/api/system/user/index.ts

@@ -38,7 +38,7 @@ export function userList(params?: PageQuery) {
  * @param data data
  * @returns blob
  */
-export function userExport(data: any) {
+export function userExport(data: Partial<User>) {
   return commonExport(Api.userExport, data);
 }
 
@@ -91,7 +91,7 @@ export function findUserInfo(userId?: ID) {
  * @param data data
  * @returns void
  */
-export function userAdd(data: any) {
+export function userAdd(data: Partial<User>) {
   return requestClient.postWithMsg<void>(Api.root, data);
 }
 
@@ -100,7 +100,7 @@ export function userAdd(data: any) {
  * @param data data
  * @returns void
  */
-export function userUpdate(data: any) {
+export function userUpdate(data: Partial<User>) {
   return requestClient.putWithMsg<void>(Api.root, data);
 }
 
@@ -109,8 +109,12 @@ export function userUpdate(data: any) {
  * @param data data
  * @returns void
  */
-export function userStatusChange(data: any) {
-  return requestClient.putWithMsg<void>(Api.userStatusChange, data);
+export function userStatusChange(data: Partial<User>) {
+  const requestData = {
+    userId: data.userId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.userStatusChange, requestData);
 }
 
 /**

apps/web-antd/src/api/system/user/model.d.ts

@@ -66,6 +66,7 @@ export interface User {
   roleIds?: string[];
   postIds?: number[];
   roleId: string;
+  deptName: string;
 }
 
 export interface Post {

apps/web-antd/src/api/tool/gen/index.ts

@@ -1,6 +1,6 @@
 import type { GenInfo } from './model';
 
-import type { ID, IDS } from '#/api/common';
+import type { ID, IDS, PageQuery } from '#/api/common';
 
 import { ContentTypeEnum } from '#/api/helper';
 import { requestClient } from '#/api/request';
@@ -19,7 +19,7 @@ enum Api {
   syncDb = '/tool/gen/synchDb',
 }
 // 查询代码生成列表
-export function generatedList(params: any) {
+export function generatedList(params?: PageQuery) {
   return requestClient.get(Api.generatedList, { params });
 }
 
@@ -29,7 +29,7 @@ export function genInfo(tableId: ID) {
 }
 
 // 查询数据库列表
-export function readyToGenList(params: any) {
+export function readyToGenList(params?: PageQuery) {
   return requestClient.get(Api.readyToGenList, { params });
 }
 
@@ -63,6 +63,7 @@ export function editSave(data: any) {
 export function genRemove(tableIds: IDS) {
   return requestClient.deleteWithMsg(`${Api.root}/${tableIds}`);
 }
+
 // 预览代码
 export function previewCode(tableId: ID) {
   return requestClient.get<{ [key: string]: string }>(
@@ -76,8 +77,8 @@ export function genDownload(tableId: ID) {
 }
 
 // 生成代码（自定义路径）
-export function genDownloadWithPath(tableId: ID) {
-  return requestClient.get(`${Api.download}/${tableId}`);
+export function genWithPath(tableId: ID) {
+  return requestClient.get<void>(`${Api.genCode}/${tableId}`);
 }
 
 // 同步数据库

apps/web-antd/src/api/tool/gen/model.d.ts

@@ -177,6 +177,7 @@ export interface Info {
   // 树表需要添加此属性
   params?: any;
   popupComponent?: string;
+  formComponent?: string;
 }
 
 export interface GenInfo {

apps/web-antd/src/api/workflow/category/index.ts

@@ -1,9 +1,22 @@
-import type { CategoryForm, CategoryQuery, CategoryVO } from './model';
+import type {
+  CategoryForm,
+  CategoryQuery,
+  CategoryTree,
+  CategoryVO,
+} from './model';
 
 import type { ID, IDS } from '#/api/common';
 
 import { requestClient } from '#/api/request';
 
+/**
+ * 获取流程分类树列表
+ * @returns tree
+ */
+export function categoryTree() {
+  return requestClient.get<CategoryTree[]>('/workflow/category/categoryTree');
+}
+
 /**
  * 查询流程分类列表
  * @param params

apps/web-antd/src/api/workflow/category/model.d.ts

@@ -30,6 +30,7 @@ export interface CategoryVO {
    * 子对象
    */
   children: CategoryVO[];
+  key: string;
 }
 
 export interface CategoryForm extends BaseEntity {
@@ -85,3 +86,12 @@ export interface CategoryQuery {
    */
   params?: any;
 }
+
+export interface CategoryTree {
+  id: number;
+  parentId: number;
+  label: string;
+  weight: number;
+  children: CategoryTree[];
+  key: string;
+}

apps/web-antd/src/api/workflow/definition/index.ts

@@ -0,0 +1,155 @@
+import type { ProcessDefinition } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 全部的流程定义
+ * @param params 查询参数
+ * @returns 分页
+ */
+export function workflowDefinitionList(params?: PageQuery) {
+  return requestClient.get<PageResult<ProcessDefinition>>(
+    '/workflow/definition/list',
+    { params },
+  );
+}
+
+/**
+ * 未发布的流程定义
+ * @param params 查询参数
+ * @returns 分页
+ */
+export function unPublishList(params?: PageQuery) {
+  return requestClient.get<PageResult<ProcessDefinition>>(
+    '/workflow/definition/unPublishList',
+    { params },
+  );
+}
+
+/**
+ * 获取历史流程定义列表
+ * @param flowCode
+ * @returns ProcessDefinition[]
+ */
+export function getHisListByKey(flowCode: string) {
+  return requestClient.get<ProcessDefinition[]>(
+    `/workflow/definition/getHisListByKey/${flowCode}`,
+  );
+}
+
+/**
+ * 获取流程定义详细信息
+ * @param id id
+ * @returns ProcessDefinition
+ */
+export function workflowDefinitionInfo(id: ID) {
+  return requestClient.get<ProcessDefinition>(`/workflow/definition/${id}`);
+}
+
+/**
+ * 新增流程定义
+ * @param data
+ */
+export function workflowDefinitionAdd(data: any) {
+  return requestClient.postWithMsg<void>('/workflow/definition', data);
+}
+
+/**
+ * 更新流程定义
+ * @param data
+ */
+export function workflowDefinitionUpdate(data: any) {
+  return requestClient.putWithMsg<void>('/workflow/definition', data);
+}
+
+/**
+ * 发布流程定义
+ * @param id id
+ * @returns boolean
+ */
+export function workflowDefinitionPublish(id: ID) {
+  return requestClient.putWithMsg<boolean>(
+    `/workflow/definition/publish/${id}`,
+  );
+}
+
+/**
+ * 取消发布流程定义
+ * @param id id
+ * @returns boolean
+ */
+export function workflowDefinitionUnPublish(id: ID) {
+  return requestClient.putWithMsg<boolean>(
+    `/workflow/definition/unPublish/${id}`,
+  );
+}
+
+/**
+ * 删除流程定义
+ * @param ids idList
+ */
+export function workflowDefinitionDelete(ids: IDS) {
+  return requestClient.deleteWithMsg<void>(`/workflow/definition/${ids}`);
+}
+
+/**
+ * 复制流程定义
+ * @param id id
+ */
+export function workflowDefinitionCopy(id: ID) {
+  return requestClient.postWithMsg<void>(`/workflow/definition/copy/${id}`);
+}
+
+/**
+ * 导入流程定义
+ * @returns boolean
+ */
+export function workflowDefinitionImport(data: {
+  category: ID;
+  file: Blob | File;
+}) {
+  return requestClient.postWithMsg<boolean>(
+    '/workflow/definition/importDef',
+    data,
+    { headers: { 'Content-Type': 'multipart/form-data' } },
+  );
+}
+
+/**
+ * 导出流程定义
+ * @param id id
+ * @returns blob
+ */
+export function workflowDefinitionExport(id: ID) {
+  return requestClient.postWithMsg<Blob>(
+    `/workflow/definition/exportDef/${id}`,
+    {},
+    {
+      responseType: 'blob',
+      isTransformResponse: false,
+    },
+  );
+}
+
+/**
+ * 获取流程定义xml字符串
+ * @param id id
+ * @returns xml
+ */
+export function workflowDefinitionXml(id: ID) {
+  return requestClient.get<string>(`/workflow/definition/xmlString/${id}`);
+}
+
+/**
+ * 激活/挂起流程定义
+ * @param id 流程定义id
+ * @param active 激活/挂起
+ * @returns boolean
+ */
+export function workflowDefinitionActive(id: ID, active: boolean) {
+  return requestClient.putWithMsg<boolean>(
+    `/workflow/definition/active/${id}?active=${active}`,
+  );
+}

apps/web-antd/src/api/workflow/definition/model.d.ts

@@ -0,0 +1,19 @@
+export interface ProcessDefinition {
+  id: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag: string;
+  flowCode: string;
+  flowName: string;
+  category: string;
+  categoryName: string;
+  version: string;
+  isPublish: number;
+  formCustom: string;
+  formPath: string;
+  activityStatus: number;
+  listenerType?: any;
+  listenerPath?: any;
+  ext?: any;
+}

apps/web-antd/src/api/workflow/instance/index.ts

@@ -0,0 +1,120 @@
+import type { TaskInfo } from '../task/model';
+import type { FlowInfoResponse } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * @param businessId 业务ID
+ * @returns TaskInfo
+ */
+export function getTaskByBusinessId(businessId: string) {
+  return requestClient.get<TaskInfo>(
+    `/workflow/instance/getInfo/${businessId}`,
+  );
+}
+
+/**
+ * 分页查询正在运行的流程实例
+ * @param params
+ * @returns
+ */
+export function pageByRunning(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/pageByRunning', { params });
+}
+
+/**
+ * pageByFinish
+ * @param params
+ * @returns
+ */
+export function pageByFinish(params?: PageQuery) {
+  return requestClient.get('/workflow/instance/pageByFinish', { params });
+}
+
+/**
+ * 按照业务id删除流程实例
+ * @param businessIds 业务id
+ */
+export function deleteByBusinessIds(businessIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/workflow/instance/deleteByBusinessIds${businessIds}`,
+  );
+}
+
+/**
+ * 按照实例id删除流程实例
+ * @param instanceIds 实例id
+ */
+export function deleteByInstanceIds(instanceIds: IDS) {
+  return requestClient.deleteWithMsg<void>(
+    `/workflow/instance/deleteByInstanceIds/${instanceIds}`,
+  );
+}
+
+/**
+ * 撤销流程
+ * @param data
+ */
+export function cancelProcessApply(data: { businessId: ID; message?: string }) {
+  return requestClient.putWithMsg<void>(
+    '/workflow/instance/cancelProcessApply',
+    data,
+  );
+}
+
+/**
+ * 激活/挂起流程实例
+ * @param instanceId
+ * @param active
+ */
+export function workflowInstanceActive(instanceId: ID, active: boolean) {
+  return requestClient.putWithMsg<void>(
+    `/workflow/instance/active/${instanceId}?active=${active}`,
+  );
+}
+
+/**
+ * 获取当前登录人发起的流程实例
+ * @param params
+ * @returns PageResult<Flow>
+ */
+export function pageByCurrent(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/instance/pageByCurrent',
+    { params },
+  );
+}
+
+/**
+ * 获取流程图，流程记录
+ * @param businessId 业务标识
+ * @returns 流程图，流程记录
+ */
+export function flowInfo(businessId: string) {
+  return requestClient.get<FlowInfoResponse>(
+    `/workflow/instance/flowImage/${businessId}`,
+  );
+}
+
+/**
+ * 获取流程变量
+ * @param instanceId
+ * @returns Map<string,any>
+ */
+export function instanceVariable(instanceId: string) {
+  return requestClient.get<Record<string, any>>(
+    `/workflow/instance/variable/${instanceId}`,
+  );
+}
+
+/**
+ * 作废流程
+ */
+export function workflowInstanceInvalid(data: {
+  comment?: string;
+  id: string;
+}) {
+  return requestClient.postWithMsg<void>('/workflow/instance/invalid', data);
+}

apps/web-antd/src/api/workflow/instance/model.d.ts

@@ -0,0 +1,41 @@
+export interface Flow {
+  id: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag: string;
+  definitionId: string;
+  flowName?: any;
+  instanceId: string;
+  taskId: string;
+  cooperateType: number;
+  cooperateTypeName: string;
+  businessId?: any;
+  nodeCode: string;
+  nodeName: string;
+  nodeType: number;
+  targetNodeCode: string;
+  targetNodeName: string;
+  approver: string;
+  approveName: string;
+  collaborator?: any;
+  permissionList?: any;
+  skipType: string;
+  flowStatus: string;
+  flowTaskStatus?: any;
+  flowStatusName?: any;
+  message: string;
+  ext: null | string;
+  createBy?: any;
+  formCustom: string;
+  formPath: string;
+  flowCode?: any;
+  version?: any;
+  runDuration: string;
+  nickName?: any;
+}
+
+export interface FlowInfoResponse {
+  image: string;
+  list: Flow[];
+}

apps/web-antd/src/api/workflow/task/index.ts

@@ -0,0 +1,172 @@
+import type {
+  CompleteTaskReqData,
+  NextNodeInfo,
+  StartWorkFlowReqData,
+  TaskInfo,
+  TaskOperationData,
+  TaskOperationType,
+} from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 启动任务
+ * @param data
+ */
+export function startWorkFlow(data: StartWorkFlowReqData) {
+  return requestClient.post<{
+    processInstanceId: string;
+    taskId: string;
+  }>('/workflow/task/startWorkFlow', data);
+}
+
+/**
+ * 办理任务
+ * @param data
+ */
+export function completeTask(data: CompleteTaskReqData) {
+  return requestClient.postWithMsg<void>('/workflow/task/completeTask', data);
+}
+
+/**
+ * 查询当前用户的待办任务
+ * @param params
+ */
+export function pageByTaskWait(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByTaskWait',
+    { params },
+  );
+}
+
+/**
+ * 查询当前用户的已办任务
+ * @param params
+ */
+export function pageByTaskFinish(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByTaskFinish',
+    { params },
+  );
+}
+
+/**
+ * 查询所有待办任务
+ * @param params
+ */
+export function pageByAllTaskWait(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByAllTaskWait',
+    { params },
+  );
+}
+
+/**
+ * 查询已办任务
+ * @param params
+ */
+export function pageByAllTaskFinish(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByAllTaskFinish',
+    { params },
+  );
+}
+
+/**
+ * 查询当前用户的抄送
+ * @param params
+ */
+export function pageByTaskCopy(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/task/pageByTaskCopy',
+    { params },
+  );
+}
+
+/**
+ * 根据taskId查询代表任务
+ * @param taskId 任务id
+ * @returns info
+ */
+export function getTaskByTaskId(taskId: string) {
+  return requestClient.get<TaskInfo>(`/workflow/task/getTask/${taskId}`);
+}
+
+/**
+ * 终止任务
+ */
+export function terminationTask(data: { comment?: string; taskId: string }) {
+  return requestClient.postWithMsg<void>(
+    '/workflow/task/terminationTask',
+    data,
+  );
+}
+
+/**
+ * 任务操作
+ * @param taskOperationData 参数
+ * @param taskOperation 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
+ */
+export function taskOperation(
+  taskOperationData: TaskOperationData,
+  taskOperation: TaskOperationType,
+) {
+  return requestClient.postWithMsg<void>(
+    `/workflow/task/taskOperation/${taskOperation}`,
+    taskOperationData,
+  );
+}
+
+/**
+ * 修改任务办理人
+ * @param taskIdList 任务id
+ * @param userId 办理人id
+ */
+export function updateAssignee(taskIdList: IDS, userId: ID) {
+  return requestClient.putWithMsg<void>(
+    `/workflow/task/updateAssignee/${userId}`,
+    taskIdList,
+  );
+}
+
+/**
+ * 驳回审批
+ * @param data 参数
+ */
+export function backProcess(data: any) {
+  return requestClient.postWithMsg<void>('/workflow/task/backProcess', data);
+}
+
+/**
+ * 获取可驳回节点
+ * @param definitionId 流程定义ID
+ * @param nodeCode 当前节点编码
+ */
+export function getBackTaskNode(definitionId: string, nodeCode: string) {
+  return requestClient.get<{ nodeCode: string; nodeName: string }[]>(
+    `/workflow/task/getBackTaskNode/${definitionId}/${nodeCode}`,
+  );
+}
+
+/**
+ * 获取当前任务的所有办理人
+ * @param taskId 任务id
+ */
+export function currentTaskAllUser(taskId: ID) {
+  return requestClient.get<any>(`/workflow/task/currentTaskAllUser/${taskId}`);
+}
+
+/**
+ * 获取下一节点
+ * @param data data
+ * @param data.taskId taskId
+ * @returns NextNodeInfo
+ */
+export function getNextNodeList(data: { taskId: string }) {
+  return requestClient.post<NextNodeInfo[]>(
+    '/workflow/task/getNextNodeList',
+    data,
+  );
+}

apps/web-antd/src/api/workflow/task/model.d.ts

@@ -0,0 +1,108 @@
+export interface ButtonWithPermission {
+  code: string;
+  value: null | string;
+  show: boolean;
+}
+
+export interface TaskInfo {
+  id: string;
+  categoryName: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag?: any;
+  definitionId: string;
+  instanceId: string;
+  flowName: string;
+  businessId: string;
+  nodeCode: string;
+  nodeName: string;
+  nodeType: number;
+  permissionList?: any;
+  userList?: any;
+  formCustom: string;
+  formPath?: any;
+  flowCode: string;
+  version: string;
+  flowStatus: string;
+  flowStatusName: string;
+  assigneeIds: string;
+  assigneeNames: string;
+  processedBy: string;
+  type: string;
+  nodeRatio?: string;
+  createBy: string;
+  createByName: string;
+  targetNodeName?: string;
+  buttonList: ButtonWithPermission[];
+}
+
+export interface CompleteTaskReqData {
+  messageType: string[];
+  flowCopyList: { userId: string; userName: string }[];
+  taskId: ID;
+  taskVariables: Record<string, any>;
+  variables: any;
+  // 附件ID 1,2,3,4形式
+  fileId?: string;
+  // 选人 key为节点code value为用户ID join(,)
+  assigneeMap: { [key: string]: string };
+}
+
+export interface StartWorkFlowReqData {
+  /**
+   * 业务ID
+   */
+  businessId: ID;
+  /**
+   * flowCode
+   */
+  flowCode: string;
+  /**
+   * 流程变量
+   */
+  variables: Record<string, any>;
+}
+
+export interface TaskOperationData {
+  message?: string;
+  taskId: ID;
+  // 单个操作人
+  userId?: ID;
+  // 多个操作人
+  userIds?: IDS;
+}
+
+/**
+ * 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
+ */
+export type TaskOperationType =
+  | 'addSignature'
+  | 'delegateTask'
+  | 'reductionSignature'
+  | 'transferTask';
+
+export interface NextNodeInfo {
+  skipList: string[];
+  id: string;
+  createTime: string;
+  updateTime: string;
+  tenantId: string;
+  delFlag: string;
+  nodeType: number;
+  definitionId: string;
+  nodeCode: string;
+  nodeName: string;
+  permissionFlag: string;
+  nodeRatio: string;
+  coordinate: string;
+  version: string;
+  anyNodeSkip: any;
+  listenerType: any;
+  listenerPath: any;
+  handlerType: any;
+  handlerPath: any;
+  formCustom: string;
+  formPath: any;
+  ext: string;
+}

apps/web-antd/src/bootstrap.ts

@@ -1,6 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -19,10 +20,24 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
   const app = createApp(App);
 
   // 全局组件
   setupGlobalComponent(app);
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
 
   // 国际化 i18n 配置
   await setupI18n(app);
@@ -33,9 +48,17 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {

apps/web-antd/src/components/cropper/index.ts

@@ -1,4 +1,3 @@
-export { default as CropperImage } from './src/cropper.vue';
-
 export { default as CropperAvatar } from './src/cropper-avatar.vue';
+export { default as CropperImage } from './src/cropper.vue';
 export type { Cropper } from './src/typing';

apps/web-antd/src/components/cropper/src/cropper-avatar.vue

@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import {
-  computed,
-  type CSSProperties,
-  type PropType,
-  ref,
-  unref,
-  watch,
-  watchEffect,
-} from 'vue';
+import type { ButtonProps } from 'ant-design-vue';
+
+import type { CSSProperties, PropType } from 'vue';
+
+import { computed, ref, unref, watch, watchEffect } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t as t } from '@vben/locales';
 
-import { type ButtonProps, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import cropperModal from './cropper-modal.vue';
 

apps/web-antd/src/components/cropper/src/cropper-modal.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import type { PropType } from 'vue';
+
 import type { CropendResult, Cropper } from './typing';
 
-import { type PropType, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t as t } from '@vben/locales';
@@ -82,6 +84,10 @@ function handleReady(cropperInstance: Cropper) {
   modalLoading(false);
 }
 
+function handleReadyError() {
+  modalLoading(false);
+}
+
 function handlerToolbar(event: string, arg?: number) {
   if (event === 'scaleX') {
     scaleX = arg = scaleX === -1 ? 1 : -1;
@@ -126,9 +132,11 @@ async function handleOk() {
             v-if="src"
             :circled="circled"
             :src="src"
+            crossorigin="anonymous"
             height="300px"
             @cropend="handleCropend"
             @ready="handleReady"
+            @ready-error="handleReadyError"
           />
         </div>
 
@@ -320,7 +328,8 @@ async function handleOk() {
   &-cropper {
     height: 300px;
     background: #eee;
-    background-image: linear-gradient(
+    background-image:
+      linear-gradient(
         45deg,
         rgb(0 0 0 / 25%) 25%,
         transparent 0,

apps/web-antd/src/components/cropper/src/cropper.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { CSSProperties, PropType } from 'vue';
+
 import { computed, onMounted, onUnmounted, ref, unref, useAttrs } from 'vue';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -25,14 +26,16 @@ const props = defineProps({
   src: { required: true, type: String },
 });
 
-const emit = defineEmits(['cropend', 'ready', 'cropendError']);
+const emit = defineEmits(['cropend', 'ready', 'cropendError', 'readyError']);
 
 const defaultOptions: Options = {
   aspectRatio: 1,
   autoCrop: true,
   background: true,
   center: true,
-  checkCrossOrigin: true,
+  // 需要设置为false 否则会自动拼接timestamp 导致私有桶sign错误
+  // 需要配合img crossorigin='anonymous'使用(默认已经做了处理)
+  checkCrossOrigin: false,
   checkOrientation: true,
   cropBoxMovable: true,
   cropBoxResizable: true,
@@ -93,6 +96,15 @@ async function init() {
   if (!imgEl) {
     return;
   }
+  // 判断是否为正常访问的图片
+  try {
+    const resp = await fetch(props.src);
+    if (resp.status !== 200) {
+      emit('readyError');
+    }
+  } catch {
+    emit('readyError');
+  }
   cropper.value = new Cropper(imgEl, {
     ...defaultOptions,
     crop() {

apps/web-antd/src/components/description/src/description.vue

@@ -2,19 +2,11 @@
 import type { CardSize } from 'ant-design-vue/es/card/Card';
 import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
 
+import type { CSSProperties, PropType, Slots } from 'vue';
+
 import type { DescInstance, DescItem, DescriptionProps } from './typing';
 
-import {
-  computed,
-  type CSSProperties,
-  defineComponent,
-  type PropType,
-  ref,
-  type Slots,
-  toRefs,
-  unref,
-  useAttrs,
-} from 'vue';
+import { computed, defineComponent, ref, toRefs, unref, useAttrs } from 'vue';
 
 import { Card, Descriptions } from 'ant-design-vue';
 import { get, isFunction } from 'lodash-es';
@@ -42,6 +34,9 @@ const props = {
   useCollapse: { default: true, type: Boolean },
 };
 
+/**
+ * @deprecated 使用antd原生组件替代 下个版本将会移除
+ */
 export default defineComponent({
   emits: ['register'],
   // eslint-disable-next-line vue/order-in-components

apps/web-antd/src/components/description/src/typing.ts

@@ -1,9 +1,10 @@
-import type { Recordable } from '@vben/types';
 import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
 import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
+import type { Recordable } from '@vben/types';
+
 export interface DescItem {
   labelMinWidth?: number;
   contentMinWidth?: number;

apps/web-antd/src/components/description/src/useDescription.ts

@@ -6,6 +6,9 @@ import type {
 
 import { getCurrentInstance, ref, unref } from 'vue';
 
+/**
+ * @deprecated 使用antd原生组件替代 下个版本将会移除
+ */
 export function useDescription(
   props?: Partial<DescriptionProps>,
 ): UseDescReturnType {

apps/web-antd/src/components/dict/src/data.tsx

@@ -1,4 +1,4 @@
-import { type VNode } from 'vue';
+import type { VNode } from 'vue';
 
 import { Tag } from 'ant-design-vue';
 

apps/web-antd/src/components/dict/src/index.vue

@@ -1,9 +1,10 @@
+<!-- eslint-disable eqeqeq -->
 <script setup lang="ts">
 import type { DictData } from '#/api/system/dict/dict-data-model';
 
 import { computed } from 'vue';
 
-import { Tag } from 'ant-design-vue';
+import { Spin, Tag } from 'ant-design-vue';
 
 import { tagTypes } from './data';
 
@@ -17,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const color = computed<string>(() => {
-  // eslint-disable-next-line eqeqeq
   const current = props.dicts.find((item) => item.dictValue == props.value);
   const listClass = current?.listClass ?? '';
   // 是否为默认的颜色
@@ -31,24 +31,32 @@ const color = computed<string>(() => {
 });
 
 const cssClass = computed<string>(() => {
-  // eslint-disable-next-line eqeqeq
   const current = props.dicts.find((item) => item.dictValue == props.value);
   return current?.cssClass ?? '';
 });
 
 const label = computed<number | string>(() => {
-  // eslint-disable-next-line eqeqeq
   const current = props.dicts.find((item) => item.dictValue == props.value);
   return current?.dictLabel ?? 'unknown';
 });
 
 const tagComponent = computed(() => (color.value ? Tag : 'div'));
+
+const loading = computed(() => {
+  return props.dicts?.length === 0;
+});
 </script>
 
 <template>
   <div>
-    <component :is="tagComponent" :class="cssClass" :color="color">
+    <component
+      v-if="!loading"
+      :is="tagComponent"
+      :class="cssClass"
+      :color="color"
+    >
       {{ label }}
     </component>
+    <Spin v-else :spinning="true" size="small" />
   </div>
 </template>

apps/web-antd/src/components/table/index.ts

@@ -1 +1,2 @@
+export { default as OptionsTag } from './src/options-tag.vue';
 export { default as TableSwitch } from './src/table-switch.vue';

apps/web-antd/src/components/table/src/options-tag.vue

@@ -0,0 +1,21 @@
+<script setup lang="tsx">
+import { computed } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+defineOptions({ name: 'OptionsTag' });
+
+const props = defineProps<{
+  options: { color?: string; label: string; value: number | string }[];
+  value: number | string;
+}>();
+
+const found = computed(() =>
+  props.options.find((item) => item.value === props.value),
+);
+</script>
+
+<template>
+  <Tag v-if="found" :color="found.color">{{ found.label }}</Tag>
+  <span v-else>未知</span>
+</template>

apps/web-antd/src/components/table/src/table-switch.vue

@@ -1,84 +1,134 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
 
-import { Switch } from 'ant-design-vue';
+import { $t } from '@vben/locales';
+
+import { Modal, Switch } from 'ant-design-vue';
 import { isFunction } from 'lodash-es';
 
-export default defineComponent({
-  name: 'TableSwitch',
-  components: {
-    Switch,
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [Boolean, String, Number],
-      default: false,
-    },
-    checkedText: {
-      type: String,
-      default: '启用',
-    },
-    unCheckedText: {
-      type: String,
-      default: '禁用',
-    },
-    // 使用严格相等判断  类型要正确
-    checkedValue: {
-      type: [Boolean, String, Number],
-      default: '0',
-    },
-    unCheckedValue: {
-      type: [Boolean, String, Number],
-      default: '1',
-    },
-    api: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-    reload: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    type CheckedType = boolean | number | string;
-    async function onChange(checked: CheckedType, e: Event) {
-      // 阻止事件冒泡 否则会跟行选中冲突
-      e.stopPropagation();
-      const { checkedValue, unCheckedValue } = props;
-      // 原本的状态
-      const lastStatus =
-        checked === checkedValue ? unCheckedValue : checkedValue;
-      // 切换状态
-      emit('update:modelValue', checked);
-      const { api, reload } = props;
+type CheckedType = boolean | number | string;
+
+interface Props {
+  /**
+   * 选中的文本
+   * @default i18n 启用
+   */
+  checkedText?: string;
+  /**
+   * 未选中的文本
+   * @default i18n 禁用
+   */
+  unCheckedText?: string;
+  checkedValue?: CheckedType;
+  unCheckedValue?: CheckedType;
+  disabled?: boolean;
+  /**
+   * 需要自己在内部处理更新的逻辑 因为status已经双向绑定了 可以直接获取
+   */
+  api: () => PromiseLike<void>;
+  /**
+   * 更新前是否弹窗确认
+   * @default false
+   */
+  confirm?: boolean;
+  /**
+   * 对应的提示内容
+   * @param checked 选中的值(更新后的值)
+   * @default string '确认要更新状态吗？'
+   */
+  confirmText?: (checked: CheckedType) => string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checkedText: undefined,
+  unCheckedText: undefined,
+  checkedValue: '0',
+  unCheckedValue: '1',
+  confirm: false,
+  confirmText: undefined,
+});
+
+const emit = defineEmits<{ reload: [] }>();
+
+// 修改为computed 支持语言切换
+const checkedTextComputed = computed(() => {
+  return props.checkedText ?? $t('pages.common.enable');
+});
+
+const unCheckedTextComputed = computed(() => {
+  return props.unCheckedText ?? $t('pages.common.disable');
+});
+
+const currentChecked = defineModel<CheckedType>('value', {
+  default: false,
+});
+
+const loading = ref(false);
+
+function confirmUpdate(checked: CheckedType, lastStatus: CheckedType) {
+  const content = isFunction(props.confirmText)
+    ? props.confirmText(checked)
+    : `确认要更新状态吗？`;
+
+  Modal.confirm({
+    title: '提示',
+    content,
+    centered: true,
+    onOk: async () => {
       try {
+        loading.value = true;
+        const { api } = props;
         isFunction(api) && (await api());
-        isFunction(reload) && (await reload());
+        emit('reload');
       } catch {
-        emit('update:modelValue', lastStatus);
+        currentChecked.value = lastStatus;
+      } finally {
+        loading.value = false;
       }
+    },
+    onCancel: () => {
+      currentChecked.value = lastStatus;
+    },
+  });
+}
+
+async function handleChange(checked: CheckedType, e: Event) {
+  // 阻止事件冒泡 否则会跟行选中冲突
+  e.stopPropagation();
+  const { checkedValue, unCheckedValue } = props;
+  // 原本的状态
+  const lastStatus = checked === checkedValue ? unCheckedValue : checkedValue;
+  // 切换状态
+  currentChecked.value = checked;
+  const { api } = props;
+  try {
+    loading.value = true;
+
+    if (props.confirm) {
+      confirmUpdate(checked, lastStatus);
+      return;
     }
 
-    return {
-      onChange,
-    };
-  },
-});
+    isFunction(api) && (await api());
+    emit('reload');
+  } catch {
+    currentChecked.value = lastStatus;
+  } finally {
+    loading.value = false;
+  }
+}
 </script>
 
 <template>
   <Switch
     v-bind="$attrs"
-    :checked="modelValue"
-    :checked-children="checkedText"
+    :loading="loading"
+    :disabled="disabled"
+    :checked="currentChecked"
+    :checked-children="checkedTextComputed"
     :checked-value="checkedValue"
-    :un-checked-children="unCheckedText"
+    :un-checked-children="unCheckedTextComputed"
     :un-checked-value="unCheckedValue"
-    @change="onChange"
+    @change="handleChange"
   />
 </template>

apps/web-antd/src/components/tenant-toggle/src/index.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
+import type { MessageType } from 'ant-design-vue/es/message';
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select';
 
 import type { TenantOption } from '#/api';
 
-import { computed, onMounted, ref, unref } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, onMounted, ref, shallowRef, unref } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { useAccess } from '@vben/access';
-import { DEFAULT_HOME_PATH } from '@vben/constants';
 import { useTabs } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
-import { message, Select } from 'ant-design-vue';
+import { message, Select, Spin } from 'ant-design-vue';
 import { storeToRefs } from 'pinia';
 
 import { tenantDynamicClear, tenantDynamicToggle } from '#/api/system/tenant';
@@ -35,24 +35,39 @@ const showToggle = computed<boolean>(() => {
 });
 
 onMounted(async () => {
+  // 没有超级管理员权限 不会调用接口
   if (!hasAccessByRoles(['superadmin'])) {
     return;
   }
   await initTenant();
 });
 
-const { closeAllTabs } = useTabs();
-const router = useRouter();
-function close(checked: boolean) {
+const route = useRoute();
+const { closeOtherTabs, refreshTab, closeAllTabs } = useTabs();
+
+async function close(checked: boolean) {
   // store设置状态
   setChecked(checked);
-  // 需要关闭全部标签页
-  closeAllTabs();
-  // 切换完加载首页
-  router.push(DEFAULT_HOME_PATH);
+
+  /**
+   * 切换租户需要回到首页的页面 一般为带id的页面
+   * 其他则直接刷新页面
+   */
+  if (route.meta.requireHomeRedirect) {
+    await closeAllTabs();
+  } else {
+    // 先关闭再刷新 这里不用Promise.all()
+    await closeOtherTabs();
+    await refreshTab();
+  }
 }
 
 const dictStore = useDictStore();
+// 用于清理上一条message
+const messageInstance = shallowRef<MessageType | null>();
+// loading加载中效果
+const loading = ref(false);
+
 /**
  * 选中租户的处理
  * @param tenantId tenantId
@@ -63,23 +78,46 @@ const onSelected: SelectHandler = async (tenantId: string, option: any) => {
     // createMessage.info('选择一致');
     return;
   }
-  await tenantDynamicToggle(tenantId);
-  lastSelected.value = tenantId;
-  message.success(
-    `${$t('component.tenantToggle.switch')} ${option.companyName}`,
-  );
-  close(true);
-  // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
-  setTimeout(() => dictStore.resetCache());
+  try {
+    loading.value = true;
+
+    await tenantDynamicToggle(tenantId);
+    lastSelected.value = tenantId;
+
+    // 关闭之前的message 只保留一条
+    messageInstance.value?.();
+    messageInstance.value = message.success(
+      `${$t('component.tenantToggle.switch')} ${option.companyName}`,
+    );
+
+    close(true);
+    // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    setTimeout(() => dictStore.resetCache());
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
 };
 
 async function onDeselect() {
-  await tenantDynamicClear();
-  message.success($t('component.tenantToggle.reset'));
-  lastSelected.value = '';
-  close(false);
-  // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
-  setTimeout(() => dictStore.resetCache());
+  try {
+    loading.value = true;
+
+    await tenantDynamicClear();
+    // 关闭之前的message 只保留一条
+    messageInstance.value?.();
+    messageInstance.value = message.success($t('component.tenantToggle.reset'));
+
+    lastSelected.value = '';
+    close(false);
+    // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    setTimeout(() => dictStore.resetCache());
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
 }
 
 /**
@@ -96,18 +134,20 @@ function filterOption(input: string, option: TenantOption) {
   <div v-if="showToggle" class="mr-[8px] hidden md:block">
     <Select
       v-model:value="selected"
+      :disabled="loading"
       :field-names="{ label: 'companyName', value: 'tenantId' }"
       :filter-option="filterOption"
       :options="tenantList"
       :placeholder="$t('component.tenantToggle.placeholder')"
+      :dropdown-style="{ position: 'fixed', zIndex: 1024 }"
       allow-clear
       class="w-60"
       show-search
       @deselect="onDeselect"
       @select="onSelected"
     >
-      <template #suffixIcon>
-        <span class="icon-mdi--company"></span>
+      <template v-if="loading" #suffixIcon>
+        <Spin size="small" spinning />
       </template>
     </Select>
   </div>

apps/web-antd/src/components/tinymce/src/editor.vue

@@ -1,77 +1,50 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
 import type { Editor as EditorType } from 'tinymce/tinymce';
 
-import {
-  computed,
-  nextTick,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  onMounted,
-  type PropType,
-  ref,
-  unref,
-  useAttrs,
-  watch,
-} from 'vue';
+import type { AxiosProgressEvent, UploadResult } from '#/api';
+
+import { computed, nextTick, ref, shallowRef, useAttrs, watch } from 'vue';
 
 import { preferences, usePreferences } from '@vben/preferences';
-import { buildShortUUID } from '@vben/utils';
 
 import Editor from '@tinymce/tinymce-vue';
-import { isNumber } from 'lodash-es';
+import { Spin } from 'ant-design-vue';
+import { camelCase } from 'lodash-es';
 
-import { uploadApi, type UploadResult } from '#/api/core/upload';
-
-import { bindHandlers } from './helper';
-import ImgUpload from './img-upload.vue';
+import { uploadApi } from '#/api';
 import {
   plugins as defaultPlugins,
   toolbar as defaultToolbar,
-} from './tinymce';
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  height: {
-    default: 400,
-    required: false,
-    type: [Number, String] as PropType<number | string>,
-  },
-  options: {
-    default: () => ({}),
-    // eslint-disable-next-line no-use-before-define
-    type: Object as PropType<Partial<InitOptions>>,
-  },
-
-  plugins: {
-    default: defaultPlugins,
-    type: String,
-  },
-  showImageUpload: {
-    default: true,
-    type: Boolean,
-  },
-  toolbar: {
-    default: defaultToolbar,
-    type: String,
-  },
-  width: {
-    default: 'auto',
-    required: false,
-    type: [Number, String] as PropType<number | string>,
-  },
-});
-
-const emit = defineEmits(['change']);
+} from '#/components/tinymce/src/tinymce';
 
 type InitOptions = IPropTypes['init'];
 
-/**
- * 外部使用 v-model 绑定值
- */
-const modelValue = defineModel('modelValue', { default: '', type: String });
+interface Props {
+  height?: number | string;
+  options?: Partial<InitOptions>;
+  plugins?: string;
+  toolbar?: string;
+  disabled?: boolean;
+}
+
+defineOptions({
+  name: 'Tinymce',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 400,
+  options: () => ({}),
+  plugins: defaultPlugins,
+  toolbar: defaultToolbar,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  mounted: [];
+}>();
+
 /**
  * https://www.jianshu.com/p/59a9c3802443
  * 使用自托管方案（本地）代替cdn  没有key的限制
@@ -79,21 +52,13 @@ const modelValue = defineModel('modelValue', { default: '', type: String });
  */
 const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
 
-const attrs = useAttrs();
-const editorRef = ref<EditorType>();
-const fullscreen = ref(false);
-const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
-const elRef = ref<HTMLElement | null>(null);
-
-const containerWidth = computed(() => {
-  const width = props.width;
-  if (isNumber(width)) {
-    return `${width}px`;
-  }
-  return width;
+const content = defineModel<string>('modelValue', {
+  default: '',
 });
 
-const { isDark } = usePreferences();
+const editorRef = shallowRef<EditorType | null>(null);
+
+const { isDark, locale } = usePreferences();
 const skinName = computed(() => {
   return isDark.value ? 'oxide-dark' : 'oxide';
 });
@@ -102,30 +67,6 @@ const contentCss = computed(() => {
   return isDark.value ? 'dark' : 'default';
 });
 
-/**
- * 通过v-if来挂载/卸载组件
- * 来完成主题切换/语言切换
- */
-const init = ref(true);
-watch(
-  () => [preferences.theme.mode, preferences.app.locale],
-  () => {
-    if (!editorRef.value) {
-      return;
-    }
-    destroy();
-    init.value = false;
-    // 放在下一次tick来切换
-    // 需要先加载组件 也就是v-if为true  然后需要拿到editorRef 必须放在setTimeout(相当于onMounted)
-    nextTick(() => {
-      init.value = true;
-      setTimeout(() => {
-        setEditorMode();
-      });
-    });
-  },
-);
-
 /**
  * tinymce支持 en zh_CN
  */
@@ -137,6 +78,26 @@ const langName = computed(() => {
   return 'zh_CN';
 });
 
+/**
+ * 通过v-if来挂载/卸载组件来完成主题切换切换
+ * 语言切换也需要监听 不监听在切换时候会显示原始<textarea>样式
+ */
+const init = ref(true);
+watch([isDark, locale], async () => {
+  if (!editorRef.value) {
+    return;
+  }
+  // 相当于手动unmounted清理 非常重要
+  editorRef.value.destroy();
+  init.value = false;
+  // 放在下一次tick来切换
+  // 需要先加载组件 也就是v-if为true  然后需要拿到editorRef 必须放在setTimeout(相当于onMounted)
+  await nextTick();
+  init.value = true;
+});
+
+// 加载完毕前显示spin
+const loading = ref(true);
 const initOptions = computed((): InitOptions => {
   const { height, options, plugins, toolbar } = props;
   return {
@@ -160,6 +121,7 @@ const initOptions = computed((): InitOptions => {
      * images_upload_handler启用时为上传
      */
     paste_data_images: true,
+    images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
     plugins,
     quickbars_selection_toolbar:
       'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
@@ -172,12 +134,18 @@ const initOptions = computed((): InitOptions => {
      * @param blobInfo
      * 大坑 不要调用这两个函数  success failure:
      * 使用resolve/reject代替
+     * (PS: 新版已经没有success failure)
      */
-    images_upload_handler: (blobInfo) => {
+    images_upload_handler: (blobInfo, progress) => {
       return new Promise((resolve, reject) => {
         const file = blobInfo.blob();
         // const filename = blobInfo.filename();
-        uploadApi(file)
+        // 进度条事件
+        const progressEvent: AxiosProgressEvent = (e) => {
+          const percent = Math.trunc((e.loaded / e.total!) * 100);
+          progress(percent);
+        };
+        uploadApi(file, { onUploadProgress: progressEvent })
           .then((response) => {
             const { url } = response as unknown as UploadResult;
             console.log('tinymce上传图片:', url);
@@ -185,186 +153,70 @@ const initOptions = computed((): InitOptions => {
           })
           .catch((error) => {
             console.error('tinymce上传图片失败:', error);
-            reject(error.message);
+            // eslint-disable-next-line prefer-promise-reject-errors
+            reject({ message: error.message, remove: true });
           });
       });
     },
     setup: (editor) => {
       editorRef.value = editor;
-      editor.on('init', (e) => initSetup(e));
+      editor.on('init', () => {
+        emit('mounted');
+        loading.value = false;
+      });
     },
   };
 });
 
+const attrs = useAttrs();
 /**
- * 监听options.readonly
+ * 获取透传的事件 通过v-on绑定
+ * 可绑定的事件 https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#event-binding
  */
-watch(
-  () => props.options,
-  (options) => {
-    const getDisabled = options && Reflect.get(options, 'readonly');
-    const editor = unref(editorRef);
-    if (editor) {
-      editor.mode.set(getDisabled ? 'readonly' : 'design');
+const events = computed(() => {
+  const onEvents: Record<string, any> = {};
+  for (const key in attrs) {
+    if (key.startsWith('on')) {
+      const eventKey = camelCase(key.split('on')[1]!);
+      onEvents[eventKey] = attrs[key];
     }
-  },
-);
-
-onMounted(() => {
-  if (!initOptions.value.inline) {
-    tinymceId.value = buildShortUUID('tiny-vue');
   }
-  nextTick(() => {
-    setTimeout(() => {
-      initEditor();
-      setEditorMode();
-    }, 30);
-  });
+  return onEvents;
 });
-
-onBeforeUnmount(() => {
-  destroy();
-});
-
-onDeactivated(() => {
-  destroy();
-});
-
-onActivated(() => {
-  setEditorMode();
-});
-
-function setEditorMode() {
-  const editor = unref(editorRef);
-  if (editor) {
-    const mode = props.options.readonly ? 'readonly' : 'design';
-    editor.mode.set(mode);
-  }
-}
-
-function destroy() {
-  const editor = unref(editorRef);
-  editor?.destroy();
-}
-
-function initEditor() {
-  const el = unref(elRef);
-  if (el) {
-    el.style.visibility = '';
-  }
-}
-
-function initSetup(e: any) {
-  const editor = unref(editorRef);
-  if (!editor) {
-    return;
-  }
-  const value = modelValue.value || '';
-
-  editor.setContent(value);
-  bindModelHandlers(editor);
-  bindHandlers(e, attrs, unref(editorRef));
-}
-
-function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
-  if (
-    editor &&
-    typeof val === 'string' &&
-    val !== prevVal &&
-    val !== editor.getContent({ format: attrs.outputFormat })
-  ) {
-    editor.setContent(val);
-  }
-}
-
-function bindModelHandlers(editor: any) {
-  const modelEvents = attrs.modelEvents ?? null;
-  const normalizedEvents = Array.isArray(modelEvents)
-    ? modelEvents.join(' ')
-    : modelEvents;
-
-  watch(
-    () => modelValue.value,
-    (val, prevVal) => {
-      setValue(editor, val, prevVal);
-    },
-  );
-
-  editor.on(normalizedEvents || 'change keyup undo redo', () => {
-    const content = editor.getContent({ format: attrs.outputFormat });
-    emit('change', content);
-  });
-
-  editor.on('FullscreenStateChanged', (e: any) => {
-    fullscreen.value = e.state;
-  });
-}
-
-const disabled = computed(() => props.options.readonly ?? false);
-
-function getUploadingImgName(name: string) {
-  return `[uploading:${name}]`;
-}
-
-function handleImageUploading(name: string) {
-  const editor = unref(editorRef);
-  if (!editor) {
-    return;
-  }
-  editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
-  const content = editor?.getContent() ?? '';
-  setValue(editor, content);
-}
-
-function handleDone(name: string, url: string) {
-  const editor = unref(editorRef);
-  if (!editor) {
-    return;
-  }
-  const content = editor?.getContent() ?? '';
-  const val =
-    content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
-  setValue(editor, val);
-}
 </script>
 
 <template>
-  <div :style="{ width: containerWidth }" class="app-tinymce">
-    <ImgUpload
-      v-if="showImageUpload"
-      v-show="editorRef"
-      :disabled="disabled"
-      :fullscreen="fullscreen"
-      @done="handleDone"
-      @uploading="handleImageUploading"
-    />
-    <Editor
-      v-if="!initOptions.inline && init"
-      v-model="modelValue"
-      :init="initOptions"
-      :style="{ visibility: 'hidden' }"
-      :tinymce-script-src="tinymceScriptSrc"
-      license-key="gpl"
-    />
-    <slot v-else></slot>
+  <div class="app-tinymce">
+    <Spin :spinning="loading">
+      <Editor
+        v-if="init"
+        v-model="content"
+        :init="initOptions"
+        :tinymce-script-src="tinymceScriptSrc"
+        :disabled="disabled"
+        license-key="gpl"
+        v-on="events"
+      />
+    </Spin>
   </div>
 </template>
 
-<style lang="scss" scoped>
-/**
-  隐藏右上角upgrade按钮
-  */
-:deep(.tox-promotion) {
-  display: none !important;
+<style lang="scss">
+/***
+由于modal/drawer的zIndex升级后为2000
+这里会造成遮挡 修改为更高的zIndex
+*/
+.tox.tox-silver-sink.tox-tinymce-aux {
+  /** 该样式默认为1300的zIndex  */
+  z-index: 2025;
 }
 
 .app-tinymce {
-  position: relative;
-  line-height: normal;
-
-  :deep(.textarea) {
-    z-index: -1;
-    visibility: hidden;
+  /**
+  隐藏右上角upgrade按钮
+  */
+  .tox-promotion {
+    display: none;
   }
 }
 </style>

apps/web-antd/src/components/tinymce/src/helper.ts

@@ -1,85 +0,0 @@
-const validEvents = new Set([
-  'onActivate',
-  'onAddUndo',
-  'onBeforeAddUndo',
-  'onBeforeExecCommand',
-  'onBeforeGetContent',
-  'onBeforeRenderUI',
-  'onBeforeSetContent',
-  'onBeforePaste',
-  'onBlur',
-  'onChange',
-  'onClearUndos',
-  'onClick',
-  'onContextMenu',
-  'onCopy',
-  'onCut',
-  'onDblclick',
-  'onDeactivate',
-  'onDirty',
-  'onDrag',
-  'onDragDrop',
-  'onDragEnd',
-  'onDragGesture',
-  'onDragOver',
-  'onDrop',
-  'onExecCommand',
-  'onFocus',
-  'onFocusIn',
-  'onFocusOut',
-  'onGetContent',
-  'onHide',
-  'onInit',
-  'onKeyDown',
-  'onKeyPress',
-  'onKeyUp',
-  'onLoadContent',
-  'onMouseDown',
-  'onMouseEnter',
-  'onMouseLeave',
-  'onMouseMove',
-  'onMouseOut',
-  'onMouseOver',
-  'onMouseUp',
-  'onNodeChange',
-  'onObjectResizeStart',
-  'onObjectResized',
-  'onObjectSelected',
-  'onPaste',
-  'onPostProcess',
-  'onPostRender',
-  'onPreProcess',
-  'onProgressState',
-  'onRedo',
-  'onRemove',
-  'onReset',
-  'onSaveContent',
-  'onSelectionChange',
-  'onSetAttrib',
-  'onSetContent',
-  'onShow',
-  'onSubmit',
-  'onUndo',
-  'onVisualAid',
-]);
-
-const isValidKey = (key: string) => validEvents.has(key);
-
-export const bindHandlers = (
-  initEvent: Event,
-  listeners: any,
-  editor: any,
-): void => {
-  Object.keys(listeners)
-    .filter((element) => isValidKey(element))
-    .forEach((key: string) => {
-      const handler = listeners[key];
-      if (typeof handler === 'function') {
-        if (key === 'onInit') {
-          handler(initEvent, editor);
-        } else {
-          editor.on(key.slice(2), (e: any) => handler(e, editor));
-        }
-      }
-    });
-};

apps/web-antd/src/components/tinymce/src/img-upload.vue

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import { useAppConfig } from '@vben/hooks';
-import { useAccessStore } from '@vben/stores';
-
-import { message, Upload } from 'ant-design-vue';
-
-defineOptions({ name: 'TinymceImageUpload' });
-
-const props = defineProps({
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  fullscreen: {
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['uploading', 'done', 'error']);
-
-let uploading = false;
-
-const { apiURL, clientId } = useAppConfig(
-  import.meta.env,
-  import.meta.env.PROD,
-);
-const accessStore = useAccessStore();
-const uploadUrl = `${apiURL}/resource/oss/upload`;
-// 使用upload组件只能这样上传
-const headers = {
-  Authorization: `Bearer ${accessStore.accessToken}`,
-  clientId,
-};
-
-const getButtonProps = computed(() => {
-  const { disabled } = props;
-  return {
-    disabled,
-  };
-});
-
-function handleChange(info: Record<string, any>) {
-  const file = info.file;
-  const status = file?.status;
-  // const url = file?.response?.data.url;
-  const name = file?.name;
-
-  switch (status) {
-    case 'done': {
-      // http 200会走到这里  需要再次判断
-      const { response } = file;
-      const { code, data, msg = '服务器错误' } = response;
-      if (code === 200) {
-        const { url } = data;
-        emit('done', name, url);
-      } else {
-        message.error(msg);
-      }
-      // emit('done', name, url);
-      uploading = false;
-
-      break;
-    }
-    case 'error': {
-      emit('error');
-      uploading = false;
-
-      break;
-    }
-    case 'uploading': {
-      if (!uploading) {
-        emit('uploading', name);
-        uploading = true;
-      }
-
-      break;
-    }
-    // No default
-  }
-}
-</script>
-<template>
-  <div :class="[{ fullscreen }]" class="tinymce-image-upload">
-    <Upload
-      :action="uploadUrl"
-      :headers="headers"
-      :show-upload-list="false"
-      accept=".jpg,.jpeg,.gif,.png,.webp"
-      multiple
-      name="file"
-      @change="handleChange"
-    >
-      <!-- 这里要改成i18n -->
-      <a-button type="primary" v-bind="{ ...getButtonProps }">
-        图片上传
-      </a-button>
-    </Upload>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.tinymce-image-upload {
-  position: absolute;
-  top: 4px;
-  right: 10px;
-  z-index: 20;
-
-  &.fullscreen {
-    position: fixed;
-    z-index: 10000;
-  }
-}
-</style>

apps/web-antd/src/components/tree/index.ts

@@ -1 +1,2 @@
+export { default as MenuSelectTable } from './src/menu-select-table.vue';
 export { default as TreeSelectPanel } from './src/tree-select-panel.vue';

apps/web-antd/src/components/tree/src/data.tsx

@@ -0,0 +1,85 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { ID } from '#/api/common';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { h, markRaw } from 'vue';
+
+import { FolderIcon, MenuIcon, OkButtonIcon, VbenIcon } from '@vben/icons';
+
+export interface Permission {
+  checked: boolean;
+  id: ID;
+  label: string;
+}
+
+export interface MenuPermissionOption extends MenuOption {
+  permissions: Permission[];
+}
+
+const menuTypes = {
+  C: { icon: markRaw(MenuIcon), value: '菜单' },
+  F: { icon: markRaw(OkButtonIcon), value: '按钮' },
+  M: { icon: markRaw(FolderIcon), value: '目录' },
+};
+
+export const nodeOptions = [
+  { label: '节点关联', value: true },
+  { label: '节点独立', value: false },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    title: '菜单名称',
+    field: 'label',
+    treeNode: true,
+    headerAlign: 'left',
+    align: 'left',
+    width: 230,
+  },
+  {
+    title: '图标',
+    field: 'icon',
+    width: 80,
+    slots: {
+      default: ({ row }) => {
+        if (row?.icon === '#') {
+          return '';
+        }
+        return (
+          <span class={'flex justify-center'}>
+            <VbenIcon icon={row.icon} />
+          </span>
+        );
+      },
+    },
+  },
+  {
+    title: '类型',
+    field: 'menuType',
+    width: 80,
+    slots: {
+      default: ({ row }) => {
+        const current = menuTypes[row.menuType as 'C' | 'F' | 'M'];
+        if (!current) {
+          return '未知';
+        }
+        return (
+          <span class="flex items-center justify-center gap-1">
+            {h(current.icon, { class: 'size-[18px]' })}
+            <span>{current.value}</span>
+          </span>
+        );
+      },
+    },
+  },
+  {
+    title: '权限标识',
+    field: 'permissions',
+    headerAlign: 'left',
+    align: 'left',
+    slots: {
+      default: 'permissions',
+    },
+  },
+];

apps/web-antd/src/components/tree/src/helper.tsx

@@ -0,0 +1,182 @@
+import type { MenuPermissionOption } from './data';
+
+import type { useVbenVxeGrid } from '#/adapter/vxe-table';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { eachTree, treeToList } from '@vben/utils';
+
+import { notification } from 'ant-design-vue';
+import { difference, isEmpty, isUndefined } from 'lodash-es';
+
+/**
+ * 权限列设置是否全选
+ * @param record 行记录
+ * @param checked 是否选中
+ */
+export function setPermissionsChecked(
+  record: MenuPermissionOption,
+  checked: boolean,
+) {
+  if (record?.permissions?.length > 0) {
+    // 全部设置为选中
+    record.permissions.forEach((permission) => {
+      permission.checked = checked;
+    });
+  }
+}
+
+/**
+ * 设置当前行 & 所有子节点选中状态
+ * @param record 行
+ * @param checked 是否选中
+ */
+export function rowAndChildrenChecked(
+  record: MenuPermissionOption,
+  checked: boolean,
+) {
+  // 当前行选中
+  setPermissionsChecked(record, checked);
+  // 所有子节点选中
+  record?.children?.forEach?.((permission) => {
+    rowAndChildrenChecked(permission as MenuPermissionOption, checked);
+  });
+}
+
+/**
+ * void方法 会直接修改原始数据
+ * 将树结构转为 tree+permissions结构
+ * @param menus 后台返回的menu
+ */
+export function menusWithPermissions(menus: MenuOption[]) {
+  eachTree(menus, (item: MenuPermissionOption) => {
+    validateMenuTree(item);
+    if (item.children && item.children.length > 0) {
+      /**
+       * 所有为按钮的节点提取出来
+       * 需要注意 这里需要过滤目录下直接是按钮的情况item.menuType !== 'M'
+       * 将按钮往children添加而非加到permissions
+       */
+      const permissions = item.children.filter(
+        (child: MenuOption) => child.menuType === 'F' && item.menuType !== 'M',
+      );
+      // 取差集
+      const diffCollection = difference(item.children, permissions);
+      // 更新后的children  即去除按钮
+      item.children = diffCollection;
+
+      // permissions作为字段添加到item
+      const permissionsArr = permissions.map((permission) => {
+        return {
+          id: permission.id,
+          label: permission.label,
+          checked: false,
+        };
+      });
+      item.permissions = permissionsArr;
+    }
+  });
+}
+
+/**
+ * 设置表格选中
+ * @param checkedKeys 选中的keys
+ * @param menus 菜单 转换后的菜单
+ * @param tableApi api
+ * @param association 是否节点关联
+ */
+export function setTableChecked(
+  checkedKeys: (number | string)[],
+  menus: MenuPermissionOption[],
+  tableApi: ReturnType<typeof useVbenVxeGrid>['1'],
+  association: boolean,
+) {
+  // tree转list
+  const menuList: MenuPermissionOption[] = treeToList(menus);
+  // 拿到勾选的行数据
+  let checkedRows = menuList.filter((item) => checkedKeys.includes(item.id));
+
+  /**
+   * 节点独立切换到节点关联 只需要最末尾的数据 即children为空
+   */
+  if (!association) {
+    checkedRows = checkedRows.filter(
+      (item) => isUndefined(item.children) || isEmpty(item.children),
+    );
+  }
+
+  // 设置行选中 & permissions选中
+  checkedRows.forEach((item) => {
+    tableApi.grid.setCheckboxRow(item, true);
+    if (item?.permissions?.length > 0) {
+      item.permissions.forEach((permission) => {
+        if (checkedKeys.includes(permission.id)) {
+          permission.checked = true;
+        }
+      });
+    }
+  });
+
+  /**
+   * 节点独立切换到节点关联
+   * 勾选后还需要过滤权限没有任何勾选的情况 这时候取消行的勾选
+   */
+  if (!association) {
+    const emptyRows = checkedRows.filter((item) => {
+      if (isUndefined(item.permissions) || isEmpty(item.permissions)) {
+        return false;
+      }
+      return item.permissions.every(
+        (permission) => permission.checked === false,
+      );
+    });
+    // 设置为不选中
+    tableApi.grid.setCheckboxRow(emptyRows, false);
+  }
+}
+
+/**
+ * 校验是否符合规范 给出warning提示
+ *
+ * 不符合规范
+ * 比如: 菜单下放目录 菜单下放菜单
+ * 比如: 按钮下放目录 按钮下放菜单 按钮下放按钮
+ * @param menu menu
+ */
+function validateMenuTree(menu: MenuOption) {
+  /**
+   * C: { icon: markRaw(MenuIcon), value: '菜单' },
+      F: { icon: markRaw(OkButtonIcon), value: '按钮' },
+      M: { icon: markRaw(FolderIcon), value: '目录' },
+   */
+  // 菜单下不能放目录/菜单
+  if (menu.menuType === 'C') {
+    menu.children?.forEach?.((item) => {
+      if (['C', 'M'].includes(item.menuType)) {
+        const description = `错误用法: [${menu.label} - 菜单]下不能放 目录/菜单 -> [${item.label}]`;
+        console.warn(description);
+        notification.warning({
+          message: '提示',
+          description,
+          duration: 0,
+        });
+      }
+    });
+  }
+  // 按钮为最末级 不能再放置
+  if (menu.menuType === 'F') {
+    /**
+     * 其实可以直接判断length 这里为了更准确知道label 采用遍历的形式
+     */
+    menu.children?.forEach?.((item) => {
+      if (['C', 'F', 'M'].includes(item.menuType)) {
+        const description = `错误用法: [${menu.label} - 按钮]下不能放置'目录/菜单/按钮' -> [${item.label}]`;
+        console.warn(description);
+        notification.warning({
+          message: '提示',
+          description,
+          duration: 0,
+        });
+      }
+    });
+  }
+}

apps/web-antd/src/components/tree/src/hook.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { TourProps } from 'ant-design-vue';
+
+import { defineComponent, ref } from 'vue';
+
+import { useLocalStorage } from '@vueuse/core';
+import { Tour } from 'ant-design-vue';
+
+/**
+ * 全屏引导
+ * @returns value
+ */
+export function useFullScreenGuide() {
+  const open = ref(false);
+  /**
+   * 是否已读 只显示一次
+   */
+  const read = useLocalStorage('menu_select_fullscreen_read', false);
+
+  function openGuide() {
+    if (!read.value) {
+      open.value = true;
+    }
+  }
+
+  function closeGuide() {
+    open.value = false;
+    read.value = true;
+  }
+
+  const steps: TourProps['steps'] = [
+    {
+      title: '提示',
+      description: '点击这里可以全屏',
+      target: () =>
+        document.querySelector(
+          'div#menu-select-table .vxe-tools--operate > button[title="全屏"]',
+        )!,
+    },
+  ];
+
+  const FullScreenGuide = defineComponent({
+    name: 'FullScreenGuide',
+    inheritAttrs: false,
+    setup() {
+      return () => (
+        <Tour
+          onClose={closeGuide}
+          open={open.value}
+          steps={steps}
+          zIndex={9999}
+        />
+      );
+    },
+  });
+
+  return {
+    FullScreenGuide,
+    openGuide,
+    closeGuide,
+  };
+}

apps/web-antd/src/components/tree/src/menu-select-table.vue

@@ -0,0 +1,407 @@
+<!--
+不兼容也不会兼容一些错误用法
+比如: 菜单下放目录 菜单下放菜单
+比如: 按钮下放目录 按钮下放菜单 按钮下放按钮
+-->
+<script setup lang="tsx">
+import type { RadioChangeEvent } from 'ant-design-vue';
+
+import type { MenuPermissionOption } from './data';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { cloneDeep, findGroupParentIds } from '@vben/utils';
+
+import { Alert, Checkbox, RadioGroup, Space } from 'ant-design-vue';
+import { uniq } from 'lodash-es';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { columns, nodeOptions } from './data';
+import {
+  menusWithPermissions,
+  rowAndChildrenChecked,
+  setPermissionsChecked,
+  setTableChecked,
+} from './helper';
+import { useFullScreenGuide } from './hook';
+
+defineOptions({
+  name: 'MenuSelectTable',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    checkedKeys: (number | string)[];
+    defaultExpandAll?: boolean;
+    menus: MenuOption[];
+  }>(),
+  {
+    /**
+     * 是否默认展开全部
+     */
+    defaultExpandAll: true,
+    /**
+     * 注意这里不是双向绑定 需要调用getCheckedKeys实例方法来获取真正选中的节点
+     */
+    checkedKeys: () => [],
+  },
+);
+
+/**
+ * 是否节点关联
+ */
+const association = defineModel<boolean>('association', {
+  default: true,
+});
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // checkbox显示的字段
+    labelField: 'label',
+    // 是否严格模式 即节点不关联
+    checkStrictly: !association.value,
+  },
+  size: 'small',
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    enabled: false,
+  },
+  toolbarConfig: {
+    refresh: false,
+    custom: false,
+  },
+  rowConfig: {
+    isHover: false,
+    isCurrent: false,
+    keyField: 'id',
+  },
+  /**
+   * 开启虚拟滚动
+   * 数据量小可以选择关闭
+   * 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
+   */
+  scrollY: {
+    enabled: true,
+    gt: 0,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'id',
+    transform: false,
+  },
+  // 溢出换行显示
+  showOverflow: false,
+};
+
+/**
+ * 用于界面显示选中的数量
+ */
+const checkedNum = ref(0);
+/**
+ * 更新选中的数量
+ */
+function updateCheckedNumber() {
+  checkedNum.value = getCheckedKeys().length;
+}
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents: {
+    // 勾选事件
+    checkboxChange: (params) => {
+      // 选中还是取消选中
+      const checked = params.checked;
+      // 行
+      const record = params.row;
+      if (association.value) {
+        // 节点关联
+        // 设置所有子节点选中状态
+        rowAndChildrenChecked(record, checked);
+      } else {
+        // 节点独立
+        // 点行会勾选/取消全部权限  点权限不会勾选行
+        setPermissionsChecked(record, checked);
+      }
+      updateCheckedNumber();
+    },
+    // 全选事件
+    checkboxAll: (params) => {
+      const records = params.$grid.getData();
+      records.forEach((item) => {
+        rowAndChildrenChecked(item, params.checked);
+      });
+      updateCheckedNumber();
+    },
+  },
+});
+
+/**
+ * 设置表格选中
+ * @param menus menu
+ * @param keys 选中的key
+ * @param triggerOnchange 节点独立情况 不需要触发onChange(false)
+ */
+function setCheckedByKeys(
+  menus: MenuPermissionOption[],
+  keys: (number | string)[],
+  triggerOnchange: boolean,
+) {
+  menus.forEach((item) => {
+    // 设置行选中
+    if (keys.includes(item.id)) {
+      tableApi.grid.setCheckboxRow(item, true);
+    }
+    // 设置权限columns选中
+    if (item.permissions && item.permissions.length > 0) {
+      // 遍历 设置勾选
+      item.permissions.forEach((permission) => {
+        if (keys.includes(permission.id)) {
+          permission.checked = true;
+          // 手动触发onChange来选中 节点独立情况不需要处理
+          triggerOnchange && handlePermissionChange(item);
+        }
+      });
+    }
+    // 设置children选中
+    if (item.children && item.children.length > 0) {
+      setCheckedByKeys(item.children as any, keys, triggerOnchange);
+    }
+  });
+}
+
+const { FullScreenGuide, openGuide } = useFullScreenGuide();
+onMounted(() => {
+  /**
+   * 加载表格数据 转为指定结构
+   */
+  watch(
+    () => props.menus,
+    async (menus) => {
+      const clonedMenus = cloneDeep(menus);
+      menusWithPermissions(clonedMenus);
+      // console.log(clonedMenus);
+      await tableApi.grid.loadData(clonedMenus);
+      // 展开全部 默认true
+      if (props.defaultExpandAll) {
+        await nextTick();
+        setExpandOrCollapse(true);
+      }
+    },
+  );
+
+  /**
+   * 节点关联变动 更新表格勾选效果
+   */
+  watch(association, (value) => {
+    tableApi.setGridOptions({
+      checkboxConfig: {
+        checkStrictly: !value,
+      },
+    });
+  });
+
+  /**
+   * checkedKeys依赖menus
+   * 要注意加载顺序
+   * !!!要在外部确保menus先加载!!!
+   */
+  watch(
+    () => props.checkedKeys,
+    (value) => {
+      const allCheckedKeys = uniq([...value]);
+      // 获取表格data 如果checkedKeys在menus的watch之前触发 这里会拿到空 导致勾选异常
+      const records = tableApi.grid.getData();
+      setCheckedByKeys(records, allCheckedKeys, association.value);
+      updateCheckedNumber();
+
+      // 全屏引导
+      setTimeout(openGuide, 1000);
+    },
+  );
+});
+
+// 缓存上次(切换节点关系前)选中的keys
+const lastCheckedKeys = shallowRef<(number | string)[]>([]);
+/**
+ * 节点关联变动 事件
+ */
+async function handleAssociationChange(e: RadioChangeEvent) {
+  lastCheckedKeys.value = getCheckedKeys();
+  // 清空全部permissions选中
+  const records = tableApi.grid.getData();
+  records.forEach((item) => {
+    rowAndChildrenChecked(item, false);
+  });
+  // 需要清空全部勾选
+  await tableApi.grid.clearCheckboxRow();
+  // 滚动到顶部
+  await tableApi.grid.scrollTo(0, 0);
+
+  // 节点切换 不同的选中
+  setTableChecked(lastCheckedKeys.value, records, tableApi, !e.target.value);
+
+  updateCheckedNumber();
+}
+
+/**
+ * 全部展开/折叠
+ * @param expand 是否展开
+ */
+function setExpandOrCollapse(expand: boolean) {
+  tableApi.grid?.setAllTreeExpand(expand);
+}
+
+/**
+ * 权限列表 checkbox勾选的事件
+ * @param row 行
+ */
+function handlePermissionChange(row: any) {
+  // 节点关联
+  if (association.value) {
+    const checkedPermissions = row.permissions.filter(
+      (item: any) => item.checked === true,
+    );
+    // 有一条选中 则整个行选中
+    if (checkedPermissions.length > 0) {
+      tableApi.grid.setCheckboxRow(row, true);
+    }
+    // 无任何选中 则整个行不选中
+    if (checkedPermissions.length === 0) {
+      tableApi.grid.setCheckboxRow(row, false);
+    }
+  }
+  // 节点独立 不处理
+  updateCheckedNumber();
+}
+
+/**
+ * 获取勾选的key
+ * @param records 行记录列表
+ * @param addCurrent 是否添加当前行的id
+ */
+function getKeys(records: MenuPermissionOption[], addCurrent: boolean) {
+  const allKeys: (number | string)[] = [];
+  records.forEach((item) => {
+    // 处理children
+    if (item.children && item.children.length > 0) {
+      const keys = getKeys(item.children as MenuPermissionOption[], addCurrent);
+      allKeys.push(...keys);
+    } else {
+      // 当前行的id
+      addCurrent && allKeys.push(item.id);
+      // 当前行权限id 获取已经选中的
+      if (item.permissions && item.permissions.length > 0) {
+        const ids = item.permissions
+          .filter((m) => m.checked === true)
+          .map((m) => m.id);
+        allKeys.push(...ids);
+      }
+    }
+  });
+  return uniq(allKeys);
+}
+
+/**
+ * 获取选中的key
+ */
+function getCheckedKeys() {
+  // 节点关联
+  if (association.value) {
+    const records = tableApi?.grid?.getCheckboxRecords?.(true) ?? [];
+    // 子节点
+    const nodeKeys = getKeys(records, true);
+    // 所有父节点
+    const parentIds = findGroupParentIds(props.menus, nodeKeys as number[]);
+    // 拼接 去重
+    const realKeys = uniq([...parentIds, ...nodeKeys]);
+    return realKeys;
+  }
+  // 节点独立
+
+  // 勾选的行
+  const records = tableApi?.grid?.getCheckboxRecords?.(true) ?? [];
+  // 全部数据 用于获取permissions
+  const allRecords = tableApi?.grid?.getData?.() ?? [];
+  // 表格已经选中的行ids
+  const checkedIds = records.map((item) => item.id);
+  // 所有已经勾选权限的ids
+  const permissionIds = getKeys(allRecords, false);
+  // 合并 去重
+  const allIds = uniq([...checkedIds, ...permissionIds]);
+  return allIds;
+}
+
+/**
+ * 暴露给外部使用 获取已选中的key
+ */
+defineExpose({
+  getCheckedKeys,
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col" id="menu-select-table">
+    <BasicTable>
+      <template #toolbar-actions>
+        <RadioGroup
+          v-model:value="association"
+          :options="nodeOptions"
+          button-style="solid"
+          option-type="button"
+          @change="handleAssociationChange"
+        />
+        <Alert class="mx-2" type="info">
+          <template #message>
+            <div>
+              已选中
+              <span class="text-primary mx-1 font-semibold">
+                {{ checkedNum }}
+              </span>
+              个节点
+            </div>
+          </template>
+        </Alert>
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button @click="setExpandOrCollapse(false)">
+            {{ $t('pages.common.collapse') }}
+          </a-button>
+          <a-button @click="setExpandOrCollapse(true)">
+            {{ $t('pages.common.expand') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #permissions="{ row }">
+        <div class="flex flex-wrap gap-x-3 gap-y-1">
+          <Checkbox
+            v-for="permission in row.permissions"
+            :key="permission.id"
+            v-model:checked="permission.checked"
+            @change="() => handlePermissionChange(row)"
+          >
+            {{ permission.label }}
+          </Checkbox>
+        </div>
+      </template>
+    </BasicTable>
+    <!-- 全屏引导 -->
+    <FullScreenGuide />
+  </div>
+</template>
+
+<style scoped>
+:deep(.ant-alert) {
+  padding: 4px 8px;
+}
+</style>

apps/web-antd/src/components/tree/src/tree-select-panel.vue

@@ -3,11 +3,14 @@ import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
 import type { DataNode } from 'ant-design-vue/es/tree';
 import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
 
-import { computed, nextTick, onMounted, type PropType, ref, watch } from 'vue';
+import type { PropType, SetupContext } from 'vue';
+
+import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue';
 
 import { findGroupParentIds, treeToList } from '@vben/utils';
 
 import { Checkbox, Tree } from 'ant-design-vue';
+import { uniq } from 'lodash-es';
 
 /** 需要禁止透传 */
 defineOptions({ inheritAttrs: false });
@@ -73,6 +76,8 @@ const checkedRealKeys = ref<(number | string)[]>([]);
 /**
  * 取第一次的menuTree id 设置到checkedMenuKeys
  * 主要为了解决没有任何修改 直接点击保存的情况
+ *
+ * length为0情况(即新增时候没有勾选节点) 勾选这里会延迟触发 节点会拼接上父节点 导致ID重复
  */
 const stop = watch([checkedKeys, () => props.treeData], () => {
   if (
@@ -86,7 +91,10 @@ const stop = watch([checkedKeys, () => props.treeData], () => {
       checkedKeys.value as any,
       { id: props.fieldNames.key },
     );
-    checkedRealKeys.value = [...parentIds, ...checkedKeys.value];
+    /**
+     * uniq 解决上面的id重复问题
+     */
+    checkedRealKeys.value = uniq([...parentIds, ...checkedKeys.value]);
     stop();
   }
   if (!props.checkStrictly && checkedKeys.value.length > 0) {
@@ -98,19 +106,21 @@ const stop = watch([checkedKeys, () => props.treeData], () => {
 
 /**
  *
- * @param checkedKeys 已经选中的子节点的ID
+ * @param checkedStateKeys 已经选中的子节点的ID
  * @param info info.halfCheckedKeys为父节点的ID
  */
 type CheckedState<T = number | string> =
-  | { checked: T[]; halfChecked: T[] }
-  | T[];
-function handleChecked(checkedKeys: CheckedState, info: CheckInfo) {
+  | T[]
+  | { checked: T[]; halfChecked: T[] };
+function handleChecked(checkedStateKeys: CheckedState, info: CheckInfo) {
   // 数组的话为节点关联
-  if (Array.isArray(checkedKeys)) {
+  if (Array.isArray(checkedStateKeys)) {
     const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
-    checkedRealKeys.value = [...halfCheckedKeys, ...checkedKeys];
+    checkedRealKeys.value = [...halfCheckedKeys, ...checkedStateKeys];
   } else {
-    checkedRealKeys.value = [...checkedKeys.checked];
+    checkedRealKeys.value = [...checkedStateKeys.checked];
+    // fix: Invalid prop: type check failed for prop "value". Expected Array, got Object
+    checkedKeys.value = [...checkedStateKeys.checked];
   }
 }
 
@@ -137,9 +147,10 @@ function handleCheckStrictlyChange(e: CheckboxChangeEvent) {
 
 /**
  * 暴露方法来获取用于提交的全部节点
+ * uniq去重(保险方案)
  */
 defineExpose({
-  getCheckedKeys: () => checkedRealKeys.value,
+  getCheckedKeys: () => uniq(checkedRealKeys.value),
 });
 
 onMounted(async () => {
@@ -148,6 +159,8 @@ onMounted(async () => {
     expandedKeys.value = allKeys.value;
   }
 });
+
+const slots = useSlots() as SetupContext['slots'];
 </script>
 
 <template>
@@ -196,7 +209,7 @@ onMounted(async () => {
         @check="handleChecked"
       >
         <template
-          v-for="slotName in Object.keys($slots)"
+          v-for="slotName in Object.keys(slots)"
           :key="slotName"
           #[slotName]="data"
         >