refactor：优化 mail 邮箱的实现

apps/web-antd/src/api/system/mail/account/index.ts

@@ -3,8 +3,8 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace SystemMailAccountApi {
-  /** 邮箱信息 */
+  /** 邮箱账号 */
-  export interface MailAccount {
+  export interface SystemMailAccount {
     id: number;
     mail: string;
     username: string;
@@ -18,10 +18,10 @@ export namespace SystemMailAccountApi {
     remark: string;
   }
 }
-
+// TODO @puhui999：改成 function 风格；不用 await
 /** 查询邮箱账号列表 */
 export const getMailAccountPage = async (params: PageParam) => {
-  return await requestClient.get<PageResult<SystemMailAccountApi.MailAccount>>(
+  return await requestClient.get<PageResult<SystemMailAccountApi.SystemMailAccount>>(
     '/system/mail-account/page',
     { params },
   );
@@ -29,51 +29,25 @@ export const getMailAccountPage = async (params: PageParam) => {
 
 /** 查询邮箱账号详情 */
 export const getMailAccount = async (id: number) => {
-  return await requestClient.get<SystemMailAccountApi.MailAccount>(
+  return await requestClient.get<SystemMailAccountApi.SystemMailAccount>(`/system/mail-account/get?id=${id}`);
-    '/system/mail-account/get',
-    {
-      params: { id },
-    },
-  );
 };
 
 /** 新增邮箱账号 */
-export const createMailAccount = async (
+export const createMailAccount = async (data: SystemMailAccountApi.SystemMailAccount) => {
-  data: SystemMailAccountApi.MailAccount,
+  return await requestClient.post<SystemMailAccountApi.SystemMailAccount>('/system/mail-account/create', data);
-) => {
-  return await requestClient.post<SystemMailAccountApi.MailAccount>(
-    '/system/mail-account/create',
-    data,
-  );
 };
 
 /** 修改邮箱账号 */
-export const updateMailAccount = async (
+export const updateMailAccount = async (data: SystemMailAccountApi.SystemMailAccount) => {
-  data: SystemMailAccountApi.MailAccount,
+  return await requestClient.put<SystemMailAccountApi.SystemMailAccount>('/system/mail-account/update', data);
-) => {
-  return await requestClient.put<SystemMailAccountApi.MailAccount>(
-    '/system/mail-account/update',
-    data,
-  );
 };
 
 /** 删除邮箱账号 */
 export const deleteMailAccount = async (id: number) => {
-  return await requestClient.delete<boolean>('/system/mail-account/delete', {
+  return await requestClient.delete<boolean>(`/system/mail-account/delete?id=${id}`);
-    params: { id },
-  });
 };
 
 /** 获得邮箱账号精简列表 */
 export const getSimpleMailAccountList = async () => {
-  return await requestClient.get<SystemMailAccountApi.MailAccount[]>(
+  return await requestClient.get<SystemMailAccountApi.SystemMailAccount[]>('/system/mail-account/simple-list');
-    '/system/mail-account/simple-list',
-  );
-};
-
-/** 测试邮箱连接 */
-export const testMailAccount = async (id: number) => {
-  return await requestClient.post<boolean>('/system/mail-account/test', null, {
-    params: { id },
-  });
 };

apps/web-antd/src/api/system/mail/log/index.ts

@@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
 
 export namespace SystemMailLogApi {
   /** 邮件日志 */
-  export interface MailLog {
+  export interface SystemMailLog {
     id: number;
     userId: number;
     userType: number;
@@ -24,35 +24,21 @@ export namespace SystemMailLogApi {
     createTime: string;
   }
 }
-
+// TODO @puhui999：改成 function 风格；不用 await
 /** 查询邮件日志列表 */
 export const getMailLogPage = async (params: PageParam) => {
-  return await requestClient.get<PageResult<SystemMailLogApi.MailLog>>(
+  return await requestClient.get<PageResult<SystemMailLogApi.SystemMailLog>>(
     '/system/mail-log/page',
-    { params },
+    { params }
   );
 };
 
 /** 查询邮件日志详情 */
 export const getMailLog = async (id: number) => {
-  return await requestClient.get<SystemMailLogApi.MailLog>(
+  return await requestClient.get<SystemMailLogApi.SystemMailLog>(`/system/mail-log/get?${id}`);
-    '/system/mail-log/get',
-    {
-      params: { id },
-    },
-  );
 };
 
 /** 重新发送邮件 */
 export const resendMail = async (id: number) => {
-  return await requestClient.put<boolean>('/system/mail-log/resend', null, {
+  return await requestClient.put<boolean>(`/system/mail-log/resend?id=${id}`);
-    params: { id },
-  });
-};
-
-/** 批量删除邮件日志 */
-export const deleteMailLogs = async (ids: number[]) => {
-  return await requestClient.delete<boolean>('/system/mail-log/delete', {
-    data: { ids },
-  });
 };

apps/web-antd/src/api/system/mail/template/index.ts

@@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
 
 export namespace SystemMailTemplateApi {
   /** 邮件模版信息 */
-  export interface MailTemplate {
+  export interface SystemMailTemplate {
     id: number;
     name: string;
     code: string;
@@ -19,61 +19,42 @@ export namespace SystemMailTemplateApi {
   }
 
   /** 邮件发送信息 */
-  export interface MailSendReq {
+  export interface MailSendReqVO {
     mail: string;
     templateCode: string;
     templateParams: Record<string, any>;
   }
 }
-
+// TODO @puhui999：改成 function 风格；不用 await
 /** 查询邮件模版列表 */
 export const getMailTemplatePage = async (params: PageParam) => {
-  return await requestClient.get<
+  return await requestClient.get<PageResult<SystemMailTemplateApi.SystemMailTemplate>>(
-    PageResult<SystemMailTemplateApi.MailTemplate>
+    '/system/mail-template/page',
-  >('/system/mail-template/page', { params });
+    { params }
+  );
 };
 
 /** 查询邮件模版详情 */
 export const getMailTemplate = async (id: number) => {
-  return await requestClient.get<SystemMailTemplateApi.MailTemplate>(
+  return await requestClient.get<SystemMailTemplateApi.SystemMailTemplate>(`/system/mail-template/get?id=${id}`);
-    '/system/mail-template/get',
-    {
-      params: { id },
-    },
-  );
 };
 
 /** 新增邮件模版 */
-export const createMailTemplate = async (
+export const createMailTemplate = async (data: SystemMailTemplateApi.SystemMailTemplate) => {
-  data: SystemMailTemplateApi.MailTemplate,
+  return await requestClient.post<SystemMailTemplateApi.SystemMailTemplate>('/system/mail-template/create', data);
-) => {
-  return await requestClient.post<SystemMailTemplateApi.MailTemplate>(
-    '/system/mail-template/create',
-    data,
-  );
 };
 
 /** 修改邮件模版 */
-export const updateMailTemplate = async (
+export const updateMailTemplate = async (data: SystemMailTemplateApi.SystemMailTemplate) => {
-  data: SystemMailTemplateApi.MailTemplate,
+  return await requestClient.put<SystemMailTemplateApi.SystemMailTemplate>('/system/mail-template/update', data);
-) => {
-  return await requestClient.put<SystemMailTemplateApi.MailTemplate>(
-    '/system/mail-template/update',
-    data,
-  );
 };
 
 /** 删除邮件模版 */
 export const deleteMailTemplate = async (id: number) => {
-  return await requestClient.delete<boolean>('/system/mail-template/delete', {
+  return await requestClient.delete<boolean>(`/system/mail-template/delete?id=${id}`);
-    params: { id },
-  });
 };
 
 /** 发送邮件 */
-export const sendMail = async (data: SystemMailTemplateApi.MailSendReq) => {
+export const sendMail = async (data: SystemMailTemplateApi.MailSendReqVO) => {
-  return await requestClient.post<boolean>(
+  return await requestClient.post<boolean>('/system/mail-template/send-mail', data);
-    '/system/mail-template/send-mail',
-    data,
-  );
 };

apps/web-antd/src/views/system/mail/account/data.ts

@@ -21,24 +21,36 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'mail',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
       rules: 'required',
     },
     {
       fieldName: 'username',
       label: '用户名',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
       rules: 'required',
     },
     {
       fieldName: 'password',
       label: '密码',
       component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
       rules: 'required',
     },
     {
       fieldName: 'host',
       label: 'SMTP 服务器域名',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入 SMTP 服务器域名',
+      },
       rules: 'required',
     },
     {
@@ -46,6 +58,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: 'SMTP 服务器端口',
       component: 'InputNumber',
       componentProps: {
+        placeholder: '请输入 SMTP 服务器端口',
         min: 0,
         max: 65_535,
       },
@@ -77,6 +90,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      }
     },
   ];
 }
@@ -88,25 +104,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'mail',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+        clearable: true,
+      }
     },
     {
       fieldName: 'username',
       label: '用户名',
       component: 'Input',
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
       componentProps: {
-        allowClear: true,
+        placeholder: '请输入用户名',
-      },
+        clearable: true,
-    },
+      }
+    }
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
+export function useGridColumns<T = SystemMailAccountApi.SystemMailAccount>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
@@ -118,12 +134,12 @@ export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
     {
       field: 'mail',
       title: '邮箱',
-      minWidth: 120,
+      minWidth: 160,
     },
     {
       field: 'username',
       title: '用户名',
-      minWidth: 120,
+      minWidth: 160,
     },
     {
       field: 'host',
@@ -133,7 +149,7 @@ export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
     {
       field: 'port',
       title: 'SMTP 服务器端口',
-      minWidth: 120,
+      minWidth: 130,
     },
     {
       field: 'sslEnable',
@@ -147,17 +163,12 @@ export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
     {
       field: 'starttlsEnable',
       title: '是否开启 STARTTLS',
-      minWidth: 120,
+      minWidth: 145,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
       },
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 120,
-    },
     {
       field: 'createTime',
       title: '创建时间',
@@ -167,7 +178,7 @@ export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 220,
+      minWidth: 130,
       align: 'center',
       fixed: 'right',
       cellRender: {
@@ -176,15 +187,7 @@ export function useGridColumns<T = SystemMailAccountApi.MailAccount>(
           nameTitle: '邮箱账号',
           onClick: onActionClick,
         },
-        name: 'CellOperation',
+        name: 'CellOperation'
-        options: [
-          'edit', // 默认的编辑按钮
-          'delete', // 默认的删除按钮
-          {
-            code: 'test',
-            text: '测试连接',
-          },
-        ],
       },
     },
   ];

apps/web-antd/src/views/system/mail/account/index.vue

@@ -1,25 +1,17 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemMailAccountApi } from '#/api/system/mail/account';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
+import Form from './modules/form.vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteMailAccount,
-  getMailAccountPage,
-  testMailAccount,
-} from '#/api/system/mail/account';
 import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMailAccount, getMailAccountPage } from '#/api/system/mail/account';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -37,30 +29,12 @@ function onCreate() {
 }
 
 /** 编辑邮箱账号 */
-function onEdit(row: SystemMailAccountApi.MailAccount) {
+function onEdit(row: SystemMailAccountApi.SystemMailAccount) {
   formModalApi.setData(row).open();
 }
 
-/** 测试邮箱连接 */
-async function onTest(row: SystemMailAccountApi.MailAccount) {
-  const hideLoading = message.loading({
-    content: '正在测试邮箱连接...',
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await testMailAccount(row.id as number);
-    message.success({
-      content: '邮箱连接测试成功',
-      key: 'action_process_msg',
-    });
-  } finally {
-    hideLoading();
-  }
-}
-
 /** 删除邮箱账号 */
-async function onDelete(row: SystemMailAccountApi.MailAccount) {
+async function onDelete(row: SystemMailAccountApi.SystemMailAccount) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.mail]),
     duration: 0,
@@ -82,7 +56,7 @@ async function onDelete(row: SystemMailAccountApi.MailAccount) {
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<SystemMailAccountApi.MailAccount>) {
+}: OnActionClickParams<SystemMailAccountApi.SystemMailAccount>) {
   switch (code) {
     case 'delete': {
       onDelete(row);
@@ -92,10 +66,6 @@ function onActionClick({
       onEdit(row);
       break;
     }
-    case 'test': {
-      onTest(row);
-      break;
-    }
   }
 }
 
@@ -125,7 +95,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
+  } as VxeTableGridOptions<SystemMailAccountApi.SystemMailAccount>,
 });
 </script>
 <template>

apps/web-antd/src/views/system/mail/account/modules/form.vue

@@ -1,24 +1,18 @@
 <script lang="ts" setup>
 import type { SystemMailAccountApi } from '#/api/system/mail/account';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import {
-  createMailAccount,
-  getMailAccount,
-  updateMailAccount,
-} from '#/api/system/mail/account';
 import { $t } from '#/locales';
+import { computed, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+import { createMailAccount, getMailAccount, updateMailAccount,} from '#/api/system/mail/account';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<SystemMailAccountApi.MailAccount>();
+const formData = ref<SystemMailAccountApi.SystemMailAccount>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['邮箱账号'])
@@ -29,6 +23,9 @@ const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
+  commonConfig: {
+    labelWidth: 140
+  }
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -39,12 +36,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const data = (await formApi.getValues()) as SystemMailAccountApi.SystemMailAccount;
-      (await formApi.getValues()) as SystemMailAccountApi.MailAccount;
     try {
-      await (formData.value?.id
+      await (formData.value?.id ? updateMailAccount(data) : createMailAccount(data));
-        ? updateMailAccount(data)
-        : createMailAccount(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -61,7 +55,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<SystemMailAccountApi.MailAccount>();
+    const data = modalApi.getData<SystemMailAccountApi.SystemMailAccount>();
     if (!data || !data.id) {
       return;
     }

apps/web-antd/src/views/system/mail/log/data.ts

@@ -8,36 +8,6 @@ import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
-    {
-      fieldName: 'toMail',
-      label: '收件邮箱',
-      component: 'Input',
-    },
-    {
-      fieldName: 'accountId',
-      label: '邮箱账号',
-      component: 'ApiSelect',
-      componentProps: {
-        api: async () => await getSimpleMailAccountList(),
-        labelField: 'mail',
-        valueField: 'id',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'templateId',
-      label: '模板编号',
-      component: 'Input',
-    },
-    {
-      fieldName: 'sendStatus',
-      label: '发送状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: getDictOptions(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, 'number'),
-      },
-    },
     {
       fieldName: 'sendTime',
       label: '发送时间',
@@ -50,21 +20,57 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'userId',
       label: '用户编号',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      }
     },
     {
       fieldName: 'userType',
       label: '用户类型',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
       },
     },
+    {
+      fieldName: 'sendStatus',
+      label: '发送状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择发送状态',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => await getSimpleMailAccountList(),
+        labelField: 'mail',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择邮箱账号',
+      },
+    },
+    {
+      fieldName: 'templateId',
+      label: '模板编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编号',
+      }
+    },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = SystemMailLogApi.MailLog>(
+export function useGridColumns<T = SystemMailLogApi.SystemMailLog>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
@@ -74,20 +80,15 @@ export function useGridColumns<T = SystemMailLogApi.MailLog>(
       minWidth: 100,
     },
     {
-      field: 'createTime',
+      field: 'sendTime',
-      title: '创建时间',
+      title: '发送时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'toMail',
       title: '收件邮箱',
-      minWidth: 120,
+      minWidth: 160,
-    },
-    {
-      field: 'fromMail',
-      title: '发送邮箱',
-      minWidth: 120,
     },
     {
       field: 'templateTitle',
@@ -99,6 +100,11 @@ export function useGridColumns<T = SystemMailLogApi.MailLog>(
       title: '邮件内容',
       minWidth: 300,
     },
+    {
+      field: 'fromMail',
+      title: '发送邮箱',
+      minWidth: 120,
+    },
     {
       field: 'sendStatus',
       title: '发送状态',
@@ -108,40 +114,15 @@ export function useGridColumns<T = SystemMailLogApi.MailLog>(
         props: { type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS },
       },
     },
-    {
-      field: 'sendTime',
-      title: '发送时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'templateId',
-      title: '模板编号',
-      minWidth: 100,
-    },
     {
       field: 'templateCode',
       title: '模板编码',
       minWidth: 120,
     },
-    {
-      field: 'userId',
-      title: '用户编号',
-      minWidth: 100,
-    },
-    {
-      field: 'userType',
-      title: '用户类型',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.USER_TYPE },
-      },
-    },
     {
       field: 'operation',
       title: '操作',
-      minWidth: 120,
+      minWidth: 80,
       align: 'center',
       fixed: 'right',
       cellRender: {
@@ -155,11 +136,7 @@ export function useGridColumns<T = SystemMailLogApi.MailLog>(
           {
             code: 'view',
             text: '查看',
-          },
+          }
-          {
-            code: 'resend',
-            text: '重发',
-          },
         ],
       },
     },

apps/web-antd/src/views/system/mail/log/index.vue

@@ -1,19 +1,14 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemMailLogApi } from '#/api/system/mail/log';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-
+import Form from './modules/form.vue';
-import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getMailLogPage, resendMail } from '#/api/system/mail/log';
+import { getMailLogPage } from '#/api/system/mail/log';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -25,40 +20,17 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 查看邮件日志详情 */
+/** 查看邮件日志 */
-function onView(row: SystemMailLogApi.MailLog) {
+function onView(row: SystemMailLogApi.SystemMailLog) {
   formModalApi.setData(row).open();
 }
 
-/** 重新发送邮件 */
-async function onResend(row: SystemMailLogApi.MailLog) {
-  const hideLoading = message.loading({
-    content: '重新发送邮件中...',
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await resendMail(row.id as number);
-    message.success({
-      content: '重新发送邮件成功',
-      key: 'action_process_msg',
-    });
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<SystemMailLogApi.MailLog>) {
+}: OnActionClickParams<SystemMailLogApi.SystemMailLog>) {
   switch (code) {
-    case 'resend': {
-      onResend(row);
-      break;
-    }
     case 'view': {
       onView(row);
       break;
@@ -92,7 +64,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<SystemMailLogApi.MailLog>,
+  } as VxeTableGridOptions<SystemMailLogApi.SystemMailLog>,
 });
 </script>
 <template>

apps/web-antd/src/views/system/mail/log/modules/form.vue

@@ -4,14 +4,11 @@ import type { SystemMailLogApi } from '#/api/system/mail/log';
 import { useVbenModal } from '@vben/common-ui';
 import { Descriptions, Tag } from 'ant-design-vue';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
 import { DICT_TYPE, getDictLabel } from '#/utils/dict';
 
-const formData = ref<SystemMailLogApi.MailLog>();
+const formData = ref<SystemMailLogApi.SystemMailLog>();
-const getTitle = computed(() => {
-  return '邮件日志详情';
-});
 
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
@@ -19,7 +16,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<SystemMailLogApi.MailLog>();
+    const data = modalApi.getData<SystemMailLogApi.SystemMailLog>();
     if (!data || !data.id) {
       return;
     }
@@ -34,7 +31,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal title="邮件日志详情" class="w-1/2">
     <div class="p-4">
       <Descriptions :column="2" bordered>
         <Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
@@ -68,12 +65,7 @@ const [Modal, modalApi] = useVbenModal({
         <Descriptions.Item label="发送状态">
           <!-- TODO @芋艿: 数据字典-->
           <Tag color="processing">
-            {{
+            {{ getDictLabel(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, formData?.sendStatus ) }}
-              getDictLabel(
-                DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-                formData?.sendStatus,
-              )
-            }}
           </Tag>
         </Descriptions.Item>
         <Descriptions.Item label="发送时间">

apps/web-antd/src/views/system/mail/template/data.ts

@@ -23,12 +23,18 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '模板名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
       rules: 'required',
     },
     {
       fieldName: 'code',
       label: '模板编码',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
       rules: 'required',
     },
     {
@@ -40,6 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
         class: 'w-full',
         labelField: 'mail',
         valueField: 'id',
+        placeholder: '请选择邮箱账号',
       },
       rules: 'required',
     },
@@ -47,11 +54,17 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'nickname',
       label: '发送人名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入发送人名称',
+      }
     },
     {
       fieldName: 'title',
       label: '模板标题',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板标题',
+      },
       rules: 'required',
     },
     {
@@ -59,6 +72,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '模板内容',
       component: 'Textarea',
       componentProps: {
+        placeholder: '请输入模板内容',
         height: 300,
       },
       rules: 'required',
@@ -78,10 +92,45 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      }
     },
   ];
 }
 
