DiAL/openspec/changes/archive/2026-05-11-card-ui-refactor/proposal.md

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 库