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

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

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/service/common'
 import { useToastContext } from '@/app/components/base/toast'
 import { noop } from 'lodash-es'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 export type ApiBasedExtensionData = {
   name?: string
@@ -72,6 +73,9 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
     }
   }
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
     <Modal
       isShow
@@ -102,9 +106,9 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
           <a
             href={t('common.apiBasedExtension.linkUrl') || '/'}
             target='_blank' rel='noopener noreferrer'
-            className='group flex items-center text-xs font-normal text-text-accent'
+            className={`group ${showLayout ? 'flex' : 'hidden'} items-center text-xs font-normal text-text-accent`}
           >
-            <BookOpen01 className='mr-1 h-3 w-3' />
+            <BookOpen01 className='mr-1 h-3 w-3'/>
             {t('common.apiBasedExtension.link')}
           </a>
         </div>