+/** 发送邮件表单 */
+export function useSendMailFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'mail',
+      label: '收件邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱地址'),
+    }
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -90,19 +139,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '开启状态',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择开启状态',
       },
     },
     {
       fieldName: 'code',
       label: '模板编码',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      }
     },
     {
       fieldName: 'name',
       label: '模板名称',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      }
     },
     {
       fieldName: 'accountId',
@@ -113,6 +171,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'mail',
         valueField: 'id',
         allowClear: true,
+        placeholder: '请选择邮箱账号',
       },
     },
     {
@@ -126,37 +185,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 发送邮件表单 */
-export function useSendMailFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'content',
-      label: '模板内容',
-      component: 'Textarea',
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      fieldName: 'mail',
-      label: '收件邮箱',
-      component: 'Input',
-      rules: 'required',
-    },
-    {
-      fieldName: 'templateParams',
-      label: '模板参数',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-  ];
-}
-
 /** 列表的字段 */
-export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
+export function useGridColumns<T = SystemMailTemplateApi.SystemMailTemplate>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
@@ -166,13 +196,13 @@ export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
       minWidth: 100,
     },
     {
-      field: 'name',
+      field: 'code',
-      title: '模板名称',
+      title: '模板编码',
       minWidth: 120,
     },
     {
-      field: 'code',
+      field: 'name',
-      title: '模板编码',
+      title: '模板名称',
       minWidth: 120,
     },
     {
@@ -180,6 +210,7 @@ export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
       title: '模板标题',
       minWidth: 120,
     },
