图片评论列表调整

src/app/(public)/product/_components/SwitchButton.tsx

@@ -171,6 +171,7 @@ const openGalleryModal = useCallback((
   clickImgIndex: number,
   reviewList: ProductReviewNode[] // 重点：传入当前点击所属的评论数组
 ) => {
+  // debugger
   const galleryAll = buildGalleryList(reviewList);
   const targetEdge = reviewList[clickReviewIndex];
   // const targetReview = targetEdge;
@@ -274,19 +275,19 @@ const openGalleryModal = useCallback((
             </div>    
             <ReviewButton setShowForm={setShowForm} />
             </div>
-          <div className="w-full relative ">
-              {reviewList.map((edge) => (
-                <div key={edge.id}>
+          <div className="w-full flex gap-2 overflow-hidden my-4">
+              {/* {reviewList.map((edge) => ( */}
+                {/* <div key={edge.id}> */}
                   {/*评论文字、评分等*/}
-                  {edge.attachments.length > 0 && (
+                  {/* {edge.attachments.length > 0 && ( */}
                     <HairPhotoGallery
-                      review={edge}
+                      // review={edge}
                       fullReviewList={reviewList}
                       onOpenModal={openGalleryModal}
                     />
-                  )}
-                </div>
-              ))}
+                  {/* )} */}
+                {/* </div> */}
+              {/* ))} */}
              {/* <ReviewAdd productId={productId} /> */}
           </div>
            {open && (

src/app/(public)/product/_components/review/HairPhotoGallery.tsx

@@ -1,9 +1,6 @@
-"use client";
 import Image from "next/image";
 import type {ProductReviewNode} from "@/types/products/review";
-
 interface HairPhotoGalleryProps {
-  review: ProductReviewNode;
   fullReviewList: ProductReviewNode[];
   onOpenModal: (
     clickReviewIndex: number,
@@ -11,37 +8,54 @@ interface HairPhotoGalleryProps {
     fullReviewList: ProductReviewNode[]
   ) => void;
 }
-
 export default function HairPhotoGallery({
-  review,
   fullReviewList,
   onOpenModal,
 }: HairPhotoGalleryProps) {
-  const allImages = review.attachments;
-  const displayImages = allImages.slice(0, 4);
+  // 1. 遍历所有评论，把全部图片打平成一维数组，同时保存所属评论下标、图片下标
+  const allImageItems: {
+    reviewIndex: number;
+    imgIndex: number;
+    src: string;
+  }[] = [];
+
+  fullReviewList.forEach((review, reviewIndex) => {
+    // 这里假设图片数组是 review.attachments，按你实际字段替换
+    const imgs = review.attachments || [];
+    imgs.forEach((imgSrc:string, imgIndex:number) => {
+      allImageItems.push({
+        reviewIndex,
+        imgIndex,
+        src: imgSrc,
+      });
+    });
+  });
+
+  // 只展示前4张
+  const previewItems = allImageItems.slice(0, 4);
+  const totalCount = allImageItems.length;
 
-  const handleImageClick = (imgIdx: number) => {
-    const reviewIndex = fullReviewList.findIndex((r) => r.id === review.id);
-    if (reviewIndex === -1) return;
-    onOpenModal(reviewIndex, imgIdx, fullReviewList);
+  const handleImageClick = (item: typeof previewItems[number]) => {
+    onOpenModal(item.reviewIndex, item.imgIndex, fullReviewList);
   };
 
   return (
     <div className="w-full flex gap-2 overflow-hidden my-4">
-      {displayImages.map((src, imgIdx) => (
+      {previewItems.map((item, displayIdx) => (
         <div
-          key={'https://cdn.alipearlhair.com/media/reviewimages/cache/6/image/150x/040ec09b1e35df139433887a97daa66f/reviewimages/7O_A6W92AW3D_87N5PR8CO.png'||src}
-          onClick={() => handleImageClick(imgIdx)}
+          key={`${item.reviewIndex}-${item.imgIndex}`}
+          onClick={() => handleImageClick(item)}
           className="relative flex-1 aspect-3/4 cursor-pointer rounded overflow-hidden"
         >
           <Image
-            src={src}
-            alt={`hair ${imgIdx}`}
+            src={item.src}
+            alt={`hair ${displayIdx}`}
             width={144}
             height={192}
-            className="w-full h-full object-cover"
+            className="w-36 object-cover"
           />
-          {imgIdx === 3 && allImages.length > 4 ? (
+          {/* 第4张(displayIdx===3)并且总图片大于4，显示遮罩 */}
+          {displayIdx === 3 && totalCount > 4 ? (
             <div className="absolute inset-0 bg-black/25 flex flex-col items-center justify-center text-white">
               <p className="text-sm font-normal leading-ly-22 underline">More</p>
               <p className="text-sm font-normal leading-ly-22 underline">Photos</p>