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

[P0][前端] 爆款视频v1.2 - 完整创作页面UI #2041

New Issue
Open
opened 2026-09-25 21:30:12 +08:00 by xiaoxia · 1 comment
xiaoxia commented 2026-09-25 21:30:12 +08:00
Owner
Copy Link
Copy Source

父工单：#2038

概述

实现爆款视频v1.2的完整创作页面UI。三栏布局，包含「我说你写」文案输入区、融合强度选择、AI理解摘要卡片、实时进度、视频预览等。

目录结构

frontend/src/pages/ViralVideo/
├── index.tsx                    # 页面入口
├── components/
│   ├── ImageUploader.tsx        # 图片上传区(1-9张拖拽)
│   ├── CopyInput.tsx            # 【v1.2】「我说你写」文案输入区
│   ├── FusionLevelSelector.tsx  # 【v1.2】三档融合强度Radio
│   ├── ParamsForm.tsx           # 行业/客户/人设/结构/目的/BGM/时长表单
│   ├── VoiceSelector.tsx        # 音色选择（复用现有）
│   ├── GenerateButton.tsx       # 生成按钮（含积分提示）
│   ├── IntentSummaryCard.tsx    # 【v1.2】AI理解摘要卡片
│   ├── ProgressPanel.tsx        # 实时进度(8阶段)
│   ├── VideoPreview.tsx         # 视频播放器+操作按钮
│   ├── HistoryList.tsx          # 历史记录
│   └── OnboardingGuide.tsx      # 上手指引
├── hooks/
│   ├── useViralVideoJob.ts      # 任务状态管理hook
│   └── useViralVideoWS.ts       # WebSocket hook（复用现有WS连接）
├── types.ts                     # TS类型定义
└── styles.less                  # 暗色科技风样式

三栏布局

左栏（导航）

  • 左侧导航菜单项"爆款视频"入口，加高亮图标（🔥或🎬）
  • 点击进入本页面

中栏（创作区，从上到下）

  1. 图片上传区

    • 支持拖拽上传，1-9张
    • 首图标记（第一张自动为封面，可拖拽调整顺序）
    • 每张图可删除、预览
    • 复用现有OSS直传组件

  2. 【v1.2新增】「我说你写」文案输入区

    • 大文本框（TextArea，autoSize minRows=3 maxRows=8）
    • placeholder："说说你想在视频里表达什么，哪怕只有几句话、几个关键词也行，AI帮你把话说好"
    • 右下角字数统计：{count}/500，超出500字红色提示
    • 不填也能生成（纯AI模式，v1.1兼容）

  3. 【v1.2新增】融合强度选择

    • Radio.Group三档：
      • 🤖 AI帮我全写 — "我只有产品图，文案全靠AI"
      • ✍️ 我打草稿AI润色（推荐） — "我写了关键词/大意，AI帮我润色扩写"
      • 🎯 按我的话来 — "我写好了文案，AI只做最小修改"
    • 默认选中"我打草稿AI润色"
    • 每档下面一行小字说明差异

  4. 参数表单（Ant Design Form）

    • 行业（Select，10+预设）
    • 目标客户（Select）
    • 人设（Select，含数字人选项）
    • 爆款结构（Select）
    • 营销目的（Select）
    • BGM偏好（Select）
    • 目标时长（Slider，15-60秒）

  5. 音色选择

    • 10种内置音色（CosyVoice预置）
    • 可选上传参考音频（GPT-SoVITS克隆）
    • 复用现有音色试听组件，不要重新实现

  6. 「生成视频」主按钮

    • 大号主色调按钮，宽度100%
    • 按钮下方小字："预计消耗XX积分"
    • 生成中按钮disabled，显示loading
    • 未上传图片时按钮disabled

右栏（预览/进度区）

三种状态切换：

①未生成时：

  • 上手指引卡片（3步：上传图→填参数→点生成）
  • 历史记录列表（最近10条，可点击重新查看）

