diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 6d001275d48278ceacdd86ce5f914a8232418e20..77aabdbc6b61bb3a863383dc9efd85fe0913b056 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -46,10 +46,18 @@
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
+    "bpmn-js": "catalog:",
+    "bpmn-js-properties-panel": "catalog:",
+    "bpmn-js-token-simulation": "catalog:",
+    "camunda-bpmn-moddle": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
+    "diagram-js": "catalog:",
+    "fast-xml-parser": "catalog:",
     "highlight.js": "catalog:",
+    "min-dash": "catalog:",
     "pinia": "catalog:",
+    "steady-xml": "catalog:",
     "tinymce": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97d15e570a739d7cba878306f217c7ca58bf1514
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -0,0 +1,684 @@
+
+
+
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..370f295bbbe263d3694e2fa81fc00117cb8353a9
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -0,0 +1,418 @@
+
+
+
+  
+    
+    
+    
+      
+        
+      
+      
+        
+      
+    
+
+    
+    
+      
+        
+          
+            
+              {{ index + 1 }}
+            
+          
+          
+            
+              {{ record.assigneeUser?.nickname || record.ownerUser?.nickname }}
+            
+          
+          
+          
+            
+              {{ record.assigneeUser?.deptName || record.ownerUser?.deptName }}
+            
+          
+          
+          
+          
+            
+              
+            
+          
+          
+          
+            
+              {{ formatPast2(record.durationInMillis) }}
+            
+          
+        
+      
+    
+
+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+    
+  
+    
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+        
+          
+        
+        
+      
+      
+      
+        
+          
+        
+        
+      
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ad9ece8ffbe9d5f5e94d6b41a18298711376a645
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,221 @@
+
+
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e8b307cea4f82fe22b9e7ae54540772a8dcc8dd4
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
@@ -0,0 +1,58 @@
+
+
+
+  
+    
+  
+
+
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e75ebdd396b5db5c9e51c0b9ed10bf26d61a4ca5
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -0,0 +1,307 @@
+
+
+
+  
+    
审批人超时未处理时
+    
+      
+    
+    
+      
+        
+          {{ item.label }}
+        
+      
+    
+    
+      当超过
+      
+         {
+              updateTimeModdle();
+              updateElementExtensions();
+            }
+          "
+        />
+      
+      
+      未处理
+    
+    
+       {
+            updateTimeModdle();
+            updateElementExtensions();
+          }
+        "
+      />
+    
+  
+    
审批类型
+    
+      
+        
+          {{ item.label }}
+        
+      
+    
+
+    
审批人拒绝时
+    
+      
+        
+          
+            
+              {{ item.label }}
+            
+          
+        
+    
+      
+    
+
+    
审批人为空时
+    
+      
+        
+          
+            
+              {{ item.label }}
+            
+          
+        
+    
+      
+    
+
+    
审批人与提交人为同一人时
+    
+      
+        
+          
+            {{ item.label }}
+          
+        
+      
+
+    
操作按钮
+    
+
+    
字段权限
+    
+      
+        
字段名称
+        
+          只读
+          
+          
+            可编辑
+          
+          隐藏
+          
+        
+      
+      
+        
{{ item.title }}
+        
+          
+            
+              
+            
+          
+          
+            
+              
+            
+          
+          
+            
+              
+            
+          
+        
+      
+    
+
+    
是否需要签名
+    
+      
+    
+
+    
审批意见
+    
+      
+    
+  
+    
+        
+      
+      
+        
+      
+      
+        
+      
+      
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+      
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4466f0300c0e777d94538fd3479e59770deb719
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -0,0 +1,536 @@
+
+
+
+  
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/index.js b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1688cf7d13d0b7744a7dde0ad5392f45692ee50f
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/index.js
@@ -0,0 +1,7 @@
+import MyPropertiesPanel from './PropertiesPanel.vue';
+
+MyPropertiesPanel.install = function (Vue) {
+  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
+};
+
+export default MyPropertiesPanel;
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b602930ed8737f3f2d230149afa852d4cb0a0b5
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -0,0 +1,621 @@
+
+
+  
+    
+      
+        
+          {{ index + 1 }}
+        
+      
+      
+      
+      
+        
+          
+          
+          
+        
+      
+    
+    
+
+    
+    
+      
+      
+      
+        注入字段:
+        
+      
+      
+        
+          
+            {{ index + 1 }}
+          
+        
+        
+        
+        
+        
+          
+            
+            
+            
+          
+        
+      
+
+      
+        
+        
+      
+    
+
+    
+    
+      
+      
+        
+        
+      
+    
+  
+        
+        
+          
+            
+          
+        
+        
+        
+          
+            
+          
+        
+        
+        
+          
+            
+          
+        
+      
+      
+      
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbea2d6232a044f920ab63e8b422837dd47ccbe6
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -0,0 +1,598 @@
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+          
+          
+          
+        
+      
+    
+    
+
+    
+    
+      
+
+      
+      
+        注入字段:
+        
+      
+      
+        
+        
+        
+        
+        
+          
+            
+            
+            
+          
+        
+      
+
+      
+        
+        
+      
+    
+
+    
+    
+      
+      
+        
+        
+      
+    
+  
+    
+      
+      
+      
+      
+        
+          编辑
+          
+          移除
+        
+      
+    
+    
+      添加监听器
+    
+
+    
+    
+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+            
+          
+          
+            
+              
+              
+            
+          
+          
+            
+          
+          
+            
+          
+        
+        ${
+          isTaskListener
+            ? "" +
+              "" +
+              "" +
+              "" +
+              "" +
+              "" +
+              '' +
+              '' +
+              "" +
+              "" +
+              ''
+            : ''
+        }
+      
+      
+      
+        注入字段:
+        添加字段
+      
+      
+        
+        
+        
+        
+        
+          
+            编辑
+            
+            移除
+          
+        
+      
+
+      
+        取 消
+        保 存
+      
+    
+
+    
+    
+      
+        
+          
+        
+        
+          
+            
+          
+        
+        
+          
+        
+        
+          
+        
+      
+      
+        取 消
+        确 定
+      
+    
+  
+    
+      
+        
+          
+            {{ item.label }}
+          
+          
+            
+          
+        
+      
+    
除了UserTask以外节点的多实例待实现
+    
+    
+  
+    
+      
+        
+          {{ index + 1 }}
+        
+      
+      
+      
+      
+        
+          
+          
+          
+        
+      
+    
+    
+      
+    
+
+    
+      
+      
+        
+        
+      
+    
+  
+    
+      
+        
+        消息列表
+      
+      
+    
+    
+      
+        
+          {{ index + 1 }}
+        
+      
+      
+      
+    
+    
+      
+        
+          信号列表
+        
+      
+      
+    
+    
+      
+        
+          {{ index + 1 }}
+        
+      
+      
+      
+    
+
+    
+      
+      
+        
+        
+      
+    
+  
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/data.ts b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d453b382c11e3fbed50ed1effe17b100da3c0cb3
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/data.ts
@@ -0,0 +1,40 @@
+import CallActivity from './task-components/CallActivity.vue';
+import ReceiveTask from './task-components/ReceiveTask.vue';
+import ScriptTask from './task-components/ScriptTask.vue';
+import ServiceTask from './task-components/ServiceTask.vue';
+import UserTask from './task-components/UserTask.vue';
+
+export const installedComponent = {
+  UserTask: {
+    name: '用户任务',
+    component: UserTask,
+  },
+  ServiceTask: {
+    name: '服务任务',
+    component: ServiceTask,
+  },
+  ScriptTask: {
+    name: '脚本任务',
+    component: ScriptTask,
+  },
+  ReceiveTask: {
+    name: '接收任务',
+    component: ReceiveTask,
+  },
+  CallActivity: {
+    name: '调用活动',
+    component: CallActivity,
+  },
+};
+
+export const getTaskCollapseItemName = (
+  elementType: keyof typeof installedComponent,
+) => {
+  return installedComponent[elementType].name;
+};
+
+export const isTaskCollapseItemShow = (
+  elementType: keyof typeof installedComponent,
+) => {
+  return installedComponent[elementType];
+};
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8cdb8ec4255e051620648e143d4748367f6a2921
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue
@@ -0,0 +1,361 @@
+
+
+
+  
+
+
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f33afaa60d5a019b5da8c47138888cb2dd488d7
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
@@ -0,0 +1,96 @@
+
+
+
+  
+    
+      
+      
+      
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26d84ecc4829d10023fcdb657407010e474bf056
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,156 @@
+
+
+
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
new file mode 100644
index 0000000000000000000000000000000000000000..801c5e5e6fd8ac270f9b8860640767b2a83a814c
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,129 @@
+
+
+
+  
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0241d0bb609193d8e6072c971eb79d2d93652f7d
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue
@@ -0,0 +1,111 @@
+
+
+
+  
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba94f270199388ed01a6928520902caa008cbc8d
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,563 @@
+
+
+
+  
+
diff --git a/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/time-event-config/CycleConfig.vue b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/time-event-config/CycleConfig.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5add5e9ce955c8cf9b1d868bdca11f5b4ac407e
--- /dev/null
+++ b/apps/web-antd/src/components/bpmnProcessDesigner/package/penal/time-event-config/CycleConfig.vue
@@ -0,0 +1,380 @@
+
+
+  
+    
+      
+        
+      
+      
+        
+        
+        
+        
+        
+        
+        
+      
+      
+        
+          
+            
+              
+                每{{ f.label }}
+              
+              
+                从
+                
+                到
+                
+                之间每{{ f.label }}
+              
+              
+                从第
+                
+                开始每
+                
+                {{ f.label }}
+              
+               指定 
+            
+          
+          
+            
+              
+                {{ pad(n - 1) }}
+              
+            
+          
+        
+      
+    
+    
+      
+        
+      
+      
+        循环次数:
+      
+      
+        日期时间:
+      
+      
+        当前时长:
+      
+      
+        
+          秒:
+          
+          自定义
+        
+        
+          分:
+          
+          自定义
+        
+        
+          小时:
+          
+          自定义
+        
+        
+          天:
+          
+          自定义
+        
+        
+          月:
+          
+          自定义
+        
+        
+          年:
+          
+          自定义
+        
+      
+    
+      类型:
+      
+        
+        
+        
+      
+      
+    
+    
+      条件:
+      
+        
+          
+            
+          
+          
+            
+          
+          
+          
+          
+        
+      
+    
+    
+    
+      
+      
+        
+        
+      
+    
+    
+    
+      
+      
+        
+        
+      
+    
+    
+    
+      
+      
+        
+        
+      
+    
+    
+    
+      
+      
+        
+      
+    
+