From 645c679abcf9bdb46dc66578613a6aae893a9ae7 Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Mon, 4 Nov 2024 10:42:39 +0800
Subject: [PATCH 1/9] docs: init vxe-table demos

---
 docs/src/_env/adapter/index.ts                |   1 +
 docs/src/_env/adapter/vxe-table.ts            |  63 +++++++
 .../components/common-ui/vben-vxe-table.md    |   6 +-
 docs/src/demos/vben-vxe-table/basic/index.vue |  87 +++++++++
 .../vben-vxe-table/custom-cell/index.vue      | 107 +++++++++++
 .../demos/vben-vxe-table/edit-cell/index.vue  |  57 ++++++
 .../demos/vben-vxe-table/edit-row/index.vue   |  94 ++++++++++
 docs/src/demos/vben-vxe-table/fixed/index.vue |  69 +++++++
 docs/src/demos/vben-vxe-table/form/index.vue  | 110 +++++++++++
 .../src/demos/vben-vxe-table/remote/index.vue |  74 ++++++++
 docs/src/demos/vben-vxe-table/table-data.ts   | 172 ++++++++++++++++++
 docs/src/demos/vben-vxe-table/tree/index.vue  |  62 +++++++
 .../demos/vben-vxe-table/virtual/index.vue    |  66 +++++++
 13 files changed, 967 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/_env/adapter/vxe-table.ts
 create mode 100644 docs/src/demos/vben-vxe-table/basic/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/custom-cell/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/edit-cell/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/edit-row/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/fixed/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/form/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/remote/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/table-data.ts
 create mode 100644 docs/src/demos/vben-vxe-table/tree/index.vue
 create mode 100644 docs/src/demos/vben-vxe-table/virtual/index.vue

diff --git a/docs/src/_env/adapter/index.ts b/docs/src/_env/adapter/index.ts
index 698d687b924..6a9391be571 100644
--- a/docs/src/_env/adapter/index.ts
+++ b/docs/src/_env/adapter/index.ts
@@ -1 +1,2 @@
 export * from './form';