+    // TODO @puhui999：这里差一个翻译
     {
       field: 'accountId',
       title: '邮箱账号',
@@ -199,11 +230,6 @@ export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 120,
-    },
     {
       field: 'createTime',
       title: '创建时间',
@@ -213,7 +239,7 @@ export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 300,
+      minWidth: 150,
       align: 'center',
       fixed: 'right',
       cellRender: {
@@ -227,8 +253,8 @@ export function useGridColumns<T = SystemMailTemplateApi.MailTemplate>(
           'edit', // 默认的编辑按钮
           'delete', // 默认的删除按钮
           {
-            code: 'mail-send',
+            code: 'send',
-            text: '发送邮件',
+            text: '测试',
           },
         ],
       },

apps/web-antd/src/views/system/mail/template/index.vue

@@ -1,26 +1,19 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteMailTemplate,
-  getMailTemplatePage,
-} from '#/api/system/mail/template';
-import { $t } from '#/locales';
-
-import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 import SendForm from './modules/send-form.vue';
 
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMailTemplate, getMailTemplatePage } from '#/api/system/mail/template';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -42,17 +35,17 @@ function onCreate() {
 }
 
 /** 编辑邮件模板 */
-function onEdit(row: SystemMailTemplateApi.MailTemplate) {
+function onEdit(row: SystemMailTemplateApi.SystemMailTemplate) {
   formModalApi.setData(row).open();
 }
 
 /** 发送测试邮件 */
-function onSend(row: SystemMailTemplateApi.MailTemplate) {
+function onSend(row: SystemMailTemplateApi.SystemMailTemplate) {
   sendModalApi.setData(row).open();
 }
 
 /** 删除邮件模板 */
-async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
+async function onDelete(row: SystemMailTemplateApi.SystemMailTemplate) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -74,17 +67,17 @@ async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<SystemMailTemplateApi.MailTemplate>) {
+}: OnActionClickParams<SystemMailTemplateApi.SystemMailTemplate>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
-    case 'mail-send': {
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'send': {
       onSend(row);
       break;
     }
@@ -117,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
+  } as VxeTableGridOptions<SystemMailTemplateApi.SystemMailTemplate>,
 });
 </script>
 <template>

