!116 merge dev

Merge pull request !116 from xingyu/dev

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;
+});

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:"

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[];

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 '';

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,
+    },
+  );
 }
 
 /** 查询流程定义列表（简单列表） */

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}`);
 }
 

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;

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 },
   );

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}`);
 };
 
 /** 退回 */

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,

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';

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>

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>

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>

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>

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>

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>

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>

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;
+};

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';

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';
+}

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>

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;

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,

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;

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';

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>

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[];
+}

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,

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)),
   };
 };

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',

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, '抄送');

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 : '未知错误'}`,
+      );
+    }
+  },
+};

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));

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';

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>

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: {

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',

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>

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,

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);
       },
     },
     {

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>

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>

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>

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>

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>

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

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 }">

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',
+    },
+  ];
+}

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>

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>

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>

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>

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>

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>

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>

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>

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>

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' },
   // 审批通过

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>

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>

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="抄送任务">

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',
     },

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 }">

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: '发起人',

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>

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}`,
+              ),
+            );
+          });
+        },
       },
     },
     {

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>

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',

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',

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: '请输入备注',
+      },
+    },
+  ];
+}

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>

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>

apps/web-antd/src/views/pay/app/modules/channel/data.ts

@@ -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: '请输入备注',
-    },
-  },
-];

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

@@ -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>

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

@@ -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>

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

@@ -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>

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 [];
+    }
+  }
+}

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' },
     },
   ];
 }

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>

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>

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' },
+    },
+  ];
+}

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>

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>

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' },
     },
   ];
 }

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>

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>

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 };

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 '';

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,

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>

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 };

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 '';

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({