+export * from './vxe-table';
diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
new file mode 100644
index 00000000000..e47f893833a
--- /dev/null
+++ b/docs/src/_env/adapter/vxe-table.ts
@@ -0,0 +1,63 @@
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(Image, { src: row[column.field] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          Button,
+          { size: 'small', type: 'link' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index a80ef5855ee..c5567578012 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -4,4 +4,8 @@ outline: deep
 
 # Vben Vxe Table 表格
 
-文档待补充，如果需要使用，可先行查看 vxe-table 文档和 示例代码，内部有部分注释。
+框架提供的Table 列表组件基于 [vxe-table](https://xuliangzhan.github.io/vxe-table/)，结合`Vben Form表单`进行了二次封装。
+
+其中，表头的 **表单搜索** 部分采用了`Vben Form表单`，表格主体部分使用了`vxe-grid`组件，支持表格的分页、排序、筛选等功能。
+
+<DemoPreview dir="demos/vben-vxe-table/basic" />
diff --git a/docs/src/demos/vben-vxe-table/basic/index.vue b/docs/src/demos/vben-vxe-table/basic/index.vue
new file mode 100644
index 00000000000..b446114fa70
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/basic/index.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { MOCK_TABLE_DATA } from '../table-data';
+
+interface RowType {
+  address: string;
+  age: number;
+  id: number;
+  name: string;
+  nickname: string;
+  role: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  columns: [
+    { title: '序号', type: 'seq', width: 50 },
+    { field: 'name', title: 'Name' },
+    { field: 'age', sortable: true, title: 'Age' },
+    { field: 'nickname', title: 'Nickname' },
+    { field: 'role', title: 'Role' },
+    { field: 'address', showOverflow: true, title: 'Address' },
+  ],
+  data: MOCK_TABLE_DATA,
+  pagerConfig: {
+    enabled: false,
+  },
+  sortConfig: {
+    multiple: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<RowType> = {
+  cellClick: ({ row }) => {
+    message.info(`cell-click: ${row.name}`);
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions });
+
+const showBorder = gridApi.useStore((state) => state.gridOptions?.border);
+const showStripe = gridApi.useStore((state) => state.gridOptions?.stripe);
+
+function changeBorder() {
+  gridApi.setGridOptions({
+    border: !showBorder.value,
+  });
+}
+
+function changeStripe() {
+  gridApi.setGridOptions({
+    stripe: !showStripe.value,
+  });
+}
+
+function changeLoading() {
+  gridApi.setLoading(true);
+  setTimeout(() => {
+    gridApi.setLoading(false);
+  }, 2000);
+}
+</script>
+
+<template>
+  <div class="flex w-full">
+    <Grid class="w-full">
+      <!-- <template #toolbar-actions>
+        <Button class="mr-2" type="primary">左侧插槽</Button>
+      </template> -->
+      <template #toolbar-tools>
+        <Button class="mr-2" type="primary" @click="changeBorder">
+          {{ showBorder ? '隐藏' : '显示' }}边框
+        </Button>
+        <Button class="mr-2" type="primary" @click="changeLoading">
+          显示loading
+        </Button>
+        <Button class="mr-2" type="primary" @click="changeStripe">
+          {{ showStripe ? '隐藏' : '显示' }}斑马纹
+        </Button>
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
new file mode 100644
index 00000000000..46fd29cce15
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Image, Switch, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  imageUrl: string;
+  open: boolean;
+  price: string;
+  productName: string;
+  releaseDate: string;
+  status: 'error' | 'success' | 'warning';
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'name',
+  },
+  columns: [
+    { title: '序号', type: 'seq', width: 50 },
+    { field: 'category', title: 'Category', width: 100 },
+    {
+      field: 'imageUrl',
+      slots: { default: 'image-url' },
+      title: 'Image',
+      width: 100,
+    },
+    {
+      cellRender: { name: 'CellImage' },
+      field: 'imageUrl2',
+      title: 'Render Image',
+      width: 130,
+    },
+    {
+      field: 'open',
+      slots: { default: 'open' },
+      title: 'Open',
+      width: 100,
+    },
+    {
+      field: 'status',
+      slots: { default: 'status' },
+      title: 'Status',
+      width: 100,
+    },
+    { field: 'color', title: 'Color', width: 100 },
+    { field: 'productName', title: 'Product Name', width: 200 },
+    { field: 'price', title: 'Price', width: 100 },
+    {
+      field: 'releaseDate',
+      formatter: 'formatDateTime',
+      title: 'Date',
+      width: 200,
+    },
+    {
+      cellRender: { name: 'CellLink', props: { text: '编辑' } },
+      field: 'action',
+      fixed: 'right',
+      title: '操作',
+      width: 120,
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getExampleTableApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+};
+
+const [Grid] = useVbenVxeGrid({ gridOptions });
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid>
+      <template #image-url="{ row }">
+        <Image :src="row.imageUrl" height="30" width="30" />
+      </template>
+      <template #open="{ row }">
+        <Switch v-model:checked="row.open" />
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.color">{{ row.status }}</Tag>
+      </template>
+      <template #action>
+        <Button type="link">编辑</Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/edit-cell/index.vue b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
new file mode 100644
index 00000000000..9aebde86758
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  columns: [
+    { title: '序号', type: 'seq', width: 50 },
+    { editRender: { name: 'input' }, field: 'category', title: 'Category' },
+    { editRender: { name: 'input' }, field: 'color', title: 'Color' },
+    {
+      editRender: { name: 'input' },
+      field: 'productName',
+      title: 'Product Name',
+    },
+    { field: 'price', title: 'Price' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
+  ],
+  editConfig: {
+    mode: 'cell',
+    trigger: 'click',
+  },
+  height: 'auto',
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getExampleTableApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  showOverflow: true,
+};
+
+const [Grid] = useVbenVxeGrid({ gridOptions });
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid />
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/edit-row/index.vue b/docs/src/demos/vben-vxe-table/edit-row/index.vue
new file mode 100644
index 00000000000..f9d25cac597
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/edit-row/index.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  columns: [
+    { title: '序号', type: 'seq', width: 50 },
+    { editRender: { name: 'input' }, field: 'category', title: 'Category' },
+    { editRender: { name: 'input' }, field: 'color', title: 'Color' },
+    {
+      editRender: { name: 'input' },
+      field: 'productName',
+      title: 'Product Name',
+    },
+    { field: 'price', title: 'Price' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
+    { slots: { default: 'action' }, title: '操作' },
+  ],
+  editConfig: {
+    mode: 'row',
+    trigger: 'click',
+  },
+  height: 'auto',
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getExampleTableApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  showOverflow: true,
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+function hasEditStatus(row: RowType) {
+  return gridApi.grid?.isEditByRow(row);
+}
+
+function editRowEvent(row: RowType) {
+  gridApi.grid?.setEditRow(row);
+}
+
+async function saveRowEvent(row: RowType) {
+  await gridApi.grid?.clearEdit();
+
+  gridApi.setLoading(true);
+  setTimeout(() => {
+    gridApi.setLoading(false);
+    message.success({
+      content: `保存成功！category=${row.category}`,
+    });
+  }, 600);
+}
+
+const cancelRowEvent = (_row: RowType) => {
+  gridApi.grid?.clearEdit();
+};
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid>
+      <template #action="{ row }">
+        <template v-if="hasEditStatus(row)">
+          <Button type="link" @click="saveRowEvent(row)">保存</Button>
+          <Button type="link" @click="cancelRowEvent(row)">取消</Button>
+        </template>
+        <template v-else>
+          <Button type="link" @click="editRowEvent(row)">编辑</Button>
+        </template>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/fixed/index.vue b/docs/src/demos/vben-vxe-table/fixed/index.vue
new file mode 100644
index 00000000000..399d35210d7
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/fixed/index.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  columns: [
+    { fixed: 'left', title: '序号', type: 'seq', width: 50 },
+    { field: 'category', title: 'Category', width: 300 },
+    { field: 'color', title: 'Color', width: 300 },
+    { field: 'productName', title: 'Product Name', width: 300 },
+    { field: 'price', title: 'Price', width: 300 },
+    {
+      field: 'releaseDate',
+      formatter: 'formatDateTime',
+      title: 'DateTime',
+      width: 500,
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: '操作',
+      width: 120,
+    },
+  ],
+  height: 'auto',
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getExampleTableApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+  },
+};
+
+const [Grid] = useVbenVxeGrid({ gridOptions });
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid>
+      <template #action>
+        <Button type="link">编辑</Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
new file mode 100644
index 00000000000..fad0cf58ff3
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'Input',
+      defaultValue: '1',
+      fieldName: 'category',
+      label: 'Category',
+    },
+    {
+      component: 'Input',
+      fieldName: 'productName',
+      label: 'ProductName',
+    },
+    {
+      component: 'Input',
+      fieldName: 'price',
+      label: 'Price',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: 'Color1',
+            value: '1',
+          },
+          {
+            label: 'Color2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'color',
+      label: 'Color',
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'datePicker',
+      label: 'Date',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'name',
+  },
+  columns: [
+    { title: '序号', type: 'seq', width: 50 },
+    { align: 'left', title: 'Name', type: 'checkbox', width: 100 },
+    { field: 'category', title: 'Category' },
+    { field: 'color', title: 'Color' },
+    { field: 'productName', title: 'Product Name' },
+    { field: 'price', title: 'Price' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getExampleTableApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+};
+
+const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid />
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/remote/index.vue b/docs/src/demos/vben-vxe-table/remote/index.vue
new file mode 100644
index 00000000000..7fc98a08b35
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/remote/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExampleTableApi } from '#/api';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'name',
+  },
+  columns: [
+    { title: '序号', type: 'seq', width: 50 },
+    { align: 'left', title: 'Name', type: 'checkbox', width: 100 },
+    { field: 'category', title: 'Category' },
+    { field: 'color', title: 'Color' },
+    { field: 'productName', title: 'Product Name' },
+    { field: 'price', title: 'Price' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getExampleTableApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    // import: true,
+    refresh: true,
+    zoom: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="数据列表" table-title-help="提示">
+      <template #toolbar-tools>
+        <Button class="mr-2" type="primary" @click="() => gridApi.query()">
+          刷新当前页面
+        </Button>
+        <Button type="primary" @click="() => gridApi.reload()">
+          刷新并返回第一页
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/table-data.ts b/docs/src/demos/vben-vxe-table/table-data.ts
new file mode 100644
index 00000000000..d80ea5337a8
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/table-data.ts
@@ -0,0 +1,172 @@
+interface TableRowData {
+  address: string;
+  age: number;
+  id: number;
+  name: string;
+  nickname: string;
+  role: string;
+}
+
+const roles = ['User', 'Admin', 'Manager', 'Guest'];
+
+export const MOCK_TABLE_DATA: TableRowData[] = (() => {
+  const data: TableRowData[] = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      address: `New York${i}`,
+      age: i + 1,
+      id: i,
+      name: `Test${i}`,
+      nickname: `Test${i}`,
+      role: roles[Math.floor(Math.random() * roles.length)] as string,
+    });
+  }
+  return data;
+})();
+
+export const MOCK_TREE_TABLE_DATA = [
+  {
+    date: '2020-08-01',
+    id: 10_000,
+    name: 'Test1',
+    parentId: null,
+    size: 1024,
+    type: 'mp3',
+  },
+  {
+    date: '2021-04-01',
+    id: 10_050,
+    name: 'Test2',
+    parentId: null,
+    size: 0,
+    type: 'mp4',
+  },
+  {
+    date: '2020-03-01',
+    id: 24_300,
+    name: 'Test3',
+    parentId: 10_050,
+    size: 1024,
+    type: 'avi',
+  },
+  {
+    date: '2021-04-01',
+    id: 20_045,
+    name: 'Test4',
+    parentId: 24_300,
+    size: 600,
+    type: 'html',
+  },
+  {
+    date: '2021-04-01',
+    id: 10_053,
+    name: 'Test5',
+    parentId: 24_300,
+    size: 0,
+    type: 'avi',
+  },
+  {
+    date: '2021-10-01',
+    id: 24_330,
+    name: 'Test6',
+    parentId: 10_053,
+    size: 25,
+    type: 'txt',
+  },
+  {
+    date: '2020-01-01',
+    id: 21_011,
+    name: 'Test7',
+    parentId: 10_053,
+    size: 512,
+    type: 'pdf',
+  },
+  {
+    date: '2021-06-01',
+    id: 22_200,
+    name: 'Test8',
+    parentId: 10_053,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2020-11-01',
+    id: 23_666,
+    name: 'Test9',
+    parentId: null,
+    size: 2048,
+    type: 'xlsx',
+  },
+  {
+    date: '2021-06-01',
+    id: 23_677,
+    name: 'Test10',
+    parentId: 23_666,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2021-06-01',
+    id: 23_671,
+    name: 'Test11',
+    parentId: 23_677,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2021-06-01',
+    id: 23_672,
+    name: 'Test12',
+    parentId: 23_677,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2021-06-01',
+    id: 23_688,
+    name: 'Test13',
+    parentId: 23_666,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2021-06-01',
+    id: 23_681,
+    name: 'Test14',
+    parentId: 23_688,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2021-06-01',
+    id: 23_682,
+    name: 'Test15',
+    parentId: 23_688,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2020-10-01',
+    id: 24_555,
+    name: 'Test16',
+    parentId: null,
+    size: 224,
+    type: 'avi',
+  },
+  {
+    date: '2021-06-01',
+    id: 24_566,
+    name: 'Test17',
+    parentId: 24_555,
+    size: 1024,
+    type: 'js',
+  },
+  {
+    date: '2021-06-01',
+    id: 24_577,
+    name: 'Test18',
+    parentId: 24_555,
+    size: 1024,
+    type: 'js',
+  },
+];
diff --git a/docs/src/demos/vben-vxe-table/tree/index.vue b/docs/src/demos/vben-vxe-table/tree/index.vue
new file mode 100644
index 00000000000..48e74703c2e
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/tree/index.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { MOCK_TREE_TABLE_DATA } from '../table-data';
+
+interface RowType {
+  date: string;
+  id: number;
+  name: string;
+  parentId: null | number;
+  size: number;
+  type: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  columns: [
+    { type: 'seq', width: 70 },
+    { field: 'name', minWidth: 300, title: 'Name', treeNode: true },
+    { field: 'size', title: 'Size' },
+    { field: 'type', title: 'Type' },
+    { field: 'date', title: 'Date' },
+  ],
+  data: MOCK_TREE_TABLE_DATA,
+  pagerConfig: {
+    enabled: false,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'id',
+    transform: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+const expandAll = () => {
+  gridApi.grid?.setAllTreeExpand(true);
+};
+
+const collapseAll = () => {
+  gridApi.grid?.setAllTreeExpand(false);
+};
+</script>
+
+<template>
+  <Page>
+    <Grid table-title="数据列表" table-title-help="提示">
+      <template #toolbar-tools>
+        <Button class="mr-2" type="primary" @click="expandAll">
+          展开全部
+        </Button>
+        <Button type="primary" @click="collapseAll"> 折叠全部 </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/docs/src/demos/vben-vxe-table/virtual/index.vue b/docs/src/demos/vben-vxe-table/virtual/index.vue
new file mode 100644
index 00000000000..f35a691b3df
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/virtual/index.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { onMounted } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+interface RowType {
+  id: number;
+  name: string;
+  role: string;
+  sex: string;
+}
+
+const gridOptions: VxeGridProps<RowType> = {
+  columns: [
+    { type: 'seq', width: 70 },
+    { field: 'name', title: 'Name' },
+    { field: 'role', title: 'Role' },
+    { field: 'sex', title: 'Sex' },
+  ],
+  data: [],
+  height: 'auto',
+  pagerConfig: {
+    enabled: false,
+  },
+  scrollY: {
+    enabled: true,
+    gt: 0,
+  },
+  showOverflow: true,
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+// 模拟行数据
+const loadList = (size = 200) => {
+  try {
+    const dataList: RowType[] = [];
+    for (let i = 0; i < size; i++) {
+      dataList.push({
+        id: 10_000 + i,
+        name: `Test${i}`,
+        role: 'Developer',
+        sex: '男',
+      });
+    }
+    gridApi.setGridOptions({ data: dataList });
+  } catch (error) {
+    console.error('Failed to load data:', error);
+    // Implement user-friendly error handling
+  }
+};
+
+onMounted(() => {
+  loadList(1000);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid />
+  </Page>
+</template>

From 884d6d04aa34659100bf38ebd6378c7913300772 Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Mon, 4 Nov 2024 16:44:40 +0800
Subject: [PATCH 2/9] style: fix vxe-table index.scss import error

---
 docs/package.json                             |  6 +-
 docs/src/_env/adapter/theme.css               | 91 +++++++++++++++++++
 docs/src/_env/adapter/vxe-table.ts            |  5 +
 .../components/common-ui/vben-vxe-table.md    |  2 +
 docs/src/demos/vben-vxe-table/mock-api.ts     |  8 ++
 5 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/_env/adapter/theme.css
 create mode 100644 docs/src/demos/vben-vxe-table/mock-api.ts

diff --git a/docs/package.json b/docs/package.json
index 0585e667873..61bad10c072 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,17 +14,21 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/styles": "workspace:*",
     "ant-design-vue": "catalog:",
     "lucide-vue-next": "catalog:",
     "medium-zoom": "catalog:",
     "radix-vue": "catalog:",
-    "vitepress-plugin-group-icons": "catalog:"
+    "vitepress-plugin-group-icons": "catalog:",
+    "vxe-pc-ui": "^4.2.38",
+    "vxe-table": "catalog:"
   },
   "devDependencies": {
     "@nolebase/vitepress-plugin-git-changelog": "catalog:",
     "@vben/vite-config": "workspace:*",
     "@vite-pwa/vitepress": "catalog:",
+    "sass": "^1.80.6",
     "vitepress": "catalog:",
     "vue": "catalog:"
   }
diff --git a/docs/src/_env/adapter/theme.css b/docs/src/_env/adapter/theme.css
new file mode 100644
index 00000000000..a6e8ca1d3df
--- /dev/null
+++ b/docs/src/_env/adapter/theme.css
@@ -0,0 +1,91 @@
+:root {
+  --vxe-ui-font-color: hsl(var(--foreground));
+  --vxe-ui-font-primary-color: hsl(var(--primary));
+
+  /* --vxe-ui-font-lighten-color: #babdc0;
+  --vxe-ui-font-darken-color: #86898e; */
+  --vxe-ui-font-disabled-color: hsl(var(--foreground) / 50%);
+
+  /* base */
+  --vxe-ui-base-popup-border-color: hsl(var(--border));
+  --vxe-ui-input-disabled-color: hsl(var(--border) / 60%);
+
+  /* --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgb(0 0 0 / 50%); */
+
+  /* layout */
+  --vxe-ui-layout-background-color: hsl(var(--background));
+  --vxe-ui-table-resizable-line-color: hsl(var(--border));
+
+  /* --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px hsl(var(--accent));
+  --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px hsl(var(--accent)); */
+
+  /* input */
+  --vxe-ui-input-border-color: hsl(var(--border));
+
+  /* --vxe-ui-input-placeholder-color: #8d9095; */
+
+  /* --vxe-ui-input-disabled-background-color: #262727; */
+
+  /* loading */
+  --vxe-ui-loading-background-color: hsl(var(--overlay-content));
+
+  /* table */
+  --vxe-ui-table-header-background-color: hsl(var(--accent));
+  --vxe-ui-table-border-color: hsl(var(--border));
+  --vxe-ui-table-row-hover-background-color: hsl(var(--accent-hover));
+  --vxe-ui-table-row-striped-background-color: hsl(var(--accent) / 60%);
+  --vxe-ui-table-row-hover-striped-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-radio-checked-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-hover-radio-checked-background-color: hsl(
+    var(--accent-hover)
+  );
+  --vxe-ui-table-row-checkbox-checked-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-hover-checkbox-checked-background-color: hsl(
+    var(--accent-hover)
+  );
+  --vxe-ui-table-row-current-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-hover-current-background-color: hsl(var(--accent-hover));
+
+  /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
+}
+
+.vxe-pager {
+  .vxe-pager--prev-btn:not(.is--disabled):active,
+  .vxe-pager--next-btn:not(.is--disabled):active,
+  .vxe-pager--num-btn:not(.is--disabled):active,
+  .vxe-pager--jump-prev:not(.is--disabled):active,
+  .vxe-pager--jump-next:not(.is--disabled):active,
+  .vxe-pager--prev-btn:not(.is--disabled):focus,
+  .vxe-pager--next-btn:not(.is--disabled):focus,
+  .vxe-pager--num-btn:not(.is--disabled):focus,
+  .vxe-pager--jump-prev:not(.is--disabled):focus,
+  .vxe-pager--jump-next:not(.is--disabled):focus {
+    color: hsl(var(--accent-foreground));
+    background-color: hsl(var(--accent));
+    border: 1px solid hsl(var(--border));
+    box-shadow: 0 0 0 1px hsl(var(--border));
+  }
+
+  .vxe-pager {
+    &--wrapper {
+      display: flex;
+      align-items: center;
+    }
+
+    &--sizes {
+      margin-right: auto;
+    }
+  }
+}
+
+.vxe-pager--wrapper {
+  @apply justify-center md:justify-end;
+}
+
+.vxe-tools--operate {
+  @apply ml-3;
+}
+
+.vxe-table-custom--checkbox-option:hover {
+  background: none !important;
+}
diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
index e47f893833a..c0b9dfee47a 100644
--- a/docs/src/_env/adapter/vxe-table.ts
+++ b/docs/src/_env/adapter/vxe-table.ts
@@ -6,6 +6,11 @@ import { Button, Image } from 'ant-design-vue';
 
 import { useVbenForm } from './form';
 
+import 'vxe-table/styles/index.scss';
+// import 'vxe-table/styles/cssvar.scss';
+// import 'vxe-pc-ui/styles/cssvar.scss';
+// import './theme.css';
+
 setupVbenVxeTable({
   configVxeTable: (vxeUI) => {
     vxeUI.setConfig({
diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index c5567578012..54ef3d9c7c0 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -9,3 +9,5 @@ outline: deep
 其中，表头的 **表单搜索** 部分采用了`Vben Form表单`，表格主体部分使用了`vxe-grid`组件，支持表格的分页、排序、筛选等功能。
 
 <DemoPreview dir="demos/vben-vxe-table/basic" />
+
+<DemoPreview dir="demos/vben-vxe-table/tree" />
diff --git a/docs/src/demos/vben-vxe-table/mock-api.ts b/docs/src/demos/vben-vxe-table/mock-api.ts
new file mode 100644
index 00000000000..08e3bffb484
--- /dev/null
+++ b/docs/src/demos/vben-vxe-table/mock-api.ts
@@ -0,0 +1,8 @@
+import { MOCK_TABLE_DATA } from './table-data';
+
+export const getTableList = () =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(MOCK_TABLE_DATA);
+    }, 600);
+  });

From 2eb9b079fdf1ef4622381eb3aa1c5db114a2f78a Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Mon, 4 Nov 2024 19:31:01 +0800
Subject: [PATCH 3/9] docs: fix vxe-table style & theme toggle problem

---
 .../theme/components/site-layout.vue          |   6 +
 docs/package.json                             |   4 +-
 docs/src/_env/adapter/theme.css               |  91 ----
 docs/src/_env/adapter/vxe-table.ts            |  16 +-
 .../components/common-ui/vben-vxe-table.md    |   4 +
 docs/src/demos/vben-vxe-table/basic/index.vue |   5 +-
 .../vben-vxe-table/custom-cell/index.vue      |  11 +-
 docs/src/demos/vben-vxe-table/mock-api.ts     |  29 +-
 .../src/demos/vben-vxe-table/remote/index.vue |  11 +-
 docs/src/demos/vben-vxe-table/table-data.ts   | 424 +++++++++++++++++-
 .../effects/plugins/src/vxe-table/index.ts    |   4 +
 pnpm-lock.yaml                                | 125 ++++--
 12 files changed, 572 insertions(+), 158 deletions(-)
 delete mode 100644 docs/src/_env/adapter/theme.css

diff --git a/docs/.vitepress/theme/components/site-layout.vue b/docs/.vitepress/theme/components/site-layout.vue
index d643cae98a7..f50ed3d973c 100644
--- a/docs/.vitepress/theme/components/site-layout.vue
+++ b/docs/.vitepress/theme/components/site-layout.vue
@@ -11,6 +11,8 @@ import {
 // import { useAntdDesignTokens } from '@vben/hooks';
 // import { initPreferences } from '@vben/preferences';
 
+import { setTheme } from '@vben/plugins/vxe-table';
+
 import { ConfigProvider, theme } from 'ant-design-vue';
 import mediumZoom from 'medium-zoom';
 import { useRoute } from 'vitepress';
@@ -32,6 +34,10 @@ watch(
   () => nextTick(() => initZoom()),
 );
 
+watch(isDark, (dark) => {
+  setTheme(dark ? 'dark' : 'light');
+});
+
 // initPreferences({
 //   namespace: 'docs',
 // });
diff --git a/docs/package.json b/docs/package.json
index 61bad10c072..db10fe673b5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,9 +20,7 @@
     "lucide-vue-next": "catalog:",
     "medium-zoom": "catalog:",
     "radix-vue": "catalog:",
-    "vitepress-plugin-group-icons": "catalog:",
-    "vxe-pc-ui": "^4.2.38",
-    "vxe-table": "catalog:"
+    "vitepress-plugin-group-icons": "catalog:"
   },
   "devDependencies": {
     "@nolebase/vitepress-plugin-git-changelog": "catalog:",
diff --git a/docs/src/_env/adapter/theme.css b/docs/src/_env/adapter/theme.css
deleted file mode 100644
index a6e8ca1d3df..00000000000
--- a/docs/src/_env/adapter/theme.css
+++ /dev/null
@@ -1,91 +0,0 @@
-:root {
-  --vxe-ui-font-color: hsl(var(--foreground));
-  --vxe-ui-font-primary-color: hsl(var(--primary));
-
-  /* --vxe-ui-font-lighten-color: #babdc0;
-  --vxe-ui-font-darken-color: #86898e; */
-  --vxe-ui-font-disabled-color: hsl(var(--foreground) / 50%);
-
-  /* base */
-  --vxe-ui-base-popup-border-color: hsl(var(--border));
-  --vxe-ui-input-disabled-color: hsl(var(--border) / 60%);
-
-  /* --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgb(0 0 0 / 50%); */
-
-  /* layout */
-  --vxe-ui-layout-background-color: hsl(var(--background));
-  --vxe-ui-table-resizable-line-color: hsl(var(--border));
-
-  /* --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px hsl(var(--accent));
-  --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px hsl(var(--accent)); */
-
-  /* input */
-  --vxe-ui-input-border-color: hsl(var(--border));
-
-  /* --vxe-ui-input-placeholder-color: #8d9095; */
-
-  /* --vxe-ui-input-disabled-background-color: #262727; */
-
-  /* loading */
-  --vxe-ui-loading-background-color: hsl(var(--overlay-content));
-
-  /* table */
-  --vxe-ui-table-header-background-color: hsl(var(--accent));
-  --vxe-ui-table-border-color: hsl(var(--border));
-  --vxe-ui-table-row-hover-background-color: hsl(var(--accent-hover));
-  --vxe-ui-table-row-striped-background-color: hsl(var(--accent) / 60%);
-  --vxe-ui-table-row-hover-striped-background-color: hsl(var(--accent));
-  --vxe-ui-table-row-radio-checked-background-color: hsl(var(--accent));
-  --vxe-ui-table-row-hover-radio-checked-background-color: hsl(
-    var(--accent-hover)
-  );
-  --vxe-ui-table-row-checkbox-checked-background-color: hsl(var(--accent));
-  --vxe-ui-table-row-hover-checkbox-checked-background-color: hsl(
-    var(--accent-hover)
-  );
-  --vxe-ui-table-row-current-background-color: hsl(var(--accent));
-  --vxe-ui-table-row-hover-current-background-color: hsl(var(--accent-hover));
-
-  /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
-}
-
-.vxe-pager {
-  .vxe-pager--prev-btn:not(.is--disabled):active,
-  .vxe-pager--next-btn:not(.is--disabled):active,
-  .vxe-pager--num-btn:not(.is--disabled):active,
-  .vxe-pager--jump-prev:not(.is--disabled):active,
-  .vxe-pager--jump-next:not(.is--disabled):active,
-  .vxe-pager--prev-btn:not(.is--disabled):focus,
-  .vxe-pager--next-btn:not(.is--disabled):focus,
-  .vxe-pager--num-btn:not(.is--disabled):focus,
-  .vxe-pager--jump-prev:not(.is--disabled):focus,
-  .vxe-pager--jump-next:not(.is--disabled):focus {
-    color: hsl(var(--accent-foreground));
-    background-color: hsl(var(--accent));
-    border: 1px solid hsl(var(--border));
-    box-shadow: 0 0 0 1px hsl(var(--border));
-  }
-
-  .vxe-pager {
-    &--wrapper {
-      display: flex;
-      align-items: center;
-    }
-
-    &--sizes {
-      margin-right: auto;
-    }
-  }
-}
-
-.vxe-pager--wrapper {
-  @apply justify-center md:justify-end;
-}
-
-.vxe-tools--operate {
-  @apply ml-3;
-}
-
-.vxe-table-custom--checkbox-option:hover {
-  background: none !important;
-}
diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
index c0b9dfee47a..87fc65e29ae 100644
--- a/docs/src/_env/adapter/vxe-table.ts
+++ b/docs/src/_env/adapter/vxe-table.ts
@@ -2,15 +2,10 @@ import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
-import { Button, Image } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
 import { useVbenForm } from './form';
 
-import 'vxe-table/styles/index.scss';
-// import 'vxe-table/styles/cssvar.scss';
-// import 'vxe-pc-ui/styles/cssvar.scss';
-// import './theme.css';
-
 setupVbenVxeTable({
   configVxeTable: (vxeUI) => {
     vxeUI.setConfig({
@@ -37,11 +32,18 @@ setupVbenVxeTable({
       },
     });
 
+    // const { theme } = useData();
+
+    // watch(theme.value, (t: string) => {
+    //   console.log(t);
+    //   // vxeUI.setTheme(t === 'dark' ? 'dark' : 'light');
+    // });
+
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
       renderDefault(_renderOpts, params) {
         const { column, row } = params;
-        return h(Image, { src: row[column.field] });
+        return h(Image, { src: row[column.field] } as any);
       },
     });
 
diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index 54ef3d9c7c0..9146de394de 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -10,4 +10,8 @@ outline: deep
 
 <DemoPreview dir="demos/vben-vxe-table/basic" />
 
+<DemoPreview dir="demos/vben-vxe-table/remote" />
+
+<DemoPreview dir="demos/vben-vxe-table/custom-cell" />
+
 <DemoPreview dir="demos/vben-vxe-table/tree" />
diff --git a/docs/src/demos/vben-vxe-table/basic/index.vue b/docs/src/demos/vben-vxe-table/basic/index.vue
index b446114fa70..963be8cfb17 100644
--- a/docs/src/demos/vben-vxe-table/basic/index.vue
+++ b/docs/src/demos/vben-vxe-table/basic/index.vue
@@ -66,11 +66,8 @@ function changeLoading() {
 </script>
 
 <template>
-  <div class="flex w-full">
+  <div class="vp-raw flex w-full">
     <Grid class="w-full">
-      <!-- <template #toolbar-actions>
-        <Button class="mr-2" type="primary">左侧插槽</Button>
-      </template> -->
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="changeBorder">
           {{ showBorder ? '隐藏' : '显示' }}边框
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
index 46fd29cce15..7b141f0a95f 100644
--- a/docs/src/demos/vben-vxe-table/custom-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { Button, Image, Switch, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getExampleTableApi } from '#/api';
+
+import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
   category: string;
@@ -88,8 +87,8 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <Page auto-content-height>
-    <Grid>
+  <div class="vp-raw w-full">
+    <Grid class="h-80 w-full">
       <template #image-url="{ row }">
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
@@ -103,5 +102,5 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
         <Button type="link">编辑</Button>
       </template>
     </Grid>
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/mock-api.ts b/docs/src/demos/vben-vxe-table/mock-api.ts
index 08e3bffb484..235e3a1afc6 100644
--- a/docs/src/demos/vben-vxe-table/mock-api.ts
+++ b/docs/src/demos/vben-vxe-table/mock-api.ts
@@ -1,8 +1,25 @@
-import { MOCK_TABLE_DATA } from './table-data';
+import { MOCK_API_DATA } from './table-data';
 
-export const getTableList = () =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(MOCK_TABLE_DATA);
-    }, 600);
+export namespace DemoTableApi {
+  export interface PageFetchParams {
+    [key: string]: any;
+    page: number;
+    pageSize: number;
+  }
+}
+
+/**
+ * 获取示例表格数据
+ */
+async function getExampleTableApi(params: DemoTableApi.PageFetchParams) {
+  return new Promise<{ items: any; total: number }>((resolve) => {
+    const { page, pageSize } = params;
+    const items = MOCK_API_DATA.slice((page - 1) * pageSize, page * pageSize);
+    resolve({
+      total: items.length,
+      items: [],
+    });
   });
+}
+
+export { getExampleTableApi };
diff --git a/docs/src/demos/vben-vxe-table/remote/index.vue b/docs/src/demos/vben-vxe-table/remote/index.vue
index 7fc98a08b35..9366dfbcf71 100644
--- a/docs/src/demos/vben-vxe-table/remote/index.vue
+++ b/docs/src/demos/vben-vxe-table/remote/index.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getExampleTableApi } from '#/api';
+
+import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
   category: string;
@@ -59,8 +58,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Page auto-content-height>
-    <Grid table-title="数据列表" table-title-help="提示">
+  <div class="vp-raw w-full">
+    <Grid class="h-80 w-full" table-title="数据列表" table-title-help="提示">
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="() => gridApi.query()">
           刷新当前页面
@@ -70,5 +69,5 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </Button>
       </template>
     </Grid>
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/table-data.ts b/docs/src/demos/vben-vxe-table/table-data.ts
index d80ea5337a8..d3c88e8f097 100644
--- a/docs/src/demos/vben-vxe-table/table-data.ts
+++ b/docs/src/demos/vben-vxe-table/table-data.ts
@@ -11,7 +11,7 @@ const roles = ['User', 'Admin', 'Manager', 'Guest'];
 
 export const MOCK_TABLE_DATA: TableRowData[] = (() => {
   const data: TableRowData[] = [];
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < 40; i++) {
     data.push({
       address: `New York${i}`,
       age: i + 1,
@@ -170,3 +170,425 @@ export const MOCK_TREE_TABLE_DATA = [
     type: 'js',
   },
 ];
+
+export const MOCK_API_DATA = [
+  {
+    available: true,
+    category: 'Computers',
+    color: 'purple',
+    currency: 'NAD',
+    description:
+      'Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support',
+    id: '45a613df-227a-4907-a89f-4a7f1252ca0c',
+    imageUrl: 'https://avatars.githubusercontent.com/u/62715097',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/75395683',
+    inProduction: false,
+    open: true,
+    price: '48.89',
+    productName: 'Handcrafted Steel Salad',
+    quantity: 70,
+    rating: 3.780_582_329_574_367,
+    releaseDate: '2024-09-09T04:06:57.793Z',
+    status: 'error',
+    tags: ['Bespoke', 'Handmade', 'Luxurious'],
+    weight: 1.031_015_671_912_002_5,
+  },
+  {
+    available: true,
+    category: 'Toys',
+    color: 'green',
+    currency: 'CZK',
+    description:
+      'The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J',
+    id: 'd02e5ee9-bc98-4de2-98fa-25a6567ecc19',
+    imageUrl: 'https://avatars.githubusercontent.com/u/51512330',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/58698113',
+    inProduction: false,
+    open: false,
+    price: '68.15',
+    productName: 'Generic Cotton Gloves',
+    quantity: 3,
+    rating: 1.681_749_367_682_703_3,
+    releaseDate: '2024-06-16T09:00:36.806Z',
+    status: 'warning',
+    tags: ['Rustic', 'Handcrafted', 'Recycled'],
+    weight: 9.601_076_149_300_575,
+  },
+  {
+    available: true,
+    category: 'Beauty',
+    color: 'teal',
+    currency: 'OMR',
+    description:
+      'The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design',
+    id: '2b72521c-225c-4e64-8030-611b76b10b37',
+    imageUrl: 'https://avatars.githubusercontent.com/u/50300075',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/36541691',
+    inProduction: true,
+    open: true,
+    price: '696.94',
+    productName: 'Gorgeous Soft Ball',
+    quantity: 50,
+    rating: 2.361_581_777_372_057_5,
+    releaseDate: '2024-06-03T13:24:19.809Z',
+    status: 'warning',
+    tags: ['Gorgeous', 'Ergonomic', 'Licensed'],
+    weight: 8.882_340_049_286_19,
+  },
+  {
+    available: true,
+    category: 'Games',
+    color: 'silver',
+    currency: 'SOS',
+    description:
+      'Carbonite web goalkeeper gloves are ergonomically designed to give easy fit',
+    id: 'bafab694-3801-452c-b102-9eb519bd1143',
+    imageUrl: 'https://avatars.githubusercontent.com/u/89827115',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/55952747',
+    inProduction: false,
+    open: false,
+    price: '553.84',
+    productName: 'Bespoke Soft Computer',
+    quantity: 29,
+    rating: 2.176_412_873_760_271_7,
+    releaseDate: '2024-09-17T12:16:27.034Z',
+    status: 'error',
+    tags: ['Elegant', 'Rustic', 'Recycled'],
+    weight: 9.653_285_869_978_038,
+  },
+  {
+    available: true,
+    category: 'Toys',
+    color: 'indigo',
+    currency: 'BIF',
+    description:
+      'Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals',
+    id: 'bf6dea6b-2a55-441d-8773-937e03d99389',
+    imageUrl: 'https://avatars.githubusercontent.com/u/21431092',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/3771350',
+    inProduction: true,
+    open: true,
+    price: '237.39',
+    productName: 'Handcrafted Cotton Mouse',
+    quantity: 54,
+    rating: 4.363_265_388_265_461,
+    releaseDate: '2023-10-23T13:42:34.947Z',
+    status: 'error',
+    tags: ['Unbranded', 'Handmade', 'Generic'],
+    weight: 9.513_203_612_535_571,
+  },
+  {
+    available: false,
+    category: 'Tools',
+    color: 'violet',
+    currency: 'TZS',
+    description:
+      'New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016',
+    id: '135ba6ab-32ee-4989-8189-5cfa658ef970',
+    imageUrl: 'https://avatars.githubusercontent.com/u/29946092',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/23842994',
+    inProduction: false,
+    open: false,
+    price: '825.25',
+    productName: 'Awesome Bronze Ball',
+    quantity: 94,
+    rating: 4.251_159_804_726_753,
+    releaseDate: '2023-12-30T07:31:43.464Z',
+    status: 'warning',
+    tags: ['Handmade', 'Elegant', 'Unbranded'],
+    weight: 2.247_473_385_732_636_8,
+  },
+  {
+    available: true,
+    category: 'Automotive',
+    color: 'teal',
+    currency: 'BOB',
+    description: 'The Football Is Good For Training And Recreational Purposes',
+    id: '652ef256-7d4e-48b7-976c-7afaa781ea92',
+    imageUrl: 'https://avatars.githubusercontent.com/u/2531904',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/15215990',
+    inProduction: false,
+    open: false,
+    price: '780.49',
+    productName: 'Oriental Rubber Pants',
+    quantity: 70,
+    rating: 2.636_323_417_377_916,
+    releaseDate: '2024-02-23T23:30:49.628Z',
+    status: 'success',
+    tags: ['Unbranded', 'Elegant', 'Unbranded'],
+    weight: 4.812_965_858_018_838,
+  },
+  {
+    available: false,
+    category: 'Garden',
+    color: 'plum',
+    currency: 'LRD',
+    description:
+      'The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality',
+    id: '3ea24798-6589-40cc-85f0-ab78752244a0',
+    imageUrl: 'https://avatars.githubusercontent.com/u/23165285',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/14595665',
+    inProduction: false,
+    open: true,
+    price: '583.85',
+    productName: 'Handcrafted Concrete Hat',
+    quantity: 15,
+    rating: 1.371_600_527_752_802_7,
+    releaseDate: '2024-03-02T19:40:50.255Z',
+    status: 'error',
+    tags: ['Rustic', 'Sleek', 'Ergonomic'],
+    weight: 4.926_949_366_405_728_4,
+  },
+  {
+    available: false,
+    category: 'Industrial',
+    color: 'salmon',
+    currency: 'AUD',
+    description:
+      'The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design',
+    id: '997113dd-f6e4-4acc-9790-ef554c7498d1',
+    imageUrl: 'https://avatars.githubusercontent.com/u/49021914',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/4690621',
+    inProduction: true,
+    open: false,
+    price: '67.99',
+    productName: 'Generic Rubber Bacon',
+    quantity: 68,
+    rating: 4.129_840_682_128_08,
+    releaseDate: '2023-12-17T01:40:25.415Z',
+    status: 'error',
+    tags: ['Oriental', 'Small', 'Handcrafted'],
+    weight: 1.080_114_331_801_906_4,
+  },
+  {
+    available: false,
+    category: 'Tools',
+    color: 'sky blue',
+    currency: 'NOK',
+    description:
+      'The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J',
+    id: 'f697a250-6cb2-46c8-b0f7-871ab1f2fa8d',
+    imageUrl: 'https://avatars.githubusercontent.com/u/95928385',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/47588244',
+    inProduction: false,
+    open: false,
+    price: '613.89',
+    productName: 'Gorgeous Frozen Ball',
+    quantity: 55,
+    rating: 1.646_947_205_998_534_6,
+    releaseDate: '2024-10-13T12:31:04.929Z',
+    status: 'warning',
+    tags: ['Handmade', 'Unbranded', 'Unbranded'],
+    weight: 9.430_690_557_758_114,
+  },
+  {
+    available: false,
+    category: 'Sports',
+    color: 'lavender',
+    currency: 'XOF',
+    description:
+      'The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality',
+    id: '7b711e78-692e-4031-83f9-b08085d7dc27',
+    imageUrl: 'https://avatars.githubusercontent.com/u/96172031',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/45856661',
+    inProduction: false,
+    open: false,
+    price: '833.85',
+    productName: 'Sleek Plastic Chicken',
+    quantity: 41,
+    rating: 4.369_176_254_671_247,
+    releaseDate: '2024-02-05T16:21:02.026Z',
+    status: 'error',
+    tags: ['Oriental', 'Rustic', 'Intelligent'],
+    weight: 3.211_361_088_265_749_5,
+  },
+  {
+    available: true,
+    category: 'Outdoors',
+    color: 'gold',
+    currency: 'MVR',
+    description:
+      'New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016',
+    id: 'e46cee76-2d53-4481-a15e-59434579198b',
+    imageUrl: 'https://avatars.githubusercontent.com/u/75039120',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/88852377',
+    inProduction: true,
+    open: true,
+    price: '123.59',
+    productName: 'Elegant Frozen Table',
+    quantity: 55,
+    rating: 1.149_023_048_729_307_8,
+    releaseDate: '2024-03-08T13:09:28.421Z',
+    status: 'error',
+    tags: ['Unbranded', 'Licensed', 'Oriental'],
+    weight: 8.646_435_587_749_05,
+  },
+  {
+    available: false,
+    category: 'Beauty',
+    color: 'violet',
+    currency: 'SEK',
+    description:
+      'The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J',
+    id: 'cf3de0d0-0f50-46ef-9244-d30ea4cc98b8',
+    imageUrl: 'https://avatars.githubusercontent.com/u/65691100',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/35362239',
+    inProduction: true,
+    open: true,
+    price: '303.49',
+    productName: 'Ergonomic Cotton Soap',
+    quantity: 81,
+    rating: 4.217_422_711_758_923,
+    releaseDate: '2024-06-09T02:39:00.969Z',
+    status: 'error',
+    tags: ['Elegant', 'Practical', 'Fantastic'],
+    weight: 6.018_255_461_739_438,
+  },
+  {
+    available: true,
+    category: 'Movies',
+    color: 'gold',
+    currency: 'NZD',
+    description:
+      'The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J',
+    id: '14995e8d-3e0e-4684-80b1-f84e6df4420b',
+    imageUrl: 'https://avatars.githubusercontent.com/u/2227834',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/51921236',
+    inProduction: false,
+    open: true,
+    price: '395.49',
+    productName: 'Awesome Soft Car',
+    quantity: 68,
+    rating: 3.114_702_440_124_858_6,
+    releaseDate: '2024-08-07T23:46:00.786Z',
+    status: 'error',
+    tags: ['Sleek', 'Incredible', 'Practical'],
+    weight: 1.002_350_512_236_772_6,
+  },
+  {
+    available: false,
+    category: 'Movies',
+    color: 'cyan',
+    currency: 'BRL',
+    description:
+      'The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive',
+    id: '581fa9b1-e784-47f9-9922-66aa21f46664',
+    imageUrl: 'https://avatars.githubusercontent.com/u/49456060',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/47054539',
+    inProduction: true,
+    open: false,
+    price: '660.09',
+    productName: 'Oriental Rubber Fish',
+    quantity: 67,
+    rating: 3.783_115_267_908_933_3,
+    releaseDate: '2023-12-03T17:35:17.845Z',
+    status: 'warning',
+    tags: ['Refined', 'Intelligent', 'Bespoke'],
+    weight: 2.920_687_808_651_241,
+  },
+  {
+    available: true,
+    category: 'Home',
+    color: 'red',
+    currency: 'DOP',
+    description:
+      'The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design',
+    id: 'bef03f92-ee7d-4299-8438-a95eb8872cb9',
+    imageUrl: 'https://avatars.githubusercontent.com/u/3917257',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/71337756',
+    inProduction: true,
+    open: false,
+    price: '502.99',
+    productName: 'Bespoke Bronze Bike',
+    quantity: 13,
+    rating: 4.929_263_484_476_12,
+    releaseDate: '2024-10-17T12:50:42.635Z',
+    status: 'success',
+    tags: ['Generic', 'Small', 'Refined'],
+    weight: 7.679_653_789_364_19,
+  },
+  {
+    available: true,
+    category: 'Movies',
+    color: 'orange',
+    currency: 'KHR',
+    description:
+      'Carbonite web goalkeeper gloves are ergonomically designed to give easy fit',
+    id: '75d3c9e0-c7a0-44b1-b572-196518f036d4',
+    imageUrl: 'https://avatars.githubusercontent.com/u/71124558',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/79487494',
+    inProduction: false,
+    open: true,
+    price: '515.69',
+    productName: 'Modern Frozen Computer',
+    quantity: 26,
+    rating: 2.853_653_354_649_052_3,
+    releaseDate: '2024-05-17T05:12:48.300Z',
+    status: 'warning',
+    tags: ['Luxurious', 'Rustic', 'Oriental'],
+    weight: 2.642_900_412_111_716_3,
+  },
+  {
+    available: false,
+    category: 'Kids',
+    color: 'salmon',
+    currency: 'SCR',
+    description:
+      "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
+    id: '14e46b4b-0203-4c73-abed-a8100e0b539c',
+    imageUrl: 'https://avatars.githubusercontent.com/u/76342482',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/29659498',
+    inProduction: true,
+    open: true,
+    price: '177.69',
+    productName: 'Elegant Cotton Fish',
+    quantity: 36,
+    rating: 2.726_620_373_572_253,
+    releaseDate: '2024-03-23T11:15:31.823Z',
+    status: 'success',
+    tags: ['Small', 'Modern', 'Gorgeous'],
+    weight: 6.910_916_953_867_159,
+  },
+  {
+    available: false,
+    category: 'Movies',
+    color: 'black',
+    currency: 'MYR',
+    description:
+      'Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals',
+    id: '6908f557-a2cb-434d-b5d5-b8d982d5451b',
+    imageUrl: 'https://avatars.githubusercontent.com/u/5593260',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/13907478',
+    inProduction: true,
+    open: true,
+    price: '892.15',
+    productName: 'Unbranded Rubber Pants',
+    quantity: 6,
+    rating: 1.044_369_861_681_574_2,
+    releaseDate: '2024-07-01T19:18:09.841Z',
+    status: 'error',
+    tags: ['Oriental', 'Recycled', 'Tasty'],
+    weight: 7.356_822_519_614_8,
+  },
+  {
+    available: true,
+    category: 'Tools',
+    color: 'salmon',
+    currency: 'DOP',
+    description:
+      'Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support',
+    id: 'b53ef7fc-3e82-49ce-b765-bfbf6105b8eb',
+    imageUrl: 'https://avatars.githubusercontent.com/u/54968787',
+    imageUrl2: 'https://avatars.githubusercontent.com/u/61407293',
+    inProduction: false,
+    open: false,
+    price: '163.40',
+    productName: 'Recycled Concrete Car',
+    quantity: 79,
+    rating: 2.679_401_744_365_649,
+    releaseDate: '2024-01-12T15:02:30.337Z',
+    status: 'warning',
+    tags: ['Elegant', 'Practical', 'Elegant'],
+    weight: 2.094_519_890_837_731,
+  },
+];
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 2224dfaa587..435316a4e4e 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,4 +1,8 @@
 export { setupVbenVxeTable } from './init';
 export * from './use-vxe-grid';
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
+
+export * from 'vxe-pc-ui/styles/all.scss';
 export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
+export { setTheme } from 'vxe-table';
+export * from 'vxe-table/styles/all.scss';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d19258eefa8..ee50a665942 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -535,10 +535,10 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 5.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+        version: 5.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 4.0.1(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+        version: 4.0.1(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -580,13 +580,13 @@ importers:
         version: 5.6.3
       unbuild:
         specifier: 'catalog:'
-        version: 2.0.0(sass@1.79.5)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3))
+        version: 2.0.0(sass@1.80.6)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3))
       vite:
         specifier: 'catalog:'
-        version: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+        version: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
       vitest:
         specifier: 'catalog:'
-        version: 2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+        version: 2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
       vue:
         specifier: ^3.5.12
         version: 3.5.12(typescript@5.6.3)
@@ -814,6 +814,9 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../packages/effects/plugins
       '@vben/styles':
         specifier: workspace:*
         version: link:../packages/styles
@@ -835,16 +838,19 @@ importers:
     devDependencies:
       '@nolebase/vitepress-plugin-git-changelog':
         specifier: 'catalog:'
-        version: 2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
+        version: 2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
       '@vben/vite-config':
         specifier: workspace:*
         version: link:../internal/vite-config
       '@vite-pwa/vitepress':
         specifier: 'catalog:'
-        version: 0.5.3(vite-plugin-pwa@0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0))
+        version: 0.5.3(vite-plugin-pwa@0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0))
+      sass:
+        specifier: ^1.80.6
+        version: 1.80.6
       vitepress:
         specifier: 'catalog:'
-        version: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
+        version: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
       vue:
         specifier: ^3.5.12
         version: 3.5.12(typescript@5.6.3)
@@ -929,7 +935,7 @@ importers:
         version: 4.1.4(@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))
       eslint-plugin-vitest:
         specifier: 'catalog:'
-        version: 0.5.4(@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))
+        version: 0.5.4(@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))
       eslint-plugin-vue:
         specifier: 'catalog:'
         version: 9.30.0(eslint@9.13.0(jiti@2.3.3))
@@ -1087,7 +1093,7 @@ importers:
         version: link:../../packages/types
       vite:
         specifier: 'catalog:'
-        version: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+        version: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
 
   internal/vite-config:
     dependencies:
@@ -9109,6 +9115,11 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  sass@1.80.6:
+    resolution: {integrity: sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   sax@1.4.1:
     resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
 
@@ -12814,11 +12825,11 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@nolebase/ui@2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)':
+  '@nolebase/ui@2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)':
     dependencies:
       '@iconify-json/octicon': 1.2.1
       less: 4.2.0
-      vitepress: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
+      vitepress: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -12849,10 +12860,10 @@ snapshots:
       - typescript
       - universal-cookie
 
-  '@nolebase/vitepress-plugin-git-changelog@2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)':
+  '@nolebase/vitepress-plugin-git-changelog@2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)':
     dependencies:
       '@iconify-json/octicon': 1.2.1
-      '@nolebase/ui': 2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
+      '@nolebase/ui': 2.6.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
       colorette: 2.0.20
       date-fns: 4.1.0
       defu: 6.1.4
@@ -12862,7 +12873,7 @@ snapshots:
       gray-matter: 4.0.3
       less: 4.2.0
       uncrypto: 0.1.3
-      vitepress: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
+      vitepress: 1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -13708,9 +13719,9 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vite-pwa/vitepress@0.5.3(vite-plugin-pwa@0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0))':
+  '@vite-pwa/vitepress@0.5.3(vite-plugin-pwa@0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0))':
     dependencies:
-      vite-plugin-pwa: 0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0)
+      vite-plugin-pwa: 0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0)
 
   '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
@@ -13722,11 +13733,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
+      vue: 3.5.12(typescript@5.6.3)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
       vue: 3.5.12(typescript@5.6.3)
 
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
+      vue: 3.5.12(typescript@5.6.3)
+
   '@vitest/expect@2.1.4':
     dependencies:
       '@vitest/spy': 2.1.4
@@ -13734,13 +13760,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))':
+  '@vitest/mocker@2.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))':
     dependencies:
       '@vitest/spy': 2.1.4
       estree-walker: 3.0.3
       magic-string: 0.30.12
     optionalDependencies:
