diff --git a/openspec/specs/card-dashboard/spec.md b/openspec/specs/card-dashboard/spec.md deleted file mode 100644 index 450b2d9..0000000 --- a/openspec/specs/card-dashboard/spec.md +++ /dev/null @@ -1,89 +0,0 @@ -## 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 diff --git a/openspec/specs/probe-dashboard/spec.md b/openspec/specs/probe-dashboard/spec.md index 0982382..6301f40 100644 --- a/openspec/specs/probe-dashboard/spec.md +++ b/openspec/specs/probe-dashboard/spec.md @@ -1,6 +1,6 @@ ## Purpose -定义拨测系统的 React 前端 Dashboard：TDesign Statistic 统计卡片、按分组表格布局、目标详情 Drawer、TanStack Query 数据轮询和页面加载/错误状态。 +定义拨测系统前端 Dashboard 页面：总览统计卡片、页面标题、加载和错误状态处理。分组表格布局见 `target-table`，目标详情 Drawer 见 `target-detail-drawer`，数据轮询和缓存见 `tanstack-query-data-layer`。 ## Requirements @@ -15,34 +15,15 @@ Dashboard SHALL 在页面顶部使用 TDesign Statistic 组件展示总览统计 - **WHEN** 页面处于打开状态 - **THEN** 统计卡片 SHALL 通过 TanStack Query 的 refetchInterval=8000 自动刷新数据 -### Requirement: 卡片式分组布局 -Dashboard SHALL 使用按分组展示的表格布局，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable。 +### Requirement: 页面标题 +Dashboard 页面 SHALL 使用 TDesign Typography 组件渲染标题和副标题。 -> 表格列定义、排序、筛选、行交互的详细规范见 `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 关闭 +#### Scenario: 页面标题渲染 +- **WHEN** Dashboard 页面渲染 +- **THEN** 页面标题 SHALL 使用 TDesign Typography.Title 组件（level="h1"）渲染"DiAL"，副标题 SHALL 使用 Typography.Text 组件（theme="secondary"）渲染"统一拨测平台" ### Requirement: 页面加载与错误状态 -Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。页面标题使用 TDesign Typography 组件渲染。 +Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。 #### Scenario: 首次加载 - **WHEN** 页面首次加载且数据尚未返回 @@ -51,11 +32,3 @@ Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。 #### 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 diff --git a/openspec/specs/target-detail-modal/spec.md b/openspec/specs/target-detail-modal/spec.md deleted file mode 100644 index 8492442..0000000 --- a/openspec/specs/target-detail-modal/spec.md +++ /dev/null @@ -1,91 +0,0 @@ -## Purpose - -定义目标详情 Drawer：时间范围筛选（TDesign RadioGroup 快捷按钮 + DateRangePicker）、Tabs 组织概览/趋势/记录三个面板、统计图表和分页检查结果列表。 - -## Requirements - -### Requirement: 目标详情 Drawer -Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计图表和检查结果列表。 - -#### Scenario: 打开 Drawer -- **WHEN** 用户点击某个目标表格行 -- **THEN** 系统 SHALL 从右侧滑出 Drawer（placement="right", size="60%"），展示该目标的详情 - -#### Scenario: Drawer 默认时间范围 -- **WHEN** Drawer 打开 -- **THEN** 筛选器 SHALL 默认选中 "24h" 快捷按钮 - -#### Scenario: 关闭 Drawer -- **WHEN** 用户点击 Drawer 关闭按钮、ESC 键或遮罩层 -- **THEN** Drawer SHALL 关闭 - -### Requirement: 时间范围筛选 -Drawer SHALL 支持通过 TDesign RadioGroup 快捷按钮和 DateRangePicker 筛选数据的时间范围。 - -#### Scenario: 快捷时间范围按钮 -- **WHEN** Drawer 渲染 -- **THEN** 筛选栏 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1h、6h、24h、7d，当前选中的按钮高亮显示 - -#### Scenario: 点击快捷按钮 -- **WHEN** 用户点击快捷按钮（如 "24h"） -- **THEN** 筛选器 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮 - -#### Scenario: 自定义日期时间选择 -- **WHEN** 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker）修改起止时间 -- **THEN** 快捷按钮 SHALL 取消高亮，表示当前为自定义时间范围 - -#### Scenario: 筛选触发数据刷新 -- **WHEN** 时间范围发生变化（快捷按钮或自定义选择） -- **THEN** 系统 SHALL 通过 TanStack Query 重新请求该时间范围内的趋势数据和历史记录 - -### Requirement: 统计图表展示 -Drawer 概览和趋势面板 SHALL 展示统计数值、目标元信息和可用率趋势折线图、状态分布环形图。 - -#### Scenario: 概览面板统计数值 -- **WHEN** 概览 Tab 加载完成 -- **THEN** 面板 SHALL 使用 TDesign Statistic 组件展示总检查、正常、异常、可用率四个数值，使用 TDesign Row/Col 横向排列 - -#### Scenario: 概览面板元信息 -- **WHEN** 概览 Tab 加载完成 -- **THEN** 面板 SHALL 使用 TDesign Descriptions 组件展示目标地址、检查间隔、最新检查时间、状态详情 - -#### Scenario: 可用率趋势折线图 -- **WHEN** 趋势 Tab 加载完成且数据可用 -- **THEN** 面板 SHALL 展示 recharts 双 Y 轴折线图：耗时线颜色使用 --td-brand-color，可用率线颜色使用 --td-success-color - -#### Scenario: 状态分布环形图 -- **WHEN** 概览 Tab 加载完成 -- **THEN** 面板 SHALL 展示 recharts 环形图（Donut Chart），UP 颜色使用 --td-success-color，DOWN 颜色使用 --td-error-color，中间显示可用率百分比数字 - -### Requirement: 检查结果列表 -Drawer 记录面板 SHALL 使用 TDesign PrimaryTable 展示检查结果，支持服务端分页。 - -#### Scenario: 展示检查结果 -- **WHEN** 记录 Tab 加载完成且历史记录可用 -- **THEN** 表格 SHALL 展示检查结果，每条包含状态（TDesign Tag）、时间戳、statusDetail、耗时毫秒数和 failure 信息 - -#### Scenario: 分页导航 -- **WHEN** 检查结果总数超过一页 -- **THEN** 表格底部 SHALL 展示内建 pagination 分页器（disableDataPage=true） - -#### Scenario: 翻页刷新 -- **WHEN** 用户切换分页页码 -- **THEN** 系统 SHALL 通过 TanStack Query 请求对应页码的历史记录数据，表格更新 - -### Requirement: 内容组织布局 -Drawer SHALL 使用 TDesign Tabs 组织概览、趋势、记录三个面板。 - -#### Scenario: Tabs 组织内容 -- **WHEN** Drawer 渲染 -- **THEN** 内容区域 SHALL 使用 TDesign Tabs 组件分为概览、趋势、记录三个标签页 - -### Requirement: 标题栏类型标签 -Drawer 标题栏 SHALL 显示目标类型标签，使用统一的类型显示映射系统。 - -#### Scenario: 类型标签显示 -- **WHEN** Drawer 标题栏渲染 -- **THEN** 标题栏 SHALL 在目标名称旁显示 TDesign Tag 类型标签（HTTP / CMD） - -#### Scenario: 类型标签使用映射系统 -- **WHEN** Drawer 渲染类型标签 -- **THEN** 类型标签 SHALL 使用统一的类型显示映射函数，不硬编码映射逻辑 diff --git a/openspec/specs/target-table/spec.md b/openspec/specs/target-table/spec.md index 3090212..ef4edf6 100644 --- a/openspec/specs/target-table/spec.md +++ b/openspec/specs/target-table/spec.md @@ -23,6 +23,14 @@ Dashboard SHALL 按 group 字段将目标分组，每个分组渲染一个独立 - **WHEN** 分组名称为 "default" - **THEN** 分组标题 SHALL 显示 "默认分组" +#### Scenario: Dashboard 容器占满宽度 +- **WHEN** 用户打开 Dashboard 页面 +- **THEN** Dashboard 容器 SHALL 占满浏览器宽度，不设置 max-width 限制 + +#### Scenario: 分组间统一间距 +- **WHEN** 页面渲染多个分组 +- **THEN** 分组之间 SHALL 使用 TDesign Space 组件（direction=vertical, size=32px）统一间距 + ### Requirement: 表格列定义 每个分组的 PrimaryTable SHALL 包含状态、名称、类型、可用率、最近状态条、延迟、间隔 7 列，不含分组列（同组内冗余）。列渲染不使用内联 style。