chunyu_prject_react/.trae/specs/aqi-details-page/spec.md

空气质量指数API详情页 Spec

Why

用户需要查看空气质量指数API的文档和在线调试功能，当前系统缺少该API的独立详情页面。

What Changes

• 创建桌面端页面组件 AQIDetails.tsx
• 创建移动端页面组件 AQIDetailsMobile.tsx
• 创建绿色主题样式文件 AQIDetails.css
• 在 App.tsx 中添加路由 /api/air-quality-details
• 在6个i18n文件中添加 aqiDetails 翻译键
• 更新 tasks.md 标记任务完成

Impact

• Affected specs: 无
• Affected code:
  • src/pages/AQIDetails/AQIDetails.tsx (新建)
  • src/pages/AQIDetails/AQIDetailsMobile.tsx (新建)
  • src/pages/AQIDetails/AQIDetails.css (新建)
  • src/App.tsx (修改)
  • src/locales/zh.json (修改)
  • src/locales/en.json (修改)
  • src/locales/ja.json (修改)
  • src/locales/ko.json (修改)
  • src/locales/zh-TW.json (修改)
  • src/locales/ru.json (修改)

ADDED Requirements

Requirement: AQI详情页桌面端组件

系统应提供一个桌面端页面组件，展示空气质量API的文档和测试功能。

Scenario: 桌面端页面展示

• WHEN 用户访问 /api/air-quality-details 且设备为桌面端
• THEN 渲染 AQIDetails 组件，包含Hero区域和文档/测试两个Tab

Scenario: 文档Tab展示

• WHEN 用户点击"文档"Tab
• THEN 展示接口名称、GET方法标签、URL、接口描述、请求参数表、响应示例、错误码表

Scenario: 测试Tab功能

• WHEN 用户在"测试"Tab输入城市并点击发送
• THEN 使用 request.public.get 调用API，展示响应状态码、耗时和响应体

Requirement: AQI详情页移动端组件

系统应提供一个移动端适配的页面组件。

Scenario: 移动端页面展示

• WHEN 用户访问 /api/air-quality-details 且设备为移动端
• THEN 渲染 AQIDetailsMobile 组件，布局适配移动屏幕

Requirement: 绿色主题样式

系统应提供与空气质量相关的绿色主题样式。

Scenario: 样式应用

• WHEN AQI详情页渲染
• THEN 使用绿色主题配色（如 #22c55e, #16a34a 等自然色系）

Requirement: 路由配置

系统应在App.tsx中配置AQI详情页路由。

Scenario: 路由访问

• WHEN 用户导航到 /api/air-quality-details
• THEN 根据设备类型渲染对应的组件

Requirement: i18n翻译支持

系统应在所有支持的语言文件中添加aqiDetails翻译键。

Scenario: 中文展示

• WHEN 用户语言设置为中文
• THEN 展示中文翻译的aqiDetails内容

Scenario: 英文展示

• WHEN 用户语言设置为英文
• THEN 展示英文翻译的aqiDetails内容