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

fix: 恢复步骤4-6实时预览，步骤7显示最终视频 #1513

Closed
xiaoxia wants to merge 1 commits from fix/restore-preview-step4-5-step7-video into develop
pull from: fix/restore-preview-step4-5-step7-video
merge into: xiaoxia:develop
Conversation 5 Commits 1 Files Changed 2
+85 -69
xiaoxia commented 2026-08-26 23:21:04 +08:00
Owner
Copy Link
Copy Source

改动说明

修正 PR #1511 的布局逻辑：

按步骤区分右侧区域

  • 步骤 1-3（选择模板/素材/配音）：右侧不显示任何内容，左侧内容区占满宽度
  • 步骤 4-6（选择标题/生成预览/封面设置）：恢复 FrontendPreviewPlayer 实时预览视频播放器，与修复前一致
  • 步骤 7（确认生成）：右侧只显示确认生成的最终视频，内联播放（HTML5 video，controls + autoPlay），不弹窗

其他

  • 恢复 TTS 预览音频逻辑（previewVoiceAudioUrl），供 FrontendPreviewPlayer 使用
  • 添加 .xx-generate-layout.full-width 类，步骤 1-3 时 grid-template-columns: 1fr
  • "生成数量"相关代码已在 PR #1511 全链路删除，本次保持不变

测试

  • TypeScript 编译通过
  • ESLint 通过
  • Prettier 格式化通过
## 改动说明 修正 PR #1511 的布局逻辑： ### 按步骤区分右侧区域 - **步骤 1-3**（选择模板/素材/配音）：右侧不显示任何内容，左侧内容区占满宽度 - **步骤 4-6**（选择标题/生成预览/封面设置）：恢复 FrontendPreviewPlayer 实时预览视频播放器，与修复前一致 - **步骤 7**（确认生成）：右侧只显示确认生成的最终视频，内联播放（HTML5 video，controls + autoPlay），不弹窗 ### 其他 - 恢复 TTS 预览音频逻辑（previewVoiceAudioUrl），供 FrontendPreviewPlayer 使用 - 添加 `.xx-generate-layout.full-width` 类，步骤 1-3 时 grid-template-columns: 1fr - "生成数量"相关代码已在 PR #1511 全链路删除，本次保持不变 ## 测试 - TypeScript 编译通过 - ESLint 通过 - Prettier 格式化通过
xiaoxia added 1 commit 2026-08-26 23:21:04 +08:00
fix: 恢复步骤4-6实时预览，步骤7显示最终视频，步骤1-3右侧留空
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 / 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
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2m57s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 3m59s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 4m1s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 2m7s
Details
AI Code Review / AI Code Review (pull_request) Failing after 5m25s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 5m30s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 6m4s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 6m16s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 3m23s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 3m27s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 13m45s
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) Successful in 26s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m17s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m48s
Details
396d1450d0 
- 步骤1-3（模板/素材/配音）：右侧不显示内容，左侧占满宽度
- 步骤4-6（标题/预览/封面）：恢复 FrontendPreviewPlayer 实时预览
- 步骤7（确认生成）：右侧只显示最终视频，内联播放不弹窗
- 恢复 TTS 预览音频逻辑（previewVoiceAudioUrl）
- 添加 .full-width 布局类，步骤1-3 自动隐藏右侧栏
- 生成数量代码已在 PR #1511 全链路删除，保持不变
gitea-actions bot commented 2026-08-26 23:25:06 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

【阻塞级判定】

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

