From a602decde99dc3f8c195b85504af1012689c1bcd Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 26 May 2025 16:52:11 +0800
Subject: [PATCH] refactor: pay app

---
 apps/web-antd/package.json                    |    1 -
 apps/web-antd/src/views/pay/app/data.ts       |  425 +++----
 apps/web-antd/src/views/pay/app/index.vue     | 1006 ++++++++++-------
 .../src/views/pay/app/modules/app-form.vue    |  115 +-
 ...ipay-channel-form.vue => channel-form.vue} |  136 ++-
 .../src/views/pay/app/modules/channel/data.ts |  456 --------
 .../app/modules/channel/mock-channel-form.vue |  105 --
 .../modules/channel/wallet-channel-form.vue   |  105 --
 .../modules/channel/weixin-channel-form.vue   |  148 ---
 .../src/views/pay/app/modules/data.ts         |  530 +++++++++
 10 files changed, 1444 insertions(+), 1583 deletions(-)
 rename apps/web-antd/src/views/pay/app/modules/{channel/alipay-channel-form.vue => channel-form.vue} (58%)
 delete mode 100644 apps/web-antd/src/views/pay/app/modules/channel/data.ts
 delete mode 100644 apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
 delete mode 100644 apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
 delete mode 100644 apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
 create mode 100644 apps/web-antd/src/views/pay/app/modules/data.ts

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index b779d03a..f9a0862e 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -26,7 +26,6 @@
     "#/*": "./src/*"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "catalog:",
     "@form-create/ant-design-vue": "catalog:",
     "@form-create/antd-designer": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index dcc83ba0..5063e408 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -1,223 +1,242 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
 
+import { CommonStatusEnum } from '#/utils/constants';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
-export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'name',
-    label: '应用名',
-    componentProps: {
-      placeholder: '请输入应用名',
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '应用名',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
     },
-  },
-  {
-    component: 'Select',
-    fieldName: 'status',
-    label: '开启状态',
-    componentProps: {
-      placeholder: '请选择开启状态',
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '开启状态',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
     },
-  },
-  {
-    component: 'RangePicker',
-    fieldName: 'createTime',
-    label: '创建时间',
-    componentProps: {
-      placeholder: ['开始日期', '结束日期'],
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
     },
-  },
-];
+  ];
+}
 
