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

- 移除 Drawer 底部确定/取消按钮 - 快捷时间段按钮中文化，时间选择器分两行显示 - DateRangePicker 时间精度改为分钟级 - 三 tab 合并为两 tab，趋势图移入概览面板并添加小标题分隔 - 记录表格：状态列改用 StatusDot，详情列合并错误信息，时间格式统一，耗时单位移至列标题 - 切换目标时通过 key 重置 Drawer 组件状态 - StatusDonut 居中，Tab 内容区域添加 padding - 同步更新 openspec specs
2026-05-12 11:19:54 +08:00
parent 3b9006345e
commit 3e8d01715f
5 changed files with 101 additions and 62 deletions
--- 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 状态
--- 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** 检查结果总数超过一页
--- a/src/web/app.tsx
+++ b/src/web/app.tsx
@@ -42,6 +42,7 @@ export function App() {
      )}

      <TargetDetailDrawer
+        key={selectedTarget?.id}
        target={selectedTarget}
        trendData={trendData}
        trendLoading={trendLoading}
--- a/src/web/components/TargetDetailDrawer.tsx
+++ b/src/web/components/TargetDetailDrawer.tsx
@@ -34,49 +34,53 @@ interface TargetDetailDrawerProps {
 }

 const TIME_SHORTCUTS = [
-  { label: "1h", hours: 1, value: "1h" },
-  { label: "6h", hours: 6, value: "6h" },
-  { label: "24h", hours: 24, value: "24h" },
-  { label: "7d", hours: 168, value: "7d" },
+  { label: "1小时", hours: 1, value: "1h" },
+  { label: "6小时", hours: 6, value: "6h" },
+  { label: "24小时", hours: 24, value: "24h" },
+  { label: "7天", hours: 168, value: "7d" },
 ] as const;

+const SECTION_TITLE_STYLE: React.CSSProperties = {
+  fontSize: 14,
+  fontWeight: 600,
+  color: "var(--td-text-color-primary)",
+  margin: "16px 0 8px",
+};
+
 const HISTORY_COLUMNS = [
  {
    colKey: "matched",
-    title: "状态",
-    width: 72,
+    title: "#",
+    width: 40,
    cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => (
-      <Tag theme={row.matched ? "success" : "danger"} size="small">
-        {row.matched ? "UP" : "DOWN"}
-      </Tag>
+      <StatusDot up={!!row.matched} />
    ),
  },
  {
    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={
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
@@ -140,23 +145,32 @@ export function TargetDetailDrawer({
        </div>
      }
    >
-      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
+      <div style={{ marginBottom: 16 }}>
        <RadioGroup
+          theme="button"
          variant="default-filled"
          value={activeShortcut}
          options={TIME_SHORTCUTS.map((s) => ({ label: s.label, value: s.value }))}
          onChange={handleShortcut}
        />
+      </div>
+      <div style={{ marginBottom: 16 }}>
        <DateRangePicker
          mode="date"
          enableTimePicker
+          format="YYYY-MM-DD HH:mm"
+          valueType="YYYY-MM-DD HH:mm"
+          defaultTime={["00:00:00", "23:59:00"]}
+          timePickerProps={{ format: "HH:mm", steps: [1, 1, 60] }}
+          style={{ width: "100%" }}
          value={timeFrom && timeTo ? [timeFrom, timeTo] : undefined}
          onChange={handleDateRangeChange}
        />
      </div>

-      <Tabs value={activeTab} onChange={(val: TabValue) => setActiveTab(val)}>
+      <Tabs className="drawer-tabs" value={activeTab} onChange={(val: TabValue) => setActiveTab(val)}>
        <Tabs.TabPanel value="overview" label="概览">
+          <h4 style={{ ...SECTION_TITLE_STYLE, marginTop: 0 }}>统计</h4>
          <Row gutter={16} style={{ marginBottom: 16 }}>
            <Col span={3}>
              <Statistic title="总检查" value={totalChecks} color="blue" />
@@ -172,6 +186,13 @@ export function TargetDetailDrawer({
            </Col>
          </Row>

+          <h4 style={SECTION_TITLE_STYLE}>趋势</h4>
+          {trendLoading ? <Skeleton animation="gradient" /> : <TrendChart data={trendData} loading={false} />}
+
+          <h4 style={SECTION_TITLE_STYLE}>状态分布</h4>
+          <StatusDonut up={upChecks} down={downChecks} />
+
+          <h4 style={SECTION_TITLE_STYLE}>基本信息</h4>
          <Descriptions
            items={[
              { label: "目标地址", content: target.target },
@@ -182,14 +203,7 @@ export function TargetDetailDrawer({
              },
              { label: "状态详情", content: target.latestCheck?.statusDetail ?? "-" },
            ]}
-            style={{ marginBottom: 16 }}
          />
-
-          <StatusDonut up={upChecks} down={downChecks} />
-        </Tabs.TabPanel>
-
-        <Tabs.TabPanel value="trend" label="趋势">
-          {trendLoading ? <Skeleton animation="gradient" /> : <TrendChart data={trendData} loading={false} />}
        </Tabs.TabPanel>

        <Tabs.TabPanel value="history" label="记录">
--- 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;
 }