chore: release v5.3.0-beta.1

.dockerignore

@@ -3,5 +3,3 @@ node_modules
 .gitignore
 *.md
 dist
-.turbo
-dist.zip

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,7 +1,7 @@
 name: 🐞 Bug Report
 description: Report an issue with Vben Admin to help us make it better.
-title: 'Bug: '
-labels: ['bug: pending triage']
+title: "Bug: "
+labels: ["bug: pending triage"]
 
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/docs.yml

@@ -1,6 +1,6 @@
 name: 📚 Documentation
 description: Report an issue with Vben Admin Website to help us make it better.
-title: 'Docs: '
+title: "Docs: "
 labels: [documentation]
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,7 +1,7 @@
 name: ✨ New Feature Proposal
 description: Propose a new feature to be added to Vben Admin
-title: 'FEATURE: '
-labels: ['enhancement: pending triage']
+title: "FEATURE: "
+labels: ["enhancement: pending triage"]
 body:
   - type: markdown
     attributes:

.github/actions/setup-node/action.yml

@@ -1,9 +1,9 @@
-name: 'Setup Node'
+name: "Setup Node"
 
-description: 'Setup node and pnpm'
+description: "Setup node and pnpm"
 
 runs:
-  using: 'composite'
+  using: "composite"
   steps:
     - name: Install pnpm
       uses: pnpm/action-setup@v4
@@ -12,7 +12,7 @@ runs:
       uses: actions/setup-node@v4
       with:
         node-version-file: .node-version
-        cache: 'pnpm'
+        cache: "pnpm"
 
     - name: Get pnpm store directory
       shell: bash

.github/dependabot.yml

@@ -1,7 +1,7 @@
 version: 2
 updates:
   - package-ecosystem: npm
-    directory: '/'
+    directory: "/"
     schedule:
       interval: daily
     groups:
@@ -9,7 +9,7 @@ updates:
         update-types: [minor, patch]
 
   - package-ecosystem: github-actions
-    directory: '/'
+    directory: "/"
     schedule:
       interval: weekly
     groups:

.github/release-drafter.yml

@@ -1,7 +1,7 @@
-name-template: 'v$RESOLVED_VERSION'
-tag-template: 'v$RESOLVED_VERSION'
+name-template: "v$RESOLVED_VERSION"
+tag-template: "v$RESOLVED_VERSION"
 version-template: $MAJOR.$MINOR.$PATCH
-change-template: '* $TITLE (#$NUMBER) @$AUTHOR'
+change-template: "* $TITLE (#$NUMBER) @$AUTHOR"
 template: |
   # What's Changed
 
@@ -10,52 +10,52 @@ template: |
   **Full Changelog**: https://github.com/$OWNER/$REPOSITORY/compare/$PREVIOUS_TAG...v$RESOLVED_VERSION
 
 categories:
-  - title: '🚀 Features'
+  - title: "🚀 Features"
     labels:
-      - 'feature'
-  - title: '🐞 Bug Fixes'
+      - "feature"
+  - title: "🐞 Bug Fixes"
     labels:
-      - 'bug'
-  - title: '📈 Performance'
+      - "bug"
+  - title: "📈 Performance"
     labels:
-      - 'perf'
-      - 'enhancement'
+      - "perf"
+      - "enhancement"
   - title: 📝 Documentation
     labels:
-      - 'documentation'
+      - "documentation"
   - title: 👻 Maintenance
     labels:
-      - 'chore'
-      - 'dependencies'
+      - "chore"
+      - "dependencies"
     # collapse-after: 12
   - title: 🚦 Tests
     labels:
-      - 'tests'
-  - title: 'Breaking'
-    label: 'breaking'
+      - "tests"
+  - title: "Breaking"
+    label: "breaking"
 
 version-resolver:
   major:
     labels:
-      - 'major'
-      - 'breaking'
+      - "major"
+      - "breaking"
   minor:
     labels:
-      - 'minor'
+      - "minor"
   patch:
     labels:
-      - 'feature'
-      - 'patch'
-      - 'bug'
-      - 'maintenance'
-      - 'docs'
-      - 'dependencies'
-      - 'security'
+      - "feature"
+      - "patch"
+      - "bug"
+      - "maintenance"
+      - "docs"
+      - "dependencies"
+      - "security"
 
 exclude-labels:
-  - 'skip-changelog'
-  - 'no-changelog'
-  - 'changelog'
-  - 'bump versions'
-  - 'reverted'
-  - 'invalid'
+  - "skip-changelog"
+  - "no-changelog"
+  - "changelog"
+  - "bump versions"
+  - "reverted"
+  - "invalid"

.github/workflows/build.yml

@@ -7,7 +7,7 @@ on:
       - main
 
 env:
-  HUSKY: '0'
+  HUSKY: "0"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
@@ -19,15 +19,8 @@ permissions:
 
 jobs:
   post-update:
-    if: github.repository == 'vbenjs/vue-vben-admin'
     # if: ${{ github.actor == 'dependabot[bot]' }}
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os:
-          - ubuntu-latest
-          # - macos-latest
-          - windows-latest
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

.github/workflows/changeset-version.yml

@@ -18,7 +18,7 @@ env:
 
 jobs:
   version:
-    if: (github.event.pull_request.merged || github.event_name == 'workflow_dispatch') && github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
+    if: (github.event.pull_request.merged || github.event_name == 'workflow_dispatch') && github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     # if: github.repository == 'vbenjs/vue-vben-admin'
     timeout-minutes: 15
     runs-on: ubuntu-latest
@@ -36,7 +36,7 @@ jobs:
         uses: changesets/action@v1
         with:
           version: pnpm run version
-          commit: 'chore: bump versions'
-          title: 'chore: bump versions'
+          commit: "chore: bump versions"
+          title: "chore: bump versions"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -5,7 +5,7 @@ on:
   push:
     branches:
       - main
-      - 'releases/*'
+      - "releases/*"
 
 permissions:
   contents: read
@@ -17,7 +17,7 @@ env:
 jobs:
   test:
     name: Test
-    if: github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -56,7 +56,7 @@ jobs:
 
   lint:
     name: Lint
-    if: github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -79,7 +79,6 @@ jobs:
 
   check:
     name: Check
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ${{ matrix.os }}
     timeout-minutes: 20
     strategy:
@@ -109,8 +108,8 @@ jobs:
 
   ci-ok:
     name: CI OK
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && always()
     needs: [test, check, lint]
     env:
       FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }}

.github/workflows/codeql.yml

@@ -9,20 +9,19 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: 'CodeQL'
+name: "CodeQL"
 
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
   pull_request:
-    branches: ['main']
+    branches: ["main"]
   schedule:
-    - cron: '35 0 * * 0'
+    - cron: "35 0 * * 0"
 
 jobs:
   analyze:
     name: Analyze (${{ matrix.language }})
-    if: github.repository == 'vbenjs/vue-vben-admin'
     # Runner size impacts CodeQL analysis time. To learn more, please see:
     #   - https://gh.io/recommended-hardware-resources-for-running-codeql
     #   - https://gh.io/supported-runners-and-hardware-resources
@@ -91,4 +90,4 @@ jobs:
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v3
         with:
-          category: '/language:${{matrix.language}}'
+          category: "/language:${{matrix.language}}"

.github/workflows/deploy.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   deploy-playground-ftp:
     name: Deploy Push Playground Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -39,7 +39,7 @@ jobs:
 
   deploy-docs-ftp:
     name: Deploy Push Docs Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -63,7 +63,7 @@ jobs:
 
   deploy-antd-ftp:
     name: Deploy Push Antd Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -94,7 +94,7 @@ jobs:
 
   deploy-ele-ftp:
     name: Deploy Push Element Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -125,7 +125,7 @@ jobs:
 
   deploy-naive-ftp:
     name: Deploy Push Naive Ftp
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin'
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

.github/workflows/draft.yml

@@ -17,7 +17,6 @@ jobs:
       # write permission is required for autolabeler
       # otherwise, read permission is required at least
       pull-requests: write
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
       - uses: release-drafter/release-drafter@v6

.github/workflows/issue-close-require.yml

@@ -3,29 +3,23 @@ name: Issue Close Require
 
 # 触发条件：每天零点
 on:
-  workflow_dispatch:
   schedule:
-    - cron: '0 0 * * *'
+    - cron: "0 0 * * *"
 
 permissions:
   pull-requests: write
   contents: write
-  issues: write
 
 jobs:
   close-issues:
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
+
     steps:
-      # 关闭未活动的 Issues
+      # 步骤1：关闭未活动的 Issues
       - name: Close Inactive Issues
-        uses: actions/stale@v9
+        uses: actions-cool/issues-helper@v3
         with:
-          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
-          stale-issue-label: needs-reproduction # Label that flags an issue as stale.
-          only-labels: needs-reproduction # Only process these issues
-          days-before-issue-close: 3
-          ignore-updates: true
-          remove-stale-when-updated: false
-          close-issue-message: This issue was closed because it was open for 3 days without a valid reproduction.
-          close-issue-label: closed-by-action
+          actions: "close-issues" # 执行动作：关闭 Issues
+          token: ${{ secrets.GITHUB_TOKEN }} # GitHub Token，用于认证
+          labels: "needs reproduction" # 目标标签
+          inactive-day: 3 # 未活动天数阈值

.github/workflows/issue-labeled.yml

@@ -13,34 +13,33 @@ permissions:
 
 jobs:
   reply-labeled:
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
       - name: remove enhancement pending
         if: github.event.label.name == 'enhancement'
         uses: actions-cool/issues-helper@v3
         with:
-          actions: 'remove-labels'
+          actions: "remove-labels"
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
-          labels: 'enhancement: pending triage'
+          labels: "enhancement: pending triage"
 
       - name: remove bug pending
         if: github.event.label.name == 'bug'
         uses: actions-cool/issues-helper@v3
         with:
-          actions: 'remove-labels'
+          actions: "remove-labels"
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
-          labels: 'bug: pending triage'
+          labels: "bug: pending triage"
 
       - name: needs reproduction
         if: github.event.label.name == 'needs reproduction'
         uses: actions-cool/issues-helper@v3
         with:
-          actions: 'create-comment, remove-labels'
+          actions: "create-comment, remove-labels"
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
             Hello @${{ github.event.issue.user.login }}. Please provide the complete reproduction steps and code. Issues labeled by `needs reproduction` will be closed if no activities in 3 days.
