DiAL/openspec/changes/enhance-frontend-metrics/tasks.md

1. 共享类型与数据层

• 1.1 扩展 src/shared/api.ts：SummaryResponse 增加 incidents24h；TrendPoint 增加 upChecks/minDurationMs/maxDurationMs；新增 TargetStatsResponse 类型
• 1.2 ProbeStore 修改 getAllTargetStats(from?, to?) 和 getTargetStats(targetId, from?, to?) 增加时间窗口参数，默认 24h
• 1.3 ProbeStore 修改 getTrend SQL 增加 MIN/MAX duration_ms 和 upChecks 聚合字段
• 1.4 ProbeStore 新增 getIncidents24h() 独立方法，使用 LAG 窗口函数统计所有目标的状态翻转次数
• 1.5 ProbeStore 新增 getTargetDurations(targetId, from, to) 方法，返回成功检查的 duration_ms 升序数组
• 1.6 ProbeStore 新增 getCheckSequence(targetId, from, to) 方法，返回检查序列用于故障分析
• 1.7 编写 ProbeStore 新增/修改方法的单元测试

2. 后端 API 路由

• 2.1 修改 src/server/routes/summary.ts：调用 store.getIncidents24h()，响应增加 incidents24h 字段
• 2.2 修改 src/server/routes/targets.ts：解析 ?window=24h 查询参数，转换为时间范围传递给 getAllTargetStats(from, to)，缺省默认 24h
• 2.3 修改 src/server/routes/trend.ts：响应增加 upChecks/minDurationMs/maxDurationMs 字段
• 2.4 新增 src/server/routes/stats.ts：实现 GET /api/targets/:id/stats?from=&to= 端点，应用层计算 P95/P99、MTTR、最长故障、故障次数、连续状态
• 2.5 在 src/server/server.ts 路由注册中挂载 stats 路由
• 2.6 编写 stats 路由的集成测试（含 P95 计算、MTTR 计算、窗口边界截断、无数据等边界情况）
• 2.7 编写 summary/targets/trend 路由修改的测试更新

3. 前端工具函数

• 3.1 删除 src/web/utils/stats.ts 中的 computeTrendStats 函数（不再有调用方）
• 3.2 新增连续状态计算工具函数 getConsecutiveStatus(samples: RecentSample[]): { up: boolean; count: number }
• 3.3 新增时间格式化工具函数：相对时间（X秒前/X分钟前）、动态单位（ms→秒/分钟/小时）
• 3.4 编写工具函数的单元测试

4. 前端数据层

• 4.1 修改 src/web/hooks/use-queries.ts：useTargets 请求改为 /api/targets?window=24h，后端解析 window 参数转换为时间范围
• 4.2 新增 useTargetStats hook（queryKey: ["stats", targetId, from, to]，enabled 依赖 targetId 存在）
• 4.3 修改 use-target-detail.ts：集成 useTargetStats 调用，复用现有 timeFrom/timeTo 状态

5. 前端组件 — Summary Cards

• 5.1 修改 SummaryCards.tsx：从 3 列（span=4）扩展为 4 列（span=3），新增 24h 异常事件数卡片（color=orange）
• 5.2 在 SummaryCards 底部增加 lastCheckTime 相对时间展示（useState + setInterval 每秒更新），超过 60 秒变警告色

6. 前端组件 — Target Table

• 6.1 修改 target-table-columns.tsx：可用率列标题改为"可用率(24h)"
• 6.2 修改 target-table-columns.tsx：在「最近状态」列后新增「连续」列（width=100），使用 TDesign Tag（theme=success/danger, variant=light, size=small）渲染 "▲ N次" / "▼ N次"

7. 前端组件 — Drawer 概览

• 7.1 修改 OverviewTab.tsx：props 增加 statsData/statsLoading；删除 computeTrendStats 调用；统计区重构为 2×4 Statistic 布局，数据来自 statsData
• 7.2 修改 OverviewTab.tsx：StatusDonut 数据来源改为 statsData.upChecks / statsData.downChecks
• 7.3 修改 TrendChart.tsx：移除右侧 Y 轴和 availability Line；增加 Area 组件渲染 min/max 延迟范围（半透明品牌色填充）；avgDurationMs Line 的 dot 回调对 availability < 100 的点渲染红色圆点
• 7.4 修改 TargetDetailDrawer.tsx：TIME_SHORTCUTS 保持 1h/6h/24h/7d 四个选项，默认选中 24h
• 7.5 修改 TargetDetailDrawer.tsx：集成 useTargetStats，传递 statsData/statsLoading 给 OverviewTab

8. 质量保障

• 8.1 运行完整测试套件，确保所有测试通过
• 8.2 运行 lint 和格式检查，修复所有问题