From fb64d9f87a72b42f5598f8e42700c3bbdd0e9920 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 26 Jun 2025 12:05:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20warm-flow=20iframe=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflow/components/flow-preview.vue      |  6 ++-
 .../src/views/workflow/components/hook.ts     | 37 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 apps/web-antd/src/views/workflow/components/hook.ts

diff --git a/apps/web-antd/src/views/workflow/components/flow-preview.vue b/apps/web-antd/src/views/workflow/components/flow-preview.vue
index 6be8b703..44a7db8b 100644
--- a/apps/web-antd/src/views/workflow/components/flow-preview.vue
+++ b/apps/web-antd/src/views/workflow/components/flow-preview.vue
@@ -3,6 +3,8 @@ import { useAppConfig } from '@vben/hooks';
 import { stringify } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
+import { useWarmflowIframe } from './hook';
+
 defineOptions({ name: 'FlowPreview' });
 
 const props = defineProps<{ instanceId: string }>();
@@ -21,8 +23,10 @@ const params = {
  * iframe地址
  */
 const url = `${import.meta.env.VITE_GLOB_API_URL}/warm-flow-ui/index.html?${stringify(params)}`;
+
+const { iframeRef } = useWarmflowIframe();
 </script>
 
 <template>
-  <iframe :src="url" class="h-[500px] w-full border"></iframe>
+  <iframe ref="iframeRef" :src="url" class="h-[500px] w-full border"></iframe>
 </template>
diff --git a/apps/web-antd/src/views/workflow/components/hook.ts b/apps/web-antd/src/views/workflow/components/hook.ts
new file mode 100644
index 00000000..d08e6dbd
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/components/hook.ts
@@ -0,0 +1,37 @@
+import { onMounted, useTemplateRef, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+/**
+ * warmflow ref相关操作
+ * @returns hook
+ */
+export function useWarmflowIframe() {
+  const iframeRef = useTemplateRef<HTMLIFrameElement>('iframeRef');
+  const { isDark } = usePreferences();
+
+  onMounted(() => {
+    /**
+     * load只是iframe加载完 而非vue加载完
+     */
+    iframeRef.value?.addEventListener('load', async () => {
+      /**
+       * TODO: 这里可以优化 因为拿不到内部vue的mount状态
+       */
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const theme = isDark.value ? 'theme-dark' : 'theme-light';
+      iframeRef.value?.contentWindow?.postMessage({ type: theme });
+    });
+  });
+
+  // 监听主题切换 通知iframe切换
+  watch(isDark, (dark) => {
+    if (!iframeRef.value) {
+      return;
+    }
+    const theme = dark ? 'theme-dark' : 'theme-light';
+    iframeRef.value.contentWindow?.postMessage({ type: theme });
+  });
+
+  return { iframeRef };
+}