DiAL/openspec/specs/probe-dashboard/spec.md at 3e8d01715f908ac6535bd03b5691736436305fcf

Files

lanyuanxiaoyao 3e8d01715f refactor: 重构 Drawer 布局，合并趋势 tab、优化时间选择器和记录表格

- 移除 Drawer 底部确定/取消按钮
- 快捷时间段按钮中文化，时间选择器分两行显示
- DateRangePicker 时间精度改为分钟级
- 三 tab 合并为两 tab，趋势图移入概览面板并添加小标题分隔
- 记录表格：状态列改用 StatusDot，详情列合并错误信息，时间格式统一，耗时单位移至列标题
- 切换目标时通过 key 重置 Drawer 组件状态
- StatusDonut 居中，Tab 内容区域添加 padding
- 同步更新 openspec specs

2026-05-12 11:19:54 +08:00

2.7 KiB

Raw Blame History

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 错误。

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

2.7 KiB Raw Blame History Unescape Escape