deotalandAi/.trae/documents/修改 AddAgent.vue 使用 API 数据渲染 TTS 内容.md

修改 AddAgent.vue 使用 API 数据渲染 TTS 内容

目标

根据 demo.md 中的 API 数据格式，修改 AddAgent.vue 文件，使其能够从 API 获取语言和音色数据，并正确渲染到页面上。

分析

1. 当前 AddAgent.vue 中使用硬编码的 availableLanguages 和 availableVoices 数组
2. getTtsList 函数已经调用了 API，但没有处理返回的数据
3. API 返回的数据包含语言列表和对应语言的音色列表
4. 需要根据选择的语言动态更新可用的音色列表

修改方案

1. 修改数据结构

• 将 availableLanguages 和 availableVoices 改为从 API 获取
• 添加 ttsData 变量存储完整的 API 返回数据
• 添加 allVoices 变量存储所有音色数据，便于根据语言过滤

2. 更新 getTtsList 函数

• 处理 API 返回的数据，格式化语言和音色列表
• 将语言列表转换为组件需要的格式（包含 code、name、flag）
• 将音色列表转换为组件需要的格式（包含 id、name、sampleUrl）

3. 修改语言选择逻辑

• 使用从 API 获取的语言列表替换硬编码列表
• 添加语言切换时的音色过滤逻辑

4. 修改音色选择逻辑

• 根据当前选择的语言动态过滤音色列表
• 确保音频播放功能使用 API 返回的 voice_demo URL

5. 优化音频播放功能

• 确保 playVoiceSample 函数能够正确处理 API 返回的音色数据
• 保持音频播放器的原有功能不变

具体实现步骤

1. 修改响应式变量定义：

   • 删除硬编码的 availableLanguages 和 availableVoices 数组
   • 添加 ttsData、allVoices 变量
   • 修改 availableLanguages 和 availableVoices 为计算属性

2. 更新 getTtsList 函数：

   • 处理 API 返回的数据
   • 格式化语言列表，添加国旗图标
   • 格式化音色列表，提取需要的字段

3. 添加语言切换监听：

   • 在 handleLanguageChange 函数中添加音色过滤逻辑
   • 确保切换语言时重置音色选择

4. 更新模板渲染：

   • 确保模板使用正确的变量名和字段名
   • 确保音频播放器使用 API 返回的音频 URL

5. 测试功能：

   • 确保语言列表正确渲染
   • 确保音色列表根据语言动态更新
   • 确保音频播放功能正常工作

预期效果

• 页面加载时从 API 获取语言和音色数据
• 语言选择下拉框显示所有可用语言
• 音色选择下拉框根据当前语言显示对应的音色
• 点击"试听"按钮能够播放对应的音色示例
• 音频播放器能够正常控制播放/暂停、显示进度

注意事项

• 需要处理 API 返回的语言代码与当前代码中语言代码格式的差异（如 API 返回 "zh"，当前使用 "zh-CN"）
• 需要确保所有音色都有有效的 voice_demo URL
• 需要处理 API 可能返回的错误情况
• 需要确保页面加载时的初始状态正确