chore: release v5.3.0-beta.2

chore: release v5.3.0-beta.1 [skip ci]
chore(deps): bump the non-breaking-changes group with 14 updates (#4347 )
2025-08-25 16:16:20 +08:00 · 2024-09-10 22:20:51 +08:00 · 2024-09-10 22:08:26 +08:00 · 2024-09-10 22:05:11 +08:00 · 2024-09-10 21:48:51 +08:00 · 2024-09-08 19:39:19 +08:00
535 changed files with 13746 additions and 5268 deletions
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -13,13 +13,13 @@ categories:
  - title: "🚀 Features"
    labels:
      - "feature"
-      - "enhancement"
  - title: "🐞 Bug Fixes"
    labels:
      - "bug"
  - title: "📈 Performance"
    labels:
      - "perf"
+      - "enhancement"
  - title: 📝 Documentation
    labels:
      - "documentation"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -23,7 +23,7 @@ jobs:
      matrix:
        os:
          - ubuntu-latest
-          - macos-latest
+          # - macos-latest
          - windows-latest
    timeout-minutes: 20
    steps:
@@ -62,7 +62,7 @@ jobs:
      matrix:
        os:
          - ubuntu-latest
-          - macos-latest
+          # - macos-latest
          - windows-latest

    steps:
@@ -85,7 +85,7 @@ jobs:
      matrix:
        os:
          - ubuntu-latest
-          - macos-latest
+          # - macos-latest
          - windows-latest
    steps:
      - name: Checkout code
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -6,7 +6,7 @@ on:
      - main

 jobs:
-  deploy-push-playground-ftp:
+  deploy-playground-ftp:
    name: Deploy Push Playground Ftp
    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
    runs-on: ubuntu-latest
@@ -27,7 +27,7 @@ jobs:
        uses: ./.github/actions/setup-node

      - name: Build
-        run: pnpm build:play && pnpm build:docs
+        run: pnpm build:play

      - name: Sync Playground files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
@@ -37,6 +37,22 @@ jobs:
          password: ${{ secrets.WEB_PLAYGROUND_FTP_PWSSWORD }}
          local-dir: ./playground/dist/

+  deploy-docs-ftp:
+    name: Deploy Push Docs Ftp
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm build:docs
+
      - name: Sync Docs files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
@@ -45,7 +61,7 @@ jobs:
          password: ${{ secrets.WEBSITE_FTP_PASSWORD }}
          local-dir: ./docs/.vitepress/dist/

-  deploy-push-antd-ftp:
+  deploy-antd-ftp:
    name: Deploy Push Antd Ftp
    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
    runs-on: ubuntu-latest
@@ -76,7 +92,7 @@ jobs:
          password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }}
          local-dir: ./apps/web-antd/dist/

-  deploy-push-ele-ftp:
+  deploy-ele-ftp:
    name: Deploy Push Element Ftp
    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
    runs-on: ubuntu-latest
@@ -107,7 +123,7 @@ jobs:
          password: ${{ secrets.WEB_ELE_FTP_PASSWORD }}
          local-dir: ./apps/web-ele/dist/

-  deploy-push-naive-ftp:
+  deploy-naive-ftp:
    name: Deploy Push Naive Ftp
    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
    runs-on: ubuntu-latest
--- a/.ls-lint.yml
+++ b/.ls-lint.yml
@@ -1,28 +0,0 @@
-ls:
-  .js: kebab-case | pointcase
-  .vue: kebab-case | pointcase
-  .ts: kebab-case | pointcase
-  .tsx: kebab-case | pointcase
-  .jsx: kebab-case | pointcase
-  .css: kebab-case | pointcase
-  .d.ts: kebab-case | pointcase
-  # shadcn 自动生成文件为 PascalCase 格式
-  packages/@core/ui-kit/shadcn-ui/src/components/ui:
-    .vue: PascalCase
-
-ignore:
-  - "**/*.png"
-  - "**/*.jpg"
-  - "**/*.jpeg"
-  - "**/*.jpeg"
-  - "**/*.gif"
-  - "**/_util.ts"
-  - "**/deps/**"
-  - "**/dist/**"
-  - "**/node_modules/**"
-  - "**/.turbo/**"
-  - .git
-  - .vscode
-  - .idea
-  - node_modules
-  - .cache
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -9,7 +9,7 @@
      "url": "http://localhost:5555",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/playground/src"
+      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
@@ -18,7 +18,7 @@
      "url": "http://localhost:5666",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-antd/src"
+      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
@@ -27,7 +27,7 @@
      "url": "http://localhost:5777",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-ele/src"
+      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
@@ -36,7 +36,7 @@
      "url": "http://localhost:5888",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}/apps/web-naive/src"
+      "webRoot": "${workspaceFolder}"
    }
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,7 +14,6 @@
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.cursorBlinking": "expand",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.largeFileOptimizations": false,
  "editor.accessibilitySupport": "off",
  "editor.cursorSmoothCaretAnimation": "on",
@@ -37,7 +36,34 @@
    "source.fixAll.stylelint": "explicit",
    "source.organizeImports": "never"
  },
-
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
  // extensions
  "extensions.ignoreRecommendations": true,

@@ -168,9 +194,10 @@

  "i18n-ally.localesPaths": [
    "packages/locales/src/langs",
-    "playground/src/langs",
+    "playground/src/locales/langs",
    "apps/*/src/locales/langs"
  ],
+  "i18n-ally.pathMatcher": "{locale}.json",
  "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
@@ -186,13 +213,12 @@
    "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,.ls-lint*,cspell.json",
+    "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
    "tailwind.config.mjs": "postcss.*"
  },
  "commentTranslate.hover.enabled": false,
  "i18n-ally.keystyle": "nested",
  "commentTranslate.multiLineMerge": true,
  "vue.server.hybridMode": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "vitest.disableWorkspaceWarning": true
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -5,6 +5,8 @@
 <h1>Vue Vben Admin</h1>
 </div>

+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
 **日本語** | [English](./README.md) | [中文](./README.zh-CN.md)

 ## 紹介
--- a/README.md
+++ b/README.md
@@ -5,6 +5,8 @@
 <h1>Vue Vben Admin</h1>
 </div>

+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
 **English** | [中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)

 ## Introduction
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -5,6 +5,8 @@
 <h1>Vue Vben Admin</h1>
 </div>

+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
 **中文** | [English](./README.md) | [日本語](./README.ja-JP.md)

 ## 简介
--- a/apps/backend-mock/error.ts
+++ b/apps/backend-mock/error.ts
@@ -1,7 +1,7 @@
 import type { NitroErrorHandler } from 'nitropack';

 const errorHandler: NitroErrorHandler = function (error, event) {
-  event.res.end(`[error handler] ${error.stack}`);
+  event.node.res.end(`[Error Handler] ${error.stack}`);
 };

 export default errorHandler;
