diff --git a/apps/backend-mock/api/demo/bigint.ts b/apps/backend-mock/api/demo/bigint.ts
new file mode 100644
index 00000000..880cc5ea
--- /dev/null
+++ b/apps/backend-mock/api/demo/bigint.ts
@@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
+  setHeader(event, 'Content-Type', 'application/json');
+  return data;
+});
diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 6e963c39..f9a0862e 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -26,7 +26,6 @@
     "#/*": "./src/*"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "catalog:",
     "@form-create/ant-design-vue": "catalog:",
     "@form-create/antd-designer": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",
@@ -54,7 +53,8 @@
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vue3-signature": "catalog:"
   },
   "devDependencies": {
     "@types/crypto-js": "catalog:"
diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts
index 4d4c6017..93428bac 100644
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -11,61 +11,61 @@ import { $t } from '@vben/locales';
 /** 手机号正则表达式（中国） */
 const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
 
-setupVbenForm<ComponentType>({
-  config: {
-    // ant design vue组件库默认都是 v-model:value
-    baseModelPropName: 'value',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
 
-    // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      RichTextarea: 'modelValue',
-      Switch: 'checked',
-      Upload: 'fileList',
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    // 输入项目必填国际化适配
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
-    },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-    // 手机号非必填
-    mobile: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
         return true;
-      } else if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.mobile', [ctx.label]);
-      }
-      return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号非必填
+      mobile: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return true;
+        } else if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号必填
+      mobileRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 手机号必填
-    mobileRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.mobile', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
-export type FormSchemaGetter = () => VbenFormSchema[];
diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 9935d0b0..e14c38c2 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -268,7 +268,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
     // add by 星语：数量格式化，例如说：金额
