72 lines
2.9 KiB
Markdown
72 lines
2.9 KiB
Markdown
# 修改 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 可能返回的错误情况
|
||
- 需要确保页面加载时的初始状态正确 |