xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 5 Pull Requests 4 Actions 34.2k Packages Projects Releases 7 Wiki Activity

feat(title): 爆款标题样式配置面板升级（描边粗细+行距+爆款字体+逐行样式+独立封面） #2001

New Issue
Open
opened 2026-09-20 11:44:23 +08:00 by auto-approve-bot · 0 comments
auto-approve-bot commented 2026-09-20 11:44:23 +08:00
Collaborator
Copy Link
Copy Source

背景

竞品（流光剪辑、剪映等）标题配置支持描边粗细滑块、逐行独立样式、关键词变色、爆款大字报效果，是抖音短视频标题标配。当前小虾智剪标题面板过于简陋（描边/阴影只有开关，没有逐行配置），需要升级。

后端 SubtitleStyle 和 SubtitleRenderEngine 已经支持描边宽度/颜色、阴影参数、背景框、行距等全部能力（ASS→FFmpeg烧录），核心改造在前端面板。

功能清单

P0 必须有

功能 说明 改动方
描边宽度滑块 当前只有开/关，改为 0-20px 滑块 前端（已有 stroke_width 字段）
描边颜色选择 色板选描边色（黑/白/红/金+自定义） 前端（已有 stroke_color 字段）
每行最大字符数 4-20字滑块，爆款大字报每行7-10字 前端（已有 max_chars_per_line）
行距调节 0-30% 滑块，爆款行距偏紧 前端（已有 line_spacing 字段）
顶部边距 0-50% 滑块，爆款标题贴顶部5-10% 前端（已有 margin_v 字段）
爆款字体包 引入优设标题黑/阿里普惠体Bold/抖音体/思源黑体Heavy 前端+运维部署字体
抖音爆款黄预设 一键：黄字#FFFF00+8px黑描边+粗体+80px 前端

字体清单（免费可商用，部署到 /usr/share/fonts/truetype/xiaoxia/，fc-cache刷新）：

  • 优设标题黑（爆款标题标配，超粗黑体）
  • 阿里巴巴普惠体 2.0 Bold/Heavy（电商/知识类）
  • 抖音美好体 Bold（平台原生感）
  • 思源黑体 Heavy（补字重）

P1 应该有

功能 说明 改动方
每行独立样式 展开某行单独设字号/颜色/描边，做关键词变色 前端+后端小改（ASS内联标签）
阴影参数化 偏移+模糊滑块 前端（已有字段）
背景色块 开关+色板+内边距滑块 前端（已有字段）
Canvas实时预览 右侧9:16视频框实时渲染文字效果 前端
标题封面独立配置 封面文案/样式与视频标题分离，Tab切换 前端+后端加cover_title_config字段

P2 后续迭代

  • 标题花字动画（后端animation_type已支持）
  • AI关键词自动高亮
  • 场景化标题模板库（情感/带货/知识/搞笑）
  • AI封面图生成

UI设计

整体布局： 左侧配置面板 + 右侧Canvas实时预览（默认9:16竖屏，可切16:9/1:1）。

面板结构（Step3 标题步骤）：

  1. 开关行：「启用视频标题」toggle
  2. Tab切换：📹视频标题 / 🖼️封面标题（复用同一套组件，数据独立）
  3. 标题文案：输入框 + 🔄 AI重新生成按钮
  4. 【布局排版】分组：每行字符数滑块 / 行间距滑块 / 顶部边距滑块
  5. 【字体与字号】分组：
    • 一行两列下拉：字体（含4个新字体）+ 位置（顶部/居中/底部）
    • 字号滑块（20-160px，默认80px）
    • B/I/U按钮（粗体默认激活）
  6. 【颜色与描边】分组：
    • 文字颜色：6个预设色板（黄/白/红/黑/橙/粉）+ 自定义取色
    • 描边粗细滑块（0-20px，默认8px）
    • 描边颜色：4个预设色板+自定义
  7. 【阴影与背景】分组：
    • 阴影toggle → 展开偏移+模糊滑块
    • 背景色块toggle → 展开色板+内边距滑块
  8. 【一键预设】分组：横向滚动10个预设缩略卡片（迷你Canvas预览+名称）
  9. 【逐行独立设置】分组：
    • 按自动换行结果折叠显示「第1行: xxx」「第2行: xxx」
    • 展开后：该行字号滑块 / 该行颜色色板 / 该行描边滑块 / ↺重置按钮

