## 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 状态色