diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 4fbea5a5d1b532d6e2b217bbd17e2d141cef915a..673caa68e15eaee6c563ca913c429d4966d04d59 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -206,7 +206,7 @@ onMounted(() => {
 defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
 </script>
 <template>
-  <Drawer class="w-1/3">
+  <Drawer class="w-2/5">
     <template #title>
       <div class="config-header">
         <Input
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
index e52eb8ee0019000b02053305ff96af8c147c2d0c..37df5a8ce5665abaa3e8e500c6315aed3e50c314 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -41,7 +41,7 @@ defineOptions({
 const props = defineProps({
   modelValue: {
     type: Object,
-    required: true,
+    required: false,
     default: () => ({}),
   },
 });
diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
index c895a34eec7660d764735b3cd9fc70876b240047..375b45830f582d8665be5fe42e0f9535b62b9ab7 100644
--- a/apps/web-ele/src/router/routes/modules/bpm.ts
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -62,30 +62,30 @@ const routes: RouteRecordRaw[] = [
           };
         },
       },
-      // {
-      //   path: 'manager/model/create',
-      //   component: () => import('#/views/bpm/model/form/index.vue'),
-      //   name: 'BpmModelCreate',
-      //   meta: {
-      //     title: '创建流程',
-      //     activePath: '/bpm/manager/model',
-      //     icon: 'carbon:flow-connection',
-      //     hideInMenu: true,
-      //     keepAlive: true,
-      //   },
-      // },
-      // {
-      //   path: 'manager/model/:type/:id',
-      //   component: () => import('#/views/bpm/model/form/index.vue'),
-      //   name: 'BpmModelUpdate',
-      //   meta: {
-      //     title: '修改流程',
-      //     activePath: '/bpm/manager/model',
-      //     icon: 'carbon:flow-connection',
-      //     hideInMenu: true,
-      //     keepAlive: true,
-      //   },
-      // },
+      {
+        path: 'manager/model/create',
+        component: () => import('#/views/bpm/model/form/index.vue'),
+        name: 'BpmModelCreate',
+        meta: {
+          title: '创建流程',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-connection',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
+      {
+        path: 'manager/model/:type/:id',
+        component: () => import('#/views/bpm/model/form/index.vue'),
+        name: 'BpmModelUpdate',
+        meta: {
+          title: '修改流程',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-connection',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
       {
         path: 'manager/definition',
         component: () => import('#/views/bpm/model/definition/index.vue'),
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ad51c7347dc41f8ced988adab4aab8250a4d5f7
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -0,0 +1,779 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { IOParameter, SimpleFlowNode } from '../../consts';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { getForm } from '#/api/bpm/form';
+import { getModelList } from '#/api/bpm/model';
+
+import {
+  CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE,
+  CHILD_PROCESS_START_USER_EMPTY_TYPE,
+  CHILD_PROCESS_START_USER_TYPE,
+  ChildProcessMultiInstanceSourceTypeEnum,
+  ChildProcessStartUserEmptyTypeEnum,
+  ChildProcessStartUserTypeEnum,
+  DELAY_TYPE,
+  DelayTypeEnum,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+} from '../../consts';
+import {
+  parseFormFields,
+  useFormFields,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import { convertTimeUnit } from './utils';
+
+defineOptions({ name: 'ChildProcessNodeConfig' });
+
+const props = defineProps<{
+  flowNode: SimpleFlowNode;
+}>();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+/** 节点名称配置 */
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.CHILD_PROCESS_NODE);
+// 激活的 Tab 标签页
+const activeTabName = ref('child');
+// 子流程表单配置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: FormRules = reactive({
+  async: [{ required: true, message: '是否异步不能为空', trigger: 'change' }],
+  calledProcessDefinitionKey: [
+    { required: true, message: '子流程不能为空', trigger: 'change' },
+  ],
+  skipStartUserNode: [
+    {
+      required: true,
+      message: '是否自动跳过子流程发起节点不能为空',
+      trigger: 'change',
+    },
+  ],
+  startUserType: [
+    { required: true, message: '子流程发起人不能为空', trigger: 'change' },
+  ],
+  startUserEmptyType: [
+    {
+      required: true,
+      message: '当子流程发起人为空时不能为空',
+      trigger: 'change',
+    },
+  ],
+  startUserFormField: [
+    { required: true, message: '子流程发起人字段不能为空', trigger: 'change' },
+  ],
+  timeoutEnable: [
+    { required: true, message: '超时设置是否开启不能为空', trigger: 'change' },
+  ],
+  timeoutType: [
+    { required: true, message: '超时设置时间不能为空', trigger: 'change' },
+  ],
+  timeDuration: [
+    { required: true, message: '超时设置时间不能为空', trigger: 'change' },
+  ],
+  dateTime: [
+    { required: true, message: '超时设置时间不能为空', trigger: 'change' },
+  ],
+  multiInstanceEnable: [
+    { required: true, message: '多实例设置不能为空', trigger: 'change' },
+  ],
+  sequential: [
+    { required: true, message: '是否串行不能为空', trigger: 'change' },
+  ],
+  multiInstanceSourceType: [
+    { required: true, message: '实例数量不能为空', trigger: 'change' },
+  ],
+  approveRatio: [
+    { required: true, message: '完成比例不能为空', trigger: 'change' },
+  ],
+});
+
+type ChildProcessFormType = {
+  approveRatio: number;
+  async: boolean;
+  calledProcessDefinitionKey: string;
+  dateTime: string;
+  inVariables?: IOParameter[];
+  multiInstanceEnable: boolean;
+  multiInstanceSource: string;
+  multiInstanceSourceType: ChildProcessMultiInstanceSourceTypeEnum;
+  outVariables?: IOParameter[];
+  sequential: boolean;
+  skipStartUserNode: boolean;
+  startUserEmptyType: ChildProcessStartUserEmptyTypeEnum;
+  startUserFormField: string;
+  startUserType: ChildProcessStartUserTypeEnum;
+  timeDuration: number;
+  timeoutEnable: boolean;
+  timeoutType: DelayTypeEnum;
+  timeUnit: TimeUnitType;
+};
+
+const configForm = ref<ChildProcessFormType>({
+  async: false,
+  calledProcessDefinitionKey: '',
+  skipStartUserNode: false,
+  inVariables: [],
+  outVariables: [],
+  startUserType: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER,
+  startUserEmptyType:
+    ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER,
+  startUserFormField: '',
+  timeoutEnable: false,
+  timeoutType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+  multiInstanceEnable: false,
+  sequential: false,
+  approveRatio: 100,
+  multiInstanceSourceType:
+    ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY,
+  multiInstanceSource: '',
+});
+
+const childProcessOptions = ref<any[]>([]);
+// 主流程表单字段选项
+const formFieldOptions = useFormFields();
+/** 子流程发起人表单可选项 : 只有用户选择组件字段才能被选择 */
+const startUserFormFieldOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 数字表单字段选项
+const digitalFormFieldOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'inputNumber');
+});
+// 多选表单字段选项
+const multiFormFieldOptions = computed(() => {
+  return formFieldOptions.filter(
+    (item) => item.type === 'select' || item.type === 'checkbox',
+  );
+});
+const childFormFieldOptions = ref<any[]>([]);
+
+/** 保存配置 */
+const saveConfig = async () => {
+  activeTabName.value = 'child';
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate().catch(() => false);
+  if (!valid) return false;
+
+  const childInfo = childProcessOptions.value.find(
+    (option) => option.key === configForm.value.calledProcessDefinitionKey,
+  );
+
+  currentNode.value.name = nodeName.value!;
+  if (currentNode.value.childProcessSetting) {
+    // 1. 是否异步
+    currentNode.value.childProcessSetting.async = configForm.value.async;
+    // 2. 调用流程
+    currentNode.value.childProcessSetting.calledProcessDefinitionKey =
+      childInfo.key;
+    currentNode.value.childProcessSetting.calledProcessDefinitionName =
+      childInfo.name;
+    // 3. 是否跳过发起人
+    currentNode.value.childProcessSetting.skipStartUserNode =
+      configForm.value.skipStartUserNode;
+    // 4. 主→子变量
+    currentNode.value.childProcessSetting.inVariables =
+      configForm.value.inVariables;
+    // 5. 子→主变量
+    currentNode.value.childProcessSetting.outVariables =
+      configForm.value.outVariables;
+    // 6. 发起人设置
+    currentNode.value.childProcessSetting.startUserSetting.type =
+      configForm.value.startUserType;
+    currentNode.value.childProcessSetting.startUserSetting.emptyType =
+      configForm.value.startUserEmptyType;
+    currentNode.value.childProcessSetting.startUserSetting.formField =
+      configForm.value.startUserFormField;
+    // 7. 超时设置
+    currentNode.value.childProcessSetting.timeoutSetting = {
+      enable: configForm.value.timeoutEnable,
+    };
+    if (configForm.value.timeoutEnable) {
+      currentNode.value.childProcessSetting.timeoutSetting.type =
+        configForm.value.timeoutType;
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION) {
+        currentNode.value.childProcessSetting.timeoutSetting.timeExpression =
+          getIsoTimeDuration();
+      }
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        currentNode.value.childProcessSetting.timeoutSetting.timeExpression =
+          configForm.value.dateTime;
+      }
+    }
+    // 8. 多实例设置
+    currentNode.value.childProcessSetting.multiInstanceSetting = {
+      enable: configForm.value.multiInstanceEnable,
+    };
+    if (configForm.value.multiInstanceEnable) {
+      currentNode.value.childProcessSetting.multiInstanceSetting.sequential =
+        configForm.value.sequential;
+      currentNode.value.childProcessSetting.multiInstanceSetting.approveRatio =
+        configForm.value.approveRatio;
+      currentNode.value.childProcessSetting.multiInstanceSetting.sourceType =
+        configForm.value.multiInstanceSourceType;
+      currentNode.value.childProcessSetting.multiInstanceSetting.source =
+        configForm.value.multiInstanceSource;
+    }
+  }
+
+  currentNode.value.showText = `调用子流程：${childInfo.name}`;
+  drawerApi.close();
+  return true;
+};
+
+// 显示子流程节点配置， 由父组件传过来
+const showChildProcessNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  if (node.childProcessSetting) {
+    // 1. 是否异步
+    configForm.value.async = node.childProcessSetting.async;
+    // 2. 调用流程
+    configForm.value.calledProcessDefinitionKey =
+      node.childProcessSetting?.calledProcessDefinitionKey;
+    // 3. 是否跳过发起人
+    configForm.value.skipStartUserNode =
+      node.childProcessSetting.skipStartUserNode;
+    // 4. 主流程→子流程变量
+    configForm.value.inVariables = node.childProcessSetting.inVariables ?? [];
+    // 5. 子流程→主流程变量
+    configForm.value.outVariables = node.childProcessSetting.outVariables ?? [];
+    // 6. 发起人设置
+    configForm.value.startUserType =
+      node.childProcessSetting.startUserSetting.type;
+    configForm.value.startUserEmptyType =
+      node.childProcessSetting.startUserSetting.emptyType ??
+      ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER;
+    configForm.value.startUserFormField =
+      node.childProcessSetting.startUserSetting.formField ?? '';
+    // 7. 超时设置
+    configForm.value.timeoutEnable =
+      node.childProcessSetting.timeoutSetting.enable ?? false;
+    if (configForm.value.timeoutEnable) {
+      configForm.value.timeoutType =
+        node.childProcessSetting.timeoutSetting.type ??
+        DelayTypeEnum.FIXED_TIME_DURATION;
+      // 固定时长
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION) {
+        const strTimeDuration =
+          node.childProcessSetting.timeoutSetting.timeExpression ?? '';
+        const parseTime = strTimeDuration.slice(2, -1);
+        const parseTimeUnit = strTimeDuration.slice(-1);
+        configForm.value.timeDuration = Number.parseInt(parseTime);
+        configForm.value.timeUnit = convertTimeUnit(parseTimeUnit);
+      }
+      // 固定日期时间
+      if (configForm.value.timeoutType === DelayTypeEnum.FIXED_DATE_TIME) {
+        configForm.value.dateTime =
+          node.childProcessSetting.timeoutSetting.timeExpression ?? '';
+      }
+    }
+    // 8. 多实例设置
+    configForm.value.multiInstanceEnable =
+      node.childProcessSetting.multiInstanceSetting.enable ?? false;
+    if (configForm.value.multiInstanceEnable) {
+      configForm.value.sequential =
+        node.childProcessSetting.multiInstanceSetting.sequential ?? false;
+      configForm.value.approveRatio =
+        node.childProcessSetting.multiInstanceSetting.approveRatio ?? 100;
+      configForm.value.multiInstanceSourceType =
+        node.childProcessSetting.multiInstanceSetting.sourceType ??
+        ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY;
+      configForm.value.multiInstanceSource =
+        node.childProcessSetting.multiInstanceSetting.source ?? '';
+    }
+  }
+  loadFormInfo();
+  drawerApi.open();
+};
+
+/** 暴露方法给父组件 */
+defineExpose({ showChildProcessNodeConfig });
+
+const addVariable = (arr?: IOParameter[]) => {
+  arr?.push({
+    source: '',
+    target: '',
+  });
+};
+
+const deleteVariable = (index: number, arr?: IOParameter[]) => {
+  arr?.splice(index, 1);
+};
+
+const handleCalledElementChange = () => {
+  configForm.value.inVariables = [];
+  configForm.value.outVariables = [];
+  loadFormInfo();
+};
+
+const loadFormInfo = async () => {
+  const childInfo = childProcessOptions.value.find(
+    (option) => option.key === configForm.value.calledProcessDefinitionKey,
+  );
+  if (!childInfo) return;
+
+  const formInfo = await getForm(childInfo.formId);
+  childFormFieldOptions.value = [];
+  if (formInfo.fields) {
+    formInfo.fields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), childFormFieldOptions.value);
+    });
+  }
+};
+
+const getIsoTimeDuration = () => {
+  let strTimeDuration = 'PT';
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += `${configForm.value.timeDuration}M`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += `${configForm.value.timeDuration}H`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += `${configForm.value.timeDuration}D`;
+  }
+  return strTimeDuration;
+};
+
+const handleMultiInstanceSourceTypeChange = () => {
+  configForm.value.multiInstanceSource = '';
+};
+
+onMounted(async () => {
+  try {
+    childProcessOptions.value = await getModelList(undefined);
+  } catch (error) {
+    console.error('获取模型列表失败', error);
+  }
+});
+</script>
+
+<template>
+  <Drawer class="w-1/3">
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <ElForm
+        ref="formRef"
+        :model="configForm"
+        label-position="top"
+        :rules="formRules"
+      >
+        <ElFormItem label="是否异步执行" prop="async">
+          <ElSwitch
+            v-model="configForm.async"
+            active-text="是"
+            inactive-text="否"
+          />
+        </ElFormItem>
+        <ElFormItem label="选择子流程" prop="calledProcessDefinitionKey">
+          <ElSelect
+            v-model="configForm.calledProcessDefinitionKey"
+            clearable
+            @change="handleCalledElementChange"
+          >
+            <ElOption
+              v-for="(item, index) in childProcessOptions"
+              :key="index"
+              :value="item.key"
+              :label="item.name"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="是否自动跳过子流程发起节点" prop="skipStartUserNode">
+          <ElSwitch
+            v-model="configForm.skipStartUserNode"
+            active-text="跳过"
+            inactive-text="不跳过"
+          />
+        </ElFormItem>
+        <ElFormItem label="主→子变量传递" prop="inVariables">
+          <div
+            class="flex"
+            v-for="(item, index) in configForm.inVariables"
+            :key="index"
+          >
+            <div class="mr-2 mt-1">
+              <ElFormItem
+                :prop="['inVariables', index, 'source']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.source">
+                  <ElOption
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                    :label="field.title"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-2 mt-1">
+              <ElFormItem
+                :prop="['inVariables', index, 'target']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.target">
+                  <ElOption
+                    v-for="(field, fIdx) in childFormFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                    :label="field.title"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-1 mt-1 flex h-8 items-center">
+              <IconifyIcon
+                icon="lucide:trash-2"
+                :size="18"
+                class="cursor-pointer text-red-500"
+                @click="deleteVariable(index, configForm.inVariables)"
+              />
+            </div>
+          </div>
+          <ElButton
+            link
+            @click="addVariable(configForm.inVariables)"
+            class="mt-1 flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="lucide:plus" />
+            </template>
+            添加一个
+          </ElButton>
+        </ElFormItem>
+        <ElFormItem
+          v-if="configForm.async === false"
+          label="子→主变量传递"
+          prop="outVariables"
+        >
+          <div
+            class="flex"
+            v-for="(item, index) in configForm.outVariables"
+            :key="index"
+          >
+            <div class="mr-2 mt-1">
+              <ElFormItem
+                :prop="['outVariables', index, 'source']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.source">
+                  <ElOption
+                    v-for="(field, fIdx) in childFormFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                    :label="field.title"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-2 mt-1">
+              <ElFormItem
+                :prop="['outVariables', index, 'target']"
+                :rules="{
+                  required: true,
+                  message: '变量不能为空',
+                  trigger: 'blur',
+                }"
+              >
+                <ElSelect class="!w-40" v-model="item.target">
+                  <ElOption
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :value="field.field"
+                    :label="field.title"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <div class="mr-1 mt-1 flex h-8 items-center">
+              <IconifyIcon
+                icon="lucide:trash-2"
+                :size="18"
+                class="cursor-pointer text-red-500"
+                @click="deleteVariable(index, configForm.outVariables)"
+              />
+            </div>
+          </div>
+          <ElButton
+            link
+            @click="addVariable(configForm.outVariables)"
+            class="mt-1 flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="lucide:plus" />
+            </template>
+            添加一个
+          </ElButton>
+        </ElFormItem>
+        <ElFormItem label="子流程发起人" prop="startUserType">
+          <ElRadioGroup v-model="configForm.startUserType">
+            <ElRadio
+              v-for="item in CHILD_PROCESS_START_USER_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem
+          v-if="
+            configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM
+          "
+          label="子流程发起人字段"
+          prop="startUserFormField"
+        >
+          <ElSelect v-model="configForm.startUserFormField" clearable>
+            <ElOption
+              v-for="(field, fIdx) in startUserFormFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          v-if="
+            configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM
+          "
+          label="当子流程发起人为空时"
+          prop="startUserEmptyType"
+        >
+          <ElRadioGroup v-model="configForm.startUserEmptyType">
+            <ElRadio
+              v-for="item in CHILD_PROCESS_START_USER_EMPTY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+
+        <ElDivider>超时设置</ElDivider>
+        <ElFormItem label="启用开关" prop="timeoutEnable">
+          <ElSwitch
+            v-model="configForm.timeoutEnable"
+            active-text="开启"
+            inactive-text="关闭"
+          />
+        </ElFormItem>
+        <div v-if="configForm.timeoutEnable">
+          <ElFormItem prop="timeoutType">
+            <ElRadioGroup v-model="configForm.timeoutType">
+              <ElRadioButton
+                v-for="item in DELAY_TYPE"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </ElRadioButton>
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem
+            v-if="configForm.timeoutType === DelayTypeEnum.FIXED_TIME_DURATION"
+          >
+            <div class="flex items-center gap-2">
+              <span>当超过</span>
+              <ElFormItem prop="timeDuration" class="!mb-0">
+                <ElInputNumber
+                  class="!w-24"
+                  v-model="configForm.timeDuration"
+                  :min="1"
+                  controls-position="right"
+                />
+              </ElFormItem>
+              <ElFormItem class="!mb-0">
+                <ElSelect v-model="configForm.timeUnit" class="!w-24">
+                  <ElOption
+                    v-for="item in TIME_UNIT_TYPES"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+              <span>后进入下一节点</span>
+            </div>
+          </ElFormItem>
+          <ElFormItem
+            v-if="configForm.timeoutType === DelayTypeEnum.FIXED_DATE_TIME"
+            prop="dateTime"
+          >
+            <div class="flex items-center gap-2">
+              <ElDatePicker
+                v-model="configForm.dateTime"
+                type="datetime"
+                placeholder="请选择日期和时间"
+                value-format="YYYY-MM-DDTHH:mm:ss"
+              />
+              <span>后进入下一节点</span>
+            </div>
+          </ElFormItem>
+        </div>
+
+        <ElDivider>多实例设置</ElDivider>
+        <ElFormItem label="启用开关" prop="multiInstanceEnable">
+          <ElSwitch
+            v-model="configForm.multiInstanceEnable"
+            active-text="开启"
+            inactive-text="关闭"
+          />
+        </ElFormItem>
+        <div v-if="configForm.multiInstanceEnable">
+          <ElFormItem prop="sequential" label="是否串行">
+            <ElSwitch
+              v-model="configForm.sequential"
+              active-text="是"
+              inactive-text="否"
+            />
+          </ElFormItem>
+          <ElFormItem prop="approveRatio" label="完成比例(%)">
+            <ElInputNumber
+              v-model="configForm.approveRatio"
+              :min="10"
+              :max="100"
+              :step="10"
+            />
+          </ElFormItem>
+          <ElFormItem prop="multiInstanceSourceType" label="实例数量">
+            <ElSelect
+              v-model="configForm.multiInstanceSourceType"
+              @change="handleMultiInstanceSourceTypeChange"
+            >
+              <ElOption
+                v-for="item in CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY
+            "
+            prop="multiInstanceSource"
+            label="固定数量"
+            :rules="{
+              required: true,
+              message: '固定数量不能为空',
+              trigger: 'change',
+            }"
+          >
+            <ElInputNumber v-model="configForm.multiInstanceSource" :min="1" />
+          </ElFormItem>
+          <ElFormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.NUMBER_FORM
+            "
+            prop="multiInstanceSource"
+            label="数字表单"
+            :rules="{
+              required: true,
+              message: '数字表单字段不能为空',
+              trigger: 'change',
+            }"
+          >
+            <ElSelect v-model="configForm.multiInstanceSource">
+              <ElOption
+                v-for="(field, fIdx) in digitalFormFieldOptions"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+              >
+                {{ field.title }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="
+              configForm.multiInstanceSourceType ===
+              ChildProcessMultiInstanceSourceTypeEnum.MULTIPLE_FORM
+            "
+            prop="multiInstanceSource"
+            label="多选表单"
+            :rules="{
+              required: true,
+              message: '多选表单字段不能为空',
+              trigger: 'change',
+            }"
+          >
+            <ElSelect v-model="configForm.multiInstanceSource">
+              <ElOption
+                v-for="(field, fIdx) in multiFormFieldOptions"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+              >
+                {{ field.title }}
+              </ElOption>
+            </ElSelect>
+          </ElFormItem>
+        </div>
+      </ElForm>
+    </div>
+  </Drawer>
+</template>
+
+<style scoped></style>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e090971479474b9248297985f426e9918519f848
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { ElInput } from 'element-plus';
+
+import { ConditionType } from '../../consts';
+import {
+  getConditionShowText,
+  getDefaultConditionNodeName,
+  useFormFieldsAndStartUser,
+} from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({
+  name: 'ConditionNodeConfig',
+});
+
+const props = defineProps({
+  conditionNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+  nodeIndex: {
+    type: Number,
+    required: true,
+  },
+});
+
+const currentNode = ref<SimpleFlowNode>(props.conditionNode);
+const condition = ref<any>({
+  conditionType: ConditionType.RULE, // 设置默认值
+  conditionExpression: '',
+  conditionGroups: {
+    and: true,
+    conditions: [
+      {
+        and: true,
+        rules: [
+          {
+            opCode: '==',
+            leftSide: '',
+            rightSide: '',
+          },
+        ],
+      },
+    ],
+  },
+});
+
+const conditionRef = ref();
+const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
+
+/** 保存配置 */
+async function saveConfig() {
+  if (!currentNode.value.conditionSetting?.defaultFlow) {
+    // 校验表单
+    const valid = await conditionRef.value.validate();
+    if (!valid) return false;
+    const showText = getConditionShowText(
+      condition.value?.conditionType,
+      condition.value?.conditionExpression,
+      condition.value.conditionGroups,
+      fieldOptions,
+    );
+    if (!showText) {
+      return false;
+    }
+    currentNode.value.showText = showText;
+    // 使用 cloneDeep 进行深拷贝
+    currentNode.value.conditionSetting = cloneDeep({
+      ...currentNode.value.conditionSetting,
+      conditionType: condition.value?.conditionType,
+      conditionExpression:
+        condition.value?.conditionType === ConditionType.EXPRESSION
+          ? condition.value?.conditionExpression
+          : undefined,
+      conditionGroups:
+        condition.value?.conditionType === ConditionType.RULE
+          ? condition.value?.conditionGroups
+          : undefined,
+    });
+  }
+  drawerApi.close();
+  return true;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: currentNode.value.name,
+  onConfirm: saveConfig,
+});
+
+function open() {
+  // 使用三元表达式代替if-else，解决linter 警告
+  condition.value = currentNode.value.conditionSetting
+    ? cloneDeep(currentNode.value.conditionSetting)
+    : {
+        conditionType: ConditionType.RULE,
+        conditionExpression: '',
+        conditionGroups: {
+          and: true,
+          conditions: [
+            {
+              and: true,
+              rules: [
+                {
+                  opCode: '==',
+                  leftSide: '',
+                  rightSide: '',
+                },
+              ],
+            },
+          ],
+        },
+      };
+
+  drawerApi.open();
+}
+
+watch(
+  () => props.conditionNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+// 显示名称输入框
+const showInput = ref(false);
+// 输入框的引用
+const inputRef = ref<HTMLInputElement | null>(null);
+// 监听 showInput 的变化，当变为true 时自动聚焦
+watch(showInput, (value) => {
+  if (value) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
+function clickIcon() {
+  showInput.value = true;
+}
+
+// 修改节点名称
+function changeNodeName() {
+  showInput.value = false;
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(
+      props.nodeIndex,
+      currentNode.value?.conditionSetting?.defaultFlow,
+    );
+}
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+<template>
+  <Drawer class="w-2/5">
+    <template #title>
+      <div class="flex items-center">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="currentNode.name"
+          :placeholder="currentNode.name"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ currentNode.name }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <div
+        class="mb-3 text-base"
+        v-if="currentNode.conditionSetting?.defaultFlow"
+      >
+        未满足其它条件时，将进入此分支（该分支不可编辑和删除）
+      </div>
+      <div v-else>
+        <Condition ref="conditionRef" v-model="condition" />
+      </div>
+    </div>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..461268b092daa27bc7798a9b19df42a583734bd4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+import type { CopyTaskFormType } from '../../helpers';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElTabPane,
+  ElTabs,
+  ElTreeSelect,
+} from 'element-plus';
+
+import {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({ name: 'CopyTaskNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  label =
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      ? `${label}(指定部门向上)`
+      : `${label}(发起人部门向上)`;
+  return label;
+});
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.COPY_TASK_NODE);
+
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+
+// 表单字段权限配置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  candidateStrategy: [
+    { required: true, message: '抄送人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText,
+  handleCandidateParam,
+  parseCandidateParam,
+} = useNodeForm(BpmNodeTypeEnum.COPY_TASK_NODE);
+
+const configForm = tempConfigForm as Ref<CopyTaskFormType>;
+// 抄送人策略，去掉发起人自选、发起人自审
+const copyUserStrategies = computed(() => {
+  return CANDIDATE_STRATEGY.filter(
+    (item) => item.value !== CandidateStrategy.START_USER,
+  );
+});
+
+// 改变抄送人设置策略
+function changeCandidateStrategy() {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+}
+
+// 保存配置
+async function saveConfig() {
+  activeTabName.value = 'user';
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.candidateParam = handleCandidateParam();
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  currentNode.value.showText = showText;
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  drawerApi.close();
+  return true;
+}
+
+// 显示抄送节点配置， 由父组件传过来
+function showCopyTaskNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  // 抄送人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+
+  drawerApi.open();
+}
+
+/** 批量更新权限 */
+function updatePermission(type: string) {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+}
+
+// 在组件初始化时对表单字段进行处理
+onMounted(() => {
+  // 可以在这里进行初始化操作
+});
+
+defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-2/5">
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <ElTabs v-model="activeTabName">
+      <ElTabPane label="抄送人" name="user">
+        <div>
+          <ElForm
+            ref="formRef"
+            :model="configForm"
+            label-position="top"
+            :rules="formRules"
+          >
+            <ElFormItem label="抄送人设置" prop="candidateStrategy">
+              <ElRadioGroup
+                v-model="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <ElRow :gutter="8">
+                  <ElCol
+                    v-for="(dict, index) in copyUserStrategies"
+                    :key="index"
+                    :span="8"
+                  >
+                    <ElRadio :value="dict.value">
+                      {{ dict.label }}
+                    </ElRadio>
+                  </ElCol>
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+
+            <ElFormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <ElSelect v-model="configForm.roleIds" clearable multiple>
+                <ElOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <ElTreeSelect
+                v-model="configForm.deptIds"
+                :data="deptTreeOptions"
+                :props="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+                empty-text="加载中，请稍候"
+                multiple
+                :check-strictly="true"
+                clearable
+                :show-checkbox="true"
+              />
+            </ElFormItem>
+            <ElFormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <ElSelect v-model="configForm.postIds" clearable multiple>
+                <ElOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <ElSelect v-model="configForm.userIds" clearable multiple>
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <ElSelect v-model="configForm.userGroups" clearable multiple>
+                <ElOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <ElSelect v-model="configForm.formUser" clearable>
+                <ElOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <ElSelect v-model="configForm.formDept" clearable>
+                <ElOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <ElSelect v-model="configForm.deptLevel" clearable>
+                <ElOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <ElInput
+                v-model="configForm.expression"
+                type="textarea"
+                clearable
+              />
+            </ElFormItem>
+          </ElForm>
+        </div>
+      </ElTabPane>
+      <ElTabPane
+        label="表单字段权限"
+        name="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-base font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <ElRow class="border border-gray-200 px-4 py-3">
+            <ElCol :span="8" class="font-bold">字段名称</ElCol>
+            <ElCol :span="16" class="!flex">
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
+            </ElCol>
+          </ElRow>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <ElRow class="border border-t-0 border-gray-200 px-4 py-2">
+              <ElCol :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </ElCol>
+              <ElCol :span="16">
+                <ElRadioGroup v-model="item.permission" class="flex w-full">
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.READ" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.WRITE" disabled />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.NONE" />
+                  </div>
+                </ElRadioGroup>
+              </ElCol>
+            </ElRow>
+          </div>
+        </div>
+      </ElTabPane>
+    </ElTabs>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2366eb9f2eef517ce51d2ac432615cb2641788ea
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElDatePicker,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+} from 'element-plus';
+
+import {
+  DELAY_TYPE,
+  DelayTypeEnum,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+} from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import { convertTimeUnit } from './utils';
+
+defineOptions({ name: 'DelayTimerNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.DELAY_TIMER_NODE);
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  delayType: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  timeDuration: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  dateTime: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+});
+
+// 配置表单数据
+const configForm = ref({
+  delayType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+});
+
+// 获取显示文本
+function getShowText(): string {
+  let showText = '';
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
+  }
+  return showText;
+}
+
+// 获取ISO时间格式
+function getIsoTimeDuration() {
+  let strTimeDuration = 'PT';
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += `${configForm.value.timeDuration}M`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += `${configForm.value.timeDuration}H`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += `${configForm.value.timeDuration}D`;
+  }
+  return strTimeDuration;
+}
+
+// 保存配置
+async function saveConfig() {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: getIsoTimeDuration(),
+    };
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: configForm.value.dateTime,
+    };
+  }
+  drawerApi.close();
+  return true;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onConfirm: saveConfig,
+});
+
+// 显示延迟器节点配置，由父组件调用
+function openDrawer(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  if (node.delaySetting) {
+    configForm.value.delayType = node.delaySetting.delayType;
+    // 固定时长
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+      const strTimeDuration = node.delaySetting.delayTime;
+      const parseTime = strTimeDuration.slice(2, -1);
+      const parseTimeUnit = strTimeDuration.slice(-1);
+      configForm.value.timeDuration = Number.parseInt(parseTime);
+      configForm.value.timeUnit = convertTimeUnit(parseTimeUnit);
+    }
+    // 固定日期时间
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+      configForm.value.dateTime = node.delaySetting.delayTime;
+    }
+  }
+  drawerApi.open();
+}
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-1/3">
+    <template #title>
+      <div class="flex items-center">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="mr-2 w-48"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" :size="16" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <ElForm
+        ref="formRef"
+        :model="configForm"
+        :rules="formRules"
+        label-position="top"
+      >
+        <ElFormItem label="延迟时间" prop="delayType">
+          <ElRadioGroup v-model="configForm.delayType">
+            <ElRadio
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
+        >
+          <div class="flex items-center gap-2">
+            <ElInputNumber
+              v-model="configForm.timeDuration"
+              :min="1"
+              controls-position="right"
+              class="!w-48"
+            />
+            <ElSelect v-model="configForm.timeUnit" class="w-24">
+              <ElOption
+                v-for="item in TIME_UNIT_TYPES"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              >
+                {{ item.label }}
+              </ElOption>
+            </ElSelect>
+            <span class="whitespace-nowrap">后进入下一节点</span>
+          </div>
+        </ElFormItem>
+        <ElFormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
+          prop="dateTime"
+        >
+          <div class="flex items-center gap-2">
+            <ElDatePicker
+              v-model="configForm.dateTime"
+              type="datetime"
+              placeholder="请选择日期和时间"
+              value-format="YYYY-MM-DDTHH:mm:ss"
+              class="flex-1"
+            />
+            <span class="whitespace-nowrap">后进入下一节点</span>
+          </div>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5fc304226ee1c49911e833a997665301502467af
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { ConditionGroup } from '../../../consts';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { ConditionType, DEFAULT_CONDITION_GROUP_VALUE } from '../../../consts';
+import Condition from './condition.vue';
+
+defineOptions({ name: 'ConditionDialog' });
+
+const emit = defineEmits<{
+  updateCondition: [condition: object];
+}>();
+
+const conditionData = ref<{
+  conditionExpression?: string;
+  conditionGroups?: ConditionGroup;
+  conditionType: ConditionType;
+}>({
+  conditionType: ConditionType.RULE,
+  conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+});
+
+// 条件组件的引用
+const conditionRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  title: '条件配置',
+  destroyOnClose: true,
+  draggable: true,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // 获取传递的数据
+      const conditionObj = modalApi.getData();
+      if (conditionObj) {
+        conditionData.value.conditionType = conditionObj.conditionType;
+        conditionData.value.conditionExpression =
+          conditionObj.conditionExpression;
+        conditionData.value.conditionGroups = conditionObj.conditionGroups;
+      }
+    }
+  },
+  async onConfirm() {
+    // 校验表单
+    if (!conditionRef.value) return;
+    const valid = await conditionRef.value.validate().catch(() => false);
+    if (!valid) {
+      ElMessage.warning('请完善条件规则');
+      return;
+    }
+    // 设置完的条件传递给父组件
+    emit('updateCondition', conditionData.value);
+    modalApi.close();
+  },
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+/**
+ * 打开条件配置弹窗，不暴露 modalApi 给父组件
+ */
+function openModal(conditionObj: any) {
+  modalApi.setData(conditionObj).open();
+}
+
+// 暴露方法给父组件
+defineExpose({ openModal });
+</script>
+<template>
+  <Modal class="w-1/2">
+    <Condition ref="conditionRef" v-model="conditionData" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e018cdde647fc6ae1fa75b2ad1ac5435a7b9aa81
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { Ref } from 'vue';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon, Plus, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElCard,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSpace,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({
+  name: 'Condition',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const condition = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const formType = inject<Ref<number>>('formType'); // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    return !(
+      formType?.value === BpmModelFormType.CUSTOM &&
+      item.value === ConditionType.RULE
+    );
+  });
+});
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser();
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  conditionType: [
+    { required: true, message: '配置方式不能为空', trigger: 'change' },
+  ],
+  conditionExpression: [
+    {
+      required: true,
+      message: '条件表达式不能为空',
+      trigger: ['blur', 'change'],
+    },
+  ],
+});
+
+const formRef = ref(); // 表单 Ref
+
+/** 切换条件配置方式 */
+function changeConditionType() {
+  if (
+    condition.value.conditionType === ConditionType.RULE &&
+    !condition.value.conditionGroups
+  ) {
+    condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
+  }
+}
+
+function deleteConditionGroup(conditions: any, index: number) {
+  conditions.splice(index, 1);
+}
+
+function deleteConditionRule(condition: any, index: number) {
+  condition.rules.splice(index, 1);
+}
+
+function addConditionRule(condition: any, index: number) {
+  const rule = {
+    opCode: '==',
+    leftSide: undefined,
+    rightSide: '',
+  };
+  condition.rules.splice(index + 1, 0, rule);
+}
+
+function addConditionGroup(conditions: any) {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: undefined,
+        rightSide: '',
+      },
+    ],
+  };
+  conditions.push(condition);
+}
+
+async function validate() {
+  if (!formRef.value) return false;
+  return await formRef.value.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <ElForm ref="formRef" :model="condition" :rules="formRules">
+    <ElFormItem label="配置方式" prop="conditionType">
+      <ElRadioGroup
+        v-model="condition.conditionType"
+        @change="changeConditionType"
+      >
+        <ElRadio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        condition.conditionType === ConditionType.RULE &&
+        condition.conditionGroups
+      "
+    >
+      <div class="mb-5 flex w-full justify-between">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <ElSwitch
+            v-model="condition.conditionGroups.and"
+            active-text="且"
+            inactive-text="或"
+          />
+        </div>
+      </div>
+      <ElSpace
+        direction="vertical"
+        size="small"
+        :spacer="condition.conditionGroups.and ? '且' : '或'"
+        class="w-full"
+        fill
+        :fill-ratio="100"
+      >
+        <ElCard
+          class="group relative w-full hover:border-blue-500"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="absolute left-0 top-0 z-[1] flex cursor-pointer opacity-0 group-hover:opacity-100"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <IconifyIcon
+              color="blue"
+              icon="lucide:circle-x"
+              class="size-4"
+              @click="
+                deleteConditionGroup(condition.conditionGroups.conditions, cIdx)
+              "
+            />
+          </div>
+          <template #extra>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <ElSwitch
+                  v-model="equation.and"
+                  active-text="且"
+                  inactive-text="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <ElRow
+            :gutter="8"
+            align="middle"
+            class="mb-2"
+            v-for="(rule, rIdx) in equation.rules"
+            :key="rIdx"
+          >
+            <ElCol :span="7">
+              <ElFormItem
+                :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <ElSelect
+                  v-model="rule.leftSide"
+                  clearable
+                  placeholder="请选择表单字段"
+                >
+                  <ElOption
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  >
+                    <ElTooltip
+                      content="表单字段非必填时不能作为流程分支条件"
+                      placement="right"
+                      v-if="!field.required"
+                    >
+                      <span>{{ field.title }}</span>
+                    </ElTooltip>
+                    <template v-else>{{ field.title }}</template>
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </ElCol>
+            <ElCol :span="6">
+              <ElFormItem>
+                <ElSelect v-model="rule.opCode" placeholder="请选择操作符">
+                  <ElOption
+                    v-for="operator in COMPARISON_OPERATORS"
+                    :key="operator.value"
+                    :label="operator.label"
+                    :value="operator.value"
+                  >
+                    {{ operator.label }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </ElCol>
+            <ElCol :span="8">
+              <ElFormItem
+                :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: ['blur', 'change'],
+                }"
+              >
+                <ElInput v-model="rule.rightSide" placeholder="请输入右值" />
+              </ElFormItem>
+            </ElCol>
+            <ElCol :span="3">
+              <div class="flex items-center">
+                <Plus
+                  class="mr-2 size-4 cursor-pointer text-blue-500"
+                  @click="addConditionRule(equation, rIdx)"
+                />
+                <Trash2
+                  v-show="equation.rules.length > 1"
+                  class="size-4 cursor-pointer text-red-500"
+                  @click="deleteConditionRule(equation, rIdx)"
+                />
+              </div>
+            </ElCol>
+          </ElRow>
+        </ElCard>
+      </ElSpace>
+      <div
+        class="mt-4 flex cursor-pointer items-center text-blue-500 hover:text-blue-600"
+        @click="addConditionGroup(condition.conditionGroups?.conditions)"
+      >
+        <Plus class="mr-1 size-5" />
+        <span>添加条件组</span>
+      </div>
+    </ElFormItem>
+    <ElFormItem
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      prop="conditionExpression"
+    >
+      <ElInput
+        v-model="condition.conditionExpression"
+        type="textarea"
+        placeholder="请输入条件表达式"
+        clearable
+        :autosize="{ minRows: 3, maxRows: 6 }"
+      />
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8501824c5e5858bfa997a57355735600fe05249
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import type { HttpRequestParam } from '../../../consts';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import {
+  BPM_HTTP_REQUEST_PARAM_TYPES,
+  BpmHttpRequestParamTypeEnum,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({ name: 'HttpRequestParamSetting' });
+
+const props = defineProps({
+  header: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  body: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  bind: {
+    type: String,
+    required: true,
+  },
+});
+
+// 流程表单字段，发起人字段
+const formFieldOptions = useFormFieldsAndStartUser();
+
+/** 添加请求配置项 */
+function addHttpRequestParam(arr: HttpRequestParam[]) {
+  arr.push({
+    key: '',
+    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
+    value: '',
+  });
+}
+
+/** 删除请求配置项 */
+function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
+  arr.splice(index, 1);
+}
+</script>
+<template>
+  <ElFormItem label="请求头">
+    <div
+      v-for="(item, index) in props.header"
+      :key="index"
+      class="mb-2 flex items-center gap-2"
+    >
+      <!-- 参数名 -->
+      <div class="w-[26%] min-w-32 shrink-0">
+        <ElFormItem
+          :prop="`${bind}.header.${index}.key`"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput placeholder="参数名不能为空" v-model="item.key" />
+        </ElFormItem>
+      </div>
+
+      <!-- 类型选择 -->
+      <div class="w-[24%] min-w-11 shrink-0">
+        <ElFormItem class="w-full">
+          <ElSelect v-model="item.type">
+            <ElOption
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+              :key="types.value"
+              :label="types.label"
+              :value="types.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+
+      <!-- 参数值 -->
+      <div class="w-[42%] flex-1">
+        <ElFormItem
+          :prop="`${bind}.header.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: ['blur', 'change'],
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <ElInput placeholder="请求头" v-model="item.value" />
+        </ElFormItem>
+        <ElFormItem
+          :prop="`${bind}.header.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <ElSelect
+            class="min-w-36"
+            v-model="item.value"
+            placeholder="请选择表单字段"
+          >
+            <ElOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+
+      <!-- 删除按钮 -->
+      <div class="flex w-[8%] shrink-0 items-center">
+        <IconifyIcon
+          class="size-4 cursor-pointer text-red-500"
+          icon="lucide:trash-2"
+          @click="deleteHttpRequestParam(props.header, index)"
+        />
+      </div>
+    </div>
+  </ElFormItem>
+  <div class="-mt-2.5 mb-2">
+    <ElButton link @click="addHttpRequestParam(props.header)">
+      <template #icon>
+        <IconifyIcon class="size-4" icon="lucide:plus" />
+      </template>
+      添加一行
+    </ElButton>
+  </div>
+  <ElFormItem label="请求体">
+    <div
+      v-for="(item, index) in props.body"
+      :key="index"
+      class="mb-2 flex items-center gap-2"
+    >
+      <!-- 参数名 -->
+      <div class="w-[26%] min-w-32 shrink-0">
+        <ElFormItem
+          :prop="`${bind}.body.${index}.key`"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput placeholder="参数名" v-model="item.key" />
+        </ElFormItem>
+      </div>
+
+      <!-- 类型选择 -->
+      <div class="w-[24%] min-w-11 shrink-0">
+        <ElFormItem>
+          <ElSelect v-model="item.type">
+            <ElOption
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+              :key="types.value"
+              :label="types.label"
+              :value="types.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+
+      <!-- 参数值 -->
+      <div class="w-[42%] flex-1">
+        <ElFormItem
+          :prop="`${bind}.body.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: ['blur', 'change'],
+          }"
+          v-show="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <ElInput placeholder="参数值" v-model="item.value" />
+        </ElFormItem>
+        <ElFormItem
+          :prop="`${bind}.body.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-show="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <ElSelect
+            class="min-w-36"
+            v-model="item.value"
+            placeholder="请选择表单字段"
+          >
+            <ElOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+
+      <!-- 删除按钮 -->
+      <div class="flex w-[8%] shrink-0 items-center">
+        <IconifyIcon
+          class="size-4 cursor-pointer text-red-500"
+          icon="lucide:trash-2"
+          @click="deleteHttpRequestParam(props.body, index)"
+        />
+      </div>
+    </div>
+  </ElFormItem>
+  <div class="-mt-2.5 mb-2">
+    <ElButton link @click="addHttpRequestParam(props.body)">
+      <template #icon>
+        <IconifyIcon class="size-4" icon="lucide:plus" />
+      </template>
+      添加一行
+    </ElButton>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2446effd29cab93734e63b71d41eda80e9d4d5c7
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { toRefs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAlert,
+  ElButton,
+  ElCol,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import { useFormFields } from '../../../helpers';
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+defineOptions({ name: 'HttpRequestSetting' });
+
+const props = defineProps({
+  setting: {
+    type: Object,
+    required: true,
+  },
+  responseEnable: {
+    type: Boolean,
+    required: true,
+  },
+  formItemPrefix: {
+    type: String,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['update:setting']);
+
+const { setting } = toRefs(props);
+
+watch(
+  () => setting,
+  (val) => {
+    emits('update:setting', val);
+  },
+);
+
+/** 流程表单字段 */
+const formFields = useFormFields();
+
+/** 添加 HTTP 请求返回值设置项 */
+function addHttpResponseSetting(responseSetting: Record<string, string>[]) {
+  responseSetting.push({
+    key: '',
+    value: '',
+  });
+}
+
+/** 删除 HTTP 请求返回值设置项 */
+function deleteHttpResponseSetting(
+  responseSetting: Record<string, string>[],
+  index: number,
+) {
+  responseSetting.splice(index, 1);
+}
+</script>
+<template>
+  <ElFormItem>
+    <ElAlert
+      title="仅支持 POST 请求，以请求体方式接收参数"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+  </ElFormItem>
+  <!-- 请求地址-->
+  <ElFormItem
+    label="请求地址"
+    :prop="`${formItemPrefix}.url`"
+    :rules="{
+      required: true,
+      message: '请求地址不能为空',
+      trigger: ['blur', 'change'],
+    }"
+  >
+    <ElInput v-model="setting.url" placeholder="请输入请求地址" />
+  </ElFormItem>
+  <!-- 请求头，请求体设置-->
+  <HttpRequestParamSetting
+    :header="setting.header"
+    :body="setting.body"
+    :bind="formItemPrefix"
+  />
+  <!-- 返回值设置-->
+  <div v-if="responseEnable">
+    <ElFormItem label="返回值">
+      <ElAlert
+        title="通过请求返回值, 可以修改流程表单的值"
+        type="warning"
+        show-icon
+        :closable="false"
+      />
+    </ElFormItem>
+    <ElRow
+      :gutter="8"
+      v-for="(item, index) in setting.response"
+      :key="index"
+      class="mb-2"
+      align="middle"
+    >
+      <ElCol :span="10">
+        <ElFormItem
+          class="!mb-0"
+          :prop="`${formItemPrefix}.response.${index}.key`"
+          :rules="{
+            required: true,
+            message: '表单字段不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElSelect v-model="item.key" placeholder="请选择表单字段" clearable>
+            <ElOption
+              v-for="(field, fIdx) in formFields"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="12">
+        <ElFormItem
+          class="!mb-0"
+          :prop="`${formItemPrefix}.response.${index}.value`"
+          :rules="{
+            required: true,
+            message: '请求返回字段不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput v-model="item.value" placeholder="请求返回字段" />
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="2">
+        <ElFormItem class="!mb-0">
+          <div class="flex h-8 items-center">
+            <IconifyIcon
+              class="size-4 cursor-pointer text-red-500"
+              icon="lucide:trash-2"
+              @click="deleteHttpResponseSetting(setting.response!, index)"
+            />
+          </div>
+        </ElFormItem>
+      </ElCol>
+    </ElRow>
+    <div>
+      <ElButton link @click="addHttpResponseSetting(setting.response!)">
+        <template #icon>
+          <IconifyIcon class="size-4" icon="lucide:plus" />
+        </template>
+        添加一行
+      </ElButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
new file mode 100644
index 0000000000000000000000000000000000000000..244e4727b9ec917cb9d5bb5107bfe423724fb87b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  ElAlert,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElSwitch,
+  ElText,
+} from 'element-plus';
+
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  formFieldOptions: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const listenerFormRef = ref();
+
+const configForm = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const taskListener = ref([
+  {
+    name: '创建任务',
+    type: 'Create',
+  },
+  {
+    name: '指派任务执行人员',
+    type: 'Assign',
+  },
+  {
+    name: '完成任务',
+    type: 'Complete',
+  },
+]);
+
+async function validate() {
+  if (!listenerFormRef.value) return false;
+  return await listenerFormRef.value.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <ElForm ref="listenerFormRef" :model="configForm">
+    <div
+      v-for="(listener, listenerIdx) in taskListener"
+      :key="listenerIdx"
+      class="pl-2"
+    >
+      <ElDivider orientation="left">
+        <ElText tag="b" size="large">
+          {{ listener.name }}
+        </ElText>
+      </ElDivider>
+      <ElFormItem>
+        <ElSwitch
+          v-model="configForm[`task${listener.type}ListenerEnable`]"
+          active-text="开启"
+          inactive-text="关闭"
+        />
+      </ElFormItem>
+      <div v-if="configForm[`task${listener.type}ListenerEnable`]">
+        <ElFormItem>
+          <ElAlert
+            title="仅支持 POST 请求，以请求体方式接收参数"
+            type="warning"
+            show-icon
+            :closable="false"
+          />
+        </ElFormItem>
+        <ElFormItem
+          label="请求地址"
+          :name="`task${listener.type}ListenerPath`"
+          :rules="{
+            required: true,
+            message: '请求地址不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <ElInput v-model="configForm[`task${listener.type}ListenerPath`]" />
+        </ElFormItem>
+        <HttpRequestParamSetting
+          :header="configForm[`task${listener.type}Listener`].header"
+          :body="configForm[`task${listener.type}Listener`].body"
+          :bind="`task${listener.type}Listener`"
+        />
+      </div>
+    </div>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f89070613d60b80eab95122d3db07320dc8cf9c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { RouterSetting, SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import { ConditionType } from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({ name: 'RouterNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
+
+/** 当前节点 */
+const currentNode = useWatchNode(props);
+/** 节点名称 */
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.ROUTER_BRANCH_NODE);
+const routerGroups = ref<RouterSetting[]>([]);
+const nodeOptions = ref<any[]>([]);
+const conditionRef = ref<any[]>([]);
+const formRef = ref();
+
+/** 校验节点配置 */
+async function validateConfig() {
+  // 校验路由分支选择
+  const routeIdValid = await formRef.value.validate().catch(() => false);
+  if (!routeIdValid) {
+    ElMessage.warning('请配置路由目标节点');
+    return false;
+  }
+
+  // 校验条件规则
+  let valid = true;
+  for (const item of conditionRef.value) {
+    if (item && !(await item.validate())) {
+      valid = false;
+    }
+  }
+  if (!valid) return false;
+
+  // 获取节点显示文本，如果为空，校验不通过
+  const showText = getShowText();
+  if (!showText) return false;
+
+  return true;
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  // 校验配置
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 保存配置
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = getShowText();
+  currentNode.value.routerGroups = routerGroups.value;
+  drawerApi.close();
+  return true;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onConfirm: saveConfig,
+});
+
+/** 打开路由节点配置抽屉，由父组件调用 */
+function openDrawer(node: SimpleFlowNode) {
+  nodeOptions.value = [];
+  getRouterNode(processNodeTree?.value);
+  routerGroups.value = [];
+  nodeName.value = node.name;
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups;
+  }
+  drawerApi.open();
+}
+
+/** 获取显示文本 */
+function getShowText() {
+  if (
+    !routerGroups.value ||
+    !Array.isArray(routerGroups.value) ||
+    routerGroups.value.length <= 0
+  ) {
+    ElMessage.warning('请配置路由！');
+    return '';
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      ElMessage.warning('请完善路由配置项！');
+      return '';
+    }
+    if (
+      route.conditionType === ConditionType.EXPRESSION &&
+      !route.conditionExpression
+    ) {
+      ElMessage.warning('请完善路由配置项！');
+      return '';
+    }
+    if (route.conditionType === ConditionType.RULE) {
+      for (const condition of route.conditionGroups.conditions) {
+        for (const rule of condition.rules) {
+          if (!rule.leftSide || !rule.rightSide) {
+            ElMessage.warning('请完善路由配置项！');
+            return '';
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`;
+}
+
+/** 添加路由分支 */
+function addRouterGroup() {
+  routerGroups.value.push({
+    nodeId: undefined,
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: undefined,
+              rightSide: '',
+            },
+          ],
+        },
+      ],
+    },
+  });
+}
+
+/** 删除路由分支 */
+function deleteRouterGroup(index: number) {
+  routerGroups.value.splice(index, 1);
+}
+
+/** 递归获取所有节点 */
+function getRouterNode(node: any) {
+  // TODO 最好还需要满足以下要求：
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break;
+    if (
+      node.type !== BpmNodeTypeEnum.ROUTER_BRANCH_NODE &&
+      node.type !== BpmNodeTypeEnum.CONDITION_NODE
+    ) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id,
+      });
+    }
+    if (!node.childNode || node.type === BpmNodeTypeEnum.END_EVENT_NODE) {
+      break;
+    }
+    if (node.conditionNodes && node.conditionNodes.length > 0) {
+      node.conditionNodes.forEach((item: any) => {
+        getRouterNode(item);
+      });
+    }
+    node = node.childNode;
+  }
+}
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-2/5">
+    <template #title>
+      <div class="flex items-center">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" />
+        </div>
+      </div>
+    </template>
+
+    <ElForm ref="formRef" :model="{ routerGroups }">
+      <ElCard
+        :body-style="{ padding: '10px' }"
+        class="mt-4"
+        v-for="(item, index) in routerGroups"
+        :key="index"
+      >
+        <template #header>
+          <div class="flex w-full items-center justify-between py-2">
+            <div class="flex items-center gap-4">
+              <span class="font-medium">路由{{ index + 1 }}</span>
+              <ElFormItem
+                class="!mb-0 w-64"
+                :prop="`routerGroups.${index}.nodeId`"
+                :rules="{
+                  required: true,
+                  message: '路由目标节点不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <ElSelect
+                  v-model="item.nodeId"
+                  placeholder="请选择路由目标节点"
+                  clearable
+                >
+                  <ElOption
+                    v-for="node in nodeOptions"
+                    :key="node.value"
+                    :label="node.label"
+                    :value="node.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+            <ElButton
+              v-if="routerGroups.length > 1"
+              circle
+              size="small"
+              @click="deleteRouterGroup(index)"
+            >
+              <template #icon>
+                <IconifyIcon icon="lucide:x" />
+              </template>
+            </ElButton>
+          </div>
+        </template>
+        <Condition
+          :ref="(el) => (conditionRef[index] = el)"
+          :model-value="routerGroups[index]"
+          @update:model-value="(val) => (routerGroups[index] = val)"
+        />
+      </ElCard>
+    </ElForm>
+
+    <ElRow class="mt-4">
+      <ElCol :span="24">
+        <ElButton class="flex items-center p-0" link @click="addRouterGroup">
+          <template #icon>
+            <IconifyIcon icon="lucide:settings" />
+          </template>
+          新增路由分支
+        </ElButton>
+      </ElCol>
+    </ElRow>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bae452fa34aced632c6f6253cd19b48f6357029b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElCol,
+  ElInput,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+  ElText,
+  ElTooltip,
+} from 'element-plus';
+
+import { FieldPermissionType, START_USER_BUTTON_SETTING } from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({ name: 'StartUserNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 可发起流程的用户编号
+const startUserIds = inject<Ref<any[]>>('startUserIds');
+// 可发起流程的部门编号
+const startDeptIds = inject<Ref<any[]>>('startDeptIds');
+// 用户列表
+const userOptions = inject<Ref<SystemUserApi.User[]>>('userList');
+// 部门列表
+const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.START_USER_NODE);
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.WRITE);
+
+function getUserNicknames(userIds: number[]): string {
+  if (!userIds || userIds.length === 0) {
+    return '';
+  }
+  const nicknames: string[] = [];
+  userIds.forEach((userId) => {
+    const found = userOptions?.value.find((item) => item.id === userId);
+    if (found && found.nickname) {
+      nicknames.push(found.nickname);
+    }
+  });
+  return nicknames.join(',');
+}
+
+function getDeptNames(deptIds: number[]): string {
+  if (!deptIds || deptIds.length === 0) {
+    return '';
+  }
+  const deptNames: string[] = [];
+  deptIds.forEach((deptId) => {
+    const found = deptOptions?.value.find((item) => item.id === deptId);
+    if (found && found.name) {
+      deptNames.push(found.name);
+    }
+  });
+  return deptNames.join(',');
+}
+
+// 使用 VbenDrawer
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  onCancel() {
+    drawerApi.setState({ isOpen: false });
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 保存配置
+async function saveConfig() {
+  activeTabName.value = 'user';
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = '已设置';
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  // 设置发起人的按钮权限
+  currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
+  drawerApi.setState({ isOpen: false });
+  return true;
+}
+
+// 显示发起人节点配置，由父组件传过来
+function showStartUserNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+  drawerApi.open();
+}
+
+/** 批量更新权限 */
+function updatePermission(type: string) {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+}
+
+/**
+ * 暴露方法给父组件
+ */
+defineExpose({ showStartUserNodeConfig });
+</script>
+<template>
+  <Drawer>
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon
+            class="ml-1"
+            icon="lucide:edit-3"
+            :size="16"
+            @click="clickIcon()"
+          />
+        </div>
+      </div>
+    </template>
+    <ElTabs v-model="activeTabName" type="card">
+      <ElTabPane label="权限" name="user">
+        <ElText
+          v-if="
+            (!startUserIds || startUserIds.length === 0) &&
+            (!startDeptIds || startDeptIds.length === 0)
+          "
+        >
+          全部成员可以发起流程
+        </ElText>
+        <div v-else-if="startUserIds && startUserIds.length > 0">
+          <ElText v-if="startUserIds.length === 1">
+            {{ getUserNicknames(startUserIds) }} 可发起流程
+          </ElText>
+          <ElText v-else>
+            <ElTooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getUserNicknames(startUserIds)"
+            >
+              {{ getUserNicknames(startUserIds.slice(0, 2)) }} 等
+              {{ startUserIds.length }} 人可发起流程
+            </ElTooltip>
+          </ElText>
+        </div>
+        <div v-else-if="startDeptIds && startDeptIds.length > 0">
+          <ElText v-if="startDeptIds.length === 1">
+            {{ getDeptNames(startDeptIds) }} 可发起流程
+          </ElText>
+          <ElText v-else>
+            <ElTooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="getDeptNames(startDeptIds)"
+            >
+              {{ getDeptNames(startDeptIds.slice(0, 2)) }} 等
+              {{ startDeptIds.length }} 个部门可发起流程
+            </ElTooltip>
+          </ElText>
+        </div>
+      </ElTabPane>
+      <ElTabPane
+        label="表单字段权限"
+        name="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-base font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <ElRow class="border border-gray-200 px-4 py-3">
+            <ElCol :span="8" class="font-bold">字段名称</ElCol>
+            <ElCol :span="16" class="!flex">
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
+            </ElCol>
+          </ElRow>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <ElRow class="border border-t-0 border-gray-200 px-4 py-2">
+              <ElCol :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </ElCol>
+              <ElCol :span="16">
+                <ElRadioGroup v-model="item.permission" class="flex w-full">
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.READ" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.WRITE" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.NONE" />
+                  </div>
+                </ElRadioGroup>
+              </ElCol>
+            </ElRow>
+          </div>
+        </div>
+      </ElTabPane>
+    </ElTabs>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f01543c3ea2e0525b077f0b0be81702f15cf34cb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -0,0 +1,684 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+// SelectValue type removed - use string | number | boolean directly
+
+import type {
+  FormTriggerSetting,
+  SimpleFlowNode,
+  TriggerSetting,
+} from '../../consts';
+
+import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRow,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import {
+  DEFAULT_CONDITION_GROUP_VALUE,
+  TRIGGER_TYPES,
+  TriggerTypeEnum,
+} from '../../consts';
+import {
+  getConditionShowText,
+  useFormFields,
+  useFormFieldsAndStartUser,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import ConditionDialog from './modules/condition-dialog.vue';
+import HttpRequestSetting from './modules/http-request-setting.vue';
+
+defineOptions({
+  name: 'TriggerNodeConfig',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const { proxy } = getCurrentInstance() as any;
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.TRIGGER_NODE);
+// 触发器表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: FormRules = reactive({
+  type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
+  'httpRequestSetting.url': [
+    { required: true, message: '请求地址不能为空', trigger: 'blur' },
+  ],
+});
+
+// 触发器配置表单数据
+const configForm = ref<TriggerSetting>({
+  type: TriggerTypeEnum.HTTP_REQUEST,
+  httpRequestSetting: {
+    url: '',
+    header: [],
+    body: [],
+    response: [],
+  },
+  formSettings: [
+    {
+      conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      updateFormFields: {},
+      deleteFields: [],
+    },
+  ],
+});
+// 流程表单字段
+const formFields = useFormFields();
+
+// 可选的修改的表单字段
+const optionalUpdateFormFields = computed(() => {
+  return formFields.map((field) => ({
+    title: field.title,
+    field: field.field,
+    disabled: false,
+  }));
+});
+
+let originalSetting: TriggerSetting | undefined;
+
+/** 触发器类型改变了 */
+function changeTriggerType() {
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_CALLBACK &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_UPDATE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: {},
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_DELETE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: undefined,
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+  }
+}
+
+/** 添加新的修改表单设置 */
+function addFormSetting() {
+  configForm.value.formSettings!.push({
+    conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+    updateFormFields: {},
+    deleteFields: [],
+  });
+}
+
+/** 删除修改表单设置 */
+function deleteFormSetting(index: number) {
+  configForm.value.formSettings!.splice(index, 1);
+}
+
+/** 添加条件配置 */
+function addFormSettingCondition(
+  index: number,
+  formSetting: FormTriggerSetting,
+) {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
+}
+
+/** 删除条件配置 */
+function deleteFormSettingCondition(formSetting: FormTriggerSetting) {
+  formSetting.conditionType = undefined;
+}
+
+/** 打开条件配置弹窗 */
+function openFormSettingCondition(
+  index: number,
+  formSetting: FormTriggerSetting,
+) {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
+}
+
+/** 处理条件配置保存 */
+function handleConditionUpdate(index: number, condition: any) {
+  if (configForm.value.formSettings![index]) {
+    configForm.value.formSettings![index].conditionType =
+      condition.conditionType;
+    configForm.value.formSettings![index].conditionExpression =
+      condition.conditionExpression;
+    configForm.value.formSettings![index].conditionGroups =
+      condition.conditionGroups;
+  }
+}
+// 包含发起人字段的表单字段
+const includeStartUserFormFields = useFormFieldsAndStartUser();
+/** 条件配置展示 */
+function showConditionText(formSetting: FormTriggerSetting) {
+  return getConditionShowText(
+    formSetting.conditionType,
+    formSetting.conditionExpression,
+    formSetting.conditionGroups,
+    includeStartUserFormFields,
+  );
+}
+
+/** 添加修改字段设置项 */
+function addFormFieldSetting(formSetting: FormTriggerSetting) {
+  if (!formSetting) return;
+  if (!formSetting.updateFormFields) {
+    formSetting.updateFormFields = {};
+  }
+  formSetting.updateFormFields[''] = undefined;
+}
+
+/** 更新字段 KEY */
+function updateFormFieldKey(
+  formSetting: FormTriggerSetting,
+  oldKey: string,
+  newKey: number | string,
+) {
+  if (!formSetting?.updateFormFields || !newKey) return;
+  const value = formSetting.updateFormFields[oldKey];
+  delete formSetting.updateFormFields[oldKey];
+  formSetting.updateFormFields[String(newKey)] = value;
+}
+
+/** 删除修改字段设置 */
+function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
+  if (!formSetting?.updateFormFields) return;
+  delete formSetting.updateFormFields[key];
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理修改字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.updateFormFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理删除字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.deleteFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      configForm.value.formSettings = undefined;
+
+      break;
+    }
+    // No default
+  }
+  currentNode.value.triggerSetting = configForm.value;
+  drawerApi.close();
+  return true;
+}
+
+/** 获取节点展示内容 */
+function getShowText(): string {
+  let showText = '';
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (!setting.deleteFields || setting.deleteFields.length === 0) {
+          ElMessage.warning(`请选择表单设置${index + 1}要删除的字段`);
+          return '';
+        }
+      }
+      showText = '删除表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (
+          !setting.updateFormFields ||
+          Object.keys(setting.updateFormFields).length === 0
+        ) {
+          ElMessage.warning(`请添加表单设置${index + 1}的修改字段`);
+          return '';
+        }
+      }
+      showText = '修改表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_CALLBACK:
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      showText = `${configForm.value.httpRequestSetting?.url}`;
+
+      break;
+    }
+    // No default
+  }
+  return showText;
+}
+
+/** 显示触发器节点配置，由父组件传过来 */
+function showTriggerNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  originalSetting = node.triggerSetting
+    ? cloneDeep(node.triggerSetting)
+    : undefined;
+  if (node.triggerSetting) {
+    configForm.value = {
+      type: node.triggerSetting.type,
+      httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      },
+      formSettings: node.triggerSetting.formSettings || [
+        {
+          conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          updateFormFields: {},
+          deleteFields: [],
+        },
+      ],
+    };
+  }
+  drawerApi.open();
+}
+
+// 暴露方法给父组件
+defineExpose({ showTriggerNodeConfig });
+
+onMounted(() => {
+  // 初始化可能需要的操作
+});
+</script>
+<template>
+  <Drawer class="w-2/5">
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          ref="inputRef"
+          v-if="showInput"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div>
+      <ElForm
+        ref="formRef"
+        :model="configForm"
+        label-position="top"
+        :rules="formRules"
+      >
+        <ElFormItem label="触发器类型" prop="type">
+          <ElSelect v-model="configForm.type" @change="changeTriggerType">
+            <ElOption
+              v-for="(item, index) in TRIGGER_TYPES"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <!-- HTTP 请求触发器 -->
+        <div
+          v-if="
+            [
+              TriggerTypeEnum.HTTP_REQUEST,
+              TriggerTypeEnum.HTTP_CALLBACK,
+            ].includes(configForm.type) && configForm.httpRequestSetting
+          "
+        >
+          <HttpRequestSetting
+            v-model:setting="configForm.httpRequestSetting"
+            :response-enable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
+            form-item-prefix="httpRequestSetting"
+          />
+        </div>
+
+        <!-- 表单数据修改触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <ElCard class="mt-4">
+              <template #header>
+                <div class="flex w-full items-center justify-between">
+                  <span>修改表单设置 {{ index + 1 }}</span>
+                  <ElButton
+                    v-if="configForm.formSettings!.length > 1"
+                    circle
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:x" />
+                    </template>
+                  </ElButton>
+                </div>
+              </template>
+
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <ElRow>
+                <ElCol :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <ElTag
+                      color="success"
+                      closable
+                      class="text-sm"
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </ElTag>
+                  </div>
+                  <ElButton
+                    v-else
+                    type="primary"
+                    link
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:link" />
+                    </template>
+                    添加条件
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+              <ElDivider>修改表单字段设置</ElDivider>
+              <!-- 表单字段修改设置 -->
+              <ElRow
+                :gutter="8"
+                v-for="key in Object.keys(formSetting.updateFormFields || {})"
+                :key="key"
+              >
+                <ElCol :span="8">
+                  <ElFormItem>
+                    <ElSelect
+                      :value="key || undefined"
+                      @change="
+                        (newKey) => updateFormFieldKey(formSetting, key, newKey)
+                      "
+                      placeholder="请选择表单字段"
+                      :disabled="key !== ''"
+                      allow-clear
+                    >
+                      <ElOption
+                        v-for="(field, fIdx) in optionalUpdateFormFields"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                        :disabled="field.disabled"
+                      >
+                        {{ field.title }}
+                      </ElOption>
+                    </ElSelect>
+                  </ElFormItem>
+                </ElCol>
+                <ElCol :span="4">
+                  <ElFormItem>的值设置为</ElFormItem>
+                </ElCol>
+                <ElCol :span="10">
+                  <ElFormItem
+                    :name="['formSettings', index, 'updateFormFields', key]"
+                    :rules="{
+                      required: true,
+                      message: '值不能为空',
+                      trigger: 'blur',
+                    }"
+                  >
+                    <ElInput
+                      v-model="formSetting.updateFormFields![key]"
+                      placeholder="请输入值"
+                      clearable
+                      :disabled="!key"
+                    />
+                  </ElFormItem>
+                </ElCol>
+                <ElCol :span="2">
+                  <div class="flex h-8 items-center">
+                    <IconifyIcon
+                      class="size-4 cursor-pointer text-red-500"
+                      icon="lucide:trash-2"
+                      @click="deleteFormFieldSetting(formSetting, key)"
+                    />
+                  </div>
+                </ElCol>
+              </ElRow>
+
+              <!-- 添加表单字段按钮 -->
+              <ElRow>
+                <ElCol :span="24">
+                  <ElButton
+                    type="primary"
+                    link
+                    class="flex items-center p-0"
+                    @click="addFormFieldSetting(formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:file-cog" />
+                    </template>
+                    添加修改字段
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+            </ElCard>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <ElRow class="mt-6">
+            <ElCol :span="24">
+              <ElButton
+                class="flex items-center p-0"
+                link
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="lucide:settings" />
+                </template>
+                添加设置
+              </ElButton>
+            </ElCol>
+          </ElRow>
+        </div>
+
+        <!-- 表单数据删除触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <ElCard class="mt-4">
+              <template #header>
+                <div class="flex w-full items-center justify-between">
+                  <span>删除表单设置 {{ index + 1 }}</span>
+                  <ElButton
+                    v-if="configForm.formSettings!.length > 1"
+                    circle
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:x" />
+                    </template>
+                  </ElButton>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <ElRow>
+                <ElCol :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <ElTag
+                      color="success"
+                      closable
+                      class="text-sm"
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </ElTag>
+                  </div>
+                  <ElButton
+                    v-else
+                    type="primary"
+                    link
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="lucide:link" />
+                    </template>
+                    添加条件
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+
+              <ElDivider>删除表单字段设置</ElDivider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <ElSelect
+                  v-model:value="formSetting.deleteFields"
+                  mode="multiple"
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <ElOption
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </ElOption>
+                </ElSelect>
+              </div>
+            </ElCard>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <ElRow class="mt-6">
+            <ElCol :span="24">
+              <ElButton
+                class="flex items-center p-0"
+                link
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="lucide:settings" />
+                </template>
+                添加设置
+              </ElButton>
+            </ElCol>
+          </ElRow>
+        </div>
+      </ElForm>
+    </div>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..effa8b404445d40c353c130e397fb6ced350fabb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -0,0 +1,1178 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus';
+
+import type { ComponentPublicInstance, Ref } from 'vue';
+
+import type { ButtonSetting, SimpleFlowNode } from '../../consts';
+import type { UserTaskFormType } from '../../helpers';
+
+import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import {
+  BpmModelFormType,
+  BpmNodeTypeEnum,
+  ProcessVariableEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCol,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElOption,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSwitch,
+  ElTabPane,
+  ElTabs,
+  ElTreeSelect,
+} from 'element-plus';
+
+import {
+  APPROVE_METHODS,
+  APPROVE_TYPE,
+  ApproveMethodType,
+  ApproveType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  ASSIGN_START_USER_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  DEFAULT_BUTTON_SETTING,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+  OPERATION_BUTTON_NAME,
+  REJECT_HANDLER_TYPES,
+  RejectHandlerType,
+  TIME_UNIT_TYPES,
+  TIMEOUT_HANDLER_TYPES,
+  TimeoutHandlerType,
+  TimeUnitType,
+  TRANSACTOR_DEFAULT_BUTTON_SETTING,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import UserTaskListener from './modules/user-task-listener.vue';
+import { convertTimeUnit, getApproveTypeText } from './utils';
+
+defineOptions({ name: 'UserTaskNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const emits = defineEmits<{
+  findReturnTaskNodes: [nodeList: SimpleFlowNode[]];
+}>();
+
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  if (
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+  ) {
+    label = `${label}(指定部门向上)`;
+  } else if (
+    configForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    label = `${label}(表单内部门向上)`;
+  } else {
+    label = `${label}(发起人部门向上)`;
+  }
+  return label;
+});
+
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 节点名称配置
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
+  useNodeName(BpmNodeTypeEnum.USER_TASK_NODE);
+
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+
+// 表单字段权限设置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+// 操作按钮设置
+const {
+  buttonsSetting,
+  btnDisplayNameEdit,
+  changeBtnDisplayName,
+  btnDisplayNameBlurEvent,
+  setInputRef,
+} = useButtonsSetting();
+
+const approveType = ref(ApproveType.USER);
+
+// 审批人表单设置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: FormRules = reactive({
+  candidateStrategy: [
+    { required: true, message: '审批人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+  approveMethod: [
+    { required: true, message: '多人审批方式不能为空', trigger: 'change' },
+  ],
+  approveRatio: [
+    { required: true, message: '通过比例不能为空', trigger: 'blur' },
+  ],
+  returnNodeId: [
+    { required: true, message: '驳回节点不能为空', trigger: 'change' },
+  ],
+  timeoutHandlerEnable: [{ required: true }],
+  timeoutHandlerType: [{ required: true }],
+  timeDuration: [
+    { required: true, message: '超时时间不能为空', trigger: 'blur' },
+  ],
+  maxRemindCount: [
+    { required: true, message: '提醒次数不能为空', trigger: 'blur' },
+  ],
+  assignEmptyHandlerType: [{ required: true }],
+  assignEmptyHandlerUserIds: [
+    { required: true, message: '用户不能为空', trigger: 'change' },
+  ],
+  assignStartUserHandlerType: [{ required: true }],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  handleCandidateParam,
+  parseCandidateParam,
+  getShowText,
+} = useNodeForm(currentNode.value.type);
+const configForm = tempConfigForm as Ref<UserTaskFormType>;
+
+// 改变审批人设置策略
+function changeCandidateStrategy() {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+  configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
+}
+
+/** 审批方式改变 */
+function approveMethodChanged() {
+  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = 100;
+  }
+  formRef.value.clearValidate('approveRatio');
+}
+// 审批拒绝 可退回的节点
+const returnTaskList = ref<SimpleFlowNode[]>([]);
+// 审批人超时未处理设置
+const {
+  timeoutHandlerChange,
+  cTimeoutType,
+  timeoutHandlerTypeChanged,
+  timeUnit,
+  timeUnitChange,
+  isoTimeDuration,
+  cTimeoutMaxRemindCount,
+} = useTimeoutHandler();
+
+const userTaskListenerRef = ref();
+
+/** 节点类型名称 */
+const nodeTypeName = computed(() => {
+  return currentNode.value.type === BpmNodeTypeEnum.TRANSACTOR_NODE
+    ? '办理'
+    : '审批';
+});
+
+/** 校验节点配置 */
+async function validateConfig() {
+  if (!formRef.value) return false;
+  if (!userTaskListenerRef.value) return false;
+
+  // 先进行表单验证，记录验证结果
+  const userFormValid = await formRef.value.validate().catch(() => false);
+  const listenerValid = await userTaskListenerRef.value.validate().catch(() => {
+    return false;
+  });
+  // 如果监听器有错误，切换到监听器Tab
+  if (!listenerValid) {
+    activeTabName.value = 'listener';
+    return false;
+  }
+  // 如果审批人表单有错误，切换到审批人Tab
+  if (!userFormValid) {
+    activeTabName.value = 'user';
+    return false;
+  }
+
+  const showText = getShowText();
+  if (!showText) return false;
+
+  return true;
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  // 如果不是人工审批，不执行校验，直接返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.name = nodeName.value!;
+    currentNode.value.approveType = approveType.value;
+    currentNode.value.showText = getApproveTypeText(approveType.value);
+    drawerApi.close();
+    return true;
+  }
+  // 执行校验
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!;
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value;
+  // 设置审批人设置策略
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  // 处理 candidateParam 参数
+  currentNode.value.candidateParam = handleCandidateParam();
+  // 设置审批方式
+  currentNode.value.approveMethod = configForm.value.approveMethod;
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.approveRatio = configForm.value.approveRatio;
+  }
+  // 设置拒绝处理
+  currentNode.value.rejectHandler = {
+    type: configForm.value.rejectHandlerType!,
+    returnNodeId: configForm.value.returnNodeId,
+  };
+  // 设置超时处理
+  currentNode.value.timeoutHandler = {
+    enable: configForm.value.timeoutHandlerEnable!,
+    type: cTimeoutType.value,
+    timeDuration: isoTimeDuration.value,
+    maxRemindCount: cTimeoutMaxRemindCount.value,
+  };
+  // 设置审批人为空时
+  currentNode.value.assignEmptyHandler = {
+    type: configForm.value.assignEmptyHandlerType!,
+    userIds:
+      configForm.value.assignEmptyHandlerType ===
+      AssignEmptyHandlerType.ASSIGN_USER
+        ? configForm.value.assignEmptyHandlerUserIds
+        : undefined,
+  };
+  // 设置审批人与发起人相同时
+  currentNode.value.assignStartUserHandlerType =
+    configForm.value.assignStartUserHandlerType;
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  // 设置按钮权限
+  currentNode.value.buttonsSetting = buttonsSetting.value;
+  // 创建任务监听器
+  currentNode.value.taskCreateListener = {
+    enable: configForm.value.taskCreateListenerEnable ?? false,
+    path: configForm.value.taskCreateListenerPath,
+    header: configForm.value.taskCreateListener?.header,
+    body: configForm.value.taskCreateListener?.body,
+  };
+  // 指派任务监听器
+  currentNode.value.taskAssignListener = {
+    enable: configForm.value.taskAssignListenerEnable ?? false,
+    path: configForm.value.taskAssignListenerPath,
+    header: configForm.value.taskAssignListener?.header,
+    body: configForm.value.taskAssignListener?.body,
+  };
+  // 完成任务监听器
+  currentNode.value.taskCompleteListener = {
+    enable: configForm.value.taskCompleteListenerEnable ?? false,
+    path: configForm.value.taskCompleteListenerPath,
+    header: configForm.value.taskCompleteListener?.header,
+    body: configForm.value.taskCompleteListener?.body,
+  };
+  // 签名
+  currentNode.value.signEnable = configForm.value.signEnable;
+  // 审批意见
+  currentNode.value.reasonRequire = configForm.value.reasonRequire;
+  // 跳过表达式
+  currentNode.value.skipExpression = configForm.value.skipExpression;
+  currentNode.value.showText = getShowText();
+  drawerApi.close();
+  return true;
+}
+
+/** 显示审批节点配置抽屉，由父组件传过来 */
+function showUserTaskNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  // 1 审批类型
+  approveType.value =
+    node?.approveType === undefined ? ApproveType.USER : node.approveType;
+  // 如果审批类型不是人工审批返回
+  if (approveType.value !== ApproveType.USER) {
+    drawerApi.open();
+    return;
+  }
+
+  // 2.1 审批人设置策略
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  // 解析候选人参数
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 2.2 设置审批方式
+  configForm.value.approveMethod = node.approveMethod!;
+  if (node.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = node.approveRatio!;
+  }
+  // 2.3 设置审批拒绝处理
+  configForm.value.rejectHandlerType = node.rejectHandler?.type;
+  configForm.value.returnNodeId = node.rejectHandler?.returnNodeId;
+  const matchNodeList: SimpleFlowNode[] = [];
+  emits('findReturnTaskNodes', matchNodeList);
+  returnTaskList.value = matchNodeList;
+  // 2.4 设置审批超时处理
+  configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable;
+  if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
+    const strTimeDuration = node.timeoutHandler.timeDuration;
+    const parseTime = strTimeDuration.slice(2, -1);
+    const parseTimeUnit = strTimeDuration.slice(-1);
+    configForm.value.timeDuration = Number.parseInt(parseTime);
+    timeUnit.value = convertTimeUnit(parseTimeUnit);
+  }
+  configForm.value.timeoutHandlerType = node.timeoutHandler?.type;
+  configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount;
+  // 2.5 设置审批人为空时
+  configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type;
+  configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds;
+  // 2.6 设置用户任务的审批人与发起人相同处理
+  configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType;
+  // 3. 操作按钮设置
+  buttonsSetting.value =
+    cloneDeep(node.buttonsSetting) ||
+    (node.type === BpmNodeTypeEnum.TRANSACTOR_NODE
+      ? TRANSACTOR_DEFAULT_BUTTON_SETTING
+      : DEFAULT_BUTTON_SETTING);
+  // 4. 表单字段权限配置
+  getNodeConfigFormFields(node.fieldsPermission);
+  // 5. 监听器
+  // 5.1 创建任务
+  configForm.value.taskCreateListenerEnable = node.taskCreateListener?.enable;
+  configForm.value.taskCreateListenerPath = node.taskCreateListener?.path;
+  configForm.value.taskCreateListener = {
+    header: node.taskCreateListener?.header ?? [],
+    body: node.taskCreateListener?.body ?? [],
+  };
+  // 5.2 指派任务
+  configForm.value.taskAssignListenerEnable = node.taskAssignListener?.enable;
+  configForm.value.taskAssignListenerPath = node.taskAssignListener?.path;
+  configForm.value.taskAssignListener = {
+    header: node.taskAssignListener?.header ?? [],
+    body: node.taskAssignListener?.body ?? [],
+  };
+  // 5.3 完成任务
+  configForm.value.taskCompleteListenerEnable =
+    node.taskCompleteListener?.enable;
+  configForm.value.taskCompleteListenerPath = node.taskCompleteListener?.path;
+  configForm.value.taskCompleteListener = {
+    header: node.taskCompleteListener?.header ?? [],
+    body: node.taskCompleteListener?.body ?? [],
+  };
+  // 6. 签名
+  configForm.value.signEnable = node?.signEnable ?? false;
+  // 7. 审批意见
+  configForm.value.reasonRequire = node?.reasonRequire ?? false;
+  // 8. 跳过表达式
+  configForm.value.skipExpression = node?.skipExpression ?? '';
+  drawerApi.open();
+}
+
+defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件
+
+/** 操作按钮设置 */
+function useButtonsSetting() {
+  const buttonsSetting = ref<ButtonSetting[]>();
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([]);
+  // 输入框的引用数组 - 内部使用，不暴露出去
+  const _btnDisplayNameInputRefs = ref<Array<HTMLInputElement | null>>([]);
+
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true;
+    // 输入框自动聚焦
+    nextTick(() => {
+      if (_btnDisplayNameInputRefs.value[index]) {
+        _btnDisplayNameInputRefs.value[index]?.focus();
+      }
+    });
+  };
+
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false;
+    const buttonItem = buttonsSetting.value![index];
+    if (buttonItem)
+      buttonItem.displayName =
+        buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
+  };
+
+  // 设置 ref 引用的方法
+  const setInputRef = (
+    el: ComponentPublicInstance | Element | null,
+    index: number,
+  ) => {
+    _btnDisplayNameInputRefs.value[index] = el as HTMLInputElement;
+  };
+
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent,
+    setInputRef,
+  };
+}
+
+/** 审批人超时未处理配置 */
+function useTimeoutHandler() {
+  // 时间单位
+  const timeUnit = ref(TimeUnitType.HOUR);
+
+  // 超时开关改变
+  const timeoutHandlerChange = () => {
+    if (configForm.value.timeoutHandlerEnable) {
+      timeUnit.value = 2;
+      configForm.value.timeDuration = 6;
+      configForm.value.timeoutHandlerType = 1;
+      configForm.value.maxRemindCount = 1;
+    }
+  };
+  // 超时执行的动作
+  const cTimeoutType = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    return configForm.value.timeoutHandlerType;
+  });
+
+  // 超时处理动作改变
+  const timeoutHandlerTypeChanged = () => {
+    if (configForm.value.timeoutHandlerType === TimeoutHandlerType.REMINDER) {
+      configForm.value.maxRemindCount = 1; // 超时提醒次数，默认为1
+    }
+  };
+
+  // 时间单位改变
+  const timeUnitChange = () => {
+    // 分钟，默认是 60 分钟
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      configForm.value.timeDuration = 60;
+    }
+    // 小时，默认是 6 个小时
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      configForm.value.timeDuration = 6;
+    }
+    // 天， 默认 1 天
+    if (timeUnit.value === TimeUnitType.DAY) {
+      configForm.value.timeDuration = 1;
+    }
+  };
+  // 超时时间 ISO 表示
+  const isoTimeDuration = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    let strTimeDuration = 'PT';
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      strTimeDuration += `${configForm.value.timeDuration}M`;
+    }
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      strTimeDuration += `${configForm.value.timeDuration}H`;
+    }
+    if (timeUnit.value === TimeUnitType.DAY) {
+      strTimeDuration += `${configForm.value.timeDuration}D`;
+    }
+    return strTimeDuration;
+  });
+
+  // 超时最大提醒次数
+  const cTimeoutMaxRemindCount = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined;
+    }
+    if (configForm.value.timeoutHandlerType !== TimeoutHandlerType.REMINDER) {
+      return undefined;
+    }
+    return configForm.value.maxRemindCount;
+  });
+
+  return {
+    timeoutHandlerChange,
+    cTimeoutType,
+    timeoutHandlerTypeChanged,
+    timeUnit,
+    timeUnitChange,
+    isoTimeDuration,
+    cTimeoutMaxRemindCount,
+  };
+}
+
+/** 批量更新权限 */
+function updatePermission(type: string) {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+}
+
+// 在组件初始化时记录初始值
+onMounted(() => {
+  // 固定添加发起人ID字段
+  formFieldOptions.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人ID',
+    type: 'UserSelect',
+    required: true,
+  });
+});
+</script>
+<template>
+  <Drawer class="w-2/5">
+    <template #title>
+      <div class="config-header">
+        <ElInput
+          v-if="showInput"
+          ref="inputRef"
+          type="text"
+          class="focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          @blur="changeNodeName()"
+          @keyup.enter="changeNodeName()"
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="lucide:edit-3" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div
+      v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE"
+      class="mb-3 flex items-center"
+    >
+      <span class="mr-3 text-base">审批类型 :</span>
+      <ElRadioGroup v-model="approveType">
+        <ElRadioButton
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadioButton>
+      </ElRadioGroup>
+    </div>
+    <ElTabs v-model="activeTabName" v-if="approveType === ApproveType.USER">
+      <ElTabPane :label="`${nodeTypeName}人`" name="user">
+        <div>
+          <ElForm
+            ref="formRef"
+            :model="configForm"
+            label-position="top"
+            :rules="formRules"
+          >
+            <!-- 审批/办理 人设置 -->
+            <ElFormItem
+              :label="`${nodeTypeName}人设置`"
+              prop="candidateStrategy"
+            >
+              <ElRadioGroup
+                v-model="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <ElRow :gutter="8">
+                  <ElCol
+                    v-for="(dict, index) in CANDIDATE_STRATEGY"
+                    :key="index"
+                    :span="8"
+                  >
+                    <ElRadio :value="dict.value">
+                      {{ dict.label }}
+                    </ElRadio>
+                  </ElCol>
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <ElSelect v-model="configForm.roleIds" clearable multiple>
+                <ElOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <ElTreeSelect
+                v-model="configForm.deptIds"
+                :tree-data="deptTreeOptions"
+                :field-names="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+                empty-text="加载中，请稍等..."
+                multiple
+                :check-strictly="true"
+                clearable
+                :show-checkbox="true"
+              />
+            </ElFormItem>
+            <ElFormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <ElSelect v-model="configForm.postIds" clearable multiple>
+                <ElOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <ElSelect v-model="configForm.userIds" clearable multiple>
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <ElSelect v-model="configForm.userGroups" clearable multiple>
+                <ElOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <ElSelect v-model="configForm.formUser" clearable>
+                <ElOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <ElSelect v-model="configForm.formDept" clearable>
+                <ElOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <ElSelect v-model="configForm.deptLevel" clearable>
+                <ElOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
+            <ElFormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <ElInput
+                v-model="configForm.expression"
+                type="textarea"
+                :rows="4"
+              />
+            </ElFormItem>
+            <!-- 多人审批/办理 方式 -->
+            <ElFormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
+              <ElRadioGroup
+                v-model="configForm.approveMethod"
+                @change="approveMethodChanged"
+              >
+                <ElRow>
+                  <ElCol
+                    :span="24"
+                    v-for="(item, index) in APPROVE_METHODS"
+                    :key="index"
+                  >
+                    <div class="flex items-center">
+                      <ElRadio :value="item.value">
+                        {{ item.label }}
+                      </ElRadio>
+                      <ElInputNumber
+                        v-if="
+                          item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                          configForm.approveMethod ===
+                            ApproveMethodType.APPROVE_BY_RATIO
+                        "
+                        v-model="configForm.approveRatio"
+                        :min="10"
+                        :max="100"
+                        :step="10"
+                        size="small"
+                      />
+                    </div>
+                  </ElCol>
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
+              <ElDivider content-position="left">审批人拒绝时</ElDivider>
+              <ElFormItem name="rejectHandlerType">
+                <ElRadioGroup
+                  v-model="configForm.rejectHandlerType"
+                  class="w-full"
+                >
+                  <ElRow :gutter="32">
+                    <ElCol
+                      :span="8"
+                      v-for="(item, index) in REJECT_HANDLER_TYPES"
+                      :key="index"
+                    >
+                      <ElRadio :value="item.value">
+                        {{ item.label }}
+                      </ElRadio>
+                    </ElCol>
+                  </ElRow>
+                </ElRadioGroup>
+              </ElFormItem>
+
+              <ElFormItem
+                v-if="
+                  configForm.rejectHandlerType ===
+                  RejectHandlerType.RETURN_USER_TASK
+                "
+                label="驳回节点"
+                name="returnNodeId"
+              >
+                <ElSelect v-model="configForm.returnNodeId" clearable>
+                  <ElOption
+                    v-for="item in returnTaskList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
+              <ElDivider content-position="left">审批人超时未处理</ElDivider>
+              <ElFormItem label="启用开关" name="timeoutHandlerEnable">
+                <ElSwitch
+                  v-model="configForm.timeoutHandlerEnable"
+                  active-text="开"
+                  inactive-text="关"
+                  @change="timeoutHandlerChange"
+                />
+              </ElFormItem>
+              <ElFormItem
+                label="执行动作"
+                name="timeoutHandlerType"
+                v-if="configForm.timeoutHandlerEnable"
+              >
+                <ElRadioGroup
+                  v-model="configForm.timeoutHandlerType"
+                  @change="timeoutHandlerTypeChanged"
+                >
+                  <ElRadioButton
+                    v-for="item in TIMEOUT_HANDLER_TYPES"
+                    :key="item.value"
+                    :value="item.value"
+                    :label="item.label"
+                  >
+                    {{ item.label }}
+                  </ElRadioButton>
+                </ElRadioGroup>
+              </ElFormItem>
+              <ElFormItem
+                label="超时时间设置"
+                v-if="configForm.timeoutHandlerEnable"
+              >
+                <div class="flex items-center gap-2">
+                  <span class="text-sm">当超时</span>
+                  <ElFormItem name="timeDuration" class="!mb-0">
+                    <ElInputNumber
+                      v-model="configForm.timeDuration"
+                      :min="1"
+                      controls-position="right"
+                    />
+                  </ElFormItem>
+                  <ElSelect
+                    v-model="timeUnit"
+                    class="!w-24"
+                    @change="timeUnitChange"
+                  >
+                    <ElOption
+                      v-for="item in TIME_UNIT_TYPES"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </ElSelect>
+                  <span class="text-sm">未处理</span>
+                </div>
+              </ElFormItem>
+              <ElFormItem
+                label="最大提醒次数"
+                name="maxRemindCount"
+                v-if="
+                  configForm.timeoutHandlerEnable &&
+                  configForm.timeoutHandlerType === 1
+                "
+              >
+                <ElInputNumber
+                  v-model="configForm.maxRemindCount"
+                  :min="1"
+                  :max="10"
+                />
+              </ElFormItem>
+            </div>
+
+            <ElDivider content-position="left">
+              {{ nodeTypeName }}人为空时
+            </ElDivider>
+            <ElFormItem name="assignEmptyHandlerType">
+              <ElRadioGroup v-model="configForm.assignEmptyHandlerType">
+                <ElRow>
+                  <ElCol
+                    :span="24"
+                    v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES"
+                    :key="index"
+                  >
+                    <ElRadio :value="item.value">
+                      {{ item.label }}
+                    </ElRadio>
+                  </ElCol>
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                configForm.assignEmptyHandlerType ===
+                AssignEmptyHandlerType.ASSIGN_USER
+              "
+              label="指定用户"
+              name="assignEmptyHandlerUserIds"
+            >
+              <ElSelect
+                v-model="configForm.assignEmptyHandlerUserIds"
+                clearable
+                multiple
+              >
+                <ElOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
+              <ElDivider content-position="left">
+                审批人与提交人为同一人时
+              </ElDivider>
+              <ElFormItem name="assignStartUserHandlerType">
+                <ElRadioGroup v-model="configForm.assignStartUserHandlerType">
+                  <ElRow :gutter="16">
+                    <ElCol
+                      :span="24"
+                      v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES"
+                      :key="index"
+                    >
+                      <ElRadio :value="item.value">
+                        {{ item.label }}
+                      </ElRadio>
+                    </ElCol>
+                  </ElRow>
+                </ElRadioGroup>
+              </ElFormItem>
+            </div>
+
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
+              <ElDivider content-position="left">是否需要签名</ElDivider>
+              <ElFormItem name="signEnable">
+                <ElSwitch
+                  v-model="configForm.signEnable"
+                  active-text="是"
+                  inactive-text="否"
+                />
+              </ElFormItem>
+            </div>
+
+            <div v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE">
+              <ElDivider content-position="left">审批意见</ElDivider>
+              <ElFormItem name="reasonRequire">
+                <ElSwitch
+                  v-model="configForm.reasonRequire"
+                  active-text="必填"
+                  inactive-text="非必填"
+                />
+              </ElFormItem>
+            </div>
+            <div>
+              <ElDivider content-position="left">跳过表达式</ElDivider>
+              <ElFormItem prop="skipExpression">
+                <ElInput
+                  v-model="configForm.skipExpression"
+                  type="textarea"
+                  :rows="2"
+                />
+              </ElFormItem>
+            </div>
+          </ElForm>
+        </div>
+      </ElTabPane>
+      <ElTabPane
+        label="操作按钮设置"
+        v-if="currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE"
+        name="buttons"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-base font-bold">操作按钮</div>
+
+          <!-- 表头 -->
+          <ElRow class="border border-gray-200 px-4 py-3">
+            <ElCol :span="8" class="font-bold">操作按钮</ElCol>
+            <ElCol :span="12" class="font-bold">显示名称</ElCol>
+            <ElCol :span="4" class="flex items-center justify-center font-bold">
+              启用
+            </ElCol>
+          </ElRow>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in buttonsSetting" :key="index">
+            <ElRow class="border border-t-0 border-gray-200 px-4 py-2">
+              <ElCol :span="8" class="flex items-center truncate">
+                {{ OPERATION_BUTTON_NAME.get(item.id) }}
+              </ElCol>
+              <ElCol :span="12" class="flex items-center">
+                <ElInput
+                  v-if="btnDisplayNameEdit[index]"
+                  :ref="(el: any) => setInputRef(el, index)"
+                  type="text"
+                  class="max-w-32 focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+                  @blur="btnDisplayNameBlurEvent(index)"
+                  @keyup.enter="btnDisplayNameBlurEvent(index)"
+                  v-model="item.displayName"
+                  :placeholder="item.displayName"
+                />
+                <ElButton v-else text @click="changeBtnDisplayName(index)">
+                  <div class="flex items-center">
+                    {{ item.displayName }}
+                    <IconifyIcon icon="lucide:edit" class="ml-2" />
+                  </div>
+                </ElButton>
+              </ElCol>
+              <ElCol :span="4" class="flex items-center justify-center">
+                <ElSwitch v-model="item.enable" />
+              </ElCol>
+            </ElRow>
+          </div>
+        </div>
+      </ElTabPane>
+      <ElTabPane
+        label="表单字段权限"
+        name="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-base font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <ElRow class="border border-gray-200 px-4 py-3">
+            <ElCol :span="8" class="font-bold">字段名称</ElCol>
+            <ElCol :span="16" class="!flex">
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
+            </ElCol>
+          </ElRow>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <ElRow class="border border-t-0 border-gray-200 px-4 py-2">
+              <ElCol :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </ElCol>
+              <ElCol :span="16">
+                <ElRadioGroup v-model="item.permission" class="flex w-full">
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.READ" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.WRITE" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.NONE" />
+                  </div>
+                </ElRadioGroup>
+              </ElCol>
+            </ElRow>
+          </div>
+        </div>
+      </ElTabPane>
+      <ElTabPane label="监听器" name="listener">
+        <UserTaskListener
+          ref="userTaskListenerRef"
+          v-model="configForm"
+          :form-field-options="formFieldOptions"
+        />
+      </ElTabPane>
+    </ElTabs>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/utils.ts b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ee5e068094291d8d045a3d3be03d068c0f61cd63
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/utils.ts
@@ -0,0 +1,48 @@
+import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
+
+/** 获取条件节点默认的名称 */
+export function getDefaultConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+}
+
+/** 获取包容分支条件节点默认的名称 */
+export function getDefaultInclusiveConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+}
+
+/** 转换时间单位字符串为枚举值 */
+export function convertTimeUnit(strTimeUnit: string) {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE;
+  }
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR;
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY;
+  }
+  return TimeUnitType.HOUR;
+}
+
+/** 根据审批类型获取对应的文本描述 */
+export function getApproveTypeText(approveType: ApproveType): string {
+  let approveTypeText = '';
+  APPROVE_TYPE.forEach((item) => {
+    if (item.value === approveType) {
+      approveTypeText = item.label;
+    }
+  });
+  return approveTypeText;
+}
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb4b928fed2b60c96d2f97431d5d7abee5e264b5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import ChildProcessNodeConfig from '../nodes-config/child-process-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ChildProcessNode' });
+
+const props = defineProps<{
+  flowNode: SimpleFlowNode;
+}>();
+
+/** 定义事件，更新父组件 */
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+/** 监控节点的变化 */
+const currentNode = useWatchNode(props);
+
+/** 节点名称编辑 */
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.CHILD_PROCESS_NODE,
+);
+
+// 节点配置 Ref
+const nodeConfigRef = ref();
+
+/** 打开节点配置 */
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeConfigRef.value.showChildProcessNodeConfig(currentNode.value);
+}
+
+/** 删除节点。更新当前节点为孩子节点 */
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</script>
+
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.childProcessSetting?.async === true ? 'async-child-process' : 'child-process'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.childProcessSetting?.async === true ? 'icon-async-child-process' : 'icon-child-process'}`"
+            >
+            </span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CHILD_PROCESS_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <ChildProcessNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeConfigRef"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33b3758a3411527f7c286190abecd40dccc909e2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import CopyTaskNodeConfig from '../nodes-config/copy-task-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'CopyTaskNode',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.COPY_TASK_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showCopyTaskNodeConfig(currentNode.value);
+  nodeSetting.value.openDrawer();
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</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 copy-task">
+            <span class="iconfont icon-copy"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.COPY_TASK_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cdde90a610d81408c464460dae49c96a4a227e93
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'DelayTimerNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.DELAY_TIMER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</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 delay-node">
+            <span class="iconfont icon-delay"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <DelayTimerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/end-event-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf6a2c1a92b2c9fda722ce56699554f1a48870fb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/end-event-node.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useTaskStatusClass, useWatchNode } from '../../helpers';
+import ProcessInstanceModal from './modules/process-instance-modal.vue';
+
+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 [Modal, modalApi] = useVbenModal({
+  connectedComponent: ProcessInstanceModal,
+  destroyOnClose: true,
+});
+
+function nodeClick() {
+  if (readonly && processInstance && processInstance.value) {
+    const processInstanceInfo = [
+      {
+        startUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis,
+      },
+    ];
+    modalApi
+      .setData(processInstanceInfo)
+      .setState({ title: '流程信息' })
+      .open();
+  }
+}
+</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>
+  <!-- 流程信息弹窗 -->
+  <Modal />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ad414aebb1b4dfa31023526b829688df551baf4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+} from '../../consts';
+import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ExclusiveNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    currentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
+const showInputs = ref<boolean[]>([]);
+
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+
+// 修改节点名称
+function changeNodeName(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+function conditionNodeConfig(nodeId: string) {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+}
+
+// 新增条件
+function addCondition() {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `条件${len}`,
+      showText: '',
+      type: BpmNodeTypeEnum.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function deleteCondition(index: number) {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+}
+
+// 移动节点
+function moveNode(index: number, to: number) {
+  // -1 ：向左 1：向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+}
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-exclusive icon-size condition"></span>
+      </div>
+      <ElButton v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </ElButton>
+      <!-- 排他网关节点下面可以多个分支，每个分支第一个节点是条件节点 NodeType.CONDITION_NODE -->
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <ElInput
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
+                    type="text"
+                    class="editable-title-input"
+                    @blur="changeNodeName(index)"
+                    @keyup.enter="changeNodeName(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">优先级{{ index + 1 }}</div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="lucide:circle-x"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="lucide:chevron-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="lucide:chevron-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        />
+        <!-- 递归显示子节点 -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc2d7f1953d821ad84f01b027152c4e576c342b6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+} from '../../consts';
+import {
+  getDefaultInclusiveConditionNodeName,
+  useTaskStatusClass,
+} from '../../helpers';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'InclusiveNode',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    currentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
+const showInputs = ref<boolean[]>([]);
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+// 修改节点名称
+function changeNodeName(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultInclusiveConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+function conditionNodeConfig(nodeId: string) {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+}
+
+// 新增条件
+function addCondition() {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `包容条件${len}`,
+      showText: '',
+      type: BpmNodeTypeEnum.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function deleteCondition(index: number) {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+}
+
+// 移动节点
+function moveNode(index: number, to: number) {
+  // -1 ：向左 1：向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+}
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
+      </div>
+      <ElButton v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </ElButton>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <ElInput
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
+                    type="text"
+                    class="editable-title-input"
+                    @blur="changeNodeName(index)"
+                    @keyup.enter="changeNodeName(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="lucide:circle-x"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="lucide:chevron-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="lucide:chevron-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        />
+        <!-- 递归显示子节点 -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-data.ts b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9f2a06bbd2e96ce62c8f66103f69aab50418611
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-data.ts
@@ -0,0 +1,56 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 流程实例列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'startUser',
+      title: '发起人',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.startUser?.nickname;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.startUser?.deptName;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '开始时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 90,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+      },
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 100,
+      formatter: 'formatPast2',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dec77d8545c83ab8952dc82bad1e06ad584f752b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useGridColumns } from './process-instance-data';
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    border: true,
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const data = modalApi.getData<any[]>();
+      // 填充列表数据
+      await gridApi.setGridOptions({ data });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/4">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-data.ts b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbb2d0ea581ddfb095853ba9b297c0cf707b37d0
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-data.ts
@@ -0,0 +1,61 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 审批记录列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'assigneeUser',
+      title: '审批人',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+      slots: {
+        default: ({ row }: { row: any }) => {
+          return row.assigneeUser?.deptName || row.ownerUser?.deptName;
+        },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '开始时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      formatter: 'formatDateTime',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 90,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 160,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 100,
+      formatter: 'formatPast2',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..38b869a491bd942d430f352970b7fcb9f3e71a0c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useGridColumns } from './task-list-data';
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    border: true,
+    height: 'auto',
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const data = modalApi.getData<any[]>();
+      // 填充列表数据
+      await gridApi.setGridOptions({ data });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/4">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/node-handler.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af40f45889df7f336dba4cecebf5f0c9519a1e69
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/node-handler.vue
@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElMessage, ElPopover } from 'element-plus';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_NAME,
+  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'); // 是否只读
+
+function addNode(type: number) {
+  // 校验：条件分支、包容分支后面，不允许直接添加并行分支
+  if (
+    type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE &&
+    [
+      BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
+      BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
+    ].includes(props.currentNode?.type)
+  ) {
+    ElMessage.error('条件分支、包容分支后面，不允许直接添加并行分支');
+    return;
+  }
+
+  popoverShow.value = false;
+  if (
+    type === BpmNodeTypeEnum.USER_TASK_NODE ||
+    type === BpmNodeTypeEnum.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 === BpmNodeTypeEnum.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.COPY_TASK_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.COPY_TASK_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '条件分支',
+      type: BpmNodeTypeEnum.CONDITION_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '条件1',
+          showText: '',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '并行分支',
+      type: BpmNodeTypeEnum.PARALLEL_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行1',
+          showText: '无需配置条件同时执行',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '并行2',
+          showText: '无需配置条件同时执行',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '包容分支',
+      type: BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE,
+      id: `GateWay_${generateUUID()}`,
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '包容条件1',
+          showText: '',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: false,
+            conditionType: ConditionType.RULE,
+            conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          },
+        },
+        {
+          id: `Flow_${generateUUID()}`,
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: BpmNodeTypeEnum.CONDITION_NODE,
+          childNode: undefined,
+          conditionSetting: {
+            defaultFlow: true,
+          },
+        },
+      ],
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.DELAY_TIMER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.DELAY_TIMER_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.DELAY_TIMER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      id: `GateWay_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.TRIGGER_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.TRIGGER_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.TRIGGER_NODE,
+      childNode: props.childNode,
+    };
+    emits('update:childNode', data);
+  }
+  if (type === BpmNodeTypeEnum.CHILD_PROCESS_NODE) {
+    const data: SimpleFlowNode = {
+      id: `Activity_${generateUUID()}`,
+      name: NODE_DEFAULT_NAME.get(BpmNodeTypeEnum.CHILD_PROCESS_NODE) as string,
+      showText: '',
+      type: BpmNodeTypeEnum.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">
+      <ElPopover
+        trigger="hover"
+        placement="right"
+        width="auto"
+        v-if="!readonly"
+      >
+        <div class="handler-item-wrapper">
+          <div
+            class="handler-item"
+            @click="addNode(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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(BpmNodeTypeEnum.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 #reference>
+          <div class="add-icon"><IconifyIcon icon="lucide:plus" /></div>
+        </template>
+      </ElPopover>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c13a7831133fbe554925463e521ff1cd64d83f9
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, nextTick, ref, watch } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { buildShortUUID as generateUUID } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useTaskStatusClass } from '../../helpers';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ParallelNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    currentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
+const showInputs = ref<boolean[]>([]);
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当输入框显示时 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+// 修改节点名称
+function changeNodeName(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name = conditionNode.name || `并行${index + 1}`;
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+// 新增条件
+function addCondition() {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `并行${len}`,
+      showText: '无需配置条件同时执行',
+      type: BpmNodeTypeEnum.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function deleteCondition(index: number) {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === BpmNodeTypeEnum.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
+  emits('findParnetNode', nodeList, nodeType);
+}
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-parallel icon-size parallel"></span>
+      </div>
+      <ElButton
+        v-else
+        class="branch-node-add"
+        color="#626aef"
+        @click="addCondition"
+        plain
+      >
+        添加分支
+      </ElButton>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="`${useTaskStatusClass(item.activityStatus)}`"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="showInputs[index]">
+                  <ElInput
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="changeNodeName(index)"
+                    @keyup.enter="changeNodeName(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">无优先级</div>
+              </div>
+              <div class="branch-node-content">
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div v-if="!readonly" class="node-toolbar">
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="lucide:circle-x"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 递归显示子节点 -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/router-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/router-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..430528360bd309669880402d358a1fcdc576c298
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/router-node.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import RouterNodeConfig from '../nodes-config/router-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'RouterNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</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 router-node">
+            <span class="iconfont icon-router"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.ROUTER_BRANCH_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <RouterNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..73775c52f5df36a2e989584cf13e4abd81586169
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+// TODO @芋艿：后续是不是把业务组件，挪到每个模块里；待定
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
+import TaskListModal from './modules/task-list-modal.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'StartUserNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null,
+  },
+});
+
+// 定义事件，更新父组件
+defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const readonly = inject<Boolean>('readonly'); // 是否只读
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.START_USER_NODE,
+);
+
+const nodeSetting = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: TaskListModal,
+  destroyOnClose: true,
+});
+function nodeClick() {
+  if (readonly) {
+    // 只读模式，弹窗显示任务信息
+    if (tasks && tasks.value) {
+      // 过滤出当前节点的任务
+      const nodeTasks = tasks.value.filter(
+        (task) => task.taskDefinitionKey === currentNode.value.id,
+      );
+      // 弹窗显示任务信息
+      modalApi
+        .setData(nodeTasks)
+        .setState({ title: currentNode.value.name })
+        .open();
+    }
+  } else {
+    nodeSetting.value.showStartUserNodeConfig(currentNode.value);
+  }
+}
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon start-user">
+            <span class="iconfont icon-start-user"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.START_USER_NODE) }}
+          </div>
+          <IconifyIcon icon="lucide:chevron-right" v-if="!readonly" />
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+
+  <StartUserNodeConfig
+    v-if="!readonly && currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+  />
+  <!-- 审批记录弹窗 -->
+  <Modal />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/trigger-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/trigger-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..37d154156c482025a0a777e003486cff36faac68
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/trigger-node.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import TriggerNodeConfig from '../nodes-config/trigger-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'TriggerNode',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.TRIGGER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showTriggerNodeConfig(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</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 trigger-node">
+            <span class="iconfont icon-trigger"></span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.TRIGGER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <TriggerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/user-task-node.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a95b3334832bc5637b655876bfa66b21d0f8aee3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/user-task-node.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElInput } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
+import TaskListModal from './modules/task-list-modal.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'UserTaskNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: BpmNodeTypeEnum];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const tasks = inject<Ref<any[]>>('tasks', ref([]));
+// 监控节点变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.USER_TASK_NODE,
+);
+const nodeSetting = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: TaskListModal,
+  destroyOnClose: true,
+});
+
+function nodeClick() {
+  if (readonly) {
+    if (tasks && tasks.value) {
+      // 过滤出当前节点的任务
+      const nodeTasks = tasks.value.filter(
+        (task) => task.taskDefinitionKey === currentNode.value.id,
+      );
+      // 弹窗显示任务信息
+      modalApi
+        .setData(nodeTasks)
+        .setState({ title: currentNode.value.name })
+        .open();
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
+  }
+}
+
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+// 查找可以驳回用户节点
+function findReturnTaskNodes(
+  matchNodeList: SimpleFlowNode[], // 匹配的节点
+) {
+  // 从父节点查找
+  emits('findParentNode', matchNodeList, BpmNodeTypeEnum.USER_TASK_NODE);
+}
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
+            >
+            </span>
+          </div>
+          <ElInput
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @keyup.enter="changeNodeName()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="nodeClick">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(currentNode.type) }}
+          </div>
+          <IconifyIcon icon="lucide:chevron-right" v-if="!readonly" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+  </div>
+  <UserTaskNodeConfig
+    v-if="currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+    @find-return-task-nodes="findReturnTaskNodes"
+  />
+  <!--  审批记录弹窗 -->
+  <Modal />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea8596a8517e8d34027bc4d85ab58499e77646cb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+
+import { useWatchNode } from '../helpers';
+import ChildProcessNode from './nodes/child-process-node.vue';
+import CopyTaskNode from './nodes/copy-task-node.vue';
+import DelayTimerNode from './nodes/delay-timer-node.vue';
+import EndEventNode from './nodes/end-event-node.vue';
+import ExclusiveNode from './nodes/exclusive-node.vue';
+import InclusiveNode from './nodes/inclusive-node.vue';
+import ParallelNode from './nodes/parallel-node.vue';
+import RouterNode from './nodes/router-node.vue';
+import StartUserNode from './nodes/start-user-node.vue';
+import TriggerNode from './nodes/trigger-node.vue';
+import UserTaskNode from './nodes/user-task-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[],
+    currentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+const currentNode = useWatchNode(props);
+
+// 用于删除节点
+
+const handleModelValueUpdate = (updateValue: any) => {
+  emits('update:flowNode', updateValue);
+};
+
+const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
+  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
+};
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  findNode: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!findNode) {
+    return;
+  }
+  if (findNode.type === BpmNodeTypeEnum.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 === BpmNodeTypeEnum.START_USER_NODE"
+    :flow-node="currentNode"
+  />
+  <!-- 审批节点 -->
+  <UserTaskNode
+    v-if="
+      currentNode &&
+      (currentNode.type === BpmNodeTypeEnum.USER_TASK_NODE ||
+        currentNode.type === BpmNodeTypeEnum.TRANSACTOR_NODE)
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 抄送节�?-->
+  <CopyTaskNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.COPY_TASK_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 条件节点 -->
+  <ExclusiveNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 并行节点 -->
+  <ParallelNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 包容分支节点 -->
+  <InclusiveNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find-parent-node="findParentNode"
+  />
+  <!-- 延迟器节�?-->
+  <DelayTimerNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.DELAY_TIMER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 路由分支节点 -->
+  <RouterNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.ROUTER_BRANCH_NODE
+    "
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 触发器节�?-->
+  <TriggerNode
+    v-if="currentNode && currentNode.type === BpmNodeTypeEnum.TRIGGER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 子流程节�?-->
+  <ChildProcessNode
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.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 === BpmNodeTypeEnum.END_EVENT_NODE"
+    :flow-node="currentNode"
+  />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d66629ccdb817c872a36504bfd7f29fc49415069
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../consts';
+
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, onMounted, provide, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
+import { handleTree } from '@vben/utils';
+
+import { ElButton } from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getSimpleUserList } from '#/api/system/user';
+
+import { NODE_DEFAULT_TEXT, NodeId } from '../consts';
+import SimpleProcessModel from './simple-process-model.vue';
+
+defineOptions({
+  name: 'SimpleProcessDesigner',
+});
+
+const props = defineProps({
+  modelName: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  // 流程表单 ID
+  modelFormId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  // 表单类型
+  modelFormType: {
+    type: Number,
+    required: false,
+    default: BpmModelFormType.NORMAL,
+  },
+  // 可发起流程的人员编号
+  startUserIds: {
+    type: Array,
+    required: false,
+    default: undefined,
+  },
+  // 可发起流程的部门编号
+  startDeptIds: {
+    type: Array,
+    required: false,
+    default: undefined,
+  },
+});
+// 保存成功事件
+const emits = defineEmits(['success']);
+const processData = inject('processData') as Ref;
+const loading = ref(false);
+const formFields = ref<string[]>([]);
+const formType = ref(props.modelFormType);
+
+// 监听 modelFormType 变化
+watch(
+  () => props.modelFormType,
+  (newVal) => {
+    formType.value = newVal;
+  },
+);
+
+// 监听 modelFormId 变化
+watch(
+  () => props.modelFormId,
+  async (newVal) => {
+    if (newVal) {
+      const form = await getForm(newVal);
+      formFields.value = form?.fields;
+    } else {
+      // 如果 modelFormId 为空，清空表单字段
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+const roleOptions = ref<SystemRoleApi.Role[]>([]); // 角色列表
+const postOptions = ref<SystemPostApi.Post[]>([]); // 岗位列表
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+const deptOptions = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTreeOptions = ref();
+const userGroupOptions = ref<BpmUserGroupApi.UserGroup[]>([]); // 用户组列表
+
+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 [ErrorModal, errorModalApi] = useVbenModal({
+  fullscreenButton: false,
+});
+
+// 添加更新模型的方法
+function updateModel() {
+  if (!processNodeTree.value) {
+    processNodeTree.value = {
+      name: '发起人',
+      type: BpmNodeTypeEnum.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
+      // 默认为空，需要进行配置
+      showText: '',
+      childNode: {
+        id: NodeId.END_EVENT_NODE_ID,
+        name: '结束',
+        type: BpmNodeTypeEnum.END_EVENT_NODE,
+      },
+    };
+    // 初始化时也触发一次保存
+    saveSimpleFlowModel(processNodeTree.value);
+  }
+}
+
+async function saveSimpleFlowModel(
+  simpleModelNode: SimpleFlowNode | undefined,
+) {
+  if (!simpleModelNode) {
+    return;
+  }
+
+  try {
+    processData.value = simpleModelNode;
+    emits('success', simpleModelNode);
+  } catch (error) {
+    console.error('保存失败:', error);
+  }
+}
+
+/**
+ * 校验节点设置。 暂时以 showText 为空作为节点错误配置的判断条件
+ */
+function validateNode(
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) {
+  if (node) {
+    const { type, showText, conditionNodes } = node;
+    if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
+      return;
+    }
+
+    if (
+      type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 1. 分支节点, 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes);
+      });
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    } else {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
+    }
+  }
+}
+
+onMounted(async () => {
+  try {
+    loading.value = true;
+    // 获得角色列表
+    roleOptions.value = await getSimpleRoleList();
+    // 获得岗位列表
+    postOptions.value = await getSimplePostList();
+    // 获得用户列表
+    userOptions.value = await getSimpleUserList();
+    // 获得部门列表
+    const deptList = await getSimpleDeptList();
+    deptOptions.value = deptList;
+    // 转换成树形结构
+    deptTreeOptions.value = handleTree(deptList);
+    // 获取用户组列表
+    userGroupOptions.value = await getUserGroupSimpleList();
+    // 加载流程数据
+    if (processData.value) {
+      processNodeTree.value = processData?.value;
+    } else {
+      updateModel();
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+
+const validate = async () => {
+  const errorNodes: SimpleFlowNode[] = [];
+  validateNode(processNodeTree.value, errorNodes);
+  if (errorNodes.length === 0) {
+    return true;
+  } else {
+    // 设置错误节点数据并打开弹窗
+    errorModalApi.setData(errorNodes);
+    errorModalApi.open();
+    return false;
+  }
+};
+defineExpose({ validate });
+</script>
+<template>
+  <div v-loading="loading">
+    <SimpleProcessModel
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
+    <ErrorModal title="流程设计校验不通过" class="w-2/5">
+      <div class="mb-2 text-base">以下节点配置不完善，请修改相关配置</div>
+      <div
+        class="mb-3 rounded-md p-2 text-sm"
+        v-for="(item, index) in errorModalApi.getData()"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      </div>
+      <template #footer>
+        <ElButton type="primary" @click="errorModalApi.close()">
+          知道了
+        </ElButton>
+      </template>
+    </ErrorModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8cc8d3fdfdf93cb22b45b58e7809e6f47907066e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { onMounted, provide, ref } from 'vue';
+
+import { BpmNodeTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { downloadFileFromBlob, isString } from '@vben/utils';
+
+import { ElButton, ElButtonGroup, ElDialog, ElRow } from 'element-plus';
+
+import { NODE_DEFAULT_TEXT } 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);
+
+function setGrabCursor() {
+  document.body.style.cursor = 'grab';
+}
+
+function resetCursor() {
+  document.body.style.cursor = 'default';
+}
+
+function startDrag(e: MouseEvent) {
+  isDragging.value = true;
+  startX.value = e.clientX - currentX.value;
+  startY.value = e.clientY - currentY.value;
+  setGrabCursor(); // 设置小手光标
+}
+
+function onDrag(e: MouseEvent) {
+  if (!isDragging.value) return;
+  e.preventDefault(); // 禁用文本选择
+
+  // 使用 requestAnimationFrame 优化性能
+  requestAnimationFrame(() => {
+    currentX.value = e.clientX - startX.value;
+    currentY.value = e.clientY - startY.value;
+  });
+}
+
+function stopDrag() {
+  isDragging.value = false;
+  resetCursor(); // 重置光标
+}
+
+function zoomIn() {
+  if (scaleValue.value === MAX_SCALE_VALUE) {
+    return;
+  }
+  scaleValue.value += 10;
+}
+
+function zoomOut() {
+  if (scaleValue.value === MIN_SCALE_VALUE) {
+    return;
+  }
+  scaleValue.value -= 10;
+}
+
+function processReZoom() {
+  scaleValue.value = 100;
+}
+
+function resetPosition() {
+  currentX.value = initialX.value;
+  currentY.value = initialY.value;
+}
+
+/** 校验节点设置 */
+const errorDialogVisible = ref(false);
+let errorNodes: SimpleFlowNode[] = [];
+
+function validateNode(
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) {
+  if (node) {
+    const { type, showText, conditionNodes } = node;
+    if (type === BpmNodeTypeEnum.END_EVENT_NODE) {
+      return;
+    }
+    if (type === BpmNodeTypeEnum.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === BpmNodeTypeEnum.USER_TASK_NODE ||
+      type === BpmNodeTypeEnum.COPY_TASK_NODE ||
+      type === BpmNodeTypeEnum.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
+    }
+
+    if (
+      type === BpmNodeTypeEnum.CONDITION_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.PARALLEL_BRANCH_NODE ||
+      type === BpmNodeTypeEnum.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes);
+      });
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes);
+    }
+  }
+}
+
+/** 获取当前流程数据 */
+async function getCurrentFlowData() {
+  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 */
+function exportJson() {
+  downloadFileFromBlob({
+    fileName: 'model.json',
+    source: new Blob([JSON.stringify(processNodeTree.value)]),
+  });
+}
+
+/** 导入 JSON */
+const refFile = ref();
+function importJson() {
+  refFile.value.click();
+}
+function importLocalFile() {
+  const file = refFile.value.files[0];
+  file.text().then((result: any) => {
+    if (isString(result)) {
+      processNodeTree.value = JSON.parse(result);
+      emits('save', processNodeTree.value);
+    }
+  });
+}
+
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  initialX.value = currentX.value;
+  initialY.value = currentY.value;
+});
+</script>
+<template>
+  <div class="simple-process-model-container">
+    <div class="bg-card absolute right-0 top-0">
+      <ElRow type="flex" justify="end">
+        <ElButtonGroup key="scale-control">
+          <ElButton v-if="!readonly" @click="exportJson">
+            <IconifyIcon icon="lucide:download" /> 导出
+          </ElButton>
+          <ElButton v-if="!readonly" @click="importJson">
+            <IconifyIcon icon="lucide:upload" />导入
+          </ElButton>
+          <!-- 用于打开本地文件-->
+          <input
+            v-if="!readonly"
+            type="file"
+            id="files"
+            ref="refFile"
+            class="hidden"
+            accept=".json"
+            @change="importLocalFile"
+          />
+          <ElButton @click="processReZoom()">
+            <IconifyIcon icon="lucide:table-columns-split" />
+          </ElButton>
+          <ElButton :plain="true" @click="zoomOut()">
+            <IconifyIcon icon="lucide:zoom-out" />
+          </ElButton>
+          <ElButton class="w-20"> {{ scaleValue }}% </ElButton>
+          <ElButton :plain="true" @click="zoomIn()">
+            <IconifyIcon icon="lucide:zoom-in" />
+          </ElButton>
+          <ElButton @click="resetPosition">重置</ElButton>
+        </ElButtonGroup>
+      </ElRow>
+    </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>
+
+  <ElDialog v-model="errorDialogVisible" title="保存失败" width="400">
+    <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <div
+      class="line-height-normal mb-3 rounded p-2"
+      v-for="(item, index) in errorNodes"
+      :key="index"
+    >
+      {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+    </div>
+    <template #footer>
+      <ElButton type="primary" @click="errorDialogVisible = false">
+        知道了
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-viewer.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-viewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95cf3f3213802352d77f3e6724ab463776461266
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-viewer.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { provide, ref, watch } from 'vue';
+
+import { useWatchNode } from '../helpers';
+import SimpleProcessModel from './simple-process-model.vue';
+
+defineOptions({ name: 'SimpleProcessViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    flowNode: SimpleFlowNode;
+    // 流程实例
+    processInstance?: any;
+    // 流程任务
+    tasks?: any[];
+  }>(),
+  {
+    processInstance: undefined,
+    tasks: () => [] as any[],
+  },
+);
+const approveTasks = ref<any[]>(props.tasks);
+const currentProcessInstance = ref(props.processInstance);
+const simpleModel = useWatchNode(props);
+watch(
+  () => props.tasks,
+  (newValue) => {
+    approveTasks.value = newValue;
+  },
+);
+watch(
+  () => props.processInstance,
+  (newValue) => {
+    currentProcessInstance.value = newValue;
+  },
+);
+// 提供给后代组件使用
+provide('tasks', approveTasks);
+provide('processInstance', currentProcessInstance);
+</script>
+<template>
+  <SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/consts.ts b/apps/web-ele/src/views/bpm/components/simple-process-design/consts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e811314e59b086e71c8bacd84027689ec9d7800b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/consts.ts
@@ -0,0 +1,888 @@
+import { BpmNodeTypeEnum, BpmTaskStatusEnum } from '@vben/constants';
+
+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 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 | undefined;
+  opCode: string;
+  rightSide: string | undefined;
+};
+
+/**
+ * 条件结构定义
+ */
+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 | undefined;
+};
+
+/**
+ * 操作按钮权限结构定义
+ */
+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: BpmNodeTypeEnum;
+  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?: BpmTaskStatusEnum;
+  // 延迟设置
+  delaySetting?: DelaySetting;
+  // 路由分支
+  routerGroups?: RouterSetting[];
+  defaultFlowId?: string;
+  // 签名
+  signEnable?: boolean;
+  // 审批意见
+  reasonRequire?: boolean;
+  // 跳过表达式
+  skipExpression?: string;
+  // 触发器设置
+  triggerSetting?: TriggerSetting;
+  // 子流程
+  childProcessSetting?: ChildProcessSetting;
+}
+
+/**
+ * 条件组默认值
+ */
+export const DEFAULT_CONDITION_GROUP_VALUE = {
+  and: true,
+  conditions: [
+    {
+      and: true,
+      rules: [
+        {
+          opCode: '==',
+          leftSide: undefined,
+          rightSide: '',
+        },
+      ],
+    },
+  ],
+};
+
+export const NODE_DEFAULT_TEXT = new Map<number, string>();
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.USER_TASK_NODE, '请配置审批人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.COPY_TASK_NODE, '请配置抄送人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CONDITION_NODE, '请设置条件');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.START_USER_NODE, '请设置发起人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '请设置延迟器');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '请设置路由节点');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRIGGER_NODE, '请设置触发器');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '请设置办理人');
+NODE_DEFAULT_TEXT.set(BpmNodeTypeEnum.CHILD_PROCESS_NODE, '请设置子流程');
+
+export const NODE_DEFAULT_NAME = new Map<number, string>();
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.USER_TASK_NODE, '审批人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.COPY_TASK_NODE, '抄送人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.CONDITION_NODE, '条件');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.START_USER_NODE, '发起人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.DELAY_TIMER_NODE, '延迟器');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.ROUTER_BRANCH_NODE, '路由分支');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRIGGER_NODE, '触发器');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.TRANSACTOR_NODE, '办理人');
+NODE_DEFAULT_NAME.set(BpmNodeTypeEnum.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 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-ele/src/views/bpm/components/simple-process-design/helpers.ts b/apps/web-ele/src/views/bpm/components/simple-process-design/helpers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ffc2a30379389fcbeeeee0db54e3165ce0d7662
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/helpers.ts
@@ -0,0 +1,792 @@
+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, nextTick, ref, toRaw, unref, watch } from 'vue';
+
+import {
+  BpmNodeTypeEnum,
+  BpmTaskStatusEnum,
+  ProcessVariableEnum,
+} from '@vben/constants';
+
+import {
+  ApproveMethodType,
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  CandidateStrategy,
+  COMPARISON_OPERATORS,
+  ConditionType,
+  FieldPermissionType,
+  NODE_DEFAULT_NAME,
+  RejectHandlerType,
+} 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 所有表单字段, 并返回
+function 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([])); // 流程表单字段
+
+  function getNodeConfigFormFields(
+    nodeFormFields?: Array<Record<string, string>>,
+  ) {
+    nodeFormFields = toRaw(nodeFormFields);
+    fieldsPermissionConfig.value =
+      !nodeFormFields || nodeFormFields.length === 0
+        ? getDefaultFieldsPermission(unref(formFields))
+        : mergeFieldsPermission(nodeFormFields, unref(formFields));
+  }
+  // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
+  function 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;
+  }
+
+  // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
+  function 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;
+  skipExpression?: string; // 跳过表达式
+  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: BpmNodeTypeEnum) {
+  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.UserGroup[]>>(
+    'userGroupList',
+    ref([]),
+  ); // 用户组列表
+  const deptTreeOptions = inject<Ref<SystemDeptApi.Dept[]>>(
+    'deptTree',
+    ref([]),
+  ); // 部门树
+  const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
+  const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
+
+  if (
+    nodeType === BpmNodeTypeEnum.USER_TASK_NODE ||
+    nodeType === BpmNodeTypeEnum.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: [],
+    };
+  }
+  configForm.value = {
+    candidateStrategy: CandidateStrategy.USER,
+  };
+
+  function 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;
+  }
+
+  /**
+   *  处理候选人参数的赋值
+   */
+  function 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;
+  }
+  /**
+   *  解析候选人参数
+   */
+  function 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);
+  // 关闭配置抽屉
+  function closeDrawer() {
+    settingVisible.value = false;
+  }
+  // 打开配置抽屉
+  function openDrawer() {
+    settingVisible.value = true;
+  }
+  return {
+    settingVisible,
+    closeDrawer,
+    openDrawer,
+  };
+}
+
+/**
+ * @description 节点名称配置
+ */
+export function useNodeName(nodeType: BpmNodeTypeEnum) {
+  // 节点名称
+  const nodeName = ref<string>();
+  // 节点名称输入框
+  const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
+  // 点击节点名称编辑图标
+  function clickIcon() {
+    showInput.value = true;
+  }
+  // 修改节点名称
+  function changeNodeName() {
+    showInput.value = false;
+    nodeName.value =
+      nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
+  }
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
+  return {
+    nodeName,
+    showInput,
+    inputRef,
+    clickIcon,
+    changeNodeName,
+  };
+}
+
+export function useNodeName2(
+  node: Ref<SimpleFlowNode>,
+  nodeType: BpmNodeTypeEnum,
+) {
+  // 显示节点名称输入框
+  const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
+
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
+  // 修改节点名称
+  function changeNodeName() {
+    showInput.value = false;
+    node.value.name =
+      node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
+    console.warn('node.value.name===>', node.value.name);
+  }
+  // 点击节点标题进行输入
+  function clickTitle() {
+    showInput.value = true;
+  }
+  return {
+    showInput,
+    inputRef,
+    clickTitle,
+    changeNodeName,
+  };
+}
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function useTaskStatusClass(
+  taskStatus: BpmTaskStatusEnum | undefined,
+): string {
+  if (!taskStatus) {
+    return '';
+  }
+  if (taskStatus === BpmTaskStatusEnum.APPROVE) {
+    return 'status-pass';
+  }
+  if (taskStatus === BpmTaskStatusEnum.RUNNING) {
+    return 'status-running';
+  }
+  if (taskStatus === BpmTaskStatusEnum.REJECT) {
+    return 'status-reject';
+  }
+  if (taskStatus === BpmTaskStatusEnum.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;
+}
+
+/** 获取表单字段名称*/
+function getFormFieldTitle(
+  fieldOptions: Array<Record<string, any>>,
+  field: string,
+) {
+  const item = fieldOptions.find((item) => item.field === field);
+  return item?.title;
+}
+
+/** 获取操作符名称 */
+function getOpName(opCode: string): string | undefined {
+  const opName = COMPARISON_OPERATORS.find(
+    (item: any) => item.value === opCode,
+  );
+  return opName?.label;
+}
+
+/** 获取条件节点默认的名称 */
+export function getDefaultConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+}
+
+/** 获取包容分支条件节点默认的名称 */
+export function getDefaultInclusiveConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+}
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/index.ts b/apps/web-ele/src/views/bpm/components/simple-process-design/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41269eae8c6ed607dfb1005c6d90d68475c1437f
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/index.ts
@@ -0,0 +1,11 @@
+import './styles/simple-process-designer.scss';
+
+export { default as HttpRequestSetting } from './components/nodes-config/modules/http-request-setting.vue';
+
+export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
+
+export { default as SimpleProcessViewer } from './components/simple-process-viewer.vue';
+
+export type { SimpleFlowNode } from './consts';
+
+export { parseFormFields } from './helpers';
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.ttf b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..06f4e31c4b4ce9868cd39b25f6beb1fd5884ff9c
Binary files /dev/null and b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.ttf differ
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.woff b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..0724e75054dc761f7cec794944cc140f3056bebf
Binary files /dev/null and b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.woff differ
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.woff2 b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c904bb67db38c218b1f3f4292803cbc7fe3a80c6
Binary files /dev/null and b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/iconfont.woff2 differ
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a36f96986eee05d9c1a97702c4a7f86e574cc3cd
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
@@ -0,0 +1,759 @@
+// TODO 整个样式是不是要重新优化一下
+// iconfont 样式
+@font-face {
+  font-family: iconfont; /* Project id 4495938 */
+  src:
+    url('iconfont.woff2?t=1737639517142') format('woff2'),
+    url('iconfont.woff?t=1737639517142') format('woff'),
+    url('iconfont.ttf?t=1737639517142') format('truetype');
+}
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    max-width: 510px;
+    height: 24px;
+    font-size: 16px;
+    line-height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      outline: 0;
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+    }
+  }
+}
+// 节点连线气泡卡片样式
+.handler-item-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  width: 320px;
+  cursor: pointer;
+
+  .handler-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+  }
+
+  .handler-item-icon {
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    user-select: none;
+    background: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 50%;
+
+    &:hover {
+      background: #e2e2e2;
+      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    }
+
+    .icon-size {
+      font-size: 25px;
+      line-height: 50px;
+    }
+  }
+
+  .approve {
+    color: #ff943e;
+  }
+
+  .copy {
+    color: #3296fa;
+  }
+
+  .condition {
+    color: #67c23a;
+  }
+
+  .parallel {
+    color: #626aef;
+  }
+
+  .inclusive {
+    color: #345da2;
+  }
+
+  .delay {
+    color: #e47470;
+  }
+
+  .trigger {
+    color: #3373d2;
+  }
+
+  .router {
+    color: #ca3a31;
+  }
+
+  .transactor {
+    color: #309;
+  }
+
+  .child-process {
+    color: #963;
+  }
+
+  .async-child-process {
+    color: #066;
+  }
+
+  .handler-item-text {
+    width: 80px;
+    margin-top: 4px;
+    font-size: 13px;
+    text-align: center;
+  }
+}
+// Simple 流程模型样式
+.simple-process-model-container {
+  width: 100%;
+  height: 100%;
+  padding-top: 32px;
+  overflow-x: auto;
+  background-color: #fafafa;
+
+  .simple-process-model {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: fit-content;
+    background: url('./svg/simple-process-bg.svg') 0 0 repeat;
+    transform: scale(1);
+    transform-origin: 50% 0 0;
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    // 节点容器 定义节点宽度
+    .node-container {
+      width: 200px;
+    }
+    // 节点
+    .node-box {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      min-height: 70px;
+      padding: 5px 10px 8px;
+      cursor: pointer;
+      background-color: #fff;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+      transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &.status-pass {
+        background-color: #a9da90;
+        border-color: #67c23a;
+      }
+
+      &.status-pass:hover {
+        border-color: #67c23a;
+      }
+
+      &.status-running {
+        background-color: #e7f0fe;
+        border-color: #5a9cf8;
+      }
+
+      &.status-running:hover {
+        border-color: #5a9cf8;
+      }
+
+      &.status-reject {
+        background-color: #f6e5e5;
+        border-color: #e47470;
+      }
+
+      &.status-reject:hover {
+        border-color: #e47470;
+      }
+
+      &:hover {
+        border-color: #0089ff;
+
+        .node-toolbar {
+          opacity: 1;
+        }
+
+        .branch-node-move {
+          display: flex;
+        }
+      }
+
+      // 普通节点标题
+      .node-title-container {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+
+        .node-title-icon {
+          display: flex;
+          align-items: center;
+
+          &.user-task {
+            color: #ff943e;
+          }
+
+          &.copy-task {
+            color: #3296fa;
+          }
+
+          &.start-user {
+            color: #676565;
+          }
+
+          &.delay-node {
+            color: #e47470;
+          }
+
+          &.trigger-node {
+            color: #3373d2;
+          }
+
+          &.router-node {
+            color: #ca3a31;
+          }
+
+          &.transactor-task {
+            color: #309;
+          }
+
+          &.child-process {
+            color: #963;
+          }
+
+          &.async-child-process {
+            color: #066;
+          }
+        }
+
+        .node-title {
+          margin-left: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 18px;
+          color: #1f1f1f;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #f60;
+          }
+        }
+      }
+
+      // 条件节点标题
+      .branch-node-title-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 0;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+
+        .input-max-width {
+          max-width: 115px !important;
+        }
+
+        .branch-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 13px;
+          font-weight: 600;
+          color: #f60;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #000;
+          }
+        }
+
+        .branch-priority {
+          min-width: 50px;
+          font-size: 12px;
+        }
+      }
+
+      .node-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-top: 4px;
+        line-height: 32px;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          font-size: 14px;
+          line-height: 24px;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      //条件节点内容
+      .branch-node-content {
+        display: flex;
+        align-items: center;
+        min-height: 32px;
+        padding: 4px 0;
+        margin-top: 4px;
+        line-height: 32px;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .branch-node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1; /* 这将限制文本显示为一行 */
+          font-size: 12px;
+          line-height: 24px;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      // 节点操作 ：删除
+      .node-toolbar {
+        position: absolute;
+        top: -20px;
+        right: 0;
+        display: flex;
+        opacity: 0;
+
+        .toolbar-icon {
+          vertical-align: middle;
+          text-align: center;
+        }
+      }
+
+      // 条件节点左右移动
+      .branch-node-move {
+        position: absolute;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 10px;
+        height: 100%;
+        cursor: pointer;
+      }
+
+      .move-node-left {
+        top: 0;
+        left: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+
+      .move-node-right {
+        top: 0;
+        right: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+
+    .node-config-error {
+      border-color: #ff5219 !important;
+    }
+    // 普通节点包装
+    .node-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    // 节点连线处理
+    .node-handler-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 70px;
+      user-select: none;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        width: 2px;
+        height: 100%;
+        margin: auto;
+        content: '';
+        background-color: #dedede;
+      }
+
+      .node-handler {
+        .add-icon {
+          position: relative;
+          top: -5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 25px;
+          height: 25px;
+          color: #fff;
+          cursor: pointer;
+          background-color: #0089ff;
+          border-radius: 50%;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .node-handler-arrow {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        display: flex;
+        transform: translateX(-50%);
+      }
+    }
+
+    // 条件节点包装
+    .branch-node-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 16px;
+
+      .branch-node-container {
+        position: relative;
+        display: flex;
+        min-width: fit-content;
+
+        &::before {
+          position: absolute;
+          left: 50%;
+          width: 4px;
+          height: 100%;
+          content: '';
+          background-color: #fafafa;
+          transform: translate(-50%);
+        }
+
+        .branch-node-add {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          align-items: center;
+          height: 36px;
+          padding: 0 10px;
+          font-size: 12px;
+          line-height: 36px;
+          border: 2px solid #dedede;
+          border-radius: 18px;
+          transform: translateX(-50%);
+          transform-origin: center center;
+        }
+
+        .branch-node-readonly {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          background-color: #fff;
+          border: 2px solid #dedede;
+          border-radius: 50%;
+          transform: translateX(-50%);
+          transform-origin: center center;
+
+          &.status-pass {
+            background-color: #e9f4e2;
+            border-color: #6bb63c;
+          }
+
+          &.status-pass:hover {
+            border-color: #6bb63c;
+          }
+
+          .icon-size {
+            font-size: 22px;
+
+            &.condition {
+              color: #67c23a;
+            }
+
+            &.parallel {
+              color: #626aef;
+            }
+
+            &.inclusive {
+              color: #345da2;
+            }
+          }
+        }
+
+        .branch-node-item {
+          position: relative;
+          display: flex;
+          flex-shrink: 0;
+          flex-direction: column;
+          align-items: center;
+          min-width: 280px;
+          padding: 40px 40px 0;
+          background: transparent;
+          border-top: 2px solid #dedede;
+          border-bottom: 2px solid #dedede;
+
+          &::before {
+            position: absolute;
+            inset: 0;
+            width: 2px;
+            height: 100%;
+            margin: auto;
+            content: '';
+            background-color: #dedede;
+          }
+        }
+        // 覆盖条件节点第一个节点左上角的线
+        .branch-line-first-top {
+          position: absolute;
+          top: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点第一个节点左下角的线
+        .branch-line-first-bottom {
+          position: absolute;
+          bottom: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点最后一个节点右上角的线
+        .branch-line-last-top {
+          position: absolute;
+          top: -5px;
+          right: -1px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+        // 覆盖条件节点最后一个节点右下角的线
+        .branch-line-last-bottom {
+          position: absolute;
+          right: -1px;
+          bottom: -5px;
+          width: 50%;
+          height: 7px;
+          content: '';
+          background-color: #fafafa;
+        }
+      }
+    }
+
+    .node-fixed-name {
+      display: inline-block;
+      width: auto;
+      padding: 0 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+      white-space: nowrap;
+    }
+    // 开始节点包装
+    .start-node-wrapper {
+      position: relative;
+      margin-top: 16px;
+
+      .start-node-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .start-node-box {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 90px;
+          height: 36px;
+          padding: 3px 4px;
+          color: #212121;
+          cursor: pointer;
+          background: #fafafa;
+          border-radius: 30px;
+          box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        }
+      }
+    }
+
+    // 结束节点包装
+    .end-node-wrapper {
+      margin-bottom: 16px;
+
+      .end-node-box {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 36px;
+        color: #212121;
+        background-color: #fff;
+        border: 2px solid transparent;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+
+        &.status-pass {
+          background-color: #a9da90;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        &.status-reject {
+          background-color: #f6e5e5;
+          border-color: #e47470;
+        }
+
+        &.status-reject:hover {
+          border-color: #e47470;
+        }
+
+        &.status-cancel {
+          background-color: #eaeaeb;
+          border-color: #919398;
+        }
+
+        &.status-cancel:hover {
+          border-color: #919398;
+        }
+      }
+    }
+
+    // 可编辑的 title 输入框
+    .editable-title-input {
+      max-width: 145px;
+      height: 20px;
+      margin-left: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        outline: 0;
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-trigger::before {
+  content: '\e6d3';
+}
+
+.icon-router::before {
+  content: '\e6b2';
+}
+
+.icon-delay::before {
+  content: '\e600';
+}
+
+.icon-start-user::before {
+  content: '\e679';
+}
+
+.icon-inclusive::before {
+  content: '\e602';
+}
+
+.icon-copy::before {
+  content: '\e7eb';
+}
+
+.icon-transactor::before {
+  content: '\e61c';
+}
+
+.icon-exclusive::before {
+  content: '\e717';
+}
+
+.icon-approve::before {
+  content: '\e715';
+}
+
+.icon-parallel::before {
+  content: '\e688';
+}
+
+.icon-async-child-process::before {
+  content: '\e6f2';
+}
+
+.icon-child-process::before {
+  content: '\e6c1';
+}
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/svg/simple-process-bg.svg b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/svg/simple-process-bg.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eb23ab5aee68d387819427e298bc678d9366dd09
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/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-ele/src/views/bpm/model/form/index.vue b/apps/web-ele/src/views/bpm/model/form/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79896c35e70bbdd2da4581437a48c76a9984be7b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/index.vue
@@ -0,0 +1,498 @@
+<script setup lang="ts">
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+import type { BpmFormApi } from '#/api/bpm/form';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+import {
+  BpmAutoApproveType,
+  BpmModelFormType,
+  BpmModelType,
+} from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+
+import { ElButton, ElCard, ElMessage } from 'element-plus';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import { getFormSimpleList } from '#/api/bpm/form';
+import {
+  createModel,
+  deployModel,
+  getModel,
+  updateModel,
+} from '#/api/bpm/model';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
+
+import BasicInfo from './modules/basic-info.vue';
+import ExtraSetting from './modules/extra-setting.vue';
+import FormDesign from './modules/form-design.vue';
+import ProcessDesign from './modules/process-design.vue';
+
+defineOptions({ name: 'BpmModelCreate' });
+
+type BpmProcessDefinitionType = Omit<
+  BpmProcessDefinitionApi.ProcessDefinition,
+  'modelId' | 'modelType'
+> & {
+  id?: string;
+  type?: number;
+};
+
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const tabs = useTabs();
+
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
+const formDesignRef = ref<InstanceType<typeof FormDesign>>(); // 表单设计组件引用
+const processDesignRef = ref<InstanceType<typeof ProcessDesign>>(); // 流程设计组件引用
+const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>(); // 更多设置组件引用
+
+const actionType = route.params.type as string; // 操作类型：create、copy、update
+const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+const steps = [
+  { title: '基本信息', validator: validateBasic },
+  { title: '表单设计', validator: validateForm },
+  { title: '流程设计', validator: validateProcess },
+  { title: '更多设置', validator: validateExtra },
+];
+
+const formData: any = ref({
+  id: undefined,
+  name: '',
+  key: '',
+  category: undefined,
+  icon: undefined,
+  description: '',
+  type: BpmModelType.SIMPLE,
+  formType: BpmModelFormType.NORMAL,
+  formId: '',
+  formCustomCreatePath: '',
+  formCustomViewPath: '',
+  visible: true,
+  startUserType: undefined,
+  startUserIds: [],
+  startDeptIds: [],
+  managerUserIds: [],
+  allowCancelRunningProcess: true,
+  processIdRule: {
+    enable: false,
+    prefix: '',
+    infix: '',
+    postfix: '',
+    length: 5,
+  },
+  autoApprovalType: BpmAutoApproveType.NONE,
+  titleSetting: {
+    enable: false,
+    title: '',
+  },
+  summarySetting: {
+    enable: false,
+    summary: [],
+  },
+  allowWithdrawTask: false,
+}); // 表单数据
+const processData = ref<any>(); // 流程数据
+
+const formList = ref<BpmFormApi.Form[]>([]);
+const categoryList = ref<BpmCategoryApi.Category[]>([]);
+const userList = ref<SystemUserApi.User[]>([]);
+const deptList = ref<SystemDeptApi.Dept[]>([]);
+
+provide('processData', processData);
+provide('modelData', formData);
+
+/** 步骤校验函数 */
+async function validateBasic() {
+  await basicInfoRef.value?.validate();
+}
+
+/** 表单设计校验 */
+async function validateForm() {
+  await formDesignRef.value?.validate();
+}
+
+/** 流程设计校验 */
+async function validateProcess() {
+  await processDesignRef.value?.validate();
+}
+
+/** 更多设置校验 */
+async function validateExtra() {
+  await extraSettingRef.value?.validate();
+}
+
+/** 初始化数据 */
+async function initData() {
+  if (actionType === 'definition') {
+    // 情况一：流程定义场景（恢复）
+    const definitionId = route.params.id as string;
+    const data = await getProcessDefinition(definitionId);
+    const processDefinition: BpmProcessDefinitionType = data;
+    // 将 definition => model
+    processDefinition.type = data.modelType;
+    processDefinition.id = data.modelId;
+    if (data.simpleModel) {
+      processDefinition.simpleModel = JSON.parse(data.simpleModel);
+    }
+    formData.value = processDefinition;
+
+    // 设置 startUserType
+    if (formData.value.startUserIds?.length > 0) {
+      formData.value.startUserType = 1;
+    } else if (formData.value.startDeptIds?.length > 0) {
+      formData.value.startUserType = 2;
+    } else {
+      formData.value.startUserType = 0;
+    }
+  } else if (['copy', 'update'].includes(actionType)) {
+    // 情况二：修改场景/复制场景
+    const modelId = route.params.id as string;
+    formData.value = await getModel(modelId);
+
+    // 设置 startUserType
+    if (formData.value.startUserIds?.length > 0) {
+      formData.value.startUserType = 1;
+    } else if (formData.value.startDeptIds?.length > 0) {
+      formData.value.startUserType = 2;
+    } else {
+      formData.value.startUserType = 0;
+    }
+
+    // 特殊：复制场景
+    if (route.params.type === 'copy') {
+      delete formData.value.id;
+      if (formData.value.bpmnXml) {
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.name,
+          `${formData.value.name}副本`,
+        );
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.key,
+          `${formData.value.key}_copy`,
+        );
+      }
+      formData.value.name += '副本';
+      formData.value.key += '_copy';
+    }
+  } else {
+    // 情况三：新增场景
+    formData.value.startUserType = 0; // 全体
+    formData.value.managerUserIds.push(userStore.userInfo?.id);
+  }
+
+  // 获取表单列表
+  formList.value = await getFormSimpleList();
+  categoryList.value = await getCategorySimpleList();
+  // 获取用户列表
+  userList.value = await getSimpleUserList();
+  // 获取部门列表
+  deptList.value = await getSimpleDeptList();
+
+  // 最终，设置 currentStep 切换到第一步
+  currentStep.value = 0;
+  // 以前未配置更多设置的流程
+  extraSettingRef.value?.initData();
+}
+
+/** 根据类型切换流程数据 */
+watch(
+  async () => formData.value.type,
+  () => {
+    if (formData.value.type === BpmModelType.BPMN) {
+      processData.value = formData.value.bpmnXml;
+    } else if (formData.value.type === BpmModelType.SIMPLE) {
+      processData.value = formData.value.simpleModel;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 校验所有步骤数据是否完整 */
+async function validateAllSteps() {
+  // 基本信息校验
+  try {
+    await validateBasic();
+  } catch {
+    currentStep.value = 0;
+    ElMessage.warning('请完善基本信息');
+    return false;
+  }
+
+  // 表单设计校验
+  try {
+    await validateForm();
+  } catch {
+    currentStep.value = 1;
+    ElMessage.warning('请完善自定义表单信息');
+    return false;
+  }
+
+  // 流程设计校验
+  try {
+    await validateProcess();
+  } catch {
+    currentStep.value = 2;
+    return false;
+  }
+
+  // 更多设置校验
+  try {
+    await validateExtra();
+  } catch {
+    currentStep.value = 3;
+    return false;
+  }
+
+  return true;
+}
+
+/** 保存操作 */
+async function handleSave() {
+  try {
+    // 保存前校验所有步骤的数据
+    const result = await validateAllSteps();
+    if (!result) {
+      return;
+    }
+
+    // 更新表单数据
+    const modelData = {
+      ...formData.value,
+    };
+
+    switch (actionType) {
+      case 'copy': {
+        // 情况三：复制场景
+        formData.value.id = await createModel(modelData);
+        // 提示成功
+        ElMessage.success('复制成功，可点击【发布】按钮，进行发布模型');
+        break;
+      }
+      case 'definition': {
+        // 情况一：流程定义场景（恢复）
+        await updateModel(modelData);
+        // 提示成功
+        ElMessage.success('恢复成功，可点击【发布】按钮，进行发布模型');
+        break;
+      }
+      case 'update': {
+        // 情况二：修改场景
+        await updateModel(modelData);
+        // 提示成功
+        ElMessage.success('修改成功，可点击【发布】按钮，进行发布模型');
+        break;
+      }
+      default: {
+        // 情况四：新增场景
+        formData.value.id = await createModel(modelData);
+        // 提示成功
+        ElMessage.success('新建成功，可点击【发布】按钮，进行发布模型');
+      }
+    }
+
+    // 返回列表页（排除更新的情况）
+    if (actionType !== 'update') {
+      await router.push({ name: 'BpmModel' });
+    }
+  } catch (error: any) {
+    console.error('保存失败:', error);
+  }
+}
+
+/** 发布操作 */
+async function handleDeploy() {
+  try {
+    // 1.1 修改场景下直接发布，新增场景下需要先确认
+    if (!formData.value.id) {
+      await confirm('是否确认发布该流程？');
+    }
+    // 1.2 校验所有步骤
+    await validateAllSteps();
+
+    // 2.1 更新表单数据
+    const modelData = {
+      ...formData.value,
+    };
+    // 2.2 先保存所有数据
+    if (formData.value.id) {
+      await updateModel(modelData);
+    } else {
+      const result = await createModel(modelData);
+      formData.value.id = result.id;
+    }
+    // 2.3 发布
+    await deployModel(formData.value.id);
+
+    // 3. 路由并提示
+    ElMessage.success('发布成功');
+    await router.push({ name: 'BpmModel' });
+  } catch (error: any) {
+    console.error('发布失败:', error);
+    ElMessage.warning(error.message || '发布失败');
+  }
+}
+
+/** 步骤切换处理 */
+async function handleStepClick(index: number) {
+  try {
+    if (index !== 0) {
+      await validateBasic();
+    }
+    if (index !== 1) {
+      await validateForm();
+    }
+    if (index !== 2) {
+      await validateProcess();
+    }
+    if (index !== 3) {
+      await validateExtra();
+    }
+    // 切换步骤
+    currentStep.value = index;
+  } catch (error) {
+    console.error('步骤切换失败:', error);
+    if (currentStep.value !== 2) {
+      ElMessage.warning('请先完善当前步骤必填信息');
+    }
+  }
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push({ name: 'BpmModel' });
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await initData();
+});
+
+/** 添加组件卸载前的清理 */
+onBeforeUnmount(() => {
+  // 清理所有的引用
+  basicInfoRef.value = undefined;
+  formDesignRef.value = undefined;
+  processDesignRef.value = undefined;
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <div
+        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
+      >
+        <!-- 左侧标题 -->
+        <div class="flex w-48 items-center overflow-hidden">
+          <IconifyIcon
+            icon="lucide:arrow-left"
+            class="size-5 flex-shrink-0 cursor-pointer"
+            @click="handleBack"
+          />
+          <span
+            class="ml-2.5 truncate text-base"
+            :title="formData.name || '创建流程'"
+          >
+            {{ formData.name || '创建流程' }}
+          </span>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="flex h-full flex-1 items-center justify-center">
+          <div class="flex h-full w-auto items-center justify-center">
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
+              class="relative mx-6 flex h-full cursor-pointer items-center"
+              :class="[
+                currentStep === index
+                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  : 'text-gray-500',
+              ]"
+              @click="handleStepClick(index)"
+            >
+              <div
+                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
+                :class="[
+                  currentStep === index
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-gray-300 bg-white text-gray-500',
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧按钮 -->
+        <div class="flex w-48 items-center justify-end gap-2">
+          <ElButton
+            v-if="actionType === 'update'"
+            type="primary"
+            @click="handleDeploy"
+          >
+            发 布
+          </ElButton>
+          <ElButton type="primary" @click="handleSave">
+            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-else>保 存</span>
+          </ElButton>
+        </div>
+      </div>
+      <!-- 主体内容 -->
+      <ElCard body-style="padding: 10px" class="mb-4">
+        <div class="mt-12">
+          <!-- 第一步：基本信息 -->
+          <div v-if="currentStep === 0" class="mx-auto w-4/6">
+            <BasicInfo
+              v-model="formData"
+              :category-list="categoryList"
+              :user-list="userList"
+              :dept-list="deptList"
+              ref="basicInfoRef"
+            />
+          </div>
+          <!-- 第二步：表单设计  -->
+          <div v-if="currentStep === 1" class="mx-auto w-4/6">
+            <FormDesign
+              v-model="formData"
+              :form-list="formList"
+              ref="formDesignRef"
+            />
+          </div>
+
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
+
+          <!-- 第四步：更多设置 -->
+          <div v-if="currentStep === 3" class="mx-auto w-4/6">
+            <ExtraSetting v-model="formData" ref="extraSettingRef" />
+          </div>
+        </div>
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d1bdc79df6dbcef80f473630af197e4533d1355
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup>
+import type { FormItemRule } from 'element-plus';
+
+import type { PropType } from 'vue';
+
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAvatar,
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+  ElTooltip,
+} from 'element-plus';
+
+import { ImageUpload } from '#/components/upload';
+import { DeptSelectModal } from '#/views/system/dept/components';
+import { UserSelectModal } from '#/views/system/user/components';
+
+const props = defineProps({
+  categoryList: {
+    type: Array as PropType<BpmCategoryApi.Category[]>,
+    required: true,
+  },
+  userList: {
+    type: Array as PropType<SystemUserApi.User[]>,
+    required: true,
+  },
+  deptList: {
+    type: Array as PropType<SystemDeptApi.Dept[]>,
+    required: true,
+  },
+});
+
+const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
+  connectedComponent: UserSelectModal,
+  destroyOnClose: true,
+});
+
+const [DeptSelectModalComp, deptSelectModalApi] = useVbenModal({
+  connectedComponent: DeptSelectModal,
+  destroyOnClose: true,
+});
+
+const formRef = ref(); // 表单引用
+const modelData = defineModel<any>(); // 创建本地数据副本
+
+const selectedStartUsers = ref<SystemUserApi.User[]>([]); // 选中的发起人
+const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]); // 选中的发起部门
+
+const selectedManagerUsers = ref<SystemUserApi.User[]>([]); // 选中的流程管理员
+const currentSelectType = ref<'manager' | 'start'>('start');
+const selectedUsers = ref<number[]>(); // 选中的用户
+const rules: Record<string, FormItemRule[]> = {
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+  key: [
+    { required: true, message: '流程标识不能为空', trigger: 'blur' },
+    {
+      validator: (_rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback();
+          return;
+        }
+        if (!/^[a-z_][-\w.$]*$/i.test(value)) {
+          callback(
+            new Error(
+              '只能包含字母、数字、下划线、连字符和点号，且必须以字母或下划线开头',
+            ),
+          );
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur',
+    },
+  ],
+  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  managerUserIds: [
+    { required: true, message: '流程管理员不能为空', trigger: 'blur' },
+  ],
+};
+
+/** 初始化选中的用户 */
+watch(
+  () => modelData.value,
+  (newVal) => {
+    selectedStartUsers.value = newVal.startUserIds?.length
+      ? (props.userList.filter((user: SystemUserApi.User) =>
+          newVal.startUserIds.includes(user.id),
+        ) as SystemUserApi.User[])
+      : [];
+    selectedStartDepts.value = newVal.startDeptIds?.length
+      ? (props.deptList.filter((dept: SystemDeptApi.Dept) =>
+          newVal.startDeptIds.includes(dept.id),
+        ) as SystemDeptApi.Dept[])
+      : [];
+    selectedManagerUsers.value = newVal.managerUserIds?.length
+      ? (props.userList.filter((user: SystemUserApi.User) =>
+          newVal.managerUserIds.includes(user.id),
+        ) as SystemUserApi.User[])
+      : [];
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 打开发起人选择 */
+function openStartUserSelect() {
+  currentSelectType.value = 'start';
+  selectedUsers.value = selectedStartUsers.value.map(
+    (user) => user.id,
+  ) as number[];
+  userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
+}
+
+/** 打开部门选择 */
+function openStartDeptSelect() {
+  deptSelectModalApi.setData({ selectedList: selectedStartDepts.value }).open();
+}
+
+/** 处理部门选择确认 */
+function handleDeptSelectConfirm(depts: SystemDeptApi.Dept[]) {
+  selectedStartDepts.value = depts;
+  modelData.value = {
+    ...modelData.value,
+    startDeptIds: depts.map((d) => d.id),
+  };
+}
+
+/** 打开管理员选择 */
+function openManagerUserSelect() {
+  currentSelectType.value = 'manager';
+  selectedUsers.value = selectedManagerUsers.value.map(
+    (user) => user.id,
+  ) as number[];
+  userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
+}
+
+/** 处理用户选择确认 */
+function handleUserSelectConfirm(userList: SystemUserApi.User[]) {
+  modelData.value =
+    currentSelectType.value === 'start'
+      ? {
+          ...modelData.value,
+          startUserIds: userList.map((u) => u.id),
+        }
+      : {
+          ...modelData.value,
+          managerUserIds: userList.map((u) => u.id),
+        };
+}
+
+/** 用户选择弹窗关闭 */
+function handleUserSelectClosed() {
+  selectedUsers.value = [];
+}
+
+/** 用户选择弹窗取消 */
+function handleUserSelectCancel() {
+  selectedUsers.value = [];
+}
+
+/** 处理发起人类型变化 */
+function handleStartUserTypeChange(value: number) {
+  switch (value) {
+    case 0: {
+      modelData.value = {
+        ...modelData.value,
+        startUserIds: [],
+        startDeptIds: [],
+      };
+      break;
+    }
+    case 1: {
+      modelData.value = {
+        ...modelData.value,
+        startDeptIds: [],
+      };
+      break;
+    }
+    case 2: {
+      modelData.value = {
+        ...modelData.value,
+        startUserIds: [],
+      };
+      break;
+    }
+  }
+}
+
+/** 移除发起人 */
+function handleRemoveStartUser(user: SystemUserApi.User) {
+  modelData.value = {
+    ...modelData.value,
+    startUserIds: modelData.value.startUserIds.filter(
+      (id: number) => id !== user.id,
+    ),
+  };
+}
+
+/** 移除部门 */
+function handleRemoveStartDept(dept: SystemDeptApi.Dept) {
+  modelData.value = {
+    ...modelData.value,
+    startDeptIds: modelData.value.startDeptIds.filter(
+      (id: number) => id !== dept.id,
+    ),
+  };
+}
+
+/** 移除管理员 */
+function handleRemoveManagerUser(user: SystemUserApi.User) {
+  modelData.value = {
+    ...modelData.value,
+    managerUserIds: modelData.value.managerUserIds.filter(
+      (id: number) => id !== user.id,
+    ),
+  };
+}
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <div>
+    <ElForm ref="formRef" :model="modelData" :rules="rules" label-width="100px">
+      <ElFormItem label="流程标识" prop="key">
+        <div class="flex w-full items-center">
+          <ElInput
+            v-model="modelData.key"
+            :disabled="!!modelData.id"
+            placeholder="请输入流程标识，以字母或下划线开头"
+            class="flex-1"
+          />
+          <ElTooltip
+            :content="
+              modelData.id ? '流程标识不可修改！' : '新建后，流程标识不可修改！'
+            "
+            placement="top"
+          >
+            <IconifyIcon icon="lucide:circle-help" class="ml-1 size-5" />
+          </ElTooltip>
+        </div>
+      </ElFormItem>
+      <ElFormItem label="流程名称" prop="name">
+        <ElInput
+          v-model="modelData.name"
+          :disabled="!!modelData.id"
+          clearable
+          placeholder="请输入流程名称"
+        />
+      </ElFormItem>
+      <ElFormItem label="流程分类" prop="category">
+        <ElSelect
+          v-model="modelData.category"
+          clearable
+          placeholder="请选择流程分类"
+          class="w-full"
+        >
+          <ElOption
+            v-for="category in categoryList"
+            :key="category.code"
+            :value="category.code"
+            :label="category.name"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="流程图标">
+        <ImageUpload
+          v-model:value="modelData.icon"
+          :show-description="false"
+          width="120px"
+          height="120px"
+        />
+      </ElFormItem>
+      <ElFormItem label="流程描述" prop="description">
+        <ElInput v-model="modelData.description" type="textarea" clearable />
+      </ElFormItem>
+      <ElFormItem label="流程类型" prop="type">
+        <ElRadioGroup v-model="modelData.type">
+          <ElRadio
+            v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
+            :key="dict.value as number"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="是否可见" prop="visible">
+        <ElRadioGroup v-model="modelData.visible">
+          <ElRadio
+            v-for="dict in getDictOptions(
+              DICT_TYPE.INFRA_BOOLEAN_STRING,
+              'boolean',
+            )"
+            :key="dict.label"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="谁可以发起" prop="startUserType">
+        <ElSelect
+          v-model="modelData.startUserType"
+          placeholder="请选择谁可以发起"
+          @change="handleStartUserTypeChange"
+        >
+          <ElOption :value="0" label="全员" />
+          <ElOption :value="1" label="指定人员" />
+          <ElOption :value="2" label="指定部门" />
+        </ElSelect>
+        <div
+          v-if="modelData.startUserType === 1"
+          class="mt-2 flex flex-wrap gap-1"
+        >
+          <div
+            v-for="user in selectedStartUsers"
+            :key="user.id"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            <ElAvatar
+              class="m-1 size-7"
+              v-if="user.avatar"
+              :src="user.avatar"
+            />
+            <ElAvatar class="m-1 size-7" v-else>
+              {{ user.nickname?.substring(0, 1) }}
+            </ElAvatar>
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ user.nickname }}
+            </span>
+            <IconifyIcon
+              icon="lucide:x"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500 dark:text-gray-200"
+              @click="handleRemoveStartUser(user)"
+            />
+          </div>
+          <ElButton link @click="openStartUserSelect" class="flex items-center">
+            <template #icon>
+              <IconifyIcon icon="lucide:user-plus" class="size-4" />
+            </template>
+            选择人员
+          </ElButton>
+        </div>
+        <div
+          v-if="modelData.startUserType === 2"
+          class="mt-2 flex flex-wrap gap-1"
+        >
+          <div
+            v-for="dept in selectedStartDepts"
+            :key="dept.id"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            <IconifyIcon icon="lucide:building" class="size-6 px-1" />
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ dept.name }}
+            </span>
+            <IconifyIcon
+              icon="lucide:x"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+              @click="handleRemoveStartDept(dept)"
+            />
+          </div>
+          <ElButton link @click="openStartDeptSelect" class="flex items-center">
+            <template #icon>
+              <IconifyIcon icon="lucide:user-plus" class="size-4" />
+            </template>
+            选择部门
+          </ElButton>
+        </div>
+      </ElFormItem>
+      <ElFormItem label="流程管理员" prop="managerUserIds">
+        <div class="flex flex-wrap gap-1">
+          <div
+            v-for="user in selectedManagerUsers"
+            :key="user.id"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            <ElAvatar
+              class="m-1 size-7"
+              v-if="user.avatar"
+              :src="user.avatar"
+            />
+            <ElAvatar class="m-1 size-7" v-else>
+              {{ user.nickname?.substring(0, 1) }}
+            </ElAvatar>
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ user.nickname }}
+            </span>
+            <IconifyIcon
+              icon="lucide:x"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+              @click="handleRemoveManagerUser(user)"
+            />
+          </div>
+          <ElButton
+            link
+            @click="openManagerUserSelect"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon icon="lucide:user-plus" class="size-4" />
+            </template>
+            选择人员
+          </ElButton>
+        </div>
+      </ElFormItem>
+    </ElForm>
+
+    <!-- 用户选择弹窗 -->
+    <UserSelectModalComp
+      class="w-3/5"
+      v-model:value="selectedUsers"
+      :multiple="true"
+      @confirm="handleUserSelectConfirm"
+      @closed="handleUserSelectClosed"
+      @cancel="handleUserSelectCancel"
+    />
+    <!-- 部门选择对话框 -->
+    <DeptSelectModalComp
+      class="w-3/5"
+      :check-strictly="true"
+      @confirm="handleDeptSelectConfirm"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f756afc3733639e252cabecda62374b91af5756
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { BpmModelFormType } from '@vben/constants';
+
+import { getForm } from '#/api/bpm/form';
+// import {
+//   MyProcessDesigner,
+//   MyProcessPenal,
+// } from '#/views/bpm/components/bpmn-process-designer/package';
+// // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+// import CustomContentPadProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad';
+// // 自定义左侧菜单（修改 默认任务 为 用户任务）
+// import CustomPaletteProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette';
+
+defineOptions({ name: 'BpmModelEditor' });
+
+defineProps<{
+  modelId?: string;
+  modelKey: string;
+  modelName: string;
+  value?: string;
+}>();
+
+// const emit = defineEmits(['success', 'init-finished']);
+
+const formFields = ref<string[]>([]); // 表单信息
+const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
+provide('formFields', formFields);
+provide('formType', formType);
+
+// const xmlString = inject('processData') as Ref; // 注入流程数据
+const modelData = inject('modelData') as Ref; // 注入模型数据
+
+const modeler = shallowRef(); // BPMN Modeler
+// const processDesigner = ref();
+// const controlForm = ref({
+//   simulation: true,
+//   labelEditing: false,
+//   labelVisible: false,
+//   prefix: 'flowable',
+//   headerButtonSize: 'mini',
+//   // additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
+// });
+
+// const model = ref<BpmModelApi.Model>(); // 流程模型的信息
+
+/** 初始化 modeler */
+// const initModeler = async (item: any) => {
+//   model.value = modelData.value;
+//   modeler.value = item;
+// };
+
+/** 添加/修改模型 */
+// const save = async (bpmnXml: string) => {
+//   try {
+//     xmlString.value = bpmnXml;
+//     emit('success', bpmnXml);
+//   } catch (error) {
+//     console.error('保存失败:', error);
+//     ElMessage.error('保存失败');
+//   }
+// };
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      formFields.value = data.fields;
+    } else {
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+/** 在组件卸载时清理 */
+onBeforeUnmount(() => {
+  modeler.value = null;
+  // 清理全局实例
+  const w = window as any;
+  if (w.bpmnInstances) {
+    w.bpmnInstances = null;
+  }
+});
+</script>
+
+<template>
+  <ContentWrap>
+    <!-- 流程设计器，负责绘制流程等 -->
+    <!-- <MyProcessDesigner
+      key="designer"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additional-model="controlForm.additionalModel"
+      :model="model"
+      @save="save"
+      :process-id="modelKey"
+      :process-name="modelName"
+    /> -->
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <!-- <MyProcessPenal
+      v-if="modeler"
+      key="penal"
+      :bpmn-modeler="modeler"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    /> -->
+  </ContentWrap>
+</template>
+
+<style scoped>
+:deep(.process-panel__container) {
+  @apply absolute right-[20px] top-[70px];
+}
+</style>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue b/apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a75ed61d71ebd1551806202a1a9748318cb8ade
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { MentionItem } from '../modules/tinymce-plugin';
+
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import Editor from '@tinymce/tinymce-vue';
+import { ElAlert } from 'element-plus';
+
+import { setupTinyPlugins } from './tinymce-plugin';
+
+const props = withDefaults(
+  defineProps<{
+    formFields?: Array<{ field: string; title: string }>;
+  }>(),
+  {
+    formFields: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'confirm', value: string): void;
+}>();
+
+/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const { template } = modalApi.getData<{
+        template: string;
+      }>();
+      if (template !== undefined) {
+        valueHtml.value = template;
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onConfirm() {
+    emits('confirm', valueHtml.value);
+    modalApi.close();
+  },
+});
+
+const mentionList = computed<MentionItem[]>(() => {
+  const base: MentionItem[] = [
+    { id: 'startUser', name: '发起人' },
+    { id: 'startUserDept', name: '发起人部门' },
+    { id: 'processName', name: '流程名称' },
+    { id: 'processNum', name: '流程编号' },
+    { id: 'startTime', name: '发起时间' },
+    { id: 'endTime', name: '结束时间' },
+    { id: 'processStatus', name: '流程状态' },
+    { id: 'printUser', name: '打印人' },
+    { id: 'printTime', name: '打印时间' },
+  ];
+
+  const extras: MentionItem[] = (props.formFields || []).map((it: any) => ({
+    id: it.field,
+    name: `[表单]${it.title}`,
+  }));
+  return [...base, ...extras];
+}); // 提供给 @ 自动补全的字段（默认 + 表单字段）
+
+const valueHtml = ref<string>('');
+const editorRef = shallowRef<any>(); // 编辑器
+
+const tinyInit = {
+  height: 400,
+  width: 'auto',
+  menubar: false,
+  plugins: 'link importcss table code preview autoresize lists ',
+  toolbar:
+    'undo redo | styles fontsize | bold italic underline | alignleft aligncenter alignright | link table | processrecord code preview',
+  language: 'zh_CN',
+  branding: false,
+  statusbar: true,
+  content_style:
+    'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+  setup(editor: any) {
+    editorRef.value = editor;
+    // 在编辑器 setup 时注册自定义插件
+    setupTinyPlugins(editor, () => mentionList.value);
+  },
+};
+
+onBeforeUnmount(() => {
+  if (editorRef.value) {
+    editorRef.value.destroy?.();
+  }
+});
+</script>
+
+<template>
+  <Modal class="w-3/4" title="自定义模板">
+    <div class="mb-3">
+      <ElAlert
+        message="输入 @ 可选择插入流程选项和表单选项"
+        type="info"
+        show-icon
+      />
+    </div>
+    <Editor
+      v-model="valueHtml"
+      :init="tinyInit"
+      :tinymce-script-src="tinymceScriptSrc"
+      license-key="gpl"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7392293879cc2c5c825c7c1169509fac6712f6b0
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
@@ -0,0 +1,618 @@
+<script setup lang="ts">
+import { computed, provide, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  BpmAutoApproveType,
+  BpmModelFormType,
+  ProcessVariableEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElCheckbox,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMention,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSwitch,
+  ElText,
+  ElTooltip,
+} from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+// import {
+//   HttpRequestSetting,
+//   parseFormFields,
+// } from '#/views/bpm/components/simple-process-design';
+import { parseFormFields } from '#/components/form-create';
+
+import PrintTemplate from './custom-print-template.vue';
+
+const modelData = defineModel<any>();
+
+/** 自定义 ID 流程编码 */
+const timeOptions = ref([
+  {
+    value: '',
+    label: '无',
+  },
+  {
+    value: 'DAY',
+    label: '精确到日',
+  },
+  {
+    value: 'HOUR',
+    label: '精确到时',
+  },
+  {
+    value: 'MINUTE',
+    label: '精确到分',
+  },
+  {
+    value: 'SECOND',
+    label: '精确到秒',
+  },
+]);
+const numberExample = computed(() => {
+  if (modelData.value.processIdRule.enable) {
+    let infix = '';
+    switch (modelData.value.processIdRule.infix) {
+      case 'DAY': {
+        infix = dayjs().format('YYYYMMDD');
+        break;
+      }
+      case 'HOUR': {
+        infix = dayjs().format('YYYYMMDDHH');
+        break;
+      }
+      case 'MINUTE': {
+        infix = dayjs().format('YYYYMMDDHHmm');
+        break;
+      }
+      case 'SECOND': {
+        infix = dayjs().format('YYYYMMDDHHmmss');
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    return (
+      modelData.value.processIdRule.prefix +
+      infix +
+      modelData.value.processIdRule.postfix +
+      '1'.padStart(modelData.value.processIdRule.length - 1, '0')
+    );
+  } else {
+    return '';
+  }
+});
+
+/** 是否开启流程前置通知 */
+const processBeforeTriggerEnable = ref(false);
+function handleProcessBeforeTriggerEnableChange(
+  val: boolean | number | string,
+) {
+  modelData.value.processBeforeTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 是否开启流程后置通知 */
+const processAfterTriggerEnable = ref(false);
+function handleProcessAfterTriggerEnableChange(val: boolean | number | string) {
+  modelData.value.processAfterTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 是否开启任务前置通知 */
+const taskBeforeTriggerEnable = ref(false);
+function handleTaskBeforeTriggerEnableChange(val: boolean | number | string) {
+  modelData.value.taskBeforeTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 是否开启任务后置通知 */
+const taskAfterTriggerEnable = ref(false);
+function handleTaskAfterTriggerEnableChange(val: boolean | number | string) {
+  modelData.value.taskAfterTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 表单字段 */
+const formFields = ref<Array<{ field: string; title: string }>>([]);
+const formFieldOptions4Title = computed(() => {
+  const cloneFormField = formFields.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field,
+    };
+  });
+  // 固定添加发起人 ID 字段
+  cloneFormField.unshift({
+    label: '流程名称',
+    value: ProcessVariableEnum.PROCESS_DEFINITION_NAME,
+  });
+  cloneFormField.unshift({
+    label: '发起时间',
+    value: ProcessVariableEnum.START_TIME,
+  });
+  cloneFormField.unshift({
+    label: '发起人',
+    value: ProcessVariableEnum.START_USER_ID,
+  });
+  return cloneFormField;
+});
+const formFieldOptions4Summary = computed(() => {
+  return formFields.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field,
+    };
+  });
+});
+const unParsedFormFields = ref<string[]>([]); // 未解析的表单字段
+provide('formFields', unParsedFormFields); // 暴露给子组件 HttpRequestSetting 使用
+
+/** 兼容以前未配置更多设置的流程 */
+function initData() {
+  if (!modelData.value.processIdRule) {
+    modelData.value.processIdRule = {
+      enable: false,
+      prefix: '',
+      infix: '',
+      postfix: '',
+      length: 5,
+    };
+  }
+  if (!modelData.value.printTemplateSetting) {
+    modelData.value.printTemplateSetting = {
+      enable: false,
+      template: '',
+    };
+  }
+  if (!modelData.value.autoApprovalType) {
+    modelData.value.autoApprovalType = BpmAutoApproveType.NONE;
+  }
+  if (!modelData.value.titleSetting) {
+    modelData.value.titleSetting = {
+      enable: false,
+      title: '',
+    };
+  }
+  if (!modelData.value.summarySetting) {
+    modelData.value.summarySetting = {
+      enable: false,
+      summary: [],
+    };
+  }
+  if (modelData.value.processBeforeTriggerSetting) {
+    processBeforeTriggerEnable.value = true;
+  }
+  if (modelData.value.processAfterTriggerSetting) {
+    processAfterTriggerEnable.value = true;
+  }
+  if (modelData.value.taskBeforeTriggerSetting) {
+    taskBeforeTriggerEnable.value = true;
+  }
+  if (modelData.value.taskAfterTriggerSetting) {
+    taskAfterTriggerEnable.value = true;
+  }
+  if (modelData.value.allowWithdrawTask === undefined) {
+    modelData.value.allowWithdrawTask = false;
+  }
+}
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      const result: Array<{ field: string; title: string }> = [];
+      if (data.fields) {
+        unParsedFormFields.value = data.fields;
+        data.fields.forEach((fieldStr: string) => {
+          parseFormFields(JSON.parse(fieldStr), result);
+        });
+      }
+      formFields.value = result;
+    } else {
+      formFields.value = [];
+      unParsedFormFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+const formRef = ref(); // 表单引用
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+/** 自定义打印模板模态框 */
+const [PrintTemplateModal, printTemplateModalApi] = useVbenModal({
+  connectedComponent: PrintTemplate,
+  destroyOnClose: true,
+});
+
+/** 弹出自定义打印模板弹窗 */
+function openPrintTemplateModal() {
+  printTemplateModalApi
+    .setData({ template: modelData.value.printTemplateSetting.template })
+    .open();
+}
+
+/** 默认的打印模板， 目前自定义模板没有引入自定义样式。 看后续是否需要 */
+const defaultTemplate = `<p style="text-align: center;font-size: 1.25rem;"><strong><span data-w-e-type="mention" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></strong></p>
+<p style="text-align: right;">打印人员：<span data-w-e-type="mention" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p>
+<p style="text-align: left;">流程编号：<span data-w-e-type="mention" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span></p>
+<p>&nbsp;</p>
+<table style="width: 100%; height: 72.2159px;">
+<tbody>
+<tr style="height: 36.108px;">
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起人</td>
+<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td>
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起时间</td>
+<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td>
+</tr>
+<tr style="height: 36.108px;">
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">所属部门</td>
+<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td>
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">流程状态</td>
+<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td>
+</tr>
+</tbody>
+</table>
+<p>&nbsp;</p>
+<div contenteditable="false" data-w-e-type="process-record" data-w-e-is-void="">
+<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">
+<tr>
+	<td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td>
+</tr>
+<tr>
+	<td style="width: 25%; border: 1px solid;">节点</td>
+	<td style="width: 75%; border: 1px solid;">操作</td>
+</tr>
+</table>
+</div>
+<p>&nbsp;</p>`;
+
+const printTemplateEnable = computed<boolean>({
+  get() {
+    return !!modelData.value?.printTemplateSetting?.enable;
+  },
+  set(val: boolean) {
+    if (!modelData.value.printTemplateSetting) {
+      modelData.value.printTemplateSetting = {
+        enable: false,
+        template: '',
+      };
+    }
+    modelData.value.printTemplateSetting.enable = val;
+  },
+}); // 自定义打印模板开关
+
+function handlePrintTemplateEnableChange(checked: any) {
+  const val = !!checked;
+  if (val && !modelData.value.printTemplateSetting.template) {
+    modelData.value.printTemplateSetting.template = defaultTemplate;
+  }
+}
+
+function confirmPrintTemplate(template: string) {
+  modelData.value.printTemplateSetting.template = template;
+}
+
+defineExpose({ initData, validate });
+</script>
+<template>
+  <ElForm
+    ref="formRef"
+    :model="modelData"
+    label-width="120px"
+    class="mt-5 px-5"
+  >
+    <ElFormItem class="mb-5" label="提交人权限">
+      <div class="flex flex-col gap-2">
+        <ElCheckbox v-model="modelData.allowCancelRunningProcess">
+          允许撤销审批中的申请
+        </ElCheckbox>
+        <div class="ml-6 text-sm">
+          <ElText type="warning">
+            第一个审批节点通过后，提交人仍可撤销申请
+          </ElText>
+        </div>
+      </div>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="审批人权限">
+      <div class="flex flex-col gap-2">
+        <ElCheckbox v-model="modelData.allowWithdrawTask">
+          允许审批人撤回任务
+        </ElCheckbox>
+        <div class="ml-6 text-sm">
+          <ElText type="info">审批人可撤回正在审批节点的前一节点</ElText>
+        </div>
+      </div>
+    </ElFormItem>
+    <ElFormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
+      <ElRow :gutter="8">
+        <ElCol :span="1">
+          <ElCheckbox v-model="modelData.processIdRule.enable" />
+        </ElCol>
+        <ElCol :span="5">
+          <ElInput
+            v-model="modelData.processIdRule.prefix"
+            placeholder="前缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </ElCol>
+        <ElCol :span="6">
+          <ElSelect
+            v-model="modelData.processIdRule.infix"
+            clearable
+            placeholder="中缀"
+            :disabled="!modelData.processIdRule.enable"
+          >
+            <ElOption
+              v-for="option in timeOptions"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            />
+          </ElSelect>
+        </ElCol>
+        <ElCol :span="4">
+          <ElInput
+            v-model="modelData.processIdRule.postfix"
+            placeholder="后缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </ElCol>
+        <ElCol :span="4">
+          <ElInputNumber
+            v-model="modelData.processIdRule.length"
+            :min="5"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </ElCol>
+      </ElRow>
+      <div class="ml-6 mt-2" v-if="modelData.processIdRule.enable">
+        <ElText type="success">编码示例：{{ numberExample }}</ElText>
+      </div>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="自动去重">
+      <div class="flex flex-col">
+        <div class="mb-2">
+          <ElText>同一审批人在流程中重复出现时：</ElText>
+        </div>
+        <ElRadioGroup v-model="modelData.autoApprovalType">
+          <div class="flex flex-col gap-2">
+            <ElRadio :value="0">不自动通过</ElRadio>
+            <ElRadio :value="1">
+              仅审批一次，后续重复的审批节点均自动通过
+            </ElRadio>
+            <ElRadio :value="2">仅针对连续审批的节点自动通过</ElRadio>
+          </div>
+        </ElRadioGroup>
+      </div>
+    </ElFormItem>
+    <ElFormItem v-if="modelData.titleSetting" class="mb-5" label="标题设置">
+      <div class="flex flex-col gap-2">
+        <ElRadioGroup v-model="modelData.titleSetting.enable">
+          <div class="flex flex-col gap-2">
+            <ElRadio :value="false">
+              系统默认
+              <ElText type="success"> 展示流程名称 </ElText>
+            </ElRadio>
+            <ElRadio :value="true">
+              <div class="inline-flex items-center">
+                自定义标题
+                <ElTooltip
+                  content="输入字符 '{' 即可插入表单字段"
+                  placement="top"
+                >
+                  <IconifyIcon
+                    icon="lucide:circle-help"
+                    class="ml-1 size-4 text-gray-500"
+                  />
+                </ElTooltip>
+              </div>
+            </ElRadio>
+          </div>
+        </ElRadioGroup>
+        <ElMention
+          v-if="modelData.titleSetting.enable"
+          v-model="modelData.titleSetting.title"
+          class="w-full min-w-[400px]"
+          type="textarea"
+          prefix="{"
+          split="}"
+          :options="formFieldOptions4Title"
+          placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
+        />
+      </div>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        modelData.summarySetting &&
+        modelData.formType === BpmModelFormType.NORMAL
+      "
+      class="mb-5"
+      label="摘要设置"
+    >
+      <div class="flex flex-col gap-2">
+        <ElRadioGroup v-model="modelData.summarySetting.enable">
+          <div class="flex flex-col gap-2">
+            <ElRadio :value="false">
+              系统默认
+              <ElText type="info">展示表单前 3 个字段</ElText>
+            </ElRadio>
+            <ElRadio :value="true"> 自定义摘要 </ElRadio>
+          </div>
+        </ElRadioGroup>
+        <ElSelect
+          v-if="modelData.summarySetting.enable"
+          v-model="modelData.summarySetting.summary"
+          multiple
+          placeholder="请选择要展示的表单字段"
+          class="w-full min-w-[400px]"
+        >
+          <ElOption
+            v-for="option in formFieldOptions4Summary"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+          />
+        </ElSelect>
+      </div>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="流程前置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="processBeforeTriggerEnable"
+              @change="handleProcessBeforeTriggerEnableChange"
+            />
+            <span class="ml-4">流程启动后通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="processBeforeTriggerEnable">
+        <ElCol :span="24" class="mt-6">
+          <!-- <HttpRequestSetting
+            v-model:setting="modelData.processBeforeTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="processBeforeTriggerSetting"
+          /> -->
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="流程后置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="processAfterTriggerEnable"
+              @change="handleProcessAfterTriggerEnableChange"
+            />
+            <span class="ml-4">流程结束后通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="processAfterTriggerEnable" class="mt-2">
+        <ElCol :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.processAfterTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="processAfterTriggerSetting"
+          />
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="任务前置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="taskBeforeTriggerEnable"
+              @change="handleTaskBeforeTriggerEnableChange"
+            />
+            <span class="ml-4">任务执行时通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="taskBeforeTriggerEnable" class="mt-2">
+        <ElCol :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.taskBeforeTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="taskBeforeTriggerSetting"
+          />
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="任务后置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="taskAfterTriggerEnable"
+              @change="handleTaskAfterTriggerEnableChange"
+            />
+            <span class="ml-4">任务结束后通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="taskAfterTriggerEnable" class="mt-2">
+        <ElCol :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.taskAfterTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="taskAfterTriggerSetting"
+          />
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="自定义打印模板">
+      <div class="flex w-full flex-col">
+        <div class="flex items-center">
+          <ElSwitch
+            v-model="printTemplateEnable"
+            @change="handlePrintTemplateEnableChange"
+          />
+          <ElButton
+            v-if="printTemplateEnable"
+            class="ml-2 flex items-center"
+            link
+            @click="openPrintTemplateModal"
+          >
+            <template #icon>
+              <IconifyIcon icon="lucide:pencil" />
+            </template>
+            编辑模板
+          </ElButton>
+        </div>
+      </div>
+    </ElFormItem>
+    <PrintTemplateModal
+      :form-fields="formFields"
+      @confirm="confirmPrintTemplate"
+    />
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
new file mode 100644
index 0000000000000000000000000000000000000000..534001d771b7c7d2edd1d074e730e76c719ec3a9
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import type { FormItemRule } from 'element-plus';
+
+import type { BpmFormApi } from '#/api/bpm/form';
+
+import { ref, watch } from 'vue';
+
+import { BpmModelFormType, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import FormCreate from '@form-create/element-ui';
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+  ElTooltip,
+} from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+import { setConfAndFields2 } from '#/components/form-create';
+
+const props = defineProps({
+  formList: {
+    type: Array<BpmFormApi.Form>,
+    required: true,
+  },
+});
+
+const formRef = ref();
+
+const modelData = defineModel<any>(); // 创建本地数据副本
+const formPreview = ref({
+  formData: {} as any,
+  rule: [],
+  option: {
+    submitBtn: false,
+    resetBtn: false,
+    formData: {},
+  },
+}); // 表单预览数据
+
+const rules: Record<string, FormItemRule[]> = {
+  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [
+    { required: true, message: '表单提交路由不能为空', trigger: 'blur' },
+  ],
+  formCustomViewPath: [
+    { required: true, message: '表单查看地址不能为空', trigger: 'blur' },
+  ],
+};
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      setConfAndFields2(formPreview.value, data.conf, data.fields);
+      // 设置只读
+      formPreview.value.rule.forEach((item: any) => {
+        item.props = { ...item.props, disabled: true };
+      });
+    } else {
+      formPreview.value.rule = [];
+    }
+  },
+  { immediate: true },
+);
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <ElForm
+    ref="formRef"
+    :model="modelData"
+    :rules="rules"
+    label-width="120px"
+    class="mt-5"
+  >
+    <ElFormItem label="表单类型" prop="formType" class="mb-5">
+      <ElRadioGroup v-model="modelData.formType">
+        <ElRadio
+          v-for="(dict, index) in getDictOptions(
+            DICT_TYPE.BPM_MODEL_FORM_TYPE,
+            'number',
+          )"
+          :key="index"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="modelData.formType === BpmModelFormType.NORMAL"
+      label="流程表单"
+      prop="formId"
+      class="mb-5"
+    >
+      <ElSelect v-model="modelData.formId" clearable>
+        <ElOption
+          v-for="form in props.formList"
+          :key="form.id"
+          :value="form.id!"
+          :label="form.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="modelData.formType === BpmModelFormType.CUSTOM"
+      label="表单提交路由"
+      prop="formCustomCreatePath"
+      class="mb-5"
+    >
+      <div class="flex items-center">
+        <ElInput
+          v-model="modelData.formCustomCreatePath"
+          placeholder="请输入表单提交路由"
+        />
+        <ElTooltip
+          content="自定义表单的提交路径，使用 Vue 的路由地址, 例如说: bpm/oa/leave/create.vue"
+          placement="top"
+        >
+          <IconifyIcon
+            icon="lucide:circle-help"
+            class="ml-1 size-5 text-gray-900"
+          />
+        </ElTooltip>
+      </div>
+    </ElFormItem>
+    <ElFormItem
+      v-if="modelData.formType === BpmModelFormType.CUSTOM"
+      label="表单查看地址"
+      prop="formCustomViewPath"
+      class="mb-5"
+    >
+      <div class="flex items-center">
+        <ElInput
+          v-model="modelData.formCustomViewPath"
+          placeholder="请输入表单查看的组件地址"
+        />
+        <ElTooltip
+          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          placement="top"
+        >
+          <IconifyIcon
+            icon="lucide:circle-help"
+            class="ml-1 size-5 text-gray-900"
+          />
+        </ElTooltip>
+      </div>
+    </ElFormItem>
+    <!-- 表单预览 -->
+    <div
+      v-if="
+        modelData.formType === BpmModelFormType.NORMAL &&
+        modelData.formId &&
+        formPreview.rule.length > 0
+      "
+      class="mb-5 mt-7 rounded-sm border border-solid border-gray-200 p-5"
+    >
+      <div class="mb-4 flex items-center">
+        <div class="mr-2 h-4 w-1 bg-blue-500"></div>
+        <span class="text-base font-bold">表单预览</span>
+      </div>
+      <FormCreate
+        v-model:api="formPreview.formData"
+        :rule="formPreview.rule"
+        :option="formPreview.option"
+      />
+    </div>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/process-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/process-design.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f2495b750d0509ef28d252b3b217b829340d738
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/process-design.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { computed, inject, nextTick, ref } from 'vue';
+
+import { BpmModelType } from '@vben/constants';
+
+import BpmModelEditor from './bpm-model-editor.vue';
+import SimpleModelDesign from './simple-model-design.vue';
+
+const modelData = defineModel<any>(); // 创建本地数据副本
+const processData = inject('processData') as Ref;
+
+const simpleDesign = ref();
+
+/** 表单校验 */
+async function validate() {
+  // 获取最新的流程数据
+  if (!processData.value) {
+    throw new Error('请设计流程');
+  }
+  if (modelData.value.type === BpmModelType.SIMPLE) {
+    // 简易设计器校验
+    const validateResult = await simpleDesign.value?.validateConfig();
+    if (!validateResult) {
+      throw new Error('请完善设计配置');
+    }
+  }
+  return true;
+}
+
+/** 处理设计器保存成功 */
+async function handleDesignSuccess(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">
+      <BpmModelEditor
+        v-if="showDesigner"
+        :model-id="modelData.id"
+        :model-key="modelData.key"
+        :model-name="modelData.name"
+        @success="handleDesignSuccess"
+      />
+    </template>
+    <!-- Simple设计器 -->
+    <template v-else>
+      <SimpleModelDesign
+        v-if="showDesigner"
+        :model-name="modelData.name"
+        :model-form-id="modelData.formId"
+        :model-form-type="modelData.formType"
+        :start-user-ids="modelData.startUserIds"
+        :start-dept-ids="modelData.startDeptIds"
+        @success="handleDesignSuccess"
+        ref="simpleDesign"
+      />
+    </template>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba8ae33a81f4b4eb3cebb005b284f16ac7780e54
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+
+import { SimpleProcessDesigner } from '#/views/bpm/components/simple-process-design';
+
+defineOptions({ name: 'SimpleModelDesign' });
+
+defineProps<{
+  modelFormId?: number;
+  modelFormType?: number;
+  modelName?: string;
+  startDeptIds?: number[];
+  startUserIds?: number[];
+}>();
+
+const emit = defineEmits(['success']);
+
+const designerRef = ref();
+
+/** 保存成功回调 */
+function handleSuccess(data?: any) {
+  if (data) {
+    emit('success', data);
+  }
+}
+
+/** 设计器配置校验 */
+async function validateConfig() {
+  return await designerRef.value.validate();
+}
+
+defineExpose({ validateConfig });
+</script>
+<template>
+  <ContentWrap class="px-4 py-5">
+    <SimpleProcessDesigner
+      :model-form-id="modelFormId"
+      :model-name="modelName"
+      :model-form-type="modelFormType"
+      @success="handleSuccess"
+      :start-user-ids="startUserIds"
+      :start-dept-ids="startDeptIds"
+      ref="designerRef"
+    />
+  </ContentWrap>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts b/apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..145dc894b6ea2418450a0468fa6cb72a8bda8123
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts
@@ -0,0 +1,78 @@
+/** TinyMCE 自定义功能：
+ * - processrecord 按钮：插入流程记录占位元素
+ * - @ 自动补全：插入 mention 占位元素
+ */
+
+// @ts-ignore TinyMCE 全局或通过打包器提供
+import type { Editor } from 'tinymce';
+
+export interface MentionItem {
+  id: string;
+  name: string;
+}
+
+/** 在编辑器 setup 回调中注册流程记录按钮和 @ 自动补全 */
+export function setupTinyPlugins(
+  editor: Editor,
+  getMentionList: () => MentionItem[],
+) {
+  // 按钮：流程记录
+  editor.ui.registry.addButton('processrecord', {
+    text: '流程记录',
+    tooltip: '插入流程记录占位',
+    onAction: () => {
+      // 流程记录占位显示， 仅用于显示。process-print.vue 组件中会替换掉
+      editor.insertContent(
+        [
+          '<div data-w-e-type="process-record" data-w-e-is-void contenteditable="false">',
+          '<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">',
+          '<tr><td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td></tr>',
+          '<tr>',
+          '<td style="width: 25%; border: 1px solid;">节点</td>',
+          '<td style="width: 75%; border: 1px solid;">操作</td>',
+          '</tr>',
+          '</table>',
+          '</div>',
+        ].join(''),
+      );
+    },
+  });
+
+  // @ 自动补全
+  editor.ui.registry.addAutocompleter('bpmMention', {
+    trigger: '@',
+    minChars: 0,
+    columns: 1,
+    fetch: (
+      pattern: string,
+      _maxResults: number,
+      _fetchOptions: Record<string, any>,
+    ) => {
+      const list = getMentionList();
+      const keyword = (pattern || '').toLowerCase().trim();
+      const data = list
+        .filter((i) => i.name.toLowerCase().includes(keyword))
+        .map((i) => ({
+          value: i.id,
+          text: i.name,
+        }));
+      return Promise.resolve(data);
+    },
+    onAction: (
+      autocompleteApi: any,
+      rng: Range,
+      value: string,
+      _meta: Record<string, any>,
+    ) => {
+      const list = getMentionList();
+      const item = list.find((i) => i.id === value);
+      const name = item ? item.name : value;
+      const info = encodeURIComponent(JSON.stringify({ id: value }));
+      editor.selection.setRng(rng);
+      editor.insertContent(
+        `<span data-w-e-type="mention" data-info="${info}">@${name}</span>`,
+      );
+      autocompleteApi.hide();
+    },
+  });
+}
diff --git a/apps/web-ele/src/views/system/dept/components/dept-select-modal.vue b/apps/web-ele/src/views/system/dept/components/dept-select-modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be14cf6ed38de4cc606efff4d456da3ebcce8676
--- /dev/null
+++ b/apps/web-ele/src/views/system/dept/components/dept-select-modal.vue
@@ -0,0 +1,141 @@
+// TODO @芋艿：是否有更好的组织形式？！
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { ElCard, ElCol, ElRow, ElTree } from 'element-plus';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+
+defineOptions({ name: 'DeptSelectModal' });
+
+const props = withDefaults(
+  defineProps<{
+    // 取消按钮文本
+    cancelText?: string;
+    // checkable 状态下节点选择完全受控
+    checkStrictly?: boolean;
+    // 确认按钮文本
+    confirmText?: string;
+    // 是否支持多选
+    multiple?: boolean;
+    // 标题
+    title?: string;
+  }>(),
+  {
+    cancelText: '取消',
+    checkStrictly: false,
+    confirmText: '确认',
+    multiple: true,
+    title: '部门选择',
+  },
+);
+
+const emit = defineEmits<{
+  confirm: [deptList: SystemDeptApi.Dept[]];
+}>();
+
+// 部门树形结构
+const deptTree = ref<any[]>([]);
+// 选中的部门 ID 列表
+const selectedDeptIds = ref<number[]>([]);
+// 部门数据
+const deptData = ref<SystemDeptApi.Dept[]>([]);
+// Tree 组件引用
+const treeRef = ref();
+
+// 对话框配置
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    // 获取选中的部门ID
+    const selectedIds: number[] = props.checkStrictly
+      ? treeRef.value?.getCheckedKeys() || []
+      : selectedDeptIds.value;
+
+    const deptArray = deptData.value.filter((dept) =>
+      selectedIds.includes(dept.id!),
+    );
+    emit('confirm', deptArray);
+    // 关闭并提示
+    await modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      deptTree.value = [];
+      selectedDeptIds.value = [];
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      deptData.value = await getSimpleDeptList();
+      deptTree.value = handleTree(deptData.value);
+      // 等待 DOM 更新后再设置选中的节点
+      await nextTick();
+      // 设置已选择的部门
+      if (data.selectedList?.length) {
+        const selectedIds = data.selectedList
+          .map((dept: SystemDeptApi.Dept) => dept.id)
+          .filter((id: number) => id !== undefined);
+        selectedDeptIds.value = selectedIds;
+        treeRef.value.setCheckedKeys(selectedIds);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  destroyOnClose: true,
+});
+
+/** 处理选中状态变化 */
+function handleCheck(
+  _data: any,
+  { checkedKeys }: { checkedKeys: (number | string)[] },
+) {
+  // 确保 checkedKeys 都是 number 类型
+  const keys = checkedKeys.map((key) =>
+    typeof key === 'string' ? Number(key) : key,
+  );
+
+  if (props.multiple) {
+    selectedDeptIds.value = keys;
+  } else {
+    // 单选模式下，只保留最后选择的节点
+    const lastSelectedId = keys[keys.length - 1];
+    if (lastSelectedId) {
+      selectedDeptIds.value = [lastSelectedId];
+      treeRef.value?.setCheckedKeys([lastSelectedId]);
+    }
+  }
+}
+</script>
+<template>
+  <Modal :title="title" key="dept-select-modal" class="w-3/5">
+    <ElRow class="h-full">
+      <ElCol :span="24">
+        <ElCard class="h-full">
+          <ElTree
+            v-if="deptTree.length > 0"
+            ref="treeRef"
+            :data="deptTree"
+            :props="{ label: 'name', children: 'children' }"
+            :check-strictly="checkStrictly"
+            :default-expand-all="true"
+            show-checkbox
+            check-on-click-node
+            node-key="id"
+            @check="handleCheck"
+          />
+        </ElCard>
+      </ElCol>
+    </ElRow>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/system/dept/components/index.ts b/apps/web-ele/src/views/system/dept/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d41597e977114403976bb99852299b2298868ff5
--- /dev/null
+++ b/apps/web-ele/src/views/system/dept/components/index.ts
@@ -0,0 +1,2 @@
+// TODO @xingyu：【待讨论】是不是把 user select 放到 user 目录的 components 下，dept select 放到 dept 目录的 components 下
+export { default as DeptSelectModal } from './dept-select-modal.vue';
diff --git a/apps/web-ele/src/views/system/user/components/index.ts b/apps/web-ele/src/views/system/user/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cb1c93fd04f7905b4e4b82043b95215b93bb767
--- /dev/null
+++ b/apps/web-ele/src/views/system/user/components/index.ts
@@ -0,0 +1 @@
+export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-ele/src/views/system/user/components/user-select-modal.vue b/apps/web-ele/src/views/system/user/components/user-select-modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a9c2b1b166712575af875b5dc3f570e5a30b19b5
--- /dev/null
+++ b/apps/web-ele/src/views/system/user/components/user-select-modal.vue
@@ -0,0 +1,518 @@
+<script lang="ts" setup>
+// TODO @芋艿：是否有更好的组织形式？！
+// TODO @xingyu：你感觉，这个放到每个 system、infra 模块下，然后新建一个 components，表示每个模块，有一些共享的组件？然后，全局只放通用的（无业务含义的），可以哇？
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCol,
+  ElInput,
+  ElMessage,
+  ElPagination,
+  ElRow,
+  ElTransfer,
+  ElTree,
+} from 'element-plus';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getUserPage } from '#/api/system/user';
+
+// 部门树节点接口
+interface DeptTreeNode {
+  id: string;
+  label: string;
+  children?: DeptTreeNode[];
+  name: string;
+}
+
+defineOptions({ name: 'UserSelectModal' });
+
+withDefaults(
+  defineProps<{
+    cancelText?: string;
+    confirmText?: string;
+    multiple?: boolean;
+    title?: string;
+    value?: number[];
+  }>(),
+  {
+    title: '选择用户',
+    multiple: true,
+    value: () => [],
+    confirmText: '确定',
+    cancelText: '取消',
+  },
+);
+
+const emit = defineEmits<{
+  cancel: [];
+  closed: [];
+  confirm: [value: SystemUserApi.User[]];
+  'update:value': [value: number[]];
+}>();
+
+// 部门树数据
+const deptTree = ref<any[]>([]);
+const deptList = ref<SystemDeptApi.Dept[]>([]);
+const expandedKeys = ref<string[]>([]);
+const selectedDeptId = ref<number>();
+const deptSearchKeys = ref('');
+
+// 用户数据管理
+const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
+const selectedUserIds = ref<number[]>([]);
+
+// 弹窗配置
+const [Modal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onClosed: handleClosed,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetData();
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 加载部门数据
+      const deptData = await getSimpleDeptList();
+      deptList.value = deptData;
+      const treeData = handleTree(deptData);
+      deptTree.value = treeData.map((node) => processDeptNode(node));
+      expandedKeys.value = deptTree.value.map((node) => node.id);
+
+      // 加载初始用户数据
+      await loadUserData(1, leftListState.value.pagination.pageSize);
+
+      // 设置已选用户
+      if (data.userIds?.length) {
+        selectedUserIds.value = data.userIds;
+        // 加载已选用户的完整信息  TODO   目前接口暂不支持 多个用户ID 查询， 需要后端支持
+        const { list } = await getUserPage({
+          pageNo: 1,
+          pageSize: 100, // 临时使用固定值确保能加载所有已选用户
+          userIds: data.userIds,
+        });
+        // 使用 Map 来去重，以用户 ID 为 key
+        const userMap = new Map(userList.value.map((user) => [user.id, user]));
+        list.forEach((user) => {
+          if (!userMap.has(user.id)) {
+            userMap.set(user.id, user);
+          }
+        });
+        userList.value = [...userMap.values()];
+        updateRightListData();
+      }
+
+      modalApi.open();
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  destroyOnClose: true,
+});
+
+// 左侧列表状态
+const leftListState = ref({
+  searchValue: '',
+  dataSource: [] as SystemUserApi.User[],
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  },
+});
+
+// 右侧列表状态
+const rightListState = ref({
+  searchValue: '',
+  dataSource: [] as SystemUserApi.User[],
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  },
+});
+
+// 计算属性：Transfer 数据源
+const transferDataSource = computed(() => {
+  // 使用 Map 来去重，确保每个用户只出现一次
+  const userMap = new Map<number, any>();
+
+  // 先添加左侧数据
+  for (const user of leftListState.value.dataSource) {
+    if (user.id) {
+      userMap.set(user.id, user);
+    }
+  }
+
+  // 再添加右侧数据（如果已存在则不会重复添加）
+  for (const user of rightListState.value.dataSource) {
+    if (user.id && !userMap.has(user.id)) {
+      userMap.set(user.id, user);
+    }
+  }
+
+  // 转换为 Transfer 需要的格式
+  return [...userMap.values()].map((user) => ({
+    key: user.id!,
+    label: `${user.nickname} (${user.username})`,
+    disabled: false,
+  }));
+});
+
+// 过滤部门树数据
+const filteredDeptTree = computed(() => {
+  if (!deptSearchKeys.value) return deptTree.value;
+
+  const filterNode = (node: any, depth = 0): any => {
+    // 添加深度限制，防止过深的递归导致爆栈
+    if (depth > 100) return null;
+
+    // 按部门名称搜索
+    const name = node?.name?.toLowerCase();
+    const search = deptSearchKeys.value.toLowerCase();
+
+    // 如果当前节点匹配，直接返回节点，不处理子节点
+    if (name?.includes(search)) {
+      return {
+        ...node,
+        children: node.children,
+      };
+    }
+
+    // 如果当前节点不匹配，检查子节点
+    if (node.children) {
+      const filteredChildren = node.children
+        .map((child: any) => filterNode(child, depth + 1))
+        .filter(Boolean);
+
+      if (filteredChildren.length > 0) {
+        return {
+          ...node,
+          children: filteredChildren,
+        };
+      }
+    }
+
+    return null;
+  };
+
+  return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
+});
+
+// 加载用户数据
+async function loadUserData(pageNo: number, pageSize: number) {
+  try {
+    const { list, total } = await getUserPage({
+      pageNo,
+      pageSize,
+      deptId: selectedDeptId.value,
+      username: leftListState.value.searchValue || undefined,
+    });
+
+    leftListState.value.dataSource = list;
+    leftListState.value.pagination.total = total;
+    leftListState.value.pagination.current = pageNo;
+    leftListState.value.pagination.pageSize = pageSize;
+
+    // 更新用户列表缓存
+    const newUsers = list.filter(
+      (user) => !userList.value.some((u) => u.id === user.id),
+    );
+    if (newUsers.length > 0) {
+      userList.value.push(...newUsers);
+    }
+  } finally {
+    //
+  }
+}
+
+// 更新右侧列表数据
+function updateRightListData() {
+  // 使用 Set 来去重选中的用户ID
+  const uniqueSelectedIds = new Set(selectedUserIds.value);
+
+  // 获取选中的用户，确保不重复
+  const selectedUsers = userList.value.filter((user) =>
+    uniqueSelectedIds.has(user.id!),
+  );
+
+  // 应用搜索过滤
+  const filteredUsers = rightListState.value.searchValue
+    ? selectedUsers.filter((user) =>
+        user.nickname
+          .toLowerCase()
+          .includes(rightListState.value.searchValue.toLowerCase()),
+      )
+    : selectedUsers;
+
+  // 更新总数（使用 Set 确保唯一性）
+  rightListState.value.pagination.total = new Set(
+    filteredUsers.map((user) => user.id),
+  ).size;
+
+  // 应用分页
+  const { current, pageSize } = rightListState.value.pagination;
+  const startIndex = (current - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+
+  rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
+}
+
+// 处理左侧分页变化
+async function handleLeftPaginationChange(page: number) {
+  await loadUserData(page, leftListState.value.pagination.pageSize);
+}
+
+// 处理右侧分页变化
+function handleRightPaginationChange(page: number) {
+  rightListState.value.pagination.current = page;
+  updateRightListData();
+}
+
+// 处理用户选择变化
+function handleUserChange(
+  value: (number | string)[],
+  _direction: string,
+  _movedKeys: (number | string)[],
+) {
+  // 使用 Set 来去重选中的用户ID，并确保转换为 number 类型
+  selectedUserIds.value = [...new Set(value.map(Number))];
+  emit('update:value', selectedUserIds.value);
+  updateRightListData();
+}
+
+// 重置数据
+function resetData() {
+  userList.value = [];
+  selectedUserIds.value = [];
+
+  // 取消部门选中
+  selectedDeptId.value = undefined;
+
+  // 取消选中的用户
+  selectedUserIds.value = [];
+
+  leftListState.value = {
+    searchValue: '',
+    dataSource: [],
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  };
+
+  rightListState.value = {
+    searchValue: '',
+    dataSource: [],
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  };
+}
+
+// 处理部门搜索
+function handleDeptSearch(value: string) {
+  deptSearchKeys.value = value;
+
+  // 如果有搜索结果，自动展开所有节点
+  if (value) {
+    const getAllKeys = (nodes: any[]): string[] => {
+      const keys: string[] = [];
+      for (const node of nodes) {
+        keys.push(node.id);
+        if (node.children) {
+          keys.push(...getAllKeys(node.children));
+        }
+      }
+      return keys;
+    };
+    expandedKeys.value = getAllKeys(deptTree.value);
+  } else {
+    // 清空搜索时，只展开第一级节点
+    expandedKeys.value = deptTree.value.map((node) => node.id);
+  }
+}
+
+// 处理部门选择
+async function handleDeptSelect(node: any) {
+  // 更新选中的部门ID
+  const newDeptId = node.id ? Number(node.id) : undefined;
+  selectedDeptId.value =
+    newDeptId === selectedDeptId.value ? undefined : newDeptId;
+
+  // 重置分页并加载数据
+  const { pageSize } = leftListState.value.pagination;
+  leftListState.value.pagination.current = 1;
+  await loadUserData(1, pageSize);
+}
+
+// 确认选择
+function handleConfirm() {
+  if (selectedUserIds.value.length === 0) {
+    ElMessage.warning('请选择用户');
+    return;
+  }
+  emit(
+    'confirm',
+    userList.value.filter((user) => selectedUserIds.value.includes(user.id!)),
+  );
+  modalApi.close();
+}
+
+// 取消选择
+function handleCancel() {
+  emit('cancel');
+  modalApi.close();
+  // 确保在动画结束后再重置数据
+  setTimeout(() => {
+    resetData();
+  }, 300);
+}
+
+// 关闭弹窗
+function handleClosed() {
+  emit('closed');
+  resetData();
+}
+
+// 递归处理部门树节点
+function processDeptNode(node: any): DeptTreeNode {
+  return {
+    id: String(node.id),
+    label: `${node.name} (${node.id})`,
+    name: node.name,
+    children: node.children?.map((child: any) => processDeptNode(child)),
+  };
+}
+</script>
+
+<template>
+  <Modal key="user-select-modal" class="w-3/5" :title="title">
+    <ElRow :gutter="16">
+      <ElCol :span="6">
+        <div class="h-[500px] overflow-auto rounded border">
+          <div class="border-b p-2">
+            <ElInput
+              v-model="deptSearchKeys"
+              placeholder="搜索部门"
+              clearable
+              @input="handleDeptSearch"
+            />
+          </div>
+          <ElTree
+            :data="filteredDeptTree"
+            :expand-on-click-node="false"
+            :default-expanded-keys="expandedKeys"
+            :current-node-key="
+              selectedDeptId ? String(selectedDeptId) : undefined
+            "
+            node-key="id"
+            highlight-current
+            @node-click="handleDeptSelect"
+          >
+            <template #default="{ node }">
+              <span>{{ node.label }}</span>
+            </template>
+          </ElTree>
+        </div>
+      </ElCol>
+      <ElCol :span="18">
+        <ElTransfer
+          v-model="selectedUserIds"
+          :data="transferDataSource"
+          :titles="['未选', '已选']"
+          filterable
+          filter-placeholder="搜索用户"
+          @change="handleUserChange"
+        >
+          <template #default="{ option }">
+            <span>{{ option.label }}</span>
+          </template>
+        </ElTransfer>
+        <div class="mt-2 flex justify-between">
+          <ElPagination
+            v-model:current-page="leftListState.pagination.current"
+            v-model:page-size="leftListState.pagination.pageSize"
+            :total="leftListState.pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next"
+            small
+            @current-change="handleLeftPaginationChange"
+          />
+          <ElPagination
+            v-model:current-page="rightListState.pagination.current"
+            v-model:page-size="rightListState.pagination.pageSize"
+            :total="rightListState.pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next"
+            small
+            @current-change="handleRightPaginationChange"
+          />
+        </div>
+      </ElCol>
+    </ElRow>
+    <template #footer>
+      <ElButton @click="handleCancel">{{ cancelText }}</ElButton>
+      <ElButton
+        type="primary"
+        :disabled="selectedUserIds.length === 0"
+        @click="handleConfirm"
+      >
+        {{ confirmText }}
+      </ElButton>
+    </template>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-transfer) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 450px;
+}
+
+:deep(.el-transfer-panel) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.el-transfer-panel__header) {
+  flex-shrink: 0;
+}
+
+:deep(.el-transfer-panel__filter) {
+  flex-shrink: 0;
+  padding: 8px;
+}
+
+:deep(.el-transfer-panel__body) {
+  flex: 1;
+  overflow: auto;
+}
+
+:deep(.el-transfer-panel__list) {
+  height: auto !important;
+}
+
+:deep(.el-transfer__buttons) {
+  padding: 0 8px;
+}
+</style>