From 3e8d01715f908ac6535bd03b5691736436305fcf Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Tue, 12 May 2026 11:19:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20Drawer=20?= =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E5=90=88=E5=B9=B6=E8=B6=8B=E5=8A=BF?= =?UTF-8?q?=20tab=E3=80=81=E4=BC=98=E5=8C=96=E6=97=B6=E9=97=B4=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E5=92=8C=E8=AE=B0=E5=BD=95=E8=A1=A8=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除 Drawer 底部确定/取消按钮 - 快捷时间段按钮中文化，时间选择器分两行显示 - DateRangePicker 时间精度改为分钟级 - 三 tab 合并为两 tab，趋势图移入概览面板并添加小标题分隔 - 记录表格：状态列改用 StatusDot，详情列合并错误信息，时间格式统一，耗时单位移至列标题 - 切换目标时通过 key 重置 Drawer 组件状态 - StatusDonut 居中，Tab 内容区域添加 padding - 同步更新 openspec specs --- openspec/specs/probe-dashboard/spec.md | 2 +- openspec/specs/target-detail-drawer/spec.md | 67 ++++++++++------ src/web/app.tsx | 1 + src/web/components/TargetDetailDrawer.tsx | 86 ++++++++++++--------- src/web/styles.css | 7 ++ 5 files changed, 101 insertions(+), 62 deletions(-) diff --git a/openspec/specs/probe-dashboard/spec.md b/openspec/specs/probe-dashboard/spec.md index 0e04bc0..d954e27 100644 --- a/openspec/specs/probe-dashboard/spec.md +++ b/openspec/specs/probe-dashboard/spec.md @@ -54,4 +54,4 @@ Dashboard SHALL 使用 TDesign 组件正确处理加载状态和 API 错误。 #### Scenario: Drawer 内部加载状态 - **WHEN** Drawer 内趋势数据或历史记录正在加载 -- **THEN** 趋势面板 SHALL 显示 TDesign Skeleton 加载占位，记录表格 SHALL 显示 loading 状态 +- **THEN** 概览面板的"趋势"区域 SHALL 显示 TDesign Skeleton 加载占位，记录表格 SHALL 显示 loading 状态 diff --git a/openspec/specs/target-detail-drawer/spec.md b/openspec/specs/target-detail-drawer/spec.md index 2c0fa6d..7d32b8e 100644 --- a/openspec/specs/target-detail-drawer/spec.md +++ b/openspec/specs/target-detail-drawer/spec.md @@ -1,6 +1,6 @@ ## Purpose -定义目标详情 Drawer：时间范围筛选（TDesign RadioGroup + DateRangePicker）、Tabs 组织概览/趋势/记录三个面板、统计图表和分页检查结果列表。 +定义目标详情 Drawer：时间范围筛选（TDesign RadioGroup + DateRangePicker）、Tabs 组织概览/记录两个面板、统计图表和分页检查结果列表。 ## Requirements @@ -19,72 +19,89 @@ Dashboard SHALL 在用户点击目标表格行后从右侧滑出 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 外层提供时间范围选择器，影响概览/趋势/记录三个面板的数据。 +Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录两个面板的数据。时间选择器 SHALL 分两行显示：第一行为快捷按钮，第二行为日期时间范围选择器。 #### Scenario: 快捷时间按钮 - **WHEN** Drawer 渲染 -- **THEN** 时间选择区 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1h、6h、24h、7d +- **THEN** 时间选择区第一行 SHALL 显示 TDesign RadioGroup（variant=default-filled）快捷按钮：1小时、6小时、24小时、7天 #### Scenario: 点击快捷按钮 -- **WHEN** 用户点击快捷按钮（如 "24h"） +- **WHEN** 用户点击快捷按钮（如 "24小时"） - **THEN** 系统 SHALL 自动设置对应的起止时间，DateRangePicker 显示对应的时间范围，该按钮高亮 #### Scenario: 自定义日期时间范围 -- **WHEN** 用户通过 TDesign DateRangePicker（mode=date, enableTimePicker）修改时间范围 +- **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 默认选中 "24h" 快捷按钮 +- **THEN** 时间选择器 SHALL 默认选中 "24小时" 快捷按钮 #### Scenario: 筛选触发数据刷新 - **WHEN** 时间范围发生变化 - **THEN** 系统 SHALL 重新请求趋势数据和历史记录 ### Requirement: Tabs 内容组织 -Drawer 内部 SHALL 使用 TDesign Tabs 组织概览、趋势、记录三个面板。 +Drawer 内部 SHALL 使用 TDesign Tabs 组织概览和记录两个面板。 #### Scenario: Tab 标签 - **WHEN** Drawer 渲染 -- **THEN** Tabs SHALL 显示三个标签：概览、趋势、记录 +- **THEN** Tabs SHALL 显示两个标签：概览、记录 ### Requirement: 概览面板 -概览 Tab SHALL 展示目标统计摘要和基本信息。 +概览 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 横向排列 +- **THEN** 面板 SHALL 在"统计"区域使用 TDesign Statistic 组件展示 4 个统计值：总检查（color=blue）、正常（color=green）、异常（color=red）、可用率（color=green, suffix="%"），使用 TDesign Row/Col 横向排列 -#### Scenario: 元信息展示 -- **WHEN** 概览面板渲染 -- **THEN** 面板 SHALL 使用 TDesign Descriptions 组件展示目标元信息：目标地址、检查间隔、最新检查时间、状态详情 +#### 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 比例，中间显示可用率百分比 +- **THEN** 面板 SHALL 在"状态分布"区域展示 recharts 环形图（StatusDonut），外圈显示 UP/DOWN 比例，中间显示可用率百分比 -### Requirement: 趋势面板 -趋势 Tab SHALL 展示可用率和耗时趋势折线图。 - -#### Scenario: 趋势折线图 -- **WHEN** 趋势面板渲染且数据可用 -- **THEN** 面板 SHALL 展示 recharts 双 Y 轴折线图：耗时线（--td-brand-color）和可用率线（--td-success-color） - -#### Scenario: 趋势数据加载中 -- **WHEN** 趋势数据正在加载 -- **THEN** 面板 SHALL 显示 TDesign Skeleton 加载占位 +#### Scenario: 元信息展示 +- **WHEN** 概览面板渲染 +- **THEN** 面板 SHALL 在"基本信息"区域使用 TDesign Descriptions 组件展示目标元信息：目标地址、检查间隔、最新检查时间、状态详情 ### Requirement: 记录面板 记录 Tab SHALL 展示分页检查结果列表，使用 TDesign PrimaryTable。 #### Scenario: 检查结果表格 - **WHEN** 记录面板渲染且数据可用 -- **THEN** 面板 SHALL 使用 TDesign PrimaryTable 展示检查结果，列包含：状态（TDesign Tag theme=success/danger）、时间、详情、耗时、错误信息 +- **THEN** 面板 SHALL 使用 TDesign PrimaryTable 展示检查结果，列包含：状态（StatusDot 圆点）、时间（YYYY-MM-DD HH:mm:ss 格式）、耗时（标题含 ms 单位，单元格仅显示数值，居中对齐）、详情（statusDetail 和 failure.message 用冒号拼接） #### Scenario: 服务端分页 - **WHEN** 检查结果总数超过一页 diff --git a/src/web/app.tsx b/src/web/app.tsx index ef4c00b..dbebf61 100644 --- a/src/web/app.tsx +++ b/src/web/app.tsx @@ -42,6 +42,7 @@ export function App() { )} ( - - {row.matched ? "UP" : "DOWN"} - + ), }, { colKey: "timestamp", title: "时间", - width: 170, + width: 180, + cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => { + const d = new Date(row.timestamp); + const pad = (n: number) => String(n).padStart(2, "0"); + return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; + }, + }, + { + colKey: "durationMs", + title: "耗时(ms)", + width: 96, + align: "center" as const, cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => - new Date(row.timestamp).toLocaleString("zh-CN"), + row.durationMs !== null ? Math.round(row.durationMs) : "-", }, { colKey: "statusDetail", title: "详情", - width: 100, - cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => row.statusDetail ?? "-", - }, - { - colKey: "durationMs", - title: "耗时", - width: 80, - align: "right" as const, - cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => - row.durationMs !== null ? `${Math.round(row.durationMs)}ms` : "-", - }, - { - colKey: "failure", - title: "错误信息", - cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => - row.failure?.message ?? "", + cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => { + const parts = [row.statusDetail, row.failure?.message].filter(Boolean); + return parts.length > 0 ? parts.join("：") : "-"; + }, }, ]; @@ -129,6 +133,7 @@ export function TargetDetailDrawer({ visible={!!target} placement="right" size="60%" + footer={false} onClose={onClose} header={
@@ -140,23 +145,32 @@ export function TargetDetailDrawer({
} > -
+
({ label: s.label, value: s.value }))} onChange={handleShortcut} /> +
+
- setActiveTab(val)}> + setActiveTab(val)}> +

统计

@@ -172,6 +186,13 @@ export function TargetDetailDrawer({ +

趋势

+ {trendLoading ? : } + +

状态分布

+ + +

基本信息

- - - - - - {trendLoading ? : } diff --git a/src/web/styles.css b/src/web/styles.css index 04bff57..d9917f7 100644 --- a/src/web/styles.css +++ b/src/web/styles.css @@ -45,6 +45,9 @@ position: relative; display: flex; justify-content: center; + align-items: center; + width: fit-content; + margin: 0 auto; } .donut-center-label { @@ -68,6 +71,10 @@ font-size: 0.85rem; } +.drawer-tabs .t-tab-panel { + padding: 15px; +} + .row-down { background: color-mix(in srgb, var(--td-error-color) 6%, transparent) !important; }