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