refactor: tinymce+表单 校验失败样式

* 按钮组支持单选清除和多选限制最大选项数

* 按钮组支持icon插槽来定制图标

.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

.husky/commit-msg

@@ -1,6 +0,0 @@
-echo Start running commit-msg hook...
-
-# Check whether the git commit information is standardized
-pnpm exec commitlint --edit "$1"
-
-echo Run commit-msg hook done.

.husky/post-merge

@@ -1,3 +0,0 @@
-# 每次 git pull 之后, 安装依赖
-
-pnpm install

.husky/pre-commit

@@ -1,7 +0,0 @@
-# update `.vscode/vben-admin.code-workspace` file
-pnpm vsh code-workspace --auto-commit
-
-# Format and submit code according to lintstagedrc.js configuration
-pnpm exec lint-staged
-
-echo Run pre-commit hook done.

.lintstagedrc.mjs

@@ -1,20 +0,0 @@
-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',
-  ],
-  '*.{scss,less,styl,html,vue,css}': [
-    'prettier --cache --ignore-unknown --write',
-    'stylelint --fix --allow-empty-input',
-  ],
-  '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

.npmrc

@@ -1,5 +1,5 @@
 registry = "https://registry.npmmirror.com"
-public-hoist-pattern[]=husky
+public-hoist-pattern[]=lefthook
 public-hoist-pattern[]=eslint
 public-hoist-pattern[]=prettier
 public-hoist-pattern[]=prettier-plugin-tailwindcss

.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,
@@ -113,6 +114,8 @@
     "**/yarn.lock": true
   },
 
+  "typescript.tsserver.exclude": ["**/node_modules", "**/dist", "**/.turbo"],
+
   // search
   "search.searchEditor.singleClickBehaviour": "peekDefinition",
   "search.followSymlinks": false,
@@ -217,17 +220,28 @@
     "*.env": "$(capture).env.*",
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
-    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
+    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json,lefthook.yml",
     "tailwind.config.mjs": "postcss.*"
   },
   "commentTranslate.hover.enabled": false,
   "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",
+    "tinymce",
+    "vitest"
+  ]
 }

CHANGELOG.md

@@ -1,3 +1,146 @@
+# 1.4.1
+
+**BUG FIX**
+
+- 菜单管理 路由地址的必填项不生效
+
+**REFACTOR**
+
+- 字典接口抛出异常(为什么会抛出异常?)无限调用接口 兼容处理
+
+# 1.4.0
+
+**FEATURES**
+
+- 菜单管理(通用方法) 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
+
+- 菜单管理 级联删除 删除菜单和children
+
+**REFACTOR**
+
+- 除个人中心外所有本地路由改为从后端返回(需要执行更新sql)
+- 流程图预览改为logicflow预览而非图片 ...然后后端又更新了 又改成iframe了
+- 菜单管理 新增角色校验(与后端权限保持一致) 只有superadmin可进行增删改
+
+# 1.3.6
+
+**BUG FIX**
+
+- oss配置switch切换 导致报错`存储类型找不到`
+- 文件上传无法正确清除(innerList)
+
+# 1.3.5
+
+**BUG FIX**
+
+- 某些带Vxe表格弹窗 关闭后没有正常清理表格数据的问题
+
+# 1.3.4
+
+**BUG FIX**
+
+- 文件上传多次触发导致数据不一致 https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC3BK6
+
+**PREFORMANCE**
+
+- 浏览器返回按钮/手势操作时 弹窗不会被关闭(keepAlive导致)
+
+# 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**

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

@@ -6,7 +6,7 @@
 
 v5版本采用分仓(包)目录结构, 具体开发路径为: `根目录/apps/web-antd`
 
-目前对应后端版本: **分布式5.3.1/微服务2.3.0**
+目前对应后端版本: **分布式5.4.0/微服务2.4.0**
 
 V1.1.0版本已支持离线图标
 
@@ -18,7 +18,7 @@ V1.2.0版本对接warmflow工作流
 
 | 组件/框架      | 版本   |
 | :------------- | :----- |
-| vben           | 5.5.4  |
+| vben           | 5.5.6  |
 | ant-design-vue | 4.2.6  |
 | vue            | 3.5.13 |
 
@@ -46,14 +46,6 @@ 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)
@@ -76,7 +68,7 @@ admin 账号: admin admin123
 git clone https://gitee.com/dapppp/ruoyi-plus-vben5.git
 ```
 
-- 安装依赖
+2. 安装依赖
 
 ```bash
 cd ruoyi-plus-vben5
@@ -150,7 +142,7 @@ VITE_GLOB_WEBSOCKET_ENABLE=false
 pnpm dev:antd
 ```
 
-- 打包
+4. 打包
 
 ```bash
 pnpm build:antd
