DiAL/openspec/specs/probe-dashboard/spec.md at 1c5cfafda639f0e9ca254732687e3fee2a69b660

Files

lanyuanxiaoyao 1c5cfafda6 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 并归档变更

2026-05-14 12:32:41 +08:00

3.6 KiB

Raw Blame History

Purpose

定义拨测系统前端 Dashboard 页面：总览统计卡片（含数据新鲜度）、Dashboard 数据查询、页面标题、加载和错误状态处理。分组表格布局见 target-table，目标详情 Drawer 见 target-detail-drawer，数据轮询和缓存见 tanstack-query-data-layer。

Requirements

Requirement: Dashboard 数据查询

Dashboard SHALL 通过 GET /api/dashboard 获取首屏总览统计和目标列表数据。

Scenario: 查询 Dashboard 数据

WHEN 页面处于打开状态
THEN 前端 SHALL 使用 TanStack Query 请求 GET /api/dashboard?window=24h&recentLimit=30

Scenario: 统计数据自动刷新

WHEN 页面处于打开状态
THEN Dashboard 数据 SHALL 通过 TanStack Query 的 refetchInterval=8000 自动刷新

Scenario: 元信息独立查询

WHEN 页面需要 checker 类型列表
THEN 前端 SHALL 继续通过 GET /api/meta 独立查询 checkerTypes

Requirement: 总览统计卡片

Dashboard SHALL 在页面顶部使用 TDesign Statistic 组件展示总览统计，包含总目标数、正常数、异常数和窗口异常事件数，并展示数据新鲜度。

Scenario: 展示统计卡片

WHEN 用户打开 Dashboard 页面
THEN 页面顶部 SHALL 使用 TDesign Row/Col 布局展示 4 个 TDesign Card + Statistic 组合：全部目标数（color=blue）、正常目标数（color=green）、异常目标数（color=red）、24h 异常事件数（color=orange）

Scenario: 异常事件数据来源

WHEN SummaryCards 渲染 24h 异常事件数
THEN 该数值 SHALL 使用 DashboardResponse.summary.incidents 字段，标题 SHALL 基于当前 window 展示为"24h 异常事件数"

Scenario: 展示数据新鲜度

WHEN Summary 数据包含 lastCheckTime
THEN 统计卡片行底部 SHALL 展示相对时间文本（如"最后更新: 3秒前"），使用 TDesign Typography.Text（theme="secondary"）

Scenario: 数据新鲜度警告

WHEN lastCheckTime 距当前时间超过 60 秒
THEN 相对时间文本 SHALL 使用警告色（--td-warning-color）

Scenario: 无检查时间

WHEN Summary 数据 lastCheckTime 为 null
THEN 数据新鲜度 SHALL 展示为"尚无检查数据"或等价占位文本

Requirement: 页面标题

Dashboard 页面 SHALL 使用 TDesign Typography 组件渲染标题和副标题。

Scenario: 页面标题渲染

WHEN Dashboard 页面渲染
THEN 页面标题 SHALL 使用 TDesign Typography.Title 组件（level="h1"）渲染"DiAL"，副标题 SHALL 使用 Typography.Text 组件（theme="secondary"）渲染"统一拨测平台"

Requirement: 页面加载与错误状态

Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。

Scenario: 首次加载

WHEN 页面首次加载且数据尚未返回
THEN 表格 SHALL 显示 TDesign Loading 加载状态

Scenario: API 请求失败

WHEN 前端 API 请求失败
THEN 页面 SHALL 使用 TDesign Alert 组件（theme=error）显示错误提示

Requirement: 前端构建产物拆分

前端生产构建 SHALL 将 vendor 依赖拆分为独立 chunk，利用浏览器并行加载和长期缓存。

Scenario: vendor chunk 拆分

WHEN 执行前端生产构建
THEN 构建产物 SHALL 包含独立的 vendor chunk（react、tdesign、recharts 各自独立），而非单个 bundle

Scenario: 业务代码变更不影响 vendor 缓存

WHEN 仅修改业务代码（src/web/ 下非 node_modules 文件）并重新构建
THEN vendor chunk 的文件名（含 hash）SHALL 保持不变，浏览器缓存 SHALL 继续有效

3.6 KiB Raw Blame History Unescape Escape