lanyuanxiaoyao
767f26617e
- 统一 Summary Cards 和 Target Cards 宽度为 280px（CSS 变量控制） - 分组统计改为徽章展示（纯数字 + 颜色区分） - 目标名称添加 title 属性支持显示完整名称 - 建立类型映射系统，Command 显示为 CMD，支持扩展 - 移除移动端响应式代码，简化维护 - 新增 target-type-display 能力规格 - 更新 card-dashboard 和 target-detail-modal 规格
99 lines
4.3 KiB
Markdown
99 lines
4.3 KiB
Markdown
## Purpose
|
||
|
||
定义 Dashboard 的卡片式分组布局：按分组展示目标卡片、响应式网格、卡片内容结构和交互行为。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 分组卡片布局
|
||
Dashboard SHALL 按分组展示所有拨测目标，每个分组包含带统计的分组标题和固定宽度的卡片网格。
|
||
|
||
#### Scenario: 按分组展示目标
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面 SHALL 按分组展示目标卡片，"默认分组" 排在最上面，其余分组按 YAML 配置顺序排列
|
||
|
||
#### Scenario: 分组标题带统计徽章
|
||
- **WHEN** 页面渲染某个分组
|
||
- **THEN** 分组标题 SHALL 显示分组名称和三个徽章：总数（蓝色）、正常数（绿色）、异常数（红色），徽章仅显示数字
|
||
|
||
#### Scenario: 分组统计徽章提示
|
||
- **WHEN** 鼠标悬停在分组统计徽章上
|
||
- **THEN** 徽章 SHALL 显示提示文字（"总数"、"正常"、"异常"）
|
||
|
||
#### Scenario: "default" 分组显示名称
|
||
- **WHEN** 分组名称为 "default"
|
||
- **THEN** 分组标题 SHALL 显示 "默认分组"
|
||
|
||
### Requirement: 响应式卡片网格
|
||
Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器无最大宽度限制。
|
||
|
||
#### Scenario: Dashboard 容器占满宽度
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** Dashboard 容器 SHALL 占满浏览器宽度，不设置 max-width 限制
|
||
|
||
#### Scenario: 卡片固定宽度
|
||
- **WHEN** 页面渲染卡片（包括 Summary Cards 和 Target Cards）
|
||
- **THEN** 每个卡片 SHALL 固定宽度 280px，使用 CSS 变量 `--dashboard-card-width` 统一控制
|
||
|
||
#### Scenario: 流动式布局
|
||
- **WHEN** 视口宽度变化
|
||
- **THEN** 卡片网格 SHALL 使用 Flexbox wrap 自动换行，根据可用宽度调整单行卡片数量
|
||
|
||
#### Scenario: 卡片左对齐
|
||
- **WHEN** 页面渲染卡片网格
|
||
- **THEN** 卡片 SHALL 左对齐排列，右侧自然留白
|
||
|
||
#### Scenario: 统一间距
|
||
- **WHEN** 页面渲染 Summary Cards 和 Target Cards
|
||
- **THEN** 两种卡片网格 SHALL 使用相同的 gap 间距（16px）
|
||
|
||
### Requirement: 目标卡片内容
|
||
每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线，采用垂直三层布局。
|
||
|
||
#### Scenario: 卡片第一层内容
|
||
- **WHEN** 卡片渲染
|
||
- **THEN** 卡片第一层 SHALL 展示状态指示圆点（UP 绿色 / DOWN 红色）、目标名称和类型标签（HTTP / CMD）
|
||
|
||
#### Scenario: 卡片名称完整提示
|
||
- **WHEN** 目标名称过长被截断显示
|
||
- **THEN** 鼠标悬停在名称上 SHALL 通过浏览器原生 tooltip 显示完整名称
|
||
|
||
#### Scenario: 卡片状态指示圆点
|
||
- **WHEN** 目标最近一次拨测 matched=true
|
||
- **THEN** 卡片状态圆点 SHALL 显示为绿色
|
||
- **WHEN** 目标最近一次拨测 matched=false
|
||
- **THEN** 卡片状态圆点 SHALL 显示为红色
|
||
|
||
#### Scenario: 卡片第二层状态条
|
||
- **WHEN** 卡片渲染且 recentSamples 数据可用
|
||
- **THEN** 卡片第二层 SHALL 独占一行展示状态条，包含 30 个色块，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#e5484d），无数据显示灰色（#e2e8f0）
|
||
|
||
#### Scenario: 卡片第三层迷你耗时趋势线
|
||
- **WHEN** 卡片渲染且 recentSamples 中有 durationMs 数据
|
||
- **THEN** 卡片第三层 SHALL 独占一行展示基于 recharts 的迷你折线图，宽度占满卡片内容区（约 238px），高度 40px，展示最近 30 次检查的耗时趋势
|
||
|
||
#### Scenario: 卡片垂直布局间距
|
||
- **WHEN** 卡片渲染
|
||
- **THEN** 卡片三层之间 SHALL 使用 12px 的间距（gap）
|
||
|
||
### Requirement: 卡片交互
|
||
卡片 SHALL 支持 hover 效果和点击打开模态框。
|
||
|
||
#### Scenario: 卡片 hover 效果
|
||
- **WHEN** 鼠标悬停在卡片上
|
||
- **THEN** 卡片 SHALL 显示上浮效果（阴影加深）
|
||
|
||
#### Scenario: 卡片点击打开详情
|
||
- **WHEN** 用户点击某个目标卡片
|
||
- **THEN** 系统 SHALL 打开该目标的详情模态框
|
||
|
||
### Requirement: 平滑过渡动画
|
||
卡片 SHALL 具有平滑的交互过渡动画效果。
|
||
|
||
#### Scenario: 卡片悬停动画
|
||
- **WHEN** 鼠标悬停在卡片上
|
||
- **THEN** 卡片 SHALL 平滑过渡显示上浮效果（阴影加深、轻微上移），过渡时长 0.3s
|
||
|
||
#### Scenario: 布局变化过渡
|
||
- **WHEN** 视口宽度变化导致卡片重新排列
|
||
- **THEN** 卡片位置变化 SHALL 有平滑的过渡动画
|