apps/web/src/pages/generate/GeneratePage.tsx

@@ -12,10 +12,7 @@
 import React, { useState, useMemo } from "react"
 import { Modal, message } from "antd"
 import { useNavigate } from "react-router-dom"
-import { useQuery } from "@tanstack/react-query"
 import type { VoiceClone } from "@/api/voice-clone"
-import { getAssetsByKind } from "@/api/assets/assets"
-import type { AssetItem } from "@/api/assets/types"
 import { useCloneProgress } from "@/hooks/useCloneProgress"
 import CloneModal from "@/components/voice/CloneModal"
 import GenerateHeader from "./components/GenerateHeader"
@@ -74,20 +71,6 @@ const GeneratePage: React.FC = () => {
     setPreviewModalOpen,
   } = formState
 
-  /* ── 查询视频素材，用于 Step4 标题预览背景 ── */
-  const { data: videoAssets = [] } = useQuery({
-    queryKey: ["generate-video-assets"],
-    queryFn: () => getAssetsByKind("video", { limit: 50 }),
-  })
-
-  // 获取第一个选中素材的 URL
-  const sourceVideoUrl = useMemo(() => {
-    const firstId = selectedMaterials[0]
-    if (!firstId) return undefined
-    const asset = videoAssets.find((a: AssetItem) => a.id === firstId)
-    return asset?.file_url
-  }, [selectedMaterials, videoAssets])
-
   /* ── 克隆声音 ── */
   const { clones: clonedVoices, addClone, hasProcessing } = useCloneProgress()
 
