## 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 库