diff --git a/package.json b/package.json
index acd032f..82373b7 100644
--- a/package.json
+++ b/package.json
@@ -22,22 +22,19 @@
     "@bpmn-io/properties-panel": "^3.16.0",
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
+    "@lezer/common": "1.2.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.7.2",
-    "@lezer/common": "1.2.1",
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
     "axios": "1.6.5",
     "bpmn-js": "13.2.2",
     "bpmn-js-properties-panel": "2.1.0",
-    "camunda-bpmn-moddle": "7.0.1",
     "camunda-bpmn-js-behaviors": "1.2.2",
-    "zeebe-bpmn-moddle": "1.0.0",
-    "diagram-js": "12.3.0",
-    "moddle": "6.2.3",
-    "didi": "9.0.2",
-    "preact": "10.19.3",
+    "camunda-bpmn-moddle": "7.0.1",
     "crypto-js": "4.2.0",
+    "diagram-js": "12.3.0",
+    "didi": "9.0.2",
     "echarts": "5.4.3",
     "element-plus": "2.4.4",
     "file-saver": "2.0.5",
@@ -45,17 +42,21 @@
     "highlight.js": "11.9.0",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "moddle": "6.2.3",
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
     "path-to-regexp": "6.2.1",
     "pinia": "2.1.7",
+    "preact": "10.19.3",
     "screenfull": "6.0.2",
     "vform3-builds": "3.0.10",
     "vue": "3.4.13",
     "vue-cropper": "1.1.1",
     "vue-i18n": "9.9.0",
     "vue-router": "4.2.5",
-    "vue-types": "5.1.1"
+    "vue-types": "5.1.1",
+    "vxe-table": "4.5.18",
+    "zeebe-bpmn-moddle": "1.0.0"
   },
   "devDependencies": {
     "@iconify/json": "2.2.168",
@@ -71,16 +72,16 @@
     "@unocss/preset-attributify": "0.58.3",
     "@unocss/preset-icons": "0.58.3",
     "@unocss/preset-uno": "0.58.3",
-    "@vue/compiler-sfc": "3.4.13",
     "@vitejs/plugin-vue": "5.0.3",
+    "@vue/compiler-sfc": "3.4.13",
     "autoprefixer": "10.4.16",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-define-config": "2.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-vue": "9.20.1",
     "fast-glob": "3.3.2",
     "husky": "8.0.3",
@@ -93,11 +94,11 @@
     "unplugin-icons": "0.18.2",
     "unplugin-vue-components": "0.26.0",
     "unplugin-vue-setup-extend-plus": "1.0.0",
+    "vite": "5.0.11",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
     "vitest": "1.2.0",
     "vue-eslint-parser": "9.4.0",
-    "vue-tsc": "1.8.27",
-    "vite": "5.0.11"
+    "vue-tsc": "1.8.27"
   }
 }
diff --git a/src/components/BpmnDesign/PropertyPanel.vue b/src/components/BpmnDesign/PropertyPanel.vue
index 2c3d45a..28af024 100644
--- a/src/components/BpmnDesign/PropertyPanel.vue
+++ b/src/components/BpmnDesign/PropertyPanel.vue
@@ -1,12 +1,14 @@
 <template>
   <div ref="propertyPanel" class="property-panel">
-    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
+    <div v-if="nodeName">{{ nodeName }}</div>
+    <el-divider />
     <component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
+    <!--    <TaskPanel :element="element" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys"></TaskPanel>-->
   </div>
 </template>
 <script setup lang="ts" name="PropertyPanel">