-          labels: 'bug: pending triage'
+          labels: "bug: pending triage"

.github/workflows/lock.yml

@@ -2,7 +2,7 @@ name: Lock Threads
 
 on:
   schedule:
-    - cron: '0 0 * * *'
+    - cron: "0 0 * * *"
   workflow_dispatch:
 
 permissions:
@@ -11,14 +11,13 @@ permissions:
 
 jobs:
   action:
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
       - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          issue-inactive-days: '14'
-          issue-lock-reason: ''
-          pr-inactive-days: '30'
-          pr-lock-reason: ''
-          process-only: 'issues, prs'
+          issue-inactive-days: "30"
+          issue-lock-reason: ""
+          pr-inactive-days: "30"
+          pr-lock-reason: ""
+          process-only: "issues, prs"

.github/workflows/release-tag.yml

@@ -3,10 +3,10 @@ name: Create Release Tag
 on:
   push:
     tags:
-      - 'v*.*.*' # Push events to matching v*, i.e. v1.0, v20.15.10
+      - "v*.*.*" # Push events to matching v*, i.e. v1.0, v20.15.10
 
 env:
-  HUSKY: '0'
+  HUSKY: "0"
 
 permissions:
   pull-requests: write
@@ -15,7 +15,6 @@ permissions:
 jobs:
   build:
     name: Create Release
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     strategy:
       matrix:

.github/workflows/semantic-pull-request.yml

@@ -9,9 +9,8 @@ on:
 
 jobs:
   main:
-    name: Semantic Pull Request
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
+    name: Semantic Pull Request
     steps:
       - name: Validate PR title
         uses: amannn/action-semantic-pull-request@v5

.github/workflows/stale.yml

@@ -1,19 +1,18 @@
-name: 'Close stale issues'
+name: "Close stale issues"
 
 on:
   schedule:
-    - cron: '0 1 * * *'
+    - cron: "0 1 * * *"
 
 jobs:
   stale:
-    if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v9
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'
-          stale-pr-message: 'This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'
-          exempt-issue-labels: 'bug,enhancement'
+          stale-issue-message: "This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days"
+          stale-pr-message: "This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days"
+          exempt-issue-labels: "bug,enhancement"
           days-before-stale: 60
           days-before-close: 7

.gitpod.yml

@@ -3,4 +3,4 @@ ports:
     onOpen: open-preview
 tasks:
   - init: corepack enable && pnpm install
-    command: pnpm run dev:play
+    command: pnpm run dev

.vscode/extensions.json

@@ -19,9 +19,7 @@
     // i18n 插件
     "Lokalise.i18n-ally",
     // CSS 变量提示
-    "vunguyentuan.vscode-css-variables",
-    // 在 package.json 中显示 PNPM catalog 的版本
-    "antfu.pnpm-catalog-lens"
+    "vunguyentuan.vscode-css-variables"
   ],
   "unwantedRecommendations": [
     // 和 volar 冲突

.vscode/settings.json

@@ -212,6 +212,7 @@
     "*.env": "$(capture).env.*",
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
+    "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf",
     "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
     "tailwind.config.mjs": "postcss.*"
   },

README.ja-JP.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -125,15 +125,11 @@ pnpm build
 
 [@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)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/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>
 

