refactor: 全面重构前端样式，消除内联 style 和硬编码色值，统一 TDesign 规范

- 重写 styles.css：CSS 变量化可用率色阶、状态色类、工具类、安全选择器
- 组件改造：StatusDot/StatusBar/TargetDetailDrawer/GroupHeader 等改用 CSS 类和 Typography
- color-threshold 移除 getLatencyColor 死代码，保留 getAvailabilityProgressColor 返回 CSS 变量
- target-table-columns 状态列和延迟列切换为 CSS 类
- 新增 css-utility-classes spec，更新 4 个 main specs（probe/card/table/drawer）
- README 和 config.yaml 写入前端样式开发规范

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

@@ -5,7 +5,7 @@
 ## Requirements
 
 ### Requirement: 目标详情 Drawer
-Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。
+Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。Drawer 标题栏和内容不使用内联 style。
 
 #### Scenario: 打开 Drawer
 - **WHEN** 用户点击某个目标表格行
@@ -13,7 +13,7 @@ Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示
 
 #### Scenario: Drawer 标题栏
 - **WHEN** Drawer 渲染
-- **THEN** 标题栏 SHALL 显示 StatusDot、目标名称和类型标签（TDesign Tag），以及内建关闭按钮
+- **THEN** 标题栏 SHALL 使用 TDesign Space 组件（align="center"）布局，包含 StatusDot、目标名称（TDesign Typography.Text strong）和类型标签（TDesign Tag），以及内建关闭按钮。不使用内联 style 的 flex 布局
 
 #### Scenario: 关闭 Drawer
 - **WHEN** 用户点击关闭按钮、ESC 键或遮罩层
@@ -31,6 +31,10 @@ Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示
 - **WHEN** 用户从目标 A 切换到目标 B（点击不同的表格行）
 - **THEN** Drawer SHALL 重置为概览 Tab，使用 key={target.id} 确保组件状态不残留
 
+#### Scenario: Drawer 内容区间距
+- **WHEN** Drawer 内容渲染
+- **THEN** 时间选择器、Tabs 等区块之间的间距 SHALL 通过 TDesign Space 组件（direction="vertical", size={16}）统一管理，不使用内联 style 的 marginBottom
+
 ### Requirement: 时间范围选择器
 Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录两个面板的数据。时间选择器 SHALL 分两行显示：第一行为快捷按钮，第二行为日期时间范围选择器。
 
@@ -52,7 +56,7 @@ Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录
 
 #### Scenario: DateRangePicker 全宽显示
 - **WHEN** Drawer 渲染
-- **THEN** DateRangePicker SHALL 占满时间选择区第二行的宽度（width: 100%）
+- **THEN** DateRangePicker SHALL 通过 CSS 类 `.full-width` 占满时间选择区第二行的宽度，不使用内联 style 的 width: 100%
 
 #### Scenario: 默认时间范围
 - **WHEN** Drawer 打开
@@ -63,22 +67,30 @@ Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录
 - **THEN** 系统 SHALL 重新请求趋势数据和历史记录
 
 ### Requirement: Tabs 内容组织
-Drawer 内部 SHALL 使用 TDesign Tabs 组织概览和记录两个面板。
+Drawer 内部 SHALL 使用 TDesign Tabs 组织概览和记录两个面板。TabPanel 内边距通过 className prop 控制。
 
 #### Scenario: Tab 标签
 - **WHEN** Drawer 渲染
 - **THEN** Tabs SHALL 显示两个标签：概览、记录
 
+#### Scenario: Tab 面板内边距
+- **WHEN** TabPanel 渲染
+- **THEN** TabPanel SHALL 通过 `className` prop 传入自定义类名（`tab-panel-padded`）控制内边距，不通过入侵 TDesign 内部类名（`.t-tab-panel`）覆盖
+
 ### Requirement: 概览面板
-概览 Tab SHALL 按区域展示目标统计摘要、趋势图、状态分布和基本信息，每个区域使用小标题分隔。
+概览 Tab SHALL 按区域展示目标统计摘要、趋势图、状态分布和基本信息，每个区域使用 TDesign Divider 组件作为小标题分隔。
 
 #### Scenario: 区域排列顺序
 - **WHEN** 概览面板渲染
-- **THEN** 面板 SHALL 按以下顺序展示区域：统计 → 趋势 → 状态分布 → 基本信息，每个区域前 SHALL 显示小标题
+- **THEN** 面板 SHALL 按以下顺序展示区域：统计 → 趋势 → 状态分布 → 基本信息，每个区域前 SHALL 显示 TDesign Divider（align="left"）作为小标题，不使用内联 style 的 h4 标签
+
+#### Scenario: 区域间距
+- **WHEN** 概览面板渲染
+- **THEN** 各区域之间的间距 SHALL 通过 TDesign Space 组件（direction="vertical"）统一管理，不使用内联 style 的 margin
 
 #### Scenario: 统计数值卡片
 - **WHEN** 概览面板渲染
-- **THEN** 面板 SHALL 在"统计"区域使用 TDesign Statistic 组件展示 4 个统计值：总检查（color=blue）、正常（color=green）、异常（color=red）、可用率（color=green, suffix="%"），使用 TDesign Row/Col 横向排列
+- **THEN** 面板 SHALL 在"统计"区域使用 TDesign Statistic 组件展示 4 个统计值：总检查（color=blue）、正常（color=green）、异常（color=red）、可用率（color=green, suffix="%"），使用 TDesign Row/Col 横向排列。Row 的外层间距 SHALL 通过 TDesign Space 或 CSS 类控制，不使用内联 style
 
 #### Scenario: 趋势折线图
 - **WHEN** 概览面板渲染且趋势数据可用