反爬虫优化，评论图片支持

app/aweme/[awemeId]/components/CommentList.tsx

@@ -1,4 +1,5 @@
-import { ThumbsUp } from "lucide-react";
+import { ThumbsUp, X } from "lucide-react";
+import { useState } from "react";
 import type { Comment, User } from "../types";
 import { formatRelativeTime, formatAbsoluteUTC } from "../utils";
 import { CommentText } from "./CommentText";
@@ -10,6 +11,8 @@ interface CommentListProps {
 }
 
 export function CommentList({ author, createdAt, comments }: CommentListProps) {
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
   return (
     <>
       <header className="flex items-center gap-4 mb-5">
@@ -42,6 +45,29 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
               <p className="mt-1 text-sm leading-relaxed text-white/90 break-words">
                 <CommentText text={c.text} />
               </p>
+              {c.images && c.images.length > 0 ? (
+                <div className="mt-2 grid grid-cols-3 gap-1.5 sm:gap-2">
+                  {c.images.map((img, idx) => (
+                    <button
+                      key={idx}
+                      type="button"
+                      onClick={() => setPreviewImage(img.url)}
+                      className="block overflow-hidden rounded-md bg-zinc-800/60 cursor-pointer hover:opacity-80 transition-opacity"
+                      title="点击预览大图"
+                    >
+                      {/* 以真实比例显示：利用 width/height 属性提供固有尺寸，CSS 设定宽度 100% 高度自适应 */}
+                      <img
+                        src={img.url}
+                        alt="comment-image"
+                        width={img.width}
+                        height={img.height}
+                        className="w-full h-auto"
+                        loading="lazy"
+                      />
+                    </button>
+                  ))}
+                </div>
+              ) : null}
               <div className="mt-2 inline-flex items-center gap-1 text-xs text-white/70">
                 <ThumbsUp size={14} />
                 <span>{c.digg_count}</span>
@@ -51,6 +77,32 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
         ))}
         {comments.length === 0 ? <li className="text-sm text-white/60">暂无评论</li> : null}
       </ul>
+
+      {/* 图片预览灯箱 */}
+      {previewImage && (
+        <div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm"
+          onClick={() => setPreviewImage(null)}
+        >
+          {/* 关闭按钮 */}
+          <button
+            type="button"
+            className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/15 text-white border border-white/20 hover:bg-white/25 transition-colors flex items-center justify-center"
+            onClick={() => setPreviewImage(null)}
+            aria-label="关闭预览"
+          >
+            <X size={20} />
+          </button>
+
+          {/* 大图 */}
+          <img
+            src={previewImage}
+            alt="preview"
+            className="max-w-[90vw] max-h-[90vh] object-contain"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
     </>
   );
 }