# 百度翻译API详情页 Spec

## Why
当前API接口大全中百度翻译已有路由映射（`/api/baiduFanyi` → `/baidu-translate`），但缺少一个专门的API详情页来展示文档和在线测试接口。需要创建一个详情页，让开发者了解百度翻译API的功能、参数和调用方式。

## What Changes
- 新增 `BaiduTranslateDetail.tsx` 页面组件，展示百度翻译API文档和在线测试
- 新增 `BaiduTranslateDetail.css` 样式文件
- 在 `App.tsx` 中添加路由 `/api-detail/baidu-translate`
- 在 `ApiDirectory.tsx` 的 `getApiRoute` 中添加路由映射
- 百度翻译API支持四个子接口：文本翻译、语种识别、图片翻译、语音翻译

## Impact
- Affected specs: api-directory-db
- Affected code:
  - `chunyu_project_react/src/pages/BaiduTranslateDetail/BaiduTranslateDetail.tsx` - 新增详情页组件
  - `chunyu_project_react/src/pages/BaiduTranslateDetail/BaiduTranslateDetail.css` - 新增样式
  - `chunyu_project_react/src/App.tsx` - 新增路由
  - `chunyu_project_react/src/pages/ApiDirectory/ApiDirectory.tsx` - 更新路由映射

## ADDED Requirements

### Requirement: 百度翻译API详情页
系统 SHALL 提供一个百度翻译API详情页，展示API文档和在线测试功能。

#### Scenario: 访问详情页
- **WHEN** 用户访问 `/api-detail/baidu-translate`
- **THEN** 显示百度翻译API详情页，包含文档标签和测试标签

#### Scenario: 从API接口大全跳转
- **WHEN** 用户在API接口大全中点击百度翻译卡片
- **THEN** 跳转到百度翻译API详情页

### Requirement: API文档展示
系统 SHALL 在详情页展示百度翻译API的完整文档。

#### Scenario: 展示子接口列表
- **WHEN** 用户切换到文档标签
- **THEN** 显示四个子接口：文本翻译、语种识别、图片翻译、语音翻译

#### Scenario: 展示请求参数
- **WHEN** 用户查看某个子接口
- **THEN** 显示该接口的请求方法、URL、参数说明

#### Scenario: 展示响应示例
- **WHEN** 用户查看某个子接口
- **THEN** 显示该接口的JSON响应示例

### Requirement: 在线测试功能
系统 SHALL 提供在线测试API接口的功能。

#### Scenario: 测试文本翻译
- **WHEN** 用户在测试标签中选择文本翻译，输入文本后点击发送
- **THEN** 调用后端API并显示翻译结果

#### Scenario: 测试语种识别
- **WHEN** 用户在测试标签中选择语种识别，输入文本后点击发送
- **THEN** 调用后端API并显示识别结果

#### Scenario: 显示响应信息
- **WHEN** API请求完成
- **THEN** 显示状态码、响应时间、响应体内容

### Requirement: 使用量统计展示
系统 SHALL 在详情页展示当前用户的翻译使用统计。

#### Scenario: 展示使用统计
- **WHEN** 用户访问详情页
- **THEN** 显示今日翻译次数和累计翻译次数

## MODIFIED Requirements

### Requirement: API接口大全路由映射
现有的 `getApiRoute` 函数 SHALL 更新百度翻译的路由映射。

#### Scenario: 点击百度翻译卡片
- **WHEN** 用户在API接口大全点击百度翻译
- **THEN** 跳转到 `/api-detail/baidu-translate` 而非 `/baidu-translate`

## REMOVED Requirements
无