From 75e42002b5ca876adfa6b48fc6a99bf10701f4ea Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:16:31 +0800
Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=E7=B4=A0=E6=9D=90=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=B7=BB=E5=8A=A048x48=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/ManualMaterialList.tsx           | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 0225a338f..15825b189 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -32,6 +32,8 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
           {materials.items.map((m) => {
             const checked = selectedMaterials.includes(m.id)
+            const isVideo = m.mime_type.startsWith("video/")
+            const thumbSrc = m.thumbnail_url || (isVideo ? m.file_url : undefined)
             return (
               <label
                 key={m.id}
@@ -53,13 +55,45 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                   type="checkbox"
                   checked={checked}
                   onChange={() => onToggle(m.id)}
-                  style={{ accentColor: "var(--primary-color, #4f46e5)" }}
+                  style={{ accentColor: "var(--primary-color, #4f46e5)", flexShrink: 0 }}
                 />
+                {/* 缩略图预览 48×48 */}
+                <div
+                  style={{
+                    width: 48,
+                    height: 48,
+                    borderRadius: 6,
+                    overflow: "hidden",
+                    background: "#e2e8f0",
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {thumbSrc ? (
+                    <img
+                      src={thumbSrc}
+                      alt={m.name}
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                      }}
+                    />
+                  ) : (
+                    <span style={{ fontSize: 20, opacity: 0.5 }}>{isVideo ? "🎬" : "🎵"}</span>
+                  )}
+                </div>
                 <span
                   style={{
                     fontSize: 13,
                     color: "var(--text-primary)",
                     flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
                   }}
                 >
                   {m.name}
@@ -68,6 +102,7 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                   style={{
                     fontSize: 11,
                     color: "var(--text-tertiary, #94a3b8)",
+                    flexShrink: 0,
                   }}
                 >
                   {m.mime_type.split("/")[1].toUpperCase()}
-- 
2.54.0


From 69ccb7f15d44549b2028d1bcd74c9f70b3fa88cc Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:16:41 +0800
Subject: [PATCH 02/13] =?UTF-8?q?fix:=20Canvas=E6=A0=87=E9=A2=98=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E4=BF=AE=E5=A4=8D+=E5=AD=97=E4=BD=93=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=AD=89=E5=BE=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用video元素实际渲染尺寸(clientWidth/clientHeight)替代容器尺寸
- 添加document.fonts.ready等待字体加载后再绘制
- 字体加载前跳过绘制避免measureText用fallback字体计算
---
 .../generate/components/PreviewVideoPanel.tsx | 63 +++++++++++++++----
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 009bb11bc..4dd701a95 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -3,7 +3,7 @@
  * Step3 生成预览后常驻显示预览视频
  * Step4+ 用 Canvas 绘制标题预览（替代 CSS overlay，与 ASS 渲染行为一致）
  */
-import React, { useRef, useEffect, useCallback } from "react"
+import React, { useRef, useEffect, useCallback, useState } from "react"
 import { PlayCircleOutlined, LoadingOutlined } from "@ant-design/icons"
 import type { PreviewResult, PreviewStatus } from "../hooks/useStep3Preview"
 import type { TitleSettings } from "../types"
@@ -46,8 +46,8 @@ function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number)
 /**
  * 在 canvas 上绘制标题文字（含描边/阴影/多行居中）
  * @param ctx canvas 上下文
- * @param canvasWidth canvas CSS 宽度
- * @param canvasHeight canvas CSS 高度
+ * @param canvasWidth canvas CSS 宽度（绘制区域宽度）
+ * @param canvasHeight canvas CSS 高度（绘制区域高度）
  * @param text 标题文字
  * @param settings 标题样式
  * @param paddingX 左右边距（px），与 ASS 的 MarginL/MarginR 对应
@@ -128,7 +128,7 @@ function drawTitleOnCanvas(
       break
   }
 
-  // 逐行绘制
+  // 逐行绘制（水平居中于绘制区域）
   const x = w / 2
   lines.forEach((line, i) => {
     const y = startY + i * lineHeight
@@ -162,13 +162,17 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   const isError = previewStatus === "error"
   const showTitlePreview = !!titleSettings
 
-  // video 模式 canvas ref
+  // video 模式 refs
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
-  // no-video 模式 canvas ref
+  const videoRef = useRef<HTMLVideoElement>(null)
+  // no-video 模式 refs
   const noVideoCanvasRef = useRef<HTMLCanvasElement>(null)
   const noVideoContainerRef = useRef<HTMLDivElement>(null)
 
+  // 字体加载状态
+  const [fontLoaded, setFontLoaded] = useState(false)
+
   /** 在 video canvas 上绘制标题 */
   const drawVideoTitle = useCallback(() => {
     const canvas = canvasRef.current
@@ -180,17 +184,30 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     const rect = container.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return
 
+    // 字体加载前跳过（等 fontLoaded 触发重绘）
+    if (!fontLoaded) return
+
+    // 优先使用 video 元素实际渲染尺寸，确保标题居中于视频画面
+    // 而非容器尺寸（容器可能比 video 元素更宽/更高）
+    const videoEl = videoRef.current
+    let drawW = rect.width
+    let drawH = rect.height
+    if (videoEl && videoEl.clientWidth > 0 && videoEl.clientHeight > 0) {
+      drawW = videoEl.clientWidth
+      drawH = videoEl.clientHeight
+    }
+
     drawTitleOnCanvas(
       ctx,
-      rect.width,
-      rect.height,
+      drawW,
+      drawH,
       titleText || "",
       titleSettings,
       40,
       titleSettings.position,
       60,
     )
-  }, [titleText, titleSettings])
+  }, [titleText, titleSettings, fontLoaded])
 
   /** 在 no-video canvas 上绘制标题 */
   const drawNoVideoTitle = useCallback(() => {
@@ -203,6 +220,9 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     const rect = container.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return
 
+    // 字体加载前跳过
+    if (!fontLoaded) return
+
     // no-video 容器较窄，字号缩小 + 减少边距
     drawTitleOnCanvas(
       ctx,
@@ -215,7 +235,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       30,
       0.75,
     )
-  }, [titleText, titleSettings])
+  }, [titleText, titleSettings, fontLoaded])
 
   // video 模式：ResizeObserver 监听容器尺寸变化 → 重绘
   useEffect(() => {
@@ -227,7 +247,6 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       drawVideoTitle()
     })
     observer.observe(container)