@@ -252,7 +235,7 @@ const GeneratePage: React.FC = () => {
 
         {/* ════ 右侧：预览 + 生成结果 ════ */}
         <div className="xx-generate-right-col">
-          {/* 预览视频面板（Step4+ 显示，Step4 显示标题预览叠加，Step5+ 仅视频） */}
+          {/* 预览视频面板（Step4+ 显示） */}
           {currentStep >= 4 && (
             <PreviewVideoPanel
               previewStatus={step5Preview.previewStatus}
@@ -261,14 +244,8 @@ const GeneratePage: React.FC = () => {
               progress={step5Preview.progress}
               videoRatio={videoRatio}
               onRegenerate={step5Preview.regeneratePreview}
-              titleText={titleSettings.title}
-              titleSettings={titleSettings}
-              showTitlePreview={currentStep === 4}
-              sourceVideoUrl={sourceVideoUrl}
             />
           )}
-
-          {/* 正式生成结果（Step6+ 才显示） */}
           {currentStep >= 6 && (
             <GenerateResultPanel
               generated={generated}

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

@@ -1,23 +1,16 @@
 /**
  * 右侧预览视频面板
- * Step4+ 显示预览视频面板
- * Step4: Canvas 绘制标题预览叠加（以视频分辨率绘制，与后端 ASS 一致）
- * Step5+: 仅显示后端生成的预览视频（标题已由 FFmpeg 烧录）
+ * Step4+: 显示预览视频面板
+ * Step5+: 显示后端生成的预览视频（标题已由 FFmpeg 烧录）
  *
- * 设计说明：标题预览仅在有视频时显示（叠加在视频画面上方）。
- * 无视频状态（idle/loading/error）下不再单独显示标题预览，这是有意为之的设计简化。
- *
- * Canvas 坐标一致性：
- * Canvas 内部以目标视频分辨率（由 videoRatio 推算）绘制，
- * CSS 缩放至视频显示区域大小，确保 font_size / margin / position
- * 与后端 ASS 渲染完全对齐。
+ * 设计说明：
+ * - Step4（标题设置页）：右侧显示空状态提示，引导用户输入标题
+ * - Step5（预览生成页）：显示后端返回的预览视频
+ * - Canvas 预览已删除（统一由后端 FFmpeg 渲染标题）
  */
-import React, { useRef, useEffect, useCallback } from "react"
+import React from "react"
 import { PlayCircleOutlined, LoadingOutlined } from "@ant-design/icons"
 import type { PreviewResult, PreviewStatus } from "../hooks/useStep5Preview"
-import type { TitleSettings } from "../types"
-import { drawTitleOnCanvas, calculateVideoDimensions } from "../utils/drawTitleOnCanvas"
-import TitlePreviewCanvas from "./title/TitlePreviewCanvas"
 
 interface PreviewVideoPanelProps {
   previewStatus: PreviewStatus
@@ -26,14 +19,6 @@ interface PreviewVideoPanelProps {
   progress: number
   videoRatio: string
   onRegenerate: () => void
-  /** 标题文字 */
-  titleText?: string
-  /** 标题样式设置 */
-  titleSettings?: TitleSettings
-  /** Step4 标题预览模式 */
-  showTitlePreview?: boolean
-  /** 素材视频 URL（用于 Step4 标题预览背景） */
-  sourceVideoUrl?: string
 }
 
 /* ── 组件 ── */
@@ -45,172 +30,21 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   progress,
   videoRatio,
   onRegenerate,
-  titleText,
-  titleSettings,
-  showTitlePreview,
-  sourceVideoUrl,
 }) => {
   const hasPreview = previewStatus === "ready" && previewResult
   const isLoading = previewStatus === "pending" || previewStatus === "generating"
   const isError = previewStatus === "error"
   const videoAspectStyle = { aspectRatio: (videoRatio || "16:9").replace(":", "/") }
 
-  // video 模式 refs
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  // 字体加载状态（ref 供 draw 回调同步读取，无需 state 避免触发不必要的重渲染）
-  const fontLoadedRef = useRef(false)
-
-  // 根据视频比例计算目标渲染分辨率（与后端一致）
-  const { width: videoWidth, height: videoHeight } = calculateVideoDimensions(videoRatio || "16:9")
-
-  /** 在 video canvas 上绘制标题（以视频分辨率绘制） */
-  const drawVideoTitle = useCallback(() => {
-    // 通过 ref 读取字体状态，避免 fontLoaded 进入依赖数组
-    if (!fontLoadedRef.current) return
-    const canvas = canvasRef.current
-    const container = containerRef.current
-    if (!canvas || !container || !titleSettings) return
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
-
-    const containerRect = container.getBoundingClientRect()
-    if (containerRect.width <= 0 || containerRect.height <= 0) return
-
-    // 使用 video 元素的 getBoundingClientRect 获取实际渲染尺寸和位置
-    const videoEl = videoRef.current
-    let displayW = containerRect.width
-    let displayH = containerRect.height
-    let offsetX = 0
-    let offsetY = 0
-
-    if (videoEl && videoEl.clientWidth > 0 && videoEl.clientHeight > 0) {
-      const videoRect = videoEl.getBoundingClientRect()
-      displayW = videoRect.width
-      displayH = videoRect.height
-      offsetX = videoRect.left - containerRect.left
-      offsetY = videoRect.top - containerRect.top
-    }
-
-    // 更新 Canvas CSS 位置和尺寸，使其与视频实际渲染区域完全对齐
-    canvas.style.left = `${offsetX}px`
-    canvas.style.top = `${offsetY}px`
-    canvas.style.width = `${displayW}px`
-    canvas.style.height = `${displayH}px`
-
-    // 以视频分辨率作为绘制坐标系（与后端 ASS 一致）
-    drawTitleOnCanvas(
-      ctx,
-      displayW,
-      displayH,
-      titleText || "",
-      titleSettings,
-      40,
-      titleSettings.position,
-      60,
-      videoWidth,
-      videoHeight,
-    )
-  }, [titleText, titleSettings, videoWidth, videoHeight])
-
-  // video 模式：ResizeObserver 监听容器尺寸变化 → 重绘
-  useEffect(() => {
-    if (!showTitlePreview || !hasPreview) return
-    const container = containerRef.current
-    if (!container) return
-
-    const observer = new ResizeObserver(() => {
-      drawVideoTitle()
-    })
-    observer.observe(container)
-    requestAnimationFrame(drawVideoTitle)
-
-    return () => observer.disconnect()
-  }, [showTitlePreview, hasPreview, drawVideoTitle])
-
-  // 字体加载检测：字体变更时重新检测，确保 measureText 使用正确字体
-  useEffect(() => {
-    if (!showTitlePreview || !titleSettings) {
-      fontLoadedRef.current = false
-      return
-    }
-    let cancelled = false
-    fontLoadedRef.current = false
-
-    const fontWeight = titleSettings.bold ? "bold" : ""
-    const fontStyle = titleSettings.italic ? "italic" : ""
-    const fontSpec =
-      `${fontStyle} ${fontWeight} ${titleSettings.size}px "${titleSettings.font}"`.trim()
-
-    const onFontReady = () => {
-      if (cancelled) return
-      fontLoadedRef.current = true
-      // ref 已同步更新，显式触发重绘（draw 内部通过 ref 检查字体状态）
-      requestAnimationFrame(() => {
-        if (!cancelled) {
-          drawVideoTitle()
-        }
-      })
-    }
-
-    if (document.fonts.check(fontSpec)) {
-      onFontReady()
-      return
-    }
-
-    document.fonts
-      .load(fontSpec)
-      .then(() => onFontReady())
-      .catch(() => {
-        document.fonts.ready.then(() => onFontReady())
-      })
-
-    return () => {
-      cancelled = true
-    }
-  }, [showTitlePreview, titleSettings, drawVideoTitle])
-
-  // video 加载完成后重绘
-  const handleVideoLoaded = useCallback(() => {
-    if (showTitlePreview) {
-      requestAnimationFrame(drawVideoTitle)
-    }
-  }, [showTitlePreview, drawVideoTitle])
-
   return (
     <div className="xx-generate-preview">
       <div className="xx-preview-header">
-        <h3>{showTitlePreview && !hasPreview ? "标题预览" : "预览视频"}</h3>
-        {hasPreview && !showTitlePreview && <span className="xx-preview-badge">480p 预览版</span>}
+        <h3>预览视频</h3>
+        {hasPreview && <span className="xx-preview-badge">480p 预览版</span>}
       </div>
 
-      {/* Step4 标题预览模式 */}
-      {showTitlePreview && titleSettings && titleText && (
-        <div style={{ padding: "0 16px 16px" }}>
-          <TitlePreviewCanvas
-            titleText={titleText}
-            titleSettings={titleSettings}
-            videoRatio="9:16"
-            sourceVideoUrl={sourceVideoUrl}
-          />
-        </div>
-      )}
-
-      {/* Step4 但无标题时的空状态 */}
-      {showTitlePreview && (!titleText || !titleSettings) && (
-        <div className="xx-preview-empty">
-          <PlayCircleOutlined
-            style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
-          />
-          <p className="xx-preview-empty-title">请输入标题</p>
-          <p className="xx-preview-empty-desc">在左侧设置标题后，这里会实时预览效果</p>
-        </div>
-      )}
-
-      {/* 空状态：还没生成预览（非 Step4 模式） */}
-      {!showTitlePreview && previewStatus === "idle" && (
+      {/* 空状态：还没生成预览 */}
+      {previewStatus === "idle" && (
         <div className="xx-preview-empty">
           <PlayCircleOutlined
             style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
@@ -220,8 +54,8 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         </div>
       )}
 
-      {/* 生成中（非 Step4 模式） */}
-      {!showTitlePreview && isLoading && (
+      {/* 生成中 */}
+      {isLoading && (
         <div className="xx-preview-loading-panel">
           <div className="xx-preview-video" style={videoAspectStyle}>
             <div className="xx-preview-loading-center">
@@ -237,8 +71,8 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         </div>
       )}
 
-      {/* 生成失败（非 Step4 模式） */}
-      {!showTitlePreview && isError && (
+      {/* 生成失败 */}
+      {isError && (
         <div className="xx-preview-error-panel">
           <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
             <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
@@ -252,54 +86,32 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         </div>
       )}
 
-      {/* 预览成功 + Canvas 标题叠加 */}
+      {/* 预览成功 */}
       {hasPreview && (
-        <div ref={containerRef} style={{ position: "relative" }}>
+        <>
           <div className="xx-preview-video" style={videoAspectStyle}>
-            <video
-              ref={videoRef}
-              src={previewResult.videoUrl}
-              controls
-              preload="metadata"
-              onLoadedMetadata={handleVideoLoaded}
-            />
+            <video src={previewResult.videoUrl} controls preload="metadata" />
           </div>
-          {showTitlePreview && (
-            <canvas
-              ref={canvasRef}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                zIndex: 1,
-                pointerEvents: "none",
-              }}
-            />
-          )}
-        </div>
-      )}
-
-      {/* 预览信息（非 Step4 模式） */}
-      {!showTitlePreview && hasPreview && previewResult && (
-        <div className="xx-preview-info">
-          <div className="xx-preview-info-row">
-            <span>时长</span>
-            <span>
-              {(typeof previewResult.duration === "number" ? previewResult.duration : 0).toFixed(1)}{" "}
-              秒
-            </span>
+          <div className="xx-preview-info">
+            <div className="xx-preview-info-row">
+              <span>时长</span>
+              <span>
+                {(typeof previewResult.duration === "number" ? previewResult.duration : 0).toFixed(
+                  1,
+                )}{" "}
+                秒
+              </span>
+            </div>
+            <div className="xx-preview-info-row">
+              <span>片段数</span>
+              <span>{previewResult.clipCount} 段</span>
+            </div>
+            <div className="xx-preview-info-row">
+              <span>比例</span>
+              <span>{videoRatio}</span>
+            </div>
           </div>
-          <div className="xx-preview-info-row">
-            <span>片段数</span>
-            <span>{previewResult.clipCount} 段</span>
-          </div>
-          <div className="xx-preview-info-row">
-            <span>比例</span>
-            <span>{videoRatio}</span>
-          </div>
-        </div>
+        </>
       )}
     </div>
   )

apps/web/src/pages/generate/components/title/TitlePreviewCanvas.tsx

@@ -1,209 +0,0 @@
-/**
- * 标题实时预览 Canvas 组件
- *
- * 在 Step4 标题设置面板中嵌入，让用户实时看到标题文字、字体、大小、颜色、
- * 位置、描边、阴影等样式的实际渲染效果（所见即所得）。
- *
- * 使用共享的 drawTitleOnCanvas 工具函数，与 PreviewVideoPanel 行为一致。
- *
- * 坐标一致性：
- * Canvas 内部以目标视频分辨率（如 720×1280）绘制，CSS 缩放至容器大小显示。
- * 这样 font_size / paddingX / topOffset 与后端 ASS 渲染完全对齐，
- * 预览效果与最终输出视频 100% 一致。
- */
-import React, { useRef, useEffect } from "react"
-import type { TitleSettings } from "../../types"
-import { drawTitleOnCanvas, calculateVideoDimensions } from "../../utils/drawTitleOnCanvas"
-
-interface TitlePreviewCanvasProps {
-  /** 标题文字 */
-  titleText: string
-  /** 标题样式设置 */
-  titleSettings: TitleSettings
-  /** 视频比例，默认 "9:16"（竖屏） */
-  videoRatio?: string
-  /** 素材视频 URL（作为背景显示） */
-  sourceVideoUrl?: string
-}
-
-/**
- * 解析 videoRatio 字符串为 aspect-ratio CSS 值
- */
-function parseAspect(ratio: string): string {
-  return (ratio || "9:16").replace(":", "/")
-}
-
-const TitlePreviewCanvas: React.FC<TitlePreviewCanvasProps> = ({
-  titleText,
-  titleSettings,
-  videoRatio = "9:16",
-  sourceVideoUrl,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  // 字体加载状态
-  const fontLoadedRef = useRef(false)
-
-  // 根据视频比例计算目标渲染分辨率（与后端一致）
-  const { width: videoWidth, height: videoHeight } = calculateVideoDimensions(videoRatio)
-
-  /** 在 Canvas 上绘制标题（以视频分辨率绘制，CSS 缩放显示） */
-  const draw = () => {
-    const canvas = canvasRef.current
-    const container = containerRef.current
-    if (!canvas || !container) return
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
-
-    const rect = container.getBoundingClientRect()
-    if (rect.width <= 0 || rect.height <= 0) return
-
-    // CSS 尺寸 = 容器尺寸（浏览器自动缩放 canvas 位图到 CSS 尺寸）
-    canvas.style.width = `${rect.width}px`
-    canvas.style.height = `${rect.height}px`
-
-    // 以视频分辨率作为绘制坐标系（font_size / padding / offset 与后端 ASS 一致）
-    drawTitleOnCanvas(
-      ctx,
-      rect.width,
-      rect.height,
-      titleText,
-      titleSettings,
-      24,
-      titleSettings.position,
-      40,
-      videoWidth,
-      videoHeight,
-    )
-  }
-
-  // 字体加载：确保 measureText 使用正确字体
-  useEffect(() => {
-    let cancelled = false
-    fontLoadedRef.current = false
-
-    const fontWeight = titleSettings.bold ? "bold" : ""
-    const fontStyle = titleSettings.italic ? "italic" : ""
-    const fontSpec =
-      `${fontStyle} ${fontWeight} ${titleSettings.size}px "${titleSettings.font}"`.trim()
-
-    const onFontReady = () => {
-      if (cancelled) return
-      fontLoadedRef.current = true
-      requestAnimationFrame(() => {
-        if (!cancelled) draw()
-      })
-    }
-
-    // 用 FontFace API 加载字体，失败则降级
-    try {
-      const fontFace = new FontFace(titleSettings.font, `local("${titleSettings.font}")`)
-      fontFace
-        .load()
-        .then(() => {
-          if (!cancelled) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- FontFaceSet.add() exists at runtime
-            ;(document.fonts as any).add(fontFace)
-            onFontReady()
-          }
-        })
-        .catch(() => {
-          // 字体加载失败，用默认字体继续
-          onFontReady()
-        })
-    } catch {
-      // FontFace 不可用，直接绘制
-      onFontReady()
-    }
-
-    // 同时检查 document.fonts 是否已有该字体
-    if (document.fonts.check(fontSpec)) {
-      onFontReady()
-      return
-    }
-
-    return () => {
-      cancelled = true
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- draw uses refs, stable by design
-  }, [titleSettings.font, titleSettings.size, titleSettings.bold, titleSettings.italic])
-
-  // props 变化时重绘
-  useEffect(() => {
-    requestAnimationFrame(draw)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- draw uses refs, stable by design
-  }, [titleText, titleSettings])
-
-  // ResizeObserver 监听容器尺寸变化 → 更新 CSS 尺寸并重绘
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-
-    const observer = new ResizeObserver(() => {
-      requestAnimationFrame(draw)
-    })
-    observer.observe(container)
-
-    return () => observer.disconnect()
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- draw uses refs, stable by design
-  }, [])
-
-  return (
-    <div>
-      <div
-        style={{
-          fontSize: 12,
-          color: "var(--text-tertiary, #999)",
-          marginBottom: 6,
-          fontWeight: 500,
-        }}
-      >
-        预览效果
-      </div>
-      <div
-        ref={containerRef}
-        style={{
-          width: "100%",
-          aspectRatio: parseAspect(videoRatio),
-          background: sourceVideoUrl
-            ? "#000"
-            : "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)",
-          borderRadius: 8,
-          overflow: "hidden",
-          position: "relative",
-        }}
-      >
-        {sourceVideoUrl && (
-          <video
-            src={sourceVideoUrl}
-            muted
-            loop
-            autoPlay
-            playsInline
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-            }}
-          />
-        )}
-        <canvas
-          ref={canvasRef}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default TitlePreviewCanvas

apps/web/src/pages/generate/utils/drawTitleOnCanvas.ts

@@ -1,175 +0,0 @@
-/**
- * Canvas 标题绘制工具函数（共享模块）
- *
- * 供 PreviewVideoPanel（预览视频标题叠加）和 TitlePreviewCanvas（标题设置实时预览）共用。
- * 绘制行为与 ASS 字幕引擎一致：逐字换行、居中、描边/阴影。
- *
- * 坐标一致性：
- * 当提供 videoWidth/videoHeight 时，绘制坐标系匹配后端 ASS 渲染的视频分辨率，
- * 确保 font_size、margin、position 等参数在 Canvas 和 FFmpeg 中视觉比例完全一致。
- */
-import type { TitleSettings } from "../types"
-
-/**
- * 根据视频比例计算目标渲染分辨率。
- * 基准：长边 1280px，短边按比例计算（与后端默认输出分辨率对齐）。
- *
- * @example
- * calculateVideoDimensions("16:9")  → { width: 1280, height: 720 }
- * calculateVideoDimensions("9:16")  → { width: 720, height: 1280 }
- * calculateVideoDimensions("1:1")   → { width: 1280, height: 1280 }
- */
-export function calculateVideoDimensions(ratio: string): { width: number; height: number } {
-  const parts = (ratio || "16:9").split(":")
-  const rw = parseInt(parts[0]) || 16
-  const rh = parseInt(parts[1]) || 9
-
-  const longSide = 1280
-  const shortSide = Math.round((longSide * Math.min(rw, rh)) / Math.max(rw, rh))
-
-  if (rw >= rh) {
-    return { width: longSide, height: shortSide }
-  }
-  return { width: shortSide, height: longSide }
-}
-
-/**
- * 将文本按 maxWidth 逐字换行，返回行数组。
- * 与 ASS 字幕引擎的逐字换行行为一致。
- */
-export function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
-  const lines: string[] = []
-  let currentLine = ""
-  for (const char of text) {
-    const testLine = currentLine + char
-    if (ctx.measureText(testLine).width > maxWidth && currentLine) {
-      lines.push(currentLine)
-      currentLine = char
-    } else {
-      currentLine = testLine
-    }
-  }
-  if (currentLine) lines.push(currentLine)
-  return lines
-}
-
-/**
- * 在 canvas 上绘制标题文字（含描边/阴影/多行居中）
- *
- * @param ctx canvas 上下文
- * @param w 绘制区域宽度（CSS 像素，用于计算位置和布局）
- * @param h 绘制区域高度（CSS 像素）
- * @param text 标题文字
- * @param settings 标题样式
- * @param paddingX 左右边距（与 w/h 同坐标系），与 ASS 的 MarginL/MarginR 对应
- * @param position "top" | "center" | "bottom"
- * @param topOffset 顶部/底部偏移量（与 w/h 同坐标系）
- * @param videoWidth  目标视频渲染宽度（可选，提供后绘制坐标系匹配后端 ASS 分辨率）
- * @param videoHeight 目标视频渲染高度（可选）
- */
-export function drawTitleOnCanvas(
-  ctx: CanvasRenderingContext2D,
-  w: number,
-  h: number,
-  text: string,
-  settings: TitleSettings,
-  paddingX: number,
-  position: string,
-  topOffset: number,
-  videoWidth?: number,
-  videoHeight?: number,
-) {
-  const dpr = window.devicePixelRatio || 1
-
-  // 如果提供了视频分辨率，在该坐标系下绘制（与后端 ASS 一致）
-  const useVideoCoords = videoWidth && videoHeight && videoWidth > 0 && videoHeight > 0
-
-  const drawW = useVideoCoords ? videoWidth : w
-  const drawH = useVideoCoords ? videoHeight : h
-
-  // 设置 canvas 物理像素尺寸
-  if (useVideoCoords) {
-    // 视频坐标系：内部位图 = 视频分辨率 × DPR
-    ctx.canvas.width = Math.round(drawW * dpr)
-    ctx.canvas.height = Math.round(drawH * dpr)
-    ctx.scale(dpr, dpr)
-  } else {
-    // 兼容模式：内部位图 = CSS 尺寸 × DPR
-    ctx.canvas.width = Math.round(w * dpr)
-    ctx.canvas.height = Math.round(h * dpr)
-    ctx.scale(dpr, dpr)
-  }
-
-  // 清除
-  ctx.clearRect(0, 0, drawW, drawH)
-
-  // 可用宽度 = 总宽 - 左右边距
-  // 视频坐标系下 paddingX 需按视频宽度等比缩放（调用方传入的 paddingX 基于 CSS 尺寸）
-  const scaledPaddingX = useVideoCoords ? (paddingX * drawW) / w : paddingX
-  const availableWidth = drawW - scaledPaddingX * 2
-  if (availableWidth <= 0) return
-
-  // 字体设置（视频坐标系下 fontSize 直接对应 ASS 的 font_size）
-  const fontSize = Math.round(Math.min(settings.size, 36))
-  const fontWeight = settings.bold ? "bold" : "normal"
-  const fontStyle = settings.italic ? "italic" : "normal"
-  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px "${settings.font}"`
-
-  // 文字属性
-  ctx.textAlign = "center"
-  ctx.textBaseline = "middle"
-  ctx.fillStyle = settings.color
-
-  const lineHeight = fontSize * 1.4
-
-  // 描边 & 阴影（视频坐标系下按视频尺寸等比缩放）
-  const strokeScale = useVideoCoords ? drawW / w : 1
-  if (settings.stroke) {
-    ctx.strokeStyle = "rgba(0,0,0,0.6)"
-    ctx.lineWidth = 2 * strokeScale
-    ctx.lineJoin = "round"
-  }
-  if (settings.shadow) {
-    ctx.shadowColor = "rgba(0,0,0,0.7)"
-    ctx.shadowBlur = 4 * strokeScale
-    ctx.shadowOffsetX = 2 * strokeScale
-    ctx.shadowOffsetY = 2 * strokeScale
-  }
-
-  // 换行
-  const displayText = text && text.trim() ? text : "请选择或输入标题"
-  const lines = wrapText(ctx, displayText, availableWidth)
-
-  // 起始 Y：根据 position 计算（scaled topOffset）
-  const scaledTopOffset = useVideoCoords ? (topOffset * drawH) / h : topOffset
-  const totalTextHeight = lines.length * lineHeight
-  let startY: number
-  switch (position) {
-    case "top":
-      startY = scaledTopOffset
-      break
-    case "center":
-      startY = (drawH - totalTextHeight) / 2 + lineHeight / 2
-      break
-    case "bottom":
-    default:
-      startY = drawH - scaledTopOffset - totalTextHeight + lineHeight / 2
-      break
-  }
-
-  // 居中 x = drawW / 2
-  const x = drawW / 2
-  lines.forEach((line, i) => {
-    const y = startY + i * lineHeight
-    if (settings.stroke) ctx.strokeText(line, x, y)
-    ctx.fillText(line, x, y)
-  })
-
-  // 重置 shadow（避免影响后续绘制）
-  if (settings.shadow) {
-    ctx.shadowColor = "transparent"
-    ctx.shadowBlur = 0
-    ctx.shadowOffsetX = 0
-    ctx.shadowOffsetY = 0
-  }
-}