76 lines
2.7 KiB
Markdown
76 lines
2.7 KiB
Markdown
# 空气质量指数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内容
|