feat(title): 预览画面标题自由拖拽——pointer-events+PlayRes坐标换算+position=custom提交（工单#1405方案B）

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

@@ -338,12 +338,15 @@ const GeneratePage: React.FC = () => {
                 size: titleSettings.size,
                 font: titleSettings.font,
                 color: titleSettings.color,
-                position: titleSettings.position as "top" | "center" | "bottom",
+                position: titleSettings.position as "top" | "center" | "bottom" | "custom",
                 bold: titleSettings.bold,
                 italic: titleSettings.italic,
                 stroke: titleSettings.stroke,
                 shadow: titleSettings.shadow,
+                posX: titleSettings.posX,
+                posY: titleSettings.posY,
               }}
+              onTitlePositionChange={styleUpdaters.updateTitlePosition}
             />
           )}
           {currentStep >= 5 && generated && finalVideo && (

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

@@ -32,12 +32,15 @@ interface FrontendPreviewPlayerProps {
     size: number
     font: string
     color: string
-    position: "top" | "center" | "bottom"
+    position: "top" | "center" | "bottom" | "custom"
     bold?: boolean
     italic?: boolean
     stroke?: boolean
     shadow?: boolean
+    posX?: number | null
+    posY?: number | null
   }
+  onTitlePositionChange?: (posX: number, posY: number) => void
 }
 
 function formatTime(seconds: number): string {
@@ -105,6 +108,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   serverClips,
   voiceAudioUrl,
   titleSettings,
+  onTitlePositionChange,
 }) => {
   const segments = useMemo(
     () => buildPlaybackSegments(assets, template, serverClips),
@@ -126,6 +130,55 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         return { width: 1080, height: 1920 }
     }
   })()
