refactor：优化 mail 邮箱的实现

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',
-      title: '模板名称',
+      field: 'code',
+      title: '模板编码',
       minWidth: 120,
     },
     {
-      field: 'code',
-      title: '模板编码',
+      field: 'name',
+      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',
-            text: '发送邮件',
+            code: 'send',
+            text: '测试',
           },
         ],
       },