diff --git a/apps/web-antd/src/views/workflow/components/flow-designer.vue b/apps/web-antd/src/views/workflow/components/flow-designer.vue
index 418f41761..3fd462ea8 100644
--- a/apps/web-antd/src/views/workflow/components/flow-designer.vue
+++ b/apps/web-antd/src/views/workflow/components/flow-designer.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useAppConfig, useTabs } from '@vben/hooks';
 import { stringify } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
+import { useEventListener } from '@vueuse/core';
+
 defineOptions({ name: 'FlowDesigner' });
 
 const route = useRoute();
@@ -43,8 +44,7 @@ function messageHandler(event: MessageEvent) {
 }
 
 // iframe监听组件内设计器保存事件
-onMounted(() => window.addEventListener('message', messageHandler));
-onUnmounted(() => window.removeEventListener('message', messageHandler));
+useEventListener('message', messageHandler);
 </script>
 
 <template>