feat(viral-video/ui): 内置音色弹窗 + 智能剪辑/AI数字人顶部精简 #2118

Merged

xiaoxia merged 3 commits from feat/2041-voice-modal-and-top-banner-removal into develop 2026-10-01 11:26:24 +08:00

Conversation 4 Commits 3 Files Changed 5

+559 -57

xiaoxia commented 2026-10-01 11:26:07 +08:00

Owner

Copy Link

Copy Source

改动概览

本 PR 合并三个独立 UI 调整，均为浅色紫调体系下的小改，不涉及后端接口逻辑。

1. 病毒营销视频 → 内置音色改为弹窗 Modal

• 点击「选择内置音色」不再在页面内展开列表，而是弹出 PresetVoicePickerModal 浅色紫调弹窗
• 弹窗布局：标题「选择音色」+ X 关闭 → 搜索框（placeholder「搜索音色名称或风格」）→ 分类筛选（全部/女声/男声/童声/方言/情绪）→ 3 列卡片网格 → 底部「取消 / 完成选择」
• 每张音色卡片：圆形头像（按 gender 配色）、音色名、性别标签、描述、「选择」/「试听」按钮；试听用 HTMLAudioElement 播放 sample_audio_url；选中卡片紫色描边 + 浅紫底
• 数据源：GET /api/v1/tts/presets，接口字段不足时前端兜底 mock 12 个常见音色（龙小淳/龙小夏/龙小颜/龙三叔/龙悦/龙晓晓 等），等后端字段齐全后自动生效
• 删除 ViralVideoPage 原内联 vv-voice-panel 预置音色展开块与 pickPresetVoice 函数

2. 智能剪辑 GeneratePage → 精简顶部冗余区域

• 删除顶部 hero：「⚡ 智能剪辑」大标题 + 副标题「快速生成短视频…」
• 删除 5 步进度条（1 选择模式 → 5 选择封面）
• 「选择剪辑模式」卡片与后续「生成设置」等内容上移到面包屑下方，不留空白
• 步骤导航保留：原 GenerateStepActions 内的「上一步 / 下一步」按钮继续承担全部步骤切换；GenerateHeader.tsx / GenerateStepsBar.tsx 文件保留（不再被引用）

3. AI 数字人 AiAvatarPage → 精简顶部冗余区域

• 删除顶部 <h1>AI数字人</h1> 标题区
• 删除两个 Tab 步骤条（「1. 视频/配音/文案」「2. 对口型/标题/封面/生成」）
• 三列内容（出镜视频/配音库/文案&对口型）上移到面包屑下方，不留空白
• 步骤导航保留：step1 文案面板底部「🎵生成配音 / 下一步→」，step2 顶部「←上一步」

测试

• tsc --noEmit 通过
• eslint --max-warnings 0 通过
• prettier --write 通过
• vite build 通过

## 改动概览 本 PR 合并三个独立 UI 调整，均为浅色紫调体系下的小改，不涉及后端接口逻辑。 ### 1. 病毒营销视频 → 内置音色改为弹窗 Modal - 点击「选择内置音色」不再在页面内展开列表，而是弹出 `PresetVoicePickerModal` 浅色紫调弹窗 - 弹窗布局：标题「选择音色」+ X 关闭 → 搜索框（placeholder「搜索音色名称或风格」）→ 分类筛选（全部/女声/男声/童声/方言/情绪）→ 3 列卡片网格 → 底部「取消 / 完成选择」 - 每张音色卡片：圆形头像（按 gender 配色）、音色名、性别标签、描述、「选择」/「试听」按钮；试听用 HTMLAudioElement 播放 sample_audio_url；选中卡片紫色描边 + 浅紫底 - 数据源：GET `/api/v1/tts/presets`，接口字段不足时前端兜底 mock 12 个常见音色（龙小淳/龙小夏/龙小颜/龙三叔/龙悦/龙晓晓 等），等后端字段齐全后自动生效 - 删除 ViralVideoPage 原内联 `vv-voice-panel` 预置音色展开块与 `pickPresetVoice` 函数 ### 2. 智能剪辑 GeneratePage → 精简顶部冗余区域 - 删除顶部 hero：「⚡ 智能剪辑」大标题 + 副标题「快速生成短视频…」 - 删除 5 步进度条（1 选择模式 → 5 选择封面） - 「选择剪辑模式」卡片与后续「生成设置」等内容上移到面包屑下方，不留空白 - 步骤导航保留：原 `GenerateStepActions` 内的「上一步 / 下一步」按钮继续承担全部步骤切换；`GenerateHeader.tsx` / `GenerateStepsBar.tsx` 文件保留（不再被引用） ### 3. AI 数字人 AiAvatarPage → 精简顶部冗余区域 - 删除顶部 `<h1>AI数字人</h1>` 标题区 - 删除两个 Tab 步骤条（「1. 视频/配音/文案」「2. 对口型/标题/封面/生成」） - 三列内容（出镜视频/配音库/文案&对口型）上移到面包屑下方，不留空白 - 步骤导航保留：step1 文案面板底部「🎵生成配音 / 下一步→」，step2 顶部「←上一步」 ### 测试 - [x] tsc --noEmit 通过 - [x] eslint --max-warnings 0 通过 - [x] prettier --write 通过 - [x] vite build 通过

