模块间通信解耦

这是一个非常典型的**"模块间通信解耦"**问题。

核心原因在于：你的**"接收消息的文件"（简称文件A）和"持有Iframe实例的组件"**（简称组件B）处于两个不同的时空维度。

时序问题（Race Condition） ：文件A（通常是入口的 message listener）可能在组件B 挂载完成并调用 setIframeCtrl 之前就已经收到了父系统的消息。此时 getIframeCtrl() 返回的是 null。
引用隔离 ：虽然你用了 export let，但如果存在 Webpack/Vite 的模块热更新（HMR）或者复杂的打包逻辑，有时候文件A引用的 central-iframe-manager 模块和组件B引用的可能不是同一个闭包（虽然较少见，但存在）。
脏数据：组件B可能因为某种原因重新执行了（比如之前的 destroy 逻辑没清理干净），导致全局变量里存的是上一次的旧实例，而组件里用的是新实例。

最佳解决方案：发布订阅模式 (Event Bus)

不要尝试把复杂的 Iframe 实例在全局变量里传来传去。

最佳实践是："文件A只负责喊话，组件B负责干活"。

由于组件B（CentralIframeContainer）手里握着"活"的、肯定能用的 iframeCtrl，所以应该由它来监听一个全局事件。

请按照以下步骤重构，这将彻底解决"文件A拿不到实例"或"拿到坏实例"的问题。

第一步：创建一个简单的事件总线

在 src/utils/central-event-bus.ts (新建) 中：

TypeScript

复制代码

// 一个极简的事件总线，专门用于处理跨文件消息通信
import mitt from 'mitt' // 如果你有 mitt 库，没有的话看下面手写版
// 或者使用 node 的 EventEmitter，或者 VueUse 的 useEventBus
// 这里提供一个最轻量的手写版，无需依赖：

type Events = {
  'global-theme-change': { theme: string | number };
  'global-language-change': { lang: string };
};

class CentralEventBus {
  private listeners: { [key: string]: Function[] } = {};

  on<T extends keyof Events>(event: T, callback: (data: Events[T]) => void) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }

  off<T extends keyof Events>(event: T, callback: (data: Events[T]) => void) {
    if (!this.listeners[event]) return;
    this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
  }

  emit<T extends keyof Events>(event: T, data: Events[T]) {
    if (!this.listeners[event]) return;
    this.listeners[event].forEach(cb => cb(data));
  }
}

export const centralBus = new CentralEventBus();

运行

第二步：修改"那个文件"（接收父系统消息的文件）

不要去 getIframeCtrl 了，直接广播事件。

TypeScript

复制代码

// 你的消息处理文件 (e.g., message-handler.ts)
import { centralBus } from '@/utils/central-event-bus'

// ... 当收到父系统的消息时 ...
if (msg.type === 'theme-check' || msg.type === 'theme-change') {
  console.log('[MessageHandler] 收到父系统主题变动，广播给 Iframe 组件');
  
  // 🔥 只管广播，不关心谁来处理，也不需要拿 iframe 实例
  centralBus.emit('global-theme-change', { 
    theme: msg.data // 确保这里的数据格式是你想要的
  });
}

运行

第三步：修改 `CentralIframeContainer.vue`

让握有实权的组件来响应这个广播。

TypeScript

复制代码

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { centralBus } from '@/utils/central-event-bus'

// ... 之前的代码 ...

// 定义处理函数
const handleGlobalThemeChange = (payload: { theme: string | number }) => {
  console.log('[CentralKeepAlive] 收到总线主题通知:', payload);
  
  // 因为就在组件内部，直接用本地变量 iframeCtrl，绝对安全！
  // 同时也利用了我们之前写的 sendThemeMessage 封装逻辑
  sendThemeMessage(payload.theme); 
}

onMounted(() => {
  // ... 原有的初始化代码 ...

  // 🎧 订阅总线消息
  centralBus.on('global-theme-change', handleGlobalThemeChange);
});

onUnmounted(() => {
  // ... 原有的清理代码 ...
  
  // 记得取消订阅，防止内存泄漏
  centralBus.off('global-theme-change', handleGlobalThemeChange);
});
</script>

运行

为什么这样做是完美的？

