Initial commit: OneOS frontend based on yudao-ui-admin-vben

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

@@ -0,0 +1,664 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { InputUpload } from '#/components/upload';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: PayAppApi.App,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'appKey',
+      title: '应用标识',
+      minWidth: 40,
+    },
+    {
+      field: 'name',
+      title: '应用名',
+      minWidth: 40,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      align: 'center',
+      minWidth: 40,
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: CommonStatusEnum.ENABLE,
+          inactiveValue: CommonStatusEnum.DISABLE,
+        },
+      },
+    },
+    {
+      title: '支付宝配置',
+      children: [
+        {
+          title: 'APP',
+          slots: {
+            default: 'alipayAppConfig',
+          },
+        },
+        {
+          title: 'PC 网站',
+          slots: {
+            default: 'alipayPCConfig',
+          },
+        },
+        {
+          title: 'WAP 网站',
+          slots: {
+            default: 'alipayWAPConfig',
+          },
+          minWidth: 10,
+        },
+        {
+          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',
+          },
+          minWidth: 10,
+        },
+        {
+          title: '条码',
+          slots: {
+            default: 'wxBarConfig',
+          },
+        },
+      ],
+    },
+    {
+      title: '钱包支付配置',
+      field: 'walletConfig',
+      slots: {
+        default: 'walletConfig',
+      },
+    },
+    {
+      title: '模拟支付配置',
+      field: 'mockConfig',
+      slots: {
+        default: 'mockConfig',
+      },
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 应用新增/修改的表单 */
+export function useAppFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      fieldName: 'appKey',
+      label: '应用标识',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用标识',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'orderNotifyUrl',
+      label: '支付结果的回调地址',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      fieldName: 'refundNotifyUrl',
+      label: '退款结果的回调地址',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入退款结果的回调地址',
+      },
+    },
+    {
+      fieldName: 'transferNotifyUrl',
+      label: '转账结果的回调地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入转账结果的回调地址',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 渠道新增/修改的表单 */
+export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
+  const schema: VbenFormSchema[] = [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      label: '应用编号',
+      fieldName: 'appId',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+    },
+    {
+      label: '渠道编码',
+      fieldName: 'code',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+    },
+    {
+      label: '渠道费率',
+      fieldName: 'feeRate',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入渠道费率',
+        addonAfter: '%',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      defaultValue: 0,
+    },
+    {
+      label: '渠道状态',
+      fieldName: 'status',
+      component: 'RadioGroup',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+  // 添加通用字段
+  // 根据类型添加特定字段
+  if (formType.includes('alipay_')) {
+    schema.push(
+      {
+        label: '开放平台 APPID',
+        fieldName: 'config.appId',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入开放平台 APPID',
+        },
+      },
+      {
+        label: '网关地址',
+        fieldName: 'config.serverUrl',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'https://openapi.alipay.com/gateway.do',
+              label: '线上环境',
+            },
+            {
+              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+              label: '沙箱环境',
+            },
+          ],
+        },
+      },
+      {
+        label: '算法类型',
+        fieldName: 'config.signType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'RSA2',
+              label: 'RSA2',
+            },
+          ],
+        },
+        defaultValue: 'RSA2',
+      },
+      {
+        label: '公钥类型',
+        fieldName: 'config.mode',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 1,
+              label: '公钥模式',
+            },
+            {
+              value: 2,
+              label: '证书模式',
+            },
+          ],
+        },
+      },
+      {
+        label: '应用私钥',
+        fieldName: 'config.privateKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入应用私钥',
+          rows: 3,
+        },
+      },
+      {
+        label: '支付宝公钥',
+        fieldName: 'config.alipayPublicKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入支付宝公钥',
+          rows: 3,
+        },
+        dependencies: {
+          show(values: any) {
+            return values?.config?.mode === 1;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '商户公钥应用证书',
+        fieldName: 'config.appCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传商户公钥应用证书',
+          },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values: any) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '支付宝公钥证书',
+        fieldName: 'config.alipayPublicCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 3, placeholder: '请上传支付宝公钥证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values: any) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '根证书',
+        fieldName: 'config.rootCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 3, placeholder: '请上传根证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values: any) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '接口内容加密方式',
+        fieldName: 'config.encryptType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'NONE',
+              label: '无加密',
+            },
+            {
+              value: 'AES',
+              label: 'AES',
+            },
+          ],
+        },
+        defaultValue: 'NONE',
+      },
+      {
+        label: '接口内容加密密钥',
+        fieldName: 'config.encryptKey',
+        component: 'Input',
+        rules: 'required',
+        dependencies: {
+          show(values: any) {
+            return values?.config?.encryptType === 'AES';
+          },
+          triggerFields: ['config.encryptType', 'encryptType', 'config'],
+        },
+      },
+    );
+  } else if (formType.includes('wx_')) {
+    schema.push(
+      {
+        label: '微信 APPID',
+        fieldName: 'config.appId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入微信 APPID',
+        },
+      },
+      {
+        label: '商户号',
+        fieldName: 'config.mchId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户号',
+        },
+      },
+      {
+        label: '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: any) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_cert.p12 证书',
+        fieldName: 'config.keyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传 apiclient_cert.p12 证书',
+          },
+          fileUploadProps: {
+            accept: ['p12'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values: any) {
+            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: any) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_key.pem 证书',
+        fieldName: 'config.privateKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传 apiclient_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values: any) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '证书序列号',
+        fieldName: 'config.certSerialNo',
+        component: 'Input',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入证书序列号',
+        },
+        dependencies: {
+          show(values: any) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'public_key.pem 证书',
+        fieldName: 'config.publicKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 3,
+            placeholder: '请上传 public_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        dependencies: {
+          show(values: any) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '公钥 ID',
+        fieldName: 'config.publicKeyId',
+        component: 'Input',
+        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入公钥 ID',
+        },
+        dependencies: {
+          show(values: any) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+    );
+  }
+  // 添加备注字段（所有类型都有）
+  schema.push({
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  });
+  return schema;
+}

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

