From 0f576e006bfb33dd3cc2c80f1f816333b93d8b95 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 24 May 2025 23:02:24 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1-=20Simple=20=E6=A8=A1=E5=9E=8B=E8=AE=BE=E8=AE=A1=2020?=
 =?UTF-8?q?%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dept-select-modal/dept-select-modal.vue   |    2 +-
 .../components/nodes/end-event-node.vue       |   47 +
 .../components/nodes/node-handler.vue         |  338 ++++++
 .../components/nodes/start-user-node.vue      |  119 ++
 .../components/process-node-tree.vue          |  147 +++
 .../components/simple-process-designer.vue    |  246 ++++
 .../components/simple-process-model.vue       |  286 +++++
 .../simple-process-design/consts.ts           | 1010 +++++++++++++++++
 .../simple-process-design/helpers.ts          |  739 ++++++++++++
 .../components/simple-process-design/index.ts |    3 +
 .../simple-process-design/styles/iconfont.ttf |  Bin 0 -> 4808 bytes
 .../styles/iconfont.woff                      |  Bin 0 -> 3176 bytes
 .../styles/iconfont.woff2                     |  Bin 0 -> 2628 bytes
 .../styles/simple-process-designer.scss       |  826 ++++++++++++++
 .../styles/svg/simple-process-bg.svg          |    1 +
 .../src/views/bpm/model/form/index.vue        |   23 +-
 .../bpm/model/form/modules/basic-info.vue     |    3 +-
 .../bpm/model/form/modules/process-design.vue |   67 ++
 .../form/modules/simple-model-design.vue      |   40 +
 .../modules/category-draggable-model.vue      |   15 +-
 20 files changed, 3898 insertions(+), 14 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/consts.ts
 create mode 100644 apps/web-antd/src/components/simple-process-design/helpers.ts
 create mode 100644 apps/web-antd/src/components/simple-process-design/index.ts
 create mode 100644 apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf
 create mode 100644 apps/web-antd/src/components/simple-process-design/styles/iconfont.woff
 create mode 100644 apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2
 create mode 100644 apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
 create mode 100644 apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg
 create mode 100644 apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
 create mode 100644 apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue

diff --git a/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue b/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
index 69968ce3c..7a36899ec 100644
--- a/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
+++ b/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
@@ -3,7 +3,7 @@ import type { DataNode } from 'ant-design-vue/es/tree';
 
 import type { SystemDeptApi } from '#/api/system/dept';
 
