docs: readme

* feat: 添加混合权限访问控制模式

* feat: 文档补充

.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,7 +220,7 @@
     "*.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,

CHANGELOG.md

@@ -1,3 +1,61 @@
+# 1.4.0
+
+**FEATURES**
+
+- 菜单管理(通用方法) 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
+
+- 菜单管理 级联删除 删除菜单和children
+
+**REFACTOR**
+
+- 除个人中心外所有本地路由改为从后端返回(需要执行更新sql)
+- 流程图预览改为logicflow预览而非图片
+- 菜单管理 新增角色校验(与后端权限保持一致) 只有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**

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">
+<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">
-</p>
+</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">
+<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">
-</p>
+</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.3.0",
+  "version": "1.4.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@logicflow/core": "^2.0.13",
     "@tinymce/tinymce-vue": "^6.0.1",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",

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

@@ -9,7 +9,6 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
 import {
-  computed,
   defineAsyncComponent,
   defineComponent,
   getCurrentInstance,
@@ -88,18 +87,13 @@ const withDefaultPlaceholder = <T extends Component>(
   componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
-    inheritAttrs: false,
     name: component.name,
+    inheritAttrs: false,
     setup: (props: any, { attrs, expose, slots }) => {
-      /**
-       * 需要使用computed 否则后续updateSchema更新的placeholder无法显示(响应式问题)
-       */
-      const placeholder = computed(
-        () =>
+      const placeholder =
         props?.placeholder ||
         attrs?.placeholder ||
-          $t(`ui.placeholder.${type}`),
-      );
+        $t(`ui.placeholder.${type}`);
 
       // 透传组件暴露的方法
       const innerRef = ref();
@@ -118,7 +112,7 @@ const withDefaultPlaceholder = <T extends Component>(
           component,
           {
             ...componentProps,
-            placeholder: placeholder.value,
+            placeholder,
             ...props,
             ...attrs,
             ref: innerRef,
@@ -168,20 +162,34 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
         component: Select,
         loadingSlot: 'suffixIcon',
         visibleEvent: 'onDropdownVisibleChange',
         modelPropName: 'value',
-    }),
-    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      },
+    ),
+    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,

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

@@ -10,7 +10,8 @@ import { $t } from '@vben/locales';
 
 import { isArray } from 'lodash-es';
 
-setupVbenForm<ComponentType>({
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
     config: {
       // ant design vue组件库默认都是 v-model:value
       baseModelPropName: 'value',
@@ -43,11 +44,12 @@ setupVbenForm<ComponentType>({
         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/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,9 +37,10 @@ export function ossConfigRemove(ossConfigIds: IDS) {
 
 // 更改OSS配置的状态
 export function ossConfigChangeStatus(data: any) {
-  const requestData = {
+  const requestData: Partial<OssConfig> = {
     ossConfigId: data.ossConfigId,
     status: data.status,
+    configKey: data.configKey,
   };
   return requestClient.putWithMsg(Api.ossConfigChangeStatus, requestData);
 }

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

@@ -38,4 +38,9 @@ export interface Flow {
 export interface FlowInfoResponse {
   image: string;
   list: Flow[];
+  defChart: {
+    defJson: Record<string, any>;
+    nodeJsonList: Record<string, any>[];
+    skipJsonList: Record<string, any>[];
+  };
 }

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

@@ -13,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';
 
@@ -20,6 +21,9 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,

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

@@ -98,7 +98,7 @@ Upload.Dragger只会影响样式
           {{ $t('component.upload.upload') }}
         </a-button>
       </div>
-      <div v-if="enableDragUpload && innerFileList?.length < maxCount">
+      <div v-if="enableDragUpload">
         <p class="ant-upload-drag-icon">
           <InboxOutlined />
         </p>

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

@@ -160,6 +160,8 @@ export function useUpload(
     return undefined;
   }
 
+  // 用来标识是否为上传 这样在watch内部不需要请求api
+  let isUpload = false;
   function handleChange(info: UploadChangeParam) {
     /**
      * 移除当前文件
@@ -199,7 +201,8 @@ export function useUpload(
         currentFile.fileName = transformFilename(cb);
         currentFile.name = transformFilename(cb);
         currentFile.thumbUrl = transformThumbUrl(cb);
-
+        // 标记为上传 watch根据值做处理
+        isUpload = true;
         // ossID添加 单个文件会被当做string
         if (props.maxCount === 1) {
           bindValue.value = ossId;
@@ -319,8 +322,18 @@ export function useUpload(
     () => 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;

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,6 +1,7 @@
 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 { $t } from '#/locales';
 
@@ -34,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {

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[] = [
   {
@@ -17,69 +23,6 @@ const localRoutes: RouteRecordStringComponent[] = [
     name: 'Profile',
     path: '/profile',
   },
-  {
-    component: '/system/oss-config/index',
-    meta: {
-      activePath: '/system/oss',
-      icon: 'ant-design:setting-outlined',
-      title: 'oss配置',
-      hideInMenu: true,
-      requireHomeRedirect: true,
-    },
-    name: 'OssConfig',
-    path: '/system/oss-config',
-  },
-  {
-    component: '/tool/gen/edit-gen',
-    meta: {
-      activePath: '/tool/gen',
-      icon: 'tabler:code',
-      title: '生成配置',
-      hideInMenu: true,
-      requireHomeRedirect: 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,
-      requireHomeRedirect: true,
-    },
-    name: 'RoleAssign',
-    path: '/system/role-assign/:roleId',
-  },
-  {
-    component: '/workflow/components/flow-designer',
-    meta: {
-      activePath: '/workflow/processDefinition',
-      icon: 'fluent-mdl2:flow',
-      title: '流程设计',
-      hideInMenu: true,
-      requireHomeRedirect: 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,
-      requireHomeRedirect: true,
-    },
-    name: 'WorkflowLeaveIndex',
-    path: '/workflow/leaveEdit/index',
-  },
 ];
 
 /**
@@ -134,8 +77,8 @@ export const localMenuList: RouteRecordStringComponent[] = [
           icon: 'lucide:book-open-text',
           keepAlive: true,
           title: '更新记录',
-          badge: '1.3.0',
-          badgeVariants: '#CC0033',
+          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/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/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/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/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/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

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

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/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',
   },
 ];
 

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',
   },
 ];
 

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

@@ -77,7 +77,7 @@ 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);

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

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

apps/web-antd/src/views/system/dict/type/index-refactor.vue

@@ -0,0 +1,281 @@
+<!-- 使用vxe实现成本最小 且自带虚拟滚动  -->
+<script setup lang="ts">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DictType } from '#/api/system/dict/dict-type-model';
+
+import { h, ref, shallowRef, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cn } from '@vben/utils';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  ExportOutlined,
+  PlusOutlined,
+  SyncOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Alert,
+  Input,
+  Modal,
+  Popconfirm,
+  Space,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  dictTypeExport,
+  dictTypeList,
+  dictTypeRemove,
+  refreshDictTypeCache,
+} from '#/api/system/dict/dict-type';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { emitter } from '../mitt';
+import dictTypeModal from './dict-type-modal.vue';
+
+const tableAllData = shallowRef<DictType[]>([]);
+const gridOptions: VxeGridProps = {
+  columns: [
+    {
+      title: 'name',
+      field: 'render',
+      slots: { default: 'render' },
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        const resp = await dictTypeList();
+
+        total.value = resp.total;
+        tableAllData.value = resp.rows;
+        return resp;
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'dictId',
+    // 高亮当前行
+    isCurrent: true,
+  },
+  cellConfig: {
+    height: 60,
+  },
+  showHeader: false,
+  toolbarConfig: {
+    enabled: false,
+  },
+  // 开启虚拟滚动
+  scrollY: {
+    enabled: false,
+    gt: 0,
+  },
+  rowClassName: 'cursor-pointer',
+  id: 'system-dict-data-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents: {
+    cellClick: ({ row }) => {
+      handleRowClick(row);
+    },
+  },
+});
+
+const [DictTypeModal, modalApi] = useVbenModal({
+  connectedComponent: dictTypeModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(record: DictType) {
+  modalApi.setData({ id: record.dictId });
+  modalApi.open();
+}
+
+async function handleDelete(row: DictType) {
+  await dictTypeRemove([row.dictId]);
+  await tableApi.query();
+}
+
+async function handleReset() {
+  currentRowId.value = '';
+  searchValue.value = '';
+  await tableApi.query();
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(dictTypeExport, '字典类型数据');
+}
+
+function handleRefreshCache() {
+  Modal.confirm({
+    title: '提示',
+    content: '确认刷新字典类型缓存吗？',
+    okButtonProps: {
+      danger: true,
+    },
+    onOk: async () => {
+      await refreshDictTypeCache();
+      await tableApi.query();
+    },
+  });
+}
+
+const lastDictType = ref<string>('');
+const currentRowId = ref<null | number | string>(null);
+function handleRowClick(row: DictType) {
+  if (lastDictType.value === row.dictType) {
+    return;
+  }
+  currentRowId.value = row.dictId;
+  emitter.emit('rowClick', row.dictType);
+}
+
+const searchValue = ref('');
+const total = ref(0);
+watch(searchValue, (value) => {
+  if (!tableApi) {
+    return;
+  }
+  if (value) {
+    const names = tableAllData.value.filter((item) =>
+      item.dictName.includes(searchValue.value),
+    );
+    const types = tableAllData.value.filter((item) =>
+      item.dictType.includes(searchValue.value),
+    );
+    const filtered = [...new Set([...names, ...types])];
+    total.value = filtered.length;
+    tableApi.grid.loadData(filtered);
+  } else {
+    total.value = tableAllData.value.length;
+    tableApi.grid.loadData(tableAllData.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'bg-background flex max-h-[100vh] w-[360px] flex-col overflow-y-hidden',
+        'rounded-lg',
+        'dict-type-card',
+      )
+    "
+  >
+    <div :class="cn('flex items-center justify-between', 'border-b px-4 py-2')">
+      <span class="font-semibold">字典项列表</span>
+      <Space>
+        <Tooltip title="刷新缓存">
+          <a-button
+            v-access:code="['system:dict:edit']"
+            :icon="h(SyncOutlined)"
+            @click="handleRefreshCache"
+          />
+        </Tooltip>
+        <Tooltip :title="$t('pages.common.export')">
+          <a-button
+            v-access:code="['system:dict:export']"
+            :icon="h(ExportOutlined)"
+            @click="handleDownloadExcel"
+          />
+        </Tooltip>
+        <Tooltip :title="$t('pages.common.add')">
+          <a-button
+            v-access:code="['system:dict:add']"
+            :icon="h(PlusOutlined)"
+            @click="handleAdd"
+          />
+        </Tooltip>
+      </Space>
+    </div>
+    <div class="flex flex-1 flex-col overflow-y-hidden p-4">
+      <Alert
+        class="mb-4"
+        show-icon
+        message="如果你的数据量大 自行开启虚拟滚动"
+      />
+      <Input
+        placeholder="搜索字典项名称/类型"
+        v-model:value="searchValue"
+        allow-clear
+      >
+        <template #addonAfter>
+          <Tooltip title="重置/刷新">
+            <SyncOutlined
+              v-access:code="['system:dict:edit']"
+              @click="handleReset"
+            />
+          </Tooltip>
+        </template>
+      </Input>
+      <BasicTable class="flex-1 overflow-hidden">
+        <template #render="{ row: item }">
+          <div :class="cn('flex items-center justify-between px-2 py-2')">
+            <div class="flex flex-col items-baseline overflow-hidden">
+              <span class="font-medium">{{ item.dictName }}</span>
+              <div
+                class="max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+              >
+                {{ item.dictType }}
+              </div>
+            </div>
+            <div class="flex items-center gap-3 text-[17px]">
+              <EditOutlined
+                class="text-primary"
+                v-access:code="['system:dict:edit']"
+                @click.stop="handleEdit(item)"
+              />
+              <Popconfirm
+                placement="left"
+                :title="`确认删除 [${item.dictName}]?`"
+                @confirm="handleDelete(item)"
+              >
+                <DeleteOutlined
+                  v-access:code="['system:dict:remove']"
+                  class="text-destructive"
+                  @click.stop=""
+                />
+              </Popconfirm>
+            </div>
+          </div>
+        </template>
+      </BasicTable>
+    </div>
+    <div class="border-t px-4 py-3">共 {{ total }} 条数据</div>
+    <DictTypeModal @reload="tableApi.query()" />
+  </div>
+</template>
+
+<style lang="scss">
+.dict-type-card {
+  .vxe-grid {
+    padding: 12px 0 0;
+
+    .vxe-body--row {
+      &.row--current {
+        // 选中行背景色
+        background-color: hsl(var(--accent-hover)) !important;
+      }
+    }
+  }
+
+  .ant-alert {
+    padding: 6px 12px;
+  }
+}
+</style>

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

@@ -145,7 +145,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 200,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
@@ -218,6 +219,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     fieldName: 'orderNum',
     help: '排序, 数字越小越靠前',
     label: '显示排序',
+    defaultValue: 0,
     rules: 'required',
   },
   {

apps/web-antd/src/views/system/menu/helper.ts

@@ -0,0 +1,25 @@
+import type { MaybePromise } from '@vben/types';
+
+import type { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+/**
+ * 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
+ *
+ * @param tableApi 表格api
+ * @param callback 回调
+ */
+export async function preserveTreeTableState(
+  tableApi: ReturnType<typeof useVbenVxeGrid>[1],
+  callback: () => MaybePromise<void>,
+) {
+  // 保存当前状态
+  const scrollState = tableApi.grid.getScroll();
+  const expandRecords = tableApi.grid.getTreeExpandRecords();
+
+  // 执行回调
+  await callback();
+
+  // 恢复状态
+  tableApi.grid.setTreeExpand(expandRecords, true);
+  tableApi.grid.scrollTo(scrollState.scrollLeft, scrollState.scrollTop);
+}

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

@@ -4,18 +4,20 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { Menu } from '#/api/system/menu/model';
 
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
-import { eachTree, getVxePopupContainer } from '@vben/utils';
+import { $t } from '@vben/locales';
+import { eachTree, getVxePopupContainer, treeToList } from '@vben/utils';
 
-import { Popconfirm, Space } from 'ant-design-vue';
+import { Popconfirm, Space, Switch, Tooltip } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { menuList, menuRemove } from '#/api/system/menu';
+import { menuCascadeRemove, menuList, menuRemove } from '#/api/system/menu';
 
 import { columns, querySchema } from './data';
+import { preserveTreeTableState } from './helper';
 import menuDrawer from './menu-drawer.vue';
 
 /**
@@ -111,9 +113,41 @@ async function handleEdit(record: Menu) {
   drawerApi.open();
 }
 
+/**
+ * 是否级联删除
+ */
+const cascadingDeletion = ref(false);
 async function handleDelete(row: Menu) {
+  await preserveTreeTableState(tableApi, async () => {
+    if (cascadingDeletion.value) {
+      // 级联删除
+      const menuAndChildren: Menu[] = treeToList([row], { id: 'menuId' });
+      await menuCascadeRemove(menuAndChildren.map((item) => item.menuId));
+    } else {
+      // 单删除
       await menuRemove([row.menuId]);
+    }
     await tableApi.query();
+  });
+}
+
+function removeConfirmTitle(row: Menu) {
+  const menuName = $t(row.menuName);
+  if (!cascadingDeletion.value) {
+    return `是否确认删除 [${menuName}] ?`;
+  }
+  const menuAndChildren = treeToList([row], { id: 'menuId' });
+  if (menuAndChildren.length === 1) {
+    return `是否确认删除 [${menuName}] ?`;
+  }
+  return `是否确认删除 [${menuName}] 及 [${menuAndChildren.length - 1}]个子项目 ?`;
+}
+
+/**
+ * 编辑/添加成功后刷新表格
+ */
+async function afterEditOrAdd() {
+  await preserveTreeTableState(tableApi, () => tableApi.query());
 }
 
 /**
@@ -128,6 +162,9 @@ function setExpandOrCollapse(expand: boolean) {
 /**
  * 与后台逻辑相同
  * 只有租户管理和超级管理能访问菜单管理
+ * 注意: 只有超管才能对菜单进行`增删改`操作
+ * 注意: 只有超管才能对菜单进行`增删改`操作
+ * 注意: 只有超管才能对菜单进行`增删改`操作
  */
 const { hasAccessByRoles } = useAccess();
 const isAdmin = computed(() => {
@@ -140,6 +177,16 @@ const isAdmin = computed(() => {
     <BasicTable table-title="菜单列表" table-title-help="双击展开/收起子菜单">
       <template #toolbar-tools>
         <Space>
+          <Tooltip title="删除菜单以及子菜单">
+            <div
+              v-access:role="['superadmin']"
+              v-access:code="['system:menu:remove']"
+              class="flex items-center"
+            >
+              <span class="mr-2 text-sm text-[#666666]">级联删除</span>
+              <Switch v-model:checked="cascadingDeletion" />
+            </div>
+          </Tooltip>
           <a-button @click="setExpandOrCollapse(false)">
             {{ $t('pages.common.collapse') }}
           </a-button>
@@ -149,6 +196,7 @@ const isAdmin = computed(() => {
           <a-button
             type="primary"
             v-access:code="['system:menu:add']"
+            v-access:role="['superadmin']"
             @click="handleAdd"
           >
             {{ $t('pages.common.add') }}
@@ -159,6 +207,7 @@ const isAdmin = computed(() => {
         <Space>
           <ghost-button
             v-access:code="['system:menu:edit']"
+            v-access:role="['superadmin']"
             @click="handleEdit(row)"
           >
             {{ $t('pages.common.edit') }}
@@ -168,6 +217,7 @@ const isAdmin = computed(() => {
             v-if="row.menuType !== 'F'"
             class="btn-success"
             v-access:code="['system:menu:add']"
+            v-access:role="['superadmin']"
             @click="handleSubAdd(row)"
           >
             {{ $t('pages.common.add') }}
@@ -175,12 +225,13 @@ const isAdmin = computed(() => {
           <Popconfirm
             :get-popup-container="getVxePopupContainer"
             placement="left"
-            title="确认删除？"
+            :title="removeConfirmTitle(row)"
             @confirm="handleDelete(row)"
           >
             <ghost-button
               danger
               v-access:code="['system:menu:remove']"
+              v-access:role="['superadmin']"
               @click.stop=""
             >
               {{ $t('pages.common.delete') }}
@@ -189,7 +240,7 @@ const isAdmin = computed(() => {
         </Space>
       </template>
     </BasicTable>
-    <MenuDrawer @reload="tableApi.query()" />
+    <MenuDrawer @reload="afterEditOrAdd" />
   </Page>
   <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>

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

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

apps/web-antd/src/views/system/oss-config/data.tsx

@@ -28,7 +28,10 @@ export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Select',
     componentProps: {
-      options: getDictOptions(DictEnum.SYS_YES_NO),
+      options: [
+        { label: '是', value: '0' },
+        { label: '否', value: '1' },
+      ],
     },
     fieldName: 'status',
     label: '是否默认',
@@ -81,7 +84,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 

apps/web-antd/src/views/system/oss-config/index.vue

@@ -131,6 +131,8 @@ const { hasAccessByCodes } = useAccess();
           v-model:value="row.status"
           :api="() => ossConfigChangeStatus(row)"
           :disabled="!hasAccessByCodes(['system:ossConfig:edit'])"
+          checked-text="是"
+          un-checked-text="否"
           @reload="tableApi.query()"
         />
       </template>

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

@@ -0,0 +1,11 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import OssConfigPage from '#/views/system/oss-config/index.vue';
+</script>
+
+<template>
+  <OssConfigPage />
+</template>

apps/web-antd/src/views/system/oss/constant.ts

@@ -0,0 +1,2 @@
+/** 支持的图片列表 */
+export const supportImageList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];

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

@@ -69,12 +69,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
-
-/**
- * 图片加载失败的fallback
- */
-export const fallbackImageBase64 =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==';

apps/web-antd/src/views/system/oss/fallback-image.txt

@@ -0,0 +1 @@
+data:image/png;base64,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

apps/web-antd/src/views/system/oss/file-upload-modal.vue

@@ -31,7 +31,11 @@ const [BasicModal, modalApi] = useVbenModal({
     title="文件上传"
   >
     <div class="flex flex-col gap-4">
-      <FileUpload v-model:value="fileList" :enable-drag-upload="true" />
+      <FileUpload
+        v-model:value="fileList"
+        :enable-drag-upload="true"
+        :max-count="3"
+      />
     </div>
   </BasicModal>
 </template>

apps/web-antd/src/views/system/oss/image-upload-modal.vue

@@ -31,7 +31,7 @@ const [BasicModal, modalApi] = useVbenModal({
     title="图片上传"
   >
     <div class="flex flex-col gap-4">
-      <ImageUpload v-model:value="fileList" />
+      <ImageUpload v-model:value="fileList" :max-count="3" />
     </div>
   </BasicModal>
 </template>

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

@@ -33,7 +33,9 @@ import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
 import { calculateFileSize } from '#/utils/file';
 import { downloadByData } from '#/utils/file/download';
 
-import { columns, fallbackImageBase64, querySchema } from './data';
+import { supportImageList } from './constant';
+import { columns, querySchema } from './data';
+import fallbackImageBase64 from './fallback-image.txt?raw';
 import fileUploadModal from './file-upload-modal.vue';
 import imageUploadModal from './image-upload-modal.vue';
 
@@ -154,7 +156,7 @@ function handleMultiDelete() {
 
 const router = useRouter();
 function handleToSettings() {
-  router.push('/system/oss-config');
+  router.push('/system/oss-config/index');
 }
 
 const preview = ref(false);
@@ -163,10 +165,32 @@ onMounted(async () => {
   preview.value = previewStr === 'true';
 });
 
+/**
+ * 根据拓展名判断是否是图片
+ * @param ext 拓展名
+ */
 function isImageFile(ext: string) {
-  const supportList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
-  return supportList.some((item) => ext.toLocaleLowerCase().includes(item));
+  return supportImageList.some((item) =>
+    ext.toLocaleLowerCase().includes(item),
+  );
 }
+
+/**
+ * 判断是否是pdf文件
+ * @param ext 扩展名
+ */
+function isPdfFile(ext: string) {
+  return ext.toLocaleLowerCase().includes('pdf');
+}
+
+/**
+ * pdf预览 使用浏览器接管
+ * @param url 文件地址
+ */
+function pdfPreview(url: string) {
+  window.open(url);
+}
+
 const [ImageUploadModal, imageUploadApi] = useVbenModal({
   connectedComponent: imageUploadModal,
 });
@@ -230,6 +254,12 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
             </div>
           </template>
         </Image>
+        <!-- pdf预览 使用浏览器开新窗口 -->
+        <span
+          v-else-if="preview && isPdfFile(row.url)"
+          class="icon-[vscode-icons--file-type-pdf2] size-10 cursor-pointer"
+          @click.stop="pdfPreview(row.url)"
+        ></span>
         <span v-else>{{ row.url }}</span>
       </template>
       <template #action="{ row }">

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

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

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

@@ -8,6 +8,7 @@ import { addFullName, cloneDeep } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
 import { postAdd, postInfo, postUpdate } from '#/api/system/post';
 import { getDeptTree } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -50,8 +51,16 @@ async function setupDeptSelect() {
   ]);
 }
 
+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) {
@@ -67,31 +76,33 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       const record = await postInfo(id);
       await formApi.setValues(record);
     }
+    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 ? postUpdate(data) : postAdd(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>
 

apps/web-antd/src/views/system/role-assign/data.tsx

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

apps/web-antd/src/views/system/role-assign/role-assign-drawer.vue

@@ -17,6 +17,7 @@ const emit = defineEmits<{ reload: [] }>();
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   onConfirm: handleSubmit,
   onCancel: handleReset,
+  destroyOnClose: true,
 });
 
 const route = useRoute();

apps/web-antd/src/views/system/role/authUser.vue

@@ -0,0 +1,11 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import RoleAssignPage from '#/views/system/role-assign/index.vue';
+</script>
+
+<template>
+  <RoleAssignPage />
+</template>

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

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

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

@@ -142,7 +142,7 @@ function handleAuthEdit(record: Role) {
 
 const router = useRouter();
 function handleAssignRole(record: Role) {
-  router.push(`/system/role-assign/${record.roleId}`);
+  router.push(`/system/role-auth/user/${record.roleId}`);
 }
 </script>
 
@@ -226,7 +226,11 @@ function handleAssignRole(record: Role) {
                 </MenuItem>
               </Menu>
             </template>
-            <a-button size="small" type="link">
+            <a-button
+              size="small"
+              type="link"
+              v-access:code="'system:role:edit'"
+            >
               {{ $t('pages.common.more') }}
             </a-button>
           </Dropdown>

apps/web-antd/src/views/system/role/role-auth-modal.vue

@@ -52,7 +52,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 const [BasicModal, modalApi] = useVbenModal({
   fullscreenButton: false,
   onBeforeClose,
-  onCancel: handleClosed,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {

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

@@ -85,6 +85,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
   onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
+  destroyOnClose: true,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;

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

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

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

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

apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue

@@ -85,6 +85,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
   onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
+  destroyOnClose: true,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;

apps/web-antd/src/views/system/user/authRole.vue

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

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

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

apps/web-antd/src/views/tool/gen/code-preview-modal.vue

@@ -20,7 +20,7 @@ import {
 } from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
-import { Skeleton, Tree } from 'ant-design-vue';
+import { Alert, Skeleton, Tree } from 'ant-design-vue';
 
 import { previewCode } from '#/api/tool/gen';
 
@@ -185,6 +185,11 @@ const { copy } = useClipboard({ legacy: true });
             </div>
           </template>
         </Tree>
+        <Alert
+          class="mt-2"
+          show-icon
+          message="👆显示的名称为模板的文件名，非最终下载文件名..."
+        />
       </div>
       <CodeMirror
         v-model="codeContent"

apps/web-antd/src/views/tool/gen/editTable.vue

@@ -0,0 +1,10 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+-->
+<script setup lang="ts">
+import EditGenPage from './edit-gen.vue';
+</script>
+
+<template>
+  <EditGenPage />
+</template>

apps/web-antd/src/views/tool/gen/index.vue

@@ -110,7 +110,7 @@ function handlePreview(record: Recordable<any>) {
 
 const router = useRouter();
 function handleEdit(record: Recordable<any>) {
-  router.push(`/code-gen/edit/${record.tableId}`);
+  router.push(`/tool/gen-edit/index/${record.tableId}`);
 }
 
 async function handleSync(record: Recordable<any>) {

apps/web-antd/src/views/workflow/category/data.ts

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

apps/web-antd/src/views/workflow/components/approval-panel.vue

@@ -41,6 +41,7 @@ import {
 import { renderDict } from '#/utils/render';
 
 import { approvalModal, approvalRejectionModal, flowInterfereModal } from '.';
+import FlowPreview from '../components/flow-preview/index.vue';
 import ApprovalDetails from './approval-details.vue';
 import { approveWithReasonModal } from './helper';
 import userSelectModal from './user-select-modal.vue';
@@ -442,9 +443,9 @@ async function handleCopy(text: string) {
           />
         </TabPane>
         <TabPane key="2" tab="审批流程图">
-          <img
-            :src="`data:image/png;base64,${currentFlowInfo.image}`"
-            class="rounded-lg border"
+          <FlowPreview
+            v-if="currentFlowInfo.defChart"
+            :data="currentFlowInfo.defChart.defJson"
           />
         </TabPane>
       </Tabs>

apps/web-antd/src/views/workflow/components/flow-preview/index.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { ZoomParamType } from '@logicflow/core';
+
+import { onMounted, shallowRef, useTemplateRef, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import {
+  MinusCircleOutlined,
+  PlusCircleOutlined,
+  ShrinkOutlined,
+} from '@ant-design/icons-vue';
+import LogicFlow from '@logicflow/core';
+
+import Between from './model/between';
+import End from './model/end';
+import Parallel from './model/parallel';
+import Serial from './model/serial';
+import Skip from './model/skip';
+import Start from './model/start';
+import { json2LogicFlowJson } from './model/tool';
+
+import '@logicflow/core/lib/style/index.css';
+
+const props = withDefaults(defineProps<{ data?: object }>(), {
+  data: () => ({}),
+});
+
+const container = useTemplateRef('container');
+const lf = shallowRef<LogicFlow | null>(null);
+
+function zoomViewport(zoom: ZoomParamType) {
+  if (!lf.value) {
+    return;
+  }
+  lf.value.zoom(zoom);
+  // 将内容平移至画布中心
+  lf.value.translateCenter();
+}
+
+onMounted(async () => {
+  if (props.data && container.value) {
+    const data = json2LogicFlowJson(props.data);
+    lf.value = new LogicFlow({
+      container: container.value,
+      isSilentMode: true,
+      textEdit: false,
+      grid: {
+        size: 20,
+        type: 'dot',
+        config: {
+          color: '#ccc',
+          thickness: 1,
+        },
+      },
+      background: {
+        backgroundColor: '#fff',
+      },
+    });
+
+    lf.value.register(Start);
+    lf.value.register(Between);
+    lf.value.register(Serial);
+    lf.value.register(Parallel);
+    lf.value.register(End);
+    lf.value.register(Skip);
+
+    lf.value.render(data);
+    lf.value.translateCenter();
+  }
+});
+
+const { isDark } = usePreferences();
+watch(isDark, (v) => {
+  if (!lf.value) {
+    return;
+  }
+  lf.value.graphModel.background = {
+    background: v ? '#333' : '#fff',
+  };
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between py-2">
+      <div class="flex items-center gap-3">
+        <a-button @click="zoomViewport(1)">
+          <template #icon>
+            <ShrinkOutlined />
+          </template>
+        </a-button>
+        <a-button @click="zoomViewport(true)">
+          <template #icon>
+            <PlusCircleOutlined />
+          </template>
+        </a-button>
+        <a-button @click="zoomViewport(false)">
+          <template #icon>
+            <MinusCircleOutlined />
+          </template>
+        </a-button>
+      </div>
+      <div class="flex items-center gap-3 font-semibold">
+        <span class="rounded-md border border-[#000] px-2">未办理</span>
+        <span
+          class="rounded-md border border-dashed border-[#ffcd17] bg-[#fff8dc] px-2 dark:text-black"
+        >
+          待办理
+        </span>
+        <span
+          class="rounded-md border border-[#9dff00] bg-[#f0ffd9] px-2 dark:text-black"
+        >
+          已完成
+        </span>
+      </div>
+    </div>
+    <!-- 容器区域 -->
+    <div class="h-[500px] w-full border" ref="container"></div>
+  </div>
+</template>

apps/web-antd/src/views/workflow/components/flow-preview/model/between.ts

@@ -0,0 +1,21 @@
+import LogicFlow, { RectNode, RectNodeModel } from '@logicflow/core';
+
+class BetweenModel extends RectNodeModel {
+  override getNodeStyle() {
+    return super.getNodeStyle();
+  }
+  override initNodeData(data: LogicFlow.NodeConfig) {
+    super.initNodeData(data);
+    this.width = 100;
+    this.height = 80;
+    this.radius = 5;
+  }
+}
+
+class BetweenView extends RectNode {}
+
+export default {
+  type: 'between',
+  model: BetweenModel,
+  view: BetweenView,
+};

apps/web-antd/src/views/workflow/components/flow-preview/model/end.ts

@@ -0,0 +1,16 @@
+import LogicFlow, { CircleNode, CircleNodeModel } from '@logicflow/core';
+
+class endModel extends CircleNodeModel {
+  override initNodeData(data: LogicFlow.NodeConfig) {
+    super.initNodeData(data);
+    this.r = 20;
+  }
+}
+
+class endView extends CircleNode {}
+
+export default {
+  type: 'end',
+  model: endModel,
+  view: endView,
+};

apps/web-antd/src/views/workflow/components/flow-preview/model/parallel.ts

@@ -0,0 +1,59 @@
+import type { GraphModel } from '@logicflow/core';
+
+import LogicFlow, { h, PolygonNode, PolygonNodeModel } from '@logicflow/core';
+
+class ParallelModel extends PolygonNodeModel {
+  static extendKey = 'ParallelModel';
+
+  constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
+    if (!data.text) {
+      data.text = '';
+    }
+    if (data.text && typeof data.text === 'string') {
+      data.text = {
+        value: data.text,
+        x: data.x,
+        y: data.y + 40,
+      };
+    }
+    super(data, graphModel);
+    this.points = [
+      [25, 0],
+      [50, 25],
+      [25, 50],
+      [0, 25],
+    ];
+  }
+}
+
+class ParallelView extends PolygonNode {
+  static extendKey = 'ParallelNode';
+
+  override getShape() {
+    const { model } = this.props;
+    const { x, y, width, height, points } = model;
+    const style = model.getNodeStyle();
+    return h(
+      'g',
+      {
+        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+      },
+      h('polygon', {
+        ...style,
+        x,
+        y,
+        points,
+      }),
+      h('path', {
+        d: 'm 23,10 0,12.5 -12.5,0 0,5 12.5,0 0,12.5 5,0 0,-12.5 12.5,0 0,-5 -12.5,0 0,-12.5 -5,0 z',
+        ...style,
+      }),
+    );
+  }
+}
+
+export default {
+  type: 'parallel',
+  view: ParallelView,
+  model: ParallelModel,
+};

apps/web-antd/src/views/workflow/components/flow-preview/model/serial.ts

@@ -0,0 +1,59 @@
+import type { GraphModel } from '@logicflow/core';
+
+import LogicFlow, { h, PolygonNode, PolygonNodeModel } from '@logicflow/core';
+
+class SerialModel extends PolygonNodeModel {
+  static extendKey = 'SerialModel';
+
+  constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
+    if (!data.text) {
+      data.text = '';
+    }
+    if (data.text && typeof data.text === 'string') {
+      data.text = {
+        value: data.text,
+        x: data.x,
+        y: data.y + 40,
+      };
+    }
+    super(data, graphModel);
+    this.points = [
+      [25, 0],
+      [50, 25],
+      [25, 50],
+      [0, 25],
+    ];
+  }
+}
+
+class SerialView extends PolygonNode {
+  static extendKey = 'SerialNode';
+
+  override getShape() {
+    const { model } = this.props;
+    const { x, y, width, height, points } = model;
+    const style = model.getNodeStyle();
+    return h(
+      'g',
+      {
+        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
+      },
+      h('polygon', {
+        ...style,
+        x,
+        y,
+        points,
+      }),
+      h('path', {
+        d: 'm 16,15 7.42857142857143,9.714285714285715 -7.42857142857143,9.714285714285715 3.428571428571429,0 5.714285714285715,-7.464228571428572 5.714285714285715,7.464228571428572 3.428571428571429,0 -7.42857142857143,-9.714285714285715 7.42857142857143,-9.714285714285715 -3.428571428571429,0 -5.714285714285715,7.464228571428572 -5.714285714285715,-7.464228571428572 -3.428571428571429,0 z',
+        ...style,
+      }),
+    );
+  }
+}
+
+export default {
+  type: 'serial',
+  view: SerialView,
+  model: SerialModel,
+};

apps/web-antd/src/views/workflow/components/flow-preview/model/skip.ts

@@ -0,0 +1,32 @@
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
+
+class SkipModel extends PolylineEdgeModel {
+  /**
+   * 重写此方法，使保存数据是能带上锚点数据。
+   */
+  override getData() {
+    const data = super.getData();
+    data.sourceAnchorId = this.sourceAnchorId;
+    data.targetAnchorId = this.targetAnchorId;
+    return data;
+  }
+
+  override getEdgeStyle() {
+    const style = super.getEdgeStyle();
+    const { properties } = this;
+    if (properties.isActived) {
+      style.strokeDasharray = '4 4';
+    }
+    return style;
+  }
+
+  override setAttributes() {
+    this.offset = 20;
+  }
+}
+
+export default {
+  type: 'skip',
+  view: PolylineEdge,
+  model: SkipModel,
+};

apps/web-antd/src/views/workflow/components/flow-preview/model/start.ts

@@ -0,0 +1,16 @@
+import LogicFlow, { CircleNode, CircleNodeModel } from '@logicflow/core';
+
+class StartModel extends CircleNodeModel {
+  override initNodeData(data: LogicFlow.NodeConfig) {
+    super.initNodeData(data);
+    this.r = 20;
+  }
+}
+
+class StartView extends CircleNode {}
+
+export default {
+  type: 'start',
+  model: StartModel,
+  view: StartView,
+};

apps/web-antd/src/views/workflow/components/flow-preview/model/tool.ts

@@ -0,0 +1,248 @@
+/* eslint-disable unicorn/no-array-reduce */
+const NODE_TYPE_MAP = {
+  0: 'start',
+  1: 'between',
+  2: 'end',
+  3: 'serial',
+  4: 'parallel',
+};
+
+/**
+ * 将warm-flow的定义json数据转成LogicFlow支持的数据格式
+ * @param {*} json
+ * @returns LogicFlow的数据
+ */
+export const json2LogicFlowJson = (definition: any) => {
+  const graphData: any = {
+    nodes: [],
+    edges: [],
+  };
+  // 解析definition属性
+  graphData.flowCode = definition.flowCode;
+  graphData.flowName = definition.flowName;
+  graphData.version = definition.version;
+  graphData.fromCustom = definition.fromCustom;
+  graphData.fromPath = definition.fromPath;
+  // 解析节点
+  const allSkips = definition.nodeList.reduce((acc: any, node: any) => {
+    if (node.skipList && Array.isArray(node.skipList)) {
+      acc.push(...node.skipList);
+    }
+    return acc;
+  }, []);
+  const allNodes = definition.nodeList;
+  // 解析节点
+  if (allNodes.length > 0) {
+    for (let i = 0, len = allNodes.length; i < len; i++) {
+      const node = allNodes[i];
+      const lfNode: any = {
+        text: {},
+        properties: {},
+      };
+      // 处理节点
+      lfNode.type = (NODE_TYPE_MAP as any)[node.nodeType];
+      lfNode.id = node.nodeCode;
+      const coordinate = node.coordinate;
+      if (coordinate) {
+        const attr = coordinate.split('|');
+        const nodeXy = attr[0].split(',');
+        lfNode.x = Number.parseInt(nodeXy[0]);
+        lfNode.y = Number.parseInt(nodeXy[1]);
+        if (attr.length === 2) {
+          const textXy = attr[1].split(',');
+          lfNode.text.x = Number.parseInt(textXy[0]);
+          lfNode.text.y = Number.parseInt(textXy[1]);
+        }
+      }
+      lfNode.text.value = node.nodeName;
+      lfNode.properties.nodeRatio = node.nodeRatio.toString();
+      lfNode.properties.permissionFlag = node.permissionFlag;
+      lfNode.properties.anyNodeSkip = node.anyNodeSkip;
+      lfNode.properties.listenerType = node.listenerType;
+      lfNode.properties.listenerPath = node.listenerPath;
+      lfNode.properties.formCustom = node.formCustom;
+      lfNode.properties.formPath = node.formPath;
+      lfNode.properties.ext = {};
+      if (node.ext && typeof node.ext === 'string') {
+        try {
+          node.ext = JSON.parse(node.ext);
+          node.ext.forEach((e: any) => {
+            lfNode.properties.ext[e.code] = String(e.value).includes(',')
+              ? e.value.split(',')
+              : String(e.value);
+          });
+        } catch (error) {
+          console.error('Error parsing JSON:', error);
+        }
+      }
+      lfNode.properties.style = {};
+      if (node.status === 2) {
+        lfNode.properties.style.fill = '#F0FFD9';
+        lfNode.properties.style.stroke = '#9DFF00';
+      }
+      if (node.status === 1) {
+        lfNode.properties.style.fill = '#FFF8DC';
+        lfNode.properties.style.stroke = '#FFCD17';
+      }
+      graphData.nodes.push(lfNode);
+    }
+  }
+  if (allSkips.length > 0) {
+    // 处理边
+    let skipEle = null;
+    let edge: any = {};
+    for (let j = 0, lenn = allSkips.length; j < lenn; j++) {
+      skipEle = allSkips[j];
+      edge = {
+        text: {},
+        properties: {},
+      };
+      edge.id = skipEle.id;
+      edge.type = 'skip';
+      edge.sourceNodeId = skipEle.nowNodeCode;
+      edge.targetNodeId = skipEle.nextNodeCode;
+      edge.text = { value: skipEle.skipName };
+      edge.properties.skipCondition = skipEle.skipCondition;
+      edge.properties.skipName = skipEle.skipName;
+      edge.properties.skipType = skipEle.skipType;
+      const expr = skipEle.expr;
+      if (expr) {
+        edge.properties.expr = skipEle.expr;
+      }
+      const coordinate = skipEle.coordinate;
+      if (coordinate) {
+        const coordinateXy = coordinate.split('|');
+        edge.pointsList = [];
+        coordinateXy[0].split(';').forEach((item: any) => {
+          const pointArr = item.split(',');
+          edge.pointsList.push({
+            x: Number.parseInt(pointArr[0]),
+            y: Number.parseInt(pointArr[1]),
+          });
+        });
+        edge.startPoint = edge.pointsList[0];
+        edge.endPoint = edge.pointsList[edge.pointsList.length - 1];
+        if (coordinateXy.length > 1) {
+          const textXy = coordinateXy[1].split(',');
+          edge.text.x = Number.parseInt(textXy[0]);
+          edge.text.y = Number.parseInt(textXy[1]);
+        }
+      }
+      graphData.edges.push(edge);
+    }
+  }
+  console.log(graphData);
+  return graphData;
+};
+
+/**
+ * 将LogicFlow的数据转成warm-flow的json定义文件
+ * @param {*} data(...definitionInfo,nodes,edges)
+ * @returns
+ */
+export const logicFlowJsonToWarmFlow = (data: any) => {
+  // 先构建成流程对象
+  const definition: any = {
+    nodeList: [],
+  };
+
+  /**
+   * 根据节点的类型值，获取key
+   * @param {*} mapValue 节点类型映射
+   * @returns
+   */
+  const getNodeTypeValue = (mapValue: any) => {
+    for (const key in NODE_TYPE_MAP) {
+      if ((NODE_TYPE_MAP as any)[key] === mapValue) {
+        return key;
+      }
+    }
+  };
+  /**
+   * 根据节点的编码，获取节点的类型
+   * @param {*} nodeCode 当前节点名称
+   * @returns
+   */
+  const getNodeType = (nodeCode: any) => {
+    for (const node of definition.nodeList) {
+      if (nodeCode === node.nodeCode) {
+        return node.nodeType;
+      }
+    }
+  };
+  /**
+   * 拼接skip坐标
+   * @param {*} edge logicFlow的edge
+   * @returns
+   */
+  const getCoordinate = (edge: any) => {
+    let coordinate = '';
+    for (let i = 0; i < edge.pointsList.length; i++) {
+      coordinate = `${
+        coordinate + Number.parseInt(edge.pointsList[i].x)
+      },${Number.parseInt(edge.pointsList[i].y)}`;
+      if (i !== edge.pointsList.length - 1) {
+        coordinate = `${coordinate};`;
+      }
+    }
+    if (edge.text) {
+      coordinate = `${coordinate}|${Number.parseInt(edge.text.x)},${Number.parseInt(edge.text.y)}`;
+    }
+    return coordinate;
+  };
+  // 流程定义
+  definition.id = data.id;
+  definition.flowCode = data.flowCode;
+  definition.flowName = data.flowName;
+  definition.version = data.version;
+  definition.fromCustom = data.fromCustom;
+  definition.fromPath = data.fromPath;
+  // 流程节点
+  data.nodes.forEach((anyNode: any) => {
+    const node: any = {};
+    node.nodeType = getNodeTypeValue(anyNode.type);
+    node.nodeCode = anyNode.id;
+    if (anyNode.text) {
+      node.nodeName = anyNode.text.value;
+    }
+    node.permissionFlag = anyNode.properties.permissionFlag;
+    node.nodeRatio = anyNode.properties.nodeRatio;
+    node.anyNodeSkip = anyNode.properties.anyNodeSkip;
+    node.listenerType = anyNode.properties.listenerType;
+    node.listenerPath = anyNode.properties.listenerPath;
+    node.formCustom = anyNode.properties.formCustom;
+    node.formPath = anyNode.properties.formPath;
+    node.ext = [];
+    for (const key in anyNode.properties.ext) {
+      if (Object.prototype.hasOwnProperty.call(anyNode.properties.ext, key)) {
+        const e = anyNode.properties.ext[key];
+        node.ext.push({ code: key, value: Array.isArray(e) ? e.join(',') : e });
+      }
+    }
+    node.ext = JSON.stringify(node.ext);
+    node.coordinate = `${anyNode.x},${anyNode.y}`;
+    if (anyNode.text && anyNode.text.x && anyNode.text.y) {
+      node.coordinate = `${node.coordinate}|${anyNode.text.x},${anyNode.text.y}`;
+    }
+    node.handlerType = anyNode.properties.handlerType;
+    node.handlerPath = anyNode.properties.handlerPath;
+    node.version = definition.version;
+    node.skipList = [];
+    data.edges.forEach((anyEdge: any) => {
+      if (anyEdge.sourceNodeId === anyNode.id) {
+        const skip: any = {};
+        skip.skipType = anyEdge.properties.skipType;
+        skip.skipCondition = anyEdge.properties.skipCondition;
+        skip.skipName = anyEdge?.text?.value || anyEdge.properties.skipName;
+        skip.nowNodeCode = anyEdge.sourceNodeId;
+        skip.nowNodeType = getNodeType(skip.nowNodeCode);
+        skip.nextNodeCode = anyEdge.targetNodeId;
+        skip.nextNodeType = getNodeType(skip.nextNodeCode);
+        skip.coordinate = getCoordinate(anyEdge);
+        node.skipList.push(skip);
+      }
+    });
+    definition.nodeList.push(node);
+  });
+  return JSON.stringify(definition);
+};

apps/web-antd/src/views/workflow/leave/data.tsx

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

apps/web-antd/src/views/workflow/leave/leaveEdit.vue

@@ -0,0 +1,11 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import LeaveFormPage from './leave-form.vue';
+</script>
+
+<template>
+  <LeaveFormPage />
+</template>

apps/web-antd/src/views/workflow/processDefinition/category-tree.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { PropType } from 'vue';
+
 import type { CategoryTree } from '#/api/workflow/category/model';
 
-import { onMounted, type PropType, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import { SyncOutlined } from '@ant-design/icons-vue';
 import { InputSearch, Skeleton, Tree } from 'ant-design-vue';

apps/web-antd/src/views/workflow/processDefinition/data.tsx

@@ -63,7 +63,7 @@ export const columns: VxeGridProps['columns'] = [
     slots: { default: 'action' },
     title: '操作',
     resizable: false,
-    width: 200,
+    width: 'auto',
   },
 ];
 

apps/web-antd/src/views/workflow/processDefinition/design.vue

@@ -0,0 +1,11 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import FlowDesignerPage from '../components/flow-designer.vue';
+</script>
+
+<template>
+  <FlowDesignerPage />
+</template>

apps/web-antd/src/views/workflow/processDefinition/index.vue

@@ -154,7 +154,7 @@ const router = useRouter();
  */
 function handleDesign(row: any, disabled: boolean) {
   router.push({
-    path: '/workflow/designer',
+    path: '/workflow/design/index',
     query: { definitionId: row.id, disabled: String(disabled) },
   });
 }

apps/web-antd/src/views/workflow/processDefinition/process-definition-modal.vue

@@ -75,7 +75,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicDrawer, modalApi] = useVbenModal({
   onBeforeClose,
-  onCancel: handleClosed,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {

apps/web-antd/src/views/workflow/task/allTaskWaiting.vue

@@ -28,6 +28,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByAllTaskFinish, pageByAllTaskWait } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -140,7 +141,9 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
+  console.log('scrollTop + clientHeight', scrollTop + clientHeight);
+  console.log('scrollHeight', scrollHeight);
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/constant.ts

@@ -0,0 +1,7 @@
+/**
+ * 底部偏移量
+ * 在缩放时会差大概0.5px 导致触底逻辑不会触发
+ * 在这里设置手动补偿
+ * @see https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC28RE#note_40175381
+ */
+export const bottomOffset = 2;

apps/web-antd/src/views/workflow/task/myDocument.vue

@@ -24,6 +24,7 @@ import { cloneDeep, debounce } from 'lodash-es';
 import { pageByCurrent } from '#/api/workflow/instance';
 
 import { ApprovalCard, ApprovalPanel } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -95,7 +96,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/taskCopyList.vue

@@ -26,6 +26,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskCopy } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -99,7 +100,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/taskFinish.vue

@@ -26,6 +26,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskFinish } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -99,7 +100,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/taskWaiting.vue

@@ -27,6 +27,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskWait } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -100,7 +101,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {