From 9e590c5cf73c9925f7aad562409f31c1ff273b18 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 26 Jun 2025 21:06:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9Eprops-panel-u?=
 =?UTF-8?q?nmounted=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                         | 5 +++++
 packages/editor/src/layouts/props-panel/FormPanel.vue  | 7 ++++++-
 packages/editor/src/layouts/props-panel/PropsPanel.vue | 6 ++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 2ef6d3be..36eecf6c 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -97,6 +97,7 @@
           :extend-state="extendFormState"
           :disabled-show-src="disabledShowSrc"
           @mounted="propsPanelMountedHandler"
+          @unmounted="propsPanelUnmountedHandler"
           @form-error="propsPanelFormErrorHandler"
           @submit-error="propsPanelSubmitErrorHandler"
         >
@@ -163,6 +164,7 @@ defineOptions({
 
 const emit = defineEmits<{
   'props-panel-mounted': [instance: InstanceType<typeof FormPanel>];
+  'props-panel-unmounted': [];
   'update:modelValue': [value: MApp | null];
   'props-form-error': [e: any];
   'props-submit-error': [e: any];
@@ -235,6 +237,9 @@ provide<EventBus>('eventBus', new EventEmitter());
 const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
   emit('props-panel-mounted', e);
 };
+const propsPanelUnmountedHandler = () => {
+  emit('props-panel-unmounted');
+};
 
 const propsPanelSubmitErrorHandler = (e: any) => {
   emit('props-submit-error', e);
diff --git a/packages/editor/src/layouts/props-panel/FormPanel.vue b/packages/editor/src/layouts/props-panel/FormPanel.vue
index 92d23e4e..e6c8b473 100644
--- a/packages/editor/src/layouts/props-panel/FormPanel.vue
+++ b/packages/editor/src/layouts/props-panel/FormPanel.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@@ -78,6 +78,7 @@ const emit = defineEmits<{
   'submit-error': [e: any];
   'form-error': [e: any];
   mounted: [internalInstance: any];
+  unmounted: [];
 }>();
 
 const services = useServices();
@@ -104,6 +105,10 @@ onMounted(() => {
   emit('mounted', internalInstance?.proxy);
 });
 
+onUnmounted(() => {
+  emit('unmounted');
+});
+
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const values = await configFormRef.value?.submitForm();
diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue
index 4a9b56d0..bffbf306 100644
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@@ -13,6 +13,7 @@
       @submit-error="errorHandler"
       @form-error="errorHandler"
       @mounted="mountedHandler"
+      @unmounted="unmountedHandler"
     ></FormPanel>
 
     <Resizer v-if="showStylePanel" @change="widthChange"></Resizer>
@@ -89,6 +90,7 @@ const emit = defineEmits<{
   'submit-error': [e: any];
   'form-error': [e: any];
   mounted: [internalInstance: InstanceType<typeof FormPanel>];
+  unmounted: [];
 }>();
 
 const { editorService, uiService, propsService, storageService } = useServices();
@@ -165,6 +167,10 @@ const mountedHandler = () => {
   }
 };
 
+const unmountedHandler = () => {
+  emit('unmounted');
+};
+
 const propsPanelEl = useTemplateRef('propsPanel');
 const propsPanelWidth = ref(
   storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300,