lanyuanxiaoyao
f48e39a615
- 卡片式布局改为分组 PrimaryTable，Modal 改为 Drawer - 手写 hooks 替换为 TanStack Query（轮询/缓存/条件查询） - CSS 607行精简至73行，颜色迁移至 TDesign tokens - 可用率进度条颜色按 10% 一档红→绿渐变 - 新增纯函数测试 34 项全通过（排序/筛选/色阶阈值） - 同步更新主 specs 并归档变更文档
100 lines
4.2 KiB
Markdown
100 lines
4.2 KiB
Markdown
## Purpose
|
||
|
||
定义目标详情 Drawer：时间范围筛选（TDesign RadioGroup + DateRangePicker）、Tabs 组织概览/趋势/记录三个面板、统计图表和分页检查结果列表。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 目标详情 Drawer
|
||
Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。
|
||
|
||
#### Scenario: 打开 Drawer
|
||
- **WHEN** 用户点击某个目标表格行
|
||
- **THEN** 系统 SHALL 从右侧滑出 Drawer（placement="right"），宽度为视口 60%
|
||
|
||
#### Scenario: Drawer 标题栏
|
||
- **WHEN** Drawer 渲染
|
||
- **THEN** 标题栏 SHALL 显示 StatusDot、目标名称和类型标签（TDesign Tag），以及内建关闭按钮
|
||
|
||
#### Scenario: 关闭 Drawer
|
||
- **WHEN** 用户点击关闭按钮、ESC 键或遮罩层
|
||
- **THEN** Drawer SHALL 关闭
|
||
|
||
#### Scenario: Drawer 数据同步
|
||
- **WHEN** Drawer 打开期间后台轮询刷新了 targets 数据
|
||
- **THEN** Drawer 中 selectedTarget 的状态 SHALL 随之同步更新
|
||
|
||
### Requirement: 时间范围选择器
|
||
Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览/趋势/记录三个面板的数据。
|
||
|
||
#### Scenario: 快捷时间按钮
|
||
- **WHEN** Drawer 渲染
|
||
- **THEN** 时间选择区 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1h、6h、24h、7d
|
||
|
||
#### Scenario: 点击快捷按钮
|
||
- **WHEN** 用户点击快捷按钮（如 "24h"）
|
||
- **THEN** 系统 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮
|
||
|
||
#### Scenario: 自定义日期时间范围
|
||
- **WHEN** 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker）修改时间范围
|
||
- **THEN** 快捷按钮 SHALL 取消高亮，系统重新请求对应时间范围的数据
|
||
|
||
#### Scenario: 默认时间范围
|
||
- **WHEN** Drawer 打开
|
||
- **THEN** 时间选择器 SHALL 默认选中 "24h" 快捷按钮
|
||
|
||
#### Scenario: 筛选触发数据刷新
|
||
- **WHEN** 时间范围发生变化
|
||
- **THEN** 系统 SHALL 重新请求趋势数据和历史记录
|
||
|
||
### Requirement: Tabs 内容组织
|
||
Drawer 内部 SHALL 使用 TDesign Tabs 组织概览、趋势、记录三个面板。
|
||
|
||
#### Scenario: Tab 标签
|
||
- **WHEN** Drawer 渲染
|
||
- **THEN** Tabs SHALL 显示三个标签：概览、趋势、记录
|
||
|
||
### Requirement: 概览面板
|
||
概览 Tab SHALL 展示目标统计摘要和基本信息。
|
||
|
||
#### Scenario: 统计数值卡片
|
||
- **WHEN** 概览面板渲染
|
||
- **THEN** 面板 SHALL 使用 TDesign Statistic 组件展示 4 个统计值：总检查（color=blue）、正常（color=green）、异常（color=red）、可用率（color=green, suffix="%"），使用 TDesign Row/Col 横向排列
|
||
|
||
#### Scenario: 元信息展示
|
||
- **WHEN** 概览面板渲染
|
||
- **THEN** 面板 SHALL 使用 TDesign Descriptions 组件展示目标元信息：目标地址、检查间隔、最新检查时间、状态详情
|
||
|
||
#### Scenario: 状态分布环形图
|
||
- **WHEN** 概览面板渲染
|
||
- **THEN** 面板 SHALL 展示 recharts 环形图（StatusDonut），外圈显示 UP/DOWN 比例，中间显示可用率百分比
|
||
|
||
### Requirement: 趋势面板
|
||
趋势 Tab SHALL 展示可用率和耗时趋势折线图。
|
||
|
||
#### Scenario: 趋势折线图
|
||
- **WHEN** 趋势面板渲染且数据可用
|
||
- **THEN** 面板 SHALL 展示 recharts 双 Y 轴折线图：耗时线（--td-brand-color）和可用率线（--td-success-color）
|
||
|
||
#### Scenario: 趋势数据加载中
|
||
- **WHEN** 趋势数据正在加载
|
||
- **THEN** 面板 SHALL 显示 TDesign Skeleton 加载占位
|
||
|
||
### Requirement: 记录面板
|
||
记录 Tab SHALL 展示分页检查结果列表，使用 TDesign PrimaryTable。
|
||
|
||
#### Scenario: 检查结果表格
|
||
- **WHEN** 记录面板渲染且数据可用
|
||
- **THEN** 面板 SHALL 使用 TDesign PrimaryTable 展示检查结果，列包含：状态（TDesign Tag theme=success/danger）、时间、详情、耗时、错误信息
|
||
|
||
#### Scenario: 服务端分页
|
||
- **WHEN** 检查结果总数超过一页
|
||
- **THEN** 表格 SHALL 使用内建 pagination（disableDataPage=true），分页器显示在表格底部
|
||
|
||
#### Scenario: 翻页触发请求
|
||
- **WHEN** 用户切换分页页码
|
||
- **THEN** 系统 SHALL 请求对应页码的服务端数据，表格更新
|
||
|
||
#### Scenario: 记录数据加载中
|
||
- **WHEN** 历史记录正在加载
|
||
- **THEN** 表格 SHALL 显示 loading 状态
|