diff --git a/.vscode/settings.json b/.vscode/settings.json
index d51511a2c7873c443cc4a2a343b02178f2be7e5f..dc371b9b04933e9119e04e4aee0e748d1b876503 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -100,7 +100,7 @@
     "**/.stylelintcache": true,
     "**/.DS_Store": true,
     "**/vite.config.mts.*": true,
-    "**/tea.yaml": true,
+    "**/tea.yaml": true
   },
   "files.watcherExclude": {
     "**/.git/objects/**": true,
@@ -110,7 +110,7 @@
     "**/tmp/**": true,
     "**/bower_components/**": true,
     "**/dist/**": true,
-    "**/yarn.lock": true,
+    "**/yarn.lock": true
   },
 
   "typescript.tsserver.exclude": ["**/node_modules", "**/dist", "**/.turbo"],
diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index e14c38c255f49a389790f478b38fc253ab477d2e..c4dcb2a86b2d032af371c323d835c5e3c64c054a 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -269,7 +269,7 @@ setupVbenVxeTable({
     // vxeUI.formats.add
     // add by 星语：数量格式化，例如说：金额
     vxeUI.formats.add('formatNumber', {
-      cellFormatMethod({ cellValue }, digits = 2) {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
         if (cellValue === null || cellValue === undefined) {
           return '';
         }
@@ -283,6 +283,22 @@ setupVbenVxeTable({
         return cellValue.toFixed(digits);
       },
     });
+
+    vxeUI.formats.add('formatFraction', {
+      tableCellFormatMethod({ cellValue }) {
+        if (cellValue === null || cellValue === undefined) {
+          return '0.00';
+        }
+        if (isString(cellValue)) {
+          cellValue = Number.parseFloat(cellValue);
+        }
+        // 如果非 number，则直接返回空串
+        if (Number.isNaN(cellValue)) {
+          return '0.00';
+        }
+        return `${(cellValue / 100).toFixed(2)}元`;
+      },
+    });
   },
   useVbenForm,
 });
diff --git a/apps/web-antd/src/api/pay/app/index.ts b/apps/web-antd/src/api/pay/app/index.ts
index 1eae34420265c2726f9f67df5b05366d24a375d7..2b09c57d20f9de9abc8358c32a583c00d582bc82 100644
--- a/apps/web-antd/src/api/pay/app/index.ts
+++ b/apps/web-antd/src/api/pay/app/index.ts
@@ -23,10 +23,21 @@ export namespace PayAppApi {
     id: number;
     status: number;
   }
+
+  export interface AppPageReqVO extends PageParam {
+    name?: string;
+    status?: number;
+    remark?: string;
+    payNotifyUrl?: string;
+    refundNotifyUrl?: string;
+    transferNotifyUrl?: string;
+    merchantName?: string;
+    createTime?: Date[];
+  }
 }
 
 /** 查询支付应用列表 */
