feat(viral-video): #2041 爆款视频创作页 浅色紫调三栏向导 UI + 全流程 #2107

Merged
xiaoxia merged 1 commits from feat/viral-video-page-2041 into develop 2026-09-30 18:30:39 +08:00
Owner

#2041 爆款视频创作页(浅色紫调 UI 重写)

视觉风格

  • 严格对齐 AI 数字人页:背景 #f5f6fa、白底圆角卡片 #fff、主色紫 #7c3aed、选中浅紫底 #f3f0ff、灰边 #e5e7eb、灰虚线上传区、紫色渐变主按钮
  • 三列等宽 STEP 向导布局:STEP1 上传素材 / STEP2 文案配置 / STEP3 视频生成
  • 每个区块可折叠(▼箭头)

布局

  • 顶栏多任务 Tab:「生成1 ×」可关闭 + 「+新建」虚线按钮,类似浏览器 Tab
  • 左列 STEP1:
    • 图片上传(1-9 张,网格缩略图,序号徽标,拖拽排序,实时上传百分比,点击/拖拽上传)
    • 参考视频(预览 + 风格强度三档 light/medium/strict)
    • 配音选择(系统音色/我的音色 Tab,radio 单选 + 播放/暂停按钮,上传/录音入口接 CloneModal)
  • 中列 STEP2:
    • 三档融合(AI全写/AI润色/按我的话来,紫色选中描边+浅紫底)
    • 参数表单(行业/目标人群/语言/时长/叙事结构/营销目的/BGM 风格)
    • AI 意图摘要确认卡(WAIT_USER_CONFIRM 黄色高亮 #fffbeb,可编辑文案后确认继续)
    • 失败提示 + 重试按钮
  • 右列 STEP3:
    • 9:16 视频预览(生成前占位、生成后
    • 视频设置(比例 9:16/16:9/1:1、模型 Seedance 2.5 / 2.0)
    • 11 阶段进度列表(图片分析→参考视频风格→意图理解→文案融合→分镜→审核→配音→BGM→渲染→口型→上传)
    • 预计扣点 + 紫色「开始生成视频」主按钮

修复的 4 个 bug

  1. ✅ 上传端点错误 → 改用 uploadAssetDirect(prepareDirectUpload → PUT OSS → completeDirectUpload),按 kind=image/video 取正确 library_id
  2. ✅ 「新建」无反应 → 重置按钮真正重置当前 Tab 表单(清空图片/视频/文案/参数/任务状态);「+新建」Tab 按钮支持多任务并行
  3. ✅ 去掉左栏历史面板 → 创作页只保留三列向导,历史统一走顶部「成品库」导航
  4. ✅ blob URL 泄漏到 payload → 严格区分 localId/ossUrl:上传中不把 url 放进 payload,提交时只取 ossUrl

技术细节

  • HTTP 轮询(1.5s,渲染/口型阶段 3s,指数退避),终态 completed/failed/cancelled 自动停
  • 轮询 hook useViralVideoPolling 重写,依赖 STAGE_DISPLAYS 做进度插值
  • 复用现有组件:antd Select/Button/Modal、@ant-design/icons、voice/CloneModal、api/assets/upload
  • TS 类型与后端 schema 对齐(FusionLevel/StyleStrength/ViralVideoStatus/ViralVideoStage/IntentResult)

验证

  • ✅ tsc --noEmit 通过
  • ✅ eslint 通过
  • ✅ prettier --check 通过
  • ✅ vite build 通过(ViralVideoPage chunk 21.32 kB / gzip 7.70 kB)

路由/导航

  • /app/viral-video(已保留上次 PR 的路由注册 + Sidebar 火簇图标「爆款视频」入口 + 面包屑)
## #2041 爆款视频创作页(浅色紫调 UI 重写) ### 视觉风格 - 严格对齐 AI 数字人页:背景 #f5f6fa、白底圆角卡片 #fff、主色紫 #7c3aed、选中浅紫底 #f3f0ff、灰边 #e5e7eb、灰虚线上传区、紫色渐变主按钮 - 三列等宽 STEP 向导布局:STEP1 上传素材 / STEP2 文案配置 / STEP3 视频生成 - 每个区块可折叠(▼箭头) ### 布局 - **顶栏多任务 Tab**:「生成1 ×」可关闭 + 「+新建」虚线按钮,类似浏览器 Tab - **左列 STEP1**: - 图片上传(1-9 张,网格缩略图,序号徽标,拖拽排序,实时上传百分比,点击/拖拽上传) - 参考视频(预览 + 风格强度三档 light/medium/strict) - 配音选择(系统音色/我的音色 Tab,radio 单选 + 播放/暂停按钮,上传/录音入口接 CloneModal) - **中列 STEP2**: - 三档融合(AI全写/AI润色/按我的话来,紫色选中描边+浅紫底) - 参数表单(行业/目标人群/语言/时长/叙事结构/营销目的/BGM 风格) - AI 意图摘要确认卡(WAIT_USER_CONFIRM 黄色高亮 #fffbeb,可编辑文案后确认继续) - 失败提示 + 重试按钮 - **右列 STEP3**: - 9:16 视频预览(生成前占位、生成后 <video controls>) - 视频设置(比例 9:16/16:9/1:1、模型 Seedance 2.5 / 2.0) - 11 阶段进度列表(图片分析→参考视频风格→意图理解→文案融合→分镜→审核→配音→BGM→渲染→口型→上传) - 预计扣点 + 紫色「开始生成视频」主按钮 ### 修复的 4 个 bug 1. ✅ 上传端点错误 → 改用 uploadAssetDirect(prepareDirectUpload → PUT OSS → completeDirectUpload),按 kind=image/video 取正确 library_id 2. ✅ 「新建」无反应 → 重置按钮真正重置当前 Tab 表单(清空图片/视频/文案/参数/任务状态);「+新建」Tab 按钮支持多任务并行 3. ✅ 去掉左栏历史面板 → 创作页只保留三列向导,历史统一走顶部「成品库」导航 4. ✅ blob URL 泄漏到 payload → 严格区分 localId/ossUrl:上传中不把 url 放进 payload,提交时只取 ossUrl ### 技术细节 - HTTP 轮询(1.5s,渲染/口型阶段 3s,指数退避),终态 completed/failed/cancelled 自动停 - 轮询 hook useViralVideoPolling 重写,依赖 STAGE_DISPLAYS 做进度插值 - 复用现有组件:antd Select/Button/Modal、@ant-design/icons、voice/CloneModal、api/assets/upload - TS 类型与后端 schema 对齐(FusionLevel/StyleStrength/ViralVideoStatus/ViralVideoStage/IntentResult) ### 验证 - ✅ tsc --noEmit 通过 - ✅ eslint 通过 - ✅ prettier --check 通过 - ✅ vite build 通过(ViralVideoPage chunk 21.32 kB / gzip 7.70 kB) ### 路由/导航 - /app/viral-video(已保留上次 PR 的路由注册 + Sidebar 火簇图标「爆款视频」入口 + 面包屑)
xiaoxia added 1 commit 2026-09-30 18:06:31 +08:00
feat(viral-video): #2041 UI 重写浅色紫调 + 修复上传/新建/历史面板/bug
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 2s
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m29s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m35s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m41s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m9s
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 2m30s
AI Code Review / AI Code Review (pull_request) Successful in 7m3s
CI/CD Pipeline / Validate - Style (pull_request) Successful in 7m4s
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 7m59s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 10m41s
CI/CD Pipeline / Validate - Security (pull_request) Successful in 19m1s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 0s
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 33s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m16s
6b21a4de21
auto-approve-bot approved these changes 2026-09-30 18:08:14 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot approved these changes 2026-09-30 18:08:14 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2107 | | 预览链接 | [https://pr-2107.preview.xiaoxiajianji.com](https://pr-2107.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据,请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后,预览环境会自动清理。
xiaoxia merged commit 77ce4a1a0d into develop 2026-09-30 18:30:39 +08:00

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2107 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.