fix: Step5卡片黑边+缩放 & 配音时长对齐纳入转场时长 (#1756)

修复-前端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时长+转场时长) / 配音时长

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}
                     />

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

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);
   }
 }