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

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

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { X, Copy, CheckCheck, Check } from "lucide-react";
-import { useState } from "react";
+import { Check, CheckCheck, Copy, X } from "lucide-react";
+import { memo, useEffect, useRef, useState } from "react";
 import type { VideoTranscript } from "../types";
 
 interface TranscriptPanelProps {
@@ -10,46 +10,59 @@ interface TranscriptPanelProps {
   transcript: VideoTranscript | null;
 }
 
-export function TranscriptPanel({
+export const TranscriptPanel = memo(function TranscriptPanel({
   open,
   onClose,
   transcript,
 }: TranscriptPanelProps) {
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
   const [copiedAll, setCopiedAll] = useState(false);
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const copyAllTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current);
+      if (copyAllTimerRef.current !== null)
+        clearTimeout(copyAllTimerRef.current);
+    };
+  }, []);
 
   if (!open) return null;
 
-  const handleCopy = (text: string, index: number) => {
-    navigator.clipboard.writeText(text).then(() => {
+  const handleCopy = (text: string, index: number): void => {
+    void navigator.clipboard.writeText(text).then(() => {
       setCopiedIndex(index);
-      setTimeout(() => setCopiedIndex(null), 2000);
+      if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopiedIndex(null), 2000);
     });
   };
 
-  const handleCopyAll = () => {
+  const handleCopyAll = (): void => {
     if (!transcript?.transcript) return;
     const allText = transcript.transcript.join("\n");
-    navigator.clipboard.writeText(allText).then(() => {
+    void navigator.clipboard.writeText(allText).then(() => {
       setCopiedAll(true);
-      setTimeout(() => setCopiedAll(false), 2000);
+      if (copyAllTimerRef.current !== null)
+        clearTimeout(copyAllTimerRef.current);
+      copyAllTimerRef.current = setTimeout(() => setCopiedAll(false), 2000);
     });
   };
 
   if (!transcript?.transcript?.length) {
     return (
       <div
-        className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
         onClick={onClose}
       >
         <div
-          className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"
+          className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 border border-white/10 rounded-2xl shadow-2xl"
           onClick={(e) => e.stopPropagation()}
         >
-          {/* 头部 */}
           <div className="flex items-center justify-between p-4 border-b border-white/10">
             <h2 className="text-lg font-semibold text-white">语音转录</h2>
             <button
+              type="button"
               onClick={onClose}
               className="p-2 rounded-full hover:bg-white/10 transition-colors"
               aria-label="关闭"
@@ -58,7 +71,6 @@ export function TranscriptPanel({
             </button>
           </div>
 
-          {/* 内容 */}
           <div className="p-8 text-center text-white/60">
             <p>{transcript ? "未识别到文字" : "该视频尚未转写"}</p>
           </div>
@@ -69,21 +81,20 @@ export function TranscriptPanel({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
       onClick={onClose}
     >
       <div
-        className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl flex flex-col"
+        className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 border border-white/10 rounded-2xl shadow-2xl flex flex-col"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* 头部 */}
         <div className="flex items-center justify-between p-4 border-b border-white/10 flex-shrink-0">
           <div>
             <h2 className="text-lg font-semibold text-white">语音转录</h2>
-
           </div>
           <div className="flex items-center gap-2">
             <button
+              type="button"
               onClick={handleCopyAll}
               className="flex items-center gap-2 px-3 py-2 text-sm bg-blue-600/20 text-blue-300 rounded-lg hover:bg-blue-600/30 transition-colors"
             >
@@ -100,6 +111,7 @@ export function TranscriptPanel({
               )}
             </button>
             <button
+              type="button"
               onClick={onClose}
               className="p-2 rounded-full hover:bg-white/10 transition-colors"
               aria-label="关闭"
@@ -109,11 +121,10 @@ export function TranscriptPanel({
           </div>
         </div>
 
-        {/* 转录列表 */}
         <div className="flex-1 overflow-y-auto p-4 space-y-2">
           {transcript.transcript.map((text, index) => (
             <div
-              key={index}
+              key={`transcript-${index}`}
               className="group bg-white/5 rounded-lg p-3 hover:bg-white/10 transition-colors cursor-pointer"
               onClick={() => handleCopy(text, index)}
             >
@@ -129,7 +140,11 @@ export function TranscriptPanel({
                   </p>
                 </div>
                 <button
-                  onClick={() => handleCopy(text, index)}
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCopy(text, index);
+                  }}
                   className="flex-shrink-0 p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-white/10 transition-all"
                   aria-label="复制"
                 >
@@ -144,11 +159,10 @@ export function TranscriptPanel({
           ))}
         </div>
 
-        {/* 底部统计 */}
         <div className="flex-shrink-0 p-3 border-t border-white/10 text-center text-xs text-white/50">
           共 {transcript.transcript.length} 段转录内容
         </div>
       </div>
     </div>
   );
-}
+});