From ca8ac99b6ea62faf8e9f81d9495e64e92fc0b45e Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 15 Dec 2025 21:03:28 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20[bpm][ele]=20bpmn=20=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/package.json                     |    7 +
 .../components/bpmn-process-designer/index.ts |    2 +
 .../package/designer/ProcessDesigner.vue      |  683 ++++++++
 .../package/designer/ProcessViewer.vue        |  427 +++++
 .../package/designer/index.ts                 |    8 +
 .../package/designer/index2.ts                |    8 +
 .../plugins/content-pad/contentPadProvider.js |  443 +++++
 .../designer/plugins/content-pad/index.js     |    6 +
 .../package/designer/plugins/defaultEmpty.js  |   26 +
 .../descriptor/activitiDescriptor.json        | 1007 +++++++++++
 .../plugins/descriptor/camundaDescriptor.json | 1023 +++++++++++
 .../descriptor/flowableDescriptor.json        | 1496 +++++++++++++++++
 .../activiti/activitiExtension.js             |   94 ++
 .../extension-moddle/activiti/index.js        |   11 +
 .../extension-moddle/camunda/extension.js     |  156 ++
 .../plugins/extension-moddle/camunda/index.js |    6 +
 .../flowable/flowableExtension.js             |   94 ++
 .../extension-moddle/flowable/index.js        |   10 +
 .../designer/plugins/palette/CustomPalette.js |  234 +++
 .../package/designer/plugins/palette/index.js |   22 +
 .../plugins/palette/paletteProvider.js        |  219 +++
 .../plugins/translate/customTranslate.js      |   44 +
 .../package/designer/plugins/translate/zh.js  |  256 +++
 .../bpmn-process-designer/package/index.ts    |   11 +
 .../package/palette/ProcessPalette.vue        |   30 +
 .../package/penal/PropertiesPanel.vue         |  399 +++++
 .../package/penal/base/ElementBaseInfo.vue    |  225 +++
 .../custom-config/ElementCustomConfig.vue     |   58 +
 .../components/BoundaryEventTimer.vue         |  305 ++++
 .../components/UserTaskCustomConfig.vue       |  669 ++++++++
 .../package/penal/custom-config/data.ts       |   13 +
 .../penal/flow-condition/FlowCondition.vue    |  234 +++
 .../package/penal/form/ElementForm.vue        |  336 ++++
 .../package/penal/index.js                    |    7 +
 .../penal/listeners/ElementListeners.vue      |  573 +++++++
 .../penal/listeners/ListenerFieldModal.vue    |  111 ++
 .../penal/listeners/UserTaskListeners.vue     |  552 ++++++
 .../package/penal/listeners/utilSelf.ts       |  101 ++
 .../multi-instance/ElementMultiInstance.vue   |  545 ++++++
 .../penal/other/ElementOtherConfig.vue        |   73 +
 .../penal/properties/ElementProperties.vue    |  249 +++
 .../penal/signal-message/SignalAndMessage.vue |  337 ++++
 .../signal-message/SignalMessageModal.vue     |   85 +
 .../package/penal/task/ElementTask.vue        |   92 +
 .../package/penal/task/data.ts                |   40 +
 .../task/task-components/CallActivity.vue     |  418 +++++
 .../task/task-components/HttpHeaderEditor.vue |  126 ++
 .../task/task-components/ReceiveTask.vue      |  135 ++
 .../penal/task/task-components/ScriptTask.vue |  119 ++
 .../task/task-components/ServiceTask.vue      |  487 ++++++
 .../penal/task/task-components/UserTask.vue   |  569 +++++++
 .../penal/time-event-config/CycleConfig.vue   |  391 +++++
 .../time-event-config/DurationConfig.vue      |   95 ++
 .../time-event-config/TimeEventConfig.vue     |  362 ++++
 .../package/theme/index.scss                  |  120 ++
 .../package/theme/process-designer.scss       |  183 ++
 .../package/theme/process-panel.scss          |  127 ++
 .../bpmn-process-designer/package/utils.ts    |   94 ++
 .../src/highlight/index.js                    |    8 +
 .../modules/custom-renderer/CustomRenderer.js |   30 +
 .../src/modules/custom-renderer/index.js      |    6 +
 .../src/modules/rules/CustomRules.js          |   16 +
 .../src/modules/rules/index.js                |    6 +
 .../bpmn-process-designer/src/translations.ts |   25 +
 .../src/utils/directive/clickOutSide.js       |   40 +
 .../bpmn-process-designer/src/utils/index.js  |   10 +
 .../src/utils/xml2json.js                     |   50 +
 .../model/form/modules/bpm-model-editor.vue   |   78 +-
 pnpm-lock.yaml                                |   21 +
 69 files changed, 14805 insertions(+), 38 deletions(-)
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
 create mode 100644 apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js

diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 4f74ce6a1..b6a959e48 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -47,11 +47,18 @@
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "benz-amr-recorder": "catalog:",
+    "bpmn-js": "catalog:",
+    "bpmn-js-properties-panel": "catalog:",
+    "bpmn-js-token-simulation": "catalog:",
+    "camunda-bpmn-moddle": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
+    "diagram-js": "catalog:",
     "element-plus": "catalog:",
+    "fast-xml-parser": "catalog:",
     "highlight.js": "catalog:",
     "pinia": "catalog:",
