feat：【antd】【pay 支付】pay/app 代码优化 1/4

apps/web-antd/src/api/pay/app/index.ts

@@ -60,7 +60,7 @@ export function updateApp(data: PayAppApi.App) {
 }
 
 /** 修改支付应用状态 */
-export function changeAppStatus(data: PayAppApi.UpdateStatusReq) {
+export function updateAppStatus(data: PayAppApi.UpdateStatusReq) {
   return requestClient.put('/pay/app/update-status', data);
 }
 

apps/web-antd/src/components/upload/input-upload.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @xingyu：这个组件，只有 pay 在用，和现有的 file-upload 和 image-upload 有点不一致。是不是可以考虑移除，只在 pay 那搞个复用的组件；
 import type { InputProps, TextAreaProps } from 'ant-design-vue';
 
 import type { FileUploadProps } from './typing';
@@ -61,8 +60,8 @@ const fileUploadProps = computed(() => {
 <template>
   <Row>
     <Col :span="18">
-      <Input v-if="inputType === 'input'" v-bind="inputProps" />
+      <Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
-      <Textarea v-else :row="4" v-bind="textareaProps" />
+      <Textarea readonly v-else :row="4" v-bind="textareaProps" />
     </Col>
     <Col :span="6">
       <FileUpload

apps/web-antd/src/views/pay/app/data.ts

@@ -2,39 +2,50 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayAppApi } from '#/api/pay/app';
 
+import { h } from 'vue';
+
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
+import { InputUpload } from '#/components/upload';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'name',
       label: '应用名',
+      component: 'Input',
       componentProps: {
         placeholder: '请输入应用名',
+        allowClear: true,
       },
     },
     {
-      component: 'Select',
       fieldName: 'status',
       label: '开启状态',
+      component: 'Select',
       componentProps: {
         placeholder: '请选择开启状态',
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
       },
     },
     {
-      component: 'RangePicker',
       fieldName: 'createTime',
       label: '创建时间',
+      component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始日期', '结束日期'],
+        ...getRangePickerDefaultProps(),
+        clearable: true,
       },
     },
   ];
 }
 
