lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
bb6b2bc20b1d0151683f970c5002820b6b698490
DiAL/openspec/specs/css-utility-classes/spec.md
lanyuanxiaoyao 9f2b906063 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 写入前端样式开发规范
2026-05-12 12:42:11 +08:00

3.5 KiB
Raw Blame History

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 状态色
View Git Blame Copy Permalink