Merge remote-tracking branch 'yudao/dev' into dev

2025-05-26 16:44:20 +08:00
parent 11f32258e6 67af898baf
commit ef93c9824a
96 changed files with 5288 additions and 550 deletions
--- a/apps/web-antd/src/views/bpm/category/index.vue
+++ b/apps/web-antd/src/views/bpm/category/index.vue
@@ -6,11 +6,13 @@ import type {
 import type { BpmCategoryApi } from '#/api/bpm/category';

 import { Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';

 import { Button, message } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
+import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';

 import { useGridColumns, useGridFormSchema } from './data';
@@ -100,6 +102,10 @@ async function onDelete(row: BpmCategoryApi.CategoryVO) {

 <template>
  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
    <FormModal @success="onRefresh" />
    <Grid table-title="流程分类">
      <template #toolbar-tools>
--- a/apps/web-antd/src/views/bpm/form/data.ts
+++ b/apps/web-antd/src/views/bpm/form/data.ts
@@ -105,7 +105,7 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
    {
      field: 'operation',
      title: '操作',
-      minWidth: 150,
+      minWidth: 200,
      align: 'center',
      fixed: 'right',
      cellRender: {
--- a/apps/web-antd/src/views/bpm/form/designer/index.vue
+++ b/apps/web-antd/src/views/bpm/form/designer/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @siye：editor 要不要放到独立的目录？form/designer ？
 import { computed, onMounted, ref } from 'vue';

 import { Page, useVbenModal } from '@vben/common-ui';
@@ -12,19 +11,15 @@ import { getFormDetail } from '#/api/bpm/form';
 import { useFormCreateDesigner } from '#/components/form-create';
 import { router } from '#/router';
 import { setConfAndFields } from '#/utils';
-
-import Form from './modules/form.vue';
+import Form from '#/views/bpm/form/modules/form.vue';

 defineOptions({ name: 'BpmFormEditor' });

-// TODO @siye：这里有 lint 告警
-const props = defineProps<Props>();
-
-interface Props {
-  copyId?: number;
-  id?: number;
+const props = defineProps<{
+  copyId?: number | string;
+  id?: number | string;
  type: 'copy' | 'create' | 'edit';
-}
+}>();

 // 流程表单详情
 const flowFormConfig = ref();
@@ -85,7 +80,7 @@ const currentFormId = computed(() => {
 });

 // 加载表单配置
-async function loadFormConfig(id: number) {
+async function loadFormConfig(id: number | string) {
  try {
    const formDetail = await getFormDetail(id);
    flowFormConfig.value = formDetail;
@@ -107,10 +102,11 @@ async function initializeDesigner() {
  }

  if (id) {
-    await loadFormConfig(id);
+    await loadFormConfig(Number(id));
  }
 }

+// 保存表单
 function handleSave() {
  formModalApi
    .setData({
@@ -121,7 +117,7 @@ function handleSave() {
    .open();
 }

-// TODO @siye：一些必要的注释，稍微写写哈。保持风格的一致性；
+// 返回列表页
 function onBack() {
  router.push({
    path: '/bpm/manager/form',
--- a/apps/web-antd/src/views/bpm/form/index.vue
+++ b/apps/web-antd/src/views/bpm/form/index.vue
@@ -12,6 +12,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 import { $t } from '@vben/locales';

+import FormCreate from '@form-create/ant-design-vue';
 import { Button, message } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -119,7 +120,6 @@ async function onDetail(row: BpmFormApi.FormVO) {

 /** 编辑 */
 function onEdit(row: BpmFormApi.FormVO) {
-  console.warn(row);
  router.push({
    name: 'BpmFormEditor',
    query: {
@@ -165,11 +165,12 @@ watch(

 <template>
  <Page auto-content-height>
-    <DocAlert
-      title="审批接入（流程表单）"
-      url="https://doc.iocoder.cn/bpm/use-bpm-form/"
-    />
-    <FormModal @success="onRefresh" />
+    <template #doc>
+      <DocAlert
+        title="审批接入（流程表单）"
+        url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+      />
+    </template>
    <Grid table-title="流程表单">
      <template #toolbar-tools>
        <Button type="primary" @click="onCreate">
@@ -177,28 +178,6 @@ watch(
          {{ $t('ui.actionTitle.create', ['流程表单']) }}
        </Button>
      </template>
-
-      <!-- 摘要 -->
-      <!-- TODO @siye：这个是不是不应该有呀？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
    </Grid>

    <DetailModal
@@ -209,7 +188,7 @@ watch(
      }"
    >
      <div class="mx-4">
-        <form-create :option="formConfig.option" :rule="formConfig.rule" />
+        <FormCreate :option="formConfig.option" :rule="formConfig.rule" />
      </div>
    </DetailModal>
  </Page>
--- a/apps/web-antd/src/views/bpm/form/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/form/modules/form.vue
@@ -39,28 +39,29 @@ const [Form, formApi] = useVbenForm({

 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
-    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
+    // 表单验证
    const { valid } = await formApi.validate();
    if (!valid) return;

+    // 锁定模态框
    modalApi.lock();
    try {
+      // 获取表单数据
      const data = (await formApi.getValues()) as BpmFormApi.FormVO;

+      // 编码表单配置和表单字段
      data.conf = encodeConf(designerComponent);
      data.fields = encodeFields(designerComponent);

-      // TODO @siye：这个是不是不用抽方法呀，直接写逻辑就完事啦。
-      const saveForm = async () => {
-        if (!formData.value?.id) {
-          return createForm(data);
-        }
-        return editorAction.value === 'copy'
+      // 保存表单数据
+      if (formData.value?.id) {
+        await (editorAction.value === 'copy'
          ? createForm(data)
-          : updateForm(data);
-      };
+          : updateForm(data));
+      } else {
+        await createForm(data);
+      }

-      await saveForm();
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -76,14 +77,15 @@ const [Modal, modalApi] = useVbenModal({
      return;
    }

-    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
    const data = modalApi.getData<any>();
    if (!data) return;

+    // 设置表单设计器组件
    designerComponent.value = data.designer;
    formData.value = data.formConfig;
    editorAction.value = data.action;

+    // 如果是复制，表单名称后缀添加 _copy ，id 置空
    if (editorAction.value === 'copy' && formData.value) {
      formData.value = {
        ...formData.value,
--- a/apps/web-antd/src/views/bpm/group/data.ts
+++ b/apps/web-antd/src/views/bpm/group/data.ts
@@ -101,6 +101,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
  onActionClick: OnActionClickFn<T>,
+  getMemberNames: (userIds: number[]) => string,
 ): VxeTableGridOptions['columns'] {
  return [
    {
@@ -122,8 +123,8 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
      field: 'userIds',
      title: '成员',
      minWidth: 200,
-      slots: {
-        default: 'userIds-cell',
+      formatter: (row) => {
+        return getMemberNames(row.cellValue);
      },
    },
    {
--- a/apps/web-antd/src/views/bpm/group/index.vue
+++ b/apps/web-antd/src/views/bpm/group/index.vue
@@ -16,6 +16,7 @@ import { Button, message } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
 import { getSimpleUserList } from '#/api/system/user';
+import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';

 import { useGridColumns, useGridFormSchema } from './data';
@@ -30,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(onActionClick, getMemberNames),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@@ -42,21 +43,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
            ...formValues,
          });
        },
-        querySuccess: (params) => {
-          // TODO @siye：getLeaderName?: (userId: number) => string | undefined, 参考这个哈。
-          const { list } = params.response;
-          const userMap = new Map(
-            userList.value.map((user) => [user.id, user.nickname]),
-          );
-          list.forEach(
-            (item: BpmUserGroupApi.UserGroupVO & { nicknames?: string }) => {
-              item.nicknames = item.userIds
-                .map((userId) => userMap.get(userId))
-                .filter(Boolean)
-                .join('、');
-            },
-          );
-        },
      },
    },
    rowConfig: {
@@ -69,6 +55,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<BpmUserGroupApi.UserGroupVO>,
 });

+/** 获取分组成员姓名 */
+function getMemberNames(userIds: number[]) {
+  const userMap = new Map(
+    userList.value.map((user) => [user.id, user.nickname]),
+  );
+  return userIds
+    .map((userId) => userMap.get(userId))
+    .filter(Boolean)
+    .join('、');
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
  code,
@@ -128,6 +125,10 @@ onMounted(async () => {

 <template>
  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
    <FormModal @success="onRefresh" />
    <Grid table-title="用户分组">
      <template #toolbar-tools>
--- a/apps/web-antd/src/views/bpm/oa/leave/data.ts
+++ b/apps/web-antd/src/views/bpm/oa/leave/data.ts
@@ -1,9 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';

 import { useAccess } from '@vben/access';

+import dayjs from 'dayjs';
+
+import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';

 const { hasAccessByCodes } = useAccess();
@@ -198,3 +204,32 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
    },
  ];
 }
+
+/** 详情 */
+export function useDetailFormSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      label: '请假类型',
+      field: 'type',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
+          value: data?.type,
+        }),
+    },
+    {
+      label: '开始时间',
+      field: 'startTime',
+      content: (data) => dayjs(data?.startTime).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      label: '结束时间',
+      field: 'endTime',
+      content: (data) => dayjs(data?.endTime).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      label: '原因',
+      field: 'reason',
+    },
+  ];
+}
--- a/apps/web-antd/src/views/bpm/oa/leave/detail.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
@@ -1,11 +1,54 @@
-<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+<script setup lang="ts">
+import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { getLeave } from '#/api/bpm/oa/leave';
+import { ContentWrap } from '#/components/content-wrap';
+import { Description } from '#/components/description';
+
+import { useDetailFormSchema } from './data';
+
+const props = defineProps<{
+  id: string;
+}>();
+const datailLoading = ref(false);
+const detailData = ref<BpmOALeaveApi.LeaveVO>();
+
+const { query } = useRoute();
+const queryId = computed(() => query.id as string);
+
+const getDetailData = async () => {
+  try {
+    datailLoading.value = true;
+    detailData.value = await getLeave(Number(props.id || queryId.value));
+  } finally {
+    datailLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  getDetailData();
+});
 </script>

 <template>
-  <Page>
-    <div>
-      <h1>请假详情</h1>
-    </div>
-  </Page>
+  <ContentWrap class="m-2">
+    <Description
+      :data="detailData"
+      :schema="useDetailFormSchema()"
+      :component-props="{
+        column: 1,
+        bordered: true,
+        size: 'small',
+      }"
+    />
+  </ContentWrap>
 </template>
+
+<style lang="scss" scoped>
+:deep(.ant-descriptions-item-label) {
+  width: 150px;
+}
+</style>
--- a/apps/web-antd/src/views/bpm/processExpression/index.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/index.vue
@@ -106,8 +106,12 @@ async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {

 <template>
  <Page auto-content-height>
-    <DocAlert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
-
+    <template #doc>
+      <DocAlert
+        title="流程表达式"
+        url="https://doc.iocoder.cn/bpm/expression/"
+      />
+    </template>
    <FormModal @success="onRefresh" />
    <Grid table-title="流程表达式">
      <template #toolbar-tools>
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
 import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';

 import { computed, nextTick, onMounted, ref } from 'vue';
@@ -33,7 +34,9 @@ const processInstanceId: any = route.query.processInstanceId; // 流程实例编
 const loading = ref(true); // 加载中
 const categoryList: any = ref([]); // 分类的列表
 const activeCategory = ref(''); // 当前选中的分类
-const processDefinitionList = ref([]); // 流程定义的列表
+const processDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]); // 流程定义的列表

 // 实现 groupBy 功能
 const groupBy = (array: any[], key: string) => {
@@ -107,8 +110,12 @@ const handleGetProcessDefinitionList = async () => {
  }
 };

+/** 用于存储搜索过滤后的流程定义 */
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]);
+
 /** 搜索流程 */
-const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
  if (searchName.value.trim()) {
    // 如果有搜索关键字，进行过滤
@@ -150,10 +157,15 @@ const processDefinitionGroup: any = computed(() => {

  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
  // 按照 categoryList 的顺序重新组织数据
-  const orderedGroup = {};
-  categoryList.value.forEach((category: any) => {
+  const orderedGroup: Record<
+    string,
+    BpmProcessDefinitionApi.ProcessDefinitionVO[]
+  > = {};
+  categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
    if (grouped[category.code]) {
-      orderedGroup[category.code] = grouped[category.code];
+      orderedGroup[category.code] = grouped[
+        category.code
+      ] as BpmProcessDefinitionApi.ProcessDefinitionVO[];
    }
  });
  return orderedGroup;
@@ -191,7 +203,7 @@ const availableCategories = computed(() => {
  const availableCategoryCodes = Object.keys(processDefinitionGroup.value);

  // 过滤出有流程的分类
-  return categoryList.value.filter((category: CategoryVO) =>
+  return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
    availableCategoryCodes.includes(category.code),
  );
 });
@@ -229,11 +241,7 @@ onMounted(() => {
              allow-clear
              @input="handleQuery"
              @clear="handleQuery"
-            >
-              <template #prefix>
-                <IconifyIcon icon="mdi:search-web" />
-              </template>
-            </InputSearch>
+            />
          </div>
        </template>

@@ -289,15 +297,6 @@ onMounted(() => {
                        </Tooltip>
                      </span>
                    </div>
-
-                    <!-- TODO: 发起流程按钮 -->
-                    <!-- <template #actions>
-                      <div class="flex justify-end px-4">
-                        <Button type="link" @click="handleSelect(definition)">
-                          发起流程
-                        </Button>
-                      </div>
-                    </template> -->
                  </Card>
                </Col>
              </Row>
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -20,13 +20,14 @@ import {
  BpmCandidateStrategyEnum,
  BpmFieldPermissionType,
  BpmModelFormType,
+  BpmModelType,
  BpmNodeIdEnum,
  BpmNodeTypeEnum,
  decodeFields,
  setConfAndFields2,
 } from '#/utils';
+import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
 import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
-
 // 类型定义
 interface ProcessFormData {
  rule: any[];
@@ -80,8 +81,8 @@ const detailForm = ref<ProcessFormData>({

 const fApi = ref<ApiAttrs>();
 const startUserSelectTasks = ref<UserTask[]>([]);
-const startUserSelectAssignees = ref<Record<number, string[]>>({});
-const tempStartUserSelectAssignees = ref<Record<number, string[]>>({});
+const startUserSelectAssignees = ref<Record<string, string[]>>({});
+const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
 const bpmnXML = ref<string | undefined>(undefined);
 const simpleJson = ref<string | undefined>(undefined);
 const timelineRef = ref<any>();
@@ -273,9 +274,7 @@ const handleCancel = () => {
 /** 选择发起人 */
 const selectUserConfirm = (activityId: string, userList: any[]) => {
  if (!activityId || !Array.isArray(userList)) return;
-  startUserSelectAssignees.value[Number(activityId)] = userList.map(
-    (item) => item.id,
-  );
+  startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
 };

 defineExpose({ initProcessInfo });
@@ -284,12 +283,11 @@ defineExpose({ initProcessInfo });
 <template>
  <Card
    :title="getTitle"
+    class="h-full overflow-hidden"
    :body-style="{
-      padding: '12px',
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      paddingBottom: '62px', // 预留 actions 区域高度
+      height: 'calc(100% - 112px)',
+      paddingTop: '12px',
+      overflowY: 'auto',
    }"
  >
    <template #extra>
@@ -334,18 +332,25 @@ defineExpose({ initProcessInfo });
      </Tabs.TabPane>

      <Tabs.TabPane tab="流程图" key="flow" class="flex flex-1 overflow-hidden">
-        <div>待开发</div>
+        <div class="w-full">
+          <ProcessInstanceSimpleViewer
+            :simple-json="simpleJson"
+            v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
+          />
+        </div>
      </Tabs.TabPane>
    </Tabs>

    <template #actions>
      <template v-if="activeTab === 'form'">
-        <Space wrap class="flex h-[50px] w-full justify-center">
+        <Space wrap class="flex w-full justify-center">
          <Button plain type="primary" @click="submitForm">
-            <IconifyIcon icon="mdi:check" />&nbsp; 发起
+            <IconifyIcon icon="icon-park-outline:check" />
+            发起
          </Button>
          <Button plain type="default" @click="handleCancel">
-            <IconifyIcon icon="mdi:close" />&nbsp; 取消
+            <IconifyIcon icon="icon-park-outline:close" />
+            取消
          </Button>
        </Space>
      </template>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -2,21 +2,12 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';

-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';

 import { Page } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';

-import {
-  Avatar,
-  Button,
-  Card,
-  Col,
-  message,
-  Row,
-  TabPane,
-  Tabs,
-} from 'ant-design-vue';
+import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';

 import {
  getApprovalDetail as getApprovalDetailApi,
@@ -39,6 +30,10 @@ import {
  SvgBpmRunningIcon,
 } from '#/views/bpm/processInstance/detail/modules/icons';

+import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
+import ProcessInstanceOperationButton from './modules/operation-button.vue';
+import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
+import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';

 defineOptions({ name: 'BpmProcessInstanceDetail' });
@@ -71,7 +66,7 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
-// const operationButtonRef = ref(); // 操作按钮组件 ref
+const operationButtonRef = ref(); // 操作按钮组件 ref
 const auditIconsMap: {
  [key: string]:
    | typeof SvgBpmApproveIcon
@@ -99,7 +94,7 @@ const detailForm = ref({
 const writableFields: Array<string> = []; // 表单可以编辑的字段

 /** 加载流程实例 */
-const BusinessFormComponent = ref<any>(null); // 异步组件
+const BusinessFormComponent = shallowRef<any>(null); // 异步组件

 /** 获取详情 */
 async function getDetail() {
@@ -161,6 +156,7 @@ async function getApprovalDetail() {
      });
    } else {
      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+
      BusinessFormComponent.value = registerComponent(
        data?.processDefinition?.formCustomViewPath || '',
      );
@@ -168,6 +164,9 @@ async function getApprovalDetail() {

    // 获取审批节点，显示 Timeline 的数据
    activityNodes.value = data.activityNodes;
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask);
  } catch {
    message.error('获取审批详情失败！');
  } finally {
@@ -221,6 +220,20 @@ const setFieldPermission = (field: string, permission: string) => {

 /** 当前的Tab */
 const activeTab = ref('form');
+const taskListRef = ref();
+
+// 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表
+watch(
+  () => activeTab.value,
+  (newVal) => {
+    if (newVal === 'record') {
+      // 如果切换到流转记录标签，刷新任务列表
+      nextTick(() => {
+        taskListRef.value?.refresh();
+      });
+    }
+  },
+);

 /** 初始化 */
 const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
@@ -234,9 +247,7 @@ onMounted(async () => {
 <template>
  <Page auto-content-height>
    <Card
-      class="h-full"
      :body-style="{
-        height: 'calc(100% - 140px)',
        overflowY: 'auto',
        paddingTop: '12px',
      }"
@@ -291,18 +302,25 @@ onMounted(async () => {
        </div>

        <!-- 流程操作 -->
-        <div class="flex-1">
-          <Tabs v-model:active-key="activeTab" class="mt-0">
-            <TabPane tab="审批详情" key="form">
-              <Row :gutter="[48, 24]">
-                <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
+        <div class="process-tabs-container flex flex-1 flex-col">
+          <Tabs v-model:active-key="activeTab" class="mt-0 h-full">
+            <TabPane tab="审批详情" key="form" class="tab-pane-content">
+              <Row :gutter="[48, 24]" class="h-full">
+                <Col
+                  :xs="24"
+                  :sm="24"
+                  :md="18"
+                  :lg="18"
+                  :xl="16"
+                  class="h-full"
+                >
                  <!-- 流程表单 -->
                  <div
                    v-if="
                      processDefinition?.formType === BpmModelFormType.NORMAL
                    "
+                    class="h-full"
                  >
-                    <!-- v-model="detailForm.value" -->
                    <form-create
                      v-model="detailForm.value"
                      v-model:api="fApi"
@@ -315,40 +333,110 @@ onMounted(async () => {
                    v-if="
                      processDefinition?.formType === BpmModelFormType.CUSTOM
                    "
+                    class="h-full"
                  >
                    <BusinessFormComponent :id="processInstance?.businessKey" />
                  </div>
                </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
-                  <div class="mt-2">
+                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
+                  <div class="mt-4 h-full">
                    <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                  </div>
                </Col>
              </Row>
            </TabPane>

-            <TabPane tab="流程图" key="diagram">
-              <div>待开发</div>
+            <TabPane tab="流程图" key="diagram" class="tab-pane-content">
+              <div class="h-full">
+                <ProcessInstanceSimpleViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.SIMPLE
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+                <ProcessInstanceBpmnViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.BPMN
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+              </div>
            </TabPane>

-            <TabPane tab="流转记录" key="record">
-              <div>待开发</div>
+            <TabPane tab="流转记录" key="record" class="tab-pane-content">
+              <div class="h-full">
+                <BpmProcessInstanceTaskList
+                  ref="taskListRef"
+                  :loading="processInstanceLoading"
+                  :id="id"
+                />
+              </div>
            </TabPane>

            <!-- TODO 待开发 -->
-            <TabPane tab="流转评论" key="comment" v-if="false">
-              <div>待开发</div>
+            <TabPane
+              tab="流转评论"
+              key="comment"
+              v-if="false"
+              class="tab-pane-content"
+            >
+              <div class="h-full">待开发</div>
            </TabPane>
          </Tabs>
        </div>
      </div>

      <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
-          <Button type="primary">驳回</Button>
-          <Button type="primary">同意</Button>
+        <div class="px-4">
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :user-options="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="getDetail"
+          />
        </div>
      </template>
    </Card>
  </Page>
 </template>
+
+<style lang="scss" scoped>
+.ant-tabs-content {
+  height: 100%;
+}
+
+.process-tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs-content) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.ant-tabs-tabpane) {
+  height: 100%;
+}
+
+.tab-pane-content {
+  height: calc(100vh - 420px);
+  padding-right: 12px;
+  overflow: hidden auto;
+}
+</style>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>BPMN Viewer</h1>
+  </div>
+</template>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import Vue3Signature from 'vue3-signature';
+
+import { uploadFile } from '#/api/infra/file';
+import { download } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceSignature',
+});
+
+const emits = defineEmits(['success']);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '流程签名',
+  onOpenChange(visible) {
+    if (!visible) {
+      modalApi.close();
+    }
+  },
+  onConfirm: () => {
+    submit();
+  },
+});
+
+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
+const open = async () => {
+  modalApi.open();
+};
+
+defineExpose({ open });
+
+const submit = async () => {
+  message.success({
+    content: '签名上传中请稍等。。。',
+  });
+  const signFileUrl = await uploadFile({
+    file: download.base64ToFile(
+      signature?.value?.save('image/jpeg') || '',
+      '签名',
+    ),
+  });
+  emits('success', signFileUrl);
+  modalApi.close();
+};
+</script>
+
+<template>
+  <Modal class="h-[500px] w-[900px]">
+    <div class="mb-2 flex justify-end">
+      <Space>
+        <Tooltip title="撤销上一步操作">
+          <Button @click="signature?.undo()">
+            <template #icon>
+              <IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
+            </template>
+            撤销
+          </Button>
+        </Tooltip>
+
+        <Tooltip title="清空画布">
+          <Button @click="signature?.clear()">
+            <template #icon>
+              <IconifyIcon
+                icon="mdi:delete-outline"
+                class="mb-[4px] size-[16px]"
+              />
+            </template>
+            <span>清除</span>
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+
+    <Vue3Signature
+      class="mx-auto border-[1px] border-solid border-gray-300"
+      ref="signature"
+      w="874px"
+      h="324px"
+    />
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceSimpleViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>Simple BPM Viewer</h1>
+  </div>
+</template>
--- 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
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { formCreate } from '@form-create/antd-designer';
+
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { nextTick, onMounted, ref, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
+import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceTaskList',
+});
+
+const props = defineProps<{
+  id: string;
+  loading: boolean;
+}>();
+
+// 使用shallowRef减少不必要的深度响应
+const columns = shallowRef([
+  {
+    field: 'name',
+    title: '审批节点',
+    minWidth: 150,
+  },
+  {
+    field: 'approver',
+    title: '审批人',
+    slots: {
+      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
+        return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+      },
+    },
+    minWidth: 180,
+  },
+  {
+    field: 'createTime',
+    title: '开始时间',
+    formatter: 'formatDateTime',
+    minWidth: 180,
+  },
+  {
+    field: 'endTime',
+    title: '结束时间',
+    formatter: 'formatDateTime',
+    minWidth: 180,
+  },
+  {
+    field: 'status',
+    title: '审批状态',
+    minWidth: 150,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.BPM_TASK_STATUS },
+    },
+  },
+  {
+    field: 'reason',
+    title: '审批建议',
+    slots: {
+      default: 'slot-reason',
+    },
+    minWidth: 200,
+  },
+  {
+    field: 'durationInMillis',
+    title: '耗时',
+    minWidth: 180,
+    slots: {
+      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
+        return formatPast2(row.durationInMillis);
+      },
+    },
+  },
+]);
+
+// Grid配置和API
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: columns.value,
+    keepSource: true,
+    showFooter: true,
+    border: true,
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getTaskListByProcessInstanceId(props.id);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    cellConfig: {
+      height: 60,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+});
+
+/**
+ * 刷新表格数据
+ */
+const refresh = (): void => {
+  gridApi.query();
+};
+
+// 表单相关
+interface TaskForm {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+// 定义表单组件引用类型
+
+// 使用明确的类型定义
+const formRef = ref<formCreate>();
+const taskForm = ref<TaskForm>({
+  rule: [],
+  option: {},
+  value: {},
+});
+
+/**
+ * 显示表单详情
+ * @param row 任务数据
+ */
+async function showFormDetail(row: BpmTaskApi.TaskManagerVO): Promise<void> {
+  // 设置表单配置和表单字段
+  taskForm.value = {
+    rule: [],
+    option: {},
+    value: row,
+  };
+
+  setConfAndFields2(
+    taskForm,
+    row.formConf,
+    row.formFields || [],
+    row.formVariables || {},
+  );
+
+  // 打开弹窗
+  modalApi.open();
+
+  // 等待表单渲染
+  await nextTick();
+
+  // 获取表单API实例
+  const formApi = formRef.value?.fapi;
+  if (!formApi) return;
+
+  // 设置表单不可编辑
+  formApi.btn.show(false);
+  formApi.resetBtn.show(false);
+  formApi.disabled(true);
+}
+
+// 表单查看模态框
+const [Modal, modalApi] = useVbenModal({
+  title: '查看表单',
+  footer: false,
+});
+
+onMounted(() => {
+  refresh();
+});
+
+// 暴露刷新方法给父组件
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <Grid>
+      <template #slot-reason="{ row }">
+        <div class="flex flex-wrap items-center justify-center">
+          <span v-if="row.reason">{{ row.reason }}</span>
+          <span v-else>-</span>
+
+          <Button
+            v-if="row.formId > 0"
+            type="primary"
+            @click="showFormDetail(row)"`
+            size="small"
+            ghost
+            class="ml-1"
+          >
+            <IconifyIcon icon="ep:document" />
+            <span class="!ml-[2px] text-[12px]">查看表单</span>
+          </Button>
+        </div>
+      </template>
+    </Grid>
+    <Modal class="w-[800px]">
+      <form-create
+        ref="formRef"
+        v-model="taskForm.value"
+        :option="taskForm.option"
+        :rule="taskForm.rule"
+      />
+    </Modal>
+  </div>
+</template>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -43,7 +43,7 @@ const statusIconMap: Record<
  // 审批未开始
  '-1': { color: '#909398', icon: 'mdi:clock-outline' },
  // 待审批
-  '0': { color: '#00b32a', icon: 'mdi:loading' },
+  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
  // 审批中
  '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
  // 审批通过
--- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
@@ -105,7 +105,9 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
    content: '请输入取消原因',
    title: '取消流程',
    modelPropName: 'value',
-  });
+  })
+    .then(() => {})
+    .catch(() => {});
 }

 /** 查看流程实例 */
@@ -125,9 +127,10 @@ function onRefresh() {

 <template>
  <Page auto-content-height>
-    <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    </template>

-    <FormModal @success="onRefresh" />
    <Grid table-title="流程实例" />
  </Page>
 </template>
--- a/apps/web-antd/src/views/bpm/processListener/index.vue
+++ b/apps/web-antd/src/views/bpm/processListener/index.vue
@@ -108,10 +108,12 @@ async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {

 <template>
  <Page auto-content-height>
-    <DocAlert
-      title="执行监听器、任务监听器"
-      url="https://doc.iocoder.cn/bpm/listener/"
-    />
+    <template #doc>
+      <DocAlert
+        title="执行监听器、任务监听器"
+        url="https://doc.iocoder.cn/bpm/listener/"
+      />
+    </template>
    <FormModal @success="onRefresh" />
    <Grid table-title="流程监听器">
      <template #toolbar-tools>
--- a/apps/web-antd/src/views/bpm/task/copy/index.vue
+++ b/apps/web-antd/src/views/bpm/task/copy/index.vue
@@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
    cellConfig: {
      height: 64,
    },
-  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
 });

 /** 表格操作按钮的回调函数 */
 function onActionClick({
  code,
  row,
-}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
+}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
  switch (code) {
    case 'detail': {
      onDetail(row);
@@ -61,9 +61,8 @@ function onActionClick({
  }
 }

-/** 办理任务 */
-function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
-  // TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
+/** 任务详情 */
+function onDetail(row: BpmProcessInstanceApi.CopyVO) {
  const query = {
    id: row.processInstanceId,
    ...(row.activityId && { activityId: row.activityId }),
@@ -82,11 +81,12 @@ function onRefresh() {

 <template>
  <Page auto-content-height>
-    <!-- TODO @siye：应该用 <template #doc>，这样高度可以被用进去哈 -->
-    <DocAlert
-      title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
+    <template #doc>
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+    </template>

    <FormModal @success="onRefresh" />
    <Grid table-title="抄送任务">
--- a/apps/web-antd/src/views/bpm/task/done/data.ts
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -2,8 +2,6 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';

-import { useAccess } from '@vben/access';
-
 import { getCategorySimpleList } from '#/api/bpm/category';
 import {
  DICT_TYPE,
@@ -12,18 +10,15 @@ import {
  getRangePickerDefaultProps,
 } from '#/utils';

-// TODO @siye：这个要去掉么？没用到
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'name',
-      label: '流程名称',
+      label: '任务名称',
      component: 'Input',
      componentProps: {
-        placeholder: '请输入流程名称',
+        placeholder: '请输入任务名称',
        allowClear: true,
      },
    },
@@ -79,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
 ): VxeTableGridOptions['columns'] {
  return [
    {
-      field: 'name',
-      title: '流程名称',
+      field: 'processInstance.name',
+      title: '流程',
      minWidth: 200,
      fixed: 'left',
    },
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -78,18 +78,19 @@ function onRefresh() {

 <template>
  <Page auto-content-height>
-    <DocAlert
-      title="审批通过、不通过、驳回"
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <DocAlert
-      title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>

-    <FormModal @success="onRefresh" />
    <Grid table-title="已办任务">
      <!-- 摘要 -->
      <template #slot-summary="{ row }">
--- a/apps/web-antd/src/views/bpm/task/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/task/manager/data.ts
@@ -33,19 +33,11 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
 ): VxeTableGridOptions['columns'] {
  return [
    {
-      field: 'name',
-      title: '流程名称',
+      field: 'processInstance.name',
+      title: '流程',
      minWidth: 200,
      fixed: 'left',
    },
-    {
-      field: 'processInstance.summary',
-      title: '摘要',
-      minWidth: 200,
-      slots: {
-        default: 'slot-summary',
-      },
-    },
    {
      field: 'processInstance.startUser.nickname',
      title: '发起人',
--- a/apps/web-antd/src/views/bpm/task/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/task/manager/index.vue
@@ -16,7 +16,7 @@ import { useGridColumns, useGridFormSchema } from './data';

 defineOptions({ name: 'BpmManagerTask' });

-const [Grid, gridApi] = useVbenVxeGrid({
+const [Grid] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
@@ -45,11 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
    cellConfig: {
      height: 64,
    },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskManagerVO>,
 });

 /** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<BpmTaskApi.TaskManagerVO>) {
  switch (code) {
    case 'history': {
      onHistory(row);
@@ -59,50 +62,22 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
 }

 /** 查看历史 */
-function onHistory(row: BpmTaskApi.TaskVO) {
+function onHistory(row: BpmTaskApi.TaskManagerVO) {
  console.warn(row);
  router.push({
    name: 'BpmProcessInstanceDetail',
    query: {
-      // TODO @siye：数据类型，会爆红哈；
      id: row.processInstance.id,
    },
  });
 }
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
 </script>

 <template>
  <Page auto-content-height>
-    <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
-
-    <FormModal @success="onRefresh" />
-    <Grid table-title="流程任务">
-      <!-- 摘要 -->
-      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
-    </Grid>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+    <Grid table-title="流程任务" />
  </Page>
 </template>
--- a/apps/web-antd/src/views/bpm/task/todo/data.ts
+++ b/apps/web-antd/src/views/bpm/task/todo/data.ts
@@ -2,6 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';

+import { h } from 'vue';
+
 import { useAccess } from '@vben/access';

 import { getCategorySimpleList } from '#/api/bpm/category';
@@ -14,10 +16,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'name',
-      label: '流程名称',
+      label: '任务名称',
      component: 'Input',
      componentProps: {
-        placeholder: '请输入流程名称',
+        placeholder: '请输入任务名称',
        allowClear: true,
      },
    },
@@ -72,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
 ): VxeTableGridOptions['columns'] {
  return [
    {
-      field: 'name',
-      title: '流程名称',
+      field: 'processInstance.name',
+      title: '流程',
      minWidth: 200,
      fixed: 'left',
    },
@@ -82,7 +84,28 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
      title: '摘要',
      minWidth: 200,
      slots: {
-        default: 'slot-summary',
+        default: ({ row }) => {
+          const summary = row?.processInstance?.summary;
+
+          if (!summary || summary.length === 0) {
+            return '-';
+          }
+          return summary.map((item: any) => {
+            return h(
+              'div',
+              {
+                key: item.key,
+              },
+              h(
+                'span',
+                {
+                  class: 'text-gray-500',
+                },
+                `${item.key} : ${item.value}`,
+              ),
+            );
+          });
+        },
      },
    },
    {
--- a/apps/web-antd/src/views/bpm/task/todo/index.vue
+++ b/apps/web-antd/src/views/bpm/task/todo/index.vue
@@ -78,40 +78,18 @@ function onRefresh() {

 <template>
  <Page auto-content-height>
-    <DocAlert
-      title="审批通过、不通过、驳回"
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <DocAlert
-      title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-
-    <FormModal @success="onRefresh" />
-    <Grid table-title="待办任务">
-      <!-- 摘要 -->
-      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
-    </Grid>
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
+    <Grid table-title="待办任务" />
  </Page>
 </template>
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -0,0 +1,223 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '应用名',
+    componentProps: {
+      placeholder: '请输入应用名',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '开启状态',
+    componentProps: {
+      placeholder: '请选择开启状态',
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+    componentProps: {
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '应用标识',
+    field: 'appKey',
+  },
+  {
+    title: '应用名',
+    field: 'name',
+  },
+  {
+    title: '开启状态',
+    field: 'status',
+    slots: {
+      default: 'status',
+    },
+  },
+  {
+    title: '支付宝配置',
+    children: [
+      {
+        title: 'APP 支付',
+        slots: {
+          default: 'alipayAppConfig',
+        },
+      },
+      {
+        title: 'PC 网站支付',
+        slots: {
+          default: 'alipayPCConfig',
+        },
+      },
+      {
+        title: 'WAP 网站支付',
+        slots: {
+          default: 'alipayWAPConfig',
+        },
+      },
+      {
+        title: '扫码支付',
+        slots: {
+          default: 'alipayQrConfig',
+        },
+      },
+      {
+        title: '条码支付',
+        slots: {
+          default: 'alipayBarConfig',
+        },
+      },
+    ],
+  },
+  {
+    title: '微信配置',
+    children: [
+      {
+        title: '小程序支付',
+        slots: {
+          default: 'wxLiteConfig',
+        },
+      },
+      {
+        title: 'JSAPI 支付',
+        slots: {
+          default: 'wxPubConfig',
+        },
+      },
+      {
+        title: 'APP 支付',
+        slots: {
+          default: 'wxAppConfig',
+        },
+      },
+      {
+        title: 'Native 支付',
+        slots: {
+          default: 'wxNativeConfig',
+        },
+      },
+      {
+        title: 'WAP 网站支付',
+        slots: {
+          default: 'wxWapConfig',
+        },
+      },
+      {
+        title: '条码支付',
+        slots: {
+          default: 'wxBarConfig',
+        },
+      },
+    ],
+  },
+  {
+    title: '钱包支付配置',
+    field: 'walletConfig',
+    slots: {
+      default: 'walletConfig',
+    },
+  },
+  {
+    title: '模拟支付配置',
+    field: 'mockConfig',
+    slots: {
+      default: 'mockConfig',
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    minWidth: 160,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '应用编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用名',
+    fieldName: 'name',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用名',
+    },
+  },
+  {
+    label: '应用标识',
+    fieldName: 'appKey',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用标识',
+    },
+  },
+  {
+    label: '开启状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+  {
+    label: '支付结果的回调地址',
+    fieldName: 'orderNotifyUrl',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入支付结果的回调地址',
+    },
+  },
+  {
+    label: '退款结果的回调地址',
+    fieldName: 'refundNotifyUrl',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入支付结果的回调地址',
+    },
+  },
+  {
+    label: '转账结果的回调地址',
+    fieldName: 'transferNotifyUrl',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入转账结果的回调地址',
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -1,31 +1,498 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';

-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';

+import { h, reactive } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import { Button, Popconfirm, Space, Switch } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as PayApi from '#/api/pay/app';
 import { DocAlert } from '#/components/doc-alert';
+import { PayChannelEnum } from '#/utils/constants';
+
+import { columns, querySchema } from './data';
+import appFrom from './modules/app-form.vue';
+import aliPayFrom from './modules/channel/alipay-channel-form.vue';
+import mockFrom from './modules/channel/mock-channel-form.vue';
+import walletFrom from './modules/channel/wallet-channel-form.vue';
+import weixinFrom from './modules/channel/weixin-channel-form.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 100,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await PayApi.getAppPage({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'pay-app-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [AppModal, modalApi] = useVbenModal({
+  connectedComponent: appFrom,
+});
+
+const [AliPayModal, modalAliPayApi] = useVbenModal({
+  connectedComponent: aliPayFrom,
+});
+
+const [MockModal, modalMockApi] = useVbenModal({
+  connectedComponent: mockFrom,
+});
+
+const [WalletModal, modalWalletApi] = useVbenModal({
+  connectedComponent: walletFrom,
+});
+
+const [WeixinModal, modalWeixinApi] = useVbenModal({
+  connectedComponent: weixinFrom,
+});
+
+const handleAdd = () => {
+  modalApi.setData({});
+  modalApi.open();
+};
+
+const handleEdit = (row: Required<PayApi.PayAppApi.App>) => {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+};
+
+const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
+  await PayApi.deleteApp(row.id);
+  tableApi.query();
+};
+
+/**
+ * 根据渠道编码判断渠道列表中是否存在
+ *
+ * @param channels 渠道列表
+ * @param channelCode 渠道编码
+ */
+const isChannelExists = (channels: string[], channelCode: string) => {
+  if (!channels) {
+    return false;
+  }
+  return channels.includes(channelCode);
+};
+
+const channelParam = reactive({
+  appId: 0, // 应用 ID
+  payCode: '', // 渠道编码
+});
+
+const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
+  channelParam.appId = row.id || 0;
+  channelParam.payCode = payCode;
+  if (payCode.indexOf('alipay_') === 0) {
+    modalAliPayApi.setData({ id: row.id, payCode });
+    modalAliPayApi.open();
+    return;
+  }
+  if (payCode.indexOf('wx_') === 0) {
+    modalWeixinApi.setData({ id: row.id, payCode });
+    modalWeixinApi.open();
+    return;
+  }
+  if (payCode.indexOf('mock') === 0) {
+    modalMockApi.setData({ id: row.id, payCode });
+    modalMockApi.open();
+    return;
+  }
+  if (payCode.indexOf('wallet') === 0) {
+    modalWalletApi.setData({ id: row.id, payCode });
+    modalWalletApi.open();
+  }
+};
 </script>

 <template>
-  <Page>
+  <Page :auto-content-height="true">
    <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <BasicTable>
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            type="primary"
+            v-access:code="['pay:app:create']"
+            @click="handleAdd"
+          >
+            {{ $t('ui.actionTitle.create', ['应用']) }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <Button
+            v-access:code="['pay:app:update']"
+            type="link"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('ui.actionTitle.edit') }}
+          </Button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            v-access:code="['pay:app:delete']"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <Button type="link" danger>
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </Popconfirm>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status"
+          :checked-value="0"
+          :un-checked-value="1"
+        />
+      </template>
+      <template #alipayAppConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
+          />
+          <Button
+            v-else
+            size="small"
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
+          />
+        </div>
+      </template>
+      <template #alipayPCConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
+          />
+        </div>
+      </template>
+      <template #alipayWAPConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
+          />
+        </div>
+      </template>
+      <template #alipayQrConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
+          />
+        </div>
+      </template>
+      <template #alipayBarConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
+          />
+        </div>
+      </template>
+      <template #wxLiteConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
+          />
+        </div>
+      </template>
+      <template #wxPubConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
+          />
+        </div>
+      </template>
+      <template #wxAppConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
+          />
+        </div>
+      </template>
+      <template #wxNativeConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
+          />
+        </div>
+      </template>
+      <template #wxWapConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
+          />
+        </div>
+      </template>
+      <template #wxBarConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
+          />
+        </div>
+      </template>
+      <template #walletConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
+          />
+        </div>
+      </template>
+      <template #mockConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
+          />
+        </div>
+      </template>
+    </BasicTable>
+    <AppModal @reload="tableApi.query()" />
+    <AliPayModal @reload="tableApi.query()" />
+    <MockModal @reload="tableApi.query()" />
+    <WalletModal @reload="tableApi.query()" />
+    <WeixinModal @reload="tableApi.query()" />
  </Page>
 </template>
--- a/apps/web-antd/src/views/pay/app/modules/app-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/app-form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import * as PayApi from '#/api/pay/app';
+
+import { modalSchema } from '../data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await PayApi.getApp(id);
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
+    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm />
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { Row, Space, Textarea } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+import { FileUpload } from '#/components/upload';
+
+import { modalAliPaySchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalAliPaySchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      const record = await ChannelApi.getChannel(id, payCode);
+      isUpdate.value = !!record;
+      record.code = payCode;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+        await formApi.setValues(record);
+      }
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config);
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm>
+      <template #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>
+    </BasicForm>
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/pay/app/modules/channel/data.ts
+++ b/apps/web-antd/src/views/pay/app/modules/channel/data.ts
@@ -0,0 +1,456 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const modalAliPaySchema: FormSchemaGetter = () => [
+  {
+    label: '商户编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道费率',
+    fieldName: 'feeRate',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入渠道费率',
+    },
+  },
+  {
+    label: '开放平台 APPID',
+    fieldName: 'config.appId',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入开放平台 APPID',
+    },
+  },
+  {
+    label: '渠道状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+    defaultValue: 1,
+  },
+  {
+    label: '网关地址',
+    fieldName: 'config.serverUrl',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 'https://openapi.alipay.com/gateway.do',
+          label: '线上环境',
+        },
+        {
+          value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+          label: '沙箱环境',
+        },
+      ],
+    },
+  },
+  {
+    label: '算法类型',
+    fieldName: 'config.signType',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 'RSA2',
+          label: 'RSA2',
+        },
+      ],
+    },
+    defaultValue: 'RSA2',
+  },
+  {
+    label: '公钥类型',
+    fieldName: 'config.mode',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 0,
+          label: '公钥模式',
+        },
+        {
+          value: 1,
+          label: '证书模式',
+        },
+      ],
+    },
+  },
+  {
+    label: '应用私钥',
+    fieldName: 'config.privateKey',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用私钥',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values.config.mode !== undefined;
+      },
+      triggerFields: ['config'],
+    },
+  },
+  {
+    label: '支付宝公钥',
+    fieldName: 'config.alipayPublicKey',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入支付宝公钥',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 0;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '商户公钥应用证书',
+    fieldName: 'config.appCertContent',
+    slotName: 'appCertContent',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传商户公钥应用证书',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 1;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '支付宝公钥证书',
+    fieldName: 'config.alipayPublicCertContent',
+    slotName: 'alipayPublicCertContent',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传支付宝公钥证书',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 1;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '根证书',
+    fieldName: 'config.rootCertContent',
+    slotName: 'rootCertContent',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传根证书',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 1;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '接口内容加密方式',
+    fieldName: 'config.encryptType',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 'NONE',
+          label: '无加密',
+        },
+        {
+          value: 'AES',
+          label: 'AES',
+        },
+      ],
+    },
+    defaultValue: 'NONE',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+export const modalMockSchema: FormSchemaGetter = () => [
+  {
+    label: '商户编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+    defaultValue: 1,
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道费率',
+    fieldName: 'feeRate',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入渠道费率',
+    },
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+export const modalWeixinSchema: FormSchemaGetter = () => [
+  {
+    label: '商户编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道费率',
+    fieldName: 'feeRate',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入渠道费率',
+    },
+  },
+  {
+    label: '微信 APPID',
+    fieldName: 'config.appId',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入微信 APPID',
+    },
+  },
+  {
+    label: '商户号',
+    fieldName: 'config.mchId',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入商户号',
+    },
+  },
+  {
+    label: '渠道状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+    defaultValue: 1,
+  },
+  {
+    label: 'API 版本',
+    fieldName: 'config.apiVersion',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          label: 'v2',
+          value: 'v2',
+        },
+        {
+          label: 'v3',
+          value: 'v3',
+        },
+      ],
+    },
+  },
+  {
+    label: '商户密钥',
+    fieldName: 'config.mchKey',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入商户密钥',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v2';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: 'apiclient_cert.p12 证书',
+    fieldName: 'config.keyContent',
+    slotName: 'keyContent',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传 apiclient_cert.p12 证书',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v2';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: 'API V3 密钥',
+    fieldName: 'config.apiV3Key',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入 API V3 密钥',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v3';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: 'apiclient_key.pem 证书',
+    fieldName: 'config.privateKeyContent',
+    slotName: 'privateKeyContent',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传 apiclient_key.pem 证书',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v3';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '证书序列号',
+    fieldName: 'config.certSerialNo',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入证书序列号',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v3';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];
--- a/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+
+import { modalMockSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalMockSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      let record = await ChannelApi.getChannel(id, payCode);
+      isUpdate.value = !!record;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+      } else {
+        record = {
+          feeRate: 0,
+          code: payCode,
+          appId: id,
+        } as ChannelApi.PayChannelApi.Channel;
+      }
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm />
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+
+import { modalMockSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalMockSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      let record = await ChannelApi.getChannel(id, payCode);
+      isUpdate.value = !!record;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+      } else {
+        record = {
+          feeRate: 0,
+          code: payCode,
+          appId: id,
+        } as ChannelApi.PayChannelApi.Channel;
+      }
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm />
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { Row, Space, Textarea } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+import { FileUpload } from '#/components/upload';
+
+import { modalWeixinSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalWeixinSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      const record =
+        (await ChannelApi.getChannel(id, payCode)) ||
+        ({} as ChannelApi.PayChannelApi.Channel);
+      isUpdate.value = !!record;
+      record.code = payCode;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+      }
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config);
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm>
+      <template #keyContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传 apiclient_cert.p12 证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+      <template #privateKeyContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传 apiclient_key.pem 证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -0,0 +1,144 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'appId',
+    label: '应用编号',
+    componentProps: {
+      placeholder: '请输入应用编号',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'channelCode',
+    label: '支付渠道',
+    componentProps: {
+      placeholder: '请选择开启状态',
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'merchantOrderId',
+    label: '商户单号',
+    componentProps: {
+      placeholder: '请输入商户单号',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'no',
+    label: '支付单号',
+    componentProps: {
+      placeholder: '请输入支付单号',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'channelOrderNo',
+    label: '渠道单号',
+    componentProps: {
+      placeholder: '请输入渠道单号',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '支付状态',
+    componentProps: {
+      placeholder: '请选择支付状态',
+      options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+    },
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+    componentProps: {
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '编号',
+    field: 'id',
+  },
+  {
+    title: '支付金额',
+    field: 'price',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.price || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '退款金额',
+    field: 'refundPrice',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '手续金额',
+    field: 'channelFeePrice',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '订单号',
+    field: 'no',
+    slots: {
+      default: 'no',
+    },
+  },
+  {
+    title: '支付状态',
+    field: 'status',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+    },
+  },
+  {
+    title: '支付渠道',
+    field: 'channelCode',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+    },
+  },
+  {
+    title: '支付时间',
+    field: 'successTime',
+    minWidth: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '支付应用',
+    field: 'appName',
+  },
+  {
+    title: '商品标题',
+    field: 'subject',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    minWidth: 80,
+  },
+];
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -1,13 +1,89 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';

-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';

+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as OrderApi from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
+
+import { columns, querySchema } from './data';
+import detailFrom from './modules/order-detail.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 100,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await OrderApi.getOrderPage({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'pay-order-index',
+};
+
+const [BasicTable] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DetailModal, modalDetailApi] = useVbenModal({
+  connectedComponent: detailFrom,
+});
+
+const openDetail = (id: number) => {
+  modalDetailApi.setData({
+    id,
+  });
+  modalDetailApi.open();
+};
 </script>

 <template>
-  <Page>
+  <Page :auto-content-height="true">
    <DocAlert
      title="支付宝支付接入"
      url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@@ -20,23 +96,29 @@ import { DocAlert } from '#/components/doc-alert';
      title="微信小程序支付接入"
      url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <BasicTable>
+      <template #action="{ row }">
+        <a-button
+          type="link"
+          v-access:code="['pay:order:query']"
+          @click="openDetail(row.id)"
+        >
+          {{ $t('ui.actionTitle.detail') }}
+        </a-button>
+      </template>
+      <template #no="{ row }">
+        <p class="order-font">
+          <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
+        </p>
+        <p class="order-font" v-if="row.no">
+          <Tag size="small" color="orange">支付</Tag> {{ row.no }}
+        </p>
+        <p class="order-font" v-if="row.channelOrderNo">
+          <Tag size="small" color="green">渠道</Tag>
+          {{ row.channelOrderNo }}
+        </p>
+      </template>
+    </BasicTable>
+    <DetailModal />
  </Page>
 </template>
--- a/apps/web-antd/src/views/pay/order/modules/order-detail.vue
+++ b/apps/web-antd/src/views/pay/order/modules/order-detail.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { Descriptions, Divider, Tag } from 'ant-design-vue';
+
+import * as OrderApi from '#/api/pay/order';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils/dict';
+
+const detailData = ref<OrderApi.PayOrderApi.Order>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  showCancelButton: false,
+  showConfirmButton: false,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as {
+      id: number;
+    };
+
+    detailData.value = await OrderApi.getOrderDetail(id);
+
+    modalApi.modalLoading(false);
+  },
+});
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
+    <Descriptions :column="2">
+      <Descriptions.Item label="商户单号">
+        {{ detailData?.merchantOrderId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付单号">
+        {{ detailData?.no }}
+      </Descriptions.Item>
+      <Descriptions.Item label="应用编号">
+        {{ detailData?.appId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="应用名称">
+        {{ detailData?.appName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付状态">
+        <DictTag
+          size="small"
+          :type="DICT_TYPE.PAY_ORDER_STATUS"
+          :value="detailData?.status"
+        />
+      </Descriptions.Item>
+      <Descriptions.Item label="支付金额">
+        <Tag color="green" size="small">
+          ￥{{ (detailData?.price || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="手续费">
+        <Tag color="orange" size="small">
+          ￥{{ (detailData?.channelFeePrice || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="手续费比例">
+        {{ (detailData?.channelFeeRate || 0 / 100.0).toFixed(2) }}%
+      </Descriptions.Item>
+      <Descriptions.Item label="支付时间">
+        {{ formatDateTime(detailData?.successTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="失效时间">
+        {{ formatDateTime(detailData?.expireTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="创建时间">
+        {{ formatDateTime(detailData?.createTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="更新时间">
+        {{ formatDateTime(detailData?.updateTime) }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Divider />
+    <Descriptions :column="2">
+      <Descriptions.Item label="商品标题">
+        {{ detailData?.subject }}
+      </Descriptions.Item>
+      <Descriptions.Item label="商品描述">
+        {{ detailData?.body }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付渠道">
+        <DictTag
+          size="small"
+          :type="DICT_TYPE.PAY_CHANNEL_CODE"
+          :value="detailData?.channelCode"
+        />
+      </Descriptions.Item>
+      <Descriptions.Item label="支付 IP">
+        {{ detailData?.userIp }}
+      </Descriptions.Item>
+      <Descriptions.Item label="渠道单号">
+        <Tag size="small" color="green" v-if="detailData?.channelOrderNo">
+          {{ detailData?.channelOrderNo }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="渠道用户">
+        {{ detailData?.channelUserId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="退款金额" :span="2">
+        <Tag size="small" color="red">
+          ￥{{ (detailData?.refundPrice || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="通知 URL">
+        {{ detailData?.notifyUrl }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Divider />
+    <Descriptions :column="1">
+      <Descriptions.Item label="支付通道异步回调内容">
+        {{ detailData?.channelNotifyData }}
+      </Descriptions.Item>
+    </Descriptions>
+  </BasicModal>
+</template>