解耦 (Decoupling) ：消息接收层不需要知道 Iframe 是否存在，也不需要引用沉重的 iframeCtrl 对象。它只负责"通知"。
避免时序问题：
- 如果组件已经初始化，它会立即响应事件。
- 如果组件还没初始化（比如用户还没登录进来），事件会被忽略（这是正确的，因为 iframe 还没加载，不需要变主题）。
- 如果需要"缓存"未初始化的消息（比如刚加载还没 mount 时父系统就发消息了），你可以简单地在组件 onMounted 时去读取一次当前的 Store 状态来"对齐"状态，而不是依赖消息的实时送达。
绝对的实例安全性 ：sendThemeMessage 是在组件内部执行的，它访问的是闭包内的、经过 markRaw 处理的、肯定指向当前 DOM 的 iframeCtrl。永远不会出现 getIframeCtrl 拿到旧对象的问题。

补充检查：如果你必须用 get/set 模式

如果你不想改动架构引入 EventBus，那么你的问题 99% 出在 初始化时机。

在"那个文件"里，尝试打印一下：

TypeScript

复制代码

// 在那个文件中
const ctrl = getIframeCtrl();
console.log('尝试获取 iframeCtrl:', ctrl); // 这里很可能是 null

if (!ctrl) {
  console.warn('iframeCtrl 尚未初始化，消息被丢弃');
  // 这就是为什么失败的原因：父系统发消息太早了，或者组件还没 set 进去
} else {
  ctrl.send(...)
}

如果是这个问题，你依然需要一种机制，在 setIframeCtrl 成功后再补发一次消息。这会让代码变得非常复杂（需要队列机制）。

结论：请直接使用上述的 Event Bus 方案，简单、解耦且可靠。

-新

这是一个基于 发布-订阅模式 (Event Bus) 的完整、零依赖、TypeScript 强类型的解决方案。

这种方式完美解耦了"消息接收文件"与"Vue组件"，彻底解决了 getIframeCtrl() 为空或引用错误的问题。

1. 创建 EventBus Hook

新建文件 src/hooks/use-central-event-bus.ts。

我们创建一个单例总线，这样无论在哪个文件引用，用的都是同一个通道。

TypeScript

复制代码

// src/hooks/use-central-event-bus.ts
import { onUnmounted } from 'vue'

// 1. 定义事件类型映射 (强类型提示)
type EventMap = {
  'global-theme-change': { theme: string | number }; // 主题切换
  'global-language-change': { lang: string };        // 语言切换 (预留)
  // 你可以在这里继续添加其他事件...
}

// 2. 简单的事件中心实现 (单例)
class EventBus {
  private listeners: Map<keyof EventMap, Set<Function>> = new Map()

  on<T extends keyof EventMap>(event: T, callback: (payload: EventMap[T]) => void) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set())
    }
    this.listeners.get(event)!.add(callback)
  }

  off<T extends keyof EventMap>(event: T, callback: (payload: EventMap[T]) => void) {
    if (this.listeners.has(event)) {
      this.listeners.get(event)!.delete(callback)
    }
  }

  emit<T extends keyof EventMap>(event: T, payload: EventMap[T]) {
    if (this.listeners.has(event)) {
      this.listeners.get(event)!.forEach((cb) => cb(payload))
    }
  }
}

// 全局单例实例
const bus = new EventBus()

// 3. 导出 Composable 函数 (Vue 风格)
export function useCentralEventBus() {
  
  // 发送事件 (可以在 .ts 文件或 .vue 文件中使用)
  const emit = <T extends keyof EventMap>(event: T, payload: EventMap[T]) => {
    bus.emit(event, payload)
  }

  // 监听事件 (建议只在 .vue setup 中使用)
  const on = <T extends keyof EventMap>(event: T, callback: (payload: EventMap[T]) => void) => {
    bus.on(event, callback)
    
    // 自动清理机制：组件卸载时自动移除监听，防止内存泄漏
    // 注意：如果在非 Vue 组件文件 (.ts) 中使用 on，onUnmounted 会失效，需手动 off
    try {
      onUnmounted(() => {
        bus.off(event, callback)
      })
    } catch (e) {
      // 捕获异常，防止在非组件环境下调用 onUnmounted 报错
    }
    
    // 返回一个手动清理函数
    return () => bus.off(event, callback)
  }

  return { emit, on }
}

