From 7726fcbf5409f14cd8b5d009dc2b05d65309aeb1 Mon Sep 17 00:00:00 2001
From: cxc <quantulr@outlook.com>
Date: Mon, 19 Dec 2022 17:29:18 +0800
Subject: [PATCH] model

---
 package.json                                  |   4 +-
 src/components/ProcessDesigner/index.vue      |  70 +-
 .../package/designer/ProcessDesigner.vue      | 953 +++++++++++-------
 .../activiti/activitiExtension.js             |   2 +-
 .../extension-moddle/camunda/extension.js     |   2 +-
 .../flowable/flowableExtension.js             |   2 +-
 src/plugins/package/designer/test.vue         |   0
 src/plugins/package/highlight/index.js        |   8 +-
 src/plugins/package/penal/PropertiesPanel.vue | 364 ++++---
 .../package/penal/base/ElementBaseInfo.vue    | 114 ++-
 .../penal/flow-condition/FlowCondition.vue    |   2 +-
 .../package/penal/form/ElementForm.vue        |  50 +-
 .../penal/listeners/ElementListeners.vue      | 487 ++++++---
 .../penal/listeners/UserTaskListeners.vue     |  32 +-
 .../package/penal/listeners/template.js       |  32 +-
 .../multi-instance/ElementMultiInstance.vue   |   2 +-
 .../penal/other/ElementOtherConfig.vue        |   2 +-
 .../penal/properties/ElementProperties.vue    |  16 +-
 .../penal/signal-message/SignalAndMessage.vue | 110 +-
 .../package/penal/task/ElementTask.vue        |   2 +-
 .../task/task-components/ReceiveTask.vue      |   8 +-
 .../penal/task/task-components/UserTask.vue   |   8 +-
 src/plugins/package/utils.js                  |  54 +-
 src/store/modules/app.js                      |  86 +-
 src/store/modules/bpmn.js                     |  17 +
 vite.config.js                                |   1 +
 26 files changed, 1499 insertions(+), 929 deletions(-)
 create mode 100644 src/plugins/package/designer/test.vue
 create mode 100644 src/store/modules/bpmn.js

diff --git a/package.json b/package.json
index 428ece6..9b48b76 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "axios": "0.27.2",
     "bpmn-js-token-simulation": "0.10.0",
     "clipboard": "^2.0.11",
+    "diagram-js": "^11.4.1",
     "echarts": "5.4.0",
     "element-plus": "2.2.21",
     "file-saver": "2.0.5",
@@ -31,6 +32,7 @@
     "jsencrypt": "3.3.1",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "stream-browserify": "^3.0.0",
     "throttle-debounce": "^5.0.0",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
@@ -44,7 +46,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/babel-helper-vue-transform-on": "^1.0.2",
     "@vue/compiler-sfc": "3.2.45",
-    "bpmn-js": "^11.1.0",
+    "bpmn-js": "7.4.0",
     "bpmn-js-properties-panel": "^1.13.1",
     "camunda-bpmn-moddle": "^7.0.1",
     "sass": "1.56.1",
diff --git a/src/components/ProcessDesigner/index.vue b/src/components/ProcessDesigner/index.vue
index 7ef8af0..a65b2e2 100644
--- a/src/components/ProcessDesigner/index.vue
+++ b/src/components/ProcessDesigner/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="process-design" :style="'display: flex; height:' + height">
-    <!-- <bpmn-process-designer
+    <bpmn-process-designer
       v-model="xmlString"
       v-bind="controlForm"
       keyboard
@@ -16,15 +16,21 @@
       @event="handlerEvent"
       @save="onSaveProcess"
     />
+
     <bmpn-process-penal
       :bpmn-modeler="modeler"
       :prefix="controlForm.prefix"
       class="process-panel"
-    /> -->
+    />
   </div>
 </template>
 <script setup>
+import BmpnProcessPenal from "@/plugins/package/penal";
+import BpmnProcessDesigner from "@/plugins/package/designer";
 import "@/plugins/package/theme/index.scss";
