格式化处理

webNew/src/components/Model/index.tsx

@@ -1,126 +1,162 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import { RootState } from '@/store';
-import { modelItem } from '@/types';
-import { useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import musicImg from '@/assets/img/music.png'
-import musicImgAc from '@/assets/img/musicAc.png'
-import styles from './index.module.scss'
-import { baseURL } from '@/utils/http';
+import { RootState } from "@/store";
+import { modelItem } from "@/types";
+import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import musicImg from "@/assets/img/music.png";
+import musicImgAc from "@/assets/img/musicAc.png";
+import styles from "./index.module.scss";
+import { baseURL } from "@/utils/http";
 
 type props = {
-  modelId: number,
-  closeModel: () => void
-}
+  modelId: number;
+  closeModel: () => void;
+};
 export default function Model({ modelId, closeModel }: props) {
-
-  const { modelInfo } = useSelector((state: RootState) => state.homeStore)
-  const { list } = modelInfo
-  const [info, setInfo] = useState({} as modelItem)
+  const { modelInfo } = useSelector((state: RootState) => state.homeStore);
+  const { list } = modelInfo;
+  const [info, setInfo] = useState({} as modelItem);
 
   const closeModelFu = () => {
-    setInfo({} as modelItem)
-    setMusic(false)
-    closeModel()
-  }
+    setInfo({} as modelItem);
+    setMusic(false);
+    closeModel();
+  };
   useEffect(() => {
     if (modelId) {
-      const info = list.filter(v => v.id === modelId)[0]
-      setInfo(info)
-      setMusic(true)
+      const info = list.filter((v) => v.id === modelId)[0];
+      setInfo(info);
+      setMusic(true);
       setTimeout(() => {
-        musicPlayFu(true)
-
+        musicPlayFu(true);
       }, 500);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modelId])
-
+  }, [modelId]);
 
   // 控制模型放大缩小和复位
-  const ifrBoxRef = useRef<any>(null)
+  const ifrBoxRef = useRef<any>(null);
   const modelChangeFu = (val: number) => {
-    const dom = ifrBoxRef.current
+    const dom = ifrBoxRef.current;
 
     if (dom && dom.contentWindow && dom.contentWindow.webview) {
-      if (val === 1) dom.contentWindow.webview.zoomIn()  // 放大
-      else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
-      else dom.contentWindow.webview.resetView() // 复位
+      if (val === 1) dom.contentWindow.webview.zoomIn(); // 放大
+      else if (val === 2) dom.contentWindow.webview.zoomOut(); // 缩小
+      else dom.contentWindow.webview.resetView(); // 复位
     }
-  }
+  };
 
   // 控制音乐播放暂停
-  const musicRef = useRef<HTMLAudioElement>(null)
+  const musicRef = useRef<HTMLAudioElement>(null);
 
-  const [music, setMusic] = useState(false)
+  const [music, setMusic] = useState(false);
   const musicPlayFu = (flag: boolean) => {
-    const dom = musicRef.current
+    const dom = musicRef.current;
     if (dom) {
       if (flag) {
-
         // 打开音乐
-        setMusic(true)
-        dom.play()
-        dom.addEventListener('ended', function () {
-          setMusic(false)
-        }, false);
+        setMusic(true);
+        dom.play();
+        dom.addEventListener(
+          "ended",
+          function () {
+            setMusic(false);
+          },
+          false
+        );
       } else {
         // 关闭音乐
-        setMusic(false)
-        dom.pause()
+        setMusic(false);
+        dom.pause();
       }
     }
-  }
-
+  };
 
   return (
     <div className={styles.Model}>
       {/* 音频 */}
-      {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
+      {info.audioPath ? (
+        <audio src={baseURL + info.audioPath} ref={musicRef}></audio>
+      ) : null}
       {/* 模型盒子 */}
-      <div className='ifrBox'>
-        {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
-
+      <div className="ifrBox">
+        {info.fileName ? (
+          <iframe
+            ref={ifrBoxRef}
+            src={`model.html?m=${info.fileName}`}
+            frameBorder="no"
+          ></iframe>
+        ) : null}
       </div>
       {/* 右边介绍 */}
-      <div className='rightTxt'>
-        <div className='model_title'>{info.name}</div>
-        {
-          info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
-        }
-
-        <div className='model_floo'>
-          <div className='model_sortRow'>类别：
-            <p>{info.dictTextureName ? info.dictTextureName : '（空）'}</p>
+      <div className="rightTxt">
+        <div className="model_title">{info.name}</div>
+        {info.description ? (
+          <div
+            className="model_txt"
+            dangerouslySetInnerHTML={{ __html: info.description }}
+          ></div>
+        ) : (
+          <div className="model_txt">暂无信息</div>
+        )}
+
+        <div className="model_floo">
+          <div className="model_sortRow">
+            类别：
+            <p>{info.dictTextureName ? info.dictTextureName : "（空）"}</p>
           </div>
-          <div className='model_ageRow'>年代：
-            <p>{info.dictAgeName ? info.dictAgeName : '（空）'}</p>
+          <div className="model_ageRow">
+            年代：
+            <p>{info.dictAgeName ? info.dictAgeName : "（空）"}</p>
           </div>
-
         </div>
 
-
         {
-          <div className='model_size'>尺寸：
-            <p title={info.sizeLength}>{info.sizeLength ? info.sizeLength : '（空）'}</p>
+          <div className="model_size">
+            尺寸：
+            <p title={info.sizeLength}>
+              {info.sizeLength ? info.sizeLength : "（空）"}
+            </p>
           </div>
         }
-
       </div>
 
       {/* 底部按钮 */}
-      <div className='flootBtnBox'>
-        <div className='flootRow flootRow1' title='放大' onClick={() => modelChangeFu(1)}></div>
-        <div className='flootRow flootRow2' title='缩小' onClick={() => modelChangeFu(2)}></div>
-        {info.audioPath ? (<div className='flootRow flootRowM' title={music ? '暂停音频' : '播放音频'}>
-          {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
-            (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
-        </div>) : null}
-
-        <div className='flootRow flootRow4' title='重置' onClick={() => modelChangeFu(3)}></div>
-        <div className='flootRow flootRow3' title='退出' onClick={() => closeModelFu()}></div>
+      <div className="flootBtnBox">
+        <div
+          className="flootRow flootRow1"
+          title="放大"
+          onClick={() => modelChangeFu(1)}
+        ></div>
+        <div
+          className="flootRow flootRow2"
+          title="缩小"
+          onClick={() => modelChangeFu(2)}
+        ></div>
+        {info.audioPath ? (
+          <div
+            className="flootRow flootRowM"
+            title={music ? "暂停音频" : "播放音频"}
+          >
+            {music ? (
+              <img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />
+            ) : (
+              <img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />
+            )}
+          </div>
+        ) : null}
+
+        <div
+          className="flootRow flootRow4"
+          title="重置"
+          onClick={() => modelChangeFu(3)}
+        ></div>
+        <div
+          className="flootRow flootRow3"
+          title="退出"
+          onClick={() => closeModelFu()}
+        ></div>
       </div>
-
     </div>
-  )
-}
+  );
+}

webNew/src/components/ModelM/index.tsx

@@ -1,130 +1,154 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import { RootState } from '@/store';
-import { modelItem } from '@/types';
-import { useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import musicImg from '@/assets/img/music.png'
-import musicImgAc from '@/assets/img/musicAc.png'
-import styles from './index.module.scss'
-import { baseURL } from '@/utils/http';
+import { RootState } from "@/store";
+import { modelItem } from "@/types";
+import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import musicImg from "@/assets/img/music.png";
+import musicImgAc from "@/assets/img/musicAc.png";
+import styles from "./index.module.scss";
+import { baseURL } from "@/utils/http";
 
 type props = {
-  modelId: number,
-  closeModel: () => void
-}
+  modelId: number;
+  closeModel: () => void;
+};
 export default function ModelM({ modelId, closeModel }: props) {
-
-  const { modelInfo } = useSelector((state: RootState) => state.homeStore)
-  const { list } = modelInfo
-  const [info, setInfo] = useState({} as modelItem)
+  const { modelInfo } = useSelector((state: RootState) => state.homeStore);
+  const { list } = modelInfo;
+  const [info, setInfo] = useState({} as modelItem);
 
   const closeModelFu = () => {
-    setInfo({} as modelItem)
-    setMusic(false)
-    closeModel()
-  }
+    setInfo({} as modelItem);
+    setMusic(false);
+    closeModel();
+  };
   useEffect(() => {
     if (modelId) {
-      const info = list.filter(v => v.id === modelId)[0]
-      setInfo(info)
-      setMusic(true)
+      const info = list.filter((v) => v.id === modelId)[0];
+      setInfo(info);
+      setMusic(true);
       setTimeout(() => {
-        musicPlayFu(true)
-
+        musicPlayFu(true);
       }, 500);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modelId])
-
+  }, [modelId]);
 
   // 控制模型放大缩小和复位
