lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
b591dcca97d8364971b841c070af254b235b9748
DiAL/openspec/specs/target-table/spec.md
lanyuanxiaoyao 9b53c746f6 refactor: ICMP checker type 从 ping 统一改为 icmp，修复前端 UI 细节 
- ICMP checker 的 type/configKey/YAML 配置键/接口属性名从 ping 改为 icmp
- IcmpChecker 添加 platform 构造函数注入，修复 Windows 测试兼容性
- 前端 target 表格延迟列优化：标题简化为「延迟」，单位下移到单元格，宽度 80px
- Drawer 概览页 Descriptions 添加 tableLayout=auto 收窄 label 宽度
- 同步更新 README.md、DEVELOPMENT.md、probes.example.yaml、JSON Schema 和全部测试
2026-05-20 00:02:23 +08:00

7.9 KiB
Raw Blame History

Purpose

定义分组表格的列配置、排序、筛选、行交互和 DOWN 行视觉强化。

Requirements

Requirement: 分组表格展示

Dashboard SHALL 按 group 字段将目标分组，每个分组使用 TDesign Card 包裹独立的 PrimaryTable，分组间使用 TDesign Space 垂直排列。

Scenario: 按分组渲染独立表格

  • WHEN 用户打开 Dashboard 页面
  • THEN 页面 SHALL 按 group 字段将目标分组，每个分组使用 TDesign Card 组件包裹，Card 内包含一个 PrimaryTable

Scenario: 分组 Card 标题

  • WHEN 页面渲染某个分组
  • THEN Card 的 title prop SHALL 渲染分组名称（"default" 显示为 "默认分组"），Card 的 actions prop SHALL 渲染统计 Tag：正常数（theme=success, variant=light）和异常数（theme=danger, variant=light）

Scenario: 分组 Card 样式

  • WHEN 页面渲染分组 Card
  • THEN Card SHALL 设置 headerBordered 在标题和表格之间显示分割线

Scenario: 分组顺序

  • WHEN 页面渲染多个分组
  • THEN "default" 分组 SHALL 排在最上面，其余分组按 YAML 配置中首次出现的顺序排列

Scenario: "default" 分组显示名称

  • WHEN 分组名称为 "default"
  • THEN Card title SHALL 显示 "默认分组"

Scenario: Dashboard 容器最大宽度

  • WHEN 用户打开 Dashboard 页面
  • THEN Dashboard 内容区 SHALL 设置 max-width: 1400px 并水平居中

Scenario: 分组间统一间距

  • WHEN 页面渲染多个分组
  • THEN 分组之间 SHALL 使用 TDesign Space 组件（direction=vertical, size=24）统一间距

Requirement: 表格列定义

每个分组的 PrimaryTable SHALL 包含状态、名称、类型、可用率、最近状态条、连续状态、延迟 7 列（不含间隔列）。列渲染不使用内联 style。列定义 SHALL 通过工厂函数动态生成。

Scenario: 状态列

  • WHEN 表格渲染
  • THEN 状态列 SHALL 使用 StatusDot 组件渲染，标题显示"#"，宽度 60px，fixed="left"，居中对齐，支持筛选（UP/DOWN/全部）

Scenario: 名称列

  • WHEN 表格渲染
  • THEN 名称列 SHALL 显示目标展示名称，取值为 target.name ?? target.id，ellipsis 超长名称自动省略并 Tooltip 显示全名，且 SHALL NOT 支持排序

Scenario: name 为 null 的名称列

  • WHEN 表格渲染某个 target.name 为 null 的目标
  • THEN 名称列 SHALL 显示该目标的 target.id

Scenario: 类型列

  • WHEN 表格渲染
  • THEN 类型列 SHALL 使用 TDesign Tag 组件（size=small, theme=primary, variant=light-outline）直接显示 target.type 原始文本，支持单选筛选

Scenario: 类型筛选器动态生成

  • WHEN 表格渲染
  • THEN 类型列的筛选器列表 SHALL 从 meta API 返回的 checkerTypes 动态生成，包含"全部"选项和每个 checker 类型选项（label 和 value 均为 type 原始文本）

Scenario: 可用率列

  • WHEN 表格渲染
  • THEN 可用率列标题 SHALL 展示为"可用率(24h)"，使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色通过 CSS 自定义属性 --avail-N 控制，支持排序

Scenario: 最近状态列

  • WHEN 表格渲染
  • THEN 最近状态列 SHALL 使用 StatusBar 组件渲染采样色块，宽度 220px

Scenario: 连续状态列渲染

  • WHEN 表格渲染
  • THEN 表格 SHALL 在「最近状态」列之后、「延迟」列之前展示「连续状态」列，标题为"连续(次)"，宽度 88px，Tag 内显示方向箭头和数字（capped 时追加"+"）

