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

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

src/web/components/StatusBar.tsx

@@ -7,9 +7,17 @@ export function StatusBar({ samples }: StatusBarProps) {
   for (let i = 0; i < 30; i++) {
     const sample = samples[i];
     if (sample) {
-      blocks.push(<span key={i} className={`status-bar-block ${sample.up ? "status-bar-up" : "status-bar-down"}`} />);
+      blocks.push(
+        <span
+          key={i}
+          className="status-bar-block"
+          style={{ background: sample.up ? "var(--td-success-color)" : "var(--td-error-color)" }}
+        />,
+      );
     } else {
-      blocks.push(<span key={i} className="status-bar-block status-bar-empty" />);
+      blocks.push(
+        <span key={i} className="status-bar-block" style={{ background: "var(--td-bg-color-component-disabled)" }} />,
+      );
     }
   }