-  const ifrBoxRef = useRef<any>(null)
+  const ifrBoxRef = useRef<any>(null);
   const modelChangeFu = (val: number) => {
-    const dom = ifrBoxRef.current
+    const dom = ifrBoxRef.current;
 
     if (dom && dom.contentWindow && dom.contentWindow.webview) {
-      if (val === 1) dom.contentWindow.webview.zoomIn()  // 放大
-      else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
-      else dom.contentWindow.webview.resetView() // 复位
+      if (val === 1) dom.contentWindow.webview.zoomIn(); // 放大
+      else if (val === 2) dom.contentWindow.webview.zoomOut(); // 缩小
+      else dom.contentWindow.webview.resetView(); // 复位
     }
-  }
-
+  };
 
   // 控制音乐播放暂停
-  const musicRef = useRef<HTMLAudioElement>(null)
+  const musicRef = useRef<HTMLAudioElement>(null);
 
-  const [music, setMusic] = useState(false)
+  const [music, setMusic] = useState(false);
   const musicPlayFu = (flag: boolean) => {
-    const dom = musicRef.current
+    const dom = musicRef.current;
     if (dom) {
       if (flag) {
-
         // 打开音乐
-        setMusic(true)
-        dom.play()
-        dom.addEventListener('ended', function () {
-          setMusic(false)
-        }, false);
+        setMusic(true);
+        dom.play();
+        dom.addEventListener(
+          "ended",
+          function () {
+            setMusic(false);
+          },
+          false
+        );
       } else {
         // 关闭音乐
-        setMusic(false)
-        dom.pause()
+        setMusic(false);
+        dom.pause();
       }
     }
-  }
-
+  };
 
   return (
     <div className={styles.ModelM}>
       {/* 音频 */}
-      {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
+      {info.audioPath ? (
+        <audio src={baseURL + info.audioPath} ref={musicRef}></audio>
+      ) : null}
       {/* 模型盒子 */}
-      <div className='ifrBox'>
-        {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
-
+      <div className="ifrBox">
+        {info.fileName ? (
+          <iframe
+            ref={ifrBoxRef}
+            src={`model.html?m=${info.fileName}`}
+            frameBorder="no"
+          ></iframe>
+        ) : null}
       </div>
       {/* 名字 */}
-        <div className='model_title'>{info.name}</div>
+      <div className="model_title">{info.name}</div>
 
       {/* 下边介绍 */}
-      <div className='rightTxt'>
-
-
-        {
-          info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
-        }
-
-        <div className='model_floo'>
-          <div className='model_sortRow'>类别：
-            <p>{info.dictTextureName ? info.dictTextureName : '（空）'}</p>
+      <div className="rightTxt">
+        {info.description ? (
+          <div
+            className="model_txt"
+            dangerouslySetInnerHTML={{ __html: info.description }}
+          ></div>
+        ) : (
+          <div className="model_txt">暂无信息</div>
+        )}
+
+        <div className="model_floo">
+          <div className="model_sortRow">
+            类别：
+            <p>{info.dictTextureName ? info.dictTextureName : "（空）"}</p>
           </div>
-          <div className='model_ageRow'>年代：
-            <p>{info.dictAgeName ? info.dictAgeName : '（空）'}</p>
+          <div className="model_ageRow">
+            年代：
+            <p>{info.dictAgeName ? info.dictAgeName : "（空）"}</p>
           </div>
-
         </div>
 
-
         {
-          <div className='model_size'>尺寸：{info.sizeLength ? info.sizeLength : '（空）'}
+          <div className="model_size">
+            尺寸：{info.sizeLength ? info.sizeLength : "（空）"}
           </div>
         }
-
       </div>
 
       {/* 底部按钮 */}
-      <div className='flootBtnBox'>
-        <div className='flootRow flootRow1' onClick={() => modelChangeFu(1)}></div>
-        <div className='flootRow flootRow2' onClick={() => modelChangeFu(2)}></div>
-        {info.audioPath ? (<div className='flootRow flootRowM'>
-          {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
-            (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
-        </div>) : null}
-
-        <div className='flootRow flootRow4' onClick={() => modelChangeFu(3)}></div>
-        <div className='flootRow flootRow3' onClick={() => closeModelFu()}></div>
+      <div className="flootBtnBox">
+        <div
+          className="flootRow flootRow1"
+          onClick={() => modelChangeFu(1)}
+        ></div>
+        <div
+          className="flootRow flootRow2"
+          onClick={() => modelChangeFu(2)}
+        ></div>
+        {info.audioPath ? (
+          <div className="flootRow flootRowM">
+            {music ? (
+              <img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />
+            ) : (
+              <img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />
+            )}
+          </div>
+        ) : null}
+
+        <div
+          className="flootRow flootRow4"
+          onClick={() => modelChangeFu(3)}
+        ></div>
+        <div
+          className="flootRow flootRow3"
+          onClick={() => closeModelFu()}
+        ></div>
       </div>
-
     </div>
-  )
-}
+  );
+}

webNew/src/pages/Home/index.tsx

@@ -1,186 +1,233 @@
-import { baseURL } from '@/utils/http'
-import classNames from 'classnames'
-import styles from './index.module.scss'
-import logoImg from '@/assets/img/logo.png'
-import { Input, Pagination, Select } from 'antd'
-import { SearchOutlined, ExclamationOutlined, CloseCircleOutlined } from '@ant-design/icons';
-import { useEffect, useRef, useState } from 'react'
+import { baseURL } from "@/utils/http";
+import classNames from "classnames";
+import styles from "./index.module.scss";
+import logoImg from "@/assets/img/logo.png";
+import { Input, Pagination, Select } from "antd";
+import {
+  SearchOutlined,
+  ExclamationOutlined,
+  CloseCircleOutlined,
+} from "@ant-design/icons";
+import { useEffect, useRef, useState } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { useDispatch, useSelector } from 'react-redux';
-import { getListAction, getSortAction, getAgeAction } from '@/store/action/home';
-import { RootState } from '@/store';
-import Model from '@/components/Model'
+import { useDispatch, useSelector } from "react-redux";
+import {
+  getListAction,
+  getSortAction,
+  getAgeAction,
+} from "@/store/action/home";
+import { RootState } from "@/store";
+import Model from "@/components/Model";
 export default function Home() {
-
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
   // 进页面获取后端文物数据
   useEffect(() => {
-    dispatch(getSortAction())
-    dispatch(getAgeAction())
-  }, [dispatch])
+    dispatch(getSortAction());
+    dispatch(getAgeAction());
+  }, [dispatch]);
 
   // 滚动盒子ref
