feat: PLANNING体系首版(00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径)+M1止血交付
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
# Checklist
|
||||
|
||||
## 路由与基础结构验证
|
||||
|
||||
- [x] App.tsx 中 `/api-detail/:id` 路由已注册
|
||||
- [x] 访问 `/api-detail/1` 能正确显示ID为1的API详情页
|
||||
- [x] 路由支持移动端访问
|
||||
|
||||
## 通用API详情页功能验证
|
||||
|
||||
- [x] ApiDetail.tsx 通过 `useParams()` 获取路由参数 `id`
|
||||
- [x] 页面加载时调用 `api_request.apidirectory.getItemDetail(id)` 获取API信息
|
||||
- [x] 加载中状态显示正确(Spinner)
|
||||
- [x] 加载失败时显示错误提示
|
||||
- [x] API名称、方法、URL正确显示
|
||||
|
||||
## API文档展示验证
|
||||
|
||||
- [x] "文档"标签可正常切换
|
||||
- [x] 接口描述文本正确显示
|
||||
- [x] 请求参数表正确渲染(参数名、类型、必填、描述)
|
||||
- [x] 响应示例以JSON格式显示,带语法高亮
|
||||
- [x] 错误码说明表正确显示
|
||||
- [x] URL路径可点击复制
|
||||
|
||||
## 在线测试功能验证
|
||||
|
||||
- [x] "测试"标签可正常切换
|
||||
- [x] GET方法显示URL参数输入框
|
||||
- [x] POST方法显示请求体输入框
|
||||
- [x] 点击发送按钮能发起真实API请求
|
||||
- [x] 响应状态码正确显示(200绿色,非200红色)
|
||||
- [x] 响应时间(ms)正确显示
|
||||
- [x] 响应体JSON格式化显示
|
||||
- [x] 响应体可复制到剪贴板
|
||||
- [x] 发送按钮在请求中显示loading状态
|
||||
|
||||
## 收藏功能验证
|
||||
|
||||
- [x] 英雄区显示收藏按钮
|
||||
- [x] 已登录用户点击收藏按钮,状态变为"已收藏",收藏数+1
|
||||
- [x] 已登录用户点击已收藏按钮,状态变为"收藏",收藏数-1
|
||||
- [x] 未登录用户点击收藏按钮,弹出登录弹窗
|
||||
- [x] 收藏状态在页面刷新后保持
|
||||
|
||||
## API列表页跳转验证
|
||||
|
||||
- [x] API列表页卡片点击跳转到 `/api-detail/:id`
|
||||
- [x] "敬请期待"的API卡片不可点击
|
||||
- [x] 浏览器后退按钮可返回列表页
|
||||
|
||||
## 样式与响应式验证
|
||||
|
||||
- [x] 详情页样式与现有工具页面风格一致
|
||||
- [x] 暗色模式下样式正常
|
||||
- [x] 移动端布局正常(Hero区域、表单、按钮适配)
|
||||
|
||||
## 国际化验证
|
||||
|
||||
- [x] 所有UI文本使用i18n翻译
|
||||
- [x] 中文、英文、繁体中文显示正确
|
||||
@@ -0,0 +1,81 @@
|
||||
# 图像验证码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
|
||||
|
||||
无移除的功能。
|
||||
@@ -0,0 +1,65 @@
|
||||
# Tasks
|
||||
|
||||
## 路由与基础结构
|
||||
|
||||
- [x] Task 1: 注册API详情页路由
|
||||
- [x] 在 App.tsx 中添加 `/api-detail/:id` 路由,指向 ApiDetail 组件
|
||||
- [x] 确保路由支持移动端和桌面端
|
||||
|
||||
## 通用API详情页重构
|
||||
|
||||
- [x] Task 2: 重构 ApiDetail.tsx 为通用组件
|
||||
- [x] 使用 `useParams()` 获取路由中的 `id` 参数
|
||||
- [x] 调用 `api_request.apidirectory.getItemDetail(id)` 获取API详情
|
||||
- [x] 根据API方法(GET/POST)动态渲染测试表单
|
||||
- [x] 实现加载状态和错误处理
|
||||
|
||||
- [x] Task 3: 实现API文档展示
|
||||
- [x] 显示API名称、请求方法标签、URL路径
|
||||
- [x] 显示接口描述
|
||||
- [x] 渲染请求参数表(参数名、类型、是否必填、描述)
|
||||
- [x] 显示响应示例(JSON格式,带语法高亮)
|
||||
- [x] 显示错误码说明表
|
||||
|
||||
- [x] Task 4: 实现在线测试功能
|
||||
- [x] 根据API方法显示不同的请求配置(GET参数/POST Body)
|
||||
- [x] 实现发送请求按钮,调用真实API
|
||||
- [x] 显示响应状态码(成功/失败颜色区分)
|
||||
- [x] 显示响应时间(ms)
|
||||
- [x] 显示响应体(JSON格式化,带复制按钮)
|
||||
|
||||
- [x] Task 5: 实现收藏功能
|
||||
- [x] 在英雄区添加收藏按钮
|
||||
- [x] 已登录用户可点击收藏/取消收藏
|
||||
- [x] 未登录用户点击弹出登录弹窗
|
||||
- [x] 收藏后更新收藏计数
|
||||
|
||||
## API列表页跳转逻辑
|
||||
|
||||
- [x] Task 6: 修改API列表页点击逻辑
|
||||
- [x] 修改 Tools.tsx 中的卡片点击事件
|
||||
- [x] 点击卡片时跳转到 `/api-detail/:id`(使用API的数据库ID)
|
||||
- [x] 确保"敬请期待"的API不可点击
|
||||
|
||||
## 样式与响应式
|
||||
|
||||
- [x] Task 7: 更新 ApiDetail.css
|
||||
- [x] 确保详情页样式与现有工具页面一致
|
||||
- [x] 支持暗色模式
|
||||
- [x] 支持移动端响应式布局
|
||||
|
||||
## 国际化
|
||||
|
||||
- [x] Task 8: 添加i18n翻译
|
||||
- [x] 在 zh.json、zh-TW.json、en.json 等文件中添加API详情页相关翻译键
|
||||
- [x] 确保所有UI文本使用翻译函数
|
||||
|
||||
# Task Dependencies
|
||||
- Task 1 独立执行
|
||||
- Task 2 依赖 Task 1
|
||||
- Task 3 依赖 Task 2
|
||||
- Task 4 依赖 Task 2
|
||||
- Task 5 依赖 Task 2
|
||||
- Task 6 独立执行
|
||||
- Task 7 依赖 Task 2, Task 3, Task 4
|
||||
- Task 8 依赖 Task 3, Task 4
|
||||
Reference in New Issue
Block a user