From 2e2a14781554a7082e3bf6844b127d3f2df0599f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 1 Oct 2025 10:48:23 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90ele?=
 =?UTF-8?q?=E3=80=91=E7=BB=9F=E4=B8=80=20infra=20=E5=92=8C=20system=20?=
 =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC=EF=BC=88demo03/er?=
 =?UTF-8?q?p=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/crm/product/category/index.vue  |   2 +-
 .../src/views/infra/demo/demo01/index.vue     |   2 +-
 .../views/infra/demo/demo01/modules/form.vue  |  21 ++--
 .../src/views/infra/demo/demo03/erp/index.vue | 106 +++++++++---------
 .../demo03/erp/modules/demo03-course-form.vue |   2 -
 .../demo03/erp/modules/demo03-course-list.vue |  77 +++++++------
 .../demo03/erp/modules/demo03-grade-form.vue  |   2 -
 .../demo03/erp/modules/demo03-grade-list.vue  |  75 ++++++-------
 .../infra/demo/demo03/erp/modules/form.vue    |  21 ++--
 .../views/infra/demo/demo03/inner/index.vue   |   2 +-
 .../views/infra/demo/demo03/normal/index.vue  |   2 +-
 .../views/infra/demo/general/demo01/index.vue |   2 +-
 .../views/infra/demo/general/demo02/index.vue |   2 +-
 .../infra/demo/general/demo03/erp/index.vue   |   2 +-
 .../infra/demo/general/demo03/inner/index.vue |   2 +-
 .../demo/general/demo03/normal/index.vue      |   2 +-
 .../src/views/mall/product/category/index.vue |   2 +-
 apps/web-antd/src/views/system/menu/index.vue |   2 +-
 .../src/views/infra/demo/demo01/index.vue     |   2 +-
 .../views/infra/demo/demo01/modules/form.vue  |  21 ++--
 .../src/views/infra/demo/demo03/erp/data.ts   |   6 +-
 .../src/views/infra/demo/demo03/erp/index.vue |  30 +++--
 .../demo03/erp/modules/demo03-course-form.vue |   2 -
 .../demo03/erp/modules/demo03-course-list.vue |  19 ++--
 .../demo03/erp/modules/demo03-grade-form.vue  |   2 -
 .../demo03/erp/modules/demo03-grade-list.vue  |  19 ++--
 .../infra/demo/demo03/erp/modules/form.vue    |  21 ++--
 .../views/infra/demo/demo03/inner/index.vue   |   4 +-
 .../views/infra/demo/demo03/normal/index.vue  |   4 +-
 .../views/infra/demo/general/demo01/index.vue |   4 +-
 .../views/infra/demo/general/demo02/index.vue |   3 +-
 .../infra/demo/general/demo03/erp/index.vue   |   4 +-
 .../demo03/erp/modules/demo03-course-list.vue |   2 -
 .../demo03/erp/modules/demo03-grade-list.vue  |   2 -
 .../infra/demo/general/demo03/inner/index.vue |   4 +-
 .../demo/general/demo03/normal/index.vue      |   4 +-
 .../src/views/mall/product/category/index.vue |   2 +-
 apps/web-ele/src/views/system/menu/index.vue  |   2 +-
 38 files changed, 222 insertions(+), 261 deletions(-)