-  const modelBoxRef = useRef<HTMLDivElement>(null)
+  const modelBoxRef = useRef<HTMLDivElement>(null);
 
   // 输入框变量
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState("");
 
   // 清空输入框
   const clearValueFu = () => {
-    setValue('')
-    setPageNum(1)
-    const sroolDom = modelBoxRef.current
-    sroolDom!.scrollTop = 0
-    dispatch(getListAction({
-      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId,
-      searchKey: '', pageNum: 1,
-      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
-    }))
-
-  }
+    setValue("");
+    setPageNum(1);
+    const sroolDom = modelBoxRef.current;
+    sroolDom!.scrollTop = 0;
+    dispatch(
+      getListAction({
+        ...fromData.current,
+        dictTextureId:
+          fromData.current.dictTextureId === -1
+            ? null
+            : fromData.current.dictTextureId,
+        searchKey: "",
+        pageNum: 1,
+        dictAgeId:
+          fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
+      })
+    );
+  };
 
   const searchKeyUpFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') searchBtnFu()
-  }
+    if (e.key === "Enter") searchBtnFu();
+  };
   const searchBtnFu = () => {
-    getModelList()
-  }
-
-
+    getModelList();
+  };
 
   // 分类的数据和高亮
-  const { sortList, modelInfo, ageList } = useSelector((state: RootState) => state.homeStore)
-  const { list, total } = modelInfo
+  const { sortList, modelInfo, ageList } = useSelector(
+    (state: RootState) => state.homeStore
+  );
+  const { list, total } = modelInfo;
 
   // 分类
-  const [sort, setSort] = useState(-1)
+  const [sort, setSort] = useState(-1);
   // 分类下拉框改变
   const sortChangeFu = (value: number) => {
-    setSort(value)
-  }
+    setSort(value);
+  };
   // 年代
-  const [ageSerach, setAgeSerach] = useState(-1)
+  const [ageSerach, setAgeSerach] = useState(-1);
   // 年代下拉框改变
   const ageChangeFu = (value: number) => {
-    setAgeSerach(value)
-    fromData.current.dictAgeId = value
-    fromData.current.pageNum = 1
-    setPageNum(1)
-    getModelList()
-  }
-
-  const [pageNum, setPageNum] = useState(1)
+    setAgeSerach(value);
+    fromData.current.dictAgeId = value;
+    fromData.current.pageNum = 1;
+    setPageNum(1);
+    getModelList();
+  };
 