README.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -124,15 +124,11 @@ Support modern browsers, not IE
 
 [@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)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/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>
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -77,10 +77,6 @@ pnpm dev
 pnpm build
 ```
 
-## 更新日志
-
-[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
-
 ## 如何贡献
 
 非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
@@ -124,18 +120,18 @@ pnpm build
 
 [@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](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/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>
 
+## 更新日志
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
 ## Contributor
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">

apps/backend-mock/api/menu/all.ts

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

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

@@ -1,48 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { verifyAccessToken } from '~/utils/jwt-utils';
-import { unAuthorizedResponse } 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 } = getQuery(event);
-  return usePageResponseSuccess(page as string, pageSize as string, mockData);
-});

apps/backend-mock/api/user/info.ts

@@ -6,5 +6,6 @@ export default eventHandler((event) => {
   if (!userinfo) {
     return unAuthorizedResponse(event);
   }
+
   return useResponseSuccess(userinfo);
 });

apps/backend-mock/package.json

@@ -10,12 +10,11 @@
     "start": "nitro dev"
   },
   "dependencies": {
-    "@faker-js/faker": "catalog:",
-    "jsonwebtoken": "catalog:",
-    "nitropack": "catalog:"
+    "jsonwebtoken": "^9.0.2",
+    "nitropack": "^2.9.7"
   },
   "devDependencies": {
-    "@types/jsonwebtoken": "catalog:",
-    "h3": "catalog:"
+    "@types/jsonwebtoken": "^9.0.6",
+    "h3": "^1.12.0"
   }
 }

apps/backend-mock/utils/response.ts

@@ -9,27 +9,6 @@ export function useResponseSuccess<T = any>(data: T) {
   };
 }
 
-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,
@@ -41,25 +20,10 @@ export function useResponseError(message: string, error: any = null) {
 
 export function forbiddenResponse(event: H3Event<EventHandlerRequest>) {
   setResponseStatus(event, 403);
-  return useResponseError('Forbidden Exception', 'Forbidden Exception');
+  return useResponseError('ForbiddenException', 'Forbidden Exception');
 }
 
 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));
+  return useResponseError('UnauthorizedException', 'Unauthorized Exception');
 }

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.4.0-beta.1",
+  "version": "5.3.0-beta.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,11 +40,11 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "catalog:",
-    "ant-design-vue": "catalog:",
-    "dayjs": "catalog:",
-    "pinia": "catalog:",
-    "vue": "catalog:",
-    "vue-router": "catalog:"
+    "@vueuse/core": "^11.0.3",
+    "ant-design-vue": "^4.2.3",
+    "dayjs": "^1.11.13",
+    "pinia": "2.2.2",
+    "vue": "^3.5.4",
+    "vue-router": "^4.4.3"
   }
 }

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

@@ -4,7 +4,6 @@ import type {
   VbenFormProps,
 } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
@@ -28,13 +27,13 @@ import {
   Select,
   Space,
   Switch,
-  Textarea,
   TimePicker,
   TreeSelect,
   Upload,
 } from 'ant-design-vue';
 
-// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+// 业务表单组件适配
+
 export type FormComponentType =
   | 'AutoComplete'
   | 'Checkbox'
@@ -52,22 +51,11 @@ export type FormComponentType =
   | 'Select'
   | 'Space'
   | 'Switch'
-  | 'Textarea'
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
   | BaseFormComponentType;
 
-const withDefaultPlaceholder = <T extends Component>(
-  component: T,
-  type: 'input' | 'select',
-) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
-};
-
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -84,27 +72,23 @@ setupVbenForm<FormComponentType>({
       return h(Button, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider,
-    Input: withDefaultPlaceholder(Input, 'input'),
-    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
-    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
-    Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    Input,
+    InputNumber,
+    InputPassword,
+    Mentions,
     Radio,
     RadioGroup,
     RangePicker,
     Rate,
-    Select: withDefaultPlaceholder(Select, 'select'),
+    Select,
     Space,
     Switch,
-    Textarea: withDefaultPlaceholder(Textarea, 'input'),
     TimePicker,
-    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    TreeSelect,
     Upload,
   },
   config: {
-    // ant design vue组件库默认都是 v-model:value
     baseModelPropName: 'value',
-
-    // 一些组件是 v-model:checked 或者 v-model:fileList
     modelPropNameMap: {
       Checkbox: 'checked',
       Radio: 'checked',
@@ -113,20 +97,12 @@ setupVbenForm<FormComponentType>({
     },
   },
   defineRules: {
-    // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
+      if ((!value && value !== 0) || value.length === 0) {
         return $t('formRules.required', [ctx.label]);
       }
       return true;
     },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
   },
 });
 

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

@@ -1,2 +1 @@
 export * from './form';
-export * from './vxe-table';

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

@@ -1,59 +0,0 @@
-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: true,
-        minHeight: 180,
-        proxyConfig: {
-          autoLoad: true,
-          response: {
-            result: 'items',
-            total: 'total',
-            list: 'items',
-          },
-          showActiveMsg: true,
-          showResponseMsg: false,
-        },
-        round: true,
-        size: 'small',
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellImage' },
-    vxeUI.renderer.add('CellImage', {
-      renderDefault(_renderOpts, params) {
-        const { column, row } = params;
-        return h(Image, { src: row[column.field] });
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellLink' },
-    vxeUI.renderer.add('CellLink', {
-      renderDefault(renderOpts) {
-        const { props } = renderOpts;
-        return h(
-          Button,
-          { size: 'small', type: 'link' },
-          { default: () => props?.text },
-        );
-      },
-    });
-
-    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
-    // vxeUI.formats.add
-  },
-  useVbenForm,
-});
-
-export { useVbenVxeGrid };
-
-export type * from '@vben/plugins/vxe-table';

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

@@ -3,13 +3,17 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password?: string;
-    username?: string;
+    password: string;
+    username: string;
   }
 
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
+    desc: string;
+    realName: string;
+    userId: string;
+    username: string;
   }
 
   export interface RefreshTokenResult {

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

@@ -1,8 +1,6 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
-
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -70,7 +68,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
+  client.addResponseInterceptor({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -95,14 +93,7 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   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);
-    }),
+    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
   );
 
   return client;

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

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref } 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,
@@ -55,7 +54,6 @@ const notifications = ref<NotificationItem[]>([
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
-const { destroyWatermark, updateWatermark } = useWatermark();
 const showDot = computed(() =>
   notifications.value.some((item) => !item.isRead),
 );
@@ -105,21 +103,6 @@ function handleNoticeClear() {
 function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
-watch(
-  () => preferences.app.watermark,
-  async (enable) => {
-    if (enable) {
-      await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
-      });
-    } else {
-      destroyWatermark();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
 </script>
 
 <template>

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

@@ -34,7 +34,9 @@ function setupCommonGuard(router: Router) {
   router.afterEach((to) => {
     // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
 
-    loadedPaths.add(to.path);
+    if (preferences.tabbar.enable) {
+      loadedPaths.add(to.path);
+    }
 
     // 关闭页面加载进度条
     if (preferences.transition.progress) {

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

@@ -19,12 +19,7 @@ const router = createRouter({
       : 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 };
-  },
+  scrollBehavior: () => ({ left: 0, top: 0 }),
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -29,7 +29,6 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
-          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

apps/web-antd/src/router/routes/modules/vben.ts

@@ -58,7 +58,6 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -69,7 +68,6 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },

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

@@ -76,11 +76,7 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    try {
-      await logoutApi();
-    } catch {
-      // 不做任何处理
-    }
+    await logoutApi();
     resetAllStores();
     accessStore.setLoginExpired(false);
 

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

@@ -2,9 +2,9 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { BasicOption } from '@vben/types';
 
-import { computed, markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { AuthenticationLogin, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
@@ -15,15 +15,15 @@ const authStore = useAuthStore();
 
 const MOCK_USER_OPTIONS: BasicOption[] = [
   {
-    label: 'Super',
+    label: '超级管理员',
     value: 'vben',
   },
   {
-    label: 'Admin',
+    label: '管理员',
     value: 'admin',
   },
   {
-    label: 'User',
+    label: '用户',
     value: 'jack',
   },
 ];
@@ -78,13 +78,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       label: $t('authentication.password'),
       rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
-    {
-      component: markRaw(SliderCaptcha),
-      fieldName: 'captcha',
-      rules: z.boolean().refine((value) => value, {
-        message: $t('authentication.verifyRequiredTip'),
-      }),
-    },
   ];
 });
 </script>

apps/web-ele/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.4.0-beta.1",
+  "version": "5.3.0-beta.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,14 +40,14 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "catalog:",
-    "dayjs": "catalog:",
-    "element-plus": "catalog:",
-    "pinia": "catalog:",
-    "vue": "catalog:",
-    "vue-router": "catalog:"
+    "@vueuse/core": "^11.0.3",
+    "dayjs": "^1.11.13",
+    "element-plus": "^2.8.2",
+    "pinia": "2.2.2",
+    "vue": "^3.5.4",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "unplugin-element-plus": "catalog:"
+    "unplugin-element-plus": "^0.8.0"
   }
 }

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

@@ -4,7 +4,6 @@ import type {
   VbenFormProps,
 } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
@@ -43,16 +42,6 @@ export type FormComponentType =
   | 'Upload'
   | BaseFormComponentType;
 
-const withDefaultPlaceholder = <T extends Component>(
-  component: T,
-  type: 'input' | 'select',
-) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
-};
-
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -67,14 +56,14 @@ setupVbenForm<FormComponentType>({
       return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: ElDivider,
-    Input: withDefaultPlaceholder(ElInput, 'input'),
-    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
+    Input: ElInput,
+    InputNumber: ElInputNumber,
     RadioGroup: ElRadioGroup,
-    Select: withDefaultPlaceholder(ElSelect, 'select'),
+    Select: ElSelect,
     Space: ElSpace,
     Switch: ElSwitch,
     TimePicker: ElTimePicker,
-    TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
+    TreeSelect: ElTreeSelect,
     Upload: ElUpload,
   },
   config: {
@@ -84,17 +73,11 @@ setupVbenForm<FormComponentType>({
   },
   defineRules: {
     required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
+      if ((!value && value !== 0) || value.length === 0) {
         return $t('formRules.required', [ctx.label]);
       }
       return true;
     },
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
   },
 });
 

apps/web-ele/src/adapter/index.ts

@@ -1,2 +1 @@
 export * from './form';
-export * from './vxe-table';

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

@@ -1,60 +0,0 @@
-import { h } from 'vue';
-
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-
-import { ElButton, ElImage } from 'element-plus';
-
-import { useVbenForm } from './form';
-
-setupVbenVxeTable({
-  configVxeTable: (vxeUI) => {
-    vxeUI.setConfig({
-      grid: {
-        align: 'center',
-        border: true,
-        minHeight: 180,
-        proxyConfig: {
-          autoLoad: true,
-          response: {
-            result: 'items',
-            total: 'total',
-            list: 'items',
-          },
-          showActiveMsg: true,
-          showResponseMsg: false,
-        },
-        round: true,
-        size: 'small',
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellImage' },
-    vxeUI.renderer.add('CellImage', {
-      renderDefault(_renderOpts, params) {
-        const { column, row } = params;
-        const src = row[column.field];
-        return h(ElImage, { src, previewSrcList: [src] });
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellLink' },
-    vxeUI.renderer.add('CellLink', {
-      renderDefault(renderOpts) {
-        const { props } = renderOpts;
-        return h(
-          ElButton,
-          { size: 'small', link: true },
-          { default: () => props?.text },
-        );
-      },
-    });
-
-    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
-    // vxeUI.formats.add
-  },
-  useVbenForm,
-});
-
-export { useVbenVxeGrid };
-
-export type * from '@vben/plugins/vxe-table';

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

@@ -3,13 +3,17 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password?: string;
-    username?: string;
+    password: string;
+    username: string;
   }
 
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
+    desc: string;
+    realName: string;
+    userId: string;
+    username: string;
   }
 
   export interface RefreshTokenResult {

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

@@ -1,8 +1,6 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
-
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -70,7 +68,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
+  client.addResponseInterceptor({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -95,14 +93,7 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   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 ?? '';
-      // 如果没有错误信息，则会根据状态码进行提示
-      ElMessage.error(errorMessage || msg);
-    }),
+    errorMessageResponseInterceptor((msg: string) => ElMessage.error(msg)),
   );
 
   return client;

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

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref } 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,
@@ -55,7 +54,6 @@ const notifications = ref<NotificationItem[]>([
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
-const { destroyWatermark, updateWatermark } = useWatermark();
 const showDot = computed(() =>
   notifications.value.some((item) => !item.isRead),
 );
@@ -105,21 +103,6 @@ function handleNoticeClear() {
 function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
-watch(
-  () => preferences.app.watermark,
-  async (enable) => {
-    if (enable) {
-      await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
-      });
-    } else {
-      destroyWatermark();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
 </script>
 
 <template>

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

@@ -34,7 +34,9 @@ function setupCommonGuard(router: Router) {
   router.afterEach((to) => {
     // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
 
-    loadedPaths.add(to.path);
+    if (preferences.tabbar.enable) {
+      loadedPaths.add(to.path);
+    }
 
     // 关闭页面加载进度条
     if (preferences.transition.progress) {

apps/web-ele/src/router/index.ts

@@ -19,12 +19,7 @@ const router = createRouter({
       : 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 };
-  },
+  scrollBehavior: () => ({ left: 0, top: 0 }),
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

apps/web-ele/src/router/routes/modules/dashboard.ts

@@ -29,7 +29,6 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
-          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

apps/web-ele/src/router/routes/modules/vben.ts

@@ -7,7 +7,6 @@ import {
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
 } from '@vben/constants';
-import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -59,7 +58,6 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -70,7 +68,6 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },

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

@@ -77,11 +77,7 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    try {
-      await logoutApi();
-    } catch {
-      // 不做任何处理
-    }
+    await logoutApi();
     resetAllStores();
     accessStore.setLoginExpired(false);
 

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

@@ -2,9 +2,9 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { BasicOption } from '@vben/types';
 
-import { computed, markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { AuthenticationLogin, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
@@ -15,15 +15,15 @@ const authStore = useAuthStore();
 
 const MOCK_USER_OPTIONS: BasicOption[] = [
   {
-    label: 'Super',
+    label: '超级管理员',
     value: 'vben',
   },
   {
-    label: 'Admin',
+    label: '管理员',
     value: 'admin',
   },
   {
-    label: 'User',
+    label: '用户',
     value: 'jack',
   },
 ];
@@ -78,13 +78,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       label: $t('authentication.password'),
       rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
-    {
-      component: markRaw(SliderCaptcha),
-      fieldName: 'captcha',
-      rules: z.boolean().refine((value) => value, {
-        message: $t('authentication.verifyRequiredTip'),
-      }),
-    },
   ];
 });
 </script>

apps/web-ele/src/views/demos/element/index.vue

@@ -7,7 +7,6 @@ import {
   ElMessage,
   ElNotification,
   ElSpace,
-  ElTable,
 } from 'element-plus';
 
 type NotificationType = 'error' | 'info' | 'success' | 'warning';
@@ -39,14 +38,6 @@ function notify(type: NotificationType) {
     type,
   });
 }
-const tableData = [
-  { prop1: '1', prop2: 'A' },
-  { prop1: '2', prop2: 'B' },
-  { prop1: '3', prop2: 'C' },
-  { prop1: '4', prop2: 'D' },
-  { prop1: '5', prop2: 'E' },
-  { prop1: '6', prop2: 'F' },
-];
 </script>
 
 <template>
@@ -83,11 +74,5 @@ const tableData = [
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
       </ElSpace>
     </ElCard>
-    <ElCard class="mb-5">
-      <ElTable :data="tableData" stripe>
-        <ElTable.TableColumn label="测试列1" prop="prop1" />
-        <ElTable.TableColumn label="测试列2" prop="prop2" />
-      </ElTable>
-    </ElCard>
   </Page>
 </template>

apps/web-naive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.4.0-beta.1",
+  "version": "5.3.0-beta.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,10 +40,10 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "catalog:",
-    "naive-ui": "catalog:",
-    "pinia": "catalog:",
-    "vue": "catalog:",
-    "vue-router": "catalog:"
+    "@vueuse/core": "^11.0.3",
+    "naive-ui": "^2.39.0",
+    "pinia": "2.2.2",
+    "vue": "^3.5.4",
+    "vue-router": "^4.4.3"
   }
 }

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

@@ -4,7 +4,6 @@ import type {
   VbenFormProps,
 } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
@@ -44,16 +43,6 @@ export type FormComponentType =
   | 'Upload'
   | BaseFormComponentType;
 
-const withDefaultPlaceholder = <T extends Component>(
-  component: T,
-  type: 'input' | 'select',
-) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
-};
-
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -62,28 +51,28 @@ setupVbenForm<FormComponentType>({
     DatePicker: NDatePicker,
     // 自定义默认的重置按钮
     DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(NButton, { ...props, attrs, type: 'info' }, slots);
+      return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots);
     },
     // 自定义默认的提交按钮
     DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(NButton, { ...props, attrs, type: 'primary' }, slots);
+      return h(
+        NButton,
+        { ...props, attrs, text: false, type: 'primary' },
+        slots,
+      );
     },
     Divider: NDivider,
-    Input: withDefaultPlaceholder(NInput, 'input'),
-    InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
+    Input: NInput,
+    InputNumber: NInputNumber,
     RadioGroup: NRadioGroup,
-    Select: withDefaultPlaceholder(NSelect, 'select'),
+    Select: NSelect,
     Space: NSpace,
     Switch: NSwitch,
     TimePicker: NTimePicker,
-    TreeSelect: withDefaultPlaceholder(NTreeSelect, 'select'),
+    TreeSelect: NTreeSelect,
     Upload: NUpload,
   },
   config: {
-    // naive-ui组件不接受onChang事件，所以需要禁用
-    disabledOnChangeListener: true,
-    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
-    emptyStateValue: null,
     baseModelPropName: 'value',
     modelPropNameMap: {
       Checkbox: 'checked',
@@ -93,17 +82,11 @@ setupVbenForm<FormComponentType>({
   },
   defineRules: {
     required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
+      if ((!value && value !== 0) || value.length === 0) {
         return $t('formRules.required', [ctx.label]);
       }
       return true;
     },
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
   },
 });
 

apps/web-naive/src/adapter/index.ts

@@ -1,3 +1 @@
 export * from './form';
-export * from './naive';
-export * from './vxe-table';

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

@@ -1,59 +0,0 @@
-import { h } from 'vue';
-
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-
-import { NButton, NImage } from 'naive-ui';
-
-import { useVbenForm } from './form';
-
-setupVbenVxeTable({
-  configVxeTable: (vxeUI) => {
-    vxeUI.setConfig({
-      grid: {
-        align: 'center',
-        border: true,
-        minHeight: 180,
-        proxyConfig: {
-          autoLoad: true,
-          response: {
-            result: 'items',
-            total: 'total',
-            list: 'items',
-          },
-          showActiveMsg: true,
-          showResponseMsg: false,
-        },
-        round: true,
-        size: 'small',
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellImage' },
-    vxeUI.renderer.add('CellImage', {
-      renderDefault(_renderOpts, params) {
-        const { column, row } = params;
-        return h(NImage, { src: row[column.field] });
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellLink' },
-    vxeUI.renderer.add('CellLink', {
-      renderDefault(renderOpts) {
-        const { props } = renderOpts;
-        return h(
-          NButton,
-          { size: 'small', type: 'primary', quaternary: true },
-          { default: () => props?.text },
-        );
-      },
-    });
-
-    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
-    // vxeUI.formats.add
-  },
-  useVbenForm,
-});
-
-export { useVbenVxeGrid };
-
-export type * from '@vben/plugins/vxe-table';

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

@@ -3,13 +3,17 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password?: string;
-    username?: string;
+    password: string;
+    username: string;
   }
 
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
+    desc: string;
+    realName: string;
+    userId: string;
+    username: string;
   }
 
   export interface RefreshTokenResult {

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

@@ -1,8 +1,6 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
-
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -12,7 +10,7 @@ import {
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
-import { message } from '#/adapter';
+import { message } from '#/naive';
 import { useAuthStore } from '#/store';
 
 import { refreshTokenApi } from './core';
@@ -69,7 +67,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
+  client.addResponseInterceptor({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -94,14 +92,7 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   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);
-    }),
+    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
   );
 
   return client;

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

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref } 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,
@@ -55,7 +54,6 @@ const notifications = ref<NotificationItem[]>([
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
-const { destroyWatermark, updateWatermark } = useWatermark();
 const showDot = computed(() =>
   notifications.value.some((item) => !item.isRead),
 );
@@ -105,22 +103,6 @@ function handleNoticeClear() {
 function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
-
-watch(
-  () => preferences.app.watermark,
-  async (enable) => {
-    if (enable) {
-      await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
-      });
-    } else {
-      destroyWatermark();
-    }
-  },
-  {
-    immediate: true,
-  },
-);
 </script>
 
 <template>

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

@@ -6,10 +6,10 @@ import type {
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
 
-import { message } from '#/adapter';
 import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
+import { message } from '#/naive';
 
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 

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

@@ -34,7 +34,9 @@ function setupCommonGuard(router: Router) {
   router.afterEach((to) => {
     // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
 
-    loadedPaths.add(to.path);
+    if (preferences.tabbar.enable) {
+      loadedPaths.add(to.path);
+    }
 
     // 关闭页面加载进度条
     if (preferences.transition.progress) {

apps/web-naive/src/router/index.ts

@@ -19,12 +19,7 @@ const router = createRouter({
       : 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 };
-  },
+  scrollBehavior: () => ({ left: 0, top: 0 }),
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

apps/web-naive/src/router/routes/modules/dashboard.ts

@@ -29,7 +29,6 @@ const routes: RouteRecordRaw[] = [
         path: '/workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
-          icon: 'carbon:workspace',
           title: $t('page.dashboard.workspace'),
         },
       },

apps/web-naive/src/router/routes/modules/demos.ts

@@ -25,6 +25,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         meta: {
+          icon: 'mdi:shield-key-outline',
           title: $t('page.demos.table'),
         },
         name: 'Table',

apps/web-naive/src/router/routes/modules/vben.ts

@@ -7,7 +7,6 @@ import {
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
 } from '@vben/constants';
-import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -59,7 +58,6 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
@@ -70,7 +68,6 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          icon: 'logos:element',
           link: VBEN_ELE_PREVIEW_URL,
           title: $t('page.vben.element-plus'),
         },

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

@@ -9,9 +9,9 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 
 import { defineStore } from 'pinia';
 
-import { notification } from '#/adapter';
 import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
 import { $t } from '#/locales';
+import { notification } from '#/naive';
 
 export const useAuthStore = defineStore('auth', () => {
   const accessStore = useAccessStore();
@@ -77,11 +77,7 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    try {
-      await logoutApi();
-    } catch {
-      // 不做任何处理
-    }
+    await logoutApi();
     resetAllStores();
     accessStore.setLoginExpired(false);
 

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

@@ -2,9 +2,9 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { BasicOption } from '@vben/types';
 
-import { computed, markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { AuthenticationLogin, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
@@ -15,15 +15,15 @@ const authStore = useAuthStore();
 
 const MOCK_USER_OPTIONS: BasicOption[] = [
   {
-    label: 'Super',
+    label: '超级管理员',
     value: 'vben',
   },
   {
-    label: 'Admin',
+    label: '管理员',
     value: 'admin',
   },
   {
-    label: 'User',
+    label: '用户',
     value: 'jack',
   },
 ];
@@ -78,13 +78,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       label: $t('authentication.password'),
       rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
-    {
-      component: markRaw(SliderCaptcha),
-      fieldName: 'captcha',
-      rules: z.boolean().refine((value) => value, {
-        message: $t('authentication.verifyRequiredTip'),
-      }),
-    },
   ];
 });
 </script>

cspell.json

@@ -19,7 +19,6 @@
     "intlify",
     "mkdist",
     "mockjs",
-    "vitejs",
     "noopener",
     "noreferrer",
     "nprogress",
@@ -47,10 +46,7 @@
     "vite",
     "echarts",
     "sortablejs",
-    "etag",
-    "naiveui",
-    "uicons",
-    "iconoir"
+    "etag"
   ],
   "ignorePaths": [
     "**/node_modules/**",

docs/.vitepress/components/demo-preview.vue

@@ -24,16 +24,14 @@ const parsedFiles = computed(() => {
       class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6"
     >
       <div class="flex w-full max-w-[700px] px-2">
-        <ClientOnly>
-          <slot v-if="parsedFiles.length > 0"></slot>
-          <div v-else class="text-destructive text-sm">
-            <span class="bg-destructive text-foreground rounded-sm px-1 py-1">
-              ERROR:
-            </span>
-            The preview directory does not exist. Please check the 'dir'
-            parameter.
-          </div>
-        </ClientOnly>
+        <slot v-if="parsedFiles.length > 0"></slot>
+        <div v-else class="text-destructive text-sm">
+          <span class="bg-destructive text-foreground rounded-sm px-1 py-1">
+            ERROR:
+          </span>
+          The preview directory does not exist. Please check the 'dir'
+          parameter.
+        </div>
       </div>
     </div>
     <PreviewGroup v-if="parsedFiles.length > 0" :files="parsedFiles">

docs/.vitepress/config/en.mts

@@ -133,19 +133,12 @@ function sidebarCommercial(): DefaultTheme.SidebarItem[] {
 function nav(): DefaultTheme.NavItem[] {
   return [
     {
-      activeMatch: '^/en/(guide|components)/',
       text: 'Doc',
       items: [
         {
-          activeMatch: '^/en/guide/',
           link: '/en/guide/introduction/vben',
           text: 'Guide',
         },
-        // {
-        //   activeMatch: '^/en/components/',
-        //   link: '/en/components/introduction',
-        //   text: 'Components',
-        // },
         {
           text: 'Historical Versions',
           items: [

docs/.vitepress/config/plugins/demo-preview.ts

@@ -47,10 +47,7 @@ export const demoPreviewPlugin = (md: MarkdownRenderer) => {
     const regex = /<DemoPreview[^>]*\sdir="([^"]*)"/g;
     // Iterate through the Markdown content and replace the pattern
     state.src = state.src.replaceAll(regex, (_match, dir) => {
-      const componentDir = join(process.cwd(), 'src', dir).replaceAll(
-        '\\',
-        '/',
-      );
+      const componentDir = join(process.cwd(), 'src', dir);
 
       let childFiles: string[] = [];
       let dirExists = true;
@@ -83,12 +80,7 @@ export const demoPreviewPlugin = (md: MarkdownRenderer) => {
       if (!state.tokens[index]) {
         return '';
       }
-      const firstString = 'index.vue';
-      childFiles = childFiles.sort((a, b) => {
-        if (a === firstString) return -1;
-        if (b === firstString) return 1;
-        return a.localeCompare(b, 'en', { sensitivity: 'base' });
-      });
+
       state.tokens[index].content =
         `<DemoPreview files="${encodeURIComponent(JSON.stringify(childFiles))}" ><${ComponentName}/>
         `;

docs/.vitepress/config/shared.mts

@@ -11,10 +11,6 @@ import {
 } from '@nolebase/vitepress-plugin-git-changelog/vite';
 import tailwind from 'tailwindcss';
 import { defineConfig, postcssIsolateStyles } from 'vitepress';
-import {
-  groupIconMdPlugin,
-  groupIconVitePlugin,
-} from 'vitepress-plugin-group-icons';
 
 import { demoPreviewPlugin } from './plugins/demo-preview';
 import { search as zhSearch } from './zh.mts';
@@ -25,14 +21,13 @@ export const shared = defineConfig({
   markdown: {
     preConfig(md) {
       md.use(demoPreviewPlugin);
-      md.use(groupIconMdPlugin);
     },
   },
   pwa: pwa(),
   srcDir: 'src',
   themeConfig: {
     i18nRouting: true,
-    logo: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+    logo: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
     search: {
       options: {
         locales: {
@@ -84,7 +79,6 @@ export const shared = defineConfig({
       }),
       GitChangelogMarkdownSection(),
       viteArchiverPlugin({ outputDir: '.vitepress' }),
-      groupIconVitePlugin(),
     ],
     server: {
       fs: {
@@ -138,12 +132,12 @@ function pwa(): PwaOptions {
       icons: [
         {
           sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-192.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
           type: 'image/png',
         },
         {
           sizes: '512x512',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-512.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
           type: 'image/png',
         },
       ],

docs/.vitepress/config/zh.mts

@@ -154,19 +154,15 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
       items: [
         {
           link: 'common-ui/vben-modal',
-          text: 'Modal 模态框',
+          text: 'Vben Modal 模态框',
         },
         {
           link: 'common-ui/vben-drawer',
-          text: 'Drawer 抽屉',
+          text: 'Vben Drawer 抽屉',
         },
         {
           link: 'common-ui/vben-form',
-          text: 'Form 表单',
-        },
-        {
-          link: 'common-ui/vben-count-to-animator',
-          text: 'CountToAnimator 数字动画',
+          text: 'Vben Form 表单',
         },
       ],
     },
@@ -176,16 +172,13 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
 function nav(): DefaultTheme.NavItem[] {
   return [
     {
-      activeMatch: '^/(guide|components)/',
       text: '文档',
       items: [
         {
-          activeMatch: '^/guide/',
           link: '/guide/introduction/vben',
           text: '指南',
         },
         {
-          activeMatch: '^/components/',
           link: '/components/introduction',
           text: '组件',
         },

docs/.vitepress/theme/components/site-layout.vue

@@ -1,92 +1,30 @@
 <script lang="ts" setup>
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue';
+import { nextTick, onMounted, watch } from 'vue';
 
-// import { useAntdDesignTokens } from '@vben/hooks';
-// import { initPreferences } from '@vben/preferences';
-
-import { ConfigProvider, theme } from 'ant-design-vue';
 import mediumZoom from 'medium-zoom';
 import { useRoute } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
 
 const { Layout } = DefaultTheme;
 const route = useRoute();
-// const { tokens } = useAntdDesignTokens();
 
 const initZoom = () => {
   // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
   mediumZoom('.VPContent img', { background: 'var(--vp-c-bg)' });
 };
 
-const isDark = ref(true);
-
 watch(
   () => route.path,
   () => nextTick(() => initZoom()),
 );
 
-// initPreferences({
-//   namespace: 'docs',
-// });
-
 onMounted(() => {
   initZoom();
 });
-
-// 使用该函数
-const observer = watchDarkModeChange((dark) => {
-  isDark.value = dark;
-});
-
-onBeforeUnmount(() => {
-  observer?.disconnect();
-});
-
-function watchDarkModeChange(callback: (isDark: boolean) => void) {
-  if (typeof window === 'undefined') {
-    return;
-  }
-  const htmlElement = document.documentElement;
-
-  const observer = new MutationObserver(() => {
-    const isDark = htmlElement.classList.contains('dark');
-    callback(isDark);
-  });
-
-  observer.observe(htmlElement, {
-    attributeFilter: ['class'],
-    attributes: true,
-  });
-
-  const initialIsDark = htmlElement.classList.contains('dark');
-  callback(initialIsDark);
-
-  return observer;
-}
-
-const tokenTheme = computed(() => {
-  const algorithm = isDark.value
-    ? [theme.darkAlgorithm]
-    : [theme.defaultAlgorithm];
-
-  return {
-    algorithm,
-    // token: tokens,
-  };
-});
 </script>
 
 <template>
-  <ConfigProvider :theme="tokenTheme">
-    <Layout />
-  </ConfigProvider>
+  <Layout />
 </template>
 
 <style>

docs/.vitepress/theme/index.ts

@@ -11,7 +11,6 @@ import { initHmPlugin } from './plugins/hm';
 
 import './styles';
 
-import 'virtual:group-icons.css';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 
 export default {

docs/.vitepress/theme/styles/base.css

@@ -5,18 +5,3 @@ html.dark {
 .dark .VPContent {
   /* background-color: #14161a; */
 }
-
-.form-valid-error p {
-  margin: 0;
-}
-
-/* 顶部导航栏选中项样式 */
-.VPNavBarMenuLink,
-.VPNavBarMenuGroup {
-  border-bottom: 1px solid transparent;
-}
-
-.VPNavBarMenuLink.active,
-.VPNavBarMenuGroup.active {
-  border-bottom-color: var(--vp-c-brand-1);
-}

docs/package.json

@@ -1,31 +1,25 @@
 {
   "name": "@vben/docs",
-  "version": "5.4.0-beta.1",
+  "version": "5.3.0-beta.1",
   "private": true,
   "scripts": {
     "build": "vitepress build",
     "dev": "vitepress dev",
     "docs:preview": "vitepress preview"
   },
-  "imports": {
-    "#/*": "./src/_env/*"
-  },
   "dependencies": {
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
-    "@vben/locales": "workspace:*",
     "@vben/styles": "workspace:*",
-    "ant-design-vue": "catalog:",
-    "lucide-vue-next": "catalog:",
-    "medium-zoom": "catalog:",
-    "radix-vue": "catalog:",
-    "vitepress-plugin-group-icons": "catalog:"
+    "lucide-vue-next": "^0.439.0",
+    "medium-zoom": "^1.1.0",
+    "radix-vue": "^1.9.5"
   },
   "devDependencies": {
-    "@nolebase/vitepress-plugin-git-changelog": "catalog:",
+    "@nolebase/vitepress-plugin-git-changelog": "^2.5.0",
     "@vben/vite-config": "workspace:*",
-    "@vite-pwa/vitepress": "catalog:",
-    "vitepress": "catalog:",
-    "vue": "catalog:"
+    "@vite-pwa/vitepress": "^0.5.3",
+    "vitepress": "^1.3.4",
+    "vue": "^3.5.4"
   }
 }

docs/src/_env/adapter/form.ts

@@ -1,127 +0,0 @@
-import type {
-  BaseFormComponentType,
-  VbenFormSchema as FormSchema,
-  VbenFormProps,
-} from '@vben/common-ui';
-
-import { h } from 'vue';
-
-import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-
-import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
-
-// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
-export type FormComponentType =
-  | 'AutoComplete'
-  | 'Checkbox'
-  | 'CheckboxGroup'
-  | 'DatePicker'
-  | 'Divider'
-  | 'Input'
-  | 'InputNumber'
-  | 'InputPassword'
-  | 'Mentions'
-  | 'Radio'
-  | 'RadioGroup'
-  | 'RangePicker'
-  | 'Rate'
-  | 'Select'
-  | 'Space'
-  | 'Switch'
-  | 'Textarea'
-  | 'TimePicker'
-  | 'TreeSelect'
-  | 'Upload'
-  | BaseFormComponentType;
-
-// 初始化表单组件，并注册到form组件内部
-setupVbenForm<FormComponentType>({
-  components: {
-    AutoComplete,
-    Checkbox,
-    CheckboxGroup,
-    DatePicker,
-    // 自定义默认的重置按钮
-    DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, type: 'default' }, slots);
-    },
-    // 自定义默认的提交按钮
-    DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, type: 'primary' }, slots);
-    },
-    Divider,
-    Input,
-    InputNumber,
-    InputPassword,
-    Mentions,
-    Radio,
-    RadioGroup,
-    RangePicker,
-    Rate,
-    Select,
-    Space,
-    Switch,
-    Textarea,
-    TimePicker,
-    TreeSelect,
-    Upload,
-  },
-  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('formRules.required', [ctx.label]);
-      }
-      return true;
-    },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
-
-const useVbenForm = useForm<FormComponentType>;
-
-export { useVbenForm, z };
-
-export type VbenFormSchema = FormSchema<FormComponentType>;
-export type { VbenFormProps };

docs/src/_env/adapter/index.ts

@@ -1 +0,0 @@
-export * from './form';

docs/src/commercial/community.md

@@ -10,18 +10,16 @@
 
 免费QQ群人数上限200，将会不定期清理。推荐加入QQ频道进行交流
 
-:::
-
 ## 微信群
 
-作者主要通过微信群提供帮助，如果你有问题，可以通过以下方式加入微信群。
-
-通过微信联系作者，注明加群来意：
-
 ::: tip
 
 因为微信群人数有限制，加微信群前，你可以通过[赞助](../sponsor/personal.md)任意金额，主动发送截图给作者，备注`加入微信群`即可。
 
 :::
 
-<img src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/wechat.jpg" style="width: 300px;"/>
+作者主要通过微信群提供帮助，如果你有问题，可以通过以下方式加入微信群。
+
+通过微信联系作者，注明加群来意：
+
+<img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>

docs/src/commercial/customized.md

@@ -7,6 +7,6 @@
 - 通过邮箱联系开发者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系开发者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
 
 我们会在第一时间回复您，定制费用根据需求而定。

docs/src/components/common-ui/vben-count-to-animator.md

@@ -1,52 +0,0 @@
----
-outline: deep
----
-
-# Vben CountToAnimator 数字动画
-
-框架提供的数字动画组件，支持数字动画效果。
-
-> 如果文档内没有参数说明，可以尝试在在线示例内寻找
-
-::: info 写在前面
-
-如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
-
-:::
-
-## 基础用法
-
-通过 `start-val` 和 `end-val`设置数字动画的开始值和结束值， 持续时间`3000`ms。
-
-<DemoPreview dir="demos/vben-count-to-animator/basic" />
-
-## 自定义前缀及分隔符
-
-通过 `prefix` 和 `separator` 设置数字动画的前缀和分隔符。
-
-<DemoPreview dir="demos/vben-count-to-animator/custom" />
-
-### Props
-
-| 属性名     | 描述           | 类型      | 默认值   |
-| ---------- | -------------- | --------- | -------- |
-| startVal   | 起始值         | `number`  | `0`      |
-| endVal     | 结束值         | `number`  | `2021`   |
-| duration   | 动画持续时间   | `number`  | `1500`   |
-| autoplay   | 自动执行       | `boolean` | `true`   |
-| prefix     | 前缀           | `string`  | -        |
-| suffix     | 后缀           | `string`  | -        |
-| separator  | 分隔符         | `string`  | `,`      |
-| color      | 字体颜色       | `string`  | -        |
-| useEasing  | 是否开启动画   | `boolean` | `true`   |
-| transition | 动画效果       | `string`  | `linear` |
-| decimals   | 保留小数点位数 | `number`  | `0`      |
-
-### Methods
-
-以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。
-
-| 事件名 | 描述         | 类型       |
-| ------ | ------------ | ---------- |
-| start  | 开始执行动画 | `()=>void` |
-| reset  | 重置         | `()=>void` |

docs/src/components/common-ui/vben-drawer.md

@@ -6,14 +6,6 @@ outline: deep
 
 框架提供的抽屉组件，支持`自动高度`、`loading`等功能。
 
-> 如果文档内没有参数说明，可以尝试在在线示例内寻找
-
-::: info 写在前面
-
-如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
-
-:::
-
 ## 基础用法
 
 使用 `useVbenDrawer` 创建最基础的模态框。

docs/src/components/common-ui/vben-form.md

@@ -4,454 +4,8 @@ outline: deep
 
 # Vben Form 表单
 
-框架提供的表单组件，可适配 `Element Plus`、`Ant Design Vue`、`Naive UI` 等框架。
+框架提供的表单组件，可适配 `Element Plus`、`Ant Design Vue`、`Naive`UI 框架。
 
-> 如果文档内没有参数说明，可以尝试在在线示例内寻找
+# 使用
 
-::: info 写在前面
-
-如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
-
-:::
-
-## 适配器
-
-表单底层使用 [vee-validate](https://vee-validate.logaretm.com/v4/) 进行表单验证，所以你可以使用 `vee-validate` 的所有功能。对于不同的 UI 框架，我们提供了适配器，以便更好的适配不同的 UI 框架。
-
-### 适配器说明
-
-每个应用都有不同的 UI 框架，所以在应用的 `src/adapter/form` 内部，你可以根据自己的需求，进行组件适配。下面是 `Ant Design Vue` 的适配器示例代码，可根据注释查看说明：
-
-::: details ant design 适配器
-
-```ts
-import type {
-  BaseFormComponentType,
-  VbenFormSchema as FormSchema,
-  VbenFormProps,
-} from '@vben/common-ui';
-
-import type { Component, SetupContext } from 'vue';
-import { h } from 'vue';
-
-import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-
-import {
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
-
-// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
-export type FormComponentType =
-  | 'AutoComplete'
-  | 'Checkbox'
-  | 'CheckboxGroup'
-  | 'DatePicker'
-  | 'Divider'
-  | 'Input'
-  | 'InputNumber'
-  | 'InputPassword'
-  | 'Mentions'
-  | 'Radio'
-  | 'RadioGroup'
-  | 'RangePicker'
-  | 'Rate'
-  | 'Select'
-  | 'Space'
-  | 'Switch'
-  | 'Textarea'
-  | 'TimePicker'
-  | 'TreeSelect'
-  | 'Upload'
-  | BaseFormComponentType;
-
-const withDefaultPlaceholder = <T extends Component>(
-  component: T,
-  type: 'input' | 'select',
-) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
-    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
-    return h(component, { ...props, ...attrs, placeholder }, slots);
-  };
-};
-
-// 初始化表单组件，并注册到form组件内部
-setupVbenForm<FormComponentType>({
-  components: {
-    AutoComplete,
-    Checkbox,
-    CheckboxGroup,
-    DatePicker,
-    // 自定义默认的重置按钮
-    DefaultResetActionButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, type: 'default' }, slots);
-    },
-    // 自定义默认的提交按钮
-    DefaultSubmitActionButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, type: 'primary' }, slots);
-    },
-    Divider,
-    Input: withDefaultPlaceholder(Input, 'input'),
-    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
-    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
-    Mentions: withDefaultPlaceholder(Mentions, 'input'),
-    Radio,
-    RadioGroup,
-    RangePicker,
-    Rate,
-    Select: withDefaultPlaceholder(Select, 'select'),
-    Space,
-    Switch,
-    Textarea: withDefaultPlaceholder(Textarea, 'input'),
-    TimePicker,
-    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
-    Upload,
-  },
-  config: {
-    // 是否禁用onChange事件监听，naive ui组件库默认不需要监听onChange事件，否则会在控制台报错
-    disabledOnChangeListener: true,
-    // 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('formRules.required', [ctx.label]);
-      }
-      return true;
-    },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
-
-const useVbenForm = useForm<FormComponentType>;
-
-export { useVbenForm, z };
-
-export type VbenFormSchema = FormSchema<FormComponentType>;
-export type { VbenFormProps };
-```
-
-:::
-
-## 基础用法
-
-::: tip README
-
-下方示例代码中的，存在一些国际化、主题色未适配问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
-
-:::
-
-使用 `useVbenForm` 创建最基础的表单。
-
-<DemoPreview dir="demos/vben-form/basic" />
-
-## 查询表单
-
-查询表单是一种特殊的表单，用于查询数据。查询表单不会触发表单验证，只会触发查询事件。
-
-<DemoPreview dir="demos/vben-form/query" />
-
-## 表单校验
-
-表单校验是一个非常重要的功能，可以通过 `rules` 属性进行校验。
-
-<DemoPreview dir="demos/vben-form/rules" />
-
-## 表单联动
-
-表单联动是一个非常常见的功能，可以通过 `dependencies` 属性进行联动。
-
-_注意_ 需要指定 `dependencies` 的 `triggerFields` 属性，设置由谁的改动来触发，以便表单组件能够正确的联动。
-
-<DemoPreview dir="demos/vben-form/dynamic" />
-
-## 自定义组件
-
-如果你的业务组件库没有提供某个组件，你可以自行封装一个组件，然后加到表单内部。
-
-<DemoPreview dir="demos/vben-form/custom" />
-
-## 操作
-
-一些常见的表单操作。
-
-<DemoPreview dir="demos/vben-form/api" />
-
-## API
-
-`useVbenForm` 返回一个数组，第一个元素是表单组件，第二个元素是表单的方法。
-
-```vue
-<script setup lang="ts">
-import { useVbenForm } from '#/adapter';
-
-// Form 为弹窗组件
-// formApi 为弹窗的方法
-const [Form, formApi] = useVbenForm({
-  // 属性
-  // 事件
-});
-</script>
-
-<template>
-  <Form />
-</template>
-```
-
-### FormApi
-
-useVbenForm 返回的第二个参数，是一个对象，包含了一些表单的方法。
-
-| 方法名 | 描述 | 类型 |
-| --- | --- | --- |
-| submitForm | 提交表单 | `(e:Event)=>Promise<Record<string,any>>` |
-| resetForm | 重置表单 | `()=>Promise<void>` |
-| setValues | 设置表单值, 默认会过滤不在schema中定义的field, 可通过filterFields形参关闭过滤 | `(fields: Record<string, any>, filterFields?: boolean, shouldValidate?: boolean) => Promise<void>` |
-| getValues | 获取表单值 | `(fields:Record<string, any>,shouldValidate: boolean = false)=>Promise<void>` |
-| validate | 表单校验 | `()=>Promise<void>` |
-| resetValidate | 重置表单校验 | `()=>Promise<void>` |
-| updateSchema | 更新formSchema | `(schema:FormSchema[])=>void` |
-| setFieldValue | 设置字段值 | `(field: string, value: any, shouldValidate?: boolean)=>Promise<void>` |
-| setState | 设置组件状态（props） | `(stateOrFn:\| ((prev: VbenFormProps) => Partial<VbenFormProps>)\| Partial<VbenFormProps>)=>Promise<void>` |
-| getState | 获取组件状态（props） | `()=>Promise<VbenFormProps>` |
-| form | 表单对象实例，可以操作表单，见 [useForm](https://vee-validate.logaretm.com/v4/api/use-form/) | - |
-
-## Props
-
-所有属性都可以传入 `useVbenForm` 的第一个参数中。
-
-| 属性名 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| layout | 表单项布局 | `'horizontal' \| 'vertical'` | `horizontal` |
-| showCollapseButton | 是否显示折叠按钮 | `boolean` | `false` |
-| wrapperClass | 表单的布局，基于tailwindcss | `any` | - |
-| actionWrapperClass | 表单操作区域class | `any` | - |
-| handleReset | 表单重置回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
-| handleSubmit | 表单提交回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
-| resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - |
-| submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - |
-| showDefaultActions | 是否显示默认操作按钮 | `boolean` | `true` |
-| collapsed | 是否折叠，在`是否展开，在showCollapseButton=true`时生效 | `boolean` | `false` |
-| collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` |
-| collapsedRows | 折叠时保持的行数 | `number` | `1` |
-| commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
-| schema | 表单项的每一项配置 | `FormSchema` | - |
-
-### TS 类型说明
-
-::: details ActionButtonOptions
-
-```ts
-export interface ActionButtonOptions {
-  /** 样式 */
-  class?: any;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 是否加载中 */
-  loading?: boolean;
-  /** 按钮大小 */
-  size?: ButtonVariantSize;
-  /** 按钮类型 */
-  variant?: ButtonVariants;
-  /** 是否显示 */
-  show?: boolean;
-  /** 按钮文本 */
-  text?: string;
-}
-```
-
-:::
-
-::: details FormCommonConfig
-
-```ts
-export interface FormCommonConfig {
-  /**
-   * 所有表单项的props
-   */
-  componentProps?: ComponentProps;
-  /**
-   * 所有表单项的控件样式
-   */
-  controlClass?: string;
-  /**
-   * 所有表单项的禁用状态
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * 所有表单项的控件样式
-   * @default {}
-   */
-  formFieldProps?: Partial<typeof Field>;
-  /**
-   * 所有表单项的栅格布局
-   * @default ""
-   */
-  formItemClass?: string;
-  /**
-   * 隐藏所有表单项label
-   * @default false
-   */
-  hideLabel?: boolean;
-  /**
-   * 是否隐藏必填标记
-   * @default false
-   */
-  hideRequiredMark?: boolean;
-  /**
-   * 所有表单项的label样式
-   * @default ""
-   */
-  labelClass?: string;
-  /**
-   * 所有表单项的label宽度
-   */
-  labelWidth?: number;
-  /**
-   * 所有表单项的wrapper样式
-   */
-  wrapperClass?: string;
-}
-```
-
-:::
-
-::: details FormSchema
-
-```ts
-export interface FormSchema<
-  T extends BaseFormComponentType = BaseFormComponentType,
-> extends FormCommonConfig {
-  /** 组件 */
-  component: Component | T;
-  /** 组件参数 */
-  componentProps?: ComponentProps;
-  /** 默认值 */
-  defaultValue?: any;
-  /** 依赖 */
-  dependencies?: FormItemDependencies;
-  /** 描述 */
-  description?: string;
-  /** 字段名 */
-  fieldName: string;
-  /** 帮助信息 */
-  help?: string;
-  /** 表单项 */
-  label?: string;
-  // 自定义组件内部渲染
-  renderComponentContent?: RenderComponentContentType;
-  /** 字段规则 */
-  rules?: FormSchemaRuleType;
-  /** 后缀 */
-  suffix?: CustomRenderType;
-}
-```
-
-:::
-
-### 表单联动
-
-表单联动需要通过 schema 内的 `dependencies` 属性进行联动，允许您添加字段之间的依赖项，以根据其他字段的值控制字段。
-
-```ts
-dependencies: {
-  // 只有当 name 字段的值变化时，才会触发联动
-  triggerFields: ['name'],
-  // 动态判断当前字段是否需要显示，不显示则直接销毁
-  if(values,formApi){},
-  // 动态判断当前字段是否需要显示，不显示用css隐藏
-  show(values,formApi){},
-  // 动态判断当前字段是否需要禁用
-  disabled(values,formApi){},
-  // 字段变更时，都会触发该函数
-  trigger(values,formApi){},
-  // 动态rules
-  rules(values,formApi){},
-  // 动态必填
-  required(values,formApi){},
-  // 动态组件参数
-  componentProps(values,formApi){},
-}
-```
-
-### 表单校验
-
-表单联动需要通过 schema 内的 `rules` 属性进行配置。
-
-rules的值可以是一个字符串，也可以是一个zod的schema。
-
-#### 字符串
-
-```ts
-// 表示字段必填，默认会根据适配器的required进行国际化
-{
-  rules: 'required';
-}
-
-// 表示字段必填，默认会根据适配器的required进行国际化，用于下拉选择之类
-{
-  rules: 'selectRequired';
-}
-```
-
-#### zod
-
-rules也支持 zod 的 schema，可以进行更复杂的校验，zod 的使用请查看 [zod文档](https://zod.dev/)。
-
-```ts
-import { z } from '#/adapter';
-
-// 基础类型
-{
-  rules: z.string().min(1, { message: '请输入字符串' });
-}
-
-// 可选，并且携带默认值
-{
-   rules: z.string().default('默认值').optional(),
-}
-
-// 复杂校验
-{
-   z.string().min(1, { message: "请输入" })
-            .refine((value) => value === "123", {
-              message: "值必须为123",
-            });
-}
-```
+TODO

docs/src/components/common-ui/vben-modal.md

@@ -6,14 +6,6 @@ outline: deep
 
 框架提供的模态框组件，支持`拖拽`、`全屏`、`自动高度`、`loading`等功能。
 
-> 如果文档内没有参数说明，可以尝试在在线示例内寻找
-
-::: info 写在前面
-
-如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
-
-:::
-
 ## 基础用法
 
 使用 `useVbenModal` 创建最基础的模态框。

docs/src/components/introduction.md

@@ -2,7 +2,7 @@
 
 ::: info README
 
-该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
+该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得组件封装的不好，或者不符合你的需求，你可以直接使用原生的组件，或者自己封装一个组件，不需要拘泥于框架提供的组件。我们只是提供了一些常用的组件，方便你快速开发。是否使用，取决于你的需求。
 
 :::
 

docs/src/demos/vben-count-to-animator/basic/index.vue

@@ -1,6 +0,0 @@
-<script lang="ts" setup>
-import { VbenCountToAnimator } from '@vben/common-ui';
-</script>
-<template>
-  <VbenCountToAnimator :duration="3000" :end-val="30000" :start-val="1" />
-</template>

docs/src/demos/vben-count-to-animator/custom/index.vue

@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-import { VbenCountToAnimator } from '@vben/common-ui';
-</script>
-<template>
-  <VbenCountToAnimator
-    :duration="3000"
-    :end-val="2000000"
-    :start-val="1"
-    prefix="$"
-    separator="/"
-  />
-</template>

docs/src/demos/vben-form/api/index.vue

@@ -1,236 +0,0 @@
-<script lang="ts" setup>
-import { Button, message, Space } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter';
-
-const [BaseForm, formApi] = useVbenForm({
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  // 使用 tailwindcss grid布局
-  // 提交函数
-  handleSubmit: onSubmit,
-  // 垂直布局，label和input在不同行，值为vertical
-  layout: 'horizontal',
-  // 水平布局，label和input在同一行
-  schema: [
-    {
-      // 组件需要在 #/adapter.ts内注册，并加上类型
-      component: 'Input',
-      // 对应组件的参数
-      componentProps: {
-        placeholder: '请输入用户名',
-      },
-      // 字段名
-      fieldName: 'field1',
-      // 界面显示的label
-      label: 'field1',
-    },
-    {
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        filterOption: true,
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-        placeholder: '请选择',
-        showSearch: true,
-      },
-      fieldName: 'fieldOptions',
-      label: '下拉选',
-    },
-  ],
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
-});
-
-function onSubmit(values: Record<string, any>) {
-  message.success({
-    content: `form values: ${JSON.stringify(values)}`,
-  });
-}
-
-function handleClick(
-  action:
-    | 'batchAddSchema'
-    | 'batchDeleteSchema'
-    | 'disabled'
-    | 'hiddenAction'
-    | 'hiddenResetButton'
-    | 'hiddenSubmitButton'
-    | 'labelWidth'
-    | 'resetDisabled'
-    | 'resetLabelWidth'
-    | 'showAction'
-    | 'showResetButton'
-    | 'showSubmitButton'
-    | 'updateActionAlign'
-    | 'updateResetButton'
-    | 'updateSchema'
-    | 'updateSubmitButton',
-) {
-  switch (action) {
-    case 'updateSchema': {
-      formApi.updateSchema([
-        {
-          componentProps: {
-            options: [
-              {
-                label: '选项1',
-                value: '1',
-              },
-              {
-                label: '选项2',
-                value: '2',
-              },
-              {
-                label: '选项3',
-                value: '3',
-              },
-            ],
-          },
-          fieldName: 'fieldOptions',
-        },
-      ]);
-      message.success('字段 `fieldOptions` 下拉选项更新成功。');
-      break;
-    }
-
-    case 'labelWidth': {
-      formApi.setState({
-        commonConfig: {
-          labelWidth: 150,
-        },
-      });
-      break;
-    }
-    case 'resetLabelWidth': {
-      formApi.setState({
-        commonConfig: {
-          labelWidth: 100,
-        },
-      });
-      break;
-    }
-    case 'disabled': {
-      formApi.setState({ commonConfig: { disabled: true } });
-      break;
-    }
-    case 'resetDisabled': {
-      formApi.setState({ commonConfig: { disabled: false } });
-      break;
-    }
-    case 'hiddenAction': {
-      formApi.setState({ showDefaultActions: false });
-      break;
-    }
-    case 'showAction': {
-      formApi.setState({ showDefaultActions: true });
-      break;
-    }
-    case 'hiddenResetButton': {
-      formApi.setState({ resetButtonOptions: { show: false } });
-      break;
-    }
-    case 'showResetButton': {
-      formApi.setState({ resetButtonOptions: { show: true } });
-      break;
-    }
-    case 'hiddenSubmitButton': {
-      formApi.setState({ submitButtonOptions: { show: false } });
-      break;
-    }
-    case 'showSubmitButton': {
-      formApi.setState({ submitButtonOptions: { show: true } });
-      break;
-    }
-    case 'updateResetButton': {
-      formApi.setState({
-        resetButtonOptions: { disabled: true },
-      });
-      break;
-    }
-    case 'updateSubmitButton': {
-      formApi.setState({
-        submitButtonOptions: { loading: true },
-      });
-      break;
-    }
-    case 'updateActionAlign': {
-      formApi.setState({
-        // 可以自行调整class
-        actionWrapperClass: 'text-center',
-      });
-      break;
-    }
-    case 'batchAddSchema': {
-      formApi.setState((prev) => {
-        const currentSchema = prev?.schema ?? [];
-        const newSchema = [];
-        for (let i = 0; i < 2; i++) {
-          newSchema.push({
-            component: 'Input',
-            componentProps: {
-              placeholder: '请输入',
-            },
-            fieldName: `field${i}${Date.now()}`,
-            label: `field+`,
-          });
-        }
-        return {
-          schema: [...currentSchema, ...newSchema],
-        };
-      });
-      break;
-    }
-    case 'batchDeleteSchema': {
-      formApi.setState((prev) => {
-        const currentSchema = prev?.schema ?? [];
-        return {
-          schema: currentSchema.slice(0, -2),
-        };
-      });
-      break;
-    }
-  }
-}
-</script>
-
-<template>
-  <div>
-    <Space class="mb-5 flex-wrap">
-      <Button @click="handleClick('updateSchema')">updateSchema</Button>
-      <Button @click="handleClick('labelWidth')">更改labelWidth</Button>
-      <Button @click="handleClick('resetLabelWidth')">还原labelWidth</Button>
-      <Button @click="handleClick('disabled')">禁用表单</Button>
-      <Button @click="handleClick('resetDisabled')">解除禁用</Button>
-      <Button @click="handleClick('hiddenAction')">隐藏操作按钮</Button>
-      <Button @click="handleClick('showAction')">显示操作按钮</Button>
-      <Button @click="handleClick('hiddenResetButton')">隐藏重置按钮</Button>
-      <Button @click="handleClick('showResetButton')">显示重置按钮</Button>
-      <Button @click="handleClick('hiddenSubmitButton')">隐藏提交按钮</Button>
-      <Button @click="handleClick('showSubmitButton')">显示提交按钮</Button>
-      <Button @click="handleClick('updateResetButton')">修改重置按钮</Button>
-      <Button @click="handleClick('updateSubmitButton')">修改提交按钮</Button>
-      <Button @click="handleClick('updateActionAlign')">
-        调整操作按钮位置
-      </Button>
-      <Button @click="handleClick('batchAddSchema')"> 批量添加表单项 </Button>
-      <Button @click="handleClick('batchDeleteSchema')">
-        批量删除表单项
-      </Button>
-    </Space>
-    <BaseForm />
-  </div>
-</template>