-export function getAppPage(params: PageParam) {
+export function getAppPage(params: PayAppApi.AppPageReqVO) {
   return requestClient.get<PageResult<PayAppApi.App>>('/pay/app/page', {
     params,
   });
diff --git a/apps/web-antd/src/api/pay/demo/index.ts b/apps/web-antd/src/api/pay/demo/order/index.ts
similarity index 41%
rename from apps/web-antd/src/api/pay/demo/index.ts
rename to apps/web-antd/src/api/pay/demo/order/index.ts
index a0f3c6886796603b603e33310b3f20db178c00d3..2623510593383e80a41b35153cd71cfb01623c29 100644
--- a/apps/web-antd/src/api/pay/demo/index.ts
+++ b/apps/web-antd/src/api/pay/demo/order/index.ts
@@ -2,29 +2,38 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
-export namespace PayDemoApi {
+export namespace DemoOrderApi {
   /** 示例订单信息 */
-  export interface DemoOrder {
-    spuId: number;
-    createTime: Date;
+  export interface Order {
+    id?: number;
+    userId?: number;
+    spuName?: string;
+    price?: number;
+    payStatus?: boolean;
+    payOrderId?: number;
+    payTime?: Date;
+    payChannelCode?: string;
+    payRefundId?: number;
+    refundPrice?: number;
+    refundTime?: Date;
+    spuId?: number;
+    createTime?: Date;
+  }
+
+  export interface OrderPageReqVO extends PageParam {
+    spuId?: number;
+    createTime?: Date[];
   }
 }
 
 /** 创建示例订单 */
-export function createDemoOrder(data: PayDemoApi.DemoOrder) {
+export function createDemoOrder(data: DemoOrderApi.Order) {
   return requestClient.post('/pay/demo-order/create', data);
 }
 
-/** 获得示例订单 */
-export function getDemoOrder(id: number) {
-  return requestClient.get<PayDemoApi.DemoOrder>(
-    `/pay/demo-order/get?id=${id}`,
-  );
-}
-
 /** 获得示例订单分页 */
-export function getDemoOrderPage(params: PageParam) {
-  return requestClient.get<PageResult<PayDemoApi.DemoOrder>>(
+export function getDemoOrderPage(params: DemoOrderApi.OrderPageReqVO) {
+  return requestClient.get<PageResult<DemoOrderApi.Order>>(
     '/pay/demo-order/page',
     {
       params,
diff --git a/apps/web-antd/src/api/pay/demo/transfer/index.ts b/apps/web-antd/src/api/pay/demo/transfer/index.ts
deleted file mode 100644
index e06dbec8b76c91d99bdc2a3db8c444430790bb48..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/api/pay/demo/transfer/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { PageParam, PageResult } from '@vben/request';
-
-import { requestClient } from '#/api/request';
-
-export namespace PayDemoTransferApi {
-  /** 示例转账单信息 */
-  export interface DemoTransfer {
-    price: number;
-    type: number;
-    userName: string;
-    alipayLogonId: string;
-    openid: string;
-  }
-}
-
-/** 创建示例转账单 */
-export function createDemoTransfer(data: PayDemoTransferApi.DemoTransfer) {
-  return requestClient.post('/pay/demo-transfer/create', data);
-}
-
-/** 获得示例转账单分页 */
-export function getDemoTransferPage(params: PageParam) {
-  return requestClient.get<PageResult<PayDemoTransferApi.DemoTransfer>>(
-    '/pay/demo-transfer/page',
-    {
-      params,
-    },
-  );
-}
diff --git a/apps/web-antd/src/api/pay/demo/withdraw/index.ts b/apps/web-antd/src/api/pay/demo/withdraw/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3711ff9e3029d5fdc4360a6d677081cf3629832b
--- /dev/null
+++ b/apps/web-antd/src/api/pay/demo/withdraw/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace DemoWithdrawApi {
+  /** 示例提现单信息 */
+  export interface Withdraw {
+    id?: number;
+    subject: string;
+    price: number;
+    userName: string;
+    userAccount: string;
+    type: number;
+    status?: number;
+    payTransferId?: number;
+    transferChannelCode?: string;
+    transferTime?: Date;
+    transferErrorMsg?: string;
+  }
+}
+
+/** 查询示例提现单列表 */
+export function getDemoWithdrawPage(params: PageParam) {
+  return requestClient.get<PageResult<DemoWithdrawApi.Withdraw>>(
+    '/pay/demo-withdraw/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 创建示例提现单 */
+export function createDemoWithdraw(data: DemoWithdrawApi.Withdraw) {
+  return requestClient.post('/pay/demo-withdraw/create', data);
+}
+
+/** 发起提现单转账 */
+export function transferDemoWithdraw(id: number) {
+  return requestClient.post(`/pay/demo-withdraw/transfer?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/pay/transfer/index.ts b/apps/web-antd/src/api/pay/transfer/index.ts
index fd8bc9d3a5cf618711da5c0debb5b224a0478fb3..ba206ec5ce97d90e8eb9b86defe9c413dd8f274a 100644
--- a/apps/web-antd/src/api/pay/transfer/index.ts
+++ b/apps/web-antd/src/api/pay/transfer/index.ts
@@ -52,7 +52,9 @@ export function getTransfer(id: number) {
   );
 }
 
-/** 创建转账单 */
-export function createTransfer(data: PayTransferApi.Transfer) {
-  return requestClient.post('/pay/transfer/create', data);
+/** 导出转账单 */
+export function exportTransfer(params: any) {
+  return requestClient.download('/pay/transfer/export-excel', {
+    params,
+  });
 }
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index 80b7b3a116bb37ec26295e094de6fbc0cda115a6..348a47317b00ddbf5fa2ec77e17e2a628fdd6467 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -12,10 +12,11 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
-  Divider,
+  Col,
   Input,
   Radio,
   RadioGroup,
+  Row,
   TabPane,
   Tabs,
   Tooltip,
@@ -91,8 +92,8 @@ const getDeptNames = (deptIds: number[]): string => {
 
 // 使用 VbenDrawer
 const [Drawer, drawerApi] = useVbenDrawer({
-  header: false,
-  closable: false,
+  header: true,
+  closable: true,
   onCancel() {
     drawerApi.close();
   },
@@ -142,28 +143,28 @@ defineExpose({ showStartUserNodeConfig });
 </script>
 <template>
   <Drawer>
-    <div class="config-header">
-      <!--    TODO v-mountedFocus 自动聚集 需要迁移一下 -->
-      <Input
-        v-if="showInput"
-        type="text"
-        class="config-editable-input"
-        @blur="blurEvent()"
-        v-model:value="nodeName"
-        :placeholder="nodeName"
-      />
-      <div v-else class="node-name">
-        {{ nodeName }}
-        <IconifyIcon
-          class="ml-1"
-          icon="ep:edit-pen"
-          :size="16"
-          @click="clickIcon()"
+    <template #title>
+      <div class="config-header">
+        <!--    TODO v-mountedFocus 自动聚集 需要迁移一下 -->
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
         />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon
+            class="ml-1"
+            icon="ep:edit-pen"
+            :size="16"
+            @click="clickIcon()"
+          />
+        </div>
       </div>
-      <Divider />
-    </div>
-
+    </template>
     <Tabs v-model:active-key="activeTabName" type="card">
       <TabPane tab="权限" key="user">
         <TypographyText
@@ -212,69 +213,76 @@ defineExpose({ showStartUserNodeConfig });
         key="fields"
         v-if="formType === BpmModelFormType.NORMAL"
       >
-        <div class="field-setting-pane">
-          <div class="field-setting-desc">字段权限</div>
-          <div class="field-permit-title">
-            <div class="setting-title-label first-title">字段名称</div>
-            <div class="other-titles">
-              <span
-                class="setting-title-label cursor-pointer"
-                @click="updatePermission('READ')"
-              >
-                只读
-              </span>
-              <span
-                class="setting-title-label cursor-pointer"
-                @click="updatePermission('WRITE')"
-              >
-                可编辑
-              </span>
-              <span
-                class="setting-title-label cursor-pointer"
-                @click="updatePermission('NONE')"
-              >
-                隐藏
-              </span>
-            </div>
-          </div>
-          <div
-            class="field-setting-item"
-            v-for="(item, index) in fieldsPermissionConfig"
-            :key="index"
-          >
-            <div class="field-setting-item-label">{{ item.title }}</div>
-            <RadioGroup
-              class="field-setting-item-group"
-              v-model:value="item.permission"
-            >
-              <div class="item-radio-wrap">
-                <Radio
-                  :value="FieldPermissionType.READ"
-                  size="large"
-                  :label="FieldPermissionType.READ"
-                >
-                  <span></span>
-                </Radio>
-              </div>
-              <div class="item-radio-wrap">
-                <Radio
-                  :value="FieldPermissionType.WRITE"
-                  size="large"
-                  :label="FieldPermissionType.WRITE"
-                >
-                  <span></span>
-                </Radio>
-              </div>
-              <div class="item-radio-wrap">
-                <Radio
-                  :value="FieldPermissionType.NONE"
-                  size="large"
-                  :label="FieldPermissionType.NONE"
-                >
-                  <span></span>
-                </Radio>
-              </div>
-            </RadioGroup>
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
           </div>
         </div>
       </TabPane>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fdeac0433c6095de77e98c1b6913fff68d993a4a
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -0,0 +1,1252 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import type { ButtonSetting, SimpleFlowNode } from '../../consts';
+import type { UserTaskFormType } from '../../helpers';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  Switch,
+  TabPane,
+  Tabs,
+  Textarea,
+  TreeSelect,
+  TypographyText,
+} from 'ant-design-vue';
+
+// TODO import { defaultProps4AntTree } from '#/utils/tree';
+import {
+  APPROVE_METHODS,
+  APPROVE_TYPE,
+  ApproveMethodType,
+  ApproveType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  ASSIGN_START_USER_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  DEFAULT_BUTTON_SETTING,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+  NodeType,
+  OPERATION_BUTTON_NAME,
+  ProcessVariableEnum,
+  REJECT_HANDLER_TYPES,
+  RejectHandlerType,
+  TIME_UNIT_TYPES,
+  TIMEOUT_HANDLER_TYPES,
+  TimeoutHandlerType,
+  TimeUnitType,
+  TRANSACTOR_DEFAULT_BUTTON_SETTING,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import { convertTimeUnit, getApproveTypeText } from './utils';
+
+// TODO import UserTaskListener from './components/UserTaskListener.vue';
+
+defineOptions({ name: 'UserTaskNodeConfig' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const emits = defineEmits<{
+  findReturnTaskNodes: [nodeList: SimpleFlowNode[]];
+}>();
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  if (
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+  ) {
+    label = `${label}(指定部门向上)`;
+  } else if (
+    configForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    label = `${label}(表单内部门向上)`;
+  } else {
+    label = `${label}(发起人部门向上)`;
+  }
+  return label;
+});
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+// 节点名称配置
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.USER_TASK_NODE,
+);
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+// 表单字段权限设置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+// 操作按钮设置
+const {
+  buttonsSetting,
+  btnDisplayNameEdit,
+  changeBtnDisplayName,
+  btnDisplayNameBlurEvent,
+} = useButtonsSetting();
+const approveType = ref(ApproveType.USER);
+// 审批人表单设置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  candidateStrategy: [
+    { required: true, message: '审批人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+  approveMethod: [
+    { required: true, message: '多人审批方式不能为空', trigger: 'change' },
+  ],
+  approveRatio: [
+    { required: true, message: '通过比例不能为空', trigger: 'blur' },
+  ],
+  returnNodeId: [
+    { required: true, message: '驳回节点不能为空', trigger: 'change' },
+  ],
+  timeoutHandlerEnable: [{ required: true }],
+  timeoutHandlerType: [{ required: true }],
+  timeDuration: [
+    { required: true, message: '超时时间不能为空', trigger: 'blur' },
+  ],
+  maxRemindCount: [
+    { required: true, message: '提醒次数不能为空', trigger: 'blur' },
+  ],
+  assignEmptyHandlerType: [{ required: true }],
+  assignEmptyHandlerUserIds: [
+    { required: true, message: '用户不能为空', trigger: 'change' },
+  ],
+  assignStartUserHandlerType: [{ required: true }],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  handleCandidateParam,
+  parseCandidateParam,
+  getShowText,
+} = useNodeForm(currentNode.value.type);
+const configForm = tempConfigForm as Ref<UserTaskFormType>;
+
+// 改变审批人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+  configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
+};
+
+// 审批方式改变
+const approveMethodChanged = () => {
+  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = 100;
+  }
+  formRef.value.clearValidate('approveRatio');
+};
+// 审批拒绝 可退回的节点
+const returnTaskList = ref<SimpleFlowNode[]>([]);
+// 审批人超时未处理设置
+const {
+  timeoutHandlerChange,
+  cTimeoutType,
+  timeoutHandlerTypeChanged,
+  timeUnit,
+  timeUnitChange,
+  isoTimeDuration,
+  cTimeoutMaxRemindCount,
+} = useTimeoutHandler();
+
+// TODO 监听器待实现
+// const userTaskListenerRef = ref();
+
+/** 节点类型名称 */
+const nodeTypeName = computed(() => {
+  return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
+});
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!;
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value;
+  // 如果不是人工审批。返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.showText = getApproveTypeText(approveType.value);
+    drawerApi.close();
+    return true;
+  }
+  // TODO 监听器待实现
+  // activeTabName.value = 'listener';
+  // await nextTick();
+  activeTabName.value = 'user';
+
+  if (!formRef.value) return false;
+  //   TODO 监听器待实现
+  // if (!userTaskListenerRef.value) return false;
+  // const valid =
+  //   (await formRef.value.validate()) &&
+  //   (await userTaskListenerRef.value.validate());
+
+  if (!(await formRef.value.validate())) {
+    activeTabName.value = 'user';
+  }
+  //   TODO 监听器待实现
+  // if (!(await userTaskListenerRef.value.validate())) {
+  //   activeTabName.value = 'listener';
+  // }
+
+  const showText = getShowText();
+  if (!showText) return false;
+
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  // 处理 candidateParam 参数
+  currentNode.value.candidateParam = handleCandidateParam();
+  // 设置审批方式
+  currentNode.value.approveMethod = configForm.value.approveMethod;
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.approveRatio = configForm.value.approveRatio;
+  }
+  // 设置拒绝处理
+  currentNode.value.rejectHandler = {
+    type: configForm.value.rejectHandlerType!,
+    returnNodeId: configForm.value.returnNodeId,
+  };
+  // 设置超时处理
+  currentNode.value.timeoutHandler = {
+    enable: configForm.value.timeoutHandlerEnable!,
+    type: cTimeoutType.value,
+    timeDuration: isoTimeDuration.value,
+    maxRemindCount: cTimeoutMaxRemindCount.value,
+  };
+  // 设置审批人为空时
+  currentNode.value.assignEmptyHandler = {
+    type: configForm.value.assignEmptyHandlerType!,
+    userIds:
+      configForm.value.assignEmptyHandlerType ===
+      AssignEmptyHandlerType.ASSIGN_USER
+        ? configForm.value.assignEmptyHandlerUserIds
+        : undefined,
+  };
+  // 设置审批人与发起人相同时
+  currentNode.value.assignStartUserHandlerType =
+    configForm.value.assignStartUserHandlerType;
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  // 设置按钮权限
+  currentNode.value.buttonsSetting = buttonsSetting.value;
+  // 创建任务监听器
+  currentNode.value.taskCreateListener = {
+    enable: configForm.value.taskCreateListenerEnable ?? false,
+    path: configForm.value.taskCreateListenerPath,
+    header: configForm.value.taskCreateListener?.header,
+    body: configForm.value.taskCreateListener?.body,
+  };
+  // 指派任务监听器
+  currentNode.value.taskAssignListener = {
+    enable: configForm.value.taskAssignListenerEnable ?? false,
+    path: configForm.value.taskAssignListenerPath,
+    header: configForm.value.taskAssignListener?.header,
+    body: configForm.value.taskAssignListener?.body,
+  };
+  // 完成任务监听器
+  currentNode.value.taskCompleteListener = {
+    enable: configForm.value.taskCompleteListenerEnable ?? false,
+    path: configForm.value.taskCompleteListenerPath,
+    header: configForm.value.taskCompleteListener?.header,
+    body: configForm.value.taskCompleteListener?.body,
+  };
+  // 签名
+  currentNode.value.signEnable = configForm.value.signEnable;
+  // 审批意见
+  currentNode.value.reasonRequire = configForm.value.reasonRequire;
+
+  currentNode.value.showText = showText;
+  drawerApi.close();
+  return true;
+};
+
+/** 显示审批节点配置， 由父组件传过来 */
+const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  // 1 审批类型
+  approveType.value =
+    node?.approveType === undefined ? ApproveType.USER : node.approveType;
+  // 如果审批类型不是人工审批返回
+  if (approveType.value !== ApproveType.USER) {
+    drawerApi.open();
+    return;
+  }
+
+  // 2.1 审批人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  // 解析候选人参数
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 2.2 设置审批方式
+  configForm.value.approveMethod = node.approveMethod!;
+  if (node.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = node.approveRatio!;
+  }
+  // 2.3 设置审批拒绝处理
+  configForm.value.rejectHandlerType = node.rejectHandler?.type;
+  configForm.value.returnNodeId = node.rejectHandler?.returnNodeId;
+  const matchNodeList: SimpleFlowNode[] = [];
+  emits('findReturnTaskNodes', matchNodeList);
+  returnTaskList.value = matchNodeList;
+  // 2.4 设置审批超时处理
+  configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable;
+  if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
+    const strTimeDuration = node.timeoutHandler.timeDuration;
+    const parseTime = strTimeDuration.slice(2, -1);
+    const parseTimeUnit = strTimeDuration.slice(-1);
+    configForm.value.timeDuration = Number.parseInt(parseTime);
+    timeUnit.value = convertTimeUnit(parseTimeUnit);
+  }
+  configForm.value.timeoutHandlerType = node.timeoutHandler?.type;
+  configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount;
+  // 2.5 设置审批人为空时
+  configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type;
+  configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds;
+  // 2.6 设置用户任务的审批人与发起人相同时
+  configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType;
+  // 3. 操作按钮设置
+  buttonsSetting.value =
+    cloneDeep(node.buttonsSetting) ||
+    (node.type === NodeType.TRANSACTOR_NODE
+      ? TRANSACTOR_DEFAULT_BUTTON_SETTING
+      : DEFAULT_BUTTON_SETTING);
+  // 4. 表单字段权限配置
+  getNodeConfigFormFields(node.fieldsPermission);
+  // 5. 监听器
+  // 5.1 创建任务
+  configForm.value.taskCreateListenerEnable = node.taskCreateListener?.enable;
+  configForm.value.taskCreateListenerPath = node.taskCreateListener?.path;
+  configForm.value.taskCreateListener = {
+    header: node.taskCreateListener?.header ?? [],
+    body: node.taskCreateListener?.body ?? [],
+  };
+  // 5.2 指派任务
+  configForm.value.taskAssignListenerEnable = node.taskAssignListener?.enable;
+  configForm.value.taskAssignListenerPath = node.taskAssignListener?.path;
+  configForm.value.taskAssignListener = {
+    header: node.taskAssignListener?.header ?? [],
+    body: node.taskAssignListener?.body ?? [],
+  };
+  // 5.3 完成任务
+  configForm.value.taskCompleteListenerEnable =
+    node.taskCompleteListener?.enable;
+  configForm.value.taskCompleteListenerPath = node.taskCompleteListener?.path;
+  configForm.value.taskCompleteListener = {
+    header: node.taskCompleteListener?.header ?? [],
+    body: node.taskCompleteListener?.body ?? [],
+  };
+  // 6. 签名
+  configForm.value.signEnable = node?.signEnable ?? false;
+  // 7. 审批意见
+  configForm.value.reasonRequire = node?.reasonRequire ?? false;
+
+  drawerApi.open();
+};
+
+defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件
+
+/** 操作按钮设置 */
+function useButtonsSetting() {
+  const buttonsSetting = ref<ButtonSetting[]>();
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([]);
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true;
+  };
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false;
+    const buttonItem = buttonsSetting.value![index];
+    if (buttonItem)
+      buttonItem.displayName =
+        buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
+  };
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent,
+  };
+}
+
+/** 审批人超时未处理配置 */
+function useTimeoutHandler() {
+  // 时间单位
+  const timeUnit = ref(TimeUnitType.HOUR);
+
+  // 超时开关改变
+  const timeoutHandlerChange = () => {
+    if (configForm.value.timeoutHandlerEnable) {
+      timeUnit.value = 2;
+      configForm.value.timeDuration = 6;
+      configForm.value.timeoutHandlerType = 1;
+      configForm.value.maxRemindCount = 1;
+    }
+  };
+  // 超时执行的动作
+  const cTimeoutType = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    return configForm.value.timeoutHandlerType;
+  });
+
+  // 超时处理动作改变
+  const timeoutHandlerTypeChanged = () => {
+    if (configForm.value.timeoutHandlerType === TimeoutHandlerType.REMINDER) {
+      configForm.value.maxRemindCount = 1; // 超时提醒次数，默认为1
+    }
+  };
+
+  // 时间单位改变
+  const timeUnitChange = () => {
+    // 分钟，默认是 60 分钟
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      configForm.value.timeDuration = 60;
+    }
+    // 小时，默认是 6 个小时
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      configForm.value.timeDuration = 6;
+    }
+    // 天， 默认 1天
+    if (timeUnit.value === TimeUnitType.DAY) {
+      configForm.value.timeDuration = 1;
+    }
+  };
+  // 超时时间的 ISO 表示
+  const isoTimeDuration = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    let strTimeDuration = 'PT';
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      strTimeDuration += `${configForm.value.timeDuration}M`;
+    }
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      strTimeDuration += `${configForm.value.timeDuration}H`;
+    }
+    if (timeUnit.value === TimeUnitType.DAY) {
+      strTimeDuration += `${configForm.value.timeDuration}D`;
+    }
+    return strTimeDuration;
+  });
+
+  // 超时最大提醒次数
+  const cTimeoutMaxRemindCount = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    if (configForm.value.timeoutHandlerType !== TimeoutHandlerType.REMINDER) {
+      return undefined;
+    }
+    return configForm.value.maxRemindCount;
+  });
+
+  return {
+    timeoutHandlerChange,
+    cTimeoutType,
+    timeoutHandlerTypeChanged,
+    timeUnit,
+    timeUnitChange,
+    isoTimeDuration,
+    cTimeoutMaxRemindCount,
+  };
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+};
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  // 固定添加发起人ID字段
+  formFieldOptions.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    type: 'UserSelect',
+    required: true,
+  });
+});
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="config-header">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div
+      v-if="currentNode.type === NodeType.USER_TASK_NODE"
+      class="mb-3 flex items-center"
+    >
+      <span class="mr-3 text-[16px]">审批类型 :</span>
+      <RadioGroup v-model:value="approveType">
+        <RadioButton
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </RadioButton>
+      </RadioGroup>
+    </div>
+    <Tabs
+      v-model:active-key="activeTabName"
+      v-if="approveType === ApproveType.USER"
+    >
+      <TabPane :tab="`${nodeTypeName}人`" key="user">
+        <div>
+          <Form
+            ref="formRef"
+            :model="configForm"
+            :label-wrap="true"
+            :label-col="{ span: 24 }"
+            :wrapper-col="{ span: 24 }"
+            :rules="formRules"
+          >
+            <!-- 审批/办理 人设置 -->
+            <FormItem :label="`${nodeTypeName}人设置`" name="candidateStrategy">
+              <RadioGroup
+                v-model:value="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <Row :gutter="[0, 8]">
+                  <Col
+                    v-for="(dict, index) in CANDIDATE_STRATEGY"
+                    :key="index"
+                    :span="8"
+                  >
+                    <Radio :value="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </Radio>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.roleIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <!-- TODO :replace-fields="defaultProps4AntTree" -->
+              <TreeSelect
+                v-model:value="configForm.deptIds"
+                :tree-data="deptTreeOptions"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                :check-strictly="true"
+                allow-clear
+                style="width: 100%"
+                tree-checkable
+              />
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.postIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.userIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.userGroups"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.formUser"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.formDept"
+                clearable
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <Select filterable v-model:value="configForm.deptLevel" clearable>
+                <SelectOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <Textarea
+                v-model:value="configForm.expression"
+                clearable
+                style="width: 100%"
+              />
+            </FormItem>
+            <!-- 多人审批/办理 方式 -->
+            <FormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
+              <RadioGroup
+                v-model:value="configForm.approveMethod"
+                @change="approveMethodChanged"
+              >
+                <Row :gutter="[0, 8]">
+                  <Col
+                    :span="24"
+                    v-for="(item, index) in APPROVE_METHODS"
+                    :key="index"
+                  >
+                    <div class="flex items-center">
+                      <Radio :value="item.value" :label="item.value">
+                        {{ item.label }}
+                      </Radio>
+                      <InputNumber
+                        v-if="
+                          item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                          configForm.approveMethod ===
+                            ApproveMethodType.APPROVE_BY_RATIO
+                        "
+                        v-model:value="configForm.approveRatio"
+                        :min="10"
+                        :max="100"
+                        :step="10"
+                        size="small"
+                      />
+                    </div>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">审批人拒绝时</Divider>
+              <FormItem name="rejectHandlerType">
+                <RadioGroup
+                  v-model:value="configForm.rejectHandlerType"
+                  class="w-full"
+                >
+                  <Row :gutter="24">
+                    <Col
+                      :span="8"
+                      v-for="(item, index) in REJECT_HANDLER_TYPES"
+                      :key="index"
+                    >
+                      <Radio :value="item.value" :label="item.label">
+                        {{ item.label }}
+                      </Radio>
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </FormItem>
+
+              <FormItem
+                v-if="
+                  configForm.rejectHandlerType ===
+                  RejectHandlerType.RETURN_USER_TASK
+                "
+                label="驳回节点"
+                name="returnNodeId"
+              >
+                <Select
+                  filterable
+                  v-model:value="configForm.returnNodeId"
+                  clearable
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in returnTaskList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  >
+                    {{ item.name }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">审批人超时未处理时</Divider>
+              <FormItem
+                label="启用开关"
+                name="timeoutHandlerEnable"
+                label-align="left"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 4 }"
+              >
+                <Switch
+                  v-model:checked="configForm.timeoutHandlerEnable"
+                  checked-children="开"
+                  un-checked-children="关"
+                  @change="timeoutHandlerChange"
+                />
+              </FormItem>
+              <FormItem
+                label="执行动作"
+                name="timeoutHandlerType"
+                v-if="configForm.timeoutHandlerEnable"
+                label-align="left"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
+                <RadioGroup
+                  v-model:value="configForm.timeoutHandlerType"
+                  @change="timeoutHandlerTypeChanged"
+                >
+                  <RadioButton
+                    v-for="item in TIMEOUT_HANDLER_TYPES"
+                    :key="item.value"
+                    :value="item.value"
+                    :label="item.label"
+                  >
+                    {{ item.label }}
+                  </RadioButton>
+                </RadioGroup>
+              </FormItem>
+              <FormItem
+                label="超时时间设置"
+                v-if="configForm.timeoutHandlerEnable"
+                label-align="left"
+                class="h-[32px]"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
+                <Row>
+                  <Col>
+                    <TypographyText class="mr-2 mt-2 inline-flex text-sm">
+                      当超过
+                    </TypographyText>
+                  </Col>
+                  <Col>
+                    <FormItem name="timeDuration">
+                      <InputNumber
+                        class="mr-2"
+                        :style="{ width: '100px' }"
+                        v-model:value="configForm.timeDuration"
+                        :min="1"
+                        controls-position="right"
+                      />
+                    </FormItem>
+                  </Col>
+                  <Col>
+                    <Select
+                      filterable
+                      v-model:value="timeUnit"
+                      class="mr-2"
+                      :style="{ width: '100px' }"
+                      @change="timeUnitChange"
+                    >
+                      <SelectOption
+                        v-for="item in TIME_UNIT_TYPES"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                        {{ item.label }}
+                      </SelectOption>
+                    </Select>
+                    <TypographyText class="mr-2 mt-2 inline-flex text-sm">
+                      未处理
+                    </TypographyText>
+                  </Col>
+                </Row>
+              </FormItem>
+              <FormItem
+                label="最大提醒次数"
+                name="maxRemindCount"
+                v-if="
+                  configForm.timeoutHandlerEnable &&
+                  configForm.timeoutHandlerType === 1
+                "
+                label-align="left"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+              >
+                <InputNumber
+                  v-model:value="configForm.maxRemindCount"
+                  :min="1"
+                  :max="10"
+                />
+              </FormItem>
+            </div>
+
+            <Divider content-position="left">
+              {{ nodeTypeName }}人为空时
+            </Divider>
+            <FormItem name="assignEmptyHandlerType">
+              <RadioGroup v-model:value="configForm.assignEmptyHandlerType">
+                <Row :gutter="[0, 16]">
+                  <Col
+                    :span="24"
+                    v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES"
+                    :key="index"
+                  >
+                    <Radio :value="item.value" :label="item.label">
+                      {{ item.label }}
+                    </Radio>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.assignEmptyHandlerType ===
+                AssignEmptyHandlerType.ASSIGN_USER
+              "
+              label="指定用户"
+              name="assignEmptyHandlerUserIds"
+            >
+              <Select
+                filterable
+                v-model:value="configForm.assignEmptyHandlerUserIds"
+                clearable
+                mode="multiple"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">
+                审批人与提交人为同一人时
+              </Divider>
+              <FormItem name="assignStartUserHandlerType">
+                <RadioGroup
+                  v-model:value="configForm.assignStartUserHandlerType"
+                >
+                  <Row :gutter="[0, 16]">
+                    <Col
+                      :span="24"
+                      v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES"
+                      :key="index"
+                    >
+                      <Radio :value="item.value" :label="item.label">
+                        {{ item.label }}
+                      </Radio>
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </FormItem>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">是否需要签名</Divider>
+              <FormItem name="signEnable">
+                <Switch
+                  v-model:checked="configForm.signEnable"
+                  checked-children="是"
+                  un-checked-children="否"
+                />
+              </FormItem>
+            </div>
+
+            <div v-if="currentNode.type === NodeType.USER_TASK_NODE">
+              <Divider content-position="left">审批意见</Divider>
+              <FormItem name="reasonRequire">
+                <Switch
+                  v-model:checked="configForm.reasonRequire"
+                  checked-children="必填"
+                  un-checked-children="非必填"
+                />
+              </FormItem>
+            </div>
+          </Form>
+        </div>
+      </TabPane>
+      <TabPane
+        tab="操作按钮设置"
+        v-if="currentNode.type === NodeType.USER_TASK_NODE"
+        key="buttons"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">操作按钮</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">操作按钮</Col>
+            <Col :span="12" class="font-bold">显示名称</Col>
+            <Col :span="4" class="flex items-center justify-center font-bold">
+              启用
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in buttonsSetting" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ OPERATION_BUTTON_NAME.get(item.id) }}
+              </Col>
+              <Col :span="12" class="flex items-center">
+                <!-- TODO  v-mountedFocus 自动聚集需要迁移 -->
+                <Input
+                  v-if="btnDisplayNameEdit[index]"
+                  type="text"
+                  class="input-edit max-w-[130px]"
+                  @blur="btnDisplayNameBlurEvent(index)"
+                  v-model:value="item.displayName"
+                  :placeholder="item.displayName"
+                />
+                <Button v-else text @click="changeBtnDisplayName(index)">
+                  <div class="flex items-center">
+                    {{ item.displayName }}
+                    <IconifyIcon icon="ep:edit" class="ml-2" />
+                  </div>
+                </Button>
+              </Col>
+              <Col :span="4" class="flex items-center justify-center">
+                <Switch v-model:checked="item.enable" />
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane tab="表单字段权限" key="fields" v-if="formType === 10">
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane tab="监听器" key="listener">
+        <!-- TODO 待实现 -->
+        <span>待实现</span>
+        <!-- <UserTaskListener
+          ref="userTaskListenerRef"
+          v-model:value="configForm"
+          :form-field-options="formFieldOptions"
+        /> -->
+      </TabPane>
+    </Tabs>
+    <template #footer>
+      <Button type="primary" @click="saveConfig">确 定</Button>
+      <Button @click="drawerApi.close()">取 消</Button>
+    </template>
+  </Drawer>
+</template>
+<style lang="scss" scoped>
+.input-edit {
+  &:focus {
+    outline: 0;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6ab47eca3f19d40f7b6a64968e12573a9e51b1e
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
@@ -0,0 +1,48 @@
+import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
+
+/** 获取条件节点默认的名称 */
+export const getDefaultConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+};
+
+/** 获取包容分支条件节点默认的名称 */
+export const getDefaultInclusiveConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+};
+
+/** 转换时间单位字符串为枚举值 */
+export const convertTimeUnit = (strTimeUnit: string) => {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE;
+  }
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR;
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY;
+  }
+  return TimeUnitType.HOUR;
+};
+
+/** 根据审批类型获取对应的文本描述 */
+export const getApproveTypeText = (approveType: ApproveType): string => {
+  let approveTypeText = '';
+  APPROVE_TYPE.forEach((item) => {
+    if (item.value === approveType) {
+      approveTypeText = item.label;
+    }
+  });
+  return approveTypeText;
+};
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b2a2055fca4879c50b44ba7d26f20621f18a0a63
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'UserTaskNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.START_USER_NODE,
+);
+const nodeSetting = ref();
+
+const nodeClick = () => {
+  if (readonly) {
+    if (tasks && tasks.value) {
+      // 只读模式，弹窗显示任务信息 TODO 待实现
+      console.warn('只读模式，弹窗显示任务信息待实现');
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
+  }
+};
+
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+// 查找可以驳回用户节点
+const findReturnTaskNodes = (
+  matchNodeList: SimpleFlowNode[], // 匹配的节点
+) => {
+  // 从父节点查找
+  emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
+};
+
+// const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
+            >
+            </span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(currentNode.type) }}
+          </div>
+          <IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+  <UserTaskNodeConfig
+    v-if="currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+    @find-return-task-nodes="findReturnTaskNodes"
+  />
+  <!--  TODO 审批记录 -->
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 3e9e7de1e6e74a110de3e31c80abf5eeeb03e7f5..9060b6c62df1d35d612dd97f44f8464fca8404d4 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -5,6 +5,7 @@ import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import EndEventNode from './nodes/end-event-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
+import UserTaskNode from './nodes/user-task-node.vue';
 
 defineOptions({ name: 'ProcessNodeTree' });
 const props = defineProps({
@@ -29,16 +30,12 @@ const emits = defineEmits<{
 const currentNode = useWatchNode(props);
 
 // 用于删除节点
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+
 const handleModelValueUpdate = (updateValue: any) => {
   emits('update:flowNode', updateValue);
 };
 
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
-const triggerFromParentNode = (
-  nodeList: SimpleFlowNode[],
-  nodeType: number,
-) => {
+const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
   emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
 };
 
@@ -69,7 +66,7 @@ const recursiveFindParentNode = (
     :flow-node="currentNode"
   />
   <!-- 审批节点 -->
-  <!-- <UserTaskNode
+  <UserTaskNode
     v-if="
       currentNode &&
       (currentNode.type === NodeType.USER_TASK_NODE ||
@@ -77,8 +74,8 @@ const recursiveFindParentNode = (
     "
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 抄送节点 -->
   <!-- <CopyTaskNode
     v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index dbda6573b9b65474178da90d8b75496514b071b1..8c3afd37f63f733c319f0d007c7f86e7d0204edb 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -44,82 +44,6 @@
     }
   }
 }
-
-// 表单字段权限
-.field-setting-pane {
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-
-  .field-setting-desc {
-    padding-right: 8px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 700;
-  }
-
-  .field-permit-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 45px;
-    padding-left: 12px;
-    line-height: 45px;
-    background-color: #f8fafc0a;
-    border: 1px solid #1f38581a;
-
-    .first-title {
-      text-align: left !important;
-    }
-
-    .other-titles {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .setting-title-label {
-      display: inline-block;
-      width: 110px;
-      padding: 5px 0;
-      font-size: 13px;
-      font-weight: 700;
-      color: #000;
-      text-align: center;
-    }
-  }
-
-  .field-setting-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
-    padding-left: 12px;
-    border: 1px solid #1f38581a;
-    border-top: 0;
-
-    .field-setting-item-label {
-      display: inline-block;
-      width: 110px;
-      min-height: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: text;
-    }
-
-    .field-setting-item-group {
-      display: flex;
-      justify-content: space-between;
-
-      .item-radio-wrap {
-        display: inline-block;
-        width: 110px;
-        text-align: center;
-      }
-    }
-  }
-}
-
 // 节点连线气泡卡片样式
 .handler-item-wrapper {
   display: flex;
diff --git a/apps/web-antd/src/components/upload/input-upload.vue b/apps/web-antd/src/components/upload/input-upload.vue
index 11ee4cf03bc4d243a4e47f98176f755f75804a31..0b2df854029ea68214fa846ae4acd62f427eb58f 100644
--- a/apps/web-antd/src/components/upload/input-upload.vue
+++ b/apps/web-antd/src/components/upload/input-upload.vue
@@ -3,40 +3,51 @@ import type { InputProps, TextAreaProps } from 'ant-design-vue';
 
 import type { FileUploadProps } from './typing';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
+import { useVModel } from '@vueuse/core';
 import { Col, Input, Row, Textarea } from 'ant-design-vue';
 
 import FileUpload from './file-upload.vue';
 
 const props = defineProps<{
+  defaultValue?: number | string;
   fileUploadProps?: FileUploadProps;
   inputProps?: InputProps;
   inputType?: 'input' | 'textarea';
+  modelValue?: number | string;
   textareaProps?: TextAreaProps;
 }>();
 
-const emit = defineEmits(['change', 'update:value']);
+const emits = defineEmits<{
+  (e: 'change', payload: number | string): void;
+  (e: 'update:value', payload: number | string): void;
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
 
-const value = ref('');
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
 
 function handleReturnText(text: string) {
-  value.value = text;
-  emit('change', value.value);
-  emit('update:value', value.value);
+  modelValue.value = text;
+  emits('change', modelValue.value);
+  emits('update:value', modelValue.value);
+  emits('update:modelValue', modelValue.value);
 }
 
 const inputProps = computed(() => {
   return {
     ...props.inputProps,
-    value: value.value,
+    value: modelValue.value,
   };
 });
 
 const textareaProps = computed(() => {
   return {
     ...props.textareaProps,
-    value: value.value,
+    value: modelValue.value,
   };
 });
 
diff --git a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
index 723e612c8b1c1d232204acb058f23d7766049f0e..e55cca14c16f5f209fc7bb421013b02429465d53 100644
--- a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
@@ -417,8 +417,8 @@ defineExpose({
     <Spin :spinning="loading">
       <Row :gutter="[16, 16]">
         <Col :span="6">
-          <div class="h-[500px] overflow-auto rounded border border-gray-200">
-            <div class="border-b border-gray-200 p-2">
+          <div class="h-[500px] overflow-auto rounded border">
+            <div class="border-b p-2">
               <Input
                 v-model:value="deptSearchKeys"
                 placeholder="搜索部门"
diff --git a/apps/web-antd/src/router/routes/modules/pay.ts b/apps/web-antd/src/router/routes/modules/pay.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f7711fcdf2817707dd2027a4a96549e382824ba5
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/pay.ts
@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/pay/cashier',
+    component: () => import('#/views/pay/cashier/index.vue'),
+    name: 'PayCashier',
+    meta: {
+      title: '收银台',
+      icon: 'lucide:badge-japanese-yen',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/utils/formatNumber.ts b/apps/web-antd/src/utils/formatNumber.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13fdab6a7d1dadf8c5ebfb534d33befcc10f2170
--- /dev/null
+++ b/apps/web-antd/src/utils/formatNumber.ts
@@ -0,0 +1,82 @@
+/**
+ * 将一个整数转换为分数保留两位小数
+ * @param num
+ */
+export function formatToFraction(num: number | string | undefined): string {
+  if (num === undefined) return '0.00';
+  const parsedNumber = typeof num === 'string' ? Number.parseFloat(num) : num;
+  return (parsedNumber / 100).toFixed(2);
+}
+
+/**
+ * 将一个数转换为 1.00 这样
+ * 数据呈现的时候使用
+ *
+ * @param num 整数
+ */
+export function floatToFixed2(num: number | string | undefined): string {
+  let str = '0.00';
+  if (num === undefined) {
+    return str;
+  }
+  const f = formatToFraction(num);
+  const decimalPart = f.toString().split('.')[1];
+  const len = decimalPart ? decimalPart.length : 0;
+  switch (len) {
+    case 0: {
+      str = `${f.toString()}.00`;
+      break;
+    }
+    case 1: {
+      str = `${f.toString()}0`;
+      break;
+    }
+    case 2: {
+      str = f.toString();
+      break;
+    }
+  }
+  return str;
+}
+
+/**
+ * 将一个分数转换为整数
+ * @param num
+ */
+export function convertToInteger(num: number | string | undefined): number {
+  if (num === undefined) return 0;
+  const parsedNumber = typeof num === 'string' ? Number.parseFloat(num) : num;
+  return Math.round(parsedNumber * 100);
+}
+
+/**
+ * 元转分
+ */
+export function yuanToFen(amount: number | string): number {
+  return convertToInteger(amount);
+}
+
+/**
+ * 分转元
+ */
+export function fenToYuan(price: number | string): string {
+  return formatToFraction(price);
+}
+
+/**
+ * 计算环比
+ *
+ * @param value 当前数值
+ * @param reference 对比数值
+ */
+export function calculateRelativeRate(
+  value?: number,
+  reference?: number,
+): number {
+  // 防止除0
+  if (!reference || reference === 0) return 0;
+
+  return Number.parseFloat(
+    ((100 * ((value || 0) - reference)) / reference).toFixed(0),
+  );
+}
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 101e381e5db32c3568754021a4ca91094f6742ef..479a354727273517629ee076ad6a5e95a457d736 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -1,6 +1,7 @@
 export * from './constants';
 export * from './dict';
 export * from './download';
+export * from './formatNumber';
 export * from './formatTime';
 export * from './formCreate';
 export * from './rangePickerProps';
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index 32028843b10e2128948d7e55fcae2093b40746a0..41579bc9da282d2ff4ba2c92fd60eb75a363fe00 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -167,7 +167,7 @@ const handleCategorySortSubmit = async () => {
     <CategoryFormModal @success="getList" />
     <Card
       :body-style="{ padding: '10px' }"
-      class="mb-4"
+      class="mb-4 h-[98%]"
       v-spinning="modelListSpinning"
     >
       <div class="flex h-full items-center justify-between pl-5">
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
index 7a1e44ada824e27d076bc83ca1044f303f6dc55a..145b04f44ef34bf2c06374ce371301c71f9b4922 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -199,7 +199,7 @@ defineExpose({
           <Button
             v-if="row.formId > 0"
             type="primary"
-            @click="showFormDetail(row)"`
+            @click="showFormDetail(row)"
             size="small"
             ghost
             class="ml-1"
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index 5063e4089be35b10457f021fab99f6af1a839dd1..cb130b22e52376509e0802ae73080835eb300304 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -54,7 +54,6 @@ export function useGridColumns<T = PayAppApi.App>(
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       align: 'center',
       cellRender: {
         attrs: { beforeChange: onStatusChange },
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index df349c1b7a4576de3089d44532c82a11a9e84e83..3a67b8380278efb66f6d61538a0da4e144842e8a 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -100,7 +100,7 @@ function isChannelExists(channels: string[], channelCode: string) {
 }
 
 async function openChannelForm(row: PayAppApi.App, payCode: string) {
-  channelModalApi.setData({ id: row.id || 0, payCode }).open();
+  channelModalApi.setData({ id: row.id, payCode }).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -134,13 +134,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page auto-content-height>
     <template #doc>
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
 
-    <AppModal @reload="onRefresh" />
-    <ChannelModal @reload="onRefresh" />
+    <AppModal @success="onRefresh" />
+    <ChannelModal @success="onRefresh" />
 
     <Grid>
       <template #toolbar-tools>
@@ -185,27 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_APP.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_APP.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -220,27 +210,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_PC.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_PC.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -255,27 +235,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_WAP.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_WAP.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -290,27 +260,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_QR.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_QR.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -325,27 +285,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_BAR.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_BAR.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -360,27 +310,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_LITE.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_LITE.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_LITE.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -395,27 +335,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_PUB.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_PUB.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_PUB.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -430,27 +360,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_APP.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_APP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_APP.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -465,27 +385,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_NATIVE.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_NATIVE.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -500,27 +410,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_WAP.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_WAP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_WAP.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -535,27 +435,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_BAR.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_BAR.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_BAR.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -570,27 +460,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WALLET.code,
-              ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WALLET.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
-              shape: 'circle',
-              ifShow: !isChannelExists(
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WALLET.code,
               ),
+              shape: 'circle',
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -605,27 +485,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.MOCK.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.MOCK.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.MOCK.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
diff --git a/apps/web-antd/src/views/pay/app/modules/channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
index 8717708734ab614b70e8df3c31a958a76686b983..f42a2304070850f8fa3e66be50e8d4bbdac02601 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
@@ -6,21 +6,21 @@ import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { message, Row, Space, Textarea } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
-import { FileUpload } from '#/components/upload';
+import { CommonStatusEnum } from '#/utils';
 
 import { channelSchema } from './data';
 
 const emit = defineEmits(['success']);
-const formData = ref<PayChannelApi.Channel>();
+const formData = ref<any>();
 const formType = ref<string>('');
 const title = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
+  return formData.value?.id === 0
+    ? $t('ui.actionTitle.create', '应用')
+    : $t('ui.actionTitle.edit', '应用');
 });
 
 const [Form, formApi] = useVbenForm({
@@ -44,8 +44,17 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as PayChannelApi.Channel;
+    // 只保留表单中实际存在的字段，且值不为 undefined
+    const data2 = Object.fromEntries(
+      Object.entries(data).filter(([key, value]) => {
+        // 检查字段是否在表单中存在，且值不为 undefined
+        return key in data && value !== undefined;
+      }),
+    );
+    const data3 = { ...formData.value, ...data2 };
+    data3.config = JSON.stringify(data3.config);
     try {
-      await (formData.value?.id ? updateChannel(data) : createChannel(data));
+      await (data3.id ? updateChannel(data3) : createChannel(data3));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -68,18 +77,80 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    formType.value = payCode;
     if (payCode.includes('alipay_')) {
-      formType.value = 'alipay';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: null,
+        config: {
+          appId: '',
+          serverUrl: null,
+          signType: 'RSA2',
+          mode: null,
+          privateKey: '',
+          alipayPublicKey: '',
+          appCertContent: '',
+          alipayPublicCertContent: '',
+          rootCertContent: '',
+          encryptType: '',
+          encryptKey: '',
+        },
+      };
     } else if (payCode.includes('mock')) {
-      formType.value = 'mock';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: 0,
+        config: {
+          name: 'mock-conf',
+        },
+      };
     } else if (payCode.includes('wallet')) {
-      formType.value = 'wallet';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: 0,
+        config: {
+          name: 'mock-conf',
+        },
+      };
     } else if (payCode.includes('wx')) {
-      formType.value = 'wx';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        feeRate: undefined,
+        remark: '',
+        config: {
+          appId: '',
+          mchId: '',
+          apiVersion: '',
+          mchKey: '',
+          keyContent: '',
+          privateKeyContent: '',
+          certSerialNo: '',
+          apiV3Key: '',
+          publicKeyContent: '',
+          publicKeyId: '',
+        },
+      };
     }
 
     try {
-      formData.value = await getChannel(id, payCode);
+      const res = await getChannel(id, payCode);
+      formData.value = {
+        ...res,
+        config: {
+          ...JSON.parse(res.config),
+        },
+      };
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -90,66 +161,6 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 <template>
   <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <Form :schema="channelSchema(formType)">
-      <template #appCertContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传商户公钥应用证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-      <template #alipayPublicCertContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传支付宝公钥证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['.crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-      <template #rootCertContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['.crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-    </Form>
+    <Form :schema="channelSchema(formType)" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/data.ts b/apps/web-antd/src/views/pay/app/modules/data.ts
index 408b782eaa88e870d0fef9d0e97b34f0e156cfa0..424dc4524dfd75e0c68326c19c5fc676abca8f69 100644
--- a/apps/web-antd/src/views/pay/app/modules/data.ts
+++ b/apps/web-antd/src/views/pay/app/modules/data.ts
@@ -6,541 +6,486 @@ import { InputUpload } from '#/components/upload';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 export function channelSchema(formType: string): VbenFormSchema[] {
-  switch (formType) {
-    case 'alipay': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-        },
-        {
-          label: '开放平台 APPID',
-          fieldName: 'config.appId',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入开放平台 APPID',
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: '网关地址',
-          fieldName: 'config.serverUrl',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 'https://openapi.alipay.com/gateway.do',
-                label: '线上环境',
-              },
-              {
-                value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
-                label: '沙箱环境',
-              },
-            ],
-          },
-        },
-        {
-          label: '算法类型',
-          fieldName: 'config.signType',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 'RSA2',
-                label: 'RSA2',
-              },
-            ],
-          },
-          defaultValue: 'RSA2',
-        },
-        {
-          label: '公钥类型',
-          fieldName: 'config.mode',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 0,
-                label: '公钥模式',
-              },
-              {
-                value: 1,
-                label: '证书模式',
-              },
-            ],
-          },
-        },
-        {
-          label: '应用私钥',
-          fieldName: 'config.privateKey',
-          component: 'Textarea',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入应用私钥',
-            rows: 8,
-          },
-          dependencies: {
-            show(values) {
-              return values.config.mode !== undefined;
-            },
-            triggerFields: ['config'],
-          },
-        },
-        {
-          label: '支付宝公钥',
-          fieldName: 'config.alipayPublicKey',
-          component: 'Textarea',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入支付宝公钥',
-            rows: 8,
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 0;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '商户公钥应用证书',
-          fieldName: 'config.appCertContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
-            fileUploadProps: {
-              accept: ['crt'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 1;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '支付宝公钥证书',
-          fieldName: 'config.alipayPublicCertContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
-            fileUploadProps: {
-              accept: ['crt'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 1;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '根证书',
-          fieldName: 'config.rootCertContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: { rows: 8, placeholder: '请上传根证书' },
-            fileUploadProps: {
-              accept: ['crt'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 1;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '接口内容加密方式',
-          fieldName: 'config.encryptType',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 'NONE',
-                label: '无加密',
-              },
-              {
-                value: 'AES',
-                label: 'AES',
-              },
-            ],
-          },
-          defaultValue: 'NONE',
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    case 'mock': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    case 'wallet': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    case 'wx': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-        },
-        {
-          label: '微信 APPID',
-          fieldName: 'config.appId',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入微信 APPID',
-          },
-        },
-        {
-          label: '商户号',
-          fieldName: 'config.mchId',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入商户号',
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: 'API 版本',
-          fieldName: 'config.apiVersion',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                label: 'v2',
-                value: 'v2',
-              },
-              {
-                label: 'v3',
-                value: 'v3',
-              },
-            ],
-          },
-        },
-        {
-          label: '商户密钥',
-          fieldName: 'config.mchKey',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入商户密钥',
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v2';
+  if (formType.includes('alipay_')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '开放平台 APPID',
+        fieldName: 'config.appId',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入开放平台 APPID',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '网关地址',
+        fieldName: 'config.serverUrl',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'https://openapi.alipay.com/gateway.do',
+              label: '线上环境',
             },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: 'apiclient_cert.p12 证书',
-          fieldName: 'config.keyContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: {
-              rows: 8,
-              placeholder: '请上传 apiclient_cert.p12 证书',
+            {
+              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+              label: '沙箱环境',
             },
-            fileUploadProps: {
-              accept: ['p12 '],
+          ],
+        },
+      },
+      {
+        label: '算法类型',
+        fieldName: 'config.signType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'RSA2',
+              label: 'RSA2',
             },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v2';
+          ],
+        },
+        defaultValue: 'RSA2',
+      },
+      {
+        label: '公钥类型',
+        fieldName: 'config.mode',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 1,
+              label: '公钥模式',
             },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: 'API V3 密钥',
-          fieldName: 'config.apiV3Key',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入 API V3 密钥',
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v3';
+            {
+              value: 2,
+              label: '证书模式',
             },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: 'apiclient_key.pem 证书',
-          fieldName: 'config.privateKeyContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: {
-              rows: 8,
-              placeholder: '请上传 apiclient_key.pem 证书',
+          ],
+        },
+      },
+      {
+        label: '应用私钥',
+        fieldName: 'config.privateKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入应用私钥',
+          rows: 8,
+        },
+      },
+      {
+        label: '支付宝公钥',
+        fieldName: 'config.alipayPublicKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入支付宝公钥',
+          rows: 8,
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 1;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '商户公钥应用证书',
+        fieldName: 'config.appCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '支付宝公钥证书',
+        fieldName: 'config.alipayPublicCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '根证书',
+        fieldName: 'config.rootCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传根证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '接口内容加密方式',
+        fieldName: 'config.encryptType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'NONE',
+              label: '无加密',
             },