-      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
 
   '@vitest/pretty-format@2.1.4':
     dependencies:
@@ -15673,13 +15699,13 @@ snapshots:
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)(vitest@2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)):
     dependencies:
       '@typescript-eslint/utils': 7.18.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
       eslint: 9.13.0(jiti@2.3.3)
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3))(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      vitest: 2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+      vitest: 2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -17165,7 +17191,7 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mkdist@1.6.0(sass@1.79.5)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3)):
+  mkdist@1.6.0(sass@1.80.6)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3)):
     dependencies:
       autoprefixer: 10.4.20(postcss@8.4.47)
       citty: 0.1.6
@@ -17181,7 +17207,7 @@ snapshots:
       semver: 7.6.3
       tinyglobby: 0.2.10
     optionalDependencies:
-      sass: 1.79.5
+      sass: 1.80.6
       typescript: 5.6.3
       vue-tsc: 2.1.8(typescript@5.6.3)
 
@@ -18546,6 +18572,14 @@ snapshots:
       immutable: 4.3.7
       source-map-js: 1.2.1
 
+  sass@1.80.6:
+    dependencies:
+      chokidar: 4.0.1
+      immutable: 4.3.7
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.4.1
+
   sax@1.4.1:
     optional: true
 
@@ -19322,7 +19356,7 @@ snapshots:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
-  unbuild@2.0.0(sass@1.79.5)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3)):
+  unbuild@2.0.0(sass@1.80.6)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
@@ -19339,7 +19373,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.6
       magic-string: 0.30.12
