## 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 和格式检查,修复所有问题