10个预设：

  1. 抖音爆款黄（默认）：黄字+8px黑描边+粗体
  2. 经典白字：白字+6px黑描边+粗体
  3. 黑金质感：金字+4px黑描边+阴影
  4. 励志红底：白字+无描边+红底色块
  5. 综艺花字：白字+3px粉描边+阴影
  6. 白底黑字：黑字+白底色块
  7. 霓虹发光：青字+2px紫描边+大模糊发光
  8. 橙黑醒目：橙字+7px黑描边+大字
  9. 粉白少女：粉字+5px白描边
  10. 纯黑商务：黑字+浅灰底色块

Canvas预览（右侧）：

  • 默认540x960竖屏，工具栏切换比例
  • 深色渐变背景模拟视频画面
  • 描边用text-shadow多方向渲染（规避-webkit-text-stroke吞填充色bug）
  • 所有配置变更实时重绘

封面面板（Step5）： 复用TitleStylePanel组件，独立数据，默认文案=视频标题、默认样式=抖音爆款黄。

前端改动文件

文件 改动
apps/web/src/pages/generate/types.ts TitleSettings 扩展：stroke_width/stroke_color, shadow_offset/shadow_blur, bg_enabled/bg_color/bg_padding, underline, line_spacing_pct, top_margin_pct, per_line_styles, cover_title
apps/web/src/pages/generate/constants.ts FONT_OPTIONS 加4个新字体；TITLE_PRESETS 扩充到10个（含迷你Canvas预览配置）
apps/web/src/pages/generate/components/title/TitleStylePanel.tsx 重构为上述面板结构，接入所有控件和Canvas预览
apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx 适配新预设，增加迷你Canvas缩略渲染
新增 components/title/PerLineEditor.tsx 逐行独立配置子组件
新增 components/title/TitlePreviewCanvas.tsx Canvas实时预览组件
Step5封面组件 接入独立封面标题配置，复用TitleStylePanel
public/fonts/ 放入4个字体文件，CSS @font-face引入

后端改动

1. per-line overrides（~0.5天）

title_config 新增 line_overrides 字段（向后兼容）：

{
  "text": "转发帮阿婆早日团聚",
  "stroke_width": 8,
  "line_overrides": {
    "1": {"color": "#FF0000", "bold": true}
  }
}

实现：subtitle_render_engine.py 生成ASS时，对有覆盖的行用 {\c&HBBGGRR&}{\b1}文字{\r} 内联标签包裹。不改SubtitleStyle数据结构。

2. 字体部署

  • GPU节点 + 业务服务器：/usr/share/fonts/truetype/xiaoxia/
  • fc-cache -fv 刷新，确认 ffmpeg 能读到

3. 封面标题独立字段

  • 数据模型加 cover_title_config（复用title_config结构）
  • 封面渲染用 cover_title_config，为空fallback到 title_config
  • API透传即可

工作量

模块 人天
前端面板重构（P0项） 2
Canvas实时预览组件 0.5
逐行独立样式UI 1
预设扩充+缩略渲染 0.5
封面独立标题Tab 1
字体引入+@font-face 0.5
后端 per-line overrides 0.5
后端封面独立字段 0.5
字体部署 0.5
联调+E2E验收 1
合计 ~8人天

验收标准

  1. 「抖音爆款黄」预设一键出黄字8px黑粗边大字报
  2. 描边滑块0-20px实时生效，最粗有明显粗轮廓
  3. 每行字符数4-20可调，自动换行正确
  4. 行距/顶距可调，预览实时反映
  5. 逐行展开可单独设字号/颜色/描边，关键词变色正确
  6. 4个新字体正常渲染（无豆腐块）
  7. 背景色块开关+颜色+内边距生效
  8. 阴影偏移+模糊可调
  9. 封面可配置独立于视频标题的文案和样式
  10. Canvas预览与FFmpeg最终渲染效果一致
  11. 向后兼容：旧title_config数据（无新字段）使用默认值正常工作

参考

  • 可交互原型：原型HTML（开发时可直接参考布局/交互/配色）
  • 后端ASS引擎：packages/domain/subtitle_style.py + apps/worker/video_processing/subtitle_render_engine.py
  • 现有前端组件：apps/web/src/pages/generate/components/title/
  • 现有TitlePresetsGrid已实现text-shadow双图层描边渲染（规避Chromium bug），新Canvas预览可复用该逻辑
