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

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

web/app/components/header/header-wrapper.tsx

@@ -2,6 +2,7 @@
 import { usePathname, useSearchParams } from 'next/navigation'
 import s from './index.module.css'
 import classNames from '@/utils/classnames'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type HeaderWrapperProps = {
   children: React.ReactNode
@@ -18,12 +19,13 @@ const HeaderWrapper = ({
   const headerParam = searchParams.get('header')
   const showHeader = !headerParam || headerParam === '1'
 
-  // console.log('headerParam: ', headerParam, !headerParam, (headerParam === '1'))
-  // console.log('showHeader: ', showHeader)
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   if (!showHeader) return null
   return (
     <div className={classNames(
-      'sticky top-0 left-0 right-0 z-30 flex flex-col grow-0 shrink-0 basis-auto min-h-[56px]',
+      `sticky top-0 left-0 right-0 z-30 ${showLayout ? 'flex' : 'hidden'} flex-col grow-0 shrink-0 basis-auto min-h-[56px]`,
       s.header,
       isBordered ? 'border-b border-divider-regular' : '',
     )}