From 61e06cce09b80ff7b9ada0240654a2443c726c13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Mon, 5 May 2025 12:19:04 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E5=AE=9D=E6=B8=A0=E9=81=93=E9=85=8D=E7=BD=AE=E5=92=8C?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=9B=B8=E5=85=B3=E8=A1=A8=E5=8D=95=E5=92=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |   1 +
 apps/web-antd/src/adapter/form.ts             |   1 +
 .../src/components/upload/file-upload.vue     |   6 +-
 apps/web-antd/src/views/pay/app/data.ts       | 223 +++++++++
 apps/web-antd/src/views/pay/app/index.vue     | 430 +++++++++++++++++-
 .../src/views/pay/app/modules/app-form.vue    |  90 ++++
 .../app/modules/channel/AlipayChannelForm.vue | 139 ++++++
 .../src/views/pay/app/modules/channel/data.ts | 204 +++++++++
 docs/src/components/common-ui/vben-form.md    |  12 +
 .../ui-kit/form-ui/src/form-render/form.vue   |   6 +-
 packages/@core/ui-kit/form-ui/src/types.ts    |   2 +
 .../ui-kit/popup-ui/src/modal/modal-api.ts    |   8 +
 .../utils/src/helpers/get-popup-container.ts  |  28 ++
 pnpm-lock.yaml                                |   3 +
 14 files changed, 1130 insertions(+), 23 deletions(-)
 create mode 100644 apps/web-antd/src/views/pay/app/data.ts
 create mode 100644 apps/web-antd/src/views/pay/app/modules/app-form.vue
 create mode 100644 apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
 create mode 100644 apps/web-antd/src/views/pay/app/modules/channel/data.ts

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index e5c1e01d6..cd817905a 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -26,6 +26,7 @@
     "#/*": "./src/*"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "@form-create/ant-design-vue": "catalog:",
     "@form-create/antd-designer": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",
diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts
index cf75673e5..a1653a237 100644
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -68,3 +68,4 @@ export { useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
+export type FormSchemaGetter = () => VbenFormSchema[];
diff --git a/apps/web-antd/src/components/upload/file-upload.vue b/apps/web-antd/src/components/upload/file-upload.vue
index 91d7cc669..0d479942e 100644
--- a/apps/web-antd/src/components/upload/file-upload.vue
+++ b/apps/web-antd/src/components/upload/file-upload.vue
@@ -55,7 +55,7 @@ const props = withDefaults(
     showDescription: false,
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete']);
+const emit = defineEmits(['change', 'update:value', 'delete', 'getText']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -122,6 +122,10 @@ const handleRemove = async (file: UploadFile) => {
 };
 
 const beforeUpload = async (file: File) => {
+  // 使用现代的Blob.text()方法替代FileReader
+  const fileContent = await file.text();
+  emit('getText', fileContent);
+
   const { maxSize, accept } = props;
   const isAct = checkFileType(file, accept);
   if (!isAct) {
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
new file mode 100644
index 000000000..4ab541952
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -0,0 +1,223 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '应用名',
+    componentProps: {
+      placeholder: '请输入应用名',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '开启状态',
+    componentProps: {
+      placeholder: '请选择开启状态',
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+  {
+    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',
+    },
+  },
+  {
+    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',
+        },
+      },
+    ],
+  },
+  {
+    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',
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 250,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '应用编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用名',
+    fieldName: 'name',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用名',
+    },
+  },
+  {
+    label: '应用标识',
+    fieldName: 'appKey',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      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 199d0ebd2..81ccaf6bd 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -1,31 +1,419 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { h, reactive } from '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 { DocAlert } from '#/components/doc-alert';
+import { PayChannelEnum } from '#/utils/constants';
+
+import { columns, querySchema } from './data';
+import appFrom from './modules/app-form.vue';
+import aliPayFrom from './modules/channel/AlipayChannelForm.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'],
+  //  ],
+  // ],
+};
+
+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: 'system-notifyMessage-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [AppModal, modalApi] = useVbenModal({
+  connectedComponent: appFrom,
+});
+
+const [AliPayModal, modalAliPayApi] = useVbenModal({
+  connectedComponent: aliPayFrom,
+});
+
+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();
+};
+
+/**
+ * 根据渠道编码判断渠道列表中是否存在
+ *
+ * @param channels 渠道列表
+ * @param channelCode 渠道编码
+ */
+const isChannelExists = (channels: string[], channelCode: string) => {
+  if (!channels) {
+    return false;
+  }
+  return channels.includes(channelCode);
+};
+
+const channelParam = reactive({
+  appId: 0, // 应用 ID
+  payCode: '', // 渠道编码
+});
+
+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();
+  }
+  // if (payCode.indexOf('wx_') === 0) {
+  //   weixinFormRef.value.open(row.id, payCode);
+  //   return;
+  // }
+  // if (payCode.indexOf('mock') === 0) {
+  //   mockFormRef.value.open(row.id, payCode);
+  // }
+  // if (payCode.indexOf('wallet') === 0) {
+  //   mockFormRef.value.open(row.id, payCode);
+  // }
+};
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
     <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <BasicTable>
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            type="primary"
+            v-access:code="['pay:app:create']"
+            @click="handleAdd"
+          >
+            {{ $t('ui.actionTitle.create', ['应用']) }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <a-button
+          v-access:code="['pay:app:update']"
+          type="link"
+          @click.stop="handleEdit(row)"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </a-button>
+        <Popconfirm
+          :get-popup-container="getVxePopupContainer"
+          placement="left"
+          v-access:code="['pay:app:delete']"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
+          <a-button type="link" danger>
+            {{ $t('ui.actionTitle.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status"
+          :checked-value="0"
+          :un-checked-value="1"
+        />
+      </template>
+      <template #alipayAppConfig="{ row }">
+        <Button
+          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
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
+        />
+      </template>
+      <template #alipayPCConfig="{ row }">
+        <Button
+          v-if="
+            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
+          "
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
+        />
+      </template>
+      <template #alipayWAPConfig="{ row }">
+        <Button
+          v-if="
+            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
+          "
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
+        />
+      </template>
+      <template #alipayQrConfig="{ row }">
+        <Button
+          v-if="
+            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
+          "
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
+        />
+      </template>
+      <template #alipayBarConfig="{ row }">
+        <Button
+          v-if="
+            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
+          "
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
+        />
+      </template>
+      <template #wxLiteConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
+        />
+      </template>
+      <template #wxPubConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
+        />
+      </template>
+      <template #wxAppConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
+        />
+      </template>
+      <template #wxNativeConfig="{ row }">
+        <Button
+          v-if="
+            isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
+          "
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
+        />
+      </template>
+      <template #wxWapConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
+        />
+      </template>
+      <template #wxBarConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
+        />
+      </template>
+      <template #walletConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
+        />
+      </template>
+      <template #mockConfig="{ row }">
+        <Button
+          v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
+          type="primary"
+          :icon="h(CheckOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
+        />
+        <Button
+          v-else
+          type="primary"
+          danger
+          :icon="h(CloseOutlined)"
+          shape="circle"
+          @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
+        />
+      </template>
+    </BasicTable>
+    <AppModal @reload="tableApi.query()" />
+    <AliPayModal @reload="tableApi.query()" />
   </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
new file mode 100644
index 000000000..3791d15a1
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/app-form.vue
@@ -0,0 +1,90 @@
+<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 PayApi from '#/api/pay/app';
+
+import { modalSchema } 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: modalSchema(),
+  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 { 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();
+}
+</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/AlipayChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
new file mode 100644
index 000000000..30f7bc351
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
@@ -0,0 +1,139 @@
+<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 PayApi from '#/api/pay/app';
+import { FileUpload } from '#/components/upload';
+
+import { modalAliPaySchema } 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: modalAliPaySchema(),
+  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 { 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();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm>
+      <template #appCertContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传商户公钥应用证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['crt']"
+              @get-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+      <template #alipayPublicCertContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传支付宝公钥证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload :accept="['.crt']" />
+          </Row>
+        </Space>
+      </template>
+      <template #rootCertContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
+          </Row>
+          <Row>
+            <FileUpload :accept="['.crt']" />
+          </Row>
+        </Space>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</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
new file mode 100644
index 000000000..1802f8f2c
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/channel/data.ts
@@ -0,0 +1,204 @@
+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: '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'),
+    },
+  },
+  {
+    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: '请输入备注',
+    },
+  },
+];
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
index 7abb3051e..5ed5abd1e 100644
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -557,4 +557,16 @@ import { z } from '#/adapter/form';
 
 除了以上内置插槽之外，`schema`属性中每个字段的`fieldName`都可以作为插槽名称，这些字段插槽的优先级高于`component`定义的组件。也就是说，当提供了与`fieldName`同名的插槽时，这些插槽的内容将会作为这些字段的组件，此时`component`的值将会被忽略。
 