-    vxeUI.formats.add('formatAmount', {
+    vxeUI.formats.add('formatNumber', {
       cellFormatMethod({ cellValue }, digits = 2) {
         if (cellValue === null || cellValue === undefined) {
           return '';
diff --git a/apps/web-antd/src/api/bpm/definition/index.ts b/apps/web-antd/src/api/bpm/definition/index.ts
index 562b0009..795caa1b 100644
--- a/apps/web-antd/src/api/bpm/definition/index.ts
+++ b/apps/web-antd/src/api/bpm/definition/index.ts
@@ -4,6 +4,7 @@ import { requestClient } from '#/api/request';
 
 /** 流程定义 */
 export namespace BpmProcessDefinitionApi {
+  // 流程定义
   export interface ProcessDefinitionVO {
     id: string;
     version: number;
@@ -36,11 +37,12 @@ export async function getProcessDefinitionPage(params: PageParam) {
 
 /** 查询流程定义列表 */
 export async function getProcessDefinitionList(params: any) {
-  return requestClient.get<
-    PageResult<BpmProcessDefinitionApi.ProcessDefinitionVO>
-  >('/bpm/process-definition/list', {
-    params,
-  });
+  return requestClient.get<BpmProcessDefinitionApi.ProcessDefinitionVO[]>(
+    '/bpm/process-definition/list',
+    {
+      params,
+    },
+  );
 }
 
 /** 查询流程定义列表（简单列表） */
diff --git a/apps/web-antd/src/api/bpm/form/index.ts b/apps/web-antd/src/api/bpm/form/index.ts
index 581178c5..78ce4d6d 100644
--- a/apps/web-antd/src/api/bpm/form/index.ts
+++ b/apps/web-antd/src/api/bpm/form/index.ts
@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmFormApi {
-  // TODO @siye：注释加一个。。嘿嘿
+  // 流程表单
   export interface FormVO {
     id?: number | undefined;
     name: string;
@@ -11,7 +11,7 @@ export namespace BpmFormApi {
     fields: string[];
     status: number;
     remark: string;
-    createTime: string;
+    createTime: number;
   }
 }
 
@@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
 }
 
 /** 获取表单详情 */
-export async function getFormDetail(id: number) {
+export async function getFormDetail(id: number | string) {
   return requestClient.get<BpmFormApi.FormVO>(`/bpm/form/get?id=${id}`);
 }
 
diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index 713fedc4..45598178 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -14,6 +14,7 @@ export namespace BpmModelApi {
   /** 流程定义 VO */
   export interface ProcessDefinitionVO {
     id: string;
+    key?: string;
     version: number;
     deploymentTime: number;
     suspensionState: number;
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 23afa8c3..4f9b7795 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmTaskApi } from '../task';
+
 import type { BpmModelApi } from '#/api/bpm/model';
 import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '#/utils';
 
@@ -40,6 +42,7 @@ export namespace BpmProcessInstanceApi {
     tasks: ApprovalTaskInfo[];
   };
 
+  // 流程实例
   export type ProcessInstanceVO = {
     businessKey: string;
     category: string;
@@ -59,12 +62,33 @@ export namespace BpmProcessInstanceApi {
     tasks?: BpmProcessInstanceApi.Task[];
   };
 
+  // 审批详情
   export type ApprovalDetail = {
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
     formFieldsPermission: any;
     processDefinition: BpmModelApi.ProcessDefinitionVO;
     processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
     status: number;
+    todoTask: BpmTaskApi.TaskVO;
+  };
+
+  // 抄送流程实例 VO
+  export type CopyVO = {
+    activityId: string;
+    activityName: string;
+    createTime: number;
+    createUser: User;
+    id: number;
+    processInstanceId: string;
+    processInstanceName: string;
+    processInstanceStartTime: number;
+    reason: string;
+    startUser: User;
+    summary: {
+      key: string;
+      value: string;
+    }[];
+    taskId: string;
   };
 }
 
@@ -85,9 +109,7 @@ export async function getProcessInstanceManagerPage(params: PageParam) {
 }
 
 /** 新增流程实例 */
-export async function createProcessInstance(
-  data: BpmProcessInstanceApi.ProcessInstanceVO,
-) {
+export async function createProcessInstance(data: any) {
   return requestClient.post<BpmProcessInstanceApi.ProcessInstanceVO>(
     '/bpm/process-instance/create',
     data,
@@ -152,7 +174,7 @@ export async function getApprovalDetail(params: any) {
 
 /** 获取下一个执行的流程节点 */
 export async function getNextApprovalNodes(params: any) {
-  return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
+  return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
     `/bpm/process-instance/get-next-approval-nodes`,
     { params },
   );
diff --git a/apps/web-antd/src/api/bpm/task/index.ts b/apps/web-antd/src/api/bpm/task/index.ts
index 4054b8f6..19cbede8 100644
--- a/apps/web-antd/src/api/bpm/task/index.ts
+++ b/apps/web-antd/src/api/bpm/task/index.ts
@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmProcessInstanceApi } from '../processInstance';
+
 import { requestClient } from '#/api/request';
 
 export namespace BpmTaskApi {
@@ -11,7 +13,33 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
-    value: string; // 监听器值
+  }
+
+  // 流程任务 VO
+  export interface TaskManagerVO {
+    id: string; // 编号
+    name: string; // 任务名称
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
+    durationInMillis: number; // 持续时间
+    status: number; // 状态
+    reason: string; // 原因
+    ownerUser: any; // 负责人
+    assigneeUser: any; // 处理人
+    taskDefinitionKey: string; // 任务定义key
+    processInstanceId: string; // 流程实例id
+    processInstance: BpmProcessInstanceApi.ProcessInstanceVO; // 流程实例
+    parentTaskId: any; // 父任务id
+    children: any; // 子任务
+    formId: any; // 表单id
+    formName: any; // 表单名称
+    formConf: any; // 表单配置
+    formFields: any; // 表单字段
+    formVariables: any; // 表单变量
+    buttonsSetting: any; // 按钮设置
+    signEnable: any; // 签名设置
+    reasonRequire: any; // 原因设置
+    nodeType: any; // 节点类型
   }
 }
 
@@ -54,13 +82,15 @@ export const rejectTask = async (data: any) => {
 };
 
 /** 根据流程实例 ID 查询任务列表 */
-export const getTaskListByProcessInstanceId = async (data: any) => {
-  return await requestClient.get('/bpm/task/list-by-process-instance-id', data);
+export const getTaskListByProcessInstanceId = async (id: string) => {
+  return await requestClient.get(
+    `/bpm/task/list-by-process-instance-id?processInstanceId=${id}`,
+  );
 };
 
 /** 获取所有可退回的节点 */
-export const getTaskListByReturn = async (data: any) => {
-  return await requestClient.get('/bpm/task/list-by-return', data);
+export const getTaskListByReturn = async (id: string) => {
+  return await requestClient.get(`/bpm/task/list-by-return?id=${id}`);
 };
 
 /** 退回 */
diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
index 68d19ee1..0f1ab09f 100644
--- a/apps/web-antd/src/bootstrap.ts
+++ b/apps/web-antd/src/bootstrap.ts
@@ -14,6 +14,7 @@ import { $t, setupI18n } from '#/locales';
 import { setupFormCreate } from '#/plugins/form-create';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
@@ -21,6 +22,9 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
diff --git a/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue b/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
index 561ab24e..8fc25665 100644
--- a/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
+++ b/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
@@ -4,7 +4,7 @@ import type { DataNode } from 'ant-design-vue/es/tree';
 
 import type { SystemDeptApi } from '#/api/system/dept';
 
-import { defineProps, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
new file mode 100644
index 00000000..80b7b3a1
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Divider,
+  Input,
+  Radio,
+  RadioGroup,
+  TabPane,
+  Tabs,
+  Tooltip,
+  TypographyText,
+} from 'ant-design-vue';
+
+import { BpmModelFormType } from '#/utils';
+
+import {
+  FieldPermissionType,
+  NodeType,
+  START_USER_BUTTON_SETTING,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({ name: 'StartUserNodeConfig' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 可发起流程的用户编号
+const startUserIds = inject<Ref<any[]>>('startUserIds');
+// 可发起流程的部门编号
+const startDeptIds = inject<Ref<any[]>>('startDeptIds');
+// 用户列表
+const userOptions = inject<Ref<SystemUserApi.User[]>>('userList');
+// 部门列表
+const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.COPY_TASK_NODE,
+);
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.WRITE);
+const getUserNicknames = (userIds: number[]): string => {
+  if (!userIds || userIds.length === 0) {
+    return '';
+  }
+  const nicknames: string[] = [];
+  userIds.forEach((userId) => {
+    const found = userOptions?.value.find((item) => item.id === userId);
+    if (found && found.nickname) {
+      nicknames.push(found.nickname);
+    }
+  });
+  return nicknames.join(',');
+};
+
+const getDeptNames = (deptIds: number[]): string => {
+  if (!deptIds || deptIds.length === 0) {
+    return '';
+  }
+  const deptNames: string[] = [];
+  deptIds.forEach((deptId) => {
+    const found = deptOptions?.value.find((item) => item.id === deptId);
+    if (found && found.name) {
+      deptNames.push(found.name);
+    }
+  });
+  return deptNames.join(',');
+};
+
+// 使用 VbenDrawer
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: false,
+  closable: false,
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'user';
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = '已设置';
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  // 设置发起人的按钮权限
+  currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
+  drawerApi.close();
+  return true;
+};
+
+// 显示发起人节点配置，由父组件传过来
+const showStartUserNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+  drawerApi.open();
+};
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+};
+
+/**
+ * 暴露方法给父组件
+ */
+defineExpose({ showStartUserNodeConfig });
+</script>
+<template>
+  <Drawer>
+    <div class="config-header">
+      <!--    TODO v-mountedFocus 自动聚集 需要迁移一下 -->
+      <Input
+        v-if="showInput"
+        type="text"
+        class="config-editable-input"
+        @blur="blurEvent()"
+        v-model:value="nodeName"
+        :placeholder="nodeName"
+      />
+      <div v-else class="node-name">
+        {{ nodeName }}
+        <IconifyIcon
+          class="ml-1"
+          icon="ep:edit-pen"
+          :size="16"
+          @click="clickIcon()"
+        />
+      </div>
+      <Divider />
+    </div>
+
+    <Tabs v-model:active-key="activeTabName" type="card">
+      <TabPane tab="权限" key="user">
+        <TypographyText
+          v-if="
+            (!startUserIds || startUserIds.length === 0) &&
+            (!startDeptIds || startDeptIds.length === 0)
+          "
+        >
+          全部成员可以发起流程
+        </TypographyText>
+        <div v-else-if="startUserIds && startUserIds.length > 0">
+          <TypographyText v-if="startUserIds.length === 1">
+            {{ getUserNicknames(startUserIds) }} 可发起流程
+          </TypographyText>
+          <TypographyText v-else>
+            <Tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getUserNicknames(startUserIds)"
+            >
+              {{ getUserNicknames(startUserIds.slice(0, 2)) }} 等
+              {{ startUserIds.length }} 人可发起流程
+            </Tooltip>
+          </TypographyText>
+        </div>
+        <div v-else-if="startDeptIds && startDeptIds.length > 0">
+          <TypographyText v-if="startDeptIds.length === 1">
+            {{ getDeptNames(startDeptIds) }} 可发起流程
+          </TypographyText>
+          <TypographyText v-else>
+            <Tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getDeptNames(startDeptIds)"
+            >
+              {{ getDeptNames(startDeptIds.slice(0, 2)) }} 等
+              {{ startDeptIds.length }} 个部门可发起流程
+            </Tooltip>
+          </TypographyText>
+        </div>
+      </TabPane>
+      <TabPane
+        tab="表单字段权限"
+        key="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title">字段名称</div>
+            <div class="other-titles">
+              <span
+                class="setting-title-label cursor-pointer"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="setting-title-label cursor-pointer"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="setting-title-label cursor-pointer"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in fieldsPermissionConfig"
+            :key="index"
+          >
+            <div class="field-setting-item-label">{{ item.title }}</div>
+            <RadioGroup
+              class="field-setting-item-group"
+              v-model:value="item.permission"
+            >
+              <div class="item-radio-wrap">
+                <Radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.READ"
+                >
+                  <span></span>
+                </Radio>
+              </div>
+              <div class="item-radio-wrap">
+                <Radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                >
+                  <span></span>
+                </Radio>
+              </div>
+              <div class="item-radio-wrap">
+                <Radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                >
+                  <span></span>
+                </Radio>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+      </TabPane>
+    </Tabs>
+  </Drawer>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
new file mode 100644
index 00000000..cccca4db
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useTaskStatusClass, useWatchNode } from '../../helpers';
+
+defineOptions({ name: 'EndEventNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const processInstance = inject<Ref<any>>('processInstance', ref({}));
+
+const processInstanceInfos = ref<any[]>([]); // 流程的审批信息
+
+const nodeClick = () => {
+  if (readonly && processInstance && processInstance.value) {
+    console.warn(
+      'TODO 只读模式，弹窗显示审批信息',
+      processInstance.value,
+      processInstanceInfos.value,
+    );
+  }
+};
+</script>
+<template>
+  <div class="end-node-wrapper">
+    <div
+      class="end-node-box cursor-pointer"
+      :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      @click="nodeClick"
+    >
+      <span class="node-fixed-name" title="结束">结束</span>
+    </div>
+  </div>
+  <!-- TODO 审批信息 -->
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
new file mode 100644
index 00000000..01ab889d
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { message, Popover } from 'ant-design-vue';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_NAME,
+  NodeType,
+  RejectHandlerType,
+} from '../../consts';
+
+defineOptions({
+  name: 'NodeHandler',
+});
+
+const props = defineProps({
+  childNode: {
+    type: Object as () => SimpleFlowNode,
+    default: null,
+  },
+  currentNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const emits = defineEmits(['update:childNode']);
+const popoverShow = ref(false);
+const readonly = inject<Boolean>('readonly'); // 是否只读
+
+const addNode = (type: number) => {
+  // 校验：条件分支、包容分支后面，不允许直接添加并行分支
+  if (
+    type === NodeType.PARALLEL_BRANCH_NODE &&
+    [NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
+      props.currentNode?.type,
+    )
+  ) {
+    message.error('条件分支、包容分支后面，不允许直接添加并行分支');
+    return;
+  }
+
+  popoverShow.value = false;
+  if (type === NodeType.USER_TASK_NODE || type === NodeType.TRANSACTOR_NODE) {
+    const id = `Activity_${generateUUID()}`;
+    const data: SimpleFlowNode = {
+      id,
+      name: NODE_DEFAULT_NAME.get(type) as string,
+      showText: '',
+      type,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      // 超时处理
+      rejectHandler: {
+        type: RejectHandlerType.FINISH_PROCESS,
+      },
+      timeoutHandler: {
+        enable: false,
+      },
+      assignEmptyHandler: {
+        type: AssignEmptyHandlerType.APPROVE,
+      },
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      childNode: props.childNode,
+      taskCreateListener: {
+        enable: false,
+      },
+      taskAssignListener: {
+        enable: false,
+      },
+      taskCompleteListener: {
+        enable: false,
+      },
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
+      showText: '',
+      type: NodeType.COPY_TASK_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.CONDITION_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '条件分支',
+      type: NodeType.CONDITION_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.PARALLEL_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '并行分支',
+      type: NodeType.PARALLEL_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行1',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行2',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '包容分支',
+      type: NodeType.INCLUSIVE_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '包容条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.DELAY_TIMER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
+      showText: '',
+      type: NodeType.DELAY_TIMER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.ROUTER_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      id: `GateWay_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: NodeType.ROUTER_BRANCH_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.TRIGGER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
+      showText: '',
+      type: NodeType.TRIGGER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.CHILD_PROCESS_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
+      showText: '',
+      type: NodeType.CHILD_PROCESS_NODE,
+      childNode: props.childNode,
+      childProcessSetting: {
+        calledProcessDefinitionKey: '',
+        calledProcessDefinitionName: '',
+        async: false,
+        skipStartUserNode: false,
+        startUserSetting: {
+          type: 1,
+        },
+        timeoutSetting: {
+          enable: false,
+        },
+        multiInstanceSetting: {
+          enable: false,
+        },
+      },
+    };
+    emits('update:childNode', data);
+  }
+};
+</script>
+<template>
+  <div class="node-handler-wrapper">
+    <div class="node-handler">
+      <Popover trigger="hover" placement="right" width="auto" v-if="!readonly">
+        <template #content>
+          <div class="handler-item-wrapper">
+            <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
+              <div class="approve handler-item-icon">
+                <span class="iconfont icon-approve icon-size"></span>
+              </div>
+              <div class="handler-item-text">审批人</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.TRANSACTOR_NODE)"
+            >
+              <div class="transactor handler-item-icon">
+                <span class="iconfont icon-transactor icon-size"></span>
+              </div>
+              <div class="handler-item-text">办理人</div>
+            </div>
+            <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
+              <div class="handler-item-icon copy">
+                <span class="iconfont icon-size icon-copy"></span>
+              </div>
+              <div class="handler-item-text">抄送</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.CONDITION_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon condition">
+                <span class="iconfont icon-size icon-exclusive"></span>
+              </div>
+              <div class="handler-item-text">条件分支</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon parallel">
+                <span class="iconfont icon-size icon-parallel"></span>
+              </div>
+              <div class="handler-item-text">并行分支</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon inclusive">
+                <span class="iconfont icon-size icon-inclusive"></span>
+              </div>
+              <div class="handler-item-text">包容分支</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.DELAY_TIMER_NODE)"
+            >
+              <div class="handler-item-icon delay">
+                <span class="iconfont icon-size icon-delay"></span>
+              </div>
+              <div class="handler-item-text">延迟器</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.ROUTER_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon router">
+                <span class="iconfont icon-size icon-router"></span>
+              </div>
+              <div class="handler-item-text">路由分支</div>
+            </div>
+            <div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
+              <div class="handler-item-icon trigger">
+                <span class="iconfont icon-size icon-trigger"></span>
+              </div>
+              <div class="handler-item-text">触发器</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.CHILD_PROCESS_NODE)"
+            >
+              <div class="handler-item-icon child-process">
+                <span class="iconfont icon-size icon-child-process"></span>
+              </div>
+              <div class="handler-item-text">子流程</div>
+            </div>
+          </div>
+        </template>
+        <div class="add-icon"><IconifyIcon icon="ep:plus" /></div>
+      </Popover>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
new file mode 100644
index 00000000..2edb1093
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'StartUserNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+// 定义事件，更新父组件。
+// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const readonly = inject<Boolean>('readonly'); // 是否只读
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.START_USER_NODE,
+);
+
+const nodeSetting = ref();
+
+// 任务的弹窗显示，用于只读模式
+const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
+
+const nodeClick = () => {
+  if (readonly) {
+    // 只读模式，弹窗显示任务信息
+    if (tasks && tasks.value) {
+      console.warn(
+        'TODO 只读模式，弹窗显示任务信息',
+        tasks.value,
+        selectTasks.value,
+      );
+    }
+  } else {
+    console.warn(
+      'TODO 编辑模式，打开节点配置、把当前节点传递给配置组件',
+      nodeSetting.value,
+    );
+    nodeSetting.value.showStartUserNodeConfig(currentNode.value);
+  }
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon start-user">
+            <span class="iconfont icon-start-user"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model:value="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
+          </div>
+          <IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+
+  <StartUserNodeConfig
+    v-if="!readonly && currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+  />
+  <!-- 审批记录  TODO -->
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
new file mode 100644
index 00000000..3e9e7de1
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { NodeType } from '../consts';
+import { useWatchNode } from '../helpers';
+import EndEventNode from './nodes/end-event-node.vue';
+import StartUserNode from './nodes/start-user-node.vue';
+
+defineOptions({ name: 'ProcessNodeTree' });
+const props = defineProps({
+  parentNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+const emits = defineEmits<{
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+const currentNode = useWatchNode(props);
+
+// 用于删除节点
+// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+const handleModelValueUpdate = (updateValue: any) => {
+  emits('update:flowNode', updateValue);
+};
+
+// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+const triggerFromParentNode = (
+  nodeList: SimpleFlowNode[],
+  nodeType: number,
+) => {
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+};
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  findNode: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!findNode) {
+    return;
+  }
+  if (findNode.type === NodeType.START_USER_NODE) {
+    nodeList.push(findNode);
+    return;
+  }
+
+  if (findNode.type === nodeType) {
+    nodeList.push(findNode);
+  }
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+};
+</script>
+<template>
+  <!-- 发起人节点 -->
+  <StartUserNode
+    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
+    :flow-node="currentNode"
+  />
+  <!-- 审批节点 -->
+  <!-- <UserTaskNode
+    v-if="
+      currentNode &&
+      (currentNode.type === NodeType.USER_TASK_NODE ||
+        currentNode.type === NodeType.TRANSACTOR_NODE)
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 抄送节点 -->
+  <!-- <CopyTaskNode
+    v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 条件节点 -->
+  <!-- <ExclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 并行节点 -->
+  <!-- <ParallelNode
+    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 包容分支节点 -->
+  <!-- <InclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 延迟器节点 -->
+  <!-- <DelayTimerNode
+    v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 路由分支节点 -->
+  <!-- <RouterNode
+    v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 触发器节点 -->
+  <!-- <TriggerNode
+    v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 子流程节点 -->
+  <!-- <ChildProcessNode
+    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 递归显示孩子节点  -->
+  <ProcessNodeTree
+    v-if="currentNode && currentNode.childNode"
+    v-model:flow-node="currentNode.childNode"
+    :parent-node="currentNode"
+    @recursive-find-parent-node="recursiveFindParentNode"
+  />
+
+  <!-- 结束节点 -->
+  <EndEventNode
+    v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
+    :flow-node="currentNode"
+  />
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
new file mode 100644
index 00000000..7f2762ca
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../consts';
+
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, onMounted, provide, ref, watch } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { Button, Modal } from 'ant-design-vue';
+
+import { getFormDetail } from '#/api/bpm/form';
+import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getSimpleUserList } from '#/api/system/user';
+import { BpmModelFormType } from '#/utils/constants';
+
+import { NODE_DEFAULT_TEXT, NodeId, NodeType } from '../consts';
+import SimpleProcessModel from './simple-process-model.vue';
+
+defineOptions({
+  name: 'SimpleProcessDesigner',
+});
+
+const props = defineProps({
+  modelName: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  // 流程表单 ID
+  modelFormId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  // 表单类型
+  modelFormType: {
+    type: Number,
+    required: false,
+    default: BpmModelFormType.NORMAL,
+  },
+  // 可发起流程的人员编号
+  startUserIds: {
+    type: Array,
+    required: false,
+    default: undefined,
+  },
+  // 可发起流程的部门编号
+  startDeptIds: {
+    type: Array,
+    required: false,
+    default: undefined,
+  },
+});
+// 保存成功事件
+const emits = defineEmits(['success']);
+const processData = inject('processData') as Ref;
+const loading = ref(false);
+const formFields = ref<string[]>([]);
+const formType = ref(props.modelFormType);
+
+// 监听 modelFormType 变化
+watch(
+  () => props.modelFormType,
+  (newVal) => {
+    formType.value = newVal;
+  },
+);
+
+// 监听 modelFormId 变化
+watch(
+  () => props.modelFormId,
+  async (newVal) => {
+    if (newVal) {
+      const form = await getFormDetail(newVal);
+      formFields.value = form?.fields;
+    } else {
+      // 如果 modelFormId 为空，清空表单字段
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+const roleOptions = ref<SystemRoleApi.Role[]>([]); // 角色列表
+const postOptions = ref<SystemPostApi.Post[]>([]); // 岗位列表
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+const deptOptions = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTreeOptions = ref();
+const userGroupOptions = ref<BpmUserGroupApi.UserGroupVO[]>([]); // 用户组列表
+
+provide('formFields', formFields);
+provide('formType', formType);
+provide('roleList', roleOptions);
+provide('postList', postOptions);
+provide('userList', userOptions);
+provide('deptList', deptOptions);
+provide('userGroupList', userGroupOptions);
+provide('deptTree', deptTreeOptions);
+provide('startUserIds', props.startUserIds);
+provide('startDeptIds', props.startDeptIds);
+provide('tasks', []);
+provide('processInstance', {});
+const processNodeTree = ref<SimpleFlowNode | undefined>();
+provide('processNodeTree', processNodeTree);
+const errorDialogVisible = ref(false);
+const errorNodes: SimpleFlowNode[] = [];
+
+// 添加更新模型的方法
+const updateModel = () => {
+  if (!processNodeTree.value) {
+    processNodeTree.value = {
+      name: '发起人',
+      type: NodeType.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
+      childNode: {
+        id: NodeId.END_EVENT_NODE_ID,
+        name: '结束',
+        type: NodeType.END_EVENT_NODE,
+      },
+    };
+    // 初始化时也触发一次保存
+    saveSimpleFlowModel(processNodeTree.value);
+  }
+};
+
+const saveSimpleFlowModel = async (
+  simpleModelNode: SimpleFlowNode | undefined,
+) => {
+  if (!simpleModelNode) {
+    return;
+  }
+
+  try {
+    processData.value = simpleModelNode;
+    emits('success', simpleModelNode);
+  } catch (error) {
+    console.error('保存失败:', error);
+  }
+};
+
+/**
+ * 校验节点设置。 暂时以 showText 为空 未节点错误配置
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+const validateNode = (
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) => {
+  if (node) {
+    const { type, showText, conditionNodes } = node;
+    if (type === NodeType.END_EVENT_NODE) {
+      return;
+    }
+    if (type === NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === NodeType.CONDITION_BRANCH_NODE ||
+      type === NodeType.PARALLEL_BRANCH_NODE ||
+      type === NodeType.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes);
+      });
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+  }
+};
+
+onMounted(async () => {
+  try {
+    loading.value = true;
+    // 获得角色列表
+    roleOptions.value = await getSimpleRoleList();
+    // 获得岗位列表
+    postOptions.value = await getSimplePostList();
+    // 获得用户列表
+    userOptions.value = await getSimpleUserList();
+    // 获得部门列表
+    const deptList = await getSimpleDeptList();
+    deptOptions.value = deptList;
+    // 转换成树形结构
+    deptTreeOptions.value = handleTree(deptList);
+    // 获取用户组列表
+    userGroupOptions.value = await getUserGroupSimpleList();
+    // 加载流程数据
+    if (processData.value) {
+      processNodeTree.value = processData?.value;
+    } else {
+      updateModel();
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+
+const simpleProcessModelRef = ref();
+
+defineExpose({});
+</script>
+<template>
+  <div v-loading="loading">
+    <SimpleProcessModel
+      ref="simpleProcessModelRef"
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
+    <Modal
+      v-model="errorDialogVisible"
+      title="保存失败"
+      width="400"
+      :fullscreen="false"
+    >
+      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+      <div
+        class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
+        v-for="(item, index) in errorNodes"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      </div>
+      <template #footer>
+        <Button type="primary" @click="errorDialogVisible = false">
+          知道了
+        </Button>
+      </template>
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
new file mode 100644
index 00000000..cfd2e6a8
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { onMounted, provide, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { downloadFileFromBlob, isString } from '@vben/utils';
+
+import { Button, ButtonGroup, Modal, Row } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../consts';
+import { useWatchNode } from '../helpers';
+import ProcessNodeTree from './process-node-tree.vue';
+
+defineOptions({
+  name: 'SimpleProcessModel',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+  readonly: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+});
+
+const emits = defineEmits<{
+  save: [node: SimpleFlowNode | undefined];
+}>();
+
+const processNodeTree = useWatchNode(props);
+
+provide('readonly', props.readonly);
+
+// TODO 可优化：拖拽有点卡顿
+/** 拖拽、放大缩小等操作 */
+const scaleValue = ref(100);
+const MAX_SCALE_VALUE = 200;
+const MIN_SCALE_VALUE = 50;
+const isDragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const currentX = ref(0);
+const currentY = ref(0);
+const initialX = ref(0);
+const initialY = ref(0);
+
+const setGrabCursor = () => {
+  document.body.style.cursor = 'grab';
+};
+
+const resetCursor = () => {
+  document.body.style.cursor = 'default';
+};
+
+const startDrag = (e: MouseEvent) => {
+  isDragging.value = true;
+  startX.value = e.clientX - currentX.value;
+  startY.value = e.clientY - currentY.value;
+  setGrabCursor(); // 设置小手光标
+};
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value) return;
+  e.preventDefault(); // 禁用文本选择
+
+  // 使用 requestAnimationFrame 优化性能
+  requestAnimationFrame(() => {
+    currentX.value = e.clientX - startX.value;
+    currentY.value = e.clientY - startY.value;
+  });
+};
+
+const stopDrag = () => {
+  isDragging.value = false;
+  resetCursor(); // 重置光标
+};
+
+const zoomIn = () => {
+  if (scaleValue.value === MAX_SCALE_VALUE) {
+    return;
+  }
+  scaleValue.value += 10;
+};
+
+const zoomOut = () => {
+  if (scaleValue.value === MIN_SCALE_VALUE) {
+    return;
+  }
+  scaleValue.value -= 10;
+};
+
+const processReZoom = () => {
+  scaleValue.value = 100;
+};
+
+const resetPosition = () => {
+  currentX.value = initialX.value;
+  currentY.value = initialY.value;
+};
+
+/** 校验节点设置 */
+const errorDialogVisible = ref(false);
+let errorNodes: SimpleFlowNode[] = [];
+
+const validateNode = (
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) => {
+  if (node) {
+    const { type, showText, conditionNodes } = node;
+    if (type === NodeType.END_EVENT_NODE) {
+      return;
+    }
+    if (type === NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === NodeType.CONDITION_BRANCH_NODE ||
+      type === NodeType.PARALLEL_BRANCH_NODE ||
+      type === NodeType.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes);
+      });
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+  }
+};
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = async () => {
+  try {
+    errorNodes = [];
+    validateNode(processNodeTree.value, errorNodes);
+    if (errorNodes.length > 0) {
+      errorDialogVisible.value = true;
+      return undefined;
+    }
+    return processNodeTree.value;
+  } catch (error) {
+    console.error('获取流程数据失败:', error);
+    return undefined;
+  }
+};
+
+defineExpose({
+  getCurrentFlowData,
+});
+
+/** 导出 JSON */
+const exportJson = () => {
+  downloadFileFromBlob({
+    fileName: 'model.json',
+    source: new Blob([JSON.stringify(processNodeTree.value)]),
+  });
+};
+
+/** 导入 JSON */
+const refFile = ref();
+const importJson = () => {
+  refFile.value.click();
+};
+const importLocalFile = () => {
+  const file = refFile.value.files[0];
+  file.text().then((result: any) => {
+    if (isString(result)) {
+      processNodeTree.value = JSON.parse(result);
+      emits('save', processNodeTree.value);
+    }
+  });
+};
+
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  initialX.value = currentX.value;
+  initialY.value = currentY.value;
+});
+</script>
+<template>
+  <div class="simple-process-model-container">
+    <div class="absolute right-[0px] top-[0px] bg-[#fff]">
+      <Row type="flex" justify="end">
+        <ButtonGroup key="scale-control">
+          <Button v-if="!readonly" @click="exportJson">
+            <IconifyIcon icon="ep:download" /> 导出
+          </Button>
+          <Button v-if="!readonly" @click="importJson">
+            <IconifyIcon icon="ep:upload" />导入
+          </Button>
+          <!-- 用于打开本地文件-->
+          <input
+            v-if="!readonly"
+            type="file"
+            id="files"
+            ref="refFile"
+            style="display: none"
+            accept=".json"
+            @change="importLocalFile"
+          />
+          <Button @click="processReZoom()">
+            <IconifyIcon icon="tabler:relation-one-to-one" />
+          </Button>
+          <Button :plain="true" @click="zoomOut()">
+            <IconifyIcon icon="tabler:zoom-out" />
+          </Button>
+          <Button class="w-80px"> {{ scaleValue }}% </Button>
+          <Button :plain="true" @click="zoomIn()">
+            <IconifyIcon icon="tabler:zoom-in" />
+          </Button>
+          <Button @click="resetPosition">重置</Button>
+        </ButtonGroup>
+      </Row>
+    </div>
+    <div
+      class="simple-process-model"
+      :style="`transform: translate(${currentX}px, ${currentY}px) scale(${scaleValue / 100});`"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag"
+      @mouseenter="setGrabCursor"
+    >
+      <ProcessNodeTree
+        v-if="processNodeTree"
+        v-model:flow-node="processNodeTree"
+      />
+    </div>
+  </div>
+  <!-- TODO 这个好像暂时没有用到。保存失败弹窗 -->
+  <Modal
+    v-model:open="errorDialogVisible"
+    title="保存失败"
+    width="400"
+    :fullscreen="false"
+  >
+    <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <div
+      class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
+      v-for="(item, index) in errorNodes"
+      :key="index"
+    >
+      {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+    </div>
+    <template #footer>
+      <Button type="primary" @click="errorDialogVisible = false">知道了</Button>
+    </template>
+  </Modal>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
new file mode 100644
index 00000000..74c910f6
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -0,0 +1,1010 @@
+// TODO 芋艿 这些 常量是不是可以共享
+
+interface DictDataType {
+  label: string;
+  value: number | string;
+}
+
+// 用户任务的审批类型。 【参考飞书】
+export enum ApproveType {
+  /**
+   * 自动通过
+   */
+  AUTO_APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  AUTO_REJECT = 3,
+  /**
+   * 人工审批
+   */
+  USER = 1,
+}
+
+// 多人审批方式类型枚举 （ 用于审批节点 ）
+export enum ApproveMethodType {
+  /**
+   * 多人或签(通过只需一人，拒绝只需一人)
+   */
+  ANY_APPROVE = 3,
+
+  /**
+   * 多人会签(按通过比例)
+   */
+  APPROVE_BY_RATIO = 2,
+
+  /**
+   * 随机挑选一人审批
+   */
+  RANDOM_SELECT_ONE_APPROVE = 1,
+  /**
+   * 多人依次审批
+   */
+  SEQUENTIAL_APPROVE = 4,
+}
+
+/**
+ * 任务状态枚举
+ */
+export enum TaskStatusEnum {
+  /**
+   * 审批通过
+   */
+  APPROVE = 2,
+
+  /**
+   * 审批通过中
+   */
+  APPROVING = 7,
+  /**
+   * 已取消
+   */
+  CANCEL = 4,
+  /**
+   * 未开始
+   */
+  NOT_START = -1,
+
+  /**
+   * 审批不通过
+   */
+  REJECT = 3,
+
+  /**
+   * 已退回
+   */
+  RETURN = 5,
+  /**
+   * 审批中
+   */
+  RUNNING = 1,
+  /**
+   * 待审批
+   */
+  WAIT = 0,
+}
+
+/**
+ * 节点类型
+ */
+export enum NodeType {
+  /**
+   * 子流程节点
+   */
+  CHILD_PROCESS_NODE = 20,
+  /**
+   * 条件分支节点 (对应排他网关)
+   */
+  CONDITION_BRANCH_NODE = 51,
+  /**
+   * 条件节点
+   */
+  CONDITION_NODE = 50,
+
+  /**
+   * 抄送人节点
+   */
+  COPY_TASK_NODE = 12,
+
+  /**
+   * 延迟器节点
+   */
+  DELAY_TIMER_NODE = 14,
+
+  /**
+   * 结束节点
+   */
+  END_EVENT_NODE = 1,
+
+  /**
+   * 包容分支节点 (对应包容网关)
+   */
+  INCLUSIVE_BRANCH_NODE = 53,
+
+  /**
+   * 并行分支节点 (对应并行网关)
+   */
+  PARALLEL_BRANCH_NODE = 52,
+
+  /**
+   * 路由分支节点
+   */
+  ROUTER_BRANCH_NODE = 54,
+  /**
+   * 发起人节点
+   */
+  START_USER_NODE = 10,
+  /**
+   * 办理人节点
+   */
+  TRANSACTOR_NODE = 13,
+
+  /**
+   * 触发器节点
+   */
+  TRIGGER_NODE = 15,
+  /**
+   * 审批人节点
+   */
+  USER_TASK_NODE = 11,
+}
+
+export enum NodeId {
+  /**
+   * 发起人节点 Id
+   */
+  END_EVENT_NODE_ID = 'EndEvent',
+
+  /**
+   * 发起人节点 Id
+   */
+  START_USER_NODE_ID = 'StartUserNode',
+}
+
+// 条件配置类型 （ 用于条件节点配置 ）
+export enum ConditionType {
+  /**
+   * 条件表达式
+   */
+  EXPRESSION = 1,
+
+  /**
+   * 条件规则
+   */
+  RULE = 2,
+}
+
+// 操作按钮类型枚举 (用于审批节点)
+export enum OperationButtonType {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
+// 审批拒绝类型枚举
+export enum RejectHandlerType {
+  /**
+   * 结束流程
+   */
+  FINISH_PROCESS = 1,
+  /**
+   * 驳回到指定节点
+   */
+  RETURN_USER_TASK = 2,
+}
+
+// 用户任务超时处理类型枚举
+export enum TimeoutHandlerType {
+  /**
+   * 自动同意
+   */
+  APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 3,
+  /**
+   * 自动提醒
+   */
+  REMINDER = 1,
+}
+
+// 用户任务的审批人为空时，处理类型枚举
+export enum AssignEmptyHandlerType {
+  /**
+   * 自动通过
+   */
+  APPROVE = 1,
+  /**
+   * 转交给流程管理员
+   */
+  ASSIGN_ADMIN = 4,
+  /**
+   * 指定人员审批
+   */
+  ASSIGN_USER = 3,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 2,
+}
+
+// 用户任务的审批人与发起人相同时，处理类型枚举
+export enum AssignStartUserHandlerType {
+  /**
+   * 转交给部门负责人审批
+   */
+  ASSIGN_DEPT_LEADER = 3,
+  /**
+   * 自动跳过【参考飞书】：1）如果当前节点还有其他审批人，则交由其他审批人进行审批；2）如果当前节点没有其他审批人，则该节点自动通过
+   */
+  SKIP = 2,
+  /**
+   * 由发起人对自己审批
+   */
+  START_USER_AUDIT = 1,
+}
+
+// 时间单位枚举
+export enum TimeUnitType {
+  /**
+   * 天
+   */
+  DAY = 3,
+  /**
+   * 小时
+   */
+  HOUR = 2,
+  /**
+   * 分钟
+   */
+  MINUTE = 1,
+}
+
+/**
+ * 表单权限的枚举
+ */
+export enum FieldPermissionType {
+  /**
+   * 隐藏
+   */
+  NONE = '3',
+  /**
+   * 只读
+   */
+  READ = '1',
+  /**
+   * 编辑
+   */
+  WRITE = '2',
+}
+
+/**
+ * 延迟类型
+ */
+export enum DelayTypeEnum {
+  /**
+   * 固定日期时间
+   */
+  FIXED_DATE_TIME = 2,
+  /**
+   * 固定时长
+   */
+  FIXED_TIME_DURATION = 1,
+}
+
+/**
+ * 触发器类型枚举
+ */
+export enum TriggerTypeEnum {
+  /**
+   * 表单数据删除触发器
+   */
+  FORM_DELETE = 11,
+  /**
+   * 表单数据更新触发器
+   */
+  FORM_UPDATE = 10,
+  /**
+   * 接收 HTTP 回调请求触发器
+   */
+  HTTP_CALLBACK = 2,
+  /**
+   * 发送 HTTP 请求触发器
+   */
+  HTTP_REQUEST = 1,
+}
+
+export enum ChildProcessStartUserTypeEnum {
+  /**
+   * 表单
+   */
+  FROM_FORM = 2,
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+}
+
+export enum ChildProcessStartUserEmptyTypeEnum {
+  /**
+   * 子流程管理员
+   */
+  CHILD_PROCESS_ADMIN = 2,
+  /**
+   * 主流程管理员
+   */
+  MAIN_PROCESS_ADMIN = 3,
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+}
+
+export enum ChildProcessMultiInstanceSourceTypeEnum {
+  /**
+   * 固定数量
+   */
+  FIXED_QUANTITY = 1,
+  /**
+   * 多选表单
+   */
+  MULTIPLE_FORM = 3,
+  /**
+   * 数字表单
+   */
+  NUMBER_FORM = 2,
+}
+
+// 候选人策略枚举 （ 用于审批节点。抄送节点 )
+export enum CandidateStrategy {
+  /**
+   * 审批人自选
+   */
+  APPROVE_USER_SELECT = 34,
+  /**
+   * 部门的负责人
+   */
+  DEPT_LEADER = 21,
+  /**
+   * 部门成员
+   */
+  DEPT_MEMBER = 20,
+  /**
+   * 流程表达式
+   */
+  EXPRESSION = 60,
+  /**
+   * 表单内部门负责人
+   */
+  FORM_DEPT_LEADER = 51,
+  /**
+   * 表单内用户字段
+   */
+  FORM_USER = 50,
+  /**
+   * 连续多级部门的负责人
+   */
+  MULTI_LEVEL_DEPT_LEADER = 23,
+  /**
+   * 指定岗位
+   */
+  POST = 22,
+  /**
+   * 指定角色
+   */
+  ROLE = 10,
+  /**
+   * 发起人自己
+   */
+  START_USER = 36,
+  /**
+   * 发起人部门负责人
+   */
+  START_USER_DEPT_LEADER = 37,
+  /**
+   * 发起人连续多级部门的负责人
+   */
+  START_USER_MULTI_LEVEL_DEPT_LEADER = 38,
+  /**
+   * 发起人自选
+   */
+  START_USER_SELECT = 35,
+  /**
+   * 指定用户
+   */
+  USER = 30,
+  /**
+   * 指定用户组
+   */
+  USER_GROUP = 40,
+}
+
+export enum BpmHttpRequestParamTypeEnum {
+  /**
+   * 固定值
+   */
+  FIXED_VALUE = 1,
+  /**
+   * 表单
+   */
+  FROM_FORM = 2,
+}
+
+// 这里定义 HTTP 请求参数类型
+export type HttpRequestParam = {
+  key: string;
+  type: number;
+  value: string;
+};
+
+// 监听器结构定义
+export type ListenerHandler = {
+  body?: HttpRequestParam[];
+  enable: boolean;
+  header?: HttpRequestParam[];
+  path?: string;
+};
+
+/**
+ * 条件规则结构定义
+ */
+export type ConditionRule = {
+  leftSide: string;
+  opCode: string;
+  rightSide: string;
+};
+
+/**
+ * 条件结构定义
+ */
+export type Condition = {
+  // 条件规则的逻辑关系是否为且
+  and: boolean;
+  rules: ConditionRule[];
+};
+
+/**
+ * 条件组结构定义
+ */
+export type ConditionGroup = {
+  // 条件组的逻辑关系是否为且
+  and: boolean;
+  // 条件数组
+  conditions: Condition[];
+};
+
+/**
+ * 条件节点设置结构定义，用于条件节点
+ */
+export type ConditionSetting = {
+  // 条件表达式
+  conditionExpression?: string;
+  // 条件组
+  conditionGroups?: ConditionGroup;
+  // 条件类型
+  conditionType?: ConditionType;
+  // 是否默认的条件
+  defaultFlow?: boolean;
+};
+
+/**
+ * 审批拒绝结构定义
+ */
+export type RejectHandler = {
+  // 退回节点 Id
+  returnNodeId?: string;
+  // 审批拒绝类型
+  type: RejectHandlerType;
+};
+
+/**
+ * 审批超时结构定义
+ */
+export type TimeoutHandler = {
+  // 是否开启超时处理
+  enable: boolean;
+  // 执行动作是自动提醒, 最大提醒次数
+  maxRemindCount?: number;
+  // 超时时间设置
+  timeDuration?: string;
+  // 超时执行的动作
+  type?: number;
+};
+
+/**
+ * 审批人为空的结构定义
+ */
+export type AssignEmptyHandler = {
+  // 审批人为空的处理类型
+  type: AssignEmptyHandlerType;
+  // 指定用户的编号数组
+  userIds?: number[];
+};
+
+/**
+ * 延迟设置
+ */
+export type DelaySetting = {
+  // 延迟时间表达式
+  delayTime: string;
+  // 延迟类型
+  delayType: number;
+};
+
+/**
+ * 路由分支结构定义
+ */
+export type RouterSetting = {
+  conditionExpression: string;
+  conditionGroups: ConditionGroup;
+  conditionType: ConditionType;
+  nodeId: string;
+};
+
+/**
+ * 操作按钮权限结构定义
+ */
+export type ButtonSetting = {
+  displayName: string;
+  enable: boolean;
+  id: OperationButtonType;
+};
+
+/**
+ * HTTP 请求触发器结构定义
+ */
+export type HttpRequestTriggerSetting = {
+  // 请求体参数设置
+  body?: HttpRequestParam[];
+  // 请求头参数设置
+  header?: HttpRequestParam[];
+  // 请求响应设置
+  response?: Record<string, string>[];
+  // 请求 URL
+  url: string;
+};
+
+/**
+ * 流程表单触发器配置结构定义
+ */
+export type FormTriggerSetting = {
+  // 条件表达式
+  conditionExpression?: string;
+  // 条件组
+  conditionGroups?: ConditionGroup;
+  // 条件类型
+  conditionType?: ConditionType;
+  // 删除表单字段配置
+  deleteFields?: string[];
+  // 更新表单字段配置
+  updateFormFields?: Record<string, any>;
+};
+
+/**
+ * 触发器节点结构定义
+ */
+export type TriggerSetting = {
+  formSettings?: FormTriggerSetting[];
+  httpRequestSetting?: HttpRequestTriggerSetting;
+  type: TriggerTypeEnum;
+};
+
+export type IOParameter = {
+  source: string;
+  target: string;
+};
+
+export type StartUserSetting = {
+  emptyType?: ChildProcessStartUserEmptyTypeEnum;
+  formField?: string;
+  type: ChildProcessStartUserTypeEnum;
+};
+
+export type TimeoutSetting = {
+  enable: boolean;
+  timeExpression?: string;
+  type?: DelayTypeEnum;
+};
+
+export type MultiInstanceSetting = {
+  approveRatio?: number;
+  enable: boolean;
+  sequential?: boolean;
+  source?: string;
+  sourceType?: ChildProcessMultiInstanceSourceTypeEnum;
+};
+
+/**
+ * 子流程节点结构定义
+ */
+export type ChildProcessSetting = {
+  async: boolean;
+  calledProcessDefinitionKey: string;
+  calledProcessDefinitionName: string;
+  inVariables?: IOParameter[];
+  multiInstanceSetting: MultiInstanceSetting;
+  outVariables?: IOParameter[];
+  skipStartUserNode: boolean;
+  startUserSetting: StartUserSetting;
+  timeoutSetting: TimeoutSetting;
+};
+
+/**
+ *  节点结构定义
+ */
+export interface SimpleFlowNode {
+  id: string;
+  type: NodeType;
+  name: string;
+  showText?: string;
+  // 孩子节点
+  childNode?: SimpleFlowNode;
+  // 条件节点
+  conditionNodes?: SimpleFlowNode[];
+  // 审批类型
+  approveType?: ApproveType;
+  // 候选人策略
+  candidateStrategy?: number;
+  // 候选人参数
+  candidateParam?: string;
+  // 多人审批方式
+  approveMethod?: ApproveMethodType;
+  // 通过比例
+  approveRatio?: number;
+  // 审批按钮设置
+  buttonsSetting?: any[];
+  // 表单权限
+  fieldsPermission?: Array<Record<string, any>>;
+  // 审批任务超时处理
+  timeoutHandler?: TimeoutHandler;
+  // 审批任务拒绝处理
+  rejectHandler?: RejectHandler;
+  // 审批人为空的处理
+  assignEmptyHandler?: AssignEmptyHandler;
+  // 审批节点的审批人与发起人相同时，对应的处理类型
+  assignStartUserHandlerType?: number;
+  // 创建任务监听器
+  taskCreateListener?: ListenerHandler;
+  // 创建任务监听器
+  taskAssignListener?: ListenerHandler;
+  // 创建任务监听器
+  taskCompleteListener?: ListenerHandler;
+  // 条件设置
+  conditionSetting?: ConditionSetting;
+  // 活动的状态，用于前端节点状态展示
+  activityStatus?: TaskStatusEnum;
+  // 延迟设置
+  delaySetting?: DelaySetting;
+  // 路由分支
+  routerGroups?: RouterSetting[];
+  defaultFlowId?: string;
+  // 签名
+  signEnable?: boolean;
+  // 审批意见
+  reasonRequire?: boolean;
+  // 触发器设置
+  triggerSetting?: TriggerSetting;
+  // 子流程
+  childProcessSetting?: ChildProcessSetting;
+}
+
+/**
+ * 条件组默认值
+ */
+export const DEFAULT_CONDITION_GROUP_VALUE = {
+  and: true,
+  conditions: [
+    {
+      and: true,
+      rules: [
+        {
+          opCode: '==',
+          leftSide: '',
+          rightSide: '',
+        },
+      ],
+    },
+  ],
+};
+
+export const NODE_DEFAULT_TEXT = new Map<number, string>();
+NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人');
+NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人');
+NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件');
+NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人');
+NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器');
+NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点');
+NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器');
+NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人');
+NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程');
+
+export const NODE_DEFAULT_NAME = new Map<number, string>();
+NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人');
+NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人');
+NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件');
+NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人');
+NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器');
+NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支');
+NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器');
+NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人');
+NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程');
+
+// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
+export const CANDIDATE_STRATEGY: DictDataType[] = [
+  { label: '指定成员', value: CandidateStrategy.USER as any },
+  { label: '指定角色', value: CandidateStrategy.ROLE as any },
+  { label: '指定岗位', value: CandidateStrategy.POST as any },
+  { label: '部门成员', value: CandidateStrategy.DEPT_MEMBER as any },
+  { label: '部门负责人', value: CandidateStrategy.DEPT_LEADER as any },
+  {
+    label: '连续多级部门负责人',
+    value: CandidateStrategy.MULTI_LEVEL_DEPT_LEADER as any,
+  },
+  { label: '发起人自选', value: CandidateStrategy.START_USER_SELECT as any },
+  { label: '审批人自选', value: CandidateStrategy.APPROVE_USER_SELECT as any },
+  { label: '发起人本人', value: CandidateStrategy.START_USER as any },
+  {
+    label: '发起人部门负责人',
+    value: CandidateStrategy.START_USER_DEPT_LEADER as any,
+  },
+  {
+    label: '发起人连续部门负责人',
+    value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER as any,
+  },
+  { label: '用户组', value: CandidateStrategy.USER_GROUP as any },
+  { label: '表单内用户字段', value: CandidateStrategy.FORM_USER as any },
+  {
+    label: '表单内部门负责人',
+    value: CandidateStrategy.FORM_DEPT_LEADER as any,
+  },
+  { label: '流程表达式', value: CandidateStrategy.EXPRESSION as any },
+];
+// 审批节点 的审批类型
+export const APPROVE_TYPE: DictDataType[] = [
+  { label: '人工审批', value: ApproveType.USER as any },
+  { label: '自动通过', value: ApproveType.AUTO_APPROVE as any },
+  { label: '自动拒绝', value: ApproveType.AUTO_REJECT as any },
+];
+
+export const APPROVE_METHODS: DictDataType[] = [
+  {
+    label: '按顺序依次审批',
+    value: ApproveMethodType.SEQUENTIAL_APPROVE as any,
+  },
+  {
+    label: '会签（可同时审批，至少 % 人必须审批通过）',
+    value: ApproveMethodType.APPROVE_BY_RATIO as any,
+  },
+  {
+    label: '或签(可同时审批，有一人通过即可)',
+    value: ApproveMethodType.ANY_APPROVE as any,
+  },
+  {
+    label: '随机挑选一人审批',
+    value: ApproveMethodType.RANDOM_SELECT_ONE_APPROVE as any,
+  },
+];
+
+export const CONDITION_CONFIG_TYPES: DictDataType[] = [
+  { label: '条件规则', value: ConditionType.RULE as any },
+  { label: '条件表达式', value: ConditionType.EXPRESSION as any },
+];
+
+// 时间单位类型
+export const TIME_UNIT_TYPES: DictDataType[] = [
+  { label: '分钟', value: TimeUnitType.MINUTE as any },
+  { label: '小时', value: TimeUnitType.HOUR as any },
+  { label: '天', value: TimeUnitType.DAY as any },
+];
+// 超时处理执行动作类型
+export const TIMEOUT_HANDLER_TYPES: DictDataType[] = [
+  { label: '自动提醒', value: 1 },
+  { label: '自动同意', value: 2 },
+  { label: '自动拒绝', value: 3 },
+];
+export const REJECT_HANDLER_TYPES: DictDataType[] = [
+  { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS as any },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK as any },
+  // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
+];
+export const ASSIGN_EMPTY_HANDLER_TYPES: DictDataType[] = [
+  { label: '自动通过', value: 1 },
+  { label: '自动拒绝', value: 2 },
+  { label: '指定成员审批', value: 3 },
+  { label: '转交给流程管理员', value: 4 },
+];
+export const ASSIGN_START_USER_HANDLER_TYPES: DictDataType[] = [
+  { label: '由发起人对自己审批', value: 1 },
+  { label: '自动跳过', value: 2 },
+  { label: '转交给部门负责人审批', value: 3 },
+];
+
+// 比较运算符
+export const COMPARISON_OPERATORS: DictDataType[] = [
+  {
+    value: '==',
+    label: '等于',
+  },
+  {
+    value: '!=',
+    label: '不等于',
+  },
+  {
+    value: '>',
+    label: '大于',
+  },
+  {
+    value: '>=',
+    label: '大于等于',
+  },
+  {
+    value: '<',
+    label: '小于',
+  },
+  {
+    value: '<=',
+    label: '小于等于',
+  },
+];
+// 审批操作按钮名称
+export const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办');
+OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派');
+OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签');
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回');
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送');
+
+// 默认的按钮权限设置
+export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: true },
+];
+
+// 办理人默认的按钮权限设置
+export const TRANSACTOR_DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '办理', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false },
+];
+
+// 发起人的按钮权限。暂时定死，不可以编辑
+export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '提交', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false },
+];
+
+export const MULTI_LEVEL_DEPT: DictDataType[] = [
+  { label: '第 1 级部门', value: 1 },
+  { label: '第 2 级部门', value: 2 },
+  { label: '第 3 级部门', value: 3 },
+  { label: '第 4 级部门', value: 4 },
+  { label: '第 5 级部门', value: 5 },
+  { label: '第 6 级部门', value: 6 },
+  { label: '第 7 级部门', value: 7 },
+  { label: '第 8 级部门', value: 8 },
+  { label: '第 9 级部门', value: 9 },
+  { label: '第 10 级部门', value: 10 },
+  { label: '第 11 级部门', value: 11 },
+  { label: '第 12 级部门', value: 12 },
+  { label: '第 13 级部门', value: 13 },
+  { label: '第 14 级部门', value: 14 },
+  { label: '第 15 级部门', value: 15 },
+];
+
+/**
+ * 流程实例的变量枚举
+ */
+export enum ProcessVariableEnum {
+  /**
+   * 流程定义名称
+   */
+  PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME',
+  /**
+   * 发起时间
+   */
+  START_TIME = 'PROCESS_START_TIME',
+  /**
+   * 发起用户 ID
+   */
+  START_USER_ID = 'PROCESS_START_USER_ID',
+}
+
+export const DELAY_TYPE = [
+  { label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
+  { label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME },
+];
+
+export const BPM_HTTP_REQUEST_PARAM_TYPES = [
+  {
+    value: 1,
+    label: '固定值',
+  },
+  {
+    value: 2,
+    label: '表单',
+  },
+];
+
+export const TRIGGER_TYPES: DictDataType[] = [
+  { label: '发送 HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST as any },
+  { label: '接收 HTTP 回调', value: TriggerTypeEnum.HTTP_CALLBACK as any },
+  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE as any },
+  { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE as any },
+];
+
+export const CHILD_PROCESS_START_USER_TYPE = [
+  {
+    label: '同主流程发起人',
+    value: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
+  },
+  { label: '表单', value: ChildProcessStartUserTypeEnum.FROM_FORM },
+];
+
+export const CHILD_PROCESS_START_USER_EMPTY_TYPE = [
+  {
+    label: '同主流程发起人',
+    value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER,
+  },
+  {
+    label: '子流程管理员',
+    value: ChildProcessStartUserEmptyTypeEnum.CHILD_PROCESS_ADMIN,
+  },
+  {
+    label: '主流程管理员',
+    value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_ADMIN,
+  },
+];
+
+export const CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE = [
+  {
+    label: '固定数量',
+    value: ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY,
+  },
+  {
+    label: '数字表单',
+    value: ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM,
+  },
+  {
+    label: '多选表单',
+    value: ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM,
+  },
+];
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
new file mode 100644
index 00000000..28157281
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -0,0 +1,739 @@
+import type { Ref } from 'vue';
+
+import type {
+  ConditionGroup,
+  HttpRequestParam,
+  SimpleFlowNode,
+} from './consts';
+
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, ref, toRaw, unref, watch } from 'vue';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  CandidateStrategy,
+  COMPARISON_OPERATORS,
+  ConditionType,
+  FieldPermissionType,
+  NODE_DEFAULT_NAME,
+  NodeType,
+  ProcessVariableEnum,
+  RejectHandlerType,
+  TaskStatusEnum,
+} from './consts';
+
+export function useWatchNode(props: {
+  flowNode: SimpleFlowNode;
+}): Ref<SimpleFlowNode> {
+  const node = ref<SimpleFlowNode>(props.flowNode);
+  watch(
+    () => props.flowNode,
+    (newValue) => {
+      node.value = newValue;
+    },
+  );
+  return node;
+}
+
+// 解析 formCreate 所有表单字段, 并返回
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = [];
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result);
+    });
+  }
+  return result;
+};
+
+/**
+ * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
+ *
+ * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
+ * @param fields 解析后表单组件字段
+ * @param parentTitle  如果是子表单，子表单的标题，默认为空
+ */
+export const parseFormFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>> = [],
+  parentTitle: string = '',
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule;
+  if (field && tempTitle) {
+    let title = tempTitle;
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`;
+    }
+    let required = false;
+    if ($required) {
+      required = true;
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required,
+    });
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFormFields(rule, fields);
+    });
+  }
+};
+
+/**
+ * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
+ */
+export function useFormFieldsPermission(
+  defaultPermission: FieldPermissionType,
+) {
+  // 字段权限配置. 需要有 field, title,  permissioin 属性
+  const fieldsPermissionConfig = ref<Array<Record<string, any>>>([]);
+
+  const formType = inject<Ref<number | undefined>>('formType', ref()); // 表单类型
+
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+
+  const getNodeConfigFormFields = (
+    nodeFormFields?: Array<Record<string, string>>,
+  ) => {
+    nodeFormFields = toRaw(nodeFormFields);
+    fieldsPermissionConfig.value =
+      !nodeFormFields || nodeFormFields.length === 0
+        ? getDefaultFieldsPermission(unref(formFields))
+        : mergeFieldsPermission(nodeFormFields, unref(formFields));
+  };
+  // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
+  const mergeFieldsPermission = (
+    formFieldsPermisson: Array<Record<string, string>>,
+    formFields?: string[],
+  ) => {
+    let mergedFieldsPermission: Array<Record<string, any>> = [];
+    if (formFields) {
+      mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
+        const found = formFieldsPermisson.find(
+          (fieldPermission) => fieldPermission.field === item.field,
+        );
+        return {
+          field: item.field,
+          title: item.title,
+          permission: found ? found.permission : defaultPermission,
+        };
+      });
+    }
+    return mergedFieldsPermission;
+  };
+
+  // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
+  const getDefaultFieldsPermission = (formFields?: string[]) => {
+    let defaultFieldsPermission: Array<Record<string, any>> = [];
+    if (formFields) {
+      defaultFieldsPermission = parseFormCreateFields(formFields).map(
+        (item) => {
+          return {
+            field: item.field,
+            title: item.title,
+            permission: defaultPermission,
+          };
+        },
+      );
+    }
+    return defaultFieldsPermission;
+  };
+
+  // 获取表单的所有字段，作为下拉框选项
+  const formFieldOptions = parseFormCreateFields(unref(formFields));
+
+  return {
+    formType,
+    fieldsPermissionConfig,
+    formFieldOptions,
+    getNodeConfigFormFields,
+  };
+}
+
+/**
+ * @description 获取流程表单的字段
+ */
+export function useFormFields() {
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  return parseFormCreateFields(unref(formFields));
+}
+
+// TODO @芋艿：后续需要把各种类似 useFormFieldsPermission 的逻辑，抽成一个通用方法。
+/**
+ * @description 获取流程表单的字段和发起人字段
+ */
+export function useFormFieldsAndStartUser() {
+  const injectFormFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const formFields = parseFormCreateFields(unref(injectFormFields));
+  // 添加发起人
+  formFields.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    required: true,
+  });
+  return formFields;
+}
+
+export type UserTaskFormType = {
+  approveMethod: ApproveMethodType;
+  approveRatio?: number;
+  assignEmptyHandlerType?: AssignEmptyHandlerType;
+  assignEmptyHandlerUserIds?: number[];
+  assignStartUserHandlerType?: AssignStartUserHandlerType;
+  buttonsSetting: any[];
+  candidateStrategy: CandidateStrategy;
+  deptIds?: number[]; // 部门
+  deptLevel?: number; // 部门层级
+  expression?: string; // 流程表达式
+  formDept?: string; // 表单内部门字段
+  formUser?: string; // 表单内用户字段
+  maxRemindCount?: number;
+  postIds?: number[]; // 岗位
+  reasonRequire: boolean;
+  rejectHandlerType?: RejectHandlerType;
+  returnNodeId?: string;
+  roleIds?: number[]; // 角色
+  signEnable: boolean;
+  taskAssignListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskAssignListenerEnable?: boolean;
+  taskAssignListenerPath?: string;
+  taskCompleteListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskCompleteListenerEnable?: boolean;
+  taskCompleteListenerPath?: string;
+  taskCreateListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskCreateListenerEnable?: boolean;
+  taskCreateListenerPath?: string;
+  timeDuration?: number;
+  timeoutHandlerEnable?: boolean;
+  timeoutHandlerType?: number;
+  userGroups?: number[]; // 用户组
+  userIds?: number[]; // 用户
+};
+
+export type CopyTaskFormType = {
+  candidateStrategy: CandidateStrategy;
+  deptIds?: number[]; // 部门
+  deptLevel?: number; // 部门层级
+  expression?: string; // 流程表达式
+  formDept?: string; // 表单内部门字段
+  formUser?: string; // 表单内用户字段
+  postIds?: number[]; // 岗位
+  roleIds?: number[]; // 角色
+  userGroups?: number[]; // 用户组
+  userIds?: number[]; // 用户
+};
+
+/**
+ * @description 节点表单数据。 用于审批节点、抄送节点
+ */
+export function useNodeForm(nodeType: NodeType) {
+  const roleOptions = inject<Ref<SystemRoleApi.Role[]>>('roleList', ref([])); // 角色列表
+  const postOptions = inject<Ref<SystemPostApi.Post[]>>('postList', ref([])); // 岗位列表
+  const userOptions = inject<Ref<SystemUserApi.User[]>>('userList', ref([])); // 用户列表
+  const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList', ref([])); // 部门列表
+  const userGroupOptions = inject<Ref<BpmUserGroupApi.UserGroupVO[]>>(
+    'userGroupList',
+    ref([]),
+  ); // 用户组列表
+  const deptTreeOptions = inject<Ref<SystemDeptApi.Dept[]>>(
+    'deptTree',
+    ref([]),
+  ); // 部门树
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
+
+  // eslint-disable-next-line unicorn/prefer-ternary
+  if (
+    nodeType === NodeType.USER_TASK_NODE ||
+    nodeType === NodeType.TRANSACTOR_NODE
+  ) {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      approveRatio: 100,
+      rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      returnNodeId: '',
+      timeoutHandlerEnable: false,
+      timeoutHandlerType: 1,
+      timeDuration: 6, // 默认 6小时
+      maxRemindCount: 1, // 默认 提醒 1次
+      buttonsSetting: [],
+    };
+  } else {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER,
+    };
+  }
+
+  const getShowText = (): string => {
+    let showText = '';
+    // 指定成员
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.USER &&
+      configForm.value?.userIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      userOptions?.value.forEach((item: any) => {
+        if (configForm.value?.userIds?.includes(item.id)) {
+          candidateNames.push(item.nickname);
+        }
+      });
+      showText = `指定成员：${candidateNames.join(',')}`;
+    }
+    // 指定角色
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.ROLE &&
+      configForm.value.roleIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      roleOptions?.value.forEach((item: any) => {
+        if (configForm.value?.roleIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定角色：${candidateNames.join(',')}`;
+    }
+    // 指定部门
+    if (
+      (configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+        configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+        configForm.value?.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) &&
+      configForm.value?.deptIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      deptOptions?.value.forEach((item) => {
+        if (configForm.value?.deptIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      if (
+        configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER
+      ) {
+        showText = `部门成员：${candidateNames.join(',')}`;
+      } else if (
+        configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
+      ) {
+        showText = `部门的负责人：${candidateNames.join(',')}`;
+      } else {
+        showText = `多级部门的负责人：${candidateNames.join(',')}`;
+      }
+    }
+
+    // 指定岗位
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.POST &&
+      configForm.value.postIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      postOptions?.value.forEach((item) => {
+        if (configForm.value?.postIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定岗位: ${candidateNames.join(',')}`;
+    }
+    // 指定用户组
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP &&
+      configForm.value?.userGroups?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      userGroupOptions?.value.forEach((item) => {
+        if (configForm.value?.userGroups?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定用户组: ${candidateNames.join(',')}`;
+    }
+
+    // 表单内用户字段
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
+      const formFieldOptions = parseFormCreateFields(unref(formFields));
+      const item = formFieldOptions.find(
+        (item) => item.field === configForm.value?.formUser,
+      );
+      showText = `表单用户：${item?.title}`;
+    }
+
+    // 表单内部门负责人
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+    ) {
+      showText = `表单内部门负责人`;
+    }
+
+    // 审批人自选
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.APPROVE_USER_SELECT
+    ) {
+      showText = `审批人自选`;
+    }
+
+    // 发起人自选
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_SELECT
+    ) {
+      showText = `发起人自选`;
+    }
+    // 发起人自己
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
+      showText = `发起人自己`;
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_DEPT_LEADER
+    ) {
+      showText = `发起人的部门负责人`;
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      showText = `发起人连续部门负责人`;
+    }
+    // 流程表达式
+    if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      showText = `流程表达式：${configForm.value.expression}`;
+    }
+    return showText;
+  };
+
+  /**
+   *  处理候选人参数的赋值
+   */
+  const handleCandidateParam = () => {
+    let candidateParam: string | undefined;
+    if (!configForm.value) {
+      return candidateParam;
+    }
+    switch (configForm.value.candidateStrategy) {
+      case CandidateStrategy.DEPT_LEADER:
+      case CandidateStrategy.DEPT_MEMBER: {
+        candidateParam = configForm.value.deptIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.EXPRESSION: {
+        candidateParam = configForm.value.expression;
+        break;
+      }
+      // 表单内部门的负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
+        const deptFieldOnForm = configForm.value.formDept;
+        candidateParam = deptFieldOnForm?.concat(
+          `|${configForm.value.deptLevel}`,
+        );
+        break;
+      }
+      case CandidateStrategy.FORM_USER: {
+        candidateParam = configForm.value?.formUser;
+        break;
+      }
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const deptIds = configForm.value.deptIds?.join(',');
+        candidateParam = deptIds?.concat(`|${configForm.value.deptLevel}`);
+        break;
+      }
+      case CandidateStrategy.POST: {
+        candidateParam = configForm.value.postIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.ROLE: {
+        candidateParam = configForm.value.roleIds?.join(',');
+        break;
+      }
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
+        candidateParam = `${configForm.value.deptLevel}`;
+        break;
+      }
+      case CandidateStrategy.USER: {
+        candidateParam = configForm.value.userIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.USER_GROUP: {
+        candidateParam = configForm.value.userGroups?.join(',');
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    return candidateParam;
+  };
+  /**
+   *  解析候选人参数
+   */
+  const parseCandidateParam = (
+    candidateStrategy: CandidateStrategy,
+    candidateParam: string | undefined,
+  ) => {
+    if (!configForm.value || !candidateParam) {
+      return;
+    }
+    switch (candidateStrategy) {
+      case CandidateStrategy.DEPT_LEADER:
+      case CandidateStrategy.DEPT_MEMBER: {
+        configForm.value.deptIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.EXPRESSION: {
+        configForm.value.expression = candidateParam;
+        break;
+      }
+      // 表单内的部门负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
+        const paramArray = candidateParam.split('|');
+        if (paramArray.length > 1) {
+          configForm.value.formDept = paramArray[0];
+          if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
+        }
+        break;
+      }
+      case CandidateStrategy.FORM_USER: {
+        configForm.value.formUser = candidateParam;
+        break;
+      }
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const paramArray = candidateParam.split('|') as string[];
+        if (paramArray.length > 1) {
+          configForm.value.deptIds = paramArray[0]
+            ?.split(',')
+            .map((item) => +item);
+          if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
+        }
+        break;
+      }
+      case CandidateStrategy.POST: {
+        configForm.value.postIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.ROLE: {
+        configForm.value.roleIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
+        configForm.value.deptLevel = +candidateParam;
+        break;
+      }
+      case CandidateStrategy.USER: {
+        configForm.value.userIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.USER_GROUP: {
+        configForm.value.userGroups = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  };
+  return {
+    configForm,
+    roleOptions,
+    postOptions,
+    userOptions,
+    userGroupOptions,
+    deptTreeOptions,
+    handleCandidateParam,
+    parseCandidateParam,
+    getShowText,
+  };
+}
+
+/**
+ * @description 抽屉配置
+ */
+export function useDrawer() {
+  // 抽屉配置是否可见
+  const settingVisible = ref(false);
+  // 关闭配置抽屉
+  const closeDrawer = () => {
+    settingVisible.value = false;
+  };
+  // 打开配置抽屉
+  const openDrawer = () => {
+    settingVisible.value = true;
+  };
+  return {
+    settingVisible,
+    closeDrawer,
+    openDrawer,
+  };
+}
+
+/**
+ * @description 节点名称配置
+ */
+export function useNodeName(nodeType: NodeType) {
+  // 节点名称
+  const nodeName = ref<string>();
+  // 节点名称输入框
+  const showInput = ref(false);
+  // 点击节点名称编辑图标
+  const clickIcon = () => {
+    showInput.value = true;
+  };
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false;
+    nodeName.value =
+      nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
+  };
+  return {
+    nodeName,
+    showInput,
+    clickIcon,
+    blurEvent,
+  };
+}
+
+export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+  // 显示节点名称输入框
+  const showInput = ref(false);
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false;
+    node.value.name =
+      node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
+  };
+  // 点击节点标题进行输入
+  const clickTitle = () => {
+    showInput.value = true;
+  };
+  return {
+    showInput,
+    clickTitle,
+    blurEvent,
+  };
+}
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function useTaskStatusClass(
+  taskStatus: TaskStatusEnum | undefined,
+): string {
+  if (!taskStatus) {
+    return '';
+  }
+  if (taskStatus === TaskStatusEnum.APPROVE) {
+    return 'status-pass';
+  }
+  if (taskStatus === TaskStatusEnum.RUNNING) {
+    return 'status-running';
+  }
+  if (taskStatus === TaskStatusEnum.REJECT) {
+    return 'status-reject';
+  }
+  if (taskStatus === TaskStatusEnum.CANCEL) {
+    return 'status-cancel';
+  }
+  return '';
+}
+
+/** 条件组件文字展示 */
+export function getConditionShowText(
+  conditionType: ConditionType | undefined,
+  conditionExpression: string | undefined,
+  conditionGroups: ConditionGroup | undefined,
+  fieldOptions: Array<Record<string, any>>,
+) {
+  let showText: string | undefined;
+  if (conditionType === ConditionType.EXPRESSION && conditionExpression) {
+    showText = `表达式：${conditionExpression}`;
+  }
+  if (conditionType === ConditionType.RULE) {
+    // 条件组是否为与关系
+    const groupAnd = conditionGroups?.and;
+    let warningMessage: string | undefined;
+    const conditionGroup = conditionGroups?.conditions.map((item) => {
+      return `(${item.rules
+        .map((rule) => {
+          if (rule.leftSide && rule.rightSide) {
+            return `${getFormFieldTitle(
+              fieldOptions,
+              rule.leftSide,
+            )} ${getOpName(rule.opCode)} ${rule.rightSide}`;
+          } else {
+            // 有一条规则不完善。提示错误
+            warningMessage = '请完善条件规则';
+            return '';
+          }
+        })
+        .join(item.and ? ' 且 ' : ' 或 ')} ) `;
+    });
+    showText = warningMessage
+      ? ''
+      : conditionGroup?.join(groupAnd ? ' 且 ' : ' 或 ');
+  }
+  return showText;
+}
+
+/** 获取表单字段名称*/
+const getFormFieldTitle = (
+  fieldOptions: Array<Record<string, any>>,
+  field: string,
+) => {
+  const item = fieldOptions.find((item) => item.field === field);
+  return item?.title;
+};
+
+/** 获取操作符名称 */
+const getOpName = (opCode: string): string | undefined => {
+  const opName = COMPARISON_OPERATORS.find(
+    (item: any) => item.value === opCode,
+  );
+  return opName?.label;
+};
diff --git a/apps/web-antd/src/components/simple-process-design/index.ts b/apps/web-antd/src/components/simple-process-design/index.ts
new file mode 100644
index 00000000..05fee448
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/index.ts
@@ -0,0 +1,3 @@
+import './styles/simple-process-designer.scss';
+
+export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf b/apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf
new file mode 100644
index 00000000..06f4e31c
Binary files /dev/null and b/apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf differ
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff b/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff
new file mode 100644
index 00000000..0724e750
Binary files /dev/null and b/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff differ
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2 b/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2
new file mode 100644
index 00000000..c904bb67
Binary files /dev/null and b/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2 differ
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
new file mode 100644
index 00000000..dbda6573
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -0,0 +1,830 @@
+// TODO 整个样式是不是要重新优化一下
+// iconfont 样式
+@font-face {
+  font-family: iconfont; /* Project id 4495938 */
+  src:
+    url('iconfont.woff2?t=1737639517142') format('woff2'),
+    url('iconfont.woff?t=1737639517142') format('woff'),
+    url('iconfont.ttf?t=1737639517142') format('truetype');
+}
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    max-width: 510px;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      outline: 0;
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+    }
+  }
+}
+
+// 表单字段权限
+.field-setting-pane {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+
+  .field-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .field-permit-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 45px;
+    padding-left: 12px;
+    line-height: 45px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    .first-title {
+      text-align: left !important;
+    }
+
+    .other-titles {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .setting-title-label {
+      display: inline-block;
+      width: 110px;
+      padding: 5px 0;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: center;
+    }
+  }
+
+  .field-setting-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    .field-setting-item-label {
+      display: inline-block;
+      width: 110px;
+      min-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: text;
+    }
+
+    .field-setting-item-group {
+      display: flex;
+      justify-content: space-between;
+
+      .item-radio-wrap {
+        display: inline-block;
+        width: 110px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// 节点连线气泡卡片样式
+.handler-item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  width: 320px;
+  cursor: pointer;
+
+  .handler-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+  }
+
+  .handler-item-icon {
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    user-select: none;
+    background: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 50%;
+
+    &:hover {
+      background: #e2e2e2;
+      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    }
+
+    .icon-size {
+      font-size: 25px;
+      line-height: 50px;
+    }
+  }
+
+  .approve {
+    color: #ff943e;
+  }
+
+  .copy {
+    color: #3296fa;
+  }
+
+  .condition {
+    color: #67c23a;
+  }
+
+  .parallel {
+    color: #626aef;
+  }
+
+  .inclusive {
+    color: #345da2;
+  }
+
+  .delay {
+    color: #e47470;
+  }
+
+  .trigger {
+    color: #3373d2;
+  }
+
+  .router {
+    color: #ca3a31;
+  }
+
+  .transactor {
+    color: #309;
+  }
+
+  .child-process {
+    color: #963;
+  }
+
+  .async-child-process {
+    color: #066;
+  }
+
+  .handler-item-text {
+    width: 80px;
+    margin-top: 4px;
+    font-size: 13px;
+    text-align: center;
+  }
+}
+// Simple 流程模型样式
+.simple-process-model-container {
+  width: 100%;
+  height: 100%;
+  padding-top: 32px;
+  overflow-x: auto;
+  background-color: #fafafa;
+
+  .simple-process-model {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: fit-content;
+    background: url('./svg/simple-process-bg.svg') 0 0 repeat;
+    transform: scale(1);
+    transform-origin: 50% 0 0;
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    // 节点容器 定义节点宽度
+    .node-container {
+      width: 200px;
+    }
+    // 节点
+    .node-box {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      min-height: 70px;
+      padding: 5px 10px 8px;
+      cursor: pointer;
+      background-color: #fff;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+      transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &.status-pass {
+        background-color: #a9da90;
+        border-color: #67c23a;
+      }
+
+      &.status-pass:hover {
+        border-color: #67c23a;
+      }
+
+      &.status-running {
+        background-color: #e7f0fe;
+        border-color: #5a9cf8;
+      }
+
+      &.status-running:hover {
+        border-color: #5a9cf8;
+      }
+
+      &.status-reject {
+        background-color: #f6e5e5;
+        border-color: #e47470;
+      }
+
+      &.status-reject:hover {
+        border-color: #e47470;
+      }
+
+      &:hover {
+        border-color: #0089ff;
+
+        .node-toolbar {
+          opacity: 1;
+        }
+
+        .branch-node-move {
+          display: flex;
+        }
+      }
+
+      // 普通节点标题
+      .node-title-container {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+
+        .node-title-icon {
+          display: flex;
+          align-items: center;
+
+          &.user-task {
+            color: #ff943e;
+          }
+
+          &.copy-task {
+            color: #3296fa;
+          }
+
+          &.start-user {
+            color: #676565;
+          }
+
+          &.delay-node {
+            color: #e47470;
+          }
+
+          &.trigger-node {
+            color: #3373d2;
+          }
+
+          &.router-node {
+            color: #ca3a31;
+          }
+
+          &.transactor-task {
+            color: #309;
+          }
+
+          &.child-process {
+            color: #963;
+          }
+
+          &.async-child-process {
+            color: #066;
+          }
+        }
+
+        .node-title {
+          margin-left: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 18px;
+          color: #1f1f1f;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #f60;
+          }
+        }
+      }
+
+      // 条件节点标题
+      .branch-node-title-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 0;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+
+        .input-max-width {
+          max-width: 115px !important;
+        }
+
+        .branch-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 13px;
+          font-weight: 600;
+          color: #f60;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #000;
+          }
+        }
+
+        .branch-priority {
+          min-width: 50px;
+          font-size: 12px;
+        }
+      }
+
+      .node-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-top: 4px;
+        line-height: 32px;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          font-size: 14px;
+          line-height: 24px;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      //条件节点内容
+      .branch-node-content {
+        display: flex;
+        align-items: center;
+        min-height: 32px;
+        padding: 4px 0;
+        margin-top: 4px;
+        line-height: 32px;
+        color: #111f2c;
+        border-radius: 4px;
+
+        .branch-node-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          font-size: 12px;
+          line-height: 24px;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      // 节点操作 ：删除
+      .node-toolbar {
+        position: absolute;
+        top: -20px;
+        right: 0;
+        display: flex;
+        opacity: 0;
+
+        .toolbar-icon {
+          vertical-align: middle;
+          text-align: center;
+        }
+      }
+
+      // 条件节点左右移动
+      .branch-node-move {
+        position: absolute;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 10px;
+        height: 100%;
+        cursor: pointer;
+      }
+
+      .move-node-left {
+        top: 0;
+        left: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+
+      .move-node-right {
+        top: 0;
+        right: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+
+    .node-config-error {
+      border-color: #ff5219 !important;
+    }
+    // 普通节点包装
+    .node-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    // 节点连线处理
+    .node-handler-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 70px;
+      user-select: none;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        width: 2px;
+        height: 100%;
+        margin: auto;
+        content: '';
+        background-color: #dedede;
+      }
+
+      .node-handler {
+        .add-icon {
+          position: relative;
+          top: -5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 25px;
+          height: 25px;
+          color: #fff;
+          cursor: pointer;
+          background-color: #0089ff;
+          border-radius: 50%;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .node-handler-arrow {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        display: flex;
+        transform: translateX(-50%);
+      }
+    }
+
+    // 条件节点包装
+    .branch-node-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 16px;
+
+      .branch-node-container {
+        position: relative;
+        display: flex;
+        min-width: fit-content;
+
+        &::before {
+          position: absolute;
+          left: 50%;
+          width: 4px;
+          height: 100%;
+          content: '';
+          background-color: #fafafa;
+          transform: translate(-50%);
+        }
+
+        .branch-node-add {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          height: 36px;
+          padding: 0 10px;
+          font-size: 12px;
+          line-height: 36px;
+          border: 2px solid #dedede;
+          border-radius: 18px;
+          transform: translateX(-50%);
+          transform-origin: center center;
+        }
+
+        .branch-node-readonly {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          background-color: #fff;
+          border: 2px solid #dedede;
+          border-radius: 50%;
+          transform: translateX(-50%);
+          transform-origin: center center;
+
+          &.status-pass {
+            background-color: #e9f4e2;
+            border-color: #6bb63c;
+          }
+
+          &.status-pass:hover {
+            border-color: #6bb63c;
+          }
+
+          .icon-size {
+            font-size: 22px;
+
+            &.condition {
+              color: #67c23a;
+            }
+
+            &.parallel {
+              color: #626aef;
+            }
+
+            &.inclusive {
+              color: #345da2;
+            }
+          }
+        }
+
+        .branch-node-item {
+          position: relative;
+          display: flex;
+          flex-shrink: 0;
+          flex-direction: column;
+          align-items: center;
+          min-width: 280px;
+          padding: 40px 40px 0;
+          background: transparent;
+          border-top: 2px solid #dedede;
+          border-bottom: 2px solid #dedede;
+
+          &::before {
+            position: absolute;
+            inset: 0;
+            width: 2px;
+            height: 100%;
+            margin: auto;
+            content: '';
+            background-color: #dedede;
+          }
+        }
+        // 覆盖条件节点第一个节点左上角的线
+        .branch-line-first-top {
+          position: absolute;
+          top: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点第一个节点左下角的线
+        .branch-line-first-bottom {
+          position: absolute;
+          bottom: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点最后一个节点右上角的线
+        .branch-line-last-top {
+          position: absolute;
+          top: -5px;
+          right: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点最后一个节点右下角的线
+        .branch-line-last-bottom {
+          position: absolute;
+          right: -1px;
+          bottom: -5px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+      }
+    }
+
+    .node-fixed-name {
+      display: inline-block;
+      width: auto;
+      padding: 0 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+      white-space: nowrap;
+    }
+    // 开始节点包装
+    .start-node-wrapper {
+      position: relative;
+      margin-top: 16px;
+
+      .start-node-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .start-node-box {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 90px;
+          height: 36px;
+          padding: 3px 4px;
+          color: #212121;
+          cursor: pointer;
+          background: #fafafa;
+          border-radius: 30px;
+          box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        }
+      }
+    }
+
+    // 结束节点包装
+    .end-node-wrapper {
+      margin-bottom: 16px;
+
+      .end-node-box {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 36px;
+        color: #212121;
+        border: 2px solid #fafafa;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+
+        &.status-pass {
+          background-color: #a9da90;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        &.status-reject {
+          background-color: #f6e5e5;
+          border-color: #e47470;
+        }
+
+        &.status-reject:hover {
+          border-color: #e47470;
+        }
+
+        &.status-cancel {
+          background-color: #eaeaeb;
+          border-color: #919398;
+        }
+
+        &.status-cancel:hover {
+          border-color: #919398;
+        }
+      }
+    }
+
+    // 可编辑的 title 输入框
+    .editable-title-input {
+      max-width: 145px;
+      height: 20px;
+      margin-left: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        outline: 0;
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-trigger::before {
+  content: '\e6d3';
+}
+
+.icon-router::before {
+  content: '\e6b2';
+}
+
+.icon-delay::before {
+  content: '\e600';
+}
+
+.icon-start-user::before {
+  content: '\e679';
+}
+
+.icon-inclusive::before {
+  content: '\e602';
+}
+
+.icon-copy::before {
+  content: '\e7eb';
+}
+
+.icon-transactor::before {
+  content: '\e61c';
+}
+
+.icon-exclusive::before {
+  content: '\e717';
+}
+
+.icon-approve::before {
+  content: '\e715';
+}
+
+.icon-parallel::before {
+  content: '\e688';
+}
+
+.icon-async-child-process::before {
+  content: '\e6f2';
+}
+
+.icon-child-process::before {
+  content: '\e6c1';
+}
diff --git a/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg b/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg
new file mode 100644
index 00000000..eb23ab5a
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg
@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>
\ No newline at end of file
diff --git a/apps/web-antd/src/components/upload/file-upload.vue b/apps/web-antd/src/components/upload/file-upload.vue
index 5423ab9a..7577eeea 100644
--- a/apps/web-antd/src/components/upload/file-upload.vue
+++ b/apps/web-antd/src/components/upload/file-upload.vue
@@ -2,7 +2,7 @@
 import type { UploadFile, UploadProps } from 'ant-design-vue';
 import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 
-import type { AxiosResponse } from '@vben/request';
+import type { FileUploadProps } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
@@ -20,44 +20,19 @@ import { useUpload, useUploadType } from './use-upload';
 
 defineOptions({ name: 'FileUpload', inheritAttrs: false });
 
-const props = withDefaults(
-  defineProps<{
-    // 根据后缀，或者其他
-    accept?: string[];
-    api?: (
-      file: File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    // 上传的目录
-    directory?: string;
-    disabled?: boolean;
-    helpText?: string;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    resultField?: string;
-    // 是否显示下面的描述
-    showDescription?: boolean;
-    value?: string | string[];
-  }>(),
-  {
-    value: () => [],
-    directory: undefined,
-    disabled: false,
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => [],
-    multiple: false,
-    api: undefined,
-    resultField: '',
-    showDescription: false,
-  },
-);
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  directory: undefined,
+  disabled: false,
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => [],
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: false,
+});
 const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
@@ -112,7 +87,7 @@ watch(
   },
 );
 
-const handleRemove = async (file: UploadFile) => {
+async function handleRemove(file: UploadFile) {
   if (fileList.value) {
     const index = fileList.value.findIndex((item) => item.uid === file.uid);
     index !== -1 && fileList.value.splice(index, 1);
@@ -122,9 +97,9 @@ const handleRemove = async (file: UploadFile) => {
     emit('change', value);
     emit('delete', file);
   }
-};
+}
 
-const beforeUpload = async (file: File) => {
+async function beforeUpload(file: File) {
   // 使用现代的Blob.text()方法替代FileReader
   const fileContent = await file.text();
   emit('returnText', fileContent);
@@ -145,7 +120,7 @@ const beforeUpload = async (file: File) => {
     setTimeout(() => (isLtMsg.value = true), 1000);
   }
   return (isAct && !isLt) || Upload.LIST_IGNORE;
-};
+}
 
 async function customRequest(info: UploadRequestOption<any>) {
   let { api } = props;
diff --git a/apps/web-antd/src/components/upload/helper.ts b/apps/web-antd/src/components/upload/helper.ts
index a7a67639..27313cea 100644
--- a/apps/web-antd/src/components/upload/helper.ts
+++ b/apps/web-antd/src/components/upload/helper.ts
@@ -1,3 +1,8 @@
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+
 export function checkFileType(file: File, accepts: string[]) {
   if (!accepts || accepts.length === 0) {
     return true;
@@ -7,11 +12,6 @@ export function checkFileType(file: File, accepts: string[]) {
   return reg.test(file.name);
 }
 
-/**
- * 默认图片类型
- */
-export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
-
 export function checkImgType(
   file: File,
   accepts: string[] = defaultImageAccepts,
diff --git a/apps/web-antd/src/components/upload/image-upload.vue b/apps/web-antd/src/components/upload/image-upload.vue
index 10da9086..392d47b9 100644
--- a/apps/web-antd/src/components/upload/image-upload.vue
+++ b/apps/web-antd/src/components/upload/image-upload.vue
@@ -2,9 +2,7 @@
 import type { UploadFile, UploadProps } from 'ant-design-vue';
 import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 
-import type { AxiosResponse } from '@vben/request';
-
-import type { UploadListType } from './typing';
+import type { FileUploadProps } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
@@ -22,46 +20,20 @@ import { useUpload, useUploadType } from './use-upload';
 
 defineOptions({ name: 'ImageUpload', inheritAttrs: false });
 
-const props = withDefaults(
-  defineProps<{
-    // 根据后缀，或者其他
-    accept?: string[];
-    api?: (
-      file: File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    // 上传的目录
-    directory?: string;
-    disabled?: boolean;
-    helpText?: string;
-    listType?: UploadListType;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    resultField?: string;
-    // 是否显示下面的描述
-    showDescription?: boolean;
-    value?: string | string[];
-  }>(),
-  {
-    value: () => [],
-    directory: undefined,
-    disabled: false,
-    listType: 'picture-card',
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => defaultImageAccepts,
-    multiple: false,
-    api: undefined,
-    resultField: '',
-    showDescription: true,
-  },
-);
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  directory: undefined,
+  disabled: false,
+  listType: 'picture-card',
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => defaultImageAccepts,
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: true,
+});
 const emit = defineEmits(['change', 'update:value', 'delete']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
@@ -130,7 +102,7 @@ function getBase64<T extends ArrayBuffer | null | string>(file: File) {
   });
 }
 
-const handlePreview = async (file: UploadFile) => {
+async function handlePreview(file: UploadFile) {
   if (!file.url && !file.preview) {
     file.preview = await getBase64<string>(file.originFileObj!);
   }
@@ -141,9 +113,9 @@ const handlePreview = async (file: UploadFile) => {
     previewImage.value.slice(
       Math.max(0, previewImage.value.lastIndexOf('/') + 1),
     );
-};
+}
 
-const handleRemove = async (file: UploadFile) => {
+async function handleRemove(file: UploadFile) {
   if (fileList.value) {
     const index = fileList.value.findIndex((item) => item.uid === file.uid);
     index !== -1 && fileList.value.splice(index, 1);
@@ -153,14 +125,14 @@ const handleRemove = async (file: UploadFile) => {
     emit('change', value);
     emit('delete', file);
   }
-};
+}
 
-const handleCancel = () => {
+function handleCancel() {
   previewOpen.value = false;
   previewTitle.value = '';
-};
+}
 
-const beforeUpload = async (file: File) => {
+async function beforeUpload(file: File) {
   const { maxSize, accept } = props;
   const isAct = checkImgType(file, accept);
   if (!isAct) {
@@ -177,7 +149,7 @@ const beforeUpload = async (file: File) => {
     setTimeout(() => (isLtMsg.value = true), 1000);
   }
   return (isAct && !isLt) || Upload.LIST_IGNORE;
-};
+}
 
 async function customRequest(info: UploadRequestOption<any>) {
   let { api } = props;
diff --git a/apps/web-antd/src/components/upload/index.ts b/apps/web-antd/src/components/upload/index.ts
index a66b2fca..14e57fed 100644
--- a/apps/web-antd/src/components/upload/index.ts
+++ b/apps/web-antd/src/components/upload/index.ts
@@ -1,2 +1,3 @@
 export { default as FileUpload } from './file-upload.vue';
 export { default as ImageUpload } from './image-upload.vue';
+export { default as InputUpload } from './input-upload.vue';
diff --git a/apps/web-antd/src/components/upload/input-upload.vue b/apps/web-antd/src/components/upload/input-upload.vue
new file mode 100644
index 00000000..11ee4cf0
--- /dev/null
+++ b/apps/web-antd/src/components/upload/input-upload.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { InputProps, TextAreaProps } from 'ant-design-vue';
+
+import type { FileUploadProps } from './typing';
+
+import { computed, ref } from 'vue';
+
+import { Col, Input, Row, Textarea } from 'ant-design-vue';
+
+import FileUpload from './file-upload.vue';
+
+const props = defineProps<{
+  fileUploadProps?: FileUploadProps;
+  inputProps?: InputProps;
+  inputType?: 'input' | 'textarea';
+  textareaProps?: TextAreaProps;
+}>();
+
+const emit = defineEmits(['change', 'update:value']);
+
+const value = ref('');
+
+function handleReturnText(text: string) {
+  value.value = text;
+  emit('change', value.value);
+  emit('update:value', value.value);
+}
+
+const inputProps = computed(() => {
+  return {
+    ...props.inputProps,
+    value: value.value,
+  };
+});
+
+const textareaProps = computed(() => {
+  return {
+    ...props.textareaProps,
+    value: value.value,
+  };
+});
+
+const fileUploadProps = computed(() => {
+  return {
+    ...props.fileUploadProps,
+  };
+});
+</script>
+<template>
+  <Row>
+    <Col :span="18">
+      <Input v-if="inputType === 'input'" v-bind="inputProps" />
+      <Textarea v-else :row="4" v-bind="textareaProps" />
+    </Col>
+    <Col :span="6">
+      <FileUpload
+        class="ml-4"
+        v-bind="fileUploadProps"
+        @return-text="handleReturnText"
+      />
+    </Col>
+  </Row>
+</template>
diff --git a/apps/web-antd/src/components/upload/typing.ts b/apps/web-antd/src/components/upload/typing.ts
index a6b54d47..90134ff6 100644
--- a/apps/web-antd/src/components/upload/typing.ts
+++ b/apps/web-antd/src/components/upload/typing.ts
@@ -1,3 +1,7 @@
+import type { AxiosResponse } from '@vben/request';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
 export enum UploadResultStatus {
   DONE = 'done',
   ERROR = 'error',
@@ -6,3 +10,28 @@ export enum UploadResultStatus {
 }
 
 export type UploadListType = 'picture' | 'picture-card' | 'text';
+
+export interface FileUploadProps {
+  // 根据后缀，或者其他
+  accept?: string[];
+  api?: (
+    file: File,
+    onUploadProgress?: AxiosProgressEvent,
+  ) => Promise<AxiosResponse<any>>;
+  // 上传的目录
+  directory?: string;
+  disabled?: boolean;
+  helpText?: string;
+  listType?: UploadListType;
+  // 最大数量的文件，Infinity不限制
+  maxNumber?: number;
+  // 文件最大多少MB
+  maxSize?: number;
+  // 是否支持多选
+  multiple?: boolean;
+  // support xxx.xxx.xx
+  resultField?: string;
+  // 是否显示下面的描述
+  showDescription?: boolean;
+  value?: string | string[];
+}
diff --git a/apps/web-antd/src/components/upload/use-upload.ts b/apps/web-antd/src/components/upload/use-upload.ts
index 572ae5c4..3160585f 100644
--- a/apps/web-antd/src/components/upload/use-upload.ts
+++ b/apps/web-antd/src/components/upload/use-upload.ts
@@ -80,17 +80,17 @@ export function useUploadType({
 }
 
 // TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
-export const useUpload = (directory?: string) => {
+export function useUpload(directory?: string) {
   // 后端上传地址
   const uploadUrl = getUploadUrl();
   // 是否使用前端直连上传
   const isClientUpload =
     UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
   // 重写ElUpload上传方法
-  const httpRequest = async (
+  async function httpRequest(
     file: File,
     onUploadProgress?: AxiosProgressEvent,
-  ) => {
+  ) {
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -114,20 +114,20 @@ export const useUpload = (directory?: string) => {
       // 模式二：后端上传
       return uploadFile({ file, directory }, onUploadProgress);
     }
-  };
+  }
 
   return {
     uploadUrl,
     httpRequest,
   };
-};
+}
 
 /**
  * 获得上传 URL
  */
-export const getUploadUrl = (): string => {
+export function getUploadUrl(): string {
   return `${apiURL}/infra/file/upload`;
-};
+}
 
 /**
  * 创建文件信息
@@ -135,7 +135,10 @@ export const getUploadUrl = (): string => {
  * @param vo 文件预签名信息
  * @param file 文件
  */
-function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
+function createFile0(
+  vo: InfraFileApi.FilePresignedUrlRespVO,
+  file: File,
+): InfraFileApi.File {
   const fileVO = {
     configId: vo.configId,
     url: vo.url,
diff --git a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
index 105267b7..723e612c 100644
--- a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
@@ -30,6 +30,7 @@ interface DeptTreeNode {
   key: string;
   title: string;
   children?: DeptTreeNode[];
+  name: string;
 }
 
 defineOptions({ name: 'UserSelectModal' });
@@ -107,22 +108,26 @@ const transferDataSource = computed(() => {
 const filteredDeptTree = computed(() => {
   if (!deptSearchKeys.value) return deptTree.value;
 
-  const filterNode = (node: any): any => {
-    const title = node?.title?.toLowerCase();
+  const filterNode = (node: any, depth = 0): any => {
+    // 添加深度限制，防止过深的递归导致爆栈
+    if (depth > 100) return null;
+
+    // 按部门名称搜索
+    const name = node?.name?.toLowerCase();
     const search = deptSearchKeys.value.toLowerCase();
 
-    // 如果当前节点匹配
-    if (title.includes(search)) {
+    // 如果当前节点匹配，直接返回节点，不处理子节点
+    if (name?.includes(search)) {
       return {
         ...node,
-        children: node.children?.map((child: any) => filterNode(child)),
+        children: node.children,
       };
     }
 
     // 如果当前节点不匹配，检查子节点
     if (node.children) {
       const filteredChildren = node.children
-        .map((child: any) => filterNode(child))
+        .map((child: any) => filterNode(child, depth + 1))
         .filter(Boolean);
 
       if (filteredChildren.length > 0) {
@@ -397,6 +402,7 @@ const processDeptNode = (node: any): DeptTreeNode => {
   return {
     key: String(node.id),
     title: `${node.name} (${node.id})`,
+    name: node.name,
     children: node.children?.map((child: any) => processDeptNode(child)),
   };
 };
diff --git a/apps/web-antd/src/router/routes/modules/bpm.ts b/apps/web-antd/src/router/routes/modules/bpm.ts
index 215ab26a..8773271b 100644
--- a/apps/web-antd/src/router/routes/modules/bpm.ts
+++ b/apps/web-antd/src/router/routes/modules/bpm.ts
@@ -49,7 +49,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/bpm/manager/form/edit',
         name: 'BpmFormEditor',
-        component: () => import('#/views/bpm/form/editor.vue'),
+        component: () => import('#/views/bpm/form/designer/index.vue'),
         meta: {
           title: '编辑流程表单',
           activePath: '/bpm/manager/form',
diff --git a/apps/web-antd/src/utils/constants.ts b/apps/web-antd/src/utils/constants.ts
index affb6b1b..ed4f97a8 100644
--- a/apps/web-antd/src/utils/constants.ts
+++ b/apps/web-antd/src/utils/constants.ts
@@ -441,30 +441,6 @@ export const ErpBizType = {
 
 // ========== BPM 模块 ==========
 
-export const BpmModelType = {
-  BPMN: 10, // BPMN 设计器
-  SIMPLE: 20, // 简易设计器
-};
-
-export const BpmModelFormType = {
-  NORMAL: 10, // 流程表单
-  CUSTOM: 20, // 业务表单
-};
-
-export const BpmProcessInstanceStatus = {
-  NOT_START: -1, // 未开始
-  RUNNING: 1, // 审批中
-  APPROVE: 2, // 审批通过
-  REJECT: 3, // 审批不通过
-  CANCEL: 4, // 已取消
-};
-
-export const BpmAutoApproveType = {
-  NONE: 0, // 不自动通过
-  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
-  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
-};
-
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum BpmCandidateStrategyEnum {
   /**
@@ -594,6 +570,40 @@ export enum BpmNodeTypeEnum {
   USER_TASK_NODE = 11,
 }
 
+/**
+ *  流程任务操作按钮
+ */
+export enum BpmTaskOperationButtonTypeEnum {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
 /**
  * 任务状态枚举
  */
@@ -667,3 +677,51 @@ export enum BpmFieldPermissionType {
    */
   WRITE = '2',
 }
+
+/**
+ * 流程模型类型
+ */
+export const BpmModelType = {
+  BPMN: 10, // BPMN 设计器
+  SIMPLE: 20, // 简易设计器
+};
+
+/**
+ * 流程模型表单类型
+ */
+export const BpmModelFormType = {
+  NORMAL: 10, // 流程表单
+  CUSTOM: 20, // 业务表单
+};
+
+/**
+ * 流程实例状态
+ */
+export const BpmProcessInstanceStatus = {
+  NOT_START: -1, // 未开始
+  RUNNING: 1, // 审批中
+  APPROVE: 2, // 审批通过
+  REJECT: 3, // 审批不通过
+  CANCEL: 4, // 已取消
+};
+
+/**
+ * 自动审批类型
+ */
+export const BpmAutoApproveType = {
+  NONE: 0, // 不自动通过
+  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
+  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
+};
+
+/**
+ * 审批操作按钮名称
+ */
+export const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.TRANSFER, '转办');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.DELEGATE, '委派');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.ADD_SIGN, '加签');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.RETURN, '退回');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.COPY, '抄送');
diff --git a/apps/web-antd/src/utils/download.ts b/apps/web-antd/src/utils/download.ts
new file mode 100644
index 00000000..acb0129c
--- /dev/null
+++ b/apps/web-antd/src/utils/download.ts
@@ -0,0 +1,214 @@
+/**
+ * 下载工具模块
+ * 提供多种文件格式的下载功能
+ */
+
+/**
+ * 图片下载配置接口
+ */
+interface ImageDownloadOptions {
+  /** 图片 URL */
+  url: string;
+  /** 指定画布宽度 */
+  canvasWidth?: number;
+  /** 指定画布高度 */
+  canvasHeight?: number;
+  /** 将图片绘制在画布上时带上图片的宽高值，默认为 true */
+  drawWithImageSize?: boolean;
+}
+
+/**
+ * 基础文件下载函数
+ * @param data - 文件数据 Blob
+ * @param fileName - 文件名
+ * @param mimeType - MIME 类型
+ */
+export const download0 = (data: Blob, fileName: string, mimeType: string) => {
+  try {
+    // 创建 blob
+    const blob = new Blob([data], { type: mimeType });
+    // 创建 href 超链接，点击进行下载
+    window.URL = window.URL || window.webkitURL;
+    const href = URL.createObjectURL(blob);
+    const downA = document.createElement('a');
+    downA.href = href;
+    downA.download = fileName;
+    downA.click();
+    // 销毁超链接
+    window.URL.revokeObjectURL(href);
+  } catch (error) {
+    console.error('文件下载失败:', error);
+    throw new Error(
+      `文件下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
+    );
+  }
+};
+
+/**
+ * 触发文件下载的通用方法
+ * @param url - 下载链接
+ * @param fileName - 文件名
+ */
+const triggerDownload = (url: string, fileName: string) => {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
+};
+
+export const download = {
+  /**
+   * 下载 Excel 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  excel: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/vnd.ms-excel');
+  },
+
+  /**
+   * 下载 Word 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  word: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/msword');
+  },
+
+  /**
+   * 下载 Zip 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  zip: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/zip');
+  },
+
+  /**
+   * 下载 HTML 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  html: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/html');
+  },
+
+  /**
+   * 下载 Markdown 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  markdown: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/markdown');
+  },
+
+  /**
+   * 下载 JSON 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  json: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/json');
+  },
+
+  /**
+   * 下载图片（允许跨域）
+   * @param options - 图片下载配置
+   */
+  image: (options: ImageDownloadOptions) => {
+    const {
+      url,
+      canvasWidth,
+      canvasHeight,
+      drawWithImageSize = true,
+    } = options;
+
+    const image = new Image();
+    // image.setAttribute('crossOrigin', 'anonymous')
+    image.src = url;
+    image.addEventListener('load', () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasWidth || image.width;
+        canvas.height = canvasHeight || image.height;
+        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+        ctx?.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (drawWithImageSize) {
+          ctx.drawImage(image, 0, 0, image.width, image.height);
+        } else {
+          ctx.drawImage(image, 0, 0);
+        }
+
+        const dataUrl = canvas.toDataURL('image/png');
+        triggerDownload(dataUrl, 'image.png');
+      } catch (error) {
+        console.error('图片下载失败:', error);
+        throw new Error(
+          `图片下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
+        );
+      }
+    });
+
+    image.addEventListener('error', () => {
+      throw new Error('图片加载失败');
+    });
+  },
+
+  /**
+   * 将 Base64 字符串转换为文件对象
+   * @param base64 - Base64 字符串
+   * @param fileName - 文件名
+   * @returns File 对象
+   */
+  base64ToFile: (base64: string, fileName: string): File => {
+    // 输入验证
+    if (!base64 || typeof base64 !== 'string') {
+      throw new Error('base64 参数必须是非空字符串');
+    }
+
+    // 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
+    const data = base64.split(',');
+    if (data.length !== 2 || !data[0] || !data[1]) {
+      throw new Error('无效的 base64 格式');
+    }
+
+    // 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
+    const typeMatch = data[0].match(/:(.*?);/);
+    if (!typeMatch || !typeMatch[1]) {
+      throw new Error('无法解析 base64 类型信息');
+    }
+    const type = typeMatch[1];
+
+    // 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
+    const typeParts = type.split('/');
+    if (typeParts.length !== 2 || !typeParts[1]) {
+      throw new Error('无效的 MIME 类型格式');
+    }
+    const suffix = typeParts[1];
+
+    try {
+      // 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
+      const bstr = window.atob(data[1]);
+
+      // 获取解码结果字符串的长度
+      const n = bstr.length;
+      // 根据解码结果字符串的长度创建一个等长的整型数字数组
+      const u8arr = new Uint8Array(n);
+
+      // 优化的 Uint8Array 填充逻辑
+      for (let i = 0; i < n; i++) {
+        // 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
+        // eslint-disable-next-line unicorn/prefer-code-point
+        u8arr[i] = bstr.charCodeAt(i);
+      }
+
+      // 返回 File 文件对象
+      return new File([u8arr], `${fileName}.${suffix}`, { type });
+    } catch (error) {
+      throw new Error(
+        `Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
+      );
+    }
+  },
+};
diff --git a/apps/web-antd/src/utils/formCreate.ts b/apps/web-antd/src/utils/formCreate.ts
index 1129f63f..60264934 100644
--- a/apps/web-antd/src/utils/formCreate.ts
+++ b/apps/web-antd/src/utils/formCreate.ts
@@ -34,7 +34,7 @@ export const decodeFields = (fields: string[]) => {
 export const setConfAndFields = (
   designerRef: object,
   conf: string,
-  fields: string,
+  fields: string | string[],
 ) => {
   // @ts-ignore designerRef.value is dynamically added by form-create-designer
   designerRef.value.setOption(JSON.parse(conf));
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 022e6441..101e381e 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './dict';
+export * from './download';
 export * from './formatTime';
 export * from './formCreate';
 export * from './rangePickerProps';
diff --git a/apps/web-antd/src/views/bpm/category/index.vue b/apps/web-antd/src/views/bpm/category/index.vue
index da7d694e..8dd26b7c 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/form/data.ts b/apps/web-antd/src/views/bpm/form/data.ts
index a416dd26..be6bdb23 100644
--- 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: {
diff --git a/apps/web-antd/src/views/bpm/form/editor.vue b/apps/web-antd/src/views/bpm/form/designer/index.vue
similarity index 90%
rename from apps/web-antd/src/views/bpm/form/editor.vue
rename to apps/web-antd/src/views/bpm/form/designer/index.vue
index 1c374357..a594106e 100644
--- a/apps/web-antd/src/views/bpm/form/editor.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',
diff --git a/apps/web-antd/src/views/bpm/form/index.vue b/apps/web-antd/src/views/bpm/form/index.vue
index 451f8597..9181cf14 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/form/modules/form.vue b/apps/web-antd/src/views/bpm/form/modules/form.vue
index 46a35d86..6b69549b 100644
--- 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,
diff --git a/apps/web-antd/src/views/bpm/group/data.ts b/apps/web-antd/src/views/bpm/group/data.ts
index c18a4b40..34c0926f 100644
--- 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);
       },
     },
     {
diff --git a/apps/web-antd/src/views/bpm/group/index.vue b/apps/web-antd/src/views/bpm/group/index.vue
index c9c77b27..eadf24fe 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index c0b45af1..2c2f61fb 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -26,30 +26,14 @@ import {
 } from '#/api/bpm/model';
 import { getSimpleDeptList } from '#/api/system/dept';
 import { getSimpleUserList } from '#/api/system/user';
+import { BpmAutoApproveType, BpmModelFormType, BpmModelType } from '#/utils';
 
 import BasicInfo from './modules/basic-info.vue';
 import FormDesign from './modules/form-design.vue';
+import ProcessDesign from './modules/process-design.vue';
 
 defineOptions({ name: 'BpmModelCreate' });
 
-// TODO 这个常量是不是所有 apps 都可以使用， 放 @utils/constant.ts 不能共享， @芋艿 这些常量放哪里合适！
-// TODO @jason：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/utils/constants.ts；先不多个 apps 共享哈；
-const BpmModelType = {
-  BPMN: 10, // BPMN 设计器
-  SIMPLE: 20, // 简易设计器
-};
-
-const BpmModelFormType = {
-  NORMAL: 10, // 流程表单
-  CUSTOM: 20, // 业务表单
-};
-
-const BpmAutoApproveType = {
-  NONE: 0, // 不自动通过
-  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
-  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
-};
-
 // 流程定义类型
 type BpmProcessDefinitionType = Omit<
   BpmProcessDefinitionApi.ProcessDefinitionVO,
@@ -69,6 +53,8 @@ const userStore = useUserStore();
 const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
 // 表单设计组件引用
 const formDesignRef = ref<InstanceType<typeof FormDesign>>();
+// 流程设计组件引用
+const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
 
 /** 步骤校验函数 */
 const validateBasic = async () => {
@@ -82,7 +68,7 @@ const validateForm = async () => {
 
 /** 流程设计校验 */
 const validateProcess = async () => {
-  // TODO
+  await processDesignRef.value?.validate();
 };
 
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
@@ -102,7 +88,7 @@ const formData: any = ref({
   category: undefined,
   icon: undefined,
   description: '',
-  type: BpmModelType.BPMN,
+  type: BpmModelType.SIMPLE,
   formType: BpmModelFormType.NORMAL,
   formId: '',
   formCustomCreatePath: '',
@@ -190,7 +176,7 @@ const initData = async () => {
   } else {
     // 情况三：新增场景
     formData.value.startUserType = 0; // 全体
-    formData.value.managerUserIds.push(userStore.userInfo?.userId);
+    formData.value.managerUserIds.push(userStore.userInfo?.id);
   }
 
   // 获取表单列表
@@ -352,6 +338,7 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
+    console.warn('handleStepClick', index);
     if (index !== 0) {
       await validateBasic();
     }
@@ -401,7 +388,7 @@ onBeforeUnmount(() => {
   // 清理所有的引用
   basicInfoRef.value = undefined;
   formDesignRef.value = undefined;
-  // processDesignRef.value = null;
+  processDesignRef.value = undefined;
 });
 </script>
 
@@ -486,7 +473,7 @@ onBeforeUnmount(() => {
             />
           </div>
           <!-- 第二步：表单设计  -->
-          <div v-show="currentStep === 1" class="mx-auto w-4/6">
+          <div v-if="currentStep === 1" class="mx-auto w-4/6">
             <FormDesign
               v-model="formData"
               :form-list="formList"
@@ -494,10 +481,15 @@ onBeforeUnmount(() => {
             />
           </div>
 
-          <!-- 第三步：流程设计 TODO -->
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
 
           <!-- 第四步：更多设置 TODO -->
-          <div v-show="currentStep === 3" class="mx-auto w-4/6"></div>
+          <div v-if="currentStep === 3" class="mx-auto w-4/6"></div>
         </div>
       </Card>
     </div>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 2e246141..f31ad4d7 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -65,7 +65,6 @@ const rules: Record<string, Rule[]> = {
   category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  // TODO 这个的校验好像没有起作用
   managerUserIds: [
     { required: true, message: '流程管理员不能为空', trigger: 'blur' },
   ],
@@ -282,10 +281,12 @@ defineExpose({ validate });
     </Form.Item>
     <Form.Item label="流程类型" name="type" class="mb-5">
       <Radio.Group v-model:value="modelData.type">
+        <!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
         <Radio
           v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
           :key="dict.value"
           :value="dict.value"
+          :disabled="dict.value === 10"
         >
           {{ dict.label }}
         </Radio>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
new file mode 100644
index 00000000..f9fb0754
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { computed, inject, nextTick } from 'vue';
+
+import { BpmModelType } from '#/utils';
+
+// TODO BPM 流程模型设计器 BpmModelEditor 待整合
+import SimpleModelDesign from './simple-model-design.vue';
+
+// 创建本地数据副本
+const modelData = defineModel<any>();
+
+const processData = inject('processData') as Ref;
+
+/** 表单校验 */
+const validate = async () => {
+  // 获取最新的流程数据
+  if (!processData.value) {
+    throw new Error('请设计流程');
+  }
+  return true;
+};
+/** 处理设计器保存成功 */
+const handleDesignSuccess = async (data?: any) => {
+  if (data) {
+    // 创建新的对象以触发响应式更新
+    const newModelData = {
+      ...modelData.value,
+      bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
+      simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
+    };
+    // 使用emit更新父组件的数据
+    await nextTick();
+    // 更新表单的模型数据部分
+    modelData.value = newModelData;
+  }
+};
+
+/** 是否显示设计器 */
+const showDesigner = computed(() => {
+  return Boolean(modelData.value?.key && modelData.value?.name);
+});
+defineExpose({
+  validate,
+});
+</script>
+<template>
+  <div class="h-full">
+    <!-- BPMN设计器 -->
+    <template v-if="modelData.type === BpmModelType.BPMN">
+      <!-- TODO BPMN 流程设计器 -->
+    </template>
+    <!-- Simple设计器 -->
+    <template v-else>
+      <SimpleModelDesign
+        v-if="showDesigner"
+        :model-name="modelData.name"
+        :model-form-id="modelData.formId"
+        :model-form-type="modelData.formType"
+        :start-user-ids="modelData.startUserIds"
+        :start-dept-ids="modelData.startDeptIds"
+        @success="handleDesignSuccess"
+      />
+    </template>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
new file mode 100644
index 00000000..d503f2de
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { SimpleProcessDesigner } from '#/components/simple-process-design';
+
+defineOptions({ name: 'SimpleModelDesign' });
+
+defineProps<{
+  modelFormId?: number;
+  modelFormType?: number;
+  modelName?: string;
+  startDeptIds?: number[];
+  startUserIds?: number[];
+}>();
+
+const emit = defineEmits(['success']);
+const designerRef = ref();
+
+// 修改成功回调
+const handleSuccess = (data?: any) => {
+  if (data) {
+    emit('success', data);
+  }
+};
+</script>
+<template>
+  <ContentWrap :body-style="{ padding: '20px 16px' }">
+    <SimpleProcessDesigner
+      :model-form-id="modelFormId"
+      :model-name="modelName"
+      :model-form-type="modelFormType"
+      @success="handleSuccess"
+      :start-user-ids="startUserIds"
+      :start-dept-ids="startDeptIds"
+      ref="designerRef"
+    />
+  </ContentWrap>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index 64ef6646..32028843 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -162,7 +162,7 @@ const handleCategorySortSubmit = async () => {
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @jaosn：没头像的图标，展示文字头像哈 -->
+    <!-- TODO @jaosn：没头像的图标，展示文字头像哈 @芋艿 好像已经展示了文字头像。是模型列表中吗? -->
     <!-- 流程分类表单弹窗 -->
     <CategoryFormModal @success="getList" />
     <Card
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index 7b005fcf..2583fc86 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -54,35 +54,39 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
     align: 'left' as const,
-    minWidth: 250,
+    ellipsis: true,
+    width: 250,
   },
   {
     title: '可见范围',
     dataIndex: 'startUserIds',
     key: 'startUserIds',
     align: 'center' as const,
-    minWidth: 150,
+    ellipsis: true,
+    width: 150,
   },
   {
     title: '流程类型',
     dataIndex: 'type',
     key: 'type',
     align: 'center' as const,
-    minWidth: 120,
+    ellipsis: true,
+    width: 120,
   },
   {
     title: '表单信息',
     dataIndex: 'formType',
     key: 'formType',
     align: 'center' as const,
-    minWidth: 150,
+    ellipsis: true,
+    width: 150,
   },
   {
     title: '最后发布',
     dataIndex: 'deploymentTime',
     key: 'deploymentTime',
     align: 'center' as const,
-    minWidth: 250,
+    width: 250,
   },
   {
     title: '操作',
@@ -316,6 +320,7 @@ const handleRenameSuccess = () => {
           :columns="columns"
           :pagination="false"
           :custom-row="customRow"
+          :scroll="{ x: '100%' }"
           row-key="id"
         >
           <template #bodyCell="{ column, record }">
diff --git a/apps/web-antd/src/views/bpm/oa/leave/data.ts b/apps/web-antd/src/views/bpm/oa/leave/data.ts
index 69442dbb..0c404491 100644
--- 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',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/oa/leave/detail.vue b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
index be1701db..38a77298 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/processExpression/index.vue b/apps/web-antd/src/views/bpm/processExpression/index.vue
index 0e32548c..5dbd8326 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index a8ceeb35..08274b6b 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
index 0d1ef863..8f776f0e 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 5e34853c..487e1165 100644
--- 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>
diff --git 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
new file mode 100644
index 00000000..127caca6
--- /dev/null
+++ 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>
diff --git 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
new file mode 100644
index 00000000..f00c58ab
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -0,0 +1,1392 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+import { isEmpty } from '@vben/utils';
+
+import FormCreate from '@form-create/ant-design-vue';
+import {
+  Alert,
+  Button,
+  Card,
+  Form,
+  FormItem,
+  Image,
+  message,
+  Popover,
+  Select,
+  SelectOption,
+  Space,
+  Textarea,
+} from 'ant-design-vue';
+
+import {
+  cancelProcessInstanceByStartUser,
+  getNextApprovalNodes,
+} from '#/api/bpm/processInstance';
+import * as TaskApi from '#/api/bpm/task';
+import * as UserApi from '#/api/system/user';
+import {
+  BpmCandidateStrategyEnum,
+  BpmModelFormType,
+  BpmNodeTypeEnum,
+  BpmProcessInstanceStatus,
+  BpmTaskOperationButtonTypeEnum,
+  BpmTaskStatusEnum,
+  OPERATION_BUTTON_NAME,
+  setConfAndFields2,
+} from '#/utils';
+
+import Signature from './signature.vue';
+import ProcessInstanceTimeline from './time-line.vue';
+
+defineOptions({ name: 'ProcessInstanceBtnContainer' });
+
+// 定义 success 事件，用于操作成功后的回调
+
+const props = defineProps<{
+  normalForm: any; // 流程表单 formCreate
+  normalFormApi: any; // 流程表单 formCreate Api
+  processDefinition: any; // 流程定义信息
+  processInstance: any; // 流程实例信息
+  userOptions: UserApi.SystemUserApi.User[];
+  writableFields: string[]; // 流程表单可以编辑的字段
+}>(); // 当前登录的编号
+const emit = defineEmits(['success']);
+const router = useRouter(); // 路由
+const userStore = useUserStore();
+const userId = userStore.userInfo?.id;
+const formLoading = ref(false); // 表单加载中
+const popOverVisible: any = ref({
+  approve: false,
+  reject: false,
+  transfer: false,
+  delegate: false,
+  addSign: false,
+  return: false,
+  copy: false,
+  cancel: false,
+  deleteSign: false,
+}); // 气泡卡是否展示
+const returnList = ref([] as any); // 退回节点
+
+// ========== 审批信息 ==========
+const runningTask = ref<any>(); // 运行中的任务
+const approveForm = ref<any>({}); // 审批通过时，额外的补充信息
+const approveFormFApi = ref<any>({}); // approveForms 的 fAPi
+const nodeTypeName = ref('审批'); // 节点类型名称
+
+// 审批通过意见表单
+const reasonRequire = ref();
+const approveFormRef = ref<FormInstance>();
+const signRef = ref();
+const approveSignFormRef = ref();
+const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
+  [],
+); // 下一个审批节点信息
+const approveReasonForm: any = reactive({
+  reason: '',
+  signPicUrl: '',
+  nextAssignees: {},
+});
+const approveReasonRule: Record<string, any> = computed(() => {
+  return {
+    reason: [
+      {
+        required: reasonRequire.value,
+        message: `${nodeTypeName.value}意见不能为空`,
+        trigger: 'blur',
+      },
+    ],
+    signPicUrl: [
+      { required: true, message: '签名不能为空', trigger: 'change' },
+    ],
+    nextAssignees: [
+      { required: true, message: '审批人不能为空', trigger: 'blur' },
+    ],
+  };
+});
+
+// 拒绝表单
+const rejectFormRef = ref<FormInstance>();
+const rejectReasonForm = reactive({
+  reason: '',
+});
+const rejectReasonRule: any = computed(() => {
+  return {
+    reason: [
+      {
+        required: reasonRequire.value,
+        message: '审批意见不能为空',
+        trigger: 'blur',
+      },
+    ],
+  } as Record<string, Rule[]>;
+});
+
+// 抄送表单
+const copyFormRef = ref<FormInstance>();
+const copyForm = reactive({
+  copyUserIds: [],
+  copyReason: '',
+});
+const copyFormRule: Record<string, Rule[]> = reactive({
+  copyUserIds: [
+    { required: true, message: '抄送人不能为空', trigger: 'change' },
+  ],
+});
+
+// 转办表单
+const transferFormRef = ref<FormInstance>();
+const transferForm = reactive({
+  assigneeUserId: undefined,
+  reason: '',
+});
+const transferFormRule: Record<string, Rule[]> = reactive({
+  assigneeUserId: [
+    { required: true, message: '新审批人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 委派表单
+const delegateFormRef = ref<FormInstance>();
+const delegateForm = reactive({
+  delegateUserId: undefined,
+  reason: '',
+});
+const delegateFormRule: Record<string, Rule[]> = reactive({
+  delegateUserId: [
+    { required: true, message: '接收人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 加签表单
+const addSignFormRef = ref<FormInstance>();
+const addSignForm = reactive({
+  addSignUserIds: undefined,
+  reason: '',
+});
+const addSignFormRule: Record<string, Rule[]> = reactive({
+  addSignUserIds: [
+    { required: true, message: '加签处理人不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 减签表单
+const deleteSignFormRef = ref<FormInstance>();
+const deleteSignForm = reactive({
+  deleteSignTaskId: undefined,
+  reason: '',
+});
+const deleteSignFormRule: Record<string, Rule[]> = reactive({
+  deleteSignTaskId: [
+    { required: true, message: '减签人员不能为空', trigger: 'change' },
+  ],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+});
+
+// 退回表单
+const returnFormRef = ref<FormInstance>();
+const returnForm = reactive({
+  targetTaskDefinitionKey: undefined,
+  returnReason: '',
+});
+const returnFormRule: Record<string, Rule[]> = reactive({
+  targetTaskDefinitionKey: [
+    { required: true, message: '退回节点不能为空', trigger: 'change' },
+  ],
+  returnReason: [
+    { required: true, message: '退回理由不能为空', trigger: 'blur' },
+  ],
+});
+
+// 取消表单
+const cancelFormRef = ref<FormInstance>();
+
+const cancelForm = reactive({
+  cancelReason: '',
+});
+const cancelFormRule: Record<string, Rule[]> = reactive({
+  cancelReason: [
+    { required: true, message: '取消理由不能为空', trigger: 'blur' },
+  ],
+});
+
+/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
+watch(
+  () => approveFormFApi.value,
+  (val) => {
+    val?.btn?.show(false);
+    val?.resetBtn?.show(false);
+  },
+  {
+    deep: true,
+  },
+);
+
+/** 弹出气泡卡 */
+const openPopover = async (type: string) => {
+  if (type === 'approve') {
+    // 校验流程表单
+    const valid = await validateNormalForm();
+    if (!valid) {
+      message.warning('表单校验不通过，请先完善表单!!');
+      return;
+    }
+    initNextAssigneesFormField();
+  }
+  if (type === 'return') {
+    // 获取退回节点
+    returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id);
+    if (returnList.value.length === 0) {
+      message.warning('当前没有可退回的节点');
+      return;
+    }
+  }
+  Object.keys(popOverVisible.value).forEach((item) => {
+    if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
+  });
+  // await nextTick()
+  // formRef.value.resetFields()
+};
+
+/** 关闭气泡卡 */
+const closePopover = (type: string, formRef: any | FormInstance) => {
+  if (formRef) {
+    formRef.resetFields();
+  }
+  if (popOverVisible.value[type]) popOverVisible.value[type] = false;
+  nextAssigneesActivityNode.value = [];
+};
+
+/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
+const initNextAssigneesFormField = async () => {
+  // 获取修改的流程变量, 暂时只支持流程表单
+  const variables = getUpdatedProcessInstanceVariables();
+  const data = await getNextApprovalNodes({
+    processInstanceId: props.processInstance.id,
+    taskId: runningTask.value.id,
+    processVariablesStr: JSON.stringify(variables),
+  });
+  if (data && data.length > 0) {
+    data.forEach((node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+      if (
+        // 情况一：当前节点没有审批人，并且是发起人自选
+        (isEmpty(node.tasks) &&
+          isEmpty(node.candidateUsers) &&
+          BpmCandidateStrategyEnum.START_USER_SELECT ===
+            node.candidateStrategy) ||
+        // 情况二：当前节点是审批人自选
+        BpmCandidateStrategyEnum.APPROVE_USER_SELECT === node.candidateStrategy
+      ) {
+        nextAssigneesActivityNode.value.push(node);
+      }
+    });
+  }
+};
+
+/** 选择下一个节点的审批人 */
+const selectNextAssigneesConfirm = (id: string, userList: any[]) => {
+  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
+};
+/** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
+const validateNextAssignees = () => {
+  if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
+    return true;
+  }
+  // 如果需要自选审批人，则校验每个节点是否都已配置审批人
+  for (const item of nextAssigneesActivityNode.value) {
+    if (isEmpty(approveReasonForm.nextAssignees[item.id])) {
+      message.warning('下一个节点的审批人不能为空!');
+      return false;
+    }
+  }
+  return true;
+};
+
+/** 处理审批通过和不通过的操作 */
+const handleAudit = async (
+  pass: boolean,
+  formRef: FormInstance | undefined,
+) => {
+  formLoading.value = true;
+  try {
+    // 校验表单
+    if (!formRef) return;
+    await formRef?.validate();
+    // 校验流程表单必填字段
+    const valid = await validateNormalForm();
+    if (!valid) {
+      message.warning('表单校验不通过，请先完善表单!!');
+      return;
+    }
+
+    if (pass) {
+      const nextAssigneesValid = validateNextAssignees();
+      if (!nextAssigneesValid) return;
+      const variables = getUpdatedProcessInstanceVariables();
+      // 审批通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: approveReasonForm.reason,
+        variables, // 审批通过, 把修改的字段值赋于流程实例变量
+        nextAssignees: approveReasonForm.nextAssignees, // 下个自选节点选择的审批人信息
+      } as any;
+      // 签名
+      if (runningTask.value.signEnable) {
+        data.signPicUrl = approveReasonForm.signPicUrl;
+      }
+      // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+      // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
+      const formCreateApi = approveFormFApi.value;
+      if (Object.keys(formCreateApi)?.length > 0) {
+        await formCreateApi.validate();
+        // @ts-ignore
+        data.variables = approveForm.value.value;
+      }
+      await TaskApi.approveTask(data);
+      popOverVisible.value.approve = false;
+      nextAssigneesActivityNode.value = [];
+      message.success('审批通过成功');
+    } else {
+      // 审批不通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: rejectReasonForm.reason,
+      };
+      await TaskApi.rejectTask(data);
+      popOverVisible.value.reject = false;
+      message.success('审批不通过成功');
+    }
+    // 重置表单
+    formRef.resetFields();
+    // 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理抄送 */
+const handleCopy = async () => {
+  formLoading.value = true;
+  try {
+    // 1. 校验表单
+    if (!copyFormRef.value) return;
+    await copyFormRef.value.validate();
+    // 2. 提交抄送
+    const data = {
+      id: runningTask.value.id,
+      reason: copyForm.copyReason,
+      copyUserIds: copyForm.copyUserIds,
+    };
+    await TaskApi.copyTask(data);
+    copyFormRef.value.resetFields();
+    popOverVisible.value.copy = false;
+    message.success('操作成功');
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理转交 */
+const handleTransfer = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!transferFormRef.value) return;
+    await transferFormRef.value.validate();
+    // 1.2 提交转交
+    const data = {
+      id: runningTask.value.id,
+      reason: transferForm.reason,
+      assigneeUserId: transferForm.assigneeUserId,
+    };
+    await TaskApi.transferTask(data);
+    transferFormRef.value.resetFields();
+    popOverVisible.value.transfer = false;
+    message.success('操作成功');
+    // 2. 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理委派 */
+const handleDelegate = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!delegateFormRef.value) return;
+    await delegateFormRef.value.validate();
+    // 1.2 处理委派
+    const data = {
+      id: runningTask.value.id,
+      reason: delegateForm.reason,
+      delegateUserId: delegateForm.delegateUserId,
+    };
+
+    await TaskApi.delegateTask(data);
+    popOverVisible.value.delegate = false;
+    delegateFormRef.value.resetFields();
+    message.success('操作成功');
+    // 2. 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理加签 */
+const handlerAddSign = async (type: string) => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!addSignFormRef.value) return;
+    await addSignFormRef.value.validate();
+    // 1.2 提交加签
+    const data = {
+      id: runningTask.value.id,
+      type,
+      reason: addSignForm.reason,
+      userIds: addSignForm.addSignUserIds,
+    };
+    await TaskApi.signCreateTask(data);
+    message.success('操作成功');
+    addSignFormRef.value.resetFields();
+    popOverVisible.value.addSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理退回 */
+const handleReturn = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!returnFormRef.value) return;
+    await returnFormRef.value.validate();
+    // 1.2 提交退回
+    const data = {
+      id: runningTask.value.id,
+      reason: returnForm.returnReason,
+      targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey,
+    };
+
+    await TaskApi.returnTask(data);
+    popOverVisible.value.return = false;
+    returnFormRef.value.resetFields();
+    message.success('操作成功');
+    // 2 重新加载数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理取消 */
+const handleCancel = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!cancelFormRef.value) return;
+    await cancelFormRef.value.validate();
+    // 1.2 提交取消
+    await cancelProcessInstanceByStartUser(
+      props.processInstance.id,
+      cancelForm.cancelReason,
+    );
+    popOverVisible.value.return = false;
+    message.success('操作成功');
+    cancelFormRef.value.resetFields();
+    // 2 重新加载数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 处理再次提交 */
+const handleReCreate = async () => {
+  // 跳转发起流程界面
+  await router.push({
+    path: '/bpm/task/create',
+    query: { processInstanceId: props.processInstance?.id },
+  });
+  // router.push('/bpm/task/my');
+};
+
+/** 获取减签人员标签 */
+const getDeleteSignUserLabel = (task: any): string => {
+  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName;
+  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname;
+  return `${nickname} ( 所属部门：${deptName} )`;
+};
+/** 处理减签 */
+const handlerDeleteSign = async () => {
+  formLoading.value = true;
+  try {
+    // 1.1 校验表单
+    if (!deleteSignFormRef.value) return;
+    await deleteSignFormRef.value?.validate();
+    // 1.2 提交减签
+    const data = {
+      id: deleteSignForm.deleteSignTaskId,
+      reason: deleteSignForm.reason,
+    };
+    await TaskApi.signDeleteTask(data);
+    message.success('减签成功');
+    deleteSignFormRef.value.resetFields();
+    popOverVisible.value.deleteSign = false;
+    // 2 加载最新数据
+    reload();
+  } finally {
+    formLoading.value = false;
+  }
+};
+/** 重新加载数据 */
+const reload = () => {
+  emit('success');
+};
+
+/** 任务是否为处理中状态 */
+const isHandleTaskStatus = () => {
+  let canHandle = false;
+  if (BpmTaskStatusEnum.RUNNING === runningTask.value?.status) {
+    canHandle = true;
+  }
+  return canHandle;
+};
+
+/** 流程状态是否为结束状态 */
+const isEndProcessStatus = (status: number) => {
+  let isEndStatus = false;
+  if (
+    BpmProcessInstanceStatus.APPROVE === status ||
+    BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.CANCEL === status
+  ) {
+    isEndStatus = true;
+  }
+  return isEndStatus;
+};
+
+/** 是否显示按钮 */
+const isShowButton = (btnType: BpmTaskOperationButtonTypeEnum): boolean => {
+  let isShow = true;
+  if (
+    runningTask.value?.buttonsSetting &&
+    runningTask.value?.buttonsSetting[btnType]
+  ) {
+    isShow = runningTask.value.buttonsSetting[btnType].enable;
+  }
+  return isShow;
+};
+
+/** 获取按钮的显示名称 */
+const getButtonDisplayName = (btnType: BpmTaskOperationButtonTypeEnum) => {
+  let displayName = OPERATION_BUTTON_NAME.get(btnType);
+  if (
+    runningTask.value?.buttonsSetting &&
+    runningTask.value?.buttonsSetting[btnType]
+  ) {
+    displayName = runningTask.value.buttonsSetting[btnType].displayName;
+  }
+  return displayName;
+};
+
+const loadTodoTask = (task: any) => {
+  approveForm.value = {};
+  runningTask.value = task;
+  approveFormFApi.value = {};
+  reasonRequire.value = task?.reasonRequire ?? false;
+  nodeTypeName.value =
+    task?.nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ? '办理' : '审批';
+  // 处理 approve 表单.
+  if (task && task.formId && task.formConf) {
+    const tempApproveForm = {};
+    setConfAndFields2(
+      tempApproveForm,
+      task.formConf,
+      task.formFields,
+      task.formVariables,
+    );
+    approveForm.value = tempApproveForm;
+  } else {
+    approveForm.value = {}; // 占位，避免为空
+  }
+};
+
+/** 校验流程表单 */
+const validateNormalForm = async () => {
+  if (props.processDefinition?.formType === BpmModelFormType.NORMAL) {
+    let valid = true;
+    try {
+      await props.normalFormApi?.validate();
+    } catch {
+      valid = false;
+    }
+    return valid;
+  } else {
+    return true;
+  }
+};
+
+/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
+const getUpdatedProcessInstanceVariables = () => {
+  const variables: any = {};
+  props.writableFields.forEach((field: string) => {
+    if (field && variables[field])
+      variables[field] = props.normalFormApi.getValue(field);
+  });
+  return variables;
+};
+
+/** 处理签名完成 */
+const handleSignFinish = (url: string) => {
+  approveReasonForm.signPicUrl = url;
+  approveFormRef.value?.validateFields(['signPicUrl']);
+};
+
+/** 处理弹窗可见性 */
+const handlePopoverVisible = (visible: boolean) => {
+  if (!visible) {
+    // 拦截关闭事件
+    popOverVisible.value.approve = true;
+  }
+};
+
+defineExpose({ loadTodoTask });
+</script>
+<template>
+  <div class="flex items-center">
+    <!-- <div>是否处理中 {{ !!isHandleTaskStatus() }}</div> -->
+
+    <!-- 【通过】按钮 -->
+    <!-- z-index 设置为300 避免覆盖签名弹窗 -->
+    <Space size="middle">
+      <Popover
+        v-model:open="popOverVisible.approve"
+        placement="top"
+        :overlay-style="{ minWidth: '400px', zIndex: 300 }"
+        trigger="click"
+        @open-change="handlePopoverVisible"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.APPROVE)
+        "
+      >
+        <Button ghost type="primary" @click="openPopover('approve')">
+          <IconifyIcon icon="icon-park-outline:check" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE) }}
+        </Button>
+        <template #content>
+          <!-- 办理表单 -->
+          <div
+            class="flex flex-1 flex-col px-[20px] pt-[20px]"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="approveFormRef"
+              :model="approveReasonForm"
+              :rules="approveReasonRule"
+              label-width="100px"
+            >
+              <Card
+                v-if="runningTask?.formId > 0"
+                class="!-mt-[10px] mb-[15px]"
+              >
+                <template #title>
+                  <span class="el-icon-picture-outline">
+                    填写表单【{{ runningTask?.formName }}】
+                  </span>
+                </template>
+                <FormCreate
+                  v-model:value="approveForm.value"
+                  v-model:api="approveFormFApi"
+                  :option="approveForm.option"
+                  :rule="approveForm.rule"
+                />
+              </Card>
+
+              <FormItem
+                label="下一个节点的审批人"
+                name="nextAssignees"
+                v-if="nextAssigneesActivityNode.length > 0"
+              >
+                <div class="-mb-[35px] -mt-[15px] ml-[10px]">
+                  <ProcessInstanceTimeline
+                    :activity-nodes="nextAssigneesActivityNode"
+                    :show-status-icon="false"
+                    @select-user-confirm="selectNextAssigneesConfirm"
+                  />
+                </div>
+              </FormItem>
+              <FormItem
+                v-if="runningTask.signEnable"
+                label="签名"
+                name="signPicUrl"
+                ref="approveSignFormRef"
+              >
+                <Button @click="signRef.open()" type="primary">
+                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
+                </Button>
+
+                <div class="mt-2">
+                  <Image
+                    style="float: left; width: 326px; height: 150px"
+                    v-if="approveReasonForm.signPicUrl"
+                    :src="approveReasonForm.signPicUrl"
+                  />
+                </div>
+              </FormItem>
+
+              <FormItem :label="`${nodeTypeName}意见`" name="reason">
+                <Textarea
+                  v-model:value="approveReasonForm.reason"
+                  :placeholder="`请输入${nodeTypeName}意见`"
+                  :rows="4"
+                />
+              </FormItem>
+
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleAudit(true, approveFormRef)"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.APPROVE,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('approve', approveFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【拒绝】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.reject"
+        placement="top"
+        :overlay-style="{ minWidth: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.REJECT)
+        "
+      >
+        <Button ghost danger type="primary" @click="openPopover('reject')">
+          <IconifyIcon icon="icon-park-outline:close" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT) }}
+        </Button>
+        <template #content>
+          <!-- 审批表单 -->
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="rejectFormRef"
+              :model="rejectReasonForm"
+              :rules="rejectReasonRule"
+              label-width="100px"
+            >
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="rejectReasonForm.reason"
+                  placeholder="请输入审批意见"
+                  :rows="4"
+                />
+              </FormItem>
+              <FormItem>
+                <Button
+                  :disabled="formLoading"
+                  danger
+                  type="primary"
+                  @click="handleAudit(false, rejectFormRef)"
+                >
+                  {{
+                    getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT)
+                  }}
+                </Button>
+                <Button
+                  class="ml-2"
+                  @click="closePopover('reject', rejectFormRef)"
+                >
+                  取消
+                </Button>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【抄送】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.copy"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.COPY)
+        "
+      >
+        <Button type="dashed" @click="openPopover('copy')">
+          <IconifyIcon icon="icon-park-outline:copy" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="copyFormRef"
+              :model="copyForm"
+              :rules="copyFormRule"
+              label-width="100px"
+            >
+              <FormItem label="抄送人" name="copyUserIds">
+                <Select
+                  v-model:value="copyForm.copyUserIds"
+                  :allow-clear="true"
+                  style="width: 100%"
+                  mode="multiple"
+                  placeholder="请选择抄送人"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="抄送意见" name="copyReason">
+                <Textarea
+                  v-model:value="copyForm.copyReason"
+                  placeholder="请输入抄送意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleCopy"
+                  >
+                    {{
+                      getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY)
+                    }}
+                  </Button>
+                  <Button @click="closePopover('copy', copyFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【转办】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.transfer"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.TRANSFER)
+        "
+      >
+        <Button type="dashed" @click="openPopover('transfer')">
+          <IconifyIcon icon="icon-park-outline:share-two" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.TRANSFER) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="transferFormRef"
+              :model="transferForm"
+              :rules="transferFormRule"
+              label-width="100px"
+            >
+              <FormItem label="新审批人" name="assigneeUserId">
+                <Select
+                  v-model:value="transferForm.assigneeUserId"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="transferForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleTransfer()"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.TRANSFER,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('transfer', transferFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【委派】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.delegate"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.DELEGATE)
+        "
+      >
+        <Button type="dashed" @click="openPopover('delegate')">
+          <IconifyIcon :size="14" icon="icon-park-outline:user-positioning" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="delegateFormRef"
+              :model="delegateForm"
+              :rules="delegateFormRule"
+              label-width="100px"
+            >
+              <FormItem label="接收人" name="delegateUserId">
+                <Select
+                  v-model:value="delegateForm.delegateUserId"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="delegateForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleDelegate()"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.DELEGATE,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('delegate', delegateFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+      <Popover
+        v-model:open="popOverVisible.addSign"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+        "
+      >
+        <Button type="dashed" @click="openPopover('addSign')">
+          <IconifyIcon :size="14" icon="icon-park-outline:plus" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="addSignFormRef"
+              :model="addSignForm"
+              :rules="addSignFormRule"
+              label-width="100px"
+            >
+              <FormItem label="加签处理人" name="addSignUserIds">
+                <Select
+                  v-model:value="addSignForm.addSignUserIds"
+                  :allow-clear="true"
+                  mode="multiple"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.nickname"
+                    :value="item.id"
+                  >
+                    {{ item.nickname }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="addSignForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handlerAddSign('before')"
+                  >
+                    向前{{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.ADD_SIGN,
+                      )
+                    }}
+                  </Button>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handlerAddSign('after')"
+                  >
+                    向后{{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.ADD_SIGN,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('addSign', addSignFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【减签】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.deleteSign"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="runningTask?.children.length > 0"
+      >
+        <Button type="dashed" @click="openPopover('deleteSign')">
+          <IconifyIcon :size="14" icon="icon-park-outline:minus" /> 减签
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="deleteSignFormRef"
+              :model="deleteSignForm"
+              :rules="deleteSignFormRule"
+              label-width="100px"
+            >
+              <FormItem label="减签人员" name="deleteSignTaskId">
+                <Select
+                  v-model:value="deleteSignForm.deleteSignTaskId"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in runningTask.children"
+                    :key="item.id"
+                    :label="getDeleteSignUserLabel(item)"
+                    :value="item.id"
+                  >
+                    {{ getDeleteSignUserLabel(item) }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="审批意见" name="reason">
+                <Textarea
+                  v-model:value="deleteSignForm.reason"
+                  clearable
+                  placeholder="请输入审批意见"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handlerDeleteSign()"
+                  >
+                    减签
+                  </Button>
+                  <Button
+                    @click="closePopover('deleteSign', deleteSignFormRef)"
+                  >
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!-- 【退回】按钮 -->
+      <Popover
+        v-model:open="popOverVisible.return"
+        placement="top"
+        :overlay-style="{ width: '400px' }"
+        trigger="click"
+        v-if="
+          runningTask &&
+          isHandleTaskStatus() &&
+          isShowButton(BpmTaskOperationButtonTypeEnum.RETURN)
+        "
+      >
+        <Button type="dashed" @click="openPopover('return')">
+          <IconifyIcon :size="14" icon="ep:back" />
+          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN) }}
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="returnFormRef"
+              :model="returnForm"
+              :rules="returnFormRule"
+              label-width="100px"
+            >
+              <FormItem label="退回节点" name="targetTaskDefinitionKey">
+                <Select
+                  v-model:value="returnForm.targetTaskDefinitionKey"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <SelectOption
+                    v-for="item in returnList"
+                    :key="item.taskDefinitionKey"
+                    :label="item.name"
+                    :value="item.taskDefinitionKey"
+                  >
+                    {{ item.name }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+              <FormItem label="退回理由" name="returnReason">
+                <Textarea
+                  v-model:value="returnForm.returnReason"
+                  clearable
+                  placeholder="请输入退回理由"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem>
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleReturn()"
+                  >
+                    {{
+                      getButtonDisplayName(
+                        BpmTaskOperationButtonTypeEnum.RETURN,
+                      )
+                    }}
+                  </Button>
+                  <Button @click="closePopover('return', returnFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+
+      <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+      <Popover
+        v-model:open="popOverVisible.cancel"
+        placement="top"
+        :width="500"
+        trigger="click"
+        v-if="
+          userId === processInstance?.startUser?.id &&
+          !isEndProcessStatus(processInstance?.status)
+        "
+      >
+        <Button type="dashed" @click="openPopover('cancel')">
+          <IconifyIcon :size="14" icon="icon-park-outline:back" />
+          取消
+        </Button>
+        <template #content>
+          <div
+            class="pt-20px px-20px flex w-[400px] flex-1 flex-col"
+            v-loading="formLoading"
+          >
+            <Form
+              layout="vertical"
+              class="mb-auto"
+              ref="cancelFormRef"
+              :model="cancelForm"
+              :rules="cancelFormRule"
+              label-width="100px"
+            >
+              <FormItem label="取消理由" name="cancelReason">
+                <Alert
+                  class="text-12px mb-2"
+                  type="warning"
+                  size="small"
+                  show-icon
+                  message="友情提醒：取消后，该审批流程将自动结束。"
+                />
+                <Textarea
+                  v-model:value="cancelForm.cancelReason"
+                  clearable
+                  placeholder="请输入取消理由"
+                  :rows="3"
+                />
+              </FormItem>
+              <FormItem :wrapper-col="{ span: 18, offset: 0 }">
+                <Space>
+                  <Button
+                    :disabled="formLoading"
+                    type="primary"
+                    @click="handleCancel()"
+                  >
+                    确认
+                  </Button>
+
+                  <Button @click="closePopover('cancel', cancelFormRef)">
+                    取消
+                  </Button>
+                </Space>
+              </FormItem>
+            </Form>
+          </div>
+        </template>
+      </Popover>
+      <!-- 【再次提交】 按钮-->
+      <Button
+        type="dashed"
+        @click="handleReCreate()"
+        v-if="
+          userId === processInstance?.startUser?.id &&
+          isEndProcessStatus(processInstance?.status) &&
+          processDefinition?.formType === 10
+        "
+      >
+        <IconifyIcon :size="14" icon="icon-park-outline:refresh" /> 再次提交
+      </Button>
+    </Space>
+  </div>
+
+  <!-- 签名弹窗 -->
+  <Signature ref="signRef" @success="handleSignFinish" />
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
new file mode 100644
index 00000000..6eff26be
--- /dev/null
+++ 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>
diff --git 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
new file mode 100644
index 00000000..5f1c9bb3
--- /dev/null
+++ 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>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
new file mode 100644
index 00000000..7a1e44ad
--- /dev/null
+++ 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>
diff --git 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
index 408e6acb..23b3aa21 100644
--- 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' },
   // 审批通过
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
index 576cc2ec..61e884b0 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/processListener/index.vue b/apps/web-antd/src/views/bpm/processListener/index.vue
index 9422c038..694797ca 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/task/copy/index.vue b/apps/web-antd/src/views/bpm/task/copy/index.vue
index 05aa4686..41f4b3fa 100644
--- 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="抄送任务">
diff --git a/apps/web-antd/src/views/bpm/task/done/data.ts b/apps/web-antd/src/views/bpm/task/done/data.ts
index ec229381..f69ceee2 100644
--- 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',
     },
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index 737281d7..644933ed 100644
--- 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 }">
diff --git a/apps/web-antd/src/views/bpm/task/manager/data.ts b/apps/web-antd/src/views/bpm/task/manager/data.ts
index b28be2d0..d06b6dc8 100644
--- 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: '发起人',
diff --git a/apps/web-antd/src/views/bpm/task/manager/index.vue b/apps/web-antd/src/views/bpm/task/manager/index.vue
index 2f678d16..926cc62b 100644
--- 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>
diff --git a/apps/web-antd/src/views/bpm/task/todo/data.ts b/apps/web-antd/src/views/bpm/task/todo/data.ts
index de82f8ce..14d688a8 100644
--- 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}`,
+              ),
+            );
+          });
+        },
       },
     },
     {
diff --git a/apps/web-antd/src/views/bpm/task/todo/index.vue b/apps/web-antd/src/views/bpm/task/todo/index.vue
index edcc32cd..ef77932f 100644
--- 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>
diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
index 6606f801..b56566f1 100644
--- a/apps/web-antd/src/views/crm/backlog/data.ts
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -307,7 +307,7 @@ export function useContractColumns<T = CrmContractApi.Contract>(
       field: 'price',
       title: '合同金额（元）',
       minWidth: 120,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'orderDate',
@@ -349,13 +349,13 @@ export function useContractColumns<T = CrmContractApi.Contract>(
       field: 'totalReceivablePrice',
       title: '已回款金额（元）',
       minWidth: 140,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'noReceivablePrice',
       title: '未回款金额（元）',
       minWidth: 120,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'contactLastTime',
@@ -670,7 +670,7 @@ export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
       field: 'price',
       title: '回款金额(元)',
       minWidth: 140,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'returnType',
@@ -690,7 +690,7 @@ export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
       field: 'contract.totalPrice',
       title: '合同金额（元）',
       minWidth: 140,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'ownerUserName',
@@ -801,7 +801,7 @@ export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
       field: 'price',
       title: '计划回款金额（元）',
       minWidth: 120,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'returnTime',
@@ -844,7 +844,7 @@ export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
       field: 'receivable.price',
       title: '实际回款金额（元）',
       minWidth: 160,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'receivable.returnTime',
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index a010beda..4906fed7 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -118,7 +118,7 @@ export function useGridColumns<T = CrmBusinessApi.Business>(
       field: 'totalPrice',
       title: '商机金额（元）',
       minWidth: 140,
-      formatter: 'formatAmount',
+      formatter: 'formatNumber',
     },
     {
       field: 'dealTime',
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index dcc83ba0..5063e408 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -1,223 +1,242 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
 
+import { CommonStatusEnum } from '#/utils/constants';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
-export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'name',
-    label: '应用名',
-    componentProps: {
-      placeholder: '请输入应用名',
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '应用名',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
     },
-  },
-  {
-    component: 'Select',
-    fieldName: 'status',
-    label: '开启状态',
-    componentProps: {
-      placeholder: '请选择开启状态',
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '开启状态',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
     },
-  },
-  {
-    component: 'RangePicker',
-    fieldName: 'createTime',
-    label: '创建时间',
-    componentProps: {
-      placeholder: ['开始日期', '结束日期'],
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
     },
-  },
-];
+  ];
+}
 
-export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
-  {
-    title: '应用标识',
-    field: 'appKey',
-  },
-  {
-    title: '应用名',
-    field: 'name',
-  },
-  {
-    title: '开启状态',
-    field: 'status',
-    slots: {
-      default: 'status',
+export function useGridColumns<T = PayAppApi.App>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '应用标识',
+      field: 'appKey',
     },
-  },
-  {
-    title: '支付宝配置',
-    children: [
-      {
-        title: 'APP 支付',
-        slots: {
-          default: 'alipayAppConfig',
+    {
+      title: '应用名',
+      field: 'name',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
         },
       },
-      {
-        title: 'PC 网站支付',
-        slots: {
-          default: 'alipayPCConfig',
-        },
-      },
-      {
-        title: 'WAP 网站支付',
-        slots: {
-          default: 'alipayWAPConfig',
-        },
-      },
-      {
-        title: '扫码支付',
-        slots: {
-          default: 'alipayQrConfig',
-        },
-      },
-      {
-        title: '条码支付',
-        slots: {
-          default: 'alipayBarConfig',
-        },
-      },
-    ],
-  },
-  {
-    title: '微信配置',
-    children: [
-      {
-        title: '小程序支付',
-        slots: {
-          default: 'wxLiteConfig',
-        },
-      },
-      {
-        title: 'JSAPI 支付',
-        slots: {
-          default: 'wxPubConfig',
-        },
-      },
-      {
-        title: 'APP 支付',
-        slots: {
-          default: 'wxAppConfig',
-        },
-      },
-      {
-        title: 'Native 支付',
-        slots: {
-          default: 'wxNativeConfig',
-        },
-      },
-      {
-        title: 'WAP 网站支付',
-        slots: {
-          default: 'wxWapConfig',
-        },
-      },
-      {
-        title: '条码支付',
-        slots: {
-          default: 'wxBarConfig',
-        },
-      },
-    ],
-  },
-  {
-    title: '钱包支付配置',
-    field: 'walletConfig',
-    slots: {
-      default: 'walletConfig',
     },
-  },
-  {
-    title: '模拟支付配置',
-    field: 'mockConfig',
-    slots: {
-      default: 'mockConfig',
+    {
+      title: '支付宝配置',
+      children: [
+        {
+          title: 'APP 支付',
+          slots: {
+            default: 'alipayAppConfig',
+          },
+        },
+        {
+          title: 'PC 网站支付',
+          slots: {
+            default: 'alipayPCConfig',
+          },
+        },
+        {
+          title: 'WAP 网站支付',
+          slots: {
+            default: 'alipayWAPConfig',
+          },
+        },
+        {
+          title: '扫码支付',
+          slots: {
+            default: 'alipayQrConfig',
+          },
+        },
+        {
+          title: '条码支付',
+          slots: {
+            default: 'alipayBarConfig',
+          },
+        },
+      ],
     },
-  },
-  {
-    field: 'action',
-    fixed: 'right',
-    slots: { default: 'action' },
-    title: '操作',
-    minWidth: 160,
-  },
-];
-
-export const modalSchema: FormSchemaGetter = () => [
-  {
-    label: '应用编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
+    {
+      title: '微信配置',
+      children: [
+        {
+          title: '小程序支付',
+          slots: {
+            default: 'wxLiteConfig',
+          },
+        },
+        {
+          title: 'JSAPI 支付',
+          slots: {
+            default: 'wxPubConfig',
+          },
+        },
+        {
+          title: 'APP 支付',
+          slots: {
+            default: 'wxAppConfig',
+          },
+        },
+        {
+          title: 'Native 支付',
+          slots: {
+            default: 'wxNativeConfig',
+          },
+        },
+        {
+          title: 'WAP 网站支付',
+          slots: {
+            default: 'wxWapConfig',
+          },
+        },
+        {
+          title: '条码支付',
+          slots: {
+            default: 'wxBarConfig',
+          },
+        },
+      ],
     },
-  },
-  {
-    label: '应用名',
-    fieldName: 'name',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用名',
+    {
+      title: '钱包支付配置',
+      field: 'walletConfig',
+      slots: {
+        default: 'walletConfig',
+      },
     },
-  },
-  {
-    label: '应用标识',
-    fieldName: 'appKey',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用标识',
+    {
+      title: '模拟支付配置',
+      field: 'mockConfig',
+      slots: {
+        default: 'mockConfig',
+      },
     },
-  },
-  {
-    label: '开启状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
     },
-  },
-  {
-    label: '支付结果的回调地址',
-    fieldName: 'orderNotifyUrl',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付结果的回调地址',
+  ];
+}
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      label: '应用编号',
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
     },
-  },
-  {
-    label: '退款结果的回调地址',
-    fieldName: 'refundNotifyUrl',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付结果的回调地址',
+    {
+      label: '应用名',
+      fieldName: 'name',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
     },
-  },
-  {
-    label: '转账结果的回调地址',
-    fieldName: 'transferNotifyUrl',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入转账结果的回调地址',
+    {
+      label: '应用标识',
+      fieldName: 'appKey',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入应用标识',
+      },
     },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
+    {
+      label: '开启状态',
+      fieldName: 'status',
+      component: 'RadioGroup',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
     },
-  },
-];
+    {
+      label: '支付结果的回调地址',
+      fieldName: 'orderNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      label: '退款结果的回调地址',
+      fieldName: 'refundNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入支付结果的回调地址',
+      },
+    },
+    {
+      label: '转账结果的回调地址',
+      fieldName: 'transferNotifyUrl',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入转账结果的回调地址',
+      },
+    },
+    {
+      label: '备注',
+      fieldName: 'remark',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 08cfc1b3..df349c1b 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -1,118 +1,90 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
 
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
-import { h, reactive } from 'vue';
+import { message } from 'ant-design-vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
-
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import { Button, Popconfirm, Space, Switch } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as PayApi from '#/api/pay/app';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app';
 import { DocAlert } from '#/components/doc-alert';
-import { PayChannelEnum } from '#/utils/constants';
+import { $t } from '#/locales';
+import { CommonStatusEnum, PayChannelEnum } from '#/utils/constants';
 
-import { columns, querySchema } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
 import appFrom from './modules/app-form.vue';
-import aliPayFrom from './modules/channel/alipay-channel-form.vue';
-import mockFrom from './modules/channel/mock-channel-form.vue';
-import walletFrom from './modules/channel/wallet-channel-form.vue';
-import weixinFrom from './modules/channel/weixin-channel-form.vue';
+import channelFrom from './modules/channel-form.vue';
 
-const formOptions: VbenFormProps = {
-  commonConfig: {
-    labelWidth: 100,
-    componentProps: {
-      allowClear: true,
-    },
-  },
-  schema: querySchema(),
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
-};
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
 
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    // trigger: 'row',
-  },
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues = {}) => {
-        return await PayApi.getAppPage({
-          pageNum: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
-      },
-    },
-  },
-  rowConfig: {
-    keyField: 'id',
-  },
-  // 表格全局唯一表示 保存列配置需要用到
-  id: 'pay-app-index',
-};
-
-const [BasicTable, tableApi] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
-});
-
-const [AppModal, modalApi] = useVbenModal({
+const [AppModal, appModalApi] = useVbenModal({
   connectedComponent: appFrom,
+  destroyOnClose: true,
 });
 
-const [AliPayModal, modalAliPayApi] = useVbenModal({
-  connectedComponent: aliPayFrom,
+const [ChannelModal, channelModalApi] = useVbenModal({
+  connectedComponent: channelFrom,
+  destroyOnClose: true,
 });
 
-const [MockModal, modalMockApi] = useVbenModal({
-  connectedComponent: mockFrom,
-});
+function handleCreate() {
+  appModalApi.setData(null).open();
+}
 
-const [WalletModal, modalWalletApi] = useVbenModal({
-  connectedComponent: walletFrom,
-});
+function handleEdit(row: Required<PayAppApi.App>) {
+  appModalApi.setData({ id: row.id }).open();
+}
 
-const [WeixinModal, modalWeixinApi] = useVbenModal({
-  connectedComponent: weixinFrom,
-});
+async function handleDelete(row: Required<PayAppApi.App>) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteApp(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
 
-const handleAdd = () => {
-  modalApi.setData({});
-  modalApi.open();
-};
-
-const handleEdit = (row: Required<PayApi.PayAppApi.App>) => {
-  modalApi.setData({ id: row.id });
-  modalApi.open();
-};
-
-const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
-  await PayApi.deleteApp(row.id);
-  tableApi.query();
-};
+/** 更新状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: PayAppApi.App,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用';
+    confirm({
+      content: `确认要${text + row.name}应用吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await changeAppStatus({
+          id: row.id as number,
+          status: newStatus,
+        });
+        if (res) {
+          // 提示并返回成功
+          message.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
 
 /**
  * 根据渠道编码判断渠道列表中是否存在
@@ -120,379 +92,549 @@ const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
  * @param channels 渠道列表
  * @param channelCode 渠道编码
  */
-const isChannelExists = (channels: string[], channelCode: string) => {
+function isChannelExists(channels: string[], channelCode: string) {
   if (!channels) {
     return false;
   }
   return channels.includes(channelCode);
-};
+}
 
-const channelParam = reactive({
-  appId: 0, // 应用 ID
-  payCode: '', // 渠道编码
+async function openChannelForm(row: PayAppApi.App, payCode: string) {
+  channelModalApi.setData({ id: row.id || 0, payCode }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAppPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayAppApi.App>,
 });
-
-const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
-  channelParam.appId = row.id || 0;
-  channelParam.payCode = payCode;
-  if (payCode.indexOf('alipay_') === 0) {
-    modalAliPayApi.setData({ id: row.id, payCode });
-    modalAliPayApi.open();
-    return;
-  }
-  if (payCode.indexOf('wx_') === 0) {
-    modalWeixinApi.setData({ id: row.id, payCode });
-    modalWeixinApi.open();
-    return;
-  }
-  if (payCode.indexOf('mock') === 0) {
-    modalMockApi.setData({ id: row.id, payCode });
-    modalMockApi.open();
-    return;
-  }
-  if (payCode.indexOf('wallet') === 0) {
-    modalWalletApi.setData({ id: row.id, payCode });
-    modalWalletApi.open();
-  }
-};
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
-    <BasicTable>
+    <template #doc>
+      <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
+    </template>
+
+    <AppModal @reload="onRefresh" />
+    <ChannelModal @reload="onRefresh" />
+
+    <Grid>
       <template #toolbar-tools>
-        <Space>
-          <a-button
-            type="primary"
-            v-access:code="['pay:app:create']"
-            @click="handleAdd"
-          >
-            {{ $t('ui.actionTitle.create', ['应用']) }}
-          </a-button>
-        </Space>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['应用']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['pay:app:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
       </template>
-      <template #action="{ row }">
-        <Space>
-          <Button
-            v-access:code="['pay:app:update']"
-            type="link"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('ui.actionTitle.edit') }}
-          </Button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            v-access:code="['pay:app:delete']"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <Button type="link" danger>
-              {{ $t('ui.actionTitle.delete') }}
-            </Button>
-          </Popconfirm>
-        </Space>
-      </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['pay:app:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['pay:app:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
         />
       </template>
       <template #alipayAppConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
-          />
-          <Button
-            v-else
-            size="small"
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_APP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayPCConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_PC.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayWAPConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_WAP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayQrConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_QR.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #alipayBarConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.ALIPAY_BAR.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxLiteConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_LITE.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_LITE.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxPubConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_PUB.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_PUB.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxAppConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_APP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_APP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxNativeConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="
-              isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
-            "
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_NATIVE.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxWapConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_WAP.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_WAP.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #wxBarConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_BAR.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WX_BAR.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #walletConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WALLET.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.WALLET.code,
+              ),
+            },
+          ]"
+        />
       </template>
       <template #mockConfig="{ row }">
-        <div>
-          <Button
-            size="small"
-            v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
-            type="primary"
-            :icon="h(CheckOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
-          />
-          <Button
-            size="small"
-            v-else
-            type="primary"
-            danger
-            :icon="h(CloseOutlined)"
-            shape="circle"
-            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
-          />
-        </div>
+        <TableAction
+          :actions="[
+            {
+              type: 'primary',
+              icon: 'lucide:check',
+              shape: 'circle',
+              ifShow: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.MOCK.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.MOCK.code,
+              ),
+            },
+            {
+              type: 'primary',
+              danger: true,
+              icon: 'lucide:x',
+              shape: 'circle',
+              ifShow: !isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.MOCK.code,
+              ),
+              onClick: openChannelForm.bind(
+                null,
+                row,
+                PayChannelEnum.MOCK.code,
+              ),
+            },
+          ]"
+        />
       </template>
-    </BasicTable>
-    <AppModal @reload="tableApi.query()" />
-    <AliPayModal @reload="tableApi.query()" />
-    <MockModal @reload="tableApi.query()" />
-    <WalletModal @reload="tableApi.query()" />
-    <WeixinModal @reload="tableApi.query()" />
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/app-form.vue b/apps/web-antd/src/views/pay/app/modules/app-form.vue
index 3791d15a..9f34bc7a 100644
--- a/apps/web-antd/src/views/pay/app/modules/app-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/app-form.vue
@@ -1,90 +1,83 @@
 <script lang="ts" setup>
+import type { PayAppApi } from '#/api/pay/app';
+
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as PayApi from '#/api/pay/app';
+import { createApp, getApp, updateApp } from '#/api/pay/app';
 
-import { modalSchema } from '../data';
+import { useFormSchema } from '../data';
 
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
+const emit = defineEmits(['success']);
+const formData = ref<PayAppApi.App>();
 const title = computed(() => {
-  return isUpdate.value
+  return formData.value?.id
     ? $t('ui.actionTitle.edit', '应用')
     : $t('ui.actionTitle.create', '应用');
 });
 
-const [BasicForm, formApi] = useVbenForm({
+const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
   },
-  schema: modalSchema(),
+  layout: 'horizontal',
+  schema: useFormSchema(),
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as {
-      id?: number;
-    };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await PayApi.getApp(id);
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
-    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayAppApi.App;
+    try {
+      await (formData.value?.id ? updateApp(data) : createApp(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    if (!id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApp(id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
+  <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <Form />
+  </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
similarity index 58%
rename from apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
rename to apps/web-antd/src/views/pay/app/modules/channel-form.vue
index a188ce67..87177087 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
@@ -1,104 +1,96 @@
 <script lang="ts" setup>
+import type { PayChannelApi } from '#/api/pay/channel';
+
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
 
-import { Row, Space, Textarea } from 'ant-design-vue';
+import { message, Row, Space, Textarea } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
+import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
 import { FileUpload } from '#/components/upload';
 
-import { modalAliPaySchema } from './data';
+import { channelSchema } from './data';
 
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
+const emit = defineEmits(['success']);
+const formData = ref<PayChannelApi.Channel>();
+const formType = ref<string>('');
 const title = computed(() => {
-  return isUpdate.value
+  return formData.value?.id
     ? $t('ui.actionTitle.edit', '应用')
     : $t('ui.actionTitle.create', '应用');
 });
 
-const [BasicForm, formApi] = useVbenForm({
+const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
   },
-  schema: modalAliPaySchema(),
+  layout: 'horizontal',
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      const record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      record.code = payCode;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-        await formApi.setValues(record);
-      }
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config);
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as PayChannelApi.Channel;
+    try {
+      await (formData.value?.id ? updateChannel(data) : createChannel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+    if (!id || !payCode) {
+      return;
+    }
+    modalApi.lock();
+    if (payCode.includes('alipay_')) {
+      formType.value = 'alipay';
+    } else if (payCode.includes('mock')) {
+      formType.value = 'mock';
+    } else if (payCode.includes('wallet')) {
+      formType.value = 'wallet';
+    } else if (payCode.includes('wx')) {
+      formType.value = 'wx';
+    }
 
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
+    try {
+      formData.value = await getChannel(id, payCode);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm>
+  <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <Form :schema="channelSchema(formType)">
       <template #appCertContent="slotProps">
         <Space style="width: 100%" direction="vertical">
           <Row>
@@ -158,6 +150,6 @@ async function handleCancel() {
           </Row>
         </Space>
       </template>
-    </BasicForm>
-  </BasicModal>
+    </Form>
+  </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/data.ts b/apps/web-antd/src/views/pay/app/modules/channel/data.ts
deleted file mode 100644
index db6c66bf..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/data.ts
+++ /dev/null
@@ -1,456 +0,0 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
-
-export const modalAliPaySchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-  },
-  {
-    label: '开放平台 APPID',
-    fieldName: 'config.appId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入开放平台 APPID',
-    },
-  },
-  {
-    label: '渠道状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-    },
-    defaultValue: 1,
-  },
-  {
-    label: '网关地址',
-    fieldName: 'config.serverUrl',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: [
-        {
-          value: 'https://openapi.alipay.com/gateway.do',
-          label: '线上环境',
-        },
-        {
-          value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
-          label: '沙箱环境',
-        },
-      ],
-    },
-  },
-  {
-    label: '算法类型',
-    fieldName: 'config.signType',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: [
-        {
-          value: 'RSA2',
-          label: 'RSA2',
-        },
-      ],
-    },
-    defaultValue: 'RSA2',
-  },
-  {
-    label: '公钥类型',
-    fieldName: 'config.mode',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: [
-        {
-          value: 0,
-          label: '公钥模式',
-        },
-        {
-          value: 1,
-          label: '证书模式',
-        },
-      ],
-    },
-  },
-  {
-    label: '应用私钥',
-    fieldName: 'config.privateKey',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用私钥',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values.config.mode !== undefined;
-      },
-      triggerFields: ['config'],
-    },
-  },
-  {
-    label: '支付宝公钥',
-    fieldName: 'config.alipayPublicKey',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付宝公钥',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 0;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '商户公钥应用证书',
-    fieldName: 'config.appCertContent',
-    slotName: 'appCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传商户公钥应用证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '支付宝公钥证书',
-    fieldName: 'config.alipayPublicCertContent',
-    slotName: 'alipayPublicCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传支付宝公钥证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '根证书',
-    fieldName: 'config.rootCertContent',
-    slotName: 'rootCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传根证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '接口内容加密方式',
-    fieldName: 'config.encryptType',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: [
-        {
-          value: 'NONE',
-          label: '无加密',
-        },
-        {
-          value: 'AES',
-          label: 'AES',
-        },
-      ],
-    },
-    defaultValue: 'NONE',
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
-
-export const modalMockSchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-    },
-    defaultValue: 1,
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
-
-export const modalWeixinSchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-  },
-  {
-    label: '微信 APPID',
-    fieldName: 'config.appId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入微信 APPID',
-    },
-  },
-  {
-    label: '商户号',
-    fieldName: 'config.mchId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入商户号',
-    },
-  },
-  {
-    label: '渠道状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-    },
-    defaultValue: 1,
-  },
-  {
-    label: 'API 版本',
-    fieldName: 'config.apiVersion',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: [
-        {
-          label: 'v2',
-          value: 'v2',
-        },
-        {
-          label: 'v3',
-          value: 'v3',
-        },
-      ],
-    },
-  },
-  {
-    label: '商户密钥',
-    fieldName: 'config.mchKey',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入商户密钥',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v2';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: 'apiclient_cert.p12 证书',
-    fieldName: 'config.keyContent',
-    slotName: 'keyContent',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传 apiclient_cert.p12 证书',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v2';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: 'API V3 密钥',
-    fieldName: 'config.apiV3Key',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入 API V3 密钥',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: 'apiclient_key.pem 证书',
-    fieldName: 'config.privateKeyContent',
-    slotName: 'privateKeyContent',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传 apiclient_key.pem 证书',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '证书序列号',
-    fieldName: 'config.certSerialNo',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入证书序列号',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
deleted file mode 100644
index f7ad9167..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-
-import { modalMockSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalMockSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      let record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      } else {
-        record = {
-          feeRate: 0,
-          code: payCode,
-          appId: id,
-        } as ChannelApi.PayChannelApi.Channel;
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
deleted file mode 100644
index f7ad9167..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-
-import { modalMockSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalMockSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      let record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      } else {
-        record = {
-          feeRate: 0,
-          code: payCode,
-          appId: id,
-        } as ChannelApi.PayChannelApi.Channel;
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
deleted file mode 100644
index 0c93c3df..00000000
--- a/apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { Row, Space, Textarea } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-import { FileUpload } from '#/components/upload';
-
-import { modalWeixinSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalWeixinSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      const record =
-        (await ChannelApi.getChannel(id, payCode)) ||
-        ({} as ChannelApi.PayChannelApi.Channel);
-      isUpdate.value = !!record;
-      record.code = payCode;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config);
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm>
-      <template #keyContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传 apiclient_cert.p12 证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-      <template #privateKeyContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传 apiclient_key.pem 证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['.crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-    </BasicForm>
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/pay/app/modules/data.ts b/apps/web-antd/src/views/pay/app/modules/data.ts
new file mode 100644
index 00000000..408b782e
--- /dev/null
+++ b/apps/web-antd/src/views/pay/app/modules/data.ts
@@ -0,0 +1,546 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { h } from 'vue';
+
+import { InputUpload } from '#/components/upload';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export function channelSchema(formType: string): VbenFormSchema[] {
+  switch (formType) {
+    case 'alipay': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+        },
+        {
+          label: '开放平台 APPID',
+          fieldName: 'config.appId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入开放平台 APPID',
+          },
+        },
+        {
+          label: '渠道状态',
+          fieldName: 'status',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+          },
+          defaultValue: 1,
+        },
+        {
+          label: '网关地址',
+          fieldName: 'config.serverUrl',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: [
+              {
+                value: 'https://openapi.alipay.com/gateway.do',
+                label: '线上环境',
+              },
+              {
+                value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+                label: '沙箱环境',
+              },
+            ],
+          },
+        },
+        {
+          label: '算法类型',
+          fieldName: 'config.signType',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: [
+              {
+                value: 'RSA2',
+                label: 'RSA2',
+              },
+            ],
+          },
+          defaultValue: 'RSA2',
+        },
+        {
+          label: '公钥类型',
+          fieldName: 'config.mode',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: [
+              {
+                value: 0,
+                label: '公钥模式',
+              },
+              {
+                value: 1,
+                label: '证书模式',
+              },
+            ],
+          },
+        },
+        {
+          label: '应用私钥',
+          fieldName: 'config.privateKey',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入应用私钥',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values.config.mode !== undefined;
+            },
+            triggerFields: ['config'],
+          },
+        },
+        {
+          label: '支付宝公钥',
+          fieldName: 'config.alipayPublicKey',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入支付宝公钥',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 0;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '商户公钥应用证书',
+          fieldName: 'config.appCertContent',
+          component: h(InputUpload, {
+            inputType: 'textarea',
+            textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
+            fileUploadProps: {
+              accept: ['crt'],
+            },
+          }),
+          rules: 'required',
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '支付宝公钥证书',
+          fieldName: 'config.alipayPublicCertContent',
+          component: h(InputUpload, {
+            inputType: 'textarea',
+            textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
+            fileUploadProps: {
+              accept: ['crt'],
+            },
+          }),
+          rules: 'required',
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '根证书',
+          fieldName: 'config.rootCertContent',
+          component: h(InputUpload, {
+            inputType: 'textarea',
+            textareaProps: { rows: 8, placeholder: '请上传根证书' },
+            fileUploadProps: {
+              accept: ['crt'],
+            },
+          }),
+          rules: 'required',
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '接口内容加密方式',
+          fieldName: 'config.encryptType',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: [
+              {
+                value: 'NONE',
+                label: '无加密',
+              },
+              {
+                value: 'AES',
+                label: 'AES',
+              },
+            ],
+          },
+          defaultValue: 'NONE',
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'mock': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道状态',
+          fieldName: 'status',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+          },
+          defaultValue: 1,
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'wallet': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道状态',
+          fieldName: 'status',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+          },
+          defaultValue: 1,
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'wx': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+        },
+        {
+          label: '微信 APPID',
+          fieldName: 'config.appId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入微信 APPID',
+          },
+        },
+        {
+          label: '商户号',
+          fieldName: 'config.mchId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入商户号',
+          },
+        },
+        {
+          label: '渠道状态',
+          fieldName: 'status',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+          },
+          defaultValue: 1,
+        },
+        {
+          label: 'API 版本',
+          fieldName: 'config.apiVersion',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: [
+              {
+                label: 'v2',
+                value: 'v2',
+              },
+              {
+                label: 'v3',
+                value: 'v3',
+              },
+            ],
+          },
+        },
+        {
+          label: '商户密钥',
+          fieldName: 'config.mchKey',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入商户密钥',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v2';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: 'apiclient_cert.p12 证书',
+          fieldName: 'config.keyContent',
+          component: h(InputUpload, {
+            inputType: 'textarea',
+            textareaProps: {
+              rows: 8,
+              placeholder: '请上传 apiclient_cert.p12 证书',
+            },
+            fileUploadProps: {
+              accept: ['p12 '],
+            },
+          }),
+          rules: 'required',
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v2';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: 'API V3 密钥',
+          fieldName: 'config.apiV3Key',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入 API V3 密钥',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: 'apiclient_key.pem 证书',
+          fieldName: 'config.privateKeyContent',
+          component: h(InputUpload, {
+            inputType: 'textarea',
+            textareaProps: {
+              rows: 8,
+              placeholder: '请上传 apiclient_key.pem 证书',
+            },
+            fileUploadProps: {
+              accept: ['pem'],
+            },
+          }),
+          rules: 'required',
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '证书序列号',
+          fieldName: 'config.certSerialNo',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入证书序列号',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    default: {
+      return [];
+    }
+  }
+}
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index 48798588..adb41957 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -1,13 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { useAccess } from '@vben/access';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -69,9 +65,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = any>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -136,23 +130,10 @@ export function useGridColumns<T = any>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 100,
-      align: 'center',
+      width: 80,
       fixed: 'right',
