From 0d901c018ffe96d042f1a6e89ad2a90d38a06277 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 4 Sep 2024 19:47:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20stage=E9=94=80=E6=AF=81=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/hooks/use-stage.ts                     | 6 +-----
 packages/editor/src/layouts/workspace/viewer/Stage.vue     | 4 ++++
 .../editor/src/layouts/workspace/viewer/StageOverlay.vue   | 7 ++++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
index dabea73a..ebd93637 100644
--- a/packages/editor/src/hooks/use-stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -131,9 +131,5 @@ export const useStage = (stageOptions: StageOptions) => {
     }
   });
 
-  onBeforeUnmount(() => {
-    stage.destroy();
-  });
-
   return stage;
 };
diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue
index 98b578e5..82e971d0 100644
--- a/packages/editor/src/layouts/workspace/viewer/Stage.vue
+++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue
@@ -123,6 +123,10 @@ watchEffect(() => {
   });
 });
 
+onBeforeUnmount(() => {
+  stage?.destroy();
+});
+
 watch(zoom, (zoom) => {
   if (!stage || !zoom) return;
   stage.setZoom(zoom);
diff --git a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
index 1eded88a..b1fd74aa 100644
--- a/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
+++ b/packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
 import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
@@ -62,6 +62,11 @@ watch(stageOverlay, (stageOverlay) => {
   }
 });
 
+onBeforeUnmount(() => {
+  services?.stageOverlayService.get('stage')?.destroy();
+  services?.stageOverlayService.set('stage', null);
+});
+
 const closeOverlayHandler = () => {
   services?.stageOverlayService.closeOverlay();
 };