Chengzhebei/src/App.tsx

import '@/assets/styles/base.css'
// 关于路由
import React, { useCallback, useEffect, useRef } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import history, { callIframeFu } from './utils/history'
import SpinLoding from './components/SpinLoding'
import store, { RootState } from './store'
import { useSelector } from 'react-redux'
import NotFound from '@/components/NotFound'
import { baseURL, isLoc, myData } from './utils/http'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import { Image } from 'antd'

// import Vconsole from 'vconsole'
// new Vconsole()

// import { isLoc, myData } from './utils/http'
const A1home = React.lazy(() => import('./pages/A1home'))
const A1_1base = React.lazy(() => import('./pages/A0base'))
const A2yblm = React.lazy(() => import('./pages/A2yblm'))
const A3beie = React.lazy(() => import('./pages/A3beie'))
const A4quanwen = React.lazy(() => import('./pages/A4quanwen'))
const A5wenwu = React.lazy(() => import('./pages/A5wenwu'))
const A6ybwx = React.lazy(() => import('./pages/A6ybwx'))
const A7Wjwj = React.lazy(() => import('./pages/A7wjwj'))
const A6_1_zxys = React.lazy(() => import('./pages/A6ybwx/A6_1_zxys'))
const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))


declare global {
  //设置全局属性
  interface Window {
    //window对象属性
    isHH: boolean //加入对象
    unityOpenHot: (name: string) => void
    unityBack: () => void
  }
}



let tempW = document.documentElement.clientWidth
let tempH = document.documentElement.clientHeight

let tempMax = tempW >= tempH ? tempW : tempH
let tempMin = tempW >= tempH ? tempH : tempW

const pageBi = Math.round(Number((tempMax / tempMin).toFixed(2)))

// 设计图按照 844 X 390 来开发
const planSize = {
  width: 844,
  height: Math.round(Number((844 / pageBi).toFixed(0)))
}

export default function App() {
  useEffect(() => {
    // 打包环境 刷新页面从 首页 开始
    if (!isLoc && myData.isLdong) {
      if (window.location.hash !== '#/') {
        window.location.href = window.location.href.split('#')[0] + '#/'
      }
    }
  }, [])

  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)


  // 根元素
  const rootRef = useRef<any>(null)

  const pageFullChangeFu = useCallback(() => {
    let width = document.documentElement.clientWidth
    let height = document.documentElement.clientHeight

    let isHHTemp = false

    if (width >= height) {
      if (tempMax - width > 100) return

      //横屏
      isHHTemp = true
      const sizeW = width / planSize.width
      let sizeH = height / planSize.height

      let moveX = (planSize.width - width) / 2
      let moveY = (planSize.height - height) / 2

      if (width >= planSize.width) moveX = 0
      rootRef.current.style.left = '0'
      rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH}) rotate(0deg)`
      rootRef.current.style.transformOrigin = 'center'

      store.dispatch({
        type: 'layout/style',
        payload: {
          width: planSize.width,
          moveX: -moveX,
          moveY: -moveY,
          sizeW,
          sizeH
        }
      })
    } else {
      if (tempMax - height > 100) return

      // 竖屏
      isHHTemp = false
      const temp = width
      const wjwjScene = document.getElementById('wjwjScene') as HTMLIFrameElement
      const panoramic = document.getElementById('panoramic') as HTMLIFrameElement
      const A7Poem = document.getElementById('A7Poem') as HTMLIFrameElement

      wjwjScene.style.width = height + 'px'
      wjwjScene.style.height = temp + 'px'
      wjwjScene.style.transform = 'rotate(90deg) translate(-50%, -50%)'
      wjwjScene.style.transformOrigin = 'left top'

      panoramic.style.width = height + 'px'
      panoramic.style.height = temp + 'px'
      panoramic.style.transform = 'rotate(90deg) translate(-50%, -50%)'
      panoramic.style.transformOrigin = 'left top'

      A7Poem.style.width = height + 'px'
      A7Poem.style.height = temp + 'px'
      A7Poem.style.transform = 'rotate(90deg) translate(-50%, -50%)'
      A7Poem.style.transformOrigin = 'left top'

      width = height
      height = temp

      const sizeW = width / planSize.width
      let sizeH = height / planSize.height

      rootRef.current.style.left = '100%'
      rootRef.current.style.transform = `rotate(90deg) scale(${sizeW},${sizeH})`

      rootRef.current.style.transformOrigin = 'left top'
    }

    // 横竖屏变化的时候 刷新页面

    // if (window.isHH !== isHHTemp) {
    //   window.location.reload()
    // }

    store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
  }, [])

  // const audioPlayFu = useCallback(() => {
  // 播放背景音乐
  // const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
  // if (audioDom) {
  //   if (audioDom.paused) audioDom.play()
  //   else rootRef.current.removeEventListener('click', audioPlayFu)
  // }
  // }, [])

  useEffect(() => {
    rootRef.current = document.querySelector('#root')
    rootRef.current.style.width = planSize.width + 'px'
    rootRef.current.style.height = planSize.height + 'px'

    pageFullChangeFu()
    window.addEventListener('resize', pageFullChangeFu, false)

    // 全局点击都播放背景音乐
    //   if (myData.isLdong && !isLoc) rootRef.current.addEventListener('click', audioPlayFu)
  }, [pageFullChangeFu])

  // 动态根据路由更改背景图
  const handleHashChange = () => {

    if (window.location.hash === '#/base') {
      callIframeFu('changePanel', 0)
      callIframeFu('showInscription', -1)
      callIframeFu('showHotspot', -1)
    };
    if (window.location.hash === '#/yblm') {
      callIframeFu('changePanel', 1)
      callIframeFu('showInscription', -1)
      callIframeFu('showHotspot', -1)
    };
    if (window.location.hash === '#/beie') { callIframeFu('changePanel', 3); callIframeFu('showInscription', 0) }
    if (window.location.hash === '#/quanwen') {
      callIframeFu('changePanel', 3);
      callIframeFu('showInscription', -1)
    }
    if (window.location.hash === '#/wenwu') {
      callIframeFu('changePanel', 4)
      callIframeFu('showInscription', -1)
      callIframeFu('showHotspot', -1)
    };
  };
  useEffect(() => {
    window.addEventListener('hashchange', handleHashChange);
    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            <Route path='/' component={A1home} exact />
            <Route path='/base' component={A1_1base} exact />
            <Route path='/yblm' component={A2yblm} exact />
            <Route path='/beie' component={A3beie} exact />
            <Route path='/quanwen' component={A4quanwen} exact />
            <Route path='/wenwu' component={A5wenwu} exact />
            <Route path='/ybwx' component={A6ybwx} exact />
            <Route path='/wjwj' component={A7Wjwj} exact />
            <Route path='/zxys' component={A6_1_zxys} exact />
            <Route path='/sinicize' component={A6_2_zxzgh} exact />
            <Route path='*' component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>

      {/* 背景音乐 */}
      <audio id='bgMp3' loop style={{ display: 'none' }} src={baseURL + 'home/bg.mp3'}></audio>

      {/* 发送请求的加载组件 */}
      <AsyncSpinLoding />

      {/* 所有图片点击预览查看大图 */}
      {lookBigImg.show ? (
        <Image
          preview={{
            visible: lookBigImg.show,
            src: lookBigImg.url,
            onVisibleChange: value => {
              // 清除仓库信息
              store.dispatch({
                type: 'layout/lookBigImg',
                payload: { url: '', show: false }
              })
            }
          }}
        />
      ) : null}

    </>
  )
}