apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

@@ -75,24 +75,37 @@ function formatTime(seconds: number): string {
 function buildPlaybackSegments(
   assets: AssetItem[],
   serverClips?: EditPlanClip[],
+  /** #1754 前端兜底：配音时长≠clips 总时长时，按比例缩放每段播放时长并调速 */
+  speedFactor = 1,
 ): PlaybackSegment[] {
   if (!assets.length || !serverClips || serverClips.length === 0) return []
 
   const assetMap = new Map(assets.map((a) => [a.id, a]))
   const segments: PlaybackSegment[] = []
+  // speedFactor > 1 表示 clips 偏短需加速；< 1 表示 clips 偏长需减速
+  const invSpeed = speedFactor > 0 && Math.abs(speedFactor - 1) > 0.01 ? 1 / speedFactor : 1
   for (const clip of serverClips) {
     const asset = assetMap.get(clip.asset_id)
     if (!asset) continue
     const assetDuration = asset.duration || asset.metadata?.duration || 0
     const startTime = clip.start_time || 0
     // 片段时长以后端计划为准（配音时长等比分配）；素材时长仅用于兜底钳制边界
-    const clipDuration = clip.duration || 0
+    const rawClipDuration = clip.duration || 0
+    // #1754：按 speedFactor 缩放片段时长，使总时长匹配配音
+    const clipDuration = invSpeed !== 1 ? rawClipDuration * invSpeed : rawClipDuration
     const endTime =
       assetDuration > 0
         ? Math.min(startTime + clipDuration, assetDuration)
         : startTime + clipDuration
     const videoUrl = asset.file_url || asset.storage_key
-    segments.push({ assetId: asset.id, videoUrl, startTime, endTime, order: clip.order })
+    segments.push({
+      assetId: asset.id,
+      videoUrl,
+      startTime,
+      endTime,
+      order: clip.order,
+      playbackRate: invSpeed !== 1 ? speedFactor : undefined,
+    })
   }
   return segments.sort((a, b) => a.order - b.order)
 }
@@ -111,13 +124,50 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   activePlayToken = null,
   onPlayTokenChange,
 }) => {
-  const segments = useMemo(() => buildPlaybackSegments(assets, serverClips), [assets, serverClips])
+  // #1754：测量配音时长，计算缩放因子
+  const [voiceDuration, setVoiceDuration] = useState(0)
+  useEffect(() => {
+    if (!voiceAudioUrl) {
+      setVoiceDuration(0)
+      return
+    }
+    const audio = new Audio()
+    audio.preload = "metadata"
+    const onLoaded = () => {
+      if (audio.duration && isFinite(audio.duration)) {
+        setVoiceDuration(audio.duration)
+      }
+    }
+    audio.addEventListener("loadedmetadata", onLoaded)
+    audio.src = voiceAudioUrl
+    return () => {
+      audio.removeEventListener("loadedmetadata", onLoaded)
+    }
+  }, [voiceAudioUrl])
+
+  // 计算 clips 原始总时长
+  const rawClipsDuration = useMemo(() => {
+    if (!serverClips?.length) return 0
+    return serverClips.reduce((sum, c) => sum + (c.duration || 0), 0)
+  }, [serverClips])
+
+  // #1754：配音时长可用且与 clips 总时长偏差 > 5% 时，按比例调速
+  const speedFactor = useMemo(() => {
+    if (!voiceDuration || voiceDuration <= 0 || rawClipsDuration <= 0) return 1
+    const ratio = rawClipsDuration / voiceDuration
+    return Math.abs(ratio - 1) > 0.05 ? ratio : 1
+  }, [voiceDuration, rawClipsDuration])
+
+  const segments = useMemo(
+    () => buildPlaybackSegments(assets, serverClips, speedFactor),
+    [assets, serverClips, speedFactor],
+  )
   // 批量变体：标题文字取 variantTitle，样式仍由全局 titleSettings 控制
   const effectiveTitle = variantTitle ?? titleSettings?.title
 
   // ── ASS 坐标系参数（与后端 ass_subtitle_builder.py 一致） ──
-  const TITLE_MARGIN_TOP = 120
-  const TITLE_MARGIN_BOTTOM = 60
+  const TITLE_MARGIN_TOP = 180
+  const TITLE_MARGIN_BOTTOM = 100
   const TITLE_MARGIN_SIDE = 40
   const playRes = (() => {
     switch (videoRatio) {
@@ -554,7 +604,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         maxWidth: compact ? "100%" : 280,
         margin: compact ? 0 : "0 auto",
         aspectRatio: "9 / 16",
-        background: "#0a0a0a",
+        background: compact ? "transparent" : "#0a0a0a",
         borderRadius: compact ? 10 : 24,
         overflow: "hidden",
         boxShadow: compact
@@ -578,7 +628,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
             style={{
               width: "100%",
               height: "100%",
-              objectFit: "contain",
+              objectFit: "cover",
             }}
           />
         </div>
@@ -600,7 +650,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
               inset: 0,
               width: "100%",
               height: "100%",
-              objectFit: "contain",
+              objectFit: "cover",
               background: "#000",
               zIndex: 1,
               opacity: i === videoCurrentSegIdx ? 1 : 0,

apps/web/src/pages/generate/generate.css

@@ -3286,7 +3286,7 @@
    中屏自动回退 2 列，窄屏 1 列（见下方媒体查询）；卡片保持 9:16 比例不变形 */
 .xx-canvas-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
   justify-content: center;
   gap: 14px;
 }
@@ -3303,7 +3303,7 @@
   border: 2px solid var(--border-primary, #e2e8f0);
   border-radius: 12px;
   overflow: hidden;
-  background: #000;
+  background: transparent;
   transition: border-color 0.2s ease;
   min-width: 0;
 }

apps/web/src/pages/generate/hooks/useSegmentScheduler.ts

@@ -15,6 +15,8 @@ export interface PlaybackSegment {
   startTime: number
   endTime: number
   order: number
+  /** #1754 兜底：配音时长≠clips 总时长时按比例调速，1.0 = 原速 */
+  playbackRate?: number
 }
 
 export interface SegmentSchedulerState {
@@ -131,6 +133,11 @@ export function useSegmentScheduler(segments: PlaybackSegment[]): SegmentSchedul
       if (Math.abs(video.currentTime - localTime) > 0.05) {
         video.currentTime = localTime
       }
+      // #1754：按比例调速（配音时长≠clips 总时长时的前端兜底）
+      const rate = seg.playbackRate || 1
+      if (Math.abs(video.playbackRate - rate) > 0.01) {
+        video.playbackRate = rate
+      }
 
       segIdxRef.current = index
       setCurrentSegmentIndex(index)
@@ -242,6 +249,12 @@ export function useSegmentScheduler(segments: PlaybackSegment[]): SegmentSchedul
       video.currentTime = seg.startTime
     }
 
+    // #1754：调速
+    const rate = seg?.playbackRate || 1
+    if (Math.abs(video.playbackRate - rate) > 0.01) {
+      video.playbackRate = rate
+    }
+
     try {
       await video.play()
       setIsPlaying(true)