lanyuanxiaoyao
9f2b906063
- 重写 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 写入前端样式开发规范
90 lines
4.7 KiB
Markdown
90 lines
4.7 KiB
Markdown
## Purpose
|
||
|
||
定义 Dashboard 的分组表格布局：按分组展示目标表格行、TDesign PrimaryTable 列定义、排序筛选、行交互和 DOWN 行视觉强化。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 分组卡片布局
|
||
Dashboard SHALL 按 group 字段将目标分组，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable 表格。分组标题使用 TDesign Typography 组件渲染。
|
||
|
||
#### Scenario: 按分组展示目标
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面 SHALL 按 group 字段将目标分组展示，"default" 分组排在最上面，其余分组按 YAML 配置顺序排列
|
||
|
||
#### Scenario: 分组标题带统计标签
|
||
- **WHEN** 页面渲染某个分组
|
||
- **THEN** 分组标题 SHALL 使用 CSS flex 布局（`display:flex; align-items:center`）显示分组名称和三个标签：总数（theme=primary, variant=light）、正常数（theme=success, variant=light）、异常数（theme=danger, variant=light），标签仅显示数字。分组名称 SHALL 使用 TDesign Typography.Title 组件（level="h4"）渲染，不使用原生 h2 标签和内联 style。Typography.Title 默认 margin SHALL 通过 CSS 覆盖归零
|
||
|
||
#### Scenario: 分组统计标签提示
|
||
- **WHEN** 鼠标悬停在分组统计标签上
|
||
- **THEN** 标签 SHALL 通过 TDesign Tag 的 title 属性显示提示文字（"总数"、"正常"、"异常"）
|
||
|
||
#### Scenario: "default" 分组显示名称
|
||
- **WHEN** 分组名称为 "default"
|
||
- **THEN** 分组标题 SHALL 显示 "默认分组"
|
||
|
||
#### Scenario: 分组标题间距
|
||
- **WHEN** 分组标题渲染
|
||
- **THEN** 标题与表格之间的间距 SHALL 通过 CSS 类控制，不使用内联 style 的 marginBottom
|
||
|
||
### Requirement: 响应式卡片网格
|
||
Dashboard SHALL 使用 TDesign PrimaryTable 展示每个分组的目标，表格宽度自适应容器。
|
||
|
||
#### Scenario: Dashboard 容器占满宽度
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** Dashboard 容器 SHALL 占满浏览器宽度，不设置 max-width 限制
|
||
|
||
#### Scenario: 表格自适应宽度
|
||
- **WHEN** 视口宽度变化
|
||
- **THEN** 每个分组的 PrimaryTable SHALL 自适应容器宽度，不设置固定宽度
|
||
|
||
#### Scenario: 分组间统一间距
|
||
- **WHEN** 页面渲染多个分组
|
||
- **THEN** 分组之间 SHALL 使用 TDesign Space 组件（direction=vertical, size=32px）统一间距
|
||
|
||
### Requirement: 目标卡片内容
|
||
每个分组的目标 SHALL 以 TDesign PrimaryTable 行的形式展示，包含状态、名称、类型、可用率、最近状态条、延迟和间隔 7 列。
|
||
|
||
#### Scenario: 状态列渲染
|
||
- **WHEN** 表格行渲染
|
||
- **THEN** 状态列 SHALL 使用 StatusDot 组件渲染指示圆点，matched=true 显示绿色（--td-success-color），matched=false 显示红色（--td-error-color），宽度 80px，fixed="left"，居中对齐
|
||
|
||
#### Scenario: 名称列渲染
|
||
- **WHEN** 表格行渲染
|
||
- **THEN** 名称列 SHALL 显示目标名称，超长名称自动省略（ellipsis）并通过 Tooltip 显示全名
|
||
|
||
#### Scenario: 类型列渲染
|
||
- **WHEN** 表格行渲染
|
||
- **THEN** 类型列 SHALL 使用 TDesign Tag 组件（size=small, theme=primary, variant=light-outline）显示类型名称，宽度 80px
|
||
|
||
#### Scenario: 可用率列渲染
|
||
- **WHEN** 表格行渲染
|
||
- **THEN** 可用率列 SHALL 使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色按可用率数值每 10% 一档：0-10% 最红（#d54941），每升高 10% 色阶偏移一档，经过橙色区间，90-100% 最绿（#3dba60），宽度 160px
|
||
|
||
#### Scenario: 最近状态列渲染
|
||
- **WHEN** 表格行渲染且 recentSamples 数据可用
|
||
- **THEN** 最近状态列 SHALL 使用 StatusBar 组件展示 30 个色块，色块颜色使用 TDesign tokens：UP 使用 --td-success-color、DOWN 使用 --td-error-color、无数据使用 --td-bg-color-component-disabled，宽度 220px
|
||
|
||
#### Scenario: 延迟列渲染
|
||
- **WHEN** 表格行渲染
|
||
- **THEN** 延迟列 SHALL 显示最近一次检查的延迟毫秒数，右对齐，颜色根据阈值变化：≤100ms 绿色、100-500ms 橙色、>500ms 红色，无数据显示"-"，宽度 80px
|
||
|
||
#### Scenario: 间隔列渲染
|
||
- **WHEN** 表格行渲染
|
||
- **THEN** 间隔列 SHALL 显示检查间隔（如 "5s"、"30s"），居中对齐，宽度 72px
|
||
|
||
### Requirement: 卡片交互
|
||
表格行 SHALL 支持 hover 效果和点击打开 Drawer。cursor 样式通过 CSS 类实现。
|
||
|
||
#### Scenario: 行 hover 效果
|
||
- **WHEN** 鼠标悬停在表格行上
|
||
- **THEN** 行 SHALL 显示 TDesign Table 内建的 hover 高亮效果
|
||
|
||
#### Scenario: 行点击打开详情
|
||
- **WHEN** 用户点击某个目标表格行
|
||
- **THEN** 系统 SHALL 打开该目标的详情 Drawer
|
||
|
||
#### Scenario: 行 cursor 样式
|
||
- **WHEN** 表格渲染
|
||
- **THEN** PrimaryTable SHALL 通过 CSS 类 `.clickable-table` 设置 cursor: pointer，不使用内联 style
|