58 lines
2.4 KiB
Markdown
58 lines
2.4 KiB
Markdown
## Purpose
|
||
|
||
定义拨测系统的 React 前端 Dashboard：统计卡片、按分组卡片式布局、状态条和迷你趋势线可视化、目标详情模态框和时间范围筛选。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 总览统计卡片
|
||
Dashboard SHALL 在页面顶部展示总览统计卡片，包含总目标数、正常数和异常数。
|
||
|
||
#### Scenario: 展示统计卡片
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面顶部 SHALL 显示 3 个统计卡片：全部目标数、正常目标数、异常目标数
|
||
|
||
#### Scenario: 统计数据自动刷新
|
||
- **WHEN** 页面处于打开状态
|
||
- **THEN** 统计卡片 SHALL 每 5-10 秒自动刷新数据
|
||
|
||
### Requirement: 卡片式分组布局
|
||
Dashboard SHALL 使用按分组展示的卡片式布局替代表格布局，每个分组包含带统计的分组标题和响应式卡片网格。
|
||
|
||
> 卡片布局、响应式网格、卡片内容和交互的详细规范见 `card-dashboard`。
|
||
|
||
#### Scenario: 按分组渲染卡片
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面 SHALL 按 group 字段将目标分组展示，每组一个区域，"默认分组" 排在最上面
|
||
|
||
#### Scenario: 无分组时的展示
|
||
- **WHEN** 所有目标均属于 "default" 分组
|
||
- **THEN** 页面 SHALL 显示一个 "默认分组" 区域，卡片正常展示
|
||
|
||
### Requirement: 目标详情模态框
|
||
Dashboard SHALL 提供模态框展示目标详情，包含时间范围筛选、多维统计图和分页检查记录列表。
|
||
|
||
> 模态框的时间范围筛选、统计图表、检查结果列表和布局的详细规范见 `target-detail-modal`。
|
||
|
||
#### Scenario: 打开模态框
|
||
- **WHEN** 用户点击某个目标卡片
|
||
- **THEN** 系统 SHALL 弹出模态框，占据视口 80% 宽度，展示该目标的详情
|
||
|
||
#### Scenario: 关闭模态框
|
||
- **WHEN** 用户点击模态框关闭按钮或模态框外部区域
|
||
- **THEN** 模态框 SHALL 关闭
|
||
|
||
### Requirement: 页面加载与错误状态
|
||
Dashboard SHALL 正确处理加载状态和 API 错误，适配卡片式布局。
|
||
|
||
#### Scenario: 首次加载
|
||
- **WHEN** 页面首次加载且数据尚未返回
|
||
- **THEN** 页面 SHALL 显示加载状态指示
|
||
|
||
#### Scenario: API 请求失败
|
||
- **WHEN** 前端轮询 API 请求失败
|
||
- **THEN** 页面 SHALL 显示错误提示，并在下一次轮询周期自动重试
|
||
|
||
#### Scenario: 模态框内部加载状态
|
||
- **WHEN** 模态框内趋势数据或历史记录正在加载
|
||
- **THEN** 对应图表或列表区域 SHALL 显示加载指示
|