From 72f351d54f95c2a633ef24c83919ded3071b7ca1 Mon Sep 17 00:00:00 2001
From: seaislee1209 <seaislee129@gmail.com>
Date: Tue, 12 May 2026 18:17:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(records):=20=E8=A7=86=E9=A2=91=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87/=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97=E7=94=A8=20thumb?=
 =?UTF-8?q?nail=5Furl=20=E6=98=BE=E7=A4=BA=E9=A6=96=E5=B8=A7=20poster?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后端 GenerationRecord.thumbnail_url 字段早就被 tasks.py:_handle_completed (L109-111)
通过 ffmpeg 提取首帧 + 上传 TOS 填充,但只在 _serialize_task (生成页) 返回。
admin_records / team_records / profile_records 三个 view 都没回传,前端无从用。

后端:三个 records view 各加一行 'thumbnail_url': r.thumbnail_url or ''
前端:
- types/index.ts AdminRecord 加 thumbnail_url?: string
- 三处 <video> 加 poster={thumbnailUrl ? rewriteTosUrl(...) : undefined}
  - RecordDetailModal.tsx (消费记录详情)
  - VideoDetailModal.tsx (资产页/生成页详情)
  - GenerationCard.tsx (生成页卡片)

效果:卡片首屏直接显示首帧海报(几十 KB),不再等视频 metadata 加载完
才有视觉;hover 触发 v.play() 时再真正下载视频,UX 不变。
老记录 thumbnail_url='' 时 poster=undefined,行为同改前。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 backend/apps/generation/views.py         | 4 ++++
 web/src/components/GenerationCard.tsx    | 1 +
 web/src/components/RecordDetailModal.tsx | 1 +
 web/src/components/VideoDetailModal.tsx  | 1 +
 web/src/types/index.ts                   | 1 +
 5 files changed, 8 insertions(+)

diff --git a/backend/apps/generation/views.py b/backend/apps/generation/views.py
index 5b890f0..984053a 100644
--- a/backend/apps/generation/views.py
+++ b/backend/apps/generation/views.py
@@ -1819,6 +1819,7 @@ def admin_records_view(request):
             'seed': r.seed,
             'ark_task_id': r.ark_task_id or '',
             'result_url': r.result_url or '',
+            'thumbnail_url': r.thumbnail_url or '',
         })
 
     return Response({
@@ -1884,6 +1885,7 @@ def team_records_view(request):
             'seed': r.seed,
             'ark_task_id': r.ark_task_id or '',
             'result_url': r.result_url or '',
+            'thumbnail_url': r.thumbnail_url or '',
         })
 
     return Response({
@@ -2770,6 +2772,8 @@ def profile_records_view(request):
             'resolution': r.resolution,
             'status': r.status,
             'error_message': r.error_message or '',
+            'result_url': r.result_url or '',
+            'thumbnail_url': r.thumbnail_url or '',
         })
 
     return Response({
diff --git a/web/src/components/GenerationCard.tsx b/web/src/components/GenerationCard.tsx
index 95b2e20..37b5113 100644
--- a/web/src/components/GenerationCard.tsx
+++ b/web/src/components/GenerationCard.tsx
@@ -476,6 +476,7 @@ export function GenerationCard({ task, onOpenDetail }: Props) {
             <video
               ref={videoRef}
               src={rewriteTosUrl(task.resultUrl)}
+              poster={task.thumbnailUrl ? rewriteTosUrl(task.thumbnailUrl) : undefined}
               className={styles.resultMedia}
               loop
               preload="metadata"
diff --git a/web/src/components/RecordDetailModal.tsx b/web/src/components/RecordDetailModal.tsx
index f68cee9..a8deeae 100644
--- a/web/src/components/RecordDetailModal.tsx
+++ b/web/src/components/RecordDetailModal.tsx
@@ -121,6 +121,7 @@ function MediaArea({ record: r }: { record: AdminRecord }) {
       {r.status === 'completed' && r.result_url ? (
         <video
           src={rewriteTosUrl(r.result_url)}
+          poster={r.thumbnail_url ? rewriteTosUrl(r.thumbnail_url) : undefined}
           style={mediaVideo}
           controls
           preload="metadata"
diff --git a/web/src/components/VideoDetailModal.tsx b/web/src/components/VideoDetailModal.tsx
index 0e3b3f1..52d1358 100644
--- a/web/src/components/VideoDetailModal.tsx
+++ b/web/src/components/VideoDetailModal.tsx
@@ -303,6 +303,7 @@ export function VideoDetailModal({ task, onClose, onReEdit, onRegenerate, onDele
             <video
               ref={videoRef}
               src={rewriteTosUrl(task.resultUrl)}
+              poster={task.thumbnailUrl ? rewriteTosUrl(task.thumbnailUrl) : undefined}
               className={styles.video}
               onTimeUpdate={handleTimeUpdate}
               onLoadedMetadata={handleLoadedMetadata}
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 06ec2f4..c9b1ee1 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -218,6 +218,7 @@ export interface AdminRecord {
   seed?: number;
   ark_task_id?: string;
   result_url?: string;
+  thumbnail_url?: string;
 }
 
 export interface SystemSettings {