fix(title): 预览区标题应用真实模板描边/阴影/背景 #2018

Merged

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

Conversation 4 Commits 2 Files Changed 3

+52 -9

xiaoxia commented 2026-09-23 14:11:00 +08:00

Owner

Copy Link

Copy Source

问题

选模板卡片后（如抖音爆款黄），视频预览区标题文字没有应用模板样式，只显示默认黑色字。

根因：FrontendPreviewPlayer.tsx 渲染标题 overlay 时，描边/阴影/背景的 CSS 值全部硬编码：

• WebkitTextStroke: 2px #000000（黑描边 2px，忽略 strokeWidth/strokeColor）
• textShadow: 2px 2px 4px rgba(0,0,0,0.8)（固定阴影）
• 没有 bg padding/radius/color（忽略 bgEnabled 等）

CanvasPreviewGrid 传给 FrontendPreviewPlayer 时也只透传 stroke/shadow 两个布尔值，缺失 strokeWidth/shadowColor/bg* 等字段。

修复

• FrontendPreviewPlayer 扩展 titleSettings props，新增 strokeWidth/strokeColor/shadowOffsetX/Y/shadowBlur/shadowColor/bgEnabled/bgColor/bgPadding/bgRadius/lineHeight
• 所有描边/阴影/背景值按容器高度等比缩放后应用到 CSS（px 单位）
• CanvasPreviewGrid 传递 titleSettings 时补充上述字段，批量网格预览同步生效
• 删除不再使用的 titleScale 常量
• 数字人侧 PanelLipsyncPreview 本来就正确读字段，无需改动

校验

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

选抖音爆款黄模板后，预览区应显示黄色大字 + 8px 黑描边，与模板卡片预览一致。

## 问题 选模板卡片后（如抖音爆款黄），视频预览区标题文字没有应用模板样式，只显示默认黑色字。 根因：`FrontendPreviewPlayer.tsx` 渲染标题 overlay 时，描边/阴影/背景的 CSS 值全部硬编码： - WebkitTextStroke: `2px #000000`（黑描边 2px，忽略 strokeWidth/strokeColor） - textShadow: `2px 2px 4px rgba(0,0,0,0.8)`（固定阴影） - 没有 bg padding/radius/color（忽略 bgEnabled 等） CanvasPreviewGrid 传给 FrontendPreviewPlayer 时也只透传 stroke/shadow 两个布尔值，缺失 strokeWidth/shadowColor/bg* 等字段。 ## 修复 - FrontendPreviewPlayer 扩展 titleSettings props，新增 strokeWidth/strokeColor/shadowOffsetX/Y/shadowBlur/shadowColor/bgEnabled/bgColor/bgPadding/bgRadius/lineHeight - 所有描边/阴影/背景值按容器高度等比缩放后应用到 CSS（px 单位） - CanvasPreviewGrid 传递 titleSettings 时补充上述字段，批量网格预览同步生效 - 删除不再使用的 titleScale 常量 - 数字人侧 PanelLipsyncPreview 本来就正确读字段，无需改动 ## 校验 - tsc --noEmit 零错误 - Prettier 格式化 选抖音爆款黄模板后，预览区应显示黄色大字 + 8px 黑描边，与模板卡片预览一致。

xiaoxia added 1 commit 2026-09-23 14:11:01 +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 已正确读字段，无需改动

gitea-actions bot commented 2026-09-23 14:12:54 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-09-23 14:13:54 +08:00

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

auto-approve-bot approved these changes 2026-09-23 14:15:16 +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:15:16 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit eaed4b4cbf into develop 2026-09-23 14:21:00 +08:00

gitea-actions bot commented 2026-09-23 14:22:03 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2018 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

xiaoxia referenced this issue from a commit 2026-09-23 14:47:04 +08:00

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

xiaoxia referenced this pull request 2026-09-23 14:47:27 +08:00

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

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#2018