65 lines
4.7 KiB
Markdown
65 lines
4.7 KiB
Markdown
## 1. 后端：配置与类型
|
||
|
||
- [x] 1.1 types.ts: BaseTargetConfig 新增 group?: string, ResolvedTarget 新增 group: string
|
||
- [x] 1.2 config-loader.ts: 解析 group 字段（默认 "default"）
|
||
- [x] 1.3 shared/api.ts: 新增 RecentSample 接口和 HistoryResponse 接口，移除 SummaryResponse.avgDurationMs，移除 TargetStats.avgDurationMs 和 TargetStats.p99DurationMs，TargetStatus 中 sparkline 替换为 recentSamples: RecentSample[]，新增 group: string
|
||
- [x] 1.4 编写 config-loader 的 group 解析校验测试
|
||
|
||
## 2. 后端：数据存储
|
||
|
||
- [x] 2.1 store.ts: targets 表新增 grp 列（ALTER TABLE 或重建建表语句），syncTargets 写入 grp 值
|
||
- [x] 2.2 store.ts: 新增 getRecentSamples(targetId, limit) 方法替代 getSparkline，返回包含 timestamp/duration_ms/success/matched 的结构化数据
|
||
- [x] 2.3 store.ts: getTrend 改用 from/to 时间范围参数替代 hours
|
||
- [x] 2.4 store.ts: getHistory 改用 from/to 时间范围 + page/pageSize 分页参数，返回 { items, total, page, pageSize }
|
||
- [x] 2.5 store.ts: getTargets 排序改为 ORDER BY CASE WHEN grp='default' THEN 0 ELSE 1 END, grp, id
|
||
- [x] 2.6 store.ts: getSummary 移除 avgDurationMs 计算逻辑
|
||
- [x] 2.7 store.ts: 移除 getSparkline 方法
|
||
- [x] 2.8 编写 store 的新增/变更方法的完整测试
|
||
|
||
## 3. 后端：API 路由
|
||
|
||
- [x] 3.1 app.ts: createSummaryResponse 移除 avgDurationMs 字段
|
||
- [x] 3.2 app.ts: createTargetsResponse 返回 group 和 recentSamples 替代 sparkline，移除 stats 中的 avgDurationMs 和 p99DurationMs
|
||
- [x] 3.3 app.ts: handleTrend 改用 from/to 查询参数（替代 hours），校验参数格式
|
||
- [x] 3.4 app.ts: handleHistory 改用 from/to + page/pageSize 参数，返回 HistoryResponse 结构（含 total）
|
||
- [x] 3.5 app.ts: 移除 mapCheckResult 中已不需要的字段映射
|
||
- [x] 3.6 编写 API 路由的测试，覆盖 from/to 参数校验、分页参数校验、recentSamples 返回结构
|
||
|
||
## 4. 前端：组件重构
|
||
|
||
- [x] 4.1 新增 StatusBar 组件：渲染 recentSampleCount 个色块（UP 绿/DOWN 红/无数据灰）
|
||
- [x] 4.2 改造 SparklineChart 为 MiniSparkline：接收 RecentSample[] 数据，提取 durationMs 绘制迷你折线图
|
||
- [x] 4.3 新增 GroupHeader 组件：显示分组名称和统计信息（分组名 (N个, X UP / Y DOWN)），default 显示"默认分组"
|
||
- [x] 4.4 新增 TargetCard 组件：固定 280px 宽，行1 为 StatusDot + 名称 + 类型标签，行2 为 StatusBar + MiniSparkline，hover 上浮效果，点击触发回调
|
||
- [x] 4.5 新增 CardGrid 组件：CSS Grid auto-fill 280px 响应式布局，接收 targets 数组渲染 TargetCard
|
||
- [x] 4.6 新增 TargetGroup 组件：组合 GroupHeader + CardGrid，接收分组名和该组 targets
|
||
- [x] 4.7 新增 TargetBoard 组件：接收 targets 数组，前端按 group 分组，顺序渲染 TargetGroup
|
||
- [x] 4.8 新增 StatusDonut 组件：基于 recharts PieChart 实现环形图，中间显示可用率百分比，外圈 UP/DOWN 比例
|
||
- [x] 4.9 新增 TimeRangePicker 组件：快捷按钮（1h/6h/24h/7d）+ 分钟精度日期选择器，联动逻辑
|
||
- [x] 4.10 新增 Pagination 组件：显示页码按钮，支持翻页回调
|
||
- [x] 4.11 新增 TargetDetailModal 组件：模态框布局（80% 视口宽），筛选栏 + 左侧图表区（40%）+ 右侧列表区（60%），组合 TrendChart/StatusDonut/Pagination
|
||
- [x] 4.12 改造 TrendChart：适配 from/to 参数的时间范围，替代 hours
|
||
- [x] 4.13 改造 app.tsx：SummaryCards 从 4 卡片改为 3 卡片，TargetTable 替换为 TargetBoard，模态框状态管理
|
||
- [x] 4.14 移除 TargetTable、TargetRow、旧版 TargetDetail 组件
|
||
|
||
## 5. 前端：Hooks 与数据层
|
||
|
||
- [x] 5.1 新增 useTargetDetail hook：管理模态框状态，封装 trend + history 的并行请求逻辑
|
||
- [x] 5.2 改造 useTrend hook：改用 from/to 参数请求 trend API
|
||
- [x] 5.3 新增 useHistory hook：使用 from/to + page/pageSize 请求 history API，返回 HistoryResponse 结构
|
||
|
||
## 6. 前端：样式
|
||
|
||
- [x] 6.1 重写 styles.css：移除表格相关样式，新增卡片样式（280px 固定宽、圆角、阴影）、分组样式、模态框样式（backdrop + 居中 + 左右分栏）、StatusBar 样式（色块）、TimeRangePicker 样式、Pagination 样式、响应式媒体查询
|
||
- [x] 6.2 SummaryCards grid 改为 repeat(3, 1fr)
|
||
|
||
## 7. 文档与配置示例
|
||
|
||
- [x] 7.1 更新 probes.example.yaml：新增 group 字段示例
|
||
- [x] 7.2 更新 README.md：配置说明新增 group，API 端点变更说明，项目结构更新组件列表
|
||
|
||
## 8. 质量保障
|
||
|
||
- [x] 8.1 执行 bun run check（typecheck + lint + format:check + 单元测试），修复所有问题
|
||
- [x] 8.2 执行 bun run verify（check + build + smoke test），确保构建产物正常运行
|