refactor：优化 sms 短信的实现

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

@@ -12,6 +12,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'mobile',
       label: '手机号',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入手机号',
+      }
     },
     {
       fieldName: 'channelId',
@@ -22,23 +26,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'signature',
         valueField: 'id',
         allowClear: true,
+        placeholder: '请选择短信渠道',
       },
     },
     {
       fieldName: 'templateId',
       label: '模板编号',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编号',
+      }
     },
     {
       fieldName: 'sendStatus',
       label: '发送状态',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择发送状态',
       },
     },
     {
+      // TODO @芋艿：怎么解决范围检索
       fieldName: 'sendTime',
       label: '发送时间',
       component: 'RangePicker',
@@ -51,11 +62,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '接收状态',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择接收状态',
       },
     },
     {
+      // TODO @芋艿：怎么解决范围检索
       fieldName: 'receiveTime',
       label: '接收时间',
       component: 'RangePicker',

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

@@ -1,22 +1,18 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemSmsLogApi } from '#/api/system/sms/log';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download } from '@vben/icons';
-
 import { Button } from 'ant-design-vue';
+import Form from './modules/form.vue';
 
+import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
-import { $t } from '#/locales';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,

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

@@ -1,17 +1,14 @@
 <script lang="ts" setup>
 import type { SystemSmsLogApi } from '#/api/system/sms/log';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 
+import { ref } from 'vue';
+
 const formData = ref<SystemSmsLogApi.SmsLogVO>();
-const getTitle = computed(() => {
-  return '短信日志详情';
-});
 
 const [Modal, modalApi] = useVbenModal({
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }
@@ -30,8 +27,9 @@ const [Modal, modalApi] = useVbenModal({
 });
 </script>
 
+<!-- TODO @puhui999：https://ant-design.antgroup.com/components/descriptions-cn 参考这个？ -->
 <template>
-  <Modal :title="getTitle">
+  <Modal title="短信日志详情">
     <div class="p-4">
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div class="form-item">
@@ -39,6 +37,7 @@ const [Modal, modalApi] = useVbenModal({
           <div>{{ formData?.id }}</div>
         </div>
         <div class="form-item">
+          <!-- TODO @puhui：格式不对 -->
           <div class="form-label">创建时间：</div>
           <div>{{ formData?.createTime }}</div>
         </div>
@@ -67,6 +66,7 @@ const [Modal, modalApi] = useVbenModal({
 
       <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
         <div class="form-item">
+          <!-- TODO @puhui：格式不对 -->
           <div class="form-label">发送状态：</div>
           <div>{{ formData?.sendStatus }}</div>
         </div>
@@ -83,6 +83,7 @@ const [Modal, modalApi] = useVbenModal({
           <div>{{ formData?.apiSendMsg }}</div>
         </div>
         <div class="form-item">
+          <!-- TODO @puhui：格式不对 -->
           <div class="form-label">接收状态：</div>
           <div>{{ formData?.receiveStatus }}</div>
         </div>
@@ -91,19 +92,19 @@ const [Modal, modalApi] = useVbenModal({
           <div>{{ formData?.receiveTime }}</div>
         </div>
         <div class="form-item">
-          <div class="form-label">API接收编码：</div>
+          <div class="form-label">API 接收编码：</div>
           <div>{{ formData?.apiReceiveCode }}</div>
         </div>
         <div class="form-item">
-          <div class="form-label">API接收消息：</div>
+          <div class="form-label">API 接收消息：</div>
           <div>{{ formData?.apiReceiveMsg }}</div>
         </div>
         <div class="form-item">
-          <div class="form-label">API请求ID：</div>
+          <div class="form-label">API 请求 ID：</div>
           <div>{{ formData?.apiRequestId }}</div>
         </div>
         <div class="form-item">
-          <div class="form-label">API序列号：</div>
+          <div class="form-label">API 序列号：</div>
           <div>{{ formData?.apiSerialNo }}</div>
         </div>
       </div>