xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 8 Actions 34.2k Packages Projects Releases 7 Wiki Activity

feat(viral-video): 爆款视频创作页（三栏暗色风 + v1.2/v1.3全流程） #2102

Closed
xiaoxia wants to merge 0 commits from feat/viral-video-page-2041 into develop
pull from: feat/viral-video-page-2041
merge into: xiaoxia:develop
Conversation 4 Commits - Files Changed -
xiaoxia commented 2026-09-30 08:46:08 +08:00
Owner
Copy Link
Copy Source

工单 #2041 前端实现

三栏暗色科技风创作页，完整覆盖 PRD v1.4 §8/§9 和 v1.3 参考视频扩展。

布局

  • 左栏 280px：历史记录（30条最近任务 + 状态色标 + 点击恢复）+ 新建按钮
  • 中栏 flex-1（min 480px）：素材上传 / 文案融合 / 参数表单 / 参考视频
  • 右栏 420px：预览窗口 + 11 阶段进度条 + 成片下载/重试
  • 暗色渐变背景 (#0b0f1a→#111827→#0f172a)，紫色品牌色 (#6366f1/#8b5cf6)，磨砂玻璃卡片 + 光晕装饰线
  • 响应式：≤1024px 自动竖向堆叠

v1.2 功能

  • 图片上传：1-9 张产品图，点击/拖拽上传、预览缩略图、删除、HTML5 拖拽排序
  • 文案融合：三档分段按钮（AI全写 / 我打草稿AI润色 / 按我的话来），placeholder 自适应
  • 参数表单：行业/目标客户/爆款结构/营销目的/BGM偏好/时长（15-90s）2列网格
  • 11阶段进度条：图片分析→视频风格→意图理解→文案→分镜→审核→配音→BGM→渲染→数字人→上传；shimmer 流动效果 + 节点脉冲动画
  • AI 意图确认卡片（wait_user_confirm）：展示目标人群/核心卖点/营销钩子，用户可直接修改 AI 文案后「确认并继续生成」调用 confirm-intent
  • 失败重试、成片下载、新任务重置

v1.3 参考视频扩展

  • 参考视频上传（复用 /assets/upload），内嵌 video controls 预览，可移除重传
  • 风格强度三档（轻度参考 / 中度模仿 / 像素级复刻）
  • 风格模板库（GET /style-templates），卡片网格，选中态紫色描边，默认「不使用模板」
  • 风格分析由后端流水线 video_analysis 阶段自动触发，前端轮询自动获取 style_guide

技术

  • services 层 src/api/viral-video/（types.ts 对齐 Pydantic schema + index.ts 封装 7 个端点）
  • useViralVideoPolling hook：HTTP 轮询（1.5s 间隔，指数退避容错），按阶段插值 0-100 总进度；预留 WS 切换点（后端 WS endpoint 尚未暴露，先轮询）
  • 路由 /app/viral-video，Sidebar「创作工具」分组新增「🔥 爆款视频」入口 + Header 导航 + 面包屑

验证

  • tsc --noEmit ✅
  • eslint ✅（0 error 0 warning）
  • prettier ✅
  • vite build ✅（ViralVideoPage 独立 chunk 20KB / gz 7KB）

不改动

  • 后端 0 改动（REST + 轮询消费已有端点）
  • 智能剪辑 / AI数字人等既有页面 0 改动
  • 等后端暴露 /ws/viral-video/{id} 后切 WS 实时推送（hook 留切换点）
## 工单 #2041 前端实现 三栏暗色科技风创作页，完整覆盖 PRD v1.4 §8/§9 和 v1.3 参考视频扩展。 ### 布局 - 左栏 280px：历史记录（30条最近任务 + 状态色标 + 点击恢复）+ 新建按钮 - 中栏 flex-1（min 480px）：素材上传 / 文案融合 / 参数表单 / 参考视频 - 右栏 420px：预览窗口 + 11 阶段进度条 + 成片下载/重试 - 暗色渐变背景 (#0b0f1a→#111827→#0f172a)，紫色品牌色 (#6366f1/#8b5cf6)，磨砂玻璃卡片 + 光晕装饰线 - 响应式：≤1024px 自动竖向堆叠 ### v1.2 功能 - **图片上传**：1-9 张产品图，点击/拖拽上传、预览缩略图、删除、HTML5 拖拽排序 - **文案融合**：三档分段按钮（AI全写 / 我打草稿AI润色 / 按我的话来），placeholder 自适应 - **参数表单**：行业/目标客户/爆款结构/营销目的/BGM偏好/时长（15-90s）2列网格 - **11阶段进度条**：图片分析→视频风格→意图理解→文案→分镜→审核→配音→BGM→渲染→数字人→上传；shimmer 流动效果 + 节点脉冲动画 - **AI 意图确认卡片**（wait_user_confirm）：展示目标人群/核心卖点/营销钩子，用户可直接修改 AI 文案后「确认并继续生成」调用 confirm-intent - 失败重试、成片下载、新任务重置 ### v1.3 参考视频扩展 - 参考视频上传（复用 /assets/upload），内嵌 video controls 预览，可移除重传 - 风格强度三档（轻度参考 / 中度模仿 / 像素级复刻） - 风格模板库（GET /style-templates），卡片网格，选中态紫色描边，默认「不使用模板」 - 风格分析由后端流水线 video_analysis 阶段自动触发，前端轮询自动获取 style_guide ### 技术 - services 层 `src/api/viral-video/`（types.ts 对齐 Pydantic schema + index.ts 封装 7 个端点） - `useViralVideoPolling` hook：HTTP 轮询（1.5s 间隔，指数退避容错），按阶段插值 0-100 总进度；预留 WS 切换点（后端 WS endpoint 尚未暴露，先轮询） - 路由 `/app/viral-video`，Sidebar「创作工具」分组新增「🔥 爆款视频」入口 + Header 导航 + 面包屑 ### 验证 - tsc --noEmit ✅ - eslint ✅（0 error 0 warning） - prettier ✅ - vite build ✅（ViralVideoPage 独立 chunk 20KB / gz 7KB） ### 不改动 - 后端 0 改动（REST + 轮询消费已有端点） - 智能剪辑 / AI数字人等既有页面 0 改动 - 等后端暴露 /ws/viral-video/{id} 后切 WS 实时推送（hook 留切换点）
xiaoxia added 1 commit 2026-09-30 08:46:08 +08:00
feat(viral-video): 爆款视频创作页 #2041
CI/CD Pipeline / Check if frontend-only change (push) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (push) Successful in 1s
Details
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (push) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (push) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (push) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 3s
Details
CI/CD Pipeline / Frontend Lint (push) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 3s
Details
CI/CD Pipeline / Validate - Style (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Security (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Has been skipped
Details
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 / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Has been skipped
Details
CI/CD Pipeline / Check push changed paths (push) Successful in 21s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 35s
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (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 / PR Build API Image (pull_request) Successful in 52s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 54s
Details
CI/CD Pipeline / Build Staging API Image (push) Successful in 1m22s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (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 / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (push) Successful in 3m0s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m28s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (push) Successful in 3m31s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 3m47s
Details
CI/CD Pipeline / Build Staging Web Image (push) Successful in 3m0s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 3m51s
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 3s
Details
CI/CD Pipeline / Validate - Style (push) Successful in 4m18s
Details
CI/CD Pipeline / Frontend Unit Tests (push) Failing after 5m12s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 5m11s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m13s
Details
CI/CD Pipeline / Unit Tests (push) Successful in 10m58s
Details
CI/CD Pipeline / Validate - Security (push) Successful in 17m26s
Details
CI/CD Pipeline / Build Production API Image (push) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (push) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (push) Has been skipped
Details
CI/CD Pipeline / CI Gate (push) Has been skipped
Details
CI/CD Pipeline / Deploy Production (push) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (push) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (push) Successful in 47m30s
Details
CI/CD Pipeline / Retag skipped Staging API Image (push) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (push) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (push) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (push) Successful in 2m26s
Details
CI/CD Pipeline / Staging E2E Tests (push) Has been cancelled
Details
CI/CD Pipeline / Staging API Integration Tests (push) Has been cancelled
Details
CI/CD Pipeline / ACR Image Cleanup (push) Has been cancelled
Details
CI/CD Pipeline / Canary Release to Production (push) Has been cancelled
Details
37f7aa3329 
三栏暗色科技风布局 + 完整 v1.2/v1.3 创作流程：

【布局】
- 左栏：历史记录（30条最近任务，点击恢复，状态色标）+ 新建按钮
- 中栏：素材上传 + 文案融合 + 参数表单 + 参考视频（v1.3）
- 右栏：预览窗口 + 11阶段进度条 + 成片下载/重试
- 整体暗色渐变背景 (#0b0f1a→#0f172a)，紫色品牌色 (#6366f1/#8b5cf6)，
  磨砂玻璃卡片 + 紫色光晕装饰线；响应式≤1024px自动竖向堆叠

【v1.2 核心功能】
- 图片上传：1-9 张产品图，支持点击/拖拽上传、预览、删除、HTML5 拖拽排序
- 文案融合：三档分段按钮（AI全写 / 我打草稿AI润色 / 按我的话来），textarea 自适应提示
- 参数表单：行业/目标客户/爆款结构/营销目的/BGM偏好/时长（15-90s）6 字段网格
- 提交后 11 阶段进度条（图片分析→视频风格→意图理解→文案→分镜→审核→
  配音→BGM→渲染→数字人→上传），shimmer 动画 + 阶段节点脉冲
- AI 意图摘要卡片（wait_user_confirm 状态）：展示目标人群/核心卖点/营销钩子，
  用户可直接修改 AI 润色文案后点击「确认并继续生成」调用 confirm-intent
- 失败重试、成片下载、新任务重置

【v1.3 参考视频扩展】
- 参考视频上传（复用 /assets/upload 接口），内嵌 <video controls> 预览，可移除重传
- 风格强度三档（轻度参考 / 中度模仿 / 像素级复刻）
- 风格模板库（GET /style-templates），卡片网格展示缩略图/名称/描述，
  选中态紫色描边，默认「不使用模板」
- 风格分析在后端 video_analysis 阶段自动触发（_emit_progress 已实现），
  前端轮询会自动拿到 style_guide 更新

【技术】
- 新增 services 层 src/api/viral-video/（types.ts + index.ts），
  与后端 Pydantic schema 严格对齐
- useViralVideoPolling hook：HTTP 轮询（1.5s 间隔，指数退避容错），
  解析 status/stage 插值为 0-100 总进度；支持 onComplete/onWaitConfirm/onFailed 回调
- 路由：/app/viral-video，加入 Sidebar「创作工具」分组 + Header 导航 + 面包屑
- 新增 FireOutlined 图标入口
- 轮询兜底：后端 WS endpoint 尚未暴露，先 HTTP 轮询；
  待 /ws/viral-video/{id} 上线后切 WS（hook 已预留切换点）

【验证】
- tsc --noEmit ✅
- eslint ✅（0 error 0 warning）
- prettier --write ✅
- vite build ✅（独立 chunk ViralVideoPage-BMawaWN9.js 20KB gz 7KB）
auto-approve-bot approved these changes 2026-09-30 08:47:30 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-30 08:48:03 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2102 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Check if frontend-only change (push) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (push) Successful in 1s
Details
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (push) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (push) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (push) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 3s
Details
CI/CD Pipeline / Frontend Lint (push) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 3s
Details
CI/CD Pipeline / Validate - Style (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Security (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Has been skipped
Details
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 / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Has been skipped
Details
CI/CD Pipeline / Check push changed paths (push) Successful in 21s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 35s
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (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 / PR Build API Image (pull_request) Successful in 52s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 54s
Details
CI/CD Pipeline / Build Staging API Image (push) Successful in 1m22s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (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 / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (push) Successful in 3m0s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m28s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (push) Successful in 3m31s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 3m47s
Details
CI/CD Pipeline / Build Staging Web Image (push) Successful in 3m0s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 3m51s
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 3s
Details
CI/CD Pipeline / Validate - Style (push) Successful in 4m18s
Details
CI/CD Pipeline / Frontend Unit Tests (push) Failing after 5m12s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 5m11s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m13s
Details
CI/CD Pipeline / Unit Tests (push) Successful in 10m58s
Details
CI/CD Pipeline / Validate - Security (push) Successful in 17m26s
Details
CI/CD Pipeline / Build Production API Image (push) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (push) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (push) Has been skipped
Details
CI/CD Pipeline / CI Gate (push) Has been skipped
Details
CI/CD Pipeline / Deploy Production (push) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (push) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (push) Successful in 47m30s
Details
CI/CD Pipeline / Retag skipped Staging API Image (push) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (push) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (push) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (push) Successful in 2m26s
Details
CI/CD Pipeline / Staging E2E Tests (push) Has been cancelled
Details
CI/CD Pipeline / Staging API Integration Tests (push) Has been cancelled
Details
CI/CD Pipeline / ACR Image Cleanup (push) Has been cancelled
Details
CI/CD Pipeline / Canary Release to Production (push) Has been cancelled
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
architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot frontend-dev xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2102
Delete Branch "feat/viral-video-page-2041"

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?