docs/src/demos/vben-form/basic/index.vue

@@ -1,231 +0,0 @@
-<script lang="ts" setup>
-import { message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter';
-
-const [BaseForm] = useVbenForm({
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  // 提交函数
-  handleSubmit: onSubmit,
-  // 垂直布局，label和input在不同行，值为vertical
-  // 水平布局，label和input在同一行
-  layout: 'horizontal',
-  schema: [
-    {
-      // 组件需要在 #/adapter.ts内注册，并加上类型
-      component: 'Input',
-      // 对应组件的参数
-      componentProps: {
-        placeholder: '请输入用户名',
-      },
-      // 字段名
-      fieldName: 'username',
-      // 界面显示的label
-      label: '字符串',
-    },
-    {
-      component: 'InputPassword',
-      componentProps: {
-        placeholder: '请输入密码',
-      },
-      fieldName: 'password',
-      label: '密码',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入',
-      },
-      fieldName: 'number',
-      label: '数字(带后缀)',
-      suffix: () => '¥',
-    },
-    {
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        filterOption: true,
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-        placeholder: '请选择',
-        showSearch: true,
-      },
-      fieldName: 'options',
-      label: '下拉选',
-    },
-    {
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-      fieldName: 'radioGroup',
-      label: '单选组',
-    },
-    {
-      component: 'Radio',
-      fieldName: 'radio',
-      label: '',
-      renderComponentContent: () => {
-        return {
-          default: () => ['Radio'],
-        };
-      },
-    },
-    {
-      component: 'CheckboxGroup',
-      componentProps: {
-        name: 'cname',
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-      },
-      fieldName: 'checkboxGroup',
-      label: '多选组',
-    },
-    {
-      component: 'Checkbox',
-      fieldName: 'checkbox',
-      label: '',
-      renderComponentContent: () => {
-        return {
-          default: () => ['我已阅读并同意'],
-        };
-      },
-    },
-    {
-      component: 'Mentions',
-      componentProps: {
-        options: [
-          {
-            label: 'afc163',
-            value: 'afc163',
-          },
-          {
-            label: 'zombieJ',
-            value: 'zombieJ',
-          },
-        ],
-        placeholder: '请输入',
-      },
-      fieldName: 'mentions',
-      label: '提及',
-    },
-    {
-      component: 'Rate',
-      fieldName: 'rate',
-      label: '评分',
-    },
-    {
-      component: 'Switch',
-      componentProps: {
-        class: 'w-auto',
-      },
-      fieldName: 'switch',
-      label: '开关',
-    },
-    {
-      component: 'DatePicker',
-      fieldName: 'datePicker',
-      label: '日期选择框',
-    },
-    {
-      component: 'RangePicker',
-      fieldName: 'rangePicker',
-      label: '范围选择器',
-    },
-    {
-      component: 'TimePicker',
-      fieldName: 'timePicker',
-      label: '时间选择框',
-    },
-    {
-      component: 'TreeSelect',
-      componentProps: {
-        allowClear: true,
-        placeholder: '请选择',
-        showSearch: true,
-        treeData: [
-          {
-            label: 'root 1',
-            value: 'root 1',
-            children: [
-              {
-                label: 'parent 1',
-                value: 'parent 1',
-                children: [
-                  {
-                    label: 'parent 1-0',
-                    value: 'parent 1-0',
-                    children: [
-                      {
-                        label: 'my leaf',
-                        value: 'leaf1',
-                      },
-                      {
-                        label: 'your leaf',
-                        value: 'leaf2',
-                      },
-                    ],
-                  },
-                  {
-                    label: 'parent 1-1',
-                    value: 'parent 1-1',
-                  },
-                ],
-              },
-              {
-                label: 'parent 2',
-                value: 'parent 2',
-              },
-            ],
-          },
-        ],
-        treeNodeFilterProp: 'label',
-      },
-      fieldName: 'treeSelect',
-      label: '树选择',
-    },
-  ],
-  wrapperClass: 'grid-cols-1',
-});
-
-function onSubmit(values: Record<string, any>) {
-  message.success({
-    content: `form values: ${JSON.stringify(values)}`,
-  });
-}
-</script>
-
-<template>
-  <BaseForm />
-</template>

