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

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

openspec/specs/probe-dashboard/spec.md

@@ -1,57 +1,57 @@
 ## Purpose
 
-定义拨测系统的 React 前端 Dashboard：统计卡片、按分组卡片式布局、状态条和迷你趋势线可视化、目标详情模态框和时间范围筛选。
+定义拨测系统的 React 前端 Dashboard：TDesign Statistic 统计卡片、按分组表格布局、目标详情 Drawer、TanStack Query 数据轮询和页面加载/错误状态。
 
 ## Requirements
 
 ### Requirement: 总览统计卡片
-Dashboard SHALL 在页面顶部展示总览统计卡片，包含总目标数、正常数和异常数。
+Dashboard SHALL 在页面顶部使用 TDesign Statistic 组件展示总览统计，包含总目标数、正常数和异常数。
 
 #### Scenario: 展示统计卡片
 - **WHEN** 用户打开 Dashboard 页面
-- **THEN** 页面顶部 SHALL 显示 3 个统计卡片：全部目标数、正常目标数、异常目标数
+- **THEN** 页面顶部 SHALL 使用 TDesign Row/Col 布局展示 3 个 TDesign Card + Statistic 组合：全部目标数（color=blue）、正常目标数（color=green）、异常目标数（color=red）
 
 #### Scenario: 统计数据自动刷新
 - **WHEN** 页面处于打开状态
-- **THEN** 统计卡片 SHALL 每 5-10 秒自动刷新数据
+- **THEN** 统计卡片 SHALL 通过 TanStack Query 的 refetchInterval=8000 自动刷新数据
 
 ### Requirement: 卡片式分组布局
-Dashboard SHALL 使用按分组展示的卡片式布局替代表格布局，每个分组包含带统计的分组标题和响应式卡片网格。
+Dashboard SHALL 使用按分组展示的表格布局，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable。
 
-> 卡片布局、响应式网格、卡片内容和交互的详细规范见 `card-dashboard`。
+> 表格列定义、排序、筛选、行交互的详细规范见 `target-table`。
 
-#### Scenario: 按分组渲染卡片
+#### Scenario: 按分组渲染表格
 - **WHEN** 用户打开 Dashboard 页面
-- **THEN** 页面 SHALL 按 group 字段将目标分组展示，每组一个区域，"默认分组" 排在最上面
+- **THEN** 页面 SHALL 按 group 字段将目标分组展示，每组一个 PrimaryTable，"default" 分组排在最上面
 
 #### Scenario: 无分组时的展示
 - **WHEN** 所有目标均属于 "default" 分组
-- **THEN** 页面 SHALL 显示一个 "默认分组" 区域，卡片正常展示
+- **THEN** 页面 SHALL 显示一个 "默认分组" 区域，表格正常展示
 
-### Requirement: 目标详情模态框
-Dashboard SHALL 提供模态框展示目标详情，包含时间范围筛选、多维统计图和分页检查记录列表。
+### Requirement: 目标详情 Drawer
+Dashboard SHALL 使用 TDesign Drawer 展示目标详情，包含时间范围筛选、Tabs 组织的统计图表和分页检查记录列表。
 
-> 模态框的时间范围筛选、统计图表、检查结果列表和布局的详细规范见 `target-detail-modal`。
+> Drawer 的时间范围筛选、Tabs 面板内容、检查结果列表的详细规范见 `target-detail-drawer`。
 
-#### Scenario: 打开模态框
-- **WHEN** 用户点击某个目标卡片
-- **THEN** 系统 SHALL 弹出模态框，占据视口 80% 宽度，展示该目标的详情
+#### Scenario: 打开 Drawer
+- **WHEN** 用户点击某个目标表格行
+- **THEN** 系统 SHALL 从右侧滑出 Drawer（placement="right", size="60%"），展示该目标的详情
 
-#### Scenario: 关闭模态框
-- **WHEN** 用户点击模态框关闭按钮或模态框外部区域
-- **THEN** 模态框 SHALL 关闭
+#### Scenario: 关闭 Drawer
+- **WHEN** 用户点击 Drawer 关闭按钮、ESC 键或遮罩层
+- **THEN** Drawer SHALL 关闭
 
 ### Requirement: 页面加载与错误状态
-Dashboard SHALL 正确处理加载状态和 API 错误，适配卡片式布局。
+Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。
 
 #### Scenario: 首次加载
 - **WHEN** 页面首次加载且数据尚未返回
-- **THEN** 页面 SHALL 显示加载状态指示
+- **THEN** 表格 SHALL 显示 TDesign Loading 加载状态
 
 #### Scenario: API 请求失败
-- **WHEN** 前端轮询 API 请求失败
-- **THEN** 页面 SHALL 显示错误提示，并在下一次轮询周期自动重试
+- **WHEN** 前端 API 请求失败
+- **THEN** 页面 SHALL 使用 TDesign Alert 组件（theme=error）显示错误提示
 
-#### Scenario: 模态框内部加载状态
-- **WHEN** 模态框内趋势数据或历史记录正在加载
-- **THEN** 对应图表或列表区域 SHALL 显示加载指示
+#### Scenario: Drawer 内部加载状态
+- **WHEN** Drawer 内趋势数据或历史记录正在加载
+- **THEN** 趋势面板 SHALL 显示 TDesign Skeleton 加载占位，记录表格 SHALL 显示 loading 状态