xiaoxia added 3 commits 2026-10-01 11:26:07 +08:00

feat(viral-video): #2041 三步骤独立交互——分析图片/生成文案/生成视频拆分 ... dc0782a911

- 新增 uiStep 状态机：step1_upload→step1_analyzing→step1_done→step2_generating→
  step2_copy_ready→step3_ready→step3_generating→step3_done/failed，三步完全独立
- STEP1 按钮改为「🔍 分析图片」，仅跑图片VLM分析（含mockImageAnalysis占位，后端上线analyze-only端点后替换）
- STEP2 独立为「✍️ 生成文案」按钮+可编辑文案textarea+「🎬 确认文案并生成视频」按钮，
  文案生成用mockGenerateCopy占位，返回完整营销文案文本（非空meta信息）
- STEP3 独立为「🎬 开始生成视频」按钮，点击后才调generateViralVideo→TTS→Seedance→渲染
- 删除原「⚡ 开始分析」和黄卡合并的「确认文案并生成视频」
- STEP2/STEP3 在前置步骤未完成时禁用（opacity 0.55 + pointer-events:none + 锁提示）
- 识别汇览展示商品/规格/品牌/视觉特征/品牌标签文字（新增brand/label_text字段）
- 类型扩展：ViralVideoStatus 新增 image_analyzed/copy_generated；GenerateViralVideoRequest
  新增 step 字段（analyze/generate_copy/generate_video）；新增 CopyResult 接口
- tsc/eslint/prettier/vite build 全通过

Merge branch 'develop' of https://git.xiaoxiajianji.com/xiaoxia/xiaoxia-saas into feat/2041-three-step-independent-flow adc9fad29a

feat(viral-video): 内置音色改为弹窗选择；精简智能剪辑/AI数字人顶部冗余区域 ... af0e1d5ffa

- viral-video：点击「选择内置音色」改为弹出浅色紫调 Modal（搜索/分类筛选/3列卡片网格/试听/选择/完成选择），删除内联展开面板
- 内置音色数据来源 /api/v1/tts/presets，字段不足时 mock 12 个龙小X/晓晓兜底音色
- 智能剪辑 GeneratePage：删除顶部 hero（标题+副标题+5步进度条），内容上移到面包屑下方；页面内「上一步/下一步」保留导航
- AI数字人 AiAvatarPage：删除顶部 h1「AI数字人」+ 两Tab步骤条，三列内容上移；step1「下一步→」、step2「←上一步」保留导航
- 配色保持浅色紫调体系（#f5f6fa/#fff/#7c3aed 主紫/#f3f0ff 选中底）

xiaoxia reviewed 2026-10-01 11:26:19 +08:00

xiaoxia left a comment

Author

Owner

Copy Link

Copy Source

LGTM

LGTM

xiaoxia merged commit 0effc450a9 into develop 2026-10-01 11:26:24 +08:00

gitea-actions bot commented 2026-10-01 11:27:53 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

auto-approve-bot reviewed 2026-10-01 11:28:27 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-10-01 11:28:53 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2118 | | 预览链接 | [https://pr-2118.preview.xiaoxiajianji.com](https://pr-2118.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

Sign in to join this conversation.

Reviewers

No Reviewers

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#2118