lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
0d709c7681a23964f64e782df7c121cf50c9e722
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

172 lines
7.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## 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