lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
3e8d01715f908ac6535bd03b5691736436305fcf
DiAL/openspec/specs/target-detail-drawer/spec.md
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

5.5 KiB
Raw Blame History

Purpose

定义目标详情 Drawer：时间范围筛选（TDesign RadioGroup + DateRangePicker）、Tabs 组织概览/记录两个面板、统计图表和分页检查结果列表。

Requirements

Requirement: 目标详情 Drawer

Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。

Scenario: 打开 Drawer

  • WHEN 用户点击某个目标表格行
  • THEN 系统 SHALL 从右侧滑出 Drawer（placement="right"），宽度为视口 60%

Scenario: Drawer 标题栏

  • WHEN Drawer 渲染
  • THEN 标题栏 SHALL 显示 StatusDot、目标名称和类型标签（TDesign Tag），以及内建关闭按钮

Scenario: 关闭 Drawer

  • WHEN 用户点击关闭按钮、ESC 键或遮罩层
  • THEN Drawer SHALL 关闭

Scenario: Drawer 无底部按钮

  • WHEN Drawer 渲染
  • THEN Drawer SHALL 不显示底部操作栏（footer={false}）

Scenario: Drawer 数据同步

  • WHEN Drawer 打开期间后台轮询刷新了 targets 数据
  • THEN Drawer 中 selectedTarget 的状态 SHALL 随之同步更新

Scenario: 切换目标重置 Tab

  • WHEN 用户从目标 A 切换到目标 B（点击不同的表格行）
  • THEN Drawer SHALL 重置为概览 Tab，使用 key={target.id} 确保组件状态不残留

Requirement: 时间范围选择器

Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录两个面板的数据。时间选择器 SHALL 分两行显示：第一行为快捷按钮，第二行为日期时间范围选择器。

Scenario: 快捷时间按钮

  • WHEN Drawer 渲染
  • THEN 时间选择区第一行 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1小时、6小时、24小时、7天

Scenario: 点击快捷按钮

  • WHEN 用户点击快捷按钮（如 "24小时"）
  • THEN 系统 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮

Scenario: 自定义日期时间范围

  • WHEN 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker, format="YYYY-MM-DD HH:mm"）修改时间范围
  • THEN 快捷按钮 SHALL 取消高亮，系统重新请求对应时间范围的数据

Scenario: 时间精度为分钟级

  • WHEN 用户通过 DateRangePicker 选择时间
  • THEN 选择器 SHALL 仅精确到分钟（format="YYYY-MM-DD HH:mm"），秒列固定为 00

Scenario: DateRangePicker 全宽显示

  • WHEN Drawer 渲染
  • THEN DateRangePicker SHALL 占满时间选择区第二行的宽度（width: 100%）

Scenario: 默认时间范围

  • WHEN Drawer 打开
  • THEN 时间选择器 SHALL 默认选中 "24小时" 快捷按钮

Scenario: 筛选触发数据刷新

  • WHEN 时间范围发生变化
  • THEN 系统 SHALL 重新请求趋势数据和历史记录

Requirement: Tabs 内容组织

Drawer 内部 SHALL 使用 TDesign Tabs 组织概览和记录两个面板。

Scenario: Tab 标签

  • WHEN Drawer 渲染
  • THEN Tabs SHALL 显示两个标签：概览、记录

Requirement: 概览面板

概览 Tab SHALL 按区域展示目标统计摘要、趋势图、状态分布和基本信息，每个区域使用小标题分隔。

Scenario: 区域排列顺序

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 按以下顺序展示区域：统计 → 趋势 → 状态分布 → 基本信息，每个区域前 SHALL 显示小标题

Scenario: 统计数值卡片

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 在"统计"区域使用 TDesign Statistic 组件展示 4 个统计值：总检查（color=blue）、正常（color=green）、异常（color=red）、可用率（color=green, suffix="%"），使用 TDesign Row/Col 横向排列

Scenario: 趋势折线图

  • WHEN 概览面板渲染且趋势数据可用
  • THEN 面板 SHALL 在"趋势"区域展示 recharts 双 Y 轴折线图（TrendChart）：耗时线（--td-brand-color）和可用率线（--td-success-color）

Scenario: 趋势数据加载中

  • WHEN 概览面板渲染且趋势数据正在加载
  • THEN "趋势"区域 SHALL 显示 TDesign Skeleton 加载占位

Scenario: 状态分布环形图

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 在"状态分布"区域展示 recharts 环形图（StatusDonut），外圈显示 UP/DOWN 比例，中间显示可用率百分比

Scenario: 元信息展示

  • WHEN 概览面板渲染
  • THEN 面板 SHALL 在"基本信息"区域使用 TDesign Descriptions 组件展示目标元信息：目标地址、检查间隔、最新检查时间、状态详情

Requirement: 记录面板

记录 Tab SHALL 展示分页检查结果列表，使用 TDesign PrimaryTable。

Scenario: 检查结果表格

  • WHEN 记录面板渲染且数据可用
  • THEN 面板 SHALL 使用 TDesign PrimaryTable 展示检查结果，列包含：状态（StatusDot 圆点）、时间（YYYY-MM-DD HH:mm:ss 格式）、耗时（标题含 ms 单位，单元格仅显示数值，居中对齐）、详情（statusDetail 和 failure.message 用冒号拼接）

Scenario: 服务端分页

  • WHEN 检查结果总数超过一页
  • THEN 表格 SHALL 使用内建 pagination（disableDataPage=true），分页器显示在表格底部

Scenario: 翻页触发请求

  • WHEN 用户切换分页页码
  • THEN 系统 SHALL 请求对应页码的服务端数据，表格更新

Scenario: 记录数据加载中

  • WHEN 历史记录正在加载
  • THEN 表格 SHALL 显示 loading 状态
View Git Blame Copy Permalink