-            fileUploadProps: {
-              accept: ['pem'],
+            {
+              value: 'AES',
+              label: 'AES',
             },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v3';
+          ],
+        },
+        defaultValue: 'NONE',
+      },
+      {
+        label: '接口内容加密密钥',
+        fieldName: 'config.encryptKey',
+        component: 'Input',
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.encryptType === 'AES';
+          },
+          triggerFields: ['config.encryptType', 'encryptType', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('mock') || formType.includes('wallet')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('wx')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '微信 APPID',
+        fieldName: 'config.appId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入微信 APPID',
+        },
+      },
+      {
+        label: '商户号',
+        fieldName: 'config.mchId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户号',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: 'API 版本',
+        fieldName: 'config.apiVersion',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              label: 'v2',
+              value: 'v2',
             },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '证书序列号',
-          fieldName: 'config.certSerialNo',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入证书序列号',
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v3';
+            {
+              label: 'v3',
+              value: 'v3',
             },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    default: {
-      return [];
-    }
+          ],
+        },
+      },
+      {
+        label: '商户密钥',
+        fieldName: 'config.mchKey',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_cert.p12 证书',
+        fieldName: 'config.keyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 apiclient_cert.p12 证书',
+          },
+          fileUploadProps: {
+            accept: ['p12'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'API V3 密钥',
+        fieldName: 'config.apiV3Key',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入 API V3 密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_key.pem 证书',
+        fieldName: 'config.privateKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 apiclient_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '证书序列号',
+        fieldName: 'config.certSerialNo',
+        component: 'Input',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入证书序列号',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'public_key.pem 证书',
+        fieldName: 'config.publicKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 public_key.pem 证书',
+          },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '公钥 ID',
+        fieldName: 'config.publicKeyId',
+        component: 'Input',
+        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入公钥 ID',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else {
+    return [];
   }
 }
