From fcb863e38d34241b6361b75aae781faf87036e49 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Tue, 8 Sep 2026 11:43:05 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20#1789=20=E6=A0=87=E9=A2=98=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=20UI=20=E6=8E=A7=E4=BB=B6=20+=20#1790=20=E7=A9=BA?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E6=97=B6=E9=97=B4=E7=BA=BF=E4=B8=8D=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=88=BB=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1789: - 新增 TitleSettingsSection 组件（字号滑块/字体预设/位置/颜色/文本输入） - ClipPropertiesPanel 集成标题设置区块 - RightPanel/EditingPlanner 透传 titleConfig/onTitleConfigChange - 添加颜色预设 CSS 样式 #1790: - generateRulerMarks 在 totalDuration<=0 时返回空数组，避免空模板显示时间刻度 --- .../pages/editing-planner/EditingPlanner.css | 44 ++++++ .../pages/editing-planner/EditingPlanner.tsx | 2 + .../components/ClipPropertiesPanel.tsx | 8 ++ .../editing-planner/components/RightPanel.tsx | 7 + .../clip-properties/TitleSettingsSection.tsx | 136 ++++++++++++++++++ .../editing-planner/types/clipProperties.ts | 5 + .../pages/editing-planner/utils/timeline.ts | 2 + 7 files changed, 204 insertions(+) create mode 100644 apps/web/src/pages/editing-planner/components/clip-properties/TitleSettingsSection.tsx diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css index 36a06cd3f..408933adc 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.css +++ b/apps/web/src/pages/editing-planner/EditingPlanner.css @@ -6440,3 +6440,47 @@ opacity: 0.6; cursor: not-allowed; } + +/* ═══ 标题设置 — 颜色预设 ═══ */ +.ep-color-presets { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.ep-color-swatch { + width: 24px; + height: 24px; + border-radius: 4px; + border: 2px solid transparent; + cursor: pointer; + transition: border-color 0.15s, transform 0.1s; +} + +.ep-color-swatch:hover { + transform: scale(1.1); +} + +.ep-color-swatch.active { + border-color: var(--ep-primary, #4f8cff); +} + +.ep-color-picker { + width: 28px; + height: 28px; + border: none; + border-radius: 4px; + cursor: pointer; + padding: 0; + background: none; +} + +.ep-color-picker::-webkit-color-swatch-wrapper { + padding: 0; +} + +.ep-color-picker::-webkit-color-swatch { + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 4px; +} diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.tsx b/apps/web/src/pages/editing-planner/EditingPlanner.tsx index 51247489d..305f84afb 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.tsx +++ b/apps/web/src/pages/editing-planner/EditingPlanner.tsx @@ -196,6 +196,8 @@ const EditingPlanner: React.FC = () => { {/* 右栏 260px：设置面板 */} = ({ + titleConfig, + onTitleConfigChange, selectedClip, subtitleSettings, bgmSettings, @@ -40,6 +43,11 @@ const ClipPropertiesPanel: React.FC = ({ return (
+ {/* ═══ 标题设置 — #1789 ═══ */} + {titleConfig && onTitleConfigChange && ( + + )} + {/* ═══ 字幕设置 ═══ */} TitleConfig)) => void rightTab: "properties" | "clips" onTabChange: (tab: "properties" | "clips") => void // 属性 tab @@ -46,6 +49,8 @@ interface RightPanelProps { } const RightPanel: React.FC = ({ + titleConfig, + onTitleConfigChange, rightTab, onTabChange, selectedClip, @@ -118,6 +123,8 @@ const RightPanel: React.FC = ({ >["onBgmSettingsChange"] return ( TitleConfig)) => void +} + +const TITLE_COLOR_PRESETS = [ + "#ffffff", + "#000000", + "#ff4444", + "#ffaa00", + "#44ff44", + "#4488ff", + "#ff44ff", + "#ffff44", +] + +const TitleSettingsSection: React.FC = ({ config, onChange }) => { + const update = (partial: Partial) => { + onChange((prev: TitleConfig) => ({ ...prev, ...partial })) + } + + return ( +
+
+ 📝 + 标题设置 +
+ + {/* AI 自动选择开关 */} +
+ AI 自动选择 +
update({ ai_auto_select: !config.ai_auto_select })} + > +
+
+
+ + {!config.ai_auto_select && ( + <> + {/* 标题文本 */} +
+ + update({ content: e.target.value })} + /> +
+ + {/* 位置 */} +
+ + +
+ + {/* 字体预设 */} +
+ + +
+ + {/* 字号滑块 */} +
+ +
+ update({ font_size: Number(e.target.value) })} + /> + {config.font_size}px +
+
+ + {/* 颜色 */} +
+ +
+ {TITLE_COLOR_PRESETS.map((color) => ( +
update({ font_color: color })} + /> + ))} + update({ font_color: e.target.value })} + /> +
+
+ + )} +
+ ) +} + +export default TitleSettingsSection diff --git a/apps/web/src/pages/editing-planner/types/clipProperties.ts b/apps/web/src/pages/editing-planner/types/clipProperties.ts index f2572d599..aed280e05 100644 --- a/apps/web/src/pages/editing-planner/types/clipProperties.ts +++ b/apps/web/src/pages/editing-planner/types/clipProperties.ts @@ -4,6 +4,7 @@ import type { ClipData } from "./clip" import type { TemplateMode } from "@/api/editing-planner" import type { AssetItem } from "@/api/assets" +import type { TitleConfig } from "@/api/template-editor" export interface SubtitleSettings { enabled: boolean @@ -28,6 +29,10 @@ export interface BgmSettings { } export interface ClipPropertiesPanelProps { + /** 标题配置 — #1789 */ + titleConfig?: TitleConfig + /** 标题配置变更 */ + onTitleConfigChange?: (config: TitleConfig | ((prev: TitleConfig) => TitleConfig)) => void selectedClip: ClipData | null subtitleSettings: SubtitleSettings bgmSettings: BgmSettings diff --git a/apps/web/src/pages/editing-planner/utils/timeline.ts b/apps/web/src/pages/editing-planner/utils/timeline.ts index d0bd0b97c..ed44f0fc6 100644 --- a/apps/web/src/pages/editing-planner/utils/timeline.ts +++ b/apps/web/src/pages/editing-planner/utils/timeline.ts @@ -13,6 +13,8 @@ export const formatTrimTime = (sec: number): string => { /** 生成时间标尺刻度 */ export const generateRulerMarks = (totalDuration: number, step: number): number[] => { const marks: number[] = [] + // #1790: 无片段时不显示时间刻度 + if (totalDuration <= 0) return marks for (let t = 0; t <= totalDuration + step; t += step) { marks.push(t) } -- 2.54.0