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 写入前端样式开发规范

src/web/styles.css

@@ -1,22 +1,28 @@
+:root {
+  --avail-0: #d54941;
+  --avail-1: #d96241;
+  --avail-2: #e37318;
+  --avail-3: #e89318;
+  --avail-4: #d9a818;
+  --avail-5: #b8b020;
+  --avail-6: #8dba30;
+  --avail-7: #6dba3f;
+  --avail-8: #4dba50;
+  --avail-9: #3dba60;
+}
+
 .dashboard {
-  padding: 32px 24px;
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
   width: 100%;
 }
 
 .dashboard-header {
-  margin-bottom: 32px;
+  margin-bottom: var(--td-comp-margin-l);
 }
 
-.dashboard-header h1 {
-  margin: 0 0 4px;
-  font-size: 1.75rem;
-  letter-spacing: -0.03em;
-}
-
-.dashboard-subtitle {
+.dashboard-header .t-typography {
   margin: 0;
-  color: var(--td-text-color-secondary);
-  font-size: 0.9rem;
+  line-height: 1.3;
 }
 
 .status-dot {
@@ -27,6 +33,16 @@
   flex-shrink: 0;
 }
 
+.status-dot--up {
+  background: var(--td-success-color);
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--td-success-color) 14%, transparent);
+}
+
+.status-dot--down {
+  background: var(--td-error-color);
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--td-error-color) 14%, transparent);
+}
+
 .status-bar {
   display: flex;
   gap: 2px;
@@ -41,6 +57,18 @@
   border-radius: 2px;
 }
 
+.status-bar-block--up {
+  background: var(--td-success-color);
+}
+
+.status-bar-block--down {
+  background: var(--td-error-color);
+}
+
+.status-bar-block--empty {
+  background: var(--td-bg-color-component-disabled);
+}
+
 .status-donut {
   position: relative;
   display: flex;
@@ -71,10 +99,60 @@
   font-size: 0.85rem;
 }
 
-.drawer-tabs .t-tab-panel {
+.tab-panel-padded {
   padding: 15px;
 }
 
-.row-down {
-  background: color-mix(in srgb, var(--td-error-color) 6%, transparent) !important;
+.t-table tr.row-down {
+  background: color-mix(in srgb, var(--td-error-color) 6%, transparent);
+}
+
+.t-table--hoverable tbody tr.row-down:hover {
+  background: color-mix(in srgb, var(--td-error-color) 10%, transparent);
+}
+
+.text-disabled {
+  color: var(--td-text-color-disabled);
+}
+
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+.latency-ok {
+  color: var(--td-success-color);
+}
+
+.latency-warn {
+  color: var(--td-warning-color);
+}
+
+.latency-error {
+  color: var(--td-error-color);
+}
+
+.full-width {
+  width: 100%;
+}
+
+.clickable-table {
+  cursor: pointer;
+}
+
+.group-header {
+  margin-bottom: var(--td-comp-margin-m);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-header .t-typography {
+  margin: 0;
+  font-size: var(--td-font-size-title-medium);
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.summary-cards-row {
+  margin-bottom: var(--td-comp-margin-xl);
 }