1
0

feat: 前端指标体系增强 — Dashboard/Metrics API、2×4 统计区、趋势图面积+异常标记、连续状态列

- 新增 GET /api/dashboard 合并原 summary+targets 首屏接口
- 新增 GET /api/targets/:id/metrics 合并原 stats+trend 概览接口
- 后端指标纯函数:可用率、百分位、故障段分析、连续状态、UTC 小时分桶
- ProbeStore 窗口取数方法替代全量历史查询
- SummaryCards 扩展为 4 卡片(新增异常事件数)+ 数据新鲜度展示
- 表格新增「连续」列(Tag 渲染 capped 状态)
- OverviewTab 重构为 2×4 Statistic 多维度布局
- TrendChart 改为延迟范围面积图 + 红色异常标记点
- 删除旧路由(summary/targets/trend)和 computeTrendStats
- 同步 delta specs 到主 specs 并归档变更
This commit is contained in:
2026-05-14 12:32:41 +08:00
parent e983e5d75d
commit 1c5cfafda6
47 changed files with 1768 additions and 1231 deletions

View File

@@ -52,12 +52,36 @@ Dashboard SHALL 按 group 字段将目标分组,每个分组渲染一个独立
#### Scenario: 可用率列
- **WHEN** 表格渲染
- **THEN** 可用率列 SHALL 使用 TDesign Progress 组件theme=line, size=small渲染颜色通过 CSS 自定义属性 `--avail-N`(基于项目自定义色值)控制,每 10% 一档label 显示百分比数值支持排序升序优先最差排最前。color-threshold 函数 SHALL 返回 CSS 自定义属性引用而非硬编码色值
- **THEN** 可用率列标题 SHALL 展示为"可用率(24h)"(基于 Dashboard 默认 window=24h使用 TDesign Progress 组件theme=line, size=small渲染颜色通过 CSS 自定义属性 `--avail-N`(基于项目自定义色值)控制,每 10% 一档label 显示百分比数值,支持排序(升序优先,最差排最前)。前端 SHALL 使用 DashboardResponse.targets[].stats.availability 字段作为数据来源。color-threshold 函数 SHALL 返回 CSS 自定义属性引用而非硬编码色值
#### Scenario: 最近状态列
- **WHEN** 表格渲染
- **THEN** 最近状态列 SHALL 使用 StatusBar 组件渲染采样色块,宽度 220px。StatusBar SHALL 通过 CSS 类(`.status-bar-block--up` / `.status-bar-block--down` / `.status-bar-block--empty`)控制色块颜色,不使用内联 style
#### Scenario: 连续状态列渲染
- **WHEN** 表格渲染
- **THEN** 表格 SHALL 在「最近状态」列之后、「延迟」列之前展示「连续状态」列,标题为"连续",宽度 100px
#### Scenario: 连续正常展示
- **WHEN** 目标 currentStreak 为 `{ up: true, count: N }`
- **THEN** 列 SHALL 使用 TDesign Tag 组件theme=success, variant=light, size=small展示 "▲ N次"
#### Scenario: 连续异常展示
- **WHEN** 目标 currentStreak 为 `{ up: false, count: N }`
- **THEN** 列 SHALL 使用 TDesign Tag 组件theme=danger, variant=light, size=small展示 "▼ N次"
#### Scenario: 连续状态数据来源
- **WHEN** 表格需要渲染连续状态
- **THEN** 前端 SHALL 使用 DashboardResponse.targets[].currentStreak 字段,不在表格列中自行遍历 recentSamples 计算核心指标
#### Scenario: 超过样本上限
- **WHEN** currentStreak.capped 为 true
- **THEN** 列 SHALL 展示 "▲ N+" 或 "▼ N+"
#### Scenario: 无样本数据
- **WHEN** 目标 currentStreak 为 null
- **THEN** 列 SHALL 展示 "-"
#### Scenario: 延迟列
- **WHEN** 表格渲染
- **THEN** 延迟列 SHALL 显示最近一次检查的延迟毫秒数,右对齐。颜色 SHALL 通过 CSS 类实现≤100ms 使用 `.latency-ok`、100-500ms 使用 `.latency-warn`、>500ms 使用 `.latency-error`。无数据 SHALL 使用 `.text-disabled` 类显示 "-",数值 SHALL 使用 `.tabular-nums` 类等宽显示。不使用内联 style