diff --git a/apps/web-antd/src/adapter/style.css b/apps/web-antd/src/adapter/style.css
deleted file mode 100644
index 01368a9285e8eee05c46ed8a05b34733d7164c59..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/adapter/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-/* 来自 @vben/plugins/vxe-table style.css，覆盖 vxe-table 原有的样式定义，使用 vben 的样式主题 */
-: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(--heavy));
-
-  /* --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-font-primary-tinge-color: hsl(var(--primary));
-  --vxe-ui-font-primary-lighten-color: hsl(var(--primary) / 60%);
-  --vxe-ui-font-primary-darken-color: hsl(var(--primary));
-
-  /* height: auto !important; */
-
-  /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
-}
-
-.vxe-tools--operate {
-  margin-right: 0.25rem;
-  margin-left: 0.75rem;
-}
-
-.vxe-table-custom--checkbox-option:hover {
-  background: none !important;
-}
-
-.vxe-toolbar {
-  padding: 0;
-}
-
-.vxe-buttons--wrapper:not(:empty),
-.vxe-tools--operate:not(:empty),
-.vxe-tools--wrapper:not(:empty) {
-  padding: 0.6em 0;
-}
-
-.vxe-tools--operate:not(:has(button)) {
-  margin-left: 0;
-}
diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index e28a6ae1d4bd75aca875787f28d820ca88b3bda5..96c85d1296e2e4c28dc5d789953fe31b027f7e43 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -6,7 +6,8 @@ import { h } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 import { $te } from '@vben/locales';
 import {
-  AsyncComponents,
+  AsyncVxeColumn,
+  AsyncVxeTable,
   createRequiredValidation,
   setupVbenVxeTable,
   useVbenVxeGrid,
@@ -34,8 +35,6 @@ import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
-import '#/adapter/style.css';
-
 setupVbenVxeTable({
   configVxeTable: (vxeUI) => {
     vxeUI.setConfig({
@@ -357,16 +356,8 @@ setupVbenVxeTable({
 
 export { createRequiredValidation, useVbenVxeGrid };
 
-const [VxeTable, VxeColumn, VxeToolbar] = AsyncComponents;
-export { VxeColumn, VxeTable, VxeToolbar };
+export const [VxeTable, VxeColumn] = [AsyncVxeTable, AsyncVxeColumn];
 
-// add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L264-L270
-export type OnActionClickParams<T = Recordable<any>> = {
-  code: string;
-  row: T;
-};
-export type OnActionClickFn<T = Recordable<any>> = (
-  params: OnActionClickParams<T>,
-) => void;
 export * from '#/components/table-action';
+
 export type * from '@vben/plugins/vxe-table';
diff --git a/apps/web-antd/src/components/table-toolbar/index.ts b/apps/web-antd/src/components/table-toolbar/index.ts
deleted file mode 100644
index 720e3224ba00d2cbecf673da357f08f7aa199e82..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/components/table-toolbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TableToolbar } from './table-toolbar.vue';
diff --git a/apps/web-antd/src/hooks/index.ts b/apps/web-antd/src/hooks/index.ts
deleted file mode 100644
index 75f01b531e75ab322f1e04a72c64a7cab0d60dd4..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-table-toolbar';
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts b/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts
index 31ce2d45edc2c12e3b77ba6c0a6b75a79fcdec57..f8acac72a679acbc92241820e712bec8bc78a278 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/data.ts
@@ -1,15 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { useAccess } from '@vben/access';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -105,9 +102,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -147,30 +142,10 @@ export function useGridColumns(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 200,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:demo03-student:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
@@ -252,9 +227,7 @@ export function useDemo03CourseGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useDemo03CourseGridColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -284,31 +257,10 @@ export function useDemo03CourseGridColumns(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 200,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生课程',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:demo03-student:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
@@ -390,9 +342,7 @@ export function useDemo03GradeGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useDemo03GradeGridColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Grade>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
+export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -422,31 +372,10 @@ export function useDemo03GradeGridColumns(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 200,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生班级',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:demo03-student:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
index 8700e95113e7155e866424bccb1a0eee81f8dbb7..973697494c8126f0f07118b1bc37ad7fa9925721 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, ref } from 'vue';
@@ -13,7 +10,7 @@ import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { Button, message, Tabs } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
   deleteDemo03StudentList,
@@ -99,29 +96,12 @@ async function onExport() {
   downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Student>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: '600px',
     pagerConfig: {
       enabled: true,
@@ -193,6 +173,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
             批量删除
           </Button>
         </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'link',
+                icon: ACTION_ICON.EDIT,
+                auth: ['infra:demo03-student:update'],
+                onClick: onEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                danger: true,
+                type: 'link',
+                icon: ACTION_ICON.DELETE,
+                auth: ['infra:demo03-student:delete'],
+                popConfirm: {
+                  title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                  confirm: onDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
       </Grid>
 
       <!-- 子表的表单 -->
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
index 2d738f1fbe572a1ac2a6e97e7d2a8d6f0cd6834c..263c129bbd232f4e004f1a4e0a9f9cf7978dd2f2 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, ref, watch } from 'vue';
@@ -13,7 +10,7 @@ import { isEmpty } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Course,
   deleteDemo03CourseList,
@@ -92,29 +89,12 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Course>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useDemo03CourseGridFormSchema(),
   },
   gridOptions: {
-    columns: useDemo03CourseGridColumns(onActionClick),
+    columns: useDemo03CourseGridColumns(),
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -192,5 +172,29 @@ watch(
         批量删除
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            type: 'link',
+            icon: ACTION_ICON.EDIT,
+            auth: ['infra:demo03-student:update'],
+            onClick: onEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            danger: true,
+            type: 'link',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: onDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
index e6301b0051d2492b67d172304ba341ff3bd2a206..718c1c8c56fe8cb2c9b974edde3bb9b528f1e114 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, ref, watch } from 'vue';
@@ -13,7 +10,7 @@ import { isEmpty } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Grade,
   deleteDemo03GradeList,
@@ -92,29 +89,12 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Grade>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useDemo03GradeGridFormSchema(),
   },
   gridOptions: {
-    columns: useDemo03GradeGridColumns(onActionClick),
+    columns: useDemo03GradeGridColumns(),
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -192,5 +172,29 @@ watch(
         批量删除
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            type: 'link',
+            icon: ACTION_ICON.EDIT,
+            auth: ['infra:demo03-student:update'],
+            onClick: onEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            danger: true,
+            type: 'link',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: onDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts b/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
index 126a1d98dea0fb2cf0a92ca7ef7d71b3476e99c6..b10cf0cf94721d04ce79c8b63a90885731d40547 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
@@ -1,15 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
-import { useAccess } from '@vben/access';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -105,9 +102,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     { type: 'expand', width: 80, slots: { content: 'expand_content' } },
@@ -148,30 +143,11 @@ export function useGridColumns(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
+      field: 'actions',
       title: '操作',
-      minWidth: 200,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:demo03-student:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
@@ -179,9 +155,7 @@ export function useGridColumns(
 // ==================== 子表（学生课程） ====================
 
 /** 新增/修改列表的字段 */
-export function useDemo03CourseGridEditColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
   return [
     {
       field: 'name',
@@ -196,26 +170,11 @@ export function useDemo03CourseGridEditColumns(
       slots: { default: 'score' },
     },
     {
-      field: 'operation',
+      field: 'actions',
       title: '操作',
-      minWidth: 60,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
index e73e5ec95c4c530546f96c3ffc498ab7bf70f3f7..3c800d11a17453fa5e1e6877f9034933dd23fb15 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { h, ref } from 'vue';
@@ -13,7 +10,7 @@ import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { Button, message, Tabs } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
   deleteDemo03StudentList,
@@ -98,29 +95,12 @@ async function onExport() {
   downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Student>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     pagerConfig: {
       enabled: true,
@@ -198,6 +178,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
           批量删除
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo03-student:update'],
+              onClick: onEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              danger: true,
+              type: 'link',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: onDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
index 38ae31fd27471e2a46e72e661dba2135f68f9733..274492f4b817b331a3f3e5d32a94e7c05488167b 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { h, nextTick, watch } from 'vue';
@@ -8,7 +7,7 @@ import { Plus } from '@vben/icons';
 
 import { Button, Input } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/inner';
 import { $t } from '#/locales';
 
@@ -18,22 +17,9 @@ const props = defineProps<{
   studentId?: number; // 学生编号（主表的关联字段）
 }>();
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Course>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useDemo03CourseGridEditColumns(onActionClick),
+    columns: useDemo03CourseGridEditColumns(),
     border: true,
     showOverflow: true,
     autoResize: true,
@@ -68,9 +54,12 @@ defineExpose({
       gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
     const insertRecords =
       gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
-    return data
-      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
-      .concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
+    ];
   },
 });
 
@@ -98,6 +87,23 @@ watch(
     <template #score="{ row }">
       <Input v-model:value="row.score" />
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            danger: true,
+            type: 'link',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: onDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
   </Grid>
   <div class="-mt-4 flex justify-center">
     <Button
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
index fec5ee9129d907ca81e7ac92fb2832ef9d6be681..8978f2b190bafa2b1e0a4e263aec0fac24bcf1b2 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
@@ -31,11 +31,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function onRefresh() {
   await gridApi.grid.loadData(
     await getDemo03CourseListByStudentId(props.studentId!),
   );
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
index 64ac13e3ecb874ae4e40a6a901870576638289d9..e60dcf612c28185dfd25123326527660ba6b67ed 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
@@ -31,11 +31,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function onRefresh() {
   await gridApi.grid.loadData([
     await getDemo03GradeByStudentId(props.studentId!),
   ]);
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
index 58dc7b5472058022962396fb12cf8e535ea30b39..38339201a108a330ca48e617fdf9f38f584fd27a 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
@@ -61,8 +61,8 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
     // 拼接子表的数据
-    data.demo03Courses = demo03CourseFormRef.value?.getData();
-    data.demo03Grade = await demo03GradeFormRef.value?.getValues();
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = await demo03GradeFormRef.value?.getValues();
     try {
       await (formData.value?.id
         ? updateDemo03Student(data)
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
index 67cc1aa8ac2f91022b6b3e8fe3b5b686c21a3845..f37aff49de9433f4c0fdc92e10d866f63beff441 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
@@ -1,15 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
-import { useAccess } from '@vben/access';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -105,9 +102,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -141,30 +136,11 @@ export function useGridColumns(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
+      field: 'actions',
       title: '操作',
-      minWidth: 200,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:demo03-student:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
@@ -172,9 +148,7 @@ export function useGridColumns(
 // ==================== 子表（学生课程） ====================
 
 /** 新增/修改列表的字段 */
-export function useDemo03CourseGridEditColumns(
-  onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
-): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
   return [
     {
       field: 'name',
@@ -187,26 +161,11 @@ export function useDemo03CourseGridEditColumns(
       slots: { default: 'score' },
     },
     {
-      field: 'operation',
+      field: 'actions',
       title: '操作',
-      minWidth: 60,
-      align: 'center',
+      width: 280,
       fixed: 'right',
-      showOverflow: false,
-      cellRender: {
-        attrs: {
-          nameField: 'id',
-          nameTitle: '学生',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:demo03-student:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
index e238d2475ede1679ae47c3edade52bf0da805aaa..346cbfd7726fc62d30c42019390bb769cc935ff1 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, ref } from 'vue';
@@ -13,7 +10,7 @@ import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
   deleteDemo03StudentList,
@@ -92,29 +89,12 @@ async function onExport() {
   downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Student>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     pagerConfig: {
       enabled: true,
@@ -181,6 +161,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
           批量删除
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo03-student:update'],
+              onClick: onEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              danger: true,
+              type: 'link',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: onDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
index 07aff668637557f892c1e94d0a1fe99d18e56e69..867d479f94103cd5de1bc2021e1c6d469ea4c7f7 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, nextTick, watch } from 'vue';
@@ -8,7 +7,7 @@ import { Plus } from '@vben/icons';
 
 import { Button, Input } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
 import { $t } from '#/locales';
 
@@ -18,22 +17,9 @@ const props = defineProps<{
   studentId?: number; // 学生编号（主表的关联字段）
 }>();
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo03StudentApi.Demo03Course>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useDemo03CourseGridEditColumns(onActionClick),
+    columns: useDemo03CourseGridEditColumns(),
     border: true,
     showOverflow: true,
     autoResize: true,
@@ -68,9 +54,12 @@ defineExpose({
       gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
     const insertRecords =
       gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
-    return data
-      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
-      .concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
+    ];
   },
 });
 
@@ -98,6 +87,23 @@ watch(
     <template #score="{ row }">
       <Input v-model:value="row.score" />
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            danger: true,
+            type: 'link',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: onDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
   </Grid>
   <div class="-mt-4 flex justify-center">
     <Button
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue
index 72cbf278d6f218ccb9919e2ea82b8922b628a1e6..f6a7b7a4da2ac47dba8adb7d47fb540ca0b58580 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue
@@ -61,8 +61,8 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
     // 拼接子表的数据
-    data.demo03Courses = demo03CourseFormRef.value?.getData();
-    data.demo03Grade = await demo03GradeFormRef.value?.getValues();
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = await demo03GradeFormRef.value?.getValues();
     try {
       await (formData.value?.id
         ? updateDemo03Student(data)
diff --git a/apps/web-antd/src/views/infra/demo/general/demo01/index.vue b/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
index e31598bcd96b2c656810904c8c24700d60669641..955598ff42de9dfb4136191f72efbba892168a1e 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
@@ -7,6 +7,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
   cloneDeep,
   downloadFileFromBlobPart,
@@ -33,8 +34,6 @@ import {
 } from '#/api/infra/demo/demo01';
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -55,7 +54,7 @@ const queryFormRef = ref(); // 搜索的表单
 const exportLoading = ref(false); // 导出的加载中
 
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     const params = cloneDeep(queryParams) as any;
@@ -68,19 +67,19 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1;
   getList();
-};
+}
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Demo01ContactForm,
@@ -214,7 +213,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="示例联系人">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -248,7 +247,7 @@ onMounted(() => {
           >
             批量删除
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -283,7 +282,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="handleEdit(row as any)"
+              @click="handleEdit(row)"
               v-access:code="['infra:demo01-contact:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -293,7 +292,7 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              @click="handleDelete(row as any)"
+              @click="handleDelete(row)"
               v-access:code="['infra:demo01-contact:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue b/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue
index 24e361c53a09dc204138272a4c88c43dfcd59d7c..88939ca47e3f3d0edf39535d763c47eb093f518f 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo01/modules/form.vue
@@ -51,7 +51,7 @@ const getTitle = computed(() => {
 });
 
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     name: undefined,
@@ -61,7 +61,7 @@ const resetForm = () => {
     avatar: undefined,
   };
   formRef.value?.resetFields();
-};
+}
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
diff --git a/apps/web-antd/src/views/infra/demo/general/demo02/index.vue b/apps/web-antd/src/views/infra/demo/general/demo02/index.vue
index 6d03702dcad25563f2d01b05fef2f7b28d17de59..7bd986df917dff4ff5c8e786a9a36006119feb3f 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo02/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo02/index.vue
@@ -5,6 +5,7 @@ import { h, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
   cloneDeep,
   downloadFileFromBlobPart,
@@ -21,8 +22,6 @@ import {
   getDemo02CategoryList,
 } from '#/api/infra/demo/demo02';
 import { ContentWrap } from '#/components/content-wrap';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -40,7 +39,7 @@ const queryFormRef = ref(); // 搜索的表单
 const exportLoading = ref(false); // 导出的加载中
 
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     const params = cloneDeep(queryParams) as any;
@@ -51,18 +50,18 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   getList();
-};
+}
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Demo02CategoryForm,
@@ -171,7 +170,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="示例分类">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -197,7 +196,7 @@ onMounted(() => {
           >
             {{ $t('ui.actionTitle.export') }}
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -225,7 +224,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onAppend(row as any)"
+              @click="onAppend(row)"
               v-access:code="['infra:demo02-category:create']"
             >
               新增下级
@@ -233,7 +232,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onEdit(row as any)"
+              @click="onEdit(row)"
               v-access:code="['infra:demo02-category:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -243,8 +242,8 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              :disabled="!isEmpty(row?.children)"
-              @click="onDelete(row as any)"
+              :disabled="!isEmpty(row.children)"
+              @click="onDelete(row)"
               v-access:code="['infra:demo02-category:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo02/modules/form.vue b/apps/web-antd/src/views/infra/demo/general/demo02/modules/form.vue
index c52528a84aeaf883d5c95eea54957266bc4ed341..4d36264d71d718191b178ff3019272b526fd7ab6 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo02/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo02/modules/form.vue
@@ -38,17 +38,17 @@ const getTitle = computed(() => {
 });
 
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     name: undefined,
     parentId: undefined,
   };
   formRef.value?.resetFields();
-};
+}
 
 /** 获得示例分类树 */
-const getDemo02CategoryTree = async () => {
+async function getDemo02CategoryTree() {
   demo02CategoryTree.value = [];
   const data = await getDemo02CategoryList({});
   data.unshift({
@@ -56,7 +56,7 @@ const getDemo02CategoryTree = async () => {
     name: '顶级示例分类',
   });
   demo02CategoryTree.value = handleTree(data);
-};
+}
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue
index 64146d8cad7a83cb308a7eae13ac203034056a22..1174db953b408edf9e30d85f3605df52d7b7ed91 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue
@@ -7,6 +7,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
   cloneDeep,
   downloadFileFromBlobPart,
@@ -34,8 +35,6 @@ import {
 } from '#/api/infra/demo/demo03/erp';
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -66,7 +65,7 @@ const queryFormRef = ref(); // 搜索的表单
 const exportLoading = ref(false); // 导出的加载中
 
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     const params = cloneDeep(queryParams) as any;
@@ -79,7 +78,7 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -88,10 +87,10 @@ const handleQuery = () => {
 };
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Demo03StudentForm,
@@ -225,7 +224,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="学生">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -259,7 +258,7 @@ onMounted(() => {
           >
             批量删除
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -299,7 +298,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onEdit(row as any)"
+              @click="onEdit(row)"
               v-access:code="['infra:demo03-student:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -309,7 +308,7 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              @click="onDelete(row as any)"
+              @click="onDelete(row)"
               v-access:code="['infra:demo03-student:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
index fbe78fdf95c9591a76658983b72bb2a2ebdb2070..6c4e4342198d3c3e246069e95bc365c430274db1 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
@@ -80,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     studentId: undefined,
@@ -88,7 +88,7 @@ const resetForm = () => {
     score: undefined,
   };
   formRef.value?.resetFields();
-};
+}
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
index 280641422f37530ffc4d861dade0ec346e1d58bd..74359bf252c49e001c5c489193b8c3b4acbbf868 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
@@ -5,6 +5,7 @@ import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
 
 import {
@@ -23,8 +24,6 @@ import {
   getDemo03CoursePage,
 } from '#/api/infra/demo/demo03/erp';
 import { ContentWrap } from '#/components/content-wrap';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -112,18 +111,18 @@ const queryParams = reactive({
 });
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1;
   getList();
-};
+}
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     if (!props.studentId) {
@@ -140,7 +139,7 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -214,7 +213,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="学生">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -238,7 +237,7 @@ onMounted(() => {
           >
             批量删除
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -263,7 +262,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onEdit(row as any)"
+              @click="onEdit(row)"
               v-access:code="['infra:demo03-student:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -273,7 +272,7 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              @click="onDelete(row as any)"
+              @click="onDelete(row)"
               v-access:code="['infra:demo03-student:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
index d8f4103a0d06929d39870d24c28af29ff1f301e8..0080b6fff4c2026c08e6885ad027f7f71e516967 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
@@ -80,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     studentId: undefined,
@@ -88,7 +88,7 @@ const resetForm = () => {
     teacher: undefined,
   };
   formRef.value?.resetFields();
-};
+}
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
index da9fc3156109ffe06f19c438eb4bd75a702c73ee..cf331bfd42874b765cfa1237af5f9853965ee384 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
@@ -5,6 +5,7 @@ import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
 
 import {
@@ -23,8 +24,6 @@ import {
   getDemo03GradePage,
 } from '#/api/infra/demo/demo03/erp';
 import { ContentWrap } from '#/components/content-wrap';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -112,18 +111,18 @@ const queryParams = reactive({
 });
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1;
   getList();
-};
+}
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     if (!props.studentId) {
@@ -140,7 +139,7 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -214,7 +213,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="学生">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -238,7 +237,7 @@ onMounted(() => {
           >
             批量删除
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -263,7 +262,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onEdit(row as any)"
+              @click="onEdit(row)"
               v-access:code="['infra:demo03-student:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -273,7 +272,7 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              @click="onDelete(row as any)"
+              @click="onDelete(row)"
               v-access:code="['infra:demo03-student:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/form.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/form.vue
index 9433f0e963cc3c86d8330adec78f56bb0cef838e..ae7e873b268d3cfd3f6c3bdf9d873eceb56217b5 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/form.vue
@@ -49,7 +49,7 @@ const getTitle = computed(() => {
 });
 
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     name: undefined,
@@ -58,7 +58,7 @@ const resetForm = () => {
     description: undefined,
   };
   formRef.value?.resetFields();
-};
+}
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue
index 7a3fe9222485d249ab51844d6541bab3696ef55f..2bb55cce51a33e7372bc9286aa198c22ea9b7edc 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue
@@ -7,6 +7,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
   cloneDeep,
   downloadFileFromBlobPart,
@@ -34,8 +35,6 @@ import {
 } from '#/api/infra/demo/demo03/normal';
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -62,7 +61,7 @@ const queryFormRef = ref(); // 搜索的表单
 const exportLoading = ref(false); // 导出的加载中
 
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     const params = cloneDeep(queryParams) as any;
@@ -75,19 +74,19 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1;
   getList();
-};
+}
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Demo03StudentForm,
@@ -221,7 +220,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="学生">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -255,7 +254,7 @@ onMounted(() => {
           >
             批量删除
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -303,7 +302,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onEdit(row as any)"
+              @click="onEdit(row)"
               v-access:code="['infra:demo03-student:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -313,7 +312,7 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              @click="onDelete(row as any)"
+              @click="onDelete(row)"
               v-access:code="['infra:demo03-student:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
index 3736a841c7a31f33327c91d561fa3d81b9416d5b..8ad954b63e8688c5eaab0306d610bb958bb20a43 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { VxeTableInstance } from '@vben/plugins/vxe-table';
+
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, ref, watch } from 'vue';
@@ -19,14 +20,14 @@ const props = defineProps<{
 const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
 const tableRef = ref<VxeTableInstance>();
 /** 添加学生课程 */
-const onAdd = async () => {
+async function onAdd() {
   await tableRef.value?.insertAt({} as Demo03StudentApi.Demo03Course, -1);
-};
+}
 
 /** 删除学生课程 */
-const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
+async function onDelete(row: Demo03StudentApi.Demo03Course) {
   await tableRef.value?.remove(row);
-};
+}
 
 /** 提供获取表格数据的方法供父组件调用 */
 defineExpose({
@@ -73,7 +74,7 @@ watch(
           size="small"
           type="link"
           danger
-          @click="onDelete(row as any)"
+          @click="onDelete(row)"
           v-access:code="['infra:demo03-student:delete']"
         >
           {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
index ea163da101ff40d11234c718c7f3bdeb0b1c80f4..79dc77136368d4b09a2193a05276f201435923e5 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 const loading = ref(true); // 列表的加载中
 const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     if (!props.studentId) {
@@ -26,7 +26,7 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
index b790b4e456cbd69e6b5ffb826212bd596d1bde7e..c03fc3ea76e5607a6f49d1579ddfebfbd636902e 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
 const loading = ref(true); // 列表的加载中
 const list = ref<Demo03StudentApi.Demo03Grade[]>([]); // 列表的数据
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     if (!props.studentId) {
@@ -25,7 +25,7 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/form.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/form.vue
index 72faf6407d2bedc9871c404d1c955d8acf6b1631..2527c0f121394df5461dd42a3993c194cfae42b9 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/form.vue
@@ -58,7 +58,7 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
 const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
 
 /** 重置表单 */
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     name: undefined,
@@ -67,7 +67,7 @@ const resetForm = () => {
     description: undefined,
   };
   formRef.value?.resetFields();
-};
+}
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue
index 17cf794245b6dc914b5e184dc13bceb1cc96a850..941f6d32a366b72db50fd5878e83eb533c546734 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue
@@ -7,6 +7,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
   cloneDeep,
   downloadFileFromBlobPart,
@@ -33,8 +34,6 @@ import {
 } from '#/api/infra/demo/demo03/normal';
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
-import { TableToolbar } from '#/components/table-toolbar';
-import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -56,7 +55,7 @@ const queryFormRef = ref(); // 搜索的表单
 const exportLoading = ref(false); // 导出的加载中
 
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true;
   try {
     const params = cloneDeep(queryParams) as any;
@@ -69,19 +68,19 @@ const getList = async () => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1;
   getList();
-};
+}
 
 /** 重置按钮操作 */
-const resetQuery = () => {
+function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
-};
+}
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Demo03StudentForm,
@@ -215,7 +214,7 @@ onMounted(() => {
     <!-- 列表 -->
     <ContentWrap title="学生">
       <template #extra>
-        <TableToolbar
+        <VbenVxeTableToolbar
           ref="tableToolbarRef"
           v-model:hidden-search="hiddenSearchBar"
         >
@@ -249,7 +248,7 @@ onMounted(() => {
           >
             批量删除
           </Button>
-        </TableToolbar>
+        </VbenVxeTableToolbar>
       </template>
       <VxeTable
         ref="tableRef"
@@ -283,7 +282,7 @@ onMounted(() => {
             <Button
               size="small"
               type="link"
-              @click="onEdit(row as any)"
+              @click="onEdit(row)"
               v-access:code="['infra:demo03-student:update']"
             >
               {{ $t('ui.actionTitle.edit') }}
@@ -293,7 +292,7 @@ onMounted(() => {
               type="link"
               danger
               class="ml-2"
-              @click="onDelete(row as any)"
+              @click="onDelete(row)"
               v-access:code="['infra:demo03-student:delete']"
             >
               {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
index 3736a841c7a31f33327c91d561fa3d81b9416d5b..b9366b802fd934eee1ee37322486d797cf0f78d6 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
@@ -19,14 +19,14 @@ const props = defineProps<{
 const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
 const tableRef = ref<VxeTableInstance>();
 /** 添加学生课程 */
-const onAdd = async () => {
+async function onAdd() {
   await tableRef.value?.insertAt({} as Demo03StudentApi.Demo03Course, -1);
-};
+}
 
 /** 删除学生课程 */
-const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
+async function onDelete(row: Demo03StudentApi.Demo03Course) {
   await tableRef.value?.remove(row);
-};
+}
 
 /** 提供获取表格数据的方法供父组件调用 */
 defineExpose({
@@ -73,7 +73,7 @@ watch(
           size="small"
           type="link"
           danger
-          @click="onDelete(row as any)"
+          @click="onDelete(row)"
           v-access:code="['infra:demo03-student:delete']"
         >
           {{ $t('ui.actionTitle.delete') }}
diff --git a/apps/web-ele/src/adapter/style.css b/apps/web-ele/src/adapter/style.css
deleted file mode 100644
index 01368a9285e8eee05c46ed8a05b34733d7164c59..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/adapter/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-/* 来自 @vben/plugins/vxe-table style.css，覆盖 vxe-table 原有的样式定义，使用 vben 的样式主题 */
-: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(--heavy));
-
-  /* --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-font-primary-tinge-color: hsl(var(--primary));
-  --vxe-ui-font-primary-lighten-color: hsl(var(--primary) / 60%);
-  --vxe-ui-font-primary-darken-color: hsl(var(--primary));
-
-  /* height: auto !important; */
-
-  /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
-}
-
-.vxe-tools--operate {
-  margin-right: 0.25rem;
-  margin-left: 0.75rem;
-}
-
-.vxe-table-custom--checkbox-option:hover {
-  background: none !important;
-}
-
-.vxe-toolbar {
-  padding: 0;
-}
-
-.vxe-buttons--wrapper:not(:empty),
-.vxe-tools--operate:not(:empty),
-.vxe-tools--wrapper:not(:empty) {
-  padding: 0.6em 0;
-}
-
-.vxe-tools--operate:not(:has(button)) {
-  margin-left: 0;
-}
diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
index 9c36e196a64148ed4588d00be6829d86bee1881d..c1c838050b96d77fe5a0e5eaaa9f713e28a67097 100644
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -6,7 +6,9 @@ import { h } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 import { $te } from '@vben/locales';
 import {
-  AsyncComponents,
+  AsyncVxeColumn,
+  AsyncVxeTable,
+  createRequiredValidation,
   setupVbenVxeTable,
   useVbenVxeGrid,
 } from '@vben/plugins/vxe-table';
@@ -19,15 +21,13 @@ import {
   isString,
 } from '@vben/utils';
 
-import { ElButton, ElImage, ElPopconfirm, ElSwitch } from 'element-plus';
+import { ElButton, ElImage, ElPopconfirm, ElSwitch, ElTag } from 'element-plus';
 
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
-import '#/adapter/style.css';
-
 setupVbenVxeTable({
   configVxeTable: (vxeUI) => {
     vxeUI.setConfig({
@@ -101,6 +101,35 @@ setupVbenVxeTable({
       },
     });
 
+    // 表格配置项可以用 cellRender: { name: 'CellTag' },
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        return h(ElTag, { color: props?.color }, () => row[column.field]);
+      },
+    });
+
+    vxeUI.renderer.add('CellTags', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        if (!row[column.field] || row[column.field].length === 0) {
+          return '';
+        }
+        return h(
+          'div',
+          { class: 'flex items-center justify-center' },
+          {
+            default: () =>
+              row[column.field].map((item: any) =>
+                h(ElTag, { color: props?.color }, { default: () => item }),
+              ),
+          },
+        );
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} },
     vxeUI.renderer.add('CellDict', {
       renderTableDefault(renderOpts, params) {
@@ -118,6 +147,7 @@ setupVbenVxeTable({
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellSwitch', props: { beforeChange: () => {} } },
+    // add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L97-L123
     vxeUI.renderer.add('CellSwitch', {
       renderTableDefault({ attrs, props }, { column, row }) {
         const loadingKey = `__loading_${column.field}`;
@@ -149,6 +179,7 @@ setupVbenVxeTable({
     });
 
     // 注册表格的操作按钮渲染器 cellRender: { name: 'CellOperation', options: ['edit', 'delete'] }
+    // add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L125-L255
     vxeUI.renderer.add('CellOperation', {
       renderTableDefault({ attrs, options, props }, { column, row }) {
         const defaultProps = {
@@ -278,8 +309,9 @@ setupVbenVxeTable({
       },
     });
 
-    // 添加数量格式化，例如金额
-    // TODO @xingyu：建议金额，和数量分开哈；原因是，有些团队希望金额，单独控制；
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+
     vxeUI.formats.add('formatPast2', {
       tableCellFormatMethod({ cellValue }) {
         return formatPast2(cellValue);
@@ -308,18 +340,10 @@ setupVbenVxeTable({
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export { createRequiredValidation, useVbenVxeGrid };
 
-const [VxeTable, VxeColumn, VxeToolbar] = AsyncComponents;
-export { VxeColumn, VxeTable, VxeToolbar };
+export const [VxeTable, VxeColumn] = [AsyncVxeTable, AsyncVxeColumn];
 
-// 导出操作按钮的回调函数类型
-export type OnActionClickParams<T = Recordable<any>> = {
-  code: string;
-  row: T;
-};
-export type OnActionClickFn<T = Recordable<any>> = (
-  params: OnActionClickParams<T>,
-) => void;
 export * from '#/components/table-action';
+
 export type * from '@vben/plugins/vxe-table';
diff --git a/apps/web-ele/src/components/table-toolbar/index.ts b/apps/web-ele/src/components/table-toolbar/index.ts
deleted file mode 100644
index 720e3224ba00d2cbecf673da357f08f7aa199e82..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/components/table-toolbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TableToolbar } from './table-toolbar.vue';
diff --git a/apps/web-ele/src/components/table-toolbar/table-toolbar.vue b/apps/web-ele/src/components/table-toolbar/table-toolbar.vue
deleted file mode 100644
index f2f02e766e53501ac214e7499d2b77a44771f6e7..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/components/table-toolbar/table-toolbar.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- add by puhui999：vxe table 工具栏二次封装，提供给 vxe 原生列表使用 -->
-<script setup lang="ts">
-import type { VxeToolbarInstance } from '#/adapter/vxe-table';
-
-import { ref } from 'vue';
-
-import { useContentMaximize, useRefresh } from '@vben/hooks';
-import { Expand, MsRefresh, Search, TMinimize } from '@vben/icons';
-
-import { ElButton, ElTooltip } from 'element-plus';
-
-import { VxeToolbar } from '#/adapter/vxe-table';
-
-/** 列表工具栏封装 */
-defineOptions({ name: 'TableToolbar' });
-
-const props = defineProps<{
-  hiddenSearch: boolean;
-}>();
-
-const emits = defineEmits(['update:hiddenSearch']);
-
-const toolbarRef = ref<VxeToolbarInstance>();
-const { toggleMaximizeAndTabbarHidden, contentIsMaximize } =
-  useContentMaximize();
-const { refresh } = useRefresh();
-
-/** 隐藏搜索栏 */
-function onHiddenSearchBar() {
-  emits('update:hiddenSearch', !props.hiddenSearch);
-}
-
-defineExpose({
-  getToolbarRef: () => toolbarRef.value,
-});
-</script>
-
-<template>
-  <VxeToolbar ref="toolbarRef" custom>
-    <template #toolPrefix>
-      <slot></slot>
-      <ElTooltip placement="bottom">
-        <template #content>
-          <div class="max-w-[200px]">搜索</div>
-        </template>
-        <ElButton class="ml-2 font-[8px]" circle @click="onHiddenSearchBar">
-          <Search :size="15" />
-        </ElButton>
-      </ElTooltip>
-      <ElTooltip placement="bottom">
-        <template #content>
-          <div class="max-w-[200px]">刷新</div>
-        </template>
-        <ElButton class="ml-2 font-[8px]" circle @click="refresh">
-          <MsRefresh :size="15" />
-        </ElButton>
-      </ElTooltip>
-      <ElTooltip placement="bottom">
-        <template #content>
-          <div class="max-w-[200px]">
-            {{ contentIsMaximize ? '还原' : '全屏' }}
-          </div>
-        </template>
-        <ElButton
-          class="ml-2 font-[8px]"
-          circle
-          @click="toggleMaximizeAndTabbarHidden"
-        >
-          <Expand v-if="!contentIsMaximize" :size="15" />
-          <TMinimize v-else :size="15" />
-        </ElButton>
-      </ElTooltip>
-    </template>
-  </VxeToolbar>
-</template>
diff --git a/apps/web-ele/src/hooks/index.ts b/apps/web-ele/src/hooks/index.ts
deleted file mode 100644
index 75f01b531e75ab322f1e04a72c64a7cab0d60dd4..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-table-toolbar';
diff --git a/apps/web-ele/src/hooks/use-table-toolbar.ts b/apps/web-ele/src/hooks/use-table-toolbar.ts
deleted file mode 100644
index c35b3a77419bd484e5e9a1b87c177fcc2425c0eb..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/hooks/use-table-toolbar.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { VxeTableInstance, VxeToolbarInstance } from '#/adapter/vxe-table';
-import type { TableToolbar } from '#/components/table-toolbar';
-
-import { ref, watch } from 'vue';
-
-/**
- * vxe 原生工具栏挂载封装
- * 解决每个组件使用 vxe-table 组件时都需要写一遍的问题
- */
-export function useTableToolbar() {
-  const hiddenSearchBar = ref(false); // 隐藏搜索栏
-  const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-  const tableRef = ref<VxeTableInstance>();
-  const isBound = ref<boolean>(false);
-
-  /** 挂载 toolbar 工具栏 */
-  async function bindTableToolbar() {
-    const table = tableRef.value;
-    const tableToolbar = tableToolbarRef.value;
-    if (table && tableToolbar) {
-      // 延迟 1 秒，确保 toolbar 组件已经挂载
-      setTimeout(async () => {
-        const toolbar = tableToolbar.getToolbarRef();
-        if (!toolbar) {
-          console.error('[toolbar 挂载失败] Table toolbar not found');
-        }
-        await table.connect(toolbar as VxeToolbarInstance);
-        isBound.value = true;
-      }, 1000); // 延迟挂载确保 toolbar 正确挂载
-    }
-  }
-
-  watch(
-    () => tableRef.value,
-    async (val) => {
-      if (!val || isBound.value) return;
-      await bindTableToolbar();
-    },
-    { immediate: true },
-  );
-
-  return {
-    hiddenSearchBar,
-    tableToolbarRef,
-    tableRef,
-  };
-}
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 8cc12bef799fb31586c085f9b1775a7f697ec72e..66196d77239fe6c1675a17ac603f652952e7537f 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,13 +1,27 @@
-export { AsyncComponents, setupVbenVxeTable } from './init';
+import { defineAsyncComponent } from 'vue';
+
+export { setupVbenVxeTable } from './init';
+export { default as VbenVxeTableToolbar } from './table-toolbar.vue';
 export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
-
+export { useTableToolbar } from './use-vxe-toolbar';
 export * from './validation';
+
 export type {
   VxeGridListeners,
   VxeGridProps,
   VxeGridPropTypes,
   VxeTableInstance,
-  VxeToolbarInstance,
 } from 'vxe-table';
+
+// 异步导出 vxe-table 相关组件提供给需要单独使用 vxe-table 的场景
+export const AsyncVxeTable = defineAsyncComponent(() =>
+  import('vxe-table').then((mod) => mod.VxeTable),
+);
+export const AsyncVxeColumn = defineAsyncComponent(() =>
+  import('vxe-table').then((mod) => mod.VxeColumn),
+);
+export const AsyncVxeToolbar = defineAsyncComponent(() =>
+  import('vxe-table').then((mod) => mod.VxeToolbar),
+);
diff --git a/packages/effects/plugins/src/vxe-table/init.ts b/packages/effects/plugins/src/vxe-table/init.ts
index 7b4f2a50b6df6f8edbcef1b1b7ac6632a65c84c3..00e9d8abe5b6b302733e04e4e137efbafabd8ca8 100644
--- a/packages/effects/plugins/src/vxe-table/init.ts
+++ b/packages/effects/plugins/src/vxe-table/init.ts
@@ -1,6 +1,6 @@
 import type { SetupVxeTable } from './types';
 
-import { defineAsyncComponent, defineComponent, watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
 
@@ -100,18 +100,6 @@ export function initVxeTable() {
   isInit = true;
 }
 
-// 异步导出 vxe-table 相关组件提供给需要单独使用 vxe-table 的场景
-const AsyncVxeTable = defineAsyncComponent(() =>
-  import('vxe-table').then((mod) => mod.VxeTable),
-);
-const AsyncVxeColumn = defineAsyncComponent(() =>
-  import('vxe-table').then((mod) => mod.VxeColumn),
-);
-const AsyncVxeToolbar = defineAsyncComponent(() =>
-  import('vxe-table').then((mod) => mod.VxeToolbar),
-);
-export const AsyncComponents = [AsyncVxeTable, AsyncVxeColumn, AsyncVxeToolbar];
-
 export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
   const { configVxeTable, useVbenForm } = setupOptions;
 
diff --git a/apps/web-antd/src/components/table-toolbar/table-toolbar.vue b/packages/effects/plugins/src/vxe-table/table-toolbar.vue
similarity index 44%
rename from apps/web-antd/src/components/table-toolbar/table-toolbar.vue
rename to packages/effects/plugins/src/vxe-table/table-toolbar.vue
index 738d5265255257d1f9d41b481171d0a0d7f36083..6e93324940f5545d5b0c6cab547352b9f11ea408 100644
--- a/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
+++ b/packages/effects/plugins/src/vxe-table/table-toolbar.vue
@@ -1,15 +1,14 @@
 <!-- add by puhui999：vxe table 工具栏二次封装，提供给 vxe 原生列表使用 -->
 <script setup lang="ts">
-import type { VxeToolbarInstance } from '#/adapter/vxe-table';
+import type { VxeToolbarInstance } from 'vxe-table';
 
 import { ref } from 'vue';
 
 import { useContentMaximize, useRefresh } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Tooltip } from 'ant-design-vue';
-
-import { VxeToolbar } from '#/adapter/vxe-table';
+import { VxeButton, VxeTooltip } from 'vxe-pc-ui';
+import { VxeToolbar } from 'vxe-table';
 
 /** 列表工具栏封装 */
 defineOptions({ name: 'TableToolbar' });
@@ -39,43 +38,37 @@ defineExpose({
   <VxeToolbar ref="toolbarRef" custom>
     <template #toolPrefix>
       <slot></slot>
-      <Tooltip placement="bottom">
-        <template #title>
-          <div class="max-w-52">搜索</div>
+      <VxeTooltip placement="bottom" content="搜索">
+        <template #default>
+          <VxeButton class="ml-2 font-normal" circle @click="onHiddenSearchBar">
+            <IconifyIcon icon="lucide:search" :size="15" />
+          </VxeButton>
         </template>
-        <Button
-          class="ml-2 font-normal"
-          shape="circle"
-          @click="onHiddenSearchBar"
-        >
-          <IconifyIcon icon="lucide:search" :size="15" />
-        </Button>
-      </Tooltip>
-      <Tooltip placement="bottom">
-        <template #title>
-          <div class="max-w-52">刷新</div>
+      </VxeTooltip>
+      <VxeTooltip
+        placement="bottom"
+        :content="contentIsMaximize ? '还原' : '全屏'"
+      >
+        <template #default>
+          <VxeButton class="ml-2 font-medium" circle @click="refresh">
+            <IconifyIcon icon="lucide:refresh-cw" :size="15" />
+          </VxeButton>
         </template>
-        <Button class="ml-2 font-medium" shape="circle" @click="refresh">
-          <IconifyIcon icon="lucide:refresh-cw" :size="15" />
-        </Button>
-      </Tooltip>
-      <Tooltip placement="bottom">
-        <template #title>
-          <div class="max-w-52">
-            {{ contentIsMaximize ? '还原' : '全屏' }}
-          </div>
+      </VxeTooltip>
+      <VxeTooltip placement="bottom" content="全屏">
+        <template #default>
+          <VxeButton
+            class="ml-2 font-medium"
+            circle
+            @click="toggleMaximizeAndTabbarHidden"
+          >
+            <IconifyIcon
+              :icon="contentIsMaximize ? 'lucide:minimize' : 'lucide:maximize'"
+              :size="15"
+            />
+          </VxeButton>
         </template>
-        <Button
-          class="ml-2 font-medium"
-          shape="circle"
-          @click="toggleMaximizeAndTabbarHidden"
-        >
-          <IconifyIcon
-            :icon="contentIsMaximize ? 'lucide:minimize' : 'lucide:maximize'"
-            :size="15"
-          />
-        </Button>
-      </Tooltip>
+      </VxeTooltip>
     </template>
   </VxeToolbar>
 </template>
diff --git a/apps/web-antd/src/hooks/use-table-toolbar.ts b/packages/effects/plugins/src/vxe-table/use-vxe-toolbar.ts
similarity index 80%
rename from apps/web-antd/src/hooks/use-table-toolbar.ts
rename to packages/effects/plugins/src/vxe-table/use-vxe-toolbar.ts
index c35b3a77419bd484e5e9a1b87c177fcc2425c0eb..773b20f7eb741f7765e222a9be92d1e7ae965c98 100644
--- a/apps/web-antd/src/hooks/use-table-toolbar.ts
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-toolbar.ts
@@ -1,15 +1,16 @@
-import type { VxeTableInstance, VxeToolbarInstance } from '#/adapter/vxe-table';
-import type { TableToolbar } from '#/components/table-toolbar';
+import type { VxeTableInstance, VxeToolbarInstance } from 'vxe-table';
 
 import { ref, watch } from 'vue';
 
+import VbenVxeTableToolbar from './table-toolbar.vue';
+
 /**
  * vxe 原生工具栏挂载封装
  * 解决每个组件使用 vxe-table 组件时都需要写一遍的问题
  */
 export function useTableToolbar() {
   const hiddenSearchBar = ref(false); // 隐藏搜索栏
-  const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
+  const tableToolbarRef = ref<InstanceType<typeof VbenVxeTableToolbar>>();
   const tableRef = ref<VxeTableInstance>();
   const isBound = ref<boolean>(false);
 
@@ -24,7 +25,7 @@ export function useTableToolbar() {
         if (!toolbar) {
           console.error('[toolbar 挂载失败] Table toolbar not found');
         }
-        await table.connect(toolbar as VxeToolbarInstance);
+        await table.connectToolbar(toolbar as VxeToolbarInstance);
         isBound.value = true;
       }, 1000); // 延迟挂载确保 toolbar 正确挂载
     }