From 9f1c3831fae0d9e2a6da85356925a2d210eef07b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 14 Sep 2025 19:53:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20bpmnProcessDes?=
 =?UTF-8?q?igner=20=E7=BB=84=E4=BB=B6=20ele=20=3D>=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |  16 +-
 .../package/penal/PropertiesPanel.vue         | 437 +++++-------------
 .../package/penal/task/ElementTask.vue        |  17 +-
 pnpm-workspace.yaml                           | 145 +++---
 4 files changed, 217 insertions(+), 398 deletions(-)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index f4d5b409..77aabdbc 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -46,18 +46,18 @@
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
-    "bpmn-js": "^17.11.1",
-    "bpmn-js-properties-panel": "5.23.0",
-    "bpmn-js-token-simulation": "^0.36.3",
-    "camunda-bpmn-moddle": "^7.0.1",
+    "bpmn-js": "catalog:",
+    "bpmn-js-properties-panel": "catalog:",
+    "bpmn-js-token-simulation": "catalog:",
+    "camunda-bpmn-moddle": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
-    "diagram-js": "^12.8.1",
-    "fast-xml-parser": "^4.5.3",
+    "diagram-js": "catalog:",
+    "fast-xml-parser": "catalog:",
     "highlight.js": "catalog:",
-    "min-dash": "^4.2.3",
+    "min-dash": "catalog:",
     "pinia": "catalog:",
-    "steady-xml": "^0.1.0",
+    "steady-xml": "catalog:",
     "tinymce": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index c006e202..832e6e58 100644
--- a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 
-import { Icon } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { Collapse } from 'ant-design-vue';
+
+import ElementCustomConfig from '#/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue';
+import ElementForm from '#/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue';
 
 import ElementBaseInfo from './base/ElementBaseInfo.vue';
 import FlowCondition from './flow-condition/FlowCondition.vue';
