refactor: 优化卡片显示一致性与可扩展性
- 统一 Summary Cards 和 Target Cards 宽度为 280px(CSS 变量控制) - 分组统计改为徽章展示(纯数字 + 颜色区分) - 目标名称添加 title 属性支持显示完整名称 - 建立类型映射系统,Command 显示为 CMD,支持扩展 - 移除移动端响应式代码,简化维护 - 新增 target-type-display 能力规格 - 更新 card-dashboard 和 target-detail-modal 规格
This commit is contained in:
@@ -11,9 +11,13 @@ Dashboard SHALL 按分组展示所有拨测目标,每个分组包含带统计
|
||||
- **WHEN** 用户打开 Dashboard 页面
|
||||
- **THEN** 页面 SHALL 按分组展示目标卡片,"默认分组" 排在最上面,其余分组按 YAML 配置顺序排列
|
||||
|
||||
#### Scenario: 分组标题带统计
|
||||
#### Scenario: 分组标题带统计徽章
|
||||
- **WHEN** 页面渲染某个分组
|
||||
- **THEN** 分组标题 SHALL 显示分组名称、该分组内目标总数、正常数和异常数,格式为 `分组名 (N个, X UP / Y DOWN)`
|
||||
- **THEN** 分组标题 SHALL 显示分组名称和三个徽章:总数(蓝色)、正常数(绿色)、异常数(红色),徽章仅显示数字
|
||||
|
||||
#### Scenario: 分组统计徽章提示
|
||||
- **WHEN** 鼠标悬停在分组统计徽章上
|
||||
- **THEN** 徽章 SHALL 显示提示文字("总数"、"正常"、"异常")
|
||||
|
||||
#### Scenario: "default" 分组显示名称
|
||||
- **WHEN** 分组名称为 "default"
|
||||
@@ -28,7 +32,7 @@ Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局,容器
|
||||
|
||||
#### Scenario: 卡片固定宽度
|
||||
- **WHEN** 页面渲染卡片(包括 Summary Cards 和 Target Cards)
|
||||
- **THEN** 每个卡片 SHALL 固定宽度 270px,使用 `flex-shrink: 0` 防止收缩
|
||||
- **THEN** 每个卡片 SHALL 固定宽度 280px,使用 CSS 变量 `--dashboard-card-width` 统一控制
|
||||
|
||||
#### Scenario: 流动式布局
|
||||
- **WHEN** 视口宽度变化
|
||||
@@ -47,7 +51,11 @@ Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局,容器
|
||||
|
||||
#### Scenario: 卡片第一层内容
|
||||
- **WHEN** 卡片渲染
|
||||
- **THEN** 卡片第一层 SHALL 展示状态指示圆点(UP 绿色 / DOWN 红色)、目标名称和类型标签(HTTP / Command)
|
||||
- **THEN** 卡片第一层 SHALL 展示状态指示圆点(UP 绿色 / DOWN 红色)、目标名称和类型标签(HTTP / CMD)
|
||||
|
||||
#### Scenario: 卡片名称完整提示
|
||||
- **WHEN** 目标名称过长被截断显示
|
||||
- **THEN** 鼠标悬停在名称上 SHALL 通过浏览器原生 tooltip 显示完整名称
|
||||
|
||||
#### Scenario: 卡片状态指示圆点
|
||||
- **WHEN** 目标最近一次拨测 matched=true
|
||||
|
||||
Reference in New Issue
Block a user