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 写入前端样式开发规范
62 lines
3.0 KiB
Markdown
62 lines
3.0 KiB
Markdown
## Purpose
|
||
|
||
定义拨测系统的 React 前端 Dashboard：TDesign Statistic 统计卡片、按分组表格布局、目标详情 Drawer、TanStack Query 数据轮询和页面加载/错误状态。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 总览统计卡片
|
||
Dashboard SHALL 在页面顶部使用 TDesign Statistic 组件展示总览统计，包含总目标数、正常数和异常数。
|
||
|
||
#### Scenario: 展示统计卡片
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面顶部 SHALL 使用 TDesign Row/Col 布局展示 3 个 TDesign Card + Statistic 组合：全部目标数（color=blue）、正常目标数（color=green）、异常目标数（color=red）
|
||
|
||
#### Scenario: 统计数据自动刷新
|
||
- **WHEN** 页面处于打开状态
|
||
- **THEN** 统计卡片 SHALL 通过 TanStack Query 的 refetchInterval=8000 自动刷新数据
|
||
|
||
### Requirement: 卡片式分组布局
|
||
Dashboard SHALL 使用按分组展示的表格布局，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable。
|
||
|
||
> 表格列定义、排序、筛选、行交互的详细规范见 `target-table`。
|
||
|
||
#### Scenario: 按分组渲染表格
|
||
- **WHEN** 用户打开 Dashboard 页面
|
||
- **THEN** 页面 SHALL 按 group 字段将目标分组展示，每组一个 PrimaryTable，"default" 分组排在最上面
|
||
|
||
#### Scenario: 无分组时的展示
|
||
- **WHEN** 所有目标均属于 "default" 分组
|
||
- **THEN** 页面 SHALL 显示一个 "默认分组" 区域，表格正常展示
|
||
|
||
### Requirement: 目标详情 Drawer
|
||
Dashboard SHALL 使用 TDesign Drawer 展示目标详情，包含时间范围筛选、Tabs 组织的统计图表和分页检查记录列表。
|
||
|
||
> Drawer 的时间范围筛选、Tabs 面板内容、检查结果列表的详细规范见 `target-detail-drawer`。
|
||
|
||
#### Scenario: 打开 Drawer
|
||
- **WHEN** 用户点击某个目标表格行
|
||
- **THEN** 系统 SHALL 从右侧滑出 Drawer（placement="right", size="60%"），展示该目标的详情
|
||
|
||
#### Scenario: 关闭 Drawer
|
||
- **WHEN** 用户点击 Drawer 关闭按钮、ESC 键或遮罩层
|
||
- **THEN** Drawer SHALL 关闭
|
||
|
||
### Requirement: 页面加载与错误状态
|
||
Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。页面标题使用 TDesign Typography 组件渲染。
|
||
|
||
#### Scenario: 首次加载
|
||
- **WHEN** 页面首次加载且数据尚未返回
|
||
- **THEN** 表格 SHALL 显示 TDesign Loading 加载状态
|
||
|
||
#### Scenario: API 请求失败
|
||
- **WHEN** 前端 API 请求失败
|
||
- **THEN** 页面 SHALL 使用 TDesign Alert 组件（theme=error）显示错误提示
|
||
|
||
#### 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
|