@@ -29,7 +32,7 @@ defineOptions({ name: 'MyPropertiesPanel' });
 const props = defineProps({
   bpmnModeler: {
     type: Object,
-    default: () => {},
+    default: () => ({}),
   },
   prefix: {
     type: String,
@@ -43,12 +46,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  model: Object, // 流程模型的数据
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+  model: {
+    type: Object,
+    default: () => ({}),
+  }, // 流程模型的数据
 });
 
+const CollapsePanel = Collapse.Panel;
+
 const activeTab = ref('base');
 const elementId = ref('');
-const elementType = ref('');
+const elementType = ref<any>('');
 const elementBusinessObject = ref<any>({}); // 元素 businessObject 镜像，提供给需要做判断的组件使用
 const conditionFormVisible = ref(false); // 流转条件设置
 const formVisible = ref(false); // 表单配置
@@ -77,9 +89,7 @@ const initBpmnInstances = () => {
     };
 
     // 检查所有实例是否都存在
-    const allInstancesExist = Object.values(instances).every(
-      Boolean,
-    );
+    const allInstancesExist = Object.values(instances).every(Boolean);
     if (allInstancesExist) {
       const w = window as any;
       w.bpmnInstances = instances;
@@ -95,12 +105,12 @@ const initBpmnInstances = () => {
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 // 监听 props.bpmnModeler 然后 initModels
-const unwatchBpmn = watch(
+watch(
   () => props.bpmnModeler,
   async () => {
     // 避免加载时 流程图 并未加载完成
     if (!props.bpmnModeler) {
-      console.log('缺少props.bpmnModeler');
+      // console.log('缺少props.bpmnModeler');
       return;
     }
 
@@ -128,15 +138,18 @@ const getActiveElement = () => {
 
   // 初始第一个选中元素 bpmn:Process
   initFormOnChanged(null);
-  props.bpmnModeler.on('import.done', (e) => {
-    console.log(e, 'eeeee');
+  props.bpmnModeler.on('import.done', (_: any) => {
+    // console.log(e, 'eeeee');
     initFormOnChanged(null);
   });
   // 监听选择事件，修改当前激活的元素以及表单
-  props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
-    initFormOnChanged(newSelection[0] || null);
-  });
-  props.bpmnModeler.on('element.changed', ({ element }) => {
+  props.bpmnModeler.on(
+    'selection.changed',
+    ({ newSelection }: { newSelection: any }) => {
+      initFormOnChanged(newSelection[0] || null);
+    },
+  );
+  props.bpmnModeler.on('element.changed', ({ element }: { element: any }) => {
     // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
     if (element && element.id === elementId.value) {
       initFormOnChanged(element);
@@ -145,42 +158,41 @@ const getActiveElement = () => {
 };
 
 // 初始化数据
-const initFormOnChanged = (element) => {
+const initFormOnChanged = (element: any) => {
   if (!isReady.value || !bpmnInstances()) return;
 
   let activatedElement = element;
   if (!activatedElement) {
     activatedElement =
       bpmnInstances().elementRegistry.find(
-        (el) => el.type === 'bpmn:Process',
+        (el: any) => el.type === 'bpmn:Process',
       ) ??
       bpmnInstances().elementRegistry.find(
-        (el) => el.type === 'bpmn:Collaboration',
+        (el: any) => el.type === 'bpmn:Collaboration',
       );
   }
   if (!activatedElement) return;
 
   try {
-    console.log(`
-                ----------
-        select element changed:
-                  id:  ${activatedElement.id}
-                type:  ${activatedElement.businessObject.$type}
-                ----------
-                `);
-    console.log('businessObject:', activatedElement.businessObject);
+    // console.log(`
+    //             ----------
+    //     select element changed:
+    //               id:  ${activatedElement.id}
+    //             type:  ${activatedElement.businessObject.$type}
+    //             ----------
+    //             `);
+    // console.log('businessObject:', activatedElement.businessObject);
     bpmnInstances().bpmnElement = activatedElement;
     bpmnElement.value = activatedElement;
     elementId.value = activatedElement.id;
     elementType.value = activatedElement.type.split(':')[1] || '';
-    elementBusinessObject.value = JSON.parse(
-      JSON.stringify(activatedElement.businessObject),
+    elementBusinessObject.value = structuredClone(
+      activatedElement.businessObject,
     );
-    conditionFormVisible.value = !!(
+    conditionFormVisible.value =
       elementType.value === 'SequenceFlow' &&
       activatedElement.source &&
-      !activatedElement.source.type.indexOf('StartEvent') === -1
-    );
+      (activatedElement.source.type as string).includes('StartEvent');
     formVisible.value =
       elementType.value === 'UserTask' || elementType.value === 'StartEvent';
   } catch (error) {
@@ -200,46 +212,46 @@ watch(
     activeTab.value = 'base';
   },
 );
-
-function updateNode() {
-  const moddle = window.bpmnInstances?.moddle;
-  const modeling = window.bpmnInstances?.modeling;
-  const elementRegistry = window.bpmnInstances?.elementRegistry;
-  if (!moddle || !modeling || !elementRegistry) return;
-
-  const element = elementRegistry.get(props.businessObject.id);
-  if (!element) return;
-
-  const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
-  switch (type.value) {
-  case 'cycle': {
-    timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-
-  break;
-  }
-  case 'duration': {
-    timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-
-  break;
-  }
-  case 'time': {
-    timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-
-  break;
-  }
-  // No default
-  }
-
-  modeling.updateModdleProperties(element, element.businessObject, {
-    eventDefinitions: [timerDef],
-  });
-}
+//
+// function updateNode() {
+//   const moddle = window.bpmnInstances?.moddle;
+//   const modeling = window.bpmnInstances?.modeling;
+//   const elementRegistry = window.bpmnInstances?.elementRegistry;
+//   if (!moddle || !modeling || !elementRegistry) return;
+//
+//   const element = elementRegistry.get(props.businessObject.id);
+//   if (!element) return;
+//
+//   const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
+//   switch (type.value) {
+//     case 'cycle': {
+//       timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     case 'duration': {
+//       timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     case 'time': {
+//       timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     // No default
+//   }
+//
+//   modeling.updateModdleProperties(element, element.businessObject, {
+//     eventDefinitions: [timerDef],
+//   });
+// }
 
 // 初始化和监听
 function syncFromBusinessObject() {
@@ -269,9 +281,8 @@ watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
   >
     <Collapse v-model:active-key="activeTab" v-if="isReady">
       <CollapsePanel key="base" header="常规">
-        <template #title>
-          <Icon icon="ant-design:info-circle-filled" />
-          常规
+        <template #extra>
+          <IconifyIcon icon="ep:info-filled" />
         </template>
         <ElementBaseInfo
           :id-edit-disabled="idEditDisabled"
@@ -282,51 +293,50 @@ watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
       </CollapsePanel>
       <CollapsePanel
         key="message"
+        header="消息与信号"
         v-if="elementType === 'Process'"
       >
-        <template #title>
-          <Icon icon="ant-design:message-filled" />
-          消息与信号
+        <template #extra>
+          <IconifyIcon icon="ep:comment" />
         </template>
         <SignalAndMassage />
       </CollapsePanel>
       <CollapsePanel
         key="condition"
+        header="流转条件"
         v-if="conditionFormVisible"
       >
-        <template #title>
-          <Icon icon="ant-design:swap-right" />
-          流转条件
+        <template #extra>
+          <IconifyIcon icon="ep:promotion" />
         </template>
         <FlowCondition
           :business-object="elementBusinessObject"
           :type="elementType"
         />
       </CollapsePanel>
-      <CollapsePanel key="form" v-if="formVisible">
-        <template #title>
-          <Icon icon="ant-design:unordered-list-outlined" />
-          表单
+      <CollapsePanel key="form" header="表单" v-if="formVisible">
+        <template #extra>
+          <IconifyIcon icon="ep:list" />
         </template>
-        <element-form :id="elementId" :type="elementType" />
+        <ElementForm :id="elementId" :type="elementType" />
       </CollapsePanel>
       <CollapsePanel
         key="task"
+        :header="getTaskCollapseItemName(elementType)"
         v-if="isTaskCollapseItemShow(elementType)"
       >
-        <template #title>
-          <Icon icon="ant-design:check-circle-filled" />
-          {{ getTaskCollapseItemName(elementType) }}
+        <template #extra>
+          <IconifyIcon icon="ep:checked" />
         </template>
         <ElementTask :id="elementId" :type="elementType" />
       </CollapsePanel>
       <CollapsePanel
         key="multiInstance"
+        header="多人审批方式"
         v-if="elementType.includes('Task')"
       >
-        <template #title>
-          <Icon icon="ant-design:question-circle-filled" />
-          多人审批方式
+        <template #extra>
+          <IconifyIcon icon="ep:help-filled" />
         </template>
         <ElementMultiInstance
           :id="elementId"
@@ -334,43 +344,39 @@ watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
           :type="elementType"
         />
       </CollapsePanel>
-      <CollapsePanel key="listeners">
-        <template #title>
-          <Icon icon="ant-design:bell-filled" />
-          执行监听器
+      <CollapsePanel key="listeners" header="执行监听器">
+        <template #extra>
+          <IconifyIcon icon="ep:bell-filled" />
         </template>
         <ElementListeners :id="elementId" :type="elementType" />
       </CollapsePanel>
       <CollapsePanel
         key="taskListeners"
+        header="任务监听器"
         v-if="elementType === 'UserTask'"
       >
-        <template #title>
-          <Icon icon="ant-design:bell-filled" />
-          任务监听器
+        <template #extra>
+          <IconifyIcon icon="ep:bell-filled" />
         </template>
         <UserTaskListeners :id="elementId" :type="elementType" />
       </CollapsePanel>
-      <CollapsePanel key="extensions">
-        <template #title>
-          <Icon icon="ant-design:plus-circle-filled" />
-          扩展属性
+      <CollapsePanel key="extensions" header="扩展属性">
+        <template #extra>
+          <IconifyIcon icon="ep:circle-plus-filled" />
         </template>
         <ElementProperties :id="elementId" :type="elementType" />
       </CollapsePanel>
-      <CollapsePanel key="other">
-        <template #title>
-          <Icon icon="ant-design:swap-right" />
-          其他
+      <CollapsePanel key="other" header="其他">
+        <template #extra>
+          <IconifyIcon icon="ep:promotion" />
         </template>
         <ElementOtherConfig :id="elementId" />
       </CollapsePanel>
-      <CollapsePanel key="customConfig">
-        <template #title>
-          <Icon icon="ant-design:tool-filled" />
-          自定义配置
+      <CollapsePanel key="customConfig" header="自定义配置">
+        <template #extra>
+          <IconifyIcon icon="ep:tools" />
         </template>
-        <element-custom-config
+        <ElementCustomConfig
           :id="elementId"
           :type="elementType"
           :business-object="elementBusinessObject"
@@ -379,212 +385,11 @@ watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
       <!-- 新增的时间事件配置项 -->
       <CollapsePanel
         key="timeEvent"
+        header="时间事件"
         v-if="elementType === 'IntermediateCatchEvent'"
       >
-        <template #title>
-          <Icon icon="ant-design:clock-circle-filled" />
-          时间事件
-        </template>
-        <TimeEventConfig
-          :business-object="bpmnElement.value?.businessObject"
-          :key="elementId"
-        />
-      </CollapsePanel>
-    </Collapse>
-  </div>
-</template>.includes('StartEvent')
-    );
-    formVisible.value =
-      elementType.value === 'UserTask' || elementType.value === 'StartEvent';
-  } catch (error) {
-    console.error('初始化表单数据失败:', error);
-  }
-};
-
-onBeforeUnmount(() => {
-  const w = window as any;
-  w.bpmnInstances = null;
-  isReady.value = false;
-});
-
-watch(
-  () => elementId.value,
-  () => {
-    activeTab.value = 'base';
-  },
-);
-
-function updateNode() {
-  const moddle = window.bpmnInstances?.moddle;
-  const modeling = window.bpmnInstances?.modeling;
-  const elementRegistry = window.bpmnInstances?.elementRegistry;
-  if (!moddle || !modeling || !elementRegistry) return;
-
-  const element = elementRegistry.get(props.businessObject.id);
-  if (!element) return;
-
-  const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
-  switch (type.value) {
-  case 'time': {
-    timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-
-  break;
-  }
-  case 'duration': {
-    timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-
-  break;
-  }
-  case 'cycle': {
-    timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
-      body: condition.value,
-    });
-
-  break;
-  }
-  // No default
-  }
-
-  modeling.updateModdleProperties(element, element.businessObject, {
-    eventDefinitions: [timerDef],
-  });
-}
-
-// 初始化和监听
-function syncFromBusinessObject() {
-  if (props.businessObject) {
-    const timerDef = (props.businessObject.eventDefinitions || [])[0];
-    if (timerDef) {
-      if (timerDef.timeDate) {
-        type.value = 'time';
-        condition.value = timerDef.timeDate.body;
-      } else if (timerDef.timeDuration) {
-        type.value = 'duration';
-        condition.value = timerDef.timeDuration.body;
-      } else if (timerDef.timeCycle) {
-        type.value = 'cycle';
-        condition.value = timerDef.timeCycle.body;
-      }
-    }
-  }
-}
-onMounted(syncFromBusinessObject);
-watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
-</script>
-<template>
-  <div
-    class="process-panel__container"
-    :style="{ width: `${width}px`, maxHeight: '600px' }"
-  >
-    <Collapse v-model:active-key="activeTab" v-if="isReady">
-      <CollapsePanel key="base" header="常规">
-        <template #title>
-          <Icon icon="ant-design:info-circle-filled" />
-          常规
-        </template>
-        <ElementBaseInfo
-          :id-edit-disabled="idEditDisabled"
-          :business-object="elementBusinessObject"
-          :type="elementType"
-          :model="model"
-        />
-      </CollapsePanel>
-      <CollapsePanel key="message" v-if="elementType === 'Process'">
-        <template #title>
-          <Icon icon="ant-design:message-filled" />
-          消息与信号
-        </template>
-        <SignalAndMassage />
-      </CollapsePanel>
-      <CollapsePanel key="condition" v-if="conditionFormVisible">
-        <template #title>
-          <Icon icon="ant-design:swap-right" />
-          流转条件
-        </template>
-        <FlowCondition
-          :business-object="elementBusinessObject"
-          :type="elementType"
-        />
-      </CollapsePanel>
-      <CollapsePanel key="form" v-if="formVisible">
-        <template #title>
-          <Icon icon="ant-design:unordered-list-outlined" />
-          表单
-        </template>
-        <element-form :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel key="task" v-if="isTaskCollapseItemShow(elementType)">
-        <template #title>
-          <Icon icon="ant-design:check-circle-filled" />
-          {{ getTaskCollapseItemName(elementType) }}
-        </template>
-        <ElementTask :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel
-        key="multiInstance"
-        v-if="elementType.includes('Task')"
-      >
-        <template #title>
-          <Icon icon="ant-design:question-circle-filled" />
-          多人审批方式
-        </template>
-        <ElementMultiInstance
-          :id="elementId"
-          :business-object="elementBusinessObject"
-          :type="elementType"
-        />
-      </CollapsePanel>
-      <CollapsePanel key="listeners">
-        <template #title>
-          <Icon icon="ant-design:bell-filled" />
-          执行监听器
-        </template>
-        <ElementListeners :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel key="taskListeners" v-if="elementType === 'UserTask'">
-        <template #title>
-          <Icon icon="ant-design:bell-filled" />
-          任务监听器
-        </template>
-        <UserTaskListeners :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel key="extensions">
-        <template #title>
-          <Icon icon="ant-design:plus-circle-filled" />
-          扩展属性
-        </template>
-        <ElementProperties :id="elementId" :type="elementType" />
-      </CollapsePanel>
-      <CollapsePanel key="other">
-        <template #title>
-          <Icon icon="ant-design:swap-right" />
-          其他
-        </template>
-        <ElementOtherConfig :id="elementId" />
-      </CollapsePanel>
-      <CollapsePanel key="customConfig">
-        <template #title>
-          <Icon icon="ant-design:tool-filled" />
-          自定义配置
-        </template>
-        <element-custom-config
-          :id="elementId"
-          :type="elementType"
-          :business-object="elementBusinessObject"
-        />
-      </CollapsePanel>
-      <!-- 新增的时间事件配置项 -->
-      <CollapsePanel
-        key="timeEvent"
-        v-if="elementType === 'IntermediateCatchEvent'"
-      >
-        <template #title>
-          <Icon icon="ant-design:clock-circle-filled" />
-          时间事件
+        <template #extra>
+          <IconifyIcon icon="ep:timer" />
         </template>
         <TimeEventConfig
           :business-object="bpmnElement.value?.businessObject"
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
index 40d7247a..d3294b5a 100644
--- a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
@@ -1,15 +1,21 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { Form } from 'ant-design-vue';
+import { Checkbox, Form, FormItem } from 'ant-design-vue';
 
 import { installedComponent } from './data';
 
 defineOptions({ name: 'ElementTaskConfig' });
 
 const props = defineProps({
-  id: String,
-  type: String,
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
 });
 const taskConfigForm = ref({
   asyncAfter: false,
@@ -47,6 +53,7 @@ watch(
   () => props.type,
   () => {
     if (props.type) {
+      // @ts-ignore
       witchTaskComponent.value = installedComponent[props.type].component;
     }
   },
@@ -58,7 +65,7 @@ watch(
   <div class="panel-tab__content">
     <Form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
       <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
-      <Form.Item label="异步延续" style="display: none">
+      <FormItem label="异步延续" style="display: none">
         <Checkbox
           v-model:checked="taskConfigForm.asyncBefore"
           @change="changeTaskAsync"
@@ -78,7 +85,7 @@ watch(
         >
           排除
         </Checkbox>
-      </Form.Item>
+      </FormItem>
       <component :is="witchTaskComponent" v-bind="$props" />
     </Form>
   </div>
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9daa2796..67151256 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -12,76 +12,79 @@ packages:
   - scripts/*
   - docs
   - playground
-
 catalog:
-  '@ast-grep/napi': ^0.37.0
-  '@changesets/changelog-github': ^0.5.1
-  '@changesets/cli': ^2.29.5
-  '@changesets/git': ^3.0.4
-  '@clack/prompts': ^0.10.1
-  '@commitlint/cli': ^19.8.1
-  '@commitlint/config-conventional': ^19.8.1
-  '@ctrl/tinycolor': ^4.1.0
-  '@eslint/js': ^9.30.1
-  '@faker-js/faker': ^9.9.0
-  '@iconify/json': ^2.2.354
-  '@iconify/tailwind': ^1.2.0
-  '@iconify/vue': ^5.0.0
-  '@intlify/core-base': ^11.1.7
-  '@intlify/unplugin-vue-i18n': ^6.0.8
-  '@jspm/generator': ^2.6.2
-  '@manypkg/get-packages': ^3.0.0
-  '@microsoft/fetch-event-source': ^2.0.1
-  '@nolebase/vitepress-plugin-git-changelog': ^2.18.0
-  '@playwright/test': ^1.53.2
-  '@pnpm/workspace.read-manifest': ^1000.2.0
-  '@stylistic/stylelint-plugin': ^3.1.3
-  '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
-  '@tailwindcss/typography': ^0.5.16
-  '@tanstack/vue-query': ^5.81.5
-  '@tanstack/vue-store': ^0.7.1
-  '@tinymce/tinymce-vue': ^6.1.0
-  '@tinyflow-ai/vue': ^1.1.1
-  '@form-create/ant-design-vue': ^3.2.27
-  '@form-create/antd-designer': ^3.3.0
-  '@form-create/designer': ^3.3.0
-  '@form-create/naive-ui': ^3.2.27
-  '@form-create/element-ui': ^3.2.27
-  '@types/archiver': ^6.0.3
-  '@types/eslint': ^9.6.1
-  '@types/html-minifier-terser': ^7.0.2
-  '@types/json-bigint': ^1.0.4
-  '@types/jsonwebtoken': ^9.0.10
-  '@types/lodash.clonedeep': ^4.5.9
-  '@types/lodash.get': ^4.4.9
-  '@types/lodash.isequal': ^4.5.8
-  '@types/lodash.set': ^4.3.9
-  '@types/markdown-it': ^14.1.2
-  '@types/node': ^22.16.0
-  '@types/nprogress': ^0.2.3
-  '@types/postcss-import': ^14.0.3
-  '@types/qrcode': ^1.5.5
-  '@types/qs': ^6.14.0
-  '@types/sortablejs': ^1.15.8
-  '@types/crypto-js': ^4.2.2
-  '@typescript-eslint/eslint-plugin': ^8.35.1
-  '@typescript-eslint/parser': ^8.35.1
-  '@vee-validate/zod': ^4.15.1
-  '@vite-pwa/vitepress': ^1.0.0
-  '@vitejs/plugin-vue': ^6.0.1
-  '@vitejs/plugin-vue-jsx': ^5.0.1
-  '@vue/reactivity': ^3.5.17
-  '@vue/shared': ^3.5.17
-  '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^13.4.0
-  '@vueuse/integrations': ^13.4.0
-  '@vueuse/motion': ^3.0.3
+  "@ast-grep/napi": ^0.37.0
+  "@changesets/changelog-github": ^0.5.1
+  "@changesets/cli": ^2.29.5
+  "@changesets/git": ^3.0.4
+  "@clack/prompts": ^0.10.1
+  "@commitlint/cli": ^19.8.1
+  "@commitlint/config-conventional": ^19.8.1
+  "@ctrl/tinycolor": ^4.1.0
+  "@eslint/js": ^9.30.1
+  "@faker-js/faker": ^9.9.0
+  "@form-create/ant-design-vue": ^3.2.27
+  "@form-create/antd-designer": ^3.3.0
+  "@form-create/designer": ^3.3.0
+  "@form-create/element-ui": ^3.2.27
+  "@form-create/naive-ui": ^3.2.27
+  "@iconify/json": ^2.2.354
+  "@iconify/tailwind": ^1.2.0
+  "@iconify/vue": ^5.0.0
+  "@intlify/core-base": ^11.1.7
+  "@intlify/unplugin-vue-i18n": ^6.0.8
+  "@jspm/generator": ^2.6.2
+  "@manypkg/get-packages": ^3.0.0
+  "@microsoft/fetch-event-source": ^2.0.1
+  "@nolebase/vitepress-plugin-git-changelog": ^2.18.0
+  "@playwright/test": ^1.53.2
+  "@pnpm/workspace.read-manifest": ^1000.2.0
+  "@stylistic/stylelint-plugin": ^3.1.3
+  "@tailwindcss/nesting": 0.0.0-insiders.565cd3e
+  "@tailwindcss/typography": ^0.5.16
+  "@tanstack/vue-query": ^5.81.5
+  "@tanstack/vue-store": ^0.7.1
+  "@tinyflow-ai/vue": ^1.1.1
+  "@tinymce/tinymce-vue": ^6.1.0
+  "@types/archiver": ^6.0.3
+  "@types/crypto-js": ^4.2.2
+  "@types/eslint": ^9.6.1
+  "@types/html-minifier-terser": ^7.0.2
+  "@types/json-bigint": ^1.0.4
+  "@types/jsonwebtoken": ^9.0.10
+  "@types/lodash.clonedeep": ^4.5.9
+  "@types/lodash.get": ^4.4.9
+  "@types/lodash.isequal": ^4.5.8
+  "@types/lodash.set": ^4.3.9
+  "@types/markdown-it": ^14.1.2
+  "@types/node": ^22.16.0
+  "@types/nprogress": ^0.2.3
+  "@types/postcss-import": ^14.0.3
+  "@types/qrcode": ^1.5.5
+  "@types/qs": ^6.14.0
+  "@types/sortablejs": ^1.15.8
+  "@typescript-eslint/eslint-plugin": ^8.35.1
+  "@typescript-eslint/parser": ^8.35.1
+  "@vee-validate/zod": ^4.15.1
+  "@vite-pwa/vitepress": ^1.0.0
+  "@vitejs/plugin-vue": ^6.0.1
+  "@vitejs/plugin-vue-jsx": ^5.0.1
+  "@vue/reactivity": ^3.5.17
+  "@vue/shared": ^3.5.17
+  "@vue/test-utils": ^2.4.6
+  "@vueuse/core": ^13.4.0
+  "@vueuse/integrations": ^13.4.0
+  "@vueuse/motion": ^3.0.3
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
   autoprefixer: ^10.4.21
   axios: ^1.10.0
   axios-mock-adapter: ^2.1.0
+  bpmn-js: ^17.11.1
+  bpmn-js-properties-panel: 5.23.0
+  bpmn-js-token-simulation: ^0.36.3
   cac: ^6.7.14
+  camunda-bpmn-moddle: ^7.0.1
   chalk: ^5.4.1
   cheerio: ^1.1.0
   circular-dependency-scanner: ^2.3.0
@@ -89,17 +92,17 @@ catalog:
   clsx: ^2.1.1
   commitlint-plugin-function-rules: ^4.0.2
   consola: ^3.4.2
-  cross-env: ^7.0.3
   cropperjs: ^1.6.2
+  cross-env: ^7.0.3
   crypto-js: ^4.2.0
   cspell: ^8.19.4
-  jsencrypt: ^3.3.2
   cssnano: ^7.0.7
   cz-git: ^1.11.2
   czg: ^1.11.1
   dayjs: ^1.11.13
   defu: ^6.1.4
   depcheck: ^1.4.7
+  diagram-js: ^12.8.1
   dotenv: ^16.6.1
   echarts: ^5.6.0
   element-plus: ^2.10.2
@@ -120,13 +123,16 @@ catalog:
   eslint-plugin-vitest: ^0.5.4
   eslint-plugin-vue: ^10.2.0
   execa: ^9.6.0
+  fast-xml-parser: ^4.5.3
   find-up: ^7.0.0
   get-port: ^7.1.0
   globals: ^16.3.0
   h3: ^1.15.3
   happy-dom: ^17.6.3
+  highlight.js: ^11.11.1
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
+  jsencrypt: ^3.3.2
   json-bigint: ^1.0.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
@@ -142,6 +148,7 @@ catalog:
   markmap-toolbar: ^0.17.0
   markmap-view: ^0.16.0
   medium-zoom: ^1.1.0
+  min-dash: ^4.2.3
   naive-ui: ^2.42.0
   nitropack: ^2.11.13
   nprogress: ^0.2.0
@@ -169,6 +176,7 @@ catalog:
   sass: ^1.89.2
   secure-ls: ^2.0.0
   sortablejs: ^1.15.6
+  steady-xml: ^0.1.0
   stylelint: ^16.21.0
   stylelint-config-recess-order: ^6.1.0
   stylelint-config-recommended: ^16.0.0
@@ -182,8 +190,8 @@ catalog:
   tailwindcss: ^3.4.17
   tailwindcss-animate: ^1.0.7
   theme-colors: ^0.1.0
-  tippy.js: ^6.3.7
   tinymce: ^7.3.0
+  tippy.js: ^6.3.7
   turbo: ^2.5.4
   typescript: ^5.8.3
   unbuild: ^3.6.1
@@ -207,11 +215,10 @@ catalog:
   vue-router: ^4.5.1
   vue-tippy: ^6.7.1
   vue-tsc: 2.2.10
+  vue3-signature: ^0.2.4
+  vuedraggable: ^4.1.0
   vxe-pc-ui: ^4.7.12
   vxe-table: ^4.14.4
   watermark-js-plus: ^1.6.2
   zod: ^3.25.67
   zod-defaults: ^0.1.3
-  highlight.js: ^11.11.1
-  vue3-signature: ^0.2.4
-  vuedraggable: ^4.1.0