feat：【antd】【ai】image/manager 的代码优化

2025-10-26 18:14:08 +08:00
parent 3d4aeb77b5
commit 60e199abf0
4 changed files with 62 additions and 38 deletions
--- a/apps/web-antd/src/views/ai/image/manager/data.ts
+++ b/apps/web-antd/src/views/ai/image/manager/data.ts
@@ -26,6 +26,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
        api: getSimpleUserList,
        labelField: 'nickname',
        valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
      },
    },
    {
@@ -33,6 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '平台',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择平台',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
      },
@@ -42,6 +45,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '绘画状态',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择绘画状态',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.AI_IMAGE_STATUS, 'number'),
      },
@@ -51,8 +55,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '是否发布',
      component: 'Select',
      componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
        allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
      },
    },
    {
@@ -68,7 +73,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
@@ -118,7 +128,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      minWidth: 100,
      title: '是否发布',
-      slots: { default: 'publicStatus' },
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
    },
    {
      field: 'prompt',
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -3,9 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiImageApi } from '#/api/ai/image';

 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiImageStatusEnum } from '@vben/constants';

-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
@@ -26,36 +25,43 @@ async function handleDelete(row: AiImageApi.Image) {
  });
  try {
    await deleteImage(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
    hideLoading();
  }
 }
 /** 修改是否发布 */
-async function handleUpdatePublicStatusChange(row: AiImageApi.Image) {
-  try {
-    // 修改状态的二次确认
-    const text = row.publicStatus ? '公开' : '私有';
-    await confirm(`确认要"${text}"该图片吗?`).then(async () => {
-      await updateImage({
-        id: row.id,
-        publicStatus: row.publicStatus,
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiImageApi.Image,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该图片切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新图片状态
+        await updateImage({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
      });
-      handleRefresh();
-    });
-  } catch {
-    row.publicStatus = !row.publicStatus;
-  }
+  });
 }
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleUpdatePublicStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@@ -71,6 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -86,13 +93,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
      <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
    </template>
    <Grid table-title="绘画管理列表">
-      <template #publicStatus="{ row }">
-        <Switch
-          v-model:checked="row.publicStatus"
-          @change="handleUpdatePublicStatusChange(row)"
-          :disabled="row.status !== AiImageStatusEnum.SUCCESS"
-        />
-      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
--- a/apps/web-antd/src/views/ai/music/manager/data.ts
+++ b/apps/web-antd/src/views/ai/music/manager/data.ts
@@ -23,18 +23,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
        api: getSimpleUserList,
        labelField: 'nickname',
        valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
      },
    },
    {
      fieldName: 'title',
      label: '音乐名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入音乐名称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
      label: '绘画状态',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择绘画状态',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.AI_MUSIC_STATUS, 'number'),
      },
@@ -44,6 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '生成模式',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择生成模式',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.AI_GENERATE_MODE, 'number'),
      },
@@ -62,8 +70,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '是否发布',
      component: 'Select',
      componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
        allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
      },
    },
  ];
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -144,14 +144,10 @@ async function handleStatusChange(
    })
      .then(async () => {
        // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
      })
      .catch(() => {
        reject(new Error('取消操作'));