②生成中：

  • 进度条（0-100%）
  • 当前阶段文字（8阶段）：
    1. 🔍 分析产品图片
    2. 🧠 AI理解你想表达【v1.2新增】
    3. ✍️ 融合创作文案
    4. 🎬 编排分镜
    5. ✅ 内容审核
    6. 🎙️ AI配音中
    7. 🎨 视频渲染中（数字人模式多一步：🎭 数字人口型同步）
    8. ☁️ 成片处理中
  • 阶段详情（如"正在分析第2张图片..."）

③【v1.2新增】AI理解摘要卡片（step2完成后显示）：

  • 卡片标题："AI理解你想表达的是："
  • 3-5条要点列表（bullet points）
  • 底部两个按钮：
    • ✅ "理解对了，继续生成"（绿色主按钮）
    • ✏️ "理解不对，我改一下"（次按钮，点击展开文案编辑框，修改后重新提交意图解析）
  • 卡片出现时流水线暂停等待用户确认

④生成完成后：

  • 视频播放器（复用现有播放器组件）
  • 文案展示（title/hook/body/cta格式化展示）
  • 操作按钮：🔄 重新生成 | ⬇️ 下载 | 📤 分享

复用清单

  • ✅ Ant Design组件（Form/Select/Radio/Upload/Slider/Button/Progress/Card/List...）
  • ✅ OSS上传组件（现有）
  • ✅ 视频播放器组件（现有）
  • ✅ WebSocket hook（现有useWS hook）
  • ✅ 音色选择+试听组件（现有）
  • ✅ 积分扣点展示组件（现有）
  • ❌ 不引入新状态管理库（React hooks+useState/useReducer足够）
  • ❌ 不引入新UI库

样式要求

  • 暗色科技风：深蓝/紫色渐变主题（与现有管理后台v3视觉一致）
  • 主色：#6366f1（indigo）渐变到 #8b5cf6（violet）
  • 背景：深色 #0f172a / #1e1b4b
  • 卡片毛玻璃效果（backdrop-filter: blur）
  • 进度条渐变色
  • 按钮hover有光晕效果
  • 响应式：桌面端(≥1200px)三栏，平板端(768-1199px)中栏+右栏两栏堆叠，左栏缩回图标
  • 移动端（<768px）单列堆叠（最低优先级，可不做）

状态管理

  • React hooks，页面级状态用useState+useContext
  • WebSocket消息通过useViralVideoWS hook统一处理
  • 任务状态机：idle → uploading → queued → analyzing → intent_confirm → generating → done/failed

验收标准

  1. 三栏布局桌面端正常显示，暗色主题正确
  2. 图片上传1-9张，拖拽/删除/排序/首图标记正常
  3. 「我说你写」文案输入框0-500字，字数统计正确
  4. 融合强度三档Radio切换正常，默认选中"我打草稿"
  5. 参数表单所有Select有预设选项
  6. 音色选择+试听正常
  7. 生成按钮点击后WebSocket连接，进度条实时更新8阶段
  8. AI理解摘要卡片在step2后正确显示，"理解对了"继续，"理解不对"可编辑重提交
  9. 视频预览+下载+重新生成按钮正常
  10. 历史记录列表加载正常
  11. v1.1兼容：不填文案直接生成（纯AI模式）流程正常
  12. 数字人模式进度显示多一步"数字人口型同步"
