82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
# 图像验证码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
|
||
|
||
无移除的功能。
|