refactor: 全面重构前端 Dashboard 为 TDesign + TanStack Query 分组表格布局

- 卡片式布局改为分组 PrimaryTable，Modal 改为 Drawer
- 手写 hooks 替换为 TanStack Query（轮询/缓存/条件查询）
- CSS 607行精简至73行，颜色迁移至 TDesign tokens
- 可用率进度条颜色按 10% 一档红→绿渐变
- 新增纯函数测试 34 项全通过（排序/筛选/色阶阈值）
- 同步更新主 specs 并归档变更文档

openspec/specs/card-dashboard/spec.md

@@ -1,98 +1,81 @@
 ## Purpose
 
-定义 Dashboard 的卡片式分组布局：按分组展示目标卡片、响应式网格、卡片内容结构和交互行为。
+定义 Dashboard 的分组表格布局：按分组展示目标表格行、TDesign PrimaryTable 列定义、排序筛选、行交互和 DOWN 行视觉强化。
 
 ## Requirements
 
 ### Requirement: 分组卡片布局
-Dashboard SHALL 按分组展示所有拨测目标，每个分组包含带统计的分组标题和固定宽度的卡片网格。
+Dashboard SHALL 按 group 字段将目标分组，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable 表格。
 
 #### Scenario: 按分组展示目标
 - **WHEN** 用户打开 Dashboard 页面
-- **THEN** 页面 SHALL 按分组展示目标卡片，"默认分组" 排在最上面，其余分组按 YAML 配置顺序排列
+- **THEN** 页面 SHALL 按 group 字段将目标分组展示，"default" 分组排在最上面，其余分组按 YAML 配置顺序排列
 
-#### Scenario: 分组标题带统计徽章
+#### Scenario: 分组标题带统计标签
 - **WHEN** 页面渲染某个分组
-- **THEN** 分组标题 SHALL 显示分组名称和三个徽章：总数（蓝色）、正常数（绿色）、异常数（红色），徽章仅显示数字
+- **THEN** 分组标题 SHALL 使用 TDesign Space + Tag 组件显示分组名称和三个标签：总数（theme=primary, variant=light）、正常数（theme=success, variant=light）、异常数（theme=danger, variant=light），标签仅显示数字
 
-#### Scenario: 分组统计徽章提示
-- **WHEN** 鼠标悬停在分组统计徽章上
-- **THEN** 徽章 SHALL 显示提示文字（"总数"、"正常"、"异常"）
+#### Scenario: 分组统计标签提示
+- **WHEN** 鼠标悬停在分组统计标签上
+- **THEN** 标签 SHALL 通过 TDesign Tag 的 title 属性显示提示文字（"总数"、"正常"、"异常"）
 
 #### Scenario: "default" 分组显示名称
 - **WHEN** 分组名称为 "default"
 - **THEN** 分组标题 SHALL 显示 "默认分组"
 
 ### Requirement: 响应式卡片网格
-Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器无最大宽度限制。
+Dashboard SHALL 使用 TDesign PrimaryTable 展示每个分组的目标，表格宽度自适应容器。
 
 #### Scenario: Dashboard 容器占满宽度
 - **WHEN** 用户打开 Dashboard 页面
 - **THEN** Dashboard 容器 SHALL 占满浏览器宽度，不设置 max-width 限制
 
-#### Scenario: 卡片固定宽度
-- **WHEN** 页面渲染卡片（包括 Summary Cards 和 Target Cards）
-- **THEN** 每个卡片 SHALL 固定宽度 280px，使用 CSS 变量 `--dashboard-card-width` 统一控制
-
-#### Scenario: 流动式布局
+#### Scenario: 表格自适应宽度
 - **WHEN** 视口宽度变化
-- **THEN** 卡片网格 SHALL 使用 Flexbox wrap 自动换行，根据可用宽度调整单行卡片数量
+- **THEN** 每个分组的 PrimaryTable SHALL 自适应容器宽度，不设置固定宽度
 
-#### Scenario: 卡片左对齐
-- **WHEN** 页面渲染卡片网格
-- **THEN** 卡片 SHALL 左对齐排列，右侧自然留白
-
-#### Scenario: 统一间距
-- **WHEN** 页面渲染 Summary Cards 和 Target Cards
-- **THEN** 两种卡片网格 SHALL 使用相同的 gap 间距（16px）
+#### Scenario: 分组间统一间距
+- **WHEN** 页面渲染多个分组
+- **THEN** 分组之间 SHALL 使用 TDesign Space 组件（direction=vertical, size=32px）统一间距
 
 ### Requirement: 目标卡片内容
-每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线，采用垂直三层布局。
+每个分组的目标 SHALL 以 TDesign PrimaryTable 行的形式展示，包含状态、名称、类型、可用率、最近状态条、延迟和间隔 7 列。
 