docs/src/demos/vben-form/custom/index.vue

@@ -1,68 +0,0 @@
-<script lang="ts" setup>
-import { h } from 'vue';
-
-import { Input, message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter';
-
-const [Form] = useVbenForm({
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-    labelClass: 'w-2/6',
-  },
-  // 提交函数
-  handleSubmit: onSubmit,
-  // 垂直布局，label和input在不同行，值为vertical
-  // 水平布局，label和input在同一行
-  layout: 'horizontal',
-  schema: [
-    {
-      // 组件需要在 #/adapter.ts内注册，并加上类型
-      component: 'Input',
-      fieldName: 'field',
-      label: '自定义后缀',
-      suffix: () => h('span', { class: 'text-red-600' }, '元'),
-    },
-    {
-      component: 'Input',
-      fieldName: 'field1',
-      label: '自定义组件slot',
-      renderComponentContent: () => ({
-        prefix: () => 'prefix',
-        suffix: () => 'suffix',
-      }),
-    },
-    {
-      component: h(Input, { placeholder: '请输入' }),
-      fieldName: 'field2',
-      label: '自定义组件',
-      rules: 'required',
-    },
-    {
-      component: 'Input',
-      fieldName: 'field3',
-      label: '自定义组件(slot)',
-      rules: 'required',
-    },
-  ],
-  wrapperClass: 'grid-cols-1',
-});
-
-function onSubmit(values: Record<string, any>) {
-  message.success({
-    content: `form values: ${JSON.stringify(values)}`,
-  });
-}
-</script>
-
-<template>
-  <Form>
-    <template #field3="slotProps">
-      <Input placeholder="请输入" v-bind="slotProps" />
-    </template>
-  </Form>
-</template>

