feat(web): TTS配音情感风格选择器 #2000

Merged

xiaoxia merged 1 commits from feat/tts-emotion-style into develop 2026-09-20 12:52:48 +08:00

Conversation 4 Commits 1 Files Changed 22

+354 -8

xiaoxia commented 2026-09-20 11:20:33 +08:00

Owner

Copy Link

Copy Source

改动概述

在所有TTS配音入口新增「配音风格」选择器，支持6种预设风格。

风格预设

value	标签	emoji	描述
natural	自然亲切（默认）	😊	亲切自然，像朋友聊天
excited	激动兴奋	🤩	语速稍快，充满活力
professional	沉稳专业	🧑‍💼	语速适中，正式可靠
sweet	温柔甜美	🌸	语速轻柔
news	新闻播报	📰	字正腔圆，严肃正式
livestream	直播带货	🎤	热情有感染力，有节奏感

改动范围

新增

• src/api/tts/styles.ts — TTS_STYLE_OPTIONS 常量 + TtsStyle 类型 + DEFAULT_TTS_STYLE + getTtsStyle() 容错查找
• src/components/voice/TtsStyleSelector/index.tsx — 共享风格选择器组件，支持 compact（3列小按钮）和 normal（3列卡片）两种模式，紫色主题 (#7c3aed)

修改

• API类型：
  • api/tts/types.ts：TTSSynthesizeRequest、TTSPreviewRequest 加 style?: string
  • api/template-editor/types.ts：SegmentTtsConfig 加 style?: string（为剪辑规划器TtsPanel预留，UI尚未开发）
  • pages/ai-avatar/api/aiAvatar.ts：previewTts、createLipsyncJob 加 style?: string
• 配音库（voices）：hook 新增 ttsStyle state → TtsModal 内嵌 compact 选择器 → synthesize payload 透传
• 音色素材库（voice-materials）：同上
• 生成页 Step5 配音（generate）：useGenerateFormState 新增 ttsStyle → TtsVoiceModal 内部/外部受控双模式 → synthesize payload + 叙事模式 tts_style 字段
• 数字人对口型（ai-avatar）：useAiAvatar 新增 style state → PanelVoiceSelector 紧凑选择器（语速下方） → previewTts + createLipsyncJob 两条路径都传 style；试听缓存key包含style避免串音

设计要点

1. style 与现有 emotion（CosyVoice 7基础情绪）独立并存，互不影响；后端可将 style 映射为 emotion+speed+prompt 组合
2. 所有 style 参数均为可选（style?: string），未传时后端默认 natural，无破坏性
3. 共享组件统一紫色主题，与TtsVoiceModal主按钮色系一致
4. 前端-only PR，后端接口稍后支持；传了就按情感合成，没传默认自然

验证

• Prettier 已格式化
• 本地无 ESLint/TS 依赖无法跑全量lint，依赖 CI 校验

## 改动概述 在所有TTS配音入口新增「配音风格」选择器，支持6种预设风格。 ## 风格预设 | value | 标签 | emoji | 描述 | |-------|------|-------|------| | natural | 自然亲切（默认） | 😊 | 亲切自然，像朋友聊天 | | excited | 激动兴奋 | 🤩 | 语速稍快，充满活力 | | professional | 沉稳专业 | 🧑‍💼 | 语速适中，正式可靠 | | sweet | 温柔甜美 | 🌸 | 语速轻柔 | | news | 新闻播报 | 📰 | 字正腔圆，严肃正式 | | livestream | 直播带货 | 🎤 | 热情有感染力，有节奏感 | ## 改动范围 ### 新增 - `src/api/tts/styles.ts` — TTS_STYLE_OPTIONS 常量 + TtsStyle 类型 + DEFAULT_TTS_STYLE + getTtsStyle() 容错查找 - `src/components/voice/TtsStyleSelector/index.tsx` — 共享风格选择器组件，支持 compact（3列小按钮）和 normal（3列卡片）两种模式，紫色主题 (#7c3aed) ### 修改 - **API类型**： - `api/tts/types.ts`：TTSSynthesizeRequest、TTSPreviewRequest 加 `style?: string` - `api/template-editor/types.ts`：SegmentTtsConfig 加 `style?: string`（为剪辑规划器TtsPanel预留，UI尚未开发） - `pages/ai-avatar/api/aiAvatar.ts`：previewTts、createLipsyncJob 加 `style?: string` - **配音库（voices）**：hook 新增 ttsStyle state → TtsModal 内嵌 compact 选择器 → synthesize payload 透传 - **音色素材库（voice-materials）**：同上 - **生成页 Step5 配音（generate）**：useGenerateFormState 新增 ttsStyle → TtsVoiceModal 内部/外部受控双模式 → synthesize payload + 叙事模式 tts_style 字段 - **数字人对口型（ai-avatar）**：useAiAvatar 新增 style state → PanelVoiceSelector 紧凑选择器（语速下方） → previewTts + createLipsyncJob 两条路径都传 style；试听缓存key包含style避免串音 ## 设计要点 1. style 与现有 emotion（CosyVoice 7基础情绪）独立并存，互不影响；后端可将 style 映射为 emotion+speed+prompt 组合 2. 所有 style 参数均为可选（`style?: string`），未传时后端默认 natural，无破坏性 3. 共享组件统一紫色主题，与TtsVoiceModal主按钮色系一致 4. 前端-only PR，后端接口稍后支持；传了就按情感合成，没传默认自然 ## 验证 - Prettier 已格式化 - 本地无 ESLint/TS 依赖无法跑全量lint，依赖 CI 校验

xiaoxia force-pushed feat/tts-emotion-style from 9d42c24b09 to d7a1c8ee07 2026-09-20 11:25:23 +08:00 Compare

xiaoxia added 1 commit 2026-09-20 11:30:41 +08:00

feat(web): add TTS emotion style selector across TTS modals and avatar panel ... 5e0e32b1c2

- Add TTS_STYLE_OPTIONS (6 presets: natural/excited/professional/sweet/news/livestream)
  with DEFAULT_TTS_STYLE=natural and shared getTtsStyle() helper
- Add reusable TtsStyleSelector component (compact + normal modes, purple theme)
- Wire style param through all TTS paths:
  * api/tts types: TTSSynthesizeRequest + TTSPreviewRequest add style?: string
  * voices library: hook state → TtsModal compact selector → synthesize payload
  * voice-materials library: hook state → TtsModal compact selector → payload
  * generate Step5: formState → TtsVoiceModal (internal/external controlled)
    → synthesize payload → narrative video payload tts_style
  * ai-avatar lipsync: hook state → PanelVoiceSelector → previewTts + createLipsyncJob
- SegmentTtsConfig adds style?: string for editing-planner TtsPanel (UI pending)
- All style params optional; backend will honor when supported, default natural

xiaoxia force-pushed feat/tts-emotion-style from d7a1c8ee07 to 5e0e32b1c2 2026-09-20 11:30:41 +08:00 Compare

auto-approve-bot approved these changes 2026-09-20 11:32:00 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-20 11:32:00 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-09-20 11:39:27 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia merged commit 8413713315 into develop 2026-09-20 12:52:48 +08:00

xiaoxia deleted branch feat/tts-emotion-style 2026-09-20 12:52:50 +08:00

gitea-actions bot commented 2026-09-20 12:57:55 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2000 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#2000