+// import "highlight.js/styles/atom-one-dark-reasonable.css";
+import CustomContentPadProvider from "@/plugins/package/designer/plugins/content-pad";
+import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
 import { ref } from "vue";
 const props = defineProps({
   bpmnXml: {
@@ -37,9 +43,39 @@ const props = defineProps({
   },
 });
 const { bpmnXml, designerForm } = toRefs(props);
-
+const modeler = ref(null);
 const height = ref(document.documentElement.clientHeight - 94.5 + "px;");
 const xmlString = ref(bpmnXml.value);
+const emit = defineEmits(["save"]);
+const data = reactive({
+  element: null,
+  controlForm: {
+    processId: designerForm.value.processKey || "",
+    processName: designerForm.value.processName || "",
+    simulation: false,
+    labelEditing: false,
+    labelVisible: false,
+    prefix: "flowable",
+    headerButtonSize: "small",
+    additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
+  },
+});
+const { controlForm, element } = toRefs(data);
+
+function elementClick(elementArgv) {
+  element.value = elementArgv;
+  console.log(elementArgv);
+}
+function initModeler(modelerArgv) {
+  setTimeout(() => {
+    modeler.value = modelerArgv;
+    console.log(modeler.value.get("eventBus"), "71");
+  }, 10);
+}
+function handlerEvent(eventName, element) {}
+function onSaveProcess(saveData) {
+  emit("save", saveData);
+}
 </script>
 <!-- 
   
@@ -51,7 +87,7 @@ import CustomContentPadProvider from "@/plugins/package/designer/plugins/content
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
 import vuePlugin from "@/plugins/package/highlight";
-import "highlight.js/styles/atom-one-dark-reasonable.css";
+// import "highlight.js/styles/atom-one-dark-reasonable.css";
 // Vue.use(vuePlugin);
 
 export default {
@@ -63,32 +99,12 @@ export default {
   },
   data() {
     return {
-      modeler: null,
-      controlForm: {
-        processId: this.designerForm.processKey || "",
-        processName: this.designerForm.processName || "",
-        simulation: false,
-        labelEditing: false,
-        labelVisible: false,
-        prefix: "flowable",
-        headerButtonSize: "small",
-        additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
-      },
+    
+     
     };
   },
   methods: {
-    elementClick(element) {
-      this.element = element;
-    },
-    initModeler(modeler) {
-      setTimeout(() => {
-        this.modeler = modeler;
-      }, 10);
-    },
-    handlerEvent(eventName, element) {},
-    onSaveProcess(saveData) {
-      this.$emit("save", saveData);
-    },
+  
   },
 };
 </script>
diff --git a/src/plugins/package/designer/ProcessDesigner.vue b/src/plugins/package/designer/ProcessDesigner.vue
index 31309bd..2517b80 100644
--- a/src/plugins/package/designer/ProcessDesigner.vue
+++ b/src/plugins/package/designer/ProcessDesigner.vue
@@ -4,89 +4,232 @@
       <slot name="control-header"></slot>
       <template v-if="!$slots['control-header']">
         <el-button-group key="file-control">
-          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>
-          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
+          <el-button
+            :size="headerButtonSize"
+            :type="headerButtonType"
+            icon="edit"
+            @click="onSave"
+            >保存流程</el-button
+          >
+          <el-button
+            :size="headerButtonSize"
+            :type="headerButtonType"
+            icon="folder-opened"
+            @click="refFile.click()"
+            >打开文件</el-button
+          >
           <el-tooltip effect="light">
-            <div slot="content">
-              <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
+            <template #content>
+              <el-button
+                :size="headerButtonSize"
+                link
+                type="primary"
+                @click="downloadProcessAsXml()"
+                >下载为XML文件</el-button
+              >
               <br />
-              <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
+              <el-button
+                :size="headerButtonSize"
+                link
+                type="primary"
+                @click="downloadProcessAsSvg()"
+                >下载为SVG文件</el-button
+              >
               <br />
-              <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
-            </div>
-            <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-download">下载文件</el-button>
+              <el-button
+                :size="headerButtonSize"
+                link
+                type="primary"
+                @click="downloadProcessAsBpmn()"
+                >下载为BPMN文件</el-button
+              >
+            </template>
+            <el-button
+              :size="headerButtonSize"
+              :type="headerButtonType"
+              icon="download"
+              >下载文件</el-button
+            >
           </el-tooltip>
           <el-tooltip effect="light">
-            <div slot="content">
-              <el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
+            <template #content>
+              <el-button
+                :size="headerButtonSize"
+                link
+                type="primary"
+                @click="previewProcessXML"
+                >预览XML</el-button
+              >
               <br />
-              <el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button>
-            </div>
-            <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-view">预览</el-button>
+              <el-button
+                :size="headerButtonSize"
+                link
+                type="primary"
+                @click="previewProcessJson"
+                >预览JSON</el-button
+              >
+            </template>
+            <el-button
+              :size="headerButtonSize"
+              :type="headerButtonType"
+              icon="view"
+              >预览</el-button
+            >
           </el-tooltip>
-          <el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
-            <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-cpu" @click="processSimulation">
+          <el-tooltip
+            v-if="simulation"
+            effect="light"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <el-button
+              :size="headerButtonSize"
+              :type="headerButtonType"
+              icon="cpu"
+              @click="processSimulation"
+            >
               模拟
             </el-button>
           </el-tooltip>
         </el-button-group>
         <el-button-group key="align-control">
           <el-tooltip effect="light" content="向左对齐">
-            <el-button :size="headerButtonSize" class="align align-left" icon="el-icon-s-data" @click="elementsAlign('left')" />
+            <el-button
+              :size="headerButtonSize"
+              class="align align-left"
+              icon="histogram"
+              @click="elementsAlign('left')"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="向右对齐">
-            <el-button :size="headerButtonSize" class="align align-right" icon="el-icon-s-data" @click="elementsAlign('right')" />
+            <el-button
+              :size="headerButtonSize"
+              class="align align-right"
+              icon="histogram"
+              @click="elementsAlign('right')"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="向上对齐">
-            <el-button :size="headerButtonSize" class="align align-top" icon="el-icon-s-data" @click="elementsAlign('top')" />
+            <el-button
+              :size="headerButtonSize"
+              class="align align-top"
+              icon="histogram"
+              @click="elementsAlign('top')"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="向下对齐">
-            <el-button :size="headerButtonSize" class="align align-bottom" icon="el-icon-s-data" @click="elementsAlign('bottom')" />
+            <el-button
+              :size="headerButtonSize"
+              class="align align-bottom"
+              icon="histogram"
+              @click="elementsAlign('bottom')"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="水平居中">
-            <el-button :size="headerButtonSize" class="align align-center" icon="el-icon-s-data" @click="elementsAlign('center')" />
+            <el-button
+              :size="headerButtonSize"
+              class="align align-center"
+              icon="histogram"
+              @click="elementsAlign('center')"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="垂直居中">
-            <el-button :size="headerButtonSize" class="align align-middle" icon="el-icon-s-data" @click="elementsAlign('middle')" />
+            <el-button
+              :size="headerButtonSize"
+              class="align align-middle"
+              icon="histogram"
+              @click="elementsAlign('middle')"
+            />
           </el-tooltip>
         </el-button-group>
         <el-button-group key="scale-control">
           <el-tooltip effect="light" content="缩小视图">
-            <el-button :size="headerButtonSize" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out" @click="processZoomOut()" />
+            <el-button
+              :size="headerButtonSize"
+              :disabled="defaultZoom <= 0.3"
+              icon="zoom-out"
+              @click="processZoomOut()"
+            />
           </el-tooltip>
-          <el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
+          <el-button :size="headerButtonSize">{{
+            Math.floor(defaultZoom * 10 * 10) + "%"
+          }}</el-button>
           <el-tooltip effect="light" content="放大视图">
-            <el-button :size="headerButtonSize" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" @click="processZoomIn()" />
+            <el-button
+              :size="headerButtonSize"
+              :disabled="defaultZoom >= 3.9"
+              icon="zoom-in"
+              @click="processZoomIn()"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="重置视图并居中">
-            <el-button :size="headerButtonSize" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
+            <el-button
+              :size="headerButtonSize"
+              icon="ScaleToOriginal"
+              @click="processReZoom()"
+            />
           </el-tooltip>
         </el-button-group>
         <el-button-group key="stack-control">
           <el-tooltip effect="light" content="撤销">
-            <el-button :size="headerButtonSize" :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" />
+            <el-button
+              :size="headerButtonSize"
+              :disabled="!revocable"
+              icon="refresh-left"
+              @click="processUndo()"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="恢复">
-            <el-button :size="headerButtonSize" :disabled="!recoverable" icon="el-icon-refresh-right" @click="processRedo()" />
+            <el-button
+              :size="headerButtonSize"
+              :disabled="!recoverable"
+              icon="refresh-right"
+              @click="processRedo()"
+            />
           </el-tooltip>
           <el-tooltip effect="light" content="重新绘制">
-            <el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
+            <el-button
+              :size="headerButtonSize"
+              icon="refresh"
+              @click="processRestart"
+            />
           </el-tooltip>
         </el-button-group>
       </template>
       <!-- 用于打开本地文件-->
-      <input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        style="display: none"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
     </div>
     <div class="my-process-designer__container">
-      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
+      <div class="my-process-designer__canvas" ref="bpmnCanvasRef"></div>
     </div>
-    <el-dialog title="预览" width="60%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
-      <highlightjs :language="previewType" :code="previewResult" style="height: 60vh" />
+
+    <el-dialog
+      title="预览"
+      width="60%"
+      v-model="previewModelVisible"
+      append-to-body
+      destroy-on-close
+    >
+      <!-- <highlightjs
+        :language="previewType"
+        :code="previewResult"
+        style="height: 60vh"
+      /> -->
+      <!-- <div
+        v-html="
+          highlightjs.highlight(previewResult, { language: previewType }).value
+        "
+      ></div> -->
     </el-dialog>
   </div>
 </template>
-
-<script>
+<script setup name="BpmnProcessDesigner">
 // 生产环境时优化
 // const BpmnModeler = window.BpmnJS;
 import BpmnModeler from "bpmn-js/lib/Modeler";
@@ -108,358 +251,410 @@ import activitiModdleExtension from "./plugins/extension-moddle/activiti";
 import flowableModdleExtension from "./plugins/extension-moddle/flowable";
 // 引入json转换与高亮
 import convert from "xml-js";
+// import highlightjs from "@/plugins/package/highlight";
 
-export default {
-  name: "BpmnProcessDesigner",
-  componentName: "BpmnProcessDesigner",
-  props: {
-    value: String, // xml 字符串
-    processId: String,
-    processName: String,
-    translations: Object, // 自定义的翻译文件
-    additionalModel: [Object, Array], // 自定义model
-    moddleExtension: Object, // 自定义moddle
-    onlyCustomizeAddi: {
-      type: Boolean,
-      default: false
-    },
-    onlyCustomizeModdle: {
-      type: Boolean,
-      default: false
-    },
-    simulation: {
-      type: Boolean,
-      default: true
-    },
-    keyboard: {
-      type: Boolean,
-      default: true
-    },
-    prefix: {
-      type: String,
-      default: "flowable"
-    },
-    events: {
-      type: Array,
-      default: () => ["element.click"]
-    },
-    headerButtonSize: {
-      type: String,
-      default: "small",
-      validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
-    },
-    headerButtonType: {
-      type: String,
-      default: "primary",
-      validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
+import { computed, onMounted, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+const bpmnCanvasRef = ref();
+const refFile = ref();
+const props = defineProps({
+  value: String, // xml 字符串
+  processId: String,
+  processName: String,
+  translations: Object, // 自定义的翻译文件
+  additionalModel: [Object, Array], // 自定义model
+  moddleExtension: Object, // 自定义moddle
+  onlyCustomizeAddi: {
+    type: Boolean,
+    default: false,
+  },
+  onlyCustomizeModdle: {
+    type: Boolean,
+    default: false,
+  },
+  simulation: {
+    type: Boolean,
+    default: true,
+  },
+  keyboard: {
+    type: Boolean,
+    default: true,
+  },
+  prefix: {
+    type: String,
+    default: "flowable",
+  },
+  events: {
+    type: Array,
+    default: () => ["element.click"],
+  },
+  headerButtonSize: {
+    type: String,
+    default: "small",
+    validator: (value) =>
+      ["default", "medium", "small", "mini"].indexOf(value) !== -1,
+  },
+  headerButtonType: {
+    type: String,
+    default: "primary",
+    validator: (value) =>
+      ["default", "primary", "success", "warning", "danger", "info"].indexOf(
+        value
+      ) !== -1,
+  },
+});
+const {
+  value,
+  processId,
+  processName,
+  translations,
+  additionalModel,
+  moddleExtension,
+  onlyCustomizeAddi,
+  onlyCustomizeModdle,
+  simulation,
+  keyboard,
+  prefix,
+  events,
+  headerButtonSize,
+  headerButtonType,
+} = toRefs(props);
+const emit = defineEmits([
+  "destroy",
+  "save",
+  "commandStack-changed",
+  "input",
+  "change",
+  "init-finished",
+  "element-click",
+  "event",
+  "canvas-viewbox-changed",
+  "connection-added",
+  "connection-removed",
+  "connection-changed",
+]);
+const defaultZoom = ref(1);
+const previewModelVisible = ref(false);
+const simulationStatus = ref(false);
+const previewResult = ref("");
+const previewType = ref("xml");
+const recoverable = ref(false);
+const revocable = ref(false);
+let bpmnModeler;
+const additionalModules = computed(() => {
+  const Modules = [];
+  // 仅保留用户自定义扩展模块
+  if (onlyCustomizeAddi.value) {
+    if (
+      Object.prototype.toString.call(additionalModel.value) === "[object Array]"
+    ) {
+      return additionalModel.value || [];
     }
-  },
-  data() {
-    return {
-      defaultZoom: 1,
-      previewModelVisible: false,
-      simulationStatus: false,
-      previewResult: "",
-      previewType: "xml",
-      recoverable: false,
-      revocable: false
-    };
-  },
-  computed: {
-    additionalModules() {
-      const Modules = [];
-      // 仅保留用户自定义扩展模块
-      if (this.onlyCustomizeAddi) {
-        if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
-          return this.additionalModel || [];
-        }
-        return [this.additionalModel];
-      }
+    return [additionalModel.value];
+  }
 
-      // 插入用户自定义扩展模块
-      if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
-        Modules.push(...this.additionalModel);
-      } else {
-        this.additionalModel && Modules.push(this.additionalModel);
-      }
+  // 插入用户自定义扩展模块
+  if (
+    Object.prototype.toString.call(additionalModel.value) === "[object Array]"
+  ) {
+    Modules.push(...additionalModel.value);
+  } else {
+    additionalModel.value && Modules.push(additionalModel.value);
+  }
 
-      // 翻译模块
-      const TranslateModule = {
-        translate: ["value", customTranslate(this.translations || translationsCN)]
-      };
-      Modules.push(TranslateModule);
+  // 翻译模块
+  const TranslateModule = {
+    translate: ["value", customTranslate(translations.value || translationsCN)],
+  };
+  Modules.push(TranslateModule);
 
-      // 模拟流转模块
-      if (this.simulation) {
-        Modules.push(tokenSimulation);
-      }
+  // 模拟流转模块
+  if (simulation.value) {
+    Modules.push(tokenSimulation);
+  }
 
-      // 根据需要的流程类型设置扩展元素构建模块
-      // if (this.prefix === "bpmn") {
-      //   Modules.push(bpmnModdleExtension);
-      // }
-      if (this.prefix === "camunda") {
-        Modules.push(camundaModdleExtension);
-      }
-      if (this.prefix === "flowable") {
-        Modules.push(flowableModdleExtension);
-      }
-      if (this.prefix === "activiti") {
-        Modules.push(activitiModdleExtension);
-      }
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (prefix.value === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  if (prefix.value === "camunda") {
+    Modules.push(camundaModdleExtension);
+  }
+  // FIXME: Function.prototype.bind.apply(...) is not a constructor
+  // if (prefix.value === "flowable") {
+  //   Modules.push(flowableModdleExtension);
+  // }
+  if (prefix.value === "activiti") {
+    Modules.push(activitiModdleExtension);
+  }
+  return Modules;
+});
+console.log(additionalModules.value);
+const moddleExtensions = computed(() => {
+  const Extensions = {};
+  // 仅使用用户自定义模块
+  if (onlyCustomizeModdle.value) {
+    return moddleExtension.value || null;
+  }
 
-      return Modules;
-    },
-    moddleExtensions() {
-      const Extensions = {};
-      // 仅使用用户自定义模块
-      if (this.onlyCustomizeModdle) {
-        return this.moddleExtension || null;
-      }
-
-      // 插入用户自定义模块
-      if (this.moddleExtension) {
-        for (let key in this.moddleExtension) {
-          Extensions[key] = this.moddleExtension[key];
-        }
-      }
-
-      // 根据需要的 "流程类型" 设置 对应的解析文件
-      if (this.prefix === "activiti") {
-        Extensions.activiti = activitiModdleDescriptor;
-      }
-      if (this.prefix === "flowable") {
-        Extensions.flowable = flowableModdleDescriptor;
-      }
-      if (this.prefix === "camunda") {
-        Extensions.camunda = camundaModdleDescriptor;
-      }
-
-      return Extensions;
-    }
-  },
-  mounted() {
-    this.initBpmnModeler();
-    this.createNewDiagram(this.value);
-    this.$once("hook:beforeDestroy", () => {
-      if (this.bpmnModeler) this.bpmnModeler.destroy();
-      this.$emit("destroy", this.bpmnModeler);
-      this.bpmnModeler = null;
-    });
-  },
-  methods: {
-    onSave () {
-      return new Promise((resolve, reject) => {
-        if (this.bpmnModeler == null) {
-          reject();
-        }
-        this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-          this.$emit('save', xml);
-          resolve(xml);
-        });
-      })
-    },
-    initBpmnModeler() {
-      if (this.bpmnModeler) return;
-      this.bpmnModeler = new BpmnModeler({
-        container: this.$refs["bpmn-canvas"],
-        keyboard: this.keyboard ? { bindTo: document } : null,
-        additionalModules: this.additionalModules,
-        moddleExtensions: this.moddleExtensions
-      });
-      this.$emit("init-finished", this.bpmnModeler);
-      this.initModelListeners();
-    },
-    initModelListeners() {
-      const EventBus = this.bpmnModeler.get("eventBus");
-      const that = this;
-      // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
-      this.events.forEach(event => {
-        EventBus.on(event, function(eventObj) {
-          let eventName = event.replace(/\./g, "-");
-          let element = eventObj ? eventObj.element : null;
-          that.$emit(eventName, element, eventObj);
-          that.$emit('event', eventName, element, eventObj);
-        });
-      });
-      // 监听图形改变返回xml
-      EventBus.on("commandStack.changed", async event => {
-        try {
-          this.recoverable = this.bpmnModeler.get("commandStack").canRedo();
-          this.revocable = this.bpmnModeler.get("commandStack").canUndo();
-          let { xml } = await this.bpmnModeler.saveXML({ format: true });
-          this.$emit("commandStack-changed", event);
-          this.$emit("input", xml);
-          this.$emit("change", xml);
-        } catch (e) {
-          console.error(`[Process Designer Warn]: ${e.message || e}`);
-        }
-      });
-      // 监听视图缩放变化
-      this.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
-        this.$emit("canvas-viewbox-changed", { viewbox });
-        const { scale } = viewbox;
-        this.defaultZoom = Math.floor(scale * 100) / 100;
-      });
-    },
-    /* 创建新的流程图 */
-    async createNewDiagram(xml) {
-      // 将字符串转换成图显示出来
-      let newId = this.processId || `Process_${new Date().getTime()}`;
-      let newName = this.processName || `业务流程_${new Date().getTime()}`;
-      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
-      try {
-        let { warnings } = await this.bpmnModeler.importXML(xmlString);
-        if (warnings && warnings.length) {
-          warnings.forEach(warn => console.warn(warn));
-        }
-      } catch (e) {
-        console.error(`[Process Designer Warn]: ${e.message || e}`);
-      }
-    },
-
-    // 下载流程图到本地
-    async downloadProcess(type, name) {
-      try {
-        const _this = this;
-        // 按需要类型创建文件并下载
-        if (type === "xml" || type === "bpmn") {
-          const { err, xml } = await this.bpmnModeler.saveXML();
-          // 读取异常时抛出异常
-          if (err) {
-            console.error(`[Process Designer Warn ]: ${err.message || err}`);
-          }
-          let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
-          downloadFunc(href, filename);
-        } else {
-          const { err, svg } = await this.bpmnModeler.saveSVG();
-          // 读取异常时抛出异常
-          if (err) {
-            return console.error(err);
-          }
-          let { href, filename } = _this.setEncoded("SVG", name, svg);
-          downloadFunc(href, filename);
-        }
-      } catch (e) {
-        console.error(`[Process Designer Warn ]: ${e.message || e}`);
-      }
-      // 文件下载方法
-      function downloadFunc(href, filename) {
-        if (href && filename) {
-          let a = document.createElement("a");
-          a.download = filename; //指定下载的文件名
-          a.href = href; //  URL对象
-          a.click(); // 模拟点击
-          URL.revokeObjectURL(a.href); // 释放URL 对象
-        }
-      }
-    },
-
-    // 根据所需类型进行转码并返回下载地址
-    setEncoded(type, filename = "diagram", data) {
-      const encodedData = encodeURIComponent(data);
-      return {
-        filename: `${filename}.${type}`,
-        href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
-        data: data
-      };
-    },
-
-    // 加载本地文件
-    importLocalFile() {
-      const that = this;
-      const file = this.$refs.refFile.files[0];
-      const reader = new FileReader();
-      reader.readAsText(file);
-      reader.onload = function() {
-        let xmlStr = this.result;
-        that.createNewDiagram(xmlStr);
-      };
-    },
-    /* ------------------------------------------------ refs methods ------------------------------------------------------ */
-    downloadProcessAsXml() {
-      this.downloadProcess("xml");
-    },
-    downloadProcessAsBpmn() {
-      this.downloadProcess("bpmn");
-    },
-    downloadProcessAsSvg() {
-      this.downloadProcess("svg");
-    },
-    processSimulation() {
-      this.simulationStatus = !this.simulationStatus;
-      this.simulation && this.bpmnModeler.get("toggleMode").toggleMode();
-    },
-    processRedo() {
-      this.bpmnModeler.get("commandStack").redo();
-    },
-    processUndo() {
-      this.bpmnModeler.get("commandStack").undo();
-    },
-    processZoomIn(zoomStep = 0.1) {
-      let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
-      if (newZoom > 4) {
-        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
-      }
-      this.defaultZoom = newZoom;
-      this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
-    },
-    processZoomOut(zoomStep = 0.1) {
-      let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
-      if (newZoom < 0.2) {
-        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
-      }
-      this.defaultZoom = newZoom;
-      this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
-    },
-    processZoomTo(newZoom = 1) {
-      if (newZoom < 0.2) {
-        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
-      }
-      if (newZoom > 4) {
-        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
-      }
-      this.defaultZoom = newZoom;
-      this.bpmnModeler.get("canvas").zoom(newZoom);
-    },
-    processReZoom() {
-      this.defaultZoom = 1;
-      this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
-    },
-    processRestart() {
-      this.recoverable = false;
-      this.revocable = false;
-      this.createNewDiagram(null).then(() => this.bpmnModeler.get("canvas").zoom(1, "auto"));
-    },
-    elementsAlign(align) {
-      const Align = this.bpmnModeler.get("alignElements");
-      const Selection = this.bpmnModeler.get("selection");
-      const SelectedElements = Selection.get();
-      if (!SelectedElements || SelectedElements.length <= 1) {
-        this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
-        return;
-      }
-      this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => Align.trigger(SelectedElements, align));
-    },
-    /*-----------------------------    方法结束     ---------------------------------*/
-    previewProcessXML() {
-      this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-        this.previewResult = xml;
-        this.previewType = "xml";
-        this.previewModelVisible = true;
-      });
-    },
-    previewProcessJson() {
-      this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-        this.previewResult = convert.xml2json(xml, { spaces: 2 });
-        this.previewType = "json";
-        this.previewModelVisible = true;
-      });
+  // 插入用户自定义模块
+  if (moddleExtension.value) {
+    for (let key in moddleExtension.value) {
+      Extensions[key] = moddleExtension.value[key];
     }
   }