docs/src/demos/vben-form/dynamic/index.vue

@@ -1,168 +0,0 @@
-<script lang="ts" setup>
-import { message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter';
-
-const [Form] = useVbenForm({
-  // 提交函数
-  handleSubmit: onSubmit,
-  schema: [
-    {
-      component: 'Input',
-      defaultValue: 'hidden value',
-      dependencies: {
-        show: false,
-        // 随意一个字段改变时，都会触发
-        triggerFields: ['field1Switch'],
-      },
-      fieldName: 'hiddenField',
-      label: '隐藏字段',
-    },
-    {
-      component: 'Switch',
-      defaultValue: true,
-      fieldName: 'field1Switch',
-      help: '通过Dom控制销毁',
-      label: '显示字段1',
-    },
-    {
-      component: 'Switch',
-      defaultValue: true,
-      fieldName: 'field2Switch',
-      help: '通过css控制隐藏',
-      label: '显示字段2',
-    },
-    {
-      component: 'Switch',
-      fieldName: 'field3Switch',
-      label: '禁用字段3',
-    },
-    {
-      component: 'Switch',
-      fieldName: 'field4Switch',
-      label: '字段4必填',
-    },
-    {
-      component: 'Input',
-      dependencies: {
-        if(values) {
-          return !!values.field1Switch;
-        },
-        // 只有指定的字段改变时，才会触发
-        triggerFields: ['field1Switch'],
-      },
-      // 字段名
-      fieldName: 'field1',
-      // 界面显示的label
-      label: '字段1',
-    },
-    {
-      component: 'Input',
-      dependencies: {
-        show(values) {
-          return !!values.field2Switch;
-        },
-        triggerFields: ['field2Switch'],
-      },
-      fieldName: 'field2',
-      label: '字段2',
-    },
-    {
-      component: 'Input',
-      dependencies: {
-        disabled(values) {
-          return !!values.field3Switch;
-        },
-        triggerFields: ['field3Switch'],
-      },
-      fieldName: 'field3',
-      label: '字段3',
-    },
-    {
-      component: 'Input',
-      dependencies: {
-        required(values) {
-          return !!values.field4Switch;
-        },
-        triggerFields: ['field4Switch'],
-      },
-      fieldName: 'field4',
-      label: '字段4',
-    },
-    {
-      component: 'Input',
-      dependencies: {
-        rules(values) {
-          if (values.field1 === '123') {
-            return 'required';
-          }
-          return null;
-        },
-        triggerFields: ['field1'],
-      },
-      fieldName: 'field5',
-      help: '当字段1的值为`123`时，必填',
-      label: '动态rules',
-    },
-    {
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        class: 'w-full',
-        filterOption: true,
-        options: [
-          {
-            label: '选项1',
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
-        ],
-        placeholder: '请选择',
-        showSearch: true,
-      },
-      dependencies: {
-        componentProps(values) {
-          if (values.field2 === '123') {
-            return {
-              options: [
-                {
-                  label: '选项1',
-                  value: '1',
-                },
-                {
-                  label: '选项2',
-                  value: '2',
-                },
-                {
-                  label: '选项3',
-                  value: '3',
-                },
-              ],
-            };
-          }
-          return {};
-        },
-        triggerFields: ['field2'],
-      },
-      fieldName: 'field6',
-      help: '当字段2的值为`123`时，更改下拉选项',
-      label: '动态配置',
-    },
-  ],
-  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
-});
-
-function onSubmit(values: Record<string, any>) {
-  message.success({
-    content: `form values: ${JSON.stringify(values)}`,
-  });
-}
-</script>
-
-<template>
-  <Form />
-</template>