频谱: iframe-page-comps/IframeSpectrogram.vue

src/components/iframe-page-comps/IframeSpectrogram.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+// 不再需要 props 来接收数据
+
+// 获取 iframe 的 DOM 引用
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+// iframe 的 src URL，指向 Spectrogram.html
+const src = computed(() => import.meta.env.BASE_URL + 'html-page/Spectrogram.html');
+
+// 标记 iframe 是否已加载完成并已发送初始化指令
+const isIframeInitialized = ref(false);
+
+// iframe 加载完成后的回调
+function onIframeLoad() {
+  console.log('[🧩] 组件 (频谱图): iframe 已加载');
+  // 发送初始化指令给 iframe
+  if (iframeRef.value?.contentWindow) {
+    console.log('[🧩] 组件 (频谱图): 向 iframe 发送 INIT_WIDGET 指令');
+    // targetOrigin 设置为 '*' 为了简单，生产环境应指定确切来源
+    // 可选：如果需要传递配置，可以在 INIT_WIDGET 消息中包含 config
+    iframeRef.value.contentWindow.postMessage({ type: 'INIT_WIDGET' /*, config: props.config */ }, '*');
+    isIframeInitialized.value = true; // 标记已发送初始化指令
+
+    // 发送初始数据（如果已有）
+    // 稍微延迟发送，给 iframe 一点时间处理 INIT_WIDGET
+    setTimeout(() => {
+      // 初始数据将通过暴露的方法发送，这里不再处理
+      console.log('[🧩] 组件 (频谱图): iframe 初始化完成，等待通过 ref 调用发送数据。');
+    }, 0);
+  } else {
+    console.error('[🧩] 组件 (频谱图): 无法访问 iframe 的 contentWindow');
+  }
+}
+
+// 将数据发送到 iframe 的函数
+function sendDataToIframe(payload: Array<number>, time: string) {
+  // 添加 time 参数
+  // 确保 iframe 存在、其 contentWindow 可访问且已发送初始化指令
+  if (iframeRef.value?.contentWindow && isIframeInitialized.value) {
+    console.log('[🧩] 组件 (频谱图): 向 iframe 发送数据:', payload, '时间:', time);
+    // 使用 toRaw 获取原始数据对象
+    // 将时间和数据一起发送
+    iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload: toRaw(payload), time: time }, '*');
+  } else {
+    console.warn('[🧩] 组件 (频谱图): iframe 未初始化或数据无效，无法发送 FEED_DATA 消息。');
+  }
+}
+
+// 不再需要监听 props
+
+// 可选：监听来自 iframe 的 WIDGET_READY 消息以实现更精确的控制 (与星座图类似)
+// onMounted(() => { ... });
+// onUnmounted(() => { ... });
+// function handleIframeMessage(event: MessageEvent) { ... }
+
+// 暴露 sendDataToIframe 方法给父组件
+defineExpose({
+  sendData: sendDataToIframe,
+});
+</script>
+
+<template>
+  <iframe ref="iframeRef" :src="src" frameborder="0" allowfullscreen @load="onIframeLoad"></iframe>
+</template>
+
+<style scoped>
+iframe {
+  border: none; /* 移除边框 */
+  width: 100%; /* 默认占满容器 */
+  height: 100%; /* 默认占满容器 */
+}
+</style>