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

feat: 预览改为服务器渲染视频，实现所见即所得 #1487

Merged
xiaoxia merged 1 commits from feat/server-rendered-preview into develop 2026-08-25 01:00:55 +08:00
Conversation 4 Commits 1 Files Changed 6
+657 -149
xiaoxia commented 2026-08-25 00:50:04 +08:00
Owner
Copy Link
Copy Source

改造目标

将 Step4/5 的 Canvas 客户端预览替换为服务器渲染的真实视频，实现预览与最终成品 100% 一致。

改动说明

新增 useServerPreview hook

  • 进入 Step4+ 且有素材和模板时，自动调用 POST /generation/preview 创建服务器预览渲染任务
  • 轮询 GET /generation/preview/{task_id}，间隔 2s，超时 120s
  • 网络错误自动重试 2 次
  • 配置指纹检测：素材/配音/BGM/模板变更 → 自动重新渲染；标题变更 → 标记 stale
  • 预览完成后将 task_id 写入 previewTaskId（已有 localStorage 持久化），source_edit_plan_id 写入 storedSourceEditPlanId

PreviewVideoPanel 重写

  • 移除 FrontendPreviewPlayer（Canvas+WebCodecs），改用 <video> 标签播放服务器返回的 video_url
  • 加载状态：显示进度百分比 + 渲染提示
  • 错误状态：错误信息 + 重新预览按钮
  • stale 状态：底部提示条 + 重新预览按钮
  • 保留 CSS TitleOverlay 用于标题样式实时编辑预览

GeneratePage 接入

  • 使用 useServerPreview 管理预览生命周期
  • 移除 voiceAudioUrl / voiceMaterials 查询（不再需要前端播放配音）
  • usePreviewAssets 仅保留用于配音时长校验（不用于播放）
  • Step5 预览完成才能前进到 Step6

Step5GeneratePreview 更新

  • 显示服务器渲染提示
  • stale/failed/loading 状态提示条
  • 重新预览按钮

useStepNavigation

  • Step5 前进校验改为：服务器预览必须完成（previewReady）

验收标准

  • 进入预览步骤后看到服务器渲染的真实视频
  • 预览视频包含正确的标题、配音、BGM
  • 点确认生成后走 confirm 路径秒出
  • 素材/配音/BGM 变更自动重新预览
  • 标题变更标记 stale，保留旧视频播放 + 提示重新预览
  • 预览失败显示错误和重试按钮
  • 网络错误自动重试 2 次
## 改造目标 将 Step4/5 的 Canvas 客户端预览替换为服务器渲染的真实视频，实现预览与最终成品 100% 一致。 ## 改动说明 ### 新增 useServerPreview hook - 进入 Step4+ 且有素材和模板时，自动调用 POST /generation/preview 创建服务器预览渲染任务 - 轮询 GET /generation/preview/{task_id}，间隔 2s，超时 120s - 网络错误自动重试 2 次 - 配置指纹检测：素材/配音/BGM/模板变更 → 自动重新渲染；标题变更 → 标记 stale - 预览完成后将 task_id 写入 previewTaskId（已有 localStorage 持久化），source_edit_plan_id 写入 storedSourceEditPlanId ### PreviewVideoPanel 重写 - 移除 FrontendPreviewPlayer（Canvas+WebCodecs），改用 `<video>` 标签播放服务器返回的 video_url - 加载状态：显示进度百分比 + 渲染提示 - 错误状态：错误信息 + 重新预览按钮 - stale 状态：底部提示条 + 重新预览按钮 - 保留 CSS TitleOverlay 用于标题样式实时编辑预览 ### GeneratePage 接入 - 使用 useServerPreview 管理预览生命周期 - 移除 voiceAudioUrl / voiceMaterials 查询（不再需要前端播放配音） - usePreviewAssets 仅保留用于配音时长校验（不用于播放） - Step5 预览完成才能前进到 Step6 ### Step5GeneratePreview 更新 - 显示服务器渲染提示 - stale/failed/loading 状态提示条 - 重新预览按钮 ### useStepNavigation - Step5 前进校验改为：服务器预览必须完成（previewReady） ## 验收标准 - [x] 进入预览步骤后看到服务器渲染的真实视频 - [x] 预览视频包含正确的标题、配音、BGM - [x] 点确认生成后走 confirm 路径秒出 - [x] 素材/配音/BGM 变更自动重新预览 - [x] 标题变更标记 stale，保留旧视频播放 + 提示重新预览 - [x] 预览失败显示错误和重试按钮 - [x] 网络错误自动重试 2 次
xiaoxia added 1 commit 2026-08-25 00:50:04 +08:00
feat: 预览改为服务器渲染视频，实现所见即所得
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 / 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 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 51s
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
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 47s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m44s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m23s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m21s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m22s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m50s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 4m11s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 4m26s
Details
AI Code Review / AI Code Review (pull_request) Successful in 7m2s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 8m11s
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 8s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 1m6s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m10s
Details
d1890ab128 
- 新增 useServerPreview hook：自动创建/轮询服务器预览任务
- PreviewVideoPanel 用 <video> 播放服务器渲染结果，替换 Canvas 播放器
- 素材/配音/BGM 变更自动重新渲染；标题变更标记 stale
- Step5 需预览完成才能前进，确认生成走 confirm 路径秒出
- 轮询间隔 2s，超时 120s，网络错误自动重试 2 次
- 标题样式编辑时 CSS 层实时叠加预览
auto-approve-bot approved these changes 2026-08-25 00:52:26 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-08-25 00:52:29 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1487 | | 预览链接 | [https://pr-1487.preview.xiaoxiajianji.com](https://pr-1487.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia merged commit 055f6c0475 into develop 2026-08-25 01:00:55 +08:00
gitea-actions bot commented 2026-08-25 01:02:05 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1487
Delete Branch "feat/server-rendered-preview"

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?