+如果需要使用自定义的插槽名而不是使用`fieldName`，可以在schema中添加`slotName`属性。当提供了`slotName`属性时，将优先使用`slotName`作为插槽名。
+
+```ts
+// 使用自定义插槽名的例子
+{
+  component: 'Textarea',
+  fieldName: 'config.appCertContent',
+  slotName: 'appCertSlot',
+  label: '商户公钥应用证书',
+}
+```
+
 :::
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index ff827c42a..5165c2bd6 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -155,7 +155,11 @@ const computedSchema = computed(
           :rules="cSchema.rules"
         >
           <template #default="slotProps">
-            <slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
+            <slot
+              v-bind="slotProps"
+              :name="cSchema.slotName || cSchema.fieldName"
+            >
+            </slot>
           </template>
         </FormField>
       </template>
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index 529ba0efc..c34469413 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -263,6 +263,8 @@ export interface FormSchema<
   renderComponentContent?: RenderComponentContentType;
   /** 字段规则 */
   rules?: FormSchemaRuleType;
+  /** 自定义插槽名，如果不指定则使用fieldName */
+  slotName?: string;
   /** 后缀 */
   suffix?: CustomRenderType;
 }
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index 27aa82162..c444feea8 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -124,6 +124,14 @@ export class ModalApi {
     return this.setState({ submitting: isLocked });
   }
 
+  modalLoading(loading: boolean) {
+    this.store.setState((prev) => ({
+      ...prev,
+      confirmLoading: loading,
+      loading,
+    }));
+  }
+
   /**
    * 取消操作
    */
diff --git a/packages/utils/src/helpers/get-popup-container.ts b/packages/utils/src/helpers/get-popup-container.ts
index 6aa84d6da..589f6ede2 100644
--- a/packages/utils/src/helpers/get-popup-container.ts
+++ b/packages/utils/src/helpers/get-popup-container.ts
@@ -8,3 +8,31 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {
     node?.closest('form') ?? (node?.parentNode as HTMLElement) ?? document.body
   );
 }
