feat(title): 标题预览改为叠加在视频画面上 #1234

Merged

xiaoxia merged 3 commits from fix/title-preview-overlay into develop 2026-08-04 14:21:49 +08:00

Conversation 5 Commits 3 Files Changed 1

+37 -37

xiaoxia commented 2026-08-04 14:05:51 +08:00

Owner

Copy Link

Copy Source

修改内容

修改 PreviewVideoPanel.tsx，将标题预览从「视频下方独立区域」改为「叠加在视频画面上」。

具体改动

• positionOverlayStyle 替代原 positionAlignStyle，返回 absolute 定位样式
  • top: 距顶部 16px
  • center: top 50% + translateY(-50%)
  • bottom: 距底部 56px（给视频控制条留空间）
• 视频容器改为 position: relative，标题用 position: absolute 叠加
• 标题设置 width: 100% + zIndex: 1 + pointerEvents: none（不阻挡视频控件）
• 复用 buildTitleStyle，字号/颜色/描边/阴影效果不变
• 无视频时（idle/loading/error）标题预览仍独立显示兜底

影响范围

• 仅 PreviewVideoPanel.tsx 一个文件
• 不影响 Step4 标题设置逻辑，仅改展示方式

## 修改内容 修改 PreviewVideoPanel.tsx，将标题预览从「视频下方独立区域」改为「叠加在视频画面上」。 ### 具体改动 - `positionOverlayStyle` 替代原 `positionAlignStyle`，返回 absolute 定位样式 - top: 距顶部 16px - center: top 50% + translateY(-50%) - bottom: 距底部 56px（给视频控制条留空间） - 视频容器改为 `position: relative`，标题用 `position: absolute` 叠加 - 标题设置 `width: 100%` + `zIndex: 1` + `pointerEvents: none`（不阻挡视频控件） - 复用 `buildTitleStyle`，字号/颜色/描边/阴影效果不变 - 无视频时（idle/loading/error）标题预览仍独立显示兜底 ### 影响范围 - 仅 PreviewVideoPanel.tsx 一个文件 - 不影响 Step4 标题设置逻辑，仅改展示方式

xiaoxia added 2 commits 2026-08-04 14:05:51 +08:00

feat(title): 标题预览改为叠加在视频画面上，支持top/center/bottom定位 98f132f381

feat(title): 标题预览改为叠加在视频画面上，支持top/center/bottom定位 8120d1c5a3

gitea-actions bot commented 2026-08-04 14:07:29 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia scheduled this pull request to auto merge when all checks succeed 2026-08-04 14:13:53 +08:00

xiaoxia added 1 commit 2026-08-04 14:17:42 +08:00

style: fix prettier formatting for PreviewVideoPanel.tsx 0b8f8dd18c

auto-approve-bot commented 2026-08-04 14:19:21 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1234

⚠️ 问题（2个需要修改）

1. PreviewVideoPanel.tsx 第159行：逻辑错误，无视频预览时忽略了用户的垂直对齐设置。
   • 在 !hasPreview 分支中，容器的 justifyContent 被硬编码为 "center"，而旧代码使用了 positionAlignStyle 来应用用户的设置（top/center/bottom）。这导致用户在生成视频前无法正确预览标题在顶部或底部的效果，造成预览行为与实际生成结果不一致。
2. PreviewVideoPanel.tsx 第134、142行：潜在的空指针引用风险。
   • 代码中使用了非空断言操作符 titleSettings!。虽然 showTitlePreview 为 true 时通常意味着配置存在，但如果 props 传递异常导致 titleSettings 为 undefined，这里会在运行时抛出 "Cannot read properties of undefined" 错误导致白屏。应使用可选链 titleSettings?. 或提供默认值以增强鲁棒性。

💡 建议（1个可选）

1. 性能优化建议：建议将内联的 style 对象提取到组件外部或使用 useMemo 缓存。
   • 当前代码在每次组件渲染时都会重新创建 style 对象（如 { position: "relative" } 和 { background: "..." }），虽然 React diff 开销很小，但在高频渲染场景下会产生不必要的垃圾回收。提取为常量可优化内存分配。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能良好

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-04 06:19:21 | 模型:}

## 代码审查结果 - PR #1234 ### ⚠️ 问题（2个需要修改） 1. **PreviewVideoPanel.tsx 第159行**：逻辑错误，无视频预览时忽略了用户的垂直对齐设置。 - 在 `!hasPreview` 分支中，容器的 `justifyContent` 被硬编码为 `"center"`，而旧代码使用了 `positionAlignStyle` 来应用用户的设置（`top`/`center`/`bottom`）。这导致用户在生成视频前无法正确预览标题在顶部或底部的效果，造成预览行为与实际生成结果不一致。 2. **PreviewVideoPanel.tsx 第134、142行**：潜在的空指针引用风险。 - 代码中使用了非空断言操作符 `titleSettings!`。虽然 `showTitlePreview` 为 true 时通常意味着配置存在，但如果 props 传递异常导致 `titleSettings` 为 `undefined`，这里会在运行时抛出 "Cannot read properties of undefined" 错误导致白屏。应使用可选链 `titleSettings?.` 或提供默认值以增强鲁棒性。 ### 💡 建议（1个可选） 1. **性能优化建议**：建议将内联的 style 对象提取到组件外部或使用 `useMemo` 缓存。 - 当前代码在每次组件渲染时都会重新创建 style 对象（如 `{ position: "relative" }` 和 `{ background: "..." }`），虽然 React diff 开销很小，但在高频渲染场景下会产生不必要的垃圾回收。提取为常量可优化内存分配。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-04 06:19:21 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-08-04 14:20:01 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-04 14:20:01 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit dc38e494e7 into develop 2026-08-04 14:21:49 +08:00

gitea-actions bot commented 2026-08-04 14:22:25 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1234