@@ -0,0 +1,262 @@
+<script lang="ts" setup>
+import type { ActionItem, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum, PayChannelEnum } from '@vben/constants';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteApp, getAppPage, updateAppStatus } from '#/api/pay/app';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import AppForm from './modules/app-form.vue';
+import ChannelForm from './modules/channel-form.vue';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+const [AppFormModal, appFormModalApi] = useVbenModal({
+  connectedComponent: AppForm,
+  destroyOnClose: true,
+});
+
+const [ChannelFormModal, channelFormModalApi] = useVbenModal({
+  connectedComponent: ChannelForm,
+  destroyOnClose: true,
+});
+
+/** 创建应用 */
+function handleCreate() {
+  appFormModalApi.setData(null).open();
+}
+
+/** 编辑应用 */
+function handleEdit(row: PayAppApi.App) {
+  appFormModalApi.setData({ id: row.id }).open();
+}
+
+/** 创建/编辑渠道 */
+async function handleChannelForm(row: PayAppApi.App, payCode: string) {
+  channelFormModalApi.setData({ appId: row.id, code: payCode }).open();
+}
+
+/** 删除应用 */
+async function handleDelete(row: PayAppApi.App) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteApp(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 更新应用状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: PayAppApi.App,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用';
+    confirm({
+      content: `确认要${text + row.name}应用吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        await updateAppStatus({
+          id: row.id!,
+          status: newStatus,
+        });
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 生成渠道配置按钮 */
+function createChannelConfigAction(
+  row: PayAppApi.App,
+  channelCode: string,
+): ActionItem[] {
+  const exists = row.channelCodes?.includes(channelCode);
+  return [
+    {
+      type: exists ? 'primary' : 'danger',
+      size: 'small',
+      icon: exists ? 'lucide:check' : 'lucide:x',
+      onClick: handleChannelForm.bind(null, row, channelCode),
+    },
+  ];
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAppPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayAppApi.App>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <AppFormModal @success="handleRefresh" />
+    <ChannelFormModal @success="handleRefresh" />
+
+    <Grid table-title="应用列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['应用']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:app:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:app:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:app:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #alipayAppConfig="{ row }">
+        <TableAction
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_APP.code)
+          "
+        />
+      </template>
+      <template #alipayPCConfig="{ row }">
+        <TableAction
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_PC.code)
+          "
+        />
+      </template>
+      <template #alipayWAPConfig="{ row }">
+        <TableAction
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_WAP.code)
+          "
+        />
+      </template>
+      <template #alipayQrConfig="{ row }">
+        <TableAction
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_QR.code)
+          "
+        />
+      </template>
+      <template #alipayBarConfig="{ row }">
+        <TableAction
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_BAR.code)
+          "
+        />
+      </template>
+      <template #wxLiteConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_LITE.code)"
+        />
+      </template>
+      <template #wxPubConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_PUB.code)"
+        />
+      </template>
+      <template #wxAppConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_APP.code)"
+        />
+      </template>
+      <template #wxNativeConfig="{ row }">
+        <TableAction
+          :actions="
+            createChannelConfigAction(row, PayChannelEnum.WX_NATIVE.code)
+          "
+        />
+      </template>
+      <template #wxWapConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_WAP.code)"
+        />
+      </template>
+      <template #wxBarConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_BAR.code)"
+        />
+      </template>
+      <template #walletConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.WALLET.code)"
+        />
+      </template>
+      <template #mockConfig="{ row }">
+        <TableAction
+          :actions="createChannelConfigAction(row, PayChannelEnum.MOCK.code)"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { PayAppApi } from '#/api/pay/app';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createApp, getApp, updateApp } from '#/api/pay/app';
+
+import { useAppFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<PayAppApi.App>();
+const title = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['应用'])
+    : $t('ui.actionTitle.create', ['应用']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
+  },
+  layout: 'horizontal',
+  schema: useAppFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayAppApi.App;
+    try {
+      await (formData.value?.id ? updateApp(data) : createApp(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    if (!id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApp(id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="title" class="w-2/5">
+    <Form />
+  </Modal>
+</template>

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

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { PayChannelApi } from '#/api/pay/channel';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+import { $t } from '@vben/locales';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
+
+import { useChannelFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<any>();
+const title = computed(() => {
+  return formData.value?.id === 0
+    ? $t('ui.actionTitle.create', ['渠道'])
+    : $t('ui.actionTitle.edit', ['渠道']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config || {});
+    try {
+      await (data.id ? updateChannel(data) : createChannel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { appId, code } = modalApi.getData() as {
+      appId?: number;
+      code?: string;
+    };
+    if (!appId || !code) {
+      return;
+    }
+    modalApi.lock();
+    formData.value = {
+      appId,
+      code,
+      status: CommonStatusEnum.ENABLE,
+      remark: '',
+      feeRate: 0,
+      config: {},
+    };
+    if (code.includes('alipay_')) {
+      formData.value.config = {
+        appId: undefined,
+        serverUrl: undefined,
+        signType: 'RSA2',
+        mode: undefined,
+        privateKey: undefined,
+        alipayPublicKey: undefined,
+        appCertContent: undefined,
+        alipayPublicCertContent: undefined,
+        rootCertContent: undefined,
+        encryptType: undefined,
+        encryptKey: undefined,
+      };
+    } else if (code.includes('mock')) {
+      formData.value.config = {
+        name: 'mock-conf',
+      };
+    } else if (code.includes('wallet')) {
+      formData.value.config = {
+        config: {
+          name: 'wallet-conf',
+        },
+      };
+    } else if (code.includes('wx')) {
+      formData.value.config = {
+        appId: undefined,
+        mchId: undefined,
+        apiVersion: undefined,
+        mchKey: undefined,
+        keyContent: undefined,
+        privateKeyContent: undefined,
+        certSerialNo: undefined,
+        apiV3Key: undefined,
+        publicKeyContent: undefined,
+        publicKeyId: undefined,
+      };
+    }
+
+    try {
+      const res = await getChannel(appId, code);
+      if (res) {
+        formData.value = {
+          ...res,
+          config: JSON.parse(res.config),
+        };
+      }
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="title" class="w-2/5">
+    <Form :schema="useChannelFormSchema(formData?.code)" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/cashier/data.ts

@@ -0,0 +1,83 @@
+import {
+  SvgAlipayAppIcon,
+  SvgAlipayBarIcon,
+  SvgAlipayPcIcon,
+  SvgAlipayQrIcon,
+  SvgAlipayWapIcon,
+  SvgMockIcon,
+  SvgWalletIcon,
+  SvgWxAppIcon,
+  SvgWxBarIcon,
+  SvgWxLiteIcon,
+  SvgWxNativeIcon,
+  SvgWxPubIcon,
+} from '@vben/icons';
+
+export const channelsAlipay = [
+  {
+    name: '支付宝 PC 网站支付',
+    icon: SvgAlipayPcIcon,
+    code: 'alipay_pc',
+  },
+  {
+    name: '支付宝 Wap 网站支付',
+    icon: SvgAlipayWapIcon,
+    code: 'alipay_wap',
+  },
+  {
+    name: '支付宝 App 网站支付',
+    icon: SvgAlipayAppIcon,
+    code: 'alipay_app',
+  },
+  {
+    name: '支付宝扫码支付',
+    icon: SvgAlipayQrIcon,
+    code: 'alipay_qr',
+  },
+  {
+    name: '支付宝条码支付',
+    icon: SvgAlipayBarIcon,
+    code: 'alipay_bar',
+  },
+];
+
+export const channelsWechat = [
+  {
+    name: '微信公众号支付',
+    icon: SvgWxPubIcon,
+    code: 'wx_pub',
+  },
+  {
+    name: '微信小程序支付',
+    icon: SvgWxLiteIcon,
+    code: 'wx_lite',
+  },
+  {
+    name: '微信 App 支付',
+    icon: SvgWxAppIcon,
+    code: 'wx_app',
+  },
+  {
+    name: '微信扫码支付',
+    icon: SvgWxNativeIcon,
+    code: 'wx_native',
+  },
+  {
+    name: '微信条码支付',
+    icon: SvgWxBarIcon,
+    code: 'wx_bar',
+  },
+];
+
+export const channelsMock = [
+  {
+    name: '钱包支付',
+    icon: SvgWalletIcon,
+    code: 'wallet',
+  },
+  {
+    name: '模拟支付',
+    icon: SvgMockIcon,
+    code: 'mock',
+  },
+];

apps/web-ele/src/views/pay/cashier/index.vue

@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import {
+  PayChannelEnum,
+  PayDisplayModeEnum,
+  PayOrderStatusEnum,
+} from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElImage,
+  ElInput,
+  ElMessage,
+} from 'element-plus';
+
+import { getOrder, submitOrder } from '#/api/pay/order';
+
+import { channelsAlipay, channelsMock, channelsWechat } from './data';
+
+defineOptions({ name: 'PayCashier' });
+
+const route = useRoute();
+const { push } = useRouter();
+const { closeCurrentTab } = useTabs();
+
+const id = ref(); // 支付单号
+const title = ref('支付订单');
+const returnUrl = ref<string>(); // 支付完的回调地址
+const payOrder = ref<PayOrderApi.Order>();
+const interval = ref<any>(undefined); // 定时任务，轮询是否完成支付
+
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+/** 展示形式：二维码 */
+const qrCode = ref({
+  url: '',
+  visible: false,
+});
+
+/** 展示形式：条形码 */
+const barCode = ref({
+  channelCode: '',
+  value: '',
+  visible: false,
+});
+
+/** 获得支付信息 */
+async function getDetail() {
+  // 1. 获取路由参数
+  id.value = route.query.id;
+  if (route.query.returnUrl) {
+    returnUrl.value = decodeURIComponent(route.query.returnUrl as string);
+  }
+  // 1.1 未传递订单编号
+  if (!id.value) {
+    ElMessage.error('未传递支付单号，无法查看对应的支付信息');
+    goReturnUrl('cancel');
+    return;
+  }
+  const res = await getOrder(id.value);
+  // 1.2 无法查询到支付信息
+  if (!res) {
+    ElMessage.error('支付订单不存在，请检查！');
+    goReturnUrl('cancel');
+    return;
+  }
+  // 1.3 如果已支付、或者已关闭，则直接跳转
+  if (res.status === PayOrderStatusEnum.SUCCESS.status) {
+    ElMessage.success('支付成功');
+    goReturnUrl('success');
+    return;
+  } else if (res.status === PayOrderStatusEnum.CLOSED.status) {
+    ElMessage.error('无法支付，原因：订单已关闭');
+    goReturnUrl('close');
+    return;
+  }
+  // 2. 正常展示支付信息
+  payOrder.value = res;
+}
+
+/** 处理支付 */
+function handlePay(channelCode: string) {
+  switch (channelCode) {
+    // 条形码支付，需要特殊处理
+    case PayChannelEnum.ALIPAY_BAR.code: {
+      title.value = '“支付宝”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    case PayChannelEnum.WX_BAR.code: {
+      title.value = '“微信”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    // 微信公众号、小程序支付，无法在 PC 网页中进行
+    case PayChannelEnum.WX_LITE.code: {
+      ElMessage.error('微信小程序：不支持 PC 网站');
+      break;
+    }
+    case PayChannelEnum.WX_PUB.code: {
+      ElMessage.error('微信公众号支付：不支持 PC 网站');
+      break;
+    }
+    default: {
+      submit(channelCode);
+      break;
+    }
+  }
+}
+
+/** 提交支付 */
+async function submit(channelCode: string) {
+  try {
+    const submitParam = {
+      id: id.value,
+      channelCode,
+      returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
+      ...buildSubmitParam(channelCode),
+    };
+    const data = await submitOrder(submitParam);
+    // 直接返回已支付的情况，例如说扫码支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      ElMessage.success('支付成功！');
+      goReturnUrl('success');
+      return;
+    }
+
+    // 展示对应的界面
+    switch (data.displayMode) {
+      case PayDisplayModeEnum.APP.mode: {
+        displayApp(channelCode);
+        break;
+      }
+      case PayDisplayModeEnum.QR_CODE.mode: {
+        displayQrCode(channelCode, data);
+        break;
+      }
+      case PayDisplayModeEnum.URL.mode: {
+        displayUrl(data);
+        break;
+      }
+      // No default
+    }
+
+    // 打开轮询任务
+    createQueryInterval();
+  } finally {
+    //
+  }
+}
+
+/** 构建提交支付的额外参数 */
+function buildSubmitParam(channelCode: string) {
+  // ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
+    return {
+      channelExtras: {
+        auth_code: barCode.value.value,
+      },
+    };
+  }
+  // ② 微信 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.WX_BAR.code) {
+    return {
+      channelExtras: {
+        authCode: barCode.value.value,
+      },
+    };
+  }
+  return {};
+}
+
+/** 提交支付后，URL 的展示形式 */
+function displayUrl(data: any) {
+  location.href = data.displayContent;
+}
+
+/** 提交支付后（扫码支付） */
+function displayQrCode(channelCode: string, data: any) {
+  title.value = '请使用手机浏览器“扫一扫”';
+  if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
+    // 考虑到 WAP 测试，所以引导手机浏览器搞
+  } else if (channelCode.indexOf('alipay_') === 0) {
+    title.value = '请使用支付宝“扫一扫”扫码支付';
+  } else if (channelCode.indexOf('wx_') === 0) {
+    title.value = '请使用微信“扫一扫”扫码支付';
+  }
+  qrCode.value = {
+    url: data.displayContent,
+    visible: true,
+  };
+}
+
+/** 提交支付后（App） */
+function displayApp(channelCode: string) {
+  if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
+    ElMessage.error('支付宝 App 支付：无法在网页支付！');
+  }
+  if (channelCode === PayChannelEnum.WX_APP.code) {
+    ElMessage.error('微信 App 支付：无法在网页支付！');
+  }
+}
+
+/** 轮询查询任务 */
+function createQueryInterval() {
+  if (interval.value) {
+    return;
+  }
+  interval.value = setInterval(async () => {
+    const data = await getOrder(id.value);
+    // 已支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      ElMessage.success('支付成功！');
+      goReturnUrl('success');
+    }
+    // 已取消
+    if (data.status === PayOrderStatusEnum.CLOSED.status) {
+      clearQueryInterval();
+      ElMessage.error('支付已关闭！');
+      goReturnUrl('close');
+    }
+  }, 1000 * 2);
+}
+
+/** 清空查询任务 */
+function clearQueryInterval() {
+  // 清空数据
+  qrCode.value = {
+    url: '',
+    visible: false,
+  };
+  barCode.value = {
+    channelCode: '',
+    value: '',
+    visible: false,
+  };
+  // 清空任务
+  clearInterval(interval.value);
+  interval.value = undefined;
+}
+
+/**
+ * 回到业务的 URL
+ *
+ * @param payResult 支付结果
+ *  ① success：支付成功
+ *  ② cancel：取消支付
+ *  ③ close：支付已关闭
+ */
+function goReturnUrl(payResult: string) {
+  // 清理任务
+  clearQueryInterval();
+
+  // 未配置的情况下，只能关闭
+  if (!returnUrl.value) {
+    closeCurrentTab();
+    return;
+  }
+
+  const url = returnUrl.value.includes('?')
+    ? `${returnUrl.value}&payResult=${payResult}`
+    : `${returnUrl.value}?payResult=${payResult}`;
+  // 如果有配置，且是 http 开头，则浏览器跳转
+  if (returnUrl.value.indexOf('http') === 0) {
+    location.href = url;
+  } else {
+    closeCurrentTab();
+    push({ path: url });
+  }
+}
+
+/** 页面加载时，获取支付信息 */
+onMounted(async () => {
+  await getDetail();
+});
+
+/** 页面卸载时，清理定时任务 */
+onBeforeUnmount(() => {
+  clearQueryInterval();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ElCard class="mt-4">
+      <ElDescriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
+        <ElDescriptions.Item label="支付单号">
+          {{ payOrder?.id }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="商品标题">
+          {{ payOrder?.subject }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="商品内容">
+          {{ payOrder?.body }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="支付金额">
+          {{ `￥${fenToYuan(payOrder?.price || 0)}` }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="创建时间">
+          {{ formatDate(payOrder?.createTime) }}
+        </ElDescriptions.Item>
+        <ElDescriptions.Item label="过期时间">
+          {{ formatDate(payOrder?.expireTime) }}
+        </ElDescriptions.Item>
+      </ElDescriptions>
+    </ElCard>
+    <ElCard title="选择支付宝支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsAlipay"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <ElCard title="选择微信支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsWechat"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <ElCard title="选择其它支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsMock"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </ElCard>
+    <Modal class="w-2/5" :title="title">
+      <ElImage v-if="qrCode.visible" :src="qrCode.url" />
+      <ElInput
+        v-if="barCode.visible"
+        v-model:value="barCode.value"
+        placeholder="请输入条形码"
+        required
+      />
+      <div class="text-right" v-if="barCode.visible">
+        或使用
+        <ElButton
+          type="danger"
+          link
+          target="_blank"
+          href="https://baike.baidu.com/item/条码支付/10711903"
+        >
+          (扫码枪/扫码盒)
+        </ElButton>
+        扫码
+      </div>
+    </Modal>
+  </Page>
+</template>

apps/web-ele/src/views/pay/demo/order/data.ts

@@ -0,0 +1,115 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { formatDateTime } from '@vben/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'spuId',
+      label: '商品',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '华为手机 --- 1.00元', value: 1 },
+          { label: '小米电视 --- 10.00元', value: 2 },
+          { label: '苹果手表 --- 100.00元', value: 3 },
+          { label: '华硕笔记本 --- 1000.00元', value: 4 },
+          { label: '蔚来汽车 --- 200000.00元', value: 5 },
+        ],
+        placeholder: '请选择下单商品',
+        clearable: true,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '订单编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'spuName',
+      title: '商品名字',
+      minWidth: 150,
+    },
+    {
+      field: 'price',
+      title: '支付价格',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'payOrderId',
+      title: '支付单号',
+      minWidth: 120,
+    },
+    {
+      field: 'payStatus',
+      title: '是否支付',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'payTime',
+      title: '支付时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'refundTime',
+      title: '退款时间',
+      minWidth: 180,
+      formatter: ({ cellValue, row }) => {
+        if (cellValue) {
+          return formatDateTime(cellValue) as string;
+        }
+        if (row.payRefundId) {
+          return '退款中，等待退款结果';
+        }
+        return '';
+      },
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-ele/src/views/pay/demo/order/index.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoOrderApi } from '#/api/pay/demo/order';
+
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemoOrderPage, refundDemoOrder } from '#/api/pay/demo/order';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建订单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 支付按钮操作 */
+function handlePay(row: DemoOrderApi.Order) {
+  router.push({
+    name: 'PayCashier',
+    query: {
+      id: row.payOrderId,
+      returnUrl: encodeURIComponent(`/pay/demo/order?id=${row.id}`),
+    },
+  });
+}
+
+/** 退款按钮操作 */
+async function handleRefund(row: DemoOrderApi.Order) {
+  const loadingInstance = ElLoading.service({
+    text: '退款中，请稍后...',
+  });
+  try {
+    await refundDemoOrder(row.id as number);
+    ElMessage.success('发起退款成功！');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemoOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<DemoOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="支付宝、微信退款接入"
+        url="https://doc.iocoder.cn/pay/refund-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="示例订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '发起订单',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '前往支付',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              ifShow: !row.payStatus,
+              onClick: handlePay.bind(null, row),
+            },
+            {
+              label: '发起退款',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              ifShow: row.payStatus && !row.payRefundId,
+              popConfirm: {
+                title: '确定发起退款吗？',
+                confirm: handleRefund.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/demo/order/modules/form.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { DemoOrderApi } from '#/api/pay/demo/order';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDemoOrder } from '#/api/pay/demo/order';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DemoOrderApi.Order;
+    try {
+      await createDemoOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/4" title="发起订单">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/demo/withdraw/data.ts

@@ -0,0 +1,168 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'subject',
+      label: '提现标题',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入提现标题',
+      },
+    },
+    {
+      fieldName: 'price',
+      label: '提现金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 1,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入提现金额',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '提现类型',
+      component: 'Select',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '支付宝', value: 1 },
+          { label: '微信余额', value: 2 },
+          { label: '钱包余额', value: 3 },
+        ],
+        placeholder: '请选择提现类型',
+      },
+    },
+    {
+      fieldName: 'userAccount',
+      label: '收款人账号',
+      component: 'Input',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        componentProps: (values) => {
+          const type = values.type;
+          let placeholder = '请输入收款人账号';
+          switch (type) {
+            case 1: {
+              placeholder = '请输入支付宝账号';
+              break;
+            }
+            case 2: {
+              placeholder = '请输入微信 openid';
+              break;
+            }
+            case 3: {
+              placeholder = '请输入钱包编号';
+              break;
+            }
+          }
+          return {
+            placeholder,
+          };
+        },
+      },
+    },
+    {
+      fieldName: 'userName',
+      label: '收款人姓名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收款人姓名',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '提现单编号',
+      minWidth: 100,
+    },
+    {
+      field: 'subject',
+      title: '提现标题',
+      minWidth: 150,
+    },
+    {
+      field: 'type',
+      title: '提现类型',
+      minWidth: 100,
+      slots: { default: 'type' },
+    },
+    {
+      field: 'price',
+      title: '提现金额',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+      minWidth: 120,
+    },
+    {
+      field: 'userAccount',
+      title: '收款人账号',
+      minWidth: 150,
+    },
+    {
+      field: 'status',
+      title: '提现状态',
+      minWidth: 100,
+      slots: { default: 'status' },
+    },
+    {
+      field: 'payTransferId',
+      title: '转账单号',
+      minWidth: 120,
+    },
+    {
+      field: 'transferChannelCode',
+      title: '转账渠道',
+      minWidth: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'transferTime',
+      title: '转账时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'transferErrorMsg',
+      title: '转账失败原因',
+      minWidth: 150,
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-ele/src/views/pay/demo/withdraw/index.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+import { ElLoading, ElMessage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getDemoWithdrawPage,
+  transferDemoWithdraw,
+} from '#/api/pay/demo/withdraw';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建提现单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 处理转账操作 */
+async function handleTransfer(row: DemoWithdrawApi.Withdraw) {
+  const loadingInstance = ElLoading.service({
+    text: '转账中，请稍后...',
+  });
+  try {
+    const payTransferId = await transferDemoWithdraw(row.id as number);
+    ElMessage.success(`转账提交成功，转账单号：${payTransferId}`);
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemoWithdrawPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<DemoWithdrawApi.Withdraw>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝转账接入"
+        url="https://doc.iocoder.cn/pay/alipay-transfer-demo/"
+      />
+      <DocAlert
+        title="微信转账接入"
+        url="https://doc.iocoder.cn/pay/wx-transfer-demo/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="示例提现单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例提现单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #type="{ row }">
+        <ElTag v-if="row.type === 1">支付宝</ElTag>
+        <ElTag v-else-if="row.type === 2">微信余额</ElTag>
+        <ElTag v-else-if="row.type === 3">钱包余额</ElTag>
+      </template>
+      <template #price="{ row }">
+        <span>￥{{ erpPriceInputFormatter(row.price) }}</span>
+      </template>
+      <template #status="{ row }">
+        <ElTag v-if="row.status === 0 && !row.payTransferId" type="warning">
+          等待转账
+        </ElTag>
+        <ElTag v-else-if="row.status === 0 && row.payTransferId" type="info">
+          转账中
+        </ElTag>
+        <ElTag v-else-if="row.status === 10" type="success"> 转账成功 </ElTag>
+        <ElTag v-else-if="row.status === 20" type="danger"> 转账失败 </ElTag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发起转账',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status === 0 && !row.payTransferId,
+              onClick: handleTransfer.bind(null, row),
+            },
+            {
+              label: '重新转账',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              ifShow: row.status === 20,
+              onClick: handleTransfer.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/demo/withdraw/modules/form.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDemoWithdraw } from '#/api/pay/demo/withdraw';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DemoWithdrawApi.Withdraw;
+    try {
+      await createDemoWithdraw(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/4" :title="$t('ui.actionTitle.create', ['示例提现单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/notify/data.ts

@@ -0,0 +1,271 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { getAppList } from '#/api/pay/app';
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getAppList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择应用编号',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '通知类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE, 'number'),
+        placeholder: '请选择通知类型',
+      },
+    },
+    {
+      fieldName: 'dataId',
+      label: '关联编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入关联编号',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '通知状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS, 'number'),
+        placeholder: '请选择通知状态',
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户订单编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户订单编号',
+      },
+    },
+    {
+      fieldName: 'merchantRefundId',
+      label: '商户退款编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户退款编号',
+      },
+    },
+    {
+      fieldName: 'merchantTransferId',
+      label: '商户转账编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户转账编号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 100,
+    },
+    {
+      field: 'appName',
+      title: '应用名称',
+      minWidth: 150,
+    },
+    {
+      field: 'merchantInfo',
+      title: '商户单信息',
+      minWidth: 240,
+      slots: {
+        default: 'merchantInfo',
+      },
+    },
+    {
+      field: 'type',
+      title: '通知类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
+      },
+    },
+    {
+      field: 'dataId',
+      title: '关联编号',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '通知状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
+      },
+    },
+    {
+      field: 'lastExecuteTime',
+      title: '最后通知时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'nextNotifyTime',
+      title: '下次通知时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'notifyTimes',
+      title: '通知次数',
+      minWidth: 120,
+      formatter: ({ row }) => `${row.notifyTimes} / ${row.maxNotifyTimes}`,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'type',
+      label: '通知类型',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_NOTIFY_TYPE,
+          value: val,
+        }),
+    },
+    {
+      field: 'dataId',
+      label: '关联编号',
+    },
+    {
+      field: 'status',
+      label: '通知状态',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_NOTIFY_STATUS,
+          value: val,
+        }),
+    },
+    {
+      field: 'merchantOrderId',
+      label: '商户订单编号',
+    },
+    {
+      field: 'lastExecuteTime',
+      label: '最后通知时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'nextNotifyTime',
+      label: '下次通知时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'notifyTimes',
+      label: '通知次数',
+    },
+    {
+      field: 'maxNotifyTimes',
+      label: '最大通知次数',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+  ];
+}
+
+/** 详情的日志字段 */
+export function useDetailLogColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '通知状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
+      },
+    },
+    {
+      field: 'notifyTimes',
+      title: '通知次数',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '通知时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'response',
+      title: '响应结果',
+      minWidth: 200,
+    },
+  ];
+}

apps/web-ele/src/views/pay/notify/index.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayNotifyApi } from '#/api/pay/notify';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyTaskPage } from '#/api/pay/notify';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: PayNotifyApi.NotifyTask) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyTaskPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayNotifyApi.NotifyTask>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="通知列表">
+      <template #merchantInfo="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm" v-if="row.merchantOrderId">
+            <ElTag size="small" type="primary">商户订单编号</ElTag>
+            {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.merchantRefundId">
+            <ElTag size="small" type="warning">商户退款编号</ElTag>
+            {{ row.merchantRefundId }}
+          </p>
+          <p class="text-sm" v-if="row.merchantTransferId">
+            <ElTag size="small" type="success">商户转账编号</ElTag>
+            {{ row.merchantTransferId }}
+          </p>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:notify:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/notify/modules/detail.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayNotifyApi } from '#/api/pay/notify';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElDivider } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyTaskDetail } from '#/api/pay/notify';
+import { useDescription } from '#/components/description';
+
+import { useDetailLogColumns, useDetailSchema } from '../data';
+
+const formData = ref<PayNotifyApi.NotifyTask>();
+
+const [Description] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [LogGrid, logGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailLogColumns(),
+    height: 'auto',
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: true,
+      refresh: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayNotifyApi.NotifyTask>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotifyTaskDetail(data.id);
+      logGridApi.grid?.reloadData(formData.value?.logs || []);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="通知详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Description :data="formData" />
+
+    <ElDivider />
+
+    <LogGrid table-title="支付通知列表" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/order/data.ts

@@ -0,0 +1,271 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入应用编号',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '支付渠道',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择支付渠道',
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '支付单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入支付单号',
+      },
+    },
+    {
+      fieldName: 'channelOrderNo',
+      label: '渠道单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '支付状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择支付状态',
+        options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'price',
+      title: '支付金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'channelFeePrice',
+      title: '手续金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'no',
+      title: '订单号',
+      minWidth: 240,
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      field: 'status',
+      title: '支付状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+      },
+    },
+    {
+      field: 'channelCode',
+      title: '支付渠道',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'successTime',
+      title: '支付时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'appName',
+      title: '支付应用',
+      minWidth: 150,
+    },
+    {
+      field: 'subject',
+      title: '商品标题',
+      minWidth: 200,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantOrderId',
+      label: '商户单号',
+    },
+    {
+      field: 'no',
+      label: '支付单号',
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'status',
+      label: '支付状态',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_ORDER_STATUS,
+          value: val,
+        }),
+    },
+    {
+      field: 'price',
+      label: '支付金额',
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
+    },
+    {
+      field: 'channelFeePrice',
+      label: '手续费',
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
+    },
+    {
+      field: 'channelFeeRate',
+      label: '手续费比例',
+      render: (val) => `${erpPriceInputFormatter(val)}%`,
+    },
+    {
+      field: 'successTime',
+      label: '支付时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'expireTime',
+      label: '失效时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'subject',
+      label: '商品标题',
+    },
+    {
+      field: 'body',
+      label: '商品描述',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: val,
+        }),
+    },
+    {
+      field: 'userIp',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道单号',
+      render: (val) => (val ? h(ElTag, { color: 'green' }, () => val) : ''),
+    },
+    {
+      field: 'channelUserId',
+      label: '渠道用户',
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}

apps/web-ele/src/views/pay/order/index.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportOrder, getOrderPage } from '#/api/pay/order';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出支付订单 */
+async function handleExport() {
+  const data = await exportOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '支付订单.xls', source: data });
+}
+
+/** 查看详情 */
+function handleDetail(row: PayOrderApi.Order) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="支付订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export', ['支付订单']),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm">
+            <ElTag size="small" type="primary"> 商户</ElTag>
+            {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.no">
+            <ElTag size="small" type="warning">支付</ElTag> {{ row.no }}
+          </p>
+          <p class="text-sm" v-if="row.channelOrderNo">
+            <ElTag size="small" type="success">渠道</ElTag>
+            {{ row.channelOrderNo }}
+          </p>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/order/modules/detail.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getOrderDetail } from '#/api/pay/order';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<PayOrderApi.Order>();
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOrderDetail(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="订单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/refund/data.ts

@@ -0,0 +1,280 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'appId',
+      label: '应用编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入应用编号',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '退款渠道',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择退款渠道',
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+      },
+    },
+    {
+      fieldName: 'merchantOrderId',
+      label: '商户单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      fieldName: 'merchantRefundId',
+      label: '退款单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入退款单号',
+      },
+    },
+    {
+      fieldName: 'channelOrderNo',
+      label: '渠道单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      fieldName: 'channelRefundNo',
+      label: '渠道退款单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入渠道退款单号',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择退款状态',
+        options: getDictOptions(DICT_TYPE.PAY_REFUND_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'merchantRefundId',
+      title: '退款单号',
+      minWidth: 240,
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      field: 'status',
+      title: '退款状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_REFUND_STATUS },
+      },
+    },
+    {
+      field: 'channelCode',
+      title: '退款渠道',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'successTime',
+      title: '退款时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'reason',
+      title: '退款原因',
+      minWidth: 200,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    // 基本信息部分
+    {
+      field: 'merchantRefundId',
+      label: '商户退款单号',
+      render: (val) => h(ElTag, {}, () => val || '-'),
+    },
+    {
+      field: 'channelRefundNo',
+      label: '渠道退款单号',
+      render: (val) => h(ElTag, { type: 'success' }, () => val || '-'),
+    },
+    {
+      field: 'merchantOrderId',
+      label: '商户支付单号',
+      render: (val) => h(ElTag, {}, () => val || '-'),
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道支付单号',
+      render: (val) => h(ElTag, { type: 'success' }, () => val || '-'),
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'payPrice',
+      label: '支付金额',
+      render: (val) =>
+        h(
+          ElTag,
+          { type: 'success' },
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
+        ),
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      render: (val) =>
+        h(
+          ElTag,
+          { type: 'danger' },
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
+        ),
+    },
+    {
+      field: 'status',
+      label: '退款状态',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_REFUND_STATUS,
+          value: val,
+        }),
+    },
+    {
+      field: 'successTime',
+      label: '退款时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    // 渠道信息部分
+    {
+      field: 'channelCode',
+      label: '退款渠道',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: val,
+        }),
+    },
+    {
+      field: 'reason',
+      label: '退款原因',
+    },
+    {
+      field: 'userIp',
+      label: '退款 IP',
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    // 错误信息部分
+    {
+      field: 'channelErrorCode',
+      label: '渠道错误码',
+    },
+    {
+      field: 'channelErrorMsg',
+      label: '渠道错误码描述',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}

apps/web-ele/src/views/pay/refund/index.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayRefundApi } from '#/api/pay/refund';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportRefund, getRefundPage } from '#/api/pay/refund';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出退款订单 */
+async function handleExport() {
+  const data = await exportRefund(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '退款订单.xls', source: data });
+}
+
+/** 查看详情 */
+function handleDetail(row: PayRefundApi.Refund) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRefundPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayRefundApi.Refund>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="支付宝、微信退款接入"
+        url="https://doc.iocoder.cn/pay/refund-demo/"
+      />
+    </template>
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="支付退款列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export', ['退款订单']),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:refund:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:refund:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm">
+            <ElTag size="small" type="primary"> 商户</ElTag>
+            {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.merchantRefundId">
+            <ElTag size="small" type="warning">退款</ElTag>
+            {{ row.merchantRefundId }}
+          </p>
+          <p class="text-sm" v-if="row.channelRefundNo">
+            <ElTag size="small" type="success">渠道</ElTag>
+            {{ row.channelRefundNo }}
+          </p>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/refund/modules/detail.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { PayRefundApi } from '#/api/pay/refund';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getRefund } from '#/api/pay/refund';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<PayRefundApi.Refund>();
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayRefundApi.Refund>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getRefund(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="退款详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/transfer/data.ts

@@ -0,0 +1,268 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '转账单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入转账单号',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '转账渠道',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
+        clearable: true,
+        placeholder: '请选择支付渠道',
+      },
+    },
+    {
+      fieldName: 'merchantTransferId',
+      label: '商户单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
+        clearable: true,
+        placeholder: '请选择类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '转账状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
+        clearable: true,
+        placeholder: '请选择转账状态',
+      },
+    },
+    {
+      fieldName: 'userName',
+      label: '收款人姓名',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入收款人姓名',
+      },
+    },
+    {
+      fieldName: 'userAccount',
+      label: '收款人账号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入收款人账号',
+      },
+    },
+    {
+      fieldName: 'channelTransferNo',
+      label: '渠道单号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'price',
+      title: '转账金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'merchantTransferId',
+      title: '转账单号',
+      minWidth: 350,
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      field: 'status',
+      title: '转账状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
+      },
+    },
+    {
+      field: 'channelCode',
+      title: '转账渠道',
+      minWidth: 140,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'successTime',
+      title: '转账时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'subject',
+      title: '转账标题',
+      minWidth: 150,
+    },
+    {
+      field: 'appName',
+      title: '支付应用',
+      minWidth: 150,
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+      minWidth: 150,
+    },
+    {
+      field: 'userAccount',
+      title: '收款账号',
+      minWidth: 200,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantTransferId',
+      label: '商户单号',
+      render: (val) => h(ElTag, {}, () => val),
+    },
+    {
+      field: 'no',
+      label: '转账单号',
+      render: (val) => h(ElTag, { color: 'orange' }, () => val),
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'status',
+      label: '转账状态',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_TRANSFER_STATUS,
+          value: val,
+        }),
+    },
+    {
+      field: 'price',
+      label: '转账金额',
+      render: (val) =>
+        h(
+          ElTag,
+          { color: 'success' },
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
+        ),
+    },
+    {
+      field: 'successTime',
+      label: '转账时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'userName',
+      label: '收款人姓名',
+    },
+    {
+      field: 'userAccount',
+      label: '收款人账号',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: val,
+        }),
+    },
+    {
+      field: 'userIp',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelTransferNo',
+      label: '渠道单号',
+      render: (val) => (val ? h(ElTag, { color: 'success' }, () => val) : ''),
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '转账渠道通知内容',
+    },
+  ];
+}

apps/web-ele/src/views/pay/transfer/index.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayTransferApi } from '#/api/pay/transfer';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportTransfer, getTransferPage } from '#/api/pay/transfer';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出转账单 */
+async function handleExport() {
+  const data = await exportTransfer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '转账单.xls', source: data });
+}
+
+/** 查看转账详情 */
+function handleDetail(row: PayTransferApi.Transfer) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTransferPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayTransferApi.Transfer>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="转账管理" url="https://doc.iocoder.cn/pay/transfer/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="转账单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export', ['转账单']),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:transfer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:transfer:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm">
+            <ElTag size="small" type="primary"> 商户</ElTag>
+            {{ row.merchantTransferId }}
+          </p>
+          <p class="text-sm" v-if="row.no">
+            <ElTag size="small" type="warning">转账</ElTag> {{ row.no }}
+          </p>
+          <p class="text-sm" v-if="row.channelTransferNo">
+            <ElTag size="small" type="success">渠道</ElTag>
+            {{ row.channelTransferNo }}
+          </p>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/transfer/modules/detail.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { PayTransferApi } from '#/api/pay/transfer';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getTransfer } from '#/api/pay/transfer';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<PayTransferApi.Transfer>();
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayTransferApi.Transfer>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTransfer(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="转账单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>

apps/web-ele/src/views/pay/wallet/balance/data.ts

@@ -0,0 +1,137 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+      minWidth: 100,
+    },
+    {
+      title: '用户编号',
+      field: 'userId',
+      minWidth: 120,
+    },
+    {
+      title: '用户类型',
+      field: 'userType',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      title: '余额',
+      field: 'balance',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '累计支出',
+      field: 'totalExpense',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '累计充值',
+      field: 'totalRecharge',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '冻结金额',
+      field: 'freezePrice',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 钱包交易记录列表字段 */
+export function useTransactionGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '关联业务标题',
+      minWidth: 200,
+    },
+    {
+      field: 'price',
+      title: '交易金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'balance',
+      title: '钱包余额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'createTime',
+      title: '交易时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}

apps/web-ele/src/views/pay/wallet/balance/index.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWalletPage } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看钱包 */
+function handleDetail(row: Required<PayWalletApi.Wallet>) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWalletPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PayWalletApi.Wallet>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <DetailModal @reload="handleRefresh" />
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
+
+import { useTransactionGridColumns } from '../data';
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useTransactionGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId: modalApi.getData<PayWalletApi.Wallet>().id,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<WalletTransactionApi.Transaction>,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      await gridApi.query();
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="钱包交易记录"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Page auto-content-height>
+      <Grid />
+    </Page>
+  </Modal>
+</template>

apps/web-ele/src/views/pay/wallet/rechargePackage/data.ts

@@ -0,0 +1,151 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入套餐名称',
+      },
+    },
+    {
+      fieldName: 'payPrice',
+      label: '支付金额(元)',
+      component: 'InputNumber',
+      rules: z.number().min(0, '支付金额不能小于0'),
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入支付金额',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'bonusPrice',
+      label: '赠送金额(元)',
+      component: 'InputNumber',
+      rules: z.number().min(0, '赠送金额不能小于0'),
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+        placeholder: '请输入赠送金额',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入套餐名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '套餐编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '套餐名称',
+      minWidth: 150,
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      minWidth: 120,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'bonusPrice',
+      title: '赠送金额',
+      minWidth: 120,
+      formatter: 'formatFenToYuanAmount',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WalletRechargePackageApi } from '#/api/pay/wallet/rechargePackage';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWalletRechargePackage,
+  getWalletRechargePackagePage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建套餐 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑套餐 */
+function handleEdit(row: WalletRechargePackageApi.WalletRechargePackage) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除套餐 */
+async function handleDelete(
+  row: WalletRechargePackageApi.WalletRechargePackage,
+) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteWalletRechargePackage(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWalletRechargePackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WalletRechargePackageApi.WalletRechargePackage>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="充值套餐列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['充值套餐']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:wallet-recharge-package:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:wallet-recharge-package:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:wallet-recharge-package:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-ele/src/views/pay/wallet/rechargePackage/modules/form.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { WalletRechargePackageApi } from '#/api/pay/wallet/rechargePackage';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan, yuanToFen } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWalletRechargePackage,
+  getWalletRechargePackage,
+  updateWalletRechargePackage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<WalletRechargePackageApi.WalletRechargePackage>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['充值套餐'])
+    : $t('ui.actionTitle.create', ['充值套餐']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as WalletRechargePackageApi.WalletRechargePackage;
+    try {
+      // 转换金额单位
+      data.payPrice = yuanToFen(data.payPrice);
+      data.bonusPrice = yuanToFen(data.bonusPrice);
+      await (formData.value?.id
+        ? updateWalletRechargePackage(data)
+        : createWalletRechargePackage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data =
+      modalApi.getData<WalletRechargePackageApi.WalletRechargePackage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWalletRechargePackage(data.id);
+      // 转换金额单位
+      formData.value.payPrice = Number.parseFloat(
+        fenToYuan(formData.value.payPrice),
+      );
+      formData.value.bonusPrice = Number.parseFloat(
+        fenToYuan(formData.value.bonusPrice),
+      );
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/4">
+    <Form class="mx-4" />
+  </Modal>
+</template>