-};
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (prefix.value === "activiti") {
+    Extensions.activiti = activitiModdleDescriptor;
+  }
+  if (prefix.value === "flowable") {
+    Extensions.flowable = flowableModdleDescriptor;
+  }
+  if (prefix.value === "camunda") {
+    Extensions.camunda = camundaModdleDescriptor;
+  }
+
+  return Extensions;
+});
+
+onMounted(() => {
+  initBpmnModeler();
+  createNewDiagram(value.value);
+});
+onBeforeUnmount(() => {
+  if (bpmnModeler) bpmnModeler.destroy();
+  emit("destroy", bpmnModeler);
+  bpmnModeler = null;
+});
+function onSave() {
+  return new Promise((resolve, reject) => {
+    if (bpmnModeler == null) {
+      reject();
+    }
+    bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+      emit("save", xml);
+      resolve(xml);
+    });
+  });
+}
+function initBpmnModeler() {
+  if (bpmnModeler) return;
+  bpmnModeler = new BpmnModeler({
+    container: bpmnCanvasRef.value,
+    keyboard: keyboard.value ? { bindTo: document } : null,
+    additionalModules: additionalModules.value,
+    moddleExtensions: moddleExtensions.value,
+  });
+  console.log("init-finished");
+  emit("init-finished", bpmnModeler);
+  initModelListeners();
+}
+function initModelListeners() {
+  const EventBus = bpmnModeler.get("eventBus");
+  console.log(EventBus);
+  // const that = this;
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  events.value.forEach((event) => {
+    bpmnModeler.on(event, function (eventObj) {
+      console.log("element-click", eventObj);
+
+      let eventName = event.replace(/\./g, "-");
+      let element = eventObj ? eventObj.element : null;
+      emit(eventName, element, eventObj);
+      emit("event", eventName, element, eventObj);
+    });
+  });
+  //FIXME: 监听图形改变返回xml
+  // EventBus.on("commandStack.changed", async (event) => {
+  //   try {
+  //     recoverable.value = bpmnModeler.get("commandStack").canRedo();
+  //     revocable.value = bpmnModeler.get("commandStack").canUndo();
+  //     let { xml } = await bpmnModeler.saveXML({ format: true });
+  //     emit("commandStack-changed", event);
+  //     emit("input", xml);
+  //     emit("change", xml);
+  //   } catch (e) {
+  //     console.error(`[Process Designer Warn]: ${e.message || e}`);
+  //   }
+  // });
+  // 监听视图缩放变化
+  bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
+    emit("canvas-viewbox-changed", { viewbox });
+    const { scale } = viewbox;
+    defaultZoom.value = Math.floor(scale * 100) / 100;
+  });
+}
+/* 创建新的流程图 */
+async function createNewDiagram(xml) {
+  // 将字符串转换成图显示出来
+  let newId = processId.value || `Process_${new Date().getTime()}`;
+  let newName = processName.value || `业务流程_${new Date().getTime()}`;
+  let xmlString = xml || DefaultEmptyXML(newId, newName, prefix.value);
+  try {
+    let { warnings } = await bpmnModeler.importXML(xmlString);
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn));
+    }
+  } catch (e) {
+    console.error(`[Process Designer Warn]: ${e.message || e}`);
+  }
+}
+
+// 下载流程图到本地
+async function downloadProcess(type, name) {
+  try {
+    // const _this = this;
+    // 按需要类型创建文件并下载
+    if (type === "xml" || type === "bpmn") {
+      const { err, xml } = await bpmnModeler.saveXML();
+      // 读取异常时抛出异常
+      if (err) {
+        console.error(`[Process Designer Warn ]: ${err.message || err}`);
+      }
+      let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
+      downloadFunc(href, filename);
+    } else {
+      const { err, svg } = await bpmnModeler.saveSVG();
+      // 读取异常时抛出异常
+      if (err) {
+        return console.error(err);
+      }
+      let { href, filename } = setEncoded("SVG", name, svg);
+      downloadFunc(href, filename);
+    }
+  } catch (e) {
+    console.error(`[Process Designer Warn ]: ${e.message || e}`);
+  }
+  // 文件下载方法
+  function downloadFunc(href, filename) {
+    if (href && filename) {
+      let a = document.createElement("a");
+      a.download = filename; //指定下载的文件名
+      a.href = href; //  URL对象
+      a.click(); // 模拟点击
+      URL.revokeObjectURL(a.href); // 释放URL 对象
+    }
+  }
+}
+
+// 根据所需类型进行转码并返回下载地址
+function setEncoded(type, filename = "diagram", data) {
+  const encodedData = encodeURIComponent(data);
+  return {
+    filename: `${filename}.${type}`,
+    href: `data:application/${
+      type === "svg" ? "text/xml" : "bpmn20-xml"
+    };charset=UTF-8,${encodedData}`,
+    data: data,
+  };
+}
+
+// 加载本地文件
+function importLocalFile() {
+  // const that = this;
+  const file = refFile.value.files[0];
+  const reader = new FileReader();
+  reader.readAsText(file);
+  reader.onload = function () {
+    let xmlStr = this.result;
+    createNewDiagram(xmlStr);
+  };
+}
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+function downloadProcessAsXml() {
+  downloadProcess("xml");
+}
+function downloadProcessAsBpmn() {
+  downloadProcess("bpmn");
+}
+function downloadProcessAsSvg() {
+  downloadProcess("svg");
+}
+function processSimulation() {
+  simulationStatus.value = !simulationStatus.value;
+  simulation.value && bpmnModeler.get("toggleMode").toggleMode();
+}
+function processRedo() {
+  bpmnModeler.get("commandStack").redo();
+}
+function processUndo() {
+  bpmnModeler.get("commandStack").undo();
+}
+function processZoomIn(zoomStep = 0.1) {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
+  if (newZoom > 4) {
+    throw new Error(
+      "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get("canvas").zoom(defaultZoom.value);
+}
+function processZoomOut(zoomStep = 0.1) {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
+  if (newZoom < 0.2) {
+    throw new Error(
+      "[Process Designer Warn ]: The zoom ratio cannot be less than 0.2"
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get("canvas").zoom(defaultZoom.value);
+}
+function processZoomTo(newZoom = 1) {
+  if (newZoom < 0.2) {
+    throw new Error(
+      "[Process Designer Warn ]: The zoom ratio cannot be less than 0.2"
+    );
+  }
+  if (newZoom > 4) {
+    throw new Error(
+      "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get("canvas").zoom(newZoom);
+}
+function processReZoom() {
+  defaultZoom.value = 1;
+  bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
+}
+function processRestart() {
+  recoverable.value = false;
+  revocable.value = false;
+  createNewDiagram(null).then(() => bpmnModeler.get("canvas").zoom(1, "auto"));
+}
+function elementsAlign(align) {
+  const Align = bpmnModeler.get("alignElements");
+  const Selection = bpmnModeler.get("selection");
+  const SelectedElements = Selection.get();
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning("请按住 Ctrl 键选择多个元素对齐");
+    return;
+  }
+  ElMessageBox.confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => Align.trigger(SelectedElements, align));
+}
+/*----------------------------    方法结束     ---------------------------------*/
+function previewProcessXML() {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    previewResult.value = xml;
+    previewType.value = "xml";
+    previewModelVisible.value = true;
+  });
+}
+function previewProcessJson() {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    previewResult.value = convert.xml2json(xml, { spaces: 2 });
+    previewType.value = "json";
+    previewModelVisible.value = true;
+  });
+}
 </script>