apps/web-antd/src/views/system/mail/template/modules/form.vue

@@ -2,21 +2,17 @@
 import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 
 import { useVbenModal } from '@vben/common-ui';
-import { message } from 'ant-design-vue';
 
 import { $t } from '#/locales';
+import { message } from 'ant-design-vue';
 import { computed, ref } from 'vue';
 import { useVbenForm } from '#/adapter/form';
-import {
+import { createMailTemplate, getMailTemplate, updateMailTemplate} from '#/api/system/mail/template';
-  createMailTemplate,
-  getMailTemplate,
-  updateMailTemplate,
-} from '#/api/system/mail/template';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<SystemMailTemplateApi.MailTemplate>();
+const formData = ref<SystemMailTemplateApi.SystemMailTemplate>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['邮件模板'])
@@ -37,12 +33,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const data = (await formApi.getValues()) as SystemMailTemplateApi.SystemMailTemplate;
-      (await formApi.getValues()) as SystemMailTemplateApi.MailTemplate;
     try {
-      await (formData.value?.id
+      await (formData.value?.id ? updateMailTemplate(data) : createMailTemplate(data));
-        ? updateMailTemplate(data)
-        : createMailTemplate(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -59,7 +52,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<SystemMailTemplateApi.MailTemplate>();
+    const data = modalApi.getData<SystemMailTemplateApi.SystemMailTemplate>();
     if (!data || !data.id) {
       return;
     }

apps/web-antd/src/views/system/mail/template/modules/send-form.vue

@@ -1,46 +1,20 @@
 <script lang="ts" setup>
 import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 
+import { ref } from 'vue';
 import { message } from 'ant-design-vue';
-
 import { useVbenForm } from '#/adapter/form';
 import { sendMail } from '#/api/system/mail/template';
-import { $t } from '#/locales';
 
 import { useSendMailFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const templateData = ref<SystemMailTemplateApi.MailTemplate>();
+const formData = ref<SystemMailTemplateApi.SystemMailTemplate>();
-const getTitle = computed(() => {
-  return $t('ui.actionTitle.send', ['邮件']);
-});
-
-// 动态构建表单
-const buildSchema = () => {
-  const schema = useSendMailFormSchema();
-
-  // 添加参数字段
-  if (templateData.value?.params && templateData.value.params.length > 0) {
-    templateData.value.params?.forEach((param) => {
-      schema.push({
-        component: 'Input',
-        fieldName: `param_${param}`,
-        label: `参数 ${param}`,
-        rules: 'required',
-      });
-    });
-  }
-
-  return schema;
-};
 
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
-  schema: buildSchema(),
   showDefaultActions: false,
 });
 
@@ -51,24 +25,21 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 获取表单数据
+    // 构建发送邮件请求
     const values = await formApi.getValues();
-
-    // 提取参数
     const paramsObj: Record<string, string> = {};
-    if (templateData.value?.params) {
+    if (formData.value?.params) {
-      templateData.value.params.forEach((param) => {
+      formData.value.params.forEach((param: string) => {
         paramsObj[param] = values[`param_${param}`];
       });
     }
-
+    const data: SystemMailTemplateApi.MailSendReqVO = {
-    // 构建发送邮件请求
-    const data: SystemMailTemplateApi.MailSendReq = {
       mail: values.mail,
-      templateCode: templateData.value?.code || '',
+      templateCode: formData.value?.code || '',
       templateParams: paramsObj,
     };
 
+    // 提交表单
     try {
       await sendMail(data);
       // 关闭并提示
@@ -89,26 +60,43 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 获取数据
-    const data = modalApi.getData<SystemMailTemplateApi.MailTemplate>();
+    const data = modalApi.getData<SystemMailTemplateApi.SystemMailTemplate>();
     if (!data) {
       return;
     }
-
+    formData.value = data;
-    templateData.value = data;
+    // 更新 form schema
-    // 更新表单结构
+    const schema = buildFormSchema();
-    const schema = buildSchema();
     formApi.setState({ schema });
-
+    // 设置到 values
-    // 设置表单初始值，包括模板内容
     await formApi.setValues({
       content: data.content,
     });
   },
 });
+
+/** 动态构建表单 schema */
+const buildFormSchema = () => {
+  const schema = useSendMailFormSchema();
+  if (formData.value?.params?.length > 0) {
+    formData.value.params?.forEach((param: string) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+        rules: 'required',
+      });
+    });
+  }
+  return schema;
+};
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal title="测试发送邮件">
     <Form class="mx-4" />
   </Modal>
 </template>