HeNan_HanJia/Code/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 from './utils/history'
import SpinLoding from './components/SpinLoding'

import NotFound from '@/components/NotFound'
import store from './store'
import { baseURL, myData } from './utils/http'

// 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/A1_1base'))
const A2visit = React.lazy(() => import('./pages/A2visit'))
const A3banquet = React.lazy(() => import('./pages/A3banquet'))
const A4dance = React.lazy(() => import('./pages/A4dance'))
const A5chef = React.lazy(() => import('./pages/A5chef'))
const A6plow = React.lazy(() => import('./pages/A6plow'))
const A7end = React.lazy(() => import('./pages/A7end'))
const B1more = React.lazy(() => import('./pages/B1more'))

// 云起图仙居 等热点集合页面
const B2hots = React.lazy(() => import('./pages/B2hots'))
// 云气图
const B3yun = React.lazy(() => import('./pages/B3yun'))
// 仙居
const B4xian = React.lazy(() => import('./pages/B4xian'))

// unity页面
const C1unity = React.lazy(() => import('./pages/C1unity'))
const C2unityEnd = React.lazy(() => import('./pages/C2unityEnd'))

const Text = React.lazy(() => import('./pages/Text'))
declare global {
  //设置全局属性
  interface Window {
    //window对象属性
    isHH: boolean //加入对象
    unityOpenHot: (index: number) => 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.origin
    //   }
    // }
  }, [])

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

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

    let isHHTemp = false

    if (width >= height) {
      //横屏
      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 {
      // 竖屏
      isHHTemp = false
      const temp = width
      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) rootRef.current.addEventListener('click', audioPlayFu)
  }, [audioPlayFu, pageFullChangeFu])

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            <Route path='/' component={A1home} exact />
            <Route path='/base' component={A1_1base} exact />
            <Route path='/visit' component={A2visit} exact />
            <Route path='/banquet' component={A3banquet} exact />
            <Route path='/dance' component={A4dance} exact />
            <Route path='/chef' component={A5chef} exact />
            <Route path='/plow' component={A6plow} exact />
            <Route path='/end' component={A7end} exact />
            <Route path='/more' component={B1more} exact />
            <Route path='/hots' component={B2hots} exact />
            <Route path='/yun' component={B3yun} exact />
            <Route path='/xian' component={B4xian} exact />
            <Route path='/unity/:id' component={C1unity} exact />
            <Route path='/unend/:key' component={C2unityEnd} exact />
            <Route path='/text' component={Text} exact />
            <Route path='*' component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

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