+<style>
+@import "highlight.js/styles/atom-one-dark-reasonable.css";
+</style>
diff --git a/src/plugins/package/designer/plugins/extension-moddle/activiti/activitiExtension.js b/src/plugins/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
index cee2c94..077a9d5 100644
--- a/src/plugins/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
+++ b/src/plugins/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
@@ -95,4 +95,4 @@ ActivitiModdleExtension.prototype.canCloneProperty = function (
   }
 };
 
-module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension;
diff --git a/src/plugins/package/designer/plugins/extension-moddle/camunda/extension.js b/src/plugins/package/designer/plugins/extension-moddle/camunda/extension.js
index 16867dd..60a8207 100644
--- a/src/plugins/package/designer/plugins/extension-moddle/camunda/extension.js
+++ b/src/plugins/package/designer/plugins/extension-moddle/camunda/extension.js
@@ -108,7 +108,7 @@ CamundaModdleExtension.prototype.canHostIn = function (parent) {
   return true;
 };
 
-module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension;
 
 // helpers //////////
 
diff --git a/src/plugins/package/designer/plugins/extension-moddle/flowable/flowableExtension.js b/src/plugins/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
index 354d30a..663784b 100644
--- a/src/plugins/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
+++ b/src/plugins/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
@@ -94,4 +94,4 @@ FlowableModdleExtension.prototype.canCloneProperty = function (
   }
 };
 
-module.exports = FlowableModdleExtension;
+export default FlowableModdleExtension;
diff --git a/src/plugins/package/designer/test.vue b/src/plugins/package/designer/test.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/plugins/package/highlight/index.js b/src/plugins/package/highlight/index.js
index a084c4c..e047311 100644
--- a/src/plugins/package/highlight/index.js
+++ b/src/plugins/package/highlight/index.js
@@ -1,5 +1,5 @@
-const hljs = require("highlight.js/lib/core");
-hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
-hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
+// import hljs from "highlight.js/lib/core";
+// hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
+// hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
 
-export default hljs;
+// export default hljs;
diff --git a/src/plugins/package/penal/PropertiesPanel.vue b/src/plugins/package/penal/PropertiesPanel.vue
index e33c803..9a8f057 100644
--- a/src/plugins/package/penal/PropertiesPanel.vue
+++ b/src/plugins/package/penal/PropertiesPanel.vue
@@ -2,49 +2,100 @@
   <div class="process-panel__container" :style="{ width: `${this.width}px` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
-        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-info"></i>常规
+        </div>
+        <element-base-info
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
       </el-collapse-item>
-      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
+      <el-collapse-item
+        name="condition"
+        v-if="elementType === 'Process'"
+        key="message"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-comment"></i>消息与信号
+        </div>
         <signal-and-massage />
       </el-collapse-item>
-      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
-        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
+      <el-collapse-item
+        name="condition"
+        v-if="conditionFormVisible"
+        key="condition"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-promotion"></i>流转条件
+        </div>
+        <flow-condition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="formVisible" key="form">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-order"></i>表单
+        </div>
         <element-form :id="elementId" :type="elementType" />
       </el-collapse-item>
-      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
+      <el-collapse-item
+        name="task"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="task"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-claim"></i>任务
+        </div>
         <element-task :id="elementId" :type="elementType" />
       </el-collapse-item>
-      <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'" key="multiInstance">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
-        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+      <el-collapse-item
+        name="multiInstance"
+        v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
+        key="multiInstance"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-help"></i>多实例
+        </div>
+        <element-multi-instance
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
       </el-collapse-item>
       <el-collapse-item name="listeners" key="listeners">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-message-solid"></i>执行监听器
+        </div>
         <element-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
-      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
+      <el-collapse-item
+        name="taskListeners"
+        v-if="elementType === 'UserTask'"
+        key="taskListeners"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-message-solid"></i>任务监听器
+        </div>
         <user-task-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="extensions" key="extensions">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-circle-plus"></i>扩展属性
+        </div>
         <element-properties :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="other" key="other">
-        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-promotion"></i>其他
+        </div>
         <element-other-config :id="elementId" />
       </el-collapse-item>
     </el-collapse>
   </div>
 </template>
-<script>
+
+<script setup name="BpmnPropertiesPanel">
 import ElementBaseInfo from "./base/ElementBaseInfo";
 import ElementOtherConfig from "./other/ElementOtherConfig";
 import ElementTask from "./task/ElementTask";
@@ -55,139 +106,160 @@ import ElementListeners from "./listeners/ElementListeners";
 import ElementProperties from "./properties/ElementProperties";
 import ElementForm from "./form/ElementForm";
 import UserTaskListeners from "./listeners/UserTaskListeners";
