Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 xiaoxia
|
493e85ce0e | ||
|
xiaoxia
|
445267a3b2 | ||
|
xiaoxia
|
42d6e45089 | ||
|
xiaoxia
|
eaed4b4cbf | ||
|
xiaoxia
|
2b4bcefc57 | ||
|
xiaoxia
|
6097dacbd3 |
Generated
+5
-3
@@ -12,6 +12,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",
|
||||
@@ -3005,9 +3007,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.21",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
|
||||
"integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
|
||||
"version": "1.11.23",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.23.tgz",
|
||||
"integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
|
||||
@@ -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",
|
||||
|
||||
Generated
+1642
-3087
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -1,211 +1,391 @@
|
||||
/* ============================================================
|
||||
标题模板系统（#2003）：选择器 + 编辑器 + 保存弹窗
|
||||
标题模板系统 v3（按 sketch 重构）
|
||||
- 大卡片网格（图片背景 + 透明 Canvas 叠字 + 始终可见操作按钮）
|
||||
- 编辑器弹窗（左竖屏预览 + 右参数 Tab）
|
||||
============================================================ */
|
||||
|
||||
/* ── Modal 头部 ── */
|
||||
.tt-modal-title {
|
||||
/* ── 面板容器（模板模式） ── */
|
||||
.ttv3-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.ttv3-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
.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;
|
||||
.ttv3-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
margin: 0 0 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.tt-empty {
|
||||
padding: 32px 16px;
|
||||
.ttv3-empty {
|
||||
background: #f8f8fc;
|
||||
border-radius: 12px;
|
||||
padding: 28px 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;
|
||||
color: #aaa;
|
||||
}
|
||||
.tt-empty-emoji {
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
.ttv3-empty-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ttv3-empty-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── 卡片网格（4列） ── */
|
||||
.tt-grid {
|
||||
/* ── 卡片网格：minmax(180px,1fr) 自适应 ── */
|
||||
.ttv3-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 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;
|
||||
/* ── 卡片：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;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
.tt-card:hover {
|
||||
border-color: var(--primary-color, #7c3aed);
|
||||
.ttv3-card:hover {
|
||||
border-color: #c5c0f0;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.tt-card.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);
|
||||
}
|
||||
|
||||
/* ── 预览区 ── */
|
||||
.tt-card-preview {
|
||||
/* ── 卡片预览区（3:4） ── */
|
||||
.ttv3-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
position: relative;
|
||||
height: 80px;
|
||||
background: #0f172a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 11px 11px 0 0;
|
||||
}
|
||||
.tt-card-preview canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── 标签 ── */
|
||||
.tt-tag {
|
||||
/* ── 左上角角标（系统/我的） ── */
|
||||
.ttv3-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
.tt-tag.sys {
|
||||
background: rgba(124, 58, 237, 0.85);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.tt-tag.mine {
|
||||
background: rgba(16, 185, 129, 0.9);
|
||||
color: #fff;
|
||||
.ttv3-badge--sys {
|
||||
background: rgba(108, 92, 231, 0.88);
|
||||
}
|
||||
.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;
|
||||
.ttv3-badge--mine {
|
||||
background: rgba(0, 184, 148, 0.88);
|
||||
}
|
||||
|
||||
/* ── 卡片操作按钮（hover 显示） ── */
|
||||
.tt-card-actions {
|
||||
/* ── 右上角勾选圆圈 ── */
|
||||
.ttv3-check {
|
||||
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 {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
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;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
transition: 0.15s;
|
||||
gap: 3px;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tt-ico-btn:hover {
|
||||
background: var(--primary-color, #7c3aed);
|
||||
.ttv3-act:hover:not(:disabled) {
|
||||
background: #f5f5fa;
|
||||
border-color: #d5d3e8;
|
||||
}
|
||||
.tt-ico-btn.danger:hover {
|
||||
background: #ef4444;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── 卡片底部 meta ── */
|
||||
.tt-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary, #1f2937);
|
||||
/* ── FillPreview 公共容器 ── */
|
||||
.tt-fill-canvas-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.tt-card-emoji {
|
||||
font-size: 13px;
|
||||
|
||||
/* ── 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;
|
||||
}
|
||||
.tt-card-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── 编辑器（左右布局） ── */
|
||||
.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 {
|
||||
.ttv3-editor-right {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
overflow-y: auto;
|
||||
max-height: 65vh;
|
||||
padding-right: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tt-editor {
|
||||
grid-template-columns: 1fr;
|
||||
/* 侧栏较窄时（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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,57 @@
|
||||
/**
|
||||
* 标题模板编辑器（#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"
|
||||
import { useTitleTemplates } from "./useTitleTemplates"
|
||||
import type { TitleTemplate } from "./template-types"
|
||||
import type { TitleStyleConfig } from "./types"
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
template: TitleTemplate
|
||||
onClose: () => void
|
||||
onSaved: (template: TitleTemplate) => void
|
||||
/** 用户点击保存：将编辑结果回调给父组件（父组件统一做 CRUD，避免双 hook 实例不同步） */
|
||||
onSave: (data: { name: string; emoji: string; style: Partial<TitleStyleConfig> }) => void
|
||||
}
|
||||
|
||||
const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved }) => {
|
||||
const { updateTemplate, createTemplate } = useTitleTemplates()
|
||||
// 编辑态：完整 TitleSettings（camelCase）
|
||||
/** 编辑器预览用的背景图（复用卡片池第一张） */
|
||||
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: "标题预览",
|
||||
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 = () => {
|
||||
@@ -62,34 +63,32 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
|
||||
setSaving(true)
|
||||
try {
|
||||
const snake = camelToTitleStyleConfig(settings)
|
||||
if (template.isBuiltin) {
|
||||
// 内置模板保存时创建一个副本
|
||||
const t = createTemplate({ name, description: formDesc, emoji: formEmoji, style: snake })
|
||||
onSaved(t)
|
||||
} else {
|
||||
updateTemplate(template.id, { name, description: formDesc, emoji: formEmoji, style: snake })
|
||||
onSaved({
|
||||
...template,
|
||||
name,
|
||||
description: formDesc,
|
||||
emoji: formEmoji,
|
||||
style: snake,
|
||||
updatedAt: new Date().toISOString(),
|
||||
})
|
||||
}
|
||||
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.isBuiltin ? `复制模板：${template.name}` : `编辑模板：${template.name}`}
|
||||
title={
|
||||
!template.id
|
||||
? "新建模板"
|
||||
: 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 +96,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 +155,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>
|
||||
|
||||
@@ -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
|
||||
@@ -127,6 +127,7 @@ export interface TitlePreset {
|
||||
}
|
||||
|
||||
const BASE: Partial<TitleStyleConfig> = {
|
||||
position: "bottom",
|
||||
line_overrides: [],
|
||||
cover_title_config: null,
|
||||
}
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
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> {
|
||||
@@ -96,3 +98,28 @@ export function buildPresetPreviewSettings(
|
||||
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,7 +10,6 @@
|
||||
import React, { useMemo, useState, useEffect } from "react"
|
||||
import { Input } from "antd"
|
||||
import TitleStylePanel from "@/pages/generate/components/title/TitleStylePanel"
|
||||
import TitleTemplateSelector from "@/components/title/TitleTemplateSelector"
|
||||
import type { TitleTemplate } from "@/components/title/template-types"
|
||||
|
||||
import TitleLibraryAutoComplete from "@/pages/generate/components/title/TitleLibraryAutoComplete"
|
||||
@@ -32,8 +31,7 @@ interface PanelTitleConfigProps {
|
||||
const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpdate }) => {
|
||||
/** TitleStylePanel 内部高亮的预设 key（面板本地状态） */
|
||||
const [activePreset, setActivePreset] = useState<string | null>(null)
|
||||
const [templateModalOpen, setTemplateModalOpen] = useState(false)
|
||||
const [activeTemplate, setActiveTemplate] = useState<TitleTemplate | null>(null)
|
||||
const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null)
|
||||
|
||||
/** 标题库选项（#1894：从文案库 scripts[].title 取候选） */
|
||||
const [titleOptions, setTitleOptions] = useState<TitleOption[]>([])
|
||||
@@ -334,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 多行 + 标题库选择 */}
|
||||
@@ -381,8 +413,8 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
|
||||
showCoverToggle
|
||||
previewWidth={280}
|
||||
enableTemplates
|
||||
onOpenTemplates={() => setTemplateModalOpen(true)}
|
||||
activeTemplateLabel={activeTemplate?.name ?? null}
|
||||
selectedTemplateId={selectedTemplateId}
|
||||
onApplyTemplate={handleApplyTemplate}
|
||||
activePreset={activePreset}
|
||||
titlePresets={
|
||||
TITLE_PRESETS as unknown as React.ComponentProps<typeof TitleStylePanel>["titlePresets"]
|
||||
@@ -391,45 +423,6 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
|
||||
FONT_OPTIONS={FONT_OPTIONS}
|
||||
/>
|
||||
|
||||
<TitleTemplateSelector
|
||||
open={templateModalOpen}
|
||||
selectedTemplateId={activeTemplate?.id}
|
||||
onClose={() => setTemplateModalOpen(false)}
|
||||
onSelect={(settings, tpl) => {
|
||||
setActiveTemplate(tpl)
|
||||
setActivePreset(null)
|
||||
setTemplateModalOpen(false)
|
||||
// 把 camelCase settings 转回 snake_case 并 onUpdate
|
||||
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,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 自动生成字幕 */}
|
||||
<div className="aa-subtitle-toggle">
|
||||
<label className="aa-checkbox-row">
|
||||
|
||||
@@ -29,8 +29,6 @@ import { usePreviewAssets } from "./hooks/usePreviewAssets"
|
||||
import { useBatchVariantPlans } from "./hooks/useBatchVariantPlans"
|
||||
import { useVariantVoicePreview } from "./hooks/useVariantVoicePreview"
|
||||
import { useTitleStyleUpdaters } from "./hooks/useStep4Title/useTitleStyleUpdaters"
|
||||
import TitleTemplateSelector from "@/components/title/TitleTemplateSelector"
|
||||
import type { TitleTemplate } from "@/components/title/template-types"
|
||||
import { getAssetsByKind } from "@/api/assets"
|
||||
import { previewTts } from "@/api/tts"
|
||||
import { usePointsStore } from "@/store/pointsStore"
|
||||
@@ -44,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(() => {
|
||||
@@ -151,8 +152,6 @@ const GeneratePage: React.FC = () => {
|
||||
const [voiceModalOpen, setVoiceModalOpen] = useState(false)
|
||||
const [scriptModalOpen, setScriptModalOpen] = useState(false)
|
||||
const [ttsModalOpen, setTtsModalOpen] = useState(false)
|
||||
const [titleTemplateModalOpen, setTitleTemplateModalOpen] = useState(false)
|
||||
const [activeTitleTemplate, setActiveTitleTemplate] = useState<TitleTemplate | null>(null)
|
||||
|
||||
/* ── 标题样式回调 ── */
|
||||
const styleUpdaters = useTitleStyleUpdaters({
|
||||
@@ -581,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,
|
||||
}}
|
||||
@@ -648,8 +659,11 @@ const GeneratePage: React.FC = () => {
|
||||
activePreset={styleUpdaters.activePreset}
|
||||
titlePresets={styleUpdaters.titlePresets}
|
||||
enableTemplates
|
||||
onOpenTemplates={() => setTitleTemplateModalOpen(true)}
|
||||
activeTemplateLabel={activeTitleTemplate?.name ?? null}
|
||||
selectedTemplateId={selectedTitleTemplateId}
|
||||
onApplyTemplate={(settings, tpl) => {
|
||||
styleUpdaters.applyTemplate(settings)
|
||||
setSelectedTitleTemplateId(tpl.id)
|
||||
}}
|
||||
bgm={bgm}
|
||||
bgmConfig={bgmConfig}
|
||||
coverSettings={coverSettings}
|
||||
@@ -814,17 +828,6 @@ const GeneratePage: React.FC = () => {
|
||||
onCancel={() => setTtsModalOpen(false)}
|
||||
onSynthesized={handleTtsSynthesized}
|
||||
/>
|
||||
{/* 标题模板选择器 */}
|
||||
<TitleTemplateSelector
|
||||
open={titleTemplateModalOpen}
|
||||
selectedTemplateId={activeTitleTemplate?.id}
|
||||
onClose={() => setTitleTemplateModalOpen(false)}
|
||||
onSelect={(settings, tpl) => {
|
||||
styleUpdaters.applyTemplate(settings)
|
||||
setActiveTitleTemplate(tpl)
|
||||
setTitleTemplateModalOpen(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -60,8 +61,8 @@ export interface GenerateStepContentProps {
|
||||
style: Record<string, unknown>
|
||||
}>
|
||||
enableTemplates?: boolean
|
||||
onOpenTemplates?: () => void
|
||||
activeTemplateLabel?: string | null
|
||||
selectedTemplateId?: string | null
|
||||
onApplyTemplate?: (settings: import("../types").TitleSettings, template: TitleTemplate) => void
|
||||
/* ── 封面 ── */
|
||||
coverSettings: CoverConfig
|
||||
onCoverSettingsChange: (settings: CoverConfig) => void
|
||||
@@ -130,8 +131,8 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
onApplyPreset,
|
||||
onUpdateStyle,
|
||||
enableTemplates,
|
||||
onOpenTemplates,
|
||||
activeTemplateLabel,
|
||||
selectedTemplateId,
|
||||
onApplyTemplate,
|
||||
activePreset,
|
||||
titlePresets,
|
||||
coverSettings,
|
||||
@@ -208,8 +209,8 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
activePreset={activePreset}
|
||||
titlePresets={titlePresets}
|
||||
enableTemplates={enableTemplates}
|
||||
onOpenTemplates={onOpenTemplates}
|
||||
activeTemplateLabel={activeTemplateLabel}
|
||||
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
|
||||
@@ -50,8 +51,8 @@ interface Step4TitleSettingsProps {
|
||||
previewTitles?: string[]
|
||||
onPreviewTitlesChange?: (titles: string[]) => void
|
||||
enableTemplates?: boolean
|
||||
onOpenTemplates?: () => void
|
||||
activeTemplateLabel?: string | null
|
||||
selectedTemplateId?: string | null
|
||||
onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
|
||||
}
|
||||
|
||||
/** 从本地 AI 标题模板池按主题词生成 N 个不同标题（与单视频 AI 生成同源） */
|
||||
@@ -102,8 +103,8 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
previewTitles,
|
||||
onPreviewTitlesChange,
|
||||
enableTemplates,
|
||||
onOpenTemplates,
|
||||
activeTemplateLabel,
|
||||
selectedTemplateId,
|
||||
onApplyTemplate,
|
||||
} = props
|
||||
|
||||
const isBatch = previewCount > 1
|
||||
@@ -307,8 +308,8 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
POSITION_OPTIONS={POSITION_OPTIONS}
|
||||
FONT_OPTIONS={FONT_OPTIONS}
|
||||
enableTemplates={enableTemplates}
|
||||
onOpenTemplates={onOpenTemplates}
|
||||
activeTemplateLabel={activeTemplateLabel}
|
||||
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,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user