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

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

openspec/specs/target-detail-modal/spec.md

@@ -1,87 +1,91 @@
 ## Purpose
 
-定义目标详情模态框：时间范围筛选（快捷按钮 + 日期选择器）、多维统计图（可用率趋势、耗时趋势、状态分布环形图）和分页检查结果列表。
+定义目标详情 Drawer：时间范围筛选（TDesign RadioGroup 快捷按钮 + DateRangePicker）、Tabs 组织概览/趋势/记录三个面板、统计图表和分页检查结果列表。
 
 ## Requirements
 
-### Requirement: 目标详情模态框
-Dashboard SHALL 在用户点击目标卡片后弹出模态框，展示该目标的详细统计图表和检查结果列表。
+### Requirement: 目标详情 Drawer
+Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计图表和检查结果列表。
 
-#### Scenario: 打开模态框
-- **WHEN** 用户点击某个目标卡片
-- **THEN** 系统 SHALL 弹出模态框，占据视口 80% 宽度，展示该目标的详情
+#### Scenario: 打开 Drawer
+- **WHEN** 用户点击某个目标表格行
+- **THEN** 系统 SHALL 从右侧滑出 Drawer（placement="right", size="60%"），展示该目标的详情
 
-#### Scenario: 模态框默认时间范围
-- **WHEN** 模态框打开
-- **THEN** 筛选器 SHALL 默认选中"最近 24 小时"
+#### Scenario: Drawer 默认时间范围
+- **WHEN** Drawer 打开
+- **THEN** 筛选器 SHALL 默认选中 "24h" 快捷按钮
 
-#### Scenario: 关闭模态框
-- **WHEN** 用户点击模态框关闭按钮或模态框外部区域
-- **THEN** 模态框 SHALL 关闭
+#### Scenario: 关闭 Drawer
+- **WHEN** 用户点击 Drawer 关闭按钮、ESC 键或遮罩层
+- **THEN** Drawer SHALL 关闭
 
 ### Requirement: 时间范围筛选
-模态框 SHALL 支持通过快捷按钮和自定义日期时间选择器筛选数据的时间范围。
+Drawer SHALL 支持通过 TDesign RadioGroup 快捷按钮和 DateRangePicker 筛选数据的时间范围。
 
 #### Scenario: 快捷时间范围按钮
-- **WHEN** 模态框渲染
-- **THEN** 筛选栏 SHALL 显示快捷按钮：1h、6h、24h、7d，当前选中的按钮高亮显示
+- **WHEN** Drawer 渲染
+- **THEN** 筛选栏 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1h、6h、24h、7d，当前选中的按钮高亮显示
 
 #### Scenario: 点击快捷按钮
 - **WHEN** 用户点击快捷按钮（如 "24h"）
-- **THEN** 筛选器 SHALL 自动设置对应的起止时间，日期选择器显示对应的时间范围，该按钮高亮
+- **THEN** 筛选器 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮
 
 #### Scenario: 自定义日期时间选择
-- **WHEN** 用户通过日期时间选择器修改起止时间（分钟精度）
+- **WHEN** 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker）修改起止时间
 - **THEN** 快捷按钮 SHALL 取消高亮，表示当前为自定义时间范围
 
 #### Scenario: 筛选触发数据刷新
 - **WHEN** 时间范围发生变化（快捷按钮或自定义选择）
-- **THEN** 系统 SHALL 重新请求该时间范围内的趋势数据和历史记录
+- **THEN** 系统 SHALL 通过 TanStack Query 重新请求该时间范围内的趋势数据和历史记录
 
 ### Requirement: 统计图表展示
-模态框图表区 SHALL 展示可用率趋势折线图、耗时趋势折线图和状态分布环形图。
+Drawer 概览和趋势面板 SHALL 展示统计数值、目标元信息和可用率趋势折线图、状态分布环形图。
+
+#### Scenario: 概览面板统计数值
+- **WHEN** 概览 Tab 加载完成
+- **THEN** 面板 SHALL 使用 TDesign Statistic 组件展示总检查、正常、异常、可用率四个数值，使用 TDesign Row/Col 横向排列
+
+#### Scenario: 概览面板元信息
+- **WHEN** 概览 Tab 加载完成
+- **THEN** 面板 SHALL 使用 TDesign Descriptions 组件展示目标地址、检查间隔、最新检查时间、状态详情
 
 #### Scenario: 可用率趋势折线图