父工单：#2038 ## 概述 实现爆款视频v1.2的完整创作页面UI。三栏布局，包含「我说你写」文案输入区、融合强度选择、AI理解摘要卡片、实时进度、视频预览等。 ## 目录结构 ``` frontend/src/pages/ViralVideo/ ├── index.tsx # 页面入口 ├── components/ │ ├── ImageUploader.tsx # 图片上传区(1-9张拖拽) │ ├── CopyInput.tsx # 【v1.2】「我说你写」文案输入区 │ ├── FusionLevelSelector.tsx # 【v1.2】三档融合强度Radio │ ├── ParamsForm.tsx # 行业/客户/人设/结构/目的/BGM/时长表单 │ ├── VoiceSelector.tsx # 音色选择（复用现有） │ ├── GenerateButton.tsx # 生成按钮（含积分提示） │ ├── IntentSummaryCard.tsx # 【v1.2】AI理解摘要卡片 │ ├── ProgressPanel.tsx # 实时进度(8阶段) │ ├── VideoPreview.tsx # 视频播放器+操作按钮 │ ├── HistoryList.tsx # 历史记录 │ └── OnboardingGuide.tsx # 上手指引 ├── hooks/ │ ├── useViralVideoJob.ts # 任务状态管理hook │ └── useViralVideoWS.ts # WebSocket hook（复用现有WS连接） ├── types.ts # TS类型定义 └── styles.less # 暗色科技风样式 ``` ## 三栏布局 ### 左栏（导航） - 左侧导航菜单项"爆款视频"入口，加高亮图标（🔥或🎬） - 点击进入本页面 ### 中栏（创作区，从上到下） 1. **图片上传区** - 支持拖拽上传，1-9张 - 首图标记（第一张自动为封面，可拖拽调整顺序） - 每张图可删除、预览 - 复用现有OSS直传组件 2. **【v1.2新增】「我说你写」文案输入区** - 大文本框（TextArea，autoSize minRows=3 maxRows=8） - placeholder：`"说说你想在视频里表达什么，哪怕只有几句话、几个关键词也行，AI帮你把话说好"` - 右下角字数统计：`{count}/500`，超出500字红色提示 - 不填也能生成（纯AI模式，v1.1兼容） 3. **【v1.2新增】融合强度选择** - Radio.Group三档： - 🤖 **AI帮我全写** — "我只有产品图，文案全靠AI" - ✍️ **我打草稿AI润色（推荐）** — "我写了关键词/大意，AI帮我润色扩写" - 🎯 **按我的话来** — "我写好了文案，AI只做最小修改" - 默认选中"我打草稿AI润色" - 每档下面一行小字说明差异 4. **参数表单**（Ant Design Form） - 行业（Select，10+预设） - 目标客户（Select） - 人设（Select，含数字人选项） - 爆款结构（Select） - 营销目的（Select） - BGM偏好（Select） - 目标时长（Slider，15-60秒） 5. **音色选择** - 10种内置音色（CosyVoice预置） - 可选上传参考音频（GPT-SoVITS克隆） - **复用现有音色试听组件**，不要重新实现 6. **「生成视频」主按钮** - 大号主色调按钮，宽度100% - 按钮下方小字："预计消耗XX积分" - 生成中按钮disabled，显示loading - 未上传图片时按钮disabled ### 右栏（预览/进度区） 三种状态切换： **①未生成时**： - 上手指引卡片（3步：上传图→填参数→点生成） - 历史记录列表（最近10条，可点击重新查看） **②生成中**： - 进度条（0-100%） - 当前阶段文字（8阶段）： 1. 🔍 分析产品图片 2. 🧠 **AI理解你想表达**【v1.2新增】 3. ✍️ 融合创作文案 4. 🎬 编排分镜 5. ✅ 内容审核 6. 🎙️ AI配音中 7. 🎨 视频渲染中（数字人模式多一步：🎭 数字人口型同步） 8. ☁️ 成片处理中 - 阶段详情（如"正在分析第2张图片..."） **③【v1.2新增】AI理解摘要卡片**（step2完成后显示）： - 卡片标题："AI理解你想表达的是：" - 3-5条要点列表（bullet points） - 底部两个按钮： - ✅ "理解对了，继续生成"（绿色主按钮） - ✏️ "理解不对，我改一下"（次按钮，点击展开文案编辑框，修改后重新提交意图解析） - 卡片出现时流水线暂停等待用户确认 **④生成完成后**： - 视频播放器（复用现有播放器组件） - 文案展示（title/hook/body/cta格式化展示） - 操作按钮：🔄 重新生成 | ⬇️ 下载 | 📤 分享 ## 复用清单 - ✅ Ant Design组件（Form/Select/Radio/Upload/Slider/Button/Progress/Card/List...） - ✅ OSS上传组件（现有） - ✅ 视频播放器组件（现有） - ✅ WebSocket hook（现有useWS hook） - ✅ 音色选择+试听组件（现有） - ✅ 积分扣点展示组件（现有） - ❌ 不引入新状态管理库（React hooks+useState/useReducer足够） - ❌ 不引入新UI库 ## 样式要求 - **暗色科技风**：深蓝/紫色渐变主题（与现有管理后台v3视觉一致） - 主色：`#6366f1`（indigo）渐变到 `#8b5cf6`（violet） - 背景：深色 `#0f172a` / `#1e1b4b` - 卡片毛玻璃效果（backdrop-filter: blur） - 进度条渐变色 - 按钮hover有光晕效果 - 响应式：桌面端(≥1200px)三栏，平板端(768-1199px)中栏+右栏两栏堆叠，左栏缩回图标 - 移动端（<768px）单列堆叠（最低优先级，可不做） ## 状态管理 - React hooks，页面级状态用useState+useContext - WebSocket消息通过useViralVideoWS hook统一处理 - 任务状态机：idle → uploading → queued → analyzing → intent_confirm → generating → done/failed ## 验收标准 1. 三栏布局桌面端正常显示，暗色主题正确 2. 图片上传1-9张，拖拽/删除/排序/首图标记正常 3. 「我说你写」文案输入框0-500字，字数统计正确 4. 融合强度三档Radio切换正常，默认选中"我打草稿" 5. 参数表单所有Select有预设选项 6. 音色选择+试听正常 7. 生成按钮点击后WebSocket连接，进度条实时更新8阶段 8. AI理解摘要卡片在step2后正确显示，"理解对了"继续，"理解不对"可编辑重提交 9. 视频预览+下载+重新生成按钮正常 10. 历史记录列表加载正常 11. v1.1兼容：不填文案直接生成（纯AI模式）流程正常 12. 数字人模式进度显示多一步"数字人口型同步"
xiaoxia added the frontendP0feature labels 2026-09-25 21:30:12 +08:00
xiaoxia commented 2026-09-26 12:12:18 +08:00
Author
Owner
Copy Link
Copy Source

