diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue
index 28af024e..9ec083ef 100644
--- a/src/components/BpmnDesign/PropertyPanel.vue
+++ b/src/components/BpmnDesign/PropertyPanel.vue
@@ -3,12 +3,12 @@
     <div v-if="nodeName">{{ nodeName }}</div>
     <el-divider />
     <component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
-    <!--    <TaskPanel :element="element" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys"></TaskPanel>-->
   </div>
 </template>
 <script setup lang="ts" name="PropertyPanel">
 import { NodeName } from './assets/lang/zh';
 import TaskPanel from './panel/TaskPanel.vue';
+import ProcessPanel from './panel/ProcessPanel.vue';
 interface propsType {
   users: Array<any>;
   groups: Array<any>;
@@ -53,7 +53,7 @@ const component = computed(() => {
   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 (processType.includes(type)) return ProcessPanel;
   return console.error('no ' + type + ' type panel');
 });
 
diff --git a/src/components/BpmnDesign/assets/moddle/flowable.ts b/src/components/BpmnDesign/assets/moddle/flowable.ts
index 4a071635..7dc22f67 100644
--- a/src/components/BpmnDesign/assets/moddle/flowable.ts
+++ b/src/components/BpmnDesign/assets/moddle/flowable.ts
@@ -1,1194 +1,1181 @@
 export default {
-  "name": "Flowable",
-  "uri": "http://flowable.org/bpmn",
-  "prefix": "flowable",
-  "xml": {
-    "tagAlias": "lowerCase"
+  'name': 'Flowable',
+  'uri': 'http://flowable.org/bpmn',
+  'prefix': 'flowable',
+  'xml': {
+    'tagAlias': 'lowerCase'
   },
-  "associations": [],
-  "types": [
+  'associations': [],
+  'types': [
     {
-      "name": "InOutBinding",
-      "superClass": ["Element"],
-      "isAbstract": true,
-      "properties": [
+      'name': 'InOutBinding',
+      'superClass': ['Element'],
+      'isAbstract': true,
+      'properties': [
         {
-          "name": "source",
-          "isAttr": true,
-          "type": "String"
+          'name': 'source',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "sourceExpression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'sourceExpression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "target",
-          "isAttr": true,
-          "type": "String"
+          'name': 'target',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "businessKey",
-          "isAttr": true,
-          "type": "String"
+          'name': 'businessKey',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "local",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": false
+          'name': 'local',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
         },
         {
-          "name": "variables",
-          "isAttr": true,
-          "type": "String"
+          'name': 'variables',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "In",
-      "superClass": ["InOutBinding"],
-      "meta": {
-        "allowedIn": ["bpmn:CallActivity"]
+      'name': 'In',
+      'superClass': ['InOutBinding'],
+      'meta': {
+        'allowedIn': ['bpmn:CallActivity']
       }
     },
     {
-      "name": "Out",
-      "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': 'AsyncCapable',
+      'isAbstract': true,
+      'extends': ['bpmn:Activity', 'bpmn:Gateway', 'bpmn:Event'],
+      'properties': [
         {
-          "name": "async",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": false
+          'name': 'async',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
         },
         {
-          "name": "asyncBefore",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": false
+          'name': 'asyncBefore',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
         },
         {
-          "name": "asyncAfter",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": false
+          'name': 'asyncAfter',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
         },
         {
-          "name": "exclusive",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": true
+          'name': 'exclusive',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': true
         }
       ]
     },
     {
-      "name": "flowable:in",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'flowable:in',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "source",
-          "type": "string",
-          "isAttr": true
+          'name': 'source',
+          'type': 'string',
+          'isAttr': true
         },
         {
-          "name": "target",
-          "type": "string",
-          "isAttr": true
+          'name': 'target',
+          'type': 'string',
+          'isAttr': true
         }
       ]
     },
     {
-      "name": "flowable:out",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'flowable:out',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "source",
-          "type": "string",
-          "isAttr": true
+          'name': 'source',
+          'type': 'string',
+          'isAttr': true
         },
         {
-          "name": "target",
-          "type": "string",
-          "isAttr": true
+          'name': 'target',
+          'type': 'string',
+          'isAttr': true
         }
       ]
     },
     {
-      "name": "BoundaryEvent",
-      "superClass": ["CatchEvent"],
-      "properties": [
+      'name': 'BoundaryEvent',
+      'superClass': ['CatchEvent'],
+      'properties': [
         {
-          "name": "cancelActivity",
-          "default": true,
-          "isAttr": true,
-          "type": "Boolean"
+          'name': 'cancelActivity',
+          'default': true,
+          'isAttr': true,
+          'type': 'Boolean'
         },
         {
-          "name": "attachedToRef",
-          "type": "Activity",
-          "isAttr": true,
-          "isReference": true
+          'name': 'attachedToRef',
+          'type': 'Activity',
+          'isAttr': true,
+          'isReference': true
         }
       ]
     },
     {
-      "name": "JobPriorized",
-      "isAbstract": true,
-      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
-      "properties": [
+      'name': 'JobPriorized',
+      'isAbstract': true,
+      'extends': ['bpmn:Process', 'flowable:AsyncCapable'],
+      'properties': [
         {
-          "name": "jobPriority",
-          "isAttr": true,
-          "type": "String"
+          'name': 'jobPriority',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "SignalEventDefinition",
-      "isAbstract": true,
-      "extends": ["bpmn:SignalEventDefinition"],
-      "properties": [
+      'name': 'SignalEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:SignalEventDefinition'],
+      'properties': [
         {
-          "name": "async",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": false
+          'name': 'async',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
         }
       ]
     },
     {
-      "name": "ErrorEventDefinition",
-      "isAbstract": true,
-      "extends": ["bpmn:ErrorEventDefinition"],
-      "properties": [
+      'name': 'ErrorEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:ErrorEventDefinition'],
+      'properties': [
         {
-          "name": "errorCodeVariable",
-          "isAttr": true,
-          "type": "String"
+          'name': 'errorCodeVariable',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "errorMessageVariable",
-          "isAttr": true,
-          "type": "String"
+          'name': 'errorMessageVariable',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Error",
-      "isAbstract": true,
-      "extends": ["bpmn:Error"],
-      "properties": [
+      'name': 'Error',
+      'isAbstract': true,
+      'extends': ['bpmn:Error'],
+      'properties': [
         {
-          "name": "flowable:errorMessage",
-          "isAttr": true,
-          "type": "String"
+          'name': 'flowable:errorMessage',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "PotentialStarter",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'PotentialStarter',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "resourceAssignmentExpression",
-          "type": "bpmn:ResourceAssignmentExpression"
+          'name': 'resourceAssignmentExpression',
+          'type': 'bpmn:ResourceAssignmentExpression'
         }
       ]
     },
     {
-      "name": "UserTask",
-      "isAbstract": true,
-      "extends": ["bpmn:UserTask"],
-      "properties": [
+      'name': 'UserTask',
+      'isAbstract': true,
+      'extends': ['bpmn:UserTask'],
+      'properties': [
         {
-          "name": "timerEventDefinition",
-          "type": "Expression"
+          'name': 'timerEventDefinition',
+          'type': 'Expression'
         },
         {
-          "name": "multiInstanceLoopCharacteristics",
-          "type": "MultiInstanceLoopCharacteristics"
+          'name': 'multiInstanceLoopCharacteristics',
+          'type': 'MultiInstanceLoopCharacteristics'
         }
       ]
     },
     {
-      "name": "StartEvent",
-      "isAbstract": true,
-      "extends": ["bpmn:StartEvent"],
-      "properties": [
+      'name': 'StartEvent',
+      'isAbstract': true,
+      'extends': ['bpmn:StartEvent'],
+      'properties': [
         {
-          "name": "timerEventDefinition",
-          "type": "Expression"
+          'name': 'timerEventDefinition',
+          'type': 'Expression'
         }
       ]
     },
     {
-      "name": "FormSupported",
-      "isAbstract": true,
-      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
-      "properties": [
+      'name': 'FormSupported',
+      'isAbstract': true,
+      'extends': ['bpmn:StartEvent', 'bpmn:UserTask'],
+      'properties': [
         {
-          "name": "formHandlerClass",
-          "isAttr": true,
-          "type": "String"
+          'name': 'formHandlerClass',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "formKey",
-          "isAttr": true,
-          "type": "String"
+          'name': 'formKey',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "TemplateSupported",
-      "isAbstract": true,
-      "extends": ["bpmn:Process", "bpmn:FlowElement"],
-      "properties": [
+      'name': 'TemplateSupported',
+      'isAbstract': true,
+      'extends': ['bpmn:Process', 'bpmn:FlowElement'],
+      'properties': [
         {
-          "name": "modelerTemplate",
-          "isAttr": true,
-          "type": "String"
+          'name': 'modelerTemplate',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Initiator",
-      "isAbstract": true,
-      "extends": ["bpmn:StartEvent"],
-      "properties": [
+      'name': 'Initiator',
+      'isAbstract': true,
+      'extends': ['bpmn:StartEvent'],
+      'properties': [
         {
-          "name": "initiator",
-          "isAttr": true,
-          "type": "String"
+          'name': 'initiator',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "ScriptTask",
-      "isAbstract": true,
-      "extends": ["bpmn:ScriptTask"],
-      "properties": [
+      'name': 'ScriptTask',
+      'isAbstract': true,
+      'extends': ['bpmn:ScriptTask'],
+      'properties': [
         {
-          "name": "resultVariable",
-          "isAttr": true,
-          "type": "String"
+          'name': 'resultVariable',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "resource",
-          "isAttr": true,
-          "type": "String"
+          'name': 'resource',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Process",
-      "isAbstract": true,
-      "extends": ["bpmn:Process"],
-      "properties": [
+      'name': 'Process',
+      'isAbstract': true,
+      'extends': ['bpmn:Process'],
+      'properties': [
         {
-          "name": "candidateStarterGroups",
-          "isAttr": true,
-          "type": "String"
+          'name': 'candidateStarterGroups',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "candidateStarterUsers",
-          "isAttr": true,
-          "type": "String"
+          'name': 'candidateStarterUsers',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "versionTag",
-          "isAttr": true,
-          "type": "String"
+          'name': 'versionTag',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "historyTimeToLive",
-          "isAttr": true,
-          "type": "String"
+          'name': 'historyTimeToLive',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "isStartableInTasklist",
-          "isAttr": true,
-          "type": "Boolean",
-          "default": true
+          'name': 'isStartableInTasklist',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': true
         }
       ]
     },
     {
-      "name": "EscalationEventDefinition",
-      "isAbstract": true,
-      "extends": ["bpmn:EscalationEventDefinition"],
-      "properties": [
+      'name': 'EscalationEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:EscalationEventDefinition'],
+      'properties': [
         {
-          "name": "escalationCodeVariable",
-          "isAttr": true,
-          "type": "String"
+          'name': 'escalationCodeVariable',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "FormalExpression",
-      "isAbstract": true,
-      "extends": ["bpmn:FormalExpression"],
-      "properties": [
+      'name': 'FormalExpression',
+      'isAbstract': true,
+      'extends': ['bpmn:FormalExpression'],
+      'properties': [
         {
-          "name": "resource",
-          "isAttr": true,
-          "type": "String"
+          'name': 'resource',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Assignable",
-      "extends": ["bpmn:UserTask"],
-      "properties": [
+      'name': 'Assignable',
+      'extends': ['bpmn:UserTask'],
+      'properties': [
         {
-          "name": "candidateGroups",
-          "isAttr": true,
-          "type": "String"
+          'name': 'candidateGroups',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "dueDate",
-          "isAttr": true,
-          "type": "String"
+          'name': 'dueDate',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "followUpDate",
-          "isAttr": true,
-          "type": "String"
+          'name': 'followUpDate',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "priority",
-          "isAttr": true,
-          "type": "String"
+          'name': 'priority',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "CallActivity",
-      "extends": ["bpmn:CallActivity"],
-      "properties": [
+      'name': 'CallActivity',
+      'extends': ['bpmn:CallActivity'],
+      'properties': [
         {
-          "name": "calledElementBinding",
-          "isAttr": true,
-          "type": "String",
-          "default": "latest"
+          'name': 'calledElementBinding',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'latest'
         },
         {
-          "name": "calledElementVersion",
-          "isAttr": true,
-          "type": "String"
+          'name': 'calledElementVersion',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "calledElementVersionTag",
-          "isAttr": true,
-          "type": "String"
+          'name': 'calledElementVersionTag',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "calledElementTenantId",
-          "isAttr": true,
-          "type": "String"
+          'name': 'calledElementTenantId',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "caseRef",
-          "isAttr": true,
-          "type": "String"
+          'name': 'caseRef',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "caseBinding",
-          "isAttr": true,
-          "type": "String",
-          "default": "latest"
+          'name': 'caseBinding',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'latest'
         },
         {
-          "name": "caseVersion",
-          "isAttr": true,
-          "type": "String"
+          'name': 'caseVersion',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "caseTenantId",
-          "isAttr": true,
-          "type": "String"
+          'name': 'caseTenantId',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "variableMappingClass",
-          "isAttr": true,
-          "type": "String"
+          'name': 'variableMappingClass',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "variableMappingDelegateExpression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'variableMappingDelegateExpression',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "ServiceTaskLike",
-      "extends": [
-        "bpmn:ServiceTask",
-        "bpmn:BusinessRuleTask",
-        "bpmn:SendTask",
-        "bpmn:MessageEventDefinition"
-      ],
-      "properties": [
+      'name': 'ServiceTaskLike',
+      'extends': ['bpmn:ServiceTask', 'bpmn:BusinessRuleTask', 'bpmn:SendTask', 'bpmn:MessageEventDefinition'],
+      'properties': [
         {
-          "name": "expression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "class",
-          "isAttr": true,
-          "type": "String"
+          'name': 'class',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "delegateExpression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'delegateExpression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "resultVariable",
-          "isAttr": true,
-          "type": "String"
+          'name': 'resultVariable',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "ExclusiveGateway",
-      "isAbstract": true,
-      "extends": ["bpmn:ExclusiveGateway"],
-      "properties": [
+      'name': 'ExclusiveGateway',
+      'isAbstract': true,
+      'extends': ['bpmn:ExclusiveGateway'],
+      'properties': [
         {
-          "name": "serviceClass",
-          "isAttr": true,
-          "type": "String"
+          'name': 'serviceClass',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "DmnCapable",
-      "extends": ["bpmn:BusinessRuleTask"],
-      "properties": [
+      'name': 'DmnCapable',
+      'extends': ['bpmn:BusinessRuleTask'],
+      'properties': [
         {
-          "name": "decisionRef",
-          "isAttr": true,
-          "type": "String"
+          'name': 'decisionRef',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "decisionRefBinding",
-          "isAttr": true,
-          "type": "String",
-          "default": "latest"
+          'name': 'decisionRefBinding',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'latest'
         },
         {
-          "name": "decisionRefVersion",
-          "isAttr": true,
-          "type": "String"
+          'name': 'decisionRefVersion',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "mapDecisionResult",
-          "isAttr": true,
-          "type": "String",
-          "default": "resultList"
+          'name': 'mapDecisionResult',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'resultList'
         },
         {
-          "name": "decisionRefTenantId",
-          "isAttr": true,
-          "type": "String"
+          'name': 'decisionRefTenantId',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "ExternalCapable",
-      "extends": ["flowable:ServiceTaskLike"],
-      "properties": [
+      'name': 'ExternalCapable',
+      'extends': ['flowable:ServiceTaskLike'],
+      'properties': [
         {
-          "name": "type",
-          "isAttr": true,
-          "type": "String"
+          'name': 'type',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "topic",
-          "isAttr": true,
-          "type": "String"
+          'name': 'topic',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "TaskPriorized",
-      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
-      "properties": [
+      'name': 'TaskPriorized',
+      'extends': ['bpmn:Process', 'flowable:ExternalCapable'],
+      'properties': [
         {
-          "name": "taskPriority",
-          "isAttr": true,
-          "type": "String"
+          'name': 'taskPriority',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Properties",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["*"]
+      'name': 'Properties',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['*']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "values",
-          "type": "Property",
-          "isMany": true
+          'name': 'values',
+          'type': 'Property',
+          'isMany': true
         }
       ]
     },
     {
-      "name": "Property",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'Property',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "id",
-          "type": "String",
-          "isAttr": true
+          'name': 'id',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "name",
-          "type": "String",
-          "isAttr": true
+          'name': 'name',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "value",
-          "type": "String",
-          "isAttr": true
+          'name': 'value',
+          'type': 'String',
+          'isAttr': true
         }
       ]
     },
     {
-      "name": "Connector",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["flowable:ServiceTaskLike"]
+      'name': 'Connector',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:ServiceTaskLike']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "inputOutput",
-          "type": "InputOutput"
+          'name': 'inputOutput',
+          'type': 'InputOutput'
         },
         {
-          "name": "connectorId",
-          "type": "String"
+          'name': 'connectorId',
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "InputOutput",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      'name': 'InputOutput',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:FlowNode', 'flowable:Connector']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "inputOutput",
-          "type": "InputOutput"
+          'name': 'inputOutput',
+          'type': 'InputOutput'
         },
         {
-          "name": "connectorId",
-          "type": "String"
+          'name': 'connectorId',
+          'type': 'String'
         },
         {
-          "name": "inputParameters",
-          "isMany": true,
-          "type": "InputParameter"
+          'name': 'inputParameters',
+          'isMany': true,
+          'type': 'InputParameter'
         },
         {
-          "name": "outputParameters",
-          "isMany": true,
-          "type": "OutputParameter"
+          'name': 'outputParameters',
+          'isMany': true,
+          'type': 'OutputParameter'
         }
       ]
     },
     {
-      "name": "InputOutputParameter",
-      "properties": [
+      'name': 'InputOutputParameter',
+      'properties': [
         {
-          "name": "name",
-          "isAttr": true,
-          "type": "String"
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "value",
-          "isBody": true,
-          "type": "String"
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
         },
         {
-          "name": "definition",
-          "type": "InputOutputParameterDefinition"
+          'name': 'definition',
+          'type': 'InputOutputParameterDefinition'
         }
       ]
     },
     {
-      "name": "InputOutputParameterDefinition",
-      "isAbstract": true
+      'name': 'InputOutputParameterDefinition',
+      'isAbstract': true
     },
     {
-      "name": "List",
-      "superClass": ["InputOutputParameterDefinition"],
-      "properties": [
+      'name': 'List',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
         {
-          "name": "items",
-          "isMany": true,
-          "type": "InputOutputParameterDefinition"
+          'name': 'items',
+          'isMany': true,
+          'type': 'InputOutputParameterDefinition'
         }
       ]
     },
     {
-      "name": "Map",
-      "superClass": ["InputOutputParameterDefinition"],
-      "properties": [
+      'name': 'Map',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
         {
-          "name": "entries",
-          "isMany": true,
-          "type": "Entry"
+          'name': 'entries',
+          'isMany': true,
+          'type': 'Entry'
         }
       ]
     },
     {
-      "name": "Entry",
-      "properties": [
+      'name': 'Entry',
+      'properties': [
         {
-          "name": "key",
-          "isAttr": true,
-          "type": "String"
+          'name': 'key',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "value",
-          "isBody": true,
-          "type": "String"
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
         },
         {
-          "name": "definition",
-          "type": "InputOutputParameterDefinition"
+          'name': 'definition',
+          'type': 'InputOutputParameterDefinition'
         }
       ]
     },
     {
-      "name": "Value",
-      "superClass": ["InputOutputParameterDefinition"],
-      "properties": [
+      'name': 'Value',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
         {
-          "name": "id",
-          "isAttr": true,
-          "type": "String"
+          'name': 'id',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "name",
-          "isAttr": true,
-          "type": "String"
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "value",
-          "isBody": true,
-          "type": "String"
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Script",
-      "superClass": ["InputOutputParameterDefinition"],
-      "properties": [
+      'name': 'Script',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
         {
-          "name": "scriptFormat",
-          "isAttr": true,
-          "type": "String"
+          'name': 'scriptFormat',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "resource",
-          "isAttr": true,
-          "type": "String"
+          'name': 'resource',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "value",
-          "isBody": true,
-          "type": "String"
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "Field",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": [
-          "flowable:ServiceTaskLike",
-          "flowable:ExecutionListener",
-          "flowable:TaskListener"
-        ]
+      'name': 'Field',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:ServiceTaskLike', 'flowable:ExecutionListener', 'flowable:TaskListener']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "name",
-          "isAttr": true,
-          "type": "String"
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "expression",
-          "isAttr": true,
-          "type": "expression"
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'expression'
         },
         {
-          "name": "string",
-          "type": "string"
+          'name': 'string',
+          'type': 'string'
         },
         {
-          "name": "stringValue",
-          "isAttr": true,
-          "type": "String"
+          'name': 'stringValue',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "string",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": [
-          "flowable:Field"
-        ]
+      'name': 'string',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:Field']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "body",
-          "isBody": true,
-          "type": "String"
+          'name': 'body',
+          'isBody': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "expression",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": [
-          "flowable:Field"
-        ]
+      'name': 'expression',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:Field']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "body",
-          "isBody": true,
-          "type": "String"
+          'name': 'body',
+          'isBody': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "InputParameter",
-      "superClass": ["InputOutputParameter"]
+      'name': 'InputParameter',
+      'superClass': ['InputOutputParameter']
     },
     {
-      "name": "OutputParameter",
-      "superClass": ["InputOutputParameter"]
+      'name': 'OutputParameter',
+      'superClass': ['InputOutputParameter']
     },
     {
-      "name": "Collectable",
-      "isAbstract": true,
-      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
-      "superClass": ["flowable:AsyncCapable"],
-      "properties": [
+      'name': 'Collectable',
+      'isAbstract': true,
+      'extends': ['bpmn:MultiInstanceLoopCharacteristics'],
+      'superClass': ['flowable:AsyncCapable'],
+      'properties': [
         {
-          "name": "collection",
-          "isAttr": true,
-          "type": "String"
+          'name': 'collection',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "elementVariable",
-          "isAttr": true,
-          "type": "String"
+          'name': 'elementVariable',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     },
     {
-      "name": "SequenceFlow",
-      "superClass": ["FlowElement"],
-      "properties": [
+      'name': 'SequenceFlow',
+      'superClass': ['FlowElement'],
+      'properties': [
         {
-          "name": "isImmediate",
-          "isAttr": true,
-          "type": "Boolean"
+          'name': 'isImmediate',
+          'isAttr': true,
+          'type': 'Boolean'
         },
         {
-          "name": "conditionExpression",
-          "type": "Expression"
+          'name': 'conditionExpression',
+          'type': 'Expression'
         },
         {
-          "name": "sourceRef",
-          "type": "FlowNode",
-          "isAttr": true,
-          "isReference": true
+          'name': 'sourceRef',
+          'type': 'FlowNode',
+          'isAttr': true,
+          'isReference': true
         },
         {
-          "name": "targetRef",
-          "type": "FlowNode",
-          "isAttr": true,
-          "isReference": true
+          'name': 'targetRef',
+          'type': 'FlowNode',
+          'isAttr': true,
+          'isReference': true
         }
       ]
     },
     {
-      "name": "MultiInstanceLoopCharacteristics",
-      "superClass": ["LoopCharacteristics"],
-      "properties": [
+      'name': 'MultiInstanceLoopCharacteristics',
+      'superClass': ['LoopCharacteristics'],
+      'properties': [
         {
-          "name": "isSequential",
-          "default": false,
-          "isAttr": true,
-          "type": "Boolean"
+          'name': 'isSequential',
+          'default': false,
+          'isAttr': true,
+          'type': 'Boolean'
         },
         {
-          "name": "behavior",
-          "type": "MultiInstanceBehavior",
-          "default": "All",
-          "isAttr": true
+          'name': 'behavior',
+          'type': 'MultiInstanceBehavior',
+          'default': 'All',
+          'isAttr': true
         },
         {
-          "name": "loopCardinality",
-          "type": "Expression",
-          "xml": {
-            "serialize": "xsi:type"
+          'name': 'loopCardinality',
+          'type': 'Expression',
+          'xml': {
+            'serialize': 'xsi:type'
           }
         },
         {
-          "name": "loopDataInputRef",
-          "type": "ItemAwareElement",
-          "isReference": true
+          'name': 'loopDataInputRef',
+          'type': 'ItemAwareElement',
+          'isReference': true
         },
         {
-          "name": "loopDataOutputRef",
-          "type": "ItemAwareElement",
-          "isReference": true
+          'name': 'loopDataOutputRef',
+          'type': 'ItemAwareElement',
+          'isReference': true
         },
         {
-          "name": "inputDataItem",
-          "type": "DataInput",
-          "xml": {
-            "serialize": "property"
+          'name': 'inputDataItem',
+          'type': 'DataInput',
+          'xml': {
+            'serialize': 'property'
           }
         },
         {
-          "name": "outputDataItem",
-          "type": "DataOutput",
-          "xml": {
-            "serialize": "property"
+          'name': 'outputDataItem',
+          'type': 'DataOutput',
+          'xml': {
+            'serialize': 'property'
           }
         },
         {
-          "name": "complexBehaviorDefinition",
-          "type": "ComplexBehaviorDefinition",
-          "isMany": true
+          'name': 'complexBehaviorDefinition',
+          'type': 'ComplexBehaviorDefinition',
+          'isMany': true
         },
         {
-          "name": "completionCondition",
-          "type": "Expression",
-          "xml": {
-            "serialize": "xsi:type"
+          'name': 'completionCondition',
+          'type': 'Expression',
+          'xml': {
+            'serialize': 'xsi:type'
           }
         },
         {
-          "name": "oneBehaviorEventRef",
-          "type": "EventDefinition",
-          "isAttr": true,
-          "isReference": true
+          'name': 'oneBehaviorEventRef',
+          'type': 'EventDefinition',
+          'isAttr': true,
+          'isReference': true
         },
         {
-          "name": "noneBehaviorEventRef",
-          "type": "EventDefinition",
-          "isAttr": true,
-          "isReference": true
+          'name': 'noneBehaviorEventRef',
+          'type': 'EventDefinition',
+          'isAttr': true,
+          'isReference': true
         }
       ]
     },
     {
-      "name": "FailedJobRetryTimeCycle",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["flowable:AsyncCapable", "bpmn:MultiInstanceLoopCharacteristics"]
+      'name': 'FailedJobRetryTimeCycle',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:AsyncCapable', 'bpmn:MultiInstanceLoopCharacteristics']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "body",
-          "isBody": true,
-          "type": "String"
+          '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"
+      '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": [
+      'properties': [
         {
-          "name": "expression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "class",
-          "isAttr": true,
-          "type": "String"
+          'name': 'class',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "delegateExpression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'delegateExpression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "event",
-          "isAttr": true,
-          "type": "String"
+          'name': 'event',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "script",
-          "type": "Script"
+          'name': 'script',
+          'type': 'Script'
         },
         {
-          "name": "fields",
-          "type": "Field",
-          "isMany": true
+          'name': 'fields',
+          'type': 'Field',
+          'isMany': true
         }
       ]
     },
     {
-      "name": "TaskListener",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["bpmn:UserTask"]
+      'name': 'TaskListener',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:UserTask']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "expression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "class",
-          "isAttr": true,
-          "type": "String"
+          'name': 'class',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "delegateExpression",
-          "isAttr": true,
-          "type": "String"
+          'name': 'delegateExpression',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "event",
-          "isAttr": true,
-          "type": "String"
+          'name': 'event',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "script",
-          "type": "Script"
+          'name': 'script',
+          'type': 'Script'
         },
         {
-          "name": "fields",
-          "type": "Field",
-          "isMany": true
+          'name': 'fields',
+          'type': 'Field',
+          'isMany': true
         }
       ]
     },
     {
-      "name": "FormProperty",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      'name': 'FormProperty',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:StartEvent', 'bpmn:UserTask']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "id",
-          "type": "String",
-          "isAttr": true
+          'name': 'id',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "name",
-          "type": "String",
-          "isAttr": true
+          'name': 'name',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "type",
-          "type": "String",
-          "isAttr": true
+          'name': 'type',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "required",
-          "type": "String",
-          "isAttr": true
+          'name': 'required',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "readable",
-          "type": "String",
-          "isAttr": true
+          'name': 'readable',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "writable",
-          "type": "String",
-          "isAttr": true
+          'name': 'writable',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "variable",
-          "type": "String",
-          "isAttr": true
+          'name': 'variable',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "expression",
-          "type": "String",
-          "isAttr": true
+          'name': 'expression',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "datePattern",
-          "type": "String",
-          "isAttr": true
+          'name': 'datePattern',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "default",
-          "type": "String",
-          "isAttr": true
+          'name': 'default',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "values",
-          "type": "Value",
-          "isMany": true
+          'name': 'values',
+          'type': 'Value',
+          'isMany': true
         }
       ]
     },
     {
-      "name": "FormData",
-      "superClass": ["Element"],
-      "meta": {
-        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      'name': 'FormData',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:StartEvent', 'bpmn:UserTask']
       },
-      "properties": [
+      'properties': [
         {
-          "name": "fields",
-          "type": "FormField",
-          "isMany": true
+          'name': 'fields',
+          'type': 'FormField',
+          'isMany': true
         },
         {
-          "name": "businessKey",
-          "type": "String",
-          "isAttr": true
+          'name': 'businessKey',
+          'type': 'String',
+          'isAttr': true
         }
       ]
     },
     {
-      "name": "FormField",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'FormField',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "id",
-          "type": "String",
-          "isAttr": true
+          'name': 'id',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "label",
-          "type": "String",
-          "isAttr": true
+          'name': 'label',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "type",
-          "type": "String",
-          "isAttr": true
+          'name': 'type',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "datePattern",
-          "type": "String",
-          "isAttr": true
+          'name': 'datePattern',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "defaultValue",
-          "type": "String",
-          "isAttr": true
+          'name': 'defaultValue',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "properties",
-          "type": "Properties"
+          'name': 'properties',
+          'type': 'Properties'
         },
         {
-          "name": "validation",
-          "type": "Validation"
+          'name': 'validation',
+          'type': 'Validation'
         },
         {
-          "name": "values",
-          "type": "Value",
-          "isMany": true
+          'name': 'values',
+          'type': 'Value',
+          'isMany': true
         }
       ]
     },
     {
-      "name": "Validation",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'Validation',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "constraints",
-          "type": "Constraint",
-          "isMany": true
+          'name': 'constraints',
+          'type': 'Constraint',
+          'isMany': true
         }
       ]
     },
     {
-      "name": "Constraint",
-      "superClass": ["Element"],
-      "properties": [
+      'name': 'Constraint',
+      'superClass': ['Element'],
+      'properties': [
         {
-          "name": "name",
-          "type": "String",
-          "isAttr": true
+          'name': 'name',
+          'type': 'String',
+          'isAttr': true
         },
         {
-          "name": "config",
-          "type": "String",
-          "isAttr": true
+          'name': 'config',
+          'type': 'String',
+          'isAttr': true
         }
       ]
     },
     {
-      "name": "ConditionalEventDefinition",
-      "isAbstract": true,
-      "extends": ["bpmn:ConditionalEventDefinition"],
-      "properties": [
+      'name': 'ConditionalEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:ConditionalEventDefinition'],
+      'properties': [
         {
-          "name": "variableName",
-          "isAttr": true,
-          "type": "String"
+          'name': 'variableName',
+          'isAttr': true,
+          'type': 'String'
         },
         {
-          "name": "variableEvent",
-          "isAttr": true,
-          "type": "String"
+          'name': 'variableEvent',
+          'isAttr': true,
+          'type': 'String'
         }
       ]
     }
   ],
-  "emumerations": []
-}
+  'emumerations': []
+};
diff --git a/src/components/BpmnDesign/assets/module/index.ts b/src/components/BpmnDesign/assets/module/index.ts
index a984b151..51883229 100644
--- a/src/components/BpmnDesign/assets/module/index.ts
+++ b/src/components/BpmnDesign/assets/module/index.ts
@@ -5,4 +5,6 @@ import EnhancementContextPad from './ContextPad';
 // 翻译模块
 import TranslationModule from './Translate';
 
-export default [EnhancementPaletteProvider, EnhancementContextPad, TranslationModule];
+import { ModuleDeclaration } from 'didi';
+const Module: ModuleDeclaration[] = [EnhancementPaletteProvider, EnhancementContextPad, TranslationModule];
+export default Module;
diff --git a/src/components/BpmnDesign/hooks/usePanel.ts b/src/components/BpmnDesign/hooks/usePanel.ts
new file mode 100644
index 00000000..c7f68dfd
--- /dev/null
+++ b/src/components/BpmnDesign/hooks/usePanel.ts
@@ -0,0 +1,30 @@
+import { Ref } from 'vue';
+import showConfig from '@/components/BpmnDesign/assets/showConfig';
+
+interface Options {
+  modeler: any;
+  element: any;
+}
+
+export default (ops: Options) => {
+  const { modeler, element } = ops;
+
+  const elementType = computed(() => {
+    const bizObj = element.businessObject;
+    return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+  });
+
+  const config = computed(() => showConfig[elementType.value] || {});
+
+  const updateProperties = (properties: any) => {
+    const modeling = modeler.get('modeling');
+    modeling.updateProperties(element, properties);
+  };
+
+  return {
+    elementType,
+    showConfig: config,
+
+    updateProperties
+  };
+};
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 68dc9c85..1e0c4182 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -98,8 +98,8 @@ const groups = [
   { name: 'python组', id: 'python' }
 ];
 const categorys = [
-  { name: 'OA', id: 'oa' },
-  { name: '财务', id: 'finance' }
+  { label: 'OA', id: 'oa', value: 'id' },
+  { label: '财务', id: 'finance', value: 'finance' }
 ];
 
 onMounted(() => {
diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue
new file mode 100644
index 00000000..30b4a1c5
--- /dev/null
+++ b/src/components/BpmnDesign/panel/ProcessPanel.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+      <el-form-item label="流程分类" prop="processCategory">
+        <el-select v-model="formData.processCategory">
+          <el-option v-for="item in categorys" :key="item.id" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程标识" prop="id">
+        <el-input v-model="formData.id"></el-input>
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input v-model="formData.name"></el-input>
+      </el-form-item>
+      <el-form-item label="节点描述" prop="description">
+        <el-input v-model="formData.description"></el-input>
+      </el-form-item>
+      <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
+      <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="ProcessPanel">
+import ExecutionListener from './property/ExecutionListener.vue';
+import { ProcessPanel } from 'bpmnDesign';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+
+const formData = ref<ProcessPanel>({
+  processCategory: '',
+  id: '',
+  name: '',
+  description: ''
+});
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 2b684c56..5031d006 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -1,9 +1,12 @@
 <template>
   <div>
-    <el-form ref="formRef">
+    <el-form ref="formRef" v-model="formData" label-width="80px">
+      <el-form-item prop="id" label="节点 id">
+        <el-input v-model="formData.id" placeholder="请输入"> </el-input>
+      </el-form-item>
       <el-form-item label="任务监听器">
         <el-badge :value="taskListenerCount">
-          <el-button @click="taskListenerRef.open()">编辑</el-button>
+          <el-button @click="taskListenerRef.openDialog()">编辑</el-button>
         </el-badge>
       </el-form-item>
     </el-form>
@@ -31,6 +34,7 @@ const elementType = computed(() => {
 const config = computed(() => showConfig[elementType.value] || {});
 const taskListenerRef = ref<InstanceType<typeof TaskListener>>();
 const taskListenerCount = ref(0);
+const formData = ref({});
 
 const refreshTaskListener = (count?: number) => {
   if (count) {
@@ -40,11 +44,6 @@ const refreshTaskListener = (count?: number) => {
       props.element.businessObject.extensionElements?.values?.filter((item) => item.$type === 'flowable:TaskListener').length ?? 0;
   }
 };
-
-const updateProperties = (properties: any) => {
-  const modeling = props.modeler.get('modeling');
-  modeling.updateProperties(props.element, properties);
-};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/BpmnDesign/panel/property/ExecutionListener.vue b/src/components/BpmnDesign/panel/property/ExecutionListener.vue
new file mode 100644
index 00000000..85f69b86
--- /dev/null
+++ b/src/components/BpmnDesign/panel/property/ExecutionListener.vue
@@ -0,0 +1,269 @@
+<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"
+      :edit-rules="tableRules"
+      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
+      @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="90px">
+        <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">
+          <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="Java 类名" 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 { ExecutionListenerVO } from 'bpmnDesign';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import useDialog from '@/hooks/useDialog';
+
+const emit = defineEmits(['close']);
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const initData: ExecutionListenerVO = {
+  event: '',
+  type: '',
+  className: '',
+  params: []
+};
+const formData = reactive<ExecutionListenerVO>(initData);
+
+const selectRow = ref<ExecutionListenerVO | null>();
+const formDialog = useDialog({
+  title: selectRow.value ? '编辑&保存' : '新增&保存'
+});
+
+const { title, visible, openDialog, closeDialog } = useDialog({
+  title: '执行监听器'
+});
+const { showConfig, elementType, updateProperties } = usePanel({
+  modeler: props.modeler,
+  element: toRaw(props.element)
+});
+
+const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
+const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
+const formRef = ref<ElFormInstance>();
+const currentIndex = ref(0);
+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.params = listenerParamRef.value.getTableData();
+        if (selectRow.value) {
+          Object.assign(selectRow.value, formData);
+        } else {
+          $table.insertAt({ ...formData }, -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, initData);
+  selectRow.value = null;
+  formDialog.openDialog();
+};
+
+const editEvent = (row: ExecutionListenerVO) => {
+  Object.assign(formData, 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 = props.modeler.get('moddle').create('bpmn:ExtensionElements');
+    }
+    // 清除旧值
+    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
+    data.forEach((item) => {
+      const executionListener = props.modeler.get('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 = props.modeler.get('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') ?? [];
+    }
+  }
+};
+
+defineExpose({
+  openDialog
+});
+
+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 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: 'start', value: 'start' },
+  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: 'end', value: 'end' },
+  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: 'take', value: 'take' }
+];
+</script>
+
+<style scoped lang="scss">
+.el-badge {
+  :deep(.el-badge__content) {
+    top: 10px;
+  }
+}
+</style>
diff --git a/src/components/BpmnDesign/panel/property/ListenerParam.vue b/src/components/BpmnDesign/panel/property/ListenerParam.vue
index 1c869c24..c524b45e 100644
--- a/src/components/BpmnDesign/panel/property/ListenerParam.vue
+++ b/src/components/BpmnDesign/panel/property/ListenerParam.vue
@@ -1,107 +1,89 @@
 <template>
-  <el-dialog
-    :model-value="visible"
-    title="监听器参数"
-    width="700px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :show-close="false"
-    append-to-body
-  >
-    <vxe-toolbar>
-      <template #buttons>
-        <el-button icon="Plus" @click="insertRow">新增</el-button>
-      </template>
-    </vxe-toolbar>
-    <vxe-table
-      ref="tableRef"
-      height="300px"
-      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 #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-      </div>
+  <vxe-toolbar>
+    <template #buttons>
+      <el-button icon="Plus" @click="insertRow">新增</el-button>
     </template>
-  </el-dialog>
+  </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" name="ListenerParam">
 import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { ParamVO } from 'bpmnDesign';
+import useDialog from '@/hooks/useDialog';
 
 interface PropType {
-  modelValue: ParamVO[];
-  visible?: boolean;
+  height?: string;
+  tableData?: ParamVO[];
 }
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const props = withDefaults(defineProps<PropType>(), {
-  visible: false
+  height: '200px',
+  tableData: () => []
 });
 
-const tableData = computed(() => props.modelValue);
-
 const tableRules = ref<VxeTablePropTypes.EditRules>({
   type: [{ required: true, message: '请选择', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }],
   value: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
 
-const emits = defineEmits(['update:modelValue', 'update:visible']);
+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 submitForm = async () => {
+
+const getTableData = () => {
   const $table = tableRef.value;
   if ($table) {
-    const errMap = await $table.validate(true);
-    if (errMap) {
-      proxy?.$modal.msgError('校验不通过');
-    } else {
-      emits('update:modelValue', $table.getTableData().fullData);
-      emits('update:visible', false);
-    }
+    return $table.getTableData().fullData;
   }
+  return [];
 };
 
 const insertRow = async () => {
@@ -120,6 +102,20 @@ const removeRow = async (row: ParamVO) => {
     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/components/BpmnDesign/panel/property/TaskListener.vue b/src/components/BpmnDesign/panel/property/TaskListener.vue
index 1f7379eb..b96302bb 100644
--- a/src/components/BpmnDesign/panel/property/TaskListener.vue
+++ b/src/components/BpmnDesign/panel/property/TaskListener.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-dialog
-      :model-value="visible"
-      title="任务监听器"
+      v-model="visible"
+      :title="title"
       width="900px"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
@@ -66,20 +66,31 @@
           </template>
         </vxe-column>
       </vxe-table>
+
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
         </div>
       </template>
     </el-dialog>
-    <ListenerParam v-if="showParamDialog" v-model:visible="showParamDialog" v-model="tableData[currentIndex].params" />
+
+    <ListenerParam
+      ref="listenerParamRef"
+      @update-data="
+        (data: ParamVO[]) => {
+          tableData[currentIndex].params = data;
+        }
+      "
+    />
   </div>
 </template>
 <script setup lang="ts">
 import ListenerParam from './ListenerParam.vue';
-import showConfig from '../../assets/showConfig';
 import { VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import { TaskListenerVO } from 'bpmnDesign';
+import { ParamVO, TaskListenerVO } from 'bpmnDesign';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import useDialog from '@/hooks/useDialog';
 
 const emit = defineEmits(['close']);
 
@@ -94,13 +105,15 @@ const props = withDefaults(defineProps<PropType>(), {
   categorys: () => []
 });
 
-const elementType = computed(() => {
-  const bizObj = props.element.businessObject;
-  return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+const { title, visible, openDialog, closeDialog } = useDialog({
+  title: '任务监听器'
+});
+const { showConfig, elementType, updateProperties } = usePanel({
+  modeler: props.modeler,
+  element: toRaw(props.element)
 });
-const config = computed(() => showConfig[elementType.value] || {});
 
-const visible = ref(false);
+const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
 const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
 const currentIndex = ref(0);
 const tableData = ref<TaskListenerVO[]>([]);
@@ -126,18 +139,21 @@ const eventSelect = [
 const configParam = (i: number) => {
   currentIndex.value = i;
   showParamDialog.value = true;
+  listenerParamRef.value.openDialog();
 };
 const insertRow = async () => {
   const $table = tableRef.value;
   if ($table) {
-    tableData.value.push({
-      className: '',
-      type: '',
-      name: '',
-      event: '',
-      params: []
-    });
-    const { row: newRow } = await $table.insertAt({}, -1);
+    const { row: newRow } = await $table.insertAt(
+      {
+        className: '',
+        type: '',
+        name: '',
+        event: '',
+        params: []
+      },
+      -1
+    );
     // 插入一条数据并触发校验
     await $table.validate(newRow);
   }
@@ -164,7 +180,6 @@ const submitForm = async () => {
   }
 };
 
-const open = () => (visible.value = true);
 const updateElement = () => {
   if (tableData.value.length) {
     let extensionElements = props.element.businessObject.get('extensionElements');
@@ -199,12 +214,8 @@ const updateElement = () => {
   }
 };
 
-const updateProperties = (properties: any) => {
-  const modeling = props.modeler.get('modeling');
-  modeling.updateProperties(toRaw(props.element), properties);
-};
 defineExpose({
-  open
+  openDialog
 });
 </script>
 
diff --git a/src/hooks/useDialog.ts b/src/hooks/useDialog.ts
new file mode 100644
index 00000000..97b5f583
--- /dev/null
+++ b/src/hooks/useDialog.ts
@@ -0,0 +1,25 @@
+import { ref } from 'vue';
+
+interface Options {
+  title?: string;
+}
+export default (ops?: Options) => {
+  const visible = ref(false);
+  const title = ref(ops.title || '');
+
+  const openDialog = () => {
+    visible.value = true;
+  };
+
+  const closeDialog = () => {
+    visible.value = false;
+  };
+
+  return {
+    title,
+    visible,
+
+    openDialog,
+    closeDialog
+  };
+};
diff --git a/src/main.ts b/src/main.ts
index dc7c4382..ccca9ed5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,6 +33,9 @@ import i18n from '@/lang/index';
 // vxeTable
 import VXETable from 'vxe-table';
 import 'vxe-table/lib/style.css';
+VXETable.config({
+  zIndex: 999999
+});
 
 const app = createApp(App);
 
diff --git a/src/types/bpmn.d.ts b/src/types/bpmn.d.ts
index 983ef084..4ce81ca3 100644
--- a/src/types/bpmn.d.ts
+++ b/src/types/bpmn.d.ts
@@ -12,4 +12,18 @@ declare module 'bpmnDesign' {
     className: string;
     params: ParamVO[];
   }
+
+  export interface ExecutionListenerVO {
+    event: string;
+    type: string;
+    className: string;
+    params: ParamVO[];
+  }
+
+  export interface ProcessPanel {
+    processCategory: string;
+    id: string;
+    name: string;
+    description: string;
+  }
 }