+  const [pageNum, setPageNum] = useState(1);
 
   const fromData = useRef({
     pageNum: 1,
     pageSize: 12,
-    searchKey: '',
+    searchKey: "",
     dictTextureId: -1,
-    dictAgeId: -1
-  })
+    dictAgeId: -1,
+  });
   const pageChangeFu = (page: number) => {
-    fromData.current.pageNum = page
-    setPageNum(page)
-    getModelList()
-  }
+    fromData.current.pageNum = page;
+    setPageNum(page);
+    getModelList();
+  };
   // 封装一个发送请求获取列表的函数
   const getModelList = () => {
-    const sroolDom = modelBoxRef.current
-    sroolDom!.scrollTop = 0
-    dispatch(getListAction({
-      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: value,
-      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
-    }))
-  }
+    const sroolDom = modelBoxRef.current;
+    sroolDom!.scrollTop = 0;
+    dispatch(
+      getListAction({
+        ...fromData.current,
+        dictTextureId:
+          fromData.current.dictTextureId === -1
+            ? null
+            : fromData.current.dictTextureId,
+        searchKey: value,
+        dictAgeId:
+          fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
+      })
+    );
+  };
   useEffect(() => {
-    fromData.current.dictTextureId = sort
-    fromData.current.pageNum = 1
-    setPageNum(1)
-    getModelList()
+    fromData.current.dictTextureId = sort;
+    fromData.current.pageNum = 1;
+    setPageNum(1);
+    getModelList();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sort])
-
+  }, [sort]);
 
   // 点击每个模型出来的页面
-  const [modelId, setModelId] = useState(0)
+  const [modelId, setModelId] = useState(0);
 
   return (
     <div className={styles.Home}>
-
       {/* 点击单个模型出来的详情页面 */}
-      <div className={classNames('modelTxtBox', modelId ? 'activeTxtBox' : '')}>
+      <div className={classNames("modelTxtBox", modelId ? "activeTxtBox" : "")}>
         <Model modelId={modelId} closeModel={() => setModelId(0)} />
       </div>
 
-      <div className='title'>
-        <div className='logo'>
+      <div className="title">
+        <div className="logo">
           <img src={logoImg} alt="" />
         </div>
-
       </div>
-      <div className='mainBox'>
-
+      <div className="mainBox">
         {/* 筛选的盒子 */}
-        <div className='screenBox'>
-
+        <div className="screenBox">
           {/* 输入框 */}
-          <div className='search'>
-            <div className='searchBtn' onClick={searchBtnFu}></div>
-            {value.length > 0 ? (<div className='searchClear' onClick={clearValueFu}>
-              <CloseCircleOutlined />
-            </div>) : null}
-
-            <Input maxLength={10} placeholder='请输入文物名称' value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} prefix={<SearchOutlined />} />
+          <div className="search">
+            <div className="searchBtn" onClick={searchBtnFu}></div>
+            {value.length > 0 ? (
+              <div className="searchClear" onClick={clearValueFu}>
+                <CloseCircleOutlined />
+              </div>
+            ) : null}
+
+            <Input
+              maxLength={10}
+              placeholder="请输入文物名称"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyUp={(e) => searchKeyUpFu(e)}
+              prefix={<SearchOutlined />}
+            />
           </div>
 
           {/* 分类下拉框 */}
-          <div className='sortBox'>
-            <Select style={{ width: '100%' }} value={sort} onChange={sortChangeFu} options={sortList} />
+          <div className="sortBox">
+            <Select
+              style={{ width: "100%" }}
+              value={sort}
+              onChange={sortChangeFu}
+              options={sortList}
+            />
           </div>
 
           {/* 年代筛选下拉框 */}
-          <div className='ageSeachBox'>
-            <Select style={{ width: '100%' }} value={ageSerach} onChange={ageChangeFu} options={ageList} />
+          <div className="ageSeachBox">
+            <Select
+              style={{ width: "100%" }}
+              value={ageSerach}
+              onChange={ageChangeFu}
+              options={ageList}
+            />
           </div>
-
         </div>
 
         {/* 页面渲染主体 */}
-        <div className='modelBox' ref={modelBoxRef}>
-          {
-            list && list.length > 0 ?
-              list.map(item => (
-                <div className='modelBox_row' key={item.id} onClick={() => setModelId(item.id)}>
-                  {/* 鼠标悬浮出来的盒子 */}
-                  <div className='modelBox_row_hover'>{item.name}</div>
-                  <LazyLoadImage src={baseURL + item.thumb}
-                    width={300} height={260}
-                    alt=""
-                  />
-                  <p>
-                    {item.dictTextureName ? <span className='row_txt1'>{item.dictTextureName}</span> : null}
-                    <span className='row_txt2'>{item.name}</span>
-                  </p>
-                </div>
-              ))
-              :
-              <div className='noneList'>
-                <div className='incoBox'>
-                  <ExclamationOutlined />
-                </div>
-                <p>暂无内容</p>
+        <div className="modelBox" ref={modelBoxRef}>
+          {list && list.length > 0 ? (
+            list.map((item) => (
+              <div
+                className="modelBox_row"
+                key={item.id}
+                onClick={() => setModelId(item.id)}
+              >
+                {/* 鼠标悬浮出来的盒子 */}
+                <div className="modelBox_row_hover">{item.name}</div>
+                <LazyLoadImage
+                  src={baseURL + item.thumb}
+                  width={300}
+                  height={260}
+                  alt=""
+                />
+                <p>
+                  {item.dictTextureName ? (
+                    <span className="row_txt1">{item.dictTextureName}</span>
+                  ) : null}
+                  <span className="row_txt2">{item.name}</span>
+                </p>
               </div>
-          }
+            ))
+          ) : (
+            <div className="noneList">
+              <div className="incoBox">
+                <ExclamationOutlined />
+              </div>
+              <p>暂无内容</p>
+            </div>
+          )}
         </div>
 
         {/* 分页器 */}
-        <div className='page'>
-          <Pagination size="small" current={pageNum} total={total} pageSize={12} hideOnSinglePage={true} onChange={pageChangeFu} showSizeChanger={false}/>
-
+        <div className="page">
+          <Pagination
+            size="small"
+            current={pageNum}
+            total={total}
+            pageSize={12}
+            hideOnSinglePage={true}
+            onChange={pageChangeFu}
+            showSizeChanger={false}
+          />
         </div>
-
       </div>
     </div>
-  )
+  );
 }

webNew/src/pages/HomeM/index.tsx