-/**
- * 侧边栏
- * @Author MiyueFE
- * @Home https://github.com/miyuesc
- * @Date 2021年3月31日18:57:51
- */
-export default {
-  name: "BpmnPropertiesPanel",
-  components: {
-    UserTaskListeners,
-    ElementForm,
-    ElementProperties,
-    ElementListeners,
-    SignalAndMassage,
-    FlowCondition,
-    ElementMultiInstance,
-    ElementTask,
-    ElementOtherConfig,
-    ElementBaseInfo
+import { provide, toRefs, watch } from "vue";
+import useBpmnStore from "@/store/modules/bpmn";
+
+const props = defineProps({
+  bpmnModeler: Object,
+  prefix: {
+    type: String,
+    default: "camunda",
   },
-  componentName: "BpmnPropertiesPanel",
-  props: {
-    bpmnModeler: Object,
-    prefix: {
-      type: String,
-      default: "camunda"
-    },
-    width: {
-      type: Number,
-      default: 480
-    },
-    idEditDisabled: {
-      type: Boolean,
-      default: false
+  width: {
+    type: Number,
+    default: 480,
+  },
+  idEditDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { bpmnModeler, prefix, width, idEditDisabled } = toRefs(props);
+provide("prefix", prefix.value);
+provide("width", width.value);
+const bpmnStore = useBpmnStore();
+// const data = reactive({
+//   timer: undefined,
+// });
+// const { timer } = toRefs(data);
+
+const activeTab = ref("base");
+const elementId = ref("");
+const elementType = ref("");
+const elementBusinessObject = ref({}); // 元素 businessObject 镜像，提供给需要做判断的组件使用
+const conditionFormVisible = ref(false); // 流转条件设置
+const formVisible = ref(false); // 表单配置
+let timer;
+let bpmnElement;
+function initModels() {
+  // bpmnStore.count = 123;
+  console.log(bpmnModeler.value);
+  // 初始化 modeler 以及其他 moddle
+  if (!bpmnModeler.value) {
+    // 避免加载时 流程图 并未加载完成
+    timer = setTimeout(() => initModels(), 10);
+    return;
+  }
+  // console.log(timer);
+  if (timer) clearTimeout(timer);
+  // timer = null;
+  console.log(bpmnModeler.value);
+  // bpmnStore.bpmnInstances = {
+  //   test: bpmnModeler.value,
+  // };
+  // bpmnModeler.value.get = undefined;
+  // console.log(JSON.stringify(bpmnModeler.value));
+  // bpmnStore.setBpmnInstances({
+  //   modeler: { _container: bpmnModeler.value._container },
+  //   // modeling: bpmnModeler.value.get("modeling"),
+  //   // moddle: bpmnModeler.value.get("moddle"),
+  //   // eventBus: bpmnModeler.value.get("eventBus"),
+  //   // bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
+  //   // elementFactory: bpmnModeler.value.get("elementFactory"),
+  //   elementRegistry: {
+  //     _elements: bpmnModeler.value.get("elementRegistry")._elements,
+  //   },
+  //   // replace: bpmnModeler.value.get("replace"),
+  //   // selection: bpmnModeler.value.get("selection"),
+  // });
+  // bpmnStore.bpmnInstances =
+  // {
+  //   modeler: bpmnModeler.value,
+  //   modeling: bpmnModeler.value.get("modeling"),
+  //   moddle: bpmnModeler.value.get("moddle"),
+  //   eventBus: bpmnModeler.value.get("eventBus"),
+  //   bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
+  //   elementFactory: bpmnModeler.value.get("elementFactory"),
+  //   elementRegistry: bpmnModeler.value.get("elementRegistry"),
+  //   replace: bpmnModeler.value.get("replace"),
+  //   selection: bpmnModeler.value.get("selection"),
+  // };
+  console.log(bpmnStore.bpmnInstances, "167");
+  window.bpmnInstances = {
+    modeler: bpmnModeler.value,
+    modeling: bpmnModeler.value.get("modeling"),
+    moddle: bpmnModeler.value.get("moddle"),
+    eventBus: bpmnModeler.value.get("eventBus"),
+    bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
+    elementFactory: bpmnModeler.value.get("elementFactory"),
+    elementRegistry: bpmnModeler.value.get("elementRegistry"),
+    replace: bpmnModeler.value.get("replace"),
+    selection: bpmnModeler.value.get("selection"),
+  };
+  getActiveElement();
+}
+function getActiveElement() {
+  console.log("select first");
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null);
+  bpmnModeler.value.on("import.done", (e) => {
+    initFormOnChanged(null);
+  });
+  // 监听选择事件，修改当前激活的元素以及表单
+  bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
+    console.log("selection.changed");
+    initFormOnChanged(newSelection[0] || null);
+  });
+  bpmnModeler.value.on("element.changed", ({ element }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element);
     }
-  },
-  provide() {
-    return {
-      prefix: this.prefix,
-      width: this.width
-    };
-  },
-  data() {
-    return {
-      activeTab: "base",
-      elementId: "",
-      elementType: "",
-      elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
-      conditionFormVisible: false, // 流转条件设置
-      formVisible: false // 表单配置
-    };
-  },
-  watch: {
-    elementId: {
-      handler() {
-        this.activeTab = "base";
-      }
-    }
-  },
-  created() {
-    this.initModels();
-  },
-  methods: {
-    initModels() {
-      // 初始化 modeler 以及其他 moddle
-      if (!this.bpmnModeler) {
-        // 避免加载时 流程图 并未加载完成
-        this.timer = setTimeout(() => this.initModels(), 10);
-        return;
-      }
-      if (this.timer) clearTimeout(this.timer);
-      window.bpmnInstances = {
-        modeler: this.bpmnModeler,
-        modeling: this.bpmnModeler.get("modeling"),
-        moddle: this.bpmnModeler.get("moddle"),
-        eventBus: this.bpmnModeler.get("eventBus"),
-        bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
-        elementFactory: this.bpmnModeler.get("elementFactory"),
-        elementRegistry: this.bpmnModeler.get("elementRegistry"),
-        replace: this.bpmnModeler.get("replace"),
-        selection: this.bpmnModeler.get("selection")
-      };
-      this.getActiveElement();
-    },
-    getActiveElement() {
-      // 初始第一个选中元素 bpmn:Process
-      this.initFormOnChanged(null);
-      this.bpmnModeler.on("import.done", e => {
-        this.initFormOnChanged(null);
-      });
-      // 监听选择事件，修改当前激活的元素以及表单
-      this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
-        this.initFormOnChanged(newSelection[0] || null);
-      });
-      this.bpmnModeler.on("element.changed", ({ element }) => {
-        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
-        if (element && element.id === this.elementId) {
-          this.initFormOnChanged(element);
-        }
-      });
-    },
-    // 初始化数据
-    initFormOnChanged(element) {
-      let activatedElement = element;
-      if (!activatedElement) {
-        activatedElement =
-          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
-          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
-      }
-      if (!activatedElement) return;
-      console.log(`
+  });
+}
+// 初始化数据
+function initFormOnChanged(element) {
+  let activatedElement = element;
+  if (!activatedElement) {
+    activatedElement =
+      window.bpmnInstances.elementRegistry.find(
+        (el) => el.type === "bpmn:Process"
+      ) ??
+      window.bpmnInstances.elementRegistry.find(
+        (el) => el.type === "bpmn:Collaboration"
+      );
+  }
+  if (!activatedElement) return;
+  console.log(`
               ----------
       select element changed:
                 id:  ${activatedElement.id}
               type:  ${activatedElement.businessObject.$type}
               ----------
               `);
-      console.log("businessObject: ", activatedElement.businessObject);
-      window.bpmnInstances.bpmnElement = activatedElement;
-      this.bpmnElement = activatedElement;
-      this.elementId = activatedElement.id;
-      this.elementType = activatedElement.type.split(":")[1] || "";
-      this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
-      this.conditionFormVisible = !!(
-        this.elementType === "SequenceFlow" &&
-        activatedElement.source &&
-        activatedElement.source.type.indexOf("StartEvent") === -1
-      );
-      this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
-    },
-    beforeDestroy() {
-      window.bpmnInstances = null;
-    }
-  }
-};
+  console.log("businessObject: ", activatedElement.businessObject);
+  window.bpmnInstances.bpmnElement = activatedElement;
+  bpmnElement = activatedElement;
+  elementId.value = activatedElement.id;
+  elementType.value = activatedElement.type.split(":")[1] || "";
+  elementBusinessObject.value = JSON.parse(
+    JSON.stringify(activatedElement.businessObject)
+  );
+  conditionFormVisible.value = !!(
+    elementType.value === "SequenceFlow" &&
+    activatedElement.source &&
+    activatedElement.source.type.indexOf("StartEvent") === -1
+  );
+  formVisible.value =
+    elementType.value === "UserTask" || elementType.value === "StartEvent";
+}
+function beforeDestroy() {
+  window.bpmnInstances = null;
+}
+
+watch(elementId, (val) => {
+  activeTab.value = "base";
+});
+initModels();
 </script>
diff --git a/src/plugins/package/penal/base/ElementBaseInfo.vue b/src/plugins/package/penal/base/ElementBaseInfo.vue
index 303d59d..8a93e3f 100644
--- a/src/plugins/package/penal/base/ElementBaseInfo.vue
+++ b/src/plugins/package/penal/base/ElementBaseInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" @submit.native.prevent>
+    <el-form size="small" label-width="90px" @submit.native.prevent>
       <el-form-item label="ID">
         <el-input
           v-model="elementBaseInfo.id"
@@ -10,67 +10,83 @@
         />
       </el-form-item>
       <el-form-item label="名称">
-        <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+        <el-input
+          v-model="elementBaseInfo.name"
+          clearable
+          @change="updateBaseInfo('name')"
+        />
       </el-form-item>
       <!--流程的基础属性-->
       <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
         <el-form-item label="版本标签">
-          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
+          <el-input
+            v-model="elementBaseInfo.versionTag"
+            clearable
+            @change="updateBaseInfo('versionTag')"
+          />
         </el-form-item>
         <el-form-item label="可执行">
-          <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
+          <el-switch
+            v-model="elementBaseInfo.isExecutable"
+            active-text="是"
+            inactive-text="否"
+            @change="updateBaseInfo('isExecutable')"
+          />
         </el-form-item>
       </template>
     </el-form>
   </div>
 </template>
-<script>
 
-export default {
-  name: "ElementBaseInfo",
-  props: {
-    businessObject: Object,
-    type: String,
-    idEditDisabled: {
-      type: Boolean,
-      default: true
+<script setup name="ElementBaseInfo">
+import { nextTick, onBeforeUnmount, toRefs } from "vue";
+import useBpmnStore from "@/store/modules/bpmn";
+const bpmnStore = useBpmnStore();
+const props = defineProps({
+  businessObject: Object,
+  type: String,
+  idEditDisabled: {
+    type: Boolean,
+    default: true,
+  },
+});
+const { businessObject, type, idEditDisabled } = toRefs(props);
+const data = reactive({
+  elementBaseInfo: {},
+  bpmnElement: undefined,
+});
+const { elementBaseInfo, bpmnElement } = toRefs(data);
+watch(
+  businessObject,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        resetBaseInfo();
+      });
     }
   },
-  data() {
-    return {
-      elementBaseInfo: {},
-    };
-  },
-  watch: {
-    businessObject: {
-      immediate: false,
-      handler: function(val) {
-        if (val) {
-          this.$nextTick(() => this.resetBaseInfo());
-        }
-      }
-    }
-  },
-  methods: {
-    resetBaseInfo() {
-      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
-      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
-    },
-    updateBaseInfo(key) {
-      const attrObj = Object.create(null);
-      attrObj[key] = this.elementBaseInfo[key];
-      if (key === "id") {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-          id: this.elementBaseInfo[key],
-          di: { id: `${this.elementBaseInfo[key]}_di` }
-        });
-      } else {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
-      }
-    }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  { immediate: false }
+);
+
+function resetBaseInfo() {
+  bpmnElement.value = window?.bpmnInstances?.bpmnElement;
+  elementBaseInfo.value = JSON.parse(
+    JSON.stringify(bpmnElement.value.businessObject)
+  );
+}
+function updateBaseInfo(key) {
+  const attrObj = Object.create(null);
+  attrObj[key] = elementBaseInfo.value[key];
+  if (key === "id") {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` },
+    });
+  } else {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
   }
-};
+}
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
 </script>
diff --git a/src/plugins/package/penal/flow-condition/FlowCondition.vue b/src/plugins/package/penal/flow-condition/FlowCondition.vue
index 94cf823..db6a107 100644
--- a/src/plugins/package/penal/flow-condition/FlowCondition.vue
+++ b/src/plugins/package/penal/flow-condition/FlowCondition.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
+    <el-form :model="flowConditionForm" label-width="90px" size="small" @submit.native.prevent>
       <el-form-item label="流转类型">
         <el-select v-model="flowConditionForm.type" @change="updateFlowType">
           <el-option label="普通流转路径" value="normal" />
diff --git a/src/plugins/package/penal/form/ElementForm.vue b/src/plugins/package/penal/form/ElementForm.vue
index be4d1fc..106aee1 100644
--- a/src/plugins/package/penal/form/ElementForm.vue
+++ b/src/plugins/package/penal/form/ElementForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="80px" @submit.native.prevent>
+    <el-form size="small" label-width="80px" @submit.native.prevent>
       <el-form-item label="表单" prop="formKey">
         <el-select
           v-model="formKey"
@@ -30,27 +30,27 @@
     <!--字段列表-->
     <!--    <div class="element-property list-property">-->
     <!--      <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
-    <!--      <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
+    <!--      <el-table :data="fieldList" size="small" max-height="240" border fit>-->
     <!--        <el-table-column label="序号" type="index" width="50px" />-->
     <!--        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
     <!--        <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
     <!--        <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
     <!--        <el-table-column label="操作" width="90px">-->
     <!--          <template slot-scope="{ row, $index }">-->
-    <!--            <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
+    <!--            <el-button size="small" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
     <!--            <el-divider direction="vertical" />-->
-    <!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
+    <!--            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
     <!--          </template>-->
     <!--        </el-table-column>-->
     <!--      </el-table>-->
     <!--    </div>-->
     <!--    <div class="element-drawer__button">-->
-    <!--      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
+    <!--      <el-button size="small" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
     <!--    </div>-->
 
     <!--字段配置侧边栏-->
-    <!--    <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
-    <!--      <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>-->
+    <!--    <el-drawer v-model="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
+    <!--      <el-form :model="formFieldForm" label-width="90px" size="small" @submit.native.prevent>-->
     <!--        <el-form-item label="字段ID">-->
     <!--          <el-input v-model="formFieldForm.id" clearable />-->
     <!--        </el-form-item>-->
@@ -78,17 +78,17 @@
     <!--        <el-divider key="enum-divider" />-->
     <!--        <p class="listener-filed__title" key="enum-title">-->
     <!--          <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
-    <!--          <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
+    <!--          <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
     <!--        </p>-->
-    <!--        <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>-->
+    <!--        <el-table :data="fieldEnumList" size="small" key="enum-table" max-height="240" border fit>-->
     <!--          <el-table-column label="序号" width="50px" type="index" />-->
     <!--          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
     <!--          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
     <!--          <el-table-column label="操作" width="90px">-->
     <!--            <template slot-scope="{ row, $index }">-->
-    <!--              <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
+    <!--              <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
     <!--              <el-divider direction="vertical" />-->
-    <!--              <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
+    <!--              <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
     <!--            </template>-->
     <!--          </el-table-column>-->
     <!--        </el-table>-->
