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
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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user