vscode-workbench/.trae/specs/baidu-translate-api-detail/spec.md

百度翻译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

无