运行

2. 修改：接收消息的外部文件 (发送方)

在你原本 getIframeCtrl() 失败的那个 TS 文件中，改为使用 emit 广播消息。

TypeScript

复制代码

// src/utils/central-message-handler.ts (或者是你接收父系统消息的文件)
import { useCentralEventBus } from '@/hooks/use-central-event-bus'

const { emit } = useCentralEventBus()

// ... 当收到父系统的 theme-check 或 theme-change 消息时 ...
export const handleParentMessage = (msg: any) => {
  // 假设 msg.data 是父系统传来的主题 'light' 或 'dark'
  if (msg.type === 'theme-check' || msg.type === 'theme-change') {
    console.log('[MessageHandler] 收到父系统主题变动，通过总线广播...');
    
    // ❌ 删除旧代码： const ctrl = getIframeCtrl(); ctrl.send(...)
    
    // ✅ 新代码：直接广播，我不关心 iframe 在哪里，也不关心它有没有初始化
    emit('global-theme-change', { 
      theme: msg.data 
    })
  }
}

运行

3. 修改：Iframe 组件 (接收方)

在 CentralIframeContainer.vue 中，负责真正干活。因为它是保活的，只要它初始化过一次，它就永远在监听。

TypeScript

复制代码

<script setup lang="ts">
import { watch, ref, onMounted } from 'vue' // ... 其他原本的引用
import { useCentralEventBus } from '@/hooks/use-central-event-bus'

// ... 原本的 iframeCtrl 定义 ...
let iframeCtrl: ParentIframe | null = null 

// 引入总线
const bus = useCentralEventBus()

// 定义发送逻辑 (复用你原本的逻辑)
const sendThemeMessage = (rawTheme: string | number) => {
  if (!iframeCtrl) {
    console.warn('[CentralKeepAlive] IframeCtrl 未初始化，跳过发送')
    return
  }
  
  const themeVal = rawTheme === 'light' ? 0 : 1
  
  // 激活并发送
  iframeCtrl.switchChild('CENTRAL')
  iframeCtrl.send({
    type: 'theme-change',
    data: { theme: themeVal }
  }, 'CENTRAL')
  
  console.log('[CentralKeepAlive] 主题消息已同步至子系统:', themeVal)
}

// 核心：在初始化后开始监听总线
onMounted(async () => {
  // ... 你原本的初始化逻辑 (initializeIframe 等) ...
  
  // ✅ 注册监听
  // 当外部文件 emit 'global-theme-change' 时，这里会立即执行
  // useCentralEventBus 内部处理了 onUnmounted 自动解绑，无需手动清理
  bus.on('global-theme-change', (payload) => {
    console.log('[CentralKeepAlive] 总线收到通知，执行发送逻辑')
    sendThemeMessage(payload.theme)
  })
})

// ... 其他代码
</script>

运行

为什么这个版本能完美工作？

时空解耦：

外部文件（Message Handler）不再依赖 iframeCtrl 实例。它只负责"喊一嗓子"（emit）。如果 iframe 还没初始化（比如用户刚进系统还没加载 iframe），这一嗓子喊出去没人听，也就没事发生（这是正确的逻辑）。一旦 iframe 加载了，它就竖起耳朵听（on）。
闭包安全：

在 Vue 组件内部调用的 sendThemeMessage，使用的是组件作用域内真实、鲜活、未被污染的 iframeCtrl 局部变量。永远不会出现 getIframeCtrl 拿到旧引用的情况。
内存安全：

useCentralEventBus 内部封装了 onUnmounted，当整个 App 销毁时，监听器会自动移除，不会导致内存泄漏。

模块间通信解耦

最佳解决方案：发布订阅模式 (Event Bus)

第一步：创建一个简单的事件总线

第二步：修改"那个文件"（接收父系统消息的文件）

第三步：修改 CentralIframeContainer.vue

为什么这样做是完美的？

补充检查：如果你必须用 get/set 模式

1. 创建 EventBus Hook

2. 修改：接收消息的外部文件 (发送方)

3. 修改：Iframe 组件 (接收方)

为什么这个版本能完美工作？

第三步：修改 `CentralIframeContainer.vue`