diff --git a/apps/web-antd/src/views/pay/cashier/data.ts b/apps/web-antd/src/views/pay/cashier/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0918a6f100e7a3678f5ea65017d6b757b41db162
--- /dev/null
+++ b/apps/web-antd/src/views/pay/cashier/data.ts
@@ -0,0 +1,81 @@
+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',
+  },
+];
diff --git a/apps/web-antd/src/views/pay/cashier/index.vue b/apps/web-antd/src/views/pay/cashier/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fa92eea9ff44ed7c6fe7de44bfee454a56b971e
--- /dev/null
+++ b/apps/web-antd/src/views/pay/cashier/index.vue
@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { formatDate } from '@vben/utils';
+
+import {
+  Button,
+  Card,
+  Descriptions,
+  Input,
+  message,
+  QRCode,
+} from 'ant-design-vue';
+
+import { getOrder, submitOrder } from '#/api/pay/order';
+import {
+  fenToYuan,
+  PayChannelEnum,
+  PayDisplayModeEnum,
+  PayOrderStatusEnum,
+} from '#/utils';
+
+import { channelsAlipay, channelsMock, channelsWechat } from './data';
+
+defineOptions({ name: 'PayCashier' });
+
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+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 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) {
+    message.error('未传递支付单号，无法查看对应的支付信息');
+    goReturnUrl('cancel');
+    return;
+  }
+  const res = await getOrder(id.value);
+  // 1.2 无法查询到支付信息
+  if (!res) {
+    message.error('支付订单不存在，请检查！');
+    goReturnUrl('cancel');
+    return;
+  }
+  // 1.3 如果已支付、或者已关闭，则直接跳转
+  if (res.status === PayOrderStatusEnum.SUCCESS.status) {
+    message.success('支付成功');
+    goReturnUrl('success');
+    return;
+  } else if (res.status === PayOrderStatusEnum.CLOSED.status) {
+    message.error('无法支付，原因：订单已关闭');
+    goReturnUrl('close');
+    return;
+  }
+  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: {
+      message.error('微信小程序：不支持 PC 网站');
+      break;
+    }
+    case PayChannelEnum.WX_PUB.code: {
+      message.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();
+      message.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 {
+    // message.success('支付成功！')
+  }
+}
+
+/** 构建提交支付的额外参数 */
+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) {
+    message.error('支付宝 App 支付：无法在网页支付！');
+  }
+  if (channelCode === PayChannelEnum.WX_APP.code) {
+    message.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();
+      message.success('支付成功！');
+      goReturnUrl('success');
+    }
+    // 已取消
+    if (data.status === PayOrderStatusEnum.CLOSED.status) {
+      clearQueryInterval();
+      message.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();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <Card class="mt-4">
+      <Descriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
+        <Descriptions.Item label="支付单号">
+          {{ payOrder?.id }}
+        </Descriptions.Item>
+        <Descriptions.Item label="商品标题">
+          {{ payOrder?.subject }}
+        </Descriptions.Item>
+        <Descriptions.Item label="商品内容">
+          {{ payOrder?.body }}
+        </Descriptions.Item>
+        <Descriptions.Item label="支付金额">
+          {{ `￥${fenToYuan(payOrder?.price || 0)}` }}
+        </Descriptions.Item>
+        <Descriptions.Item label="创建时间">
+          {{ formatDate(payOrder?.createTime) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="过期时间">
+          {{ formatDate(payOrder?.expireTime) }}
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+    <Card 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>
+    </Card>
+    <Card 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>
+    </Card>
+    <Card 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>
+    </Card>
+    <Modal class="w-[40%]" :title="title">
+      <QRCode v-if="qrCode.visible" :value="qrCode.url" />
+      <Input
+        v-if="barCode.visible"
+        v-model:value="barCode.value"
+        placeholder="请输入条形码"
+        required
+      />
+      <div class="text-right" v-if="barCode.visible">
+        或使用
+        <Button
+          type="link"
+          danger
+          target="_blank"
+          href="https://baike.baidu.com/item/条码支付/10711903"
+        >
+          (扫码枪/扫码盒)
+        </Button>
+        扫码
+      </div>
+    </Modal>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/pay/demo/order/data.ts b/apps/web-antd/src/views/pay/demo/order/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2683b905a590261c6c17dd824ac2535cf956e6c4
--- /dev/null
+++ b/apps/web-antd/src/views/pay/demo/order/data.ts
@@ -0,0 +1,104 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'spuId',
+      label: '商品',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '华为手机 --- 1.00元', value: 1, price: 1 },
+          { label: '小米电视 --- 10.00元', value: 2, price: 10 },
+          { label: '苹果手表 --- 100.00元', value: 3, price: 100 },
+          { label: '华硕笔记本 --- 1000.00元', value: 4, price: 1000 },
+          { label: '蔚来汽车 --- 200000.00元', value: 5, price: 200_000 },
+        ],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '订单编号',
+      minWidth: 200,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 200,
+    },
+    {
+      field: 'spuName',
+      title: '商品名字',
+      minWidth: 200,
+    },
+    {
+      field: 'price',
+      title: '支付价格',
+      minWidth: 120,
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      minWidth: 120,
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'payOrderId',
+      title: '支付单号',
+      minWidth: 200,
+    },
+    {
+      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,
+      slots: { default: 'refundTime' },
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/demo/order/index.vue b/apps/web-antd/src/views/pay/demo/order/index.vue
index aa40025f6fbc09f6a2a392f8c4cb03596492dc7b..dba47228d7a1741b50abf99cdc66285de5773966 100644
--- a/apps/web-antd/src/views/pay/demo/order/index.vue
+++ b/apps/web-antd/src/views/pay/demo/order/index.vue
@@ -1,13 +1,97 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DemoOrderApi } from '#/api/pay/demo/order';
 
