fix(title): 标题模板v3全面审计修复——选模板预览不变/新建保存变白 (#2020 )

fix(title): 选模板后视频预览标题正确应用全部样式字段 (#2019 )
fix(title): 预览区标题应用真实模板描边/阴影/背景 (#2018 )
2026-09-23 15:53:25 +08:00 · 2026-09-23 14:54:57 +08:00 · 2026-09-23 14:20:59 +08:00 · 2026-09-23 13:55:54 +08:00 · 2026-09-23 10:31:50 +08:00 · 2026-09-23 00:08:08 +08:00
22 changed files with 3526 additions and 3482 deletions
@@ -23,6 +23,8 @@
    "@tanstack/react-query": "^5.45.0",
    "antd": "^5.18.0",
    "axios": "^1.7.2",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.23",
    "mp4box": "^2.4.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -0,0 +1,391 @@
+/* ============================================================
+   标题模板系统 v3（按 sketch 重构）
+   - 大卡片网格（图片背景 + 透明 Canvas 叠字 + 始终可见操作按钮）
+   - 编辑器弹窗（左竖屏预览 + 右参数 Tab）
+   ============================================================ */
+
+/* ── 面板容器（模板模式） ── */
+.ttv3-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.ttv3-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ttv3-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #1f2937);
+}
+.ttv3-new-btn.ant-btn {
+  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
+  border: none;
+  border-radius: 20px;
+  font-size: 12px;
+  height: 28px;
+  padding: 0 14px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
+}
+.ttv3-new-btn.ant-btn:hover {
+  background: linear-gradient(135deg, #5b4cdb, #8c83f5) !important;
+  color: #fff !important;
+}
+.ttv3-section-label {
+  font-size: 12px;
+  color: #888;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.ttv3-section {
+  margin-bottom: 6px;
+}
+
+/* ── 空状态 ── */
+.ttv3-empty {
+  background: #f8f8fc;
+  border-radius: 12px;
+  padding: 28px 16px;
+  text-align: center;
+  color: #aaa;
+}
+.ttv3-empty-icon {
+  font-size: 28px;
+  margin-bottom: 6px;
+}
+.ttv3-empty-text {
+  font-size: 12px;
+}
+
+/* ── 卡片网格：minmax(180px,1fr) 自适应 ── */
+.ttv3-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+/* ── 卡片：3:4 竖版，圆角 14px ── */
+.ttv3-card {
+  background: #fff;
+  border-radius: 14px;
+  border: 3px solid #e8e8ed;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  overflow: hidden;
+  padding: 0;
+  font-family: inherit;
+  text-align: left;
+}
+.ttv3-card:hover {
+  border-color: #c5c0f0;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+.ttv3-card.selected {
+  border-color: #6c5ce7;
+  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
+}
+
+/* ── 卡片预览区（3:4） ── */
+.ttv3-preview {
+  width: 100%;
+  aspect-ratio: 3/4;
+  position: relative;
+  overflow: hidden;
+  border-radius: 11px 11px 0 0;
+}
+.ttv3-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+/* 暗色渐变遮罩：顶部15%半透明黑 + 中部透明 + 底部45%黑 */
+.ttv3-vignette {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.45) 0%,
+    rgba(0, 0, 0, 0.15) 15%,
+    transparent 30%,
+    transparent 55%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  z-index: 1;
+  pointer-events: none;
+}
+/* 透明 Canvas 标题填充整个预览区 */
+.ttv3-preview .tt-fill-canvas-wrap {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.ttv3-preview .tt-fill-canvas-wrap canvas {
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 0;
+  display: block;
+}
+
+/* ── 左上角角标（系统/我的） ── */
+.ttv3-badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  font-weight: 500;
+  color: #fff;
+  z-index: 3;
+  backdrop-filter: blur(4px);
+}
+.ttv3-badge--sys {
+  background: rgba(108, 92, 231, 0.88);
+}
+.ttv3-badge--mine {
+  background: rgba(0, 184, 148, 0.88);
+}
+
+/* ── 右上角勾选圆圈 ── */
+.ttv3-check {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: transparent;
+  transition: all 0.15s;
+}
+.ttv3-check.on {
+  background: #6c5ce7;
+  border-color: #fff;
+  color: #fff;
+}
+
+/* ── 卡片底栏（名称 + 操作按钮） ── */
+.ttv3-footer {
+  padding: 10px 10px 12px;
+}
+.ttv3-name-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #1f2937;
+}
+.ttv3-emoji {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.ttv3-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+.ttv3-tag {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 6px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.ttv3-tag--sys {
+  background: #f0ecff;
+  color: #6c5ce7;
+}
+.ttv3-tag--mine {
+  background: #e6f9f4;
+  color: #00b894;
+}
+
+/* ── 操作按钮：始终可见，等宽排列 ── */
+.ttv3-actions {
+  display: flex;
+  gap: 5px;
+}
+.ttv3-act {
+  flex: 1;
+  padding: 5px 0;
+  border: 1px solid #e8e8ed;
+  background: #fff;
+  border-radius: 7px;
+  font-size: 11px;
+  cursor: pointer;
+  color: #666;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+.ttv3-act:hover:not(:disabled) {
+  background: #f5f5fa;
+  border-color: #d5d3e8;
+}
+.ttv3-act--primary {
+  background: #6c5ce7;
+  color: #fff;
+  border-color: #6c5ce7;
+}
+.ttv3-act--primary:hover:not(:disabled) {
+  background: #5b4cdb;
+  border-color: #5b4cdb;
+}
+.ttv3-act--danger {
+  color: #e74c3c;
+}
+.ttv3-act--danger:hover:not(:disabled) {
+  background: #fef2f2;
+}
+.ttv3-act:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ── FillPreview 公共容器 ── */
+.tt-fill-canvas-wrap {
+  position: relative;
+}
+
+/* ── params-only（编辑器右侧）去掉多余 margin ── */
+.ttv3-params-only {
+  padding: 0;
+}
+.ttv3-params-only .ant-tabs {
+  margin: 0;
+}
+
+/* ============================================================
+   编辑器 Modal（v3）
+   ============================================================ */
+.ttv3-modal .ant-modal-content {
+  border-radius: 16px;
+  overflow: hidden;
+  padding: 0;
+}
+.ttv3-modal .ant-modal-header {
+  padding: 16px 20px;
+  margin: 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+.ttv3-modal .ant-modal-body {
+  padding: 0;
+  max-height: 75vh;
+}
+.ttv3-modal .ant-modal-footer {
+  padding: 14px 20px;
+  margin: 0;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* 编辑器两栏布局 */
+.ttv3-editor {
+  display: flex;
+  min-height: 500px;
+}
+.ttv3-editor-left {
+  width: 300px;
+  padding: 20px;
+  background: #f8f8fc;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  border-right: 1px solid #f0f0f0;
+}
+.ttv3-editor-canvas {
+  width: 200px;
+  aspect-ratio: 9/16;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  flex-shrink: 0;
+}
+.ttv3-editor-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ttv3-editor-canvas-inner {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.ttv3-editor-canvas-inner canvas {
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 0;
+  display: block;
+}
+.ttv3-editor-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ttv3-form-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ttv3-form-row label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  min-width: 44px;
+}
+.ttv3-form-row--grow {
+  flex: 1;
+}
+.ttv3-form-row--grow .ant-input {
+  flex: 1;
+}
+
+.ttv3-editor-right {
+  flex: 1;
+  padding: 16px 20px;
+  overflow-y: auto;
+  min-width: 0;
+}
+
+/* 侧栏较窄时（380px 侧栏）：强制 2 列，卡片稍微紧凑 */
+@media (max-width: 540px) {
+  .ttv3-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+  .ttv3-act {
+    font-size: 10px;
+    padding: 4px 0;
+  }
+  .ttv3-act .anticon {
+    display: none;
+  }
+}
@@ -0,0 +1,174 @@
+/**
+ * 标题模板编辑器（v3 重构）
+ *
+ * - Modal 弹窗 860px 宽
+ * - 左侧：300px 竖屏预览区（图片背景+暗色渐变遮罩+透明 Canvas 叠字）+ 模板名称输入框
+ * - 右侧：参数 Tab 面板（基础/描边/阴影/背景/排版），复用 TitleStylePanel 的 paramsOnly 模式
+ * - 底部：取消 / 保存模板 按钮
+ * - 内置模板编辑时保存会创建副本（带"副本"逻辑由 handleSave 处理）
+ */
+import React, { useEffect, useMemo, useState } from "react"
+import { Modal, Button, Input, message } from "antd"
+import TitleStylePanel from "../../pages/generate/components/title/TitleStylePanel"
+import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
+import { POSITION_OPTIONS } from "../../pages/generate/constants"
+import { FONT_OPTIONS } from "./constants"
+import type { TitleSettings } from "../../pages/generate/types"
+import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
+import { titleStyleConfigToCamel, camelToTitleStyleConfig } from "./utils"
+import type { TitleTemplate } from "./template-types"
+import type { TitleStyleConfig } from "./types"
+
+interface Props {
+  open: boolean
+  template: TitleTemplate
+  onClose: () => void
+  /** 用户点击保存：将编辑结果回调给父组件（父组件统一做 CRUD，避免双 hook 实例不同步） */
+  onSave: (data: { name: string; emoji: string; style: Partial<TitleStyleConfig> }) => void
+}
+
+/** 编辑器预览用的背景图（复用卡片池第一张） */
+const EDITOR_BG = "/title-templates/portrait1.jpg"
+
+const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSave }) => {
+  const [settings, setSettings] = useState<TitleSettings>(() => ({
+    ...DEFAULT_TITLE_SETTINGS_FULL,
+    ...titleStyleConfigToCamel(template.style || {}),
+    title: "预览标题文字",
+  }))
+  const [formName, setFormName] = useState(template.name || "")
+  const [formEmoji, setFormEmoji] = useState(template.emoji || "✨")
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setSettings({
+        ...DEFAULT_TITLE_SETTINGS_FULL,
+        ...titleStyleConfigToCamel(template.style || {}),
+        title: "预览标题文字",
+      })
+      setFormName(template.name || "")
+      setFormEmoji(template.emoji || "✨")
+    }
+  }, [open, template])
+
+  const upd = (patch: Partial<TitleSettings>) => setSettings((s) => ({ ...s, ...patch }))
+
+  const handleSave = () => {
+    const name = formName.trim()
+    if (!name) {
+      message.warning("请填写模板名称")
+      return
+    }
+    setSaving(true)
+    try {
+      const snake = camelToTitleStyleConfig(settings)
+      onSave({ name, emoji: formEmoji, style: snake })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  // 编辑器内的预览用 settings：字号适配竖屏
+  const previewSettings = useMemo<TitleSettings>(() => {
+    // 竖屏宽度 200px，按比例缩放字号，让预览看起来协调
+    return { ...settings, size: Math.round(settings.size * 0.55) }
+  }, [settings])
+
+  return (
+    <Modal
+      title={
+        !template.id
+          ? "新建模板"
+          : template.isBuiltin
+            ? `基于「${template.name}」创建模板`
+            : `编辑模板：${template.name}`
+      }
+      open={open}
+      onCancel={onClose}
+      width={860}
+      footer={
+        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
+          <Button onClick={onClose}>取消</Button>
+          <Button type="primary" loading={saving} onClick={handleSave}>
+            保存模板
+          </Button>
+        </div>
+      }
+      destroyOnClose
+      className="ttv3-modal"
+      styles={{ body: { padding: 0 } }}
+    >
+      <div className="ttv3-editor">
+        {/* 左侧：竖屏预览 + 名称 */}
+        <div className="ttv3-editor-left">
+          <div className="ttv3-editor-canvas">
+            <img className="ttv3-editor-bg" src={EDITOR_BG} alt="" />
+            <div className="ttv3-vignette" />
+            <div className="ttv3-editor-canvas-inner">
+              <TitleMiniPreview
+                settings={previewSettings}
+                width={200}
+                sampleText="预览标题文字"
+                transparent
+                portrait
+              />
+            </div>
+          </div>
+          <div className="ttv3-editor-form">
+            <div className="ttv3-form-row">
+              <label>图标</label>
+              <Input
+                value={formEmoji}
+                maxLength={2}
+                style={{ textAlign: "center", width: 64 }}
+                onChange={(e) => setFormEmoji(e.target.value)}
+              />
+            </div>
+            <div className="ttv3-form-row ttv3-form-row--grow">
+              <label>
+                模板名称<span style={{ color: "#ef4444" }}>*</span>
+              </label>
+              <Input
+                placeholder="给模板起个名字"
+                value={formName}
+                maxLength={20}
+                onChange={(e) => setFormName(e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+        {/* 右侧：参数 Tab */}
+        <div className="ttv3-editor-right">
+          <TitleStylePanel
+            settings={settings}
+            onUpdatePosition={(p) => upd({ position: p, posX: null, posY: null })}
+            onUpdateFont={(f) => upd({ font: f })}
+            onUpdateSize={(v) => upd({ size: v })}
+            onToggleBold={() => upd({ bold: !settings.bold })}
+            onToggleItalic={() => upd({ italic: !settings.italic })}
+            onToggleStroke={() =>
+              upd({
+                stroke: !settings.stroke,
+                strokeWidth:
+                  !settings.stroke && (settings.strokeWidth ?? 0) < 2 ? 4 : settings.strokeWidth,
+              })
+            }
+            onToggleShadow={() => upd({ shadow: !settings.shadow })}
+            onApplyPreset={() => {
+              /* 编辑器内不使用系统预设快捷键 */
+            }}
+            onUpdateStyle={(patch) => upd(patch)}
+            activePreset={null}
+            titlePresets={[]}
+            POSITION_OPTIONS={POSITION_OPTIONS}
+            FONT_OPTIONS={FONT_OPTIONS}
+            paramsOnly
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default TitleTemplateEditor
@@ -127,6 +127,7 @@ export interface TitlePreset {
 }

 const BASE: Partial<TitleStyleConfig> = {
+  position: "bottom",
  line_overrides: [],
  cover_title_config: null,
 }
@@ -0,0 +1,28 @@
+/**
+ * 标题模板系统类型（#2003）
+ *
+ * 设计：
+ * - 内置系统模板（从 TITLE_PRESETS 自动派生，不可编辑/删除，可"复制为我的"）
+ * - 用户自定义模板（保存在 localStorage，可编辑/复制/导出/删除）
+ * - 模板存完整 TitleStyleConfig（snake_case），与后端契约一致
+ */
+import type { TitleStyleConfig } from "./types"
+
+export interface TitleTemplate {
+  /** 唯一 ID：系统模板 `sys:<presetKey>`，用户模板 `usr:<uuid>` */
+  id: string
+  /** 模板名称（必填，保存时校验） */
+  name: string
+  /** 模板描述（可选） */
+  description?: string
+  /** 是否为系统内置（不可删除/编辑源） */
+  isBuiltin: boolean
+  /** emoji（展示用，可选） */
+  emoji?: string
+  /** 创建时间（ISO 字符串，系统模板=固定值） */
+  createdAt: string
+  /** 更新时间 */
+  updatedAt: string
+  /** 完整样式配置（snake_case，与后端 title_config 对齐） */
+  style: Partial<TitleStyleConfig>
+}
@@ -0,0 +1,213 @@
+/**
+ * 标题模板 CRUD Hook（#2003）
+ *
+ * - 内存态 + localStorage 持久化
+ * - 系统模板（来自 TITLE_PRESETS）始终前置、不可删除/编辑源
+ * - 用户模板 CRUD：新增/复制/更新/删除/导出/导入
+ */
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { TITLE_PRESETS } from "./constants"
+import type { TitleStyleConfig } from "./types"
+import type { TitleTemplate } from "./template-types"
+
+const STORAGE_KEY = "xiaoxia.title.templates.v1"
+
+function uid(): string {
+  return "usr:" + Math.random().toString(36).slice(2, 10) + Date.now().toString(36)
+}
+
+/** 把 TITLE_PRESETS 转为内置 TitleTemplate 列表 */
+function buildBuiltinTemplates(): TitleTemplate[] {
+  const now = "2026-09-22T00:00:00+08:00"
+  return TITLE_PRESETS.map((p) => ({
+    id: `sys:${p.key}`,
+    name: p.label,
+    description: "系统内置模板",
+    isBuiltin: true,
+    emoji: p.emoji,
+    createdAt: now,
+    updatedAt: now,
+    style: { ...p.style },
+  }))
+}
+
+function loadUserTemplates(): TitleTemplate[] {
+  if (typeof window === "undefined") return []
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter((t) => t && !t.isBuiltin && t.id.startsWith("usr:"))
+  } catch {
+    return []
+  }
+}
+
+function saveUserTemplates(list: TitleTemplate[]) {
+  if (typeof window === "undefined") return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(list))
+  } catch {
+    /* ignore quota */
+  }
+}
+
+export interface UseTitleTemplatesResult {
+  templates: TitleTemplate[]
+  builtin: TitleTemplate[]
+  custom: TitleTemplate[]
+  /** 新建自定义模板：传入样式（snake_case），返回新建模板 id */
+  createTemplate: (input: {
+    name: string
+    description?: string
+    emoji?: string
+    style: Partial<TitleStyleConfig>
+  }) => TitleTemplate
+  /** 复制模板（内置模板也可复制，自动加"副本"后缀） */
+  duplicateTemplate: (id: string) => TitleTemplate | null
+  /** 更新自定义模板（系统模板不可改） */
+  updateTemplate: (id: string, patch: Partial<Omit<TitleTemplate, "id" | "isBuiltin">>) => void
+  /** 删除自定义模板 */
+  deleteTemplate: (id: string) => void
+  /** 导出单个模板为 JSON 字符串 */
+  exportTemplate: (id: string) => string | null
+  /** 导入 JSON 字符串作为新模板，返回新建模板 */
+  importTemplate: (json: string) => TitleTemplate | null
+  /** 根据 id 查询模板 */
+  getById: (id: string) => TitleTemplate | undefined
+}
+
+export function useTitleTemplates(): UseTitleTemplatesResult {
+  const [custom, setCustom] = useState<TitleTemplate[]>(() => loadUserTemplates())
+
+  // 跨 tab 同步
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY) setCustom(loadUserTemplates())
+    }
+    window.addEventListener("storage", onStorage)
+    return () => window.removeEventListener("storage", onStorage)
+  }, [])
+
+  const builtin = useMemo(() => buildBuiltinTemplates(), [])
+  const templates = useMemo(() => [...builtin, ...custom], [builtin, custom])
+
+  const persist = useCallback((next: TitleTemplate[]) => {
+    setCustom(next)
+    saveUserTemplates(next)
+  }, [])
+
+  const getById = useCallback((id: string) => templates.find((t) => t.id === id), [templates])
+
+  const createTemplate = useCallback<UseTitleTemplatesResult["createTemplate"]>(
+    ({ name, description, emoji, style }) => {
+      const now = new Date().toISOString()
+      const t: TitleTemplate = {
+        id: uid(),
+        name: name.trim() || "未命名模板",
+        description: description?.trim() || undefined,
+        emoji: emoji || "✨",
+        isBuiltin: false,
+        createdAt: now,
+        updatedAt: now,
+        style: { ...style },
+      }
+      persist([...custom, t])
+      return t
+    },
+    [custom, persist],
+  )
+
+  const duplicateTemplate = useCallback<UseTitleTemplatesResult["duplicateTemplate"]>(
+    (id) => {
+      const src = templates.find((t) => t.id === id)
+      if (!src) return null
+      const now = new Date().toISOString()
+      const t: TitleTemplate = {
+        id: uid(),
+        name: `${src.name} 副本`,
+        description: src.description,
+        emoji: src.emoji,
+        isBuiltin: false,
+        createdAt: now,
+        updatedAt: now,
+        style: { ...src.style },
+      }
+      persist([...custom, t])
+      return t
+    },
+    [templates, custom, persist],
+  )
+
+  const updateTemplate = useCallback<UseTitleTemplatesResult["updateTemplate"]>(
+    (id, patch) => {
+      if (id.startsWith("sys:")) return
+      const next = custom.map((t) =>
+        t.id === id
+          ? { ...t, ...patch, id: t.id, isBuiltin: false, updatedAt: new Date().toISOString() }
+          : t,
+      )
+      persist(next)
+    },
+    [custom, persist],
+  )
+
+  const deleteTemplate = useCallback<UseTitleTemplatesResult["deleteTemplate"]>(
+    (id) => {
+      if (id.startsWith("sys:")) return
+      persist(custom.filter((t) => t.id !== id))
+    },
+    [custom, persist],
+  )
+
+  const exportTemplate = useCallback<UseTitleTemplatesResult["exportTemplate"]>(
+    (id) => {
+      const t = templates.find((x) => x.id === id)
+      if (!t) return null
+      return JSON.stringify(
+        {
+          name: t.name,
+          description: t.description,
+          emoji: t.emoji,
+          style: t.style,
+          exportedAt: new Date().toISOString(),
+        },
+        null,
+        2,
+      )
+    },
+    [templates],
+  )
+
+  const importTemplate = useCallback<UseTitleTemplatesResult["importTemplate"]>(
+    (json) => {
+      try {
+        const data = JSON.parse(json)
+        if (!data || typeof data !== "object" || !data.style) return null
+        return createTemplate({
+          name: data.name || "导入模板",
+          description: data.description,
+          emoji: data.emoji || "✨",
+          style: data.style,
+        })
+      } catch {
+        return null
+      }
+    },
+    [createTemplate],
+  )
+
+  return {
+    templates,
+    builtin,
+    custom,
+    createTemplate,
+    duplicateTemplate,
+    updateTemplate,
+    deleteTemplate,
+    exportTemplate,
+    importTemplate,
+    getById,
+  }
+}
@@ -0,0 +1,125 @@
+/**
+ * 标题样式工具（#2001 / 模板系统 #2003）
+ *
+ * - snake_case TitleStyleConfig ↔ camelCase TitleSettings 互转
+ * - preset 归一化预览（修复"标题"两字大小不一）
+ */
+import type { TitleStyleConfig } from "./types"
+import type { TitleSettings } from "../../pages/generate/types"
+import { TITLE_PRESETS } from "./constants"
+import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
+import type { TitleTemplate } from "./template-types"
+
+/** snake_case TitleStyleConfig → camelCase TitleSettings（仅覆盖已知字段） */
+export function titleStyleConfigToCamel(s: Partial<TitleStyleConfig>): Partial<TitleSettings> {
+  const out: Partial<TitleSettings> = {}
+  if (s.font != null) out.font = s.font
+  if (s.size != null) out.size = s.size
+  if (s.color != null) out.color = s.color
+  if (s.bold != null) out.bold = s.bold
+  if (s.italic != null) out.italic = s.italic
+  if (s.position != null) out.position = s.position as TitleSettings["position"]
+  if (s.pos_x != null) out.posX = s.pos_x
+  if (s.pos_y != null) out.posY = s.pos_y
+  if (s.line_height != null) out.lineHeight = s.line_height
+  if (s.margin_top != null) out.marginTop = s.margin_top
+  if (s.max_chars_per_line != null) out.maxCharsPerLine = s.max_chars_per_line
+  if (s.stroke != null) out.stroke = s.stroke
+  if (s.stroke_width != null) out.strokeWidth = s.stroke_width
+  if (s.stroke_color != null) out.strokeColor = s.stroke_color
+  if (s.shadow != null) out.shadow = s.shadow
+  if (s.shadow_offset_x != null) out.shadowOffsetX = s.shadow_offset_x
+  if (s.shadow_offset_y != null) out.shadowOffsetY = s.shadow_offset_y
+  if (s.shadow_blur != null) out.shadowBlur = s.shadow_blur
+  if (s.shadow_color != null) out.shadowColor = s.shadow_color
+  if (s.bg_enabled != null) out.bgEnabled = s.bg_enabled
+  if (s.bg_color != null) out.bgColor = s.bg_color
+  if (s.bg_padding != null) out.bgPadding = s.bg_padding
+  if (s.bg_radius != null) out.bgRadius = s.bg_radius
+  if (s.line_overrides != null) out.lineOverrides = s.line_overrides
+  return out
+}
+
+/** camelCase TitleSettings patch → snake_case TitleStyleConfig patch */
+export function camelToTitleStyleConfig(p: Partial<TitleSettings>): Partial<TitleStyleConfig> {
+  const out: Partial<TitleStyleConfig> = {}
+  if (p.font != null) out.font = p.font
+  if (p.size != null) out.size = p.size
+  if (p.color != null) out.color = p.color
+  if (p.bold != null) out.bold = p.bold
+  if (p.italic != null) out.italic = p.italic
+  if (p.position != null) out.position = p.position as TitleStyleConfig["position"]
+  if (p.posX != null) out.pos_x = p.posX
+  if (p.posY != null) out.pos_y = p.posY
+  if (p.lineHeight != null) out.line_height = p.lineHeight
+  if (p.marginTop != null) out.margin_top = p.marginTop
+  if (p.maxCharsPerLine != null) out.max_chars_per_line = p.maxCharsPerLine
+  if (p.stroke != null) out.stroke = p.stroke
+  if (p.strokeWidth != null) out.stroke_width = p.strokeWidth
+  if (p.strokeColor != null) out.stroke_color = p.strokeColor
+  if (p.shadow != null) out.shadow = p.shadow
+  if (p.shadowOffsetX != null) out.shadow_offset_x = p.shadowOffsetX
+  if (p.shadowOffsetY != null) out.shadow_offset_y = p.shadowOffsetY
+  if (p.shadowBlur != null) out.shadow_blur = p.shadowBlur
+  if (p.shadowColor != null) out.shadow_color = p.shadowColor
+  if (p.bgEnabled != null) out.bg_enabled = p.bgEnabled
+  if (p.bgColor != null) out.bg_color = p.bgColor
+  if (p.bgPadding != null) out.bg_padding = p.bgPadding
+  if (p.bgRadius != null) out.bg_radius = p.bgRadius
+  if (p.lineOverrides != null) out.line_overrides = p.lineOverrides
+  return out
+}
+
+/**
+ * 把 preset style（snake_case）归一化为固定字号的 TitleSettings，
+ * 用于"预设卡片"缩略预览——所有卡片视觉上"标题"两字大小一致，便于辨识。
+ * 描边/阴影/背景padding 按 fixedSize / 原始 size 比例缩放，避免粗描边爆框。
+ */
+export function buildPresetPreviewSettings(
+  base: TitleSettings,
+  presetKey: string,
+  fixedSize = 56,
+): TitleSettings {
+  const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
+  if (!preset) return base
+  const origSize = preset.style.size ?? fixedSize
+  const ratio = fixedSize / origSize
+  const scale = (v: number | undefined, fallback: number): number =>
+    v != null ? Math.round(v * ratio) : fallback
+  return {
+    ...base,
+    ...titleStyleConfigToCamel(preset.style),
+    size: fixedSize,
+    strokeWidth: scale(preset.style.stroke_width, base.strokeWidth) ?? base.strokeWidth,
+    shadowOffsetX: scale(preset.style.shadow_offset_x, base.shadowOffsetX) ?? base.shadowOffsetX,
+    shadowOffsetY: scale(preset.style.shadow_offset_y, base.shadowOffsetY) ?? base.shadowOffsetY,
+    shadowBlur: scale(preset.style.shadow_blur, base.shadowBlur) ?? base.shadowBlur,
+    bgPadding: scale(preset.style.bg_padding, base.bgPadding) ?? base.bgPadding,
+    lineOverrides: [],
+  }
+}
+
+/**
+ * 把 TitleTemplate 渲染为完整 TitleSettings（带默认值），用于卡片预览。
+ * 与模板选择器中保持一致，抽出共用。
+ */
+export function templateToPreviewSettings(t: TitleTemplate, fixedSize = 48): TitleSettings {
+  const base: TitleSettings = {
+    ...DEFAULT_TITLE_SETTINGS_FULL,
+    ...titleStyleConfigToCamel(t.style),
+  }
+  // 预览时用固定字号保证所有卡片字大小一致；描边/阴影/padding按比例缩放
+  const origSize = t.style.size ?? base.size
+  if (origSize && origSize !== fixedSize) {
+    const ratio = fixedSize / origSize
+    base.size = fixedSize
+    if (base.strokeWidth != null)
+      base.strokeWidth = Math.max(1, Math.round(base.strokeWidth * ratio))
+    if (base.shadowOffsetX != null) base.shadowOffsetX = Math.round(base.shadowOffsetX * ratio)
+    if (base.shadowOffsetY != null) base.shadowOffsetY = Math.round(base.shadowOffsetY * ratio)
+    if (base.shadowBlur != null) base.shadowBlur = Math.round(base.shadowBlur * ratio)
+    if (base.bgPadding != null) base.bgPadding = Math.round(base.bgPadding * ratio)
+  }
+  base.lineOverrides = []
+  return base
+}
@@ -10,6 +10,8 @@
 import React, { useMemo, useState, useEffect } from "react"
 import { Input } from "antd"
 import TitleStylePanel from "@/pages/generate/components/title/TitleStylePanel"
