Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 saas-backend
|
05b5de2ea8 |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
@@ -1,391 +0,0 @@
|
||||
/* ============================================================
|
||||
标题模板系统 v3（按 sketch 重构）
|
||||
- 大卡片网格（图片背景 + 透明 Canvas 叠字 + 始终可见操作按钮）
|
||||
- 编辑器弹窗（左竖屏预览 + 右参数 Tab）
|
||||
============================================================ */
|
||||
|
||||
/* ── 面板容器（模板模式） ── */
|
||||
.ttv3-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.ttv3-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.ttv3-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #1f2937);
|
||||
}
|
||||
.ttv3-new-btn.ant-btn {
|
||||
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
|
||||
}
|
||||
.ttv3-new-btn.ant-btn:hover {
|
||||
background: linear-gradient(135deg, #5b4cdb, #8c83f5) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ttv3-section-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ttv3-section {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.ttv3-empty {
|
||||
background: #f8f8fc;
|
||||
border-radius: 12px;
|
||||
padding: 28px 16px;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
.ttv3-empty-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ttv3-empty-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── 卡片网格：minmax(180px,1fr) 自适应 ── */
|
||||
.ttv3-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── 卡片：3:4 竖版，圆角 14px ── */
|
||||
.ttv3-card {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
border: 3px solid #e8e8ed;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
.ttv3-card:hover {
|
||||
border-color: #c5c0f0;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ttv3-card.selected {
|
||||
border-color: #6c5ce7;
|
||||
box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
|
||||
}
|
||||
|
||||
/* ── 卡片预览区（3:4） ── */
|
||||
.ttv3-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 11px 11px 0 0;
|
||||
}
|
||||
.ttv3-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
/* 暗色渐变遮罩：顶部15%半透明黑 + 中部透明 + 底部45%黑 */
|
||||
.ttv3-vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.45) 0%,
|
||||
rgba(0, 0, 0, 0.15) 15%,
|
||||
transparent 30%,
|
||||
transparent 55%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 透明 Canvas 标题填充整个预览区 */
|
||||
.ttv3-preview .tt-fill-canvas-wrap {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.ttv3-preview .tt-fill-canvas-wrap canvas {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── 左上角角标（系统/我的） ── */
|
||||
.ttv3-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.ttv3-badge--sys {
|
||||
background: rgba(108, 92, 231, 0.88);
|
||||
}
|
||||
.ttv3-badge--mine {
|
||||
background: rgba(0, 184, 148, 0.88);
|
||||
}
|
||||
|
||||
/* ── 右上角勾选圆圈 ── */
|
||||
.ttv3-check {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.7);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: transparent;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.ttv3-check.on {
|
||||
background: #6c5ce7;
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── 卡片底栏（名称 + 操作按钮） ── */
|
||||
.ttv3-footer {
|
||||
padding: 10px 10px 12px;
|
||||
}
|
||||
.ttv3-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #1f2937;
|
||||
}
|
||||
.ttv3-emoji {
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ttv3-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.ttv3-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ttv3-tag--sys {
|
||||
background: #f0ecff;
|
||||
color: #6c5ce7;
|
||||
}
|
||||
.ttv3-tag--mine {
|
||||
background: #e6f9f4;
|
||||
color: #00b894;
|
||||
}
|
||||
|
||||
/* ── 操作按钮：始终可见，等宽排列 ── */
|
||||
.ttv3-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.ttv3-act {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #e8e8ed;
|
||||
background: #fff;
|
||||
border-radius: 7px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ttv3-act:hover:not(:disabled) {
|
||||
background: #f5f5fa;
|
||||
border-color: #d5d3e8;
|
||||
}
|
||||
.ttv3-act--primary {
|
||||
background: #6c5ce7;
|
||||
color: #fff;
|
||||
border-color: #6c5ce7;
|
||||
}
|
||||
.ttv3-act--primary:hover:not(:disabled) {
|
||||
background: #5b4cdb;
|
||||
border-color: #5b4cdb;
|
||||
}
|
||||
.ttv3-act--danger {
|
||||
color: #e74c3c;
|
||||
}
|
||||
.ttv3-act--danger:hover:not(:disabled) {
|
||||
background: #fef2f2;
|
||||
}
|
||||
.ttv3-act:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── FillPreview 公共容器 ── */
|
||||
.tt-fill-canvas-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── params-only（编辑器右侧）去掉多余 margin ── */
|
||||
.ttv3-params-only {
|
||||
padding: 0;
|
||||
}
|
||||
.ttv3-params-only .ant-tabs {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
编辑器 Modal（v3）
|
||||
============================================================ */
|
||||
.ttv3-modal .ant-modal-content {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.ttv3-modal .ant-modal-header {
|
||||
padding: 16px 20px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.ttv3-modal .ant-modal-body {
|
||||
padding: 0;
|
||||
max-height: 75vh;
|
||||
}
|
||||
.ttv3-modal .ant-modal-footer {
|
||||
padding: 14px 20px;
|
||||
margin: 0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 编辑器两栏布局 */
|
||||
.ttv3-editor {
|
||||
display: flex;
|
||||
min-height: 500px;
|
||||
}
|
||||
.ttv3-editor-left {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
background: #f8f8fc;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.ttv3-editor-canvas {
|
||||
width: 200px;
|
||||
aspect-ratio: 9/16;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ttv3-editor-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ttv3-editor-canvas-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.ttv3-editor-canvas-inner canvas {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
.ttv3-editor-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.ttv3-form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ttv3-form-row label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
min-width: 44px;
|
||||
}
|
||||
.ttv3-form-row--grow {
|
||||
flex: 1;
|
||||
}
|
||||
.ttv3-form-row--grow .ant-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ttv3-editor-right {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 侧栏较窄时（380px 侧栏）：强制 2 列，卡片稍微紧凑 */
|
||||
@media (max-width: 540px) {
|
||||
.ttv3-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.ttv3-act {
|
||||
font-size: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.ttv3-act .anticon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
/**
|
||||
* 标题模板编辑器（v3 重构）
|
||||
*
|
||||
* - Modal 弹窗 860px 宽
|
||||
* - 左侧：300px 竖屏预览区（图片背景+暗色渐变遮罩+透明 Canvas 叠字）+ 模板名称输入框
|
||||
* - 右侧：参数 Tab 面板（基础/描边/阴影/背景/排版），复用 TitleStylePanel 的 paramsOnly 模式
|
||||
* - 底部：取消 / 保存模板 按钮
|
||||
* - 内置模板编辑时保存会创建副本（带"副本"逻辑由 handleSave 处理）
|
||||
*/
|
||||
import React, { useEffect, useMemo, useState } from "react"
|
||||
import { Modal, Button, Input, message } from "antd"
|
||||
import TitleStylePanel from "../../pages/generate/components/title/TitleStylePanel"
|
||||
import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
|
||||
import { POSITION_OPTIONS } from "../../pages/generate/constants"
|
||||
import { FONT_OPTIONS } from "./constants"
|
||||
import type { TitleSettings } from "../../pages/generate/types"
|
||||
import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
|
||||
import { titleStyleConfigToCamel, camelToTitleStyleConfig } from "./utils"
|
||||
import { useTitleTemplates } from "./useTitleTemplates"
|
||||
import type { TitleTemplate } from "./template-types"
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
template: TitleTemplate
|
||||
onClose: () => void
|
||||
onSaved: (template: TitleTemplate) => void
|
||||
}
|
||||
|
||||
/** 编辑器预览用的背景图（复用卡片池第一张） */
|
||||
const EDITOR_BG = "/title-templates/portrait1.jpg"
|
||||
|
||||
const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved }) => {
|
||||
const { updateTemplate, createTemplate } = useTitleTemplates()
|
||||
const [settings, setSettings] = useState<TitleSettings>(() => ({
|
||||
...DEFAULT_TITLE_SETTINGS_FULL,
|
||||
...titleStyleConfigToCamel(template.style || {}),
|
||||
title: "预览标题文字",
|
||||
}))
|
||||
const [formName, setFormName] = useState(template.name || "")
|
||||
const [formEmoji, setFormEmoji] = useState(template.emoji || "✨")
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setSettings({
|
||||
...DEFAULT_TITLE_SETTINGS_FULL,
|
||||
...titleStyleConfigToCamel(template.style || {}),
|
||||
title: "预览标题文字",
|
||||
})
|
||||
setFormName(template.name || "")
|
||||
setFormEmoji(template.emoji || "✨")
|
||||
}
|
||||
}, [open, template])
|
||||
|
||||
const upd = (patch: Partial<TitleSettings>) => setSettings((s) => ({ ...s, ...patch }))
|
||||
|
||||
const handleSave = () => {
|
||||
const name = formName.trim()
|
||||
if (!name) {
|
||||
message.warning("请填写模板名称")
|
||||
return
|
||||
}
|
||||
setSaving(true)
|
||||
try {
|
||||
const snake = camelToTitleStyleConfig(settings)
|
||||
if (template.isBuiltin) {
|
||||
const t = createTemplate({ name, emoji: formEmoji, style: snake })
|
||||
onSaved(t)
|
||||
} else {
|
||||
updateTemplate(template.id, { name, emoji: formEmoji, style: snake })
|
||||
onSaved({
|
||||
...template,
|
||||
name,
|
||||
emoji: formEmoji,
|
||||
style: snake,
|
||||
updatedAt: new Date().toISOString(),
|
||||
})
|
||||
}
|
||||
} 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}`}
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
width={860}
|
||||
footer={
|
||||
<div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button type="primary" loading={saving} onClick={handleSave}>
|
||||
保存模板
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
destroyOnClose
|
||||
className="ttv3-modal"
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
<div className="ttv3-editor">
|
||||
{/* 左侧：竖屏预览 + 名称 */}
|
||||
<div className="ttv3-editor-left">
|
||||
<div className="ttv3-editor-canvas">
|
||||
<img className="ttv3-editor-bg" src={EDITOR_BG} alt="" />
|
||||
<div className="ttv3-vignette" />
|
||||
<div className="ttv3-editor-canvas-inner">
|
||||
<TitleMiniPreview
|
||||
settings={previewSettings}
|
||||
width={200}
|
||||
sampleText="预览标题文字"
|
||||
transparent
|
||||
portrait
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ttv3-editor-form">
|
||||
<div className="ttv3-form-row">
|
||||
<label>图标</label>
|
||||
<Input
|
||||
value={formEmoji}
|
||||
maxLength={2}
|
||||
style={{ textAlign: "center", width: 64 }}
|
||||
onChange={(e) => setFormEmoji(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="ttv3-form-row ttv3-form-row--grow">
|
||||
<label>
|
||||
模板名称<span style={{ color: "#ef4444" }}>*</span>
|
||||
</label>
|
||||
<Input
|
||||
placeholder="给模板起个名字"
|
||||
value={formName}
|
||||
maxLength={20}
|
||||
onChange={(e) => setFormName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 右侧：参数 Tab */}
|
||||
<div className="ttv3-editor-right">
|
||||
<TitleStylePanel
|
||||
settings={settings}
|
||||
onUpdatePosition={(p) => upd({ position: p, posX: null, posY: null })}
|
||||
onUpdateFont={(f) => upd({ font: f })}
|
||||
onUpdateSize={(v) => upd({ size: v })}
|
||||
onToggleBold={() => upd({ bold: !settings.bold })}
|
||||
onToggleItalic={() => upd({ italic: !settings.italic })}
|
||||
onToggleStroke={() =>
|
||||
upd({
|
||||
stroke: !settings.stroke,
|
||||
strokeWidth:
|
||||
!settings.stroke && (settings.strokeWidth ?? 0) < 2 ? 4 : settings.strokeWidth,
|
||||
})
|
||||
}
|
||||
onToggleShadow={() => upd({ shadow: !settings.shadow })}
|
||||
onApplyPreset={() => {
|
||||
/* 编辑器内不使用系统预设快捷键 */
|
||||
}}
|
||||
onUpdateStyle={(patch) => upd(patch)}
|
||||
activePreset={null}
|
||||
titlePresets={[]}
|
||||
POSITION_OPTIONS={POSITION_OPTIONS}
|
||||
FONT_OPTIONS={FONT_OPTIONS}
|
||||
paramsOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default TitleTemplateEditor
|
||||
@@ -1,28 +0,0 @@
|
||||
/**
|
||||
* 标题模板系统类型（#2003）
|
||||
*
|
||||
* 设计：
|
||||
* - 内置系统模板（从 TITLE_PRESETS 自动派生，不可编辑/删除，可"复制为我的"）
|
||||
* - 用户自定义模板（保存在 localStorage，可编辑/复制/导出/删除）
|
||||
* - 模板存完整 TitleStyleConfig（snake_case），与后端契约一致
|
||||
*/
|
||||
import type { TitleStyleConfig } from "./types"
|
||||
|
||||
export interface TitleTemplate {
|
||||
/** 唯一 ID：系统模板 `sys:<presetKey>`，用户模板 `usr:<uuid>` */
|
||||
id: string
|
||||
/** 模板名称（必填，保存时校验） */
|
||||
name: string
|
||||
/** 模板描述（可选） */
|
||||
description?: string
|
||||
/** 是否为系统内置（不可删除/编辑源） */
|
||||
isBuiltin: boolean
|
||||
/** emoji（展示用，可选） */
|
||||
emoji?: string
|
||||
/** 创建时间（ISO 字符串，系统模板=固定值） */
|
||||
createdAt: string
|
||||
/** 更新时间 */
|
||||
updatedAt: string
|
||||
/** 完整样式配置（snake_case，与后端 title_config 对齐） */
|
||||
style: Partial<TitleStyleConfig>
|
||||
}
|
||||
@@ -1,213 +0,0 @@
|
||||
/**
|
||||
* 标题模板 CRUD Hook（#2003）
|
||||
*
|
||||
* - 内存态 + localStorage 持久化
|
||||
* - 系统模板（来自 TITLE_PRESETS）始终前置、不可删除/编辑源
|
||||
* - 用户模板 CRUD：新增/复制/更新/删除/导出/导入
|
||||
*/
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { TITLE_PRESETS } from "./constants"
|
||||
import type { TitleStyleConfig } from "./types"
|
||||
import type { TitleTemplate } from "./template-types"
|
||||
|
||||
const STORAGE_KEY = "xiaoxia.title.templates.v1"
|
||||
|
||||
function uid(): string {
|
||||
return "usr:" + Math.random().toString(36).slice(2, 10) + Date.now().toString(36)
|
||||
}
|
||||
|
||||
/** 把 TITLE_PRESETS 转为内置 TitleTemplate 列表 */
|
||||
function buildBuiltinTemplates(): TitleTemplate[] {
|
||||
const now = "2026-09-22T00:00:00+08:00"
|
||||
return TITLE_PRESETS.map((p) => ({
|
||||
id: `sys:${p.key}`,
|
||||
name: p.label,
|
||||
description: "系统内置模板",
|
||||
isBuiltin: true,
|
||||
emoji: p.emoji,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
style: { ...p.style },
|
||||
}))
|
||||
}
|
||||
|
||||
function loadUserTemplates(): TitleTemplate[] {
|
||||
if (typeof window === "undefined") return []
|
||||
try {
|
||||
const raw = window.localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return []
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return []
|
||||
return parsed.filter((t) => t && !t.isBuiltin && t.id.startsWith("usr:"))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function saveUserTemplates(list: TitleTemplate[]) {
|
||||
if (typeof window === "undefined") return
|
||||
try {
|
||||
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(list))
|
||||
} catch {
|
||||
/* ignore quota */
|
||||
}
|
||||
}
|
||||
|
||||
export interface UseTitleTemplatesResult {
|
||||
templates: TitleTemplate[]
|
||||
builtin: TitleTemplate[]
|
||||
custom: TitleTemplate[]
|
||||
/** 新建自定义模板：传入样式（snake_case），返回新建模板 id */
|
||||
createTemplate: (input: {
|
||||
name: string
|
||||
description?: string
|
||||
emoji?: string
|
||||
style: Partial<TitleStyleConfig>
|
||||
}) => TitleTemplate
|
||||
/** 复制模板（内置模板也可复制，自动加"副本"后缀） */
|
||||
duplicateTemplate: (id: string) => TitleTemplate | null
|
||||
/** 更新自定义模板（系统模板不可改） */
|
||||
updateTemplate: (id: string, patch: Partial<Omit<TitleTemplate, "id" | "isBuiltin">>) => void
|
||||
/** 删除自定义模板 */
|
||||
deleteTemplate: (id: string) => void
|
||||
/** 导出单个模板为 JSON 字符串 */
|
||||
exportTemplate: (id: string) => string | null
|
||||
/** 导入 JSON 字符串作为新模板，返回新建模板 */
|
||||
importTemplate: (json: string) => TitleTemplate | null
|
||||
/** 根据 id 查询模板 */
|
||||
getById: (id: string) => TitleTemplate | undefined
|
||||
}
|
||||
|
||||
export function useTitleTemplates(): UseTitleTemplatesResult {
|
||||
const [custom, setCustom] = useState<TitleTemplate[]>(() => loadUserTemplates())
|
||||
|
||||
// 跨 tab 同步
|
||||
useEffect(() => {
|
||||
const onStorage = (e: StorageEvent) => {
|
||||
if (e.key === STORAGE_KEY) setCustom(loadUserTemplates())
|
||||
}
|
||||
window.addEventListener("storage", onStorage)
|
||||
return () => window.removeEventListener("storage", onStorage)
|
||||
}, [])
|
||||
|
||||
const builtin = useMemo(() => buildBuiltinTemplates(), [])
|
||||
const templates = useMemo(() => [...builtin, ...custom], [builtin, custom])
|
||||
|
||||
const persist = useCallback((next: TitleTemplate[]) => {
|
||||
setCustom(next)
|
||||
saveUserTemplates(next)
|
||||
}, [])
|
||||
|
||||
const getById = useCallback((id: string) => templates.find((t) => t.id === id), [templates])
|
||||
|
||||
const createTemplate = useCallback<UseTitleTemplatesResult["createTemplate"]>(
|
||||
({ name, description, emoji, style }) => {
|
||||
const now = new Date().toISOString()
|
||||
const t: TitleTemplate = {
|
||||
id: uid(),
|
||||
name: name.trim() || "未命名模板",
|
||||
description: description?.trim() || undefined,
|
||||
emoji: emoji || "✨",
|
||||
isBuiltin: false,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
style: { ...style },
|
||||
}
|
||||
persist([...custom, t])
|
||||
return t
|
||||
},
|
||||
[custom, persist],
|
||||
)
|
||||
|
||||
const duplicateTemplate = useCallback<UseTitleTemplatesResult["duplicateTemplate"]>(
|
||||
(id) => {
|
||||
const src = templates.find((t) => t.id === id)
|
||||
if (!src) return null
|
||||
const now = new Date().toISOString()
|
||||
const t: TitleTemplate = {
|
||||
id: uid(),
|
||||
name: `${src.name} 副本`,
|
||||
description: src.description,
|
||||
emoji: src.emoji,
|
||||
isBuiltin: false,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
style: { ...src.style },
|
||||
}
|
||||
persist([...custom, t])
|
||||
return t
|
||||
},
|
||||
[templates, custom, persist],
|
||||
)
|
||||
|
||||
const updateTemplate = useCallback<UseTitleTemplatesResult["updateTemplate"]>(
|
||||
(id, patch) => {
|
||||
if (id.startsWith("sys:")) return
|
||||
const next = custom.map((t) =>
|
||||
t.id === id
|
||||
? { ...t, ...patch, id: t.id, isBuiltin: false, updatedAt: new Date().toISOString() }
|
||||
: t,
|
||||
)
|
||||
persist(next)
|
||||
},
|
||||
[custom, persist],
|
||||
)
|
||||
|
||||
const deleteTemplate = useCallback<UseTitleTemplatesResult["deleteTemplate"]>(
|
||||
(id) => {
|
||||
if (id.startsWith("sys:")) return
|
||||
persist(custom.filter((t) => t.id !== id))
|
||||
},
|
||||
[custom, persist],
|
||||
)
|
||||
|
||||
const exportTemplate = useCallback<UseTitleTemplatesResult["exportTemplate"]>(
|
||||
(id) => {
|
||||
const t = templates.find((x) => x.id === id)
|
||||
if (!t) return null
|
||||
return JSON.stringify(
|
||||
{
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
emoji: t.emoji,
|
||||
style: t.style,
|
||||
exportedAt: new Date().toISOString(),
|
||||
},
|
||||
null,
|
||||
2,
|
||||
)
|
||||
},
|
||||
[templates],
|
||||
)
|
||||
|
||||
const importTemplate = useCallback<UseTitleTemplatesResult["importTemplate"]>(
|
||||
(json) => {
|
||||
try {
|
||||
const data = JSON.parse(json)
|
||||
if (!data || typeof data !== "object" || !data.style) return null
|
||||
return createTemplate({
|
||||
name: data.name || "导入模板",
|
||||
description: data.description,
|
||||
emoji: data.emoji || "✨",
|
||||
style: data.style,
|
||||
})
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
},
|
||||
[createTemplate],
|
||||
)
|
||||
|
||||
return {
|
||||
templates,
|
||||
builtin,
|
||||
custom,
|
||||
createTemplate,
|
||||
duplicateTemplate,
|
||||
updateTemplate,
|
||||
deleteTemplate,
|
||||
exportTemplate,
|
||||
importTemplate,
|
||||
getById,
|
||||
}
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
/**
|
||||
* 标题样式工具（#2001 / 模板系统 #2003）
|
||||
*
|
||||
* - snake_case TitleStyleConfig ↔ camelCase TitleSettings 互转
|
||||
* - preset 归一化预览（修复"标题"两字大小不一）
|
||||
*/
|
||||
import type { TitleStyleConfig } from "./types"
|
||||
import type { TitleSettings } from "../../pages/generate/types"
|
||||
import { TITLE_PRESETS } from "./constants"
|
||||
import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
|
||||
import type { TitleTemplate } from "./template-types"
|
||||
|
||||
/** snake_case TitleStyleConfig → camelCase TitleSettings（仅覆盖已知字段） */
|
||||
export function titleStyleConfigToCamel(s: Partial<TitleStyleConfig>): Partial<TitleSettings> {
|
||||
const out: Partial<TitleSettings> = {}
|
||||
if (s.font != null) out.font = s.font
|
||||
if (s.size != null) out.size = s.size
|
||||
if (s.color != null) out.color = s.color
|
||||
if (s.bold != null) out.bold = s.bold
|
||||
if (s.italic != null) out.italic = s.italic
|
||||
if (s.position != null) out.position = s.position as TitleSettings["position"]
|
||||
if (s.pos_x != null) out.posX = s.pos_x
|
||||
if (s.pos_y != null) out.posY = s.pos_y
|
||||
if (s.line_height != null) out.lineHeight = s.line_height
|
||||
if (s.margin_top != null) out.marginTop = s.margin_top
|
||||
if (s.max_chars_per_line != null) out.maxCharsPerLine = s.max_chars_per_line
|
||||
if (s.stroke != null) out.stroke = s.stroke
|
||||
if (s.stroke_width != null) out.strokeWidth = s.stroke_width
|
||||
if (s.stroke_color != null) out.strokeColor = s.stroke_color
|
||||
if (s.shadow != null) out.shadow = s.shadow
|
||||
if (s.shadow_offset_x != null) out.shadowOffsetX = s.shadow_offset_x
|
||||
if (s.shadow_offset_y != null) out.shadowOffsetY = s.shadow_offset_y
|
||||
if (s.shadow_blur != null) out.shadowBlur = s.shadow_blur
|
||||
if (s.shadow_color != null) out.shadowColor = s.shadow_color
|
||||
if (s.bg_enabled != null) out.bgEnabled = s.bg_enabled
|
||||
if (s.bg_color != null) out.bgColor = s.bg_color
|
||||
if (s.bg_padding != null) out.bgPadding = s.bg_padding
|
||||
if (s.bg_radius != null) out.bgRadius = s.bg_radius
|
||||
if (s.line_overrides != null) out.lineOverrides = s.line_overrides
|
||||
return out
|
||||
}
|
||||
|
||||
/** camelCase TitleSettings patch → snake_case TitleStyleConfig patch */
|
||||
export function camelToTitleStyleConfig(p: Partial<TitleSettings>): Partial<TitleStyleConfig> {
|
||||
const out: Partial<TitleStyleConfig> = {}
|
||||
if (p.font != null) out.font = p.font
|
||||
if (p.size != null) out.size = p.size
|
||||
if (p.color != null) out.color = p.color
|
||||
if (p.bold != null) out.bold = p.bold
|
||||
if (p.italic != null) out.italic = p.italic
|
||||
if (p.position != null) out.position = p.position as TitleStyleConfig["position"]
|
||||
if (p.posX != null) out.pos_x = p.posX
|
||||
if (p.posY != null) out.pos_y = p.posY
|
||||
if (p.lineHeight != null) out.line_height = p.lineHeight
|
||||
if (p.marginTop != null) out.margin_top = p.marginTop
|
||||
if (p.maxCharsPerLine != null) out.max_chars_per_line = p.maxCharsPerLine
|
||||
if (p.stroke != null) out.stroke = p.stroke
|
||||
if (p.strokeWidth != null) out.stroke_width = p.strokeWidth
|
||||
if (p.strokeColor != null) out.stroke_color = p.strokeColor
|
||||
if (p.shadow != null) out.shadow = p.shadow
|
||||
if (p.shadowOffsetX != null) out.shadow_offset_x = p.shadowOffsetX
|
||||
if (p.shadowOffsetY != null) out.shadow_offset_y = p.shadowOffsetY
|
||||
if (p.shadowBlur != null) out.shadow_blur = p.shadowBlur
|
||||
if (p.shadowColor != null) out.shadow_color = p.shadowColor
|
||||
if (p.bgEnabled != null) out.bg_enabled = p.bgEnabled
|
||||
if (p.bgColor != null) out.bg_color = p.bgColor
|
||||
if (p.bgPadding != null) out.bg_padding = p.bgPadding
|
||||
if (p.bgRadius != null) out.bg_radius = p.bgRadius
|
||||
if (p.lineOverrides != null) out.line_overrides = p.lineOverrides
|
||||
return out
|
||||
}
|
||||
|
||||
/**
|
||||
* 把 preset style（snake_case）归一化为固定字号的 TitleSettings，
|
||||
* 用于"预设卡片"缩略预览——所有卡片视觉上"标题"两字大小一致，便于辨识。
|
||||
* 描边/阴影/背景padding 按 fixedSize / 原始 size 比例缩放，避免粗描边爆框。
|
||||
*/
|
||||
export function buildPresetPreviewSettings(
|
||||
base: TitleSettings,
|
||||
presetKey: string,
|
||||
fixedSize = 56,
|
||||
): TitleSettings {
|
||||
const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
|
||||
if (!preset) return base
|
||||
const origSize = preset.style.size ?? fixedSize
|
||||
const ratio = fixedSize / origSize
|
||||
const scale = (v: number | undefined, fallback: number): number =>
|
||||
v != null ? Math.round(v * ratio) : fallback
|
||||
return {
|
||||
...base,
|
||||
...titleStyleConfigToCamel(preset.style),
|
||||
size: fixedSize,
|
||||
strokeWidth: scale(preset.style.stroke_width, base.strokeWidth) ?? base.strokeWidth,
|
||||
shadowOffsetX: scale(preset.style.shadow_offset_x, base.shadowOffsetX) ?? base.shadowOffsetX,
|
||||
shadowOffsetY: scale(preset.style.shadow_offset_y, base.shadowOffsetY) ?? base.shadowOffsetY,
|
||||
shadowBlur: scale(preset.style.shadow_blur, base.shadowBlur) ?? base.shadowBlur,
|
||||
bgPadding: scale(preset.style.bg_padding, base.bgPadding) ?? base.bgPadding,
|
||||
lineOverrides: [],
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 把 TitleTemplate 渲染为完整 TitleSettings（带默认值），用于卡片预览。
|
||||
* 与模板选择器中保持一致，抽出共用。
|
||||
*/
|
||||
export function templateToPreviewSettings(t: TitleTemplate, fixedSize = 48): TitleSettings {
|
||||
const base: TitleSettings = {
|
||||
...DEFAULT_TITLE_SETTINGS_FULL,
|
||||
...titleStyleConfigToCamel(t.style),
|
||||
}
|
||||
// 预览时用固定字号保证所有卡片字大小一致；描边/阴影/padding按比例缩放
|
||||
const origSize = t.style.size ?? base.size
|
||||
if (origSize && origSize !== fixedSize) {
|
||||
const ratio = fixedSize / origSize
|
||||
base.size = fixedSize
|
||||
if (base.strokeWidth != null)
|
||||
base.strokeWidth = Math.max(1, Math.round(base.strokeWidth * ratio))
|
||||
if (base.shadowOffsetX != null) base.shadowOffsetX = Math.round(base.shadowOffsetX * ratio)
|
||||
if (base.shadowOffsetY != null) base.shadowOffsetY = Math.round(base.shadowOffsetY * ratio)
|
||||
if (base.shadowBlur != null) base.shadowBlur = Math.round(base.shadowBlur * ratio)
|
||||
if (base.bgPadding != null) base.bgPadding = Math.round(base.bgPadding * ratio)
|
||||
}
|
||||
base.lineOverrides = []
|
||||
return base
|
||||
}
|
||||
@@ -10,13 +10,12 @@
|
||||
import React, { useMemo, useState, useEffect } from "react"
|
||||
import { Input } from "antd"
|
||||
import TitleStylePanel from "@/pages/generate/components/title/TitleStylePanel"
|
||||
import type { TitleTemplate } from "@/components/title/template-types"
|
||||
|
||||
import TitleLibraryAutoComplete from "@/pages/generate/components/title/TitleLibraryAutoComplete"
|
||||
import type { TitleOption } from "@/pages/generate/components/title/TitleLibraryAutoComplete"
|
||||
import type { TitleSettings } from "@/pages/generate/types"
|
||||
import { POSITION_OPTIONS } from "@/pages/generate/constants"
|
||||
import { FONT_OPTIONS, TITLE_PRESETS } from "@/components/title/constants"
|
||||
import { useTitleTemplates } from "@/pages/generate/hooks/useStep4Title/useTitleTemplates"
|
||||
import type { AiAvatarTitleConfig } from "../types"
|
||||
// #1894: 标题数据源切换到文案库，取 script.title 作为候选
|
||||
import { getScripts } from "@/api/scripts"
|
||||
@@ -31,7 +30,9 @@ interface PanelTitleConfigProps {
|
||||
const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpdate }) => {
|
||||
/** TitleStylePanel 内部高亮的预设 key（面板本地状态） */
|
||||
const [activePreset, setActivePreset] = useState<string | null>(null)
|
||||
const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null)
|
||||
|
||||
/** 模板管理 */
|
||||
const { allTemplates, saveTemplate, updateTemplate, deleteTemplate, duplicateTemplate } = useTitleTemplates()
|
||||
|
||||
/** 标题库选项（#1894：从文案库 scripts[].title 取候选） */
|
||||
const [titleOptions, setTitleOptions] = useState<TitleOption[]>([])
|
||||
@@ -221,33 +222,63 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
|
||||
}
|
||||
}, [titleConfig])
|
||||
|
||||
/** 应用预设：覆盖新细粒度字段（颜色/描边/阴影/字号/字体等） */
|
||||
/** 应用预设/模板：覆盖新细粒度字段（颜色/描边/阴影/字号/字体等） */
|
||||
const handleApplyPreset = (presetKey: string) => {
|
||||
// 先找系统预设
|
||||
const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
|
||||
if (!preset) return
|
||||
setActivePreset(presetKey)
|
||||
const st = preset.style || {}
|
||||
onUpdate({
|
||||
font: st.font,
|
||||
size: st.size,
|
||||
color: st.color,
|
||||
bold: st.bold,
|
||||
italic: st.italic,
|
||||
stroke: st.stroke,
|
||||
stroke_width: st.stroke_width,
|
||||
stroke_color: st.stroke_color,
|
||||
shadow: st.shadow,
|
||||
shadow_offset_x: st.shadow_offset_x,
|
||||
shadow_offset_y: st.shadow_offset_y,
|
||||
shadow_blur: st.shadow_blur,
|
||||
shadow_color: st.shadow_color,
|
||||
bg_enabled: st.bg_enabled,
|
||||
bg_color: st.bg_color,
|
||||
bg_padding: st.bg_padding,
|
||||
bg_radius: st.bg_radius,
|
||||
line_overrides: [],
|
||||
cover_title_config: null,
|
||||
})
|
||||
if (preset) {
|
||||
setActivePreset(presetKey)
|
||||
const st = preset.style || {}
|
||||
onUpdate({
|
||||
font: st.font,
|
||||
size: st.size,
|
||||
color: st.color,
|
||||
bold: st.bold,
|
||||
italic: st.italic,
|
||||
stroke: st.stroke,
|
||||
stroke_width: st.stroke_width,
|
||||
stroke_color: st.stroke_color,
|
||||
shadow: st.shadow,
|
||||
shadow_offset_x: st.shadow_offset_x,
|
||||
shadow_offset_y: st.shadow_offset_y,
|
||||
shadow_blur: st.shadow_blur,
|
||||
shadow_color: st.shadow_color,
|
||||
bg_enabled: st.bg_enabled,
|
||||
bg_color: st.bg_color,
|
||||
bg_padding: st.bg_padding,
|
||||
bg_radius: st.bg_radius,
|
||||
line_overrides: [],
|
||||
cover_title_config: null,
|
||||
})
|
||||
return
|
||||
}
|
||||
// 再找用户模板
|
||||
const tmpl = allTemplates.find((t) => t.key === presetKey)
|
||||
if (tmpl && !tmpl.isSystem) {
|
||||
setActivePreset(presetKey)
|
||||
const st = tmpl.style || {}
|
||||
onUpdate({
|
||||
font: st.font,
|
||||
size: st.size,
|
||||
color: st.color,
|
||||
bold: st.bold,
|
||||
italic: st.italic,
|
||||
stroke: st.stroke,
|
||||
stroke_width: (st as any).stroke_width,
|
||||
stroke_color: (st as any).stroke_color,
|
||||
shadow: st.shadow,
|
||||
shadow_offset_x: (st as any).shadow_offset_x,
|
||||
shadow_offset_y: (st as any).shadow_offset_y,
|
||||
shadow_blur: (st as any).shadow_blur,
|
||||
shadow_color: (st as any).shadow_color,
|
||||
bg_enabled: (st as any).bg_enabled,
|
||||
bg_color: (st as any).bg_color,
|
||||
bg_padding: (st as any).bg_padding,
|
||||
bg_radius: (st as any).bg_radius,
|
||||
line_overrides: [],
|
||||
cover_title_config: null,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/** 字段 patch 透传：TitleStylePanel 的 onUpdateStyle（camelCase → snake_case） */
|
||||
@@ -332,40 +363,6 @@ 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 多行 + 标题库选择 */}
|
||||
@@ -412,15 +409,17 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
|
||||
onUpdateStyle={handleUpdateStyle}
|
||||
showCoverToggle
|
||||
previewWidth={280}
|
||||
enableTemplates
|
||||
selectedTemplateId={selectedTemplateId}
|
||||
onApplyTemplate={handleApplyTemplate}
|
||||
activePreset={activePreset}
|
||||
titlePresets={
|
||||
TITLE_PRESETS as unknown as React.ComponentProps<typeof TitleStylePanel>["titlePresets"]
|
||||
}
|
||||
POSITION_OPTIONS={POSITION_OPTIONS}
|
||||
FONT_OPTIONS={FONT_OPTIONS}
|
||||
templates={allTemplates}
|
||||
onSaveTemplate={(label, style, emoji) => saveTemplate(label, style as any, emoji)}
|
||||
onUpdateTemplate={(key, patch) => updateTemplate(key, patch as any)}
|
||||
onDeleteTemplate={deleteTemplate}
|
||||
onDuplicateTemplate={duplicateTemplate}
|
||||
/>
|
||||
|
||||
{/* 自动生成字幕 */}
|
||||
|
||||
@@ -29,6 +29,7 @@ import { usePreviewAssets } from "./hooks/usePreviewAssets"
|
||||
import { useBatchVariantPlans } from "./hooks/useBatchVariantPlans"
|
||||
import { useVariantVoicePreview } from "./hooks/useVariantVoicePreview"
|
||||
import { useTitleStyleUpdaters } from "./hooks/useStep4Title/useTitleStyleUpdaters"
|
||||
import { useTitleTemplates } from "./hooks/useStep4Title/useTitleTemplates"
|
||||
import { getAssetsByKind } from "@/api/assets"
|
||||
import { previewTts } from "@/api/tts"
|
||||
import { usePointsStore } from "@/store/pointsStore"
|
||||
@@ -42,9 +43,6 @@ const GeneratePage: React.FC = () => {
|
||||
|
||||
/* ── 表单状态 ── */
|
||||
const formState = useGenerateFormState()
|
||||
/* ── 标题模板（#2003）当前选中模板 id ── */
|
||||
const [selectedTitleTemplateId, setSelectedTitleTemplateId] = useState<string | null>(null)
|
||||
|
||||
/* ── 积分状态 ── */
|
||||
const { balance, dailyUsage, rules, init: initPoints } = usePointsStore()
|
||||
useEffect(() => {
|
||||
@@ -159,6 +157,9 @@ const GeneratePage: React.FC = () => {
|
||||
onTitleSettingsChange: setTitleSettings,
|
||||
})
|
||||
|
||||
/* ── 模板管理 ─ */
|
||||
const { allTemplates, saveTemplate, updateTemplate, deleteTemplate, duplicateTemplate } = useTitleTemplates()
|
||||
|
||||
/* ── 配音素材库（TTS 试听）── */
|
||||
const { data: voiceMaterials = [] } = useQuery({
|
||||
queryKey: ["assets", "voice"],
|
||||
@@ -580,19 +581,7 @@ 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,
|
||||
}}
|
||||
@@ -658,12 +647,11 @@ const GeneratePage: React.FC = () => {
|
||||
onUpdateStyle={styleUpdaters.updateStyle}
|
||||
activePreset={styleUpdaters.activePreset}
|
||||
titlePresets={styleUpdaters.titlePresets}
|
||||
enableTemplates
|
||||
selectedTemplateId={selectedTitleTemplateId}
|
||||
onApplyTemplate={(settings, tpl) => {
|
||||
styleUpdaters.applyTemplate(settings)
|
||||
setSelectedTitleTemplateId(tpl.id)
|
||||
}}
|
||||
templates={allTemplates}
|
||||
onSaveTemplate={(label, style, emoji) => saveTemplate(label, style as any, emoji)}
|
||||
onUpdateTemplate={(key, patch) => updateTemplate(key, patch as any)}
|
||||
onDeleteTemplate={deleteTemplate}
|
||||
onDuplicateTemplate={duplicateTemplate}
|
||||
bgm={bgm}
|
||||
bgmConfig={bgmConfig}
|
||||
coverSettings={coverSettings}
|
||||
|
||||
@@ -140,19 +140,7 @@ 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,18 +36,6 @@ 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
|
||||
}
|
||||
@@ -261,25 +249,10 @@ 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
|
||||
// 标题缩放到容器：字号 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
|
||||
const titleScale = containerHeight > 0 ? containerHeight / playRes.height : 1
|
||||
const titleStrokeWidth = Math.max(1, 2 * titleScale)
|
||||
const titleShadowBlur = 4 * titleScale
|
||||
const titleShadowOffset = 2 * titleScale
|
||||
|
||||
// ── Video 播放器（默认路径，浏览器原生硬件解码） ──
|
||||
const {
|
||||
@@ -588,18 +561,14 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
|
||||
color: titleSettings.color || "#ffffff",
|
||||
fontWeight: titleSettings.bold ? 700 : 400,
|
||||
fontStyle: titleSettings.italic ? "italic" : "normal",
|
||||
lineHeight: titleSettings.lineHeight ?? 1.05,
|
||||
lineHeight: 1.05,
|
||||
wordBreak: "break-word",
|
||||
WebkitTextStroke: titleSettings.stroke
|
||||
? `${titleStrokeWidth}px ${titleStrokeColor}`
|
||||
? `${titleStrokeWidth}px #000000`
|
||||
: undefined,
|
||||
textShadow: titleSettings.shadow ? titleShadowStr : undefined,
|
||||
background: titleBgEnabled ? titleBgColor : undefined,
|
||||
padding: titleBgEnabled
|
||||
? `${titleBgPadding}px ${titleBgPadding * 1.5}px`
|
||||
textShadow: titleSettings.shadow
|
||||
? `${titleShadowOffset}px ${titleShadowOffset}px ${titleShadowBlur}px rgba(0,0,0,0.8)`
|
||||
: undefined,
|
||||
borderRadius: titleBgEnabled ? `${titleBgRadius}px` : undefined,
|
||||
display: titleBgEnabled ? "inline-block" : undefined,
|
||||
}}
|
||||
>
|
||||
{(effectiveTitle || "").split(/[/／]/).map((part, i) => (
|
||||
|
||||
@@ -16,7 +16,6 @@ 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,9 +59,20 @@ export interface GenerateStepContentProps {
|
||||
emoji?: string
|
||||
style: Record<string, unknown>
|
||||
}>
|
||||
enableTemplates?: boolean
|
||||
selectedTemplateId?: string | null
|
||||
onApplyTemplate?: (settings: import("../types").TitleSettings, template: TitleTemplate) => void
|
||||
/* ── 模板管理 ── */
|
||||
templates?: Array<{
|
||||
key: string
|
||||
label: string
|
||||
emoji?: string
|
||||
isSystem: boolean
|
||||
style: Record<string, unknown>
|
||||
}>
|
||||
onSaveTemplate?: (label: string, style: Record<string, unknown>, emoji?: string) => void
|
||||
onUpdateTemplate?: (key: string, patch: { label?: string; style?: Record<string, unknown>; emoji?: string }) => void
|
||||
onDeleteTemplate?: (key: string) => void
|
||||
onDuplicateTemplate?: (key: string) => void
|
||||
selectedTemplateKey?: string | null
|
||||
onSelectTemplate?: (key: string | null) => void
|
||||
/* ── 封面 ── */
|
||||
coverSettings: CoverConfig
|
||||
onCoverSettingsChange: (settings: CoverConfig) => void
|
||||
@@ -130,11 +140,15 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
onToggleShadow,
|
||||
onApplyPreset,
|
||||
onUpdateStyle,
|
||||
enableTemplates,
|
||||
selectedTemplateId,
|
||||
onApplyTemplate,
|
||||
activePreset,
|
||||
titlePresets,
|
||||
templates,
|
||||
onSaveTemplate,
|
||||
onUpdateTemplate,
|
||||
onDeleteTemplate,
|
||||
onDuplicateTemplate,
|
||||
selectedTemplateKey,
|
||||
onSelectTemplate,
|
||||
coverSettings,
|
||||
onCoverSettingsChange,
|
||||
onServerClipsChange,
|
||||
@@ -208,9 +222,13 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
onUpdateStyle={onUpdateStyle}
|
||||
activePreset={activePreset}
|
||||
titlePresets={titlePresets}
|
||||
enableTemplates={enableTemplates}
|
||||
selectedTemplateId={selectedTemplateId}
|
||||
onApplyTemplate={onApplyTemplate}
|
||||
templates={templates}
|
||||
onSaveTemplate={onSaveTemplate}
|
||||
onUpdateTemplate={onUpdateTemplate}
|
||||
onDeleteTemplate={onDeleteTemplate}
|
||||
onDuplicateTemplate={onDuplicateTemplate}
|
||||
selectedTemplateKey={selectedTemplateKey}
|
||||
onSelectTemplate={onSelectTemplate}
|
||||
previewCount={previewCount}
|
||||
previewTitles={previewTitles}
|
||||
onPreviewTitlesChange={onPreviewTitlesChange}
|
||||
|
||||
@@ -19,7 +19,6 @@ 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
|
||||
@@ -44,15 +43,26 @@ interface Step4TitleSettingsProps {
|
||||
style?: Record<string, unknown>
|
||||
previewStyle?: React.CSSProperties
|
||||
}>
|
||||
/* ── 模板管理 ── */
|
||||
templates?: Array<{
|
||||
key: string
|
||||
label: string
|
||||
emoji?: string
|
||||
isSystem: boolean
|
||||
style: Record<string, unknown>
|
||||
}>
|
||||
onSaveTemplate?: (label: string, style: Record<string, unknown>, emoji?: string) => void
|
||||
onUpdateTemplate?: (key: string, patch: { label?: string; style?: Record<string, unknown>; emoji?: string }) => void
|
||||
onDeleteTemplate?: (key: string) => void
|
||||
onDuplicateTemplate?: (key: string) => void
|
||||
selectedTemplateKey?: string | null
|
||||
onSelectTemplate?: (key: string | null) => void
|
||||
/* ── 批量生成（#1677）── */
|
||||
/** 生成数量 */
|
||||
previewCount?: number
|
||||
/** 每个变体的标题文字（长度=previewCount） */
|
||||
previewTitles?: string[]
|
||||
onPreviewTitlesChange?: (titles: string[]) => void
|
||||
enableTemplates?: boolean
|
||||
selectedTemplateId?: string | null
|
||||
onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
|
||||
}
|
||||
|
||||
/** 从本地 AI 标题模板池按主题词生成 N 个不同标题（与单视频 AI 生成同源） */
|
||||
@@ -99,12 +109,16 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
onUpdateStyle,
|
||||
activePreset,
|
||||
titlePresets,
|
||||
templates,
|
||||
onSaveTemplate,
|
||||
onUpdateTemplate,
|
||||
onDeleteTemplate,
|
||||
onDuplicateTemplate,
|
||||
selectedTemplateKey,
|
||||
onSelectTemplate,
|
||||
previewCount = 1,
|
||||
previewTitles,
|
||||
onPreviewTitlesChange,
|
||||
enableTemplates,
|
||||
selectedTemplateId,
|
||||
onApplyTemplate,
|
||||
} = props
|
||||
|
||||
const isBatch = previewCount > 1
|
||||
@@ -307,9 +321,13 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
titlePresets={titlePresets}
|
||||
POSITION_OPTIONS={POSITION_OPTIONS}
|
||||
FONT_OPTIONS={FONT_OPTIONS}
|
||||
enableTemplates={enableTemplates}
|
||||
selectedTemplateId={selectedTemplateId}
|
||||
onApplyTemplate={onApplyTemplate}
|
||||
templates={templates}
|
||||
onSaveTemplate={onSaveTemplate}
|
||||
onUpdateTemplate={onUpdateTemplate}
|
||||
onDeleteTemplate={onDeleteTemplate}
|
||||
onDuplicateTemplate={onDuplicateTemplate}
|
||||
selectedTemplateKey={selectedTemplateKey}
|
||||
onSelectTemplate={onSelectTemplate}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -18,14 +18,10 @@ interface Props {
|
||||
settings: TitleSettings
|
||||
width?: number
|
||||
sampleText?: string
|
||||
/** 背景（预览用，默认深色渐变模拟视频底），transparent=true 时忽略 */
|
||||
/** 背景（预览用，默认深色渐变模拟视频底） */
|
||||
background?: string
|
||||
/** 高度（可选，默认按 portrait 选比例） */
|
||||
/** 高度（可选，默认 width/2） */
|
||||
height?: number
|
||||
/** 透明背景（卡片/编辑器预览叠加在图片上时使用） */
|
||||
transparent?: boolean
|
||||
/** 纵向竖屏预览（9:16），true 时 aspect=16/9 适配手机视频比例 */
|
||||
portrait?: boolean
|
||||
}
|
||||
|
||||
/** 按 maxCharsPerLine 自动换行 */
|
||||
@@ -60,11 +56,9 @@ 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 * (portrait ? 16 / 9 : 1 / 1.8))
|
||||
const h = height ?? Math.round(width / 1.8)
|
||||
const text = (sampleText || settings.title || "预览标题").trim() || "预览标题"
|
||||
|
||||
useEffect(() => {
|
||||
@@ -80,11 +74,9 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
ctx.scale(dpr, dpr)
|
||||
ctx.clearRect(0, 0, width, h)
|
||||
|
||||
// 背景（transparent 时跳过，用于叠加在图片上）
|
||||
if (!transparent) {
|
||||
ctx.fillStyle = "#111827"
|
||||
ctx.fillRect(0, 0, width, h)
|
||||
}
|
||||
// 背景
|
||||
ctx.fillStyle = "#111827"
|
||||
ctx.fillRect(0, 0, width, h)
|
||||
|
||||
// 分辨率缩放：以 360 宽为基准（对应 720p 的一半）
|
||||
const scale = width / 360
|
||||
@@ -129,8 +121,7 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
startY = h / 2 - totalH / 2 + size / 2
|
||||
} else {
|
||||
// bottom
|
||||
const botMargin = portrait ? r(24) : r(16)
|
||||
startY = h - totalH - botMargin + size / 2
|
||||
startY = h - totalH - r(16) + size / 2
|
||||
}
|
||||
let centerX = width / 2
|
||||
if (settings.position === "custom" && settings.posX != null) {
|
||||
@@ -190,7 +181,7 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
ctx.shadowBlur = prevShadow.b
|
||||
ctx.shadowOffsetX = prevShadow.ox
|
||||
ctx.shadowOffsetY = prevShadow.oy
|
||||
}, [settings, width, h, text, transparent, portrait, background])
|
||||
}, [settings, width, h, text])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
@@ -199,7 +190,7 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
borderRadius: 6,
|
||||
display: "block",
|
||||
maxWidth: "100%",
|
||||
background: transparent ? "transparent" : background,
|
||||
background,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -443,16 +443,189 @@
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
/* 标题模板入口按钮（#2003） */
|
||||
.ts-template-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--primary-color, #7c3aed);
|
||||
/* ============================================================
|
||||
#模板管理系统 — 模板卡片网格样式
|
||||
============================================================ */
|
||||
|
||||
/* 模板头部（标签 + 新建按钮） */
|
||||
.ts-template-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ts-template-header label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ts-new-template-btn {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
font-weight: 500;
|
||||
color: #7c3aed;
|
||||
background: #faf5ff;
|
||||
border: 1px solid #ddd6fe;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.15s;
|
||||
}
|
||||
.ts-template-btn:hover {
|
||||
text-decoration: underline;
|
||||
.ts-new-template-btn:hover {
|
||||
background: #ede9fe;
|
||||
border-color: #7c3aed;
|
||||
}
|
||||
|
||||
/* 模板网格：4列 */
|
||||
.ts-template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 模板卡片 */
|
||||
.ts-template-card {
|
||||
position: relative;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
transition: 0.15s;
|
||||
}
|
||||
.ts-template-card:hover {
|
||||
border-color: #c4b5fd;
|
||||
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
.ts-template-card.active {
|
||||
border-color: #7c3aed;
|
||||
background: #faf5ff;
|
||||
box-shadow: 0 0 0 1px #7c3aed;
|
||||
}
|
||||
|
||||
/* 预览按钮 */
|
||||
.ts-template-preview-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 预览 canvas 容器 */
|
||||
.ts-template-canvas-wrap {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0f172a;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ts-template-canvas-wrap canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* 标签行 */
|
||||
.ts-template-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
.ts-template-name {
|
||||
font-size: 10px;
|
||||
color: #4b5563;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
.ts-template-tag {
|
||||
font-size: 9px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ts-template-tag.system {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
.ts-template-tag.user {
|
||||
background: #ede9fe;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ts-template-actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 3px 4px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
z-index: 2;
|
||||
}
|
||||
.ts-template-action-btn {
|
||||
padding: 2px 6px;
|
||||
font-size: 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.ts-template-action-btn:hover {
|
||||
border-color: #7c3aed;
|
||||
color: #7c3aed;
|
||||
}
|
||||
.ts-template-action-delete:hover {
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 编辑模式横幅 */
|
||||
.ts-editing-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 10px;
|
||||
background: #ede9fe;
|
||||
border: 1px solid #c4b5fd;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #5b21b6;
|
||||
}
|
||||
.ts-editing-save-btn {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: #7c3aed;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
transition: 0.15s;
|
||||
}
|
||||
.ts-editing-save-btn:hover {
|
||||
background: #6d28d9;
|
||||
}
|
||||
.ts-editing-cancel-btn {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
background: #fff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.15s;
|
||||
}
|
||||
.ts-editing-cancel-btn:hover {
|
||||
border-color: #9ca3af;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -114,6 +114,7 @@ export function useStep4Title({
|
||||
aiTitleResults,
|
||||
hasGeneratedTitles,
|
||||
activePreset: styleUpdaters.activePreset,
|
||||
setActivePreset: styleUpdaters.setActivePreset,
|
||||
titlePresets: styleUpdaters.titlePresets,
|
||||
// AI 标题操作
|
||||
handleGenerateAiTitles,
|
||||
@@ -132,6 +133,7 @@ export function useStep4Title({
|
||||
toggleStroke: styleUpdaters.toggleStroke,
|
||||
toggleShadow: styleUpdaters.toggleShadow,
|
||||
applyPreset: styleUpdaters.applyPreset,
|
||||
updateStyle: styleUpdaters.updateStyle,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useCallback, useMemo } from "react"
|
||||
import { useCallback, useState } from "react"
|
||||
import { TITLE_PRESETS } from "../../constants"
|
||||
import { TITLE_PRESETS as NEW_TITLE_PRESETS } from "@/components/title/constants"
|
||||
import { titleStyleConfigToCamel } from "@/components/title/utils"
|
||||
import type { TitleSettings } from "../../types"
|
||||
|
||||
interface UseTitleStyleUpdatersOptions {
|
||||
@@ -12,44 +11,15 @@ interface UseTitleStyleUpdatersOptions {
|
||||
/**
|
||||
* 标题样式更新 Hook
|
||||
* 封装标题文字、位置、字体、样式等所有设置更新函数
|
||||
*
|
||||
* Bug修复：手动修改参数时自动脱离预设（#模板管理系统）
|
||||
*/
|
||||
export function useTitleStyleUpdaters({
|
||||
titleSettings,
|
||||
onTitleSettingsChange,
|
||||
}: UseTitleStyleUpdatersOptions) {
|
||||
/** 匹配预设：对新预设（snake→camel 后）全字段比；旧预设只比 color/bold/italic/stroke/shadow */
|
||||
const getActivePreset = (settings: TitleSettings): string | null => {
|
||||
// 新预设匹配：font/size/color/bold/stroke/shadow/bg 全部对齐才算命中
|
||||
for (const p of NEW_TITLE_PRESETS) {
|
||||
const camel = titleStyleConfigToCamel(p.style)
|
||||
if (
|
||||
(camel.font ?? null) === (settings.font ?? null) &&
|
||||
(camel.color ?? null) === (settings.color ?? null) &&
|
||||
(camel.bold ?? null) === (settings.bold ?? null) &&
|
||||
(camel.italic ?? null) === (settings.italic ?? null) &&
|
||||
(camel.stroke ?? null) === (settings.stroke ?? null) &&
|
||||
(camel.shadow ?? null) === (settings.shadow ?? null) &&
|
||||
(camel.bgEnabled ?? null) === (settings.bgEnabled ?? null)
|
||||
) {
|
||||
return p.key
|
||||
}
|
||||
}
|
||||
// fallback 旧预设（legacy）
|
||||
for (const p of TITLE_PRESETS) {
|
||||
if (
|
||||
settings.color === p.style.color &&
|
||||
settings.bold === p.style.bold &&
|
||||
settings.italic === p.style.italic &&
|
||||
settings.stroke === p.style.stroke &&
|
||||
settings.shadow === p.style.shadow
|
||||
) {
|
||||
return p.key
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const activePreset = useMemo(() => getActivePreset(titleSettings), [titleSettings])
|
||||
/** 当前选中的预设 key（手动修改参数时置 null） */
|
||||
const [activePreset, setActivePreset] = useState<string | null>(null)
|
||||
|
||||
const updateTitle = useCallback(
|
||||
(title: string) => {
|
||||
@@ -64,7 +34,6 @@ export function useTitleStyleUpdaters({
|
||||
|
||||
const updatePosition = useCallback(
|
||||
(position: string) => {
|
||||
// 切回三档预设时清掉自定义坐标
|
||||
onTitleSettingsChange({ ...titleSettings, position, posX: null, posY: null })
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
@@ -78,8 +47,18 @@ export function useTitleStyleUpdaters({
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
/** 通用手动更新：自动脱离预设 */
|
||||
const updateStyle = useCallback(
|
||||
(patch: Partial<TitleSettings>) => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, ...patch })
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
const updateFont = useCallback(
|
||||
(font: string) => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, font })
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
@@ -87,6 +66,7 @@ export function useTitleStyleUpdaters({
|
||||
|
||||
const updateSize = useCallback(
|
||||
(size: number) => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, size })
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
@@ -94,36 +74,33 @@ export function useTitleStyleUpdaters({
|
||||
|
||||
const updateColor = useCallback(
|
||||
(color: string) => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, color })
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
const toggleBold = useCallback(() => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, bold: !titleSettings.bold })
|
||||
}, [titleSettings, onTitleSettingsChange])
|
||||
|
||||
const toggleItalic = useCallback(() => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, italic: !titleSettings.italic })
|
||||
}, [titleSettings, onTitleSettingsChange])
|
||||
|
||||
const toggleStroke = useCallback(() => {
|
||||
onTitleSettingsChange({
|
||||
...titleSettings,
|
||||
stroke: !titleSettings.stroke,
|
||||
// 开启描边时若宽度过小给个默认值（让滑块可见可调）
|
||||
strokeWidth:
|
||||
!titleSettings.stroke && (titleSettings.strokeWidth ?? 0) < 2
|
||||
? 4
|
||||
: titleSettings.strokeWidth,
|
||||
})
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, stroke: !titleSettings.stroke })
|
||||
}, [titleSettings, onTitleSettingsChange])
|
||||
|
||||
const toggleShadow = useCallback(() => {
|
||||
setActivePreset(null)
|
||||
onTitleSettingsChange({ ...titleSettings, shadow: !titleSettings.shadow })
|
||||
}, [titleSettings, onTitleSettingsChange])
|
||||
|
||||
/** 应用预设：正确把 snake_case 的 preset.style 转为 camelCase 再 spread */
|
||||
/** 应用预设（支持新预设细粒度字段） */
|
||||
const applyPreset = useCallback(
|
||||
(presetKey: string) => {
|
||||
const newPreset = NEW_TITLE_PRESETS.find((p) => p.key === presetKey)
|
||||
@@ -131,71 +108,30 @@ export function useTitleStyleUpdaters({
|
||||
if (newPreset) {
|
||||
onTitleSettingsChange({
|
||||
...titleSettings,
|
||||
...titleStyleConfigToCamel(newPreset.style),
|
||||
// 封面独立标题保持不变（不清空，避免破坏封面定制）
|
||||
...(newPreset.style as Partial<TitleSettings>),
|
||||
lineOverrides: [],
|
||||
})
|
||||
setActivePreset(presetKey)
|
||||
return
|
||||
}
|
||||
if (!oldPreset) return
|
||||
onTitleSettingsChange({
|
||||
...titleSettings,
|
||||
color: oldPreset.style.color as string,
|
||||
bold: oldPreset.style.bold as boolean,
|
||||
italic: oldPreset.style.italic as boolean,
|
||||
stroke: oldPreset.style.stroke as boolean,
|
||||
shadow: oldPreset.style.shadow as boolean,
|
||||
})
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
/** 应用模板：用模板（camelCase TitleSettings）覆盖样式字段，保留 title/aiAutoSelect */
|
||||
const applyTemplate = useCallback(
|
||||
(tpl: TitleSettings) => {
|
||||
onTitleSettingsChange({
|
||||
...titleSettings,
|
||||
// 覆盖样式字段
|
||||
position: tpl.position,
|
||||
posX: tpl.posX,
|
||||
posY: tpl.posY,
|
||||
font: tpl.font,
|
||||
size: tpl.size,
|
||||
bold: tpl.bold,
|
||||
italic: tpl.italic,
|
||||
stroke: tpl.stroke,
|
||||
shadow: tpl.shadow,
|
||||
color: tpl.color,
|
||||
lineHeight: tpl.lineHeight,
|
||||
marginTop: tpl.marginTop,
|
||||
maxCharsPerLine: tpl.maxCharsPerLine,
|
||||
strokeWidth: tpl.strokeWidth,
|
||||
strokeColor: tpl.strokeColor,
|
||||
shadowOffsetX: tpl.shadowOffsetX,
|
||||
shadowOffsetY: tpl.shadowOffsetY,
|
||||
shadowBlur: tpl.shadowBlur,
|
||||
shadowColor: tpl.shadowColor,
|
||||
bgEnabled: tpl.bgEnabled,
|
||||
bgColor: tpl.bgColor,
|
||||
bgPadding: tpl.bgPadding,
|
||||
bgRadius: tpl.bgRadius,
|
||||
lineOverrides: [],
|
||||
// coverTitle 保留用户当前值，不强制覆盖
|
||||
})
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
/** 通用字段更新（patch） */
|
||||
const updateStyle = useCallback(
|
||||
(patch: Partial<TitleSettings>) => {
|
||||
onTitleSettingsChange({ ...titleSettings, ...patch })
|
||||
if (oldPreset) {
|
||||
onTitleSettingsChange({
|
||||
...titleSettings,
|
||||
color: oldPreset.style.color,
|
||||
bold: oldPreset.style.bold,
|
||||
italic: oldPreset.style.italic,
|
||||
stroke: oldPreset.style.stroke,
|
||||
shadow: oldPreset.style.shadow,
|
||||
})
|
||||
setActivePreset(presetKey)
|
||||
}
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
return {
|
||||
activePreset,
|
||||
setActivePreset,
|
||||
titlePresets: NEW_TITLE_PRESETS,
|
||||
updateTitle,
|
||||
toggleAiAutoSelect,
|
||||
@@ -209,7 +145,6 @@ export function useTitleStyleUpdaters({
|
||||
toggleStroke,
|
||||
toggleShadow,
|
||||
applyPreset,
|
||||
applyTemplate,
|
||||
updateStyle,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* 标题模板管理 Hook
|
||||
* - 系统预设从 TITLE_PRESETS 加载（始终可用）
|
||||
* - 用户自定义模板存 localStorage
|
||||
* - 支持创建、编辑、复制、删除
|
||||
*/
|
||||
import { useState, useCallback, useEffect } from "react"
|
||||
import { TITLE_PRESETS } from "@/components/title/constants"
|
||||
import type { TitleStyleConfig } from "@/components/title/types"
|
||||
|
||||
const STORAGE_KEY = "xiaoxia-title-templates"
|
||||
|
||||
export interface TitleTemplate {
|
||||
key: string
|
||||
label: string
|
||||
emoji?: string
|
||||
isSystem: boolean
|
||||
style: Partial<TitleStyleConfig>
|
||||
}
|
||||
|
||||
/** 生成唯一模板 key */
|
||||
function genTemplateKey(label: string): string {
|
||||
const slug = label
|
||||
.toLowerCase()
|
||||
.replace(/[^\w\u4e00-\u9fff]/g, "_")
|
||||
.replace(/_+/g, "_")
|
||||
.replace(/^_|_$/g, "")
|
||||
return `user_${slug}_${Date.now().toString(36)}`
|
||||
}
|
||||
|
||||
export function useTitleTemplates() {
|
||||
const [userTemplates, setUserTemplates] = useState<TitleTemplate[]>(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
return raw ? JSON.parse(raw) : []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(userTemplates))
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [userTemplates])
|
||||
|
||||
const allTemplates: TitleTemplate[] = [
|
||||
...TITLE_PRESETS.map((p) => ({ ...p, isSystem: true })),
|
||||
...userTemplates,
|
||||
]
|
||||
|
||||
const saveTemplate = useCallback((label: string, style: Partial<TitleStyleConfig>, emoji?: string) => {
|
||||
const t: TitleTemplate = { key: genTemplateKey(label), label, emoji: emoji || "", isSystem: false, style }
|
||||
setUserTemplates((prev) => [...prev, t])
|
||||
return t
|
||||
}, [])
|
||||
|
||||
const updateTemplate = useCallback((key: string, patch: { label?: string; style?: Partial<TitleStyleConfig>; emoji?: string }) => {
|
||||
setUserTemplates((prev) => prev.map((t) => (t.key === key ? { ...t, ...patch } : t)))
|
||||
}, [])
|
||||
|
||||
const deleteTemplate = useCallback((key: string) => {
|
||||
setUserTemplates((prev) => prev.filter((t) => t.key !== key))
|
||||
}, [])
|
||||
|
||||
const duplicateTemplate = useCallback((key: string) => {
|
||||
setUserTemplates((prev) => {
|
||||
const src = prev.find((t) => t.key === key)
|
||||
if (!src) return prev
|
||||
const dup: TitleTemplate = {
|
||||
...src,
|
||||
key: genTemplateKey(src.label + "_copy"),
|
||||
label: src.label + " 副本",
|
||||
}
|
||||
return [...prev, dup]
|
||||
})
|
||||
}, [])
|
||||
|
||||
return { allTemplates, saveTemplate, updateTemplate, deleteTemplate, duplicateTemplate }
|
||||
}
|
||||
@@ -805,9 +805,8 @@ def _run_inference(
|
||||
crop = frame[y1:y2_eff, x1:x2]
|
||||
if crop.size == 0:
|
||||
continue
|
||||
# 直接传 BGR 给 VAE：VAE 内部 preprocess_img 已做 BGR→RGB 转换，
|
||||
# 此处再 cvtColor 会造成双重转换、R/B 通道互换（蓝色块根因）。
|
||||
crop_resized = cv2.resize(crop, (256, 256), interpolation=cv2.INTER_LANCZOS4)
|
||||
crop_rgb = cv2.cvtColor(crop, cv2.COLOR_BGR2RGB)
|
||||
crop_resized = cv2.resize(crop_rgb, (256, 256), interpolation=cv2.INTER_LANCZOS4)
|
||||
# 使用 VAE 的 get_latents_for_unet 得到 8 通道输入
|
||||
# get_latents_for_unet 内部: preprocess(half_mask=True) encode + preprocess(half_mask=False) encode → cat → [1,8,32,32]
|
||||
latents = vae.get_latents_for_unet(crop_resized).detach().cpu()
|
||||
|
||||
Reference in New Issue
Block a user