-import { defineProps, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
new file mode 100644
index 000000000..cccca4dbb
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useTaskStatusClass, useWatchNode } from '../../helpers';
+
+defineOptions({ name: 'EndEventNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const processInstance = inject<Ref<any>>('processInstance', ref({}));
+
+const processInstanceInfos = ref<any[]>([]); // 流程的审批信息
+
+const nodeClick = () => {
+  if (readonly && processInstance && processInstance.value) {
+    console.warn(
+      'TODO 只读模式，弹窗显示审批信息',
+      processInstance.value,
+      processInstanceInfos.value,
+    );
+  }
+};
+</script>
+<template>
+  <div class="end-node-wrapper">
+    <div
+      class="end-node-box cursor-pointer"
+      :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      @click="nodeClick"
+    >
+      <span class="node-fixed-name" title="结束">结束</span>
+    </div>
+  </div>
+  <!-- TODO 审批信息 -->
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
new file mode 100644
index 000000000..01ab889dc
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { message, Popover } from 'ant-design-vue';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_NAME,
+  NodeType,
+  RejectHandlerType,
+} from '../../consts';
+
+defineOptions({
+  name: 'NodeHandler',
+});
+
+const props = defineProps({
+  childNode: {
+    type: Object as () => SimpleFlowNode,
+    default: null,
+  },
+  currentNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const emits = defineEmits(['update:childNode']);
+const popoverShow = ref(false);
+const readonly = inject<Boolean>('readonly'); // 是否只读
+
+const addNode = (type: number) => {
+  // 校验：条件分支、包容分支后面，不允许直接添加并行分支
+  if (
+    type === NodeType.PARALLEL_BRANCH_NODE &&
+    [NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
+      props.currentNode?.type,
+    )
+  ) {
+    message.error('条件分支、包容分支后面，不允许直接添加并行分支');
+    return;
+  }
+
+  popoverShow.value = false;
+  if (type === NodeType.USER_TASK_NODE || type === NodeType.TRANSACTOR_NODE) {
+    const id = `Activity_${generateUUID()}`;
+    const data: SimpleFlowNode = {
+      id,
+      name: NODE_DEFAULT_NAME.get(type) as string,
+      showText: '',
+      type,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      // 超时处理
+      rejectHandler: {
+        type: RejectHandlerType.FINISH_PROCESS,
+      },
+      timeoutHandler: {
+        enable: false,
+      },
+      assignEmptyHandler: {
+        type: AssignEmptyHandlerType.APPROVE,
+      },
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      childNode: props.childNode,
+      taskCreateListener: {
+        enable: false,
+      },
+      taskAssignListener: {
+        enable: false,
+      },
+      taskCompleteListener: {
+        enable: false,
+      },
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
+      showText: '',
+      type: NodeType.COPY_TASK_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.CONDITION_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '条件分支',
+      type: NodeType.CONDITION_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.PARALLEL_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '并行分支',
+      type: NodeType.PARALLEL_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行1',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行2',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '包容分支',
+      type: NodeType.INCLUSIVE_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '包容条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.DELAY_TIMER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
+      showText: '',
+      type: NodeType.DELAY_TIMER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.ROUTER_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      id: `GateWay_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: NodeType.ROUTER_BRANCH_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.TRIGGER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
+      showText: '',
+      type: NodeType.TRIGGER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === NodeType.CHILD_PROCESS_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
+      showText: '',
+      type: NodeType.CHILD_PROCESS_NODE,
+      childNode: props.childNode,
+      childProcessSetting: {
+        calledProcessDefinitionKey: '',
+        calledProcessDefinitionName: '',
+        async: false,
+        skipStartUserNode: false,
+        startUserSetting: {
+          type: 1,
+        },
+        timeoutSetting: {
+          enable: false,
+        },
+        multiInstanceSetting: {
+          enable: false,
+        },
+      },
+    };
+    emits('update:childNode', data);
+  }
+};
+</script>
+<template>
+  <div class="node-handler-wrapper">
+    <div class="node-handler">
+      <Popover trigger="hover" placement="right" width="auto" v-if="!readonly">
+        <template #content>
+          <div class="handler-item-wrapper">
+            <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
+              <div class="approve handler-item-icon">
+                <span class="iconfont icon-approve icon-size"></span>
+              </div>
+              <div class="handler-item-text">审批人</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.TRANSACTOR_NODE)"
+            >
+              <div class="transactor handler-item-icon">
+                <span class="iconfont icon-transactor icon-size"></span>
+              </div>
+              <div class="handler-item-text">办理人</div>
+            </div>
+            <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
+              <div class="handler-item-icon copy">
+                <span class="iconfont icon-size icon-copy"></span>
+              </div>
+              <div class="handler-item-text">抄送</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.CONDITION_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon condition">
+                <span class="iconfont icon-size icon-exclusive"></span>
+              </div>
+              <div class="handler-item-text">条件分支</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon parallel">
+                <span class="iconfont icon-size icon-parallel"></span>
+              </div>
+              <div class="handler-item-text">并行分支</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon inclusive">
+                <span class="iconfont icon-size icon-inclusive"></span>
+              </div>
+              <div class="handler-item-text">包容分支</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.DELAY_TIMER_NODE)"
+            >
+              <div class="handler-item-icon delay">
+                <span class="iconfont icon-size icon-delay"></span>
+              </div>
+              <div class="handler-item-text">延迟器</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.ROUTER_BRANCH_NODE)"
+            >
+              <div class="handler-item-icon router">
+                <span class="iconfont icon-size icon-router"></span>
+              </div>
+              <div class="handler-item-text">路由分支</div>
+            </div>
+            <div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
+              <div class="handler-item-icon trigger">
+                <span class="iconfont icon-size icon-trigger"></span>
+              </div>
+              <div class="handler-item-text">触发器</div>
+            </div>
+            <div
+              class="handler-item"
+              @click="addNode(NodeType.CHILD_PROCESS_NODE)"
+            >
+              <div class="handler-item-icon child-process">
+                <span class="iconfont icon-size icon-child-process"></span>
+              </div>
+              <div class="handler-item-text">子流程</div>
+            </div>
+          </div>
+        </template>
+        <div class="add-icon"><IconifyIcon icon="ep:plus" /></div>
+      </Popover>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
new file mode 100644
index 000000000..748acef32
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import 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);
+    // nodeSetting.value.openDrawer();
+  }
+};
+</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>
+  <!-- TODO 发起人配置节点
+   <StartUserNodeConfig
+    v-if="!readonly && currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+  /> -->
+  <!-- 审批记录  TODO -->
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
new file mode 100644
index 000000000..3e9e7de1e
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { NodeType } from '../consts';
+import { useWatchNode } from '../helpers';
+import EndEventNode from './nodes/end-event-node.vue';
+import StartUserNode from './nodes/start-user-node.vue';
+
+defineOptions({ name: 'ProcessNodeTree' });
+const props = defineProps({
+  parentNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+const emits = defineEmits<{
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+const currentNode = useWatchNode(props);
+
+// 用于删除节点
+// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+const handleModelValueUpdate = (updateValue: any) => {
+  emits('update:flowNode', updateValue);
+};
+
+// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+const triggerFromParentNode = (
+  nodeList: SimpleFlowNode[],
+  nodeType: number,
+) => {
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+};
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  findNode: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!findNode) {
+    return;
+  }
+  if (findNode.type === NodeType.START_USER_NODE) {
+    nodeList.push(findNode);
+    return;
+  }
+
+  if (findNode.type === nodeType) {
+    nodeList.push(findNode);
+  }
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+};
+</script>
+<template>
+  <!-- 发起人节点 -->
+  <StartUserNode
+    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
+    :flow-node="currentNode"
+  />
+  <!-- 审批节点 -->
+  <!-- <UserTaskNode
+    v-if="
+      currentNode &&
+      (currentNode.type === NodeType.USER_TASK_NODE ||
+        currentNode.type === NodeType.TRANSACTOR_NODE)
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 抄送节点 -->
+  <!-- <CopyTaskNode
+    v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 条件节点 -->
+  <!-- <ExclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 并行节点 -->
+  <!-- <ParallelNode
+    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 包容分支节点 -->
+  <!-- <InclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  /> -->
+  <!-- 延迟器节点 -->
+  <!-- <DelayTimerNode
+    v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 路由分支节点 -->
+  <!-- <RouterNode
+    v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 触发器节点 -->
+  <!-- <TriggerNode
+    v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 子流程节点 -->
+  <!-- <ChildProcessNode
+    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  /> -->
+  <!-- 递归显示孩子节点  -->
+  <ProcessNodeTree
+    v-if="currentNode && currentNode.childNode"
+    v-model:flow-node="currentNode.childNode"
+    :parent-node="currentNode"
+    @recursive-find-parent-node="recursiveFindParentNode"
+  />
+
+  <!-- 结束节点 -->
+  <EndEventNode
+    v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
+    :flow-node="currentNode"
+  />
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
new file mode 100644
index 000000000..f817963c0
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../consts';
+
+import type { BpmFormApi } from '#/api/bpm/form';
+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 } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { Button, Modal } from 'ant-design-vue';
+
+import { getFormDetail } from '#/api/bpm/form';
+import { getModel } from '#/api/bpm/model';
+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({
+  modelId: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  modelKey: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  modelName: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  // 可发起流程的人员编号
+  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(20);
+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;
+    // 获取表单字段
+    if (props.modelId) {
+      const bpmnModel = await getModel(props.modelId);
+      if (bpmnModel) {
+        formType.value = bpmnModel.formType;
+        if (formType.value === BpmModelFormType.NORMAL && bpmnModel.formId) {
+          const bpmnForm = (await getFormDetail(
+            bpmnModel.formId,
+          )) as unknown as BpmFormApi.FormVO;
+          formFields.value = bpmnForm?.fields;
+        }
+      }
+    }
+    // 获得角色列表
+    roleOptions.value = await getSimpleRoleList();
+    // 获得岗位列表
+    postOptions.value = await getSimplePostList();
+    // 获得用户列表
+    userOptions.value = await getSimpleUserList();
+    // 获得部门列表
+    const deptList = await getSimpleDeptList();
+    deptOptions.value = deptList;
+    // 转换成树形结构
+    deptTreeOptions.value = handleTree(deptList);
+    // 获取用户组列表
+    userGroupOptions.value = await getUserGroupSimpleList();
+    // 加载流程数据
+    if (processData.value) {
+      processNodeTree.value = processData?.value;
+    } else {
+      updateModel();
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+
+const simpleProcessModelRef = ref();
+
+defineExpose({});
+</script>
+<template>
+  <div v-loading="loading">
+    <SimpleProcessModel
+      ref="simpleProcessModelRef"
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
+    <Modal
+      v-model="errorDialogVisible"
+      title="保存失败"
+      width="400"
+      :fullscreen="false"
+    >
+      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+      <div
+        class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
+        v-for="(item, index) in errorNodes"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      </div>
+      <template #footer>
+        <Button type="primary" @click="errorDialogVisible = false">
+          知道了
+        </Button>
+      </template>
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
new file mode 100644
index 000000000..2495a68fd
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
@@ -0,0 +1,286 @@
+<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 position-relative h-full">
+    <div class="z-index-button-group 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>
+  <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>
+.simple-process-model-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  user-select: none; // 禁用文本选择
+}
+
+.simple-process-model {
+  position: relative; // 确保相对定位
+  min-width: 100%; // 确保宽度为100%
+  min-height: 100%; // 确保高度为100%
+}
+
+.z-index-ButtonGroup {
+  z-index: 10;
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
new file mode 100644
index 000000000..74c910f60
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -0,0 +1,1010 @@
+// TODO 芋艿 这些 常量是不是可以共享
+
+interface DictDataType {
+  label: string;
+  value: number | string;
+}
+
+// 用户任务的审批类型。 【参考飞书】
+export enum ApproveType {
+  /**
+   * 自动通过
+   */
+  AUTO_APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  AUTO_REJECT = 3,
+  /**
+   * 人工审批
+   */
+  USER = 1,
+}
+
+// 多人审批方式类型枚举 （ 用于审批节点 ）
+export enum ApproveMethodType {
+  /**
+   * 多人或签(通过只需一人，拒绝只需一人)
+   */
+  ANY_APPROVE = 3,
+
+  /**
+   * 多人会签(按通过比例)
+   */
+  APPROVE_BY_RATIO = 2,
+
+  /**
+   * 随机挑选一人审批
+   */
+  RANDOM_SELECT_ONE_APPROVE = 1,
+  /**
+   * 多人依次审批
+   */
+  SEQUENTIAL_APPROVE = 4,
+}
+
+/**
+ * 任务状态枚举
+ */
+export enum TaskStatusEnum {
+  /**
+   * 审批通过
+   */
+  APPROVE = 2,
+
+  /**
+   * 审批通过中
+   */
+  APPROVING = 7,
+  /**
+   * 已取消
+   */
+  CANCEL = 4,
+  /**
+   * 未开始
+   */
+  NOT_START = -1,
+
+  /**
+   * 审批不通过
+   */
+  REJECT = 3,
+
+  /**
+   * 已退回
+   */
+  RETURN = 5,
+  /**
+   * 审批中
+   */
+  RUNNING = 1,
+  /**
+   * 待审批
+   */
+  WAIT = 0,
+}
+
+/**
+ * 节点类型
+ */
+export enum NodeType {
+  /**
+   * 子流程节点
+   */
+  CHILD_PROCESS_NODE = 20,
+  /**
+   * 条件分支节点 (对应排他网关)
+   */
+  CONDITION_BRANCH_NODE = 51,
+  /**
+   * 条件节点
+   */
+  CONDITION_NODE = 50,
+
+  /**
+   * 抄送人节点
+   */
+  COPY_TASK_NODE = 12,
+
+  /**
+   * 延迟器节点
+   */
+  DELAY_TIMER_NODE = 14,
+
+  /**
+   * 结束节点
+   */
+  END_EVENT_NODE = 1,
+
+  /**
+   * 包容分支节点 (对应包容网关)
+   */
+  INCLUSIVE_BRANCH_NODE = 53,
+
+  /**
+   * 并行分支节点 (对应并行网关)
+   */
+  PARALLEL_BRANCH_NODE = 52,
+
+  /**
+   * 路由分支节点
+   */
+  ROUTER_BRANCH_NODE = 54,
+  /**
+   * 发起人节点
+   */
+  START_USER_NODE = 10,
+  /**
+   * 办理人节点
+   */
+  TRANSACTOR_NODE = 13,
+
+  /**
+   * 触发器节点
+   */
+  TRIGGER_NODE = 15,
+  /**
+   * 审批人节点
+   */
+  USER_TASK_NODE = 11,
+}
+
+export enum NodeId {
+  /**
+   * 发起人节点 Id
+   */
+  END_EVENT_NODE_ID = 'EndEvent',
+
+  /**
+   * 发起人节点 Id
+   */
+  START_USER_NODE_ID = 'StartUserNode',
+}
+
+// 条件配置类型 （ 用于条件节点配置 ）
+export enum ConditionType {
+  /**
+   * 条件表达式
+   */
+  EXPRESSION = 1,
+
+  /**
+   * 条件规则
+   */
+  RULE = 2,
+}
+
+// 操作按钮类型枚举 (用于审批节点)
+export enum OperationButtonType {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
+// 审批拒绝类型枚举
+export enum RejectHandlerType {
+  /**
+   * 结束流程
+   */
+  FINISH_PROCESS = 1,
+  /**
+   * 驳回到指定节点
+   */
+  RETURN_USER_TASK = 2,
+}
+
+// 用户任务超时处理类型枚举
+export enum TimeoutHandlerType {
+  /**
+   * 自动同意
+   */
+  APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 3,
+  /**
+   * 自动提醒
+   */
+  REMINDER = 1,
+}
+
+// 用户任务的审批人为空时，处理类型枚举
+export enum AssignEmptyHandlerType {
+  /**
+   * 自动通过
+   */
+  APPROVE = 1,
+  /**
+   * 转交给流程管理员
+   */
+  ASSIGN_ADMIN = 4,
+  /**
+   * 指定人员审批
+   */
+  ASSIGN_USER = 3,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 2,
+}
+
+// 用户任务的审批人与发起人相同时，处理类型枚举
+export enum AssignStartUserHandlerType {
+  /**
+   * 转交给部门负责人审批
+   */
+  ASSIGN_DEPT_LEADER = 3,
+  /**
+   * 自动跳过【参考飞书】：1）如果当前节点还有其他审批人，则交由其他审批人进行审批；2）如果当前节点没有其他审批人，则该节点自动通过
+   */
+  SKIP = 2,
+  /**
+   * 由发起人对自己审批
+   */
+  START_USER_AUDIT = 1,
+}
+
+// 时间单位枚举
+export enum TimeUnitType {
+  /**
+   * 天
+   */
+  DAY = 3,
+  /**
+   * 小时
+   */
+  HOUR = 2,
+  /**
+   * 分钟
+   */
+  MINUTE = 1,
+}
+
+/**
+ * 表单权限的枚举
+ */
+export enum FieldPermissionType {
+  /**
+   * 隐藏
+   */
+  NONE = '3',
+  /**
+   * 只读
+   */
+  READ = '1',
+  /**
+   * 编辑
+   */
+  WRITE = '2',
+}
+
+/**
+ * 延迟类型
+ */
+export enum DelayTypeEnum {
+  /**
+   * 固定日期时间
+   */
+  FIXED_DATE_TIME = 2,
+  /**
+   * 固定时长
+   */
+  FIXED_TIME_DURATION = 1,
+}
+
+/**
+ * 触发器类型枚举
+ */
+export enum TriggerTypeEnum {
+  /**
+   * 表单数据删除触发器
+   */
+  FORM_DELETE = 11,
+  /**
+   * 表单数据更新触发器
+   */
+  FORM_UPDATE = 10,
+  /**
+   * 接收 HTTP 回调请求触发器
+   */
+  HTTP_CALLBACK = 2,
+  /**
+   * 发送 HTTP 请求触发器
+   */
+  HTTP_REQUEST = 1,
+}
+
+export enum ChildProcessStartUserTypeEnum {
+  /**
+   * 表单
+   */
+  FROM_FORM = 2,
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+}
+
+export enum ChildProcessStartUserEmptyTypeEnum {
+  /**
+   * 子流程管理员
+   */
+  CHILD_PROCESS_ADMIN = 2,
+  /**
+   * 主流程管理员
+   */
+  MAIN_PROCESS_ADMIN = 3,
+  /**
+   * 同主流程发起人
+   */
+  MAIN_PROCESS_START_USER = 1,
+}
+
+export enum ChildProcessMultiInstanceSourceTypeEnum {
+  /**
+   * 固定数量
+   */
+  FIXED_QUANTITY = 1,
+  /**
+   * 多选表单
+   */
+  MULTIPLE_FORM = 3,
+  /**
+   * 数字表单
+   */
+  NUMBER_FORM = 2,
+}
+
+// 候选人策略枚举 （ 用于审批节点。抄送节点 )
+export enum CandidateStrategy {
+  /**
+   * 审批人自选
+   */
+  APPROVE_USER_SELECT = 34,
+  /**
+   * 部门的负责人
+   */
+  DEPT_LEADER = 21,
+  /**
+   * 部门成员
+   */
+  DEPT_MEMBER = 20,
+  /**
+   * 流程表达式
+   */
+  EXPRESSION = 60,
+  /**
+   * 表单内部门负责人
+   */
+  FORM_DEPT_LEADER = 51,
+  /**
+   * 表单内用户字段
+   */
+  FORM_USER = 50,
+  /**
+   * 连续多级部门的负责人
+   */
+  MULTI_LEVEL_DEPT_LEADER = 23,
+  /**
+   * 指定岗位
+   */
+  POST = 22,
+  /**
+   * 指定角色
+   */
+  ROLE = 10,
+  /**
+   * 发起人自己
+   */
+  START_USER = 36,
+  /**
+   * 发起人部门负责人
+   */
+  START_USER_DEPT_LEADER = 37,
+  /**
+   * 发起人连续多级部门的负责人
+   */
+  START_USER_MULTI_LEVEL_DEPT_LEADER = 38,
+  /**
+   * 发起人自选
+   */
+  START_USER_SELECT = 35,
+  /**
+   * 指定用户
+   */
+  USER = 30,
+  /**
+   * 指定用户组
+   */
+  USER_GROUP = 40,
+}
+
+export enum BpmHttpRequestParamTypeEnum {
+  /**
+   * 固定值
+   */
+  FIXED_VALUE = 1,
+  /**
+   * 表单
+   */
+  FROM_FORM = 2,
+}
+
+// 这里定义 HTTP 请求参数类型
+export type HttpRequestParam = {
+  key: string;
+  type: number;
+  value: string;
+};
+
+// 监听器结构定义
+export type ListenerHandler = {
+  body?: HttpRequestParam[];
+  enable: boolean;
+  header?: HttpRequestParam[];
+  path?: string;
+};
+
+/**
+ * 条件规则结构定义
+ */
+export type ConditionRule = {
+  leftSide: string;
+  opCode: string;
+  rightSide: string;
+};
+
+/**
+ * 条件结构定义
+ */
+export type Condition = {
+  // 条件规则的逻辑关系是否为且
+  and: boolean;
+  rules: ConditionRule[];
+};
+
+/**
+ * 条件组结构定义
+ */
+export type ConditionGroup = {
+  // 条件组的逻辑关系是否为且
+  and: boolean;
+  // 条件数组
+  conditions: Condition[];
+};
+
+/**
+ * 条件节点设置结构定义，用于条件节点
+ */
+export type ConditionSetting = {
+  // 条件表达式
+  conditionExpression?: string;
+  // 条件组
+  conditionGroups?: ConditionGroup;
+  // 条件类型
+  conditionType?: ConditionType;
+  // 是否默认的条件
+  defaultFlow?: boolean;
+};
+
+/**
+ * 审批拒绝结构定义
+ */
+export type RejectHandler = {
+  // 退回节点 Id
+  returnNodeId?: string;
+  // 审批拒绝类型
+  type: RejectHandlerType;
+};
+
+/**
+ * 审批超时结构定义
+ */
+export type TimeoutHandler = {
+  // 是否开启超时处理
+  enable: boolean;
+  // 执行动作是自动提醒, 最大提醒次数
+  maxRemindCount?: number;
+  // 超时时间设置
+  timeDuration?: string;
+  // 超时执行的动作
+  type?: number;
+};
+
+/**
+ * 审批人为空的结构定义
+ */
+export type AssignEmptyHandler = {
+  // 审批人为空的处理类型
+  type: AssignEmptyHandlerType;
+  // 指定用户的编号数组
+  userIds?: number[];
+};
+
+/**
+ * 延迟设置
+ */
+export type DelaySetting = {
+  // 延迟时间表达式
+  delayTime: string;
+  // 延迟类型
+  delayType: number;
+};
+
+/**
+ * 路由分支结构定义
+ */
+export type RouterSetting = {
+  conditionExpression: string;
+  conditionGroups: ConditionGroup;
+  conditionType: ConditionType;
+  nodeId: string;
+};
+
+/**
+ * 操作按钮权限结构定义
+ */
+export type ButtonSetting = {
+  displayName: string;
+  enable: boolean;
+  id: OperationButtonType;
+};
+
+/**
+ * HTTP 请求触发器结构定义
+ */
+export type HttpRequestTriggerSetting = {
+  // 请求体参数设置
+  body?: HttpRequestParam[];
+  // 请求头参数设置
+  header?: HttpRequestParam[];
+  // 请求响应设置
+  response?: Record<string, string>[];
+  // 请求 URL
+  url: string;
+};
+
+/**
+ * 流程表单触发器配置结构定义
+ */
+export type FormTriggerSetting = {
+  // 条件表达式
+  conditionExpression?: string;
+  // 条件组
+  conditionGroups?: ConditionGroup;
+  // 条件类型
+  conditionType?: ConditionType;
+  // 删除表单字段配置
+  deleteFields?: string[];
+  // 更新表单字段配置
+  updateFormFields?: Record<string, any>;
+};
+
+/**
+ * 触发器节点结构定义
+ */
+export type TriggerSetting = {
+  formSettings?: FormTriggerSetting[];
+  httpRequestSetting?: HttpRequestTriggerSetting;
+  type: TriggerTypeEnum;
+};
+
+export type IOParameter = {
+  source: string;
+  target: string;
+};
+
+export type StartUserSetting = {
+  emptyType?: ChildProcessStartUserEmptyTypeEnum;
+  formField?: string;
+  type: ChildProcessStartUserTypeEnum;
+};
+
+export type TimeoutSetting = {
+  enable: boolean;
+  timeExpression?: string;
+  type?: DelayTypeEnum;
+};
+
+export type MultiInstanceSetting = {
+  approveRatio?: number;
+  enable: boolean;
+  sequential?: boolean;
+  source?: string;
+  sourceType?: ChildProcessMultiInstanceSourceTypeEnum;
+};
+
+/**
+ * 子流程节点结构定义
+ */
+export type ChildProcessSetting = {
+  async: boolean;
+  calledProcessDefinitionKey: string;
+  calledProcessDefinitionName: string;
+  inVariables?: IOParameter[];
+  multiInstanceSetting: MultiInstanceSetting;
+  outVariables?: IOParameter[];
+  skipStartUserNode: boolean;
+  startUserSetting: StartUserSetting;
+  timeoutSetting: TimeoutSetting;
+};
+
+/**
+ *  节点结构定义
+ */
+export interface SimpleFlowNode {
+  id: string;
+  type: NodeType;
+  name: string;
+  showText?: string;
+  // 孩子节点
+  childNode?: SimpleFlowNode;
+  // 条件节点
+  conditionNodes?: SimpleFlowNode[];
+  // 审批类型
+  approveType?: ApproveType;
+  // 候选人策略
+  candidateStrategy?: number;
+  // 候选人参数
+  candidateParam?: string;
+  // 多人审批方式
+  approveMethod?: ApproveMethodType;
+  // 通过比例
+  approveRatio?: number;
+  // 审批按钮设置
+  buttonsSetting?: any[];
+  // 表单权限
+  fieldsPermission?: Array<Record<string, any>>;
+  // 审批任务超时处理
+  timeoutHandler?: TimeoutHandler;
+  // 审批任务拒绝处理
+  rejectHandler?: RejectHandler;
+  // 审批人为空的处理
+  assignEmptyHandler?: AssignEmptyHandler;
+  // 审批节点的审批人与发起人相同时，对应的处理类型
+  assignStartUserHandlerType?: number;
+  // 创建任务监听器
+  taskCreateListener?: ListenerHandler;
+  // 创建任务监听器
+  taskAssignListener?: ListenerHandler;
+  // 创建任务监听器
+  taskCompleteListener?: ListenerHandler;
+  // 条件设置
+  conditionSetting?: ConditionSetting;
+  // 活动的状态，用于前端节点状态展示
+  activityStatus?: TaskStatusEnum;
+  // 延迟设置
+  delaySetting?: DelaySetting;
+  // 路由分支
+  routerGroups?: RouterSetting[];
+  defaultFlowId?: string;
+  // 签名
+  signEnable?: boolean;
+  // 审批意见
+  reasonRequire?: boolean;
+  // 触发器设置
+  triggerSetting?: TriggerSetting;
+  // 子流程
+  childProcessSetting?: ChildProcessSetting;
+}
+
+/**
+ * 条件组默认值
+ */
+export const DEFAULT_CONDITION_GROUP_VALUE = {
+  and: true,
+  conditions: [
+    {
+      and: true,
+      rules: [
+        {
+          opCode: '==',
+          leftSide: '',
+          rightSide: '',
+        },
+      ],
+    },
+  ],
+};
+
+export const NODE_DEFAULT_TEXT = new Map<number, string>();
+NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人');
+NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人');
+NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件');
+NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人');
+NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器');
+NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点');
+NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器');
+NODE_DEFAULT_TEXT.set(NodeType.TRANSACTOR_NODE, '请设置办理人');
+NODE_DEFAULT_TEXT.set(NodeType.CHILD_PROCESS_NODE, '请设置子流程');
+
+export const NODE_DEFAULT_NAME = new Map<number, string>();
+NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人');
+NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人');
+NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件');
+NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人');
+NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器');
+NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支');
+NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器');
+NODE_DEFAULT_NAME.set(NodeType.TRANSACTOR_NODE, '办理人');
+NODE_DEFAULT_NAME.set(NodeType.CHILD_PROCESS_NODE, '子流程');
+
+// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
+export const CANDIDATE_STRATEGY: DictDataType[] = [
+  { label: '指定成员', value: CandidateStrategy.USER as any },
+  { label: '指定角色', value: CandidateStrategy.ROLE as any },
+  { label: '指定岗位', value: CandidateStrategy.POST as any },
+  { label: '部门成员', value: CandidateStrategy.DEPT_MEMBER as any },
+  { label: '部门负责人', value: CandidateStrategy.DEPT_LEADER as any },
+  {
+    label: '连续多级部门负责人',
+    value: CandidateStrategy.MULTI_LEVEL_DEPT_LEADER as any,
+  },
+  { label: '发起人自选', value: CandidateStrategy.START_USER_SELECT as any },
+  { label: '审批人自选', value: CandidateStrategy.APPROVE_USER_SELECT as any },
+  { label: '发起人本人', value: CandidateStrategy.START_USER as any },
+  {
+    label: '发起人部门负责人',
+    value: CandidateStrategy.START_USER_DEPT_LEADER as any,
+  },
+  {
+    label: '发起人连续部门负责人',
+    value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER as any,
+  },
+  { label: '用户组', value: CandidateStrategy.USER_GROUP as any },
+  { label: '表单内用户字段', value: CandidateStrategy.FORM_USER as any },
+  {
+    label: '表单内部门负责人',
+    value: CandidateStrategy.FORM_DEPT_LEADER as any,
+  },
+  { label: '流程表达式', value: CandidateStrategy.EXPRESSION as any },
+];
+// 审批节点 的审批类型
+export const APPROVE_TYPE: DictDataType[] = [
+  { label: '人工审批', value: ApproveType.USER as any },
+  { label: '自动通过', value: ApproveType.AUTO_APPROVE as any },
+  { label: '自动拒绝', value: ApproveType.AUTO_REJECT as any },
+];
+
+export const APPROVE_METHODS: DictDataType[] = [
+  {
+    label: '按顺序依次审批',
+    value: ApproveMethodType.SEQUENTIAL_APPROVE as any,
+  },
+  {
+    label: '会签（可同时审批，至少 % 人必须审批通过）',
+    value: ApproveMethodType.APPROVE_BY_RATIO as any,
+  },
+  {
+    label: '或签(可同时审批，有一人通过即可)',
+    value: ApproveMethodType.ANY_APPROVE as any,
+  },
+  {
+    label: '随机挑选一人审批',
+    value: ApproveMethodType.RANDOM_SELECT_ONE_APPROVE as any,
+  },
+];
+
+export const CONDITION_CONFIG_TYPES: DictDataType[] = [
+  { label: '条件规则', value: ConditionType.RULE as any },
+  { label: '条件表达式', value: ConditionType.EXPRESSION as any },
+];
+
+// 时间单位类型
+export const TIME_UNIT_TYPES: DictDataType[] = [
+  { label: '分钟', value: TimeUnitType.MINUTE as any },
+  { label: '小时', value: TimeUnitType.HOUR as any },
+  { label: '天', value: TimeUnitType.DAY as any },
+];
+// 超时处理执行动作类型
+export const TIMEOUT_HANDLER_TYPES: DictDataType[] = [
+  { label: '自动提醒', value: 1 },
+  { label: '自动同意', value: 2 },
+  { label: '自动拒绝', value: 3 },
+];
+export const REJECT_HANDLER_TYPES: DictDataType[] = [
+  { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS as any },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK as any },
+  // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
+];
+export const ASSIGN_EMPTY_HANDLER_TYPES: DictDataType[] = [
+  { label: '自动通过', value: 1 },
+  { label: '自动拒绝', value: 2 },
+  { label: '指定成员审批', value: 3 },
+  { label: '转交给流程管理员', value: 4 },
+];
+export const ASSIGN_START_USER_HANDLER_TYPES: DictDataType[] = [
+  { label: '由发起人对自己审批', value: 1 },
+  { label: '自动跳过', value: 2 },
+  { label: '转交给部门负责人审批', value: 3 },
+];
+
+// 比较运算符
+export const COMPARISON_OPERATORS: DictDataType[] = [
+  {
+    value: '==',
+    label: '等于',
+  },
+  {
+    value: '!=',
+    label: '不等于',
+  },
+  {
+    value: '>',
+    label: '大于',
+  },
+  {
+    value: '>=',
+    label: '大于等于',
+  },
+  {
+    value: '<',
+    label: '小于',
+  },
+  {
+    value: '<=',
+    label: '小于等于',
+  },
+];
+// 审批操作按钮名称
+export const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办');
+OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派');
+OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签');
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回');
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送');
+
+// 默认的按钮权限设置
+export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: true },
+];
+
+// 办理人默认的按钮权限设置
+export const TRANSACTOR_DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '办理', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false },
+];
+
+// 发起人的按钮权限。暂时定死，不可以编辑
+export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '提交', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false },
+];
+
+export const MULTI_LEVEL_DEPT: DictDataType[] = [
+  { label: '第 1 级部门', value: 1 },
+  { label: '第 2 级部门', value: 2 },
+  { label: '第 3 级部门', value: 3 },
+  { label: '第 4 级部门', value: 4 },
+  { label: '第 5 级部门', value: 5 },
+  { label: '第 6 级部门', value: 6 },
+  { label: '第 7 级部门', value: 7 },
+  { label: '第 8 级部门', value: 8 },
+  { label: '第 9 级部门', value: 9 },
+  { label: '第 10 级部门', value: 10 },
+  { label: '第 11 级部门', value: 11 },
+  { label: '第 12 级部门', value: 12 },
+  { label: '第 13 级部门', value: 13 },
+  { label: '第 14 级部门', value: 14 },
+  { label: '第 15 级部门', value: 15 },
+];
+
+/**
+ * 流程实例的变量枚举
+ */
+export enum ProcessVariableEnum {
+  /**
+   * 流程定义名称
+   */
+  PROCESS_DEFINITION_NAME = 'PROCESS_DEFINITION_NAME',
+  /**
+   * 发起时间
+   */
+  START_TIME = 'PROCESS_START_TIME',
+  /**
+   * 发起用户 ID
+   */
+  START_USER_ID = 'PROCESS_START_USER_ID',
+}
+
+export const DELAY_TYPE = [
+  { label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
+  { label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME },
+];
+
+export const BPM_HTTP_REQUEST_PARAM_TYPES = [
+  {
+    value: 1,
+    label: '固定值',
+  },
+  {
+    value: 2,
+    label: '表单',
+  },
+];
+
+export const TRIGGER_TYPES: DictDataType[] = [
+  { label: '发送 HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST as any },
+  { label: '接收 HTTP 回调', value: TriggerTypeEnum.HTTP_CALLBACK as any },
+  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE as any },
+  { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE as any },
+];
+
+export const CHILD_PROCESS_START_USER_TYPE = [
+  {
+    label: '同主流程发起人',
+    value: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
+  },
+  { label: '表单', value: ChildProcessStartUserTypeEnum.FROM_FORM },
+];
+
+export const CHILD_PROCESS_START_USER_EMPTY_TYPE = [
+  {
+    label: '同主流程发起人',
+    value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER,
+  },
+  {
+    label: '子流程管理员',
+    value: ChildProcessStartUserEmptyTypeEnum.CHILD_PROCESS_ADMIN,
+  },
+  {
+    label: '主流程管理员',
+    value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_ADMIN,
+  },
+];
+
+export const CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE = [
+  {
+    label: '固定数量',
+    value: ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY,
+  },
+  {
+    label: '数字表单',
+    value: ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM,
+  },
+  {
+    label: '多选表单',
+    value: ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM,
+  },
+];
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
new file mode 100644
index 000000000..281572815
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -0,0 +1,739 @@
+import type { Ref } from 'vue';
+
+import type {
+  ConditionGroup,
+  HttpRequestParam,
+  SimpleFlowNode,
+} from './consts';
+
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, ref, toRaw, unref, watch } from 'vue';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  CandidateStrategy,
+  COMPARISON_OPERATORS,
+  ConditionType,
+  FieldPermissionType,
+  NODE_DEFAULT_NAME,
+  NodeType,
+  ProcessVariableEnum,
+  RejectHandlerType,
+  TaskStatusEnum,
+} from './consts';
+
+export function useWatchNode(props: {
+  flowNode: SimpleFlowNode;
+}): Ref<SimpleFlowNode> {
+  const node = ref<SimpleFlowNode>(props.flowNode);
+  watch(
+    () => props.flowNode,
+    (newValue) => {
+      node.value = newValue;
+    },
+  );
+  return node;
+}
+
+// 解析 formCreate 所有表单字段, 并返回
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = [];
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result);
+    });
+  }
+  return result;
+};
+
+/**
+ * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
+ *
+ * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
+ * @param fields 解析后表单组件字段
+ * @param parentTitle  如果是子表单，子表单的标题，默认为空
+ */
+export const parseFormFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>> = [],
+  parentTitle: string = '',
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule;
+  if (field && tempTitle) {
+    let title = tempTitle;
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`;
+    }
+    let required = false;
+    if ($required) {
+      required = true;
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required,
+    });
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFormFields(rule, fields);
+    });
+  }
+};
+
+/**
+ * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
+ */
+export function useFormFieldsPermission(
+  defaultPermission: FieldPermissionType,
+) {
+  // 字段权限配置. 需要有 field, title,  permissioin 属性
+  const fieldsPermissionConfig = ref<Array<Record<string, any>>>([]);
+
+  const formType = inject<Ref<number | undefined>>('formType', ref()); // 表单类型
+
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+
+  const getNodeConfigFormFields = (
+    nodeFormFields?: Array<Record<string, string>>,
+  ) => {
+    nodeFormFields = toRaw(nodeFormFields);
+    fieldsPermissionConfig.value =
+      !nodeFormFields || nodeFormFields.length === 0
+        ? getDefaultFieldsPermission(unref(formFields))
+        : mergeFieldsPermission(nodeFormFields, unref(formFields));
+  };
+  // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
+  const mergeFieldsPermission = (
+    formFieldsPermisson: Array<Record<string, string>>,
+    formFields?: string[],
+  ) => {
+    let mergedFieldsPermission: Array<Record<string, any>> = [];
+    if (formFields) {
+      mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
+        const found = formFieldsPermisson.find(
+          (fieldPermission) => fieldPermission.field === item.field,
+        );
+        return {
+          field: item.field,
+          title: item.title,
+          permission: found ? found.permission : defaultPermission,
+        };
+      });
+    }
+    return mergedFieldsPermission;
+  };
+
+  // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
+  const getDefaultFieldsPermission = (formFields?: string[]) => {
+    let defaultFieldsPermission: Array<Record<string, any>> = [];
+    if (formFields) {
+      defaultFieldsPermission = parseFormCreateFields(formFields).map(
+        (item) => {
+          return {
+            field: item.field,
+            title: item.title,
+            permission: defaultPermission,
+          };
+        },
+      );
+    }
+    return defaultFieldsPermission;
+  };
+
+  // 获取表单的所有字段，作为下拉框选项
+  const formFieldOptions = parseFormCreateFields(unref(formFields));
+
+  return {
+    formType,
+    fieldsPermissionConfig,
+    formFieldOptions,
+    getNodeConfigFormFields,
+  };
+}
+
+/**
+ * @description 获取流程表单的字段
+ */
+export function useFormFields() {
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  return parseFormCreateFields(unref(formFields));
+}
+
+// TODO @芋艿：后续需要把各种类似 useFormFieldsPermission 的逻辑，抽成一个通用方法。
+/**
+ * @description 获取流程表单的字段和发起人字段
+ */
+export function useFormFieldsAndStartUser() {
+  const injectFormFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const formFields = parseFormCreateFields(unref(injectFormFields));
+  // 添加发起人
+  formFields.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    required: true,
+  });
+  return formFields;
+}
+
+export type UserTaskFormType = {
+  approveMethod: ApproveMethodType;
+  approveRatio?: number;
+  assignEmptyHandlerType?: AssignEmptyHandlerType;
+  assignEmptyHandlerUserIds?: number[];
+  assignStartUserHandlerType?: AssignStartUserHandlerType;
+  buttonsSetting: any[];
+  candidateStrategy: CandidateStrategy;
+  deptIds?: number[]; // 部门
+  deptLevel?: number; // 部门层级
+  expression?: string; // 流程表达式
+  formDept?: string; // 表单内部门字段
+  formUser?: string; // 表单内用户字段
+  maxRemindCount?: number;
+  postIds?: number[]; // 岗位
+  reasonRequire: boolean;
+  rejectHandlerType?: RejectHandlerType;
+  returnNodeId?: string;
+  roleIds?: number[]; // 角色
+  signEnable: boolean;
+  taskAssignListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskAssignListenerEnable?: boolean;
+  taskAssignListenerPath?: string;
+  taskCompleteListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskCompleteListenerEnable?: boolean;
+  taskCompleteListenerPath?: string;
+  taskCreateListener?: {
+    body: HttpRequestParam[];
+    header: HttpRequestParam[];
+  };
+  taskCreateListenerEnable?: boolean;
+  taskCreateListenerPath?: string;
+  timeDuration?: number;
+  timeoutHandlerEnable?: boolean;
+  timeoutHandlerType?: number;
+  userGroups?: number[]; // 用户组
+  userIds?: number[]; // 用户
+};
+
+export type CopyTaskFormType = {
+  candidateStrategy: CandidateStrategy;
+  deptIds?: number[]; // 部门
+  deptLevel?: number; // 部门层级
+  expression?: string; // 流程表达式
+  formDept?: string; // 表单内部门字段
+  formUser?: string; // 表单内用户字段
+  postIds?: number[]; // 岗位
+  roleIds?: number[]; // 角色
+  userGroups?: number[]; // 用户组
+  userIds?: number[]; // 用户
+};
+
+/**
+ * @description 节点表单数据。 用于审批节点、抄送节点
+ */
+export function useNodeForm(nodeType: NodeType) {
+  const roleOptions = inject<Ref<SystemRoleApi.Role[]>>('roleList', ref([])); // 角色列表
+  const postOptions = inject<Ref<SystemPostApi.Post[]>>('postList', ref([])); // 岗位列表
+  const userOptions = inject<Ref<SystemUserApi.User[]>>('userList', ref([])); // 用户列表
+  const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList', ref([])); // 部门列表
+  const userGroupOptions = inject<Ref<BpmUserGroupApi.UserGroupVO[]>>(
+    'userGroupList',
+    ref([]),
+  ); // 用户组列表
+  const deptTreeOptions = inject<Ref<SystemDeptApi.Dept[]>>(
+    'deptTree',
+    ref([]),
+  ); // 部门树
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
+
+  // eslint-disable-next-line unicorn/prefer-ternary
+  if (
+    nodeType === NodeType.USER_TASK_NODE ||
+    nodeType === NodeType.TRANSACTOR_NODE
+  ) {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
+      approveRatio: 100,
+      rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
+      returnNodeId: '',
+      timeoutHandlerEnable: false,
+      timeoutHandlerType: 1,
+      timeDuration: 6, // 默认 6小时
+      maxRemindCount: 1, // 默认 提醒 1次
+      buttonsSetting: [],
+    };
+  } else {
+    configForm.value = {
+      candidateStrategy: CandidateStrategy.USER,
+    };
+  }
+
+  const getShowText = (): string => {
+    let showText = '';
+    // 指定成员
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.USER &&
+      configForm.value?.userIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      userOptions?.value.forEach((item: any) => {
+        if (configForm.value?.userIds?.includes(item.id)) {
+          candidateNames.push(item.nickname);
+        }
+      });
+      showText = `指定成员：${candidateNames.join(',')}`;
+    }
+    // 指定角色
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.ROLE &&
+      configForm.value.roleIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      roleOptions?.value.forEach((item: any) => {
+        if (configForm.value?.roleIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定角色：${candidateNames.join(',')}`;
+    }
+    // 指定部门
+    if (
+      (configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+        configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+        configForm.value?.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) &&
+      configForm.value?.deptIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      deptOptions?.value.forEach((item) => {
+        if (configForm.value?.deptIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      if (
+        configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER
+      ) {
+        showText = `部门成员：${candidateNames.join(',')}`;
+      } else if (
+        configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
+      ) {
+        showText = `部门的负责人：${candidateNames.join(',')}`;
+      } else {
+        showText = `多级部门的负责人：${candidateNames.join(',')}`;
+      }
+    }
+
+    // 指定岗位
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.POST &&
+      configForm.value.postIds?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      postOptions?.value.forEach((item) => {
+        if (configForm.value?.postIds?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定岗位: ${candidateNames.join(',')}`;
+    }
+    // 指定用户组
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP &&
+      configForm.value?.userGroups?.length > 0
+    ) {
+      const candidateNames: string[] = [];
+      userGroupOptions?.value.forEach((item) => {
+        if (configForm.value?.userGroups?.includes(item.id)) {
+          candidateNames.push(item.name);
+        }
+      });
+      showText = `指定用户组: ${candidateNames.join(',')}`;
+    }
+
+    // 表单内用户字段
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
+      const formFieldOptions = parseFormCreateFields(unref(formFields));
+      const item = formFieldOptions.find(
+        (item) => item.field === configForm.value?.formUser,
+      );
+      showText = `表单用户：${item?.title}`;
+    }
+
+    // 表单内部门负责人
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+    ) {
+      showText = `表单内部门负责人`;
+    }
+
+    // 审批人自选
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.APPROVE_USER_SELECT
+    ) {
+      showText = `审批人自选`;
+    }
+
+    // 发起人自选
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_SELECT
+    ) {
+      showText = `发起人自选`;
+    }
+    // 发起人自己
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
+      showText = `发起人自己`;
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_DEPT_LEADER
+    ) {
+      showText = `发起人的部门负责人`;
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy ===
+      CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      showText = `发起人连续部门负责人`;
+    }
+    // 流程表达式
+    if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      showText = `流程表达式：${configForm.value.expression}`;
+    }
+    return showText;
+  };
+
+  /**
+   *  处理候选人参数的赋值
+   */
+  const handleCandidateParam = () => {
+    let candidateParam: string | undefined;
+    if (!configForm.value) {
+      return candidateParam;
+    }
+    switch (configForm.value.candidateStrategy) {
+      case CandidateStrategy.DEPT_LEADER:
+      case CandidateStrategy.DEPT_MEMBER: {
+        candidateParam = configForm.value.deptIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.EXPRESSION: {
+        candidateParam = configForm.value.expression;
+        break;
+      }
+      // 表单内部门的负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
+        const deptFieldOnForm = configForm.value.formDept;
+        candidateParam = deptFieldOnForm?.concat(
+          `|${configForm.value.deptLevel}`,
+        );
+        break;
+      }
+      case CandidateStrategy.FORM_USER: {
+        candidateParam = configForm.value?.formUser;
+        break;
+      }
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const deptIds = configForm.value.deptIds?.join(',');
+        candidateParam = deptIds?.concat(`|${configForm.value.deptLevel}`);
+        break;
+      }
+      case CandidateStrategy.POST: {
+        candidateParam = configForm.value.postIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.ROLE: {
+        candidateParam = configForm.value.roleIds?.join(',');
+        break;
+      }
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
+        candidateParam = `${configForm.value.deptLevel}`;
+        break;
+      }
+      case CandidateStrategy.USER: {
+        candidateParam = configForm.value.userIds?.join(',');
+        break;
+      }
+      case CandidateStrategy.USER_GROUP: {
+        candidateParam = configForm.value.userGroups?.join(',');
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    return candidateParam;
+  };
+  /**
+   *  解析候选人参数
+   */
+  const parseCandidateParam = (
+    candidateStrategy: CandidateStrategy,
+    candidateParam: string | undefined,
+  ) => {
+    if (!configForm.value || !candidateParam) {
+      return;
+    }
+    switch (candidateStrategy) {
+      case CandidateStrategy.DEPT_LEADER:
+      case CandidateStrategy.DEPT_MEMBER: {
+        configForm.value.deptIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.EXPRESSION: {
+        configForm.value.expression = candidateParam;
+        break;
+      }
+      // 表单内的部门负责人
+      case CandidateStrategy.FORM_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
+        const paramArray = candidateParam.split('|');
+        if (paramArray.length > 1) {
+          configForm.value.formDept = paramArray[0];
+          if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
+        }
+        break;
+      }
+      case CandidateStrategy.FORM_USER: {
+        configForm.value.formUser = candidateParam;
+        break;
+      }
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const paramArray = candidateParam.split('|') as string[];
+        if (paramArray.length > 1) {
+          configForm.value.deptIds = paramArray[0]
+            ?.split(',')
+            .map((item) => +item);
+          if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
+        }
+        break;
+      }
+      case CandidateStrategy.POST: {
+        configForm.value.postIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.ROLE: {
+        configForm.value.roleIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
+        configForm.value.deptLevel = +candidateParam;
+        break;
+      }
+      case CandidateStrategy.USER: {
+        configForm.value.userIds = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      case CandidateStrategy.USER_GROUP: {
+        configForm.value.userGroups = candidateParam
+          .split(',')
+          .map((item) => +item);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  };
+  return {
+    configForm,
+    roleOptions,
+    postOptions,
+    userOptions,
+    userGroupOptions,
+    deptTreeOptions,
+    handleCandidateParam,
+    parseCandidateParam,
+    getShowText,
+  };
+}
+
+/**
+ * @description 抽屉配置
+ */
+export function useDrawer() {
+  // 抽屉配置是否可见
+  const settingVisible = ref(false);
+  // 关闭配置抽屉
+  const closeDrawer = () => {
+    settingVisible.value = false;
+  };
+  // 打开配置抽屉
+  const openDrawer = () => {
+    settingVisible.value = true;
+  };
+  return {
+    settingVisible,
+    closeDrawer,
+    openDrawer,
+  };
+}
+
+/**
+ * @description 节点名称配置
+ */
+export function useNodeName(nodeType: NodeType) {
+  // 节点名称
+  const nodeName = ref<string>();
+  // 节点名称输入框
+  const showInput = ref(false);
+  // 点击节点名称编辑图标
+  const clickIcon = () => {
+    showInput.value = true;
+  };
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false;
+    nodeName.value =
+      nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
+  };
+  return {
+    nodeName,
+    showInput,
+    clickIcon,
+    blurEvent,
+  };
+}
+
+export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+  // 显示节点名称输入框
+  const showInput = ref(false);
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false;
+    node.value.name =
+      node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
+  };
+  // 点击节点标题进行输入
+  const clickTitle = () => {
+    showInput.value = true;
+  };
+  return {
+    showInput,
+    clickTitle,
+    blurEvent,
+  };
+}
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function useTaskStatusClass(
+  taskStatus: TaskStatusEnum | undefined,
+): string {
+  if (!taskStatus) {
+    return '';
+  }
+  if (taskStatus === TaskStatusEnum.APPROVE) {
+    return 'status-pass';
+  }
+  if (taskStatus === TaskStatusEnum.RUNNING) {
+    return 'status-running';
+  }
+  if (taskStatus === TaskStatusEnum.REJECT) {
+    return 'status-reject';
+  }
+  if (taskStatus === TaskStatusEnum.CANCEL) {
+    return 'status-cancel';
+  }
+  return '';
+}
+
+/** 条件组件文字展示 */
+export function getConditionShowText(
+  conditionType: ConditionType | undefined,
+  conditionExpression: string | undefined,
+  conditionGroups: ConditionGroup | undefined,
+  fieldOptions: Array<Record<string, any>>,
+) {
+  let showText: string | undefined;
+  if (conditionType === ConditionType.EXPRESSION && conditionExpression) {
+    showText = `表达式：${conditionExpression}`;
+  }
+  if (conditionType === ConditionType.RULE) {
+    // 条件组是否为与关系
+    const groupAnd = conditionGroups?.and;
+    let warningMessage: string | undefined;
+    const conditionGroup = conditionGroups?.conditions.map((item) => {
+      return `(${item.rules
+        .map((rule) => {
+          if (rule.leftSide && rule.rightSide) {
+            return `${getFormFieldTitle(
+              fieldOptions,
+              rule.leftSide,
+            )} ${getOpName(rule.opCode)} ${rule.rightSide}`;
+          } else {
+            // 有一条规则不完善。提示错误
+            warningMessage = '请完善条件规则';
+            return '';
+          }
+        })
+        .join(item.and ? ' 且 ' : ' 或 ')} ) `;
+    });
+    showText = warningMessage
+      ? ''
+      : conditionGroup?.join(groupAnd ? ' 且 ' : ' 或 ');
+  }
+  return showText;
+}
+
+/** 获取表单字段名称*/
+const getFormFieldTitle = (
+  fieldOptions: Array<Record<string, any>>,
+  field: string,
+) => {
+  const item = fieldOptions.find((item) => item.field === field);
+  return item?.title;
+};
+
+/** 获取操作符名称 */
+const getOpName = (opCode: string): string | undefined => {
+  const opName = COMPARISON_OPERATORS.find(
+    (item: any) => item.value === opCode,
+  );
+  return opName?.label;
+};
diff --git a/apps/web-antd/src/components/simple-process-design/index.ts b/apps/web-antd/src/components/simple-process-design/index.ts
new file mode 100644
index 000000000..05fee448b
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/index.ts
@@ -0,0 +1,3 @@
+import './styles/simple-process-designer.scss';
+
+export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf b/apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..06f4e31c4b4ce9868cd39b25f6beb1fd5884ff9c
GIT binary patch
literal 4808
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

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff b/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..0724e75054dc761f7cec794944cc140f3056bebf
GIT binary patch
literal 3176
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

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2 b/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c904bb67db38c218b1f3f4292803cbc7fe3a80c6
GIT binary patch
literal 2628
zcmV-K3cK}pPew8T0RR910189^3jhEB020Um015Q~0RR9100000000000000000000
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

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
new file mode 100644
index 000000000..db62b3e78
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -0,0 +1,826 @@
+// TODO 这个样式要不要重新优化一下
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    height: 24px;
+    line-height: 24px;
+    font-size: 16px;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    height: 24px;
+    max-width: 510px;
+    font-size: 16px;
+    line-height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      border-color: #40a9ff;
+      outline: 0;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+}
+
+// 表单字段权限
+.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;
+    justify-content: space-between;
+    align-items: center;
+    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 {
+    align-items: center;
+    display: flex;
+    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 {
+  width: 320px;
+  display: flex;
+  flex-wrap: wrap;
+  cursor: pointer;
+
+  .handler-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+  }
+
+  .handler-item-icon {
+    width: 50px;
+    height: 50px;
+    background: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 50%;
+    user-select: none;
+    text-align: center;
+
+    &:hover {
+      background: #e2e2e2;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .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: #330099;
+  }
+
+  .child-process {
+    color: #996633;
+  }
+
+  .async-child-process {
+    color: #006666;
+  }
+
+  .handler-item-text {
+    margin-top: 4px;
+    width: 80px;
+    text-align: center;
+    font-size: 13px;
+  }
+}
+// Simple 流程模型样式
+.simple-process-model-container {
+  height: 100%;
+  background-color: #fafafa;
+  overflow-x: auto;
+  width: 100%;
+  background: url('./svg/simple-process-bg.svg') 0 0 repeat;
+
+  .simple-process-model {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform-origin: 50% 0 0;
+    min-width: fit-content;
+    transform: scale(1);
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    // 节点容器 定义节点宽度
+    .node-container {
+      width: 200px;
+    }
+    // 节点
+    .node-box {
+      position: relative;
+      display: flex;
+      min-height: 70px;
+      padding: 5px 10px 8px;
+      cursor: pointer;
+      background-color: #fff;
+      flex-direction: column;
+      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;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+        align-items: center;
+
+        .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: #330099;
+          }
+
+          &.child-process {
+            color: #996633;
+          }
+
+          &.async-child-process {
+            color: #006666;
+          }
+        }
+
+        .node-title {
+          margin-left: 4px;
+          overflow: hidden;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 18px;
+          color: #1f1f1f;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #f60;
+          }
+        }
+      }
+
+      // 条件节点标题
+      .branch-node-title-container {
+        display: flex;
+        padding: 4px 0;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+        align-items: center;
+        justify-content: space-between;
+
+        .input-max-width {
+          max-width: 115px !important;
+        }
+
+        .branch-title {
+          overflow: hidden;
+          font-size: 13px;
+          font-weight: 600;
+          color: #f60;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #000;
+          }
+        }
+
+        .branch-priority {
+          min-width: 50px;
+          font-size: 12px;
+        }
+      }
+
+      .node-content {
+        display: flex;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-top: 4px;
+        line-height: 32px;
+        justify-content: space-between;
+        align-items: center;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          font-size: 14px;
+          line-height: 24px;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      //条件节点内容
+      .branch-node-content {
+        display: flex;
+        min-height: 32px;
+        padding: 4px 0;
+        margin-top: 4px;
+        line-height: 32px;
+        align-items: center;
+        color: #111f2c;
+        border-radius: 4px;
+
+        .branch-node-text {
+          overflow: hidden;
+          font-size: 12px;
+          line-height: 24px;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      // 节点操作 ：删除
+      .node-toolbar {
+        position: absolute;
+        top: -20px;
+        right: 0;
+        display: flex;
+        opacity: 0;
+
+        .toolbar-icon {
+          text-align: center;
+          vertical-align: middle;
+        }
+      }
+
+      // 条件节点左右移动
+      .branch-node-move {
+        position: absolute;
+        display: none;
+        width: 10px;
+        height: 100%;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .move-node-left {
+        top: 0;
+        left: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-bottom-left-radius: 8px;
+        border-top-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;
+      justify-content: center;
+      align-items: center;
+    }
+    // 节点连线处理
+    .node-handler-wrapper {
+      position: relative;
+      display: flex;
+      height: 70px;
+      align-items: center;
+      user-select: none;
+      justify-content: center;
+      flex-direction: column;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        width: 2px;
+        height: 100%;
+        margin: auto;
+        background-color: #dedede;
+        content: '';
+      }
+
+      .node-handler {
+        .add-icon {
+          position: relative;
+          top: -5px;
+          display: flex;
+          width: 25px;
+          height: 25px;
+          color: #fff;
+          cursor: pointer;
+          background-color: #0089ff;
+          border-radius: 50%;
+          align-items: center;
+          justify-content: center;
+
+          &: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;
+      justify-content: center;
+      align-items: center;
+      margin-top: 16px;
+
+      .branch-node-container {
+        position: relative;
+        display: flex;
+        min-width: fit-content;
+
+        &::before {
+          position: absolute;
+          left: 50%;
+          width: 4px;
+          height: 100%;
+          background-color: #fafafa;
+          content: '';
+          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;
+          width: 36px;
+          height: 36px;
+          background-color: #fff;
+          border: 2px solid #dedede;
+          border-radius: 50%;
+          transform: translateX(-50%);
+          align-items: center;
+          justify-content: center;
+          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-direction: column;
+          align-items: center;
+          min-width: 280px;
+          padding: 40px 40px 0;
+          background: transparent;
+          border-top: 2px solid #dedede;
+          border-bottom: 2px solid #dedede;
+          flex-shrink: 0;
+
+          &::before {
+            position: absolute;
+            width: 2px;
+            height: 100%;
+            margin: auto;
+            inset: 0;
+            background-color: #dedede;
+            content: '';
+          }
+        }
+        // 覆盖条件节点第一个节点左上角的线
+        .branch-line-first-top {
+          position: absolute;
+          top: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点第一个节点左下角的线
+        .branch-line-first-bottom {
+          position: absolute;
+          bottom: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点最后一个节点右上角的线
+        .branch-line-last-top {
+          position: absolute;
+          top: -5px;
+          right: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点最后一个节点右下角的线
+        .branch-line-last-bottom {
+          position: absolute;
+          right: -1px;
+          bottom: -5px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+      }
+    }
+
+    .node-fixed-name {
+      display: inline-block;
+      width: auto;
+      padding: 0 4px;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    // 开始节点包装
+    .start-node-wrapper {
+      position: relative;
+      margin-top: 16px;
+
+      .start-node-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .start-node-box {
+          display: flex;
+          justify-content: center;
+          align-items: 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%);
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    // 结束节点包装
+    .end-node-wrapper {
+      margin-bottom: 16px;
+
+      .end-node-box {
+        display: flex;
+        width: 80px;
+        height: 36px;
+        color: #212121;
+        border: 2px solid #fafafa;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+
+        &.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 {
+      height: 20px;
+      max-width: 145px;
+      margin-left: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+
+// 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');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-trigger:before {
+  content: "\e6d3";
+}
+
+.icon-router:before {
+  content: "\e6b2";
+}
+
+.icon-delay:before {
+  content: "\e600";
+}
+
+.icon-start-user:before {
+  content: "\e679";
+}
+
+.icon-inclusive:before {
+  content: "\e602";
+}
+
+.icon-copy:before {
+  content: "\e7eb";
+}
+
+.icon-transactor:before {
+  content: "\e61c";
+}
+
+.icon-exclusive:before {
+  content: "\e717";
+}
+
+.icon-approve:before {
+  content: "\e715";
+}
+
+.icon-parallel:before {
+  content: "\e688";
+}
+
+.icon-async-child-process:before {
+  content: "\e6f2";
+}
+
+.icon-child-process:before {
+  content: "\e6c1";
+}
diff --git a/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg b/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg
new file mode 100644
index 000000000..eb23ab5ae
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg
@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>
\ No newline at end of file
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 6d86eeb0e..c7483a2a5 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -29,6 +29,7 @@ import { getSimpleUserList } from '#/api/system/user';
 
 import BasicInfo from './modules/basic-info.vue';
 import FormDesign from './modules/form-design.vue';
+import ProcessDesign from './modules/process-design.vue';
 
 defineOptions({ name: 'BpmModelCreate' });
 
@@ -68,6 +69,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 () => {
@@ -81,7 +84,7 @@ const validateForm = async () => {
 
 /** 流程设计校验 */
 const validateProcess = async () => {
-  // TODO
+  await processDesignRef.value?.validate();
 };
 
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
@@ -101,7 +104,7 @@ const formData: any = ref({
   category: undefined,
   icon: undefined,
   description: '',
-  type: BpmModelType.BPMN,
+  type: BpmModelType.SIMPLE,
   formType: BpmModelFormType.NORMAL,
   formId: '',
   formCustomCreatePath: '',
@@ -189,7 +192,7 @@ const initData = async () => {
   } else {
     // 情况三：新增场景
     formData.value.startUserType = 0; // 全体
-    formData.value.managerUserIds.push(userStore.userInfo?.userId);
+    formData.value.managerUserIds.push(userStore.userInfo?.id);
   }
 
   // 获取表单列表
@@ -351,6 +354,7 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
+    console.warn('handleStepClick', index);
     if (index !== 0) {
       await validateBasic();
     }
@@ -400,7 +404,7 @@ onBeforeUnmount(() => {
   // 清理所有的引用
   basicInfoRef.value = undefined;
   formDesignRef.value = undefined;
-  // processDesignRef.value = null;
+  processDesignRef.value = undefined;
 });
 </script>
 
@@ -485,7 +489,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"
@@ -493,10 +497,15 @@ onBeforeUnmount(() => {
             />
           </div>
 
-          <!-- 第三步：流程设计 TODO -->
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
 
           <!-- 第四步：更多设置 TODO -->
-          <div v-show="currentStep === 3" class="mx-auto w-4/6"></div>
+          <div v-if="currentStep === 3" class="mx-auto w-4/6"></div>
         </div>
       </Card>
     </div>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 2e246141e..f31ad4d7c 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -65,7 +65,6 @@ const rules: Record<string, Rule[]> = {
   category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  // TODO 这个的校验好像没有起作用
   managerUserIds: [
     { required: true, message: '流程管理员不能为空', trigger: 'blur' },
   ],
@@ -282,10 +281,12 @@ defineExpose({ validate });
     </Form.Item>
     <Form.Item label="流程类型" name="type" class="mb-5">
       <Radio.Group v-model:value="modelData.type">
+        <!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
         <Radio
           v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
           :key="dict.value"
           :value="dict.value"
+          :disabled="dict.value === 10"
         >
           {{ dict.label }}
         </Radio>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
new file mode 100644
index 000000000..10f99f8d0
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { computed, inject, nextTick } from 'vue';
+
+import { BpmModelType } from '#/utils';
+
+// TODO BPM 流程模型设计器 BpmModelEditor 待整合
+import SimpleModelDesign from './simple-model-design.vue';
+
+// 创建本地数据副本
+const modelData = defineModel<any>();
+
+const processData = inject('processData') as Ref;
+
+/** 表单校验 */
+const validate = async () => {
+  // 获取最新的流程数据
+  if (!processData.value) {
+    throw new Error('请设计流程');
+  }
+  return true;
+};
+/** 处理设计器保存成功 */
+const handleDesignSuccess = async (data?: any) => {
+  if (data) {
+    // 创建新的对象以触发响应式更新
+    const newModelData = {
+      ...modelData.value,
+      bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
+      simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
+    };
+    // 使用emit更新父组件的数据
+    await nextTick();
+    // 更新表单的模型数据部分
+    modelData.value = newModelData;
+  }
+};
+
+/** 是否显示设计器 */
+const showDesigner = computed(() => {
+  return Boolean(modelData.value?.key && modelData.value?.name);
+});
+defineExpose({
+  validate,
+});
+</script>
+<template>
+  <div class="h-full">
+    <!-- BPMN设计器 -->
+    <template v-if="modelData.type === BpmModelType.BPMN">
+      <!-- TODO BPMN 流程设计器 -->
+    </template>
+    <!-- Simple设计器 -->
+    <template v-else>
+      <SimpleModelDesign
+        v-if="showDesigner"
+        :model-id="modelData.id"
+        :model-key="modelData.key"
+        :model-name="modelData.name"
+        :start-user-ids="modelData.startUserIds"
+        :start-dept-ids="modelData.startDeptIds"
+        @success="handleDesignSuccess"
+      />
+    </template>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
new file mode 100644
index 000000000..fb606c048
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { SimpleProcessDesigner } from '#/components/simple-process-design';
+
+defineOptions({ name: 'SimpleModelDesign' });
+
+defineProps<{
+  modelId?: string;
+  modelKey?: string;
+  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-id="modelId"
+      :model-key="modelKey"
+      :model-name="modelName"
+      @success="handleSuccess"
+      :start-user-ids="startUserIds"
+      :start-dept-ids="startDeptIds"
+      ref="designerRef"
+    />
+  </ContentWrap>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index 7b005fcf6..2583fc867 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -54,35 +54,39 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
     align: 'left' as const,
-    minWidth: 250,
+    ellipsis: true,
+    width: 250,
   },
   {
     title: '可见范围',
     dataIndex: 'startUserIds',
     key: 'startUserIds',
     align: 'center' as const,
-    minWidth: 150,
+    ellipsis: true,
+    width: 150,
   },
   {
     title: '流程类型',
     dataIndex: 'type',
     key: 'type',
     align: 'center' as const,
-    minWidth: 120,
+    ellipsis: true,
+    width: 120,
   },
   {
     title: '表单信息',
     dataIndex: 'formType',
     key: 'formType',
     align: 'center' as const,
-    minWidth: 150,
+    ellipsis: true,
+    width: 150,
   },
   {
     title: '最后发布',
     dataIndex: 'deploymentTime',
     key: 'deploymentTime',
     align: 'center' as const,
-    minWidth: 250,
+    width: 250,
   },
   {
     title: '操作',
@@ -316,6 +320,7 @@ const handleRenameSuccess = () => {
           :columns="columns"
           :pagination="false"
           :custom-row="customRow"
+          :scroll="{ x: '100%' }"
           row-key="id"
         >
           <template #bodyCell="{ column, record }">

From 6649301dba66cb8b78663d105bed1eb14e86bd29 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 24 May 2025 23:29:28 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20simple=20=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E6=A0=B7=E5=BC=8F=E8=A7=84=E8=8C=83=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/simple-process-designer.scss       | 217 +++++++++---------
 1 file changed, 110 insertions(+), 107 deletions(-)

diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index db62b3e78..817e7a766 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -1,4 +1,12 @@
-// TODO 这个样式要不要重新优化一下
+// 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;
@@ -6,11 +14,11 @@
 
   .node-name {
     display: flex;
-    height: 24px;
-    line-height: 24px;
-    font-size: 16px;
-    cursor: pointer;
     align-items: center;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
   }
 
   .divide-line {
@@ -21,8 +29,8 @@
   }
 
   .config-editable-input {
-    height: 24px;
     max-width: 510px;
+    height: 24px;
     font-size: 16px;
     line-height: 24px;
     border: 1px solid #d9d9d9;
@@ -30,9 +38,9 @@
     transition: all 0.3s;
 
     &:focus {
-      border-color: #40a9ff;
       outline: 0;
-      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
     }
   }
 }
@@ -52,8 +60,8 @@
 
   .field-permit-title {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     height: 45px;
     padding-left: 12px;
     line-height: 45px;
@@ -81,8 +89,8 @@
   }
 
   .field-setting-item {
-    align-items: center;
     display: flex;
+    align-items: center;
     justify-content: space-between;
     height: 38px;
     padding-left: 12px;
@@ -114,9 +122,9 @@
 
 // 节点连线气泡卡片样式
 .handler-item-wrapper {
-  width: 320px;
   display: flex;
   flex-wrap: wrap;
+  width: 320px;
   cursor: pointer;
 
   .handler-item {
@@ -129,15 +137,15 @@
   .handler-item-icon {
     width: 50px;
     height: 50px;
+    text-align: center;
+    user-select: none;
     background: #fff;
     border: 1px solid #e2e2e2;
     border-radius: 50%;
-    user-select: none;
-    text-align: center;
 
     &:hover {
       background: #e2e2e2;
-      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
     }
 
     .icon-size {
@@ -175,44 +183,44 @@
   }
 
   .router {
-    color: #ca3a31
+    color: #ca3a31;
   }
 
   .transactor {
-    color: #330099;
+    color: #309;
   }
 
   .child-process {
-    color: #996633;
+    color: #963;
   }
 
   .async-child-process {
-    color: #006666;
+    color: #066;
   }
 
   .handler-item-text {
-    margin-top: 4px;
     width: 80px;
-    text-align: center;
+    margin-top: 4px;
     font-size: 13px;
+    text-align: center;
   }
 }
 // Simple 流程模型样式
 .simple-process-model-container {
-  height: 100%;
-  background-color: #fafafa;
-  overflow-x: auto;
   width: 100%;
+  height: 100%;
+  overflow-x: auto;
   background: url('./svg/simple-process-bg.svg') 0 0 repeat;
+  background-color: #fafafa;
 
   .simple-process-model {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    transform-origin: 50% 0 0;
+    justify-content: center;
     min-width: fit-content;
     transform: scale(1);
+    transform-origin: 50% 0 0;
     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     // 节点容器 定义节点宽度
     .node-container {
@@ -222,11 +230,11 @@
     .node-box {
       position: relative;
       display: flex;
+      flex-direction: column;
       min-height: 70px;
       padding: 5px 10px 8px;
       cursor: pointer;
       background-color: #fff;
-      flex-direction: column;
       border: 2px solid transparent;
       border-radius: 8px;
       box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
@@ -274,10 +282,10 @@
       // 普通节点标题
       .node-title-container {
         display: flex;
+        align-items: center;
         padding: 4px;
         cursor: pointer;
         border-radius: 4px 4px 0 0;
-        align-items: center;
 
         .node-title-icon {
           display: flex;
@@ -304,30 +312,30 @@
           }
 
           &.router-node {
-            color: #ca3a31
+            color: #ca3a31;
           }
 
           &.transactor-task {
-            color: #330099;
+            color: #309;
           }
 
           &.child-process {
-            color: #996633;
+            color: #963;
           }
 
           &.async-child-process {
-            color: #006666;
+            color: #066;
           }
         }
 
         .node-title {
           margin-left: 4px;
           overflow: hidden;
+          text-overflow: ellipsis;
           font-size: 14px;
           font-weight: 600;
           line-height: 18px;
           color: #1f1f1f;
-          text-overflow: ellipsis;
           white-space: nowrap;
 
           &:hover {
@@ -339,11 +347,11 @@
       // 条件节点标题
       .branch-node-title-container {
         display: flex;
+        align-items: center;
+        justify-content: space-between;
         padding: 4px 0;
         cursor: pointer;
         border-radius: 4px 4px 0 0;
-        align-items: center;
-        justify-content: space-between;
 
         .input-max-width {
           max-width: 115px !important;
@@ -351,10 +359,10 @@
 
         .branch-title {
           overflow: hidden;
+          text-overflow: ellipsis;
           font-size: 13px;
           font-weight: 600;
           color: #f60;
-          text-overflow: ellipsis;
           white-space: nowrap;
 
           &:hover {
@@ -370,12 +378,12 @@
 
       .node-content {
         display: flex;
+        align-items: center;
+        justify-content: space-between;
         min-height: 32px;
         padding: 4px 8px;
         margin-top: 4px;
         line-height: 32px;
-        justify-content: space-between;
-        align-items: center;
         color: #111f2c;
         background: rgb(0 0 0 / 3%);
         border-radius: 4px;
@@ -383,11 +391,11 @@
         .node-text {
           display: -webkit-box;
           overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
           font-size: 14px;
           line-height: 24px;
-          text-overflow: ellipsis;
           word-break: break-all;
-          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
           -webkit-box-orient: vertical;
         }
       }
@@ -395,21 +403,21 @@
       //条件节点内容
       .branch-node-content {
         display: flex;
+        align-items: center;
         min-height: 32px;
         padding: 4px 0;
         margin-top: 4px;
         line-height: 32px;
-        align-items: center;
         color: #111f2c;
         border-radius: 4px;
 
         .branch-node-text {
           overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
           font-size: 12px;
           line-height: 24px;
-          text-overflow: ellipsis;
           word-break: break-all;
-          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
           -webkit-box-orient: vertical;
         }
       }
@@ -423,8 +431,8 @@
         opacity: 0;
 
         .toolbar-icon {
-          text-align: center;
           vertical-align: middle;
+          text-align: center;
         }
       }
 
@@ -432,19 +440,19 @@
       .branch-node-move {
         position: absolute;
         display: none;
+        align-items: center;
+        justify-content: center;
         width: 10px;
         height: 100%;
         cursor: pointer;
-        align-items: center;
-        justify-content: center;
       }
 
       .move-node-left {
         top: 0;
         left: -2px;
         background: rgb(126 134 142 / 8%);
-        border-bottom-left-radius: 8px;
         border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
       }
 
       .move-node-right {
@@ -463,18 +471,18 @@
     .node-wrapper {
       display: flex;
       flex-direction: column;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
     }
     // 节点连线处理
     .node-handler-wrapper {
       position: relative;
       display: flex;
-      height: 70px;
-      align-items: center;
-      user-select: none;
-      justify-content: center;
       flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 70px;
+      user-select: none;
 
       &::before {
         position: absolute;
@@ -483,8 +491,8 @@
         width: 2px;
         height: 100%;
         margin: auto;
-        background-color: #dedede;
         content: '';
+        background-color: #dedede;
       }
 
       .node-handler {
@@ -492,14 +500,14 @@
           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%;
-          align-items: center;
-          justify-content: center;
 
           &:hover {
             transform: scale(1.1);
@@ -521,8 +529,8 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
       margin-top: 16px;
 
       .branch-node-container {
@@ -535,8 +543,8 @@
           left: 50%;
           width: 4px;
           height: 100%;
-          background-color: #fafafa;
           content: '';
+          background-color: #fafafa;
           transform: translate(-50%);
         }
 
@@ -561,14 +569,14 @@
           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%);
-          align-items: center;
-          justify-content: center;
           transform-origin: center center;
 
           &.status-pass {
@@ -582,12 +590,15 @@
 
           .icon-size {
             font-size: 22px;
+
             &.condition {
               color: #67c23a;
             }
+
             &.parallel {
               color: #626aef;
             }
+
             &.inclusive {
               color: #345da2;
             }
@@ -597,6 +608,7 @@
         .branch-node-item {
           position: relative;
           display: flex;
+          flex-shrink: 0;
           flex-direction: column;
           align-items: center;
           min-width: 280px;
@@ -604,16 +616,15 @@
           background: transparent;
           border-top: 2px solid #dedede;
           border-bottom: 2px solid #dedede;
-          flex-shrink: 0;
 
           &::before {
             position: absolute;
+            inset: 0;
             width: 2px;
             height: 100%;
             margin: auto;
-            inset: 0;
-            background-color: #dedede;
             content: '';
+            background-color: #dedede;
           }
         }
         // 覆盖条件节点第一个节点左上角的线
@@ -623,8 +634,8 @@
           left: -1px;
           width: 50%;
           height: 7px;
-          background-color: #fafafa;
           content: '';
+          background-color: #fafafa;
         }
         // 覆盖条件节点第一个节点左下角的线
         .branch-line-first-bottom {
@@ -633,8 +644,8 @@
           left: -1px;
           width: 50%;
           height: 7px;
-          background-color: #fafafa;
           content: '';
+          background-color: #fafafa;
         }
         // 覆盖条件节点最后一个节点右上角的线
         .branch-line-last-top {
@@ -643,8 +654,8 @@
           right: -1px;
           width: 50%;
           height: 7px;
-          background-color: #fafafa;
           content: '';
+          background-color: #fafafa;
         }
         // 覆盖条件节点最后一个节点右下角的线
         .branch-line-last-bottom {
@@ -653,8 +664,8 @@
           bottom: -5px;
           width: 50%;
           height: 7px;
-          background-color: #fafafa;
           content: '';
+          background-color: #fafafa;
         }
       }
     }
@@ -664,8 +675,8 @@
       width: auto;
       padding: 0 4px;
       overflow: hidden;
-      text-align: center;
       text-overflow: ellipsis;
+      text-align: center;
       white-space: nowrap;
     }
     // 开始节点包装
@@ -676,13 +687,14 @@
       .start-node-container {
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
 
         .start-node-box {
+          box-sizing: border-box;
           display: flex;
-          justify-content: center;
           align-items: center;
+          justify-content: center;
           width: 90px;
           height: 36px;
           padding: 3px 4px;
@@ -691,7 +703,6 @@
           background: #fafafa;
           border-radius: 30px;
           box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
-          box-sizing: border-box;
         }
       }
     }
@@ -701,16 +712,16 @@
       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%);
-        box-sizing: border-box;
-        justify-content: center;
-        align-items: center;
 
         &.status-pass {
           background-color: #a9da90;
@@ -743,8 +754,8 @@
 
     // 可编辑的 title 输入框
     .editable-title-input {
-      height: 20px;
       max-width: 145px;
+      height: 20px;
       margin-left: 4px;
       font-size: 12px;
       line-height: 20px;
@@ -753,74 +764,66 @@
       transition: all 0.3s;
 
       &:focus {
-        border-color: #40a9ff;
         outline: 0;
+        border-color: #40a9ff;
         box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
       }
     }
   }
 }
 
-// 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');
-}
-
 .iconfont {
-  font-family: "iconfont" !important;
+  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-trigger::before {
+  content: '\e6d3';
 }
 
-.icon-router:before {
-  content: "\e6b2";
+.icon-router::before {
+  content: '\e6b2';
 }
 
-.icon-delay:before {
-  content: "\e600";
+.icon-delay::before {
+  content: '\e600';
 }
 
-.icon-start-user:before {
-  content: "\e679";
+.icon-start-user::before {
+  content: '\e679';
 }
 
-.icon-inclusive:before {
-  content: "\e602";
+.icon-inclusive::before {
+  content: '\e602';
 }
 
-.icon-copy:before {
-  content: "\e7eb";
+.icon-copy::before {
+  content: '\e7eb';
 }
 
-.icon-transactor:before {
-  content: "\e61c";
+.icon-transactor::before {
+  content: '\e61c';
 }
 
-.icon-exclusive:before {
-  content: "\e717";
+.icon-exclusive::before {
+  content: '\e717';
 }
 
-.icon-approve:before {
-  content: "\e715";
+.icon-approve::before {
+  content: '\e715';
 }
 
-.icon-parallel:before {
-  content: "\e688";
+.icon-parallel::before {
+  content: '\e688';
 }
 
-.icon-async-child-process:before {
-  content: "\e6f2";
+.icon-async-child-process::before {
+  content: '\e6f2';
 }
 
-.icon-child-process:before {
-  content: "\e6c1";
+.icon-child-process::before {
+  content: '\e6c1';
 }