## MODIFIED Requirements ### Requirement: 总览统计卡片 Dashboard SHALL 在页面顶部展示总览统计卡片,包含总目标数、正常数、异常数和平均耗时。 #### Scenario: 展示统计卡片 - **WHEN** 用户打开 Dashboard 页面 - **THEN** 页面顶部 SHALL 显示 4 个统计卡片:全部目标数、正常目标数、异常目标数、所有目标平均耗时 #### Scenario: 统计数据自动刷新 - **WHEN** 页面处于打开状态 - **THEN** 统计卡片 SHALL 每 5-10 秒自动刷新数据 ### Requirement: 目标列表表格 Dashboard SHALL 展示所有 checker target 的列表表格,包含名称、类型、目标摘要、当前状态、最新耗时、最近失败原因和迷你趋势线。 #### Scenario: 展示目标列表 - **WHEN** 用户打开 Dashboard 页面 - **THEN** 页面 SHALL 显示表格,每行包含目标名称、类型、目标摘要、状态指示圆点(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 显示最近检查记录列表,每条包含时间戳、statusDetail(如 HTTP 200 或 exitCode=1)、耗时毫秒数、UP/DOWN 标记和 failure.message(如存在) ### Requirement: 趋势图可视化 Dashboard SHALL 使用 recharts 库渲染趋势图,包括目标列表中的迷你 Sparkline 和详情面板中的完整折线图。 #### Scenario: 表格行内迷你趋势线 - **WHEN** 目标列表表格渲染 - **THEN** 每行 SHALL 包含一个基于 recharts 的迷你折线图,展示最近的耗时趋势 #### Scenario: 详情面板完整趋势图 - **WHEN** 用户展开目标详情面板 - **THEN** 面板 SHALL 展示基于 recharts 的完整折线图,X 轴为时间(小时),Y 轴为平均耗时,并标注可用率 ## ADDED Requirements ### Requirement: checker 类型展示 Dashboard SHALL 在列表和详情中明确展示 target 的 checker 类型。 #### Scenario: 展示 HTTP 类型 - **WHEN** 目标 type 为 `http` - **THEN** Dashboard SHALL 在类型列显示 HTTP,并将目标摘要显示为 URL #### Scenario: 展示 command 类型 - **WHEN** 目标 type 为 `command` - **THEN** Dashboard SHALL 在类型列显示 Command,并将目标摘要显示为命令摘要