-import { NodeName } from '@/components/BpmnDesign/assets/lang/zh';
-
+import { NodeName } from './assets/lang/zh';
+import TaskPanel from './panel/TaskPanel.vue';
 interface propsType {
   users: Array<any>;
   groups: Array<any>;
@@ -48,7 +50,7 @@ const component = computed(() => {
   if (!element.value) return null;
   const type = element.value.type;
   if (startEndType.includes(type)) return 'startEndPanel';
-  if (taskType.includes(type)) return 'taskPanel';
+  if (taskType.includes(type)) return TaskPanel;
   if (sequenceType.includes(type)) return 'sequenceFlowPanel';
   if (gatewayType.includes(type)) return 'gatewayPanel';
   if (processType.includes(type)) return 'processPanel';
@@ -73,17 +75,16 @@ const handleModeler = () => {
     }
   });
   props.modeler.on('element.click', (e) => {
-    const { element } = e;
-    if (element.type === 'bpmn:Process') {
-      element.value = element;
+    if (e.element.type === 'bpmn:Process') {
+      element.value = e.element;
     }
   });
   props.modeler.on('selection.changed', (e) => {
-    element.value = null;
+    // element.value = null;
     const newElement = e.newSelection[0];
     if (newElement) {
       nextTick(() => {
-        element.value = e.element;
+        element.value = newElement;
       });
     }
   });
@@ -93,3 +94,11 @@ onMounted(() => {
   handleModeler();
 });
 </script>
+
+<style scoped lang="scss">
+.el-divider {
+  margin-top: 10px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+}
+</style>
diff --git a/src/components/BpmnDesign/assets/showConfig.ts b/src/components/BpmnDesign/assets/showConfig.ts
new file mode 100644
index 0000000..07effb0
--- /dev/null
+++ b/src/components/BpmnDesign/assets/showConfig.ts
@@ -0,0 +1,51 @@
+export default {
+  'bpmn:EndEvent': {},
+  'bpmn:StartEvent': {
+    initiator: true,
+    formKey: true
+  },
+  'bpmn:UserTask': {
+    userType: true,
+    assignee: true,
+    candidateUsers: true,
+    candidateGroups: true,
+    async: true,
+    priority: true,
+    formKey: true,
+    skipExpression: true,
+    dueDate: true,
+    taskListener: true
+  },
+  'bpmn:ServiceTask': {
+    async: true,
+    skipExpression: true,
+    isForCompensation: true,
+    triggerable: true,
+    class: true
+  },
+  'bpmn:ScriptTask': {
+    async: true,
+    isForCompensation: true,
+    autoStoreVariables: true
+  },
+  'bpmn:ManualTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:ReceiveTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:SendTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:BusinessRuleTask': {
+    async: true,
+    isForCompensation: true,
+    ruleVariablesInput: true,
+    rules: true,
+    resultVariable: true,
+    exclude: true
+  }
+};
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index dbcb264..68dc9c8 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -61,7 +61,7 @@
 
 <script lang="ts" setup name="BpmnDesign">
 import PropertyPanel from './PropertyPanel.vue';
-import BpmnModeler from 'bpmn-js/lib/Modeler.js'; // 引入 bpmn-js
+import BpmnModeler from 'bpmn-js/lib/Modeler.js';
 import diagramXML from '@/components/BpmnDesign/assets/defaultXML';
 import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
 import Modules from './assets/module/index';
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index e69de29..2b684c5 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <el-form ref="formRef">
+      <el-form-item label="任务监听器">
+        <el-badge :value="taskListenerCount">
+          <el-button @click="taskListenerRef.open()">编辑</el-button>
+        </el-badge>
+      </el-form-item>
+    </el-form>
+
+    <TaskListener ref="taskListenerRef" :modeler="modeler" :element="element" @close="refreshTaskListener"></TaskListener>
+  </div>
+</template>
+<script setup lang="ts" name="TaskPanel">
+import showConfig from '@/components/BpmnDesign/assets/showConfig';
+import TaskListener from './property/TaskListener.vue';
+
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+
+const elementType = computed(() => {
+  const bizObj = props.element.businessObject;
+  return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+});
+const config = computed(() => showConfig[elementType.value] || {});
+const taskListenerRef = ref<InstanceType<typeof TaskListener>>();
+const taskListenerCount = ref(0);
+
+const refreshTaskListener = (count?: number) => {
+  if (count) {
+    taskListenerCount.value = count;
+  } else {
+    taskListenerCount.value =
+      props.element.businessObject.extensionElements?.values?.filter((item) => item.$type === 'flowable:TaskListener').length ?? 0;
+  }
+};
+
+const updateProperties = (properties: any) => {
+  const modeling = props.modeler.get('modeling');
+  modeling.updateProperties(props.element, properties);
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/BpmnDesign/panel/property/ListenerParam.vue b/src/components/BpmnDesign/panel/property/ListenerParam.vue
new file mode 100644
index 0000000..1c869c2
--- /dev/null
+++ b/src/components/BpmnDesign/panel/property/ListenerParam.vue
@@ -0,0 +1,125 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    title="监听器参数"
+    width="700px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    append-to-body
+  >
+    <vxe-toolbar>
+      <template #buttons>
+        <el-button icon="Plus" @click="insertRow">新增</el-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      ref="tableRef"
+      height="300px"
+      border
+      show-overflow
+      keep-source
+      :data="tableData"
+      :edit-rules="tableRules"
+      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
+    >
+      <vxe-column type="seq" width="40"></vxe-column>
+      <vxe-column field="type" title="类型" :edit-render="{}">
+        <template #default="slotParams">
+          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
+        </template>
+        <template #edit="slotParams">
+          <vxe-select v-model="slotParams.row.type">
+            <vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
+          </vxe-select>
+        </template>
+      </vxe-column>
+      <vxe-column field="name" title="名称" :edit-render="{}">
+        <template #edit="slotParams">
+          <vxe-input v-model="slotParams.row.name" type="text"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column field="value" title="值" :edit-render="{}">
+        <template #edit="slotParams">
+          <vxe-input v-model="slotParams.row.value" type="text"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column title="操作" width="100" show-overflow align="center">
+        <template #default="slotParams">
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </vxe-column>
+    </vxe-table>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ListenerParam">
+import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { ParamVO } from 'bpmnDesign';
+
+interface PropType {
+  modelValue: ParamVO[];
+  visible?: boolean;
+}
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const props = withDefaults(defineProps<PropType>(), {
+  visible: false
+});
+
+const tableData = computed(() => props.modelValue);
+
+const tableRules = ref<VxeTablePropTypes.EditRules>({
+  type: [{ required: true, message: '请选择', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }],
+  value: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const emits = defineEmits(['update:modelValue', 'update:visible']);
+const typeSelect = [
+  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '字符串', value: 'stringValue' },
+  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }
+];
+
+const tableRef = ref<VxeTableInstance<ParamVO>>();
+const submitForm = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const errMap = await $table.validate(true);
+    if (errMap) {
+      proxy?.$modal.msgError('校验不通过');
+    } else {
+      emits('update:modelValue', $table.getTableData().fullData);
+      emits('update:visible', false);
+    }
+  }
+};
+
+const insertRow = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const { row: newRow } = await $table.insertAt({}, -1);
+    // 插入一条数据并触发校验
+    await $table.validate(newRow);
+  }
+};
+
+const removeRow = async (row: ParamVO) => {
+  await proxy?.$modal.confirm('您确定要删除该数据?');
+  const $table = tableRef.value;
+  if ($table) {
+    await $table.remove(row);
+  }
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/BpmnDesign/panel/property/TaskListener.vue b/src/components/BpmnDesign/panel/property/TaskListener.vue
new file mode 100644
index 0000000..1f7379e
--- /dev/null
+++ b/src/components/BpmnDesign/panel/property/TaskListener.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <el-dialog
+      :model-value="visible"
+      title="任务监听器"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      append-to-body
+    >
+      <vxe-toolbar>
+        <template #buttons>
+          <el-button icon="Plus" @click="insertRow">新增</el-button>
+        </template>
+      </vxe-toolbar>
+      <vxe-table
+        ref="tableRef"
+        height="300px"
+        border
+        show-overflow
+        keep-source
+        :data="tableData"
+        :edit-rules="tableRules"
+        :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
+      >
+        <vxe-column type="seq" width="40"></vxe-column>
+        <vxe-column field="event" title="事件" :edit-render="{}">
+          <template #default="slotParams">
+            <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
+          </template>
+          <template #edit="slotParams">
+            <vxe-select v-model="slotParams.row.event">
+              <vxe-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-column>
+        <vxe-column field="type" title="类型" :edit-render="{}">
+          <template #default="slotParams">
+            <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
+          </template>
+          <template #edit="slotParams">
+            <vxe-select v-model="slotParams.row.type">
+              <vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-column>
+
+        <vxe-column field="className" title="Java 类名" :edit-render="{}">
+          <template #edit="slotParams">
+            <vxe-input v-model="slotParams.row.className" type="text"></vxe-input>
+          </template>
+        </vxe-column>
+        <vxe-column title="参数" width="100" show-overflow align="center">
+          <template #default="slotParams">
+            <el-badge :value="slotParams.row.params ? slotParams.row.params.length : 0" type="primary">
+              <el-button size="small" @click="configParam(slotParams.rowIndex)">配置</el-button>
+            </el-badge>
+          </template>
+        </vxe-column>
+        <vxe-column title="操作" width="100" show-overflow align="center">
+          <template #default="slotParams">
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <ListenerParam v-if="showParamDialog" v-model:visible="showParamDialog" v-model="tableData[currentIndex].params" />
+  </div>
+</template>
+<script setup lang="ts">
+import ListenerParam from './ListenerParam.vue';
+import showConfig from '../../assets/showConfig';
+import { VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { TaskListenerVO } from 'bpmnDesign';
+
+const emit = defineEmits(['close']);
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+interface PropType {
+  modeler: any;
+  element: any;
+  categorys?: any[];
+}
+const props = withDefaults(defineProps<PropType>(), {
+  categorys: () => []
+});
+
+const elementType = computed(() => {
+  const bizObj = props.element.businessObject;
+  return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+});
+const config = computed(() => showConfig[elementType.value] || {});
+
+const visible = ref(false);
+const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
+const currentIndex = ref(0);
+const tableData = ref<TaskListenerVO[]>([]);
+const showParamDialog = ref(false);
+const tableRules = ref<VxeTablePropTypes.EditRules>({
+  event: [{ required: true, message: '请选择', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }],
+  className: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+const typeSelect = [
+  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
+  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
+  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
+];
+const eventSelect = [
+  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: 'create', value: 'create' },
+  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: 'assignment', value: 'assignment' },
+  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: 'complete', value: 'complete' },
+  { id: '68801972-85f1-482f-bd86-1fad015c26ed', label: 'delete', value: 'delete' }
+];
+
+const configParam = (i: number) => {
+  currentIndex.value = i;
+  showParamDialog.value = true;
+};
+const insertRow = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    tableData.value.push({
+      className: '',
+      type: '',
+      name: '',
+      event: '',
+      params: []
+    });
+    const { row: newRow } = await $table.insertAt({}, -1);
+    // 插入一条数据并触发校验
+    await $table.validate(newRow);
+  }
+};
+
+const removeRow = async (row: TaskListenerVO) => {
+  await proxy?.$modal.confirm('您确定要删除该数据?');
+  const $table = tableRef.value;
+  if ($table) {
+    await $table.remove(row);
+  }
+};
+const submitForm = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const errMap = await $table.validate(true);
+    if (errMap) {
+      proxy.$modal.msgError('校验不通过');
+    } else {
+      updateElement();
+      visible.value = false;
+      emit('close', tableData.value.length);
+    }
+  }
+};
+
+const open = () => (visible.value = true);
+const updateElement = () => {
+  if (tableData.value.length) {
+    let extensionElements = props.element.businessObject.get('extensionElements');
+    if (!extensionElements) {
+      extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements');
+    }
+    // 清除旧值
+    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
+    tableData.value.forEach((item) => {
+      const taskListener = props.modeler.get('moddle').create('flowable:TaskListener');
+      taskListener['event'] = item.event;
+      taskListener[item.type] = item.className;
+      if (item.params && item.params.length) {
+        item.params.forEach((field) => {
+          const fieldElement = props.modeler.get('moddle').create('flowable:Field');
+          fieldElement['name'] = field.name;
+          fieldElement[field.type] = field.value;
+          // 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
+          // const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
+          // fieldElement[field.type] = valueElement
+          taskListener.get('fields').push(fieldElement);
+        });
+      }
+      extensionElements.get('values').push(taskListener);
+    });
+    updateProperties({ extensionElements: extensionElements });
+  } else {
+    const extensionElements = props.element.businessObject[`extensionElements`];
+    if (extensionElements) {
+      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
+    }
+  }
+};
+
+const updateProperties = (properties: any) => {
+  const modeling = props.modeler.get('modeling');
+  modeling.updateProperties(toRaw(props.element), properties);
+};
+defineExpose({
+  open
+});
+</script>
+
+<style scoped lang="scss">
+.el-badge {
+  :deep(.el-badge__content) {
+    top: 10px;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index f0a3fdd..dc7c438 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -30,6 +30,10 @@ import './permission';
 // 国际化
 import i18n from '@/lang/index';
 
+// vxeTable
+import VXETable from 'vxe-table';
+import 'vxe-table/lib/style.css';
+
 const app = createApp(App);
 
 app.use(HighLight);
@@ -37,6 +41,7 @@ app.use(ElementIcons);
 app.use(router);
 app.use(store);
 app.use(i18n);
+app.use(VXETable);
 app.use(plugins);
 // 自定义指令
 directive(app);
diff --git a/src/types/bpmn.d.ts b/src/types/bpmn.d.ts
new file mode 100644
index 0000000..983ef08
--- /dev/null
+++ b/src/types/bpmn.d.ts
@@ -0,0 +1,15 @@
+declare module 'bpmnDesign' {
+  export interface ParamVO {
+    type: string;
+    name: string;
+    value: string;
+  }
+
+  export interface TaskListenerVO {
+    event: string;
+    type: string;
+    name: string;
+    className: string;
+    params: ParamVO[];
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 28342df..166e229 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -71,6 +71,10 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'bpmn-js/lib/features/palette/PaletteProvider',
         'bpmn-js/lib/features/context-pad/ContextPadProvider',
 
+        'element-plus/es/components/container/style/css',
+        'element-plus/es/components/aside/style/css',
+        'element-plus/es/components/main/style/css',
+        'element-plus/es/components/header/style/css',
         'element-plus/es/components/button-group/style/css',
         'element-plus/es/components/radio-button/style/css',
         'element-plus/es/components/checkbox-group/style/css',