feat：【antd】【ele】统一 infra 和 system 的代码风格（demo03/erp）

2025-10-01 10:48:23 +08:00
parent 67b39cfe8a
commit 2e2a147815
38 changed files with 222 additions and 261 deletions
--- 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();
 }

 /** 添加下级分类 */
--- 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();
 }

 /** 编辑示例联系人 */
--- 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>
--- 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),
                },
              },
            ]"
--- 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) {
--- 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),
            },
          },
        ]"
--- 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) {
--- 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),
            },
          },
        ]"
--- 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>
--- 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();
 }

 /** 编辑学生 */
--- 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();
 }

 /** 编辑学生 */
--- 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();
 }

 /** 编辑示例联系人 */
--- 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();
 }

 /** 编辑示例分类 */
--- 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();
 }

 /** 编辑学生 */
--- 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();
 }

 /** 编辑学生 */
--- 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();
 }

 /** 编辑学生 */
--- 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();
 }

 /** 添加下级分类 */
--- 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();
 }

 /** 添加下级菜单 */
--- 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();
 }

 /** 编辑示例联系人 */
--- 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>
--- 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' },
    },
--- 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>
--- 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) {
--- 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'],
--- 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) {
--- 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'],
--- 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>
--- 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);
--- 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);
--- 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);
--- 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!);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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();
 }

 /** 添加下级分类 */
--- 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();
 }

 /** 添加下级菜单 */