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

feat(web): #2001 爆款标题样式配置面板升级（P0+P1） #2002

Merged
xiaoxia merged 1 commits from feat/title-style-upgrade into develop 2026-09-20 23:09:08 +08:00
Conversation 4 Commits 1 Files Changed 25
+2644 -377
xiaoxia commented 2026-09-20 21:29:53 +08:00
Owner
Copy Link
Copy Source

变更概览

对应 Issue #2001 爆款标题样式配置面板升级。

P0（必须）

  • 描边宽度滑块（0–20px）+ 描边颜色选择器（色板+自定义）
  • 每行最大字符数滑块（0–20，0=不自动换行）
  • 行距倍数/顶部边距滑块
  • 新增 4 款爆款字体：优设标题黑 / 阿里普惠体Bold / 抖音美好体 / 思源黑体Heavy
  • 抖音爆款黄预设（优设标题黑 / 80px / #ffd700 / bold / 8px黑描边 / 带阴影）

P1（一起做）

  • 阴影参数化（X/Y 偏移 + 模糊半径 + 颜色）
  • 背景色块（颜色 + 内边距 + 圆角）
  • Canvas 迷你实时预览（面板顶部 WYSIWYG + 预设卡片缩略）
  • 10 个预设含 emoji + Canvas 缩略
  • Tabs 分组：基础 / 描边 / 阴影 / 背景 / 排版 / 封面
  • 封面独立标题入口（checkbox + 主样式默认值）

契约

新增 title_config 字段：

  • stroke: { enabled, width, color }
  • shadow: { enabled, offset_x, offset_y, blur, color }
  • line_height / margin_top / max_chars_per_line
  • background: { enabled, color, padding, radius }
  • line_overrides: [{ line_index, size, color, bold, italic, stroke, highlights: [{word,color,bold,scale}] }]
  • cover_title_config: 同主样式结构（用于封面）

渲染

  • titleCanvas.ts 全字段支持（描边宽色/阴影参数/背景块/自动换行/行距/逐行覆盖/关键词高亮），720p 基准 scale 保持一致
  • contract.ts buildTitleConfigPayload 序列化全部新字段（snake_case）
  • useGenerateVideo / useBatchCovers / usePlanConfigLoader 全链路适配
  • AiAvatarTitleConfig ↔ TitleSettings 双向映射（snake_case ↔ camelCase）
  • PanelLipsyncPreview CSS 预览支持 WebkitTextStrokeWidth/Color、参数化 textShadow、背景块、自动换行、行距

向后兼容

  • 保留旧 bold/stroke/shadow 布尔字段与旧 props
  • 旧草稿加载时新字段自动补默认值
  • #1263 紧凑 T 图标由新预设区（10 预设 + Canvas 缩略）覆盖

P2 本次未做

  • 花字动画、AI 关键词自动高亮、场景化模板库、AI 封面图、逐行编辑器的完整关键词高亮UI（仅 Canvas 渲染层预留）