@@ -98,17 +98,17 @@
     <!--      <el-divider key="validation-divider" />-->
     <!--      <p class="listener-filed__title" key="validation-title">-->
     <!--        <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
-    <!--        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
+    <!--        <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
     <!--      </p>-->
-    <!--      <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>-->
+    <!--      <el-table :data="fieldConstraintsList" size="small" key="validation-table" max-height="240" border fit>-->
     <!--        <el-table-column label="序号" width="50px" type="index" />-->
     <!--        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
     <!--        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
     <!--        <el-table-column label="操作" width="90px">-->
     <!--          <template slot-scope="{ row, $index }">-->
-    <!--            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
+    <!--            <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
     <!--            <el-divider direction="vertical" />-->
-    <!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
+    <!--            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
     <!--          </template>-->
     <!--        </el-table-column>-->
     <!--      </el-table>-->
@@ -117,30 +117,30 @@
     <!--      <el-divider key="property-divider" />-->
     <!--      <p class="listener-filed__title" key="property-title">-->
     <!--        <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
-    <!--        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
+    <!--        <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
     <!--      </p>-->
-    <!--      <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>-->
+    <!--      <el-table :data="fieldPropertiesList" size="small" key="property-table" max-height="240" border fit>-->
     <!--        <el-table-column label="序号" width="50px" type="index" />-->
     <!--        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
     <!--        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
     <!--        <el-table-column label="操作" width="90px">-->
     <!--          <template slot-scope="{ row, $index }">-->
-    <!--            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
+    <!--            <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
     <!--            <el-divider direction="vertical" />-->
-    <!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
+    <!--            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
     <!--          </template>-->
     <!--        </el-table-column>-->
     <!--      </el-table>-->
 
     <!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
     <!--      <div class="element-drawer__button">-->
-    <!--        <el-button size="mini">取 消</el-button>-->
-    <!--        <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
+    <!--        <el-button size="small">取 消</el-button>-->
+    <!--        <el-button size="small" type="primary" @click="saveField">保 存</el-button>-->
     <!--      </div>-->
     <!--    </el-drawer>-->
 
     <el-dialog
-      :visible.sync="fieldOptionModelVisible"
+     v-model="fieldOptionModelVisible"
       :title="optionModelTitle"
       width="600px"
       append-to-body
@@ -148,7 +148,7 @@
     >
       <el-form
         :model="fieldOptionForm"
-        size="mini"
+        size="small"
         label-width="96px"
         @submit.native.prevent
       >
@@ -182,10 +182,10 @@
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" @click="fieldOptionModelVisible = false"
+        <el-button size="small" @click="fieldOptionModelVisible = false"
           >取 消</el-button
         >
-        <el-button size="mini" type="primary" @click="saveFieldOption"
+        <el-button size="small" type="primary" @click="saveFieldOption"
           >确 定</el-button
         >
       </template>
diff --git a/src/plugins/package/penal/listeners/ElementListeners.vue b/src/plugins/package/penal/listeners/ElementListeners.vue
index 16f5099..80285f2 100644
--- a/src/plugins/package/penal/listeners/ElementListeners.vue
+++ b/src/plugins/package/penal/listeners/ElementListeners.vue
@@ -1,33 +1,80 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="事件类型" min-width="100px" prop="event" />
-      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column
+        label="监听器类型"
+        min-width="100px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerTypeObject[row.listenerType]"
+      />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-button
+            size="small"
+            type="text"
+            @click="openListenerForm(row, $index)"
+            >编辑</el-button
+          >
           <el-divider direction="vertical" />
-          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+          <el-button
+            size="small"
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeListener(row, $index)"
+            >移除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+      <el-button
+        size="small"
+        type="primary"
+        icon="el-icon-plus"
+        @click="openListenerForm(null)"
+        >添加监听器</el-button
+      >
     </div>
 
     <!-- 监听器 编辑/创建 部分 -->
-    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
-      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
-        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="执行监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        size="small"
+        :model="listenerForm"
+        label-width="96px"
+        ref="listenerFormRef"
+        @submit.native.prevent
+      >
+        <el-form-item
+          label="事件类型"
+          prop="event"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-select v-model="listenerForm.event">
             <el-option label="start" value="start" />
             <el-option label="end" value="end" />
           </el-select>
         </el-form-item>
-        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+        <el-form-item
+          label="监听器类型"
+          prop="listenerType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-select v-model="listenerForm.listenerType">
-            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+            <el-option
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :label="listenerTypeObject[i]"
+              :value="i"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -62,7 +109,11 @@
             label="脚本格式"
             prop="scriptFormat"
             key="listener-script-format"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写脚本格式',
+            }"
           >
             <el-input v-model="listenerForm.scriptFormat" clearable />
           </el-form-item>
@@ -70,7 +121,11 @@
             label="脚本类型"
             prop="scriptType"
             key="listener-script-type"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请选择脚本类型',
+            }"
           >
             <el-select v-model="listenerForm.scriptType">
               <el-option label="内联脚本" value="inlineScript" />
@@ -82,7 +137,11 @@
             label="脚本内容"
             prop="value"
             key="listener-script"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写脚本内容',
+            }"
           >
             <el-input v-model="listenerForm.value" clearable />
           </el-form-item>
@@ -91,7 +150,11 @@
             label="资源地址"
             prop="resource"
             key="listener-resource"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写资源地址',
+            }"
           >
             <el-input v-model="listenerForm.resource" clearable />
           </el-form-item>
@@ -100,37 +163,100 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><i class="el-icon-menu"></i>注入字段：</span>
-        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="openListenerFieldForm(null)"
+          >添加字段</el-button
+        >
       </p>
-      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+      <el-table
+        :data="fieldsListOfListener"
+        size="small"
+        max-height="240"
+        border
+        fit
+        style="flex: none"
+      >
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="字段名称" min-width="100px" prop="name" />
-        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
-        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column
+          label="字段类型"
+          min-width="80px"
+          show-overflow-tooltip
+          :formatter="(row) => fieldTypeObject[row.fieldType]"
+        />
+        <el-table-column
+          label="字段值/表达式"
+          min-width="100px"
+          show-overflow-tooltip
+          :formatter="(row) => row.string || row.expression"
+        />
         <el-table-column label="操作" width="100px">
           <template slot-scope="{ row, $index }">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-button
+              size="small"
+              type="text"
+              @click="openListenerFieldForm(row, $index)"
+              >编辑</el-button
+            >
             <el-divider direction="vertical" />
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+            <el-button
+              size="small"
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeListenerField(row, $index)"
+              >移除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
 
       <div class="element-drawer__button">
-        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button size="small" @click="listenerFormModelVisible = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="saveListenerConfig"
+          >保 存</el-button
+        >
       </div>
     </el-drawer>
 
     <!-- 注入西段 编辑/创建 部分 -->
-    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
-      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
-        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+    <el-dialog
+      title="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        size="small"
+        label-width="96px"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+        @submit.native.prevent
+      >
+        <el-form-item
+          label="字段名称："
+          prop="name"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-input v-model="listenerFieldForm.name" clearable />
         </el-form-item>
-        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+        <el-form-item
+          label="字段类型："
+          prop="fieldType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-select v-model="listenerFieldForm.fieldType">
-            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+            <el-option
+              v-for="i in Object.keys(fieldTypeObject)"
+              :key="i"
+              :label="fieldTypeObject[i]"
+              :value="i"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -153,144 +279,183 @@
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="saveListenerFiled"
+          >确 定</el-button
+        >
       </template>
     </el-dialog>
   </div>
 </template>
-<script>
-import { createListenerObject, updateElementExtensions } from "../../utils";
-import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
 
