diff --git a/components/products/ProductImageGallery.jsx b/components/products/ProductImageGallery.jsx index a4b88d3..cb466d7 100644 --- a/components/products/ProductImageGallery.jsx +++ b/components/products/ProductImageGallery.jsx @@ -4,7 +4,6 @@ import { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Pagination, Thumbs, FreeMode } from "swiper/modules"; -// 导入Swiper样式 import "swiper/css"; import "swiper/css/navigation"; import "swiper/css/pagination"; @@ -16,12 +15,10 @@ const ProductImageGallery = ({ data }) => { const [thumbsSwiper, setThumbsSwiper] = useState(null); const thumbsSwiperRef = useRef(null); - // 如果没有attachments,不显示组件 if (!data?.attachments || data.attachments.length === 0) { return null; } - // 使用useMemo优化主图索引计算 const mainImageIndex = useMemo(() => { if (!data.image) return 0; @@ -32,31 +29,25 @@ const ProductImageGallery = ({ data }) => { return mainImageIndex >= 0 ? mainImageIndex : 0; }, [data.image, data.attachments]); - // 使用useMemo优化当前图片URL const currentImage = useMemo(() => { return data.attachments[currentImageIndex]?.file_url || data.attachments[0]?.file_url; }, [data.attachments, currentImageIndex]); - // 使用useCallback优化缩略图滚动函数 const scrollThumbnailToIndex = useCallback((index) => { if (thumbsSwiperRef.current?.swiper) { try { const swiper = thumbsSwiperRef.current.swiper; if (index === 0) { - // 第一张图片,滚动到最左侧 swiper.scrollTo(0, 300); } else { - // 其他图片使用原有的slideTo方法,保持正常滚动 swiper.slideTo(index, 300); } } catch (error) { - // 静默处理错误 } } }, []); - // 使用useCallback优化主图切换函数 const changeMainImage = useCallback((direction) => { if (data.attachments.length <= 1) return; @@ -69,28 +60,23 @@ const ProductImageGallery = ({ data }) => { setCurrentImageIndex(newIndex); - // 自动滚动缩略图到对应位置 setTimeout(() => { scrollThumbnailToIndex(newIndex); }, 100); }, [currentImageIndex, data.attachments.length, scrollThumbnailToIndex]); - // 使用useCallback优化按索引切换主图函数 const changeMainImageByIndex = useCallback((index) => { setCurrentImageIndex(index); - // 智能滚动缩略图到可见区域 setTimeout(() => { scrollThumbnailToIndex(index); }, 100); }, [scrollThumbnailToIndex]); - // 初始化当前索引为主图索引 useEffect(() => { setCurrentImageIndex(mainImageIndex); }, [mainImageIndex]); - // 键盘导航支持 - 使用useCallback优化 const handleKeyDown = useCallback((event) => { if (data.attachments.length <= 1) return; @@ -126,7 +112,6 @@ const ProductImageGallery = ({ data }) => { }; }, [handleKeyDown]); - // 使用useMemo优化缩略图渲染 const thumbnailSlides = useMemo(() => { return data.attachments.map((attachment, index) => ( { style={index === currentImageIndex ? { borderColor: '#1A1A1A', borderWidth: '2px' } : {}} tabIndex={0} role="button" - aria-label={`查看图片 ${index + 1} / ${data.attachments.length}`} + aria-label={`View image ${index + 1} / ${data.attachments.length}`} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); @@ -160,7 +145,6 @@ const ProductImageGallery = ({ data }) => { e.target.style.display = 'none'; }} /> - {/* 缩略图加载状态指示 */}
@@ -172,7 +156,6 @@ const ProductImageGallery = ({ data }) => { return (
- {/* 主图显示区域 */}
{ loading="lazy" /> - {/* 导航箭头 - 悬浮时显示 */} {data.attachments.length > 1 && ( <>
- {/* 缩略图列表 - 使用Swiper实现最佳滚动效果 */} {data.attachments.length > 1 && (
{ )}
- {/* 内联样式 */}