feat(editor): 新增props-panel-unmounted事件

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);

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();

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,