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

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

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

@@ -2,24 +2,20 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import {
-  RiAddLine,
-  RiArrowDownSLine,
-} from '@remixicon/react'
+import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  ArrowUpRight,
-} from '@/app/components/base/icons/src/vender/line/arrows'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContext } from '@/context/modal-context'
 import { fetchApiBasedExtensionList } from '@/service/common'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type ApiBasedExtensionSelectorProps = {
-  value: string
-  onChange: (value: string) => void
+  value: string;
+  onChange: (value: string) => void;
 }
 
 const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
@@ -28,10 +24,8 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const {
-    setShowAccountSettingModal,
-    setShowApiBasedExtensionModal,
-  } = useModalContext()
+  const { setShowAccountSettingModal, setShowApiBasedExtensionModal }
+    = useModalContext()
   const { data, mutate } = useSWR(
     '/api-based-extension',
     fetchApiBasedExtensionList,
@@ -43,78 +37,93 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
 
   const currentItem = data?.find(item => item.id === value)
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
     <PortalToFollowElem
       open={open}
       onOpenChange={setOpen}
-      placement='bottom-start'
+      placement="bottom-start"
       offset={4}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} className='w-full'>
-        {
-          currentItem
-            ? (
-              <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5'>
-                <div className='text-sm text-text-primary'>{currentItem.name}</div>
-                <div className='flex items-center'>
-                  <div className='mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary'>
-                    {currentItem.api_endpoint}
-                  </div>
-                  <RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
-                </div>
+      <PortalToFollowElemTrigger
+        onClick={() => setOpen(v => !v)}
+        className="w-full"
+      >
+        {currentItem ? (
+          <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5">
+            <div className="text-sm text-text-primary">{currentItem.name}</div>
+            <div className="flex items-center">
+              <div className="mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary">
+                {currentItem.api_endpoint}
               </div>
-            )
-            : (
-              <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5 text-sm text-text-quaternary'>
-                {t('common.apiBasedExtension.selector.placeholder')}
-                <RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
-              </div>
-            )
-        }
+              <RiArrowDownSLine
+                className={`h-4 w-4 text-text-secondary ${
+                  !open && 'opacity-60'
+                }`}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5 text-sm text-text-quaternary">
+            {t('common.apiBasedExtension.selector.placeholder')}
+            <RiArrowDownSLine
+              className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`}
+            />
+          </div>
+        )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[102] w-[calc(100%-32px)] max-w-[576px]'>
-        <div className='z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
-          <div className='p-1'>
-            <div className='flex items-center justify-between px-3 pb-1 pt-2'>
-              <div className='text-xs font-medium text-text-tertiary'>
+      <PortalToFollowElemContent className="z-[102] w-[calc(100%-32px)] max-w-[576px]">
+        <div className="z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
+          <div className="p-1">
+            <div className="flex items-center justify-between px-3 pb-1 pt-2">
+              <div className="text-xs font-medium text-text-tertiary">
                 {t('common.apiBasedExtension.selector.title')}
               </div>
               <div
-                className='flex cursor-pointer items-center text-xs text-text-accent'
+                className={`${
+                  showLayout ? 'flex' : 'hidden'
+                } cursor-pointer items-center text-xs text-text-accent`}
                 onClick={() => {
                   setOpen(false)
-                  setShowAccountSettingModal({ payload: 'api-based-extension' })
+                  setShowAccountSettingModal({
+                    payload: 'api-based-extension',
+                  })
                 }}
               >
                 {t('common.apiBasedExtension.selector.manage')}
-                <ArrowUpRight className='ml-0.5 h-3 w-3' />
+                <ArrowUpRight className="ml-0.5 h-3 w-3" />
               </div>
             </div>
-            <div className='max-h-[250px] overflow-y-auto'>
-              {
-                data?.map(item => (
-                  <div
-                    key={item.id}
-                    className='w-full cursor-pointer rounded-md px-3 py-1.5 text-left hover:stroke-state-base-hover'
-                    onClick={() => handleSelect(item.id!)}
-                  >
-                    <div className='text-sm text-text-primary'>{item.name}</div>
-                    <div className='text-xs text-text-tertiary'>{item.api_endpoint}</div>
+            <div className="max-h-[250px] overflow-y-auto">
+              {data?.map(item => (
+                <div
+                  key={item.id}
+                  className="w-full cursor-pointer rounded-md px-3 py-1.5 text-left hover:stroke-state-base-hover"
+                  onClick={() => handleSelect(item.id!)}
+                >
+                  <div className="text-sm text-text-primary">{item.name}</div>
+                  <div className="text-xs text-text-tertiary">
+                    {item.api_endpoint}
                   </div>
-                ))
-              }
+                </div>
+              ))}
             </div>
           </div>
-          <div className='h-[1px] bg-divider-regular' />
-          <div className='p-1'>
+          <div className="h-[1px] bg-divider-regular" />
+          <div className="p-1">
             <div
-              className='flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent'
+              className="flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent"
               onClick={() => {
                 setOpen(false)
-                setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })
+                setShowApiBasedExtensionModal({
+                  payload: {},
+                  onSaveCallback: () => mutate(),
+                })
               }}
             >
-              <RiAddLine className='mr-2 h-4 w-4' />
+              <RiAddLine className="mr-2 h-4 w-4" />
               {t('common.operation.add')}
             </div>
           </div>