-export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
-  {
-    title: '应用标识',
-    field: 'appKey',
-  },
-  {
-    title: '应用名',
-    field: 'name',
-  },
-  {
-    title: '开启状态',
-    field: 'status',
-    slots: {
-      default: 'status',
+export function useGridColumns<T = PayAppApi.App>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '应用标识',
+      field: 'appKey',
     },
-  },
-  {
-    title: '支付宝配置',
-    children: [
-      {
-        title: 'APP 支付',
-        slots: {
-          default: 'alipayAppConfig',
+    {
+      title: '应用名',
+      field: 'name',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
         },
       },
-      {
-        title: 'PC 网站支付',
-        slots: {
-          default: 'alipayPCConfig',
-        },
-      },
-      {
-        title: 'WAP 网站支付',
-        slots: {
-          default: 'alipayWAPConfig',
-        },
-      },
-      {
-        title: '扫码支付',
-        slots: {
-          default: 'alipayQrConfig',
-        },
-      },
-      {
-        title: '条码支付',
-        slots: {
-          default: 'alipayBarConfig',
-        },
-      },
-    ],
-  },
-  {
-    title: '微信配置',
-    children: [
-      {
-        title: '小程序支付',
-        slots: {
-          default: 'wxLiteConfig',
-        },
-      },
-      {
-        title: 'JSAPI 支付',
-        slots: {
-          default: 'wxPubConfig',
-        },
-      },
-      {
-        title: 'APP 支付',
-        slots: {
-          default: 'wxAppConfig',
-        },
-      },
-      {
-        title: 'Native 支付',
-        slots: {
-          default: 'wxNativeConfig',
-        },
-      },
-      {
-        title: 'WAP 网站支付',
-        slots: {
-          default: 'wxWapConfig',
-        },
-      },
-      {
-        title: '条码支付',
-        slots: {
-          default: 'wxBarConfig',
-        },
-      },
-    ],
-  },
-  {
-    title: '钱包支付配置',
-    field: 'walletConfig',
-    slots: {
-      default: 'walletConfig',
     },
-  },
-  {
-    title: '模拟支付配置',
-    field: 'mockConfig',
-    slots: {
-      default: 'mockConfig',
+    {
+      title: '支付宝配置',
+      children: [
+        {
+          title: 'APP 支付',
+          slots: {
+            default: 'alipayAppConfig',
+          },
+        },
+        {
+          title: 'PC 网站支付',
+          slots: {
+            default: 'alipayPCConfig',
+          },
+        },
+        {
+          title: 'WAP 网站支付',
+          slots: {
+            default: 'alipayWAPConfig',
+          },
+        },
+        {
+          title: '扫码支付',
+          slots: {
+            default: 'alipayQrConfig',
+          },
+        },
+        {
+          title: '条码支付',
+          slots: {
+            default: 'alipayBarConfig',
+          },
+        },
+      ],
     },
-  },
-  {
-    field: 'action',
-    fixed: 'right',
-    slots: { default: 'action' },
-    title: '操作',
-    minWidth: 160,
-  },
-];
-
-export const modalSchema: FormSchemaGetter = () => [
-  {
-    label: '应用编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
+    {
+      title: '微信配置',
+      children: [
+        {
+          title: '小程序支付',
+          slots: {
+            default: 'wxLiteConfig',
+          },
+        },
+        {
+          title: 'JSAPI 支付',
+          slots: {
+            default: 'wxPubConfig',
+          },
+        },
+        {
+          title: 'APP 支付',
+          slots: {
+            default: 'wxAppConfig',
+          },
+        },
+        {
+          title: 'Native 支付',
+          slots: {
+            default: 'wxNativeConfig',
+          },
+        },
+        {
+          title: 'WAP 网站支付',
+          slots: {
+            default: 'wxWapConfig',
+          },
+        },
+        {
+          title: '条码支付',
+          slots: {
+            default: 'wxBarConfig',
+          },
+        },
+      ],
     },
-  },
-  {
-    label: '应用名',
-    fieldName: 'name',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用名',
+    {
+      title: '钱包支付配置',
+      field: 'walletConfig',
+      slots: {
+        default: 'walletConfig',
+      },
     },
-  },
-  {
-    label: '应用标识',
-    fieldName: 'appKey',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用标识',
+    {
+      title: '模拟支付配置',
+      field: 'mockConfig',
+      slots: {
+        default: 'mockConfig',
+      },
     },
-  },
-  {
-    label: '开启状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
     },
-  },
-  {
-    label: '支付结果的回调地址',
-    fieldName: 'orderNotifyUrl',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付结果的回调地址',
+  ];
+}
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      label: '应用编号',
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
     },
-  },
-  {
-    label: '退款结果的回调地址',
-    fieldName: 'refundNotifyUrl',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付结果的回调地址',
+    {
+      label: '应用名',
+      fieldName: 'name',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
     },
-  },
-  {
-    label: '转账结果的回调地址',
-    fieldName: 'transferNotifyUrl',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入转账结果的回调地址',
+    {
+      label: '应用标识',
+      fieldName: 'appKey',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用标识',
+      },
     },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
+    {
+      label: '开启状态',
+      fieldName: 'status',
+      component: 'RadioGroup',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
     },
