first commit

.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

.gitignore

@@ -0,0 +1,24 @@
+# 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*
+CLAUDE.md

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 90, // 一行的字符数，如果超过会进行换行
+  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' // 箭头函数如果只有一个参数则省略括号
+}

README.md

@@ -0,0 +1,4 @@
+1.npm 有问题的话试试用 yarn
+
+https://houseoss.4dkankan.com/project/zhoushan/index.html#/
+

config-overrides.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const { override, addWebpackAlias, adjustStyleLoaders } = require('customize-cra')
+
+// 添加 @ 别名
+const webpackAlias = addWebpackAlias({
+  '@': path.resolve(__dirname, 'src')
+})
+
+// 调整 sass-loader 配置，使用现代 API
+const fixSassDeprecation = adjustStyleLoaders(rule => {
+  if (rule.test.toString().includes('scss')) {
+    // 找到 sass-loader 并修改选项
+    rule.use
+      .filter(({ loader }) => loader === 'sass-loader')
+      .forEach(loader => {
+        loader.options = {
+          ...loader.options,
+          // 指定使用现代 API
+          sassOptions: {
+            ...loader.options?.sassOptions,
+            api: 'modern'
+          }
+        }
+      })
+  }
+})
+
+// 导出组合配置
+module.exports = override(webpackAlias, fixSassDeprecation)

package.json

@@ -0,0 +1,66 @@
+{
+  "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",
+    "@zxing/library": "^0.21.3",
+    "antd": "^5.8.3",
+    "antd-mobile": "^5.30.0",
+    "axios": "^1.1.3",
+    "dayjs": "^1.11.10",
+    "js-base64": "^3.7.3",
+    "react": "^18.2.0",
+    "react-countup": "^6.5.3",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "^6.22.0",
+    "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.69.5",
+    "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",
+    "query-string": "^8.1.0",
+    "react-app-rewired": "^2.2.1"
+  },
+  "homepage": "."
+}

path.tsconfig.json

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

public/index.html

@@ -0,0 +1,38 @@
+<!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" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
+    <script src="./myData/data.js"></script>
+
+    <title>舟山博物馆-山海不远同舟友缘</title>
+  </head>
+  <style>
+    @font-face {
+      font-family: 'FZQKBYSJW';
+      src: url('./myData/FZQKBYSJW.TTF') format('truetype');
+      font-weight: normal;
+      font-style: normal;
+      font-display: swap;
+    }
+  </style>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+
+  <!-- <script>
+    
+    window.onload = function () {
+      console.log(我在onload)
+    }
+  </script> -->
+</html>

src/App.tsx

@@ -0,0 +1,86 @@
+import '@/assets/styles/base.css'
+// 关于路由
+import React, { useCallback, useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { unstable_HistoryRouter as HistoryRouter, Routes, Route } from 'react-router-dom'
+import history, { isMobileFu } from './utils/history'
+import SpinLoding from './components/SpinLoding'
+import AsyncSpinLoding from './components/AsyncSpinLoding'
+
+import UpAsyncLoding from './components/UpAsyncLoding'
+import MessageCom from './components/Message'
+
+import screenImg from '@/assets/img/landtip.png'
+import store, { RootState } from './store'
+import { Image } from 'antd'
+
+const A1home = React.lazy(() => import('./pages/A1home'))
+const A2layout = React.lazy(() => import('./pages/A2layout'))
+const A3jieyu = React.lazy(() => import('./pages/A3jieyu'))
+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 (
+    <>
+      {/* 关于路由 */}
+      <HistoryRouter history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Routes>
+            <Route path='/' element={<A1home />} />
+            <Route path='/layout' element={<A2layout />} />
+            <Route path='/jieyu' element={<A3jieyu />} />
+          </Routes>
+        </React.Suspense>
+      </HistoryRouter>
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 所有图片点击预览查看大图 */}
+      <Image
+        style={{ display: 'none' }}
+        preview={{
+          visible: lookBigImg.show,
+          src: lookBigImg.url,
+          onVisibleChange: vis => {
+            if (vis) return
+            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}
+    </>
+  )
+}

src/assets/styles/base.css

@@ -0,0 +1,224 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  height: 100%;
+  font-size: 14px;
+  user-select: none;
+}
+body {
+  font: 1em/1.4 'FZQKBYSJW', 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+  height: 100%;
+  color: black;
+}
+i {
+  font-style: normal;
+}
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+ul {
+  list-style: none;
+}
+body {
+  overflow: auto;
+  overflow-y: overlay;
+}
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+  min-height: 100px !important;
+}
+/* 主题色 */
+:root {
+  --themeColor: #042b8f;
+  --themeColor2: #69c690;
+}
+/* 找不到页面 */
+.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);
+}
+.ant-popconfirm {
+  width: 240px;
+}
+#root {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 500px;
+  height: 100vh;
+  overflow: auto;
+  overflow-y: overlay;
+  /* 普通文字按钮的颜色 */
+  /* 按钮的危险颜色 */
+  /* antd分页器样式 */
+  /* 表格的图片居中 */
+  /* antd图片预览组件 */
+  /* antd表格居中 */
+}
+#root > div {
+  width: 100%;
+  height: 100%;
+}
+#root a {
+  text-decoration: none;
+  color: black;
+  outline: none;
+}
+#root .iconHoverTit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#root .iconHoverTitTxt {
+  background-color: var(--themeColor);
+  color: #fff;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 50%;
+}
+#root .ant-btn-text {
+  color: var(--themeColor);
+}
+#root .ant-btn-text:disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+#root .ant-btn-text.ant-btn-dangerous {
+  color: #ff4d4d;
+}
+#root .tableImgAuto {
+  display: flex;
+  justify-content: center;
+}
+#root .ant-image {
+  display: none;
+}
+#root .ant-table-cell {
+  text-align: center !important;
+}
+#root #A2Table3 .ant-table-row-expand-icon {
+  background-color: var(--themeColor);
+  color: #fff;
+}
+#root #A2Table3 .ant-table-cell-with-append {
+  display: flex;
+  justify-content: flex-start;
+}
+[hidden] {
+  display: none !important;
+}
+#upInput {
+  display: none;
+}
+#upInput2 {
+  display: none;
+}
+#upInputAudio {
+  display: none;
+}
+.pageTitle {
+  font-size: 18px;
+  font-weight: 700;
+  position: absolute;
+  z-index: 11;
+  top: -56px;
+  left: -18px;
+  padding-left: 40px;
+}
+.pageTitle::before {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  content: '';
+  width: 6px;
+  height: 20px;
+  background-color: var(--themeColor);
+}
+.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;
+}
+.ant-image-preview-mask {
+  z-index: 9999 !important;
+}
+.ant-image-preview-wrap {
+  z-index: 9999 !important;
+}
+.ant-image-preview-operations-wrapper {
+  z-index: 9999 !important;
+}
+.ant-notification-notice {
+  max-height: 500px !important;
+  overflow-y: auto !important;
+}
+.ant-picker-dropdown {
+  text-align: center;
+}
+.ant-picker-selection-item-remove {
+  display: none !important;
+}
+#ScreenChange {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.5s;
+}
+#ScreenChange > img {
+  width: 200px;
+}
+#ScreenChange > p {
+  margin-top: 20px;
+  color: #fff;
+  font-size: 18px;
+  height: 40px;
+}
+/*横屏*/
+@media screen and (orientation: landscape) {
+  #ScreenChange {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

src/assets/styles/base.less

@@ -0,0 +1,342 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-size: 14px;
+  user-select: none;
+}
+
+body {
+  font: 1em/1.4 'FZQKBYSJW', 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
+    'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+  height: 100%;
+  color: black;
+}
+
+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: #69c790;
+  --themeColor: #042b8f;
+  --themeColor2: #69c690;
+}
+
+/* 找不到页面 */
+.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);
+}
+
+// 气泡框闪烁问题
+.ant-popconfirm {
+  width: 240px;
+}
+
+// 重置antd样式
+#root {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 500px;
+  height: 100vh;
+  overflow: auto;
+  overflow-y: overlay;
+
+  & > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  a {
+    text-decoration: none;
+    color: black;
+    outline: none;
+  }
+
+  // ？的提示
+  .iconHoverTit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .iconHoverTitTxt {
+    background-color: var(--themeColor);
+    color: #fff;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    font-size: 12px;
+    border-radius: 50%;
+  }
+
+  // a {
+  //   color: var(--themeColor);
+  // }
+
+  /* 普通文字按钮的颜色 */
+  .ant-btn-text {
+    color: var(--themeColor);
+  }
+
+  .ant-btn-text:disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  /* 按钮的危险颜色 */
+  .ant-btn-text.ant-btn-dangerous {
+    color: #ff4d4d;
+  }
+
+  /* antd分页器样式 */
+  // .ant-pagination .ant-pagination-item {
+  //   border-radius: 50%;
+  //   border: 1px solid #999;
+  //   background-color: transparent !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item-active {
+  //   background-color: var(--themeColor) !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item-active a {
+  //   color: #fff !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item:hover {
+  //   background-color: var(--themeColor) !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item:hover a {
+  //   color: #fff !important;
+  // }
+
+  // .ant-pagination-prev {
+  //   border-radius: 50% !important;
+  //   border: 1px solid #999;
+  // }
+
+  // .ant-pagination-prev:hover {
+  //   background-color: var(--themeColor);
+  // }
+
+  // .ant-pagination-prev:hover button {
+  //   color: #fff;
+  // }
+
+  // .ant-pagination-next {
+  //   border-radius: 50% !important;
+  //   border: 1px solid #999;
+  // }
+
+  // .ant-pagination-next:hover {
+  //   background-color: var(--themeColor);
+  // }
+
+  // .ant-pagination-next:hover button {
+  //   color: #fff;
+  // }
+
+  // .ant-pagination-disabled {
+  //   border: 1px solid #ccc;
+  // }
+
+  // .ant-pagination-disabled:hover {
+  //   background-color: transparent;
+  // }
+
+  /* 表格的图片居中 */
+  .tableImgAuto {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* antd图片预览组件 */
+  .ant-image {
+    display: none;
+  }
+
+  /* antd表格居中 */
+
+  .ant-table-cell {
+    text-align: center !important;
+  }
+
+  // 树型 表格 定制化
+  #A2Table3 {
+    .ant-table-row-expand-icon {
+      background-color: var(--themeColor);
+      color: #fff;
+    }
+
+    .ant-table-cell-with-append {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#upInput {
+  display: none;
+}
+
+#upInput2 {
+  display: none;
+}
+
+#upInputAudio {
+  display: none;
+}
+
+// 页面标题
+.pageTitle {
+  font-size: 18px;
+  font-weight: 700;
+  position: absolute;
+  z-index: 11;
+  top: -56px;
+  left: -18px;
+  padding-left: 40px;
+
+  &::before {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    content: '';
+    width: 6px;
+    height: 20px;
+    background-color: var(--themeColor);
+  }
+}
+
+// 滚动条
+.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;
+}
+.ant-image-preview-mask {
+  z-index: 9999 !important;
+}
+.ant-image-preview-wrap {
+  z-index: 9999 !important;
+}
+.ant-image-preview-operations-wrapper {
+  z-index: 9999 !important;
+}
+
+.ant-notification-notice {
+  max-height: 500px !important;
+  overflow-y: auto !important;
+}
+
+// 多日期选择器居中 挡住 按钮（即必须失焦才能点击确定）
+.ant-picker-dropdown {
+  text-align: center;
+}
+.ant-picker-selection-item-remove {
+  display: none !important;
+}
+// .ant-picker-year-btn,
+// .ant-picker-header-super-prev-btn,
+// .ant-picker-header-super-next-btn {
+//   display: none;
+// }
+
+// 横屏 竖屏的切换
+#ScreenChange {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.5s;
+
+  & > img {
+    width: 200px;
+  }
+
+  & > p {
+    margin-top: 20px;
+    color: #fff;
+    font-size: 18px;
+    height: 40px;
+  }
+}
+
+/*横屏*/
+@media screen and (orientation: landscape) {
+  #ScreenChange {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

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%);
+    }
+  }
+}

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;

src/components/AuthRoute/index.tsx

@@ -0,0 +1,21 @@
+import { hasToken } from "@//utils/storage";
+import { MessageFu } from "@/utils/message";
+import React from "react";
+import { Navigate, useLocation } from "react-router-dom";  // v6 新增 API
+
+// 定义保护路由组件，接收需要保护的子组件作为 children
+type AuthRouteProps = {
+  children: React.ReactNode;
+};
+
+export default function AuthRoute({ children }: AuthRouteProps) {
+  const location = useLocation();  // 获取当前路由位置，用于重定向后返回原页面
+
+  if (hasToken()) {
+    return <>{children}</>;  // 已登录：渲染子组件
+  } else {
+    MessageFu.warning("登录失效!");
+    // 未登录：重定向到登录页，并记录当前位置（登录后可返回）
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+}

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;
+        }
+      }
+    }
+  }
+
+}