-export default {
-  name: "ElementListeners",
-  props: {
-    id: String,
-    type: String
-  },
-  inject: {
-    prefix: "prefix",
-    width: "width"
-  },
-  data() {
-    return {
-      elementListenersList: [], // 监听器列表
-      listenerForm: {}, // 监听器详情表单
-      listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
-      fieldsListOfListener: [],
-      listenerFieldForm: {}, // 监听器 注入字段 详情表单
-      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
-      editingListenerIndex: -1, // 监听器所在下标，-1 为新增
-      editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
-      listenerTypeObject: listenerType,
-      fieldTypeObject: fieldType
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler(val) {
-        val && val.length && this.$nextTick(() => this.resetListenersList());
-      }
-    }
-  },
-  methods: {
-    resetListenersList() {
-      this.bpmnElement = window.bpmnInstances.bpmnElement;
-      this.otherExtensionList = [];
-      this.bpmnElementListeners =
-        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
-      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
-    },
-    // 打开 监听器详情 侧边栏
-    openListenerForm(listener, index) {
-      if (listener) {
-        this.listenerForm = initListenerForm(listener);
-        this.editingListenerIndex = index;
-      } else {
-        this.listenerForm = {};
-        this.editingListenerIndex = -1; // 标记为新增
-      }
-      if (listener && listener.fields) {
-        this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
-      } else {
-        this.fieldsListOfListener = [];
-        this.$set(this.listenerForm, "fields", []);
-      }
-      // 打开侧边栏并清楚验证状态
-      this.listenerFormModelVisible = true;
-      this.$nextTick(() => {
-        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
-      });
-    },
-    // 打开监听器字段编辑弹窗
-    openListenerFieldForm(field, index) {
-      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
-      this.editingListenerFieldIndex = field ? index : -1;
-      this.listenerFieldFormModelVisible = true;
-      this.$nextTick(() => {
-        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
-      });
-    },
-    // 保存监听器注入字段
-    async saveListenerFiled() {
-      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
-      if (!validateStatus) return; // 验证不通过直接返回
-      if (this.editingListenerFieldIndex === -1) {
-        this.fieldsListOfListener.push(this.listenerFieldForm);
-        this.listenerForm.fields.push(this.listenerFieldForm);
-      } else {
-        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
-        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
-      }
-      this.listenerFieldFormModelVisible = false;
-      this.$nextTick(() => (this.listenerFieldForm = {}));
-    },
-    // 移除监听器字段
-    removeListenerField(field, index) {
-      this.$confirm("确认移除该字段吗？", "提示", {
-        confirmButtonText: "确 认",
-        cancelButtonText: "取 消"
-      })
-        .then(() => {
-          this.fieldsListOfListener.splice(index, 1);
-          this.listenerForm.fields.splice(index, 1);
-        })
-        .catch(() => console.info("操作取消"));
-    },
-    // 移除监听器
-    removeListener(listener, index) {
-      this.$confirm("确认移除该监听器吗？", "提示", {
-        confirmButtonText: "确 认",
-        cancelButtonText: "取 消"
-      })
-        .then(() => {
-          this.bpmnElementListeners.splice(index, 1);
-          this.elementListenersList.splice(index, 1);
-          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
-        })
-        .catch(() => console.info("操作取消"));
-    },
-    // 保存监听器配置
-    async saveListenerConfig() {
-      let validateStatus = await this.$refs["listenerFormRef"].validate();
-      if (!validateStatus) return; // 验证不通过直接返回
-      const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
-      if (this.editingListenerIndex === -1) {
-        this.bpmnElementListeners.push(listenerObject);
-        this.elementListenersList.push(this.listenerForm);
-      } else {
-        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
-        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
-      }
-      // 保存其他配置
-      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
-      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
-      // 4. 隐藏侧边栏
-      this.listenerFormModelVisible = false;
-      this.listenerForm = {};
-    }
+<script setup name="ElementListeners">
+import { ElMessageBox } from "element-plus";
+import { toRefs } from "vue";
+import { createListenerObject, updateElementExtensions } from "../../utils";
+import {
+  initListenerType,
+  initListenerForm,
+  listenerType,
+  fieldType,
+} from "./utilSelf";
+const props = defineProps({
+  id: String,
+  type: String,
+});
+const { id, type } = toRefs(props);
+const data = reactive({
+  listenerForm: {}, // 监听器详情表单
+  listenerFieldForm: {}, // 监听器 注入字段 详情表单
+});
+let bpmnElement;
+let otherExtensionList;
+let bpmnElementListeners;
+const { listenerForm, listenerFieldForm } = toRefs(data);
+const listenerFormRef = ref();
+const listenerFieldFormRef = ref();
+const elementListenersList = ref([]); // 监听器列表
+// const listenerForm = ref({});
+const listenerFormModelVisible = ref(false); // 监听器 编辑 侧边栏显示状态
+const fieldsListOfListener = ref([]);
+// const listenerFieldForm = ref({});
+const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType);
+const fieldTypeObject = ref(fieldType);
+const prefix = inject("prefix");
+const width = inject("width");
+watch(id, (val) => {
+  val && val.length && nextTick(() => resetListenersList());
+});
+
+function resetListenersList() {
+  bpmnElement = window.bpmnInstances.bpmnElement;
+  otherExtensionList = [];
+  bpmnElementListeners =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix.value}:ExecutionListener`
+    ) ?? [];
+  elementListenersList.value = bpmnElementListeners.map((listener) =>
+    initListenerType(listener)
+  );
+}
+// 打开 监听器详情 侧边栏
+function openListenerForm(listener, index) {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener);
+    editingListenerIndex.value = index;
+  } else {
+    listenerForm.value = {};
+    editingListenerIndex.value = -1; // 标记为新增
   }
-};
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? "string" : "expression",
+    }));
+  } else {
+    fieldsListOfListener.value = [];
+    listenerForm.value.fields = [];
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true;
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate();
+  });
+}
+// 打开监听器字段编辑弹窗
+function openListenerFieldForm(field, index) {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  listenerFieldFormModelVisible.value = true;
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
+  });
+}
+// 保存监听器注入字段
+async function saveListenerFiled() {
+  let validateStatus = await listenerFieldFormRef.value.validate();
+  if (!validateStatus) return; // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value);
+    listenerForm.value.fields.push(listenerFieldForm.value);
+  } else {
+    fieldsListOfListener.value.splice(
+      editingListenerFieldIndex.value,
+      1,
+      listenerFieldForm.value
+    );
+    listenerForm.value.fields.splice(
+      editingListenerFieldIndex.value,
+      1,
+      listenerFieldForm.value
+    );
+  }
+  listenerFieldFormModelVisible.value = false;
+  nextTick(() => (listenerFieldForm.value = {}));
+}
+// 移除监听器字段
+function removeListenerField(field, index) {
+  ElMessageBox.confirm("确认移除该字段吗？", "提示", {
+    confirmButtonText: "确 认",
+    cancelButtonText: "取 消",
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1);
+      listenerForm.value.fields.splice(index, 1);
+    })
+    .catch(() => console.info("操作取消"));
+}
+// 移除监听器
+function removeListener(listener, index) {
+  ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
+    confirmButtonText: "确 认",
+    cancelButtonText: "取 消",
+  })
+    .then(() => {
+      bpmnElementListeners.splice(index, 1);
+      elementListenersList.value.splice(index, 1);
+      updateElementExtensions(
+        bpmnElement,
+        otherExtensionList.concat(bpmnElementListeners)
+      );
+    })
+    .catch(() => console.info("操作取消"));
+}
+// 保存监听器配置
+async function saveListenerConfig() {
+  let validateStatus = await listenerFormRef.value.validate();
+  if (!validateStatus) return; // 验证不通过直接返回
+  const listenerObject = createListenerObject(
+    listenerForm.value,
+    false,
+    prefix.value
+  );
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.push(listenerObject);
+    elementListenersList.value.push(listenerForm.value);
+  } else {
+    bpmnElementListeners.splice(editingListenerIndex.value, 1, listenerObject);
+    elementListenersList.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerForm.value
+    );
+  }
+  // 保存其他配置
+  otherExtensionList =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix.value}:ExecutionListener`
+    ) ?? [];
+  updateElementExtensions(
+    bpmnElement,
+    otherExtensionList.concat(bpmnElementListeners)
+  );
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false;
+  listenerForm.value = {};
+}
 </script>
diff --git a/src/plugins/package/penal/listeners/UserTaskListeners.vue b/src/plugins/package/penal/listeners/UserTaskListeners.vue
index b71e868..4b02b36 100644
--- a/src/plugins/package/penal/listeners/UserTaskListeners.vue
+++ b/src/plugins/package/penal/listeners/UserTaskListeners.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
       <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
       <el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
           <el-divider direction="vertical" />
-          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+      <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
     </div>
 
     <!-- 监听器 编辑/创建 部分 -->
-    <el-drawer :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
-      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+    <el-drawer v-model="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
         <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
           <el-select v-model="listenerForm.event">
             <el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
@@ -124,31 +124,31 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><i class="el-icon-menu"></i>注入字段：</span>
-        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
       </p>
-      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="字段名称" min-width="100px" prop="name" />
         <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
         <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
         <el-table-column label="操作" width="100px">
           <template slot-scope="{ row, $index }">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
             <el-divider direction="vertical" />
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="element-drawer__button">
-        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
 
     <!-- 注入西段 编辑/创建 部分 -->
-    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
-      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+    <el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
         <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
           <el-input v-model="listenerFieldForm.name" clearable />
         </el-form-item>
