70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
## ADDED Requirements
|
||
|
||
### Requirement: 总览统计卡片
|
||
Dashboard SHALL 在页面顶部展示总览统计卡片，包含总目标数、正常数、异常数和平均延迟。
|
||
|
||
#### Scenario: 展示统计卡片
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面顶部 SHALL 显示 4 个统计卡片：全部目标数、正常目标数、异常目标数、所有目标平均延迟
|
||
|
||
#### Scenario: 统计数据自动刷新
|
||
- **WHEN** 页面处于打开状态
|
||
- **THEN** 统计卡片 SHALL 每 5-10 秒自动刷新数据
|
||
|
||
### Requirement: 目标列表表格
|
||
Dashboard SHALL 展示所有拨测目标的列表表格，包含名称、URL、当前状态、最新延迟和迷你趋势线。
|
||
|
||
#### Scenario: 展示目标列表
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面 SHALL 显示表格，每行包含目标名称、URL、状态指示圆点（● UP / ● DOWN）、最新延迟值、迷你 Sparkline 趋势线
|
||
|
||
#### Scenario: 状态指示圆点
|
||
- **WHEN** 目标最近一次拨测 success=true 且 matched=true
|
||
- **THEN** 状态圆点 SHALL 显示为绿色（UP）
|
||
- **WHEN** 目标最近一次拨测 success=false 或 matched=false
|
||
- **THEN** 状态圆点 SHALL 显示为红色（DOWN）
|
||
|
||
### Requirement: 可展开的目标详情面板
|
||
Dashboard SHALL 支持在目标列表中展开某行，显示该目标的详细状态、统计摘要、趋势图和最近历史记录。
|
||
|
||
#### Scenario: 展开目标详情
|
||
- **WHEN** 用户点击目标列表中的某一行
|
||
- **THEN** 该行下方 SHALL 展开详情面板，包含：可用率百分比、平均延迟、P99 延迟、24 小时延迟趋势折线图、最近 5-10 条拨测记录列表
|
||
|
||
#### Scenario: 收起目标详情
|
||
- **WHEN** 用户再次点击已展开的目标行
|
||
- **THEN** 详情面板 SHALL 收起
|
||
|
||
#### Scenario: 趋势图按需加载
|
||
- **WHEN** 用户展开某个目标的详情面板
|
||
- **THEN** 系统 SHALL 此时请求该目标的趋势数据，而非页面加载时预加载所有目标的趋势数据
|
||
|
||
### Requirement: 历史记录展示
|
||
Dashboard SHALL 在目标详情面板中展示最近的拨测记录，包含时间、状态码、延迟和成功/失败标记。
|
||
|
||
#### Scenario: 展示历史记录
|
||
- **WHEN** 用户展开目标详情面板
|
||
- **THEN** 面板 SHALL 显示最近拨测记录列表，每条包含时间戳、HTTP 状态码（或错误信息）、延迟毫秒数、成功/失败图标
|
||
|
||
### Requirement: 趋势图可视化
|
||
Dashboard SHALL 使用 recharts 库渲染趋势图，包括目标列表中的迷你 Sparkline 和详情面板中的完整折线图。
|
||
|
||
#### Scenario: 表格行内迷你趋势线
|
||
- **WHEN** 目标列表表格渲染
|
||
- **THEN** 每行 SHALL 包含一个基于 recharts 的迷你折线图，展示最近的延迟趋势
|
||
|
||
#### Scenario: 详情面板完整趋势图
|
||
- **WHEN** 用户展开目标详情面板
|
||
- **THEN** 面板 SHALL 展示基于 recharts 的完整折线图，X 轴为时间（小时），Y 轴为平均延迟，并标注可用率
|
||
|
||
### Requirement: 页面加载与错误状态
|
||
Dashboard SHALL 正确处理加载状态和 API 错误。
|
||
|
||
#### Scenario: 首次加载
|
||
- **WHEN** 页面首次加载且数据尚未返回
|
||
- **THEN** 页面 SHALL 显示加载状态指示
|
||
|
||
#### Scenario: API 请求失败
|
||
- **WHEN** 前端轮询 API 请求失败
|
||
- **THEN** 页面 SHALL 显示错误提示，并在下一次轮询周期自动重试
|