-import { Button } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemoOrderPage, refundDemoOrder } from '#/api/pay/demo/order';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  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 hideLoading = message.loading({
+    content: '退款中，请稍后...',
+    key: 'action_key_msg',
+  });
+  try {
+    await refundDemoOrder(row.id as number);
+    message.success({
+      content: '退款成功',
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+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',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<DemoOrderApi.Order>,
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert
       title="支付宝支付接入"
       url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@@ -24,23 +108,47 @@ import { DocAlert } from '#/components/doc-alert';
       title="微信小程序支付接入"
       url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
     />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="示例订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #refundTime="{ row }">
+        <span v-if="row.refundTime">{{ formatDateTime(row.refundTime) }}</span>
+        <span v-else-if="row.payRefundId">退款中，等待退款结果</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '前往支付',
+              type: 'link',
+              ifShow: !row.payStatus,
+              onClick: handlePay.bind(null, row),
+            },
+            {
+              label: '发起退款',
+              type: 'link',
+              danger: true,
+              ifShow: row.payStatus && !row.payRefundId,
+              popConfirm: {
+                title: '确定发起退款吗？',
+                confirm: handleRefund.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/demo/order/modules/form.vue b/apps/web-antd/src/views/pay/demo/order/modules/form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..672dca4335167c41e09df0b78952d617ee6f00e5
--- /dev/null
+++ b/apps/web-antd/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 { message } from 'ant-design-vue';
+
+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');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="$t('ui.actionTitle.create', ['退款订单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/demo/transfer/index.vue b/apps/web-antd/src/views/pay/demo/transfer/index.vue
deleted file mode 100644
index 3a7e0556b05b749a9b386de2eb9ea43e4d2b38c1..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/pay/demo/transfer/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
-
-import { Button } from 'ant-design-vue';
-</script>
-
-<template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/transfer/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/transfer/index
-      代码，pull request 贡献给我们！
-    </Button>
-  </Page>
-</template>
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/data.ts b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccfa1af1b1e5e0402513142e5ce987d3c219fc9f
--- /dev/null
+++ b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'subject',
+      label: '提现标题',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '提现金额',
+      rules: 'required',
+      componentProps: {
+        min: 1,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'type',
+      label: '提现类型',
+      rules: 'required',
+      componentProps: {
+        options: [
+          { label: '支付宝', value: 1 },
+          { label: '微信余额', value: 2 },
+          { label: '钱包余额', value: 3 },
+        ],
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '收款人姓名',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'userAccount',
+      label: '收款人账号',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '提现单编号',
+      minWidth: 100,
+    },
+    {
+      field: 'subject',
+      title: '提现标题',
+      minWidth: 120,
+    },
+    {
+      field: 'type',
+      title: '提现类型',
+      minWidth: 90,
+      slots: { default: 'type' },
+    },
+    {
+      field: 'price',
+      title: '提现金额',
+      minWidth: 120,
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+      minWidth: 150,
+    },
+    {
+      field: 'userAccount',
+      title: '收款人账号',
+      minWidth: 250,
+    },
+    {
+      field: 'status',
+      title: '提现状态',
+      minWidth: 100,
+      slots: { default: 'status' },
+    },
+    {
+      field: 'payTransferId',
+      title: '转账单号',
+      minWidth: 120,
+    },
+    {
+      field: 'transferChannelCode',
+      title: '转账渠道',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'transferTime',
+      title: '转账时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'transferErrorMsg',
+      title: '转账失败原因',
+      minWidth: 200,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/index.vue b/apps/web-antd/src/views/pay/demo/withdraw/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c981aa433fab93cb820d79abb07ceb9996bc959
--- /dev/null
+++ b/apps/web-antd/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 { Page, useVbenModal } from '@vben/common-ui';
+
+import { message, Tag } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getDemoWithdrawPage,
+  transferDemoWithdraw,
+} from '#/api/pay/demo/withdraw';
+import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建提现单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 处理转账操作 */
+async function handleTransfer(row: DemoWithdrawApi.Withdraw) {
+  const hideLoading = message.loading({
+    content: '转账中，请稍后...',
+    key: 'action_key_msg',
+  });
+  try {
+    const payTransferId = await transferDemoWithdraw(row.id as number);
+    message.success({
+      content: `转账提交成功，转账单号：${payTransferId}`,
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+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',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      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="onRefresh" />
+    <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 }">
+        <Tag v-if="row.type === 1">支付宝</Tag>
+        <Tag v-else-if="row.type === 2">微信余额</Tag>
+        <Tag v-else-if="row.type === 3">钱包余额</Tag>
+      </template>
+      <template #price="{ row }">
+        <span>￥{{ (row.price / 100.0).toFixed(2) }}</span>
+      </template>
+      <template #status="{ row }">
+        <Tag v-if="row.status === 0 && !row.payTransferId" type="warning">
+          等待转账
+        </Tag>
+        <Tag v-else-if="row.status === 0 && row.payTransferId" type="info">
+          转账中
+        </Tag>
+        <Tag v-else-if="row.status === 10" type="success"> 转账成功 </Tag>
+        <Tag v-else-if="row.status === 20" type="danger"> 转账失败 </Tag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发起转账',
+              type: 'link',
+              ifShow: row.status === 0 && !row.payTransferId,
+              onClick: handleTransfer.bind(null, row),
+            },
+            {
+              label: '重新转账',
+              type: 'link',
+              ifShow: row.status === 20,
+              onClick: handleTransfer.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/modules/form.vue b/apps/web-antd/src/views/pay/demo/withdraw/modules/form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d2038a3bf01fc3da1af779fb31cdb18d00ad3b44
--- /dev/null
+++ b/apps/web-antd/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 { message } from 'ant-design-vue';
+
+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');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="$t('ui.actionTitle.create', ['示例提现单'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index d8e0942877247274b646c52023dd2ae7df2afbea..47eac2349c97912d128592d971348cf489fd52d6 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -59,7 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="支付宝支付接入"
diff --git a/apps/web-antd/src/views/pay/transfer/data.ts b/apps/web-antd/src/views/pay/transfer/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b6f8fef96e1f8df5c5163e0e6216f75d70a17ce4
--- /dev/null
+++ b/apps/web-antd/src/views/pay/transfer/data.ts
@@ -0,0 +1,285 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { Tag } from 'ant-design-vue';
+
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '转账单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入转账单号',
+      },
+    },
+    {
+      fieldName: 'channelCode',
+      label: '转账渠道',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
+        allowClear: true,
+        placeholder: '请选择支付渠道',
+      },
+    },
+    {
+      fieldName: 'merchantTransferId',
+      label: '商户单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商户单号',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
+        allowClear: true,
+        placeholder: '请选择类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '转账状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
+        allowClear: true,
+        placeholder: '请选择转账状态',
+      },
+    },
+    {
+      fieldName: 'userName',
+      label: '收款人姓名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入收款人姓名',
+      },
+    },
+    {
+      fieldName: 'accountNo',
+      label: '收款人账号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入收款人账号',
+      },
+    },
+    {
+      fieldName: 'channelTransferNo',
+      label: '渠道单号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入渠道单号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'appName',
+      title: '支付应用',
+      minWidth: 100,
+    },
+    {
+      field: 'price',
+      title: '转账金额',
+      minWidth: 120,
+      formatter: ({ cellValue }) => `￥${(cellValue / 100).toFixed(2)}`,
+    },
+    {
+      field: 'status',
+      title: '转账状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
+      },
+    },
+    {
+      field: 'type',
+      title: '类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
+      },
+    },
+    {
+      field: 'channelCode',
+      title: '支付渠道',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'merchantTransferId',
+      title: '商户单号',
+      minWidth: 180,
+    },
+    {
+      field: 'channelTransferNo',
+      title: '渠道单号',
+      minWidth: 180,
+    },
+    {
+      field: 'userName',
+      title: '收款人姓名',
+      minWidth: 120,
+    },
+    {
+      field: 'accountNo',
+      title: '收款人账号',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情的配置 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'merchantTransferId',
+      label: '商户单号',
+      content: (data) => {
+        return h(Tag, {
+          color: 'blue',
+          content: data?.merchantTransferId,
+        });
+      },
+    },
+    {
+      field: 'no',
+      label: '转账单号',
+      content: (data) => {
+        return h(Tag, {
+          color: 'blue',
+          content: data?.no,
+        });
+      },
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'status',
+      label: '转账状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_TRANSFER_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'price',
+      label: '转账金额',
+      content: (data) => {
+        return h(Tag, {
+          color: 'blue',
+          content: `￥${(data?.price / 100).toFixed(2)}`,
+        });
+      },
+    },
+    {
+      field: 'successTime',
+      label: '转账时间',
+      content: (data) => formatDateTime(data?.successTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'userName',
+      label: '收款人姓名',
+    },
+    {
+      field: 'userAccount',
+      label: '收款人账号',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'channelCode',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelTransferNo',
+      label: '渠道单号',
+      content: (data) => {
+        return h(Tag, {
+          color: 'blue',
+          content: data?.channelTransferNo,
+        });
+      },
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '转账渠道通知内容',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/transfer/index.vue b/apps/web-antd/src/views/pay/transfer/index.vue
index 4544ff2c81199cc6ac29f110b0b18031fc30162e..b3f9f5ee4d14fa841a5aed96fdaa6d5cdfb47772 100644
--- a/apps/web-antd/src/views/pay/transfer/index.vue
+++ b/apps/web-antd/src/views/pay/transfer/index.vue
@@ -1,28 +1,103 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayTransferApi } from '#/api/pay/transfer';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportTransfer, getTransferPage } from '#/api/pay/transfer';
+import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  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: {
+    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',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayTransferApi.Transfer>,
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/transfer/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/transfer/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="转账管理" url="https://doc.iocoder.cn/pay/transfer/" />
+    </template>
+
+    <DetailModal @success="onRefresh" />
+    <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: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:transfer:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/transfer/modules/detail.vue b/apps/web-antd/src/views/pay/transfer/modules/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..132a7cc91d06acc6a61dfc468bf6cb2b85f18483
--- /dev/null
+++ b/apps/web-antd/src/views/pay/transfer/modules/detail.vue
@@ -0,0 +1,55 @@
+<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 [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();
+    }
+  },
+});
+
+const [Description] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 2,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <Modal
+    title="转账单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Description :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/wallet/balance/data.ts b/apps/web-antd/src/views/pay/wallet/balance/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7476cdd452e23a744de67100402dc5b555dcb80f
--- /dev/null
+++ b/apps/web-antd/src/views/pay/wallet/balance/data.ts
@@ -0,0 +1,86 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '用户编号',
+      field: 'userId',
+    },
+    {
+      title: '用户类型',
+      field: 'userType',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      title: '余额',
+      field: 'balance',
+      formatter: 'formatFraction',
+    },
+    {
+      title: '累计支出',
+      field: 'totalExpense',
+      formatter: 'formatFraction',
+    },
+    {
+      title: '累计充值',
+      field: 'totalRecharge',
+      formatter: 'formatFraction',
+    },
+    {
+      title: '冻结金额',
+      field: 'freezePrice',
+      formatter: 'formatFraction',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/wallet/balance/index.vue b/apps/web-antd/src/views/pay/wallet/balance/index.vue
index e33be0dbbe854cbb295a6eb86262bcb63620ab33..e5d1048a9c231a4ba3268b39759a4e32ea0217fc 100644
--- a/apps/web-antd/src/views/pay/wallet/balance/index.vue
+++ b/apps/web-antd/src/views/pay/wallet/balance/index.vue
@@ -1,28 +1,82 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWalletPage } from '#/api/pay/wallet/balance';
+import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import WalletDetail from './modules/detail.vue';
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const [WalletModal, walletModalApi] = useVbenModal({
+  connectedComponent: WalletDetail,
+  destroyOnClose: true,
+});
+
+function handleDetail(row: Required<PayWalletApi.WalletVO>) {
+  walletModalApi.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',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayWalletApi.WalletVO>,
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/balance/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/balance/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <WalletModal @reload="onRefresh" />
+
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/wallet/balance/modules/detail.vue b/apps/web-antd/src/views/pay/wallet/balance/modules/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4a8c3128f093922f977902c49671ac3b0ccdcf09
--- /dev/null
+++ b/apps/web-antd/src/views/pay/wallet/balance/modules/detail.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import WalletTransactionList from '../../transaction/index.vue';
+
+const walletId = ref(0);
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayWalletApi.WalletVO>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      walletId.value = data.id;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    title="消息详情"
+    class="w-[40%]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <WalletTransactionList :wallet-id="walletId" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts b/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79e6d7c33ebf9debeb16dfa206c652fcdeed83a1
--- /dev/null
+++ b/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts
@@ -0,0 +1,119 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'payPrice',
+      label: '支付金额(元)',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      fieldName: 'bonusPrice',
+      label: '赠送金额(元)',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.01,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '套餐名称',
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      formatter: 'formatFraction',
+    },
+    {
+      field: 'bonusPrice',
+      title: '赠送金额',
+      formatter: 'formatFraction',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue b/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
index 472b3c341e867b08311afdf89b12884fb080257d..b86896ece250df181862b68748e17170bcaea08a 100644
--- a/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
+++ b/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
@@ -1,28 +1,129 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePackage,
+  getPackagePage,
+} 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 onRefresh() {
+  gridApi.query();
+}
+
+/** 创建套餐 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑套餐 */
+function handleEdit(row: any) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除套餐 */
+async function handleDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deletePackage(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/rechargePackage/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/rechargePackage/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <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: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:wallet-recharge-package:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: 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>
diff --git a/apps/web-antd/src/views/pay/wallet/rechargePackage/modules/form.vue b/apps/web-antd/src/views/pay/wallet/rechargePackage/modules/form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..11d1f9d5b675af1889f07f0eae837a494eb9f93e
--- /dev/null
+++ b/apps/web-antd/src/views/pay/wallet/rechargePackage/modules/form.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { WalletRechargePackageApi } from '#/api/pay/wallet/rechargePackage';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPackage,
+  getPackage,
+  updatePackage,
+} from '#/api/pay/wallet/rechargePackage';
+import { $t } from '#/locales';
+import { fenToYuan, yuanToFen } from '#/utils';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<WalletRechargePackageApi.Package>();
+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: 120,
+  },
+  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.Package;
+    try {
+      // 转换金额单位
+      data.payPrice = yuanToFen(data.payPrice);
+      data.bonusPrice = yuanToFen(data.bonusPrice);
+      await (formData.value?.id ? updatePackage(data) : createPackage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<WalletRechargePackageApi.Package>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPackage(data.id as number);
+      // 转换金额单位
+      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 class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/wallet/transaction/data.ts b/apps/web-antd/src/views/pay/wallet/transaction/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fe7a7279cddac22064da527da185e0b52905085
--- /dev/null
+++ b/apps/web-antd/src/views/pay/wallet/transaction/data.ts
@@ -0,0 +1,40 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      width: 80,
+    },
+    {
+      field: 'walletId',
+      title: '钱包编号',
+      width: 100,
+    },
+    {
+      field: 'title',
+      title: '关联业务标题',
+      width: 200,
+    },
+    {
+      field: 'price',
+      title: '交易金额',
+      width: 120,
+      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
+    },
+    {
+      field: 'balance',
+      title: '钱包余额',
+      width: 120,
+      formatter: ({ cellValue }) => `${cellValue / 100} 元`,
+    },
+    {
+      field: 'createTime',
+      title: '交易时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/wallet/transaction/index.vue b/apps/web-antd/src/views/pay/wallet/transaction/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dafb495cdc69d568e6f5a196d3e00f131ea87e6a
--- /dev/null
+++ b/apps/web-antd/src/views/pay/wallet/transaction/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
+
+import { useGridColumns } from './data';
+
+const props = defineProps({
+  walletId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  userId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+});
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          let walletId = props.walletId;
+          if (props.userId) {
+            const wallet = await getWallet({ userId: props.userId });
+            walletId = wallet.id;
+          }
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions<any>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="钱包交易记录" />
+  </Page>
+</template>
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 06b455057e3fa6dc190116f174b678632cff204c..70f4cfa5c0b2391268f4bf17d4dd685963933e8e 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -6,6 +6,7 @@ export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 export type {
   VxeGridListeners,
   VxeGridProps,
+  VxeGridPropTypes,
   VxeTableInstance,
   VxeToolbarInstance,
 } from 'vxe-table';
diff --git a/packages/icons/src/svg/icons/alipay-app.svg b/packages/icons/src/svg/icons/alipay-app.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ebf11883ec2748b2cc452767f53e95840af328dc
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-app.svg
@@ -0,0 +1 @@
+<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/alipay-bar.svg b/packages/icons/src/svg/icons/alipay-bar.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eb1e1e84864a58c3b688569682bb2d67d7753016
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-bar.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#1977FD"></path><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#1977FD"></path></svg>
diff --git a/packages/icons/src/svg/icons/alipay-pc.svg b/packages/icons/src/svg/icons/alipay-pc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2a752770339a47658a5718a62b51dc45716bfd32
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-pc.svg
@@ -0,0 +1 @@
+<svg t="1627279878333" class="icon" viewBox="0 0 1285 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8535" width="40" height="40"><path d="M1141.76 855.04h-286.72c0 40.96 30.72 71.68 71.68 71.68h107.52c20.48 0 35.84 15.36 35.84 35.84s-15.36 35.84-35.84 35.84h-783.36c-20.48 0-35.84-15.36-35.84-35.84s15.36-35.84 35.84-35.84h107.52c40.96 0 71.68-30.72 71.68-71.68h-286.72c-76.8 0-143.36-61.44-143.36-143.36v-568.32c0-76.8 61.44-143.36 143.36-143.36h993.28c76.8 0 143.36 61.44 143.36 143.36v568.32c5.12 76.8-56.32 143.36-138.24 143.36z m71.68-711.68c0-40.96-30.72-71.68-71.68-71.68h-993.28c-40.96 0-71.68 30.72-71.68 71.68v568.32c0 40.96 30.72 71.68 71.68 71.68h993.28c40.96 0 71.68-30.72 71.68-71.68v-568.32z m-143.36 568.32h-855.04c-40.96 0-71.68-30.72-71.68-71.68v-424.96c0-40.96 30.72-71.68 71.68-71.68h855.04c40.96 0 71.68 30.72 71.68 71.68v424.96c0 40.96-30.72 71.68-71.68 71.68z" p-id="8536" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/alipay-qr.svg b/packages/icons/src/svg/icons/alipay-qr.svg
new file mode 100644
index 0000000000000000000000000000000000000000..48337508a4d29e47cbafb860da25128d8283e229
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-qr.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279238245" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4112" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#1977FD" p-id="4113"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/alipay-wap.svg b/packages/icons/src/svg/icons/alipay-wap.svg
new file mode 100644
index 0000000000000000000000000000000000000000..87075dbb7cf30bcf61d7154f45b9ff56a8e490c7
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-wap.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645964864184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8460" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><defs><style type="text/css"></style></defs><path d="M768.3 0 255.7 0c-70.8 0-128.1 57.4-128.1 128.1l0 767.8c0 70.8 57.4 128.1 128.1 128.1L512 1024l256.3 0c70.8 0 128.1-57.4 128.1-128.1L896.4 128.1C896.4 57.3 839 0 768.3 0zM383.9 96.1c0-17.7 14.3-32 32-32l192.2 0c17.7 0 32 14.3 32 32l0 0c0 17.7-14.3 32-32 32L415.9 128.1C398.2 128.1 383.9 113.8 383.9 96.1L383.9 96.1zM512 959.9 512 959.9 512 959.9c-35.4 0-64.1-28.8-64.1-64.1 0-35.4 28.7-64.1 64.1-64.1l0 0 0 0c35.4 0 64.1 28.7 64.1 64.1C576.1 931.1 547.4 959.9 512 959.9zM832.3 755.6c0 6.7-5.4 12.2-12.2 12.2L203.9 767.8c-6.7 0-12.2-5.4-12.2-12.2L191.7 204.3c0-6.7 5.4-12.2 12.2-12.2l616.3 0c6.7 0 12.2 5.4 12.2 12.2L832.4 755.6z" p-id="8461" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/mock.svg b/packages/icons/src/svg/icons/mock.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e0a685719fc40a3a8e72aace1bdaa3824580dec0
--- /dev/null
+++ b/packages/icons/src/svg/icons/mock.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747409043186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4834" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M44.416 853.333333v-85.205333a170.666667 170.666667 0 0 1 170.666667-170.666667h170.837333a37637.589333 37637.589333 0 0 1 0-206.165333C324.309333 352.170667 281.6 285.141333 281.6 211.968c0-116.906667 90.197333-211.072 231.168-211.072 140.970667 0 230.741333 94.208 230.741333 211.072 0 73.216-40.96 140.245333-102.528 179.328 0.256 0.170667 0.256 68.906667 0 206.165333h171.989334a170.666667 170.666667 0 0 1 170.666666 170.666667V853.333333a170.666667 170.666667 0 0 1-170.666666 170.666667H215.082667a170.666667 170.666667 0 0 1-170.666667-170.666667z m84.266667-84.650666v104.277333a85.333333 85.333333 0 0 0 85.333333 85.333333H811.52a85.333333 85.333333 0 0 0 85.333333-85.333333v-104.277333a85.333333 85.333333 0 0 0-85.333333-85.333334h-256.64l8.96-342.698666c66.944-21.333333 100.394667-64.256 100.394667-128.682667 0-61.952-57.344-129.322667-151.466667-129.322667-94.122667 0-146.645333 61.610667-146.645333 129.322667 0 71.466667 34.816 114.346667 104.362666 128.682667v342.698666H214.016a85.333333 85.333333 0 0 0-85.333333 85.333334z m167.125333 138.368c-50.432 0-91.434667-41.557333-91.434667-92.586667s41.002667-92.586667 91.434667-92.586667c50.389333 0 91.434667 41.557333 91.434667 92.586667 0 24.832-9.6 48.170667-27.008 65.706667-17.237333 17.322667-40.106667 26.88-64.426667 26.88z m0-119.466667a27.093333 27.093333 0 0 0-27.306667 26.88c0 14.805333 12.245333 26.88 27.306667 26.88a27.306667 27.306667 0 0 0 19.498667-8.106667 26.453333 26.453333 0 0 0 7.808-18.773333 27.093333 27.093333 0 0 0-27.306667-26.88z" fill="#1296db" p-id="4835"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wallet.svg b/packages/icons/src/svg/icons/wallet.svg
new file mode 100644
index 0000000000000000000000000000000000000000..27b09ead500f80d77a3430ca09d7b5b05a99abd0
--- /dev/null
+++ b/packages/icons/src/svg/icons/wallet.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209854312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3033" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M173.077333 362.666667l91.114667-214.677334a65.6 65.6 0 0 1 86.016-34.773333c11.584 4.906667 24.96 10.282667 40.896 16.448 8.277333 3.2 16.789333 6.464 27.904 10.666667 28.202667 10.709333 39.296 14.933333 46.144 17.642666l51.477333-51.669333c28.181333-28.16 74.112-27.946667 102.570667 0.533333l195.925333 195.925334c16.426667 16.426667 23.445333 38.634667 21.056 59.904H896a42.666667 42.666667 0 0 1 42.666667 42.666666v490.666667a42.666667 42.666667 0 0 1-42.666667 42.666667H128a42.666667 42.666667 0 0 1-42.666667-42.666667V405.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h45.077333z m48.96 0h39.104l169.194667-169.770667-27.328-10.389333c-11.2-4.245333-19.818667-7.530667-28.224-10.794667a1459.2 1459.2 0 0 1-42.197333-17.002667 20.522667 20.522667 0 0 0-26.901334 10.88L222.037333 362.666667z m108.842667 0h454.954667a23.509333 23.509333 0 0 0-5.290667-25.322667l-195.925333-195.925333a23.36 23.36 0 0 0-33.024-0.213334L330.88 362.666667zM128 405.333333v490.666667h768V405.333333H128z m597.333333 320a85.333333 85.333333 0 1 1 0-170.666666 85.333333 85.333333 0 0 1 0 170.666666z m0-42.666666a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#4296d5" p-id="3034"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-app.svg b/packages/icons/src/svg/icons/wx-app.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ad40b2a2c734767d79b5e83350b737fe1ec86038
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-app.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-bar.svg b/packages/icons/src/svg/icons/wx-bar.svg
new file mode 100644
index 0000000000000000000000000000000000000000..11292e6e71888195cf75f1ea07d26abab8eaac1c
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-bar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#04C361"/><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#04C361"/></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-lite.svg b/packages/icons/src/svg/icons/wx-lite.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0c925cf39cb15e763c355b945690fe964120ec85
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-lite.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209433089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2990" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M608.6 290.3c67.1 0 121.7 50.5 121.7 112.9 0 19.4-5.6 38.4-15.7 55.5-15.3 25-39.8 43.5-69.4 52.3-7.9 2.3-13.9 3.2-19.4 3.2-13 0-23.1-10.2-23.1-23.1 0-13 10.2-23.1 23.1-23.1 0.9 0 2.8 0 5.1-0.9 19.9-5.6 35.6-17.1 44.4-32.4 6-9.7 8.8-20.4 8.8-31.5 0-36.6-33.8-66.6-75-66.6-14.4 0-28.2 3.7-40.7 10.6-21.8 12.5-34.7 33.3-34.7 56v193.9c0 39.3-21.8 75.4-57.9 95.8-19.4 11.1-41.2 16.7-63.4 16.7-67.1 0-121.7-50.5-121.7-112.9 0-19.4 5.6-38.4 15.7-55.5 15.3-25 39.8-43.5 69.4-52.3 8.3-2.3 13.9-3.2 19.4-3.2 13 0 23.1 10.2 23.1 23.1 0 13-10.2 23.1-23.1 23.1-0.9 0-2.8 0-5.1 0.9-19.9 6-35.6 17.6-44.4 32.4-6 9.7-8.8 20.4-8.8 31.5 0 36.6 33.8 66.6 75.4 66.6 14.4 0 28.2-3.7 40.7-10.6 21.8-12.5 34.7-33.3 34.7-56V403.3c0-39.3 21.8-75.4 57.9-95.8 19-11.6 40.7-17.2 63-17.2zM510.8 929c231.1 0 418.4-187.3 418.4-418.4S741.9 92.1 510.8 92.1 92.4 279.5 92.4 510.6 279.7 929 510.8 929z m0 22C267.5 951 70.3 753.8 70.3 510.6S267.5 70.1 510.8 70.1s440.5 197.2 440.5 440.5S754.1 951 510.8 951z" p-id="2991" fill="#58bf6b"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-native.svg b/packages/icons/src/svg/icons/wx-native.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bf3ba2b61673686419e02cc65f6521fb97045d04
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-native.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"/></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-pub.svg b/packages/icons/src/svg/icons/wx-pub.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d15b70f06285d16d66b2b5e067d16e49249f4
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-pub.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279797174" class="icon" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M797.14798 481.753a269.194 269.194 0 0 0 102.892-211.929C900.03998 120.99 779.02998 0 630.15698 0 481.28298 0 360.27398 120.99 360.27398 269.824c0 85.878 40.33 162.462 102.912 211.929A450.974 450.974 0 0 0 309.84198 582.774c-85.543 85.524-132.608 199.208-132.608 320.236 0 25.01 0 51.712 0.197 76.367a44.898 44.898 0 0 0 44.82 44.623h816.01a44.8 44.8 0 0 0 44.82-44.623V903.01c0-121.009-47.066-234.732-132.609-320.236a451.072 451.072 0 0 0-153.344-101.021z" p-id="7666" fill="#04C361"></path><path d="M1186.18898 580.391A378.644 378.644 0 0 0 1061.81198 473.03a223.783 223.783 0 0 0 64.237-157.657c0-49.742-15.872-96.67-45.746-136.074A225.34 225.34 0 0 0 964.70998 99.9a37.297 37.297 0 0 0-46.14 25.718c-5.592 19.89 5.79 40.724 25.6 46.356 63.114 18.196 107.363 77.135 107.363 143.4a148.913 148.913 0 0 1-81.23 133.06 38.065 38.065 0 0 0-20.363 36.608c1.32 15.203 11.58 28.16 25.975 32.65 125.479 39.601 209.703 155.038 209.703 287.173v63.074c0 20.638 16.62 37.534 37.16 37.711h0.196a37.396 37.396 0 0 0 37.337-37.336V805.06c-0.197-81.644-25.777-159.35-74.142-224.69z m-901.77-62.503a36.982 36.982 0 0 0 25.955-32.65 37.455 37.455 0 0 0-20.362-36.628 148.913 148.913 0 0 1-81.231-133.06c0-66.245 44.071-125.184 107.382-143.4a37.612 37.612 0 0 0 25.58-46.356 37.376 37.376 0 0 0-46.139-25.718 225.32 225.32 0 0 0-115.593 79.4 223.252 223.252 0 0 0-45.746 136.074c0 60.258 23.533 116.381 64.237 157.676A380.475 380.475 0 0 0 74.14498 580.569 373.839 373.839 0 0 0 0.00198 805.258v63.232c0 20.657 16.798 37.356 37.356 37.356h0.197a37.317 37.317 0 0 0 37.14-37.73V805.06c0-132.332 84.401-247.769 209.723-287.173z" p-id="7667" fill="#04C361"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 3b5cb99530f1c2f30f4336d1e5463cfbf168fc29..98f18e2905d2d4b6e276c2e7b1f732a55a48c30a 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -12,7 +12,26 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
 const SvgCakeIcon = createIconifyIcon('svg:cake');
 const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
 
+/** 支付 */
+const SvgAlipayPcIcon = createIconifyIcon('svg:alipay-pc');
+const SvgAlipayWapIcon = createIconifyIcon('svg:alipay-wap');
+const SvgAlipayAppIcon = createIconifyIcon('svg:alipay-app');
+const SvgAlipayQrIcon = createIconifyIcon('svg:alipay-qr');
+const SvgAlipayBarIcon = createIconifyIcon('svg:alipay-bar');
+const SvgWxPubIcon = createIconifyIcon('svg:wx-pub');
+const SvgWxLiteIcon = createIconifyIcon('svg:wx-lite');
+const SvgWxAppIcon = createIconifyIcon('svg:wx-app');
+const SvgWxNativeIcon = createIconifyIcon('svg:wx-native');
+const SvgWxBarIcon = createIconifyIcon('svg:wx-bar');
+const SvgWalletIcon = createIconifyIcon('svg:wallet');
+const SvgMockIcon = createIconifyIcon('svg:mock');
+
 export {
+  SvgAlipayAppIcon,
+  SvgAlipayBarIcon,
+  SvgAlipayPcIcon,
+  SvgAlipayQrIcon,
+  SvgAlipayWapIcon,
   SvgAntdvLogoIcon,
   SvgAvatar1Icon,
   SvgAvatar2Icon,
@@ -22,4 +41,11 @@ export {
   SvgCakeIcon,
   SvgCardIcon,
   SvgDownloadIcon,
+  SvgMockIcon,
+  SvgWalletIcon,
+  SvgWxAppIcon,
+  SvgWxBarIcon,
+  SvgWxLiteIcon,
+  SvgWxNativeIcon,
+  SvgWxPubIcon,
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7990be9684c630e42a65e67a45e200ab4bda06a8..dabf51bdb7ad4bcee34b8340f60613b50943a9d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,9 +6,6 @@ settings:
 
 catalogs:
   default:
-    '@ant-design/icons-vue':
-      specifier: ^7.0.1
-      version: 7.0.1
     '@changesets/changelog-github':
       specifier: ^0.5.1
       version: 0.5.1
@@ -686,9 +683,6 @@ importers:
 
   apps/web-antd:
     dependencies:
-      '@ant-design/icons-vue':
-        specifier: 'catalog:'
-        version: 7.0.1(vue@3.5.13(typescript@5.8.3))
       '@form-create/ant-design-vue':
         specifier: 'catalog:'
         version: 3.2.22(vue@3.5.13(typescript@5.8.3))