DiAL/openspec/specs/probe-dashboard/spec.md

Purpose

定义拨测系统的 React 前端 Dashboard：统计卡片、按分组卡片式布局、状态条和迷你趋势线可视化、目标详情模态框和时间范围筛选。

Requirements

Requirement: 总览统计卡片

Dashboard SHALL 在页面顶部展示总览统计卡片，包含总目标数、正常数和异常数（移除平均耗时）。

Scenario: 展示统计卡片

• WHEN 用户打开 Dashboard 页面
• THEN 页面顶部 SHALL 显示 3 个统计卡片：全部目标数、正常目标数、异常目标数

Scenario: 统计数据自动刷新

• WHEN 页面处于打开状态
• THEN 统计卡片 SHALL 每 5-10 秒自动刷新数据

Requirement: 卡片式分组布局

Dashboard SHALL 使用按分组展示的卡片式布局替代表格布局，每个分组包含带统计的分组标题和响应式卡片网格。

Scenario: 按分组渲染卡片

• WHEN 用户打开 Dashboard 页面
• THEN 页面 SHALL 按 group 字段将目标分组展示，每组一个区域，"默认分组" 排在最上面

Scenario: 无分组时的展示

• 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 目标最近一次拨测 success=true 且 matched=true
• THEN 卡片状态圆点 SHALL 显示为绿色
• WHEN 目标最近一次拨测 success=false 或 matched=false
• THEN 卡片状态圆点 SHALL 显示为红色

Scenario: 卡片状态条可视化

• WHEN 卡片渲染且 recentSamples 数据可用
• THEN 卡片 SHALL 展示一条状态条，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#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 提供模态框展示目标详情，包含时间范围筛选、多维统计图和分页检查记录列表。

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 错误，适配卡片式布局。

Scenario: 首次加载

• WHEN 页面首次加载且数据尚未返回
• THEN 页面 SHALL 显示加载状态指示

Scenario: API 请求失败

• WHEN 前端轮询 API 请求失败
• THEN 页面 SHALL 显示错误提示，并在下一次轮询周期自动重试

Scenario: 模态框内部加载状态

• WHEN 模态框内趋势数据或历史记录正在加载
• THEN 对应图表或列表区域 SHALL 显示加载指示