feat(iframe): 实现 iframe 通信的消息通道功能

- 新增 useChannel hook 用于基于 iframe 通信管理布局显示
- 实现 MessageChannel 工具类，用于父页面与 iframe 之间的安全跨域通信
- 更新 header-wrapper 组件，根据通道通信状态条件性渲染
- 在多个组件中集成消息通道功能
- 添加通过 postMessage API 控制布局的支持
- 改进 iframe 与父应用程序的集成

web/hooks/use-channel.ts

@@ -0,0 +1,41 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+// enum channelType {
+//   layout = 'layout',
+// }
+
+// export function useChannel(type: channelType) {
+//   switch (type) {
+//     case 'layout':
+//       return useGetLayoutByChannel();
+//   }
+// }
+
+export function useGetLayoutByChannel(message = 'layout 信息') {
+  const [showLayout, setShowLayout] = useState(true)
+
+  // 与父节点通信， 若有通信内容，获取父页面的传递内容
+  // 由父节点控制页面展示内容， 默认展示
+  useEffect(() => {
+    const msg = {
+      type: 'layout',
+      message,
+    }
+
+    // 后续通过 channel 持久化，优化显示速度
+    const win = window as any
+    if (win.port) {
+      win.port.postMessage(msg)
+      win.port.onmessage = (event: MessageEvent) => {
+        // console.log(`${msg.message}: ${event.data}`)
+        setShowLayout(event.data)
+      }
+    }
+    else {
+      // console.warn('window.port 不存在，无法发送消息')
+    }
+  }, [showLayout, message])
+
+  return showLayout
+}