refactor：优化 sms 短信的实现

apps/web-antd/src/views/system/sms/channel/data.ts

@@ -11,7 +11,6 @@ export function useFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'id',
-      label: 'id',
       component: 'Input',
       dependencies: {
         triggerFields: [''],
@@ -22,6 +21,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'signature',
       label: '短信签名',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信签名',
+      },
       rules: 'required',
     },
     {
@@ -29,8 +31,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '渠道编码',
       component: 'Select',
       componentProps: {
-        class: 'w-full',
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
+        class: 'w-full',
+        placeholder: '请选择短信渠道',
       },
       rules: 'required',
     },
@@ -49,22 +52,34 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      }
     },
     {
       fieldName: 'apiKey',
       label: '短信 API 的账号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的账号',
+      },
       rules: 'required',
     },
     {
       fieldName: 'apiSecret',
       label: '短信 API 的密钥',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的密钥',
+      }
     },
     {
       fieldName: 'callbackUrl',
       label: '短信发送回调 URL',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信发送回调 URL',
+      }
     },
   ];
 }
@@ -76,6 +91,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'signature',
       label: '短信签名',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入短信签名',
+      }
     },
     {
       fieldName: 'code',
@@ -84,6 +103,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
+        placeholder: '请选择短信渠道',
       },
     },
     {
@@ -96,6 +116,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       },
     },
     {
+      // TODO @芋艿：怎么解决范围检索
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
@@ -107,7 +128,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = SystemSmsChannelApi.SmsChannelVO>(
+export function useGridColumns<T = SystemSmsChannelApi.SmsChannel>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [

apps/web-antd/src/views/system/sms/channel/index.vue

@@ -1,26 +1,18 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
+import { Download, Plus } from '@vben/icons';
+import Form from './modules/form.vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteSmsChannel,
-  exportSmsChannel,
-  getSmsChannelPage,
-} from '#/api/system/sms/channel';
 import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSmsChannelPage, deleteSmsChannel, exportSmsChannel } from '#/api/system/sms/channel';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -44,12 +36,12 @@ function onCreate() {
 }
 
 /** 编辑短信渠道 */
-function onEdit(row: SystemSmsChannelApi.SmsChannelVO) {
+function onEdit(row: SystemSmsChannelApi.SmsChannel) {
   formModalApi.setData(row).open();
 }
 
 /** 删除短信渠道 */
-async function onDelete(row: SystemSmsChannelApi.SmsChannelVO) {
+async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.signature]),
     duration: 0,
@@ -71,16 +63,16 @@ async function onDelete(row: SystemSmsChannelApi.SmsChannelVO) {
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<SystemSmsChannelApi.SmsChannelVO>) {
+}: OnActionClickParams<SystemSmsChannelApi.SmsChannel>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
   }
 }
 
@@ -110,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannelVO>,
+  } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
 });
 </script>
 

apps/web-antd/src/views/system/sms/channel/modules/form.vue

@@ -1,24 +1,18 @@
 <script lang="ts" setup>
 import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-import {
-  createSmsChannel,
-  getSmsChannel,
-  updateSmsChannel,
-} from '#/api/system/sms/channel';
 import { $t } from '#/locales';
+import { computed, ref } from 'vue';
+import { useVbenForm } from '#/adapter/form';
+import { getSmsChannel, createSmsChannel, updateSmsChannel } from '#/api/system/sms/channel';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<SystemSmsChannelApi.SmsChannelVO>();
+const formData = ref<SystemSmsChannelApi.SmsChannel>();
 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: 120
+  }
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -39,12 +36,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
-      (await formApi.getValues()) as SystemSmsChannelApi.SmsChannelVO;
+    const data = (await formApi.getValues()) as SystemSmsChannelApi.SmsChannel;
     try {
-      await (formData.value?.id
-        ? updateSmsChannel(data)
-        : createSmsChannel(data));
+      await (formData.value?.id ? updateSmsChannel(data) : createSmsChannel(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -56,12 +50,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }
     // 加载数据
-    const data = modalApi.getData<SystemSmsChannelApi.SmsChannelVO>();
+    const data = modalApi.getData<SystemSmsChannelApi.SmsChannel>();
     if (!data || !data.id) {
       return;
     }