diff --git a/apps/web-antd/src/views/crm/product/category/index.vue b/apps/web-antd/src/views/crm/product/category/index.vue
index 6506d0ce..1a5c780e 100644
--- a/apps/web-antd/src/views/crm/product/category/index.vue
+++ b/apps/web-antd/src/views/crm/product/category/index.vue
@@ -37,7 +37,7 @@ function handleRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */
diff --git a/apps/web-antd/src/views/infra/demo/demo01/index.vue b/apps/web-antd/src/views/infra/demo/demo01/index.vue
index 843fe203..eaaa44b8 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/index.vue
@@ -39,7 +39,7 @@ async function handleExport() {
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
diff --git a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
index 35a36074..e430bf2b 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data) {
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo01Contact(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo01Contact(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
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 af78d1fd..610f11cc 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
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, Trash2 } from '@vben/icons';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { Button, message, Tabs } from 'ant-design-vue';
+import { message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,48 +33,53 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
-function onCreate() {
-  formModalApi.setData({}).open();
+function handleCreate() {
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
-function onEdit(row: Demo03StudentApi.Demo03Student) {
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生 */
-async function onDelete(row: Demo03StudentApi.Demo03Student) {
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03Student(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -85,17 +89,11 @@ const checkedIds = ref<number[]>([]);
 function handleRowCheckboxChange({
   records,
 }: {
-  records: Demo03StudentApi.Demo03Grade[];
+  records: Demo03StudentApi.Demo03Student[];
 }) {
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -139,39 +137,37 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <div>
       <Grid table-title="学生列表">
         <template #toolbar-tools>
-          <Button
-            :icon="h(Plus)"
-            type="primary"
-            @click="onCreate"
-            v-access:code="['infra:demo03-student:create']"
-          >
-            {{ $t('ui.actionTitle.create', ['学生']) }}
-          </Button>
-          <Button
-            :icon="h(Download)"
-            type="primary"
-            class="ml-2"
-            @click="onExport"
-            v-access:code="['infra:demo03-student:export']"
-          >
-            {{ $t('ui.actionTitle.export') }}
-          </Button>
-          <Button
-            :icon="h(Trash2)"
-            type="primary"
-            danger
-            class="ml-2"
-            :disabled="isEmpty(checkedIds)"
-            @click="onDeleteBatch"
-            v-access:code="['infra:demo03-student:delete']"
-          >
-            批量删除
-          </Button>
+          <TableAction
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['学生']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['infra:demo03-student:create'],
+                onClick: handleCreate,
+              },
+              {
+                label: $t('ui.actionTitle.export'),
+                type: 'primary',
+                icon: ACTION_ICON.DOWNLOAD,
+                auth: ['infra:demo03-student:export'],
+                onClick: handleExport,
+              },
+              {
+                label: $t('ui.actionTitle.deleteBatch'),
+                type: 'primary',
+                danger: true,
+                icon: ACTION_ICON.DELETE,
+                disabled: isEmpty(checkedIds),
+                auth: ['infra:demo03-student:delete'],
+                onClick: handleDeleteBatch,
+              },
+            ]"
+          />
         </template>
         <template #actions="{ row }">
           <TableAction
@@ -181,17 +177,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 type: 'link',
                 icon: ACTION_ICON.EDIT,
                 auth: ['infra:demo03-student:update'],
-                onClick: onEdit.bind(null, row),
+                onClick: handleEdit.bind(null, row),
               },
               {
                 label: $t('common.delete'),
-                danger: true,
                 type: 'link',
+                danger: true,
                 icon: ACTION_ICON.DELETE,
                 auth: ['infra:demo03-student:delete'],
                 popConfirm: {
                   title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-                  confirm: onDelete.bind(null, row),
+                  confirm: handleDelete.bind(null, row),
                 },
               },
             ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
index d35cae25..c9431259 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
     if (!data) {
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 9735027c..7f42c143 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
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { Plus, Trash2 } from '@vben/icons';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,7 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 创建学生课程 */
-function onCreate() {
+function handleCreate() {
   if (!props.studentId) {
     message.warning('请先选择一个学生!');
     return;
@@ -43,38 +42,37 @@ function onCreate() {
 }
 
 /** 编辑学生课程 */
-function onEdit(row: Demo03StudentApi.Demo03Course) {
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生课程 */
-async function onDelete(row: Demo03StudentApi.Demo03Course) {
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03Course(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生课程 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -130,9 +128,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function handleRefresh() {
   await gridApi.query();
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -142,35 +140,36 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生课程列表">
     <template #toolbar-tools>
-      <Button
-        :icon="h(Plus)"
-        type="primary"
-        @click="onCreate"
-        v-access:code="['infra:demo03-student:create']"
-      >
-        {{ $t('ui.actionTitle.create', ['学生课程']) }}
-      </Button>
-      <Button
-        :icon="h(Trash2)"
-        type="primary"
-        danger
-        class="ml-2"
-        :disabled="isEmpty(checkedIds)"
-        @click="onDeleteBatch"
-        v-access:code="['infra:demo03-student:delete']"
-      >
-        批量删除
-      </Button>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生课程']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'primary',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
     </template>
     <template #actions="{ row }">
       <TableAction
@@ -180,17 +179,17 @@ watch(
             type: 'link',
             icon: ACTION_ICON.EDIT,
             auth: ['infra:demo03-student:update'],
-            onClick: onEdit.bind(null, row),
+            onClick: handleEdit.bind(null, row),
           },
           {
             label: $t('common.delete'),
-            danger: true,
             type: 'link',
+            danger: true,
             icon: ACTION_ICON.DELETE,
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
index ba1df748..18d39ad0 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
     if (!data) {
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 44809280..beee7497 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
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { Plus, Trash2 } from '@vben/icons';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,7 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 创建学生班级 */
-function onCreate() {
+function handleCreate() {
   if (!props.studentId) {
     message.warning('请先选择一个学生!');
     return;
@@ -43,38 +42,37 @@ function onCreate() {
 }
 
 /** 编辑学生班级 */
-function onEdit(row: Demo03StudentApi.Demo03Grade) {
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生班级 */
-async function onDelete(row: Demo03StudentApi.Demo03Grade) {
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03Grade(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生班级 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    await onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -130,9 +128,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function handleRefresh() {
   await gridApi.query();
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -142,35 +140,36 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生班级列表">
     <template #toolbar-tools>
-      <Button
-        :icon="h(Plus)"
-        type="primary"
-        @click="onCreate"
-        v-access:code="['infra:demo03-student:create']"
-      >
-        {{ $t('ui.actionTitle.create', ['学生班级']) }}
-      </Button>
-      <Button
-        :icon="h(Trash2)"
-        type="primary"
-        danger
-        class="ml-2"
-        :disabled="isEmpty(checkedIds)"
-        @click="onDeleteBatch"
-        v-access:code="['infra:demo03-student:delete']"
-      >
-        批量删除
-      </Button>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生班级']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'primary',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
     </template>
     <template #actions="{ row }">
       <TableAction
@@ -180,7 +179,7 @@ watch(
             type: 'link',
             icon: ACTION_ICON.EDIT,
             auth: ['infra:demo03-student:update'],
-            onClick: onEdit.bind(null, row),
+            onClick: handleEdit.bind(null, row),
           },
           {
             label: $t('common.delete'),
@@ -190,7 +189,7 @@ watch(
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
index 3c83ff97..bf4c20f1 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
-    if (!data) {
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo03Student(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo03Student(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
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 e9abbcef..b40fd560 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
@@ -39,7 +39,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
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 b357182e..d211d84b 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
@@ -34,7 +34,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
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 3e64dff2..3fdf3626 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
@@ -87,7 +87,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
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 73e60a3e..66f0c656 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
@@ -69,7 +69,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例分类 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */
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 b710ab16..e56560fe 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
@@ -98,7 +98,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
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 a9bd5d86..5730fb8d 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
@@ -94,7 +94,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
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 8c820469..bfb61ca4 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
@@ -88,7 +88,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
diff --git a/apps/web-antd/src/views/mall/product/category/index.vue b/apps/web-antd/src/views/mall/product/category/index.vue
index 0cb77cf3..6e375dc1 100644
--- a/apps/web-antd/src/views/mall/product/category/index.vue
+++ b/apps/web-antd/src/views/mall/product/category/index.vue
@@ -28,7 +28,7 @@ function onRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index c0757b8b..6bf0af42 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -29,7 +29,7 @@ function handleRefresh() {
 
 /** 创建菜单 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级菜单 */
diff --git a/apps/web-ele/src/views/infra/demo/demo01/index.vue b/apps/web-ele/src/views/infra/demo/demo01/index.vue
index ba62259a..4b5455ab 100644
--- a/apps/web-ele/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo01/index.vue
@@ -39,7 +39,7 @@ async function handleExport() {
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
diff --git a/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue b/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue
index 943b9769..548aac24 100644
--- a/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data) {
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo01Contact(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo01Contact(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts b/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts
index 168b073e..b5f0e625 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts
@@ -143,7 +143,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -258,7 +258,7 @@ export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentA
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -373,7 +373,7 @@ export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentAp
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
index 7a5145c7..043dd98c 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
@@ -33,13 +33,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -51,12 +57,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -64,15 +69,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 
 /** 批量删除学生 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -87,12 +92,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -136,8 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <div>
       <Grid table-title="学生列表">
         <template #toolbar-tools>
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
index 91ec7d32..dfb34f1e 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
     if (!data) {
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
index dcbd37e8..076e33a5 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -50,12 +50,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Course) {
 async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Course(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +62,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Course) {
 
 /** 批量删除学生课程 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -127,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.query();
 }
 
@@ -139,20 +138,20 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生课程列表">
     <template #toolbar-tools>
       <TableAction
         :actions="[
           {
-            label: $t('ui.actionTitle.create', ['学生']),
+            label: $t('ui.actionTitle.create', ['学生课程']),
             type: 'primary',
             icon: ACTION_ICON.ADD,
             auth: ['infra:demo03-student:create'],
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
index db67f321..0b41e208 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
     if (!data) {
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
index 20150b1e..c4b42faf 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -50,12 +50,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Grade) {
 async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Grade(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +62,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
 
 /** 批量删除学生班级 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -127,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.query();
 }
 
@@ -139,20 +138,20 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生班级列表">
     <template #toolbar-tools>
       <TableAction
         :actions="[
           {
-            label: $t('ui.actionTitle.create', ['学生']),
+            label: $t('ui.actionTitle.create', ['学生班级']),
             type: 'primary',
             icon: ACTION_ICON.ADD,
             auth: ['infra:demo03-student:create'],
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue
index ae0572c6..e56102da 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
-    if (!data) {
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo03Student(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo03Student(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue b/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
index 3c9f8901..196d7189 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
@@ -38,7 +38,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -50,7 +50,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -65,7 +64,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue b/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
index efcc5265..f0bb4dd0 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
@@ -33,7 +33,7 @@ function onRefresh() {
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -45,7 +45,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -60,7 +59,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo01/index.vue b/apps/web-ele/src/views/infra/demo/general/demo01/index.vue
index 0d5ec8e7..0da2e0ab 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo01/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo01/index.vue
@@ -89,7 +89,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
@@ -101,7 +101,6 @@ function handleEdit(row: Demo01ContactApi.Demo01Contact) {
 async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo01Contact(row.id!);
@@ -116,7 +115,6 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo01ContactList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo02/index.vue b/apps/web-ele/src/views/infra/demo/general/demo02/index.vue
index 91fa6585..500cbe2d 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo02/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo02/index.vue
@@ -76,7 +76,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */
@@ -93,7 +93,6 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
 async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo02Category(row.id!);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue
index fe866a87..9c62a60f 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue
@@ -101,7 +101,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -113,7 +113,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -128,7 +127,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
index ab904275..32abd384 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
@@ -56,7 +56,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Course) {
 async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Course(row.id!);
@@ -71,7 +70,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Course) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
index d17590a5..adc374d1 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
@@ -56,7 +56,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Grade) {
 async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Grade(row.id!);
@@ -71,7 +70,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue
index a67d840e..7fca75c7 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue
@@ -97,7 +97,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -109,7 +109,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -124,7 +123,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue
index 3357be9f..38244937 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue
@@ -90,7 +90,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -102,7 +102,6 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03Student(row.id!);
@@ -117,7 +116,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/mall/product/category/index.vue b/apps/web-ele/src/views/mall/product/category/index.vue
index 60ead357..61ca0691 100644
--- a/apps/web-ele/src/views/mall/product/category/index.vue
+++ b/apps/web-ele/src/views/mall/product/category/index.vue
@@ -28,7 +28,7 @@ function onRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */
diff --git a/apps/web-ele/src/views/system/menu/index.vue b/apps/web-ele/src/views/system/menu/index.vue
index defe9144..783bc74d 100644
--- a/apps/web-ele/src/views/system/menu/index.vue
+++ b/apps/web-ele/src/views/system/menu/index.vue
@@ -29,7 +29,7 @@ function handleRefresh() {
 
 /** 创建菜单 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级菜单 */