-- **WHEN** 模态框加载完成且趋势数据可用
-- **THEN** 图表区 SHALL 展示可用率随时间变化的折线图，Y 轴为可用率百分比
-
-#### Scenario: 耗时趋势折线图
-- **WHEN** 模态框加载完成且趋势数据可用
-- **THEN** 图表区 SHALL 展示耗时随时间变化的折线图，Y 轴为耗时毫秒数
+- **WHEN** 趋势 Tab 加载完成且数据可用
+- **THEN** 面板 SHALL 展示 recharts 双 Y 轴折线图：耗时线颜色使用 --td-brand-color，可用率线颜色使用 --td-success-color
 
 #### Scenario: 状态分布环形图
-- **WHEN** 模态框加载完成
-- **THEN** 图表区 SHALL 展示环形图（Donut Chart），外圈显示 UP/DOWN 比例（绿色/红色），中间显示可用率百分比数字
+- **WHEN** 概览 Tab 加载完成
+- **THEN** 面板 SHALL 展示 recharts 环形图（Donut Chart），UP 颜色使用 --td-success-color，DOWN 颜色使用 --td-error-color，中间显示可用率百分比数字
 
 ### Requirement: 检查结果列表
-模态框检查记录列表 SHALL 展示当前筛选时间范围内的检查结果列表，支持分页浏览。
+Drawer 记录面板 SHALL 使用 TDesign PrimaryTable 展示检查结果，支持服务端分页。
 
 #### Scenario: 展示检查结果
-- **WHEN** 模态框加载完成且历史记录可用
-- **THEN** 检查记录列表 SHALL 展示检查结果，每条包含时间戳、UP/DOWN 状态标记、耗时毫秒数、statusDetail 和 failure 信息
+- **WHEN** 记录 Tab 加载完成且历史记录可用
+- **THEN** 表格 SHALL 展示检查结果，每条包含状态（TDesign Tag）、时间戳、statusDetail、耗时毫秒数和 failure 信息
 
 #### Scenario: 分页导航
 - **WHEN** 检查结果总数超过一页
-- **THEN** 列表底部 SHALL 展示分页器，用户可点击切换页码
+- **THEN** 表格底部 SHALL 展示内建 pagination 分页器（disableDataPage=true）
 
 #### Scenario: 翻页刷新
-- **WHEN** 用户点击分页器切换页码
-- **THEN** 系统 SHALL 请求对应页码的历史记录数据，列表更新
+- **WHEN** 用户切换分页页码
+- **THEN** 系统 SHALL 通过 TanStack Query 请求对应页码的历史记录数据，表格更新
 
-### Requirement: 模态框布局
-模态框 SHALL 采用自上而下布局，上方展示统计图表，下方展示检查记录列表。
+### Requirement: 内容组织布局
+Drawer SHALL 使用 TDesign Tabs 组织概览、趋势、记录三个面板。
 
-#### Scenario: 自上而下渲染
-- **WHEN** 模态框渲染
-- **THEN** 内容区域 SHALL 分为上下两部分，上方展示统计图表，下方展示检查结果列表和分页器
+#### Scenario: Tabs 组织内容
+- **WHEN** Drawer 渲染
+- **THEN** 内容区域 SHALL 使用 TDesign Tabs 组件分为概览、趋势、记录三个标签页
 
-### Requirement: 模态框标题栏类型标签
-模态框标题栏 SHALL 显示目标类型标签，使用统一的类型显示映射系统。
+### Requirement: 标题栏类型标签
+Drawer 标题栏 SHALL 显示目标类型标签，使用统一的类型显示映射系统。
 
 #### Scenario: 类型标签显示
-- **WHEN** 模态框标题栏渲染
-- **THEN** 标题栏 SHALL 在目标名称旁显示类型标签（HTTP / CMD）
+- **WHEN** Drawer 标题栏渲染
+- **THEN** 标题栏 SHALL 在目标名称旁显示 TDesign Tag 类型标签（HTTP / CMD）
 
 #### Scenario: 类型标签使用映射系统
-- **WHEN** 模态框渲染类型标签
+- **WHEN** Drawer 渲染类型标签
 - **THEN** 类型标签 SHALL 使用统一的类型显示映射函数，不硬编码映射逻辑