first commit

Code/.editorconfig

@@ -0,0 +1,12 @@
+root = true # 控制配置文件 .editorconfig 是否生效的字段
+ 
+[**] # 匹配全部文件
+indent_style = space # 缩进风格，可选space｜tab
+indent_size = 2 # 缩进的空格数
+charset = utf-8 # 设置字符集
+trim_trailing_whitespace = true # 删除一行中的前后空格
+insert_final_newline = true # 设为true表示使文件以一个空白行结尾
+end_of_line = lf
+ 
+[**.md] # 匹配md文件
+trim_trailing_whitespace = false

Code/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Code/.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 100, // 一行的字符数，如果超过会进行换行
+  tabWidth: 2, // 一个tab代表几个空格数，默认就是2
+  useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为false
+  semi: false, // 行尾是否使用分号，默认为true
+  singleQuote: true, // 字符串是否使用单引号
+  trailingComma: "none", // 对象或数组末尾是否添加逗号 none| es5| all
+  jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
+  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
+  arrowParens: "avoid", // 箭头函数如果只有一个参数则省略括号
+};

Code/.vscode/settings.json

@@ -0,0 +1,39 @@
+{
+  "search.exclude": {
+    "/node_modules": true,
+    "dist": true,
+    "pnpm-lock.sh": true
+  },
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "liveServer.settings.port": 5502
+}

Code/README.md

@@ -0,0 +1,3 @@
+1.使用 yarn。 npm 有问题
+
+2.开发时请修改 public/myData.js 的 baseUrlLoc（dev 的时候另起一个服务运行静态资源） 和 baseUrlAtl

Code/config-overrides.js

@@ -0,0 +1,10 @@
+const path = require('path')
+const { override, addWebpackAlias } = require('customize-cra')
+
+// 添加 @ 别名
+const webpackAlias = addWebpackAlias({
+  '@': path.resolve(__dirname, 'src'),
+})
+
+// 导出要进行覆盖的 webpack 配置
+module.exports = override(webpackAlias)

Code/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "demo2",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.5.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.3",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "antd": "^5.8.3",
+    "antd-mobile": "^5.30.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "5.3",
+    "react-scripts": "5.0.1",
+    "react-sortablejs": "^6.1.4",
+    "redux": "^4.2.0",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.1",
+    "sass": "^1.55.0",
+    "typescript": "^4.8.4",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "dev": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/history": "^5.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.2.1"
+  },
+  "homepage": "."
+}

Code/path.tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+      "baseUrl": "./",
+      "paths": {
+        "@/*": ["src/*"]
+      }
+    }
+  }

Code/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+    <script src="./myData.js"></script>
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>河南-邀你至汉家</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

Code/public/myData.js

@@ -0,0 +1,20 @@
+// 本地开发静态资源目录
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
+
+// Build开发资源目录
+const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
+
+// 一些动态配置的数据
+const myDataTemp = {
+  // HH:横屏  SS:竖屏
+
+  // 如果横屏竖屏用同样的数据，只需要在HH(横屏中放一份就可以了)
+
+  // 首页(静态资源目录位置：staticData/（HH或者SS）/home)
+  home: {
+    // 开场动画视频名字
+    videoSta: 'base.mp4',
+    // 5个动画名字（这里暂时写3个，后面自己加/减）
+    video: ['1.mp4', '2.mp4', '3.mp4']
+  }
+}

Code/src/App.tsx