-  },
-];
+    {
+      label: '支付结果的回调地址',
+      fieldName: 'orderNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      label: '退款结果的回调地址',
+      fieldName: 'refundNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      label: '转账结果的回调地址',
+      fieldName: 'transferNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入转账结果的回调地址',
+      },
+    },
+    {
+      label: '备注',
+      fieldName: 'remark',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 08cfc1b3..df349c1b 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -1,118 +1,90 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
 
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
-import { h, reactive } from 'vue';
+import { message } from 'ant-design-vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
-
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import { Button, Popconfirm, Space, Switch } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as PayApi from '#/api/pay/app';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app';
 import { DocAlert } from '#/components/doc-alert';
-import { PayChannelEnum } from '#/utils/constants';
+import { $t } from '#/locales';
+import { CommonStatusEnum, PayChannelEnum } from '#/utils/constants';
 
-import { columns, querySchema } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
 import appFrom from './modules/app-form.vue';
-import aliPayFrom from './modules/channel/alipay-channel-form.vue';
-import mockFrom from './modules/channel/mock-channel-form.vue';
-import walletFrom from './modules/channel/wallet-channel-form.vue';
-import weixinFrom from './modules/channel/weixin-channel-form.vue';
+import channelFrom from './modules/channel-form.vue';
 
-const formOptions: VbenFormProps = {
-  commonConfig: {
-    labelWidth: 100,
-    componentProps: {
-      allowClear: true,
-    },
-  },
-  schema: querySchema(),
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
-};
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
 
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    // trigger: 'row',
-  },
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues = {}) => {
-        return await PayApi.getAppPage({
-          pageNum: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
-      },
-    },
-  },
-  rowConfig: {
-    keyField: 'id',
-  },
-  // 表格全局唯一表示 保存列配置需要用到
-  id: 'pay-app-index',
-};
-
-const [BasicTable, tableApi] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
-});
-
-const [AppModal, modalApi] = useVbenModal({
+const [AppModal, appModalApi] = useVbenModal({
   connectedComponent: appFrom,
+  destroyOnClose: true,
 });
 
-const [AliPayModal, modalAliPayApi] = useVbenModal({
-  connectedComponent: aliPayFrom,
+const [ChannelModal, channelModalApi] = useVbenModal({
+  connectedComponent: channelFrom,
+  destroyOnClose: true,
 });
 
-const [MockModal, modalMockApi] = useVbenModal({
-  connectedComponent: mockFrom,
-});
+function handleCreate() {
+  appModalApi.setData(null).open();
+}
 
-const [WalletModal, modalWalletApi] = useVbenModal({
-  connectedComponent: walletFrom,
-});
+function handleEdit(row: Required<PayAppApi.App>) {
+  appModalApi.setData({ id: row.id }).open();
+}
 
-const [WeixinModal, modalWeixinApi] = useVbenModal({
-  connectedComponent: weixinFrom,
-});
+async function handleDelete(row: Required<PayAppApi.App>) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteApp(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
 
-const handleAdd = () => {
-  modalApi.setData({});
-  modalApi.open();
-};
-
-const handleEdit = (row: Required<PayApi.PayAppApi.App>) => {
-  modalApi.setData({ id: row.id });
-  modalApi.open();
-};
-
-const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
-  await PayApi.deleteApp(row.id);
-  tableApi.query();
-};
+/** 更新状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: PayAppApi.App,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用';
+    confirm({
+      content: `确认要${text + row.name}应用吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await changeAppStatus({
+          id: row.id as number,
+          status: newStatus,
+        });
+        if (res) {
+          // 提示并返回成功
+          message.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
 
 /**
  * 根据渠道编码判断渠道列表中是否存在
@@ -120,379 +92,549 @@ const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
  * @param channels 渠道列表
  * @param channelCode 渠道编码
  */
-const isChannelExists = (channels: string[], channelCode: string) => {
+function isChannelExists(channels: string[], channelCode: string) {
   if (!channels) {
     return false;
   }
   return channels.includes(channelCode);
-};
+}
 
-const channelParam = reactive({
-  appId: 0, // 应用 ID
-  payCode: '', // 渠道编码
+async function openChannelForm(row: PayAppApi.App, payCode: string) {
+  channelModalApi.setData({ id: row.id || 0, payCode }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAppPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayAppApi.App>,
 });
-
-const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
-  channelParam.appId = row.id || 0;
-  channelParam.payCode = payCode;
-  if (payCode.indexOf('alipay_') === 0) {
-    modalAliPayApi.setData({ id: row.id, payCode });
-    modalAliPayApi.open();
-    return;
-  }
-  if (payCode.indexOf('wx_') === 0) {
-    modalWeixinApi.setData({ id: row.id, payCode });
-    modalWeixinApi.open();
-    return;
-  }
-  if (payCode.indexOf('mock') === 0) {
-    modalMockApi.setData({ id: row.id, payCode });
-    modalMockApi.open();
-    return;
-  }
-  if (payCode.indexOf('wallet') === 0) {
-    modalWalletApi.setData({ id: row.id, payCode });
-    modalWalletApi.open();
-  }
-};
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
-    <BasicTable>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <AppModal @reload="onRefresh" />
+    <ChannelModal @reload="onRefresh" />
+
+    <Grid>
       <template #toolbar-tools>
-        <Space>
-          <a-button
-            type="primary"
-            v-access:code="['pay:app:create']"
-            @click="handleAdd"
-          >
-            {{ $t('ui.actionTitle.create', ['应用']) }}
-          </a-button>
-        </Space>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['应用']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:app:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
       </template>
-      <template #action="{ row }">
-        <Space>
-          <Button
-            v-access:code="['pay:app:update']"
-            type="link"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('ui.actionTitle.edit') }}
-          </Button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            v-access:code="['pay:app:delete']"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <Button type="link" danger>
-              {{ $t('ui.actionTitle.delete') }}
-            </Button>
-          </Popconfirm>
-        </Space>
-      </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:app:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:app:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
         />
       </template>
       <template #alipayAppConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
-          />
-          <Button
-            v-else
-            size="small"
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayPCConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayWAPConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayQrConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayBarConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxLiteConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_LITE.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_LITE.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxPubConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_PUB.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_PUB.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxAppConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_APP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_APP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxNativeConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxWapConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_WAP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_WAP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxBarConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_BAR.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_BAR.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #walletConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WALLET.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WALLET.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #mockConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.MOCK.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.MOCK.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.MOCK.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.MOCK.code,
+              ),
+            },
+          ]"
+        />
       </template>
