UPDATE: VERSION-20260327

modeler/src/views/decision/graph/hooks.ts

@@ -7,7 +7,7 @@
  * that was distributed with this source code.
  */
 
-import { computed, type ComputedRef, ref, type Ref } from 'vue';
+import { computed, type ComputedRef, ref, type Ref, nextTick } from 'vue';
 import { type Dom, Graph, Node } from '@antv/x6';
 import type { NodeViewPositionEventArgs } from '@antv/x6/es/view/node/type';
 import { createGraphCanvas } from './canvas';
@@ -24,6 +24,8 @@ export interface UseGraphCanvas {
   graph: ComputedRef<Graph>;
   zoomIn: () => void;
   zoomOut: () => void;
+  destroyGraph: () => void;
+  clearGraph: () => void;
   fitToScreen: () => void;
   centerContent: () => void;
   resizeCanvas: () => void;
@@ -39,6 +41,36 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
   const eventListener = new EventListener();
   const currentZoom = ref<number>(0);
 
+
+  const clearGraph = ()=> {
+    if (graph.value) {
+      try {
+        graph.value.off();
+        graph.value.clearCells();
+      } catch (e) {
+        console.error('清空画布失败:', e);
+      }
+    }
+  }
+
+  const destroyGraph = ()=> {
+    eventListener.clear();
+    if (graph.value) {
+      clearGraph();
+
+      // 等待 Vue 完成卸载
+      nextTick(() => {
+        graph.value?.dispose();     // 销毁 Graph 实例
+        graph.value = null;
+        if (container.value) {
+          container.value.innerHTML = ''; // 清空容器内容
+        }
+      });
+    } else if (container.value) {
+      container.value.innerHTML = '';
+    }
+  }
+
   const handleGraphEvent = (name: string, fn: Function) => {
     eventListener.on(name, fn);
   };
@@ -243,6 +275,8 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
   return {
     container,
     readonly,
+    destroyGraph,
+    clearGraph,
     graph: graphInstance,
     eventListener,
     currentZoom,