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

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;
+  }
 }