Scenario: 延迟列

  • WHEN 表格渲染
  • THEN 延迟列标题 SHALL 展示为"延迟"，宽度 SHALL 为 80px，单元格 SHALL 显示最近一次检查的延迟数值并附加 " ms" 后缀（如 "156 ms"），右对齐，颜色通过 CSS 类控制；超过 9999ms 时 SHALL 显示为"9999+ ms"

Scenario: 间隔列移除

  • WHEN 表格渲染
  • THEN 表格 SHALL 不包含"间隔"列（间隔信息移入 Drawer 基本信息区域）

Requirement: 列定义工厂函数

列定义 SHALL 通过工厂函数生成，接收动态参数。

Scenario: createTargetTableColumns 函数

  • WHEN 需要生成表格列定义
  • THEN 系统 SHALL 调用 createTargetTableColumns(checkerTypes: string[]) 函数，返回 PrimaryTableCol<TargetStatus>[]

Scenario: checkerTypes 为空数组

  • WHEN meta API 尚未返回或返回空数组
  • THEN 类型列的筛选器 SHALL 仅包含"全部"选项

Scenario: 列定义缓存

  • WHEN TargetBoard 组件渲染
  • THEN 列定义 SHALL 通过 useMemo 缓存，仅在 checkerTypes 变化时重新生成

Requirement: TargetGroup 接收 columns prop

TargetGroup 组件 SHALL 通过 prop 接收列定义，不再直接导入静态常量。

Scenario: columns prop

  • WHEN TargetGroup 渲染
  • THEN 组件 SHALL 接收 columns: PrimaryTableCol<TargetStatus>[] prop 并传递给 PrimaryTable

Scenario: TargetBoard 传递 columns

  • WHEN TargetBoard 渲染子组件
  • THEN TargetBoard SHALL 调用 createTargetTableColumns 生成列定义并传递给每个 TargetGroup

Requirement: 默认排序

表格 SHALL 默认按状态降序排列，异常（DOWN）目标排在最前面。

Scenario: 页面初始排序

  • WHEN 用户打开 Dashboard 页面
  • THEN 每个分组表格 SHALL 默认按状态降序排列，DOWN 目标排在同组最前面

Requirement: DOWN 行视觉强化

表格中状态为 DOWN 的行 SHALL 具有视觉区分，包含背景色和左侧竖线。

Scenario: DOWN 行背景色

  • WHEN 目标最近一次检查 matched=false
  • THEN 该行 SHALL 通过 CSS 选择器获得浅红色背景

Scenario: DOWN 行左侧竖线

  • WHEN 目标最近一次检查 matched=false
  • THEN 该行 SHALL 通过 CSS 选择器获得左侧 3px 红色竖线（border-left: 3px solid var(--td-error-color)）

Scenario: DOWN 行 hover 状态

  • WHEN 鼠标悬停在 DOWN 行上
  • THEN 行背景 SHALL 显示 hover 状态色，与正常行 hover 效果协调

Requirement: 行点击交互

表格行 SHALL 支持点击打开目标详情 Drawer。

Scenario: 点击行打开 Drawer

  • WHEN 用户点击某一行
  • THEN 系统 SHALL 打开该目标的详情 Drawer

Scenario: 行 hover 效果

  • WHEN 鼠标悬停在表格行上
  • THEN 行 SHALL 显示 hover 高亮效果（TDesign Table hover prop）

Scenario: 行 cursor 样式

  • WHEN 鼠标悬停在表格行上
  • THEN cursor SHALL 显示为 pointer

Requirement: 表格外观

表格 SHALL 使用 TDesign PrimaryTable 统一外观，不设置 bordered（由外层 Card 提供边界）。

Scenario: 表格样式

  • WHEN 表格渲染
  • THEN 表格 SHALL 设置 size="small"、stripe、hover，不设置 bordered

Requirement: StatusBar Tooltip 交互

StatusBar 色块 SHALL 在 hover 时通过 TDesign Tooltip 展示时间和状态信息。组件 props 类型 SHALL 使用完整的 RecentSample 类型（包含 timestamp 字段）而非简化的 { up: boolean }。

Scenario: StatusBar props 类型变更

  • WHEN StatusBar 组件接收 samples 数据
  • THEN 组件 SHALL 接收 Array<RecentSample> 类型（包含 timestamp、durationMs、up 字段），而非简化的 Array<{ up: boolean }> 类型

Scenario: 有数据色块 Tooltip

  • WHEN 鼠标悬停在有数据的色块上
  • THEN 色块 SHALL 通过 TDesign Tooltip（placement="top"）展示该采样点的时间（使用 formatRelativeTime 格式化）和状态（正常/异常）

Scenario: 空色块无 Tooltip

  • WHEN 鼠标悬停在空色块（empty）上
  • THEN 色块 SHALL 不显示 Tooltip

Requirement: 列定义复用

所有分组的表格 SHALL 共享同一套列定义。

Scenario: 列定义提取为常量

  • WHEN 多个分组表格渲染
  • THEN 列定义 SHALL 从独立的 constants/target-table-columns.tsx 导入，不在组件中重复定义
View Git Blame Copy Permalink