-      mkdist: 1.6.0(sass@1.79.5)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3))
+      mkdist: 1.6.0(sass@1.80.6)(typescript@5.6.3)(vue-tsc@2.1.8(typescript@5.6.3))
       mlly: 1.7.2
       pathe: 1.1.2
       pkg-types: 1.2.1
@@ -19577,12 +19611,12 @@ snapshots:
     dependencies:
       vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
 
-  vite-node@2.1.4(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0):
+  vite-node@2.1.4(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7
       pathe: 1.1.2
-      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -19679,6 +19713,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-pwa@0.20.5(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(workbox-build@7.1.1)(workbox-window@7.1.0):
+    dependencies:
+      debug: 4.3.7
+      pretty-bytes: 6.1.1
+      tinyglobby: 0.2.10
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
+      workbox-build: 7.1.1
+      workbox-window: 7.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   vite-plugin-vue-devtools@7.5.4(rollup@4.24.2)(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       '@vue/devtools-core': 7.5.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
@@ -19722,6 +19767,18 @@ snapshots:
       sass: 1.79.5
       terser: 5.36.0
 
+  vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.47
+      rollup: 4.24.2
+    optionalDependencies:
+      '@types/node': 22.8.2
+      fsevents: 2.3.3
+      less: 4.2.0
+      sass: 1.80.6
+      terser: 5.36.0
+
   vitepress-plugin-group-icons@1.3.0:
     dependencies:
       '@iconify-json/logos': 1.2.3
@@ -19730,7 +19787,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vitepress@1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.79.5)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3):
+  vitepress@1.4.1(@algolia/client-search@4.24.0)(@types/node@22.8.2)(async-validator@4.2.5)(axios@1.7.7)(less@4.2.0)(nprogress@0.2.0)(postcss@8.4.47)(qrcode@1.5.4)(sass@1.80.6)(search-insights@2.17.2)(sortablejs@1.15.3)(terser@5.36.0)(typescript@5.6.3):
     dependencies:
       '@docsearch/css': 3.6.2
       '@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.17.2)
@@ -19738,7 +19795,7 @@ snapshots:
       '@shikijs/transformers': 1.22.2
       '@shikijs/types': 1.22.2
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       '@vue/devtools-api': 7.5.4
       '@vue/shared': 3.5.12
       '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.3))
@@ -19747,7 +19804,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.1.0
       shiki: 1.22.2
-      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
       vue: 3.5.12(typescript@5.6.3)
     optionalDependencies:
       postcss: 8.4.47
@@ -19779,10 +19836,10 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.79.5)(terser@5.36.0):
+  vitest@2.1.4(@types/node@22.8.2)(happy-dom@15.7.4)(less@4.2.0)(sass@1.80.6)(terser@5.36.0):
     dependencies:
       '@vitest/expect': 2.1.4