📊 审查概览

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

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

  1. [apps/web/src/pages/generate/GeneratePage.tsx: 296] 步骤7缺失加载与错误状态展示
    • 问题类型：逻辑bug
    • 问题描述：代码重构移除了原有的 generating（生成中）和 generateError（生成失败）状态的渲染逻辑。在步骤 7 中，仅当 generated 为 true 且 generatedVideos.length > 0 时才渲染视频。如果用户点击生成后处于 generating 状态，或者生成失败，右侧区域将完全空白，用户看不到进度条或错误提示，严重影响用户体验。
    • 修改建议：在步骤 7 的渲染逻辑中，恢复对 generating 和 generateError 状态的判断。当 currentStep === 7 时，应按优先级显示：错误状态 > 加载状态 > 成功视频。

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

  1. [apps/web/src/pages/generate/GeneratePage.tsx: 318] 类型断言存在运行时风险

    • 具体内容：代码中使用了 titleSettings.position as "top" | "center" | "bottom" 进行强制类型转换。如果 titleSettings.position 的实际值不在预期范围内（例如后端返回了脏数据或 undefined），强制断言会导致后续组件接收非法值，可能引发样式错乱或运行时错误。建议增加兜底逻辑，如 (titleSettings.position || 'bottom') as ... 或显式的范围校验。

  2. [apps/web/src/pages/generate/GeneratePage.tsx: 110] TTS 预览失败缺少用户反馈

    • 具体内容：在 previewTts 的 .catch 块中，仅通过 console.warn 打印了错误日志，并将 previewVoiceAudioUrl 设为 null。对于用户而言，预览音频生成失败没有任何界面提示（如 Toast 或 错误图标），用户可能会误以为点击无效或音频加载缓慢。建议在 catch 中增加用户层面的错误提示。

✅ 良好实践

  • 使用 AbortController 和 cancelled 标志正确处理了异步请求的竞态条件和内存泄漏风险，这是很好的 React Hooks 实践。
  • CSS 使用 .full-width 类名结合 Grid 布局控制显隐，比直接在 JSX 中使用 style={{ display: 'none' }} 更易于维护。

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

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/GeneratePage.tsx: 296] 步骤7缺失加载与错误状态展示** - 问题类型：逻辑bug - 问题描述：代码重构移除了原有的 `generating`（生成中）和 `generateError`（生成失败）状态的渲染逻辑。在步骤 7 中，仅当 `generated` 为 true 且 `generatedVideos.length > 0` 时才渲染视频。如果用户点击生成后处于 `generating` 状态，或者生成失败，右侧区域将完全空白，用户看不到进度条或错误提示，严重影响用户体验。 - 修改建议：在步骤 7 的渲染逻辑中，恢复对 `generating` 和 `generateError` 状态的判断。当 `currentStep === 7` 时，应按优先级显示：错误状态 > 加载状态 > 成功视频。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/GeneratePage.tsx: 318] 类型断言存在运行时风险** - 具体内容：代码中使用了 `titleSettings.position as "top" | "center" | "bottom"` 进行强制类型转换。如果 `titleSettings.position` 的实际值不在预期范围内（例如后端返回了脏数据或 undefined），强制断言会导致后续组件接收非法值，可能引发样式错乱或运行时错误。建议增加兜底逻辑，如 `(titleSettings.position || 'bottom') as ...` 或显式的范围校验。 2. **[apps/web/src/pages/generate/GeneratePage.tsx: 110] TTS 预览失败缺少用户反馈** - 具体内容：在 `previewTts` 的 `.catch` 块中，仅通过 `console.warn` 打印了错误日志，并将 `previewVoiceAudioUrl` 设为 null。对于用户而言，预览音频生成失败没有任何界面提示（如 Toast 或 错误图标），用户可能会误以为点击无效或音频加载缓慢。建议在 catch 中增加用户层面的错误提示。 ### ✅ 良好实践 - 使用 `AbortController` 和 `cancelled` 标志正确处理了异步请求的竞态条件和内存泄漏风险，这是很好的 React Hooks 实践。 - CSS 使用 `.full-width` 类名结合 Grid 布局控制显隐，比直接在 JSX 中使用 `style={{ display: 'none' }}` 更易于维护。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-26 15:26:29 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot approved these changes 2026-08-26 23:35:30 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-08-26 23:35:30 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia closed this pull request 2026-08-26 23:37:10 +08:00
gitea-actions bot commented 2026-08-26 23:45:30 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1513 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
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 / 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
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2m57s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 3m59s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 4m1s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 2m7s
Details
AI Code Review / AI Code Review (pull_request) Failing after 5m25s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 5m30s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 6m4s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 6m16s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 3m23s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 3m27s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 13m45s
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) Successful in 26s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m17s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m48s
Details

Pull request closed

Please reopen this pull request to perform a merge.
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1513
Delete Branch "fix/restore-preview-step4-5-step7-video"

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?