Merge remote-tracking branch 'vben/main' into vben-dev

# Conflicts: # .gitignore # .husky/pre-commit # .vscode/extensions.json # .vscode/settings.json # README.ja-JP.md # README.md # README.zh-CN.md # apps/backend-mock/api/auth/codes.ts # apps/backend-mock/api/auth/login.post.ts # apps/backend-mock/api/auth/logout.post.ts # apps/backend-mock/api/auth/refresh.post.ts # apps/backend-mock/api/menu/all.ts # apps/backend-mock/api/status.ts # apps/backend-mock/api/table/list.ts # apps/backend-mock/api/test.get.ts # apps/backend-mock/api/test.post.ts # apps/backend-mock/api/user/info.ts # apps/backend-mock/middleware/1.api.ts # apps/backend-mock/nitro.config.ts # apps/backend-mock/package.json # apps/backend-mock/routes/[...].ts # apps/backend-mock/tsconfig.json # apps/backend-mock/utils/cookie-utils.ts # apps/backend-mock/utils/jwt-utils.ts # apps/backend-mock/utils/mock-data.ts # apps/backend-mock/utils/response.ts # apps/web-antd/.env # apps/web-antd/src/adapter/component/index.ts # apps/web-antd/src/adapter/form.ts # apps/web-antd/src/api/request.ts # apps/web-antd/src/layouts/auth.vue # apps/web-antd/src/layouts/basic.vue # apps/web-antd/src/preferences.ts # apps/web-antd/src/router/guard.ts # apps/web-antd/src/router/routes/modules/demos.ts # apps/web-antd/src/store/auth.ts # apps/web-antd/src/views/demos/antd/index.vue # apps/web-antdv-next/vite.config.ts # apps/web-ele/.env # apps/web-ele/index.html # apps/web-ele/package.json # apps/web-ele/src/adapter/component/index.ts # apps/web-ele/src/adapter/form.ts # apps/web-ele/src/adapter/vxe-table.ts # apps/web-ele/src/api/request.ts # apps/web-ele/src/bootstrap.ts # apps/web-ele/src/layouts/auth.vue # apps/web-ele/src/layouts/basic.vue # apps/web-ele/src/locales/index.ts # apps/web-ele/src/locales/langs/en-US/demos.json # apps/web-ele/src/locales/langs/en-US/page.json # apps/web-ele/src/locales/langs/zh-CN/demos.json # apps/web-ele/src/locales/langs/zh-CN/page.json # apps/web-ele/src/preferences.ts # apps/web-ele/src/router/guard.ts # apps/web-ele/src/router/routes/core.ts # apps/web-ele/src/router/routes/modules/dashboard.ts # apps/web-ele/src/router/routes/modules/demos.ts # apps/web-ele/src/router/routes/modules/vben.ts # apps/web-ele/src/store/auth.ts # apps/web-ele/src/views/_core/authentication/code-login.vue # apps/web-ele/src/views/_core/authentication/forget-password.vue # apps/web-ele/src/views/_core/authentication/register.vue # apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue # apps/web-ele/src/views/dashboard/analytics/index.vue # apps/web-ele/src/views/demos/element/index.vue # apps/web-ele/src/views/demos/form/basic.vue # apps/web-ele/tsconfig.json # apps/web-ele/tsconfig.node.json # apps/web-naive/.env # apps/web-naive/index.html # apps/web-naive/package.json # apps/web-naive/src/adapter/component/index.ts # apps/web-naive/src/adapter/form.ts # apps/web-naive/src/adapter/vxe-table.ts # apps/web-naive/src/api/request.ts # apps/web-naive/src/bootstrap.ts # apps/web-naive/src/layouts/auth.vue # apps/web-naive/src/layouts/basic.vue # apps/web-naive/src/locales/index.ts # apps/web-naive/src/locales/langs/en-US/demos.json # apps/web-naive/src/locales/langs/en-US/page.json # apps/web-naive/src/locales/langs/zh-CN/demos.json # apps/web-naive/src/locales/langs/zh-CN/page.json # apps/web-naive/src/preferences.ts # apps/web-naive/src/router/guard.ts # apps/web-naive/src/router/routes/core.ts # apps/web-naive/src/router/routes/modules/dashboard.ts # apps/web-naive/src/router/routes/modules/demos.ts # apps/web-naive/src/router/routes/modules/vben.ts # apps/web-naive/src/store/auth.ts # apps/web-naive/src/views/_core/authentication/code-login.vue # apps/web-naive/src/views/_core/authentication/forget-password.vue # apps/web-naive/src/views/_core/authentication/register.vue # apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue # apps/web-naive/src/views/dashboard/analytics/index.vue # apps/web-naive/src/views/demos/form/basic.vue # apps/web-naive/src/views/demos/naive/index.vue # apps/web-naive/tsconfig.json # apps/web-naive/tsconfig.node.json # apps/web-naive/vite.config.ts # docs/.vitepress/components/demo-preview.vue # docs/.vitepress/components/preview-group.vue # docs/.vitepress/config/en.mts # docs/.vitepress/config/index.mts # docs/.vitepress/config/plugins/demo-preview.ts # docs/.vitepress/config/shared.mts # docs/.vitepress/config/zh.mts # docs/.vitepress/theme/components/site-layout.vue # docs/.vitepress/theme/components/vben-contributors.vue # docs/.vitepress/theme/styles/variables.css # docs/package.json # docs/src/_env/adapter/component.ts # docs/src/_env/adapter/form.ts # docs/src/_env/adapter/vxe-table.ts # docs/src/commercial/community.md # docs/src/components/common-ui/vben-count-to-animator.md # docs/src/components/common-ui/vben-drawer.md # docs/src/components/common-ui/vben-form.md # docs/src/components/common-ui/vben-modal.md # docs/src/components/common-ui/vben-vxe-table.md # docs/src/components/layout-ui/page.md # docs/src/demos/vben-drawer/auto-height/drawer.vue # docs/src/demos/vben-drawer/basic/index.vue # docs/src/demos/vben-drawer/dynamic/index.vue # docs/src/demos/vben-drawer/shared-data/drawer.vue # docs/src/demos/vben-drawer/shared-data/index.vue # docs/src/demos/vben-form/api/index.vue # docs/src/demos/vben-form/basic/index.vue # docs/src/demos/vben-form/custom/index.vue # docs/src/demos/vben-form/dynamic/index.vue # docs/src/demos/vben-form/query/index.vue # docs/src/demos/vben-form/rules/index.vue # docs/src/demos/vben-modal/auto-height/modal.vue # docs/src/demos/vben-modal/basic/index.vue # docs/src/demos/vben-modal/dynamic/index.vue # docs/src/demos/vben-modal/shared-data/index.vue # docs/src/demos/vben-modal/shared-data/modal.vue # docs/src/demos/vben-vxe-table/basic/index.vue # docs/src/demos/vben-vxe-table/custom-cell/index.vue # docs/src/demos/vben-vxe-table/edit-row/index.vue # docs/src/demos/vben-vxe-table/fixed/index.vue # docs/src/demos/vben-vxe-table/form/index.vue # docs/src/demos/vben-vxe-table/remote/index.vue # docs/src/demos/vben-vxe-table/tree/index.vue # docs/src/demos/vben-vxe-table/virtual/index.vue # docs/src/en/guide/essentials/development.md # docs/src/en/guide/essentials/external-module.md # docs/src/en/guide/essentials/route.md # docs/src/en/guide/essentials/server.md # docs/src/en/guide/essentials/settings.md # docs/src/en/guide/in-depth/access.md # docs/src/en/guide/in-depth/loading.md # docs/src/en/guide/in-depth/locale.md # docs/src/en/guide/in-depth/theme.md # docs/src/en/guide/introduction/quick-start.md # docs/src/en/guide/introduction/thin.md # docs/src/en/guide/introduction/vben.md # docs/src/en/guide/other/faq.md # docs/src/en/guide/project/dir.md # docs/src/en/guide/project/standard.md # docs/src/en/guide/project/tailwindcss.md # docs/src/en/index.md # docs/src/friend-links/index.md # docs/src/guide/essentials/build.md # docs/src/guide/essentials/development.md # docs/src/guide/essentials/external-module.md # docs/src/guide/essentials/route.md # docs/src/guide/essentials/server.md # docs/src/guide/essentials/settings.md # docs/src/guide/in-depth/access.md # docs/src/guide/in-depth/check-updates.md # docs/src/guide/in-depth/loading.md # docs/src/guide/in-depth/locale.md # docs/src/guide/in-depth/theme.md # docs/src/guide/introduction/quick-start.md # docs/src/guide/introduction/thin.md # docs/src/guide/introduction/vben.md # docs/src/guide/introduction/why.md # docs/src/guide/other/faq.md # docs/src/guide/project/dir.md # docs/src/guide/project/standard.md # docs/src/guide/project/tailwindcss.md # docs/src/index.md # docs/tsconfig.json # package.json # packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue # packages/constants/src/core.ts # packages/effects/common-ui/src/components/index.ts # packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue # packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue # packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue # packages/effects/layouts/src/authentication/authentication.vue # packages/effects/layouts/src/basic/layout.vue # packages/effects/layouts/src/widgets/notification/notification.vue # packages/effects/layouts/src/widgets/notification/types.ts # packages/icons/src/iconify/index.ts # packages/icons/src/svg/index.ts # packages/stores/src/modules/user.ts # playground/src/adapter/component/index.ts # playground/src/store/auth.ts # pnpm-lock.yaml # vben-admin.code-workspace
2026-08-10 16:55:17 +08:00
parent b1f223554b e8d35a7471
commit 82b10bd122
1278 changed files with 71754 additions and 19298 deletions
--- a/docs/src/demos/vben-alert/alert/index.vue
+++ b/docs/src/demos/vben-alert/alert/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { alert, VbenButton } from '@vben/common-ui';
+
+import { Result } from 'antdv-next';
+
+function showAlert() {
+  alert('This is an alert message');
+}
+
+function showIconAlert() {
+  alert({
+    content: 'This is an alert message with icon',
+    icon: 'success',
+  });
+}
+
+function showCustomAlert() {
+  alert({
+    buttonAlign: 'center',
+    content: h(Result, {
+      status: 'success',
+      subTitle: '已成功创建订单。订单ID：2017182818828182881',
+      title: '操作成功',
+    }),
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showAlert">Alert</VbenButton>
+    <VbenButton @click="showIconAlert">Alert With Icon</VbenButton>
+    <VbenButton @click="showCustomAlert">Alert With Custom Content</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-alert/confirm/index.vue
+++ b/docs/src/demos/vben-alert/confirm/index.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+
+import { alert, confirm, VbenButton } from '@vben/common-ui';
+
+import { Checkbox, message } from 'antdv-next';
+
+function showConfirm() {
+  confirm('This is an alert message')
+    .then(() => {
+      alert('Confirmed');
+    })
+    .catch(() => {
+      alert('Canceled');
+    });
+}
+
+function showIconConfirm() {
+  confirm({
+    content: 'This is an alert message with icon',
+    icon: 'success',
+  });
+}
+
+function showfooterConfirm() {
+  const checked = ref(false);
+  confirm({
+    cancelText: '不要虾扯蛋',
+    confirmText: '是的，我们都是NPC',
+    content:
+      '刚才发生的事情，为什么我似乎早就经历过一般？\n我甚至能在事情发生过程中潜意识里预知到接下来会发生什么。\n\n听起来挺玄乎的，你有过这种感觉吗？',
+    footer: () =>
+      h(
+        Checkbox,
+        {
+          checked: checked.value,
+          class: 'flex-1',
+          'onUpdate:checked': (v) => (checked.value = v),
+        },
+        '不再提示',
+      ),
+    icon: 'question',
+    title: '未解之谜',
+  }).then(() => {
+    if (checked.value) {
+      message.success('我不会再拿这个问题烦你了');
+    } else {
+      message.info('下次还要继续问你哟');
+    }
+  });
+}
+
+function showAsyncConfirm() {
+  confirm({
+    beforeClose({ isConfirm }) {
+      if (isConfirm) {
+        // 这里可以执行一些异步操作。如果最终返回了false，将阻止关闭弹窗
+        return new Promise((resolve) => setTimeout(resolve, 2000));
+      }
+    },
+    content: 'This is an alert message with async confirm',
+    icon: 'success',
+  }).then(() => {
+    alert('Confirmed');
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showConfirm">Confirm</VbenButton>
+    <VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
+    <VbenButton @click="showfooterConfirm">Confirm With Footer</VbenButton>
+    <VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-alert/prompt/index.vue
+++ b/docs/src/demos/vben-alert/prompt/index.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { alert, prompt, useAlertContext, VbenButton } from '@vben/common-ui';
+
+import { BadgeJapaneseYen } from '@lucide/vue';
+import { Input, RadioGroup, Select } from 'antdv-next';
+
+function showPrompt() {
+  prompt({
+    content: '请输入一些东西',
+  })
+    .then((val) => {
+      alert(`已收到你的输入：${val}`);
+    })
+    .catch(() => {
+      alert('Canceled');
+    });
+}
+
+function showSlotsPrompt() {
+  prompt({
+    component: () => {
+      // 获取弹窗上下文。注意：只能在setup或者函数式组件中调用
+      const { doConfirm } = useAlertContext();
+      return h(
+        Input,
+        {
+          onKeydown(e: KeyboardEvent) {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              // 调用弹窗提供的确认方法
+              doConfirm();
+            }
+          },
+          placeholder: '请输入',
+          prefix: '充值金额：',
+          type: 'number',
+        },
+        {
+          addonAfter: () => h(BadgeJapaneseYen),
+        },
+      );
+    },
+    content:
+      '此弹窗演示了如何使用自定义插槽，并且可以使用useAlertContext获取到弹窗的上下文。\n在输入框中按下回车键会触发确认操作。',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) alert(`你输入的是${val}`);
+  });
+}
+
+function showSelectPrompt() {
+  prompt({
+    component: Select,
+    componentProps: {
+      options: [
+        { label: 'Option A', value: 'Option A' },
+        { label: 'Option B', value: 'Option B' },
+        { label: 'Option C', value: 'Option C' },
+      ],
+      placeholder: '请选择',
+      // 弹窗会设置body的pointer-events为none，这回影响下拉框的点击事件
+      popupClassName: 'pointer-events-auto',
+    },
+    content: '此弹窗演示了如何使用component传递自定义组件',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) {
+      alert(`你选择了${val}`);
+    }
+  });
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function showAsyncPrompt() {
+  prompt({
+    async beforeClose(scope) {
+      if (scope.isConfirm) {
+        if (scope.value) {
+          // 模拟异步操作，如果不成功，可以返回false
+          await sleep(2000);
+        } else {
+          alert('请选择一个选项');
+          return false;
+        }
+      }
+    },
+    component: RadioGroup,
+    componentProps: {
+      class: 'flex flex-col',
+      options: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' },
+      ],
+    },
+    content: '选择一个选项后再点击[确认]',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    alert(`${val} 已设置。`);
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showPrompt">Prompt</VbenButton>
+    <VbenButton @click="showSlotsPrompt"> Prompt With slots </VbenButton>
+    <VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
+    <VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
+  </div>
+</template>
--- a/docs/src/demos/vben-api-component/cascader/index.vue
+++ b/docs/src/demos/vben-api-component/cascader/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ApiComponent } from '@vben/common-ui';

-import { Cascader } from 'ant-design-vue';
+import { Cascader } from 'antdv-next';

 const treeData: Record<string, any> = [
  {
--- a/docs/src/demos/vben-cropper/aspect-ratio/index.vue
+++ b/docs/src/demos/vben-cropper/aspect-ratio/index.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, ref } from 'vue';
+
+import { VCropper } from '@vben/common-ui';
+
+const cropperRef = ref<InstanceType<typeof VCropper>>();
+const aspectRatio = ref('1:1');
+const imageUrl = ref('https://picsum.photos/seed/cropper-ratio/800/600');
+const croppedImage = ref('');
+
+const aspectOptions = [
+  { label: '1:1 (正方形)', value: '1:1' },
+  { label: '16:9 (宽屏)', value: '16:9' },
+  { label: '4:3 (标准)', value: '4:3' },
+  { label: '3:4 (竖版)', value: '3:4' },
+  { label: '3:2 (照片)', value: '3:2' },
+];
+
+// 释放旧的 object URL 以避免内存泄漏
+const revokeCroppedImage = () => {
+  if (croppedImage.value?.startsWith('blob:')) {
+    URL.revokeObjectURL(croppedImage.value);
+  }
+};
+
+const handleCrop = async () => {
+  const blob = await cropperRef.value?.getCropImage('image/jpeg', 0.9, 'blob');
+  if (blob instanceof Blob) {
+    // 释放旧的 URL
+    revokeCroppedImage();
+    croppedImage.value = URL.createObjectURL(blob);
+  }
+};
+
+const handleReset = () => {
+  // 释放 URL
+  revokeCroppedImage();
+  croppedImage.value = '';
+  imageUrl.value = `https://picsum.photos/seed/cropper-${Date.now()}/800/600`;
+};
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  revokeCroppedImage();
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <label class="text-sm text-gray-500 mr-2">选择比例:</label>
+      <select v-model="aspectRatio" class="px-3 py-1 border rounded text-sm">
+        <option
+          v-for="option in aspectOptions"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+
+    <VCropper
+      ref="cropperRef"
+      :img="imageUrl"
+      :width="500"
+      :height="300"
+      :aspect-ratio="aspectRatio"
+    />
+
+    <div class="mt-4 flex gap-2">
+      <button
+        class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600"
+        @click="handleCrop"
+      >
+        裁剪图片
+      </button>
+      <button
+        class="px-4 py-2 bg-gray-500 rounded hover:bg-gray-600"
+        @click="handleReset"
+      >
+        重置
+      </button>
+    </div>
+
+    <div v-if="croppedImage" class="mt-4">
+      <p class="text-sm text-gray-500 mb-2">
+        裁剪结果 (比例: {{ aspectRatio }}):
+      </p>
+      <img :src="croppedImage" class="max-w-full rounded border" />
+    </div>
+
+    <div class="mt-4">
+      <p class="text-sm text-gray-500">提示:</p>
+      <ul class="mt-2 text-xs text-gray-400 list-disc pl-4">
+        <li>设置固定比例后，裁剪框始终维持该比例</li>
+        <li>切换比例会自动重新计算裁剪框大小</li>
+        <li>比例格式为 "宽:高"，如 "16:9"</li>
+      </ul>
+    </div>
+  </div>
+</template>
--- a/docs/src/demos/vben-cropper/basic/index.vue
+++ b/docs/src/demos/vben-cropper/basic/index.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, ref } from 'vue';
+
+import { VCropper } from '@vben/common-ui';
+
+const cropperRef = ref<InstanceType<typeof VCropper>>();
+const imageUrl = ref('https://picsum.photos/seed/cropper-demo/800/600');
+const croppedImage = ref('');
+
+// 释放旧的 object URL 以避免内存泄漏
+const revokeCroppedImage = () => {
+  if (croppedImage.value?.startsWith('blob:')) {
+    URL.revokeObjectURL(croppedImage.value);
+  }
+};
+
+const handleCrop = async () => {
+  const blob = await cropperRef.value?.getCropImage('image/jpeg', 0.9, 'blob');
+  if (blob instanceof Blob) {
+    // 释放旧的 URL
+    revokeCroppedImage();
+    croppedImage.value = URL.createObjectURL(blob);
+  }
+};
+
+const handleReset = () => {
+  // 释放 URL
+  revokeCroppedImage();
+  croppedImage.value = '';
+  // 重新加载图片以重置裁剪框
+  imageUrl.value = `https://picsum.photos/seed/cropper-${Date.now()}/800/600`;
+};
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  revokeCroppedImage();
+});
+</script>
+
+<template>
+  <div>
+    <VCropper ref="cropperRef" :img="imageUrl" :width="500" :height="300" />
+    <div class="mt-4 flex gap-2">
+      <button
+        class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600"
+        @click="handleCrop"
+      >
+        裁剪图片
+      </button>
+      <button
+        class="px-4 py-2 bg-gray-500 rounded hover:bg-gray-600"
+        @click="handleReset"
+      >
+        重置
+      </button>
+    </div>
+    <div v-if="croppedImage" class="mt-4">
+      <p class="text-sm text-gray-500 mb-2">裁剪结果:</p>
+      <img :src="croppedImage" class="max-w-full rounded border" />
+    </div>
+    <div class="mt-4">
+      <p class="text-sm text-gray-500">提示:</p>
+      <ul class="mt-2 text-xs text-gray-400 list-disc pl-4">
+        <li>拖拽裁剪框中心区域可移动裁剪位置</li>
+        <li>拖拽四角或四边可调整裁剪框大小</li>
+        <li>默认为自由比例，可调整为任意比例</li>
+      </ul>
+    </div>
+  </div>
+</template>
--- a/docs/src/demos/vben-descriptions/basic/index.vue
+++ b/docs/src/demos/vben-descriptions/basic/index.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { VbenDescriptions } from '@vben/common-ui';
+
+const items = [
+  { content: 'Vben', label: '用户名' },
+  { content: '13800138000', label: '手机号' },
+  { content: '中国 · 杭州', label: '居住地' },
+  { content: '前端工程师', label: '职位' },
+  {
+    content: '这是一段较长的备注信息，用于演示跨列展示。',
+    label: '备注',
+    span: 3,
+  },
+];
+</script>
+<template>
+  <VbenDescriptions :items="items" />
+</template>
--- a/docs/src/demos/vben-descriptions/bordered/index.vue
+++ b/docs/src/demos/vben-descriptions/bordered/index.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { VbenDescriptions } from '@vben/common-ui';
+
+const items = [
+  { content: 'Vben', label: '用户名' },
+  { content: '13800138000', label: '手机号' },
+  { content: '正常', label: '状态' },
+  { content: '中国 · 杭州', label: '居住地' },
+  {
+    content: '浙江省杭州市西湖区某某街道某某小区 1 幢 2 单元',
+    label: '地址',
+    span: 3,
+  },
+];
+</script>
+<template>
+  <VbenDescriptions bordered title="用户信息" :items="items">
+    <template #extra>
+      <span style="color: #1677ff; cursor: pointer">编辑</span>
+    </template>
+  </VbenDescriptions>
+</template>
--- a/docs/src/demos/vben-descriptions/custom/index.vue
+++ b/docs/src/demos/vben-descriptions/custom/index.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { VbenDescriptions, VbenDescriptionsItem } from '@vben/common-ui';
+</script>
+<template>
+  <!-- 通过子组件 VbenDescriptionsItem 声明列表项 -->
+  <VbenDescriptions bordered :column="2">
+    <VbenDescriptionsItem label="用户名">Vben</VbenDescriptionsItem>
+    <VbenDescriptionsItem label="状态">
+      <span style="color: #52c41a">● 正常</span>
+    </VbenDescriptionsItem>
+    <VbenDescriptionsItem label="备注" :span="2">
+      <template #content>
+        <span style="color: #888">通过 #content 插槽自定义内容</span>
+      </template>
+    </VbenDescriptionsItem>
+  </VbenDescriptions>
+</template>
--- a/docs/src/demos/vben-descriptions/size/index.vue
+++ b/docs/src/demos/vben-descriptions/size/index.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { VbenDescriptions } from '@vben/common-ui';
+
+const items = [
+  { content: 'Vben', label: '用户名' },
+  { content: '13800138000', label: '手机号' },
+  { content: '中国 · 杭州', label: '居住地' },
+  { content: '前端工程师', label: '职位' },
+];
+</script>
+<template>
+  <div class="flex gap-4 flex-col">
+    <VbenDescriptions
+      size="small"
+      bordered
+      title="Small"
+      :column="2"
+      :items="items"
+    />
+    <VbenDescriptions
+      size="middle"
+      bordered
+      title="Middle"
+      :column="2"
+      :items="items"
+    />
+    <VbenDescriptions
+      size="large"
+      bordered
+      title="Large"
+      :column="2"
+      :items="items"
+    />
+  </div>
+</template>
--- a/docs/src/demos/vben-descriptions/span/index.vue
+++ b/docs/src/demos/vben-descriptions/span/index.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { DescriptionsItemType } from '@vben/common-ui';
+
+import { VbenDescriptions } from '@vben/common-ui';
+
+const items: DescriptionsItemType[] = [
+  { content: '1', label: 'A' },
+  { content: '2（span: 2）', label: 'B', span: 2 },
+  { content: '3', label: 'C' },
+  { content: '占满当前行剩余空间', label: 'D（span: filled）', span: 'filled' },
+  { content: '5', label: 'E' },
+];
+</script>
+<template>
+  <!-- 列数随断点变化：xs 1 列、sm 2 列、md 及以上 3 列 -->
+  <VbenDescriptions bordered :column="{ md: 3, sm: 2, xs: 1 }" :items="items" />
+</template>
--- a/docs/src/demos/vben-descriptions/vertical/index.vue
+++ b/docs/src/demos/vben-descriptions/vertical/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DescriptionsItemType } from '@vben/common-ui';
+
+import { VbenDescriptions } from '@vben/common-ui';
+
+const items: DescriptionsItemType[] = [
+  { content: 'Vben', label: '用户名' },
+  { content: '13800138000', label: '手机号' },
+  { content: '中国 · 杭州', label: '居住地' },
+  { content: '这是一段较长的备注信息。', label: '备注', span: 3 },
+];
+</script>
+<template>
+  <VbenDescriptions bordered layout="vertical" :items="items" />
+</template>
--- a/docs/src/demos/vben-ellipsis-text/auto-display/index.vue
+++ b/docs/src/demos/vben-ellipsis-text/auto-display/index.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+
+const text = `
+Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+`;
+</script>
+<template>
+  <EllipsisText :line="2" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+
+  <EllipsisText :line="3" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+</template>
--- a/docs/src/demos/vben-form/value-format/index.vue
+++ b/docs/src/demos/vben-form/value-format/index.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import { Button, Card, message, Space, Tag } from 'antdv-next';
+
+import { useVbenForm } from '#/adapter/form';
+
+interface ValueFormatFormValues {
+  firstName?: string;
+  lastName?: string;
+  tags?: string[];
+}
+
+function encodeValueFormatValues(values: Readonly<ValueFormatFormValues>) {
+  return {
+    fullName: [values.firstName, values.lastName].filter(Boolean).join(' '),
+    tags: (values.tags ?? []).join(','),
+  };
+}
+
+type ValueFormatSubmitValues = ReturnType<typeof encodeValueFormatValues>;
+
+function decodeValueFormatValues(
+  values: Readonly<ValueFormatSubmitValues>,
+): ValueFormatFormValues {
+  const [firstName = '', ...lastNameParts] = values.fullName
+    .trim()
+    .split(/\s+/);
+  return {
+    firstName,
+    lastName: lastNameParts.join(' '),
+    tags: values.tags ? values.tags.split(',') : [],
+  };
+}
+
+const transformedValues = ref<Partial<ValueFormatSubmitValues>>({});
+const liveValues = ref<Partial<ValueFormatFormValues>>({});
+
+const [Form, formApi] = useVbenForm({
+  codec: {
+    decode: decodeValueFormatValues,
+    encode: encodeValueFormatValues,
+  },
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  handleSubmit,
+  handleValuesChange,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'firstName',
+      help: '与姓氏一起编码为 fullName',
+      label: '名字',
+    },
+    {
+      component: 'Input',
+      fieldName: 'lastName',
+      help: '与名字一起编码为 fullName',
+      label: '姓氏',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        mode: 'multiple',
+        options: [
+          { label: '管理员', value: 'admin' },
+          { label: '审核员', value: 'reviewer' },
+          { label: '访客', value: 'guest' },
+        ],
+        placeholder: '请选择标签',
+      },
+      fieldName: 'tags',
+      help: '数组编码为逗号分隔字符串',
+      label: '标签',
+    },
+  ],
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+});
+
+const liveValuesPreview = computed(() => formatJsonPreview(liveValues.value));
+
+const transformedValuesPreview = computed(() => {
+  return formatJsonPreview(transformedValues.value);
+});
+
+function formatJsonPreview(value: unknown) {
+  return JSON.stringify(value, null, 2);
+}
+
+async function handleInspectValues() {
+  await syncPreviewValues();
+  message.success('已刷新 getValues 输出');
+}
+
+async function handleSetSubmitValues() {
+  await formApi.setSubmitValues({
+    fullName: 'Ada Lovelace',
+    tags: 'admin,reviewer',
+  });
+  await syncPreviewValues();
+  message.success('已通过 codec.decode 回填提交值');
+}
+
+function handleSubmit(values: ValueFormatSubmitValues) {
+  transformedValues.value = values;
+  message.success({
+    content: `getValues output: ${JSON.stringify(values)}`,
+  });
+}
+
+function handleValuesChange(
+  values: Readonly<ValueFormatFormValues>,
+  _fieldsChanged: string[],
+  getFormattedValues: () => ValueFormatSubmitValues,
+) {
+  liveValues.value = { ...values };
+  transformedValues.value = getFormattedValues();
+}
+
+async function syncPreviewValues(values?: Readonly<ValueFormatFormValues>) {
+  const rawValues = values ?? (await formApi.getRawValues());
+  liveValues.value = { ...rawValues };
+  transformedValues.value = await formApi.getValues();
+}
+
+onMounted(async () => {
+  await nextTick();
+  await syncPreviewValues();
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap gap-2">
+      <Tag color="processing">encode：生成完整提交值</Tag>
+      <Tag color="success">decode：恢复完整表单值</Tag>
+      <Tag color="warning">多字段转换原子执行</Tag>
+    </div>
+
+    <Card title="Codec 示例">
+      <template #extra>
+        <Space wrap>
+          <Button @click="handleSetSubmitValues">从提交值回填</Button>
+          <Button type="primary" @click="handleInspectValues">
+            查看 getValues 输出
+          </Button>
+        </Space>
+      </template>
+      <Form />
+    </Card>
+
+    <div class="grid gap-4 lg:grid-cols-2">
+      <Card title="getRawValues() 输出（组件值）">
+        <pre class="bg-muted overflow-auto rounded-md p-4 text-sm">{{
+          liveValuesPreview
+        }}</pre>
+      </Card>
+      <Card title="getValues / submit 输出（codec.encode 后）">
+        <pre class="bg-muted overflow-auto rounded-md p-4 text-sm">{{
+          transformedValuesPreview
+        }}</pre>
+      </Card>
+    </div>
+  </div>
+</template>
--- a/docs/src/demos/vben-modal/animation-type/index.vue
+++ b/docs/src/demos/vben-modal/animation-type/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+const [SlideModal, slideModalApi] = useVbenModal({
+  animationType: 'slide',
+});
+
+const [ScaleModal, scaleModalApi] = useVbenModal({
+  animationType: 'scale',
+});
+
+function openSlideModal() {
+  slideModalApi.open();
+}
+
+function openScaleModal() {
+  scaleModalApi.open();
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex gap-4">
+      <VbenButton @click="openSlideModal">滑动动画</VbenButton>
+      <VbenButton @click="openScaleModal">缩放动画</VbenButton>
+    </div>
+
+    <SlideModal title="滑动动画示例" class="w-125">
+      <p>这是使用滑动动画的弹窗，从顶部向下滑动进入。</p>
+    </SlideModal>
+
+    <ScaleModal title="缩放动画示例" class="w-125">
+      <p>这是使用缩放动画的弹窗，以缩放淡入淡出的方式显示。</p>
+    </ScaleModal>
+  </div>
+</template>
--- a/docs/src/demos/vben-table-action/basic/index.vue
+++ b/docs/src/demos/vben-table-action/basic/index.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { ActionItem } from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import { VbenTableAction } from '@vben/common-ui';
+
+const last = ref('无');
+
+const actions: ActionItem[] = [
+  { key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' },
+  { key: 'detail', onClick: () => (last.value = '详情'), text: '详情' },
+  {
+    danger: true,
+    key: 'delete',
+    onClick: () => (last.value = '删除'),
+    text: '删除',
+  },
+];
+</script>
+<template>
+  <div>
+    <VbenTableAction :actions="actions" align="start" divider />
+    <p style="margin-top: 8px; font-size: 13px; opacity: 0.7">
+      最近点击：{{ last }}
+    </p>
+  </div>
+</template>
--- a/docs/src/demos/vben-table-action/dropdown/index.vue
+++ b/docs/src/demos/vben-table-action/dropdown/index.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { ActionItem } from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import { VbenTableAction } from '@vben/common-ui';
+
+const last = ref('无');
+
+const actions: ActionItem[] = [
+  { key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' },
+];
+
+const dropdownActions: ActionItem[] = [
+  { key: 'copy', onClick: () => (last.value = '复制'), text: '复制' },
+  { key: 'export', onClick: () => (last.value = '导出'), text: '导出' },
+  {
+    danger: true,
+    key: 'remove',
+    // 下拉项同样支持气泡确认
+    popConfirm: {
+      cancelText: '取消',
+      confirm: () => (last.value = '已移除'),
+      okText: '确认',
+      title: '确定移除吗？',
+    },
+    text: '移除',
+  },
+];
+</script>
+<template>
+  <div>
+    <VbenTableAction
+      :actions="actions"
+      :dropdown-actions="dropdownActions"
+      align="start"
+      divider
+      more-text="更多"
+    />
+    <p style="margin-top: 8px; font-size: 13px; opacity: 0.7">
+      最近点击：{{ last }}
+    </p>
+  </div>
+</template>
--- a/docs/src/demos/vben-table-action/permission/index.vue
+++ b/docs/src/demos/vben-table-action/permission/index.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { ActionItem } from '@vben/common-ui';
+
+import { VbenTableAction } from '@vben/common-ui';
+
+// 模拟当前用户拥有的权限码
+const allow = new Set(['user:detail', 'user:edit']);
+
+function hasPermission(auth?: string | string[]) {
+  if (!auth) return true;
+  const codes = Array.isArray(auth) ? auth : [auth];
+  return codes.some((code) => allow.has(code));
+}
+
+const actions: ActionItem[] = [
+  { auth: 'user:edit', key: 'edit', text: '编辑' },
+  { auth: 'user:detail', key: 'detail', text: '详情' },
+  // 无 user:delete 权限，按钮被隐藏
+  { auth: 'user:delete', danger: true, key: 'delete', text: '删除（无权限）' },
+];
+</script>
+<template>
+  <VbenTableAction
+    :actions="actions"
+    :has-permission="hasPermission"
+    align="start"
+  />
+</template>
--- a/docs/src/demos/vben-table-action/popconfirm/index.vue
+++ b/docs/src/demos/vben-table-action/popconfirm/index.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { ActionItem } from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import { VbenTableAction } from '@vben/common-ui';
+
+const last = ref('无');
+
+const actions: ActionItem[] = [
+  { key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' },
+  {
+    danger: true,
+    key: 'delete',
+    popConfirm: {
+      cancelText: '取消',
+      confirm: () => (last.value = '已删除'),
+      okText: '确认',
+      title: '确定删除这一行吗？',
+    },
+    text: '删除',
+  },
+];
+</script>
+<template>
+  <div>
+    <VbenTableAction :actions="actions" align="start" />
+    <p style="margin-top: 8px; font-size: 13px; opacity: 0.7">
+      最近操作：{{ last }}
+    </p>
+  </div>
+</template>
--- a/docs/src/demos/vben-table-action/tooltip/index.vue
+++ b/docs/src/demos/vben-table-action/tooltip/index.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { ActionItem } from '@vben/common-ui';
+
+import { VbenTableAction } from '@vben/common-ui';
+
+const actions: ActionItem[] = [
+  { key: 'edit', text: '编辑', tooltip: '编辑这一行' },
+  {
+    key: 'detail',
+    text: '详情',
+    tooltip: { content: '查看详情', side: 'top' },
+  },
+];
+</script>
+<template>
+  <VbenTableAction :actions="actions" align="start" />
+</template>
--- a/docs/src/demos/vben-tiptap/basic/index.vue
+++ b/docs/src/demos/vben-tiptap/basic/index.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { VbenTiptap } from '@vben/plugins/tiptap';
+
+const content = ref('<p>开始编辑你的内容...</p>');
+</script>
+
+<template>
+  <div>
+    <VbenTiptap v-model="content" />
+    <div class="mt-4">
+      <p class="text-sm text-gray-500">当前内容:</p>
+      <pre class="mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto max-h-40">
+        {{ content }}
+      </pre>
+    </div>
+  </div>
+</template>
--- a/docs/src/demos/vben-tiptap/image-upload/index.vue
+++ b/docs/src/demos/vben-tiptap/image-upload/index.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { type ImageUploadOptions, VbenTiptap } from '@vben/plugins/tiptap';
+
+const content = ref('');
+
+// Mock upload function with progress simulation
+const imageUpload: ImageUploadOptions = {
+  accept: 'image/jpeg,image/png,image/gif,image/webp',
+  maxSize: 5 * 1024 * 1024, // 5MB
+  upload: async (_file, onProgress) => {
+    // Simulate upload progress
+    for (let i = 0; i <= 100; i += 10) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      onProgress?.(i);
+    }
+
+    // Return a mock image URL (using picsum for demo)
+    return `https://picsum.photos/seed/${Date.now()}/800/400`;
+  },
+  onUploadError: (error) => {
+    console.error('Upload error:', error);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <VbenTiptap
+      v-model="content"
+      :image-upload="imageUpload"
+      placeholder="尝试拖拽或粘贴图片..."
+    />
+    <div class="mt-4">
+      <p class="text-sm text-gray-500">提示:</p>
+      <ul class="mt-2 text-xs text-gray-400 list-disc pl-4">
+        <li>点击工具栏图片按钮可选择本地上传或 URL 插入</li>
+        <li>拖拽图片到编辑器区域可直接上传</li>
+        <li>粘贴图片也会触发上传</li>
+        <li>上传过程中会显示进度条</li>
+      </ul>
+    </div>
+  </div>
+</template>