From e6e0621c20df8925bd72efcbabfc05edd2ed99ba Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 5 Oct 2025 18:56:39 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90pay?=
 =?UTF-8?q?=20=E6=94=AF=E4=BB=98=E3=80=91pay/app=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=202/4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/pay/app/data.ts   | 274 ++++++------------
 apps/web-antd/src/views/pay/app/index.vue | 330 +++-------------------
 2 files changed, 132 insertions(+), 472 deletions(-)

diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index 6f4f8c29a..451faa62b 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -258,38 +258,61 @@ export function useAppFormSchema(): VbenFormSchema[] {
 
 /** 渠道新增/修改的表单 */
 export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
-  // TODO @AI：id、appId、feeRate、code、备注，这几个整合起来（放最前面）。然后差异化的去 push
-  // TODO @AI：radiogroup 都改成 buttonStyle、optionType
+  const schema: VbenFormSchema[] = [];
+  // 添加通用字段
+  schema.push(
+    {
+      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: '渠道状态',
+      fieldName: 'status',
+      component: 'RadioGroup',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+  );
+  // 根据类型添加特定字段
   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,
-      },
+    schema.push(
       {
         label: '开放平台 APPID',
         fieldName: 'config.appId',
@@ -299,16 +322,6 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入开放平台 APPID',
         },
       },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
       {
         label: '网关地址',
         fieldName: 'config.serverUrl',
@@ -325,6 +338,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: '沙箱环境',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
       },
       {
@@ -339,6 +354,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: 'RSA2',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
         defaultValue: 'RSA2',
       },
@@ -358,6 +375,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: '证书模式',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
       },
       {
@@ -380,7 +399,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           rows: 3,
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 1;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -398,7 +417,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 2;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -416,7 +435,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 2;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -434,7 +453,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 2;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -456,6 +475,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: 'AES',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
         defaultValue: 'NONE',
       },
@@ -465,122 +486,15 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         component: 'Input',
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             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,
-      },
+    );
+  } else if (formType.includes('wx_')) {
+    schema.push(
       {
         label: '微信 APPID',
         fieldName: 'config.appId',
@@ -601,16 +515,6 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入商户号',
         },
       },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
       {
         label: 'API 版本',
         fieldName: 'config.apiVersion',
@@ -627,6 +531,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               value: 'v3',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
       },
       {
@@ -638,7 +544,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入商户密钥',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v2';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -659,7 +565,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v2';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -674,7 +580,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入 API V3 密钥',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -695,7 +601,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -711,7 +617,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入证书序列号',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -731,7 +637,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           },
         }),
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -747,22 +653,22 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入公钥 ID',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
         },
       },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else {
-    return [];
+    );
   }
+  // 添加备注字段（所有类型都有）
+  schema.push({
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  });
+  return schema;
 }
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index f4865b9d9..8163d616c 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ActionItem, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayAppApi } from '#/api/pay/app';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
@@ -90,9 +90,22 @@ async function handleStatusChange(
   });
 }
 
-/** 根据渠道编码判断渠道列表中是否存在 */
-function isChannelExists(channels: string[], channelCode: string) {
-  return channels?.includes(channelCode);
+/** 生成渠道配置按钮 */
+function createChannelConfigAction(
+  row: PayAppApi.App,
+  channelCode: string,
+): ActionItem[] {
+  const exists = row.channelCodes?.includes(channelCode);
+  return [
+    {
+      type: 'primary',
+      size: 'small',
+      icon: exists ? 'lucide:check' : 'lucide:x',
+      danger: !exists,
+      shape: 'circle',
+      onClick: handleChannelForm.bind(null, row, channelCode),
+    },
+  ];
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -173,340 +186,81 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <!-- TODO @AI：有没办法简化 -->
       <template #alipayAppConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_APP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
-            },
-          ]"
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_APP.code)
+          "
         />
       </template>
       <template #alipayPCConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_PC.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
-            },
-          ]"
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_PC.code)
+          "
         />
       </template>
       <template #alipayWAPConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_WAP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
-            },
-          ]"
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_WAP.code)
+          "
         />
       </template>
       <template #alipayQrConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_QR.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
-            },
-          ]"
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_QR.code)
+          "
         />
       </template>
       <template #alipayBarConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_BAR.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
-            },
-          ]"
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_BAR.code)
+          "
         />
       </template>
       <template #wxLiteConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_LITE.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_LITE.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_LITE.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_LITE.code)"
         />
       </template>
       <template #wxPubConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_PUB.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_PUB.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_PUB.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_PUB.code)"
         />
       </template>
       <template #wxAppConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_APP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_APP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_APP.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_APP.code)"
         />
       </template>
       <template #wxNativeConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_NATIVE.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
-            },
-          ]"
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.WX_NATIVE.code)
+          "
         />
       </template>
       <template #wxWapConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_WAP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_WAP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_WAP.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_WAP.code)"
         />
       </template>
       <template #wxBarConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_BAR.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_BAR.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_BAR.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_BAR.code)"
         />
       </template>
       <template #walletConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WALLET.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WALLET.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WALLET.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.WALLET.code)"
         />
       </template>
       <template #mockConfig="{ row }">
         <TableAction
-          :actions="[
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.MOCK.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.MOCK.code,
-              ),
-            },
-          ]"
+          :actions="createChannelConfigAction(row, PayChannelEnum.MOCK.code)"
         />
       </template>
     </Grid>