fix: Canvas 内部分辨率不匹配导致画面变形 — 修复 ResizeObserver 未创建问题

根因：ResizeObserver useEffect 依赖数组为空 []，组件挂载时 canPlay=false
导致 canvas 未渲染、canvasRef 为 null，effect 直接 return 后永远不会重新执行，
canvas 内部分辨率停留在浏览器默认值 300×150（横屏 2:1），而 CSS 显示为竖屏容器。

修复：
- useEffect 依赖改为 [useWebCodecs, canPlay]，canPlay=true 时 canvas 已渲染，
  effect 重新执行并正确创建 ResizeObserver
- 创建 ResizeObserver 前立即通过 getBoundingClientRect 设置 canvas 初始像素分辨率，
  避免首帧使用默认 300×150 导致变形
- computeDrawRect 已正确基于 videoDimRef 做 letterbox 居中绘制，无需修改

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

@@ -250,9 +250,17 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   // ── Canvas ResizeObserver ──
   const canvasContainerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
+    if (!useWebCodecs || !canPlay) return
     const container = canvasContainerRef.current
     const canvas = canvasRef.current
     if (!container || !canvas) return
+    // 立即设置一次 canvas 像素分辨率，避免默认 300×150 导致首帧变形
+    const initRect = container.getBoundingClientRect()
+    if (initRect.width > 0 && initRect.height > 0) {
+      const dpr = window.devicePixelRatio || 1
+      canvas.width = initRect.width * dpr
+      canvas.height = initRect.height * dpr
+    }
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect
@@ -264,7 +272,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     })
     ro.observe(container)
     return () => ro.disconnect()
-  }, [])
+  }, [useWebCodecs, canPlay])
 
   // ── 未就绪 ──
   if (!ready || !assets.length) {