lanyuanxiaoyao
767f26617e
- 统一 Summary Cards 和 Target Cards 宽度为 280px（CSS 变量控制） - 分组统计改为徽章展示（纯数字 + 颜色区分） - 目标名称添加 title 属性支持显示完整名称 - 建立类型映射系统，Command 显示为 CMD，支持扩展 - 移除移动端响应式代码，简化维护 - 新增 target-type-display 能力规格 - 更新 card-dashboard 和 target-detail-modal 规格
88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
## Purpose
|
||
|
||
定义目标详情模态框：时间范围筛选（快捷按钮 + 日期选择器）、多维统计图（可用率趋势、耗时趋势、状态分布环形图）和分页检查结果列表。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 目标详情模态框
|
||
Dashboard SHALL 在用户点击目标卡片后弹出模态框，展示该目标的详细统计图表和检查结果列表。
|
||
|
||
#### Scenario: 打开模态框
|
||
- **WHEN** 用户点击某个目标卡片
|
||
- **THEN** 系统 SHALL 弹出模态框，占据视口 80% 宽度，展示该目标的详情
|
||
|
||
#### Scenario: 模态框默认时间范围
|
||
- **WHEN** 模态框打开
|
||
- **THEN** 筛选器 SHALL 默认选中"最近 24 小时"
|
||
|
||
#### Scenario: 关闭模态框
|
||
- **WHEN** 用户点击模态框关闭按钮或模态框外部区域
|
||
- **THEN** 模态框 SHALL 关闭
|
||
|
||
### Requirement: 时间范围筛选
|
||
模态框 SHALL 支持通过快捷按钮和自定义日期时间选择器筛选数据的时间范围。
|
||
|
||
#### Scenario: 快捷时间范围按钮
|
||
- **WHEN** 模态框渲染
|
||
- **THEN** 筛选栏 SHALL 显示快捷按钮：1h、6h、24h、7d，当前选中的按钮高亮显示
|
||
|
||
#### Scenario: 点击快捷按钮
|
||
- **WHEN** 用户点击快捷按钮（如 "24h"）
|
||
- **THEN** 筛选器 SHALL 自动设置对应的起止时间，日期选择器显示对应的时间范围，该按钮高亮
|
||
|
||
#### Scenario: 自定义日期时间选择
|
||
- **WHEN** 用户通过日期时间选择器修改起止时间（分钟精度）
|
||
- **THEN** 快捷按钮 SHALL 取消高亮，表示当前为自定义时间范围
|
||
|
||
#### Scenario: 筛选触发数据刷新
|
||
- **WHEN** 时间范围发生变化（快捷按钮或自定义选择）
|
||
- **THEN** 系统 SHALL 重新请求该时间范围内的趋势数据和历史记录
|
||
|
||
### Requirement: 统计图表展示
|
||
模态框图表区 SHALL 展示可用率趋势折线图、耗时趋势折线图和状态分布环形图。
|
||
|
||
#### Scenario: 可用率趋势折线图
|
||
- **WHEN** 模态框加载完成且趋势数据可用
|
||
- **THEN** 图表区 SHALL 展示可用率随时间变化的折线图，Y 轴为可用率百分比
|
||
|
||
#### Scenario: 耗时趋势折线图
|
||
- **WHEN** 模态框加载完成且趋势数据可用
|
||
- **THEN** 图表区 SHALL 展示耗时随时间变化的折线图，Y 轴为耗时毫秒数
|
||
|
||
#### Scenario: 状态分布环形图
|
||
- **WHEN** 模态框加载完成
|
||
- **THEN** 图表区 SHALL 展示环形图（Donut Chart），外圈显示 UP/DOWN 比例（绿色/红色），中间显示可用率百分比数字
|
||
|
||
### Requirement: 检查结果列表
|
||
模态框检查记录列表 SHALL 展示当前筛选时间范围内的检查结果列表，支持分页浏览。
|
||
|
||
#### Scenario: 展示检查结果
|
||
- **WHEN** 模态框加载完成且历史记录可用
|
||
- **THEN** 检查记录列表 SHALL 展示检查结果，每条包含时间戳、UP/DOWN 状态标记、耗时毫秒数、statusDetail 和 failure 信息
|
||
|
||
#### Scenario: 分页导航
|
||
- **WHEN** 检查结果总数超过一页
|
||
- **THEN** 列表底部 SHALL 展示分页器，用户可点击切换页码
|
||
|
||
#### Scenario: 翻页刷新
|
||
- **WHEN** 用户点击分页器切换页码
|
||
- **THEN** 系统 SHALL 请求对应页码的历史记录数据，列表更新
|
||
|
||
### Requirement: 模态框布局
|
||
模态框 SHALL 采用自上而下布局，上方展示统计图表，下方展示检查记录列表。
|
||
|
||
#### Scenario: 自上而下渲染
|
||
- **WHEN** 模态框渲染
|
||
- **THEN** 内容区域 SHALL 分为上下两部分，上方展示统计图表，下方展示检查结果列表和分页器
|
||
|
||
### Requirement: 模态框标题栏类型标签
|
||
模态框标题栏 SHALL 显示目标类型标签，使用统一的类型显示映射系统。
|
||
|
||
#### Scenario: 类型标签显示
|
||
- **WHEN** 模态框标题栏渲染
|
||
- **THEN** 标题栏 SHALL 在目标名称旁显示类型标签（HTTP / CMD）
|
||
|
||
#### Scenario: 类型标签使用映射系统
|
||
- **WHEN** 模态框渲染类型标签
|
||
- **THEN** 类型标签 SHALL 使用统一的类型显示映射函数，不硬编码映射逻辑
|