📌 v1.3升级补充（2026-09-26）

中栏创作区增加（紧接"图片上传"区之后、"我说你写"之前）：

「参考爆款视频（可选）」上传区

  • 标题：🎬 参考爆款视频（让AI学它的运镜节奏，选填）
  • 上传区域：拖拽/点击上传单个MP4/MOV，≤60秒≤100MB
  • 上传后显示：视频缩略图+时长+文件名+删除按钮+"重新上传"
  • 风格强度选择（上传视频后显示）：三档radio
    • 🎨 参考一下就行（只参考整体色调和节奏，灵活调整）
    • 🎬 按这个风格拍（推荐，运镜/色调/节奏都遵循，镜头数可±2）
    • 🎯 1:1复刻运镜（严格复刻镜头数/时长/运镜/转场）
    • 默认选中"按这个风格拍"，strict模式显示警告"⚠️ 将严格复刻参考视频的镜头节奏，文案可能受镜头时长限制"
  • 下方小字提示："不上传参考视频时，AI会根据产品类型自动匹配最合适的镜头节奏"
  • 替代选项："或从热门爆款模板中选择"→点击弹出风格模板库弹窗（展示10+预置模板卡片：封面+风格名+描述+适用行业，点击选中）
  • 参考视频和风格模板二选一，不可同时使用