src/components/ImageLazy/index.tsx

@@ -0,0 +1,63 @@
+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
+  srcBig?: string
+  noLook?: boolean
+  offline?: boolean
+}
+
+function ImageLazy({ width = 100, height = 100, src, srcBig, 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 : srcBig ? baseURL + srcBig : baseURL + src, show: true }
+    })
+  }, [offline, src, srcBig])
+
+  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

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%;
+      }
+    }
+  }
+}

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;

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;

src/components/MyPopconfirm.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react'
+import { Button, Popconfirm } from 'antd'
+
+type Props = {
+  txtK: '删除' | '取消' | '重置密码' | '退出登录' | '清空' | '取消认证'
+  onConfirm: () => void
+  Dom?: React.ReactNode
+  loc?: 'bottom'
+}
+
+function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
+  const txt = useMemo(() => {
+    const obj = {
+      删除: ['删除后无法恢复，是否删除?', '删除'],
+      取消: ['放弃编辑后，信息将不会保存!', '放弃'],
+      重置密码: ['密码重制后为123456，是否重置?', '重置'],
+      退出登录: ['确定退出吗?', '确定'],
+      清空: ['确定清空吗?', '确定'],
+      取消认证: ['是否移除该用户的团队认证资格及信息?', '移除']
+    }
+    return Reflect.get(obj, txtK) || ['', '']
+  }, [txtK])
+
+  return (
+    <Popconfirm
+      placement={loc}
+      title={txt[0]}
+      okText={txt[1]}
+      cancelText='取消'
+      onConfirm={onConfirm}
+      okButtonProps={{ loading: false }}
+    >
+      {Dom ? (
+        Dom
+      ) : txtK === '删除' ? (
+        <Button size='small' type='text' danger>
+          {txtK}
+        </Button>
+      ) : (
+        <Button>{txtK}</Button>
+      )}
+    </Popconfirm>
+  )
+}
+
+const MemoMyPopconfirm = React.memo(MyPopconfirm)
+
+export default MemoMyPopconfirm

src/components/MyTable/index.module.scss

@@ -0,0 +1,21 @@
+.MyTable {
+  :global {
+    .ant-table-body {
+      overflow-y: auto !important;
+      overflow-y: overlay !important;
+
+      .ant-table-row {
+        .ant-table-cell {
+          padding: 10px;
+
+          a {
+            color: var(--themeColor) !important;
+          }
+        }
+      }
+      .tabx {
+        color: #ff4d4d;
+      }
+    }
+  }
+}

src/components/MyTable/index.tsx

@@ -0,0 +1,171 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import styles from './index.module.scss'
+import { Table } from 'antd'
+import ImageLazy from '../ImageLazy'
+
+type Props = {
+  yHeight?: number //设置表格的高度
+  list: any //表格数据
+  columnsTemp: any[][] //表格展示
+  total?: number //总数
+  pageNum?: number
+  pageSize?: number
+  pagingInfo?: any | boolean
+  onChange?: (pageNum: number, pageSize: number) => void
+  lastBtn?: any
+  classKey?: string //一个组件多次使用的时候要传递，分别设置style
+  // 表格简单的合并
+  merge?: { type: string; num: number; loc: 'rowSpan' | 'colSpan' }
+  // 定制化表头
+  myTitle?: { name: string; Com: React.ReactNode }
+  // 为空的定制字段
+  isNull?: string
+}
+
+// 表格内容定制化
+const tableComObj = (key: string, val: string[]) => {
+  const obj = {
+    A: (
+      <a href={val[1]} target='_blank' title={val[1]} rel='noreferrer'>
+        {val[0]}
+      </a>
+    )
+  }
+  return Reflect.get(obj, key)
+}
+
+function MyTable({
+  yHeight,
+  list,
+  columnsTemp,
+  total,
+  pageNum = 1,
+  pageSize = 10,
+  pagingInfo = {
+    showQuickJumper: true,
+    position: ['bottomCenter'],
+    showSizeChanger: true
+  },
+  onChange,
+  lastBtn = [],
+  classKey = '',
+  merge,
+  myTitle,
+  isNull = '（空）'
+}: Props) {
+  useEffect(() => {
+    const dom = document.querySelector(`.MyTable${classKey} .ant-table-body`) as HTMLDivElement
+
+    if (dom && yHeight) dom.style.height = yHeight + 'px'
+  }, [classKey, yHeight])
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      if (onChange) {
+        onChange(pageNum, pageSize)
+      }
+    },
+    [onChange]
+  )
+
+  const dataChangeFu = useCallback(
+    (v: any) => {
+      /**
+       * index:序号
+       * txt:正常数据
+       * img:图片
+       * txtChange:判断显示不同字段
+       * text:文字比较多的情况
+       */
+
+      const obj = {
+        index: (_: any, __: any, index: number) => index + 1 + (pageNum - 1) * pageSize,
+        txt: (item: any) =>
+          v[3] && !item[v[2]] ? (
+            <div dangerouslySetInnerHTML={{ __html: v[3] }}></div>
+          ) : (
+            item[v[2]] || isNull
+          ),
+        img: (item: any) =>
+          v[3] && !item[v[2]] ? (
+            <div dangerouslySetInnerHTML={{ __html: v[3] }}></div>
+          ) : (
+            <div className='tableImgAuto'>
+              <ImageLazy
+                width={60}
+                height={60}
+                srcBig={item.thumbPc}
+                src={item[v[2]] || item.thumb}
+                offline={(item[v[2]] || item.thumb).includes('http')}
+              />
+            </div>
+          ),
+        txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || v[4] || isNull,
+        text: (item: any) => {
+          let tempCom: any = item[v[2]] || isNull
+
+          if (tempCom.length >= v[3]) {
+            tempCom = tempCom.substring(0, v[3]) + '...'
+          }
+
+          if (v[4]) {
+            tempCom = tableComObj(v[4], [tempCom, item[v[2]]])
+          } else if (item[v[2]].length >= v[3]) {
+            tempCom = (
+              <span style={{ cursor: 'pointer' }} title={item[v[2]]}>
+                {tempCom}
+              </span>
+            )
+          }
+
+          return tempCom
+        }
+      }
+
+      return Reflect.get(obj, v[0])
+    },
+    [isNull, pageNum, pageSize]
+  )
+
+  const columns = useMemo(() => {
+    const arr: any = columnsTemp.map((v: any) => ({
+      title: myTitle && v.includes(myTitle.name) ? myTitle.Com : v[1],
+      render: dataChangeFu(v),
+      onCell:
+        merge && v.includes(merge.type)
+          ? // {rowSpan:3}
+            (item: any, index: number) => ({
+              rowSpan: index === 0 ? merge.num : 0
+            })
+          : ''
+    }))
+
+    return arr
+  }, [columnsTemp, dataChangeFu, merge, myTitle])
+
+  return (
+    <Table
+      className={`${styles.MyTable} MyTable${classKey}`}
+      scroll={{ y: yHeight ? yHeight : '' }}
+      dataSource={list}
+      columns={[...columns, ...lastBtn]}
+      rowKey='id'
+      pagination={
+        pagingInfo
+          ? {
+              ...pagingInfo,
+              current: pageNum,
+              pageSize: pageSize,
+              total: total,
+              onChange: paginationChange()
+            }
+          : false
+      }
+    />
+  )
+}
+
+const MemoMyTable = React.memo(MyTable)
+
+export default MemoMyTable

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";
+    }, 500);
+    return () => {
+      clearTimeout(timeRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="noFindPage">
+      <Result
+        status="404"
+        title="404"
+        subTitle="找不到页面，或没有权限!"
+      />
+    </div>
+  );
+}

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;
+}

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;

src/components/UpAsyncLoding/index.module.scss

@@ -0,0 +1,43 @@
+.UpAsyncLoding {
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .4);
+
+  :global {
+    .progressBox {
+      position: absolute;
+      top: 60%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 500px;
+      height: 6px;
+      border-radius: 3px;
+      border: 1px solid var(--themeColor);
+      overflow: hidden;
+
+      #progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 100%;
+        background-color: var(--themeColor);
+      }
+
+    }
+
+    .closeUpBtn {
+      position: absolute;
+      top: 70%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+  }
+}

src/components/UpAsyncLoding/index.tsx

@@ -0,0 +1,38 @@
+import store, { RootState } from "@/store";
+import { Button } from "antd";
+import React, { useCallback } from "react";
+import { useSelector } from "react-redux";
+import styles from "./index.module.scss";
+function UpAsyncLoding() {
+  // 从仓库中获取取消上传的函数
+  const closeUpFile = useSelector(
+    (state: RootState) => state.A0Layout.closeUpFile
+  );
+
+  const btnClose = useCallback(() => {
+    closeUpFile.fu();
+
+    setTimeout(() => {
+      store.dispatch({
+        type: "layout/closeUpFile",
+        payload: { fu: () => {}, state: false },
+      });
+    }, 200);
+  }, [closeUpFile]);
+
+  return (
+    <div id="UpAsyncLoding" className={styles.UpAsyncLoding}>
+      <div className="progressBox">
+        <div id="progress"></div>
+      </div>
+      {/* 手动取消上传按钮 */}
+      <div className="closeUpBtn">
+        <Button onClick={btnClose}>取消上传</Button>
+      </div>
+    </div>
+  );
+}
+
+const MemoUpAsyncLoding = React.memo(UpAsyncLoding);
+
+export default MemoUpAsyncLoding;

src/components/ZupAudio/index.module.scss

