feat: 新增两个 OpenSpec 变更提案 — CMD Checker 增强与前端指标增强

openspec/changes/enhance-frontend-metrics/specs/target-detail-drawer/spec.md

@@ -0,0 +1,111 @@
+## MODIFIED Requirements
+
+### Requirement: 概览面板组件化
+概览 Tab SHALL 作为独立组件 `OverviewTab` 实现，展示多维度统计、趋势图、状态分布和基本信息。
+
+#### Scenario: OverviewTab 组件职责
+- **WHEN** 概览 Tab 渲染
+- **THEN** `OverviewTab` 组件 SHALL 负责多维度统计卡片（2×4 布局）、趋势图（延迟范围面积图+异常标记点）、状态分布环形图和基本信息的渲染
+
+#### Scenario: 统计计算不再使用 computeTrendStats
+- **WHEN** OverviewTab 需要 totalChecks、upChecks、downChecks
+- **THEN** SHALL 直接使用 statsData 中的 totalChecks、upChecks、downChecks 字段，`computeTrendStats` 工具函数 SHALL 被删除
+
+#### Scenario: OverviewTab props
+- **WHEN** OverviewTab 渲染
+- **THEN** 组件 SHALL 接收 `target: TargetStatus`、`trendData: TrendPoint[]`、`trendLoading: boolean`、`statsData: TargetStatsResponse | null`、`statsLoading: boolean` 作为 props
+
+### Requirement: 概览面板
+概览 Tab SHALL 按区域展示多维度统计、趋势图、状态分布和基本信息。
+
+#### Scenario: 区域排列顺序
+- **WHEN** 概览面板渲染
+- **THEN** 面板 SHALL 按以下顺序展示区域：统计 → 趋势 → 状态分布 → 基本信息，每个区域前 SHALL 显示 TDesign Divider（align="left"）作为小标题
+
+#### Scenario: 统计区多维度布局
+- **WHEN** 概览面板渲染
+- **THEN** 面板 SHALL 在"统计"区域使用 2 行 × 4 列的 TDesign Row/Col + Statistic 布局：第一行为可用率（suffix="%"）、平均延迟（suffix="ms"）、P95 延迟（suffix="ms"）、检查总数；第二行为 MTTR（动态单位）、最长故障（动态单位）、故障次数（suffix="次"）、连续正常（suffix="次"，固定标题"连续正常"，当目标当前处于异常状态时值为 0）
+
+#### Scenario: MTTR 和最长故障动态单位
+- **WHEN** MTTR 或最长故障值小于 60000ms
+- **THEN** SHALL 以秒为单位展示（suffix="秒"）
+- **WHEN** 值大于等于 60000ms 且小于 3600000ms
+- **THEN** SHALL 以分钟为单位展示（suffix="分钟"）
+- **WHEN** 值大于等于 3600000ms
+- **THEN** SHALL 以小时为单位展示（suffix="小时"）
+
+#### Scenario: 统计区数据来源
+- **WHEN** 统计区渲染
+- **THEN** 第一行数据 SHALL 来自 statsData（TargetStatsResponse），第二行数据同样来自 statsData
+
+#### Scenario: 统计区加载状态
+- **WHEN** statsData 正在加载
+- **THEN** 统计区 SHALL 显示 TDesign Skeleton 加载占位
+
+#### Scenario: 趋势图延迟范围面积
+- **WHEN** 概览面板渲染且趋势数据可用
+- **THEN** 趋势图 SHALL 使用 recharts Area 组件渲染 minDurationMs 到 maxDurationMs 的延迟范围（半透明品牌色填充），叠加 avgDurationMs 实线
+
+#### Scenario: 趋势图异常标记点
+- **WHEN** 趋势数据中某小时的 availability < 100
+- **THEN** 趋势图 SHALL 在 avgDurationMs 线上该时间点渲染红色圆点（fill: var(--td-error-color)），使用 recharts Line 的 dot 回调函数实现；图表 SHALL 仅保留左侧 Y 轴（ms），移除右侧 Y 轴（%）和 availability 折线
+
+#### Scenario: 趋势数据加载中
+- **WHEN** 概览面板渲染且趋势数据正在加载
+- **THEN** "趋势"区域 SHALL 显示 TDesign Skeleton 加载占位
+
+#### Scenario: 状态分布环形图
+- **WHEN** 概览面板渲染且 statsData 可用
+- **THEN** 面板 SHALL 在"状态分布"区域展示 recharts 环形图（StatusDonut），使用 statsData.upChecks 和 statsData.downChecks 作为数据源，外圈显示 UP/DOWN 比例，中间显示可用率百分比
+
+#### Scenario: 状态分布加载状态
+- **WHEN** statsData 正在加载
+- **THEN** 状态分布区域 SHALL 显示 TDesign Skeleton 加载占位
+
+#### Scenario: 元信息展示
+- **WHEN** 概览面板渲染
+- **THEN** 面板 SHALL 在"基本信息"区域使用 TDesign Descriptions 组件展示目标元信息：目标地址、检查间隔、最新检查时间、状态详情
+
+### Requirement: 时间范围选择器
+Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录两个面板的数据。时间选择器 SHALL 分两行显示：第一行为快捷按钮，第二行为日期时间范围选择器。
+
+#### Scenario: 快捷时间按钮
+- **WHEN** Drawer 渲染
+- **THEN** 时间选择区第一行 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1小时、6小时、24小时、7天
+
+#### Scenario: 点击快捷按钮
+- **WHEN** 用户点击快捷按钮（如 "24小时"）
+- **THEN** 系统 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮
+
+#### Scenario: 快捷按钮联动统计区
+- **WHEN** 用户点击 1小时/6小时/24小时/7天 快捷按钮
+- **THEN** 统计区和趋势图 SHALL 使用对应的时间窗口重新请求 `/api/targets/:id/stats` 和 `/api/targets/:id/trend` 数据
+
+#### Scenario: 自定义日期时间范围
+- **WHEN** 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker, format="YYYY-MM-DD HH:mm"）修改时间范围
+- **THEN** 快捷按钮 SHALL 取消高亮，系统重新请求对应时间范围的数据
+
+#### Scenario: 默认时间范围
+- **WHEN** Drawer 打开
+- **THEN** 时间选择器 SHALL 默认选中 "24小时" 快捷按钮
+
+## ADDED Requirements
+
+### Requirement: Stats 数据查询 Hook
+系统 SHALL 提供 `useTargetStats` hook 查询单目标深度统计数据。
+
+#### Scenario: stats queryKey
+- **WHEN** 查询某目标的统计数据
+- **THEN** queryKey SHALL 为 ["stats", targetId, from, to]
+
+#### Scenario: stats 条件查询
+- **WHEN** 用户未选中任何目标
+- **THEN** stats 的 useQuery SHALL enabled=false，不发起请求
+
+#### Scenario: stats 数据返回
+- **WHEN** stats 查询成功
+- **THEN** hook SHALL 返回 `TargetStatsResponse` 类型数据
+
+#### Scenario: 时间范围变化时重新请求
+- **WHEN** 用户更改时间范围
+- **THEN** stats 的 useQuery SHALL 因 queryKey 变化自动重新请求