--- a/apps/backend-mock/utils/jwt-utils.ts
+++ b/apps/backend-mock/utils/jwt-utils.ts
@@ -14,7 +14,7 @@ export interface UserPayload extends UserInfo {
 }

 export function generateAccessToken(user: UserInfo) {
-  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '1d' });
+  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '7d' });
 }

 export function generateRefreshToken(user: UserInfo) {
--- a/apps/web-antd/.env.production
+++ b/apps/web-antd/.env.production
@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash

 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-antd",
-  "version": "5.1.2",
+  "version": "5.3.0-beta.2",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
@@ -27,24 +27,24 @@
  },
  "dependencies": {
    "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
    "@vben/common-ui": "workspace:*",
    "@vben/constants": "workspace:*",
    "@vben/hooks": "workspace:*",
    "@vben/icons": "workspace:*",
    "@vben/layouts": "workspace:*",
    "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
    "@vben/preferences": "workspace:*",
    "@vben/request": "workspace:*",
    "@vben/stores": "workspace:*",
    "@vben/styles": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "@vueuse/core": "^11.0.1",
+    "@vueuse/core": "^11.0.3",
    "ant-design-vue": "^4.2.3",
    "dayjs": "^1.11.13",
    "pinia": "2.2.2",
-    "vue": "^3.4.38",
+    "vue": "^3.5.4",
    "vue-router": "^4.4.3"
  }
 }
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -0,0 +1,114 @@
+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,
+  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'
+  | '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,
+    TimePicker,
+    TreeSelect,
+    Upload,
+  },
+  config: {
+    baseModelPropName: 'value',
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Switch: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
--- a/apps/web-antd/src/adapter/index.ts
+++ b/apps/web-antd/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -42,7 +42,9 @@ export async function refreshTokenApi() {
 * 退出登录
 */
 export async function logoutApi() {
-  return requestClient.post('/auth/logout');
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
 }

 /**
--- a/apps/web-antd/src/layouts/auth.vue
+++ b/apps/web-antd/src/layouts/auth.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
  UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';

 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';

 const notifications = ref<NotificationItem[]>([
  {
@@ -87,8 +88,6 @@ const menus = computed(() => [
  },
 ]);

-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
      <AuthenticationLoginExpiredModal
        v-model:open="accessStore.loginExpired"
        :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
    </template>
    <template #lock-screen>
      <LockScreen :avatar @to-login="handleLogout" />
--- a/apps/web-antd/src/layouts/index.ts
+++ b/apps/web-antd/src/layouts/index.ts
@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');

 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);

-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };
--- a/apps/web-antd/src/views/_core/authentication/code-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';

-import { ref } from 'vue';
+import { computed, ref } from 'vue';

-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'CodeLogin' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
 * 异步处理登录操作
 * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {

 <template>
  <AuthenticationCodeLogin
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleLogin"
  />
 </template>
--- a/apps/web-antd/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-antd/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';

-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'ForgetPassword' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {

 <template>
  <AuthenticationForgetPassword
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleSubmit"
  />
 </template>
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -1,18 +1,91 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 import { useAuthStore } from '#/store';

 defineOptions({ name: 'Login' });

 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>

 <template>
  <AuthenticationLogin
+    :form-schema="formSchema"
    :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
    @submit="authStore.authLogin"
  />
 </template>
--- a/apps/web-antd/src/views/_core/authentication/register.vue
+++ b/apps/web-antd/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';

-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';

-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'Register' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
  // eslint-disable-next-line no-console
  console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {

 <template>
  <AuthenticationRegister
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleSubmit"
  />
 </template>
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
@@ -51,12 +55,27 @@ onMounted(() => {
      },
      trigger: 'axis',
    },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
    xAxis: {
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
      type: 'category',
    },
    yAxis: [
@@ -65,7 +84,10 @@ onMounted(() => {
          show: false,
        },
        max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
        type: 'value',
      },
    ],
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="访问来源">
          <AnalyticsVisitsSource />
--- a/apps/web-antd/src/views/demos/antd/index.vue
+++ b/apps/web-antd/src/views/demos/antd/index.vue
@@ -37,7 +37,7 @@ function notify(type: NotificationType) {
    description="支持多语言，主题功能集成切换等"
    title="Ant Design Vue组件使用演示"
  >
-    <Card title="按钮">
+    <Card class="mb-5" title="按钮">
      <Space>
        <Button>Default</Button>
        <Button type="primary"> Primary </Button>
--- a/apps/web-ele/.env.production
+++ b/apps/web-ele/.env.production
@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash

 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-ele",
-  "version": "5.1.2",
+  "version": "5.3.0-beta.2",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
@@ -27,24 +27,24 @@
  },
  "dependencies": {
    "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
    "@vben/common-ui": "workspace:*",
    "@vben/constants": "workspace:*",
    "@vben/hooks": "workspace:*",
    "@vben/icons": "workspace:*",
    "@vben/layouts": "workspace:*",
    "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
    "@vben/preferences": "workspace:*",
    "@vben/request": "workspace:*",
    "@vben/stores": "workspace:*",
    "@vben/styles": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "@vueuse/core": "^11.0.1",
+    "@vueuse/core": "^11.0.3",
    "dayjs": "^1.11.13",
-    "element-plus": "^2.8.1",
+    "element-plus": "^2.8.2",
    "pinia": "2.2.2",
-    "vue": "^3.4.38",
+    "vue": "^3.5.4",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -0,0 +1,89 @@
+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 {
+  ElButton,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDivider,
+  ElInput,
+  ElInputNumber,
+  ElRadioGroup,
+  ElSelect,
+  ElSpace,
+  ElSwitch,
+  ElTimePicker,
+  ElTreeSelect,
+  ElUpload,
+} from 'element-plus';
+// 业务表单组件适配
+
+export type FormComponentType =
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'RadioGroup'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+// 初始化表单组件，并注册到form组件内部
+setupVbenForm<FormComponentType>({
+  components: {
+    Checkbox: ElCheckbox,
+    CheckboxGroup: ElCheckboxGroup,
+    // 自定义默认的重置按钮
+    DefaultResetActionButton: (props, { attrs, slots }) => {
+      return h(ElButton, { ...props, attrs, type: 'info' }, slots);
+    },
+    // 自定义默认的提交按钮
+    DefaultSubmitActionButton: (props, { attrs, slots }) => {
+      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Divider: ElDivider,
+    Input: ElInput,
+    InputNumber: ElInputNumber,
+    RadioGroup: ElRadioGroup,
+    Select: ElSelect,
+    Space: ElSpace,
+    Switch: ElSwitch,
+    TimePicker: ElTimePicker,
+    TreeSelect: ElTreeSelect,
+    Upload: ElUpload,
+  },
+  config: {
+    modelPropNameMap: {
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
--- a/apps/web-ele/src/adapter/index.ts
+++ b/apps/web-ele/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
--- a/apps/web-ele/src/api/core/auth.ts
+++ b/apps/web-ele/src/api/core/auth.ts
@@ -42,7 +42,9 @@ export async function refreshTokenApi() {
 * 退出登录
 */
 export async function logoutApi() {
-  return requestClient.post('/auth/logout');
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
 }

 /**
--- a/apps/web-ele/src/layouts/auth.vue
+++ b/apps/web-ele/src/layouts/auth.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>
--- a/apps/web-ele/src/layouts/basic.vue
+++ b/apps/web-ele/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
  UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';

 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';

 const notifications = ref<NotificationItem[]>([
  {
@@ -87,8 +88,6 @@ const menus = computed(() => [
  },
 ]);

-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
      <AuthenticationLoginExpiredModal
        v-model:open="accessStore.loginExpired"
        :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
    </template>
    <template #lock-screen>
      <LockScreen :avatar @to-login="handleLogout" />
--- a/apps/web-ele/src/layouts/index.ts
+++ b/apps/web-ele/src/layouts/index.ts
@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');

 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);

-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };
--- a/apps/web-ele/src/views/_core/authentication/code-login.vue
+++ b/apps/web-ele/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';

-import { ref } from 'vue';
+import { computed, ref } from 'vue';

-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'CodeLogin' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
 * 异步处理登录操作
 * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {

 <template>
  <AuthenticationCodeLogin
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleLogin"
  />
 </template>
--- a/apps/web-ele/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-ele/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';

-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'ForgetPassword' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {

 <template>
  <AuthenticationForgetPassword
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleSubmit"
  />
 </template>
--- a/apps/web-ele/src/views/_core/authentication/login.vue
+++ b/apps/web-ele/src/views/_core/authentication/login.vue
@@ -1,18 +1,91 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 import { useAuthStore } from '#/store';

 defineOptions({ name: 'Login' });

 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>

 <template>
  <AuthenticationLogin
+    :form-schema="formSchema"
    :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
    @submit="authStore.authLogin"
  />
 </template>
--- a/apps/web-ele/src/views/_core/authentication/register.vue
+++ b/apps/web-ele/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';

-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';

-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'Register' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
  // eslint-disable-next-line no-console
  console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {

 <template>
  <AuthenticationRegister
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleSubmit"
  />
 </template>
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
@@ -51,12 +55,27 @@ onMounted(() => {
      },
      trigger: 'axis',
    },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
    xAxis: {
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
      type: 'category',
    },
    yAxis: [
@@ -65,7 +84,10 @@ onMounted(() => {
          show: false,
        },
        max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
        type: 'value',
      },
    ],
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-ele/src/views/dashboard/workspace/index.vue
+++ b/apps/web-ele/src/views/dashboard/workspace/index.vue
@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="访问来源">
          <AnalyticsVisitsSource />
--- a/apps/web-naive/.env.production
+++ b/apps/web-naive/.env.production
@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash

 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-naive",
-  "version": "5.1.2",
+  "version": "5.3.0-beta.2",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
@@ -27,23 +27,23 @@
  },
  "dependencies": {
    "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
    "@vben/common-ui": "workspace:*",
    "@vben/constants": "workspace:*",
    "@vben/hooks": "workspace:*",
    "@vben/icons": "workspace:*",
    "@vben/layouts": "workspace:*",
    "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
    "@vben/preferences": "workspace:*",
    "@vben/request": "workspace:*",
    "@vben/stores": "workspace:*",
    "@vben/styles": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "@vueuse/core": "^11.0.1",
+    "@vueuse/core": "^11.0.3",
    "naive-ui": "^2.39.0",
    "pinia": "2.2.2",
-    "vue": "^3.4.38",
+    "vue": "^3.5.4",
    "vue-router": "^4.4.3"
  }
 }
--- a/apps/web-naive/src/adapter/form.ts
+++ b/apps/web-naive/src/adapter/form.ts
@@ -0,0 +1,98 @@
+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 {
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NDatePicker,
+  NDivider,
+  NInput,
+  NInputNumber,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  NSwitch,
+  NTimePicker,
+  NTreeSelect,
+  NUpload,
+} from 'naive-ui';
+// 业务表单组件适配
+
+export type FormComponentType =
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'RadioGroup'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+// 初始化表单组件，并注册到form组件内部
+setupVbenForm<FormComponentType>({
+  components: {
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
+    DatePicker: NDatePicker,
+    // 自定义默认的重置按钮
+    DefaultResetActionButton: (props, { attrs, slots }) => {
+      return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots);
+    },
+    // 自定义默认的提交按钮
+    DefaultSubmitActionButton: (props, { attrs, slots }) => {
+      return h(
+        NButton,
+        { ...props, attrs, text: false, type: 'primary' },
+        slots,
+      );
+    },
+    Divider: NDivider,
+    Input: NInput,
+    InputNumber: NInputNumber,
+    RadioGroup: NRadioGroup,
+    Select: NSelect,
+    Space: NSpace,
+    Switch: NSwitch,
+    TimePicker: NTimePicker,
+    TreeSelect: NTreeSelect,
+    Upload: NUpload,
+  },
+  config: {
+    baseModelPropName: 'value',
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
--- a/apps/web-naive/src/adapter/index.ts
+++ b/apps/web-naive/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
--- a/apps/web-naive/src/api/core/auth.ts
+++ b/apps/web-naive/src/api/core/auth.ts
@@ -42,7 +42,9 @@ export async function refreshTokenApi() {
 * 退出登录
 */
 export async function logoutApi() {
-  return requestClient.post('/auth/logout');
+  return baseRequestClient.post('/auth/logout', {
+    withCredentials: true,
+  });
 }

 /**
--- a/apps/web-naive/src/layouts/auth.vue
+++ b/apps/web-naive/src/layouts/auth.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>
--- a/apps/web-naive/src/layouts/basic.vue
+++ b/apps/web-naive/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
  UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';

 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';

 const notifications = ref<NotificationItem[]>([
  {
@@ -87,8 +88,6 @@ const menus = computed(() => [
  },
 ]);

-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
      <AuthenticationLoginExpiredModal
        v-model:open="accessStore.loginExpired"
        :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
    </template>
    <template #lock-screen>
      <LockScreen :avatar @to-login="handleLogout" />
--- a/apps/web-naive/src/layouts/index.ts
+++ b/apps/web-naive/src/layouts/index.ts
@@ -1,8 +1,6 @@
 const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');

 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);

-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
-
 export { AuthPageLayout, BasicLayout, IFrameView };
--- a/apps/web-naive/src/views/_core/authentication/code-login.vue
+++ b/apps/web-naive/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';

-import { ref } from 'vue';
+import { computed, ref } from 'vue';

-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'CodeLogin' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
 * 异步处理登录操作
 * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {

 <template>
  <AuthenticationCodeLogin
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleLogin"
  />
 </template>
--- a/apps/web-naive/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-naive/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';

-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'ForgetPassword' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
  // eslint-disable-next-line no-console
  console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {

 <template>
  <AuthenticationForgetPassword
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleSubmit"
  />
 </template>
--- a/apps/web-naive/src/views/_core/authentication/login.vue
+++ b/apps/web-naive/src/views/_core/authentication/login.vue
@@ -1,18 +1,91 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 import { useAuthStore } from '#/store';

 defineOptions({ name: 'Login' });

 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>

 <template>
  <AuthenticationLogin
+    :form-schema="formSchema"
    :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
    @submit="authStore.authLogin"
  />
 </template>
--- a/apps/web-naive/src/views/_core/authentication/register.vue
+++ b/apps/web-naive/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';

-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';

-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';

 defineOptions({ name: 'Register' });

 const loading = ref(false);

+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
  // eslint-disable-next-line no-console
  console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {

 <template>
  <AuthenticationRegister
+    :form-schema="formSchema"
    :loading="loading"
-    :login-path="LOGIN_PATH"
    @submit="handleSubmit"
  />
 </template>
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
@@ -51,12 +55,27 @@ onMounted(() => {
      },
      trigger: 'axis',
    },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
    xAxis: {
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
      type: 'category',
    },
    yAxis: [
@@ -65,7 +84,10 @@ onMounted(() => {
          show: false,
        },
        max: 80_000,
-
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
        type: 'value',
      },
    ],
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';

-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';

 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
--- a/apps/web-naive/src/views/dashboard/workspace/index.vue
+++ b/apps/web-naive/src/views/dashboard/workspace/index.vue
@@ -214,7 +214,11 @@ const trendItems: WorkbenchTrendItem[] = [
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="访问来源">
          <AnalyticsVisitsSource />
--- a/cspell.json
+++ b/cspell.json
@@ -37,6 +37,7 @@
    "astro",
    "ui-kit",
    "styl",
+    "vnode",
    "nocheck",
    "prefixs",
    "vitepress",
@@ -53,6 +54,9 @@
    "**/*-dist/**",
    "**/icons/**",
    "pnpm-lock.yaml",
-    "**/*.log"
+    "**/*.log",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/__tests__/**"
  ]
 }
--- a/docs/.vitepress/components/demo-preview.vue
+++ b/docs/.vitepress/components/demo-preview.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import PreviewGroup from './preview-group.vue';
+
+interface Props {
+  files?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { files: '() => []' });
+
+const parsedFiles = computed(() => {
+  try {
+    return JSON.parse(decodeURIComponent(props.files ?? ''));
+  } catch {
+    return [];
+  }
+});
+</script>
+
+<template>
+  <div class="border-border shadow-float relative rounded-xl border">
+    <div
+      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>
+      </div>
+    </div>
+    <PreviewGroup v-if="parsedFiles.length > 0" :files="parsedFiles">
+      <template v-for="file in parsedFiles" #[file]>
+        <slot :name="file"></slot>
+      </template>
+    </PreviewGroup>
+  </div>
+</template>
--- a/docs/.vitepress/components/index.ts
+++ b/docs/.vitepress/components/index.ts
@@ -0,0 +1 @@
+export { default as DemoPreview } from './demo-preview.vue';
--- a/docs/.vitepress/components/preview-group.vue
+++ b/docs/.vitepress/components/preview-group.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue';
+
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import { Code } from 'lucide-vue-next';
+import {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+} from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    files?: string[];
+  }>(),
+  { files: () => [] },
+);
+
+const open = ref(false);
+
+const slots = useSlots();
+
+const tabs = computed(() => {
+  return props.files.map((file) => {
+    return {
+      component: slots[file],
+      label: file,
+    };
+  });
+});
+
+const currentTab = ref('index.vue');
+
+const toggleOpen = () => {
+  open.value = !open.value;
+};
+</script>
+
+<template>
+  <TabsRoot
+    v-model="currentTab"
+    class="bg-background-deep border-border overflow-hidden rounded-b-xl border-t"
+    @update:model-value="open = true"
+  >
+    <div class="border-border bg-background flex border-b-2 pr-2">
+      <div class="flex w-full items-center justify-between text-[13px]">
+        <TabsList class="relative flex">
+          <template v-if="open">
+            <TabsIndicator
+              class="absolute bottom-0 left-0 h-[2px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+            >
+              <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
+            </TabsIndicator>
+            <TabsTrigger
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :value="tab.label"
+              class="border-box text-foreground px-4 py-3 data-[state=active]:text-[var(--vp-c-indigo-1)]"
+              tabindex="-1"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </template>
+        </TabsList>
+
+        <div
+          :class="{
+            'py-2': !open,
+          }"
+          class="flex items-center"
+        >
+          <VbenTooltip side="top">
+            <template #trigger>
+              <Code
+                class="hover:bg-accent size-7 cursor-pointer rounded-full p-1.5"
+                @click="toggleOpen"
+              />
+            </template>
+            {{ open ? 'Collapse code' : 'Expand code' }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </div>
+    <div
+      :class="`${open ? 'h-[unset] max-h-[80vh]' : 'h-0'}`"
+      class="block overflow-y-scroll bg-[var(--vp-code-block-bg)] transition-all duration-300"
+    >
+      <TabsContent
+        v-for="tab in tabs"
+        :key="tab.label"
+        :value="tab.label"
+        as-child
+        class="rounded-xl"
+      >
+        <div class="text-foreground relative rounded-xl">
+          <component :is="tab.component" class="border-0" />
+        </div>
+      </TabsContent>
+    </div>
+  </TabsRoot>
+</template>
--- a/docs/.vitepress/config/en.mts
+++ b/docs/.vitepress/config/en.mts
@@ -13,7 +13,8 @@ export const en = defineConfig({
      prev: 'Previous Page',
    },
    editLink: {
-      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
+      pattern:
+        'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/src/:path',
      text: 'Edit this page on GitHub',
    },
    footer: {
@@ -203,7 +204,7 @@ function nav(): DefaultTheme.NavItem[] {
    },
    {
      link: '/commercial/technical-support',
-      text: '🦄 Technical Support',
+      text: '🦄 Tech Support',
    },
    {
      link: '/sponsor/personal',
--- a/docs/.vitepress/config/index.mts
+++ b/docs/.vitepress/config/index.mts
@@ -2,12 +2,12 @@ import { withPwa } from '@vite-pwa/vitepress';
 import { defineConfigWithTheme } from 'vitepress';

 import { en } from './en.mts';
-import { shard } from './shard.mts';
+import { shared } from './shared.mts';
 import { zh } from './zh.mts';

 export default withPwa(
  defineConfigWithTheme({
-    ...shard,
+    ...shared,
    locales: {
      en: {
        label: 'English',
--- a/docs/.vitepress/config/plugins/demo-preview.ts
+++ b/docs/.vitepress/config/plugins/demo-preview.ts
@@ -0,0 +1,135 @@
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress';
+
+import crypto from 'node:crypto';
+import { readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+export const rawPathRegexp =
+  // eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/strict
+  /^(.+?(?:\.([\da-z]+))?)(#[\w-]+)?(?: ?{(\d+(?:[,-]\d+)*)? ?(\S+)?})? ?(?:\[(.+)])?$/;
+
+function rawPathToToken(rawPath: string) {
+  const [
+    filepath = '',
+    extension = '',
+    region = '',
+    lines = '',
+    lang = '',
+    rawTitle = '',
+  ] = (rawPathRegexp.exec(rawPath) || []).slice(1);
+
+  const title = rawTitle || filepath.split('/').pop() || '';
+
+  return { extension, filepath, lang, lines, region, title };
+}
+
+export const demoPreviewPlugin = (md: MarkdownRenderer) => {
+  md.core.ruler.after('inline', 'demo-preview', (state) => {
+    const insertComponentImport = (importString: string) => {
+      const index = state.tokens.findIndex(
+        (i) => i.type === 'html_block' && i.content.match(/<script setup>/g),
+      );
+      if (index === -1) {
+        const importComponent = new state.Token('html_block', '', 0);
+        importComponent.content = `<script setup>\n${importString}\n</script>\n`;
+        state.tokens.splice(0, 0, importComponent);
+      } else {
+        if (state.tokens[index]) {
+          const content = state.tokens[index].content;
+          state.tokens[index].content = content.replace(
+            '</script>',
+            `${importString}\n</script>`,
+          );
+        }
+      }
+    };
+    // Define the regular expression to match the desired pattern
+    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);
+
+      let childFiles: string[] = [];
+      let dirExists = true;
+
+      try {
+        childFiles =
+          readdirSync(componentDir, {
+            encoding: 'utf8',
+            recursive: false,
+            withFileTypes: false,
+          }) || [];
+      } catch {
+        dirExists = false;
+      }
+
+      if (!dirExists) {
+        return '';
+      }
+
+      const uniqueWord = generateContentHash(componentDir);
+
+      const ComponentName = `DemoComponent_${uniqueWord}`;
+      insertComponentImport(
+        `import ${ComponentName} from '${componentDir}/index.vue'`,
+      );
+      const { path: _path } = state.env as MarkdownEnv;
+
+      const index = state.tokens.findIndex((i) => i.content.match(regex));
+
+      if (!state.tokens[index]) {
+        return '';
+      }
+
+      state.tokens[index].content =
+        `<DemoPreview files="${encodeURIComponent(JSON.stringify(childFiles))}" ><${ComponentName}/>
+        `;
+
+      const _dummyToken = new state.Token('', '', 0);
+      const tokenArray: Array<typeof _dummyToken> = [];
+      childFiles.forEach((filename) => {
+        // const slotName = filename.replace(extname(filename), '');
+
+        const templateStart = new state.Token('html_inline', '', 0);
+        templateStart.content = `<template #${filename}>`;
+        tokenArray.push(templateStart);
+
+        const resolvedPath = join(componentDir, filename);
+
+        const { extension, filepath, lang, lines, title } =
+          rawPathToToken(resolvedPath);
+        // Add code tokens for each line
+        const token = new state.Token('fence', 'code', 0);
+        token.info = `${lang || extension}${lines ? `{${lines}}` : ''}${
+          title ? `[${title}]` : ''
+        }`;
+
+        token.content = `<<< ${filepath}`;
+        (token as any).src = [resolvedPath];
+        tokenArray.push(token);
+
+        const templateEnd = new state.Token('html_inline', '', 0);
+        templateEnd.content = '</template>';
+        tokenArray.push(templateEnd);
+      });
+      const endTag = new state.Token('html_inline', '', 0);
+      endTag.content = '</DemoPreview>';
+      tokenArray.push(endTag);
+
+      state.tokens.splice(index + 1, 0, ...tokenArray);
+
+      // console.log(
+      //   state.md.renderer.render(state.tokens, state?.options ?? [], state.env),
+      // );
+      return '';
+    });
+  });
+};
+
+function generateContentHash(input: string, length: number = 10): string {
+  // 使用 SHA-256 生成哈希值
+  const hash = crypto.createHash('sha256').update(input).digest('hex');
+
+  // 将哈希值转换为 Base36 编码，并取指定长度的字符作为结果
+  return Number.parseInt(hash, 16).toString(36).slice(0, length);
+}
--- a/docs/.vitepress/config/shared.mts
+++ b/docs/.vitepress/config/shared.mts
@@ -1,17 +1,28 @@
 import type { PwaOptions } from '@vite-pwa/vitepress';
+import type { HeadConfig } from 'vitepress';

 import { resolve } from 'node:path';

+import { viteArchiverPlugin } from '@vben/vite-config';
+
 import {
  GitChangelog,
  GitChangelogMarkdownSection,
 } from '@nolebase/vitepress-plugin-git-changelog/vite';
-import { defineConfig, type HeadConfig } from 'vitepress';
+import tailwind from 'tailwindcss';
+import { defineConfig, postcssIsolateStyles } from 'vitepress';

+import { demoPreviewPlugin } from './plugins/demo-preview';
 import { search as zhSearch } from './zh.mts';

-export const shard = defineConfig({
+export const shared = defineConfig({
+  appearance: 'dark',
  head: head(),
+  markdown: {
+    preConfig(md) {
+      md.use(demoPreviewPlugin);
+    },
+  },
  pwa: pwa(),
  srcDir: 'src',
  themeConfig: {
@@ -36,14 +47,38 @@ export const shard = defineConfig({
      chunkSizeWarningLimit: Infinity,
      minify: 'terser',
    },
+    css: {
+      postcss: {
+        plugins: [
+          tailwind(),
+          postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] }),
+        ],
+      },
+    },
    json: {
      stringify: true,
    },
    plugins: [
      GitChangelog({
+        mapAuthors: [
+          {
+            mapByNameAliases: ['Vben'],
+            name: 'vben',
+            username: 'anncwb',
+          },
+          {
+            name: 'vince',
+            username: 'vince292007',
+          },
+          {
+            name: 'Li Kui',
+            username: 'likui628',
+          },
+        ],
        repoURL: () => 'https://github.com/vbenjs/vue-vben-admin',
      }),
      GitChangelogMarkdownSection(),
+      viteArchiverPlugin({ outputDir: '.vitepress' }),
    ],
    server: {
      fs: {
--- a/docs/.vitepress/config/zh.mts
+++ b/docs/.vitepress/config/zh.mts
@@ -13,7 +13,8 @@ export const zh = defineConfig({
      prev: '上一页',
    },
    editLink: {
-      pattern: 'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/:path',
+      pattern:
+        'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/src/:path',
      text: '在 GitHub 上编辑此页面',
    },
    footer: {
@@ -38,6 +39,7 @@ export const zh = defineConfig({

    sidebar: {
      '/commercial/': { base: '/commercial/', items: sidebarCommercial() },
+      '/components/': { base: '/components/', items: sidebarComponents() },
      '/guide/': { base: '/guide/', items: sidebarGuide() },
    },
    sidebarMenuLabel: '菜单',
@@ -60,6 +62,11 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
        },
        { link: 'introduction/quick-start', text: '快速开始' },
        { link: 'introduction/thin', text: '精简版本' },
+        {
+          base: '/',
+          link: 'components/introduction',
+          text: '组件文档',
+        },
      ],
    },
    {
@@ -117,7 +124,7 @@ function sidebarCommercial(): DefaultTheme.SidebarItem[] {
  return [
    {
      link: 'community',
-      text: '社区交流',
+      text: '社区',
    },
    {
      link: 'technical-support',
@@ -130,6 +137,38 @@ function sidebarCommercial(): DefaultTheme.SidebarItem[] {
  ];
 }

+function sidebarComponents(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: '组件',
+      items: [
+        {
+          link: 'introduction',
+          text: '介绍',
+        },
+      ],
+    },
+    {
+      collapsed: false,
+      text: '通用组件',
+      items: [
+        {
+          link: 'common-ui/vben-modal',
+          text: 'Vben Modal 模态框',
+        },
+        {
+          link: 'common-ui/vben-drawer',
+          text: 'Vben Drawer 抽屉',
+        },
+        {
+          link: 'common-ui/vben-form',
+          text: 'Vben Form 表单',
+        },
+      ],
+    },
+  ];
+}
+
 function nav(): DefaultTheme.NavItem[] {
  return [
    {
@@ -138,28 +177,10 @@ function nav(): DefaultTheme.NavItem[] {
        {
          link: '/guide/introduction/vben',
          text: '指南',
-          // items: [
-          //   {
-          //     link: '/guide/introduction/vben',
-          //     text: '简介',
-          //   },
-          //   {
-          //     link: '/guide/essentials/concept',
-          //     text: '基础',
-          //   },
-          //   {
-          //     link: '/guide/in-depth/layout',
-          //     text: '深入',
-          //   },
-          //   {
-          //     link: '/guide/project/standard',
-          //     text: '工程',
-          //   },
-          //   {
-          //     link: '/guide/other/project-update',
-          //     text: '其他',
-          //   },
-          // ],
+        },
+        {
+          link: '/components/introduction',
+          text: '组件',
        },
        {
          text: '历史版本',
@@ -234,7 +255,7 @@ function nav(): DefaultTheme.NavItem[] {
    },
    {
      link: '/commercial/community',
-      text: '👨‍👦‍👦 社区交流',
+      text: '👨‍👦‍👦 社区',
      // items: [
      //   {
      //     link: 'https://qun.qq.com/qqweb/qunpro/share?_wv=3&_wwv=128&appChannel=share&inviteCode=22ySzj7pKiw&businessType=9&from=246610&biz=ka&mainSourceId=share&subSourceId=others&jumpsource=shorturl#/pc',
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,9 +1,10 @@
 // https://vitepress.dev/guide/custom-theme
-import type { Theme } from 'vitepress';
+import type { EnhanceAppContext, Theme } from 'vitepress';

 import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client';
 import DefaultTheme from 'vitepress/theme';

+import { DemoPreview } from '../components';
 import SiteLayout from './components/site-layout.vue';
 import VbenContributors from './components/vben-contributors.vue';
 import { initHmPlugin } from './plugins/hm';
@@ -13,9 +14,10 @@ import './styles';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';

 export default {
-  enhanceApp({ app }) {
-    // ...
+  enhanceApp(ctx: EnhanceAppContext) {
+    const { app } = ctx;
    app.component('VbenContributors', VbenContributors);
+    app.component('DemoPreview', DemoPreview);
    app.use(NolebaseGitChangelogPlugin);
    // 百度统计
    initHmPlugin();
--- a/docs/.vitepress/theme/styles/index.ts
+++ b/docs/.vitepress/theme/styles/index.ts
@@ -1,2 +1,3 @@
 import './variables.css';
 import './base.css';
+import '@vben/styles';
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/docs",
-  "version": "5.1.2",
+  "version": "5.3.0-beta.2",
  "private": true,
  "scripts": {
    "build": "vitepress build",
@@ -8,12 +8,18 @@
    "docs:preview": "vitepress preview"
  },
  "dependencies": {
-    "medium-zoom": "^1.1.0"
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "lucide-vue-next": "^0.439.0",
+    "medium-zoom": "^1.1.0",
+    "radix-vue": "^1.9.5"
  },
  "devDependencies": {
-    "@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
-    "@vite-pwa/vitepress": "^0.5.0",
-    "vitepress": "^1.3.3",
-    "vue": "^3.4.38"
+    "@nolebase/vitepress-plugin-git-changelog": "^2.5.0",
+    "@vben/vite-config": "workspace:*",
+    "@vite-pwa/vitepress": "^0.5.3",
+    "vitepress": "^1.3.4",
+    "vue": "^3.5.4"
  }
 }
--- a/docs/src/commercial/community.md
+++ b/docs/src/commercial/community.md
@@ -2,10 +2,14 @@

 社区交流群主要是为了方便大家交流，提问，解答问题，分享经验等。偏自助方式，如果你有问题，可以通过以下方式加入社区交流群：

- [QQ频道](https://pd.qq.com/s/16p8lvvob)：推荐，主要提供问题解答，分享经验等。
- QQ群：[1群(满)](https://qm.qq.com/q/YacMHPYAMu)、[2群(满)](https://qm.qq.com/q/ajVKZvFICk)、[3群](https://qm.qq.com/q/36zdwThP2E)，主要使用者的交流群。
+- [QQ频道](https://pd.qq.com/s/16p8lvvob)：推荐！！！主要提供问题解答，分享经验等。
+- QQ群：[1群](https://qm.qq.com/q/YacMHPYAMu)、[2群](https://qm.qq.com/q/ajVKZvFICk)、[3群](https://qm.qq.com/q/36zdwThP2E)，[4群](https://qm.qq.com/q/sCzSlm3504)，[老群](https://qm.qq.com/q/MEmHoCLbG0)，主要使用者的交流群。
 - [Discord](https://discord.com/invite/VU62jTecad): 主要提供问题解答，分享经验等。

+::: tip
+
+免费QQ群人数上限200，将会不定期清理。推荐加入QQ频道进行交流
+
 ## 微信群

 ::: tip
--- a/docs/src/components/common-ui/vben-drawer.md
+++ b/docs/src/components/common-ui/vben-drawer.md
@@ -0,0 +1,114 @@
+---
+outline: deep
+---
+
+# Vben Drawer 抽屉
+
+框架提供的抽屉组件，支持`自动高度`、`loading`等功能。
+
+## 基础用法
+
+使用 `useVbenDrawer` 创建最基础的模态框。
+
+<DemoPreview dir="demos/vben-drawer/basic" />
+
+## 组件抽离
+
+Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 drawer 内的内容抽离出来，也方便复用。通过 `connectedComponent` 参数，可以将内外组件进行连接，而不用其他任何操作。
+
+<DemoPreview dir="demos/vben-drawer/extra" />
+
+## 自动计算高度
+
+弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 `loading` 效果以及使用 `prepend-footer` 插槽。
+
+<DemoPreview dir="demos/vben-drawer/auto-height" />
+
+## 使用 Api
+
+通过 `drawerApi` 可以调用 drawer 的方法以及使用 `setState` 更新 drawer 的状态。
+
+<DemoPreview dir="demos/vben-drawer/dynamic" />
+
+## 数据共享
+
+如果你使用了 `connectedComponent` 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 `drawerApi` 来获取数据和设置数据，配合 `onOpenChange`，可以满足大部分的需求。
+
+<DemoPreview dir="demos/vben-drawer/shared-data" />
+
+::: info 注意
+
+- `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
+- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onComfirm`，那么以内部的 `onComfirm` 为准。`onOpenChange`事件除外，内外都会触发。
+
+:::
+
+## API
+
+```ts
+// Drawer 为弹窗组件
+// drawerApi 为弹窗的方法
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 属性
+  // 事件
+});
+```
+
+### Props
+
+所有属性都可以传入 `useVbenDrawer` 的第一个参数中。
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `string\|slot` | - |
+| titleTooltip | 标题提示信息 | `string\|slot` | - |
+| description | 描述信息 | `string\|slot` | - |
+| isOpen | 弹窗打开状态 | `boolean` | `false` |
+| loading | 弹窗加载状态 | `boolean` | `false` |
+| closable | 显示关闭按钮 | `boolean` | `true` |
+| modal | 显示遮罩 | `boolean` | `true` |
+| header | 显示header | `boolean` | `true` |
+| footer | 显示footer | `boolean\|slot` | `true` |
+| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
+| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
+| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
+| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
+| showCancelButton | 显示取消按钮 | `boolean` | `true` |
+| showConfirmButton | 显示确认按钮文本 | `boolean` | `true` |
+| class | modal的class，宽度通过这个配置 | `string` | - |
+| contentClass | modal内容区域的class | `string` | - |
+| footerClass | modal底部区域的class | `string` | - |
+| headerClass | modal顶部区域的class | `string` | - |
+
+### Event
+
+以下事件，只有在 `useVbenDrawer({onCancel:()=>{}})` 中传入才会生效。
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |
+| onCancel | 点击取消按钮触发 | `()=>void` |
+| onConfirm | 点击确认按钮触发 | `()=>void` |
+| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |
+
+### Slots
+
+除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
+
+| 插槽名         | 描述                |
+| -------------- | ------------------- |
+| default        | 默认插槽 - 弹窗内容 |
+| prepend-footer | 取消按钮左侧        |
+| append-footer  | 取消按钮右侧        |
+
+### modalApi
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| open | 打开弹窗 | `()=>void` |
+| close | 关闭弹窗 | `()=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| getData | 获取共享数据 | `<T>()=>T` |
+| useStore | 获取可响应式状态 | - |
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -0,0 +1,11 @@
+---
+outline: deep
+---
+
+# Vben Form 表单
+
+框架提供的表单组件，可适配 `Element Plus`、`Ant Design Vue`、`Naive`UI 框架。
+
+# 使用
+
+TODO
--- a/docs/src/components/common-ui/vben-modal.md
+++ b/docs/src/components/common-ui/vben-modal.md
@@ -0,0 +1,124 @@
+---
+outline: deep
+---
+
+# Vben Modal 模态框
+
+框架提供的模态框组件，支持`拖拽`、`全屏`、`自动高度`、`loading`等功能。
+
+## 基础用法
+
+使用 `useVbenModal` 创建最基础的模态框。
+
+<DemoPreview dir="demos/vben-modal/basic" />
+
+## 组件抽离
+
+Modal 内的内容一般业务中，会比较复杂，所以我们可以将 modal 内的内容抽离出来，也方便复用。通过 `connectedComponent` 参数，可以将内外组件进行连接，而不用其他任何操作。
+
+<DemoPreview dir="demos/vben-modal/extra" />
+
+## 开启拖拽
+
+通过 `draggable` 参数，可开启拖拽功能。
+
+<DemoPreview dir="demos/vben-modal/draggable" />
+
+## 自动计算高度
+
+弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 `loading` 效果以及使用 `prepend-footer` 插槽。
+
+<DemoPreview dir="demos/vben-modal/auto-height" />
+
+## 使用 Api
+
+通过 `modalApi` 可以调用 modal 的方法以及使用 `setState` 更新 modal 的状态。
+
+<DemoPreview dir="demos/vben-modal/dynamic" />
+
+## 数据共享
+
+如果你使用了 `connectedComponent` 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 `modalApi` 来获取数据和设置数据，配合 `onOpenChange`，可以满足大部分的需求。
+
+<DemoPreview dir="demos/vben-modal/shared-data" />
+
+::: info 注意
+
+- `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
+- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onComfirm`，那么以内部的 `onComfirm` 为准。`onOpenChange`事件除外，内外都会触发。
+
+:::
+
+## API
+
+```ts
+// Modal 为弹窗组件
+// modalApi 为弹窗的方法
+const [Modal, modalApi] = useVbenModal({
+  // 属性
+  // 事件
+});
+```
+
+### Props
+
+所有属性都可以传入 `useVbenModal` 的第一个参数中。
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `string\|slot` | - |
+| titleTooltip | 标题提示信息 | `string\|slot` | - |
+| description | 描述信息 | `string\|slot` | - |
+| isOpen | 弹窗打开状态 | `boolean` | `false` |
+| loading | 弹窗加载状态 | `boolean` | `false` |
+| fullscreen | 全屏显示 | `boolean` | `false` |
+| fullscreenButton | 显示全屏按钮 | `boolean` | `true` |
+| draggable | 可拖拽 | `boolean` | `false` |
+| closable | 显示关闭按钮 | `boolean` | `true` |
+| centered | 居中显示 | `boolean` | `false` |
+| modal | 显示遮罩 | `boolean` | `true` |
+| header | 显示header | `boolean` | `true` |
+| footer | 显示footer | `boolean\|slot` | `true` |
+| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
+| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
+| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
+| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
+| showCancelButton | 显示取消按钮 | `boolean` | `true` |
+| showConfirmButton | 显示确认按钮文本 | `boolean` | `true` |
+| class | modal的class，宽度通过这个配置 | `string` | - |
+| contentClass | modal内容区域的class | `string` | - |
+| footerClass | modal底部区域的class | `string` | - |
+| headerClass | modal顶部区域的class | `string` | - |
+
+### Event
+
+以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |
+| onCancel | 点击取消按钮触发 | `()=>void` |
+| onConfirm | 点击确认按钮触发 | `()=>void` |
+| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |
+
+### Slots
+
+除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
+
+| 插槽名         | 描述                |
+| -------------- | ------------------- |
+| default        | 默认插槽 - 弹窗内容 |
+| prepend-footer | 取消按钮左侧        |
+| append-footer  | 取消按钮右侧        |
+
+### modalApi
+
+| 事件名 | 描述 | 类型 |
+| --- | --- | --- |
+| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| open | 打开弹窗 | `()=>void` |
+| close | 关闭弹窗 | `()=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| getData | 获取共享数据 | `<T>()=>T` |
+| useStore | 获取可响应式状态 | - |
--- a/docs/src/components/introduction.md
+++ b/docs/src/components/introduction.md
@@ -0,0 +1,11 @@
+# 介绍
+
+::: info README
+
+该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得组件封装的不好，或者不符合你的需求，你可以直接使用原生的组件，或者自己封装一个组件，不需要拘泥于框架提供的组件。我们只是提供了一些常用的组件，方便你快速开发。是否使用，取决于你的需求。
+
+:::
+
+## 通用组件
+
+通用组件是一些常用的组件，比如弹窗、抽屉、表单等。大部分基于 `Tailwind CSS` 实现，可适用于不同 UI 组件库的应用。
--- a/docs/src/demos/vben-drawer/auto-height/drawer.vue
+++ b/docs/src/demos/vben-drawer/auto-height/drawer.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+const list = ref<number[]>([]);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    console.log('onConfirm');
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      handleUpdate(10);
+    }
+  },
+});
+
+function handleUpdate(len: number) {
+  drawerApi.setState({ loading: true });
+  setTimeout(() => {
+    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    drawerApi.setState({ loading: false });
+  }, 2000);
+}
+</script>
+<template>
+  <Drawer title="自动计算高度">
+    <div
+      v-for="item in list"
+      :key="item"
+      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+    >
+      {{ item }}
+    </div>
+    <template #prepend-footer>
+      <VbenButton type="link" @click="handleUpdate(6)">
+        点击更新数据
+      </VbenButton>
+    </template>
+  </Drawer>
+</template>
--- a/docs/src/demos/vben-drawer/auto-height/index.vue
+++ b/docs/src/demos/vben-drawer/auto-height/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+import ExtraDrawer from './drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: ExtraDrawer,
+});
+
+function open() {
+  drawerApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Drawer />
+    <VbenButton @click="open">Open</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-drawer/basic/index.vue
+++ b/docs/src/demos/vben-drawer/basic/index.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+const [Drawer, drawerApi] = useVbenDrawer();
+</script>
+<template>
+  <div>
+    <VbenButton @click="() => drawerApi.open()">Open</VbenButton>
+    <Drawer class="w-[600px]" title="基础示例"> drawer content </Drawer>
+  </div>
+</template>
--- a/docs/src/demos/vben-drawer/dynamic/drawer.vue
+++ b/docs/src/demos/vben-drawer/dynamic/drawer.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    console.info('onConfirm');
+  },
+  title: '动态修改配置示例',
+});
+
+function handleUpdateTitle() {
+  drawerApi.setState({ title: '内部动态标题' });
+}
+</script>
+<template>
+  <Drawer>
+    <div class="flex-col-center">
+      <VbenButton class="mb-3" type="primary" @click="handleUpdateTitle()">
+        内部动态修改标题
+      </VbenButton>
+    </div>
+  </Drawer>
+</template>
--- a/docs/src/demos/vben-drawer/dynamic/index.vue
+++ b/docs/src/demos/vben-drawer/dynamic/index.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+import ExtraDrawer from './drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: ExtraDrawer,
+});
+
+function open() {
+  drawerApi.open();
+}
+
+function handleUpdateTitle() {
+  drawerApi.setState({ title: '外部动态标题' });
+  drawerApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Drawer />
+
+    <VbenButton @click="open">Open</VbenButton>
+    <VbenButton class="ml-2" type="primary" @click="handleUpdateTitle">
+      从外部修改标题并打开
+    </VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-drawer/extra/drawer.vue
+++ b/docs/src/demos/vben-drawer/extra/drawer.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+const [Drawer] = useVbenDrawer();
+</script>
+<template>
+  <Drawer title="组件抽离示例"> extra drawer content </Drawer>
+</template>
--- a/docs/src/demos/vben-drawer/extra/index.vue
+++ b/docs/src/demos/vben-drawer/extra/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+import ExtraDrawer from './drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: ExtraDrawer,
+});
+
+function open() {
+  drawerApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Drawer />
+    <VbenButton @click="open">Open</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-drawer/shared-data/drawer.vue
+++ b/docs/src/demos/vben-drawer/shared-data/drawer.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+const data = ref();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    console.info('onConfirm');
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      data.value = drawerApi.getData<Record<string, any>>();
+    }
+  },
+});
+</script>
+<template>
+  <Drawer title="数据共享示例">
+    <div class="flex-col-center">外部传递数据： {{ data }}</div>
+  </Drawer>
+</template>
--- a/docs/src/demos/vben-drawer/shared-data/index.vue
+++ b/docs/src/demos/vben-drawer/shared-data/index.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useVbenDrawer, VbenButton } from '@vben/common-ui';
+
+import ExtraDrawer from './drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: ExtraDrawer,
+});
+
+function open() {
+  drawerApi.setData({
+    content: '外部传递的数据 content',
+    payload: '外部传递的数据 payload',
+  });
+  drawerApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Drawer />
+
+    <VbenButton @click="open">Open</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-modal/auto-height/index.vue
+++ b/docs/src/demos/vben-modal/auto-height/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+import ExtraModal from './modal.vue';
+
+const [Modal, modalApi] = useVbenModal({
+  // 连接抽离的组件
+  connectedComponent: ExtraModal,
+});
+
+function openModal() {
+  modalApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Modal />
+    <VbenButton @click="openModal">Open</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-modal/auto-height/modal.vue
+++ b/docs/src/demos/vben-modal/auto-height/modal.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+const list = ref<number[]>([]);
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    console.log('onConfirm');
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      handleUpdate(10);
+    }
+  },
+});
+
+function handleUpdate(len: number) {
+  modalApi.setState({ loading: true });
+  setTimeout(() => {
+    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    modalApi.setState({ loading: false });
+  }, 2000);
+}
+</script>
+<template>
+  <Modal title="自动计算高度">
+    <div
+      v-for="item in list"
+      :key="item"
+      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+    >
+      {{ item }}
+    </div>
+    <template #prepend-footer>
+      <VbenButton type="link" @click="handleUpdate(6)">
+        点击更新数据
+      </VbenButton>
+    </template>
+  </Modal>
+</template>
--- a/docs/src/demos/vben-modal/basic/index.vue
+++ b/docs/src/demos/vben-modal/basic/index.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+const [Modal, modalApi] = useVbenModal();
+</script>
+<template>
+  <div>
+    <VbenButton @click="() => modalApi.open()">Open</VbenButton>
+    <Modal class="w-[600px]" title="基础示例"> modal content </Modal>
+  </div>
+</template>
--- a/docs/src/demos/vben-modal/draggable/index.vue
+++ b/docs/src/demos/vben-modal/draggable/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+import ExtraModal from './modal.vue';
+
+const [Modal, modalApi] = useVbenModal({
+  // 连接抽离的组件
+  connectedComponent: ExtraModal,
+});
+
+function openModal() {
+  modalApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Modal />
+    <VbenButton @click="openModal">Open</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-modal/draggable/modal.vue
+++ b/docs/src/demos/vben-modal/draggable/modal.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+const [Modal] = useVbenModal({
+  draggable: true,
+});
+</script>
+<template>
+  <Modal title="拖拽示例"> modal content </Modal>
+</template>
--- a/docs/src/demos/vben-modal/dynamic/index.vue
+++ b/docs/src/demos/vben-modal/dynamic/index.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+import ExtraModal from './modal.vue';
+
+const [Modal, modalApi] = useVbenModal({
+  // 连接抽离的组件
+  connectedComponent: ExtraModal,
+});
+
+function openModal() {
+  modalApi.open();
+}
+
+function handleUpdateTitle() {
+  modalApi.setState({ title: '外部动态标题' });
+  modalApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Modal />
+
+    <VbenButton @click="openModal">Open</VbenButton>
+    <VbenButton class="ml-2" type="primary" @click="handleUpdateTitle">
+      从外部修改标题并打开
+    </VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-modal/dynamic/modal.vue
+++ b/docs/src/demos/vben-modal/dynamic/modal.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+const [Modal, modalApi] = useVbenModal({
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    console.info('onConfirm');
+  },
+  title: '动态修改配置示例',
+});
+
+const state = modalApi.useStore();
+
+function handleUpdateTitle() {
+  modalApi.setState({ title: '内部动态标题' });
+}
+
+function handleToggleFullscreen() {
+  modalApi.setState((prev) => {
+    return { ...prev, fullscreen: !prev.fullscreen };
+  });
+}
+</script>
+<template>
+  <Modal>
+    <div class="flex-col-center">
+      <VbenButton class="mb-3" type="primary" @click="handleUpdateTitle()">
+        内部动态修改标题
+      </VbenButton>
+      <VbenButton class="mb-3" @click="handleToggleFullscreen()">
+        {{ state.fullscreen ? '退出全屏' : '打开全屏' }}
+      </VbenButton>
+    </div>
+  </Modal>
+</template>
--- a/docs/src/demos/vben-modal/extra/index.vue
+++ b/docs/src/demos/vben-modal/extra/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+import ExtraModal from './modal.vue';
+
+const [Modal, modalApi] = useVbenModal({
+  // 连接抽离的组件
+  connectedComponent: ExtraModal,
+});
+
+function openModal() {
+  modalApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Modal />
+    <VbenButton @click="openModal">Open</VbenButton>
+  </div>
+</template>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default as DemoPreview } from './demo-preview.vue';`