feat: 重构 Dashboard 为卡片式分组布局

表格布局替换为按分组展示的卡片式布局，新增 group 字段配置和 TargetBoard/TargetCard 等组件。模态框详情页支持时间范围筛选和分页，SummaryCards 减为 3 个。API 端点变更：trend/history 改用 from/to 参数，history 支持分页。recentSampleCount 硬编码为 30。
2026-05-11 08:54:21 +08:00
parent b8810f1182
commit 548b44d28e
44 changed files with 1676 additions and 557 deletions
--- a/openspec/specs/probe-dashboard/spec.md
+++ b/openspec/specs/probe-dashboard/spec.md
@@ -1,79 +1,126 @@
 ## Purpose

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

 ## Requirements

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

 #### Scenario: 展示统计卡片
 - **WHEN** 用户打开 Dashboard 页面
- **THEN** 页面顶部 SHALL 显示 4 个统计卡片：全部目标数、正常目标数、异常目标数、所有目标平均耗时
+- **THEN** 页面顶部 SHALL 显示 3 个统计卡片：全部目标数、正常目标数、异常目标数

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

-### Requirement: 目标列表表格
-Dashboard SHALL 展示所有 checker target 的列表表格，包含名称、类型、目标摘要、当前状态、最新耗时、最近失败原因和迷你趋势线。
+### Requirement: 卡片式分组布局
+Dashboard SHALL 使用按分组展示的卡片式布局替代表格布局，每个分组包含带统计的分组标题和响应式卡片网格。

-#### Scenario: 展示目标列表
+#### Scenario: 按分组渲染卡片
 - **WHEN** 用户打开 Dashboard 页面
- **THEN** 页面 SHALL 显示表格，每行包含目标名称、类型、目标摘要、状态指示圆点（UP / DOWN）、最新耗时值、最近失败原因摘要、迷你 Sparkline 趋势线
+- **THEN** 页面 SHALL 按 group 字段将目标分组展示，每组一个区域，"默认分组" 排在最上面

-#### Scenario: 状态指示圆点
+#### 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 显示为绿色（UP）
+- **THEN** 卡片状态圆点 SHALL 显示为绿色
 - **WHEN** 目标最近一次拨测 success=false 或 matched=false
- **THEN** 状态圆点 SHALL 显示为红色（DOWN）
+- **THEN** 卡片状态圆点 SHALL 显示为红色

-### Requirement: 可展开的目标详情面板
-Dashboard SHALL 支持在目标列表中展开某行，显示该目标的详细状态、统计摘要、趋势图和最近历史记录。
+#### Scenario: 卡片状态条可视化
+- **WHEN** 卡片渲染且 recentSamples 数据可用
+- **THEN** 卡片 SHALL 展示一条状态条，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#e5484d），无数据显示灰色（#e2e8f0）

-#### Scenario: 展开目标详情
- **WHEN** 用户点击目标列表中的某一行
- **THEN** 该行下方 SHALL 展开详情面板，包含：可用率百分比、平均耗时、P99 耗时、24 小时耗时趋势折线图、最近 5-10 条检查记录列表、领域状态详情和失败信息
+#### Scenario: 卡片迷你耗时趋势线
+- **WHEN** 卡片渲染且 recentSamples 中有 durationMs 数据
+- **THEN** 卡片 SHALL 展示基于 recharts 的迷你折线图（80x32px），展示最近 30 次检查的耗时趋势

-#### Scenario: 收起目标详情
- **WHEN** 用户再次点击已展开的目标行
- **THEN** 详情面板 SHALL 收起
+### Requirement: 卡片交互
+卡片 SHALL 支持 hover 效果和点击打开模态框。

-#### Scenario: 趋势图按需加载
- **WHEN** 用户展开某个目标的详情面板
- **THEN** 系统 SHALL 此时请求该目标的趋势数据，而非页面加载时预加载所有目标的趋势数据
+#### Scenario: 卡片 hover 效果
+- **WHEN** 鼠标悬停在卡片上
+- **THEN** 卡片 SHALL 显示上浮效果（阴影加深）

-### Requirement: 历史记录展示
-Dashboard SHALL 在目标详情面板中展示最近的检查记录，包含时间、领域状态详情、耗时、成功/失败标记和失败信息。
+#### Scenario: 卡片点击打开详情
+- **WHEN** 用户点击某个目标卡片
+- **THEN** 系统 SHALL 打开该目标的详情模态框