## 背景 竞品（流光剪辑、剪映等）标题配置支持描边粗细滑块、逐行独立样式、关键词变色、爆款大字报效果，是抖音短视频标题标配。当前小虾智剪标题面板过于简陋（描边/阴影只有开关，没有逐行配置），需要升级。 后端 `SubtitleStyle` 和 `SubtitleRenderEngine` 已经支持描边宽度/颜色、阴影参数、背景框、行距等全部能力（ASS→FFmpeg烧录），**核心改造在前端面板**。 --- ## 功能清单 ### P0 必须有 | 功能 | 说明 | 改动方 | |------|------|--------| | 描边宽度滑块 | 当前只有开/关，改为 0-20px 滑块 | 前端（已有 stroke_width 字段） | | 描边颜色选择 | 色板选描边色（黑/白/红/金+自定义） | 前端（已有 stroke_color 字段） | | 每行最大字符数 | 4-20字滑块，爆款大字报每行7-10字 | 前端（已有 max_chars_per_line） | | 行距调节 | 0-30% 滑块，爆款行距偏紧 | 前端（已有 line_spacing 字段） | | 顶部边距 | 0-50% 滑块，爆款标题贴顶部5-10% | 前端（已有 margin_v 字段） | | 爆款字体包 | 引入优设标题黑/阿里普惠体Bold/抖音体/思源黑体Heavy | 前端+运维部署字体 | | 抖音爆款黄预设 | 一键：黄字#FFFF00+8px黑描边+粗体+80px | 前端 | **字体清单（免费可商用，部署到 `/usr/share/fonts/truetype/xiaoxia/`，fc-cache刷新）：** - 优设标题黑（爆款标题标配，超粗黑体） - 阿里巴巴普惠体 2.0 Bold/Heavy（电商/知识类） - 抖音美好体 Bold（平台原生感） - 思源黑体 Heavy（补字重） ### P1 应该有 | 功能 | 说明 | 改动方 | |------|------|--------| | 每行独立样式 | 展开某行单独设字号/颜色/描边，做关键词变色 | 前端+后端小改（ASS内联标签） | | 阴影参数化 | 偏移+模糊滑块 | 前端（已有字段） | | 背景色块 | 开关+色板+内边距滑块 | 前端（已有字段） | | Canvas实时预览 | 右侧9:16视频框实时渲染文字效果 | 前端 | | 标题封面独立配置 | 封面文案/样式与视频标题分离，Tab切换 | 前端+后端加cover_title_config字段 | ### P2 后续迭代 - 标题花字动画（后端animation_type已支持） - AI关键词自动高亮 - 场景化标题模板库（情感/带货/知识/搞笑） - AI封面图生成 --- ## UI设计 **整体布局：** 左侧配置面板 + 右侧Canvas实时预览（默认9:16竖屏，可切16:9/1:1）。 **面板结构（Step3 标题步骤）：** 1. **开关行**：「启用视频标题」toggle 2. **Tab切换**：📹视频标题 / 🖼️封面标题（复用同一套组件，数据独立） 3. **标题文案**：输入框 + 🔄 AI重新生成按钮 4. **【布局排版】分组**：每行字符数滑块 / 行间距滑块 / 顶部边距滑块 5. **【字体与字号】分组**： - 一行两列下拉：字体（含4个新字体）+ 位置（顶部/居中/底部） - 字号滑块（20-160px，默认80px） - B/I/U按钮（粗体默认激活） 6. **【颜色与描边】分组**： - 文字颜色：6个预设色板（黄/白/红/黑/橙/粉）+ 自定义取色 - 描边粗细滑块（0-20px，默认8px） - 描边颜色：4个预设色板+自定义 7. **【阴影与背景】分组**： - 阴影toggle → 展开偏移+模糊滑块 - 背景色块toggle → 展开色板+内边距滑块 8. **【一键预设】分组**：横向滚动10个预设缩略卡片（迷你Canvas预览+名称） 9. **【逐行独立设置】分组**： - 按自动换行结果折叠显示「第1行: xxx」「第2行: xxx」 - 展开后：该行字号滑块 / 该行颜色色板 / 该行描边滑块 / ↺重置按钮 **10个预设：** 1. 抖音爆款黄（默认）：黄字+8px黑描边+粗体 2. 经典白字：白字+6px黑描边+粗体 3. 黑金质感：金字+4px黑描边+阴影 4. 励志红底：白字+无描边+红底色块 5. 综艺花字：白字+3px粉描边+阴影 6. 白底黑字：黑字+白底色块 7. 霓虹发光：青字+2px紫描边+大模糊发光 8. 橙黑醒目：橙字+7px黑描边+大字 9. 粉白少女：粉字+5px白描边 10. 纯黑商务：黑字+浅灰底色块 **Canvas预览（右侧）：** - 默认540x960竖屏，工具栏切换比例 - 深色渐变背景模拟视频画面 - 描边用text-shadow多方向渲染（规避-webkit-text-stroke吞填充色bug） - 所有配置变更实时重绘 **封面面板（Step5）：** 复用TitleStylePanel组件，独立数据，默认文案=视频标题、默认样式=抖音爆款黄。 --- ## 前端改动文件 | 文件 | 改动 | |------|------| | `apps/web/src/pages/generate/types.ts` | TitleSettings 扩展：stroke_width/stroke_color, shadow_offset/shadow_blur, bg_enabled/bg_color/bg_padding, underline, line_spacing_pct, top_margin_pct, per_line_styles, cover_title | | `apps/web/src/pages/generate/constants.ts` | FONT_OPTIONS 加4个新字体；TITLE_PRESETS 扩充到10个（含迷你Canvas预览配置） | | `apps/web/src/pages/generate/components/title/TitleStylePanel.tsx` | 重构为上述面板结构，接入所有控件和Canvas预览 | | `apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx` | 适配新预设，增加迷你Canvas缩略渲染 | | 新增 `components/title/PerLineEditor.tsx` | 逐行独立配置子组件 | | 新增 `components/title/TitlePreviewCanvas.tsx` | Canvas实时预览组件 | | Step5封面组件 | 接入独立封面标题配置，复用TitleStylePanel | | `public/fonts/` | 放入4个字体文件，CSS @font-face引入 | --- ## 后端改动 ### 1. per-line overrides（~0.5天） `title_config` 新增 `line_overrides` 字段（向后兼容）： ```json { "text": "转发帮阿婆早日团聚", "stroke_width": 8, "line_overrides": { "1": {"color": "#FF0000", "bold": true} } } ``` 实现：`subtitle_render_engine.py` 生成ASS时，对有覆盖的行用 `{\c&HBBGGRR&}{\b1}文字{\r}` 内联标签包裹。不改SubtitleStyle数据结构。 ### 2. 字体部署 - GPU节点 + 业务服务器：`/usr/share/fonts/truetype/xiaoxia/` - `fc-cache -fv` 刷新，确认 ffmpeg 能读到 ### 3. 封面标题独立字段 - 数据模型加 `cover_title_config`（复用title_config结构） - 封面渲染用 `cover_title_config`，为空fallback到 `title_config` - API透传即可 --- ## 工作量 | 模块 | 人天 | |------|------| | 前端面板重构（P0项） | 2 | | Canvas实时预览组件 | 0.5 | | 逐行独立样式UI | 1 | | 预设扩充+缩略渲染 | 0.5 | | 封面独立标题Tab | 1 | | 字体引入+@font-face | 0.5 | | 后端 per-line overrides | 0.5 | | 后端封面独立字段 | 0.5 | | 字体部署 | 0.5 | | 联调+E2E验收 | 1 | | **合计** | **~8人天** | --- ## 验收标准 1. 「抖音爆款黄」预设一键出黄字8px黑粗边大字报 2. 描边滑块0-20px实时生效，最粗有明显粗轮廓 3. 每行字符数4-20可调，自动换行正确 4. 行距/顶距可调，预览实时反映 5. 逐行展开可单独设字号/颜色/描边，关键词变色正确 6. 4个新字体正常渲染（无豆腐块） 7. 背景色块开关+颜色+内边距生效 8. 阴影偏移+模糊可调 9. 封面可配置独立于视频标题的文案和样式 10. Canvas预览与FFmpeg最终渲染效果一致 11. 向后兼容：旧title_config数据（无新字段）使用默认值正常工作 --- ## 参考 - 可交互原型：[原型HTML](https://coze-space)（开发时可直接参考布局/交互/配色） - 后端ASS引擎：`packages/domain/subtitle_style.py` + `apps/worker/video_processing/subtitle_render_engine.py` - 现有前端组件：`apps/web/src/pages/generate/components/title/` - 现有TitlePresetsGrid已实现text-shadow双图层描边渲染（规避Chromium bug），新Canvas预览可复用该逻辑
auto-approve-bot added the frontendP1feature labels 2026-09-20 11:44:23 +08:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label feature frontend P1
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot frontend-dev xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2001
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?