chore: release v5.3.0

* chore: fixed known issues with form components

* docs: add vben form doc

.dockerignore

@@ -3,3 +3,5 @@ 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 }}
@@ -20,7 +20,13 @@ permissions:
 jobs:
   post-update:
     # if: ${{ github.actor == 'dependabot[bot]' }}
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          # - macos-latest
+          - windows-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

.github/workflows/changeset-version.yml

@@ -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,6 @@ env:
 jobs:
   test:
     name: Test
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -56,7 +55,6 @@ jobs:
 
   lint:
     name: Lint
-    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -109,7 +107,6 @@ jobs:
   ci-ok:
     name: CI OK
     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,15 +9,15 @@
 # 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:
@@ -90,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/issue-close-require.yml

@@ -4,7 +4,7 @@ name: Issue Close Require
 # 触发条件：每天零点
 on:
   schedule:
-    - cron: "0 0 * * *"
+    - cron: '0 0 * * *'
 
 permissions:
   pull-requests: write
@@ -19,7 +19,7 @@ jobs:
       - name: Close Inactive Issues
         uses: actions-cool/issues-helper@v3
         with:
-          actions: "close-issues" # 执行动作：关闭 Issues
+          actions: 'close-issues' # 执行动作：关闭 Issues
           token: ${{ secrets.GITHUB_TOKEN }} # GitHub Token，用于认证
-          labels: "needs reproduction" # 目标标签
+          labels: 'needs reproduction' # 目标标签
           inactive-day: 3 # 未活动天数阈值

.github/workflows/issue-labeled.yml

@@ -19,27 +19,27 @@ jobs:
         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:
@@ -16,8 +16,8 @@ jobs:
       - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          issue-inactive-days: "30"
-          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

.github/workflows/stale.yml

@@ -1,8 +1,8 @@
-name: "Close stale issues"
+name: 'Close stale issues'
 
 on:
   schedule:
-    - cron: "0 1 * * *"
+    - cron: '0 1 * * *'
 
 jobs:
   stale:
@@ -11,8 +11,8 @@ jobs:
       - 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

.vscode/settings.json

@@ -212,7 +212,6 @@
     "*.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.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -129,7 +129,7 @@ pnpm build
 
 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

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.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -128,7 +128,7 @@ Support modern browsers, not IE
 
 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.6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

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.6/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -124,7 +124,7 @@ pnpm build
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

apps/backend-mock/package.json

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

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "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": "^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"
+    "@vueuse/core": "catalog:",
+    "ant-design-vue": "catalog:",
+    "dayjs": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   }
 }

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

@@ -27,13 +27,13 @@ import {
   Select,
   Space,
   Switch,
+  Textarea,
   TimePicker,
   TreeSelect,
   Upload,
 } from 'ant-design-vue';
 
-// 业务表单组件适配
-
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type FormComponentType =
   | 'AutoComplete'
   | 'Checkbox'
@@ -51,6 +51,7 @@ export type FormComponentType =
   | 'Select'
   | 'Space'
   | 'Switch'
+  | 'Textarea'
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
@@ -83,12 +84,16 @@ setupVbenForm<FormComponentType>({
     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',
@@ -97,12 +102,20 @@ setupVbenForm<FormComponentType>({
     },
   },
   defineRules: {
+    // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
-      if ((!value && value !== 0) || value.length === 0) {
+      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;
+    },
   },
 });
 

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

@@ -19,7 +19,12 @@ const router = createRouter({
       : createWebHistory(import.meta.env.VITE_BASE),
   // 应该添加到路由的初始路由列表。
   routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

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

@@ -29,6 +29,7 @@ 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,6 +58,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -68,6 +69,7 @@ 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,7 +76,11 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    await logoutApi();
+    try {
+      await logoutApi();
+    } catch {
+      // 不做任何处理
+    }
     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 } from 'vue';
+import { computed, markRaw } from 'vue';
 
-import { AuthenticationLogin, z } from '@vben/common-ui';
+import { AuthenticationLogin, SliderCaptcha, 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: '超级管理员',
+    label: 'Super',
     value: 'vben',
   },
   {
-    label: '管理员',
+    label: 'Admin',
     value: 'admin',
   },
   {
-    label: '用户',
+    label: 'User',
     value: 'jack',
   },
 ];
