# 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