-#### Scenario: 卡片第一层内容
-- **WHEN** 卡片渲染
-- **THEN** 卡片第一层 SHALL 展示状态指示圆点（UP 绿色 / DOWN 红色）、目标名称和类型标签（HTTP / CMD）
+#### Scenario: 状态列渲染
+- **WHEN** 表格行渲染
+- **THEN** 状态列 SHALL 使用 StatusDot 组件渲染指示圆点，matched=true 显示绿色（--td-success-color），matched=false 显示红色（--td-error-color），宽度 80px，fixed="left"，居中对齐
 
-#### Scenario: 卡片名称完整提示
-- **WHEN** 目标名称过长被截断显示
-- **THEN** 鼠标悬停在名称上 SHALL 通过浏览器原生 tooltip 显示完整名称
+#### Scenario: 名称列渲染
+- **WHEN** 表格行渲染
+- **THEN** 名称列 SHALL 显示目标名称，超长名称自动省略（ellipsis）并通过 Tooltip 显示全名
 
-#### Scenario: 卡片状态指示圆点
-- **WHEN** 目标最近一次拨测 matched=true
-- **THEN** 卡片状态圆点 SHALL 显示为绿色
-- **WHEN** 目标最近一次拨测 matched=false
-- **THEN** 卡片状态圆点 SHALL 显示为红色
+#### Scenario: 类型列渲染
+- **WHEN** 表格行渲染
+- **THEN** 类型列 SHALL 使用 TDesign Tag 组件（size=small, theme=primary, variant=light-outline）显示类型名称，宽度 80px
 
-#### Scenario: 卡片第二层状态条
-- **WHEN** 卡片渲染且 recentSamples 数据可用
-- **THEN** 卡片第二层 SHALL 独占一行展示状态条，包含 30 个色块，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#e5484d），无数据显示灰色（#e2e8f0）
+#### Scenario: 可用率列渲染
+- **WHEN** 表格行渲染
+- **THEN** 可用率列 SHALL 使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色按可用率数值每 10% 一档：0-10% 最红（#d54941），每升高 10% 色阶偏移一档，经过橙色区间，90-100% 最绿（#3dba60），宽度 160px
 
-#### Scenario: 卡片第三层迷你耗时趋势线
-- **WHEN** 卡片渲染且 recentSamples 中有 durationMs 数据
-- **THEN** 卡片第三层 SHALL 独占一行展示基于 recharts 的迷你折线图，宽度占满卡片内容区（约 238px），高度 40px，展示最近 30 次检查的耗时趋势
+#### Scenario: 最近状态列渲染
+- **WHEN** 表格行渲染且 recentSamples 数据可用
+- **THEN** 最近状态列 SHALL 使用 StatusBar 组件展示 30 个色块，色块颜色使用 TDesign tokens：UP 使用 --td-success-color、DOWN 使用 --td-error-color、无数据使用 --td-bg-color-component-disabled，宽度 220px
 
-#### Scenario: 卡片垂直布局间距
-- **WHEN** 卡片渲染
-- **THEN** 卡片三层之间 SHALL 使用 12px 的间距（gap）
+#### Scenario: 延迟列渲染
+- **WHEN** 表格行渲染
+- **THEN** 延迟列 SHALL 显示最近一次检查的延迟毫秒数，右对齐，颜色根据阈值变化：≤100ms 绿色、100-500ms 橙色、>500ms 红色，无数据显示"-"，宽度 80px
+
+#### Scenario: 间隔列渲染
+- **WHEN** 表格行渲染
+- **THEN** 间隔列 SHALL 显示检查间隔（如 "5s"、"30s"），居中对齐，宽度 72px
 
 ### Requirement: 卡片交互
-卡片 SHALL 支持 hover 效果和点击打开模态框。
+表格行 SHALL 支持 hover 效果和点击打开 Drawer。
 
-#### Scenario: 卡片 hover 效果
-- **WHEN** 鼠标悬停在卡片上
-- **THEN** 卡片 SHALL 显示上浮效果（阴影加深）
+#### Scenario: 行 hover 效果
+- **WHEN** 鼠标悬停在表格行上
+- **THEN** 行 SHALL 显示 TDesign Table 内建的 hover 高亮效果
 
-#### Scenario: 卡片点击打开详情
-- **WHEN** 用户点击某个目标卡片
-- **THEN** 系统 SHALL 打开该目标的详情模态框
-
-### Requirement: 平滑过渡动画
-卡片 SHALL 具有平滑的交互过渡动画效果。
-
-#### Scenario: 卡片悬停动画
-- **WHEN** 鼠标悬停在卡片上
-- **THEN** 卡片 SHALL 平滑过渡显示上浮效果（阴影加深、轻微上移），过渡时长 0.3s
-
-#### Scenario: 布局变化过渡
-- **WHEN** 视口宽度变化导致卡片重新排列
-- **THEN** 卡片位置变化 SHALL 有平滑的过渡动画
+#### Scenario: 行点击打开详情
+- **WHEN** 用户点击某个目标表格行
+- **THEN** 系统 SHALL 打开该目标的详情 Drawer