feat(title): 标题模板 v3 重构 - 图片背景大卡片+独立编辑器

按 sketch v3 重写标题模板交互：
- 主面板(enableTemplates=true)只展示大卡片网格（3:4竖版，minmax(180px,1fr)自适应）
- 卡片：图片背景(3张轮换) + 暗色渐变遮罩 + 透明Canvas真实字体渲染
- 左上角系统/我的彩色标签，右上角紫色勾选圆圈
- 底部始终可见 编辑/复制/导出/删除 4 按钮（编辑紫色高亮，系统模板编辑/删除置灰）
- 选中卡片：紫色边框(#6c5ce7)+紫色阴影；hover 轻微上浮+阴影
- 编辑器弹窗(860px)：左300px(9:16预览+名称输入) / 右参数Tab(基础/描边/阴影/背景/排版)
- 新建模板以当前选中模板样式为起点
- TitleMiniPreview 新增 transparent/portrait props 支持透明背景+竖屏比例
- TitleStylePanel 新增 paramsOnly 模式（仅渲染参数Tab，供编辑器右侧复用）
- 删除废弃 TitleTemplateSelector.tsx（PR#2014弹窗选择器）
- 公共组件两入口（智能剪辑Step4 + AI数字人PanelTitleConfig）无需额外改动

apps/web/src/components/title/TitleTemplate.css

@@ -1,383 +1,391 @@
 /* ============================================================
-   标题模板系统（#2003）：选择器 + 编辑器 + 保存弹窗
+   标题模板系统 v3（按 sketch 重构）
+   - 大卡片网格（图片背景 + 透明 Canvas 叠字 + 始终可见操作按钮）
+   - 编辑器弹窗（左竖屏预览 + 右参数 Tab）
    ============================================================ */
 
-/* ── Modal 头部 ── */
-.tt-modal-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: 32px;
-}
-.tt-modal .ant-modal-body {
-  padding: 16px 20px;
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-/* ── 分组 ── */
-.tt-section {
-  margin-bottom: 20px;
-}
-.tt-section:last-child {
-  margin-bottom: 0;
-}
-.tt-section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary, #6b7280);
-  margin: 0 0 10px;
-}
-
-/* ── 空状态 ── */
-.tt-empty {
-  padding: 32px 16px;
-  text-align: center;
-  color: var(--text-secondary, #9ca3af);
-  background: var(--bg-secondary, #f9fafb);
-  border: 1px dashed var(--border-color, #e5e7eb);
-  border-radius: 8px;
-  font-size: 13px;
-}
-.tt-empty-emoji {
-  font-size: 32px;
-  margin-bottom: 8px;
-}
-
-/* ── 卡片网格（4列） ── */
-.tt-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-}
-@media (max-width: 768px) {
-  .tt-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.tt-card {
-  border: 2px solid var(--border-color, #e5e7eb);
-  border-radius: 10px;
-  background: #fff;
-  cursor: pointer;
-  transition: all 0.18s ease;
-  overflow: hidden;
-  position: relative;
-}
-.tt-card:hover {
-  border-color: var(--primary-color, #7c3aed);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
-}
-.tt-card.active {
-  border-color: var(--primary-color, #7c3aed);
-  background: #faf5ff;
-  box-shadow: 0 0 0 1px var(--primary-color, #7c3aed);
-}
-
-/* ── 预览区 ── */
-.tt-card-preview {
-  position: relative;
-  height: 80px;
-  background: #0f172a;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.tt-card-preview canvas {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-/* ── 标签 ── */
-.tt-tag {
-  position: absolute;
-  top: 6px;
-  left: 6px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
-}
-.tt-tag.sys {
-  background: rgba(124, 58, 237, 0.85);
-  color: #fff;
-}
-.tt-tag.mine {
-  background: rgba(16, 185, 129, 0.9);
-  color: #fff;
-}
-.tt-check {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--primary-color, #7c3aed);
-  color: #fff;
-  font-size: 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── 卡片操作按钮（hover 显示） ── */
-.tt-card-actions {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: none;
-  gap: 4px;
-  align-items: center;
-}
-.tt-card.active .tt-check + .tt-card-actions {
-  top: 30px;
-}
-.tt-card:hover .tt-card-actions {
-  display: flex;
-}
-.tt-ico-btn {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: rgba(0, 0, 0, 0.55);
-  color: #fff;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  padding: 0;
-  transition: 0.15s;
-}
-.tt-ico-btn:hover {
-  background: var(--primary-color, #7c3aed);
-}
-.tt-ico-btn.danger:hover {
-  background: #ef4444;
-}
-
-/* ── 卡片底部 meta ── */
-.tt-card-meta {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  font-size: 12px;
-  color: var(--text-primary, #1f2937);
-}
-.tt-card-emoji {
-  font-size: 13px;
-  flex-shrink: 0;
-}
-.tt-card-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-/* ── 编辑器（左右布局） ── */
-.tt-editor {
-  display: grid;
-  grid-template-columns: 360px 1fr;
-  gap: 16px;
-  min-height: 480px;
-}
-.tt-editor-preview {
-  background: #0f172a;
-  border-radius: 10px;
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 400px;
-}
-.tt-editor-panel {
-  overflow-y: auto;
-  max-height: 65vh;
-  padding-right: 4px;
-}
-
-@media (max-width: 768px) {
-  .tt-editor {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ============================================================
-   #2003 内联网格（直接嵌在 TitleStylePanel 预览下方）
-   ============================================================ */
-
-.tt-inline-wrap {
+/* ── 面板容器（模板模式） ── */
+.ttv3-panel {
   display: flex;
   flex-direction: column;
   gap: 14px;
 }
-
-/* section header (label + 新建按钮) */
-.tt-section-header {
+.ttv3-header {
   display: flex;
-  align-items: center;
   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;
 }
-.tt-section-header .tt-section-label,
-.tt-section-header .tt-section-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary, #6b7280);
-  margin: 0;
-}
-.tt-new-btn.ant-btn {
-  border-radius: 6px;
-  font-size: 12px;
-  height: 26px;
-  padding: 0 10px;
+.ttv3-section {
+  margin-bottom: 6px;
 }
 
-/* 内联网格：自适应列数（窄面板 2 列、宽面板 3-4 列） */
-.tt-grid--inline {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+/* ── 空状态 ── */
+.ttv3-empty {
+  background: #f8f8fc;
+  border-radius: 12px;
+  padding: 28px 16px;
+  text-align: center;
+  color: #aaa;
 }
-@media (min-width: 1200px) {
-  .tt-grid--inline {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
+.ttv3-empty-icon {
+  font-size: 28px;
+  margin-bottom: 6px;
 }
-@media (min-width: 1600px) {
-  .tt-grid--inline {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
+.ttv3-empty-text {
+  font-size: 12px;
 }
 
-/* 内联卡片 */
-.tt-card--inline {
-  display: flex;
-  flex-direction: column;
-  border: 2px solid var(--border-color, #e5e7eb);
-  border-radius: 8px;
+/* ── 卡片网格：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.18s ease;
+  transition: all 0.15s ease;
   overflow: hidden;
   padding: 0;
-  font: inherit;
+  font-family: inherit;
   text-align: left;
-  position: relative;
 }
-.tt-card--inline:hover {
-  border-color: var(--primary-color, #7c3aed);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
+.ttv3-card:hover {
+  border-color: #c5c0f0;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
 }
-.tt-card--inline.active {
-  border-color: var(--primary-color, #7c3aed);
-  background: #faf5ff;
-  box-shadow: 0 0 0 1px var(--primary-color, #7c3aed);
+.ttv3-card.selected {
+  border-color: #6c5ce7;
+  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
 }
 
-/* 大预览区（上半）：深色背景+canvas */
-.tt-card-preview--lg {
+/* ── 卡片预览区（3:4） ── */
+.ttv3-preview {
+  width: 100%;
+  aspect-ratio: 3/4;
   position: relative;
-  height: 90px;
-  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  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;
-  overflow: hidden;
+  font-size: 12px;
+  color: transparent;
+  transition: all 0.15s;
 }
-.tt-card-preview--lg canvas {
-  max-width: 100%;
-  max-height: 100%;
+.ttv3-check.on {
+  background: #6c5ce7;
+  border-color: #fff;
+  color: #fff;
 }
 
-/* 选中圆点（单选 radio 样式） */
-.tt-radio-dot {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid var(--primary-color, #7c3aed);
-  background: #fff;
+/* ── 卡片底栏（名称 + 操作按钮） ── */
+.ttv3-footer {
+  padding: 10px 10px 12px;
 }
-.tt-radio-dot::after {
-  content: "";
-  position: absolute;
-  inset: 2px;
-  border-radius: 50%;
-  background: var(--primary-color, #7c3aed);
-}
-
-/* 标签位置微调（内联卡片） */
-.tt-card--inline .tt-tag {
-  top: 8px;
-  left: 8px;
-}
-
-/* hover/选中时操作按钮位置（避开 radio-dot） */
-.tt-card--inline .tt-card-actions {
-  top: 8px;
-  right: 8px;
-  display: none;
-  gap: 4px;
-}
-.tt-card--inline:hover .tt-card-actions {
-  display: flex;
-}
-/* 选中态 hover 时 actions 下移以避开 radio-dot */
-.tt-card--inline.active:hover .tt-card-actions {
-  top: 30px;
-}
-.tt-card--inline.active .tt-radio-dot {
-  display: block;
-}
-.tt-card--inline.active:hover .tt-radio-dot {
-  display: none;
-}
-
-/* 底部 meta（下半）：emoji + name */
-.tt-card-meta--lg {
+.ttv3-name-row {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 8px;
-  font-size: 12px;
-  color: var(--text-primary, #1f2937);
-  background: #fff;
-  border-top: 1px solid var(--border-light, #f3f4f6);
-}
-.tt-card--inline.active .tt-card-meta--lg {
-  background: #faf5ff;
-}
-.tt-card-meta--lg .tt-card-emoji {
+  margin-bottom: 8px;
   font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #1f2937;
+}
+.ttv3-emoji {
+  font-size: 14px;
   flex-shrink: 0;
 }
-.tt-card-meta--lg .tt-card-name {
-  flex: 1;
+.ttv3-name {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  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;
 }
 
-/* 空状态（紧凑型） */
-.tt-empty--sm {
-  padding: 16px 12px;
+/* ── 操作按钮：始终可见，等宽排列 ── */
+.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;
-  gap: 6px;
-  border-radius: 6px;
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  min-width: 44px;
 }
-.tt-empty--sm .tt-empty-emoji {
-  font-size: 22px;
-  margin-bottom: 0;
+.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;
+  }
 }

apps/web/src/components/title/TitleTemplateEditor.tsx

@@ -1,15 +1,18 @@
 /**
- * 标题模板编辑器（#2003）
+ * 标题模板编辑器（v3 重构）
  *
- * 左侧大预览（400×225，16:9），右侧复用 TitleStylePanel 进行参数调整。
- * 编辑完成后点"保存"弹出 SaveTemplateModal（名称必填），保存后回调 onSaved。
+ * - Modal 弹窗 860px 宽
+ * - 左侧：300px 竖屏预览区（图片背景+暗色渐变遮罩+透明 Canvas 叠字）+ 模板名称输入框
+ * - 右侧：参数 Tab 面板（基础/描边/阴影/背景/排版），复用 TitleStylePanel 的 paramsOnly 模式
+ * - 底部：取消 / 保存模板 按钮
+ * - 内置模板编辑时保存会创建副本（带"副本"逻辑由 handleSave 处理）
  */
-import React, { useState } from "react"
+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, TITLE_PRESETS as SYSTEM_TITLE_PRESETS } from "./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"
@@ -23,34 +26,32 @@ interface Props {
   onSaved: (template: TitleTemplate) => void
 }
 
+/** 编辑器预览用的背景图（复用卡片池第一张） */
+const EDITOR_BG = "/title-templates/portrait1.jpg"
+
 const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved }) => {
   const { updateTemplate, createTemplate } = useTitleTemplates()
-  // 编辑态：完整 TitleSettings（camelCase）
   const [settings, setSettings] = useState<TitleSettings>(() => ({
     ...DEFAULT_TITLE_SETTINGS_FULL,
     ...titleStyleConfigToCamel(template.style || {}),
-    title: "标题预览",
+    title: "预览标题文字",
   }))
   const [formName, setFormName] = useState(template.name || "")
-  const [formDesc, setFormDesc] = useState(template.description || "")
   const [formEmoji, setFormEmoji] = useState(template.emoji || "✨")
   const [saving, setSaving] = useState(false)
 
-  // 每次 open 重置
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setSettings({
         ...DEFAULT_TITLE_SETTINGS_FULL,
         ...titleStyleConfigToCamel(template.style || {}),
-        title: "标题预览",
+        title: "预览标题文字",
       })
       setFormName(template.name || "")
-      setFormDesc(template.description || "")
       setFormEmoji(template.emoji || "✨")
     }
   }, [open, template])
 
-  /** 把单个 updater 包装成 setSettings patch */
   const upd = (patch: Partial<TitleSettings>) => setSettings((s) => ({ ...s, ...patch }))
 
   const handleSave = () => {
@@ -63,15 +64,13 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
     try {
       const snake = camelToTitleStyleConfig(settings)
       if (template.isBuiltin) {
-        // 内置模板保存时创建一个副本
-        const t = createTemplate({ name, description: formDesc, emoji: formEmoji, style: snake })
+        const t = createTemplate({ name, emoji: formEmoji, style: snake })
         onSaved(t)
       } else {
-        updateTemplate(template.id, { name, description: formDesc, emoji: formEmoji, style: snake })
+        updateTemplate(template.id, { name, emoji: formEmoji, style: snake })
         onSaved({
           ...template,
           name,
-          description: formDesc,
           emoji: formEmoji,
           style: snake,
           updatedAt: new Date().toISOString(),
@@ -82,14 +81,20 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
     }
   }
 
+  // 编辑器内的预览用 settings：字号适配竖屏
+  const previewSettings = useMemo<TitleSettings>(() => {
+    // 竖屏宽度 200px，按比例缩放字号，让预览看起来协调
+    return { ...settings, size: Math.round(settings.size * 0.55) }
+  }, [settings])
+
   return (
     <Modal
-      title={template.isBuiltin ? `复制模板：${template.name}` : `编辑模板：${template.name}`}
+      title={template.isBuiltin ? `基于「${template.name}」创建模板` : `编辑模板：${template.name}`}
       open={open}
       onCancel={onClose}
-      width={960}
+      width={860}
       footer={
-        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
           <Button onClick={onClose}>取消</Button>
           <Button type="primary" loading={saving} onClick={handleSave}>
             保存模板
@@ -97,54 +102,50 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
         </div>
       }
       destroyOnClose
-      className="tt-modal tt-editor-modal"
+      className="ttv3-modal"
+      styles={{ body: { padding: 0 } }}
     >
-      {/* 模板名称/描述表单 */}
-      <div
-        style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr", gap: 10, marginBottom: 14 }}
-      >
-        <div>
-          <label style={{ fontSize: 12, fontWeight: 600, display: "block", marginBottom: 6 }}>
-            图标
-          </label>
-          <Input
-            value={formEmoji}
-            maxLength={2}
-            style={{ textAlign: "center" }}
-            onChange={(e) => setFormEmoji(e.target.value)}
-          />
+      <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>
-        <div>
-          <label style={{ fontSize: 12, fontWeight: 600, display: "block", marginBottom: 6 }}>
-            模板名称<span style={{ color: "#ef4444" }}> *</span>
-          </label>
-          <Input
-            placeholder="给模板起个名字，例如：抖音爆款黄"
-            value={formName}
-            maxLength={20}
-            onChange={(e) => setFormName(e.target.value)}
-          />
-        </div>
-        <div>
-          <label style={{ fontSize: 12, fontWeight: 600, display: "block", marginBottom: 6 }}>
-            模板描述
-          </label>
-          <Input
-            placeholder="简短描述（可选）"
-            value={formDesc}
-            maxLength={40}
-            onChange={(e) => setFormDesc(e.target.value)}
-          />
-        </div>
-      </div>
-
-      <div className="tt-editor">
-        {/* 左侧实时预览 */}
-        <div className="tt-editor-preview">
-          <TitleMiniPreview settings={settings} width={320} sampleText="标题预览" height={180} />
-        </div>
-        {/* 右侧编辑器 — 复用 TitleStylePanel 的细粒度能力 */}
-        <div className="tt-editor-panel">
+        {/* 右侧：参数 Tab */}
+        <div className="ttv3-editor-right">
           <TitleStylePanel
             settings={settings}
             onUpdatePosition={(p) => upd({ position: p, posX: null, posY: null })}
@@ -160,23 +161,15 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
               })
             }
             onToggleShadow={() => upd({ shadow: !settings.shadow })}
-            onApplyPreset={(key) => {
-              // 在编辑器中点击系统预设：把 preset 作为编辑起点
-              const pp = SYSTEM_TITLE_PRESETS.find((x) => x.key === key)
-              if (pp) {
-                setSettings((cs) => ({
-                  ...cs,
-                  ...titleStyleConfigToCamel(pp.style),
-                  lineOverrides: [],
-                  title: "标题预览",
-                }))
-              }
+            onApplyPreset={() => {
+              /* 编辑器内不使用系统预设快捷键 */
             }}
             onUpdateStyle={(patch) => upd(patch)}
             activePreset={null}
             titlePresets={[]}
             POSITION_OPTIONS={POSITION_OPTIONS}
             FONT_OPTIONS={FONT_OPTIONS}
+            paramsOnly
           />
         </div>
       </div>

apps/web/src/components/title/TitleTemplateSelector.tsx

@@ -1,237 +0,0 @@
-/**
- * 标题模板选择器（#2003）
- *
- * 参考「IP智能体设置 → 字幕设置 → 字幕模板」交互：
- * - Modal 打开后展示模板卡片网格（4 列），每张卡片含 Canvas 预览 + 名称 + 标签
- * - 系统模板（sys:）：只能「复制为我的」「应用」
- * - 自定义模板（usr:）：支持编辑/复制/导出/删除
- * - 右上角「+ 新建模板」按钮进入编辑器
- *
- * 受控使用：visible/onCancel/onSelect
- */
-import React, { useMemo, useState } from "react"
-import { Modal, Button, message, Popconfirm, Tooltip } from "antd"
-import {
-  PlusOutlined,
-  EditOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  ExportOutlined,
-  CheckOutlined,
-} from "@ant-design/icons"
-import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
-import type { TitleSettings } from "../../pages/generate/types"
-import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
-import { titleStyleConfigToCamel } from "./utils"
-import { useTitleTemplates } from "./useTitleTemplates"
-import type { TitleTemplate } from "./template-types"
-import TitleTemplateEditor from "./TitleTemplateEditor"
-import "./TitleTemplate.css"
-
-interface Props {
-  open: boolean
-  /** 当前选中模板 id（可选） */
-  selectedTemplateId?: string | null
-  onClose: () => void
-  /** 选择/应用模板：返回 camelCase TitleSettings 给调用方 */
-  onSelect: (settings: TitleSettings, template: TitleTemplate) => void
-}
-
-/** 把模板 style 渲染为完整 TitleSettings（带默认值），用于预览 */
-function templateToSettings(t: TitleTemplate): TitleSettings {
-  return { ...DEFAULT_TITLE_SETTINGS_FULL, ...titleStyleConfigToCamel(t.style) }
-}
-
-const TitleTemplateSelector: React.FC<Props> = ({
-  open,
-  selectedTemplateId,
-  onClose,
-  onSelect,
-}) => {
-  const { templates, duplicateTemplate, deleteTemplate, exportTemplate, createTemplate } =
-    useTitleTemplates()
-  const [editingTemplate, setEditingTemplate] = useState<TitleTemplate | null>(null)
-  const [editorOpen, setEditorOpen] = useState(false)
-
-  const grouped = useMemo(() => {
-    return {
-      builtin: templates.filter((t) => t.isBuiltin),
-      custom: templates.filter((t) => !t.isBuiltin),
-    }
-  }, [templates])
-
-  const handleCreate = () => {
-    // 基于当前默认样式创建空白模板进入编辑
-    const t = createTemplate({
-      name: "我的标题模板",
-      style: {
-        font: DEFAULT_TITLE_SETTINGS_FULL.font,
-        size: 56,
-        color: "#ffffff",
-        bold: true,
-        italic: false,
-        stroke: true,
-        stroke_width: 4,
-        stroke_color: "#000000",
-        shadow: false,
-        bg_enabled: false,
-        line_height: 1.2,
-        max_chars_per_line: 10,
-        position: "bottom",
-        margin_top: 32,
-        line_overrides: [],
-        cover_title_config: null,
-      },
-    })
-    setEditingTemplate(t)
-    setEditorOpen(true)
-  }
-
-  const handleEdit = (t: TitleTemplate) => {
-    setEditingTemplate(t)
-    setEditorOpen(true)
-  }
-
-  const handleDuplicate = (t: TitleTemplate) => {
-    const dup = duplicateTemplate(t.id)
-    if (dup) message.success(`已复制：${dup.name}`)
-  }
-
-  const handleDelete = (t: TitleTemplate) => {
-    deleteTemplate(t.id)
-    message.success("已删除模板")
-  }
-
-  const handleExport = (t: TitleTemplate) => {
-    const json = exportTemplate(t.id)
-    if (!json) return
-    const blob = new Blob([json], { type: "application/json" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = `${t.name}.title-template.json`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const handleApply = (t: TitleTemplate) => {
-    const settings = templateToSettings(t)
-    onSelect(settings, t)
-  }
-
-  const renderCard = (t: TitleTemplate) => {
-    const isSelected = selectedTemplateId === t.id
-    const settings = templateToSettings(t)
-    return (
-      <div
-        key={t.id}
-        className={`tt-card${isSelected ? " active" : ""}`}
-        onClick={() => handleApply(t)}
-      >
-        <div className="tt-card-preview">
-          <TitleMiniPreview settings={settings} width={200} sampleText="标题预览" />
-          <span className={`tt-tag${t.isBuiltin ? " sys" : " mine"}`}>
-            {t.isBuiltin ? "系统" : "我的"}
-          </span>
-          {isSelected && (
-            <span className="tt-check">
-              <CheckOutlined />
-            </span>
-          )}
-          <div className="tt-card-actions" onClick={(e) => e.stopPropagation()}>
-            {!t.isBuiltin && (
-              <Tooltip title="编辑">
-                <button type="button" className="tt-ico-btn" onClick={() => handleEdit(t)}>
-                  <EditOutlined />
-                </button>
-              </Tooltip>
-            )}
-            <Tooltip title="复制">
-              <button type="button" className="tt-ico-btn" onClick={() => handleDuplicate(t)}>
-                <CopyOutlined />
-              </button>
-            </Tooltip>
-            <Tooltip title="导出">
-              <button type="button" className="tt-ico-btn" onClick={() => handleExport(t)}>
-                <ExportOutlined />
-              </button>
-            </Tooltip>
-            {!t.isBuiltin && (
-              <Popconfirm title="删除该模板？" onConfirm={() => handleDelete(t)}>
-                <Tooltip title="删除">
-                  <button type="button" className="tt-ico-btn danger">
-                    <DeleteOutlined />
-                  </button>
-                </Tooltip>
-              </Popconfirm>
-            )}
-          </div>
-        </div>
-        <div className="tt-card-meta">
-          <span className="tt-card-emoji">{t.emoji || "✨"}</span>
-          <span className="tt-card-name" title={t.name}>
-            {t.name}
-          </span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <Modal
-        title={
-          <div className="tt-modal-title">
-            <span>🎨 选择标题模板</span>
-            <Button type="primary" size="small" icon={<PlusOutlined />} onClick={handleCreate}>
-              新建模板
-            </Button>
-          </div>
-        }
-        open={open && !editorOpen}
-        onCancel={onClose}
-        footer={null}
-        width={880}
-        className="tt-modal"
-        destroyOnClose
-      >
-        <div className="tt-section">
-          <div className="tt-section-title">我的模板</div>
-          {grouped.custom.length === 0 ? (
-            <div className="tt-empty">
-              <div className="tt-empty-emoji">✨</div>
-              <div>还没有自定义模板，点击右上角「新建模板」创建第一个吧</div>
-            </div>
-          ) : (
-            <div className="tt-grid">{grouped.custom.map(renderCard)}</div>
-          )}
-        </div>
-
-        <div className="tt-section">
-          <div className="tt-section-title">系统模板</div>
-          <div className="tt-grid">{grouped.builtin.map(renderCard)}</div>
-        </div>
-      </Modal>
-
-      {editorOpen && editingTemplate && (
-        <TitleTemplateEditor
-          open={editorOpen}
-          template={editingTemplate}
-          onClose={() => {
-            setEditorOpen(false)
-            setEditingTemplate(null)
-          }}
-          onSaved={(t) => {
-            setEditorOpen(false)
-            setEditingTemplate(null)
-            message.success(`已保存：${t.name}`)
-            // 保存后自动应用
-            handleApply(t)
-          }}
-        />
-      )}
-    </>
-  )
-}
-
-export default TitleTemplateSelector

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

@@ -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) {
@@ -190,7 +199,7 @@ const TitleMiniPreview: React.FC<Props> = ({
         borderRadius: 6,
         display: "block",
         maxWidth: "100%",
-        background,
+        background: transparent ? "transparent" : background,
       }}
     />
   )