美化产品详情页主图导航图标

components/products/ProductImageGallery.jsx

@@ -35,6 +35,58 @@ const ProductImageGallery = ({ data }) => {
   const mainImageIndex = getMainImageIndex();
   const currentImage = data.attachments[currentImageIndex]?.file_url || data.attachments[0]?.file_url;
 
+  // 专门的缩略图滚动函数
+  const scrollThumbnailToIndex = (index) => {
+    console.log('滚动缩略图到索引:', index); // 调试信息
+    
+    if (thumbsSwiperRef.current && thumbsSwiperRef.current.swiper) {
+      const swiper = thumbsSwiperRef.current.swiper;
+      console.log('Swiper实例存在，开始滚动'); // 调试信息
+      
+      // 使用更简单的方法：直接滚动到指定索引
+      try {
+        swiper.slideTo(index, 300);
+        console.log('滚动成功，目标索引:', index);
+      } catch (error) {
+        console.error('滚动失败:', error);
+      }
+    } else {
+      console.log('Swiper实例不存在，thumbsSwiperRef:', thumbsSwiperRef.current);
+    }
+  };
+
+  const changeMainImage = (direction) => {
+    console.log('changeMainImage 被调用，方向:', direction); // 调试信息
+    
+    if (data.attachments.length <= 1) return;
+    
+    let newIndex;
+    if (direction === 'next') {
+      newIndex = (currentImageIndex + 1) % data.attachments.length;
+    } else {
+      newIndex = (currentImageIndex - 1 + data.attachments.length) % data.attachments.length;
+    }
+    
+    console.log('新的索引:', newIndex, '当前索引:', currentImageIndex); // 调试信息
+    
+    setCurrentImageIndex(newIndex);
+    
+    // 自动滚动缩略图到对应位置
+    setTimeout(() => {
+      console.log('开始执行滚动，索引:', newIndex); // 调试信息
+      scrollThumbnailToIndex(newIndex);
+    }, 100);
+  };
+
+  const changeMainImageByIndex = (index) => {
+    setCurrentImageIndex(index);
+    
+    // 智能滚动缩略图到可见区域
+    setTimeout(() => {
+      scrollThumbnailToIndex(index);
+    }, 100);
+  };
+
   // 初始化当前索引为主图索引
   useEffect(() => {
     setCurrentImageIndex(mainImageIndex);
@@ -57,10 +109,12 @@ const ProductImageGallery = ({ data }) => {
         case 'Home':
           event.preventDefault();
           setCurrentImageIndex(0);
+          setTimeout(() => scrollThumbnailToIndex(0), 100);
           break;
         case 'End':
           event.preventDefault();
           setCurrentImageIndex(data.attachments.length - 1);
+          setTimeout(() => scrollThumbnailToIndex(data.attachments.length - 1), 100);
           break;
         default:
           break;
@@ -75,61 +129,7 @@ const ProductImageGallery = ({ data }) => {
     };
   }, [data.attachments.length]);
 
-  const changeMainImage = (direction) => {
-    if (data.attachments.length <= 1) return;
-    
-    if (direction === 'next') {
-      setCurrentImageIndex((prev) => (prev + 1) % data.attachments.length);
-    } else {
-      setCurrentImageIndex((prev) => (prev - 1 + data.attachments.length) % data.attachments.length);
-    }
-  };
 
-  const changeMainImageByIndex = (index) => {
-    setCurrentImageIndex(index);
-    
-    // 智能滚动缩略图到可见区域
-    if (thumbsSwiperRef.current && thumbsSwiperRef.current.swiper) {
-      const swiper = thumbsSwiperRef.current.swiper;
-      const slideIndex = index;
-      
-      // 计算目标滚动位置
-      const slideWidth = 64; // 64px 缩略图宽度
-      const spaceBetween = 16; // 16px 间距
-      const totalSlideWidth = slideWidth + spaceBetween;
-      
-      // 获取当前可见的slides数量
-      const visibleSlides = swiper.params.slidesPerView;
-      
-      // 计算当前滚动位置
-      const currentTranslate = swiper.translate;
-      const currentSlideIndex = Math.round(Math.abs(currentTranslate) / totalSlideWidth);
-      
-      // 判断需要向左还是向右滚动
-      let targetSlideIndex;
-      
-      if (slideIndex < currentSlideIndex) {
-        // 向左滚动：让选中的缩略图显示在左侧
-        targetSlideIndex = Math.max(0, slideIndex - 1);
-      } else if (slideIndex >= currentSlideIndex + visibleSlides) {
-        // 向右滚动：让选中的缩略图显示在右侧
-        targetSlideIndex = slideIndex - visibleSlides + 1;
-      } else {
-        // 当前缩略图已经在可见区域内，不需要滚动
-        return;
-      }
-      
-      // 计算目标滚动位置
-      const targetTranslate = targetSlideIndex * totalSlideWidth;
-      
-      // 确保不超出边界
-      const maxTranslate = swiper.maxTranslate();
-      const finalTranslate = Math.max(0, Math.min(targetTranslate, maxTranslate));
-      
-      // 平滑滚动到目标位置
-      swiper.slideTo(Math.round(finalTranslate / totalSlideWidth), 300);
-    }
-  };
 
   // 缩略图导航控制 - 移除这些函数，不再需要
   // const goToPrevThumbs = () => {