+
+/**
+ * VxeTable专用弹窗层
+ * 解决问题: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB1DM3
+ * 单表格用法跟上面getPopupContainer一样
+ * 一个页面(body下)有多个表格元素 必须先指定ID & ID参数传入该函数
+ * <BasicTable id="xxx" />
+ * getVxePopupContainer="(node) => getVxePopupContainer(node, 'xxx')"
+ * @param _node 触发的元素
+ * @param id 表格唯一id 当页面(该窗口)有>=两个表格 必须提供ID
+ * @returns 挂载节点
+ */
+export function getVxePopupContainer(
+  _node?: HTMLElement,
+  id?: string,
+): HTMLElement {
+  let selector = 'div.vxe-table--body-wrapper.body--wrapper';
+  if (id) {
+    selector = `div#${id} ${selector}`;
+  }
+  // 挂载到vxe-table的滚动区域
+  const vxeTableContainerNode = document.querySelector(selector);
+  if (!vxeTableContainerNode) {
+    console.warn('无法找到vxe-table元素, 将会挂载到body.');
+    return document.body;
+  }
+  return vxeTableContainerNode as HTMLElement;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 487360ccc..5e868a7ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -677,6 +677,9 @@ importers:
 
   apps/web-antd:
     dependencies:
+      '@ant-design/icons-vue':
+        specifier: ^7.0.1
+        version: 7.0.1(vue@3.5.13(typescript@5.8.3))
       '@form-create/ant-design-vue':
         specifier: 'catalog:'
         version: 3.2.22(vue@3.5.13(typescript@5.8.3))

From d0870beb40fc303f8e67ffcb02f33e353950a6ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Mon, 5 May 2025 16:29:59 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E6=B8=A0=E9=81=93=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=B8=A0=E9=81=93=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E7=B1=BB=E5=9E=8B=EF=BC=8C=E9=87=8D=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D=E4=BA=8B=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=B8=A0?=
 =?UTF-8?q?=E9=81=93=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/pay/channel/index.ts    |   2 +-
 .../src/components/upload/file-upload.vue     |   4 +-
 apps/web-antd/src/views/pay/app/data.ts       |   2 +-
 apps/web-antd/src/views/pay/app/index.vue     | 549 ++++++++++--------
 .../app/modules/channel/AlipayChannelForm.vue |  48 +-
 .../app/modules/channel/MockChannelForm.vue   | 105 ++++
 .../app/modules/channel/WalletChannelForm.vue | 105 ++++
 .../app/modules/channel/WeixinChannelForm.vue | 148 +++++
 .../src/views/pay/app/modules/channel/data.ts | 254 +++++++-
 9 files changed, 965 insertions(+), 252 deletions(-)
 create mode 100644 apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue
 create mode 100644 apps/web-antd/src/views/pay/app/modules/channel/WalletChannelForm.vue
 create mode 100644 apps/web-antd/src/views/pay/app/modules/channel/WeixinChannelForm.vue

diff --git a/apps/web-antd/src/api/pay/channel/index.ts b/apps/web-antd/src/api/pay/channel/index.ts
index 99a16c05c..eb4c1d99e 100644
--- a/apps/web-antd/src/api/pay/channel/index.ts
+++ b/apps/web-antd/src/api/pay/channel/index.ts
@@ -27,7 +27,7 @@ export function getChannelPage(params: PageParam) {
 }
 
 /** 查询支付渠道详情 */
-export function getChannel(appId: string, code: string) {
+export function getChannel(appId: number, code: string) {
   return requestClient.get<PayChannelApi.Channel>('/pay/channel/get', {
     params: { appId, code },
   });
diff --git a/apps/web-antd/src/components/upload/file-upload.vue b/apps/web-antd/src/components/upload/file-upload.vue
index 0d479942e..b3b1276a8 100644
--- a/apps/web-antd/src/components/upload/file-upload.vue
+++ b/apps/web-antd/src/components/upload/file-upload.vue
@@ -55,7 +55,7 @@ const props = withDefaults(
     showDescription: false,
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete', 'getText']);
+const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -124,7 +124,7 @@ const handleRemove = async (file: UploadFile) => {
 const beforeUpload = async (file: File) => {
   // 使用现代的Blob.text()方法替代FileReader
   const fileContent = await file.text();
-  emit('getText', fileContent);
+  emit('returnText', fileContent);
 
   const { maxSize, accept } = props;
   const isAct = checkFileType(file, accept);
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index 4ab541952..dcc83ba04 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -143,7 +143,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 250,
+    minWidth: 160,
   },
 ];
 
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 81ccaf6bd..28ac51486 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -19,6 +19,9 @@ import { PayChannelEnum } from '#/utils/constants';
 import { columns, querySchema } from './data';
 import appFrom from './modules/app-form.vue';
 import aliPayFrom from './modules/channel/AlipayChannelForm.vue';
+import mockFrom from './modules/channel/MockChannelForm.vue';
+import walletFrom from './modules/channel/WalletChannelForm.vue';
+import weixinFrom from './modules/channel/WeixinChannelForm.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -84,6 +87,18 @@ const [AliPayModal, modalAliPayApi] = useVbenModal({
   connectedComponent: aliPayFrom,
 });
 
+const [MockModal, modalMockApi] = useVbenModal({
+  connectedComponent: mockFrom,
+});
+
+const [WalletModal, modalWalletApi] = useVbenModal({
+  connectedComponent: walletFrom,
+});
+
+const [WeixinModal, modalWeixinApi] = useVbenModal({
+  connectedComponent: weixinFrom,
+});
+
 const handleAdd = () => {
   modalApi.setData({});
   modalApi.open();
@@ -123,17 +138,22 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
   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();
   }
-  // if (payCode.indexOf('wx_') === 0) {
-  //   weixinFormRef.value.open(row.id, payCode);
-  //   return;
-  // }
-  // if (payCode.indexOf('mock') === 0) {
-  //   mockFormRef.value.open(row.id, payCode);
-  // }
-  // if (payCode.indexOf('wallet') === 0) {
-  //   mockFormRef.value.open(row.id, payCode);
-  // }
 };
 </script>
 
@@ -153,24 +173,26 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
         </Space>
       </template>
       <template #action="{ row }">
-        <a-button
-          v-access:code="['pay:app:update']"
-          type="link"
-          @click.stop="handleEdit(row)"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </a-button>
-        <Popconfirm
-          :get-popup-container="getVxePopupContainer"
-          placement="left"
-          v-access:code="['pay:app:delete']"
-          title="确认删除？"
-          @confirm="handleDelete(row)"
-        >
-          <a-button type="link" danger>
-            {{ $t('ui.actionTitle.delete') }}
-          </a-button>
-        </Popconfirm>
+        <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
@@ -180,240 +202,297 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
         />
       </template>
       <template #alipayAppConfig="{ row }">
-        <Button
-          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
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
-        />
+        <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>
       </template>
       <template #alipayPCConfig="{ row }">
-        <Button
-          v-if="
-            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
-          "
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
-        />
+        <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>
       </template>
       <template #alipayWAPConfig="{ row }">
-        <Button
-          v-if="
-            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
-          "
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
-        />
+        <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>
       </template>
       <template #alipayQrConfig="{ row }">
-        <Button
-          v-if="
-            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
-          "
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
-        />
+        <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>
       </template>
       <template #alipayBarConfig="{ row }">
-        <Button
-          v-if="
-            isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
-          "
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
-        />
+        <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>
       </template>
       <template #wxLiteConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
-        />
+        <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>
       </template>
       <template #wxPubConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
-        />
+        <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>
       </template>
       <template #wxAppConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
-        />
+        <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>
       </template>
       <template #wxNativeConfig="{ row }">
-        <Button
-          v-if="
-            isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
-          "
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
-        />
+        <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>
       </template>
       <template #wxWapConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
-        />
+        <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>
       </template>
       <template #wxBarConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
-        />
+        <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>
       </template>
       <template #walletConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
-        />
+        <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>
       </template>
       <template #mockConfig="{ row }">
-        <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
-          type="primary"
-          :icon="h(CheckOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
-        />
-        <Button
-          v-else
-          type="primary"
-          danger
-          :icon="h(CloseOutlined)"
-          shape="circle"
-          @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
-        />
+        <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>
       </template>
     </BasicTable>
     <AppModal @reload="tableApi.query()" />
     <AliPayModal @reload="tableApi.query()" />
+    <MockModal @reload="tableApi.query()" />
+    <WalletModal @reload="tableApi.query()" />
+    <WeixinModal @reload="tableApi.query()" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
index 30f7bc351..972a6093f 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
@@ -8,7 +8,7 @@ import { cloneDeep } from '@vben/utils';
 import { Row, Space, Textarea } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as PayApi from '#/api/pay/app';
+import * as ChannelApi from '#/api/pay/channel';
 import { FileUpload } from '#/components/upload';
 
 import { modalAliPaySchema } from './data';
@@ -48,14 +48,19 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     modalApi.modalLoading(true);
 
-    const { id } = modalApi.getData() as {
-      id?: number;
+    const { id, payCode } = modalApi.getData() as {
+      id?: string;
+      payCode?: string;
     };
-    isUpdate.value = !!id;
 
-    if (isUpdate.value && id) {
-      const record = await PayApi.getApp(id);
-      await formApi.setValues(record);
+    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);
@@ -70,8 +75,13 @@ async function handleConfirm() {
       return;
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
-    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
+    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) {
@@ -101,7 +111,7 @@ async function handleCancel() {
           <Row>
             <FileUpload
               :accept="['crt']"
-              @get-text="
+              @return-text="
                 (text: string) => {
                   slotProps.setValue(text);
                 }
@@ -120,7 +130,14 @@ async function handleCancel() {
             />
           </Row>
           <Row>
-            <FileUpload :accept="['.crt']" />
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
           </Row>
         </Space>
       </template>
@@ -130,7 +147,14 @@ async function handleCancel() {
             <Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
           </Row>
           <Row>
-            <FileUpload :accept="['.crt']" />
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
           </Row>
         </Space>
       </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue
new file mode 100644
index 000000000..f7ad91674
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue
@@ -0,0 +1,105 @@
+<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/WalletChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/WalletChannelForm.vue
new file mode 100644
index 000000000..f7ad91674
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/channel/WalletChannelForm.vue
@@ -0,0 +1,105 @@
+<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/WeixinChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/WeixinChannelForm.vue
new file mode 100644
index 000000000..0c93c3df9
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/channel/WeixinChannelForm.vue
@@ -0,0 +1,148 @@
+<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/channel/data.ts b/apps/web-antd/src/views/pay/app/modules/channel/data.ts
index 1802f8f2c..db6c66bfd 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel/data.ts
+++ b/apps/web-antd/src/views/pay/app/modules/channel/data.ts
@@ -4,7 +4,7 @@ import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 export const modalAliPaySchema: FormSchemaGetter = () => [
   {
-    label: '应用编号',
+    label: '商户编号',
     fieldName: 'id',
     component: 'Input',
     dependencies: {
@@ -12,6 +12,24 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
       triggerFields: [''],
     },
   },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
   {
     label: '渠道费率',
     fieldName: 'feeRate',
@@ -38,6 +56,7 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
     componentProps: {
       options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
     },
+    defaultValue: 1,
   },
   {
     label: '网关地址',
@@ -202,3 +221,236 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
     },
   },
 ];
+
+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: '请输入备注',
+    },
+  },
+];

From 3be7961de545c03e8a30ebd404c425aa1795c401 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Mon, 5 May 2025 17:57:08 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E8=AE=A2=E5=8D=95=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E8=AE=A2=E5=8D=95=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=92=8C=E8=AF=A6=E6=83=85=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9B=B8=E5=85=B3=E8=A1=A8=E5=8D=95=E5=92=8C=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/pay/order/index.ts      |   7 +
 apps/web-antd/src/views/pay/app/index.vue     |   2 +-
 .../app/modules/channel/AlipayChannelForm.vue |   2 +-
 apps/web-antd/src/views/pay/order/data.ts     | 144 ++++++++++++++++++
 apps/web-antd/src/views/pay/order/index.vue   | 124 ++++++++++++---
 .../views/pay/order/modules/OrderDetail.vue   | 125 +++++++++++++++
 packages/locales/src/langs/zh-CN/ui.json      |   3 +-
 7 files changed, 383 insertions(+), 24 deletions(-)
 create mode 100644 apps/web-antd/src/views/pay/order/data.ts
 create mode 100644 apps/web-antd/src/views/pay/order/modules/OrderDetail.vue

diff --git a/apps/web-antd/src/api/pay/order/index.ts b/apps/web-antd/src/api/pay/order/index.ts
index 984a5d1f6..31ba880d8 100644
--- a/apps/web-antd/src/api/pay/order/index.ts
+++ b/apps/web-antd/src/api/pay/order/index.ts
@@ -6,8 +6,13 @@ export namespace PayOrderApi {
   /** 支付订单信息 */
   export interface Order {
     id: number;
+    no: string;
+    price: number;
+    channelFeePrice: number;
+    refundPrice: number;
     merchantId: number;
     appId: number;
+    appName: string;
     channelId: number;
     channelCode: string;
     merchantOrderId: string;
@@ -29,7 +34,9 @@ export namespace PayOrderApi {
     refundAmount: number;
     channelUserId: string;
     channelOrderNo: string;
+    channelNotifyData: string;
     createTime: Date;
+    updateTime: Date;
   }
 
   /** 支付订单分页请求 */
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 28ac51486..5116d91ba 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -71,7 +71,7 @@ const gridOptions: VxeGridProps = {
     keyField: 'id',
   },
   // 表格全局唯一表示 保存列配置需要用到
-  id: 'system-notifyMessage-index',
+  id: 'pay-app-index',
 };
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
index 972a6093f..a188ce67d 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
@@ -49,7 +49,7 @@ const [BasicModal, modalApi] = useVbenModal({
     modalApi.modalLoading(true);
 
     const { id, payCode } = modalApi.getData() as {
-      id?: string;
+      id?: number;
       payCode?: string;
     };
 
diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
new file mode 100644
index 000000000..6874bed0c
--- /dev/null
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -0,0 +1,144 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'appId',
+    label: '应用编号',
+    componentProps: {
+      placeholder: '请输入应用编号',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'channelCode',
+    label: '支付渠道',
+    componentProps: {
+      placeholder: '请选择开启状态',
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'merchantOrderId',
+    label: '商户单号',
+    componentProps: {
+      placeholder: '请输入商户单号',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'no',
+    label: '支付单号',
+    componentProps: {
+      placeholder: '请输入支付单号',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'channelOrderNo',
+    label: '渠道单号',
+    componentProps: {
+      placeholder: '请输入渠道单号',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '支付状态',
+    componentProps: {
+      placeholder: '请选择支付状态',
+      options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+    },
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+    componentProps: {
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '编号',
+    field: 'id',
+  },
+  {
+    title: '支付金额',
+    field: 'price',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.price || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '退款金额',
+    field: 'refundPrice',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '手续金额',
+    field: 'channelFeePrice',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '订单号',
+    field: 'no',
+    slots: {
+      default: 'no',
+    },
+  },
+  {
+    title: '支付状态',
+    field: 'status',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+    },
+  },
+  {
+    title: '支付渠道',
+    field: 'channelCode',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+    },
+  },
+  {
+    title: '支付时间',
+    field: 'successTime',
+    minWidth: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '支付应用',
+    field: 'appName',
+  },
+  {
+    title: '商品标题',
+    field: 'subject',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    minWidth: 80,
+  },
+];
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index 83f695e4b..0a751cb02 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -1,13 +1,89 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as OrderApi from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
+
+import { columns, querySchema } from './data';
+import detailFrom from './modules/OrderDetail.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'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await OrderApi.getOrderPage({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'pay-order-index',
+};
+
+const [BasicTable] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DetailModal, modalDetailApi] = useVbenModal({
+  connectedComponent: detailFrom,
+});
+
+const openDetail = (id: number) => {
+  modalDetailApi.setData({
+    id,
+  });
+  modalDetailApi.open();
+};
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
     <DocAlert
       title="支付宝支付接入"
       url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@@ -20,23 +96,29 @@ import { DocAlert } from '#/components/doc-alert';
       title="微信小程序支付接入"
       url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
     />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <BasicTable>
+      <template #action="{ row }">
+        <a-button
+          type="link"
+          v-access:code="['pay:order:query']"
+          @click="openDetail(row.id)"
+        >
+          {{ $t('ui.actionTitle.detail') }}
+        </a-button>
+      </template>
+      <template #no="{ row }">
+        <p class="order-font">
+          <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
+        </p>
+        <p class="order-font" v-if="row.no">
+          <Tag size="small" color="orange">支付</Tag> {{ row.no }}
+        </p>
+        <p class="order-font" v-if="row.channelOrderNo">
+          <Tag size="small" color="green">渠道</Tag>
+          {{ row.channelOrderNo }}
+        </p>
+      </template>
+    </BasicTable>
+    <DetailModal />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/order/modules/OrderDetail.vue b/apps/web-antd/src/views/pay/order/modules/OrderDetail.vue
new file mode 100644
index 000000000..e76be4639
--- /dev/null
+++ b/apps/web-antd/src/views/pay/order/modules/OrderDetail.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { Descriptions, Divider, Tag } from 'ant-design-vue';
+
+import * as OrderApi from '#/api/pay/order';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils/dict';
+
+const detailData = ref<OrderApi.PayOrderApi.Order>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  showCancelButton: false,
+  showConfirmButton: false,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as {
+      id: number;
+    };
+
+    detailData.value = await OrderApi.getOrderDetail(id);
+
+    modalApi.modalLoading(false);
+  },
+});
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
+    <Descriptions :column="2">
+      <Descriptions.Item label="商户单号">
+        {{ detailData?.merchantOrderId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付单号">
+        {{ detailData?.no }}
+      </Descriptions.Item>
+      <Descriptions.Item label="应用编号">
+        {{ detailData?.appId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="应用名称">
+        {{ detailData?.appName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付状态">
+        <DictTag
+          size="small"
+          :type="DICT_TYPE.PAY_ORDER_STATUS"
+          :value="detailData?.status"
+        />
+      </Descriptions.Item>
+      <Descriptions.Item label="支付金额">
+        <Tag color="green" size="small">
+          ￥{{ (detailData?.price || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="手续费">
+        <Tag color="orange" size="small">
+          ￥{{ (detailData?.channelFeePrice || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="手续费比例">
+        {{ (detailData?.channelFeeRate || 0 / 100.0).toFixed(2) }}%
+      </Descriptions.Item>
+      <Descriptions.Item label="支付时间">
+        {{ formatDateTime(detailData?.successTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="失效时间">
+        {{ formatDateTime(detailData?.expireTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="创建时间">
+        {{ formatDateTime(detailData?.createTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="更新时间">
+        {{ formatDateTime(detailData?.updateTime) }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Divider />
+    <Descriptions :column="2">
+      <Descriptions.Item label="商品标题">
+        {{ detailData?.subject }}
+      </Descriptions.Item>
+      <Descriptions.Item label="商品描述">
+        {{ detailData?.body }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付渠道">
+        <DictTag
+          size="small"
+          :type="DICT_TYPE.PAY_CHANNEL_CODE"
+          :value="detailData?.channelCode"
+        />
+      </Descriptions.Item>
+      <Descriptions.Item label="支付 IP">
+        {{ detailData?.userIp }}
+      </Descriptions.Item>
+      <Descriptions.Item label="渠道单号">
+        <Tag size="small" color="green" v-if="detailData?.channelOrderNo">
+          {{ detailData?.channelOrderNo }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="渠道用户">
+        {{ detailData?.channelUserId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="退款金额" :span="2">
+        <Tag size="small" color="red">
+          ￥{{ (detailData?.refundPrice || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="通知 URL">
+        {{ detailData?.notifyUrl }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Divider />
+    <Descriptions :column="1">
+      <Descriptions.Item label="支付通道异步回调内容">
+        {{ detailData?.channelNotifyData }}
+      </Descriptions.Item>
+    </Descriptions>
+  </BasicModal>
+</template>
diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json
index 953a07bb3..e5e6a05e5 100644
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -16,7 +16,8 @@
     "delete": "删除{0}",
     "view": "查看{0}",
     "import": "导入",
-    "export": "导出"
+    "export": "导出",
+    "detail": "详情"
   },
   "actionMessage": {
     "deleteConfirm": "确定删除 {0} 吗？",

From 0b9c16a02353261e043854b0cfdb287fdbbb4699 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Mon, 5 May 2025 18:18:48 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E6=B8=A0=E9=81=93=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=94=AF=E4=BB=98=E5=AE=9D=E3=80=81?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E3=80=81=E9=92=B1=E5=8C=85=E5=92=8C=E6=A8=A1?=
 =?UTF-8?q?=E6=8B=9F=E6=B8=A0=E9=81=93=E9=85=8D=E7=BD=AE=EF=BC=8C=E9=87=8D?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E7=9B=B8=E5=85=B3=E6=A8=A1=E5=9D=97=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                                | 2 +-
 apps/web-antd/src/views/pay/app/index.vue                 | 8 ++++----
 .../{AlipayChannelForm.vue => alipay-channel-form.vue}    | 0
 .../{MockChannelForm.vue => mock-channel-form.vue}        | 0
 .../{WalletChannelForm.vue => wallet-channel-form.vue}    | 0
 .../{WeixinChannelForm.vue => weixin-channel-form.vue}    | 0
 apps/web-antd/src/views/pay/order/index.vue               | 2 +-
 .../order/modules/{OrderDetail.vue => order-detail.vue}   | 0
 pnpm-lock.yaml                                            | 5 ++++-
 pnpm-workspace.yaml                                       | 1 +
 10 files changed, 11 insertions(+), 7 deletions(-)
 rename apps/web-antd/src/views/pay/app/modules/channel/{AlipayChannelForm.vue => alipay-channel-form.vue} (100%)
 rename apps/web-antd/src/views/pay/app/modules/channel/{MockChannelForm.vue => mock-channel-form.vue} (100%)
 rename apps/web-antd/src/views/pay/app/modules/channel/{WalletChannelForm.vue => wallet-channel-form.vue} (100%)
 rename apps/web-antd/src/views/pay/app/modules/channel/{WeixinChannelForm.vue => weixin-channel-form.vue} (100%)
 rename apps/web-antd/src/views/pay/order/modules/{OrderDetail.vue => order-detail.vue} (100%)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index cd817905a..be092084f 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -26,7 +26,7 @@
     "#/*": "./src/*"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
+    "@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/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 5116d91ba..08cfc1b35 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -18,10 +18,10 @@ import { PayChannelEnum } from '#/utils/constants';
 
 import { columns, querySchema } from './data';
 import appFrom from './modules/app-form.vue';
-import aliPayFrom from './modules/channel/AlipayChannelForm.vue';
-import mockFrom from './modules/channel/MockChannelForm.vue';
-import walletFrom from './modules/channel/WalletChannelForm.vue';
-import weixinFrom from './modules/channel/WeixinChannelForm.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';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
similarity index 100%
rename from apps/web-antd/src/views/pay/app/modules/channel/AlipayChannelForm.vue
rename to apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
similarity index 100%
rename from apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue
rename to apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/WalletChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
similarity index 100%
rename from apps/web-antd/src/views/pay/app/modules/channel/WalletChannelForm.vue
rename to apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/WeixinChannelForm.vue b/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
similarity index 100%
rename from apps/web-antd/src/views/pay/app/modules/channel/WeixinChannelForm.vue
rename to apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index 0a751cb02..acb53f3d4 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -12,7 +12,7 @@ import * as OrderApi from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
 
 import { columns, querySchema } from './data';
-import detailFrom from './modules/OrderDetail.vue';
+import detailFrom from './modules/order-detail.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
diff --git a/apps/web-antd/src/views/pay/order/modules/OrderDetail.vue b/apps/web-antd/src/views/pay/order/modules/order-detail.vue
similarity index 100%
rename from apps/web-antd/src/views/pay/order/modules/OrderDetail.vue
rename to apps/web-antd/src/views/pay/order/modules/order-detail.vue
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e868a7ce..414a112ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,9 @@ settings:
 
 catalogs:
   default:
+    '@ant-design/icons-vue':
+      specifier: ^7.0.1
+      version: 7.0.1
     '@changesets/changelog-github':
       specifier: ^0.5.1
       version: 0.5.1
@@ -678,7 +681,7 @@ importers:
   apps/web-antd:
     dependencies:
       '@ant-design/icons-vue':
-        specifier: ^7.0.1
+        specifier: 'catalog:'
         version: 7.0.1(vue@3.5.13(typescript@5.8.3))
       '@form-create/ant-design-vue':
         specifier: 'catalog:'
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index efe0a2668..d12ba4ff2 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -40,6 +40,7 @@ catalog:
   '@tanstack/vue-store': ^0.7.0
   '@tinymce/tinymce-vue': ^6.1.0
   '@form-create/ant-design-vue': ^3.2.22
+  '@ant-design/icons-vue': ^7.0.1
   '@form-create/antd-designer': ^3.2.11
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1