@@ -0,0 +1,81 @@
+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, { RootState } from './store'
+import { useSelector } from 'react-redux'
+const A1home = React.lazy(() => import('./pages/A1home'))
+
+export default function App() {
+  // 根元素
+  const rootRef = useRef<any>(null)
+
+  // 是否是横屏，默认是false
+  const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
+
+  // 移动端存下来 最小屏幕数据 防止打开输入框的时候压缩高度
+  const moBaseObj = useRef(0)
+
+  useEffect(() => {
+    // 横竖屏变化的时候存 初始高度
+    moBaseObj.current = document.documentElement.clientHeight
+  }, [isHH])
+
+  const timeRef = useRef(-1)
+
+  const pageFullChangeFu = useCallback(() => {
+    let width = document.documentElement.clientWidth
+    let height = document.documentElement.clientHeight
+    let isHH = false
+    if (width >= height) {
+      //横屏
+      isHH = true
+      // 最大宽度1200px
+      if (width >= 1200) {
+        width = 1200
+        height = 675
+      }
+    } else {
+      // 竖屏
+      width = width >= 800 ? 800 : width
+      isHH = false
+    }
+    store.dispatch({ type: 'layout/isHH', payload: isHH })
+    clearTimeout(timeRef.current)
+    timeRef.current = window.setTimeout(() => {
+      if (height < moBaseObj.current && width < 1200) {
+        // 打开了键盘
+        height = moBaseObj.current
+      }
+      rootRef.current.style.width = width + 'px'
+      rootRef.current.style.height = height + 'px'
+    }, 100)
+  }, [])
+
+  useEffect(() => {
+    rootRef.current = document.querySelector('#root')
+    rootRef.current.style.width = document.documentElement.clientWidth + 'px'
+    rootRef.current.style.height = document.documentElement.clientHeight + 'px'
+
+    pageFullChangeFu()
+    window.addEventListener('resize', pageFullChangeFu, false)
+  }, [pageFullChangeFu])
+
+  return (
+    <>
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            <Route path='/' component={A1home} exact />
+            <Route path='*' component={NotFound} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+    </>
+  )
+}

Code/src/AppTemp.tsx

@@ -0,0 +1,124 @@
+import '@/assets/styles/base.css'
+// 关于路由
+import React, { useCallback, useEffect, useRef } from 'react'
+import { Router, Route, Switch } from 'react-router-dom'
+import history, { isMobiileFu } from './utils/history'
+import SpinLoding from './components/SpinLoding'
+// import { Image } from 'antd'
+// import { useSelector } from 'react-redux'
+// import store, { RootState } from './store'
+// import MessageCom from './components/Message'
+// import LookDom from './components/LookDom'
+import NotFound from '@/components/NotFound'
+const A1home = React.lazy(() => import('./pages/A1home'))
+
+// 设计图按照 1920 X 919 来开发
+const planSize = {
+  width: isMobiileFu() ? 414 : 1920,
+  height: isMobiileFu() ? 736 : 919
+}
+
+export default function App() {
+  // 从仓库中获取查看图片的信息
+  // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
+
+  const rootRef = useRef<any>(null)
+
+  // 移动端存下来 最小屏幕数据 防止打开输入框的时候压缩高度
+  const moBaseObj = useRef({
+    num: 0,
+    scaleH: 0,
+    moveY: 0
+  })
+
+  const pageFullChangeFu = useCallback(() => {
+    let width = document.documentElement.clientWidth
+    let height = document.documentElement.clientHeight
+
+    // 屏幕改变的时候改变字体大小，这个项目暂时用不上
+    // // 1920 = 16px
+    // const bei = 1920 / 16;
+    // let res = Math.round(width / bei);
+    // if (res <= 10) res = 10;
+    // rootRef.current.style.setProperty("--fontNum", res + "px");
+
+    // 移动端开发 宽度限制最大500px
+    if (planSize.width <= 500) {
+      width = width >= 500 ? 500 : width
+      rootRef.current.style.margin = '0 auto'
+    }
+
+    const sizeW = width / planSize.width
+    let sizeH = height / planSize.height
+
+    const moveX = (planSize.width - width) / 2
+    let moveY = (planSize.height - height) / 2
+
+    // 移动端
+    if (height < moBaseObj.current.num) {
+      // 打开了键盘
+      document.querySelector('body')!.style.overflow = 'auto'
+      sizeH = moBaseObj.current.scaleH
+      moveY = moBaseObj.current.moveY
+    } else document.querySelector('body')!.style.overflow = 'hidden'
+
+    // console.log("-------", width, moveX);
+    rootRef.current.style.transform = `translate(${-moveX}px,${-moveY}px) scale(${sizeW},${sizeH})`
+  }, [])
+
+  useEffect(() => {
+    rootRef.current = document.querySelector('#root')
+    rootRef.current.style.width = planSize.width + 'px'
+    rootRef.current.style.height = planSize.height + 'px'
+
+    // 移动端
+    if (planSize.width <= 500) {
+      const height = document.documentElement.clientHeight
+
+      moBaseObj.current = {
+        num: height,
+        scaleH: height / planSize.height,
+        moveY: (planSize.height - height) / 2
+      }
+    }
+
+    pageFullChangeFu()
+
+    window.addEventListener('resize', pageFullChangeFu, false)
+  }, [pageFullChangeFu])
+
+  return (
+    <>
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            <Route path='/' component={A1home} exact />
+            <Route path='*' component={NotFound} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+
+      {/* 所有图片点击预览查看大图 */}
+      {/* <Image
+        preview={{
+          visible: lookBigImg.show,
+          src: lookBigImg.url,
+          onVisibleChange: value => {
+            // 清除仓库信息
+            store.dispatch({
+              type: 'layout/lookBigImg',
+              payload: { url: '', show: false }
+            })
+          }
+        }}
+      /> */}
+
+      {/* 查看视频音频 */}
+      {/* <LookDom /> */}
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      {/* <MessageCom /> */}
+    </>
+  )
+}

