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

Tasks

路由与基础结构

• Task 1: 注册API详情页路由
  • 在 App.tsx 中添加 /api-detail/:id 路由，指向 ApiDetail 组件
  • 确保路由支持移动端和桌面端

通用API详情页重构

• Task 2: 重构 ApiDetail.tsx 为通用组件

  • 使用 useParams() 获取路由中的 id 参数
  • 调用 api_request.apidirectory.getItemDetail(id) 获取API详情
  • 根据API方法（GET/POST）动态渲染测试表单
  • 实现加载状态和错误处理

• Task 3: 实现API文档展示

  • 显示API名称、请求方法标签、URL路径
  • 显示接口描述
  • 渲染请求参数表（参数名、类型、是否必填、描述）
  • 显示响应示例（JSON格式，带语法高亮）
  • 显示错误码说明表

• Task 4: 实现在线测试功能

  • 根据API方法显示不同的请求配置（GET参数/POST Body）
  • 实现发送请求按钮，调用真实API
  • 显示响应状态码（成功/失败颜色区分）
  • 显示响应时间（ms）
  • 显示响应体（JSON格式化，带复制按钮）

• Task 5: 实现收藏功能

  • 在英雄区添加收藏按钮
  • 已登录用户可点击收藏/取消收藏
  • 未登录用户点击弹出登录弹窗
  • 收藏后更新收藏计数

API列表页跳转逻辑

• Task 6: 修改API列表页点击逻辑
  • 修改 Tools.tsx 中的卡片点击事件
  • 点击卡片时跳转到 /api-detail/:id（使用API的数据库ID）
  • 确保"敬请期待"的API不可点击

样式与响应式

• Task 7: 更新 ApiDetail.css
  • 确保详情页样式与现有工具页面一致
  • 支持暗色模式
  • 支持移动端响应式布局

国际化

• Task 8: 添加i18n翻译
  • 在 zh.json、zh-TW.json、en.json 等文件中添加API详情页相关翻译键
  • 确保所有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