+    "steady-xml": "catalog:",
     "tinymce": "catalog:",
     "video.js": "catalog:",
     "vue": "catalog:",
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts
new file mode 100644
index 000000000..411e2ceba
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts
@@ -0,0 +1,2 @@
+// 导出 BPMN 流程设计器相关组件
+export * from './package';
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
new file mode 100644
index 000000000..e77301f20
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
@@ -0,0 +1,683 @@
+<script lang="ts" setup>
+// import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
+import { computed, h, onBeforeUnmount, onMounted, provide, ref } from 'vue';
+
+import {
+  AlignLeftOutlined,
+  ApiOutlined,
+  DownloadOutlined,
+  EyeOutlined,
+  FolderOpenOutlined,
+  RedoOutlined,
+  ReloadOutlined,
+  UndoOutlined,
+  WarningOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@vben/icons';
+
+// 模拟流转流程
+// @ts-ignore
+import tokenSimulation from 'bpmn-js-token-simulation';
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDialog,
+  ElMessage,
+  ElMessageBox,
+  ElTooltip,
+} from 'element-plus';
+// 代码高亮插件
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+//   name: ''
+// })
+import hljs from 'highlight.js'; // 导入代码高亮文件
+// 引入json转换与高亮
+// import xml2js from 'xml-js'
+// import xml2js from 'fast-xml-parser'
+import { parseXmlString, XmlNode } from 'steady-xml';
+
+import DefaultEmptyXML from './plugins/defaultEmpty';
+import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json';
+// 标签解析构建器
+// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 标签解析 Moddle
+import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json';
+import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json';
+import activitiModdleExtension from './plugins/extension-moddle/activiti';
+// 标签解析 Extension
+import camundaModdleExtension from './plugins/extension-moddle/camunda';
+import flowableModdleExtension from './plugins/extension-moddle/flowable';
+// 翻译方法
+import customTranslate from './plugins/translate/customTranslate';
+import translationsCN from './plugins/translate/zh';
+
+import 'highlight.js/styles/github.css';
+
+defineOptions({ name: 'MyProcessDesigner' });
+
+const props = defineProps({
+  value: { type: String, default: '' }, // xml 字符串
+  // valueWatch: true, // xml 字符串的 watch 状态
+  processId: { type: String, default: '' }, // 流程 key 标识
+  processName: { type: String, default: '' }, // 流程 name 名字
+  formId: { type: Number, default: undefined }, // 流程 form 表单编号
+  translations: {
+    // 自定义的翻译文件
+    type: Object,
+    default: () => {},
+  },
+  // eslint-disable-next-line vue/require-default-prop
+  additionalModel: [Object, Array], // 自定义model
+  moddleExtension: {
+    // 自定义moddle
+    type: Object,
+    default: () => {},
+  },
+  onlyCustomizeAddi: {
+    type: Boolean,
+    default: false,
+  },
+  onlyCustomizeModdle: {
+    type: Boolean,
+    default: false,
+  },
+  simulation: {
+    type: Boolean,
+    default: true,
+  },
+  keyboard: {
+    type: Boolean,
+    default: true,
+  },
+  prefix: {
+    type: String,
+    default: 'camunda',
+  },
+  events: {
+    type: Array,
+    default: () => ['element.click'],
+  },
+  headerButtonSize: {
+    type: String,
+    default: 'small',
+    validator: (value: string) =>
+      ['default', 'medium', 'mini', 'small'].includes(value),
+  },
+  headerButtonType: {
+    type: String,
+    default: 'primary',
+    validator: (value: string) =>
+      ['danger', 'default', 'info', 'primary', 'success', 'warning'].includes(
+        value,
+      ),
+  },
+});
+
+// 导入代码高亮样式
+
+const emit = defineEmits([
+  'destroy',
+  'init-finished',
+  'save',
+  'commandStack-changed',
+  'input',
+  'change',
+  'canvas-viewbox-changed',
+  // eventName.name
+  'element-click',
+]);
+
+const bpmnCanvas = ref();
+const refFile = ref();
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = (code: string) => {
+  // 高亮
+  if (previewType.value === 'json') {
+    code = JSON.stringify(code, null, 2);
+  }
+  const result = hljs.highlight(code, {
+    language: previewType.value,
+    ignoreIllegals: true,
+  });
+  return result.value || '&nbsp;';
+};
+
+provide('configGlobal', props);
+let bpmnModeler: any = null;
+const defaultZoom = ref(1);
+const previewModelVisible = ref(false);
+const simulationStatus = ref(false);
+const previewResult = ref('');
+const previewType = ref('xml');
+const recoverable = ref(false);
+const revocable = ref(false);
+const additionalModules = computed(() => {
+  // console.log(props.additionalModel, 'additionalModel');
+  const Modules: any[] = [];
+  // 仅保留用户自定义扩展模块
+  if (props.onlyCustomizeAddi) {
+    if (
+      Object.prototype.toString.call(props.additionalModel) === '[object Array]'
+    ) {
+      return props.additionalModel || [];
+    }
+    return [props.additionalModel];
+  }
+
+  // 插入用户自定义扩展模块
+  if (
+    Object.prototype.toString.call(props.additionalModel) === '[object Array]'
+  ) {
+    Modules.push(...(props.additionalModel as any[]));
+  } else {
+    props.additionalModel && Modules.push(props.additionalModel);
+  }
+
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(props.translations || translationsCN)],
+  };
+  Modules.push(TranslateModule);
+
+  // 模拟流转模块
+  if (props.simulation) {
+    Modules.push(tokenSimulation);
+  }
+
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (this.prefix === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  // console.log(props.prefix, 'props.prefix ');
+  if (props.prefix === 'camunda') {
+    Modules.push(camundaModdleExtension);
+  }
+  if (props.prefix === 'flowable') {
+    Modules.push(flowableModdleExtension);
+  }
+  if (props.prefix === 'activiti') {
+    Modules.push(activitiModdleExtension);
+  }
+
+  return Modules;
+});
+const moddleExtensions = computed(() => {
+  // console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle');
+  // console.log(props.moddleExtension, 'props.moddleExtension');
+  // console.log(props.prefix, 'props.prefix');
+  const Extensions: any = {};
+  // 仅使用用户自定义模块
+  if (props.onlyCustomizeModdle) {
+    return props.moddleExtension || null;
+  }
+
+  // 插入用户自定义模块
+  if (props.moddleExtension) {
+    for (const key in props.moddleExtension) {
+      Extensions[key] = props.moddleExtension[key];
+    }
+  }
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (props.prefix === 'activiti') {
+    Extensions.activiti = activitiModdleDescriptor;
+  }
+  if (props.prefix === 'flowable') {
+    Extensions.flowable = flowableModdleDescriptor;
+  }
+  if (props.prefix === 'camunda') {
+    Extensions.camunda = camundaModdleDescriptor;
+  }
+  return Extensions;
+});
+// console.log(additionalModules, 'additionalModules()');
+// console.log(moddleExtensions, 'moddleExtensions()');
+const initBpmnModeler = () => {
+  if (bpmnModeler) return;
+  const data: any = document.querySelector('#bpmnCanvas');
+  // console.log(data, 'data');
+  // console.log(props.keyboard, 'props.keyboard');
+  // console.log(additionalModules, 'additionalModules()');
+  // console.log(moddleExtensions, 'moddleExtensions()');
+
+  bpmnModeler = new BpmnModeler({
+    // container: this.$refs['bpmn-canvas'],
+    // container: getCurrentInstance(),
+    // container: needClass,
+    // container: bpmnCanvas.value,
+    container: data,
+    // width: '100%',
+    // 添加控制板
+    // propertiesPanel: {
+    // parent: '#js-properties-panel'
+    // },
+    keyboard: props.keyboard ? { bindTo: document } : null,
+    // additionalModules: additionalModules.value,
+    additionalModules: additionalModules.value as any[],
+    moddleExtensions: moddleExtensions.value,
+
+    // additionalModules: [
+    // additionalModules.value
+    // propertiesPanelModule,
+    // propertiesProviderModule
+    // propertiesProviderModule
+    // ],
+    // moddleExtensions: { camunda: moddleExtensions.value }
+  });
+
+  // bpmnModeler.createDiagram()
+
+  // console.log(bpmnModeler, 'bpmnModeler111111')
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emit('init-finished', bpmnModeler);
+  initModelListeners();
+};
+
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus');
+  // console.log(EventBus, 'EventBus');
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  props.events.forEach((event: any) => {
+    EventBus.on(event, (eventObj: any) => {
+      // const eventName = event.replaceAll('.', '-');
+      // eventName.name = eventName
+      const element = eventObj ? eventObj.element : null;
+      // console.log(eventName, 'eventName');
+      // console.log(element, 'element');
+      // eslint-disable-next-line vue/custom-event-name-casing
+      emit('element-click', element, eventObj);
+      // emit(eventName, element, eventObj)
+    });
+  });
+  // 监听图形改变返回xml
+  EventBus.on('commandStack.changed', async (event: any) => {
+    try {
+      recoverable.value = bpmnModeler.get('commandStack').canRedo();
+      revocable.value = bpmnModeler.get('commandStack').canUndo();
+      const { xml } = await bpmnModeler.saveXML({ format: true });
+      // eslint-disable-next-line vue/custom-event-name-casing
+      emit('commandStack-changed', event);
+      emit('input', xml);
+      emit('change', xml);
+      emit('save', xml);
+    } catch {
+      // console.error(`[Process Designer Warn]: ${e.message || e}`);
+    }
+  });
+  // 监听视图缩放变化
+  bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }: { viewbox: any }) => {
+    // eslint-disable-next-line vue/custom-event-name-casing
+    emit('canvas-viewbox-changed', { viewbox });
+    const { scale } = viewbox;
+    defaultZoom.value = Math.floor(scale * 100) / 100;
+  });
+};
+/* 创建新的流程图 */
+const createNewDiagram = async (xml: any) => {
+  // console.log(xml, 'xml');
+  // 将字符串转换成图显示出来
+  const newId = props.processId || `Process_${Date.now()}`;
+  const newName = props.processName || `业务流程_${Date.now()}`;
+  const xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix);
+  try {
+    // console.log(xmlString, 'xmlString')
+    // console.log(this.bpmnModeler.importXML);
+    const { warnings } = await bpmnModeler.importXML(xmlString);
+    // console.log(warnings, 'warnings');
+    if (warnings && warnings.length > 0) {
+      // warnings.forEach((warn: any) => console.warn(warn));
+    }
+  } catch {
+    // console.error(`[Process Designer Warn]: ${e.message || e}`);
+  }
+};
+
+// 下载流程图到本地
+const downloadProcess = async (type: string) => {
+  try {
+    // 按需要类型创建文件并下载
+    if (type === 'xml' || type === 'bpmn') {
+      const { err, xml } = await bpmnModeler.saveXML();
+      // 读取异常时抛出异常
+      if (err) {
+        // console.error(`[Process Designer Warn ]: ${err.message || err}`);
+      }
+      const { href, filename } = setEncoded(type.toUpperCase(), xml);
+      downloadFunc(href, filename);
+    } else {
+      const { err, svg } = await bpmnModeler.saveSVG();
+      // 读取异常时抛出异常
+      if (err) {
+        // return console.error(err);
+      }
+      const { href, filename } = setEncoded('SVG', svg);
+      downloadFunc(href, filename);
+    }
+  } catch (error: any) {
+    console.error(`[Process Designer Warn ]: ${error.message || error}`);
+  }
+  // 文件下载方法
+  function downloadFunc(href: string, filename: string) {
+    if (href && filename) {
+      const a = document.createElement('a');
+      a.download = filename; // 指定下载的文件名
+      a.href = href; //  URL对象
+      a.click(); // 模拟点击
+      URL.revokeObjectURL(a.href); // 释放URL 对象
+    }
+  }
+};
+
+// 根据所需类型进行转码并返回下载地址
+const setEncoded = (type: string, data: string) => {
+  const filename = 'diagram';
+  const encodedData = encodeURIComponent(data);
+  return {
+    filename: `${filename}.${type}`,
+    href: `data:application/${
+      type === 'svg' ? 'text/xml' : 'bpmn20-xml'
+    };charset=UTF-8,${encodedData}`,
+    data,
+  };
+};
+
+// 加载本地文件
+const importLocalFile = () => {
+  const file = refFile.value.files[0];
+  const reader = new FileReader();
+  // eslint-disable-next-line unicorn/prefer-blob-reading-methods
+  reader.readAsText(file);
+  reader.addEventListener('load', function () {
+    const xmlStr = this.result;
+    createNewDiagram(xmlStr);
+    emit('save', xmlStr);
+  });
+};
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+  downloadProcess('xml');
+};
+const downloadProcessAsBpmn = () => {
+  downloadProcess('bpmn');
+};
+const downloadProcessAsSvg = () => {
+  downloadProcess('svg');
+};
+const processSimulation = () => {
+  simulationStatus.value = !simulationStatus.value;
+  // console.log(
+  //   bpmnModeler.get('toggleMode', 'strict'),
+  //   "bpmnModeler.get('toggleMode')",
+  // );
+  props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode();
+};
+const processRedo = () => {
+  bpmnModeler.get('commandStack').redo();
+};
+const processUndo = () => {
+  bpmnModeler.get('commandStack').undo();
+};
+const processZoomIn = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
+  if (newZoom > 4) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be greater than 4',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get('canvas').zoom(defaultZoom.value);
+};
+const processZoomOut = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
+  if (newZoom < 0.2) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be less than 0.2',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get('canvas').zoom(defaultZoom.value);
+};
+const processReZoom = () => {
+  defaultZoom.value = 1;
+  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
+};
+const processRestart = () => {
+  recoverable.value = false;
+  revocable.value = false;
+  createNewDiagram(null);
+};
+const elementsAlign = (align: string) => {
+  const Align = bpmnModeler.get('alignElements');
+  const Selection = bpmnModeler.get('selection');
+  const SelectedElements = Selection.get();
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning('请按住 Shift 键选择多个元素对齐');
+    // alert('请按住 Ctrl 键选择多个元素对齐
+    return;
+  }
+  ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    icon: h(WarningOutlined) as any,
+  }).then(() => {
+    Align.trigger(SelectedElements, align);
+  });
+};
+/* -----------------------------    方法结束     ---------------------------------*/
+const previewProcessXML = () => {
+  // console.log(bpmnModeler.saveXML, 'bpmnModeler');
+  bpmnModeler.saveXML({ format: true }).then(({ xml }: { xml: string }) => {
+    // console.log(xml, 'xml111111')
+    previewResult.value = xml;
+    previewType.value = 'xml';
+    previewModelVisible.value = true;
+  });
+};
+const previewProcessJson = () => {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }: { xml: string }) => {
+    const rootNodes = new XmlNode('root' as any, parseXmlString(xml));
+    previewResult.value = rootNodes.parent?.toJSON() as unknown as string;
+    previewType.value = 'json';
+    previewModelVisible.value = true;
+  });
+};
+
+/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+onMounted(() => {
+  initBpmnModeler();
+  createNewDiagram(props.value);
+});
+onBeforeUnmount(() => {
+  if (bpmnModeler) bpmnModeler.destroy();
+  emit('destroy', bpmnModeler);
+  bpmnModeler = null;
+});
+</script>
+
+<template>
+  <div class="my-process-designer">
+    <div
+      class="my-process-designer__header"
+      style="z-index: 999; display: table-row-group"
+    >
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+        <ElButtonGroup key="file-control">
+          <ElButton
+            :icon="FolderOpenOutlined"
+            title="打开文件"
+            @click="refFile.click()"
+          />
+          <ElTooltip placement="bottom">
+            <template #content>
+              <div>
+                <ElButton type="primary" link @click="downloadProcessAsXml()">
+                  下载为XML文件
+                </ElButton>
+                <br />
+                <ElButton type="primary" link @click="downloadProcessAsSvg()">
+                  下载为SVG文件
+                </ElButton>
+                <br />
+                <ElButton type="primary" link @click="downloadProcessAsBpmn()">
+                  下载为BPMN文件
+                </ElButton>
+              </div>
+            </template>
+            <ElButton :icon="DownloadOutlined" title="下载文件" />
+          </ElTooltip>
+          <ElTooltip>
+            <template #content>
+              <ElButton type="primary" link @click="previewProcessXML">
+                预览XML
+              </ElButton>
+              <br />
+              <ElButton type="primary" link @click="previewProcessJson">
+                预览JSON
+              </ElButton>
+            </template>
+            <ElButton :icon="EyeOutlined" title="浏览" />
+          </ElTooltip>
+          <ElTooltip
+            v-if="props.simulation"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <ElButton
+              :icon="ApiOutlined"
+              title="模拟"
+              @click="processSimulation"
+            />
+          </ElTooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="align-control">
+          <ElTooltip content="向左对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-bottom"
+              @click="elementsAlign('left')"
+            />
+          </ElTooltip>
+          <ElTooltip content="向右对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-top"
+              @click="elementsAlign('right')"
+            />
+          </ElTooltip>
+          <ElTooltip content="向上对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-left"
+              @click="elementsAlign('top')"
+            />
+          </ElTooltip>
+          <ElTooltip content="向下对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-right"
+              @click="elementsAlign('bottom')"
+            />
+          </ElTooltip>
+          <ElTooltip content="水平居中">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-center"
+              @click="elementsAlign('center')"
+            />
+          </ElTooltip>
+          <ElTooltip content="垂直居中">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-middle"
+              @click="elementsAlign('middle')"
+            />
+          </ElTooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="scale-control">
+          <ElTooltip content="缩小视图">
+            <ElButton
+              :icon="ZoomOutOutlined"
+              @click="processZoomOut()"
+              :disabled="defaultZoom < 0.2"
+            />
+          </ElTooltip>
+          <ElButton>{{ `${Math.floor(defaultZoom * 10 * 10)}%` }}</ElButton>
+          <ElTooltip content="放大视图">
+            <ElButton
+              :icon="ZoomInOutlined"
+              @click="processZoomIn()"
+              :disabled="defaultZoom > 4"
+            />
+          </ElTooltip>
+          <ElTooltip content="重置视图并居中">
+            <ElButton :icon="ReloadOutlined" @click="processReZoom()" />
+          </ElTooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="stack-control">
+          <ElTooltip content="撤销">
+            <ElButton
+              :icon="UndoOutlined"
+              @click="processUndo()"
+              :disabled="!revocable"
+            />
+          </ElTooltip>
+          <ElTooltip content="恢复">
+            <ElButton
+              :icon="RedoOutlined"
+              @click="processRedo()"
+              :disabled="!recoverable"
+            />
+          </ElTooltip>
+          <ElTooltip content="重新绘制">
+            <ElButton :icon="ReloadOutlined" @click="processRestart()" />
+          </ElTooltip>
+        </ElButtonGroup>
+      </template>
+      <!-- 用于打开本地文件-->
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        class="hidden"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
+    </div>
+    <div class="my-process-designer__container">
+      <div
+        class="my-process-designer__canvas"
+        ref="bpmnCanvas"
+        id="bpmnCanvas"
+        style="width: 1680px; height: 800px"
+      ></div>
+      <!-- <div id="js-properties-panel" class="panel"></div> -->
+      <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+    </div>
+    <ElDialog
+      title="预览"
+      v-model="previewModelVisible"
+      class="max-h-[600px] w-4/5"
+    >
+      <div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <pre><code v-html="highlightedCode(previewResult)" class="hljs"></code></pre>
+      </div>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
new file mode 100644
index 000000000..881f70a07
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
@@ -0,0 +1,427 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
+import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
+import { formatDate, formatPast2 } from '@vben/utils';
+
+import BpmnViewer from 'bpmn-js/lib/Viewer';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDialog,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+
+import '../theme/index.scss';
+
+const props = defineProps({
+  xml: {
+    type: String,
+    required: true,
+  },
+  view: {
+    type: Object,
+    require: true,
+    default: () => ({}),
+  },
+});
+
+const processCanvas = ref();
+const bpmnViewer = ref<any | BpmnViewer>(null);
+const customDefs = ref();
+const defaultZoom = ref(1); // 默认缩放比例
+const isLoading = ref(false); // 是否加载中
+
+const processInstance = ref<any>({}); // 流程实例
+const tasks = ref([]); // 流程任务
+
+const dialogVisible = ref(false); // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined); // 弹窗标题
+const selectActivityType = ref<string | undefined>(undefined); // 选中 Task 的活动编号
+const selectTasks = ref<any[]>([]); // 选中的任务数组
+
+/** Zoom：恢复 */
+const processReZoom = () => {
+  defaultZoom.value = 1;
+  bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto');
+};
+
+/** Zoom：放大 */
+const processZoomIn = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
+  if (newZoom > 4) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be greater than 4',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value);
+};
+
+/** Zoom：缩小 */
+const processZoomOut = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
+  if (newZoom < 0.2) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be less than 0.2',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value);
+};
+
+/** 流程图预览清空 */
+const clearViewer = () => {
+  if (processCanvas.value) {
+    processCanvas.value.innerHTML = '';
+  }
+  if (bpmnViewer.value) {
+    bpmnViewer.value.destroy();
+  }
+  bpmnViewer.value = null;
+};
+
+/** 添加自定义箭头 */
+// TODO 芋艿：自定义箭头不生效，有点奇怪！！！！相关的 marker-end、marker-start 暂时也注释了！！！
+const addCustomDefs = () => {
+  if (!bpmnViewer.value) {
+    return;
+  }
+  const canvas = bpmnViewer.value?.get('canvas');
+  const svg = canvas?._svg;
+  svg.append(customDefs.value);
+};
+
+/** 节点选中 */
+const onSelectElement = (element: any) => {
+  // 清空原选中
+  selectActivityType.value = undefined;
+  dialogTitle.value = undefined;
+  if (!element || !processInstance.value?.id) {
+    return;
+  }
+
+  // UserTask 的情况
+  const activityType = element.type;
+  selectActivityType.value = activityType;
+  if (activityType === 'bpmn:UserTask') {
+    dialogTitle.value = element.businessObject
+      ? element.businessObject.name
+      : undefined;
+    selectTasks.value = tasks.value.filter(
+      (item: any) => item?.taskDefinitionKey === element.id,
+    );
+    dialogVisible.value = true;
+  } else if (
+    activityType === 'bpmn:EndEvent' ||
+    activityType === 'bpmn:StartEvent'
+  ) {
+    dialogTitle.value = '审批信息';
+    selectTasks.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis,
+      },
+    ];
+    dialogVisible.value = true;
+  }
+};
+
+/** 初始化 BPMN 视图 */
+const importXML = async (xml: string) => {
+  // 清空流程图
+  clearViewer();
+
+  // 初始化流程图
+  if (xml !== null && xml !== '') {
+    try {
+      bpmnViewer.value = new BpmnViewer({
+        additionalModules: [MoveCanvasModule],
+        container: processCanvas.value,
+      });
+      // 增加点击事件
+      bpmnViewer.value.on('element.click', ({ element }: { element: any }) => {
+        onSelectElement(element);
+      });
+
+      // 初始化 BPMN 视图
+      isLoading.value = true;
+      await bpmnViewer.value.importXML(xml);
+      // 自定义成功的箭头
+      addCustomDefs();
+    } catch {
+      clearViewer();
+    } finally {
+      isLoading.value = false;
+      // 高亮流程
+      setProcessStatus(props.view);
+    }
+  }
+};
+
+/** 高亮流程 */
+const setProcessStatus = (view: any) => {
+  // 设置相关变量
+  if (!view || !view.processInstance) {
+    return;
+  }
+  processInstance.value = view.processInstance;
+  tasks.value = view.tasks;
+  if (isLoading.value || !bpmnViewer.value) {
+    return;
+  }
+  const {
+    unfinishedTaskActivityIds,
+    finishedTaskActivityIds,
+    finishedSequenceFlowActivityIds,
+    rejectedTaskActivityIds,
+  } = view;
+  const canvas: any = bpmnViewer.value.get('canvas');
+  const elementRegistry: any = bpmnViewer.value.get('elementRegistry');
+
+  // 已完成节点
+  if (Array.isArray(finishedSequenceFlowActivityIds)) {
+    finishedSequenceFlowActivityIds.forEach((item: any) => {
+      if (item !== null) {
+        canvas.addMarker(item, 'success');
+        const element = elementRegistry.get(item);
+        const conditionExpression = element.businessObject.conditionExpression;
+        if (conditionExpression) {
+          canvas.addMarker(item, 'condition-expression');
+        }
+      }
+    });
+  }
+  if (Array.isArray(finishedTaskActivityIds)) {
+    finishedTaskActivityIds.forEach((item: any) =>
+      canvas.addMarker(item, 'success'),
+    );
+  }
+
+  // 未完成节点
+  if (Array.isArray(unfinishedTaskActivityIds)) {
+    unfinishedTaskActivityIds.forEach((item: any) =>
+      canvas.addMarker(item, 'primary'),
+    );
+  }
+
+  // 被拒绝节点
+  if (Array.isArray(rejectedTaskActivityIds)) {
+    rejectedTaskActivityIds.forEach((item: any) => {
+      if (item !== null) {
+        canvas.addMarker(item, 'danger');
+      }
+    });
+  }
+
+  // 特殊：处理 end 节点的高亮。因为 end 在拒绝、取消时，被后端计算成了 finishedTaskActivityIds 里
+  if (
+    [BpmProcessInstanceStatus.CANCEL, BpmProcessInstanceStatus.REJECT].includes(
+      processInstance.value.status,
+    )
+  ) {
+    const endNodes = elementRegistry.filter(
+      (element: any) => element.type === 'bpmn:EndEvent',
+    );
+    endNodes.forEach((item: any) => {
+      canvas.removeMarker(item.id, 'success');
+      if (processInstance.value.status === BpmProcessInstanceStatus.CANCEL) {
+        canvas.addMarker(item.id, 'cancel');
+      } else {
+        canvas.addMarker(item.id, 'danger');
+      }
+    });
+  }
+};
+
+watch(
+  () => props.xml,
+  (newXml) => {
+    importXML(newXml);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.view,
+  (newView) => {
+    setProcessStatus(newView);
+  },
+  { immediate: true },
+);
+
+/** mounted：初始化 */
+onMounted(() => {
+  importXML(props.xml);
+  setProcessStatus(props.view);
+});
+
+/** unmount：销毁 */
+onBeforeUnmount(() => {
+  clearViewer();
+});
+</script>
+
+<template>
+  <div class="process-viewer">
+    <div style="height: 100%" ref="processCanvas" v-show="!isLoading"></div>
+    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
+    <defs ref="customDefs">
+      <marker
+        id="sequenceflow-end-white-success"
+        viewBox="0 0 20 20"
+        refX="11"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-arrow"
+          d="M 1 5 L 11 10 L 1 15 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        />
+      </marker>
+      <marker
+        id="conditional-flow-marker-white-success"
+        viewBox="0 0 20 20"
+        refX="-1"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-conditional"
+          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        />
+      </marker>
+    </defs>
+
+    <!-- 审批记录 -->
+    <ElDialog
+      :title="dialogTitle || '审批记录'"
+      v-model="dialogVisible"
+      width="1000px"
+    >
+      <ElRow>
+        <ElTable :data="selectTasks" size="small" border>
+          <ElTableColumn label="序号" align="center" width="50">
+            <template #default="{ $index }">
+              {{ $index + 1 }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            label="审批人"
+            width="100"
+            align="center"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          >
+            <template #default="{ row }">
+              {{ row.assigneeUser?.nickname || row.ownerUser?.nickname }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            label="发起人"
+            prop="assigneeUser.nickname"
+            width="100"
+            align="center"
+            v-else
+          />
+          <ElTableColumn label="部门" width="100" align="center">
+            <template #default="{ row }">
+              {{ row.assigneeUser?.deptName || row.ownerUser?.deptName }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            width="140"
+          >
+            <template #default="{ row }">
+              {{ formatDate(row.createTime) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            width="140"
+          >
+            <template #default="{ row }">
+              {{ formatDate(row.endTime) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="审批状态"
+            prop="status"
+            width="90"
+          >
+            <template #default="{ row }">
+              <DictTag :type="DICT_TYPE.BPM_TASK_STATUS" :value="row.status" />
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="审批建议"
+            prop="reason"
+            width="120"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          />
+          <ElTableColumn
+            align="center"
+            label="耗时"
+            prop="durationInMillis"
+            width="100"
+          >
+            <template #default="{ row }">
+              {{ formatPast2(row.durationInMillis) }}
+            </template>
+          </ElTableColumn>
+        </ElTable>
+      </ElRow>
+    </ElDialog>
+
+    <!-- Zoom：放大、缩小 -->
+    <div style="position: absolute; top: 0; left: 0; width: 100%">
+      <ElRow justify="end">
+        <ElButtonGroup key="scale-control">
+          <ElButton
+            :disabled="defaultZoom <= 0.3"
+            :icon="ZoomOutOutlined"
+            @click="processZoomOut()"
+          />
+          <ElButton style="width: 90px">
+            {{ `${Math.floor(defaultZoom * 10 * 10)}%` }}
+          </ElButton>
+          <ElButton
+            :disabled="defaultZoom >= 3.9"
+            :icon="ZoomInOutlined"
+            @click="processZoomIn()"
+          />
+          <ElButton :icon="UndoOutlined" @click="processReZoom()" />
+        </ElButtonGroup>
+      </ElRow>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
new file mode 100644
index 000000000..cc2dc24fc
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
@@ -0,0 +1,8 @@
+import MyProcessDesigner from './ProcessDesigner.vue';
+
+MyProcessDesigner.install = function (Vue: any) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner);
+};
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
new file mode 100644
index 000000000..9f085a72e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
@@ -0,0 +1,8 @@
+import MyProcessViewer from './ProcessViewer.vue';
+
+MyProcessViewer.install = function (Vue: any) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer);
+};
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
new file mode 100644
index 000000000..638317fb8
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
@@ -0,0 +1,443 @@
+import { getChildLanes } from 'bpmn-js/lib/features/modeling/util/LaneUtil';
+import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+import { isEventSubProcess, isExpanded } from 'bpmn-js/lib/util/DiUtil';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse';
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider(
+  config,
+  injector,
+  eventBus,
+  contextPad,
+  modeling,
+  elementFactory,
+  connect,
+  create,
+  popupMenu,
+  canvas,
+  rules,
+  translate,
+) {
+  config = config || {};
+
+  contextPad.registerProvider(this);
+
+  this._contextPad = contextPad;
+
+  this._modeling = modeling;
+
+  this._elementFactory = elementFactory;
+  this._connect = connect;
+  this._create = create;
+  this._popupMenu = popupMenu;
+  this._canvas = canvas;
+  this._rules = rules;
+  this._translate = translate;
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+
+  eventBus.on('create.end', 250, (event) => {
+    const context = event.context;
+    const shape = context.shape;
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return;
+    }
+
+    const entries = contextPad.getEntries(shape);
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape);
+    }
+  });
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'contextPad',
+  'modeling',
+  'elementFactory',
+  'connect',
+  'create',
+  'popupMenu',
+  'canvas',
+  'rules',
+  'translate',
+  'elementRegistry',
+];
+
+ContextPadProvider.prototype.getContextPadEntries = function (element) {
+  const autoPlace = this._autoPlace;
+  const canvas = this._canvas;
+  const connect = this._connect;
+  const contextPad = this._contextPad;
+  const create = this._create;
+  const elementFactory = this._elementFactory;
+  const modeling = this._modeling;
+  const popupMenu = this._popupMenu;
+  const rules = this._rules;
+  const translate = this._translate;
+
+  const actions = {};
+
+  if (element.type === 'label') {
+    return actions;
+  }
+
+  const businessObject = element.businessObject;
+
+  function startConnect(event, element) {
+    connect.start(event, element);
+  }
+
+  function removeElement() {
+    modeling.removeElements([element]);
+  }
+
+  function getReplaceMenuPosition(element) {
+    const Y_OFFSET = 5;
+
+    const diagramContainer = canvas.getContainer();
+    const pad = contextPad.getPad(element).html;
+
+    const diagramRect = diagramContainer.getBoundingClientRect();
+    const padRect = pad.getBoundingClientRect();
+
+    const top = padRect.top - diagramRect.top;
+    const left = padRect.left - diagramRect.left;
+
+    const pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET,
+    };
+
+    return pos;
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {object} [options]
+   *
+   * @return {object} descriptor
+   */
+  function appendAction(type, className, title, options) {
+    if (typeof title !== 'string') {
+      options = title;
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+    }
+
+    function appendStart(event, element) {
+      const shape = elementFactory.createShape(
+        Object.assign({ type }, options),
+      );
+      create.start(event, shape, {
+        source: element,
+      });
+    }
+
+    const append = autoPlace
+      ? function (event, element) {
+          const shape = elementFactory.createShape(
+            Object.assign({ type }, options),
+          );
+
+          autoPlace.append(element, shape);
+        }
+      : appendStart;
+
+    return {
+      group: 'model',
+      className,
+      title,
+      action: {
+        dragstart: appendStart,
+        click: append,
+      },
+    };
+  }
+
+  function splitLaneHandler(count) {
+    return function (event, element) {
+      // actual split
+      modeling.splitLane(element, count);
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true);
+    };
+  }
+
+  if (
+    isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) &&
+    isExpanded(businessObject)
+  ) {
+    const childLanes = getChildLanes(element);
+
+    Object.assign(actions, {
+      'lane-insert-above': {
+        group: 'lane-insert-above',
+        className: 'bpmn-icon-lane-insert-above',
+        title: translate('Add Lane above'),
+        action: {
+          click(event, element) {
+            modeling.addLane(element, 'top');
+          },
+        },
+      },
+    });
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        Object.assign(actions, {
+          'lane-divide-two': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-two',
+            title: translate('Divide into two Lanes'),
+            action: {
+              click: splitLaneHandler(2),
+            },
+          },
+        });
+      }
+
+      if (element.height >= 180) {
+        Object.assign(actions, {
+          'lane-divide-three': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-three',
+            title: translate('Divide into three Lanes'),
+            action: {
+              click: splitLaneHandler(3),
+            },
+          },
+        });
+      }
+    }
+
+    Object.assign(actions, {
+      'lane-insert-below': {
+        group: 'lane-insert-below',
+        className: 'bpmn-icon-lane-insert-below',
+        title: translate('Add Lane below'),
+        action: {
+          click(event, element) {
+            modeling.addLane(element, 'bottom');
+          },
+        },
+      },
+    });
+  }
+
+  if (is(businessObject, 'bpmn:FlowNode')) {
+    if (is(businessObject, 'bpmn:EventBasedGateway')) {
+      Object.assign(actions, {
+        'append.receive-task': appendAction(
+          'bpmn:ReceiveTask',
+          'bpmn-icon-receive-task',
+          translate('Append ReceiveTask'),
+        ),
+        'append.message-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-message',
+          translate('Append MessageIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:MessageEventDefinition' },
+        ),
+        'append.timer-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-timer',
+          translate('Append TimerIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:TimerEventDefinition' },
+        ),
+        'append.condition-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-condition',
+          translate('Append ConditionIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:ConditionalEventDefinition' },
+        ),
+        'append.signal-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-signal',
+          translate('Append SignalIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:SignalEventDefinition' },
+        ),
+      });
+    } else if (
+      isEventType(
+        businessObject,
+        'bpmn:BoundaryEvent',
+        'bpmn:CompensateEventDefinition',
+      )
+    ) {
+      Object.assign(actions, {
+        'append.compensation-activity': appendAction(
+          'bpmn:Task',
+          'bpmn-icon-task',
+          translate('Append compensation activity'),
+          {
+            isForCompensation: true,
+          },
+        ),
+      });
+    } else if (
+      !is(businessObject, 'bpmn:EndEvent') &&
+      !businessObject.isForCompensation &&
+      !isEventType(
+        businessObject,
+        'bpmn:IntermediateThrowEvent',
+        'bpmn:LinkEventDefinition',
+      ) &&
+      !isEventSubProcess(businessObject)
+    ) {
+      Object.assign(actions, {
+        'append.end-event': appendAction(
+          'bpmn:EndEvent',
+          'bpmn-icon-end-event-none',
+          translate('Append EndEvent'),
+        ),
+        'append.gateway': appendAction(
+          'bpmn:ExclusiveGateway',
+          'bpmn-icon-gateway-none',
+          translate('Append Gateway'),
+        ),
+        'append.append-task': appendAction(
+          'bpmn:UserTask',
+          'bpmn-icon-user-task',
+          translate('Append Task'),
+        ),
+        'append.intermediate-event': appendAction(
+          'bpmn:IntermediateThrowEvent',
+          'bpmn-icon-intermediate-event-none',
+          translate('Append Intermediate/Boundary Event'),
+        ),
+      });
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+    // Replace menu entry
+    Object.assign(actions, {
+      replace: {
+        group: 'edit',
+        className: 'bpmn-icon-screw-wrench',
+        title: '修改类型',
+        action: {
+          click(event, element) {
+            const position = Object.assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y },
+            });
+
+            popupMenu.open(element, 'bpmn-replace', position);
+          },
+        },
+      },
+    });
+  }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:FlowNode',
+      'bpmn:InteractionNode',
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference',
+    ])
+  ) {
+    Object.assign(actions, {
+      'append.text-annotation': appendAction(
+        'bpmn:TextAnnotation',
+        'bpmn-icon-text-annotation',
+      ),
+
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate(
+          `Connect using ${
+            businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or '
+          }Association`,
+        ),
+        action: {
+          click: startConnect,
+          dragstart: startConnect,
+        },
+      },
+    });
+  }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference',
+    ])
+  ) {
+    Object.assign(actions, {
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate('Connect using DataInputAssociation'),
+        action: {
+          click: startConnect,
+          dragstart: startConnect,
+        },
+      },
+    });
+  }
+
+  if (is(businessObject, 'bpmn:Group')) {
+    Object.assign(actions, {
+      'append.text-annotation': appendAction(
+        'bpmn:TextAnnotation',
+        'bpmn-icon-text-annotation',
+      ),
+    });
+  }
+
+  // delete element entry, only show if allowed by rules
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] });
+
+  if (Array.isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element;
+  }
+
+  if (deleteAllowed) {
+    Object.assign(actions, {
+      delete: {
+        group: 'edit',
+        className: 'bpmn-icon-trash',
+        title: translate('Remove'),
+        action: {
+          click: removeElement,
+        },
+      },
+    });
+  }
+
+  return actions;
+};
+
+// helpers /////////
+
+function isEventType(eventBo, type, definition) {
+  const isType = eventBo.$instanceOf(type);
+  let isDefinition = false;
+
+  const definitions = eventBo.eventDefinitions || [];
+  definitions.forEach((def) => {
+    if (def.$type === definition) {
+      isDefinition = true;
+    }
+  });
+
+  return isType && isDefinition;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
new file mode 100644
index 000000000..d5325aedb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
@@ -0,0 +1,6 @@
+import CustomContextPadProvider from './contentPadProvider';
+
+export default {
+  __init__: ['contextPadProvider'],
+  contextPadProvider: ['type', CustomContextPadProvider],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
new file mode 100644
index 000000000..5c25d8e8d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
@@ -0,0 +1,26 @@
+function defaultEmpty(key, name, type) {
+  if (!type) type = 'camunda';
+  const TYPE_TARGET = {
+    activiti: 'http://activiti.org/bpmn',
+    camunda: 'http://bpmn.io/schema/bpmn',
+    flowable: 'http://flowable.org/bpmn',
+  };
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`;
+}
+
+export default defaultEmpty;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
new file mode 100644
index 000000000..879785225
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
@@ -0,0 +1,1007 @@
+{
+  "name": "Activiti",
+  "uri": "http://activiti.org/bpmn",
+  "prefix": "activiti",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "activiti:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        },
+        {
+          "name": "executionListener",
+          "isAbstract": true,
+          "type": "Expression"
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "multiinstance_type",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "multiinstance_condition",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "multiinstance_condition",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["activiti:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "activiti:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["activiti:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "activiti:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike",
+          "activiti:ExecutionListener",
+          "activiti:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "activiti:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
new file mode 100644
index 000000000..18fe80288
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
@@ -0,0 +1,1023 @@
+{
+  "name": "Camunda",
+  "uri": "http://camunda.org/schema/1.0/bpmn",
+  "prefix": "camunda",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity", "bpmn:SignalEventDefinition"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "camunda:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "camunda:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "modelerTemplateVersion",
+          "isAttr": true,
+          "type": "Integer"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["camunda:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "camunda:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["camunda:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "camunda:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike",
+          "camunda:ExecutionListener",
+          "camunda:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["camunda:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "camunda:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvents",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
new file mode 100644
index 000000000..2a929bd2d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -0,0 +1,1496 @@
+{
+  "name": "Flowable",
+  "uri": "http://flowable.org/bpmn",
+  "prefix": "flowable",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "flowable:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formReadOnly",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "formInit",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "supperClass": "Element",
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "viewId",
+          "type": "Number",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "processInstanceName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "inheritBusinessKey",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "inheritVariables",
+          "isAttr": true,
+          "type": "Boolean"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["flowable:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "code",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "isHide",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "next",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "condition",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "operationType",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:ServiceTaskLike",
+          "flowable:ExecutionListener",
+          "flowable:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ChildField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        },
+        {
+          "name": "children",
+          "type": "ChildField",
+          "isMany": true
+        },
+        {
+          "name": "extensionElements",
+          "type": "bpmn:ExtensionElements",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Condition",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:SequenceFlow"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "compare",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "logic",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "AssignStartUserHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "RejectHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "RejectReturnTaskId",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyUserIds",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ButtonsSetting",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "flowable:id",
+          "type": "Integer",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:enable",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:displayName",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FieldsPermission",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "flowable:field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:title",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:permission",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "BoundaryEventType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:BoundaryEvent"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "TimeoutHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:BoundaryEvent"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ApproveType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ApproveMethod",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "CandidateStrategy",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "CandidateParam",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SignEnable",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SkipExpression",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "skipExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ReasonRequire",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
new file mode 100644
index 000000000..54d506019
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
@@ -0,0 +1,94 @@
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity',
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+};
+
+function is(element, type) {
+  return (
+    element &&
+    typeof element.$instanceOf === 'function' &&
+    element.$instanceOf(type)
+  );
+}
+
+function exists(element) {
+  return element && element.length > 0;
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    collection.some((element) => {
+      return is(element, type);
+    })
+  );
+}
+
+function anyType(element, types) {
+  return types.some((type) => {
+    return is(element, type);
+  });
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name;
+  const types = ALLOWED_TYPES[name.replace(/activiti:/, '')];
+
+  return name === propName && anyType(newElement, types);
+}
+
+function ActivitiModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement;
+      const propDescriptor = context.propertyDescriptor;
+
+      this.canCloneProperty(newElement, propDescriptor);
+    },
+    this,
+  );
+}
+
+ActivitiModdleExtension.$inject = ['eventBus'];
+
+ActivitiModdleExtension.prototype.canCloneProperty = function (
+  newElement,
+  propDescriptor,
+) {
+  if (
+    isAllowed('activiti:FailedJobRetryTimeCycle', propDescriptor, newElement)
+  ) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(
+        newElement.loopCharacteristics,
+        'bpmn:MultiInstanceLoopCharacteristics',
+      )
+    );
+  }
+
+  if (isAllowed('activiti:Connector', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+
+  if (isAllowed('activiti:Field', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+};
+
+// module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
new file mode 100644
index 000000000..7c38ff4e5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
@@ -0,0 +1,11 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+
+import activitiExtension from './activitiExtension';
+
+export default {
+  __init__: ['ActivitiModdleExtension'],
+  ActivitiModdleExtension: ['type', activitiExtension],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
new file mode 100644
index 000000000..3956be680
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
@@ -0,0 +1,156 @@
+import { isFunction, isObject } from '@vben/utils';
+
+const WILDCARD = '*';
+
+function CamundaModdleExtension(eventBus) {
+  // eslint-disable-next-line unicorn/no-this-assignment, @typescript-eslint/no-this-alias
+  const self = this;
+
+  eventBus.on('moddleCopy.canCopyProperty', (context) => {
+    const parent = context.parent;
+    const property = context.property;
+
+    return self.canCopyProperty(property, parent);
+  });
+}
+
+CamundaModdleExtension.$inject = ['eventBus'];
+
+/**
+ * Check wether to disallow copying property.
+ */
+CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
+  // (1) check wether property is allowed in parent
+  if (isObject(property) && !isAllowedInParent(property, parent)) {
+    return false;
+  }
+
+  // (2) check more complex scenarios
+
+  if (is(property, 'camunda:InputOutput') && !this.canHostInputOutput(parent)) {
+    return false;
+  }
+
+  if (
+    isAny(property, ['camunda:Connector', 'camunda:Field']) &&
+    !this.canHostConnector(parent)
+  ) {
+    return false;
+  }
+
+  if (is(property, 'camunda:In') && !this.canHostIn(parent)) {
+    return false;
+  }
+};
+
+CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
+  // allowed in camunda:Connector
+  const connector = getParent(parent, 'camunda:Connector');
+
+  if (connector) {
+    return true;
+  }
+
+  // special rules inside bpmn:FlowNode
+  const flowNode = getParent(parent, 'bpmn:FlowNode');
+
+  if (!flowNode) {
+    return false;
+  }
+
+  if (
+    isAny(flowNode, ['bpmn:StartEvent', 'bpmn:Gateway', 'bpmn:BoundaryEvent'])
+  ) {
+    return false;
+  }
+
+  return !(is(flowNode, 'bpmn:SubProcess') && flowNode.get('triggeredByEvent'));
+};
+
+CamundaModdleExtension.prototype.canHostConnector = function (parent) {
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike');
+
+  if (is(serviceTaskLike, 'bpmn:MessageEventDefinition')) {
+    // only allow on throw and end events
+    return (
+      getParent(parent, 'bpmn:IntermediateThrowEvent') ||
+      getParent(parent, 'bpmn:EndEvent')
+    );
+  }
+
+  return true;
+};
+
+CamundaModdleExtension.prototype.canHostIn = function (parent) {
+  const callActivity = getParent(parent, 'bpmn:CallActivity');
+
+  if (callActivity) {
+    return true;
+  }
+
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition');
+
+  if (signalEventDefinition) {
+    // only allow on throw and end events
+    return (
+      getParent(parent, 'bpmn:IntermediateThrowEvent') ||
+      getParent(parent, 'bpmn:EndEvent')
+    );
+  }
+
+  return true;
+};
+
+// module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension;
+
+// helpers //////////
+
+function is(element, type) {
+  return (
+    element && isFunction(element.$instanceOf) && element.$instanceOf(type)
+  );
+}
+
+function isAny(element, types) {
+  return types.some((t) => {
+    return is(element, t);
+  });
+}
+
+function getParent(element, type) {
+  if (!type) {
+    return element.$parent;
+  }
+
+  if (is(element, type)) {
+    return element;
+  }
+
+  if (!element.$parent) {
+    return;
+  }
+
+  return getParent(element.$parent, type);
+}
+
+function isAllowedInParent(property, parent) {
+  // (1) find property descriptor
+  const descriptor =
+    property.$type && property.$model.getTypeDescriptor(property.$type);
+
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
+
+  if (!allowedIn || isWildcard(allowedIn)) {
+    return true;
+  }
+
+  // (2) check wether property has parent of allowed type
+  return allowedIn.some((type) => {
+    return getParent(parent, type);
+  });
+}
+
+function isWildcard(allowedIn) {
+  return allowedIn.includes(WILDCARD);
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
new file mode 100644
index 000000000..f20d5eb8e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
@@ -0,0 +1,6 @@
+import extension from './extension';
+
+export default {
+  __init__: ['camundaModdleExtension'],
+  camundaModdleExtension: ['type', extension],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
new file mode 100644
index 000000000..25fa1cc8e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
@@ -0,0 +1,94 @@
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity',
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+};
+
+function is(element, type) {
+  return (
+    element &&
+    typeof element.$instanceOf === 'function' &&
+    element.$instanceOf(type)
+  );
+}
+
+function exists(element) {
+  return element && element.length > 0;
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    collection.some((element) => {
+      return is(element, type);
+    })
+  );
+}
+
+function anyType(element, types) {
+  return types.some((type) => {
+    return is(element, type);
+  });
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name;
+  const types = ALLOWED_TYPES[name.replace(/flowable:/, '')];
+
+  return name === propName && anyType(newElement, types);
+}
+
+function FlowableModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement;
+      const propDescriptor = context.propertyDescriptor;
+
+      this.canCloneProperty(newElement, propDescriptor);
+    },
+    this,
+  );
+}
+
+FlowableModdleExtension.$inject = ['eventBus'];
+
+FlowableModdleExtension.prototype.canCloneProperty = function (
+  newElement,
+  propDescriptor,
+) {
+  if (
+    isAllowed('flowable:FailedJobRetryTimeCycle', propDescriptor, newElement)
+  ) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(
+        newElement.loopCharacteristics,
+        'bpmn:MultiInstanceLoopCharacteristics',
+      )
+    );
+  }
+
+  if (isAllowed('flowable:Connector', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+
+  if (isAllowed('flowable:Field', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+};
+
+// module.exports = FlowableModdleExtension;
+export default FlowableModdleExtension;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
new file mode 100644
index 000000000..86474675b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
@@ -0,0 +1,10 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+import flowableExtension from './flowableExtension';
+
+export default {
+  __init__: ['FlowableModdleExtension'],
+  FlowableModdleExtension: ['type', flowableExtension],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
new file mode 100644
index 000000000..75b491ccb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
@@ -0,0 +1,234 @@
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
+
+export default function CustomPalette(
+  palette,
+  create,
+  elementFactory,
+  spaceTool,
+  lassoTool,
+  handTool,
+  globalConnect,
+  translate,
+) {
+  PaletteProvider.call(
+    this,
+    palette,
+    create,
+    elementFactory,
+    spaceTool,
+    lassoTool,
+    handTool,
+    globalConnect,
+    translate,
+    2000,
+  );
+}
+
+const F = function () {}; // 核心，利用空对象作为中介；
+F.prototype = PaletteProvider.prototype; // 核心，将父类的原型赋值给空对象F；
+
+// 利用中介函数重写原型链方法
+F.prototype.getPaletteEntries = function () {
+  const actions = {};
+  const create = this._create;
+  const elementFactory = this._elementFactory;
+  const spaceTool = this._spaceTool;
+  const lassoTool = this._lassoTool;
+  const handTool = this._handTool;
+  const globalConnect = this._globalConnect;
+  const translate = this._translate;
+
+  function createAction(type, group, className, title, options) {
+    function createListener(event) {
+      const shape = Object.assign(
+        elementFactory.createShape({ type }, options),
+      );
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+
+      create.start(event, shape);
+    }
+
+    const shortType = type.replace(/^bpmn:/, '');
+
+    return {
+      group,
+      className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener,
+      },
+    };
+  }
+
+  function createSubprocess(event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true,
+    });
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess,
+    });
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent],
+      },
+    });
+  }
+
+  function createParticipant(event) {
+    create.start(event, elementFactory.createParticipantShape());
+  }
+
+  Object.assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: '激活抓手工具',
+      // title: translate("Activate the hand tool"),
+      action: {
+        click(event) {
+          handTool.activateHand(event);
+        },
+      },
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click(event) {
+          lassoTool.activateSelection(event);
+        },
+      },
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click(event) {
+          spaceTool.activateSelection(event);
+        },
+      },
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click(event) {
+          globalConnect.toggle(event);
+        },
+      },
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true,
+    },
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      translate('Create StartEvent'),
+    ),
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent',
+      'event',
+      'bpmn-icon-intermediate-event-none',
+      translate('Create Intermediate/Boundary Event'),
+    ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      translate('Create EndEvent'),
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-none',
+      translate('Create Gateway'),
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      translate('Create User Task'),
+    ),
+    'create.call-activity': createAction(
+      'bpmn:CallActivity',
+      'activity',
+      'bpmn-icon-call-activity',
+      translate('Create Call Activity'),
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task'),
+    ),
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference',
+      'data-object',
+      'bpmn-icon-data-object',
+      translate('Create DataObjectReference'),
+    ),
+    'create.data-store': createAction(
+      'bpmn:DataStoreReference',
+      'data-store',
+      'bpmn-icon-data-store',
+      translate('Create DataStoreReference'),
+    ),
+    'create.subprocess-expanded': {
+      group: 'activity',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: translate('Create expanded SubProcess'),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess,
+      },
+    },
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: translate('Create Pool/Participant'),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant,
+      },
+    },
+    'create.group': createAction(
+      'bpmn:Group',
+      'artifact',
+      'bpmn-icon-group',
+      translate('Create Group'),
+    ),
+  });
+
+  return actions;
+};
+
+CustomPalette.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate',
+];
+
+CustomPalette.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomPalette.prototype.constructor = CustomPalette; // 修复子类CustomPalette的构造器指向，防止原型链的混乱；
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
new file mode 100644
index 000000000..afe1367c8
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
@@ -0,0 +1,22 @@
+// import PaletteModule from "diagram-js/lib/features/palette";
+// import CreateModule from "diagram-js/lib/features/create";
+// import SpaceToolModule from "diagram-js/lib/features/space-tool";
+// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
+// import HandToolModule from "diagram-js/lib/features/hand-tool";
+// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
+// import translate from "diagram-js/lib/i18n/translate";
+//
+// import PaletteProvider from "./paletteProvider";
+//
+// export default {
+//   __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
+//   __init__: ["paletteProvider"],
+//   paletteProvider: ["type", PaletteProvider]
+// };
+
+import CustomPalette from './CustomPalette';
+
+export default {
+  __init__: ['paletteProvider'],
+  paletteProvider: ['type', CustomPalette],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
new file mode 100644
index 000000000..70a27a9a6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
@@ -0,0 +1,219 @@
+/**
+ * A palette provider for BPMN 2.0 elements.
+ */
+export default function PaletteProvider(
+  palette,
+  create,
+  elementFactory,
+  spaceTool,
+  lassoTool,
+  handTool,
+  globalConnect,
+  translate,
+) {
+  this._palette = palette;
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._spaceTool = spaceTool;
+  this._lassoTool = lassoTool;
+  this._handTool = handTool;
+  this._globalConnect = globalConnect;
+  this._translate = translate;
+
+  palette.registerProvider(this);
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate',
+];
+
+PaletteProvider.prototype.getPaletteEntries = function () {
+  const actions = {};
+  const create = this._create;
+  const elementFactory = this._elementFactory;
+  const spaceTool = this._spaceTool;
+  const lassoTool = this._lassoTool;
+  const handTool = this._handTool;
+  const globalConnect = this._globalConnect;
+  const translate = this._translate;
+
+  function createAction(type, group, className, title, options) {
+    function createListener(event) {
+      const shape = elementFactory.createShape(
+        Object.assign({ type }, options),
+      );
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+
+      create.start(event, shape);
+    }
+
+    const shortType = type.replace(/^bpmn:/, '');
+
+    return {
+      group,
+      className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener,
+      },
+    };
+  }
+
+  function createSubprocess(event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true,
+    });
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess,
+    });
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent],
+      },
+    });
+  }
+
+  function createParticipant(event) {
+    create.start(event, elementFactory.createParticipantShape());
+  }
+
+  Object.assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: translate('Activate the hand tool'),
+      action: {
+        click(event) {
+          handTool.activateHand(event);
+        },
+      },
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click(event) {
+          lassoTool.activateSelection(event);
+        },
+      },
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click(event) {
+          spaceTool.activateSelection(event);
+        },
+      },
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click(event) {
+          globalConnect.toggle(event);
+        },
+      },
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true,
+    },
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      translate('Create StartEvent'),
+    ),
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent',
+      'event',
+      'bpmn-icon-intermediate-event-none',
+      translate('Create Intermediate/Boundary Event'),
+    ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      translate('Create EndEvent'),
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-none',
+      translate('Create Gateway'),
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      translate('Create User Task'),
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task'),
+    ),
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference',
+      'data-object',
+      'bpmn-icon-data-object',
+      translate('Create DataObjectReference'),
+    ),
+    'create.data-store': createAction(
+      'bpmn:DataStoreReference',
+      'data-store',
+      'bpmn-icon-data-store',
+      translate('Create DataStoreReference'),
+    ),
+    'create.subprocess-expanded': {
+      group: 'activity',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: translate('Create expanded SubProcess'),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess,
+      },
+    },
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: translate('Create Pool/Participant'),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant,
+      },
+    },
+    'create.group': createAction(
+      'bpmn:Group',
+      'artifact',
+      'bpmn-icon-group',
+      translate('Create Group'),
+    ),
+  });
+
+  return actions;
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
new file mode 100644
index 000000000..cc6ad6e9a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
@@ -0,0 +1,44 @@
+// import translations from "./zh";
+//
+// export default function customTranslate(template, replacements) {
+//   replacements = replacements || {};
+//
+//   // Translate
+//   template = translations[template] || template;
+//
+//   // Replace
+//   return template.replace(/{([^}]+)}/g, function(_, key) {
+//     let str = replacements[key];
+//     if (
+//       translations[replacements[key]] !== null &&
+//       translations[replacements[key]] !== "undefined"
+//     ) {
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//       str = translations[replacements[key]];
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//     }
+//     return str || "{" + key + "}";
+//   });
+// }
+
+export default function customTranslate(translations) {
+  return function (template, replacements) {
+    replacements = replacements || {};
+    // 将模板和翻译字典的键统一转换为小写进行匹配
+    const lowerTemplate = template.toLowerCase();
+    const translation = Object.keys(translations).find(
+      (key) => key.toLowerCase() === lowerTemplate,
+    );
+
+    // 如果找到匹配的翻译，使用翻译后的模板
+    if (translation) {
+      template = translations[translation];
+    }
+
+    // 替换模板中的占位符
+    return template.replaceAll(/\{([^}]+)\}/g, (_, key) => {
+      // 如果替换值存在，返回替换值；否则返回原始占位符
+      return replacements[key] === undefined ? `{${key}}` : replacements[key];
+    });
+  };
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
new file mode 100644
index 000000000..4d25da7f5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
@@ -0,0 +1,256 @@
+/* eslint-disable no-template-curly-in-string */
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  // 添加部分
+  'Append EndEvent': '追加结束事件',
+  'Append Gateway': '追加网关',
+  'Append Task': '追加任务',
+  'Append Intermediate/Boundary Event': '追加中间抛出事件/边界事件',
+  TextAnnotation: '文本注释',
+  'Activate the global connect tool': '激活全局连接工具',
+  'Append {type}': '添加 {type}',
+  'Add Lane above': '在上面添加道',
+  'Divide into two Lanes': '分割成两个道',
+  'Divide into three Lanes': '分割成三个道',
+  'Add Lane below': '在下面添加道',
+  'Append compensation activity': '追加补偿活动',
+  'Change type': '修改类型',
+  'Connect using Association': '使用关联连接',
+  'Connect using Sequence/MessageFlow or Association':
+    '使用顺序/消息流或者关联连接',
+  'Connect using DataInputAssociation': '使用数据输入关联连接',
+  Remove: '移除',
+  'Activate the hand tool': '激活抓手工具',
+  'Activate the lasso tool': '激活套索工具',
+  'Activate the create/remove space tool': '激活创建/删除空间工具',
+  'Create expanded SubProcess': '创建扩展子过程',
+  'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Participant Multiplicity': '参与者多重性',
+  'Empty pool/participant (removes content)': '清空池/参与者（移除内容）',
+  'Empty pool/participant': '收缩池/参与者',
+  'Expanded pool/participant': '展开池/参与者',
+  'Parallel Multi-Instance': '并行多重事件',
+  'Sequential Multi-Instance': '时序多重事件',
+  DataObjectReference: '数据对象参考',
+  DataStoreReference: '数据存储参考',
+  'Data object reference': '数据对象引用 ',
+  'Data store reference': '数据存储引用 ',
+  Loop: '循环',
+  'Ad-hoc': '即席',
+  'Create {type}': '创建 {type}',
+  Task: '任务',
+  'Send Task': '发送任务',
+  'Receive Task': '接收任务',
+  'User Task': '用户任务',
+  'Manual Task': '手工任务',
+  'Business Rule Task': '业务规则任务',
+  'Service Task': '服务任务',
+  'Script Task': '脚本任务',
+  'Call Activity': '调用活动',
+  'Sub-Process (collapsed)': '子流程（折叠的）',
+  'Sub-Process (expanded)': '子流程（展开的）',
+  'Ad-hoc sub-process': '即席子流程',
+  'Ad-hoc sub-process (collapsed)': '即席子流程（折叠的）',
+  'Ad-hoc sub-process (expanded)': '即席子流程（展开的）',
+  'Start Event': '开始事件',
+  StartEvent: '开始事件',
+  'Intermediate Throw Event': '中间事件',
+  'End Event': '结束事件',
+  EndEvent: '结束事件',
+  'Create StartEvent': '创建开始事件',
+  'Create EndEvent': '创建结束事件',
+  'Create Task': '创建任务',
+  'Create User Task': '创建用户任务',
+  'Create Call Activity': '创建调用活动',
+  'Create Service Task': '创建服务任务',
+  'Create Gateway': '创建网关',
+  'Create DataObjectReference': '创建数据对象',
+  'Create DataStoreReference': '创建数据存储',
+  'Create Group': '创建分组',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  'Message Start Event': '消息开始事件',
+  'Timer Start Event': '定时开始事件',
+  'Conditional Start Event': '条件开始事件',
+  'Signal Start Event': '信号开始事件',
+  'Error Start Event': '错误开始事件',
+  'Escalation Start Event': '升级开始事件',
+  'Compensation Start Event': '补偿开始事件',
+  'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
+  'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
+  'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
+  'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
+  'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
+  'Message Intermediate Catch Event': '消息中间捕获事件',
+  'Message Intermediate Throw Event': '消息中间抛出事件',
+  'Timer Intermediate Catch Event': '定时中间捕获事件',
+  'Escalation Intermediate Throw Event': '升级中间抛出事件',
+  'Conditional Intermediate Catch Event': '条件中间捕获事件',
+  'Link Intermediate Catch Event': '链接中间捕获事件',
+  'Link Intermediate Throw Event': '链接中间抛出事件',
+  'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+  'Signal Intermediate Catch Event': '信号中间捕获事件',
+  'Signal Intermediate Throw Event': '信号中间抛出事件',
+  'Message End Event': '消息结束事件',
+  'Escalation End Event': '定时结束事件',
+  'Error End Event': '错误结束事件',
+  'Cancel End Event': '取消结束事件',
+  'Compensation End Event': '补偿结束事件',
+  'Signal End Event': '信号结束事件',
+  'Terminate End Event': '终止结束事件',
+  'Message Boundary Event': '消息边界事件',
+  'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+  'Error Boundary Event': '错误边界事件',
+  'Cancel Boundary Event': '取消边界事件',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Exclusive Gateway': '互斥网关',
+  'Parallel Gateway': '并行网关',
+  'Inclusive Gateway': '相容网关',
+  'Complex Gateway': '复杂网关',
+  'Event-based Gateway': '事件网关',
+  Transaction: '转运',
+  'sub-process': '子流程',
+  'Event sub-process': '事件子流程',
+  'Collapsed Pool': '折叠池',
+  'Expanded Pool': '展开池',
+
+  // Errors
+  'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+  'no shape type specified': '没有指定的形状类型',
+  'flow elements must be children of pools/participants':
+    '流元素必须是池/参与者的子类',
+  'out of bounds release': 'out of bounds release',
+  'more than {count} child lanes': '子道大于{count} ',
+  'element required': '元素不能为空',
+  'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+  'no diagram to display': '没有可展示的流程图',
+  'no process or collaboration to display': '没有可展示的流程/协作',
+  'element {element} referenced by {referenced}#{property} not yet drawn':
+    '由{referenced}#{property}引用的{element}元素仍未绘制',
+  'already rendered {element}': '{element} 已被渲染',
+  'failed to import {element}': '导入{element}失败',
+  // 属性面板的参数
+  Id: '编号',
+  Name: '名称',
+  General: '常规',
+  Details: '详情',
+  'Message Name': '消息名称',
+  Message: '消息',
+  Initiator: '创建者',
+  'Asynchronous Continuations': '持续异步',
+  'Asynchronous Before': '异步前',
+  'Asynchronous After': '异步后',
+  'Job Configuration': '工作配置',
+  Exclusive: '排除',
+  'Job Priority': '工作优先级',
+  'Retry Time Cycle': '重试时间周期',
+  Documentation: '文档',
+  'Element Documentation': '元素文档',
+  'History Configuration': '历史配置',
+  'History Time To Live': '历史的生存时间',
+  Forms: '表单',
+  'Form Key': '表单key',
+  'Form Fields': '表单字段',
+  'Business Key': '业务key',
+  'Form Field': '表单字段',
+  ID: '编号',
+  Type: '类型',
+  Label: '名称',
+  'Default Value': '默认值',
+  'Default Flow': '默认流转路径',
+  'Conditional Flow': '条件流转路径',
+  'Sequence Flow': '普通流转路径',
+  Validation: '校验',
+  'Add Constraint': '添加约束',
+  Config: '配置',
+  Properties: '属性',
+  'Add Property': '添加属性',
+  Value: '值',
+  Listeners: '监听器',
+  'Execution Listener': '执行监听',
+  'Event Type': '事件类型',
+  'Listener Type': '监听器类型',
+  'Java Class': 'Java类',
+  Expression: '表达式',
+  'Must provide a value': '必须提供一个值',
+  'Delegate Expression': '代理表达式',
+  Script: '脚本',
+  'Script Format': '脚本格式',
+  'Script Type': '脚本类型',
+  'Inline Script': '内联脚本',
+  'External Script': '外部脚本',
+  Resource: '资源',
+  'Field Injection': '字段注入',
+  Extensions: '扩展',
+  'Input/Output': '输入/输出',
+  'Input Parameters': '输入参数',
+  'Output Parameters': '输出参数',
+  Parameters: '参数',
+  'Output Parameter': '输出参数',
+  'Timer Definition Type': '定时器定义类型',
+  'Timer Definition': '定时器定义',
+  Date: '日期',
+  Duration: '持续',
+  Cycle: '循环',
+  Signal: '信号',
+  'Signal Name': '信号名称',
+  Escalation: '升级',
+  Error: '错误',
+  'Link Name': '链接名称',
+  Condition: '条件名称',
+  'Variable Name': '变量名称',
+  'Variable Event': '变量事件',
+  'Specify more than one variable change event as a comma separated list.':
+    '多个变量事件以逗号隔开',
+  'Wait for Completion': '等待完成',
+  'Activity Ref': '活动参考',
+  'Version Tag': '版本标签',
+  Executable: '可执行文件',
+  'External Task Configuration': '扩展任务配置',
+  'Task Priority': '任务优先级',
+  External: '外部',
+  Connector: '连接器',
+  'Must configure Connector': '必须配置连接器',
+  'Connector Id': '连接器编号',
+  Implementation: '实现方式',
+  'Field Injections': '字段注入',
+  Fields: '字段',
+  'Result Variable': '结果变量',
+  Topic: '主题',
+  'Configure Connector': '配置连接器',
+  'Input Parameter': '输入参数',
+  Assignee: '代理人',
+  'Candidate Users': '候选用户',
+  'Candidate Groups': '候选组',
+  'Due Date': '到期时间',
+  'Follow Up Date': '跟踪日期',
+  Priority: '优先级',
+  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
+    '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
+    '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  Variables: '变量',
+  'Candidate Starter Configuration': '候选人起动器配置',
+  'Candidate Starter Groups': '候选人起动器组',
+  'This maps to the process definition key.': '这映射到流程定义键。',
+  'Candidate Starter Users': '候选人起动器的用户',
+  'Specify more than one user as a comma separated list.':
+    '指定多个用户作为逗号分隔的列表。',
+  'Tasklist Configuration': 'Tasklist配置',
+  Startable: '启动',
+  'Specify more than one group as a comma separated list.':
+    '指定多个组作为逗号分隔的列表。',
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts
new file mode 100644
index 000000000..483d5fb4d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts
@@ -0,0 +1,11 @@
+import './theme/index.scss';
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+// TODO @puhui999：样式问题：设计器那，位置不太对；
+
+export { default as MyProcessDesigner } from './designer';
+// TODO @puhui999：流程发起时，预览相关的，需要使用；
+export { default as MyProcessViewer } from './designer/index2';
+export { default as MyProcessPenal } from './penal';
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
new file mode 100644
index 000000000..6d0ac704b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ElButton } from 'element-plus';
+
+defineOptions({ name: 'MyProcessPalette' });
+
+const bpmnInstances = () =>
+  (window as typeof window & { bpmnInstances?: any }).bpmnInstances;
+const addTask = (event: MouseEvent, options: any = {}) => {
+  const ElementFactory = bpmnInstances().elementFactory;
+  const create = bpmnInstances().modeler.get('create');
+
+  const shape = ElementFactory.createShape(
+    Object.assign({ type: 'bpmn:UserTask' }, options),
+  );
+
+  if (options) {
+    shape.businessObject.di.isExpanded = options.isExpanded;
+  }
+  create.start(event, shape);
+};
+</script>
+
+<template>
+  <div class="my-process-palette p-20 pt-80">
+    <ElButton type="primary" @click="addTask" @mousedown="addTask">
+      测试任务
+    </ElButton>
+    <div class="mt-4" id="palette-container">1</div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
new file mode 100644
index 000000000..5e482c870
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
@@ -0,0 +1,399 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { ElCollapse, ElCollapseItem } from 'element-plus';
+
+import ElementCustomConfig from '#/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue';
+import ElementForm from '#/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue';
+
+import ElementBaseInfo from './base/ElementBaseInfo.vue';
+import FlowCondition from './flow-condition/FlowCondition.vue';
+import ElementListeners from './listeners/ElementListeners.vue';
+// import ElementForm from './form/ElementForm.vue'
+import UserTaskListeners from './listeners/UserTaskListeners.vue';
+import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue';
+import ElementOtherConfig from './other/ElementOtherConfig.vue';
+import ElementProperties from './properties/ElementProperties.vue';
+import SignalAndMassage from './signal-message/SignalAndMessage.vue';
+import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data';
+import ElementTask from './task/ElementTask.vue';
+import TimeEventConfig from './time-event-config/TimeEventConfig.vue';
+
+defineOptions({ name: 'MyPropertiesPanel' });
+
+/**
+ * 侧边栏
+ * @Author MiyueFE
+ * @Home https://github.com/miyuesc
+ * @Date 2021年3月31日18:57:51
+ */
+const props = defineProps({
+  bpmnModeler: {
+    type: Object,
+    default: () => ({}),
+  },
+  prefix: {
+    type: String,
+    default: 'camunda',
+  },
+  width: {
+    type: Number,
+    default: 480,
+  },
+  idEditDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+  model: {
+    type: Object,
+    default: () => ({}),
+  }, // 流程模型的数据
+});
+
+const activeTab = ref('base');
+const elementId = ref('');
+const elementType = ref<any>('');
+const elementBusinessObject = ref<any>({}); // 元素 businessObject 镜像，提供给需要做判断的组件使用
+const conditionFormVisible = ref(false); // 流转条件设置
+const formVisible = ref(false); // 表单配置
+const bpmnElement = ref();
+const isReady = ref(false);
+
+const type = ref('time');
+const condition = ref('');
+provide('prefix', props.prefix);
+provide('width', props.width);
+
+// 初始化 bpmnInstances
+const initBpmnInstances = () => {
+  if (!props.bpmnModeler) return false;
+  try {
+    const instances = {
+      modeler: props.bpmnModeler,
+      modeling: props.bpmnModeler.get('modeling'),
+      moddle: props.bpmnModeler.get('moddle'),
+      eventBus: props.bpmnModeler.get('eventBus'),
+      bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
+      elementFactory: props.bpmnModeler.get('elementFactory'),
+      elementRegistry: props.bpmnModeler.get('elementRegistry'),
+      replace: props.bpmnModeler.get('replace'),
+      selection: props.bpmnModeler.get('selection'),
+    };
+
+    // 检查所有实例是否都存在
+    const allInstancesExist = Object.values(instances).every(Boolean);
+    if (allInstancesExist) {
+      const w = window as any;
+      w.bpmnInstances = instances;
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('初始化 bpmnInstances 失败:', error);
+    return false;
+  }
+};
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// 监听 props.bpmnModeler 然后 initModels
+watch(
+  () => props.bpmnModeler,
+  async () => {
+    // 避免加载时 流程图 并未加载完成
+    if (!props.bpmnModeler) {
+      // console.log('缺少props.bpmnModeler');
+      return;
+    }
+
+    try {
+      // 等待 modeler 初始化完成
+      await nextTick();
+      if (initBpmnInstances()) {
+        isReady.value = true;
+        await nextTick();
+        getActiveElement();
+      } else {
+        console.error('modeler 实例未完全初始化');
+      }
+    } catch (error) {
+      console.error('初始化失败:', error);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const getActiveElement = () => {
+  if (!isReady.value || !props.bpmnModeler) return;
+
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null);
+  props.bpmnModeler.on('import.done', (_: any) => {
+    // console.log(e, 'eeeee');
+    initFormOnChanged(null);
+  });
+  // 监听选择事件，修改当前激活的元素以及表单
+  props.bpmnModeler.on(
+    'selection.changed',
+    ({ newSelection }: { newSelection: any }) => {
+      initFormOnChanged(newSelection[0] || null);
+    },
+  );
+  props.bpmnModeler.on('element.changed', ({ element }: { element: any }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element);
+    }
+  });
+};
+
+// 初始化数据
+const initFormOnChanged = (element: any) => {
+  if (!isReady.value || !bpmnInstances()) return;
+
+  let activatedElement = element;
+  if (!activatedElement) {
+    activatedElement =
+      bpmnInstances().elementRegistry.find(
+        (el: any) => el.type === 'bpmn:Process',
+      ) ??
+      bpmnInstances().elementRegistry.find(
+        (el: any) => el.type === 'bpmn:Collaboration',
+      );
+  }
+  if (!activatedElement) return;
+
+  try {
+    // console.log(`
+    //             ----------
+    //     select element changed:
+    //               id:  ${activatedElement.id}
+    //             type:  ${activatedElement.businessObject.$type}
+    //             ----------
+    //             `);
+    // console.log('businessObject:', activatedElement.businessObject);
+    bpmnInstances().bpmnElement = activatedElement;
+    bpmnElement.value = activatedElement;
+    elementId.value = activatedElement.id;
+    elementType.value = activatedElement.type.split(':')[1] || '';
+    elementBusinessObject.value = cloneDeep(activatedElement.businessObject);
+    conditionFormVisible.value =
+      elementType.value === 'SequenceFlow' &&
+      activatedElement.source &&
+      !(activatedElement.source.type as string).includes('StartEvent');
+    formVisible.value =
+      elementType.value === 'UserTask' || elementType.value === 'StartEvent';
+  } catch (error) {
+    console.error('初始化表单数据失败:', error);
+  }
+};
+
+onBeforeUnmount(() => {
+  const w = window as any;
+  w.bpmnInstances = null;
+  isReady.value = false;
+});
+
+watch(
+  () => elementId.value,
+  () => {
+    activeTab.value = 'base';
+  },
+);
+//
+// function updateNode() {
+//   const moddle = window.bpmnInstances?.moddle;
+//   const modeling = window.bpmnInstances?.modeling;
+//   const elementRegistry = window.bpmnInstances?.elementRegistry;
+//   if (!moddle || !modeling || !elementRegistry) return;
+//
+//   const element = elementRegistry.get(props.businessObject.id);
+//   if (!element) return;
+//
+//   const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
+//   switch (type.value) {
+//     case 'cycle': {
+//       timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     case 'duration': {
+//       timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     case 'time': {
+//       timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     // No default
+//   }
+//
+//   modeling.updateModdleProperties(element, element.businessObject, {
+//     eventDefinitions: [timerDef],
+//   });
+// }
+
+// 初始化和监听
+function syncFromBusinessObject() {
+  if (props.businessObject) {
+    const timerDef = (props.businessObject.eventDefinitions || [])[0];
+    if (timerDef) {
+      if (timerDef.timeDate) {
+        type.value = 'time';
+        condition.value = timerDef.timeDate.body;
+      } else if (timerDef.timeDuration) {
+        type.value = 'duration';
+        condition.value = timerDef.timeDuration.body;
+      } else if (timerDef.timeCycle) {
+        type.value = 'cycle';
+        condition.value = timerDef.timeCycle.body;
+      }
+    }
+  }
+}
+onMounted(syncFromBusinessObject);
+watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
+</script>
+<template>
+  <div
+    class="process-panel__container"
+    :style="{ width: `${width}px`, maxHeight: '600px' }"
+  >
+    <ElCollapse v-model="activeTab" v-if="isReady">
+      <ElCollapseItem name="base" title="常规">
+        <template #icon>
+          <IconifyIcon icon="ep:info-filled" />
+        </template>
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="message"
+        title="消息与信号"
+        v-if="elementType === 'Process'"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:comment" />
+        </template>
+        <SignalAndMassage />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="condition"
+        title="流转条件"
+        v-if="conditionFormVisible"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:promotion" />
+        </template>
+        <FlowCondition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </ElCollapseItem>
+      <ElCollapseItem name="form" title="表单" v-if="formVisible">
+        <template #icon>
+          <IconifyIcon icon="ep:list" />
+        </template>
+        <ElementForm :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="task"
+        :title="getTaskCollapseItemName(elementType)"
+        v-if="isTaskCollapseItemShow(elementType)"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:checked" />
+        </template>
+        <ElementTask :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="multiInstance"
+        title="多人审批方式"
+        v-if="elementType.includes('Task')"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:help-filled" />
+        </template>
+        <ElementMultiInstance
+          :id="elementId"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </ElCollapseItem>
+      <ElCollapseItem name="listeners" title="执行监听器">
+        <template #icon>
+          <IconifyIcon icon="ep:bell-filled" />
+        </template>
+        <ElementListeners :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="taskListeners"
+        title="任务监听器"
+        v-if="elementType === 'UserTask'"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:bell-filled" />
+        </template>
+        <UserTaskListeners :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem name="extensions" title="扩展属性">
+        <template #icon>
+          <IconifyIcon icon="ep:circle-plus-filled" />
+        </template>
+        <ElementProperties :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem name="other" title="其他">
+        <template #icon>
+          <IconifyIcon icon="ep:promotion" />
+        </template>
+        <ElementOtherConfig :id="elementId" />
+      </ElCollapseItem>
+      <ElCollapseItem name="customConfig" title="自定义配置">
+        <template #icon>
+          <IconifyIcon icon="ep:tools" />
+        </template>
+        <ElementCustomConfig
+          :id="elementId"
+          :type="elementType"
+          :business-object="elementBusinessObject"
+        />
+      </ElCollapseItem>
+      <!-- 新增的时间事件配置项 -->
+      <ElCollapseItem
+        name="timeEvent"
+        title="时间事件"
+        v-if="elementType === 'IntermediateCatchEvent'"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:timer" />
+        </template>
+        <!-- 相关 issue：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICNRW2 -->
+        <TimeEventConfig
+          :business-object="elementBusinessObject"
+          :key="elementId"
+        />
+      </ElCollapseItem>
+    </ElCollapse>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 000000000..3887645ce
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, reactive, ref, toRaw, watch } from 'vue';
+
+import { ElForm, ElFormItem, ElInput } from 'element-plus';
+
+defineOptions({ name: 'ElementBaseInfo' });
+
+const props = defineProps<{
+  businessObject?: BusinessObject;
+  model?: Model;
+}>();
+
+interface BusinessObject {
+  id?: string;
+  name?: string;
+  $type: string;
+  [key: string]: any;
+}
+
+interface Model {
+  key?: string;
+  name?: string;
+  [key: string]: any;
+}
+
+const needProps = ref<Record<string, any>>({});
+const bpmnElement = ref<any>();
+const elementBaseInfo = ref<BusinessObject>({} as any);
+// 流程表单的下拉框的数据
+// const forms = ref([])
+// 流程模型的校验
+const rules = reactive<any>({
+  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+});
+
+const bpmnInstances = () =>
+  (window as any)?.bpmnInstances as {
+    bpmnElement: any;
+    modeling: {
+      updateProperties: (element: any, properties: any) => void;
+    };
+  };
+const resetBaseInfo = () => {
+  // console.log(window, 'window');
+  // console.log(bpmnElement.value, 'bpmnElement');
+
+  bpmnElement.value = bpmnInstances()?.bpmnElement;
+  // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+  if (bpmnElement.value?.businessObject) {
+    elementBaseInfo.value = bpmnElement.value.businessObject;
+    needProps.value.type = bpmnElement.value.businessObject.$type;
+  }
+  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
+
+  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
+  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
+};
+const handleKeyUpdate = (value: any) => {
+  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+  if (!value) {
+    return;
+  }
+  if (!/[a-z_][-\w.$]*/i.test(value)) {
+    // console.log('key 不满足 XML NCName 规则，所以不进行赋值');
+    return;
+  }
+  // console.log('key 满足 XML NCName 规则，所以进行赋值');
+
+  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.id = value;
+  }
+
+  setTimeout(() => {
+    updateBaseInfo('id');
+  }, 100);
+};
+
+const handleNameUpdate = (value: any) => {
+  // console.log(elementBaseInfo, 'elementBaseInfo');
+  if (!value) {
+    return;
+  }
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.name = value;
+  }
+
+  setTimeout(() => {
+    updateBaseInfo('name');
+  }, 100);
+};
+// const handleDescriptionUpdate=(value)=> {
+// TODO 芋艿：documentation 暂时无法修改，后续在看看
+// this.elementBaseInfo['documentation'] = value;
+// this.updateBaseInfo('documentation');
+// }
+const updateBaseInfo = (key: string) => {
+  // console.log(key, 'key');
+  // 触发 elementBaseInfo 对应的字段
+  const attrObj: Record<string, any> = Object.create(null);
+
+  // 安全检查
+  if (!elementBaseInfo.value || !bpmnElement.value) {
+    return;
+  }
+
+  // console.log(attrObj, 'attrObj')
+  attrObj[key] = elementBaseInfo.value[key];
+  // console.log(attrObj, 'attrObj111')
+  // const attrObj = {
+  //   id: elementBaseInfo.value[key]
+  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
+  // }
+  // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+  needProps.value = { ...elementBaseInfo.value, ...needProps.value };
+
+  if (key === 'id') {
+    // console.log('jinru')
+    // console.log(window, 'window');
+    // console.log(bpmnElement.value, 'bpmnElement');
+    // console.log(toRaw(bpmnElement.value), 'bpmnElement');
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` },
+    });
+  } else {
+    // console.log(attrObj, 'attrObj');
+    bpmnInstances().modeling.updateProperties(
+      toRaw(bpmnElement.value),
+      attrObj,
+    );
+  }
+};
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    // console.log(val, 'val11111111111111111111')
+    if (val) {
+      // nextTick(() => {
+      resetBaseInfo();
+      // })
+    }
+  },
+);
+
+watch(
+  () => props.model?.key,
+  (val) => {
+    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
+    if (val) {
+      handleKeyUpdate(props.model?.key as any);
+      handleNameUpdate(props.model?.name as any);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+// watch(
+//   () => ({ ...props }),
+//   (oldVal, newVal) => {
+//     console.log(oldVal, 'oldVal')
+//     console.log(newVal, 'newVal')
+//     if (newVal) {
+//       needProps.value = newVal
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+// 'model.key': {
+//   immediate: false,
+//   handler: function (val) {
+//     this.handleKeyUpdate(val)
+//   }
+// }
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+</script>
+<template>
+  <div class="panel-tab__content">
+    <ElForm :model="needProps" :rules="rules" label-position="top">
+      <div v-if="needProps.type === 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <ElFormItem label="流程标识" prop="id">
+          <ElInput
+            v-model="needProps.id"
+            placeholder="请输入流标标识"
+            :disabled="needProps.id !== undefined && needProps.id.length > 0"
+            @change="handleKeyUpdate"
+          />
+        </ElFormItem>
+        <ElFormItem label="流程名称" prop="name">
+          <ElInput
+            v-model="needProps.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
+        </ElFormItem>
+      </div>
+      <div v-else>
+        <ElFormItem label="ID">
+          <ElInput
+            v-model="elementBaseInfo.id"
+            clearable
+            @change="updateBaseInfo('id')"
+          />
+        </ElFormItem>
+        <ElFormItem label="名称">
+          <ElInput
+            v-model="elementBaseInfo.name"
+            clearable
+            @change="updateBaseInfo('name')"
+          />
+        </ElFormItem>
+      </div>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
new file mode 100644
index 000000000..8c8cc6f11
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import { ref, watch } from 'vue';
+
+import { CustomConfigMap } from './data';
+
+defineOptions({ name: 'ElementCustomConfig' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+  businessObject: {
+    type: Object as () => BusinessObject,
+    default: () => ({}),
+  },
+});
+
+interface BusinessObject {
+  eventDefinitions?: Array<{ $type: string }>;
+  [key: string]: any;
+}
+
+// const bpmnInstances = () => (window as any)?.bpmnInstances;
+const customConfigComponent = ref<Component | null>(null);
+
+watch(
+  () => props.businessObject,
+  () => {
+    if (props.type && props.businessObject) {
+      let val = props.type;
+      if (props.businessObject.eventDefinitions) {
+        val +=
+          props.businessObject.eventDefinitions[0]?.$type.split(':')[1] || '';
+      }
+      // @ts-ignore
+      customConfigComponent.value = (
+        CustomConfigMap as Record<string, { component: Component }>
+      )[val]?.component;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <component :is="customConfigComponent" v-bind="$props" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
new file mode 100644
index 000000000..2a0316489
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -0,0 +1,305 @@
+<script lang="ts" setup>
+import { inject, nextTick, ref, toRaw, watch } from 'vue';
+
+import {
+  ElCol,
+  ElDivider,
+  ElFormItem,
+  ElInputNumber,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSwitch,
+  ElText,
+} from 'element-plus';
+
+import { convertTimeUnit } from '#/views/bpm/components/simple-process-design/components/nodes-config/utils';
+import {
+  TIME_UNIT_TYPES,
+  TIMEOUT_HANDLER_TYPES,
+  TimeUnitType,
+} from '#/views/bpm/components/simple-process-design/consts';
+
+defineOptions({ name: 'ElementCustomConfig4BoundaryEventTimer' });
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+
+const bpmnElement = ref<any>();
+const bpmnInstances = () => (window as Record<string, any>)?.bpmnInstances;
+
+const timeoutHandlerEnable = ref(false);
+const boundaryEventType = ref<any>();
+const timeoutHandlerType = ref<{
+  value: number | undefined;
+}>({
+  value: undefined,
+});
+const timeModdle = ref<any>();
+const timeDuration = ref(6);
+const timeUnit = ref(TimeUnitType.HOUR);
+const maxRemindCount = ref(1);
+
+const elExtensionElements = ref<any>();
+const otherExtensions = ref<any[]>();
+const configExtensions = ref<any[]>([]);
+const eventDefinition = ref<any>();
+
+const resetElement = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+  eventDefinition.value = bpmnElement.value.businessObject.eventDefinitions[0];
+
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+
+  // 是否开启自定义用户任务超时处理
+  boundaryEventType.value = elExtensionElements.value.values?.find(
+    (ex: any) => ex.$type === `${prefix}:BoundaryEventType`,
+  );
+  if (boundaryEventType.value && boundaryEventType.value.value === 1) {
+    timeoutHandlerEnable.value = true;
+    configExtensions.value.push(boundaryEventType.value);
+  }
+
+  // 执行动作
+  timeoutHandlerType.value = elExtensionElements.value.values?.find(
+    (ex: any) => ex.$type === `${prefix}:TimeoutHandlerType`,
+  );
+  if (timeoutHandlerType.value) {
+    configExtensions.value.push(timeoutHandlerType.value);
+    if (eventDefinition.value.timeCycle) {
+      const timeStr = eventDefinition.value.timeCycle.body;
+      const maxRemindCountStr = timeStr.split('/')[0];
+      const timeDurationStr = timeStr.split('/')[1];
+      maxRemindCount.value = Number.parseInt(maxRemindCountStr.slice(1));
+      timeDuration.value = Number.parseInt(timeDurationStr.slice(2, -1));
+      timeUnit.value = convertTimeUnit(timeDurationStr.slice(-1));
+      timeModdle.value = eventDefinition.value.timeCycle;
+    }
+    if (eventDefinition.value.timeDuration) {
+      const timeDurationStr = eventDefinition.value.timeDuration.body;
+      timeDuration.value = Number.parseInt(timeDurationStr.slice(2, -1));
+      timeUnit.value = convertTimeUnit(timeDurationStr.slice(-1));
+      timeModdle.value = eventDefinition.value.timeDuration;
+    }
+  }
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex: any) =>
+        ex.$type !== `${prefix}:BoundaryEventType` &&
+        ex.$type !== `${prefix}:TimeoutHandlerType`,
+    ) ?? [];
+};
+
+const timeoutHandlerChange = (checked: any) => {
+  timeoutHandlerEnable.value = checked;
+  if (checked) {
+    // 启用自定义用户任务超时处理
+    // 边界事件类型 --- 超时
+    boundaryEventType.value = bpmnInstances().moddle.create(
+      `${prefix}:BoundaryEventType`,
+      {
+        value: 1,
+      },
+    );
+    configExtensions.value.push(boundaryEventType.value);
+    // 超时处理类型
+    timeoutHandlerType.value = bpmnInstances().moddle.create(
+      `${prefix}:TimeoutHandlerType`,
+      {
+        value: 1,
+      },
+    );
+    configExtensions.value.push(timeoutHandlerType.value);
+    // 超时时间表达式
+    timeDuration.value = 6;
+    timeUnit.value = 2;
+    maxRemindCount.value = 1;
+    timeModdle.value = bpmnInstances().moddle.create(`bpmn:Expression`, {
+      body: 'PT6H',
+    });
+    eventDefinition.value.timeDuration = timeModdle.value;
+  } else {
+    // 关闭自定义用户任务超时处理
+    configExtensions.value = [];
+    delete eventDefinition.value.timeDuration;
+    delete eventDefinition.value.timeCycle;
+  }
+  updateElementExtensions();
+};
+
+const onTimeoutHandlerTypeChanged = () => {
+  maxRemindCount.value = 1;
+  updateElementExtensions();
+  updateTimeModdle();
+};
+
+const onTimeUnitChange = () => {
+  // 分钟，默认是 60 分钟
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    timeDuration.value = 60;
+  }
+  // 小时，默认是 6 个小时
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    timeDuration.value = 6;
+  }
+  // 天， 默认 1天
+  if (timeUnit.value === TimeUnitType.DAY) {
+    timeDuration.value = 1;
+  }
+  updateTimeModdle();
+  updateElementExtensions();
+};
+
+const updateTimeModdle = () => {
+  if (maxRemindCount.value > 1) {
+    timeModdle.value.body = `R${maxRemindCount.value}/${isoTimeDuration()}`;
+    if (!eventDefinition.value.timeCycle) {
+      delete eventDefinition.value.timeDuration;
+      eventDefinition.value.timeCycle = timeModdle.value;
+    }
+  } else {
+    timeModdle.value.body = isoTimeDuration();
+    if (!eventDefinition.value.timeDuration) {
+      delete eventDefinition.value.timeCycle;
+      eventDefinition.value.timeDuration = timeModdle.value;
+    }
+  }
+};
+
+const isoTimeDuration = () => {
+  let strTimeDuration = 'PT';
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    strTimeDuration += `${timeDuration.value}M`;
+  }
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    strTimeDuration += `${timeDuration.value}H`;
+  }
+  if (timeUnit.value === TimeUnitType.DAY) {
+    strTimeDuration += `${timeDuration.value}D`;
+  }
+  return strTimeDuration;
+};
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [...(otherExtensions.value || []), ...configExtensions.value],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetElement();
+      });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <ElDivider content-position="left">审批人超时未处理时</ElDivider>
+    <ElFormItem label="启用开关" prop="timeoutHandlerEnable">
+      <ElSwitch
+        v-model="timeoutHandlerEnable"
+        active-text="开启"
+        inactive-text="关闭"
+        @change="timeoutHandlerChange"
+      />
+    </ElFormItem>
+    <ElFormItem
+      label="执行动作"
+      prop="timeoutHandlerType"
+      v-if="timeoutHandlerEnable"
+    >
+      <ElRadioGroup
+        v-model="timeoutHandlerType.value"
+        @change="onTimeoutHandlerTypeChanged"
+      >
+        <ElRadioButton
+          v-for="item in TIMEOUT_HANDLER_TYPES"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadioButton>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem label="超时时间设置" v-if="timeoutHandlerEnable">
+      <ElRow :gutter="0">
+        <ElCol :span="6">
+          <ElText class="mr-2 mt-2 inline-flex text-sm"> 当超过 </ElText>
+        </ElCol>
+        <ElCol :span="6">
+          <ElFormItem prop="timeDuration" class="mb-0">
+            <ElInputNumber
+              class="mr-2 mt-0.5"
+              v-model="timeDuration"
+              :min="1"
+              controls-position="right"
+              @change="
+                () => {
+                  updateTimeModdle();
+                  updateElementExtensions();
+                }
+              "
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElSelect
+            v-model="timeUnit"
+            class="mr-2 !w-24"
+            @change="onTimeUnitChange"
+          >
+            <ElOption
+              v-for="item in TIME_UNIT_TYPES"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+          <ElText class="mr-2 mt-2 inline-flex text-sm"> 未处理 </ElText>
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem
+      label="最大提醒次数"
+      prop="maxRemindCount"
+      v-if="timeoutHandlerEnable && timeoutHandlerType.value === 1"
+    >
+      <ElInputNumber
+        v-model="maxRemindCount"
+        :min="1"
+        :max="10"
+        @change="
+          () => {
+            updateTimeModdle();
+            updateElementExtensions();
+          }
+        "
+      />
+    </ElFormItem>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
new file mode 100644
index 000000000..503c1919d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -0,0 +1,669 @@
+<!-- UserTask 自定义配置：
+     1. 审批人与提交人为同一人时
+     2. 审批人拒绝时
+     3. 审批人为空时
+     4. 操作按钮
+     5. 字段权限
+     6. 审批类型
+     7. 是否需要签名
+-->
+<script lang="ts" setup>
+import type { ComponentPublicInstance } from 'vue';
+
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElDivider,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { getSimpleUserList } from '#/api/system/user';
+import {
+  APPROVE_TYPE,
+  ApproveType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  ASSIGN_START_USER_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  DEFAULT_BUTTON_SETTING,
+  FieldPermissionType,
+  OPERATION_BUTTON_NAME,
+  REJECT_HANDLER_TYPES,
+  RejectHandlerType,
+} from '#/views/bpm/components/simple-process-design/consts';
+import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
+
+defineOptions({ name: 'ElementCustomConfig4UserTask' });
+const props = defineProps({
+  id: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  type: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+
+// 审批人与提交人为同一人时
+const assignStartUserHandlerTypeEl = ref<any>();
+const assignStartUserHandlerType = ref<any>();
+
+// 审批人拒绝时
+const rejectHandlerTypeEl = ref<any>();
+const rejectHandlerType = ref<any>();
+const returnNodeIdEl = ref<any>();
+const returnNodeId = ref<any>();
+const returnTaskList = ref<any[]>([]);
+
+// 审批人为空时
+const assignEmptyHandlerTypeEl = ref<any>();
+const assignEmptyHandlerType = ref<any>();
+const assignEmptyUserIdsEl = ref<any>();
+const assignEmptyUserIds = ref<any>();
+
+// 操作按钮设置
+const {
+  buttonsSetting,
+  btnDisplayNameEdit,
+  changeBtnDisplayName,
+  btnDisplayNameBlurEvent,
+  setInputRef,
+} = useButtonsSetting();
+
+/** 操作按钮设置 */
+function useButtonsSetting() {
+  const buttonsSetting = ref<any[]>([]);
+  // 操作按钮显示名称可编辑
+  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,
+  };
+}
+
+// 字段权限
+const fieldsPermissionEl = ref<any[]>([]);
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.READ);
+
+// 审批类型
+const approveType = ref({ value: ApproveType.USER });
+
+// 是否需要签名
+const signEnable = ref({ value: false });
+
+// 审批意见
+const reasonRequire = ref({ value: false });
+
+const elExtensionElements = ref<any>();
+const otherExtensions = ref<any>();
+const bpmnElement = ref<any>();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetCustomConfigList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+
+  // 获取可回退的列表
+  returnTaskList.value = findAllPredecessorsExcludingStart(
+    bpmnElement.value.id,
+    bpmnInstances().modeler,
+  );
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+
+  // 审批类型
+  approveType.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:ApproveType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:ApproveType`, {
+      value: ApproveType.USER,
+    });
+
+  // 审批人与提交人为同一人时
+  assignStartUserHandlerTypeEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:AssignStartUserHandlerType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:AssignStartUserHandlerType`, {
+      value: 1,
+    });
+  assignStartUserHandlerType.value = assignStartUserHandlerTypeEl.value.value;
+
+  // 审批人拒绝时
+  rejectHandlerTypeEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:RejectHandlerType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:RejectHandlerType`, { value: 1 });
+  rejectHandlerType.value = rejectHandlerTypeEl.value.value;
+  returnNodeIdEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:RejectReturnTaskId`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:RejectReturnTaskId`, {
+      value: '',
+    });
+  returnNodeId.value = returnNodeIdEl.value.value;
+
+  // 审批人为空时
+  assignEmptyHandlerTypeEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:AssignEmptyHandlerType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:AssignEmptyHandlerType`, {
+      value: 1,
+    });
+  assignEmptyHandlerType.value = assignEmptyHandlerTypeEl.value.value;
+  assignEmptyUserIdsEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:AssignEmptyUserIds`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:AssignEmptyUserIds`, {
+      value: '',
+    });
+  assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value
+    ?.split(',')
+    .map((item: string) => {
+      // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+      const num = Number(item);
+      return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
+        ? item
+        : num;
+    });
+
+  // 操作按钮
+  buttonsSetting.value = elExtensionElements.value.values?.filter(
+    (ex: any) => ex.$type === `${prefix}:ButtonsSetting`,
+  );
+  if (buttonsSetting.value.length === 0) {
+    DEFAULT_BUTTON_SETTING.forEach((item) => {
+      buttonsSetting.value.push(
+        bpmnInstances().moddle.create(`${prefix}:ButtonsSetting`, {
+          'flowable:id': item.id,
+          'flowable:displayName': item.displayName,
+          'flowable:enable': item.enable,
+        }),
+      );
+    });
+  }
+
+  // 字段权限
+  if (formType.value === BpmModelFormType.NORMAL) {
+    const fieldsPermissionList = elExtensionElements.value.values?.filter(
+      (ex: any) => ex.$type === `${prefix}:FieldsPermission`,
+    );
+    fieldsPermissionEl.value = [];
+    getNodeConfigFormFields();
+    fieldsPermissionConfig.value.forEach((element: any) => {
+      element.permission =
+        fieldsPermissionList?.find((obj: any) => obj.field === element.field)
+          ?.permission ?? '1';
+      fieldsPermissionEl.value.push(
+        bpmnInstances().moddle.create(`${prefix}:FieldsPermission`, element),
+      );
+    });
+  }
+
+  // 是否需要签名
+  signEnable.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:SignEnable`,
+    ) ||
+    bpmnInstances().moddle.create(`${prefix}:SignEnable`, { value: false });
+
+  // 审批意见
+  reasonRequire.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:ReasonRequire`,
+    ) ||
+    bpmnInstances().moddle.create(`${prefix}:ReasonRequire`, { value: false });
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex: any) =>
+        ex.$type !== `${prefix}:AssignStartUserHandlerType` &&
+        ex.$type !== `${prefix}:RejectHandlerType` &&
+        ex.$type !== `${prefix}:RejectReturnTaskId` &&
+        ex.$type !== `${prefix}:AssignEmptyHandlerType` &&
+        ex.$type !== `${prefix}:AssignEmptyUserIds` &&
+        ex.$type !== `${prefix}:ButtonsSetting` &&
+        ex.$type !== `${prefix}:FieldsPermission` &&
+        ex.$type !== `${prefix}:ApproveType` &&
+        ex.$type !== `${prefix}:SignEnable` &&
+        ex.$type !== `${prefix}:ReasonRequire`,
+    ) ?? [];
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions();
+};
+
+const updateAssignStartUserHandlerType = () => {
+  assignStartUserHandlerTypeEl.value.value = assignStartUserHandlerType.value;
+
+  updateElementExtensions();
+};
+
+const updateRejectHandlerType = () => {
+  rejectHandlerTypeEl.value.value = rejectHandlerType.value;
+
+  returnNodeId.value = returnTaskList.value[0]?.id;
+  returnNodeIdEl.value.value = returnNodeId.value;
+
+  updateElementExtensions();
+};
+
+const updateReturnNodeId = () => {
+  returnNodeIdEl.value.value = returnNodeId.value;
+
+  updateElementExtensions();
+};
+
+const updateAssignEmptyHandlerType = () => {
+  assignEmptyHandlerTypeEl.value.value = assignEmptyHandlerType.value;
+
+  updateElementExtensions();
+};
+
+const updateAssignEmptyUserIds = () => {
+  assignEmptyUserIdsEl.value.value = assignEmptyUserIds.value.toString();
+
+  updateElementExtensions();
+};
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      assignStartUserHandlerTypeEl.value,
+      rejectHandlerTypeEl.value,
+      returnNodeIdEl.value,
+      assignEmptyHandlerTypeEl.value,
+      assignEmptyUserIdsEl.value,
+      approveType.value,
+      ...buttonsSetting.value,
+      ...fieldsPermissionEl.value,
+      signEnable.value,
+      reasonRequire.value,
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetCustomConfigList();
+      });
+  },
+  { immediate: true },
+);
+
+function findAllPredecessorsExcludingStart(elementId: string, modeler: any) {
+  const elementRegistry = modeler.get('elementRegistry');
+  const allConnections = elementRegistry.filter(
+    (element: any) => element.type === 'bpmn:SequenceFlow',
+  );
+  const predecessors = new Set(); // 使用 Set 来避免重复节点
+  const visited = new Set(); // 用于记录已访问的节点
+
+  // 检查是否是开始事件节点
+  function isStartEvent(element: any) {
+    return element.type === 'bpmn:StartEvent';
+  }
+
+  function findPredecessorsRecursively(element: any) {
+    // 如果该节点已经访问过，直接返回，避免循环
+    if (visited.has(element)) {
+      return;
+    }
+
+    // 标记当前节点为已访问
+    visited.add(element);
+
+    // 获取与当前节点相连的所有连接
+    const incomingConnections = allConnections.filter(
+      (connection: any) => connection.target === element,
+    );
+
+    incomingConnections.forEach((connection: any) => {
+      const source = connection.source; // 获取前置节点
+
+      // 只添加不是开始事件的前置节点
+      if (!isStartEvent(source)) {
+        predecessors.add(source.businessObject);
+        // 递归查找前置节点
+        findPredecessorsRecursively(source);
+      }
+    });
+  }
+
+  const targetElement = elementRegistry.get(elementId);
+  if (targetElement) {
+    findPredecessorsRecursively(targetElement);
+  }
+
+  return [...predecessors]; // 返回前置节点数组
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionEl.value.forEach((field: any) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+};
+
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await getSimpleUserList();
+});
+</script>
+
+<template>
+  <div>
+    <ElDivider content-position="left">审批类型</ElDivider>
+    <ElFormItem prop="approveType" label="审批类型">
+      <ElRadioGroup v-model="approveType.value">
+        <ElRadio
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批人拒绝时</ElDivider>
+    <ElFormItem prop="rejectHandlerType" label="处理方式">
+      <ElRadioGroup
+        v-model="rejectHandlerType"
+        :disabled="returnTaskList.length === 0"
+        @change="updateRejectHandlerType"
+      >
+        <ElRadio
+          v-for="(item, index) in REJECT_HANDLER_TYPES"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="rejectHandlerType === RejectHandlerType.RETURN_USER_TASK"
+      prop="returnNodeId"
+      label="驳回节点"
+    >
+      <ElSelect
+        v-model="returnNodeId"
+        clearable
+        style="width: 100%"
+        @change="updateReturnNodeId"
+        placeholder="请选择驳回节点"
+      >
+        <ElOption
+          v-for="item in returnTaskList"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批人为空时</ElDivider>
+    <ElFormItem prop="assignEmptyHandlerType">
+      <ElRadioGroup
+        v-model="assignEmptyHandlerType"
+        @change="updateAssignEmptyHandlerType"
+      >
+        <div class="flex flex-col gap-2">
+          <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
+            <ElRadio :key="item.value" :value="item.value">
+              {{ item.label }}
+            </ElRadio>
+          </div>
+        </div>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="assignEmptyHandlerType === AssignEmptyHandlerType.ASSIGN_USER"
+      label="指定用户"
+      prop="assignEmptyHandlerUserIds"
+    >
+      <ElSelect
+        v-model="assignEmptyUserIds"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateAssignEmptyUserIds"
+      >
+        <ElOption
+          v-for="item in userOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.nickname"
+        />
+      </ElSelect>
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批人与提交人为同一人时</ElDivider>
+    <ElRadioGroup
+      v-model="assignStartUserHandlerType"
+      @change="updateAssignStartUserHandlerType"
+    >
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES"
+          :key="index"
+        >
+          <ElRadio :key="item.value" :value="item.value">
+            {{ item.label }}
+          </ElRadio>
+        </div>
+      </div>
+    </ElRadioGroup>
+
+    <ElDivider content-position="left">操作按钮</ElDivider>
+    <div class="mt-2 text-sm">
+      <!-- 头部标题行 -->
+      <div
+        class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold text-slate-900"
+      >
+        <div class="w-28 text-left">操作按钮</div>
+        <div class="w-40 pl-2 text-left">显示名称</div>
+        <div class="w-20 text-center">启用</div>
+      </div>
+
+      <!-- 按钮配置行 -->
+      <div
+        v-for="(item, index) in buttonsSetting"
+        :key="index"
+        class="flex items-center justify-between border border-t-0 border-slate-200 px-3 py-2 text-sm"
+      >
+        <div class="w-28 truncate text-left">
+          {{ OPERATION_BUTTON_NAME.get(item.id) }}
+        </div>
+        <div class="flex w-40 items-center truncate text-left">
+          <ElInput
+            v-if="btnDisplayNameEdit[index]"
+            :ref="(el) => setInputRef(el, index)"
+            @blur="btnDisplayNameBlurEvent(index)"
+            @keyup.enter="btnDisplayNameBlurEvent(index)"
+            type="text"
+            v-model="item.displayName"
+            :placeholder="item.displayName"
+            class="max-w-32 focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
+          />
+          <ElButton v-else @click="changeBtnDisplayName(index)">
+            <div class="flex items-center">
+              {{ item.displayName }}
+              <IconifyIcon icon="lucide:edit" class="ml-2" />
+            </div>
+          </ElButton>
+        </div>
+        <div class="flex w-20 items-center justify-center">
+          <ElSwitch v-model="item.enable" @change="updateElementExtensions" />
+        </div>
+      </div>
+    </div>
+
+    <ElDivider content-position="left">字段权限</ElDivider>
+    <div v-if="formType === BpmModelFormType.NORMAL" class="mt-2 text-sm">
+      <!-- 头部标题行 -->
+      <div
+        class="flex items-center justify-between border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold text-slate-900"
+      >
+        <div class="w-28 text-left">字段名称</div>
+        <div class="flex flex-1 justify-between">
+          <span
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
+            @click="updatePermission('READ')"
+          >
+            只读
+          </span>
+          <span
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
+            @click="updatePermission('WRITE')"
+          >
+            可编辑
+          </span>
+          <span
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
+            @click="updatePermission('NONE')"
+          >
+            隐藏
+          </span>
+        </div>
+      </div>
+
+      <!-- 字段权限行 -->
+      <div
+        v-for="(item, index) in fieldsPermissionEl"
+        :key="index"
+        class="flex items-center justify-between border border-t-0 border-slate-200 px-3 py-2 text-sm"
+      >
+        <div class="w-28 truncate text-left" :title="item.title">
+          {{ item.title }}
+        </div>
+        <ElRadioGroup
+          v-model="item.permission"
+          class="flex flex-1 justify-between"
+        >
+          <div class="flex w-24 items-center justify-center">
+            <ElRadio
+              class="ml-5"
+              :value="FieldPermissionType.READ"
+              size="large"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </ElRadio>
+          </div>
+          <div class="flex w-24 items-center justify-center">
+            <ElRadio
+              class="ml-5"
+              :value="FieldPermissionType.WRITE"
+              size="large"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </ElRadio>
+          </div>
+          <div class="flex w-24 items-center justify-center">
+            <ElRadio
+              class="ml-5"
+              :value="FieldPermissionType.NONE"
+              size="large"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </ElRadio>
+          </div>
+        </ElRadioGroup>
+      </div>
+    </div>
+
+    <ElDivider content-position="left">是否需要签名</ElDivider>
+    <ElFormItem prop="signEnable">
+      <ElSwitch
+        v-model="signEnable.value"
+        active-text="是"
+        inactive-text="否"
+        @change="updateElementExtensions"
+      />
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批意见</ElDivider>
+    <ElFormItem prop="reasonRequire">
+      <ElSwitch
+        v-model="reasonRequire.value"
+        active-text="必填"
+        inactive-text="非必填"
+        @change="updateElementExtensions"
+      />
+    </ElFormItem>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
new file mode 100644
index 000000000..cd8830003
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
@@ -0,0 +1,13 @@
+import BoundaryEventTimer from './components/BoundaryEventTimer.vue';
+import UserTaskCustomConfig from './components/UserTaskCustomConfig.vue';
+
+export const CustomConfigMap = {
+  UserTask: {
+    name: '用户任务',
+    component: UserTaskCustomConfig,
+  },
+  BoundaryEventTimerEventDefinition: {
+    name: '定时边界事件(非中断)',
+    component: BoundaryEventTimer,
+  },
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
new file mode 100644
index 000000000..b922db0e7
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
@@ -0,0 +1,234 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+defineOptions({ name: 'FlowCondition' });
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+
+const flowConditionForm = ref<any>({});
+const bpmnElement = ref();
+const bpmnElementSource = ref();
+const bpmnElementSourceRef = ref();
+const flowConditionRef = ref();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetFlowCondition = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+  bpmnElementSource.value = bpmnElement.value.source;
+  bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef;
+  // 初始化默认type为default
+  flowConditionForm.value = { type: 'default' };
+  if (
+    bpmnElementSourceRef.value &&
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    flowConditionForm.value = { type: 'default' };
+  } else if (bpmnElement.value.businessObject.conditionExpression) {
+    // 带条件
+    const conditionExpression =
+      bpmnElement.value.businessObject.conditionExpression;
+    flowConditionForm.value = { ...conditionExpression, type: 'condition' };
+    // resource 可直接标识 是否是外部资源脚本
+    if (flowConditionForm.value.resource) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "externalScript");
+      flowConditionForm.value.conditionType = 'script';
+      flowConditionForm.value.scriptType = 'externalScript';
+      return;
+    }
+    if (conditionExpression.language) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
+      flowConditionForm.value.conditionType = 'script';
+      flowConditionForm.value.scriptType = 'inlineScript';
+
+      return;
+    }
+    // this.$set(this.flowConditionForm, "conditionType", "expression");
+    flowConditionForm.value.conditionType = 'expression';
+  } else {
+    // 普通
+    flowConditionForm.value = { type: 'normal' };
+  }
+};
+
+const updateFlowType = (flowType: any) => {
+  // 正常条件类
+  if (flowType === 'condition') {
+    flowConditionRef.value = bpmnInstances().moddle.create(
+      'bpmn:FormalExpression',
+    );
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      conditionExpression: flowConditionRef.value,
+    });
+    return;
+  }
+  // 默认路径
+  if (flowType === 'default') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      conditionExpression: null,
+    });
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
+      default: toRaw(bpmnElement.value),
+    });
+    return;
+  }
+  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+  if (
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
+      default: null,
+    });
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    conditionExpression: null,
+  });
+};
+
+const updateFlowCondition = () => {
+  const { conditionType, scriptType, body, resource, language } =
+    flowConditionForm.value;
+  let condition;
+  if (conditionType === 'expression') {
+    condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body,
+    });
+  } else {
+    if (scriptType === 'inlineScript') {
+      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+        body,
+        language,
+      });
+      // this.$set(this.flowConditionForm, "resource", "");
+      flowConditionForm.value.resource = '';
+    } else {
+      // this.$set(this.flowConditionForm, "body", "");
+      flowConditionForm.value.body = '';
+      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+        resource,
+        language,
+      });
+    }
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    conditionExpression: condition,
+  });
+};
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+  bpmnElementSource.value = null;
+  bpmnElementSourceRef.value = null;
+});
+
+watch(
+  () => props.businessObject,
+  (_) => {
+    // console.log(val, 'val');
+    nextTick(() => {
+      resetFlowCondition();
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <ElForm :model="flowConditionForm" label-width="80px">
+      <ElFormItem label="流转类型">
+        <ElSelect v-model="flowConditionForm.type" @change="updateFlowType">
+          <ElOption value="normal" label="普通流转路径" />
+          <ElOption value="default" label="默认流转路径" />
+          <ElOption value="condition" label="条件流转路径" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="条件格式"
+        v-if="flowConditionForm.type === 'condition'"
+        key="condition"
+      >
+        <ElSelect v-model="flowConditionForm.conditionType">
+          <ElOption value="expression" label="表达式" />
+          <ElOption value="script" label="脚本" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="表达式"
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'expression'
+        "
+        key="express"
+      >
+        <ElInput
+          type="textarea"
+          v-model="flowConditionForm.body"
+          :autosize="{ minRows: 2, maxRows: 6 }"
+          clearable
+          @change="updateFlowCondition"
+        />
+      </ElFormItem>
+      <template
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'script'
+        "
+      >
+        <ElFormItem label="脚本语言" key="language">
+          <ElInput
+            v-model="flowConditionForm.language"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </ElFormItem>
+        <ElFormItem label="脚本类型" key="scriptType">
+          <ElSelect v-model="flowConditionForm.scriptType">
+            <ElOption value="inlineScript" label="内联脚本" />
+            <ElOption value="externalScript" label="外部脚本" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          label="脚本"
+          v-if="flowConditionForm.scriptType === 'inlineScript'"
+          key="body"
+        >
+          <ElInput
+            type="textarea"
+            v-model="flowConditionForm.body"
+            :autosize="{ minRows: 2, maxRows: 6 }"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </ElFormItem>
+        <ElFormItem
+          label="资源地址"
+          v-if="flowConditionForm.scriptType === 'externalScript'"
+          key="resource"
+        >
+          <ElInput
+            v-model="flowConditionForm.resource"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </ElFormItem>
+      </template>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
new file mode 100644
index 000000000..92c826419
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -0,0 +1,336 @@
+<!-- eslint-disable no-unused-vars -->
+<script lang="ts" setup>
+import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { cloneDeep } from '@vben/utils';
+
+import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
+
+import { getFormSimpleList } from '#/api/bpm/form';
+
+defineOptions({ name: 'ElementForm' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+
+const formKey = ref<number | string | undefined>(undefined);
+const businessKey = ref('');
+const optionModelTitle = ref('');
+const fieldList = ref<any[]>([]);
+const formFieldForm = ref<any>({});
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型',
+});
+const formFieldIndex = ref(-1); // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1); // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false);
+const fieldOptionModelVisible = ref(false);
+const fieldOptionForm = ref<any>({}); // 当前激活的字段配置项数据
+const fieldOptionType = ref(''); // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref<any[]>([]); // 枚举值列表
+const fieldConstraintsList = ref<any[]>([]); // 约束条件列表
+const fieldPropertiesList = ref<any[]>([]); // 绑定属性列表
+const bpmnELement = ref();
+const elExtensionElements = ref();
+const formData = ref();
+const otherExtensions = ref();
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+const resetFormList = () => {
+  bpmnELement.value = bpmnInstances().bpmnElement;
+  formKey.value = bpmnELement.value.businessObject.formKey;
+  // if (formKey.value?.length > 0) {
+  //   formKey.value = parseInt(formKey.value)
+  // }
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.find(
+      (ex: any) => ex.$type === `${prefix}:FormData`,
+    ) || bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] });
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey;
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex: any) => ex.$type !== `${prefix}:FormData`,
+  );
+
+  // 复制原始值，填充表格
+  fieldList.value = cloneDeep(formData.value.fields || []);
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions();
+};
+const updateElementFormKey = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value,
+  });
+};
+const _updateElementBusinessKey = () => {
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnELement.value),
+    formData.value,
+    {
+      businessKey: businessKey.value,
+    },
+  );
+};
+// 根据类型调整字段type
+const _changeFieldTypeType = (type: any) => {
+  formFieldForm.value.type = type === 'custom' ? '' : type;
+};
+
+// 打开字段详情侧边栏
+const _openFieldForm = (field: any, index: any) => {
+  formFieldIndex.value = index;
+  if (index === -1) {
+    formFieldForm.value = {};
+    // 初始化枚举值列表
+    fieldEnumList.value = [];
+    // 初始化约束条件列表
+    fieldConstraintsList.value = [];
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = [];
+  } else {
+    const FieldObject = formData.value.fields[index];
+    formFieldForm.value = cloneDeep(field);
+    // 设置自定义类型
+    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+    formFieldForm.value.typeType = fieldType.value[
+      field.type as keyof typeof fieldType.value
+    ]
+      ? field.type
+      : 'custom';
+    // 初始化枚举值列表
+    field.type === 'enum' &&
+      (fieldEnumList.value = cloneDeep(FieldObject?.values || []));
+    // 初始化约束条件列表
+    fieldConstraintsList.value = cloneDeep(
+      FieldObject?.validation?.constraints || [],
+    );
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = cloneDeep(
+      FieldObject?.properties?.values || [],
+    );
+  }
+  fieldModelVisible.value = true;
+};
+// 打开字段 某个 配置项 弹窗
+const _openFieldOptionForm = (option: any, index: any, type: any) => {
+  fieldOptionModelVisible.value = true;
+  fieldOptionType.value = type;
+  formFieldOptionIndex.value = index;
+  if (type === 'property') {
+    fieldOptionForm.value = option ? cloneDeep(option) : {};
+    return (optionModelTitle.value = '属性配置');
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? cloneDeep(option) : {};
+    return (optionModelTitle.value = '枚举值配置');
+  }
+  fieldOptionForm.value = option ? cloneDeep(option) : {};
+  return (optionModelTitle.value = '约束条件配置');
+};
+
+// 保存字段 某个 配置项
+const _saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value);
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value);
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value);
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(
+        formFieldOptionIndex.value,
+        1,
+        fieldOptionForm.value,
+      );
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(
+        formFieldOptionIndex.value,
+        1,
+        fieldOptionForm.value,
+      );
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(
+        formFieldOptionIndex.value,
+        1,
+        fieldOptionForm.value,
+      );
+  }
+  fieldOptionModelVisible.value = false;
+  fieldOptionForm.value = {};
+};
+// 保存字段配置
+const _saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value;
+  const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, {
+    id,
+    type,
+    label,
+  });
+  defaultValue && (Field.defaultValue = defaultValue);
+  datePattern && (Field.datePattern = datePattern);
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length > 0) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp: any) => {
+      return bpmnInstances().moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value,
+      });
+    });
+    Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+      values: fieldPropertyList,
+    });
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length > 0) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc: any) => {
+      return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config,
+      });
+    });
+    Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList,
+    });
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length > 0) {
+    Field.values = fieldEnumList.value.map((fe: any) => {
+      return bpmnInstances().moddle.create(`${prefix}:Value`, {
+        name: fe.name,
+        id: fe.id,
+      });
+    });
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value);
+    formData.value.fields.push(Field);
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value);
+    formData.value.fields.splice(formFieldIndex.value, 1, Field);
+  }
+  updateElementExtensions();
+  fieldModelVisible.value = false;
+};
+
+// 移除某个 字段的 配置项
+const _removeFieldOptionItem = (_option: any, index: any, type: any) => {
+  // console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1);
+    return;
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1);
+    return;
+  }
+  fieldConstraintsList.value.splice(index, 1);
+};
+// 移除 字段
+const _removeField = (field: any, index: any) => {
+  console.warn(field, 'field');
+  fieldList.value.splice(index, 1);
+  formData.value.fields.splice(index, 1);
+  updateElementExtensions();
+};
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = bpmnInstances().moddle.create(
+    `bpmn:ExtensionElements`,
+    {
+      values: [...otherExtensions.value, formData.value],
+    },
+  );
+  // 更新到元素上
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    extensionElements: newElExtensionElements,
+  });
+};
+
+const formList = ref<any[]>([]); // 流程表单的下拉框的数据
+const formOptions = computed(() => {
+  return formList.value.map((form: any) => ({
+    value: form.id,
+    label: form.name,
+  }));
+});
+
+onMounted(async () => {
+  formList.value = await getFormSimpleList();
+  formKey.value = formKey.value
+    ? Number.parseInt(formKey.value as string)
+    : undefined;
+});
+
+watch(
+  () => props.id,
+  (val: any) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetFormList();
+      });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <ElForm label-width="80px">
+      <ElFormItem label="流程表单">
+        <ElSelect
+          v-model="formKey"
+          clearable
+          @change="updateElementFormKey"
+        >
+          <ElOption
+            v-for="item in formOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="业务标识">
+        <ElSelect
+          v-model="businessKey"
+          @change="_updateElementBusinessKey"
+          clearable
+        >
+          <ElOption v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
+          <ElOption value="" label="无" />
+        </ElSelect>
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
new file mode 100644
index 000000000..1688cf7d1
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
@@ -0,0 +1,7 @@
+import MyPropertiesPanel from './PropertiesPanel.vue';
+
+MyPropertiesPanel.install = function (Vue) {
+  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
+};
+
+export default MyPropertiesPanel;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
new file mode 100644
index 000000000..4c87b5eac
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -0,0 +1,573 @@
+<script lang="ts" setup>
+import { inject, nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+// import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+
+import { createListenerObject, updateElementExtensions } from '../../utils';
+import ListenerFieldModal from './ListenerFieldModal.vue';
+import {
+  fieldType,
+  initListenerForm,
+  initListenerForm2,
+  initListenerType,
+  listenerType,
+} from './utilSelf';
+
+defineOptions({ name: 'ElementListeners' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+const elementListenersList = ref<any[]>([]); // 监听器列表
+const listenerForm = ref<any>({}); // 监听器详情表单
+const fieldsListOfListener = ref<any[]>([]);
+const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType);
+const fieldTypeObject = ref(fieldType);
+const otherExtensionList = ref();
+const bpmnElementListeners = ref();
+const listenerFormRef = ref();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetListenersList = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? []; // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC
+  bpmnElementListeners.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type === `${prefix}:ExecutionListener`,
+    ) ?? [];
+  elementListenersList.value = bpmnElementListeners.value.map((listener: any) =>
+    initListenerType(listener),
+  );
+};
+// 打开 监听器详情 侧边栏
+const openListenerForm = (listener: any, index: number) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener);
+    editingListenerIndex.value = index;
+  } else {
+    listenerForm.value = {};
+    editingListenerIndex.value = -1;
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field: any) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression',
+    }));
+  } else {
+    fieldsListOfListener.value = [];
+    listenerForm.value.fields = [];
+  }
+  listenerDrawerApi.open();
+  nextTick(() => {
+    if (listenerFormRef.value) {
+      listenerFormRef.value.clearValidate();
+    }
+  });
+};
+
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field: any, index: number) => {
+  const data = field ? cloneDeep(field) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  fieldModalApi.setData(data).open();
+};
+// 保存监听器注入字段
+const saveListenerFiled = async (data: any) => {
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(data);
+    listenerForm.value.fields.push(data);
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
+  }
+};
+// 移除监听器字段
+const removeListenerField = (index: number) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该字段吗？',
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
+  });
+};
+// 移除监听器
+const removeListener = (index: number) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该监听器吗？',
+  }).then(() => {
+    const instances = bpmnInstances();
+    if (!instances || !instances.bpmnElement) return;
+    bpmnElementListeners.value.splice(index, 1);
+    elementListenersList.value.splice(index, 1);
+    updateElementExtensions(instances.bpmnElement, [
+      ...otherExtensionList.value,
+      ...bpmnElementListeners.value,
+    ]);
+  });
+};
+// 保存监听器配置
+const saveListenerConfig = async () => {
+  try {
+    await listenerFormRef.value.validate();
+  } catch {
+    return;
+  }
+  const listenerObject = createListenerObject(
+    listenerForm.value,
+    false,
+    prefix,
+  );
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject);
+    elementListenersList.value.push(listenerForm.value);
+  } else {
+    bpmnElementListeners.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerObject,
+    );
+    elementListenersList.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerForm.value,
+    );
+  }
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? [];
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensionList.value,
+    ...bpmnElementListeners.value,
+  ]);
+  listenerDrawerApi.close();
+  listenerForm.value = {};
+};
+
+// 配置主列表 Grid
+const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'event', title: '事件类型', minWidth: 100 },
+      {
+        field: 'listenerType',
+        title: '监听器类型',
+        minWidth: 100,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置字段列表 Grid
+const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '字段名称', minWidth: 100 },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (fieldTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '字段值/表达式',
+        minWidth: 100,
+        formatter: ({ row }: { row: any }) => row.string || row.expression,
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    maxHeight: 200,
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Drawer
+const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
+  title: '执行监听器',
+  destroyOnClose: true,
+  onConfirm: saveListenerConfig,
+});
+
+// 配置字段 Modal
+const [FieldModal, fieldModalApi] = useVbenModal({
+  connectedComponent: ListenerFieldModal,
+});
+
+// 配置选择监听器 Modal
+// const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+//   useVbenModal({
+//     connectedComponent: ProcessListenerSelectModal,
+//     destroyOnClose: true,
+//   });
+
+// 打开监听器弹窗
+const openProcessListenerDialog = async () => {
+  // processListenerSelectModalApi.setData({ type: 'execution' }).open();
+};
+const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const listenerForm = initListenerForm2(listener);
+  const listenerObject = createListenerObject(listenerForm, false, prefix);
+  bpmnElementListeners.value.push(listenerObject);
+  elementListenersList.value.push(listenerForm);
+
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? [];
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensionList.value,
+    ...bpmnElementListeners.value,
+  ]);
+};
+
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.id,
+  (val: string) => {
+    if (val && val.length > 0) {
+      nextTick(() => {
+        resetListenersList();
+      });
+    }
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <div class="-mx-2">
+    <ListenerGrid :data="elementListenersList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openListenerForm(row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeListener(rowIndex)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </ListenerGrid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openListenerForm(null, -1)"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加监听器
+      </ElButton>
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        @click="openProcessListenerDialog"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:select" />
+        </template>
+        选择监听器
+      </ElButton>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <ListenerDrawer>
+      <ElForm :model="listenerForm" ref="listenerFormRef" label-width="90px">
+        <ElFormItem
+          label="事件类型"
+          prop="event"
+          :rules="[
+            {
+              required: true,
+              message: '请选择事件类型',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElSelect v-model="listenerForm.event">
+            <ElOption value="start" label="start" />
+            <ElOption value="end" label="end" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          label="监听器类型"
+          prop="listenerType"
+          :rules="[
+            {
+              required: true,
+              message: '请选择监听器类型',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElSelect v-model="listenerForm.listenerType">
+            <ElOption
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :value="i"
+              :label="listenerTypeObject[i as keyof typeof listenerType]"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="[
+            {
+              required: true,
+              message: '请填写Java类',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="listenerForm.class" clearable />
+        </ElFormItem>
+        <ElFormItem
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="[
+            {
+              required: true,
+              message: '请填写表达式',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="listenerForm.expression" clearable />
+        </ElFormItem>
+        <ElFormItem
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="[
+            {
+              required: true,
+              message: '请填写代理表达式',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="listenerForm.delegateExpression" clearable />
+        </ElFormItem>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <ElFormItem
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请填写脚本格式',
+              },
+            ]"
+          >
+            <ElInput v-model="listenerForm.scriptFormat" clearable />
+          </ElFormItem>
+          <ElFormItem
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请选择脚本类型',
+              },
+            ]"
+          >
+            <ElSelect v-model="listenerForm.scriptType">
+              <ElOption value="inlineScript" label="内联脚本" />
+              <ElOption value="externalScript" label="外部脚本" />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请填写脚本内容',
+              },
+            ]"
+          >
+            <ElInput v-model="listenerForm.value" clearable />
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请填写资源地址',
+              },
+            ]"
+          >
+            <ElInput v-model="listenerForm.resource" clearable />
+          </ElFormItem>
+        </template>
+      </ElForm>
+      <ElDivider />
+      <div class="mb-2 flex justify-between">
+        <span class="flex items-center">
+          <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+          注入字段
+        </span>
+        <ElButton
+          class="flex items-center"
+          size="small"
+          type="primary"
+          link
+          @click="openListenerFieldForm(null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
+          添加字段
+        </ElButton>
+      </div>
+      <FieldsGrid :data="fieldsListOfListener">
+        <template #action="{ row, rowIndex }">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="openListenerFieldForm(row, rowIndex)"
+          >
+            编辑
+          </ElButton>
+          <ElDivider direction="vertical" />
+          <ElButton
+            size="small"
+            type="danger"
+            link
+            @click="removeListenerField(rowIndex)"
+          >
+            移除
+          </ElButton>
+        </template>
+      </FieldsGrid>
+    </ListenerDrawer>
+
+    <!-- 注入字段 编辑/创建 部分 -->
+    <FieldModal @confirm="saveListenerFiled" />
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
new file mode 100644
index 000000000..59368cd46
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import { fieldType } from './utilSelf';
+
+defineOptions({ name: 'ListenerFieldModal' });
+
+const emit = defineEmits<{
+  confirm: [data: any];
+}>();
+
+const fieldTypeObject = ref(fieldType);
+const form = ref<any>({});
+const formRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<any>();
+      form.value = data || {};
+      // clear validate
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  onConfirm: async () => {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // validate failed
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="字段配置" class="w-3/5">
+    <ElForm ref="formRef" :model="form" label-width="80px">
+      <ElFormItem
+        label="字段名称："
+        prop="name"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段名称',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElInput v-model="form.name" clearable />
+      </ElFormItem>
+      <ElFormItem
+        label="字段类型："
+        prop="fieldType"
+        :rules="[
+          {
+            required: true,
+            message: '请选择字段类型',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElSelect v-model="form.fieldType">
+          <ElOption
+            v-for="i in Object.keys(fieldTypeObject)"
+            :key="i"
+            :value="i"
+            :label="fieldTypeObject[i as keyof typeof fieldType]"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        v-if="form.fieldType === 'string'"
+        label="字段值："
+        prop="string"
+        key="field-string"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段值',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElInput v-model="form.string" clearable />
+      </ElFormItem>
+      <ElFormItem
+        v-if="form.fieldType === 'expression'"
+        label="表达式："
+        prop="expression"
+        key="field-expression"
+        :rules="[
+          {
+            required: true,
+            message: '请填写表达式',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElInput v-model="form.expression" clearable />
+      </ElFormItem>
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
new file mode 100644
index 000000000..6816058a4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -0,0 +1,552 @@
+<script lang="ts" setup>
+import { inject, nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+// import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+
+import { createListenerObject, updateElementExtensions } from '../../utils';
+import ListenerFieldModal from './ListenerFieldModal.vue';
+import {
+  eventType,
+  fieldType,
+  initListenerForm,
+  initListenerForm2,
+  initListenerType,
+  listenerType,
+} from './utilSelf';
+
+defineOptions({ name: 'UserTaskListeners' });
+
+const props = defineProps<Props>();
+
+interface Props {
+  id?: string;
+  type?: string;
+}
+
+const prefix = inject<string>('prefix');
+
+const elementListenersList = ref<any[]>([]);
+const listenerEventTypeObject = ref(eventType);
+const listenerTypeObject = ref(listenerType);
+const listenerForm = ref<any>({});
+const fieldTypeObject = ref(fieldType);
+const fieldsListOfListener = ref<any[]>([]);
+const editingListenerIndex = ref(-1);
+const editingListenerFieldIndex = ref<any>(-1);
+const bpmnElementListeners = ref<any[]>([]);
+const otherExtensionList = ref<any[]>([]);
+const listenerFormRef = ref<any>({});
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetListenersList = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
+  bpmnElementListeners.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type === `${prefix}:TaskListener`,
+    ) ?? [];
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener),
+  );
+};
+
+const openListenerForm = (listener: any, index?: number) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener);
+    editingListenerIndex.value = index || -1;
+  } else {
+    listenerForm.value = {};
+    editingListenerIndex.value = -1;
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field: any) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression',
+    }));
+  } else {
+    fieldsListOfListener.value = [];
+    listenerForm.value.fields = [];
+  }
+  listenerDrawerApi.open();
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate();
+  });
+};
+
+const removeListener = (_: any, index: number) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该监听器吗？',
+  }).then(() => {
+    const instances = bpmnInstances();
+    if (!instances || !instances.bpmnElement) return;
+
+    bpmnElementListeners.value.splice(index, 1);
+    elementListenersList.value.splice(index, 1);
+    updateElementExtensions(instances.bpmnElement, [
+      ...otherExtensionList.value,
+      ...bpmnElementListeners.value,
+    ]);
+  });
+};
+
+async function saveListenerConfig() {
+  try {
+    await listenerFormRef.value.validate();
+  } catch {
+    return;
+  }
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const listenerObject = createListenerObject(listenerForm.value, true, prefix);
+
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject);
+    elementListenersList.value.push(listenerForm.value);
+  } else {
+    bpmnElementListeners.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerObject,
+    );
+    elementListenersList.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerForm.value,
+    );
+  }
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensionList.value,
+    ...bpmnElementListeners.value,
+  ]);
+  listenerDrawerApi.close();
+  listenerForm.value = {};
+}
+
+const openListenerFieldForm = (field: any, index?: number) => {
+  const data = field ? cloneDeep(field) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  fieldModalApi.setData(data).open();
+};
+
+const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      {
+        field: 'event',
+        title: '事件类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerEventTypeObject.value as Record<string, any>)[cellValue],
+      },
+      { field: 'id', title: '事件id', minWidth: 80, showOverflow: true },
+      {
+        field: 'listenerType',
+        title: '监听器类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+async function saveListenerField(data: any) {
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(data);
+    listenerForm.value.fields.push(data);
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
+  }
+}
+
+const removeListenerField = (_: any, index: number) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该字段吗？',
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
+  });
+};
+
+const openProcessListenerDialog = async () => {
+  // processListenerSelectModalApi.setData({ type: 'task' }).open();
+};
+const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const listenerForm = initListenerForm2(listener);
+  listenerForm.id = listener.id;
+  const listenerObject = createListenerObject(listenerForm, true, prefix);
+  bpmnElementListeners.value.push(listenerObject);
+  elementListenersList.value.push(listenerForm);
+
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
+  updateElementExtensions(
+    bpmnElement,
+    otherExtensionList.value?.concat(bpmnElementListeners.value),
+  );
+};
+
+const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
+  title: '任务监听器',
+  destroyOnClose: true,
+  onConfirm: saveListenerConfig,
+});
+
+const [FieldModal, fieldModalApi] = useVbenModal({
+  connectedComponent: ListenerFieldModal,
+});
+
+// const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+//   useVbenModal({
+//     connectedComponent: ProcessListenerSelectModal,
+//     destroyOnClose: true,
+//   });
+
+const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '字段名称', minWidth: 100 },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        width: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          fieldTypeObject.value[cellValue as keyof typeof fieldType],
+      },
+      {
+        title: '字段值/表达式',
+        width: 100,
+        formatter: ({ row }: { row: any }) => row.string || row.expression,
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    minHeight: 200,
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetListenersList();
+      });
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <div class="-mx-2">
+    <ListenerGrid>
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openListenerForm(row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeListener(row, rowIndex)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </ListenerGrid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        type="primary"
+        @click="openListenerForm(null)"
+      >
+        <template #icon> <IconifyIcon icon="ep:plus" /></template>
+        添加监听器
+      </ElButton>
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        @click="openProcessListenerDialog"
+      >
+        <template #icon> <IconifyIcon icon="ep:select" /></template>
+        选择监听器
+      </ElButton>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <ListenerDrawer class="w-2/5">
+      <template #default>
+        <ElForm :model="listenerForm" ref="listenerFormRef" label-width="90px">
+          <ElFormItem
+            label="事件类型"
+            prop="event"
+            :rules="[{ required: true, message: '请选择事件类型' }]"
+          >
+            <ElSelect v-model="listenerForm.event">
+              <ElOption
+                v-for="i in Object.keys(listenerEventTypeObject)"
+                :key="i"
+                :value="i"
+                :label="listenerEventTypeObject[i as keyof typeof eventType]"
+              />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            label="监听器ID"
+            prop="id"
+            :rules="[{ required: true, message: '请输入监听器ID' }]"
+          >
+            <ElInput v-model="listenerForm.id" clearable />
+          </ElFormItem>
+          <ElFormItem
+            label="监听器类型"
+            prop="listenerType"
+            :rules="[{ required: true, message: '请选择监听器类型' }]"
+          >
+            <ElSelect v-model="listenerForm.listenerType">
+              <ElOption
+                v-for="i in Object.keys(listenerTypeObject)"
+                :key="i"
+                :value="i"
+                :label="listenerTypeObject[i as keyof typeof listenerType]"
+              />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.listenerType === 'classListener'"
+            label="Java类"
+            prop="class"
+            key="listener-class"
+            :rules="[{ required: true, message: '请输入Java类' }]"
+          >
+            <ElInput v-model="listenerForm.class" clearable />
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.listenerType === 'expressionListener'"
+            label="表达式"
+            prop="expression"
+            key="listener-expression"
+            :rules="[{ required: true, message: '请输入表达式' }]"
+          >
+            <ElInput v-model="listenerForm.expression" clearable />
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+            label="代理表达式"
+            prop="delegateExpression"
+            key="listener-delegate"
+            :rules="[{ required: true, message: '请输入代理表达式' }]"
+          >
+            <ElInput v-model="listenerForm.delegateExpression" clearable />
+          </ElFormItem>
+          <template v-if="listenerForm.listenerType === 'scriptListener'">
+            <ElFormItem
+              label="脚本格式"
+              prop="scriptFormat"
+              key="listener-script-format"
+              :rules="[{ required: true, message: '请填写脚本格式' }]"
+            >
+              <ElInput v-model="listenerForm.scriptFormat" clearable />
+            </ElFormItem>
+            <ElFormItem
+              label="脚本类型"
+              prop="scriptType"
+              key="listener-script-type"
+              :rules="[{ required: true, message: '请选择脚本类型' }]"
+            >
+              <ElSelect v-model="listenerForm.scriptType">
+                <ElOption value="inlineScript" label="内联脚本" />
+                <ElOption value="externalScript" label="外部脚本" />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="listenerForm.scriptType === 'inlineScript'"
+              label="脚本内容"
+              prop="value"
+              key="listener-script"
+              :rules="[{ required: true, message: '请填写脚本内容' }]"
+            >
+              <ElInput v-model="listenerForm.value" clearable />
+            </ElFormItem>
+            <ElFormItem
+              v-if="listenerForm.scriptType === 'externalScript'"
+              label="资源地址"
+              prop="resource"
+              key="listener-resource"
+              :rules="[{ required: true, message: '请填写资源地址' }]"
+            >
+              <ElInput v-model="listenerForm.resource" clearable />
+            </ElFormItem>
+          </template>
+
+          <template v-if="listenerForm.event === 'timeout'">
+            <ElFormItem
+              label="定时器类型"
+              prop="eventDefinitionType"
+              key="eventDefinitionType"
+            >
+              <ElSelect v-model="listenerForm.eventDefinitionType">
+                <ElOption value="date" label="日期" />
+                <ElOption value="duration" label="持续时长" />
+                <ElOption value="cycle" label="循环" />
+                <ElOption value="null" label="无" />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                !!listenerForm.eventDefinitionType &&
+                listenerForm.eventDefinitionType !== 'null'
+              "
+              label="定时器"
+              prop="eventTimeDefinitions"
+              key="eventTimeDefinitions"
+              :rules="[{ required: true, message: '请填写定时器配置' }]"
+            >
+              <ElInput v-model="listenerForm.eventTimeDefinitions" clearable />
+            </ElFormItem>
+          </template>
+        </ElForm>
+
+        <ElDivider />
+        <div class="mb-2 flex justify-between">
+          <span class="flex items-center">
+            <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+            注入字段
+          </span>
+          <ElButton
+            class="flex items-center"
+            size="small"
+            type="primary"
+            link
+            @click="openListenerFieldForm(null)"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="ep:plus" />
+            </template>
+            添加字段
+          </ElButton>
+        </div>
+        <FieldsGrid>
+          <template #action="{ row, rowIndex }">
+            <ElButton
+              size="small"
+              type="primary"
+              link
+              @click="openListenerFieldForm(row, rowIndex)"
+            >
+              编辑
+            </ElButton>
+            <ElDivider direction="vertical" />
+            <ElButton
+              size="small"
+              type="danger"
+              link
+              @click="removeListenerField(row, rowIndex)"
+            >
+              移除
+            </ElButton>
+          </template>
+        </FieldsGrid>
+      </template>
+    </ListenerDrawer>
+
+    <!-- 注入字段 编辑/创建 部分 -->
+    <FieldModal @confirm="saveListenerField" />
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
new file mode 100644
index 000000000..2cfd78dfa
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
@@ -0,0 +1,101 @@
+// 初始化表单数据
+import { cloneDeep } from '@vben/utils';
+
+export function initListenerForm(listener: any) {
+  let self = {
+    ...listener,
+  };
+  if (listener.script) {
+    self = {
+      ...listener,
+      ...listener.script,
+      scriptType: listener.script.resource ? 'externalScript' : 'inlineScript',
+    };
+  }
+  if (
+    listener.event === 'timeout' &&
+    listener.eventDefinitions &&
+    listener.eventDefinitions.length > 0
+  ) {
+    let k = '';
+    for (const key in listener.eventDefinitions[0]) {
+      // console.log(listener.eventDefinitions, key);
+      if (key.includes('time')) {
+        k = key;
+        self.eventDefinitionType = key.replace('time', '').toLowerCase();
+      }
+    }
+    // console.log(k);
+    self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
+  }
+  return self;
+}
+
+export function initListenerType(listener: any) {
+  let listenerType;
+  if (listener.class) listenerType = 'classListener';
+  if (listener.expression) listenerType = 'expressionListener';
+  if (listener.delegateExpression) listenerType = 'delegateExpressionListener';
+  if (listener.script) listenerType = 'scriptListener';
+  return {
+    ...cloneDeep(listener),
+    ...listener.script,
+    listenerType,
+  };
+}
+
+/** 将 ProcessListenerDO 转换成 initListenerForm 想同的 Form 对象 */
+export function initListenerForm2(processListener: any) {
+  switch (processListener.valueType) {
+    case 'class': {
+      return {
+        listenerType: 'classListener',
+        class: processListener.value,
+        event: processListener.event,
+        fields: [],
+        id: undefined,
+      };
+    }
+    case 'delegateExpression': {
+      return {
+        listenerType: 'delegateExpressionListener',
+        delegateExpression: processListener.value,
+        event: processListener.event,
+        fields: [],
+        id: undefined,
+      };
+    }
+    case 'expression': {
+      return {
+        listenerType: 'expressionListener',
+        expression: processListener.value,
+        event: processListener.event,
+        fields: [],
+        id: undefined,
+      };
+    }
+    // No default
+  }
+  throw new Error('未知的监听器类型');
+}
+
+export const listenerType = {
+  classListener: 'Java 类',
+  expressionListener: '表达式',
+  delegateExpressionListener: '代理表达式',
+  scriptListener: '脚本',
+};
+
+export const eventType = {
+  create: '创建',
+  assignment: '指派',
+  complete: '完成',
+  delete: '删除',
+  update: '更新',
+  timeout: '超时',
+};
+
+export const fieldType = {
+  string: '字符串',
+  expression: '表达式',
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
new file mode 100644
index 000000000..d4f6b472d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -0,0 +1,545 @@
+<!-- eslint-disable no-unused-vars -->
+<script lang="ts" setup>
+import { inject, nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import {
+  ElButton,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+} from 'element-plus';
+
+import {
+  APPROVE_METHODS,
+  ApproveMethodType,
+} from '#/views/bpm/components/simple-process-design/consts';
+
+defineOptions({ name: 'ElementMultiInstance' });
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  id: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+const prefix = inject<string>('prefix');
+const loopCharacteristics = ref('');
+// 默认配置，用来覆盖原始不存在的选项，避免报错
+const defaultLoopInstanceForm = ref({
+  completionCondition: '',
+  loopCardinality: '',
+  extensionElements: [],
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false,
+});
+interface LoopInstanceForm {
+  completionCondition?: string;
+  loopCardinality?: string;
+  extensionElements?: any[];
+  asyncAfter?: boolean;
+  asyncBefore?: boolean;
+  exclusive?: boolean;
+  collection?: string;
+  elementVariable?: string;
+  timeCycle?: string;
+}
+
+const loopInstanceForm = ref<LoopInstanceForm>({});
+const bpmnElement = ref<any>(null);
+const multiLoopInstance = ref<any>(null);
+declare global {
+  interface Window {
+    // @ts-ignore
+    bpmnInstances?: () => any;
+  }
+}
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+const getElementLoop = (businessObject: any): void => {
+  if (!businessObject.loopCharacteristics) {
+    loopCharacteristics.value = 'Null';
+    loopInstanceForm.value = {};
+    return;
+  }
+  if (
+    businessObject.loopCharacteristics.$type ===
+    'bpmn:StandardLoopCharacteristics'
+  ) {
+    loopCharacteristics.value = 'StandardLoop';
+    loopInstanceForm.value = {};
+    return;
+  }
+  loopCharacteristics.value = businessObject.loopCharacteristics.isSequential
+    ? 'SequentialMultiInstance'
+    : 'ParallelMultiInstance';
+  // 合并配置
+  loopInstanceForm.value = {
+    ...defaultLoopInstanceForm.value,
+    ...businessObject.loopCharacteristics,
+    completionCondition:
+      businessObject.loopCharacteristics?.completionCondition?.body ?? '',
+    loopCardinality:
+      businessObject.loopCharacteristics?.loopCardinality?.body ?? '',
+  };
+  // 保留当前元素 businessObject 上的 loopCharacteristics 实例
+  multiLoopInstance.value =
+    bpmnInstances().bpmnElement.businessObject.loopCharacteristics;
+  // 更新表单
+  if (
+    businessObject.loopCharacteristics.extensionElements &&
+    businessObject.loopCharacteristics.extensionElements.values &&
+    businessObject.loopCharacteristics.extensionElements.values.length > 0
+  ) {
+    loopInstanceForm.value.timeCycle =
+      businessObject.loopCharacteristics.extensionElements.values[0].body;
+  }
+};
+
+const changeLoopCharacteristicsType = (type: any): void => {
+  // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
+  // 取消多实例配置
+  if (type === 'Null') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null,
+    });
+    return;
+  }
+  // 配置循环
+  if (type === 'StandardLoop') {
+    const loopCharacteristicsObject = bpmnInstances().moddle.create(
+      'bpmn:StandardLoopCharacteristics',
+    );
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: loopCharacteristicsObject,
+    });
+    multiLoopInstance.value = null;
+    return;
+  }
+  // 时序
+  multiLoopInstance.value =
+    type === 'SequentialMultiInstance'
+      ? bpmnInstances().moddle.create('bpmn:MultiInstanceLoopCharacteristics', {
+          isSequential: true,
+        })
+      : bpmnInstances().moddle.create('bpmn:MultiInstanceLoopCharacteristics', {
+          // eslint-disable-next-line no-template-curly-in-string
+          collection: '${coll_userList}',
+        });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    loopCharacteristics: toRaw(multiLoopInstance.value),
+  });
+};
+
+// 循环基数
+const updateLoopCardinality = (cardinality: string): void => {
+  let loopCardinality = null;
+  if (cardinality && cardinality.length > 0) {
+    loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body: cardinality,
+    });
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      loopCardinality,
+    },
+  );
+};
+
+// 完成条件
+const updateLoopCondition = (condition: string): void => {
+  let completionCondition = null;
+  if (condition && condition.length > 0) {
+    completionCondition = bpmnInstances().moddle.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition,
+      },
+    );
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      completionCondition,
+    },
+  );
+};
+
+// 重试周期
+const updateLoopTimeCycle = (timeCycle: string): void => {
+  const extensionElements = bpmnInstances().moddle.create(
+    'bpmn:ExtensionElements',
+    {
+      values: [
+        bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
+          body: timeCycle,
+        }),
+      ],
+    },
+  );
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      extensionElements,
+    },
+  );
+};
+
+// 直接更新的基础信息
+const updateLoopBase = (): void => {
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      collection: loopInstanceForm.value.collection || null,
+      elementVariable: loopInstanceForm.value.elementVariable || null,
+    },
+  );
+};
+
+// 各异步状态
+const updateLoopAsync = (key: any): void => {
+  const { asyncBefore, asyncAfter } = loopInstanceForm.value;
+  let asyncAttr = Object.create(null);
+  if (!asyncBefore && !asyncAfter) {
+    // this.$set(this.loopInstanceForm, "exclusive", false);
+    loopInstanceForm.value.exclusive = false;
+    asyncAttr = {
+      asyncBefore: false,
+      asyncAfter: false,
+      exclusive: false,
+      extensionElements: null,
+    };
+  } else {
+    // @ts-ignore
+    asyncAttr[key] = loopInstanceForm.value[key];
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    asyncAttr,
+  );
+};
+
+const changeConfig = (config: string): void => {
+  switch (config) {
+    case '会签': {
+      changeLoopCharacteristicsType('ParallelMultiInstance');
+      // eslint-disable-next-line no-template-curly-in-string
+      updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }');
+
+      break;
+    }
+    case '依次审批': {
+      changeLoopCharacteristicsType('SequentialMultiInstance');
+      updateLoopCardinality('1');
+      // eslint-disable-next-line no-template-curly-in-string
+      updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }');
+
+      break;
+    }
+    case '或签': {
+      changeLoopCharacteristicsType('ParallelMultiInstance');
+      // eslint-disable-next-line no-template-curly-in-string
+      updateLoopCondition('${ nrOfCompletedInstances > 0 }');
+
+      break;
+    }
+    // No default
+  }
+};
+
+/**
+ * -----新版本多实例-----
+ */
+const approveMethod = ref<ApproveMethodType | undefined>();
+const approveRatio = ref<number>(100);
+const otherExtensions = ref<any[]>([]);
+const getElementLoopNew = (): void => {
+  if (props.type === 'UserTask') {
+    const loopCharacteristics =
+      bpmnElement.value.businessObject?.loopCharacteristics;
+    const extensionElements =
+      bpmnElement.value.businessObject?.extensionElements ??
+      bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+    approveMethod.value = extensionElements.values.find(
+      (ex: any) => ex.$type === `${prefix}:ApproveMethod`,
+    )?.value;
+
+    otherExtensions.value =
+      extensionElements.values.filter(
+        (ex: any) => ex.$type !== `${prefix}:ApproveMethod`,
+      ) ?? [];
+
+    if (!approveMethod.value) {
+      approveMethod.value = ApproveMethodType.SEQUENTIAL_APPROVE;
+      updateLoopCharacteristics();
+    }
+
+    // 如果是按比例会签，从现有 completionCondition 中解析比例，反推到 approveRatio
+    if (
+      approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO &&
+      loopCharacteristics?.completionCondition?.body
+    ) {
+      const body = loopCharacteristics.completionCondition.body as string;
+      // 形如 "${ nrOfCompletedInstances/nrOfInstances >= 0.9 }"
+      const match = body.match(/>=\s*(\d+(?:\.\d+)?)/);
+      if (match) {
+        const ratio = Number(match[1]);
+        if (!Number.isNaN(ratio)) {
+          approveRatio.value = ratio * 100;
+        }
+      }
+    }
+  }
+};
+const onApproveMethodChange = (): void => {
+  updateLoopCharacteristics();
+};
+const onApproveRatioChange = (): void => {
+  updateLoopCharacteristics();
+};
+const updateLoopCharacteristics = (): void => {
+  // 根据ApproveMethod生成multiInstanceLoopCharacteristics节点
+  if (approveMethod.value === ApproveMethodType.RANDOM_SELECT_ONE_APPROVE) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null,
+    });
+  } else {
+    if (approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        // eslint-disable-next-line no-template-curly-in-string
+        { isSequential: false, collection: '${coll_userList}' },
+      );
+      multiLoopInstance.value.completionCondition =
+        bpmnInstances().moddle.create('bpmn:FormalExpression', {
+          body: `\${ nrOfCompletedInstances/nrOfInstances >= ${
+            approveRatio.value / 100
+          }}`,
+        });
+    }
+    if (approveMethod.value === ApproveMethodType.ANY_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        // eslint-disable-next-line no-template-curly-in-string
+        { isSequential: false, collection: '${coll_userList}' },
+      );
+      multiLoopInstance.value.completionCondition =
+        bpmnInstances().moddle.create('bpmn:FormalExpression', {
+          // eslint-disable-next-line no-template-curly-in-string
+          body: '${ nrOfCompletedInstances > 0 }',
+        });
+    }
+    if (approveMethod.value === ApproveMethodType.SEQUENTIAL_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        // eslint-disable-next-line no-template-curly-in-string
+        { isSequential: true, collection: '${coll_userList}' },
+      );
+      multiLoopInstance.value.loopCardinality = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '1',
+        },
+      );
+      multiLoopInstance.value.completionCondition =
+        bpmnInstances().moddle.create('bpmn:FormalExpression', {
+          // eslint-disable-next-line no-template-curly-in-string
+          body: '${ nrOfCompletedInstances >= nrOfInstances }',
+        });
+    }
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: toRaw(multiLoopInstance.value),
+    });
+  }
+
+  // 添加ApproveMethod到ExtensionElements
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:ApproveMethod`, {
+        value: approveMethod.value,
+      }),
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+onBeforeUnmount(() => {
+  multiLoopInstance.value = null;
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        bpmnElement.value = bpmnInstances().bpmnElement;
+        // getElementLoop(val)
+        getElementLoopNew();
+      });
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="-mx-2 px-2">
+    <ElRadioGroup
+      v-if="type === 'UserTask'"
+      v-model="approveMethod"
+      @change="onApproveMethodChange"
+    >
+      <div class="flex flex-col gap-3">
+        <div v-for="(item, index) in APPROVE_METHODS" :key="index">
+          <ElRadio :value="item.value">
+            {{ item.label }}
+          </ElRadio>
+          <ElInputNumber
+            v-if="
+              item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+              approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+            "
+            v-model="approveRatio"
+            :min="10"
+            :max="100"
+            :step="10"
+            size="small"
+            @change="onApproveRatioChange"
+          />
+        </div>
+      </div>
+    </ElRadioGroup>
+    <div v-else>除了UserTask以外节点的多实例待实现</div>
+    <!-- 与Simple设计器配置合并，保留以前的代码 -->
+    <ElForm class="hidden">
+      <ElFormItem label="快捷配置">
+        <ElButton size="small" @click="() => changeConfig('依次审批')">
+          依次审批
+        </ElButton>
+        <ElButton size="small" @click="() => changeConfig('会签')">
+          会签
+        </ElButton>
+        <ElButton size="small" @click="() => changeConfig('或签')">
+          或签
+        </ElButton>
+      </ElFormItem>
+      <ElFormItem label="会签类型">
+        <ElSelect
+          v-model="loopCharacteristics"
+          @change="changeLoopCharacteristicsType"
+        >
+          <ElOption value="ParallelMultiInstance" label="并行多重事件" />
+          <ElOption value="SequentialMultiInstance" label="时序多重事件" />
+          <ElOption value="Null" label="无" />
+        </ElSelect>
+      </ElFormItem>
+      <template
+        v-if="
+          loopCharacteristics === 'ParallelMultiInstance' ||
+          loopCharacteristics === 'SequentialMultiInstance'
+        "
+      >
+        <ElFormItem label="循环数量" key="loopCardinality">
+          <ElInput
+            v-model="loopInstanceForm.loopCardinality"
+            clearable
+            @change="
+              () =>
+                updateLoopCardinality(loopInstanceForm.loopCardinality || '')
+            "
+          />
+        </ElFormItem>
+        <ElFormItem label="集合" key="collection" v-show="false">
+          <ElInput
+            v-model="loopInstanceForm.collection"
+            clearable
+            @change="() => updateLoopBase()"
+          />
+        </ElFormItem>
+        <!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
+        <ElFormItem label="元素变量" key="elementVariable" class="hidden">
+          <ElInput
+            v-model="loopInstanceForm.elementVariable"
+            clearable
+            @change="() => updateLoopBase()"
+          />
+        </ElFormItem>
+        <ElFormItem label="完成条件" key="completionCondition">
+          <ElInput
+            v-model="loopInstanceForm.completionCondition"
+            clearable
+            @change="
+              () =>
+                updateLoopCondition(loopInstanceForm.completionCondition || '')
+            "
+          />
+        </ElFormItem>
+        <!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
+        <ElFormItem label="异步状态" key="async" class="hidden">
+          <ElCheckbox
+            v-model="loopInstanceForm.asyncBefore"
+            @change="() => updateLoopAsync('asyncBefore')"
+          >
+            异步前
+          </ElCheckbox>
+          <ElCheckbox
+            v-model="loopInstanceForm.asyncAfter"
+            @change="() => updateLoopAsync('asyncAfter')"
+          >
+            异步后
+          </ElCheckbox>
+          <ElCheckbox
+            v-model="loopInstanceForm.exclusive"
+            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+            @change="() => updateLoopAsync('exclusive')"
+          >
+            排除
+          </ElCheckbox>
+        </ElFormItem>
+        <ElFormItem
+          label="重试周期"
+          prop="timeCycle"
+          v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+          key="timeCycle"
+        >
+          <ElInput
+            v-model="loopInstanceForm.timeCycle"
+            clearable
+            @change="
+              () => updateLoopTimeCycle(loopInstanceForm.timeCycle || '')
+            "
+          />
+        </ElFormItem>
+      </template>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
new file mode 100644
index 000000000..cdfe85199
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { ElInput } from 'element-plus';
+
+defineOptions({ name: 'ElementOtherConfig' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+});
+
+const documentation = ref('');
+const bpmnElement = ref();
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+
+const updateDocumentation = () => {
+  (bpmnElement.value && bpmnElement.value.id === props.id) ||
+    (bpmnElement.value = bpmnInstances().elementRegistry.get(props.id));
+  const documentations = bpmnInstances().bpmnFactory.create(
+    'bpmn:Documentation',
+    {
+      text: documentation.value,
+    },
+  );
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    documentation: [documentations],
+  });
+};
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  (id) => {
+    if (id && id.length > 0) {
+      nextTick(() => {
+        const documentations =
+          bpmnInstances().bpmnElement.businessObject?.documentation;
+        documentation.value =
+          documentations && documentations.length > 0
+            ? documentations[0].text
+            : '';
+      });
+    } else {
+      documentation.value = '';
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="px-2 py-1">
+    <div class="flex items-start gap-2">
+      <div class="w-20 pt-1 text-sm text-gray-700">元素文档：</div>
+      <div class="flex-1">
+        <ElInput
+          type="textarea"
+          v-model="documentation"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          @change="updateDocumentation"
+          @blur="updateDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
new file mode 100644
index 000000000..6105f04d2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import { inject, nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { ElButton, ElDivider, ElForm, ElFormItem, ElInput } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+defineOptions({ name: 'ElementProperties' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+
+const prefix = inject('prefix');
+
+const elementPropertyList = ref<Array<{ name: string; value: string }>>([]);
+const propertyForm = ref<{ name?: string; value?: string }>({});
+const editingPropertyIndex = ref(-1);
+const otherExtensionList = ref<any[]>([]);
+const bpmnElementProperties = ref<any[]>([]);
+const bpmnElementPropertyList = ref<any[]>([]);
+const attributeFormRef = ref<any>();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetAttributesList = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value = []; // 其他扩展配置
+  bpmnElementProperties.value =
+    businessObject?.extensionElements?.values?.filter((ex: any) => {
+      if (ex.$type !== `${prefix}:Properties`) {
+        otherExtensionList.value.push(ex);
+      }
+      return ex.$type === `${prefix}:Properties`;
+    }) ?? [];
+
+  bpmnElementPropertyList.value = bpmnElementProperties.value.flatMap(
+    (current: any) => current.values,
+  );
+  elementPropertyList.value = cloneDeep(bpmnElementPropertyList.value ?? []);
+};
+
+const removeAttributes = (
+  _attr: { name: string; value: string },
+  index: number,
+) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该属性吗？',
+  }).then(() => {
+    elementPropertyList.value.splice(index, 1);
+    bpmnElementPropertyList.value.splice(index, 1);
+    const propertiesObject = bpmnInstances().moddle.create(
+      `${prefix}:Properties`,
+      {
+        values: bpmnElementPropertyList.value,
+      },
+    );
+    updateElementExtensions(propertiesObject);
+    resetAttributesList();
+  });
+};
+
+const saveAttribute = async () => {
+  try {
+    await attributeFormRef.value?.validate();
+  } catch {
+    // 校验未通过，直接返回
+    return;
+  }
+
+  const { name, value } = propertyForm.value;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
+  if (editingPropertyIndex.value === -1) {
+    // 新建属性字段
+    const newPropertyObject = instances.moddle.create(`${prefix}:Property`, {
+      name,
+      value,
+    });
+    // 新建一个属性字段的保存列表
+    const propertiesObject = instances.moddle.create(`${prefix}:Properties`, {
+      values: [...bpmnElementPropertyList.value, newPropertyObject],
+    });
+    updateElementExtensions(propertiesObject);
+  } else {
+    instances.modeling.updateModdleProperties(
+      bpmnElement,
+      bpmnElementPropertyList.value[editingPropertyIndex.value],
+      {
+        name,
+        value,
+      },
+    );
+  }
+  fieldModalApi.close();
+  resetAttributesList();
+};
+
+const updateElementExtensions = (properties: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const extensions = instances.moddle.create('bpmn:ExtensionElements', {
+    values: [...otherExtensionList.value, properties],
+  });
+  instances.modeling.updateProperties(bpmnElement, {
+    extensionElements: extensions,
+  });
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '属性名', minWidth: 120 },
+      { field: 'value', title: '属性值', minWidth: 120 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [FieldModal, fieldModalApi] = useVbenModal({
+  title: '属性配置',
+  onConfirm: saveAttribute,
+});
+
+const openAttributesForm = (
+  attr: null | { name: string; value: string },
+  index: number,
+) => {
+  editingPropertyIndex.value = index;
+  propertyForm.value = index === -1 ? {} : cloneDeep(attr || {});
+  fieldModalApi.open();
+  nextTick(() => {
+    if (attributeFormRef.value) attributeFormRef.value.clearValidate();
+  });
+};
+
+watch(
+  elementPropertyList,
+  (val) => {
+    gridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val && val.length > 0) {
+      resetAttributesList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="-mx-2">
+    <Grid :data="elementPropertyList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openAttributesForm(row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeAttributes(row, rowIndex)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </Grid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openAttributesForm(null, -1)"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加属性
+      </ElButton>
+    </div>
+
+    <FieldModal class="w-3/5">
+      <ElForm :model="propertyForm" ref="attributeFormRef" label-width="80px">
+        <ElFormItem
+          label="属性名："
+          prop="name"
+          :rules="[{ required: true, message: '请输入属性名' }]"
+        >
+          <ElInput v-model="propertyForm.name" clearable />
+        </ElFormItem>
+        <ElFormItem
+          label="属性值："
+          prop="value"
+          :rules="[{ required: true, message: '请输入属性值' }]"
+        >
+          <ElInput v-model="propertyForm.value" clearable />
+        </ElFormItem>
+      </ElForm>
+    </FieldModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
new file mode 100644
index 000000000..9821b041c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
@@ -0,0 +1,337 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDivider, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import SignalMessageModal from './SignalMessageModal.vue';
+
+defineOptions({ name: 'SignalAndMassage' });
+const signalList = ref<any[]>([]);
+const messageList = ref<any[]>([]);
+const modelType = ref<'message' | 'signal'>('message');
+const rootElements = ref();
+const messageIdMap = ref();
+const signalIdMap = ref();
+const editingIndex = ref(-1); // 正在编辑的索引，-1 表示新建
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// 生成规范化的ID
+const generateStandardId = (type: string): string => {
+  const prefix = type === 'message' ? 'Message_' : 'Signal_';
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `${prefix}${timestamp}_${random}`;
+};
+
+const initDataList = () => {
+  rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements;
+  messageIdMap.value = {};
+  signalIdMap.value = {};
+  messageList.value = [];
+  signalList.value = [];
+  rootElements.value.forEach((el: any) => {
+    if (el.$type === 'bpmn:Message') {
+      messageIdMap.value[el.id] = true;
+      messageList.value.push({ ...el });
+    }
+    if (el.$type === 'bpmn:Signal') {
+      signalIdMap.value[el.id] = true;
+      signalList.value.push({ ...el });
+    }
+  });
+};
+
+const openModel = (type: 'message' | 'signal') => {
+  modelType.value = type;
+  editingIndex.value = -1;
+  modalApi
+    .setData({
+      id: generateStandardId(type),
+      isEdit: false,
+      name: '',
+      type,
+    })
+    .open();
+};
+
+const openEditModel = (type: 'message' | 'signal', row: any, index: number) => {
+  modelType.value = type;
+  editingIndex.value = index;
+  modalApi
+    .setData({
+      id: row.id,
+      isEdit: true,
+      name: row.name,
+      type,
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
+  if (modelType.value === 'message') {
+    if (editingIndex.value === -1) {
+      // 新建模式
+      if (messageIdMap.value[formData.id]) {
+        ElMessage.error('该消息已存在，请修改id后重新保存');
+        return;
+      }
+      const messageRef = bpmnInstances().moddle.create(
+        'bpmn:Message',
+        formData,
+      );
+      rootElements.value.push(messageRef);
+    } else {
+      // 编辑模式
+      const targetMessage = messageList.value[editingIndex.value];
+      const rootMessage = rootElements.value.find(
+        (el: any) => el.$type === 'bpmn:Message' && el.id === targetMessage.id,
+      );
+      if (rootMessage) {
+        rootMessage.id = formData.id;
+        rootMessage.name = formData.name;
+      }
+    }
+  } else {
+    if (editingIndex.value === -1) {
+      // 新建模式
+      if (signalIdMap.value[formData.id]) {
+        ElMessage.error('该信号已存在，请修改id后重新保存');
+        return;
+      }
+      const signalRef = bpmnInstances().moddle.create('bpmn:Signal', formData);
+      rootElements.value.push(signalRef);
+    } else {
+      // 编辑模式
+      const targetSignal = signalList.value[editingIndex.value];
+      const rootSignal = rootElements.value.find(
+        (el: any) => el.$type === 'bpmn:Signal' && el.id === targetSignal.id,
+      );
+      if (rootSignal) {
+        rootSignal.id = formData.id;
+        rootSignal.name = formData.name;
+      }
+    }
+  }
+  // 触发建模器更新以保存更改
+  saveChanges();
+  initDataList();
+};
+
+// 补充"编辑"、"移除"功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270
+const removeObject = (type: any, row: any) => {
+  confirm({
+    title: '提示',
+    content: `确认移除该${type === 'message' ? '消息' : '信号'}吗？`,
+  }).then(() => {
+    // 从 rootElements 中移除
+    const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
+    const elementIndex = rootElements.value.findIndex(
+      (el: any) => el.$type === targetType && el.id === row.id,
+    );
+    if (elementIndex !== -1) {
+      rootElements.value.splice(elementIndex, 1);
+    }
+    // 刷新列表
+    initDataList();
+    ElMessage.success('移除成功');
+  });
+};
+
+// 触发建模器更新以保存更改
+const saveChanges = () => {
+  const modeler = bpmnInstances().modeler;
+  if (!modeler) return;
+
+  try {
+    // 获取 canvas，通过它来触发图表的重新渲染
+    const canvas = modeler.get('canvas');
+
+    // 获取根元素（Process）
+    const rootElement = canvas.getRootElement();
+
+    // 触发 changed 事件，通知建模器数据已更改
+    const eventBus = modeler.get('eventBus');
+    if (eventBus) {
+      eventBus.fire('root.added', { element: rootElement });
+      eventBus.fire('elements.changed', { elements: [rootElement] });
+    }
+
+    // 标记建模器为已修改状态
+    const commandStack = modeler.get('commandStack');
+    if (commandStack && commandStack._stack) {
+      // 添加一个空命令以标记为已修改
+      commandStack.execute('element.updateProperties', {
+        element: rootElement,
+        properties: {},
+      });
+    }
+  } catch (error) {
+    console.warn('保存更改时出错:', error);
+  }
+};
+
+const [MessageGrid, messageGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'id', title: '消息ID', minWidth: 120 },
+      { field: 'name', title: '消息名称', minWidth: 100 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [SignalGrid, signalGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'id', title: '信号ID', minWidth: 120 },
+      { field: 'name', title: '信号名称', minWidth: 100 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
+
+onMounted(() => {
+  initDataList();
+});
+
+watch(
+  messageList,
+  (val) => {
+    messageGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  signalList,
+  (val) => {
+    signalGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+</script>
+<template>
+  <div class="-mx-2">
+    <div class="mb-2 flex items-center justify-between">
+      <span class="flex items-center">
+        <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+        消息列表
+      </span>
+      <ElButton
+        class="flex items-center"
+        size="small"
+        type="primary"
+        link
+        @click="openModel('message')"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        创建新消息
+      </ElButton>
+    </div>
+    <MessageGrid :data="messageList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openEditModel('message', row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeObject('message', row)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </MessageGrid>
+    <div
+      class="mb-2 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+    >
+      <span class="flex items-center">
+        <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+        信号列表
+      </span>
+      <ElButton
+        class="flex items-center"
+        size="small"
+        type="primary"
+        link
+        @click="openModel('signal')"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        创建新信号
+      </ElButton>
+    </div>
+    <SignalGrid :data="signalList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openEditModel('signal', row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeObject('signal', row)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </SignalGrid>
+
+    <Modal @confirm="handleConfirm" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
new file mode 100644
index 000000000..45d185dd4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElForm, ElFormItem, ElInput } from 'element-plus';
+
+defineOptions({ name: 'SignalMessageModal' });
+
+const emit = defineEmits<{
+  confirm: [data: { id: string; name: string }];
+}>();
+
+const formRef = ref();
+const form = ref<{ id: string; name: string }>({ id: '', name: '' });
+const modelType = ref<'message' | 'signal'>('message');
+const isEdit = ref(false);
+
+const config = computed(() => {
+  return modelType.value === 'message'
+    ? {
+        title: isEdit.value ? '编辑消息' : '创建消息',
+        idLabel: '消息 ID',
+        nameLabel: '消息名称',
+      }
+    : {
+        title: isEdit.value ? '编辑信号' : '创建信号',
+        idLabel: '信号 ID',
+        nameLabel: '信号名称',
+      };
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        id?: string;
+        isEdit?: boolean;
+        name?: string;
+        type: 'message' | 'signal';
+      }>();
+      modelType.value = data?.type || 'message';
+      isEdit.value = data?.isEdit || false;
+      form.value = {
+        id: data?.id || '',
+        name: data?.name || '',
+      };
+      // 清除校验
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // 校验未通过
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="config.title" class="w-3/5">
+    <ElForm ref="formRef" :model="form" label-width="80px">
+      <ElFormItem
+        :label="config.idLabel"
+        prop="id"
+        :rules="[{ required: true, message: '请输入 ID' }]"
+      >
+        <ElInput v-model="form.id" clearable />
+      </ElFormItem>
+      <ElFormItem
+        :label="config.nameLabel"
+        prop="name"
+        :rules="[{ required: true, message: '请输入名称' }]"
+      >
+        <ElInput v-model="form.name" clearable />
+      </ElFormItem>
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
new file mode 100644
index 000000000..4ae00da73
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { ElCheckbox, ElForm, ElFormItem } from 'element-plus';
+
+import { installedComponent } from './data';
+
+defineOptions({ name: 'ElementTaskConfig' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const taskConfigForm = ref({
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false,
+});
+const witchTaskComponent = ref();
+
+const bpmnElement = ref();
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+const changeTaskAsync = () => {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false;
+  }
+  bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
+    ...taskConfigForm.value,
+  });
+};
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    taskConfigForm.value.asyncBefore =
+      bpmnElement.value?.businessObject?.asyncBefore;
+    taskConfigForm.value.asyncAfter =
+      bpmnElement.value?.businessObject?.asyncAfter;
+    taskConfigForm.value.exclusive =
+      bpmnElement.value?.businessObject?.exclusive;
+  },
+  { immediate: true },
+);
+watch(
+  () => props.type,
+  () => {
+    if (props.type) {
+      // @ts-ignore
+      witchTaskComponent.value = installedComponent[props.type].component;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <ElForm>
+      <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
+      <ElFormItem label="异步延续" class="hidden">
+        <ElCheckbox
+          v-model="taskConfigForm.asyncBefore"
+          @change="changeTaskAsync"
+        >
+          异步前
+        </ElCheckbox>
+        <ElCheckbox
+          v-model="taskConfigForm.asyncAfter"
+          @change="changeTaskAsync"
+        >
+          异步后
+        </ElCheckbox>
+        <ElCheckbox
+          v-model="taskConfigForm.exclusive"
+          v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
+          @change="changeTaskAsync"
+        >
+          排除
+        </ElCheckbox>
+      </ElFormItem>
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
new file mode 100644
index 000000000..d453b382c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
@@ -0,0 +1,40 @@
+import CallActivity from './task-components/CallActivity.vue';
+import ReceiveTask from './task-components/ReceiveTask.vue';
+import ScriptTask from './task-components/ScriptTask.vue';
+import ServiceTask from './task-components/ServiceTask.vue';
+import UserTask from './task-components/UserTask.vue';
+
+export const installedComponent = {
+  UserTask: {
+    name: '用户任务',
+    component: UserTask,
+  },
+  ServiceTask: {
+    name: '服务任务',
+    component: ServiceTask,
+  },
+  ScriptTask: {
+    name: '脚本任务',
+    component: ScriptTask,
+  },
+  ReceiveTask: {
+    name: '接收任务',
+    component: ReceiveTask,
+  },
+  CallActivity: {
+    name: '调用活动',
+    component: CallActivity,
+  },
+};
+
+export const getTaskCollapseItemName = (
+  elementType: keyof typeof installedComponent,
+) => {
+  return installedComponent[elementType].name;
+};
+
+export const isTaskCollapseItemShow = (
+  elementType: keyof typeof installedComponent,
+) => {
+  return installedComponent[elementType];
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
new file mode 100644
index 000000000..dfdf17647
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
@@ -0,0 +1,418 @@
+<script lang="ts" setup>
+import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getModelList } from '#/api/bpm/model';
+
+interface FormData {
+  processInstanceName: string;
+  calledElement: string;
+  inheritVariables: boolean;
+  businessKey: string;
+  inheritBusinessKey: boolean;
+  calledElementType: string;
+}
+
+defineOptions({ name: 'CallActivity' });
+const props = defineProps({
+  id: { type: String, default: '' },
+  type: { type: String, default: '' },
+});
+const prefix = inject('prefix');
+
+const formData = ref<FormData>({
+  processInstanceName: '',
+  calledElement: '',
+  inheritVariables: false,
+  businessKey: '',
+  inheritBusinessKey: false,
+  calledElementType: 'key',
+});
+const inVariableList = ref<any[]>([]);
+const outVariableList = ref<any[]>([]);
+const variableType = ref<string>(); // 参数类型
+const editingVariableIndex = ref<number>(-1); // 编辑参数下标
+const varialbeFormRef = ref();
+const varialbeFormData = ref<{
+  source: string;
+  target: string;
+}>({
+  source: '',
+  target: '',
+});
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+const bpmnElement = ref<any>();
+const otherExtensionList = ref<any[]>([]);
+const childProcessOptions = ref<{ key: string; name: string }[]>([]);
+
+const initCallActivity = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+
+  // 初始化所有配置项
+  Object.keys(formData.value).forEach((key: string) => {
+    // @ts-ignore
+    formData.value[key] =
+      bpmnElement.value.businessObject[key] ??
+      formData.value[key as keyof FormData];
+  });
+
+  otherExtensionList.value = []; // 其他扩展配置
+  inVariableList.value.length = 0;
+  outVariableList.value.length = 0;
+  // 初始化输入参数
+  bpmnElement.value.businessObject?.extensionElements?.values?.forEach(
+    (ex: any) => {
+      if (ex.$type === `${prefix}:In`) {
+        inVariableList.value.push(ex);
+      } else if (ex.$type === `${prefix}:Out`) {
+        outVariableList.value.push(ex);
+      } else {
+        otherExtensionList.value.push(ex);
+      }
+    },
+  );
+};
+
+const updateCallActivityAttr = (attr: keyof FormData) => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    [attr]: formData.value[attr],
+  });
+};
+
+const [VariableModal, variableModalApi] = useVbenModal({
+  title: '参数配置',
+  onConfirm: () => {
+    saveVariable();
+  },
+});
+
+const openVariableForm = (type: string, data: any, index: number) => {
+  editingVariableIndex.value = index;
+  variableType.value = type;
+  varialbeFormData.value = index === -1 ? {} : { ...data };
+  variableModalApi.open();
+};
+
+const removeVariable = async (type: string, index: number) => {
+  try {
+    await confirm({
+      title: '提示',
+      content: '是否确认删除？',
+    });
+    if (type === 'in') {
+      inVariableList.value.splice(index, 1);
+    }
+    if (type === 'out') {
+      outVariableList.value.splice(index, 1);
+    }
+    updateElementExtensions();
+  } catch (error: any) {
+    console.error(`[removeVariable error ]: ${error.message || error}`);
+  }
+};
+
+const saveVariable = async () => {
+  try {
+    await varialbeFormRef.value?.validate();
+  } catch {
+    // 验证失败直接返回
+    return;
+  }
+
+  if (editingVariableIndex.value === -1) {
+    if (variableType.value === 'in') {
+      inVariableList.value.push(
+        bpmnInstances().moddle.create(`${prefix}:In`, {
+          ...varialbeFormData.value,
+        }),
+      );
+    }
+    if (variableType.value === 'out') {
+      outVariableList.value.push(
+        bpmnInstances().moddle.create(`${prefix}:Out`, {
+          ...varialbeFormData.value,
+        }),
+      );
+    }
+    updateElementExtensions();
+  } else {
+    if (variableType.value === 'in') {
+      inVariableList.value[editingVariableIndex.value].source =
+        varialbeFormData.value.source;
+      inVariableList.value[editingVariableIndex.value].target =
+        varialbeFormData.value.target;
+    }
+    if (variableType.value === 'out') {
+      outVariableList.value[editingVariableIndex.value].source =
+        varialbeFormData.value.source;
+      outVariableList.value[editingVariableIndex.value].target =
+        varialbeFormData.value.target;
+    }
+  }
+  variableModalApi.close();
+};
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...inVariableList.value,
+      ...outVariableList.value,
+      ...otherExtensionList.value,
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        initCallActivity();
+      });
+  },
+  { immediate: true },
+);
+
+const gridOptions = {
+  columns: [
+    { title: '源', field: 'source', minWidth: 100 },
+    { title: '目标', field: 'target', minWidth: 100 },
+    {
+      title: '操作',
+      width: 130,
+      slots: { default: 'action' },
+      fixed: 'right' as const,
+    },
+  ],
+  border: true,
+  showOverflow: true,
+  height: 'auto',
+  toolbarConfig: { enabled: false },
+  pagerConfig: { enabled: false },
+};
+
+const [InVariableGrid, inVariableGridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+const [OutVariableGrid, outVariableGridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+// 使用浅层监听，避免无限循环
+watch(
+  () => [...inVariableList.value],
+  (val) => {
+    inVariableGridApi.setGridOptions({ data: val });
+  },
+);
+
+watch(
+  () => [...outVariableList.value],
+  (val) => {
+    outVariableGridApi.setGridOptions({ data: val });
+  },
+);
+
+/** 选择子流程, 更新 bpmn callActivity calledElement 和 processInstanceName 属性 */
+const handleChildProcessChange = (key: any) => {
+  if (!key) return;
+  const selected = childProcessOptions.value.find((item) => item.key === key);
+  if (selected) {
+    formData.value.calledElement = selected.key;
+    formData.value.processInstanceName = selected.name;
+    updateCallActivityAttr('calledElement');
+    updateCallActivityAttr('processInstanceName');
+  }
+};
+
+onMounted(async () => {
+  try {
+    // 获取流程模型列表
+    const list = await getModelList(undefined);
+    childProcessOptions.value = list.map((item) => ({
+      key: item.key,
+      name: item.name,
+    }));
+  } catch (error) {
+    console.error('获取子流程列表失败', error);
+  }
+});
+</script>
+
+<template>
+  <div class="-mx-2">
+    <ElForm label-width="100px">
+      <ElFormItem label="被调用子流程">
+        <ElSelect
+          v-model="formData.calledElement"
+          placeholder="请选择子流程"
+          clearable
+          @change="handleChildProcessChange"
+        >
+          <ElOption
+            v-for="item in childProcessOptions"
+            :key="item.key"
+            :value="item.key"
+            :label="item.name"
+          />
+        </ElSelect>
+      </ElFormItem>
+
+      <ElFormItem label="继承变量">
+        <ElSwitch
+          v-model="formData.inheritVariables"
+          @change="updateCallActivityAttr('inheritVariables')"
+        />
+      </ElFormItem>
+
+      <ElFormItem label="继承业务键">
+        <ElSwitch
+          v-model="formData.inheritBusinessKey"
+          @change="updateCallActivityAttr('inheritBusinessKey')"
+        />
+      </ElFormItem>
+
+      <ElFormItem v-if="!formData.inheritBusinessKey" label="业务键表达式">
+        <ElInput
+          v-model="formData.businessKey"
+          clearable
+          placeholder="请输入业务键表达式"
+          @change="updateCallActivityAttr('businessKey')"
+        />
+      </ElFormItem>
+
+      <div
+        class="mb-1 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+      >
+        <span class="flex items-center text-sm font-medium"> 输入参数 </span>
+        <ElButton
+          class="flex items-center"
+          size="small"
+          type="primary"
+          link
+          @click="openVariableForm('in', null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
+          添加参数
+        </ElButton>
+      </div>
+      <InVariableGrid class="-mx-2 mb-4">
+        <template #action="{ row, rowIndex }">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="openVariableForm('in', row, rowIndex)"
+          >
+            编辑
+          </ElButton>
+          <ElDivider direction="vertical" />
+          <ElButton
+            size="small"
+            type="danger"
+            link
+            @click="removeVariable('in', rowIndex)"
+          >
+            移除
+          </ElButton>
+        </template>
+      </InVariableGrid>
+
+      <div
+        class="mb-1 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+      >
+        <span class="flex items-center text-sm font-medium"> 输出参数 </span>
+        <ElButton
+          class="flex items-center"
+          size="small"
+          type="primary"
+          link
+          @click="openVariableForm('out', null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="lucide:plus" class="size-4" />
+          </template>
+          添加参数
+        </ElButton>
+      </div>
+      <OutVariableGrid class="-mx-2">
+        <template #action="{ row, rowIndex }">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="openVariableForm('out', row, rowIndex)"
+          >
+            编辑
+          </ElButton>
+          <ElDivider direction="vertical" />
+          <ElButton
+            size="small"
+            type="danger"
+            link
+            @click="removeVariable('out', rowIndex)"
+          >
+            移除
+          </ElButton>
+        </template>
+      </OutVariableGrid>
+    </ElForm>
+
+    <VariableModal>
+      <ElForm
+        :model="varialbeFormData"
+        ref="varialbeFormRef"
+        label-width="60px"
+      >
+        <ElFormItem
+          label="源"
+          prop="source"
+          :rules="[
+            {
+              required: true,
+              message: '源不能为空',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="varialbeFormData.source" clearable />
+        </ElFormItem>
+        <ElFormItem
+          label="目标"
+          prop="target"
+          :rules="[
+            {
+              required: true,
+              message: '目标不能为空',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="varialbeFormData.target" clearable />
+        </ElFormItem>
+      </ElForm>
+    </VariableModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
new file mode 100644
index 000000000..6c994b608
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElInput } from 'element-plus';
+
+defineOptions({ name: 'HttpHeaderEditor' });
+
+const emit = defineEmits(['save']);
+
+interface HeaderItem {
+  key: string;
+  value: string;
+}
+
+const headerList = ref<HeaderItem[]>([]);
+
+// 解析请求头字符串为列表
+const parseHeaders = (headersStr: string): HeaderItem[] => {
+  if (!headersStr || !headersStr.trim()) {
+    return [{ key: '', value: '' }];
+  }
+
+  const lines = headersStr.split('\n').filter((line) => line.trim());
+  const parsed = lines.map((line) => {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      return {
+        key: line.slice(0, Math.max(0, colonIndex)).trim(),
+        value: line.slice(Math.max(0, colonIndex + 1)).trim(),
+      };
+    }
+    return { key: line.trim(), value: '' };
+  });
+
+  return parsed.length > 0 ? parsed : [{ key: '', value: '' }];
+};
+
+// 将列表转换为请求头字符串
+const stringifyHeaders = (headers: HeaderItem[]): string => {
+  return headers
+    .filter((item) => item.key.trim())
+    .map((item) => `${item.key}: ${item.value}`)
+    .join('\n');
+};
+
+// 添加请求头
+const addHeader = () => {
+  headerList.value.push({ key: '', value: '' });
+};
+
+// 移除请求头
+const removeHeader = (index: number) => {
+  if (headerList.value.length === 1) {
+    // 至少保留一行
+    headerList.value = [{ key: '', value: '' }];
+  } else {
+    headerList.value.splice(index, 1);
+  }
+};
+
+// 保存
+const handleSave = () => {
+  const headersStr = stringifyHeaders(headerList.value);
+  emit('save', headersStr);
+  modalApi.close();
+};
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    const { headers } = modalApi.getData();
+    headerList.value = parseHeaders(headers);
+  },
+  onConfirm: handleSave,
+});
+</script>
+
+<template>
+  <Modal title="编辑请求头" class="w-3/5">
+    <div class="space-y-4">
+      <div class="mb-2 space-y-3 overflow-y-auto">
+        <div
+          v-for="(item, index) in headerList"
+          :key="index"
+          class="flex items-center gap-2"
+        >
+          <ElInput
+            v-model="item.key"
+            placeholder="请输入参数名"
+            class="w-48"
+            clearable
+          />
+          <span class="font-medium text-gray-600">:</span>
+          <ElInput
+            v-model="item.value"
+            placeholder="请输入参数值 (支持表达式 ${变量名})"
+            class="flex-1"
+            clearable
+          />
+          <ElButton
+            type="danger"
+            text
+            size="small"
+            @click="removeHeader(index)"
+          >
+            <template #icon>
+              <IconifyIcon icon="ep:delete" />
+            </template>
+          </ElButton>
+        </div>
+      </div>
+      <ElButton type="primary" class="w-full" @click="addHeader">
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加请求头
+      </ElButton>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
new file mode 100644
index 000000000..9cdd9a36d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElMessage, ElOption, ElSelect } from 'element-plus';
+
+import SignalMessageModal from '../../signal-message/SignalMessageModal.vue';
+
+defineOptions({ name: 'ReceiveTask' });
+const props = defineProps({
+  id: { type: String, default: '' },
+  type: { type: String, default: '' },
+});
+
+const bindMessageId = ref('');
+const messageMap = ref<Record<string, any>>({});
+const bpmnElement = ref<any>();
+const bpmnMessageRefsMap = ref<Record<string, any>>();
+const bpmnRootElements = ref<any>();
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+
+const getBindMessage = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+  bindMessageId.value =
+    bpmnElement.value.businessObject?.messageRef?.id || '-1';
+};
+
+/** 生成消息 ID */
+const generateMessageId = (): string => {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `Message_${timestamp}_${random}`;
+};
+
+/** 打开创建消息弹窗 */
+const openCreateModal = () => {
+  modalApi
+    .setData({
+      id: generateMessageId(),
+      isEdit: false,
+      name: '',
+      type: 'message',
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
+  if (messageMap.value[formData.id]) {
+    ElMessage.error('该消息已存在, 请修改id后重新保存');
+    return;
+  }
+  const newMessage = bpmnInstances().moddle.create('bpmn:Message', formData);
+  bpmnRootElements.value.push(newMessage);
+  messageMap.value[formData.id] = formData.name;
+  if (bpmnMessageRefsMap.value) {
+    bpmnMessageRefsMap.value[formData.id] = newMessage;
+  }
+};
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
+const updateTaskMessage = (messageId: string) => {
+  if (messageId === '-1') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      messageRef: null,
+    });
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      messageRef: bpmnMessageRefsMap.value?.[messageId],
+    });
+  }
+};
+
+onMounted(() => {
+  bpmnMessageRefsMap.value = Object.create(null);
+  bpmnRootElements.value =
+    bpmnInstances().modeler.getDefinitions().rootElements;
+  bpmnRootElements.value
+    .filter((el: any) => el.$type === 'bpmn:Message')
+    .forEach((m: any) => {
+      // @ts-ignore
+      if (bpmnMessageRefsMap.value) {
+        bpmnMessageRefsMap.value[m.id] = m;
+      }
+      messageMap.value[m.id] = m.name;
+    });
+  messageMap.value['-1'] = '无';
+});
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+watch(
+  () => props.id,
+  () => {
+    nextTick(() => {
+      getBindMessage();
+    });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="mt-2">
+    <div class="mb-2 flex justify-end">
+      <ElButton type="primary" link size="small" class="p-0" @click="openCreateModal">
+        <template #icon>
+          <IconifyIcon class="size-4" icon="lucide:plus" />
+        </template>
+        创建新消息
+      </ElButton>
+    </div>
+    <div class="mb-1 flex items-center">
+      <span class="w-20 text-foreground">消息实例:</span>
+      <ElSelect
+        v-model="bindMessageId"
+        class="w-full"
+        @change="(value: any) => updateTaskMessage(value)"
+      >
+        <ElOption
+          v-for="key in Object.keys(messageMap)"
+          :key="key"
+          :value="key"
+          :label="messageMap[key]"
+        />
+      </ElSelect>
+    </div>
+    <Modal @confirm="handleConfirm" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
new file mode 100644
index 000000000..c15dad114
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+defineOptions({ name: 'ScriptTask' });
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const defaultTaskForm = ref({
+  scriptFormat: '',
+  script: '',
+  resource: '',
+  resultVariable: '',
+});
+const scriptTaskForm = ref<any>({});
+const bpmnElement = ref();
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetTaskForm = () => {
+  for (const key in defaultTaskForm.value) {
+    // @ts-ignore
+    scriptTaskForm.value[key] =
+      bpmnElement.value?.businessObject[
+        key as keyof typeof defaultTaskForm.value
+      ] || defaultTaskForm.value[key as keyof typeof defaultTaskForm.value];
+  }
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script
+    ? 'inline'
+    : 'external';
+};
+const updateElementTask = () => {
+  const taskAttr = Object.create(null);
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null;
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null;
+  if (scriptTaskForm.value.scriptType === 'inline') {
+    taskAttr.script = scriptTaskForm.value.script || null;
+    taskAttr.resource = null;
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null;
+    taskAttr.script = null;
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
+};
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    nextTick(() => {
+      resetTaskForm();
+    });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="mt-4">
+    <ElForm label-width="80px">
+      <ElFormItem label="脚本格式">
+        <ElInput
+          v-model="scriptTaskForm.scriptFormat"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+      <!-- TODO scriptType  外部资源 和 内联脚本，  flowable 文档 https://www.flowable.com/open-source/docs/bpmn/ch07b-BPMN-Constructs#script-task  没看到到有相应的属性 -->
+      <ElFormItem label="脚本类型">
+        <ElSelect v-model="scriptTaskForm.scriptType">
+          <ElOption value="inline" label="内联脚本" />
+          <ElOption value="external" label="外部资源" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+        <ElInput
+          type="textarea"
+          v-model="scriptTaskForm.script"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+      <ElFormItem
+        label="资源地址"
+        v-show="scriptTaskForm.scriptType === 'external'"
+      >
+        <ElInput
+          v-model="scriptTaskForm.resource"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+      <ElFormItem label="结果变量">
+        <ElInput
+          v-model="scriptTaskForm.resultVariable"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
new file mode 100644
index 000000000..2994f1eb9
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
@@ -0,0 +1,487 @@
+<!-- eslint-disable prettier/prettier -->
+<script lang="ts" setup>
+import { inject, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { updateElementExtensions } from '../../../utils';
+import HttpHeaderEditor from './HttpHeaderEditor.vue';
+
+defineOptions({ name: 'ServiceTask' });
+const props = defineProps({
+  id: { type: String, default: '' },
+  type: { type: String, default: '' },
+});
+
+const prefix = (inject('prefix', 'flowable') || 'flowable') as string;
+const flowableTypeKey = `${prefix}:type`;
+const flowableFieldType = `${prefix}:Field`;
+
+const HTTP_FIELD_NAMES = [
+  'requestMethod',
+  'requestUrl',
+  'requestHeaders',
+  'disallowRedirects',
+  'ignoreException',
+  'saveResponseParameters',
+  'resultVariablePrefix',
+  'saveResponseParametersTransient',
+  'saveResponseVariableAsJson',
+];
+const HTTP_BOOLEAN_FIELDS = new Set([
+  'disallowRedirects',
+  'ignoreException',
+  'saveResponseParameters',
+  'saveResponseParametersTransient',
+  'saveResponseVariableAsJson',
+]);
+
+const DEFAULT_TASK_FORM = {
+  executeType: '',
+  class: '',
+  expression: '',
+  delegateExpression: '',
+};
+
+const DEFAULT_HTTP_FORM = {
+  requestMethod: 'GET',
+  requestUrl: '',
+  requestHeaders: 'Content-Type: application/json',
+  resultVariablePrefix: '',
+  disallowRedirects: false,
+  ignoreException: false,
+  saveResponseParameters: false,
+  saveResponseParametersTransient: false,
+  saveResponseVariableAsJson: false,
+};
+
+const serviceTaskForm = ref({ ...DEFAULT_TASK_FORM });
+const httpTaskForm = ref<any>({ ...DEFAULT_HTTP_FORM });
+const bpmnElement = ref();
+const httpInitializing = ref(false);
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// 判断字符串是否包含表达式
+const isExpression = (value: string): boolean => {
+  if (!value) return false;
+  // 检测 ${...} 或 #{...} 格式的表达式
+  return /\$\{[^}]+\}/.test(value) || /#\{[^}]+\}/.test(value);
+};
+
+const collectHttpExtensionInfo = () => {
+  const businessObject = bpmnElement.value?.businessObject;
+  const extensionElements = businessObject?.extensionElements;
+  const httpFields = new Map<string, string>();
+  const httpFieldTypes = new Map<string, 'expression' | 'string'>();
+  const otherExtensions: any[] = [];
+
+  extensionElements?.values?.forEach((item: any) => {
+    if (
+      item?.$type === flowableFieldType &&
+      HTTP_FIELD_NAMES.includes(item.name)
+    ) {
+      const value = item.string ?? item.stringValue ?? item.expression ?? '';
+      const fieldType = item.expression ? 'expression' : 'string';
+      httpFields.set(item.name, value);
+      httpFieldTypes.set(item.name, fieldType);
+    } else {
+      otherExtensions.push(item);
+    }
+  });
+
+  return { httpFields, httpFieldTypes, otherExtensions };
+};
+
+const resetHttpDefaults = () => {
+  httpInitializing.value = true;
+  httpTaskForm.value = { ...DEFAULT_HTTP_FORM };
+  nextTick(() => {
+    httpInitializing.value = false;
+  });
+};
+
+const resetHttpForm = () => {
+  httpInitializing.value = true;
+  const { httpFields } = collectHttpExtensionInfo();
+  const nextForm: any = { ...DEFAULT_HTTP_FORM };
+
+  HTTP_FIELD_NAMES.forEach((name) => {
+    const stored = httpFields.get(name);
+    if (stored !== undefined) {
+      nextForm[name] = HTTP_BOOLEAN_FIELDS.has(name)
+        ? stored === 'true'
+        : stored;
+    }
+  });
+
+  httpTaskForm.value = nextForm;
+  nextTick(() => {
+    httpInitializing.value = false;
+    updateHttpExtensions(true);
+  });
+};
+
+const resetServiceTaskForm = () => {
+  const businessObject = bpmnElement.value?.businessObject;
+  const nextForm = { ...DEFAULT_TASK_FORM };
+
+  if (businessObject) {
+    if (businessObject.class) {
+      nextForm.class = businessObject.class;
+      nextForm.executeType = 'class';
+    }
+    if (businessObject.expression) {
+      nextForm.expression = businessObject.expression;
+      nextForm.executeType = 'expression';
+    }
+    if (businessObject.delegateExpression) {
+      nextForm.delegateExpression = businessObject.delegateExpression;
+      nextForm.executeType = 'delegateExpression';
+    }
+    if (businessObject.$attrs?.[flowableTypeKey] === 'http') {
+      nextForm.executeType = 'http';
+    } else {
+      // 兜底：如缺少 flowable:type=http，但扩展里已有 HTTP 的字段，也认为是 HTTP
+      const { httpFields } = collectHttpExtensionInfo();
+      if (httpFields.size > 0) {
+        nextForm.executeType = 'http';
+      }
+    }
+  }
+
+  serviceTaskForm.value = nextForm;
+
+  if (nextForm.executeType === 'http') {
+    resetHttpForm();
+  } else {
+    resetHttpDefaults();
+  }
+};
+
+const shouldPersistField = (name: string, value: any) => {
+  if (HTTP_BOOLEAN_FIELDS.has(name)) return true;
+  if (name === 'requestMethod') return true;
+  if (name === 'requestUrl') return !!value;
+  return value !== undefined && value !== '';
+};
+
+const updateHttpExtensions = (force = false) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  if (
+    !force &&
+    (httpInitializing.value || serviceTaskForm.value.executeType !== 'http')
+  ) {
+    return;
+  }
+
+  const {
+    httpFields: existingFields,
+    httpFieldTypes: existingTypes,
+    otherExtensions,
+  } = collectHttpExtensionInfo();
+
+  const desiredEntries: [string, string][] = [];
+  HTTP_FIELD_NAMES.forEach((name) => {
+    const rawValue = httpTaskForm.value[name];
+    if (!shouldPersistField(name, rawValue)) {
+      return;
+    }
+
+    const persisted = HTTP_BOOLEAN_FIELDS.has(name)
+      ? String(!!rawValue)
+      : (rawValue === undefined
+        ? ''
+        : rawValue.toString());
+
+    desiredEntries.push([name, persisted]);
+  });
+
+  // 检查是否有变化：不仅比较值，还要比较字段类型（string vs expression）
+  if (!force && desiredEntries.length === existingFields.size) {
+    let noChange = true;
+    for (const [name, value] of desiredEntries) {
+      const existingValue = existingFields.get(name);
+      const existingType = existingTypes.get(name);
+      const currentType = isExpression(value) ? 'expression' : 'string';
+      if (existingValue !== value || existingType !== currentType) {
+        noChange = false;
+        break;
+      }
+    }
+    if (noChange) {
+      return;
+    }
+  }
+
+  const moddle = bpmnInstances().moddle;
+  const httpFieldElements = desiredEntries.map(([name, value]) => {
+    // 根据值是否包含表达式来决定使用 string 还是 expression 属性
+    const isExpr = isExpression(value);
+    return moddle.create(flowableFieldType, {
+      name,
+      ...(isExpr ? { expression: value } : { string: value }),
+    });
+  });
+
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensions,
+    ...httpFieldElements,
+  ]);
+};
+
+const removeHttpExtensions = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const { httpFields, otherExtensions } = collectHttpExtensionInfo();
+  if (httpFields.size === 0) {
+    return;
+  }
+
+  if (otherExtensions.length === 0) {
+    bpmnInstances().modeling.updateProperties(bpmnElement, {
+      extensionElements: null,
+    });
+    return;
+  }
+
+  updateElementExtensions(bpmnElement, otherExtensions);
+};
+
+const updateElementTask = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+
+  const taskAttr: Record<string, any> = {
+    class: null,
+    expression: null,
+    delegateExpression: null,
+    [flowableTypeKey]: null,
+  };
+
+  const type = serviceTaskForm.value.executeType;
+  if (
+    type === 'class' ||
+    type === 'expression' ||
+    type === 'delegateExpression'
+  ) {
+    taskAttr[type] = serviceTaskForm.value[type] || null;
+  } else if (type === 'http') {
+    taskAttr[flowableTypeKey] = 'http';
+  }
+
+  bpmnInstances().modeling.updateProperties(bpmnElement, taskAttr);
+
+  if (type === 'http') {
+    updateHttpExtensions(true);
+  } else {
+    removeHttpExtensions();
+  }
+};
+
+const handleExecuteTypeChange = (value: any) => {
+  serviceTaskForm.value.executeType = value;
+  if (value === 'http') {
+    resetHttpForm();
+  }
+  updateElementTask();
+};
+
+/** 打开请求头编辑器 */
+const openHttpHeaderEditor = () => {
+  httpHeaderEditorApi
+    .setData({
+      headers: httpTaskForm.value.requestHeaders,
+    })
+    .open();
+};
+
+/** 保存请求头 */
+const handleHeadersSave = (headersStr: string) => {
+  httpTaskForm.value.requestHeaders = headersStr;
+};
+
+const [HttpHeaderEditorModal, httpHeaderEditorApi] = useVbenModal({
+  connectedComponent: HttpHeaderEditor,
+});
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    nextTick(() => {
+      resetServiceTaskForm();
+    });
+  },
+  { immediate: true },
+);
+
+watch(
+  () => httpTaskForm.value,
+  () => {
+    updateHttpExtensions();
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div>
+    <ElForm label-width="100px">
+      <ElFormItem label="执行类型" key="executeType">
+        <ElSelect
+          v-model="serviceTaskForm.executeType"
+          @change="handleExecuteTypeChange"
+        >
+          <ElOption label="Java类" value="class" />
+          <ElOption label="表达式" value="expression" />
+          <ElOption label="代理表达式" value="delegateExpression" />
+          <ElOption label="HTTP 调用" value="http" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        v-if="serviceTaskForm.executeType === 'class'"
+        label="Java类"
+        prop="class"
+        key="execute-class"
+      >
+        <ElInput
+          v-model="serviceTaskForm.class"
+          clearable
+          @change="updateElementTask"
+        />
+      </ElFormItem>
+      <ElFormItem
+        v-if="serviceTaskForm.executeType === 'expression'"
+        label="表达式"
+        prop="expression"
+        key="execute-expression"
+      >
+        <ElInput
+          v-model="serviceTaskForm.expression"
+          clearable
+          @change="updateElementTask"
+        />
+      </ElFormItem>
+      <ElFormItem
+        v-if="serviceTaskForm.executeType === 'delegateExpression'"
+        label="代理表达式"
+        prop="delegateExpression"
+        key="execute-delegate"
+      >
+        <ElInput
+          v-model="serviceTaskForm.delegateExpression"
+          clearable
+          @change="updateElementTask"
+        />
+      </ElFormItem>
+      <template v-if="serviceTaskForm.executeType === 'http'">
+        <ElFormItem label="请求方法" key="http-method" prop="requestMethod">
+          <ElRadioGroup v-model="httpTaskForm.requestMethod">
+            <ElRadioButton value="GET">GET</ElRadioButton>
+            <ElRadioButton value="POST">POST</ElRadioButton>
+            <ElRadioButton value="PUT">PUT</ElRadioButton>
+            <ElRadioButton value="DELETE">DELETE</ElRadioButton>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="请求地址" key="http-url" prop="requestUrl">
+          <ElInput v-model="httpTaskForm.requestUrl" clearable />
+        </ElFormItem>
+        <ElFormItem label="请求头" key="http-headers" prop="requestHeaders">
+          <div class="flex w-full flex-col gap-2">
+            <ElInput
+              type="textarea"
+              v-model="httpTaskForm.requestHeaders"
+              :autosize="{ minRows: 4, maxRows: 8 }"
+              readonly
+              placeholder="点击右侧编辑按钮添加请求头"
+              class="min-w-0 flex-1"
+            />
+            <div class="flex w-full items-center justify-center">
+              <ElButton
+                class="flex flex-1 items-center justify-center"
+                size="small"
+                type="primary"
+                @click="openHttpHeaderEditor"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:edit" />
+                </template>
+                编辑
+              </ElButton>
+            </div>
+          </div>
+        </ElFormItem>
+        <ElFormItem
+          label="禁止重定向"
+          key="http-disallow-redirects"
+          prop="disallowRedirects"
+        >
+          <ElSwitch v-model="httpTaskForm.disallowRedirects" />
+        </ElFormItem>
+        <ElFormItem
+          label="忽略异常"
+          key="http-ignore-exception"
+          prop="ignoreException"
+        >
+          <ElSwitch v-model="httpTaskForm.ignoreException" />
+        </ElFormItem>
+        <ElFormItem
+          label="保存返回变量"
+          key="http-save-response"
+          prop="saveResponseParameters"
+        >
+          <ElSwitch v-model="httpTaskForm.saveResponseParameters" />
+        </ElFormItem>
+        <ElFormItem
+          label="是否瞬间变量"
+          key="http-save-transient"
+          prop="saveResponseParametersTransient"
+        >
+          <ElSwitch v-model="httpTaskForm.saveResponseParametersTransient" />
+        </ElFormItem>
+        <ElFormItem
+          label="返回变量前缀"
+          key="http-result-variable-prefix"
+          prop="resultVariablePrefix"
+        >
+          <ElInput v-model="httpTaskForm.resultVariablePrefix" />
+        </ElFormItem>
+        <ElFormItem
+          label="保存为 JSON 变量"
+          label-width="120px"
+          key="http-save-json"
+          prop="saveResponseVariableAsJson"
+        >
+          <ElSwitch v-model="httpTaskForm.saveResponseVariableAsJson" />
+        </ElFormItem>
+      </template>
+    </ElForm>
+    <!-- 请求头编辑器 -->
+    <HttpHeaderEditorModal @save="handleHeadersSave" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
new file mode 100644
index 000000000..4d9436723
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,569 @@
+<script lang="ts" setup>
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import {
+  computed,
+  h,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRaw,
+  watch,
+} from 'vue';
+
+import { SelectOutlined } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+  ElTreeSelect,
+} from 'element-plus';
+
+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 {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+} from '#/views/bpm/components/simple-process-design/consts';
+import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
+// import ProcessExpressionSelectModal from '#/views/bpm/processExpression/components/process-expression-select-modal.vue';
+
+defineOptions({ name: 'UserTask' });
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+const userTaskForm = ref({
+  candidateStrategy: undefined, // 分配规则
+  candidateParam: [], // 分配选项
+  skipExpression: '', // 跳过表达式
+});
+const bpmnElement = ref<any>();
+const bpmnInstances = () => (window as Record<string, any>)?.bpmnInstances;
+
+const roleOptions = ref<SystemRoleApi.Role[]>([]); // 角色列表
+const deptTreeOptions = ref<any>(); // 部门树
+const postOptions = ref<SystemPostApi.Post[]>([]); // 岗位列表
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+const userGroupOptions = ref<BpmUserGroupApi.UserGroup[]>([]); // 用户组列表
+const treeRef = ref<any>();
+
+const { formFieldOptions } = useFormFieldsPermission(FieldPermissionType.READ);
+
+// 定义 TreeSelect 的默认属性映射
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+};
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+const deptLevel = ref(1);
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  if (
+    userTaskForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+  ) {
+    label = `${label}(指定部门向上)`;
+  } else if (
+    userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    label = `${label}(表单内部门向上)`;
+  } else {
+    label = `${label}(发起人部门向上)`;
+  }
+  return label;
+});
+
+const otherExtensions = ref<any>();
+
+const resetTaskForm = () => {
+  const businessObject = bpmnElement.value.businessObject;
+  if (!businessObject) {
+    return;
+  }
+
+  const extensionElements =
+    businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+  userTaskForm.value.candidateStrategy = extensionElements.values?.find(
+    (ex: any) => ex.$type === `${prefix}:CandidateStrategy`,
+  )?.value;
+  const candidateParamStr = extensionElements.values?.find(
+    (ex: any) => ex.$type === `${prefix}:CandidateParam`,
+  )?.value;
+  if (candidateParamStr && candidateParamStr.length > 0) {
+    // eslint-disable-next-line unicorn/prefer-switch
+    if (userTaskForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      // 特殊：流程表达式，只有一个 input 输入框
+      // @ts-ignore
+      userTaskForm.value.candidateParam = [candidateParamStr];
+    } else if (
+      userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+    ) {
+      // 特殊：多级不部门负责人，需要通过'|'分割
+      userTaskForm.value.candidateParam = candidateParamStr
+        .split('|')[0]
+        .split(',')
+        .map((item: any) => {
+          // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+          const num = Number(item);
+          return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
+            ? item
+            : num;
+        });
+      deptLevel.value = +candidateParamStr.split('|')[1];
+    } else if (
+      userTaskForm.value.candidateStrategy ===
+        CandidateStrategy.START_USER_DEPT_LEADER ||
+      userTaskForm.value.candidateStrategy ===
+        CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      // @ts-ignore
+      userTaskForm.value.candidateParam = +candidateParamStr;
+      deptLevel.value = +candidateParamStr;
+    } else if (
+      userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.FORM_DEPT_LEADER
+    ) {
+      userTaskForm.value.candidateParam = candidateParamStr.split('|')[0];
+      deptLevel.value = +candidateParamStr.split('|')[1];
+    } else {
+      userTaskForm.value.candidateParam = candidateParamStr
+        .split(',')
+        .map((item: any) => {
+          // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+          const num = Number(item);
+          return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
+            ? item
+            : num;
+        });
+    }
+  } else {
+    userTaskForm.value.candidateParam = [];
+  }
+
+  otherExtensions.value =
+    extensionElements.values?.filter(
+      (ex: any) =>
+        ex.$type !== `${prefix}:CandidateStrategy` &&
+        ex.$type !== `${prefix}:CandidateParam`,
+    ) ?? [];
+
+  // 跳过表达式
+  userTaskForm.value.skipExpression =
+    businessObject.skipExpression === undefined
+      ? ''
+      : businessObject.skipExpression;
+
+  // 改用通过extensionElements来存储数据
+
+  // if (businessObject.candidateStrategy != undefined) {
+  //   userTaskForm.value.candidateStrategy = parseInt(
+  //     businessObject.candidateStrategy,
+  //   ) as any;
+  // } else {
+  //   userTaskForm.value.candidateStrategy = undefined;
+  // }
+  // if (
+  //   businessObject.candidateParam &&
+  //   businessObject.candidateParam.length > 0
+  // ) {
+  //   if (userTaskForm.value.candidateStrategy === 60) {
+  //     // 特殊：流程表达式，只有一个 input 输入框
+  //     userTaskForm.value.candidateParam = [businessObject.candidateParam];
+  //   } else {
+  //     userTaskForm.value.candidateParam = businessObject.candidateParam
+  //       .split(',')
+  //       .map((item) => item);
+  //   }
+  // } else {
+  //   userTaskForm.value.candidateParam = [];
+  // }
+};
+
+/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
+const changeCandidateStrategy = () => {
+  userTaskForm.value.candidateParam = [];
+  deptLevel.value = 1;
+  // 注释 by 芋艿：这个交互很多用户反馈费解，https://t.zsxq.com/xNmas 所以暂时屏蔽
+  // if (userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_USER) {
+  //   // 特殊处理表单内用户字段，当只有发起人选项时应选中发起人
+  //   if (!userFieldOnFormOptions.value || userFieldOnFormOptions.value.length <= 1) {
+  //     userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER
+  //   }
+  // }
+  updateElementTask();
+};
+
+/** 选中某个 options 时候，更新 bpmn 图  */
+const updateElementTask = () => {
+  let candidateParam = Array.isArray(userTaskForm.value.candidateParam)
+    ? userTaskForm.value.candidateParam.join(',')
+    : userTaskForm.value.candidateParam;
+
+  // 特殊处理多级部门情况
+  if (
+    userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+    userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    candidateParam += `|${deptLevel.value}`;
+  }
+  // 特殊处理发起人部门负责人、发起人连续部门负责人
+  if (
+    userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.START_USER_DEPT_LEADER ||
+    userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+  ) {
+    candidateParam = `${deptLevel.value}`;
+  }
+
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:CandidateStrategy`, {
+        value: userTaskForm.value.candidateStrategy,
+      }),
+      bpmnInstances().moddle.create(`${prefix}:CandidateParam`, {
+        value: candidateParam,
+      }),
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+
+  // 改用通过extensionElements来存储数据
+  // return;
+  // bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+  //   candidateStrategy: userTaskForm.value.candidateStrategy,
+  //   candidateParam: userTaskForm.value.candidateParam.join(','),
+  // });
+};
+
+const updateSkipExpression = () => {
+  if (
+    userTaskForm.value.skipExpression &&
+    userTaskForm.value.skipExpression !== ''
+  ) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: userTaskForm.value.skipExpression,
+    });
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: null,
+    });
+  }
+};
+
+// 打开监听器弹窗
+// const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
+//   useVbenModal({
+//     connectedComponent: ProcessExpressionSelectModal,
+//     destroyOnClose: true,
+//   });
+const openProcessExpressionDialog = async () => {
+  // ProcessExpressionSelectModalApi.open();
+};
+// const selectProcessExpression = (
+//   expression: BpmProcessExpressionApi.ProcessExpression,
+// ) => {
+//   // @ts-ignore
+//   userTaskForm.value.candidateParam = [expression.expression];
+//   updateElementTask();
+// };
+
+const handleFormUserChange = (e: any) => {
+  if (e === 'PROCESS_START_USER_ID') {
+    userTaskForm.value.candidateParam = [];
+    // @ts-ignore
+    userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER;
+  }
+  updateElementTask();
+};
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    nextTick(() => {
+      resetTaskForm();
+    });
+  },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await getSimpleRoleList();
+  // 获得部门列表
+  const deptOptions = await getSimpleDeptList();
+  deptTreeOptions.value = handleTree(deptOptions, 'id');
+  // 获得岗位列表
+  postOptions.value = await getSimplePostList();
+  // 获得用户列表
+  userOptions.value = await getSimpleUserList();
+  // 获得用户组列表
+  userGroupOptions.value = await getUserGroupSimpleList();
+});
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+</script>
+
+<template>
+  <ElForm label-width="100px">
+    <ElFormItem label="规则类型" prop="candidateStrategy">
+      <ElSelect
+        v-model="userTaskForm.candidateStrategy"
+        clearable
+        style="width: 100%"
+        @change="changeCandidateStrategy"
+      >
+        <ElOption
+          v-for="(dict, index) in CANDIDATE_STRATEGY"
+          :key="index"
+          :value="dict.value"
+          :label="dict.label"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.ROLE"
+      label="指定角色"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in roleOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        userTaskForm.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+        userTaskForm.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      "
+      label="指定部门"
+      prop="candidateParam"
+    >
+      <ElTreeSelect
+        ref="treeRef"
+        v-model="userTaskForm.candidateParam"
+        :data="deptTreeOptions"
+        :props="defaultProps"
+        placeholder="加载中，请稍后"
+        multiple
+        check-strictly
+        show-checkbox
+        @change="updateElementTask"
+      />
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.POST"
+      label="指定岗位"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in postOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER"
+      label="指定用户"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in userOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.nickname"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER_GROUP"
+      label="指定用户组"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in userGroupOptions"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.FORM_USER"
+      label="表单内用户字段"
+      prop="formUser"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        style="width: 100%"
+        @change="handleFormUserChange"
+      >
+        <ElOption
+          v-for="(item, idx) in userFieldOnFormOptions"
+          :key="idx"
+          :value="item.field"
+          :disabled="!item.required"
+          :label="item.title"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        userTaskForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+      "
+      label="表单内部门字段"
+      prop="formDept"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="(item, idx) in deptFieldOnFormOptions"
+          :key="idx"
+          :value="item.field"
+          :disabled="!item.required"
+          :label="item.title"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.START_USER_DEPT_LEADER ||
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+        userTaskForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+      "
+      :label="deptLevelLabel!"
+      prop="deptLevel"
+    >
+      <ElSelect v-model="deptLevel" clearable @change="updateElementTask">
+        <ElOption
+          v-for="(item, index) in MULTI_LEVEL_DEPT"
+          :key="index"
+          :value="item.value"
+          :label="item.label"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.EXPRESSION"
+      label="流程表达式"
+      prop="candidateParam"
+    >
+      <ElInput
+        type="textarea"
+        v-model="userTaskForm.candidateParam[0]"
+        clearable
+        style="width: 100%"
+        @change="updateElementTask"
+      />
+      <div class="mt-2 flex w-full items-center justify-center">
+        <ElButton
+          class="flex flex-1 items-center justify-center"
+          type="primary"
+          size="small"
+          :icon="h(SelectOutlined)"
+          @click="openProcessExpressionDialog"
+        >
+          选择表达式
+        </ElButton>
+      </div>
+      <!-- 选择弹窗
+      <ProcessExpressionSelectModalComp @select="selectProcessExpression" />
+      -->
+    </ElFormItem>
+
+    <ElFormItem label="跳过表达式" prop="skipExpression">
+      <ElInput
+        type="textarea"
+        v-model="userTaskForm.skipExpression"
+        clearable
+        style="width: 100%"
+        @change="updateSkipExpression"
+      />
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
new file mode 100644
index 000000000..847734e2c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
@@ -0,0 +1,391 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElRadio,
+  ElRadioGroup,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['change']);
+
+const tab = ref('cron');
+const cronStr = ref(props.value || '* * * * * ?');
+const fields = ref({
+  second: '*',
+  minute: '*',
+  hour: '*',
+  day: '*',
+  month: '*',
+  week: '?',
+  year: '',
+});
+const cronFieldList = [
+  { key: 'second', label: '秒', min: 0, max: 59 },
+  { key: 'minute', label: '分', min: 0, max: 59 },
+  { key: 'hour', label: '时', min: 0, max: 23 },
+  { key: 'day', label: '天', min: 1, max: 31 },
+  { key: 'month', label: '月', min: 1, max: 12 },
+  { key: 'week', label: '周', min: 1, max: 7 },
+  { key: 'year', label: '年', min: 1970, max: 2099 },
+];
+const activeField = ref('second');
+const cronMode = ref({
+  second: 'every',
+  minute: 'every',
+  hour: 'every',
+  day: 'every',
+  month: 'every',
+  week: 'every',
+  year: 'every',
+});
+const cronAppoint = ref({
+  second: [],
+  minute: [],
+  hour: [],
+  day: [],
+  month: [],
+  week: [],
+  year: [],
+});
+const cronRange = ref({
+  second: [0, 1],
+  minute: [0, 1],
+  hour: [0, 1],
+  day: [1, 2],
+  month: [1, 2],
+  week: [1, 2],
+  year: [1970, 1971],
+});
+const cronStep = ref({
+  second: [1, 1],
+  minute: [1, 1],
+  hour: [1, 1],
+  day: [1, 1],
+  month: [1, 1],
+  week: [1, 1],
+  year: [1970, 1],
+});
+
+function pad(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+
+watch(
+  [fields, cronMode, cronAppoint, cronRange, cronStep],
+  () => {
+    // 组装cron表达式
+    const arr = cronFieldList.map((f) => {
+      if (cronMode.value[f.key] === 'every') return '*';
+      if (cronMode.value[f.key] === 'appoint')
+        return cronAppoint.value[f.key].join(',') || '*';
+      if (cronMode.value[f.key] === 'range')
+        return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}`;
+      if (cronMode.value[f.key] === 'step')
+        return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}`;
+      return fields.value[f.key] || '*';
+    });
+    // week和year特殊处理
+    arr[5] = arr[5] || '?';
+    cronStr.value = arr.join(' ');
+    if (tab.value === 'cron') emit('change', cronStr.value);
+  },
+  { deep: true },
+);
+
+// 标准格式
+const isoStr = ref('');
+const repeat = ref(1);
+const isoDate = ref('');
+const durationUnits = [
+  { key: 'Y', label: '年', presets: [1, 2, 3, 4] },
+  { key: 'M', label: '月', presets: [1, 2, 3, 4] },
+  { key: 'D', label: '天', presets: [1, 2, 3, 4] },
+  { key: 'H', label: '时', presets: [4, 8, 12, 24] },
+  { key: 'm', label: '分', presets: [5, 10, 30, 50] },
+  { key: 'S', label: '秒', presets: [5, 10, 30, 50] },
+];
+const durationCustom = ref({ Y: '', M: '', D: '', H: '', m: '', S: '' });
+const isoDuration = ref('');
+
+function setDuration(key, val) {
+  durationCustom.value[key] = !val || Number.isNaN(val) ? '' : val;
+  updateDurationStr();
+}
+
+function updateDurationStr() {
+  let str = 'P';
+  str += durationCustom.value.Y ? `${durationCustom.value.Y}Y` : '';
+  str += durationCustom.value.M ? `${durationCustom.value.M}M` : '';
+  str += durationCustom.value.D ? `${durationCustom.value.D}D` : '';
+  str +=
+    durationCustom.value.H || durationCustom.value.m || durationCustom.value.S
+      ? 'T'
+      : '';
+  str += durationCustom.value.H ? `${durationCustom.value.H}H` : '';
+  str += durationCustom.value.m ? `${durationCustom.value.m}M` : '';
+  str += durationCustom.value.S ? `${durationCustom.value.S}S` : '';
+  isoDuration.value = str === 'P' ? '' : str;
+  updateIsoStr();
+}
+
+function updateIsoStr() {
+  let str = `R${repeat.value}`;
+  if (isoDate.value) {
+    const dateStr =
+      typeof isoDate.value === 'string'
+        ? isoDate.value
+        : isoDate.value.toISOString();
+    str += `/${dateStr}`;
+  }
+  if (isoDuration.value) str += `/${isoDuration.value}`;
+  isoStr.value = str;
+  if (tab.value === 'iso') emit('change', isoStr.value);
+}
+watch([repeat, isoDate], updateIsoStr);
+watch(durationCustom, updateDurationStr, { deep: true });
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) return;
+    // 自动检测格式：以R开头的是ISO 8601格式，否则是CRON表达式
+    if (val.startsWith('R')) {
+      tab.value = 'iso';
+      isoStr.value = val;
+      // 解析ISO格式：R{repeat}/{date}/{duration}
+      const parts = val.split('/');
+      if (parts[0]) {
+        const repeatMatch = parts[0].match(/^R(\d+)$/);
+        if (repeatMatch) repeat.value = Number.parseInt(repeatMatch[1], 10);
+      }
+      // 解析date部分（ISO 8601日期时间格式）
+      const datePart = parts.find(
+        (p) => p.includes('T') && !p.startsWith('P') && !p.startsWith('R'),
+      );
+      if (datePart) {
+        isoDate.value = dayjs(datePart);
+      }
+      // 解析duration部分
+      const durationPart = parts.find((p) => p.startsWith('P'));
+      if (durationPart) {
+        const match = durationPart.match(
+          /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/,
+        );
+        if (match) {
+          durationCustom.value.Y = match[1] || '';
+          durationCustom.value.M = match[2] || '';
+          durationCustom.value.D = match[3] || '';
+          durationCustom.value.H = match[4] || '';
+          durationCustom.value.m = match[5] || '';
+          durationCustom.value.S = match[6] || '';
+          isoDuration.value = durationPart;
+        }
+      }
+    } else {
+      tab.value = 'cron';
+      cronStr.value = val;
+    }
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <ElTabs v-model="tab">
+    <ElTabPane name="cron" label="CRON表达式">
+      <div class="mb-2.5">
+        <ElInput
+          v-model="cronStr"
+          readonly
+          class="w-[400px] font-bold"
+          key="cronStr"
+        />
+      </div>
+      <div class="mb-2 flex gap-2">
+        <ElInput
+          v-model="fields.second"
+          placeholder="秒"
+          class="w-20"
+          key="second"
+        />
+        <ElInput
+          v-model="fields.minute"
+          placeholder="分"
+          class="w-20"
+          key="minute"
+        />
+        <ElInput
+          v-model="fields.hour"
+          placeholder="时"
+          class="w-20"
+          key="hour"
+        />
+        <ElInput v-model="fields.day" placeholder="天" class="w-20" key="day" />
+        <ElInput
+          v-model="fields.month"
+          placeholder="月"
+          class="w-20"
+          key="month"
+        />
+        <ElInput
+          v-model="fields.week"
+          placeholder="周"
+          class="w-20"
+          key="week"
+        />
+        <ElInput
+          v-model="fields.year"
+          placeholder="年"
+          class="w-20"
+          key="year"
+        />
+      </div>
+      <ElTabs v-model="activeField" type="card" class="mb-2">
+        <ElTabPane
+          v-for="f in cronFieldList"
+          :key="f.key"
+          :name="f.key"
+          :label="f.label"
+        >
+          <div class="mb-2">
+            <ElRadioGroup v-model="cronMode[f.key]" :key="`radio-${f.key}`">
+              <ElRadio value="every" :key="`every-${f.key}`">
+                每{{ f.label }}
+              </ElRadio>
+              <ElRadio value="range" :key="`range-${f.key}`">
+                从
+                <ElInputNumber
+                  v-model="cronRange[f.key][0]"
+                  :min="f.min"
+                  :max="f.max"
+                  size="small"
+                  class="w-[60px]"
+                  :key="`range0-${f.key}`"
+                />
+                到
+                <ElInputNumber
+                  v-model="cronRange[f.key][1]"
+                  :min="f.min"
+                  :max="f.max"
+                  size="small"
+                  class="w-[60px]"
+                  :key="`range1-${f.key}`"
+                />
+                之间每{{ f.label }}
+              </ElRadio>
+              <ElRadio value="step" :key="`step-${f.key}`">
+                从第
+                <ElInputNumber
+                  v-model="cronStep[f.key][0]"
+                  :min="f.min"
+                  :max="f.max"
+                  size="small"
+                  class="w-[60px]"
+                  :key="`step0-${f.key}`"
+                />
+                开始每
+                <ElInputNumber
+                  v-model="cronStep[f.key][1]"
+                  :min="1"
+                  :max="f.max"
+                  size="small"
+                  class="w-[60px]"
+                  :key="`step1-${f.key}`"
+                />
+                {{ f.label }}
+              </ElRadio>
+              <ElRadio value="appoint" :key="`appoint-${f.key}`">
+                指定
+              </ElRadio>
+            </ElRadioGroup>
+          </div>
+          <div v-if="cronMode[f.key] === 'appoint'">
+            <ElCheckboxGroup
+              v-model="cronAppoint[f.key]"
+              :key="`group-${f.key}`"
+            >
+              <ElCheckbox
+                v-for="n in f.max + 1"
+                :key="`cb-${f.key}-${n - 1}`"
+                :value="pad(n - 1)"
+                :label="pad(n - 1)"
+              />
+            </ElCheckboxGroup>
+          </div>
+        </ElTabPane>
+      </ElTabs>
+    </ElTabPane>
+    <ElTabPane name="iso" label="标准格式">
+      <div class="mb-2.5">
+        <ElInput
+          v-model="isoStr"
+          placeholder="如R1/2025-05-21T21:59:54/P3DT30M30S"
+          class="w-[400px] font-bold"
+          key="isoStr"
+        />
+      </div>
+      <div class="mb-2.5">
+        循环次数：<ElInputNumber
+          v-model="repeat"
+          :min="1"
+          class="w-[100px]"
+          key="repeat"
+        />
+      </div>
+      <div class="mb-2.5">
+        开始时间：<ElDatePicker
+          v-model="isoDate"
+          type="datetime"
+          placeholder="选择开始时间"
+          class="w-[200px]"
+          key="isoDate"
+        />
+      </div>
+      <div class="mb-2.5">
+        间隔时长：<ElInput
+          v-model="isoDuration"
+          readonly
+          placeholder="如P3DT30M30S"
+          class="w-[200px]"
+          key="isoDuration"
+        />
+      </div>
+      <div>
+        <div v-for="unit in durationUnits" :key="unit.key" class="mb-2">
+          <span>{{ unit.label }}：</span>
+          <ElButtonGroup>
+            <ElButton
+              v-for="val in unit.presets"
+              :key="val"
+              size="small"
+              @click="setDuration(unit.key, val)"
+            >
+              {{ val }}
+            </ElButton>
+          </ElButtonGroup>
+          <ElInput
+            v-model="durationCustom[unit.key]"
+            size="small"
+            class="ml-2 w-[60px]"
+            placeholder="自定义"
+            @change="setDuration(unit.key, durationCustom[unit.key])"
+          />
+        </div>
+      </div>
+    </ElTabPane>
+  </ElTabs>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
new file mode 100644
index 000000000..1411795b0
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+import { ElButton, ElButtonGroup, ElInput } from 'element-plus';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['change']);
+
+const units = [
+  { key: 'Y', label: '年', presets: [1, 2, 3, 4] },
+  { key: 'M', label: '月', presets: [1, 2, 3, 4] },
+  { key: 'D', label: '天', presets: [1, 2, 3, 4] },
+  { key: 'H', label: '时', presets: [4, 8, 12, 24] },
+  { key: 'm', label: '分', presets: [5, 10, 30, 50] },
+  { key: 'S', label: '秒', presets: [5, 10, 30, 50] },
+];
+const custom = ref({ Y: '', M: '', D: '', H: '', m: '', S: '' });
+const isoString = ref('');
+
+function setUnit(key, val) {
+  if (!val || Number.isNaN(val)) {
+    custom.value[key] = '';
+    return;
+  }
+  custom.value[key] = val;
+  updateIsoString();
+}
+
+function updateIsoString() {
+  let str = 'P';
+  if (custom.value.Y) str += `${custom.value.Y}Y`;
+  if (custom.value.M) str += `${custom.value.M}M`;
+  if (custom.value.D) str += `${custom.value.D}D`;
+  if (custom.value.H || custom.value.m || custom.value.S) str += 'T';
+  if (custom.value.H) str += `${custom.value.H}H`;
+  if (custom.value.m) str += `${custom.value.m}M`;
+  if (custom.value.S) str += `${custom.value.S}S`;
+  isoString.value = str === 'P' ? '' : str;
+  emit('change', isoString.value);
+}
+
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) return;
+    // 解析ISO 8601字符串到custom
+    const match = val.match(
+      /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/,
+    );
+    if (match) {
+      custom.value.Y = match[1] || '';
+      custom.value.M = match[2] || '';
+      custom.value.D = match[3] || '';
+      custom.value.H = match[4] || '';
+      custom.value.m = match[5] || '';
+      custom.value.S = match[6] || '';
+      updateIsoString();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div class="mb-2.5">
+      当前选择：<ElInput v-model="isoString" readonly class="w-[300px]" />
+    </div>
+    <div v-for="unit in units" :key="unit.key" class="mb-2">
+      <span>{{ unit.label }}：</span>
+      <ElButtonGroup>
+        <ElButton
+          v-for="val in unit.presets"
+          :key="val"
+          size="small"
+          @click="setUnit(unit.key, val)"
+        >
+          {{ val }}
+        </ElButton>
+      </ElButtonGroup>
+      <ElInput
+        v-model="custom[unit.key]"
+        size="small"
+        class="ml-2 w-[60px]"
+        placeholder="自定义"
+        @change="setUnit(unit.key, custom[unit.key])"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
new file mode 100644
index 000000000..8de95e1ba
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
@@ -0,0 +1,362 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import type { Ref } from 'vue';
+
+import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDatePicker,
+  ElInput,
+  ElTooltip,
+} from 'element-plus';
+
+import CycleConfig from './CycleConfig.vue';
+import DurationConfig from './DurationConfig.vue';
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+const type: Ref<string> = ref('time');
+const condition: Ref<string> = ref('');
+const valid: Ref<boolean> = ref(false);
+const dateValue = ref<Dayjs>();
+
+const placeholder = computed<string>(() => {
+  if (type.value === 'time') return '请输入时间';
+  if (type.value === 'duration') return '请输入持续时长';
+  if (type.value === 'cycle') return '请输入循环表达式';
+  return '';
+});
+const helpText = computed<string>(() => {
+  if (type.value === 'time') return '选择具体时间';
+  if (type.value === 'duration') return 'ISO 8601格式，如PT1H';
+  if (type.value === 'cycle') return 'CRON表达式或ISO 8601周期';
+  return '';
+});
+const helpHtml = computed<string>(() => {
+  if (type.value === 'duration') {
+    return `指定定时器之前要等待多长时间。S表示秒，M表示分，D表示天；P表示时间段，T表示精确到时间的时间段。<br>
+    时间格式依然为ISO 8601格式，一年两个月三天四小时五分六秒内，可以写成P1Y2M3DT4H5M6S。<br>
+    P是开始标记，T是时间和日期分割标记，没有日期只有时间T是不能省去的，比如1小时执行一次应写成PT1H。`;
+  }
+  if (type.value === 'cycle') {
+    return `支持CRON表达式（如0 0/30 * * * ?）或ISO 8601周期（如R3/PT10M）。`;
+  }
+  if (type.value === 'time') {
+    return `支持ISO 8601格式的时间（如2024-12-12T12:12:12）`;
+  }
+  return '';
+});
+
+// 初始化和监听
+function syncFromBusinessObject(): void {
+  if (props.businessObject) {
+    const timerDef = (props.businessObject.eventDefinitions || [])[0];
+    if (timerDef) {
+      if (timerDef.timeDate) {
+        type.value = 'time';
+        condition.value = timerDef.timeDate.body;
+      } else if (timerDef.timeDuration) {
+        type.value = 'duration';
+        condition.value = timerDef.timeDuration.body;
+      } else if (timerDef.timeCycle) {
+        type.value = 'cycle';
+        condition.value = timerDef.timeCycle.body;
+      }
+    }
+  }
+}
+onMounted(syncFromBusinessObject);
+
+// 切换类型
+function setType(t: string) {
+  type.value = t;
+  condition.value = '';
+  updateNode();
+}
+
+// 输入校验
+watch([type, condition], () => {
+  valid.value = validate();
+});
+
+function validate(): boolean {
+  if (type.value === 'time') {
+    return !!condition.value && !Number.isNaN(Date.parse(condition.value));
+  }
+  if (type.value === 'duration') {
+    return /^P.*$/.test(condition.value);
+  }
+  if (type.value === 'cycle') {
+    // 支持CRON表达式或ISO 8601周期格式：R{n}/P... 或 R{n}/{date}/P...
+    return /^(?:[0-9*/?, ]+|R\d+(?:\/[^/]+)*\/P.*)$/.test(condition.value);
+  }
+  return true;
+}
+
+// 选择时间 Modal
+const [DateModal, dateModalApi] = useVbenModal({
+  title: '选择时间',
+  class: 'w-[400px]',
+  onConfirm: onDateConfirm,
+});
+
+function onDateChange(val: any) {
+  dateValue.value = val || undefined;
+}
+function onDateConfirm(): void {
+  if (dateValue.value) {
+    condition.value = dateValue.value.toISOString();
+    dateModalApi.close();
+    updateNode();
+  }
+}
+
+// 持续时长 Modal
+const [DurationModal, durationModalApi] = useVbenModal({
+  title: '时间配置',
+  class: 'w-[600px]',
+  onConfirm: onDurationConfirm,
+});
+
+function onDurationChange(val: string) {
+  condition.value = val;
+}
+function onDurationConfirm(): void {
+  durationModalApi.close();
+  updateNode();
+}
+
+// 循环配置 Modal
+const [CycleModal, cycleModalApi] = useVbenModal({
+  title: '时间配置',
+  class: 'w-[800px]',
+  onConfirm: onCycleConfirm,
+});
+
+function onCycleChange(val: string) {
+  condition.value = val;
+}
+function onCycleConfirm(): void {
+  cycleModalApi.close();
+  updateNode();
+}
+
+// 帮助说明 Modal
+const [HelpModal, helpModalApi] = useVbenModal({
+  class: 'w-[600px]',
+  title: '格式说明',
+  showCancelButton: false,
+  confirmText: '关闭',
+  onConfirm: () => helpModalApi.close(),
+});
+
+// 点击输入框时弹窗
+function handleInputClick(): void {
+  if (type.value === 'time') dateModalApi.open();
+  if (type.value === 'duration') durationModalApi.open();
+  if (type.value === 'cycle') cycleModalApi.open();
+}
+
+// 同步到节点
+function updateNode(): void {
+  const moddle = (window.bpmnInstances as any)?.moddle;
+  const modeling = (window.bpmnInstances as any)?.modeling;
+  const elementRegistry = (window.bpmnInstances as any)?.elementRegistry;
+  if (!moddle || !modeling || !elementRegistry) return;
+
+  // 获取元素
+  if (!props.businessObject || !props.businessObject.id) return;
+  const element = elementRegistry.get(props.businessObject.id);
+  if (!element) return;
+
+  // 1. 复用原有 timerDef，或新建
+  let timerDef =
+    element.businessObject.eventDefinitions &&
+    element.businessObject.eventDefinitions[0];
+  if (!timerDef) {
+    timerDef = bpmnInstances().bpmnFactory.create(
+      'bpmn:TimerEventDefinition',
+      {},
+    );
+    modeling.updateProperties(element, {
+      eventDefinitions: [timerDef],
+    });
+  }
+
+  // 2. 清空原有
+  delete timerDef.timeDate;
+  delete timerDef.timeDuration;
+  delete timerDef.timeCycle;
+
+  // 3. 设置新的
+  if (type.value === 'time' && condition.value) {
+    timerDef.timeDate = bpmnInstances().bpmnFactory.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition.value,
+      },
+    );
+  } else if (type.value === 'duration' && condition.value) {
+    timerDef.timeDuration = bpmnInstances().bpmnFactory.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition.value,
+      },
+    );
+  } else if (type.value === 'cycle' && condition.value) {
+    timerDef.timeCycle = bpmnInstances().bpmnFactory.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition.value,
+      },
+    );
+  }
+
+  bpmnInstances().modeling.updateProperties(toRaw(element), {
+    eventDefinitions: [timerDef],
+  });
+}
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        syncFromBusinessObject();
+      });
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <div class="mt-2 flex items-center">
+      <span class="w-14">类型：</span>
+      <ElButtonGroup>
+        <ElButton
+          size="small"
+          :type="type === 'time' ? 'primary' : 'default'"
+          @click="setType('time')"
+        >
+          时间
+        </ElButton>
+        <ElButton
+          size="small"
+          :type="type === 'duration' ? 'primary' : 'default'"
+          @click="setType('duration')"
+        >
+          持续
+        </ElButton>
+        <ElButton
+          size="small"
+          :type="type === 'cycle' ? 'primary' : 'default'"
+          @click="setType('cycle')"
+        >
+          循环
+        </ElButton>
+      </ElButtonGroup>
+      <IconifyIcon
+        icon="ant-design:check-circle-filled"
+        v-if="valid"
+        class="ml-2 text-green-500"
+      />
+    </div>
+    <div class="mt-2 flex items-center gap-1">
+      <span class="w-14">条件：</span>
+      <ElInput
+        v-model="condition"
+        :placeholder="placeholder"
+        class="w-full"
+        :readonly="type !== 'duration' && type !== 'cycle'"
+        @click="handleInputClick"
+        @blur="updateNode"
+      >
+        <template #suffix>
+          <div class="flex items-center gap-1">
+            <ElTooltip v-if="!valid" content="格式错误" placement="top">
+              <IconifyIcon
+                icon="ant-design:exclamation-circle-filled"
+                class="text-orange-400"
+              />
+            </ElTooltip>
+            <ElTooltip :content="helpText" placement="top">
+              <IconifyIcon
+                icon="ant-design:question-circle-filled"
+                class="cursor-pointer text-[#409eff]"
+                @click="helpModalApi.open()"
+              />
+            </ElTooltip>
+            <ElButton
+              v-if="type === 'time'"
+              @click="dateModalApi.open()"
+              class="ml-1 flex items-center justify-center"
+              circle
+              size="small"
+            >
+              <IconifyIcon icon="ep:calendar" />
+            </ElButton>
+            <ElButton
+              v-if="type === 'duration'"
+              @click="durationModalApi.open()"
+              class="ml-1 flex items-center justify-center"
+              circle
+              size="small"
+            >
+              <IconifyIcon icon="ep:timer" />
+            </ElButton>
+            <ElButton
+              v-if="type === 'cycle'"
+              @click="cycleModalApi.open()"
+              class="ml-1 flex items-center justify-center"
+              circle
+              size="small"
+            >
+              <IconifyIcon icon="ep:setting" />
+            </ElButton>
+          </div>
+        </template>
+      </ElInput>
+    </div>
+
+    <!-- 时间选择器 -->
+    <DateModal>
+      <ElDatePicker
+        v-model="dateValue"
+        type="datetime"
+        placeholder="选择日期时间"
+        class="w-full"
+        @change="onDateChange"
+      />
+    </DateModal>
+
+    <!-- 持续时长选择器 -->
+    <DurationModal>
+      <DurationConfig :value="condition" @change="onDurationChange" />
+    </DurationModal>
+
+    <!-- 循环配置器 -->
+    <CycleModal>
+      <CycleConfig :value="condition" @change="onCycleChange" />
+    </CycleModal>
+
+    <!-- 帮助说明 -->
+    <HelpModal>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="helpHtml"></div>
+    </HelpModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
new file mode 100644
index 000000000..a2d32d4f3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
@@ -0,0 +1,120 @@
+@use './process-designer';
+@use './process-panel';
+
+$success-color: #4eb819;
+$primary-color: #409eff;
+$danger-color: #f56c6c;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
+    repeat !important;
+  border: 1px solid #efefef;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color !important;
+      //marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      //marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      fill: $success-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $success-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color !important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      fill: $success-color !important;
+      stroke: $success-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $success-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $success-color !important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      fill: $primary-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $primary-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $primary-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $primary-color !important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      fill: $danger-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $danger-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $danger-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $danger-color !important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      fill: $cancel-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $cancel-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $cancel-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $cancel-color !important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container,
+.process-viewer .djs-overlay-container,
+.process-viewer .djs-palette {
+  display: none;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
new file mode 100644
index 000000000..83418ca0a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
@@ -0,0 +1,183 @@
+@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
+
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+
+    .el-button {
+      text-align: center;
+    }
+
+    .el-button-group {
+      margin: 4px;
+    }
+
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        padding-right: 8px;
+        padding-left: 8px;
+        text-align: left;
+      }
+
+      .el-button:hover {
+        color: #fff;
+        background: rgb(64 158 255 / 80%);
+      }
+    }
+
+    .align {
+      position: relative;
+
+      i {
+        &::after {
+          position: absolute;
+          content: '|';
+          // transform: rotate(90deg) translate(200%, 60%);
+          transform: rotate(180deg) translate(271%, -10%);
+        }
+      }
+    }
+
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+
+    .align.align-center i {
+      transform: rotate(0deg);
+
+      &::after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(-0%, -5%);
+      }
+    }
+
+    .align.align-middle i {
+      transform: rotate(-90deg);
+
+      &::after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(0, -10%);
+      }
+    }
+  }
+
+  .my-process-designer__container {
+    display: inline-flex;
+    flex: 1;
+    width: 100%;
+
+    .my-process-designer__canvas {
+      position: relative;
+      flex: 1;
+      height: 100%;
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
+        repeat !important;
+
+      div.toggle-mode {
+        display: none;
+      }
+    }
+
+    .my-process-designer__property-panel {
+      z-index: 10;
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+
+      * {
+        box-sizing: border-box;
+      }
+    }
+    // svg {
+    //   width: 100%;
+    //   height: 100%;
+    //   min-height: 100%;
+    //   overflow: hidden;
+    // }
+  }
+}
+
+//侧边栏配置
+// .djs-palette .two-column .open {
+.open {
+  // .djs-palette.open {
+  .djs-palette-entries {
+    div[class^='bpmn-icon-']::before,
+    div[class*='bpmn-icon-']::before {
+      line-height: unset;
+    }
+
+    div.entry {
+      position: relative;
+    }
+
+    div.entry:hover {
+      &::after {
+        position: absolute;
+        top: 0;
+        right: -10px;
+        bottom: 0;
+        z-index: 100;
+        box-sizing: border-box;
+        display: inline-block;
+        width: max-content;
+        padding: 0 16px;
+        overflow: hidden;
+        font-size: 0.5em;
+        font-variant: normal;
+        vertical-align: text-bottom;
+        text-transform: none;
+        text-decoration: inherit;
+        content: attr(title);
+        background: #fafafa;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 0 6px #eee;
+        transform: translateX(100%);
+      }
+    }
+  }
+}
+
+pre {
+  height: 100%;
+  max-height: calc(80vh - 32px);
+  margin: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.hljs {
+  white-space: pre-wrap;
+}
+
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
new file mode 100644
index 000000000..d7e8cfbcd
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
@@ -0,0 +1,127 @@
+.process-panel__container {
+  box-sizing: border-box;
+  max-height: 100%;
+  padding: 0 8px;
+  overflow-y: scroll;
+  border-left: 1px solid #eee;
+  box-shadow: 0 0 8px #ccc;
+}
+
+.panel-tab__title {
+  padding: 0 8px;
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.2em;
+
+  i {
+    margin-right: 8px;
+    font-size: 1.2em;
+  }
+}
+
+.panel-tab__content {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 16px;
+  border-top: 1px solid #eee;
+
+  .panel-tab__content--title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+
+    span {
+      flex: 1;
+      text-align: left;
+    }
+  }
+}
+
+.element-property {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin: 8px 0;
+
+  .element-property__label {
+    box-sizing: border-box;
+    display: block;
+    width: 90px;
+    padding-right: 12px;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 32px;
+    text-align: right;
+  }
+
+  .element-property__value {
+    flex: 1;
+    line-height: 32px;
+  }
+
+  .el-form-item {
+    width: 100%;
+    padding-bottom: 18px;
+    margin-bottom: 0;
+  }
+}
+
+.list-property {
+  flex-direction: column;
+
+  .element-listener-item {
+    display: inline-grid;
+    grid-template-columns: 16px auto 32px 32px;
+    grid-column-gap: 8px;
+    width: 100%;
+  }
+
+  .element-listener-item + .element-listener-item {
+    margin-top: 8px;
+  }
+}
+
+.listener-filed__title {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0;
+
+  span {
+    width: 200px;
+    font-size: 14px;
+    text-align: left;
+  }
+
+  i {
+    margin-right: 8px;
+  }
+}
+
+.element-drawer__button {
+  display: inline-flex;
+  justify-content: space-around;
+  width: 100%;
+  margin-top: 8px;
+}
+
+.element-drawer__button > .el-button {
+  width: 100%;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+
+.el-input.is-disabled .el-input__inner {
+  color: #999;
+}
+
+.el-form-item.el-form-item--mini {
+  margin-bottom: 0;
+
+  & + .el-form-item {
+    margin-top: 16px;
+  }
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts
new file mode 100644
index 000000000..b8bf53277
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts
@@ -0,0 +1,94 @@
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  const listenerObj = Object.create(null);
+  listenerObj.event = options.event;
+  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case 'delegateExpressionListener': {
+      listenerObj.delegateExpression = options.delegateExpression;
+      break;
+    }
+    case 'expressionListener': {
+      listenerObj.expression = options.expression;
+      break;
+    }
+    case 'scriptListener': {
+      listenerObj.script = createScriptObject(options, prefix);
+      break;
+    }
+    default: {
+      listenerObj.class = options.class;
+    }
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map((field) => {
+      return createFieldObject(field, prefix);
+    });
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) {
+    const timeDefinition = bpmnInstances().moddle.create(
+      'bpmn:FormalExpression',
+      {
+        body: options.eventTimeDefinitions,
+      },
+    );
+    const TimerEventDefinition = bpmnInstances().moddle.create(
+      'bpmn:TimerEventDefinition',
+      {
+        id: `TimerEventDefinition_${uuid(8)}`,
+        [`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]:
+          timeDefinition,
+      },
+    );
+    listenerObj.eventDefinitions = [TimerEventDefinition];
+  }
+  return bpmnInstances().moddle.create(
+    `${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`,
+    listenerObj,
+  );
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option;
+  const fieldConfig =
+    fieldType === 'string' ? { name, string } : { name, expression };
+  return bpmnInstances().moddle.create(`${prefix}:Field`, fieldConfig);
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options;
+  const scriptConfig =
+    scriptType === 'inlineScript'
+      ? { scriptFormat, value }
+      : { scriptFormat, resource };
+  return bpmnInstances().moddle.create(`${prefix}:Script`, scriptConfig);
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: extensionList,
+  });
+  // 直接使用原始元素对象，不需要toRaw包装
+  bpmnInstances().modeling.updateProperties(element, {
+    extensionElements: extensions,
+  });
+}
+
+// 创建一个id
+export function uuid(
+  length = 8,
+  charsString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+) {
+  let result = '';
+
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)];
+  }
+  return result;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
new file mode 100644
index 000000000..c8d70960d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
@@ -0,0 +1,8 @@
+import hljs from 'highlight.js/lib/core';
+import jsonLanguage from 'highlight.js/lib/languages/json';
+import xmlLanguage from 'highlight.js/lib/languages/xml';
+
+hljs.registerLanguage('xml', xmlLanguage);
+hljs.registerLanguage('json', jsonLanguage);
+
+export default hljs;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
new file mode 100644
index 000000000..506a1b3c3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
@@ -0,0 +1,30 @@
+import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';
+
+export default function CustomRenderer(
+  config,
+  eventBus,
+  styles,
+  pathMap,
+  canvas,
+  textRenderer,
+) {
+  BpmnRenderer.call(
+    this,
+    config,
+    eventBus,
+    styles,
+    pathMap,
+    canvas,
+    textRenderer,
+    2000,
+  );
+
+  this.handlers.label = function () {
+    return null;
+  };
+}
+
+const F = function () {}; // 核心，利用空对象作为中介；
+F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
+CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
new file mode 100644
index 000000000..a1842ec76
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
@@ -0,0 +1,6 @@
+import CustomRenderer from './CustomRenderer';
+
+export default {
+  __init__: ['customRenderer'],
+  customRenderer: ['type', CustomRenderer],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
new file mode 100644
index 000000000..49ed6e3e1
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
@@ -0,0 +1,16 @@
+import BpmnRules from 'bpmn-js/lib/features/rules/BpmnRules';
+import inherits from 'inherits';
+
+export default function CustomRules(eventBus) {
+  BpmnRules.call(this, eventBus);
+}
+
+inherits(CustomRules, BpmnRules);
+
+CustomRules.prototype.canDrop = function () {
+  return false;
+};
+
+CustomRules.prototype.canMove = function () {
+  return false;
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
new file mode 100644
index 000000000..838b93ea6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
@@ -0,0 +1,6 @@
+import CustomRules from './CustomRules';
+
+export default {
+  __init__: ['customRules'],
+  customRules: ['type', CustomRules],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts
new file mode 100644
index 000000000..75c615592
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts
@@ -0,0 +1,25 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  'Exclusive Gateway': 'Exklusives Gateway',
+  'Parallel Gateway': 'Paralleles Gateway',
+  'Inclusive Gateway': 'Inklusives Gateway',
+  'Complex Gateway': 'Komplexes Gateway',
+  'Event based Gateway': 'Ereignis-basiertes Gateway',
+  'Message Start Event': '消息启动事件',
+  'Timer Start Event': '定时启动事件',
+  'Conditional Start Event': '条件启动事件',
+  'Signal Start Event': '信号启动事件',
+  'Error Start Event': '错误启动事件',
+  'Escalation Start Event': '升级启动事件',
+  'Compensation Start Event': '补偿启动事件',
+  'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+  'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+  'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+  'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+  'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)',
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
new file mode 100644
index 000000000..e8ea772ba
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
@@ -0,0 +1,40 @@
+// outside.js
+
+const ctx = '@@clickoutsideContext';
+
+export default {
+  bind(el, binding, vnode) {
+    const ele = el;
+    const documentHandler = (e) => {
+      if (!vnode.context || ele.contains(e.target)) {
+        return false;
+      }
+      // 调用指令回调
+      if (binding.expression) {
+        vnode.context[el[ctx].methodName](e);
+      } else {
+        el[ctx].bindingFn(e);
+      }
+    };
+    // 将方法添加到ele
+    ele[ctx] = {
+      documentHandler,
+      methodName: binding.expression,
+      bindingFn: binding.value,
+    };
+
+    setTimeout(() => {
+      document.addEventListener('touchstart', documentHandler); // 为document绑定事件
+    });
+  },
+  update(el, binding) {
+    const ele = el;
+    ele[ctx].methodName = binding.expression;
+    ele[ctx].bindingFn = binding.value;
+  },
+  unbind(el) {
+    document.removeEventListener('touchstart', el[ctx].documentHandler); // 解绑
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete el[ctx];
+  },
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
new file mode 100644
index 000000000..973685a0b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
@@ -0,0 +1,10 @@
+export function debounce(fn, delay = 500) {
+  let timer;
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(fn.bind(this, ...args), delay);
+  };
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
new file mode 100644
index 000000000..3370a47f5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
@@ -0,0 +1,50 @@
+function xmlStr2XmlObj(xmlStr) {
+  let xmlObj = {};
+  if (document.all) {
+    const xmlDom = new window.ActiveXObject('Microsoft.XMLDOM');
+    xmlDom.loadXML(xmlStr);
+    xmlObj = xmlDom;
+  } else {
+    xmlObj = new DOMParser().parseFromString(xmlStr, 'text/xml');
+  }
+  return xmlObj;
+}
+
+function xml2json(xml) {
+  try {
+    let obj = {};
+    if (xml.children.length > 0) {
+      for (let i = 0; i < xml.children.length; i++) {
+        const item = xml.children.item(i);
+        const nodeName = item.nodeName;
+        if (obj[nodeName] === undefined) {
+          obj[nodeName] = xml2json(item);
+        } else {
+          if (obj[nodeName].push === undefined) {
+            const old = obj[nodeName];
+            obj[nodeName] = [];
+            obj[nodeName].push(old);
+          }
+          obj[nodeName].push(xml2json(item));
+        }
+      }
+    } else {
+      obj = xml.textContent;
+    }
+    return obj;
+  } catch (error) {
+    console.warn(error.message);
+  }
+}
+
+function xmlObj2json(xml) {
+  const xmlObj = xmlStr2XmlObj(xml);
+  console.warn(xmlObj);
+  let jsonObj = {};
+  if (xmlObj.childNodes.length > 0) {
+    jsonObj = xml2json(xmlObj);
+  }
+  return jsonObj;
+}
+
+export default xmlObj2json;
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
index 4f756afc3..cf335a005 100644
--- 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
@@ -1,20 +1,22 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
+import type { BpmModelApi } from '#/api/bpm/model';
+
 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';
+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' });
 
@@ -25,45 +27,45 @@ defineProps<{
   value?: string;
 }>();
 
-// const emit = defineEmits(['success', 'init-finished']);
+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 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>(); // 流程模型的信息
+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 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('保存失败');
-//   }
-// };
+const save = async (bpmnXml: string) => {
+  try {
+    xmlString.value = bpmnXml;
+    emit('success', bpmnXml);
+  } catch (error) {
+    console.error('保存失败:', error);
+    // ElMessage.error('保存失败');
+  }
+};
 
 /** 监听表单 ID 变化，加载表单数据 */
 watch(
@@ -93,7 +95,7 @@ onBeforeUnmount(() => {
 <template>
   <ContentWrap>
     <!-- 流程设计器，负责绘制流程等 -->
-    <!-- <MyProcessDesigner
+    <MyProcessDesigner
       key="designer"
       v-model="xmlString"
       :value="xmlString"
@@ -106,16 +108,16 @@ onBeforeUnmount(() => {
       @save="save"
       :process-id="modelKey"
       :process-name="modelName"
-    /> -->
+    />
     <!-- 流程属性器，负责编辑每个流程节点的属性 -->
-    <!-- <MyProcessPenal
+    <MyProcessPenal
       v-if="modeler"
       key="penal"
       :bpmn-modeler="modeler"
       :prefix="controlForm.prefix"
       class="process-panel"
       :model="model"
-    /> -->
+    />
   </ContentWrap>
 </template>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a2bdc5f8..f1d9dbc45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -908,21 +908,42 @@ importers:
       benz-amr-recorder:
         specifier: 'catalog:'
         version: 1.1.5
+      bpmn-js:
+        specifier: 'catalog:'
+        version: 17.11.1
+      bpmn-js-properties-panel:
+        specifier: 'catalog:'
+        version: 5.23.0(@bpmn-io/properties-panel@3.34.0)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.11.3(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0))(diagram-js@12.8.1)
+      bpmn-js-token-simulation:
+        specifier: 'catalog:'
+        version: 0.36.3
+      camunda-bpmn-moddle:
+        specifier: 'catalog:'
+        version: 7.0.1
       cropperjs:
         specifier: 'catalog:'
         version: 1.6.2
       dayjs:
         specifier: 'catalog:'
         version: 1.11.19
+      diagram-js:
+        specifier: 'catalog:'
+        version: 12.8.1
       element-plus:
         specifier: 'catalog:'
         version: 2.11.8(vue@3.5.25(typescript@5.9.3))
+      fast-xml-parser:
+        specifier: 'catalog:'
+        version: 4.5.3
       highlight.js:
         specifier: 'catalog:'
         version: 11.11.1
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
+      steady-xml:
+        specifier: 'catalog:'
+        version: 0.1.0
       tinymce:
         specifier: 'catalog:'
         version: 7.9.1
-- 
Gitee


From dde16e26fe4e3b2c5f8e174a0406078181e9f54f Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 15 Dec 2025 21:21:54 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20[bpm][ele]=20bpmn=20=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/form/ElementForm.vue              | 13 +++++++------
 .../penal/task/task-components/ReceiveTask.vue      |  8 +++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
index 92c826419..3c8b781ef 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -308,11 +308,7 @@ watch(
   <div class="panel-tab__content">
     <ElForm label-width="80px">
       <ElFormItem label="流程表单">
-        <ElSelect
-          v-model="formKey"
-          clearable
-          @change="updateElementFormKey"
-        >
+        <ElSelect v-model="formKey" clearable @change="updateElementFormKey">
           <ElOption
             v-for="item in formOptions"
             :key="item.value"
@@ -327,7 +323,12 @@ watch(
           @change="_updateElementBusinessKey"
           clearable
         >
-          <ElOption v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
+          <ElOption
+            v-for="i in fieldList"
+            :key="i.id"
+            :value="i.id"
+            :label="i.label"
+          />
           <ElOption value="" label="无" />
         </ElSelect>
       </ElFormItem>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
index 9cdd9a36d..affd1cd0a 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
@@ -108,7 +108,13 @@ watch(
 <template>
   <div class="mt-2">
     <div class="mb-2 flex justify-end">
-      <ElButton type="primary" link size="small" class="p-0" @click="openCreateModal">
+      <ElButton
+        type="primary"
+        link
+        size="small"
+        class="p-0"
+        @click="openCreateModal"
+      >
         <template #icon>
           <IconifyIcon class="size-4" icon="lucide:plus" />
         </template>
-- 
Gitee


From ba126288a08aacab538dd1c12e17fe9be60b45fd Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 15 Dec 2025 22:39:59 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20[bpm][ele]=20bpmn=20=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8=20=E7=94=A8=E6=88=B7=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E8=BF=81=E7=A7=BB=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/UserTaskCustomConfig.vue            | 14 ++++----------
 .../package/penal/listeners/ElementListeners.vue   |  2 +-
 .../package/penal/listeners/UserTaskListeners.vue  |  2 +-
 .../penal/multi-instance/ElementMultiInstance.vue  |  2 +-
 .../package/penal/other/ElementOtherConfig.vue     |  2 +-
 .../package/penal/properties/ElementProperties.vue |  2 +-
 .../package/penal/task/ElementTask.vue             |  2 +-
 7 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
index 503c1919d..ac4a7310d 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -608,13 +608,9 @@ onMounted(async () => {
         <div class="w-28 truncate text-left" :title="item.title">
           {{ item.title }}
         </div>
-        <ElRadioGroup
-          v-model="item.permission"
-          class="flex flex-1 justify-between"
-        >
-          <div class="flex w-24 items-center justify-center">
+        <ElRadioGroup v-model="item.permission" class="ml-7 w-full">
+          <div class="flex flex-1 items-center justify-center">
             <ElRadio
-              class="ml-5"
               :value="FieldPermissionType.READ"
               size="large"
               @change="updateElementExtensions"
@@ -622,9 +618,8 @@ onMounted(async () => {
               <span></span>
             </ElRadio>
           </div>
-          <div class="flex w-24 items-center justify-center">
+          <div class="flex flex-1 items-center justify-center">
             <ElRadio
-              class="ml-5"
               :value="FieldPermissionType.WRITE"
               size="large"
               @change="updateElementExtensions"
@@ -632,9 +627,8 @@ onMounted(async () => {
               <span></span>
             </ElRadio>
           </div>
-          <div class="flex w-24 items-center justify-center">
+          <div class="flex flex-1 items-center justify-center">
             <ElRadio
-              class="ml-5"
               :value="FieldPermissionType.NONE"
               size="large"
               @change="updateElementExtensions"
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
index 4c87b5eac..bc5e98df0 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -328,7 +328,7 @@ watch(
 );
 </script>
 <template>
-  <div class="-mx-2">
+  <div class="-mx-2 mb-2">
     <ListenerGrid :data="elementListenersList">
       <template #action="{ row, rowIndex }">
         <ElButton
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index 6816058a4..c35b1926d 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -324,7 +324,7 @@ watch(
 );
 </script>
 <template>
-  <div class="-mx-2">
+  <div class="-mx-2 mb-2">
     <ListenerGrid>
       <template #action="{ row, rowIndex }">
         <ElButton
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
index d4f6b472d..f7ca14286 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -412,7 +412,7 @@ watch(
 </script>
 
 <template>
-  <div class="-mx-2 px-2">
+  <div class="-mx-2 mb-2 px-2">
     <ElRadioGroup
       v-if="type === 'UserTask'"
       v-model="approveMethod"
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
index cdfe85199..f0fb820cf 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
@@ -56,7 +56,7 @@ watch(
 </script>
 
 <template>
-  <div class="px-2 py-1">
+  <div class="px-2 py-2">
     <div class="flex items-start gap-2">
       <div class="w-20 pt-1 text-sm text-gray-700">元素文档：</div>
       <div class="flex-1">
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
index 6105f04d2..dfde667c3 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
@@ -191,7 +191,7 @@ watch(
 </script>
 
 <template>
-  <div class="-mx-2">
+  <div class="-mx-2 mb-2">
     <Grid :data="elementPropertyList">
       <template #action="{ row, rowIndex }">
         <ElButton
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
index 4ae00da73..030b1d6bd 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
@@ -65,7 +65,7 @@ watch(
   <div class="panel-tab__content">
     <ElForm>
       <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
-      <ElFormItem label="异步延续" class="hidden">
+      <ElFormItem label="异步延续" class="!hidden">
         <ElCheckbox
           v-model="taskConfigForm.asyncBefore"
           @change="changeTaskAsync"
-- 
Gitee