@@ -177,8 +177,8 @@
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/src/plugins/package/penal/listeners/template.js b/src/plugins/package/penal/listeners/template.js
index 455b70d..5bc8ec7 100644
--- a/src/plugins/package/penal/listeners/template.js
+++ b/src/plugins/package/penal/listeners/template.js
@@ -1,25 +1,25 @@
 export const template = isTaskListener => {
   return `
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="事件类型" min-width="100px" prop="event" />
       <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
           <el-divider direction="vertical" />
-          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+      <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
     </div>
 
     <!-- 监听器 编辑/创建 部分 -->
-    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
-      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+    <el-drawer v-model="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
         <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
           <el-select v-model="listenerForm.event">
             <el-option label="start" value="start" />
@@ -116,31 +116,31 @@ export const template = isTaskListener => {
       <el-divider />
       <p class="listener-filed__title">
         <span><i class="el-icon-menu"></i>注入字段：</span>
-        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
       </p>
-      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="字段名称" min-width="100px" prop="name" />
         <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
         <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
         <el-table-column label="操作" width="100px">
           <template slot-scope="{ row, $index }">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
             <el-divider direction="vertical" />
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="element-drawer__button">
-        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
 
     <!-- 注入西段 编辑/创建 部分 -->
-    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
-      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+    <el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
         <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
           <el-input v-model="listenerFieldForm.name" clearable />
         </el-form-item>
@@ -169,8 +169,8 @@ export const template = isTaskListener => {
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/src/plugins/package/penal/multi-instance/ElementMultiInstance.vue b/src/plugins/package/penal/multi-instance/ElementMultiInstance.vue
index 7d57f50..5fbf585 100644
--- a/src/plugins/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/src/plugins/package/penal/multi-instance/ElementMultiInstance.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" @submit.native.prevent>
+    <el-form size="small" label-width="90px" @submit.native.prevent>
       <el-form-item label="回路特性">
         <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
           <!--bpmn:MultiInstanceLoopCharacteristics-->
diff --git a/src/plugins/package/penal/other/ElementOtherConfig.vue b/src/plugins/package/penal/other/ElementOtherConfig.vue
index a4427b2..868ee89 100644
--- a/src/plugins/package/penal/other/ElementOtherConfig.vue
+++ b/src/plugins/package/penal/other/ElementOtherConfig.vue
@@ -6,7 +6,7 @@
         <el-input
           type="textarea"
           v-model="documentation"
-          size="mini"
+          size="small"
           resize="vertical"
           :autosize="{ minRows: 2, maxRows: 4 }"
           @input="updateDocumentation"
diff --git a/src/plugins/package/penal/properties/ElementProperties.vue b/src/plugins/package/penal/properties/ElementProperties.vue
index edd9a36..c0df1e1 100644
--- a/src/plugins/package/penal/properties/ElementProperties.vue
+++ b/src/plugins/package/penal/properties/ElementProperties.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
+    <el-table :data="elementPropertyList" size="small" max-height="240" border fit>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
       <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
+          <el-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
           <el-divider direction="vertical" />
-          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
+          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
+      <el-button size="small" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
     </div>
 
-    <el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
-      <el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>
+    <el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
+      <el-form :model="propertyForm" label-width="80px" size="small" ref="attributeFormRef" @submit.native.prevent>
         <el-form-item label="属性名：" prop="name">
           <el-input v-model="propertyForm.name" clearable />
         </el-form-item>
@@ -26,8 +26,8 @@
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
+        <el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/src/plugins/package/penal/signal-message/SignalAndMessage.vue b/src/plugins/package/penal/signal-message/SignalAndMessage.vue
index 7ea59f6..53d3158 100644
--- a/src/plugins/package/penal/signal-message/SignalAndMessage.vue
+++ b/src/plugins/package/penal/signal-message/SignalAndMessage.vue
@@ -1,26 +1,79 @@
 <template>
   <div class="panel-tab__content">
     <div class="panel-tab__content--title">
-      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
+      <span
+        ><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i
+        >消息列表</span
+      >
+      <el-button
+        size="small"
+        type="primary"
+        icon="el-icon-plus"
+        @click="openModel('message')"
+        >创建新消息</el-button
+      >
     </div>
-    <el-table :data="messageList" size="mini" border>
+    <el-table :data="messageList" size="small" border>
       <el-table-column type="index" label="序号" width="60px" />
-      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
-      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
+      <el-table-column
+        label="消息ID"
+        prop="id"
+        max-width="300px"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="消息名称"
+        prop="name"
+        max-width="300px"
+        show-overflow-tooltip
+      />
     </el-table>
-    <div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
-      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
+    <div
+      class="panel-tab__content--title"
+      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
+    >
+      <span
+        ><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i
+        >信号列表</span
+      >
+      <el-button
+        size="small"
+        type="primary"
+        icon="el-icon-plus"
+        @click="openModel('signal')"
+        >创建新信号</el-button
+      >
     </div>
-    <el-table :data="signalList" size="mini" border>
+    <el-table :data="signalList" size="small" border>
       <el-table-column type="index" label="序号" width="60px" />
-      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
-      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
+      <el-table-column
+        label="信号ID"
+        prop="id"
+        max-width="300px"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="信号名称"
+        prop="name"
+        max-width="300px"
+        show-overflow-tooltip
+      />
     </el-table>
 
-    <el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
-      <el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
+    <el-dialog
+      v-model="modelVisible"
+      :title="modelConfig.title"
+      :close-on-click-modal="false"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="modelObjectForm"
+        size="small"
+        label-width="90px"
+        @submit.native.prevent
+      >
         <el-form-item :label="modelConfig.idLabel">
           <el-input v-model="modelObjectForm.id" clearable />
         </el-form-item>
@@ -29,8 +82,10 @@
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" @click="modelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
+        <el-button size="small" @click="modelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="addNewObject"
+          >保 存</el-button
+        >
       </template>
     </el-dialog>
   </div>
@@ -44,7 +99,7 @@ export default {
       messageList: [],
       modelVisible: false,
       modelType: "",
-      modelObjectForm: {}
+      modelObjectForm: {},
     };
   },
   computed: {
@@ -54,19 +109,20 @@ export default {
       } else {
         return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
       }
-    }
+    },
   },
   mounted() {
     this.initDataList();
   },
   methods: {
     initDataList() {
-      this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+      this.rootElements =
+        window.bpmnInstances.modeler.getDefinitions().rootElements;
       this.messageIdMap = {};
       this.signalIdMap = {};
       this.messageList = [];
       this.signalList = [];
-      this.rootElements.forEach(el => {
+      this.rootElements.forEach((el) => {
         if (el.$type === "bpmn:Message") {
           this.messageIdMap[el.id] = true;
           this.messageList.push({ ...el });
@@ -85,20 +141,26 @@ export default {
     addNewObject() {
       if (this.modelType === "message") {
         if (this.messageIdMap[this.modelObjectForm.id]) {
-          return this.$message.error("该消息已存在，请修改id后重新保存");
+          return ElMessage.error("该消息已存在，请修改id后重新保存");
         }
-        const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
+        const messageRef = window.bpmnInstances.moddle.create(
+          "bpmn:Message",
+          this.modelObjectForm
+        );
         this.rootElements.push(messageRef);
       } else {
         if (this.signalIdMap[this.modelObjectForm.id]) {
           return this.$message.error("该信号已存在，请修改id后重新保存");
         }
-        const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
+        const signalRef = window.bpmnInstances.moddle.create(
+          "bpmn:Signal",
+          this.modelObjectForm
+        );
         this.rootElements.push(signalRef);
       }
       this.modelVisible = false;
       this.initDataList();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/plugins/package/penal/task/ElementTask.vue b/src/plugins/package/penal/task/ElementTask.vue
index d1ba668..3ce9a34 100644
--- a/src/plugins/package/penal/task/ElementTask.vue
+++ b/src/plugins/package/penal/task/ElementTask.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" @submit.native.prevent>
+    <el-form size="small" label-width="90px" @submit.native.prevent>
 <!--      <el-form-item label="异步延续">-->
 <!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
 <!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
diff --git a/src/plugins/package/penal/task/task-components/ReceiveTask.vue b/src/plugins/package/penal/task/task-components/ReceiveTask.vue
index 282f238..c8d8195 100644
--- a/src/plugins/package/penal/task/task-components/ReceiveTask.vue
+++ b/src/plugins/package/penal/task/task-components/ReceiveTask.vue
@@ -5,11 +5,11 @@
         <el-select v-model="bindMessageId" @change="updateTaskMessage">
           <el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
         </el-select>
-        <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
+        <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
       </div>
     </el-form-item>
-    <el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
-      <el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
+    <el-dialog v-model="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
+      <el-form :model="newMessageForm" size="small" label-width="90px" @submit.native.prevent>
         <el-form-item label="消息ID">
           <el-input v-model="newMessageForm.id" clearable />
         </el-form-item>
@@ -18,7 +18,7 @@
         </el-form-item>
       </el-form>
       <template slot="footer">
-        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
+        <el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/src/plugins/package/penal/task/task-components/UserTask.vue b/src/plugins/package/penal/task/task-components/UserTask.vue
index 0e92653..82aff31 100644
--- a/src/plugins/package/penal/task/task-components/UserTask.vue
+++ b/src/plugins/package/penal/task/task-components/UserTask.vue
@@ -15,11 +15,11 @@
           {{userText}}
         </el-tag>
         <div class="element-drawer__button">
-          <el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
         </div>
       </div>
       <div v-if="dataType === 'ROLES'">
-        <el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色" @change="changeSelectRoles">
+        <el-select v-model="roleIds" multiple size="small" placeholder="请选择 角色" @change="changeSelectRoles">
           <el-option
             v-for="item in roleOptions"
             :key="item.roleId"
@@ -33,7 +33,7 @@
         <tree-select
           :width="320"
           :height="400"
-          size="mini"
+          size="small"
           :data="deptTreeData"
           :defaultProps="deptProps"
           multiple
@@ -67,7 +67,7 @@
     </el-row>
 
     <!-- 候选用户弹窗 -->
-    <el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
+    <el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>
       <el-row type="flex" :gutter="20">
         <!--部门数据-->
         <el-col :span="7">
diff --git a/src/plugins/package/utils.js b/src/plugins/package/utils.js
index d1a92a0..a367aa0 100644
--- a/src/plugins/package/utils.js
+++ b/src/plugins/package/utils.js
@@ -1,3 +1,5 @@
+import useBpmnStore from "@/store/modules/bpmn";
+const bpmnStore = useBpmnStore();
 // 创建监听器实例
 export function createListenerObject(options, isTask, prefix) {
   const listenerObj = Object.create(null);
@@ -18,50 +20,72 @@ export function createListenerObject(options, isTask, prefix) {
   }
   // 注入字段
   if (options.fields) {
-    listenerObj.fields = options.fields.map(field => {
+    listenerObj.fields = options.fields.map((field) => {
       return createFieldObject(field, prefix);
     });
   }
   // 任务监听器的 定时器 设置
   if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
-    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
-    const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
-      id: `TimerEventDefinition_${uuid(8)}`,
-      [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
-    });
+    const timeDefinition = window.bpmnInstances.moddle.create(
+      "bpmn:FormalExpression",
+      { body: options.eventTimeDefinitions }
+    );
+    const TimerEventDefinition = window.bpmnInstances.moddle.create(
+      "bpmn:TimerEventDefinition",
+      {
+        id: `TimerEventDefinition_${uuid(8)}`,
+        [`time${options.eventDefinitionType.replace(/^\S/, (s) =>
+          s.toUpperCase()
+        )}`]: timeDefinition,
+      }
+    );
     listenerObj.eventDefinitions = [TimerEventDefinition];
   }
-  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+  return window.bpmnInstances.moddle.create(
+    `${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`,
+    listenerObj
+  );
 }
 
 // 创建 监听器的注入字段 实例
 export function createFieldObject(option, prefix) {
   const { name, fieldType, string, expression } = option;
-  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
+  const fieldConfig =
+    fieldType === "string" ? { name, string } : { name, expression };
   return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
 }
 
 // 创建脚本实例
 export function createScriptObject(options, prefix) {
   const { scriptType, scriptFormat, value, resource } = options;
-  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
-  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
+  const scriptConfig =
+    scriptType === "inlineScript"
+      ? { scriptFormat, value }
+      : { scriptFormat, resource };
+  return window.bpmnInstances.moddle.create(
+    `${prefix}:Script`,
+    scriptConfig
+  );
 }
 
 // 更新元素扩展属性
 export function updateElementExtensions(element, extensionList) {
-  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
-    values: extensionList
-  });
+  const extensions = window.bpmnInstances.moddle.create(
+    "bpmn:ExtensionElements",
+    {
+      values: extensionList,
+    }
+  );
   window.bpmnInstances.modeling.updateProperties(element, {
-    extensionElements: extensions
+    extensionElements: extensions,
   });
 }
 
 // 创建一个id
 export function uuid(length = 8, chars) {
   let result = "";
-  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  let charsString =
+    chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
   for (let i = length; i > 0; --i) {
     result += charsString[Math.floor(Math.random() * charsString.length)];
   }
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 3b26cfe..353908d 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,46 +1,46 @@
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-const useAppStore = defineStore(
-  'app',
-  {
-    state: () => ({
-      sidebar: {
-        opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
-        withoutAnimation: false,
-        hide: false
-      },
-      device: 'desktop',
-      size: Cookies.get('size') || 'default'
-    }),
-    actions: {
-      toggleSideBar(withoutAnimation) {
-        if (this.sidebar.hide) {
-          return false;
-        }
-        this.sidebar.opened = !this.sidebar.opened
-        this.sidebar.withoutAnimation = withoutAnimation
-        if (this.sidebar.opened) {
-          Cookies.set('sidebarStatus', 1)
-        } else {
-          Cookies.set('sidebarStatus', 0)
-        }
-      },
-      closeSideBar({ withoutAnimation }) {
-        Cookies.set('sidebarStatus', 0)
-        this.sidebar.opened = false
-        this.sidebar.withoutAnimation = withoutAnimation
-      },
-      toggleDevice(device) {
-        this.device = device
-      },
-      setSize(size) {
-        this.size = size;
-        Cookies.set('size', size)
-      },
-      toggleSideBarHide(status) {
-        this.sidebar.hide = status
+const useAppStore = defineStore("app", {
+  state: () => ({
+    sidebar: {
+      opened: Cookies.get("sidebarStatus")
+        ? !!+Cookies.get("sidebarStatus")
+        : true,
+      withoutAnimation: false,
+      hide: false,
+    },
+    device: "desktop",
+    size: Cookies.get("size") || "default",
+  }),
+  actions: {
+    toggleSideBar(withoutAnimation) {
+      if (this.sidebar.hide) {
+        return false;
       }
-    }
-  })
+      this.sidebar.opened = !this.sidebar.opened;
+      this.sidebar.withoutAnimation = withoutAnimation;
+      if (this.sidebar.opened) {
+        Cookies.set("sidebarStatus", 1);
+      } else {
+        Cookies.set("sidebarStatus", 0);
+      }
+    },
+    closeSideBar({ withoutAnimation }) {
+      Cookies.set("sidebarStatus", 0);
+      this.sidebar.opened = false;
+      this.sidebar.withoutAnimation = withoutAnimation;
+    },
+    toggleDevice(device) {
+      this.device = device;
+    },
+    setSize(size) {
+      this.size = size;
+      Cookies.set("size", size);
+    },
+    toggleSideBarHide(status) {
+      this.sidebar.hide = status;
+    },
+  },
+});
 
-export default useAppStore
+export default useAppStore;
diff --git a/src/store/modules/bpmn.js b/src/store/modules/bpmn.js
new file mode 100644
index 0000000..eea1ca8
--- /dev/null
+++ b/src/store/modules/bpmn.js
@@ -0,0 +1,17 @@
+// import { defineStore } from "pinia";
+
+const useBpmnStore = defineStore("bpmn", {
+  state: () => ({
+    bpmnInstances: {},
+    count: 1,
+  }),
+  actions: {
+    setBpmnInstances(data) {
+      console.log(data);
+      this.bpmnInstances = data;
+      //   this.bpmnInstances.name = "423";
+    },
+  },
+});
+
+export default useBpmnStore;
diff --git a/vite.config.js b/vite.config.js
index 5d0002e..848c872 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -19,6 +19,7 @@ export default defineConfig(({ mode, command }) => {
         "~": path.resolve(__dirname, "./"),
         // 设置别名
         "@": path.resolve(__dirname, "./src"),
+        stream: "stream-browserify",
       },
       // https://cn.vitejs.dev/config/#resolve-extensions
       extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],