-#### Scenario: 展示历史记录
- **WHEN** 用户展开目标详情面板
- **THEN** 面板 SHALL 显示最近检查记录列表，每条包含时间戳、statusDetail（如 HTTP 200 或 exitCode=1）、耗时毫秒数、UP/DOWN 标记和 failure.message（如存在）
+### Requirement: 目标详情模态框
+Dashboard SHALL 提供模态框展示目标详情，包含时间范围筛选、多维统计图和分页检查记录列表。

-### Requirement: 趋势图可视化
-Dashboard SHALL 使用 recharts 库渲染趋势图，包括目标列表中的迷你 Sparkline 和详情面板中的完整折线图。
+#### Scenario: 打开模态框
+- **WHEN** 用户点击某个目标卡片
+- **THEN** 系统 SHALL 弹出模态框，占据视口 80% 宽度，展示该目标的详情

-#### Scenario: 表格行内迷你趋势线
- **WHEN** 目标列表表格渲染
- **THEN** 每行 SHALL 包含一个基于 recharts 的迷你折线图，展示最近的耗时趋势
+#### Scenario: 模态框默认时间范围
+- **WHEN** 模态框打开
+- **THEN** 筛选器 SHALL 默认选中"最近 24 小时"

-#### Scenario: 详情面板完整趋势图
- **WHEN** 用户展开目标详情面板
- **THEN** 面板 SHALL 展示基于 recharts 的完整折线图，X 轴为时间（小时），Y 轴为平均耗时，并标注可用率
+#### Scenario: 模态框布局
+- **WHEN** 模态框打开
+- **THEN** 模态框 SHALL 占据视口 80% 宽度，图表区在上方展示统计图，检查记录列表在下方展示

-### Requirement: checker 类型展示
-Dashboard SHALL 在列表和详情中明确展示 target 的 checker 类型。
+#### Scenario: 快捷时间范围按钮
+- **WHEN** 模态框渲染
+- **THEN** 筛选栏 SHALL 显示快捷按钮：1h、6h、24h、7d，当前选中的按钮高亮显示

-#### Scenario: 展示 HTTP 类型
- **WHEN** 目标 type 为 `http`
- **THEN** Dashboard SHALL 在类型列显示 HTTP，并将目标摘要显示为 URL
+#### Scenario: 点击快捷按钮
+- **WHEN** 用户点击快捷按钮（如 "24h"）
+- **THEN** 筛选器 SHALL 自动设置对应的起止时间，日期选择器显示对应的时间范围，该按钮高亮

-#### Scenario: 展示 command 类型
- **WHEN** 目标 type 为 `command`
- **THEN** Dashboard SHALL 在类型列显示 Command，并将目标摘要显示为命令摘要
+#### Scenario: 自定义日期时间选择
+- **WHEN** 用户通过日期时间选择器修改起止时间（分钟精度）
+- **THEN** 快捷按钮 SHALL 取消高亮，表示当前为自定义时间范围
+
+#### Scenario: 关闭模态框
+- **WHEN** 用户点击模态框关闭按钮或模态框外部区域
+- **THEN** 模态框 SHALL 关闭
+
+#### Scenario: 统计图表
+- **WHEN** 模态框加载完成
+- **THEN** 图表区 SHALL 展示可用率趋势折线图、耗时趋势折线图和状态分布环形图
+
+#### Scenario: 检查记录分页
+- **WHEN** 检查记录超过一页
+- **THEN** 检查记录列表底部 SHALL 展示分页器

 ### Requirement: 页面加载与错误状态
-Dashboard SHALL 正确处理加载状态和 API 错误。
+Dashboard SHALL 正确处理加载状态和 API 错误，适配卡片式布局。

 #### Scenario: 首次加载
 - **WHEN** 页面首次加载且数据尚未返回
@@ -82,3 +129,7 @@ Dashboard SHALL 正确处理加载状态和 API 错误。
 #### Scenario: API 请求失败
 - **WHEN** 前端轮询 API 请求失败
 - **THEN** 页面 SHALL 显示错误提示，并在下一次轮询周期自动重试
+
+#### Scenario: 模态框内部加载状态
+- **WHEN** 模态框内趋势数据或历史记录正在加载
+- **THEN** 对应图表或列表区域 SHALL 显示加载指示