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

Conversation 4 Commits 1 Files Changed 5

+1826 -1852

xiaoxia commented 2026-09-30 18:06:30 +08:00

Owner

Copy Link

Copy Source

#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 6b21a4de21

auto-approve-bot approved these changes 2026-09-30 18:08:14 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-30 18:08:14 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-09-30 18:08:41 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
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

gitea-actions bot commented 2026-09-30 18:31:55 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2107