From 680c0e0e8b00d0576c8aca320dfeb450d7c84cc0 Mon Sep 17 00:00:00 2001
From: HmEJ <mhangggggg@outlook.com>
Date: Tue, 12 May 2026 16:50:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 34a54c8ce..d10fee5da 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -277,6 +277,9 @@ const importXML = async (xml: string) => {
       isLoading.value = false
       // 高亮流程
       setProcessStatus(props.view)
+      // 启动 ResizeObserver，等待容器可见且有尺寸时自动居中
+      await nextTick()
+      startResizeObserver()
     }
   }
 }
@@ -376,4 +379,31 @@ onMounted(() => {
 onBeforeUnmount(() => {
   clearViewer()
 })
+
+let resizeObserver: ResizeObserver | null = null
+
+/** 启动 ResizeObserver 监听容器尺寸变化 */
+const startResizeObserver = () => {
+  stopResizeObserver()
+  if (!processCanvas.value) return
+
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const { width, height } = entry.contentRect
+      if (width > 0 && height > 0 && bpmnViewer.value) {
+        processReZoom()
+        stopResizeObserver()
+      }
+    }
+  })
+  resizeObserver.observe(processCanvas.value)
+}
+
+/** 停止 ResizeObserver */
+const stopResizeObserver = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+}
 </script>