+/** 列表的字段 */
 export function useGridColumns<T = PayAppApi.App>(
   onStatusChange?: (
     newStatus: number,
@@ -42,19 +53,21 @@ export function useGridColumns<T = PayAppApi.App>(
   ) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
   return [
-    { type: 'checkbox', width: 60 },
     {
-      title: '应用标识',
       field: 'appKey',
+      title: '应用标识',
+      minWidth: 40,
     },
     {
-      title: '应用名',
       field: 'name',
+      title: '应用名',
+      minWidth: 40,
     },
     {
       field: 'status',
       title: '状态',
       align: 'center',
+      minWidth: 40,
       cellRender: {
         attrs: { beforeChange: onStatusChange },
         name: 'CellSwitch',
@@ -68,31 +81,32 @@ export function useGridColumns<T = PayAppApi.App>(
       title: '支付宝配置',
       children: [
         {
-          title: 'APP 支付',
+          title: 'APP',
           slots: {
             default: 'alipayAppConfig',
           },
         },
         {
-          title: 'PC 网站支付',
+          title: 'PC 网站',
           slots: {
             default: 'alipayPCConfig',
           },
         },
         {
-          title: 'WAP 网站支付',
+          title: 'WAP 网站',
           slots: {
             default: 'alipayWAPConfig',
           },
+          minWidth: 10,
         },
         {
-          title: '扫码支付',
+          title: '扫码',
           slots: {
             default: 'alipayQrConfig',
           },
         },
         {
-          title: '条码支付',
+          title: '条码',
           slots: {
             default: 'alipayBarConfig',
           },
@@ -103,37 +117,38 @@ export function useGridColumns<T = PayAppApi.App>(
       title: '微信配置',
       children: [
         {
-          title: '小程序支付',
+          title: '小程序',
           slots: {
             default: 'wxLiteConfig',
           },
         },
         {
-          title: 'JSAPI 支付',
+          title: 'JSAPI',
           slots: {
             default: 'wxPubConfig',
           },
         },
         {
-          title: 'APP 支付',
+          title: 'APP',
           slots: {
             default: 'wxAppConfig',
           },
         },
         {
-          title: 'Native 支付',
+          title: 'Native',
           slots: {
             default: 'wxNativeConfig',
           },
         },
         {
-          title: 'WAP 网站支付',
+          title: 'WAP 网站',
           slots: {
             default: 'wxWapConfig',
           },
+          minWidth: 10,
         },
         {
-          title: '条码支付',
+          title: '条码',
           slots: {
             default: 'wxBarConfig',
           },
@@ -156,28 +171,27 @@ export function useGridColumns<T = PayAppApi.App>(
     },
     {
       title: '操作',
-      width: 130,
+      width: 140,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
 
-/** 新增/修改的表单 */
+/** 应用新增/修改的表单 */
-export function useFormSchema(): VbenFormSchema[] {
+export function useAppFormSchema(): VbenFormSchema[] {
   return [
     {
-      label: '应用编号',
       fieldName: 'id',
       component: 'Input',
       dependencies: {
-        show: () => false,
         triggerFields: [''],
+        show: () => false,
       },
     },
     {
-      label: '应用名',
       fieldName: 'name',
+      label: '应用名',
       component: 'Input',
       rules: 'required',
       componentProps: {
@@ -185,8 +199,8 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      label: '应用标识',
       fieldName: 'appKey',
+      label: '应用标识',
       component: 'Input',
       rules: 'required',
       componentProps: {
@@ -194,17 +208,19 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      label: '开启状态',
       fieldName: 'status',
+      label: '开启状态',
       component: 'RadioGroup',
-      rules: 'required',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
       componentProps: {
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
     },
     {
-      label: '支付结果的回调地址',
       fieldName: 'orderNotifyUrl',
+      label: '支付结果的回调地址',
       component: 'Input',
       rules: 'required',
       componentProps: {
@@ -212,26 +228,25 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      label: '退款结果的回调地址',
       fieldName: 'refundNotifyUrl',
+      label: '退款结果的回调地址',
       component: 'Input',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入支付结果的回调地址',
+        placeholder: '请输入退款结果的回调地址',
       },
     },
     {
-      label: '转账结果的回调地址',
       fieldName: 'transferNotifyUrl',
+      label: '转账结果的回调地址',
       component: 'Input',
-      rules: 'required',
       componentProps: {
         placeholder: '请输入转账结果的回调地址',
       },
     },
     {
-      label: '备注',
       fieldName: 'remark',
+      label: '备注',
       component: 'Textarea',
       componentProps: {
         rows: 3,
@@ -240,3 +255,514 @@ export function useFormSchema(): VbenFormSchema[] {
     },
   ];
 }
+
+/** 渠道新增/修改的表单 */
+export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
+  // TODO @AI：id、appId、feeRate、code、备注，这几个整合起来（放最前面）。然后差异化的去 push
+  // TODO @AI：radiogroup 都改成 buttonStyle、optionType
+  if (formType.includes('alipay_')) {
+    return [
+      {
+        component: 'Input',
+        fieldName: 'id',
+        dependencies: {
+          triggerFields: [''],
+          show: () => false,
+        },
+      },
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '开放平台 APPID',
+        fieldName: 'config.appId',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入开放平台 APPID',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '网关地址',
+        fieldName: 'config.serverUrl',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'https://openapi.alipay.com/gateway.do',
+              label: '线上环境',
+            },
+            {
+              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+              label: '沙箱环境',
+            },
+          ],
+        },
+      },
+      {
+        label: '算法类型',
+        fieldName: 'config.signType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'RSA2',
+              label: 'RSA2',
+            },
+          ],
+        },
+        defaultValue: 'RSA2',
+      },
+      {
+        label: '公钥类型',
+        fieldName: 'config.mode',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 1,
+              label: '公钥模式',
+            },
+            {
+              value: 2,
+              label: '证书模式',
+            },
+          ],
+        },
+      },
+      {
+        label: '应用私钥',
+        fieldName: 'config.privateKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入应用私钥',
+          rows: 3,
+        },
+      },
+      {
+        label: '支付宝公钥',
+        fieldName: 'config.alipayPublicKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入支付宝公钥',
+          rows: 3,
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 1;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '商户公钥应用证书',
+        fieldName: 'config.appCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 3, placeholder: '请上传商户公钥应用证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '支付宝公钥证书',
+        fieldName: 'config.alipayPublicCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 3, placeholder: '请上传支付宝公钥证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '根证书',
+        fieldName: 'config.rootCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 3, placeholder: '请上传根证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '接口内容加密方式',
+        fieldName: 'config.encryptType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'NONE',
+              label: '无加密',
+            },
+            {
+              value: 'AES',
+              label: 'AES',
+            },
+          ],
+        },
+        defaultValue: 'NONE',
+      },
+      {
+        label: '接口内容加密密钥',
+        fieldName: 'config.encryptKey',
+        component: 'Input',
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.encryptType === 'AES';
+          },
+          triggerFields: ['config.encryptType', 'encryptType', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('mock') || formType.includes('wallet')) {
+    return [
+      {
+        component: 'Input',
+        fieldName: 'id',
+        dependencies: {
+          triggerFields: [''],
+          show: () => false,
+        },
+      },
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('wx')) {
+    return [
+      {
+        component: 'Input',
+        fieldName: 'id',
+        dependencies: {
+          triggerFields: [''],
+          show: () => false,
+        },
+      },
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '微信 APPID',
+        fieldName: 'config.appId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入微信 APPID',
+        },
+      },
+      {
+        label: '商户号',
+        fieldName: 'config.mchId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户号',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: 'API 版本',
+        fieldName: 'config.apiVersion',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              label: 'v2',
+              value: 'v2',
+            },
+            {
+              label: 'v3',
+              value: 'v3',
+            },
+          ],
+        },
+      },
+      {
+        label: '商户密钥',
+        fieldName: 'config.mchKey',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_cert.p12 证书',
+        fieldName: 'config.keyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传 apiclient_cert.p12 证书',
+          },
+          fileUploadProps: {
+            accept: ['p12'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'API V3 密钥',
+        fieldName: 'config.apiV3Key',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入 API V3 密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_key.pem 证书',
+        fieldName: 'config.privateKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传 apiclient_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '证书序列号',
+        fieldName: 'config.certSerialNo',
+        component: 'Input',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入证书序列号',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'public_key.pem 证书',
+        fieldName: 'config.publicKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传 public_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '公钥 ID',
+        fieldName: 'config.publicKeyId',
+        component: 'Input',
+        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入公钥 ID',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else {
+    return [];
+  }
+}

apps/web-antd/src/views/pay/app/index.vue

@@ -8,52 +8,59 @@ import { CommonStatusEnum, PayChannelEnum } from '@vben/constants';
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app';
+import { deleteApp, getAppPage, updateAppStatus } from '#/api/pay/app';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import appFrom from './modules/app-form.vue';
+import AppForm from './modules/app-form.vue';
-import channelFrom from './modules/channel-form.vue';
+import ChannelForm from './modules/channel-form.vue';
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 const [AppFormModal, appFormModalApi] = useVbenModal({
-  connectedComponent: appFrom,
+  connectedComponent: AppForm,
   destroyOnClose: true,
 });
 
 const [ChannelFormModal, channelFormModalApi] = useVbenModal({
-  connectedComponent: channelFrom,
+  connectedComponent: ChannelForm,
   destroyOnClose: true,
 });
 
+/** 创建应用 */
 function handleCreate() {
   appFormModalApi.setData(null).open();
 }
 
+/** 编辑应用 */
 function handleEdit(row: PayAppApi.App) {
   appFormModalApi.setData({ id: row.id }).open();
 }
 
+/** 创建/编辑渠道 */
+async function handleChannelForm(row: PayAppApi.App, payCode: string) {
+  channelFormModalApi.setData({ appId: row.id, code: payCode }).open();
+}
+
+/** 删除应用 */
 async function handleDelete(row: PayAppApi.App) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
   });
   try {
-    await deleteApp(row.id as number);
+    await deleteApp(row.id!);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    handleRefresh();
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 更新状态 */
+/** 更新应用状态 */
 async function handleStatusChange(
   newStatus: number,
   row: PayAppApi.App,
@@ -65,8 +72,8 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await changeAppStatus({
+        const res = await updateAppStatus({
-          id: row.id as number,
+          id: row.id!,
           status: newStatus,
         });
         if (res) {
@@ -83,21 +90,9 @@ async function handleStatusChange(
   });
 }
 
-/**
+/** 根据渠道编码判断渠道列表中是否存在 */
- * 根据渠道编码判断渠道列表中是否存在
- *
- * @param channels 渠道列表
- * @param channelCode 渠道编码
- */
 function isChannelExists(channels: string[], channelCode: string) {
-  if (!channels) {
+  return channels?.includes(channelCode);
-    return false;
-  }
-  return channels.includes(channelCode);
-}
-
-async function openChannelForm(row: PayAppApi.App, payCode: string) {
-  channelFormModalApi.setData({ id: row.id, payCode }).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -121,6 +116,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -136,10 +132,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
 
-    <AppFormModal @success="onRefresh" />
+    <AppFormModal @success="handleRefresh" />
-    <ChannelFormModal @success="onRefresh" />
+    <ChannelFormModal @success="handleRefresh" />
 
-    <Grid>
+    <Grid table-title="应用列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -177,6 +173,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
+      <!-- TODO @AI：有没办法简化 -->
       <template #alipayAppConfig="{ row }">
         <TableAction
           :actions="[
@@ -194,7 +191,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.ALIPAY_APP.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.ALIPAY_APP.code,
@@ -220,7 +217,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.ALIPAY_PC.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.ALIPAY_PC.code,
@@ -246,7 +243,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.ALIPAY_WAP.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.ALIPAY_WAP.code,
@@ -272,7 +269,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.ALIPAY_QR.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.ALIPAY_QR.code,
@@ -298,7 +295,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.ALIPAY_BAR.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.ALIPAY_BAR.code,
@@ -324,7 +321,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WX_LITE.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WX_LITE.code,
@@ -350,7 +347,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WX_PUB.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WX_PUB.code,
@@ -376,7 +373,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WX_APP.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WX_APP.code,
@@ -402,7 +399,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WX_NATIVE.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WX_NATIVE.code,
@@ -428,7 +425,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WX_WAP.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WX_WAP.code,
@@ -454,7 +451,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WX_BAR.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WX_BAR.code,
@@ -480,7 +477,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.WALLET.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.WALLET.code,
@@ -503,7 +500,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 PayChannelEnum.MOCK.code,
               ),
               shape: 'circle',
-              onClick: openChannelForm.bind(
+              onClick: handleChannelForm.bind(
                 null,
                 row,
                 PayChannelEnum.MOCK.code,

apps/web-antd/src/views/pay/app/modules/app-form.vue

@@ -11,7 +11,7 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { createApp, getApp, updateApp } from '#/api/pay/app';
 
-import { useFormSchema } from '../data';
+import { useAppFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<PayAppApi.App>();
@@ -30,7 +30,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 160,
   },
   layout: 'horizontal',
-  schema: useFormSchema(),
+  schema: useAppFormSchema(),
   showDefaultActions: false,
 });
 
@@ -53,7 +53,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  onOpenChange: async (isOpen) => {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       return;

apps/web-antd/src/views/pay/app/modules/channel-form.vue

@@ -12,11 +12,10 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
 
-import { channelSchema } from './data';
+import { useChannelFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<any>();
-const formType = ref<string>('');
 const title = computed(() => {
   return formData.value?.id === 0
     ? $t('ui.actionTitle.create', '应用')
@@ -44,17 +43,9 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as PayChannelApi.Channel;
-    // 只保留表单中实际存在的字段，且值不为 undefined
+    data.config = JSON.stringify(data.config);
-    const data2 = Object.fromEntries(
-      Object.entries(data).filter(([key, value]) => {
-        // 检查字段是否在表单中存在，且值不为 undefined
-        return key in data && value !== undefined;
-      }),
-    );
-    const data3 = { ...formData.value, ...data2 };
-    data3.config = JSON.stringify(data3.config);
     try {
-      await (data3.id ? updateChannel(data3) : createChannel(data3));
+      await (data.id ? updateChannel(data) : createChannel(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -69,88 +60,69 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const { id, payCode } = modalApi.getData() as {
+    const { appId, code } = modalApi.getData() as {
-      id?: number;
+      appId?: number;
-      payCode?: string;
+      code?: string;
     };
-    if (!id || !payCode) {
+    if (!appId || !code) {
       return;
     }
     modalApi.lock();
-    formType.value = payCode;
+    formData.value = {
-    if (payCode.includes('alipay_')) {
+      appId,
-      formData.value = {
+      code,
-        appId: id,
+      status: CommonStatusEnum.ENABLE,
-        code: payCode,
+      remark: '',
-        status: CommonStatusEnum.ENABLE,
+      feeRate: 0,
-        remark: '',
+      config: {},
-        feeRate: null,
+    };
+    if (code.includes('alipay_')) {
+      formData.value.config = {
+        appId: undefined,
+        serverUrl: undefined,
+        signType: 'RSA2',
+        mode: undefined,
+        privateKey: undefined,
+        alipayPublicKey: undefined,
+        appCertContent: undefined,
+        alipayPublicCertContent: undefined,
+        rootCertContent: undefined,
+        encryptType: undefined,
+        encryptKey: undefined,
+      };
+    } else if (code.includes('mock')) {
+      formData.value.config = {
+        name: 'mock-conf',
+      };
+    } else if (code.includes('wallet')) {
+      formData.value.config = {
         config: {
-          appId: '',
+          name: 'wallet-conf',
-          serverUrl: null,
-          signType: 'RSA2',
-          mode: null,
-          privateKey: '',
-          alipayPublicKey: '',
-          appCertContent: '',
-          alipayPublicCertContent: '',
-          rootCertContent: '',
-          encryptType: '',
-          encryptKey: '',
         },
       };
-    } else if (payCode.includes('mock')) {
+    } else if (code.includes('wx')) {
-      formData.value = {
+      formData.value.config = {
-        appId: id,
+        appId: undefined,
-        code: payCode,
+        mchId: undefined,
-        status: CommonStatusEnum.ENABLE,
+        apiVersion: undefined,
-        remark: '',
+        mchKey: undefined,
-        feeRate: 0,
+        keyContent: undefined,
-        config: {
+        privateKeyContent: undefined,
-          name: 'mock-conf',
+        certSerialNo: undefined,
-        },
+        apiV3Key: undefined,
-      };
+        publicKeyContent: undefined,
-    } else if (payCode.includes('wallet')) {
+        publicKeyId: undefined,
-      formData.value = {
-        appId: id,
-        code: payCode,
-        status: CommonStatusEnum.ENABLE,
-        remark: '',
-        feeRate: 0,
-        config: {
-          name: 'mock-conf',
-        },
-      };
-    } else if (payCode.includes('wx')) {
-      formData.value = {
-        appId: id,
-        code: payCode,
-        status: CommonStatusEnum.ENABLE,
-        feeRate: undefined,
-        remark: '',
-        config: {
-          appId: '',
-          mchId: '',
-          apiVersion: '',
-          mchKey: '',
-          keyContent: '',
-          privateKeyContent: '',
-          certSerialNo: '',
-          apiV3Key: '',
-          publicKeyContent: '',
-          publicKeyId: '',
-        },
       };
     }
 
     try {
-      const res = await getChannel(id, payCode);
+      const res = await getChannel(appId, code);
-      formData.value = {
+      if (res) {
-        ...res,
+        formData.value = {
-        config: {
+          ...res,
-          ...JSON.parse(res.config),
+          config: JSON.parse(res.config),
-        },
+        };
-      };
+      }
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -161,7 +133,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :close-on-click-modal="false" :title="title" class="w-2/5">
+  <Modal :title="title" class="w-2/5">
-    <Form :schema="channelSchema(formType)" />
+    <Form :schema="useChannelFormSchema(formData?.code)" />
   </Modal>
 </template>

apps/web-antd/src/views/pay/app/modules/data.ts

@@ -1,492 +0,0 @@
-import type { VbenFormSchema } from '#/adapter/form';
-
-import { h } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { InputUpload } from '#/components/upload';
-
-export function channelSchema(formType: string): VbenFormSchema[] {
-  if (formType.includes('alipay_')) {
-    return [
-      {
-        label: '应用编号',
-        fieldName: 'appId',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道费率',
-        fieldName: 'feeRate',
-        component: 'InputNumber',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入渠道费率',
-          addonAfter: '%',
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '开放平台 APPID',
-        fieldName: 'config.appId',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入开放平台 APPID',
-        },
-      },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '网关地址',
-        fieldName: 'config.serverUrl',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 'https://openapi.alipay.com/gateway.do',
-              label: '线上环境',
-            },
-            {
-              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
-              label: '沙箱环境',
-            },
-          ],
-        },
-      },
-      {
-        label: '算法类型',
-        fieldName: 'config.signType',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 'RSA2',
-              label: 'RSA2',
-            },
-          ],
-        },
-        defaultValue: 'RSA2',
-      },
-      {
-        label: '公钥类型',
-        fieldName: 'config.mode',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 1,
-              label: '公钥模式',
-            },
-            {
-              value: 2,
-              label: '证书模式',
-            },
-          ],
-        },
-      },
-      {
-        label: '应用私钥',
-        fieldName: 'config.privateKey',
-        component: 'Textarea',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入应用私钥',
-          rows: 8,
-        },
-      },
-      {
-        label: '支付宝公钥',
-        fieldName: 'config.alipayPublicKey',
-        component: 'Textarea',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入支付宝公钥',
-          rows: 8,
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 1;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '商户公钥应用证书',
-        fieldName: 'config.appCertContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
-          fileUploadProps: {
-            accept: ['crt'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 2;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '支付宝公钥证书',
-        fieldName: 'config.alipayPublicCertContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
-          fileUploadProps: {
-            accept: ['crt'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 2;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '根证书',
-        fieldName: 'config.rootCertContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: { rows: 8, placeholder: '请上传根证书' },
-          fileUploadProps: {
-            accept: ['crt'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 2;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '接口内容加密方式',
-        fieldName: 'config.encryptType',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 'NONE',
-              label: '无加密',
-            },
-            {
-              value: 'AES',
-              label: 'AES',
-            },
-          ],
-        },
-        defaultValue: 'NONE',
-      },
-      {
-        label: '接口内容加密密钥',
-        fieldName: 'config.encryptKey',
-        component: 'Input',
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.encryptType === 'AES';
-          },
-          triggerFields: ['config.encryptType', 'encryptType', 'config'],
-        },
-      },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else if (formType.includes('mock') || formType.includes('wallet')) {
-    return [
-      {
-        label: '应用编号',
-        fieldName: 'appId',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '渠道编码',
-        fieldName: 'code',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道费率',
-        fieldName: 'feeRate',
-        component: 'InputNumber',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入渠道费率',
-          addonAfter: '%',
-        },
-        defaultValue: 0,
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else if (formType.includes('wx')) {
-    return [
-      {
-        label: '应用编号',
-        fieldName: 'appId',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道编码',
-        fieldName: 'code',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道费率',
-        fieldName: 'feeRate',
-        component: 'InputNumber',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入渠道费率',
-          addonAfter: '%',
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '微信 APPID',
-        fieldName: 'config.appId',
-        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入微信 APPID',
-        },
-      },
-      {
-        label: '商户号',
-        fieldName: 'config.mchId',
-        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入商户号',
-        },
-      },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
-      {
-        label: 'API 版本',
-        fieldName: 'config.apiVersion',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              label: 'v2',
-              value: 'v2',
-            },
-            {
-              label: 'v3',
-              value: 'v3',
-            },
-          ],
-        },
-      },
-      {
-        label: '商户密钥',
-        fieldName: 'config.mchKey',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入商户密钥',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v2';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'apiclient_cert.p12 证书',
-        fieldName: 'config.keyContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: {
-            rows: 8,
-            placeholder: '请上传 apiclient_cert.p12 证书',
-          },
-          fileUploadProps: {
-            accept: ['p12'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v2';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'API V3 密钥',
-        fieldName: 'config.apiV3Key',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入 API V3 密钥',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'apiclient_key.pem 证书',
-        fieldName: 'config.privateKeyContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: {
-            rows: 8,
-            placeholder: '请上传 apiclient_key.pem 证书',
-          },
-          fileUploadProps: {
-            accept: ['pem'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '证书序列号',
-        fieldName: 'config.certSerialNo',
-        component: 'Input',
-        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入证书序列号',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'public_key.pem 证书',
-        fieldName: 'config.publicKeyContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: {
-            rows: 8,
-            placeholder: '请上传 public_key.pem 证书',
-          },
-          fileUploadProps: {
-            accept: ['pem'],
-          },
-        }),
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '公钥 ID',
-        fieldName: 'config.publicKeyId',
-        component: 'Input',
-        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入公钥 ID',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else {
-    return [];
-  }
-}

apps/web-ele/src/components/upload/input-upload.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @xingyu：这个组件，只有 pay 在用，和现有的 file-upload 和 image-upload 有点不一致。是不是可以考虑移除，只在 pay 那搞个复用的组件；
 import type { InputProps } from 'element-plus';
 
 import type { FileUploadProps } from './typing';