xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 3 Actions 3 Packages Projects Releases 7 Wiki Activity

feat: Step4标题预览移至右侧面板+竖屏+素材视频背景 #1382

Closed
xiaoxia wants to merge 1 commits from feat/title-preview-right-panel into develop
pull from: feat/title-preview-right-panel
merge into: xiaoxia:develop
Conversation 2 Commits 1 Files Changed 4
+167 -97
xiaoxia commented 2026-08-15 22:39:06 +08:00
Owner
Copy Link
Copy Source

改动

1. GeneratePage.tsx

  • Step4 起右侧面板常驻显示（原 Step5+ 才显示）
  • 使用 getAssetsByKind("video") 查询视频素材
  • 根据 selectedMaterials[0] 获取第一个选中素材的 file_url 作为 sourceVideoUrl
  • 传入 showTitlePreview={currentStep === 4} 和 sourceVideoUrl

2. PreviewVideoPanel.tsx

  • 新增 props：showTitlePreview?: boolean、sourceVideoUrl?: string
  • Step4 标题预览模式：渲染 TitlePreviewCanvas，标题显示"标题预览"
  • Step5+ 保持原有行为：渲染预览视频+Canvas 标题叠加
  • Step4 无标题时显示空状态提示

3. TitlePreviewCanvas.tsx

  • 新增 prop：sourceVideoUrl?: string
  • 默认比例从 16:9 改为 9:16（竖屏）
  • 有 sourceVideoUrl 时渲染 <video> 作为背景（muted loop autoPlay playsInline，object-fit: cover）
  • 无视频 URL 时保持深色渐变 fallback

4. Step4TitleSettings.tsx

  • 移除左侧表单内的 TitlePreviewCanvas 引用
  • 标题预览全部交给右侧面板

效果

  • Step4 选标题时，右侧实时预览标题效果（竖屏 9:16）
  • 预览背景显示实际素材视频画面
  • 标题文字叠加在视频上方，所见即所得
## 改动 ### 1. GeneratePage.tsx - Step4 起右侧面板常驻显示（原 Step5+ 才显示） - 使用 `getAssetsByKind("video")` 查询视频素材 - 根据 `selectedMaterials[0]` 获取第一个选中素材的 `file_url` 作为 `sourceVideoUrl` - 传入 `showTitlePreview={currentStep === 4}` 和 `sourceVideoUrl` ### 2. PreviewVideoPanel.tsx - 新增 props：`showTitlePreview?: boolean`、`sourceVideoUrl?: string` - Step4 标题预览模式：渲染 `TitlePreviewCanvas`，标题显示"标题预览" - Step5+ 保持原有行为：渲染预览视频+Canvas 标题叠加 - Step4 无标题时显示空状态提示 ### 3. TitlePreviewCanvas.tsx - 新增 prop：`sourceVideoUrl?: string` - 默认比例从 `16:9` 改为 `9:16`（竖屏） - 有 `sourceVideoUrl` 时渲染 `<video>` 作为背景（muted loop autoPlay playsInline，object-fit: cover） - 无视频 URL 时保持深色渐变 fallback ### 4. Step4TitleSettings.tsx - 移除左侧表单内的 `TitlePreviewCanvas` 引用 - 标题预览全部交给右侧面板 ## 效果 - Step4 选标题时，右侧实时预览标题效果（竖屏 9:16） - 预览背景显示实际素材视频画面 - 标题文字叠加在视频上方，所见即所得
xiaoxia added the frontendfeature labels 2026-08-15 22:39:06 +08:00
xiaoxia added 1 commit 2026-08-15 22:39:06 +08:00
feat: Step4标题预览移至右侧面板+竖屏+素材视频背景
CI/CD Pipeline / Build Staging Worker 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 API 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 API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 27s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 48s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 1m14s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m17s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m21s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 56s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m33s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m40s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m16s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m27s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 5m26s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
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) Failing after 12s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 46s
Details
ee7c99c92d 
- GeneratePage: Step4+右侧面板常驻显示,查询视频素材获取sourceVideoUrl
- PreviewVideoPanel: 新增showTitlePreview/sourceVideoUrl props,Step4显示标题预览模式
- TitlePreviewCanvas: 默认竖屏9:16,支持视频背景( muted loop autoPlay)
- Step4TitleSettings: 移除左侧表单内的预览Canvas,全部交给右侧面板
auto-approve-bot commented 2026-08-15 22:41:22 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

  • 是否存在阻塞级问题：是
  • 阻塞级问题数量：2 个

📊 审查概览

  • 整体评价：需修改
  • 建议级问题数量：1 个

