diff --git a/apps/vben5/.gitpod.yml b/apps/vben5/.gitpod.yml
index fb75b433d..5fda2cf70 100644
--- a/apps/vben5/.gitpod.yml
+++ b/apps/vben5/.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
diff --git a/apps/vben5/.node-version b/apps/vben5/.node-version
index 48b14e6b2..ee5c24469 100644
--- a/apps/vben5/.node-version
+++ b/apps/vben5/.node-version
@@ -1 +1 @@
-20.14.0
+22.1.0
diff --git a/apps/vben5/.npmrc b/apps/vben5/.npmrc
index f4a1ad483..21147aff2 100644
--- a/apps/vben5/.npmrc
+++ b/apps/vben5/.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
diff --git a/apps/vben5/README.ja-JP.md b/apps/vben5/README.ja-JP.md
index baa4cc448..f7847a1d9 100644
--- a/apps/vben5/README.ja-JP.md
+++ b/apps/vben5/README.ja-JP.md
@@ -1,8 +1,13 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center">
+  <a href="https://github.com/anncwb/vue-vben-admin">
+    <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp">
+  </a>
+  <br>
+  <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
-<h1>Vue Vben Admin</h1>
+  <h1>Vue Vben Admin</h1>
 </div>
 
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
@@ -15,27 +20,27 @@ Vue Vben Adminは、最新の`vue3`、`vite`、`TypeScript`などの主流技術
 
 ## アップグレード通知
 
-これは最新バージョン5.0であり、以前のバージョンとは互換性がありません。新しいプロジェクトを開始する場合は、最新バージョンを使用することをお勧めします。古いバージョンを表示したい場合は、[v2ブランチ](https://github.com/vbenjs/vue-vben-admin/tree/v2)を使用してください。
+これは最新バージョン `5.0` であり、以前のバージョンとは互換性がありません。新しいプロジェクトを開始する場合は、最新バージョンを使用することをお勧めします。古いバージョンを表示したい場合は、[v2ブランチ](https://github.com/vbenjs/vue-vben-admin/tree/v2)を使用してください。
 
 ## 特徴
 
-- **最新技術スタック**: Vue 3やViteなどの最先端フロントエンド技術で開発
-- **TypeScript**: アプリケーション規模のJavaScriptのための言語
-- **テーマ**: 複数のテーマカラーが利用可能で、カスタマイズオプションも豊富
-- **国際化**: 完全な内蔵国際化サポート
-- **権限管理**: 動的ルートベースの権限生成ソリューションを内蔵
+- **最新技術スタック**：Vue 3やViteなどの最先端フロントエンド技術で開発
+- **TypeScript**：アプリケーション規模のJavaScriptのための言語
+- **テーマ**：複数のテーマカラーが利用可能で、カスタマイズオプションも豊富
+- **国際化**：完全な内蔵国際化サポート
+- **権限管理**：動的ルートベースの権限生成ソリューションを内蔵
 
 ## プレビュー
 
 - [Vben Admin](https://vben.pro/) - フルバージョンの中国語サイト
 
-テストアカウント: vben/123456
+テストアカウント：vben/123456
 
-<p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
-</p>
+<div align="center">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</div>
 
 ### Gitpodを使用
 
@@ -49,30 +54,27 @@ Gitpod（GitHub用の無料オンライン開発環境）でプロジェクト
 
 ## インストールと使用
 
-- プロジェクトコードを取得
+1. プロジェクトコードを取得
 
 ```bash
 git clone https://github.com/vbenjs/vue-vben-admin.git
 ```
 
-- 依存関係のインストール
+2. 依存関係のインストール
 
 ```bash
 cd vue-vben-admin
-
-corepack enable
-
+npm i -g corepack
 pnpm install
-
 ```
 
-- 実行
+3. 実行
 
 ```bash
 pnpm dev
 ```
 
-- ビルド
+4. ビルド
 
 ```bash
 pnpm build
@@ -86,40 +88,39 @@ pnpm build
 
 ご参加をお待ちしております！[Issueを提出](https://github.com/anncwb/vue-vben-admin/issues/new/choose)するか、Pull Requestを送信してください。
 
-**Pull Request:**
+**Pull Request プロセス：**
 
-1. コードをフォーク！
-2. 自分のブランチを作成: `git checkout -b feat/xxxx`
-3. 変更をコミット: `git commit -am 'feat(function): add xxxxx'`
-4. ブランチをプッシュ: `git push origin feat/xxxx`
+1. コードをフォーク
+2. 自分のブランチを作成：`git checkout -b feat/xxxx`
+3. 変更をコミット：`git commit -am 'feat(function): add xxxxx'`
+4. ブランチをプッシュ：`git push origin feat/xxxx`
 5. `pull request`を送信
 
 ## Git貢献提出規則
 
-- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 規則 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
-
-  - `feat` 新機能の追加
-  - `fix` 問題/バグの修正
-  - `style` コードスタイルに関連し、実行結果に影響しない
-  - `perf` 最適化/パフォーマンス向上
-  - `refactor` リファクタリング
-  - `revert` 変更の取り消し
-  - `test` テスト関連
-  - `docs` ドキュメント/注釈
-  - `chore` 依存関係の更新/スキャフォールディング設定の変更など
-  - `ci` 継続的インテグレーション
-  - `types` 型定義ファイルの変更
-  - `wip` 開発中
+参考 [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` 型定義ファイルの変更
 
 ## ブラウザサポート
 
-ローカル開発には`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
diff --git a/apps/vben5/README.md b/apps/vben5/README.md
index e84c8392e..e027949ab 100644
--- a/apps/vben5/README.md
+++ b/apps/vben5/README.md
@@ -1,8 +1,13 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center">
+  <a href="https://github.com/anncwb/vue-vben-admin">
+    <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp">
+  </a>
+  <br>
+  <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
-<h1>Vue Vben Admin</h1>
+  <h1>Vue Vben Admin</h1>
 </div>
 
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
@@ -17,7 +22,7 @@ Vue Vben Admin is a free and open source middle and back-end template. Using the
 
 This is the latest version, 5.0, and it is not compatible with previous versions. If you are starting a new project, it is recommended to use the latest version. If you wish to view the old version, please use the [v2 branch](https://github.com/vbenjs/vue-vben-admin/tree/v2).
 
-## Feature
+## Features
 
 - **Latest Technology Stack**: Developed with cutting-edge front-end technologies like Vue 3 and Vite
 - **TypeScript**: A language for application-scale JavaScript
@@ -31,11 +36,11 @@ This is the latest version, 5.0, and it is not compatible with previous versions
 
 Test Account: vben/123456
 
-<p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
-</p>
+<div align="center">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</div>
 
 ### Use Gitpod
 
@@ -47,31 +52,29 @@ Open the project in Gitpod (free online dev environment for GitHub) and start co
 
 [Document](https://doc.vben.pro/)
 
-## Install and use
+## Install and Use
 
-- Get the project code
+1. Get the project code
 
 ```bash
 git clone https://github.com/vbenjs/vue-vben-admin.git
 ```
 
-- Installation dependencies
+2. Install dependencies
 
 ```bash
 cd vue-vben-admin
-
-corepack enable
-
+npm i -g corepack
 pnpm install
 ```
 
-- run
+3. Run
 
 ```bash
 pnpm dev
 ```
 
-- build
+4. Build
 
 ```bash
 pnpm build
@@ -81,44 +84,43 @@ pnpm build
 
 [CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
 
-## How to contribute
+## How to Contribute
 
-You are very welcome to join！[Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) Or submit a Pull Request。
+You are very welcome to join! [Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) or submit a Pull Request.
 
-**Pull Request:**
+**Pull Request Process:**
 
-1. Fork code!
-2. Create your own branch: `git checkout -b feat/xxxx`
+1. Fork the code
+2. Create your branch: `git checkout -b feat/xxxx`
 3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
 4. Push your branch: `git push origin feat/xxxx`
-5. submit`pull request`
+5. Submit `pull request`
 
-## Git Contribution submission specification
+## Git Contribution Submission Specification
 
-- reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+Reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
 
-  - `feat` Add new features
-  - `fix` Fix the problem/BUG
-  - `style` The code style is related and does not affect the running result
-  - `perf` Optimization/performance improvement
-  - `refactor` Refactor
-  - `revert` Undo edit
-  - `test` Test related
-  - `docs` Documentation/notes
-  - `chore` Dependency update/scaffolding configuration modification etc.
-  - `ci` Continuous integration
-  - `types` Type definition file changes
-  - `wip` In development
+- `feat` Add new features
+- `fix` Fix the problem/BUG
+- `style` The code style is related and does not affect the running result
+- `perf` Optimization/performance improvement
+- `refactor` Refactor
+- `revert` Undo edit
+- `test` Test related
+- `docs` Documentation/notes
+- `chore` Dependency update/scaffolding configuration modification etc.
+- `ci` Continuous integration
+- `types` Type definition file changes
 
-## Browser support
+## Browser Support
 
 The `Chrome 80+` browser is recommended for local development
 
 Support modern browsers, not IE
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| :-: | :-: | :-: | :-: | :-: |
-| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## Maintainer
 
@@ -136,11 +138,10 @@ If you think this project is helpful to you, you can help the author buy a cup o
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
-## Contributor
+## Contributors
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-  <img alt="Contributors"
-        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+  <img alt="Contributors" src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord
diff --git a/apps/vben5/README.zh-CN.md b/apps/vben5/README.zh-CN.md
index e2f05bb98..5a6b191b8 100644
--- a/apps/vben5/README.zh-CN.md
+++ b/apps/vben5/README.zh-CN.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,31 +20,31 @@ Vue Vben Admin 是 Vue Vben Admin 的升级版本。作为一个免费开源的
 
 ## 升级提示
 
-该版本为最新版本`5.0`, 与其他版本不兼容，如果你是新项目，建议使用最新版本。如果你想查看旧版本，请使用 [v2 分支](https://github.com/vbenjs/vue-vben-admin/tree/v2)
+该版本为最新版本 `5.0`，与其他版本不兼容，如果你是新项目，建议使用最新版本。如果你想查看旧版本，请使用 [v2 分支](https://github.com/vbenjs/vue-vben-admin/tree/v2)
 
 ## 特性
 
 - **最新技术栈**：使用 Vue3/vite 等前端前沿技术开发
-- **TypeScript**: 应用程序级 JavaScript 的语言
+- **TypeScript**：应用程序级 JavaScript 的语言
 - **主题**：提供多套主题色彩，可配置自定义主题
 - **国际化**：内置完善的国际化方案
-- **权限** 内置完善的动态路由权限生成方案
+- **权限**：内置完善的动态路由权限生成方案
 
 ## 预览
 
 - [Vben Admin](https://vben.pro/) - 完整版中文站点
 
-测试账号: vben/123456
+测试账号：vben/123456
 
-<p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
-</p>
+<div align="center">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+  <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</div>
 
 ### 使用 Gitpod
 
-在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
+在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码。
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
 
@@ -49,29 +54,27 @@ Vue Vben Admin 是 Vue Vben Admin 的升级版本。作为一个免费开源的
 
 ## 安装使用
 
-- 获取项目代码
+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
@@ -85,68 +88,66 @@ pnpm build
 
 非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
 
-**Pull Request:**
+**Pull Request 流程：**
 
-1. Fork 代码!
-2. 创建自己的分支: `git checkout -b feature/xxxx`
-3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
-4. 推送您的分支: `git push origin feature/xxxx`
-5. 提交`pull request`
+1. Fork 代码
+2. 创建自己的分支：`git checkout -b feature/xxxx`
+3. 提交你的修改：`git commit -am 'feat(function): add xxxxx'`
+4. 推送您的分支：`git push origin feature/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))
-
-  - `feat` 增加新功能
-  - `fix` 修复问题/BUG
-  - `style` 代码风格相关无影响运行结果的
-  - `perf` 优化/性能提升
-  - `refactor` 重构
-  - `revert` 撤销修改
-  - `test` 测试相关
-  - `docs` 文档/注释
-  - `chore` 依赖更新/脚手架配置修改等
-  - `ci` 持续集成
-  - `types` 类型定义文件更改
-  - `wip` 开发中
+参考 [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` 依赖更新/脚手架配置修改等
+- `ci` 持续集成
+- `types` 类型定义文件更改
 
 ## 浏览器支持
 
-本地开发推荐使用`Chrome 80+` 浏览器
+本地开发推荐使用 `Chrome 80+` 浏览器
 
-支持现代浏览器, 不支持 IE
+支持现代浏览器，不支持 IE
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| :-: | :-: | :-: | :-: | :-: |
-| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| [<img src="https://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 |
 
 ## 维护者
 
 [@Vben](https://github.com/anncwb)
 
-## Star History
+## Star 历史
 
 [![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
 
 ## 捐赠
 
-如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
+如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持！
 
 ![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
-## Contributor
+## 贡献者
 
 <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
 
 - [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
 
-## License
+## 许可证
 
 [MIT © Vben-2020](./LICENSE)
diff --git a/apps/vben5/apps/app-antd/src/adapter/component/index.ts b/apps/vben5/apps/app-antd/src/adapter/component/index.ts
index db70ef19d..4ab140011 100644
--- a/apps/vben5/apps/app-antd/src/adapter/component/index.ts
+++ b/apps/vben5/apps/app-antd/src/adapter/component/index.ts
@@ -3,11 +3,18 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component, SetupContext } from 'vue';
+import type { Component } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
-import { h } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -15,42 +22,92 @@ import { $t } from '@vben/locales';
 import { FeatureStateCheck, GlobalFeatureStateCheck } from '@abp/features';
 import { PermissionStateCheck } from '@abp/permissions';
 import { TenantSelect } from '@abp/saas';
-import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Empty,
-  Input,
-  InputNumber,
-  InputPassword,
-  InputSearch,
-  Mentions,
-  notification,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  Tree,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
+import { notification } from 'ant-design-vue';
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Empty = defineAsyncComponent(() => import('ant-design-vue/es/empty'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputSearch = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputSearch),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const Tree = defineAsyncComponent(() => import('ant-design-vue/es/tree'));
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
 };
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
@@ -63,12 +120,16 @@ export type ComponentType =
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
+  | 'Empty'
+  | 'FeatureStateCheck'
+  | 'GlobalFeatureStateCheck'
   | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
   | 'InputSearch'
   | 'Mentions'
+  | 'PermissionStateCheck'
   | 'PrimaryButton'
   | 'Radio'
   | 'RadioGroup'
@@ -77,6 +138,7 @@ export type ComponentType =
   | 'Select'
   | 'Space'
   | 'Switch'
+  | 'TenantSelect'
   | 'Textarea'
   | 'TimePicker'
   | 'Tree'
@@ -89,38 +151,34 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          visibleEvent: 'onDropdownVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -131,17 +189,15 @@ async function initComponentAdapter() {
     },
     Divider,
     Empty,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
-    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
     InputSearch: withDefaultPlaceholder(InputSearch, 'input'),
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
     Mentions: withDefaultPlaceholder(Mentions, 'input'),
     // 自定义主要按钮
     PrimaryButton: (props, { attrs, slots }) => {
diff --git a/apps/vben5/apps/app-antd/src/adapter/form.ts b/apps/vben5/apps/app-antd/src/adapter/form.ts
index 4a55850ec..983a7f516 100644
--- a/apps/vben5/apps/app-antd/src/adapter/form.ts
+++ b/apps/vben5/apps/app-antd/src/adapter/form.ts
@@ -8,7 +8,7 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-async function initVbenForm() {
+async function initSetupVbenForm() {
   setupVbenForm<ComponentType>({
     config: {
       // ant design vue组件库默认都是 v-model:value
@@ -43,7 +43,7 @@ async function initVbenForm() {
 
 const useVbenForm = useForm<ComponentType>;
 
-export { initVbenForm, useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/vben5/apps/app-antd/src/api/core/index.ts b/apps/vben5/apps/app-antd/src/api/core/index.ts
index 93c65bd62..0c81c06cd 100644
--- a/apps/vben5/apps/app-antd/src/api/core/index.ts
+++ b/apps/vben5/apps/app-antd/src/api/core/index.ts
@@ -1,2 +1 @@
-export * from './menu';
 export { useAbpConfigApi } from './useAbpConfigApi';
diff --git a/apps/vben5/apps/app-antd/src/api/core/menu.ts b/apps/vben5/apps/app-antd/src/api/core/menu.ts
deleted file mode 100644
index 9ef60b11c..000000000
--- a/apps/vben5/apps/app-antd/src/api/core/menu.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { RouteRecordStringComponent } from '@vben/types';
-
-import { requestClient } from '#/api/request';
-
-/**
- * 获取用户所有菜单
- */
-export async function getAllMenusApi() {
-  return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
-}
diff --git a/apps/vben5/apps/app-antd/src/api/request.ts b/apps/vben5/apps/app-antd/src/api/request.ts
deleted file mode 100644
index c607daf6e..000000000
--- a/apps/vben5/apps/app-antd/src/api/request.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * 该文件可自行根据业务逻辑进行调整
- */
-import type { HttpResponse } from '@vben/request';
-
-import { useAppConfig } from '@vben/hooks';
-import { preferences } from '@vben/preferences';
-import {
-  authenticateResponseInterceptor,
-  errorMessageResponseInterceptor,
-  RequestClient,
-} from '@vben/request';
-import { useAccessStore } from '@vben/stores';
-
-import { message } from 'ant-design-vue';
-
-import { useAuthStore } from '#/store';
-
-// import { refreshTokenApi } from './core';
-
-const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
-
-function createRequestClient(baseURL: string) {
-  const client = new RequestClient({
-    baseURL,
-  });
-
-  /**
-   * 重新认证逻辑
-   */
-  async function doReAuthenticate() {
-    console.warn('Access token or refresh token is invalid or expired. ');
-    const accessStore = useAccessStore();
-    const authStore = useAuthStore();
-    accessStore.setAccessToken(null);
-    if (
-      preferences.app.loginExpiredMode === 'modal' &&
-      accessStore.isAccessChecked
-    ) {
-      accessStore.setLoginExpired(true);
-    } else {
-      await authStore.logout();
-    }
-  }
-
-  /**
-   * 刷新token逻辑
-   */
-  async function doRefreshToken() {
-    const accessStore = useAccessStore();
-    // const resp = await refreshTokenApi();
-    // const newToken = resp.data;
-    // accessStore.setAccessToken(newToken);
-    return String(accessStore.accessToken);
-  }
-
-  function formatToken(token: null | string) {
-    return token ? `Bearer ${token}` : null;
-  }
-
-  // 请求头处理
-  client.addRequestInterceptor({
-    fulfilled: async (config) => {
-      const accessStore = useAccessStore();
-
-      config.headers.Authorization = formatToken(accessStore.accessToken);
-      config.headers['Accept-Language'] = preferences.app.locale;
-      return config;
-    },
-  });
-
-  // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const { data: responseData, status } = response;
-
-      const { code, data } = responseData;
-      if (status >= 200 && status < 400 && code === 0) {
-        return data;
-      }
-
-      throw Object.assign({}, response, { response });
-    },
-  });
-
-  // token过期的处理
-  client.addResponseInterceptor(
-    authenticateResponseInterceptor({
-      client,
-      doReAuthenticate,
-      doRefreshToken,
-      enableRefreshToken: preferences.app.enableRefreshToken,
-      formatToken,
-    }),
-  );
-
-  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
-  client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string, error) => {
-      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
-      // 当前mock接口返回的错误字段是 error 或者 message
-      const responseData = error?.response?.data ?? {};
-      const errorMessage = responseData?.error ?? responseData?.message ?? '';
-      // 如果没有错误信息，则会根据状态码进行提示
-      message.error(errorMessage || msg);
-    }),
-  );
-
-  return client;
-}
-
-export const requestClient = createRequestClient(apiURL);
-
-export const baseRequestClient = new RequestClient({ baseURL: apiURL });
diff --git a/apps/vben5/apps/app-antd/src/bootstrap.ts b/apps/vben5/apps/app-antd/src/bootstrap.ts
index 520ec1e1f..d34a6f46b 100644
--- a/apps/vben5/apps/app-antd/src/bootstrap.ts
+++ b/apps/vben5/apps/app-antd/src/bootstrap.ts
@@ -1,7 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -12,7 +12,7 @@ import { useTitle } from '@vueuse/core';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
-import { initVbenForm } from './adapter/form';
+import { initSetupVbenForm } from './adapter/form';
 import { initRequestClient } from './adapter/request';
 import App from './app.vue';
 import { router } from './router';
@@ -20,11 +20,30 @@ import { router } from './router';
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
-  await initVbenForm();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
+  // 初始化axios
   initRequestClient();
 
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
   const app = createApp(App);
 
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
   // 配置 pinia-tore
   await initStores(app, { namespace });
 
@@ -35,11 +54,16 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {
diff --git a/apps/vben5/apps/app-antd/src/router/guard.ts b/apps/vben5/apps/app-antd/src/router/guard.ts
index cbb5235ec..e12766f91 100644
--- a/apps/vben5/apps/app-antd/src/router/guard.ts
+++ b/apps/vben5/apps/app-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';
@@ -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 {
diff --git a/apps/vben5/apps/app-antd/src/router/routes/core.ts b/apps/vben5/apps/app-antd/src/router/routes/core.ts
index 5952b5926..959ed35c1 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/core.ts
+++ b/apps/vben5/apps/app-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 { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
@@ -45,7 +46,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {
diff --git a/apps/vben5/apps/app-antd/src/store/auth.ts b/apps/vben5/apps/app-antd/src/store/auth.ts
index 6773557c0..e259121ca 100644
--- a/apps/vben5/apps/app-antd/src/store/auth.ts
+++ b/apps/vben5/apps/app-antd/src/store/auth.ts
@@ -5,7 +5,8 @@ import type { Recordable, 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 {
@@ -203,7 +204,9 @@ export const useAuthStore = defineStore('auth', () => {
       } else {
         onSuccess
           ? await onSuccess?.()
-          : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+          : await router.push(
+              userInfo.homePath || preferences.app.defaultHomePath,
+            );
       }
 
       if (userInfo?.realName) {
diff --git a/apps/vben5/apps/backend-mock/api/demo/bigint.ts b/apps/vben5/apps/backend-mock/api/demo/bigint.ts
new file mode 100644
index 000000000..880cc5ea8
--- /dev/null
+++ b/apps/vben5/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;
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/dept/.post.ts b/apps/vben5/apps/backend-mock/api/system/dept/.post.ts
new file mode 100644
index 000000000..c529ea1bd
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/dept/.post.ts
@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(600);
+  return useResponseSuccess(null);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/dept/[id].delete.ts b/apps/vben5/apps/backend-mock/api/system/dept/[id].delete.ts
new file mode 100644
index 000000000..e48f051cc
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/dept/[id].delete.ts
@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(1000);
+  return useResponseSuccess(null);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/dept/[id].put.ts b/apps/vben5/apps/backend-mock/api/system/dept/[id].put.ts
new file mode 100644
index 000000000..aa55c0857
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/dept/[id].put.ts
@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(2000);
+  return useResponseSuccess(null);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/dept/list.ts b/apps/vben5/apps/backend-mock/api/system/dept/list.ts
new file mode 100644
index 000000000..ae819b622
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/dept/list.ts
@@ -0,0 +1,61 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      pid: 0,
+      name: faker.commerce.department(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2021-01-01', to: '2022-12-31' }),
+      ),
+      remark: faker.lorem.sentence(),
+    };
+    if (faker.datatype.boolean()) {
+      dataItem.children = Array.from(
+        { length: faker.number.int({ min: 1, max: 5 }) },
+        () => ({
+          id: faker.string.uuid(),
+          pid: dataItem.id,
+          name: faker.commerce.department(),
+          status: faker.helpers.arrayElement([0, 1]),
+          createTime: formatterCN.format(
+            faker.date.between({ from: '2023-01-01', to: '2023-12-31' }),
+          ),
+          remark: faker.lorem.sentence(),
+        }),
+      );
+    }
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(10);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const listData = structuredClone(mockData);
+
+  return useResponseSuccess(listData);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/menu/list.ts b/apps/vben5/apps/backend-mock/api/system/menu/list.ts
new file mode 100644
index 000000000..5328b2fdf
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/menu/list.ts
@@ -0,0 +1,12 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  return useResponseSuccess(MOCK_MENU_LIST);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/menu/name-exists.ts b/apps/vben5/apps/backend-mock/api/system/menu/name-exists.ts
new file mode 100644
index 000000000..5599c22b3
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/menu/name-exists.ts
@@ -0,0 +1,28 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse } from '~/utils/response';
+
+const namesMap: Record<string, any> = {};
+
+function getNames(menus: any[]) {
+  menus.forEach((menu) => {
+    namesMap[menu.name] = String(menu.id);
+    if (menu.children) {
+      getNames(menu.children);
+    }
+  });
+}
+getNames(MOCK_MENU_LIST);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { id, name } = getQuery(event);
+
+  return (name as string) in namesMap &&
+    (!id || namesMap[name as string] !== String(id))
+    ? useResponseSuccess(true)
+    : useResponseSuccess(false);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/menu/path-exists.ts b/apps/vben5/apps/backend-mock/api/system/menu/path-exists.ts
new file mode 100644
index 000000000..64774f790
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/menu/path-exists.ts
@@ -0,0 +1,28 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse } from '~/utils/response';
+
+const pathMap: Record<string, any> = { '/': 0 };
+
+function getPaths(menus: any[]) {
+  menus.forEach((menu) => {
+    pathMap[menu.path] = String(menu.id);
+    if (menu.children) {
+      getPaths(menu.children);
+    }
+  });
+}
+getPaths(MOCK_MENU_LIST);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { id, path } = getQuery(event);
+
+  return (path as string) in pathMap &&
+    (!id || pathMap[path as string] !== String(id))
+    ? useResponseSuccess(true)
+    : useResponseSuccess(false);
+});
diff --git a/apps/vben5/apps/backend-mock/api/system/role/list.ts b/apps/vben5/apps/backend-mock/api/system/role/list.ts
new file mode 100644
index 000000000..4d5f923e9
--- /dev/null
+++ b/apps/vben5/apps/backend-mock/api/system/role/list.ts
@@ -0,0 +1,83 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { getMenuIds, MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+const menuIds = getMenuIds(MOCK_MENU_LIST);
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      name: faker.commerce.product(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2022-01-01', to: '2025-01-01' }),
+      ),
+      permissions: faker.helpers.arrayElements(menuIds),
+      remark: faker.lorem.sentence(),
+    };
+
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(100);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const {
+    page = 1,
+    pageSize = 20,
+    name,
+    id,
+    remark,
+    startTime,
+    endTime,
+    status,
+  } = getQuery(event);
+  let listData = structuredClone(mockData);
+  if (name) {
+    listData = listData.filter((item) =>
+      item.name.toLowerCase().includes(String(name).toLowerCase()),
+    );
+  }
+  if (id) {
+    listData = listData.filter((item) =>
+      item.id.toLowerCase().includes(String(id).toLowerCase()),
+    );
+  }
+  if (remark) {
+    listData = listData.filter((item) =>
+      item.remark?.toLowerCase()?.includes(String(remark).toLowerCase()),
+    );
+  }
+  if (startTime) {
+    listData = listData.filter((item) => item.createTime >= startTime);
+  }
+  if (endTime) {
+    listData = listData.filter((item) => item.createTime <= endTime);
+  }
+  if (['0', '1'].includes(status as string)) {
+    listData = listData.filter((item) => item.status === Number(status));
+  }
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
+});
diff --git a/apps/vben5/apps/backend-mock/api/table/list.ts b/apps/vben5/apps/backend-mock/api/table/list.ts
index 55b88eaaa..3e6f705b8 100644
--- a/apps/vben5/apps/backend-mock/api/table/list.ts
+++ b/apps/vben5/apps/backend-mock/api/table/list.ts
@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import { verifyAccessToken } from '~/utils/jwt-utils';
-import { unAuthorizedResponse } from '~/utils/response';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
 
 function generateMockDataList(count: number) {
   const dataList = [];
diff --git a/apps/vben5/apps/backend-mock/api/upload.ts b/apps/vben5/apps/backend-mock/api/upload.ts
new file mode 100644
index 000000000..1bb9e602d
--- /dev/null
+++ b/apps/vben5/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")
+});
diff --git a/apps/vben5/apps/backend-mock/middleware/1.api.ts b/apps/vben5/apps/backend-mock/middleware/1.api.ts
index 84e2ce0e0..bad9a41a1 100644
--- a/apps/vben5/apps/backend-mock/middleware/1.api.ts
+++ b/apps/vben5/apps/backend-mock/middleware/1.api.ts
@@ -1,7 +1,19 @@
-export default defineEventHandler((event) => {
+import { forbiddenResponse, sleep } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+  event.node.res.setHeader(
+    'Access-Control-Allow-Origin',
+    event.headers.get('Origin') ?? '*',
+  );
   if (event.method === 'OPTIONS') {
     event.node.res.statusCode = 204;
     event.node.res.statusMessage = 'No Content.';
     return 'OK';
+  } else if (
+    ['DELETE', 'PATCH', 'POST', 'PUT'].includes(event.method) &&
+    event.path.startsWith('/api/system/')
+  ) {
+    await sleep(Math.floor(Math.random() * 2000));
+    return forbiddenResponse(event, '演示环境，禁止修改');
   }
 });
diff --git a/apps/vben5/apps/backend-mock/nitro.config.ts b/apps/vben5/apps/backend-mock/nitro.config.ts
index c2d7297fb..c0fc13e2e 100644
--- a/apps/vben5/apps/backend-mock/nitro.config.ts
+++ b/apps/vben5/apps/backend-mock/nitro.config.ts
@@ -9,7 +9,8 @@ export default defineNitroConfig({
       cors: true,
       headers: {
         'Access-Control-Allow-Credentials': 'true',
-        'Access-Control-Allow-Headers': '*',
+        'Access-Control-Allow-Headers':
+          'Accept, Authorization, Content-Length, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',
         'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Expose-Headers': '*',
diff --git a/apps/vben5/apps/backend-mock/routes/[...].ts b/apps/vben5/apps/backend-mock/routes/[...].ts
index 70c5f7c74..99f544b66 100644
--- a/apps/vben5/apps/backend-mock/routes/[...].ts
+++ b/apps/vben5/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>
 `;
 });
diff --git a/apps/vben5/apps/backend-mock/utils/cookie-utils.ts b/apps/vben5/apps/backend-mock/utils/cookie-utils.ts
index 0d92f577d..78f3aab73 100644
--- a/apps/vben5/apps/backend-mock/utils/cookie-utils.ts
+++ b/apps/vben5/apps/backend-mock/utils/cookie-utils.ts
@@ -14,7 +14,7 @@ export function setRefreshTokenCookie(
 ) {
   setCookie(event, 'jwt', refreshToken, {
     httpOnly: true,
-    maxAge: 24 * 60 * 60 * 1000,
+    maxAge: 24 * 60 * 60, // unit: seconds
     sameSite: 'none',
     secure: true,
   });
diff --git a/apps/vben5/apps/backend-mock/utils/mock-data.ts b/apps/vben5/apps/backend-mock/utils/mock-data.ts
index 8fa12fe57..192f30a00 100644
--- a/apps/vben5/apps/backend-mock/utils/mock-data.ts
+++ b/apps/vben5/apps/backend-mock/utils/mock-data.ts
@@ -185,3 +185,206 @@ export const MOCK_MENUS = [
     username: 'jack',
   },
 ];
+
+export const MOCK_MENU_LIST = [
+  {
+    id: 1,
+    name: 'Workspace',
+    status: 1,
+    type: 'menu',
+    icon: 'mdi:dashboard',
+    path: '/workspace',
+    component: '/dashboard/workspace/index',
+    meta: {
+      icon: 'carbon:workspace',
+      title: 'page.dashboard.workspace',
+      affixTab: true,
+      order: 0,
+    },
+  },
+  {
+    id: 2,
+    meta: {
+      icon: 'carbon:settings',
+      order: 9997,
+      title: 'system.title',
+      badge: 'new',
+      badgeType: 'normal',
+      badgeVariants: 'primary',
+    },
+    status: 1,
+    type: 'catalog',
+    name: 'System',
+    path: '/system',
+    children: [
+      {
+        id: 201,
+        pid: 2,
+        path: '/system/menu',
+        name: 'SystemMenu',
+        authCode: 'System:Menu:List',
+        status: 1,
+        type: 'menu',
+        meta: {
+          icon: 'carbon:menu',
+          title: 'system.menu.title',
+        },
+        component: '/system/menu/list',
+        children: [
+          {
+            id: 20_101,
+            pid: 201,
+            name: 'SystemMenuCreate',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Menu:Create',
+            meta: { title: 'common.create' },
+          },
+          {
+            id: 20_102,
+            pid: 201,
+            name: 'SystemMenuEdit',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Menu:Edit',
+            meta: { title: 'common.edit' },
+          },
+          {
+            id: 20_103,
+            pid: 201,
+            name: 'SystemMenuDelete',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Menu:Delete',
+            meta: { title: 'common.delete' },
+          },
+        ],
+      },
+      {
+        id: 202,
+        pid: 2,
+        path: '/system/dept',
+        name: 'SystemDept',
+        status: 1,
+        type: 'menu',
+        authCode: 'System:Dept:List',
+        meta: {
+          icon: 'carbon:container-services',
+          title: 'system.dept.title',
+        },
+        component: '/system/dept/list',
+        children: [
+          {
+            id: 20_401,
+            pid: 201,
+            name: 'SystemDeptCreate',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Dept:Create',
+            meta: { title: 'common.create' },
+          },
+          {
+            id: 20_402,
+            pid: 201,
+            name: 'SystemDeptEdit',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Dept:Edit',
+            meta: { title: 'common.edit' },
+          },
+          {
+            id: 20_403,
+            pid: 201,
+            name: 'SystemDeptDelete',
+            status: 1,
+            type: 'button',
+            authCode: 'System:Dept:Delete',
+            meta: { title: 'common.delete' },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 9,
+    meta: {
+      badgeType: 'dot',
+      order: 9998,
+      title: 'demos.vben.title',
+      icon: 'carbon:data-center',
+    },
+    name: 'Project',
+    path: '/vben-admin',
+    type: 'catalog',
+    status: 1,
+    children: [
+      {
+        id: 901,
+        pid: 9,
+        name: 'VbenDocument',
+        path: '/vben-admin/document',
+        component: 'IFrameView',
+        type: 'embedded',
+        status: 1,
+        meta: {
+          icon: 'carbon:book',
+          iframeSrc: 'https://doc.vben.pro',
+          title: 'demos.vben.document',
+        },
+      },
+      {
+        id: 902,
+        pid: 9,
+        name: 'VbenGithub',
+        path: '/vben-admin/github',
+        component: 'IFrameView',
+        type: 'link',
+        status: 1,
+        meta: {
+          icon: 'carbon:logo-github',
+          link: 'https://github.com/vbenjs/vue-vben-admin',
+          title: 'Github',
+        },
+      },
+      {
+        id: 903,
+        pid: 9,
+        name: 'VbenAntdv',
+        path: '/vben-admin/antdv',
+        component: 'IFrameView',
+        type: 'link',
+        status: 0,
+        meta: {
+          icon: 'carbon:hexagon-vertical-solid',
+          badgeType: 'dot',
+          link: 'https://ant.vben.pro',
+          title: 'demos.vben.antdv',
+        },
+      },
+    ],
+  },
+  {
+    id: 10,
+    component: '_core/about/index',
+    type: 'menu',
+    status: 1,
+    meta: {
+      icon: 'lucide:copyright',
+      order: 9999,
+      title: 'demos.vben.about',
+    },
+    name: 'About',
+    path: '/about',
+  },
+];
+
+export function getMenuIds(menus: any[]) {
+  const ids: number[] = [];
+  menus.forEach((item) => {
+    ids.push(item.id);
+    if (item.children && item.children.length > 0) {
+      ids.push(...getMenuIds(item.children));
+    }
+  });
+  return ids;
+}
diff --git a/apps/vben5/apps/web-antd/.env b/apps/vben5/apps/web-antd/.env
index c14a467fb..19735f36f 100644
--- a/apps/vben5/apps/web-antd/.env
+++ b/apps/vben5/apps/web-antd/.env
@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Antd
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-antd
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
diff --git a/apps/vben5/apps/web-antd/package.json b/apps/vben5/apps/web-antd/package.json
index 487622574..6dcb91848 100644
--- a/apps/vben5/apps/web-antd/package.json
+++ b/apps/vben5/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/web-antd/src/adapter/component/index.ts b/apps/vben5/apps/web-antd/src/adapter/component/index.ts
index 17436a834..d452d5210 100644
--- a/apps/vben5/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-antd/src/adapter/component/index.ts
@@ -3,48 +3,103 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component, SetupContext } from 'vue';
+import type { Component } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
-import { h } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  notification,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
+import { notification } from 'ant-design-vue';
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
 };
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
@@ -81,38 +136,34 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          visibleEvent: 'onDropdownVisibleChange',
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -122,13 +173,11 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
diff --git a/apps/vben5/apps/web-antd/src/adapter/form.ts b/apps/vben5/apps/web-antd/src/adapter/form.ts
index 65ff793b6..983a7f516 100644
--- a/apps/vben5/apps/web-antd/src/adapter/form.ts
+++ b/apps/vben5/apps/web-antd/src/adapter/form.ts
@@ -8,40 +8,42 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
-  config: {
-    // ant design vue组件库默认都是 v-model:value
-    baseModelPropName: 'value',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
 
-    // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      Switch: 'checked',
-      Upload: 'fileList',
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    // 输入项目必填国际化适配
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/vben5/apps/web-antd/src/adapter/vxe-table.ts b/apps/vben5/apps/web-antd/src/adapter/vxe-table.ts
index d296b2050..7de2859de 100644
--- a/apps/vben5/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/vben5/apps/web-antd/src/adapter/vxe-table.ts
@@ -1,3 +1,5 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
 import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
@@ -33,7 +35,7 @@ setupVbenVxeTable({
         round: true,
         showOverflow: true,
         size: 'small',
-      },
+      } as VxeTableGridOptions,
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
diff --git a/apps/vben5/apps/web-antd/src/bootstrap.ts b/apps/vben5/apps/web-antd/src/bootstrap.ts
index b46bfbcf2..ec7211254 100644
--- a/apps/vben5/apps/web-antd/src/bootstrap.ts
+++ b/apps/vben5/apps/web-antd/src/bootstrap.ts
@@ -1,7 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -12,6 +12,7 @@ import { useTitle } from '@vueuse/core';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
@@ -19,6 +20,9 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
@@ -30,6 +34,12 @@ async function bootstrap(namespace: string) {
 
   const app = createApp(App);
 
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
   // 国际化 i18n 配置
   await setupI18n(app);
 
@@ -40,11 +50,16 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {
diff --git a/apps/vben5/apps/web-antd/src/layouts/basic.vue b/apps/vben5/apps/web-antd/src/layouts/basic.vue
index 51412956a..1481dc5a8 100644
--- a/apps/vben5/apps/web-antd/src/layouts/basic.vue
+++ b/apps/vben5/apps/web-antd/src/layouts/basic.vue
@@ -110,7 +110,7 @@ watch(
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
       });
     } else {
       destroyWatermark();
diff --git a/apps/vben5/apps/web-antd/src/router/guard.ts b/apps/vben5/apps/web-antd/src/router/guard.ts
index cbb5235ec..a1ad6d88c 100644
--- a/apps/vben5/apps/web-antd/src/router/guard.ts
+++ b/apps/vben5/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 {
diff --git a/apps/vben5/apps/web-antd/src/router/routes/core.ts b/apps/vben5/apps/web-antd/src/router/routes/core.ts
index 7218da228..949b0b65a 100644
--- a/apps/vben5/apps/web-antd/src/router/routes/core.ts
+++ b/apps/vben5/apps/web-antd/src/router/routes/core.ts
@@ -1,11 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -34,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {
@@ -50,7 +51,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },
diff --git a/apps/vben5/apps/web-antd/src/store/auth.ts b/apps/vben5/apps/web-antd/src/store/auth.ts
index 9d64d2058..bd496d1ee 100644
--- a/apps/vben5/apps/web-antd/src/store/auth.ts
+++ b/apps/vben5/apps/web-antd/src/store/auth.ts
@@ -3,7 +3,8 @@ import type { Recordable, 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';
@@ -54,7 +55,9 @@ export const useAuthStore = defineStore('auth', () => {
         } else {
           onSuccess
             ? await onSuccess?.()
-            : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+            : await router.push(
+                userInfo.homePath || preferences.app.defaultHomePath,
+              );
         }
 
         if (userInfo?.realName) {
diff --git a/apps/vben5/apps/web-ele/.env b/apps/vben5/apps/web-ele/.env
index 87cb3df14..bb57c8651 100644
--- a/apps/vben5/apps/web-ele/.env
+++ b/apps/vben5/apps/web-ele/.env
@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Ele
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-ele
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
diff --git a/apps/vben5/apps/web-ele/package.json b/apps/vben5/apps/web-ele/package.json
index 0b21070d7..386c36840 100644
--- a/apps/vben5/apps/web-ele/package.json
+++ b/apps/vben5/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/web-ele/src/adapter/component/index.ts b/apps/vben5/apps/web-ele/src/adapter/component/index.ts
index 6152ed318..e2f533cf5 100644
--- a/apps/vben5/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-ele/src/adapter/component/index.ts
@@ -3,45 +3,160 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component, SetupContext } from 'vue';
+import type { Component } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { h } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
-  ElButton,
-  ElCheckbox,
-  ElCheckboxButton,
-  ElCheckboxGroup,
-  ElDatePicker,
-  ElDivider,
-  ElInput,
-  ElInputNumber,
-  ElNotification,
-  ElRadio,
-  ElRadioButton,
-  ElRadioGroup,
-  ElSelectV2,
-  ElSpace,
-  ElSwitch,
-  ElTimePicker,
-  ElTreeSelect,
-  ElUpload,
-} from 'element-plus';
+import { ElNotification } from 'element-plus';
+
+const ElButton = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/button/index'),
+    import('element-plus/es/components/button/style/css'),
+  ]).then(([res]) => res.ElButton),
+);
+const ElCheckbox = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/checkbox/index'),
+    import('element-plus/es/components/checkbox/style/css'),
+  ]).then(([res]) => res.ElCheckbox),
+);
+const ElCheckboxButton = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/checkbox/index'),
+    import('element-plus/es/components/checkbox-button/style/css'),
+  ]).then(([res]) => res.ElCheckboxButton),
+);
+const ElCheckboxGroup = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/checkbox/index'),
+    import('element-plus/es/components/checkbox-group/style/css'),
+  ]).then(([res]) => res.ElCheckboxGroup),
+);
+const ElDatePicker = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/date-picker/index'),
+    import('element-plus/es/components/date-picker/style/css'),
+  ]).then(([res]) => res.ElDatePicker),
+);
+const ElDivider = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/divider/index'),
+    import('element-plus/es/components/divider/style/css'),
+  ]).then(([res]) => res.ElDivider),
+);
+const ElInput = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/input/index'),
+    import('element-plus/es/components/input/style/css'),
+  ]).then(([res]) => res.ElInput),
+);
+const ElInputNumber = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/input-number/index'),
+    import('element-plus/es/components/input-number/style/css'),
+  ]).then(([res]) => res.ElInputNumber),
+);
+const ElRadio = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/radio/index'),
+    import('element-plus/es/components/radio/style/css'),
+  ]).then(([res]) => res.ElRadio),
+);
+const ElRadioButton = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/radio/index'),
+    import('element-plus/es/components/radio-button/style/css'),
+  ]).then(([res]) => res.ElRadioButton),
+);
+const ElRadioGroup = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/radio/index'),
+    import('element-plus/es/components/radio-group/style/css'),
+  ]).then(([res]) => res.ElRadioGroup),
+);
+const ElSelectV2 = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/select-v2/index'),
+    import('element-plus/es/components/select-v2/style/css'),
+  ]).then(([res]) => res.ElSelectV2),
+);
+const ElSpace = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/space/index'),
+    import('element-plus/es/components/space/style/css'),
+  ]).then(([res]) => res.ElSpace),
+);
+const ElSwitch = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/switch/index'),
+    import('element-plus/es/components/switch/style/css'),
+  ]).then(([res]) => res.ElSwitch),
+);
+const ElTimePicker = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/time-picker/index'),
+    import('element-plus/es/components/time-picker/style/css'),
+  ]).then(([res]) => res.ElTimePicker),
+);
+const ElTreeSelect = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/tree-select/index'),
+    import('element-plus/es/components/tree-select/style/css'),
+  ]).then(([res]) => res.ElTreeSelect),
+);
+const ElUpload = defineAsyncComponent(() =>
+  Promise.all([
+    import('element-plus/es/components/upload/index'),
+    import('element-plus/es/components/upload/style/css'),
+  ]).then(([res]) => res.ElUpload),
+);
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
 };
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
@@ -69,37 +184,33 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: ElSelectV2,
-          loadingSlot: 'loading',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: ElTreeSelect,
-          props: { label: 'label', children: 'children' },
-          nodeKey: 'value',
-          loadingSlot: 'loading',
-          optionsPropName: 'data',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: ElSelectV2,
+        loadingSlot: 'loading',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: ElTreeSelect,
+        props: { label: 'label', children: 'children' },
+        nodeKey: 'value',
+        loadingSlot: 'loading',
+        optionsPropName: 'data',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     Checkbox: ElCheckbox,
     CheckboxGroup: (props, { attrs, slots }) => {
       let defaultSlot;
@@ -129,19 +240,11 @@ async function initComponentAdapter() {
       return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: ElDivider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'append',
-          modelValueProp: 'model-value',
-          inputComponent: ElInput,
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'append',
+      modelValueProp: 'model-value',
+      inputComponent: ElInput,
+    }),
     Input: withDefaultPlaceholder(ElInput, 'input'),
     InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
     RadioGroup: (props, { attrs, slots }) => {
diff --git a/apps/vben5/apps/web-ele/src/adapter/form.ts b/apps/vben5/apps/web-ele/src/adapter/form.ts
index 13ae9c428..936c3fe4c 100644
--- a/apps/vben5/apps/web-ele/src/adapter/form.ts
+++ b/apps/vben5/apps/web-ele/src/adapter/form.ts
@@ -8,32 +8,34 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
-  config: {
-    modelPropNameMap: {
-      Upload: 'fileList',
-      CheckboxGroup: 'model-value',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      modelPropNameMap: {
+        Upload: 'fileList',
+        CheckboxGroup: 'model-value',
+      },
     },
-  },
-  defineRules: {
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
+    defineRules: {
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/vben5/apps/web-ele/src/adapter/vxe-table.ts b/apps/vben5/apps/web-ele/src/adapter/vxe-table.ts
index 44b31eaed..40b8179d3 100644
--- a/apps/vben5/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/vben5/apps/web-ele/src/adapter/vxe-table.ts
@@ -1,3 +1,5 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
 import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
@@ -33,7 +35,7 @@ setupVbenVxeTable({
         round: true,
         showOverflow: true,
         size: 'small',
-      },
+      } as VxeTableGridOptions,
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
diff --git a/apps/vben5/apps/web-ele/src/bootstrap.ts b/apps/vben5/apps/web-ele/src/bootstrap.ts
index b62094f28..e5befb5a7 100644
--- a/apps/vben5/apps/web-ele/src/bootstrap.ts
+++ b/apps/vben5/apps/web-ele/src/bootstrap.ts
@@ -1,7 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -13,12 +13,17 @@ import { ElLoading } from 'element-plus';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
@@ -32,6 +37,12 @@ async function bootstrap(namespace: string) {
   // 注册Element Plus提供的v-loading指令
   app.directive('loading', ElLoading.directive);
 
+  // 注册Vben提供的v-loading和v-spinning指令
+  registerLoadingDirective(app, {
+    loading: false, // Vben提供的v-loading指令和Element Plus提供的v-loading指令二选一即可，此处false表示不注册Vben提供的v-loading指令
+    spinning: 'spinning',
+  });
+
   // 国际化 i18n 配置
   await setupI18n(app);
 
@@ -42,11 +53,16 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {
diff --git a/apps/vben5/apps/web-ele/src/layouts/basic.vue b/apps/vben5/apps/web-ele/src/layouts/basic.vue
index 51412956a..1481dc5a8 100644
--- a/apps/vben5/apps/web-ele/src/layouts/basic.vue
+++ b/apps/vben5/apps/web-ele/src/layouts/basic.vue
@@ -110,7 +110,7 @@ watch(
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
       });
     } else {
       destroyWatermark();
diff --git a/apps/vben5/apps/web-ele/src/router/guard.ts b/apps/vben5/apps/web-ele/src/router/guard.ts
index cbb5235ec..a1ad6d88c 100644
--- a/apps/vben5/apps/web-ele/src/router/guard.ts
+++ b/apps/vben5/apps/web-ele/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 {
diff --git a/apps/vben5/apps/web-ele/src/router/routes/core.ts b/apps/vben5/apps/web-ele/src/router/routes/core.ts
index 7218da228..949b0b65a 100644
--- a/apps/vben5/apps/web-ele/src/router/routes/core.ts
+++ b/apps/vben5/apps/web-ele/src/router/routes/core.ts
@@ -1,11 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -34,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {
@@ -50,7 +51,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },
diff --git a/apps/vben5/apps/web-ele/src/store/auth.ts b/apps/vben5/apps/web-ele/src/store/auth.ts
index 639fb0372..74fadfe24 100644
--- a/apps/vben5/apps/web-ele/src/store/auth.ts
+++ b/apps/vben5/apps/web-ele/src/store/auth.ts
@@ -3,7 +3,8 @@ import type { Recordable, 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 { ElNotification } from 'element-plus';
@@ -55,7 +56,9 @@ export const useAuthStore = defineStore('auth', () => {
         } else {
           onSuccess
             ? await onSuccess?.()
-            : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+            : await router.push(
+                userInfo.homePath || preferences.app.defaultHomePath,
+              );
         }
 
         if (userInfo?.realName) {
diff --git a/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue b/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
index 771665a66..0ecab5864 100644
--- a/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
+++ b/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { h } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import { ElButton, ElCard, ElCheckbox, ElMessage } from 'element-plus';
 
@@ -17,11 +17,16 @@ const [Form, formApi] = useVbenForm({
   },
   layout: 'horizontal',
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  // wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   handleSubmit: (values) => {
     ElMessage.success(`表单数据：${JSON.stringify(values)}`);
   },
   schema: [
+    {
+      component: 'IconPicker',
+      fieldName: 'icon',
+      label: 'IconPicker',
+    },
     {
       // 组件需要在 #/adapter.ts内注册，并加上类型
       component: 'ApiSelect',
@@ -149,6 +154,8 @@ const [Form, formApi] = useVbenForm({
     },
   ],
 });
+
+const [Drawer, drawerApi] = useVbenDrawer();
 function setFormValues() {
   formApi.setValues({
     string: 'string',
@@ -168,6 +175,9 @@ function setFormValues() {
     description="我们重新包装了CheckboxGroup、RadioGroup、Select，可以通过options属性传入选项属性数组以自动生成选项"
     title="表单演示"
   >
+    <Drawer class="w-[600px]" title="基础表单示例">
+      <Form />
+    </Drawer>
     <ElCard>
       <template #header>
         <div class="flex items-center">
@@ -175,7 +185,7 @@ function setFormValues() {
           <ElButton type="primary" @click="setFormValues">设置表单值</ElButton>
         </div>
       </template>
-      <Form />
+      <ElButton type="primary" @click="drawerApi.open"> 打开抽屉 </ElButton>
     </ElCard>
   </Page>
 </template>
diff --git a/apps/vben5/apps/web-naive/.env b/apps/vben5/apps/web-naive/.env
index 350660c0e..213b52ce9 100644
--- a/apps/vben5/apps/web-naive/.env
+++ b/apps/vben5/apps/web-naive/.env
@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Naive
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-naive
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
diff --git a/apps/vben5/apps/web-naive/package.json b/apps/vben5/apps/web-naive/package.json
index c649252d2..b97ab64f7 100644
--- a/apps/vben5/apps/web-naive/package.json
+++ b/apps/vben5/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/web-naive/src/adapter/component/index.ts b/apps/vben5/apps/web-naive/src/adapter/component/index.ts
index a84159005..7ff115331 100644
--- a/apps/vben5/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-naive/src/adapter/component/index.ts
@@ -3,44 +3,106 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component, SetupContext } from 'vue';
+import type { Component } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
-import { h } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
-  NButton,
-  NCheckbox,
-  NCheckboxGroup,
-  NDatePicker,
-  NDivider,
-  NInput,
-  NInputNumber,
-  NRadio,
-  NRadioButton,
-  NRadioGroup,
-  NSelect,
-  NSpace,
-  NSwitch,
-  NTimePicker,
-  NTreeSelect,
-  NUpload,
-} from 'naive-ui';
-
 import { message } from '#/adapter/naive';
 
+const NButton = defineAsyncComponent(() =>
+  import('naive-ui/es/button').then((res) => res.NButton),
+);
+const NCheckbox = defineAsyncComponent(() =>
+  import('naive-ui/es/checkbox').then((res) => res.NCheckbox),
+);
+const NCheckboxGroup = defineAsyncComponent(() =>
+  import('naive-ui/es/checkbox').then((res) => res.NCheckboxGroup),
+);
+const NDatePicker = defineAsyncComponent(() =>
+  import('naive-ui/es/date-picker').then((res) => res.NDatePicker),
+);
+const NDivider = defineAsyncComponent(() =>
+  import('naive-ui/es/divider').then((res) => res.NDivider),
+);
+const NInput = defineAsyncComponent(() =>
+  import('naive-ui/es/input').then((res) => res.NInput),
+);
+const NInputNumber = defineAsyncComponent(() =>
+  import('naive-ui/es/input-number').then((res) => res.NInputNumber),
+);
+const NRadio = defineAsyncComponent(() =>
+  import('naive-ui/es/radio').then((res) => res.NRadio),
+);
+const NRadioButton = defineAsyncComponent(() =>
+  import('naive-ui/es/radio').then((res) => res.NRadioButton),
+);
+const NRadioGroup = defineAsyncComponent(() =>
+  import('naive-ui/es/radio').then((res) => res.NRadioGroup),
+);
+const NSelect = defineAsyncComponent(() =>
+  import('naive-ui/es/select').then((res) => res.NSelect),
+);
+const NSpace = defineAsyncComponent(() =>
+  import('naive-ui/es/space').then((res) => res.NSpace),
+);
+const NSwitch = defineAsyncComponent(() =>
+  import('naive-ui/es/switch').then((res) => res.NSwitch),
+);
+const NTimePicker = defineAsyncComponent(() =>
+  import('naive-ui/es/time-picker').then((res) => res.NTimePicker),
+);
+const NTreeSelect = defineAsyncComponent(() =>
+  import('naive-ui/es/tree-select').then((res) => res.NTreeSelect),
+);
+const NUpload = defineAsyncComponent(() =>
+  import('naive-ui/es/upload').then((res) => res.NUpload),
+);
+
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
 };
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
@@ -69,37 +131,33 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: NSelect,
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: NTreeSelect,
-          nodeKey: 'value',
-          loadingSlot: 'arrow',
-          keyField: 'value',
-          modelPropName: 'value',
-          optionsPropName: 'options',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: NSelect,
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: NTreeSelect,
+        nodeKey: 'value',
+        loadingSlot: 'arrow',
+        keyField: 'value',
+        modelPropName: 'value',
+        optionsPropName: 'options',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     Checkbox: NCheckbox,
     CheckboxGroup: (props, { attrs, slots }) => {
       let defaultSlot;
@@ -127,13 +185,10 @@ async function initComponentAdapter() {
       return h(NButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: NDivider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        { iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'suffix',
+      inputComponent: NInput,
+    }),
     Input: withDefaultPlaceholder(NInput, 'input'),
     InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
     RadioGroup: (props, { attrs, slots }) => {
diff --git a/apps/vben5/apps/web-naive/src/adapter/form.ts b/apps/vben5/apps/web-naive/src/adapter/form.ts
index 2f2ed2abe..9de44a01d 100644
--- a/apps/vben5/apps/web-naive/src/adapter/form.ts
+++ b/apps/vben5/apps/web-naive/src/adapter/form.ts
@@ -8,36 +8,38 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
-  config: {
-    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
-    emptyStateValue: null,
-    baseModelPropName: 'value',
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      Upload: 'fileList',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
+      emptyStateValue: null,
+      baseModelPropName: 'value',
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
+    defineRules: {
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/vben5/apps/web-naive/src/adapter/vxe-table.ts b/apps/vben5/apps/web-naive/src/adapter/vxe-table.ts
index 081cfb29e..3bad067cd 100644
--- a/apps/vben5/apps/web-naive/src/adapter/vxe-table.ts
+++ b/apps/vben5/apps/web-naive/src/adapter/vxe-table.ts
@@ -1,3 +1,5 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
 import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
@@ -33,7 +35,7 @@ setupVbenVxeTable({
         round: true,
         showOverflow: true,
         size: 'small',
-      },
+      } as VxeTableGridOptions,
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
diff --git a/apps/vben5/apps/web-naive/src/bootstrap.ts b/apps/vben5/apps/web-naive/src/bootstrap.ts
index a423bff4d..df0b2cbb8 100644
--- a/apps/vben5/apps/web-naive/src/bootstrap.ts
+++ b/apps/vben5/apps/web-naive/src/bootstrap.ts
@@ -1,7 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -12,12 +12,16 @@ import { useTitle } from '@vueuse/core';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
-  initComponentAdapter();
+  await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
 
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
@@ -30,6 +34,12 @@ async function bootstrap(namespace: string) {
 
   const app = createApp(App);
 
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称,也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
   // 国际化 i18n 配置
   await setupI18n(app);
 
@@ -40,11 +50,16 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {
diff --git a/apps/vben5/apps/web-naive/src/layouts/basic.vue b/apps/vben5/apps/web-naive/src/layouts/basic.vue
index f75b3ddc6..691893841 100644
--- a/apps/vben5/apps/web-naive/src/layouts/basic.vue
+++ b/apps/vben5/apps/web-naive/src/layouts/basic.vue
@@ -111,7 +111,7 @@ watch(
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
       });
     } else {
       destroyWatermark();
diff --git a/apps/vben5/apps/web-naive/src/router/guard.ts b/apps/vben5/apps/web-naive/src/router/guard.ts
index 281ea31a6..28d1cea74 100644
--- a/apps/vben5/apps/web-naive/src/router/guard.ts
+++ b/apps/vben5/apps/web-naive/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) },
           // 携带当前跳转的页面，登录后重新跳转该页面
@@ -107,8 +107,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 {
diff --git a/apps/vben5/apps/web-naive/src/router/routes/core.ts b/apps/vben5/apps/web-naive/src/router/routes/core.ts
index 7218da228..949b0b65a 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/core.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/core.ts
@@ -1,11 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -34,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {
@@ -50,7 +51,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },
diff --git a/apps/vben5/apps/web-naive/src/store/auth.ts b/apps/vben5/apps/web-naive/src/store/auth.ts
index 20aac5622..0ff050b3b 100644
--- a/apps/vben5/apps/web-naive/src/store/auth.ts
+++ b/apps/vben5/apps/web-naive/src/store/auth.ts
@@ -3,7 +3,8 @@ import type { Recordable, 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 { defineStore } from 'pinia';
@@ -55,7 +56,9 @@ export const useAuthStore = defineStore('auth', () => {
         } else {
           onSuccess
             ? await onSuccess?.()
-            : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+            : await router.push(
+                userInfo.homePath || preferences.app.defaultHomePath,
+              );
         }
 
         if (userInfo?.realName) {
diff --git a/apps/vben5/docs/.vitepress/config/zh.mts b/apps/vben5/docs/.vitepress/config/zh.mts
index ce544393a..2c3753deb 100644
--- a/apps/vben5/docs/.vitepress/config/zh.mts
+++ b/apps/vben5/docs/.vitepress/config/zh.mts
@@ -168,6 +168,10 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
           link: 'common-ui/vben-api-component',
           text: 'ApiComponent Api组件包装器',
         },
+        {
+          link: 'common-ui/vben-alert',
+          text: 'Alert 轻量提示框',
+        },
         {
           link: 'common-ui/vben-modal',
           text: 'Modal 模态框',
diff --git a/apps/vben5/docs/.vitepress/theme/styles/variables.css b/apps/vben5/docs/.vitepress/theme/styles/variables.css
index d633803ce..124bb0c45 100644
--- a/apps/vben5/docs/.vitepress/theme/styles/variables.css
+++ b/apps/vben5/docs/.vitepress/theme/styles/variables.css
@@ -104,6 +104,11 @@
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+
+  /**
+  * modal zIndex
+  */
+  --popup-z-index: 1000;
 }
 
 @media (min-width: 640px) {
diff --git a/apps/vben5/docs/package.json b/apps/vben5/docs/package.json
index ca04e8364..f57dfc854 100644
--- a/apps/vben5/docs/package.json
+++ b/apps/vben5/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/apps/vben5/docs/src/commercial/community.md b/apps/vben5/docs/src/commercial/community.md
index c5b7b7db9..60d9f2543 100644
--- a/apps/vben5/docs/src/commercial/community.md
+++ b/apps/vben5/docs/src/commercial/community.md
@@ -3,7 +3,7 @@
 社区交流群主要是为了方便大家交流，提问，解答问题，分享经验等。偏自助方式，如果你有问题，可以通过以下方式加入社区交流群：
 
 - [QQ频道](https://pd.qq.com/s/16p8lvvob)：推荐！！！主要提供问题解答，分享经验等。
-- QQ群：[大群](https://qm.qq.com/q/MEmHoCLbG0)，[1群](https://qm.qq.com/q/YacMHPYAMu)、[2群](https://qm.qq.com/q/ajVKZvFICk)、[3群](https://qm.qq.com/q/36zdwThP2E)，[4群](https://qm.qq.com/q/sCzSlm3504)，主要使用者的交流群。
+- QQ群：[大群](https://qm.qq.com/q/MEmHoCLbG0)，[1群](https://qm.qq.com/q/YacMHPYAMu)、[2群](https://qm.qq.com/q/ajVKZvFICk)、[3群](https://qm.qq.com/q/36zdwThP2E)，[4群](https://qm.qq.com/q/sCzSlm3504)，[5群](https://qm.qq.com/q/ya9XrtbS6s)，主要的使用者交流群。
 - [Discord](https://discord.com/invite/VU62jTecad): 主要提供问题解答，分享经验等。
 
 ::: tip
diff --git a/apps/vben5/docs/src/components/common-ui/vben-alert.md b/apps/vben5/docs/src/components/common-ui/vben-alert.md
new file mode 100644
index 000000000..6541b665d
--- /dev/null
+++ b/apps/vben5/docs/src/components/common-ui/vben-alert.md
@@ -0,0 +1,166 @@
+---
+outline: deep
+---
+
+# Vben Alert 轻量提示框
+
+框架提供的一些用于轻量提示的弹窗，仅使用js代码即可快速动态创建提示而不需要在template写任何代码。
+
+::: info 应用场景
+
+Alert提供的功能与Modal类似，但只适用于简单应用场景。例如临时性、动态地弹出模态确认框、输入框等。如果对弹窗有更复杂的需求，请使用VbenModal
+
+:::
+
+::: tip 注意
+
+Alert提供的快捷方法alert、confirm、prompt动态创建的弹窗在已打开的情况下，不支持HMR（热更新），代码变更后需要关闭这些弹窗后重新打开。
+
+:::
+
+::: tip README
+
+下方示例代码中的，存在一些主题色未适配、样式缺失的问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
+
+:::
+
+## 基础用法
+
+使用 `alert` 创建只有一个确认按钮的提示框。
+
+<DemoPreview dir="demos/vben-alert/alert" />
+
+使用 `confirm` 创建有确认和取消按钮的提示框。
+
+<DemoPreview dir="demos/vben-alert/confirm" />
+
+使用 `prompt` 创建有确认和取消按钮、接受用户输入的提示框。
+
+<DemoPreview dir="demos/vben-alert/prompt" />
+
+## useAlertContext
+
+当弹窗的content、footer、icon使用自定义组件时，在这些组件中可以使用 `useAlertContext` 获取当前弹窗的上下文对象，用来主动控制弹窗。
+
+::: tip 注意
+
+`useAlertContext`只能用在setup或者函数式组件中。
+
+:::
+
+### Methods
+
+| 方法      | 描述               | 类型     | 版本要求 |
+| --------- | ------------------ | -------- | -------- |
+| doConfirm | 调用弹窗的确认操作 | ()=>void | >5.5.4   |
+| doCancel  | 调用弹窗的取消操作 | ()=>void | >5.5.4   |
+
+## 类型说明
+
+```ts
+/** 预置的图标类型 */
+export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
+
+export type BeforeCloseScope = {
+  /** 是否为点击确认按钮触发的关闭 */
+  isConfirm: boolean;
+};
+
+/**
+ * alert 属性
+ */
+export type AlertProps = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (
+    scope: BeforeCloseScope,
+  ) => boolean | Promise<boolean | undefined> | undefined;
+  /** 边框 */
+  bordered?: boolean;
+  /** 按钮对齐方式 */
+  buttonAlign?: 'center' | 'end' | 'start';
+  /** 取消按钮的标题 */
+  cancelText?: string;
+  /** 是否居中显示 */
+  centered?: boolean;
+  /** 确认按钮的标题 */
+  confirmText?: string;
+  /** 弹窗容器的额外样式 */
+  containerClass?: string;
+  /** 弹窗提示内容 */
+  content: Component | string;
+  /** 弹窗内容的额外样式 */
+  contentClass?: string;
+  /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
+  contentMasking?: boolean;
+  /** 弹窗底部内容（与按钮在同一个容器中） */
+  footer?: Component | string;
+  /** 弹窗的图标（在标题的前面） */
+  icon?: Component | IconType;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+  /** 是否显示取消按钮 */
+  showCancel?: boolean;
+  /** 弹窗标题 */
+  title?: string;
+};
+
+/** prompt 属性 */
+export type PromptProps<T = any> = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (scope: {
+    isConfirm: boolean;
+    value: T | undefined;
+  }) => boolean | Promise<boolean | undefined> | undefined;
+  /** 用于接受用户输入的组件 */
+  component?: Component;
+  /** 输入组件的属性 */
+  componentProps?: Recordable<any>;
+  /** 输入组件的插槽 */
+  componentSlots?: Recordable<Component>;
+  /** 默认值 */
+  defaultValue?: T;
+  /** 输入组件的值属性名 */
+  modelPropName?: string;
+} & Omit<AlertProps, 'beforeClose'>;
+
+/**
+ * 函数签名
+ * alert和confirm的函数签名相同。
+ * confirm默认会显示取消按钮，而alert默认只有一个按钮
+ *  */
+export function alert(options: AlertProps): Promise<void>;
+export function alert(
+  message: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+export function alert(
+  message: string,
+  title?: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+
+/**
+ * 弹出输入框的函数签名。
+ * beforeClose的参数会传入用户当前输入的值
+ * component指定接受用户输入的组件，默认为Input
+ * componentProps 为输入组件设置的属性数据
+ * defaultValue 默认的值
+ * modelPropName 输入组件的值属性名称。默认为modelValue
+ */
+export async function prompt<T = any>(
+  options: Omit<AlertProps, 'beforeClose'> & {
+    beforeClose?: (
+      scope: BeforeCloseScope & {
+        /** 输入组件的当前值 */
+        value: T;
+      },
+    ) => boolean | Promise<boolean | undefined> | undefined;
+    component?: Component;
+    componentProps?: Recordable<any>;
+    defaultValue?: T;
+    modelPropName?: string;
+  },
+): Promise<T | undefined>;
+```
diff --git a/apps/vben5/docs/src/components/common-ui/vben-api-component.md b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
index caa9facf3..2c84e56b5 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-api-component.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
@@ -123,27 +123,51 @@ function fetchApi(): Promise<Record<string, any>> {
 
 :::
 
+## 并发和缓存
+
+有些场景下可能需要使用多个ApiComponent，它们使用了相同的远程数据源（例如用在可编辑的表格中）。如果直接将请求后端接口的函数传递给api属性，则每一个实例都会访问一次接口，这会造成资源浪费，是完全没有必要的。Tanstack Query提供了并发控制、缓存、重试等诸多特性，我们可以将接口请求函数用useQuery包装一下再传递给ApiComponent，这样的话无论页面有多少个使用相同数据源的ApiComponent实例，都只会发起一次远程请求。演示效果请参考 [Playground vue-query](https://www.vben.pro/#/demos/features/vue-query)，具体代码请查看项目文件[concurrency-caching](https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/views/demos/features/vue-query/concurrency-caching.vue)
+
 ## API
 
 ### Props
 
-| 属性名 | 描述 | 类型 | 默认值 |
+| 属性名 | 描述 | 类型 | 默认值 | 版本要求 |
+| --- | --- | --- | --- | --- |
+| modelValue(v-model) | 当前值 | `any` | - | - |
+| component | 欲包装的组件（以下称为目标组件） | `Component` | - | - |
+| numberToString | 是否将value从数字转为string | `boolean` | `false` | - |
+| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - | - |
+| params | 传递给api的参数 | `Record<string, any>` | - | - |
+| resultField | 从api返回的结果中提取options数组的字段名 | `string` | - | - |
+| labelField | label字段名 | `string` | `label` | - |
+| childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` | - |
+| valueField | value字段名 | `string` | `value` | - |
+| optionsPropName | 目标组件接收options数据的属性名称 | `string` | `options` | - |
+| modelPropName | 目标组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` | - |
+| immediate | 是否立即调用api | `boolean` | `true` | - |
+| alwaysLoad | 每次`visibleEvent`事件发生时都重新请求数据 | `boolean` | `false` | - |
+| beforeFetch | 在api请求之前的回调函数 | `AnyPromiseFunction<any, any>` | - | - |
+| afterFetch | 在api请求之后的回调函数 | `AnyPromiseFunction<any, any>` | - | - |
+| options | 直接传入选项数据，也作为api返回空数据时的后备数据 | `OptionsItem[]` | - | - |
+| visibleEvent | 触发重新请求数据的事件名 | `string` | - | - |
+| loadingSlot | 目标组件的插槽名称，用来显示一个"加载中"的图标 | `string` | - | - |
+| autoSelect | 自动设置选项 | `'first' \| 'last' \| 'one'\| ((item: OptionsItem[]) => OptionsItem) \| false` | `false` | >5.5.4 |
+
+#### autoSelect 自动设置选项
+
+如果当前值为undefined，在选项数据成功加载之后，自动从备选项中选择一个作为当前值。默认值为`false`，即不自动选择选项。注意：该属性不应用于多选组件。可选值有：
+
+- `"first"`：自动选择第一个选项
+- `"last"`：自动选择最后一个选项
+- `"one"`：有且仅有一个选项时，自动选择它
+- `自定义函数`：自定义选择逻辑，函数的参数为options，返回值为选择的选项
+- `false`：不自动选择选项
+
+### Methods
+
+| 方法 | 描述 | 类型 | 版本要求 |
 | --- | --- | --- | --- |
-| modelValue(v-model) | 当前值 | `any` | - |
-| component | 欲包装的组件（以下称为目标组件） | `Component` | - |
-| numberToString | 是否将value从数字转为string | `boolean` | `false` |
-| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - |
-| params | 传递给api的参数 | `Record<string, any>` | - |
-| resultField | 从api返回的结果中提取options数组的字段名 | `string` | - |
-| labelField | label字段名 | `string` | `label` |
-| childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` |
-| valueField | value字段名 | `string` | `value` |
-| optionsPropName | 目标组件接收options数据的属性名称 | `string` | `options` |
-| modelPropName | 目标组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` |
-| immediate | 是否立即调用api | `boolean` | `true` |
-| alwaysLoad | 每次`visibleEvent`事件发生时都重新请求数据 | `boolean` | `false` |
-| beforeFetch | 在api请求之前的回调函数 | `AnyPromiseFunction<any, any>` | - |
-| afterFetch | 在api请求之后的回调函数 | `AnyPromiseFunction<any, any>` | - |
-| options | 直接传入选项数据，也作为api返回空数据时的后备数据 | `OptionsItem[]` | - |
-| visibleEvent | 触发重新请求数据的事件名 | `string` | - |
-| loadingSlot | 目标组件的插槽名称，用来显示一个"加载中"的图标 | `string` | - |
+| getComponentRef | 获取被包装的组件的实例 | ()=>T | >5.5.4 |
+| updateParam | 设置接口请求参数（将与params属性合并） | (newParams: Record<string, any>)=>void | >5.5.4 |
+| getOptions | 获取已加载的选项数据 | ()=>OptionsItem[] | >5.5.4 |
+| getValue | 获取当前值 | ()=>any | >5.5.4 |
diff --git a/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md b/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md
index 301e1a41c..5f3ec1881 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-count-to-animator.md
@@ -42,11 +42,18 @@ outline: deep
 | transition | 动画效果       | `string`  | `linear` |
 | decimals   | 保留小数点位数 | `number`  | `0`      |
 
-### Methods
+### Events
+
+| 事件名         | 描述           | 类型           |
+| -------------- | -------------- | -------------- |
+| started        | 动画已开始     | `()=>void`     |
+| finished       | 动画已结束     | `()=>void`     |
+| ~~onStarted~~  | ~~动画已开始~~ | ~~`()=>void`~~ |
+| ~~onFinished~~ | ~~动画已结束~~ | ~~`()=>void`~~ |
 
-以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。
+### Methods
 
-| 事件名 | 描述         | 类型       |
+| 方法名 | 描述         | 类型       |
 | ------ | ------------ | ---------- |
 | start  | 开始执行动画 | `()=>void` |
 | reset  | 重置         | `()=>void` |
diff --git a/apps/vben5/docs/src/components/common-ui/vben-drawer.md b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
index 61b7c9e59..b66bd3a07 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-drawer.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
@@ -78,7 +78,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | --- | --- | --- | --- |
 | appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
 | connectedComponent | 连接另一个Modal组件 | `Component` | - |
-| destroyOnClose | 关闭时销毁`connectedComponent` | `boolean` | `false` |
+| destroyOnClose | 关闭时销毁 | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
@@ -127,21 +127,30 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
 
-| 插槽名         | 描述                |
-| -------------- | ------------------- |
-| default        | 默认插槽 - 弹窗内容 |
-| prepend-footer | 取消按钮左侧        |
-| append-footer  | 取消按钮右侧        |
-| close-icon     | 关闭按钮图标        |
-| extra          | 额外内容(标题右侧)  |
+| 插槽名         | 描述                                               |
+| -------------- | -------------------------------------------------- |
+| default        | 默认插槽 - 弹窗内容                                |
+| prepend-footer | 取消按钮左侧                                       |
+| center-footer  | 取消按钮和确认按钮中间（不使用 footer 插槽时有效） |
+| append-footer  | 确认按钮右侧                                       |
+| close-icon     | 关闭按钮图标                                       |
+| extra          | 额外内容(标题右侧)                                 |
 
 ### drawerApi
 
-| 方法 | 描述 | 类型 |
-| --- | --- | --- |
+| 方法 | 描述 | 类型 | 版本限制 |
+| --- | --- | --- | --- |
 | setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>drawerApi` |
-| open | 打开弹窗 | `()=>void` |
-| close | 关闭弹窗 | `()=>void` |
-| setData | 设置共享数据 | `<T>(data:T)=>drawerApi` |
-| getData | 获取共享数据 | `<T>()=>T` |
-| useStore | 获取可响应式状态 | - |
+| open | 打开弹窗 | `()=>void` | --- |
+| close | 关闭弹窗 | `()=>void` | --- |
+| setData | 设置共享数据 | `<T>(data:T)=>drawerApi` | --- |
+| getData | 获取共享数据 | `<T>()=>T` | --- |
+| useStore | 获取可响应式状态 | - | --- |
+| lock | 将抽屉标记为提交中，锁定当前状态 | `(isLock:boolean)=>drawerApi` | >5.5.3 |
+| unlock | lock方法的反操作，解除抽屉的锁定状态，也是lock(false)的别名 | `()=>drawerApi` | >5.5.3 |
+
+::: info lock
+
+`lock`方法用于锁定抽屉的状态，一般用于提交数据的过程中防止用户重复提交或者抽屉被意外关闭、表单数据被改变等等。当处于锁定状态时，抽屉的确认按钮会变为loading状态，同时禁用取消按钮和关闭按钮、禁止ESC或者点击遮罩等方式关闭抽屉、开启抽屉的spinner动画以遮挡弹窗内容。调用`close`方法关闭处于锁定状态的抽屉时，会自动解锁。要主动解除这种状态，可以调用`unlock`方法或者再次调用lock方法并传入false参数。
+
+:::
diff --git a/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md b/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
index 109f1161c..ce6c0334a 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
@@ -26,6 +26,12 @@ outline: deep
 
 <DemoPreview dir="demos/vben-ellipsis-text/tooltip" />
 
+## 自动显示 tooltip
+
+通过`tooltip-when-ellipsis`设置，仅在文本长度超出导致省略号出现时才触发 tooltip。
+
+<DemoPreview dir="demos/vben-ellipsis-text/auto-display" />
+
 ## API
 
 ### Props
@@ -37,6 +43,8 @@ outline: deep
 | maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
 | placement | 提示浮层的位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
 | tooltip | 启用文本提示 | `boolean` | `true` |
+| tooltipWhenEllipsis | 内容超出，自动启用文本提示 | `boolean` | `false` |
+| ellipsisThreshold | 设置 tooltipWhenEllipsis 后才生效，文本截断检测的像素差异阈值，越大则判断越严格，如果碰见异常情况可以自己设置阈值 | `number` | `3` |
 | tooltipBackgroundColor | 提示文本的背景颜色 | `string` | - |
 | tooltipColor | 提示文本的颜色 | `string` | - |
 | tooltipFontSize | 提示文本的大小 | `string` | - |
diff --git a/apps/vben5/docs/src/components/common-ui/vben-form.md b/apps/vben5/docs/src/components/common-ui/vben-form.md
index ecaae6f8d..7abb3051e 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-form.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-form.md
@@ -279,22 +279,24 @@ const [Form, formApi] = useVbenForm({
 
 useVbenForm 返回的第二个参数，是一个对象，包含了一些表单的方法。
 
-| 方法名 | 描述 | 类型 |
-| --- | --- | --- |
-| submitForm | 提交表单 | `(e:Event)=>Promise<Record<string,any>>` |
-| validateAndSubmitForm | 提交并校验表单 | `(e:Event)=>Promise<Record<string,any>>` |
-| resetForm | 重置表单 | `()=>Promise<void>` |
-| setValues | 设置表单值, 默认会过滤不在schema中定义的field, 可通过filterFields形参关闭过滤 | `(fields: Record<string, any>, filterFields?: boolean, shouldValidate?: boolean) => Promise<void>` |
-| getValues | 获取表单值 | `(fields:Record<string, any>,shouldValidate: boolean = false)=>Promise<void>` |
-| validate | 表单校验 | `()=>Promise<void>` |
-| validateField | 校验指定字段 | `(fieldName: string)=>Promise<ValidationResult<unknown>>` |
-| isFieldValid | 检查某个字段是否已通过校验 | `(fieldName: string)=>Promise<boolean>` |
-| resetValidate | 重置表单校验 | `()=>Promise<void>` |
-| updateSchema | 更新formSchema | `(schema:FormSchema[])=>void` |
-| setFieldValue | 设置字段值 | `(field: string, value: any, shouldValidate?: boolean)=>Promise<void>` |
-| setState | 设置组件状态（props） | `(stateOrFn:\| ((prev: VbenFormProps) => Partial<VbenFormProps>)\| Partial<VbenFormProps>)=>Promise<void>` |
-| getState | 获取组件状态（props） | `()=>Promise<VbenFormProps>` |
-| form | 表单对象实例，可以操作表单，见 [useForm](https://vee-validate.logaretm.com/v4/api/use-form/) | - |
+| 方法名 | 描述 | 类型 | 版本号 |
+| --- | --- | --- | --- |
+| submitForm | 提交表单 | `(e:Event)=>Promise<Record<string,any>>` | - |
+| validateAndSubmitForm | 提交并校验表单 | `(e:Event)=>Promise<Record<string,any>>` | - |
+| resetForm | 重置表单 | `()=>Promise<void>` | - |
+| setValues | 设置表单值, 默认会过滤不在schema中定义的field, 可通过filterFields形参关闭过滤 | `(fields: Record<string, any>, filterFields?: boolean, shouldValidate?: boolean) => Promise<void>` | - |
+| getValues | 获取表单值 | `(fields:Record<string, any>,shouldValidate: boolean = false)=>Promise<void>` | - |
+| validate | 表单校验 | `()=>Promise<void>` | - |
+| validateField | 校验指定字段 | `(fieldName: string)=>Promise<ValidationResult<unknown>>` | - |
+| isFieldValid | 检查某个字段是否已通过校验 | `(fieldName: string)=>Promise<boolean>` | - |
+| resetValidate | 重置表单校验 | `()=>Promise<void>` | - |
+| updateSchema | 更新formSchema | `(schema:FormSchema[])=>void` | - |
+| setFieldValue | 设置字段值 | `(field: string, value: any, shouldValidate?: boolean)=>Promise<void>` | - |
+| setState | 设置组件状态（props） | `(stateOrFn:\| ((prev: VbenFormProps) => Partial<VbenFormProps>)\| Partial<VbenFormProps>)=>Promise<void>` | - |
+| getState | 获取组件状态（props） | `()=>Promise<VbenFormProps>` | - |
+| form | 表单对象实例，可以操作表单，见 [useForm](https://vee-validate.logaretm.com/v4/api/use-form/) | - | - |
+| getFieldComponentRef | 获取指定字段的组件实例 | `<T=unknown>(fieldName: string)=>T` | >5.5.3 |
+| getFocusedField | 获取当前已获得焦点的字段 | `()=>string\|undefined` | >5.5.3 |
 
 ## Props
 
@@ -308,7 +310,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | actionWrapperClass | 表单操作区域class | `any` | - |
 | handleReset | 表单重置回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
 | handleSubmit | 表单提交回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
-| handleValuesChange | 表单值变化回调 | `(values: Record<string, any>,) => void` | - |
+| handleValuesChange | 表单值变化回调 | `(values: Record<string, any>, fieldsChanged: string[]) => void` | - |
 | actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` |
 | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - |
 | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - |
@@ -316,11 +318,18 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | collapsed | 是否折叠，在`showCollapseButton`为`true`时生效 | `boolean` | `false` |
 | collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` |
 | collapsedRows | 折叠时保持的行数 | `number` | `1` |
-| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable<string>\|[string,string]\|((any,string)=>any)?][]` | - |
+| fieldMappingTime | 用于将表单内的数组值映射成 2 个字段 | `[string, [string, string],Nullable<string>\|[string,string]\|((any,string)=>any)?][]` | - |
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
 | schema | 表单项的每一项配置 | `FormSchema[]` | - |
 | submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
 | submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false |
+| compact | 是否紧凑模式(忽略为校验信息所预留的空间) | `boolean` | false |
+
+::: tip handleValuesChange
+
+`handleValuesChange` 回调函数的第一个参数`values`装载了表单改变后的当前值对象，第二个参数`fieldsChanged`是一个数组，包含了所有被改变的字段名。注意：第二个参数仅在v5.5.4(不含)以上版本可用，并且传递的是已在schema中定义的字段名。如果你使用了字段映射并且需要检查是哪些字段发生了变化的话，请注意该参数并不会包含映射后的字段名。
+
+:::
 
 ::: tip fieldMappingTime
 
@@ -363,13 +372,6 @@ export interface FormCommonConfig {
    * 所有表单项的props
    */
   componentProps?: ComponentProps;
-  /**
-   * 是否紧凑模式(移除表单底部为显示校验错误信息所预留的空间)。
-   * 在有设置校验规则的场景下，建议不要将其设置为true
-   * 默认为false。但用作表格的搜索表单时，默认为true
-   * @default false
-   */
-  compact?: boolean;
   /**
    * 所有表单项的控件样式
    */
@@ -445,9 +447,9 @@ export interface FormSchema<
   /** 字段名，也作为自定义插槽的名称 */
   fieldName: string;
   /** 帮助信息 */
-  help?: string;
-  /** 表单项 */
-  label?: string;
+  help?: CustomRenderType;
+  /** 表单的标签（如果是一个string，会用于默认必选规则的消息提示） */
+  label?: CustomRenderType;
   /** 自定义组件内部渲染  */
   renderComponentContent?: RenderComponentContentType;
   /** 字段规则 */
@@ -518,20 +520,25 @@ import { z } from '#/adapter/form';
 
 // 可选(可以是undefined)，并且携带默认值。注意zod的optional不包括空字符串''
 {
-   rules: z.string().default('默认值').optional(),
+  rules: z.string().default('默认值').optional();
+}
+
+// 可以是空字符串、undefined或者一个邮箱地址(两种不同的用法)
+{
+  rules: z.union([z.string().email().optional(), z.literal('')]);
 }
 
-// 可以是空字符串、undefined或者一个邮箱地址
 {
-  rules: z.union(z.string().email().optional(), z.literal(""))
+  rules: z.string().email().or(z.literal('')).optional();
 }
 
 // 复杂校验
 {
-   z.string().min(1, { message: "请输入" })
-            .refine((value) => value === "123", {
-              message: "值必须为123",
-            });
+  z.string()
+    .min(1, { message: '请输入' })
+    .refine((value) => value === '123', {
+      message: '值必须为123',
+    });
 }
 ```
 
diff --git a/apps/vben5/docs/src/components/common-ui/vben-modal.md b/apps/vben5/docs/src/components/common-ui/vben-modal.md
index e49196eed..3c8200f90 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-modal.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-modal.md
@@ -59,8 +59,7 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
 ::: info 注意
 
 - `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
-- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
-- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
+- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。另外，如果设置了`destroyOnClose`，内部Modal及其子组件会在被关闭后<b>完全销毁</b>。
 - 如果弹窗的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultModalProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
 
 :::
@@ -84,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 | --- | --- | --- | --- |
 | appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
 | connectedComponent | 连接另一个Modal组件 | `Component` | - |
-| destroyOnClose | 关闭时销毁`connectedComponent` | `boolean` | `false` |
+| destroyOnClose | 关闭时销毁 | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
@@ -138,11 +137,12 @@ const [Modal, modalApi] = useVbenModal({
 
 除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
 
-| 插槽名         | 描述                |
-| -------------- | ------------------- |
-| default        | 默认插槽 - 弹窗内容 |
-| prepend-footer | 取消按钮左侧        |
-| append-footer  | 取消按钮右侧        |
+| 插槽名         | 描述                                               |
+| -------------- | -------------------------------------------------- |
+| default        | 默认插槽 - 弹窗内容                                |
+| prepend-footer | 取消按钮左侧                                       |
+| center-footer  | 取消按钮和确认按钮中间（不使用 footer 插槽时有效） |
+| append-footer  | 确认按钮右侧                                       |
 
 ### modalApi
 
@@ -155,9 +155,10 @@ const [Modal, modalApi] = useVbenModal({
 | getData | 获取共享数据 | `<T>()=>T` | - |
 | useStore | 获取可响应式状态 | - | - |
 | lock | 将弹窗标记为提交中，锁定当前状态 | `(isLock:boolean)=>modalApi` | >5.5.2 |
+| unlock | lock方法的反操作，解除弹窗的锁定状态，也是lock(false)的别名 | `()=>modalApi` | >5.5.3 |
 
 ::: info lock
 
-`lock`方法用于锁定当前弹窗的状态，一般用于提交数据的过程中防止用户重复提交或者弹窗被意外关闭、表单数据被改变等等。当处于锁定状态时，弹窗的确认按钮会变为loading状态，同时禁用确认按钮、隐藏关闭按钮、禁止ESC或者点击遮罩等方式关闭弹窗、开启弹窗的spinner动画以遮挡弹窗内容。调用`close`方法关闭处于锁定状态的弹窗时，会自动解锁。
+`lock`方法用于锁定当前弹窗的状态，一般用于提交数据的过程中防止用户重复提交或者弹窗被意外关闭、表单数据被改变等等。当处于锁定状态时，弹窗的确认按钮会变为loading状态，同时禁用取消按钮和关闭按钮、禁止ESC或者点击遮罩等方式关闭弹窗、开启弹窗的spinner动画以遮挡弹窗内容。调用`close`方法关闭处于锁定状态的弹窗时，会自动解锁。要主动解除这种状态，可以调用`unlock`方法或者再次调用lock方法并传入false参数。
 
 :::
diff --git a/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md b/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md
index 24d911da7..344ecae11 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md
@@ -165,7 +165,24 @@ vxeUI.renderer.add('CellLink', {
 
 **表单搜索** 部分采用了`Vben Form 表单`，参考 [Vben Form 表单文档](/components/common-ui/vben-form)。
 
-当启用了表单搜索时，可以在toolbarConfig中配置`search`为`true`来让表格在工具栏区域显示一个搜索表单控制按钮。
+当启用了表单搜索时，可以在toolbarConfig中配置`search`为`true`来让表格在工具栏区域显示一个搜索表单控制按钮。表格的所有以`form-`开头的命名插槽都会被传递给搜索表单。
+
+### 定制分隔条
+
+当你启用表单搜索时，在表单和表格之间会显示一个分隔条。这个分隔条使用了默认的组件背景色，并且横向贯穿整个Vben Vxe Table在视觉上融入了页面的默认背景中。如果你在Vben Vxe Table的外层包裹了一个不同背景色的容器（如将其放在一个Card内），默认的表单和表格之间的分隔条可能就显得格格不入了，下面的代码演示了如何定制这个分隔条。
+
+```ts
+const [Grid] = useVbenVxeGrid({
+  formOptions: {},
+  gridOptions: {},
+  // 完全移除分隔条
+  separator: false,
+  // 你也可以使用下面的代码来移除分隔条
+  // separator: { show: false },
+  // 或者使用下面的代码来改变分隔条的颜色
+  // separator: { backgroundColor: 'rgba(100,100,0,0.5)' },
+});
+```
 
 <DemoPreview dir="demos/vben-vxe-table/form" />
 
@@ -231,12 +248,29 @@ useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表
 
 所有属性都可以传入 `useVbenVxeGrid` 的第一个参数中。
 
-| 属性名         | 描述               | 类型                |
-| -------------- | ------------------ | ------------------- |
-| tableTitle     | 表格标题           | `string`            |
-| tableTitleHelp | 表格标题帮助信息   | `string`            |
-| gridClass      | grid组件的class    | `string`            |
-| gridOptions    | grid组件的参数     | `VxeTableGridProps` |
-| gridEvents     | grid组件的触发的⌚️ | `VxeGridListeners`  |
-| formOptions    | 表单参数           | `VbenFormProps`     |
-| showSearchForm | 是否显示搜索表单   | `boolean`           |
+| 属性名 | 描述 | 类型 | 版本要求 |
+| --- | --- | --- | --- |
+| tableTitle | 表格标题 | `string` | - |
+| tableTitleHelp | 表格标题帮助信息 | `string` | - |
+| gridClass | grid组件的class | `string` | - |
+| gridOptions | grid组件的参数 | `VxeTableGridProps` | - |
+| gridEvents | grid组件的触发的事件 | `VxeGridListeners` | - |
+| formOptions | 表单参数 | `VbenFormProps` | - |
+| showSearchForm | 是否显示搜索表单 | `boolean` | - |
+| separator | 搜索表单与表格主体之间的分隔条 | `boolean\|SeparatorOptions` | >5.5.4 |
+
+## Slots
+
+大部分插槽的说明请参考 [vxe-table 官方文档](https://vxetable.cn/v4/#/grid/api)，但工具栏部分由于做了一些定制封装，需使用以下插槽定制表格的工具栏：
+
+| 插槽名          | 描述                                         |
+| --------------- | -------------------------------------------- |
+| toolbar-actions | 工具栏左侧部分（表格标题附近）               |
+| toolbar-tools   | 工具栏右侧部分（vxeTable原生工具按钮的左侧） |
+| table-title     | 表格标题插槽                                 |
+
+::: info 搜索表单的插槽
+
+对于使用了搜索表单的表格来说，所有以`form-`开头的命名插槽都会传递给表单。
+
+:::
diff --git a/apps/vben5/docs/src/demos/vben-alert/alert/index.vue b/apps/vben5/docs/src/demos/vben-alert/alert/index.vue
new file mode 100644
index 000000000..9ba18a4da
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-alert/alert/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { alert, VbenButton } from '@vben/common-ui';
+
+import { Result } from 'ant-design-vue';
+
+function showAlert() {
+  alert('This is an alert message');
+}
+
+function showIconAlert() {
+  alert({
+    content: 'This is an alert message with icon',
+    icon: 'success',
+  });
+}
+
+function showCustomAlert() {
+  alert({
+    buttonAlign: 'center',
+    content: h(Result, {
+      status: 'success',
+      subTitle: '已成功创建订单。订单ID：2017182818828182881',
+      title: '操作成功',
+    }),
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showAlert">Alert</VbenButton>
+    <VbenButton @click="showIconAlert">Alert With Icon</VbenButton>
+    <VbenButton @click="showCustomAlert">Alert With Custom Content</VbenButton>
+  </div>
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue b/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue
new file mode 100644
index 000000000..723445d96
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+
+import { alert, confirm, VbenButton } from '@vben/common-ui';
+
+import { Checkbox, message } from 'ant-design-vue';
+
+function showConfirm() {
+  confirm('This is an alert message')
+    .then(() => {
+      alert('Confirmed');
+    })
+    .catch(() => {
+      alert('Canceled');
+    });
+}
+
+function showIconConfirm() {
+  confirm({
+    content: 'This is an alert message with icon',
+    icon: 'success',
+  });
+}
+
+function showfooterConfirm() {
+  const checked = ref(false);
+  confirm({
+    cancelText: '不要虾扯蛋',
+    confirmText: '是的，我们都是NPC',
+    content:
+      '刚才发生的事情，为什么我似乎早就经历过一般？\n我甚至能在事情发生过程中潜意识里预知到接下来会发生什么。\n\n听起来挺玄乎的，你有过这种感觉吗？',
+    footer: () =>
+      h(
+        Checkbox,
+        {
+          checked: checked.value,
+          class: 'flex-1',
+          'onUpdate:checked': (v) => (checked.value = v),
+        },
+        '不再提示',
+      ),
+    icon: 'question',
+    title: '未解之谜',
+  }).then(() => {
+    if (checked.value) {
+      message.success('我不会再拿这个问题烦你了');
+    } else {
+      message.info('下次还要继续问你哟');
+    }
+  });
+}
+
+function showAsyncConfirm() {
+  confirm({
+    beforeClose({ isConfirm }) {
+      if (isConfirm) {
+        // 这里可以执行一些异步操作。如果最终返回了false，将阻止关闭弹窗
+        return new Promise((resolve) => setTimeout(resolve, 2000));
+      }
+    },
+    content: 'This is an alert message with async confirm',
+    icon: 'success',
+  }).then(() => {
+    alert('Confirmed');
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showConfirm">Confirm</VbenButton>
+    <VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
+    <VbenButton @click="showfooterConfirm">Confirm With Footer</VbenButton>
+    <VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
+  </div>
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue b/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue
new file mode 100644
index 000000000..a19221347
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { alert, prompt, useAlertContext, VbenButton } from '@vben/common-ui';
+
+import { Input, RadioGroup, Select } from 'ant-design-vue';
+import { BadgeJapaneseYen } from 'lucide-vue-next';
+
+function showPrompt() {
+  prompt({
+    content: '请输入一些东西',
+  })
+    .then((val) => {
+      alert(`已收到你的输入：${val}`);
+    })
+    .catch(() => {
+      alert('Canceled');
+    });
+}
+
+function showSlotsPrompt() {
+  prompt({
+    component: () => {
+      // 获取弹窗上下文。注意：只能在setup或者函数式组件中调用
+      const { doConfirm } = useAlertContext();
+      return h(
+        Input,
+        {
+          onKeydown(e: KeyboardEvent) {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              // 调用弹窗提供的确认方法
+              doConfirm();
+            }
+          },
+          placeholder: '请输入',
+          prefix: '充值金额：',
+          type: 'number',
+        },
+        {
+          addonAfter: () => h(BadgeJapaneseYen),
+        },
+      );
+    },
+    content:
+      '此弹窗演示了如何使用自定义插槽，并且可以使用useAlertContext获取到弹窗的上下文。\n在输入框中按下回车键会触发确认操作。',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) alert(`你输入的是${val}`);
+  });
+}
+
+function showSelectPrompt() {
+  prompt({
+    component: Select,
+    componentProps: {
+      options: [
+        { label: 'Option A', value: 'Option A' },
+        { label: 'Option B', value: 'Option B' },
+        { label: 'Option C', value: 'Option C' },
+      ],
+      placeholder: '请选择',
+      // 弹窗会设置body的pointer-events为none，这回影响下拉框的点击事件
+      popupClassName: 'pointer-events-auto',
+    },
+    content: '此弹窗演示了如何使用component传递自定义组件',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) {
+      alert(`你选择了${val}`);
+    }
+  });
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function showAsyncPrompt() {
+  prompt({
+    async beforeClose(scope) {
+      if (scope.isConfirm) {
+        if (scope.value) {
+          // 模拟异步操作，如果不成功，可以返回false
+          await sleep(2000);
+        } else {
+          alert('请选择一个选项');
+          return false;
+        }
+      }
+    },
+    component: RadioGroup,
+    componentProps: {
+      class: 'flex flex-col',
+      options: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' },
+      ],
+    },
+    content: '选择一个选项后再点击[确认]',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    alert(`${val} 已设置。`);
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showPrompt">Prompt</VbenButton>
+    <VbenButton @click="showSlotsPrompt"> Prompt With slots </VbenButton>
+    <VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
+    <VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
+  </div>
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-ellipsis-text/auto-display/index.vue b/apps/vben5/docs/src/demos/vben-ellipsis-text/auto-display/index.vue
new file mode 100644
index 000000000..fb5a32a50
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-ellipsis-text/auto-display/index.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+
+const text = `
+Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+`;
+</script>
+<template>
+  <EllipsisText :line="2" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+
+  <EllipsisText :line="3" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+</template>
diff --git a/apps/vben5/docs/src/en/guide/essentials/development.md b/apps/vben5/docs/src/en/guide/essentials/development.md
index da7cfd8ce..9ff832b7b 100644
--- a/apps/vben5/docs/src/en/guide/essentials/development.md
+++ b/apps/vben5/docs/src/en/guide/essentials/development.md
@@ -98,8 +98,8 @@ The execution command is: `pnpm run [script]` or `npm run [script]`.
     "postinstall": "pnpm -r run stub --if-present",
     // Only allow using pnpm
     "preinstall": "npx only-allow pnpm",
-    // Install husky
-    "prepare": "is-ci || husky",
+    // Install lefthook
+    "prepare": "is-ci || lefthook install",
     // Preview the application
     "preview": "turbo-run preview",
     // Package specification check
@@ -150,6 +150,73 @@ To run the `docs` application:
 pnpm dev:docs
 ```
 
+### Distinguishing Build Environments
+
+In actual business development, multiple environments are usually distinguished during the build process, such as the test environment `test` and the production environment `build`.
+
+At this point, you can modify three files and add corresponding script configurations to distinguish between production environments.
+
+Take the addition of the test environment `test` to `@vben/web-antd` as an example:
+
+- `apps\web-antd\package.json`
+
+```json
+"scripts": {
+  "build:prod": "pnpm vite build --mode production",
+  "build:test": "pnpm vite build --mode test",
+  "build:analyze": "pnpm vite build --mode analyze",
+  "dev": "pnpm vite --mode development",
+  "preview": "vite preview",
+  "typecheck": "vue-tsc --noEmit --skipLibCheck"
+}
+```
+
+Add the command `"build:test"` and change the original `"build"` to `"build:prod"` to avoid building packages for two environments simultaneously.
+
+- `package.json`
+
+```json
+"scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
+    "build:analyze": "turbo build:analyze",
+    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build-test:antd": "pnpm run build --filter=@vben/web-antd build:test",
+
+    ······
+}
+```
+
+Add the command to build the test environment in the root directory `package.json`.
+
+- `turbo.json`
+
+```json
+"tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [
+        "dist/**",
+        "dist.zip",
+        ".vitepress/dist.zip",
+        ".vitepress/dist/**"
+      ]
+    },
+
+    "build-test:antd": {
+      "dependsOn": ["@vben/web-antd#build:test"],
+      "outputs": ["dist/**"]
+    },
+
+    "@vben/web-antd#build:test": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+
+    ······
+```
+
+Add the relevant dependent commands in `turbo.json`.
+
 ## Public Static Resources
 
 If you need to use public static resources in the project, such as images, static HTML, etc., and you want to directly import them in the development process through `src="/xxx.png"`.
diff --git a/apps/vben5/docs/src/en/guide/essentials/settings.md b/apps/vben5/docs/src/en/guide/essentials/settings.md
index a3cd579ec..59a6c5c01 100644
--- a/apps/vben5/docs/src/en/guide/essentials/settings.md
+++ b/apps/vben5/docs/src/en/guide/essentials/settings.md
@@ -21,7 +21,7 @@ The rules are consistent with [Vite Env Variables and Modes](https://vitejs.dev/
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging. :::
+- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging.
 
 :::
 
@@ -60,6 +60,29 @@ VITE_INJECT_APP_LOADING=true
 VITE_ARCHIVER=true
 ```
 
+```bash [.env.production]
+# Public Path for Resources, must start and end with /
+VITE_BASE=/
+
+# API URL
+VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
+
+# Whether to enable compression, can be set to none, brotli, gzip
+VITE_COMPRESS=gzip
+
+# Whether to enable PWA
+VITE_PWA=false
+
+# vue-router mode
+VITE_ROUTER_HISTORY=hash
+
+# Whether to inject global loading
+VITE_INJECT_APP_LOADING=true
+
+# Whether to generate dist.zip after packaging
+VITE_ARCHIVER=true
+```
+
 :::
 
 ## Dynamic Configuration in Production Environment
@@ -115,6 +138,27 @@ To add a new dynamically modifiable configuration item, simply follow the steps
   }
   ```
 
+- In `packages/effects/hooks/src/use-app-config.ts`, add the corresponding configuration item, such as:
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // In production environment, directly use the window._VBEN_ADMIN_PRO_APP_CONF_ global variable
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 At this point, you can use the `useAppConfig` method within the project to access the newly added configuration item.
 
 ```ts
@@ -142,6 +186,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
  * @description Project configuration file
  * Only a part of the configuration in the project needs to be covered, and unnecessary configurations do not need to be covered. The default configuration will be automatically used
+ * !!! Please clear the cache after changing the configuration, otherwise it may not take effect
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides
@@ -162,8 +207,15 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 0,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 0,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
     defaultAvatar:
       'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
+    defaultHomePath: '/analytics',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -171,10 +223,11 @@ const defaultPreferences: Preferences = {
     isMobile: false,
     layout: 'sidebar-nav',
     locale: 'zh-CN',
-    loginExpiredMode: 'modal',
+    loginExpiredMode: 'page',
     name: 'Vben Admin',
     preferencesButtonPosition: 'auto',
     watermark: false,
+    zIndex: 200,
   },
   breadcrumb: {
     enable: true,
@@ -190,18 +243,23 @@ const defaultPreferences: Preferences = {
     enable: true,
     icp: '',
     icpLink: '',
+    settingShow: true,
   },
   footer: {
-    enable: true,
+    enable: false,
     fixed: false,
+    height: 32,
   },
   header: {
     enable: true,
+    height: 50,
     hidden: false,
+    menuAlign: 'start',
     mode: 'fixed',
   },
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -219,23 +277,31 @@ const defaultPreferences: Preferences = {
   sidebar: {
     autoActivateChild: false,
     collapsed: false,
+    collapsedButton: true,
     collapsedShowTitle: false,
+    collapseWidth: 60,
     enable: true,
     expandOnHover: true,
-    extraCollapse: true,
+    extraCollapse: false,
+    extraCollapsedWidth: 60,
+    fixedButton: true,
     hidden: false,
-    width: 230,
+    mixedWidth: 80,
+    width: 224,
   },
   tabbar: {
     draggable: true,
     enable: true,
-    height: 36,
+    height: 38,
     keepAlive: true,
+    maxCount: 0,
+    middleClickToClose: false,
     persist: true,
     showIcon: true,
     showMaximize: true,
     showMore: true,
     styleType: 'chrome',
+    wheelable: true,
   },
   theme: {
     builtinType: 'default',
@@ -246,7 +312,7 @@ const defaultPreferences: Preferences = {
     mode: 'dark',
     radius: '0.5',
     semiDarkHeader: false,
-    semiDarkSidebar: true,
+    semiDarkSidebar: false,
   },
   transition: {
     enable: true,
@@ -260,9 +326,9 @@ const defaultPreferences: Preferences = {
     languageToggle: true,
     lockScreen: true,
     notification: true,
+    refresh: true,
     sidebarToggle: true,
     themeToggle: true,
-    refresh: true,
   },
 };
 ```
@@ -287,8 +353,22 @@ interface AppPreferences {
   compact: boolean;
   /** Whether to enable content compact mode */
   contentCompact: ContentCompactType;
+  /** Content compact width */
+  contentCompactWidth: number;
+  /** Content padding */
+  contentPadding: number;
+  /** Content bottom padding */
+  contentPaddingBottom: number;
+  /** Content left padding */
+  contentPaddingLeft: number;
+  /** Content right padding */
+  contentPaddingRight: number;
+  /** Content top padding */
+  contentPaddingTop: number;
   // /** Default application avatar */
   defaultAvatar: string;
+  /** Default homepage path */
+  defaultHomePath: string;
   // /** Enable dynamic title */
   dynamicTitle: boolean;
   /** Whether to enable update checks */
@@ -315,6 +395,8 @@ interface AppPreferences {
    * @zh_CN Whether to enable watermark
    */
   watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }
 interface BreadcrumbPreferences {
   /** Whether breadcrumbs are enabled */
@@ -342,6 +424,8 @@ interface CopyrightPreferences {
   icp: string;
   /** Link to the ICP */
   icpLink: string;
+  /** Whether to show in settings panel */
+  settingShow?: boolean;
 }
 
 interface FooterPreferences {
@@ -349,13 +433,19 @@ interface FooterPreferences {
   enable: boolean;
   /** Whether the footer is fixed */
   fixed: boolean;
+  /** Footer height */
+  height: number;
 }
 
 interface HeaderPreferences {
   /** Whether the header is enabled */
   enable: boolean;
+  /** Header height */
+  height: number;
   /** Whether the header is hidden, css-hidden */
   hidden: boolean;
+  /** Header menu alignment */
+  menuAlign: LayoutHeaderMenuAlignType;
   /** Header display mode */
   mode: LayoutHeaderModeType;
 }
@@ -363,6 +453,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** Whether the logo is visible */
   enable: boolean;
+  /** Logo image fitting method */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** Logo URL */
   source: string;
 }
@@ -376,18 +468,30 @@ interface NavigationPreferences {
   styleType: NavigationStyleType;
 }
 interface SidebarPreferences {
+  /** Automatically activate child menu when clicking on directory */
+  autoActivateChild: boolean;
   /** Whether the sidebar is collapsed */
   collapsed: boolean;
+  /** Whether the sidebar collapse button is visible */
+  collapsedButton: boolean;
   /** Whether to show title when sidebar is collapsed */
   collapsedShowTitle: boolean;
+  /** Sidebar collapse width */
+  collapseWidth: number;
   /** Whether the sidebar is visible */
   enable: boolean;
   /** Menu auto-expand state */
   expandOnHover: boolean;
   /** Whether the sidebar extension area is collapsed */
   extraCollapse: boolean;
+  /** Sidebar extension area collapse width */
+  extraCollapsedWidth: number;
+  /** Whether the sidebar fixed button is visible */
+  fixedButton: boolean;
   /** Whether the sidebar is hidden - css */
   hidden: boolean;
+  /** Mixed sidebar width */
+  mixedWidth: number;
   /** Sidebar width */
   width: number;
 }
@@ -414,6 +518,10 @@ interface TabbarPreferences {
   height: number;
   /** Whether tab caching is enabled */
   keepAlive: boolean;
+  /** Maximum number of tabs */
+  maxCount: number;
+  /** Whether to close tab when middle-clicked */
+  middleClickToClose: boolean;
   /** Whether tabs are persistent */
   persist: boolean;
   /** Whether icons in multiple tabs are enabled */
@@ -424,6 +532,8 @@ interface TabbarPreferences {
   showMore: boolean;
   /** Tab style */
   styleType: TabsStyleType;
+  /** Whether mouse wheel response is enabled */
+  wheelable: boolean;
 }
 interface ThemePreferences {
   /** Built-in theme name */
@@ -511,5 +621,6 @@ interface Preferences {
 
 - The `overridesPreferences` method only needs to override a part of the configurations in the project. There's no need to override configurations that are not needed; they will automatically use the default settings.
 - Any configuration item can be overridden. You just need to override it within the `overridesPreferences` method. Do not modify the default configuration file.
+- Please clear the cache after changing the configuration, otherwise it may not take effect.
 
 :::
diff --git a/apps/vben5/docs/src/en/guide/in-depth/access.md b/apps/vben5/docs/src/en/guide/in-depth/access.md
index 05997d7d5..545dddabd 100644
--- a/apps/vben5/docs/src/en/guide/in-depth/access.md
+++ b/apps/vben5/docs/src/en/guide/in-depth/access.md
@@ -4,10 +4,11 @@ outline: deep
 
 # Access Control
 
-The framework has built-in two types of access control methods:
+The framework has built-in three types of access control methods:
 
 - Determining whether a menu or button can be accessed based on user roles
 - Determining whether a menu or button can be accessed through an API
+- Mixed mode: Using both frontend and backend access control simultaneously
 
 ## Frontend Access Control
 
@@ -151,6 +152,43 @@ const dashboardMenus = [
 
 At this point, the configuration is complete. You need to ensure that after logging in, the format of the menu returned by the interface is correct; otherwise, access will not be possible.
 
+## Mixed Access Control
+
+**Implementation Principle**: Mixed mode combines both frontend access control and backend access control methods. The system processes frontend fixed route permissions and backend dynamic menu data in parallel, ultimately merging both parts of routes to provide a more flexible access control solution.
+
+**Advantages**: Combines the performance advantages of frontend control with the flexibility of backend control, suitable for complex business scenarios requiring permission management.
+
+### Steps
+
+- Ensure the current mode is set to mixed access control
+
+Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='mixed'`.
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- Configure frontend route permissions
+
+Same as the route permission configuration method in [Frontend Access Control](#frontend-access-control) mode.
+
+- Configure backend menu interface
+
+Same as the interface configuration method in [Backend Access Control](#backend-access-control) mode.
+
+- Ensure roles and permissions match
+
+Must satisfy both frontend route permission configuration and backend menu data return requirements, ensuring user roles match the permission configurations of both modes.
+
+At this point, the configuration is complete. Mixed mode will automatically merge frontend and backend routes, providing complete access control functionality.
+
 ## Fine-grained Control of Buttons
 
 In some cases, we need to control the display of buttons with fine granularity. We can control the display of buttons through interfaces or roles.
diff --git a/apps/vben5/docs/src/en/guide/in-depth/theme.md b/apps/vben5/docs/src/en/guide/in-depth/theme.md
index 11c9c992b..164ac1797 100644
--- a/apps/vben5/docs/src/en/guide/in-depth/theme.md
+++ b/apps/vben5/docs/src/en/guide/in-depth/theme.md
@@ -28,9 +28,10 @@ You can check the list below to understand all the available variables.
 
 ```css
 :root {
-  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
-    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Default background color of <body />...etc */
   --background: 0 0% 100%;
@@ -322,9 +323,10 @@ type BuiltinThemeType =
 
 ```css
 :root {
-  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
-    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Default background color of <body />...etc */
   --background: 0 0% 100%;
diff --git a/apps/vben5/docs/src/en/guide/introduction/quick-start.md b/apps/vben5/docs/src/en/guide/introduction/quick-start.md
index d4829dcef..757679c39 100644
--- a/apps/vben5/docs/src/en/guide/introduction/quick-start.md
+++ b/apps/vben5/docs/src/en/guide/introduction/quick-start.md
@@ -58,7 +58,7 @@ Open a terminal in your code directory and execute the following commands:
 cd vue-vben-admin
 
 # Enable the project-specified version of pnpm
-corepack enable
+npm i -g corepack
 
 # Install dependencies
 pnpm install
diff --git a/apps/vben5/docs/src/en/guide/other/faq.md b/apps/vben5/docs/src/en/guide/other/faq.md
index da908f893..50cc13359 100644
--- a/apps/vben5/docs/src/en/guide/other/faq.md
+++ b/apps/vben5/docs/src/en/guide/other/faq.md
@@ -18,7 +18,7 @@ If you encounter a problem, you can start looking from the following aspects:
 
 ## Dependency Issues
 
-In a `Monorepo` project, it is necessary to develop the habit of executing `pnpm install` every time you `git pull` the code, as new dependency packages are often added. The project has already configured automatic execution of `pnpm install` in `.husky/git-merge`, but sometimes there might be issues. If it does not execute automatically, it is recommended to execute it manually once.
+In a `Monorepo` project, it's important to get into the habit of running `pnpm install` after every `git pull` because new dependencies are often added. The project has configured automatic execution of `pnpm install` in `lefthook.yml`, but sometimes there might be issues. If it does not execute automatically, it is recommended to execute it manually once.
 
 ## About Cache Update Issues
 
diff --git a/apps/vben5/docs/src/en/guide/project/standard.md b/apps/vben5/docs/src/en/guide/project/standard.md
index 23770c548..e5417ce7c 100644
--- a/apps/vben5/docs/src/en/guide/project/standard.md
+++ b/apps/vben5/docs/src/en/guide/project/standard.md
@@ -33,8 +33,8 @@ The project integrates the following code verification tools:
 - [Prettier](https://prettier.io/) for code formatting
 - [Commitlint](https://commitlint.js.org/) for checking the standard of git commit messages
 - [Publint](https://publint.dev/) for checking the standard of npm packages
-- [Lint Staged](https://github.com/lint-staged/lint-staged) for running code verification before git commits
 - [Cspell](https://cspell.org/) for checking spelling errors
+- [lefthook](https://github.com/evilmartians/lefthook) for managing Git hooks, automatically running code checks and formatting before commits
 
 ## ESLint
 
@@ -148,18 +148,66 @@ The cspell configuration file is `cspell.json`, which can be modified according
 
 Git hooks are generally combined with various lints to check code style during git commits. If the check fails, the commit will not proceed. Developers need to modify and resubmit.
 
-### husky
+### lefthook
 
-One issue is that the check will verify all code, but we only want to check the code we are committing. This is where husky comes in.
+One issue is that the check will verify all code, but we only want to check the code we are committing. This is where lefthook comes in.
 
-The most effective solution is to perform Lint checks locally before committing. A common practice is to use husky or pre-commit to perform a Lint check before local submission.
+The most effective solution is to perform Lint checks locally before committing. A common practice is to use lefthook to perform a Lint check before local submission.
 
-The project defines corresponding hooks inside `.husky`.
+The project defines corresponding hooks inside `lefthook.yml`:
 
-#### How to Disable Husky
+- `pre-commit`: Runs before commit, used for code formatting and checking
 
-If you want to disable Husky, simply delete the .husky directory.
+  - `code-workspace`: Updates VSCode workspace configuration
+  - `lint-md`: Formats Markdown files
+  - `lint-vue`: Formats and checks Vue files
+  - `lint-js`: Formats and checks JavaScript/TypeScript files
+  - `lint-style`: Formats and checks style files
+  - `lint-package`: Formats package.json
+  - `lint-json`: Formats other JSON files
 
-### lint-staged
+- `post-merge`: Runs after merge, used for automatic dependency installation
 
-Used for automatically fixing style issues of committed files. Its configuration file is `.lintstagedrc.mjs`, which can be modified according to project needs.
+  - `install`: Runs `pnpm install` to install new dependencies
+
+- `commit-msg`: Runs during commit, used for checking commit message format
+  - `commitlint`: Uses commitlint to check commit messages
+
+#### How to Disable lefthook
+
+If you want to disable lefthook, there are two ways:
+
+::: code-group
+
+```bash [Temporary disable]
+git commit -m 'feat: add home page' --no-verify
+```
+
+```bash [Permanent disable]
+# Simply delete the lefthook.yml file
+rm lefthook.yml
+```
+
+:::
+
+#### How to Modify lefthook Configuration
+
+If you want to modify lefthook's configuration, you can edit the `lefthook.yml` file. For example:
+
+```yaml
+pre-commit:
+  parallel: true # Execute tasks in parallel
+  jobs:
+    - name: lint-js
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files}
+      glob: '*.{js,jsx,ts,tsx}'
+```
+
+Where:
+
+- `parallel`: Whether to execute tasks in parallel
+- `jobs`: Defines the list of tasks to execute
+- `name`: Task name
+- `run`: Command to execute
+- `glob`: File pattern to match
+- `{staged_files}`: Represents the list of staged files
diff --git a/apps/vben5/docs/src/guide/essentials/build.md b/apps/vben5/docs/src/guide/essentials/build.md
index ab9828fd5..134a632a7 100644
--- a/apps/vben5/docs/src/guide/essentials/build.md
+++ b/apps/vben5/docs/src/guide/essentials/build.md
@@ -47,7 +47,7 @@ cd apps/web-antd/dist
 # 本地预览，默认端口8080
 live-server
 # 指定端口
-live-server --port 9000
+live-server --port=9000
 ```
 
 ## 压缩
@@ -214,7 +214,7 @@ server {
 
 使用 nginx 处理项目部署后的跨域问题
 
-1. 配置前端项目接口地址，在项目目录下的``.env.production`文件中配置：
+1. 配置前端项目接口地址，在项目目录下的`.env.production`文件中配置：
 
 ```bash
 VITE_GLOB_API_URL=/api
diff --git a/apps/vben5/docs/src/guide/essentials/development.md b/apps/vben5/docs/src/guide/essentials/development.md
index 556e4c9dd..cb55b6b5c 100644
--- a/apps/vben5/docs/src/guide/essentials/development.md
+++ b/apps/vben5/docs/src/guide/essentials/development.md
@@ -98,8 +98,8 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
     "postinstall": "pnpm -r run stub --if-present",
     // 只允许使用pnpm
     "preinstall": "npx only-allow pnpm",
-    // husky的安装
-    "prepare": "is-ci || husky",
+    // lefthook的安装
+    "prepare": "is-ci || lefthook install",
     // 预览应用
     "preview": "turbo-run preview",
     // 包规范检查
@@ -150,6 +150,73 @@ pnpm dev:ele
 pnpm dev:docs
 ```
 
+## 区分构建环境
+
+在实际的业务开发中，通常会在构建时区分多种环境，如测试环境`test`、生产环境`build`等。
+
+此时可以修改三个文件，在其中增加对应的脚本配置来达到区分生产环境的效果。
+
+以`@vben/web-antd`添加测试环境`test`为例：
+
+- `apps\web-antd\package.json`
+
+```json
+"scripts": {
+  "build:prod": "pnpm vite build --mode production",
+  "build:test": "pnpm vite build --mode test",
+  "build:analyze": "pnpm vite build --mode analyze",
+  "dev": "pnpm vite --mode development",
+  "preview": "vite preview",
+  "typecheck": "vue-tsc --noEmit --skipLibCheck"
+},
+```
+
+增加命令`"build:test"`, 并将原`"build"`改为`"build:prod"`以避免同时构建两个环境的包。
+
+- `package.json`
+
+```json
+"scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
+    "build:analyze": "turbo build:analyze",
+    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build-test:antd": "pnpm run build --filter=@vben/web-antd build:test",
+
+    ······
+}
+```
+
+在根目录`package.json`中加入构建测试环境的命令
+
+- `turbo.json`
+
+```json
+"tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [
+        "dist/**",
+        "dist.zip",
+        ".vitepress/dist.zip",
+        ".vitepress/dist/**"
+      ]
+    },
+
+    "build-test:antd": {
+      "dependsOn": ["@vben/web-antd#build:test"],
+      "outputs": ["dist/**"]
+    },
+
+    "@vben/web-antd#build:test": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+
+    ······
+```
+
+在`turbo.json`中加入相关依赖的命令
+
 ## 公共静态资源
 
 项目中需要使用到的公共静态资源，如：图片、静态HTML等，需要在开发中通过 `src="/xxx.png"` 直接引入的。
diff --git a/apps/vben5/docs/src/guide/essentials/route.md b/apps/vben5/docs/src/guide/essentials/route.md
index d8a938dda..985c48a9b 100644
--- a/apps/vben5/docs/src/guide/essentials/route.md
+++ b/apps/vben5/docs/src/guide/essentials/route.md
@@ -339,6 +339,10 @@ interface RouteMeta {
     | 'success'
     | 'warning'
     | string;
+  /**
+   * 路由的完整路径作为key（默认true）
+   */
+  fullPathKey?: boolean;
   /**
    * 当前路由的子级在菜单中不展现
    * @default false
@@ -502,6 +506,13 @@ interface RouteMeta {
 
 用于配置页面的徽标颜色。
 
+### fullPathKey
+
+- 类型：`boolean`
+- 默认值：`true`
+
+是否将路由的完整路径作为tab key（默认true）
+
 ### activePath
 
 - 类型：`string`
@@ -602,3 +613,32 @@ const { refresh } = useRefresh();
 refresh();
 </script>
 ```
+
+## 标签页与路由控制
+
+在某些场景下，需要单个路由打开多个标签页，或者修改路由的query不打开新的标签页
+
+每个标签页Tab使用唯一的key标识，设置Tab key有三种方式，优先级由高到低：
+
+- 使用路由query参数pageKey
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+// 跳转路由
+const router = useRouter();
+router.push({
+  path: 'path',
+  query: {
+    pageKey: 'key',
+  },
+});
+```
+
+- 路由的完整路径作为key
+
+`meta` 属性中的 `fullPathKey`不为false，则使用路由`fullPath`作为key
+
+- 路由的path作为key
+
+`meta` 属性中的 `fullPathKey`为false，则使用路由`path`作为key
diff --git a/apps/vben5/docs/src/guide/essentials/server.md b/apps/vben5/docs/src/guide/essentials/server.md
index fedfbae25..9a4949673 100644
--- a/apps/vben5/docs/src/guide/essentials/server.md
+++ b/apps/vben5/docs/src/guide/essentials/server.md
@@ -110,6 +110,36 @@ VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
 
 项目中默认自带了基于 `axios` 封装的基础的请求配置，核心由 `@vben/request` 包提供。项目没有过多的封装，只是简单的封装了一些常用的配置，如有其他需求，可以自行增加或者调整配置。针对不同的app，可能是用到了不同的组件库以及`store`,所以在应用目录下的`src/api/request.ts`文件夹下，有对应的请求配置文件,如`web-antd`项目下的`src/api/request.ts`文件,可以根据自己的需求进行配置。
 
+### 扩展的配置
+
+除了基础的Axios配置外，扩展了部分配置。
+
+```ts
+type ExtendOptions<T = any> = {
+  /**
+   * 参数序列化方式。预置了几种针对数组的序列化类型
+   * - brackets: ids[]=1&ids[]=2&ids[]=3
+   * - comma: ids=1,2,3
+   * - indices: ids[0]=1&ids[1]=2&ids[2]=3
+   * - repeat: ids=1&ids=2&ids=3
+   * @default 'brackets'
+   */
+  paramsSerializer?:
+    | 'brackets'
+    | 'comma'
+    | 'indices'
+    | 'repeat'
+    | AxiosRequestConfig<T>['paramsSerializer'];
+  /**
+   * 响应数据的返回方式。
+   * - raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
+   * - body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
+   * - data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
+   */
+  responseReturn?: 'body' | 'data' | 'raw';
+};
+```
+
 ### 请求示例
 
 #### GET 请求
diff --git a/apps/vben5/docs/src/guide/essentials/settings.md b/apps/vben5/docs/src/guide/essentials/settings.md
index 3669a771c..9b47c04d3 100644
--- a/apps/vben5/docs/src/guide/essentials/settings.md
+++ b/apps/vben5/docs/src/guide/essentials/settings.md
@@ -21,7 +21,7 @@
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- 以 `VITE_GLOB_*` 开头的的变量，在打包的时候，会被加入 `_app.config.js`配置文件当中. :::
+- 以 `VITE_GLOB_*` 开头的的变量，在打包的时候，会被加入 `_app.config.js`配置文件当中.
 
 :::
 
@@ -137,6 +137,27 @@ const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
   }
   ```
 
+- 在 `packages/effects/hooks/src/use-app-config.ts` 中，新增对应的配置项，如：
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // 生产环境下，直接使用 window._VBEN_ADMIN_PRO_APP_CONF_ 全局变量
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 到这里，就可以在项目内使用 `useAppConfig`方法获取到新增的配置项了。
 
 ```ts
@@ -185,8 +206,15 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 0,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 0,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
     defaultAvatar:
       'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
+    defaultHomePath: '/analytics',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -194,10 +222,11 @@ const defaultPreferences: Preferences = {
     isMobile: false,
     layout: 'sidebar-nav',
     locale: 'zh-CN',
-    loginExpiredMode: 'modal',
+    loginExpiredMode: 'page',
     name: 'Vben Admin',
     preferencesButtonPosition: 'auto',
     watermark: false,
+    zIndex: 200,
   },
   breadcrumb: {
     enable: true,
@@ -213,18 +242,23 @@ const defaultPreferences: Preferences = {
     enable: true,
     icp: '',
     icpLink: '',
+    settingShow: true,
   },
   footer: {
-    enable: true,
+    enable: false,
     fixed: false,
+    height: 32,
   },
   header: {
     enable: true,
+    height: 50,
     hidden: false,
+    menuAlign: 'start',
     mode: 'fixed',
   },
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -242,23 +276,31 @@ const defaultPreferences: Preferences = {
   sidebar: {
     autoActivateChild: false,
     collapsed: false,
+    collapsedButton: true,
     collapsedShowTitle: false,
+    collapseWidth: 60,
     enable: true,
     expandOnHover: true,
-    extraCollapse: true,
+    extraCollapse: false,
+    extraCollapsedWidth: 60,
+    fixedButton: true,
     hidden: false,
-    width: 230,
+    mixedWidth: 80,
+    width: 224,
   },
   tabbar: {
     draggable: true,
     enable: true,
-    height: 36,
+    height: 38,
     keepAlive: true,
+    maxCount: 0,
+    middleClickToClose: false,
     persist: true,
     showIcon: true,
     showMaximize: true,
     showMore: true,
     styleType: 'chrome',
+    wheelable: true,
   },
   theme: {
     builtinType: 'default',
@@ -269,7 +311,7 @@ const defaultPreferences: Preferences = {
     mode: 'dark',
     radius: '0.5',
     semiDarkHeader: false,
-    semiDarkSidebar: true,
+    semiDarkSidebar: false,
   },
   transition: {
     enable: true,
@@ -310,8 +352,22 @@ interface AppPreferences {
   compact: boolean;
   /** 是否开启内容紧凑模式 */
   contentCompact: ContentCompactType;
+  /** 内容紧凑宽度 */
+  contentCompactWidth: number;
+  /** 内容内边距 */
+  contentPadding: number;
+  /** 内容底部内边距 */
+  contentPaddingBottom: number;
+  /** 内容左侧内边距 */
+  contentPaddingLeft: number;
+  /** 内容右侧内边距 */
+  contentPaddingRight: number;
+  /** 内容顶部内边距 */
+  contentPaddingTop: number;
   // /** 应用默认头像 */
   defaultAvatar: string;
+  /** 默认首页地址 */
+  defaultHomePath: string;
   // /** 开启动态标题 */
   dynamicTitle: boolean;
   /** 是否开启检查更新 */
@@ -338,6 +394,8 @@ interface AppPreferences {
    * @zh_CN 是否开启水印
    */
   watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }
 
 interface BreadcrumbPreferences {
@@ -366,6 +424,8 @@ interface CopyrightPreferences {
   icp: string;
   /** 备案号链接 */
   icpLink: string;
+  /** 设置面板是否显示*/
+  settingShow?: boolean;
 }
 
 interface FooterPreferences {
@@ -373,13 +433,19 @@ interface FooterPreferences {
   enable: boolean;
   /** 底栏是否固定 */
   fixed: boolean;
+  /** 底栏高度 */
+  height: number;
 }
 
 interface HeaderPreferences {
   /** 顶栏是否启用 */
   enable: boolean;
+  /** 顶栏高度 */
+  height: number;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
+  /** 顶栏菜单位置 */
+  menuAlign: LayoutHeaderMenuAlignType;
   /** header显示模式 */
   mode: LayoutHeaderModeType;
 }
@@ -387,6 +453,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** logo是否可见 */
   enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
 }
@@ -401,18 +469,30 @@ interface NavigationPreferences {
 }
 
 interface SidebarPreferences {
+  /** 点击目录时自动激活子菜单   */
+  autoActivateChild: boolean;
   /** 侧边栏是否折叠 */
   collapsed: boolean;
+  /** 侧边栏折叠按钮是否可见 */
+  collapsedButton: boolean;
   /** 侧边栏折叠时，是否显示title */
   collapsedShowTitle: boolean;
+  /** 侧边栏折叠宽度 */
+  collapseWidth: number;
   /** 侧边栏是否可见 */
   enable: boolean;
   /** 菜单自动展开状态 */
   expandOnHover: boolean;
   /** 侧边栏扩展区域是否折叠 */
   extraCollapse: boolean;
+  /** 侧边栏扩展区域折叠宽度 */
+  extraCollapsedWidth: number;
+  /** 侧边栏固定按钮是否可见 */
+  fixedButton: boolean;
   /** 侧边栏是否隐藏 - css */
   hidden: boolean;
+  /** 混合侧边栏宽度 */
+  mixedWidth: number;
   /** 侧边栏宽度 */
   width: number;
 }
@@ -439,6 +519,10 @@ interface TabbarPreferences {
   height: number;
   /** 开启标签页缓存功能 */
   keepAlive: boolean;
+  /** 限制最大数量 */
+  maxCount: number;
+  /** 是否点击中键时关闭标签 */
+  middleClickToClose: boolean;
   /** 是否持久化标签 */
   persist: boolean;
   /** 是否开启多标签页图标 */
@@ -449,6 +533,8 @@ interface TabbarPreferences {
   showMore: boolean;
   /** 标签页风格 */
   styleType: TabsStyleType;
+  /** 是否开启鼠标滚轮响应 */
+  wheelable: boolean;
 }
 
 interface ThemePreferences {
@@ -538,4 +624,6 @@ interface Preferences {
 
 - `overridesPreferences`方法只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置。
 - 任何配置项都可以覆盖，只需要在`overridesPreferences`方法内覆盖即可，不要修改默认配置文件。
-- 更改配置后请清空缓存，否则可能不生效。:::
+- 更改配置后请清空缓存，否则可能不生效。
+
+:::
diff --git a/apps/vben5/docs/src/guide/in-depth/access.md b/apps/vben5/docs/src/guide/in-depth/access.md
index be7d2ba0a..bbce30a20 100644
--- a/apps/vben5/docs/src/guide/in-depth/access.md
+++ b/apps/vben5/docs/src/guide/in-depth/access.md
@@ -4,10 +4,11 @@ outline: deep
 
 # 权限
 
-框架内置了两种权限控制方式：
+框架内置了三种权限控制方式：
 
 - 通过用户角色来判断菜单或者按钮是否可以访问
 - 通过接口来判断菜单或者按钮是否可以访问
+- 混合模式：同时使用前端和后端权限控制
 
 ## 前端访问控制
 
@@ -114,8 +115,6 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
 ```ts
 const dashboardMenus = [
   {
-    // 这里固定写死 BasicLayout，不可更改
-    component: 'BasicLayout',
     meta: {
       order: -1,
       title: 'page.dashboard.title',
@@ -144,6 +143,16 @@ const dashboardMenus = [
       },
     ],
   },
+  {
+    name: 'Test',
+    path: '/test',
+    component: '/test/index',
+    meta: {
+      title: 'page.test',
+      // 部分特殊页面如果不需要基础布局（页面顶部和侧边栏），可将noBasicLayout设置为true
+      noBasicLayout: true,
+    },
+  },
 ];
 ```
 
@@ -151,6 +160,43 @@ const dashboardMenus = [
 
 到这里，就已经配置完成，你需要确保登录后，接口返回的菜单格式正确，否则无法访问。
 
+## 混合访问控制
+
+**实现原理**: 混合模式同时结合了前端访问控制和后端访问控制两种方式。系统会并行处理前端固定路由权限和后端动态菜单数据，最终将两部分路由合并，提供更灵活的权限控制方案。
+
+**优点**: 兼具前端控制的性能优势和后端控制的灵活性，适合复杂业务场景下的权限管理。
+
+### 步骤
+
+- 确保当前模式为混合访问控制模式
+
+调整对应应用目录下的`preferences.ts`，确保`accessMode='mixed'`。
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- 配置前端路由权限
+
+同[前端访问控制](#前端访问控制)模式的路由权限配置方式。
+
+- 配置后端菜单接口
+
+同[后端访问控制](#后端访问控制)模式的接口配置方式。
+
+- 确保角色和权限匹配
+
+需要同时满足前端路由权限配置和后端菜单数据返回的要求，确保用户角色与两种模式的权限配置都匹配。
+
+到这里，就已经配置完成，混合模式会自动合并前端和后端的路由，提供完整的权限控制功能。
+
 ## 按钮细粒度控制
 
 在某些情况下，我们需要对按钮进行细粒度的控制，我们可以借助接口或者角色来控制按钮的显示。
diff --git a/apps/vben5/docs/src/guide/in-depth/check-updates.md b/apps/vben5/docs/src/guide/in-depth/check-updates.md
index 4af9e333a..d4a74da61 100644
--- a/apps/vben5/docs/src/guide/in-depth/check-updates.md
+++ b/apps/vben5/docs/src/guide/in-depth/check-updates.md
@@ -46,3 +46,47 @@ async function getVersionTag() {
   }
 }
 ```
+
+## 替换为第三方库检查更新方式
+
+如果需要通过其他方式检查更新，例如使用其他版本控制方式（chunkHash、version.json）、使用`Web Worker`在后台轮询更新、自定义检查更新时机（不使用轮询），你可以通过JS库`version-polling`来实现。
+
+```bash
+pnpm add version-polling
+```
+
+以`apps/web-antd`项目为例，在项目入口文件`main.ts`或者`app.vue`添加以下代码
+
+```ts
+import { h } from 'vue';
+
+import { Button, notification } from 'ant-design-vue';
+import { createVersionPolling } from 'version-polling';
+
+createVersionPolling({
+  silent: import.meta.env.MODE === 'development', // 开发环境下不检测
+  onUpdate: (self) => {
+    const key = `open${Date.now()}`;
+    notification.info({
+      message: '提示',
+      description: '检测到网页有更新, 是否刷新页面加载最新版本？',
+      btn: () =>
+        h(
+          Button,
+          {
+            type: 'primary',
+            size: 'small',
+            onClick: () => {
+              notification.close(key);
+              self.onRefresh();
+            },
+          },
+          { default: () => '刷新' },
+        ),
+      key,
+      duration: null,
+      placement: 'bottomRight',
+    });
+  },
+});
+```
diff --git a/apps/vben5/docs/src/guide/in-depth/theme.md b/apps/vben5/docs/src/guide/in-depth/theme.md
index 82fb6fc50..3d11e0019 100644
--- a/apps/vben5/docs/src/guide/in-depth/theme.md
+++ b/apps/vben5/docs/src/guide/in-depth/theme.md
@@ -28,9 +28,10 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
 ```css
 :root {
-  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
-    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Default background color of <body />...etc */
   --background: 0 0% 100%;
@@ -322,9 +323,10 @@ type BuiltinThemeType =
 
 ```css
 :root {
-  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
-    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Default background color of <body />...etc */
   --background: 0 0% 100%;
diff --git a/apps/vben5/docs/src/guide/introduction/quick-start.md b/apps/vben5/docs/src/guide/introduction/quick-start.md
index 79410895f..6b451ddfc 100644
--- a/apps/vben5/docs/src/guide/introduction/quick-start.md
+++ b/apps/vben5/docs/src/guide/introduction/quick-start.md
@@ -58,7 +58,7 @@ git clone https://gitee.com/annsion/vue-vben-admin.git
 cd vue-vben-admin
 
 # 使用项目指定的pnpm版本进行依赖安装
-corepack enable
+npm i -g corepack
 
 # 安装依赖
 pnpm install
diff --git a/apps/vben5/docs/src/guide/introduction/thin.md b/apps/vben5/docs/src/guide/introduction/thin.md
index 4db0e3b3f..808840058 100644
--- a/apps/vben5/docs/src/guide/introduction/thin.md
+++ b/apps/vben5/docs/src/guide/introduction/thin.md
@@ -72,7 +72,7 @@ pnpm install
 
 ## 其他
 
-如果你想更进一步精简，你可以删除参考一下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
+如果你想更进一步精简，你可以删除参考以下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
 
 - `.changeset` 文件夹用于管理版本变更
 - `.github` 文件夹用于存放 GitHub 的配置文件
diff --git a/apps/vben5/docs/src/guide/other/faq.md b/apps/vben5/docs/src/guide/other/faq.md
index 02bbe8b06..33139c4df 100644
--- a/apps/vben5/docs/src/guide/other/faq.md
+++ b/apps/vben5/docs/src/guide/other/faq.md
@@ -18,7 +18,7 @@
 
 ## 依赖问题
 
-在 `Monorepo` 项目下，需要养成每次 `git pull`代码都要执行`pnpm install`的习惯，因为经常会有新的依赖包加入，项目在`.husky/git-merge`已经配置了自动执行`pnpm install`，但是有时候会出现问题，如果没有自动执行，建议手动执行一次。
+在 `Monorepo` 项目下，需要养成每次 `git pull`代码都要执行`pnpm install`的习惯，因为经常会有新的依赖包加入，项目在`lefthook.yml`已经配置了自动执行`pnpm install`，但是有时候会出现问题，如果没有自动执行，建议手动执行一次。
 
 ## 关于缓存更新问题
 
diff --git a/apps/vben5/docs/src/guide/project/standard.md b/apps/vben5/docs/src/guide/project/standard.md
index 3effad2ff..12a13da3b 100644
--- a/apps/vben5/docs/src/guide/project/standard.md
+++ b/apps/vben5/docs/src/guide/project/standard.md
@@ -33,8 +33,8 @@
 - [Prettier](https://prettier.io/) 用于代码格式化
 - [Commitlint](https://commitlint.js.org/) 用于检查 git 提交信息的规范
 - [Publint](https://publint.dev/) 用于检查 npm 包的规范
-- [Lint Staged](https://github.com/lint-staged/lint-staged) 用于在 git 提交前运行代码校验
 - [Cspell](https://cspell.org/) 用于检查拼写错误
+- [lefthook](https://github.com/evilmartians/lefthook) 用于管理 Git hooks，在提交前自动运行代码校验和格式化
 
 ## ESLint
 
@@ -148,18 +148,66 @@ cspell 配置文件为 `cspell.json`，可以根据项目需求进行修改。
 
 git hook 一般结合各种 lint，在 git 提交代码的时候进行代码风格校验，如果校验没通过，则不会进行提交。需要开发者自行修改后再次进行提交
 
-### husky
+### lefthook
 
-有一个问题就是校验会校验全部代码，但是我们只想校验我们自己提交的代码，这个时候就可以使用 husky。
+有一个问题就是校验会校验全部代码，但是我们只想校验我们自己提交的代码，这个时候就可以使用 lefthook。
 
-最有效的解决方案就是将 Lint 校验放到本地，常见做法是使用 husky 或者 pre-commit 在本地提交之前先做一次 Lint 校验。
+最有效的解决方案就是将 Lint 校验放到本地，常见做法是使用 lefthook 在本地提交之前先做一次 Lint 校验。
 
-项目在 `.husky` 内部定义了相应的 hooks
+项目在 `lefthook.yml` 内部定义了相应的 hooks：
 
-#### 如何关闭 Husky
+- `pre-commit`: 在提交前运行，用于代码格式化和检查
 
-如果你想关闭 Husky，直接删除 `.husky` 目录即可。
+  - `code-workspace`: 更新 VSCode 工作区配置
+  - `lint-md`: 格式化 Markdown 文件
+  - `lint-vue`: 格式化并检查 Vue 文件
+  - `lint-js`: 格式化并检查 JavaScript/TypeScript 文件
+  - `lint-style`: 格式化并检查样式文件
+  - `lint-package`: 格式化 package.json
+  - `lint-json`: 格式化其他 JSON 文件
 
-### lint-staged
+- `post-merge`: 在合并后运行，用于自动安装依赖
 
-用于自动修复提交文件风格问题,其配置文件为 `.lintstagedrc.mjs`，可以根据项目需求进行修改。
+  - `install`: 运行 `pnpm install` 安装新依赖
+
+- `commit-msg`: 在提交时运行，用于检查提交信息格式
+  - `commitlint`: 使用 commitlint 检查提交信息
+
+#### 如何关闭 lefthook
+
+如果你想关闭 lefthook，有两种方式：
+
+::: code-group
+
+```bash [临时关闭]
+git commit -m 'feat: add home page' --no-verify
+```
+
+```bash [永久关闭]
+# 删除 lefthook.yml 文件即可
+rm lefthook.yml
+```
+
+:::
+
+#### 如何修改 lefthook 配置
+
+如果你想修改 lefthook 的配置，可以编辑 `lefthook.yml` 文件。例如：
+
+```yaml
+pre-commit:
+  parallel: true # 并行执行任务
+  jobs:
+    - name: lint-js
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files}
+      glob: '*.{js,jsx,ts,tsx}'
+```
+
+其中：
+
+- `parallel`: 是否并行执行任务
+- `jobs`: 定义要执行的任务列表
+- `name`: 任务名称
+- `run`: 要执行的命令
+- `glob`: 匹配的文件模式
+- `{staged_files}`: 表示暂存的文件列表
diff --git a/apps/vben5/docs/src/guide/project/tailwindcss.md b/apps/vben5/docs/src/guide/project/tailwindcss.md
index cfab5964d..837076cbe 100644
--- a/apps/vben5/docs/src/guide/project/tailwindcss.md
+++ b/apps/vben5/docs/src/guide/project/tailwindcss.md
@@ -11,3 +11,7 @@
 当前只有对应的包下面存在 `tailwind.config.mjs` 文件才会启用 tailwindcss 的编译，否则不会启用 tailwindcss。如果你是纯粹的 SDK 包，不需要使用 tailwindcss，可以不用创建 `tailwind.config.mjs` 文件。
 
 :::
+
+## 提示
+
+现`tailwindcss`已至v4.x版本，使用方法与`tailwindcss: ^3.4.17`有差异，v4.0无法与v3.x版本兼容，在开发前请确认`package.json`中的`tailwindcss`版本。
diff --git a/apps/vben5/docs/src/index.md b/apps/vben5/docs/src/index.md
index 30aaa0aec..3a346d04c 100644
--- a/apps/vben5/docs/src/index.md
+++ b/apps/vben5/docs/src/index.md
@@ -20,6 +20,9 @@ hero:
     - theme: alt
       text: 在 GitHub 查看
       link: https://github.com/vbenjs/vue-vben-admin
+    - theme: alt
+      text: DeepWiki 文档
+      link: https://deepwiki.com/vbenjs/vue-vben-admin
 
 features:
   - icon: 🚀
diff --git a/apps/vben5/internal/lint-configs/commitlint-config/package.json b/apps/vben5/internal/lint-configs/commitlint-config/package.json
index a1645bb77..a137f947b 100644
--- a/apps/vben5/internal/lint-configs/commitlint-config/package.json
+++ b/apps/vben5/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts
index f6b767fec..44cf5b6e6 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts
@@ -174,7 +174,7 @@ export async function javascript(): Promise<Linter.Config[]> {
         ],
         'no-use-before-define': [
           'error',
-          { classes: false, functions: false, variables: true },
+          { classes: false, functions: false, variables: false },
         ],
         'no-useless-backreference': 'error',
         'no-useless-call': 'error',
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
index d4fd0bb8c..136bfa332 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
@@ -70,7 +70,7 @@ export async function perfectionist(): Promise<Linter.Config[]> {
           },
         ],
         'perfectionist/sort-objects': [
-          'error',
+          'off',
           {
             customGroups: {
               items: 'items',
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts
index d1c6521cf..a64c55aff 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts
@@ -10,7 +10,15 @@ export async function vue(): Promise<Linter.Config[]> {
     interopDefault(import('@typescript-eslint/parser')),
   ] as const);
 
+  const flatEssential = pluginVue.configs?.['flat/essential'] || [];
+  const flatStronglyRecommended =
+    pluginVue.configs?.['flat/strongly-recommended'] || [];
+  const flatRecommended = pluginVue.configs?.['flat/recommended'] || [];
+
   return [
+    ...flatEssential,
+    ...flatStronglyRecommended,
+    ...flatRecommended,
     {
       files: ['**/*.vue'],
       languageOptions: {
@@ -43,12 +51,9 @@ export async function vue(): Promise<Linter.Config[]> {
       plugins: {
         vue: pluginVue,
       },
-      processor: pluginVue.processors['.vue'],
+      processor: pluginVue.processors?.['.vue'],
       rules: {
-        ...pluginVue.configs.base.rules,
-        ...pluginVue.configs['vue3-essential'].rules,
-        ...pluginVue.configs['vue3-strongly-recommended'].rules,
-        ...pluginVue.configs['vue3-recommended'].rules,
+        ...pluginVue.configs?.base?.rules,
 
         'vue/attribute-hyphenation': [
           'error',
@@ -131,7 +136,6 @@ export async function vue(): Promise<Linter.Config[]> {
         'vue/require-default-prop': 'error',
         'vue/require-explicit-emits': 'error',
         'vue/require-prop-types': 'off',
-        'vue/script-setup-uses-vars': 'error',
         'vue/singleline-html-element-content-newline': 'off',
         'vue/space-infix-ops': 'error',
         'vue/space-unary-ops': ['error', { nonwords: false, words: true }],
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/custom-config.ts b/apps/vben5/internal/lint-configs/eslint-config/src/custom-config.ts
index 410b8991a..27c3e2fc9 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/custom-config.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/custom-config.ts
@@ -28,6 +28,13 @@ const customConfig: Linter.Config[] = [
       'perfectionist/sort-objects': 'off',
     },
   },
+  {
+    files: ['**/**.vue'],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'perfectionist/sort-objects': 'off',
+    },
+  },
   {
     // apps内部的一些基础规则
     files: ['apps/**/**'],
@@ -156,11 +163,6 @@ const customConfig: Linter.Config[] = [
       'no-console': 'off',
     },
   },
-  {
-    // abp 包规则
-    files: ['packages/@abp/**'],
-    rules: {},
-  },
 ];
 
 export { customConfig };
diff --git a/apps/vben5/internal/lint-configs/stylelint-config/index.mjs b/apps/vben5/internal/lint-configs/stylelint-config/index.mjs
index 7ef175cca..08ac82380 100644
--- a/apps/vben5/internal/lint-configs/stylelint-config/index.mjs
+++ b/apps/vben5/internal/lint-configs/stylelint-config/index.mjs
@@ -43,6 +43,7 @@ export default {
     'stylelint-scss',
   ],
   rules: {
+    'at-rule-no-deprecated': null,
     'at-rule-no-unknown': [
       true,
       {
diff --git a/apps/vben5/internal/lint-configs/stylelint-config/package.json b/apps/vben5/internal/lint-configs/stylelint-config/package.json
index da7f4e8d1..8e2a97c2c 100644
--- a/apps/vben5/internal/lint-configs/stylelint-config/package.json
+++ b/apps/vben5/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/node-utils/package.json b/apps/vben5/internal/node-utils/package.json
index 2ad95772b..8b8db7454 100644
--- a/apps/vben5/internal/node-utils/package.json
+++ b/apps/vben5/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/tailwind-config/package.json b/apps/vben5/internal/tailwind-config/package.json
index 9737ab338..8506891b5 100644
--- a/apps/vben5/internal/tailwind-config/package.json
+++ b/apps/vben5/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -12,7 +12,7 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "stub": "pnpm unbuild"
+    "stub": "pnpm unbuild --stub"
   },
   "files": [
     "dist"
diff --git a/apps/vben5/internal/tailwind-config/tsconfig.json b/apps/vben5/internal/tailwind-config/tsconfig.json
index b2ec3b61e..dbd3bcc8d 100644
--- a/apps/vben5/internal/tailwind-config/tsconfig.json
+++ b/apps/vben5/internal/tailwind-config/tsconfig.json
@@ -1,6 +1,9 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@vben/tsconfig/node.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  },
   "include": ["src"],
   "exclude": ["node_modules"]
 }
diff --git a/apps/vben5/internal/tsconfig/package.json b/apps/vben5/internal/tsconfig/package.json
index efeef619c..44ee3f1b0 100644
--- a/apps/vben5/internal/tsconfig/package.json
+++ b/apps/vben5/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/vite-config/package.json b/apps/vben5/internal/vite-config/package.json
index 708d519cd..d7ba6a655 100644
--- a/apps/vben5/internal/vite-config/package.json
+++ b/apps/vben5/internal/vite-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vite-config",
-  "version": "5.5.3",
+  "version": "5.5.6",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/vite-config/src/typing.ts b/apps/vben5/internal/vite-config/src/typing.ts
index 31683cc75..f730bdb91 100644
--- a/apps/vben5/internal/vite-config/src/typing.ts
+++ b/apps/vben5/internal/vite-config/src/typing.ts
@@ -3,149 +3,328 @@ import type { ConfigEnv, PluginOption, UserConfig } from 'vite';
 import type { PluginOptions } from 'vite-plugin-dts';
 import type { Options as PwaPluginOptions } from 'vite-plugin-pwa';
 
+/**
+ * ImportMap 配置接口
+ * @description 用于配置模块导入映射，支持自定义导入路径和范围
+ * @example
+ * ```typescript
+ * {
+ *   imports: {
+ *     'vue': 'https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.js'
+ *   },
+ *   scopes: {
+ *     'https://site.com/': {
+ *       'vue': 'https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.js'
+ *     }
+ *   }
+ * }
+ * ```
+ */
 interface IImportMap {
+  /** 模块导入映射 */
   imports?: Record<string, string>;
+  /** 作用域特定的导入映射 */
   scopes?: {
     [scope: string]: Record<string, string>;
   };
 }
+
+/**
+ * 打印插件配置选项
+ * @description 用于配置控制台打印信息
+ */
 interface PrintPluginOptions {
   /**
-   * 打印的数据
+   * 打印的数据映射
+   * @description 键值对形式的数据，将在控制台打印
+   * @example
+   * ```typescript
+   * {
+   *   'App Version': '1.0.0',
+   *   'Build Time': '2024-01-01'
+   * }
+   * ```
    */
   infoMap?: Record<string, string | undefined>;
 }
 
+/**
+ * Nitro Mock 插件配置选项
+ * @description 用于配置 Nitro Mock 服务器的行为
+ */
 interface NitroMockPluginOptions {
   /**
-   * mock server 包名
+   * Mock 服务器包名
+   * @default '@vbenjs/nitro-mock'
    */
   mockServerPackage?: string;
 
   /**
-   * mock 服务端口
+   * Mock 服务端口
+   * @default 3000
    */
   port?: number;
 
   /**
-   * mock 日志是否打印
+   * 是否打印 Mock 日志
+   * @default false
    */
   verbose?: boolean;
 }
 
+/**
+ * 归档插件配置选项
+ * @description 用于配置构建产物的压缩归档
+ */
 interface ArchiverPluginOptions {
   /**
    * 输出文件名
-   * @default dist
+   * @default 'dist'
    */
   name?: string;
   /**
    * 输出目录
-   * @default .
+   * @default '.'
    */
   outputDir?: string;
 }
 
 /**
- * importmap 插件配置
+ * ImportMap 插件配置
+ * @description 用于配置模块的 CDN 导入
  */
 interface ImportmapPluginOptions {
   /**
    * CDN 供应商
-   * @default jspm.io
+   * @default 'jspm.io'
+   * @description 支持 esm.sh 和 jspm.io 两种 CDN 供应商
    */
   defaultProvider?: 'esm.sh' | 'jspm.io';
-  /** importmap 配置 */
+  /**
+   * ImportMap 配置数组
+   * @description 配置需要从 CDN 导入的包
+   * @example
+   * ```typescript
+   * [
+   *   { name: 'vue' },
+   *   { name: 'pinia', range: '^2.0.0' }
+   * ]
+   * ```
+   */
   importmap?: Array<{ name: string; range?: string }>;
-  /** 手动配置importmap */
+  /**
+   * 手动配置 ImportMap
+   * @description 自定义 ImportMap 配置
+   */
   inputMap?: IImportMap;
 }
 
 /**
- * 用于判断是否需要加载插件
+ * 条件插件配置
+ * @description 用于根据条件动态加载插件
  */
 interface ConditionPlugin {
-  // 判断条件
+  /**
+   * 判断条件
+   * @description 当条件为 true 时加载插件
+   */
   condition?: boolean;
-  // 插件对象
+  /**
+   * 插件对象
+   * @description 返回插件数组或 Promise
+   */
   plugins: () => PluginOption[] | PromiseLike<PluginOption[]>;
 }
 
+/**
+ * 通用插件配置选项
+ * @description 所有插件共用的基础配置
+ */
 interface CommonPluginOptions {
-  /** 是否开启devtools */
+  /**
+   * 是否开启开发工具
+   * @default false
+   */
   devtools?: boolean;
-  /** 环境变量 */
+  /**
+   * 环境变量
+   * @description 自定义环境变量
+   */
   env?: Record<string, any>;
-  /** 是否注入metadata */
+  /**
+   * 是否注入元数据
+   * @default true
+   */
   injectMetadata?: boolean;
-  /** 是否构建模式 */
+  /**
+   * 是否为构建模式
+   * @default false
+   */
   isBuild?: boolean;
-  /** 构建模式 */
+  /**
+   * 构建模式
+   * @default 'development'
+   */
   mode?: string;
-  /** 开启依赖分析 */
+  /**
+   * 是否开启依赖分析
+   * @default false
+   * @description 使用 rollup-plugin-visualizer 分析依赖
+   */
   visualizer?: boolean | PluginVisualizerOptions;
 }
 
+/**
+ * 应用插件配置选项
+ * @description 用于配置应用构建时的插件选项
+ */
 interface ApplicationPluginOptions extends CommonPluginOptions {
-  /** 开启后，会在打包dist同级生成dist.zip */
+  /**
+   * 是否开启压缩归档
+   * @default false
+   * @description 开启后会在打包目录生成 zip 文件
+   */
   archiver?: boolean;
-  /** 压缩归档插件配置 */
+  /**
+   * 压缩归档插件配置
+   * @description 配置压缩归档的行为
+   */
   archiverPluginOptions?: ArchiverPluginOptions;
-  /** 开启 gzip|brotli 压缩 */
+  /**
+   * 是否开启压缩
+   * @default false
+   * @description 支持 gzip 和 brotli 压缩
+   */
   compress?: boolean;
-  /** 压缩类型 */
+  /**
+   * 压缩类型
+   * @default ['gzip']
+   * @description 可选的压缩类型
+   */
   compressTypes?: ('brotli' | 'gzip')[];
-  /** 在构建的时候抽离配置文件 */
+  /**
+   * 是否抽离配置文件
+   * @default false
+   * @description 在构建时抽离配置文件
+   */
   extraAppConfig?: boolean;
-  /** 是否开启html插件  */
+  /**
+   * 是否开启 HTML 插件
+   * @default true
+   */
   html?: boolean;
-  /** 是否开启i18n */
+  /**
+   * 是否开启国际化
+   * @default false
+   */
   i18n?: boolean;
-  /** 是否开启 importmap CDN  */
+  /**
+   * 是否开启 ImportMap CDN
+   * @default false
+   */
   importmap?: boolean;
-  /** importmap 插件配置 */
+  /**
+   * ImportMap 插件配置
+   */
   importmapOptions?: ImportmapPluginOptions;
-  /** 是否注入app loading */
+  /**
+   * 是否注入应用加载动画
+   * @default true
+   */
   injectAppLoading?: boolean;
-  /** 是否注入全局scss */
+  /**
+   * 是否注入全局 SCSS
+   * @default true
+   */
   injectGlobalScss?: boolean;
-  /** 是否注入版权信息 */
+  /**
+   * 是否注入版权信息
+   * @default true
+   */
   license?: boolean;
-  /** 是否开启nitro mock */
+  /**
+   * 是否开启 Nitro Mock
+   * @default false
+   */
   nitroMock?: boolean;
-  /** nitro mock 插件配置 */
+  /**
+   * Nitro Mock 插件配置
+   */
   nitroMockOptions?: NitroMockPluginOptions;
-  /** 开启控制台自定义打印 */
+  /**
+   * 是否开启控制台打印
+   * @default false
+   */
   print?: boolean;
-  /** 打印插件配置 */
+  /**
+   * 打印插件配置
+   */
   printInfoMap?: PrintPluginOptions['infoMap'];
-  /** 是否开启pwa */
+  /**
+   * 是否开启 PWA
+   * @default false
+   */
   pwa?: boolean;
-  /** pwa 插件配置 */
+  /**
+   * PWA 插件配置
+   */
   pwaOptions?: Partial<PwaPluginOptions>;
-  /** 是否开启vxe-table懒加载 */
+  /**
+   * 是否开启 VXE Table 懒加载
+   * @default false
+   */
   vxeTableLazyImport?: boolean;
 }
 
+/**
+ * 库插件配置选项
+ * @description 用于配置库构建时的插件选项
+ */
 interface LibraryPluginOptions extends CommonPluginOptions {
-  /** 开启 dts 输出 */
+  /**
+   * 是否开启 DTS 输出
+   * @default true
+   * @description 生成 TypeScript 类型声明文件
+   */
   dts?: boolean | PluginOptions;
 }
 
+/**
+ * 应用配置选项类型
+ */
 type ApplicationOptions = ApplicationPluginOptions;
 
+/**
+ * 库配置选项类型
+ */
 type LibraryOptions = LibraryPluginOptions;
 
+/**
+ * 应用配置定义函数类型
+ * @description 用于定义应用构建配置
+ */
 type DefineApplicationOptions = (config?: ConfigEnv) => Promise<{
+  /** 应用插件配置 */
   application?: ApplicationOptions;
+  /** Vite 配置 */
   vite?: UserConfig;
 }>;
 
+/**
+ * 库配置定义函数类型
+ * @description 用于定义库构建配置
+ */
 type DefineLibraryOptions = (config?: ConfigEnv) => Promise<{
+  /** 库插件配置 */
   library?: LibraryOptions;
+  /** Vite 配置 */
   vite?: UserConfig;
 }>;
 
+/**
+ * 配置定义类型
+ * @description 应用或库的配置定义
+ */
 type DefineConfig = DefineApplicationOptions | DefineLibraryOptions;
 
 export type {
diff --git a/apps/vben5/lefthook.yml b/apps/vben5/lefthook.yml
new file mode 100644
index 000000000..728017416
--- /dev/null
+++ b/apps/vben5/lefthook.yml
@@ -0,0 +1,76 @@
+# EXAMPLE USAGE:
+#
+#   Refer for explanation to following link:
+#   https://lefthook.dev/configuration/
+#
+# pre-push:
+#   jobs:
+#     - name: packages audit
+#       tags:
+#         - frontend
+#         - security
+#       run: yarn audit
+#
+#     - name: gems audit
+#       tags:
+#         - backend
+#         - security
+#       run: bundle audit
+#
+# pre-commit:
+#   parallel: true
+#   jobs:
+#     - run: yarn eslint {staged_files}
+#       glob: "*.{js,ts,jsx,tsx}"
+#
+#     - name: rubocop
+#       glob: "*.rb"
+#       exclude:
+#         - config/application.rb
+#         - config/routes.rb
+#       run: bundle exec rubocop --force-exclusion {all_files}
+#
+#     - name: govet
+#       files: git ls-files -m
+#       glob: "*.go"
+#       run: go vet {files}
+#
+#     - script: "hello.js"
+#       runner: node
+#
+#     - script: "hello.go"
+#       runner: go run
+
+pre-commit:
+  parallel: true
+  commands:
+    code-workspace:
+      run: pnpm vsh code-workspace --auto-commit
+    lint-md:
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files}
+      glob: '*.md'
+    lint-vue:
+      run: pnpm prettier --write {staged_files} && pnpm eslint --cache --fix {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}
+      glob: '*.vue'
+    lint-js:
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files} && pnpm eslint --cache --fix {staged_files}
+      glob: '*.{js,jsx,ts,tsx}'
+    lint-style:
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}
+      glob: '*.{scss,less,styl,html,vue,css}'
+    lint-package:
+      run: pnpm prettier --cache --write {staged_files}
+      glob: 'package.json'
+    lint-json:
+      run: pnpm prettier --cache --write --parser json {staged_files}
+      glob: '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}'
+
+post-merge:
+  commands:
+    install:
+      run: pnpm install
+
+commit-msg:
+  commands:
+    commitlint:
+      run: pnpm exec commitlint --edit $1
diff --git a/apps/vben5/package.json b/apps/vben5/package.json
index 4b6b0a33f..c72e052f1 100644
--- a/apps/vben5/package.json
+++ b/apps/vben5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "keywords": [
     "monorepo",
@@ -53,14 +53,14 @@
     "lint": "vsh lint",
     "postinstall": "pnpm -r run stub --if-present",
     "preinstall": "npx only-allow pnpm",
-    "prepare": "is-ci || husky",
     "preview": "turbo-run preview",
     "publint": "vsh publint",
     "reinstall": "pnpm clean --del-lock && pnpm install",
     "test:unit": "vitest run --dom",
     "test:e2e": "turbo run test:e2e",
     "update:deps": "npx taze -r -w",
-    "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile"
+    "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile",
+    "catalog": "pnpx codemod pnpm/catalog"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "catalog:",
@@ -84,9 +84,8 @@
     "cross-env": "catalog:",
     "cspell": "catalog:",
     "happy-dom": "catalog:",
-    "husky": "catalog:",
     "is-ci": "catalog:",
-    "lint-staged": "catalog:",
+    "lefthook": "catalog:",
     "playwright": "catalog:",
     "rimraf": "catalog:",
     "tailwindcss": "catalog:",
@@ -102,7 +101,7 @@
     "node": ">=20.10.0",
     "pnpm": ">=9.12.0"
   },
-  "packageManager": "pnpm@9.15.5",
+  "packageManager": "pnpm@10.10.0",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
@@ -113,7 +112,7 @@
       "@ast-grep/napi": "catalog:",
       "@ctrl/tinycolor": "catalog:",
       "clsx": "catalog:",
-      "esbuild": "0.24.0",
+      "esbuild": "0.25.3",
       "pinia": "catalog:",
       "vue": "catalog:"
     },
diff --git a/apps/vben5/packages/@abp/features/src/components/features/FeatureModal.vue b/apps/vben5/packages/@abp/features/src/components/features/FeatureModal.vue
index cc8f0bd06..57bd213f5 100644
--- a/apps/vben5/packages/@abp/features/src/components/features/FeatureModal.vue
+++ b/apps/vben5/packages/@abp/features/src/components/features/FeatureModal.vue
@@ -11,6 +11,7 @@ import { $t } from '@vben/locales';
 
 import { useValidation } from '@abp/core';
 import {
+  Card,
   Checkbox,
   Form,
   Input,
@@ -204,59 +205,78 @@ async function onSubmit() {
 <template>
   <Modal :title="getModalTitle">
     <Form :model="formModel" ref="form">
-      <Tabs tab-position="left" v-model:active-key="activeTabKey">
+      <Tabs tab-position="left" type="card" v-model:active-key="activeTabKey">
         <TabPane
           v-for="(group, gi) in formModel.groups"
           :key="group.name"
           :tab="group.displayName"
         >
-          <template v-for="(feature, fi) in group.features" :key="feature.name">
-            <FormItem
-              v-if="feature.valueType !== null"
-              :name="['groups', gi, 'features', fi, 'value']"
-              :label="feature.displayName"
-              :extra="feature.description"
-              :rules="
-                createRules(feature.displayName, feature.valueType.validator)
-              "
+          <Card :bordered="false" :title="group.displayName">
+            <template
+              v-for="(feature, fi) in group.features"
+              :key="feature.name"
             >
-              <Checkbox
-                v-if="
-                  feature.valueType.name === 'ToggleStringValueType' &&
-                  feature.valueType.validator.name === 'BOOLEAN'
+              <FormItem
+                v-if="feature.valueType !== null"
+                :name="['groups', gi, 'features', fi, 'value']"
+                :label="feature.displayName"
+                :extra="feature.description"
+                :rules="
+                  createRules(feature.displayName, feature.valueType.validator)
                 "
-                v-model:checked="feature.value"
               >
-                {{ feature.displayName }}
-              </Checkbox>
-              <div
-                v-else-if="feature.valueType.name === 'FreeTextStringValueType'"
-              >
-                <InputNumber
-                  v-if="feature.valueType.validator.name === 'NUMERIC'"
-                  style="width: 100%"
-                  v-model:value="feature.value"
-                />
-                <Input
-                  v-else
+                <Checkbox
+                  v-if="
+                    feature.valueType.name === 'ToggleStringValueType' &&
+                    feature.valueType.validator.name === 'BOOLEAN'
+                  "
+                  v-model:checked="feature.value"
+                >
+                  {{ feature.displayName }}
+                </Checkbox>
+                <div
+                  v-else-if="
+                    feature.valueType.name === 'FreeTextStringValueType'
+                  "
+                >
+                  <InputNumber
+                    v-if="feature.valueType.validator.name === 'NUMERIC'"
+                    style="width: 100%"
+                    v-model:value="feature.value"
+                  />
+                  <Input
+                    v-else
+                    v-model:value="feature.value"
+                    autocomplete="off"
+                  />
+                </div>
+                <Select
+                  v-else-if="
+                    feature.valueType.name === 'SelectionStringValueType'
+                  "
                   v-model:value="feature.value"
-                  autocomplete="off"
+                  :options="feature.valueType.itemSource.items"
+                  :field-names="{ label: 'displayName', value: 'value' }"
                 />
-              </div>
-              <Select
-                v-else-if="
-                  feature.valueType.name === 'SelectionStringValueType'
-                "
-                v-model:value="feature.value"
-                :options="feature.valueType.itemSource.items"
-                :field-names="{ label: 'displayName', value: 'value' }"
-              />
-            </FormItem>
-          </template>
+              </FormItem>
+            </template>
+          </Card>
         </TabPane>
       </Tabs>
     </Form>
   </Modal>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+:deep(.ant-tabs) {
+  height: 34rem;
+
+  .ant-tabs-nav {
+    width: 14rem;
+  }
+
+  .ant-tabs-content-holder {
+    overflow: hidden auto !important;
+  }
+}
+</style>
diff --git a/apps/vben5/packages/@abp/platform/src/components/menus/MenuAllotModal.vue b/apps/vben5/packages/@abp/platform/src/components/menus/MenuAllotModal.vue
index 0bd5e7538..d72c1b19d 100644
--- a/apps/vben5/packages/@abp/platform/src/components/menus/MenuAllotModal.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/menus/MenuAllotModal.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
+
 import type { MenuSubject } from './types';
 
 import { ref } from 'vue';
@@ -29,6 +31,7 @@ const props = defineProps<{
 }>();
 
 const checkedMenuIds = ref<string[]>([]);
+const expandMenuIds = ref<string[]>([]);
 
 const { getAllApi: getAllMenusApi } = useMenusApi();
 const { getAllApi: getUserMenusApi, setMenusApi: setUserMenusApi } =
@@ -96,6 +99,7 @@ const [Form, formApi] = useVbenForm({
           title: 'displayName',
         },
         onCheck: onMenuChecked,
+        onSelect: onExpandNode,
       },
       dependencies: {
         if(values) {
@@ -114,8 +118,30 @@ const [Modal, modalApi] = useVbenModal({
   onConfirm: async () => {
     await formApi.validateAndSubmitForm();
   },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      expandMenuIds.value = [];
+    }
+  },
 });
 
+function onExpandNode(_keys: any, info: { node: EventDataNode }) {
+  const nodeKey = String(info.node.key);
+  const index = expandMenuIds.value.indexOf(nodeKey);
+  expandMenuIds.value =
+    index === -1
+      ? [...expandMenuIds.value, nodeKey]
+      : expandMenuIds.value.filter((key) => key !== nodeKey);
+  formApi.updateSchema([
+    {
+      fieldName: 'menuIds',
+      componentProps: {
+        expandedKeys: expandMenuIds.value,
+      },
+    },
+  ]);
+}
+
 function onMenuChecked(checkedKeys: { checked: string[] }) {
   checkedMenuIds.value = checkedKeys.checked;
 }
@@ -126,6 +152,7 @@ async function onInitMenus(framework?: string) {
       {
         componentProps: {
           treeData: [],
+          expandedKeys: [],
         },
         fieldName: 'menuIds',
       },
@@ -164,6 +191,7 @@ async function onInitMenus(framework?: string) {
     {
       componentProps: {
         treeData,
+        expandedKeys: [],
       },
       fieldName: 'menuIds',
     },
diff --git a/apps/vben5/packages/@core/base/design/package.json b/apps/vben5/packages/@core/base/design/package.json
index ee1968114..33e924749 100644
--- a/apps/vben5/packages/@core/base/design/package.json
+++ b/apps/vben5/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css b/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css
index d34541e94..388104158 100644
--- a/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css
+++ b/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css
@@ -19,7 +19,7 @@
   /* --popover: 222.82deg 8.43% 12.27%; */
 
   /* 弹出层的背景色与主题区域背景色太过接近  */
-  --popover: 0 0 14.2%;
+  --popover: 0 0% 14.2%;
   --popover-foreground: 210 40% 98%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
diff --git a/apps/vben5/packages/@core/base/design/src/design-tokens/default.css b/apps/vben5/packages/@core/base/design/src/design-tokens/default.css
index 6fb71f176..64679f854 100644
--- a/apps/vben5/packages/@core/base/design/src/design-tokens/default.css
+++ b/apps/vben5/packages/@core/base/design/src/design-tokens/default.css
@@ -1,9 +1,10 @@
 :root {
   /** 弹出层的基础层级 **/
   --popup-z-index: 2000;
-  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
-    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Default background color of <body />...etc */
   --background: 0 0% 100%;
diff --git a/apps/vben5/packages/@core/base/icons/package.json b/apps/vben5/packages/@core/base/icons/package.json
index cd8b38962..9a349883c 100644
--- a/apps/vben5/packages/@core/base/icons/package.json
+++ b/apps/vben5/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/base/icons/src/lucide.ts b/apps/vben5/packages/@core/base/icons/src/lucide.ts
index 2cb21b125..70e6a426f 100644
--- a/apps/vben5/packages/@core/base/icons/src/lucide.ts
+++ b/apps/vben5/packages/@core/base/icons/src/lucide.ts
@@ -14,7 +14,11 @@ export {
   ChevronRight,
   ChevronsLeft,
   ChevronsRight,
+  Circle,
+  CircleAlert,
+  CircleCheckBig,
   CircleHelp,
+  CircleX,
   Copy,
   CornerDownLeft,
   Ellipsis,
@@ -47,11 +51,15 @@ export {
   PanelRight,
   Pin,
   PinOff,
+  Plus,
   RotateCw,
   Search,
   SearchX,
   Settings,
   Shrink,
+  Square,
+  SquareCheckBig,
+  SquareMinus,
   Sun,
   SunMoon,
   SwatchBook,
diff --git a/apps/vben5/packages/@core/base/shared/package.json b/apps/vben5/packages/@core/base/shared/package.json
index bc1c6f3e4..b02cc6e47 100644
--- a/apps/vben5/packages/@core/base/shared/package.json
+++ b/apps/vben5/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -88,6 +88,7 @@
     "lodash.clonedeep": "catalog:",
     "lodash.get": "catalog:",
     "lodash.isequal": "catalog:",
+    "lodash.set": "catalog:",
     "nprogress": "catalog:",
     "tailwind-merge": "catalog:",
     "theme-colors": "catalog:"
@@ -96,6 +97,7 @@
     "@types/lodash.clonedeep": "catalog:",
     "@types/lodash.get": "catalog:",
     "@types/lodash.isequal": "catalog:",
+    "@types/lodash.set": "catalog:",
     "@types/nprogress": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/index.ts b/apps/vben5/packages/@core/base/shared/src/utils/index.ts
index 1bf09c713..925af1c12 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/index.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/index.ts
@@ -17,3 +17,4 @@ export * from './window';
 export { default as cloneDeep } from 'lodash.clonedeep';
 export { default as get } from 'lodash.get';
 export { default as isEqual } from 'lodash.isequal';
+export { default as set } from 'lodash.set';
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/inference.ts b/apps/vben5/packages/@core/base/shared/src/utils/inference.ts
index a9ace62c5..195d071b7 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/inference.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/inference.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line vue/prefer-import-from-vue
 import { isFunction, isObject, isString } from '@vue/shared';
 
 /**
diff --git a/apps/vben5/packages/@core/base/typings/package.json b/apps/vben5/packages/@core/base/typings/package.json
index f453b6ec4..e2ab18701 100644
--- a/apps/vben5/packages/@core/base/typings/package.json
+++ b/apps/vben5/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/base/typings/src/app.d.ts b/apps/vben5/packages/@core/base/typings/src/app.d.ts
index 02da2466a..d2e86aec4 100644
--- a/apps/vben5/packages/@core/base/typings/src/app.d.ts
+++ b/apps/vben5/packages/@core/base/typings/src/app.d.ts
@@ -60,8 +60,9 @@ type BreadcrumbStyleType = 'background' | 'normal';
  * 权限模式
  * backend 后端权限模式
  * frontend 前端权限模式
+ * mixed 混合权限模式
  */
-type AccessModeType = 'backend' | 'frontend';
+type AccessModeType = 'backend' | 'frontend' | 'mixed';
 
 /**
  * 导航风格
diff --git a/apps/vben5/packages/@core/base/typings/src/tabs.ts b/apps/vben5/packages/@core/base/typings/src/tabs.ts
index c78a90c5b..58f7d264c 100644
--- a/apps/vben5/packages/@core/base/typings/src/tabs.ts
+++ b/apps/vben5/packages/@core/base/typings/src/tabs.ts
@@ -1,3 +1,8 @@
 import type { RouteLocationNormalized } from 'vue-router';
 
-export type TabDefinition = RouteLocationNormalized;
+export interface TabDefinition extends RouteLocationNormalized {
+  /**
+   * 标签页的key
+   */
+  key?: string;
+}
diff --git a/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts b/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts
index 099e8171a..1577520e6 100644
--- a/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts
+++ b/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts
@@ -43,6 +43,10 @@ interface RouteMeta {
     | 'success'
     | 'warning'
     | string;
+  /**
+   * 路由的完整路径作为key（默认true）
+   */
+  fullPathKey?: boolean;
   /**
    * 当前路由的子级在菜单中不展现
    * @default false
diff --git a/apps/vben5/packages/@core/composables/package.json b/apps/vben5/packages/@core/composables/package.json
index 1a8df3557..08db5106f 100644
--- a/apps/vben5/packages/@core/composables/package.json
+++ b/apps/vben5/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/composables/src/use-simple-locale/messages.ts b/apps/vben5/packages/@core/composables/src/use-simple-locale/messages.ts
index 4b1eca29b..efc5c3cc7 100644
--- a/apps/vben5/packages/@core/composables/src/use-simple-locale/messages.ts
+++ b/apps/vben5/packages/@core/composables/src/use-simple-locale/messages.ts
@@ -6,6 +6,7 @@ export const messages: Record<Locale, Record<string, string>> = {
     collapse: 'Collapse',
     confirm: 'Confirm',
     expand: 'Expand',
+    prompt: 'Prompt',
     reset: 'Reset',
     submit: 'Submit',
   },
@@ -14,6 +15,7 @@ export const messages: Record<Locale, Record<string, string>> = {
     collapse: '收起',
     confirm: '确认',
     expand: '展开',
+    prompt: '提示',
     reset: '重置',
     submit: '提交',
   },
diff --git a/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index d537d22e9..1cccbbb27 100644
--- a/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -10,7 +10,14 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "colorWeakMode": false,
     "compact": false,
     "contentCompact": "wide",
+    "contentCompactWidth": 1200,
+    "contentPadding": 0,
+    "contentPaddingBottom": 0,
+    "contentPaddingLeft": 0,
+    "contentPaddingRight": 0,
+    "contentPaddingTop": 0,
     "defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
+    "defaultHomePath": "/analytics",
     "dynamicTitle": true,
     "enableCheckUpdates": true,
     "enablePreferences": true,
@@ -22,6 +29,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "name": "Vben Admin",
     "preferencesButtonPosition": "auto",
     "watermark": false,
+    "zIndex": 200,
   },
   "breadcrumb": {
     "enable": true,
@@ -42,15 +50,18 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   "footer": {
     "enable": false,
     "fixed": false,
+    "height": 32,
   },
   "header": {
     "enable": true,
+    "height": 50,
     "hidden": false,
     "menuAlign": "start",
     "mode": "fixed",
   },
   "logo": {
     "enable": true,
+    "fit": "contain",
     "source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
   },
   "navigation": {
@@ -67,12 +78,17 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   },
   "sidebar": {
     "autoActivateChild": false,
+    "collapseWidth": 60,
     "collapsed": false,
+    "collapsedButton": true,
     "collapsedShowTitle": false,
     "enable": true,
     "expandOnHover": true,
     "extraCollapse": false,
+    "extraCollapsedWidth": 60,
+    "fixedButton": true,
     "hidden": false,
+    "mixedWidth": 80,
     "width": 224,
   },
   "tabbar": {
diff --git a/apps/vben5/packages/@core/preferences/package.json b/apps/vben5/packages/@core/preferences/package.json
index 1ab498a8c..726b473db 100644
--- a/apps/vben5/packages/@core/preferences/package.json
+++ b/apps/vben5/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/preferences/src/config.ts b/apps/vben5/packages/@core/preferences/src/config.ts
index 2c3f65868..835eed557 100644
--- a/apps/vben5/packages/@core/preferences/src/config.ts
+++ b/apps/vben5/packages/@core/preferences/src/config.ts
@@ -9,8 +9,15 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 0,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 0,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
     defaultAvatar:
       'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
+    defaultHomePath: '/analytics',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -22,6 +29,7 @@ const defaultPreferences: Preferences = {
     name: 'Vben Admin',
     preferencesButtonPosition: 'auto',
     watermark: false,
+    zIndex: 200,
   },
   breadcrumb: {
     enable: true,
@@ -42,15 +50,19 @@ const defaultPreferences: Preferences = {
   footer: {
     enable: false,
     fixed: false,
+    height: 32,
   },
   header: {
     enable: true,
+    height: 50,
     hidden: false,
     menuAlign: 'start',
     mode: 'fixed',
   },
+
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -68,11 +80,16 @@ const defaultPreferences: Preferences = {
   sidebar: {
     autoActivateChild: false,
     collapsed: false,
+    collapsedButton: true,
     collapsedShowTitle: false,
+    collapseWidth: 60,
     enable: true,
     expandOnHover: true,
     extraCollapse: false,
+    extraCollapsedWidth: 60,
+    fixedButton: true,
     hidden: false,
+    mixedWidth: 80,
     width: 224,
   },
   tabbar: {
diff --git a/apps/vben5/packages/@core/preferences/src/preferences.ts b/apps/vben5/packages/@core/preferences/src/preferences.ts
index 5c9582675..23c5f8bef 100644
--- a/apps/vben5/packages/@core/preferences/src/preferences.ts
+++ b/apps/vben5/packages/@core/preferences/src/preferences.ts
@@ -198,9 +198,16 @@ class PreferenceManager {
     window
       .matchMedia('(prefers-color-scheme: dark)')
       .addEventListener('change', ({ matches: isDark }) => {
-        this.updatePreferences({
-          theme: { mode: isDark ? 'dark' : 'light' },
-        });
+        // 如果偏好设置中主题模式为auto，则跟随系统更新
+        if (this.state.theme.mode === 'auto') {
+          this.updatePreferences({
+            theme: { mode: isDark ? 'dark' : 'light' },
+          });
+          // 恢复为auto模式
+          this.updatePreferences({
+            theme: { mode: 'auto' },
+          });
+        }
       });
   }
 
diff --git a/apps/vben5/packages/@core/preferences/src/types.ts b/apps/vben5/packages/@core/preferences/src/types.ts
index 9c7e87bc4..e640edb5c 100644
--- a/apps/vben5/packages/@core/preferences/src/types.ts
+++ b/apps/vben5/packages/@core/preferences/src/types.ts
@@ -33,8 +33,22 @@ interface AppPreferences {
   compact: boolean;
   /** 是否开启内容紧凑模式 */
   contentCompact: ContentCompactType;
+  /** 内容紧凑宽度 */
+  contentCompactWidth: number;
+  /** 内容内边距 */
+  contentPadding: number;
+  /** 内容底部内边距 */
+  contentPaddingBottom: number;
+  /** 内容左侧内边距 */
+  contentPaddingLeft: number;
+  /** 内容右侧内边距 */
+  contentPaddingRight: number;
+  /** 内容顶部内边距 */
+  contentPaddingTop: number;
   // /** 应用默认头像 */
   defaultAvatar: string;
+  /** 默认首页地址 */
+  defaultHomePath: string;
   // /** 开启动态标题 */
   dynamicTitle: boolean;
   /** 是否开启检查更新 */
@@ -61,6 +75,8 @@ interface AppPreferences {
    * @zh_CN 是否开启水印
    */
   watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }
 
 interface BreadcrumbPreferences {
@@ -98,11 +114,15 @@ interface FooterPreferences {
   enable: boolean;
   /** 底栏是否固定 */
   fixed: boolean;
+  /** 底栏高度 */
+  height: number;
 }
 
 interface HeaderPreferences {
   /** 顶栏是否启用 */
   enable: boolean;
+  /** 顶栏高度 */
+  height: number;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
   /** 顶栏菜单位置 */
@@ -114,6 +134,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** logo是否可见 */
   enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
 }
@@ -132,16 +154,26 @@ interface SidebarPreferences {
   autoActivateChild: boolean;
   /** 侧边栏是否折叠 */
   collapsed: boolean;
+  /** 侧边栏折叠按钮是否可见 */
+  collapsedButton: boolean;
   /** 侧边栏折叠时，是否显示title */
   collapsedShowTitle: boolean;
+  /** 侧边栏折叠宽度 */
+  collapseWidth: number;
   /** 侧边栏是否可见 */
   enable: boolean;
   /** 菜单自动展开状态 */
   expandOnHover: boolean;
   /** 侧边栏扩展区域是否折叠 */
   extraCollapse: boolean;
+  /** 侧边栏扩展区域折叠宽度 */
+  extraCollapsedWidth: number;
+  /** 侧边栏固定按钮是否可见 */
+  fixedButton: boolean;
   /** 侧边栏是否隐藏 - css */
   hidden: boolean;
+  /** 混合侧边栏宽度 */
+  mixedWidth: number;
   /** 侧边栏宽度 */
   width: number;
 }
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/package.json b/apps/vben5/packages/@core/ui-kit/form-ui/package.json
index 36a0596df..36ae1678f 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index fb90a5e42..c5a3f9c2f 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -62,7 +62,7 @@ async function handleReset(e: Event) {
   e?.stopPropagation();
   const props = unref(rootProps);
 
-  const values = toRaw(props.formApi?.getValues());
+  const values = toRaw(await props.formApi?.getValues());
 
   if (isFunction(props.handleReset)) {
     await props.handleReset?.(values);
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts
index c3d7b2bbe..e097a4654 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -5,11 +5,13 @@ import type {
   ValidationOptions,
 } from 'vee-validate';
 
+import type { ComponentPublicInstance } from 'vue';
+
 import type { Recordable } from '@vben-core/typings';
 
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
-import { toRaw } from 'vue';
+import { isRef, toRaw } from 'vue';
 
 import { Store } from '@vben-core/shared/store';
 import {
@@ -56,6 +58,11 @@ export class FormApi {
 
   public store: Store<VbenFormProps>;
 
+  /**
+   * 组件实例映射
+   */
+  private componentRefMap: Map<string, unknown> = new Map();
+
   // 最后一次点击提交时的表单值
   private latestSubmissionValues: null | Recordable<any> = null;
 
@@ -85,6 +92,63 @@ export class FormApi {
     bindMethods(this);
   }
 
+  /**
+   * 获取字段组件实例
+   * @param fieldName 字段名
+   * @returns 组件实例
+   */
+  getFieldComponentRef<T = ComponentPublicInstance>(
+    fieldName: string,
+  ): T | undefined {
+    let target = this.componentRefMap.has(fieldName)
+      ? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
+      : undefined;
+    if (
+      target &&
+      target.$.type.name === 'AsyncComponentWrapper' &&
+      target.$.subTree.ref
+    ) {
+      if (Array.isArray(target.$.subTree.ref)) {
+        if (
+          target.$.subTree.ref.length > 0 &&
+          isRef(target.$.subTree.ref[0]?.r)
+        ) {
+          target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
+        }
+      } else if (isRef(target.$.subTree.ref.r)) {
+        target = target.$.subTree.ref.r.value as ComponentPublicInstance;
+      }
+    }
+    return target as T;
+  }
+
+  /**
+   * 获取当前聚焦的字段，如果没有聚焦的字段则返回undefined
+   */
+  getFocusedField() {
+    for (const fieldName of this.componentRefMap.keys()) {
+      const ref = this.getFieldComponentRef(fieldName);
+      if (ref) {
+        let el: HTMLElement | null = null;
+        if (ref instanceof HTMLElement) {
+          el = ref;
+        } else if (ref.$el instanceof HTMLElement) {
+          el = ref.$el;
+        }
+        if (!el) {
+          continue;
+        }
+        if (
+          el === document.activeElement ||
+          el.contains(document.activeElement)
+        ) {
+          return fieldName;
+        }
+      }
+    }
+    return undefined;
+  }
+
   getLatestSubmissionValues() {
     return this.latestSubmissionValues || {};
   }
@@ -93,9 +157,9 @@ export class FormApi {
     return this.state;
   }
 
-  async getValues() {
+  async getValues<T = Recordable<any>>() {
     const form = await this.getForm();
-    return form.values ? this.handleRangeTimeValue(form.values) : {};
+    return (form.values ? this.handleRangeTimeValue(form.values) : {}) as T;
   }
 
   async isFieldValid(fieldName: string) {
@@ -143,13 +207,14 @@ export class FormApi {
     return proxy;
   }
 
-  mount(formActions: FormActions) {
+  mount(formActions: FormActions, componentRefMap: Map<string, unknown>) {
     if (!this.isMounted) {
       Object.assign(this.form, formActions);
       this.stateHandler.setConditionTrue();
       this.setLatestSubmissionValues({
         ...toRaw(this.handleRangeTimeValue(this.form.values)),
       });
+      this.componentRefMap = componentRefMap;
       this.isMounted = true;
     }
   }
@@ -247,6 +312,7 @@ export class FormApi {
       return true;
     });
     const filteredFields = fieldMergeFn(fields, form.values);
+    this.handleStringToArrayFields(filteredFields);
     form.setValues(filteredFields, shouldValidate);
   }
 
@@ -256,6 +322,7 @@ export class FormApi {
     const form = await this.getForm();
     await form.submitForm();
     const rawValues = toRaw(await this.getValues());
+    this.handleArrayToStringFields(rawValues);
     await this.state?.handleSubmit?.(rawValues);
 
     return rawValues;
@@ -344,10 +411,53 @@ export class FormApi {
     return this.form;
   }
 
+  private handleArrayToStringFields = (originValues: Record<string, any>) => {
+    const arrayToStringFields = this.state?.arrayToStringFields;
+    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
+      return;
+    }
+
+    const processFields = (fields: string[], separator: string = ',') => {
+      this.processFields(fields, separator, originValues, (value, sep) =>
+        Array.isArray(value) ? value.join(sep) : value,
+      );
+    };
+
+    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
+    if (arrayToStringFields.every((item) => typeof item === 'string')) {
+      const lastItem =
+        arrayToStringFields[arrayToStringFields.length - 1] || '';
+      const fields =
+        lastItem.length === 1
+          ? arrayToStringFields.slice(0, -1)
+          : arrayToStringFields;
+      const separator = lastItem.length === 1 ? lastItem : ',';
+      processFields(fields, separator);
+      return;
+    }
+
+    // 处理嵌套数组格式 [['field1'], ';']
+    arrayToStringFields.forEach((fieldConfig) => {
+      if (Array.isArray(fieldConfig)) {
+        const [fields, separator = ','] = fieldConfig;
+        // 根据类型定义，fields 应该始终是字符串数组
+        if (!Array.isArray(fields)) {
+          console.warn(
+            `Invalid field configuration: fields should be an array of strings, got ${typeof fields}`,
+          );
+          return;
+        }
+        processFields(fields, separator);
+      }
+    });
+  };
+
   private handleRangeTimeValue = (originValues: Record<string, any>) => {
     const values = { ...originValues };
     const fieldMappingTime = this.state?.fieldMappingTime;
 
+    this.handleStringToArrayFields(values);
+
     if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
       return values;
     }
@@ -393,6 +503,80 @@ export class FormApi {
     return values;
   };
 
+  private handleStringToArrayFields = (originValues: Record<string, any>) => {
+    const arrayToStringFields = this.state?.arrayToStringFields;
+    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
+      return;
+    }
+
+    const processFields = (fields: string[], separator: string = ',') => {
+      this.processFields(fields, separator, originValues, (value, sep) => {
+        if (typeof value !== 'string') {
+          return value;
+        }
+        // 处理空字符串的情况
+        if (value === '') {
+          return [];
+        }
+        // 处理复杂分隔符的情况
+        const escapedSeparator = sep.replaceAll(
+          /[.*+?^${}()|[\]\\]/g,
+          String.raw`\$&`,
+        );
+        return value.split(new RegExp(escapedSeparator));
+      });
+    };
+
+    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
+    if (arrayToStringFields.every((item) => typeof item === 'string')) {
+      const lastItem =
+        arrayToStringFields[arrayToStringFields.length - 1] || '';
+      const fields =
+        lastItem.length === 1
+          ? arrayToStringFields.slice(0, -1)
+          : arrayToStringFields;
+      const separator = lastItem.length === 1 ? lastItem : ',';
+      processFields(fields, separator);
+      return;
+    }
+
+    // 处理嵌套数组格式 [['field1'], ';']
+    arrayToStringFields.forEach((fieldConfig) => {
+      if (Array.isArray(fieldConfig)) {
+        const [fields, separator = ','] = fieldConfig;
+        if (Array.isArray(fields)) {
+          processFields(fields, separator);
+        } else if (typeof originValues[fields] === 'string') {
+          const value = originValues[fields];
+          if (value === '') {
+            originValues[fields] = [];
+          } else {
+            const escapedSeparator = separator.replaceAll(
+              /[.*+?^${}()|[\]\\]/g,
+              String.raw`\$&`,
+            );
+            originValues[fields] = value.split(new RegExp(escapedSeparator));
+          }
+        }
+      }
+    });
+  };
+
+  private processFields = (
+    fields: string[],
+    separator: string,
+    originValues: Record<string, any>,
+    transformFn: (value: any, separator: string) => any,
+  ) => {
+    fields.forEach((field) => {
+      const value = originValues[field];
+      if (value === undefined || value === null) {
+        return;
+      }
+      originValues[field] = transformFn(value, separator);
+    });
+  };
+
   private updateState() {
     const currentSchema = this.state?.schema ?? [];
     const prevSchema = this.prevState?.schema ?? [];
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
index a7b8ef418..9383064c6 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
@@ -2,13 +2,18 @@ import type { FormRenderProps } from '../types';
 
 import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+import {
+  breakpointsTailwind,
+  useBreakpoints,
+  useElementVisibility,
+} from '@vueuse/core';
 
 /**
  * 动态计算行数
  */
 export function useExpandable(props: FormRenderProps) {
   const wrapperRef = useTemplateRef<HTMLElement>('wrapperRef');
+  const isVisible = useElementVisibility(wrapperRef);
   const rowMapping = ref<Record<number, number>>({});
   // 是否已经计算过一次
   const isCalculated = ref(false);
@@ -31,6 +36,7 @@ export function useExpandable(props: FormRenderProps) {
       () => props.showCollapseButton,
       () => breakpoints.active().value,
       () => props.schema?.length,
+      () => isVisible.value,
     ],
     async ([val]) => {
       if (val) {
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 31af2821d..fd5fb5efa 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -3,8 +3,9 @@ import type { ZodType } from 'zod';
 
 import type { FormSchema, MaybeComponentProps } from '../types';
 
-import { computed, nextTick, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onUnmounted, useTemplateRef, watch } from 'vue';
 
+import { CircleAlert } from '@vben-core/icons';
 import {
   FormControl,
   FormDescription,
@@ -12,12 +13,14 @@ import {
   FormItem,
   FormMessage,
   VbenRenderContent,
+  VbenTooltip,
 } from '@vben-core/shadcn-ui';
 import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
 
 import { toTypedSchema } from '@vee-validate/zod';
 import { useFieldError, useFormValues } from 'vee-validate';
 
+import { injectComponentRefMap } from '../use-form-context';
 import { injectRenderFormProps, useFormContext } from './context';
 import useDependencies from './dependencies';
 import FormLabel from './form-label.vue';
@@ -193,7 +196,7 @@ const fieldProps = computed(() => {
   const rules = fieldRules.value;
   return {
     keepValue: true,
-    label,
+    label: isString(label) ? label : '',
     ...(rules ? { rules } : {}),
     ...(formFieldProps as Record<string, any>),
   };
@@ -267,6 +270,15 @@ function autofocus() {
     fieldComponentRef.value?.focus?.();
   }
 }
+const componentRefMap = injectComponentRefMap();
+watch(fieldComponentRef, (componentRef) => {
+  componentRefMap?.set(fieldName, componentRef);
+});
+onUnmounted(() => {
+  if (componentRefMap?.has(fieldName)) {
+    componentRefMap.delete(fieldName);
+  }
+});
 </script>
 
 <template>
@@ -280,12 +292,13 @@ function autofocus() {
       v-show="isShow"
       :class="{
         'form-valid-error': isInValid,
+        'form-is-required': shouldRequired,
         'flex-col': isVertical,
         'flex-row items-center': !isVertical,
         'pb-6': !compact,
         'pb-2': compact,
       }"
-      class="flex"
+      class="relative flex"
       v-bind="$attrs"
     >
       <FormLabel
@@ -301,59 +314,79 @@ function autofocus() {
           )
         "
         :help="help"
+        :colon="colon"
+        :label="label"
         :required="shouldRequired && !hideRequiredMark"
         :style="labelStyle"
       >
         <template v-if="label">
-          <span>{{ label }}</span>
-          <span v-if="colon" class="ml-[2px]">:</span>
+          <VbenRenderContent :content="label" />
         </template>
       </FormLabel>
-      <div :class="cn('relative flex w-full items-center', wrapperClass)">
-        <FormControl :class="cn(controlClass)">
-          <slot
-            v-bind="{
-              ...slotProps,
-              ...createComponentProps(slotProps),
-              disabled: shouldDisabled,
-              isInValid,
-            }"
-          >
-            <component
-              :is="FieldComponent"
-              ref="fieldComponentRef"
-              :class="{
-                'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
-                  isInValid,
+      <div class="flex-auto overflow-hidden p-[1px]">
+        <div :class="cn('relative flex w-full items-center', wrapperClass)">
+          <FormControl :class="cn(controlClass)">
+            <slot
+              v-bind="{
+                ...slotProps,
+                ...createComponentProps(slotProps),
+                disabled: shouldDisabled,
+                isInValid,
               }"
-              v-bind="createComponentProps(slotProps)"
-              :disabled="shouldDisabled"
             >
-              <template
-                v-for="name in renderContentKey"
-                :key="name"
-                #[name]="renderSlotProps"
+              <component
+                :is="FieldComponent"
+                ref="fieldComponentRef"
+                :class="{
+                  'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                    isInValid,
+                }"
+                v-bind="createComponentProps(slotProps)"
+                :disabled="shouldDisabled"
               >
-                <VbenRenderContent
-                  :content="customContentRender[name]"
-                  v-bind="{ ...renderSlotProps, $formContext: slotProps }"
-                />
-              </template>
-              <!-- <slot></slot> -->
-            </component>
-          </slot>
-        </FormControl>
-        <!-- 自定义后缀 -->
-        <div v-if="suffix" class="ml-1">
-          <VbenRenderContent :content="suffix" />
+                <template
+                  v-for="name in renderContentKey"
+                  :key="name"
+                  #[name]="renderSlotProps"
+                >
+                  <VbenRenderContent
+                    :content="customContentRender[name]"
+                    v-bind="{ ...renderSlotProps, formContext: slotProps }"
+                  />
+                </template>
+                <!-- <slot></slot> -->
+              </component>
+              <VbenTooltip
+                v-if="compact && isInValid"
+                :delay-duration="300"
+                side="left"
+              >
+                <template #trigger>
+                  <slot name="trigger">
+                    <CircleAlert
+                      :class="
+                        cn(
+                          'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+                        )
+                      "
+                    />
+                  </slot>
+                </template>
+                <FormMessage />
+              </VbenTooltip>
+            </slot>
+          </FormControl>
+          <!-- 自定义后缀 -->
+          <div v-if="suffix" class="ml-1">
+            <VbenRenderContent :content="suffix" />
+          </div>
+          <FormDescription v-if="description" class="ml-1">
+            <VbenRenderContent :content="description" />
+          </FormDescription>
         </div>
 
-        <FormDescription v-if="description">
-          <VbenRenderContent :content="description" />
-        </FormDescription>
-
-        <Transition name="slide-up">
-          <FormMessage class="absolute -bottom-[22px]" />
+        <Transition name="slide-up" v-if="!compact">
+          <FormMessage class="absolute bottom-1" />
         </Transition>
       </div>
     </FormItem>
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
index 459d5ee56..9af4c133d 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
-import { FormLabel, VbenHelpTooltip } from '@vben-core/shadcn-ui';
+import type { CustomRenderType } from '../types';
+
+import {
+  FormLabel,
+  VbenHelpTooltip,
+  VbenRenderContent,
+} from '@vben-core/shadcn-ui';
 import { cn } from '@vben-core/shared/utils';
 
 interface Props {
   class?: string;
-  help?: string;
+  colon?: boolean;
+  help?: CustomRenderType;
+  label?: CustomRenderType;
   required?: boolean;
 }
 
@@ -16,7 +24,8 @@ const props = defineProps<Props>();
     <span v-if="required" class="text-destructive mr-[2px]">*</span>
     <slot></slot>
     <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
-      {{ help }}
+      <VbenRenderContent :content="help" />
     </VbenHelpTooltip>
+    <span v-if="colon && label" class="ml-[2px]">:</span>
   </FormLabel>
 </template>
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts
index dd007292f..34312ae78 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts
@@ -232,6 +232,12 @@ export type FieldMappingTime = [
   )?,
 ][];
 
+export type ArrayToStringFields = Array<
+  | [string[], string?] // 嵌套数组格式，可选分隔符
+  | string // 单个字段，使用默认分隔符
+  | string[] // 简单数组格式，最后一个元素可以是分隔符
+>;
+
 export interface FormSchema<
   T extends BaseFormComponentType = BaseFormComponentType,
 > extends FormCommonConfig {
@@ -244,13 +250,13 @@ export interface FormSchema<
   /** 依赖 */
   dependencies?: FormItemDependencies;
   /** 描述 */
-  description?: string;
+  description?: CustomRenderType;
   /** 字段名 */
   fieldName: string;
   /** 帮助信息 */
-  help?: string;
+  help?: CustomRenderType;
   /** 表单项 */
-  label?: string;
+  label?: CustomRenderType;
   // 自定义组件内部渲染
   renderComponentContent?: RenderComponentContentType;
   /** 字段规则 */
@@ -266,6 +272,10 @@ export interface FormFieldProps extends FormSchema {
 export interface FormRenderProps<
   T extends BaseFormComponentType = BaseFormComponentType,
 > {
+  /**
+   * 表单字段数组映射字符串配置 默认使用","
+   */
+  arrayToStringFields?: ArrayToStringFields;
   /**
    * 是否展开，在showCollapseButton=true下生效
    */
@@ -296,6 +306,10 @@ export interface FormRenderProps<
    * 组件集合
    */
   componentMap: Record<BaseFormComponentType, Component>;
+  /**
+   * 表单字段映射到时间格式
+   */
+  fieldMappingTime?: FieldMappingTime;
   /**
    * 表单实例
    */
@@ -308,10 +322,15 @@ export interface FormRenderProps<
    * 表单定义
    */
   schema?: FormSchema<T>[];
+
   /**
    * 是否显示展开/折叠
    */
   showCollapseButton?: boolean;
+  /**
+   * 格式化日期
+   */
+
   /**
    * 表单栅格布局
    * @default "grid-cols-1"
@@ -339,6 +358,11 @@ export interface VbenFormProps<
    * 表单操作区域class
    */
   actionWrapperClass?: ClassType;
+  /**
+   * 表单字段数组映射字符串配置 默认使用","
+   */
+  arrayToStringFields?: ArrayToStringFields;
+
   /**
    * 表单字段映射
    */
@@ -354,11 +378,15 @@ export interface VbenFormProps<
   /**
    * 表单值变化回调
    */
-  handleValuesChange?: (values: Record<string, any>) => void;
+  handleValuesChange?: (
+    values: Record<string, any>,
+    fieldsChanged: string[],
+  ) => void;
   /**
    * 重置按钮参数
    */
   resetButtonOptions?: ActionButtonOptions;
+
   /**
    * 是否显示默认操作按钮
    * @default true
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts
index 8e37300e5..4ef182edf 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -7,10 +7,10 @@ import type { ExtendedFormApi, FormActions, VbenFormProps } from './types';
 import { computed, unref, useSlots } from 'vue';
 
 import { createContext } from '@vben-core/shadcn-ui';
-import { isString } from '@vben-core/shared/utils';
+import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
 
 import { useForm } from 'vee-validate';
-import { object } from 'zod';
+import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
 type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
@@ -20,6 +20,9 @@ export const [injectFormProps, provideFormProps] =
     'VbenFormProps',
   );
 
+export const [injectComponentRefMap, provideComponentRefMap] =
+  createContext<Map<string, unknown>>('ComponentRefMap');
+
 export function useFormInitial(
   props: ComputedRef<VbenFormProps> | VbenFormProps,
 ) {
@@ -47,15 +50,56 @@ export function useFormInitial(
     const zodObject: ZodRawShape = {};
     (unref(props).schema || []).forEach((item) => {
       if (Reflect.has(item, 'defaultValue')) {
-        initialValues[item.fieldName] = item.defaultValue;
+        set(initialValues, item.fieldName, item.defaultValue);
       } else if (item.rules && !isString(item.rules)) {
+        // 检查规则是否适合提取默认值
+        const customDefaultValue = getCustomDefaultValue(item.rules);
         zodObject[item.fieldName] = item.rules;
+        if (customDefaultValue !== undefined) {
+          initialValues[item.fieldName] = customDefaultValue;
+        }
       }
     });
 
     const schemaInitialValues = getDefaultsForSchema(object(zodObject));
 
-    return { ...initialValues, ...schemaInitialValues };
+    const zodDefaults: Record<string, any> = {};
+    for (const key in schemaInitialValues) {
+      set(zodDefaults, key, schemaInitialValues[key]);
+    }
+    return mergeWithArrayOverride(initialValues, zodDefaults);
+  }
+  // 自定义默认值提取逻辑
+  function getCustomDefaultValue(rule: any): any {
+    if (rule instanceof ZodString) {
+      return ''; // 默认为空字符串
+    } else if (rule instanceof ZodNumber) {
+      return null; // 默认为 null（避免显示 0）
+    } else if (rule instanceof ZodObject) {
+      // 递归提取嵌套对象的默认值
+      const defaultValues: Record<string, any> = {};
+      for (const [key, valueSchema] of Object.entries(rule.shape)) {
+        defaultValues[key] = getCustomDefaultValue(valueSchema);
+      }
+      return defaultValues;
+    } else if (rule instanceof ZodIntersection) {
+      // 对于交集类型，从schema 提取默认值
+      const leftDefaultValue = getCustomDefaultValue(rule._def.left);
+      const rightDefaultValue = getCustomDefaultValue(rule._def.right);
+
+      // 如果左右两边都能提取默认值，合并它们
+      if (
+        typeof leftDefaultValue === 'object' &&
+        typeof rightDefaultValue === 'object'
+      ) {
+        return { ...leftDefaultValue, ...rightDefaultValue };
+      }
+
+      // 否则优先使用左边的默认值
+      return leftDefaultValue ?? rightDefaultValue;
+    } else {
+      return undefined; // 其他类型不提供默认值
+    }
   }
 
   return {
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/use-vben-form.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
index f5d07b9e9..73f1eb0b0 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
@@ -31,8 +31,8 @@ export function useVbenForm<
         h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);
     },
     {
-      inheritAttrs: false,
       name: 'VbenUseForm',
+      inheritAttrs: false,
     },
   );
   // Add reactivity support
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
index a5a7f660c..3e7b00b6c 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben-core/typings';
+
 import type { ExtendedFormApi, VbenFormProps } from './types';
 
 // import { toRaw, watch } from 'vue';
 import { nextTick, onMounted, watch } from 'vue';
-// import { isFunction } from '@vben-core/shared/utils';
 
 import { useForwardPriorityValues } from '@vben-core/composables';
-import { cloneDeep } from '@vben-core/shared/utils';
+import { cloneDeep, get, isEqual, set } from '@vben-core/shared/utils';
 
 import { useDebounceFn } from '@vueuse/core';
 
@@ -17,7 +18,11 @@ import {
   DEFAULT_FORM_COMMON_CONFIG,
 } from './config';
 import { Form } from './form-render';
-import { provideFormProps, useFormInitial } from './use-form-context';
+import {
+  provideComponentRefMap,
+  provideFormProps,
+  useFormInitial,
+} from './use-form-context';
 // 通过 extends 会导致热更新卡死，所以重复写了一遍
 interface Props extends VbenFormProps {
   formApi: ExtendedFormApi;
@@ -29,11 +34,14 @@ const state = props.formApi?.useStore?.();
 
 const forward = useForwardPriorityValues(props, state);
 
+const componentRefMap = new Map<string, unknown>();
+
 const { delegatedSlots, form } = useFormInitial(forward);
 
 provideFormProps([forward, form]);
+provideComponentRefMap(componentRefMap);
 
-props.formApi?.mount?.(form);
+props.formApi?.mount?.(form, componentRefMap);
 
 const handleUpdateCollapsed = (value: boolean) => {
   props.formApi?.setState({ collapsed: !!value });
@@ -54,16 +62,46 @@ function handleKeyDownEnter(event: KeyboardEvent) {
 }
 
 const handleValuesChangeDebounced = useDebounceFn(async () => {
-  forward.value.handleValuesChange?.(
-    cloneDeep(await forward.value.formApi.getValues()),
-  );
   state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
 }, 300);
 
+const valuesCache: Recordable<any> = {};
+
 onMounted(async () => {
   // 只在挂载后开始监听，form.values会有一个初始化的过程
   await nextTick();
-  watch(() => form.values, handleValuesChangeDebounced, { deep: true });
+  watch(
+    () => form.values,
+    async (newVal) => {
+      if (forward.value.handleValuesChange) {
+        const fields = state.value.schema?.map((item) => {
+          return item.fieldName;
+        });
+
+        if (fields && fields.length > 0) {
+          const changedFields: string[] = [];
+          fields.forEach((field) => {
+            const newFieldValue = get(newVal, field);
+            const oldFieldValue = get(valuesCache, field);
+            if (!isEqual(newFieldValue, oldFieldValue)) {
+              changedFields.push(field);
+              set(valuesCache, field, newFieldValue);
+            }
+          });
+
+          if (changedFields.length > 0) {
+            // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表
+            forward.value.handleValuesChange(
+              cloneDeep(await forward.value.formApi.getValues()),
+              changedFields,
+            );
+          }
+        }
+      }
+      handleValuesChangeDebounced();
+    },
+    { deep: true },
+  );
 });
 </script>
 
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/package.json b/apps/vben5/packages/@core/ui-kit/layout-ui/package.json
index 0bed9beb4..57a462fe1 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index a6a08c6af..214658d36 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -65,9 +65,14 @@ interface Props {
   show?: boolean;
   /**
    * 显示折叠按钮
-   * @default false
+   * @default true
    */
   showCollapseButton?: boolean;
+  /**
+   * 显示固定按钮
+   * @default true
+   */
+  showFixedButton?: boolean;
   /**
    * 主题
    */
@@ -95,6 +100,7 @@ const props = withDefaults(defineProps<Props>(), {
   paddingTop: 0,
   show: true,
   showCollapseButton: true,
+  showFixedButton: true,
   zIndex: 0,
 });
 
@@ -267,7 +273,7 @@ function handleMouseleave() {
     @mouseleave="handleMouseleave"
   >
     <SidebarFixedButton
-      v-if="!collapse && !isSidebarMixed"
+      v-if="!collapse && !isSidebarMixed && showFixedButton"
       v-model:expand-on-hover="expandOnHover"
     />
     <div v-if="slots.logo" :style="headerStyle">
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
index f7dd39cdd..9b77ba96e 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
@@ -106,6 +106,11 @@ interface VbenLayoutProps {
    * @default false
    */
   sidebarCollapse?: boolean;
+  /**
+   * 侧边菜单折叠按钮
+   * @default true
+   */
+  sidebarCollapsedButton?: boolean;
   /**
    * 侧边菜单是否折叠时，是否显示title
    * @default true
@@ -121,6 +126,11 @@ interface VbenLayoutProps {
    * @default 48
    */
   sidebarExtraCollapsedWidth?: number;
+  /**
+   * 侧边菜单折叠按钮是否固定
+   * @default true
+   */
+  sidebarFixedButton?: boolean;
   /**
    * 侧边栏是否隐藏
    * @default false
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 85dfba03c..e9e98dd4d 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -49,8 +49,10 @@ const props = withDefaults(defineProps<Props>(), {
   headerVisible: true,
   isMobile: false,
   layout: 'sidebar-nav',
+  sidebarCollapsedButton: true,
   sidebarCollapseShowTitle: false,
   sidebarExtraCollapsedWidth: 60,
+  sidebarFixedButton: true,
   sidebarHidden: false,
   sidebarMixedWidth: 80,
   sidebarTheme: 'dark',
@@ -62,10 +64,16 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{ sideMouseLeave: []; toggleSidebar: [] }>();
-const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
+const sidebarCollapse = defineModel<boolean>('sidebarCollapse', {
+  default: false,
+});
 const sidebarExtraVisible = defineModel<boolean>('sidebarExtraVisible');
-const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
-const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse', {
+  default: false,
+});
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover', {
+  default: false,
+});
 const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
 
 // side是否处于hover状态展开菜单中
@@ -481,6 +489,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       v-model:expand-on-hovering="sidebarExpandOnHovering"
       v-model:extra-collapse="sidebarExtraCollapse"
       v-model:extra-visible="sidebarExtraVisible"
+      :show-collapse-button="sidebarCollapsedButton"
+      :show-fixed-button="sidebarFixedButton"
       :collapse-width="getSideCollapseWidth"
       :dom-visible="!isMobile"
       :extra-width="sidebarExtraWidth"
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/package.json b/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
index edb320f4c..760d7646e 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index f570aa724..887604567 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -23,7 +23,6 @@ import {
 
 import { useNamespace } from '@vben-core/composables';
 import { Ellipsis } from '@vben-core/icons';
-import { isHttpUrl } from '@vben-core/shared/utils';
 
 import { useResizeObserver } from '@vueuse/core';
 
@@ -32,6 +31,7 @@ import {
   createSubMenuContext,
   useMenuStyle,
 } from '../hooks';
+import { useMenuScroll } from '../hooks/use-menu-scroll';
 import { flattedChildren } from '../utils';
 import SubMenu from './sub-menu.vue';
 
@@ -45,6 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
   mode: 'vertical',
   rounded: true,
   theme: 'dark',
+  scrollToActive: false,
 });
 
 const emit = defineEmits<{
@@ -207,15 +208,19 @@ function handleResize() {
   isFirstTimeRender = false;
 }
 
-function getActivePaths() {
-  const activeItem = activePath.value && items.value[activePath.value];
+const enableScroll = computed(
+  () => props.scrollToActive && props.mode === 'vertical' && !props.collapse,
+);
 
-  if (!activeItem || props.mode === 'horizontal' || props.collapse) {
-    return [];
-  }
+const { scrollToActiveItem } = useMenuScroll(activePath, {
+  enable: enableScroll,
+  delay: 320,
+});
 
-  return activeItem.parentPaths;
-}
+// 监听 activePath 变化，自动滚动到激活项
+watch(activePath, () => {
+  scrollToActiveItem();
+});
 
 // 默认展开菜单
 function initMenu() {
@@ -248,9 +253,6 @@ function handleMenuItemClick(data: MenuItemClicked) {
   if (!path || !parentPaths) {
     return;
   }
-  if (!isHttpUrl(path)) {
-    activePath.value = path;
-  }
 
   emit('select', path, parentPaths);
 }
@@ -322,6 +324,16 @@ function removeSubMenu(subMenu: MenuItemRegistered) {
 function removeMenuItem(item: MenuItemRegistered) {
   Reflect.deleteProperty(items.value, item.path);
 }
+
+function getActivePaths() {
+  const activeItem = activePath.value && items.value[activePath.value];
+
+  if (!activeItem || props.mode === 'horizontal' || props.collapse) {
+    return [];
+  }
+
+  return activeItem.parentPaths;
+}
 </script>
 <template>
   <ul
@@ -378,10 +390,10 @@ $namespace: vben;
     var(--menu-item-margin-x);
   font-size: var(--menu-font-size);
   color: var(--menu-item-color);
-  text-decoration: none;
   white-space: nowrap;
-  list-style: none;
+  text-decoration: none;
   cursor: pointer;
+  list-style: none;
   background: var(--menu-item-background-color);
   border: none;
   border-radius: var(--menu-item-radius);
@@ -705,8 +717,8 @@ $namespace: vben;
     width: var(--menu-item-icon-size);
     height: var(--menu-item-icon-size);
     margin-right: 8px;
-    text-align: center;
     vertical-align: middle;
+    text-align: center;
   }
 }
 
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
index 31eead11a..5622d413a 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
@@ -10,7 +10,7 @@ import { VbenIcon } from '@vben-core/shadcn-ui';
 import { useMenuContext } from '../hooks';
 
 interface Props extends MenuItemProps {
-  isMenuMore: boolean;
+  isMenuMore?: boolean;
   isTopLevelMenuSubmenu: boolean;
   level?: number;
 }
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
index 17bc12156..7a82e724b 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -208,6 +208,8 @@ onBeforeUnmount(() => {
           nsMenu.e('popup-container'),
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
+          'overflow-auto',
+          'max-h-[calc(var(--radix-hover-card-content-available-height)-20px)]',
         ]"
         :content-props="contentProps"
         :open="true"
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts
new file mode 100644
index 000000000..270a0348d
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts
@@ -0,0 +1,46 @@
+import type { Ref } from 'vue';
+
+import { watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+
+interface UseMenuScrollOptions {
+  delay?: number;
+  enable?: boolean | Ref<boolean>;
+}
+
+export function useMenuScroll(
+  activePath: Ref<string | undefined>,
+  options: UseMenuScrollOptions = {},
+) {
+  const { enable = true, delay = 320 } = options;
+
+  function scrollToActiveItem() {
+    const isEnabled = typeof enable === 'boolean' ? enable : enable.value;
+    if (!isEnabled) return;
+
+    const activeElement = document.querySelector(
+      `aside li[role=menuitem].is-active`,
+    );
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      });
+    }
+  }
+
+  const debouncedScroll = useDebounceFn(scrollToActiveItem, delay);
+
+  watch(activePath, () => {
+    const isEnabled = typeof enable === 'boolean' ? enable : enable.value;
+    if (!isEnabled) return;
+
+    debouncedScroll();
+  });
+
+  return {
+    scrollToActiveItem,
+  };
+}
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/menu.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/menu.vue
index 4ecf6a91e..e9ac6d928 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/menu.vue
@@ -18,15 +18,9 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   collapse: false,
-  // theme: 'dark',
 });
 
 const forward = useForwardProps(props);
-
-// const emit = defineEmits<{
-//   'update:openKeys': [key: Key[]];
-//   'update:selectedKeys': [key: Key[]];
-// }>();
 </script>
 
 <template>
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts
index e7ee96758..f3b9c4212 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts
@@ -42,6 +42,12 @@ interface MenuProps {
    */
   rounded?: boolean;
 
+  /**
+   * @zh_CN 是否自动滚动到激活的菜单项
+   * @default false
+   */
+  scrollToActive?: boolean;
+
   /**
    * @zh_CN 菜单主题
    * @default dark
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
new file mode 100644
index 000000000..521a96472
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
@@ -0,0 +1,244 @@
+import type { Component, VNode } from 'vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+import type { AlertProps, BeforeCloseScope, PromptProps } from './alert';
+
+import { h, nextTick, ref, render } from 'vue';
+
+import { useSimpleLocale } from '@vben-core/composables';
+import { Input, VbenRenderContent } from '@vben-core/shadcn-ui';
+import { isFunction, isString } from '@vben-core/shared/utils';
+
+import Alert from './alert.vue';
+
+const alerts = ref<Array<{ container: HTMLElement; instance: Component }>>([]);
+
+const { $t } = useSimpleLocale();
+
+export function vbenAlert(options: AlertProps): Promise<void>;
+export function vbenAlert(
+  message: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+export function vbenAlert(
+  message: string,
+  title?: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+
+export function vbenAlert(
+  arg0: AlertProps | string,
+  arg1?: Partial<AlertProps> | string,
+  arg2?: Partial<AlertProps>,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const options: AlertProps = isString(arg0)
+      ? {
+          content: arg0,
+        }
+      : { ...arg0 };
+    if (arg1) {
+      if (isString(arg1)) {
+        options.title = arg1;
+      } else if (!isString(arg1)) {
+        // 如果第二个参数是对象，则合并到选项中
+        Object.assign(options, arg1);
+      }
+    }
+
+    if (arg2 && !isString(arg2)) {
+      Object.assign(options, arg2);
+    }
+    // 创建容器元素
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    // 创建一个引用，用于在回调中访问实例
+    const alertRef = { container, instance: null as any };
+
+    const props: AlertProps & Recordable<any> = {
+      onClosed: (isConfirm: boolean) => {
+        // 移除组件实例以及创建的所有dom（恢复页面到打开前的状态）
+        // 从alerts数组中移除该实例
+        alerts.value = alerts.value.filter((item) => item !== alertRef);
+
+        // 从DOM中移除容器
+        render(null, container);
+        if (container.parentNode) {
+          container.remove();
+        }
+
+        // 解析 Promise，传递用户操作结果
+        if (isConfirm) {
+          resolve();
+        } else {
+          reject(new Error('dialog cancelled'));
+        }
+      },
+      ...options,
+      open: true,
+      title: options.title ?? $t.value('prompt'),
+    };
+
+    // 创建Alert组件的VNode
+    const vnode = h(Alert, props);
+
+    // 渲染组件到容器
+    render(vnode, container);
+
+    // 保存组件实例引用
+    alertRef.instance = vnode.component?.proxy as Component;
+
+    // 将实例和容器添加到alerts数组中
+    alerts.value.push(alertRef);
+  });
+}
+
+export function vbenConfirm(options: AlertProps): Promise<void>;
+export function vbenConfirm(
+  message: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+export function vbenConfirm(
+  message: string,
+  title?: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+
+export function vbenConfirm(
+  arg0: AlertProps | string,
+  arg1?: Partial<AlertProps> | string,
+  arg2?: Partial<AlertProps>,
+): Promise<void> {
+  const defaultProps: Partial<AlertProps> = {
+    showCancel: true,
+  };
+  if (!arg1) {
+    return isString(arg0)
+      ? vbenAlert(arg0, defaultProps)
+      : vbenAlert({ ...defaultProps, ...arg0 });
+  } else if (!arg2) {
+    return isString(arg1)
+      ? vbenAlert(arg0 as string, arg1, defaultProps)
+      : vbenAlert(arg0 as string, { ...defaultProps, ...arg1 });
+  }
+  return vbenAlert(arg0 as string, arg1 as string, {
+    ...defaultProps,
+    ...arg2,
+  });
+}
+
+export async function vbenPrompt<T = any>(
+  options: PromptProps<T>,
+): Promise<T | undefined> {
+  const {
+    component: _component,
+    componentProps: _componentProps,
+    componentSlots,
+    content,
+    defaultValue,
+    modelPropName: _modelPropName,
+    ...delegated
+  } = options;
+
+  const modelValue = ref<T | undefined>(defaultValue);
+  const inputComponentRef = ref<null | VNode>(null);
+  const staticContents: Component[] = [];
+
+  staticContents.push(h(VbenRenderContent, { content, renderBr: true }));
+
+  const modelPropName = _modelPropName || 'modelValue';
+  const componentProps = { ..._componentProps };
+
+  // 每次渲染时都会重新计算的内容函数
+  const contentRenderer = () => {
+    const currentProps = { ...componentProps };
+
+    // 设置当前值
+    currentProps[modelPropName] = modelValue.value;
+
+    // 设置更新处理函数
+    currentProps[`onUpdate:${modelPropName}`] = (val: T) => {
+      modelValue.value = val;
+    };
+
+    // 创建输入组件
+    inputComponentRef.value = h(
+      _component || Input,
+      currentProps,
+      componentSlots,
+    );
+
+    // 返回包含静态内容和输入组件的数组
+    return h(
+      'div',
+      { class: 'flex flex-col gap-2' },
+      { default: () => [...staticContents, inputComponentRef.value] },
+    );
+  };
+
+  const props: AlertProps & Recordable<any> = {
+    ...delegated,
+    async beforeClose(scope: BeforeCloseScope) {
+      if (delegated.beforeClose) {
+        return await delegated.beforeClose({
+          ...scope,
+          value: modelValue.value,
+        });
+      }
+    },
+    // 使用函数形式，每次渲染都会重新计算内容
+    content: contentRenderer,
+    contentMasking: true,
+    async onOpened() {
+      await nextTick();
+      const componentRef: null | VNode = inputComponentRef.value;
+      if (componentRef) {
+        if (
+          componentRef.component?.exposed &&
+          isFunction(componentRef.component.exposed.focus)
+        ) {
+          componentRef.component.exposed.focus();
+        } else {
+          if (componentRef.el) {
+            if (
+              isFunction(componentRef.el.focus) &&
+              ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(
+                componentRef.el.tagName,
+              )
+            ) {
+              componentRef.el.focus();
+            } else if (isFunction(componentRef.el.querySelector)) {
+              const focusableElement = componentRef.el.querySelector(
+                'input, select, textarea, button',
+              );
+              if (focusableElement && isFunction(focusableElement.focus)) {
+                focusableElement.focus();
+              }
+            } else if (
+              componentRef.el.nextElementSibling &&
+              isFunction(componentRef.el.nextElementSibling.focus)
+            ) {
+              componentRef.el.nextElementSibling.focus();
+            }
+          }
+        }
+      }
+    },
+  };
+
+  await vbenConfirm(props);
+  return modelValue.value;
+}
+
+export function clearAllAlerts() {
+  alerts.value.forEach((alert) => {
+    // 从DOM中移除容器
+    render(null, alert.container);
+    if (alert.container.parentNode) {
+      alert.container.remove();
+    }
+  });
+  alerts.value = [];
+}
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
new file mode 100644
index 000000000..5a214fa2d
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
@@ -0,0 +1,99 @@
+import type { Component, VNode, VNodeArrayChildren } from 'vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+import { createContext } from '@vben-core/shadcn-ui';
+
+export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
+
+export type BeforeCloseScope = {
+  isConfirm: boolean;
+};
+
+export type AlertProps = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (
+    scope: BeforeCloseScope,
+  ) => boolean | Promise<boolean | undefined> | undefined;
+  /** 边框 */
+  bordered?: boolean;
+  /**
+   * 按钮对齐方式
+   * @default 'end'
+   */
+  buttonAlign?: 'center' | 'end' | 'start';
+  /** 取消按钮的标题 */
+  cancelText?: string;
+  /** 是否居中显示 */
+  centered?: boolean;
+  /** 确认按钮的标题 */
+  confirmText?: string;
+  /** 弹窗容器的额外样式 */
+  containerClass?: string;
+  /** 弹窗提示内容 */
+  content: Component | string;
+  /** 弹窗内容的额外样式 */
+  contentClass?: string;
+  /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
+  contentMasking?: boolean;
+  /** 弹窗底部内容（与按钮在同一个容器中） */
+  footer?: Component | string;
+  /** 弹窗的图标（在标题的前面） */
+  icon?: Component | IconType;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+  /** 是否显示取消按钮 */
+  showCancel?: boolean;
+  /** 弹窗标题 */
+  title?: string;
+};
+
+/** Prompt属性 */
+export type PromptProps<T = any> = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (scope: {
+    isConfirm: boolean;
+    value: T | undefined;
+  }) => boolean | Promise<boolean | undefined> | undefined;
+  /** 用于接受用户输入的组件 */
+  component?: Component;
+  /** 输入组件的属性 */
+  componentProps?: Recordable<any>;
+  /** 输入组件的插槽 */
+  componentSlots?:
+    | (() => any)
+    | Recordable<unknown>
+    | VNode
+    | VNodeArrayChildren;
+  /** 默认值 */
+  defaultValue?: T;
+  /** 输入组件的值属性名 */
+  modelPropName?: string;
+} & Omit<AlertProps, 'beforeClose'>;
+
+/**
+ * Alert上下文
+ */
+export type AlertContext = {
+  /** 执行取消操作 */
+  doCancel: () => void;
+  /** 执行确认操作 */
+  doConfirm: () => void;
+};
+
+export const [injectAlertContext, provideAlertContext] =
+  createContext<AlertContext>('VbenAlertContext');
+
+/**
+ * 获取Alert上下文
+ * @returns AlertContext
+ */
+export function useAlertContext() {
+  const context = injectAlertContext();
+  if (!context) {
+    throw new Error('useAlertContext must be used within an AlertProvider');
+  }
+  return context;
+}
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
new file mode 100644
index 000000000..6997235ac
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import type { AlertProps } from './alert';
+
+import { computed, h, nextTick, ref } from 'vue';
+
+import { useSimpleLocale } from '@vben-core/composables';
+import {
+  CircleAlert,
+  CircleCheckBig,
+  CircleHelp,
+  CircleX,
+  Info,
+  X,
+} from '@vben-core/icons';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  VbenButton,
+  VbenLoading,
+  VbenRenderContent,
+} from '@vben-core/shadcn-ui';
+import { globalShareState } from '@vben-core/shared/global-state';
+import { cn } from '@vben-core/shared/utils';
+
+import { provideAlertContext } from './alert';
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  bordered: true,
+  buttonAlign: 'end',
+  centered: true,
+});
+const emits = defineEmits(['closed', 'confirm', 'opened']);
+const open = defineModel<boolean>('open', { default: false });
+const { $t } = useSimpleLocale();
+const components = globalShareState.getComponents();
+const isConfirm = ref(false);
+
+function onAlertClosed() {
+  emits('closed', isConfirm.value);
+  isConfirm.value = false;
+}
+
+function onEscapeKeyDown() {
+  isConfirm.value = false;
+}
+
+const getIconRender = computed(() => {
+  let iconRender: Component | null = null;
+  if (props.icon) {
+    if (typeof props.icon === 'string') {
+      switch (props.icon) {
+        case 'error': {
+          iconRender = h(CircleX, {
+            style: { color: 'hsl(var(--destructive))' },
+          });
+          break;
+        }
+        case 'info': {
+          iconRender = h(Info, { style: { color: 'hsl(var(--info))' } });
+          break;
+        }
+        case 'question': {
+          iconRender = CircleHelp;
+          break;
+        }
+        case 'success': {
+          iconRender = h(CircleCheckBig, {
+            style: { color: 'hsl(var(--success))' },
+          });
+          break;
+        }
+        case 'warning': {
+          iconRender = h(CircleAlert, {
+            style: { color: 'hsl(var(--warning))' },
+          });
+          break;
+        }
+        default: {
+          iconRender = null;
+          break;
+        }
+      }
+    }
+  } else {
+    iconRender = props.icon ?? null;
+  }
+  return iconRender;
+});
+
+function doCancel() {
+  handleCancel();
+  handleOpenChange(false);
+}
+
+function doConfirm() {
+  handleConfirm();
+  handleOpenChange(false);
+}
+
+provideAlertContext({
+  doCancel,
+  doConfirm,
+});
+
+function handleConfirm() {
+  isConfirm.value = true;
+  emits('confirm');
+}
+
+function handleCancel() {
+  isConfirm.value = false;
+}
+
+const loading = ref(false);
+async function handleOpenChange(val: boolean) {
+  await nextTick(); // 等待标记isConfirm状态
+  if (!val && props.beforeClose) {
+    loading.value = true;
+    try {
+      const res = await props.beforeClose({ isConfirm: isConfirm.value });
+      if (res !== false) {
+        open.value = false;
+      }
+    } finally {
+      loading.value = false;
+    }
+  } else {
+    open.value = val;
+  }
+}
+</script>
+<template>
+  <AlertDialog :open="open" @update:open="handleOpenChange">
+    <AlertDialogContent
+      :open="open"
+      :centered="centered"
+      :overlay-blur="overlayBlur"
+      @opened="emits('opened')"
+      @closed="onAlertClosed"
+      @escape-key-down="onEscapeKeyDown"
+      :class="
+        cn(
+          containerClass,
+          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
+          {
+            'border-border border': bordered,
+            'shadow-3xl': !bordered,
+          },
+        )
+      "
+    >
+      <div :class="cn('relative flex-1 overflow-y-auto p-3', contentClass)">
+        <AlertDialogTitle v-if="title">
+          <div class="flex items-center">
+            <component :is="getIconRender" class="mr-2" />
+            <span class="flex-auto">{{ $t(title) }}</span>
+            <AlertDialogCancel v-if="showCancel" as-child>
+              <VbenButton
+                variant="ghost"
+                size="icon"
+                class="rounded-full"
+                :disabled="loading"
+                @click="handleCancel"
+              >
+                <X class="text-muted-foreground size-4" />
+              </VbenButton>
+            </AlertDialogCancel>
+          </div>
+        </AlertDialogTitle>
+        <AlertDialogDescription>
+          <div class="m-4 min-h-[30px]">
+            <VbenRenderContent :content="content" render-br />
+          </div>
+          <VbenLoading v-if="loading && contentMasking" :spinning="loading" />
+        </AlertDialogDescription>
+        <div
+          class="flex items-center justify-end gap-x-2"
+          :class="`justify-${buttonAlign}`"
+        >
+          <VbenRenderContent :content="footer" />
+          <AlertDialogCancel v-if="showCancel" as-child>
+            <component
+              :is="components.DefaultButton || VbenButton"
+              :disabled="loading"
+              variant="ghost"
+              @click="handleCancel"
+            >
+              {{ cancelText || $t('cancel') }}
+            </component>
+          </AlertDialogCancel>
+          <AlertDialogAction as-child>
+            <component
+              :is="components.PrimaryButton || VbenButton"
+              :loading="loading"
+              @click="handleConfirm"
+            >
+              {{ confirmText || $t('confirm') }}
+            </component>
+          </AlertDialogAction>
+        </div>
+      </div>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/index.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/index.ts
new file mode 100644
index 000000000..8419b5b85
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/index.ts
@@ -0,0 +1,14 @@
+export type {
+  AlertProps,
+  BeforeCloseScope,
+  IconType,
+  PromptProps,
+} from './alert';
+export { useAlertContext } from './alert';
+export { default as Alert } from './alert.vue';
+export {
+  vbenAlert as alert,
+  clearAllAlerts,
+  vbenConfirm as confirm,
+  vbenPrompt as prompt,
+} from './AlertBuilder';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
index 46dcafc30..365a2e4a0 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
@@ -54,7 +54,6 @@ describe('drawerApi', () => {
   });
 
   it('should close the drawer if onBeforeClose allows it', () => {
-    drawerApi.open();
     drawerApi.close();
     expect(drawerApi.store.state.isOpen).toBe(false);
   });
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index 398e4f907..a4a3ac4aa 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -38,6 +38,7 @@ export class DrawerApi {
     const defaultState: DrawerState = {
       class: '',
       closable: true,
+      closeIconPlacement: 'right',
       closeOnClickModal: true,
       closeOnPressEscape: true,
       confirmLoading: false,
@@ -51,6 +52,7 @@ export class DrawerApi {
       placement: 'right',
       showCancelButton: true,
       showConfirmButton: true,
+      submitting: false,
       title: '',
     };
 
@@ -84,14 +86,19 @@ export class DrawerApi {
   }
 
   /**
-   * 关闭弹窗
+   * 关闭抽屉
+   * @description 关闭抽屉时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
    */
-  close() {
+  async close() {
     // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
     // 如果 onBeforeClose 返回 false，则不关闭弹窗
-    const allowClose = this.api.onBeforeClose?.() ?? true;
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
     if (allowClose) {
-      this.store.setState((prev) => ({ ...prev, isOpen: false }));
+      this.store.setState((prev) => ({
+        ...prev,
+        isOpen: false,
+        submitting: false,
+      }));
     }
   }
 
@@ -99,6 +106,15 @@ export class DrawerApi {
     return (this.sharedData?.payload ?? {}) as T;
   }
 
+  /**
+   * 锁定抽屉状态（用于提交过程中的等待状态）
+   * @description 锁定状态将禁用默认的取消按钮，使用spinner覆盖抽屉内容，隐藏关闭按钮，阻止手动关闭弹窗，将默认的提交按钮标记为loading状态
+   * @param isLocked 是否锁定
+   */
+  lock(isLocked: boolean = true) {
+    return this.setState({ submitting: isLocked });
+  }
+
   /**
    * 取消操作
    */
@@ -156,4 +172,12 @@ export class DrawerApi {
     }
     return this;
   }
+
+  /**
+   * 解除抽屉的锁定状态
+   * @description 解除由lock方法设置的锁定状态，是lock(false)的别名
+   */
+  unlock() {
+    return this.lock(false);
+  }
 }
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
index c43677d3e..89cd3b5f8 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -1,6 +1,6 @@
 import type { Component, Ref } from 'vue';
 
-import type { ClassType } from '@vben-core/typings';
+import type { ClassType, MaybePromise } from '@vben-core/typings';
 
 import type { DrawerApi } from './drawer-api';
 
@@ -52,6 +52,10 @@ export interface DrawerProps {
    * 弹窗描述
    */
   description?: string;
+  /**
+   * 在关闭时销毁抽屉
+   */
+  destroyOnClose?: boolean;
   /**
    * 是否显示底部
    * @default true
@@ -75,12 +79,12 @@ export interface DrawerProps {
    * @default false
    */
   loading?: boolean;
-
   /**
    * 是否显示遮罩
    * @default true
    */
   modal?: boolean;
+
   /**
    * 是否自动聚焦
    */
@@ -89,12 +93,12 @@ export interface DrawerProps {
    * 弹窗遮罩模糊效果
    */
   overlayBlur?: number;
-
   /**
    * 抽屉位置
    * @default right
    */
   placement?: DrawerPlacement;
+
   /**
    * 是否显示取消按钮
    * @default true
@@ -105,6 +109,10 @@ export interface DrawerProps {
    * @default true
    */
   showConfirmButton?: boolean;
+  /**
+   * 提交中（锁定抽屉状态）
+   */
+  submitting?: boolean;
   /**
    * 弹窗标题
    */
@@ -139,15 +147,11 @@ export interface DrawerApiOptions extends DrawerState {
    * 独立的抽屉组件
    */
   connectedComponent?: Component;
-  /**
-   * 在关闭时销毁抽屉。仅在使用 connectedComponent 时有效
-   */
-  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
    */
-  onBeforeClose?: () => void;
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
   /**
    * 点击取消按钮的回调
    */
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index 1b1a4a509..8a3c0c53f 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import type { DrawerProps, ExtendedDrawerApi } from './drawer';
 
-import { computed, provide, ref, useId, watch } from 'vue';
+import {
+  computed,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';
 
 import {
   useIsMobile,
@@ -35,7 +43,9 @@ interface Props extends DrawerProps {
 const props = withDefaults(defineProps<Props>(), {
   appendToMain: false,
   closeIconPlacement: 'right',
+  destroyOnClose: false,
   drawerApi: undefined,
+  submitting: false,
   zIndex: 1000,
 });
 
@@ -55,12 +65,14 @@ const {
   cancelText,
   class: drawerClass,
   closable,
+  closeIconPlacement,
   closeOnClickModal,
   closeOnPressEscape,
   confirmLoading,
   confirmText,
   contentClass,
   description,
+  destroyOnClose,
   footer: showFooter,
   footerClass,
   header: showHeader,
@@ -72,30 +84,41 @@ const {
   placement,
   showCancelButton,
   showConfirmButton,
+  submitting,
   title,
   titleTooltip,
   zIndex,
 } = usePriorityValues(props, state);
 
-watch(
-  () => showLoading.value,
-  (v) => {
-    if (v && wrapperRef.value) {
-      wrapperRef.value.scrollTo({
-        // behavior: 'smooth',
-        top: 0,
-      });
-    }
-  },
-);
+// watch(
+//   () => showLoading.value,
+//   (v) => {
+//     if (v && wrapperRef.value) {
+//       wrapperRef.value.scrollTo({
+//         // behavior: 'smooth',
+//         top: 0,
+//       });
+//     }
+//   },
+// );
+
+/**
+ * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
+ */
+onDeactivated(() => {
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.drawerApi?.close();
+  }
+});
 
 function interactOutside(e: Event) {
-  if (!closeOnClickModal.value) {
+  if (!closeOnClickModal.value || submitting.value) {
     e.preventDefault();
   }
 }
 function escapeKeyDown(e: KeyboardEvent) {
-  if (!closeOnPressEscape.value) {
+  if (!closeOnPressEscape.value || submitting.value) {
     e.preventDefault();
   }
 }
@@ -103,7 +126,11 @@ function escapeKeyDown(e: KeyboardEvent) {
 function pointerDownOutside(e: Event) {
   const target = e.target as HTMLElement;
   const dismissableDrawer = target?.dataset.dismissableDrawer;
-  if (!closeOnClickModal.value || dismissableDrawer !== id) {
+  if (
+    submitting.value ||
+    !closeOnClickModal.value ||
+    dismissableDrawer !== id
+  ) {
     e.preventDefault();
   }
 }
@@ -120,7 +147,32 @@ function handleFocusOutside(e: Event) {
 }
 
 const getAppendTo = computed(() => {
-  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+  return appendToMain.value
+    ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
+    : undefined;
+});
+
+/**
+ * destroyOnClose功能完善
+ */
+// 是否打开过
+const hasOpened = ref(false);
+const isClosed = ref(true);
+watch(
+  () => state?.value?.isOpen,
+  (value) => {
+    isClosed.value = false;
+    if (value && !unref(hasOpened)) {
+      hasOpened.value = true;
+    }
+  },
+);
+function handleClosed() {
+  isClosed.value = true;
+  props.drawerApi?.onClosed();
+}
+const getForceMount = computed(() => {
+  return !unref(destroyOnClose) && unref(hasOpened);
 });
 </script>
 <template>
@@ -135,15 +187,17 @@ const getAppendTo = computed(() => {
         cn('flex w-[520px] flex-col', drawerClass, {
           '!w-full': isMobile || placement === 'bottom' || placement === 'top',
           'max-h-[100vh]': placement === 'bottom' || placement === 'top',
+          hidden: isClosed,
         })
       "
       :modal="modal"
       :open="state?.isOpen"
       :side="placement"
       :z-index="zIndex"
+      :force-mount="getForceMount"
       :overlay-blur="overlayBlur"
       @close-auto-focus="handleFocusOutside"
-      @closed="() => drawerApi?.onClosed()"
+      @closed="handleClosed"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
@@ -168,6 +222,7 @@ const getAppendTo = computed(() => {
           <SheetClose
             v-if="closable && closeIconPlacement === 'left'"
             as-child
+            :disabled="submitting"
             class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
           >
             <slot name="close-icon">
@@ -208,6 +263,7 @@ const getAppendTo = computed(() => {
           <SheetClose
             v-if="closable && closeIconPlacement === 'right'"
             as-child
+            :disabled="submitting"
             class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
           >
             <slot name="close-icon">
@@ -228,15 +284,13 @@ const getAppendTo = computed(() => {
         ref="wrapperRef"
         :class="
           cn('relative flex-1 overflow-y-auto p-3', contentClass, {
-            'overflow-hidden': showLoading,
+            'pointer-events-none': showLoading || submitting,
           })
         "
       >
-        <VbenLoading v-if="showLoading" class="size-full" spinning />
-
         <slot></slot>
       </div>
-
+      <VbenLoading v-if="showLoading || submitting" spinning />
       <SheetFooter
         v-if="showFooter"
         :class="
@@ -252,17 +306,18 @@ const getAppendTo = computed(() => {
             :is="components.DefaultButton || VbenButton"
             v-if="showCancelButton"
             variant="ghost"
+            :disabled="submitting"
             @click="() => drawerApi?.onCancel()"
           >
             <slot name="cancelText">
               {{ cancelText || $t('cancel') }}
             </slot>
           </component>
-
+          <slot name="center-footer"></slot>
           <component
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
-            :loading="confirmLoading"
+            :loading="confirmLoading || submitting"
             @click="() => drawerApi?.onConfirm()"
           >
             <slot name="confirmText">
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
index 21b11c56f..86555e3a1 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -64,11 +64,13 @@ export function useVbenDrawer<
             slots,
           );
       },
+      // eslint-disable-next-line vue/one-component-per-file
       {
-        inheritAttrs: false,
         name: 'VbenParentDrawer',
+        inheritAttrs: false,
       },
     );
+
     return [Drawer, extendedApi as ExtendedDrawerApi] as const;
   }
 
@@ -105,9 +107,10 @@ export function useVbenDrawer<
       return () =>
         h(VbenDrawer, { ...props, ...attrs, drawerApi: extendedApi }, slots);
     },
+    // eslint-disable-next-line vue/one-component-per-file
     {
-      inheritAttrs: false,
       name: 'VbenDrawer',
+      inheritAttrs: false,
     },
   );
   injectData.extendApi?.(extendedApi);
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/index.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/index.ts
index 56e7ade59..7b9c47f4b 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/index.ts
@@ -1,2 +1,3 @@
+export * from './alert';
 export * from './drawer';
 export * from './modal';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index d1fc63caa..27aa82162 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -44,6 +44,7 @@ export class ModalApi {
       confirmDisabled: false,
       confirmLoading: false,
       contentClass: '',
+      destroyOnClose: true,
       draggable: false,
       footer: true,
       footerClass: '',
@@ -180,4 +181,12 @@ export class ModalApi {
     }
     return this;
   }
+
+  /**
+   * 解除弹窗的锁定状态
+   * @description 解除由lock方法设置的锁定状态，是lock(false)的别名
+   */
+  unlock() {
+    return this.lock(false);
+  }
 }
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
index 9f86ab8c3..2dbab9e42 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -60,6 +60,10 @@ export interface ModalProps {
    * 弹窗描述
    */
   description?: string;
+  /**
+   * 在关闭时销毁弹窗
+   */
+  destroyOnClose?: boolean;
   /**
    * 是否可拖拽
    * @default false
@@ -153,10 +157,6 @@ export interface ModalApiOptions extends ModalState {
    * 独立的弹窗组件
    */
   connectedComponent?: Component;
-  /**
-   * 在关闭时销毁弹窗。仅在使用 connectedComponent 时有效
-   */
-  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index 35858f697..e9873ff76 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import type { ExtendedModalApi, ModalProps } from './modal';
 
-import { computed, nextTick, provide, ref, useId, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';
 
 import {
   useIsMobile,
@@ -34,6 +43,7 @@ interface Props extends ModalProps {
 
 const props = withDefaults(defineProps<Props>(), {
   appendToMain: false,
+  destroyOnClose: false,
   modalApi: undefined,
 });
 
@@ -67,6 +77,7 @@ const {
   confirmText,
   contentClass,
   description,
+  destroyOnClose,
   draggable,
   footer: showFooter,
   footerClass,
@@ -100,10 +111,15 @@ const { dragging, transform } = useModalDraggable(
   shouldDraggable,
 );
 
+const firstOpened = ref(false);
+const isClosed = ref(true);
+
 watch(
   () => state?.value?.isOpen,
   async (v) => {
     if (v) {
+      isClosed.value = false;
+      if (!firstOpened.value) firstOpened.value = true;
       await nextTick();
       if (!contentRef.value) return;
       const innerContentRef = contentRef.value.getContentRef();
@@ -113,19 +129,30 @@ watch(
       dialogRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
     }
   },
+  { immediate: true },
 );
 
-watch(
-  () => [showLoading.value, submitting.value],
-  ([l, s]) => {
-    if ((s || l) && wrapperRef.value) {
-      wrapperRef.value.scrollTo({
-        // behavior: 'smooth',
-        top: 0,
-      });
-    }
-  },
-);
+// watch(
+//   () => [showLoading.value, submitting.value],
+//   ([l, s]) => {
+//     if ((s || l) && wrapperRef.value) {
+//       wrapperRef.value.scrollTo({
+//         // behavior: 'smooth',
+//         top: 0,
+//       });
+//     }
+//   },
+// );
+
+/**
+ * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
+ */
+onDeactivated(() => {
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.modalApi?.close();
+  }
+});
 
 function handleFullscreen() {
   props.modalApi?.setState((prev) => {
@@ -172,8 +199,19 @@ function handleFocusOutside(e: Event) {
   e.stopPropagation();
 }
 const getAppendTo = computed(() => {
-  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+  return appendToMain.value
+    ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
+    : undefined;
+});
+
+const getForceMount = computed(() => {
+  return !unref(destroyOnClose) && unref(firstOpened);
 });
+
+function handleClosed() {
+  isClosed.value = true;
+  props.modalApi?.onClosed();
+}
 </script>
 <template>
   <Dialog
@@ -195,17 +233,20 @@ const getAppendTo = computed(() => {
               shouldFullscreen,
             'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
             'duration-300': !dragging,
+            hidden: isClosed,
           },
         )
       "
+      :force-mount="getForceMount"
       :modal="modal"
       :open="state?.isOpen"
-      :show-close="submitting ? false : closable"
+      :show-close="closable"
       :z-index="zIndex"
       :overlay-blur="overlayBlur"
       close-class="top-3"
       @close-auto-focus="handleFocusOutside"
-      @closed="() => modalApi?.onClosed()"
+      @closed="handleClosed"
+      :close-disabled="submitting"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
@@ -252,18 +293,13 @@ const getAppendTo = computed(() => {
         ref="wrapperRef"
         :class="
           cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
-            'overflow-hidden': showLoading || submitting,
+            'pointer-events-none': showLoading || submitting,
           })
         "
       >
-        <VbenLoading
-          v-if="showLoading || submitting"
-          class="size-full h-auto min-h-full"
-          spinning
-        />
         <slot></slot>
       </div>
-
+      <VbenLoading v-if="showLoading || submitting" spinning />
       <VbenIconButton
         v-if="fullscreenButton"
         class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
@@ -299,7 +335,7 @@ const getAppendTo = computed(() => {
               {{ cancelText || $t('cancel') }}
             </slot>
           </component>
-
+          <slot name="center-footer"></slot>
           <component
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 6cc0a30d5..0af484767 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -63,11 +63,13 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
             slots,
           );
       },
+      // eslint-disable-next-line vue/one-component-per-file
       {
-        inheritAttrs: false,
         name: 'VbenParentModal',
+        inheritAttrs: false,
       },
     );
+
     return [Modal, extendedApi as ExtendedModalApi] as const;
   }
 
@@ -85,13 +87,13 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   };
 
   const onClosed = mergedOptions.onClosed;
-
   mergedOptions.onClosed = () => {
     onClosed?.();
     if (mergedOptions.destroyOnClose) {
       injectData.reCreateModal?.();
     }
   };
+
   const api = new ModalApi(mergedOptions);
 
   const extendedApi: ExtendedModalApi = api as never;
@@ -113,12 +115,14 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
           slots,
         );
     },
+    // eslint-disable-next-line vue/one-component-per-file
     {
-      inheritAttrs: false,
       name: 'VbenModal',
+      inheritAttrs: false,
     },
   );
   injectData.extendApi?.(extendedApi);
+
   return [Modal, extendedApi] as const;
 }
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json b/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
index 8f649d4c8..11d2918f1 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index bd7da7463..a63f349c3 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -5,6 +5,8 @@ import type {
   AvatarRootProps,
 } from 'radix-vue';
 
+import type { CSSProperties } from 'vue';
+
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
@@ -16,6 +18,8 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
   class?: ClassType;
   dot?: boolean;
   dotClass?: ClassType;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  size?: number;
 }
 
 defineOptions({
@@ -27,17 +31,39 @@ const props = withDefaults(defineProps<Props>(), {
   as: 'button',
   dot: false,
   dotClass: 'bg-green-500',
+  fit: 'cover',
+});
+
+const imageStyle = computed<CSSProperties>(() => {
+  const { fit } = props;
+  if (fit) {
+    return { objectFit: fit };
+  }
+  return {};
 });
 
 const text = computed(() => {
   return props.alt.slice(-2).toUpperCase();
 });
+
+const rootStyle = computed(() => {
+  return props.size !== undefined && props.size > 0
+    ? {
+        height: `${props.size}px`,
+        width: `${props.size}px`,
+      }
+    : {};
+});
 </script>
 
 <template>
-  <div :class="props.class" class="relative flex flex-shrink-0 items-center">
+  <div
+    :class="props.class"
+    :style="rootStyle"
+    class="relative flex flex-shrink-0 items-center"
+  >
     <Avatar :class="props.class" class="size-full">
-      <AvatarImage :alt="alt" :src="src" />
+      <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
       <AvatarFallback>{{ text }}</AvatarFallback>
     </Avatar>
     <span
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
index 3cd42c0c5..88ba0e628 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
@@ -17,6 +17,23 @@ const emit = defineEmits<{ select: [string] }>();
 const forward = useForwardPropsEmits(props, emit);
 </script>
 <template>
-  <Breadcrumb v-if="styleType === 'normal'" v-bind="forward" />
-  <BreadcrumbBackground v-if="styleType === 'background'" v-bind="forward" />
+  <Breadcrumb
+    v-if="styleType === 'normal'"
+    v-bind="forward"
+    class="vben-breadcrumb"
+  />
+  <BreadcrumbBackground
+    v-if="styleType === 'background'"
+    v-bind="forward"
+    class="vben-breadcrumb"
+  />
 </template>
+<style lang="scss" scoped>
+/** 修复全局引入Antd时，ol和ul的默认样式会被修改的问题 */
+.vben-breadcrumb {
+  :deep(ol),
+  :deep(ul) {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button-group.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button-group.vue
new file mode 100644
index 000000000..035e88c4f
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button-group.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+defineOptions({ name: 'VbenButtonGroup' });
+
+withDefaults(
+  defineProps<{
+    border?: boolean;
+    gap?: number;
+    size?: 'large' | 'middle' | 'small';
+  }>(),
+  { border: false, gap: 0, size: 'middle' },
+);
+</script>
+<template>
+  <div
+    :class="
+      cn(
+        'vben-button-group rounded-md',
+        `size-${size}`,
+        gap ? 'with-gap' : 'no-gap',
+        $attrs.class as string,
+      )
+    "
+    :style="{ gap: gap ? `${gap}px` : '0px' }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vben-button-group {
+  display: inline-flex;
+
+  &.size-large :deep(button) {
+    height: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    .icon-wrapper {
+      margin-right: 0.4rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  &.size-middle :deep(button) {
+    height: 2rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+
+    .icon-wrapper {
+      margin-right: 0.2rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+
+  &.size-small :deep(button) {
+    height: 1.75rem;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.65rem;
+    line-height: 0.75rem;
+
+    .icon-wrapper {
+      margin-right: 0.1rem;
+
+      svg {
+        width: 0.65rem;
+        height: 0.65rem;
+      }
+    }
+  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+  }
+
+  &.no-gap > :deep(button):last-of-type {
+    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      border-left-width: 0;
+      border-radius: 0;
+    }
+  }
+}
+</style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index 7f519cfc5..bcb7a0c7e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -22,3 +22,32 @@ export interface VbenButtonProps {
   size?: ButtonVariantSize;
   variant?: ButtonVariants;
 }
+
+export type CustomRenderType = (() => Component | string) | string;
+
+export type ValueType = boolean | number | string;
+
+export interface VbenButtonGroupProps
+  extends Pick<VbenButtonProps, 'disabled'> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
+  beforeChange?: (
+    value: ValueType,
+    isChecked: boolean,
+  ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
+  btnClass?: any;
+  /** 按钮间隔距离 */
+  gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
+  multiple?: boolean;
+  /** 选项 */
+  options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
+  showIcon?: boolean;
+  /** 尺寸 */
+  size?: 'large' | 'middle' | 'small';
+}
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
new file mode 100644
index 000000000..4172d82b1
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import type { Arrayable } from '@vueuse/core';
+
+import type { ValueType, VbenButtonGroupProps } from './button';
+
+import { computed, ref, watch } from 'vue';
+
+import { Circle, CircleCheckBig, LoaderCircle } from '@vben-core/icons';
+import { cn, isFunction } from '@vben-core/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+import { VbenRenderContent } from '../render-content';
+import VbenButtonGroup from './button-group.vue';
+import Button from './button.vue';
+
+const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
+  gap: 0,
+  multiple: false,
+  showIcon: true,
+  size: 'middle',
+  allowClear: false,
+  maxCount: 0,
+});
+const emit = defineEmits(['btnClick']);
+const btnDefaultProps = computed(() => {
+  return {
+    ...objectOmit(props, ['options', 'btnClass', 'size', 'disabled']),
+    class: cn(props.btnClass),
+  };
+});
+const modelValue = defineModel<Arrayable<ValueType> | undefined>();
+
+const innerValue = ref<Array<ValueType>>([]);
+const loadingValues = ref<Array<ValueType>>([]);
+watch(
+  () => props.multiple,
+  (val) => {
+    if (val) {
+      modelValue.value = innerValue.value;
+    } else {
+      modelValue.value =
+        innerValue.value.length > 0 ? innerValue.value[0] : undefined;
+    }
+  },
+);
+
+watch(
+  () => modelValue.value,
+  (val) => {
+    if (Array.isArray(val)) {
+      const arrVal = val.filter((v) => v !== undefined);
+      if (arrVal.length > 0) {
+        innerValue.value = props.multiple
+          ? [...arrVal]
+          : [arrVal[0] as ValueType];
+      } else {
+        innerValue.value = [];
+      }
+    } else {
+      innerValue.value = val === undefined ? [] : [val as ValueType];
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+async function onBtnClick(value: ValueType) {
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    try {
+      loadingValues.value.push(value);
+      const canChange = await props.beforeChange(
+        value,
+        !innerValue.value.includes(value),
+      );
+      if (canChange === false) {
+        return;
+      }
+    } finally {
+      loadingValues.value.splice(loadingValues.value.indexOf(value), 1);
+    }
+  }
+
+  if (props.multiple) {
+    if (innerValue.value.includes(value)) {
+      innerValue.value = innerValue.value.filter((item) => item !== value);
+    } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
+      innerValue.value.push(value);
+    }
+    modelValue.value = innerValue.value;
+  } else {
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
+  }
+  emit('btnClick', value);
+}
+</script>
+<template>
+  <VbenButtonGroup
+    :size="props.size"
+    :gap="props.gap"
+    class="vben-check-button-group"
+  >
+    <Button
+      v-for="(btn, index) in props.options"
+      :key="index"
+      :class="cn('border', props.btnClass)"
+      :disabled="
+        props.disabled ||
+        loadingValues.includes(btn.value) ||
+        (!props.multiple && loadingValues.length > 0)
+      "
+      v-bind="btnDefaultProps"
+      :variant="innerValue.includes(btn.value) ? 'default' : 'outline'"
+      @click="onBtnClick(btn.value)"
+      type="button"
+    >
+      <div class="icon-wrapper" v-if="props.showIcon">
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
+      </div>
+      <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
+        <VbenRenderContent :content="btn.label" />
+      </slot>
+    </Button>
+  </VbenButtonGroup>
+</template>
+<style lang="scss" scoped>
+.vben-check-button-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  &:deep(.size-large) button {
+    .icon-wrapper {
+      margin-right: 0.3rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  &:deep(.size-middle) button {
+    .icon-wrapper {
+      margin-right: 0.2rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+
+  &:deep(.size-small) button {
+    .icon-wrapper {
+      margin-right: 0.1rem;
+
+      svg {
+        width: 0.65rem;
+        height: 0.65rem;
+      }
+    }
+  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-right-width: 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      margin-right: -1px;
+      border-left-width: 1px;
+    }
+  }
+}
+</style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
index 4afd1c25e..aa3d9ef84 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
@@ -1,3 +1,5 @@
 export type * from './button';
+export { default as VbenButtonGroup } from './button-group.vue';
 export { default as VbenButton } from './button.vue';
+export { default as VbenCheckButtonGroup } from './check-button-group.vue';
 export { default as VbenIconButton } from './icon-button.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
index 3c2e9da23..6d812e86e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -7,7 +7,7 @@ import { useForwardPropsEmits } from 'radix-vue';
 
 import { Checkbox } from '../../ui/checkbox';
 
-const props = defineProps<CheckboxRootProps>();
+const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
 
 const emits = defineEmits<CheckboxRootEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
index f252049ca..50fece66b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
@@ -37,7 +37,18 @@ const props = withDefaults(defineProps<Props>(), {
   useEasing: true,
 });
 
-const emit = defineEmits(['onStarted', 'onFinished']);
+const emit = defineEmits<{
+  finished: [];
+  /**
+   * @deprecated 请使用{@link finished}事件
+   */
+  onFinished: [];
+  /**
+   * @deprecated 请使用{@link started}事件
+   */
+  onStarted: [];
+  started: [];
+}>();
 
 const source = ref(props.startVal);
 const disabled = ref(false);
@@ -73,8 +84,14 @@ function run() {
   outputValue = useTransition(source, {
     disabled,
     duration: props.duration,
-    onFinished: () => emit('onFinished'),
-    onStarted: () => emit('onStarted'),
+    onFinished: () => {
+      emit('finished');
+      emit('onFinished');
+    },
+    onStarted: () => {
+      emit('started');
+      emit('onStarted');
+    },
     ...(props.useEasing
       ? { transition: TransitionPresets[props.transition] }
       : {}),
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index 1c3b44703..d8be09a16 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -6,6 +6,10 @@ interface Props {
    * @zh_CN 是否收起文本
    */
   collapsed?: boolean;
+  /**
+   * @zh_CN Logo 图片适应方式
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /**
    * @zh_CN Logo 跳转地址
    */
@@ -38,6 +42,7 @@ withDefaults(defineProps<Props>(), {
   logoSize: 32,
   src: '',
   theme: 'light',
+  fit: 'cover',
 });
 </script>
 
@@ -52,14 +57,17 @@ withDefaults(defineProps<Props>(), {
         v-if="src"
         :alt="text"
         :src="src"
-        class="relative w-8 rounded-none bg-transparent"
+        :size="logoSize"
+        :fit="fit"
+        class="relative rounded-none bg-transparent"
       />
-      <span
-        v-if="!collapsed"
-        class="text-foreground truncate text-nowrap font-semibold"
-      >
-        {{ text }}
-      </span>
+      <template v-if="!collapsed">
+        <slot name="text">
+          <span class="text-foreground truncate text-nowrap font-semibold">
+            {{ text }}
+          </span>
+        </slot>
+      </template>
     </a>
   </div>
 </template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
index 07d5d0621..c398bddc2 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -21,6 +21,7 @@ interface Props extends PopoverRootProps {
   class?: ClassType;
   contentClass?: ClassType;
   contentProps?: PopoverContentProps;
+  triggerClass?: ClassType;
 }
 
 const props = withDefaults(defineProps<Props>(), {});
@@ -32,6 +33,7 @@ const delegatedProps = computed(() => {
     class: _cls,
     contentClass: _,
     contentProps: _cProps,
+    triggerClass: _tClass,
     ...delegated
   } = props;
 
@@ -43,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <PopoverRoot v-bind="forwarded">
-    <PopoverTrigger>
+    <PopoverTrigger :class="triggerClass">
       <slot name="trigger"></slot>
 
       <PopoverContent
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
index 87f9769ba..1816051c6 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -3,7 +3,7 @@ import type { Component, PropType } from 'vue';
 
 import { defineComponent, h } from 'vue';
 
-import { isFunction, isObject } from '@vben-core/shared/utils';
+import { isFunction, isObject, isString } from '@vben-core/shared/utils';
 
 export default defineComponent({
   name: 'RenderContent',
@@ -14,6 +14,10 @@ export default defineComponent({
         | undefined,
       type: [Object, String, Function],
     },
+    renderBr: {
+      default: false,
+      type: Boolean,
+    },
   },
   setup(props, { attrs, slots }) {
     return () => {
@@ -24,7 +28,19 @@ export default defineComponent({
         (isObject(props.content) || isFunction(props.content)) &&
         props.content !== null;
       if (!isComponent) {
-        return props.content;
+        if (props.renderBr && isString(props.content)) {
+          const lines = props.content.split('\n');
+          const result = [];
+          for (const [i, line] of lines.entries()) {
+            result.push(h('p', { key: i }, line));
+            // if (i < lines.length - 1) {
+            //   result.push(h('br'));
+            // }
+          }
+          return result;
+        } else {
+          return props.content;
+        }
       }
       return h(props.content as never, {
         ...attrs,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index f066b91ac..e101ba59a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -39,6 +39,14 @@ const isAtRight = ref(false);
 const isAtBottom = ref(false);
 const isAtLeft = ref(true);
 
+/**
+ * We have to check if the scroll amount is close enough to some threshold in order to
+ * more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
+ * numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+ */
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+
 const showShadowTop = computed(() => props.shadow && props.shadowTop);
 const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
 const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
@@ -60,14 +68,18 @@ function handleScroll(event: Event) {
   const target = event.target as HTMLElement;
   const scrollTop = target?.scrollTop ?? 0;
   const scrollLeft = target?.scrollLeft ?? 0;
-  const offsetHeight = target?.offsetHeight ?? 0;
-  const offsetWidth = target?.offsetWidth ?? 0;
+  const clientHeight = target?.clientHeight ?? 0;
+  const clientWidth = target?.clientWidth ?? 0;
   const scrollHeight = target?.scrollHeight ?? 0;
   const scrollWidth = target?.scrollWidth ?? 0;
   isAtTop.value = scrollTop <= 0;
   isAtLeft.value = scrollLeft <= 0;
-  isAtBottom.value = scrollTop + offsetHeight >= scrollHeight;
-  isAtRight.value = scrollLeft + offsetWidth >= scrollWidth;
+  isAtBottom.value =
+    Math.abs(scrollTop) + clientHeight >=
+    scrollHeight - ARRIVED_STATE_THRESHOLD_PIXELS;
+  isAtRight.value =
+    Math.abs(scrollLeft) + clientWidth >=
+    scrollWidth - ARRIVED_STATE_THRESHOLD_PIXELS;
 
   emit('scrollAt', {
     bottom: isAtBottom.value,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
index f1a8e570c..25ad42e39 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -10,7 +10,7 @@ import TabsIndicator from './tabs-indicator.vue';
 
 interface Props {
   defaultValue?: string;
-  tabs: SegmentedItem[];
+  tabs?: SegmentedItem[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
index 52e2b38f5..24b8ea2a9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { CircleX } from '@vben-core/icons';
+
 import {
   Select,
   SelectContent,
@@ -8,17 +10,33 @@ import {
 } from '../../ui';
 
 interface Props {
+  allowClear?: boolean;
   class?: any;
   options?: Array<{ label: string; value: string }>;
   placeholder?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  allowClear: false,
+});
+
+const modelValue = defineModel<string>();
+
+function handleClear() {
+  modelValue.value = undefined;
+}
 </script>
 <template>
-  <Select>
-    <SelectTrigger :class="props.class">
-      <SelectValue :placeholder="placeholder" />
+  <Select v-model="modelValue">
+    <SelectTrigger :class="props.class" class="flex w-full items-center">
+      <SelectValue class="flex-auto text-left" :placeholder="placeholder" />
+      <CircleX
+        @pointerdown.stop
+        @click.stop.prevent="handleClear"
+        v-if="allowClear && modelValue"
+        data-clear-button
+        class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100"
+      />
     </SelectTrigger>
     <SelectContent>
       <template v-for="item in options" :key="item.value">
@@ -32,4 +50,8 @@ const props = defineProps<Props>();
 button[role='combobox'][data-placeholder] {
   color: hsl(var(--muted-foreground));
 }
+
+button {
+  --ring: var(--primary);
+}
 </style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
index 756fa0fdf..0e1aa810a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 // const startTime = ref(0);
 const showSpinner = ref(false);
-const renderSpinner = ref(true);
+const renderSpinner = ref(false);
 const timer = ref<ReturnType<typeof setTimeout>>();
 
 watch(
@@ -69,7 +69,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'z-100 dark:bg-overlay bg-overlay-content pointer-events-none absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
+        'z-100 dark:bg-overlay bg-overlay-content absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },
@@ -78,15 +78,18 @@ function onTransitionEnd() {
     "
     @transitionend="onTransitionEnd"
   >
-    <span class="dot relative inline-block size-9 text-3xl">
-      <i
-        v-for="index in 4"
-        :key="index"
-        class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
-      ></i>
-    </span>
-
-    <div v-if="text" class="mt-4 text-xs">{{ text }}</div>
+    <slot name="icon" v-if="renderSpinner">
+      <span class="dot relative inline-block size-9 text-3xl">
+        <i
+          v-for="index in 4"
+          :key="index"
+          class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
+        ></i>
+      </span>
+    </slot>
+
+    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
+    <slot></slot>
   </div>
 </template>
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index 58eab2ebd..cde390145 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 // const startTime = ref(0);
 const showSpinner = ref(false);
-const renderSpinner = ref(true);
+const renderSpinner = ref(false);
 const timer = ref<ReturnType<typeof setTimeout>>();
 
 watch(
@@ -74,6 +74,7 @@ function onTransitionEnd() {
   >
     <div
       :class="{ paused: !renderSpinner }"
+      v-if="renderSpinner"
       class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
     ></div>
   </div>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 000000000..f20528872
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue';
+
+import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot></slot>
+  </AlertDialogRoot>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 000000000..6b2d75c8b
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from 'radix-vue';
+
+import { AlertDialogAction } from 'radix-vue';
+
+const props = defineProps<AlertDialogActionProps>();
+</script>
+
+<template>
+  <AlertDialogAction v-bind="props">
+    <slot></slot>
+  </AlertDialogAction>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 000000000..9f1d2903a
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from 'radix-vue';
+
+import { AlertDialogCancel } from 'radix-vue';
+
+const props = defineProps<AlertDialogCancelProps>();
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="props">
+    <slot></slot>
+  </AlertDialogCancel>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 000000000..522ada37b
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type {
+  AlertDialogContentEmits,
+  AlertDialogContentProps,
+} from 'radix-vue';
+
+import type { ClassType } from '@vben-core/typings';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  AlertDialogContent,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+import AlertDialogOverlay from './AlertDialogOverlay.vue';
+
+const props = withDefaults(
+  defineProps<
+    AlertDialogContentProps & {
+      centered?: boolean;
+      class?: ClassType;
+      modal?: boolean;
+      open?: boolean;
+      overlayBlur?: number;
+      zIndex?: number;
+    }
+  >(),
+  { modal: true },
+);
+const emits = defineEmits<
+  AlertDialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, modal: _modal, open: _open, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const contentRef = ref<InstanceType<typeof AlertDialogContent> | null>(null);
+function onAnimationEnd(event: AnimationEvent) {
+  // 只有在 contentRef 的动画结束时才触发 opened/closed 事件
+  if (event.target === contentRef.value?.$el) {
+    if (props.open) {
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  }
+}
+defineExpose({
+  getContentRef: () => contentRef.value,
+});
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <Transition name="fade" appear>
+      <AlertDialogOverlay
+        v-if="open && modal"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position: 'fixed',
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
+        @click="() => emits('close')"
+      />
+    </Transition>
+    <AlertDialogContent
+      ref="contentRef"
+      :style="{ ...(zIndex ? { zIndex } : {}), position: 'fixed' }"
+      @animationend="onAnimationEnd"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-popup bg-background p-6 shadow-lg outline-none sm:rounded-xl',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          {
+            'data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%]':
+              !centered,
+            'data-[state=open]:slide-in-from-top-[98%] data-[state=closed]:slide-out-to-top-[148%]':
+              centered,
+            'top-[10vh]': !centered,
+            'top-1/2 -translate-y-1/2': centered,
+          },
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 000000000..da231989e
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { AlertDialogDescriptionProps } from 'radix-vue';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AlertDialogDescription, useForwardProps } from 'radix-vue';
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot></slot>
+  </AlertDialogDescription>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
new file mode 100644
index 000000000..5673319db
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vben-core/composables';
+
+useScrollLock();
+</script>
+<template>
+  <div class="bg-overlay z-popup inset-0"></div>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 000000000..01d4759f0
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from 'radix-vue';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AlertDialogTitle, useForwardProps } from 'radix-vue';
+
+const props = defineProps<AlertDialogTitleProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot></slot>
+  </AlertDialogTitle>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
new file mode 100644
index 000000000..ef14f2d58
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
@@ -0,0 +1,6 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
index 0fc81375a..d771d8938 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@@ -5,14 +5,16 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Check } from 'lucide-vue-next';
+import { Check, Minus } from 'lucide-vue-next';
 import {
   CheckboxIndicator,
   CheckboxRoot,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<CheckboxRootProps & { class?: any }>();
+const props = defineProps<
+  CheckboxRootProps & { class?: any; indeterminate?: boolean }
+>();
 const emits = defineEmits<CheckboxRootEmits>();
 
 const delegatedProps = computed(() => {
@@ -29,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
@@ -38,7 +40,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       class="flex h-full w-full items-center justify-center text-current"
     >
       <slot>
-        <Check class="h-4 w-4" />
+        <component :is="indeterminate ? Minus : Check" class="h-4 w-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index e7ef1b589..9f0789878 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -23,6 +23,7 @@ const props = withDefaults(
       appendTo?: HTMLElement | string;
       class?: ClassType;
       closeClass?: ClassType;
+      closeDisabled?: boolean;
       modal?: boolean;
       open?: boolean;
       overlayBlur?: number;
@@ -30,7 +31,7 @@ const props = withDefaults(
       zIndex?: number;
     }
   >(),
-  { appendTo: 'body', showClose: true },
+  { appendTo: 'body', closeDisabled: false, showClose: true },
 );
 const emits = defineEmits<
   DialogContentEmits & { close: []; closed: []; opened: [] }
@@ -108,6 +109,7 @@ defineExpose({
 
       <DialogClose
         v-if="showClose"
+        :disabled="closeDisabled"
         :class="
           cn(
             'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none',
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
index 02e761457..1be71f862 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
@@ -1,4 +1,5 @@
 export * from './accordion';
+export * from './alert-dialog';
 export * from './avatar';
 export * from './badge';
 export * from './breadcrumb';
@@ -27,3 +28,4 @@ export * from './textarea';
 export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './tree';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
index 68b90db2b..6dfd4c8b8 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
@@ -30,3 +30,8 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     "
   />
 </template>
+<style lang="scss" scoped>
+input {
+  --ring: var(--primary);
+}
+</style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
new file mode 100644
index 000000000..1abd4c505
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
@@ -0,0 +1,2 @@
+export { default as VbenTree } from './tree.vue';
+export type { FlattenedItem } from 'radix-vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
new file mode 100644
index 000000000..03117b363
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -0,0 +1,340 @@
+<script lang="ts" setup>
+import type { Arrayable } from '@vueuse/core';
+import type { FlattenedItem } from 'radix-vue';
+
+import type { ClassType, Recordable } from '@vben-core/typings';
+
+import type { TreeProps } from './types';
+
+import { onMounted, ref, watchEffect } from 'vue';
+
+import { ChevronRight, IconifyIcon } from '@vben-core/icons';
+import { cn, get } from '@vben-core/shared/utils';
+
+import { TreeItem, TreeRoot } from 'radix-vue';
+
+import { Checkbox } from '../checkbox';
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  allowClear: false,
+  autoCheckParent: true,
+  bordered: false,
+  checkStrictly: false,
+  defaultExpandedKeys: () => [],
+  defaultExpandedLevel: 0,
+  disabled: false,
+  expanded: () => [],
+  iconField: 'icon',
+  labelField: 'label',
+  multiple: false,
+  showIcon: true,
+  transition: true,
+  valueField: 'value',
+  childrenField: 'children',
+});
+
+const emits = defineEmits<{
+  expand: [value: FlattenedItem<Recordable<any>>];
+  select: [value: FlattenedItem<Recordable<any>>];
+}>();
+
+interface InnerFlattenItem<T = Recordable<any>, P = number | string> {
+  hasChildren: boolean;
+  level: number;
+  parents: P[];
+  value: T;
+}
+
+function flatten<T = Recordable<any>, P = number | string>(
+  items: T[],
+  childrenField: string = 'children',
+  level = 0,
+  parents: P[] = [],
+): InnerFlattenItem<T, P>[] {
+  const result: InnerFlattenItem<T, P>[] = [];
+  items.forEach((item) => {
+    const children = get(item, childrenField) as Array<T>;
+    const val = {
+      hasChildren: Array.isArray(children) && children.length > 0,
+      level,
+      parents: [...parents],
+      value: item,
+    };
+    result.push(val);
+    if (val.hasChildren)
+      result.push(
+        ...flatten(children, childrenField, level + 1, [
+          ...parents,
+          get(item, props.valueField),
+        ]),
+      );
+  });
+  return result;
+}
+
+const flattenData = ref<Array<InnerFlattenItem>>([]);
+const modelValue = defineModel<Arrayable<number | string>>();
+const expanded = ref<Array<number | string>>(props.defaultExpandedKeys ?? []);
+
+const treeValue = ref();
+
+onMounted(() => {
+  watchEffect(() => {
+    flattenData.value = flatten(props.treeData, props.childrenField);
+    updateTreeValue();
+    if (
+      props.defaultExpandedLevel !== undefined &&
+      props.defaultExpandedLevel > 0
+    )
+      expandToLevel(props.defaultExpandedLevel);
+  });
+});
+
+function getItemByValue(value: number | string) {
+  return flattenData.value.find(
+    (item) => get(item.value, props.valueField) === value,
+  )?.value;
+}
+
+function updateTreeValue() {
+  const val = modelValue.value;
+  if (val === undefined) {
+    treeValue.value = undefined;
+  } else {
+    treeValue.value = Array.isArray(val)
+      ? val.map((v) => getItemByValue(v))
+      : getItemByValue(val);
+  }
+}
+
+function updateModelValue(val: Arrayable<Recordable<any>>) {
+  modelValue.value = Array.isArray(val)
+    ? val.map((v) => get(v, props.valueField))
+    : get(val, props.valueField);
+}
+
+function expandToLevel(level: number) {
+  const keys: string[] = [];
+  flattenData.value.forEach((item) => {
+    if (item.level <= level - 1) {
+      keys.push(get(item.value, props.valueField));
+    }
+  });
+  expanded.value = keys;
+}
+
+function collapseNodes(value: Arrayable<number | string>) {
+  const keys = new Set(Array.isArray(value) ? value : [value]);
+  expanded.value = expanded.value.filter((key) => !keys.has(key));
+}
+
+function expandNodes(value: Arrayable<number | string>) {
+  const keys = [...(Array.isArray(value) ? value : [value])];
+  keys.forEach((key) => {
+    if (expanded.value.includes(key)) return;
+    const item = getItemByValue(key);
+    if (item) {
+      expanded.value.push(key);
+    }
+  });
+}
+
+function expandAll() {
+  expanded.value = flattenData.value
+    .filter((item) => item.hasChildren)
+    .map((item) => get(item.value, props.valueField));
+}
+
+function collapseAll() {
+  expanded.value = [];
+}
+
+function onToggle(item: FlattenedItem<Recordable<any>>) {
+  emits('expand', item);
+}
+function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
+  if (
+    !props.checkStrictly &&
+    props.multiple &&
+    props.autoCheckParent &&
+    isSelected
+  ) {
+    flattenData.value
+      .find((i) => {
+        return (
+          get(i.value, props.valueField) === get(item.value, props.valueField)
+        );
+      })
+      ?.parents?.forEach((p) => {
+        if (Array.isArray(modelValue.value) && !modelValue.value.includes(p)) {
+          modelValue.value.push(p);
+        }
+      });
+  }
+  updateTreeValue();
+  emits('select', item);
+}
+
+defineExpose({
+  collapseAll,
+  collapseNodes,
+  expandAll,
+  expandNodes,
+  expandToLevel,
+  getItemByValue,
+});
+</script>
+<template>
+  <TreeRoot
+    :get-key="(item) => get(item, valueField)"
+    :get-children="(item) => get(item, childrenField)"
+    :items="treeData"
+    :model-value="treeValue"
+    v-model:expanded="expanded as string[]"
+    :default-expanded="defaultExpandedKeys as string[]"
+    :propagate-select="!checkStrictly"
+    :multiple="multiple"
+    :disabled="disabled"
+    :selection-behavior="allowClear || multiple ? 'toggle' : 'replace'"
+    @update:model-value="updateModelValue"
+    v-slot="{ flattenItems }"
+    :class="
+      cn(
+        'text-blackA11 container select-none list-none rounded-lg p-2 text-sm font-medium',
+        $attrs.class as unknown as ClassType,
+        bordered ? 'border' : '',
+      )
+    "
+  >
+    <div class="w-full" v-if="$slots.header">
+      <slot name="header"> </slot>
+    </div>
+    <TransitionGroup :name="transition ? 'fade' : ''">
+      <TreeItem
+        v-for="item in flattenItems"
+        v-slot="{
+          isExpanded,
+          isSelected,
+          isIndeterminate,
+          handleSelect,
+          handleToggle,
+        }"
+        :key="item._id"
+        :style="{ 'padding-left': `${item.level - 0.5}rem` }"
+        :class="
+          cn('cursor-pointer', getNodeClass?.(item), {
+            'data-[selected]:bg-accent': !multiple,
+            'cursor-not-allowed': disabled,
+          })
+        "
+        v-bind="
+          Object.assign(item.bind, {
+            onfocus: disabled ? 'this.blur()' : undefined,
+          })
+        "
+        @select="
+          (event) => {
+            if (event.detail.originalEvent.type === 'click') {
+              event.preventDefault();
+            }
+            !disabled && onSelect(item, event.detail.isSelected);
+          }
+        "
+        @toggle="
+          (event) => {
+            if (event.detail.originalEvent.type === 'click') {
+              event.preventDefault();
+            }
+            !disabled && onToggle(item);
+          }
+        "
+        class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
+      >
+        <ChevronRight
+          v-if="item.hasChildren"
+          class="size-4 cursor-pointer transition"
+          :class="{ 'rotate-90': isExpanded }"
+          @click.stop="
+            () => {
+              handleToggle();
+              onToggle(item);
+            }
+          "
+        />
+        <div v-else class="h-4 w-4">
+          <!-- <IconifyIcon v-if="item.value.icon" :icon="item.value.icon" /> -->
+        </div>
+        <Checkbox
+          v-if="multiple"
+          :checked="isSelected"
+          :disabled="disabled"
+          :indeterminate="isIndeterminate"
+          @click="
+            () => {
+              !disabled && handleSelect();
+              // onSelect(item, !isSelected);
+            }
+          "
+        />
+        <div
+          class="flex items-center gap-1 pl-2"
+          @click="
+            (_event) => {
+              // $event.stopPropagation();
+              // $event.preventDefault();
+              !disabled && handleSelect();
+              // onSelect(item, !isSelected);
+            }
+          "
+        >
+          <slot name="node" v-bind="item">
+            <IconifyIcon
+              class="size-4"
+              v-if="showIcon && get(item.value, iconField)"
+              :icon="get(item.value, iconField)"
+            />
+            {{ get(item.value, labelField) }}
+          </slot>
+        </div>
+      </TreeItem>
+    </TransitionGroup>
+    <div class="w-full" v-if="$slots.footer">
+      <slot name="footer"> </slot>
+    </div>
+  </TreeRoot>
+</template>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  padding: 0;
+  list-style-type: none;
+}
+
+.item {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  background-color: #f3f3f3;
+  border: 1px solid #666;
+}
+
+/* 1. 声明过渡效果 */
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* 2. 声明进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+/* 3. 确保离开的项目被移除出了布局流
+      以便正确地计算移动时的动画效果。 */
+.fade-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
new file mode 100644
index 000000000..5c394f0da
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
@@ -0,0 +1,40 @@
+import type { Arrayable } from '@vueuse/core';
+import type { FlattenedItem } from 'radix-vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+export interface TreeProps {
+  /** 单选时允许取消已有选项 */
+  allowClear?: boolean;
+  /** 非关联选择时，自动选中上级节点 */
+  autoCheckParent?: boolean;
+  /** 显示边框 */
+  bordered?: boolean;
+  /** 取消父子关联选择 */
+  checkStrictly?: boolean;
+  /** 子级字段名 */
+  childrenField?: string;
+  /** 默认展开的键 */
+  defaultExpandedKeys?: Array<number | string>;
+  /** 默认展开的级别（优先级高于defaultExpandedKeys） */
+  defaultExpandedLevel?: number;
+  /** 默认值 */
+  defaultValue?: Arrayable<number | string>;
+  /** 禁用 */
+  disabled?: boolean;
+  /** 自定义节点类名 */
+  getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
+  iconField?: string;
+  /** label字段 */
+  labelField?: string;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 显示由iconField指定的图标 */
+  showIcon?: boolean;
+  /** 启用展开收缩动画 */
+  transition?: boolean;
+  /** 树数据 */
+  treeData: Recordable<any>[];
+  /** 值字段 */
+  valueField?: string;
+}
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json b/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json
index af32067e0..bc84b4d6a 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index eb977ce49..7033f263b 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -12,7 +12,6 @@ interface Props extends TabsProps {}
 
 defineOptions({
   name: 'VbenTabsChrome',
-  // eslint-disable-next-line perfectionist/sort-objects
   inheritAttrs: false,
 });
 
@@ -41,14 +40,14 @@ const style = computed(() => {
 
 const tabsView = computed(() => {
   return props.tabs.map((tab) => {
-    const { fullPath, meta, name, path } = tab || {};
+    const { fullPath, meta, name, path, key } = tab || {};
     const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
     return {
       affixTab: !!affixTab,
       closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
       fullPath,
       icon: icon as string,
-      key: fullPath || path,
+      key,
       meta,
       name,
       path,
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
index 6197ff96e..4333fc4b1 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -12,7 +12,7 @@ interface Props extends TabsProps {}
 
 defineOptions({
   name: 'VbenTabs',
-  // eslint-disable-next-line perfectionist/sort-objects
+
   inheritAttrs: false,
 });
 const props = withDefaults(defineProps<Props>(), {
@@ -47,14 +47,14 @@ const typeWithClass = computed(() => {
 
 const tabsView = computed(() => {
   return props.tabs.map((tab) => {
-    const { fullPath, meta, name, path } = tab || {};
+    const { fullPath, meta, name, path, key } = tab || {};
     const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
     return {
       affixTab: !!affixTab,
       closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
       fullPath,
       icon: icon as string,
-      key: fullPath || path,
+      key,
       meta,
       name,
       path,
diff --git a/apps/vben5/packages/constants/README.md b/apps/vben5/packages/constants/README.md
index 1fae490bf..67936a642 100644
--- a/apps/vben5/packages/constants/README.md
+++ b/apps/vben5/packages/constants/README.md
@@ -15,5 +15,5 @@ pnpm add @vben/constants
 ### 使用
 
 ```ts
-import { DEFAULT_HOME_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
 ```
diff --git a/apps/vben5/packages/constants/package.json b/apps/vben5/packages/constants/package.json
index dae564a41..c71e11847 100644
--- a/apps/vben5/packages/constants/package.json
+++ b/apps/vben5/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/constants/src/core.ts b/apps/vben5/packages/constants/src/core.ts
index 24db39dad..3861466aa 100644
--- a/apps/vben5/packages/constants/src/core.ts
+++ b/apps/vben5/packages/constants/src/core.ts
@@ -3,11 +3,6 @@
  */
 export const LOGIN_PATH = '/auth/login';
 
-/**
- * @zh_CN 默认首页地址
- */
-export const DEFAULT_HOME_PATH = '/analytics';
-
 export interface LanguageOption {
   label: string;
   value: 'en-US' | 'zh-CN';
diff --git a/apps/vben5/packages/effects/access/package.json b/apps/vben5/packages/effects/access/package.json
index 7a24ba8bb..e4c39eb2a 100644
--- a/apps/vben5/packages/effects/access/package.json
+++ b/apps/vben5/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/access/src/accessible.ts b/apps/vben5/packages/effects/access/src/accessible.ts
index 960af3fbc..eb9081486 100644
--- a/apps/vben5/packages/effects/access/src/accessible.ts
+++ b/apps/vben5/packages/effects/access/src/accessible.ts
@@ -1,14 +1,20 @@
+import type { Component, DefineComponent } from 'vue';
+
 import type {
   AccessModeType,
   GenerateMenuAndRoutesOptions,
   RouteRecordRaw,
 } from '@vben/types';
 
+import { defineComponent, h } from 'vue';
+
 import {
   cloneDeep,
   generateMenus,
   generateRoutesByBackend,
   generateRoutesByFrontend,
+  isFunction,
+  isString,
   mapTree,
 } from '@vben/utils';
 
@@ -24,6 +30,9 @@ async function generateAccessible(
 
   const root = router.getRoutes().find((item) => item.path === '/');
 
+  // 获取已有的路由名称列表
+  const names = root?.children?.map((item) => item.name) ?? [];
+
   // 动态添加到router实例内
   accessibleRoutes.forEach((route) => {
     if (root && !route.meta?.noBasicLayout) {
@@ -32,7 +41,18 @@ async function generateAccessible(
       if (route.children && route.children.length > 0) {
         delete route.component;
       }
-      root.children?.push(route);
+      // 根据router name判断，如果路由已经存在，则不再添加
+      if (names?.includes(route.name)) {
+        // 找到已存在的路由索引并更新，不更新会造成切换用户时，一级目录未更新，homePath 在二级目录导致的404问题
+        const index = root.children?.findIndex(
+          (item) => item.name === route.name,
+        );
+        if (index !== undefined && index !== -1 && root.children) {
+          root.children[index] = route;
+        }
+      } else {
+        root.children?.push(route);
+      }
     } else {
       router.addRoute(route);
     }
@@ -46,7 +66,7 @@ async function generateAccessible(
   }
 
   // 生成菜单
-  const accessibleMenus = await generateMenus(accessibleRoutes, options.router);
+  const accessibleMenus = generateMenus(accessibleRoutes, options.router);
 
   return { accessibleMenus, accessibleRoutes };
 }
@@ -76,13 +96,45 @@ async function generateRoutes(
       );
       break;
     }
+    case 'mixed': {
+      const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
+        generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
+        generateRoutesByBackend(options),
+      ]);
+
+      resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
+      break;
+    }
   }
 
   /**
    * 调整路由树，做以下处理：
    * 1. 对未添加redirect的路由添加redirect
+   * 2. 将懒加载的组件名称修改为当前路由的名称（如果启用了keep-alive的话）
    */
   resultRoutes = mapTree(resultRoutes, (route) => {
+    // 重新包装component，使用与路由名称相同的name以支持keep-alive的条件缓存。
+    if (
+      route.meta?.keepAlive &&
+      isFunction(route.component) &&
+      route.name &&
+      isString(route.name)
+    ) {
+      const originalComponent = route.component as () => Promise<{
+        default: Component | DefineComponent;
+      }>;
+      route.component = async () => {
+        const component = await originalComponent();
+        if (!component.default) return component;
+        return defineComponent({
+          name: route.name as string,
+          setup(props, { attrs, slots }) {
+            return () => h(component.default, { ...props, ...attrs }, slots);
+          },
+        });
+      };
+    }
+
     // 如果有redirect或者没有子路由，则直接返回
     if (route.redirect || !route.children || route.children.length === 0) {
       return route;
diff --git a/apps/vben5/packages/effects/common-ui/package.json b/apps/vben5/packages/effects/common-ui/package.json
index aca45c7a1..c9674985a 100644
--- a/apps/vben5/packages/effects/common-ui/package.json
+++ b/apps/vben5/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -17,6 +17,14 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
+    },
+    "./es/tippy": {
+      "types": "./src/components/tippy/index.ts",
+      "default": "./src/components/tippy/index.ts"
+    },
+    "./es/loading": {
+      "types": "./src/components/loading/index.ts",
+      "default": "./src/components/loading/index.ts"
     }
   },
   "dependencies": {
@@ -35,6 +43,7 @@
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",
+    "vue-json-viewer": "catalog:",
     "vue-router": "catalog:",
     "vue-tippy": "catalog:"
   },
diff --git a/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue b/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue
index c871fe20f..a3e72b440 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -54,6 +54,20 @@ interface Props {
   visibleEvent?: string;
   /** 组件的v-model属性名，默认为modelValue。部分组件可能为value */
   modelPropName?: string;
+  /**
+   * 自动选择
+   * - `first`：自动选择第一个选项
+   * - `last`：自动选择最后一个选项
+   * - `one`: 当请求的结果只有一个选项时，自动选择该选项
+   * - 函数：自定义选择逻辑，函数的参数为请求的结果数组，返回值为选择的选项
+   * - false：不自动选择(默认)
+   */
+  autoSelect?:
+    | 'first'
+    | 'last'
+    | 'one'
+    | ((item: OptionsItem[]) => OptionsItem)
+    | false;
 }
 
 defineOptions({ name: 'ApiComponent', inheritAttrs: false });
@@ -74,6 +88,7 @@ const props = withDefaults(defineProps<Props>(), {
   afterFetch: undefined,
   modelPropName: 'modelValue',
   api: undefined,
+  autoSelect: false,
   options: () => [],
 });
 
@@ -81,10 +96,10 @@ const emit = defineEmits<{
   optionsChange: [OptionsItem[]];
 }>();
 
-const modelValue = defineModel({ default: '' });
+const modelValue = defineModel<any>({ default: undefined });
 
 const attrs = useAttrs();
-
+const innerParams = ref({});
 const refOptions = ref<OptionsItem[]>([]);
 const loading = ref(false);
 // 首次是否加载过了
@@ -175,8 +190,15 @@ async function handleFetchForVisible(visible: boolean) {
   }
 }
 
+const params = computed(() => {
+  return {
+    ...props.params,
+    ...unref(innerParams),
+  };
+});
+
 watch(
-  () => props.params,
+  params,
   (value, oldValue) => {
     if (isEqual(value, oldValue)) {
       return;
@@ -187,14 +209,57 @@ watch(
 );
 
 function emitChange() {
+  if (
+    modelValue.value === undefined &&
+    props.autoSelect &&
+    unref(getOptions).length > 0
+  ) {
+    let firstOption;
+    if (isFunction(props.autoSelect)) {
+      firstOption = props.autoSelect(unref(getOptions));
+    } else {
+      switch (props.autoSelect) {
+        case 'first': {
+          firstOption = unref(getOptions)[0];
+          break;
+        }
+        case 'last': {
+          firstOption = unref(getOptions)[unref(getOptions).length - 1];
+          break;
+        }
+        case 'one': {
+          if (unref(getOptions).length === 1) {
+            firstOption = unref(getOptions)[0];
+          }
+          break;
+        }
+      }
+    }
+
+    if (firstOption) modelValue.value = firstOption.value;
+  }
   emit('optionsChange', unref(getOptions));
 }
+const componentRef = ref();
+defineExpose({
+  /** 获取options数据 */
+  getOptions: () => unref(getOptions),
+  /** 获取当前值 */
+  getValue: () => unref(modelValue),
+  /** 获取被包装的组件实例 */
+  getComponentRef: <T = any,>() => componentRef.value as T,
+  /** 更新Api参数 */
+  updateParam(newParams: Record<string, any>) {
+    innerParams.value = newParams;
+  },
+});
 </script>
 <template>
   <component
     :is="component"
     v-bind="bindProps"
     :placeholder="$attrs.placeholder"
+    ref="componentRef"
   >
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}"></slot>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts b/apps/vben5/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
index 511fb3b75..a3f61fd69 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
@@ -9,7 +9,7 @@ export function useCaptchaPoints() {
   }
 
   function clearPoints() {
-    points.splice(0, points.length);
+    points.splice(0);
   }
   return {
     addPoint,
diff --git a/apps/vben5/packages/effects/common-ui/src/components/count-to/count-to.vue b/apps/vben5/packages/effects/common-ui/src/components/count-to/count-to.vue
new file mode 100644
index 000000000..d6b0943da
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/count-to/count-to.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { CountToProps } from './types';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { isString } from '@vben-core/shared/utils';
+
+import { TransitionPresets, useTransition } from '@vueuse/core';
+
+const props = withDefaults(defineProps<CountToProps>(), {
+  startVal: 0,
+  duration: 2000,
+  separator: ',',
+  decimal: '.',
+  decimals: 0,
+  delay: 0,
+  transition: () => TransitionPresets.easeOutExpo,
+});
+
+const emit = defineEmits(['started', 'finished']);
+
+const lastValue = ref(props.startVal);
+
+onMounted(() => {
+  lastValue.value = props.endVal;
+});
+
+watch(
+  () => props.endVal,
+  (val) => {
+    lastValue.value = val;
+  },
+);
+
+const currentValue = useTransition(lastValue, {
+  delay: computed(() => props.delay),
+  duration: computed(() => props.duration),
+  disabled: computed(() => props.disabled),
+  transition: computed(() => {
+    return isString(props.transition)
+      ? TransitionPresets[props.transition]
+      : props.transition;
+  }),
+  onStarted() {
+    emit('started');
+  },
+  onFinished() {
+    emit('finished');
+  },
+});
+
+const numMain = computed(() => {
+  const result = currentValue.value
+    .toFixed(props.decimals)
+    .split('.')[0]
+    ?.replaceAll(/\B(?=(\d{3})+(?!\d))/g, props.separator);
+  return result;
+});
+
+const numDec = computed(() => {
+  return (
+    props.decimal + currentValue.value.toFixed(props.decimals).split('.')[1]
+  );
+});
+</script>
+<template>
+  <div class="count-to" v-bind="$attrs">
+    <slot name="prefix">
+      <div
+        class="count-to-prefix"
+        :style="prefixStyle"
+        :class="prefixClass"
+        v-if="prefix"
+      >
+        {{ prefix }}
+      </div>
+    </slot>
+    <div class="count-to-main" :class="mainClass" :style="mainStyle">
+      <span>{{ numMain }}</span>
+      <span
+        class="count-to-main-decimal"
+        v-if="decimals > 0"
+        :class="decimalClass"
+        :style="decimalStyle"
+      >
+        {{ numDec }}
+      </span>
+    </div>
+    <slot name="suffix">
+      <div
+        class="count-to-suffix"
+        :style="suffixStyle"
+        :class="suffixClass"
+        v-if="suffix"
+      >
+        {{ suffix }}
+      </div>
+    </slot>
+  </div>
+</template>
+<style lang="scss" scoped>
+.count-to {
+  display: flex;
+  align-items: baseline;
+
+  &-prefix {
+    // font-size: 1rem;
+  }
+
+  &-suffix {
+    // font-size: 1rem;
+  }
+
+  &-main {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    // font-size: 1.5rem;
+
+    &-decimal {
+      // font-size: 0.8rem;
+    }
+  }
+}
+</style>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/count-to/index.ts b/apps/vben5/packages/effects/common-ui/src/components/count-to/index.ts
new file mode 100644
index 000000000..d942796ea
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/count-to/index.ts
@@ -0,0 +1,2 @@
+export { default as CountTo } from './count-to.vue';
+export * from './types';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/count-to/types.ts b/apps/vben5/packages/effects/common-ui/src/components/count-to/types.ts
new file mode 100644
index 000000000..0b3bd82d6
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/count-to/types.ts
@@ -0,0 +1,53 @@
+import type { CubicBezierPoints, EasingFunction } from '@vueuse/core';
+
+import type { StyleValue } from 'vue';
+
+import { TransitionPresets as TransitionPresetsData } from '@vueuse/core';
+
+export type TransitionPresets = keyof typeof TransitionPresetsData;
+
+export const TransitionPresetsKeys = Object.keys(
+  TransitionPresetsData,
+) as TransitionPresets[];
+
+export interface CountToProps {
+  /** 初始值 */
+  startVal?: number;
+  /** 当前值 */
+  endVal: number;
+  /** 是否禁用动画 */
+  disabled?: boolean;
+  /** 延迟动画开始的时间 */
+  delay?: number;
+  /** 持续时间  */
+  duration?: number;
+  /** 小数位数  */
+  decimals?: number;
+  /** 小数点  */
+  decimal?: string;
+  /** 分隔符  */
+  separator?: string;
+  /** 前缀  */
+  prefix?: string;
+  /** 后缀  */
+  suffix?: string;
+  /** 过渡效果  */
+  transition?: CubicBezierPoints | EasingFunction | TransitionPresets;
+  /** 整数部分的类名 */
+  mainClass?: string;
+  /** 小数部分的类名 */
+  decimalClass?: string;
+  /** 前缀部分的类名 */
+  prefixClass?: string;
+  /** 后缀部分的类名 */
+  suffixClass?: string;
+
+  /** 整数部分的样式 */
+  mainStyle?: StyleValue;
+  /** 小数部分的样式 */
+  decimalStyle?: StyleValue;
+  /** 前缀部分的样式 */
+  prefixStyle?: StyleValue;
+  /** 后缀部分的样式 */
+  suffixStyle?: StyleValue;
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue b/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index 3d3d28574..12f44bdb6 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
 
-import { computed, ref, watchEffect } from 'vue';
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watchEffect,
+} from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
+import { useElementSize } from '@vueuse/core';
+
 interface Props {
   /**
    * 是否启用点击文本展开全部
@@ -31,6 +40,16 @@ interface Props {
    * @default true
    */
   tooltip?: boolean;
+  /**
+   * 是否只在文本被截断时显示提示框
+   * @default false
+   */
+  tooltipWhenEllipsis?: boolean;
+  /**
+   * 文本截断检测的像素差异阈值，越大则判断越严格
+   * @default 3
+   */
+  ellipsisThreshold?: number;
   /**
    * 提示框背景颜色，优先级高于 overlayStyle
    */
@@ -60,12 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: '100%',
   placement: 'top',
   tooltip: true,
+  tooltipWhenEllipsis: false,
+  ellipsisThreshold: 3,
   tooltipBackgroundColor: '',
   tooltipColor: '',
   tooltipFontSize: 14,
   tooltipMaxWidth: undefined,
   tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
 });
+
 const emit = defineEmits<{ expandChange: [boolean] }>();
 
 const textMaxWidth = computed(() => {
@@ -77,19 +99,83 @@ const textMaxWidth = computed(() => {
 const ellipsis = ref();
 const isExpand = ref(false);
 const defaultTooltipMaxWidth = ref();
+const isEllipsis = ref(false);
+
+const { width: eleWidth } = useElementSize(ellipsis);
+
+// 检测文本是否被截断
+const checkEllipsis = () => {
+  if (!ellipsis.value || !props.tooltipWhenEllipsis) return;
+
+  const element = ellipsis.value;
+
+  const originalText = element.textContent || '';
+  const originalTrimmed = originalText.trim();
+
+  // 对于空文本直接返回 false
+  if (!originalTrimmed) {
+    isEllipsis.value = false;
+    return;
+  }
+
+  const widthDiff = element.scrollWidth - element.clientWidth;
+  const heightDiff = element.scrollHeight - element.clientHeight;
+
+  // 使用足够大的差异阈值确保只有真正被截断的文本才会显示 tooltip
+  isEllipsis.value =
+    props.line === 1
+      ? widthDiff > props.ellipsisThreshold
+      : heightDiff > props.ellipsisThreshold;
+};
+
+// 使用 ResizeObserver 监听尺寸变化
+let resizeObserver: null | ResizeObserver = null;
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && props.tooltipWhenEllipsis) {
+    resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+
+    if (ellipsis.value) {
+      resizeObserver.observe(ellipsis.value);
+    }
+  }
+
+  // 初始检测
+  checkEllipsis();
+});
+
+// 使用onUpdated钩子检测内容变化
+onUpdated(() => {
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
 
 watchEffect(
   () => {
-    if (props.tooltip && ellipsis.value) {
+    if (props.tooltip && eleWidth.value) {
       defaultTooltipMaxWidth.value =
-        props.tooltipMaxWidth ?? ellipsis.value.offsetWidth + 24;
+        props.tooltipMaxWidth ?? eleWidth.value + 24;
     }
   },
   { flush: 'post' },
 );
+
 function onExpand() {
   isExpand.value = !isExpand.value;
   emit('expandChange', isExpand.value);
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
 }
 
 function handleExpand() {
@@ -106,7 +192,9 @@ function handleExpand() {
         color: tooltipColor,
         backgroundColor: tooltipBackgroundColor,
       }"
-      :disabled="!props.tooltip || isExpand"
+      :disabled="
+        !props.tooltip || isExpand || (props.tooltipWhenEllipsis && !isEllipsis)
+      "
       :side="placement"
     >
       <slot name="tooltip">
diff --git a/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue b/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
index 8ac658147..51ef88d0b 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VNode } from 'vue';
 
-import { computed, ref, watch, watchEffect } from 'vue';
+import { computed, ref, useAttrs, watch, watchEffect } from 'vue';
 
 import { usePagination } from '@vben/hooks';
 import { EmptyIcon, Grip, listIcons } from '@vben/icons';
@@ -22,8 +22,9 @@ import {
   VbenIconButton,
   VbenPopover,
 } from '@vben-core/shadcn-ui';
+import { isFunction } from '@vben-core/shared/utils';
 
-import { refDebounced, watchDebounced } from '@vueuse/core';
+import { objectOmit, refDebounced, watchDebounced } from '@vueuse/core';
 
 import { fetchIconsData } from './icons';
 
@@ -64,6 +65,8 @@ const emit = defineEmits<{
   change: [string];
 }>();
 
+const attrs = useAttrs();
+
 const modelValue = defineModel({ default: '', type: String });
 
 const visible = ref(false);
@@ -165,13 +168,25 @@ const searchInputProps = computed(() => {
   };
 });
 
+function updateCurrentSelect(v: string) {
+  currentSelect.value = v;
+  const eventKey = `onUpdate:${props.modelValueProp}`;
+  if (attrs[eventKey] && isFunction(attrs[eventKey])) {
+    attrs[eventKey](v);
+  }
+}
+const getBindAttrs = computed(() => {
+  return objectOmit(attrs, [`onUpdate:${props.modelValueProp}`]);
+});
+
 defineExpose({ toggleOpenState, open, close });
 </script>
 <template>
   <VbenPopover
     v-model:open="visible"
     :content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
-    content-class="p-0 pt-3"
+    content-class="p-0 pt-3 w-full"
+    trigger-class="w-full"
   >
     <template #trigger>
       <template v-if="props.type === 'input'">
@@ -183,7 +198,8 @@ defineExpose({ toggleOpenState, open, close });
           role="combobox"
           :aria-label="$t('ui.iconPicker.placeholder')"
           aria-expanded="visible"
-          v-bind="$attrs"
+          :[`onUpdate:${modelValueProp}`]="updateCurrentSelect"
+          v-bind="getBindAttrs"
         >
           <template #[iconSlot]>
             <VbenIcon
diff --git a/apps/vben5/packages/effects/common-ui/src/components/index.ts b/apps/vben5/packages/effects/common-ui/src/components/index.ts
index e1874de7f..fc50391ed 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/index.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/index.ts
@@ -1,8 +1,11 @@
 export * from './api-component';
 export * from './captcha';
 export * from './col-page';
+export * from './count-to';
 export * from './ellipsis-text';
 export * from './icon-picker';
+export * from './json-viewer';
+export * from './loading';
 export * from './page';
 export * from './resize';
 export * from './tippy';
@@ -11,12 +14,19 @@ export * from '@vben-core/popup-ui';
 
 // 给文档用
 export {
+  VbenAvatar,
   VbenButton,
+  VbenButtonGroup,
+  VbenCheckButtonGroup,
   VbenCountToAnimator,
+  VbenFullScreen,
   VbenInputPassword,
   VbenLoading,
+  VbenLogo,
   VbenPinInput,
   VbenSpinner,
+  VbenTree,
 } from '@vben-core/shadcn-ui';
 
+export type { FlattenedItem } from '@vben-core/shadcn-ui';
 export { globalShareState } from '@vben-core/shared/global-state';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/json-viewer/index.ts b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/index.ts
new file mode 100644
index 000000000..1aec78bb8
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/index.ts
@@ -0,0 +1,3 @@
+export { default as JsonViewer } from './index.vue';
+
+export * from './types';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/json-viewer/index.vue b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/index.vue
new file mode 100644
index 000000000..aa1d90d33
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/index.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { SetupContext } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+import type {
+  JsonViewerAction,
+  JsonViewerProps,
+  JsonViewerToggle,
+  JsonViewerValue,
+} from './types';
+
+import { computed, useAttrs } from 'vue';
+// @ts-ignore
+import VueJsonViewer from 'vue-json-viewer';
+
+import { $t } from '@vben/locales';
+
+import { isBoolean } from '@vben-core/shared/utils';
+
+defineOptions({ name: 'JsonViewer' });
+
+const props = withDefaults(defineProps<JsonViewerProps>(), {
+  expandDepth: 1,
+  copyable: false,
+  sort: false,
+  boxed: false,
+  theme: 'default-json-theme',
+  expanded: false,
+  previewMode: false,
+  showArrayIndex: true,
+  showDoubleQuotes: false,
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  copied: [event: JsonViewerAction];
+  keyClick: [key: string];
+  toggle: [param: JsonViewerToggle];
+  valueClick: [value: JsonViewerValue];
+}>();
+
+const attrs: SetupContext['attrs'] = useAttrs();
+
+function handleClick(event: MouseEvent) {
+  if (
+    event.target instanceof HTMLElement &&
+    event.target.classList.contains('jv-item')
+  ) {
+    const pathNode = event.target.closest('.jv-push');
+    if (!pathNode || !pathNode.hasAttribute('path')) {
+      return;
+    }
+    const param: JsonViewerValue = {
+      path: '',
+      value: '',
+      depth: 0,
+      el: event.target,
+    };
+
+    param.path = pathNode.getAttribute('path') || '';
+    param.depth = Number(pathNode.getAttribute('depth')) || 0;
+
+    param.value = event.target.textContent || undefined;
+    param.value = JSON.parse(param.value);
+    emit('valueClick', param);
+  }
+  emit('click', event);
+}
+
+const bindProps = computed<Recordable<any>>(() => {
+  const copyable = {
+    copyText: $t('ui.jsonViewer.copy'),
+    copiedText: $t('ui.jsonViewer.copied'),
+    timeout: 2000,
+    ...(isBoolean(props.copyable) ? {} : props.copyable),
+  };
+
+  return {
+    ...props,
+    ...attrs,
+    onCopied: (event: JsonViewerAction) => emit('copied', event),
+    onKeyclick: (key: string) => emit('keyClick', key),
+    onClick: (event: MouseEvent) => handleClick(event),
+    copyable: props.copyable ? copyable : false,
+  };
+});
+</script>
+<template>
+  <VueJsonViewer v-bind="bindProps">
+    <template #copy="slotProps">
+      <slot name="copy" v-bind="slotProps"></slot>
+    </template>
+  </VueJsonViewer>
+</template>
+<style lang="scss">
+@use './style.scss';
+</style>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/json-viewer/style.scss b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/style.scss
new file mode 100644
index 000000000..47acb891f
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/style.scss
@@ -0,0 +1,98 @@
+.default-json-theme {
+  font-family: Consolas, Menlo, Courier, monospace;
+  font-size: 14px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  background: hsl(var(--background));
+
+  &.jv-container.boxed {
+    border: 1px solid hsl(var(--border));
+  }
+
+  .jv-ellipsis {
+    display: inline-block;
+    padding: 0 4px 2px;
+    font-size: 0.9em;
+    line-height: 0.9;
+    vertical-align: 2px;
+    color: hsl(var(--secondary-foreground));
+    cursor: pointer;
+    user-select: none;
+    background-color: hsl(var(--secondary));
+    border-radius: 3px;
+  }
+
+  .jv-button {
+    color: hsl(var(--primary));
+  }
+
+  .jv-key {
+    color: hsl(var(--heavy-foreground));
+  }
+
+  .jv-item {
+    &.jv-array {
+      color: hsl(var(--heavy-foreground));
+    }
+
+    &.jv-boolean {
+      color: hsl(var(--red-400));
+    }
+
+    &.jv-function {
+      color: hsl(var(--destructive-foreground));
+    }
+
+    &.jv-number {
+      color: hsl(var(--info-foreground));
+    }
+
+    &.jv-number-float {
+      color: hsl(var(--info-foreground));
+    }
+
+    &.jv-number-integer {
+      color: hsl(var(--info-foreground));
+    }
+
+    &.jv-object {
+      color: hsl(var(--accent-darker));
+    }
+
+    &.jv-undefined {
+      color: hsl(var(--secondary-foreground));
+    }
+
+    &.jv-string {
+      color: hsl(var(--primary));
+      overflow-wrap: break-word;
+      white-space: normal;
+    }
+  }
+
+  &.jv-container .jv-code {
+    padding: 10px;
+
+    &.boxed:not(.open) {
+      padding-bottom: 20px;
+      margin-bottom: 10px;
+    }
+
+    &.open {
+      padding-bottom: 10px;
+    }
+
+    .jv-toggle {
+      &::before {
+        padding: 0 2px;
+        border-radius: 2px;
+      }
+
+      &:hover {
+        &::before {
+          background: hsl(var(--accent-foreground));
+        }
+      }
+    }
+  }
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/components/json-viewer/types.ts b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/types.ts
new file mode 100644
index 000000000..8f3a206e9
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/json-viewer/types.ts
@@ -0,0 +1,44 @@
+export interface JsonViewerProps {
+  /** 要展示的结构数据 */
+  value: any;
+  /** 展开深度 */
+  expandDepth?: number;
+  /** 是否可复制 */
+  copyable?: boolean;
+  /** 是否排序 */
+  sort?: boolean;
+  /** 显示边框 */
+  boxed?: boolean;
+  /** 主题 */
+  theme?: string;
+  /** 是否展开 */
+  expanded?: boolean;
+  /** 时间格式化函数 */
+  timeformat?: (time: Date | number | string) => string;
+  /** 预览模式 */
+  previewMode?: boolean;
+  /** 显示数组索引 */
+  showArrayIndex?: boolean;
+  /** 显示双引号 */
+  showDoubleQuotes?: boolean;
+}
+
+export interface JsonViewerAction {
+  action: string;
+  text: string;
+  trigger: HTMLElement;
+}
+
+export interface JsonViewerValue {
+  value: any;
+  path: string;
+  depth: number;
+  el: HTMLElement;
+}
+
+export interface JsonViewerToggle {
+  /** 鼠标事件 */
+  event: MouseEvent;
+  /** 当前展开状态 */
+  open: boolean;
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/components/loading/directive.ts b/apps/vben5/packages/effects/common-ui/src/components/loading/directive.ts
new file mode 100644
index 000000000..973a605da
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/loading/directive.ts
@@ -0,0 +1,132 @@
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { h, render } from 'vue';
+
+import { VbenLoading, VbenSpinner } from '@vben-core/shadcn-ui';
+import { isString } from '@vben-core/shared/utils';
+
+const LOADING_INSTANCE_KEY = Symbol('loading');
+const SPINNER_INSTANCE_KEY = Symbol('spinner');
+
+const CLASS_NAME_RELATIVE = 'spinner-parent--relative';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const instance = h(VbenLoading, getOptions(binding));
+    render(instance, el);
+
+    el.classList.add(CLASS_NAME_RELATIVE);
+    el[LOADING_INSTANCE_KEY] = instance;
+  },
+  unmounted(el) {
+    const instance = el[LOADING_INSTANCE_KEY];
+    el.classList.remove(CLASS_NAME_RELATIVE);
+    render(null, el);
+    instance.el.remove();
+
+    el[LOADING_INSTANCE_KEY] = null;
+  },
+
+  updated(el, binding) {
+    const instance = el[LOADING_INSTANCE_KEY];
+    const options = getOptions(binding);
+    if (options && instance?.component) {
+      try {
+        Object.keys(options).forEach((key) => {
+          instance.component.props[key] = options[key];
+        });
+        instance.component.update();
+      } catch (error) {
+        console.error(
+          'Failed to update loading component in directive:',
+          error,
+        );
+      }
+    }
+  },
+};
+
+function getOptions(binding: DirectiveBinding) {
+  if (binding.value === undefined) {
+    return { spinning: true };
+  } else if (typeof binding.value === 'boolean') {
+    return { spinning: binding.value };
+  } else {
+    return { ...binding.value };
+  }
+}
+
+const spinningDirective: Directive = {
+  mounted(el, binding) {
+    const instance = h(VbenSpinner, getOptions(binding));
+    render(instance, el);
+
+    el.classList.add(CLASS_NAME_RELATIVE);
+    el[SPINNER_INSTANCE_KEY] = instance;
+  },
+  unmounted(el) {
+    const instance = el[SPINNER_INSTANCE_KEY];
+    el.classList.remove(CLASS_NAME_RELATIVE);
+    render(null, el);
+    instance.el.remove();
+
+    el[SPINNER_INSTANCE_KEY] = null;
+  },
+
+  updated(el, binding) {
+    const instance = el[SPINNER_INSTANCE_KEY];
+    const options = getOptions(binding);
+    if (options && instance?.component) {
+      try {
+        Object.keys(options).forEach((key) => {
+          instance.component.props[key] = options[key];
+        });
+        instance.component.update();
+      } catch (error) {
+        console.error(
+          'Failed to update spinner component in directive:',
+          error,
+        );
+      }
+    }
+  },
+};
+
+type loadingDirectiveParams = {
+  /** 是否注册loading指令。如果提供一个string，则将指令注册为指定的名称 */
+  loading?: boolean | string;
+  /** 是否注册spinning指令。如果提供一个string，则将指令注册为指定的名称 */
+  spinning?: boolean | string;
+};
+
+/**
+ * 注册loading指令
+ * @param app
+ * @param params
+ */
+export function registerLoadingDirective(
+  app: App,
+  params?: loadingDirectiveParams,
+) {
+  // 注入一个样式供指令使用，确保容器是相对定位
+  const style = document.createElement('style');
+  style.id = CLASS_NAME_RELATIVE;
+  style.innerHTML = `
+    .${CLASS_NAME_RELATIVE} {
+      position: relative !important;
+    }
+  `;
+  document.head.append(style);
+  if (params?.loading !== false) {
+    app.directive(
+      isString(params?.loading) ? params.loading : 'loading',
+      loadingDirective,
+    );
+  }
+  if (params?.spinning !== false) {
+    app.directive(
+      isString(params?.spinning) ? params.spinning : 'spinning',
+      spinningDirective,
+    );
+  }
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/components/loading/index.ts b/apps/vben5/packages/effects/common-ui/src/components/loading/index.ts
new file mode 100644
index 000000000..2fbfb0471
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/loading/index.ts
@@ -0,0 +1,3 @@
+export * from './directive';
+export { default as Loading } from './loading.vue';
+export { default as Spinner } from './spinner.vue';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/loading/loading.vue b/apps/vben5/packages/effects/common-ui/src/components/loading/loading.vue
new file mode 100644
index 000000000..faf49e608
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/loading/loading.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { VbenLoading } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
+
+interface LoadingProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+}
+
+defineOptions({ name: 'Loading' });
+const props = defineProps<LoadingProps>();
+</script>
+<template>
+  <div :class="cn('relative min-h-20', props.class)">
+    <slot></slot>
+    <VbenLoading
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+      :text="props.text"
+    >
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon"></slot>
+      </template>
+    </VbenLoading>
+  </div>
+</template>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/loading/spinner.vue b/apps/vben5/packages/effects/common-ui/src/components/loading/spinner.vue
new file mode 100644
index 000000000..caee2bbc2
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/loading/spinner.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
+
+interface SpinnerProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
+defineOptions({ name: 'Spinner' });
+const props = defineProps<SpinnerProps>();
+</script>
+<template>
+  <div :class="cn('relative min-h-20', props.class)">
+    <slot></slot>
+    <VbenSpinner
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+    />
+  </div>
+</template>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/page/page.vue b/apps/vben5/packages/effects/common-ui/src/components/page/page.vue
index 6b95cdb3a..c95a3b450 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/page/page.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/page/page.vue
@@ -12,7 +12,8 @@ defineOptions({
   name: 'Page',
 });
 
-const { autoContentHeight = false } = defineProps<PageProps>();
+const { autoContentHeight = false, heightOffset = 0 } =
+  defineProps<PageProps>();
 
 const headerHeight = ref(0);
 const footerHeight = ref(0);
@@ -24,7 +25,7 @@ const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
 const contentStyle = computed<StyleValue>(() => {
   if (autoContentHeight) {
     return {
-      height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`,
+      height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`,
       overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
     };
   }
diff --git a/apps/vben5/packages/effects/common-ui/src/components/page/types.ts b/apps/vben5/packages/effects/common-ui/src/components/page/types.ts
index 5316d08d9..c7331aedf 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/page/types.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/page/types.ts
@@ -8,4 +8,10 @@ export interface PageProps {
   autoContentHeight?: boolean;
   headerClass?: string;
   footerClass?: string;
+  /**
+   * Custom height offset value (in pixels) to adjust content area sizing
+   * when used with autoContentHeight
+   * @default 0
+   */
+  heightOffset?: number;
 }
diff --git a/apps/vben5/packages/effects/common-ui/src/components/resize/resize.vue b/apps/vben5/packages/effects/common-ui/src/components/resize/resize.vue
index aaf89eaf2..e89ea8b8d 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/resize/resize.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/resize/resize.vue
@@ -1072,8 +1072,8 @@ watch(
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  content: '';
   outline: 1px dashed #d6d6d6;
+  content: '';
 }
 
 .resize-stick {
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue
index 81bacaa8e..5dce7402e 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -70,10 +70,7 @@ async function handleSubmit() {
   const { valid } = await formApi.validate();
   const values = await formApi.getValues();
   if (valid) {
-    emit('submit', {
-      code: values?.code,
-      phoneNumber: values?.phoneNumber,
-    });
+    emit('submit', values);
   }
 }
 
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index 4b4f9b448..c337c29da 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -35,6 +35,16 @@ const getZIndex = computed(() => {
   return props.zIndex || calcZIndex();
 });
 
+/**
+ * 排除ant-message和loading:9999的z-index
+ */
+const zIndexExcludeClass = ['ant-message', 'loading'];
+function isZIndexExcludeClass(element: Element) {
+  return zIndexExcludeClass.some((className) =>
+    element.classList.contains(className),
+  );
+}
+
 /**
  * 获取最大的zIndex值
  */
@@ -44,7 +54,11 @@ function calcZIndex() {
   [...elements].forEach((element) => {
     const style = window.getComputedStyle(element);
     const zIndex = style.getPropertyValue('z-index');
-    if (zIndex && !Number.isNaN(Number.parseInt(zIndex))) {
+    if (
+      zIndex &&
+      !Number.isNaN(Number.parseInt(zIndex)) &&
+      !isZIndexExcludeClass(element)
+    ) {
       maxZ = Math.max(maxZ, Number.parseInt(zIndex));
     }
   });
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue
index 08777c820..96d1e4aaf 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -17,7 +17,7 @@ import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';
 
 interface Props extends AuthenticationProps {
-  formSchema: VbenFormSchema[];
+  formSchema?: VbenFormSchema[];
 }
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue
index 1faa9607f..69a69d4ab 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -14,7 +14,7 @@ import { VbenButton } from '@vben-core/shadcn-ui';
 import Title from './auth-title.vue';
 
 interface Props {
-  formSchema: VbenFormSchema[];
+  formSchema?: VbenFormSchema[];
   /**
    * @zh_CN 是否处于加载处理状态
    */
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
index 9c8cf203d..453ee5cf3 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
 
 interface Props {
-  tabs: TabOption[];
+  tabs?: TabOption[];
 }
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
index ea4d7bca8..18c492953 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
@@ -12,7 +12,7 @@ import {
 } from '@vben-core/shadcn-ui';
 
 interface Props {
-  items: AnalysisOverviewItem[];
+  items?: AnalysisOverviewItem[];
 }
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
index 0a3fb7c24..590c33428 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
@@ -10,7 +10,7 @@ import {
 } from '@vben-core/shadcn-ui';
 
 interface Props {
-  items: WorkbenchProjectItem[];
+  items?: WorkbenchProjectItem[];
   title: string;
 }
 
@@ -37,6 +37,8 @@ defineEmits(['click']);
             'border-r-0': index % 3 === 2,
             'border-b-0': index < 3,
             'pb-4': index > 2,
+            'rounded-bl-xl': index === items.length - 3,
+            'rounded-br-xl': index === items.length - 1,
           }"
           class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
         >
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
index 9eb517f9e..86dc5c612 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
@@ -10,7 +10,7 @@ import {
 } from '@vben-core/shadcn-ui';
 
 interface Props {
-  items: WorkbenchQuickNavItem[];
+  items?: WorkbenchQuickNavItem[];
   title: string;
 }
 
@@ -35,8 +35,10 @@ defineEmits(['click']);
         <div
           :class="{
             'border-r-0': index % 3 === 2,
-            'pb-4': index > 2,
             'border-b-0': index < 3,
+            'pb-4': index > 2,
+            'rounded-bl-xl': index === items.length - 3,
+            'rounded-br-xl': index === items.length - 1,
           }"
           class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
           @click="$emit('click', item)"
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
index 8aae81fef..90f20c1dd 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
@@ -10,7 +10,7 @@ import {
 } from '@vben-core/shadcn-ui';
 
 interface Props {
-  items: WorkbenchTodoItem[];
+  items?: WorkbenchTodoItem[];
   title: string;
 }
 
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
index 358b210fa..06f2a5e42 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
@@ -10,7 +10,7 @@ import {
 } from '@vben-core/shadcn-ui';
 
 interface Props {
-  items: WorkbenchTrendItem[];
+  items?: WorkbenchTrendItem[];
   title: string;
 }
 
diff --git a/apps/vben5/packages/effects/hooks/package.json b/apps/vben5/packages/effects/hooks/package.json
index c9120d2ad..004f3c50e 100644
--- a/apps/vben5/packages/effects/hooks/package.json
+++ b/apps/vben5/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts b/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts
index e33f721db..6a076f3c4 100644
--- a/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts
@@ -193,67 +193,107 @@ export function useElementPlusDesignTokens() {
 
         '--el-border-radius-base': getCssVariableValue('--radius', false),
         '--el-color-danger': getCssVariableValue('--destructive-500'),
-        '--el-color-danger-dark-2': getCssVariableValue('--destructive'),
-        '--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
-        '--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
-        '--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
+        '--el-color-danger-dark-2': isDark.value
+          ? getCssVariableValue('--destructive-400')
+          : getCssVariableValue('--destructive-600'),
+        '--el-color-danger-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-danger-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-danger-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
         '--el-color-danger-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--destructive-900')
           : getCssVariableValue('--destructive-100'),
         '--el-color-danger-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--destructive-950')
           : getCssVariableValue('--destructive-50'),
 
         '--el-color-error': getCssVariableValue('--destructive-500'),
-        '--el-color-error-dark-2': getCssVariableValue('--destructive'),
-        '--el-color-error-light-3': getCssVariableValue('--destructive-400'),
-        '--el-color-error-light-5': getCssVariableValue('--destructive-300'),
-        '--el-color-error-light-7': getCssVariableValue('--destructive-200'),
+        '--el-color-error-dark-2': isDark.value
+          ? getCssVariableValue('--destructive-400')
+          : getCssVariableValue('--destructive-600'),
+        '--el-color-error-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-error-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-error-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
         '--el-color-error-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--destructive-900')
           : getCssVariableValue('--destructive-100'),
         '--el-color-error-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--destructive-950')
           : getCssVariableValue('--destructive-50'),
 
+        '--el-color-info-light-5': border,
         '--el-color-info-light-8': border,
         '--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
+
         '--el-color-primary': getCssVariableValue('--primary-500'),
-        '--el-color-primary-dark-2': getCssVariableValue('--primary'),
-        '--el-color-primary-light-3': getCssVariableValue('--primary-400'),
-        '--el-color-primary-light-5': getCssVariableValue('--primary-300'),
+        '--el-color-primary-dark-2': isDark.value
+          ? getCssVariableValue('--primary-400')
+          : getCssVariableValue('--primary-600'),
+        '--el-color-primary-light-3': isDark.value
+          ? getCssVariableValue('--primary-600')
+          : getCssVariableValue('--primary-400'),
+        '--el-color-primary-light-5': isDark.value
+          ? getCssVariableValue('--primary-700')
+          : getCssVariableValue('--primary-300'),
         '--el-color-primary-light-7': isDark.value
-          ? border
+          ? getCssVariableValue('--primary-800')
           : getCssVariableValue('--primary-200'),
         '--el-color-primary-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--primary-900')
           : getCssVariableValue('--primary-100'),
         '--el-color-primary-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--primary-950')
           : getCssVariableValue('--primary-50'),
 
         '--el-color-success': getCssVariableValue('--success-500'),
-        '--el-color-success-dark-2': getCssVariableValue('--success'),
-        '--el-color-success-light-3': getCssVariableValue('--success-400'),
-        '--el-color-success-light-5': getCssVariableValue('--success-300'),
-        '--el-color-success-light-7': getCssVariableValue('--success-200'),
+        '--el-color-success-dark-2': isDark.value
+          ? getCssVariableValue('--success-400')
+          : getCssVariableValue('--success-600'),
+        '--el-color-success-light-3': isDark.value
+          ? getCssVariableValue('--success-600')
+          : getCssVariableValue('--success-400'),
+        '--el-color-success-light-5': isDark.value
+          ? getCssVariableValue('--success-700')
+          : getCssVariableValue('--success-300'),
+        '--el-color-success-light-7': isDark.value
+          ? getCssVariableValue('--success-800')
+          : getCssVariableValue('--success-200'),
         '--el-color-success-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--success-900')
           : getCssVariableValue('--success-100'),
         '--el-color-success-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--success-950')
           : getCssVariableValue('--success-50'),
 
         '--el-color-warning': getCssVariableValue('--warning-500'),
-        '--el-color-warning-dark-2': getCssVariableValue('--warning'),
-        '--el-color-warning-light-3': getCssVariableValue('--warning-400'),
-        '--el-color-warning-light-5': getCssVariableValue('--warning-300'),
-        '--el-color-warning-light-7': getCssVariableValue('--warning-200'),
+        '--el-color-warning-dark-2': isDark.value
+          ? getCssVariableValue('--warning-400')
+          : getCssVariableValue('--warning-600'),
+        '--el-color-warning-light-3': isDark.value
+          ? getCssVariableValue('--warning-600')
+          : getCssVariableValue('--warning-400'),
+        '--el-color-warning-light-5': isDark.value
+          ? getCssVariableValue('--warning-700')
+          : getCssVariableValue('--warning-300'),
+        '--el-color-warning-light-7': isDark.value
+          ? getCssVariableValue('--warning-800')
+          : getCssVariableValue('--warning-200'),
         '--el-color-warning-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--warning-900')
           : getCssVariableValue('--warning-100'),
         '--el-color-warning-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--warning-950')
           : getCssVariableValue('--warning-50'),
 
         '--el-fill-color': getCssVariableValue('--accent'),
diff --git a/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts b/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
index 0977178c1..8b1addeb9 100644
--- a/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
@@ -2,41 +2,98 @@ import type { Arrayable, MaybeElementRef } from '@vueuse/core';
 
 import type { Ref } from 'vue';
 
-import { computed, onUnmounted, ref, watch } from 'vue';
+import { computed, onUnmounted, ref, unref, watch } from 'vue';
 
 import { isFunction } from '@vben/utils';
 
-import { useMouseInElement } from '@vueuse/core';
+import { useElementHover } from '@vueuse/core';
+
+interface HoverDelayOptions {
+  /** 鼠标进入延迟时间 */
+  enterDelay?: (() => number) | number;
+  /** 鼠标离开延迟时间 */
+  leaveDelay?: (() => number) | number;
+}
+
+const DEFAULT_LEAVE_DELAY = 500; // 鼠标离开延迟时间，默认为 500ms
+const DEFAULT_ENTER_DELAY = 0; // 鼠标进入延迟时间，默认为 0（立即响应）
 
 /**
  * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
  * @param refElement 所有需要检测的元素。如果提供了一个数组，那么鼠标在任何一个元素内部都会返回 true
- * @param delay 延迟更新状态的时间
+ * @param delay 延迟更新状态的时间，可以是数字或包含进入/离开延迟的配置对象
  * @returns 返回一个数组，第一个元素是一个 ref，表示鼠标是否在元素内部，第二个元素是一个控制器，可以通过 enable 和 disable 方法来控制监听器的启用和禁用
  */
 export function useHoverToggle(
   refElement: Arrayable<MaybeElementRef>,
-  delay: (() => number) | number = 500,
+  delay: (() => number) | HoverDelayOptions | number = DEFAULT_LEAVE_DELAY,
 ) {
-  const isOutsides: Array<Ref<boolean>> = [];
+  // 兼容旧版本API
+  const normalizedOptions: HoverDelayOptions =
+    typeof delay === 'number' || isFunction(delay)
+      ? { enterDelay: DEFAULT_ENTER_DELAY, leaveDelay: delay }
+      : {
+          enterDelay: DEFAULT_ENTER_DELAY,
+          leaveDelay: DEFAULT_LEAVE_DELAY,
+          ...delay,
+        };
+
+  const isHovers: Array<Ref<boolean>> = [];
   const value = ref(false);
-  const timer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const enterTimer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const leaveTimer = ref<ReturnType<typeof setTimeout> | undefined>();
   const refs = Array.isArray(refElement) ? refElement : [refElement];
   refs.forEach((refEle) => {
-    const listener = useMouseInElement(refEle, { handleOutside: true });
-    isOutsides.push(listener.isOutside);
+    const eleRef = computed(() => {
+      const ele = unref(refEle);
+      return ele instanceof Element ? ele : (ele?.$el as Element);
+    });
+    const isHover = useElementHover(eleRef);
+    isHovers.push(isHover);
   });
-  const isOutsideAll = computed(() => isOutsides.every((v) => v.value));
+  const isOutsideAll = computed(() => isHovers.every((v) => !v.value));
+
+  function clearTimers() {
+    if (enterTimer.value) {
+      clearTimeout(enterTimer.value);
+      enterTimer.value = undefined;
+    }
+    if (leaveTimer.value) {
+      clearTimeout(leaveTimer.value);
+      leaveTimer.value = undefined;
+    }
+  }
 
   function setValueDelay(val: boolean) {
-    timer.value && clearTimeout(timer.value);
-    timer.value = setTimeout(
-      () => {
-        value.value = val;
-        timer.value = undefined;
-      },
-      isFunction(delay) ? delay() : delay,
-    );
+    clearTimers();
+
+    if (val) {
+      // 鼠标进入
+      const enterDelay = normalizedOptions.enterDelay ?? DEFAULT_ENTER_DELAY;
+      const delayTime = isFunction(enterDelay) ? enterDelay() : enterDelay;
+
+      if (delayTime <= 0) {
+        value.value = true;
+      } else {
+        enterTimer.value = setTimeout(() => {
+          value.value = true;
+          enterTimer.value = undefined;
+        }, delayTime);
+      }
+    } else {
+      // 鼠标离开
+      const leaveDelay = normalizedOptions.leaveDelay ?? DEFAULT_LEAVE_DELAY;
+      const delayTime = isFunction(leaveDelay) ? leaveDelay() : leaveDelay;
+
+      if (delayTime <= 0) {
+        value.value = false;
+      } else {
+        leaveTimer.value = setTimeout(() => {
+          value.value = false;
+          leaveTimer.value = undefined;
+        }, delayTime);
+      }
+    }
   }
 
   const watcher = watch(
@@ -57,7 +114,7 @@ export function useHoverToggle(
   };
 
   onUnmounted(() => {
-    timer.value && clearTimeout(timer.value);
+    clearTimers();
   });
 
   return [value, controller] as [typeof value, typeof controller];
diff --git a/apps/vben5/packages/effects/hooks/src/use-tabs.ts b/apps/vben5/packages/effects/hooks/src/use-tabs.ts
index 60f70f14a..526721127 100644
--- a/apps/vben5/packages/effects/hooks/src/use-tabs.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-tabs.ts
@@ -1,3 +1,4 @@
+import type { ComputedRef } from 'vue';
 import type { RouteLocationNormalized } from 'vue-router';
 
 import { useRoute, useRouter } from 'vue-router';
@@ -41,8 +42,8 @@ export function useTabs() {
     await tabbarStore.toggleTabPin(tab || route);
   }
 
-  async function refreshTab() {
-    await tabbarStore.refresh(router);
+  async function refreshTab(name?: string) {
+    await tabbarStore.refresh(name || router);
   }
 
   async function openTabInNewWindow(tab?: RouteLocationNormalized) {
@@ -53,7 +54,24 @@ export function useTabs() {
     await tabbarStore.closeTabByKey(key, router);
   }
 
-  async function setTabTitle(title: string) {
+  /**
+   * 设置当前标签页的标题
+   *
+   * @description 支持设置静态标题字符串或动态计算标题
+   * @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题
+   *
+   * @param title - 标题内容
+   *   - 静态标题: 直接传入字符串
+   *   - 动态标题: 传入 ComputedRef
+   *
+   * @example
+   * // 静态标题
+   * setTabTitle('标签页')
+   *
+   * // 动态标题(多语言)
+   * setTabTitle(computed(() => t('page.title')))
+   */
+  async function setTabTitle(title: ComputedRef<string> | string) {
     tabbarStore.setUpdateTime();
     await tabbarStore.setTabTitle(route, title);
   }
diff --git a/apps/vben5/packages/effects/hooks/src/use-watermark.ts b/apps/vben5/packages/effects/hooks/src/use-watermark.ts
index c3f56eaf7..8484a0824 100644
--- a/apps/vben5/packages/effects/hooks/src/use-watermark.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-watermark.ts
@@ -2,8 +2,6 @@ import type { Watermark, WatermarkOptions } from 'watermark-js-plus';
 
 import { nextTick, onUnmounted, readonly, ref } from 'vue';
 
-import { updatePreferences } from '@vben/preferences';
-
 const watermark = ref<Watermark>();
 const unmountedHooked = ref<boolean>(false);
 const cachedOptions = ref<Partial<WatermarkOptions>>({
@@ -48,7 +46,6 @@ export function useWatermark() {
       ...options,
     };
     watermark.value = new Watermark(cachedOptions.value);
-    updatePreferences({ app: { watermark: true } });
     await watermark.value?.create();
   }
 
@@ -69,7 +66,6 @@ export function useWatermark() {
       watermark.value.destroy();
       watermark.value = undefined;
     }
-    updatePreferences({ app: { watermark: false } });
   }
 
   // 只在第一次调用时注册卸载钩子，防止重复注册以致于在路由切换时销毁了水印
diff --git a/apps/vben5/packages/effects/layouts/package.json b/apps/vben5/packages/effects/layouts/package.json
index 34da7f99f..a8439a021 100644
--- a/apps/vben5/packages/effects/layouts/package.json
+++ b/apps/vben5/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/layouts/src/authentication/authentication.vue b/apps/vben5/packages/effects/layouts/src/authentication/authentication.vue
index ceae8027f..cb500de51 100644
--- a/apps/vben5/packages/effects/layouts/src/authentication/authentication.vue
+++ b/apps/vben5/packages/effects/layouts/src/authentication/authentication.vue
@@ -17,6 +17,7 @@ interface Props {
   toolbar?: boolean;
   copyright?: boolean;
   toolbarList?: ToolbarType[];
+  clickLogo?: () => void;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -28,6 +29,7 @@ withDefaults(defineProps<Props>(), {
   sloganImage: '',
   toolbar: true,
   toolbarList: () => ['color', 'language', 'layout', 'theme'],
+  clickLogo: () => {},
 });
 
 const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
@@ -36,7 +38,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
 
 <template>
   <div
-    :class="[isDark]"
+    :class="[isDark ? 'dark' : '']"
     class="flex min-h-full flex-1 select-none overflow-x-hidden"
   >
     <template v-if="toolbar">
@@ -61,12 +63,16 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     </AuthenticationFormView>
 
     <!-- 头部 Logo 和应用名称 -->
-    <div v-if="logo || appName" class="absolute left-0 top-0 z-10 flex flex-1">
+    <div
+      v-if="logo || appName"
+      class="absolute left-0 top-0 z-10 flex flex-1"
+      @click="clickLogo"
+    >
       <div
         class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
       >
         <img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
-        <p v-if="appName" class="text-xl font-medium">
+        <p v-if="appName" class="m-0 text-xl font-medium">
           {{ appName }}
         </p>
       </div>
diff --git a/apps/vben5/packages/effects/layouts/src/authentication/index.ts b/apps/vben5/packages/effects/layouts/src/authentication/index.ts
index 6c684d117..d7c1c293a 100644
--- a/apps/vben5/packages/effects/layouts/src/authentication/index.ts
+++ b/apps/vben5/packages/effects/layouts/src/authentication/index.ts
@@ -1 +1,2 @@
 export { default as AuthPageLayout } from './authentication.vue';
+export * from './types';
diff --git a/apps/vben5/packages/effects/layouts/src/basic/content/content.vue b/apps/vben5/packages/effects/layouts/src/basic/content/content.vue
index 438154fa7..8b8a6391a 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/content/content.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/content/content.vue
@@ -5,10 +5,11 @@ import type {
   RouteLocationNormalizedLoadedGeneric,
 } from 'vue-router';
 
+import { computed } from 'vue';
 import { RouterView } from 'vue-router';
 
 import { preferences, usePreferences } from '@vben/preferences';
-import { storeToRefs, useTabbarStore } from '@vben/stores';
+import { getTabKey, storeToRefs, useTabbarStore } from '@vben/stores';
 
 import { IFrameRouterView } from '../../iframe';
 
@@ -20,6 +21,15 @@ const { keepAlive } = usePreferences();
 const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
   storeToRefs(tabbarStore);
 
+/**
+ * 是否使用动画
+ */
+const getEnabledTransition = computed(() => {
+  const { transition } = preferences;
+  const transitionName = transition.name;
+  return transitionName && transition.enable;
+});
+
 // 页面切换动画
 function getTransitionName(_route: RouteLocationNormalizedLoaded) {
   // 如果偏好设置未设置，则不使用动画
@@ -90,7 +100,12 @@ function transformComponent(
   <div class="relative h-full">
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">
-      <Transition :name="getTransitionName(route)" appear mode="out-in">
+      <Transition
+        v-if="getEnabledTransition"
+        :name="getTransitionName(route)"
+        appear
+        mode="out-in"
+      >
         <KeepAlive
           v-if="keepAlive"
           :exclude="getExcludeCachedTabs"
@@ -100,15 +115,34 @@ function transformComponent(
             :is="transformComponent(Component, route)"
             v-if="renderRouteView"
             v-show="!route.meta.iframeSrc"
-            :key="route.fullPath"
+            :key="getTabKey(route)"
           />
         </KeepAlive>
         <component
           :is="Component"
           v-else-if="renderRouteView"
-          :key="route.fullPath"
+          :key="getTabKey(route)"
         />
       </Transition>
+      <template v-else>
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="getTabKey(route)"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="getTabKey(route)"
+        />
+      </template>
     </RouterView>
   </div>
 </template>
diff --git a/apps/vben5/packages/effects/layouts/src/basic/copyright/copyright.vue b/apps/vben5/packages/effects/layouts/src/basic/copyright/copyright.vue
index 8202076a1..de49c7cd0 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/copyright/copyright.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/copyright/copyright.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 interface Props {
-  companyName: string;
+  companyName?: string;
   companySiteLink?: string;
-  date: string;
+  date?: string;
   icp?: string;
   icpLink?: string;
 }
diff --git a/apps/vben5/packages/effects/layouts/src/basic/layout.vue b/apps/vben5/packages/effects/layouts/src/basic/layout.vue
index 1fb90448f..0d110ce0e 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/layout.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/layout.vue
@@ -12,7 +12,7 @@ import {
   updatePreferences,
   usePreferences,
 } from '@vben/preferences';
-import { useLockStore } from '@vben/stores';
+import { useAccessStore } from '@vben/stores';
 import { cloneDeep, mapTree } from '@vben/utils';
 
 import { VbenAdminLayout } from '@vben-core/layout-ui';
@@ -34,7 +34,7 @@ import { LayoutTabbar } from './tabbar';
 
 defineOptions({ name: 'BasicLayout' });
 
-const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+const emit = defineEmits<{ clearPreferencesAndLogout: []; clickLogo: [] }>();
 
 const {
   isDark,
@@ -49,7 +49,7 @@ const {
   sidebarCollapsed,
   theme,
 } = usePreferences();
-const lockStore = useLockStore();
+const accessStore = useAccessStore();
 const { refresh } = useRefresh();
 
 const sidebarTheme = computed(() => {
@@ -149,6 +149,10 @@ function clearPreferencesAndLogout() {
   emit('clearPreferencesAndLogout');
 }
 
+function clickLogo() {
+  emit('clickLogo');
+}
+
 watch(
   () => preferences.app.layout,
   async (val) => {
@@ -176,8 +180,16 @@ const headerSlots = computed(() => {
   <VbenAdminLayout
     v-model:sidebar-extra-visible="sidebarExtraVisible"
     :content-compact="preferences.app.contentCompact"
+    :content-compact-width="preferences.app.contentCompactWidth"
+    :content-padding="preferences.app.contentPadding"
+    :content-padding-bottom="preferences.app.contentPaddingBottom"
+    :content-padding-left="preferences.app.contentPaddingLeft"
+    :content-padding-right="preferences.app.contentPaddingRight"
+    :content-padding-top="preferences.app.contentPaddingTop"
     :footer-enable="preferences.footer.enable"
     :footer-fixed="preferences.footer.fixed"
+    :footer-height="preferences.footer.height"
+    :header-height="preferences.header.height"
     :header-hidden="preferences.header.hidden"
     :header-mode="preferences.header.mode"
     :header-theme="headerTheme"
@@ -188,13 +200,19 @@ const headerSlots = computed(() => {
     :sidebar-collapse="preferences.sidebar.collapsed"
     :sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
     :sidebar-enable="sidebarVisible"
+    :sidebar-collapsed-button="preferences.sidebar.collapsedButton"
+    :sidebar-fixed-button="preferences.sidebar.fixedButton"
     :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
     :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
+    :sidebar-extra-collapsed-width="preferences.sidebar.extraCollapsedWidth"
     :sidebar-hidden="preferences.sidebar.hidden"
+    :sidebar-mixed-width="preferences.sidebar.mixedWidth"
     :sidebar-theme="sidebarTheme"
     :sidebar-width="preferences.sidebar.width"
+    :side-collapse-width="preferences.sidebar.collapseWidth"
     :tabbar-enable="preferences.tabbar.enable"
     :tabbar-height="preferences.tabbar.height"
+    :z-index="preferences.app.zIndex"
     @side-mouse-leave="handleSideMouseLeave"
     @toggle-sidebar="toggleSidebar"
     @update:sidebar-collapse="
@@ -216,12 +234,18 @@ const headerSlots = computed(() => {
     <template #logo>
       <VbenLogo
         v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
         :class="logoClass"
         :collapsed="logoCollapsed"
         :src="preferences.logo.source"
         :text="preferences.app.name"
         :theme="showHeaderNav ? headerTheme : theme"
-      />
+        @click="clickLogo"
+      >
+        <template v-if="$slots['logo-text']" #text>
+          <slot name="logo-text"></slot>
+        </template>
+      </VbenLogo>
     </template>
     <!-- 头部区域 -->
     <template #header>
@@ -301,9 +325,14 @@ const headerSlots = computed(() => {
     <template #side-extra-title>
       <VbenLogo
         v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
         :text="preferences.app.name"
         :theme="theme"
-      />
+      >
+        <template v-if="$slots['logo-text']" #text>
+          <slot name="logo-text"></slot>
+        </template>
+      </VbenLogo>
     </template>
 
     <template #tabbar>
@@ -341,7 +370,7 @@ const headerSlots = computed(() => {
       />
 
       <Transition v-if="preferences.widget.lockScreen" name="slide-up">
-        <slot v-if="lockStore.isLockScreen" name="lock-screen"></slot>
+        <slot v-if="accessStore.isLockScreen" name="lock-screen"></slot>
       </Transition>
 
       <template v-if="preferencesButtonPosition.fixed">
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue b/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue
index f54623676..5f194a754 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue
@@ -11,7 +11,7 @@ import { useNavigation } from './use-navigation';
 
 interface Props extends MenuProps {
   collapse?: boolean;
-  menus: MenuRecordRaw[];
+  menus?: MenuRecordRaw[];
 }
 
 withDefaults(defineProps<Props>(), {
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue b/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
index 109de0fab..cbb5cfb54 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
@@ -6,7 +6,7 @@ import type { MenuProps } from '@vben-core/menu-ui';
 import { Menu } from '@vben-core/menu-ui';
 
 interface Props extends MenuProps {
-  menus: MenuRecordRaw[];
+  menus?: MenuRecordRaw[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +37,7 @@ function handleMenuOpen(key: string, path: string[]) {
     :menus="menus"
     :mode="mode"
     :rounded="rounded"
+    scroll-to-active
     :theme="theme"
     @open="handleMenuOpen"
     @select="handleMenuSelect"
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts b/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
index c213cff29..e2afb7410 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
@@ -13,7 +13,7 @@ import { useNavigation } from './use-navigation';
 
 function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
   const accessStore = useAccessStore();
-  const { navigation } = useNavigation();
+  const { navigation, willOpenedByWindow } = useNavigation();
 
   const menus = computed(() => useRootMenus?.value ?? accessStore.accessMenus);
 
@@ -33,11 +33,15 @@ function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
    * @param menu
    */
   const handleMixedMenuSelect = async (menu: MenuRecordRaw) => {
-    extraMenus.value = menu?.children ?? [];
-    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
-    const hasChildren = extraMenus.value.length > 0;
+    const _extraMenus = menu?.children ?? [];
+    const hasChildren = _extraMenus.length > 0;
+
+    if (!willOpenedByWindow(menu.path)) {
+      extraMenus.value = _extraMenus ?? [];
+      extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
+      sidebarExtraVisible.value = hasChildren;
+    }
 
-    sidebarExtraVisible.value = hasChildren;
     if (!hasChildren) {
       await navigation(menu.path);
     } else if (preferences.sidebar.autoActivateChild) {
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
index c1d27fd41..8424c386a 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -10,7 +10,7 @@ import { findRootMenuByPath } from '@vben/utils';
 import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {
-  const { navigation } = useNavigation();
+  const { navigation, willOpenedByWindow } = useNavigation();
   const accessStore = useAccessStore();
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
@@ -74,7 +74,7 @@ function useMixedMenu() {
    */
   const headerActive = computed(() => {
     if (!needSplit.value) {
-      return route.path;
+      return route.meta?.activePath ?? route.path;
     }
     return rootMenuPath.value;
   });
@@ -89,11 +89,15 @@ function useMixedMenu() {
       navigation(key);
       return;
     }
-
     const rootMenu = menus.value.find((item) => item.path === key);
-    rootMenuPath.value = rootMenu?.path ?? '';
-    splitSideMenus.value = rootMenu?.children ?? [];
-    if (splitSideMenus.value.length === 0) {
+    const _splitSideMenus = rootMenu?.children ?? [];
+
+    if (!willOpenedByWindow(key)) {
+      rootMenuPath.value = rootMenu?.path ?? '';
+      splitSideMenus.value = _splitSideMenus;
+    }
+
+    if (_splitSideMenus.length === 0) {
       navigation(key);
     } else if (rootMenu && preferences.sidebar.autoActivateChild) {
       navigation(
@@ -136,7 +140,10 @@ function useMixedMenu() {
   watch(
     () => route.path,
     (path) => {
-      const currentPath = (route?.meta?.activePath as string) ?? path;
+      const currentPath = route?.meta?.activePath ?? route?.meta?.link ?? path;
+      if (willOpenedByWindow(currentPath)) {
+        return;
+      }
       calcSideMenus(currentPath);
       if (rootMenuPath.value)
         defaultSubMap.set(rootMenuPath.value, currentPath);
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts b/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts
index 2de3fe512..7b88de8f0 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts
@@ -6,30 +6,58 @@ import { isHttpUrl, openRouteInNewWindow, openWindow } from '@vben/utils';
 
 function useNavigation() {
   const router = useRouter();
-  const routes = router.getRoutes();
-
   const routeMetaMap = new Map<string, RouteRecordNormalized>();
 
-  routes.forEach((route) => {
-    routeMetaMap.set(route.path, route);
+  // 初始化路由映射
+  const initRouteMetaMap = () => {
+    const routes = router.getRoutes();
+    routes.forEach((route) => {
+      routeMetaMap.set(route.path, route);
+    });
+  };
+
+  initRouteMetaMap();
+
+  // 监听路由变化
+  router.afterEach(() => {
+    initRouteMetaMap();
   });
 
-  const navigation = async (path: string) => {
-    const route = routeMetaMap.get(path);
-    const { openInNewWindow = false, query = {} } = route?.meta ?? {};
+  // 检查是否应该在新窗口打开
+  const shouldOpenInNewWindow = (path: string): boolean => {
     if (isHttpUrl(path)) {
-      openWindow(path, { target: '_blank' });
-    } else if (openInNewWindow) {
-      openRouteInNewWindow(path);
-    } else {
-      await router.push({
-        path,
-        query,
-      });
+      return true;
     }
+    const route = routeMetaMap.get(path);
+    return route?.meta?.openInNewWindow ?? false;
+  };
+
+  const navigation = async (path: string) => {
+    try {
+      const route = routeMetaMap.get(path);
+      const { openInNewWindow = false, query = {} } = route?.meta ?? {};
+
+      if (isHttpUrl(path)) {
+        openWindow(path, { target: '_blank' });
+      } else if (openInNewWindow) {
+        openRouteInNewWindow(path);
+      } else {
+        await router.push({
+          path,
+          query,
+        });
+      }
+    } catch (error) {
+      console.error('Navigation failed:', error);
+      throw error;
+    }
+  };
+
+  const willOpenedByWindow = (path: string) => {
+    return shouldOpenInNewWindow(path);
   };
 
-  return { navigation };
+  return { navigation, willOpenedByWindow };
 }
 
 export { useNavigation };
diff --git a/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue b/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
index b67b3a4af..8e4f33ba8 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
@@ -30,7 +30,7 @@ const {
 } = useTabbar();
 
 const menus = computed(() => {
-  const tab = tabbarStore.getTabByPath(currentActive.value);
+  const tab = tabbarStore.getTabByKey(currentActive.value);
   const menus = createContextMenus(tab);
   return menus.map((item) => {
     return {
diff --git a/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts b/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
index 501ae9b28..0f0ef340f 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
@@ -22,7 +22,7 @@ import {
   X,
 } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
-import { useAccessStore, useTabbarStore } from '@vben/stores';
+import { getTabKey, useAccessStore, useTabbarStore } from '@vben/stores';
 import { filterTree } from '@vben/utils';
 
 export function useTabbar() {
@@ -44,8 +44,11 @@ export function useTabbar() {
     toggleTabPin,
   } = useTabs();
 
+  /**
+   * 当前路径对应的tab的key
+   */
   const currentActive = computed(() => {
-    return route.fullPath;
+    return getTabKey(route);
   });
 
   const { locale } = useI18n();
@@ -73,7 +76,8 @@ export function useTabbar() {
 
   // 点击tab,跳转路由
   const handleClick = (key: string) => {
-    router.push(key);
+    const { fullPath, path } = tabbarStore.getTabByKey(key);
+    router.push(fullPath || path);
   };
 
   // 关闭tab
@@ -100,7 +104,7 @@ export function useTabbar() {
   );
 
   watch(
-    () => route.path,
+    () => route.fullPath,
     () => {
       const meta = route.matched?.[route.matched.length - 1]?.meta;
       tabbarStore.addTab({
@@ -158,7 +162,7 @@ export function useTabbar() {
       },
       {
         disabled: disabledRefresh,
-        handler: refreshTab,
+        handler: () => refreshTab(),
         icon: RotateCw,
         key: 'reload',
         text: $t('preferences.tabbar.contextMenu.reload'),
@@ -209,7 +213,8 @@ export function useTabbar() {
         text: $t('preferences.tabbar.contextMenu.closeAll'),
       },
     ];
-    return menus;
+
+    return menus.filter((item) => tabbarStore.getMenuList.includes(item.key));
   };
 
   return {
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue b/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
index 661604d8b..4f3082f39 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
@@ -6,7 +6,7 @@ import { $t } from '@vben/locales';
 import { useVbenModal } from '@vben-core/popup-ui';
 
 interface Props {
-  // 轮训时间，分钟
+  // 轮询时间，分钟
   checkUpdatesInterval?: number;
   // 检查更新的地址
   checkUpdateUrl?: string;
@@ -46,6 +46,7 @@ async function getVersionTag() {
     const response = await fetch(props.checkUpdateUrl, {
       cache: 'no-cache',
       method: 'HEAD',
+      redirect: 'manual',
     });
 
     return (
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue b/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue
index 8e6777495..bd8b3343b 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -24,7 +24,7 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ enableShortcutKey?: boolean; menus: MenuRecordRaw[] }>(),
+  defineProps<{ enableShortcutKey?: boolean; menus?: MenuRecordRaw[] }>(),
   {
     enableShortcutKey: true,
     menus: () => [],
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue b/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue
index c85d17ca5..48b6004a5 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -18,7 +18,7 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ keyword: string; menus: MenuRecordRaw[] }>(),
+  defineProps<{ keyword?: string; menus?: MenuRecordRaw[] }>(),
   {
     keyword: '',
     menus: () => [],
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue
index 846322927..728fca04f 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -12,7 +12,8 @@ defineOptions({
   name: 'LanguageToggle',
 });
 
-async function handleUpdate(value: string) {
+async function handleUpdate(value: string | undefined) {
+  if (!value) return;
   const locale = value as SupportedLanguagesType;
   updatePreferences({
     app: {
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue
index 5c71cc7b0..ae4eecb31 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue
@@ -39,7 +39,8 @@ const menus = computed((): VbenDropdownMenuItem[] => [
 
 const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
 
-function handleUpdate(value: string) {
+function handleUpdate(value: string | undefined) {
+  if (!value) return;
   updatePreferences({
     app: {
       authPageLayout: value as AuthPageLayoutType,
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index 38c1d2b6f..736d09d5b 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -3,7 +3,7 @@ import { computed, reactive, ref } from 'vue';
 
 import { LockKeyhole } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
-import { storeToRefs, useLockStore } from '@vben/stores';
+import { storeToRefs, useAccessStore } from '@vben/stores';
 
 import { useScrollLock } from '@vben-core/composables';
 import { useVbenForm, z } from '@vben-core/form-ui';
@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
 defineEmits<{ toLogin: [] }>();
 
 const { locale } = useI18n();
-const lockStore = useLockStore();
+const accessStore = useAccessStore();
 
 const now = useNow();
 const meridiem = useDateFormat(now, 'A');
@@ -35,7 +35,7 @@ const minute = useDateFormat(now, 'mm');
 const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 
 const showUnlockForm = ref(false);
-const { lockScreenPassword } = storeToRefs(lockStore);
+const { lockScreenPassword } = storeToRefs(accessStore);
 
 const [Form, { form, validate }] = useVbenForm(
   reactive({
@@ -66,7 +66,7 @@ async function handleSubmit() {
   const { valid } = await validate();
   if (valid) {
     if (validPass.value) {
-      lockStore.unlockScreen();
+      accessStore.unlockScreen();
     } else {
       form.setFieldError('password', $t('authentication.passwordErrorTip'));
     }
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
new file mode 100644
index 000000000..99940c611
--- /dev/null
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import { VbenCheckButtonGroup, VbenTooltip } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceCheckboxItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    multiple?: boolean;
+    onBtnClick?: (value: string) => void;
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+    onBtnClick: () => {},
+    multiple: false,
+  },
+);
+
+const inputValue = defineModel<string[]>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <VbenCheckButtonGroup
+      v-model="inputValue"
+      class="h-8 w-[165px]"
+      :options="items"
+      :disabled="disabled"
+      :multiple="multiple"
+      @btn-click="onBtnClick"
+    />
+  </div>
+</template>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
index 49122ea31..e8d84afa1 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { LayoutType } from '@vben/types';
 
+import { onMounted } from 'vue';
+
 import { $t } from '@vben/locales';
 
+import CheckboxItem from '../checkbox-item.vue';
 import NumberFieldItem from '../number-field-item.vue';
 import SwitchItem from '../switch-item.vue';
 
@@ -18,6 +21,27 @@ const sidebarAutoActivateChild = defineModel<boolean>(
 );
 const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
 const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+
+const sidebarButtons = defineModel<string[]>('sidebarButtons', { default: [] });
+const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
+const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
+
+onMounted(() => {
+  if (
+    sidebarCollapsedButton.value &&
+    !sidebarButtons.value.includes('collapsed')
+  ) {
+    sidebarButtons.value.push('collapsed');
+  }
+  if (sidebarFixedButton.value && !sidebarButtons.value.includes('fixed')) {
+    sidebarButtons.value.push('fixed');
+  }
+});
+
+const handleCheckboxChange = () => {
+  sidebarCollapsedButton.value = !!sidebarButtons.value.includes('collapsed');
+  sidebarFixedButton.value = !!sidebarButtons.value.includes('fixed');
+};
 </script>
 
 <template>
@@ -53,6 +77,17 @@ const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
   >
     {{ $t('preferences.sidebar.autoActivateChild') }}
   </SwitchItem>
+  <CheckboxItem
+    :items="[
+      { label: $t('preferences.sidebar.buttonCollapsed'), value: 'collapsed' },
+      { label: $t('preferences.sidebar.buttonFixed'), value: 'fixed' },
+    ]"
+    multiple
+    v-model="sidebarButtons"
+    :on-btn-click="handleCheckboxChange"
+  >
+    {{ $t('preferences.sidebar.buttons') }}
+  </CheckboxItem>
   <NumberFieldItem
     v-model="sidebarWidth"
     :disabled="!sidebarEnable || disabled"
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
index 8a41763a1..27dfd28ae 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -9,6 +9,8 @@ import { $t } from '@vben/locales';
 import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
 import { convertToHsl, TinyColor } from '@vben/utils';
 
+import { useThrottleFn } from '@vueuse/core';
+
 defineOptions({
   name: 'PreferenceBuiltinTheme',
 });
@@ -19,6 +21,15 @@ const colorInput = ref();
 const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
 const themeColorPrimary = defineModel<string>('themeColorPrimary');
 
+const updateThemeColorPrimary = useThrottleFn(
+  (value: string) => {
+    themeColorPrimary.value = value;
+  },
+  300,
+  true,
+  true,
+);
+
 const inputValue = computed(() => {
   return new TinyColor(themeColorPrimary.value || '').toHexString();
 });
@@ -84,7 +95,7 @@ function handleSelect(theme: BuiltinThemePreset) {
 
 function handleInputChange(e: Event) {
   const target = e.target as HTMLInputElement;
-  themeColorPrimary.value = convertToHsl(target.value);
+  updateThemeColorPrimary(convertToHsl(target.value));
 }
 
 function selectColor() {
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
index df2c39fa0..3f2a4a263 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
@@ -7,7 +7,7 @@ defineOptions({
   name: 'PreferenceToggleItem',
 });
 
-withDefaults(defineProps<{ disabled?: boolean; items: SelectOption[] }>(), {
+withDefaults(defineProps<{ disabled?: boolean; items?: SelectOption[] }>(), {
   disabled: false,
   items: () => [],
 });
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index 88e83815b..7d62d4e0c 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -93,8 +93,9 @@ const sidebarCollapsedShowTitle = defineModel<boolean>(
 const sidebarAutoActivateChild = defineModel<boolean>(
   'sidebarAutoActivateChild',
 );
-const SidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
-
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
+const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 const headerMenuAlign =
@@ -317,8 +318,10 @@ async function handleReset() {
                 v-model:sidebar-collapsed="sidebarCollapsed"
                 v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
                 v-model:sidebar-enable="sidebarEnable"
-                v-model:sidebar-expand-on-hover="SidebarExpandOnHover"
+                v-model:sidebar-expand-on-hover="sidebarExpandOnHover"
                 v-model:sidebar-width="sidebarWidth"
+                v-model:sidebar-collapsed-button="sidebarCollapsedButton"
+                v-model:sidebar-fixed-button="sidebarFixedButton"
                 :current-layout="appLayout"
                 :disabled="!isSideMode"
               />
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue b/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
index 77f330c58..9ee4bceb5 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -132,8 +132,8 @@ function toggleTheme(event: MouseEvent) {
   &__sun {
     @apply fill-foreground/90 stroke-none;
 
-    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
     transform-origin: center center;
+    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
 
     &:hover > svg > & {
       @apply fill-foreground/90;
@@ -143,10 +143,10 @@ function toggleTheme(event: MouseEvent) {
   &__sun-beams {
     @apply stroke-foreground/90 stroke-[2px];
 
+    transform-origin: center center;
     transition:
       transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
       opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
-    transform-origin: center center;
 
     &:hover > svg > & {
       @apply stroke-foreground;
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
index ce6954b76..19c132e3f 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
@@ -25,7 +25,7 @@ withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
   shouldOnHover: false,
 });
 
-function handleChange(isDark: boolean) {
+function handleChange(isDark: boolean | undefined) {
   updatePreferences({
     theme: { mode: isDark ? 'dark' : 'light' },
   });
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index af0e85a40..8156324af 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -9,7 +9,7 @@ import { useHoverToggle } from '@vben/hooks';
 import { LockKeyhole, LogOut } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';
-import { useLockStore } from '@vben/stores';
+import { useAccessStore } from '@vben/stores';
 import { isWindowsOs } from '@vben/utils';
 
 import { useVbenModal } from '@vben-core/popup-ui';
@@ -46,7 +46,11 @@ interface Props {
   /**
    * 菜单数组
    */
-  menus?: Array<{ handler: AnyFunction; icon?: Component; text: string }>;
+  menus?: Array<{
+    handler: AnyFunction;
+    icon?: Component | Function | string;
+    text: string;
+  }>;
 
   /**
    * 标签文本
@@ -82,7 +86,7 @@ const emit = defineEmits<{ logout: [] }>();
 
 const { globalLockScreenShortcutKey, globalLogoutShortcutKey } =
   usePreferences();
-const lockStore = useLockStore();
+const accessStore = useAccessStore();
 const [LockModal, lockModalApi] = useVbenModal({
   connectedComponent: LockScreenModal,
 });
@@ -133,7 +137,7 @@ function handleOpenLock() {
 
 function handleSubmitLock(lockScreenPassword: string) {
   lockModalApi.close();
-  lockStore.lockScreen(lockScreenPassword);
+  accessStore.lockScreen(lockScreenPassword);
 }
 
 function handleLogout() {
diff --git a/apps/vben5/packages/effects/plugins/package.json b/apps/vben5/packages/effects/plugins/package.json
index 997e6601c..40c16c7d7 100644
--- a/apps/vben5/packages/effects/plugins/package.json
+++ b/apps/vben5/packages/effects/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/plugins",
-  "version": "5.5.3",
+  "version": "5.5.6",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -21,6 +21,10 @@
     "./vxe-table": {
       "types": "./src/vxe-table/index.ts",
       "default": "./src/vxe-table/index.ts"
+    },
+    "./motion": {
+      "types": "./src/motion/index.ts",
+      "default": "./src/motion/index.ts"
     }
   },
   "dependencies": {
@@ -34,6 +38,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "catalog:",
+    "@vueuse/motion": "catalog:",
     "echarts": "catalog:",
     "vue": "catalog:",
     "vxe-pc-ui": "catalog:",
diff --git a/apps/vben5/packages/effects/plugins/src/motion/index.ts b/apps/vben5/packages/effects/plugins/src/motion/index.ts
new file mode 100644
index 000000000..021465aa0
--- /dev/null
+++ b/apps/vben5/packages/effects/plugins/src/motion/index.ts
@@ -0,0 +1,8 @@
+export * from './types';
+
+export {
+  MotionComponent as Motion,
+  MotionDirective,
+  MotionGroupComponent as MotionGroup,
+  MotionPlugin,
+} from '@vueuse/motion';
diff --git a/apps/vben5/packages/effects/plugins/src/motion/types.ts b/apps/vben5/packages/effects/plugins/src/motion/types.ts
new file mode 100644
index 000000000..f08bf21ee
--- /dev/null
+++ b/apps/vben5/packages/effects/plugins/src/motion/types.ts
@@ -0,0 +1,26 @@
+export const MotionPresets = [
+  'fade',
+  'fadeVisible',
+  'fadeVisibleOnce',
+  'rollBottom',
+  'rollLeft',
+  'rollRight',
+  'rollTop',
+  'rollVisibleBottom',
+  'rollVisibleLeft',
+  'rollVisibleRight',
+  'rollVisibleTop',
+  'pop',
+  'popVisible',
+  'popVisibleOnce',
+  'slideBottom',
+  'slideLeft',
+  'slideRight',
+  'slideTop',
+  'slideVisibleBottom',
+  'slideVisibleLeft',
+  'slideVisibleRight',
+  'slideVisibleTop',
+] as const;
+
+export type MotionPreset = (typeof MotionPresets)[number];
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
index 50879b674..2b60d602e 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
@@ -26,14 +26,14 @@ function getDefaultState(): VxeGridProps {
   };
 }
 
-export class VxeGridApi {
+export class VxeGridApi<T extends Record<string, any> = any> {
   public formApi = {} as ExtendedFormApi;
 
   // private prevState: null | VxeGridProps = null;
-  public grid = {} as VxeGridInstance;
-  public state: null | VxeGridProps = null;
+  public grid = {} as VxeGridInstance<T>;
+  public state: null | VxeGridProps<T> = null;
 
-  public store: Store<VxeGridProps>;
+  public store: Store<VxeGridProps<T>>;
 
   private isMounted = false;
 
@@ -99,8 +99,8 @@ export class VxeGridApi {
 
   setState(
     stateOrFn:
-      | ((prev: VxeGridProps) => Partial<VxeGridProps>)
-      | Partial<VxeGridProps>,
+      | ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
+      | Partial<VxeGridProps<T>>,
   ) {
     if (isFunction(stateOrFn)) {
       this.store.setState((prev) => {
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts
index 38fe58806..a19f2b8fc 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts
@@ -3,4 +3,8 @@ export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
 
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
-export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
+export type {
+  VxeGridListeners,
+  VxeGridProps,
+  VxeGridPropTypes,
+} from 'vxe-table';
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
index d0b9f3b13..00e9d8abe 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
@@ -106,7 +106,7 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
   initVxeTable();
   useTableForm = useVbenForm;
 
-  const preference = usePreferences();
+  const { isDark, locale } = usePreferences();
 
   const localMap = {
     'zh-CN': zhCN,
@@ -114,11 +114,11 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
   };
 
   watch(
-    [() => preference.theme.value, () => preference.locale.value],
-    ([theme, locale]) => {
-      VxeUI.setTheme(theme === 'dark' ? 'dark' : 'light');
-      VxeUI.setI18n(locale, localMap[locale]);
-      VxeUI.setLanguage(locale);
+    [() => isDark.value, () => locale.value],
+    ([isDarkValue, localeValue]) => {
+      VxeUI.setTheme(isDarkValue ? 'dark' : 'light');
+      VxeUI.setI18n(localeValue, localMap[localeValue]);
+      VxeUI.setLanguage(localeValue);
     },
     {
       immediate: true,
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/style.css b/apps/vben5/packages/effects/plugins/src/vxe-table/style.css
index 2f8fa8434..5b47fa2cf 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/style.css
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/style.css
@@ -45,6 +45,11 @@
   );
   --vxe-ui-table-row-current-background-color: hsl(var(--accent));
   --vxe-ui-table-row-hover-current-background-color: hsl(var(--accent-hover));
+  --vxe-ui-font-primary-tinge-color: hsl(var(--primary));
+  --vxe-ui-font-primary-lighten-color: hsl(var(--primary) / 60%);
+  --vxe-ui-font-primary-darken-color: hsl(var(--primary));
+
+  height: auto !important;
 
   /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
 }
@@ -102,3 +107,11 @@
 .vxe-tools--operate:not(:has(button)) {
   margin-left: 0;
 }
+
+.vxe-grid--layout-header-wrapper {
+  overflow: visible;
+}
+
+.vxe-grid--layout-body-content-wrapper {
+  overflow: hidden;
+}
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
index 4eb69b5f5..8b9aea47d 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
@@ -9,7 +9,7 @@ import type { Ref } from 'vue';
 
 import type { ClassType, DeepPartial } from '@vben/types';
 
-import type { VbenFormProps } from '@vben-core/form-ui';
+import type { BaseFormComponentType, VbenFormProps } from '@vben-core/form-ui';
 
 import type { VxeGridApi } from './api';
 
@@ -31,7 +31,15 @@ export interface VxeTableGridOptions<T = any> extends VxeTableGridProps<T> {
   toolbarConfig?: ToolbarConfigOptions;
 }
 
-export interface VxeGridProps {
+export interface SeparatorOptions {
+  show?: boolean;
+  backgroundColor?: string;
+}
+
+export interface VxeGridProps<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+> {
   /**
    * 标题
    */
@@ -51,24 +59,31 @@ export interface VxeGridProps {
   /**
    * vxe-grid 配置
    */
-  gridOptions?: DeepPartial<VxeTableGridOptions>;
+  gridOptions?: DeepPartial<VxeTableGridOptions<T>>;
   /**
    * vxe-grid 事件
    */
-  gridEvents?: DeepPartial<VxeGridListeners>;
+  gridEvents?: DeepPartial<VxeGridListeners<T>>;
   /**
    * 表单配置
    */
-  formOptions?: VbenFormProps;
+  formOptions?: VbenFormProps<D>;
   /**
    * 显示搜索表单
    */
   showSearchForm?: boolean;
+  /**
+   * 搜索表单与表格主体之间的分隔条
+   */
+  separator?: boolean | SeparatorOptions;
 }
 
-export type ExtendedVxeGridApi = VxeGridApi & {
-  useStore: <T = NoInfer<VxeGridProps>>(
-    selector?: (state: NoInfer<VxeGridProps>) => T,
+export type ExtendedVxeGridApi<
+  D extends Record<string, any> = any,
+  F extends BaseFormComponentType = BaseFormComponentType,
+> = VxeGridApi<D> & {
+  useStore: <T = NoInfer<VxeGridProps<D, F>>>(
+    selector?: (state: NoInfer<VxeGridProps<any, any>>) => T,
   ) => Readonly<Ref<T>>;
 };
 
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
index a309f5ac4..e69ae35b5 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
@@ -1,3 +1,5 @@
+import type { BaseFormComponentType } from '@vben-core/form-ui';
+
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
 
 import { defineComponent, h, onBeforeUnmount } from 'vue';
@@ -7,16 +9,19 @@ import { useStore } from '@vben-core/shared/store';
 import { VxeGridApi } from './api';
 import VxeGrid from './use-vxe-grid.vue';
 
-export function useVbenVxeGrid(options: VxeGridProps) {
+export function useVbenVxeGrid<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+>(options: VxeGridProps<T, D>) {
   // const IS_REACTIVE = isReactive(options);
   const api = new VxeGridApi(options);
-  const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi;
+  const extendedApi: ExtendedVxeGridApi<T, D> = api as ExtendedVxeGridApi<T, D>;
   extendedApi.useStore = (selector) => {
     return useStore(api.store, selector);
   };
 
   const Grid = defineComponent(
-    (props: VxeGridProps, { attrs, slots }) => {
+    (props: VxeGridProps<T>, { attrs, slots }) => {
       onBeforeUnmount(() => {
         api.unmount();
       });
@@ -24,8 +29,8 @@ export function useVbenVxeGrid(options: VxeGridProps) {
       return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots);
     },
     {
-      inheritAttrs: false,
       name: 'VbenVxeGrid',
+      inheritAttrs: false,
     },
   );
   // Add reactivity support
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index ec36fed2a..f3eb6735a 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -29,10 +29,17 @@ import { usePriorityValues } from '@vben/hooks';
 import { EmptyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { usePreferences } from '@vben/preferences';
-import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
+import {
+  cloneDeep,
+  cn,
+  isBoolean,
+  isEqual,
+  mergeWithArrayOverride,
+} from '@vben/utils';
 
 import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
 
+import { VxeButton } from 'vxe-pc-ui';
 import { VxeGrid, VxeUI } from 'vxe-table';
 
 import { extendProxyOptions } from './extends';
@@ -52,6 +59,7 @@ const FORM_SLOT_PREFIX = 'form-';
 
 const TOOLBAR_ACTIONS = 'toolbar-actions';
 const TOOLBAR_TOOLS = 'toolbar-tools';
+const TABLE_TITLE = 'table-title';
 
 const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
 
@@ -66,10 +74,30 @@ const {
   tableTitle,
   tableTitleHelp,
   showSearchForm,
+  separator,
 } = usePriorityValues(props, state);
 
 const { isMobile } = usePreferences();
-
+const isSeparator = computed(() => {
+  if (
+    !formOptions.value ||
+    showSearchForm.value === false ||
+    separator.value === false
+  ) {
+    return false;
+  }
+  if (separator.value === true || separator.value === undefined) {
+    return true;
+  }
+  return separator.value.show !== false;
+});
+const separatorBg = computed(() => {
+  return !separator.value ||
+    isBoolean(separator.value) ||
+    !separator.value.backgroundColor
+    ? undefined
+    : separator.value.backgroundColor;
+});
 const slots: SetupContext['slots'] = useSlots();
 
 const [Form, formApi] = useTableForm({
@@ -80,10 +108,14 @@ const [Form, formApi] = useTableForm({
     props.api.reload(formValues);
   },
   handleReset: async () => {
+    const prevValues = await formApi.getValues();
     await formApi.resetForm();
     const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(formValues);
-    props.api.reload(formValues);
+    // 如果值发生了变化，submitOnChange会触发刷新。所以只在submitOnChange为false或者值没有发生变化时，手动刷新
+    if (isEqual(prevValues, formValues) || !formOptions.value?.submitOnChange) {
+      props.api.reload(formValues);
+    }
   },
   commonConfig: {
     componentProps: {
@@ -98,7 +130,7 @@ const [Form, formApi] = useTableForm({
 });
 
 const showTableTitle = computed(() => {
-  return !!slots.tableTitle?.() || tableTitle.value;
+  return !!slots[TABLE_TITLE]?.() || tableTitle.value;
 });
 
 const showToolbar = computed(() => {
@@ -114,10 +146,12 @@ const toolbarOptions = computed(() => {
   const slotTools = slots[TOOLBAR_TOOLS]?.();
   const searchBtn: VxeToolbarPropTypes.ToolConfig = {
     code: 'search',
-    icon: 'vxe-icon--search',
+    icon: 'vxe-icon-search',
     circle: true,
     status: showSearchForm.value ? 'primary' : undefined,
-    title: $t('common.search'),
+    title: showSearchForm.value
+      ? $t('common.hideSearchPanel')
+      : $t('common.showSearchPanel'),
   };
   // 将搜索按钮合并到用户配置的toolbarConfig.tools中
   const toolbarConfig: VxeGridPropTypes.ToolbarConfig = {
@@ -200,13 +234,17 @@ const options = computed(() => {
 
 function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
   if (event.code === 'search') {
-    props.api?.toggleSearchForm?.();
+    onSearchBtnClick();
   }
   (
     gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick']
   )?.(event);
 }
 
+function onSearchBtnClick() {
+  props.api?.toggleSearchForm?.();
+}
+
 const events = computed(() => {
   return {
     ...gridEvents.value,
@@ -218,7 +256,11 @@ const delegatedSlots = computed(() => {
   const resultSlots: string[] = [];
 
   for (const key of Object.keys(slots)) {
-    if (!['empty', 'form', 'loading', TOOLBAR_ACTIONS].includes(key)) {
+    if (
+      !['empty', 'form', 'loading', TOOLBAR_ACTIONS, TOOLBAR_TOOLS].includes(
+        key,
+      )
+    ) {
       resultSlots.push(key);
     }
   }
@@ -236,6 +278,15 @@ const delegatedFormSlots = computed(() => {
   return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
 });
 
+const showDefaultEmpty = computed(() => {
+  // 检查是否有原生的 VXE Table 空状态配置
+  const hasEmptyText = options.value.emptyText !== undefined;
+  const hasEmptyRender = options.value.emptyRender !== undefined;
+
+  // 如果有原生配置，就不显示默认的空状态
+  return !hasEmptyText && !hasEmptyRender;
+});
+
 async function init() {
   await nextTick();
   const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
@@ -344,13 +395,36 @@ onUnmounted(() => {
       >
         <slot :name="slotName" v-bind="slotProps"></slot>
       </template>
+      <template #toolbar-tools="slotProps">
+        <slot name="toolbar-tools" v-bind="slotProps"></slot>
+        <VxeButton
+          icon="vxe-icon-search"
+          circle
+          class="ml-2"
+          v-if="gridOptions?.toolbarConfig?.search && !!formOptions"
+          :status="showSearchForm ? 'primary' : undefined"
+          :title="$t('common.search')"
+          @click="onSearchBtnClick"
+        />
+      </template>
 
       <!-- form表单 -->
       <template #form>
         <div
           v-if="formOptions"
           v-show="showSearchForm !== false"
-          :class="cn('relative rounded py-3', isCompactForm ? 'pb-6' : 'pb-4')"
+          :class="
+            cn(
+              'relative rounded py-3',
+              isCompactForm
+                ? isSeparator
+                  ? 'pb-8'
+                  : 'pb-4'
+                : isSeparator
+                  ? 'pb-4'
+                  : 'pb-0',
+            )
+          "
         >
           <slot name="form">
             <Form>
@@ -379,6 +453,10 @@ onUnmounted(() => {
             </Form>
           </slot>
           <div
+            v-if="isSeparator"
+            :style="{
+              ...(separatorBg ? { backgroundColor: separatorBg } : undefined),
+            }"
             class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
           ></div>
         </div>
@@ -390,7 +468,7 @@ onUnmounted(() => {
         </slot>
       </template>
       <!-- 统一控状态 -->
-      <template #empty>
+      <template v-if="showDefaultEmpty" #empty>
         <slot name="empty">
           <EmptyIcon class="mx-auto" />
           <div class="mt-2">{{ $t('common.noData') }}</div>
diff --git a/apps/vben5/packages/effects/request/package.json b/apps/vben5/packages/effects/request/package.json
index bbea72627..527f6d904 100644
--- a/apps/vben5/packages/effects/request/package.json
+++ b/apps/vben5/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -22,9 +22,11 @@
   "dependencies": {
     "@vben/locales": "workspace:*",
     "@vben/utils": "workspace:*",
-    "axios": "catalog:"
+    "axios": "catalog:",
+    "qs": "catalog:"
   },
   "devDependencies": {
+    "@types/qs": "catalog:",
     "axios-mock-adapter": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts b/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts
index ee5e7a23c..1353222ab 100644
--- a/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts
@@ -1,6 +1,8 @@
 import type { RequestClient } from '../request-client';
 import type { RequestClientConfig } from '../types';
 
+import { isUndefined } from '@vben/utils';
+
 class FileUploader {
   private client: RequestClient;
 
@@ -16,7 +18,13 @@ class FileUploader {
     const formData = new FormData();
 
     Object.entries(data).forEach(([key, value]) => {
-      formData.append(key, value);
+      if (Array.isArray(value)) {
+        value.forEach((item, index) => {
+          !isUndefined(item) && formData.append(`${key}[${index}]`, item);
+        });
+      } else {
+        !isUndefined(value) && formData.append(key, value);
+      }
     });
 
     const finalConfig: RequestClientConfig = {
diff --git a/apps/vben5/packages/effects/request/src/request-client/request-client.ts b/apps/vben5/packages/effects/request/src/request-client/request-client.ts
index 56412dd84..e58116737 100644
--- a/apps/vben5/packages/effects/request/src/request-client/request-client.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/request-client.ts
@@ -2,14 +2,39 @@ import type { AxiosInstance, AxiosResponse } from 'axios';
 
 import type { RequestClientConfig, RequestClientOptions } from './types';
 
-import { bindMethods, merge } from '@vben/utils';
+import { bindMethods, isString, merge } from '@vben/utils';
 
 import axios from 'axios';
+import qs from 'qs';
 
 import { FileDownloader } from './modules/downloader';
 import { InterceptorManager } from './modules/interceptor';
 import { FileUploader } from './modules/uploader';
 
+function getParamsSerializer(
+  paramsSerializer: RequestClientOptions['paramsSerializer'],
+) {
+  if (isString(paramsSerializer)) {
+    switch (paramsSerializer) {
+      case 'brackets': {
+        return (params: any) =>
+          qs.stringify(params, { arrayFormat: 'brackets' });
+      }
+      case 'comma': {
+        return (params: any) => qs.stringify(params, { arrayFormat: 'comma' });
+      }
+      case 'indices': {
+        return (params: any) =>
+          qs.stringify(params, { arrayFormat: 'indices' });
+      }
+      case 'repeat': {
+        return (params: any) => qs.stringify(params, { arrayFormat: 'repeat' });
+      }
+    }
+  }
+  return paramsSerializer;
+}
+
 class RequestClient {
   public addRequestInterceptor: InterceptorManager['addRequestInterceptor'];
 
@@ -39,6 +64,9 @@ class RequestClient {
     };
     const { ...axiosConfig } = options;
     const requestConfig = merge(axiosConfig, defaultConfig);
+    requestConfig.paramsSerializer = getParamsSerializer(
+      requestConfig.paramsSerializer,
+    );
     this.instance = axios.create(requestConfig);
 
     bindMethods(this);
@@ -108,6 +136,9 @@ class RequestClient {
       const response: AxiosResponse<T> = await this.instance({
         url,
         ...config,
+        ...(config.paramsSerializer
+          ? { paramsSerializer: getParamsSerializer(config.paramsSerializer) }
+          : {}),
       });
       return response as T;
     } catch (error: any) {
diff --git a/apps/vben5/packages/effects/request/src/request-client/types.ts b/apps/vben5/packages/effects/request/src/request-client/types.ts
index 1abfd981e..494741dc2 100644
--- a/apps/vben5/packages/effects/request/src/request-client/types.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/types.ts
@@ -5,15 +5,29 @@ import type {
   InternalAxiosRequestConfig,
 } from 'axios';
 
-type ExtendOptions = {
-  /** 响应数据的返回方式。
-   * raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
-   * body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
-   * data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
+type ExtendOptions<T = any> = {
+  /**
+   * 参数序列化方式。预置的有
+   * - brackets: ids[]=1&ids[]=2&ids[]=3
+   * - comma: ids=1,2,3
+   * - indices: ids[0]=1&ids[1]=2&ids[2]=3
+   * - repeat: ids=1&ids=2&ids=3
+   */
+  paramsSerializer?:
+    | 'brackets'
+    | 'comma'
+    | 'indices'
+    | 'repeat'
+    | AxiosRequestConfig<T>['paramsSerializer'];
+  /**
+   * 响应数据的返回方式。
+   * - raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
+   * - body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
+   * - data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
    */
   responseReturn?: 'body' | 'data' | 'raw';
 };
-type RequestClientConfig<T = any> = AxiosRequestConfig<T> & ExtendOptions;
+type RequestClientConfig<T = any> = AxiosRequestConfig<T> & ExtendOptions<T>;
 
 type RequestResponse<T = any> = AxiosResponse<T> & {
   config: RequestClientConfig<T>;
diff --git a/apps/vben5/packages/icons/package.json b/apps/vben5/packages/icons/package.json
index 57a7c9d4a..858383947 100644
--- a/apps/vben5/packages/icons/package.json
+++ b/apps/vben5/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/icons/src/index.ts b/apps/vben5/packages/icons/src/index.ts
index babbf6646..f69f28ef0 100644
--- a/apps/vben5/packages/icons/src/index.ts
+++ b/apps/vben5/packages/icons/src/index.ts
@@ -1,3 +1,3 @@
-export * from './iconify/index.js';
+export * from './iconify';
 export { default as EmptyIcon } from './icons/empty-icon.vue';
-export * from './svg/index.js';
+export * from './svg';
diff --git a/apps/vben5/packages/locales/package.json b/apps/vben5/packages/locales/package.json
index 4ec643061..5e92de548 100644
--- a/apps/vben5/packages/locales/package.json
+++ b/apps/vben5/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/locales/src/index.ts b/apps/vben5/packages/locales/src/index.ts
index eb2251adb..d4bfd819f 100644
--- a/apps/vben5/packages/locales/src/index.ts
+++ b/apps/vben5/packages/locales/src/index.ts
@@ -7,9 +7,11 @@ import {
 } from './i18n';
 
 const $t = i18n.global.t;
+const $te = i18n.global.te;
 
 export {
   $t,
+  $te,
   i18n,
   loadLocaleMessages,
   loadLocalesMap,
diff --git a/apps/vben5/packages/locales/src/langs/en-US/common.json b/apps/vben5/packages/locales/src/langs/en-US/common.json
index 01fc9ce72..08c20f7b0 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/common.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/common.json
@@ -6,9 +6,19 @@
   "prompt": "Prompt",
   "cancel": "Cancel",
   "confirm": "Confirm",
+  "reset": "Reset",
   "noData": "No Data",
   "refresh": "Refresh",
   "loadingMenu": "Loading Menu",
   "query": "Search",
-  "search": "Search"
+  "search": "Search",
+  "enabled": "Enabled",
+  "disabled": "Disabled",
+  "edit": "Edit",
+  "delete": "Delete",
+  "create": "Create",
+  "yes": "Yes",
+  "no": "No",
+  "showSearchPanel": "Show search panel",
+  "hideSearchPanel": "Hide search panel"
 }
diff --git a/apps/vben5/packages/locales/src/langs/en-US/preferences.json b/apps/vben5/packages/locales/src/langs/en-US/preferences.json
index 029a9a549..cda24a4cb 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/preferences.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/preferences.json
@@ -45,6 +45,9 @@
     "fixed": "Fixed"
   },
   "sidebar": {
+    "buttons": "Show Buttons",
+    "buttonFixed": "Fixed",
+    "buttonCollapsed": "Collapsed",
     "title": "Sidebar",
     "width": "Width",
     "visible": "Show Sidebar",
diff --git a/apps/vben5/packages/locales/src/langs/en-US/ui.json b/apps/vben5/packages/locales/src/langs/en-US/ui.json
index 651a65ac4..5bfd5d07a 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/ui.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/ui.json
@@ -1,7 +1,26 @@
 {
   "formRules": {
     "required": "Please enter {0}",
-    "selectRequired": "Please select {0}"
+    "selectRequired": "Please select {0}",
+    "minLength": "{0} must be at least {1} characters",
+    "maxLength": "{0} can be at most {1} characters",
+    "length": "{0} must be {1} characters long",
+    "alreadyExists": "{0} `{1}` already exists",
+    "startWith": "{0} must start with `{1}`",
+    "invalidURL": "Please input a valid URL"
+  },
+  "actionTitle": {
+    "edit": "Modify {0}",
+    "create": "Create {0}",
+    "delete": "Delete {0}",
+    "view": "View {0}"
+  },
+  "actionMessage": {
+    "deleteConfirm": "Are you sure to delete {0}?",
+    "deleting": "Deleting {0} ...",
+    "deleteSuccess": "{0} deleted successfully",
+    "operationSuccess": "Operation succeeded",
+    "operationFailed": "Operation failed"
   },
   "placeholder": {
     "input": "Please enter",
@@ -25,6 +44,10 @@
     "placeholder": "Select an icon",
     "search": "Search icon..."
   },
+  "jsonViewer": {
+    "copy": "Copy",
+    "copied": "Copied"
+  },
   "fallback": {
     "pageNotFound": "Oops! Page Not Found",
     "pageNotFoundDesc": "Sorry, we couldn't find the page you were looking for.",
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/common.json b/apps/vben5/packages/locales/src/langs/zh-CN/common.json
index d0b5ffc0f..6b3cad5da 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/common.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/common.json
@@ -6,9 +6,19 @@
   "prompt": "提示",
   "cancel": "取消",
   "confirm": "确认",
+  "reset": "重置",
   "noData": "暂无数据",
   "refresh": "刷新",
   "loadingMenu": "加载菜单中",
   "query": "查询",
-  "search": "搜索"
+  "search": "搜索",
+  "enabled": "已启用",
+  "disabled": "已禁用",
+  "edit": "修改",
+  "delete": "删除",
+  "create": "新增",
+  "yes": "是",
+  "no": "否",
+  "showSearchPanel": "显示搜索面板",
+  "hideSearchPanel": "隐藏搜索面板"
 }
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json b/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
index fde3368a1..cd9e15bed 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
@@ -45,6 +45,9 @@
     "fixed": "固定"
   },
   "sidebar": {
+    "buttons": "显示按钮",
+    "buttonFixed": "固定按钮",
+    "buttonCollapsed": "折叠按钮",
     "title": "侧边栏",
     "width": "宽度",
     "visible": "显示侧边栏",
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/ui.json b/apps/vben5/packages/locales/src/langs/zh-CN/ui.json
index 2b6fe98d1..c0679581a 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/ui.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/ui.json
@@ -1,7 +1,26 @@
 {
   "formRules": {
     "required": "请输入{0}",
-    "selectRequired": "请选择{0}"
+    "selectRequired": "请选择{0}",
+    "minLength": "{0}至少{1}个字符",
+    "maxLength": "{0}最多{1}个字符",
+    "length": "{0}长度必须为{1}个字符",
+    "alreadyExists": "{0} `{1}` 已存在",
+    "startWith": "{0}必须以 {1} 开头",
+    "invalidURL": "请输入有效的链接"
+  },
+  "actionTitle": {
+    "edit": "修改{0}",
+    "create": "新增{0}",
+    "delete": "删除{0}",
+    "view": "查看{0}"
+  },
+  "actionMessage": {
+    "deleteConfirm": "确定删除 {0} 吗？",
+    "deleting": "正在删除 {0} ...",
+    "deleteSuccess": "{0} 删除成功",
+    "operationSuccess": "操作成功",
+    "operationFailed": "操作失败"
   },
   "placeholder": {
     "input": "请输入",
@@ -25,6 +44,10 @@
     "placeholder": "选择一个图标",
     "search": "搜索图标..."
   },
+  "jsonViewer": {
+    "copy": "复制",
+    "copied": "已复制"
+  },
   "fallback": {
     "pageNotFound": "哎呀！未找到页面",
     "pageNotFoundDesc": "抱歉，我们无法找到您要找的页面。",
diff --git a/apps/vben5/packages/preferences/package.json b/apps/vben5/packages/preferences/package.json
index 950ba8478..de276c726 100644
--- a/apps/vben5/packages/preferences/package.json
+++ b/apps/vben5/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/stores/package.json b/apps/vben5/packages/stores/package.json
index fe79f8e5a..c9860b59c 100644
--- a/apps/vben5/packages/stores/package.json
+++ b/apps/vben5/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -25,6 +25,7 @@
     "@vben-core/typings": "workspace:*",
     "pinia": "catalog:",
     "pinia-plugin-persistedstate": "catalog:",
+    "secure-ls": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   }
diff --git a/apps/vben5/packages/stores/src/modules/access.ts b/apps/vben5/packages/stores/src/modules/access.ts
index 53ff7f2c1..b88242e0a 100644
--- a/apps/vben5/packages/stores/src/modules/access.ts
+++ b/apps/vben5/packages/stores/src/modules/access.ts
@@ -27,6 +27,14 @@ interface AccessState {
    * 是否已经检查过权限
    */
   isAccessChecked: boolean;
+  /**
+   * 是否锁屏状态
+   */
+  isLockScreen: boolean;
+  /**
+   * 锁屏密码
+   */
+  lockScreenPassword?: string;
   /**
    * 登录是否过期
    */
@@ -61,6 +69,10 @@ export const useAccessStore = defineStore('core-access', {
       }
       return findMenu(this.accessMenus, path);
     },
+    lockScreen(password: string) {
+      this.isLockScreen = true;
+      this.lockScreenPassword = password;
+    },
     setAccessCodes(codes: string[]) {
       this.accessCodes = codes;
     },
@@ -82,10 +94,20 @@ export const useAccessStore = defineStore('core-access', {
     setRefreshToken(token: AccessToken) {
       this.refreshToken = token;
     },
+    unlockScreen() {
+      this.isLockScreen = false;
+      this.lockScreenPassword = undefined;
+    },
   },
   persist: {
     // 持久化
-    pick: ['accessToken', 'refreshToken', 'accessCodes'],
+    pick: [
+      'accessToken',
+      'refreshToken',
+      'accessCodes',
+      'isLockScreen',
+      'lockScreenPassword',
+    ],
   },
   state: (): AccessState => ({
     accessCodes: [],
@@ -93,6 +115,8 @@ export const useAccessStore = defineStore('core-access', {
     accessRoutes: [],
     accessToken: null,
     isAccessChecked: false,
+    isLockScreen: false,
+    lockScreenPassword: undefined,
     loginExpired: false,
     refreshToken: null,
   }),
diff --git a/apps/vben5/packages/stores/src/modules/index.ts b/apps/vben5/packages/stores/src/modules/index.ts
index 7941cbea9..ec764ae87 100644
--- a/apps/vben5/packages/stores/src/modules/index.ts
+++ b/apps/vben5/packages/stores/src/modules/index.ts
@@ -1,4 +1,3 @@
 export * from './access';
-export * from './lock';
 export * from './tabbar';
 export * from './user';
diff --git a/apps/vben5/packages/stores/src/modules/tabbar.test.ts b/apps/vben5/packages/stores/src/modules/tabbar.test.ts
index d74615ca0..7c0fe7a21 100644
--- a/apps/vben5/packages/stores/src/modules/tabbar.test.ts
+++ b/apps/vben5/packages/stores/src/modules/tabbar.test.ts
@@ -22,12 +22,13 @@ describe('useAccessStore', () => {
     const tab: any = {
       fullPath: '/home',
       meta: {},
+      key: '/home',
       name: 'Home',
       path: '/home',
     };
-    store.addTab(tab);
+    const addNewTab = store.addTab(tab);
     expect(store.tabs.length).toBe(1);
-    expect(store.tabs[0]).toEqual(tab);
+    expect(store.tabs[0]).toEqual(addNewTab);
   });
 
   it('adds a new tab if it does not exist', () => {
@@ -38,20 +39,22 @@ describe('useAccessStore', () => {
       name: 'New',
       path: '/new',
     };
-    store.addTab(newTab);
-    expect(store.tabs).toContainEqual(newTab);
+    const addNewTab = store.addTab(newTab);
+    expect(store.tabs).toContainEqual(addNewTab);
   });
 
   it('updates an existing tab instead of adding a new one', () => {
     const store = useTabbarStore();
     const initialTab: any = {
       fullPath: '/existing',
-      meta: {},
+      meta: {
+        fullPathKey: false,
+      },
       name: 'Existing',
       path: '/existing',
       query: {},
     };
-    store.tabs.push(initialTab);
+    store.addTab(initialTab);
     const updatedTab = { ...initialTab, query: { id: '1' } };
     store.addTab(updatedTab);
     expect(store.tabs.length).toBe(1);
@@ -60,9 +63,12 @@ describe('useAccessStore', () => {
 
   it('closes all tabs', async () => {
     const store = useTabbarStore();
-    store.tabs = [
-      { fullPath: '/home', meta: {}, name: 'Home', path: '/home' },
-    ] as any;
+    store.addTab({
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
     router.replace = vi.fn();
 
     await store.closeAllTabs(router);
@@ -157,7 +163,7 @@ describe('useAccessStore', () => {
       path: '/contact',
     } as any);
 
-    await store._bulkCloseByPaths(['/home', '/contact']);
+    await store._bulkCloseByKeys(['/home', '/contact']);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('About');
@@ -183,9 +189,8 @@ describe('useAccessStore', () => {
       name: 'Contact',
       path: '/contact',
     };
-    store.addTab(targetTab);
-
-    await store.closeLeftTabs(targetTab);
+    const addTargetTab = store.addTab(targetTab);
+    await store.closeLeftTabs(addTargetTab);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('Contact');
@@ -205,7 +210,7 @@ describe('useAccessStore', () => {
       name: 'About',
       path: '/about',
     };
-    store.addTab(targetTab);
+    const addTargetTab = store.addTab(targetTab);
     store.addTab({
       fullPath: '/contact',
       meta: {},
@@ -213,7 +218,7 @@ describe('useAccessStore', () => {
       path: '/contact',
     } as any);
 
-    await store.closeOtherTabs(targetTab);
+    await store.closeOtherTabs(addTargetTab);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('About');
@@ -227,7 +232,7 @@ describe('useAccessStore', () => {
       name: 'Home',
       path: '/home',
     };
-    store.addTab(targetTab);
+    const addTargetTab = store.addTab(targetTab);
     store.addTab({
       fullPath: '/about',
       meta: {},
@@ -241,7 +246,7 @@ describe('useAccessStore', () => {
       path: '/contact',
     } as any);
 
-    await store.closeRightTabs(targetTab);
+    await store.closeRightTabs(addTargetTab);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('Home');
diff --git a/apps/vben5/packages/stores/src/modules/tabbar.ts b/apps/vben5/packages/stores/src/modules/tabbar.ts
index 055543776..5b892b666 100644
--- a/apps/vben5/packages/stores/src/modules/tabbar.ts
+++ b/apps/vben5/packages/stores/src/modules/tabbar.ts
@@ -1,4 +1,9 @@
-import type { Router, RouteRecordNormalized } from 'vue-router';
+import type { ComputedRef } from 'vue';
+import type {
+  RouteLocationNormalized,
+  Router,
+  RouteRecordNormalized,
+} from 'vue-router';
 
 import type { TabDefinition } from '@vben-core/typings';
 
@@ -26,6 +31,10 @@ interface TabbarState {
    * @zh_CN 需要排除缓存的标签页
    */
   excludeCachedTabs: Set<string>;
+  /**
+   * @zh_CN 标签右键菜单列表
+   */
+  menuList: string[];
   /**
    * @zh_CN 是否刷新
    */
@@ -48,23 +57,23 @@ export const useTabbarStore = defineStore('core-tabbar', {
     /**
      * Close tabs in bulk
      */
-    async _bulkCloseByPaths(paths: string[]) {
-      this.tabs = this.tabs.filter((item) => {
-        return !paths.includes(getTabPath(item));
-      });
+    async _bulkCloseByKeys(keys: string[]) {
+      const keySet = new Set(keys);
+      this.tabs = this.tabs.filter(
+        (item) => !keySet.has(getTabKeyFromTab(item)),
+      );
 
-      this.updateCacheTabs();
+      await this.updateCacheTabs();
     },
     /**
      * @zh_CN 关闭标签页
      * @param tab
      */
     _close(tab: TabDefinition) {
-      const { fullPath } = tab;
       if (isAffixTab(tab)) {
         return;
       }
-      const index = this.tabs.findIndex((item) => item.fullPath === fullPath);
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
       index !== -1 && this.tabs.splice(index, 1);
     },
     /**
@@ -97,14 +106,17 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @zh_CN 添加标签页
      * @param routeTab
      */
-    addTab(routeTab: TabDefinition) {
-      const tab = cloneTab(routeTab);
+    addTab(routeTab: TabDefinition): TabDefinition {
+      let tab = cloneTab(routeTab);
+      if (!tab.key) {
+        tab.key = getTabKey(routeTab);
+      }
       if (!isTabShown(tab)) {
-        return;
+        return tab;
       }
 
-      const tabIndex = this.tabs.findIndex((tab) => {
-        return getTabPath(tab) === getTabPath(routeTab);
+      const tabIndex = this.tabs.findIndex((item) => {
+        return equalTab(item, tab);
       });
 
       if (tabIndex === -1) {
@@ -150,10 +162,11 @@ export const useTabbarStore = defineStore('core-tabbar', {
             mergedTab.meta.newTabTitle = curMeta.newTabTitle;
           }
         }
-
+        tab = mergedTab;
         this.tabs.splice(tabIndex, 1, mergedTab);
       }
       this.updateCacheTabs();
+      return tab;
     },
     /**
      * @zh_CN 关闭所有标签页
@@ -169,65 +182,63 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @param tab
      */
     async closeLeftTabs(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
 
       if (index < 1) {
         return;
       }
 
       const leftTabs = this.tabs.slice(0, index);
-      const paths: string[] = [];
+      const keys: string[] = [];
 
       for (const item of leftTabs) {
         if (!isAffixTab(item)) {
-          paths.push(getTabPath(item));
+          keys.push(item.key as string);
         }
       }
-      await this._bulkCloseByPaths(paths);
+      await this._bulkCloseByKeys(keys);
     },
     /**
      * @zh_CN 关闭其他标签页
      * @param tab
      */
     async closeOtherTabs(tab: TabDefinition) {
-      const closePaths = this.tabs.map((item) => getTabPath(item));
+      const closeKeys = this.tabs.map((item) => getTabKeyFromTab(item));
 
-      const paths: string[] = [];
+      const keys: string[] = [];
 
-      for (const path of closePaths) {
-        if (path !== tab.fullPath) {
-          const closeTab = this.tabs.find((item) => getTabPath(item) === path);
+      for (const key of closeKeys) {
+        if (key !== getTabKeyFromTab(tab)) {
+          const closeTab = this.tabs.find(
+            (item) => getTabKeyFromTab(item) === key,
+          );
           if (!closeTab) {
             continue;
           }
           if (!isAffixTab(closeTab)) {
-            paths.push(getTabPath(closeTab));
+            keys.push(closeTab.key as string);
           }
         }
       }
-      await this._bulkCloseByPaths(paths);
+      await this._bulkCloseByKeys(keys);
     },
     /**
      * @zh_CN 关闭右侧标签页
      * @param tab
      */
     async closeRightTabs(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
 
       if (index !== -1 && index < this.tabs.length - 1) {
         const rightTabs = this.tabs.slice(index + 1);
 
-        const paths: string[] = [];
+        const keys: string[] = [];
         for (const item of rightTabs) {
           if (!isAffixTab(item)) {
-            paths.push(getTabPath(item));
+            keys.push(item.key as string);
           }
         }
-        await this._bulkCloseByPaths(paths);
+        await this._bulkCloseByKeys(keys);
       }
     },
 
@@ -238,15 +249,14 @@ export const useTabbarStore = defineStore('core-tabbar', {
      */
     async closeTab(tab: TabDefinition, router: Router) {
       const { currentRoute } = router;
-
       // 关闭不是激活选项卡
-      if (getTabPath(currentRoute.value) !== getTabPath(tab)) {
+      if (getTabKey(currentRoute.value) !== getTabKeyFromTab(tab)) {
         this._close(tab);
         this.updateCacheTabs();
         return;
       }
       const index = this.getTabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(currentRoute.value),
+        (item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
       );
 
       const before = this.getTabs[index - 1];
@@ -273,7 +283,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
     async closeTabByKey(key: string, router: Router) {
       const originKey = decodeURIComponent(key);
       const index = this.tabs.findIndex(
-        (item) => getTabPath(item) === originKey,
+        (item) => getTabKeyFromTab(item) === originKey,
       );
       if (index === -1) {
         return;
@@ -286,12 +296,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
     },
 
     /**
-     * 根据路径获取标签页
-     * @param path
+     * 根据tab的key获取tab
+     * @param key
      */
-    getTabByPath(path: string) {
+    getTabByKey(key: string) {
       return this.getTabs.find(
-        (item) => getTabPath(item) === path,
+        (item) => getTabKeyFromTab(item) === key,
       ) as TabDefinition;
     },
     /**
@@ -307,22 +317,19 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @param tab
      */
     async pinTab(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
-      if (index !== -1) {
-        const oldTab = this.tabs[index];
-        tab.meta.affixTab = true;
-        tab.meta.title = oldTab?.meta?.title as string;
-        // this.addTab(tab);
-        this.tabs.splice(index, 1, tab);
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+      if (index === -1) {
+        return;
       }
+      const oldTab = this.tabs[index];
+      tab.meta.affixTab = true;
+      tab.meta.title = oldTab?.meta?.title as string;
+      // this.addTab(tab);
+      this.tabs.splice(index, 1, tab);
       // 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
       const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
       // 获得固定tabs的index
-      const newIndex = affixTabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
+      const newIndex = affixTabs.findIndex((item) => equalTab(item, tab));
       // 交换位置重新排序
       await this.sortTabs(index, newIndex);
     },
@@ -330,7 +337,13 @@ export const useTabbarStore = defineStore('core-tabbar', {
     /**
      * 刷新标签页
      */
-    async refresh(router: Router) {
+    async refresh(router: Router | string) {
+      // 如果是Router路由，那么就根据当前路由刷新
+      // 如果是string字符串，为路由名称，则定向刷新指定标签页，不能是当前路由名称，否则不会刷新
+      if (typeof router === 'string') {
+        return await this.refreshByName(router);
+      }
+
       const { currentRoute } = router;
       const { name } = currentRoute.value;
 
@@ -345,6 +358,15 @@ export const useTabbarStore = defineStore('core-tabbar', {
       stopProgress();
     },
 
+    /**
+     * 根据路由名称刷新指定标签页
+     */
+    async refreshByName(name: string) {
+      this.excludeCachedTabs.add(name);
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      this.excludeCachedTabs.delete(name);
+    },
+
     /**
      * @zh_CN 重置标签页标题
      */
@@ -352,9 +374,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
       if (tab?.meta?.newTabTitle) {
         return;
       }
-      const findTab = this.tabs.find(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
+      const findTab = this.tabs.find((item) => equalTab(item, tab));
       if (findTab) {
         findTab.meta.newTabTitle = undefined;
         await this.updateCacheTabs();
@@ -372,15 +392,34 @@ export const useTabbarStore = defineStore('core-tabbar', {
       }
     },
 
+    /**
+     * @zh_CN 更新菜单列表
+     * @param list
+     */
+    setMenuList(list: string[]) {
+      this.menuList = list;
+    },
+
     /**
      * @zh_CN 设置标签页标题
-     * @param tab
-     * @param title
+     *
+     * @zh_CN 支持设置静态标题字符串或计算属性作为动态标题
+     * @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新
+     * @zh_CN 适用于需要根据状态或多语言动态更新标题的场景
+     *
+     * @param {TabDefinition} tab - 标签页对象
+     * @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性
+     *
+     * @example
+     * // 设置静态标题
+     * setTabTitle(tab, '新标签页');
+     *
+     * @example
+     * // 设置动态标题
+     * setTabTitle(tab, computed(() => t('common.dashboard')));
      */
-    async setTabTitle(tab: TabDefinition, title: string) {
-      const findTab = this.tabs.find(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
+    async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) {
+      const findTab = this.tabs.find((item) => equalTab(item, tab));
 
       if (findTab) {
         findTab.meta.newTabTitle = title;
@@ -388,7 +427,6 @@ export const useTabbarStore = defineStore('core-tabbar', {
         await this.updateCacheTabs();
       }
     },
-
     setUpdateTime() {
       this.updateTime = Date.now();
     },
@@ -406,6 +444,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
       this.tabs.splice(newIndex, 0, currentTab);
       this.dragEndIndex = this.dragEndIndex + 1;
     },
+
     /**
      * @zh_CN 切换固定标签页
      * @param tab
@@ -421,17 +460,15 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @param tab
      */
     async unpinTab(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
-
-      if (index !== -1) {
-        const oldTab = this.tabs[index];
-        tab.meta.affixTab = false;
-        tab.meta.title = oldTab?.meta?.title as string;
-        // this.addTab(tab);
-        this.tabs.splice(index, 1, tab);
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+      if (index === -1) {
+        return;
       }
+      const oldTab = this.tabs[index];
+      tab.meta.affixTab = false;
+      tab.meta.title = oldTab?.meta?.title as string;
+      // this.addTab(tab);
+      this.tabs.splice(index, 1, tab);
       // 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
       const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
       // 获得固定tabs的index,使用固定tabs的下一个位置也就是活动tabs的第一个位置
@@ -439,7 +476,6 @@ export const useTabbarStore = defineStore('core-tabbar', {
       // 交换位置重新排序
       await this.sortTabs(index, newIndex);
     },
-
     /**
      * 根据当前打开的选项卡更新缓存
      */
@@ -480,6 +516,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
     getExcludeCachedTabs(): string[] {
       return [...this.excludeCachedTabs];
     },
+    getMenuList(): string[] {
+      return this.menuList;
+    },
     getTabs(): TabDefinition[] {
       const normalTabs = this.tabs.filter((tab) => !isAffixTab(tab));
       return [...this.affixTabs, ...normalTabs].filter(Boolean);
@@ -496,6 +535,17 @@ export const useTabbarStore = defineStore('core-tabbar', {
     cachedTabs: new Set(),
     dragEndIndex: 0,
     excludeCachedTabs: new Set(),
+    menuList: [
+      'close',
+      'affix',
+      'maximize',
+      'reload',
+      'open-in-new-window',
+      'close-left',
+      'close-right',
+      'close-other',
+      'close-all',
+    ],
     renderRouteView: true,
     tabs: [],
     updateTime: Date.now(),
@@ -551,11 +601,49 @@ function isTabShown(tab: TabDefinition) {
 }
 
 /**
- * @zh_CN 获取标签页路径
+ * 从route获取tab页的key
+ * @param tab
+ */
+function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
+  const {
+    fullPath,
+    path,
+    meta: { fullPathKey } = {},
+    query = {},
+  } = tab as RouteLocationNormalized;
+  // pageKey可能是数组（查询参数重复时可能出现）
+  const pageKey = Array.isArray(query.pageKey)
+    ? query.pageKey[0]
+    : query.pageKey;
+  let rawKey;
+  if (pageKey) {
+    rawKey = pageKey;
+  } else {
+    rawKey = fullPathKey === false ? path : (fullPath ?? path);
+  }
+  try {
+    return decodeURIComponent(rawKey);
+  } catch {
+    return rawKey;
+  }
+}
+
+/**
+ * 从tab获取tab页的key
+ * 如果tab没有key,那么就从route获取key
  * @param tab
  */
-function getTabPath(tab: RouteRecordNormalized | TabDefinition) {
-  return decodeURIComponent((tab as TabDefinition).fullPath || tab.path);
+function getTabKeyFromTab(tab: TabDefinition): string {
+  return tab.key ?? getTabKey(tab);
+}
+
+/**
+ * 比较两个tab是否相等
+ * @param a
+ * @param b
+ */
+function equalTab(a: TabDefinition, b: TabDefinition) {
+  return getTabKeyFromTab(a) === getTabKeyFromTab(b);
 }
 
 function routeToTab(route: RouteRecordNormalized) {
@@ -563,5 +651,8 @@ function routeToTab(route: RouteRecordNormalized) {
     meta: route.meta,
     name: route.name,
     path: route.path,
+    key: getTabKey(route),
   } as TabDefinition;
 }
+
+export { getTabKey };
diff --git a/apps/vben5/packages/stores/src/setup.ts b/apps/vben5/packages/stores/src/setup.ts
index 890c4dc88..b18c27e34 100644
--- a/apps/vben5/packages/stores/src/setup.ts
+++ b/apps/vben5/packages/stores/src/setup.ts
@@ -3,6 +3,7 @@ import type { Pinia } from 'pinia';
 import type { App } from 'vue';
 
 import { createPinia } from 'pinia';
+import SecureLS from 'secure-ls';
 
 let pinia: Pinia;
 
@@ -20,11 +21,27 @@ export async function initStores(app: App, options: InitStoreOptions) {
   const { createPersistedState } = await import('pinia-plugin-persistedstate');
   pinia = createPinia();
   const { namespace } = options;
+  const ls = new SecureLS({
+    encodingType: 'aes',
+    encryptionSecret: import.meta.env.VITE_APP_STORE_SECURE_KEY,
+    isCompression: true,
+    // @ts-ignore secure-ls does not have a type definition for this
+    metaKey: `${namespace}-secure-meta`,
+  });
   pinia.use(
     createPersistedState({
       // key $appName-$store.id
       key: (storeKey) => `${namespace}-${storeKey}`,
-      storage: localStorage,
+      storage: import.meta.env.DEV
+        ? localStorage
+        : {
+            getItem(key) {
+              return ls.get(key);
+            },
+            setItem(key, value) {
+              ls.set(key, value);
+            },
+          },
     }),
   );
   app.use(pinia);
diff --git a/apps/vben5/packages/styles/package.json b/apps/vben5/packages/styles/package.json
index b8d96dab8..127bd4d58 100644
--- a/apps/vben5/packages/styles/package.json
+++ b/apps/vben5/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/types/package.json b/apps/vben5/packages/types/package.json
index 3b2323fc5..2fa047d84 100644
--- a/apps/vben5/packages/types/package.json
+++ b/apps/vben5/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/utils/package.json b/apps/vben5/packages/utils/package.json
index 6550554f4..38a6ca199 100644
--- a/apps/vben5/packages/utils/package.json
+++ b/apps/vben5/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/utils/src/helpers/__tests__/generate-menus.test.ts b/apps/vben5/packages/utils/src/helpers/__tests__/generate-menus.test.ts
index 9d98b5a19..c02cc9db1 100644
--- a/apps/vben5/packages/utils/src/helpers/__tests__/generate-menus.test.ts
+++ b/apps/vben5/packages/utils/src/helpers/__tests__/generate-menus.test.ts
@@ -69,7 +69,7 @@ describe('generateMenus', () => {
       },
     ];
 
-    const menus = await generateMenus(mockRoutes, mockRouter as any);
+    const menus = generateMenus(mockRoutes, mockRouter as any);
     expect(menus).toEqual(expectedMenus);
   });
 
@@ -82,7 +82,7 @@ describe('generateMenus', () => {
       },
     ] as RouteRecordRaw[];
 
-    const menus = await generateMenus(mockRoutesWithMeta, mockRouter as any);
+    const menus = generateMenus(mockRoutesWithMeta, mockRouter as any);
     expect(menus).toEqual([
       {
         badge: undefined,
@@ -109,7 +109,7 @@ describe('generateMenus', () => {
       },
     ] as RouteRecordRaw[];
 
-    const menus = await generateMenus(mockRoutesWithParams, mockRouter as any);
+    const menus = generateMenus(mockRoutesWithParams, mockRouter as any);
     expect(menus).toEqual([
       {
         badge: undefined,
@@ -141,10 +141,7 @@ describe('generateMenus', () => {
       },
     ] as RouteRecordRaw[];
 
-    const menus = await generateMenus(
-      mockRoutesWithRedirect,
-      mockRouter as any,
-    );
+    const menus = generateMenus(mockRoutesWithRedirect, mockRouter as any);
     expect(menus).toEqual([
       // Assuming your generateMenus function excludes redirect routes from the menu
       {
@@ -195,7 +192,7 @@ describe('generateMenus', () => {
   });
 
   it('should generate menu list with correct order', async () => {
-    const menus = await generateMenus(routes, router);
+    const menus = generateMenus(routes, router);
     const expectedMenus = [
       {
         badge: undefined,
@@ -230,7 +227,7 @@ describe('generateMenus', () => {
 
   it('should handle empty routes', async () => {
     const emptyRoutes: any[] = [];
-    const menus = await generateMenus(emptyRoutes, router);
+    const menus = generateMenus(emptyRoutes, router);
     expect(menus).toEqual([]);
   });
 });
diff --git a/apps/vben5/packages/utils/src/helpers/generate-menus.ts b/apps/vben5/packages/utils/src/helpers/generate-menus.ts
index 6f0d9474b..ac37459bb 100644
--- a/apps/vben5/packages/utils/src/helpers/generate-menus.ts
+++ b/apps/vben5/packages/utils/src/helpers/generate-menus.ts
@@ -1,30 +1,38 @@
 import type { Router, RouteRecordRaw } from 'vue-router';
 
-import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
+import type {
+  ExRouteRecordRaw,
+  MenuRecordRaw,
+  RouteMeta,
+} from '@vben-core/typings';
 
 import { filterTree, mapTree } from '@vben-core/shared/utils';
 
 /**
  * 根据 routes 生成菜单列表
- * @param routes
+ * @param routes - 路由配置列表
+ * @param router - Vue Router 实例
+ * @returns 生成的菜单列表
  */
-async function generateMenus(
+function generateMenus(
   routes: RouteRecordRaw[],
   router: Router,
-): Promise<MenuRecordRaw[]> {
+): MenuRecordRaw[] {
   // 将路由列表转换为一个以 name 为键的对象映射
-  // 获取所有router最终的path及name
   const finalRoutesMap: { [key: string]: string } = Object.fromEntries(
     router.getRoutes().map(({ name, path }) => [name, path]),
   );
 
   let menus = mapTree<ExRouteRecordRaw, MenuRecordRaw>(routes, (route) => {
-    // 路由表的路径写法有多种，这里从router获取到最终的path并赋值
-    const path = finalRoutesMap[route.name as string] ?? route.path;
+    // 获取最终的路由路径
+    const path = finalRoutesMap[route.name as string] ?? route.path ?? '';
 
-    // 转换为菜单结构
-    // const path = matchRoute?.path ?? route.path;
-    const { meta, name: routeName, redirect, children } = route;
+    const {
+      meta = {} as RouteMeta,
+      name: routeName,
+      redirect,
+      children = [],
+    } = route;
     const {
       activeIcon,
       badge,
@@ -35,24 +43,27 @@ async function generateMenus(
       link,
       order,
       title = '',
-    } = meta || {};
+    } = meta;
 
+    // 确保菜单名称不为空
     const name = (title || routeName || '') as string;
 
-    // 隐藏子菜单
+    // 处理子菜单
     const resultChildren = hideChildrenInMenu
       ? []
-      : (children as MenuRecordRaw[]);
+      : ((children as MenuRecordRaw[]) ?? []);
 
-    // 将菜单的所有父级和父级菜单记录到菜单项内
-    if (resultChildren && resultChildren.length > 0) {
+    // 设置子菜单的父子关系
+    if (resultChildren.length > 0) {
       resultChildren.forEach((child) => {
-        child.parents = [...(route.parents || []), path];
+        child.parents = [...(route.parents ?? []), path];
         child.parent = path;
       });
     }
-    // 隐藏子菜单
+
+    // 确定最终路径
     const resultPath = hideChildrenInMenu ? redirect || path : link || path;
+
     return {
       activeIcon,
       badge,
@@ -63,19 +74,17 @@ async function generateMenus(
       order,
       parent: route.parent,
       parents: route.parents,
-      path: resultPath as string,
-      show: !route?.meta?.hideInMenu,
-      children: resultChildren || [],
+      path: resultPath,
+      show: !meta.hideInMenu,
+      children: resultChildren,
     };
   });
 
-  // 对菜单进行排序
-  menus = menus.sort((a, b) => (a.order || 999) - (b.order || 999));
+  // 对菜单进行排序，避免order=0时被替换成999的问题
+  menus = menus.sort((a, b) => (a?.order ?? 999) - (b?.order ?? 999));
 
-  const finalMenus = filterTree(menus, (menu) => {
-    return !!menu.show;
-  });
-  return finalMenus;
+  // 过滤掉隐藏的菜单项
+  return filterTree(menus, (menu) => !!menu.show);
 }
 
 export { generateMenus };
diff --git a/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts b/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts
index 5d24f47c4..c92b6d352 100644
--- a/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts
+++ b/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts
@@ -33,7 +33,7 @@ async function generateRoutesByBackend(
     return routes;
   } catch (error) {
     console.error(error);
-    return [];
+    throw error;
   }
 }
 
@@ -56,12 +56,15 @@ function convertRoutes(
       // 页面组件转换
     } else if (component) {
       const normalizePath = normalizeViewPath(component);
-      route.component =
-        pageMap[
-          normalizePath.endsWith('.vue')
-            ? normalizePath
-            : `${normalizePath}.vue`
-        ];
+      const pageKey = normalizePath.endsWith('.vue')
+        ? normalizePath
+        : `${normalizePath}.vue`;
+      if (pageMap[pageKey]) {
+        route.component = pageMap[pageKey];
+      } else {
+        console.error(`route component is invalid: ${pageKey}`, route);
+        route.component = pageMap['/_core/fallback/not-found.vue'];
+      }
     }
 
     return route;
diff --git a/apps/vben5/packages/utils/src/helpers/get-popup-container.ts b/apps/vben5/packages/utils/src/helpers/get-popup-container.ts
index ca5a72ddc..6aa84d6da 100644
--- a/apps/vben5/packages/utils/src/helpers/get-popup-container.ts
+++ b/apps/vben5/packages/utils/src/helpers/get-popup-container.ts
@@ -1,6 +1,10 @@
 /**
- * Returns the parent node of the given element or the document body if the element is not provided.it
+ * If the node is holding inside a form, return the form element,
+ * otherwise return the parent node of the given element or
+ * the document body if the element is not provided.
  */
 export function getPopupContainer(node?: HTMLElement): HTMLElement {
-  return (node?.parentNode as HTMLElement) ?? document.body;
+  return (
+    node?.closest('form') ?? (node?.parentNode as HTMLElement) ?? document.body
+  );
 }
diff --git a/apps/vben5/playground/.env b/apps/vben5/playground/.env
index 329573030..94ff4faf7 100644
--- a/apps/vben5/playground/.env
+++ b/apps/vben5/playground/.env
@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-play
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
diff --git a/apps/vben5/playground/package.json b/apps/vben5/playground/package.json
index 8897e0e3c..8bfd17d51 100644
--- a/apps/vben5/playground/package.json
+++ b/apps/vben5/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -48,8 +48,12 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "json-bigint": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/json-bigint": "catalog:"
   }
 }
diff --git a/apps/vben5/playground/src/adapter/component/index.ts b/apps/vben5/playground/src/adapter/component/index.ts
index 6d6ef0014..f32569a6c 100644
--- a/apps/vben5/playground/src/adapter/component/index.ts
+++ b/apps/vben5/playground/src/adapter/component/index.ts
@@ -3,48 +3,103 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component, SetupContext } from 'vue';
+import type { Component } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
-import { h } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  notification,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
+import { notification } from 'ant-design-vue';
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
 };
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
@@ -82,38 +137,20 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Select,
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: TreeSelect,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      optionsPropName: 'treeData',
+      visibleEvent: 'onVisibleChange',
+    }),
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -123,13 +160,11 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
diff --git a/apps/vben5/playground/src/adapter/form.ts b/apps/vben5/playground/src/adapter/form.ts
index dfe8fed0d..c5589aab4 100644
--- a/apps/vben5/playground/src/adapter/form.ts
+++ b/apps/vben5/playground/src/adapter/form.ts
@@ -8,38 +8,40 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
-  config: {
-    // ant design vue组件库默认都是 v-model:value
-    baseModelPropName: 'value',
-    // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      Switch: 'checked',
-      Upload: 'fileList',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    // 输入项目必填国际化适配
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/vben5/playground/src/adapter/vxe-table.ts b/apps/vben5/playground/src/adapter/vxe-table.ts
index 8f68b15d8..24dfd4cdc 100644
--- a/apps/vben5/playground/src/adapter/vxe-table.ts
+++ b/apps/vben5/playground/src/adapter/vxe-table.ts
@@ -1,8 +1,22 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+import type { Recordable } from '@vben/types';
+
+import type { ComponentType } from './component';
+
 import { h } from 'vue';
 
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import { IconifyIcon } from '@vben/icons';
+import { $te } from '@vben/locales';
+import {
+  setupVbenVxeTable,
+  useVbenVxeGrid as useGrid,
+} from '@vben/plugins/vxe-table';
+import { get, isFunction, isString } from '@vben/utils';
 
-import { Button, Image } from 'ant-design-vue';
+import { objectOmit } from '@vueuse/core';
+import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
+
+import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
@@ -26,7 +40,7 @@ setupVbenVxeTable({
           response: {
             result: 'items',
             total: 'total',
-            list: 'items',
+            list: '',
           },
           showActiveMsg: true,
           showResponseMsg: false,
@@ -34,7 +48,16 @@ setupVbenVxeTable({
         round: true,
         showOverflow: true,
         size: 'small',
-      },
+      } as VxeTableGridOptions,
+    });
+
+    /**
+     * 解决vxeTable在热更新时可能会出错的问题
+     */
+    vxeUI.renderer.forEach((_item, key) => {
+      if (key.startsWith('Cell')) {
+        vxeUI.renderer.delete(key);
+      }
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
@@ -57,12 +80,218 @@ setupVbenVxeTable({
       },
     });
 
+    // 单元格渲染： Tag
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault({ options, props }, { column, row }) {
+        const value = get(row, column.field);
+        const tagOptions = options ?? [
+          { color: 'success', label: $t('common.enabled'), value: 1 },
+          { color: 'error', label: $t('common.disabled'), value: 0 },
+        ];
+        const tagItem = tagOptions.find((item) => item.value === value);
+        return h(
+          Tag,
+          {
+            ...props,
+            ...objectOmit(tagItem ?? {}, ['label']),
+          },
+          { default: () => tagItem?.label ?? value },
+        );
+      },
+    });
+
+    vxeUI.renderer.add('CellSwitch', {
+      renderTableDefault({ attrs, props }, { column, row }) {
+        const loadingKey = `__loading_${column.field}`;
+        const finallyProps = {
+          checkedChildren: $t('common.enabled'),
+          checkedValue: 1,
+          unCheckedChildren: $t('common.disabled'),
+          unCheckedValue: 0,
+          ...props,
+          checked: row[column.field],
+          loading: row[loadingKey] ?? false,
+          'onUpdate:checked': onChange,
+        };
+        async function onChange(newVal: any) {
+          row[loadingKey] = true;
+          try {
+            const result = await attrs?.beforeChange?.(newVal, row);
+            if (result !== false) {
+              row[column.field] = newVal;
+            }
+          } finally {
+            row[loadingKey] = false;
+          }
+        }
+        return h(Switch, finallyProps);
+      },
+    });
+
+    /**
+     * 注册表格的操作按钮渲染器
+     */
+    vxeUI.renderer.add('CellOperation', {
+      renderTableDefault({ attrs, options, props }, { column, row }) {
+        const defaultProps = { size: 'small', type: 'link', ...props };
+        let align = 'end';
+        switch (column.align) {
+          case 'center': {
+            align = 'center';
+            break;
+          }
+          case 'left': {
+            align = 'start';
+            break;
+          }
+          default: {
+            align = 'end';
+            break;
+          }
+        }
+        const presets: Recordable<Recordable<any>> = {
+          delete: {
+            danger: true,
+            text: $t('common.delete'),
+          },
+          edit: {
+            text: $t('common.edit'),
+          },
+        };
+        const operations: Array<Recordable<any>> = (
+          options || ['edit', 'delete']
+        )
+          .map((opt) => {
+            if (isString(opt)) {
+              return presets[opt]
+                ? { code: opt, ...presets[opt], ...defaultProps }
+                : {
+                    code: opt,
+                    text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
+                    ...defaultProps,
+                  };
+            } else {
+              return { ...defaultProps, ...presets[opt.code], ...opt };
+            }
+          })
+          .map((opt) => {
+            const optBtn: Recordable<any> = {};
+            Object.keys(opt).forEach((key) => {
+              optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
+            });
+            return optBtn;
+          })
+          .filter((opt) => opt.show !== false);
+
+        function renderBtn(opt: Recordable<any>, listen = true) {
+          return h(
+            Button,
+            {
+              ...props,
+              ...opt,
+              icon: undefined,
+              onClick: listen
+                ? () =>
+                    attrs?.onClick?.({
+                      code: opt.code,
+                      row,
+                    })
+                : undefined,
+            },
+            {
+              default: () => {
+                const content = [];
+                if (opt.icon) {
+                  content.push(
+                    h(IconifyIcon, { class: 'size-5', icon: opt.icon }),
+                  );
+                }
+                content.push(opt.text);
+                return content;
+              },
+            },
+          );
+        }
+
+        function renderConfirm(opt: Recordable<any>) {
+          let viewportWrapper: HTMLElement | null = null;
+          return h(
+            Popconfirm,
+            {
+              /**
+               * 当popconfirm用在固定列中时，将固定列作为弹窗的容器时可能会因为固定列较窄而无法容纳弹窗
+               * 将表格主体区域作为弹窗容器时又会因为固定列的层级较高而遮挡弹窗
+               * 将body或者表格视口区域作为弹窗容器时又会导致弹窗无法跟随表格滚动。
+               * 鉴于以上各种情况，一种折中的解决方案是弹出层展示时，禁止操作表格的滚动条。
+               * 这样既解决了弹窗的遮挡问题，又不至于让弹窗随着表格的滚动而跑出视口区域。
+               */
+              getPopupContainer(el) {
+                viewportWrapper = el.closest('.vxe-table--viewport-wrapper');
+                return document.body;
+              },
+              placement: 'topLeft',
+              title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
+              ...props,
+              ...opt,
+              icon: undefined,
+              onOpenChange: (open: boolean) => {
+                // 当弹窗打开时，禁止表格的滚动
+                if (open) {
+                  viewportWrapper?.style.setProperty('pointer-events', 'none');
+                } else {
+                  viewportWrapper?.style.removeProperty('pointer-events');
+                }
+              },
+              onConfirm: () => {
+                attrs?.onClick?.({
+                  code: opt.code,
+                  row,
+                });
+              },
+            },
+            {
+              default: () => renderBtn({ ...opt }, false),
+              description: () =>
+                h(
+                  'div',
+                  { class: 'truncate' },
+                  $t('ui.actionMessage.deleteConfirm', [
+                    row[attrs?.nameField || 'name'],
+                  ]),
+                ),
+            },
+          );
+        }
+
+        const btns = operations.map((opt) =>
+          opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
+        );
+        return h(
+          'div',
+          {
+            class: 'flex table-operations',
+            style: { justifyContent: align },
+          },
+          btns,
+        );
+      },
+    });
+
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
   },
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export const useVbenVxeGrid = <T extends Record<string, any>>(
+  ...rest: Parameters<typeof useGrid<T, ComponentType>>
+) => useGrid<T, ComponentType>(...rest);
 
+export type OnActionClickParams<T = Recordable<any>> = {
+  code: string;
+  row: T;
+};
+export type OnActionClickFn<T = Recordable<any>> = (
+  params: OnActionClickParams<T>,
+) => void;
 export type * from '@vben/plugins/vxe-table';
diff --git a/apps/vben5/playground/src/api/core/auth.ts b/apps/vben5/playground/src/api/core/auth.ts
index 71d9f9943..b4627cbe7 100644
--- a/apps/vben5/playground/src/api/core/auth.ts
+++ b/apps/vben5/playground/src/api/core/auth.ts
@@ -22,23 +22,29 @@ export namespace AuthApi {
  * 登录
  */
 export async function loginApi(data: AuthApi.LoginParams) {
-  return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
+  return requestClient.post<AuthApi.LoginResult>('/auth/login', data, {
+    withCredentials: true,
+  });
 }
 
 /**
  * 刷新accessToken
  */
 export async function refreshTokenApi() {
-  return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
-    withCredentials: true,
-  });
+  return baseRequestClient.post<AuthApi.RefreshTokenResult>(
+    '/auth/refresh',
+    null,
+    {
+      withCredentials: true,
+    },
+  );
 }
 
 /**
  * 退出登录
  */
 export async function logoutApi() {
-  return baseRequestClient.post('/auth/logout', {
+  return baseRequestClient.post('/auth/logout', null, {
     withCredentials: true,
   });
 }
diff --git a/apps/vben5/playground/src/api/examples/json-bigint.ts b/apps/vben5/playground/src/api/examples/json-bigint.ts
new file mode 100644
index 000000000..19e41e2e9
--- /dev/null
+++ b/apps/vben5/playground/src/api/examples/json-bigint.ts
@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 发起请求
+ */
+async function getBigIntData() {
+  return requestClient.get('/demo/bigint');
+}
+
+export { getBigIntData };
diff --git a/apps/vben5/playground/src/api/examples/params.ts b/apps/vben5/playground/src/api/examples/params.ts
new file mode 100644
index 000000000..6568ec64b
--- /dev/null
+++ b/apps/vben5/playground/src/api/examples/params.ts
@@ -0,0 +1,19 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 发起数组请求
+ */
+async function getParamsData(
+  params: Recordable<any>,
+  type: 'brackets' | 'comma' | 'indices' | 'repeat',
+) {
+  return requestClient.get('/status', {
+    params,
+    paramsSerializer: type,
+    responseReturn: 'raw',
+  });
+}
+
+export { getParamsData };
diff --git a/apps/vben5/playground/src/api/examples/upload.ts b/apps/vben5/playground/src/api/examples/upload.ts
new file mode 100644
index 000000000..246d4f267
--- /dev/null
+++ b/apps/vben5/playground/src/api/examples/upload.ts
@@ -0,0 +1,25 @@
+import { requestClient } from '#/api/request';
+
+interface UploadFileParams {
+  file: File;
+  onError?: (error: Error) => void;
+  onProgress?: (progress: { percent: number }) => void;
+  onSuccess?: (data: any, file: File) => void;
+}
+export async function upload_file({
+  file,
+  onError,
+  onProgress,
+  onSuccess,
+}: UploadFileParams) {
+  try {
+    onProgress?.({ percent: 0 });
+
+    const data = await requestClient.upload('/upload', { file });
+
+    onProgress?.({ percent: 100 });
+    onSuccess?.(data, file);
+  } catch (error) {
+    onError?.(error instanceof Error ? error : new Error(String(error)));
+  }
+}
diff --git a/apps/vben5/playground/src/api/index.ts b/apps/vben5/playground/src/api/index.ts
index ab806c621..3c3fa0d27 100644
--- a/apps/vben5/playground/src/api/index.ts
+++ b/apps/vben5/playground/src/api/index.ts
@@ -1,2 +1,3 @@
 export * from './core';
 export * from './examples';
+export * from './system';
diff --git a/apps/vben5/playground/src/api/request.ts b/apps/vben5/playground/src/api/request.ts
index 288dddd09..e741552dd 100644
--- a/apps/vben5/playground/src/api/request.ts
+++ b/apps/vben5/playground/src/api/request.ts
@@ -1,7 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { RequestClientOptions } from '@vben/request';
+import type { AxiosResponseHeaders, RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
@@ -12,8 +12,10 @@ import {
   RequestClient,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
+import { cloneDeep } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
+import JSONBigInt from 'json-bigint';
 
 import { useAuthStore } from '#/store';
 
@@ -25,6 +27,14 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
     baseURL,
+    transformResponse: (data: any, header: AxiosResponseHeaders) => {
+      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
+      return header.getContentType()?.toString().includes('application/json')
+        ? cloneDeep(
+            JSONBigInt({ storeAsString: true, strict: true }).parse(data),
+          )
+        : data;
+    },
   });
 
   /**
@@ -111,3 +121,9 @@ export const requestClient = createRequestClient(apiURL, {
 });
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
+
+export interface PageFetchParams {
+  [key: string]: any;
+  pageNo?: number;
+  pageSize?: number;
+}
diff --git a/apps/vben5/playground/src/api/system/dept.ts b/apps/vben5/playground/src/api/system/dept.ts
new file mode 100644
index 000000000..ce2b0de8a
--- /dev/null
+++ b/apps/vben5/playground/src/api/system/dept.ts
@@ -0,0 +1,54 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemDeptApi {
+  export interface SystemDept {
+    [key: string]: any;
+    children?: SystemDept[];
+    id: string;
+    name: string;
+    remark?: string;
+    status: 0 | 1;
+  }
+}
+
+/**
+ * 获取部门列表数据
+ */
+async function getDeptList() {
+  return requestClient.get<Array<SystemDeptApi.SystemDept>>(
+    '/system/dept/list',
+  );
+}
+
+/**
+ * 创建部门
+ * @param data 部门数据
+ */
+async function createDept(
+  data: Omit<SystemDeptApi.SystemDept, 'children' | 'id'>,
+) {
+  return requestClient.post('/system/dept', data);
+}
+
+/**
+ * 更新部门
+ *
+ * @param id 部门 ID
+ * @param data 部门数据
+ */
+async function updateDept(
+  id: string,
+  data: Omit<SystemDeptApi.SystemDept, 'children' | 'id'>,
+) {
+  return requestClient.put(`/system/dept/${id}`, data);
+}
+
+/**
+ * 删除部门
+ * @param id 部门 ID
+ */
+async function deleteDept(id: string) {
+  return requestClient.delete(`/system/dept/${id}`);
+}
+
+export { createDept, deleteDept, getDeptList, updateDept };
diff --git a/apps/vben5/playground/src/api/system/index.ts b/apps/vben5/playground/src/api/system/index.ts
new file mode 100644
index 000000000..f2a248f10
--- /dev/null
+++ b/apps/vben5/playground/src/api/system/index.ts
@@ -0,0 +1,3 @@
+export * from './dept';
+export * from './menu';
+export * from './role';
diff --git a/apps/vben5/playground/src/api/system/menu.ts b/apps/vben5/playground/src/api/system/menu.ts
new file mode 100644
index 000000000..507a5aec0
--- /dev/null
+++ b/apps/vben5/playground/src/api/system/menu.ts
@@ -0,0 +1,158 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemMenuApi {
+  /** 徽标颜色集合 */
+  export const BadgeVariants = [
+    'default',
+    'destructive',
+    'primary',
+    'success',
+    'warning',
+  ] as const;
+  /** 徽标类型集合 */
+  export const BadgeTypes = ['dot', 'normal'] as const;
+  /** 菜单类型集合 */
+  export const MenuTypes = [
+    'catalog',
+    'menu',
+    'embedded',
+    'link',
+    'button',
+  ] as const;
+  /** 系统菜单 */
+  export interface SystemMenu {
+    [key: string]: any;
+    /** 后端权限标识 */
+    authCode: string;
+    /** 子级 */
+    children?: SystemMenu[];
+    /** 组件 */
+    component?: string;
+    /** 菜单ID */
+    id: string;
+    /** 菜单元数据 */
+    meta?: {
+      /** 激活时显示的图标 */
+      activeIcon?: string;
+      /** 作为路由时，需要激活的菜单的Path */
+      activePath?: string;
+      /** 固定在标签栏 */
+      affixTab?: boolean;
+      /** 在标签栏固定的顺序 */
+      affixTabOrder?: number;
+      /** 徽标内容(当徽标类型为normal时有效) */
+      badge?: string;
+      /** 徽标类型 */
+      badgeType?: (typeof BadgeTypes)[number];
+      /** 徽标颜色 */
+      badgeVariants?: (typeof BadgeVariants)[number];
+      /** 在菜单中隐藏下级 */
+      hideChildrenInMenu?: boolean;
+      /** 在面包屑中隐藏 */
+      hideInBreadcrumb?: boolean;
+      /** 在菜单中隐藏 */
+      hideInMenu?: boolean;
+      /** 在标签栏中隐藏 */
+      hideInTab?: boolean;
+      /** 菜单图标 */
+      icon?: string;
+      /** 内嵌Iframe的URL */
+      iframeSrc?: string;
+      /** 是否缓存页面 */
+      keepAlive?: boolean;
+      /** 外链页面的URL */
+      link?: string;
+      /** 同一个路由最大打开的标签数 */
+      maxNumOfOpenTab?: number;
+      /** 无需基础布局 */
+      noBasicLayout?: boolean;
+      /** 是否在新窗口打开 */
+      openInNewWindow?: boolean;
+      /** 菜单排序 */
+      order?: number;
+      /** 额外的路由参数 */
+      query?: Recordable<any>;
+      /** 菜单标题 */
+      title?: string;
+    };
+    /** 菜单名称 */
+    name: string;
+    /** 路由路径 */
+    path: string;
+    /** 父级ID */
+    pid: string;
+    /** 重定向 */
+    redirect?: string;
+    /** 菜单类型 */
+    type: (typeof MenuTypes)[number];
+  }
+}
+
+/**
+ * 获取菜单数据列表
+ */
+async function getMenuList() {
+  return requestClient.get<Array<SystemMenuApi.SystemMenu>>(
+    '/system/menu/list',
+  );
+}
+
+async function isMenuNameExists(
+  name: string,
+  id?: SystemMenuApi.SystemMenu['id'],
+) {
+  return requestClient.get<boolean>('/system/menu/name-exists', {
+    params: { id, name },
+  });
+}
+
+async function isMenuPathExists(
+  path: string,
+  id?: SystemMenuApi.SystemMenu['id'],
+) {
+  return requestClient.get<boolean>('/system/menu/path-exists', {
+    params: { id, path },
+  });
+}
+
+/**
+ * 创建菜单
+ * @param data 菜单数据
+ */
+async function createMenu(
+  data: Omit<SystemMenuApi.SystemMenu, 'children' | 'id'>,
+) {
+  return requestClient.post('/system/menu', data);
+}
+
+/**
+ * 更新菜单
+ *
+ * @param id 菜单 ID
+ * @param data 菜单数据
+ */
+async function updateMenu(
+  id: string,
+  data: Omit<SystemMenuApi.SystemMenu, 'children' | 'id'>,
+) {
+  return requestClient.put(`/system/menu/${id}`, data);
+}
+
+/**
+ * 删除菜单
+ * @param id 菜单 ID
+ */
+async function deleteMenu(id: string) {
+  return requestClient.delete(`/system/menu/${id}`);
+}
+
+export {
+  createMenu,
+  deleteMenu,
+  getMenuList,
+  isMenuNameExists,
+  isMenuPathExists,
+  updateMenu,
+};
diff --git a/apps/vben5/playground/src/api/system/role.ts b/apps/vben5/playground/src/api/system/role.ts
new file mode 100644
index 000000000..60b465aef
--- /dev/null
+++ b/apps/vben5/playground/src/api/system/role.ts
@@ -0,0 +1,55 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemRoleApi {
+  export interface SystemRole {
+    [key: string]: any;
+    id: string;
+    name: string;
+    permissions: string[];
+    remark?: string;
+    status: 0 | 1;
+  }
+}
+
+/**
+ * 获取角色列表数据
+ */
+async function getRoleList(params: Recordable<any>) {
+  return requestClient.get<Array<SystemRoleApi.SystemRole>>(
+    '/system/role/list',
+    { params },
+  );
+}
+
+/**
+ * 创建角色
+ * @param data 角色数据
+ */
+async function createRole(data: Omit<SystemRoleApi.SystemRole, 'id'>) {
+  return requestClient.post('/system/role', data);
+}
+
+/**
+ * 更新角色
+ *
+ * @param id 角色 ID
+ * @param data 角色数据
+ */
+async function updateRole(
+  id: string,
+  data: Omit<SystemRoleApi.SystemRole, 'id'>,
+) {
+  return requestClient.put(`/system/role/${id}`, data);
+}
+
+/**
+ * 删除角色
+ * @param id 角色 ID
+ */
+async function deleteRole(id: string) {
+  return requestClient.delete(`/system/role/${id}`);
+}
+
+export { createRole, deleteRole, getRoleList, updateRole };
diff --git a/apps/vben5/playground/src/bootstrap.ts b/apps/vben5/playground/src/bootstrap.ts
index b0c441758..f0a668b44 100644
--- a/apps/vben5/playground/src/bootstrap.ts
+++ b/apps/vben5/playground/src/bootstrap.ts
@@ -1,36 +1,45 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/antd';
 
-import { VueQueryPlugin } from '@tanstack/vue-query';
 import { useTitle } from '@vueuse/core';
 
 import { $t, setupI18n } from '#/locales';
 import { router } from '#/router';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
-  // // 设置弹窗的默认配置
+  // 初始化表单组件
+  await initSetupVbenForm();
+
+  // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
   // });
-  // // 设置抽屉的默认配置
+  // 设置抽屉的默认配置
   // setDefaultDrawerProps({
-  //   // zIndex: 1020,
+  //   zIndex: 1020,
   // });
 
   const app = createApp(App);
 
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
   // 国际化 i18n 配置
   await setupI18n(app);
 
@@ -41,14 +50,20 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
   // 配置@tanstack/vue-query
+  const { VueQueryPlugin } = await import('@tanstack/vue-query');
   app.use(VueQueryPlugin);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {
diff --git a/apps/vben5/playground/src/layouts/auth.vue b/apps/vben5/playground/src/layouts/auth.vue
index 18d415bc7..c33a632a0 100644
--- a/apps/vben5/playground/src/layouts/auth.vue
+++ b/apps/vben5/playground/src/layouts/auth.vue
@@ -8,6 +8,7 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const clickLogo = () => {};
 </script>
 
 <template>
@@ -16,6 +17,7 @@ const logo = computed(() => preferences.logo.source);
     :logo="logo"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
+    :click-logo="clickLogo"
   >
     <!-- 自定义工具栏 -->
     <!-- <template #toolbar></template> -->
diff --git a/apps/vben5/playground/src/layouts/basic.vue b/apps/vben5/playground/src/layouts/basic.vue
index 3fa423af1..227ce955d 100644
--- a/apps/vben5/playground/src/layouts/basic.vue
+++ b/apps/vben5/playground/src/layouts/basic.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -14,13 +14,26 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useTabbarStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
+const { setMenuList } = useTabbarStore();
+setMenuList([
+  'close',
+  'affix',
+  'maximize',
+  'reload',
+  'open-in-new-window',
+  'close-left',
+  'close-right',
+  'close-other',
+  'close-all',
+]);
+
 const notifications = ref<NotificationItem[]>([
   {
     avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
@@ -106,12 +119,14 @@ function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
 
+function handleClickLogo() {}
+
 watch(
   () => preferences.app.watermark,
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
       });
     } else {
       destroyWatermark();
@@ -121,10 +136,19 @@ watch(
     immediate: true,
   },
 );
+
+onBeforeMount(() => {
+  if (preferences.app.watermark) {
+    destroyWatermark();
+  }
+});
 </script>
 
 <template>
-  <BasicLayout @clear-preferences-and-logout="handleLogout">
+  <BasicLayout
+    @clear-preferences-and-logout="handleLogout"
+    @click-logo="handleClickLogo"
+  >
     <template #user-dropdown>
       <UserDropdown
         :avatar
diff --git a/apps/vben5/playground/src/locales/langs/en-US/examples.json b/apps/vben5/playground/src/locales/langs/en-US/examples.json
index 8131380f2..9335b28b7 100644
--- a/apps/vben5/playground/src/locales/langs/en-US/examples.json
+++ b/apps/vben5/playground/src/locales/langs/en-US/examples.json
@@ -12,12 +12,17 @@
   "form": {
     "title": "Form",
     "basic": "Basic Form",
+    "layout": "Custom Layout",
     "query": "Query Form",
     "rules": "Form Rules",
     "dynamic": "Dynamic Form",
     "custom": "Custom Component",
     "api": "Api",
-    "merge": "Merge Form"
+    "merge": "Merge Form",
+    "upload-error": "Partial file upload failed",
+    "upload-urls": "Urls after file upload",
+    "file": "file",
+    "upload-image": "Click to upload image"
   },
   "vxeTable": {
     "title": "Vxe Table",
@@ -62,5 +67,8 @@
   },
   "layout": {
     "col-page": "ColPage Layout"
+  },
+  "button-group": {
+    "title": "Button Group"
   }
 }
diff --git a/apps/vben5/playground/src/locales/langs/en-US/system.json b/apps/vben5/playground/src/locales/langs/en-US/system.json
new file mode 100644
index 000000000..003dfbbed
--- /dev/null
+++ b/apps/vben5/playground/src/locales/langs/en-US/system.json
@@ -0,0 +1,65 @@
+{
+  "title": "System Management",
+  "dept": {
+    "name": "Department",
+    "title": "Department Management",
+    "deptName": "Department Name",
+    "status": "Status",
+    "createTime": "Create Time",
+    "remark": "Remark",
+    "operation": "Operation",
+    "parentDept": "Parent Department"
+  },
+  "menu": {
+    "title": "Menu Management",
+    "parent": "Parent Menu",
+    "menuTitle": "Title",
+    "menuName": "Menu Name",
+    "name": "Menu",
+    "type": "Type",
+    "typeCatalog": "Catalog",
+    "typeMenu": "Menu",
+    "typeButton": "Button",
+    "typeLink": "Link",
+    "typeEmbedded": "Embedded",
+    "icon": "Icon",
+    "activeIcon": "Active Icon",
+    "activePath": "Active Path",
+    "path": "Route Path",
+    "component": "Component",
+    "status": "Status",
+    "authCode": "Auth Code",
+    "badge": "Badge",
+    "operation": "Operation",
+    "linkSrc": "Link Address",
+    "affixTab": "Affix In Tabs",
+    "keepAlive": "Keep Alive",
+    "hideInMenu": "Hide In Menu",
+    "hideInTab": "Hide In Tabbar",
+    "hideChildrenInMenu": "Hide Children In Menu",
+    "hideInBreadcrumb": "Hide In Breadcrumb",
+    "advancedSettings": "Other Settings",
+    "activePathMustExist": "The path could not find a valid menu",
+    "activePathHelp": "When jumping to the current route, \nthe menu path that needs to be activated must be specified when it does not display in the navigation menu.",
+    "badgeType": {
+      "title": "Badge Type",
+      "dot": "Dot",
+      "normal": "Text",
+      "none": "None"
+    },
+    "badgeVariants": "Badge Style"
+  },
+  "role": {
+    "title": "Role Management",
+    "list": "Role List",
+    "name": "Role",
+    "roleName": "Role Name",
+    "id": "Role ID",
+    "status": "Status",
+    "remark": "Remark",
+    "createTime": "Creation Time",
+    "operation": "Operation",
+    "permissions": "Permissions",
+    "setPermissions": "Permissions"
+  }
+}
diff --git a/apps/vben5/playground/src/locales/langs/zh-CN/demos.json b/apps/vben5/playground/src/locales/langs/zh-CN/demos.json
index 254e072b5..5cd87ce56 100644
--- a/apps/vben5/playground/src/locales/langs/zh-CN/demos.json
+++ b/apps/vben5/playground/src/locales/langs/zh-CN/demos.json
@@ -50,7 +50,8 @@
     "clipboard": "剪贴板",
     "menuWithQuery": "带参菜单",
     "openInNewWindow": "新窗口打开",
-    "fileDownload": "文件下载"
+    "fileDownload": "文件下载",
+    "requestParamsSerializer": "参数序列化"
   },
   "breadcrumb": {
     "navigation": "面包屑导航",
diff --git a/apps/vben5/playground/src/locales/langs/zh-CN/examples.json b/apps/vben5/playground/src/locales/langs/zh-CN/examples.json
index fea65a70a..ff11d7fd2 100644
--- a/apps/vben5/playground/src/locales/langs/zh-CN/examples.json
+++ b/apps/vben5/playground/src/locales/langs/zh-CN/examples.json
@@ -15,12 +15,17 @@
   "form": {
     "title": "表单",
     "basic": "基础表单",
+    "layout": "自定义布局",
     "query": "查询表单",
     "rules": "表单校验",
     "dynamic": "动态表单",
     "custom": "自定义组件",
     "api": "Api",
-    "merge": "合并表单"
+    "merge": "合并表单",
+    "upload-error": "部分文件上传失败",
+    "upload-urls": "文件上传后的网址",
+    "file": "文件",
+    "upload-image": "点击上传图片"
   },
   "vxeTable": {
     "title": "Vxe 表格",
@@ -62,5 +67,8 @@
   },
   "layout": {
     "col-page": "双列布局"
+  },
+  "button-group": {
+    "title": "按钮组"
   }
 }
diff --git a/apps/vben5/playground/src/locales/langs/zh-CN/system.json b/apps/vben5/playground/src/locales/langs/zh-CN/system.json
new file mode 100644
index 000000000..b0f5e7fad
--- /dev/null
+++ b/apps/vben5/playground/src/locales/langs/zh-CN/system.json
@@ -0,0 +1,67 @@
+{
+  "dept": {
+    "list": "部门列表",
+    "createTime": "创建时间",
+    "deptName": "部门名称",
+    "name": "部门",
+    "operation": "操作",
+    "parentDept": "上级部门",
+    "remark": "备注",
+    "status": "状态",
+    "title": "部门管理"
+  },
+  "menu": {
+    "list": "菜单列表",
+    "activeIcon": "激活图标",
+    "activePath": "激活路径",
+    "activePathHelp": "跳转到当前路由时，需要激活的菜单路径。\n当不在导航菜单中显示时，需要指定激活路径",
+    "activePathMustExist": "该路径未能找到有效的菜单",
+    "advancedSettings": "其它设置",
+    "affixTab": "固定在标签",
+    "authCode": "权限标识",
+    "badge": "徽章内容",
+    "badgeVariants": "徽标样式",
+    "badgeType": {
+      "dot": "点",
+      "none": "无",
+      "normal": "文字",
+      "title": "徽标类型"
+    },
+    "component": "页面组件",
+    "hideChildrenInMenu": "隐藏子菜单",
+    "hideInBreadcrumb": "在面包屑中隐藏",
+    "hideInMenu": "隐藏菜单",
+    "hideInTab": "在标签栏中隐藏",
+    "icon": "图标",
+    "keepAlive": "缓存标签页",
+    "linkSrc": "链接地址",
+    "menuName": "菜单名称",
+    "menuTitle": "标题",
+    "name": "菜单",
+    "operation": "操作",
+    "parent": "上级菜单",
+    "path": "路由地址",
+    "status": "状态",
+    "title": "菜单管理",
+    "type": "类型",
+    "typeButton": "按钮",
+    "typeCatalog": "目录",
+    "typeEmbedded": "内嵌",
+    "typeLink": "外链",
+    "typeMenu": "菜单"
+  },
+  "role": {
+    "title": "角色管理",
+    "list": "角色列表",
+    "name": "角色",
+    "roleName": "角色名称",
+    "id": "角色ID",
+    "status": "状态",
+    "remark": "备注",
+    "createTime": "创建时间",
+    "operation": "操作",
+    "permissions": "权限",
+    "setPermissions": "授权"
+  },
+  "title": "系统管理"
+}
diff --git a/apps/vben5/playground/src/router/guard.ts b/apps/vben5/playground/src/router/guard.ts
index 8d7e7ee04..514bd2eb6 100644
--- a/apps/vben5/playground/src/router/guard.ts
+++ b/apps/vben5/playground/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);
 
     // 页面加载进度条
@@ -54,7 +54,7 @@ function setupAccessGuard(router: Router) {
         return decodeURIComponent(
           (to.query?.redirect as string) ||
             userStore.userInfo?.homePath ||
-            DEFAULT_HOME_PATH,
+            preferences.app.defaultHomePath,
         );
       }
       return true;
@@ -73,7 +73,7 @@ function setupAccessGuard(router: Router) {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
           query:
-            to.fullPath === DEFAULT_HOME_PATH
+            to.fullPath === preferences.app.defaultHomePath
               ? {}
               : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
@@ -105,11 +105,16 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ??
-      (to.path === DEFAULT_HOME_PATH
-        ? userInfo.homePath || DEFAULT_HOME_PATH
-        : to.fullPath)) as string;
-
+    let redirectPath: string;
+    if (from.query.redirect) {
+      redirectPath = from.query.redirect as string;
+    } else if (to.path === preferences.app.defaultHomePath) {
+      redirectPath = preferences.app.defaultHomePath;
+    } else if (userInfo.homePath && to.path === userInfo.homePath) {
+      redirectPath = userInfo.homePath;
+    } else {
+      redirectPath = to.fullPath;
+    }
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
diff --git a/apps/vben5/playground/src/router/routes/core.ts b/apps/vben5/playground/src/router/routes/core.ts
index 7218da228..949b0b65a 100644
--- a/apps/vben5/playground/src/router/routes/core.ts
+++ b/apps/vben5/playground/src/router/routes/core.ts
@@ -1,11 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -34,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
     children: [],
   },
   {
@@ -50,7 +51,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },
diff --git a/apps/vben5/playground/src/router/routes/index.ts b/apps/vben5/playground/src/router/routes/index.ts
index e6fb14402..275eb8379 100644
--- a/apps/vben5/playground/src/router/routes/index.ts
+++ b/apps/vben5/playground/src/router/routes/index.ts
@@ -34,4 +34,14 @@ const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
 
 /** 有权限校验的路由列表，包含动态路由和静态路由 */
 const accessRoutes = [...dynamicRoutes, ...staticRoutes];
-export { accessRoutes, coreRouteNames, routes };
+
+const componentKeys: string[] = Object.keys(
+  import.meta.glob('../../views/**/*.vue'),
+)
+  .filter((item) => !item.includes('/modules/'))
+  .map((v) => {
+    const path = v.replace('../../views/', '/');
+    return path.endsWith('.vue') ? path.slice(0, -4) : path;
+  });
+
+export { accessRoutes, componentKeys, coreRouteNames, routes };
diff --git a/apps/vben5/playground/src/router/routes/modules/demos.ts b/apps/vben5/playground/src/router/routes/modules/demos.ts
index 422e5bf13..3df4f0ad6 100644
--- a/apps/vben5/playground/src/router/routes/modules/demos.ts
+++ b/apps/vben5/playground/src/router/routes/modules/demos.ts
@@ -147,8 +147,6 @@ const routes: RouteRecordRaw[] = [
           {
             name: 'HideChildrenInMenuParentDemo',
             path: '/demos/features/hide-menu-children',
-            component: () =>
-              import('#/views/demos/features/hide-menu-children/parent.vue'),
             meta: {
               hideChildrenInMenu: true,
               icon: 'ic:round-menu',
@@ -160,10 +158,10 @@ const routes: RouteRecordRaw[] = [
                 path: '',
                 component: () =>
                   import(
-                    '#/views/demos/features/hide-menu-children/children.vue'
+                    '#/views/demos/features/hide-menu-children/parent.vue'
                   ),
                 meta: {
-                  hideInMenu: true,
+                  // hideInMenu: true,
                   title: $t('demos.features.hideChildrenInMenu'),
                 },
               },
@@ -174,7 +172,10 @@ const routes: RouteRecordRaw[] = [
                   import(
                     '#/views/demos/features/hide-menu-children/children.vue'
                   ),
-                meta: { title: $t('demos.features.hideChildrenInMenu') },
+                meta: {
+                  activePath: '/demos/features/hide-menu-children',
+                  title: $t('demos.features.hideChildrenInMenu'),
+                },
               },
             ],
           },
@@ -242,6 +243,28 @@ const routes: RouteRecordRaw[] = [
               title: 'Tanstack Query',
             },
           },
+          {
+            name: 'RequestParamsSerializerDemo',
+            path: '/demos/features/request-params-serializer',
+            component: () =>
+              import(
+                '#/views/demos/features/request-params-serializer/index.vue'
+              ),
+            meta: {
+              icon: 'lucide:git-pull-request-arrow',
+              title: $t('demos.features.requestParamsSerializer'),
+            },
+          },
+          {
+            name: 'BigIntDemo',
+            path: '/demos/features/json-bigint',
+            component: () =>
+              import('#/views/demos/features/json-bigint/index.vue'),
+            meta: {
+              icon: 'lucide:grape',
+              title: 'JSON BigInt',
+            },
+          },
         ],
       },
       // 面包屑导航
@@ -531,7 +554,7 @@ const routes: RouteRecordRaw[] = [
             children: [
               {
                 name: 'Menu31Demo',
-                path: 'menu3-1',
+                path: '/demos/nested/menu3/menu3-1',
                 component: () => import('#/views/demos/nested/menu-3-1.vue'),
                 meta: {
                   icon: 'ic:round-menu',
@@ -541,7 +564,7 @@ const routes: RouteRecordRaw[] = [
               },
               {
                 name: 'Menu32Demo',
-                path: 'menu3-2',
+                path: '/demos/nested/menu3/menu3-2',
                 meta: {
                   icon: 'ic:round-menu',
                   title: $t('demos.nested.menu3_2'),
diff --git a/apps/vben5/playground/src/router/routes/modules/examples.ts b/apps/vben5/playground/src/router/routes/modules/examples.ts
index 7287f0ddc..c91303c77 100644
--- a/apps/vben5/playground/src/router/routes/modules/examples.ts
+++ b/apps/vben5/playground/src/router/routes/modules/examples.ts
@@ -53,6 +53,14 @@ const routes: RouteRecordRaw[] = [
               title: $t('examples.form.dynamic'),
             },
           },
+          {
+            name: 'FormLayoutExample',
+            path: '/examples/form/custom-layout',
+            component: () => import('#/views/examples/form/custom-layout.vue'),
+            meta: {
+              title: $t('examples.form.layout'),
+            },
+          },
           {
             name: 'FormCustomExample',
             path: '/examples/form/custom',
@@ -205,6 +213,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/examples/modal/index.vue'),
         meta: {
           icon: 'system-uicons:window-content',
+          keepAlive: true,
           title: $t('examples.modal.title'),
         },
       },
@@ -214,6 +223,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/examples/drawer/index.vue'),
         meta: {
           icon: 'iconoir:drawer',
+          keepAlive: true,
           title: $t('examples.drawer.title'),
         },
       },
@@ -255,6 +265,51 @@ const routes: RouteRecordRaw[] = [
           title: 'Tippy',
         },
       },
+      {
+        name: 'JsonViewer',
+        path: '/examples/json-viewer',
+        component: () => import('#/views/examples/json-viewer/index.vue'),
+        meta: {
+          icon: 'tabler:json',
+          title: 'JsonViewer',
+        },
+      },
+      {
+        name: 'Motion',
+        path: '/examples/motion',
+        component: () => import('#/views/examples/motion/index.vue'),
+        meta: {
+          icon: 'mdi:animation-play',
+          title: 'Motion',
+        },
+      },
+      {
+        name: 'CountTo',
+        path: '/examples/count-to',
+        component: () => import('#/views/examples/count-to/index.vue'),
+        meta: {
+          icon: 'mdi:animation-play',
+          title: 'CountTo',
+        },
+      },
+      {
+        name: 'Loading',
+        path: '/examples/loading',
+        component: () => import('#/views/examples/loading/index.vue'),
+        meta: {
+          icon: 'mdi:circle-double',
+          title: 'Loading',
+        },
+      },
+      {
+        name: 'ButtonGroup',
+        path: '/examples/button-group',
+        component: () => import('#/views/examples/button-group/index.vue'),
+        meta: {
+          icon: 'mdi:check-circle',
+          title: $t('examples.button-group.title'),
+        },
+      },
     ],
   },
 ];
diff --git a/apps/vben5/playground/src/router/routes/modules/system.ts b/apps/vben5/playground/src/router/routes/modules/system.ts
new file mode 100644
index 000000000..e1bf71255
--- /dev/null
+++ b/apps/vben5/playground/src/router/routes/modules/system.ts
@@ -0,0 +1,46 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'ion:settings-outline',
+      order: 9997,
+      title: $t('system.title'),
+    },
+    name: 'System',
+    path: '/system',
+    children: [
+      {
+        path: '/system/role',
+        name: 'SystemRole',
+        meta: {
+          icon: 'mdi:account-group',
+          title: $t('system.role.title'),
+        },
+        component: () => import('#/views/system/role/list.vue'),
+      },
+      {
+        path: '/system/menu',
+        name: 'SystemMenu',
+        meta: {
+          icon: 'mdi:menu',
+          title: $t('system.menu.title'),
+        },
+        component: () => import('#/views/system/menu/list.vue'),
+      },
+      {
+        path: '/system/dept',
+        name: 'SystemDept',
+        meta: {
+          icon: 'charm:organisation',
+          title: $t('system.dept.title'),
+        },
+        component: () => import('#/views/system/dept/list.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/vben5/playground/src/store/auth.ts b/apps/vben5/playground/src/store/auth.ts
index 9976ac59f..4adeb76e1 100644
--- a/apps/vben5/playground/src/store/auth.ts
+++ b/apps/vben5/playground/src/store/auth.ts
@@ -3,7 +3,8 @@ import type { Recordable, 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', () => {
         } else {
           onSuccess
             ? await onSuccess?.()
-            : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+            : await router.push(
+                userInfo.homePath || preferences.app.defaultHomePath,
+              );
         }
 
         if (userInfo?.realName) {
diff --git a/apps/vben5/playground/src/views/_core/authentication/login.vue b/apps/vben5/playground/src/views/_core/authentication/login.vue
index 4f6f56496..162398e05 100644
--- a/apps/vben5/playground/src/views/_core/authentication/login.vue
+++ b/apps/vben5/playground/src/views/_core/authentication/login.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { BasicOption } from '@vben/types';
+import type { BasicOption, Recordable } from '@vben/types';
 
-import { computed, markRaw } from 'vue';
+import { computed, markRaw, useTemplateRef } from 'vue';
 
 import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -104,12 +104,29 @@ const formSchema = computed((): VbenFormSchema[] => {
     },
   ];
 });
+
+const loginRef =
+  useTemplateRef<InstanceType<typeof AuthenticationLogin>>('loginRef');
+
+async function onSubmit(params: Recordable<any>) {
+  authStore.authLogin(params).catch(() => {
+    // 登陆失败，刷新验证码的演示
+    const formApi = loginRef.value?.getFormApi();
+    // 重置验证码组件的值
+    formApi?.setFieldValue('captcha', false, false);
+    // 使用表单API获取验证码组件实例，并调用其resume方法来重置验证码
+    formApi
+      ?.getFieldComponentRef<InstanceType<typeof SliderCaptcha>>('captcha')
+      ?.resume();
+  });
+}
 </script>
 
 <template>
   <AuthenticationLogin
+    ref="loginRef"
     :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    @submit="authStore.authLogin"
+    @submit="onSubmit"
   />
 </template>
diff --git a/apps/vben5/playground/src/views/demos/features/hide-menu-children/children.vue b/apps/vben5/playground/src/views/demos/features/hide-menu-children/children.vue
index 9b009e36d..1959f96dc 100644
--- a/apps/vben5/playground/src/views/demos/features/hide-menu-children/children.vue
+++ b/apps/vben5/playground/src/views/demos/features/hide-menu-children/children.vue
@@ -1,3 +1,23 @@
+<script lang="ts" setup>
+import { Fallback, VbenButton } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { X } from '@vben/icons';
+
+const { closeCurrentTab } = useTabs();
+</script>
+
 <template>
-  <div>children</div>
+  <Fallback
+    description="当前路由在菜单中不可见"
+    status="coming-soon"
+    title="被隐藏的子菜单"
+    show-back
+  >
+    <template #action>
+      <VbenButton size="lg" @click="closeCurrentTab()">
+        <X class="mr-2 size-4" />
+        关闭当前标签页
+      </VbenButton>
+    </template>
+  </Fallback>
 </template>
diff --git a/apps/vben5/playground/src/views/demos/features/hide-menu-children/parent.vue b/apps/vben5/playground/src/views/demos/features/hide-menu-children/parent.vue
index 920877516..b732c1bee 100644
--- a/apps/vben5/playground/src/views/demos/features/hide-menu-children/parent.vue
+++ b/apps/vben5/playground/src/views/demos/features/hide-menu-children/parent.vue
@@ -4,8 +4,14 @@ import { Fallback } from '@vben/common-ui';
 
 <template>
   <Fallback
-    description="当前菜单的子菜单不可见"
+    :description="`当前路由：${String($route.name)}，子菜单不可见`"
     status="coming-soon"
     title="隐藏子菜单"
-  />
+  >
+    <template #action>
+      <RouterLink to="/demos/features/hide-menu-children/children">
+        打开子路由
+      </RouterLink>
+    </template>
+  </Fallback>
 </template>
diff --git a/apps/vben5/playground/src/views/demos/features/json-bigint/index.vue b/apps/vben5/playground/src/views/demos/features/json-bigint/index.vue
new file mode 100644
index 000000000..d1f58145c
--- /dev/null
+++ b/apps/vben5/playground/src/views/demos/features/json-bigint/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, Card } from 'ant-design-vue';
+
+import { getBigIntData } from '#/api/examples/json-bigint';
+
+const response = ref('');
+function fetchData() {
+  getBigIntData().then((res) => {
+    response.value = res;
+  });
+}
+</script>
+<template>
+  <Page
+    title="JSON BigInt Support"
+    description="解析后端返回的长整数（long/bigInt）。代码位置：playground/src/api/request.ts中的transformResponse"
+  >
+    <Card>
+      <Alert>
+        <template #message>
+          有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
+          这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
+          <br />
+          下面的按钮点击后会发起请求，接口返回的JSON数据中的id字段是超出整数范围的数字，已自动将其解析为字符串
+        </template>
+      </Alert>
+      <Button class="mt-4" type="primary" @click="fetchData">发起请求</Button>
+      <div>
+        <pre>
+        {{ response }}
+        </pre>
+      </div>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/demos/features/request-params-serializer/index.vue b/apps/vben5/playground/src/views/demos/features/request-params-serializer/index.vue
new file mode 100644
index 000000000..4ed4d08e1
--- /dev/null
+++ b/apps/vben5/playground/src/views/demos/features/request-params-serializer/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed, ref, watchEffect } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Card, Radio, RadioGroup } from 'ant-design-vue';
+
+import { getParamsData } from '#/api/examples/params';
+
+const params = { ids: [2512, 3241, 4255] };
+const paramsSerializer = ref<'brackets' | 'comma' | 'indices' | 'repeat'>(
+  'brackets',
+);
+const response = ref('');
+const paramsStr = computed(() => {
+  // 写一段代码，从完整的URL中提取参数部分
+  const url = response.value;
+  return new URL(url).searchParams.toString();
+});
+
+watchEffect(() => {
+  getParamsData(params, paramsSerializer.value).then((res) => {
+    response.value = res.request.responseURL;
+  });
+});
+</script>
+<template>
+  <Page
+    title="请求参数序列化"
+    description="不同的后台接口可能对数组类型的GET参数的解析方式不同，我们预置了几种数组序列化方式，通过配置 paramsSerializer 来实现不同的序列化方式"
+  >
+    <Card>
+      <RadioGroup v-model:value="paramsSerializer" name="paramsSerializer">
+        <Radio value="brackets">brackets</Radio>
+        <Radio value="comma">comma</Radio>
+        <Radio value="indices">indices</Radio>
+        <Radio value="repeat">repeat</Radio>
+      </RadioGroup>
+      <div class="mt-4 flex flex-col gap-4">
+        <div>
+          <h3>需要提交的参数</h3>
+          <div>{{ JSON.stringify(params, null, 2) }}</div>
+        </div>
+        <template v-if="response">
+          <div>
+            <h3>访问地址</h3>
+            <pre>{{ response }}</pre>
+          </div>
+          <div>
+            <h3>参数字符串</h3>
+            <pre>{{ paramsStr }}</pre>
+          </div>
+          <div>
+            <h3>参数解码</h3>
+            <pre>{{ decodeURIComponent(paramsStr) }}</pre>
+          </div>
+        </template>
+      </div>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/demos/features/vue-query/concurrency-caching.vue b/apps/vben5/playground/src/views/demos/features/vue-query/concurrency-caching.vue
new file mode 100644
index 000000000..1e0f32800
--- /dev/null
+++ b/apps/vben5/playground/src/views/demos/features/vue-query/concurrency-caching.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { useVbenForm } from '#/adapter/form';
+import { getMenuList } from '#/api';
+
+const queryKey = ['demo', 'api', 'options'];
+const count = 4;
+
+const { dataUpdatedAt, promise: fetchDataFn } = useQuery({
+  // 在组件渲染期间预取数据
+  experimental_prefetchInRender: true,
+  // 获取接口数据的函数
+  queryFn: getMenuList,
+  queryKey,
+  // 每次组件挂载时都重新获取数据。如果不需要每次都重新获取就不要设置为always
+  refetchOnMount: 'always',
+  // 缓存时间
+  staleTime: 1000 * 60 * 5,
+});
+
+async function fetchOptions() {
+  return await fetchDataFn.value;
+}
+
+const schema = [];
+
+for (let i = 0; i < count; i++) {
+  schema.push({
+    component: 'ApiSelect',
+    componentProps: {
+      api: fetchOptions,
+      class: 'w-full',
+      filterOption: (input: string, option: Recordable<any>) => {
+        return option.label.toLowerCase().includes(input.toLowerCase());
+      },
+      labelField: 'name',
+      showSearch: true,
+      valueField: 'id',
+    },
+    fieldName: `field${i}`,
+    label: `Select ${i}`,
+  });
+}
+
+const [Form] = useVbenForm({
+  schema,
+  showDefaultActions: false,
+});
+</script>
+<template>
+  <div>
+    <div class="mb-2 flex gap-2">
+      <div>以下{{ count }}个组件共用一个数据源。</div>
+      <div>缓存更新时间：{{ new Date(dataUpdatedAt).toLocaleString() }}</div>
+    </div>
+    <Form />
+  </div>
+</template>
diff --git a/apps/vben5/playground/src/views/demos/features/vue-query/index.vue b/apps/vben5/playground/src/views/demos/features/vue-query/index.vue
index d57cf8120..00dd6e4f1 100644
--- a/apps/vben5/playground/src/views/demos/features/vue-query/index.vue
+++ b/apps/vben5/playground/src/views/demos/features/vue-query/index.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
+import { refAutoReset } from '@vueuse/core';
+import { Button, Card, Empty } from 'ant-design-vue';
 
+import ConcurrencyCaching from './concurrency-caching.vue';
 import InfiniteQueries from './infinite-queries.vue';
 import PaginatedQueries from './paginated-queries.vue';
 import QueryRetries from './query-retries.vue';
+
+const showCaching = refAutoReset(true, 1000);
 </script>
 
 <template>
@@ -20,6 +24,17 @@ import QueryRetries from './query-retries.vue';
       <Card title="错误重试">
         <QueryRetries />
       </Card>
+      <Card
+        title="并发和缓存"
+        v-spinning="!showCaching"
+        :body-style="{ minHeight: '330px' }"
+      >
+        <template #extra>
+          <Button @click="showCaching = false">重新加载</Button>
+        </template>
+        <ConcurrencyCaching v-if="showCaching" />
+        <Empty v-else description="正在加载..." />
+      </Card>
     </div>
   </Page>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/button-group/index.vue b/apps/vben5/playground/src/views/examples/button-group/index.vue
new file mode 100644
index 000000000..23861da40
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/button-group/index.vue
@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import { reactive, ref } from 'vue';
+
+import {
+  Page,
+  VbenButton,
+  VbenButtonGroup,
+  VbenCheckButtonGroup,
+} from '@vben/common-ui';
+import { LoaderCircle, Square, SquareCheckBig } from '@vben/icons';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+const radioValue = ref<string | undefined>('a');
+const checkValue = ref(['a', 'b']);
+
+const options = [
+  { label: '选项1', value: 'a' },
+  { label: '选项2', value: 'b', num: 999 },
+  { label: '选项3', value: 'c' },
+  { label: '选项4', value: 'd' },
+  { label: '选项5', value: 'e' },
+  { label: '选项6', value: 'f' },
+];
+
+function resetValues() {
+  radioValue.value = undefined;
+  checkValue.value = [];
+}
+
+function beforeChange(v: any, isChecked: boolean) {
+  return new Promise((resolve) => {
+    message.loading({
+      content: `正在设置${v}为${isChecked ? '选中' : '未选中'}...`,
+      duration: 0,
+      key: 'beforeChange',
+    });
+    setTimeout(() => {
+      message.success({ content: `${v} 已设置成功`, key: 'beforeChange' });
+      resolve(true);
+    }, 2000);
+  });
+}
+
+const compProps = reactive({
+  beforeChange: undefined,
+  disabled: false,
+  gap: 0,
+  showIcon: true,
+  size: 'middle',
+  allowClear: false,
+} as Recordable<any>);
+
+const [Form] = useVbenForm({
+  handleValuesChange(values) {
+    Object.keys(values).forEach((k) => {
+      if (k === 'beforeChange') {
+        compProps[k] = values[k] ? beforeChange : undefined;
+      } else {
+        compProps[k] = values[k];
+      }
+    });
+  },
+  commonConfig: {
+    labelWidth: 150,
+  },
+  schema: [
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '大', value: 'large' },
+          { label: '中', value: 'middle' },
+          { label: '小', value: 'small' },
+        ],
+      },
+      defaultValue: compProps.size,
+      fieldName: 'size',
+      label: '尺寸',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '无', value: 0 },
+          { label: '小', value: 5 },
+          { label: '中', value: 15 },
+          { label: '大', value: 30 },
+        ],
+      },
+      defaultValue: compProps.gap,
+      fieldName: 'gap',
+      label: '间距',
+    },
+    {
+      component: 'Switch',
+      defaultValue: compProps.showIcon,
+      fieldName: 'showIcon',
+      label: '显示图标',
+    },
+    {
+      component: 'Switch',
+      defaultValue: compProps.disabled,
+      fieldName: 'disabled',
+      label: '禁用',
+    },
+    {
+      component: 'Switch',
+      defaultValue: false,
+      fieldName: 'beforeChange',
+      label: '前置回调',
+    },
+    {
+      component: 'Switch',
+      defaultValue: false,
+      fieldName: 'allowClear',
+      label: '允许清除',
+      help: '单选时是否允许取消选中（值为undefined）',
+    },
+    {
+      component: 'InputNumber',
+      defaultValue: 0,
+      fieldName: 'maxCount',
+      label: '最大选中数量',
+      help: '多选时有效，0表示不限制',
+    },
+  ],
+  showDefaultActions: false,
+  submitOnChange: true,
+});
+
+function onBtnClick(value: any) {
+  const opt = options.find((o) => o.value === value);
+  if (opt) {
+    message.success(`点击了按钮${opt.label}，value = ${value}`);
+  }
+}
+</script>
+<template>
+  <Page
+    title="VbenButtonGroup 按钮组"
+    description="VbenButtonGroup是一个按钮容器，用于包裹一组按钮，协调整体样式。VbenCheckButtonGroup则可以作为一个表单组件，提供单选或多选功能"
+  >
+    <Card title="基本用法">
+      <template #extra>
+        <Button type="primary" @click="resetValues">清空值</Button>
+      </template>
+      <p class="mt-4">按钮组：</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenButtonGroup v-bind="compProps" border>
+          <VbenButton
+            v-for="btn in options"
+            :key="btn.value"
+            variant="link"
+            @click="onBtnClick(btn.value)"
+          >
+            {{ btn.label }}
+          </VbenButton>
+        </VbenButtonGroup>
+        <VbenButtonGroup v-bind="compProps" border>
+          <VbenButton
+            v-for="btn in options"
+            :key="btn.value"
+            variant="outline"
+            @click="onBtnClick(btn.value)"
+          >
+            {{ btn.label }}
+          </VbenButton>
+        </VbenButtonGroup>
+      </div>
+      <p class="mt-4">单选：{{ radioValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="radioValue"
+          :options="options"
+          v-bind="compProps"
+        />
+      </div>
+      <p class="mt-4">单选插槽：{{ radioValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="radioValue"
+          :options="options"
+          v-bind="compProps"
+        >
+          <template #option="{ label, value, data }">
+            <div class="flex items-center">
+              <span>{{ label }}</span>
+              <span class="ml-2 text-gray-400">{{ value }}</span>
+              <span v-if="data.num" class="white ml-2">{{ data.num }}</span>
+            </div>
+          </template>
+        </VbenCheckButtonGroup>
+      </div>
+      <p class="mt-4">多选{{ checkValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="checkValue"
+          multiple
+          :options="options"
+          v-bind="compProps"
+        />
+      </div>
+      <p class="mt-4">自定义图标{{ checkValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="checkValue"
+          multiple
+          :options="options"
+          v-bind="compProps"
+        >
+          <template #icon="{ loading, checked }">
+            <LoaderCircle class="animate-spin" v-if="loading" />
+            <SquareCheckBig v-else-if="checked" />
+            <Square v-else />
+          </template>
+        </VbenCheckButtonGroup>
+      </div>
+    </Card>
+
+    <Card title="设置" class="mt-4">
+      <Form />
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/count-to/index.vue b/apps/vben5/playground/src/views/examples/count-to/index.vue
new file mode 100644
index 000000000..ef690e9c7
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/count-to/index.vue
@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import type { CountToProps, TransitionPresets } from '@vben/common-ui';
+
+import { reactive } from 'vue';
+
+import { CountTo, Page, TransitionPresetsKeys } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  message,
+  Row,
+  Select,
+  Switch,
+} from 'ant-design-vue';
+
+const props = reactive<CountToProps & { transition: TransitionPresets }>({
+  decimal: '.',
+  decimals: 2,
+  decimalStyle: {
+    fontSize: 'small',
+    fontStyle: 'italic',
+  },
+  delay: 0,
+  disabled: false,
+  duration: 2000,
+  endVal: 100_000,
+  mainStyle: {
+    color: 'hsl(var(--primary))',
+    fontSize: 'xx-large',
+    fontWeight: 'bold',
+  },
+  prefix: '￥',
+  prefixStyle: {
+    paddingRight: '0.5rem',
+  },
+  separator: ',',
+  startVal: 0,
+  suffix: '元',
+  suffixStyle: {
+    paddingLeft: '0.5rem',
+  },
+  transition: 'easeOutQuart',
+});
+
+function changeNumber() {
+  props.endVal =
+    Math.floor(Math.random() * 100_000_000) / 10 ** (props.decimals || 0);
+}
+
+function openDocumentation() {
+  window.open('https://vueuse.org/core/useTransition/', '_blank');
+}
+
+function onStarted() {
+  message.loading({
+    content: '动画已开始',
+    duration: 0,
+    key: 'animator-info',
+  });
+}
+
+function onFinished() {
+  message.success({
+    content: '动画已结束',
+    duration: 2,
+    key: 'animator-info',
+  });
+}
+</script>
+<template>
+  <Page title="CountTo" description="数字滚动动画组件。使用">
+    <template #description>
+      <span>
+        使用useTransition封装的数字滚动动画组件，每次改变当前值都会产生过渡动画。
+      </span>
+      <Button type="link" @click="openDocumentation">
+        查看useTransition文档
+      </Button>
+    </template>
+    <Card title="基本用法">
+      <div class="flex w-full items-center justify-center pb-4">
+        <CountTo v-bind="props" @started="onStarted" @finished="onFinished" />
+      </div>
+      <Form :model="props">
+        <Row :gutter="20">
+          <Col :span="8">
+            <FormItem label="初始值" name="startVal">
+              <InputNumber v-model:value="props.startVal" />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="当前值" name="endVal">
+              <InputNumber
+                v-model:value="props.endVal"
+                class="w-full"
+                :precision="props.decimals"
+              >
+                <template #addonAfter>
+                  <IconifyIcon
+                    v-tippy="`设置一个随机值`"
+                    class="size-5 cursor-pointer outline-none"
+                    icon="ix:random-filled"
+                    @click="changeNumber"
+                  />
+                </template>
+              </InputNumber>
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="禁用动画" name="disabled">
+              <Switch v-model:checked="props.disabled" />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="延迟动画" name="delay">
+              <InputNumber v-model:value="props.delay" :min="0" />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="持续时间" name="duration">
+              <InputNumber v-model:value="props.duration" :min="0" />
+            </FormItem>
+          </Col>
+
+          <Col :span="8">
+            <FormItem label="小数位数" name="decimals">
+              <InputNumber
+                v-model:value="props.decimals"
+                :min="0"
+                :precision="0"
+              />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="分隔符" name="separator">
+              <Input v-model:value="props.separator" />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="小数点" name="decimal">
+              <Input v-model:value="props.decimal" />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="动画" name="transition">
+              <Select v-model:value="props.transition">
+                <Select.Option
+                  v-for="preset in TransitionPresetsKeys"
+                  :key="preset"
+                  :value="preset"
+                >
+                  {{ preset }}
+                </Select.Option>
+              </Select>
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="前缀" name="prefix">
+              <Input v-model:value="props.prefix" />
+            </FormItem>
+          </Col>
+          <Col :span="8">
+            <FormItem label="后缀" name="suffix">
+              <Input v-model:value="props.suffix" />
+            </FormItem>
+          </Col>
+        </Row>
+      </Form>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/drawer/base-demo.vue b/apps/vben5/playground/src/views/examples/drawer/base-demo.vue
index 11c65130c..08bc68fc5 100644
--- a/apps/vben5/playground/src/views/examples/drawer/base-demo.vue
+++ b/apps/vben5/playground/src/views/examples/drawer/base-demo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
@@ -15,13 +15,21 @@ const [Drawer, drawerApi] = useVbenDrawer({
     // drawerApi.close();
   },
 });
+
+function lockDrawer() {
+  drawerApi.lock();
+  setTimeout(() => {
+    drawerApi.unlock();
+  }, 3000);
+}
 </script>
 <template>
   <Drawer title="基础抽屉示例" title-tooltip="标题提示内容">
     <template #extra> extra </template>
     base demo
-
+    <Button type="primary" @click="lockDrawer">锁定抽屉状态</Button>
     <!-- <template #prepend-footer> slot </template> -->
     <!-- <template #append-footer> prepend slot </template> -->
+    <!-- <template #center-footer> center slot </template> -->
   </Drawer>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue b/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue
index 8bc29b2c6..f67b97850 100644
--- a/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue
+++ b/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue
@@ -1,9 +1,31 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Input, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+const value = ref('');
+
+const [Form] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: 'KeepAlive测试：内部组件',
+      },
+      fieldName: 'field1',
+      hideLabel: true,
+      label: '字段1',
+    },
+  ],
+  showDefaultActions: false,
+});
 
 const [Drawer, drawerApi] = useVbenDrawer({
+  destroyOnClose: false,
   onCancel() {
     drawerApi.close();
   },
@@ -16,6 +38,11 @@ const [Drawer, drawerApi] = useVbenDrawer({
 <template>
   <Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容">
     <template #extra> extra </template>
-    本抽屉指定在内容区域打开
+    此弹窗指定在内容区域打开，并且在关闭之后弹窗内容不会被销毁
+    <Input
+      v-model:value="value"
+      placeholder="KeepAlive测试:connectedComponent"
+    />
+    <Form />
   </Drawer>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/drawer/index.vue b/apps/vben5/playground/src/views/examples/drawer/index.vue
index 7773240d7..9804b19f1 100644
--- a/apps/vben5/playground/src/views/examples/drawer/index.vue
+++ b/apps/vben5/playground/src/views/examples/drawer/index.vue
@@ -13,6 +13,7 @@ import FormDrawerDemo from './form-drawer-demo.vue';
 import inContentDemo from './in-content-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
+defineOptions({ name: 'DrawerExample' });
 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
   connectedComponent: BaseDemo,
diff --git a/apps/vben5/playground/src/views/examples/form/api.vue b/apps/vben5/playground/src/views/examples/form/api.vue
index 02abfce3f..a7e15a08b 100644
--- a/apps/vben5/playground/src/views/examples/form/api.vue
+++ b/apps/vben5/playground/src/views/examples/form/api.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { RefSelectProps } from 'ant-design-vue/es/select';
+
 import { ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
@@ -82,6 +84,7 @@ function handleClick(
   action:
     | 'batchAddSchema'
     | 'batchDeleteSchema'
+    | 'componentRef'
     | 'disabled'
     | 'hiddenAction'
     | 'hiddenResetButton'
@@ -129,6 +132,11 @@ function handleClick(
       });
       break;
     }
+    case 'componentRef': {
+      // 获取下拉组件的实例，并调用它的focus方法
+      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
+      break;
+    }
     case 'disabled': {
       formApi.setState({ commonConfig: { disabled: true } });
       break;
@@ -182,6 +190,7 @@ function handleClick(
       formApi.setState({ submitButtonOptions: { show: true } });
       break;
     }
+
     case 'updateActionAlign': {
       formApi.setState({
         // 可以自行调整class
@@ -189,7 +198,6 @@ function handleClick(
       });
       break;
     }
-
     case 'updateResetButton': {
       formApi.setState({
         resetButtonOptions: { disabled: true },
@@ -257,6 +265,7 @@ function handleClick(
       <Button @click="handleClick('batchDeleteSchema')">
         批量删除表单项
       </Button>
+      <Button @click="handleClick('componentRef')">下拉组件获取焦点</Button>
     </Space>
     <Card title="操作示例">
       <BaseForm />
diff --git a/apps/vben5/playground/src/views/examples/form/basic.vue b/apps/vben5/playground/src/views/examples/form/basic.vue
index 345cb9e7a..d0e91d33a 100644
--- a/apps/vben5/playground/src/views/examples/form/basic.vue
+++ b/apps/vben5/playground/src/views/examples/form/basic.vue
@@ -1,18 +1,21 @@
 <script lang="ts" setup>
-import { h, ref } from 'vue';
+import type { UploadFile } from 'ant-design-vue';
+
+import { h, ref, toRaw } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
 import { useDebounceFn } from '@vueuse/core';
-import { Button, Card, message, Spin, TabPane, Tabs } from 'ant-design-vue';
+import { Button, Card, message, Spin, Tag } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import { useVbenForm } from '#/adapter/form';
+import { useVbenForm, z } from '#/adapter/form';
 import { getAllMenusApi } from '#/api';
+import { upload_file } from '#/api/examples/upload';
+import { $t } from '#/locales';
 
 import DocButton from '../doc-button.vue';
 
-const activeTab = ref('basic');
 const keyword = ref('');
 const fetching = ref(false);
 // 模拟远程获取数据
@@ -43,6 +46,9 @@ const [BaseForm, baseFormApi] = useVbenForm({
   fieldMappingTime: [['rangePicker', ['startTime', 'endTime'], 'YYYY-MM-DD']],
   // 提交函数
   handleSubmit: onSubmit,
+  handleValuesChange(_values, fieldsChanged) {
+    message.info(`表单以下字段发生变化：${fieldsChanged.join('，')}`);
+  },
 
   // 垂直布局，label和input在不同行，值为vertical
   // 水平布局，label和input在同一行
@@ -75,6 +81,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
         },
         // 菜单接口
         api: getAllMenusApi,
+        autoSelect: 'first',
       },
       // 字段名
       fieldName: 'api',
@@ -111,6 +118,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
           notFoundContent: fetching.value ? h(Spin) : undefined,
         };
       },
+      rules: 'selectRequired',
     },
     {
       component: 'ApiTreeSelect',
@@ -151,6 +159,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
       label: '图标',
     },
     {
+      colon: false,
       component: 'Select',
       componentProps: {
         allowClear: true,
@@ -169,7 +178,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
         showSearch: true,
       },
       fieldName: 'options',
-      label: '下拉选',
+      label: () => h(Tag, { color: 'warning' }, () => '😎自定义：'),
     },
     {
       component: 'RadioGroup',
@@ -225,6 +234,9 @@ const [BaseForm, baseFormApi] = useVbenForm({
           default: () => ['我已阅读并同意'],
         };
       },
+      rules: z
+        .boolean()
+        .refine((v) => v, { message: '为什么不同意？勾上它！' }),
     },
     {
       component: 'Mentions',
@@ -255,6 +267,8 @@ const [BaseForm, baseFormApi] = useVbenForm({
         class: 'w-auto',
       },
       fieldName: 'switch',
+      help: () =>
+        ['这是一个多行帮助信息', '第二行', '第三行'].map((v) => h('p', v)),
       label: '开关',
     },
     {
@@ -319,81 +333,56 @@ const [BaseForm, baseFormApi] = useVbenForm({
       fieldName: 'treeSelect',
       label: '树选择',
     },
-  ],
-  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-});
-
-const [CustomLayoutForm] = useVbenForm({
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      component: 'Select',
-      fieldName: 'field1',
-      label: '字符串',
-    },
-    {
-      component: 'TreeSelect',
-      fieldName: 'field2',
-      label: '字符串',
-    },
-    {
-      component: 'Mentions',
-      fieldName: 'field3',
-      label: '字符串',
-    },
-    {
-      component: 'Input',
-      fieldName: 'field4',
-      label: '字符串',
-    },
-    {
-      component: 'InputNumber',
-      fieldName: 'field5',
-      // 从第三列开始 相当于中间空了一列
-      formItemClass: 'col-start-3',
-      label: '前面空了一列',
-    },
-    {
-      component: 'Textarea',
-      fieldName: 'field6',
-      // 占满三列空间 基线对齐
-      formItemClass: 'col-span-3 items-baseline',
-      label: '占满三列',
-    },
     {
-      component: 'Input',
-      fieldName: 'field7',
-      // 占满2列空间 从第二列开始 相当于前面空了一列
-      formItemClass: 'col-span-2 col-start-2',
-      label: '占满2列',
-    },
-    {
-      component: 'Input',
-      fieldName: 'field8',
-      // 左右留空
-      formItemClass: 'col-start-2',
-      label: '左右留空',
-    },
-    {
-      component: 'InputPassword',
-      fieldName: 'field9',
-      formItemClass: 'col-start-1',
-      label: '字符串',
+      component: 'Upload',
+      componentProps: {
+        // 更多属性见：https://ant.design/components/upload-cn
+        accept: '.png,.jpg,.jpeg',
+        // 自动携带认证信息
+        customRequest: upload_file,
+        disabled: false,
+        maxCount: 1,
+        multiple: false,
+        showUploadList: true,
+        // 上传列表的内建样式，支持四种基本样式 text, picture, picture-card 和 picture-circle
+        listType: 'picture-card',
+      },
+      fieldName: 'files',
+      label: $t('examples.form.file'),
+      renderComponentContent: () => {
+        return {
+          default: () => $t('examples.form.upload-image'),
+        };
+      },
+      rules: 'required',
     },
   ],
-  // 一共三列
-  wrapperClass: 'grid-cols-3',
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
 });
 
 function onSubmit(values: Record<string, any>) {
+  const files = toRaw(values.files) as UploadFile[];
+  const doneFiles = files.filter((file) => file.status === 'done');
+  const failedFiles = files.filter((file) => file.status !== 'done');
+
+  const msg = [
+    ...doneFiles.map((file) => file.response?.url || file.url),
+    ...failedFiles.map((file) => file.name),
+  ].join(', ');
+
+  if (failedFiles.length === 0) {
+    message.success({
+      content: `${$t('examples.form.upload-urls')}: ${msg}`,
+    });
+  } else {
+    message.error({
+      content: `${$t('examples.form.upload-error')}: ${msg}`,
+    });
+    return;
+  }
+  // 如果需要可提交前替换为需要的urls
+  values.files = doneFiles.map((file) => file.response?.url || file.url);
   message.success({
     content: `form values: ${JSON.stringify(values)}`,
   });
@@ -406,6 +395,14 @@ function handleSetFormValue() {
   baseFormApi.setValues({
     checkboxGroup: ['1'],
     datePicker: dayjs('2022-01-01'),
+    files: [
+      {
+        name: 'example.png',
+        status: 'done',
+        uid: '-1',
+        url: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+      },
+    ],
     mentions: '@afc163',
     number: 3,
     options: '1',
@@ -428,7 +425,6 @@ function handleSetFormValue() {
   <Page
     content-class="flex flex-col gap-4"
     description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
-    header-class="pb-0"
     title="表单组件"
   >
     <template #description>
@@ -437,22 +433,15 @@ function handleSetFormValue() {
           表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。
         </p>
       </div>
-      <Tabs v-model:active-key="activeTab" :tab-bar-style="{ marginBottom: 0 }">
-        <TabPane key="basic" tab="基础示例" />
-        <TabPane key="layout" tab="自定义布局" />
-      </Tabs>
     </template>
     <template #extra>
       <DocButton class="mb-2" path="/components/common-ui/vben-form" />
     </template>
-    <Card v-show="activeTab === 'basic'" title="基础示例">
+    <Card title="基础示例">
       <template #extra>
         <Button type="primary" @click="handleSetFormValue">设置表单值</Button>
       </template>
       <BaseForm />
     </Card>
-    <Card v-show="activeTab === 'layout'" title="使用tailwind自定义布局">
-      <CustomLayoutForm />
-    </Card>
   </Page>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/form/custom-layout.vue b/apps/vben5/playground/src/views/examples/form/custom-layout.vue
new file mode 100644
index 000000000..cd7146b2e
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/form/custom-layout.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import DocButton from '../doc-button.vue';
+
+const [CustomLayoutForm] = useVbenForm({
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Select',
+      fieldName: 'field1',
+      label: '字符串',
+    },
+    {
+      component: 'TreeSelect',
+      fieldName: 'field2',
+      label: '字符串',
+    },
+    {
+      component: 'Mentions',
+      fieldName: 'field3',
+      label: '字符串',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field4',
+      label: '字符串',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'field5',
+      // 从第三列开始 相当于中间空了一列
+      formItemClass: 'col-start-3',
+      label: '前面空了一列',
+    },
+    {
+      component: 'Divider',
+      fieldName: '_divider',
+      formItemClass: 'col-span-3',
+      hideLabel: true,
+      renderComponentContent: () => {
+        return {
+          default: () => h('div', '分割线'),
+        };
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'field6',
+      // 占满三列空间 基线对齐
+      formItemClass: 'col-span-3 items-baseline',
+      label: '占满三列',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field7',
+      // 占满2列空间 从第二列开始 相当于前面空了一列
+      formItemClass: 'col-span-2 col-start-2',
+      label: '占满2列',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field8',
+      // 左右留空
+      formItemClass: 'col-start-2',
+      label: '左右留空',
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'field9',
+      formItemClass: 'col-start-1',
+      label: '字符串',
+    },
+  ],
+  // 一共三列
+  wrapperClass: 'grid-cols-3',
+});
+</script>
+
+<template>
+  <Page
+    content-class="flex flex-col gap-4"
+    description="使用tailwind自定义表单项的布局"
+    title="表单自定义布局"
+  >
+    <template #description>
+      <div class="text-muted-foreground">
+        <p>使用tailwind自定义表单项的布局，使用Divider分割表单。</p>
+      </div>
+    </template>
+    <template #extra>
+      <DocButton class="mb-2" path="/components/common-ui/vben-form" />
+    </template>
+    <Card title="使用tailwind自定义布局">
+      <CustomLayoutForm />
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/form/rules.vue b/apps/vben5/playground/src/views/examples/form/rules.vue
index dd95894cd..7ec954939 100644
--- a/apps/vben5/playground/src/views/examples/form/rules.vue
+++ b/apps/vben5/playground/src/views/examples/form/rules.vue
@@ -150,7 +150,9 @@ const [Form, formApi] = useVbenForm({
           default: () => ['我已阅读并同意'],
         };
       },
-      rules: 'selectRequired',
+      rules: z.boolean().refine((value) => value, {
+        message: '请勾选',
+      }),
     },
     {
       component: 'DatePicker',
diff --git a/apps/vben5/playground/src/views/examples/json-viewer/data.ts b/apps/vben5/playground/src/views/examples/json-viewer/data.ts
new file mode 100644
index 000000000..2767e0794
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/json-viewer/data.ts
@@ -0,0 +1,66 @@
+export const json1 = {
+  additionalInfo: {
+    author: 'Your Name',
+    debug: true,
+    version: '1.3.10',
+    versionCode: 132,
+  },
+  additionalNotes: 'This JSON is used for demonstration purposes',
+  tools: [
+    {
+      description: 'Description of Tool 1',
+      name: 'Tool 1',
+    },
+    {
+      description: 'Description of Tool 2',
+      name: 'Tool 2',
+    },
+    {
+      description: 'Description of Tool 3',
+      name: 'Tool 3',
+    },
+    {
+      description: 'Description of Tool 4',
+      name: 'Tool 4',
+    },
+  ],
+};
+
+export const json2 = JSON.parse(`
+  {
+	"id": "chatcmpl-123",
+	"object": "chat.completion",
+	"created": 1677652288,
+	"model": "gpt-3.5-turbo-0613",
+	"system_fingerprint": "fp_44709d6fcb",
+	"choices": [{
+		"index": 0,
+		"message": {
+			"role": "assistant",
+			"content": "Hello there, how may I assist you today?"
+		},
+		"finish_reason": "stop"
+	}],
+	"usage": {
+		"prompt_tokens": 9,
+		"completion_tokens": 12,
+		"total_tokens": 21,
+    "debug_mode": true
+	},
+  "debug": {
+    "startAt": "2021-08-01T00:00:00Z",
+    "logs": [
+      {
+        "timestamp": "2021-08-01T00:00:00Z",
+        "message": "This is a debug message",
+        "extra":[ "extra1", "extra2" ]
+      },
+      {
+        "timestamp": "2021-08-01T00:00:01Z",
+        "message": "This is another debug message",
+        "extra":[ "extra3", "extra4" ]
+      }
+    ]
+  }
+}
+  `);
diff --git a/apps/vben5/playground/src/views/examples/json-viewer/index.vue b/apps/vben5/playground/src/views/examples/json-viewer/index.vue
new file mode 100644
index 000000000..a91e042dc
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/json-viewer/index.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { JsonViewerAction, JsonViewerValue } from '@vben/common-ui';
+
+import { JsonViewer, Page } from '@vben/common-ui';
+
+import { Card, message } from 'ant-design-vue';
+
+import { json1, json2 } from './data';
+
+function handleKeyClick(key: string) {
+  message.info(`点击了Key ${key}`);
+}
+
+function handleValueClick(value: JsonViewerValue) {
+  message.info(`点击了Value ${JSON.stringify(value)}`);
+}
+
+function handleCopied(_event: JsonViewerAction) {
+  message.success('已复制JSON');
+}
+</script>
+<template>
+  <Page
+    title="Json Viewer"
+    description="一个渲染 JSON 结构数据的组件，支持复制、展开等，简单易用"
+  >
+    <Card title="默认配置">
+      <JsonViewer :value="json1" />
+    </Card>
+    <Card title="可复制、默认展开3层、显示边框、事件处理" class="mt-4">
+      <JsonViewer
+        :value="json2"
+        :expand-depth="3"
+        copyable
+        :sort="false"
+        @key-click="handleKeyClick"
+        @value-click="handleValueClick"
+        @copied="handleCopied"
+        boxed
+      />
+    </Card>
+    <Card title="预览模式" class="mt-4">
+      <JsonViewer
+        :value="json2"
+        copyable
+        preview-mode
+        :show-array-index="false"
+      />
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/loading/index.vue b/apps/vben5/playground/src/views/examples/loading/index.vue
new file mode 100644
index 000000000..c31f78440
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/loading/index.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { Loading, Page, Spinner } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { refAutoReset } from '@vueuse/core';
+import { Button, Card, Spin } from 'ant-design-vue';
+
+const spinning = refAutoReset(false, 3000);
+const loading = refAutoReset(false, 3000);
+
+const spinningV = refAutoReset(false, 3000);
+const loadingV = refAutoReset(false, 3000);
+</script>
+<template>
+  <Page
+    title="Vben Loading"
+    description="加载中状态组件。这个组件可以为其它作为容器的组件添加一个加载中的遮罩层。使用它们时，容器需要relative定位。"
+  >
+    <Card title="Antd Spin">
+      <template #actions>这是Antd 组件库自带的Spin组件演示</template>
+      <Spin :spinning="spinning" tip="加载中...">
+        <Button type="primary" @click="spinning = true">显示Spin</Button>
+      </Spin>
+    </Card>
+
+    <Card title="Vben Loading" v-loading="loadingV" class="mt-4">
+      <template #extra>
+        <Button type="primary" @click="loadingV = true">
+          v-loading 指令
+        </Button>
+      </template>
+      <template #actions>
+        Loading组件可以设置文字，并且也提供了icon插槽用于替换加载图标。
+      </template>
+      <div class="flex gap-4">
+        <div class="size-40">
+          <Loading
+            :spinning="loading"
+            text="正在加载..."
+            class="flex h-full w-full items-center justify-center"
+          >
+            <Button type="primary" @click="loading = true">默认动画</Button>
+          </Loading>
+        </div>
+        <div class="size-40">
+          <Loading
+            :spinning="loading"
+            class="flex h-full w-full items-center justify-center"
+          >
+            <Button type="primary" @click="loading = true">自定义动画1</Button>
+            <template #icon>
+              <IconifyIcon
+                icon="svg-spinners:ring-resize"
+                class="text-primary size-10"
+              />
+            </template>
+          </Loading>
+        </div>
+        <div class="size-40">
+          <Loading
+            :spinning="loading"
+            class="flex h-full w-full items-center justify-center"
+          >
+            <Button type="primary" @click="loading = true">自定义动画2</Button>
+            <template #icon>
+              <IconifyIcon
+                icon="svg-spinners:bars-scale"
+                class="text-primary size-10"
+              />
+            </template>
+          </Loading>
+        </div>
+      </div>
+    </Card>
+
+    <Card
+      title="Vben Spinner"
+      v-spinning="spinningV"
+      class="mt-4 overflow-hidden"
+      :body-style="{
+        position: 'relative',
+        overflow: 'hidden',
+      }"
+    >
+      <template #extra>
+        <Button type="primary" @click="spinningV = true">
+          v-spinning 指令
+        </Button>
+      </template>
+      <template #actions>
+        Spinner组件是Loading组件的一个特例，只有一个固定的统一样式。
+      </template>
+      <Spinner
+        :spinning="spinning"
+        class="flex size-40 items-center justify-center"
+      >
+        <Button type="primary" @click="spinning = true">显示Spinner</Button>
+      </Spinner>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/modal/auto-height-demo.vue b/apps/vben5/playground/src/views/examples/modal/auto-height-demo.vue
index 28939a62c..5e8f7ad03 100644
--- a/apps/vben5/playground/src/views/examples/modal/auto-height-demo.vue
+++ b/apps/vben5/playground/src/views/examples/modal/auto-height-demo.vue
@@ -16,15 +16,18 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen) {
     if (isOpen) {
-      handleUpdate(10);
+      handleUpdate();
     }
   },
 });
 
-function handleUpdate(len: number) {
+function handleUpdate(len?: number) {
   modalApi.setState({ confirmDisabled: true, loading: true });
   setTimeout(() => {
-    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    list.value = Array.from(
+      { length: len ?? Math.floor(Math.random() * 10) + 1 },
+      (_v, k) => k + 1,
+    );
     modalApi.setState({ confirmDisabled: false, loading: false });
   }, 2000);
 }
@@ -40,7 +43,7 @@ function handleUpdate(len: number) {
       {{ item }}
     </div>
     <template #prepend-footer>
-      <Button type="link" @click="handleUpdate(6)">点击更新数据</Button>
+      <Button type="link" @click="handleUpdate()">点击更新数据</Button>
     </template>
   </Modal>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/modal/base-demo.vue b/apps/vben5/playground/src/views/examples/modal/base-demo.vue
index 40afb869d..7b2f6391b 100644
--- a/apps/vben5/playground/src/views/examples/modal/base-demo.vue
+++ b/apps/vben5/playground/src/views/examples/modal/base-demo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 const [Modal, modalApi] = useVbenModal({
   onCancel() {
@@ -18,9 +18,17 @@ const [Modal, modalApi] = useVbenModal({
     message.info('onOpened：打开动画结束');
   },
 });
+
+function lockModal() {
+  modalApi.lock();
+  setTimeout(() => {
+    modalApi.unlock();
+  }, 3000);
+}
 </script>
 <template>
   <Modal class="w-[600px]" title="基础弹窗示例" title-tooltip="标题提示内容">
     base demo
+    <Button type="primary" @click="lockModal">锁定弹窗</Button>
   </Modal>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue b/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue
index 4ffbceaa6..7ffe7b773 100644
--- a/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue
+++ b/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Input, message } from 'ant-design-vue';
 
 const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: false,
   onCancel() {
     modalApi.close();
   },
@@ -12,6 +15,7 @@ const [Modal, modalApi] = useVbenModal({
     // modalApi.close();
   },
 });
+const value = ref();
 </script>
 <template>
   <Modal
@@ -20,6 +24,7 @@ const [Modal, modalApi] = useVbenModal({
     title="基础弹窗示例"
     title-tooltip="标题提示内容"
   >
-    此弹窗指定在内容区域打开
+    此弹窗指定在内容区域打开，并且在关闭之后弹窗内容不会被销毁
+    <Input v-model:value="value" placeholder="KeepAlive测试" />
   </Modal>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/modal/index.vue b/apps/vben5/playground/src/views/examples/modal/index.vue
index 71a44ce62..3ed6cdead 100644
--- a/apps/vben5/playground/src/views/examples/modal/index.vue
+++ b/apps/vben5/playground/src/views/examples/modal/index.vue
@@ -1,7 +1,16 @@
 <script lang="ts" setup>
-import { Page, useVbenModal } from '@vben/common-ui';
+import { onBeforeUnmount } from 'vue';
 
-import { Button, Card, Flex } from 'ant-design-vue';
+import {
+  alert,
+  clearAllAlerts,
+  confirm,
+  Page,
+  prompt,
+  useVbenModal,
+} from '@vben/common-ui';
+
+import { Button, Card, Flex, message } from 'ant-design-vue';
 
 import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';
@@ -14,6 +23,8 @@ import InContentModalDemo from './in-content-demo.vue';
 import NestedDemo from './nested-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
+defineOptions({ name: 'ModalExample' });
+
 const [BaseModal, baseModalApi] = useVbenModal({
   // 连接抽离的组件
   connectedComponent: BaseDemo,
@@ -101,6 +112,64 @@ function openFormModal() {
     })
     .open();
 }
+
+function openAlert() {
+  alert({
+    content: '这是一个弹窗',
+    icon: 'success',
+  }).then(() => {
+    message.info('用户关闭了弹窗');
+  });
+}
+
+onBeforeUnmount(() => {
+  // 清除所有弹窗
+  clearAllAlerts();
+});
+
+function openConfirm() {
+  confirm({
+    beforeClose({ isConfirm }) {
+      if (!isConfirm) return;
+      // 这里可以做一些异步操作
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(true);
+        }, 1000);
+      });
+    },
+    centered: false,
+    content: '这是一个确认弹窗',
+    icon: 'question',
+  })
+    .then(() => {
+      message.success('用户确认了操作');
+    })
+    .catch(() => {
+      message.error('用户取消了操作');
+    });
+}
+
+async function openPrompt() {
+  prompt<string>({
+    async beforeClose({ isConfirm, value }) {
+      if (isConfirm && value === '芝士') {
+        message.error('不能吃芝士');
+        return false;
+      }
+    },
+    componentProps: { placeholder: '不能吃芝士...' },
+    content: '中午吃了什么？',
+    icon: 'question',
+    overlayBlur: 3,
+  })
+    .then((res) => {
+      message.success(`用户输入了：${res}`);
+    })
+    .catch(() => {
+      message.error('用户取消了输入');
+    });
+}
 </script>
 
 <template>
@@ -129,7 +198,7 @@ function openFormModal() {
         </template>
       </Card>
 
-      <Card class="w-[300px]" title="指定容器">
+      <Card class="w-[300px]" title="指定容器+关闭后不销毁">
         <p>在内容区域打开弹窗的示例</p>
         <template #actions>
           <Button type="primary" @click="openInContentModal">打开弹窗</Button>
@@ -193,6 +262,17 @@ function openFormModal() {
           <Button type="primary" @click="openBlurModal">打开弹窗</Button>
         </template>
       </Card>
+      <Card class="w-[300px]" title="轻量提示弹窗">
+        <template #extra>
+          <DocButton path="/components/common-ui/vben-alert" />
+        </template>
+        <p>通过快捷方法创建动态提示弹窗，适合一些轻量的提示和确认、输入等</p>
+        <template #actions>
+          <Button type="primary" @click="openAlert">Alert</Button>
+          <Button type="primary" @click="openConfirm">Confirm</Button>
+          <Button type="primary" @click="openPrompt">Prompt</Button>
+        </template>
+      </Card>
     </Flex>
   </Page>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/motion/index.vue b/apps/vben5/playground/src/views/examples/motion/index.vue
new file mode 100644
index 000000000..1faaa23b7
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/motion/index.vue
@@ -0,0 +1,213 @@
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { Motion, MotionGroup, MotionPresets } from '@vben/plugins/motion';
+
+import { refAutoReset, watchDebounced } from '@vueuse/core';
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  FormItem,
+  InputNumber,
+  Row,
+  Select,
+} from 'ant-design-vue';
+// 本例子用不到visible类型的动画。带有VisibleOnce和Visible的类型会在组件进入视口被显示时执行动画，
+const presets = MotionPresets.filter((v) => !v.includes('Visible'));
+const showCard1 = refAutoReset(true, 100);
+const showCard2 = refAutoReset(true, 100);
+const showCard3 = refAutoReset(true, 100);
+const motionProps = reactive({
+  delay: 0,
+  duration: 300,
+  enter: { scale: 1 },
+  hovered: { scale: 1.1, transition: { delay: 0, duration: 50 } },
+  preset: 'fade',
+  tapped: { scale: 0.9, transition: { delay: 0, duration: 50 } },
+});
+
+const motionGroupProps = reactive({
+  delay: 0,
+  duration: 300,
+  enter: { scale: 1 },
+  hovered: { scale: 1.1, transition: { delay: 0, duration: 50 } },
+  preset: 'fade',
+  tapped: { scale: 0.9, transition: { delay: 0, duration: 50 } },
+});
+
+watchDebounced(
+  motionProps,
+  () => {
+    showCard2.value = false;
+  },
+  { debounce: 200, deep: true },
+);
+
+watchDebounced(
+  motionGroupProps,
+  () => {
+    showCard3.value = false;
+  },
+  { debounce: 200, deep: true },
+);
+
+function openDocPage() {
+  window.open('https://motion.vueuse.org/', '_blank');
+}
+</script>
+<template>
+  <Page title="Motion">
+    <template #description>
+      <span>一个易于使用的为其它组件赋予动画效果的组件。</span>
+      <Button type="link" @click="openDocPage">查看文档</Button>
+    </template>
+    <Card title="使用指令" :body-style="{ minHeight: '5rem' }">
+      <template #extra>
+        <Button type="primary" @click="showCard1 = false">重载</Button>
+      </template>
+      <div>
+        <div class="relative flex gap-2 overflow-hidden" v-if="showCard1">
+          <Button v-motion-fade-visible>fade</Button>
+          <Button v-motion-pop-visible :duration="500">pop</Button>
+          <Button v-motion-slide-left>slide-left</Button>
+          <Button v-motion-slide-right>slide-right</Button>
+          <Button v-motion-slide-bottom>slide-bottom</Button>
+          <Button v-motion-slide-top>slide-top</Button>
+        </div>
+      </div>
+    </Card>
+    <Card
+      class="mt-2"
+      title="使用组件（将内部作为一个整体添加动画）"
+      :body-style="{ padding: 0 }"
+    >
+      <div
+        class="relative flex min-h-32 items-center justify-center gap-2 overflow-hidden"
+      >
+        <Motion
+          v-bind="motionProps"
+          v-if="showCard2"
+          class="flex items-center gap-2"
+        >
+          <Button size="large">这个按钮在显示时会有动画效果</Button>
+          <span>附属组件，会作为整体处理动画</span>
+        </Motion>
+      </div>
+      <div
+        class="relative flex min-h-32 items-center justify-center gap-2 overflow-hidden"
+      >
+        <div v-if="showCard2" class="flex items-center gap-2">
+          <span>顺序延迟</span>
+          <Motion
+            v-bind="{
+              ...motionProps,
+              delay: motionProps.delay + 100 * i,
+            }"
+            v-for="i in 5"
+            :key="i"
+          >
+            <Button size="large">按钮{{ i }}</Button>
+          </Motion>
+        </div>
+      </div>
+      <div>
+        <Form :model="motionProps" :label-col="{ span: 10 }">
+          <Row>
+            <Col :span="8">
+              <FormItem prop="preset" label="动画效果">
+                <Select v-model:value="motionProps.preset">
+                  <Select.Option
+                    :value="preset"
+                    v-for="preset in presets"
+                    :key="preset"
+                  >
+                    {{ preset }}
+                  </Select.Option>
+                </Select>
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="duration" label="持续时间">
+                <InputNumber v-model:value="motionProps.duration" />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="delay" label="延迟动画">
+                <InputNumber v-model:value="motionProps.delay" />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="hovered.scale" label="Hover缩放">
+                <InputNumber v-model:value="motionProps.hovered.scale" />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="hovered.tapped" label="按下时缩放">
+                <InputNumber v-model:value="motionProps.tapped.scale" />
+              </FormItem>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+    </Card>
+    <Card
+      class="mt-2"
+      title="分组动画（每个子元素都会应用相同的独立动画）"
+      :body-style="{ padding: 0 }"
+    >
+      <div
+        class="relative flex min-h-32 items-center justify-center gap-2 overflow-hidden"
+      >
+        <MotionGroup v-bind="motionGroupProps" v-if="showCard3">
+          <Button size="large">按钮1</Button>
+          <Button size="large">按钮2</Button>
+          <Button size="large">按钮3</Button>
+          <Button size="large">按钮4</Button>
+          <Button size="large">按钮5</Button>
+        </MotionGroup>
+      </div>
+      <div>
+        <Form :model="motionGroupProps" :label-col="{ span: 10 }">
+          <Row>
+            <Col :span="8">
+              <FormItem prop="preset" label="动画效果">
+                <Select v-model:value="motionGroupProps.preset">
+                  <Select.Option
+                    :value="preset"
+                    v-for="preset in presets"
+                    :key="preset"
+                  >
+                    {{ preset }}
+                  </Select.Option>
+                </Select>
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="duration" label="持续时间">
+                <InputNumber v-model:value="motionGroupProps.duration" />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="delay" label="延迟动画">
+                <InputNumber v-model:value="motionGroupProps.delay" />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="hovered.scale" label="Hover缩放">
+                <InputNumber v-model:value="motionGroupProps.hovered.scale" />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem prop="hovered.tapped" label="按下时缩放">
+                <InputNumber v-model:value="motionGroupProps.tapped.scale" />
+              </FormItem>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/vxe-table/basic.vue b/apps/vben5/playground/src/views/examples/vxe-table/basic.vue
index 1216468d4..d20472461 100644
--- a/apps/vben5/playground/src/views/examples/vxe-table/basic.vue
+++ b/apps/vben5/playground/src/views/examples/vxe-table/basic.vue
@@ -43,7 +43,22 @@ const gridEvents: VxeGridListeners<RowType> = {
   },
 };
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid<RowType>({
+  // 放开注释查看表单组件的类型
+  // formOptions: {
+  //   schema: [
+  //     {
+  //       component: 'Switch',
+  //       fieldName: 'name',
+  //     },
+  //   ],
+  // },
+  gridEvents,
+  gridOptions,
+});
+
+// 放开注释查看当前表格实例的类型
+// gridApi.grid
 
 const showBorder = gridApi.useStore((state) => state.gridOptions?.border);
 const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);
diff --git a/apps/vben5/playground/src/views/system/dept/data.ts b/apps/vben5/playground/src/views/system/dept/data.ts
new file mode 100644
index 000000000..48773625a
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/dept/data.ts
@@ -0,0 +1,135 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { z } from '#/adapter/form';
+import { getDeptList } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+/**
+ * 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量
+ */
+export function useSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('system.dept.deptName'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('system.dept.deptName'), 2]))
+        .max(
+          20,
+          $t('ui.formRules.maxLength', [$t('system.dept.deptName'), 20]),
+        ),
+    },
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: getDeptList,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'pid',
+      label: $t('system.dept.parentDept'),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: $t('system.dept.status'),
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 50,
+        rows: 3,
+        showCount: true,
+      },
+      fieldName: 'remark',
+      label: $t('system.dept.remark'),
+      rules: z
+        .string()
+        .max(50, $t('ui.formRules.maxLength', [$t('system.dept.remark'), 50]))
+        .optional(),
+    },
+  ];
+}
+
+/**
+ * 获取表格列配置
+ * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
+ * @param onActionClick 表格操作按钮点击事件
+ */
+export function useColumns(
+  onActionClick?: OnActionClickFn<SystemDeptApi.SystemDept>,
+): VxeTableGridOptions<SystemDeptApi.SystemDept>['columns'] {
+  return [
+    {
+      align: 'left',
+      field: 'name',
+      fixed: 'left',
+      title: $t('system.dept.deptName'),
+      treeNode: true,
+      width: 150,
+    },
+    {
+      cellRender: { name: 'CellTag' },
+      field: 'status',
+      title: $t('system.dept.status'),
+      width: 100,
+    },
+    {
+      field: 'createTime',
+      title: $t('system.dept.createTime'),
+      width: 180,
+    },
+    {
+      field: 'remark',
+      title: $t('system.dept.remark'),
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.dept.name'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'append',
+            text: '新增下级',
+          },
+          'edit', // 默认的编辑按钮
+          {
+            code: 'delete', // 默认的删除按钮
+            disabled: (row: SystemDeptApi.SystemDept) => {
+              return !!(row.children && row.children.length > 0);
+            },
+          },
+        ],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: $t('system.dept.operation'),
+      width: 200,
+    },
+  ];
+}
diff --git a/apps/vben5/playground/src/views/system/dept/list.vue b/apps/vben5/playground/src/views/system/dept/list.vue
new file mode 100644
index 000000000..1b4154d45
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/dept/list.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDept, getDeptList } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+import { useColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/**
+ * 编辑部门
+ * @param row
+ */
+function onEdit(row: SystemDeptApi.SystemDept) {
+  formModalApi.setData(row).open();
+}
+
+/**
+ * 添加下级部门
+ * @param row
+ */
+function onAppend(row: SystemDeptApi.SystemDept) {
+  formModalApi.setData({ pid: row.id }).open();
+}
+
+/**
+ * 创建新部门
+ */
+function onCreate() {
+  formModalApi.setData(null).open();
+}
+
+/**
+ * 删除部门
+ * @param row
+ */
+function onDelete(row: SystemDeptApi.SystemDept) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  deleteDept(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      refreshGrid();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+/**
+ * 表格操作按钮的回调函数
+ */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<SystemDeptApi.SystemDept>) {
+  switch (code) {
+    case 'append': {
+      onAppend(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridEvents: {},
+  gridOptions: {
+    columns: useColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          return await getDeptList();
+        },
+      },
+    },
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      zoom: true,
+    },
+    treeConfig: {
+      parentField: 'pid',
+      rowField: 'id',
+      transform: false,
+    },
+  } as VxeTableGridOptions,
+});
+
+/**
+ * 刷新表格
+ */
+function refreshGrid() {
+  gridApi.query();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormModal @success="refreshGrid" />
+    <Grid table-title="部门列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', [$t('system.dept.name')]) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/system/dept/modules/form.vue b/apps/vben5/playground/src/views/system/dept/modules/form.vue
new file mode 100644
index 000000000..18a13966c
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/dept/modules/form.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDept, updateDept } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+import { useSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDeptApi.SystemDept>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [$t('system.dept.name')])
+    : $t('ui.actionTitle.create', [$t('system.dept.name')]);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: useSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (valid) {
+      modalApi.lock();
+      const data = await formApi.getValues();
+      try {
+        await (formData.value?.id
+          ? updateDept(formData.value.id, data)
+          : createDept(data));
+        modalApi.close();
+        emit('success');
+      } finally {
+        modalApi.lock(false);
+      }
+    }
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<SystemDeptApi.SystemDept>();
+      if (data) {
+        if (data.pid === 0) {
+          data.pid = undefined;
+        }
+        formData.value = data;
+        formApi.setValues(formData.value);
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <template #prepend-footer>
+      <div class="flex-auto">
+        <Button type="primary" danger @click="resetForm">
+          {{ $t('common.reset') }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/vben5/playground/src/views/system/menu/data.ts b/apps/vben5/playground/src/views/system/menu/data.ts
new file mode 100644
index 000000000..75190b4ac
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/menu/data.ts
@@ -0,0 +1,109 @@
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { $t } from '#/locales';
+
+export function getMenuTypeOptions() {
+  return [
+    {
+      color: 'processing',
+      label: $t('system.menu.typeCatalog'),
+      value: 'catalog',
+    },
+    { color: 'default', label: $t('system.menu.typeMenu'), value: 'menu' },
+    { color: 'error', label: $t('system.menu.typeButton'), value: 'button' },
+    {
+      color: 'success',
+      label: $t('system.menu.typeEmbedded'),
+      value: 'embedded',
+    },
+    { color: 'warning', label: $t('system.menu.typeLink'), value: 'link' },
+  ];
+}
+
+export function useColumns(
+  onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
+): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
+  return [
+    {
+      align: 'left',
+      field: 'meta.title',
+      fixed: 'left',
+      slots: { default: 'title' },
+      title: $t('system.menu.menuTitle'),
+      treeNode: true,
+      width: 250,
+    },
+    {
+      align: 'center',
+      cellRender: { name: 'CellTag', options: getMenuTypeOptions() },
+      field: 'type',
+      title: $t('system.menu.type'),
+      width: 100,
+    },
+    {
+      field: 'authCode',
+      title: $t('system.menu.authCode'),
+      width: 200,
+    },
+    {
+      align: 'left',
+      field: 'path',
+      title: $t('system.menu.path'),
+      width: 200,
+    },
+
+    {
+      align: 'left',
+      field: 'component',
+      formatter: ({ row }) => {
+        switch (row.type) {
+          case 'catalog':
+          case 'menu': {
+            return row.component ?? '';
+          }
+          case 'embedded': {
+            return row.meta?.iframeSrc ?? '';
+          }
+          case 'link': {
+            return row.meta?.link ?? '';
+          }
+        }
+        return '';
+      },
+      minWidth: 200,
+      title: $t('system.menu.component'),
+    },
+    {
+      cellRender: { name: 'CellTag' },
+      field: 'status',
+      title: $t('system.menu.status'),
+      width: 100,
+    },
+
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'append',
+            text: '新增下级',
+          },
+          'edit', // 默认的编辑按钮
+          'delete', // 默认的删除按钮
+        ],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: $t('system.menu.operation'),
+      width: 200,
+    },
+  ];
+}
diff --git a/apps/vben5/playground/src/views/system/menu/list.vue b/apps/vben5/playground/src/views/system/menu/list.vue
new file mode 100644
index 000000000..9ab456448
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/menu/list.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon, Plus } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { MenuBadge } from '@vben-core/menu-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMenu, getMenuList, SystemMenuApi } from '#/api/system/menu';
+
+import { useColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          return await getMenuList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      zoom: true,
+    },
+    treeConfig: {
+      parentField: 'pid',
+      rowField: 'id',
+      transform: false,
+    },
+  } as VxeTableGridOptions,
+});
+
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
+  switch (code) {
+    case 'append': {
+      onAppend(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+function onEdit(row: SystemMenuApi.SystemMenu) {
+  formDrawerApi.setData(row).open();
+}
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+function onAppend(row: SystemMenuApi.SystemMenu) {
+  formDrawerApi.setData({ pid: row.id }).open();
+}
+
+function onDelete(row: SystemMenuApi.SystemMenu) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  deleteMenu(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', [$t('system.menu.name')]) }}
+        </Button>
+      </template>
+      <template #title="{ row }">
+        <div class="flex w-full items-center gap-1">
+          <div class="size-5 flex-shrink-0">
+            <IconifyIcon
+              v-if="row.type === 'button'"
+              icon="carbon:security"
+              class="size-full"
+            />
+            <IconifyIcon
+              v-else-if="row.meta?.icon"
+              :icon="row.meta?.icon || 'carbon:circle-dash'"
+              class="size-full"
+            />
+          </div>
+          <span class="flex-auto">{{ $t(row.meta?.title) }}</span>
+          <div class="items-center justify-end"></div>
+        </div>
+        <MenuBadge
+          v-if="row.meta?.badgeType"
+          class="menu-badge"
+          :badge="row.meta.badge"
+          :badge-type="row.meta.badgeType"
+          :badge-variants="row.meta.badgeVariants"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+<style lang="scss" scoped>
+.menu-badge {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+
+  & > :deep(div) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/vben5/playground/src/views/system/menu/modules/form.vue b/apps/vben5/playground/src/views/system/menu/modules/form.vue
new file mode 100644
index 000000000..3cf40e356
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/menu/modules/form.vue
@@ -0,0 +1,505 @@
+<script lang="ts" setup>
+import type { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface';
+
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { computed, h, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $te } from '@vben/locales';
+import { getPopupContainer } from '@vben/utils';
+
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+import { useVbenForm, z } from '#/adapter/form';
+import {
+  createMenu,
+  getMenuList,
+  isMenuNameExists,
+  isMenuPathExists,
+  SystemMenuApi,
+  updateMenu,
+} from '#/api/system/menu';
+import { $t } from '#/locales';
+import { componentKeys } from '#/router/routes';
+
+import { getMenuTypeOptions } from '../data';
+
+const emit = defineEmits<{
+  success: [];
+}>();
+const formData = ref<SystemMenuApi.SystemMenu>();
+const titleSuffix = ref<string>();
+const schema: VbenFormSchema[] = [
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getMenuTypeOptions(),
+      optionType: 'button',
+    },
+    defaultValue: 'menu',
+    fieldName: 'type',
+    formItemClass: 'col-span-2 md:col-span-2',
+    label: $t('system.menu.type'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: $t('system.menu.menuName'),
+    rules: z
+      .string()
+      .min(2, $t('ui.formRules.minLength', [$t('system.menu.menuName'), 2]))
+      .max(30, $t('ui.formRules.maxLength', [$t('system.menu.menuName'), 30]))
+      .refine(
+        async (value: string) => {
+          return !(await isMenuNameExists(value, formData.value?.id));
+        },
+        (value) => ({
+          message: $t('ui.formRules.alreadyExists', [
+            $t('system.menu.menuName'),
+            value,
+          ]),
+        }),
+      ),
+  },
+  {
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: getMenuList,
+      class: 'w-full',
+      filterTreeNode(input: string, node: Recordable<any>) {
+        if (!input || input.length === 0) {
+          return true;
+        }
+        const title: string = node.meta?.title ?? '';
+        if (!title) return false;
+        return title.includes(input) || $t(title).includes(input);
+      },
+      getPopupContainer,
+      labelField: 'meta.title',
+      showSearch: true,
+      treeDefaultExpandAll: true,
+      valueField: 'id',
+      childrenField: 'children',
+    },
+    fieldName: 'pid',
+    label: $t('system.menu.parent'),
+    renderComponentContent() {
+      return {
+        title({ label, meta }: { label: string; meta: Recordable<any> }) {
+          const coms = [];
+          if (!label) return '';
+          if (meta?.icon) {
+            coms.push(h(IconifyIcon, { class: 'size-4', icon: meta.icon }));
+          }
+          coms.push(h('span', { class: '' }, $t(label || '')));
+          return h('div', { class: 'flex items-center gap-1' }, coms);
+        },
+      };
+    },
+  },
+  {
+    component: 'Input',
+    componentProps() {
+      // 不需要处理多语言时就无需这么做
+      return {
+        addonAfter: titleSuffix.value,
+        onChange({ target: { value } }: ChangeEvent) {
+          titleSuffix.value = value && $te(value) ? $t(value) : undefined;
+        },
+      };
+    },
+    fieldName: 'meta.title',
+    label: $t('system.menu.menuTitle'),
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: (values) => {
+        return ['catalog', 'embedded', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'path',
+    label: $t('system.menu.path'),
+    rules: z
+      .string()
+      .min(2, $t('ui.formRules.minLength', [$t('system.menu.path'), 2]))
+      .max(100, $t('ui.formRules.maxLength', [$t('system.menu.path'), 100]))
+      .refine(
+        (value: string) => {
+          return value.startsWith('/');
+        },
+        $t('ui.formRules.startWith', [$t('system.menu.path'), '/']),
+      )
+      .refine(
+        async (value: string) => {
+          return !(await isMenuPathExists(value, formData.value?.id));
+        },
+        (value) => ({
+          message: $t('ui.formRules.alreadyExists', [
+            $t('system.menu.path'),
+            value,
+          ]),
+        }),
+      ),
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: (values) => {
+        return ['embedded', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'activePath',
+    help: $t('system.menu.activePathHelp'),
+    label: $t('system.menu.activePath'),
+    rules: z
+      .string()
+      .min(2, $t('ui.formRules.minLength', [$t('system.menu.path'), 2]))
+      .max(100, $t('ui.formRules.maxLength', [$t('system.menu.path'), 100]))
+      .refine(
+        (value: string) => {
+          return value.startsWith('/');
+        },
+        $t('ui.formRules.startWith', [$t('system.menu.path'), '/']),
+      )
+      .refine(async (value: string) => {
+        return await isMenuPathExists(value, formData.value?.id);
+      }, $t('system.menu.activePathMustExist'))
+      .optional(),
+  },
+  {
+    component: 'IconPicker',
+    componentProps: {
+      prefix: 'carbon',
+    },
+    dependencies: {
+      show: (values) => {
+        return ['catalog', 'embedded', 'link', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.icon',
+    label: $t('system.menu.icon'),
+  },
+  {
+    component: 'IconPicker',
+    componentProps: {
+      prefix: 'carbon',
+    },
+    dependencies: {
+      show: (values) => {
+        return ['catalog', 'embedded', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.activeIcon',
+    label: $t('system.menu.activeIcon'),
+  },
+  {
+    component: 'AutoComplete',
+    componentProps: {
+      allowClear: true,
+      class: 'w-full',
+      filterOption(input: string, option: { value: string }) {
+        return option.value.toLowerCase().includes(input.toLowerCase());
+      },
+      options: componentKeys.map((v) => ({ value: v })),
+    },
+    dependencies: {
+      rules: (values) => {
+        return values.type === 'menu' ? 'required' : null;
+      },
+      show: (values) => {
+        return values.type === 'menu';
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'component',
+    label: $t('system.menu.component'),
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: (values) => {
+        return ['embedded', 'link'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'linkSrc',
+    label: $t('system.menu.linkSrc'),
+    rules: z.string().url($t('ui.formRules.invalidURL')),
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      rules: (values) => {
+        return values.type === 'button' ? 'required' : null;
+      },
+      show: (values) => {
+        return ['button', 'catalog', 'embedded', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'authCode',
+    label: $t('system.menu.authCode'),
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: [
+        { label: $t('common.enabled'), value: 1 },
+        { label: $t('common.disabled'), value: 0 },
+      ],
+      optionType: 'button',
+    },
+    defaultValue: 1,
+    fieldName: 'status',
+    label: $t('system.menu.status'),
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: true,
+      class: 'w-full',
+      options: [
+        { label: $t('system.menu.badgeType.dot'), value: 'dot' },
+        { label: $t('system.menu.badgeType.normal'), value: 'normal' },
+      ],
+    },
+    dependencies: {
+      show: (values) => {
+        return values.type !== 'button';
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.badgeType',
+    label: $t('system.menu.badgeType.title'),
+  },
+  {
+    component: 'Input',
+    componentProps: (values) => {
+      return {
+        allowClear: true,
+        class: 'w-full',
+        disabled: values.meta?.badgeType !== 'normal',
+      };
+    },
+    dependencies: {
+      show: (values) => {
+        return values.type !== 'button';
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.badge',
+    label: $t('system.menu.badge'),
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: true,
+      class: 'w-full',
+      options: SystemMenuApi.BadgeVariants.map((v) => ({
+        label: v,
+        value: v,
+      })),
+    },
+    dependencies: {
+      show: (values) => {
+        return values.type !== 'button';
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.badgeVariants',
+    label: $t('system.menu.badgeVariants'),
+  },
+  {
+    component: 'Divider',
+    dependencies: {
+      show: (values) => {
+        return !['button', 'link'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'divider1',
+    formItemClass: 'col-span-2 md:col-span-2 pb-0',
+    hideLabel: true,
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.advancedSettings'),
+      };
+    },
+  },
+  {
+    component: 'Checkbox',
+    dependencies: {
+      show: (values) => {
+        return ['menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.keepAlive',
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.keepAlive'),
+      };
+    },
+  },
+  {
+    component: 'Checkbox',
+    dependencies: {
+      show: (values) => {
+        return ['embedded', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.affixTab',
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.affixTab'),
+      };
+    },
+  },
+  {
+    component: 'Checkbox',
+    dependencies: {
+      show: (values) => {
+        return !['button'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.hideInMenu',
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.hideInMenu'),
+      };
+    },
+  },
+  {
+    component: 'Checkbox',
+    dependencies: {
+      show: (values) => {
+        return ['catalog', 'menu'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.hideChildrenInMenu',
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.hideChildrenInMenu'),
+      };
+    },
+  },
+  {
+    component: 'Checkbox',
+    dependencies: {
+      show: (values) => {
+        return !['button', 'link'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.hideInBreadcrumb',
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.hideInBreadcrumb'),
+      };
+    },
+  },
+  {
+    component: 'Checkbox',
+    dependencies: {
+      show: (values) => {
+        return !['button', 'link'].includes(values.type);
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'meta.hideInTab',
+    renderComponentContent() {
+      return {
+        default: () => $t('system.menu.hideInTab'),
+      };
+    },
+  },
+];
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isHorizontal = computed(() => breakpoints.greaterOrEqual('md').value);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    colon: true,
+    formItemClass: 'col-span-2 md:col-span-1',
+  },
+  schema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4',
+});
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onConfirm: onSubmit,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SystemMenuApi.SystemMenu>();
+      if (data?.type === 'link') {
+        data.linkSrc = data.meta?.link;
+      } else if (data?.type === 'embedded') {
+        data.linkSrc = data.meta?.iframeSrc;
+      }
+      if (data) {
+        formData.value = data;
+        formApi.setValues(formData.value);
+        titleSuffix.value = formData.value.meta?.title
+          ? $t(formData.value.meta.title)
+          : '';
+      } else {
+        formApi.resetForm();
+        titleSuffix.value = '';
+      }
+    }
+  },
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (valid) {
+    drawerApi.lock();
+    const data =
+      await formApi.getValues<
+        Omit<SystemMenuApi.SystemMenu, 'children' | 'id'>
+      >();
+    if (data.type === 'link') {
+      data.meta = { ...data.meta, link: data.linkSrc };
+    } else if (data.type === 'embedded') {
+      data.meta = { ...data.meta, iframeSrc: data.linkSrc };
+    }
+    delete data.linkSrc;
+    try {
+      await (formData.value?.id
+        ? updateMenu(formData.value.id, data)
+        : createMenu(data));
+      drawerApi.close();
+      emit('success');
+    } finally {
+      drawerApi.unlock();
+    }
+  }
+}
+const getDrawerTitle = computed(() =>
+  formData.value?.id
+    ? $t('ui.actionTitle.edit', [$t('system.menu.name')])
+    : $t('ui.actionTitle.create', [$t('system.menu.name')]),
+);
+</script>
+<template>
+  <Drawer class="w-full max-w-[800px]" :title="getDrawerTitle">
+    <Form class="mx-4" :layout="isHorizontal ? 'horizontal' : 'vertical'" />
+  </Drawer>
+</template>
diff --git a/apps/vben5/playground/src/views/system/role/data.ts b/apps/vben5/playground/src/views/system/role/data.ts
new file mode 100644
index 000000000..255b6cc72
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/role/data.ts
@@ -0,0 +1,127 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemRoleApi } from '#/api';
+
+import { $t } from '#/locales';
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('system.role.roleName'),
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: $t('system.role.status'),
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: $t('system.role.remark'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'permissions',
+      formItemClass: 'items-start',
+      label: $t('system.role.setPermissions'),
+      modelPropName: 'modelValue',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('system.role.roleName'),
+    },
+    { component: 'Input', fieldName: 'id', label: $t('system.role.id') },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+      },
+      fieldName: 'status',
+      label: $t('system.role.status'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'remark',
+      label: $t('system.role.remark'),
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: $t('system.role.createTime'),
+    },
+  ];
+}
+
+export function useColumns<T = SystemRoleApi.SystemRole>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: $t('system.role.roleName'),
+      width: 200,
+    },
+    {
+      field: 'id',
+      title: $t('system.role.id'),
+      width: 200,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'status',
+      title: $t('system.role.status'),
+      width: 100,
+    },
+    {
+      field: 'remark',
+      minWidth: 100,
+      title: $t('system.role.remark'),
+    },
+    {
+      field: 'createTime',
+      title: $t('system.role.createTime'),
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.role.name'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: $t('system.role.operation'),
+      width: 130,
+    },
+  ];
+}
diff --git a/apps/vben5/playground/src/views/system/role/list.vue b/apps/vben5/playground/src/views/system/role/list.vue
new file mode 100644
index 000000000..b5e383a62
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/role/list.vue
@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SystemRoleApi } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteRole, getRoleList, updateRole } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRoleList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<SystemRoleApi.SystemRole>,
+});
+
+function onActionClick(e: OnActionClickParams<SystemRoleApi.SystemRole>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(
+  newStatus: number,
+  row: SystemRoleApi.SystemRole,
+) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await updateRole(row.id, { status: newStatus });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function onEdit(row: SystemRoleApi.SystemRole) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: SystemRoleApi.SystemRole) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  deleteRole(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <Grid :table-title="$t('system.role.list')">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', [$t('system.role.name')]) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/vben5/playground/src/views/system/role/modules/form.vue b/apps/vben5/playground/src/views/system/role/modules/form.vue
new file mode 100644
index 000000000..cae54a1c6
--- /dev/null
+++ b/apps/vben5/playground/src/views/system/role/modules/form.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer, VbenTree } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getMenuList } from '#/api/system/menu';
+import { createRole, updateRole } from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<SystemRoleApi.SystemRole>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const permissions = ref<DataNode[]>([]);
+const loadingPermissions = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value ? updateRole(id.value, values) : createRole(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SystemRoleApi.SystemRole>();
+      formApi.resetForm();
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+        formApi.setValues(data);
+      } else {
+        id.value = undefined;
+      }
+
+      if (permissions.value.length === 0) {
+        loadPermissions();
+      }
+    }
+  },
+});
+
+async function loadPermissions() {
+  loadingPermissions.value = true;
+  try {
+    const res = await getMenuList();
+    permissions.value = res as unknown as DataNode[];
+  } finally {
+    loadingPermissions.value = false;
+  }
+}
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', $t('system.role.name'))
+    : $t('common.create', $t('system.role.name'));
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #permissions="slotProps">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+          <VbenTree
+            :tree-data="permissions"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="meta.title"
+            icon-field="meta.icon"
+          >
+            <template #node="{ value }">
+              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              {{ $t(value.meta.title) }}
+            </template>
+          </VbenTree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>
diff --git a/apps/vben5/pnpm-workspace.yaml b/apps/vben5/pnpm-workspace.yaml
index 98b3f5fc8..4acb3954f 100644
--- a/apps/vben5/pnpm-workspace.yaml
+++ b/apps/vben5/pnpm-workspace.yaml
@@ -14,38 +14,39 @@ packages:
   - docs
   - playground
 catalog:
-  '@ast-grep/napi': ^0.32.3
+  '@ast-grep/napi': ^0.37.0
   '@ant-design/icons-vue': ^7.0.1
-  '@changesets/changelog-github': ^0.5.0
-  '@changesets/cli': ^2.27.12
-  '@changesets/git': ^3.0.2
-  '@clack/prompts': ^0.9.1
-  '@commitlint/cli': ^19.7.1
-  '@commitlint/config-conventional': ^19.7.1
+  '@changesets/changelog-github': ^0.5.1
+  '@changesets/cli': ^2.29.2
+  '@changesets/git': ^3.0.4
+  '@clack/prompts': ^0.10.1
+  '@commitlint/cli': ^19.8.0
+  '@commitlint/config-conventional': ^19.8.0
   '@ctrl/tinycolor': ^4.1.0
-  '@eslint/js': ^9.19.0
-  '@faker-js/faker': ^9.4.0
-  '@iconify/json': ^2.2.302
+  '@eslint/js': ^9.26.0
+  '@faker-js/faker': ^9.7.0
+  '@iconify/json': ^2.2.334
   '@iconify/tailwind': ^1.2.0
-  '@iconify/vue': ^4.3.0
-  '@intlify/core-base': ^11.1.0
-  '@intlify/unplugin-vue-i18n': ^6.0.3
-  '@jspm/generator': ^2.4.2
-  '@manypkg/get-packages': ^2.2.2
+  '@iconify/vue': ^5.0.0
+  '@intlify/core-base': ^11.1.3
+  '@intlify/unplugin-vue-i18n': ^6.0.8
+  '@jspm/generator': ^2.5.1
+  '@manypkg/get-packages': ^3.0.0
   '@microsoft/signalr': ^8.0.7
-  '@nolebase/vitepress-plugin-git-changelog': ^2.12.1
-  '@playwright/test': ^1.50.1
-  '@pnpm/workspace.read-manifest': ^1000.0.2
-  '@stylistic/stylelint-plugin': ^3.1.1
+  '@nolebase/vitepress-plugin-git-changelog': ^2.17.0
+  '@playwright/test': ^1.52.0
+  '@pnpm/workspace.read-manifest': ^1000.1.4
+  '@stylistic/stylelint-plugin': ^3.1.2
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
   '@tailwindcss/typography': ^0.5.16
-  '@tanstack/vue-query': ^5.65.0
+  '@tanstack/vue-query': ^5.75.1
   '@tanstack/vue-store': ^0.7.0
   '@types/archiver': ^6.0.3
   '@types/codemirror': ^5.60.15
   '@types/eslint': ^9.6.1
   '@types/html-minifier-terser': ^7.0.2
-  '@types/jsonwebtoken': ^9.0.8
+  '@types/json-bigint': ^1.0.4
+  '@types/jsonwebtoken': ^9.0.9
   '@types/lodash.clonedeep': ^4.5.9
   '@types/lodash.debounce': ^4.0.9
   '@types/lodash.get': ^4.4.9
@@ -53,26 +54,29 @@ catalog:
   '@types/lodash.isequal': ^4.5.8
   '@types/lodash.isnumber': ^3.0.9
   '@types/lodash.merge': ^4.6.9
-  '@types/node': ^22.13.1
+  '@types/lodash.set': ^4.3.9
+  '@types/node': ^22.15.3
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
+  '@types/qs': ^6.9.18
   '@types/sortablejs': ^1.15.8
-  '@typescript-eslint/eslint-plugin': ^8.23.0
-  '@typescript-eslint/parser': ^8.23.0
+  '@typescript-eslint/eslint-plugin': ^8.31.1
+  '@typescript-eslint/parser': ^8.31.1
   '@vee-validate/zod': ^4.15.0
-  '@vite-pwa/vitepress': ^0.5.3
-  '@vitejs/plugin-vue': ^5.2.1
-  '@vitejs/plugin-vue-jsx': ^4.1.1
+  '@vite-pwa/vitepress': ^1.0.0
+  '@vitejs/plugin-vue': ^5.2.3
+  '@vitejs/plugin-vue-jsx': ^4.1.2
   '@vue/reactivity': ^3.5.13
   '@vue/shared': ^3.5.13
   '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^12.5.0
-  '@vueuse/integrations': ^12.5.0
+  '@vueuse/core': ^13.1.0
+  '@vueuse/integrations': ^13.1.0
+  '@vueuse/motion': ^3.0.3
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
-  autoprefixer: ^10.4.20
-  axios: ^1.7.9
+  autoprefixer: ^10.4.21
+  axios: ^1.9.0
   axios-mock-adapter: ^2.1.0
   cac: ^6.7.14
   chalk: ^5.4.1
@@ -82,46 +86,46 @@ catalog:
   clsx: ^2.1.1
   codemirror: ^5.65.3
   commitlint-plugin-function-rules: ^4.0.1
-  consola: ^3.4.0
+  consola: ^3.4.2
   cross-env: ^7.0.3
-  cspell: ^8.17.3
+  cspell: ^8.19.3
   cssnano: ^7.0.6
-  cz-git: ^1.11.0
-  czg: ^1.11.0
+  cz-git: ^1.11.1
+  czg: ^1.11.1
   dayjs: ^1.11.13
   defu: ^6.1.4
   depcheck: ^1.4.7
-  dotenv: ^16.4.7
+  dotenv: ^16.5.0
   echarts: ^5.6.0
-  element-plus: ^2.9.3
-  eslint: ^9.19.0
-  eslint-config-turbo: ^2.4.0
-  eslint-plugin-command: ^0.2.7
+  element-plus: ^2.9.9
+  eslint: ^9.26.0
+  eslint-config-turbo: ^2.5.2
+  eslint-plugin-command: ^3.2.0
   eslint-plugin-eslint-comments: ^3.2.0
-  eslint-plugin-import-x: ^4.6.1
-  eslint-plugin-jsdoc: ^50.6.3
-  eslint-plugin-jsonc: ^2.19.1
-  eslint-plugin-n: ^17.15.1
+  eslint-plugin-import-x: ^4.11.0
+  eslint-plugin-jsdoc: ^50.6.11
+  eslint-plugin-jsonc: ^2.20.0
+  eslint-plugin-n: ^17.17.0
   eslint-plugin-no-only-tests: ^3.3.0
-  eslint-plugin-perfectionist: ^4.8.0
-  eslint-plugin-prettier: ^5.2.3
+  eslint-plugin-perfectionist: ^4.12.3
+  eslint-plugin-prettier: ^5.2.6
   eslint-plugin-regexp: ^2.7.0
-  eslint-plugin-unicorn: ^56.0.1
+  eslint-plugin-unicorn: ^59.0.0
   eslint-plugin-unused-imports: ^4.1.4
   eslint-plugin-vitest: ^0.5.4
-  eslint-plugin-vue: ^9.32.0
+  eslint-plugin-vue: ^10.1.0
   execa: ^9.5.2
   find-up: ^7.0.0
   get-port: ^7.1.0
-  globals: ^15.14.0
-  h3: ^1.14.0
-  happy-dom: ^16.8.1
+  globals: ^16.0.0
+  h3: ^1.15.3
+  happy-dom: ^17.4.6
   html-minifier-terser: ^7.2.0
-  husky: ^9.1.7
   is-ci: ^4.1.0
+  json-bigint: ^1.0.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
-  lint-staged: ^15.4.3
+  lefthook: ^1.11.12
   lodash.clonedeep: ^4.5.0
   lodash.debounce: ^4.0.8
   lodash.get: ^4.4.2
@@ -129,76 +133,80 @@ catalog:
   lodash.isequal: ^4.5.0
   lodash.isnumber: ^3.0.3
   lodash.merge: ^4.6.2
-  lucide-vue-next: ^0.469.0
+  lodash.set: ^4.3.2
+  lucide-vue-next: ^0.507.0
   medium-zoom: ^1.1.0
   naive-ui: ^2.41.0
-  nitropack: ^2.10.4
+  nitropack: ^2.11.11
   nprogress: ^0.2.0
   oidc-client-ts: ^3.2.1
   ora: ^8.2.0
-  pinia: ^2.3.1
+  pinia: ^3.0.2
   pinia-plugin-persistedstate: ^4.2.0
-  pkg-types: ^1.3.1
-  playwright: ^1.50.1
-  postcss: ^8.5.1
+  pkg-types: ^2.1.0
+  playwright: ^1.52.0
+  postcss: ^8.5.3
   postcss-antd-fixes: ^0.2.0
   postcss-html: ^1.8.0
   postcss-import: ^16.1.0
-  postcss-preset-env: ^10.1.3
+  postcss-preset-env: ^10.1.6
   postcss-scss: ^4.0.9
-  prettier: ^3.4.2
+  prettier: ^3.5.3
   prettier-plugin-tailwindcss: ^0.6.11
-  publint: ^0.2.12
+  publint: ^0.3.12
   qrcode: ^1.5.4
-  radix-vue: ^1.9.13
+  qs: ^6.14.0
+  radix-vue: ^1.9.17
   resolve.exports: ^2.0.3
   rimraf: ^6.0.1
-  rollup: ^4.34.2
+  rollup: ^4.40.1
   rollup-plugin-visualizer: ^5.14.0
-  sass: ^1.83.4
+  sass: ^1.87.0
   simple-uploader.js: "^0.6.0"
+  secure-ls: ^2.0.0
   sortablejs: ^1.15.6
-  stylelint: ^16.14.1
-  stylelint-config-recess-order: ^5.1.1
-  stylelint-config-recommended: ^14.0.1
+  stylelint: ^16.19.1
+  stylelint-config-recess-order: ^6.0.0
+  stylelint-config-recommended: ^16.0.0
   stylelint-config-recommended-scss: ^14.1.0
   stylelint-config-recommended-vue: ^1.6.0
-  stylelint-config-standard: ^36.0.1
-  stylelint-order: ^6.0.4
+  stylelint-config-standard: ^38.0.0
+  stylelint-order: ^7.0.0
   stylelint-prettier: ^5.0.3
-  stylelint-scss: ^6.11.0
+  stylelint-scss: ^6.11.1
   tailwind-merge: ^2.6.0
   tailwindcss: ^3.4.17
   tailwindcss-animate: ^1.0.7
   theme-colors: ^0.1.0
   tinymce: ^5.10.7
-  tippy.js: ^6.2.5
-  turbo: ^2.4.0
-  typescript: ^5.7.3
-  unbuild: ^3.3.1
+  tippy.js: ^6.3.7
+  turbo: ^2.5.2
+  typescript: ^5.8.3
+  unbuild: ^3.5.0
   universal-cookie: ^7
-  unplugin-element-plus: ^0.9.0
+  unplugin-element-plus: ^0.10.0
   vee-validate: ^4.15.0
   vditor: ^3.10.9
-  vite: ^6.0.11
+  vite: ^6.3.4
   vite-plugin-compression: ^0.5.1
-  vite-plugin-dts: ^4.5.0
+  vite-plugin-dts: ^4.5.3
   vite-plugin-html: ^3.2.2
   vite-plugin-lazy-import: ^1.0.7
-  vite-plugin-pwa: ^0.21.1
-  vite-plugin-vue-devtools: ^7.7.1
+  vite-plugin-pwa: ^1.0.0
+  vite-plugin-vue-devtools: ^7.7.6
   vitepress: ^1.6.3
-  vitepress-plugin-group-icons: ^1.3.5
-  vitest: ^2.1.9
+  vitepress-plugin-group-icons: ^1.5.2
+  vitest: ^3.1.2
   vue: ^3.5.13
-  vue-eslint-parser: ^9.4.3
-  vue-i18n: ^11.1.0
-  vue-router: ^4.5.0
+  vue-eslint-parser: ^10.1.3
+  vue-i18n: ^11.1.3
+  vue-json-viewer: ^3.0.4
+  vue-router: ^4.5.1
   vue-simple-uploader: ^1.0.3
-  vue-tippy: ^6.6.0
-  vue-tsc: 2.1.10
-  vxe-pc-ui: ^4.3.79
-  vxe-table: 4.10.0
-  watermark-js-plus: ^1.5.7
-  zod: ^3.24.1
+  vue-tippy: ^6.7.0
+  vue-tsc: 2.2.10
+  vxe-pc-ui: ^4.5.35
+  vxe-table: ^4.13.16
+  watermark-js-plus: ^1.6.0
+  zod: ^3.24.3
   zod-defaults: ^0.1.3
diff --git a/apps/vben5/scripts/clean.mjs b/apps/vben5/scripts/clean.mjs
index e2840d380..1039a6ac1 100644
--- a/apps/vben5/scripts/clean.mjs
+++ b/apps/vben5/scripts/clean.mjs
@@ -1,31 +1,33 @@
 import { promises as fs } from 'node:fs';
-import { join } from 'node:path';
+import { join, normalize } from 'node:path';
 
 const rootDir = process.cwd();
 
 /**
  * 递归查找并删除目标目录
  * @param {string} currentDir - 当前遍历的目录路径
+ * @param {string[]} targets - 要删除的目标列表
  */
 async function cleanTargetsRecursively(currentDir, targets) {
   const items = await fs.readdir(currentDir);
 
   for (const item of items) {
     try {
-      const itemPath = join(currentDir, item);
+      const itemPath = normalize(join(currentDir, item));
+      const stat = await fs.lstat(itemPath);
+
       if (targets.includes(item)) {
         // 匹配到目标目录或文件时直接删除
         await fs.rm(itemPath, { force: true, recursive: true });
         console.log(`Deleted: ${itemPath}`);
-      }
-      const stat = await fs.lstat(itemPath);
-      if (stat.isDirectory()) {
+      } else if (stat.isDirectory()) {
+        // 只对目录进行递归处理
         await cleanTargetsRecursively(itemPath, targets);
       }
-    } catch {
-      // console.error(
-      //   `Error handling item ${item} in ${currentDir}: ${error.message}`,
-      // );
+    } catch (error) {
+      console.error(
+        `Error handling item ${item} in ${currentDir}: ${error.message}`,
+      );
     }
   }
 }
@@ -33,9 +35,9 @@ async function cleanTargetsRecursively(currentDir, targets) {
 (async function startCleanup() {
   // 要删除的目录及文件名称
   const targets = ['node_modules', 'dist', '.turbo', 'dist.zip'];
-
   const deleteLockFile = process.argv.includes('--del-lock');
   const cleanupTargets = [...targets];
+
   if (deleteLockFile) {
     cleanupTargets.push('pnpm-lock.yaml');
   }
@@ -46,8 +48,9 @@ async function cleanTargetsRecursively(currentDir, targets) {
 
   try {
     await cleanTargetsRecursively(rootDir, cleanupTargets);
-    console.log('Cleanup process completed.');
+    console.log('Cleanup process completed successfully.');
   } catch (error) {
     console.error(`Unexpected error during cleanup: ${error.message}`);
+    process.exit(1);
   }
 })();
diff --git a/apps/vben5/scripts/deploy/Dockerfile b/apps/vben5/scripts/deploy/Dockerfile
index 9fd151994..86f439f24 100644
--- a/apps/vben5/scripts/deploy/Dockerfile
+++ b/apps/vben5/scripts/deploy/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20-slim AS builder
+FROM node:22-slim AS builder
 
 # --max-old-space-size
 ENV PNPM_HOME="/pnpm"
@@ -6,13 +6,14 @@ ENV PATH="$PNPM_HOME:$PATH"
 ENV NODE_OPTIONS=--max-old-space-size=8192
 ENV TZ=Asia/Shanghai
 
-RUN corepack enable
+RUN npm i -g corepack
 
 WORKDIR /app
 
 # copy package.json and pnpm-lock.yaml to workspace
 COPY . /app
 
+# 安装依赖
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 RUN pnpm run build --filter=\!./docs
 
@@ -20,12 +21,17 @@ RUN echo "Builder Success 🎉"
 
 FROM nginx:stable-alpine AS production
 
-RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf
+# 配置 nginx
+RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf \
+    && rm -rf /etc/nginx/conf.d/default.conf
+
+# 复制构建产物
 COPY --from=builder /app/playground/dist /usr/share/nginx/html
 
+# 复制 nginx 配置
 COPY --from=builder /app/scripts/deploy/nginx.conf /etc/nginx/nginx.conf
 
 EXPOSE 8080
 
-# start nginx
+# 启动 nginx
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/apps/vben5/scripts/turbo-run/README.md b/apps/vben5/scripts/turbo-run/README.md
index 65ffcf4f6..4f90a59be 100644
--- a/apps/vben5/scripts/turbo-run/README.md
+++ b/apps/vben5/scripts/turbo-run/README.md
@@ -1,3 +1,59 @@
 # @vben/turbo-run
 
-turbo-run is a command line tool that allows you to run multiple commands in parallel.
+`turbo-run` 是一个命令行工具，允许你在多个包中并行运行命令。它提供了一个交互式的界面，让你可以选择要运行命令的包。
+
+## 特性
+
+- 🚀 交互式选择要运行的包
+- 📦 支持 monorepo 项目结构
+- 🔍 自动检测可用的命令
+- 🎯 精确过滤目标包
+
+## 安装
+
+```bash
+pnpm add -D @vben/turbo-run
+```
+
+## 使用方法
+
+基本语法：
+
+```bash
+turbo-run [script]
+```
+
+例如，如果你想运行 `dev` 命令：
+
+```bash
+turbo-run dev
+```
+
+工具会自动检测哪些包有 `dev` 命令，并提供一个交互式界面让你选择要运行的包。
+
+## 示例
+
+假设你的项目中有以下包：
+
+- `@vben/app`
+- `@vben/admin`
+- `@vben/website`
+
+当你运行：
+
+```bash
+turbo-run dev
+```
+
+工具会：
+
+1. 检测哪些包有 `dev` 命令
+2. 显示一个交互式选择界面
+3. 让你选择要运行命令的包
+4. 使用 `pnpm --filter` 在选定的包中运行命令
+
+## 注意事项
+
+- 确保你的项目使用 pnpm 作为包管理器
+- 确保目标包在 `package.json` 中定义了相应的脚本命令
+- 该工具需要在 monorepo 项目的根目录下运行
diff --git a/apps/vben5/scripts/turbo-run/package.json b/apps/vben5/scripts/turbo-run/package.json
index 8128ec5c2..4639c873e 100644
--- a/apps/vben5/scripts/turbo-run/package.json
+++ b/apps/vben5/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.5.3",
+  "version": "5.5.7",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/apps/vben5/scripts/turbo-run/src/run.ts b/apps/vben5/scripts/turbo-run/src/run.ts
index 6a8762fa3..31f9f5255 100644
--- a/apps/vben5/scripts/turbo-run/src/run.ts
+++ b/apps/vben5/scripts/turbo-run/src/run.ts
@@ -25,7 +25,7 @@ export async function run(options: RunOptions) {
 
   let selectPkg: string | symbol;
   if (selectPkgs.length > 1) {
-    selectPkg = await select<any, string>({
+    selectPkg = await select<string>({
       message: `Select the app you need to run [${command}]:`,
       options: selectPkgs.map((item) => ({
         label: item?.packageJson.name,
diff --git a/apps/vben5/scripts/vsh/README.md b/apps/vben5/scripts/vsh/README.md
index 7cc8fbf5f..61140d65c 100644
--- a/apps/vben5/scripts/vsh/README.md
+++ b/apps/vben5/scripts/vsh/README.md
@@ -1,3 +1,56 @@
 # @vben/vsh
 
-shell 脚本工具集合
+一个 Shell 脚本工具集合，用于 Vue Vben Admin 项目的开发和管理。
+
+## 功能特性
+
+- 🚀 基于 Node.js 的现代化 Shell 工具
+- 📦 支持模块化开发和按需加载
+- 🔍 提供依赖检查和分析功能
+- 🔄 支持循环依赖扫描
+- 📝 提供包发布检查功能
+
+## 安装
+
+```bash
+# 使用 pnpm 安装
+pnpm add -D @vben/vsh
+
+# 或者使用 npm
+npm install -D @vben/vsh
+
+# 或者使用 yarn
+yarn add -D @vben/vsh
+```
+
+## 使用方法
+
+### 全局安装
+
+```bash
+# 全局安装
+pnpm add -g @vben/vsh
+
+# 使用 vsh 命令
+vsh [command]
+```
+
+### 本地使用
+
+```bash
+# 在 package.json 中添加脚本
+{
+  "scripts": {
+    "vsh": "vsh"
+  }
+}
+
+# 运行命令
+pnpm vsh [command]
+```
+
+## 命令列表
+
+- `vsh check-deps`: 检查项目依赖
+- `vsh scan-circular`: 扫描循环依赖
+- `vsh publish-check`: 检查包发布配置
diff --git a/apps/vben5/scripts/vsh/package.json b/apps/vben5/scripts/vsh/package.json
index 9767a4dc0..a901e3c74 100644
--- a/apps/vben5/scripts/vsh/package.json
+++ b/apps/vben5/scripts/vsh/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vsh",
-  "version": "5.5.3",
+  "version": "5.5.6",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/apps/vben5/scripts/vsh/src/check-circular/index.ts b/apps/vben5/scripts/vsh/src/check-circular/index.ts
index 8af97894b..064250613 100644
--- a/apps/vben5/scripts/vsh/src/check-circular/index.ts
+++ b/apps/vben5/scripts/vsh/src/check-circular/index.ts
@@ -4,77 +4,167 @@ import { extname } from 'node:path';
 
 import { getStagedFiles } from '@vben/node-utils';
 
-import { circularDepsDetect, printCircles } from 'circular-dependency-scanner';
-
-const IGNORE_DIR = [
-  'dist',
-  '.turbo',
-  'output',
-  '.cache',
-  'scripts',
-  'internal',
-  'packages/effects/request/src/',
-  'packages/@core/ui-kit/menu-ui/src/',
-  'packages/@core/ui-kit/popup-ui/src/',
-].join(',');
-
-const IGNORE = [`**/{${IGNORE_DIR}}/**`];
+import { circularDepsDetect } from 'circular-dependency-scanner';
+
+// 默认配置
+const DEFAULT_CONFIG = {
+  allowedExtensions: ['.cjs', '.js', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+  ignoreDirs: [
+    'dist',
+    '.turbo',
+    'output',
+    '.cache',
+    'scripts',
+    'internal',
+    'packages/effects/request/src/',
+    'packages/@core/ui-kit/menu-ui/src/',
+    'packages/@core/ui-kit/popup-ui/src/',
+  ],
+  threshold: 0, // 循环依赖的阈值
+} as const;
+
+// 类型定义
+type CircularDependencyResult = string[];
+
+interface CheckCircularConfig {
+  allowedExtensions?: string[];
+  ignoreDirs?: string[];
+  threshold?: number;
+}
 
 interface CommandOptions {
+  config?: CheckCircularConfig;
   staged: boolean;
   verbose: boolean;
 }
 
-async function checkCircular({ staged, verbose }: CommandOptions) {
-  const results = await circularDepsDetect({
-    absolute: staged,
-    cwd: process.cwd(),
-    ignore: IGNORE,
+// 缓存机制
+const cache = new Map<string, CircularDependencyResult[]>();
+
+/**
+ * 格式化循环依赖的输出
+ * @param circles - 循环依赖结果
+ */
+function formatCircles(circles: CircularDependencyResult[]): void {
+  if (circles.length === 0) {
+    console.log('✅ No circular dependencies found');
+    return;
+  }
+
+  console.log('⚠️ Circular dependencies found:');
+  circles.forEach((circle, index) => {
+    console.log(`\nCircular dependency #${index + 1}:`);
+    circle.forEach((file) => console.log(`  → ${file}`));
   });
+}
+
+/**
+ * 检查项目中的循环依赖
+ * @param options - 检查选项
+ * @param options.staged - 是否只检查暂存区文件
+ * @param options.verbose - 是否显示详细信息
+ * @param options.config - 自定义配置
+ * @returns Promise<void>
+ */
+async function checkCircular({
+  config = {},
+  staged,
+  verbose,
+}: CommandOptions): Promise<void> {
+  try {
+    // 合并配置
+    const finalConfig = {
+      ...DEFAULT_CONFIG,
+      ...config,
+    };
+
+    // 生成忽略模式
+    const ignorePattern = `**/{${finalConfig.ignoreDirs.join(',')}}/**`;
+
+    // 检查缓存
+    const cacheKey = `${staged}-${process.cwd()}-${ignorePattern}`;
+    if (cache.has(cacheKey)) {
+      const cachedResults = cache.get(cacheKey);
+      if (cachedResults) {
+        verbose && formatCircles(cachedResults);
+      }
+      return;
+    }
+
+    // 检测循环依赖
+    const results = await circularDepsDetect({
+      absolute: staged,
+      cwd: process.cwd(),
+      ignore: [ignorePattern],
+    });
+
+    if (staged) {
+      let files = await getStagedFiles();
+      const allowedExtensions = new Set(finalConfig.allowedExtensions);
+
+      // 过滤文件列表
+      files = files.filter((file) => allowedExtensions.has(extname(file)));
 
-  if (staged) {
-    let files = await getStagedFiles();
-
-    const allowedExtensions = new Set([
-      '.cjs',
-      '.js',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
-    ]);
-
-    // 过滤文件列表
-    files = files.filter((file) => allowedExtensions.has(extname(file)));
-
-    const circularFiles: string[][] = [];
-
-    for (const file of files) {
-      for (const result of results) {
-        const resultFiles = result.flat();
-        if (resultFiles.includes(file)) {
-          circularFiles.push(result);
+      const circularFiles: CircularDependencyResult[] = [];
+
+      for (const file of files) {
+        for (const result of results) {
+          const resultFiles = result.flat();
+          if (resultFiles.includes(file)) {
+            circularFiles.push(result);
+          }
         }
       }
+
+      // 更新缓存
+      cache.set(cacheKey, circularFiles);
+      verbose && formatCircles(circularFiles);
+    } else {
+      // 更新缓存
+      cache.set(cacheKey, results);
+      verbose && formatCircles(results);
     }
-    verbose && printCircles(circularFiles);
-  } else {
-    verbose && printCircles(results);
+
+    // 如果发现循环依赖，只输出警告信息
+    if (results.length > 0) {
+      console.log(
+        '\n⚠️ Warning: Circular dependencies found, please check and fix',
+      );
+    }
+  } catch (error) {
+    console.error(
+      '❌ Error checking circular dependencies:',
+      error instanceof Error ? error.message : error,
+    );
   }
 }
 
-function defineCheckCircularCommand(cac: CAC) {
+/**
+ * 定义检查循环依赖的命令
+ * @param cac - CAC实例
+ */
+function defineCheckCircularCommand(cac: CAC): void {
   cac
     .command('check-circular')
-    .option(
-      '--staged',
-      'Whether it is the staged commit mode, in which mode, if there is a circular dependency, an alarm will be given.',
-    )
-    .usage(`Analysis of project circular dependencies.`)
-    .action(async ({ staged }) => {
-      await checkCircular({ staged, verbose: true });
+    .option('--staged', 'Only check staged files')
+    .option('--verbose', 'Show detailed information')
+    .option('--threshold <number>', 'Threshold for circular dependencies', {
+      default: 0,
+    })
+    .option('--ignore-dirs <dirs>', 'Directories to ignore, comma separated')
+    .usage('Analyze project circular dependencies')
+    .action(async ({ ignoreDirs, staged, threshold, verbose }) => {
+      const config: CheckCircularConfig = {
+        threshold: Number(threshold),
+        ...(ignoreDirs && { ignoreDirs: ignoreDirs.split(',') }),
+      };
+
+      await checkCircular({
+        config,
+        staged,
+        verbose: verbose ?? true,
+      });
     });
 }
 
-export { defineCheckCircularCommand };
+export { type CheckCircularConfig, defineCheckCircularCommand };
diff --git a/apps/vben5/scripts/vsh/src/check-dep/index.ts b/apps/vben5/scripts/vsh/src/check-dep/index.ts
index 762622995..e600e1bbd 100644
--- a/apps/vben5/scripts/vsh/src/check-dep/index.ts
+++ b/apps/vben5/scripts/vsh/src/check-dep/index.ts
@@ -4,82 +4,191 @@ import { getPackages } from '@vben/node-utils';
 
 import depcheck from 'depcheck';
 
-async function runDepcheck() {
-  const { packages } = await getPackages();
-  await Promise.all(
-    packages.map(async (pkg) => {
-      if (
-        [
-          '@vben/backend-mock',
-          '@vben/commitlint-config',
-          '@vben/eslint-config',
-          '@vben/lint-staged-config',
-          '@vben/node-utils',
-          '@vben/prettier-config',
-          '@vben/stylelint-config',
-          '@vben/tailwind-config',
-          '@vben/tsconfig',
-          '@vben/vite-config',
-          '@vben/vite-config',
-          '@vben/vsh',
-        ].includes(pkg.packageJson.name)
-      ) {
-        return;
-      }
-
-      const unused = await depcheck(pkg.dir, {
-        ignoreMatches: [
-          'vite',
-          'vitest',
-          'unbuild',
-          '@vben/tsconfig',
-          '@vben/vite-config',
-          '@vben/tailwind-config',
-          '@types/*',
-          '@vben-core/design',
-        ],
-        ignorePatterns: ['dist', 'node_modules', 'public'],
-      });
-
-      // 删除file:前缀的依赖提示，该依赖是本地依赖
-      Reflect.deleteProperty(unused.missing, 'file:');
-      Object.keys(unused.missing).forEach((key) => {
-        unused.missing[key] = (unused.missing[key] || []).filter(
-          (item: string) => !item.startsWith('/'),
-        );
-        if (unused.missing[key].length === 0) {
-          Reflect.deleteProperty(unused.missing, key);
+// 默认配置
+const DEFAULT_CONFIG = {
+  // 需要忽略的依赖匹配
+  ignoreMatches: [
+    'vite',
+    'vitest',
+    'unbuild',
+    '@vben/tsconfig',
+    '@vben/vite-config',
+    '@vben/tailwind-config',
+    '@types/*',
+    '@vben-core/design',
+  ],
+  // 需要忽略的包
+  ignorePackages: [
+    '@vben/backend-mock',
+    '@vben/commitlint-config',
+    '@vben/eslint-config',
+    '@vben/node-utils',
+    '@vben/prettier-config',
+    '@vben/stylelint-config',
+    '@vben/tailwind-config',
+    '@vben/tsconfig',
+    '@vben/vite-config',
+    '@vben/vsh',
+  ],
+  // 需要忽略的文件模式
+  ignorePatterns: ['dist', 'node_modules', 'public'],
+};
+
+interface DepcheckResult {
+  dependencies: string[];
+  devDependencies: string[];
+  missing: Record<string, string[]>;
+}
+
+interface DepcheckConfig {
+  ignoreMatches?: string[];
+  ignorePackages?: string[];
+  ignorePatterns?: string[];
+}
+
+interface PackageInfo {
+  dir: string;
+  packageJson: {
+    name: string;
+  };
+}
+
+/**
+ * 清理依赖检查结果
+ * @param unused - 依赖检查结果
+ */
+function cleanDepcheckResult(unused: DepcheckResult): void {
+  // 删除file:前缀的依赖提示，该依赖是本地依赖
+  Reflect.deleteProperty(unused.missing, 'file:');
+
+  // 清理路径依赖
+  Object.keys(unused.missing).forEach((key) => {
+    unused.missing[key] = (unused.missing[key] || []).filter(
+      (item: string) => !item.startsWith('/'),
+    );
+    if (unused.missing[key].length === 0) {
+      Reflect.deleteProperty(unused.missing, key);
+    }
+  });
+}
+
+/**
+ * 格式化依赖检查结果
+ * @param pkgName - 包名
+ * @param unused - 依赖检查结果
+ */
+function formatDepcheckResult(pkgName: string, unused: DepcheckResult): void {
+  const hasIssues =
+    Object.keys(unused.missing).length > 0 ||
+    unused.dependencies.length > 0 ||
+    unused.devDependencies.length > 0;
+
+  if (!hasIssues) {
+    return;
+  }
+
+  console.log('\n📦 Package:', pkgName);
+
+  if (Object.keys(unused.missing).length > 0) {
+    console.log('❌ Missing dependencies:');
+    Object.entries(unused.missing).forEach(([dep, files]) => {
+      console.log(`  - ${dep}:`);
+      files.forEach((file) => console.log(`    → ${file}`));
+    });
+  }
+
+  if (unused.dependencies.length > 0) {
+    console.log('⚠️ Unused dependencies:');
+    unused.dependencies.forEach((dep) => console.log(`  - ${dep}`));
+  }
+
+  if (unused.devDependencies.length > 0) {
+    console.log('⚠️ Unused devDependencies:');
+    unused.devDependencies.forEach((dep) => console.log(`  - ${dep}`));
+  }
+}
+
+/**
+ * 运行依赖检查
+ * @param config - 配置选项
+ */
+async function runDepcheck(config: DepcheckConfig = {}): Promise<void> {
+  try {
+    const finalConfig = {
+      ...DEFAULT_CONFIG,
+      ...config,
+    };
+
+    const { packages } = await getPackages();
+
+    let hasIssues = false;
+
+    await Promise.all(
+      packages.map(async (pkg: PackageInfo) => {
+        // 跳过需要忽略的包
+        if (finalConfig.ignorePackages.includes(pkg.packageJson.name)) {
+          return;
         }
-      });
-
-      if (
-        Object.keys(unused.missing).length === 0 &&
-        unused.dependencies.length === 0 &&
-        unused.devDependencies.length === 0
-      ) {
-        return;
-      }
-      console.error(
-        '\n',
-        pkg.packageJson.name,
-        '\n missing:',
-        unused.missing,
-        '\n dependencies:',
-        unused.dependencies,
-        '\n devDependencies:',
-        unused.devDependencies,
-      );
-    }),
-  );
+
+        const unused = await depcheck(pkg.dir, {
+          ignoreMatches: finalConfig.ignoreMatches,
+          ignorePatterns: finalConfig.ignorePatterns,
+        });
+
+        cleanDepcheckResult(unused);
+
+        const pkgHasIssues =
+          Object.keys(unused.missing).length > 0 ||
+          unused.dependencies.length > 0 ||
+          unused.devDependencies.length > 0;
+
+        if (pkgHasIssues) {
+          hasIssues = true;
+          formatDepcheckResult(pkg.packageJson.name, unused);
+        }
+      }),
+    );
+
+    if (!hasIssues) {
+      console.log('\n✅ Dependency check completed, no issues found');
+    }
+  } catch (error) {
+    console.error(
+      '❌ Dependency check failed:',
+      error instanceof Error ? error.message : error,
+    );
+  }
 }
 
-function defineDepcheckCommand(cac: CAC) {
+/**
+ * 定义依赖检查命令
+ * @param cac - CAC实例
+ */
+function defineDepcheckCommand(cac: CAC): void {
   cac
     .command('check-dep')
-    .usage(`Analysis of project circular dependencies.`)
-    .action(async () => {
-      await runDepcheck();
+    .option(
+      '--ignore-packages <packages>',
+      'Packages to ignore, comma separated',
+    )
+    .option(
+      '--ignore-matches <matches>',
+      'Dependency patterns to ignore, comma separated',
+    )
+    .option(
+      '--ignore-patterns <patterns>',
+      'File patterns to ignore, comma separated',
+    )
+    .usage('Analyze project dependencies')
+    .action(async ({ ignoreMatches, ignorePackages, ignorePatterns }) => {
+      const config: DepcheckConfig = {
+        ...(ignorePackages && { ignorePackages: ignorePackages.split(',') }),
+        ...(ignoreMatches && { ignoreMatches: ignoreMatches.split(',') }),
+        ...(ignorePatterns && { ignorePatterns: ignorePatterns.split(',') }),
+      };
+
+      await runDepcheck(config);
     });
 }
 
-export { defineDepcheckCommand };
+export { defineDepcheckCommand, type DepcheckConfig };
diff --git a/apps/vben5/scripts/vsh/src/index.ts b/apps/vben5/scripts/vsh/src/index.ts
index 2b00448c3..4943425ff 100644
--- a/apps/vben5/scripts/vsh/src/index.ts
+++ b/apps/vben5/scripts/vsh/src/index.ts
@@ -2,40 +2,73 @@ import { colors, consola } from '@vben/node-utils';
 
 import { cac } from 'cac';
 
+import { version } from '../package.json';
 import { defineCheckCircularCommand } from './check-circular';
 import { defineDepcheckCommand } from './check-dep';
 import { defineCodeWorkspaceCommand } from './code-workspace';
 import { defineLintCommand } from './lint';
 import { definePubLintCommand } from './publint';
 
-try {
-  const vsh = cac('vsh');
+// 命令描述
+const COMMAND_DESCRIPTIONS = {
+  'check-circular': 'Check for circular dependencies',
+  'check-dep': 'Check for unused dependencies',
+  'code-workspace': 'Manage VS Code workspace settings',
+  lint: 'Run linting on the project',
+  publint: 'Check package.json files for publishing standards',
+} as const;
 
-  // vsh lint
-  defineLintCommand(vsh);
+/**
+ * Initialize and run the CLI
+ */
+async function main(): Promise<void> {
+  try {
+    const vsh = cac('vsh');
 
-  // vsh publint
-  definePubLintCommand(vsh);
+    // Register commands
+    defineLintCommand(vsh);
+    definePubLintCommand(vsh);
+    defineCodeWorkspaceCommand(vsh);
+    defineCheckCircularCommand(vsh);
+    defineDepcheckCommand(vsh);
 
-  // vsh code-workspace
-  defineCodeWorkspaceCommand(vsh);
+    // Handle invalid commands
+    vsh.on('command:*', ([cmd]) => {
+      consola.error(
+        colors.red(`Invalid command: ${cmd}`),
+        '\n',
+        colors.yellow('Available commands:'),
+        '\n',
+        Object.entries(COMMAND_DESCRIPTIONS)
+          .map(([cmd, desc]) => `  ${colors.cyan(cmd)} - ${desc}`)
+          .join('\n'),
+      );
+      process.exit(1);
+    });
 
-  // vsh check-circular
-  defineCheckCircularCommand(vsh);
+    // Set up CLI
+    vsh.usage('vsh <command> [options]');
+    vsh.help();
+    vsh.version(version);
 
-  // vsh check-dep
-  defineDepcheckCommand(vsh);
-
-  // Invalid command
-  vsh.on('command:*', () => {
-    consola.error(colors.red('Invalid command!'));
+    // Parse arguments
+    vsh.parse();
+  } catch (error) {
+    consola.error(
+      colors.red('An unexpected error occurred:'),
+      '\n',
+      error instanceof Error ? error.message : error,
+    );
     process.exit(1);
-  });
+  }
+}
 
-  vsh.usage('vsh');
-  vsh.help();
-  vsh.parse();
-} catch (error) {
-  consola.error(error);
+// Run the CLI
+main().catch((error) => {
+  consola.error(
+    colors.red('Failed to start CLI:'),
+    '\n',
+    error instanceof Error ? error.message : error,
+  );
   process.exit(1);
-}
+});
diff --git a/apps/vben5/scripts/vsh/src/lint/index.ts b/apps/vben5/scripts/vsh/src/lint/index.ts
index 5d381e819..b95ead6ac 100644
--- a/apps/vben5/scripts/vsh/src/lint/index.ts
+++ b/apps/vben5/scripts/vsh/src/lint/index.ts
@@ -13,7 +13,7 @@ async function runLint({ format }: LintCommandOptions) {
   // process.env.FORCE_COLOR = '3';
 
   if (format) {
-    await execaCommand(`stylelint "**/*.{vue,css,less.scss}" --cache --fix`, {
+    await execaCommand(`stylelint "**/*.{vue,css,less,scss}" --cache --fix`, {
       stdio: 'inherit',
     });
     await execaCommand(`eslint . --cache --fix`, {
@@ -31,7 +31,7 @@ async function runLint({ format }: LintCommandOptions) {
     execaCommand(`prettier . --ignore-unknown --check --cache`, {
       stdio: 'inherit',
     }),
-    execaCommand(`stylelint "**/*.{vue,css,less.scss}" --cache`, {
+    execaCommand(`stylelint "**/*.{vue,css,less,scss}" --cache`, {
       stdio: 'inherit',
     }),
   ]);