feat: 标题样式3个预设(经典/醒目/柔和)一键应用
CI/CD Pipeline / Frontend Lint (push) Failing after 71h35m30s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 71h36m15s
CI/CD Pipeline / Production Browser E2E (push) Failing after 1730h11m1s
CI/CD Pipeline / Staging E2E Tests (push) Failing after 1730h11m2s
CI/CD Pipeline / Build Production Runtime Images (push) Failing after 1730h11m5s
CI/CD Pipeline / Deploy Staging (push) Failing after 1730h11m5s
CI/CD Pipeline / Deploy Production (push) Failing after 1730h42m29s

- ClipPropertiesPanel 新增 TITLE_PRESETS 常量(3组预设样式)
- 预设按钮 UI:经典🅰/醒目🔠/柔和🅒,点击一键应用字体+大小+粗体+斜体+描边+阴影
- CSS 样式:ep-title-presets 横排 flex,hover 高亮与 ep-style-btn 风格统一

🟢 P2-2 完成
This commit is contained in:
灵应
2026-07-06 13:18:17 +08:00
parent 065e383f3c
commit ed11fc20e7
2 changed files with 71 additions and 0 deletions
@@ -1194,6 +1194,38 @@
color: var(--primary, #6366f1);
}
/* 标题预设样式按钮 */
.ep-title-presets {
display: flex;
gap: 8px;
}
.ep-title-preset-btn {
flex: 1;
height: 36px;
background: var(--bg-primary, #ffffff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--radius-xs, 8px);
color: var(--text-secondary, #64748b);
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.2s ease;
}
.ep-title-preset-btn:hover {
border-color: var(--primary, #6366f1);
color: var(--primary, #6366f1);
background: var(--primary-soft, #eef2ff);
}
.ep-title-preset-icon {
font-size: 14px;
}
/* AI推荐按钮 */
.ep-ai-recommend-btn {
width: 100%;
@@ -81,6 +81,28 @@ const BGM_OPTIONS = [
{ value: "bgm_04", label: "🎵 科技感" },
];
/** 标题样式预设 — 一键应用一组样式 */
const TITLE_PRESETS = [
{
key: "classic",
label: "经典",
icon: "🅰",
style: { font: "思源黑体", size: 24, bold: true, italic: false, stroke: true, shadow: false },
},
{
key: "bold",
label: "醒目",
icon: "🔠",
style: { font: "思源黑体", size: 32, bold: true, italic: false, stroke: true, shadow: true },
},
{
key: "elegant",
label: "柔和",
icon: "🅒",
style: { font: "思源宋体", size: 20, bold: false, italic: false, stroke: false, shadow: true },
},
];
const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
selectedClip,
titleSettings,
@@ -172,6 +194,23 @@ const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
</div>
</div>
<div className="ep-field">
<label className="ep-field-label">预设样式</label>
<div className="ep-title-presets">
{TITLE_PRESETS.map((p) => (
<button
key={p.key}
className="ep-title-preset-btn"
onClick={() => onTitleSettingsChange({ ...p.style })}
title={`${p.label}: ${p.style.font} ${p.style.size}px`}
>
<span className="ep-title-preset-icon">{p.icon}</span>
<span>{p.label}</span>
</button>
))}
</div>
</div>
<div className="ep-field">
<label className="ep-field-label">样式</label>
<div className="ep-style-btns">