## 变更概览 对应 Issue #2001 爆款标题样式配置面板升级。 ### P0（必须） - 描边宽度滑块（0–20px）+ 描边颜色选择器（色板+自定义） - 每行最大字符数滑块（0–20，0=不自动换行） - 行距倍数/顶部边距滑块 - 新增 4 款爆款字体：优设标题黑 / 阿里普惠体Bold / 抖音美好体 / 思源黑体Heavy - 抖音爆款黄预设（优设标题黑 / 80px / #ffd700 / bold / 8px黑描边 / 带阴影） ### P1（一起做） - 阴影参数化（X/Y 偏移 + 模糊半径 + 颜色） - 背景色块（颜色 + 内边距 + 圆角） - Canvas 迷你实时预览（面板顶部 WYSIWYG + 预设卡片缩略） - 10 个预设含 emoji + Canvas 缩略 - Tabs 分组：基础 / 描边 / 阴影 / 背景 / 排版 / 封面 - 封面独立标题入口（checkbox + 主样式默认值） ### 契约 新增 title_config 字段： - stroke: { enabled, width, color } - shadow: { enabled, offset_x, offset_y, blur, color } - line_height / margin_top / max_chars_per_line - background: { enabled, color, padding, radius } - line_overrides: [{ line_index, size, color, bold, italic, stroke, highlights: [{word,color,bold,scale}] }] - cover_title_config: 同主样式结构（用于封面） ### 渲染 - titleCanvas.ts 全字段支持（描边宽色/阴影参数/背景块/自动换行/行距/逐行覆盖/关键词高亮），720p 基准 scale 保持一致 - contract.ts buildTitleConfigPayload 序列化全部新字段（snake_case） - useGenerateVideo / useBatchCovers / usePlanConfigLoader 全链路适配 - AiAvatarTitleConfig ↔ TitleSettings 双向映射（snake_case ↔ camelCase） - PanelLipsyncPreview CSS 预览支持 WebkitTextStrokeWidth/Color、参数化 textShadow、背景块、自动换行、行距 ### 向后兼容 - 保留旧 bold/stroke/shadow 布尔字段与旧 props - 旧草稿加载时新字段自动补默认值 - #1263 紧凑 T 图标由新预设区（10 预设 + Canvas 缩略）覆盖 ### P2 本次未做 - 花字动画、AI 关键词自动高亮、场景化模板库、AI 封面图、逐行编辑器的完整关键词高亮UI（仅 Canvas 渲染层预留）
xiaoxia force-pushed feat/title-style-upgrade from 1609363136 to 15f977c46a 2026-09-20 21:30:45 +08:00 Compare
xiaoxia force-pushed feat/title-style-upgrade from 15f977c46a to 588aaff036 2026-09-20 21:33:34 +08:00 Compare
xiaoxia force-pushed feat/title-style-upgrade from 588aaff036 to b2601bc871 2026-09-20 21:42:03 +08:00 Compare
xiaoxia force-pushed feat/title-style-upgrade from b2601bc871 to 5c2de0f935 2026-09-20 21:58:10 +08:00 Compare
xiaoxia force-pushed feat/title-style-upgrade from 5c2de0f935 to c08fbfe47a 2026-09-20 22:16:34 +08:00 Compare
xiaoxia force-pushed feat/title-style-upgrade from c08fbfe47a to 4476efd026 2026-09-20 22:32:09 +08:00 Compare
xiaoxia force-pushed feat/title-style-upgrade from 4476efd026 to f75f9b6ec0 2026-09-20 22:38:38 +08:00 Compare
xiaoxia added 1 commit 2026-09-20 22:48:39 +08:00
feat(web): #2001 爆款标题样式配置面板升级 + ai-avatar 配音面板清理emotion
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 2s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 54s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m7s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 23s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m0s
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 5m53s
Details
AI Code Review / AI Code Review (pull_request) Successful in 7m46s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 10m40s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 2m12s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 11s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 25m53s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 29m14s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 2h24m14s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 3s
Details
4f02d3a04e 
- 新增描边宽色/阴影参数/行距/上边距/maxCharsPerLine/背景色块/逐行/封面独立配置
- 4款爆款字体 + 抖音爆款黄预设
- 共享 TitleStylePanel + TitleMiniPreview Canvas预览
- 全链路适配（Canvas/contract/useGenerateVideo/useBatchCovers/usePlanConfigLoader）
- CreateGenerationTaskRequest/GenerateCoverTitleConfig 类型扩展
- ai-avatar: 删除情绪下拉框，tts-preview补传style，lipsync去emotion参数
- normalizeEmotion 工具函数保留
xiaoxia force-pushed feat/title-style-upgrade from f75f9b6ec0 to 4f02d3a04e 2026-09-20 22:48:39 +08:00 Compare
auto-approve-bot approved these changes 2026-09-20 22:49:48 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-20 22:49:48 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-20 22:54:26 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

项目 详情
PR号 #2002
预览链接 https://pr-2002.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2002 | | 预览链接 | [https://pr-2002.preview.xiaoxiajianji.com](https://pr-2002.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia merged commit 8c715474f4 into develop 2026-09-20 23:09:08 +08:00
gitea-actions bot commented 2026-09-20 23:11:52 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

PR #2002 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #2002 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
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
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot frontend-dev xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2002
Delete Branch "feat/title-style-upgrade"

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?