-      cellRender: {
-        attrs: {
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            show: hasAccessByCodes(['pay:notify:query']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/pay/notify/index.vue b/apps/web-antd/src/views/pay/notify/index.vue
index ae5ec8ca..c640882e 100644
--- a/apps/web-antd/src/views/pay/notify/index.vue
+++ b/apps/web-antd/src/views/pay/notify/index.vue
@@ -1,19 +1,16 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as PayNotifyApi from '#/api/pay/notify';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyTaskPage } from '#/api/pay/notify';
 import { DocAlert } from '#/components/doc-alert';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';
 
-const [NotifyDetailModal, notifyDetailModalApi] = useVbenModal({
+const [DetailModal, detailModalApi] = useVbenModal({
   connectedComponent: Detail,
   destroyOnClose: true,
 });
@@ -24,18 +21,8 @@ function onRefresh() {
 }
 
 /** 查看详情 */
-function onDetail(row: any) {
-  notifyDetailModalApi.setData(row).open();
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<any>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
+function handleDetail(row: any) {
+  detailModalApi.setData(row).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -43,13 +30,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await PayNotifyApi.getNotifyTaskPage({
+          return await getNotifyTaskPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -72,7 +59,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <template #doc>
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
-    <NotifyDetailModal @success="onRefresh" />
-    <Grid table-title="支付通知列表" />
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付通知列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:notify:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/notify/modules/detail.vue b/apps/web-antd/src/views/pay/notify/modules/detail.vue
index 1649533e..66f6efb6 100644
--- a/apps/web-antd/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/notify/modules/detail.vue
@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 打开弹窗 */
-const open = (id: number) => {
-  modalApi.setData({ id }).open();
-};
-
-defineExpose({ open });
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
index 6874bed0..b52b5bf2 100644
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -1,144 +1,137 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { DICT_TYPE, getDictOptions } from '#/utils';
 
-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)}`;
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'appId',
+      label: '应用编号',
+      componentProps: {
+        placeholder: '请输入应用编号',
       },
     },
-  },
-  {
-    title: '退款金额',
-    field: 'refundPrice',
-    slots: {
-      default: ({ row }) => {
-        return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
+    {
+      component: 'Select',
+      fieldName: 'channelCode',
+      label: '支付渠道',
+      componentProps: {
+        placeholder: '请选择开启状态',
+        options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
       },
     },
-  },
-  {
-    title: '手续金额',
-    field: 'channelFeePrice',
-    slots: {
-      default: ({ row }) => {
-        return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
+    {
+      component: 'Input',
+      fieldName: 'merchantOrderId',
+      label: '商户单号',
+      componentProps: {
+        placeholder: '请输入商户单号',
       },
     },
-  },
-  {
-    title: '订单号',
-    field: 'no',
-    slots: {
-      default: 'no',
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '支付单号',
+      componentProps: {
+        placeholder: '请输入支付单号',
+      },
     },
-  },
-  {
-    title: '支付状态',
-    field: 'status',
-    cellRender: {
-      name: 'CellDict',
-      props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+    {
+      component: 'Input',
+      fieldName: 'channelOrderNo',
+      label: '渠道单号',
+      componentProps: {
+        placeholder: '请输入渠道单号',
+      },
     },
-  },
-  {
-    title: '支付渠道',
-    field: 'channelCode',
-    cellRender: {
-      name: 'CellDict',
-      props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '支付状态',
+      componentProps: {
+        placeholder: '请选择支付状态',
+        options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+      },
     },
-  },
-  {
-    title: '支付时间',
-    field: 'successTime',
-    minWidth: 180,
-    formatter: 'formatDateTime',
-  },
-  {
-    title: '支付应用',
-    field: 'appName',
-  },
-  {
-    title: '商品标题',
-    field: 'subject',
-  },
-  {
-    field: 'action',
-    fixed: 'right',
-    slots: { default: 'action' },
-    title: '操作',
-    minWidth: 80,
-  },
-];
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        placeholder: ['开始日期', '结束日期'],
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 60 },
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '支付金额',
+      field: 'price',
+      formatter: 'formatNumber',
+    },
+    {
+      title: '退款金额',
+      field: 'refundPrice',
+      formatter: 'formatNumber',
+    },
+    {
+      title: '手续金额',
+      field: 'channelFeePrice',
+      formatter: 'formatNumber',
+    },
+    {
+      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',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index acb53f3d..d8e09428 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -1,110 +1,93 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben/common-ui';
-
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayOrderApi } from '#/api/pay/order';
 
 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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
 
-import { columns, querySchema } from './data';
-import detailFrom from './modules/order-detail.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/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 [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
 
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    // trigger: 'row',
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: PayOrderApi.Order) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
   },
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues = {}) => {
-        return await OrderApi.getOrderPage({
-          pageNum: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-  },
-  rowConfig: {
-    keyField: 'id',
-  },
-  // 表格全局唯一表示 保存列配置需要用到
-  id: 'pay-order-index',
-};
-
-const [BasicTable] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<PayOrderApi.Order>,
 });
-
-const [DetailModal, modalDetailApi] = useVbenModal({
-  connectedComponent: detailFrom,
-});
-
-const openDetail = (id: number) => {
-  modalDetailApi.setData({
-    id,
-  });
-  modalDetailApi.open();
-};
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <DocAlert
-      title="支付宝支付接入"
-      url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
-    />
-    <DocAlert
-      title="微信公众号支付接入"
-      url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
-    />
-    <DocAlert
-      title="微信小程序支付接入"
-      url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
-    />
-    <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 #doc>
+      <DocAlert
+        title="支付宝支付接入"
+        url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
+      />
+      <DocAlert
+        title="微信公众号支付接入"
+        url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
+      />
+      <DocAlert
+        title="微信小程序支付接入"
+        url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
+      />
+    </template>
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="支付订单列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
       </template>
       <template #no="{ row }">
         <p class="order-font">
@@ -118,7 +101,6 @@ const openDetail = (id: number) => {
           {{ row.channelOrderNo }}
         </p>
       </template>
-    </BasicTable>
-    <DetailModal />
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/order/modules/order-detail.vue b/apps/web-antd/src/views/pay/order/modules/detail.vue
similarity index 85%
rename from apps/web-antd/src/views/pay/order/modules/order-detail.vue
rename to apps/web-antd/src/views/pay/order/modules/detail.vue
index e76be463..8da61c91 100644
--- a/apps/web-antd/src/views/pay/order/modules/order-detail.vue
+++ b/apps/web-antd/src/views/pay/order/modules/detail.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
+
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -6,34 +8,39 @@ import { formatDateTime } from '@vben/utils';
 
 import { Descriptions, Divider, Tag } from 'ant-design-vue';
 
-import * as OrderApi from '#/api/pay/order';
+import { getOrder } from '#/api/pay/order';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE } from '#/utils/dict';
 
-const detailData = ref<OrderApi.PayOrderApi.Order>();
+const detailData = ref<PayOrderApi.Order>();
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  showCancelButton: false,
-  showConfirmButton: false,
+const [Modal, modalApi] = useVbenModal({
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
-      return null;
+      detailData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<PayOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      detailData.value = await getOrder(data.id);
+    } finally {
+      modalApi.unlock();
     }
-    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]">
+  <Modal
+    title="订单详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
     <Descriptions :column="2">
       <Descriptions.Item label="商户单号">
         {{ detailData?.merchantOrderId }}
@@ -121,5 +128,5 @@ const [BasicModal, modalApi] = useVbenModal({
         {{ detailData?.channelNotifyData }}
       </Descriptions.Item>
     </Descriptions>
-  </BasicModal>
+  </Modal>
 </template>
diff --git a/apps/web-antd/src/views/pay/refund/data.ts b/apps/web-antd/src/views/pay/refund/data.ts
index 73928585..01077746 100644
--- a/apps/web-antd/src/views/pay/refund/data.ts
+++ b/apps/web-antd/src/views/pay/refund/data.ts
@@ -1,14 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
-
-import { useAccess } from '@vben/access';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { getAppList } from '#/api/pay/app';
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -80,9 +75,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = PayRefundApi.Refund>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -155,23 +148,10 @@ export function useGridColumns<T = PayRefundApi.Refund>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 100,
-      align: 'center',
+      width: 80,
       fixed: 'right',
-      cellRender: {
-        attrs: {
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            show: hasAccessByCodes(['pay:refund:query']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/pay/refund/index.vue b/apps/web-antd/src/views/pay/refund/index.vue
index cbf80df0..6af0d780 100644
--- a/apps/web-antd/src/views/pay/refund/index.vue
+++ b/apps/web-antd/src/views/pay/refund/index.vue
@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as RefundApi from '#/api/pay/refund';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -29,32 +23,22 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
 }
 
 /** 查看详情 */
-function onDetail(row: any) {
+function handleDetail(row: any) {
   refundDetailModalApi.setData(row).open();
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<any>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -89,15 +73,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <RefundDetailModal @success="onRefresh" />
     <Grid table-title="支付退款列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['pay:refund:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['pay:refund:query'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['pay:refund:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-antd/src/views/pay/refund/modules/detail.vue b/apps/web-antd/src/views/pay/refund/modules/detail.vue
index 82d0d910..d7f2a8c9 100644
--- a/apps/web-antd/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/refund/modules/detail.vue
@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 });
-
-/** 打开弹窗 */
-const open = (id: number) => {
-  modalApi.setData({ id }).open();
-};
-
-defineExpose({ open });
 </script>
 
 <template>
diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts
index 84e9a045..e2f7e462 100644
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -8,56 +8,55 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-/** 手机号正则表达式（中国） */
 const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
 
-setupVbenForm<ComponentType>({
-  config: {
-    modelPropNameMap: {
-      Upload: 'fileList',
-      CheckboxGroup: 'model-value',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      modelPropNameMap: {
+        Upload: 'fileList',
+        CheckboxGroup: 'model-value',
+      },
     },
-  },
-  defineRules: {
-    // 输入项目必填国际化适配
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
-    },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-    // 手机号非必填
-    mobile: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
+    defineRules: {
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
         return true;
-      } else if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.mobile', [ctx.label]);
-      }
-      return true;
+      },
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号非必填
+      mobile: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return true;
+        } else if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号必填
+      mobileRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 手机号必填
-    mobileRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.mobile', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
index e0c354be..eceaf192 100644
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -263,7 +263,7 @@ setupVbenVxeTable({
     });
 
     // 添加数量格式化，例如金额
-    vxeUI.formats.add('formatAmount', {
+    vxeUI.formats.add('formatNumber', {
       cellFormatMethod({ cellValue }, digits = 2) {
         if (cellValue === null || cellValue === undefined) {
           return '';
diff --git a/apps/web-ele/src/bootstrap.ts b/apps/web-ele/src/bootstrap.ts
index b82949fb..c366b278 100644
--- a/apps/web-ele/src/bootstrap.ts
+++ b/apps/web-ele/src/bootstrap.ts
@@ -14,12 +14,17 @@ import { $t, setupI18n } from '#/locales';
 import { setupFormCreate } from '#/plugins/form-create';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
diff --git a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
index e3332428..e67ceec0 100644
--- a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
+++ b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
@@ -273,9 +273,8 @@ const [Modal, modalApi] = useVbenModal({
             <div
               class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
             >
-              <!-- eslint-disable-next-line vue/no-v-html -->
               <code
-                v-html="codeMap.get(activeKey)"
+                v-dompurify-html="codeMap.get(activeKey)"
                 class="code-highlight"
               ></code>
             </div>
diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts
index cc3435f0..19fba4f8 100644
--- a/apps/web-naive/src/adapter/form.ts
+++ b/apps/web-naive/src/adapter/form.ts
@@ -8,58 +8,59 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-/** 手机号正则表达式（中国） */
 const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
 
-setupVbenForm<ComponentType>({
-  config: {
-    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
-    emptyStateValue: null,
-    baseModelPropName: 'value',
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      Upload: 'fileList',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
+      emptyStateValue: null,
+      baseModelPropName: 'value',
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
-    },
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-    // 手机号非必填
-    mobile: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
+    defineRules: {
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
         return true;
-      } else if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.phone', [ctx.label]);
-      }
-      return true;
+      },
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号非必填
+      mobile: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return true;
+        } else if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号必填
+      mobileRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 手机号必填
-    mobileRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.phone', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts
index 61b4d5bc..fff62cc3 100644
--- a/apps/web-naive/src/adapter/vxe-table.ts
+++ b/apps/web-naive/src/adapter/vxe-table.ts
@@ -277,7 +277,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
     // add by 星语：数量格式化，例如说：金额
-    vxeUI.formats.add('formatAmount', {
+    vxeUI.formats.add('formatNumber', {
       cellFormatMethod({ cellValue }, digits = 2) {
         if (cellValue === null || cellValue === undefined) {
           return '';
diff --git a/apps/web-naive/src/bootstrap.ts b/apps/web-naive/src/bootstrap.ts
index 5fddd7d8..df0b2cbb 100644
--- a/apps/web-naive/src/bootstrap.ts
+++ b/apps/web-naive/src/bootstrap.ts
@@ -12,12 +12,16 @@ import { useTitle } from '@vueuse/core';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
-  initComponentAdapter();
+  await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
 
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
diff --git a/apps/web-naive/src/views/infra/codegen/modules/preview-code.vue b/apps/web-naive/src/views/infra/codegen/modules/preview-code.vue
index dfb312a1..1f60b343 100644
--- a/apps/web-naive/src/views/infra/codegen/modules/preview-code.vue
+++ b/apps/web-naive/src/views/infra/codegen/modules/preview-code.vue
@@ -255,9 +255,8 @@ const [Modal, modalApi] = useVbenModal({
             <div
               class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
             >
-              <!-- eslint-disable-next-line vue/no-v-html -->
               <code
-                v-html="codeMap.get(activeKey)"
+                v-dompurify-html="codeMap.get(activeKey)"
                 class="code-highlight"
               ></code>
             </div>
diff --git a/docs/src/components/common-ui/vben-ellipsis-text.md b/docs/src/components/common-ui/vben-ellipsis-text.md
index 109f1161..ce6c0334 100644
--- a/docs/src/components/common-ui/vben-ellipsis-text.md
+++ b/docs/src/components/common-ui/vben-ellipsis-text.md
@@ -26,6 +26,12 @@ outline: deep
 
 <DemoPreview dir="demos/vben-ellipsis-text/tooltip" />
 
+## 自动显示 tooltip
+
+通过`tooltip-when-ellipsis`设置，仅在文本长度超出导致省略号出现时才触发 tooltip。
+
+<DemoPreview dir="demos/vben-ellipsis-text/auto-display" />
+
 ## API
 
 ### Props
@@ -37,6 +43,8 @@ outline: deep
 | maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
 | placement | 提示浮层的位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
 | tooltip | 启用文本提示 | `boolean` | `true` |
+| tooltipWhenEllipsis | 内容超出，自动启用文本提示 | `boolean` | `false` |
+| ellipsisThreshold | 设置 tooltipWhenEllipsis 后才生效，文本截断检测的像素差异阈值，越大则判断越严格，如果碰见异常情况可以自己设置阈值 | `number` | `3` |
 | tooltipBackgroundColor | 提示文本的背景颜色 | `string` | - |
 | tooltipColor | 提示文本的颜色 | `string` | - |
 | tooltipFontSize | 提示文本的大小 | `string` | - |
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
index 5ed5abd1..7abb3051 100644
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -557,16 +557,4 @@ import { z } from '#/adapter/form';
 
 除了以上内置插槽之外，`schema`属性中每个字段的`fieldName`都可以作为插槽名称，这些字段插槽的优先级高于`component`定义的组件。也就是说，当提供了与`fieldName`同名的插槽时，这些插槽的内容将会作为这些字段的组件，此时`component`的值将会被忽略。
 
-如果需要使用自定义的插槽名而不是使用`fieldName`，可以在schema中添加`slotName`属性。当提供了`slotName`属性时，将优先使用`slotName`作为插槽名。
-
-```ts
-// 使用自定义插槽名的例子
-{
-  component: 'Textarea',
-  fieldName: 'config.appCertContent',
-  slotName: 'appCertSlot',
-  label: '商户公钥应用证书',
-}
-```
-
 :::
diff --git a/docs/src/demos/vben-ellipsis-text/auto-display/index.vue b/docs/src/demos/vben-ellipsis-text/auto-display/index.vue
new file mode 100644
index 00000000..fb5a32a5
--- /dev/null
+++ b/docs/src/demos/vben-ellipsis-text/auto-display/index.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+
+const text = `
+Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+`;
+</script>
+<template>
+  <EllipsisText :line="2" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+
+  <EllipsisText :line="3" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+</template>
diff --git a/docs/src/en/guide/essentials/settings.md b/docs/src/en/guide/essentials/settings.md
index b7cb3a2d..e5aa71a8 100644
--- a/docs/src/en/guide/essentials/settings.md
+++ b/docs/src/en/guide/essentials/settings.md
@@ -238,6 +238,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -431,6 +432,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** Whether the logo is visible */
   enable: boolean;
+  /** Logo image fitting method */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** Logo URL */
   source: string;
 }
diff --git a/docs/src/guide/essentials/settings.md b/docs/src/guide/essentials/settings.md
index cd7c9380..cca572d8 100644
--- a/docs/src/guide/essentials/settings.md
+++ b/docs/src/guide/essentials/settings.md
@@ -237,6 +237,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -431,6 +432,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** logo是否可见 */
   enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
 }
diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index df20b55d..1cccbbb2 100644
--- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -61,6 +61,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   },
   "logo": {
     "enable": true,
+    "fit": "contain",
     "source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
   },
   "navigation": {
diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
index 70d15c3e..835eed55 100644
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -62,6 +62,7 @@ const defaultPreferences: Preferences = {
 
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index cc0fefe3..e640edb5 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -134,6 +134,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** logo是否可见 */
   enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
 }
diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
index 4c68a7e5..ae317aee 100644
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';
 
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
-import { toRaw } from 'vue';
+import { isRef, toRaw } from 'vue';
 
 import { Store } from '@vben-core/shared/store';
 import {
@@ -100,9 +100,26 @@ export class FormApi {
   getFieldComponentRef<T = ComponentPublicInstance>(
     fieldName: string,
   ): T | undefined {
-    return this.componentRefMap.has(fieldName)
-      ? (this.componentRefMap.get(fieldName) as T)
+    let target = this.componentRefMap.has(fieldName)
+      ? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
       : undefined;
+    if (
+      target &&
+      target.$.type.name === 'AsyncComponentWrapper' &&
+      target.$.subTree.ref
+    ) {
+      if (Array.isArray(target.$.subTree.ref)) {
+        if (
+          target.$.subTree.ref.length > 0 &&
+          isRef(target.$.subTree.ref[0]?.r)
+        ) {
+          target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
+        }
+      } else if (isRef(target.$.subTree.ref.r)) {
+        target = target.$.subTree.ref.r.value as ComponentPublicInstance;
+      }
+    }
+    return target as T;
   }
 
   /**
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index 5165c2bd..ff827c42 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -155,11 +155,7 @@ const computedSchema = computed(
           :rules="cSchema.rules"
         >
           <template #default="slotProps">
-            <slot
-              v-bind="slotProps"
-              :name="cSchema.slotName || cSchema.fieldName"
-            >
-            </slot>
+            <slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
           </template>
         </FormField>
       </template>
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index c3446941..529ba0ef 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -263,8 +263,6 @@ export interface FormSchema<
   renderComponentContent?: RenderComponentContentType;
   /** 字段规则 */
   rules?: FormSchemaRuleType;
-  /** 自定义插槽名，如果不指定则使用fieldName */
-  slotName?: string;
   /** 后缀 */
   suffix?: CustomRenderType;
 }
diff --git a/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
index 60148bfb..4ef182ed 100644
--- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -10,7 +10,7 @@ import { createContext } from '@vben-core/shadcn-ui';
 import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
 
 import { useForm } from 'vee-validate';
-import { object } from 'zod';
+import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
 type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
@@ -52,7 +52,12 @@ export function useFormInitial(
       if (Reflect.has(item, 'defaultValue')) {
         set(initialValues, item.fieldName, item.defaultValue);
       } else if (item.rules && !isString(item.rules)) {
+        // 检查规则是否适合提取默认值
+        const customDefaultValue = getCustomDefaultValue(item.rules);
         zodObject[item.fieldName] = item.rules;
+        if (customDefaultValue !== undefined) {
+          initialValues[item.fieldName] = customDefaultValue;
+        }
       }
     });
 
@@ -64,6 +69,38 @@ export function useFormInitial(
     }
     return mergeWithArrayOverride(initialValues, zodDefaults);
   }
+  // 自定义默认值提取逻辑
+  function getCustomDefaultValue(rule: any): any {
+    if (rule instanceof ZodString) {
+      return ''; // 默认为空字符串
+    } else if (rule instanceof ZodNumber) {
+      return null; // 默认为 null（避免显示 0）
+    } else if (rule instanceof ZodObject) {
+      // 递归提取嵌套对象的默认值
+      const defaultValues: Record<string, any> = {};
+      for (const [key, valueSchema] of Object.entries(rule.shape)) {
+        defaultValues[key] = getCustomDefaultValue(valueSchema);
+      }
+      return defaultValues;
+    } else if (rule instanceof ZodIntersection) {
+      // 对于交集类型，从schema 提取默认值
+      const leftDefaultValue = getCustomDefaultValue(rule._def.left);
+      const rightDefaultValue = getCustomDefaultValue(rule._def.right);
+
+      // 如果左右两边都能提取默认值，合并它们
+      if (
+        typeof leftDefaultValue === 'object' &&
+        typeof rightDefaultValue === 'object'
+      ) {
+        return { ...leftDefaultValue, ...rightDefaultValue };
+      }
+
+      // 否则优先使用左边的默认值
+      return leftDefaultValue ?? rightDefaultValue;
+    } else {
+      return undefined; // 其他类型不提供默认值
+    }
+  }
 
   return {
     delegatedSlots,
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index c444feea..27aa8216 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -124,14 +124,6 @@ export class ModalApi {
     return this.setState({ submitting: isLocked });
   }
 
-  modalLoading(loading: boolean) {
-    this.store.setState((prev) => ({
-      ...prev,
-      confirmLoading: loading,
-      loading,
-    }));
-  }
-
   /**
    * 取消操作
    */
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index 4f630e19..a63f349c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -5,6 +5,8 @@ import type {
   AvatarRootProps,
 } from 'radix-vue';
 
+import type { CSSProperties } from 'vue';
+
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
@@ -16,6 +18,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
   class?: ClassType;
   dot?: boolean;
   dotClass?: ClassType;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   size?: number;
 }
 
@@ -28,6 +31,15 @@ const props = withDefaults(defineProps<Props>(), {
   as: 'button',
   dot: false,
   dotClass: 'bg-green-500',
+  fit: 'cover',
+});
+
+const imageStyle = computed<CSSProperties>(() => {
+  const { fit } = props;
+  if (fit) {
+    return { objectFit: fit };
+  }
+  return {};
 });
 
 const text = computed(() => {
@@ -51,7 +63,7 @@ const rootStyle = computed(() => {
     class="relative flex flex-shrink-0 items-center"
   >
     <Avatar :class="props.class" class="size-full">
-      <AvatarImage :alt="alt" :src="src" />
+      <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
       <AvatarFallback>{{ text }}</AvatarFallback>
     </Avatar>
     <span
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index 829b7911..d8be09a1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -6,6 +6,10 @@ interface Props {
    * @zh_CN 是否收起文本
    */
   collapsed?: boolean;
+  /**
+   * @zh_CN Logo 图片适应方式
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /**
    * @zh_CN Logo 跳转地址
    */
@@ -38,6 +42,7 @@ withDefaults(defineProps<Props>(), {
   logoSize: 32,
   src: '',
   theme: 'light',
+  fit: 'cover',
 });
 </script>
 
@@ -53,6 +58,7 @@ withDefaults(defineProps<Props>(), {
         :alt="text"
         :src="src"
         :size="logoSize"
+        :fit="fit"
         class="relative rounded-none bg-transparent"
       />
       <template v-if="!collapsed">
diff --git a/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index b32c5dfa..12f44bdb 100644
--- a/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
 
-import { computed, ref, watchEffect } from 'vue';
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watchEffect,
+} from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
@@ -33,6 +40,16 @@ interface Props {
    * @default true
    */
   tooltip?: boolean;
+  /**
+   * 是否只在文本被截断时显示提示框
+   * @default false
+   */
+  tooltipWhenEllipsis?: boolean;
+  /**
+   * 文本截断检测的像素差异阈值，越大则判断越严格
+   * @default 3
+   */
+  ellipsisThreshold?: number;
   /**
    * 提示框背景颜色，优先级高于 overlayStyle
    */
@@ -62,12 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: '100%',
   placement: 'top',
   tooltip: true,
+  tooltipWhenEllipsis: false,
+  ellipsisThreshold: 3,
   tooltipBackgroundColor: '',
   tooltipColor: '',
   tooltipFontSize: 14,
   tooltipMaxWidth: undefined,
   tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
 });
+
 const emit = defineEmits<{ expandChange: [boolean] }>();
 
 const textMaxWidth = computed(() => {
@@ -79,9 +99,67 @@ const textMaxWidth = computed(() => {
 const ellipsis = ref();
 const isExpand = ref(false);
 const defaultTooltipMaxWidth = ref();
+const isEllipsis = ref(false);
 
 const { width: eleWidth } = useElementSize(ellipsis);
 
+// 检测文本是否被截断
+const checkEllipsis = () => {
+  if (!ellipsis.value || !props.tooltipWhenEllipsis) return;
+
+  const element = ellipsis.value;
+
+  const originalText = element.textContent || '';
+  const originalTrimmed = originalText.trim();
+
+  // 对于空文本直接返回 false
+  if (!originalTrimmed) {
+    isEllipsis.value = false;
+    return;
+  }
+
+  const widthDiff = element.scrollWidth - element.clientWidth;
+  const heightDiff = element.scrollHeight - element.clientHeight;
+
+  // 使用足够大的差异阈值确保只有真正被截断的文本才会显示 tooltip
+  isEllipsis.value =
+    props.line === 1
+      ? widthDiff > props.ellipsisThreshold
+      : heightDiff > props.ellipsisThreshold;
+};
+
+// 使用 ResizeObserver 监听尺寸变化
+let resizeObserver: null | ResizeObserver = null;
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && props.tooltipWhenEllipsis) {
+    resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+
+    if (ellipsis.value) {
+      resizeObserver.observe(ellipsis.value);
+    }
+  }
+
+  // 初始检测
+  checkEllipsis();
+});
+
+// 使用onUpdated钩子检测内容变化
+onUpdated(() => {
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+
 watchEffect(
   () => {
     if (props.tooltip && eleWidth.value) {
@@ -91,9 +169,13 @@ watchEffect(
   },
   { flush: 'post' },
 );
+
 function onExpand() {
   isExpand.value = !isExpand.value;
   emit('expandChange', isExpand.value);
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
 }
 
 function handleExpand() {
@@ -110,7 +192,9 @@ function handleExpand() {
         color: tooltipColor,
         backgroundColor: tooltipBackgroundColor,
       }"
-      :disabled="!props.tooltip || isExpand"
+      :disabled="
+        !props.tooltip || isExpand || (props.tooltipWhenEllipsis && !isEllipsis)
+      "
       :side="placement"
     >
       <slot name="tooltip">
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index bdb3958a..0d110ce0 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -234,6 +234,7 @@ const headerSlots = computed(() => {
     <template #logo>
       <VbenLogo
         v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
         :class="logoClass"
         :collapsed="logoCollapsed"
         :src="preferences.logo.source"
@@ -324,6 +325,7 @@ const headerSlots = computed(() => {
     <template #side-extra-title>
       <VbenLogo
         v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
         :text="preferences.app.name"
         :theme="theme"
       >
diff --git a/packages/effects/layouts/src/widgets/check-updates/check-updates.vue b/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
index 661604d8..4f3082f3 100644
--- a/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
+++ b/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
@@ -6,7 +6,7 @@ import { $t } from '@vben/locales';
 import { useVbenModal } from '@vben-core/popup-ui';
 
 interface Props {
-  // 轮训时间，分钟
+  // 轮询时间，分钟
   checkUpdatesInterval?: number;
   // 检查更新的地址
   checkUpdateUrl?: string;
@@ -46,6 +46,7 @@ async function getVersionTag() {
     const response = await fetch(props.checkUpdateUrl, {
       cache: 'no-cache',
       method: 'HEAD',
+      redirect: 'manual',
     });
 
     return (
diff --git a/packages/stores/src/modules/tabbar.ts b/packages/stores/src/modules/tabbar.ts
index 17215a5e..5b892b66 100644
--- a/packages/stores/src/modules/tabbar.ts
+++ b/packages/stores/src/modules/tabbar.ts
@@ -208,7 +208,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
       const keys: string[] = [];
 
       for (const key of closeKeys) {
-        if (key !== tab.key) {
+        if (key !== getTabKeyFromTab(tab)) {
           const closeTab = this.tabs.find(
             (item) => getTabKeyFromTab(item) === key,
           );
diff --git a/playground/package.json b/playground/package.json
index 3df57b98..9446f38b 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -48,8 +48,12 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "json-bigint": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/json-bigint": "catalog:"
   }
 }
diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts
index dfe8fed0..c5589aab 100644
--- a/playground/src/adapter/form.ts
+++ b/playground/src/adapter/form.ts
@@ -8,38 +8,40 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
-  config: {
-    // ant design vue组件库默认都是 v-model:value
-    baseModelPropName: 'value',
-    // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
-      Checkbox: 'checked',
-      Radio: 'checked',
-      Switch: 'checked',
-      Upload: 'fileList',
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
-  defineRules: {
-    // 输入项目必填国际化适配
-    required: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
+  });
+}
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
diff --git a/playground/src/api/examples/json-bigint.ts b/playground/src/api/examples/json-bigint.ts
new file mode 100644
index 00000000..19e41e2e
--- /dev/null
+++ b/playground/src/api/examples/json-bigint.ts
@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 发起请求
+ */
+async function getBigIntData() {
+  return requestClient.get('/demo/bigint');
+}
+
+export { getBigIntData };
diff --git a/playground/src/api/request.ts b/playground/src/api/request.ts
index f674859a..e741552d 100644
--- a/playground/src/api/request.ts
+++ b/playground/src/api/request.ts
@@ -1,7 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { RequestClientOptions } from '@vben/request';
+import type { AxiosResponseHeaders, RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
@@ -12,8 +12,10 @@ import {
   RequestClient,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
+import { cloneDeep } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
+import JSONBigInt from 'json-bigint';
 
 import { useAuthStore } from '#/store';
 
@@ -25,6 +27,14 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
     baseURL,
+    transformResponse: (data: any, header: AxiosResponseHeaders) => {
+      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
+      return header.getContentType()?.toString().includes('application/json')
+        ? cloneDeep(
+            JSONBigInt({ storeAsString: true, strict: true }).parse(data),
+          )
+        : data;
+    },
   });
 
   /**
diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts
index 6df3bd52..f0a668b4 100644
--- a/playground/src/bootstrap.ts
+++ b/playground/src/bootstrap.ts
@@ -13,12 +13,16 @@ import { $t, setupI18n } from '#/locales';
 import { router } from '#/router';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
diff --git a/playground/src/router/routes/modules/demos.ts b/playground/src/router/routes/modules/demos.ts
index 7b927373..3df4f0ad 100644
--- a/playground/src/router/routes/modules/demos.ts
+++ b/playground/src/router/routes/modules/demos.ts
@@ -255,6 +255,16 @@ const routes: RouteRecordRaw[] = [
               title: $t('demos.features.requestParamsSerializer'),
             },
           },
+          {
+            name: 'BigIntDemo',
+            path: '/demos/features/json-bigint',
+            component: () =>
+              import('#/views/demos/features/json-bigint/index.vue'),
+            meta: {
+              icon: 'lucide:grape',
+              title: 'JSON BigInt',
+            },
+          },
         ],
       },
       // 面包屑导航
diff --git a/playground/src/views/_core/authentication/login.vue b/playground/src/views/_core/authentication/login.vue
index cc5cd3c2..162398e0 100644
--- a/playground/src/views/_core/authentication/login.vue
+++ b/playground/src/views/_core/authentication/login.vue
@@ -111,10 +111,11 @@ const loginRef =
 async function onSubmit(params: Recordable<any>) {
   authStore.authLogin(params).catch(() => {
     // 登陆失败，刷新验证码的演示
-
+    const formApi = loginRef.value?.getFormApi();
+    // 重置验证码组件的值
+    formApi?.setFieldValue('captcha', false, false);
     // 使用表单API获取验证码组件实例，并调用其resume方法来重置验证码
-    loginRef.value
-      ?.getFormApi()
+    formApi
       ?.getFieldComponentRef<InstanceType<typeof SliderCaptcha>>('captcha')
       ?.resume();
   });
diff --git a/playground/src/views/demos/features/json-bigint/index.vue b/playground/src/views/demos/features/json-bigint/index.vue
new file mode 100644
index 00000000..d1f58145
--- /dev/null
+++ b/playground/src/views/demos/features/json-bigint/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, Card } from 'ant-design-vue';
+
+import { getBigIntData } from '#/api/examples/json-bigint';
+
+const response = ref('');
+function fetchData() {
+  getBigIntData().then((res) => {
+    response.value = res;
+  });
+}
+</script>
+<template>
+  <Page
+    title="JSON BigInt Support"
+    description="解析后端返回的长整数（long/bigInt）。代码位置：playground/src/api/request.ts中的transformResponse"
+  >
+    <Card>
+      <Alert>
+        <template #message>
+          有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
+          这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
+          <br />
+          下面的按钮点击后会发起请求，接口返回的JSON数据中的id字段是超出整数范围的数字，已自动将其解析为字符串
+        </template>
+      </Alert>
+      <Button class="mt-4" type="primary" @click="fetchData">发起请求</Button>
+      <div>
+        <pre>
+        {{ response }}
+        </pre>
+      </div>
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/form/api.vue b/playground/src/views/examples/form/api.vue
index e367cb85..a7e15a08 100644
--- a/playground/src/views/examples/form/api.vue
+++ b/playground/src/views/examples/form/api.vue
@@ -134,7 +134,7 @@ function handleClick(
     }
     case 'componentRef': {
       // 获取下拉组件的实例，并调用它的focus方法
-      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
+      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
       break;
     }
     case 'disabled': {
diff --git a/playground/src/views/system/menu/data.ts b/playground/src/views/system/menu/data.ts
index ee787e50..75190b4a 100644
--- a/playground/src/views/system/menu/data.ts
+++ b/playground/src/views/system/menu/data.ts
@@ -11,7 +11,7 @@ export function getMenuTypeOptions() {
       value: 'catalog',
     },
     { color: 'default', label: $t('system.menu.typeMenu'), value: 'menu' },
-    { color: 'error', label: $t('system.menu.typeButton'), value: 'action' },
+    { color: 'error', label: $t('system.menu.typeButton'), value: 'button' },
     {
       color: 'success',
       label: $t('system.menu.typeEmbedded'),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1bf8ef1..7990be96 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,6 +102,9 @@ catalogs:
     '@types/html-minifier-terser':
       specifier: ^7.0.2
       version: 7.0.2
+    '@types/json-bigint':
+      specifier: ^1.0.4
+      version: 1.0.4
     '@types/jsonwebtoken':
       specifier: ^9.0.9
       version: 9.0.9
@@ -318,6 +321,9 @@ catalogs:
     is-ci:
       specifier: ^4.1.0
       version: 4.1.0
+    json-bigint:
+      specifier: ^1.0.0
+      version: 1.0.0
     jsonc-eslint-parser:
       specifier: ^2.4.0
       version: 2.4.0
@@ -531,6 +537,9 @@ catalogs:
     vue-tsc:
       specifier: 2.2.10
       version: 2.2.10
+    vue3-signature:
+      specifier: ^0.2.4
+      version: 0.2.4
     vxe-pc-ui:
       specifier: ^4.5.35
       version: 4.6.8
@@ -764,6 +773,9 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+      vue3-signature:
+        specifier: 'catalog:'
+        version: 0.2.4(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@types/crypto-js':
         specifier: 'catalog:'
@@ -1984,6 +1996,9 @@ importers:
       dayjs:
         specifier: 'catalog:'
         version: 1.11.13
+      json-bigint:
+        specifier: 'catalog:'
+        version: 1.0.0
       pinia:
         specifier: ^3.0.2
         version: 3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
@@ -1993,6 +2008,10 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+    devDependencies:
+      '@types/json-bigint':
+        specifier: 'catalog:'
+        version: 1.0.4
 
   scripts/turbo-run:
     dependencies:
@@ -4536,6 +4555,9 @@ packages:
   '@types/html-minifier-terser@7.0.2':
     resolution: {integrity: sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA==}
 
+  '@types/json-bigint@1.0.4':
+    resolution: {integrity: sha512-ydHooXLbOmxBbubnA7Eh+RpBzuaIiQjh8WGJYQB50JFGFrdxW7JzVlyEV7fAXw0T2sqJ1ysTneJbiyNLqZRAag==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -5429,6 +5451,9 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
+  bignumber.js@9.3.0:
+    resolution: {integrity: sha512-EM7aMFTXbptt/wZdMlBv2t8IViwQL+h6SLHosp8Yf0dqJMTnY6iL32opnAB6kAdL0SZPuvcAzFr31o0c/R3/RA==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -6226,6 +6251,9 @@ packages:
     resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
 
+  default-passive-events@2.0.0:
+    resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -7849,6 +7877,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-bigint@1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -10024,6 +10055,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  signature_pad@3.0.0-beta.4:
+    resolution: {integrity: sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==}
+
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
@@ -11169,6 +11203,11 @@ packages:
     peerDependencies:
       vue: ^3.5.13
 
+  vue3-signature@0.2.4:
+    resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==}
+    peerDependencies:
+      vue: ^3.5.13
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -14434,6 +14473,8 @@ snapshots:
 
   '@types/html-minifier-terser@7.0.2': {}
 
+  '@types/json-bigint@1.0.4': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/jsonwebtoken@9.0.9':
@@ -15489,6 +15530,8 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  bignumber.js@9.3.0: {}
+
   binary-extensions@2.3.0: {}
 
   bindings@1.5.0:
@@ -16357,6 +16400,8 @@ snapshots:
       bundle-name: 4.1.0
       default-browser-id: 5.0.0
 
+  default-passive-events@2.0.0: {}
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
@@ -18184,6 +18229,10 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-bigint@1.0.0:
+    dependencies:
+      bignumber.js: 9.3.0
+
   json-buffer@3.0.1: {}
 
   json-parse-even-better-errors@2.3.1: {}
@@ -20476,6 +20525,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  signature_pad@3.0.0-beta.4: {}
+
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
@@ -21807,6 +21858,12 @@ snapshots:
       is-plain-object: 3.0.1
       vue: 3.5.13(typescript@5.8.3)
 
+  vue3-signature@0.2.4(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      default-passive-events: 2.0.0
+      signature_pad: 3.0.0-beta.4
+      vue: 3.5.13(typescript@5.8.3)
+
   vue@3.5.13(typescript@5.8.3):
     dependencies:
       '@vue/compiler-dom': 3.5.13
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 2ed78c89..6fabd9b1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -46,6 +46,7 @@ catalog:
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1
   '@types/html-minifier-terser': ^7.0.2
+  '@types/json-bigint': ^1.0.4
   '@types/jsonwebtoken': ^9.0.9
   '@types/lodash.clonedeep': ^4.5.9
   '@types/lodash.get': ^4.4.9
@@ -120,6 +121,7 @@ catalog:
   happy-dom: ^17.4.6
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
+  json-bigint: ^1.0.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
   lefthook: ^1.11.12
@@ -199,3 +201,4 @@ catalog:
   zod: ^3.24.3
   zod-defaults: ^0.1.3
   highlight.js: ^11.11.1
+  vue3-signature: ^0.2.4