vscode-workbench/.trae/specs/air-quality-api-detail/spec.md

空气质量API详情页 Spec

Why

当前空气质量详情页（AQIDetails）已存在但可能存在与API接口大全集成不一致的问题，需要完善页面实现，确保与API接口大全风格统一、API调用正确、用户体验良好。

What Changes

• 确保页面与API接口大全（ApiDirectory）风格一致
• 修复API调用URL问题（后端使用/api/air-quality/带斜杠）
• 完善文档标签页和测试标签页功能
• 确保响应数据正确展示

Impact

• Affected specs: 无
• Affected code:
  • chunyu_project_react/src/pages/AQIDetails/AQIDetails.tsx — 完善页面实现
  • chunyu_project_react/src/pages/AQIDetails/AQIDetails.css — 样式优化

ADDED Requirements

Requirement: 空气质量API详情页完整性

系统 SHALL 提供一个完整的空气质量API详情页，包含文档标签页和测试标签页。

Scenario: 访问详情页

• WHEN 用户从API接口大全点击空气质量API卡片
• THEN 跳转到空气质量详情页，显示API文档和测试界面

Scenario: 查看API文档

• WHEN 用户切换到文档标签页
• THEN 显示API名称、接口说明、请求参数、响应示例、错误码说明

Scenario: 测试API

• WHEN 用户在测试标签页输入参数并发送请求
• THEN 显示响应状态码、响应时间、响应体内容

MODIFIED Requirements

Requirement: API调用逻辑

测试标签页 SHALL 正确调用后端API /api/air-quality/，支持GET和POST方式。

Scenario: GET请求

• WHEN 用户选择GET方式并发送请求
• THEN 将参数拼接到URL查询字符串中发送

Scenario: POST请求

• WHEN 用户选择POST方式并发送请求
• THEN 将参数放入请求体发送