+import type { TitleTemplate } from "@/components/title/template-types"
+
 import TitleLibraryAutoComplete from "@/pages/generate/components/title/TitleLibraryAutoComplete"
 import type { TitleOption } from "@/pages/generate/components/title/TitleLibraryAutoComplete"
 import type { TitleSettings } from "@/pages/generate/types"
@@ -29,6 +31,7 @@ interface PanelTitleConfigProps {
 const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpdate }) => {
  /** TitleStylePanel 内部高亮的预设 key（面板本地状态） */
  const [activePreset, setActivePreset] = useState<string | null>(null)
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null)

  /** 标题库选项（#1894：从文案库 scripts[].title 取候选） */
  const [titleOptions, setTitleOptions] = useState<TitleOption[]>([])
@@ -329,6 +332,40 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
    onUpdate(snake)
  }

+  /** 应用模板（来自内联网格 onApplyTemplate）：camelCase TitleSettings → snake_case AiAvatarTitleConfig */
+  const handleApplyTemplate = (settings: TitleSettings, tpl: TitleTemplate) => {
+    setActivePreset(null)
+    setSelectedTemplateId(tpl.id)
+    onUpdate({
+      title: titleConfig.title,
+      font: settings.font,
+      size: settings.size,
+      color: settings.color,
+      bold: settings.bold,
+      italic: settings.italic,
+      position: settings.position,
+      stroke: settings.stroke,
+      stroke_width: settings.strokeWidth,
+      stroke_color: settings.strokeColor,
+      shadow: settings.shadow,
+      shadow_offset_x: settings.shadowOffsetX,
+      shadow_offset_y: settings.shadowOffsetY,
+      shadow_blur: settings.shadowBlur,
+      shadow_color: settings.shadowColor,
+      bg_enabled: settings.bgEnabled,
+      bg_color: settings.bgColor,
+      bg_padding: settings.bgPadding,
+      bg_radius: settings.bgRadius,
+      line_height: settings.lineHeight,
+      margin_top: settings.marginTop,
+      max_chars_per_line: settings.maxCharsPerLine,
+      line_overrides: [],
+      pos_x: settings.posX ?? undefined,
+      pos_y: settings.posY ?? undefined,
+      cover_title_config: null,
+    })
+  }
+
  return (
    <div className="aa-title-config">
      {/* 主标题输入 — TextArea 多行 + 标题库选择 */}
@@ -375,6 +412,9 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
        onUpdateStyle={handleUpdateStyle}
        showCoverToggle
        previewWidth={280}
+        enableTemplates
+        selectedTemplateId={selectedTemplateId}
+        onApplyTemplate={handleApplyTemplate}
        activePreset={activePreset}
        titlePresets={
          TITLE_PRESETS as unknown as React.ComponentProps<typeof TitleStylePanel>["titlePresets"]
@@ -42,6 +42,9 @@ const GeneratePage: React.FC = () => {

  /* ── 表单状态 ── */
  const formState = useGenerateFormState()
+  /* ── 标题模板（#2003）当前选中模板 id ── */
+  const [selectedTitleTemplateId, setSelectedTitleTemplateId] = useState<string | null>(null)
+
  /* ── 积分状态 ── */
  const { balance, dailyUsage, rules, init: initPoints } = usePointsStore()
  useEffect(() => {
@@ -577,7 +580,19 @@ const GeneratePage: React.FC = () => {
                  bold: titleSettings.bold,
                  italic: titleSettings.italic,
                  stroke: titleSettings.stroke,
+                  strokeWidth: titleSettings.strokeWidth,
+                  strokeColor: titleSettings.strokeColor,
                  shadow: titleSettings.shadow,
+                  shadowOffsetX: titleSettings.shadowOffsetX,
+                  shadowOffsetY: titleSettings.shadowOffsetY,
+                  shadowBlur: titleSettings.shadowBlur,
+                  shadowColor: titleSettings.shadowColor,
+                  bgEnabled: titleSettings.bgEnabled,
+                  bgColor: titleSettings.bgColor,
+                  bgPadding: titleSettings.bgPadding,
+                  bgRadius: titleSettings.bgRadius,
+                  lineHeight: titleSettings.lineHeight,
+                  maxCharsPerLine: titleSettings.maxCharsPerLine,
                  posX: titleSettings.posX,
                  posY: titleSettings.posY,
                }}
@@ -643,6 +658,12 @@ const GeneratePage: React.FC = () => {
            onUpdateStyle={styleUpdaters.updateStyle}
            activePreset={styleUpdaters.activePreset}
            titlePresets={styleUpdaters.titlePresets}
+            enableTemplates
+            selectedTemplateId={selectedTitleTemplateId}
+            onApplyTemplate={(settings, tpl) => {
+              styleUpdaters.applyTemplate(settings)
+              setSelectedTitleTemplateId(tpl.id)
+            }}
            bgm={bgm}
            bgmConfig={bgmConfig}
            coverSettings={coverSettings}
@@ -140,7 +140,19 @@ const CanvasPreviewGrid: React.FC<CanvasPreviewGridProps> = ({
                  bold: titleSettings.bold,
                  italic: titleSettings.italic,
                  stroke: titleSettings.stroke,
+                  strokeWidth: titleSettings.strokeWidth,
+                  strokeColor: titleSettings.strokeColor,
                  shadow: titleSettings.shadow,
+                  shadowOffsetX: titleSettings.shadowOffsetX,
+                  shadowOffsetY: titleSettings.shadowOffsetY,
+                  shadowBlur: titleSettings.shadowBlur,
+                  shadowColor: titleSettings.shadowColor,
+                  bgEnabled: titleSettings.bgEnabled,
+                  bgColor: titleSettings.bgColor,
+                  bgPadding: titleSettings.bgPadding,
+                  bgRadius: titleSettings.bgRadius,
+                  lineHeight: titleSettings.lineHeight,
+                  maxCharsPerLine: titleSettings.maxCharsPerLine,
                  posX: titleSettings.posX,
                  posY: titleSettings.posY,
                }}
@@ -36,6 +36,18 @@ interface FrontendPreviewPlayerProps {
    italic?: boolean
    stroke?: boolean
    shadow?: boolean
+    strokeWidth?: number
+    strokeColor?: string
+    shadowOffsetX?: number
+    shadowOffsetY?: number
+    shadowBlur?: number
+    shadowColor?: string
+    bgEnabled?: boolean
+    bgColor?: string
+    bgPadding?: number
+    bgRadius?: number
+    lineHeight?: number
+    maxCharsPerLine?: number
    posX?: number | null
    posY?: number | null
  }
@@ -249,10 +261,25 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
  const titleSidePct = (TITLE_MARGIN_SIDE / playRes.width) * 100
  const titleTopPct = (TITLE_MARGIN_TOP / playRes.height) * 100
  const titleBottomPct = (TITLE_MARGIN_BOTTOM / playRes.height) * 100
-  const titleScale = containerHeight > 0 ? containerHeight / playRes.height : 1
-  const titleStrokeWidth = Math.max(1, 2 * titleScale)
-  const titleShadowBlur = 4 * titleScale
-  const titleShadowOffset = 2 * titleScale
+  // 标题缩放到容器：字号 px = (settings.size / playRes.height) * containerHeight
+  // 描边/阴影：读 titleSettings 真实值，按容器比例缩放
+  const titleStrokeWidth = Math.max(
+    1,
+    ((titleSettings?.strokeWidth ?? 4) / playRes.height) * containerHeight,
+  )
+  const titleStrokeColor = titleSettings?.strokeColor ?? "#000000"
+  const titleShadowBlur = ((titleSettings?.shadowBlur ?? 4) / playRes.height) * containerHeight
+  const titleShadowOffsetX =
+    ((titleSettings?.shadowOffsetX ?? 2) / playRes.height) * containerHeight
+  const titleShadowOffsetY =
+    ((titleSettings?.shadowOffsetY ?? 2) / playRes.height) * containerHeight
+  const titleShadowColor = titleSettings?.shadowColor ?? "rgba(0,0,0,0.8)"
+  const titleShadowStr = `${titleShadowOffsetX}px ${titleShadowOffsetY}px ${titleShadowBlur}px ${titleShadowColor}`
+  // 标题背景色块
+  const titleBgEnabled = !!titleSettings?.bgEnabled
+  const titleBgColor = titleSettings?.bgColor ?? "rgba(0,0,0,0.5)"
+  const titleBgPadding = ((titleSettings?.bgPadding ?? 12) / playRes.height) * containerHeight
+  const titleBgRadius = ((titleSettings?.bgRadius ?? 8) / playRes.height) * containerHeight

  // ── Video 播放器（默认路径，浏览器原生硬件解码） ──
  const {
@@ -561,14 +588,18 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
                color: titleSettings.color || "#ffffff",
                fontWeight: titleSettings.bold ? 700 : 400,
                fontStyle: titleSettings.italic ? "italic" : "normal",
-                lineHeight: 1.05,
+                lineHeight: titleSettings.lineHeight ?? 1.05,
                wordBreak: "break-word",
                WebkitTextStroke: titleSettings.stroke
-                  ? `${titleStrokeWidth}px #000000`
+                  ? `${titleStrokeWidth}px ${titleStrokeColor}`
                  : undefined,
-                textShadow: titleSettings.shadow
-                  ? `${titleShadowOffset}px ${titleShadowOffset}px ${titleShadowBlur}px rgba(0,0,0,0.8)`
+                textShadow: titleSettings.shadow ? titleShadowStr : undefined,
+                background: titleBgEnabled ? titleBgColor : undefined,
+                padding: titleBgEnabled
+                  ? `${titleBgPadding}px ${titleBgPadding * 1.5}px`
                  : undefined,
+                borderRadius: titleBgEnabled ? `${titleBgRadius}px` : undefined,
+                display: titleBgEnabled ? "inline-block" : undefined,
              }}
            >
              {(effectiveTitle || "").split(/[/／]/).map((part, i) => (
@@ -16,6 +16,7 @@ import Step6CoverSettings from "../components/Step6CoverSettings"
 import BatchGenerationGrid from "./BatchGenerationGrid"
 import type { BatchTaskState } from "../hooks/generate-video/useGenerationPolling"
 import type { GeneratedVideo } from "@/api/template-editor"
+import type { TitleTemplate } from "@/components/title/template-types"

 export interface GenerateStepContentProps {
  currentStep: number
@@ -59,6 +60,9 @@ export interface GenerateStepContentProps {
    emoji?: string
    style: Record<string, unknown>
  }>
+  enableTemplates?: boolean
+  selectedTemplateId?: string | null
+  onApplyTemplate?: (settings: import("../types").TitleSettings, template: TitleTemplate) => void
  /* ── 封面 ── */
  coverSettings: CoverConfig
  onCoverSettingsChange: (settings: CoverConfig) => void
@@ -126,6 +130,9 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
    onToggleShadow,
    onApplyPreset,
    onUpdateStyle,
+    enableTemplates,
+    selectedTemplateId,
+    onApplyTemplate,
    activePreset,
    titlePresets,
    coverSettings,
@@ -201,6 +208,9 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
          onUpdateStyle={onUpdateStyle}
          activePreset={activePreset}
          titlePresets={titlePresets}
+          enableTemplates={enableTemplates}
+          selectedTemplateId={selectedTemplateId}
+          onApplyTemplate={onApplyTemplate}
          previewCount={previewCount}
          previewTitles={previewTitles}
          onPreviewTitlesChange={onPreviewTitlesChange}
@@ -19,6 +19,7 @@ import AiTitleGenerator from "./title/AiTitleGenerator"
 import TitleLibraryAutoComplete from "./title/TitleLibraryAutoComplete"
 import TitleStylePanel from "./title/TitleStylePanel"
 import { AI_TITLE_TEMPLATES } from "../constants"
+import type { TitleTemplate } from "@/components/title/template-types"

 interface Step4TitleSettingsProps {
  titleSettings: TitleSettings
@@ -49,6 +50,9 @@ interface Step4TitleSettingsProps {
  /** 每个变体的标题文字（长度=previewCount） */
  previewTitles?: string[]
  onPreviewTitlesChange?: (titles: string[]) => void
+  enableTemplates?: boolean
+  selectedTemplateId?: string | null
+  onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
 }

 /** 从本地 AI 标题模板池按主题词生成 N 个不同标题（与单视频 AI 生成同源） */
@@ -98,6 +102,9 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
    previewCount = 1,
    previewTitles,
    onPreviewTitlesChange,
+    enableTemplates,
+    selectedTemplateId,
+    onApplyTemplate,
  } = props

  const isBatch = previewCount > 1
@@ -300,6 +307,9 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
        titlePresets={titlePresets}
        POSITION_OPTIONS={POSITION_OPTIONS}
        FONT_OPTIONS={FONT_OPTIONS}
+        enableTemplates={enableTemplates}
+        selectedTemplateId={selectedTemplateId}
+        onApplyTemplate={onApplyTemplate}
      />
    </div>
  )
@@ -18,10 +18,14 @@ interface Props {
  settings: TitleSettings
  width?: number
  sampleText?: string
-  /** 背景（预览用，默认深色渐变模拟视频底） */
+  /** 背景（预览用，默认深色渐变模拟视频底），transparent=true 时忽略 */
  background?: string
-  /** 高度（可选，默认 width/2） */
+  /** 高度（可选，默认按 portrait 选比例） */
  height?: number
+  /** 透明背景（卡片/编辑器预览叠加在图片上时使用） */
+  transparent?: boolean
+  /** 纵向竖屏预览（9:16），true 时 aspect=16/9 适配手机视频比例 */
+  portrait?: boolean
 }

 /** 按 maxCharsPerLine 自动换行 */
@@ -56,9 +60,11 @@ const TitleMiniPreview: React.FC<Props> = ({
  sampleText,
  background = "linear-gradient(135deg,#1f2937,#111827)",
  height,
+  transparent = false,
+  portrait = false,
 }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const h = height ?? Math.round(width / 1.8)
+  const h = height ?? Math.round(width * (portrait ? 16 / 9 : 1 / 1.8))
  const text = (sampleText || settings.title || "预览标题").trim() || "预览标题"

  useEffect(() => {
@@ -74,9 +80,11 @@ const TitleMiniPreview: React.FC<Props> = ({
    ctx.scale(dpr, dpr)
    ctx.clearRect(0, 0, width, h)

-    // 背景
-    ctx.fillStyle = "#111827"
-    ctx.fillRect(0, 0, width, h)
+    // 背景（transparent 时跳过，用于叠加在图片上）
+    if (!transparent) {
+      ctx.fillStyle = "#111827"
+      ctx.fillRect(0, 0, width, h)
+    }

    // 分辨率缩放：以 360 宽为基准（对应 720p 的一半）
    const scale = width / 360
@@ -121,7 +129,8 @@ const TitleMiniPreview: React.FC<Props> = ({
      startY = h / 2 - totalH / 2 + size / 2
    } else {
      // bottom
-      startY = h - totalH - r(16) + size / 2
+      const botMargin = portrait ? r(24) : r(16)
+      startY = h - totalH - botMargin + size / 2
    }
    let centerX = width / 2
    if (settings.position === "custom" && settings.posX != null) {
@@ -181,7 +190,7 @@ const TitleMiniPreview: React.FC<Props> = ({
    ctx.shadowBlur = prevShadow.b
    ctx.shadowOffsetX = prevShadow.ox
    ctx.shadowOffsetY = prevShadow.oy
-  }, [settings, width, h, text])
+  }, [settings, width, h, text, transparent, portrait, background])

  return (
    <canvas
@@ -190,7 +199,7 @@ const TitleMiniPreview: React.FC<Props> = ({
        borderRadius: 6,
        display: "block",
        maxWidth: "100%",
-        background,
+        background: transparent ? "transparent" : background,
      }}
    />
  )
@@ -442,3 +442,17 @@
  font-size: 12px !important;
  padding: 6px 8px !important;
 }
+
+/* 标题模板入口按钮（#2003） */
+.ts-template-btn {
+  border: none;
+  background: transparent;
+  color: var(--primary-color, #7c3aed);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 0;
+  font-weight: 500;
+}
+.ts-template-btn:hover {
+  text-decoration: underline;
+}
@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from "react"
 import { TITLE_PRESETS } from "../../constants"
 import { TITLE_PRESETS as NEW_TITLE_PRESETS } from "@/components/title/constants"
+import { titleStyleConfigToCamel } from "@/components/title/utils"
 import type { TitleSettings } from "../../types"

 interface UseTitleStyleUpdatersOptions {
@@ -16,8 +17,24 @@ export function useTitleStyleUpdaters({
  titleSettings,
  onTitleSettingsChange,
 }: UseTitleStyleUpdatersOptions) {
-  /** 匹配预设：只用 color/bold/italic/stroke/shadow，不再匹配 size */
+  /** 匹配预设：对新预设（snake→camel 后）全字段比；旧预设只比 color/bold/italic/stroke/shadow */
  const getActivePreset = (settings: TitleSettings): string | null => {
+    // 新预设匹配：font/size/color/bold/stroke/shadow/bg 全部对齐才算命中
+    for (const p of NEW_TITLE_PRESETS) {
+      const camel = titleStyleConfigToCamel(p.style)
+      if (
+        (camel.font ?? null) === (settings.font ?? null) &&
+        (camel.color ?? null) === (settings.color ?? null) &&
+        (camel.bold ?? null) === (settings.bold ?? null) &&
+        (camel.italic ?? null) === (settings.italic ?? null) &&
+        (camel.stroke ?? null) === (settings.stroke ?? null) &&
+        (camel.shadow ?? null) === (settings.shadow ?? null) &&
+        (camel.bgEnabled ?? null) === (settings.bgEnabled ?? null)
+      ) {
+        return p.key
+      }
+    }
+    // fallback 旧预设（legacy）
    for (const p of TITLE_PRESETS) {
      if (
        settings.color === p.style.color &&
@@ -91,24 +108,31 @@ export function useTitleStyleUpdaters({
  }, [titleSettings, onTitleSettingsChange])

  const toggleStroke = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, stroke: !titleSettings.stroke })
+    onTitleSettingsChange({
+      ...titleSettings,
+      stroke: !titleSettings.stroke,
+      // 开启描边时若宽度过小给个默认值（让滑块可见可调）
+      strokeWidth:
+        !titleSettings.stroke && (titleSettings.strokeWidth ?? 0) < 2
+          ? 4
+          : titleSettings.strokeWidth,
+    })
  }, [titleSettings, onTitleSettingsChange])

  const toggleShadow = useCallback(() => {
    onTitleSettingsChange({ ...titleSettings, shadow: !titleSettings.shadow })
  }, [titleSettings, onTitleSettingsChange])

-  /** 应用预设（支持新预设细粒度字段） */
+  /** 应用预设：正确把 snake_case 的 preset.style 转为 camelCase 再 spread */
  const applyPreset = useCallback(
    (presetKey: string) => {
-      // 优先匹配新预设（10个爆款预设），fallback 旧预设
      const newPreset = NEW_TITLE_PRESETS.find((p) => p.key === presetKey)
      const oldPreset = TITLE_PRESETS.find((p) => p.key === presetKey)
      if (newPreset) {
        onTitleSettingsChange({
          ...titleSettings,
-          ...(newPreset.style as Partial<TitleSettings>),
-          // 清除逐行覆盖
+          ...titleStyleConfigToCamel(newPreset.style),
+          // 封面独立标题保持不变（不清空，避免破坏封面定制）
          lineOverrides: [],
        })
        return
@@ -116,11 +140,47 @@ export function useTitleStyleUpdaters({
      if (!oldPreset) return
      onTitleSettingsChange({
        ...titleSettings,
-        color: oldPreset.style.color,
-        bold: oldPreset.style.bold,
-        italic: oldPreset.style.italic,
-        stroke: oldPreset.style.stroke,
-        shadow: oldPreset.style.shadow,
+        color: oldPreset.style.color as string,
+        bold: oldPreset.style.bold as boolean,
+        italic: oldPreset.style.italic as boolean,
+        stroke: oldPreset.style.stroke as boolean,
+        shadow: oldPreset.style.shadow as boolean,
+      })
+    },
+    [titleSettings, onTitleSettingsChange],
+  )
+
+  /** 应用模板：用模板（camelCase TitleSettings）覆盖样式字段，保留 title/aiAutoSelect */
+  const applyTemplate = useCallback(
+    (tpl: TitleSettings) => {
+      onTitleSettingsChange({
+        ...titleSettings,
+        // 覆盖样式字段
+        position: tpl.position,
+        posX: tpl.posX,
+        posY: tpl.posY,
+        font: tpl.font,
+        size: tpl.size,
+        bold: tpl.bold,
+        italic: tpl.italic,
+        stroke: tpl.stroke,
+        shadow: tpl.shadow,
+        color: tpl.color,
+        lineHeight: tpl.lineHeight,
+        marginTop: tpl.marginTop,
+        maxCharsPerLine: tpl.maxCharsPerLine,
+        strokeWidth: tpl.strokeWidth,
+        strokeColor: tpl.strokeColor,
+        shadowOffsetX: tpl.shadowOffsetX,
+        shadowOffsetY: tpl.shadowOffsetY,
+        shadowBlur: tpl.shadowBlur,
+        shadowColor: tpl.shadowColor,
+        bgEnabled: tpl.bgEnabled,
+        bgColor: tpl.bgColor,
+        bgPadding: tpl.bgPadding,
+        bgRadius: tpl.bgRadius,
+        lineOverrides: [],
+        // coverTitle 保留用户当前值，不强制覆盖
      })
    },
    [titleSettings, onTitleSettingsChange],
@@ -149,6 +209,7 @@ export function useTitleStyleUpdaters({
    toggleStroke,
    toggleShadow,
    applyPreset,
+    applyTemplate,
    updateStyle,
  }
 }
@@ -805,8 +805,9 @@ def _run_inference(
            crop = frame[y1:y2_eff, x1:x2]
            if crop.size == 0:
                continue
-            crop_rgb = cv2.cvtColor(crop, cv2.COLOR_BGR2RGB)
-            crop_resized = cv2.resize(crop_rgb, (256, 256), interpolation=cv2.INTER_LANCZOS4)
+            # 直接传 BGR 给 VAE：VAE 内部 preprocess_img 已做 BGR→RGB 转换，
+            # 此处再 cvtColor 会造成双重转换、R/B 通道互换（蓝色块根因）。
+            crop_resized = cv2.resize(crop, (256, 256), interpolation=cv2.INTER_LANCZOS4)
            # 使用 VAE 的 get_latents_for_unet 得到 8 通道输入
            # get_latents_for_unet 内部: preprocess(half_mask=True) encode + preprocess(half_mask=False) encode → cat → [1,8,32,32]
            latents = vae.get_latents_for_unet(crop_resized).detach().cpu()