数据更新

public/myData/data.js

@@ -20,7 +20,16 @@ const oreData = [
   {
     title: '吸大麻烟具（1号）',
     img: './myData/img/lzx03-1.jpg',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx03',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx03-1',
+    year: '清',
+    texture: '质地：木、陶',
+    size: '长27.3cm，重36g',
+    type: '三维'
+  },
+  {
+    title: '吸大麻烟具（1号）',
+    img: './myData/img/lzx03-2.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx03-2',
     year: '清',
     texture: '质地：木、陶',
     size: '长27.3cm，重36g',
@@ -117,15 +126,6 @@ const oreData = [
     type: '三维'
   },
   {
-    title: '琉璃鼻烟壶',
-    img: './myData/img/lzx14.jpg',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx14',
-    year: '清',
-    texture: '质地：',
-    size: '通高5.8、宽3、厚2.1厘米，重量6克',
-    type: '三维'
-  },
-  {
     title: '银鼻烟壶',
     img: './myData/img/lzx15.jpg',
     modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx15',
@@ -154,8 +154,8 @@ const oreData = [
   },
   {
     title: '玛瑙鼻烟壶',
-    img: './myData/img/18-1.jpg',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx18',
+    img: './myData/img/lzx18-1.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx18-1',
     year: '清',
     texture: '质地：玛瑙',
     size: '高6.4厘米，重量105克',
@@ -163,7 +163,7 @@ const oreData = [
   },
   {
     title: '鼻烟壶',
-    img: './myData/img/19.jpg',
+    img: './myData/img/lzx19.jpg',
     modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx19',
     year: '清',
     texture: '质地：玛瑙',
@@ -172,11 +172,209 @@ const oreData = [
   },
   {
     title: '鼻烟壶',
-    img: './myData/img/lzx01.jpg',
-    imgList: ['./myData/img2d/lzx01.jpg', './myData/img2d/lzx02.jpg'],
+    img: './myData/img/lzx20.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx20',
     year: '清',
-    texture: '质地：玛瑙',
-    size: '高6.4厘米，重量105克',
+    texture: '质地：陶',
+    size: '',
+    type: '三维'
+  },
+  {
+    title: '凉州且赋七律',
+    img: './myData/img/DSC06002.jpg',
+    imgList: ['./myData/img2d/DSC06002.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '宽29.5cm，长42cm',
+    type: '二维'
+  },
+  {
+    title: '四洲志',
+    img: './myData/img/DSC05997.jpg',
+    imgList: ['./myData/img2d/DSC05997.jpg', './myData/img2d/DSC05998.jpg', './myData/img2d/DSC05999.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '宽12.8cm，长19.5cm，厚0.5cm',
+    type: '二维'
+  },
+  {
+    title: '华事夷言',
+    img: './myData/img/DSC05992.jpg',
+    imgList: ['./myData/img2d/DSC05992.jpg', './myData/img2d/DSC05993.jpg', './myData/img2d/DSC05994.jpg', './myData/img2d/DSC06007.jpg', './myData/img2d/DSC06008.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '宽12.7cm，长19.5cm，厚0.6cm',
+    type: '二维'
+  },
+  {
+    title: '《味兰书屋》匾额拓片',
+    img: './myData/img/DSC06044.jpg',
+    imgList: ['./myData/img2d/DSC06044.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '长178,宽69.4cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐对联（复制件）②“无尽”XYL0143',
+    img: './myData/img/DSC06047.jpg',
+    imgList: ['./myData/img2d/DSC06047.jpg', './myData/img2d/DSC06049.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长2.6，宽58cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐对联（复制件）③“月留”XYL0144',
+    img: './myData/img/DSC06030.jpg',
+    imgList: ['./myData/img2d/DSC06030.jpg', './myData/img2d/DSC06031.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长2.23，宽58cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐对联（复制件）④“谢安”XYL0145',
+    img: './myData/img/DSC06020.jpg',
+    imgList: ['./myData/img2d/DSC06020.jpg', './myData/img2d/DSC06021.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长2.56cm，宽57cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐书法“念非善莫举”XYL0150',
+    img: './myData/img/DSC06042.jpg',
+    imgList: ['./myData/img2d/DSC06042.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长255.2cm，宽65cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐送友人书法“敬能”',
+    img: './myData/img/DSC06016.jpg',
+    imgList: ['./myData/img2d/DSC06016.jpg', './myData/img2d/DSC06017.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长176.3，宽46cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐送友人书法“华健”',
+    img: './myData/img/DSC06013.jpg',
+    imgList: ['./myData/img2d/DSC06013.jpg', './myData/img2d/DSC06014.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长176.3，宽45.3cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐对联复制件“禁掖”XYL0154',
+    img: './myData/img/DSC06051.jpg',
+    imgList: ['./myData/img2d/DSC06051.jpg', './myData/img2d/DSC06053.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长255.1,宽 59.3cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐玄孙凌青题词XYL0160',
+    img: './myData/img/DSC06040.jpg',
+    imgList: ['./myData/img2d/DSC06040.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长190.3cm,宽 86cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐分家文书XYL0162',
+    img: './myData/img/DSC06011.jpg',
+    imgList: ['./myData/img2d/DSC06011.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长106.3cm,宽 50.4cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐父亲分家文书XYL0164',
+    img: './myData/img/DSC06036.jpg',
+    imgList: ['./myData/img2d/DSC06036.jpg', './myData/img2d/DSC06037.jpg', './myData/img2d/DSC06038.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '长205cm,宽 64.6cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐诗词',
+    img: './myData/img/DSC06005.jpg',
+    imgList: ['./myData/img2d/DSC06005.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '宽24.6cm，长29cm',
+    type: '二维'
+  },
+  {
+    title: '林则徐书信',
+    img: './myData/img/DSC05986.jpg',
+    imgList: ['./myData/img2d/DSC05986.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '',
+    type: '二维'
+  },
+  {
+    title: '林则徐书信',
+    img: './myData/img/DSC05988.jpg',
+    imgList: ['./myData/img2d/DSC05988.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '',
+    type: '二维'
+  },
+  {
+    title: '林则徐书信',
+    img: './myData/img/DSC05990.jpg',
+    imgList: ['./myData/img2d/DSC05990.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '',
+    type: '二维'
+  },
+  {
+    title: '林则徐行书七言联',
+    img: './myData/img/DSC06026.jpg',
+    imgList: ['./myData/img2d/DSC06026.jpg', './myData/img2d/DSC06027.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '',
+    type: '二维'
+  },
+  {
+    title: '林则徐行书七言联',
+    img: './myData/img/DSC06023.jpg',
+    imgList: ['./myData/img2d/DSC06023.jpg', './myData/img2d/DSC06024.jpg'],
+    year: '',
+    texture: '质地：纸',
+    size: '',
+    type: '二维'
+  },
+  {
+    title: '林则徐行书条幅',
+    img: './myData/img/DSC06034.jpg',
+    imgList: ['./myData/img2d/DSC06034.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '',
+    type: '二维'
+  },
+  {
+    title: '国朝先政事略.林文忠公事略',
+    img: './myData/img/DSC06083.jpg',
+    imgList: ['./myData/img2d/DSC06083.jpg', './myData/img2d/DSC06084.jpg', './myData/img2d/DSC06085.jpg'],
+    year: '',
+    texture: '质地：宣纸',
+    size: '',
     type: '二维'
   }
 ]

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

@@ -12,7 +12,7 @@
       width: 100%;
       height: 18%;
       display: flex;
-      align-items: end;
+      align-items: flex-end;
       padding-bottom: 30px;
       gap: 20px;
       .search {
@@ -144,7 +144,6 @@
     }
     .page {
       display: flex;
-      display: none;
       width: 100%;
       height: 10%;
       flex-direction: column;
@@ -522,7 +521,7 @@
       }
       .content {
         width: 100%;
-        height: calc(100% - 180px);
+        height: calc(100% - 235px);
         overflow: auto;
         &::-webkit-scrollbar {
           width: 0;
@@ -573,9 +572,7 @@
           }
         }
       }
-      .page {
-        display: none;
-      }
+
       .detail {
         .info {
           position: absolute;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import styles from './index.module.scss'
 import Select from 'antd/es/select'
 import Pagination from 'antd/es/pagination'
@@ -25,27 +25,52 @@ function Appreciate({
   const [searchText, setSearchText] = useState('')
   const [textureFilter, setTextureFilter] = useState('all')
   const [typeFilter, setTypeFilter] = useState('all')
+  // 添加分页状态
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 12
   const swiperRef = useRef<any>(null);
 
-  useEffect(() => {
-    if (currentIndex !== undefined) {
-      setHidenComplete(true)
-    } else {
-      setHidenComplete(false)
-    }
-  }, [currentIndex, setHidenComplete])
+  const [paginatedData, setPaginatedData] = useState(oreData.slice(0, pageSize))
+
+  const filteredData = useMemo(() => {
+    return oreData
+      .filter(item => textureFilter === 'all' || item.texture === textureFilter)
+      .filter(item => typeFilter === 'all' || item.type === typeFilter)
+      .filter(item => item.title.includes(searchText))
+  }, [searchText, textureFilter, typeFilter])
 
   useEffect(() => {
-    let filteredData = oreData
-    if (textureFilter !== 'all') {
-      filteredData = filteredData.filter(item => item.texture === textureFilter)
-    }
-    if (typeFilter !== 'all') {
-      filteredData = filteredData.filter(item => item.type === typeFilter)
-    }
-    filteredData = filteredData.filter(item => item.title.includes(searchText))
     setOreData1(filteredData)
-  }, [searchText, textureFilter, typeFilter])
+
+    // 添加边界检查：如果当前页超出范围，自动跳转到第一页
+    if (currentPage > Math.ceil(filteredData.length / pageSize) && filteredData.length > 0) {
+      setCurrentPage(1);
+      return;
+    }
+
+    // 计算当前页数据
+    const startIndex = (currentPage - 1) * pageSize
+    const endIndex = startIndex + pageSize
+    setPaginatedData(filteredData.slice(startIndex, endIndex))
+  }, [filteredData, currentPage, pageSize])
+
+
+  // 缓存文物类别选项
+  const typeOptions = useMemo(() => [
+    { value: 'all', label: '全部' },
+    ...Array.from(new Set(oreData.map(item => item.type))).map(type => ({
+      value: type,
+      label: type
+    }))
+  ], []);
+  // 缓存质地选项（同理优化）
+  const textureOptions = useMemo(() => [
+    { value: 'all', label: '全部' },
+    ...Array.from(new Set(oreData.map(item => item.texture))).map(texture => ({
+      value: texture,
+      label: texture
+    }))
+  ], []);
 
   return (
     <div className={styles.Appreciate} style={style}>
@@ -66,11 +91,7 @@ function Appreciate({
           <Select
             defaultValue={typeFilter}
             options={[
-              { value: 'all', label: '全部' },
-              ...Array.from(new Set(oreData.map(item => item.type))).map(type => ({
-                value: type,
-                label: type
-              }))
+              ...typeOptions
             ]}
             onChange={value => setTypeFilter(value)}
           />
@@ -80,11 +101,7 @@ function Appreciate({
           <Select
             defaultValue={textureFilter}
             options={[
-              { value: 'all', label: '全部' },
-              ...Array.from(new Set(oreData.map(item => item.texture))).map(texture => ({
-                value: texture,
-                label: texture
-              }))
+              ...textureOptions
             ]}
             onChange={value => setTextureFilter(value)}
           />
@@ -94,14 +111,18 @@ function Appreciate({
       </div>
       <div className='content'>
         <div className='scroll'>
-          {oreData1.map((item, index) => (
+          {paginatedData.map((item) => (
             <div
-              className={`item ${currentIndex === index ? 'active' : ''}`}
-              key={index}
-              onClick={() => setCurrentIndex(index)}
+              className={`item`}
+              key={oreData.indexOf(item)}
+              onClick={() => { setCurrentIndex(oreData.indexOf(item)); console.log(oreData.indexOf(item)) }}
             >
               <div className='img'>
-                <img src={item.img} alt='' />
+                <img
+                  src={item.img}
+                  alt=''
+                  loading='lazy'
+                />
               </div>
               <div className='txt'>{item.title}</div>
             </div>
@@ -109,13 +130,18 @@ function Appreciate({
         </div>
       </div>
       <div className='page'>
-        <Pagination defaultCurrent={1} total={50} />
+        <Pagination
+          defaultCurrent={1}
+          total={oreData1.length || 0}  // 显示过滤后的总条数
+          pageSize={pageSize}
+          onChange={(page) => setCurrentPage(page)}  // 页码变化时更新currentPage
+        />
       </div>
-      {currentIndex !== undefined && (oreData1[currentIndex].type === '三维' ? (
+      {currentIndex !== undefined && (oreData[currentIndex].type === '三维' ? (
         <div className='detail'>
           <iframe
             title='文物展示'
-            src='https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=JN-RMYXjinianbei'
+            src={oreData[currentIndex]?.modelSrc}
             allow='fullscreen'
           />
           <div className={`info ${isShowInfo ? 'showInfo' : 'hideInfo'}`}>
@@ -131,10 +157,10 @@ function Appreciate({
               />
             </div>
             <div className='content'>
-              <div className='title'>{oreData1[currentIndex]?.title}</div>
-              {/* <div className="time">年代：{oreData1[currentIndex]?.year}</div> */}
-              <div className='texture'>质地：{oreData1[currentIndex]?.texture}</div>
-              <div className='size'>尺寸：{oreData1[currentIndex]?.size}</div>
+              <div className='title'>{oreData[currentIndex]?.title}</div>
+              {/* <div className="time">年代：{oreData[currentIndex]?.year}</div> */}
+              <div className='texture'>质地：{oreData[currentIndex]?.texture}</div>
+              <div className='size'>尺寸：{oreData[currentIndex]?.size}</div>
             </div>
             <div
               className='arrow arrowR'
@@ -181,7 +207,7 @@ function Appreciate({
               swiperInternal.loopFix()
             }}
           >
-            {currentIndex !== undefined && oreData1[currentIndex].imgList?.map((item: string, index: number) => (
+            {currentIndex !== undefined && oreData[currentIndex].imgList?.map((item: string, index: number) => (
               <SwiperSlide key={index}>
                 <div
                   className='itemCard'
@@ -216,10 +242,10 @@ function Appreciate({
           </div>
 
           <div className="detail2Info">
-            <div className="title">{oreData1[currentIndex]?.title}</div>
+            <div className="title">{oreData[currentIndex]?.title}</div>
             <div className="text">
-              <div className="texture">质地：{oreData1[currentIndex]?.texture}</div>
-              <div className="size">尺寸：{oreData1[currentIndex]?.size}</div>
+              <div className="texture">质地：{oreData[currentIndex]?.texture}</div>
+              <div className="size">尺寸：{oreData[currentIndex]?.size}</div>
             </div>
           </div>
         </div>

src/pages/A2layout/index.module.scss

@@ -161,7 +161,7 @@
           height: 100%;
           display: flex;
           align-items: center;
-          justify-content: end;
+          justify-content: flex-end;
           padding-bottom: 10px;
           gap: 3px;
           & > img {

src/types/declaration.d.ts

@@ -12,7 +12,7 @@ declare const oreData: {
   title: string
   img: string
   modelSrc?: string
-   imgList?: string[]
+  imgList?: string[]
   year: string
   texture: string
   size: string