@@ -78,6 +78,13 @@ 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.3.0-beta.2",
+  "version": "5.3.0",
   "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": "^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"
+    "@vueuse/core": "catalog:",
+    "dayjs": "catalog:",
+    "element-plus": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   },
   "devDependencies": {
-    "unplugin-element-plus": "^0.8.0"
+    "unplugin-element-plus": "catalog:"
   }
 }

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

@@ -73,11 +73,17 @@ setupVbenForm<FormComponentType>({
   },
   defineRules: {
     required: (value, _params, ctx) => {
-      if ((!value && value !== 0) || value.length === 0) {
+      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;
+    },
   },
 });
 

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

@@ -19,7 +19,12 @@ const router = createRouter({
       : createWebHistory(import.meta.env.VITE_BASE),
   // 应该添加到路由的初始路由列表。
   routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

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

@@ -29,6 +29,7 @@ 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,6 +7,7 @@ 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';
@@ -58,6 +59,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: 'logos:naiveui',
           link: VBEN_NAIVE_PREVIEW_URL,
           title: $t('page.vben.naive-ui'),
         },
@@ -68,6 +70,7 @@ 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,7 +77,11 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    await logoutApi();
+    try {
+      await logoutApi();
+    } catch {
+      // 不做任何处理
+    }
     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 } from 'vue';
+import { computed, markRaw } from 'vue';
 
-import { AuthenticationLogin, z } from '@vben/common-ui';
+import { AuthenticationLogin, SliderCaptcha, 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: '超级管理员',
+    label: 'Super',
     value: 'vben',
   },
   {
-    label: '管理员',
+    label: 'Admin',
     value: 'admin',
   },
   {
-    label: '用户',
+    label: 'User',
     value: 'jack',
   },
 ];
@@ -78,6 +78,13 @@ 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-naive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "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": "^11.0.3",
-    "naive-ui": "^2.39.0",
-    "pinia": "2.2.2",
-    "vue": "^3.5.4",
-    "vue-router": "^4.4.3"
+    "@vueuse/core": "catalog:",
+    "naive-ui": "catalog:",
+    "pinia": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   }
 }

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

@@ -82,11 +82,17 @@ setupVbenForm<FormComponentType>({
   },
   defineRules: {
     required: (value, _params, ctx) => {
-      if ((!value && value !== 0) || value.length === 0) {
+      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;
+    },
   },
 });
 

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

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

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

@@ -10,7 +10,7 @@ import {
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
-import { message } from '#/naive';
+import { message } from '#/adapter';
 import { useAuthStore } from '#/store';
 
 import { refreshTokenApi } from './core';

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/index.ts

@@ -19,7 +19,12 @@ const router = createRouter({
       : createWebHistory(import.meta.env.VITE_BASE),
   // 应该添加到路由的初始路由列表。
   routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
   // 是否应该禁止尾部斜杠。
   // strict: true,
 });

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

@@ -29,6 +29,7 @@ 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/vben.ts

@@ -7,6 +7,7 @@ import {
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
 } from '@vben/constants';
+import { SvgAntdvLogoIcon } from '@vben/icons';
 
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -58,6 +59,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
+          icon: SvgAntdvLogoIcon,
           link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
@@ -68,6 +70,7 @@ 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,7 +77,11 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function logout(redirect: boolean = true) {
-    await logoutApi();
+    try {
+      await logoutApi();
+    } catch {
+      // 不做任何处理
+    }
     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 } from 'vue';
+import { computed, markRaw } from 'vue';
 
-import { AuthenticationLogin, z } from '@vben/common-ui';
+import { AuthenticationLogin, SliderCaptcha, 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: '超级管理员',
+    label: 'Super',
     value: 'vben',
   },
   {
-    label: '管理员',
+    label: 'Admin',
     value: 'admin',
   },
   {
-    label: '用户',
+    label: 'User',
     value: 'jack',
   },
 ];