@@ -1,132 +1,167 @@
-import styles from './index.module.scss'
-import logiImg from '@/assets/img/logo.png'
-import classNames from 'classnames'
-import { Input, Select } from 'antd';
-import { SearchOutlined, ExclamationOutlined } from '@ant-design/icons';
-import { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { getAgeAction, getListAction, getSortAction } from '@/store/action/home';
+import styles from "./index.module.scss";
+import logiImg from "@/assets/img/logo.png";
+import classNames from "classnames";
+import { Input, Select } from "antd";
+import { SearchOutlined, ExclamationOutlined } from "@ant-design/icons";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  getAgeAction,
+  getListAction,
+  getSortAction,
+} from "@/store/action/home";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { RootState } from '@/store';
-import { baseURL } from '@/utils/http';
-import { InfiniteScroll } from 'antd-mobile'
-import ModelM from '@/components/ModelM';
+import { RootState } from "@/store";
+import { baseURL } from "@/utils/http";
+import { InfiniteScroll } from "antd-mobile";
+import ModelM from "@/components/ModelM";
 export default function HomeM() {
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   // 进页面获取后端文物数据
   useEffect(() => {
-    dispatch(getSortAction())
-    dispatch(getAgeAction())
-  }, [dispatch])
+    dispatch(getSortAction());
+    dispatch(getAgeAction());
+  }, [dispatch]);
 
   //输入框的显示和隐藏
-  const [inputShow, setInputShow] = useState(false)
+  const [inputShow, setInputShow] = useState(false);
 
   useEffect(() => {
     if (inputShow) {
-      const dom: any = document.querySelector('.myInput')
-      dom.focus()
+      const dom: any = document.querySelector(".myInput");
+      dom.focus();
     }
-  }, [inputShow])
+  }, [inputShow]);
 
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState("");
   const searchKeyUpFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') searchBtnFu()
-  }
+    if (e.key === "Enter") searchBtnFu();
+  };
   const searchBtnFu = () => {
-    fromData.current.pageNum = 1
-    getModelList()
-    setInputShow(false)
-  }
+    fromData.current.pageNum = 1;
+    getModelList();
+    setInputShow(false);
+  };
 
   // 分类的数据和高亮
-  const { sortList, modelInfo, ageList } = useSelector((state: RootState) => state.homeStore)
-  const { list, total } = modelInfo
+  const { sortList, modelInfo, ageList } = useSelector(
+    (state: RootState) => state.homeStore
+  );
+  const { list, total } = modelInfo;
 
   // 分类
-  const [sort, setSort] = useState(-1)
+  const [sort, setSort] = useState(-1);
   // 分类下拉框改变
   const sortChangeFu = (value: number) => {
-    setSort(value)
-  }
+    setSort(value);
+  };
   useEffect(() => {
-    fromData.current.dictTextureId = sort
-    fromData.current.pageNum = 1
-    getModelList()
+    fromData.current.dictTextureId = sort;
+    fromData.current.pageNum = 1;
+    getModelList();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sort])
+  }, [sort]);
 
   // 年代
-  const [ageSerach, setAgeSerach] = useState(-1)
+  const [ageSerach, setAgeSerach] = useState(-1);
   // 年代下拉框改变
   const ageChangeFu = (value: number) => {
-    setAgeSerach(value)
-    fromData.current.dictAgeId = value
-    fromData.current.pageNum = 1
-    getModelList()
-  }
+    setAgeSerach(value);
+    fromData.current.dictAgeId = value;
+    fromData.current.pageNum = 1;
+    getModelList();
+  };
 
   // 上拉加载更多数据
   const loadMore = async () => {
-    fromData.current.pageNum = fromData.current.pageNum + 1
-    await getModelList(true)
-  }
+    fromData.current.pageNum = fromData.current.pageNum + 1;
+    await getModelList(true);
+  };
 
   //  发送请求相关数据
   const fromData = useRef({
     pageNum: 1,
     pageSize: 6,
-    searchKey: '',
+    searchKey: "",
     dictTextureId: -1,
-    dictAgeId: -1
-  })
-
+    dictAgeId: -1,
+  });
 
   // 滚动盒子ref
-  const modelBoxRef = useRef<HTMLDivElement>(null)
+  const modelBoxRef = useRef<HTMLDivElement>(null);
   // 封装一个发送请求获取列表的函数
   const getModelList = (flag?: boolean) => {
     if (!flag) {
-      const sroolDom = modelBoxRef.current
-      sroolDom!.scrollTop = 0
+      const sroolDom = modelBoxRef.current;
+      sroolDom!.scrollTop = 0;
     }
-    dispatch(getListAction({
-      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: value,
-      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
-    }, flag))
-  }
+    dispatch(
+      getListAction(
+        {
+          ...fromData.current,
+          dictTextureId:
+            fromData.current.dictTextureId === -1
+              ? null
+              : fromData.current.dictTextureId,
+          searchKey: value,
+          dictAgeId:
+            fromData.current.dictAgeId === -1
+              ? null
+              : fromData.current.dictAgeId,
+        },
+        flag
+      )
+    );
+  };
 
   // 点击每个模型出来的页面
-  const [modelId, setModelId] = useState(0)
+  const [modelId, setModelId] = useState(0);
 
   return (
     <div className={styles.HomeM}>
-
       {/* 点击单个模型出来的详情页面 */}
-      <div className={classNames('modelTxtBox', modelId ? 'activeTxtBox' : '')}>
+      <div className={classNames("modelTxtBox", modelId ? "activeTxtBox" : "")}>
         <ModelM modelId={modelId} closeModel={() => setModelId(0)} />
       </div>
 
-      <div className='title'>
+      <div className="title">
         <img src={logiImg} alt="" />
       </div>
       {/* 筛选和搜索 */}
-      <div className='search'>
+      <div className="search">
         {/* 搜索框 */}
-        <div className='inputBox' hidden={!inputShow}>
-          <div className='inputInco' onClick={() => searchBtnFu()}><SearchOutlined /></div>
-          <Input className='myInput' maxLength={10} placeholder="请输入文物名称" value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} />
+        <div className="inputBox" hidden={!inputShow}>
+          <div className="inputInco" onClick={() => searchBtnFu()}>
+            <SearchOutlined />
+          </div>
+          <Input
+            className="myInput"
+            maxLength={10}
+            placeholder="请输入文物名称"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyUp={(e) => searchKeyUpFu(e)}
+          />
         </div>
 
-        <div className='sort'>
-          <Select style={{ width: '100%' }} value={sort} onChange={sortChangeFu} options={sortList} />
+        <div className="sort">
+          <Select
+            style={{ width: "100%" }}
+            value={sort}
+            onChange={sortChangeFu}
+            options={sortList}
+          />
         </div>