-    </BasicTable>
-    <AppModal @reload="tableApi.query()" />
-    <AliPayModal @reload="tableApi.query()" />
-    <MockModal @reload="tableApi.query()" />
-    <WalletModal @reload="tableApi.query()" />
-    <WeixinModal @reload="tableApi.query()" />
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/app-form.vue b/apps/web-antd/src/views/pay/app/modules/app-form.vue
index 3791d15a..9f34bc7a 100644
--- a/apps/web-antd/src/views/pay/app/modules/app-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/app-form.vue
@@ -1,90 +1,83 @@
 <script lang="ts" setup>
+import type { PayAppApi } from '#/api/pay/app';
+
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as PayApi from '#/api/pay/app';
+import { createApp, getApp, updateApp } from '#/api/pay/app';
 
-import { modalSchema } from '../data';
+import { useFormSchema } from '../data';
 
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
+const emit = defineEmits(['success']);
+const formData = ref<PayAppApi.App>();
 const title = computed(() => {
-  return isUpdate.value
+  return formData.value?.id
     ? $t('ui.actionTitle.edit', '应用')
     : $t('ui.actionTitle.create', '应用');
 });
 
-const [BasicForm, formApi] = useVbenForm({
+const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
   },
-  schema: modalSchema(),
+  layout: 'horizontal',
+  schema: useFormSchema(),
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as {
-      id?: number;
-    };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await PayApi.getApp(id);
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
-    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayAppApi.App;
+    try {
+      await (formData.value?.id ? updateApp(data) : createApp(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    if (!id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApp(id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
+  <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <Form />
+  </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
similarity index 58%
rename from apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
rename to apps/web-antd/src/views/pay/app/modules/channel-form.vue
index a188ce67..87177087 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
@@ -1,104 +1,96 @@
 <script lang="ts" setup>
+import type { PayChannelApi } from '#/api/pay/channel';
+
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
 
-import { Row, Space, Textarea } from 'ant-design-vue';
+import { message, Row, Space, Textarea } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
+import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
 import { FileUpload } from '#/components/upload';
 
-import { modalAliPaySchema } from './data';
+import { channelSchema } from './data';
 
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
+const emit = defineEmits(['success']);
+const formData = ref<PayChannelApi.Channel>();
+const formType = ref<string>('');
 const title = computed(() => {
-  return isUpdate.value
+  return formData.value?.id
     ? $t('ui.actionTitle.edit', '应用')
     : $t('ui.actionTitle.create', '应用');
 });
 
-const [BasicForm, formApi] = useVbenForm({
+const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
   },
-  schema: modalAliPaySchema(),
+  layout: 'horizontal',
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      const record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      record.code = payCode;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-        await formApi.setValues(record);
-      }
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config);
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayChannelApi.Channel;
+    try {
+      await (formData.value?.id ? updateChannel(data) : createChannel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+    if (!id || !payCode) {
+      return;
+    }
+    modalApi.lock();
+    if (payCode.includes('alipay_')) {
+      formType.value = 'alipay';
+    } else if (payCode.includes('mock')) {
+      formType.value = 'mock';
+    } else if (payCode.includes('wallet')) {
+      formType.value = 'wallet';
+    } else if (payCode.includes('wx')) {
+      formType.value = 'wx';
+    }
 
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
+    try {
+      formData.value = await getChannel(id, payCode);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm>
+  <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <Form :schema="channelSchema(formType)">
       <template #appCertContent="slotProps">
         <Space style="width: 100%" direction="vertical">
           <Row>
@@ -158,6 +150,6 @@ async function handleCancel() {
           </Row>
         </Space>
       </template>
-    </BasicForm>
-  </BasicModal>
+    </Form>
+  </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/data.ts b/apps/web-antd/src/views/pay/app/modules/channel/data.ts
deleted file mode 100644
index db6c66bf..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/data.ts
+++ /dev/null
@@ -1,456 +0,0 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
-
-export const modalAliPaySchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-  },
-  {
-    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: 1,
-  },
-  {
-    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: 0,
-          label: '公钥模式',
-        },
-        {
-          value: 1,
-          label: '证书模式',
-        },
-      ],
-    },
-  },
-  {
-    label: '应用私钥',
-    fieldName: 'config.privateKey',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用私钥',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values.config.mode !== undefined;
-      },
-      triggerFields: ['config'],
-    },
-  },
-  {
-    label: '支付宝公钥',
-    fieldName: 'config.alipayPublicKey',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付宝公钥',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 0;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '商户公钥应用证书',
-    fieldName: 'config.appCertContent',
-    slotName: 'appCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传商户公钥应用证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '支付宝公钥证书',
-    fieldName: 'config.alipayPublicCertContent',
-    slotName: 'alipayPublicCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传支付宝公钥证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '根证书',
-    fieldName: 'config.rootCertContent',
-    slotName: 'rootCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传根证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      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: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
-
-export const modalMockSchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    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: 1,
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
-
-export const modalWeixinSchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-  },
-  {
-    label: '微信 APPID',
-    fieldName: 'config.appId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入微信 APPID',
-    },
-  },
-  {
-    label: '商户号',
-    fieldName: 'config.mchId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入商户号',
-    },
-  },
-  {
-    label: '渠道状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-    },
-    defaultValue: 1,
-  },
-  {
-    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',
-    slotName: 'keyContent',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传 apiclient_cert.p12 证书',
-    },
-    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',
-    slotName: 'privateKeyContent',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传 apiclient_key.pem 证书',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '证书序列号',
-    fieldName: 'config.certSerialNo',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入证书序列号',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
deleted file mode 100644
index f7ad9167..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-
-import { modalMockSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalMockSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      let record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      } else {
-        record = {
-          feeRate: 0,
-          code: payCode,
-          appId: id,
-        } as ChannelApi.PayChannelApi.Channel;
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
deleted file mode 100644
index f7ad9167..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-
-import { modalMockSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalMockSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      let record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      } else {
-        record = {
-          feeRate: 0,
-          code: payCode,
-          appId: id,
-        } as ChannelApi.PayChannelApi.Channel;
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
deleted file mode 100644
index 0c93c3df..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { Row, Space, Textarea } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-import { FileUpload } from '#/components/upload';
-
-import { modalWeixinSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalWeixinSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      const record =
-        (await ChannelApi.getChannel(id, payCode)) ||
-        ({} as ChannelApi.PayChannelApi.Channel);
-      isUpdate.value = !!record;
-      record.code = payCode;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config);
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm>
-      <template #keyContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传 apiclient_cert.p12 证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-      <template #privateKeyContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传 apiclient_key.pem 证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['.crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-    </BasicForm>
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/pay/app/modules/data.ts b/apps/web-antd/src/views/pay/app/modules/data.ts
new file mode 100644
index 00000000..b51bd64f
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/data.ts
@@ -0,0 +1,530 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export function channelSchema(formType: string): VbenFormSchema[] {
+  switch (formType) {
+    case 'alipay': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+        },
+        {
+          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: 1,
+        },
+        {
+          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: 0,
+                label: '公钥模式',
+              },
+              {
+                value: 1,
+                label: '证书模式',
+              },
+            ],
+          },
+        },
+        {
+          label: '应用私钥',
+          fieldName: 'config.privateKey',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入应用私钥',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values.config.mode !== undefined;
+            },
+            triggerFields: ['config'],
+          },
+        },
+        {
+          label: '支付宝公钥',
+          fieldName: 'config.alipayPublicKey',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入支付宝公钥',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 0;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '商户公钥应用证书',
+          fieldName: 'config.appCertContent',
+          slotName: 'appCertContent',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传商户公钥应用证书',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '支付宝公钥证书',
+          fieldName: 'config.alipayPublicCertContent',
+          slotName: 'alipayPublicCertContent',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传支付宝公钥证书',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '根证书',
+          fieldName: 'config.rootCertContent',
+          slotName: 'rootCertContent',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传根证书',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            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: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'mock': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          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: 1,
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'wallet': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          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: 1,
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'wx': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+        },
+        {
+          label: '微信 APPID',
+          fieldName: 'config.appId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入微信 APPID',
+          },
+        },
+        {
+          label: '商户号',
+          fieldName: 'config.mchId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入商户号',
+          },
+        },
+        {
+          label: '渠道状态',
+          fieldName: 'status',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+          },
+          defaultValue: 1,
+        },
+        {
+          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',
+          slotName: 'keyContent',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传 apiclient_cert.p12 证书',
+          },
+          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',
+          slotName: 'privateKeyContent',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传 apiclient_key.pem 证书',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '证书序列号',
+          fieldName: 'config.certSerialNo',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入证书序列号',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    default: {
+      return [];
+    }
+  }
+}