-      '@vitest/mocker': 2.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0))
+      '@vitest/mocker': 2.1.4(vite@5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0))
       '@vitest/pretty-format': 2.1.4
       '@vitest/runner': 2.1.4
       '@vitest/snapshot': 2.1.4
@@ -19798,8 +19855,8 @@ snapshots:
       tinyexec: 0.3.1
       tinypool: 1.0.1
       tinyrainbow: 1.2.0
-      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
-      vite-node: 2.1.4(@types/node@22.8.2)(less@4.2.0)(sass@1.79.5)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
+      vite-node: 2.1.4(@types/node@22.8.2)(less@4.2.0)(sass@1.80.6)(terser@5.36.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.8.2

From 40e11ae41b661fcb7256ce04f782ed8288e9f3fd Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Mon, 4 Nov 2024 19:54:41 +0800
Subject: [PATCH 4/9] docs: add rest demos

---
 .../components/common-ui/vben-vxe-table.md    | 30 ++++++++++++++++++-
 .../vben-vxe-table/custom-cell/index.vue      |  4 +--
 .../demos/vben-vxe-table/edit-cell/index.vue  |  3 +-
 .../demos/vben-vxe-table/edit-row/index.vue   |  3 +-
 docs/src/demos/vben-vxe-table/fixed/index.vue | 11 ++++---
 docs/src/demos/vben-vxe-table/form/index.vue  |  3 +-
 docs/src/demos/vben-vxe-table/mock-api.ts     | 17 +++++++++--
 docs/src/demos/vben-vxe-table/table-data.ts   |  2 +-
 docs/src/demos/vben-vxe-table/tree/index.vue  |  8 ++---
 9 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index 9146de394de..f0792e533ea 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -8,10 +8,38 @@ outline: deep
 
 其中，表头的 **表单搜索** 部分采用了`Vben Form表单`，表格主体部分使用了`vxe-grid`组件，支持表格的分页、排序、筛选等功能。
 
+## 基础表格
+
 <DemoPreview dir="demos/vben-vxe-table/basic" />
 
+## 远程加载
+
 <DemoPreview dir="demos/vben-vxe-table/remote" />
 
-<DemoPreview dir="demos/vben-vxe-table/custom-cell" />
+## 树形表格
 
 <DemoPreview dir="demos/vben-vxe-table/tree" />
+
+## 固定表头/列
+
+<DemoPreview dir="demos/vben-vxe-table/fixed" />
+
+## 自定义单元格
+
+<DemoPreview dir="demos/vben-vxe-table/custom-cell" />
+
+## 搜索表单
+
+<DemoPreview dir="demos/vben-vxe-table/form" />
+
+## 单元格编辑
+
+<DemoPreview dir="demos/vben-vxe-table/edit-cell" />
+
+## 行编辑
+
+<DemoPreview dir="demos/vben-vxe-table/edit-row" />
+
+## 虚拟滚动
+
+<DemoPreview dir="demos/vben-vxe-table/virtual" />
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
index 7b141f0a95f..9802f4b4fd7 100644
--- a/docs/src/demos/vben-vxe-table/custom-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -87,8 +87,8 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <div class="vp-raw w-full">
-    <Grid class="h-80 w-full">
+  <div class="vp-raw h-[600px] w-full">
+    <Grid class="w-full">
       <template #image-url="{ row }">
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
diff --git a/docs/src/demos/vben-vxe-table/edit-cell/index.vue b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
index 9aebde86758..7ad296906af 100644
--- a/docs/src/demos/vben-vxe-table/edit-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
@@ -4,7 +4,8 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import { Page } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getExampleTableApi } from '#/api';
+
+import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
   category: string;
diff --git a/docs/src/demos/vben-vxe-table/edit-row/index.vue b/docs/src/demos/vben-vxe-table/edit-row/index.vue
index f9d25cac597..4bdc43ecd6c 100644
--- a/docs/src/demos/vben-vxe-table/edit-row/index.vue
+++ b/docs/src/demos/vben-vxe-table/edit-row/index.vue
@@ -6,7 +6,8 @@ import { Page } from '@vben/common-ui';
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getExampleTableApi } from '#/api';
+
+import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
   category: string;
diff --git a/docs/src/demos/vben-vxe-table/fixed/index.vue b/docs/src/demos/vben-vxe-table/fixed/index.vue
index 399d35210d7..134ec4cd8d8 100644
--- a/docs/src/demos/vben-vxe-table/fixed/index.vue
+++ b/docs/src/demos/vben-vxe-table/fixed/index.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getExampleTableApi } from '#/api';
+
+import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
   category: string;
@@ -59,11 +58,11 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <Page auto-content-height>
-    <Grid>
+  <div class="vp-raw flex h-[600px] w-full">
+    <Grid class="w-full">
       <template #action>
         <Button type="link">编辑</Button>
       </template>
     </Grid>
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
index fad0cf58ff3..b7950086451 100644
--- a/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -7,7 +7,8 @@ import { Page } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getExampleTableApi } from '#/api';
+
+import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
   category: string;
diff --git a/docs/src/demos/vben-vxe-table/mock-api.ts b/docs/src/demos/vben-vxe-table/mock-api.ts
index 235e3a1afc6..e5c40b61eec 100644
--- a/docs/src/demos/vben-vxe-table/mock-api.ts
+++ b/docs/src/demos/vben-vxe-table/mock-api.ts
@@ -8,6 +8,14 @@ export namespace DemoTableApi {
   }
 }
 
+export function sleep(time = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+}
+
 /**
  * 获取示例表格数据
  */
