From 830c3c3b18839631df6311adb64b48a713ff9440 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Mon, 7 Sep 2026 16:04:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Step5=E5=8D=A1=E7=89=87=E9=BB=91?=
 =?UTF-8?q?=E8=BE=B9+=E7=BC=A9=E6=94=BE=20&=20=E9=85=8D=E9=9F=B3=E6=97=B6?=
 =?UTF-8?q?=E9=95=BF=E5=AF=B9=E9=BD=90=E7=BA=B3=E5=85=A5=E8=BD=AC=E5=9C=BA?=
 =?UTF-8?q?=E6=97=B6=E9=95=BF=20(#1756)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复-前端1: Step5确认生成步骤视频卡片黑边+占比过大
- generate.css: .xx-batch-gen-grid 改为 minmax(160px,180px) 与Step4一致
- generate.css: .xx-batch-gen-card background 改 transparent
- BatchGenerationGrid.tsx: 视频容器 background transparent, padding 0
- BatchGenerationGrid.tsx: video objectFit cover 填满卡片

修复-前端2: 配音时长对齐纳入转场时长
- FrontendPreviewPlayer.tsx: rawClipsDuration 计算包含 transition_duration
- speedFactor = (clips时长+转场时长) / 配音时长
---
 .../pages/generate/components/BatchGenerationGrid.tsx  | 10 +++++-----
 .../generate/components/FrontendPreviewPlayer.tsx      |  6 +++---
 apps/web/src/pages/generate/generate.css               |  9 +++++----
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx b/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
index 651b93598..4e370d279 100644
--- a/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
+++ b/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
@@ -73,21 +73,21 @@ const BatchGenerationGrid: React.FC<BatchGenerationGridProps> = ({
                       display: "flex",
                       justifyContent: "center",
                       alignItems: "center",
-                      background: "#000",
+                      background: "transparent",
                       borderRadius: 8,
-                      padding: 8,
+                      padding: 0,
                     }}
                   >
                     <video
                       src={video.download_url || video.file_url}
                       controls
                       style={{
-                        width: "auto",
-                        maxWidth: "100%",
+                        width: "100%",
                         maxHeight: "70vh",
                         aspectRatio: "9 / 16",
+                        objectFit: "cover",
                         borderRadius: 4,
-                        background: "#000",
+                        background: "transparent",
                       }}
                       poster={video.thumbnail_url}
                     />
diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 8077c0a2c..432861953 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -145,13 +145,13 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     }
   }, [voiceAudioUrl])
 
-  // 计算 clips 原始总时长
+  // #1756：clips 原始总时长 + 转场时长（后端等比分配配音时包含转场占位）
   const rawClipsDuration = useMemo(() => {
     if (!serverClips?.length) return 0
-    return serverClips.reduce((sum, c) => sum + (c.duration || 0), 0)
+    return serverClips.reduce((sum, c) => sum + (c.duration || 0) + (c.transition_duration || 0), 0)
   }, [serverClips])
 
-  // #1754：配音时长可用且与 clips 总时长偏差 > 5% 时，按比例调速
+  // #1754→#1756：配音时长可用且与 clips+转场 总时长偏差 > 5% 时，按比例调速
   const speedFactor = useMemo(() => {
     if (!voiceDuration || voiceDuration <= 0 || rawClipsDuration <= 0) return 1
     const ratio = rawClipsDuration / voiceDuration
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index f49a01b5d..feb343656 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -3404,15 +3404,16 @@
    ============================================================ */
 .xx-batch-gen-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
+  justify-content: center;
+  gap: 14px;
 }
 
 .xx-batch-gen-card {
   border: 1px solid var(--border-primary, #e2e8f0);
   border-radius: 12px;
   padding: 14px;
-  background: var(--bg-surface, #fff);
+  background: transparent;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -3480,6 +3481,6 @@
 /* ── 响应式：窄屏批量网格回退单列（.xx-canvas-grid 的窄屏限宽见网格定义处 #1741） ── */
 @media (max-width: 960px) {
   .xx-batch-gen-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 320px);
   }
 }
-- 
2.54.0