Code/src/assets/styles/base.css

@@ -0,0 +1,83 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+/* 全局css变量 */
+:root {
+  --themeColor: #cc1424;
+  --themeColor2: #272727;
+  --fontNum: 14px;
+}
+html {
+  height: 100%;
+  user-select: none;
+}
+body {
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font-size: var(--fontNum);
+  height: 100%;
+  color: black;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+#root {
+  overflow: hidden;
+  margin: auto;
+}
+#root > div {
+  width: 100%;
+  height: 100%;
+}
+i {
+  font-style: normal;
+}
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  object-fit: cover;
+}
+ul {
+  list-style: none;
+}
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+  min-height: 100px !important;
+}
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+  text-align: center;
+}
+[hidden] {
+  display: none !important;
+}
+/* antd图片预览组件 */
+.ant-image {
+  display: none !important;
+}
+.mySorrl::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.mySorrl::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: var(--themeColor);
+}
+.mySorrl::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+.ant-image-preview-operations {
+  background-color: rgba(0, 0, 0, 0.8) !important;
+}

Code/src/assets/styles/base.less

@@ -0,0 +1,101 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+
+/* 全局css变量 */
+:root {
+  --themeColor: #cc1424;
+  --themeColor2: #272727;
+  --fontNum: 14px;
+}
+
+html {
+  height: 100%;
+  user-select: none;
+}
+
+body {
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font-size: var(--fontNum);
+  height: 100%;
+  color: black;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+#root {
+  overflow: hidden;
+  margin: auto;
+
+  & > div {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+i {
+  font-style: normal;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  object-fit: cover;
+}
+
+ul {
+  list-style: none;
+}
+
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+  min-height: 100px !important;
+}
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+  text-align: center;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* antd图片预览组件 */
+.ant-image {
+  display: none !important;
+}
+
+// 滚动条
+.mySorrl::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+.mySorrl::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: var(--themeColor);
+}
+
+.mySorrl::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+
+.ant-image-preview-operations {
+  background-color: rgba(0, 0, 0, 0.8) !important;
+}

Code/src/components/NotFound/index.tsx