@@ -15,9 +23,12 @@ async function getExampleTableApi(params: DemoTableApi.PageFetchParams) {
   return new Promise<{ items: any; total: number }>((resolve) => {
     const { page, pageSize } = params;
     const items = MOCK_API_DATA.slice((page - 1) * pageSize, page * pageSize);
-    resolve({
-      total: items.length,
-      items: [],
+
+    sleep(1000).then(() => {
+      resolve({
+        total: items.length,
+        items,
+      });
     });
   });
 }
diff --git a/docs/src/demos/vben-vxe-table/table-data.ts b/docs/src/demos/vben-vxe-table/table-data.ts
index d3c88e8f097..c951ab0b765 100644
--- a/docs/src/demos/vben-vxe-table/table-data.ts
+++ b/docs/src/demos/vben-vxe-table/table-data.ts
@@ -11,7 +11,7 @@ const roles = ['User', 'Admin', 'Manager', 'Guest'];
 
 export const MOCK_TABLE_DATA: TableRowData[] = (() => {
   const data: TableRowData[] = [];
-  for (let i = 0; i < 40; i++) {
+  for (let i = 0; i < 10; i++) {
     data.push({
       address: `New York${i}`,
       age: i + 1,
diff --git a/docs/src/demos/vben-vxe-table/tree/index.vue b/docs/src/demos/vben-vxe-table/tree/index.vue
index 48e74703c2e..6274e8fadd3 100644
--- a/docs/src/demos/vben-vxe-table/tree/index.vue
+++ b/docs/src/demos/vben-vxe-table/tree/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -49,8 +47,8 @@ const collapseAll = () => {
 </script>
 
 <template>
-  <Page>
-    <Grid table-title="数据列表" table-title-help="提示">
+  <div class="vp-raw flex h-[300px] w-full">
+    <Grid class="w-full" table-title="数据列表" table-title-help="提示">
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="expandAll">
           展开全部
@@ -58,5 +56,5 @@ const collapseAll = () => {
         <Button type="primary" @click="collapseAll"> 折叠全部 </Button>
       </template>
     </Grid>
-  </Page>
+  </div>
 </template>

From 23a97d3d119643220e83ac7e94f96c7f40a1478c Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Tue, 5 Nov 2024 02:15:01 +0800
Subject: [PATCH 5/9] docs: add vxe-table demo desc

---
 docs/src/_env/adapter/vxe-table.ts            |   9 +-
 .../components/common-ui/vben-vxe-table.md    |  69 +++++-
 docs/src/demos/vben-vxe-table/basic/index.vue |   5 +-
 .../vben-vxe-table/custom-cell/index.vue      |   9 +-
 .../demos/vben-vxe-table/edit-cell/index.vue  |   7 +-
 .../demos/vben-vxe-table/edit-row/index.vue   |   7 +-
 docs/src/demos/vben-vxe-table/fixed/index.vue |   5 +-
 docs/src/demos/vben-vxe-table/form/index.vue  |  19 +-
 .../src/demos/vben-vxe-table/remote/index.vue |  44 +++-
 docs/src/demos/vben-vxe-table/table-data.ts   | 210 ------------------
 docs/src/demos/vben-vxe-table/tree/index.vue  |  24 +-
 .../demos/vben-vxe-table/virtual/index.vue    |   6 +-
 12 files changed, 161 insertions(+), 253 deletions(-)

diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
index 87fc65e29ae..1a0765a09fe 100644
--- a/docs/src/_env/adapter/vxe-table.ts
+++ b/docs/src/_env/adapter/vxe-table.ts
@@ -2,7 +2,7 @@ import { h } from 'vue';
 
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { Button, Image } from 'ant-design-vue';
 
 import { useVbenForm } from './form';
 
@@ -32,13 +32,6 @@ setupVbenVxeTable({
       },
     });
 
-    // const { theme } = useData();
-
-    // watch(theme.value, (t: string) => {
-    //   console.log(t);
-    //   // vxeUI.setTheme(t === 'dark' ? 'dark' : 'light');
-    // });
-
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
       renderDefault(_renderOpts, params) {
diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index f0792e533ea..26d568e261d 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -4,42 +4,109 @@ outline: deep
 
 # Vben Vxe Table 表格
 
-框架提供的Table 列表组件基于 [vxe-table](https://xuliangzhan.github.io/vxe-table/)，结合`Vben Form表单`进行了二次封装。
+框架提供的Table 列表组件基于 [vxe-table](https://vxetable.cn/v4/#/grid/api?apiKey=grid)，结合`Vben Form 表单`进行了二次封装。
 
 其中，表头的 **表单搜索** 部分采用了`Vben Form表单`，表格主体部分使用了`vxe-grid`组件，支持表格的分页、排序、筛选等功能。
 
+> 如果文档内没有参数说明，可以尝试在在线示例或者在 [vxe-grid 官方API 文档](https://vxetable.cn/v4/#/grid/api?apiKey=grid) 内寻找
+
+::: info 写在前面
+
+如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。
+
+:::
+
+::: tip README
+
+下方示例代码中的，存在一些国际化、主题色未适配问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
+
+:::
+
 ## 基础表格
 
+使用 `useVbenVxeGrid` 创建最基础的表格。
+
 <DemoPreview dir="demos/vben-vxe-table/basic" />
 
 ## 远程加载
 
+通过指定 `proxyConfig.ajax` 的 `query` 方法，可以实现远程加载数据。
+
 <DemoPreview dir="demos/vben-vxe-table/remote" />
 
 ## 树形表格
 
+树形表格，的数据源为扁平结构，可以指定`treeConfig`配置项，实现树形表格。
+
+```typescript
+treeConfig: {
+  transform: true, // 指定表格为树形表格
+  parentField: 'parentId', // 父节点字段名
+  rowField: 'id', // 行数据字段名
+},
+```
+
 <DemoPreview dir="demos/vben-vxe-table/tree" />
 
 ## 固定表头/列
 
+列固定可选参数： `'left' | 'right' | '' | null`
+
 <DemoPreview dir="demos/vben-vxe-table/fixed" />
 
 ## 自定义单元格
 
+自定义单元格有两种实现方式
+
+- 通过 `slots` 插槽
+- 通过 `customCell` 自定义单元格，但是要先添加渲染器
+
+```typescript
+// 表格配置项可以用 cellRender: { name: 'CellImage' },
+vxeUI.renderer.add('CellImage', {
+  renderDefault(_renderOpts, params) {
+    const { column, row } = params;
+    return h(Image, { src: row[column.field] } as any); // 注意此处的Image 组件，来源于Antd，需要自行引入,否则会使用js的Image类
+  },
+});
+
+// 表格配置项可以用 cellRender: { name: 'CellLink' },
+vxeUI.renderer.add('CellLink', {
+  renderDefault(renderOpts) {
+    const { props } = renderOpts;
+    return h(
+      Button,
+      { size: 'small', type: 'link' },
+      { default: () => props?.text },
+    );
+  },
+});
+```
+
 <DemoPreview dir="demos/vben-vxe-table/custom-cell" />
 
 ## 搜索表单
 
+**表单搜索** 部分采用了`Vben Form 表单`，参考 [Vben Form 表单文档](/components/common-ui/vben-form)。
+
 <DemoPreview dir="demos/vben-vxe-table/form" />
 
 ## 单元格编辑
 
+通过指定`editConfig.mode`为`cell`，可以实现单元格编辑。
+
 <DemoPreview dir="demos/vben-vxe-table/edit-cell" />
 
 ## 行编辑
 
+通过指定`editConfig.mode`为`row`，可以实现行编辑。
+
 <DemoPreview dir="demos/vben-vxe-table/edit-row" />
 
 ## 虚拟滚动
 
+通过 scroll-y.enabled 与 scroll-y.gt 组合开启，其中 enabled 为总开关，gt 是指当总行数大于指定行数时自动开启。
+
+> 参考 [vxe-table 官方文档 - 虚拟滚动](https://vxetable.cn/v4/#/component/grid/scroll/vertical)。
+
 <DemoPreview dir="demos/vben-vxe-table/virtual" />
diff --git a/docs/src/demos/vben-vxe-table/basic/index.vue b/docs/src/demos/vben-vxe-table/basic/index.vue
index 963be8cfb17..4b6b5a632fd 100644
--- a/docs/src/demos/vben-vxe-table/basic/index.vue
+++ b/docs/src/demos/vben-vxe-table/basic/index.vue
@@ -66,8 +66,9 @@ function changeLoading() {
 </script>
 
 <template>
-  <div class="vp-raw flex w-full">
-    <Grid class="w-full">
+  <!-- 此处的`vp-raw` 是为了适配文档的展示效果，实际使用时不需要 -->
+  <div class="vp-raw w-full">
+    <Grid>
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="changeBorder">
           {{ showBorder ? '隐藏' : '显示' }}边框
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
index 9802f4b4fd7..4960a2bbe68 100644
--- a/docs/src/demos/vben-vxe-table/custom-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button, Image, Switch, Tag } from 'ant-design-vue';
+import { Image as AImage, Button, Switch, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
@@ -68,7 +68,6 @@ const gridOptions: VxeGridProps<RowType> = {
       width: 120,
     },
   ],
-  height: 'auto',
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
@@ -87,10 +86,10 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <div class="vp-raw h-[600px] w-full">
-    <Grid class="w-full">
+  <div class="vp-raw w-full">
+    <Grid>
       <template #image-url="{ row }">
-        <Image :src="row.imageUrl" height="30" width="30" />
+        <AImage :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
         <Switch v-model:checked="row.open" />
diff --git a/docs/src/demos/vben-vxe-table/edit-cell/index.vue b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
index 7ad296906af..711941de313 100644
--- a/docs/src/demos/vben-vxe-table/edit-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { getExampleTableApi } from '../mock-api';
@@ -33,7 +31,6 @@ const gridOptions: VxeGridProps<RowType> = {
     mode: 'cell',
     trigger: 'click',
   },
-  height: 'auto',
   pagerConfig: {},
   proxyConfig: {
     ajax: {
@@ -52,7 +49,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw w-full">
     <Grid />
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/edit-row/index.vue b/docs/src/demos/vben-vxe-table/edit-row/index.vue
index 4bdc43ecd6c..f317f69d160 100644
--- a/docs/src/demos/vben-vxe-table/edit-row/index.vue
+++ b/docs/src/demos/vben-vxe-table/edit-row/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -36,7 +34,6 @@ const gridOptions: VxeGridProps<RowType> = {
     mode: 'row',
     trigger: 'click',
   },
-  height: 'auto',
   pagerConfig: {},
   proxyConfig: {
     ajax: {
@@ -79,7 +76,7 @@ const cancelRowEvent = (_row: RowType) => {
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw w-full">
     <Grid>
       <template #action="{ row }">
         <template v-if="hasEditStatus(row)">
@@ -91,5 +88,5 @@ const cancelRowEvent = (_row: RowType) => {
         </template>
       </template>
     </Grid>
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/fixed/index.vue b/docs/src/demos/vben-vxe-table/fixed/index.vue
index 134ec4cd8d8..6067a5ebe7d 100644
--- a/docs/src/demos/vben-vxe-table/fixed/index.vue
+++ b/docs/src/demos/vben-vxe-table/fixed/index.vue
@@ -37,7 +37,6 @@ const gridOptions: VxeGridProps<RowType> = {
       width: 120,
     },
   ],
-  height: 'auto',
   pagerConfig: {},
   proxyConfig: {
     ajax: {
@@ -58,8 +57,8 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
 </script>
 
 <template>
-  <div class="vp-raw flex h-[600px] w-full">
-    <Grid class="w-full">
+  <div class="vp-raw w-full">
+    <Grid>
       <template #action>
         <Button type="link">编辑</Button>
       </template>
diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
index b7950086451..a5e8a547b8d 100644
--- a/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -2,8 +2,6 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -25,17 +23,26 @@ const formOptions: VbenFormProps = {
   schema: [
     {
       component: 'Input',
+      componentProps: {
+        placeholder: 'Please enter category',
+      },
       defaultValue: '1',
       fieldName: 'category',
       label: 'Category',
     },
     {
       component: 'Input',
+      componentProps: {
+        placeholder: 'Please enter productName',
+      },
       fieldName: 'productName',
       label: 'ProductName',
     },
     {
       component: 'Input',
+      componentProps: {
+        placeholder: 'Please enter price',
+      },
       fieldName: 'price',
       label: 'Price',
     },
@@ -66,6 +73,9 @@ const formOptions: VbenFormProps = {
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };
@@ -84,7 +94,6 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'price', title: 'Price' },
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
   ],
-  height: 'auto',
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
@@ -105,7 +114,7 @@ const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw w-full">
     <Grid />
-  </Page>
+  </div>
 </template>
diff --git a/docs/src/demos/vben-vxe-table/remote/index.vue b/docs/src/demos/vben-vxe-table/remote/index.vue
index 9366dfbcf71..fc845270845 100644
--- a/docs/src/demos/vben-vxe-table/remote/index.vue
+++ b/docs/src/demos/vben-vxe-table/remote/index.vue
@@ -5,7 +5,8 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
-import { getExampleTableApi } from '../mock-api';
+import { type DemoTableApi } from '../mock-api';
+import { MOCK_API_DATA } from '../table-data';
 
 interface RowType {
   category: string;
@@ -16,6 +17,43 @@ interface RowType {
   releaseDate: string;
 }
 
+// 数据实例
+// const MOCK_TREE_TABLE_DATA = [
+//   {
+//     date: '2020-08-01',
+//     id: 10_000,
+//     name: 'Test1',
+//     parentId: null,
+//     size: 1024,
+//     type: 'mp3',
+//   },
+// ]
+
+const sleep = (time = 1000) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+/**
+ * 获取示例表格数据
+ */
+async function getExampleTableApi(params: DemoTableApi.PageFetchParams) {
+  return new Promise<{ items: any; total: number }>((resolve) => {
+    const { page, pageSize } = params;
+    const items = MOCK_API_DATA.slice((page - 1) * pageSize, page * pageSize);
+
+    sleep(1000).then(() => {
+      resolve({
+        total: items.length,
+        items,
+      });
+    });
+  });
+}
+
 const gridOptions: VxeGridProps<RowType> = {
   checkboxConfig: {
     highlight: true,
@@ -31,7 +69,7 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
   ],
   exportConfig: {},
-  height: 'auto',
+  // height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
   keepSource: true,
   proxyConfig: {
     ajax: {
@@ -59,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div class="vp-raw w-full">
-    <Grid class="h-80 w-full" table-title="数据列表" table-title-help="提示">
+    <Grid>
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="() => gridApi.query()">
           刷新当前页面
diff --git a/docs/src/demos/vben-vxe-table/table-data.ts b/docs/src/demos/vben-vxe-table/table-data.ts
index c951ab0b765..c37b88ade68 100644
--- a/docs/src/demos/vben-vxe-table/table-data.ts
+++ b/docs/src/demos/vben-vxe-table/table-data.ts
@@ -381,214 +381,4 @@ export const MOCK_API_DATA = [
     tags: ['Handmade', 'Unbranded', 'Unbranded'],
     weight: 9.430_690_557_758_114,
   },
-  {
-    available: false,
-    category: 'Sports',
-    color: 'lavender',
-    currency: 'XOF',
-    description:
-      'The slim & simple Maple Gaming Keyboard from Dev Byte comes with a sleek body and 7- Color RGB LED Back-lighting for smart functionality',
-    id: '7b711e78-692e-4031-83f9-b08085d7dc27',
-    imageUrl: 'https://avatars.githubusercontent.com/u/96172031',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/45856661',
-    inProduction: false,
-    open: false,
-    price: '833.85',
-    productName: 'Sleek Plastic Chicken',
-    quantity: 41,
-    rating: 4.369_176_254_671_247,
-    releaseDate: '2024-02-05T16:21:02.026Z',
-    status: 'error',
-    tags: ['Oriental', 'Rustic', 'Intelligent'],
-    weight: 3.211_361_088_265_749_5,
-  },
-  {
-    available: true,
-    category: 'Outdoors',
-    color: 'gold',
-    currency: 'MVR',
-    description:
-      'New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016',
-    id: 'e46cee76-2d53-4481-a15e-59434579198b',
-    imageUrl: 'https://avatars.githubusercontent.com/u/75039120',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/88852377',
-    inProduction: true,
-    open: true,
-    price: '123.59',
-    productName: 'Elegant Frozen Table',
-    quantity: 55,
-    rating: 1.149_023_048_729_307_8,
-    releaseDate: '2024-03-08T13:09:28.421Z',
-    status: 'error',
-    tags: ['Unbranded', 'Licensed', 'Oriental'],
-    weight: 8.646_435_587_749_05,
-  },
-  {
-    available: false,
-    category: 'Beauty',
-    color: 'violet',
-    currency: 'SEK',
-    description:
-      'The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J',
-    id: 'cf3de0d0-0f50-46ef-9244-d30ea4cc98b8',
-    imageUrl: 'https://avatars.githubusercontent.com/u/65691100',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/35362239',
-    inProduction: true,
-    open: true,
-    price: '303.49',
-    productName: 'Ergonomic Cotton Soap',
-    quantity: 81,
-    rating: 4.217_422_711_758_923,
-    releaseDate: '2024-06-09T02:39:00.969Z',
-    status: 'error',
-    tags: ['Elegant', 'Practical', 'Fantastic'],
-    weight: 6.018_255_461_739_438,
-  },
-  {
-    available: true,
-    category: 'Movies',
-    color: 'gold',
-    currency: 'NZD',
-    description:
-      'The Nagasaki Lander is the trademarked name of several series of Nagasaki sport bikes, that started with the 1984 ABC800J',
-    id: '14995e8d-3e0e-4684-80b1-f84e6df4420b',
-    imageUrl: 'https://avatars.githubusercontent.com/u/2227834',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/51921236',
-    inProduction: false,
-    open: true,
-    price: '395.49',
-    productName: 'Awesome Soft Car',
-    quantity: 68,
-    rating: 3.114_702_440_124_858_6,
-    releaseDate: '2024-08-07T23:46:00.786Z',
-    status: 'error',
-    tags: ['Sleek', 'Incredible', 'Practical'],
-    weight: 1.002_350_512_236_772_6,
-  },
-  {
-    available: false,
-    category: 'Movies',
-    color: 'cyan',
-    currency: 'BRL',
-    description:
-      'The automobile layout consists of a front-engine design, with transaxle-type transmissions mounted at the rear of the engine and four wheel drive',
-    id: '581fa9b1-e784-47f9-9922-66aa21f46664',
-    imageUrl: 'https://avatars.githubusercontent.com/u/49456060',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/47054539',
-    inProduction: true,
-    open: false,
-    price: '660.09',
-    productName: 'Oriental Rubber Fish',
-    quantity: 67,
-    rating: 3.783_115_267_908_933_3,
-    releaseDate: '2023-12-03T17:35:17.845Z',
-    status: 'warning',
-    tags: ['Refined', 'Intelligent', 'Bespoke'],
-    weight: 2.920_687_808_651_241,
-  },
-  {
-    available: true,
-    category: 'Home',
-    color: 'red',
-    currency: 'DOP',
-    description:
-      'The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design',
-    id: 'bef03f92-ee7d-4299-8438-a95eb8872cb9',
-    imageUrl: 'https://avatars.githubusercontent.com/u/3917257',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/71337756',
-    inProduction: true,
-    open: false,
-    price: '502.99',
-    productName: 'Bespoke Bronze Bike',
-    quantity: 13,
-    rating: 4.929_263_484_476_12,
-    releaseDate: '2024-10-17T12:50:42.635Z',
-    status: 'success',
-    tags: ['Generic', 'Small', 'Refined'],
-    weight: 7.679_653_789_364_19,
-  },
-  {
-    available: true,
-    category: 'Movies',
-    color: 'orange',
-    currency: 'KHR',
-    description:
-      'Carbonite web goalkeeper gloves are ergonomically designed to give easy fit',
-    id: '75d3c9e0-c7a0-44b1-b572-196518f036d4',
-    imageUrl: 'https://avatars.githubusercontent.com/u/71124558',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/79487494',
-    inProduction: false,
-    open: true,
-    price: '515.69',
-    productName: 'Modern Frozen Computer',
-    quantity: 26,
-    rating: 2.853_653_354_649_052_3,
-    releaseDate: '2024-05-17T05:12:48.300Z',
-    status: 'warning',
-    tags: ['Luxurious', 'Rustic', 'Oriental'],
-    weight: 2.642_900_412_111_716_3,
-  },
-  {
-    available: false,
-    category: 'Kids',
-    color: 'salmon',
-    currency: 'SCR',
-    description:
-      "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
-    id: '14e46b4b-0203-4c73-abed-a8100e0b539c',
-    imageUrl: 'https://avatars.githubusercontent.com/u/76342482',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/29659498',
-    inProduction: true,
-    open: true,
-    price: '177.69',
-    productName: 'Elegant Cotton Fish',
-    quantity: 36,
-    rating: 2.726_620_373_572_253,
-    releaseDate: '2024-03-23T11:15:31.823Z',
-    status: 'success',
-    tags: ['Small', 'Modern', 'Gorgeous'],
-    weight: 6.910_916_953_867_159,
-  },
-  {
-    available: false,
-    category: 'Movies',
-    color: 'black',
-    currency: 'MYR',
-    description:
-      'Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals',
-    id: '6908f557-a2cb-434d-b5d5-b8d982d5451b',
-    imageUrl: 'https://avatars.githubusercontent.com/u/5593260',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/13907478',
-    inProduction: true,
-    open: true,
-    price: '892.15',
-    productName: 'Unbranded Rubber Pants',
-    quantity: 6,
-    rating: 1.044_369_861_681_574_2,
-    releaseDate: '2024-07-01T19:18:09.841Z',
-    status: 'error',
-    tags: ['Oriental', 'Recycled', 'Tasty'],
-    weight: 7.356_822_519_614_8,
-  },
-  {
-    available: true,
-    category: 'Tools',
-    color: 'salmon',
-    currency: 'DOP',
-    description:
-      'Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support',
-    id: 'b53ef7fc-3e82-49ce-b765-bfbf6105b8eb',
-    imageUrl: 'https://avatars.githubusercontent.com/u/54968787',
-    imageUrl2: 'https://avatars.githubusercontent.com/u/61407293',
-    inProduction: false,
-    open: false,
-    price: '163.40',
-    productName: 'Recycled Concrete Car',
-    quantity: 79,
-    rating: 2.679_401_744_365_649,
-    releaseDate: '2024-01-12T15:02:30.337Z',
-    status: 'warning',
-    tags: ['Elegant', 'Practical', 'Elegant'],
-    weight: 2.094_519_890_837_731,
-  },
 ];
diff --git a/docs/src/demos/vben-vxe-table/tree/index.vue b/docs/src/demos/vben-vxe-table/tree/index.vue
index 6274e8fadd3..0024765a8ca 100644
--- a/docs/src/demos/vben-vxe-table/tree/index.vue
+++ b/docs/src/demos/vben-vxe-table/tree/index.vue
@@ -16,6 +16,26 @@ interface RowType {
   type: string;
 }
 
+// 数据实例
+// const MOCK_TREE_TABLE_DATA = [
+//   {
+//     date: '2020-08-01',
+//     id: 10_000,
+//     name: 'Test1',
+//     parentId: null,
+//     size: 1024,
+//     type: 'mp3',
+//   },
+//   {
+//     date: '2021-04-01',
+//     id: 10_050,
+//     name: 'Test2',
+//     parentId: 10_000,
+//     size: 0,
+//     type: 'mp4',
+//   },
+// ];
+
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { type: 'seq', width: 70 },
@@ -47,8 +67,8 @@ const collapseAll = () => {
 </script>
 
 <template>
-  <div class="vp-raw flex h-[300px] w-full">
-    <Grid class="w-full" table-title="数据列表" table-title-help="提示">
+  <div class="vp-raw h-[300px] w-full">
+    <Grid>
       <template #toolbar-tools>
         <Button class="mr-2" type="primary" @click="expandAll">
           展开全部
diff --git a/docs/src/demos/vben-vxe-table/virtual/index.vue b/docs/src/demos/vben-vxe-table/virtual/index.vue
index f35a691b3df..81fa00af260 100644
--- a/docs/src/demos/vben-vxe-table/virtual/index.vue
+++ b/docs/src/demos/vben-vxe-table/virtual/index.vue
@@ -3,8 +3,6 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { onMounted } from 'vue';
 
-import { Page } from '@vben/common-ui';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 interface RowType {
@@ -60,7 +58,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Page auto-content-height>
+  <div class="vp-raw h-[500px] w-full">
     <Grid />
-  </Page>
+  </div>
 </template>

From 5d4d3d0890e40ce3c00b926c0c905983978c5891 Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Tue, 5 Nov 2024 10:09:19 +0800
Subject: [PATCH 6/9] fix: add maximumFileSizeToCacheInBytes to fix build error

---
 docs/.vitepress/config/shared.mts                   | 1 +
 docs/src/demos/vben-vxe-table/custom-cell/index.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/config/shared.mts b/docs/.vitepress/config/shared.mts
index 14c8a666fd8..e45d7a24c62 100644
--- a/docs/.vitepress/config/shared.mts
+++ b/docs/.vitepress/config/shared.mts
@@ -156,6 +156,7 @@ function pwa(): PwaOptions {
     registerType: 'autoUpdate',
     workbox: {
       globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
     },
   };
 }
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
index 4960a2bbe68..517e73f3870 100644
--- a/docs/src/demos/vben-vxe-table/custom-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { Image as AImage, Button, Switch, Tag } from 'ant-design-vue';
+import { Button, Image, Switch, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
@@ -89,7 +89,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
   <div class="vp-raw w-full">
     <Grid>
       <template #image-url="{ row }">
-        <AImage :src="row.imageUrl" height="30" width="30" />
+        <Image :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
         <Switch v-model:checked="row.open" />

From 22bb1096cb93a258a8c8e51d1cae37670843df42 Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Tue, 5 Nov 2024 10:46:54 +0800
Subject: [PATCH 7/9] fix: fix vxe-table set-theme build error

---
 docs/.vitepress/theme/components/site-layout.vue | 15 ++++++++++++---
 packages/effects/plugins/src/vxe-table/index.ts  |  1 -
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/.vitepress/theme/components/site-layout.vue b/docs/.vitepress/theme/components/site-layout.vue
index f50ed3d973c..b31cbffb185 100644
--- a/docs/.vitepress/theme/components/site-layout.vue
+++ b/docs/.vitepress/theme/components/site-layout.vue
@@ -11,8 +11,6 @@ import {
 // import { useAntdDesignTokens } from '@vben/hooks';
 // import { initPreferences } from '@vben/preferences';
 
-import { setTheme } from '@vben/plugins/vxe-table';
-
 import { ConfigProvider, theme } from 'ant-design-vue';
 import mediumZoom from 'medium-zoom';
 import { useRoute } from 'vitepress';
@@ -34,8 +32,19 @@ watch(
   () => nextTick(() => initZoom()),
 );
 
+function setVxeTheme(name?: string) {
+  const theme = !name || name === 'default' ? 'light' : name;
+
+  if (typeof document !== 'undefined') {
+    const documentElement = document.documentElement;
+    if (documentElement) {
+      documentElement.dataset.vxeUiTheme = theme;
+    }
+  }
+}
+
 watch(isDark, (dark) => {
-  setTheme(dark ? 'dark' : 'light');
+  setVxeTheme(dark ? 'dark' : 'light');
 });
 
 // initPreferences({
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 435316a4e4e..52a295cfc0c 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -4,5 +4,4 @@ export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 
 export * from 'vxe-pc-ui/styles/all.scss';
 export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
-export { setTheme } from 'vxe-table';
 export * from 'vxe-table/styles/all.scss';

From b768bfb570cfd3335d8b6bc7ff341af9d3d89dc6 Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Tue, 5 Nov 2024 18:14:51 +0800
Subject: [PATCH 8/9] docs: fix vitepress ssr render problem

---
 docs/.vitepress/theme/index.ts                | 67 ++++++++++++++++++-
 docs/src/_env/adapter/vxe-table.ts            | 62 -----------------
 docs/src/demos/vben-vxe-table/basic/index.vue | 14 +++-
 .../vben-vxe-table/custom-cell/index.vue      | 10 ++-
 .../demos/vben-vxe-table/edit-cell/index.vue  |  8 ++-
 .../demos/vben-vxe-table/edit-row/index.vue   | 10 ++-
 docs/src/demos/vben-vxe-table/fixed/index.vue | 10 ++-
 docs/src/demos/vben-vxe-table/form/index.vue  | 10 ++-
 .../src/demos/vben-vxe-table/remote/index.vue | 10 ++-
 docs/src/demos/vben-vxe-table/tree/index.vue  | 10 ++-
 .../demos/vben-vxe-table/virtual/index.vue    | 10 +--
 .../plugins/src/vxe-table/use-vxe-grid.ts     |  2 +
 12 files changed, 133 insertions(+), 90 deletions(-)

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5a01fab60ed..ff52cc207bf 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,12 @@
 // https://vitepress.dev/guide/custom-theme
 import type { EnhanceAppContext, Theme } from 'vitepress';
 
+import { h } from 'vue';
+
+import { useVbenForm } from '@vben/common-ui';
+
 import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client';
+import { Button, Image } from 'ant-design-vue';
 import DefaultTheme from 'vitepress/theme';
 
 import { DemoPreview } from '../components';
@@ -15,11 +20,71 @@ import 'virtual:group-icons.css';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 
 export default {
-  enhanceApp(ctx: EnhanceAppContext) {
+  async enhanceApp(ctx: EnhanceAppContext) {
     const { app } = ctx;
     app.component('VbenContributors', VbenContributors);
     app.component('DemoPreview', DemoPreview);
     app.use(NolebaseGitChangelogPlugin);
+
+    if (!import.meta.env.SSR) {
+      const plugin = await import('@vben/plugins/vxe-table');
+
+      plugin.setupVbenVxeTable({
+        configVxeTable: (vxeUI) => {
+          vxeUI.setConfig({
+            grid: {
+              align: 'center',
+              border: false,
+              columnConfig: {
+                resizable: true,
+              },
+              minHeight: 180,
+              proxyConfig: {
+                autoLoad: true,
+                response: {
+                  result: 'items',
+                  total: 'total',
+                  list: 'items',
+                },
+                showActiveMsg: true,
+                showResponseMsg: false,
+              },
+              round: true,
+              showOverflow: true,
+              size: 'small',
+            },
+          });
+
+          // 表格配置项可以用 cellRender: { name: 'CellImage' },
+          vxeUI.renderer.add('CellImage', {
+            renderDefault(_renderOpts, params) {
+              const { column, row } = params;
+              return h(Image, { src: row[column.field] } as any);
+            },
+          });
+
+          // 表格配置项可以用 cellRender: { name: 'CellLink' },
+          vxeUI.renderer.add('CellLink', {
+            renderDefault(renderOpts) {
+              const { props } = renderOpts;
+              return h(
+                Button,
+                { size: 'small', type: 'link' },
+                { default: () => props?.text },
+              );
+            },
+          });
+
+          // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+          // vxeUI.formats.add
+        },
+        useVbenForm,
+      });
+
+      app.component('VbenVxeGrid', plugin.VbenVxeGrid);
+      app.provide('useVbenVxeGrid', plugin.useVbenVxeGrid);
+    }
+
     // 百度统计
     initHmPlugin();
   },
diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
index 1a0765a09fe..403d7a3ec93 100644
--- a/docs/src/_env/adapter/vxe-table.ts
+++ b/docs/src/_env/adapter/vxe-table.ts
@@ -1,63 +1 @@
-import { h } from 'vue';
-
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-
-import { Button, Image } from 'ant-design-vue';
-
-import { useVbenForm } from './form';
-
-setupVbenVxeTable({
-  configVxeTable: (vxeUI) => {
-    vxeUI.setConfig({
-      grid: {
-        align: 'center',
-        border: false,
-        columnConfig: {
-          resizable: true,
-        },
-        minHeight: 180,
-        proxyConfig: {
-          autoLoad: true,
-          response: {
-            result: 'items',
-            total: 'total',
-            list: 'items',
-          },
-          showActiveMsg: true,
-          showResponseMsg: false,
-        },
-        round: true,
-        showOverflow: true,
-        size: 'small',
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellImage' },
-    vxeUI.renderer.add('CellImage', {
-      renderDefault(_renderOpts, params) {
-        const { column, row } = params;
-        return h(Image, { src: row[column.field] } as any);
-      },
-    });
-
-    // 表格配置项可以用 cellRender: { name: 'CellLink' },
-    vxeUI.renderer.add('CellLink', {
-      renderDefault(renderOpts) {
-        const { props } = renderOpts;
-        return h(
-          Button,
-          { size: 'small', type: 'link' },
-          { default: () => props?.text },
-        );
-      },
-    });
-
-    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
-    // vxeUI.formats.add
-  },
-  useVbenForm,
-});
-
-export { useVbenVxeGrid };
-
 export type * from '@vben/plugins/vxe-table';
diff --git a/docs/src/demos/vben-vxe-table/basic/index.vue b/docs/src/demos/vben-vxe-table/basic/index.vue
index 4b6b5a632fd..1d6501ab17c 100644
--- a/docs/src/demos/vben-vxe-table/basic/index.vue
+++ b/docs/src/demos/vben-vxe-table/basic/index.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup>
-import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  UseVbenVxeGrid,
+  VxeGridListeners,
+  VxeGridProps,
+} from '#/adapter/vxe-table';
 
-import { Button, message } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Button, message } from 'ant-design-vue';
 
 import { MOCK_TABLE_DATA } from '../table-data';
 
@@ -16,6 +20,10 @@ interface RowType {
   role: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
index 517e73f3870..2bd78110ba3 100644
--- a/docs/src/demos/vben-vxe-table/custom-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button, Image, Switch, Tag } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Button, Image, Switch, Tag } from 'ant-design-vue';
 
 import { getExampleTableApi } from '../mock-api';
 
@@ -19,6 +19,10 @@ interface RowType {
   status: 'error' | 'success' | 'warning';
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const gridOptions: VxeGridProps<RowType> = {
   checkboxConfig: {
     highlight: true,
diff --git a/docs/src/demos/vben-vxe-table/edit-cell/index.vue b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
index 711941de313..6736b9266b9 100644
--- a/docs/src/demos/vben-vxe-table/edit-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/edit-cell/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { inject } from 'vue';
 
 import { getExampleTableApi } from '../mock-api';
 
@@ -14,6 +14,10 @@ interface RowType {
   releaseDate: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },
diff --git a/docs/src/demos/vben-vxe-table/edit-row/index.vue b/docs/src/demos/vben-vxe-table/edit-row/index.vue
index f317f69d160..7f33fe3b7fc 100644
--- a/docs/src/demos/vben-vxe-table/edit-row/index.vue
+++ b/docs/src/demos/vben-vxe-table/edit-row/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button, message } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Button, message } from 'ant-design-vue';
 
 import { getExampleTableApi } from '../mock-api';
 
@@ -16,6 +16,10 @@ interface RowType {
   releaseDate: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },
diff --git a/docs/src/demos/vben-vxe-table/fixed/index.vue b/docs/src/demos/vben-vxe-table/fixed/index.vue
index 6067a5ebe7d..0c4dcf4acd8 100644
--- a/docs/src/demos/vben-vxe-table/fixed/index.vue
+++ b/docs/src/demos/vben-vxe-table/fixed/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Button } from 'ant-design-vue';
 
 import { getExampleTableApi } from '../mock-api';
 
@@ -16,6 +16,10 @@ interface RowType {
   releaseDate: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { fixed: 'left', title: '序号', type: 'seq', width: 50 },
diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
index a5e8a547b8d..1fa80358c79 100644
--- a/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { message } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { message } from 'ant-design-vue';
 
 import { getExampleTableApi } from '../mock-api';
 
@@ -17,6 +17,10 @@ interface RowType {
   releaseDate: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
diff --git a/docs/src/demos/vben-vxe-table/remote/index.vue b/docs/src/demos/vben-vxe-table/remote/index.vue
index fc845270845..a9c309bac4c 100644
--- a/docs/src/demos/vben-vxe-table/remote/index.vue
+++ b/docs/src/demos/vben-vxe-table/remote/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Button } from 'ant-design-vue';
 
 import { type DemoTableApi } from '../mock-api';
 import { MOCK_API_DATA } from '../table-data';
@@ -17,6 +17,10 @@ interface RowType {
   releaseDate: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 // 数据实例
 // const MOCK_TREE_TABLE_DATA = [
 //   {
diff --git a/docs/src/demos/vben-vxe-table/tree/index.vue b/docs/src/demos/vben-vxe-table/tree/index.vue
index 0024765a8ca..db992c2dae5 100644
--- a/docs/src/demos/vben-vxe-table/tree/index.vue
+++ b/docs/src/demos/vben-vxe-table/tree/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { inject } from 'vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Button } from 'ant-design-vue';
 
 import { MOCK_TREE_TABLE_DATA } from '../table-data';
 
@@ -16,6 +16,10 @@ interface RowType {
   type: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 // 数据实例
 // const MOCK_TREE_TABLE_DATA = [
 //   {
diff --git a/docs/src/demos/vben-vxe-table/virtual/index.vue b/docs/src/demos/vben-vxe-table/virtual/index.vue
index 81fa00af260..c545e102f38 100644
--- a/docs/src/demos/vben-vxe-table/virtual/index.vue
+++ b/docs/src/demos/vben-vxe-table/virtual/index.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
 
-import { onMounted } from 'vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { inject, onMounted } from 'vue';
 
 interface RowType {
   id: number;
@@ -12,6 +10,10 @@ interface RowType {
   sex: string;
 }
 
+const useVbenVxeGrid = inject<UseVbenVxeGrid>(
+  'useVbenVxeGrid',
+) as UseVbenVxeGrid;
+
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { type: 'seq', width: 70 },
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
index f3321a4b927..a309f5ac4d7 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
@@ -41,3 +41,5 @@ export function useVbenVxeGrid(options: VxeGridProps) {
 
   return [Grid, extendedApi] as const;
 }
+
+export type UseVbenVxeGrid = typeof useVbenVxeGrid;

From a876c8e7a762acf7b6d1e23228da7f2127e4737c Mon Sep 17 00:00:00 2001
From: Arthur Darkstone <arthurlli@qq.com>
Date: Tue, 5 Nov 2024 18:39:37 +0800
Subject: [PATCH 9/9] docs: add some tips for vitepress compatibility

---
 docs/src/components/common-ui/vben-vxe-table.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index 26d568e261d..3f990cea263 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -18,7 +18,11 @@ outline: deep
 
 ::: tip README
 
-下方示例代码中的，存在一些国际化、主题色未适配问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
+下方示例代码中, 出现的 `inject<UseVbenVxeGrid>` 是为了适配文档内的示例，实际使用时直接从 `'@vben/plugins/vxe-table'` 引入即可。
+
+```typescript
+import { useVbenVxeGrid } from '@vben/plugins/vxe-table';
+```
 
 :::