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/css-utility-classes/spec.md

@@ -0,0 +1,69 @@
+## Purpose
+
+定义 styles.css 中集中管理的前端样式工具类和 CSS 自定义属性，供 TDesign 组件之外的自定义组件（StatusDot、StatusBar 等）引用。
+
+## Requirements
+
+### Requirement: 状态色 CSS 类
+styles.css SHALL 定义状态指示相关的 CSS 类，颜色使用 TDesign tokens。
+
+#### Scenario: StatusDot 颜色类
+- **WHEN** StatusDot 组件渲染
+- **THEN** 组件 SHALL 使用 `.status-dot` 基础类 + `.status-dot--up`（background: `--td-success-color`）或 `.status-dot--down`（background: `--td-error-color`）修饰类，不使用内联 style
+
+#### Scenario: StatusDot 发光阴影
+- **WHEN** StatusDot 组件渲染
+- **THEN** `.status-dot--up` SHALL 定义 `box-shadow` 使用 `--td-success-color`，`.status-dot--down` SHALL 定义 `box-shadow` 使用 `--td-error-color`
+
+#### Scenario: StatusBar 色块类
+- **WHEN** StatusBar 组件渲染色块
+- **THEN** 组件 SHALL 使用 `.status-bar-block` 基础类 + `.status-bar-block--up`（background: `--td-success-color`）、`.status-bar-block--down`（background: `--td-error-color`）或 `.status-bar-block--empty`（background: `--td-bg-color-component-disabled`）修饰类，不使用内联 style
+
+### Requirement: 可用率色阶 CSS 变量
+styles.css SHALL 定义 10 级可用率色阶 CSS 自定义属性，使用项目自定义色值。
+
+#### Scenario: 色阶变量定义
+- **WHEN** 可用率进度条渲染
+- **THEN** 色阶 SHALL 通过 CSS 自定义属性 `--avail-0` 到 `--avail-9` 定义，值为项目自定义色值（`#d54941` 到 `#3dba60`）
+
+#### Scenario: 色阶渐变方向
+- **WHEN** 色阶变量被引用
+- **THEN** 色阶 SHALL 从红色（0-30%）经橙色（30-60%）过渡到绿色（60-100%）
+
+### Requirement: 辅助工具类
+styles.css SHALL 定义前端组件复用的工具类。
+
+#### Scenario: 文本禁用色类
+- **WHEN** 延迟列无数据需要显示占位符
+- **THEN** 组件 SHALL 使用 `.text-disabled` 类（color: `--td-text-color-disabled`），不使用内联 style
+
+#### Scenario: 等宽数字类
+- **WHEN** 数值需要等宽显示
+- **THEN** 组件 SHALL 使用 `.tabular-nums` 类（font-variant-numeric: tabular-nums）
+
+#### Scenario: 延迟色值类
+- **WHEN** 延迟数值渲染
+- **THEN** 组件 SHALL 使用 `.latency-ok`（color: `--td-success-color`）、`.latency-warn`（color: `--td-warning-color`）或 `.latency-error`（color: `--td-error-color`）类，不使用内联 style
+
+#### Scenario: 全宽布局类
+- **WHEN** 组件需要占满父容器宽度
+- **THEN** 组件 SHALL 使用 `.full-width` 类（width: 100%），不使用内联 style
+
+#### Scenario: 可点击表格类
+- **WHEN** PrimaryTable 行支持点击交互
+- **THEN** 表格 SHALL 使用 `.clickable-table` 类（cursor: pointer），不使用内联 style
+
+#### Scenario: Tab 面板内边距类
+- **WHEN** Drawer 内 Tabs 面板需要内边距
+- **THEN** TabPanel SHALL 使用 `className="tab-panel-padded"` prop 传入类名，不通过入侵 TDesign 内部类名覆盖
+
+### Requirement: 异常行背景类
+styles.css SHALL 定义 DOWN 行的背景色，使用安全选择器且不使用 `!important`。
+
+#### Scenario: DOWN 行背景色
+- **WHEN** 表格行标记为 DOWN 状态
+- **THEN** 行 SHALL 通过 `.t-table tr.row-down` 选择器获得浅红色背景（引用 `--td-error-color-light` token），不使用 `!important`
+
+#### Scenario: DOWN 行 hover 状态
+- **WHEN** 鼠标悬停在 DOWN 行上
+- **THEN** 行背景 SHALL 通过 `.t-table--hoverable tbody tr.row-down:hover` 选择器显示 hover 状态色