@@ -0,0 +1,24 @@
+import history from "@/utils/history";
+import { Button, Result } from "antd";
+import { useEffect, useRef } from "react";
+
+export default function NotFound() {
+  const timeRef = useRef(-1);
+
+  useEffect(() => {
+    timeRef.current = window.setTimeout(() => {
+      const dom: HTMLDivElement = document.querySelector(".noFindPage")!;
+      dom.style.opacity = "1";
+    }, 500);
+    return () => {
+      clearTimeout(timeRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="noFindPage">
+      <Result status="404" title="404" subTitle="找不到页面!" />
+      <Button onClick={()=>history.replace('/')}>去首页</Button>
+    </div>
+  );
+}

Code/src/components/SpinLoding/index.module.scss

@@ -0,0 +1,10 @@
+.SpinLoding {
+  position: relative;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

Code/src/components/SpinLoding/index.tsx

@@ -0,0 +1,13 @@
+import styles from "./index.module.scss";
+import { Spin } from "antd";
+import React from "react";
+function SpinLoding() {
+  return (
+    <div className={styles.SpinLoding}>
+      <Spin size='large'/>
+    </div>
+  );
+}
+const MemoSpinLoding = React.memo(SpinLoding);
+
+export default MemoSpinLoding;

Code/src/components/ownUse/UseDataUrl.tsx

@@ -0,0 +1,32 @@
+import { RootState } from '@/store'
+import { baseURLTemp } from '@/utils/http'
+import { useCallback, useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+
+export default function UseDataUrl(url: string) {
+  // 是否是横屏，默认是false
+  const isHH = useSelector((state: RootState) => state.A0Layout.isHH)
+
+  const [dataUrl, setDataUrl] = useState('')
+
+  const baseUrlChangeFu = useCallback(() => {
+    const temp = isHH ? 'HH/' : 'SS/'
+    setDataUrl(baseURLTemp + temp + url)
+  }, [isHH, url])
+
+  useEffect(() => {
+    baseUrlChangeFu()
+  }, [baseUrlChangeFu])
+
+  // 横竖屏用一样的数据路径
+  const [dataUrlSame, setDataUrlSame] = useState('')
+
+  useEffect(() => {
+    setDataUrlSame(baseURLTemp + 'HH/' + url)
+  }, [url])
+
+  return {
+    dataUrl,
+    dataUrlSame
+  }
+}

Code/src/index.tsx

@@ -0,0 +1,41 @@
+// import 'default-passive-events';
+
+import App from "./App";
+import store from "./store/index";
+
+import { Provider } from "react-redux";
+import { createRoot } from "react-dom/client";
+
+import { ConfigProvider } from "antd";
+
+// 兼容360浏览器
+import {
+  StyleProvider,
+  legacyLogicalPropertiesTransformer,
+} from "@ant-design/cssinjs";
+
+import "dayjs/locale/zh-cn";
+import locale from "antd/locale/zh_CN";
+
+const container = document.getElementById("root") as HTMLElement;
+const root = createRoot(container);
+
+root.render(
+  <ConfigProvider
+    locale={locale}
+    theme={{
+      token: {
+        colorPrimary: " #CC1424",
+      },
+    }}
+  >
+    <Provider store={store}>
+      <StyleProvider
+        hashPriority="high"
+        transformers={[legacyLogicalPropertiesTransformer]}
+      >
+        <App />
+      </StyleProvider>
+    </Provider>
+  </ConfigProvider>
+);

Code/src/pages/A1home/index.module.scss

@@ -0,0 +1,7 @@
+.A1home {
+  :global {
+    // 竖屏
+    @media all and (orientation: portrait) {
+    }
+  }
+}

Code/src/pages/A1home/index.tsx

@@ -0,0 +1,14 @@
+import React, { useRef } from 'react'
+import styles from './index.module.scss'
+import { Button } from 'antd'
+import UseDataUrl from '@/components/ownUse/UseDataUrl'
+
+function A1home() {
+  const { dataUrl, dataUrlSame } = UseDataUrl('home')
+
+  return <div className={styles.A1home}></div>
+}
+
+const MemoA1home = React.memo(A1home)
+
+export default MemoA1home

Code/src/pages/初始化组件 copy/index.module.scss

@@ -0,0 +1,5 @@
+.AAAAA{
+  :global{
+    
+  }
+}

Code/src/pages/初始化组件 copy/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function AAAAA() {
+  
+  return (
+    <div className={styles.AAAAA}>
+      <h1>AAAAA</h1>
+    </div>
+  )
+}
+
+const MemoAAAAA = React.memo(AAAAA);
+
+export default MemoAAAAA;

Code/src/store/index.ts

@@ -0,0 +1,20 @@
+// 导入 redux
+import { applyMiddleware, legacy_createStore as createStore } from 'redux'
+// 导入自己封装的  rootReducer 
+import rootReducer from './reducer'
+// 导入调试工具和 异步的 redux（用来发送异步请求）
+// 调试工具需要下载谷歌 扩展程序 我用的是 Redux DevTools 3.0.17
+import { composeWithDevTools } from 'redux-devtools-extension'
+import thunk from 'redux-thunk'
+
+// 创建仓库实例
+const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
+
+// 声明 RootState，在使用仓库的时候用来使用
+export type RootState = ReturnType<typeof store.getState>
+
+// 声明 AppDispatch，在异步请求的时候来使用
+export type AppDispatch = typeof store.dispatch
+
+// 导出仓库实例
+export default store

Code/src/store/reducer/index.ts

@@ -0,0 +1,13 @@
+// 导入合并reducer的依赖
+import { combineReducers } from "redux";
+
+// 导入 登录 模块的 reducer
+import A0Layout from "./layout";
+
+// 合并 reducer
+const rootReducer = combineReducers({
+  A0Layout,
+});
+
+// 默认导出
+export default rootReducer;

Code/src/store/reducer/layout.ts

@@ -0,0 +1,19 @@
+// 初始化状态
+const initState = {
+  isHH: false
+}
+
+// 定义 action 类型
+type LayoutActionType = { type: 'layout/isHH'; payload: boolean }
+
+// 频道 reducer
+export default function layoutReducer(state = initState, action: LayoutActionType) {
+  switch (action.type) {
+    // 是横屏还是竖屏
+    case 'layout/isHH':
+      return { ...state, isHH: action.payload }
+
+    default:
+      return state
+  }
+}

Code/src/types/api/layot.d.ts

@@ -0,0 +1,12 @@
+export type LookDomType = {
+  src: string;
+  type: "video" | "audio" | "model" | "";
+  flag?: boolean;
+};
+
+export type FileImgListType = {
+  id: number;
+  fileName: string;
+  filePath: string;
+  type: "img" | "video" | "doc";
+};

Code/src/types/declaration.d.ts

@@ -0,0 +1,21 @@
+declare module 'history'
+declare module '*.scss'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.gif'
+declare module '*.svg'
+declare module 'js-export-excel'
+declare module 'braft-utils'
+
+// public/myData.js 里面的一些数据的类型
+declare const baseUrlLoc: string
+declare const baseUrlAtl: string
+// 数据类型待完善
+declare const myDataTemp: MyDataType
+
+type MyDataType = {
+  home: {
+    videoSta: string
+    video: string[]
+  }
+}

Code/src/types/index.d.ts

@@ -0,0 +1 @@
+export * from './api/layot'

Code/src/utils/history.ts

@@ -0,0 +1,12 @@
+import { createHashHistory  } from 'history'
+const history = createHashHistory()
+export default history
+
+// 判断是手机端还是pc端
+export const isMobiileFu = () => {
+  if (window.navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  )) {
+    return true
+  } else return false
+}

Code/src/utils/http.ts

@@ -0,0 +1,5 @@
+export const isLoc = process.env.NODE_ENV === 'development'
+
+export const baseURLTemp = isLoc ? baseUrlLoc : baseUrlAtl
+
+export const myData = myDataTemp

Code/src/utils/storage.ts

@@ -0,0 +1,40 @@
+// ------------------------------------token的本地存储------------------------------------
+
+// 用户 Token 的本地缓存键名，自己定义
+const TOKEN_KEY = "BJSDBWG_HT_USER_INFO";
+
+/**
+ * 从本地缓存中获取 用户 信息
+ */
+export const getTokenInfo = (): any => {
+  return JSON.parse(localStorage.getItem(TOKEN_KEY) || "{}");
+};
+
+/**
+ * 将 用户 信息存入缓存
+ * @param {Object} tokenInfo 从后端获取到的 Token 信息
+ */
+export const setTokenInfo = (tokenInfo: any): void => {
+  localStorage.setItem(TOKEN_KEY, JSON.stringify(tokenInfo));
+};
+
+/**
+ * 删除本地缓存中的 用户 信息
+ */
+export const removeTokenInfo = (): void => {
+  localStorage.removeItem(TOKEN_KEY);
+};
+
+/**
+ * 判断本地缓存中是否存在 Token 信息
+ */
+export const hasToken = (): boolean => {
+  return Boolean(getTokenInfo().token);
+};
+
+/**
+ * 获取本地缓存中是否存在 Token 信息
+ */
+export const getTokenFu = (): string => {
+  return getTokenInfo().token;
+};

Code/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./path.tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}