@@ -164,21 +156,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` 开发中
 
 ## 浏览器支持
 
@@ -186,7 +178,7 @@ 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 |
 | :-: | :-: | :-: | :-: | :-: |

apps/backend-mock/api/demo/bigint.ts

@@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
+  setHeader(event, 'Content-Type', 'application/json');
+  return data;
+});

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "1.2.3",
+  "version": "1.4.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -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

@@ -8,56 +8,92 @@ import type { Component } from 'vue';
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, defineComponent, getCurrentInstance, h, ref } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-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';
+import { notification } from 'ant-design-vue';
 
-import { Tinymce as RichTextarea } from '#/components/tinymce';
-import { FileUpload, ImageUpload } from '#/components/upload';
+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 defineComponent({
-    inheritAttrs: false,
     name: component.name,
+    inheritAttrs: false,
     setup: (props: any, { attrs, expose, slots }) => {
-      /**
-       * 需要使用computed 否则后续updateSchema更新的placeholder无法显示(响应式问题)
-       */
-      const placeholder = computed(
-        () =>
-          props?.placeholder ||
-          attrs?.placeholder ||
-          $t(`ui.placeholder.${type}`),
-      );
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
 
       // 透传组件暴露的方法
       const innerRef = ref();
@@ -74,7 +110,13 @@ const withDefaultPlaceholder = <T extends Component>(
       return () =>
         h(
           component,
-          { ...props, ...attrs, placeholder: placeholder.value, ref: innerRef },
+          {
+            ...componentProps,
+            placeholder,
+            ...props,
+            ...attrs,
+            ref: innerRef,
+          },
           slots,
         );
     },
@@ -92,8 +134,10 @@ export type ComponentType =
   | 'DefaultButton'
   | 'Divider'
   | 'FileUpload'
+  | 'FileUploadOld'
   | 'IconPicker'
   | 'ImageUpload'
+  | 'ImageUploadOld'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
@@ -118,38 +162,34 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          visibleEvent: 'onDropdownVisibleChange',
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    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,
@@ -159,19 +199,11 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'addonAfter',
-          inputComponent: Input,
-          modelValueProp: 'value',
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
@@ -194,6 +226,8 @@ async function initComponentAdapter() {
     ImageUpload,
     FileUpload,
     RichTextarea,
+    ImageUploadOld,
+    FileUploadOld,
   };
 
   // 将组件注册到全局共享状态中

apps/web-antd/src/adapter/form.ts

@@ -10,44 +10,46 @@ import { $t } from '@vben/locales';
 
 import { isArray } from 'lodash-es';
 
-setupVbenForm<ComponentType>({
-  config: {
-    // ant design vue组件库默认都是 v-model:value
-    baseModelPropName: 'value',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
 
-    // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      RichTextarea: 'modelValue',
-      Switch: 'checked',
-      Upload: 'fileList',
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        RichTextarea: 'modelValue',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    // 输入项目必填国际化适配
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (
+          [false, null, undefined].includes(value) ||
+          (isArray(value) && value.length === 0)
+        ) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (
-        [false, null, undefined].includes(value) ||
-        (isArray(value) && value.length === 0)
-      ) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };

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

@@ -1,7 +1,12 @@
 import type { GrantType } from '@vben/common-ui';
+import type { HttpResponse } from '@vben/request';
+
+import { h } from 'vue';
 
 import { useAppConfig } from '@vben/hooks';
 
+import { Modal } from 'ant-design-vue';
+
 import { requestClient } from '#/api/request';
 
 const { clientId, sseEnable } = useAppConfig(
@@ -90,8 +95,32 @@ export async function loginApi(data: AuthApi.LoginParams) {
  * 用户登出
  * @returns void
  */
-export function doLogout() {
-  return requestClient.post<void>('/auth/logout');
+export async function doLogout() {
+  const resp = await requestClient.post<HttpResponse<void>>(
+    '/auth/logout',
+    null,
+    {
+      isTransformResponse: false,
+    },
+  );
+  // 无奈之举 对错误用法的提示
+  if (resp.code === 401 && import.meta.env.DEV) {
+    Modal.destroyAll();
+    Modal.warn({
+      title: '后端配置出现错误',
+      centered: true,
+      content: h('div', { class: 'flex flex-col gap-2' }, [
+        `检测到你的logout接口返回了401, 导致前端一直进入循环逻辑???`,
+        ...Array.from({ length: 3 }, () =>
+          h(
+            'span',
+            { class: 'font-bold text-red-500 text-[18px]' },
+            '去检查你的后端配置!别盯着前端找问题了!这不是前端问题!',
+          ),
+        ),
+      ]),
+    });
+  }
 }
 
 /**

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

@@ -7,22 +7,6 @@ import { requestClient } from '#/api/request';
  */
 export type AxiosProgressEvent = AxiosRequestConfig['onUploadProgress'];
 
-/**
- * 通过单文件上传接口
- * @param file 上传的文件
- * @param onUploadProgress 上传进度事件 非必传
- * @returns 上传结果
- */
-export function uploadApi(
-  file: Blob | File,
-  onUploadProgress?: AxiosProgressEvent,
-) {
-  return requestClient.upload(
-    '/resource/oss/upload',
-    { file },
-    { onUploadProgress, timeout: 60_000 },
-  );
-}
 /**
  * 默认上传结果
  */
@@ -31,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/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

@@ -39,6 +39,11 @@ const { apiURL, clientId, enableEncrypt } = useAppConfig(
  */
 let isLogoutProcessing = false;
 
+/**
+ * 定义一个401专用异常 用于可能会用到的区分场景?
+ */
+export class UnauthorizedException extends Error {}
+
 function createRequestClient(baseURL: string) {
   const client = new RequestClient({
     // 后端地址
@@ -93,9 +98,12 @@ 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则不走此逻辑
@@ -225,7 +233,7 @@ function createRequestClient(baseURL: string) {
         case 401: {
           // 已经在登出过程中 不再执行
           if (isLogoutProcessing) {
-            return;
+            throw new UnauthorizedException(timeoutMsg);
           }
           isLogoutProcessing = true;
           const _msg = $t('http.loginTimeout');
@@ -235,7 +243,7 @@ function createRequestClient(baseURL: string) {
             isLogoutProcessing = false;
           });
           // 不再执行下面逻辑
-          return;
+          throw new UnauthorizedException(_msg);
         }
         default: {
           if (msg) {

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

@@ -59,7 +59,11 @@ export function clientUpdate(data: Partial<Client>) {
  * @param data 状态
  */
 export function clientChangeStatus(data: any) {
-  return requestClient.putWithMsg<void>(Api.clientChangeStatus, data);
+  const requestData = {
+    clientId: data.clientId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.clientChangeStatus, requestData);
 }
 
 /**

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

@@ -81,3 +81,12 @@ export function tenantPackageMenuTreeSelect(packageId: ID) {
     `${Api.tenantPackageMenuTreeselect}/${packageId}`,
   );
 }
+
+/**
+ * 批量删除菜单
+ * @param menuIds 菜单ids
+ * @returns void
+ */
+export function menuCascadeRemove(menuIds: IDS) {
+  return requestClient.deleteWithMsg<void>(`${Api.root}/cascade/${menuIds}`);
+}

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

@@ -37,5 +37,10 @@ export function ossConfigRemove(ossConfigIds: IDS) {
 
 // 更改OSS配置的状态
 export function ossConfigChangeStatus(data: any) {
-  return requestClient.putWithMsg(Api.ossConfigChangeStatus, data);
+  const requestData: Partial<OssConfig> = {
+    ossConfigId: data.ossConfigId,
+    status: data.status,
+    configKey: data.configKey,
+  };
+  return requestClient.putWithMsg(Api.ossConfigChangeStatus, requestData);
 }

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

@@ -29,7 +29,7 @@ export function ossList(params?: PageQuery) {
  * @param ossIds id数组
  * @returns 信息数组
  */
-export function ossInfo(ossIds: IDS) {
+export function ossInfo(ossIds: ID | IDS) {
   return requestClient.get<OssFile[]>(`${Api.ossInfo}/${ossIds}`);
 }
 

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

@@ -72,7 +72,11 @@ export function roleUpdate(data: Partial<Role>) {
  * @returns void
  */
 export function roleChangeStatus(data: Partial<Role>) {
-  return requestClient.putWithMsg<void>(Api.roleChangeStatus, data);
+  const requestData = {
+    roleId: data.roleId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.roleChangeStatus, requestData);
 }
 
 /**

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

@@ -74,7 +74,11 @@ export function packageUpdate(data: Partial<TenantPackage>) {
  * @returns void
  */
 export function packageChangeStatus(data: Partial<TenantPackage>) {
-  return requestClient.putWithMsg<void>(Api.packageChangeStatus, data);
+  const packageId = {
+    packageId: data.packageId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.packageChangeStatus, packageId);
 }
 
 /**

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

@@ -67,7 +67,12 @@ export function tenantUpdate(data: Partial<Tenant>) {
  * @returns void
  */
 export function tenantStatusChange(data: Partial<Tenant>) {
-  return requestClient.putWithMsg(Api.tenantStatus, data);
+  const requestData = {
+    id: data.id,
+    tenantId: data.tenantId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg(Api.tenantStatus, requestData);
 }
 
 /**

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

@@ -110,7 +110,11 @@ export function userUpdate(data: Partial<User>) {
  * @returns void
  */
 export function userStatusChange(data: Partial<User>) {
-  return requestClient.putWithMsg<void>(Api.userStatusChange, data);
+  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/workflow/instance/index.ts

@@ -94,7 +94,7 @@ export function pageByCurrent(params?: PageQuery) {
  */
 export function flowInfo(businessId: string) {
   return requestClient.get<FlowInfoResponse>(
-    `/workflow/instance/flowImage/${businessId}`,
+    `/workflow/instance/flowHisTaskList/${businessId}`,
   );
 }
 

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

@@ -36,6 +36,6 @@ export interface Flow {
 }
 
 export interface FlowInfoResponse {
-  image: string;
+  instanceId: string;
   list: Flow[];
 }

apps/web-antd/src/app.vue

@@ -8,6 +8,8 @@ import { App, ConfigProvider, theme } from 'ant-design-vue';
 
 import { antdLocale } from '#/locales';
 
+import { useUploadTip } from './upload-tip';
+
 defineOptions({ name: 'App' });
 
 const { isDark } = usePreferences();
@@ -28,6 +30,8 @@ const tokenTheme = computed(() => {
     token: tokens,
   };
 });
+
+useUploadTip();
 </script>
 
 <template>

apps/web-antd/src/bootstrap.ts

@@ -1,8 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy, registerLoadingDirective } from '@vben/common-ui';
-import { MotionPlugin } from '@vben/plugins/motion';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -14,6 +13,7 @@ import { setupGlobalComponent } from '#/components/global';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
@@ -21,6 +21,9 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
@@ -50,12 +53,14 @@ 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);
 
   // 动态更新标题

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

@@ -84,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;
@@ -128,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>
 
@@ -322,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

@@ -26,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,
@@ -94,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

@@ -34,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/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/index.vue

@@ -4,7 +4,7 @@ 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';
 
@@ -41,12 +41,22 @@ const label = computed<number | string>(() => {
 });
 
 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/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,16 +134,22 @@ 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 v-if="loading" #suffixIcon>
+        <Spin size="small" spinning />
+      </template>
+    </Select>
   </div>
 </template>
 

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

@@ -1,80 +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 type { PropType } from 'vue';
+import type { AxiosProgressEvent, UploadResult } from '#/api';
 
-import type { UploadResult } from '#/api/core/upload';
-
-import {
-  computed,
-  nextTick,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  onMounted,
-  ref,
-  unref,
-  useAttrs,
-  watch,
-} from 'vue';
+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 } 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的限制
@@ -82,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';
 });
@@ -105,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
  */
@@ -140,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 {
@@ -163,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',
@@ -175,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);
@@ -188,197 +153,100 @@ 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', zIndex: 3000 }"
-      :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">
-/***
-由于modal/drawer的zIndex升级后为2000
-这里会造成遮挡 修改为更高的zIndex
-*/
+@mixin tinymce-valid-fail($color) {
+  .app-tinymce {
+    // 最外层的tinymce容器
+    .tox-tinymce {
+      border-color: $color;
+    }
+    // focus样式
+    .tox .tox-edit-area::before {
+      border-color: $color;
+      border-right: none;
+      border-left: none;
+    }
+  }
+}
+
 .tox.tox-silver-sink.tox-tinymce-aux {
   /** 该样式默认为1300的zIndex  */
   z-index: 2025;
 }
-</style>
-
-<style lang="scss" scoped>
-/**
-  隐藏右上角upgrade按钮
-  */
-:deep(.tox-promotion) {
-  display: none !important;
-}
 
 .app-tinymce {
-  position: relative;
-  line-height: normal;
+  /**
+  隐藏右上角upgrade按钮
+  */
+  .tox-promotion {
+    display: none;
+  }
 
-  :deep(.textarea) {
-    z-index: -1;
-    visibility: hidden;
+  /** 保持focus时与primary色一致 */
+  .tox .tox-edit-area::before {
+    border-color: hsl(var(--primary));
   }
 }
+
+// antd原生表单 校验失败样式
+.ant-form-item:has(.ant-form-item-explain-error) {
+  $error-color: #ff3860;
+
+  @include tinymce-valid-fail($error-color);
+}
+
+// useVbenForm 校验失败样式
+.form-valid-error {
+  $error-color: hsl(var(--destructive));
+
+  @include tinymce-valid-fail($error-color);
+}
 </style>

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

@@ -1,85 +0,0 @@
-const validEvents = new Set([
-  'onActivate',
-  'onAddUndo',
-  'onBeforeAddUndo',
-  'onBeforeExecCommand',
-  'onBeforeGetContent',
-  'onBeforePaste',
-  'onBeforeRenderUI',
-  'onBeforeSetContent',
-  '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',
-  'onObjectResized',
-  'onObjectResizeStart',
-  '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/src/menu-select-table.vue

@@ -317,7 +317,7 @@ function getKeys(records: MenuPermissionOption[], addCurrent: boolean) {
 function getCheckedKeys() {
   // 节点关联
   if (association.value) {
-    const records = tableApi?.grid?.getCheckboxRecords?.() ?? [];
+    const records = tableApi?.grid?.getCheckboxRecords?.(true) ?? [];
     // 子节点
     const nodeKeys = getKeys(records, true);
     // 所有父节点
@@ -329,7 +329,7 @@ function getCheckedKeys() {
   // 节点独立
 
   // 勾选的行
-  const records = tableApi?.grid?.getCheckboxRecords?.() ?? [];
+  const records = tableApi?.grid?.getCheckboxRecords?.(true) ?? [];
   // 全部数据 用于获取permissions
   const allRecords = tableApi?.grid?.getData?.() ?? [];
   // 表格已经选中的行ids

apps/web-antd/src/components/upload-old/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @description: 旧版文件上传组件 使用FileUpload代替
+ */
+export { default as FileUploadOld } from './src/file-upload.vue';
+/**
+ * @description: 旧版图片上传组件 使用ImageUpload代替
+ */
+export { default as ImageUploadOld } from './src/image-upload.vue';

apps/web-antd/src/components/upload-old/src/file-upload.vue

@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+
+import type { AxiosProgressEvent, UploadApi } from '#/api';
+
+import { ref, toRefs, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { message, Upload } from 'ant-design-vue';
+import { isArray, isFunction, isObject, isString } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+
+import { checkFileType } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUploadType } from './use-upload';
+
+defineOptions({ name: 'FileUpload', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 建议使用拓展名(不带.)
+     * 或者文件头 image/png等(测试判断不准确)  不支持image/*类似的写法
+     * 需自行改造 ./helper/checkFileType方法
+     */
+    accept?: string[];
+    api?: UploadApi;
+    disabled?: boolean;
+    helpText?: string;
+    // 最大数量的文件，Infinity不限制
+    maxNumber?: number;
+    // 文件最大多少MB
+    maxSize?: number;
+    // 是否支持多选
+    multiple?: boolean;
+    // support xxx.xxx.xx
+    // 返回的字段 默认url
+    resultField?: 'fileName' | 'ossId' | 'url' | string;
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
+    value?: string[];
+  }>(),
+  {
+    value: () => [],
+    disabled: false,
+    helpText: '',
+    maxSize: 2,
+    maxNumber: 1,
+    accept: () => [],
+    multiple: false,
+    api: () => uploadApi,
+    resultField: '',
+    showDescription: true,
+  },
+);
+const emit = defineEmits(['change', 'update:value', 'delete']);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+const fileList = ref<UploadProps['fileList']>([]);
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+
+watch(
+  () => props.value,
+  (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string[] = [];
+    if (v) {
+      if (isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: 'done',
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['fileList'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+const handleRemove = async (file: UploadFile) => {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+};
+
+const beforeUpload = async (file: File) => {
+  const { maxSize, accept } = props;
+  const isAct = await checkFileType(file, accept);
+  if (!isAct) {
+    message.error($t('component.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+  }
+  const isLt = file.size / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+  }
+  return (isAct && !isLt) || Upload.LIST_IGNORE;
+};
+
+async function customRequest(info: UploadRequestOption<any>) {
+  const { api } = props;
+  if (!api || !isFunction(api)) {
+    console.warn('upload api must exist and be a function');
+    return;
+  }
+  try {
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(info.file as File, {
+      onUploadProgress: progressEvent,
+    });
+    /**
+     * 由getValue处理 传对象过去
+     * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
+     */
+    info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
+    // 获取
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  }
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response?.[props.resultField];
+      }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
+      // 注意这里取的key为 url
+      return item?.response?.url;
+    });
+  return list;
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :disabled="disabled"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      list-type="text"
+      :progress="{ showInfo: true }"
+      @remove="handleRemove"
+    >
+      <div v-if="fileList && fileList.length < maxNumber">
+        <a-button>
+          <UploadOutlined />
+          {{ $t('component.upload.upload') }}
+        </a-button>
+      </div>
+      <div v-if="showDescription" class="mt-2 flex flex-wrap items-center">
+        请上传不超过
+        <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+        的
+        <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+        格式文件
+      </div>
+    </Upload>
+  </div>
+</template>
+
+<style>
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>

apps/web-antd/src/components/upload-old/src/helper.ts

@@ -0,0 +1,51 @@
+import { fileTypeFromBlob } from '@vben/utils';
+
+/**
+ * 不支持txt文件 @see https://github.com/sindresorhus/file-type/issues/55
+ * 需要自行修改
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkFileType(file: File, accepts: string[]) {
+  if (!accepts || accepts?.length === 0) {
+    return true;
+  }
+  console.log(file);
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  return accepts.includes(fileType.ext) || accepts.includes(fileType.mime);
+}
+
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+/**
+ * 判断文件类型是否符合要求
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkImageFileType(file: File, accepts: string[]) {
+  // 空的accepts 使用默认规则
+  if (!accepts || accepts.length === 0) {
+    accepts = defaultImageAccept;
+  }
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  if (accepts.includes(fileType.ext) || accepts.includes(fileType.mime)) {
+    return true;
+  }
+  return false;
+}

apps/web-antd/src/components/upload-old/src/image-upload.vue

@@ -0,0 +1,323 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+
+import type { AxiosProgressEvent, UploadApi } from '#/api';
+
+import { ref, toRefs, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { PlusOutlined } from '@ant-design/icons-vue';
+import { message, Modal, Upload } from 'ant-design-vue';
+import { isArray, isFunction, isObject, isString, uniqueId } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+import { ossInfo } from '#/api/system/oss';
+
+import { checkImageFileType, defaultImageAccept } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUploadType } from './use-upload';
+
+defineOptions({ name: 'ImageUpload', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+     */
+    accept?: string[];
+    api?: UploadApi;
+    disabled?: boolean;
+    helpText?: string;
+    // eslint-disable-next-line no-use-before-define
+    listType?: ListType;
+    // 最大数量的文件，Infinity不限制
+    maxNumber?: number;
+    // 文件最大多少MB
+    maxSize?: number;
+    // 是否支持多选
+    multiple?: boolean;
+    // support xxx.xxx.xx
+    // 返回的字段 默认url
+    resultField?: 'fileName' | 'ossId' | 'url';
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
+    value?: string | string[];
+  }>(),
+  {
+    value: () => [],
+    disabled: false,
+    listType: 'picture-card',
+    helpText: '',
+    maxSize: 2,
+    maxNumber: 1,
+    accept: () => defaultImageAccept,
+    multiple: false,
+    api: () => uploadApi,
+    resultField: 'url',
+    showDescription: true,
+  },
+);
+const emit = defineEmits(['change', 'update:value', 'delete']);
+type ListType = 'picture' | 'picture-card' | 'text';
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+const previewOpen = ref<boolean>(false);
+const previewImage = ref<string>('');
+const previewTitle = ref<string>('');
+
+const fileList = ref<UploadProps['fileList']>([]);
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+
+watch(
+  () => props.value,
+  async (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string | string[] = [];
+    if (v) {
+      const _fileList: string[] = [];
+      if (isString(v)) {
+        _fileList.push(v);
+      }
+      if (isArray(v)) {
+        _fileList.push(...v);
+      }
+      // 直接赋值 可能为string | string[]
+      value = v;
+      const withUrlList: UploadProps['fileList'] = [];
+      for (const item of _fileList) {
+        // ossId情况
+        if (props.resultField === 'ossId') {
+          const resp = await ossInfo([item]);
+          if (item && isString(item)) {
+            withUrlList.push({
+              uid: item, // ossId作为uid 方便getValue获取
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: 'done',
+              url: resp?.[0]?.url,
+            });
+          } else if (item && isObject(item)) {
+            withUrlList.push({
+              ...(item as any),
+              uid: item,
+              url: resp?.[0]?.url,
+            });
+          }
+        } else {
+          // 非ossId情况
+          if (item && isString(item)) {
+            withUrlList.push({
+              uid: uniqueId(),
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: 'done',
+              url: item,
+            });
+          } else if (item && isObject(item)) {
+            withUrlList.push(item);
+          }
+        }
+      }
+      fileList.value = withUrlList;
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+function getBase64<T extends ArrayBuffer | null | string>(file: File) {
+  return new Promise<T>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => {
+      resolve(reader.result as T);
+    });
+    reader.addEventListener('error', (error) => reject(error));
+  });
+}
+
+const handlePreview = async (file: UploadFile) => {
+  if (!file.url && !file.preview) {
+    file.preview = await getBase64<string>(file.originFileObj!);
+  }
+  previewImage.value = file.url || file.preview || '';
+  previewOpen.value = true;
+  previewTitle.value =
+    file.name ||
+    previewImage.value.slice(
+      Math.max(0, previewImage.value.lastIndexOf('/') + 1),
+    );
+};
+
+const handleRemove = async (file: UploadFile) => {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+};
+
+const handleCancel = () => {
+  previewOpen.value = false;
+  previewTitle.value = '';
+};
+
+const beforeUpload = async (file: File) => {
+  const { maxSize, accept } = props;
+  const isAct = await checkImageFileType(file, accept);
+  if (!isAct) {
+    message.error($t('component.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+  }
+  const isLt = file.size / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+  }
+  return (isAct && !isLt) || Upload.LIST_IGNORE;
+};
+
+async function customRequest(info: UploadRequestOption<any>) {
+  const { api } = props;
+  if (!api || !isFunction(api)) {
+    console.warn('upload api must exist and be a function');
+    return;
+  }
+  try {
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(info.file as File, {
+      onUploadProgress: progressEvent,
+    });
+    /**
+     * 由getValue处理 传对象过去
+     * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
+     */
+    info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
+    // 获取
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  }
+}
+
+function getValue() {
+  console.log(fileList.value);
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response?.[props.resultField];
+      }
+      // ossId兼容 uid为ossId直接返回
+      if (props.resultField === 'ossId' && item.uid) {
+        return item.uid;
+      }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
+      // 注意这里取的key为 url
+      return item?.response?.url;
+    });
+  // 只有一张图片 默认绑定string而非string[]
+  if (props.maxNumber === 1 && list.length === 1) {
+    return list[0];
+  }
+  // 只有一张图片 && 删除图片时 可自行修改
+  if (props.maxNumber === 1 && list.length === 0) {
+    return '';
+  }
+  return list;
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :disabled="disabled"
+      :list-type="listType"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      :progress="{ showInfo: true }"
+      @preview="handlePreview"
+      @remove="handleRemove"
+    >
+      <div v-if="fileList && fileList.length < maxNumber">
+        <PlusOutlined />
+        <div style="margin-top: 8px">{{ $t('component.upload.upload') }}</div>
+      </div>
+    </Upload>
+    <div
+      v-if="showDescription"
+      class="mt-2 flex flex-wrap items-center text-[14px]"
+    >
+      请上传不超过
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+      的
+      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+      格式文件
+    </div>
+    <Modal
+      :footer="null"
+      :open="previewOpen"
+      :title="previewTitle"
+      @cancel="handleCancel"
+    >
+      <img :src="previewImage" alt="" style="width: 100%" />
+    </Modal>
+  </div>
+</template>
+
+<style>
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>

apps/web-antd/src/components/upload/src/file-upload.vue

@@ -1,243 +1,150 @@
-<script lang="ts" setup>
-import type { UploadFile, UploadProps } from 'ant-design-vue';
-import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+<!--
+不再支持url 统一使用ossId
+去除使用`file-type`库进行文件类型检测 在Safari无法使用
+-->
+<script setup lang="ts">
+import type { UploadListType } from 'ant-design-vue/es/upload/interface';
 
-import type { AxiosResponse } from '@vben/request';
+import type { BaseUploadProps, UploadEmits } from './props';
 
-import type { AxiosProgressEvent } from '#/api';
+import { computed } from 'vue';
 
-import { ref, toRefs, watch } from 'vue';
+import { $t, I18nT } from '@vben/locales';
 
-import { $t } from '@vben/locales';
-
-import { UploadOutlined } from '@ant-design/icons-vue';
-import { message, Upload } from 'ant-design-vue';
-import { isArray, isFunction, isObject, isString } from 'lodash-es';
+import { InboxOutlined, UploadOutlined } from '@ant-design/icons-vue';
+import { Upload } from 'ant-design-vue';
 
 import { uploadApi } from '#/api';
 
-import { checkFileType } from './helper';
-import { UploadResultStatus } from './typing';
-import { useUploadType } from './use-upload';
+import { defaultFileAcceptExts, defaultFilePreview } from './helper';
+import { useUpload } from './hook';
 
-defineOptions({ name: 'FileUpload', inheritAttrs: false });
+interface FileUploadProps extends BaseUploadProps {
+  /**
+   * 同antdv的listType 但是排除picture-card
+   * 文件上传不适合用picture-card显示
+   * @default text
+   */
+  listType?: Exclude<UploadListType, 'picture-card'>;
+}
 
-const props = withDefaults(
-  defineProps<{
-    /**
-     * 建议使用拓展名(不带.)
-     * 或者文件头 image/png等(测试判断不准确)  不支持image/*类似的写法
-     * 需自行改造 ./helper/checkFileType方法
-     */
-    accept?: string[];
-    api?: (
-      file: Blob | File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    disabled?: boolean;
-    helpText?: string;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    // 返回的字段 默认url
-    resultField?: 'fileName' | 'ossId' | 'url' | string;
-    /**
-     * 是否显示下面的描述
-     */
-    showDescription?: boolean;
-    value?: string[];
-  }>(),
-  {
-    value: () => [],
-    disabled: false,
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => [],
-    multiple: false,
-    api: uploadApi,
-    resultField: '',
-    showDescription: true,
-  },
-);
-const emit = defineEmits(['change', 'update:value', 'delete']);
-const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-const isInnerOperate = ref<boolean>(false);
-const { getStringAccept } = useUploadType({
-  acceptRef: accept,
-  helpTextRef: helpText,
-  maxNumberRef: maxNumber,
-  maxSizeRef: maxSize,
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  api: () => uploadApi,
+  removeOnError: true,
+  showSuccessMsg: true,
+  removeConfirm: false,
+  accept: defaultFileAcceptExts.join(','),
+  data: () => undefined,
+  maxCount: 1,
+  maxSize: 5,
+  disabled: false,
+  helpMessage: true,
+  preview: defaultFilePreview,
+  enableDragUpload: false,
+  directory: false,
+  abortOnUnmounted: true,
+  listType: 'text',
 });
 
-const fileList = ref<UploadProps['fileList']>([]);
-const isLtMsg = ref<boolean>(true);
-const isActMsg = ref<boolean>(true);
-const isFirstRender = ref<boolean>(true);
+const emit = defineEmits<UploadEmits>();
 
-watch(
-  () => props.value,
-  (v) => {
-    if (isInnerOperate.value) {
-      isInnerOperate.value = false;
-      return;
-    }
-    let value: string[] = [];
-    if (v) {
-      if (isArray(v)) {
-        value = v;
-      } else {
-        value.push(v);
-      }
-      fileList.value = value.map((item, i) => {
-        if (item && isString(item)) {
-          return {
-            uid: `${-i}`,
-            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-            status: 'done',
-            url: item,
-          };
-        } else if (item && isObject(item)) {
-          return item;
-        }
-        return null;
-      }) as UploadProps['fileList'];
-    }
-    if (!isFirstRender.value) {
-      emit('change', value);
-      isFirstRender.value = false;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-);
+/** 返回不同的上传组件 */
+const CurrentUploadComponent = computed(() => {
+  if (props.enableDragUpload) {
+    return Upload.Dragger;
+  }
+  return Upload;
+});
 
-const handleRemove = async (file: UploadFile) => {
-  if (fileList.value) {
-    const index = fileList.value.findIndex((item) => item.uid === file.uid);
-    index !== -1 && fileList.value.splice(index, 1);
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-    emit('delete', file);
-  }
-};
+// 双向绑定 ossId
+const ossIdList = defineModel<string | string[]>('value', {
+  default: () => [],
+});
 
-const beforeUpload = async (file: File) => {
-  const { maxSize, accept } = props;
-  const isAct = await checkFileType(file, accept);
-  if (!isAct) {
-    message.error($t('component.upload.acceptUpload', [accept]));
-    isActMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isActMsg.value = true), 1000);
-  }
-  const isLt = file.size / 1024 / 1024 > maxSize;
-  if (isLt) {
-    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
-    isLtMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isLtMsg.value = true), 1000);
-  }
-  return (isAct && !isLt) || Upload.LIST_IGNORE;
-};
-
-async function customRequest(info: UploadRequestOption<any>) {
-  const { api } = props;
-  if (!api || !isFunction(api)) {
-    console.warn('upload api must exist and be a function');
-    return;
-  }
-  try {
-    // 进度条事件
-    const progressEvent: AxiosProgressEvent = (e) => {
-      const percent = Math.trunc((e.loaded / e.total!) * 100);
-      info.onProgress!({ percent });
-    };
-    const res = await api?.(info.file as File, progressEvent);
-    /**
-     * 由getValue处理 传对象过去
-     * 直接传string(id)会被转为Number
-     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
-     */
-    info.onSuccess!(res);
-    message.success($t('component.upload.uploadSuccess'));
-    // 获取
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-  } catch (error: any) {
-    console.error(error);
-    info.onError!(error);
-  }
-}
-
-function getValue() {
-  const list = (fileList.value || [])
-    .filter((item) => item?.status === UploadResultStatus.DONE)
-    .map((item: any) => {
-      if (item?.response && props?.resultField) {
-        return item?.response?.[props.resultField];
-      }
-      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
-      if (item?.url) {
-        return item.url;
-      }
-      // 注意这里取的key为 url
-      return item?.response?.url;
-    });
-  return list;
-}
+const {
+  customRequest,
+  acceptStr,
+  handleChange,
+  handleRemove,
+  beforeUpload,
+  innerFileList,
+} = useUpload(props, emit, ossIdList, 'file');
 </script>
 
+<!--
+Upload.Dragger只会影响样式
+使用普通Upload也是支持拖拽上传的
+-->
 <template>
   <div>
-    <Upload
-      v-bind="$attrs"
-      v-model:file-list="fileList"
-      :accept="getStringAccept"
+    <CurrentUploadComponent
+      v-model:file-list="innerFileList"
+      :accept="accept"
+      :list-type="listType"
+      :disabled="disabled"
+      :directory="directory"
+      :max-count="maxCount"
+      :progress="{ showInfo: true }"
+      :multiple="multiple"
       :before-upload="beforeUpload"
       :custom-request="customRequest"
-      :disabled="disabled"
-      :max-count="maxNumber"
-      :multiple="multiple"
-      list-type="text"
-      :progress="{ showInfo: true }"
+      @preview="preview"
+      @change="handleChange"
       @remove="handleRemove"
     >
-      <div v-if="fileList && fileList.length < maxNumber">
-        <a-button>
+      <div v-if="!enableDragUpload && innerFileList?.length < maxCount">
+        <a-button :disabled="disabled">
           <UploadOutlined />
           {{ $t('component.upload.upload') }}
         </a-button>
       </div>
-      <div v-if="showDescription" class="mt-2 flex flex-wrap items-center">
-        请上传不超过
-        <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
-        的
-        <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
-        格式文件
+      <div v-if="enableDragUpload">
+        <p class="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p class="ant-upload-text">
+          {{ $t('component.upload.clickOrDrag') }}
+        </p>
       </div>
-    </Upload>
+    </CurrentUploadComponent>
+    <slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
+      <I18nT
+        v-if="helpMessage"
+        scope="global"
+        keypath="component.upload.uploadHelpMessage"
+        tag="div"
+        class="mt-2"
+        :class="{ 'upload-text__disabled': disabled }"
+      >
+        <template #size>
+          <span
+            class="text-primary mx-1 font-medium"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ maxSize }}MB
+          </span>
+        </template>
+        <template #ext>
+          <span
+            class="text-primary mx-1 font-medium"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ acceptStr }}
+          </span>
+        </template>
+      </I18nT>
+    </slot>
   </div>
 </template>
 
-<style>
-.ant-upload-select-picture-card i {
-  font-size: 32px;
-  color: #999;
-}
+<style lang="scss">
+// 禁用的样式和antd保持一致
+.upload-text__disabled {
+  color: rgb(50 54 57 / 25%);
+  cursor: not-allowed;
 
-.ant-upload-select-picture-card .ant-upload-text {
-  margin-top: 8px;
-  color: #666;
+  &:where(.dark, .dark *) {
+    color: rgb(242 242 242 / 25%);
+  }
 }
 </style>

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

@@ -1,51 +1,28 @@
-import { fileTypeFromBlob } from '@vben/utils';
+import type { UploadFile } from 'ant-design-vue';
 
 /**
- * 不支持txt文件 @see https://github.com/sindresorhus/file-type/issues/55
- * 需要自行修改
- * @param file file对象
- * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
- * @returns 是否通过文件类型校验
+ * 默认支持上传的图片文件类型
  */
-export async function checkFileType(file: File, accepts: string[]) {
-  if (!accepts || accepts?.length === 0) {
-    return true;
-  }
-  console.log(file);
-  const fileType = await fileTypeFromBlob(file);
-  if (!fileType) {
-    console.error('无法获取文件类型');
-    return false;
-  }
-  console.log('文件类型', fileType);
-  // 是否文件拓展名/文件头任意有一个匹配
-  return accepts.includes(fileType.ext) || accepts.includes(fileType.mime);
-}
+export const defaultImageAcceptExts = [
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.gif',
+  '.webp',
+];
 
 /**
- * 默认图片类型
+ * 默认支持上传的文件类型
  */
-export const defaultImageAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+export const defaultFileAcceptExts = ['.xlsx', '.csv', '.docx', '.pdf'];
+
 /**
- * 判断文件类型是否符合要求
- * @param file file对象
- * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
- * @returns 是否通过文件类型校验
+ * 文件(非图片)的默认预览逻辑
+ * 默认: window.open打开 交给浏览器接管
+ * @param file file
  */
-export async function checkImageFileType(file: File, accepts: string[]) {
-  // 空的accepts 使用默认规则
-  if (!accepts || accepts.length === 0) {
-    accepts = defaultImageAccept;
+export function defaultFilePreview(file: UploadFile) {
+  if (file?.url) {
+    window.open(file.url);
   }
-  const fileType = await fileTypeFromBlob(file);
-  if (!fileType) {
-    console.error('无法获取文件类型');
-    return false;
-  }
-  console.log('文件类型', fileType);
-  // 是否文件拓展名/文件头任意有一个匹配
-  if (accepts.includes(fileType.ext) || accepts.includes(fileType.mime)) {
-    return true;
-  }
-  return false;
 }

apps/web-antd/src/components/upload/src/hook.ts

@@ -0,0 +1,385 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { UploadChangeParam, UploadFile } from 'ant-design-vue';
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+import type {
+  RcFile,
+  UploadRequestOption,
+} from 'ant-design-vue/es/vc-upload/interface';
+
+import type { ModelRef } from 'vue';
+
+import type {
+  BaseUploadProps,
+  CustomGetter,
+  UploadEmits,
+  UploadType,
+} from './props';
+
+import type { AxiosProgressEvent, UploadResult } from '#/api';
+import type { OssFile } from '#/api/system/oss/model';
+
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { message, Modal } from 'ant-design-vue';
+import { isFunction, isString } from 'lodash-es';
+
+import { ossInfo } from '#/api/system/oss';
+
+/**
+ * 图片预览hook
+ * @returns 预览
+ */
+export function useImagePreview() {
+  /**
+   * 获取base64字符串
+   * @param file 文件
+   * @returns base64字符串
+   */
+  function getBase64(file: File) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.addEventListener('load', () => resolve(reader.result));
+      reader.addEventListener('error', (error) => reject(error));
+    });
+  }
+
+  // Modal可见
+  const previewVisible = ref(false);
+  // 预览的图片 url/base64
+  const previewImage = ref('');
+  // 预览的图片名称
+  const previewTitle = ref('');
+
+  function handleCancel() {
+    previewVisible.value = false;
+    previewTitle.value = '';
+  }
+
+  async function handlePreview(file: UploadFile) {
+    if (!file) {
+      return;
+    }
+    // 文件预览 取base64
+    if (!file.url && !file.preview && file.originFileObj) {
+      file.preview = (await getBase64(file.originFileObj)) as string;
+    }
+    // 这里不可能为空
+    const url = file.url ?? '';
+    previewImage.value = url || file.preview || '';
+    previewVisible.value = true;
+    previewTitle.value =
+      file.name || url.slice(Math.max(0, url.lastIndexOf('/') + 1));
+  }
+
+  return {
+    previewVisible,
+    previewImage,
+    previewTitle,
+    handleCancel,
+    handlePreview,
+  };
+}
+
+/**
+ * 图片上传和文件上传的通用hook
+ * @param props 组件props
+ * @param emit 事件
+ * @param bindValue 双向绑定的idList
+ * @param uploadType 区分是文件还是图片上传
+ * @returns hook
+ */
+export function useUpload(
+  props: Readonly<BaseUploadProps>,
+  emit: UploadEmits,
+  bindValue: ModelRef<string | string[]>,
+  uploadType: UploadType,
+) {
+  // 组件内部维护fileList
+  const innerFileList = ref<UploadFile[]>([]);
+
+  const acceptStr = computed(() => {
+    // string类型
+    if (isString(props.acceptFormat)) {
+      return props.acceptFormat;
+    }
+    // 函数类型
+    if (isFunction(props.acceptFormat)) {
+      return props.acceptFormat(props.accept!);
+    }
+    // 默认 会对拓展名做处理
+    return props.accept
+      ?.split(',')
+      .map((item) => {
+        if (item.startsWith('.')) {
+          return item.slice(1);
+        }
+        return item;
+      })
+      .join(', ');
+  });
+
+  /**
+   * 自定义文件显示名称 需要区分不同的接口
+   * @param cb callback
+   * @returns 文件名
+   */
+  function transformFilename(cb: Parameters<CustomGetter<string>>[0]) {
+    if (isFunction(props.customFilename)) {
+      return props.customFilename(cb);
+    }
+    // info接口
+    if (cb.type === 'info') {
+      return cb.response.originalName;
+    }
+    // 上传接口
+    return cb.response.fileName;
+  }
+
+  /**
+   * 自定义缩略图 需要区分不同的接口
+   * @param cb callback
+   * @returns 缩略图地址
+   */
+  function transformThumbUrl(cb: Parameters<CustomGetter<undefined>>[0]) {
+    if (isFunction(props.customThumbUrl)) {
+      return props.customThumbUrl(cb);
+    }
+    // image 默认返回图片链接
+    if (uploadType === 'image') {
+      // info接口
+      if (cb.type === 'info') {
+        return cb.response.url;
+      }
+      // 上传接口
+      return cb.response.url;
+    }
+    // 文件默认返回空 走antd默认的预览图逻辑
+    return undefined;
+  }
+
+  // 用来标识是否为上传 这样在watch内部不需要请求api
+  let isUpload = false;
+  function handleChange(info: UploadChangeParam) {
+    /**
+     * 移除当前文件
+     * @param currentFile 当前文件
+     * @param currentFileList 当前所有文件list
+     */
+    function removeCurrentFile(
+      currentFile: UploadChangeParam['file'],
+      currentFileList: UploadChangeParam['fileList'],
+    ) {
+      if (props.removeOnError) {
+        currentFileList.splice(currentFileList.indexOf(currentFile), 1);
+      } else {
+        currentFile.status = 'error';
+      }
+    }
+
+    const { file: currentFile, fileList } = info;
+
+    switch (currentFile.status) {
+      // 上传成功 只是判断httpStatus 200 需要手动判断业务code
+      case 'done': {
+        if (!currentFile.response) {
+          return;
+        }
+        // 获取返回结果 为customRequest的reslove参数
+        // 只有success才会走到这里
+        const { ossId, url } = currentFile.response as UploadResult;
+        currentFile.url = url;
+        currentFile.uid = ossId;
+
+        const cb = {
+          type: 'upload',
+          response: currentFile.response as UploadResult,
+        } as const;
+
+        currentFile.fileName = transformFilename(cb);
+        currentFile.name = transformFilename(cb);
+        currentFile.thumbUrl = transformThumbUrl(cb);
+        // 标记为上传 watch根据值做处理
+        isUpload = true;
+        // ossID添加 单个文件会被当做string
+        if (props.maxCount === 1) {
+          bindValue.value = ossId;
+        } else {
+          // 给默认值
+          if (!Array.isArray(bindValue.value)) {
+            bindValue.value = [];
+          }
+          // 直接使用.value无法触发useForm的更新(原生是正常的) 需要修改地址
+          bindValue.value = [...bindValue.value, ossId];
+        }
+        break;
+      }
+      // 上传失败 网络原因导致httpStatus 不等于200
+      case 'error': {
+        removeCurrentFile(currentFile, fileList);
+      }
+    }
+    emit('change', info);
+  }
+
+  function handleRemove(currentFile: UploadFile) {
+    function remove() {
+      // fileList会自行处理删除 这里只需要处理ossId
+      if (props.maxCount === 1) {
+        bindValue.value = '';
+      } else {
+        (bindValue.value as string[]).splice(
+          bindValue.value.indexOf(currentFile.uid),
+          1,
+        );
+      }
+      // 触发remove事件
+      emit('remove', currentFile);
+    }
+
+    if (!props.removeConfirm) {
+      remove();
+      return true;
+    }
+
+    return new Promise<boolean>((resolve) => {
+      Modal.confirm({
+        title: $t('pages.common.tip'),
+        content: $t('component.upload.confirmDelete', [currentFile.name]),
+        okButtonProps: { danger: true },
+        centered: true,
+        onOk() {
+          resolve(true);
+          remove();
+        },
+        onCancel() {
+          resolve(false);
+        },
+      });
+    });
+  }
+
+  /**
+   * 上传前检测文件大小
+   * 拖拽时候前置会有浏览器自身的accept校验 校验失败不会执行此方法
+   * @param file file
+   * @returns file | false
+   */
+  function beforeUpload(file: FileType) {
+    const isLtMax = file.size / 1024 / 1024 < props.maxSize!;
+    if (!isLtMax) {
+      message.error($t('component.upload.maxSize', [props.maxSize]));
+      return false;
+    }
+    // 大坑 Safari不支持file-type库 去除文件类型的校验
+    return file;
+  }
+
+  const uploadAbort = new AbortController();
+  /**
+   * 自定义上传实现
+   * @param info
+   */
+  async function customRequest(info: UploadRequestOption<any>) {
+    const { api } = props;
+    if (!isFunction(api)) {
+      console.warn('upload api must exist and be a function');
+      return;
+    }
+    try {
+      // 进度条事件
+      const progressEvent: AxiosProgressEvent = (e) => {
+        const percent = Math.trunc((e.loaded / e.total!) * 100);
+        info.onProgress!({ percent });
+      };
+      const res = await api(info.file as File, {
+        onUploadProgress: progressEvent,
+        signal: uploadAbort.signal,
+        otherData: props?.data,
+      });
+      info.onSuccess!(res);
+      if (props.showSuccessMsg) {
+        message.success($t('component.upload.uploadSuccess'));
+      }
+      emit('success', info.file as RcFile, res);
+    } catch (error: any) {
+      console.error(error);
+      info.onError!(error);
+    }
+  }
+
+  onUnmounted(() => {
+    props.abortOnUnmounted && uploadAbort.abort();
+  });
+
+  /**
+   * 这里默认只监听list地址变化 即重新赋值才会触发watch
+   * immediate用于初始化触发
+   */
+  watch(
+    () => bindValue.value,
+    async (value) => {
+      if (value.length === 0) {
+        // 清空绑定值时，同时清空innerFileList，避免外部使用时还能读取到
+        innerFileList.value = [];
+        return;
+      }
+
+      // 上传完毕 不需要调用获取信息接口
+      if (isUpload) {
+        // 清理 使下一次状态可用
+        isUpload = false;
+        return;
+      }
+
+      const resp = await ossInfo(value);
+      function transformFile(info: OssFile) {
+        const cb = { type: 'info', response: info } as const;
+
+        const fileitem: UploadFile = {
+          uid: info.ossId,
+          name: transformFilename(cb),
+          fileName: transformFilename(cb),
+          url: info.url,
+          thumbUrl: transformThumbUrl(cb),
+          status: 'done',
+        };
+        return fileitem;
+      }
+      const transformOptions = resp.map((item) => transformFile(item));
+      innerFileList.value = transformOptions;
+      // 单文件 丢弃策略
+      if (props.maxCount === 1 && resp.length === 0 && !props.keepMissingId) {
+        bindValue.value = '';
+        return;
+      }
+      // 多文件
+      // 单文件查到了也会走这里的逻辑 filter会报错 需要maxCount判断处理
+      if (
+        resp.length !== value.length &&
+        !props.keepMissingId &&
+        props.maxCount !== 1
+      ) {
+        // 给默认值
+        if (!Array.isArray(bindValue.value)) {
+          bindValue.value = [];
+        }
+        bindValue.value = bindValue.value.filter((ossId) =>
+          resp.map((res) => res.ossId).includes(ossId),
+        );
+      }
+    },
+    { immediate: true },
+  );
+
+  return {
+    handleChange,
+    handleRemove,
+    beforeUpload,
+    customRequest,
+    innerFileList,
+    acceptStr,
+  };
+}

apps/web-antd/src/components/upload/src/image-upload.vue

@@ -1,326 +1,190 @@
-<script lang="ts" setup>
-import type { UploadFile, UploadProps } from 'ant-design-vue';
-import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+<!--
+不再支持url 统一使用ossId
+去除使用`file-type`库进行文件类型检测 在Safari无法使用
+-->
+<script setup lang="ts">
+import type {
+  UploadFile,
+  UploadListType,
+} from 'ant-design-vue/es/upload/interface';
 
-import type { AxiosResponse } from '@vben/request';
+import type { BaseUploadProps, UploadEmits } from './props';
 
-import type { AxiosProgressEvent } from '#/api';
+import { $t, I18nT } from '@vben/locales';
 
-import { ref, toRefs, watch } from 'vue';
-
-import { $t } from '@vben/locales';
-
-import { PlusOutlined } from '@ant-design/icons-vue';
-import { message, Modal, Upload } from 'ant-design-vue';
-import { isArray, isFunction, isObject, isString, uniqueId } from 'lodash-es';
+import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
+import { Image, ImagePreviewGroup, Upload } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
 
 import { uploadApi } from '#/api';
-import { ossInfo } from '#/api/system/oss';
 
-import { checkImageFileType, defaultImageAccept } from './helper';
-import { UploadResultStatus } from './typing';
-import { useUploadType } from './use-upload';
+import { defaultImageAcceptExts } from './helper';
+import { useImagePreview, useUpload } from './hook';
 
-defineOptions({ name: 'ImageUpload', inheritAttrs: false });
+interface ImageUploadProps extends BaseUploadProps {
+  /**
+   * 同antdv的listType
+   * @default picture-card
+   */
+  listType?: UploadListType;
+  /**
+   * 使用list-type: picture-card时 是否显示动画
+   * 会有一个`弹跳`的效果 默认关闭
+   * @default false
+   */
+  withAnimation?: boolean;
+}
 
-const props = withDefaults(
-  defineProps<{
-    /**
-     * 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
-     */
-    accept?: string[];
-    api?: (
-      file: Blob | File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    disabled?: boolean;
-    helpText?: string;
-    // eslint-disable-next-line no-use-before-define
-    listType?: ListType;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    // 返回的字段 默认url
-    resultField?: 'fileName' | 'ossId' | 'url';
-    /**
-     * 是否显示下面的描述
-     */
-    showDescription?: boolean;
-    value?: string | string[];
-  }>(),
-  {
-    value: () => [],
-    disabled: false,
-    listType: 'picture-card',
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => defaultImageAccept,
-    multiple: false,
-    api: uploadApi,
-    resultField: 'url',
-    showDescription: true,
-  },
-);
-const emit = defineEmits(['change', 'update:value', 'delete']);
-type ListType = 'picture' | 'picture-card' | 'text';
-const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-const isInnerOperate = ref<boolean>(false);
-const { getStringAccept } = useUploadType({
-  acceptRef: accept,
-  helpTextRef: helpText,
-  maxNumberRef: maxNumber,
-  maxSizeRef: maxSize,
+const props = withDefaults(defineProps<ImageUploadProps>(), {
+  api: () => uploadApi,
+  removeOnError: true,
+  showSuccessMsg: true,
+  removeConfirm: false,
+  accept: defaultImageAcceptExts.join(','),
+  data: () => undefined,
+  maxCount: 1,
+  maxSize: 5,
+  disabled: false,
+  listType: 'picture-card',
+  helpMessage: true,
+  enableDragUpload: false,
+  abortOnUnmounted: true,
+  withAnimation: false,
 });
-const previewOpen = ref<boolean>(false);
-const previewImage = ref<string>('');
-const previewTitle = ref<string>('');
 
-const fileList = ref<UploadProps['fileList']>([]);
-const isLtMsg = ref<boolean>(true);
-const isActMsg = ref<boolean>(true);
-const isFirstRender = ref<boolean>(true);
+const emit = defineEmits<UploadEmits>();
 
-watch(
-  () => props.value,
-  async (v) => {
-    if (isInnerOperate.value) {
-      isInnerOperate.value = false;
-      return;
-    }
-    let value: string | string[] = [];
-    if (v) {
-      const _fileList: string[] = [];
-      if (isString(v)) {
-        _fileList.push(v);
-      }
-      if (isArray(v)) {
-        _fileList.push(...v);
-      }
-      // 直接赋值 可能为string | string[]
-      value = v;
-      const withUrlList: UploadProps['fileList'] = [];
-      for (const item of _fileList) {
-        // ossId情况
-        if (props.resultField === 'ossId') {
-          const resp = await ossInfo([item]);
-          if (item && isString(item)) {
-            withUrlList.push({
-              uid: item, // ossId作为uid 方便getValue获取
-              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-              status: 'done',
-              url: resp?.[0]?.url,
-            });
-          } else if (item && isObject(item)) {
-            withUrlList.push({
-              ...(item as any),
-              uid: item,
-              url: resp?.[0]?.url,
-            });
-          }
-        } else {
-          // 非ossId情况
-          if (item && isString(item)) {
-            withUrlList.push({
-              uid: uniqueId(),
-              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-              status: 'done',
-              url: item,
-            });
-          } else if (item && isObject(item)) {
-            withUrlList.push(item);
-          }
-        }
-      }
-      fileList.value = withUrlList;
-    }
-    if (!isFirstRender.value) {
-      emit('change', value);
-      isFirstRender.value = false;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-);
+// 双向绑定 ossId
+const ossIdList = defineModel<string | string[]>('value', {
+  default: () => [],
+});
 
-function getBase64<T extends ArrayBuffer | null | string>(file: File) {
-  return new Promise<T>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.addEventListener('load', () => {
-      resolve(reader.result as T);
-    });
-    reader.addEventListener('error', (error) => reject(error));
-  });
-}
+const {
+  acceptStr,
+  handleChange,
+  handleRemove,
+  beforeUpload,
+  innerFileList,
+  customRequest,
+} = useUpload(props, emit, ossIdList, 'image');
 
-const handlePreview = async (file: UploadFile) => {
-  if (!file.url && !file.preview) {
-    file.preview = await getBase64<string>(file.originFileObj!);
+const { previewVisible, previewImage, handleCancel, handlePreview } =
+  useImagePreview();
+
+function currentPreview(file: UploadFile) {
+  // 有自定义预览逻辑走自定义
+  if (isFunction(props.preview)) {
+    return props.preview(file);
   }
-  previewImage.value = file.url || file.preview || '';
-  previewOpen.value = true;
-  previewTitle.value =
-    file.name ||
-    previewImage.value.slice(
-      Math.max(0, previewImage.value.lastIndexOf('/') + 1),
-    );
-};
-
-const handleRemove = async (file: UploadFile) => {
-  if (fileList.value) {
-    const index = fileList.value.findIndex((item) => item.uid === file.uid);
-    index !== -1 && fileList.value.splice(index, 1);
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-    emit('delete', file);
-  }
-};
-
-const handleCancel = () => {
-  previewOpen.value = false;
-  previewTitle.value = '';
-};
-
-const beforeUpload = async (file: File) => {
-  const { maxSize, accept } = props;
-  const isAct = await checkImageFileType(file, accept);
-  if (!isAct) {
-    message.error($t('component.upload.acceptUpload', [accept]));
-    isActMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isActMsg.value = true), 1000);
-  }
-  const isLt = file.size / 1024 / 1024 > maxSize;
-  if (isLt) {
-    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
-    isLtMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isLtMsg.value = true), 1000);
-  }
-  return (isAct && !isLt) || Upload.LIST_IGNORE;
-};
-
-async function customRequest(info: UploadRequestOption<any>) {
-  const { api } = props;
-  if (!api || !isFunction(api)) {
-    console.warn('upload api must exist and be a function');
-    return;
-  }
-  try {
-    // 进度条事件
-    const progressEvent: AxiosProgressEvent = (e) => {
-      const percent = Math.trunc((e.loaded / e.total!) * 100);
-      info.onProgress!({ percent });
-    };
-    const res = await api?.(info.file as File, progressEvent);
-    /**
-     * 由getValue处理 传对象过去
-     * 直接传string(id)会被转为Number
-     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
-     */
-    info.onSuccess!(res);
-    message.success($t('component.upload.uploadSuccess'));
-    // 获取
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-  } catch (error: any) {
-    console.error(error);
-    info.onError!(error);
-  }
-}
-
-function getValue() {
-  console.log(fileList.value);
-  const list = (fileList.value || [])
-    .filter((item) => item?.status === UploadResultStatus.DONE)
-    .map((item: any) => {
-      if (item?.response && props?.resultField) {
-        return item?.response?.[props.resultField];
-      }
-      // ossId兼容 uid为ossId直接返回
-      if (props.resultField === 'ossId' && item.uid) {
-        return item.uid;
-      }
-      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
-      if (item?.url) {
-        return item.url;
-      }
-      // 注意这里取的key为 url
-      return item?.response?.url;
-    });
-  // 只有一张图片 默认绑定string而非string[]
-  if (props.maxNumber === 1 && list.length === 1) {
-    return list[0];
-  }
-  // 只有一张图片 && 删除图片时 可自行修改
-  if (props.maxNumber === 1 && list.length === 0) {
-    return '';
-  }
-  return list;
+  // 否则走默认预览
+  return handlePreview(file);
 }
 </script>
 
 <template>
   <div>
     <Upload
-      v-bind="$attrs"
-      v-model:file-list="fileList"
-      :accept="getStringAccept"
+      v-model:file-list="innerFileList"
+      :class="{ 'upload-animation__disabled': !withAnimation }"
+      :list-type="listType"
+      :accept="accept"
+      :disabled="disabled"
+      :directory="directory"
+      :max-count="maxCount"
+      :progress="{ showInfo: true }"
+      :multiple="multiple"
       :before-upload="beforeUpload"
       :custom-request="customRequest"
-      :disabled="disabled"
-      :list-type="listType"
-      :max-count="maxNumber"
-      :multiple="multiple"
-      :progress="{ showInfo: true }"
-      @preview="handlePreview"
+      @preview="currentPreview"
+      @change="handleChange"
       @remove="handleRemove"
     >
-      <div v-if="fileList && fileList.length < maxNumber">
+      <div
+        v-if="innerFileList?.length < maxCount && listType === 'picture-card'"
+      >
         <PlusOutlined />
-        <div style="margin-top: 8px">{{ $t('component.upload.upload') }}</div>
+        <div class="mt-[8px]">{{ $t('component.upload.upload') }}</div>
       </div>
+      <a-button
+        v-if="innerFileList?.length < maxCount && listType !== 'picture-card'"
+        :disabled="disabled"
+      >
+        <UploadOutlined />
+        {{ $t('component.upload.upload') }}
+      </a-button>
     </Upload>
-    <div
-      v-if="showDescription"
-      class="mt-2 flex flex-wrap items-center text-[14px]"
+    <slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
+      <I18nT
+        v-if="helpMessage"
+        scope="global"
+        keypath="component.upload.uploadHelpMessage"
+        tag="div"
+        :class="{
+          'upload-text__disabled': disabled,
+          'mt-2': listType !== 'picture-card',
+        }"
+      >
+        <template #size>
+          <span
+            class="text-primary mx-1 font-medium"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ maxSize }}MB
+          </span>
+        </template>
+        <template #ext>
+          <span
+            class="text-primary mx-1 font-medium"
+            :class="{ 'upload-text__disabled': disabled }"
+          >
+            {{ acceptStr }}
+          </span>
+        </template>
+      </I18nT>
+    </slot>
+
+    <ImagePreviewGroup
+      :preview="{
+        visible: previewVisible,
+        onVisibleChange: handleCancel,
+      }"
     >
-      请上传不超过
-      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
-      的
-      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
-      格式文件
-    </div>
-    <Modal
-      :footer="null"
-      :open="previewOpen"
-      :title="previewTitle"
-      @cancel="handleCancel"
-    >
-      <img :src="previewImage" alt="" style="width: 100%" />
-    </Modal>
+      <Image class="hidden" :src="previewImage" />
+    </ImagePreviewGroup>
   </div>
 </template>
 
-<style>
-.ant-upload-select-picture-card i {
-  font-size: 32px;
-  color: #999;
+<style lang="scss">
+.ant-upload-select-picture-card {
+  i {
+    @apply text-[32px] text-[#999];
+  }
+
+  .ant-upload-text {
+    @apply mt-[8px] text-[#666];
+  }
 }
 
-.ant-upload-select-picture-card .ant-upload-text {
-  margin-top: 8px;
-  color: #666;
+.ant-upload-list-picture-card {
+  .ant-upload-list-item::before {
+    border-radius: 4px;
+  }
+}
+
+// 禁用的样式和antd保持一致
+.upload-text__disabled {
+  color: rgb(50 54 57 / 25%);
+  cursor: not-allowed;
+
+  &:where(.dark, .dark *) {
+    color: rgb(242 242 242 / 25%);
+  }
+}
+
+// list-type: picture-card动画效果关闭样式
+.upload-animation__disabled {
+  .ant-upload-animate-inline {
+    animation-duration: 0s !important;
+  }
 }
 </style>

apps/web-antd/src/components/upload/src/note.md

@@ -0,0 +1,26 @@
+Safari在执行到beforeUpload方法
+
+有两种情况
+
+1. 不继续执行 也无法上传(没有调用上传)
+2. 报错
+
+Unhandled Promise Rejection: TypeError: ReadableStreamBYOBReader needs a ReadableByteStreamController
+
+https://github.com/oven-sh/bun/issues/12908#issuecomment-2490151231
+
+刚开始以为是异步的问题 由于`file-type`调用了异步方法 调试也是在这里没有后续打印了
+
+使用别的异步代码测试结果是正常上传的
+
+```js
+return new Promise<FileType>((resolve) =>
+  setTimeout(() => resolve(file), 2000),
+);
+```
+
+根本原因在于`file-typ`库的`fileTypeFromBlob`方法不支持Safari 去掉可以正常上传
+
+safari不支持`ReadableStreamBYOBReader`api
+
+详见: https://github.com/sindresorhus/file-type/issues/690

apps/web-antd/src/components/upload/src/props.d.ts

@@ -0,0 +1,122 @@
+import type { UploadFile } from 'ant-design-vue';
+import type { RcFile } from 'ant-design-vue/es/vc-upload/interface';
+
+import type { UploadApi, UploadResult } from '#/api';
+import type { OssFile } from '#/api/system/oss/model';
+
+import { UploadChangeParam } from 'ant-design-vue';
+
+export type UploadType = 'file' | 'image';
+
+/**
+ * 自定义返回文件名/缩略图使用 泛型控制返回是否必填
+ * type 为不同的接口返回值 需要自行if判断
+ */
+export type CustomGetter<T extends string | undefined> = (
+  cb:
+    | { response: OssFile; type: 'info' }
+    | { response: UploadResult; type: 'upload' },
+) => T extends undefined ? string | undefined : string;
+
+export interface BaseUploadProps {
+  /**
+   * 上传接口
+   */
+  api?: UploadApi;
+  /**
+   * 文件上传失败 是否从展示列表中删除
+   * @default true
+   */
+  removeOnError?: boolean;
+  /**
+   * 上传成功 是否展示提示信息
+   * @default true
+   */
+  showSuccessMsg?: boolean;
+  /**
+   * 删除文件前是否需要确认
+   * @default false
+   */
+  removeConfirm?: boolean;
+  /**
+   * 同antdv参数
+   */
+  accept?: string;
+  /**
+   * 你可能使用的是application/pdf这种mime类型, 但是这样用户可能看不懂, 在这里自定义逻辑
+   * @default 原始accept
+   */
+  acceptFormat?: ((accept: string) => string) | string;
+  /**
+   * 附带的请求参数
+   */
+  data?: any;
+  /**
+   * 最大上传图片数量
+   * maxCount为1时 会被绑定为string而非string[]
+   * @default 1
+   */
+  maxCount?: number;
+  /**
+   * 文件最大 单位M
+   * @default 5
+   */
+  maxSize?: number;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否显示文案 请上传不超过...
+   * @default true
+   */
+  helpMessage?: boolean;
+  /**
+   * 是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 是否支持上传文件夹
+   * @default false
+   */
+  directory?: boolean;
+  /**
+   * 是否支持拖拽上传
+   * @default false
+   */
+  enableDragUpload?: boolean;
+  /**
+   * 当ossId查询不到文件信息时  比如被删除了
+   * 是否保留列表对应的ossId 默认不保留
+   * @default false
+   */
+  keepMissingId?: boolean;
+  /**
+   * 自定义文件/图片预览逻辑 比如: 你可以改为下载
+   * 图片上传默认为预览
+   * 文件上传默认为window.open
+   * @param file file
+   */
+  preview?: (file: UploadFile) => Promise<void> | void;
+  /**
+   * 是否在组件Unmounted时取消上传
+   * @default true
+   */
+  abortOnUnmounted?: boolean;
+  /**
+   * 自定义文件名 需要区分两个接口的返回值
+   */
+  customFilename?: CustomGetter<string>;
+  /**
+   * 自定义缩略图 需要区分两个接口的返回值
+   */
+  customThumbUrl?: CustomGetter<undefined>;
+}
+
+export interface UploadEmits {
+  (e: 'success', file: RcFile, response: UploadResult): void;
+  (e: 'remove', file: UploadFile): void;
+  (e: 'change', info: UploadChangeParam): void;
+}

apps/web-antd/src/layouts/basic.vue

@@ -116,7 +116,7 @@ watch(
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
       });
     } else {
       destroyWatermark();

apps/web-antd/src/locales/langs/en-US/component.json

@@ -50,6 +50,10 @@
     "uploadError": "Upload failed",
     "uploading": "Uploading",
     "uploadWait": "Please wait for the file upload to finish",
-    "reUploadFailed": "Re-upload failed files"
+    "reUploadFailed": "Re-upload failed files",
+    "uploadHelpMessage": "Please upload a file in {ext} format that does not exceed {size} .",
+    "unknownFileType": "Unknown file type, unable to upload",
+    "confirmDelete": "Confirm file deletion {0}?",
+    "clickOrDrag": "Click or drag file to this area to upload"
   }
 }

apps/web-antd/src/locales/langs/en-US/pages.json

@@ -18,6 +18,10 @@
     "refresh": "Refresh",
     "generate": "Generate",
     "downloadLoading": "Downloading... Please wait.",
-    "preview": "Preview"
+    "preview": "Preview",
+    "tip": "Tip",
+    "enable": "On",
+    "disable": "Off",
+    "beforeCloseTip": "You have unsaved changes. Are you sure you want to exit?"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/component.json

@@ -50,6 +50,10 @@
     "uploadError": "上传失败",
     "uploading": "上传中",
     "uploadWait": "请等待文件上传结束后操作",
-    "reUploadFailed": "重新上传失败文件"
+    "reUploadFailed": "重新上传失败文件",
+    "uploadHelpMessage": "请上传不超过{size}的{ext}格式文件",
+    "unknownFileType": "未知的文件类型, 无法上传",
+    "confirmDelete": "确认删除文件 {0}?",
+    "clickOrDrag": "点击或拖动文件到这个区域上传"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/pages.json

@@ -18,6 +18,10 @@
     "refresh": "刷新",
     "generate": "生成",
     "downloadLoading": "下载中, 请稍后...",
-    "preview": "预览"
+    "preview": "预览",
+    "tip": "提示",
+    "enable": "启用",
+    "disable": "禁用",
+    "beforeCloseTip": "您有未保存的更改，确认要退出吗？"
   }
 }

apps/web-antd/src/preferences.ts

@@ -46,6 +46,11 @@ export const overridesPreferences = defineOverridesPreferences({
      * 浅色sidebar
      */
     semiDarkSidebar: false,
+    /**
+     * 圆角大小 换算比例为1.6px = 0.1radius
+     * 这里为6px 与antd保持一致
+     */
+    radius: '0.375',
   },
   /**
    * !!! 更改配置后请清空浏览器缓存

apps/web-antd/src/router/access.ts

@@ -1,6 +1,7 @@
 import type {
   ComponentRecordType,
   GenerateMenuAndRoutesOptions,
+  RouteMeta,
   RouteRecordStringComponent,
 } from '@vben/types';
 
@@ -21,6 +22,37 @@ import { localMenuList } from './routes/local';
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 const NotFoundComponent = () => import('#/views/_core/fallback/not-found.vue');
 
+/**
+ * 后端返回的meta有时候不包括需要的信息 比如activePath等
+ * 在这里定义映射
+ */
+const routeMetaMapping: Record<string, Omit<RouteMeta, 'title'>> = {
+  '/system/role-auth/user/:roleId(\\d+)': {
+    activePath: '/system/role',
+    requireHomeRedirect: true,
+  },
+
+  '/system/oss-config/index': {
+    activePath: '/system/oss',
+    requireHomeRedirect: true,
+  },
+
+  '/tool/gen-edit/index/:tableId(\\d+)': {
+    activePath: '/tool/gen',
+    requireHomeRedirect: true,
+  },
+
+  '/workflow/design/index': {
+    activePath: '/workflow/processDefinition',
+    requireHomeRedirect: true,
+  },
+
+  '/workflow/leaveEdit/index': {
+    activePath: '/demo/leave',
+    requireHomeRedirect: true,
+  },
+};
+
 /**
  * 后台路由转vben路由
  * @param menuList 后台菜单
@@ -98,6 +130,17 @@ function backMenuToVbenMenu(
       path: menu.path,
     };
 
+    // 处理meta映射
+    if (Object.keys(routeMetaMapping).includes(vbenRoute.path)) {
+      const routeMeta = routeMetaMapping[vbenRoute.path];
+      if (routeMeta) {
+        vbenRoute.meta = {
+          ...vbenRoute.meta,
+          ...(routeMeta as RouteMeta),
+        };
+      }
+    }
+
     // 添加路由参数信息
     if (menu.query) {
       try {

apps/web-antd/src/router/guard.ts

@@ -1,6 +1,6 @@
 import type { Router } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { startProgress, stopProgress } from '@vben/utils';
@@ -18,7 +18,7 @@ function setupCommonGuard(router: Router) {
   // 记录已经加载的页面
   const loadedPaths = new Set<string>();
 
-  router.beforeEach(async (to) => {
+  router.beforeEach((to) => {
     to.meta.loaded = loadedPaths.has(to.path);
 
     // 页面加载进度条
@@ -56,7 +56,7 @@ function setupAccessGuard(router: Router) {
         return decodeURIComponent(
           (to.query?.redirect as string) ||
             userStore.userInfo?.homePath ||
-            DEFAULT_HOME_PATH,
+            preferences.app.defaultHomePath,
         );
       }
       return true;
@@ -75,7 +75,7 @@ function setupAccessGuard(router: Router) {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
           query:
-            to.fullPath === DEFAULT_HOME_PATH
+            to.fullPath === preferences.app.defaultHomePath
               ? {}
               : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
@@ -108,8 +108,8 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
     const redirectPath = (from.query.redirect ??
-      (to.path === DEFAULT_HOME_PATH
-        ? userInfo.homePath || DEFAULT_HOME_PATH
+      (to.path === preferences.app.defaultHomePath
+        ? userInfo.homePath || preferences.app.defaultHomePath
         : to.fullPath)) as string;
 
     return {

apps/web-antd/src/router/routes/core.ts

@@ -1,11 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -34,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {
@@ -58,7 +59,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },

apps/web-antd/src/router/routes/local.ts

@@ -2,8 +2,14 @@ import type { RouteRecordStringComponent } from '@vben/types';
 
 import { $t } from '@vben/locales';
 
+const {
+  version,
+  // vite inject-metadata 插件注入的全局变量
+} = __VBEN_ADMIN_METADATA__ || {};
+
 /**
  * 该文件放非后台返回的路由 比如个人中心 等需要跳转显示的页面
+ * 也可以直接在菜单管理配置
  */
 const localRoutes: RouteRecordStringComponent[] = [
   {
@@ -12,68 +18,11 @@ const localRoutes: RouteRecordStringComponent[] = [
       icon: 'mingcute:profile-line',
       title: $t('ui.widgets.profile'),
       hideInMenu: true,
+      requireHomeRedirect: true,
     },
     name: 'Profile',
     path: '/profile',
   },
-  {
-    component: '/system/oss-config/index',
-    meta: {
-      activePath: '/system/oss',
-      icon: 'ant-design:setting-outlined',
-      title: 'oss配置',
-      hideInMenu: true,
-    },
-    name: 'OssConfig',
-    path: '/system/oss-config',
-  },
-  {
-    component: '/tool/gen/edit-gen',
-    meta: {
-      activePath: '/tool/gen',
-      icon: 'tabler:code',
-      title: '生成配置',
-      hideInMenu: true,
-    },
-    name: 'GenConfig',
-    path: '/code-gen/edit/:tableId',
-  },
-  {
-    component: '/system/role-assign/index',
-    meta: {
-      activePath: '/system/role',
-      icon: 'eos-icons:role-binding-outlined',
-      title: '分配角色',
-      hideInMenu: true,
-    },
-    name: 'RoleAssign',
-    path: '/system/role-assign/:roleId',
-  },
-  {
-    component: '/workflow/components/flow-designer',
-    meta: {
-      activePath: '/workflow/processDefinition',
-      icon: 'fluent-mdl2:flow',
-      title: '流程设计',
-      hideInMenu: true,
-    },
-    name: 'WorkflowDesigner',
-    path: '/workflow/designer',
-  },
-  /**
-   * 需要添加iframe路由 同目录的./workflow-iframe.ts
-   */
-  {
-    component: 'workflow/leave/leave-form',
-    meta: {
-      icon: 'flat-color-icons:leave',
-      title: '请假申请',
-      activePath: '/demo/leave',
-      hideInMenu: true,
-    },
-    name: 'WorkflowLeaveIndex',
-    path: '/workflow/leaveEdit/index',
-  },
 ];
 
 /**
@@ -120,6 +69,18 @@ export const localMenuList: RouteRecordStringComponent[] = [
           title: $t('demos.vben.document'),
         },
       },
+      {
+        name: 'V5UpdateLog',
+        path: '/changelog',
+        component: '/演示使用自行删除/changelog/index',
+        meta: {
+          icon: 'lucide:book-open-text',
+          keepAlive: true,
+          title: '更新记录',
+          badge: `当前: ${version}`,
+          badgeVariants: 'bg-primary',
+        },
+      },
     ],
   },
   {

apps/web-antd/src/store/auth.ts

@@ -4,7 +4,8 @@ import type { UserInfo } from '@vben/types';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
 import { notification } from 'ant-design-vue';
@@ -55,7 +56,9 @@ export const useAuthStore = defineStore('auth', () => {
       if (accessStore.loginExpired) {
         accessStore.setLoginExpired(false);
       } else {
-        onSuccess ? await onSuccess?.() : await router.push(DEFAULT_HOME_PATH);
+        onSuccess
+          ? await onSuccess?.()
+          : await router.push(preferences.app.defaultHomePath);
       }
 
       if (userInfo?.realName) {

apps/web-antd/src/store/dict.ts

@@ -59,7 +59,11 @@ export const useDictStore = defineStore('app-dict', () => {
   }
 
   function resetCache() {
+    dictRequestCache.clear();
     dictOptionsMap.clear();
+    /**
+     * 不需要清空dictRequestCache 每次请求成功/失败都清空key
+     */
   }
 
   /**

apps/web-antd/src/upload-tip.ts

@@ -0,0 +1,36 @@
+import { onMounted } from 'vue';
+
+import { useLocalStorage } from '@vueuse/core';
+import { Modal } from 'ant-design-vue';
+
+export function useUploadTip() {
+  const readTip = useLocalStorage<boolean>('__upload_tip_read_5.4.0', false);
+  onMounted(() => {
+    if (readTip.value || !import.meta.env.DEV) {
+      return;
+    }
+    const modalInstance = Modal.info({
+      title: '提示',
+      centered: true,
+      content:
+        '如果你的版本是从低版本升级到后端>5.4.0, 记得执行升级sql, 否则跳转页面(如oss 代码生成配置)等会404',
+      okButtonProps: { disabled: true },
+      onOk() {
+        modalInstance.destroy();
+        readTip.value = true;
+      },
+    });
+
+    let time = 3;
+    const interval = setInterval(() => {
+      modalInstance.update({
+        okText: time === 0 ? '我知道了, 不再弹出' : `${time}秒后关闭`,
+        okButtonProps: { disabled: time > 0 },
+      });
+      if (time <= 0) {
+        clearInterval(interval);
+      }
+      time--;
+    }, 1000);
+  });
+}

apps/web-antd/src/utils/dict.ts

@@ -1,3 +1,4 @@
+import { UnauthorizedException } from '#/api/request';
 import { dictDataInfo } from '#/api/system/dict/dict-data';
 import { useDictStore } from '#/store/dict';
 
@@ -27,6 +28,17 @@ function fetchAndCacheDictData<T>(
           // 内部处理了push的逻辑 这里不用push
           setDictInfo(dictName, resp, formatNumber);
         })
+        .catch((error) => {
+          /**
+           * 需要判断是否为401抛出的特定异常 401清除缓存
+           * 其他error清除缓存会导致无限循环调用字典接口 则不做处理
+           */
+          if (error instanceof UnauthorizedException) {
+            // 401时 移除字典缓存 下次登录重新获取
+            dictRequestCache.delete(dictName);
+          }
+          // 其他不做处理
+        })
         .finally(() => {
           // 移除请求状态缓存
           /**

apps/web-antd/src/utils/popup.ts

@@ -0,0 +1,126 @@
+import type { ExtendedFormApi } from '@vben/common-ui';
+import type { MaybePromise } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { Modal } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+interface BeforeCloseDiffProps {
+  /**
+   * 初始化值如何获取
+   * @returns Promise<string>
+   */
+  initializedGetter: () => MaybePromise<string>;
+  /**
+   * 当前值如何获取
+   * @returns Promise<string>
+   */
+  currentGetter: () => MaybePromise<string>;
+  /**
+   * 自定义比较函数
+   * @param init 初始值
+   * @param current 当前值
+   * @returns boolean
+   */
+  compare?: (init: string, current: string) => boolean;
+}
+
+/**
+ * 用于Drawer/Modal使用 判断表单是否有变动来决定是否弹窗提示
+ * @param props props
+ * @returns hook
+ */
+export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
+  const { initializedGetter, currentGetter, compare } = props;
+  /**
+   * 记录初始值 json
+   */
+  const initialized = ref<string>('');
+  /**
+   * 是否已经初始化了 通过这个值判断是否需要进行对比 为false直接关闭 不弹窗
+   */
+  const isInitialized = ref(false);
+
+  /**
+   * 标记是否已经完成初始化 后续需要进行对比
+   * @param data 自定义初始化数据 可选
+   */
+  async function markInitialized(data?: string) {
+    initialized.value = data || (await initializedGetter());
+    isInitialized.value = true;
+  }
+
+  /**
+   * 重置初始化状态 需要在closed前调用 或者打开窗口时
+   */
+  function resetInitialized() {
+    initialized.value = '';
+    isInitialized.value = false;
+  }
+
+  /**
+   * 提供给useVbenForm/useVbenDrawer使用
+   * @returns 是否允许关闭
+   */
+  async function onBeforeClose(): Promise<boolean> {
+    // 如果还未初始化，直接允许关闭
+    if (!isInitialized.value) {
+      return true;
+    }
+
+    try {
+      // 获取当前表单数据
+      const current = await currentGetter();
+      // 自定义比较的情况
+      if (isFunction(compare) && compare(initialized.value, current)) {
+        return true;
+      } else {
+        // 如果数据没有变化，直接允许关闭
+        if (current === initialized.value) {
+          return true;
+        }
+      }
+
+      // 数据有变化，显示确认对话框
+      return new Promise<boolean>((resolve) => {
+        Modal.confirm({
+          title: $t('pages.common.tip'),
+          content: $t('pages.common.beforeCloseTip'),
+          centered: true,
+          okButtonProps: { danger: true },
+          cancelText: $t('common.cancel'),
+          okText: $t('common.confirm'),
+          onOk: () => {
+            resolve(true);
+            isInitialized.value = false;
+          },
+          onCancel: () => resolve(false),
+        });
+      });
+    } catch (error) {
+      console.error('Failed to compare data:', error);
+      return true;
+    }
+  }
+
+  return {
+    onBeforeClose,
+    markInitialized,
+    resetInitialized,
+  };
+}
+
+/**
+ * 给useVbenForm使用的 封装函数
+ * @param formApi 表单实例
+ * @returns getter
+ */
+export function defaultFormValueGetter(formApi: ExtendedFormApi) {
+  return async () => {
+    const v = await formApi.getValues();
+    return JSON.stringify(v);
+  };
+}

apps/web-antd/src/utils/render.tsx

@@ -116,7 +116,7 @@ export function renderHttpMethodTag(type: string) {
   return <Tag color={color}>{title}</Tag>;
 }
 
-export function renderDictTag(value: string, dicts: DictData[]) {
+export function renderDictTag(value: number | string, dicts: DictData[]) {
   return <DictTag dicts={dicts} value={value}></DictTag>;
 }
 
@@ -155,7 +155,7 @@ export function renderDictTags(
  * @param dictName dictName
  * @returns tag
  */
-export function renderDict(value: string, dictName: string) {
+export function renderDict(value: number | string, dictName: string) {
   const dictInfo = getDictOptions(dictName);
   return renderDictTag(value, dictInfo);
 }

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -18,7 +18,7 @@ import { useAuthStore } from '#/store';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
-const CODE_LENGTH = 6;
+const CODE_LENGTH = 4;
 
 const tenantInfo = ref<TenantResp>({
   tenantEnabled: false,
@@ -85,8 +85,8 @@ const formSchema = computed((): VbenFormSchema[] => {
                 : $t('authentication.sendCode');
             return text;
           },
-          // 验证码长度 在这设置
-          codeLength: 4,
+          // 验证码长度
+          codeLength: CODE_LENGTH,
           placeholder: $t('authentication.code'),
           handleSendCode: async () => {
             const { valid, value } = await form.validateField('phoneNumber');

apps/web-antd/src/views/_core/authentication/login.vue

@@ -30,13 +30,23 @@ const captchaInfo = ref<CaptchaResponse>({
   img: '',
   uuid: '',
 });
+// 验证码loading
+const captchaLoading = ref(false);
 
 async function loadCaptcha() {
-  const resp = await captchaImage();
-  if (resp.captchaEnabled) {
-    resp.img = `data:image/png;base64,${resp.img}`;
+  try {
+    captchaLoading.value = true;
+
+    const resp = await captchaImage();
+    if (resp.captchaEnabled) {
+      resp.img = `data:image/png;base64,${resp.img}`;
+    }
+    captchaInfo.value = resp;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    captchaLoading.value = false;
   }
-  captchaInfo.value = resp;
 }
 
 const tenantInfo = ref<TenantResp>({
@@ -116,6 +126,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         class: 'focus:border-primary',
         onCaptchaClick: loadCaptcha,
         placeholder: $t('authentication.code'),
+        loading: captchaLoading.value,
       },
       dependencies: {
         if: () => captchaInfo.value.captchaEnabled,

apps/web-antd/src/views/_core/social-callback/index.vue

@@ -4,7 +4,8 @@ import type { AuthApi } from '#/api';
 import { onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, DEFAULT_TENANT_ID } from '@vben/constants';
+import { DEFAULT_TENANT_ID } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
 
 import { message } from 'ant-design-vue';
@@ -70,7 +71,7 @@ onMounted(async () => {
     // 500 你还没有绑定第三方账号，绑定后才可以登录！
   } finally {
     setTimeout(() => {
-      router.push(DEFAULT_HOME_PATH);
+      router.push(preferences.app.defaultHomePath);
     }, 1500);
   }
 });

apps/web-antd/src/views/dashboard/analytics/index.vue

@@ -15,10 +15,10 @@ import {
 } from '@vben/icons';
 
 import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
 import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
 
 const overviewItems: AnalysisOverviewItem[] = [
   {

apps/web-antd/src/views/demo/demo/data.ts

@@ -51,7 +51,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 

apps/web-antd/src/views/demo/tree/data.ts

@@ -60,7 +60,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 

apps/web-antd/src/views/monitor/cache/components/redis-description.vue

@@ -1,96 +1,58 @@
 <script setup lang="ts">
 import type { RedisInfo } from '#/api/monitor/cache';
-import type { DescItem } from '#/components/description';
 
-import { onMounted, watch } from 'vue';
-
-import { Description, useDescription } from '#/components/description';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
 
 interface IRedisInfo extends RedisInfo {
   dbSize: string;
 }
 
-const props = defineProps<{ data: IRedisInfo }>();
-
-const descSchemas: DescItem[] = [
-  { field: 'redis_version', label: 'redis版本' },
-  {
-    field: 'redis_mode',
-    label: 'redis模式',
-    render(value) {
-      return value === 'standalone' ? '单机模式' : '集群模式';
-    },
-  },
-  {
-    field: 'tcp_port',
-    label: 'tcp端口',
-  },
-  {
-    field: 'connected_clients',
-    label: '客户端数',
-  },
-  {
-    field: 'uptime_in_days',
-    label: '运行时间',
-    render(value) {
-      return `${value}天`;
-    },
-  },
-  {
-    field: 'used_memory_human',
-    label: '使用内存',
-  },
-  {
-    field: 'used_cpu_user_children',
-    label: '使用CPU',
-    render(value) {
-      return Number.parseFloat(value).toFixed(2);
-    },
-  },
-  {
-    field: 'maxmemory_human',
-    label: '内存配置',
-  },
-  {
-    field: 'aof_enabled',
-    label: 'AOF是否开启',
-    render(value) {
-      return value === '0' ? '否' : '是';
-    },
-  },
-  {
-    field: 'rdb_last_bgsave_status',
-    label: 'RDB是否成功',
-  },
-  {
-    field: 'dbSize',
-    label: 'Key数量',
-  },
-  {
-    field: 'instantaneous_input_kbps',
-    label: '网络入口/出口',
-    render(_, data) {
-      const { instantaneous_input_kbps, instantaneous_output_kbps } = data;
-      return `${instantaneous_input_kbps}kps/${instantaneous_output_kbps}kps`;
-    },
-  },
-];
-
-const [registerDescription, { setDescProps }] = useDescription({
-  column: { lg: 4, md: 3, sm: 1, xl: 4, xs: 1 },
-  schema: descSchemas,
-});
-
-onMounted(() => setDescProps({ data: props.data }));
-
-watch(
-  () => props.data,
-  (data) => {
-    setDescProps({ data });
-  },
-);
+defineProps<{ data: IRedisInfo }>();
 </script>
 
 <template>
-  <Description @register="registerDescription" />
+  <Descriptions
+    bordered
+    :column="{ lg: 4, md: 3, sm: 1, xl: 4, xs: 1 }"
+    size="small"
+  >
+    <DescriptionsItem label="redis版本">
+      {{ data.redis_version }}
+    </DescriptionsItem>
+    <DescriptionsItem label="redis模式">
+      {{ data.redis_mode === 'standalone' ? '单机模式' : '集群模式' }}
+    </DescriptionsItem>
+    <DescriptionsItem label="tcp端口">
+      {{ data.tcp_port }}
+    </DescriptionsItem>
+    <DescriptionsItem label="客户端数">
+      {{ data.connected_clients }}
+    </DescriptionsItem>
+    <DescriptionsItem label="运行时间">
+      {{ data.uptime_in_days }} 天
+    </DescriptionsItem>
+    <DescriptionsItem label="使用内存">
+      {{ data.used_memory_human }}
+    </DescriptionsItem>
+    <DescriptionsItem label="使用CPU">
+      {{ Number.parseFloat(data?.used_cpu_user_children ?? '0').toFixed(2) }}
+    </DescriptionsItem>
+    <DescriptionsItem label="内存配置">
+      {{ data.maxmemory_human }}
+    </DescriptionsItem>
+    <DescriptionsItem label="AOF是否开启">
+      {{ data.aof_enabled === '0' ? '否' : '是' }}
+    </DescriptionsItem>
+    <DescriptionsItem label="RDB是否成功">
+      {{ data.rdb_last_bgsave_status }}
+    </DescriptionsItem>
+    <DescriptionsItem label="key数量">
+      {{ data.dbSize }}
+    </DescriptionsItem>
+    <DescriptionsItem label="网络入口/出口">
+      {{
+        `${data.instantaneous_input_kbps}kps/${data.instantaneous_output_kbps}kps`
+      }}
+    </DescriptionsItem>
+  </Descriptions>
 </template>

apps/web-antd/src/views/monitor/logininfor/data.tsx

@@ -2,7 +2,6 @@ import type { VNode } from 'vue';
 
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { DescItem } from '#/components/description';
 
 import { DictEnum } from '@vben/constants';
 
@@ -107,62 +106,3 @@ export const columns: VxeGridProps['columns'] = [
     width: 150,
   },
 ];
-
-export const modalSchema: () => DescItem[] = () => [
-  {
-    field: 'status',
-    label: '登录状态',
-    labelMinWidth: 80,
-    render(value) {
-      return renderDict(value, DictEnum.SYS_COMMON_STATUS);
-    },
-  },
-  {
-    field: 'clientKey',
-    label: '登录平台',
-    render(value) {
-      if (value) {
-        return value.toUpperCase();
-      }
-      return '';
-    },
-  },
-  {
-    field: 'ipaddr',
-    label: '账号信息',
-    render(_, data) {
-      const { ipaddr, loginLocation, userName } = data;
-      return `账号: ${userName} / ${ipaddr} / ${loginLocation}`;
-    },
-  },
-  {
-    field: 'loginTime',
-    label: '登录时间',
-  },
-  {
-    field: 'msg',
-    label: '登录信息',
-    render(_, data: any) {
-      const { msg, status } = data;
-      return (
-        <span class={['font-bold', status === '0' ? '' : 'text-red-500']}>
-          {msg}
-        </span>
-      );
-    },
-  },
-  {
-    field: 'os',
-    label: '登录设备',
-    render(value) {
-      return renderOsIcon(value);
-    },
-  },
-  {
-    field: 'browser',
-    label: '浏览器',
-    render(value) {
-      return renderBrowserIcon(value);
-    },
-  },
-];

apps/web-antd/src/views/monitor/logininfor/login-info-modal.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
+import type { LoginLog } from '#/api/monitor/logininfo/model';
+
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
 
-import { Description, useDescription } from '#/components/description';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
 
-import { modalSchema } from './data';
-
-const [registerDescription, { setDescProps }] = useDescription({
-  column: 1,
-  schema: modalSchema(),
-});
+import { renderBrowserIcon, renderDict, renderOsIcon } from '#/utils/render';
 
+const loginInfo = ref<LoginLog>();
 const [BasicModal, modalApi] = useVbenModal({
   onOpenChange: (isOpen) => {
     if (!isOpen) {
       return null;
     }
-    const data = modalApi.getData();
-    setDescProps({ data }, true);
+    const record = modalApi.getData() as LoginLog;
+    loginInfo.value = record;
+  },
+  onClosed() {
+    loginInfo.value = undefined;
   },
 });
 </script>
@@ -28,6 +32,37 @@ const [BasicModal, modalApi] = useVbenModal({
     class="w-[550px]"
     title="登录日志"
   >
-    <Description @register="registerDescription" />
+    <Descriptions v-if="loginInfo" size="small" :column="1" bordered>
+      <DescriptionsItem label="登录状态">
+        <component
+          :is="renderDict(loginInfo.status, DictEnum.SYS_COMMON_STATUS)"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="登录平台">
+        {{ loginInfo.clientKey.toLowerCase() }}
+      </DescriptionsItem>
+      <DescriptionsItem label="账号信息">
+        {{
+          `账号: ${loginInfo.userName} / ${loginInfo.ipaddr} / ${loginInfo.loginLocation}`
+        }}
+      </DescriptionsItem>
+      <DescriptionsItem label="登录时间">
+        {{ loginInfo.loginTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="登录信息">
+        <span
+          class="font-semibold"
+          :class="{ 'text-red-500': loginInfo.status !== '0' }"
+        >
+          {{ loginInfo.msg }}
+        </span>
+      </DescriptionsItem>
+      <DescriptionsItem label="登录设备">
+        <component :is="renderOsIcon(loginInfo.os)" />
+      </DescriptionsItem>
+      <DescriptionsItem label="浏览器">
+        <component :is="renderBrowserIcon(loginInfo.browser)" />
+      </DescriptionsItem>
+    </Descriptions>
   </BasicModal>
 </template>

apps/web-antd/src/views/monitor/online/data.ts

@@ -79,6 +79,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 120,
+    resizable: false,
+    width: 'auto',
   },
 ];

apps/web-antd/src/views/monitor/operlog/data.tsx

@@ -1,17 +1,10 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { DescItem } from '#/components/description';
 
 import { DictEnum } from '@vben/constants';
 
-import { Tag } from 'ant-design-vue';
-
 import { getDictOptions } from '#/utils/dict';
-import {
-  renderDict,
-  renderHttpMethodTag,
-  renderJsonPreview,
-} from '#/utils/render';
+import { renderDict } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -93,107 +86,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 120,
-  },
-];
-
-export const descSchema: DescItem[] = [
-  {
-    field: 'operId',
-    label: '日志编号',
-  },
-  {
-    field: 'status',
-    label: '操作结果',
-    render(value) {
-      return renderDict(value, DictEnum.SYS_COMMON_STATUS);
-    },
-  },
-  {
-    field: 'title',
-    label: '操作模块',
-    labelMinWidth: 80,
-    render(value, { businessType }) {
-      const operType = renderDict(businessType, DictEnum.SYS_OPER_TYPE);
-      return (
-        <div class="flex items-center">
-          <Tag>{value}</Tag>
-          {operType}
-        </div>
-      );
-    },
-  },
-  {
-    field: 'operIp',
-    label: '操作信息',
-    render(_, data) {
-      return `账号: ${data.operName} / ${data.deptName} / ${data.operIp} / ${data.operLocation}`;
-    },
-  },
-  {
-    field: 'operUrl',
-    label: '请求信息',
-    render(_, data) {
-      const { operUrl, requestMethod } = data;
-      const methodTag = renderHttpMethodTag(requestMethod);
-      return (
-        <span>
-          {methodTag} {operUrl}
-        </span>
-      );
-    },
-  },
-  {
-    field: 'errorMsg',
-    label: '异常信息',
-    render(value) {
-      return <span class="font-bold text-red-600">{value}</span>;
-    },
-    show: (data) => {
-      return data && data.errorMsg !== '';
-    },
-  },
-  {
-    field: 'method',
-    label: '方法',
-  },
-  /**
-   * 默认word-break: break-word;会导致json预览样式异常
-   */
-  {
-    field: 'operParam',
-    label: '请求参数',
-    render(value) {
-      return (
-        <div class="max-h-[300px] w-full overflow-y-auto">
-          {renderJsonPreview(value)}
-        </div>
-      );
-    },
-  },
-  {
-    field: 'jsonResult',
-    label: '响应参数',
-    render(value) {
-      return (
-        <div class="max-h-[300px] w-full overflow-y-auto">
-          {renderJsonPreview(value)}
-        </div>
-      );
-    },
-    show(data) {
-      return data && data.jsonResult;
-    },
-  },
-  {
-    field: 'costTime',
-    label: '耗时',
-    render(value) {
-      return `${value} ms`;
-    },
-  },
-  {
-    field: 'operTime',
-    label: '操作时间',
+    resizable: false,
+    width: 'auto',
   },
 ];

apps/web-antd/src/views/monitor/operlog/operation-preview-drawer.vue

@@ -1,32 +1,94 @@
 <script setup lang="ts">
 import type { OperationLog } from '#/api/monitor/operlog/model';
 
+import { computed, shallowRef } from 'vue';
+
 import { useVbenDrawer } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
 
-import { Description, useDescription } from '#/components/description';
+import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
 
-import { descSchema } from './data';
+import {
+  renderDict,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   onOpenChange: handleOpenChange,
+  onClosed() {
+    currentLog.value = null;
+  },
 });
 
-const [registerDescription, { setDescProps }] = useDescription({
-  column: 1,
-  schema: descSchema,
-});
-
+const currentLog = shallowRef<null | OperationLog>(null);
 function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
   }
   const { record } = drawerApi.getData() as { record: OperationLog };
-  setDescProps({ data: record }, true);
+  currentLog.value = record;
 }
+
+const actionInfo = computed(() => {
+  if (!currentLog.value) {
+    return '-';
+  }
+  const data = currentLog.value;
+  return `账号: ${data.operName} / ${data.deptName} / ${data.operIp} / ${data.operLocation}`;
+});
 </script>
 
 <template>
   <BasicDrawer :footer="false" class="w-[600px]" title="查看日志">
-    <Description @register="registerDescription" />
+    <Descriptions v-if="currentLog" size="small" bordered :column="1">
+      <DescriptionsItem label="日志编号" :label-style="{ minWidth: '120px' }">
+        {{ currentLog.operId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="操作结果">
+        <component
+          :is="renderDict(currentLog.status, DictEnum.SYS_COMMON_STATUS)"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="操作模块">
+        <div class="flex items-center">
+          <Tag>{{ currentLog.title }}</Tag>
+          <component
+            :is="renderDict(currentLog.businessType, DictEnum.SYS_OPER_TYPE)"
+          />
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem label="操作信息">
+        {{ actionInfo }}
+      </DescriptionsItem>
+      <DescriptionsItem label="请求信息">
+        <component :is="renderHttpMethodTag(currentLog.requestMethod)" />
+        {{ currentLog.operUrl }}
+      </DescriptionsItem>
+      <DescriptionsItem v-if="currentLog.errorMsg" label="异常信息">
+        <span class="font-semibold text-red-600">
+          {{ currentLog.errorMsg }}
+        </span>
+      </DescriptionsItem>
+      <DescriptionsItem label="方法">
+        {{ currentLog.method }}
+      </DescriptionsItem>
+      <DescriptionsItem label="请求参数">
+        <div class="max-h-[300px] overflow-y-auto">
+          <component :is="renderJsonPreview(currentLog.operParam)" />
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem v-if="currentLog.jsonResult" label="响应参数">
+        <div class="max-h-[300px] overflow-y-auto">
+          <component :is="renderJsonPreview(currentLog.jsonResult)" />
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem label="请求耗时">
+        {{ `${currentLog.costTime} ms` }}
+      </DescriptionsItem>
+      <DescriptionsItem label="操作时间">
+        {{ `${currentLog.operTime}` }}
+      </DescriptionsItem>
+    </Descriptions>
   </BasicDrawer>
 </template>

apps/web-antd/src/views/system/client/client-drawer.vue

@@ -7,6 +7,7 @@ import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { clientAdd, clientInfo, clientUpdate } from '#/api/system/client';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 import SecretInput from './secret-input.vue';
@@ -55,6 +56,13 @@ function setupForm(update: boolean) {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 // 提取生成状态字段Schema的函数
 const getStatusSchema = (disabled: boolean) => [
   {
@@ -64,13 +72,15 @@ const getStatusSchema = (disabled: boolean) => [
 ];
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     // 初始化
@@ -84,36 +94,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       // 新增模式: 确保状态字段可用
       formApi.updateSchema(getStatusSchema(false));
     }
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
-  drawerApi.close();
+async function handleClosed() {
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm>
       <template #clientSecret="slotProps">
         <SecretInput v-bind="slotProps" :disabled="isUpdate" />

apps/web-antd/src/views/system/client/data.tsx

@@ -95,7 +95,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 

apps/web-antd/src/views/system/client/index.vue

@@ -144,10 +144,10 @@ const { hasAccessByCodes } = useAccess();
         <!-- pc不允许禁用 禁用了直接登录不了 应该设置disabled -->
         <!-- 登录提示: 认证权限类型已禁用 -->
         <TableSwitch
-          v-model="row.status"
+          v-model:value="row.status"
           :api="() => clientChangeStatus(row)"
           :disabled="row.id === 1 || !hasAccessByCodes(['system:client:edit'])"
-          :reload="() => tableApi.query()"
+          @reload="tableApi.query()"
         />
       </template>
       <template #action="{ row }">

apps/web-antd/src/views/system/config/config-modal.vue

@@ -7,6 +7,7 @@ import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { configAdd, configInfo, configUpdate } from '#/api/system/config';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
 
@@ -25,9 +26,17 @@ const [BasicForm, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicModal, modalApi] = useVbenModal({
   fullscreenButton: false,
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
@@ -42,6 +51,7 @@ const [BasicModal, modalApi] = useVbenModal({
       const record = await configInfo(id);
       await formApi.setValues(record);
     }
+    await markInitialized();
 
     modalApi.modalLoading(false);
   },
@@ -49,30 +59,31 @@ const [BasicModal, modalApi] = useVbenModal({
 
 async function handleConfirm() {
   try {
-    modalApi.modalLoading(true);
+    modalApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? configUpdate(data) : configAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    modalApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    modalApi.modalLoading(false);
+    modalApi.lock(false);
   }
 }
 
-async function handleCancel() {
-  modalApi.close();
+async function handleClosed() {
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[550px]">
+  <BasicModal :title="title" class="w-[550px]">
     <BasicForm />
   </BasicModal>
 </template>

apps/web-antd/src/views/system/config/data.ts

@@ -71,7 +71,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 

apps/web-antd/src/views/system/dept/data.ts

@@ -30,7 +30,6 @@ export const columns: VxeGridProps['columns'] = [
     field: 'deptName',
     title: '部门名称',
     treeNode: true,
-    width: 200,
   },
   {
     field: 'deptCategory',
@@ -39,11 +38,9 @@ export const columns: VxeGridProps['columns'] = [
   {
     field: 'orderNum',
     title: '排序',
-    width: 180,
   },
   {
     field: 'status',
-    width: 180,
     title: '状态',
     slots: {
       default: ({ row }) => {
@@ -60,7 +57,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 200,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
@@ -97,6 +95,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     fieldName: 'orderNum',
     label: '显示排序',
     rules: 'required',
+    defaultValue: 0,
   },
   {
     component: 'Input',

apps/web-antd/src/views/system/dept/dept-drawer.vue

@@ -16,6 +16,7 @@ import {
   deptUpdate,
 } from '#/api/system/dept';
 import { listUserByDeptId } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -107,8 +108,16 @@ async function setLeaderOptions() {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -130,6 +139,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     await (update && id ? initDeptUsers(id) : setLeaderOptions());
     /** 部门选择 下拉框 */
     await initDeptSelect(id);
+    await markInitialized();
 
     drawerApi.drawerLoading(false);
   },
@@ -137,30 +147,31 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? deptUpdate(data) : deptAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
-  drawerApi.close();
+async function handleClosed() {
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>

apps/web-antd/src/views/system/dict/data.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    ele版本会使用这个文件 只是为了不报错`未找到对应组件`才新建的这个文件
+    无实际意义
+  </div>
+</template>

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

@@ -45,7 +45,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
@@ -98,6 +99,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     fieldName: 'dictSort',
     label: '显示排序',
     rules: 'required',
+    defaultValue: 0,
   },
   {
     component: 'Textarea',

apps/web-antd/src/views/system/dict/data/dict-data-drawer.vue

@@ -12,6 +12,7 @@ import {
   dictDetailInfo,
 } from '#/api/system/dict/dict-data';
 import { tagTypes } from '#/components/dict';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 import TagStylePicker from './tag-style-picker.vue';
@@ -57,8 +58,16 @@ function setupSelectType(listClass: string) {
   selectType.value = isDefault ? 'default' : 'custom';
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -68,13 +77,14 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 
     const { dictCode, dictType } = drawerApi.getData() as DrawerProps;
     isUpdate.value = !!dictCode;
-    formApi.setFieldValue('dictType', dictType);
+    await formApi.setFieldValue('dictType', dictType);
 
     if (dictCode && isUpdate.value) {
       const record = await dictDetailInfo(dictCode);
       setupSelectType(record.listClass);
       await formApi.setValues(record);
     }
+    await markInitialized();
 
     drawerApi.drawerLoading(false);
   },
@@ -82,7 +92,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -93,19 +103,20 @@ async function handleConfirm() {
       data.listClass = '';
     }
     await (isUpdate.value ? dictDataUpdate(data) : dictDataAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
-  drawerApi.close();
+async function handleClosed() {
   await formApi.resetForm();
   selectType.value = 'default';
+  resetInitialized();
 }
 
 /**
@@ -117,7 +128,7 @@ async function handleDeSelect() {
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm>
       <template #listClass="slotProps">
         <TagStylePicker

apps/web-antd/src/views/system/dict/data/tag-style-picker.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import type { RadioChangeEvent } from 'ant-design-vue';
 
-import type { PropType } from 'vue';
-
 import { computed } from 'vue';
 
-import { Input, RadioGroup, Select } from 'ant-design-vue';
+import { usePreferences } from '@vben/preferences';
+
+import { RadioGroup, Select } from 'ant-design-vue';
+import { ColorPicker } from 'vue3-colorpicker';
 
 import { tagSelectOptions } from '#/components/dict';
 
+import 'vue3-colorpicker/style.css';
+
 /**
  * 需要禁止透传
  * 不禁止会有奇怪的bug 会绑定到selectType上
@@ -32,23 +35,26 @@ const computedOptions = computed(
 
 type SelectType = (typeof options)[number]['value'];
 
-const selectType = defineModel('selectType', {
+const selectType = defineModel<SelectType>('selectType', {
   default: 'default',
-  type: String as PropType<SelectType>,
 });
 
 /**
  * color必须为hex颜色或者undefined
  */
-const color = defineModel('value', {
+const color = defineModel<string | undefined>('value', {
   default: undefined,
-  type: String as PropType<string | undefined>,
 });
 
 function handleSelectTypeChange(e: RadioChangeEvent) {
   // 必须给默认hex颜色 不能为空字符串
-  color.value = e.target.value === 'custom' ? '#000000' : undefined;
+  color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
 }
+
+const { isDark } = usePreferences();
+const theme = computed(() => {
+  return isDark.value ? 'black' : 'white';
+});
 </script>
 
 <template>
@@ -69,15 +75,12 @@ function handleSelectTypeChange(e: RadioChangeEvent) {
       placeholder="请选择标签样式"
       @deselect="$emit('deselect')"
     />
-    <Input
+    <ColorPicker
       v-if="selectType === 'custom'"
-      v-model:value="color"
-      class="flex-1"
-      disabled
-    >
-      <template #addonAfter>
-        <input v-model="color" class="rounded-lg" type="color" />
-      </template>
-    </Input>
+      disable-alpha
+      format="hex"
+      v-model:pure-color="color"
+      :theme="theme"
+    />
   </div>
 </template>