h5sdk/src/App.tsx

import { useEffect, useRef, useState } from 'react';
import { eventBus } from './lib/EventBus';
import { pmBridge } from './lib/PostMessageBridge';
import { useSetAtom } from 'jotai'
import { openModalAction } from './store';
import { LoginIndex } from './components/login';
import { RealNameIndex } from './components/real-name';
import { PaymentIndex } from './components/payment';
import { report } from './components/report';
import { getH5GameLinkApi } from './api';
import { getURLparams } from './utils';
import { init } from './components/init';
import { nativeInit } from './components/init/native-init';
import SlideBar from './components/slide-bar';
function App() {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [iframeUrl, setIframeUrl] = useState<string>('');

  const openModal = useSetAtom(openModalAction);
  // const modalState = useAtomValue(modalStackAtom);
 
  const getGameUrl = async () => {
    const res = await getH5GameLinkApi({game_id: getURLparams('game_id') || ''})
    setIframeUrl(`${res.game_url}?game_id=${getURLparams('game_id') || ''}&time=${Math.round(new Date().getTime()/1000)}`)
  }


  // 初始化通信桥
  useEffect(() => {
    if (iframeRef.current) {
      pmBridge.init(iframeRef.current);
    }
    return () => pmBridge.destroy();
  }, []);

  // EventBus 事件订阅
  useEffect(() => {
    // 处理登录请求
    const handleLoginReq = (payload: any) => {
      openModal({name:'login',item:{isOpen:true,requestId:payload.requestId,data:payload.data}})
      console.log("登录")
    };

    // 处理支付请求
    const handlePayReq = (payload: any) => {
      openModal({name:'payment',item:{isOpen:true,requestId:payload.requestId,data:payload.data}})
    };

    // 处理上报请求
    const handleReportReq = (payload: any) => {
      report(payload)
    };
    
    // 处理初始化请求
    const handleInitReq = (payload: any) => {
      // 微端是真
      if(getURLparams('is_native') === 'true'){
        nativeInit(payload)
      }else{
        init(payload)
      }
    }    

    eventBus.on('LOGIN_REQUEST', handleLoginReq);
    eventBus.on('PAY_REQUEST', handlePayReq);
    eventBus.on('REPORT_REQUEST', handleReportReq);
    eventBus.on('INIT_REQUEST', handleInitReq);

    return () => {
      eventBus.off('LOGIN_REQUEST', handleLoginReq);
      eventBus.off('PAY_REQUEST', handlePayReq);
      eventBus.off('REPORT_REQUEST', handleReportReq);
      eventBus.off('INIT_REQUEST', handleInitReq);
    };
  }, []);


  // 请求记载游戏链接
  useEffect(() => {
    getGameUrl()
  }, []);
  return (
    <div className="w-full h-screen relative bg-white font-sans overflow-hidden">
      
      {/* Iframe 游戏容器 */}
      <iframe 
        ref={iframeRef}
        src={iframeUrl} 
        title="Game Container"
        className="w-full h-full border-none"
        sandbox="allow-scripts allow-same-origin allow-forms"
      />

      {/* 渲染弹窗 */}
      <LoginIndex />
      <RealNameIndex />
      <PaymentIndex />
      <SlideBar />
     

    </div>
  );
}

export default App;