-    // 初始绘制（延迟一帧等容器渲染完成）
     requestAnimationFrame(drawVideoTitle)
 
     return () => observer.disconnect()
@@ -248,6 +267,22 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     return () => observer.disconnect()
   }, [showTitlePreview, hasPreview, isError, drawNoVideoTitle])
 
+  // 字体加载完成后重绘（Canvas measureText 依赖字体已加载）
+  useEffect(() => {
+    if (!showTitlePreview) return
+    let cancelled = false
+    document.fonts.ready.then(() => {
+      if (cancelled) return
+      // 短暂延迟确保字体完全可用
+      setTimeout(() => {
+        if (!cancelled) setFontLoaded(true)
+      }, 50)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [showTitlePreview])
+
   // video 加载完成后重绘
   const handleVideoLoaded = useCallback(() => {
     if (showTitlePreview) {
@@ -285,7 +320,10 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
             </div>
           </div>
           <div className="xx-preview-progress-bar-wrap">
-            <div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
+            <div
+              className="xx-preview-progress-fill"
+              style={{ width: `${progress}%` }}
+            />
           </div>
         </div>
       )}
@@ -310,6 +348,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         <div ref={containerRef} style={{ position: "relative" }}>
           <div className="xx-preview-video">
             <video
+              ref={videoRef}
               src={previewResult.videoUrl}
               controls
               preload="metadata"
-- 
2.54.0


From 44977b943fd1b86415a40312cdd218e4022bbc4b Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:20:05 +0800
Subject: [PATCH 03/13] style: prettier format PreviewVideoPanel

---
 apps/web/src/pages/generate/components/PreviewVideoPanel.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 4dd701a95..caebb57b9 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -320,10 +320,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
             </div>
           </div>
           <div className="xx-preview-progress-bar-wrap">
-            <div
-              className="xx-preview-progress-fill"
-              style={{ width: `${progress}%` }}
-            />
+            <div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
           </div>
         </div>
       )}
-- 
2.54.0


From 1caa1296d9583099ec37a078105e27f105f0d282 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:24:12 +0800
Subject: [PATCH 04/13] =?UTF-8?q?fix:=20mime=5Ftype=E5=8F=AF=E9=80=89?=
 =?UTF-8?q?=E9=93=BE=E9=98=B2=E5=BE=A1+=E7=BC=A9=E7=95=A5=E5=9B=BEsrc?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI Code Review阻塞问题修复：
- mime_type使用?.可选链避免null/undefined崩溃
- 类型标签split链加?.和默认值
- thumbSrc已有三元条件渲染
---
 .../pages/generate/components/material/ManualMaterialList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 15825b189..61a8bd6ba 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -32,7 +32,7 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
           {materials.items.map((m) => {
             const checked = selectedMaterials.includes(m.id)
-            const isVideo = m.mime_type.startsWith("video/")
+            const isVideo = m.mime_type?.startsWith("video/") ?? false
             const thumbSrc = m.thumbnail_url || (isVideo ? m.file_url : undefined)
             return (
               <label
@@ -105,7 +105,7 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                     flexShrink: 0,
                   }}
                 >
-                  {m.mime_type.split("/")[1].toUpperCase()}
+                  {m.mime_type?.split("/")?.[1]?.toUpperCase() ?? "FILE"}
                 </span>
               </label>
             )
-- 
2.54.0


From 3966f91398370d39f0641ead03ea8743e48cd83d Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:29:10 +0800
Subject: [PATCH 05/13] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4file=5Furl?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=BAimg=20src=E5=9B=9E=E9=80=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

file_url是视频/音频文件，<img>无法渲染。
仅使用thumbnail_url（静态截图），无缩略图时显示emoji fallback
---
 .../pages/generate/components/material/ManualMaterialList.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 61a8bd6ba..112bddaee 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -33,7 +33,9 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
           {materials.items.map((m) => {
             const checked = selectedMaterials.includes(m.id)
             const isVideo = m.mime_type?.startsWith("video/") ?? false
-            const thumbSrc = m.thumbnail_url || (isVideo ? m.file_url : undefined)
+            // thumbnail_url 是静态截图，可直接用于 <img>
+            // file_url 是视频/音频文件本身，<img> 无法渲染，不能作为 src 回退
+            const thumbSrc = m.thumbnail_url || undefined
             return (
               <label
                 key={m.id}
-- 
2.54.0


From 48f94fbc68bf7cbb418fad8319fde3c8787bf9b9 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:32:40 +0800
Subject: [PATCH 06/13] =?UTF-8?q?fix:=20=E5=AD=97=E4=BD=93=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=E6=97=B6=E9=87=8D=E7=BD=AEfontLoaded=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=B9=B6=E9=87=8D=E6=96=B0=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- titleSettings变更时setFontLoaded(false)重置
- 使用document.fonts.check(fontSpec)精确检测目标字体
- 字体未加载时用document.fonts.load等待后重绘
- 移除setTimeout魔法数字，改用requestAnimationFrame
---
 .../generate/components/PreviewVideoPanel.tsx | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index caebb57b9..ea74a1621 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -267,21 +267,50 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     return () => observer.disconnect()
   }, [showTitlePreview, hasPreview, isError, drawNoVideoTitle])
 
-  // 字体加载完成后重绘（Canvas measureText 依赖字体已加载）
+  // 字体加载检测：当字体变更时重新检测，确保 measureText 使用正确字体计算
   useEffect(() => {
-    if (!showTitlePreview) return
+    if (!showTitlePreview || !titleSettings) {
+      setFontLoaded(false)
+      return
+    }
     let cancelled = false
-    document.fonts.ready.then(() => {
-      if (cancelled) return
-      // 短暂延迟确保字体完全可用
-      setTimeout(() => {
-        if (!cancelled) setFontLoaded(true)
-      }, 50)
-    })
+    setFontLoaded(false) // 字体变更时重置，防止使用 fallback 字体绘制
+
+    const fontWeight = titleSettings.bold ? "bold" : ""
+    const fontStyle = titleSettings.italic ? "italic" : ""
+    const fontSpec =
+      `${fontStyle} ${fontWeight} ${titleSettings.size}px "${titleSettings.font}"`.trim()
+
+    // 优先用 document.fonts.check 精确检测目标字体
+    if (document.fonts.check(fontSpec)) {
+      setFontLoaded(true)
+      return
+    }
+
+    // 字体尚未加载，等待后重试
+    document.fonts
+      .load(fontSpec)
+      .then(() => {
+        if (!cancelled) {
+          // requestAnimationFrame 确保在下一帧绘制前字体已可用
+          requestAnimationFrame(() => {
+            if (!cancelled) setFontLoaded(true)
+          })
+        }
+      })
+      .catch(() => {
+        // load 失败时回退到 fonts.ready
+        if (!cancelled) {
+          document.fonts.ready.then(() => {
+            if (!cancelled) setFontLoaded(true)
+          })
+        }
+      })
+
     return () => {
       cancelled = true
     }
-  }, [showTitlePreview])
+  }, [showTitlePreview, titleSettings])
 
   // video 加载完成后重绘
   const handleVideoLoaded = useCallback(() => {
-- 
2.54.0


From fc6b901cff64d9cc6eeed6ec086669823ad1b1f4 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:39:18 +0800
Subject: [PATCH 07/13] =?UTF-8?q?fix:=20=E5=AD=97=E4=BD=93=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=90=8E=E6=98=BE=E5=BC=8F=E8=A7=A6=E5=8F=91Canvas?=
 =?UTF-8?q?=E9=87=8D=E7=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

字体就绪后立即调用drawVideoTitle/drawNoVideoTitle
确保不依赖ResizeObserver才触发绘制
---
 .../generate/components/PreviewVideoPanel.tsx | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index ea74a1621..04e6a66f0 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -284,6 +284,13 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     // 优先用 document.fonts.check 精确检测目标字体
     if (document.fonts.check(fontSpec)) {
       setFontLoaded(true)
+      // 字体已就绪，立即触发重绘
+      requestAnimationFrame(() => {
+        if (!cancelled) {
+          drawVideoTitle()
+          drawNoVideoTitle()
+        }
+      })
       return
     }
 
@@ -292,17 +299,24 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       .load(fontSpec)
       .then(() => {
         if (!cancelled) {
-          // requestAnimationFrame 确保在下一帧绘制前字体已可用
           requestAnimationFrame(() => {
-            if (!cancelled) setFontLoaded(true)
+            if (!cancelled) {
+              setFontLoaded(true)
+              // 字体加载完成，显式触发重绘
+              drawVideoTitle()
+              drawNoVideoTitle()
+            }
           })
         }
       })
       .catch(() => {
-        // load 失败时回退到 fonts.ready
         if (!cancelled) {
           document.fonts.ready.then(() => {
-            if (!cancelled) setFontLoaded(true)
+            if (!cancelled) {
+              setFontLoaded(true)
+              drawVideoTitle()
+              drawNoVideoTitle()
+            }
           })
         }
       })
-- 
2.54.0


From ec809d9b3f3def0680bb773f8446d22f123ca75a Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:43:33 +0800
Subject: [PATCH 08/13] fix: eslint-disable exhaustive-deps for font-loading
 effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

避免 drawVideoTitle/drawNoVideoTitle 加入deps导致循环重绘
---
 apps/web/src/pages/generate/components/PreviewVideoPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 04e6a66f0..95ad61409 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -268,6 +268,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   }, [showTitlePreview, hasPreview, isError, drawNoVideoTitle])
 
   // 字体加载检测：当字体变更时重新检测，确保 measureText 使用正确字体计算
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- drawVideoTitle/drawNoVideoTitle 在字体加载回调中显式调用以避免循环依赖
   useEffect(() => {
     if (!showTitlePreview || !titleSettings) {
       setFontLoaded(false)
-- 
2.54.0


From d4e39b95dc7d016d4627a7e0acca663228d31be3 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:48:02 +0800
Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20=E7=94=A8fontLoadedRef?=
 =?UTF-8?q?=E6=89=93=E7=A0=B4=E5=BE=AA=E7=8E=AF=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- draw回调通过ref读取字体状态，不依赖fontLoaded state
- drawVideoTitle/drawNoVideoTitle deps仅含[titleText, titleSettings]
- 字体effect显式调用draw（ref已同步更新，draw内部检查通过）
- 加eslint-disable解释原因
---
 .../generate/components/PreviewVideoPanel.tsx | 62 +++++++------------
 1 file changed, 24 insertions(+), 38 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 95ad61409..4b2a9bd65 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -170,11 +170,14 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   const noVideoCanvasRef = useRef<HTMLCanvasElement>(null)
   const noVideoContainerRef = useRef<HTMLDivElement>(null)
 
-  // 字体加载状态
+  // 字体加载状态（ref 同步更新供 draw 回调读取，state 变更不触发 draw 重建）
   const [fontLoaded, setFontLoaded] = useState(false)
+  const fontLoadedRef = useRef(false)
 
   /** 在 video canvas 上绘制标题 */
   const drawVideoTitle = useCallback(() => {
+    // 通过 ref 读取字体状态，避免 fontLoaded 进入依赖数组
+    if (!fontLoadedRef.current) return
     const canvas = canvasRef.current
     const container = containerRef.current
     if (!canvas || !container || !titleSettings) return
@@ -184,11 +187,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     const rect = container.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return
 
-    // 字体加载前跳过（等 fontLoaded 触发重绘）
-    if (!fontLoaded) return
-
     // 优先使用 video 元素实际渲染尺寸，确保标题居中于视频画面
-    // 而非容器尺寸（容器可能比 video 元素更宽/更高）
     const videoEl = videoRef.current
     let drawW = rect.width
     let drawH = rect.height
@@ -207,10 +206,11 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       titleSettings.position,
       60,
     )
-  }, [titleText, titleSettings, fontLoaded])
+  }, [titleText, titleSettings])
 
   /** 在 no-video canvas 上绘制标题 */
   const drawNoVideoTitle = useCallback(() => {
+    if (!fontLoadedRef.current) return
     const canvas = noVideoCanvasRef.current
     const container = noVideoContainerRef.current
     if (!canvas || !container || !titleSettings) return
@@ -220,9 +220,6 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     const rect = container.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return
 
-    // 字体加载前跳过
-    if (!fontLoaded) return
-
     // no-video 容器较窄，字号缩小 + 减少边距
     drawTitleOnCanvas(
       ctx,
@@ -235,7 +232,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       30,
       0.75,
     )
-  }, [titleText, titleSettings, fontLoaded])
+  }, [titleText, titleSettings])
 
   // video 模式：ResizeObserver 监听容器尺寸变化 → 重绘
   useEffect(() => {
@@ -267,64 +264,53 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     return () => observer.disconnect()
   }, [showTitlePreview, hasPreview, isError, drawNoVideoTitle])
 
-  // 字体加载检测：当字体变更时重新检测，确保 measureText 使用正确字体计算
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- drawVideoTitle/drawNoVideoTitle 在字体加载回调中显式调用以避免循环依赖
+  // 字体加载检测：字体变更时重新检测，确保 measureText 使用正确字体
   useEffect(() => {
     if (!showTitlePreview || !titleSettings) {
+      fontLoadedRef.current = false
       setFontLoaded(false)
       return
     }
     let cancelled = false
-    setFontLoaded(false) // 字体变更时重置，防止使用 fallback 字体绘制
+    fontLoadedRef.current = false
+    setFontLoaded(false)
 
     const fontWeight = titleSettings.bold ? "bold" : ""
     const fontStyle = titleSettings.italic ? "italic" : ""
     const fontSpec =
       `${fontStyle} ${fontWeight} ${titleSettings.size}px "${titleSettings.font}"`.trim()
 
-    // 优先用 document.fonts.check 精确检测目标字体
-    if (document.fonts.check(fontSpec)) {
+    const onFontReady = () => {
+      if (cancelled) return
+      fontLoadedRef.current = true
       setFontLoaded(true)
-      // 字体已就绪，立即触发重绘
+      // ref 已同步更新，显式触发重绘（draw 内部通过 ref 检查字体状态）
       requestAnimationFrame(() => {
         if (!cancelled) {
           drawVideoTitle()
           drawNoVideoTitle()
         }
       })
+    }
+
+    if (document.fonts.check(fontSpec)) {
+      onFontReady()
       return
     }
 
-    // 字体尚未加载，等待后重试
     document.fonts
       .load(fontSpec)
-      .then(() => {
-        if (!cancelled) {
-          requestAnimationFrame(() => {
-            if (!cancelled) {
-              setFontLoaded(true)
-              // 字体加载完成，显式触发重绘
-              drawVideoTitle()
-              drawNoVideoTitle()
-            }
-          })
-        }
-      })
+      .then(() => onFontReady())
       .catch(() => {
-        if (!cancelled) {
-          document.fonts.ready.then(() => {
-            if (!cancelled) {
-              setFontLoaded(true)
-              drawVideoTitle()
-              drawNoVideoTitle()
-            }
-          })
-        }
+        document.fonts.ready.then(() => onFontReady())
       })
 
     return () => {
       cancelled = true
     }
+    // drawVideoTitle/drawNoVideoTitle 通过 fontLoadedRef 读取字体状态，
+    // 不依赖 fontLoaded state，无需加入 deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showTitlePreview, titleSettings])
 
   // video 加载完成后重绘
-- 
2.54.0


From d5814ed9e951c55807459d92e258146f36fb8316 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:52:07 +0800
Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4unused=20fontLoa?=
 =?UTF-8?q?ded=20state=EF=BC=8C=E4=BB=85=E7=94=A8ref=E8=BF=BD=E8=B8=AA?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fontLoaded状态变量未被读取导致no-unused-vars错误。
改为纯ref方案：fontLoadedRef供draw回调同步读取。
---
 .../src/pages/generate/components/PreviewVideoPanel.tsx   | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 4b2a9bd65..4c67b5e63 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -3,7 +3,7 @@
  * Step3 生成预览后常驻显示预览视频
  * Step4+ 用 Canvas 绘制标题预览（替代 CSS overlay，与 ASS 渲染行为一致）
  */
-import React, { useRef, useEffect, useCallback, useState } from "react"
+import React, { useRef, useEffect, useCallback } from "react"
 import { PlayCircleOutlined, LoadingOutlined } from "@ant-design/icons"
 import type { PreviewResult, PreviewStatus } from "../hooks/useStep3Preview"
 import type { TitleSettings } from "../types"
@@ -170,8 +170,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   const noVideoCanvasRef = useRef<HTMLCanvasElement>(null)
   const noVideoContainerRef = useRef<HTMLDivElement>(null)
 
-  // 字体加载状态（ref 同步更新供 draw 回调读取，state 变更不触发 draw 重建）
-  const [fontLoaded, setFontLoaded] = useState(false)
+  // 字体加载状态（ref 供 draw 回调同步读取，无需 state 避免触发不必要的重渲染）
   const fontLoadedRef = useRef(false)
 
   /** 在 video canvas 上绘制标题 */
@@ -268,12 +267,10 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   useEffect(() => {
     if (!showTitlePreview || !titleSettings) {
       fontLoadedRef.current = false
-      setFontLoaded(false)
       return
     }
     let cancelled = false
     fontLoadedRef.current = false
-    setFontLoaded(false)
 
     const fontWeight = titleSettings.bold ? "bold" : ""
     const fontStyle = titleSettings.italic ? "italic" : ""
@@ -283,7 +280,6 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     const onFontReady = () => {
       if (cancelled) return
       fontLoadedRef.current = true
-      setFontLoaded(true)
       // ref 已同步更新，显式触发重绘（draw 内部通过 ref 检查字体状态）
       requestAnimationFrame(() => {
         if (!cancelled) {
-- 
2.54.0


From ff6f0b70f92a6fe4bf020c3fd0d62b2cf0ad0613 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:57:18 +0800
Subject: [PATCH 11/13] =?UTF-8?q?fix:=20Canvas=E6=A0=87=E9=A2=98=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=20-=20video=20offsetX=E8=A1=A5=E5=81=BF=20+=20?=
 =?UTF-8?q?=E9=97=AD=E5=8C=85=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- drawTitleOnCanvas新增offsetX参数补偿video offsetLeft
- drawVideoTitle传入videoEl.offsetLeft作为居中偏移
- 将drawVideoTitle/drawNoVideoTitle加入font-loading effect deps
- 移除eslint-disable，正确处理闭包依赖
- titleText变化时effect重新执行，使用最新回调
---
 .../pages/generate/components/PreviewVideoPanel.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 4c67b5e63..afe097426 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -54,6 +54,7 @@ function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number)
  * @param position "top" | "center" | "bottom"
  * @param topOffset 顶部/底部偏移量
  * @param fontSizeScale 字号缩放（no-video 模式下缩小）
+ * @param offsetX 绘制区域左边缘相对于 canvas 的偏移（用于 video 居中时补偿 offsetLeft）
  */
 function drawTitleOnCanvas(
   ctx: CanvasRenderingContext2D,
@@ -65,6 +66,7 @@ function drawTitleOnCanvas(
   position: string,
   topOffset: number,
   fontSizeScale = 1,
+  offsetX = 0,
 ) {
   const dpr = window.devicePixelRatio || 1
   const w = canvasWidth
@@ -128,8 +130,8 @@ function drawTitleOnCanvas(
       break
   }
 
-  // 逐行绘制（水平居中于绘制区域）
-  const x = w / 2
+  // 逐行绘制（offsetX 补偿 video 在容器内的居中偏移）
+  const x = offsetX + w / 2
   lines.forEach((line, i) => {
     const y = startY + i * lineHeight
     if (settings.stroke) ctx.strokeText(line, x, y)
@@ -204,6 +206,8 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       40,
       titleSettings.position,
       60,
+      1,
+      videoEl ? videoEl.offsetLeft : 0,
     )
   }, [titleText, titleSettings])
 
@@ -304,10 +308,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
     return () => {
       cancelled = true
     }
-    // drawVideoTitle/drawNoVideoTitle 通过 fontLoadedRef 读取字体状态，
-    // 不依赖 fontLoaded state，无需加入 deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showTitlePreview, titleSettings])
+  }, [showTitlePreview, titleSettings, drawVideoTitle, drawNoVideoTitle])
 
   // video 加载完成后重绘
   const handleVideoLoaded = useCallback(() => {
-- 
2.54.0


From 55a7cd6088f70a5b20552f3cf8c6f1bca521c5c0 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 11:21:15 +0800
Subject: [PATCH 12/13] =?UTF-8?q?feat:=20=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=A4=B1=E8=B4=A5=E6=97=B6=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?emoji=20fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/ManualMaterialList.tsx           | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 112bddaee..3fa20a904 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -82,9 +82,24 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                         height: "100%",
                         objectFit: "cover",
                       }}
+                      onError={(e) => {
+                        const target = e.target as HTMLImageElement
+                        target.style.display = "none"
+                        const fallback = target.nextElementSibling as HTMLElement | null
+                        if (fallback) fallback.style.display = "flex"
+                      }}
                     />
-                  ) : (
-                    <span style={{ fontSize: 20, opacity: 0.5 }}>{isVideo ? "🎬" : "🎵"}</span>
+                  ) : null}
+                  {!thumbSrc && (
+                    <span style={{ fontSize: 20, opacity: 0.5, display: "flex" }}>
+                      {isVideo ? "🎬" : "🎵"}
+                    </span>
+                  )}
+                  {/* img onError 时显示的 fallback（初始隐藏） */}
+                  {thumbSrc && (
+                    <span style={{ fontSize: 20, opacity: 0.5, display: "none" }}>
+                      {isVideo ? "🎬" : "🎵"}
+                    </span>
                   )}
                 </div>
                 <span
-- 
2.54.0


From c8ac02759dbd8b294791a4c297b035653abd3d7e Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 11:21:16 +0800
Subject: [PATCH 13/13] =?UTF-8?q?fix:=20Canvas=E6=A0=87=E9=A2=98=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E5=A2=9E=E5=8A=A0offsetY=E8=A1=A5=E5=81=BFvideo?=
 =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=81=8F=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/generate/components/PreviewVideoPanel.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index afe097426..d02fd88a3 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -55,6 +55,7 @@ function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number)
  * @param topOffset 顶部/底部偏移量
  * @param fontSizeScale 字号缩放（no-video 模式下缩小）
  * @param offsetX 绘制区域左边缘相对于 canvas 的偏移（用于 video 居中时补偿 offsetLeft）
+ * @param offsetY 绘制区域上边缘相对于 canvas 的偏移（用于 video 居中时补偿 offsetTop）
  */
 function drawTitleOnCanvas(
   ctx: CanvasRenderingContext2D,
@@ -67,6 +68,7 @@ function drawTitleOnCanvas(
   topOffset: number,
   fontSizeScale = 1,
   offsetX = 0,
+  offsetY = 0,
 ) {
   const dpr = window.devicePixelRatio || 1
   const w = canvasWidth
@@ -130,10 +132,10 @@ function drawTitleOnCanvas(
       break
   }
 
-  // 逐行绘制（offsetX 补偿 video 在容器内的居中偏移）
+  // 逐行绘制（offsetX/offsetY 补偿 video 在容器内的居中偏移）
   const x = offsetX + w / 2
   lines.forEach((line, i) => {
-    const y = startY + i * lineHeight
+    const y = offsetY + startY + i * lineHeight
     if (settings.stroke) ctx.strokeText(line, x, y)
     ctx.fillText(line, x, y)
   })
@@ -208,6 +210,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       60,
       1,
       videoEl ? videoEl.offsetLeft : 0,
+      videoEl ? videoEl.offsetTop : 0,
     )
   }, [titleText, titleSettings])
 
-- 
2.54.0