112 lines
5.9 KiB
Markdown
112 lines
5.9 KiB
Markdown
## 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 变化自动重新请求
|