diff --git a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
index 41abc99..cb38320 100644
--- a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
+++ b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
@@ -6,6 +6,7 @@
     :showCancelBtn="false"
     :showOkBtn="false"
     @register="registerModal"
+    @visible-change="handleVisibleChange"
   >
     <div id="formDesign"/>
     <template #centerFooter>
@@ -56,7 +57,6 @@
   const microAppStore = useMicroAppStore();
   const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
     changeLoading();
-    state.formDesignApp?.unmount();
     state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
       container: '#formDesign',
       props: {
@@ -89,6 +89,10 @@
     setModalProps(props);
   });
 
+  function handleVisibleChange(visible: boolean) {
+    !visible && state.formDesignApp?.unmount();
+  }
+
   /** 处理弹出框提交 */
   async function handleSubmitForm(status: string) {
     try {
diff --git a/src/views/workflow/model/helper/WorkflowModelDesign.vue b/src/views/workflow/model/helper/WorkflowModelDesign.vue
index c981727..d389963 100644
--- a/src/views/workflow/model/helper/WorkflowModelDesign.vue
+++ b/src/views/workflow/model/helper/WorkflowModelDesign.vue
@@ -7,6 +7,7 @@
     :showOkBtn="false"
     :wrapperProps="{ modalFooterHeight: 0 }"
     @register="registerModal"
+    @visible-change="handleVisibleChange"
   >
     <div id="workflowDesign"/>
   </BasicModal>
@@ -42,7 +43,6 @@
     changeLoading();
     // fix冲突: 延迟 100ms 后加载控制bpmn.js设计器跟model动画先后顺序,这样可以兼容非点击方式展开
     setTimeout(function () {
-      state.workflowDesignApp?.unmount();
       state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
         container: '#workflowDesign',
         props: {
@@ -76,6 +76,9 @@
       });
     }, 100);
   });
+  function handleVisibleChange(visible: boolean) {
+    !visible && state.workflowDesignApp?.unmount();
+  }
 </script>
 <style lang="less">
 
diff --git a/src/views/workflow/task/WorkflowChartModel.vue b/src/views/workflow/task/WorkflowChartModel.vue
index ddf3fb7..0fbd7d5 100644
--- a/src/views/workflow/task/WorkflowChartModel.vue
+++ b/src/views/workflow/task/WorkflowChartModel.vue
@@ -62,6 +62,10 @@
     } else createMessage.error('无法打开流程图,没有关联流程图ID!');
   }
 
+  onDeactivated(() => {
+    state.workflowDesignApp?.unmount();
+  });
+
   defineExpose({
     init
   });
diff --git a/src/views/workflow/task/WorkflowPreviewForm.vue b/src/views/workflow/task/WorkflowPreviewForm.vue
index 07d4abb..c9f9958 100644
--- a/src/views/workflow/task/WorkflowPreviewForm.vue
+++ b/src/views/workflow/task/WorkflowPreviewForm.vue
@@ -2,7 +2,7 @@
   <div id="formPreview" v-loading="state.loading"/>
 </template>
 <script lang="ts" setup>
-  import { PropType, reactive } from 'vue';
+  import { PropType, reactive, onDeactivated } from 'vue';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
   import { GlStateEnum } from '/@/enums/microAppEnum';
@@ -99,6 +99,10 @@
     } else createMessage.info('没有关联流程表单!');
   }
 
+  onDeactivated(() => {
+    state.formDesignApp?.unmount();
+  });
+
   async function startFormProcessDefinition(data: Partial<Workflow>, callback: Fn) {
     const processVarsity = Object.assign(data.vars || {}, state.formData);
     const processInsId = await startProcessDefinition({ ...data, vars: processVarsity });
diff --git a/src/views/workflow/task/popups/WorkflowChartModal.vue b/src/views/workflow/task/popups/WorkflowChartModal.vue
index 50bdd19..77c8988 100644
--- a/src/views/workflow/task/popups/WorkflowChartModal.vue
+++ b/src/views/workflow/task/popups/WorkflowChartModal.vue
@@ -6,6 +6,7 @@
     :showCancelBtn="false"
     :showOkBtn="false"
     @register="registerModal"
+    @visible-change="handleVisibleChange"
   >
     <div id="workflowChart"/>
   </BasicModal>
@@ -50,7 +51,6 @@
           const bpmnXml = await getProcessDefFlowChart(processDefId);
           state.bpmnData = { bpmnXml };
         }
-        state.workflowDesignApp?.unmount();
         state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
           container: '#workflowChart',
           props: {
@@ -73,6 +73,10 @@
     setModalProps(props);
   });
 
+  function handleVisibleChange(visible: boolean) {
+    !visible && state.workflowDesignApp?.unmount();
+  }
+
 </script>
 <style lang="less">
   .ant-modal {