写不动了

code/src/App.tsx

@@ -1,7 +1,7 @@
 import '@/assets/styles/base.css'
 // 关于路由
 import React, { useCallback, useEffect } from 'react'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { createHashRouter, RouterProvider } from 'react-router-dom'
 import { isMobileFu } from './utils/history'
 import SpinLoding from './components/SpinLoding'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
@@ -9,9 +9,12 @@ import AsyncSpinLoding from './components/AsyncSpinLoding'
 import MessageCom from './components/Message'
 
 import screenImg from '@/assets/img/landtip.png'
-import A0model from './pages/A0model'
+import NotFound from './components/NotFound'
 
-const A0base = React.lazy(() => import('./pages/A0base'))
+const A1home = React.lazy(() => import('./pages/A1home'))
+const A2show = React.lazy(() => import('./pages/A2show'))
+const A3wear = React.lazy(() => import('./pages/A3wear'))
+const A0model = React.lazy(() => import('./pages/A0model'))
 
 export default function App() {
   // 从仓库中获取查看图片的信息
@@ -29,10 +32,26 @@ export default function App() {
     rootDomFu()
   }, [rootDomFu])
 
-  const router = createBrowserRouter([
+  const router = createHashRouter([
     {
-      path: '/',
-      element: <A0base />
+      path: '/show',
+      element: <A2show />
+    },
+    {
+      path: '/wear',
+      element: <A3wear />
+    },
+    {
+      path: '/model',
+      element: <A0model />
+    },
+    {
+      index: true,
+      element: <A1home />
+    },
+    {
+      path: '*',
+      element: <NotFound /> // 或者你的 NotFound 组件
     }
   ])
 
@@ -53,9 +72,6 @@ export default function App() {
       {/* antd 轻提示 ---兼容360浏览器 */}
       <MessageCom />
 
-      {/* 模型页面 */}
-      <A0model />
-
       {/* 横屏提示 */}
       {isMobileFu() ? (
         <div id='ScreenChange'>

code/src/components/Z1titie/index.tsx

@@ -4,9 +4,10 @@ import styles from './index.module.scss'
 type Props = {
   title: string
   toHome?: () => void
+  backFu?: () => void
 }
 
-function Z1titie({ title, toHome }: Props) {
+function Z1titie({ title, toHome, backFu }: Props) {
   return (
     <div className={styles.Z1titie}>
       <img className='Z1_1' src={`${serverUrl}home/titlel.png`} alt='' />
@@ -26,6 +27,15 @@ function Z1titie({ title, toHome }: Props) {
           onClick={() => toHome()}
         />
       ) : null}
+
+      {backFu ? (
+        <img
+          className='Z1_2'
+          src={`${serverUrl}model/back.png`}
+          alt=''
+          onClick={() => backFu()}
+        />
+      ) : null}
     </div>
   )
 }

code/src/pages/A0base.tsx

@@ -1,21 +0,0 @@
-import { RootState } from '@/store'
-import React from 'react'
-import { useSelector } from 'react-redux'
-import A1home from './A1home'
-import A2show from './A2show'
-import A3wear from './A3wear'
-function A0base() {
-  const pageKey = useSelector((state: RootState) => state.A0model.pageKey)
-
-  return (
-    <>
-      {pageKey === 'home' ? <A1home /> : null}
-      {pageKey === 'show' ? <A2show /> : null}
-      {pageKey === 'wear' ? <A3wear /> : null}
-    </>
-  )
-}
-
-const MemoA0base = React.memo(A0base)
-
-export default MemoA0base

code/src/pages/A0model/A0btn/index.module.scss

@@ -50,5 +50,14 @@
   left: 0;
   z-index: 20;
   width: 100%;
-  color: red;
+  :global {
+    .A0topTit {
+      padding: 0 15px;
+      margin-top: 8px;
+      text-align: center;
+      letter-spacing: 2px;
+      font-size: 14px;
+      color: #e7e3c5;
+    }
+  }
 }

code/src/pages/A0model/A0btn/index.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import classNames from 'classnames'
 import { myInfo1 } from '@/pages/A2show/data'
+import Z1titie from '@/components/Z1titie'
+import history from '@/utils/history'
 
 const tabArr = [
   { name: '玉镖', bs: 'yu_01', info: '玉镖（鞘尾）' },
@@ -39,11 +41,11 @@ function A0btn({ cutModelFu }: Props) {
       text: ''
     }
     if (tab) {
-      const tabBs = tabArr.find(v => v.bs === tab)!.info
+      const tabBsObj = tabArr.find(v => v.bs === tab)!
 
       obj = {
-        title: tabBs,
-        text: Reflect.get(objAc, tabBs)
+        title: tabBsObj.name,
+        text: Reflect.get(objAc, tabBsObj.info)
       }
     }
     return obj
@@ -51,7 +53,11 @@ function A0btn({ cutModelFu }: Props) {
 
   return (
     <>
-      <div className={styles.A0top}>123</div>
+      {/* 顶部 */}
+      <div className={styles.A0top}>
+        <Z1titie title={infoObj.title} backFu={() => history.push('/show')} />
+        <div className='A0topTit'>{infoObj.text}</div>
+      </div>
 
       <div className={styles.A0btn}>
         {/* 指示图 */}

code/src/pages/A0model/Model.tsx

@@ -5,10 +5,13 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { forwardRef, useImperativeHandle } from 'react'
 import { OrbitControls } from '@react-three/drei'
-import store from '@/store'
 import { envFlag } from '@/utils/http'
 
-function Model(_: any, ref: any) {
+type Props = {
+  setPlanFu: (val: number) => void
+}
+
+function Model({ setPlanFu }: Props, ref: any) {
   // 轨道控制器
   const controlsRef = useRef<any>(null)
   useFrame(() => {
@@ -123,14 +126,14 @@ function Model(_: any, ref: any) {
         if (xhr.lengthComputable) {
           const percentComplete = (xhr.loaded / xhr.total) * 100
           const baiNum = percentComplete.toFixed(0)
-
-          store.dispatch({ type: 'A1/plan', payload: Number(baiNum) })
+          setPlanFu(Number(baiNum))
         }
       },
       error => {
         console.error('加载模型出错:', error)
       }
     )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleModelLoaded])
 
   // 点击不同部位
@@ -182,6 +185,7 @@ function Model(_: any, ref: any) {
         maxDistance={2} // 根据初始缩放比例调整
         minDistance={0.3} // 根据初始缩放比例调整[9](@ref)
         screenSpacePanning={true} // 移动端友好的平移方式
+        enablePan={false}
       />
 
       {groupRef.current ? <primitive object={groupRef.current} /> : null}

code/src/pages/A0model/index.module.scss

@@ -1,6 +1,4 @@
 .A0model {
-  opacity: 0;
-  pointer-events: none;
   transition: all 0.3s;
   position: absolute;
   top: 0;
@@ -9,38 +7,52 @@
   height: 100%;
   z-index: 99;
   background-size: 100% 100%;
+  color: var(--themeColor);
 
   :global {
-    .A0main {
+    .A0base {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
-      height: calc(100% - 117px);
+      height: 100%;
+      z-index: 99;
+      background-size: 100% 100%;
+      padding: 10% 0;
+      display: flex;
+      justify-content: center;
+      transition: all 2s;
+      opacity: 1;
+      pointer-events: auto;
+
       & > div {
-        pointer-events: none !important;
-        & > div {
-          pointer-events: none !important;
-          canvas {
-            pointer-events: none !important;
+        position: absolute;
+        top: 48%;
+        left: 42%;
+        width: 16%;
+        height: 34%;
+        font-size: 24px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 5%;
+        & > p {
+          margin-bottom: 20%;
+          &:last-child {
+            font-size: 18px;
           }
         }
       }
     }
-  }
-}
+    .A0baseHide {
+      opacity: 0;
+      pointer-events: none;
+    }
 
-.A0modelShow {
-  opacity: 1;
-  pointer-events: auto;
-  :global {
     .A0main {
-      & > div {
-        pointer-events: auto !important;
-        & > div {
-          pointer-events: auto !important;
-          canvas {
-            pointer-events: auto !important;
-          }
-        }
-      }
+      width: 100%;
+      height: 100%;
     }
   }
 }

code/src/pages/A0model/index.tsx

@@ -1,7 +1,5 @@
-import React, { Suspense, useCallback, useRef } from 'react'
+import React, { Suspense, useCallback, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { useSelector } from 'react-redux'
-import { RootState } from '@/store'
 import classNames from 'classnames'
 // import * as THREE from 'three'
 import { Canvas } from '@react-three/fiber'
@@ -9,8 +7,6 @@ import Model from './Model'
 import A0btn from './A0btn'
 
 function A0model() {
-  const { pageKey } = useSelector((state: RootState) => state.A0model)
-
   const modelRef = useRef<any>(null)
 
   const cutModelFu = useCallback((val: string) => {
@@ -19,14 +15,32 @@ function A0model() {
     } else modelRef.current.showAllModels()
   }, [])
 
+  const [plan, setPlan] = useState(0)
+
+  const setPlanFu = useCallback((val: number) => {
+    setPlan(val)
+  }, [])
+
   return (
     <div
       style={{ backgroundImage: `url(${serverUrl}model/bac.jpg)` }}
-      className={classNames(
-        styles.A0model,
-        pageKey === 'model' ? styles.A0modelShow : ''
-      )}
+      className={classNames(styles.A0model)}
     >
+      {/* 加载中 */}
+      <div
+        className={classNames('A0base', plan >= 100 ? 'A0baseHide' : '')}
+        style={{ backgroundImage: `url(${serverUrl}home/bac.jpg)` }}
+      >
+        <img src={`${serverUrl}home/bs.png`} alt='' />
+        <div>
+          <p>加</p>
+          <p>载</p>
+          <p>中</p>
+          <p>{plan}%</p>
+        </div>
+      </div>
+
+      {/* 模型页面 */}
       <div className='A0main'>
         <Canvas
           shadows
@@ -41,7 +55,7 @@ function A0model() {
         >
           <Suspense>
             {/* 场景与控制器 */}
-            <Model ref={modelRef} />
+            <Model ref={modelRef} setPlanFu={val => setPlanFu(val)} />
           </Suspense>
         </Canvas>
       </div>

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

@@ -1,46 +1,6 @@
 .A1home {
   color: var(--themeColor);
   :global {
-    .A1base {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 10;
-      background-size: 100% 100%;
-      padding: 10% 0;
-      display: flex;
-      justify-content: center;
-      transition: all 2s;
-      opacity: 1;
-      pointer-events: auto;
-
-      & > div {
-        position: absolute;
-        top: 48%;
-        left: 42%;
-        width: 16%;
-        height: 34%;
-        font-size: 24px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 5%;
-        & > p {
-          margin-bottom: 20%;
-          &:last-child {
-            font-size: 18px;
-          }
-        }
-      }
-    }
-    .A1baseHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     .A1start {
       width: 100%;
       height: 100%;

code/src/pages/A1home/index.tsx

@@ -1,29 +1,11 @@
 import React from 'react'
 import styles from './index.module.scss'
-import { useSelector } from 'react-redux'
-import store, { RootState } from '@/store'
-import classNames from 'classnames'
 import Z1titie from '@/components/Z1titie'
+import history from '@/utils/history'
 
 function A1home() {
-  const { plan } = useSelector((state: RootState) => state.A0model)
-
   return (
     <div className={styles.A1home}>
-      {/* 加载中 */}
-      <div
-        className={classNames('A1base', plan >= 100 ? 'A1baseHide' : '')}
-        style={{ backgroundImage: `url(${serverUrl}home/bac.jpg)` }}
-      >
-        <img src={`${serverUrl}home/bs.png`} alt='' />
-        <div>
-          <p>加</p>
-          <p>载</p>
-          <p>中</p>
-          <p>{plan}%</p>
-        </div>
-      </div>
-
       {/* 点击开始 */}
       <div
         className='A1start'
@@ -36,7 +18,7 @@ function A1home() {
         <img className='A1jian' src={`${serverUrl}home/jian.png`} alt='' />
 
         <div
-          onClick={() => store.dispatch({ type: 'A1/pageKey', payload: 'show' })}
+          onClick={() => history.push('/show')}
           style={{ backgroundImage: `url(${serverUrl}home/btnBac.png)` }}
           className='A1btn'
         >

code/src/pages/A2show/index.module.scss

@@ -59,6 +59,7 @@
         height: 60%;
         transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px);
         text-align: center;
+        transition: opacity 1s;
       }
       .A2rotate2 {
         opacity: 0.3;

code/src/pages/A2show/index.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
 import Z1titie from '@/components/Z1titie'
-import store from '@/store'
 import { myInfo1 } from './data'
 import classNames from 'classnames'
+import history from '@/utils/history'
 
 const btnArr = [
   { name: '三维模型', page: 'model' },
@@ -18,10 +18,7 @@ function A2show() {
       className={styles.A2show}
       style={{ backgroundImage: `url(${serverUrl}show/bac.jpg)` }}
     >
-      <Z1titie
-        title='玉柄铁剑'
-        toHome={() => store.dispatch({ type: 'A1/pageKey', payload: 'home' })}
-      />
+      <Z1titie title='玉柄铁剑' toHome={() => history.push('/')} />
 
       <div className='A2txt'>
         <p>春秋中晚期 | 藏于十堰市博物馆</p>
@@ -66,9 +63,7 @@ function A2show() {
       <div className='A2btn'>
         {btnArr.map(item => (
           <div
-            onClick={() =>
-              store.dispatch({ type: 'A1/pageKey', payload: item.page as 'home' })
-            }
+            onClick={() => history.push(item.page)}
             style={{ backgroundImage: `url(${serverUrl}show/btn.png)` }}
             key={item.name}
           >

code/src/store/reducer/A0model.ts

@@ -1,32 +0,0 @@
-export type PageKeyType = 'home' | 'show' | 'wear' | 'model'
-// 初始化状态
-const initState = {
-  // 模型加载进度条
-  plan: 0,
-  // 当前页面
-  pageKey: 'home' as PageKeyType
-}
-
-// 定义 action 类型
-type Props =
-  | {
-      type: 'A1/plan'
-      payload: number
-    }
-  | {
-      type: 'A1/pageKey'
-      payload: PageKeyType
-    }
-
-// reducer
-export default function Reducer(state = initState, action: Props) {
-  switch (action.type) {
-    case 'A1/plan':
-      return { ...state, plan: action.payload }
-    case 'A1/pageKey':
-      return { ...state, pageKey: action.payload }
-
-    default:
-      return state
-  }
-}

code/src/store/reducer/index.ts

@@ -3,12 +3,10 @@ import { combineReducers } from 'redux'
 
 // 导入 登录 模块的 reducer
 import A0Layout from './layout'
-import A0model from './A0model'
 
 // 合并 reducer
 const rootReducer = combineReducers({
-  A0Layout,
-  A0model
+  A0Layout
 })
 
 // 默认导出