右栏进度区增加

  • 进度阶段新增：🎬 AI分析镜头语言中...（在"AI分析产品"之后、"AI理解你想表达"之前；仅在有参考视频时显示）
  • 进度到style_analyzed时，显示"AI镜头语言"可视化卡片（新UI组件）：
    • 卡片标题：🎬 AI解读的镜头语言
    • 第一行：风格名（如"美食快切风"）+ 节奏标签（如"⚡ 快节奏 8个镜头"）+ 色调标签（如"🎨 暖色调"）
    • 第二行：运镜序列条（横向条带，每个镜头用色块表示，宽度=时长比例，颜色表示运镜类型：红色=推、蓝色=拉、绿色=移、灰色=静，hover显示镜头详情："镜头3: 特写·缓推·2.3秒"）
    • 第三行：色调板（5个色卡，从style_guide.color_palette取色）
    • 底部："理解对了吗？" → ✅对，开始生成 / ✏️不对，换个视频/调强度
    • 风格模板选择的风格也显示同样的卡片（只是没有"理解对了吗"确认环节）

其他UI更新

  • 参数区"视频时长"滑块：当style_strength=strict时，时长锁定为参考视频总时长±2秒，滑块disabled并提示"1:1复刻模式下时长与参考视频一致"
  • BGM选择：style_strength=medium/strict时，自动预选BPM±5匹配的BGM，但用户可手动切换
  • 生成按钮积分预估保持不变（参考视频分析不额外扣积分，算在视频生成总积分内）
## 📌 v1.3升级补充（2026-09-26） 中栏创作区增加（紧接"图片上传"区之后、"我说你写"之前）： ### 「参考爆款视频（可选）」上传区 - 标题：🎬 参考爆款视频（让AI学它的运镜节奏，选填） - 上传区域：拖拽/点击上传单个MP4/MOV，≤60秒≤100MB - 上传后显示：视频缩略图+时长+文件名+删除按钮+"重新上传" - 风格强度选择（上传视频后显示）：三档radio * 🎨 参考一下就行（只参考整体色调和节奏，灵活调整） * 🎬 按这个风格拍（推荐，运镜/色调/节奏都遵循，镜头数可±2） * 🎯 1:1复刻运镜（严格复刻镜头数/时长/运镜/转场） * 默认选中"按这个风格拍"，strict模式显示警告"⚠️ 将严格复刻参考视频的镜头节奏，文案可能受镜头时长限制" - 下方小字提示："不上传参考视频时，AI会根据产品类型自动匹配最合适的镜头节奏" - 替代选项："或从热门爆款模板中选择"→点击弹出风格模板库弹窗（展示10+预置模板卡片：封面+风格名+描述+适用行业，点击选中） - 参考视频和风格模板二选一，不可同时使用 ### 右栏进度区增加 - 进度阶段新增：🎬 AI分析镜头语言中...（在"AI分析产品"之后、"AI理解你想表达"之前；仅在有参考视频时显示） - 进度到style_analyzed时，显示"AI镜头语言"可视化卡片（新UI组件）： * 卡片标题：🎬 AI解读的镜头语言 * 第一行：风格名（如"美食快切风"）+ 节奏标签（如"⚡ 快节奏 8个镜头"）+ 色调标签（如"🎨 暖色调"） * 第二行：运镜序列条（横向条带，每个镜头用色块表示，宽度=时长比例，颜色表示运镜类型：红色=推、蓝色=拉、绿色=移、灰色=静，hover显示镜头详情："镜头3: 特写·缓推·2.3秒"） * 第三行：色调板（5个色卡，从style_guide.color_palette取色） * 底部："理解对了吗？" → ✅对，开始生成 / ✏️不对，换个视频/调强度 * 风格模板选择的风格也显示同样的卡片（只是没有"理解对了吗"确认环节） ### 其他UI更新 - 参数区"视频时长"滑块：当style_strength=strict时，时长锁定为参考视频总时长±2秒，滑块disabled并提示"1:1复刻模式下时长与参考视频一致" - BGM选择：style_strength=medium/strict时，自动预选BPM±5匹配的BGM，但用户可手动切换 - 生成按钮积分预估保持不变（参考视频分析不额外扣积分，算在视频生成总积分内）
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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 feature frontend P0
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot frontend-dev xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2041
Delete Branch "%!s()"

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?