+  const customTitleXPct =
+    titleSettings?.posX != null && playRes.width > 0
+      ? (titleSettings.posX / playRes.width) * 100
+      : null
+  const customTitleYPct =
+    titleSettings?.posY != null && playRes.height > 0
+      ? (titleSettings.posY / playRes.height) * 100
+      : null
+
+  // ── 拖拽状态（用 ref 避免在每帧渲染中触发重渲染）──
+  const draggingTitleRef = useRef(false)
+  const handleTitlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!onTitlePositionChange || !playerContainerRef.current) return
+      e.preventDefault()
+      e.stopPropagation()
+      ;(e.target as Element).setPointerCapture(e.pointerId)
+      draggingTitleRef.current = true
+      ;(e.currentTarget as HTMLDivElement).style.cursor = "grabbing"
+    },
+    [onTitlePositionChange],
+  )
+  const handleTitlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!draggingTitleRef.current || !onTitlePositionChange || !playerContainerRef.current) return
+      e.preventDefault()
+      e.stopPropagation()
+      const rect = playerContainerRef.current.getBoundingClientRect()
+      const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
+      const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
+      const posX = Math.round((relX / rect.width) * playRes.width)
+      const posY = Math.round((relY / rect.height) * playRes.height)
+      onTitlePositionChange(posX, posY)
+    },
+    [onTitlePositionChange, playRes.width, playRes.height],
+  )
+  const handleTitlePointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingTitleRef.current) return
+    draggingTitleRef.current = false
+    ;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
+    try {
+      if ((e.currentTarget as Element).hasPointerCapture(e.pointerId)) {
+        ;(e.currentTarget as Element).releasePointerCapture(e.pointerId)
+      }
+    } catch {
+      /* ignore */
+    }
+  }, [])
+
   const playerContainerRef = useRef<HTMLDivElement>(null)
   const [containerHeight, setContainerHeight] = useState(0)
   useEffect(() => {
@@ -524,15 +577,34 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           <div
             style={{
               position: "absolute",
-              left: `${titleSidePct}%`,
-              right: `${titleSidePct}%`,
-              textAlign: "center",
-              ...(titleSettings.position === "top"
-                ? { top: `${titleTopPct}%` }
-                : titleSettings.position === "center"
-                  ? { top: "50%", transform: "translateY(-50%)" }
-                  : { bottom: `${titleBottomPct}%` }),
+              ...(customTitleXPct != null && customTitleYPct != null
+                ? {
+                    left: `${customTitleXPct}%`,
+                    top: `${customTitleYPct}%`,
+                    transform: "translate(-50%, -50%)",
+                    textAlign: "center" as const,
+                  }
+                : {
+                    left: `${titleSidePct}%`,
+                    right: `${titleSidePct}%`,
+                    textAlign: "center" as const,
+                    ...(titleSettings.position === "top"
+                      ? { top: `${titleTopPct}%` }
+                      : titleSettings.position === "center"
+                        ? { top: "50%", transform: "translateY(-50%)" }
+                        : { bottom: `${titleBottomPct}%` }),
+                  }),
+              cursor: onTitlePositionChange ? "grab" : "default",
+              touchAction: "none",
+              userSelect: "none",
+              WebkitUserSelect: "none",
+              padding: "8px 12px",
+              boxShadow: "inset 0 0 0 16px transparent",
             }}
+            onPointerDown={handleTitlePointerDown}
+            onPointerMove={handleTitlePointerMove}
+            onPointerUp={handleTitlePointerUp}
+            onPointerCancel={handleTitlePointerUp}
           >
             <span
               style={{

apps/web/src/pages/generate/constants.ts

@@ -42,6 +42,7 @@ export const POSITION_OPTIONS = [
   { value: "top", label: "顶部" },
   { value: "center", label: "居中" },
   { value: "bottom", label: "底部" },
+  { value: "custom", label: "自定义" },
 ]
 
 /* ── 标题字体选项 ── */

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

@@ -233,7 +233,7 @@ export function useCanvasPlayer(
     fontSize: number
     fontFamily: string
     color: string
-    position: "top" | "center" | "bottom"
+    position: "top" | "center" | "bottom" | "custom"
     bold?: boolean
     stroke?: boolean
     shadow?: boolean

apps/web/src/pages/generate/hooks/useGenerateFormState/index.ts

@@ -27,6 +27,8 @@ const DEFAULT_TITLE_SETTINGS: TitleSettings = {
   stroke: true,
   shadow: false,
   color: "#ffffff",
+  posX: null,
+  posY: null,
 }
 
 export interface GenerateFormState {

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

@@ -117,6 +117,14 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
                   font_size: props.titleSettings.size,
                   font_color: props.titleSettings.color,
                   position: props.titleSettings.position,
+                  ...(props.titleSettings.position === "custom" &&
+                  props.titleSettings.posX != null &&
+                  props.titleSettings.posY != null
+                    ? {
+                        pos_x: Math.round(props.titleSettings.posX),
+                        pos_y: Math.round(props.titleSettings.posY),
+                      }
+                    : {}),
                   bold: props.titleSettings.bold,
                   stroke: props.titleSettings.stroke,
                   shadow: props.titleSettings.shadow,

apps/web/src/pages/generate/hooks/useStep4Title/useTitleStyleUpdaters.ts

@@ -46,7 +46,16 @@ export function useTitleStyleUpdaters({
 
   const updatePosition = useCallback(
     (position: string) => {
-      onTitleSettingsChange({ ...titleSettings, position })
+      // 切回三档预设时清掉自定义坐标
+      onTitleSettingsChange({ ...titleSettings, position, posX: null, posY: null })
+    },
+    [titleSettings, onTitleSettingsChange],
+  )
+
+  /** 拖拽更新自定义位置（由预览播放器调用） */
+  const updateTitlePosition = useCallback(
+    (posX: number, posY: number) => {
+      onTitleSettingsChange({ ...titleSettings, position: "custom", posX, posY })
     },
     [titleSettings, onTitleSettingsChange],
   )
@@ -111,6 +120,7 @@ export function useTitleStyleUpdaters({
     updateTitle,
     toggleAiAutoSelect,
     updatePosition,
+    updateTitlePosition,
     updateFont,
     updateSize,
     updateColor,

apps/web/src/pages/generate/types.ts

@@ -16,6 +16,9 @@ export interface TitleSettings {
   stroke: boolean
   shadow: boolean
   color: string
+  /** 自由位置坐标（PlayRes 像素），仅当 position="custom" 时有效 */
+  posX: number | null
+  posY: number | null
 }
 
 /* ── 智能匹配结果 ── */