fix(title): 选模板后视频预览标题正确应用全部样式字段 #2019

Merged

xiaoxia merged 3 commits from fix/template-preview-stroke-shadow into develop 2026-09-23 14:54:58 +08:00

Conversation 4 Commits 3 Files Changed 4

+64 -9

xiaoxia commented 2026-09-23 14:47:27 +08:00

Owner

Copy Link

Copy Source

问题

选模板卡片（如抖音爆款黄）后，视频预览区标题文字仍为黑色普通字，没有变成黄字+黑描边。

根因

经过数据流排查：

1. onApplyTemplate 回调链路 OK：TitleStylePanel → Step4TitleSettings → GenerateStepContent → GeneratePage styleUpdaters.applyTemplate → setTitleSettings，state 正确更新。
2. snake→camel 转换 OK：titleStyleConfigToCamel 已映射所有字段（strokeWidth/strokeColor/shadowOffset*/bg* 等）。
3. 父组件 state 更新 OK：applyTemplate 正确展开所有字段并合并。
4. #2018 修了 FrontendPreviewPlayer：让 span 读 titleSettings.strokeWidth/strokeColor/shadow*/bg* 真实字段（之前硬编码 2px 黑描边）；CanvasPreviewGrid 也补全了字段。
5. 漏点：单视频预览（非批量）仍只传了部分字段！GeneratePage 第574行的 FrontendPreviewPlayer titleSettings 只传了 title/size/font/color/position/bold/italic/stroke/shadow/posX/posY，缺 strokeWidth/strokeColor/shadowOffsetX/Y/shadowBlur/shadowColor/bgEnabled/bgColor/bgPadding/bgRadius/lineHeight/maxCharsPerLine 等字段，#2018 的新逻辑全走 fallback（strokeWidth=4 默认/无黄字效果）。批量预览 CanvasPreviewGrid 在 #2018 已修。

修复

GeneratePage 单视频预览 titleSettings 补全所有字段（+12 行），FrontendPreviewPlayer 能读到模板真实的 strokeWidth=8/strokeColor=#000/color=#ffd700 等。

校验

• tsc --noEmit 零错误
• Prettier 格式化

## 问题 选模板卡片（如抖音爆款黄）后，视频预览区标题文字仍为黑色普通字，没有变成黄字+黑描边。 ## 根因 经过数据流排查： 1. **onApplyTemplate 回调链路 OK**：TitleStylePanel → Step4TitleSettings → GenerateStepContent → GeneratePage styleUpdaters.applyTemplate → setTitleSettings，state 正确更新。 2. **snake→camel 转换 OK**：titleStyleConfigToCamel 已映射所有字段（strokeWidth/strokeColor/shadowOffset*/bg* 等）。 3. **父组件 state 更新 OK**：applyTemplate 正确展开所有字段并合并。 4. **#2018 修了 FrontendPreviewPlayer**：让 span 读 titleSettings.strokeWidth/strokeColor/shadow*/bg* 真实字段（之前硬编码 2px 黑描边）；CanvasPreviewGrid 也补全了字段。 5. **漏点：单视频预览（非批量）仍只传了部分字段**！GeneratePage 第574行的 FrontendPreviewPlayer titleSettings 只传了 title/size/font/color/position/bold/italic/stroke/shadow/posX/posY，缺 strokeWidth/strokeColor/shadowOffsetX/Y/shadowBlur/shadowColor/bgEnabled/bgColor/bgPadding/bgRadius/lineHeight/maxCharsPerLine 等字段，#2018 的新逻辑全走 fallback（strokeWidth=4 默认/无黄字效果）。批量预览 CanvasPreviewGrid 在 #2018 已修。 ## 修复 GeneratePage 单视频预览 titleSettings 补全所有字段（+12 行），FrontendPreviewPlayer 能读到模板真实的 strokeWidth=8/strokeColor=#000/color=#ffd700 等。 ## 校验 - tsc --noEmit 零错误 - Prettier 格式化

xiaoxia added 3 commits 2026-09-23 14:47:27 +08:00

fix(title): 预览区标题样式应用真实模板描边/阴影/背景值 ... 16e20ff63c

问题：FrontendPreviewPlayer 渲染视频预览标题时，描边宽度/颜色、阴影偏移/模糊/颜色、背景色块都被硬编码（如黑描边2px、固定2px阴影、无背景），选模板后预览文字不显示模板真实样式（例如抖音爆款黄的8px黑描边只显示2px）。

修复：
- FrontendPreviewPlayer 扩展 titleSettings props，接收 strokeWidth/strokeColor/shadowOffsetX/Y/shadowBlur/shadowColor/bgEnabled/bgColor/bgPadding/bgRadius/lineHeight 字段
- 所有描边/阴影/背景值按容器等比缩放后用于 CSS
- CanvasPreviewGrid 传递 titleSettings 时补充上述字段，批量预览同步生效
- 删除不再使用的 titleScale 常量
- 数字人侧 PanelLipsyncPreview 已正确读字段，无需改动

chore: 修复 TitleMiniPreview useEffect 依赖项警告 ad76d25842

fix(title): 单视频预览传递完整 titleSettings（补全描边/阴影/背景字段） ... 1c1ccfa89b

问题：GeneratePage 中单视频预览（非批量）传给 FrontendPreviewPlayer 的 titleSettings 对象
只包含 title/size/font/color/position/bold/italic/stroke/shadow/posX/posY，缺了 strokeWidth/
strokeColor/shadowOffsetX/Y/shadowBlur/shadowColor/bgEnabled/bgColor/bgPadding/bgRadius/lineHeight/
maxCharsPerLine 等字段。#2018 已修复 FrontendPreviewPlayer 读取真实字段（而非硬编码），
但单预览父层没传这些字段 → 全部走 fallback（strokeWidth=4/黑描边/默认阴影）。
批量预览（CanvasPreviewGrid）在 #2018 已补全字段。

修复：GeneratePage 单预览 titleSettings 也补全所有字段。

auto-approve-bot approved these changes 2026-09-23 14:49:19 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-23 14:49:19 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-09-23 14:49:26 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2019 | | 预览链接 | [https://pr-2019.preview.xiaoxiajianji.com](https://pr-2019.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia merged commit 42d6e45089 into develop 2026-09-23 14:54:58 +08:00

gitea-actions bot commented 2026-09-23 14:55:50 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2019 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2019