vscode-workbench/.trae/specs/image-captcha-api/spec.md

图像验证码API详情页 Spec

Why

当前API接口大全（/api）中的"图片验证码"API尚未实现前端详情页。现有的 ApiDetail.tsx 是静态页面，仅支持硬编码的天气API和IP定位API，无法动态展示其他API的文档和测试功能。需要实现一个通用的API详情页，支持动态加载后端API目录中的任意API信息，包括图像验证码API。

What Changes

前端变更

• 重构 ApiDetail.tsx 为通用组件，通过API ID或路径动态加载API信息
• 新增API详情页路由 /api-detail/:id，支持从API列表页点击进入
• 实现API文档展示：接口描述、请求参数表、响应示例、错误码说明
• 实现在线测试功能：支持GET/POST请求，显示响应状态、耗时、响应体
• 添加收藏功能，已登录用户可收藏/取消收藏API
• 添加使用次数统计展示
• 支持暗色模式样式

路由变更

• 新增路由 /api-detail/:id → 通用API详情页
• API列表页（Tools.tsx）点击卡片时跳转到 /api-detail/:id

数据变更

• 复用现有 apidirectory 后端接口获取API详情
• 无需新增数据库表

Impact

• Affected specs: real-time-weather-api, ip-location-api, air-quality-api（参考其模式）
• Affected code:
  • chunyu_project_react/src/pages/ApiDetail/ApiDetail.tsx（重构为通用组件）
  • chunyu_project_react/src/pages/ApiDetail/ApiDetail.css（样式更新）
  • chunyu_project_react/src/pages/Tools/Tools.tsx（修改点击跳转逻辑）
  • chunyu_project_react/src/App.tsx（新增路由）
  • chunyu_project_react/src/locales/*.json（添加翻译键）

ADDED Requirements

Requirement: 通用API详情页

系统SHALL提供一个通用的API详情页，能够根据API ID动态加载并展示任意API的文档和测试功能。

Scenario: 从API列表进入详情页

• WHEN 用户在API列表页（/api）点击某个API卡片
• THEN 页面跳转到 /api-detail/:id，显示该API的详情信息

Scenario: 动态加载API信息

• WHEN 用户访问 /api-detail/:id
• THEN 系统通过 api_request.apidirectory.getItemDetail(id) 获取API信息并展示

Scenario: API文档展示

• WHEN 用户切换到"文档"标签
• THEN 显示接口名称、请求方法、URL路径、接口描述、请求参数表、响应示例、错误码说明

Scenario: 在线测试功能

• WHEN 用户在"测试"标签中配置请求参数并点击发送
• THEN 系统向API发起真实请求，显示响应状态码、响应时间、响应体

Scenario: 收藏功能

• WHEN 已登录用户点击收藏按钮
• THEN 调用收藏API，按钮状态更新为"已收藏"，收藏数+1

Scenario: 未登录用户点击收藏

• WHEN 未登录用户点击收藏按钮
• THEN 弹出登录弹窗

MODIFIED Requirements

Requirement: API列表页跳转逻辑

API列表页的卡片点击SHALL跳转到通用详情页 /api-detail/:id。

Scenario: 卡片点击跳转

• WHEN 用户点击API列表中的某个API卡片
• THEN 页面跳转到 /api-detail/:id（id为该API的数据库ID）

Requirement: 路由注册

App.tsx SHALL注册 /api-detail/:id 路由指向通用API详情页。

Scenario: 路由匹配

• WHEN 用户访问 /api-detail/1
• THEN 显示ID为1的API详情页

REMOVED Requirements

无移除的功能。