lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity

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

Browse Source 
- 重写 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 写入前端样式开发规范
This commit is contained in:
兰缘小妖
2026-05-12 12:42:11 +08:00
parent 3e8d01715f
commit 9f2b906063
19 changed files with 332 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
tests/web/constants/color-threshold.test.ts
View File

@@ -1,95 +1,69 @@
import { describe, test, expect } from "bun:test";
import { getAvailabilityProgressColor, getLatencyColor } from "../../../src/web/constants/color-threshold";
import { getAvailabilityProgressColor } 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("0-10% 返回第一档 CSS 变量", () => {
expect(getAvailabilityProgressColor(0)).toBe("var(--avail-0)");
expect(getAvailabilityProgressColor(5)).toBe("var(--avail-0)");
expect(getAvailabilityProgressColor(9.99)).toBe("var(--avail-0)");
});
test("10-20% 返回第二档颜色", () => {
expect(getAvailabilityProgressColor(10)).toBe("#d96241");
expect(getAvailabilityProgressColor(15)).toBe("#d96241");
expect(getAvailabilityProgressColor(19.99)).toBe("#d96241");
test("10-20% 返回第二档 CSS 变量", () => {
expect(getAvailabilityProgressColor(10)).toBe("var(--avail-1)");
expect(getAvailabilityProgressColor(15)).toBe("var(--avail-1)");
expect(getAvailabilityProgressColor(19.99)).toBe("var(--avail-1)");
});
test("20-30% 返回第三档颜色", () => {
expect(getAvailabilityProgressColor(20)).toBe("#e37318");
expect(getAvailabilityProgressColor(25)).toBe("#e37318");
test("20-30% 返回第三档 CSS 变量", () => {
expect(getAvailabilityProgressColor(20)).toBe("var(--avail-2)");
expect(getAvailabilityProgressColor(25)).toBe("var(--avail-2)");
});
test("30-40% 返回第四档颜色", () => {
expect(getAvailabilityProgressColor(30)).toBe("#e89318");
expect(getAvailabilityProgressColor(35)).toBe("#e89318");
test("30-40% 返回第四档 CSS 变量", () => {
expect(getAvailabilityProgressColor(30)).toBe("var(--avail-3)");
expect(getAvailabilityProgressColor(35)).toBe("var(--avail-3)");
});
test("40-50% 返回第五档颜色", () => {
expect(getAvailabilityProgressColor(40)).toBe("#d9a818");
expect(getAvailabilityProgressColor(45)).toBe("#d9a818");
test("40-50% 返回第五档 CSS 变量", () => {
expect(getAvailabilityProgressColor(40)).toBe("var(--avail-4)");
expect(getAvailabilityProgressColor(45)).toBe("var(--avail-4)");
});
test("50-60% 返回第六档颜色", () => {
expect(getAvailabilityProgressColor(50)).toBe("#b8b020");
expect(getAvailabilityProgressColor(55)).toBe("#b8b020");
test("50-60% 返回第六档 CSS 变量", () => {
expect(getAvailabilityProgressColor(50)).toBe("var(--avail-5)");
expect(getAvailabilityProgressColor(55)).toBe("var(--avail-5)");
});
test("60-70% 返回第七档颜色", () => {
expect(getAvailabilityProgressColor(60)).toBe("#8dba30");
expect(getAvailabilityProgressColor(65)).toBe("#8dba30");
test("60-70% 返回第七档 CSS 变量", () => {
expect(getAvailabilityProgressColor(60)).toBe("var(--avail-6)");
expect(getAvailabilityProgressColor(65)).toBe("var(--avail-6)");
});
test("70-80% 返回第八档颜色", () => {
expect(getAvailabilityProgressColor(70)).toBe("#6dba3f");
expect(getAvailabilityProgressColor(75)).toBe("#6dba3f");
test("70-80% 返回第八档 CSS 变量", () => {
expect(getAvailabilityProgressColor(70)).toBe("var(--avail-7)");
expect(getAvailabilityProgressColor(75)).toBe("var(--avail-7)");
});
test("80-90% 返回第九档颜色", () => {
expect(getAvailabilityProgressColor(80)).toBe("#4dba50");
expect(getAvailabilityProgressColor(85)).toBe("#4dba50");
test("80-90% 返回第九档 CSS 变量", () => {
expect(getAvailabilityProgressColor(80)).toBe("var(--avail-8)");
expect(getAvailabilityProgressColor(85)).toBe("var(--avail-8)");
});
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("90-100% 返回第十档 CSS 变量", () => {
expect(getAvailabilityProgressColor(90)).toBe("var(--avail-9)");
expect(getAvailabilityProgressColor(95)).toBe("var(--avail-9)");
expect(getAvailabilityProgressColor(99.9)).toBe("var(--avail-9)");
expect(getAvailabilityProgressColor(100)).toBe("var(--avail-9)");
});
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)");
expect(getAvailabilityProgressColor(9.999)).toBe("var(--avail-0)");
expect(getAvailabilityProgressColor(10)).toBe("var(--avail-1)");
expect(getAvailabilityProgressColor(19.999)).toBe("var(--avail-1)");
expect(getAvailabilityProgressColor(20)).toBe("var(--avail-2)");
expect(getAvailabilityProgressColor(89.999)).toBe("var(--avail-8)");
expect(getAvailabilityProgressColor(90)).toBe("var(--avail-9)");
});
});
});