diff --git a/package.json b/package.json
index b911cd6..223af4f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
     "axios": "1.7.8",
-    "bpmn-js": "16.4.0",
     "crypto-js": "4.2.0",
     "diagram-js": "12.3.0",
     "didi": "9.0.2",
diff --git a/src/bpmn/assets/defaultXML.ts b/src/bpmn/assets/defaultXML.ts
deleted file mode 100644
index dff0349..0000000
--- a/src/bpmn/assets/defaultXML.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-function generateRandomValue() {
-  // 生成一个随机数
-  const randomValue = Math.random().toString(36).slice(2, 12);
-  return `Process_${randomValue}`;
-}
-
-const cartage: string = 'default';
-export default `<?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
-  <process id="process_${generateRandomValue()}" name="name_${generateRandomValue()}">
-    <startEvent id="startNode1" name="开始" />
-  </process>
-  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
-    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
-      <bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
-        <omgdc:Bounds x="240" y="200" width="30" height="30" />
-        <bpmndi:BPMNLabel>
-          <omgdc:Bounds x="242" y="237" width="23" height="14" />
-        </bpmndi:BPMNLabel>
-      </bpmndi:BPMNShape>
-    </bpmndi:BPMNPlane>
-  </bpmndi:BPMNDiagram>
-</definitions>`;
diff --git a/src/bpmn/assets/lang/zh.ts b/src/bpmn/assets/lang/zh.ts
deleted file mode 100644
index ee0c5de..0000000
--- a/src/bpmn/assets/lang/zh.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-export const NodeName = {
-  'bpmn:Process': '流程',
-  'bpmn:StartEvent': '开始事件',
-  'bpmn:IntermediateThrowEvent': '中间事件',
-  'bpmn:Task': '任务',
-  'bpmn:SendTask': '发送任务',
-  'bpmn:ReceiveTask': '接收任务',
-  'bpmn:UserTask': '用户任务',
-  'bpmn:ManualTask': '手工任务',
-  'bpmn:BusinessRuleTask': '业务规则任务',
-  'bpmn:ServiceTask': '服务任务',
-  'bpmn:ScriptTask': '脚本任务',
-  'bpmn:EndEvent': '结束事件',
-  'bpmn:SequenceFlow': '流程线',
-  'bpmn:ExclusiveGateway': '互斥网关',
-  'bpmn:ParallelGateway': '并行网关',
-  'bpmn:InclusiveGateway': '相容网关',
-  'bpmn:ComplexGateway': '复杂网关',
-  'bpmn:EventBasedGateway': '事件网关',
-  'bpmn:Participant': '池/参与者',
-  'bpmn:SubProcess': '子流程',
-  'bpmn:DataObjectReference': '数据对象引用',
-  'bpmn:DataStoreReference': '数据存储引用',
-  'bpmn:Group': '组'
-};
-
-export default {
-  'Activate hand tool': '启动手动工具',
-  'Activate lasso tool': '启动 Lasso 工具',
-  'Activate create/remove space tool': '启动创建/删除空间工具',
-  'Activate global connect tool': '启动全局连接工具',
-  'Ad-hoc': 'Ad-hoc',
-  'Add lane above': '在上方添加泳道',
-  'Add lane below': '在下方添加泳道',
-  'Business rule task': '规则任务',
-  'Call activity': '引用流程',
-  'Compensation end event': '结束补偿事件',
-  'Compensation intermediate throw event': '中间补偿抛出事件',
-  'Complex gateway': '复杂网关',
-  'Conditional intermediate catch event': '中间条件捕获事件',
-  'Conditional start event (non-interrupting)': '条件启动事件 (非中断)',
-  'Conditional start event': '条件启动事件',
-  'Connect using association': '文本关联',
-  'Connect using sequence/message flow or association': '消息关联',
-  'Change element': '更改元素',
-  'Change type': '更改类型',
-  'Create data object reference': '创建数据对象引用',
-  'Create data store reference': '创建数据存储引用',
-  'Create expanded sub-process': '创建可折叠子流程',
-  'Create pool/participant': '创建池/参与者',
-  'Collection': '集合',
-  'Connect using data input association': '数据输入关联',
-  'Data store reference': '数据存储引用',
-  'Data object reference': '数据对象引用',
-  'Divide into two lanes': '分成两个泳道',
-  'Divide into three lanes': '分成三个泳道',
-  'End event': '结束事件',
-  'Error end event': '结束错误事件',
-  'Escalation end event': '结束升级事件',
-  'Escalation intermediate throw event': '中间升级抛出事件',
-  'Event sub-process': '事件子流程',
-  'Event-based gateway': '事件网关',
-  'Exclusive gateway': '互斥网关',
-  'Empty pool/participant (removes content)': '清空池/参与者 (删除内容)',
-  'Empty pool/participant': '清空池/参与者',
-  'Expanded pool/participant': '展开池/参与者',
-  'Inclusive gateway': '相容网关',
-  'Intermediate throw event': '中间抛出事件',
-  'Loop': '循环',
-  'Link intermediate catch event': '中间链接捕获事件',
-  'Link intermediate throw event': '中间链接抛出事件',
-  'Manual task': '手动任务',
-  'Message end event': '结束消息事件',
-  'Message intermediate catch event': '中间消息捕获事件',
-  'Message intermediate throw event': '中间消息抛出事件',
-  'Message start event': '消息启动事件',
-  'Parallel gateway': '并行网关',
-  'Parallel multi-instance': '并行多实例',
-  'Participant multiplicity': '参与者多重性',
-  'Receive task': '接受任务',
-  'Remove': '移除',
-  'Script task': '脚本任务',
-  'Send task': '发送任务',
-  'Sequential multi-instance': '串行多实例',
-  'Service task': '服务任务',
-  'Signal end event': '结束信号事件',
-  'Signal intermediate catch event': '中间信号捕获事件',
-  'Signal intermediate throw event': '中间信号抛出事件',
-  'Signal start event (non-interrupting)': '信号启动事件 (非中断)',
-  'Signal start event': '信号启动事件',
-  'Start event': '开始事件',
-  'Sub-process (collapsed)': '可折叠子流程',
-  'Sub-process (expanded)': '可展开子流程',
-  'Sub rocess': '子流程',
-  'Task': '任务',
-  'Transaction': '事务',
-  'Terminate end event': '终止边界事件',
-  'Timer intermediate catch event': '中间定时捕获事件',
-  'Timer start event (non-interrupting)': '定时启动事件 (非中断)',
-  'Timer start event': '定时启动事件',
-  'User task': '用户任务',
-  'Create start event': '创建开始事件',
-  'Create gateway': '创建网关',
-  'Create intermediate/boundary event': '创建中间/边界事件',
-  'Create end event': '创建结束事件',
-  'Create group': '创建组',
-  'Create startEvent': '开始节点',
-  'Create endEvent': '结束节点',
-  'Create exclusiveGateway': '互斥网关',
-  'Create parallelGateway': '并行网关',
-  'Create task': '任务节点',
-  'Create userTask': '用户任务节点',
-  'Condition type': '条件类型',
-  'Append end event': '追加结束事件节点',
-  'Append gateway': '追加网关节点',
-  'Append task': '追加任务',
-  'Append user task': '追加用户任务节点',
-  'Append text annotation': '追加文本注释',
-  'Append intermediate/boundary event': '追加中间或边界事件',
-  'Append receive task': '追加接收任务节点',
-  'Append message intermediate catch event': '追加中间消息捕获事件',
-  'Append timer intermediate catch event': '追加中间定时捕获事件',
-  'Append conditional intermediate catch event': '追加中间条件捕获事件',
-  'Append signal intermediate catch event': '追加中间信号捕获事件',
-  'flow elements must be children of pools/participants': '流程元素必须是池/参与者的子元素'
-};
diff --git a/src/bpmn/assets/moddle/flowable.ts b/src/bpmn/assets/moddle/flowable.ts
deleted file mode 100644
index de959a6..0000000
--- a/src/bpmn/assets/moddle/flowable.ts
+++ /dev/null
@@ -1,1250 +0,0 @@
-export default {
-  'name': 'Flowable',
-  'uri': 'http://flowable.org/bpmn',
-  'prefix': 'flowable',
-  'xml': {
-    'tagAlias': 'lowerCase'
-  },
-  'associations': [],
-  'types': [
-    {
-      'name': 'flowable:extCandidateUsers',
-      'isAbstract': true,
-      'extends': [],
-      'superClass': ['Element'],
-      'meta': {
-        'allowedIn': ['*']
-      },
-      'properties': [
-        {
-          'name': 'body',
-          'type': 'String',
-          'isBody': true
-        }
-      ]
-    },
-    {
-      'name': 'flowable:extAssignee',
-      'isAbstract': true,
-      'extends': [],
-      'superClass': ['Element'],
-      'meta': {
-        'allowedIn': ['*']
-      },
-      'properties': [
-        {
-          'name': 'body',
-          'type': 'String',
-          'isBody': true
-        }
-      ]
-    },
-    {
-      'name': 'flowable:property',
-      'superClass': ['Element'],
-      'properties': [
-        {
-          'name': 'id',
-          'isAttr': true,
-          'type': 'String'
-        },
-        {
-          'name': 'name',
-          'isAttr': true,
-          'type': 'String'
-        },
-        {
-          'name': 'value',
-          'isAttr': true,
-          'type': 'String'
-        }
-      ]
-    },
-    {
-      'name': 'flowable:properties',
-      'isAbstract': true,
-      'extends': [],
-      'superClass': ['Element'],
-      'meta': {
-        'allowedIn': ['*']
-      },
-      'properties': [
-        {
-          'name': 'values',
-          'type': 'flowable:property',
-          'isMany': true
-        }
-      ]
-    },
-    {
-      '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': 'flowable:in',
-      'superClass': ['Element'],
-      'properties': [
-        {
-          'name': 'source',
-          'type': 'string',
-          'isAttr': true
-        },
-        {
-          'name': 'target',
-          'type': 'string',
-          'isAttr': true
-        }
-      ]
-    },
-    {
-      'name': 'flowable:out',
-      'superClass': ['Element'],
-      'properties': [
-        {
-          'name': 'source',
-          'type': 'string',
-          'isAttr': true
-        },
-        {
-          'name': 'target',
-          'type': 'string',
-          'isAttr': true
-        }
-      ]
-    },
-    {
-      'name': 'BoundaryEvent',
-      'superClass': ['CatchEvent'],
-      'properties': [
-        {
-          'name': 'cancelActivity',
-          'default': true,
-          'isAttr': true,
-          'type': 'Boolean'
-        },
-        {
-          'name': 'attachedToRef',
-          'type': 'Activity',
-          'isAttr': true,
-          'isReference': 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': 'UserTask',
-      'isAbstract': true,
-      'extends': ['bpmn:UserTask'],
-      'properties': [
-        {
-          'name': 'timerEventDefinition',
-          'type': 'Expression'
-        },
-        {
-          'name': 'multiInstanceLoopCharacteristics',
-          'type': 'MultiInstanceLoopCharacteristics'
-        }
-      ]
-    },
-    {
-      'name': 'StartEvent',
-      'isAbstract': true,
-      'extends': ['bpmn:StartEvent'],
-      'properties': [
-        {
-          'name': 'timerEventDefinition',
-          'type': 'Expression'
-        }
-      ]
-    },
-    {
-      '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': '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': 'candidateGroups',
-          'isAttr': true,
-          'type': 'String'
-        },
-        {
-          'name': 'dueDate',
-          'isAttr': true,
-          'type': 'String'
-        },
-        {
-          'name': 'followUpDate',
-          'isAttr': true,
-          'type': 'String'
-        },
-        {
-          'name': 'priority',
-          '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': 'ExclusiveGateway',
-      'isAbstract': true,
-      'extends': ['bpmn:ExclusiveGateway'],
-      'properties': [
-        {
-          'name': 'serviceClass',
-          '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': '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',
-          'isAttr': true,
-          'type': 'expression'
-        },
-        {
-          'name': 'string',
-          'type': 'string'
-        },
-        {
-          'name': 'stringValue',
-          'isAttr': true,
-          'type': 'String'
-        }
-      ]
-    },
-    {
-      'name': 'string',
-      'superClass': ['Element'],
-      'meta': {
-        'allowedIn': ['flowable:Field']
-      },
-      'properties': [
-        {
-          'name': 'body',
-          'isBody': true,
-          'type': 'String'
-        }
-      ]
-    },
-    {
-      'name': 'expression',
-      'superClass': ['Element'],
-      'meta': {
-        'allowedIn': ['flowable:Field']
-      },
-      'properties': [
-        {
-          'name': 'body',
-          'isBody': true,
-          'type': 'String'
-        }
-      ]
-    },
-    {
-      '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': 'SequenceFlow',
-      'superClass': ['FlowElement'],
-      'properties': [
-        {
-          'name': 'isImmediate',
-          'isAttr': true,
-          'type': 'Boolean'
-        },
-        {
-          'name': 'conditionExpression',
-          'type': 'Expression'
-        },
-        {
-          'name': 'sourceRef',
-          'type': 'FlowNode',
-          'isAttr': true,
-          'isReference': true
-        },
-        {
-          'name': 'targetRef',
-          'type': 'FlowNode',
-          'isAttr': true,
-          'isReference': true
-        }
-      ]
-    },
-    {
-      'name': 'MultiInstanceLoopCharacteristics',
-      'superClass': ['LoopCharacteristics'],
-      'properties': [
-        {
-          'name': 'isSequential',
-          'default': false,
-          'isAttr': true,
-          'type': 'Boolean'
-        },
-        {
-          'name': 'behavior',
-          'type': 'MultiInstanceBehavior',
-          'default': 'All',
-          'isAttr': true
-        },
-        {
-          'name': 'loopCardinality',
-          'type': 'Expression',
-          'xml': {
-            'serialize': 'xsi:type'
-          }
-        },
-        {
-          'name': 'loopDataInputRef',
-          'type': 'ItemAwareElement',
-          'isReference': true
-        },
-        {
-          'name': 'loopDataOutputRef',
-          'type': 'ItemAwareElement',
-          'isReference': true
-        },
-        {
-          'name': 'inputDataItem',
-          'type': 'DataInput',
-          'xml': {
-            'serialize': 'property'
-          }
-        },
-        {
-          'name': 'outputDataItem',
-          'type': 'DataOutput',
-          'xml': {
-            'serialize': 'property'
-          }
-        },
-        {
-          'name': 'complexBehaviorDefinition',
-          'type': 'ComplexBehaviorDefinition',
-          'isMany': true
-        },
-        {
-          'name': 'completionCondition',
-          'type': 'Expression',
-          'xml': {
-            'serialize': 'xsi:type'
-          }
-        },
-        {
-          'name': 'oneBehaviorEventRef',
-          'type': 'EventDefinition',
-          'isAttr': true,
-          'isReference': true
-        },
-        {
-          'name': 'noneBehaviorEventRef',
-          'type': 'EventDefinition',
-          'isAttr': true,
-          'isReference': true
-        }
-      ]
-    },
-    {
-      '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': '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': 'variableEvent',
-          'isAttr': true,
-          'type': 'String'
-        }
-      ]
-    }
-  ],
-  'emumerations': []
-};
diff --git a/src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts b/src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts
deleted file mode 100644
index 13ccf50..0000000
--- a/src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';
-import { Injector } from 'didi';
-import EventBus from 'diagram-js/lib/core/EventBus';
-import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad';
-import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
-import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
-import Connect from 'diagram-js/lib/features/connect/Connect';
-import Create from 'diagram-js/lib/features/create/Create';
-import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu';
-import Canvas from 'diagram-js/lib/core/Canvas';
-import Rules from 'diagram-js/lib/features/rules/Rules';
-import { Element, Shape } from 'diagram-js/lib/model/Types';
-import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
-import modeler from '@/store/modules/modeler';
-
-// @Description: 增强元素连线事件
-
-class CustomContextPadProvider extends ContextPadProvider {
-  private _contextPad: ContextPad;
-  private _modeling: Modeling;
-  private _elementFactory: ElementFactory;
-  private _autoPlace: any;
-  private _connect: Connect;
-  private _create: Create;
-  private _popupMenu: PopupMenu;
-  private _canvas: Canvas;
-  private _rules: Rules;
-
-  constructor(
-    config: any,
-    injector: Injector,
-    eventBus: EventBus,
-    contextPad: ContextPad,
-    modeling: Modeling,
-    elementFactory: ElementFactory,
-    connect: Connect,
-    create: Create,
-    popupMenu: PopupMenu,
-    canvas: Canvas,
-    rules: Rules,
-    translate
-  ) {
-    // @ts-expect-error 忽略异常
-    super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate);
-
-    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._autoPlace = injector.get('autoPlace', false);
-  }
-
-  getContextPadEntries(element: Element) {
-    const actions: Record<string, any> = {};
-
-    const appendUserTask = (event: Event, element: Shape) => {
-      const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
-      this._create.start(event, shape, {
-        source: element
-      });
-    };
-
-    const appendMultiInstanceUserTask = (event: Event, element: Shape) => {
-      const store = modeler();
-      const bpmnFactory = store.getModeler().get('bpmnFactory') as BpmnFactory;
-      const businessObject = bpmnFactory.create('bpmn:UserTask', {
-        // name: '多实例用户任务',
-        isForCompensation: false
-      });
-      businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
-      // 创建 Shape
-      const shape = this._elementFactory.createShape({
-        type: 'bpmn:UserTask',
-        businessObject: businessObject
-      });
-      this._create.start(event, shape, { source: element });
-    };
-
-    const appendTask = this._autoPlace
-      ? (event, element) => {
-          const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory');
-          const businessObject = bpmnFactory.create('bpmn:UserTask', {
-            // name: '多实例用户任务',// 右键创建显示
-            isForCompensation: false
-          });
-
-          // 创建多实例属性并分配给用户任务的 loopCharacteristics
-          businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
-
-          // 创建 Shape
-          const shape = this._elementFactory.createShape({
-            type: 'bpmn:UserTask',
-            businessObject: businessObject
-          });
-
-          this._autoPlace.append(element, shape);
-        }
-      : appendMultiInstanceUserTask;
-
-    const append = this._autoPlace
-      ? (event: Event, element: Shape) => {
-          const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
-          this._autoPlace.append(element, shape);
-        }
-      : appendUserTask;
-
-    // // 添加创建用户任务按钮
-    actions['append.append-user-task'] = {
-      group: 'model',
-      className: 'bpmn-icon-user-task',
-      title: '用户任务',
-      action: {
-        dragstart: appendUserTask,
-        click: append
-      }
-    };
-
-    // 添加创建多实例用户任务按钮
-    actions['append.append-multi-instance-user-task'] = {
-      group: 'model',
-      className: 'bpmn-icon-user', // 你可以使用多实例用户任务的图标  bpmn-icon-user   bpmn-icon-user-task
-      title: '多实例用户任务',
-      action: {
-        dragstart: appendMultiInstanceUserTask,
-        click: appendTask
-      }
-    };
-
-    return actions;
-  }
-}
-
-export default CustomContextPadProvider;
diff --git a/src/bpmn/assets/module/Palette/CustomPaletteProvider.ts b/src/bpmn/assets/module/Palette/CustomPaletteProvider.ts
deleted file mode 100644
index 8556d9b..0000000
--- a/src/bpmn/assets/module/Palette/CustomPaletteProvider.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { assign } from 'min-dash';
-import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
-import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
-import Create from 'diagram-js/lib/features/create/Create';
-import SpaceTool from 'diagram-js/lib/features/space-tool/SpaceTool';
-import LassoTool from 'diagram-js/lib/features/lasso-tool/LassoTool';
-import HandTool from 'diagram-js/lib/features/hand-tool/HandTool';
-import GlobalConnect from 'diagram-js/lib/features/global-connect/GlobalConnect';
-import Palette from 'diagram-js/lib/features/palette/Palette';
-import modeler from '@/store/modules/modeler';
-import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
-
-// @Description: 增强左侧面板
-class CustomPaletteProvider extends PaletteProvider {
-  private readonly _palette: Palette;
-  private readonly _create: Create;
-  private readonly _elementFactory: ElementFactory;
-  private readonly _spaceTool: SpaceTool;
-  private readonly _lassoTool: LassoTool;
-  private readonly _handTool: HandTool;
-  private readonly _globalConnect: GlobalConnect;
-  private readonly _translate: any;
-
-  constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
-    super(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;
-  }
-
-  getPaletteEntries() {
-    const actions = {},
-      create = this._create,
-      elementFactory = this._elementFactory,
-      translate = this._translate;
-
-    function createAction(type: string, group: string, className: string, title: string, options?: object) {
-      function createListener(event) {
-        const shape = elementFactory.createShape(assign({ type: type }, options));
-        if (options) {
-          !shape.businessObject.di && (shape.businessObject.di = {});
-          shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded;
-        }
-        create.start(event, shape, null);
-      }
-      const shortType = type.replace(/^bpmn:/, '');
-      return {
-        group: group,
-        className: className,
-        title: title || translate('Create {type}', { type: shortType }),
-        action: {
-          dragstart: createListener,
-          click: createListener
-        }
-      };
-    }
-
-    function createMultiInstanceUserTask(event) {
-      const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory();
-      // 创建一个 bpmn:UserTask
-      const userTask = bpmnFactory.create('bpmn:UserTask', {
-        // name: '多实例用户任务', // 在画板中显示字段
-        isForCompensation: false
-      });
-      // 将多实例属性分配给 bpmn:UserTask 的 loopCharacteristics
-      userTask.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
-      const customUserTask = elementFactory.createShape({
-        type: 'bpmn:UserTask',
-        businessObject: userTask // 分配创建的 userTask 到 businessObject
-      });
-      create.start(event, customUserTask, {});
-    }
-
-    assign(actions, {
-      'create.parallel-gateway': createAction('bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel', '并行网关'),
-      'create.event-base-gateway': createAction('bpmn:EventBasedGateway', 'gateway', 'bpmn-icon-gateway-eventbased', '事件网关'),
-      // 分组线
-      'gateway-separator': {
-        group: 'gateway',
-        separator: true
-      },
-      'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'),
-      'create.multi-instance-user-task': {
-        group: 'activity',
-        type: 'bpmn:UserTask',
-        className: 'bpmn-icon-user task-multi-instance',
-        title: '创建多实例用户任务',
-        action: {
-          click: createMultiInstanceUserTask,
-          dragstart: createMultiInstanceUserTask
-        }
-      },
-      'task-separator': {
-        group: 'activity',
-        separator: true
-      }
-    });
-    return actions;
-  }
-}
-
-CustomPaletteProvider['$inject'] = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate'];
-
-export default CustomPaletteProvider;
diff --git a/src/bpmn/assets/module/Renderer/CustomRenderer.ts b/src/bpmn/assets/module/Renderer/CustomRenderer.ts
deleted file mode 100644
index 6a4eb1a..0000000
--- a/src/bpmn/assets/module/Renderer/CustomRenderer.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
-import {
-  append as svgAppend,
-  attr as svgAttr,
-  create as svgCreate,
-  select as svgSelect,
-  selectAll as svgSelectAll,
-  clone as svgClone,
-  clear as svgClear,
-  remove as svgRemove
-} from 'tiny-svg';
-
-const HIGH_PRIORITY = 1500;
-export default class CustomRenderer extends BaseRenderer {
-  bpmnRenderer: BaseRenderer;
-  modeling: any;
-  constructor(eventBus, bpmnRenderer, modeling) {
-    super(eventBus, HIGH_PRIORITY);
-    this.bpmnRenderer = bpmnRenderer;
-    this.modeling = modeling;
-  }
-  canRender(element) {
-    // ignore labels
-    return !element.labelTarget;
-  }
-
-  /**
-   * 自定义节点图形
-   * @param {*} parentNode 当前元素的svgNode
-   * @param {*} element
-   * @returns
-   */
-  drawShape(parentNode, element) {
-    const shape = this.bpmnRenderer.drawShape(parentNode, element);
-    const { type, width, height } = element;
-    // 开始 填充绿色
-    if (type === 'bpmn:StartEvent') {
-      svgAttr(shape, { fill: '#77DF6D' });
-      return shape;
-    }
-    if (type === 'bpmn:EndEvent') {
-      svgAttr(shape, { fill: '#EE7B77' });
-      return shape;
-    }
-    if (type === 'bpmn:UserTask') {
-      svgAttr(shape, { fill: '#A9C4F8' });
-      return shape;
-    }
-    return shape;
-  }
-
-  getShapePath(shape) {
-    return this.bpmnRenderer.getShapePath(shape);
-  }
-}
-CustomRenderer['$inject'] = ['eventBus', 'bpmnRenderer'];
diff --git a/src/bpmn/assets/module/Translate/index.ts b/src/bpmn/assets/module/Translate/index.ts
deleted file mode 100644
index 6b52dae..0000000
--- a/src/bpmn/assets/module/Translate/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import zh from '../../lang/zh';
-
-const customTranslate = (template: any, replacements: any) => {
-  replacements = replacements || {};
-  template = zh[template] || template;
-  return template.replace(/{([^}]+)}/g, function (_: any, key: any) {
-    return replacements[key] || '{' + key + '}';
-  });
-};
-
-export const translateModule = {
-  translate: ['value', customTranslate]
-};
-
-export default translateModule;
diff --git a/src/bpmn/assets/module/index.ts b/src/bpmn/assets/module/index.ts
deleted file mode 100644
index 55f6b9f..0000000
--- a/src/bpmn/assets/module/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// 翻译模块
-import TranslationModule from './Translate';
-import { ModuleDeclaration } from 'didi';
-import CustomPaletteProvider from './Palette/CustomPaletteProvider';
-import CustomRenderer from './Renderer/CustomRenderer';
-import CustomContextPadProvider from './ContextPad/CustomContextPadProvider';
-
-const Module: ModuleDeclaration[] = [
-  {
-    __init__: ['customPaletteProvider', 'customContextPadProvider', 'customRenderer'],
-    customPaletteProvider: ['type', CustomPaletteProvider],
-    customRenderer: ['type', CustomRenderer],
-    customContextPadProvider: ['type', CustomContextPadProvider]
-  },
-  TranslationModule
-];
-export default Module;
diff --git a/src/bpmn/assets/showConfig.ts b/src/bpmn/assets/showConfig.ts
deleted file mode 100644
index 853eb35..0000000
--- a/src/bpmn/assets/showConfig.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export default {
-  'bpmn:EndEvent': {},
-  'bpmn:StartEvent': {
-    initiator: true,
-    formKey: true
-  },
-  'bpmn:UserTask': {
-    allocationType: true,
-    specifyDesc: true,
-    multipleUserAuditType: true,
-    async: true,
-    priority: true,
-    skipExpression: true,
-    dueDate: true,
-    taskListener: true,
-    executionListener: true
-  },
-  'bpmn:ServiceTask': {
-    async: true,
-    skipExpression: true,
-    isForCompensation: true,
-    triggerable: true,
-    class: true
-  },
-  'bpmn:ScriptTask': {
-    async: true,
-    isForCompensation: true,
-    autoStoreVariables: true
-  },
-  'bpmn:ManualTask': {
-    async: true,
-    isForCompensation: true
-  },
-  'bpmn:ReceiveTask': {
-    async: true,
-    isForCompensation: true
-  },
-  'bpmn:SendTask': {
-    async: true,
-    isForCompensation: true
-  },
-  'bpmn:BusinessRuleTask': {
-    async: true,
-    isForCompensation: true,
-    ruleVariablesInput: true,
-    rules: true,
-    resultVariable: true,
-    exclude: true
-  }
-};
diff --git a/src/bpmn/assets/style/index.scss b/src/bpmn/assets/style/index.scss
deleted file mode 100644
index 3c92792..0000000
--- a/src/bpmn/assets/style/index.scss
+++ /dev/null
@@ -1,284 +0,0 @@
-.djs-palette {
-  width: 300px;
-
-  .bpmn-icon-hand-tool:hover {
-    &:after {
-      content: '启动手动工具';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-lasso-tool:hover {
-    &:after {
-      content: '启动套索工具';
-      position: absolute;
-      left: 100px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-space-tool:hover {
-    &:after {
-      content: '启动创建/删除空间工具';
-      position: absolute;
-      left: 45px;
-      width: 170px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-connection-multi:hover {
-    &:after {
-      content: '启动全局连接工具';
-      position: absolute;
-      left: 100px;
-      width: 140px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-start-event-none:hover {
-    &:after {
-      content: '创建开始事件';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-intermediate-event-none:hover {
-    &:after {
-      content: '创建中间/边界事件';
-      position: absolute;
-      left: 100px;
-      width: 140px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-end-event-none:hover {
-    &:after {
-      content: '创建结束事件';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-gateway-none:hover {
-    &:after {
-      content: '创建网关';
-      position: absolute;
-      left: 100px;
-      width: 90px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-gateway-parallel:hover {
-    &:after {
-      content: '创建并行网关';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-gateway-eventbased:hover {
-    &:after {
-      content: '创建事件网关';
-      position: absolute;
-      left: 100px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-task:hover {
-    &:after {
-      content: '创建任务';
-      position: absolute;
-      left: 45px;
-      width: 80px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-subprocess-expanded:hover {
-    &:after {
-      content: '创建可折叠子流程';
-      position: absolute;
-      left: 100px;
-      width: 140px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-user-task:hover {
-    &:after {
-      content: '创建用户任务';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-
-  .task-multi-instance:hover {
-    &:after {
-      content: '创建多实例用户任务';
-      position: absolute;
-      left: 100px;
-      width: 160px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-participant:hover {
-    &:after {
-      content: '创建泳池/泳道';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-data-object {
-    display: none;
-    &:hover {
-      &:after {
-        content: '创建数据对象';
-        position: absolute;
-        left: 45px;
-        width: 120px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #3a84de;
-        border-radius: 2px;
-        border: 1px solid #cccccc;
-        background-color: #fafafa;
-        opacity: 0.8;
-      }
-    }
-  }
-  .bpmn-icon-data-store {
-    display: none;
-    &:hover {
-      &:after {
-        content: '创建数据存储';
-        position: absolute;
-        left: 100px;
-        width: 120px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #3a84de;
-        border-radius: 2px;
-        border: 1px solid #cccccc;
-        background-color: #fafafa;
-        opacity: 0.8;
-      }
-    }
-  }
-  .bpmn-icon-group {
-    display: none;
-    &:hover {
-      &:after {
-        content: '创建分组';
-        position: absolute;
-        left: 100px;
-        width: 100px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #3a84de;
-        border-radius: 2px;
-        border: 1px solid #cccccc;
-        background-color: #fafafa;
-        opacity: 0.8;
-      }
-    }
-  }
-}
diff --git a/src/bpmn/hooks/usePanel.ts b/src/bpmn/hooks/usePanel.ts
deleted file mode 100644
index ace579b..0000000
--- a/src/bpmn/hooks/usePanel.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import showConfig from '../assets/showConfig';
-import type { ModdleElement } from 'bpmn';
-import useModelerStore from '@/store/modules/modeler';
-import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
-interface Options {
-  element: ModdleElement;
-}
-
-export default (ops: Options) => {
-  const { element } = ops;
-  const { getModeling, getModdle } = useModelerStore();
-  const modeling = getModeling();
-  const moddle = getModdle();
-
-  /**
-   * 当前节点类型
-   */
-  const elementType = computed(() => {
-    const bizObj = element.businessObject;
-    return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
-  });
-
-  /**
-   * 用于控制面板字段显示与隐藏的配置
-   */
-  const config = computed(() => showConfig[elementType.value] || {});
-
-  /**
-   * 创建一个节点
-   * @param elementType 节点类型
-   * @param properties 属性
-   * @param parent 父节点
-   */
-  const createModdleElement = (elementType: string, properties: any, parent: ModdleElement) => {
-    const element = moddle.create(elementType, properties);
-    parent && (element.$parent = parent);
-    return element;
-  };
-
-  /**
-   * 获取扩展属性，如果不存在会自动创建
-   */
-  const getExtensionElements = (create = true) => {
-    let extensionElements = element.businessObject.get<ModdleElement>('extensionElements');
-    if (!extensionElements && create) {
-      extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject);
-      modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
-    }
-    return extensionElements;
-  };
-
-  /**
-   * 获取extensionElements下的properties
-   * @param extensionElements 可选参数，默认获取当前Element下的extensionElements下的Properties
-   */
-  const getPropertiesElements = (extensionElements?: ModdleElement) => {
-    if (!extensionElements) {
-      extensionElements = getExtensionElements();
-    }
-    let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
-    if (!propertiesElements) {
-      propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements);
-      modeling.updateModdleProperties(element, extensionElements, {
-        values: [...extensionElements.get<[]>('values'), propertiesElements]
-      });
-    }
-    return propertiesElements;
-  };
-
-  /**
-   * 更新节点属性
-   * @param properties 属性值
-   */
-  const updateProperties = (properties: any) => {
-    modeling.updateProperties(element, properties);
-  };
-
-  /**
-   * 更新节点信息
-   * @param updateElement 需要更新的节点
-   * @param properties 属性
-   */
-  const updateModdleProperties = (updateElement, properties: any) => {
-    modeling.updateModdleProperties(element, updateElement, properties);
-  };
-
-  /**
-   * 更新Property属性
-   * @param name key值
-   * @param value 值
-   */
-  const updateProperty = (name: string, value: string) => {
-    const propertiesElements = getPropertiesElements();
-
-    let propertyElements = propertiesElements.values.find((item) => item.name === name);
-    if (!propertyElements) {
-      propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements);
-      modeling.updateModdleProperties(element, propertiesElements, {
-        values: [...propertiesElements.get('values'), propertyElements]
-      });
-    } else {
-      propertyElements.name = name;
-      propertyElements.value = value;
-    }
-    return propertyElements;
-  };
-
-  const idChange = (newVal: string) => {
-    if (newVal) {
-      updateProperties({ id: newVal });
-    }
-  };
-  const nameChange = (newVal: string) => {
-    if (newVal) {
-      updateProperties({ name: newVal });
-    }
-  };
-  const formKeyChange = (newVal: string) => {
-    updateProperties({ formKey: newVal });
-  };
-  const constant = {
-    MultiInstanceType: [
-      { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
-      { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
-      { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
-    ]
-  };
-
-  return {
-    elementType,
-    constant,
-    showConfig: config,
-
-    updateProperties,
-    updateProperty,
-    updateModdleProperties,
-
-    createModdleElement,
-    idChange,
-    nameChange,
-    formKeyChange,
-    getExtensionElements,
-    getPropertiesElements
-  };
-};
diff --git a/src/bpmn/hooks/useParseElement.ts b/src/bpmn/hooks/useParseElement.ts
deleted file mode 100644
index e1a6054..0000000
--- a/src/bpmn/hooks/useParseElement.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ModdleElement } from 'bpmn';
-
-interface Options {
-  element: ModdleElement;
-}
-
-interface Data {
-  id: string;
-}
-
-export default (ops: Options) => {
-  const { element } = ops;
-
-  const parseData = <T>(): T => {
-    const result = {
-      ...element.businessObject,
-      ...element.businessObject.$attrs
-    };
-
-    // 移除flowable前缀，格式化数组
-    for (const key in result) {
-      if (key.indexOf('flowable:') === 0) {
-        const newKey = key.replace('flowable:', '');
-        result[newKey] = result[key];
-        delete result[key];
-      }
-    }
-    return { ...result } as T;
-  };
-
-  return {
-    parseData
-  };
-};
diff --git a/src/bpmn/index.vue b/src/bpmn/index.vue
deleted file mode 100644
index 15437c8..0000000
--- a/src/bpmn/index.vue
+++ /dev/null
@@ -1,496 +0,0 @@
-<template>
-  <div class="containers-bpmn">
-    <!-- dark模式下 连接线的箭头样式 -->
-    <svg width="0" height="0" style="position: absolute">
-      <defs>
-        <marker id="markerArrow-dark-mode" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
-          <path d="M 1 5 L 11 10 L 1 15 Z" class="arrow-dark" />
-        </marker>
-      </defs>
-    </svg>
-    <div v-loading="loading" class="app-containers-bpmn">
-      <el-container class="h-full">
-        <el-container style="align-items: stretch">
-          <el-header>
-            <div class="process-toolbar">
-              <el-space wrap :size="10">
-                <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-                  <el-button size="small" icon="Rank" @click="fitViewport" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="放大" placement="bottom">
-                  <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="缩小" placement="bottom">
-                  <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="后退" placement="bottom">
-                  <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="前进" placement="bottom">
-                  <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
-                </el-tooltip>
-              </el-space>
-              <el-space wrap :size="10" style="float: right; padding-right: 10px">
-                <el-button size="small" type="primary" @click="saveXml">保 存</el-button>
-                <el-dropdown size="small">
-                  <el-button size="small" type="primary"> 预 览 </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
-                      <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-                <el-dropdown size="small">
-                  <el-button size="small" type="primary"> 下 载 </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
-                      <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </el-space>
-            </div>
-          </el-header>
-          <div ref="canvas" class="canvas" />
-        </el-container>
-        <div :class="{ 'process-panel': true, 'hide': panelFlag }">
-          <div class="process-panel-bar" @click="panelBarClick">
-            <div class="open-bar">
-              <el-link type="default" :underline="false">
-                <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
-              </el-link>
-            </div>
-          </div>
-          <transition enter-active-class="animate__animated animate__fadeIn">
-            <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
-              <PropertyPanel :modeler="bpmnModeler" />
-            </div>
-          </transition>
-        </div>
-      </el-container>
-    </div>
-  </div>
-  <div>
-    <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%" append-to-body>
-      <highlightjs :code="xmlStr" language="XML" />
-    </el-dialog>
-  </div>
-  <div>
-    <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%" append-to-body>
-      <div style="text-align: center" v-html="svgData" />
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup name="BpmnDesign">
-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 './assets/style/index.scss';
-import type { Canvas, Modeler } from 'bpmn';
-import PropertyPanel from './panel/index.vue';
-import BpmnModeler from 'bpmn-js/lib/Modeler.js';
-import defaultXML from './assets/defaultXML';
-import flowableModdle from './assets/moddle/flowable';
-import Modules from './assets/module/index';
-import useModelerStore from '@/store/modules/modeler';
-import useDialog from '@/hooks/useDialog';
-
-const emit = defineEmits(['closeCallBack', 'saveCallBack']);
-
-const { visible, title, openDialog, closeDialog } = useDialog({
-  title: '编辑流程'
-});
-const modelerStore = useModelerStore();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const panelFlag = ref(false);
-const showPanel = ref(true);
-const canvas = ref<HTMLDivElement>();
-const panel = ref<HTMLDivElement>();
-const bpmnModeler = ref<Modeler>();
-const zoom = ref(1);
-const perviewXMLShow = ref(false);
-const perviewSVGShow = ref(false);
-const xmlStr = ref('');
-const svgData = ref('');
-const loading = ref(false);
-
-const panelBarClick = () => {
-  // 延迟执行，否则会导致面板收起时，属性面板不显示
-  panelFlag.value = !panelFlag.value;
-  setTimeout(() => {
-    showPanel.value = !panelFlag.value;
-  }, 100);
-};
-
-/**
- * 初始化Canvas
- */
-const initCanvas = () => {
-  bpmnModeler.value = new BpmnModeler({
-    container: canvas.value,
-    // 键盘
-    keyboard: {
-      bindTo: window // 或者window，注意与外部表单的键盘监听事件是否冲突
-    },
-    propertiesPanel: {
-      parent: panel.value
-    },
-    additionalModules: Modules,
-    moddleExtensions: {
-      flowable: flowableModdle
-    }
-  });
-};
-
-/**
- * 初始化Model
- */
-const initModel = () => {
-  if (modelerStore.getModeler()) {
-    modelerStore.getModeler().destroy();
-    modelerStore.setModeler(undefined);
-  }
-  modelerStore.setModeler(bpmnModeler.value);
-};
-
-/**
- * 新建
- */
-const newDiagram = async () => {
-  await proxy?.$modal.confirm('是否确认新建');
-  initDiagram();
-};
-
-/**
- * 初始化
- */
-const initDiagram = (xml?: string) => {
-  if (!xml) xml = defaultXML;
-  bpmnModeler.value.importXML(xml);
-};
-
-/**
- * 自适应屏幕
- */
-const fitViewport = () => {
-  zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport');
-  const bbox = document.querySelector<SVGGElement>('.app-containers-bpmn .viewport').getBBox();
-  const currentViewBox = bpmnModeler.value.get<Canvas>('canvas').viewbox();
-  const elementMid = {
-    x: bbox.x + bbox.width / 2 - 65,
-    y: bbox.y + bbox.height / 2
-  };
-  bpmnModeler.value.get<Canvas>('canvas').viewbox({
-    x: elementMid.x - currentViewBox.width / 2,
-    y: elementMid.y - currentViewBox.height / 2,
-    width: currentViewBox.width,
-    height: currentViewBox.height
-  });
-  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
-};
-/**
- * 放大或者缩小
- * @param zoomIn true 放大 | false 缩小
- */
-const zoomViewport = (zoomIn = true) => {
-  zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom();
-  zoom.value += zoomIn ? 0.1 : -0.1;
-  bpmnModeler.value.get<Canvas>('canvas').zoom(zoom.value);
-};
-
-/**
- * 下载XML
- */
-const downloadXML = async () => {
-  try {
-    const { xml } = await bpmnModeler.value.saveXML({ format: true });
-    downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml');
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-/**
- * 下载SVG
- */
-const downloadSVG = async () => {
-  try {
-    const { svg } = await bpmnModeler.value.saveSVG();
-    downloadFile(getProcessElement().name, svg, 'image/svg+xml');
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-/**
- * XML预览
- */
-const previewXML = async () => {
-  try {
-    const { xml } = await bpmnModeler.value.saveXML({ format: true });
-    xmlStr.value = xml;
-    perviewXMLShow.value = true;
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-/**
- * SVG预览
- */
-const previewSVG = async () => {
-  try {
-    const { svg } = await bpmnModeler.value.saveSVG();
-    svgData.value = svg;
-    perviewSVGShow.value = true;
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-const curNodeInfo = reactive({
-  curType: '', // 任务类型 用户任务
-  curNode: '',
-  expValue: '' //多用户和部门角色实现
-});
-
-const downloadFile = (fileName: string, data: any, type: string) => {
-  const a = document.createElement('a');
-  const url = window.URL.createObjectURL(new Blob([data], { type: type }));
-  a.href = url;
-  a.download = fileName;
-  a.click();
-  window.URL.revokeObjectURL(url);
-};
-
-const getProcessElement = () => {
-  const rootElements = bpmnModeler.value?.getDefinitions().rootElements;
-  for (let i = 0; i < rootElements.length; i++) {
-    if (rootElements[i].$type === 'bpmn:Process') return rootElements[i];
-  }
-};
-
-const getProcess = () => {
-  const element = getProcessElement();
-  return {
-    id: element.id,
-    name: element.name
-  };
-};
-
-const saveXml = async () => {
-  const { xml } = await bpmnModeler.value.saveXML({ format: true });
-  const { svg } = await bpmnModeler.value.saveSVG();
-  const process = getProcess();
-  let data = {
-    xml: xml,
-    svg: svg,
-    key: process.id,
-    name: process.name,
-    loading: loading
-  };
-  emit('saveCallBack', data);
-};
-
-const open = (xml?: string) => {
-  openDialog();
-  nextTick(() => {
-    initDiagram(xml);
-  });
-};
-const close = () => {
-  closeDialog();
-};
-
-onMounted(() => {
-  nextTick(() => {
-    initCanvas();
-    initModel();
-  });
-});
-
-/**
- * 对外暴露子组件方法
- */
-defineExpose({
-  initDiagram,
-  saveXml,
-  open,
-  close
-});
-</script>
-
-<style lang="scss">
-/** 夜间模式 线条的颜色 */
-$stroke-color-dark: white;
-$bpmn-font-size: 12px;
-/** 日间模式 字体颜色 */
-$bpmn-font-color-dark: white;
-/** 夜间模式 字体颜色 */
-$bpmn-font-color-light: #222;
-
-/* 背景网格 */
-@mixin djs-container {
-  background-image: linear-gradient(90deg, hsl(0deg 0% 78.4% / 15%) 10%, transparent 0), linear-gradient(hsl(0deg 0% 78.4% / 15%) 10%, transparent 0) !important;
-  background-size: 10px 10px !important;
-}
-
-html[class='light'] {
-  /** 从左侧拖动时的背景图 */
-  svg.new-parent {
-    @include djs-container;
-  }
-
-  /** 双击编辑元素时样式保持一致 */
-  div.djs-direct-editing-parent {
-    border-radius: 10px;
-    background-color: transparent !important;
-    color: $bpmn-font-color-light;
-  }
-
-  g.djs-visual {
-    .djs-label {
-      fill: $bpmn-font-color-light !important;
-      font-size: $bpmn-font-size !important;
-    }
-  }
-}
-
-html[class='dark'] {
-  /** dark模式下 连接线的箭头样式 */
-  .arrow-dark {
-    stroke-width: 1px;
-    stroke-linecap: round;
-    stroke: $stroke-color-dark;
-    fill: $stroke-color-dark;
-    stroke-linejoin: round;
-  }
-
-  /** 从左侧拖动时的背景图 */
-  svg.new-parent {
-    background-color: black !important;
-    @include djs-container;
-  }
-
-  /** 双击编辑元素时样式保持一致 */
-  div.djs-direct-editing-parent {
-    border-radius: 10px;
-    background-color: transparent !important;
-    color: $bpmn-font-color-dark;
-  }
-
-  /** 元素相关设置 */
-  g.djs-visual {
-    /** 元素边框 需要去除文字(.djs-label) */
-    & > *:first-child:not(.djs-label) {
-      stroke: $stroke-color-dark !important;
-    }
-
-    /** 字体颜色 */
-    .djs-label {
-      fill: $bpmn-font-color-dark !important;
-      font-size: $bpmn-font-size !important;
-    }
-
-    /* 连接线样式 */
-    path[data-corner-radius] {
-      stroke: $stroke-color-dark !important;
-      marker-end: url('#markerArrow-dark-mode') !important;
-    }
-  }
-}
-
-.containers-bpmn {
-  height: 100%;
-  .app-containers-bpmn {
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-      @include djs-container;
-    }
-    .el-header {
-      height: 35px;
-      padding: 0;
-    }
-
-    .process-panel {
-      transition: width 0.25s ease-in;
-      .process-panel-bar {
-        width: 34px;
-        height: 40px;
-        .open-bar {
-          width: 34px;
-          line-height: 40px;
-        }
-      }
-      // 收起面板样式
-      &.hide {
-        width: 34px;
-        overflow: hidden;
-        padding: 0;
-        .process-panel-bar {
-          width: 34px;
-          height: 100%;
-          box-sizing: border-box;
-          display: block;
-          text-align: left;
-          line-height: 34px;
-        }
-        .process-panel-bar:hover {
-          background-color: var(--bpmn-panel-bar-background-color);
-        }
-      }
-    }
-  }
-}
-pre {
-  margin: 0;
-  height: 100%;
-  max-height: calc(80vh - 32px);
-  overflow-x: hidden;
-  overflow-y: auto;
-  .hljs {
-    word-break: break-word;
-    white-space: pre-wrap;
-    padding: 0.5em;
-  }
-}
-
-.open-bar {
-  font-size: 20px;
-  cursor: pointer;
-  text-align: center;
-}
-.process-panel {
-  box-sizing: border-box;
-  padding: 0 8px 0 8px;
-  border-left: 1px solid var(--bpmn-panel-border);
-  box-shadow: var(--bpmn-panel-box-shadow) 0 0 8px;
-  max-height: 100%;
-  width: 25%;
-  height: calc(100vh - 100px);
-  .el-collapse {
-    height: calc(100vh - 182px);
-    overflow: auto;
-  }
-}
-
-// 任务栏 透明度
-//:deep(.djs-palette) {
-//  opacity: 0.3;
-//  transition: all 1s;
-//}
-//
-//:deep(.djs-palette:hover) {
-//  opacity: 1;
-//  transition: all 1s;
-//}
-</style>
diff --git a/src/bpmn/panel/GatewayPanel.vue b/src/bpmn/panel/GatewayPanel.vue
deleted file mode 100644
index 20cc134..0000000
--- a/src/bpmn/panel/GatewayPanel.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { GatewayPanel } from 'bpmnDesign';
-import ExecutionListener from './property/ExecutionListener.vue';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-const currentCollapseItem = ref(['1', '2']);
-const formData = ref(parseData<GatewayPanel>());
-
-const formRules = ref<ElFormRules>({
-  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/ParticipantPanel.vue b/src/bpmn/panel/ParticipantPanel.vue
deleted file mode 100644
index b1d42e6..0000000
--- a/src/bpmn/panel/ParticipantPanel.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"></el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"></el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import ExecutionListener from './property/ExecutionListener.vue';
-import type { ModdleElement } from 'bpmn';
-import type { ParticipantPanel } from 'bpmnDesign';
-
-interface PropType {
-  element: ModdleElement;
-}
-
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const formData = ref(parseData<ParticipantPanel>());
-const currentCollapseItem = ref(['1', '2']);
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/ProcessPanel.vue b/src/bpmn/panel/ProcessPanel.vue
deleted file mode 100644
index 9e118e2..0000000
--- a/src/bpmn/panel/ProcessPanel.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-            <el-form-item label="流程标识" prop="id">
-              <el-input v-model="formData.id" @change="idChange"></el-input>
-            </el-form-item>
-            <el-form-item label="流程名称" prop="name">
-              <el-input v-model="formData.name" @change="nameChange"></el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ExecutionListener from './property/ExecutionListener.vue';
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { ProcessPanel } from 'bpmnDesign';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-const { idChange, nameChange } = usePanel({
-  element: toRaw(props.element)
-});
-const currentCollapseItem = ref(['1', '2']);
-const formData = ref<ProcessPanel>(parseData<ProcessPanel>());
-
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style scoped lang="scss"></style>
diff --git a/src/bpmn/panel/SequenceFlowPanel.vue b/src/bpmn/panel/SequenceFlowPanel.vue
deleted file mode 100644
index eac8227..0000000
--- a/src/bpmn/panel/SequenceFlowPanel.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="conditionExpression" label="跳转条件">
-              <el-input v-model="formData.conditionExpressionValue" @change="conditionExpressionChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="skipExpression" label="跳过表达式">
-              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import useModelerStore from '@/store/modules/modeler';
-import usePanel from '../hooks/usePanel';
-import ExecutionListener from './property/ExecutionListener.vue';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { SequenceFlowPanel } from 'bpmnDesign';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange, updateProperties } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-const moddle = useModelerStore().getModdle();
-const currentCollapseItem = ref(['1', '2']);
-const formData = ref(parseData<SequenceFlowPanel>());
-
-const formRules = ref<ElFormRules>({
-  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const conditionExpressionChange = (val: string) => {
-  if (val) {
-    const newCondition = moddle.create('bpmn:FormalExpression', { body: val });
-    updateProperties({ conditionExpression: newCondition });
-  } else {
-    updateProperties({ conditionExpression: null });
-  }
-};
-
-const skipExpressionChange = (val: string) => {
-  updateProperties({ 'flowable:skipExpression': val });
-};
-
-onBeforeMount(() => {
-  if (formData.value.conditionExpression) {
-    formData.value.conditionExpressionValue = formData.value.conditionExpression.body;
-  }
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/StartEndPanel.vue b/src/bpmn/panel/StartEndPanel.vue
deleted file mode 100644
index bde1212..0000000
--- a/src/bpmn/panel/StartEndPanel.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import ExecutionListener from './property/ExecutionListener.vue';
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { StartEndPanel } from 'bpmnDesign';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const formData = ref(parseData<StartEndPanel>());
-const currentCollapseItem = ref(['1', '2']);
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/SubProcessPanel.vue b/src/bpmn/panel/SubProcessPanel.vue
deleted file mode 100644
index 3490fff..0000000
--- a/src/bpmn/panel/SubProcessPanel.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-  <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-      <el-collapse v-model="currentCollapseItem">
-        <el-collapse-item name="1">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-              常规
-            </div>
-          </template>
-          <div>
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-
-        <el-collapse-item name="2">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <BellFilled />
-              </el-icon>
-              执行监听器
-            </div>
-          </template>
-          <div>
-            <ExecutionListener :element="element"></ExecutionListener>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="3">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <HelpFilled />
-              </el-icon>
-              多实例
-            </div>
-          </template>
-          <div>
-            <el-form-item label="多实例类型">
-              <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
-                <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
-              </el-select>
-            </el-form-item>
-
-            <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
-              <el-form-item label="集合">
-                <template #label>
-                  <span>
-                    集合
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
-                        不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
-                        这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.collection" @change="collectionChange"></el-input>
-              </el-form-item>
-              <el-form-item label="元素变量">
-                <template #label>
-                  <span>
-                    元素变量
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
-                        创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
-                        一般来说，该字符串应与指定人员变量相同。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
-              </el-form-item>
-              <el-form-item label="完成条件">
-                <template #label>
-                  <span>
-                    完成条件
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
-                        结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
-                        活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
-                        表示当任务完成60%时，该节点就算完成
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
-              </el-form-item>
-            </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-    </el-form>
-  </div>
-</template>
-<script setup lang="ts">
-import ExecutionListener from './property/ExecutionListener.vue';
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { ModdleElement } from 'bpmn';
-import type { SubProcessPanel } from 'bpmnDesign';
-import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange, updateProperties, createModdleElement, constant } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const formData = ref(parseData<SubProcessPanel>());
-const currentCollapseItem = ref(['1', '2', '3']);
-
-const multiInstanceTypeChange = (newVal) => {
-  if (newVal !== MultiInstanceTypeEnum.NONE) {
-    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-    if (!loopCharacteristics) {
-      loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-    }
-    loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
-    updateProperties({ loopCharacteristics: loopCharacteristics });
-  } else {
-    updateProperties({ loopCharacteristics: undefined });
-  }
-};
-const collectionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const elementVariableChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const completionConditionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  if (newVal && newVal.length > 0) {
-    if (!loopCharacteristics.completionCondition) {
-      loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
-    } else {
-      loopCharacteristics.completionCondition.body = newVal;
-    }
-  } else {
-    loopCharacteristics.completionCondition = undefined;
-  }
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-
-onBeforeMount(() => {
-  if (formData.value.loopCharacteristics) {
-    const loopCharacteristics = formData.value.loopCharacteristics;
-    formData.value.collection = loopCharacteristics.collection || '';
-    formData.value.elementVariable = loopCharacteristics.elementVariable || '';
-    formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
-    formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
-  }
-});
-
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/TaskPanel.vue b/src/bpmn/panel/TaskPanel.vue
deleted file mode 100644
index a42de8a..0000000
--- a/src/bpmn/panel/TaskPanel.vue
+++ /dev/null
@@ -1,491 +0,0 @@
-<template>
-  <div>
-    <el-form ref="formRef" size="default" :model="formData" :rules="formRules" label-width="100px">
-      <el-collapse v-model="currentCollapseItem">
-        <el-collapse-item name="1">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-              常规
-            </div>
-          </template>
-          <div>
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-            <el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
-              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
-            </el-form-item>
-            <el-form-item v-loading="formManageListLoading" prop="formKey" label="表单地址">
-              <el-select v-model="formData.formKey" clearable filterable placeholder="请选择表单" style="width: 260px" @change="formKeyChange">
-                <el-option
-                  v-for="item in formManageList"
-                  :key="item.id"
-                  :label="item.formTypeName + ':' + item.formName"
-                  :value="item.formType + ':' + item.id"
-                />
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="2">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <Checked />
-              </el-icon>
-              任务
-            </div>
-          </template>
-          <div>
-            <el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
-              <el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
-            </el-form-item>
-
-            <el-tabs tab-position="left" class="demo-tabs">
-              <el-tab-pane label="身份存储">
-                <el-form-item label="分配人员">
-                  <el-input v-model="formData.assignee" @blur="blurAssignee(formData.assignee)">
-                    <template #append>
-                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="候选人员">
-                  <el-badge :value="selectUserLength" :max="99">
-                    <el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
-                  </el-badge>
-                </el-form-item>
-                <el-form-item label="候选组">
-                  <el-badge :value="selectRoleLength" :max="99">
-                    <el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
-                  </el-badge>
-                </el-form-item>
-              </el-tab-pane>
-
-              <!-- <el-tab-pane label="固定值">
-                <el-form-item prop="auditUserType" label="分配类型">
-                  <el-select v-model="formData.allocationType">
-                    <el-option v-for="item in AllocationTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员">
-                  <el-input v-model="formData.assignee">
-                    <template #append>
-                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <div v-if="formData.allocationType === AllocationTypeEnum.CANDIDATE">
-                  <el-form-item label="候选人员">
-                    <el-badge :value="selectUserLength" :max="99">
-                      <el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
-                    </el-badge>
-                  </el-form-item>
-                  <el-form-item label="候选组">
-                    <el-badge :value="selectRoleLength" :max="99">
-                      <el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
-                    </el-badge>
-                  </el-form-item>
-                </div>
-                <el-form-item v-if="formData.allocationType === AllocationTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
-                  <el-radio-group v-model="formData.specifyDesc" class="ml-4">
-                    <el-radio v-for="item in SpecifyDesc" :key="item.id" :value="item.value" size="large">{{ item.label }}</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-tab-pane> -->
-            </el-tabs>
-
-            <el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
-              <el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click="openDueDate">
-                <template #append>
-                  <el-button icon="Search" type="primary" @click="openDueDate" />
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
-              <el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="3">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <HelpFilled />
-              </el-icon>
-              多实例
-            </div>
-          </template>
-          <div>
-            <el-form-item label="多实例类型">
-              <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
-                <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
-              </el-select>
-            </el-form-item>
-
-            <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
-              <el-form-item label="集合">
-                <template #label>
-                  <span>
-                    集合
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
-                        不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
-                        这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.collection" @change="collectionChange"></el-input>
-              </el-form-item>
-              <el-form-item label="元素变量">
-                <template #label>
-                  <span>
-                    元素变量
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
-                        创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
-                        一般来说，该字符串应与指定人员变量相同。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
-              </el-form-item>
-              <el-form-item label="完成条件">
-                <template #label>
-                  <span>
-                    完成条件
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
-                        结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
-                        活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
-                        表示当任务完成60%时，该节点就算完成
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
-              </el-form-item>
-            </div>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item v-if="showConfig.taskListener" name="4">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <BellFilled />
-              </el-icon>
-              任务监听器
-            </div>
-          </template>
-          <div>
-            <TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item v-if="showConfig.executionListener" name="5">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <BellFilled />
-              </el-icon>
-              执行监听器
-            </div>
-          </template>
-          <div>
-            <ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
-          </div>
-        </el-collapse-item>
-
-        <el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
-          <el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
-          <el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
-          <el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
-          <el-input v-model="formData.ruleVariablesInput"> </el-input>
-        </el-form-item>
-        <el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
-          <el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.class" prop="class" label="类">
-          <el-input v-model="formData.class"> </el-input>
-        </el-form-item>
-      </el-collapse>
-    </el-form>
-    <UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect>
-    <UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect>
-    <RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect>
-    <DueDate ref="dueDateRef" v-model="formData.dueDate" :data="formData.dueDate" @confirm-call-back="dueDateCallBack"></DueDate>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import UserSelect from '@/components/UserSelect';
-import RoleSelect from '@/components/RoleSelect';
-import ExecutionListener from './property/ExecutionListener.vue';
-import TaskListener from './property/TaskListener.vue';
-import DueDate from './property/DueDate.vue';
-import type { ModdleElement } from 'bpmn';
-import type { TaskPanel } from 'bpmnDesign';
-import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
-import { UserVO } from '@/api/system/user/types';
-import { RoleVO } from '@/api/system/role/types';
-import { selectListFormManage } from '@/api/workflow/formManage';
-import { FormManageVO } from '@/api/workflow/formManage/types';
-const formManageList = ref<FormManageVO[]>([]);
-const formManageListLoading = ref(false);
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { showConfig, nameChange, formKeyChange, idChange, updateProperties, getExtensionElements, createModdleElement, constant } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const initFormData = {
-  id: '',
-  name: '',
-  dueDate: '',
-  multiInstanceType: MultiInstanceTypeEnum.NONE,
-  allocationType: AllocationTypeEnum.USER,
-  specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
-};
-const formData = ref({ ...initFormData, ...parseData<TaskPanel>() });
-const assignee = ref<Partial<UserVO>>({
-  userName: ''
-});
-const currentCollapseItem = ref(['1', '2']);
-const userSelectRef = ref<InstanceType<typeof UserSelect>>();
-const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
-const roleSelectRef = ref<InstanceType<typeof RoleSelect>>();
-const dueDateRef = ref<InstanceType<typeof DueDate>>();
-
-const openUserSelect = () => {
-  userSelectRef.value.open();
-};
-const openSingleUserSelect = () => {
-  if (formData.value.assignee?.includes('$')) {
-    formData.value.assignee = '';
-  }
-  singleUserSelectRef.value.open();
-};
-const openRoleSelect = () => {
-  roleSelectRef.value.open();
-};
-const openDueDate = (e) => {
-  dueDateRef.value.openDialog();
-};
-const blurAssignee = (assignee) => {
-  updateProperties({ 'flowable:assignee': assignee ? assignee : undefined });
-};
-const singleUserSelectCallBack = (data: UserVO[]) => {
-  const user: UserVO = data.length !== 0 ? data[0] : undefined;
-  updateProperties({ 'flowable:assignee': user?.userId });
-  assignee.value = user ? user : { userName: '' };
-  formData.value.assignee = String(user?.userId);
-  let extensionElements = getExtensionElements();
-  extensionElements.values = extensionElements.get('values').filter((item) => item.$type !== 'flowable:extAssignee');
-  if (user) {
-    const extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
-    extensionElements.get('values').push(extAssigneeElement);
-    extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
-  }
-  if (extensionElements.values.length === 0) {
-    extensionElements = undefined;
-  }
-  updateProperties({ extensionElements: extensionElements });
-};
-const userSelectCallBack = (data: UserVO[]) => {
-  let extensionElements = getExtensionElements();
-  extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers');
-  if (data.length === 0) {
-    formData.value.candidateUsers = undefined;
-    updateProperties({ 'flowable:candidateUsers': undefined });
-  } else {
-    const userIds = data.map((item) => item.userId).join(',');
-    formData.value.candidateUsers = userIds;
-    updateProperties({ 'flowable:candidateUsers': userIds });
-    const extCandidateUsersElement = createModdleElement('flowable:extCandidateUsers', { body: '' }, extensionElements);
-    extensionElements.values.push(extCandidateUsersElement);
-    const users = data.map((item) => {
-      return {
-        userId: item.userId,
-        userName: item.userName
-      };
-    });
-    extCandidateUsersElement.body = JSON.stringify(users);
-  }
-  if (extensionElements.values.length === 0) {
-    extensionElements = undefined;
-  }
-  updateProperties({ extensionElements: extensionElements });
-};
-const roleSelectCallBack = (data: RoleVO[]) => {
-  if (data.length === 0) {
-    formData.value.candidateGroups = '';
-    updateProperties({ 'flowable:candidateGroups': undefined });
-  } else {
-    const roleIds = data.map((item) => item.roleId).join(',');
-    formData.value.candidateGroups = roleIds;
-    updateProperties({ 'flowable:candidateGroups': roleIds });
-  }
-};
-const dueDateCallBack = (data: string) => {
-  updateProperties({ 'flowable:dueDate': data });
-};
-
-const taskTabClick = (e) => {
-  formData.value.candidateGroups = '';
-  formData.value.candidateUsers = '';
-  formData.value.assignee = '';
-  // formData.value.fixedAssignee = '';
-  assignee.value = {};
-};
-
-const syncChange = (newVal) => {
-  updateProperties({ 'flowable:async': newVal });
-};
-const skipExpressionChange = (newVal) => {
-  updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined });
-};
-const priorityChange = (newVal) => {
-  updateProperties({ 'flowable:priority': newVal });
-};
-const fixedAssigneeChange = (newVal) => {
-  updateProperties({ 'flowable:assignee': newVal && newVal.length > 0 ? newVal : undefined });
-};
-const multiInstanceTypeChange = (newVal) => {
-  if (newVal !== MultiInstanceTypeEnum.NONE) {
-    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-    if (!loopCharacteristics) {
-      loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-    }
-    loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
-    updateProperties({ loopCharacteristics: loopCharacteristics });
-  } else {
-    updateProperties({ loopCharacteristics: undefined });
-  }
-};
-const collectionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const elementVariableChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const completionConditionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  if (newVal && newVal.length > 0) {
-    if (!loopCharacteristics.completionCondition) {
-      loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
-    } else {
-      loopCharacteristics.completionCondition.body = newVal;
-    }
-  } else {
-    loopCharacteristics.completionCondition = undefined;
-  }
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const dueDateChange = (newVal) => {
-  updateProperties({ 'flowable:dueDate': newVal && newVal.length > 0 ? newVal : undefined });
-};
-const selectUserLength = computed(() => {
-  if (formData.value.candidateUsers) {
-    return formData.value.candidateUsers.split(',').length;
-  } else {
-    return 0;
-  }
-});
-const selectRoleLength = computed(() => {
-  if (formData.value.candidateGroups) {
-    return formData.value.candidateGroups.split(',').length;
-  } else {
-    return 0;
-  }
-});
-
-onBeforeMount(() => {
-  const extensionElements = getExtensionElements(false);
-  if (extensionElements && extensionElements.get('values')) {
-    let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
-    if (extAssigneeElement) {
-      assignee.value = JSON.parse(extAssigneeElement.body);
-    }
-  }
-
-  if (formData.value.loopCharacteristics) {
-    const loopCharacteristics = formData.value.loopCharacteristics;
-    formData.value.collection = loopCharacteristics.collection || '';
-    formData.value.elementVariable = loopCharacteristics.elementVariable || '';
-    formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
-    formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
-  }
-
-  if (formData.value.assignee) {
-    formData.value.fixedAssignee = formData.value.assignee;
-  }
-});
-
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const AllocationTypeSelect = [
-  { id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: AllocationTypeEnum.USER },
-  { id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '候选人员', value: AllocationTypeEnum.CANDIDATE },
-  { id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: AllocationTypeEnum.YOURSELF },
-  { id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: AllocationTypeEnum.SPECIFY }
-];
-const SpecifyDesc = [
-  { id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' },
-  { id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
-];
-
-const listFormManage = async () => {
-  formManageListLoading.value = true;
-  const res = await selectListFormManage();
-  formManageList.value = res.data;
-  formManageListLoading.value = false;
-};
-onMounted(() => {
-  nextTick(() => {
-    listFormManage();
-  });
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/index.vue b/src/bpmn/panel/index.vue
deleted file mode 100644
index 445571a..0000000
--- a/src/bpmn/panel/index.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div ref="propertyPanel">
-    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
-    <component :is="component" v-if="element" :element="element" />
-  </div>
-</template>
-<script setup lang="ts" name="PropertyPanel">
-import { NodeName } from '../assets/lang/zh';
-import TaskPanel from './TaskPanel.vue';
-import ProcessPanel from './ProcessPanel.vue';
-import StartEndPanel from './StartEndPanel.vue';
-import GatewayPanel from './GatewayPanel.vue';
-import SequenceFlowPanel from './SequenceFlowPanel.vue';
-import ParticipantPanel from './ParticipantPanel.vue';
-import SubProcessPanel from './SubProcessPanel.vue';
-import type { Modeler, ModdleElement } from 'bpmn';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-interface propsType {
-  modeler: Modeler;
-}
-const props = withDefaults(defineProps<propsType>(), {});
-
-const element = ref<ModdleElement>();
-const processElement = ref<ModdleElement>();
-
-const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
-const taskType = [
-  'bpmn:UserTask',
-  'bpmn:Task',
-  'bpmn:SendTask',
-  'bpmn:ReceiveTask',
-  'bpmn:ManualTask',
-  'bpmn:BusinessRuleTask',
-  'bpmn:ServiceTask',
-  'bpmn:ScriptTask'
-];
-const sequenceType = ['bpmn:SequenceFlow'];
-const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway', 'bpmn:ComplexGateway'];
-const processType = ['bpmn:Process'];
-
-// 组件计算
-const component = computed(() => {
-  if (!element.value) return null;
-  const type = element.value.type;
-  if (startEndType.includes(type)) return StartEndPanel;
-  if (taskType.includes(type)) return TaskPanel;
-  if (sequenceType.includes(type)) return SequenceFlowPanel;
-  if (gatewayType.includes(type)) return GatewayPanel;
-  if (processType.includes(type)) return ProcessPanel;
-  if (type === 'bpmn:Participant') return ParticipantPanel;
-  if (type === 'bpmn:SubProcess') return SubProcessPanel;
-  //return proxy?.$modal.msgWarning('面板开发中....');
-  return undefined;
-});
-
-const nodeName = computed(() => {
-  if (element.value) {
-    const bizObj = element.value.businessObject;
-    const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type;
-    return NodeName[type] || type;
-  }
-  return '';
-});
-
-const handleModeler = () => {
-  props.modeler.on('root.added', (e: any) => {
-    element.value = null;
-    if (e.element.type === 'bpmn:Process') {
-      nextTick(() => {
-        element.value = e.element;
-        processElement.value = e.element;
-      });
-    }
-  });
-  props.modeler.on('element.click', (e: any) => {
-    if (e.element.type === 'bpmn:Process') {
-      nextTick(() => {
-        element.value = e.element;
-        processElement.value = e.element;
-      });
-    }
-  });
-  props.modeler.on('selection.changed', (e: any) => {
-    // 先给null为了让vue刷新
-    element.value = null;
-    const newElement = e.newSelection[0];
-    if (newElement) {
-      nextTick(() => {
-        element.value = newElement;
-      });
-    } else {
-      nextTick(() => {
-        element.value = processElement.value;
-      });
-    }
-  });
-};
-
-onMounted(() => {
-  handleModeler();
-});
-</script>
-
-<style scoped lang="scss">
-.node-name {
-  font-size: 16px;
-  font-weight: bold;
-  padding: 10px;
-}
-</style>
diff --git a/src/bpmn/panel/property/DueDate.vue b/src/bpmn/panel/property/DueDate.vue
deleted file mode 100644
index 882766b..0000000
--- a/src/bpmn/panel/property/DueDate.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-  <div>
-    <el-dialog v-model="visible" :title="title" width="600px" append-to-body>
-      <el-form label-width="100px">
-        <el-form-item label="小时">
-          <el-radio-group v-model="hourValue" @change="hourChange">
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="8" value="8" />
-            <el-radio-button label="12" value="12" />
-            <el-radio-button label="24" value="24" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="hourValue === '自定义'" v-model="customHourValue" :min="1" @change="customHourValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="天">
-          <el-radio-group v-model="dayValue" @change="dayChange">
-            <el-radio-button label="1" value="1" />
-            <el-radio-button label="2" value="2" />
-            <el-radio-button label="3" value="3" />
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="dayValue === '自定义'" v-model="customDayValue" :min="1" @change="customDayValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="周">
-          <el-radio-group v-model="weekValue" @change="weekChange">
-            <el-radio-button label="1" value="1" />
-            <el-radio-button label="2" value="2" />
-            <el-radio-button label="3" value="3" />
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="weekValue === '自定义'" v-model="customWeekValue" :min="1" @change="customWeekValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="月">
-          <el-radio-group v-model="monthValue" @change="monthChange">
-            <el-radio-button label="1" value="1" />
-            <el-radio-button label="2" value="2" />
-            <el-radio-button label="3" value="3" />
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="monthValue === '自定义'" v-model="customMonthValue" :min="1" @change="customMonthValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div>
-          <el-button @click="closeDialog">取消</el-button>
-          <el-button type="primary" @click="confirm">确定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import useDialog from '@/hooks/useDialog';
-
-interface PropType {
-  modelValue?: string;
-  data?: string;
-}
-const prop = withDefaults(defineProps<PropType>(), {
-  modelValue: '',
-  data: ''
-});
-const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
-
-const { title, visible, openDialog, closeDialog } = useDialog({
-  title: '设置任务到期时间'
-});
-const formValue = ref();
-const valueType = ref();
-
-const hourValue = ref('');
-const dayValue = ref('');
-const weekValue = ref('');
-const monthValue = ref('');
-
-const customHourValue = ref(1);
-const customDayValue = ref(1);
-const customWeekValue = ref(1);
-const customMonthValue = ref(1);
-
-const hourValueConst = ['4', '8', '12', '24'];
-const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4'];
-
-const initValue = () => {
-  formValue.value = prop.data;
-  if (prop.data) {
-    const lastStr = prop.data.substring(prop.data.length - 1);
-    if (lastStr === 'H') {
-      const hourValueValue = prop.data.substring(2, prop.data.length - 1);
-      if (hourValueConst.includes(hourValueValue)) {
-        hourValue.value = hourValueValue;
-      } else {
-        hourValue.value = '自定义';
-        customHourValue.value = Number(hourValueValue);
-      }
-    }
-    const dayAndWeekAndMonthValue = prop.data.substring(1, prop.data.length - 1);
-    if (lastStr === 'D') {
-      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
-        dayValue.value = dayAndWeekAndMonthValue;
-      } else {
-        dayValue.value = '自定义';
-        customDayValue.value = Number(dayAndWeekAndMonthValue);
-      }
-    }
-    if (lastStr === 'W') {
-      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
-        weekValue.value = dayAndWeekAndMonthValue;
-      } else {
-        weekValue.value = '自定义';
-        customWeekValue.value = Number(dayAndWeekAndMonthValue);
-      }
-    }
-    if (lastStr === 'M') {
-      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
-        monthValue.value = dayAndWeekAndMonthValue;
-      } else {
-        monthValue.value = '自定义';
-        customMonthValue.value = Number(dayAndWeekAndMonthValue);
-      }
-    }
-  }
-};
-
-const confirm = () => {
-  emit('update:modelValue', formValue.value);
-  emit('confirmCallBack', formValue.value);
-  closeDialog();
-};
-
-const customHourValueChange = (customHourValue) => {
-  formValue.value = `PT${customHourValue}H`;
-
-  dayValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-const customDayValueChange = (customDayValue) => {
-  formValue.value = `P${customDayValue}D`;
-  hourValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-
-const customWeekValueChange = (customWeekValue) => {
-  formValue.value = `P${customWeekValue}W`;
-  hourValue.value = '';
-  dayValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customMonthValue.value = 1;
-};
-
-const customMonthValueChange = (customMonthValue) => {
-  formValue.value = `P${customMonthValue}M`;
-  hourValue.value = '';
-  dayValue.value = '';
-  weekValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-};
-
-const hourChange = (hourValue) => {
-  if (hourValue === '自定义') {
-    formValue.value = `PT${customHourValue.value}H`;
-  } else {
-    formValue.value = `PT${hourValue}H`;
-  }
-
-  dayValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-const dayChange = (dayValue) => {
-  if (dayValue === '自定义') {
-    formValue.value = `P${customDayValue.value}D`;
-  } else {
-    formValue.value = `P${dayValue}D`;
-  }
-
-  hourValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-const weekChange = (weekValue) => {
-  if (weekValue === '自定义') {
-    formValue.value = `P${customWeekValue.value}W`;
-  } else {
-    formValue.value = `P${weekValue}W`;
-  }
-
-  hourValue.value = '';
-  dayValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customMonthValue.value = 1;
-};
-const monthChange = (monthValue) => {
-  if (monthValue === '自定义') {
-    formValue.value = `P${customMonthValue.value}M`;
-  } else {
-    formValue.value = `P${monthValue}M`;
-  }
-
-  hourValue.value = '';
-  dayValue.value = '';
-  weekValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-};
-
-watch(
-  () => visible.value,
-  () => {
-    if (visible.value) {
-      initValue();
-    }
-  }
-);
-
-defineExpose({
-  openDialog,
-  closeDialog
-});
-</script>
diff --git a/src/bpmn/panel/property/ExecutionListener.vue b/src/bpmn/panel/property/ExecutionListener.vue
deleted file mode 100644
index 3c584cb..0000000
--- a/src/bpmn/panel/property/ExecutionListener.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-  <div>
-    <vxe-toolbar>
-      <template #buttons>
-        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
-        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
-      </template>
-    </vxe-toolbar>
-    <vxe-table
-      ref="tableRef"
-      size="mini"
-      height="100px"
-      border
-      show-overflow
-      keep-source
-      :data="tableData"
-      :menu-config="menuConfig"
-      @cell-dblclick="cellDBLClickEvent"
-      @menu-click="contextMenuClickEvent"
-    >
-      <vxe-column type="checkbox" width="40"></vxe-column>
-      <vxe-column type="seq" width="40"></vxe-column>
-      <vxe-column field="event" title="事件" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="type" title="类型" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
-    </vxe-table>
-
-    <el-dialog
-      v-model="formDialog.visible.value"
-      :title="formDialog.title.value"
-      width="600px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-      append-to-body
-    >
-      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
-        <el-form-item label="事件" prop="event">
-          <el-select v-model="formData.event">
-            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <template #label>
-            <span>
-              类型
-              <el-tooltip placement="top">
-                <el-icon><QuestionFilled /></el-icon>
-                <template #content>
-                  类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口<br />
-                  表达式：示例 ${myObject.callMethod(task, task.eventName)}<br />
-                  委托表达式：示例 ${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
-                </template>
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.type">
-            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          :label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
-          prop="className"
-        >
-          <el-input v-model="formData.className" type="text"></el-input>
-        </el-form-item>
-      </el-form>
-      <el-tabs type="border-card">
-        <el-tab-pane label="参数">
-          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
-        </el-tab-pane>
-      </el-tabs>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="formDialog.closeDialog">取 消</el-button>
-          <el-button type="primary" @click="submitEvent">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import ListenerParam from './ListenerParam.vue';
-import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import type { ExecutionListenerVO } from 'bpmnDesign';
-import type { Moddle, Modeler, ModdleElement } from 'bpmn';
-
-import usePanel from '../../hooks/usePanel';
-import useDialog from '@/hooks/useDialog';
-import useModelerStore from '@/store/modules/modeler';
-
-const emit = defineEmits(['close']);
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const selectRow = ref<ExecutionListenerVO | null>();
-const formDialog = useDialog({
-  title: selectRow.value ? '编辑&保存' : '新增&保存'
-});
-
-const { showConfig, elementType, updateProperties } = usePanel({
-  element: toRaw(props.element)
-});
-const { getModdle } = useModelerStore();
-const moddle = getModdle();
-
-const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
-const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
-const formRef = ref<ElFormInstance>();
-
-const initData: ExecutionListenerVO = {
-  event: '',
-  type: '',
-  className: '',
-  params: []
-};
-const formData = ref<ExecutionListenerVO>({ ...initData });
-const tableData = ref<ExecutionListenerVO[]>([]);
-const tableRules = ref<ElFormRules>({
-  event: [{ required: true, message: '请选择', trigger: 'blur' }],
-  type: [{ required: true, message: '请选择', trigger: 'blur' }],
-  className: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const submitEvent = async () => {
-  const error = await listenerParamRef.value.validate();
-  await formRef.value.validate((validate) => {
-    if (validate && !error) {
-      const $table = tableRef.value;
-      if ($table) {
-        formData.value.params = listenerParamRef.value.getTableData();
-        if (selectRow.value) {
-          Object.assign(selectRow.value, formData.value);
-        } else {
-          $table.insertAt({ ...formData.value }, -1);
-        }
-        updateElement();
-        formDialog.closeDialog();
-      }
-    }
-  });
-};
-
-const removeSelectRowEvent = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const selectCount = $table.getCheckboxRecords().length;
-    if (selectCount === 0) {
-      proxy?.$modal.msgWarning('请选择行');
-    } else {
-      await $table.removeCheckboxRow();
-      updateElement();
-    }
-  }
-};
-const insertEvent = async () => {
-  Object.assign(formData.value, initData);
-  selectRow.value = null;
-  formDialog.openDialog();
-};
-
-const editEvent = (row: ExecutionListenerVO) => {
-  Object.assign(formData.value, row);
-  selectRow.value = row;
-  formDialog.openDialog();
-};
-
-const removeEvent = async (row: ExecutionListenerVO) => {
-  await proxy?.$modal.confirm('您确定要删除该数据?');
-  const $table = tableRef.value;
-  if ($table) {
-    await $table.remove(row);
-    updateElement();
-  }
-};
-const updateElement = () => {
-  const $table = tableRef.value;
-  const data = $table.getTableData().fullData;
-  if (data.length) {
-    let extensionElements = props.element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-      extensionElements = moddle.create('bpmn:ExtensionElements');
-    }
-    // 清除旧值
-    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
-    data.forEach((item) => {
-      const executionListener = moddle.create('flowable:ExecutionListener');
-      executionListener['event'] = item.event;
-      executionListener[item.type] = item.className;
-      if (item.params && item.params.length) {
-        item.params.forEach((field) => {
-          const fieldElement = moddle.create('flowable:Field');
-          fieldElement['name'] = field.name;
-          fieldElement[field.type] = field.value;
-          executionListener.get('fields').push(fieldElement);
-        });
-      }
-      extensionElements.get('values').push(executionListener);
-    });
-    updateProperties({ extensionElements: extensionElements });
-  } else {
-    const extensionElements = props.element.businessObject[`extensionElements`];
-    if (extensionElements) {
-      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
-    }
-  }
-};
-
-const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => {
-  editEvent(row);
-};
-
-const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({
-  body: {
-    options: [
-      [
-        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
-        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
-      ]
-    ]
-  },
-  visibleMethod({ options, column }) {
-    const isDisabled = !column;
-    options.forEach((list) => {
-      list.forEach((item) => {
-        item.disabled = isDisabled;
-      });
-    });
-    return true;
-  }
-});
-const contextMenuClickEvent: VxeTableEvents.MenuClick<ExecutionListenerVO> = ({ menu, row, column }) => {
-  const $table = tableRef.value;
-  if ($table) {
-    switch (menu.code) {
-      case 'edit':
-        editEvent(row);
-        break;
-      case 'remove':
-        removeEvent(row);
-        break;
-    }
-  }
-};
-
-const initTableData = () => {
-  tableData.value =
-    props.element.businessObject.extensionElements?.values
-      .filter((item) => item.$type === 'flowable:ExecutionListener')
-      .map((item) => {
-        let type;
-        if ('class' in item) type = 'class';
-        if ('expression' in item) type = 'expression';
-        if ('delegateExpression' in item) type = 'delegateExpression';
-        return {
-          event: item.event,
-          type: type,
-          className: item[type],
-          params:
-            item.fields?.map((field) => {
-              let fieldType;
-              if ('stringValue' in field) fieldType = 'stringValue';
-              if ('expression' in field) fieldType = 'expression';
-              return {
-                name: field.name,
-                type: fieldType,
-                value: field[fieldType]
-              };
-            }) ?? []
-        };
-      }) ?? [];
-};
-
-onMounted(() => {
-  initTableData();
-});
-
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
-  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
-];
-const eventSelect = [
-  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '开始', value: 'start' },
-  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '结束', value: 'end' },
-  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '启用', value: 'take' }
-];
-</script>
-
-<style scoped lang="scss">
-.el-badge {
-  :deep(.el-badge__content) {
-    top: 10px;
-  }
-}
-</style>
diff --git a/src/bpmn/panel/property/ListenerParam.vue b/src/bpmn/panel/property/ListenerParam.vue
deleted file mode 100644
index 21c6de1..0000000
--- a/src/bpmn/panel/property/ListenerParam.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <vxe-toolbar>
-    <template #buttons>
-      <el-button icon="Plus" @click="insertRow">新增</el-button>
-    </template>
-  </vxe-toolbar>
-  <vxe-table
-    ref="tableRef"
-    :height="height"
-    border
-    show-overflow
-    keep-source
-    :data="tableData"
-    :edit-rules="tableRules"
-    :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
-  >
-    <vxe-column type="seq" width="40"></vxe-column>
-    <vxe-column field="type" title="类型" :edit-render="{}">
-      <template #default="slotParams">
-        <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-      </template>
-      <template #edit="slotParams">
-        <vxe-select v-model="slotParams.row.type">
-          <vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
-        </vxe-select>
-      </template>
-    </vxe-column>
-    <vxe-column field="name" title="名称" :edit-render="{}">
-      <template #edit="slotParams">
-        <vxe-input v-model="slotParams.row.name" type="text"></vxe-input>
-      </template>
-    </vxe-column>
-    <vxe-column field="value" title="值" :edit-render="{}">
-      <template #edit="slotParams">
-        <vxe-input v-model="slotParams.row.value" type="text"></vxe-input>
-      </template>
-    </vxe-column>
-    <vxe-column title="操作" width="100" show-overflow align="center">
-      <template #default="slotParams">
-        <el-tooltip content="删除" placement="top">
-          <el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
-        </el-tooltip>
-      </template>
-    </vxe-column>
-  </vxe-table>
-</template>
-
-<script setup lang="ts">
-import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import type { ParamVO } from 'bpmnDesign';
-import useDialog from '@/hooks/useDialog';
-
-interface PropType {
-  height?: string;
-  tableData?: ParamVO[];
-}
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const props = withDefaults(defineProps<PropType>(), {
-  height: '200px',
-  tableData: () => []
-});
-
-const tableRules = ref<VxeTablePropTypes.EditRules>({
-  type: [{ required: true, message: '请选择', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }],
-  value: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const { title, visible, openDialog, closeDialog } = useDialog({
-  title: '监听器参数'
-});
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '字符串', value: 'stringValue' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }
-];
-
-const tableRef = ref<VxeTableInstance<ParamVO>>();
-
-const getTableData = () => {
-  const $table = tableRef.value;
-  if ($table) {
-    return $table.getTableData().fullData;
-  }
-  return [];
-};
-
-const insertRow = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const { row: newRow } = await $table.insertAt({}, -1);
-    // 插入一条数据并触发校验
-    await $table.validate(newRow);
-  }
-};
-
-const removeRow = async (row: ParamVO) => {
-  await proxy?.$modal.confirm('您确定要删除该数据?');
-  const $table = tableRef.value;
-  if ($table) {
-    await $table.remove(row);
-  }
-};
-
-const validate = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    return await $table.validate(true);
-  }
-};
-
-defineExpose({
-  closeDialog,
-  openDialog,
-  validate,
-  getTableData
-});
-</script>
-
-<style scoped lang="scss"></style>
diff --git a/src/bpmn/panel/property/TaskListener.vue b/src/bpmn/panel/property/TaskListener.vue
deleted file mode 100644
index 9a32c47..0000000
--- a/src/bpmn/panel/property/TaskListener.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<template>
-  <div>
-    <vxe-toolbar>
-      <template #buttons>
-        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
-        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
-      </template>
-    </vxe-toolbar>
-    <vxe-table
-      ref="tableRef"
-      size="mini"
-      height="100px"
-      border
-      show-overflow
-      keep-source
-      :data="tableData"
-      :menu-config="menuConfig"
-      @cell-dblclick="cellDBLClickEvent"
-      @menu-click="contextMenuClickEvent"
-    >
-      <vxe-column type="checkbox" width="40"></vxe-column>
-      <vxe-column type="seq" width="40"></vxe-column>
-      <vxe-column field="event" title="事件" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="type" title="类型" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
-    </vxe-table>
-
-    <el-dialog
-      v-model="formDialog.visible.value"
-      :title="formDialog.title.value"
-      width="600px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-      append-to-body
-    >
-      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
-        <el-form-item label="事件" prop="event">
-          <template #label>
-            <span>
-              事件
-              <el-tooltip placement="top">
-                <el-icon><QuestionFilled /></el-icon>
-                <template #content>
-                  create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
-                  assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
-                  complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
-                  delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
-                </template>
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.event">
-            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="formData.type">
-            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          :label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
-          prop="className"
-        >
-          <el-input v-model="formData.className" type="text"></el-input>
-        </el-form-item>
-      </el-form>
-      <el-tabs type="border-card">
-        <el-tab-pane label="参数">
-          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
-        </el-tab-pane>
-      </el-tabs>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="formDialog.closeDialog">取 消</el-button>
-          <el-button type="primary" @click="submitEvent">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import ListenerParam from './ListenerParam.vue';
-import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import type { TaskListenerVO } from 'bpmnDesign';
-import type { ModdleElement } from 'bpmn';
-
-import usePanel from '../../hooks/usePanel';
-import useDialog from '@/hooks/useDialog';
-import useModelerStore from '@/store/modules/modeler';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-
-const selectRow = ref<TaskListenerVO | null>();
-const formDialog = useDialog({
-  title: selectRow.value ? '编辑&保存' : '新增&保存'
-});
-const { showConfig, elementType, updateProperties } = usePanel({
-  element: toRaw(props.element)
-});
-const { getModdle } = useModelerStore();
-const moddle = getModdle();
-
-const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
-const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
-const formRef = ref<ElFormInstance>();
-
-const initData: TaskListenerVO = {
-  event: '',
-  type: '',
-  className: '',
-  name: '',
-  params: []
-};
-const formData = ref<TaskListenerVO>({ ...initData });
-const currentIndex = ref(0);
-const tableData = ref<TaskListenerVO[]>([]);
-const tableRules = ref<VxeTablePropTypes.EditRules>({
-  event: [{ required: true, message: '请选择', trigger: 'blur' }],
-  type: [{ required: true, message: '请选择', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }],
-  className: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const submitEvent = async () => {
-  const error = await listenerParamRef.value.validate();
-  await formRef.value.validate((validate) => {
-    if (validate && !error) {
-      const $table = tableRef.value;
-      if ($table) {
-        formData.value.params = listenerParamRef.value.getTableData();
-        if (selectRow.value) {
-          Object.assign(selectRow.value, formData.value);
-        } else {
-          $table.insertAt({ ...formData.value }, -1);
-        }
-        updateElement();
-        formDialog.closeDialog();
-      }
-    }
-  });
-};
-
-const insertEvent = async () => {
-  Object.assign(formData.value, initData);
-  selectRow.value = null;
-  formDialog.openDialog();
-};
-
-const editEvent = (row: TaskListenerVO) => {
-  Object.assign(formData.value, row);
-  selectRow.value = row;
-  formDialog.openDialog();
-};
-const removeEvent = async (row: TaskListenerVO) => {
-  await proxy?.$modal.confirm('您确定要删除该数据?');
-  const $table = tableRef.value;
-  if ($table) {
-    await $table.remove(row);
-    updateElement();
-  }
-};
-
-const removeSelectRowEvent = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const selectCount = $table.getCheckboxRecords().length;
-    if (selectCount === 0) {
-      proxy?.$modal.msgWarning('请选择行');
-    } else {
-      await $table.removeCheckboxRow();
-      updateElement();
-    }
-  }
-};
-const updateElement = () => {
-  const $table = tableRef.value;
-  const data = $table.getTableData().fullData;
-  if (data.length) {
-    let extensionElements = props.element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-      extensionElements = moddle.create('bpmn:ExtensionElements');
-    }
-    // 清除旧值
-    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
-    data.forEach((item) => {
-      const taskListener = moddle.create('flowable:TaskListener');
-      taskListener['event'] = item.event;
-      taskListener[item.type] = item.className;
-      if (item.params && item.params.length) {
-        item.params.forEach((field) => {
-          const fieldElement = moddle.create('flowable:Field');
-          fieldElement['name'] = field.name;
-          fieldElement[field.type] = field.value;
-          taskListener.get('fields').push(fieldElement);
-        });
-      }
-      extensionElements.get('values').push(taskListener);
-    });
-    updateProperties({ extensionElements: extensionElements });
-  } else {
-    const extensionElements = props.element.businessObject[`extensionElements`];
-    if (extensionElements) {
-      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
-    }
-  }
-};
-
-const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
-  editEvent(row);
-};
-
-const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
-  body: {
-    options: [
-      [
-        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
-        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
-      ]
-    ]
-  },
-  visibleMethod({ options, column }) {
-    const isDisabled = !column;
-    options.forEach((list) => {
-      list.forEach((item) => {
-        item.disabled = isDisabled;
-      });
-    });
-    return true;
-  }
-});
-const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => {
-  const $table = tableRef.value;
-  if ($table) {
-    switch (menu.code) {
-      case 'edit':
-        editEvent(row);
-        break;
-      case 'remove':
-        removeEvent(row);
-        break;
-    }
-  }
-};
-const initTableData = () => {
-  tableData.value =
-    props.element.businessObject.extensionElements?.values
-      .filter((item) => item.$type === 'flowable:TaskListener')
-      .map((item) => {
-        let type;
-        if ('class' in item) type = 'class';
-        if ('expression' in item) type = 'expression';
-        if ('delegateExpression' in item) type = 'delegateExpression';
-        return {
-          event: item.event,
-          type: type,
-          className: item[type],
-          params:
-            item.fields?.map((field) => {
-              let fieldType;
-              if ('stringValue' in field) fieldType = 'stringValue';
-              if ('expression' in field) fieldType = 'expression';
-              return {
-                name: field.name,
-                type: fieldType,
-                value: field[fieldType]
-              };
-            }) ?? []
-        };
-      }) ?? [];
-};
-
-onMounted(() => {
-  initTableData();
-});
-
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
-  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
-];
-const eventSelect = [
-  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '创建', value: 'create' },
-  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '指派', value: 'assignment' },
-  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '完成', value: 'complete' },
-  { id: '68801972-85f1-482f-bd86-1fad015c26ed', label: '删除', value: 'delete' }
-];
-</script>
-
-<style scoped lang="scss">
-.el-badge {
-  :deep(.el-badge__content) {
-    top: 10px;
-  }
-}
-</style>
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
deleted file mode 100644
index 1f84516..0000000
--- a/src/components/BpmnDesign/index.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="design">
-    <el-dialog v-model="visible" width="100%" fullscreen :title="title">
-      <div class="modeler">
-        <bpmn-design ref="bpmnDesignRef" @save-call-back="saveCallBack"></bpmn-design>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup name="Design">
-import { getInfo, editModelXml } from '@/api/workflow/model';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-import { ModelForm } from '@/api/workflow/model/types';
-import BpmnDesign from '@/bpmn/index.vue';
-import useDialog from '@/hooks/useDialog';
-const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>();
-const modelForm = ref<ModelForm>();
-const emit = defineEmits(['closeCallBack']);
-const { visible, title } = useDialog({
-  title: '编辑流程'
-});
-const modelId = ref('');
-const open = async (id) => {
-  visible.value = true;
-  modelId.value = id;
-  const { data } = await getInfo(id);
-  modelForm.value = data;
-  bpmnDesignRef.value.initDiagram(modelForm.value.xml);
-};
-//保存模型
-const saveCallBack = async (data) => {
-  await proxy?.$modal.confirm('是否确认保存？');
-  data.loading.value = true;
-  modelForm.value.id = modelId.value;
-  modelForm.value.xml = data.xml;
-  modelForm.value.svg = data.svg;
-  modelForm.value.key = data.key;
-  modelForm.value.name = data.name;
-  editModelXml(modelForm.value).then((res) => {
-    if (res.code === 200) {
-      visible.value = false;
-      proxy?.$modal.msgSuccess('保存成功');
-      emit('closeCallBack', data);
-    }
-  });
-  data.loading.value = false;
-};
-
-/**
- * 对外暴露子组件方法
- */
-defineExpose({
-  open
-});
-</script>
-
-<style lang="scss" scoped>
-.design {
-  :deep(.el-dialog .el-dialog__body) {
-    max-height: 100% !important;
-    min-height: calc(100vh - 80px);
-    padding: 10px 0 10px 0 !important;
-  }
-  :deep(.el-dialog__header) {
-    padding: 0 0 5px 0 !important;
-  }
-}
-</style>
diff --git a/src/components/BpmnView/index.vue b/src/components/BpmnView/index.vue
deleted file mode 100644
index 845d41e..0000000
--- a/src/components/BpmnView/index.vue
+++ /dev/null
@@ -1,411 +0,0 @@
-<template>
-  <div v-loading="loading" class="bpmnDialogContainers">
-    <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
-      <div class="header-div">
-        <div>
-          <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-            <el-button size="small" icon="Rank" @click="fitViewport" />
-          </el-tooltip>
-          <el-tooltip effect="dark" content="放大" placement="bottom">
-            <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-          </el-tooltip>
-          <el-tooltip effect="dark" content="缩小" placement="bottom">
-            <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-          </el-tooltip>
-        </div>
-        <div>
-          <div class="tips-label">
-            <div class="un-complete">未完成</div>
-            <div class="in-progress">进行中</div>
-            <div class="complete">已完成</div>
-          </div>
-        </div>
-      </div>
-    </el-header>
-    <div class="flow-containers">
-      <el-container class="bpmn-el-container" style="align-items: stretch">
-        <el-main style="padding: 0">
-          <div ref="canvas" class="canvas" />
-        </el-main>
-      </el-container>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BpmnViewer from 'bpmn-js/lib/Viewer';
-import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
-import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
-import { ModuleDeclaration } from 'didi';
-import type { Canvas, ModdleElement } from 'bpmn';
-import EventBus from 'diagram-js/lib/core/EventBus';
-import Overlays from 'diagram-js/lib/features/overlays/Overlays';
-import processApi from '@/api/workflow/instance/index';
-
-const canvas = ref<HTMLElement>();
-const modeler = ref<BpmnViewer>();
-const taskList = ref([]);
-const zoom = ref(1);
-const xml = ref('');
-const loading = ref(false);
-const bpmnVisible = ref(true);
-const historyList = ref([]);
-
-const init = (businessKey) => {
-  loading.value = true;
-  bpmnVisible.value = true;
-  nextTick(async () => {
-    if (modeler.value) modeler.value.destroy();
-    modeler.value = new BpmnViewer({
-      container: canvas.value,
-      additionalModules: [
-        {
-          //禁止滚轮滚动
-          zoomScroll: ['value', '']
-        },
-        ZoomScrollModule,
-        MoveCanvasModule
-      ] as ModuleDeclaration[]
-    });
-    const resp = await processApi.getHistoryList(businessKey);
-    xml.value = resp.data.xml;
-    taskList.value = resp.data.taskList;
-    historyList.value = resp.data.historyList;
-    await createDiagram(xml.value);
-    loading.value = false;
-  });
-};
-
-const initXml = (xmlStr: string) => {
-  loading.value = true;
-  bpmnVisible.value = true;
-  nextTick(async () => {
-    if (modeler.value) modeler.value.destroy();
-    modeler.value = new BpmnViewer({
-      container: canvas.value,
-      additionalModules: [
-        {
-          //禁止滚轮滚动
-          zoomScroll: ['value', '']
-        },
-        ZoomScrollModule,
-        MoveCanvasModule
-      ] as ModuleDeclaration[]
-    });
-    xml.value = xmlStr;
-    await createDiagram(xml.value);
-    loading.value = false;
-  });
-};
-
-const createDiagram = async (data) => {
-  try {
-    await modeler.value.importXML(data);
-    fitViewport();
-    fillColor();
-    loading.value = false;
-    addEventBusListener();
-  } catch (err) {
-    console.log(err);
-  }
-};
-const addEventBusListener = () => {
-  const eventBus = modeler.value.get<EventBus>('eventBus');
-  const overlays = modeler.value.get<Overlays>('overlays');
-  eventBus.on<ModdleElement>('element.hover', (e) => {
-    let data = historyList.value.find((t) => t.taskDefinitionKey === e.element.id);
-    if (e.element.type === 'bpmn:UserTask' && data) {
-      setTimeout(() => {
-        genNodeDetailBox(e, overlays, data);
-      }, 10);
-    }
-  });
-  eventBus.on('element.out', (e) => {
-    overlays.clear();
-  });
-};
-const genNodeDetailBox = (e, overlays, data) => {
-  overlays.add(e.element.id, {
-    position: { top: e.element.height, left: 0 },
-    html: `<div class="verlays">
-                    <p>审批人员: ${data.nickName || ''}<p/>
-                    <p>节点状态：${data.status || ''}</p>
-                    <p>开始时间：${data.startTime || ''}</p>
-                    <p>结束时间：${data.endTime || ''}</p>
-                    <p>审批耗时：${data.runDuration || ''}</p>
-                    <p>流程版本：v${data.version || ''}</p>
-                   </div>`
-  });
-};
-// 让图能自适应屏幕
-const fitViewport = () => {
-  zoom.value = modeler.value.get<Canvas>('canvas').zoom('fit-viewport');
-  const bbox = document.querySelector<SVGGElement>('.flow-containers .viewport').getBBox();
-  const currentViewBox = modeler.value.get('canvas').viewbox();
-  const elementMid = {
-    x: bbox.x + bbox.width / 2 - 65,
-    y: bbox.y + bbox.height / 2
-  };
-  modeler.value.get<Canvas>('canvas').viewbox({
-    x: elementMid.x - currentViewBox.width / 2,
-    y: elementMid.y - currentViewBox.height / 2,
-    width: currentViewBox.width,
-    height: currentViewBox.height
-  });
-  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
-};
-// 放大缩小
-const zoomViewport = (zoomIn = true) => {
-  zoom.value = modeler.value.get<Canvas>('canvas').zoom();
-  zoom.value += zoomIn ? 0.1 : -0.1;
-  modeler.value.get<Canvas>('canvas').zoom(zoom.value);
-};
-//上色
-const fillColor = () => {
-  const canvas = modeler.value.get<Canvas>('canvas');
-  bpmnNodeList(modeler.value._definitions.rootElements[0].flowElements, canvas);
-};
-//递归上色
-const bpmnNodeList = (flowElements, canvas) => {
-  flowElements.forEach((n) => {
-    if (n.$type === 'bpmn:UserTask') {
-      const completeTask = taskList.value.find((m) => m.key === n.id);
-      if (completeTask) {
-        canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-        n.outgoing?.forEach((nn) => {
-          const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-          if (targetTask) {
-            canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-          } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
-            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            nn.targetRef.outgoing.forEach((e) => {
-              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
-            });
-          } else if (nn.targetRef.$type === 'bpmn:ParallelGateway') {
-            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            nn.targetRef.outgoing.forEach((e) => {
-              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
-            });
-          } else if (nn.targetRef.$type === 'bpmn:InclusiveGateway') {
-            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            nn.targetRef.outgoing.forEach((e) => {
-              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
-            });
-          }
-        });
-      }
-    } else if (n.$type === 'bpmn:ExclusiveGateway') {
-      n.outgoing.forEach((nn) => {
-        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-        if (targetTask) {
-          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-        }
-      });
-    } else if (n.$type === 'bpmn:ParallelGateway') {
-      n.outgoing.forEach((nn) => {
-        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-        if (targetTask) {
-          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-        }
-      });
-    } else if (n.$type === 'bpmn:InclusiveGateway') {
-      n.outgoing.forEach((nn) => {
-        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-        if (targetTask) {
-          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-        }
-      });
-    } else if (n.$type === 'bpmn:SubProcess') {
-      const completeTask = taskList.value.find((m) => m.key === n.id);
-      if (completeTask) {
-        canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-      }
-      bpmnNodeList(n.flowElements, canvas);
-    } else if (n.$type === 'bpmn:StartEvent') {
-      canvas.addMarker(n.id, 'startEvent');
-      if (n.outgoing) {
-        n.outgoing.forEach((nn) => {
-          const completeTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-          if (completeTask) {
-            canvas.addMarker(nn.id, 'highlight');
-            canvas.addMarker(n.id, 'highlight');
-          }
-        });
-      }
-    } else if (n.$type === 'bpmn:EndEvent') {
-      canvas.addMarker(n.id, 'endEvent');
-      const completeTask = taskList.value.find((m) => m.key === n.id);
-      if (completeTask) {
-        canvas.addMarker(completeTask.key, 'highlight');
-        canvas.addMarker(n.id, 'highlight');
-        return;
-      }
-    }
-  });
-};
-const gateway = (id, targetRefType, targetRefId, canvas, completed) => {
-  if (targetRefType === 'bpmn:ExclusiveGateway') {
-    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
-    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
-  }
-  if (targetRefType === 'bpmn:ParallelGateway') {
-    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
-    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
-  }
-  if (targetRefType === 'bpmn:InclusiveGateway') {
-    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
-    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
-  }
-};
-defineExpose({
-  init,
-  initXml
-});
-</script>
-
-<style lang="scss" scoped>
-.canvas {
-  width: 100%;
-  height: 100%;
-}
-
-.header-div {
-  display: flex;
-  padding: 10px 0;
-  justify-content: space-between;
-
-  .tips-label {
-    display: flex;
-    div {
-      margin-right: 10px;
-      padding: 5px;
-      font-size: 12px;
-    }
-    .un-complete {
-      border: 1px solid #000;
-    }
-    .in-progress {
-      background-color: rgb(255, 237, 204);
-      border: 1px dashed orange;
-    }
-    .complete {
-      background-color: rgb(204, 230, 204);
-      border: 1px solid green;
-    }
-  }
-}
-
-.view-mode {
-  .el-header,
-  .el-aside,
-  .djs-palette,
-  .bjs-powered-by {
-    display: none;
-  }
-  .el-loading-mask {
-    background-color: initial;
-  }
-  .el-loading-spinner {
-    display: none;
-  }
-}
-.bpmn-el-container {
-  height: calc(100vh - 350px);
-}
-.flow-containers {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  .canvas {
-    width: 100%;
-    height: 100%;
-  }
-  .load {
-    margin-right: 10px;
-  }
-  :deep(.el-form-item__label) {
-    font-size: 13px;
-  }
-
-  :deep(.djs-palette) {
-    left: 0 !important;
-    top: 0;
-    border-top: none;
-  }
-
-  :deep(.djs-container svg) {
-    min-height: 650px;
-  }
-
-  :deep(.startEvent.djs-shape .djs-visual > :nth-child(1)) {
-    fill: #77df6d !important;
-  }
-  :deep(.endEvent.djs-shape .djs-visual > :nth-child(1)) {
-    fill: #ee7b77 !important;
-  }
-  :deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
-    fill: green !important;
-    stroke: green !important;
-    fill-opacity: 0.2 !important;
-  }
-  :deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
-    fill: green !important;
-  }
-  :deep(.highlight.djs-shape .djs-visual > path) {
-    fill: green !important;
-    fill-opacity: 0.2 !important;
-    stroke: green !important;
-  }
-  :deep(.highlight.djs-connection > .djs-visual > path) {
-    stroke: green !important;
-  }
-
-  // 边框滚动动画
-  @keyframes path-animation {
-    from {
-      stroke-dashoffset: 100%;
-    }
-
-    to {
-      stroke-dashoffset: 0%;
-    }
-  }
-
-  :deep(.highlight-todo.djs-connection > .djs-visual > path) {
-    animation: path-animation 60s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    stroke-dasharray: 4px !important;
-    stroke: orange !important;
-    fill-opacity: 0.2 !important;
-    marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
-  }
-
-  :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
-    animation: path-animation 60s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    stroke-dasharray: 4px !important;
-    stroke: orange !important;
-    fill: orange !important;
-    fill-opacity: 0.2 !important;
-  }
-}
-:deep(.verlays) {
-  width: 250px;
-  background: rgb(102, 102, 102);
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  color: #fff;
-  padding: 15px 10px;
-  p {
-    line-height: 28px;
-    margin: 0;
-    padding: 0;
-  }
-  cursor: pointer;
-}
-</style>
diff --git a/src/enums/bpmn/IndexEnums.ts b/src/enums/bpmn/IndexEnums.ts
deleted file mode 100644
index 8c39823..0000000
--- a/src/enums/bpmn/IndexEnums.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export enum AllocationTypeEnum {
-  USER = 'user',
-  CANDIDATE = 'candidate',
-  YOURSELF = 'yourself',
-  SPECIFY = 'specify'
-}
-
-export enum SpecifyDescEnum {
-  SPECIFY_MULTIPLE = 'specifyMultiple',
-  SPECIFY_SINGLE = 'specifySingle'
-}
-
-export enum MultiInstanceTypeEnum {
-  SERIAL = 'serial',
-  PARALLEL = 'parallel',
-  NONE = 'none'
-}
diff --git a/src/types/bpmn/editor/global.d.ts b/src/types/bpmn/editor/global.d.ts
deleted file mode 100644
index 1b9a634..0000000
--- a/src/types/bpmn/editor/global.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MessageApiInjection } from 'naive-ui/lib/message/src/MessageProvider';
-
-declare global {
-  interface Window {
-    bpmnInstances: any;
-    __messageBox: MessageApiInjection;
-    URL: any;
-  }
-}
-
-declare interface Window {
-  bpmnInstances: any;
-}
diff --git a/src/types/bpmn/index.d.ts b/src/types/bpmn/index.d.ts
deleted file mode 100644
index f8e8d15..0000000
--- a/src/types/bpmn/index.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-declare module 'bpmn' {
-  import type modeler from 'bpmn-js/lib/Modeler';
-  import type modeling from 'bpmn-js/lib/features/modeling/Modeling';
-  import type canvas from 'diagram-js/lib/core/Canvas';
-  import type elementRegistry from 'diagram-js/lib/core/ElementRegistry';
-  import type bpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
-
-  export type Modeler = modeler;
-  export type Modeling = modeling;
-  export type Canvas = canvas;
-  export type ElementRegistry = elementRegistry;
-  export type Moddle = import('moddle').Moddle;
-  export type ModdleElement = import('moddle').ModdleElement;
-  export type BpmnFactory = bpmnFactory;
-}
diff --git a/src/types/bpmn/moddle.d.ts b/src/types/bpmn/moddle.d.ts
deleted file mode 100644
index 1ed7933..0000000
--- a/src/types/bpmn/moddle.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-declare module 'moddle' {
-  import type { Element as element } from 'bpmn-js/lib/model/Types';
-
-  export type Element = {
-    get<T>(name: string): T;
-
-    set(name: string, value: any): void;
-  } & element;
-
-  export interface ModdleElement extends Element {
-    $model: Moddle;
-    readonly $type: string;
-    $attrs: object | {};
-    $parent: any;
-    businessObject: ModdleElement;
-    type: string;
-
-    [field: string]: any;
-
-    hasType(element: ModdleElement, type?: string): boolean;
-  }
-
-  export interface Package {
-    name: string;
-    prefix: string;
-  }
-
-  export interface Moddle {
-    typeCache: Record<string, ModdleElement>;
-
-    getPackage: typeof Registry.prototype.getPackage;
-
-    getPackages: typeof Registry.prototype.getPackages;
-
-    create(type: string, attrs?: any): ModdleElement;
-  }
-}
diff --git a/src/types/bpmn/panel.d.ts b/src/types/bpmn/panel.d.ts
deleted file mode 100644
index 3179261..0000000
--- a/src/types/bpmn/panel.d.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-declare module 'bpmnDesign' {
-  import { AllocationTypeEnum, SpecifyDescEnum, MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
-
-  export interface ParamVO {
-    type: string;
-    name: string;
-    value: string;
-  }
-
-  export interface TaskListenerVO {
-    event: string;
-    type: string;
-    name: string;
-    className: string;
-    params: ParamVO[];
-  }
-
-  export interface ExecutionListenerVO {
-    event: string;
-    type: string;
-    className: string;
-    params: ParamVO[];
-  }
-
-  interface BasePanel {
-    id: string;
-    name: string;
-  }
-  export interface ProcessPanel extends BasePanel {}
-
-  export interface TaskPanel extends BasePanel {
-    allocationType: AllocationTypeEnum;
-    specifyDesc: SpecifyDescEnum;
-    multiInstanceType: MultiInstanceTypeEnum;
-    async?: boolean;
-    priority?: number;
-    formKey?: string;
-    skipExpression?: string;
-    isForCompensation?: boolean;
-    triggerServiceTask?: boolean;
-    autoStoreVariables?: boolean;
-    ruleVariablesInput?: string;
-    excludeTaskListener?: boolean;
-    exclude?: boolean;
-    class?: string;
-    dueDate?: string;
-    fixedAssignee?: string;
-
-    candidateUsers?: string;
-    assignee?: string;
-    candidateGroups?: string;
-    collection?: string;
-    elementVariable?: string;
-    completionCondition?: string;
-    isSequential?: boolean;
-
-    loopCharacteristics?: {
-      collection: string;
-      elementVariable: string;
-      isSequential: boolean;
-      completionCondition: {
-        body: string;
-      };
-    };
-  }
-
-  export interface StartEndPanel extends BasePanel {}
-  export interface GatewayPanel extends BasePanel {}
-  export interface SequenceFlowPanel extends BasePanel {
-    conditionExpression: {
-      body: string;
-    };
-    conditionExpressionValue: string;
-    skipExpression: string;
-  }
-
-  export interface ParticipantPanel extends BasePanel {}
-  export interface SubProcessPanel extends BasePanel {
-    multiInstanceType: MultiInstanceTypeEnum;
-    collection?: string;
-    elementVariable?: string;
-    completionCondition?: string;
-    loopCharacteristics?: {
-      collection: string;
-      elementVariable: string;
-      isSequential: boolean;
-      completionCondition: {
-        body: string;
-      };
-    };
-  }
-}