lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
f48e39a6156e9e4dbab2f0441e2583472671566d
DiAL/openspec/specs/target-table/spec.md
lanyuanxiaoyao f48e39a615 refactor: 全面重构前端 Dashboard 为 TDesign + TanStack Query 分组表格布局 
- 卡片式布局改为分组 PrimaryTable，Modal 改为 Drawer
- 手写 hooks 替换为 TanStack Query（轮询/缓存/条件查询）
- CSS 607行精简至73行，颜色迁移至 TDesign tokens
- 可用率进度条颜色按 10% 一档红→绿渐变
- 新增纯函数测试 34 项全通过（排序/筛选/色阶阈值）
- 同步更新主 specs 并归档变更文档
2026-05-12 01:06:53 +08:00

4.4 KiB
Raw Blame History

Purpose

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

Requirements

Requirement: 分组表格展示

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

Scenario: 按分组渲染独立表格

  • WHEN 用户打开 Dashboard 页面
  • THEN 页面 SHALL 按 group 字段将目标分组，每个分组包含带统计的分组标题和一个独立 PrimaryTable

Scenario: 分组顺序

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

Scenario: 分组标题统计标签

  • WHEN 页面渲染某个分组的标题
  • THEN 标题 SHALL 使用 TDesign Tag 组件显示分组名称和三个统计标签：总数（theme=primary, variant=light）、正常数（theme=success, variant=light）、异常数（theme=danger, variant=light）

Scenario: "default" 分组显示名称

  • WHEN 分组名称为 "default"
  • THEN 分组标题 SHALL 显示 "默认分组"

Requirement: 表格列定义

每个分组的 PrimaryTable SHALL 包含状态、名称、类型、可用率、最近状态条、延迟、间隔 7 列，不含分组列（同组内冗余）。

Scenario: 状态列

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

Scenario: 名称列

  • WHEN 表格渲染
  • THEN 名称列 SHALL 显示目标名称，支持字母排序（zh-CN），ellipsis 超长名称自动省略并 Tooltip 显示全名

Scenario: 类型列

  • WHEN 表格渲染
  • THEN 类型列 SHALL 使用 TDesign Tag 组件（size=small, theme=primary, variant=light-outline）显示类型名称，支持单选筛选

Scenario: 可用率列

  • WHEN 表格渲染
  • THEN 可用率列 SHALL 使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色按可用率数值每 10% 一档：0-10% 最红（#d54941），每升高 10% 色阶偏移一档，经过橙色区间，90-100% 最绿（#3dba60），label 显示百分比数值，支持排序（升序优先，最差排最前）

Scenario: 最近状态列

  • WHEN 表格渲染
  • THEN 最近状态列 SHALL 使用 StatusBar 组件渲染 30 格采样色块，宽度 220px，色块使用 flex:1 自适应列宽

Scenario: 延迟列

  • WHEN 表格渲染
  • THEN 延迟列 SHALL 显示最近一次检查的延迟毫秒数，右对齐，颜色根据阈值变化：≤100ms 使用 --td-success-color、100-500ms 使用 --td-warning-color、>500ms 使用 --td-error-color，无数据显示"-"，支持数值排序

Scenario: 间隔列

  • WHEN 表格渲染
  • THEN 间隔列 SHALL 显示检查间隔（如 "5s"、"30s"），居中对齐，宽度 72px

Requirement: 默认排序

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

Scenario: 页面初始排序

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

Requirement: DOWN 行视觉强化

表格中状态为 DOWN 的行 SHALL 具有视觉区分。

Scenario: DOWN 行背景色

  • WHEN 目标最近一次检查 matched=false
  • THEN 该行 SHALL 使用浅红色背景（--td-error-color-light），与正常行形成视觉区分

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 统一外观。

Scenario: 表格样式

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

Requirement: 列定义复用

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

Scenario: 列定义提取为常量

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