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

feat: 预览改为前端实时播放，确认生成时一次服务器渲染 #1490

Merged
auto-approve-bot merged 1 commits from feat/frontend-realtime-preview into develop 2026-08-25 10:01:02 +08:00
Conversation 4 Commits 1 Files Changed 5
+67 -265
xiaoxia commented 2026-08-25 09:53:10 +08:00
Owner
Copy Link
Copy Source

改动概述

将右侧预览面板从「服务器渲染预览」改为「前端实时预览」，实现剪映式实时预览体验。

核心改动（5个文件）

1. GeneratePage.tsx

  • 删除 PreviewVideoPanel + useServerPreview 导入和调用
  • 替换为 FrontendPreviewPlayer 组件（已有完整实现）
  • 移除 buildPreviewRequest、serverPreviewEnabled、handleRetryPreview 等服务器预览相关代码
  • 移除未使用的 calculateResolution、voiceLibraryId、resolution 等变量

2. useStepNavigation.ts

  • 移除 previewReady 参数和 Step5 的等待约束
  • 用户从 Step4 点"下一步"直接到 Step5，无需等待服务器渲染

3. useGenerateVideo.ts

  • 删除 confirmGeneration 分支（不再复用预览产物）
  • 确认生成时直接走 createGenerationTask 路径
  • 传递完整参数：template_id, asset_ids, voice_library_id, title_config, bgm_config, video_ratio, output_width, output_height

4. Step5GeneratePreview.tsx

  • 移除服务器预览状态提示条（loading/stale/failed）
  • 移除 ReloadOutlined、Button、ServerPreviewStatus 等不再需要的依赖

5. GenerateStepContent.tsx

  • 移除 previewStatus 和 onRetryPreview props 透传

用户体验

  • 选完素材进入 Step4，右侧立刻播放素材（不等服务器）
  • 改标题文字/样式，右侧立刻看到变化（CSS 实时叠加）
  • 点"确认生成"后，等待一次渲染（30-60秒），出最终视频
  • 整个流程只有 1次 服务器渲染

净变化

-5 files, +67 -265 lines（净减 198 行）

## 改动概述 将右侧预览面板从「服务器渲染预览」改为「前端实时预览」，实现剪映式实时预览体验。 ## 核心改动（5个文件） ### 1. GeneratePage.tsx - 删除 `PreviewVideoPanel` + `useServerPreview` 导入和调用 - 替换为 `FrontendPreviewPlayer` 组件（已有完整实现） - 移除 `buildPreviewRequest`、`serverPreviewEnabled`、`handleRetryPreview` 等服务器预览相关代码 - 移除未使用的 `calculateResolution`、`voiceLibraryId`、`resolution` 等变量 ### 2. useStepNavigation.ts - 移除 `previewReady` 参数和 Step5 的等待约束 - 用户从 Step4 点"下一步"直接到 Step5，无需等待服务器渲染 ### 3. useGenerateVideo.ts - 删除 `confirmGeneration` 分支（不再复用预览产物） - 确认生成时直接走 `createGenerationTask` 路径 - 传递完整参数：template_id, asset_ids, voice_library_id, title_config, bgm_config, video_ratio, output_width, output_height ### 4. Step5GeneratePreview.tsx - 移除服务器预览状态提示条（loading/stale/failed） - 移除 `ReloadOutlined`、`Button`、`ServerPreviewStatus` 等不再需要的依赖 ### 5. GenerateStepContent.tsx - 移除 `previewStatus` 和 `onRetryPreview` props 透传 ## 用户体验 - 选完素材进入 Step4，右侧**立刻**播放素材（不等服务器） - 改标题文字/样式，右侧**立刻**看到变化（CSS 实时叠加） - 点"确认生成"后，等待**一次**渲染（30-60秒），出最终视频 - 整个流程只有 **1次** 服务器渲染 ## 净变化 -5 files, +67 -265 lines（净减 198 行）
xiaoxia added 1 commit 2026-08-25 09:53:10 +08:00
feat: 预览改为前端实时播放，确认生成时一次服务器渲染
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 / Build Staging Web 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 / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 41s
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 / Validate - Migration (alembic) (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m46s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m49s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m9s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m47s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m13s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m1s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m44s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 4m50s
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 14s
Details
AI Code Review / AI Code Review (pull_request) Successful in 7m7s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m24s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 3m53s
Details
58467bf085 
- GeneratePage: 替换 PreviewVideoPanel+useServerPreview 为 FrontendPreviewPlayer
  选完素材进入 Step4 右侧立刻播放素材片段，标题样式实时叠加
- useStepNavigation: 移除 Step5 需等待服务器预览完成的约束
- useGenerateVideo: 删除 confirmGeneration 分支，确认生成直接走 createGenerationTask
- Step5GeneratePreview: 移除服务器预览状态提示条（loading/stale/failed）
- GenerateStepContent: 移除 previewStatus/onRetryPreview 透传

整个流程只有1次服务器渲染（点确认生成时触发）
gitea-actions bot commented 2026-08-25 09:55:57 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 16bc4f53bf into develop 2026-08-25 10:01:02 +08:00
auto-approve-bot deleted branch feat/frontend-realtime-preview 2026-08-25 10:01:02 +08:00
gitea-actions bot commented 2026-08-25 10:02:26 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1490 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1490
Delete Branch "feat/frontend-realtime-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?