refactor：优化 sms 短信的实现

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

@@ -2,6 +2,7 @@ import type { PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+// TODO @puhui999：代码风格的统一
 export namespace SystemMailAccountApi {
   export interface MailAccountVO {
     id: number;

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

@@ -2,6 +2,7 @@ import type { PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+// TODO @puhui999：代码风格的统一
 export namespace SystemMailLogApi {
   export interface MailLogVO {
     id: number;

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

@@ -2,6 +2,7 @@ import type { PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+// TODO @puhui999：代码风格的统一
 export namespace SystemMailTemplateApi {
   export interface MailTemplateVO {
     id: number;

apps/web-antd/src/api/system/sms/channel/index.ts

@@ -1,10 +1,10 @@
-import type { PageResult } from '@vben/request';
+import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
 export namespace SystemSmsChannelApi {
   /** 短信渠道信息 */
-  export interface SmsChannelVO {
+  export interface SmsChannel {
     id?: number;
     code: string;
     status: number;
@@ -18,8 +18,8 @@ export namespace SystemSmsChannelApi {
 }
 
 /** 查询短信渠道列表 */
-export function getSmsChannelPage(params: any) {
+export function getSmsChannelPage(params: PageParam) {
-  return requestClient.get<PageResult<SystemSmsChannelApi.SmsChannelVO>>(
+  return requestClient.get<PageResult<SystemSmsChannelApi.SmsChannel>>(
     '/system/sms-channel/page',
     { params },
   );
@@ -27,25 +27,21 @@ export function getSmsChannelPage(params: any) {
 
 /** 获得短信渠道精简列表 */
 export function getSimpleSmsChannelList() {
-  return requestClient.get<SystemSmsChannelApi.SmsChannelVO[]>(
+  return requestClient.get<SystemSmsChannelApi.SmsChannel[]>('/system/sms-channel/simple-list');
-    '/system/sms-channel/simple-list',
-  );
 }
 
 /** 查询短信渠道详情 */
 export function getSmsChannel(id: number) {
-  return requestClient.get<SystemSmsChannelApi.SmsChannelVO>(
+  return requestClient.get<SystemSmsChannelApi.SmsChannel>(`/system/sms-channel/get?id=${id}`);
-    `/system/sms-channel/get?id=${id}`,
-  );
 }
 
 /** 新增短信渠道 */
-export function createSmsChannel(data: SystemSmsChannelApi.SmsChannelVO) {
+export function createSmsChannel(data: SystemSmsChannelApi.SmsChannel) {
   return requestClient.post('/system/sms-channel/create', data);
 }
 
 /** 修改短信渠道 */
-export function updateSmsChannel(data: SystemSmsChannelApi.SmsChannelVO) {
+export function updateSmsChannel(data: SystemSmsChannelApi.SmsChannel) {
   return requestClient.put('/system/sms-channel/update', data);
 }
 

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

@@ -1,4 +1,4 @@
-import type { PageResult } from '@vben/request';
+import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
@@ -32,11 +32,8 @@ export namespace SystemSmsLogApi {
 }
 
 /** 查询短信日志列表 */
-export function getSmsLogPage(params: any) {
+export function getSmsLogPage(params: PageParam) {
-  return requestClient.get<PageResult<SystemSmsLogApi.SmsLogVO>>(
+  return requestClient.get<PageResult<SystemSmsLogApi.SmsLogVO>>('/system/sms-log/page', { params });
-    '/system/sms-log/page',
-    { params },
-  );
 }
 
 /** 导出短信日志 */

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

@@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
 
 export namespace SystemSmsTemplateApi {
   /** 短信模板信息 */
-  export interface SmsTemplateVO {
+  export interface SmsTemplate {
     id?: number;
     type?: number;
     status: number;
@@ -20,7 +20,7 @@ export namespace SystemSmsTemplateApi {
   }
 
   /** 发送短信请求 */
-  export interface SendSmsReqVO {
+  export interface SmsSendReqVO {
     mobile: string;
     templateCode: string;
     templateParams: Record<string, any>;
@@ -29,7 +29,7 @@ export namespace SystemSmsTemplateApi {
 
 /** 查询短信模板列表 */
 export function getSmsTemplatePage(params: any) {
-  return requestClient.get<PageResult<SystemSmsTemplateApi.SmsTemplateVO>>(
+  return requestClient.get<PageResult<SystemSmsTemplateApi.SmsTemplate>>(
     '/system/sms-template/page',
     { params },
   );
@@ -37,18 +37,16 @@ export function getSmsTemplatePage(params: any) {
 
 /** 查询短信模板详情 */
 export function getSmsTemplate(id: number) {
-  return requestClient.get<SystemSmsTemplateApi.SmsTemplateVO>(
+  return requestClient.get<SystemSmsTemplateApi.SmsTemplate>(`/system/sms-template/get?id=${id}`);
-    `/system/sms-template/get?id=${id}`,
-  );
 }
 
 /** 新增短信模板 */
-export function createSmsTemplate(data: SystemSmsTemplateApi.SmsTemplateVO) {
+export function createSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
   return requestClient.post('/system/sms-template/create', data);
 }
 
 /** 修改短信模板 */
-export function updateSmsTemplate(data: SystemSmsTemplateApi.SmsTemplateVO) {
+export function updateSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
   return requestClient.put('/system/sms-template/update', data);
 }
 
@@ -59,12 +57,10 @@ export function deleteSmsTemplate(id: number) {
 
 /** 导出短信模板 */
 export function exportSmsTemplate(params: any) {
-  return requestClient.download('/system/sms-template/export-excel', {
+  return requestClient.download('/system/sms-template/export-excel', { params });
-    params,
-  });
 }
 
 /** 发送短信 */
-export function sendSms(data: SystemSmsTemplateApi.SendSmsReqVO) {
+export function sendSms(data: SystemSmsTemplateApi.SmsSendReqVO) {
   return requestClient.post('/system/sms-template/send-sms', data);
 }

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

@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

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

@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

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

@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue

@@ -59,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

apps/web-antd/src/views/system/role/modules/assign-menu-form.vue

@@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

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

@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

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 {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  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 =
+    const data = (await formApi.getValues()) as SystemSmsChannelApi.SmsChannel;
-      (await formApi.getValues()) as SystemSmsChannelApi.SmsChannelVO;
     try {
-      await (formData.value?.id
+      await (formData.value?.id ? updateSmsChannel(data) : createSmsChannel(data));
-        ? 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;
     }

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 {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  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>

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

@@ -12,7 +12,6 @@ export function useFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'id',
-      label: 'id',
       component: 'Input',
       dependencies: {
         triggerFields: [''],
@@ -24,8 +23,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信类型',
       component: 'Select',
       componentProps: {
-        class: 'w-full',
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
+        class: 'w-full',
+        placeholder: '请选择短信类型',
       },
       rules: 'required',
     },
@@ -33,12 +33,18 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '模板名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
       rules: 'required',
     },
     {
       fieldName: 'code',
       label: '模板编码',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
       rules: 'required',
     },
     {
@@ -50,6 +56,7 @@ export function useFormSchema(): VbenFormSchema[] {
         class: 'w-full',
         labelField: 'signature',
         valueField: 'id',
+        placeholder: '请选择短信渠道',
       },
       rules: 'required',
     },
@@ -68,17 +75,27 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'content',
       label: '模板内容',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入模板内容',
+      },
       rules: 'required',
     },
     {
       fieldName: 'apiTemplateId',
       label: '短信 API 的模板编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的模板编号',
+      },
+      rules: 'required',
     },
     {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      }
     },
   ];
 }
@@ -91,8 +108,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信类型',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择短信类型',
       },
     },
     {
@@ -100,19 +118,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: 'channelId',
@@ -123,8 +150,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'signature',
         valueField: 'id',
         allowClear: true,
+        placeholder: '请选择短信渠道',
       },
     },
+    // TODO @芋艿：范围检索的处理
     {
       fieldName: 'createTime',
       label: '创建时间',
@@ -143,6 +172,9 @@ export function useSendSmsFormSchema(): VbenFormSchema[] {
       fieldName: 'mobile',
       label: '手机号码',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
       rules: 'required',
     },
     {
@@ -158,7 +190,7 @@ export function useSendSmsFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplateVO>(
+export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplate>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
@@ -228,7 +260,7 @@ export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplateVO>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 300,
+      minWidth: 180,
       align: 'center',
       fixed: 'right',
       cellRender: {

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

@@ -1,27 +1,19 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteSmsTemplate,
-  exportSmsTemplate,
-  getSmsTemplatePage,
-} from '#/api/system/sms/template';
 import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteSmsTemplate, exportSmsTemplate, getSmsTemplatePage } from '#/api/system/sms/template';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
-import SendForm from './modules/send-form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -50,17 +42,17 @@ function onCreate() {
 }
 
 /** 编辑短信模板 */
-function onEdit(row: SystemSmsTemplateApi.SmsTemplateVO) {
+function onEdit(row: SystemSmsTemplateApi.SmsTemplate) {
   formModalApi.setData(row).open();
 }
 
 /** 发送测试短信 */
-function onSend(row: SystemSmsTemplateApi.SmsTemplateVO) {
+function onSend(row: SystemSmsTemplateApi.SmsTemplate) {
   sendModalApi.setData(row).open();
 }
 
 /** 删除短信模板 */
-async function onDelete(row: SystemSmsTemplateApi.SmsTemplateVO) {
+async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -82,16 +74,16 @@ async function onDelete(row: SystemSmsTemplateApi.SmsTemplateVO) {
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<SystemSmsTemplateApi.SmsTemplateVO>) {
+}: OnActionClickParams<SystemSmsTemplateApi.SmsTemplate>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
     case 'sms-send': {
       onSend(row);
       break;
@@ -125,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplateVO>,
+  } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
 });
 </script>
 

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

@@ -1,24 +1,18 @@
 <script lang="ts" setup>
 import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-import {
-  createSmsTemplate,
-  getSmsTemplate,
-  updateSmsTemplate,
-} from '#/api/system/sms/template';
 import { $t } from '#/locales';
+import { computed, ref } from 'vue';
+import { useVbenForm } from '#/adapter/form';
+import { createSmsTemplate, getSmsTemplate, updateSmsTemplate } from '#/api/system/sms/template';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<SystemSmsTemplateApi.SmsTemplateVO>();
+const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
 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({
@@ -40,7 +37,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data =
-      (await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplateVO;
+      (await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplate;
     try {
       await (formData.value?.id
         ? updateSmsTemplate(data)
@@ -56,12 +53,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }
     // 加载数据
-    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplateVO>();
+    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
     if (!data || !data.id) {
       return;
     }

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

@@ -1,24 +1,19 @@
 <script lang="ts" setup>
 import type { SystemSmsTemplateApi } from '#/api/system/sms/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 { sendSms } from '#/api/system/sms/template';
-import { $t } from '#/locales';
 
 import { useSendSmsFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const templateData = ref<SystemSmsTemplateApi.SmsTemplateVO>();
+const templateData = ref<SystemSmsTemplateApi.SmsTemplate>();
-const getTitle = computed(() => {
-  return $t('ui.actionTitle.send', ['短信']);
-});
 
+// TODO @puhui999：貌似发送短信，少了参数展示
 // 动态构建表单
 const buildSchema = () => {
   const schema = useSendSmsFormSchema();
@@ -63,7 +58,7 @@ const [Modal, modalApi] = useVbenModal({
     }
 
     // 构建发送短信请求
-    const data: SystemSmsTemplateApi.SendSmsReqVO = {
+    const data: SystemSmsTemplateApi.SmsSendReqVO = {
       mobile: values.mobile,
       templateCode: templateData.value?.code || '',
       templateParams: paramsObj,
@@ -84,12 +79,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }
     // 获取数据
-    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplateVO>();
+    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
     if (!data) {
       return;
     }
@@ -103,7 +98,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal title="发送短信">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }

apps/web-antd/src/views/system/user/data.ts

@@ -103,17 +103,26 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'username',
       label: '用户名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'mobile',
       label: '手机号码',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请输入用户状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
@@ -124,6 +133,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         allowClear: true,
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];
@@ -150,7 +162,7 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
       minWidth: 120,
     },
     {
-      field: 'deptId',
+      field: 'deptName',
       title: '部门',
       minWidth: 120,
     },
@@ -159,13 +171,18 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
       title: '手机号码',
       minWidth: 120,
     },
+    // TODO @芋艿：switch 的接入
     {
       field: 'status',
       title: '状态',
       minWidth: 100,
+      align: 'center',
       cellRender: {
-        name: 'CellDict',
+        name: 'CellSwitch',
-        props: { type: DICT_TYPE.COMMON_STATUS },
+        props: {
+          activeValue: 0,
+          inactiveValue: 1
+        },
       },
     },
     {
@@ -177,16 +194,28 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 180,
+      minWidth: 160,
-      align: 'center',
       fixed: 'right',
+      align: 'center',
       cellRender: {
         attrs: {
-          nameField: 'username',
+          nameField: 'name',
-          nameTitle: '用户',
+          nameTitle: '角色',
           onClick: onActionClick,
         },
         name: 'CellOperation',
+        options: [
+          'edit', // 默认的编辑按钮
+          'delete', // 默认的删除按钮
+          {
+            code: 'assign-data-permission',
+            text: '数据权限',
+          },
+          {
+            code: 'assign-menu',
+            text: '菜单权限',
+          }
+        ],
       },
     },
   ];

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

@@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock(false);
     }
   },
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
     }