🔴 阻塞级问题（必须修复）

  1. [apps/web/src/pages/generate/components/PreviewVideoPanel.tsx: ~184] 硬编码视频比例参数

    • 问题类型：逻辑bug
    • 问题描述：在渲染 TitlePreviewCanvas 组件时，videoRatio 属性被硬编码为 "9:16"，而忽略了父组件传递下来的 videoRatio prop。如果用户生成的视频比例是 16:9 或其他比例，预览将显示错误的宽高比，导致严重的视觉误导。
    • 修改建议：将硬编码的 "9:16" 改为传递变量 videoRatio。

  2. [apps/web/src/pages/generate/GeneratePage.tsx: ~78] 素材查询限制导致预览背景丢失

    • 问题类型：逻辑bug
    • 问题描述：useQuery 获取视频素材时设置了 limit: 50，但后续逻辑通过 find 查找用户选中的素材 ID。如果用户选择的素材不在前 50 个结果中（例如选择了第 51 个视频），sourceVideoUrl 将为 undefined，导致 Step4 的标题预览背景无法显示视频素材，仅显示默认渐变背景，功能失效。
    • 修改建议：移除 limit 限制，或者根据 selectedMaterials[0] 进行精确查询，确保当前选中的素材一定在查询结果中。

💡 改进建议（不阻塞合并）

  1. [apps/web/src/pages/generate/components/PreviewVideoPanel.tsx: ~298] 存在不可达的死代码
    • 具体内容：在 !showTitlePreview 的条件分支内部（即非 Step4 模式），仍然保留了一段 {showTitlePreview && <canvas ... />} 的代码。由于外层条件已确保 showTitlePreview 为 false，这段代码永远不会执行。建议删除以保持代码整洁，或确认是否遗漏了在 Step5 视频上叠加标题的需求。

✅ 良好实践

  • TitlePreviewCanvas 组件对 sourceVideoUrl 做了空值处理，未传入时能优雅降级显示渐变背景。
  • 使用 autoPlay、muted、loop 和 playsInline 属性配置背景视频，符合移动端 Web 视频自动播放的最佳实践。
  • useMemo 依赖项设置正确，用于计算 sourceVideoUrl 避免不必要的重复计算。

🤖 由 AI 代码审查机器人自动生成 | 2026-08-15 14:41:22 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：2 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/components/PreviewVideoPanel.tsx: ~184] 硬编码视频比例参数** - 问题类型：逻辑bug - 问题描述：在渲染 `TitlePreviewCanvas` 组件时，`videoRatio` 属性被硬编码为 `"9:16"`，而忽略了父组件传递下来的 `videoRatio` prop。如果用户生成的视频比例是 16:9 或其他比例，预览将显示错误的宽高比，导致严重的视觉误导。 - 修改建议：将硬编码的 `"9:16"` 改为传递变量 `videoRatio`。 2. **[apps/web/src/pages/generate/GeneratePage.tsx: ~78] 素材查询限制导致预览背景丢失** - 问题类型：逻辑bug - 问题描述：`useQuery` 获取视频素材时设置了 `limit: 50`，但后续逻辑通过 `find` 查找用户选中的素材 ID。如果用户选择的素材不在前 50 个结果中（例如选择了第 51 个视频），`sourceVideoUrl` 将为 `undefined`，导致 Step4 的标题预览背景无法显示视频素材，仅显示默认渐变背景，功能失效。 - 修改建议：移除 `limit` 限制，或者根据 `selectedMaterials[0]` 进行精确查询，确保当前选中的素材一定在查询结果中。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/components/PreviewVideoPanel.tsx: ~298] 存在不可达的死代码** - 具体内容：在 `!showTitlePreview` 的条件分支内部（即非 Step4 模式），仍然保留了一段 `{showTitlePreview && <canvas ... />}` 的代码。由于外层条件已确保 `showTitlePreview` 为 `false`，这段代码永远不会执行。建议删除以保持代码整洁，或确认是否遗漏了在 Step5 视频上叠加标题的需求。 ### ✅ 良好实践 - `TitlePreviewCanvas` 组件对 `sourceVideoUrl` 做了空值处理，未传入时能优雅降级显示渐变背景。 - 使用 `autoPlay`、`muted`、`loop` 和 `playsInline` 属性配置背景视频，符合移动端 Web 视频自动播放的最佳实践。 - `useMemo` 依赖项设置正确，用于计算 `sourceVideoUrl` 避免不必要的重复计算。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-15 14:41:22 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia closed this pull request 2026-08-16 16:59:43 +08:00
gitea-actions bot commented 2026-08-16 17:00:30 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1382 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Build Staging Worker 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 API 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 API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 27s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 48s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 1m14s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m17s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m21s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 56s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m33s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m40s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m16s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m27s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 5m26s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
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) Failing after 12s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 46s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
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 feature frontend
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1382
Delete Branch "feat/title-preview-right-panel"

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?