refactor: 用fontLoadedRef打破循环依赖

- draw回调通过ref读取字体状态，不依赖fontLoaded state
- drawVideoTitle/drawNoVideoTitle deps仅含[titleText, titleSettings]
- 字体effect显式调用draw（ref已同步更新，draw内部检查通过）
- 加eslint-disable解释原因

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 加载完成后重绘