YLLZX/src/App.tsx

import '@/assets/styles/base.css'
// 关于路由
import React, { useCallback, useEffect } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import history, { isMobileFu } from './utils/history'
import SpinLoding from './components/SpinLoding'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import LookDom from './components/LookDom'
import UpAsyncLoding from './components/UpAsyncLoding'
import MessageCom from './components/Message'
import { Image } from 'antd'
import store, { RootState } from './store'
import { useSelector } from 'react-redux'
import screenImg from '@/assets/img/landtip.png'

const A1home = React.lazy(() => import('./pages/A1home'))
const A2layout = React.lazy(() => import('./pages/A2layout'))

export default function App() {
  // 从仓库中获取查看图片的信息
  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)

  const rootDomFu = useCallback(() => {
    const rootDom: HTMLDivElement = document.querySelector('#root')!
    if (rootDom) {
      rootDom.style.height = window.innerHeight + 'px'
    }
  }, [])

  useEffect(() => {
    window.addEventListener('resize', rootDomFu, true)
    rootDomFu()
  }, [rootDomFu])

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            {/* <Route path='/codeSucc/:id' component={A3codeSucc} /> */}
            <Route exact path='/' component={A1home} />
            <Route path='/layout' component={A2layout} />
          </Switch>
        </React.Suspense>
      </Router>

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

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

      {/* 上传附件的进度条元素 */}
      <UpAsyncLoding />

      {/* 查看视频音频 */}
      <LookDom />

      {/* antd 轻提示 ---兼容360浏览器 */}
      <MessageCom />

      {/* 横屏提示 */}
      {isMobileFu() ? (
        <div id='ScreenChange'>
          <img src={screenImg} alt='' />
          <p>请在竖屏模式浏览</p>
        </div>
      ) : null}
    </>
  )
}