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 写入前端样式开发规范
This commit is contained in:
@@ -42,7 +42,7 @@ Dashboard SHALL 使用 TDesign Drawer 展示目标详情,包含时间范围筛
|
||||
- **THEN** Drawer SHALL 关闭
|
||||
|
||||
### Requirement: 页面加载与错误状态
|
||||
Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。
|
||||
Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。页面标题使用 TDesign Typography 组件渲染。
|
||||
|
||||
#### Scenario: 首次加载
|
||||
- **WHEN** 页面首次加载且数据尚未返回
|
||||
@@ -55,3 +55,7 @@ Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。
|
||||
#### Scenario: Drawer 内部加载状态
|
||||
- **WHEN** Drawer 内趋势数据或历史记录正在加载
|
||||
- **THEN** 概览面板的"趋势"区域 SHALL 显示 TDesign Skeleton 加载占位,记录表格 SHALL 显示 loading 状态
|
||||
|
||||
#### Scenario: 页面标题
|
||||
- **WHEN** Dashboard 页面渲染
|
||||
- **THEN** 页面标题 SHALL 使用 TDesign Typography.Title 组件(level="h1")渲染"DiAL",副标题 SHALL 使用 Typography.Text 组件(theme="secondary")渲染"统一拨测平台",不使用原生 h1/p 标签和内联 style
|
||||
|
||||
Reference in New Issue
Block a user