From 094635cc0eaa71d1130089c0326bec2a4c62d3a5 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 11 Jun 2024 19:31:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20overlay=E9=94=80=E6=AF=81=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E5=BC=82=E5=B8=B8page=E4=B8=8A=E7=9A=84=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui-vue2/src/overlay/src/index.vue | 19 ++++++++++++++++---
 packages/ui/src/overlay/src/index.vue      | 19 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/ui-vue2/src/overlay/src/index.vue b/packages/ui-vue2/src/overlay/src/index.vue
index c88f32c6..46d8e30e 100644
--- a/packages/ui-vue2/src/overlay/src/index.vue
+++ b/packages/ui-vue2/src/overlay/src/index.vue
@@ -4,10 +4,10 @@
   </magic-ui-container>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, onBeforeUnmount, ref } from 'vue';
 
 import Core from '@tmagic/core';
-import type { MNode } from '@tmagic/schema';
+import type { MContainer, MNode, MPage } from '@tmagic/schema';
 
 import useApp from '../../useApp';
 
@@ -43,12 +43,25 @@ export default defineComponent({
       }
     };
 
-    app?.page?.on('editor:select', (info, path) => {
+    const editorSelectHandler = (
+      info: {
+        node: MNode;
+        page: MPage;
+        parent: MContainer;
+      },
+      path: MNode[],
+    ) => {
       if (path.find((node: MNode) => node.id === props.config.id)) {
         openOverlay();
       } else {
         closeOverlay();
       }
+    };
+
+    app?.page?.on('editor:select', editorSelectHandler);
+
+    onBeforeUnmount(() => {
+      app?.page?.off('editor:select', editorSelectHandler);
     });
 
     return {
diff --git a/packages/ui/src/overlay/src/index.vue b/packages/ui/src/overlay/src/index.vue
index b63e707d..0e8eb186 100644
--- a/packages/ui/src/overlay/src/index.vue
+++ b/packages/ui/src/overlay/src/index.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 
-import type { MContainer, MNode } from '@tmagic/schema';
+import type { MContainer, MNode, MPage } from '@tmagic/schema';
 
 import useApp from '../../useApp';
 
@@ -41,11 +41,24 @@ const { app, node } = useApp({
   },
 });
 
-app?.page?.on('editor:select', (info, path) => {
+const editorSelectHandler = (
+  info: {
+    node: MNode;
+    page: MPage;
+    parent: MContainer;
+  },
+  path: MNode[],
+) => {
   if (path.find((node: MNode) => node.id === props.config.id)) {
     node?.instance.openOverlay();
   } else {
     node?.instance.closeOverlay();
   }
+};
+
+app?.page?.on('editor:select', editorSelectHandler);
+
+onBeforeUnmount(() => {
+  app?.page?.off('editor:select', editorSelectHandler);
 });
 </script>