@@ -78,6 +78,13 @@ 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

@@ -46,7 +46,10 @@
     "vite",
     "echarts",
     "sortablejs",
-    "etag"
+    "etag",
+    "naiveui",
+    "uicons",
+    "iconoir"
   ],
   "ignorePaths": [
     "**/node_modules/**",

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

@@ -24,14 +24,16 @@ 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">
-        <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>
+        </ClientOnly>
       </div>
     </div>
     <PreviewGroup v-if="parsedFiles.length > 0" :files="parsedFiles">

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

@@ -47,7 +47,10 @@ 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);
+      const componentDir = join(process.cwd(), 'src', dir).replaceAll(
+        '\\',
+        '/',
+      );
 
       let childFiles: string[] = [];
       let dirExists = true;
@@ -80,7 +83,12 @@ 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,6 +11,10 @@ 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';
@@ -21,13 +25,14 @@ 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.6/source/logo-v1.webp',
+    logo: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
     search: {
       options: {
         locales: {
@@ -79,6 +84,7 @@ export const shared = defineConfig({
       }),
       GitChangelogMarkdownSection(),
       viteArchiverPlugin({ outputDir: '.vitepress' }),
+      groupIconVitePlugin(),
     ],
     server: {
       fs: {
@@ -132,12 +138,12 @@ function pwa(): PwaOptions {
       icons: [
         {
           sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-192.png',
           type: 'image/png',
         },
         {
           sizes: '512x512',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-512.png',
           type: 'image/png',
         },
       ],

docs/.vitepress/config/zh.mts

@@ -154,15 +154,19 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
       items: [
         {
           link: 'common-ui/vben-modal',
-          text: 'Vben Modal 模态框',
+          text: 'Modal 模态框',
         },
         {
           link: 'common-ui/vben-drawer',
-          text: 'Vben Drawer 抽屉',
+          text: 'Drawer 抽屉',
         },
         {
           link: 'common-ui/vben-form',
-          text: 'Vben Form 表单',
+          text: 'Form 表单',
+        },
+        {
+          link: 'common-ui/vben-count-to-animator',
+          text: 'CountToAnimator 数字动画',
         },
       ],
     },

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

@@ -1,30 +1,92 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  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>
-  <Layout />
+  <ConfigProvider :theme="tokenTheme">
+    <Layout />
+  </ConfigProvider>
 </template>
 
 <style>

docs/.vitepress/theme/index.ts

@@ -11,6 +11,7 @@ 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,3 +5,7 @@ html.dark {
 .dark .VPContent {
   /* background-color: #14161a; */
 }
+
+.form-valid-error p {
+  margin: 0;
+}

docs/package.json

@@ -1,25 +1,33 @@
 {
   "name": "@vben/docs",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "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/hooks": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/preferences": "workspace:*",
     "@vben/styles": "workspace:*",
-    "lucide-vue-next": "^0.439.0",
-    "medium-zoom": "^1.1.0",
-    "radix-vue": "^1.9.5"
+    "ant-design-vue": "catalog:",
+    "lucide-vue-next": "catalog:",
+    "medium-zoom": "catalog:",
+    "radix-vue": "catalog:",
+    "vitepress-plugin-group-icons": "catalog:"
   },
   "devDependencies": {
-    "@nolebase/vitepress-plugin-git-changelog": "^2.5.0",
+    "@nolebase/vitepress-plugin-git-changelog": "catalog:",
     "@vben/vite-config": "workspace:*",
-    "@vite-pwa/vitepress": "^0.5.3",
-    "vitepress": "^1.3.4",
-    "vue": "^3.5.4"
+    "@vite-pwa/vitepress": "catalog:",
+    "vitepress": "catalog:",
+    "vue": "catalog:"
   }
 }

docs/src/_env/adapter/form.ts

@@ -0,0 +1,127 @@
+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

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

docs/src/commercial/community.md

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

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

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

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

@@ -4,8 +4,441 @@ outline: deep
 
 # Vben Form 表单
 
-框架提供的表单组件，可适配 `Element Plus`、`Ant Design Vue`、`Naive`UI 框架。
+框架提供的表单组件，可适配 `Element Plus`、`Ant Design Vue`、`Naive UI` 等框架。
 
-# 使用
+> 如果文档内没有参数说明，可以尝试在在线示例内寻找
 
-TODO
+::: 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 { 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 };
+```
+
+:::
+
+## 基础用法
+
+::: 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 | 设置表单值 | `()=>Promise<Record<string,any>>` |
+| 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` |
+| 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",
+            });
+}
+```

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

@@ -6,6 +6,14 @@ 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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,236 @@
+<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

@@ -0,0 +1,231 @@
+<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

@@ -0,0 +1,68 @@
+<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

@@ -0,0 +1,168 @@
+<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>

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

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  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: 'DatePicker',
+      fieldName: 'datePicker',
+      label: '日期选择框',
+    },
+  ],
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+});
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+</script>
+
+<template>
+  <QueryForm />
+</template>

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

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import { message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter';
+
+const [Form] = useVbenForm({
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 垂直布局，label和input在不同行，值为vertical
+  // 水平布局，label和input在同一行
+  layout: 'horizontal',
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入',
+      },
+      // 字段名
+      fieldName: 'field1',
+      // 界面显示的label
+      label: '字段1',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      defaultValue: '默认值',
+      fieldName: 'field2',
+      label: '默认值(必填)',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field3',
+      label: '默认值(非必填)',
+      rules: z.string().default('默认值').optional(),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field31',
+      label: '自定义信息',
+      rules: z.string().min(1, { message: '最少输入1个字符' }),
+    },
+    {
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入',
+      },
+      // 字段名
+      fieldName: 'field4',
+      // 界面显示的label
+      label: '邮箱',
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'number',
+      label: '数字',
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+        showSearch: true,
+      },
+      defaultValue: undefined,
+      fieldName: 'options',
+      label: '下拉选',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'radioGroup',
+      label: '单选组',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'CheckboxGroup',
+      componentProps: {
+        name: 'cname',
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'checkboxGroup',
+      label: '多选组',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'checkbox',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['我已阅读并同意'],
+        };
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'DatePicker',
+      defaultValue: undefined,
+      fieldName: 'datePicker',
+      label: '日期选择框',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'RangePicker',
+      defaultValue: undefined,
+      fieldName: 'rangePicker',
+      label: '区间选择框',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'password',
+      label: '密码',
+      rules: 'required',
+    },
+  ],
+  wrapperClass: 'grid-cols-1',
+});
+
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+</script>
+
+<template>
+  <Form />
+</template>

docs/src/en/guide/essentials/settings.md

@@ -163,7 +163,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -202,7 +202,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
-    source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

docs/src/en/index.md

@@ -8,7 +8,7 @@ hero:
   text: Enterprise-Level Management System Framework
   tagline: Fully Upgraded, Ready to Use, Simple and Efficient
   image:
-    src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/friend-links/index.md

@@ -9,7 +9,7 @@
 - 通过邮箱联系作者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系作者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/wechat.jpg" style="width: 300px;"/>
 
 ### 提供资料
 
@@ -22,6 +22,6 @@
   - 名称：Vben Admin
   - 链接：https://www.vben.pro
   - 描述：Vben Admin 企业级开箱即用的中后台前端解决方案
-  - Logo：https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
+  - Logo：https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp
 
 我们将定期的检查友情链接，如果发现您的网站已经删除了我们的友情链接以及链接地址是否正确。

docs/src/guide/essentials/settings.md

@@ -185,7 +185,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -224,7 +224,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
-    source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

docs/src/guide/introduction/quick-start.md

@@ -30,12 +30,12 @@ git -v
 
 ::: code-group
 
-```bash [GitHub]
+```sh [GitHub]
 # clone 代码
 git clone https://github.com/vbenjs/vue-vben-admin.git
 ```
 
-```bash [Gitee]
+```sh [Gitee]
 # clone 代码
 # Gitee 的代码可能不是最新的
 git clone https://gitee.com/annsion/vue-vben-admin.git

docs/src/guide/introduction/thin.md

@@ -65,3 +65,12 @@ pnpm install
   }
 }
 ```
+
+## 其他
+
+如果你想更进一步精简，你可以删除参考一下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
+
+- `.changeset` 文件夹用于管理版本变更
+- `.github` 文件夹用于存放 GitHub 的配置文件
+- `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
+- `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除

docs/src/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/sponsor/personal.md

@@ -2,7 +2,7 @@
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
+![](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
 
 您的赞助将帮助我们：
 

docs/tsconfig.json

@@ -1,6 +1,12 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@vben/tsconfig/web.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./src/_env/*"]
+    }
+  },
   "include": [
     ".vitepress/*.mts",
     ".vitepress/**/*.ts",

internal/lint-configs/commitlint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -23,11 +23,11 @@
     }
   },
   "dependencies": {
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
+    "@commitlint/cli": "catalog:",
+    "@commitlint/config-conventional": "catalog:",
     "@vben/node-utils": "workspace:*",
-    "commitlint-plugin-function-rules": "^4.0.0",
-    "cz-git": "^1.9.4",
-    "czg": "^1.9.4"
+    "commitlint-plugin-function-rules": "catalog:",
+    "cz-git": "catalog:",
+    "czg": "catalog:"
   }
 }

internal/lint-configs/eslint-config/package.json

@@ -27,31 +27,30 @@
     }
   },
   "dependencies": {
-    "eslint-config-turbo": "^2.1.1",
-    "eslint-plugin-command": "^0.2.4",
-    "eslint-plugin-import-x": "^4.2.1"
+    "eslint-config-turbo": "catalog:",
+    "eslint-plugin-command": "catalog:",
+    "eslint-plugin-import-x": "catalog:"
   },
   "devDependencies": {
-    "@eslint/js": "^9.10.0",
-    "@types/eslint": "^9.6.1",
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.5.0",
-    "eslint": "^9.10.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-jsdoc": "^50.2.2",
-    "eslint-plugin-jsonc": "^2.16.0",
-    "eslint-plugin-n": "^17.10.2",
-    "eslint-plugin-no-only-tests": "^3.3.0",
-    "eslint-plugin-perfectionist": "^3.5.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-regexp": "^2.6.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-unused-imports": "^4.1.3",
-    "eslint-plugin-vitest": "^0.5.4",
-    "eslint-plugin-vue": "^9.28.0",
-    "globals": "^15.9.0",
-    "jsonc-eslint-parser": "^2.4.0",
-    "vue-eslint-parser": "^9.4.3"
+    "@eslint/js": "catalog:",
+    "@types/eslint": "catalog:",
+    "@typescript-eslint/eslint-plugin": "catalog:",
+    "@typescript-eslint/parser": "catalog:",
+    "eslint": "catalog:",
+    "eslint-plugin-eslint-comments": "catalog:",
+    "eslint-plugin-jsdoc": "catalog:",
+    "eslint-plugin-jsonc": "catalog:",
+    "eslint-plugin-n": "catalog:",
+    "eslint-plugin-no-only-tests": "catalog:",
+    "eslint-plugin-perfectionist": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
+    "eslint-plugin-regexp": "catalog:",
+    "eslint-plugin-unicorn": "catalog:",
+    "eslint-plugin-unused-imports": "catalog:",
+    "eslint-plugin-vitest": "catalog:",
+    "eslint-plugin-vue": "catalog:",
+    "globals": "catalog:",
+    "jsonc-eslint-parser": "catalog:",
+    "vue-eslint-parser": "catalog:"
   }
 }

internal/lint-configs/eslint-config/src/configs/javascript.ts

@@ -147,7 +147,7 @@ export async function javascript(): Promise<Linter.Config[]> {
         'no-template-curly-in-string': 'error',
         'no-this-before-super': 'error',
         'no-throw-literal': 'error',
-        'no-undef': 'error',
+        'no-undef': 'off',
         'no-undef-init': 'error',
         'no-unexpected-multiline': 'error',
         'no-unmodified-loop-condition': 'error',

internal/lint-configs/eslint-config/src/configs/vue.ts

@@ -15,6 +15,22 @@ export async function vue(): Promise<Linter.Config[]> {
     {
       files: ['**/*.vue'],
       languageOptions: {
+        // globals: {
+        //   computed: 'readonly',
+        //   defineEmits: 'readonly',
+        //   defineExpose: 'readonly',
+        //   defineProps: 'readonly',
+        //   onMounted: 'readonly',
+        //   onUnmounted: 'readonly',
+        //   reactive: 'readonly',
+        //   ref: 'readonly',
+        //   shallowReactive: 'readonly',
+        //   shallowRef: 'readonly',
+        //   toRef: 'readonly',
+        //   toRefs: 'readonly',
+        //   watch: 'readonly',
+        //   watchEffect: 'readonly',
+        // },
         parser: parserVue,
         parserOptions: {
           ecmaFeatures: {

internal/lint-configs/prettier-config/index.mjs

@@ -8,12 +8,6 @@ export default {
         singleQuote: false,
       },
     },
-    {
-      files: ['*.yaml', '*.yml'],
-      options: {
-        singleQuote: false,
-      },
-    },
   ],
   plugins: ['prettier-plugin-tailwindcss'],
   printWidth: 80,

internal/lint-configs/prettier-config/package.json

@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.6"
+    "prettier": "catalog:",
+    "prettier-plugin-tailwindcss": "catalog:"
   }
 }

internal/lint-configs/stylelint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -23,21 +23,21 @@
     }
   },
   "dependencies": {
-    "@stylistic/stylelint-plugin": "^3.0.1",
-    "stylelint-config-recess-order": "^5.1.0",
-    "stylelint-scss": "^6.5.1"
+    "@stylistic/stylelint-plugin": "catalog:",
+    "stylelint-config-recess-order": "catalog:",
+    "stylelint-scss": "catalog:"
   },
   "devDependencies": {
-    "postcss": "^8.4.45",
-    "postcss-html": "^1.7.0",
-    "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.3",
-    "stylelint": "^16.9.0",
-    "stylelint-config-recommended": "^14.0.1",
-    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-order": "^6.0.4",
-    "stylelint-prettier": "^5.0.2"
+    "postcss": "catalog:",
+    "postcss-html": "catalog:",
+    "postcss-scss": "catalog:",
+    "prettier": "catalog:",
+    "stylelint": "catalog:",
+    "stylelint-config-recommended": "catalog:",
+    "stylelint-config-recommended-scss": "catalog:",
+    "stylelint-config-recommended-vue": "catalog:",
+    "stylelint-config-standard": "catalog:",
+    "stylelint-order": "catalog:",
+    "stylelint-prettier": "catalog:"
   }
 }

internal/node-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -28,20 +28,20 @@
     }
   },
   "dependencies": {
-    "@changesets/git": "^3.0.1",
-    "@manypkg/get-packages": "^2.2.2",
-    "chalk": "^5.3.0",
-    "consola": "^3.2.3",
-    "dayjs": "^1.11.13",
-    "execa": "^9.3.1",
-    "find-up": "^7.0.0",
-    "nanoid": "^5.0.7",
-    "ora": "^8.1.0",
-    "pkg-types": "^1.2.0",
-    "prettier": "^3.3.3",
-    "rimraf": "^6.0.1"
+    "@changesets/git": "catalog:",
+    "@manypkg/get-packages": "catalog:",
+    "chalk": "catalog:",
+    "consola": "catalog:",
+    "dayjs": "catalog:",
+    "execa": "catalog:",
+    "find-up": "catalog:",
+    "nanoid": "catalog:",
+    "ora": "catalog:",
+    "pkg-types": "catalog:",
+    "prettier": "catalog:",
+    "rimraf": "catalog:"
   },
   "devDependencies": {
-    "@types/chalk": "^2.2.0"
+    "@types/chalk": "catalog:"
   }
 }

internal/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -46,21 +46,21 @@
     "tailwindcss": "^3.4.3"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.246",
-    "@iconify/tailwind": "^1.1.3",
-    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.15",
-    "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.6",
-    "postcss": "^8.4.45",
-    "postcss-antd-fixes": "^0.2.0",
-    "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.0.3",
-    "tailwindcss": "^3.4.10",
-    "tailwindcss-animate": "^1.0.7"
+    "@iconify/json": "catalog:",
+    "@iconify/tailwind": "catalog:",
+    "@tailwindcss/nesting": "catalog:",
+    "@tailwindcss/typography": "catalog:",
+    "autoprefixer": "catalog:",
+    "cssnano": "catalog:",
+    "postcss": "catalog:",
+    "postcss-antd-fixes": "catalog:",
+    "postcss-import": "catalog:",
+    "postcss-preset-env": "catalog:",
+    "tailwindcss": "catalog:",
+    "tailwindcss-animate": "catalog:"
   },
   "devDependencies": {
-    "@types/postcss-import": "^14.0.3",
+    "@types/postcss-import": "catalog:",
     "@vben/node-utils": "workspace:*"
   }
 }

internal/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -20,6 +20,6 @@
   ],
   "dependencies": {
     "@vben/types": "workspace:*",
-    "vite": "^5.4.3"
+    "vite": "catalog:"
   }
 }

internal/vite-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/vite-config",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -27,32 +27,32 @@
     }
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@jspm/generator": "^2.3.0",
-    "archiver": "^7.0.1",
-    "cheerio": "1.0.0",
-    "get-port": "^7.1.0",
-    "html-minifier-terser": "^7.2.0",
-    "nitropack": "^2.9.7",
-    "resolve.exports": "^2.0.2",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-pwa": "^0.20.5",
-    "vite-plugin-vue-devtools": "^7.4.4"
+    "@intlify/unplugin-vue-i18n": "catalog:",
+    "@jspm/generator": "catalog:",
+    "archiver": "catalog:",
+    "cheerio": "catalog:",
+    "get-port": "catalog:",
+    "html-minifier-terser": "catalog:",
+    "nitropack": "catalog:",
+    "resolve.exports": "catalog:",
+    "vite-plugin-lib-inject-css": "catalog:",
+    "vite-plugin-pwa": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:"
   },
   "devDependencies": {
-    "@types/archiver": "^6.0.2",
-    "@types/html-minifier-terser": "^7.0.2",
+    "@types/archiver": "catalog:",
+    "@types/html-minifier-terser": "catalog:",
     "@vben/node-utils": "workspace:*",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "dayjs": "^1.11.13",
-    "dotenv": "^16.4.5",
-    "rollup": "^4.21.2",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.78.0",
-    "vite": "^5.4.3",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "4.2.1",
-    "vite-plugin-html": "^3.2.2"
+    "@vitejs/plugin-vue": "catalog:",
+    "@vitejs/plugin-vue-jsx": "catalog:",
+    "dayjs": "catalog:",
+    "dotenv": "catalog:",
+    "rollup": "catalog:",
+    "rollup-plugin-visualizer": "catalog:",
+    "sass": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-compression": "catalog:",
+    "vite-plugin-dts": "catalog:",
+    "vite-plugin-html": "catalog:"
   }
 }

internal/vite-config/src/config/application.ts

@@ -112,6 +112,7 @@ function createCssOptions(injectGlobalScss = true) {
               }
               return content;
             },
+            api: 'modern-compiler',
           },
         }
       : {},

internal/vite-config/src/options.ts

@@ -11,12 +11,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
     icons: [
       {
         sizes: '192x192',
-        src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-192.png',
         type: 'image/png',
       },
       {
         sizes: '512x512',
-        src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-512.png',
         type: 'image/png',
       },
     ],

internal/vite-config/src/typing.ts

@@ -137,12 +137,12 @@ type ApplicationOptions = ApplicationPluginOptions;
 
 type LibraryOptions = LibraryPluginOptions;
 
-type DefineApplicationOptions = (config?: ConfigEnv) => Promise<{
+type DefineApplicationOptions = (config: ConfigEnv) => Promise<{
   application?: ApplicationOptions;
   vite?: UserConfig;
 }>;
 
-type DefineLibraryOptions = (config?: ConfigEnv) => Promise<{
+type DefineLibraryOptions = (config: ConfigEnv) => Promise<{
   library?: LibraryOptions;
   vite?: UserConfig;
 }>;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-pro",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "private": true,
   "keywords": [
     "monorepo",
@@ -61,10 +61,10 @@
     "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.8",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.5.4",
+    "@changesets/changelog-github": "catalog:",
+    "@changesets/cli": "catalog:",
+    "@types/jsdom": "catalog:",
+    "@types/node": "catalog:",
     "@vben/commitlint-config": "workspace:*",
     "@vben/eslint-config": "workspace:*",
     "@vben/prettier-config": "workspace:*",
@@ -74,31 +74,31 @@
     "@vben/turbo-run": "workspace:*",
     "@vben/vite-config": "workspace:*",
     "@vben/vsh": "workspace:*",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/test-utils": "^2.4.6",
-    "autoprefixer": "^10.4.20",
-    "cross-env": "^7.0.3",
-    "cspell": "^8.14.2",
-    "husky": "^9.1.5",
-    "is-ci": "^3.0.1",
-    "jsdom": "^25.0.0",
-    "lint-staged": "^15.2.10",
-    "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.10",
-    "turbo": "^2.1.1",
-    "typescript": "^5.6.2",
-    "unbuild": "^2.0.0",
-    "vite": "^5.4.3",
-    "vitest": "^2.0.5",
-    "vue": "^3.5.4",
-    "vue-tsc": "^2.1.6"
+    "@vitejs/plugin-vue": "catalog:",
+    "@vitejs/plugin-vue-jsx": "catalog:",
+    "@vue/test-utils": "catalog:",
+    "autoprefixer": "catalog:",
+    "cross-env": "catalog:",
+    "cspell": "catalog:",
+    "husky": "catalog:",
+    "is-ci": "catalog:",
+    "jsdom": "catalog:",
+    "lint-staged": "catalog:",
+    "rimraf": "catalog:",
+    "tailwindcss": "catalog:",
+    "turbo": "catalog:",
+    "typescript": "catalog:",
+    "unbuild": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:",
+    "vue": "catalog:",
+    "vue-tsc": "catalog:"
   },
   "engines": {
-    "node": ">=20",
-    "pnpm": ">=9"
+    "node": ">=20.10.0",
+    "pnpm": ">=9.5.0"
   },
-  "packageManager": "pnpm@9.10.0",
+  "packageManager": "pnpm@9.11.0",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
@@ -109,7 +109,7 @@
       "@ctrl/tinycolor": "4.1.0",
       "clsx": "2.1.1",
       "pinia": "2.2.2",
-      "vue": "3.5.3"
+      "vue": "3.5.7"
     },
     "neverBuiltDependencies": [
       "canvas",

packages/@core/base/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/base/design/src/css/global.css

@@ -32,11 +32,15 @@
   body,
   html {
     @apply size-full overscroll-none;
+
+    /* scrollbar-gutter: stable; */
   }
 
   body {
     min-height: 100vh;
 
+    /* pointer-events: auto !important; */
+
     /* overflow: overlay; */
 
     /* -webkit-font-smoothing: antialiased; */
@@ -90,6 +94,7 @@
   }
 
   /* 只有非mac下才进行调整，mac下使用默认滚动条 */
+
   html:not([data-platform='macOs']) {
     ::-webkit-scrollbar {
       @apply h-[10px] w-[10px];

packages/@core/base/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.3.0-beta.2",
+  "version": "5.3.0",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -34,8 +34,8 @@
     }
   },
   "dependencies": {
-    "@iconify/vue": "^4.1.2",
-    "lucide-vue-next": "^0.439.0",
-    "vue": "^3.5.4"
+    "@iconify/vue": "catalog:",
+    "lucide-vue-next": "catalog:",
+    "vue": "catalog:"
   }
 }

packages/@core/base/icons/src/lucide.ts

@@ -10,6 +10,7 @@ export {
   ArrowUpToLine,
   Bell,
   BookOpenText,
+  Check,
   ChevronDown,
   ChevronLeft,
   ChevronRight,