init

2025-06-29 21:45:27 +08:00
commit f6e68e37c8
1539 changed files with 129319 additions and 0 deletions
--- a/web/.browserslistrc
+++ b/web/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/web/.commitlintrc.js
+++ b/web/.commitlintrc.js
@@ -0,0 +1 @@
+export { default } from '@vben/commitlint-config';
--- a/web/.dockerignore
+++ b/web/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+.git
+.gitignore
+*.md
+dist
+.turbo
+dist.zip
--- a/web/.editorconfig
+++ b/web/.editorconfig
@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+indent_style=space
+indent_size=2
+max_line_length = 100
+trim_trailing_whitespace = true
+quote_type = single
+
+[*.{yml,yaml,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
--- a/web/.node-version
+++ b/web/.node-version
@@ -0,0 +1 @@
+22.1.0
--- a/web/.npmrc
+++ b/web/.npmrc
@@ -0,0 +1,13 @@
+registry = "https://registry.npmmirror.com"
+public-hoist-pattern[]=lefthook
+public-hoist-pattern[]=eslint
+public-hoist-pattern[]=prettier
+public-hoist-pattern[]=prettier-plugin-tailwindcss
+public-hoist-pattern[]=stylelint
+public-hoist-pattern[]=*postcss*
+public-hoist-pattern[]=@commitlint/*
+public-hoist-pattern[]=czg
+
+strict-peer-dependencies=false
+auto-install-peers=true
+dedupe-peer-dependents=true
--- a/web/.prettierignore
+++ b/web/.prettierignore
@@ -0,0 +1,18 @@
+dist
+dev-dist
+.local
+.output.js
+node_modules
+.nvmrc
+coverage
+CODEOWNERS
+.nitro
+.output
+
+
+**/*.svg
+**/*.sh
+
+public
+.npmrc
+*-lock.yaml
--- a/web/.prettierrc.mjs
+++ b/web/.prettierrc.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/prettier-config';
--- a/web/.stylelintignore
+++ b/web/.stylelintignore
@@ -0,0 +1,4 @@
+dist
+public
+__tests__
+coverage
--- a/web/LICENSE
+++ b/web/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024-present, Vben
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/web/README.ja-JP.md
+++ b/web/README.ja-JP.md
@@ -0,0 +1,153 @@
+<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>
+</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)
+
+**日本語** | [English](./README.md) | [中文](./README.zh-CN.md)
+
+## 紹介
+
+Vue Vben Adminは、最新の`vue3`、`vite`、`TypeScript`などの主流技術を使用して開発された、無料でオープンソースの中・後端テンプレートです。すぐに使える中・後端のフロントエンドソリューションとして、学習の参考にもなります。
+
+## アップグレード通知
+
+これは最新バージョン `5.0` であり、以前のバージョンとは互換性がありません。新しいプロジェクトを開始する場合は、最新バージョンを使用することをお勧めします。古いバージョンを表示したい場合は、[v2ブランチ](https://github.com/vbenjs/vue-vben-admin/tree/v2)を使用してください。
+
+## 特徴
+
+- **最新技術スタック**：Vue 3やViteなどの最先端フロントエンド技術で開発
+- **TypeScript**：アプリケーション規模のJavaScriptのための言語
+- **テーマ**：複数のテーマカラーが利用可能で、カスタマイズオプションも豊富
+- **国際化**：完全な内蔵国際化サポート
+- **権限管理**：動的ルートベースの権限生成ソリューションを内蔵
+
+## プレビュー
+
+- [Vben Admin](https://vben.pro/) - フルバージョンの中国語サイト
+
+テストアカウント：vben/123456
+
+<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用の無料オンライン開発環境）でプロジェクトを開き、すぐにコーディングを開始します。
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
+
+## ドキュメント
+
+[ドキュメント](https://doc.vben.pro/)
+
+## インストールと使用
+
+1. プロジェクトコードを取得
+
+```bash
+git clone https://github.com/vbenjs/vue-vben-admin.git
+```
+
+2. 依存関係のインストール
+
+```bash
+cd vue-vben-admin
+npm i -g corepack
+pnpm install
+```
+
+3. 実行
+
+```bash
+pnpm dev
+```
+
+4. ビルド
+
+```bash
+pnpm build
+```
+
+## 変更ログ
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
+## 貢献方法
+
+ご参加をお待ちしております！[Issueを提出](https://github.com/anncwb/vue-vben-admin/issues/new/choose)するか、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`
+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` 型定義ファイルの変更
+
+## ブラウザサポート
+
+ローカル開発には `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>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バージョン |
+
+## メンテナー
+
+[@Vben](https://github.com/anncwb)
+
+## スター歴史
+
+[![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>
+
+## 貢献者
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <img alt="Contributors" src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+</a>
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## ライセンス
+
+[MIT © Vben-2020](./LICENSE)
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,153 @@
+<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>
+</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)
+
+**English** | [中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
+
+## Introduction
+
+Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
+
+## Upgrade Notice
+
+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).
+
+## Features
+
+- **Latest Technology Stack**: Developed with cutting-edge front-end technologies like Vue 3 and Vite
+- **TypeScript**: A language for application-scale JavaScript
+- **Themes**: Multiple theme colors available with customizable options
+- **Internationalization**: Comprehensive built-in internationalization support
+- **Permissions**: Built-in solution for dynamic route-based permission generation
+
+## Preview
+
+- [Vben Admin](https://vben.pro/) - Full version Chinese site
+
+Test Account: vben/123456
+
+<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
+
+Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
+
+## Documentation
+
+[Document](https://doc.vben.pro/)
+
+## Install and Use
+
+1. Get the project code
+
+```bash
+git clone https://github.com/vbenjs/vue-vben-admin.git
+```
+
+2. Install dependencies
+
+```bash
+cd vue-vben-admin
+npm i -g corepack
+pnpm install
+```
+
+3. Run
+
+```bash
+pnpm dev
+```
+
+4. Build
+
+```bash
+pnpm build
+```
+
+## Change Log
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
+## 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.
+
+**Pull Request Process:**
+
+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`
+
+## 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))
+
+- `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
+
+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>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
+
+[@Vben](https://github.com/anncwb)
+
+## Star History
+
+[![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
+
+If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
+
+![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: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
+
+## Contributors
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <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)
--- a/web/README.zh-CN.md
+++ b/web/README.zh-CN.md
@@ -0,0 +1,153 @@
+<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>
+</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)
+
+**中文** | [English](./README.md) | [日本語](./README.ja-JP.md)
+
+## 简介
+
+Vue Vben Admin 是 Vue Vben Admin 的升级版本。作为一个免费开源的中后台模板，它采用了最新的 Vue 3、Vite、TypeScript 等主流技术开发，开箱即用，可用于中后台前端开发，也适合学习参考。
+
+## 升级提示
+
+该版本为最新版本 `5.0`，与其他版本不兼容，如果你是新项目，建议使用最新版本。如果你想查看旧版本，请使用 [v2 分支](https://github.com/vbenjs/vue-vben-admin/tree/v2)
+
+## 特性
+
+- **最新技术栈**：使用 Vue3/vite 等前端前沿技术开发
+- **TypeScript**：应用程序级 JavaScript 的语言
+- **主题**：提供多套主题色彩，可配置自定义主题
+- **国际化**：内置完善的国际化方案
+- **权限**：内置完善的动态路由权限生成方案
+
+## 预览
+
+- [Vben Admin](https://vben.pro/) - 完整版中文站点
+
+测试账号：vben/123456
+
+<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 的免费在线开发环境）中打开项目，并立即开始编码。
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
+
+## 文档
+
+[文档地址](https://doc.vben.pro/)
+
+## 安装使用
+
+1. 获取项目代码
+
+```bash
+git clone https://github.com/vbenjs/vue-vben-admin.git
+```
+
+2. 安装依赖
+
+```bash
+cd vue-vben-admin
+npm i -g corepack
+pnpm install
+```
+
+3. 运行
+
+```bash
+pnpm dev
+```
+
+4. 打包
+
+```bash
+pnpm build
+```
+
+## 更新日志
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
+## 如何贡献
+
+非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 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`
+
+## 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` 类型定义文件更改
+
+## 浏览器支持
+
+本地开发推荐使用 `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>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 历史
+
+[![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>
+
+## 贡献者
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <img alt="Contributors" src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+</a>
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## 许可证
+
+[MIT © Vben-2020](./LICENSE)
--- a/web/apps/backend-mock/README.md
+++ b/web/apps/backend-mock/README.md
@@ -0,0 +1,15 @@
+# @vben/backend-mock
+
+## Description
+
+Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供 mock 集成，可自行部署服务或者对接真实数据，由于 `mock.js` 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。该服务不需要手动启动，已经集成在 vite 插件内，随应用一起启用。
+
+## Running the app
+
+```bash
+# development
+$ pnpm run start
+
+# production mode
+$ pnpm run build
+```
--- a/web/apps/backend-mock/api/auth/codes.ts
+++ b/web/apps/backend-mock/api/auth/codes.ts
@@ -0,0 +1,14 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const codes =
+    MOCK_CODES.find((item) => item.username === userinfo.username)?.codes ?? [];
+
+  return useResponseSuccess(codes);
+});
--- a/web/apps/backend-mock/api/auth/login.post.ts
+++ b/web/apps/backend-mock/api/auth/login.post.ts
@@ -0,0 +1,36 @@
+import {
+  clearRefreshTokenCookie,
+  setRefreshTokenCookie,
+} from '~/utils/cookie-utils';
+import { generateAccessToken, generateRefreshToken } from '~/utils/jwt-utils';
+import { forbiddenResponse } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+  const { password, username } = await readBody(event);
+  if (!password || !username) {
+    setResponseStatus(event, 400);
+    return useResponseError(
+      'BadRequestException',
+      'Username and password are required',
+    );
+  }
+
+  const findUser = MOCK_USERS.find(
+    (item) => item.username === username && item.password === password,
+  );
+
+  if (!findUser) {
+    clearRefreshTokenCookie(event);
+    return forbiddenResponse(event, 'Username or password is incorrect.');
+  }
+
+  const accessToken = generateAccessToken(findUser);
+  const refreshToken = generateRefreshToken(findUser);
+
+  setRefreshTokenCookie(event, refreshToken);
+
+  return useResponseSuccess({
+    ...findUser,
+    accessToken,
+  });
+});
--- a/web/apps/backend-mock/api/auth/logout.post.ts
+++ b/web/apps/backend-mock/api/auth/logout.post.ts
@@ -0,0 +1,15 @@
+import {
+  clearRefreshTokenCookie,
+  getRefreshTokenFromCookie,
+} from '~/utils/cookie-utils';
+
+export default defineEventHandler(async (event) => {
+  const refreshToken = getRefreshTokenFromCookie(event);
+  if (!refreshToken) {
+    return useResponseSuccess('');
+  }
+
+  clearRefreshTokenCookie(event);
+
+  return useResponseSuccess('');
+});
--- a/web/apps/backend-mock/api/auth/refresh.post.ts
+++ b/web/apps/backend-mock/api/auth/refresh.post.ts
@@ -0,0 +1,33 @@
+import {
+  clearRefreshTokenCookie,
+  getRefreshTokenFromCookie,
+  setRefreshTokenCookie,
+} from '~/utils/cookie-utils';
+import { verifyRefreshToken } from '~/utils/jwt-utils';
+import { forbiddenResponse } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+  const refreshToken = getRefreshTokenFromCookie(event);
+  if (!refreshToken) {
+    return forbiddenResponse(event);
+  }
+
+  clearRefreshTokenCookie(event);
+
+  const userinfo = verifyRefreshToken(refreshToken);
+  if (!userinfo) {
+    return forbiddenResponse(event);
+  }
+
+  const findUser = MOCK_USERS.find(
+    (item) => item.username === userinfo.username,
+  );
+  if (!findUser) {
+    return forbiddenResponse(event);
+  }
+  const accessToken = generateAccessToken(findUser);
+
+  setRefreshTokenCookie(event, refreshToken);
+
+  return accessToken;
+});
--- a/web/apps/backend-mock/api/demo/bigint.ts
+++ b/web/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;
+});
--- a/web/apps/backend-mock/api/menu/all.ts
+++ b/web/apps/backend-mock/api/menu/all.ts
@@ -0,0 +1,13 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const menus =
+    MOCK_MENUS.find((item) => item.username === userinfo.username)?.menus ?? [];
+  return useResponseSuccess(menus);
+});
--- a/web/apps/backend-mock/api/status.ts
+++ b/web/apps/backend-mock/api/status.ts
@@ -0,0 +1,5 @@
+export default eventHandler((event) => {
+  const { status } = getQuery(event);
+  setResponseStatus(event, Number(status));
+  return useResponseError(`${status}`);
+});
--- a/web/apps/backend-mock/api/system/dept/.post.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/dept/[id].delete.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/dept/[id].put.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/dept/list.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/menu/list.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/menu/name-exists.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/menu/path-exists.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/system/role/list.ts
+++ b/web/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);
+});
--- a/web/apps/backend-mock/api/table/list.ts
+++ b/web/apps/backend-mock/api/table/list.ts
@@ -0,0 +1,73 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem = {
+      id: faker.string.uuid(),
+      imageUrl: faker.image.avatar(),
+      imageUrl2: faker.image.avatar(),
+      open: faker.datatype.boolean(),
+      status: faker.helpers.arrayElement(['success', 'error', 'warning']),
+      productName: faker.commerce.productName(),
+      price: faker.commerce.price(),
+      currency: faker.finance.currencyCode(),
+      quantity: faker.number.int({ min: 1, max: 100 }),
+      available: faker.datatype.boolean(),
+      category: faker.commerce.department(),
+      releaseDate: faker.date.past(),
+      rating: faker.number.float({ min: 1, max: 5 }),
+      description: faker.commerce.productDescription(),
+      weight: faker.number.float({ min: 0.1, max: 10 }),
+      color: faker.color.human(),
+      inProduction: faker.datatype.boolean(),
+      tags: Array.from({ length: 3 }, () => faker.commerce.productAdjective()),
+    };
+
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(100);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  await sleep(600);
+
+  const { page, pageSize, sortBy, sortOrder } = getQuery(event);
+  const listData = structuredClone(mockData);
+  if (sortBy && Reflect.has(listData[0], sortBy as string)) {
+    listData.sort((a, b) => {
+      if (sortOrder === 'asc') {
+        if (sortBy === 'price') {
+          return (
+            Number.parseFloat(a[sortBy as string]) -
+            Number.parseFloat(b[sortBy as string])
+          );
+        } else {
+          return a[sortBy as string] > b[sortBy as string] ? 1 : -1;
+        }
+      } else {
+        if (sortBy === 'price') {
+          return (
+            Number.parseFloat(b[sortBy as string]) -
+            Number.parseFloat(a[sortBy as string])
+          );
+        } else {
+          return a[sortBy as string] < b[sortBy as string] ? 1 : -1;
+        }
+      }
+    });
+  }
+
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
+});
--- a/web/apps/backend-mock/api/test.get.ts
+++ b/web/apps/backend-mock/api/test.get.ts
@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Test get handler');
--- a/web/apps/backend-mock/api/test.post.ts
+++ b/web/apps/backend-mock/api/test.post.ts
@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Test post handler');
--- a/web/apps/backend-mock/api/upload.ts
+++ b/web/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")
+});
--- a/web/apps/backend-mock/api/user/info.ts
+++ b/web/apps/backend-mock/api/user/info.ts
@@ -0,0 +1,10 @@
+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(userinfo);
+});
--- a/web/apps/backend-mock/error.ts
+++ b/web/apps/backend-mock/error.ts
@@ -0,0 +1,7 @@
+import type { NitroErrorHandler } from 'nitropack';
+
+const errorHandler: NitroErrorHandler = function (error, event) {
+  event.node.res.end(`[Error Handler] ${error.stack}`);
+};
+
+export default errorHandler;
--- a/web/apps/backend-mock/middleware/1.api.ts
+++ b/web/apps/backend-mock/middleware/1.api.ts
@@ -0,0 +1,19 @@
+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, '演示环境，禁止修改');
+  }
+});
--- a/web/apps/backend-mock/nitro.config.ts
+++ b/web/apps/backend-mock/nitro.config.ts
@@ -0,0 +1,20 @@
+import errorHandler from './error';
+
+process.env.COMPATIBILITY_DATE = new Date().toISOString();
+export default defineNitroConfig({
+  devErrorHandler: errorHandler,
+  errorHandler: '~/error',
+  routeRules: {
+    '/api/**': {
+      cors: true,
+      headers: {
+        'Access-Control-Allow-Credentials': 'true',
+        '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': '*',
+      },
+    },
+  },
+});
--- a/web/apps/backend-mock/package.json
+++ b/web/apps/backend-mock/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@vben/backend-mock",
+  "version": "0.0.1",
+  "description": "",
+  "private": true,
+  "license": "MIT",
+  "author": "",
+  "scripts": {
+    "build": "nitro build",
+    "start": "nitro dev"
+  },
+  "dependencies": {
+    "@faker-js/faker": "catalog:",
+    "jsonwebtoken": "catalog:",
+    "nitropack": "catalog:"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "catalog:",
+    "h3": "catalog:"
+  }
+}
--- a/web/apps/backend-mock/routes/[...].ts
+++ b/web/apps/backend-mock/routes/[...].ts
@@ -0,0 +1,13 @@
+export default defineEventHandler(() => {
+  return `
+<h1>Hello Vben Admin</h1>
+<h2>Mock service is starting</h2>
+<ul>
+<li><a href="/api/user">/api/user/info</a></li>
+<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>
+`;
+});
--- a/web/apps/backend-mock/tsconfig.build.json
+++ b/web/apps/backend-mock/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}
--- a/web/apps/backend-mock/tsconfig.json
+++ b/web/apps/backend-mock/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nitro/types/tsconfig.json"
+}
--- a/web/apps/backend-mock/utils/cookie-utils.ts
+++ b/web/apps/backend-mock/utils/cookie-utils.ts
@@ -0,0 +1,26 @@
+import type { EventHandlerRequest, H3Event } from 'h3';
+
+export function clearRefreshTokenCookie(event: H3Event<EventHandlerRequest>) {
+  deleteCookie(event, 'jwt', {
+    httpOnly: true,
+    sameSite: 'none',
+    secure: true,
+  });
+}
+
+export function setRefreshTokenCookie(
+  event: H3Event<EventHandlerRequest>,
+  refreshToken: string,
+) {
+  setCookie(event, 'jwt', refreshToken, {
+    httpOnly: true,
+    maxAge: 24 * 60 * 60, // unit: seconds
+    sameSite: 'none',
+    secure: true,
+  });
+}
+
+export function getRefreshTokenFromCookie(event: H3Event<EventHandlerRequest>) {
+  const refreshToken = getCookie(event, 'jwt');
+  return refreshToken;
+}
--- a/web/apps/backend-mock/utils/jwt-utils.ts
+++ b/web/apps/backend-mock/utils/jwt-utils.ts
@@ -0,0 +1,59 @@
+import type { EventHandlerRequest, H3Event } from 'h3';
+
+import jwt from 'jsonwebtoken';
+
+import { UserInfo } from './mock-data';
+
+// TODO: Replace with your own secret key
+const ACCESS_TOKEN_SECRET = 'access_token_secret';
+const REFRESH_TOKEN_SECRET = 'refresh_token_secret';
+
+export interface UserPayload extends UserInfo {
+  iat: number;
+  exp: number;
+}
+
+export function generateAccessToken(user: UserInfo) {
+  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '7d' });
+}
+
+export function generateRefreshToken(user: UserInfo) {
+  return jwt.sign(user, REFRESH_TOKEN_SECRET, {
+    expiresIn: '30d',
+  });
+}
+
+export function verifyAccessToken(
+  event: H3Event<EventHandlerRequest>,
+): null | Omit<UserInfo, 'password'> {
+  const authHeader = getHeader(event, 'Authorization');
+  if (!authHeader?.startsWith('Bearer')) {
+    return null;
+  }
+
+  const token = authHeader.split(' ')[1];
+  try {
+    const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET) as UserPayload;
+
+    const username = decoded.username;
+    const user = MOCK_USERS.find((item) => item.username === username);
+    const { password: _pwd, ...userinfo } = user;
+    return userinfo;
+  } catch {
+    return null;
+  }
+}
+
+export function verifyRefreshToken(
+  token: string,
+): null | Omit<UserInfo, 'password'> {
+  try {
+    const decoded = jwt.verify(token, REFRESH_TOKEN_SECRET) as UserPayload;
+    const username = decoded.username;
+    const user = MOCK_USERS.find((item) => item.username === username);
+    const { password: _pwd, ...userinfo } = user;
+    return userinfo;
+  } catch {
+    return null;
+  }
+}
--- a/web/apps/backend-mock/utils/mock-data.ts
+++ b/web/apps/backend-mock/utils/mock-data.ts
@@ -0,0 +1,390 @@
+export interface UserInfo {
+  id: number;
+  password: string;
+  realName: string;
+  roles: string[];
+  username: string;
+  homePath?: string;
+}
+
+export const MOCK_USERS: UserInfo[] = [
+  {
+    id: 0,
+    password: '123456',
+    realName: 'Vben',
+    roles: ['super'],
+    username: 'vben',
+  },
+  {
+    id: 1,
+    password: '123456',
+    realName: 'Admin',
+    roles: ['admin'],
+    username: 'admin',
+    homePath: '/workspace',
+  },
+  {
+    id: 2,
+    password: '123456',
+    realName: 'Jack',
+    roles: ['user'],
+    username: 'jack',
+    homePath: '/analytics',
+  },
+];
+
+export const MOCK_CODES = [
+  // super
+  {
+    codes: ['AC_100100', 'AC_100110', 'AC_100120', 'AC_100010'],
+    username: 'vben',
+  },
+  {
+    // admin
+    codes: ['AC_100010', 'AC_100020', 'AC_100030'],
+    username: 'admin',
+  },
+  {
+    // user
+    codes: ['AC_1000001', 'AC_1000002'],
+    username: 'jack',
+  },
+];
+
+const dashboardMenus = [
+  {
+    meta: {
+      order: -1,
+      title: 'page.dashboard.title',
+    },
+    name: 'Dashboard',
+    path: '/dashboard',
+    redirect: '/analytics',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: '/dashboard/analytics/index',
+        meta: {
+          affixTab: true,
+          title: 'page.dashboard.analytics',
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: '/dashboard/workspace/index',
+        meta: {
+          title: 'page.dashboard.workspace',
+        },
+      },
+    ],
+  },
+];
+
+const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
+  const roleWithMenus = {
+    admin: {
+      component: '/demos/access/admin-visible',
+      meta: {
+        icon: 'mdi:button-cursor',
+        title: 'demos.access.adminVisible',
+      },
+      name: 'AccessAdminVisibleDemo',
+      path: '/demos/access/admin-visible',
+    },
+    super: {
+      component: '/demos/access/super-visible',
+      meta: {
+        icon: 'mdi:button-cursor',
+        title: 'demos.access.superVisible',
+      },
+      name: 'AccessSuperVisibleDemo',
+      path: '/demos/access/super-visible',
+    },
+    user: {
+      component: '/demos/access/user-visible',
+      meta: {
+        icon: 'mdi:button-cursor',
+        title: 'demos.access.userVisible',
+      },
+      name: 'AccessUserVisibleDemo',
+      path: '/demos/access/user-visible',
+    },
+  };
+
+  return [
+    {
+      meta: {
+        icon: 'ic:baseline-view-in-ar',
+        keepAlive: true,
+        order: 1000,
+        title: 'demos.title',
+      },
+      name: 'Demos',
+      path: '/demos',
+      redirect: '/demos/access',
+      children: [
+        {
+          name: 'AccessDemos',
+          path: '/demosaccess',
+          meta: {
+            icon: 'mdi:cloud-key-outline',
+            title: 'demos.access.backendPermissions',
+          },
+          redirect: '/demos/access/page-control',
+          children: [
+            {
+              name: 'AccessPageControlDemo',
+              path: '/demos/access/page-control',
+              component: '/demos/access/index',
+              meta: {
+                icon: 'mdi:page-previous-outline',
+                title: 'demos.access.pageAccess',
+              },
+            },
+            {
+              name: 'AccessButtonControlDemo',
+              path: '/demos/access/button-control',
+              component: '/demos/access/button-control',
+              meta: {
+                icon: 'mdi:button-cursor',
+                title: 'demos.access.buttonControl',
+              },
+            },
+            {
+              name: 'AccessMenuVisible403Demo',
+              path: '/demos/access/menu-visible-403',
+              component: '/demos/access/menu-visible-403',
+              meta: {
+                authority: ['no-body'],
+                icon: 'mdi:button-cursor',
+                menuVisibleWithForbidden: true,
+                title: 'demos.access.menuVisible403',
+              },
+            },
+            roleWithMenus[role],
+          ],
+        },
+      ],
+    },
+  ];
+};
+
+export const MOCK_MENUS = [
+  {
+    menus: [...dashboardMenus, ...createDemosMenus('super')],
+    username: 'vben',
+  },
+  {
+    menus: [...dashboardMenus, ...createDemosMenus('admin')],
+    username: 'admin',
+  },
+  {
+    menus: [...dashboardMenus, ...createDemosMenus('user')],
+    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;
+}
--- a/web/apps/backend-mock/utils/response.ts
+++ b/web/apps/backend-mock/utils/response.ts
@@ -0,0 +1,68 @@
+import type { EventHandlerRequest, H3Event } from 'h3';
+
+export function useResponseSuccess<T = any>(data: T) {
+  return {
+    code: 0,
+    data,
+    error: null,
+    message: 'ok',
+  };
+}
+
+export function usePageResponseSuccess<T = any>(
+  page: number | string,
+  pageSize: number | string,
+  list: T[],
+  { message = 'ok' } = {},
+) {
+  const pageData = pagination(
+    Number.parseInt(`${page}`),
+    Number.parseInt(`${pageSize}`),
+    list,
+  );
+
+  return {
+    ...useResponseSuccess({
+      items: pageData,
+      total: list.length,
+    }),
+    message,
+  };
+}
+
+export function useResponseError(message: string, error: any = null) {
+  return {
+    code: -1,
+    data: null,
+    error,
+    message,
+  };
+}
+
+export function forbiddenResponse(
+  event: H3Event<EventHandlerRequest>,
+  message = 'Forbidden Exception',
+) {
+  setResponseStatus(event, 403);
+  return useResponseError(message, message);
+}
+
+export function unAuthorizedResponse(event: H3Event<EventHandlerRequest>) {
+  setResponseStatus(event, 401);
+  return useResponseError('Unauthorized Exception', 'Unauthorized Exception');
+}
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function pagination<T = any>(
+  pageNo: number,
+  pageSize: number,
+  array: T[],
+): T[] {
+  const offset = (pageNo - 1) * Number(pageSize);
+  return offset + Number(pageSize) >= array.length
+    ? array.slice(offset)
+    : array.slice(offset, offset + Number(pageSize));
+}
--- a/web/apps/web-antd/.env.analyze
+++ b/web/apps/web-antd/.env.analyze
@@ -0,0 +1,7 @@
+# public path
+VITE_BASE=/
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+VITE_VISUALIZER=true
--- a/web/apps/web-antd/.env.development
+++ b/web/apps/web-antd/.env.development
@@ -0,0 +1,16 @@
+# 端口号
+VITE_PORT=5678
+
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=http://127.0.0.1:8000/api
+
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=false
+
+# 是否打开 devtools，true 为打开，false 为关闭
+VITE_DEVTOOLS=false
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
--- a/web/apps/web-antd/.env.production
+++ b/web/apps/web-antd/.env.production
@@ -0,0 +1,19 @@
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=http://127.0.0.1:8000/api
+
+# 是否开启压缩，可以设置为 none, brotli, gzip
+VITE_COMPRESS=gzip
+
+# 是否开启 PWA
+VITE_PWA=false
+
+# vue-router 的模式
+VITE_ROUTER_HISTORY=hash
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
--- a/web/apps/web-antd/index.html
+++ b/web/apps/web-antd/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="description" content="A Modern Back-end Management System" />
+    <meta name="keywords" content="Vben Admin Vue3 Vite" />
+    <meta name="author" content="Vben" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
+    <title><%= VITE_APP_TITLE %></title>
+    <link rel="icon" href="/favicon.ico" />
+    <script>
+      // 生产环境下注入百度统计
+      if (window._VBEN_ADMIN_PRO_APP_CONF_) {
+        var _hmt = _hmt || [];
+        (function () {
+          var hm = document.createElement('script');
+          hm.src =
+            'https://hm.baidu.com/hm.js?b38e689f40558f20a9a686d7f6f33edf';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(hm, s);
+        })();
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/web/apps/web-antd/package.json
+++ b/web/apps/web-antd/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@vben/web-antd",
+  "version": "5.5.7",
+  "homepage": "https://vben.pro",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "apps/web-antd"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "vben",
+    "email": "ann.vben@gmail.com",
+    "url": "https://github.com/anncwb"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build --mode production",
+    "build:analyze": "pnpm vite build --mode analyze",
+    "dev": "pnpm vite --mode development",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+  },
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "dependencies": {
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "@vben-core/menu-ui": "workspace:*",
+    "ant-design-vue": "catalog:",
+    "dayjs": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  }
+}
--- a/web/apps/web-antd/postcss.config.mjs
+++ b/web/apps/web-antd/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
--- a/web/apps/web-antd/public/favicon.ico
+++ b/web/apps/web-antd/public/favicon.ico
--- a/web/apps/web-antd/src/adapter/component/index.ts
+++ b/web/apps/web-antd/src/adapter/component/index.ts
@@ -0,0 +1,218 @@
+/**
+ * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
+ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
+ */
+
+import type { Component } from 'vue';
+
+import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
+
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+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 defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      const publicApi: Recordable<any> = {};
+      expose(publicApi);
+      const instance = getCurrentInstance();
+      instance?.proxy?.$nextTick(() => {
+        for (const key in innerRef.value) {
+          if (typeof innerRef.value[key] === 'function') {
+            publicApi[key] = innerRef.value[key];
+          }
+        }
+      });
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
+};
+
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
+  | 'AutoComplete'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'DefaultButton'
+  | 'Divider'
+  | 'IconPicker'
+  | 'Input'
+  | 'InputNumber'
+  | 'InputPassword'
+  | 'Mentions'
+  | 'PrimaryButton'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'Textarea'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+async function initComponentAdapter() {
+  const components: Partial<Record<ComponentType, Component>> = {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
+    AutoComplete,
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 自定义默认按钮
+    DefaultButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'default' }, slots);
+    },
+    Divider,
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
+    Input: withDefaultPlaceholder(Input, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
+    Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    // 自定义主要按钮
+    PrimaryButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    Select: withDefaultPlaceholder(Select, 'select'),
+    Space,
+    Switch,
+    Textarea: withDefaultPlaceholder(Textarea, 'input'),
+    TimePicker,
+    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    Upload,
+  };
+
+  // 将组件注册到全局共享状态中
+  globalShareState.setComponents(components);
+
+  // 定义全局共享状态中的消息提示
+  globalShareState.defineMessage({
+    // 复制成功消息提示
+    copyPreferencesSuccess: (title, content) => {
+      notification.success({
+        description: content,
+        message: title,
+        placement: 'bottomRight',
+      });
+    },
+  });
+}
+
+export { initComponentAdapter };
--- a/web/apps/web-antd/src/adapter/form.ts
+++ b/web/apps/web-antd/src/adapter/form.ts
@@ -0,0 +1,49 @@
+import type {
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import type { ComponentType } from './component';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+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;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+    },
+  });
+}
+
+const useVbenForm = useForm<ComponentType>;
+
+export { initSetupVbenForm, useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<ComponentType>;
+export type { VbenFormProps };
--- a/web/apps/web-antd/src/adapter/vxe-table.ts
+++ b/web/apps/web-antd/src/adapter/vxe-table.ts
@@ -0,0 +1,75 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      } as VxeTableGridOptions,
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(Image, { src: row[column.field] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          Button,
+          { size: 'small', type: 'link' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+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';
--- a/web/apps/web-antd/src/api/core/auth.ts
+++ b/web/apps/web-antd/src/api/core/auth.ts
@@ -0,0 +1,51 @@
+import { baseRequestClient, requestClient } from '#/api/request';
+
+export namespace AuthApi {
+  /** 登录接口参数 */
+  export interface LoginParams {
+    password?: string;
+    username?: string;
+  }
+
+  /** 登录接口返回值 */
+  export interface LoginResult {
+    accessToken: string;
+  }
+
+  export interface RefreshTokenResult {
+    data: string;
+    status: number;
+  }
+}
+
+/**
+ * 登录
+ */
+export async function loginApi(data: AuthApi.LoginParams) {
+  return requestClient.post<AuthApi.LoginResult>('/system/login/', data);
+}
+
+/**
+ * 刷新accessToken
+ */
+export async function refreshTokenApi() {
+  return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
+    withCredentials: true,
+  });
+}
+
+/**
+ * 退出登录
+ */
+export async function logoutApi() {
+  return baseRequestClient.post('/system/logout/', {
+    withCredentials: true,
+  });
+}
+
+/**
+ * 获取用户权限码
+ */
+export async function getAccessCodesApi() {
+  return requestClient.get<string[]>('/system/codes/');
+}
--- a/web/apps/web-antd/src/api/core/index.ts
+++ b/web/apps/web-antd/src/api/core/index.ts
@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './menu';
+export * from './user';
--- a/web/apps/web-antd/src/api/core/menu.ts
+++ b/web/apps/web-antd/src/api/core/menu.ts
@@ -0,0 +1,10 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取用户所有菜单
+ */
+export async function getAllMenusApi() {
+  return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
+}
--- a/web/apps/web-antd/src/api/core/user.ts
+++ b/web/apps/web-antd/src/api/core/user.ts
@@ -0,0 +1,10 @@
+import type { UserInfo } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取用户信息
+ */
+export async function getUserInfoApi() {
+  return requestClient.get<UserInfo>('/system/info/');
+}
--- a/web/apps/web-antd/src/api/index.ts
+++ b/web/apps/web-antd/src/api/index.ts
@@ -0,0 +1 @@
+export * from './core';
--- a/web/apps/web-antd/src/api/request.ts
+++ b/web/apps/web-antd/src/api/request.ts
@@ -0,0 +1,113 @@
+/**
+ * 该文件可自行根据业务逻辑进行调整
+ */
+import type { RequestClientOptions } from '@vben/request';
+
+import { useAppConfig } from '@vben/hooks';
+import { preferences } from '@vben/preferences';
+import {
+  authenticateResponseInterceptor,
+  defaultResponseInterceptor,
+  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, options?: RequestClientOptions) {
+  const client = new RequestClient({
+    ...options,
+    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 newToken;
+  }
+
+  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;
+    },
+  });
+
+  // 处理返回的响应数据格式
+  client.addResponseInterceptor(
+    defaultResponseInterceptor({
+      codeField: 'code',
+      dataField: 'data',
+      successCode: 0,
+    }),
+  );
+
+  // 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, {
+  responseReturn: 'data',
+});
+
+export const baseRequestClient = new RequestClient({ baseURL: apiURL });
--- a/web/apps/web-antd/src/api/system/dept.ts
+++ b/web/apps/web-antd/src/api/system/dept.ts
@@ -0,0 +1,52 @@
+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/');
+}
+
+/**
+ * 创建部门
+ * @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 };
--- a/web/apps/web-antd/src/api/system/dict_data.ts
+++ b/web/apps/web-antd/src/api/system/dict_data.ts
@@ -0,0 +1,74 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemDictDataApi {
+  export interface SystemDictData {
+    [key: string]: any;
+    id: string;
+    name: string;
+  }
+}
+
+/**
+ * 获取字典数据列表数据
+ */
+async function getDictDataList(params: Recordable<any>) {
+  return requestClient.get<Array<SystemDictDataApi.SystemDictData>>(
+    '/system/dict_data/',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 创建字典数据
+ * @param data 字典数据数据
+ */
+async function createDictData(
+  data: Omit<SystemDictDataApi.SystemDictData, 'id'>,
+) {
+  return requestClient.post('/system/dict_data/', data);
+}
+
+/**
+ * 更新字典数据
+ *
+ * @param id 字典数据 ID
+ * @param data 字典数据数据
+ */
+async function updateDictData(
+  id: string,
+  data: Omit<SystemDictDataApi.SystemDictData, 'id'>,
+) {
+  return requestClient.put(`/system/dict_data/${id}/`, data);
+}
+/**
+ * 更新字典数据
+ *
+ * @param id 字典数据 ID
+ * @param data 字典数据数据
+ */
+async function patchDictData(
+  id: string,
+  data: Omit<SystemDictDataApi.SystemDictData, 'id'>,
+) {
+  return requestClient.patch(`/system/dict_data/${id}/`, data);
+}
+
+/**
+ * 删除字典数据
+ * @param id 字典数据 ID
+ */
+async function deleteDictData(id: string) {
+  return requestClient.delete(`/system/dict_data/${id}/`);
+}
+
+export {
+  createDictData,
+  deleteDictData,
+  getDictDataList,
+  patchDictData,
+  updateDictData,
+};
--- a/web/apps/web-antd/src/api/system/dict_type.ts
+++ b/web/apps/web-antd/src/api/system/dict_type.ts
@@ -0,0 +1,75 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemDictTypeApi {
+  export interface SystemDictType {
+    [key: string]: any;
+    id: string;
+    name: string;
+    type: string;
+  }
+}
+
+/**
+ * 获取字典类型列表数据
+ */
+async function getDictTypeList(params: Recordable<any>) {
+  return requestClient.get<Array<SystemDictTypeApi.SystemDictType>>(
+    '/system/dict_type/',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 创建字典类型
+ * @param data 字典类型数据
+ */
+async function createDictType(
+  data: Omit<SystemDictTypeApi.SystemDictType, 'id'>,
+) {
+  return requestClient.post('/system/dict_type/', data);
+}
+
+/**
+ * 更新字典类型
+ *
+ * @param id 字典类型 ID
+ * @param data 字典类型数据
+ */
+async function updateDictType(
+  id: string,
+  data: Omit<SystemDictTypeApi.SystemDictType, 'id'>,
+) {
+  return requestClient.put(`/system/dict_type/${id}/`, data);
+}
+/**
+ * 更新字典类型
+ *
+ * @param id 字典类型 ID
+ * @param data 字典类型数据
+ */
+async function patchDictType(
+  id: string,
+  data: Omit<SystemDictTypeApi.SystemDictType, 'id'>,
+) {
+  return requestClient.patch(`/system/dict_type/${id}/`, data);
+}
+
+/**
+ * 删除字典类型
+ * @param id 字典类型 ID
+ */
+async function deleteDictType(id: string) {
+  return requestClient.delete(`/system/dict_type/${id}/`);
+}
+
+export {
+  createDictType,
+  deleteDictType,
+  getDictTypeList,
+  patchDictType,
+  updateDictType,
+};
--- a/web/apps/web-antd/src/api/system/index.ts
+++ b/web/apps/web-antd/src/api/system/index.ts
@@ -0,0 +1,3 @@
+export * from './dept';
+export * from './menu';
+export * from './role';
--- a/web/apps/web-antd/src/api/system/menu.ts
+++ b/web/apps/web-antd/src/api/system/menu.ts
@@ -0,0 +1,167 @@
+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/');
+}
+
+async function isMenuNameExists(
+  name: string,
+  id?: SystemMenuApi.SystemMenu['id'],
+) {
+  const url = id ? `/system/menu/${id}/` : `/system/menu/`;
+  return requestClient.get<boolean>(url, {
+    params: { id, name },
+  });
+}
+
+async function isMenuSearchExists(
+  name: string,
+  id?: SystemMenuApi.SystemMenu['id'],
+) {
+  return requestClient.get<boolean>('/system/menu/name-search', {
+    params: { name, id },
+  });
+}
+
+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,
+  isMenuSearchExists,
+  updateMenu,
+};
--- a/web/apps/web-antd/src/api/system/role.ts
+++ b/web/apps/web-antd/src/api/system/role.ts
@@ -0,0 +1,68 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemRoleApi {
+  export interface SystemRole {
+    [key: string]: any;
+    id: string;
+    name: string;
+    profile: {
+      create_time: string;
+      remark?: string;
+      status: 0 | 1;
+    };
+  }
+}
+
+/**
+ * 获取角色列表数据
+ */
+async function getRoleList(params: Recordable<any>) {
+  return requestClient.get<Array<SystemRoleApi.SystemRole>>('/system/role/', {
+    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
+ * @param data 角色数据
+ */
+async function patchRole(
+  id: string,
+  data: Omit<SystemRoleApi.SystemRole, 'id'>,
+) {
+  return requestClient.patch(`/system/role/${id}/`, data);
+}
+
+/**
+ * 删除角色
+ * @param id 角色 ID
+ */
+async function deleteRole(id: string) {
+  return requestClient.delete(`/system/role/${id}/`);
+}
+
+export { createRole, deleteRole, getRoleList, patchRole, updateRole };
--- a/web/apps/web-antd/src/api/system/tenant_package.ts
+++ b/web/apps/web-antd/src/api/system/tenant_package.ts
@@ -0,0 +1,74 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemTenantPackageApi {
+  export interface SystemTenantPackage {
+    [key: string]: any;
+    id: string;
+    name: string;
+  }
+}
+
+/**
+ * 获取租户列表数据
+ */
+async function getTenantPackageList(params: Recordable<any>) {
+  return requestClient.get<Array<SystemTenantPackageApi.SystemTenantPackage>>(
+    '/system/tenant_package/',
+    {
+      params,
+    },
+  );
+}
+
+/**
+ * 创建租户
+ * @param data 租户数据
+ */
+async function createTenantPackage(
+  data: Omit<SystemTenantPackageApi.SystemTenantPackage, 'id'>,
+) {
+  return requestClient.post('/system/tenant_package/', data);
+}
+
+/**
+ * 更新租户
+ *
+ * @param id 租户 ID
+ * @param data 租户数据
+ */
+async function updateTenantPackage(
+  id: string,
+  data: Omit<SystemTenantPackageApi.SystemTenantPackage, 'id'>,
+) {
+  return requestClient.put(`/system/tenant_package/${id}/`, data);
+}
+/**
+ * 更新租户
+ *
+ * @param id 租户 ID
+ * @param data 租户数据
+ */
+async function patchTenantPackage(
+  id: string,
+  data: Omit<SystemTenantPackageApi.SystemTenantPackage, 'id'>,
+) {
+  return requestClient.patch(`/system/tenant_package/${id}/`, data);
+}
+
+/**
+ * 删除租户
+ * @param id 租户 ID
+ */
+async function deleteTenantPackage(id: string) {
+  return requestClient.delete(`/system/tenant_package/${id}/`);
+}
+
+export {
+  createTenantPackage,
+  deleteTenantPackage,
+  getTenantPackageList,
+  patchTenantPackage,
+  updateTenantPackage,
+};
--- a/web/apps/web-antd/src/api/system/tenants.ts
+++ b/web/apps/web-antd/src/api/system/tenants.ts
@@ -0,0 +1,71 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemTenantsApi {
+  export interface SystemTenants {
+    [key: string]: any;
+    id: string;
+    name: string;
+  }
+}
+
+/**
+ * 获取租户列表数据
+ */
+async function getTenantsList(params: Recordable<any>) {
+  return requestClient.get<Array<SystemTenantsApi.SystemTenants>>(
+    '/system/tenants/',
+    {
+    params,
+  });
+}
+
+/**
+ * 创建租户
+ * @param data 租户数据
+ */
+async function createTenants(data: Omit<SystemTenantsApi.SystemTenants, 'id'>) {
+  return requestClient.post('/system/tenants/', data);
+}
+
+/**
+ * 更新租户
+ *
+ * @param id 租户 ID
+ * @param data 租户数据
+ */
+async function updateTenants(
+  id: string,
+  data: Omit<SystemTenantsApi.SystemTenants, 'id'>,
+) {
+  return requestClient.put(`/system/tenants/${id}/`, data);
+}
+/**
+ * 更新租户
+ *
+ * @param id 租户 ID
+ * @param data 租户数据
+ */
+async function patchTenants(
+  id: string,
+  data: Omit<SystemTenantsApi.SystemTenants, 'id'>,
+) {
+  return requestClient.patch(`/system/tenants/${id}/`, data);
+}
+
+/**
+ * 删除租户
+ * @param id 租户 ID
+ */
+async function deleteTenants(id: string) {
+  return requestClient.delete(`/system/tenants/${id}/`);
+}
+
+export {
+  createTenants,
+  deleteTenants,
+  getTenantsList,
+  patchTenants,
+  updateTenants,
+};
--- a/web/apps/web-antd/src/app.vue
+++ b/web/apps/web-antd/src/app.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAntdDesignTokens } from '@vben/hooks';
+import { preferences, usePreferences } from '@vben/preferences';
+
+import { App, ConfigProvider, theme } from 'ant-design-vue';
+
+import { antdLocale } from '#/locales';
+
+defineOptions({ name: 'App' });
+
+const { isDark } = usePreferences();
+const { tokens } = useAntdDesignTokens();
+
+const tokenTheme = computed(() => {
+  const algorithm = isDark.value
+    ? [theme.darkAlgorithm]
+    : [theme.defaultAlgorithm];
+
+  // antd 紧凑模式算法
+  if (preferences.app.compact) {
+    algorithm.push(theme.compactAlgorithm);
+  }
+
+  return {
+    algorithm,
+    token: tokens,
+  };
+});
+</script>
+
+<template>
+  <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
+    <App>
+      <RouterView />
+    </App>
+  </ConfigProvider>
+</template>
--- a/web/apps/web-antd/src/bootstrap.ts
+++ b/web/apps/web-antd/src/bootstrap.ts
@@ -0,0 +1,76 @@
+import { createApp, watchEffect } from 'vue';
+
+import { registerAccessDirective } from '@vben/access';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
+import { preferences } from '@vben/preferences';
+import { initStores } from '@vben/stores';
+import '@vben/styles';
+import '@vben/styles/antd';
+
+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) {
+  // 初始化组件适配器
+  await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
+  const app = createApp(App);
+
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
+  // 国际化 i18n 配置
+  await setupI18n(app);
+
+  // 配置 pinia-tore
+  await initStores(app, { namespace });
+
+  // 安装权限指令
+  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) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
+  app.mount('#app');
+}
+
+export { bootstrap };
--- a/web/apps/web-antd/src/layouts/auth.vue
+++ b/web/apps/web-antd/src/layouts/auth.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>
--- a/web/apps/web-antd/src/layouts/basic.vue
+++ b/web/apps/web-antd/src/layouts/basic.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { NotificationItem } from '@vben/layouts';
+
+import { computed, ref, watch } from 'vue';
+
+import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { useWatermark } from '@vben/hooks';
+import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import {
+  BasicLayout,
+  LockScreen,
+  Notification,
+  UserDropdown,
+} from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, 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 notifications = ref<NotificationItem[]>([
+  {
+    avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
+    date: '3小时前',
+    isRead: true,
+    message: '描述信息描述信息描述信息',
+    title: '收到了 14 份新周报',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/1',
+    date: '刚刚',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '朱偏右 回复了你',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/1',
+    date: '2024-01-01',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '曲丽丽 评论了你',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/satori',
+    date: '1天前',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '代办提醒',
+  },
+]);
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
+const showDot = computed(() =>
+  notifications.value.some((item) => !item.isRead),
+);
+
+const menus = computed(() => [
+  {
+    handler: () => {
+      openWindow(VBEN_DOC_URL, {
+        target: '_blank',
+      });
+    },
+    icon: BookOpenText,
+    text: $t('ui.widgets.document'),
+  },
+  {
+    handler: () => {
+      openWindow(VBEN_GITHUB_URL, {
+        target: '_blank',
+      });
+    },
+    icon: MdiGithub,
+    text: 'GitHub',
+  },
+  {
+    handler: () => {
+      openWindow(`${VBEN_GITHUB_URL}/issues`, {
+        target: '_blank',
+      });
+    },
+    icon: CircleHelp,
+    text: $t('ui.widgets.qa'),
+  },
+]);
+
+const avatar = computed(() => {
+  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
+});
+
+async function handleLogout() {
+  await authStore.logout(false);
+}
+
+function handleNoticeClear() {
+  notifications.value = [];
+}
+
+function handleMakeAll() {
+  notifications.value.forEach((item) => (item.isRead = true));
+}
+watch(
+  () => preferences.app.watermark,
+  async (enable) => {
+    if (enable) {
+      await updateWatermark({
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <BasicLayout @clear-preferences-and-logout="handleLogout">
+    <template #user-dropdown>
+      <UserDropdown
+        :avatar
+        :menus
+        :text="userStore.userInfo?.realName"
+        description="ann.vben@gmail.com"
+        tag-text="Pro"
+        @logout="handleLogout"
+      />
+    </template>
+    <template #notification>
+      <Notification
+        :dot="showDot"
+        :notifications="notifications"
+        @clear="handleNoticeClear"
+        @make-all="handleMakeAll"
+      />
+    </template>
+    <template #extra>
+      <AuthenticationLoginExpiredModal
+        v-model:open="accessStore.loginExpired"
+        :avatar
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
+    </template>
+    <template #lock-screen>
+      <LockScreen :avatar @to-login="handleLogout" />
+    </template>
+  </BasicLayout>
+</template>
--- a/web/apps/web-antd/src/layouts/index.ts
+++ b/web/apps/web-antd/src/layouts/index.ts
@@ -0,0 +1,6 @@
+const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
+
+const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
+
+export { AuthPageLayout, BasicLayout, IFrameView };
--- a/web/apps/web-antd/src/locales/README.md
+++ b/web/apps/web-antd/src/locales/README.md
@@ -0,0 +1,3 @@
+# locale
+
+每个app使用的国际化可能不同，这里用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换，以及app本身的国际化文件。
--- a/web/apps/web-antd/src/locales/index.ts
+++ b/web/apps/web-antd/src/locales/index.ts
@@ -0,0 +1,102 @@
+import type { Locale } from 'ant-design-vue/es/locale';
+
+import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
+import { ref } from 'vue';
+
+import {
+  $t,
+  setupI18n as coreSetup,
+  loadLocalesMapFromDir,
+} from '@vben/locales';
+import { preferences } from '@vben/preferences';
+
+import antdEnLocale from 'ant-design-vue/es/locale/en_US';
+import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+
+const antdLocale = ref<Locale>(antdDefaultLocale);
+
+const modules = import.meta.glob('./langs/**/*.json');
+
+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);
+/**
+ * 加载应用特有的语言包
+ * 这里也可以改造为从服务端获取翻译数据
+ * @param lang
+ */
+async function loadMessages(lang: SupportedLanguagesType) {
+  const [appLocaleMessages] = await Promise.all([
+    localesMap[lang]?.(),
+    loadThirdPartyMessage(lang),
+  ]);
+  return appLocaleMessages?.default;
+}
+
+/**
+ * 加载第三方组件库的语言包
+ * @param lang
+ */
+async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
+  await Promise.all([loadAntdLocale(lang), loadDayjsLocale(lang)]);
+}
+
+/**
+ * 加载dayjs的语言包
+ * @param lang
+ */
+async function loadDayjsLocale(lang: SupportedLanguagesType) {
+  let locale;
+  switch (lang) {
+    case 'en-US': {
+      locale = await import('dayjs/locale/en');
+      break;
+    }
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
+    // 默认使用英语
+    default: {
+      locale = await import('dayjs/locale/en');
+    }
+  }
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
+}
+
+/**
+ * 加载antd的语言包
+ * @param lang
+ */
+async function loadAntdLocale(lang: SupportedLanguagesType) {
+  switch (lang) {
+    case 'en-US': {
+      antdLocale.value = antdEnLocale;
+      break;
+    }
+    case 'zh-CN': {
+      antdLocale.value = antdDefaultLocale;
+      break;
+    }
+  }
+}
+
+async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
+  await coreSetup(app, {
+    defaultLocale: preferences.app.locale,
+    loadMessages,
+    missingWarn: !import.meta.env.PROD,
+    ...options,
+  });
+}
+
+export { $t, antdLocale, setupI18n };
--- a/web/apps/web-antd/src/locales/langs/en-US/demos.json
+++ b/web/apps/web-antd/src/locales/langs/en-US/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "Demos",
+  "antd": "Ant Design Vue",
+  "vben": {
+    "title": "Project",
+    "about": "About",
+    "document": "Document",
+    "antdv": "Ant Design Vue Version",
+    "naive-ui": "Naive UI Version",
+    "element-plus": "Element Plus Version"
+  }
+}
--- a/web/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/web/apps/web-antd/src/locales/langs/en-US/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "Login",
+    "register": "Register",
+    "codeLogin": "Code Login",
+    "qrcodeLogin": "Qr Code Login",
+    "forgetPassword": "Forget Password"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "analytics": "Analytics",
+    "workspace": "Workspace"
+  }
+}
--- a/web/apps/web-antd/src/locales/langs/en-US/system.json
+++ b/web/apps/web-antd/src/locales/langs/en-US/system.json
@@ -0,0 +1,98 @@
+{
+  "title": "System Management",
+  "dept": {
+    "name": "Department",
+    "title": "Department Management",
+    "deptName": "Department Name",
+    "status": "Status",
+    "createTime": "Created At",
+    "remark": "Remarks",
+    "operation": "Actions",
+    "parentDept": "Parent Department"
+  },
+  "menu": {
+    "title": "Menu Management",
+    "parent": "Parent Menu",
+    "menuTitle": "Menu Title",
+    "menuName": "Menu Name",
+    "name": "Menu",
+    "type": "Menu Type",
+    "typeCatalog": "Catalog",
+    "typeMenu": "Menu",
+    "typeButton": "Button",
+    "typeLink": "External Link",
+    "typeEmbedded": "Embedded Page",
+    "icon": "Icon",
+    "activeIcon": "Active Icon",
+    "activePath": "Active Path",
+    "path": "Route Path",
+    "component": "Component",
+    "status": "Status",
+    "authCode": "Permission Code",
+    "badge": "Badge",
+    "operation": "Actions",
+    "linkSrc": "Link URL",
+    "affixTab": "Pin Tab",
+    "keepAlive": "Keep Alive",
+    "hideInMenu": "Hide in Menu",
+    "hideInTab": "Hide in Tab Bar",
+    "hideChildrenInMenu": "Hide Children in Menu",
+    "hideInBreadcrumb": "Hide in Breadcrumb",
+    "advancedSettings": "Advanced Settings",
+    "activePathMustExist": "The path must correspond to a valid menu",
+    "activePathHelp": "When navigating to this route, if it doesn’t appear in the menu, you must specify the menu path that should be activated.",
+    "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": "Remarks",
+    "createTime": "Created At",
+    "operation": "Actions",
+    "permissions": "Permissions",
+    "setPermissions": "Configure Permissions"
+  },
+  "tenant": {
+    "name": "Tenant",
+    "contact_mobile": "Contact Mobile",
+    "website": "Website",
+    "package_id": "Package Name",
+    "expire_time": "Expiration Time",
+    "account_count": "Account Limit",
+    "tenantName": "Tenant Name"
+  },
+  "tenant_package": {
+    "name": "Tenant Package",
+    "contact_mobile": "Contact Mobile",
+    "website": "Website",
+    "package_id": "Package Name",
+    "expire_time": "Expiration Time",
+    "account_count": "Account Limit",
+    "tenantName": "Tenant Name"
+  },
+  "dict_type": {
+    "name": "Dictionary Name",
+    "title": "Dictionary Name",
+    "type": "Dictionary Type"
+  },
+  "dict_data": {
+    "name": "Dictionary Label",
+    "title": "Dictionary Data",
+    "type": "Dictionary Value"
+  },
+  "status": "Status",
+  "remark": "Remarks",
+  "createTime": "Created At",
+  "operation": "Actions",
+  "updateTime": "Updated At"
+}
--- a/web/apps/web-antd/src/locales/langs/zh-CN/demos.json
+++ b/web/apps/web-antd/src/locales/langs/zh-CN/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "演示",
+  "antd": "Ant Design Vue",
+  "vben": {
+    "title": "项目",
+    "about": "关于",
+    "document": "文档",
+    "antdv": "Ant Design Vue 版本",
+    "naive-ui": "Naive UI 版本",
+    "element-plus": "Element Plus 版本"
+  }
+}
--- a/web/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/web/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "login": "登录",
+    "register": "注册",
+    "codeLogin": "验证码登录",
+    "qrcodeLogin": "二维码登录",
+    "forgetPassword": "忘记密码"
+  },
+  "dashboard": {
+    "title": "概览",
+    "analytics": "分析页",
+    "workspace": "工作台"
+  }
+}
--- a/web/apps/web-antd/src/locales/langs/zh-CN/system.json
+++ b/web/apps/web-antd/src/locales/langs/zh-CN/system.json
@@ -0,0 +1,99 @@
+{
+  "title": "系统管理",
+  "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": "授权"
+  },
+  "tenant": {
+    "name": "租户",
+    "contact_mobile": "联系手机",
+    "website": "绑定域名",
+    "package_id": "租户套餐编号",
+    "expire_time": "过期时间",
+    "account_count": "账号数量",
+    "tenantName": "租户名称"
+  },
+  "tenant_package": {
+    "name": "租户套餐",
+    "website": "绑定域名",
+    "package_id": "租户套餐编号",
+    "expire_time": "过期时间",
+    "account_count": "账号数量",
+    "tenantName": "租户名称"
+  },
+  "dict_type": {
+    "name": "字典名称",
+    "title": "字典名称",
+    "type": "字典类型"
+  },
+  "dict_data": {
+    "name": "字典数据",
+    "title": "字典数据",
+    "type": "字典键值"
+  },
+  "status": "状态",
+  "remark": "备注",
+  "createTime": "创建时间",
+  "operation": "操作",
+  "updateTime": "更新时间"
+}
--- a/web/apps/web-antd/src/main.ts
+++ b/web/apps/web-antd/src/main.ts
@@ -0,0 +1,31 @@
+import { initPreferences } from '@vben/preferences';
+import { unmountGlobalLoading } from '@vben/utils';
+
+import { overridesPreferences } from './preferences';
+
+/**
+ * 应用初始化完成之后再进行页面加载渲染
+ */
+async function initApplication() {
+  // name用于指定项目唯一标识
+  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
+  const env = import.meta.env.PROD ? 'prod' : 'dev';
+  const appVersion = import.meta.env.VITE_APP_VERSION;
+  const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`;
+
+  // app偏好设置初始化
+  await initPreferences({
+    namespace,
+    overrides: overridesPreferences,
+  });
+
+  // 启动应用并挂载
+  // vue应用主要逻辑及视图
+  const { bootstrap } = await import('./bootstrap');
+  await bootstrap(namespace);
+
+  // 移除并销毁loading
+  unmountGlobalLoading();
+}
+
+initApplication();
--- a/web/apps/web-antd/src/models/base.ts
+++ b/web/apps/web-antd/src/models/base.ts
@@ -0,0 +1,136 @@
+import type { Recordable } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+export interface CoreModel {
+  remark: string;
+  creator: string;
+  modifier: string;
+  update_time: string;
+  create_time: string;
+  is_deleted: boolean;
+}
+
+// 通用Model基类
+export class BaseModel<
+  T,
+  CreateData = Omit<T, any>,
+  UpdateData = Partial<CreateData>,
+> {
+  protected baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  /**
+   * 通用操作方法
+   * @param url 操作路径
+   * @param data 请求数据
+   * @param id 是否针对单条记录的操作
+   * @param method 请求方法
+   */
+  async action(
+    url: string,
+    data: any = {},
+    id: null | number = null,
+    method = 'post',
+  ) {
+    const baseUrl = id
+      ? `${this.baseUrl}${id}/${url}/`
+      : `${this.baseUrl}${url}/`;
+
+    const config =
+      method === 'get'
+        ? {
+            url: baseUrl,
+            method: 'get',
+            params: data,
+          }
+        : {
+            url: baseUrl,
+            method,
+            data,
+          };
+
+    return requestClient.request(url, config);
+  }
+
+  /**
+   * 创建记录
+   */
+  async create(data: CreateData) {
+    return requestClient.post(this.baseUrl, data);
+  }
+
+  /**
+   * 删除记录
+   */
+  async delete(id: number) {
+    return requestClient.delete(`${this.baseUrl}${id}/`);
+  }
+
+  /**
+   * 导出数据
+   */
+  /**
+   * 导出数据
+   */
+  async export(params: Recordable<T> = {}) {
+    return requestClient.get(`${this.baseUrl}export/`, {
+      params,
+      responseType: 'blob', // 二进制流
+    });
+  }
+
+  /**
+   * 获取列表数据
+   */
+  async list(params: Recordable<T> = {}) {
+    return requestClient.get<Array<T>>(this.baseUrl, { params });
+  }
+
+  /**
+   * 部分更新记录
+   */
+  async patch(id: number, data: Partial<UpdateData>) {
+    return requestClient.patch(`${this.baseUrl}${id}/`, data);
+  }
+
+  /**
+   * 获取单条记录
+   */
+  async retrieve(id: number) {
+    return requestClient.get<T>(`${this.baseUrl}${id}/`);
+  }
+  /**
+   * 全量更新记录
+   */
+  async update(id: number, data: UpdateData) {
+    return requestClient.put(`${this.baseUrl}${id}/`, data);
+  }
+}
+//
+// // 字典类型专用Model
+// export class SystemDictTypeModel extends BaseModel<SystemDictTypeApi.SystemDictType> {
+//   constructor() {
+//     super('/system/dict_type/');
+//   }
+// }
+//
+// // AmazonListingModel示例
+// export class AmazonListingModel extends BaseModel<AmazonListing> {
+//   constructor() {
+//     super('amazon/amazon_listing/');
+//   }
+// }
+// const dictTypeModel = new SystemDictTypeModel();
+//
+// // 获取列表
+// dictTypeModel.list().then(({ data }) => console.log(data));
+//
+// // 创建记录
+// dictTypeModel.create({ name: '新字典', type: 'new_type' });
+//
+// // 更新记录
+// dictTypeModel.patch('123', { name: '更新后的字典' });
--- a/web/apps/web-antd/src/models/system.ts
+++ b/web/apps/web-antd/src/models/system.ts
@@ -0,0 +1,16 @@
+import { BaseModel } from '#/models/base';
+
+export namespace SystemDictTypeApi {
+  export interface SystemDictType {
+    [key: string]: any;
+    id: string;
+    name: string;
+    type: string;
+  }
+}
+
+export class SystemDictTypeModel extends BaseModel<SystemDictTypeApi.SystemDictType> {
+  constructor() {
+    super('/system/dict_type/');
+  }
+}
--- a/web/apps/web-antd/src/preferences.ts
+++ b/web/apps/web-antd/src/preferences.ts
@@ -0,0 +1,13 @@
+import { defineOverridesPreferences } from '@vben/preferences';
+
+/**
+ * @description 项目配置文件
+ * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
+ */
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    name: import.meta.env.VITE_APP_TITLE,
+  },
+});
--- a/web/apps/web-antd/src/router/access.ts
+++ b/web/apps/web-antd/src/router/access.ts
@@ -0,0 +1,42 @@
+import type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben/types';
+
+import { generateAccessible } from '@vben/access';
+import { preferences } from '@vben/preferences';
+
+import { message } from 'ant-design-vue';
+
+import { getAllMenusApi } from '#/api';
+import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
+
+async function generateAccess(options: GenerateMenuAndRoutesOptions) {
+  const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
+
+  const layoutMap: ComponentRecordType = {
+    BasicLayout,
+    IFrameView,
+  };
+
+  return await generateAccessible(preferences.app.accessMode, {
+    ...options,
+    fetchMenuListAsync: async () => {
+      message.loading({
+        content: `${$t('common.loadingMenu')}...`,
+        duration: 1.5,
+      });
+      return await getAllMenusApi();
+    },
+    // 可以指定没有权限跳转403页面
+    forbiddenComponent,
+    // 如果 route.meta.menuVisibleWithForbidden = true
+    layoutMap,
+    pageMap,
+  });
+}
+
+export { generateAccess };
--- a/web/apps/web-antd/src/router/guard.ts
+++ b/web/apps/web-antd/src/router/guard.ts
@@ -0,0 +1,133 @@
+import type { Router } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { startProgress, stopProgress } from '@vben/utils';
+
+import { accessRoutes, coreRouteNames } from '#/router/routes';
+import { useAuthStore } from '#/store';
+
+import { generateAccess } from './access';
+
+/**
+ * 通用守卫配置
+ * @param router
+ */
+function setupCommonGuard(router: Router) {
+  // 记录已经加载的页面
+  const loadedPaths = new Set<string>();
+
+  router.beforeEach((to) => {
+    to.meta.loaded = loadedPaths.has(to.path);
+
+    // 页面加载进度条
+    if (!to.meta.loaded && preferences.transition.progress) {
+      startProgress();
+    }
+    return true;
+  });
+
+  router.afterEach((to) => {
+    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
+
+    loadedPaths.add(to.path);
+
+    // 关闭页面加载进度条
+    if (preferences.transition.progress) {
+      stopProgress();
+    }
+  });
+}
+
+/**
+ * 权限访问守卫配置
+ * @param router
+ */
+function setupAccessGuard(router: Router) {
+  router.beforeEach(async (to, from) => {
+    const accessStore = useAccessStore();
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+
+    // 基本路由，这些路由不需要进入权限拦截
+    if (coreRouteNames.includes(to.name as string)) {
+      if (to.path === LOGIN_PATH && accessStore.accessToken) {
+        return decodeURIComponent(
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            preferences.app.defaultHomePath,
+        );
+      }
+      return true;
+    }
+
+    // accessToken 检查
+    if (!accessStore.accessToken) {
+      // 明确声明忽略权限访问权限，则可以访问
+      if (to.meta.ignoreAccess) {
+        return true;
+      }
+
+      // 没有访问权限，跳转登录页面
+      if (to.fullPath !== LOGIN_PATH) {
+        return {
+          path: LOGIN_PATH,
+          // 如不需要，直接删除 query
+          query:
+            to.fullPath === preferences.app.defaultHomePath
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
+          // 携带当前跳转的页面，登录后重新跳转该页面
+          replace: true,
+        };
+      }
+      return to;
+    }
+
+    // 是否已经生成过动态路由
+    if (accessStore.isAccessChecked) {
+      return true;
+    }
+
+    // 生成路由表
+    // 当前登录用户拥有的角色标识列表
+    const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
+    const userRoles = userInfo.roles ?? [];
+
+    // 生成菜单和路由
+    const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      roles: userRoles,
+      router,
+      // 则会在菜单中显示，但是访问会被重定向到403
+      routes: accessRoutes,
+    });
+
+    // 保存菜单信息和路由信息
+    accessStore.setAccessMenus(accessibleMenus);
+    accessStore.setAccessRoutes(accessibleRoutes);
+    accessStore.setIsAccessChecked(true);
+    const redirectPath = (from.query.redirect ??
+      (to.path === preferences.app.defaultHomePath
+        ? userInfo.homePath || preferences.app.defaultHomePath
+        : to.fullPath)) as string;
+
+    return {
+      ...router.resolve(decodeURIComponent(redirectPath)),
+      replace: true,
+    };
+  });
+}
+
+/**
+ * 项目守卫配置
+ * @param router
+ */
+function createRouterGuard(router: Router) {
+  /** 通用 */
+  setupCommonGuard(router);
+  /** 权限访问 */
+  setupAccessGuard(router);
+}
+
+export { createRouterGuard };
--- a/web/apps/web-antd/src/router/index.ts
+++ b/web/apps/web-antd/src/router/index.ts
@@ -0,0 +1,37 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+import { resetStaticRoutes } from '@vben/utils';
+
+import { createRouterGuard } from './guard';
+import { routes } from './routes';
+
+/**
+ *  @zh_CN 创建vue-router实例
+ */
+const router = createRouter({
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === 'hash'
+      ? createWebHashHistory(import.meta.env.VITE_BASE)
+      : createWebHistory(import.meta.env.VITE_BASE),
+  // 应该添加到路由的初始路由列表。
+  routes,
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
+  // 是否应该禁止尾部斜杠。
+  // strict: true,
+});
+
+const resetRoutes = () => resetStaticRoutes(router, routes);
+
+// 创建路由守卫
+createRouterGuard(router);
+
+export { resetRoutes, router };
--- a/web/apps/web-antd/src/router/routes/core.ts
+++ b/web/apps/web-antd/src/router/routes/core.ts
@@ -0,0 +1,97 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
+/** 全局404页面 */
+const fallbackNotFoundRoute: RouteRecordRaw = {
+  component: () => import('#/views/_core/fallback/not-found.vue'),
+  meta: {
+    hideInBreadcrumb: true,
+    hideInMenu: true,
+    hideInTab: true,
+    title: '404',
+  },
+  name: 'FallbackNotFound',
+  path: '/:path(.*)*',
+};
+
+/** 基本路由，这些路由是必须存在的 */
+const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
+  {
+    component: BasicLayout,
+    meta: {
+      hideInBreadcrumb: true,
+      title: 'Root',
+    },
+    name: 'Root',
+    path: '/',
+    redirect: preferences.app.defaultHomePath,
+    children: [],
+  },
+  {
+    component: AuthPageLayout,
+    meta: {
+      hideInTab: true,
+      title: 'Authentication',
+    },
+    name: 'Authentication',
+    path: '/auth',
+    redirect: LOGIN_PATH,
+    children: [
+      {
+        name: 'Login',
+        path: 'login',
+        component: () => import('#/views/_core/authentication/login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+      {
+        name: 'CodeLogin',
+        path: 'code-login',
+        component: () => import('#/views/_core/authentication/code-login.vue'),
+        meta: {
+          title: $t('page.auth.codeLogin'),
+        },
+      },
+      {
+        name: 'QrCodeLogin',
+        path: 'qrcode-login',
+        component: () =>
+          import('#/views/_core/authentication/qrcode-login.vue'),
+        meta: {
+          title: $t('page.auth.qrcodeLogin'),
+        },
+      },
+      {
+        name: 'ForgetPassword',
+        path: 'forget-password',
+        component: () =>
+          import('#/views/_core/authentication/forget-password.vue'),
+        meta: {
+          title: $t('page.auth.forgetPassword'),
+        },
+      },
+      {
+        name: 'Register',
+        path: 'register',
+        component: () => import('#/views/_core/authentication/register.vue'),
+        meta: {
+          title: $t('page.auth.register'),
+        },
+      },
+    ],
+  },
+];
+
+export { coreRoutes, fallbackNotFoundRoute };
--- a/web/apps/web-antd/src/router/routes/index.ts
+++ b/web/apps/web-antd/src/router/routes/index.ts
@@ -0,0 +1,45 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { mergeRouteModules, traverseTreeValues } from '@vben/utils';
+
+import { coreRoutes, fallbackNotFoundRoute } from './core';
+
+const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
+  eager: true,
+});
+
+// 有需要可以自行打开注释，并创建文件夹
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+/** 动态路由 */
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
+
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
+
+/** 路由列表，由基本路由、外部路由和404兜底路由组成
+ *  无需走权限验证（会一直显示在菜单中） */
+const routes: RouteRecordRaw[] = [
+  ...coreRoutes,
+  ...externalRoutes,
+  fallbackNotFoundRoute,
+];
+
+/** 基本路由列表，这些路由不需要进入权限拦截 */
+const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
+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;
+  });
+
+/** 有权限校验的路由列表，包含动态路由和静态路由 */
+const accessRoutes = [...dynamicRoutes, ...staticRoutes];
+export { accessRoutes, componentKeys, coreRouteNames, routes };
--- a/web/apps/web-antd/src/router/routes/modules/dashboard.ts
+++ b/web/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,38 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: $t('page.dashboard.title'),
+    },
+    name: 'Dashboard',
+    path: '/dashboard',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: () => import('#/views/dashboard/analytics/index.vue'),
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: $t('page.dashboard.analytics'),
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: () => import('#/views/dashboard/workspace/index.vue'),
+        meta: {
+          icon: 'carbon:workspace',
+          title: $t('page.dashboard.workspace'),
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
--- a/web/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/web/apps/web-antd/src/router/routes/modules/demos.ts
@@ -0,0 +1,28 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: $t('demos.title'),
+    },
+    name: 'Demos',
+    path: '/demos',
+    children: [
+      {
+        meta: {
+          title: $t('demos.antd'),
+        },
+        name: 'AntDesignDemos',
+        path: '/demos/ant-design',
+        component: () => import('#/views/demos/antd/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
--- a/web/apps/web-antd/src/router/routes/modules/system.ts
+++ b/web/apps/web-antd/src/router/routes/modules/system.ts
@@ -0,0 +1,84 @@
+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'),
+      },
+      {
+        path: '/system/dict_type',
+        name: 'SystemDictType',
+        meta: {
+          icon: 'mdi:menu',
+          title: '字典列表',
+        },
+        component: () => import('#/views/system/dict_type/list.vue'),
+      },
+      {
+        path: '/system/dict_data',
+        name: 'SystemDictData',
+        meta: {
+          icon: 'mdi:menu',
+          title: '字典数据',
+          hideInMenu: true, // 关键配置：设置为 true 时菜单将被隐藏
+          // affix: true,
+        },
+        component: () => import('#/views/system/dict_data/list.vue'),
+      },
+      // {
+      //   path: '/system/tenants',
+      //   name: 'SystemTenants',
+      //   meta: {
+      //     icon: 'mdi:menu',
+      //     title: '租户列表',
+      //   },
+      //   component: () => import('#/views/system/tenants/list.vue'),
+      // },
+      // {
+      //   path: '/system/tenant_package',
+      //   name: 'SystemTenantPackage',
+      //   meta: {
+      //     icon: 'charm:organisation',
+      //     title: '租户套餐',
+      //   },
+      //   component: () => import('#/views/system/tenant_package/list.vue'),
+      // },
+    ],
+  },
+];
+
+export default routes;
--- a/web/apps/web-antd/src/router/routes/modules/vben.ts
+++ b/web/apps/web-antd/src/router/routes/modules/vben.ts
@@ -0,0 +1,81 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import {
+  VBEN_DOC_URL,
+  VBEN_ELE_PREVIEW_URL,
+  VBEN_GITHUB_URL,
+  VBEN_LOGO_URL,
+  VBEN_NAIVE_PREVIEW_URL,
+} from '@vben/constants';
+
+import { IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      badgeType: 'dot',
+      icon: VBEN_LOGO_URL,
+      order: 9998,
+      title: $t('demos.vben.title'),
+    },
+    name: 'VbenProject',
+    path: '/vben-admin',
+    children: [
+      {
+        name: 'VbenDocument',
+        path: '/vben-admin/document',
+        component: IFrameView,
+        meta: {
+          icon: 'lucide:book-open-text',
+          link: VBEN_DOC_URL,
+          title: $t('demos.vben.document'),
+        },
+      },
+      {
+        name: 'VbenGithub',
+        path: '/vben-admin/github',
+        component: IFrameView,
+        meta: {
+          icon: 'mdi:github',
+          link: VBEN_GITHUB_URL,
+          title: 'Github',
+        },
+      },
+      {
+        name: 'VbenNaive',
+        path: '/vben-admin/naive',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          icon: 'logos:naiveui',
+          link: VBEN_NAIVE_PREVIEW_URL,
+          title: $t('demos.vben.naive-ui'),
+        },
+      },
+      {
+        name: 'VbenElementPlus',
+        path: '/vben-admin/ele',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          icon: 'logos:element',
+          link: VBEN_ELE_PREVIEW_URL,
+          title: $t('demos.vben.element-plus'),
+        },
+      },
+    ],
+  },
+  {
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      title: $t('demos.vben.about'),
+      order: 9999,
+    },
+  },
+];
+
+export default routes;
--- a/web/apps/web-antd/src/store/auth.ts
+++ b/web/apps/web-antd/src/store/auth.ts
@@ -0,0 +1,118 @@
+import type { Recordable, UserInfo } from '@vben/types';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
+
+import { notification } from 'ant-design-vue';
+import { defineStore } from 'pinia';
+
+import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
+import { $t } from '#/locales';
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  const loginLoading = ref(false);
+
+  /**
+   * 异步处理登录操作
+   * Asynchronously handle the login process
+   * @param params 登录表单数据
+   */
+  async function authLogin(
+    params: Recordable<any>,
+    onSuccess?: () => Promise<void> | void,
+  ) {
+    // 异步处理用户登录操作并获取 accessToken
+    let userInfo: null | UserInfo = null;
+    try {
+      loginLoading.value = true;
+      const { accessToken } = await loginApi(params);
+
+      // 如果成功获取到 accessToken
+      if (accessToken) {
+        accessStore.setAccessToken(accessToken);
+
+        // 获取用户信息并存储到 accessStore 中
+        const [fetchUserInfoResult, accessCodes] = await Promise.all([
+          fetchUserInfo(),
+          getAccessCodesApi(),
+        ]);
+
+        userInfo = fetchUserInfoResult;
+
+        userStore.setUserInfo(userInfo);
+        accessStore.setAccessCodes(accessCodes);
+
+        if (accessStore.loginExpired) {
+          accessStore.setLoginExpired(false);
+        } else {
+          onSuccess
+            ? await onSuccess?.()
+            : await router.push(
+                userInfo.homePath || preferences.app.defaultHomePath,
+              );
+        }
+
+        if (userInfo?.realName) {
+          notification.success({
+            description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            duration: 3,
+            message: $t('authentication.loginSuccess'),
+          });
+        }
+      }
+    } finally {
+      loginLoading.value = false;
+    }
+
+    return {
+      userInfo,
+    };
+  }
+
+  async function logout(redirect: boolean = true) {
+    try {
+      await logoutApi();
+    } catch {
+      // 不做任何处理
+    }
+    resetAllStores();
+    accessStore.setLoginExpired(false);
+
+    // 回登录页带上当前路由地址
+    await router.replace({
+      path: LOGIN_PATH,
+      query: redirect
+        ? {
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+          }
+        : {},
+    });
+  }
+
+  async function fetchUserInfo() {
+    let userInfo: null | UserInfo = null;
+    userInfo = await getUserInfoApi();
+    userStore.setUserInfo(userInfo);
+    return userInfo;
+  }
+
+  function $reset() {
+    loginLoading.value = false;
+  }
+
+  return {
+    $reset,
+    authLogin,
+    fetchUserInfo,
+    loginLoading,
+    logout,
+  };
+});
--- a/web/apps/web-antd/src/store/index.ts
+++ b/web/apps/web-antd/src/store/index.ts
@@ -0,0 +1 @@
+export * from './auth';
--- a/web/apps/web-antd/src/utils/date.ts
+++ b/web/apps/web-antd/src/utils/date.ts
@@ -0,0 +1,14 @@
+import dayjs from 'dayjs';
+
+/**
+ * 格式化 ISO 时间字符串为 'YYYY-MM-DD HH:mm:ss'
+ * @param value ISO 时间字符串
+ * @param format 自定义格式，默认 'YYYY-MM-DD HH:mm:ss'
+ */
+export function format_datetime(
+  value: Date | string,
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string {
+  if (!value) return '';
+  return dayjs(value).format(format);
+}
--- a/web/apps/web-antd/src/utils/dict.ts
+++ b/web/apps/web-antd/src/utils/dict.ts
@@ -0,0 +1,5 @@
+export enum DICT_TYPE {
+  USER_TYPE = 'user_type',
+
+  // TEMU_ORDER_STATUS = 'temu_order_status',
+}
--- a/web/apps/web-antd/src/views/_core/README.md
+++ b/web/apps/web-antd/src/views/_core/README.md
@@ -0,0 +1,3 @@
+# \_core
+
+此目录包含应用程序正常运行所需的基本视图。这些视图是应用程序布局中使用的视图。
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default } from '@vben/commitlint-config';`
				`@@ -0,0 +1 @@`
				`export { default } from '@vben/prettier-config';`
				`@@ -0,0 +1 @@`
				`export default defineEventHandler(() => 'Test get handler');`
				`@@ -0,0 +1 @@`
				`export { default } from '@vben/tailwind-config/postcss';`