feat: warm-flow iframe主题切换

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>

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 };
+}