refactor: 重构作品播放页性能、媒体同步与内存管理

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -1,7 +1,7 @@
 import { ThumbsUp, X } from "lucide-react";
-import { useState } from "react";
+import { memo, useState } from "react";
 import type { Comment, User } from "../types.ts";
-import { formatRelativeTime, formatAbsoluteUTC } from "../utils";
+import { formatAbsoluteUTC, formatRelativeTime } from "../utils";
 import { CommentText } from "./CommentText";
 
 interface CommentListProps {
@@ -10,7 +10,11 @@ interface CommentListProps {
   comments: Comment[];
 }
 
-export function CommentList({ author, createdAt, comments }: CommentListProps) {
+export const CommentList = memo(function CommentList({
+  author,
+  createdAt,
+  comments,
+}: CommentListProps) {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
 
   return (
@@ -21,6 +25,8 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
             <img
               src={author.avatar_url}
               alt="avatar"
+              loading="lazy"
+              decoding="async"
               className="w-full h-full object-cover"
             />
           ) : null}
@@ -46,6 +52,8 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
                 <img
                   src={c.user.avatar_url}
                   alt="avatar"
+                  loading="lazy"
+                  decoding="async"
                   className="w-full h-full object-cover"
                 />
               ) : null}
@@ -66,13 +74,12 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
                 <div className="mt-2 grid grid-cols-3 gap-1.5 sm:gap-2">
                   {c.images.map((img, idx) => (
                     <button
-                      key={idx}
+                      key={`${c.cid}-img-${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"
@@ -80,6 +87,7 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
                         height={img.height}
                         className="w-full h-auto"
                         loading="lazy"
+                        decoding="async"
                       />
                     </button>
                   ))}
@@ -100,10 +108,9 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
       {/* 图片预览灯箱 */}
       {previewImage && (
         <div
-          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm"
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90"
           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"
@@ -113,7 +120,6 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
             <X size={20} />
           </button>
 
-          {/* 大图 */}
           <img
             src={previewImage}
             alt="preview"
@@ -124,4 +130,4 @@ export function CommentList({ author, createdAt, comments }: CommentListProps) {
       )}
     </>
   );
-}
+});