1
0

docs: 同步 spec 文档与 README(修正引用、精简重复、补全说明)

This commit is contained in:
2026-05-11 14:38:09 +08:00
parent 0ee10b47c9
commit 80d5f4cdf4
4 changed files with 34 additions and 93 deletions

View File

@@ -5,7 +5,7 @@
## Requirements
### Requirement: 总览统计卡片
Dashboard SHALL 在页面顶部展示总览统计卡片,包含总目标数、正常数和异常数(移除平均耗时)
Dashboard SHALL 在页面顶部展示总览统计卡片,包含总目标数、正常数和异常数。
#### Scenario: 展示统计卡片
- **WHEN** 用户打开 Dashboard 页面
@@ -18,6 +18,8 @@ Dashboard SHALL 在页面顶部展示总览统计卡片,包含总目标数、
### Requirement: 卡片式分组布局
Dashboard SHALL 使用按分组展示的卡片式布局替代表格布局,每个分组包含带统计的分组标题和响应式卡片网格。
> 卡片布局、响应式网格、卡片内容和交互的详细规范见 `card-dashboard`。
#### Scenario: 按分组渲染卡片
- **WHEN** 用户打开 Dashboard 页面
- **THEN** 页面 SHALL 按 group 字段将目标分组展示,每组一个区域,"默认分组" 排在最上面
@@ -26,99 +28,19 @@ Dashboard SHALL 使用按分组展示的卡片式布局替代表格布局,每
- **WHEN** 所有目标均属于 "default" 分组
- **THEN** 页面 SHALL 显示一个 "默认分组" 区域,卡片正常展示
### Requirement: 分组标题展示
Dashboard SHALL 在每个分组区域上方显示带统计信息的分组标题。
#### Scenario: 显示分组统计
- **WHEN** 渲染分组区域
- **THEN** 分组标题 SHALL 显示格式为 `分组名 (N个, X UP / Y DOWN)` 的统计信息
#### Scenario: default 分组标题
- **WHEN** 分组名为 "default"
- **THEN** 标题 SHALL 显示 "默认分组"
### Requirement: 响应式卡片网格
Dashboard SHALL 使用固定宽度的卡片配合响应式网格布局。
#### Scenario: 卡片固定宽度
- **WHEN** 页面渲染卡片
- **THEN** 每个卡片 SHALL 固定宽度 280px
#### Scenario: 响应式列数
- **WHEN** 视口宽度变化
- **THEN** 卡片网格 SHALL 自动调整列数,使用 CSS Grid auto-fill 适配可用空间
### Requirement: 目标卡片内容
每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线。
#### Scenario: 卡片第一行内容
- **WHEN** 卡片渲染
- **THEN** 卡片第一行 SHALL 展示状态指示圆点UP 绿色 / DOWN 红色、目标名称和类型标签HTTP / Command
#### Scenario: 卡片状态指示圆点
- **WHEN** 目标最近一次拨测 matched=true
- **THEN** 卡片状态圆点 SHALL 显示为绿色
- **WHEN** 目标最近一次拨测 matched=false
- **THEN** 卡片状态圆点 SHALL 显示为红色
#### Scenario: 卡片状态条可视化
- **WHEN** 卡片渲染且 recentSamples 数据可用
- **THEN** 卡片 SHALL 展示一条状态条每个采样点为一个色块UP 显示绿色(#1fbf75DOWN 显示红色(#e5484d),无数据显示灰色(#e2e8f0
#### Scenario: 卡片迷你耗时趋势线
- **WHEN** 卡片渲染且 recentSamples 中有 durationMs 数据
- **THEN** 卡片 SHALL 展示基于 recharts 的迷你折线图80x32px展示最近 30 次检查的耗时趋势
### Requirement: 卡片交互
卡片 SHALL 支持 hover 效果和点击打开模态框。
#### Scenario: 卡片 hover 效果
- **WHEN** 鼠标悬停在卡片上
- **THEN** 卡片 SHALL 显示上浮效果(阴影加深)
#### Scenario: 卡片点击打开详情
- **WHEN** 用户点击某个目标卡片
- **THEN** 系统 SHALL 打开该目标的详情模态框
### Requirement: 目标详情模态框
Dashboard SHALL 提供模态框展示目标详情,包含时间范围筛选、多维统计图和分页检查记录列表。
> 模态框的时间范围筛选、统计图表、检查结果列表和布局的详细规范见 `target-detail-modal`。
#### Scenario: 打开模态框
- **WHEN** 用户点击某个目标卡片
- **THEN** 系统 SHALL 弹出模态框,占据视口 80% 宽度,展示该目标的详情
#### Scenario: 模态框默认时间范围
- **WHEN** 模态框打开
- **THEN** 筛选器 SHALL 默认选中"最近 24 小时"
#### Scenario: 模态框布局
- **WHEN** 模态框打开
- **THEN** 模态框 SHALL 占据视口 80% 宽度,图表区在上方展示统计图,检查记录列表在下方展示
#### Scenario: 快捷时间范围按钮
- **WHEN** 模态框渲染
- **THEN** 筛选栏 SHALL 显示快捷按钮1h、6h、24h、7d当前选中的按钮高亮显示
#### Scenario: 点击快捷按钮
- **WHEN** 用户点击快捷按钮(如 "24h"
- **THEN** 筛选器 SHALL 自动设置对应的起止时间,日期选择器显示对应的时间范围,该按钮高亮
#### Scenario: 自定义日期时间选择
- **WHEN** 用户通过日期时间选择器修改起止时间(分钟精度)
- **THEN** 快捷按钮 SHALL 取消高亮,表示当前为自定义时间范围
#### Scenario: 关闭模态框
- **WHEN** 用户点击模态框关闭按钮或模态框外部区域
- **THEN** 模态框 SHALL 关闭
#### Scenario: 统计图表
- **WHEN** 模态框加载完成
- **THEN** 图表区 SHALL 展示可用率趋势折线图、耗时趋势折线图和状态分布环形图
#### Scenario: 检查记录分页
- **WHEN** 检查记录超过一页
- **THEN** 检查记录列表底部 SHALL 展示分页器
### Requirement: 页面加载与错误状态
Dashboard SHALL 正确处理加载状态和 API 错误,适配卡片式布局。