@@ -0,0 +1,63 @@
+// 上传无障碍音频的样式
+.ZupAudio {
+  margin-left: 20px;
+  width: 180px;
+  height: 32px;
+  // position: relative;
+  // top: -4px;
+  border: 1px solid #ccc;
+  border-radius: 16px;
+  background-color: #fff;
+
+  :global {
+
+    .ZupAudio1 {
+      cursor: pointer;
+
+      display: flex;
+      justify-content: center;
+
+      .anticon-upload {
+        font-size: 20px;
+      }
+
+      .ZupAudio1_1 {
+        line-height: 15px;
+        color: #aaa5cb;
+        margin-left: 10px;
+
+        &>p {
+          &:nth-of-type(2) {
+            font-size: 10px;
+            // color: red;
+            opacity: .7;
+          }
+        }
+      }
+    }
+
+    .ZupAudio2 {
+      padding: 0 10px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .anticon {
+        font-size: 18px;
+        cursor: pointer;
+
+      }
+
+      &>div {
+        height: 100%;
+        line-height: 30px;
+        width: calc(100% - 35px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+
+  }
+}

src/components/ZupAudio/index.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useRef } from 'react'
+import styles from './index.module.scss'
+import { MessageFu } from '@/utils/message'
+import { API_upFile } from '@/store/action/layout'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { UploadOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'
+import store from '@/store'
+import MyPopconfirm from '../MyPopconfirm'
+
+export type ZupAudioType = {
+  fileName: string
+  filePath: string
+}
+
+type Props = {
+  fileInfo: ZupAudioType
+  upDataFu: (info: ZupAudioType) => void
+  delFu: () => void
+  dirCode: string
+  myUrl: string
+  size?: number
+  isLook?: boolean
+}
+
+function ZupAudio({
+  size = 10,
+  isLook = false,
+  fileInfo,
+  upDataFu,
+  delFu,
+  dirCode,
+  myUrl
+}: Props) {
+  // 上传 无障碍音频的 点击
+  const handeUpAudio = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+        // console.log("-----", filesInfo);
+
+        // 校验格式
+        const type = ['audio/mpeg']
+        if (!type.includes(filesInfo.type)) {
+          e.target.value = ''
+          return MessageFu.warning(`只支持.mp3格式!`)
+        }
+
+        // 校验大小
+        if (filesInfo.size > size * 1024 * 1024) {
+          e.target.value = ''
+          return MessageFu.warning(`最大支持${size}M!`)
+        }
+        // 创建FormData对象
+        const fd = new FormData()
+
+        fd.append('type', 'audio')
+        fd.append('dirCode', dirCode)
+        fd.append('file', filesInfo)
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            // console.log(res);
+            upDataFu(res.data)
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [dirCode, myUrl, size, upDataFu]
+  )
+
+  // 上传附近的ref
+  const myInput = useRef<HTMLInputElement>(null)
+
+  return (
+    <div
+      className={styles.ZupAudio}
+      id='upInputAudioBox'
+      hidden={isLook && !fileInfo.filePath}
+    >
+      {/* 上传无障碍音频 */}
+      <input
+        id='upInputAudio'
+        type='file'
+        accept='.mp3'
+        onChange={e => handeUpAudio(e)}
+        ref={myInput}
+      />
+      {fileInfo.filePath ? (
+        <div className='ZupAudio2'>
+          <div title={fileInfo.fileName}>{fileInfo.fileName}</div>
+          <EyeOutlined
+            rev={undefined}
+            title='预览'
+            onClick={() =>
+              store.dispatch({
+                type: 'layout/lookDom',
+                payload: { src: fileInfo.filePath, type: 'audio' }
+              })
+            }
+          />
+
+          {isLook ? null : (
+            <>
+              &nbsp;
+              <MyPopconfirm
+                txtK='删除'
+                onConfirm={delFu}
+                Dom={<DeleteOutlined title='删除' className='ZTbox2X' rev={undefined} />}
+              />
+            </>
+          )}
+        </div>
+      ) : (
+        <div className='ZupAudio1' onClick={() => myInput.current?.click()}>
+          <UploadOutlined rev={undefined} />
+          <div className='ZupAudio1_1'>
+            <p>上传无障碍音频</p>
+            <p>支持{size}MB以下mp3格式</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const MemoZupAudio = React.memo(ZupAudio)
+
+export default MemoZupAudio

src/components/ZupOne/index.module.scss

@@ -0,0 +1,101 @@
+.ZupOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  :global {
+
+    .file_upIcon {
+      color: #a6a6a6;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 30px;
+      width: 100px;
+      height: 100px;
+      border: 1px dashed #797979;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+
+    }
+
+    .file_img {
+      width: 100px;
+      height: 126px;
+      position: relative;
+      margin-top: 10px;
+
+      .file_closeBox {
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        z-index: 99;
+        background-color: rgba(0, 0, 0, 0.8);
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 16px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+
+
+      .file_lookBox {
+        width: 100%;
+        background-color: rgba(0, 0, 0, .6);
+        color: #fff;
+        display: flex;
+        justify-content: space-around;
+
+        &>a {
+          color: #fff !important;
+        }
+
+        font-size: 16px;
+      }
+    }
+
+    .fileInfo {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+
+      .clearCover {
+        margin-left: 20px;
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      &>a {
+        color: black;
+      }
+    }
+
+    .fileBoxRow_r_tit {
+      height: 46px;
+      margin-top: 5px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+
+
+    }
+
+    .noUpThumb {
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transition: top .2s;
+      color: #ff4d4f;
+      top: -10px;
+    }
+
+    .noUpThumbAc {
+      top: 0;
+      opacity: 1;
+    }
+  }
+}

src/components/ZupOne/index.tsx

@@ -0,0 +1,295 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import ImageLazy from '@/components/ImageLazy'
+import {
+  PlusOutlined,
+  EyeOutlined,
+  CloseOutlined,
+  DownloadOutlined,
+  UploadOutlined
+} from '@ant-design/icons'
+import store from '@/store'
+import { baseURL } from '@/utils/http'
+import classNames from 'classnames'
+import { Button } from 'antd'
+import { MessageFu } from '@/utils/message'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { API_upFile } from '@/store/action/layout'
+import { forwardRef, useImperativeHandle } from 'react'
+import MyPopconfirm from '../MyPopconfirm'
+
+type MyTypeType = 'thumb' | 'video' | 'audio' | 'model' | 'pdf' | 'epub'
+
+// 这个组件 只处理 上传 一张图片或者 视频 音频 模型 pdf 的情况
+
+type Props = {
+  fileCheck: boolean //有没有点击过确定
+  size: number //上传附件大小（M）
+  dirCode: string //文件的code码
+  myUrl: string //请求地址
+  format: string[] //上传格式 ["image/jpeg", "image/png"] ["video/mp4"] ,application/pdf
+  formatTxt: string //上传图片提示
+  checkTxt: string
+  upTxt: string
+  myType: MyTypeType
+  isLook?: boolean //是不是查看
+  // ref: any //当前自己的ref，给父组件调用
+  // 其他后端需要的配置项
+  otherArr?: { key: string; value: string }[]
+}
+
+function ZupOne(
+  {
+    fileCheck,
+    size,
+    dirCode,
+    myUrl,
+    format,
+    formatTxt,
+    checkTxt,
+    upTxt,
+    myType,
+    isLook = false,
+    otherArr
+  }: Props,
+  ref: any
+) {
+  const [fileUrl, setFileUrl] = useState({
+    fileName: '',
+    filePath: '',
+    thumb: '' //压缩图
+  })
+
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传封面图
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+        // console.log("-----", filesInfo.type);
+
+        // 校验格式
+        const type = format
+
+        if (myType === 'pdf') {
+          if (!filesInfo.type.includes('pdf')) {
+            e.target.value = ''
+            return MessageFu.warning(`只支持${formatTxt}格式!`)
+          }
+        } else if (myType === 'epub') {
+          if (!filesInfo.name.endsWith('.epub')) {
+            e.target.value = ''
+            return MessageFu.warning(`只支持${formatTxt}格式!`)
+          }
+        } else {
+          if (!type.includes(filesInfo.type)) {
+            e.target.value = ''
+            return MessageFu.warning(`只支持${formatTxt}格式!`)
+          }
+        }
+
+        // 校验大小
+        if (filesInfo.size > size * 1024 * 1024) {
+          e.target.value = ''
+          return MessageFu.warning(`最大支持${size}M!`)
+        }
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        let myTypeRes: string = myType
+        if (['pdf', 'epub'].includes(myTypeRes)) myTypeRes = 'doc'
+        fd.append('type', myTypeRes)
+        fd.append('dirCode', dirCode)
+        fd.append('file', filesInfo)
+
+        if (otherArr) {
+          otherArr.forEach((v: any) => {
+            fd.append(v.key, v.value)
+          })
+        }
+
+        if (filesInfo.size > 1 * 1024 * 1024) {
+          // 开启压缩图片
+          fd.append('isCompress', 'true')
+        }
+
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            setFileUrl(res.data)
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [dirCode, format, formatTxt, myType, myUrl, otherArr, size]
+  )
+
+  // 让父组件调用的 回显 附件 地址
+  const setFileComFileFu = useCallback(
+    (valObj: { fileName: string; filePath: string; thumb: string }) => {
+      setFileUrl(valObj)
+    },
+    []
+  )
+
+  // 让父组件调用的返回 附件 名字和路径
+  const fileComFileResFu = useCallback(() => {
+    return fileUrl
+  }, [fileUrl])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    setFileComFileFu,
+    fileComFileResFu
+  }))
+
+  const acceptRes = useMemo(() => {
+    let accept = '.png,.jpg,.jpeg'
+    if (myType === 'video') accept = '.mp4'
+    else if (myType === 'audio') accept = '.mp3'
+    else if (myType === 'model') accept = '.4dage'
+    else if (myType === 'pdf') accept = '.pdf'
+    else if (myType === 'epub') accept = '.epub'
+    return accept
+  }, [myType])
+
+  // 点击 预览（除了图片）
+  const lookFileNoImgFu = useCallback(
+    (type: MyTypeType) => {
+      if (type === 'pdf' || type === 'thumb') {
+        // 新窗口打开
+        window.open(baseURL + fileUrl.filePath)
+      } else if (type !== 'epub') {
+        store.dispatch({
+          type: 'layout/lookDom',
+          payload: { src: fileUrl.filePath, type }
+        })
+      }
+
+      // if (type === "pdf") {
+      // } else {
+      // }
+    },
+    [fileUrl.filePath]
+  )
+
+  return (
+    <div className={styles.ZupOne}>
+      <input
+        id='upInput'
+        type='file'
+        accept={acceptRes}
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+      {myType === 'thumb' ? (
+        <div
+          hidden={fileUrl.filePath !== ''}
+          className='file_upIcon'
+          onClick={() => myInput.current?.click()}
+        >
+          <PlusOutlined rev={undefined} />
+        </div>
+      ) : (
+        <Button
+          hidden={fileUrl.filePath !== ''}
+          onClick={() => myInput.current?.click()}
+          icon={<UploadOutlined rev={undefined} />}
+        >
+          上传
+        </Button>
+      )}
+
+      {/* 为图片的情况-------------- */}
+      {myType === 'thumb' ? (
+        <div className='file_img' hidden={fileUrl.filePath === ''}>
+          {fileUrl ? (
+            <ImageLazy
+              width={100}
+              height={100}
+              srcBig={fileUrl.filePath}
+              src={fileUrl.thumb}
+              noLook
+            />
+          ) : null}
+
+          {/* 删除 */}
+          <div className='file_closeBox' hidden={isLook}>
+            <MyPopconfirm
+              txtK='删除'
+              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
+              Dom={<CloseOutlined rev={undefined} />}
+            />
+          </div>
+
+          {/* 预览 下载 */}
+          <div className='file_lookBox'>
+            <EyeOutlined
+              onClick={() =>
+                store.dispatch({
+                  type: 'layout/lookBigImg',
+                  payload: { url: baseURL + fileUrl.filePath, show: true }
+                })
+              }
+              rev={undefined}
+            />
+            <a href={baseURL + fileUrl.filePath} download target='_blank' rel='noreferrer'>
+              <DownloadOutlined rev={undefined} />
+            </a>
+          </div>
+        </div>
+      ) : fileUrl.filePath ? (
+        <div className='fileInfo'>
+          <div className='upSuccTxt'>{fileUrl.fileName}</div>
+          {/* 视频预览 */}
+          <div
+            className='clearCover'
+            hidden={!fileUrl.filePath || myType === 'epub'}
+            onClick={() => lookFileNoImgFu(myType)}
+          >
+            <EyeOutlined rev={undefined} />
+          </div>
+          {/* 视频下载 */}
+          <a
+            href={baseURL + fileUrl.filePath}
+            download
+            target='_blank'
+            className='clearCover'
+            rel='noreferrer'
+          >
+            <DownloadOutlined rev={undefined} />
+          </a>
+          {/* 视频删除 */}
+
+          {isLook ? null : (
+            <MyPopconfirm
+              txtK='删除'
+              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
+              Dom={<CloseOutlined className='clearCover' rev={undefined} />}
+            />
+          )}
+        </div>
+      ) : null}
+
+      <div className='fileBoxRow_r_tit' hidden={isLook}>
+        格式要求：支持{formatTxt}格式；最大支持{size}M。{upTxt}
+        <br />
+        <div
+          className={classNames('noUpThumb', !fileUrl.filePath && fileCheck ? 'noUpThumbAc' : '')}
+        >
+          {checkTxt}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default forwardRef(ZupOne)

src/components/ZupTypes/index.module.scss

@@ -0,0 +1,215 @@
+.ZupTypes {
+  padding-top: 3px;
+
+  :global {
+    .ZTboxTit {
+      margin-left: 10px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+      position: relative;
+      top: 4px;
+    }
+
+    .ZTbox {
+      margin-top: 20px;
+      display: flex;
+
+      .ZTbox1 {
+        position: relative;
+        top: 3px;
+        width: 60px;
+
+        & > span {
+          color: #ff4d4f;
+        }
+      }
+
+      .ZTbox2 {
+        width: calc(100% - 60px);
+        margin-left: 5px;
+        display: flex;
+        font-size: 16px;
+        align-items: center;
+
+        .ZTbox2Look {
+          margin-left: 20px;
+          cursor: pointer;
+        }
+
+        .ZTbox2Down {
+          margin-left: 15px;
+          color: black;
+        }
+
+        .ZTbox2X {
+          cursor: pointer;
+          margin-left: 15px;
+        }
+      }
+    }
+
+    // 图片
+    .ZTboxImgMain {
+      margin-top: 20px;
+
+      .ZTboxImgBox {
+        display: flex;
+
+        .ZTbox1 {
+          position: relative;
+          top: 3px;
+          width: 60px;
+
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+
+        .ZTbox1Img {
+          width: calc(100% - 60px);
+          display: flex;
+          flex-wrap: wrap;
+
+          .ZTbox1ImgIcon {
+            margin-right: 20px;
+            color: #a6a6a6;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 30px;
+            width: 100px;
+            height: 100px;
+            border: 1px dashed #797979;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .ZTbox1ImgRow {
+            // content-visibility:auto;
+            margin-right: 20px;
+            width: 100px;
+            height: 125px;
+            position: relative;
+            margin-bottom: 20px;
+            cursor: move;
+            position: relative;
+
+            // 第一张作为封面
+            .ZTbox1ImgRowCover {
+              font-size: 12px;
+              line-height: 22px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 24px;
+              background-color: rgba(0, 0, 0, 0.8);
+              color: #fff;
+              text-align: center;
+              pointer-events: none;
+            }
+
+            // 修改图片名字
+            .ZTbox1ImgRowName {
+              font-size: 12px;
+              line-height: 22px;
+              position: absolute;
+              left: 0;
+              bottom: 25px;
+              width: 100%;
+              cursor: pointer;
+              height: 24px;
+              padding: 0 3px;
+              background-color: rgba(0, 0, 0, 0.8);
+              color: #fff;
+              text-align: center;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+
+              &:hover {
+                color: var(--themeColor);
+              }
+            }
+
+            .ZTbox1ImgRowIcon {
+              width: 100%;
+              background-color: rgba(0, 0, 0, 0.6);
+              color: #fff;
+              display: flex;
+              justify-content: space-around;
+              font-size: 16px;
+
+              a {
+                color: #fff !important;
+              }
+            }
+
+            .ZTbox1ImgRowX {
+              cursor: pointer;
+              position: absolute;
+              right: -10px;
+              top: -10px;
+              z-index: 99;
+              background-color: rgba(0, 0, 0, 0.8);
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              font-size: 16px;
+              color: #fff;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+
+    .ZcheckTxt {
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transition: top 0.2s;
+      color: #ff4d4f;
+      top: -10px;
+    }
+
+    .ZcheckTxtAc {
+      top: 2px;
+      opacity: 1;
+    }
+  }
+}
+
+// 查看情况
+.ZupTypesLook {
+  :global {
+    .ZTbox1ImgRowName {
+      cursor: default !important;
+      color: #fff !important;
+    }
+
+    .ZTbox1ImgRow {
+      cursor: default !important;
+    }
+
+    .ZTbox1ImgRowX {
+      display: none !important;
+    }
+  }
+}
+
+// 修改图片名字的弹窗
+.ZupTypesMo {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ZupTypesMoBtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}

src/components/ZupTypes/index.tsx

@@ -0,0 +1,585 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Checkbox, Input, Modal } from 'antd'
+import { forwardRef, useImperativeHandle } from 'react'
+import { baseURL } from '@/utils/http'
+import {
+  PlusOutlined,
+  CloseCircleOutlined,
+  UploadOutlined,
+  CloseOutlined,
+  DownloadOutlined,
+  EyeOutlined
+} from '@ant-design/icons'
+import { MessageFu } from '@/utils/message'
+import { API_upFile } from '@/store/action/layout'
+import { fileDomInitialFu } from '@/utils/domShow'
+import store from '@/store'
+import ImageLazy from '../ImageLazy'
+import classNames from 'classnames'
+import MyPopconfirm from '../MyPopconfirm'
+// import { A2_APIchangeImgName } from "@/store/action/A2exhibition";
+
+export type FileListType = {
+  fileName: string
+  thumb?: string
+  filePath: string
+  id: number
+  type: 'model' | 'img' | 'audio' | 'video'
+  imgName: string
+}
+
+type Props = {
+  // ref: any //当前自己的ref，给父组件调用
+  selecFlag: string //筛选的字符串 模型/图片/音频/视频
+  fileCheck: boolean //有没有点击过确定
+  dirCode: string //文件的code码
+  myUrl: string //请求地址
+  isLook?: boolean //是不是查看
+  modelSize?: number //模型文件大小限制
+  imgSize?: number //图片大小限制
+  imgLength?: number //图片数量限制
+  audioSize?: number //音频大小限制
+  videoSize?: number //视频大小限制
+  videoTit?: string //视频上传的提示语
+  isTypeShow?: boolean //默认就选中（只有一个类型的时候）
+  isUpName?: boolean //是否能修改图片名字
+  lastImgTxt?: string //加载最后面的上传提示
+  oneIsCover?: boolean //是否将第一张作为封面
+}
+
+function ZupTypes(
+  {
+    selecFlag,
+    fileCheck,
+    dirCode,
+    myUrl,
+    isLook = false,
+    modelSize = 500,
+    imgSize = 5,
+    imgLength = 9,
+    audioSize = 10,
+    videoSize = 500,
+    videoTit = '',
+    isTypeShow = false,
+    isUpName = false,
+    lastImgTxt = '',
+    oneIsCover = false
+  }: Props,
+  ref: any
+) {
+  // 筛选
+  const [typeCheck, setTypeCheck] = useState<string[]>([])
+
+  // 筛选数组
+  const typeCheckArr = useMemo(() => {
+    const arr = [
+      { label: '模型', value: 'model' },
+      { label: '图片', value: 'img' },
+      { label: '音频', value: 'audio' },
+      { label: '视频', value: 'video' }
+    ]
+
+    const arrRes = arr.filter(v => selecFlag.includes(v.label))
+    if (arrRes.length <= 1 && isTypeShow) {
+      setTypeCheck([arrRes[0].value])
+      // 默认就选中（只有一个类型的时候）
+    }
+
+    return arrRes
+  }, [isTypeShow, selecFlag])
+
+  // 上传附件的信息
+  const [fileList, setFileList] = useState({
+    model: {} as FileListType,
+    img: [] as FileListType[],
+    audio: {} as FileListType,
+    video: {} as FileListType
+  })
+
+  // 附件信息的校验，不满足返回 true
+  const fileCheckFu = useMemo(() => {
+    let flag = false
+    if (typeCheck.length === 0) flag = true
+    if (typeCheck.includes('model') && !fileList.model.id) flag = true
+    if (typeCheck.includes('img') && fileList.img.length === 0) flag = true
+    if (typeCheck.includes('audio') && !fileList.audio.id) flag = true
+    if (typeCheck.includes('video') && !fileList.video.id) flag = true
+    return flag
+  }, [fileList, typeCheck])
+
+  // 点击上传附件按钮
+  const myInput = useRef<HTMLInputElement>(null)
+
+  const [fileOneType, setFileOneType] = useState('')
+
+  useEffect(() => {
+    if (fileOneType) myInput.current?.click()
+  }, [fileOneType])
+
+  const upFileFu = useCallback((type: string) => {
+    setFileOneType('')
+    window.setTimeout(() => {
+      setFileOneType(type)
+    }, 100)
+  }, [])
+
+  // 上传附件的处理函数
+  const handeUpPhoto2 = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        let anType = ['image/jpeg', 'image/png']
+        let anTit1 = '只支持png、jpg格式!'
+        let anTit2 = `最大支持${imgSize}M!`
+        let anSize = imgSize * 1024 * 1024
+
+        if (fileOneType === 'audio') {
+          anType = ['audio/mpeg']
+          anTit1 = '只支持mp3格式!'
+          anTit2 = `最大支持${audioSize}M!`
+          anSize = audioSize * 1024 * 1024
+        } else if (fileOneType === 'video') {
+          anType = ['video/mp4']
+          anTit1 = '只支持mp4格式!'
+          anTit2 = `最大支持${videoSize}M!`
+          anSize = videoSize * 1024 * 1024
+        } else if (fileOneType === 'model') {
+          anType = ['']
+          anTit1 = '只支持4dage格式!'
+          anTit2 = `最大支持${modelSize}M!`
+          anSize = modelSize * 1024 * 1024
+        }
+
+        // 校验格式
+        if (fileOneType !== 'model') {
+          if (!anType.includes(filesInfo.type)) {
+            e.target.value = ''
+            return MessageFu.warning(anTit1)
+          }
+        } else {
+          if (!filesInfo.name.includes('.4dage')) {
+            e.target.value = ''
+            return MessageFu.warning(anTit1)
+          }
+        }
+
+        // 校验大小
+        if (filesInfo.size > anSize) {
+          e.target.value = ''
+          return MessageFu.warning(anTit2)
+        }
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append('type', fileOneType)
+        fd.append('dirCode', dirCode)
+        fd.append('isDb', 'true')
+
+        //初始图片 fileName为：未命名
+        if (isUpName) {
+          fd.append('isDefaultName', 'false')
+        }
+
+        fd.append('file', filesInfo)
+
+        if (fileOneType === 'img' && filesInfo.size > 1 * 1024 * 1024) {
+          // 开启压缩图片
+          fd.append('isCompress', 'true')
+        }
+
+        e.target.value = ''
+
+        const res = await API_upFile(fd, myUrl)
+
+        try {
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            if (fileOneType === 'img')
+              setFileList({
+                ...fileList,
+                img: [...fileList.img, { ...res.data, imgName: '未命名' }]
+              })
+            else setFileList({ ...fileList, [fileOneType]: res.data })
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [audioSize, dirCode, fileList, fileOneType, imgSize, isUpName, modelSize, myUrl, videoSize]
+  )
+
+  // 附件图片的拖动
+  const [dragImg, setDragImg] = useState<any>(null)
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
+      if (isLook) return
+      e.dataTransfer.dropEffect = 'move'
+    },
+    [isLook]
+  )
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
+      if (isLook) return
+
+      e.dataTransfer.effectAllowed = 'move'
+      if (item === dragImg) return
+      const newItems = [...fileList.img] //拷贝一份数据进行交换操作。
+      const src = newItems.indexOf(dragImg) //获取数组下标
+      const dst = newItems.indexOf(item)
+      newItems.splice(dst, 0, ...newItems.splice(src, 1)) //交换位置
+      setFileList({ ...fileList, img: newItems })
+    },
+    [dragImg, fileList, isLook]
+  )
+
+  // 删除某一张图片
+  const delImgListFu = useCallback(
+    (id: number) => {
+      const newItems = fileList.img.filter(v => v.id !== id)
+      setFileList({ ...fileList, img: newItems })
+    },
+    [fileList]
+  )
+
+  // 模型 音频 视频 的 dom
+  const resOneDivDom = useCallback(
+    (type: 'model' | 'audio' | 'video') => {
+      const dom = (
+        <div className='ZTbox' hidden={!typeCheck.includes(type)}>
+          <div className='ZTbox1'>
+            <span> </span>
+            {type === 'model' ? '模型' : type === 'audio' ? '音频' : '视频'}：
+          </div>
+          {fileList[type].id ? (
+            <div className='ZTbox2'>
+              <div className='ZTbox2Name'>{fileList[type].fileName}</div>
+
+              <div
+                className='ZTbox2Look'
+                onClick={() =>
+                  store.dispatch({
+                    type: 'layout/lookDom',
+                    payload: { src: fileList[type].filePath, type }
+                  })
+                }
+              >
+                <EyeOutlined rev={undefined} />
+              </div>
+
+              <a
+                href={baseURL + fileList[type].filePath}
+                download
+                target='_blank'
+                className='ZTbox2Down'
+                rel='noreferrer'
+              >
+                <DownloadOutlined rev={undefined} />
+              </a>
+
+              <MyPopconfirm
+                txtK='删除'
+                onConfirm={() => setFileList({ ...fileList, [type]: {} as FileListType })}
+                Dom={<CloseCircleOutlined className='ZTbox2X' rev={undefined} />}
+              />
+            </div>
+          ) : (
+            <>
+              <Button onClick={() => upFileFu(type)} icon={<UploadOutlined rev={undefined} />}>
+                上传
+              </Button>
+
+              <div className='ZTboxTit'>
+                {type === 'model'
+                  ? `仅支持4dage格式的模型文件，大小不能超过${modelSize}M。`
+                  : type === 'audio'
+                    ? `仅支持mp3格式的音频文件，大小不得超过${audioSize}MB。`
+                    : `仅支持mp4格式的视频文件，大小不得超过${videoSize}MB。${videoTit}`}
+              </div>
+            </>
+          )}
+        </div>
+      )
+      return dom
+    },
+    [audioSize, fileList, modelSize, typeCheck, upFileFu, videoSize, videoTit]
+  )
+
+  // ------------让父组件调用的 回显
+  const setFileComFileFu = useCallback((info: any) => {
+    if (info.type) setTypeCheck(info.type.split(','))
+
+    if (info.fileList && info.fileList.length) {
+      const data: FileListType[] = info.fileList
+      const obj = {
+        model: {} as FileListType,
+        img: [] as FileListType[],
+        audio: {} as FileListType,
+        video: {} as FileListType
+      }
+
+      data.forEach(v => {
+        if (v.type === 'img') {
+          obj.img.push({ ...v, imgName: v.fileName })
+        } else obj[v.type!] = v
+      })
+      setFileList(obj)
+    }
+  }, [])
+
+  // --------------让父组件调用的返回 附件 信息
+  const fileComFileResFu = useCallback(() => {
+    let coverUrl = ''
+    const fileIds = []
+    if (fileList.model.id && typeCheck.includes('model')) fileIds.push(fileList.model.id)
+    if (fileList.audio.id && typeCheck.includes('audio')) fileIds.push(fileList.audio.id)
+    if (fileList.video.id && typeCheck.includes('video')) fileIds.push(fileList.video.id)
+    if (typeCheck.includes('img')) {
+      fileList.img.forEach((v, i) => {
+        if (v.id) {
+          fileIds.push(v.id)
+          if (oneIsCover && i === 0) {
+            // 返回 第一张图的url 作为封面
+            coverUrl = v.thumb || v.filePath
+          }
+        }
+      })
+    }
+    return {
+      sonType: typeCheck,
+      sonFileIds: fileIds,
+      sonIsOk: fileCheckFu,
+      coverUrl
+    }
+  }, [
+    fileCheckFu,
+    fileList.audio.id,
+    fileList.img,
+    fileList.model.id,
+    fileList.video.id,
+    oneIsCover,
+    typeCheck
+  ])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    setFileComFileFu,
+    fileComFileResFu
+  }))
+
+  // 修改图片名称
+  const [isNameChange, setIsNameChange] = useState({
+    id: 0,
+    oldName: '',
+    newName: ''
+  })
+
+  // 关闭弹窗
+  const isNameChangeXFu = useCallback(() => {
+    setIsNameChange({ id: 0, oldName: '', newName: '' })
+  }, [])
+
+  // 点击图片名字-出来弹窗
+  const isNameChangeFu = useCallback(
+    (item: FileListType) => {
+      if (isLook) return
+      setIsNameChange({ id: item.id, oldName: item.imgName, newName: '' })
+    },
+    [isLook]
+  )
+
+  // 修改完这点击 确定修改
+  const isNameChangeOkFu = useCallback(async () => {
+    // if (!isNameChange.newName) return MessageFu.warning("图片名不能为空!");
+    // const res = await A2_APIchangeImgName({
+    //   id: isNameChange.id,
+    //   fileName: isNameChange.newName,
+    // });
+    // if (res.code === 0) {
+    //   MessageFu.success("修改图片名成功!");
+    //   setFileList({
+    //     ...fileList,
+    //     img: fileList.img.map((v) => ({
+    //       ...v,
+    //       imgName: v.id === isNameChange.id ? isNameChange.newName : v.imgName,
+    //     })),
+    //   });
+    //   isNameChangeXFu();
+    // }
+  }, [])
+  //
+
+  return (
+    <div className={classNames(styles.ZupTypes, isLook ? styles.ZupTypesLook : '')}>
+      <input
+        id='upInput'
+        type='file'
+        accept={
+          fileOneType === 'img'
+            ? '.png,.jpg,.jpeg'
+            : fileOneType === 'audio'
+              ? '.mp3'
+              : fileOneType === 'model'
+                ? '.4dage'
+                : '.mp4'
+        }
+        ref={myInput}
+        onChange={e => handeUpPhoto2(e)}
+      />
+      <div hidden={isTypeShow}>
+        <Checkbox.Group
+          options={typeCheckArr}
+          value={typeCheck}
+          onChange={e => setTypeCheck(e as string[])}
+        />
+      </div>
+
+      {/* -----------模型 */}
+      {resOneDivDom('model')}
+
+      {/* -----------图片 */}
+      <div className='ZTboxImgMain' hidden={!typeCheck.includes('img')}>
+        <div className='ZTboxImgBox'>
+          <div className='ZTbox1' hidden={isTypeShow}>
+            <span> </span> 图片：
+          </div>
+
+          <div className='ZTbox1Img' style={{ width: isTypeShow ? '100%' : '' }}>
+            <div
+              hidden={(!!fileList.img.length && fileList.img.length >= imgLength) || isLook}
+              className='ZTbox1ImgIcon'
+              onClick={() => upFileFu('img')}
+            >
+              <PlusOutlined rev={undefined} />
+            </div>
+            {fileList.img.map((v, i) => (
+              <div
+                className='ZTbox1ImgRow'
+                key={v.id}
+                draggable='true'
+                onDragStart={() => setDragImg(v)}
+                onDragOver={e => handleDragOver(e, v)}
+                onDragEnter={e => handleDragEnter(e, v)}
+                onDragEnd={() => setDragImg(null)}
+              >
+                {v.thumb || v.filePath ? (
+                  <ImageLazy noLook={true} width={100} height={100} src={v.thumb || v.filePath} />
+                ) : null}
+
+                {oneIsCover && i === 0 ? <div className='ZTbox1ImgRowCover'>封面</div> : null}
+
+                {/* 修改图片名字 */}
+                {isUpName ? (
+                  <div
+                    title={v.imgName}
+                    className='ZTbox1ImgRowName'
+                    onClick={() => isNameChangeFu(v)}
+                  >
+                    {v.imgName}
+                  </div>
+                ) : null}
+
+                <div className='ZTbox1ImgRowIcon'>
+                  <EyeOutlined
+                    onClick={() =>
+                      store.dispatch({
+                        type: 'layout/lookBigImg',
+                        payload: {
+                          url: baseURL + v.filePath,
+                          show: true
+                        }
+                      })
+                    }
+                    rev={undefined}
+                  />
+                  <a href={baseURL + v.filePath} download target='_blank' rel='noreferrer'>
+                    <DownloadOutlined rev={undefined} />
+                  </a>
+                </div>
+
+                <MyPopconfirm
+                  txtK='删除'
+                  onConfirm={() => delImgListFu(v.id!)}
+                  Dom={<CloseOutlined className='ZTbox1ImgRowX' rev={undefined} />}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className='ZTboxTit' hidden={isLook}>
+          {fileList.img.length && fileList.img.length >= 2 ? (
+            <>
+              按住鼠标可拖动图片调整顺序。
+              <br />
+            </>
+          ) : null}
+          支持png、jpg的图片格式；最大支持5M；最多支持{imgLength}张。
+          {lastImgTxt}
+        </div>
+      </div>
+
+      {/* -----------音频 */}
+      {resOneDivDom('audio')}
+
+      {/* -----------视频 */}
+      {resOneDivDom('video')}
+
+      {/* 最后的提示 */}
+      <div className={classNames('ZcheckTxt', fileCheck && fileCheckFu ? 'ZcheckTxtAc' : '')}>
+        请最少上传一张图片!
+      </div>
+
+      {/* 点击修改名字出来的弹窗 */}
+      {isNameChange.id ? (
+        <Modal
+          wrapClassName={styles.ZupTypesMo}
+          open={true}
+          title='修改展品图片名称'
+          footer={
+            [] // 设置footer为空，去掉 取消 确定默认按钮
+          }
+        >
+          <br />
+          <div className='ZupTypesMoRow'>
+            <strong>当前名：</strong>
+            {isNameChange.oldName}
+          </div>
+          <div className='ZupTypesMoRow'>
+            <br />
+            <strong>修改为：</strong>
+            <Input
+              style={{ width: 400 }}
+              placeholder='请输入图片名'
+              maxLength={50}
+              showCount
+              value={isNameChange.newName}
+              onChange={e => {
+                setIsNameChange({
+                  ...isNameChange,
+                  newName: e.target.value.replace(/\s+/g, '')
+                })
+              }}
+            />
+          </div>
+
+          <div className='ZupTypesMoBtn'>
+            <Button onClick={isNameChangeXFu}>取消</Button>
+            &emsp;
+            <Button type='primary' onClick={isNameChangeOkFu}>
+              修改
+            </Button>
+          </div>
+        </Modal>
+      ) : null}
+    </div>
+  )
+}
+
+export default forwardRef(ZupTypes)

src/index.tsx

@@ -0,0 +1,38 @@
+// 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: '#042b8f'
+      }
+    }}
+  >
+    <Provider store={store}>
+      <StyleProvider
+        hashPriority='high'
+        transformers={[legacyLogicalPropertiesTransformer]}
+      >
+        <App />
+      </StyleProvider>
+    </Provider>
+  </ConfigProvider>
+)

src/pages/A1home/index.module.scss

@@ -0,0 +1,102 @@
+.A1home {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  background: url('../../assets/img/home_bg.png') no-repeat top center;
+  background-size: 100% auto;
+}
+
+.title {
+  position: absolute;
+  top: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: 65%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & > img{
+    width: auto;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+/* 贴底展示，自身下半部分被父级 overflow 裁切 */
+.gif {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  z-index: 1;
+  width: 140%;
+  pointer-events: none;
+  transform: translate(-50%, 50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: none;
+    max-height: none;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.btn1,
+.btn2,
+.btn3 {
+  position: absolute;
+  right: 50%;
+  transform: translateX(50%);
+  z-index: 3;
+  width: 145px;
+  height: 40px;
+  border: none;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  transition: opacity 0.2s;
+  background-color: transparent;
+  animation: fadeIn 2s ease-out backwards;
+
+  &:hover {
+    opacity: 0.88;
+  }
+
+  &:active {
+    opacity: 0.75;
+  }
+}
+
+.btn1 {
+  bottom: calc(80px + 50px * 2);
+  background-image: url('../../assets/img/btn1.png');
+  animation-delay: 0.2s;
+}
+
+.btn2 {
+  bottom: calc(80px + 50px);
+  background-image: url('../../assets/img/btn2.png');
+  animation-delay: 0.4s;
+}
+
+.btn3 {
+  bottom: 80px;
+  background-image: url('../../assets/img/btn3.png');
+  animation-delay: 0.6s;
+}

src/pages/A1home/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import styles from './index.module.scss'
+import history from '@/utils/history'
+
+function A1home() {
+  return (
+    <div className={styles.A1home}>
+
+      <div className={styles.title}>
+        <img draggable={false} src={require('@/assets/img/home_title.png')} alt="title" />
+      </div>
+      
+      <div className={styles.gif}>
+        <img draggable={false} src={require('@/assets/img/home_gif.gif')} alt="gif" />
+      </div>
+
+      <button
+        type="button"
+        className={styles.btn1}
+        onClick={() => {
+          history.push('/layout')
+        }}
+      />
+      <button
+        type="button"
+        className={styles.btn2}
+        onClick={() => {
+          window.location.href = `https://sit-supertwocustom.4dage.com/${infoTemp.sceneCode}/index.html`
+        }}
+      />
+      <button
+        type="button"
+        className={styles.btn3}
+        onClick={() => {
+          history.push('/jieyu')
+        }}
+      />
+    </div>
+  )
+}
+
+const MemoA1home = React.memo(A1home)
+
+export default MemoA1home

src/pages/A2layout/components/Hots/index.module.scss

@@ -0,0 +1,138 @@
+/* 与视频 object-fit:contain 后的实际画面重合，坐标按画面百分比，换机型不跑偏 */
+.hots {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.show {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.7s ease;
+}
+
+/* 画面上的定位点：光环中心钉在 left/top，缩放绕此点，避免换机型跑偏 */
+.pin {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.anchor {
+  position: relative;
+  line-height: 0;
+  transform-origin: center bottom;
+  perspective: 420px;
+  transform-style: preserve-3d;
+}
+
+.sideL .anchor {
+  perspective-origin: left 30%;
+}
+
+.sideR .anchor {
+  perspective-origin: right 30%;
+}
+
+.dot {
+  display: block;
+  height: 56px;
+  width: auto;
+  max-width: none;
+  max-height: none;
+  pointer-events: none;
+  -webkit-user-drag: none;
+}
+
+.label {
+  position: absolute;
+  z-index: 1;
+  transform: rotate(0);
+  transform-style: preserve-3d;
+  pointer-events: none;
+}
+
+.alignT .label {
+  top: -50%;
+}
+
+.alignB .label {
+  top: 108%;
+}
+
+.sideL .label {
+  left: 72%;
+  right: auto;
+  transform-origin: left center;
+}
+
+.sideR .label {
+  right: -56px;
+  transform-origin: right center;
+}
+
+.text {
+  display: inline-block;
+  padding: 8px 18px;
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.25;
+  white-space: nowrap;
+  background: linear-gradient(
+    90deg,
+    rgba(16, 85, 153, 0.8) 0%,
+    rgba(16, 85, 153, 0.62) 45%,
+    rgba(16, 85, 153, 0.8) 100%
+  );
+  border: 1px solid rgba(200, 230, 255, 0.95);
+  border-radius: 4px;
+  box-shadow:
+    6px 4px 14px rgba(0, 10, 40, 0.35),
+    0 0 10px rgba(90, 170, 255, 0.28),
+    inset 8px 0 12px rgba(0, 8, 30, 0.28),
+    inset -6px 0 10px rgba(160, 210, 255, 0.18);
+  backface-visibility: hidden;
+}
+
+.back {
+  position: fixed;
+  top: calc(14px + env(safe-area-inset-top));
+  left: calc(14px + env(safe-area-inset-left));
+  z-index: 40;
+  padding: 0;
+  border: none;
+  background: transparent;
+  line-height: 0;
+  cursor: pointer;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-tap-highlight-color: transparent;
+
+  img {
+    display: block;
+    width: 44px;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    pointer-events: none;
+    -webkit-user-drag: none;
+  }
+
+  &:active {
+    opacity: 0.82;
+  }
+}
+
+.backShow {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity 0.35s ease;
+}
+
+.backShow.backDim {
+  opacity: 0.28;
+}

src/pages/A2layout/components/Hots/index.tsx

@@ -0,0 +1,178 @@
+import React, { useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import styles from './index.module.scss'
+import dotImg from '@/assets/img/dot.png'
+import backImg from '@/assets/img/back.png'
+
+/** 设计稿宽度，内部尺寸按此缩放，换机型只缩放不移位 */
+const DESIGN_W = 375
+
+type Frame = { left: number; top: number; width: number; height: number }
+
+function containBox(cw: number, ch: number, iw: number, ih: number): Frame {
+  if (cw <= 0 || ch <= 0) return { left: 0, top: 0, width: 0, height: 0 }
+  if (iw <= 0 || ih <= 0) return { left: 0, top: 0, width: cw, height: ch }
+  const s = Math.min(cw / iw, ch / ih)
+  const width = iw * s
+  const height = ih * s
+  return {
+    left: (cw - width) / 2,
+    top: (ch - height) / 2,
+    width,
+    height
+  }
+}
+
+export type DetailBackProps = {
+  /** 视频播完后渐显；无视频时直接显示 */
+  visible?: boolean
+  /** 详情已滚动时降低透明度 */
+  dimmed?: boolean
+  onBack?: () => void
+}
+
+/** 详情页左上角返回，无视频时也单独使用 */
+export function DetailBack({
+  visible = false,
+  dimmed = false,
+  onBack
+}: DetailBackProps) {
+  return createPortal(
+    <button
+      type="button"
+      className={`${styles.back} ${visible ? styles.backShow : ''} ${
+        dimmed ? styles.backDim : ''
+      }`}
+      aria-label="返回"
+      onPointerDown={e => e.stopPropagation()}
+      onClick={e => {
+        e.stopPropagation()
+        onBack?.()
+      }}
+    >
+      <img draggable={false} src={backImg} alt="" />
+    </button>,
+    document.body
+  )
+}
+
+export type HotsProps = {
+  /** 浮动标签文案，如「塞舌尔·维多利亚市」 */
+  name: string
+  /** 视频播完后渐显 */
+  visible?: boolean
+  /** 点击左上角返回按钮 */
+  onBack?: () => void
+  /** 详情已滚动时降低返回按钮透明度 */
+  backDimmed?: boolean
+  /**
+   * 光柱在左或右。l：光柱在左、标签在右；r：光柱在右、标签在左。
+   */
+  side?: 'l' | 'r'
+  /**
+   * 标签在上或下。t：标签在光柱上方；b：标签在光柱下方（top: 108%）。
+   */
+  align?: 't' | 'b'
+  /**
+   * 光柱锚点相对三维画面的水平位置 0~100。
+   * 与 right 二选一，同时传入时 left 优先。
+   */
+  left?: number
+  /** 从画面右侧定位，0~100 */
+  right?: number
+  /** 相对三维画面的垂直位置 0~100，与 bottom 二选一 */
+  top?: number
+  /** 从画面底部定位，0~100 */
+  bottom?: number
+}
+
+function Hots({
+  name,
+  visible = false,
+  onBack,
+  backDimmed = false,
+  side = 'l',
+  align = 't',
+  left,
+  right,
+  top,
+  bottom
+}: HotsProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [frame, setFrame] = useState<Frame>({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  })
+
+  useLayoutEffect(() => {
+    const parent = rootRef.current?.parentElement
+    if (!parent) return
+    const video = parent.querySelector('video')
+
+    const update = () => {
+      setFrame(
+        containBox(
+          parent.clientWidth,
+          parent.clientHeight,
+          video?.videoWidth ?? 0,
+          video?.videoHeight ?? 0
+        )
+      )
+    }
+
+    update()
+    video?.addEventListener('loadedmetadata', update)
+    const ro = new ResizeObserver(update)
+    ro.observe(parent)
+    return () => {
+      video?.removeEventListener('loadedmetadata', update)
+      ro.disconnect()
+    }
+  }, [])
+
+  const x = left ?? (right != null ? 100 - right : 42)
+  const y = top ?? (bottom != null ? 100 - bottom : 68)
+  const scale = frame.width > 0 ? frame.width / DESIGN_W : 1
+
+  return (
+    <>
+      <div
+        ref={rootRef}
+        className={`${styles.hots} ${visible ? styles.show : ''} ${
+          side === 'r' ? styles.sideR : styles.sideL
+        } ${align === 'b' ? styles.alignB : styles.alignT}`}
+        style={{
+          left: frame.left,
+          top: frame.top,
+          width: frame.width,
+          height: frame.height
+        }}
+      >
+        <div
+          className={styles.pin}
+          style={{
+            left: `${x}%`,
+            top: `${y}%`
+          }}
+        >
+          <div
+            className={styles.anchor}
+            style={{ transform: `translate(-50%, -100%) scale(${scale})` }}
+          >
+            <img className={styles.dot} draggable={false} src={dotImg} alt="" />
+            <div className={styles.label}>
+              <span className={styles.text}>{name}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <DetailBack visible={visible} dimmed={backDimmed} onBack={onBack} />
+    </>
+  )
+}
+
+const MemoHots = React.memo(Hots)
+
+export default MemoHots

src/pages/A2layout/components/Wenwu/index.module.scss

@@ -0,0 +1,107 @@
+/* 底部居中展台：文物在台顶，标题文案叠在展台正面中间 */
+.wenwu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.show {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 2s ease 1s;
+}
+
+.stand {
+  position: relative;
+  width: 43%;
+  max-width: 220px;
+}
+
+.pedestal {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none;
+  -webkit-user-drag: none;
+}
+
+.relic {
+  position: absolute;
+  left: 50%;
+  bottom: 72%;
+  z-index: 4;
+  width: 70%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  transform: translateX(-50%);
+  line-height: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: transparent;
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 16vh;
+    object-fit: contain;
+    pointer-events: none;
+    -webkit-user-drag: none;
+    filter: drop-shadow(2px 6px 8px rgba(20, 40, 70, 0.22));
+  }
+}
+
+.info {
+  position: absolute;
+  left: 50%;
+  top: 22%;
+  z-index: 3;
+  width: 78%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: #222;
+
+  h3 {
+    margin: 0 0 6px;
+    color: #111;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.3;
+    letter-spacing: 0.3px;
+  }
+}
+
+.meta,
+.desc,
+.tagline {
+  margin: 0;
+  word-break: break-word;
+}
+
+.meta {
+  margin-bottom: 6px;
+  color: #333;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.desc {
+  margin-bottom: 4px;
+  color: #333;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.tagline {
+  color: #555;
+  font-size: 10px;
+  line-height: 1.45;
+}

src/pages/A2layout/components/Wenwu/index.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react'
+import styles from './index.module.scss'
+import zhuImg from '@/assets/img/zhu.png'
+import store from '@/store'
+
+export type WenwuProps = {
+  /** 展台文物，没有则不渲染展台 */
+  relic?: RelicInfoType
+  /** 视频播完后渐显 */
+  visible?: boolean
+}
+
+/** 友好见证按顿号/句号拆成多行，末行作为点题 */
+function witnessLines(text?: string) {
+  if (!text) return []
+  return text
+    .split(/[，。]/)
+    .map(line => line.trim())
+    .filter(Boolean)
+}
+
+function yearLabel(year?: string) {
+  if (!year) return ''
+  return /赠送/.test(year) ? year : `${year}赠送`
+}
+
+function Wenwu({ relic, visible = false }: WenwuProps) {
+  const src = relic?.src
+  const openPreview = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.stopPropagation()
+      if (!src) return
+      store.dispatch({
+        type: 'layout/lookBigImg',
+        payload: { url: src, show: true }
+      })
+    },
+    [src]
+  )
+
+  if (!src) return null
+
+  const meta = [relic?.from, yearLabel(relic?.year)].filter(Boolean).join(' | ')
+  const lines = witnessLines(relic?.witness)
+
+  return (
+    <div className={`${styles.wenwu} ${visible ? styles.show : ''}`}>
+      <div className={styles.stand}>
+        <button
+          type="button"
+          className={styles.relic}
+          aria-label={`查看${relic?.name || '文物'}大图`}
+          onPointerDown={e => e.stopPropagation()}
+          onClick={openPreview}
+        >
+          <img draggable={false} src={src} alt={relic?.name || ''} />
+        </button>
+        <div className={styles.info}>
+          {relic?.name ? <h3>{relic.name}</h3> : null}
+          {meta ? <p className={styles.meta}>{meta}</p> : null}
+          {lines.map((line, i) => (
+            <p
+              key={`${line}-${i}`}
+              className={
+                lines.length > 1 && i === lines.length - 1 ? styles.tagline : styles.desc
+              }
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+        <img className={styles.pedestal} draggable={false} src={zhuImg} alt="" />
+      </div>
+    </div>
+  )
+}
+
+const MemoWenwu = React.memo(Wenwu)
+
+export default MemoWenwu

src/pages/A2layout/index.module.scss

@@ -0,0 +1,453 @@
+.A2layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: url('../../assets/img/layout_bg.png') no-repeat center center;
+  background-size: cover;
+}
+
+.mapArea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 38%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  touch-action: none;
+  cursor: grab;
+}
+
+.mapDragging {
+  cursor: grabbing;
+}
+
+.world {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 86%;
+  width: max-content;
+  will-change: transform;
+}
+
+.mapCopy {
+  position: relative;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.mapSvg {
+  display: contents;
+
+  :global {
+    svg {
+      display: block;
+      height: 100%;
+      width: auto;
+      max-width: none;
+      max-height: none;
+      pointer-events: none;
+    }
+
+    image {
+      -webkit-user-drag: none;
+    }
+
+    image[data-continent-ac] {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.4s ease;
+    }
+
+    image[data-continent-ac].isOn {
+      opacity: 1;
+    }
+
+    /* 隐藏矢量底色，只保留卫星贴图 */
+    .st0 {
+      fill: none;
+      stroke: none;
+    }
+  }
+}
+
+@keyframes hotspotBreathe {
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* 红点中心对齐 left/top；hot_l 标签在左，hot_r 标签在右 */
+.hotspot {
+  position: absolute;
+  z-index: 2;
+  padding: 0;
+  border: none;
+  background: transparent;
+  line-height: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.35s ease;
+  animation: hotspotBreathe 3.2s ease-in-out infinite;
+
+  &.hotspotOff {
+    opacity: 0;
+    pointer-events: none;
+    animation: none;
+  }
+
+  img {
+    display: block;
+    height: 26px;
+    width: auto;
+    pointer-events: none;
+    -webkit-user-drag: none;
+  }
+
+  span {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 26px;
+    color: #fff;
+    height: 100%;
+    font-size: 12px;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    text-shadow: 0 1px 11px rgb(199 206 215);
+  }
+}
+
+.hotR {
+  transform: translate(-9.4%, -50%);
+
+  span {
+    left: 48%;
+    right: 10px;
+    text-align: center;
+  }
+}
+
+.hotL {
+  transform: translate(-90.6%, -50%);
+
+  span {
+    left: 9px;
+    right: 50%;
+    text-align: center;
+  }
+}
+
+.hint {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 30px;
+  z-index: 2;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #fff;
+  font-size: 15px;
+  letter-spacing: 1px;
+  text-shadow: 0 1px 4px rgba(0, 40, 90, 0.35);
+  pointer-events: none;
+}
+
+.hand {
+  display: inline-flex;
+  align-items: center;
+  animation: tap 4s ease-in-out infinite;
+  width: 22px;
+  height: 22px;
+  & > img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+@keyframes tap {
+  0%{
+    opacity: 0.3;
+  }
+  30% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+
+.drawer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+  height: 42%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 28px 28px 0 0;
+  box-shadow: 0 -8px 24px rgba(20, 70, 130, 0.12);
+  transition: height 0.35s ease;
+  touch-action: none;
+  outline: none;
+}
+
+.expanded {
+  height: 86%;
+  touch-action: auto;
+
+  .body {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.handleWrap {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0 6px;
+  cursor: pointer;
+}
+
+.handle {
+  width: 42px;
+  height: 5px;
+  border-radius: 4px;
+  background: #9fd2ee;
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  padding: 8px 22px 4px;
+  overflow: hidden;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.85;
+  text-align: justify;
+  word-break: break-word;
+
+  p {
+    margin: 0 0 0.9em;
+    text-indent: 2em;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
+}
+
+.actionBtn {
+  width: 164px;
+  height: 38px;
+  border: none;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  background-color: transparent;
+  transition: opacity 0.2s;
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.btnVr {
+  background-image: url('../../assets/img/btn_vr.png');
+}
+
+.btnBack {
+  background-image: url('../../assets/img/faihui.png');
+}
+
+.btnShouqi {
+  background-image: url('../../assets/img/btn_shouqi.png');
+}
+
+.detail {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  background: url('../../assets/img/layout_bg2.png') no-repeat center center;
+  background-size: cover;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.45s ease;
+}
+
+.detailShow {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.detailCard {
+  position: absolute;
+  top: 2.2%;
+  left: 4.1%;
+  right: 4.1%;
+  height: 53.5%;
+  z-index: 2;
+  background: url('../../assets/img/card.png') no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: translateY(16px);
+  transition: transform 0.45s ease;
+}
+
+.detailShow .detailCard {
+  transform: none;
+}
+
+/* 无视频时详情卡铺满，不再给下方三维画面留空 */
+.detailCardFull {
+  height: auto;
+  bottom: 2.2%;
+}
+
+.detailBody {
+  flex: 1;
+  min-height: 0;
+  padding: 28px 22px 20px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.detailIntro {
+  margin: 0 0 14px;
+  color: #222;
+  font-size: 14px;
+  line-height: 1.85;
+  text-align: justify;
+  word-break: break-word;
+  text-indent: 2em;
+}
+
+.detailPhotos {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 18px;
+
+  img,
+  span {
+    flex: 1;
+    height: 72px;
+    border-radius: 6px;
+    background: #c5d5e4;
+    object-fit: cover;
+  }
+}
+
+.timeline {
+  margin: 0;
+  padding: 0 0 8px 22px;
+  list-style: none;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 10px;
+    bottom: 18px;
+    width: 1px;
+    background: rgba(120, 160, 190, 0.45);
+  }
+}
+
+.timelineItem {
+  position: relative;
+  padding-bottom: 16px;
+
+  p {
+    margin: 8px 0 0;
+    color: #333;
+    font-size: 13px;
+    line-height: 1.75;
+    text-align: justify;
+    word-break: break-word;
+  }
+}
+
+.timelineDot {
+  position: absolute;
+  left: -22px;
+  top: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #c43b32;
+  box-shadow: 0 0 0 3px rgba(196, 59, 50, 0.22);
+  pointer-events: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 5px;
+    height: 5px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.timelineYear {
+  display: inline-block;
+  padding: 3px 12px;
+  border-radius: 20px;
+  background: rgba(16, 85, 153, 1);
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.4;
+  letter-spacing: 0.3px;
+}
+
+.detailLower {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  height: 46%;
+  overflow: hidden;
+
+  video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
+}

src/pages/A2layout/index.tsx

@@ -0,0 +1,622 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { backPageFu } from '@/utils/history'
+import worldSvg from '@/assets/svg/world.svg'
+import hotL from '@/assets/img/hot_l.png'
+import hotR from '@/assets/img/hot_r.png'
+import link1 from '@/assets/svg/Links/1.png'
+import link2 from '@/assets/svg/Links/2.png'
+import link3 from '@/assets/svg/Links/3.png'
+import link4 from '@/assets/svg/Links/4.png'
+import link5 from '@/assets/svg/Links/5.png'
+import link6 from '@/assets/svg/Links/6.png'
+import linkAc1 from '@/assets/svg/LinksAc/1.png'
+import linkAc2 from '@/assets/svg/LinksAc/2.png'
+import linkAc3 from '@/assets/svg/LinksAc/3.png'
+import linkAc4 from '@/assets/svg/LinksAc/4.png'
+import linkAc5 from '@/assets/svg/LinksAc/5.png'
+import linkAc6 from '@/assets/svg/LinksAc/6.png'
+import Hots, { DetailBack } from './components/Hots'
+import Wenwu from './components/Wenwu'
+
+/** 横向拼接份数：左右各一份缓冲，循环时不会露白 */
+const MAP_COPIES = 3
+const DRAG_THRESHOLD = 8
+/** 地图初始水平偏移，对应 translate3d(-361px, -2%, 0) */
+const INITIAL_TRANSLATE_X = -400
+/** 贴图左右各内缩，避免大洋空白被当成陆地 */
+const CONTINENT_INSET = 0.12
+/** 已选中的洲边界放宽，减少边缘抖动 */
+const CONTINENT_STICKY_INSET = 0.06
+/** 高亮与热点的展示顺序 */
+const CONTINENT_ORDER = ['美洲', '欧洲', '非洲', '亚洲', '大洋洲']
+
+const LINK_SRC: Record<string, string> = {
+  '1': link1,
+  '2': link2,
+  '3': link3,
+  '4': link4,
+  '5': link5,
+  '6': link6
+}
+
+const LINK_AC_SRC: Record<string, string> = {
+  '1': linkAc1,
+  '2': linkAc2,
+  '3': linkAc3,
+  '4': linkAc4,
+  '5': linkAc5,
+  '6': linkAc6
+}
+
+/** 卫星贴图序号对应展区大洲 */
+const LINK_CONTINENT: Record<string, string> = {
+  '1': '美洲',
+  '2': '美洲',
+  '3': '欧洲',
+  '4': '亚洲',
+  '5': '非洲',
+  '6': '大洋洲'
+}
+
+type Hotspot = {
+  id: string
+  name: string
+  title: string
+  continent: string
+  x: number
+  y: number
+  side: 'l' | 'r'
+  /** 三维光柱在左 l / 在右 r，默认 l */
+  hotSide?: 'l' | 'r'
+  /** 三维标签在上 t / 在下 b，默认 t */
+  hotY?: 't' | 'b'
+  hotLeft?: number
+  hotRight?: number
+  hotTop?: number
+  hotBottom?: number
+  intro: string
+  timeline: { year: string; text: string }[]
+  videoSrc?: string
+  imgs?: string[]
+  relic?: RelicInfoType
+}
+
+/** 静态资源路径：兼容相对路径与完整 URL */
+function toAssetUrl(src?: string) {
+  if (!src) return undefined
+  if (/^(https?:)?\/\//i.test(src) || src.startsWith('data:')) return src
+  const base = (process.env.PUBLIC_URL || '.').replace(/\/$/, '')
+  return `${base}/${src.replace(/^\//, '')}`
+}
+
+/** 从 infoTemp 展区城市生成地图热点 */
+function buildHotspots(): Hotspot[] {
+  return Object.values(infoTemp.sectionsInfo).flatMap(section =>
+    (section.citys || []).map(city => ({
+      id: city.id,
+      name: city.shortName || city.name,
+      title: city.title || city.name,
+      continent: section.title,
+      x: city.x,
+      y: city.y,
+      side: city.side,
+      hotSide: city.hotSide,
+      hotY: city.hotY,
+      hotLeft: city.hotLeft,
+      hotRight: city.hotRight,
+      hotTop: city.hotTop,
+      hotBottom: city.hotBottom,
+      intro: city.desc,
+      timeline: (city.times || []).map(item => ({
+        year: item.year,
+        text: item.content
+      })),
+      videoSrc: city.videoSrc,
+      imgs: (city.imgs || []).filter(Boolean),
+      relic:
+        city.relic && typeof city.relic === 'object' && city.relic.src
+          ? city.relic
+          : undefined
+    }))
+  )
+}
+
+const HOTSPOTS = buildHotspots()
+
+/** 给每份地图的 id 加后缀，避免三份 SVG 的 id 冲突 */
+function suffixSvgIds(svg: string, suffix: string) {
+  return svg.replace(/\sid="([^"]+)"/g, ` id="$1${suffix}"`)
+}
+
+/** 将偏移折回到 [0, width) */
+function wrapOffset(offset: number, width: number) {
+  if (width <= 0) return 0
+  let x = offset % width
+  if (x < 0) x += width
+  return x
+}
+
+function A2layout() {
+  const [worldHtml, setWorldHtml] = useState('')
+  const [expanded, setExpanded] = useState(false)
+  const [mapDragging, setMapDragging] = useState(false)
+  const [activeCity, setActiveCity] = useState<Hotspot | null>(null)
+  /** 视频播完后展台、热点再渐显 */
+  const [overlayShow, setOverlayShow] = useState(false)
+  /** 详情正文是否已滚离顶部，用于降低返回按钮透明度 */
+  const [cardScrolled, setCardScrolled] = useState(false)
+  /** 屏幕水平中心当前经过的大洲，可重叠 */
+  const [centerContinents, setCenterContinents] = useState<string[]>([])
+  const centerContinentsRef = useRef<string[]>([])
+  const shownCityRef = useRef<Hotspot | null>(null)
+  if (activeCity) shownCityRef.current = activeCity
+  const shownCity = activeCity ?? shownCityRef.current
+  const drawerRef = useRef<HTMLDivElement>(null)
+  const startY = useRef(0)
+  const dragging = useRef(false)
+  const pointerDown = useRef(false)
+
+  const mapAreaRef = useRef<HTMLDivElement>(null)
+  const trackRef = useRef<HTMLDivElement>(null)
+  const copyRef = useRef<HTMLDivElement>(null)
+  const copyWidthRef = useRef(0)
+  const panRef = useRef(0)
+  const panInitedRef = useRef(false)
+  const mapPointerId = useRef<number | null>(null)
+  const mapStartX = useRef(0)
+  const mapStartPan = useRef(0)
+  const mapMoved = useRef(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const detailBodyRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch(worldSvg)
+      .then(res => res.text())
+      .then(text => {
+        if (cancelled) return
+        const html = text
+          .replace(/<\?xml[^>]*\?>/, '')
+          .replace(/viewBox="0 0 2000 857"/, 'viewBox="60 0 1786 857"')
+          .replace(
+            /<image([^>]*?)xlink:href="Links\/(\d)\.png"([^>]*)>\s*<\/image>/g,
+            (_, before: string, n: string, after: string) => {
+              const continent = LINK_CONTINENT[n]
+              return (
+                `<image${before}xlink:href="${LINK_SRC[n]}" data-continent="${continent}"${after}></image>` +
+                `<image${before}xlink:href="${LINK_AC_SRC[n]}" data-continent-ac="${continent}"${after}></image>`
+              )
+            }
+          )
+        setWorldHtml(html)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const applyTrackTransform = useCallback(() => {
+    const track = trackRef.current
+    const area = mapAreaRef.current
+    const width = copyWidthRef.current
+    if (!track || !area || width <= 0) return
+    const align = (area.clientWidth - width) / 2
+    if (!panInitedRef.current) {
+      panRef.current = wrapOffset(INITIAL_TRANSLATE_X - align + width, width)
+      panInitedRef.current = true
+    } else {
+      panRef.current = wrapOffset(panRef.current, width)
+    }
+    track.style.transform = `translate3d(${align - width + panRef.current}px, -2%, 0)`
+  }, [])
+
+  /** 当前经过的洲叠上 LinksAc 高亮贴图 */
+  const applyContinentHighlight = useCallback((names: string[]) => {
+    const track = trackRef.current
+    if (!track) return
+    const on = new Set(names)
+    track.querySelectorAll<SVGImageElement>('image[data-continent-ac]').forEach(img => {
+      const name = img.getAttribute('data-continent-ac')
+      img.classList.toggle('isOn', Boolean(name && on.has(name)))
+    })
+  }, [])
+
+  /** 屏幕水平中心经过哪些洲（可重叠，如欧非） */
+  const updateCenterContinent = useCallback(() => {
+    const area = mapAreaRef.current
+    const track = trackRef.current
+    if (!area || !track) return
+    const midX = area.getBoundingClientRect().left + area.clientWidth / 2
+    const hits = new Set<string>()
+    track.querySelectorAll<SVGImageElement>('image[data-continent]').forEach(img => {
+      const name = img.getAttribute('data-continent')
+      if (!name) return
+      const rect = img.getBoundingClientRect()
+      if (rect.width <= 0) return
+      const sticky = centerContinentsRef.current.includes(name)
+      const inset = rect.width * (sticky ? CONTINENT_STICKY_INSET : CONTINENT_INSET)
+      if (midX < rect.left + inset || midX > rect.right - inset) return
+      hits.add(name)
+    })
+    const next = CONTINENT_ORDER.filter(name => hits.has(name))
+    const prev = centerContinentsRef.current
+    if (next.length === prev.length && next.every((name, i) => name === prev[i])) return
+    centerContinentsRef.current = next
+    applyContinentHighlight(next)
+    setCenterContinents(next)
+  }, [applyContinentHighlight])
+
+  const measureAndApply = useCallback(() => {
+    const width = copyRef.current?.offsetWidth ?? 0
+    if (width > 0) copyWidthRef.current = width
+    applyTrackTransform()
+    updateCenterContinent()
+  }, [applyTrackTransform, updateCenterContinent])
+
+  useLayoutEffect(() => {
+    if (!worldHtml) return
+    measureAndApply()
+    const area = mapAreaRef.current
+    const copy = copyRef.current
+    if (!area || !copy) return
+    const observer = new ResizeObserver(() => measureAndApply())
+    observer.observe(area)
+    observer.observe(copy)
+    return () => observer.disconnect()
+  }, [worldHtml, measureAndApply])
+
+  const onMapPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.pointerType === 'mouse' && e.button !== 0) return
+    mapPointerId.current = e.pointerId
+    mapStartX.current = e.clientX
+    mapStartPan.current = panRef.current
+    mapMoved.current = false
+    e.currentTarget.setPointerCapture(e.pointerId)
+    setMapDragging(true)
+  }, [])
+
+  const onMapPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (mapPointerId.current !== e.pointerId) return
+      const dx = e.clientX - mapStartX.current
+      if (Math.abs(dx) > DRAG_THRESHOLD) mapMoved.current = true
+      panRef.current = mapStartPan.current + dx
+      applyTrackTransform()
+      updateCenterContinent()
+    },
+    [applyTrackTransform, updateCenterContinent]
+  )
+
+  const endMapPointer = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (mapPointerId.current !== e.pointerId) return
+      mapPointerId.current = null
+      applyTrackTransform()
+      updateCenterContinent()
+      setMapDragging(false)
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId)
+      }
+      // 拖拽收尾的 click 仍拦截；等 click 过后再清标记，否则热点再也点不进
+      if (mapMoved.current) {
+        window.setTimeout(() => {
+          mapMoved.current = false
+        }, 0)
+      }
+    },
+    [applyTrackTransform, updateCenterContinent]
+  )
+
+  const onHotspotClick = useCallback((id: string) => {
+    if (mapMoved.current) return
+    const city = HOTSPOTS.find(item => item.id === id)
+    if (!city) return
+    setExpanded(false)
+    setActiveCity(city)
+  }, [])
+
+  useEffect(() => {
+    setCardScrolled(false)
+    if (detailBodyRef.current) detailBodyRef.current.scrollTop = 0
+  }, [activeCity?.id])
+
+  const onDetailScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    setCardScrolled(e.currentTarget.scrollTop > 8)
+  }, [])
+
+  useEffect(() => {
+    if (!activeCity) {
+      videoRef.current?.pause()
+      setOverlayShow(false)
+      return
+    }
+    if (!activeCity.videoSrc) {
+      setOverlayShow(true)
+      return
+    }
+    const video = videoRef.current
+    if (!video) {
+      setOverlayShow(true)
+      return
+    }
+    video.muted = true
+    setOverlayShow(false)
+    const onEnded = () => setOverlayShow(true)
+    const onError = () => setOverlayShow(true)
+    video.addEventListener('ended', onEnded)
+    video.addEventListener('error', onError)
+    video.currentTime = 0
+    const play = video.play()
+    if (play) play.catch(() => setOverlayShow(true))
+    return () => {
+      video.removeEventListener('ended', onEnded)
+      video.removeEventListener('error', onError)
+    }
+  }, [activeCity])
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    pointerDown.current = true
+    dragging.current = false
+    startY.current = e.clientY
+  }, [])
+
+  const onPointerMove = useCallback((e: React.PointerEvent) => {
+    if (!pointerDown.current) return
+    if (Math.abs(e.clientY - startY.current) > 8) {
+      dragging.current = true
+    }
+  }, [])
+
+  const onPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!pointerDown.current) return
+    pointerDown.current = false
+    const dy = e.clientY - startY.current
+    if (dy < -40) {
+      setExpanded(true)
+    } else if (dy > 40) {
+      setExpanded(false)
+    }
+  }, [])
+
+  const onClickDrawer = useCallback(() => {
+    if (dragging.current) return
+    if (!expanded) setExpanded(true)
+  }, [expanded])
+
+  // 展开后把焦点放在抽屉上，便于失焦时收起
+  useEffect(() => {
+    if (!expanded) return
+    drawerRef.current?.focus({ preventScroll: true })
+  }, [expanded])
+
+  const onBlurDrawer = useCallback((e: React.FocusEvent<HTMLDivElement>) => {
+    const next = e.relatedTarget as Node | null
+    if (next && drawerRef.current?.contains(next)) return
+    setExpanded(false)
+  }, [])
+
+  const onPagePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (!expanded) return
+      if (drawerRef.current?.contains(e.target as Node)) return
+      setExpanded(false)
+    },
+    [expanded]
+  )
+
+  return (
+    <div className={styles.A2layout} onPointerDown={onPagePointerDown}>
+      <div
+        ref={mapAreaRef}
+        className={`${styles.mapArea} ${mapDragging ? styles.mapDragging : ''}`}
+        onPointerDown={onMapPointerDown}
+        onPointerMove={onMapPointerMove}
+        onPointerUp={endMapPointer}
+        onPointerCancel={endMapPointer}
+      >
+        <div ref={trackRef} className={styles.world}>
+          {worldHtml
+            ? Array.from({ length: MAP_COPIES }, (_, i) => (
+                <div
+                  key={i}
+                  ref={i === 1 ? copyRef : undefined}
+                  className={styles.mapCopy}
+                >
+                  <div
+                    className={styles.mapSvg}
+                    dangerouslySetInnerHTML={{
+                      __html: suffixSvgIds(worldHtml, `__c${i}`)
+                    }}
+                  />
+                  {HOTSPOTS.map(hot => (
+                    <button
+                      key={hot.id}
+                      type="button"
+                      className={`${styles.hotspot} ${
+                        hot.side === 'l' ? styles.hotL : styles.hotR
+                      } ${
+                        centerContinents.includes(hot.continent) ? '' : styles.hotspotOff
+                      }`}
+                      style={{ left: `${hot.x * 100}%`, top: `${hot.y * 100}%` }}
+                      data-hotspot={hot.id}
+                      onPointerDown={e => {
+                        e.stopPropagation()
+                        // 热点自己接收点按，清掉地图拖拽标记，避免拖完再也进不了详情
+                        mapMoved.current = false
+                      }}
+                      onClick={() => onHotspotClick(hot.id)}
+                    >
+                      <img
+                        draggable={false}
+                        src={hot.side === 'l' ? hotL : hotR}
+                        alt=""
+                      />
+                      <span>{hot.name}</span>
+                    </button>
+                  ))}
+                </div>
+              ))
+            : null}
+        </div>
+        <p className={styles.hint}>
+          点击地图，探访友谊之城
+          <span className={styles.hand} aria-hidden>
+            <img draggable={false} src={require('@/assets/img/gesture.png')} alt="hand" />
+          </span>
+        </p>
+      </div>
+
+      <div
+        ref={drawerRef}
+        tabIndex={-1}
+        className={`${styles.drawer} ${expanded ? styles.expanded : ''}`}
+        onBlur={onBlurDrawer}
+        onClick={onClickDrawer}
+        {...(!expanded
+          ? {
+              onPointerDown,
+              onPointerMove,
+              onPointerUp,
+              onPointerCancel: onPointerUp
+            }
+          : {})}
+      >
+        <div
+          className={styles.handleWrap}
+          {...(expanded
+            ? {
+                onPointerDown,
+                onPointerMove,
+                onPointerUp,
+                onPointerCancel: onPointerUp
+              }
+            : {})}
+        >
+          <span className={styles.handle} />
+        </div>
+        <div
+          className={styles.body}
+          dangerouslySetInnerHTML={{ __html: infoTemp.introInfo }}
+        />
+        <div className={styles.footer}>
+          {expanded ? (
+            <button
+              type="button"
+              className={`${styles.actionBtn} ${styles.btnShouqi}`}
+              aria-label="收起"
+              onClick={e => {
+                e.stopPropagation()
+                setExpanded(false)
+              }}
+            />
+          ) : (
+            <button
+              type="button"
+              className={`${styles.actionBtn} ${styles.btnVr}`}
+              aria-label="VR观展"
+              onClick={e => {
+                e.stopPropagation()
+                if (!infoTemp.sceneCode) return
+                window.location.href = `https://sit-supertwocustom.4dage.com/${infoTemp.sceneCode}/index.html`
+              }}
+            />
+          )}
+          {!expanded ? (
+            <button
+              type="button"
+              className={`${styles.actionBtn} ${styles.btnBack}`}
+              aria-label="返回"
+              onClick={e => {
+                e.stopPropagation()
+                backPageFu('/')
+              }}
+            />
+          ) : null}
+        </div>
+      </div>
+
+      <div
+        className={`${styles.detail} ${activeCity ? styles.detailShow : ''}`}
+        aria-hidden={!activeCity}
+      >
+        {shownCity ? (
+          <>
+            <div
+              className={`${styles.detailCard} ${
+                shownCity.videoSrc ? '' : styles.detailCardFull
+              }`}
+            >
+              <div
+                ref={detailBodyRef}
+                className={styles.detailBody}
+                onScroll={onDetailScroll}
+              >
+                <p className={styles.detailIntro}>{shownCity.intro}</p>
+                {shownCity.imgs && shownCity.imgs.length > 0 ? (
+                  <div className={styles.detailPhotos}>
+                    {shownCity.imgs.map((src, i) => (
+                      <img key={`${src}-${i}`} src={toAssetUrl(src)} alt="" />
+                    ))}
+                  </div>
+                ) : null}
+                <ul className={styles.timeline}>
+                  {shownCity.timeline.map((item, i) => (
+                    <li key={`${item.year}-${i}`} className={styles.timelineItem}>
+                      <i className={styles.timelineDot} />
+                      <span className={styles.timelineYear}>{item.year}</span>
+                      <p>{item.text}</p>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            {shownCity.videoSrc ? (
+              <div className={styles.detailLower}>
+                <video
+                  key={shownCity.id}
+                  ref={videoRef}
+                  src={toAssetUrl(shownCity.videoSrc)}
+                  autoPlay
+                  muted
+                  playsInline
+                  preload="auto"
+                />
+                <Hots
+                  name={shownCity.title}
+                  visible={overlayShow}
+                  backDimmed={cardScrolled}
+                  onBack={() => setActiveCity(null)}
+                  side={shownCity.hotSide ?? 'l'}
+                  align={shownCity.hotY ?? 't'}
+                  left={shownCity.hotLeft}
+                  right={shownCity.hotRight}
+                  top={shownCity.hotTop}
+                  bottom={shownCity.hotBottom}
+                />
+                <Wenwu
+                  relic={
+                    shownCity.relic
+                      ? { ...shownCity.relic, src: toAssetUrl(shownCity.relic.src) || '' }
+                      : undefined
+                  }
+                  visible={overlayShow}
+                />
+              </div>
+            ) : (
+              <DetailBack
+                visible={overlayShow}
+                dimmed={cardScrolled}
+                onBack={() => setActiveCity(null)}
+              />
+            )}
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+const MemoA2layout = React.memo(A2layout)
+
+export default MemoA2layout

src/pages/A3jieyu/index.module.scss

@@ -0,0 +1,100 @@
+.A3jieyu {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  background: url('../../assets/img/jieyu_bg.png') no-repeat top center;
+  background-size: 100% auto;
+}
+
+.content {
+  position: absolute;
+  top: 3%;
+  left: 50%;
+  z-index: 2;
+  width: 86%;
+  height: 72%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform: translateX(-50%);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.badge {
+  flex-shrink: 0;
+  width: 145px;
+  height: 40px;
+  margin: 6px 0 14px;
+  font-size: 26px;
+  text-align: center;
+  letter-spacing: 6px;
+  color: #163a6e;
+  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
+}
+
+.text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding-bottom: 8px;
+  color: #163a6e;
+  font-size: 13px;
+  line-height: 1.9;
+  letter-spacing: 0.4px;
+  text-align: center;
+  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
+
+  p {
+    margin: 0;
+  }
+}
+
+/* 贴底展示，自身下半部分被父级 overflow 裁切 */
+.gif {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  z-index: 1;
+  width: 140%;
+  pointer-events: none;
+  transform: translate(-50%, 50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: none;
+    max-height: none;
+  }
+}
+
+.btnBack {
+  position: absolute;
+  left: 50%;
+  bottom: 28px;
+  z-index: 3;
+  width: 164px;
+  height: 38px;
+  border: none;
+  cursor: pointer;
+  background: url('../../assets/img/faihui.png') no-repeat center center;
+  background-size: contain;
+  transform: translateX(-50%);
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.88;
+  }
+
+  &:active {
+    opacity: 0.75;
+  }
+}

src/pages/A3jieyu/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { backPageFu } from '@/utils/history'
+
+function A3jieyu() {
+  const lines = infoTemp.outroInfo || []
+
+  return (
+    <div className={styles.A3jieyu}>
+      <div className={styles.content}>
+        <div className={styles.badge}>
+          结语
+        </div>
+        <div className={styles.text}>
+          {lines.map((line, i) => (
+            <p key={i}>{line}</p>
+          ))}
+        </div>
+      </div>
+
+      <div className={styles.gif}>
+        <img draggable={false} src={require('@/assets/img/home_gif.gif')} alt="" />
+      </div>
+
+      <button
+        type="button"
+        className={styles.btnBack}
+        aria-label="返回"
+        onClick={() => backPageFu('/')}
+      />
+    </div>
+  )
+}
+
+const MemoA3jieyu = React.memo(A3jieyu)
+
+export default MemoA3jieyu

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

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

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;