1 год назад · e4bcc1beb5
--- a/.gitignore
+++ b/.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*
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,2 @@
 
				+打包的时候搜索：打包配置
			
 
				+来修改url变量
			
--- a/config-overrides.js
+++ b/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)
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,61 @@
 
				+{
			
 
				+  "name": "demo",
			
 
				+  "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",
			
 
				+    "axios": "^1.1.3",
			
 
				+    "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": "."
			
 
				+}
			
--- a/path.tsconfig.json
+++ b/path.tsconfig.json
@@ -0,0 +1,8 @@
 
				+{
			
 
				+    "compilerOptions": {
			
 
				+      "baseUrl": "./",
			
 
				+      "paths": {
			
 
				+        "@/*": ["src/*"]
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
--- a/public/4dage.js
+++ b/public/4dage.js
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8" />
			
 
				+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
			
 
				+    <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" />
			
 
				+
			
 
				+    <!-- 打包配置 -->
			
 
				+    <script src="http://192.168.20.55:8080/data.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>
			
--- a/public/model.html
+++ b/public/model.html
@@ -0,0 +1,53 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <script src="./4dage.js"></script>
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    html {
			
 
				+      overflow: hidden;
			
 
				+    }
			
 
				+
			
 
				+    .bacBox {
			
 
				+      opacity: 1;
			
 
				+      pointer-events: auto;
			
 
				+      position: absolute;
			
 
				+      z-index: 998;
			
 
				+      top: 0;
			
 
				+      left: 0;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      background-color: #cfcfd0;
			
 
				+      transition: all 1s;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="ui"></div>
			
 
				+  <div class="bacBox"></div>
			
 
				+  <script>
			
 
				+    let number = getQueryVariable("m");
			
 
				+
			
 
				+    // console.log('ppppppppp',number);
			
 
				+
			
 
				+    window.autoRotate = true; // 是否自动旋转
			
 
				+
			
 
				+    // 打包配置
			
 
				+    fdage.embed( number, {
			
 
				+    // fdage.embed('https://hnbwg.4dage.com' + number, {
			
 
				+      transparentBackground: true,
			
 
				+      width: 800,
			
 
				+      height: 600,
			
 
				+      autoStart: true,
			
 
				+      fullFrame: true,
			
 
				+      pagePreset: false
			
 
				+    });
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,57 @@
 
				+import "@/assets/styles/base.css";
			
 
				+// 关于路由
			
 
				+import React from "react";
			
 
				+import { Router, Route, Switch } from "react-router-dom";
			
 
				+import history from "./utils/history";
			
 
				+import SpinLoding from "./components/SpinLoding";
			
 
				+import AsyncSpinLoding from "./components/AsyncSpinLoding";
			
 
				+import { Image } from "antd";
			
 
				+import { useSelector } from "react-redux";
			
 
				+import store, { RootState } from "./store";
			
 
				+import MessageCom from "./components/Message";
			
 
				+import LookDom from "./components/LookDom";
			
 
				+const A1Home = React.lazy(() => import("./pages/A1Home"));
			
 
				+
			
 
				+export default function App() {
			
 
				+  // 从仓库中获取查看图片的信息
			
 
				+  const lookBigImg = useSelector(
			
 
				+    (state: RootState) => state.A0Layout.lookBigImg
			
 
				+  );
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      {/* 关于路由 */}
			
 
				+      <Router history={history}>
			
 
				+        <React.Suspense fallback={<SpinLoding />}>
			
 
				+          <Switch>
			
 
				+            <Route path="/" component={A1Home} />
			
 
				+          </Switch>
			
 
				+        </React.Suspense>
			
 
				+      </Router>
			
 
				+
			
 
				+      {/* 发送请求的加载组件 */}
			
 
				+      <AsyncSpinLoding />
			
 
				+
			
 
				+      {/* 所有图片点击预览查看大图 */}
			
 
				+      <Image
			
 
				+        preview={{
			
 
				+          visible: lookBigImg.show,
			
 
				+          src: lookBigImg.url,
			
 
				+          onVisibleChange: (value) => {
			
 
				+            // 清除仓库信息
			
 
				+            store.dispatch({
			
 
				+              type: "layout/lookBigImg",
			
 
				+              payload: { url: "", show: false },
			
 
				+            });
			
 
				+          },
			
 
				+        }}
			
 
				+      />
			
 
				+
			
 
				+      {/* 查看视频音频模型 */}
			
 
				+      <LookDom />
			
 
				+
			
 
				+      {/* antd 轻提示 ---兼容360浏览器 */}
			
 
				+      <MessageCom />
			
 
				+    </>
			
 
				+  );
			
 
				+}
			
--- a/src/assets/img/IMGerror.png
+++ b/src/assets/img/IMGerror.png
--- a/src/assets/img/loading.gif
+++ b/src/assets/img/loading.gif
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -0,0 +1,94 @@
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+html {
			
 
				+  height: 100%;
			
 
				+  font-size: 14px;
			
 
				+  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;
			
 
				+  height: 100%;
			
 
				+  color: black;
			
 
				+}
			
 
				+a {
			
 
				+  text-decoration: none;
			
 
				+  color: black;
			
 
				+  outline: none;
			
 
				+}
			
 
				+i {
			
 
				+  font-style: normal;
			
 
				+}
			
 
				+img {
			
 
				+  max-width: 100%;
			
 
				+  max-height: 100%;
			
 
				+  vertical-align: middle;
			
 
				+  object-fit: cover;
			
 
				+}
			
 
				+ul {
			
 
				+  list-style: none;
			
 
				+}
			
 
				+body {
			
 
				+  overflow: auto;
			
 
				+  overflow-y: overlay;
			
 
				+}
			
 
				+/* 文本域取消下拉 */
			
 
				+textarea {
			
 
				+  resize: none !important;
			
 
				+  min-height: 100px !important;
			
 
				+}
			
 
				+/* 主题色 */
			
 
				+:root {
			
 
				+  --themeColor: #00b3ec;
			
 
				+}
			
 
				+/* 找不到页面 */
			
 
				+.noFindPage {
			
 
				+  opacity: 0;
			
 
				+  transition: opacity 0.5s;
			
 
				+}
			
 
				+/* 兼容360浏览器的下拉框 */
			
 
				+.ant-select-selector {
			
 
				+  position: relative;
			
 
				+  background-color: #ffffff;
			
 
				+  border: 1px solid #d9d9d9;
			
 
				+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
			
 
				+}
			
 
				+#root {
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  min-width: 1600px;
			
 
				+  min-height: 900px;
			
 
				+  overflow: auto;
			
 
				+  overflow-y: overlay;
			
 
				+  /* antd图片预览组件 */
			
 
				+}
			
 
				+#root > div {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+#root .ant-image {
			
 
				+  display: none;
			
 
				+}
			
 
				+[hidden] {
			
 
				+  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;
			
 
				+}
			
--- a/src/assets/styles/base.less
+++ b/src/assets/styles/base.less
@@ -0,0 +1,129 @@
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+html {
			
 
				+  height: 100%;
			
 
				+  font-size: 14px;
			
 
				+  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;
			
 
				+  height: 100%;
			
 
				+  color: black;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  text-decoration: none;
			
 
				+  color: black;
			
 
				+  outline: none;
			
 
				+}
			
 
				+
			
 
				+i {
			
 
				+  font-style: normal;
			
 
				+}
			
 
				+
			
 
				+img {
			
 
				+  max-width: 100%;
			
 
				+  max-height: 100%;
			
 
				+  vertical-align: middle;
			
 
				+  object-fit: cover;
			
 
				+}
			
 
				+
			
 
				+ul {
			
 
				+  list-style: none;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  overflow: auto;
			
 
				+  overflow-y: overlay;
			
 
				+}
			
 
				+
			
 
				+/* 文本域取消下拉 */
			
 
				+textarea {
			
 
				+  resize: none !important;
			
 
				+  min-height: 100px !important;
			
 
				+}
			
 
				+
			
 
				+/* 主题色 */
			
 
				+:root {
			
 
				+  --themeColor: #00b3ec;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+/* 找不到页面 */
			
 
				+.noFindPage {
			
 
				+  opacity: 0;
			
 
				+  transition: opacity .5s;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/* 兼容360浏览器的下拉框 */
			
 
				+.ant-select-selector {
			
 
				+  position: relative;
			
 
				+  background-color: #ffffff;
			
 
				+  border: 1px solid #d9d9d9;
			
 
				+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+// 重置antd样式
			
 
				+#root {
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  min-width: 1600px;
			
 
				+  min-height: 900px;
			
 
				+  overflow: auto;
			
 
				+  overflow-y: overlay;
			
 
				+
			
 
				+  &>div{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+  }
			
 
				+
			
 
				+  // a {
			
 
				+  //   color: var(--themeColor);
			
 
				+  // }
			
 
				+
			
 
				+
			
 
				+  /* antd图片预览组件 */
			
 
				+  .ant-image {
			
 
				+    display: none;
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+[hidden] {
			
 
				+  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;
			
 
				+}
			
--- a/src/components/AsyncSpinLoding/index.module.scss
+++ b/src/components/AsyncSpinLoding/index.module.scss
@@ -0,0 +1,21 @@
 
				+.AsyncSpinLoding {
			
 
				+  opacity: 0;
			
 
				+  pointer-events: none;
			
 
				+  transition: all .5s;
			
 
				+  position: fixed;
			
 
				+  z-index: 9998;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  // background-color: rgba(0, 0, 0, .6);
			
 
				+  background-color: transparent;
			
 
				+  :global{
			
 
				+    .ant-spin-spinning{
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%,-50%);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/components/AsyncSpinLoding/index.tsx
+++ b/src/components/AsyncSpinLoding/index.tsx
@@ -0,0 +1,15 @@
 
				+import styles from "./index.module.scss";
			
 
				+import { Spin } from "antd";
			
 
				+import React from "react";
			
 
				+
			
 
				+function AsyncSpinLoding() {
			
 
				+  return (
			
 
				+    <div id="AsyncSpinLoding" className={styles.AsyncSpinLoding}>
			
 
				+      <Spin size="large" />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const MemoAsyncSpinLoding = React.memo(AsyncSpinLoding);
			
 
				+
			
 
				+export default MemoAsyncSpinLoding;
			
--- a/src/components/ImageLazy/index.module.scss
+++ b/src/components/ImageLazy/index.module.scss
@@ -0,0 +1,51 @@
 
				+.ImageLazy {
			
 
				+  position: relative;
			
 
				+
			
 
				+  :global {
			
 
				+    .lazyBox {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      position: relative;
			
 
				+
			
 
				+      .adm-image {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+
			
 
				+        img {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .lookImg {
			
 
				+        cursor: pointer;
			
 
				+        transition: opacity .3s;
			
 
				+        opacity: 0;
			
 
				+        pointer-events: none;
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        font-size: 18px;
			
 
				+        color: #fff;
			
 
				+        background-color: rgba(0, 0, 0, .6);
			
 
				+
			
 
				+        &>div {
			
 
				+          font-size: 14px;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      &:hover {
			
 
				+        .lookImg {
			
 
				+          opacity: 1;
			
 
				+          pointer-events: auto;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
--- a/src/components/ImageLazy/index.tsx
+++ b/src/components/ImageLazy/index.tsx
@@ -0,0 +1,68 @@
 
				+import React, { useCallback, useState } from "react";
			
 
				+import styles from "./index.module.scss";
			
 
				+import { baseURL } from "@/utils/http";
			
 
				+import imgLoding from "@/assets/img/loading.gif";
			
 
				+import imgErr from "@/assets/img/IMGerror.png";
			
 
				+import { EyeOutlined } from "@ant-design/icons";
			
 
				+import store from "@/store";
			
 
				+import { Image } from "antd-mobile";
			
 
				+
			
 
				+type Props = {
			
 
				+  width?: number | string;
			
 
				+  height?: number | string;
			
 
				+  src: string;
			
 
				+  noLook?: boolean;
			
 
				+  offline?: boolean;
			
 
				+};
			
 
				+
			
 
				+function ImageLazy({
			
 
				+  width = 100,
			
 
				+  height = 100,
			
 
				+  src,
			
 
				+  noLook,
			
 
				+  offline = false,
			
 
				+}: Props) {
			
 
				+  // 默认不能预览图片，加载成功之后能预览
			
 
				+  const [lookImg, setLookImg] = useState(false);
			
 
				+
			
 
				+  // 图片加载完成
			
 
				+  const onLoad = useCallback(() => {
			
 
				+    setLookImg(true);
			
 
				+  }, []);
			
 
				+
			
 
				+  // 点击预览图片
			
 
				+  const lookBigImg = useCallback(() => {
			
 
				+    store.dispatch({
			
 
				+      type: "layout/lookBigImg",
			
 
				+      payload: { url: offline ? src : baseURL + src, show: true },
			
 
				+    });
			
 
				+  }, [offline, src]);
			
 
				+
			
 
				+  return (
			
 
				+    <div className={styles.ImageLazy} style={{ width: width, height: height }}>
			
 
				+      <div className="lazyBox">
			
 
				+        <Image
			
 
				+          lazy
			
 
				+          onLoad={onLoad}
			
 
				+          src={src ? (offline ? src : baseURL + src) : ""}
			
 
				+          placeholder={<img src={imgLoding} alt="" />}
			
 
				+          fallback={<img src={imgErr} alt="" />}
			
 
				+          fit="cover"
			
 
				+        />
			
 
				+
			
 
				+        {/* 图片预览 */}
			
 
				+        {noLook || !lookImg ? null : (
			
 
				+          <div className="lookImg" onClick={lookBigImg}>
			
 
				+            <EyeOutlined rev={undefined} />
			
 
				+            &nbsp;
			
 
				+            <div>预览</div>
			
 
				+          </div>
			
 
				+        )}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const MemoImageLazy = React.memo(ImageLazy);
			
 
				+
			
 
				+export default MemoImageLazy;
			
--- a/src/components/LookDom/index.module.scss
+++ b/src/components/LookDom/index.module.scss
@@ -0,0 +1,65 @@
 
				+.LookDom {
			
 
				+  transition: opacity .3s;
			
 
				+  position: fixed;
			
 
				+  z-index: 9991;
			
 
				+  opacity: 0;
			
 
				+  pointer-events: none;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  background-color: rgba(0, 0, 0, .6);
			
 
				+
			
 
				+  :global {
			
 
				+    .close {
			
 
				+      color: #fff;
			
 
				+      position: absolute;
			
 
				+      right: 70px;
			
 
				+      top: 70px;
			
 
				+      font-size: 30px;
			
 
				+      cursor: pointer;
			
 
				+      z-index: 10;
			
 
				+    }
			
 
				+
			
 
				+    .viedoBox {
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%, -50%);
			
 
				+      width: 800px;
			
 
				+      height: 500px;
			
 
				+
			
 
				+      video {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .audioBox {
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%, -50%);
			
 
				+      width: 500px;
			
 
				+      height: 60px;
			
 
				+
			
 
				+      audio {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .modelBox {
			
 
				+      position: absolute;
			
 
				+      top: 0;
			
 
				+      left: 0;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+
			
 
				+      iframe {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/components/LookDom/index.tsx
+++ b/src/components/LookDom/index.tsx
@@ -0,0 +1,52 @@
 
				+/* eslint-disable jsx-a11y/iframe-has-title */
			
 
				+import React from "react";
			
 
				+import { CloseCircleOutlined } from "@ant-design/icons";
			
 
				+import styles from "./index.module.scss";
			
 
				+import { useSelector } from "react-redux";
			
 
				+import store, { RootState } from "@/store";
			
 
				+import { baseURL } from "@/utils/http";
			
 
				+function LookDom() {
			
 
				+  const { src, type, flag } = useSelector(
			
 
				+    (state: RootState) => state.A0Layout.lookDom
			
 
				+  );
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={styles.LookDom}
			
 
				+      style={src ? { opacity: 1, pointerEvents: "auto" } : {}}
			
 
				+    >
			
 
				+      {src ? (
			
 
				+        <>
			
 
				+          {type === "video" ? (
			
 
				+            <div className="viedoBox">
			
 
				+              <video autoPlay controls src={flag ? src : baseURL + src}></video>
			
 
				+            </div>
			
 
				+          ) : type === "audio" ? (
			
 
				+            <div className="audioBox">
			
 
				+              <audio autoPlay controls src={flag ? src : baseURL + src}></audio>
			
 
				+            </div>
			
 
				+          ) : (
			
 
				+            <div className="modelBox">
			
 
				+              <iframe src={`model.html?m=${src}`}></iframe>
			
 
				+            </div>
			
 
				+          )}
			
 
				+
			
 
				+          <div
			
 
				+            className="close"
			
 
				+            onClick={() =>
			
 
				+              store.dispatch({
			
 
				+                type: "layout/lookDom",
			
 
				+                payload: { src: "", type: "", flag: false },
			
 
				+              })
			
 
				+            }
			
 
				+          >
			
 
				+            <CloseCircleOutlined rev={undefined} />
			
 
				+          </div>
			
 
				+        </>
			
 
				+      ) : null}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const MemoLookDom = React.memo(LookDom);
			
 
				+
			
 
				+export default MemoLookDom;
			
--- a/src/components/Message/index.tsx
+++ b/src/components/Message/index.tsx
@@ -0,0 +1,29 @@
 
				+import React, { useEffect } from "react";
			
 
				+import { message } from "antd";
			
 
				+import { useSelector } from "react-redux";
			
 
				+import { RootState } from "@/store";
			
 
				+
			
 
				+function MessageCom() {
			
 
				+  // 从仓库中获取 antd 轻提示信息
			
 
				+  const messageReducerInfo = useSelector(
			
 
				+    (state: RootState) => state.A0Layout.message
			
 
				+  );
			
 
				+
			
 
				+  const [messageApi, contextHolder] = message.useMessage();
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (messageReducerInfo.txt) {
			
 
				+      messageApi.open({
			
 
				+        type: messageReducerInfo.type,
			
 
				+        content: messageReducerInfo.txt,
			
 
				+        duration: messageReducerInfo.duration,
			
 
				+      });
			
 
				+    }
			
 
				+  }, [messageApi, messageReducerInfo]);
			
 
				+
			
 
				+  return <>{contextHolder}</>;
			
 
				+}
			
 
				+
			
 
				+const MemoMessage = React.memo(MessageCom);
			
 
				+
			
 
				+export default MemoMessage;
			
--- a/src/components/NotFound/index.tsx
+++ b/src/components/NotFound/index.tsx
@@ -0,0 +1,26 @@
 
				+import { 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";
			
 
				+    }, 300);
			
 
				+    return () => {
			
 
				+      clearTimeout(timeRef.current);
			
 
				+    };
			
 
				+  }, []);
			
 
				+
			
 
				+  return (
			
 
				+    <div className="noFindPage">
			
 
				+      <Result
			
 
				+        status="404"
			
 
				+        title="404"
			
 
				+        subTitle="找不到页面，或没有权限!"
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/src/components/SpinLoding/index.module.scss
+++ b/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;
			
 
				+}
			
--- a/src/components/SpinLoding/index.tsx
+++ b/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;
			
--- a/src/index.tsx
+++ b/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: "#00b3ec",
			
 
				+      },
			
 
				+    }}
			
 
				+  >
			
 
				+    <Provider store={store}>
			
 
				+      <StyleProvider
			
 
				+        hashPriority="high"
			
 
				+        transformers={[legacyLogicalPropertiesTransformer]}
			
 
				+      >
			
 
				+        <App />
			
 
				+      </StyleProvider>
			
 
				+    </Provider>
			
 
				+  </ConfigProvider>
			
 
				+);
			
--- a/src/pages/A1Home/index.module.scss
+++ b/src/pages/A1Home/index.module.scss
@@ -0,0 +1,37 @@
 
				+.A1Home{
			
 
				+  background-size: 100% 100%;
			
 
				+  position: relative;
			
 
				+  :global{
			
 
				+    .nameImg{
			
 
				+      position: absolute;
			
 
				+      z-index: 10;
			
 
				+      left: 50px;
			
 
				+      top: 30px;
			
 
				+    }
			
 
				+    .txtImg{
			
 
				+      position: absolute;
			
 
				+      z-index: 10;
			
 
				+      top: 180px;
			
 
				+      left: 100px;
			
 
				+      width: 80%;
			
 
				+    }
			
 
				+    .txt2Img{
			
 
				+      position: absolute;
			
 
				+      z-index: 10;
			
 
				+      bottom: 45px;
			
 
				+      left: 50px;
			
 
				+    }
			
 
				+    .txt2Iccmg{
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+    .rightBacBox{
			
 
				+      position: absolute;
			
 
				+      z-index: 10;
			
 
				+      right: 0;
			
 
				+      top: 0;
			
 
				+      height: 100%;
			
 
				+      width: 306px;
			
 
				+      background-size: 100% 100%;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/pages/A1Home/index.tsx
+++ b/src/pages/A1Home/index.tsx
@@ -0,0 +1,24 @@
 
				+import React from "react";
			
 
				+import styles from "./index.module.scss";
			
 
				+import { baseURL } from "@/utils/http";
			
 
				+
			
 
				+function A1Home() {
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={styles.A1Home}
			
 
				+      style={{ backgroundImage: `url(${baseURL}/Home/pc/bac.jpg)` }}
			
 
				+    >
			
 
				+      <img className="nameImg" src={`${baseURL}/Home/pc/name.png`} alt="" />
			
 
				+      <img className="txtImg" src={`${baseURL}/Home/pc/txt.png`} alt="" />
			
 
				+      <img className="txt2Img" src={`${baseURL}/Home/pc/txt2.png`} alt="" />
			
 
				+      <div
			
 
				+        className="rightBacBox"
			
 
				+        style={{ backgroundImage: `url(${baseURL}/Home/pc/rightBac.png)` }}
			
 
				+      ></div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const MemoA1Home = React.memo(A1Home);
			
 
				+
			
 
				+export default MemoA1Home;
			
--- a/src/pages/初始化组件/index.module.scss
+++ b/src/pages/初始化组件/index.module.scss
@@ -0,0 +1,5 @@
 
				+.AAAAA{
			
 
				+  :global{
			
 
				+    
			
 
				+  }
			
 
				+}
			
--- a/src/pages/初始化组件/index.tsx
+++ b/src/pages/初始化组件/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;
			
--- a/src/store/index.ts
+++ b/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
			
--- a/src/store/reducer/index.ts
+++ b/src/store/reducer/index.ts
@@ -0,0 +1,14 @@
 
				+// 导入合并reducer的依赖
			
 
				+import { combineReducers } from "redux";
			
 
				+
			
 
				+// 导入 登录 模块的 reducer
			
 
				+import A0Layout from "./layout";
			
 
				+
			
 
				+
			
 
				+// 合并 reducer
			
 
				+const rootReducer = combineReducers({
			
 
				+  A0Layout,
			
 
				+});
			
 
				+
			
 
				+// 默认导出
			
 
				+export default rootReducer;
			
--- a/src/store/reducer/layout.ts
+++ b/src/store/reducer/layout.ts
@@ -0,0 +1,59 @@
 
				+import { DataAllType, LookDomType } from "@/types";
			
 
				+import { MessageType } from "@/utils/message";
			
 
				+
			
 
				+// 初始化状态
			
 
				+const initState = {
			
 
				+  // 所有图片点击预览查看大图
			
 
				+  lookBigImg: {
			
 
				+    url: "",
			
 
				+    show: false,
			
 
				+  },
			
 
				+  // 查看视频、音频、模型
			
 
				+  lookDom: {
			
 
				+    src: "",
			
 
				+    type: "",
			
 
				+  } as LookDomType,
			
 
				+
			
 
				+  // antd轻提示(兼容360浏览器)
			
 
				+  message: {
			
 
				+    txt: "",
			
 
				+    type: "info",
			
 
				+    duration: 3,
			
 
				+  } as MessageType,
			
 
				+
			
 
				+  // 所有数据
			
 
				+  dataAll: { Home: {} } as DataAllType,
			
 
				+};
			
 
				+
			
 
				+// 定义 action 类型
			
 
				+type LayoutActionType =
			
 
				+  | { type: "layout/lookBigImg"; payload: { url: string; show: boolean } }
			
 
				+  | { type: "layout/lookDom"; payload: LookDomType }
			
 
				+  | { type: "layout/message"; payload: MessageType }
			
 
				+  | { type: "layout/setDataAll"; payload: DataAllType };
			
 
				+
			
 
				+// 频道 reducer
			
 
				+export default function layoutReducer(
			
 
				+  state = initState,
			
 
				+  action: LayoutActionType
			
 
				+) {
			
 
				+  switch (action.type) {
			
 
				+    // 所有图片点击预览查看大图
			
 
				+    case "layout/lookBigImg":
			
 
				+      return { ...state, lookBigImg: action.payload };
			
 
				+    // 查看视频
			
 
				+    case "layout/lookDom":
			
 
				+      return { ...state, lookDom: action.payload };
			
 
				+
			
 
				+    // antd轻提示(兼容360浏览器)
			
 
				+    case "layout/message":
			
 
				+      return { ...state, message: action.payload };
			
 
				+
			
 
				+    // 设置所有数据
			
 
				+    case "layout/setDataAll":
			
 
				+      return { ...state, dataAll: action.payload };
			
 
				+
			
 
				+    default:
			
 
				+      return state;
			
 
				+  }
			
 
				+}
			
--- a/src/types/api/layot.d.ts
+++ b/src/types/api/layot.d.ts
@@ -0,0 +1,16 @@
 
				+export type LookDomType = {
			
 
				+  src: string;
			
 
				+  type: "video" | "audio" | "model" | "";
			
 
				+  flag?: boolean;
			
 
				+};
			
 
				+
			
 
				+export type DataAllType = {
			
 
				+  Home: {
			
 
				+    vr: string;
			
 
				+    goods: {};
			
 
				+    introduce: {
			
 
				+      txt: string;
			
 
				+      imgNum: number;
			
 
				+    };
			
 
				+  };
			
 
				+};
			
--- a/src/types/declaration.d.ts
+++ b/src/types/declaration.d.ts
@@ -0,0 +1,8 @@
 
				+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';
			
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -0,0 +1,2 @@
 
				+export * from './api/layot'
			
 
				+
			
--- a/src/utils/domShow.ts
+++ b/src/utils/domShow.ts
@@ -0,0 +1,13 @@
 
				+import store from "@/store";
			
 
				+
			
 
				+// 加载和上传的盒子的显示隐藏
			
 
				+export const domShowFu = (ele: string, val: boolean) => {
			
 
				+  const dom: HTMLDivElement = document.querySelector(ele)!;
			
 
				+  if (val) {
			
 
				+    dom.style.opacity = "1";
			
 
				+    dom.style.pointerEvents = "auto";
			
 
				+  } else {
			
 
				+    dom.style.opacity = "0";
			
 
				+    dom.style.pointerEvents = "none";
			
 
				+  }
			
 
				+};
			
--- a/src/utils/history.ts
+++ b/src/utils/history.ts
@@ -0,0 +1,17 @@
 
				+import { createHashHistory  } from 'history'
			
 
				+const history = createHashHistory()
			
 
				+export default history
			
 
				+
			
 
				+export const urlParameter = (data: string) => {
			
 
				+  if (data) {
			
 
				+    const query = data.substring(data.indexOf("?") + 1);
			
 
				+    const arr = query.split("&");
			
 
				+    const params = {} as any;
			
 
				+    arr.forEach((v) => {
			
 
				+      const key = v.substring(0, v.indexOf("="));
			
 
				+      const val = v.substring(v.indexOf("=") + 1);
			
 
				+      params[key] = val;
			
 
				+    });
			
 
				+    return params;
			
 
				+  } else return {};
			
 
				+};
			
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -0,0 +1,7 @@
 
				+import store from "@/store";
			
 
				+
			
 
				+// 打包配置=》静态资源里面的data.js
			
 
				+// @ts-ignore
			
 
				+export const baseURL = baseUrlRes;
			
 
				+// @ts-ignore
			
 
				+store.dispatch({ type: "layout/setDataAll", payload: dataAll });
			
--- a/src/utils/message.ts
+++ b/src/utils/message.ts
@@ -0,0 +1,50 @@
 
				+import store from "@/store";
			
 
				+
			
 
				+export type MessageType = {
			
 
				+  txt: string;
			
 
				+  type: "info" | "success" | "error" | "warning";
			
 
				+  duration: number;
			
 
				+};
			
 
				+
			
 
				+export const MessageFu = {
			
 
				+  info: (txt: string, duration?: number) => {
			
 
				+    store.dispatch({
			
 
				+      type: "layout/message",
			
 
				+      payload: {
			
 
				+        txt,
			
 
				+        type: "info",
			
 
				+        duration: duration === undefined ? 3 : duration,
			
 
				+      },
			
 
				+    });
			
 
				+  },
			
 
				+  success: (txt: string, duration?: number) => {
			
 
				+    store.dispatch({
			
 
				+      type: "layout/message",
			
 
				+      payload: {
			
 
				+        txt,
			
 
				+        type: "success",
			
 
				+        duration: duration === undefined ? 3 : duration,
			
 
				+      },
			
 
				+    });
			
 
				+  },
			
 
				+  error: (txt: string, duration?: number) => {
			
 
				+    store.dispatch({
			
 
				+      type: "layout/message",
			
 
				+      payload: {
			
 
				+        txt,
			
 
				+        type: "error",
			
 
				+        duration: duration === undefined ? 3 : duration,
			
 
				+      },
			
 
				+    });
			
 
				+  },
			
 
				+  warning: (txt: string, duration?: number) => {
			
 
				+    store.dispatch({
			
 
				+      type: "layout/message",
			
 
				+      payload: {
			
 
				+        txt,
			
 
				+        type: "warning",
			
 
				+        duration: duration === undefined ? 3 : duration,
			
 
				+      },
			
 
				+    });
			
 
				+  },
			
 
				+};
			
--- a/tsconfig.json
+++ b/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"
			
 
				+  ]
			
 
				+}