From cfc57f17af8c7b32ca31056570aa422219963d04 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 13 Dec 2022 15:32:13 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=BB=84=E4=BB=B6=E9=94=80?=
 =?UTF-8?q?=E6=AF=81=E6=97=B6=E7=A7=BB=E9=99=A4service=E7=9A=84=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                   |  8 ++++++--
 packages/editor/src/layouts/PropsPanel.vue       |  6 +++++-
 .../editor/src/layouts/sidebar/LayerPanel.vue    | 16 ++++++++++------
 packages/editor/src/services/BaseService.ts      |  8 ++++++--
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 6fc125f6..53ed643f 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -227,7 +227,7 @@ export default defineComponent({
   emits: ['props-panel-mounted', 'update:modelValue'],
 
   setup(props, { emit }) {
-    editorService.on('root-change', (value, preValue) => {
+    const rootChangeHandler = (value: MApp, preValue?: MApp | null) => {
       const nodeId = editorService.get<MNode | null>('node')?.id || props.defaultSelected;
       let node;
       if (nodeId) {
@@ -247,7 +247,9 @@ export default defineComponent({
       if (toRaw(value) !== toRaw(preValue)) {
         emit('update:modelValue', value);
       }
-    });
+    };
+
+    editorService.on('root-change', rootChangeHandler);
 
     // 初始值变化，重新设置节点信息
     watch(
@@ -326,6 +328,8 @@ export default defineComponent({
       uiService.resetState();
       componentListService.resetState();
       codeBlockService.resetState();
+
+      editorService.off('root-change', rootChangeHandler);
     });
 
     const services: Services = {
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 06d03109..75b12625 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup name="MEditorPropsPanel">
-import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
 import type { FormValue } from '@tmagic/form';
@@ -56,6 +56,10 @@ onMounted(() => {
   emit('mounted', internalInstance);
 });
 
+onUnmounted(() => {
+  services?.propsService.off('props-configs-change', init);
+});
+
 watchEffect(() => {
   if (configForm.value && stage.value) {
     configForm.value.formState.stage = stage.value;
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index 42dd373d..0a026fcb 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -104,12 +104,6 @@ const filterText = ref('');
 // 默认展开节点
 const defaultExpandedKeys = computed(() => (selectedIds.value.length > 0 ? selectedIds.value : []));
 
-editorService?.on('remove', () => {
-  setTimeout(() => {
-    tree.value?.getNode(editorService.get('node').id)?.updateChildren();
-  }, 0);
-});
-
 // 触发画布单选
 const select = async (data: MNode) => {
   if (!data.id) {
@@ -273,9 +267,17 @@ const mouseleaveHandler = () => {
   isMultiSelectStatus.value = false;
 };
 
+const editorServiceRemoveHandler = () => {
+  setTimeout(() => {
+    tree.value?.getNode(editorService?.get('node').id)?.updateChildren();
+  }, 0);
+};
+
 let keycon: KeyController;
 
 onMounted(() => {
+  editorService?.on('remove', editorServiceRemoveHandler);
+
   keycon = new KeyController(tree.value?.$el);
   const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
   const ctrl = isMac ? 'meta' : 'ctrl';
@@ -293,6 +295,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   keycon.destroy();
+
+  editorService?.off('remove', editorServiceRemoveHandler);
 });
 
 // 鼠标是否按下标志，用于高亮状态互斥
diff --git a/packages/editor/src/services/BaseService.ts b/packages/editor/src/services/BaseService.ts
index 168cdc80..05dab1c0 100644
--- a/packages/editor/src/services/BaseService.ts
+++ b/packages/editor/src/services/BaseService.ts
@@ -170,8 +170,12 @@ export default class extends EventEmitter {
   }
 
   public removeAllPlugins() {
-    this.pluginOptionsList = {};
-    this.middleware = {};
+    Object.keys(this.pluginOptionsList).forEach((key) => {
+      this.pluginOptionsList[key] = [];
+    });
+    Object.keys(this.middleware).forEach((key) => {
+      this.middleware[key] = [];
+    });
   }
 
   private async doTask() {