39 lines
3.5 KiB
Markdown
39 lines
3.5 KiB
Markdown
## Why
|
||
|
||
当前 Dashboard 使用表格列表展示所有拨测目标，缺乏分组组织能力，无法直观反映目标的归属关系和批量状态。表格内联展开的详情面板信息密度低、交互不流畅。需要重构为卡片式布局，引入分组概念，并通过模态框提供更丰富的详情查看体验。同时移除全局平均耗时统计（跨分组平均耗时无实际意义），并优化 API 以支持时间范围筛选和分页。
|
||
|
||
## What Changes
|
||
|
||
- **BREAKING**: 将前端从表格布局重构为按分组展示的卡片式布局，每个卡片固定宽度，响应式排列
|
||
- **BREAKING**: target 配置新增可选 `group` 字段，未指定时默认为 `"default"`，default 分组排最前
|
||
|
||
- **BREAKING**: 点击卡片弹出模态框替代内联展开详情，模态框左侧展示多维统计图（可用率趋势、耗时趋势、状态分布环形图），右侧展示带分页的检查结果列表
|
||
- **BREAKING**: 模态框支持时间范围筛选，包含快捷按钮（1h/6h/24h/7d）和自定义日期时间选择器（分钟精度）
|
||
- **BREAKING**: API 接口变更：sparkline 替换为 recentSamples（包含状态信息）；trend/history 支持 `from/to` 时间范围参数；history 支持分页
|
||
- **BREAKING**: 移除 SummaryResponse.avgDurationMs 及相关计算逻辑，SummaryCards 从 4 个变为 3 个（全部/正常/异常）
|
||
- **BREAKING**: 移除 TargetStats.avgDurationMs 和 TargetStats.p99DurationMs，这些统计仅在模态框详情中按需展示
|
||
|
||
## Capabilities
|
||
|
||
### New Capabilities
|
||
|
||
- `target-grouping`: target 分组能力，包括 YAML 配置的 group 字段、后端存储与 API 返回、前端按分组展示（带统计的分组标题）
|
||
- `card-dashboard`: 卡片式 Dashboard 布局，包括分组卡片网格、卡片内状态条和迷你 sparkline 双可视化、卡片点击交互
|
||
- `target-detail-modal`: 目标详情模态框，包括时间范围筛选器（快捷按钮 + 分钟精度日期选择器）、左侧多维统计图（可用率趋势折线、耗时趋势折线、状态分布环形图）、右侧分页检查结果列表
|
||
|
||
### Modified Capabilities
|
||
|
||
- `probe-config`: 新增 `targets[].group` 可选字段
|
||
- `probe-api`: API 端点变更——summary 移除 avgDurationMs；targets 返回 group 和 recentSamples 替代 sparkline；trend 改用 from/to 参数替代 hours；history 改用 from/to + page/pageSize 并返回带分页信息的结构
|
||
- `probe-data-store`: targets 表新增 grp 列存储分组信息；新增 getRecentSamples 方法替代 getSparkline；trend/history 查询改用时间范围参数；history 查询支持分页；移除 avgDurationMs 相关聚合
|
||
- `probe-dashboard`: 全面重构前端组件，从表格布局改为卡片式分组布局；SummaryCards 减为 3 个；TargetTable/TargetRow/TargetDetail 替换为 TargetBoard/TargetCard/TargetDetailModal 等
|
||
|
||
## Impact
|
||
|
||
- **配置文件**: `probes.example.yaml` 需更新示例，新增 group 字段示例
|
||
- **后端**: `types.ts`、`config-loader.ts`、`store.ts`、`app.ts` 需修改；targets 表需 schema migration
|
||
- **共享类型**: `src/shared/api.ts` 需修改（新增 RecentSample、HistoryResponse 类型，移除/修改部分字段）
|
||
- **前端**: 组件全面重构，新增 StatusBar、GroupHeader、StatusDonut、TimeRangePicker、Pagination 等组件；CSS 样式全面重写
|
||
- **测试**: 后端测试需覆盖新 API 参数和返回结构，前端测试需更新
|
||
- **依赖**: 不引入新依赖，全部使用现有 recharts 库
|