-        <div className='age'>
-          <Select style={{ width: '100%' }} value={ageSerach} onChange={ageChangeFu} options={ageList} />
-
+        <div className="age">
+          <Select
+            style={{ width: "100%" }}
+            value={ageSerach}
+            onChange={ageChangeFu}
+            options={ageList}
+          />
         </div>
-        <div className='inco' onClick={() => setInputShow(true)}>
+        <div className="inco" onClick={() => setInputShow(true)}>
           <SearchOutlined />
         </div>
 
@@ -135,37 +170,41 @@ export default function HomeM() {
 
       {/* 主体内容 */}
 
-      <div className='main' ref={modelBoxRef}>
-
-        {list && list.length > 0 ? <>
-          <div className='mainBox'>
-            {list.map(item => (
-              <div className='mainRow' key={item.id} onClick={() => setModelId(item.id)}>
-                <LazyLoadImage src={baseURL + item.thumb}
-                  width={300} height={260}
-                  alt=""
-                />
-                <p>{item.name}</p>
-                {/* 右上角分类 */}
-                {item.dictTextureName ? <div className='sortName'>
-                  {item.dictTextureName}
-                </div> : null}
-
-              </div>
-            ))}
-          </div>
-          <InfiniteScroll loadMore={loadMore} hasMore={total > list.length} /></>
-
-          :
-          (<div className='noneList'>
-            <div className='incoBox'>
+      <div className="main" ref={modelBoxRef}>
+        {list && list.length > 0 ? (
+          <>
+            <div className="mainBox">
+              {list.map((item) => (
+                <div
+                  className="mainRow"
+                  key={item.id}
+                  onClick={() => setModelId(item.id)}
+                >
+                  <LazyLoadImage
+                    src={baseURL + item.thumb}
+                    width={300}
+                    height={260}
+                    alt=""
+                  />
+                  <p>{item.name}</p>
+                  {/* 右上角分类 */}
+                  {item.dictTextureName ? (
+                    <div className="sortName">{item.dictTextureName}</div>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+            <InfiniteScroll loadMore={loadMore} hasMore={total > list.length} />
+          </>
+        ) : (
+          <div className="noneList">
+            <div className="incoBox">
               <ExclamationOutlined />
             </div>
             <p>暂无内容</p>
-          </div>)
-        }
-
+          </div>
+        )}
       </div>
     </div>
-  )
+  );
 }

webNew/src/pages/Model/index.tsx

@@ -1,114 +1,147 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import { useEffect, useRef, useState } from 'react';
-import musicImg from '@/assets/img/music.png'
-import musicImgAc from '@/assets/img/musicAc.png'
-import styles from './index.module.scss'
-import { baseURL } from '@/utils/http';
-import { useLocation } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import { getModelInfo } from '@/store/action/home';
-import { RootState } from '@/store';
+import { useEffect, useRef, useState } from "react";
+import musicImg from "@/assets/img/music.png";
+import musicImgAc from "@/assets/img/musicAc.png";
+import styles from "./index.module.scss";
+import { baseURL } from "@/utils/http";
+import { useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { getModelInfo } from "@/store/action/home";
+import { RootState } from "@/store";
 
 export default function Model() {
+  const location = useLocation();
 
-  const location = useLocation()
-
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   // 发送请求获取信息，存到仓库
   useEffect(() => {
-    const arr = location.search.split('=')
-    const id = arr[1]
-    dispatch(getModelInfo(id))
-  }, [dispatch, location.search])
+    const arr = location.search.split("=");
+    const id = arr[1];
+    dispatch(getModelInfo(id));
+  }, [dispatch, location.search]);
 
   // 从仓库获取信息
-  const info = useSelector((state: RootState) => state.homeStore.qrModel)
-
+  const info = useSelector((state: RootState) => state.homeStore.qrModel);
 
   // 控制模型放大缩小和复位
-  const ifrBoxRef = useRef<any>(null)
+  const ifrBoxRef = useRef<any>(null);
   const modelChangeFu = (val: number) => {
-    const dom = ifrBoxRef.current
+    const dom = ifrBoxRef.current;
 
     if (dom && dom.contentWindow && dom.contentWindow.webview) {
-      if (val === 1) dom.contentWindow.webview.zoomIn()  // 放大
-      else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
-      else dom.contentWindow.webview.resetView() // 复位
+      if (val === 1) dom.contentWindow.webview.zoomIn(); // 放大
+      else if (val === 2) dom.contentWindow.webview.zoomOut(); // 缩小
+      else dom.contentWindow.webview.resetView(); // 复位
     }
-  }
+  };
 
   // 控制音乐播放暂停
-  const musicRef = useRef<HTMLAudioElement>(null)
+  const musicRef = useRef<HTMLAudioElement>(null);
 
-  const [music, setMusic] = useState(false)
+  const [music, setMusic] = useState(false);
   const musicPlayFu = (flag: boolean) => {
-    const dom = musicRef.current
+    const dom = musicRef.current;
     if (dom) {
       if (flag) {
-
         // 打开音乐
-        setMusic(true)
-        dom.play()
-        dom.addEventListener('ended', function () {
-          setMusic(false)
-        }, false);
+        setMusic(true);
+        dom.play();
+        dom.addEventListener(
+          "ended",
+          function () {
+            setMusic(false);
+          },
+          false
+        );
       } else {
         // 关闭音乐
-        setMusic(false)
-        dom.pause()
+        setMusic(false);
+        dom.pause();
       }
     }
-  }
-
+  };
 
   return (
     <div className={styles.Model}>
       {/* 音频 */}
-      {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
+      {info.audioPath ? (
+        <audio src={baseURL + info.audioPath} ref={musicRef}></audio>
+      ) : null}
       {/* 模型盒子 */}
-      <div className='ifrBox'>
-        {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
-
+      <div className="ifrBox">
+        {info.fileName ? (
+          <iframe
+            ref={ifrBoxRef}
+            src={`model.html?m=${info.fileName}`}
+            frameBorder="no"
+          ></iframe>
+        ) : null}
       </div>
       {/* 右边介绍 */}
-      <div className='rightTxt'>
-        <div className='model_title'>{info.name}</div>
-        {
-          info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
-        }
-
-        <div className='model_floo'>
-          <div className='model_sortRow'>类别：
-            <p>{info.dictTextureName ? info.dictTextureName : '（空）'}</p>
+      <div className="rightTxt">
+        <div className="model_title">{info.name}</div>
+        {info.description ? (
+          <div
+            className="model_txt"
+            dangerouslySetInnerHTML={{ __html: info.description }}
+          ></div>
+        ) : (
+          <div className="model_txt">暂无信息</div>
+        )}
+
+        <div className="model_floo">
+          <div className="model_sortRow">
+            类别：
+            <p>{info.dictTextureName ? info.dictTextureName : "（空）"}</p>
           </div>
-          <div className='model_ageRow'>年代：
-            <p>{info.dictAgeName ? info.dictAgeName : '（空）'}</p>
+          <div className="model_ageRow">
+            年代：
+            <p>{info.dictAgeName ? info.dictAgeName : "（空）"}</p>
           </div>
-
         </div>
 
-
         {
-          <div className='model_size'>尺寸：
-            <p title={info.sizeLength}>{info.sizeLength ? info.sizeLength : '（空）'}</p>
+          <div className="model_size">
+            尺寸：
+            <p title={info.sizeLength}>
+              {info.sizeLength ? info.sizeLength : "（空）"}
+            </p>
           </div>
         }
-
       </div>
 
       {/* 底部按钮 */}
-      <div className='flootBtnBox'>
-        <div className='flootRow flootRow1' title='放大' onClick={() => modelChangeFu(1)}></div>
-        <div className='flootRow flootRow2' title='缩小' onClick={() => modelChangeFu(2)}></div>
-        {info.audioPath ? (<div className='flootRow flootRowM' title={music ? '暂停音频' : '播放音频'}>
-          {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
-            (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
-        </div>) : null}
+      <div className="flootBtnBox">
+        <div
+          className="flootRow flootRow1"
+          title="放大"
+          onClick={() => modelChangeFu(1)}
+        ></div>
+        <div
+          className="flootRow flootRow2"
+          title="缩小"
+          onClick={() => modelChangeFu(2)}
+        ></div>
+        {info.audioPath ? (
+          <div
+            className="flootRow flootRowM"
+            title={music ? "暂停音频" : "播放音频"}
+          >
+            {music ? (
+              <img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />
+            ) : (
+              <img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />
+            )}
+          </div>
+        ) : null}
 
-        <div className='flootRow flootRow4' title='重置' onClick={() => modelChangeFu(3)}></div>
+        <div
+          className="flootRow flootRow4"
+          title="重置"
+          onClick={() => modelChangeFu(3)}
+        ></div>
       </div>
-
     </div>
-  )
-}
+  );
+}

webNew/src/pages/ModelM/index.tsx

@@ -1,118 +1,140 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import { RootState } from '@/store';
-import { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import musicImg from '@/assets/img/music.png'
-import musicImgAc from '@/assets/img/musicAc.png'
-import styles from './index.module.scss'
-import { baseURL } from '@/utils/http';
-import { useLocation } from 'react-router-dom';
-import { getModelInfo } from '@/store/action/home';
+import { RootState } from "@/store";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import musicImg from "@/assets/img/music.png";
+import musicImgAc from "@/assets/img/musicAc.png";
+import styles from "./index.module.scss";
+import { baseURL } from "@/utils/http";
+import { useLocation } from "react-router-dom";
+import { getModelInfo } from "@/store/action/home";
 
 export default function ModelM() {
-  const location = useLocation()
-
-  const dispatch = useDispatch()
+  const location = useLocation();
 
+  const dispatch = useDispatch();
 
   // 发送请求获取信息，存到仓库
   useEffect(() => {
-    const arr = location.search.split('=')
-    const id = arr[1]
-    dispatch(getModelInfo(id))
-  }, [dispatch, location.search])
+    const arr = location.search.split("=");
+    const id = arr[1];
+    dispatch(getModelInfo(id));
+  }, [dispatch, location.search]);
 
   // 从仓库获取信息
-  const info = useSelector((state: RootState) => state.homeStore.qrModel)
-
+  const info = useSelector((state: RootState) => state.homeStore.qrModel);
 
   // 控制模型放大缩小和复位
-  const ifrBoxRef = useRef<any>(null)
+  const ifrBoxRef = useRef<any>(null);
   const modelChangeFu = (val: number) => {
-    const dom = ifrBoxRef.current
+    const dom = ifrBoxRef.current;
 
     if (dom && dom.contentWindow && dom.contentWindow.webview) {
-      if (val === 1) dom.contentWindow.webview.zoomIn()  // 放大
-      else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
-      else dom.contentWindow.webview.resetView() // 复位
+      if (val === 1) dom.contentWindow.webview.zoomIn(); // 放大
+      else if (val === 2) dom.contentWindow.webview.zoomOut(); // 缩小
+      else dom.contentWindow.webview.resetView(); // 复位
     }
-  }
-
+  };
 
   // 控制音乐播放暂停
-  const musicRef = useRef<HTMLAudioElement>(null)
+  const musicRef = useRef<HTMLAudioElement>(null);
 
-  const [music, setMusic] = useState(false)
+  const [music, setMusic] = useState(false);
   const musicPlayFu = (flag: boolean) => {
-    const dom = musicRef.current
+    const dom = musicRef.current;
     if (dom) {
       if (flag) {
-
         // 打开音乐
-        setMusic(true)
-        dom.play()
-        dom.addEventListener('ended', function () {
-          setMusic(false)
-        }, false);
+        setMusic(true);
+        dom.play();
+        dom.addEventListener(
+          "ended",
+          function () {
+            setMusic(false);
+          },
+          false
+        );
       } else {
         // 关闭音乐
-        setMusic(false)
-        dom.pause()
+        setMusic(false);
+        dom.pause();
       }
     }
-  }
-
+  };
 
   return (
     <div className={styles.ModelM}>
       {/* 音频 */}
-      {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
+      {info.audioPath ? (
+        <audio src={baseURL + info.audioPath} ref={musicRef}></audio>
+      ) : null}
       {/* 模型盒子 */}
-      <div className='ifrBox'>
-        {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
-
+      <div className="ifrBox">
+        {info.fileName ? (
+          <iframe
+            ref={ifrBoxRef}
+            src={`model.html?m=${info.fileName}`}
+            frameBorder="no"
+          ></iframe>
+        ) : null}
       </div>
       {/* 名字 */}
-        <div className='model_title'>{info.name}</div>
+      <div className="model_title">{info.name}</div>
 
       {/* 下边介绍 */}
-      <div className='rightTxt'>
-
-
-        {
-          info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
-        }
-
-        <div className='model_floo'>
-          <div className='model_sortRow'>类别：
-            <p>{info.dictTextureName ? info.dictTextureName : '（空）'}</p>
+      <div className="rightTxt">
+        {info.description ? (
+          <div
+            className="model_txt"
+            dangerouslySetInnerHTML={{ __html: info.description }}
+          ></div>
+        ) : (
+          <div className="model_txt">暂无信息</div>
+        )}
+
+        <div className="model_floo">
+          <div className="model_sortRow">
+            类别：
+            <p>{info.dictTextureName ? info.dictTextureName : "（空）"}</p>
           </div>
-          <div className='model_ageRow'>年代：
-            <p>{info.dictAgeName ? info.dictAgeName : '（空）'}</p>
+          <div className="model_ageRow">
+            年代：
+            <p>{info.dictAgeName ? info.dictAgeName : "（空）"}</p>
           </div>
-
         </div>
 
-
         {
-          <div className='model_size'>尺寸：{info.sizeLength ? info.sizeLength : '（空）'}
+          <div className="model_size">
+            尺寸：{info.sizeLength ? info.sizeLength : "（空）"}
           </div>
         }
-
       </div>
 
       {/* 底部按钮 */}
-      <div className='flootBtnBox'>
-        <div className='flootRow flootRow1' onClick={() => modelChangeFu(1)}></div>
-        <div className='flootRow flootRow2' onClick={() => modelChangeFu(2)}></div>
-        {info.audioPath ? (<div className='flootRow flootRowM'>
-          {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
-            (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
-        </div>) : null}
+      <div className="flootBtnBox">
+        <div
+          className="flootRow flootRow1"
+          onClick={() => modelChangeFu(1)}
+        ></div>
+        <div
+          className="flootRow flootRow2"
+          onClick={() => modelChangeFu(2)}
+        ></div>
+        {info.audioPath ? (
+          <div className="flootRow flootRowM">
+            {music ? (
+              <img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />
+            ) : (
+              <img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />
+            )}
+          </div>
+        ) : null}
 
-        <div className='flootRow flootRow4' onClick={() => modelChangeFu(3)}></div>
+        <div
+          className="flootRow flootRow4"
+          onClick={() => modelChangeFu(3)}
+        ></div>
       </div>
-
     </div>
-  )
-}
+  );
+}

webNew/src/store/reducer/home.ts

@@ -1,6 +1,4 @@
-import { HomeSortType, HomeModelType, modelItem } from "@/types"
-
-
+import { HomeSortType, HomeModelType, modelItem } from "@/types";
 
 // 初始化状态应用注解
 const initState = {
@@ -8,26 +6,29 @@ const initState = {
   ageList: [] as HomeSortType[],
   modelInfo: {} as HomeModelType,
   qrModel: {} as modelItem,
-}
+};
 
 type HomeActionType =
-  | { type: 'home/setSort', payload: HomeSortType[] }
-  | { type: 'home/setAge', payload: HomeSortType[] }
-  | { type: 'home/setList', payload: HomeModelType }
-  | { type: 'home/Model', payload: modelItem }
+  | { type: "home/setSort"; payload: HomeSortType[] }
+  | { type: "home/setAge"; payload: HomeSortType[] }
+  | { type: "home/setList"; payload: HomeModelType }
+  | { type: "home/Model"; payload: modelItem };
 
 // 频道 reducer
-export default function loginReducer(state = initState, action: HomeActionType) {
+export default function loginReducer(
+  state = initState,
+  action: HomeActionType
+) {
   switch (action.type) {
-    case 'home/setSort':
-      return { ...state, sortList: action.payload }
-    case 'home/setAge':
-      return { ...state, ageList: action.payload }
-    case 'home/setList':
-      return { ...state, modelInfo: action.payload }
-    case 'home/Model':
-      return { ...state, qrModel: action.payload }
+    case "home/setSort":
+      return { ...state, sortList: action.payload };
+    case "home/setAge":
+      return { ...state, ageList: action.payload };
+    case "home/setList":
+      return { ...state, modelInfo: action.payload };
+    case "home/Model":
+      return { ...state, qrModel: action.payload };
     default:
-      return state
+      return state;
   }
-}
+}

webNew/src/utils/http.ts

@@ -1,50 +1,49 @@
-import axios from 'axios'
+import axios from "axios";
 // import history from './history'
 // import { getTokenInfo } from './storage'
 // 请求基地址
 // export const baseURL = process.env.NODE_ENV === "development" ? 'http://192.168.20.55:8032' : ''
-export const baseURL = process.env.NODE_ENV === "development" ? 'https://hnbwg.4dage.com' : ''
+export const baseURL =
+  process.env.NODE_ENV === "development" ? "https://hnbwg.4dage.com" : "";
 
 // 创建 axios 实例
 const http = axios.create({
   baseURL,
   timeout: 5000,
-})
+});
 
 // 请求拦截器
 http.interceptors.request.use(
   function (config: any) {
     // const { token } = getTokenInfo()
     // if (token) config.headers.Authorization = `Bearer ${token}`
-    return config
+    return config;
   },
   function (err) {
-    return Promise.reject(err)
-  },
-)
+    return Promise.reject(err);
+  }
+);
 
 // 响应拦截器
 http.interceptors.response.use(
   function (response) {
-    return response.data
+    return response.data;
   },
   async function (err) {
     // 如果因为网络原因，response没有，给提示消息
     if (!err.response) {
-      alert('网络繁忙，请稍后重试')
+      alert("网络繁忙，请稍后重试");
     } else {
       // 网络没问题，后台返回了有数据
-
       // token过期
       // if (err.response.status === 401) {
       //   history.push('/Login')
-
       // }
     }
 
-    return Promise.reject(err)
-  },
-)
+    return Promise.reject(err);
+  }
+);
 
 // 导出 axios 实例
-export default http
+export default http;