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

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

tests/web/constants/color-threshold.test.ts

@@ -0,0 +1,95 @@
+import { describe, test, expect } from "bun:test";
+import { getAvailabilityProgressColor, getLatencyColor } from "../../../src/web/constants/color-threshold";
+
+describe("color-threshold", () => {
+  describe("getAvailabilityProgressColor", () => {
+    test("0-10% 返回第一档颜色", () => {
+      expect(getAvailabilityProgressColor(0)).toBe("#d54941");
+      expect(getAvailabilityProgressColor(5)).toBe("#d54941");
+      expect(getAvailabilityProgressColor(9.99)).toBe("#d54941");
+    });
+
+    test("10-20% 返回第二档颜色", () => {
+      expect(getAvailabilityProgressColor(10)).toBe("#d96241");
+      expect(getAvailabilityProgressColor(15)).toBe("#d96241");
+      expect(getAvailabilityProgressColor(19.99)).toBe("#d96241");
+    });
+
+    test("20-30% 返回第三档颜色", () => {
+      expect(getAvailabilityProgressColor(20)).toBe("#e37318");
+      expect(getAvailabilityProgressColor(25)).toBe("#e37318");
+    });
+
+    test("30-40% 返回第四档颜色", () => {
+      expect(getAvailabilityProgressColor(30)).toBe("#e89318");
+      expect(getAvailabilityProgressColor(35)).toBe("#e89318");
+    });
+
+    test("40-50% 返回第五档颜色", () => {
+      expect(getAvailabilityProgressColor(40)).toBe("#d9a818");
+      expect(getAvailabilityProgressColor(45)).toBe("#d9a818");
+    });
+
+    test("50-60% 返回第六档颜色", () => {
+      expect(getAvailabilityProgressColor(50)).toBe("#b8b020");
+      expect(getAvailabilityProgressColor(55)).toBe("#b8b020");
+    });
+
+    test("60-70% 返回第七档颜色", () => {
+      expect(getAvailabilityProgressColor(60)).toBe("#8dba30");
+      expect(getAvailabilityProgressColor(65)).toBe("#8dba30");
+    });
+
+    test("70-80% 返回第八档颜色", () => {
+      expect(getAvailabilityProgressColor(70)).toBe("#6dba3f");
+      expect(getAvailabilityProgressColor(75)).toBe("#6dba3f");
+    });
+
+    test("80-90% 返回第九档颜色", () => {
+      expect(getAvailabilityProgressColor(80)).toBe("#4dba50");
+      expect(getAvailabilityProgressColor(85)).toBe("#4dba50");
+    });
+
+    test("90-100% 返回第十档颜色", () => {
+      expect(getAvailabilityProgressColor(90)).toBe("#3dba60");
+      expect(getAvailabilityProgressColor(95)).toBe("#3dba60");
+      expect(getAvailabilityProgressColor(99.9)).toBe("#3dba60");
+      expect(getAvailabilityProgressColor(100)).toBe("#3dba60");
+    });
+
+    test("边界值", () => {
+      expect(getAvailabilityProgressColor(9.999)).toBe("#d54941");
+      expect(getAvailabilityProgressColor(10)).toBe("#d96241");
+      expect(getAvailabilityProgressColor(19.999)).toBe("#d96241");
+      expect(getAvailabilityProgressColor(20)).toBe("#e37318");
+      expect(getAvailabilityProgressColor(89.999)).toBe("#4dba50");
+      expect(getAvailabilityProgressColor(90)).toBe("#3dba60");
+    });
+  });
+
+  describe("getLatencyColor", () => {
+    test("<=100ms 返回 success 色", () => {
+      expect(getLatencyColor(0)).toBe("var(--td-success-color)");
+      expect(getLatencyColor(50)).toBe("var(--td-success-color)");
+      expect(getLatencyColor(100)).toBe("var(--td-success-color)");
+    });
+
+    test("100-500ms 返回 warning 色", () => {
+      expect(getLatencyColor(101)).toBe("var(--td-warning-color)");
+      expect(getLatencyColor(250)).toBe("var(--td-warning-color)");
+      expect(getLatencyColor(500)).toBe("var(--td-warning-color)");
+    });
+
+    test(">500ms 返回 error 色", () => {
+      expect(getLatencyColor(501)).toBe("var(--td-error-color)");
+      expect(getLatencyColor(1000)).toBe("var(--td-error-color)");
+    });
+
+    test("边界值", () => {
+      expect(getLatencyColor(100)).toBe("var(--td-success-color)");
+      expect(getLatencyColor(100.01)).toBe("var(--td-warning-color)");
+      expect(getLatencyColor(500)).toBe("var(--td-warning-color)");
+      expect(getLatencyColor(500.01)).toBe("var(--td-error-color)");
+    });
+  });
+});