feat: HostMonitor Brush图表缩放 + avg/max/min下拉选择器

- 添加 BucketPoint 结构 (avg/max/min/count) - 时间范围切换自动调整聚合窗口 (1h→60s, 6h→5min, 12h→10min...) - 每张指标卡片支持平均值/最大值/最小值切换 - Recharts Brush 组件实现鼠标拖选时间范围缩放 - 参考线显示整体均值 - 图表高度增大到 48 适配 Brush 条 - 磁盘分区列表兼容 agent 上报的原始字段名
2026-06-19 01:15:42 +00:00
1 parent feb8530999
commit 228b6b52f9
@@ -1,4 +1,4 @@
-// 主机监控详情 — 阿里云云监控风格 (分类指标 + 时间范围 + 时序图表)
+// 主机监控详情 — 阿里云云监控风格 (Brush缩放 + avg/max/min选择器)
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { agentApi } from '@/services/api';
@@ -12,29 +12,52 @@ import {
  Info, Monitor, Disc, Zap, Clock
 } from 'lucide-react';
 import {
-  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line,
+  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
+  ResponsiveContainer, Brush, ReferenceLine,
 } from 'recharts';

-// 时间范围配置
+// 时间范围 → 聚合窗口 → 目标桶数
 const TIME_RANGES = [
-  { label: '1小时', hours: 1 },
-  { label: '6小时', hours: 6 },
-  { label: '12小时', hours: 12 },
-  { label: '1天', hours: 24 },
-  { label: '3天', hours: 72 },
-  { label: '7天', hours: 168 },
-  { label: '14天', hours: 336 },
+  { label: '1小时', hours: 1, window: 60, buckets: 60 },
+  { label: '6小时', hours: 6, window: 300, buckets: 72 },
+  { label: '12小时', hours: 12, window: 600, buckets: 72 },
+  { label: '1天', hours: 24, window: 1800, buckets: 96 },
+  { label: '3天', hours: 72, window: 3600, buckets: 72 },
+  { label: '7天', hours: 168, window: 10800, buckets: 56 },
+  { label: '14天', hours: 336, window: 21600, buckets: 48 },
 ] as const;

-// 聚合：把原始数据压缩到 targetBuckets 个桶
-function bucketData(data: number[], targetBuckets: number = 48): { time: string; value: number }[] {
-  if (!data || data.length === 0) return [];
-  const perBucket = Math.max(1, Math.ceil(data.length / targetBuckets));
-  const result: { time: string; value: number }[] = [];
-  for (let i = 0; i < data.length; i += perBucket) {
-    const slice = data.slice(i, i + perBucket);
-    const avg = slice.reduce((a, b) => a + b, 0) / slice.length;
-    result.push({ time: `-${Math.round((data.length - i) * 10 / 3600)}h`, value: Number(avg.toFixed(1)) });
+type AggType = 'avg' | 'max' | 'min';
+
+interface BucketPoint {
+  time: string;
+  timestamp: number;
+  avg: number;
+  max: number;
+  min: number;
+  count: number;
+}
+
+function bucketWithStats(raw: number[], timestamps: number[], windowSec: number, targetBuckets: number): BucketPoint[] {
+  if (!raw || raw.length === 0) return [];
+  const perBucket = Math.max(1, Math.ceil(raw.length / targetBuckets));
+  const result: BucketPoint[] = [];
+  for (let i = 0; i < raw.length; i += perBucket) {
+    const slice = raw.slice(i, i + perBucket);
+    const tsSlice = timestamps.slice(i, i + perBucket);
+    const sum = slice.reduce((a, b) => a + b, 0);
+    const avg = sum / slice.length;
+    const max = Math.max(...slice);
+    const min = Math.min(...slice);
+    const ts = tsSlice[Math.floor(tsSlice.length / 2)] || 0;
+    result.push({
+      time: new Date(ts * 1000).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+      timestamp: ts,
+      avg: Number(avg.toFixed(2)),
+      max: Number(max.toFixed(2)),
+      min: Number(min.toFixed(2)),
+      count: slice.length,
+    });
  }
  return result.slice(-targetBuckets);
 }
@@ -60,15 +83,14 @@ export function HostMonitor() {
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('basic');
  const [rangeHours, setRangeHours] = useState(1);
+  const [aggType, setAggType] = useState<AggType>('avg');

-  // 原始历史数据
  const [history, setHistory] = useState<any[]>([]);
-
-  // 最新快照
  const [latest, setLatest] = useState<any>(null);
-  // 服务器信息（来自 asset_servers）：OS、内核、总内存等，不与 history 混淆
  const [serverInfo, setServerInfo] = useState<any>(null);

+  const timeConfig = TIME_RANGES.find(tr => tr.hours === rangeHours) || TIME_RANGES[0];
+
  // 加载主机列表
  useEffect(() => {
    agentApi.getLatest().then((data: any) => {
@@ -103,54 +125,56 @@ export function HostMonitor() {
      .finally(() => setLoading(false));
  }, [selectedHost, rangeHours]);

-  // 提取指标数组
+  // 从原始历史数据提取指标 + 分桶聚合
  const metrics = useMemo(() => {
-    const cpu: number[] = [];
-    const mem: number[] = [];
-    const load1: number[] = [];
-    const disk: number[] = [];
-    const tcpEst: number[] = [];
-    const rx: number[] = [];
-    const tx: number[] = [];
-    const ioRead: number[] = [];
-    const ioWrite: number[] = [];
-    const ioReadOps: number[] = [];
-    const ioWriteOps: number[] = [];
+    const rawCpu: number[] = [];
+    const rawMem: number[] = [];
+    const rawLoad1: number[] = [];
+    const rawDisk: number[] = [];
+    const rawTcp: number[] = [];
+    const rawRx: number[] = [];
+    const rawTx: number[] = [];
+    const rawIoR: number[] = [];
+    const rawIoW: number[] = [];
+    const rawIoRops: number[] = [];
+    const rawIoWops: number[] = [];
+    const timestamps: number[] = [];

    for (const r of history) {
-      cpu.push(r.cpu_usage || 0);
-      mem.push(r.mem_usage || 0);
-      load1.push(r.load1 || 0);
-      disk.push(r.disk_usage || 0);
+      const ts = r.report_time ? new Date(r.report_time).getTime() / 1000 : (r.created_at ? new Date(r.created_at).getTime() / 1000 : 0);
+      timestamps.push(ts);
+
+      rawCpu.push(r.cpu_usage || 0);
+      rawMem.push(r.mem_usage || 0);
+      rawLoad1.push(r.load1 || 0);
+      rawDisk.push(r.disk_usage || 0);

      const net = parseJSON(r.net_info);
-      tcpEst.push(net.tcp_established || 0);
-      rx.push(net.net_rx_bps || 0);
-      tx.push(net.net_tx_bps || 0);
+      rawTcp.push(net.tcp_established || 0);
+      rawRx.push(net.net_rx_bps || 0);
+      rawTx.push(net.net_tx_bps || 0);

      const dio = parseJSON(r.disk_io_info);
-      ioRead.push(dio.read_bps || 0);
-      ioWrite.push(dio.write_bps || 0);
-      ioReadOps.push(dio.read_iops || 0);
-      ioWriteOps.push(dio.write_iops || 0);
+      rawIoR.push(dio.read_bps || 0);
+      rawIoW.push(dio.write_bps || 0);
+      rawIoRops.push(dio.read_iops || 0);
+      rawIoWops.push(dio.write_iops || 0);
    }

-    const target = rangeHours <= 1 ? 60 : rangeHours <= 6 ? 72 : rangeHours <= 24 ? 96 : 120;
-
    return {
-      cpu: bucketData(cpu, target),
-      mem: bucketData(mem, target),
-      load1: bucketData(load1, target),
-      disk: bucketData(disk, target),
-      tcpEst: bucketData(tcpEst, target),
-      rx: bucketData(rx.map(v => v / 1024), target),  // KB/s
-      tx: bucketData(tx.map(v => v / 1024), target),
-      ioRead: bucketData(ioRead.map(v => v / 1024), target),    // KB/s
-      ioWrite: bucketData(ioWrite.map(v => v / 1024), target),  // KB/s
-      ioReadOps: bucketData(ioReadOps, target),  // count/s
-      ioWriteOps: bucketData(ioWriteOps, target), // count/s
+      cpu:     bucketWithStats(rawCpu, timestamps, timeConfig.window, timeConfig.buckets),
+      mem:     bucketWithStats(rawMem, timestamps, timeConfig.window, timeConfig.buckets),
+      load1:   bucketWithStats(rawLoad1, timestamps, timeConfig.window, timeConfig.buckets),
+      disk:    bucketWithStats(rawDisk, timestamps, timeConfig.window, timeConfig.buckets),
+      tcpEst:  bucketWithStats(rawTcp, timestamps, timeConfig.window, timeConfig.buckets),
+      rx:      bucketWithStats(rawRx.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
+      tx:      bucketWithStats(rawTx.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
+      ioRead:  bucketWithStats(rawIoR.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
+      ioWrite: bucketWithStats(rawIoW.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
+      ioReadOps:  bucketWithStats(rawIoRops, timestamps, timeConfig.window, timeConfig.buckets),
+      ioWriteOps: bucketWithStats(rawIoWops, timestamps, timeConfig.window, timeConfig.buckets),
    };
-  }, [history, rangeHours]);
+  }, [history, timeConfig]);

  const netInfo = parseJSON(latest?.net_info);
  const portInfo: any[] = Array.isArray(latest?.port_info) ? latest.port_info : (Array.isArray(parseJSON(latest?.port_info)) ? parseJSON(latest?.port_info) : []);
@@ -178,7 +202,7 @@ export function HostMonitor() {

  return (
    <div className="space-y-3">
-      {/* 顶栏：主机选择 + 时间范围 */}
+      {/* 顶栏 */}
      <div className="flex items-center justify-between flex-wrap gap-2">
        <div className="flex items-center gap-2">
          <Server className="h-4 w-4 text-blue-400" />
@@ -199,20 +223,34 @@ export function HostMonitor() {
          )}
        </div>

-        {/* 时间范围 */}
-        <div className="flex items-center gap-1">
-          {TIME_RANGES.map(tr => (
-            <Button
-              key={tr.hours}
-              variant={rangeHours === tr.hours ? 'default' : 'outline'}
-              size="sm"
-              className="h-7 text-xs px-2.5"
-              onClick={() => setRangeHours(tr.hours)}
-            >
-              {tr.label}
-            </Button>
-          ))}
-          <Badge variant="outline" className="text-[10px] h-6">周期: 15秒</Badge>
+        <div className="flex items-center gap-2">
+          {/* 聚合类型选择 */}
+          <Select value={aggType} onValueChange={(v) => setAggType(v as AggType)}>
+            <SelectTrigger className="w-24 h-7 text-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+              <SelectItem value="avg">平均值</SelectItem>
+              <SelectItem value="max">最大值</SelectItem>
+              <SelectItem value="min">最小值</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* 时间范围 */}
+          <div className="flex items-center gap-1">
+            {TIME_RANGES.map(tr => (
+              <Button
+                key={tr.hours}
+                variant={rangeHours === tr.hours ? 'default' : 'outline'}
+                size="sm"
+                className="h-7 text-xs px-2.5"
+                onClick={() => setRangeHours(tr.hours)}
+              >
+                {tr.label}
+              </Button>
+            ))}
+          </div>
+          <Badge variant="outline" className="text-[10px] h-6">聚合: {aggType}</Badge>
        </div>
      </div>

@@ -220,10 +258,10 @@ export function HostMonitor() {
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="h-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] gap-0">
          {[
-            { id: 'basic', label: '基础监控', icon: <Monitor className="w-3 h-3" />, desc: 'CPU/内存/负载' },
-            { id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3 h-3" />, desc: '使用率/IO' },
-            { id: 'network', label: '网络监控', icon: <Network className="w-3 h-3" />, desc: 'TCP/流量' },
-            { id: 'system', label: '系统信息', icon: <Info className="w-3 h-3" />, desc: 'OS/内核/运行时间' },
+            { id: 'basic', label: '基础监控', icon: <Monitor className="w-3 h-3" /> },
+            { id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3 h-3" /> },
+            { id: 'network', label: '网络监控', icon: <Network className="w-3 h-3" /> },
+            { id: 'system', label: '系统信息', icon: <Info className="w-3 h-3" /> },
          ].map(tab => (
            <TabsTrigger key={tab.id} value={tab.id} className="text-[11px] h-7 gap-1 data-[state=active]:bg-[var(--dg-bg-primary)]">
              {tab.icon}{tab.label}
@@ -231,78 +269,67 @@ export function HostMonitor() {
          ))}
        </TabsList>

-        {/* ═══ 基础监控: CPU / 内存 / 负载 ═══ */}
+        {/* 基础监控 */}
        <TabsContent value="basic" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricChartCard
            title="CPU使用率(%)" value={currentVal('cpu')} icon={<Cpu className="h-4 w-4 text-blue-400" />}
-            data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]}
-            period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
+            data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType}
          />
          <MetricChartCard
            title="内存使用率(%)" value={currentVal('mem')} icon={<Server className="h-4 w-4 text-emerald-400" />}
-            data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]}
-            period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
+            data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType}
          />
          <MetricChartCard
            title="系统平均负载(count)" value={currentVal('load1')} icon={<Activity className="h-4 w-4 text-purple-400" />}
-            data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']}
-            period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
+            data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType}
          />
        </TabsContent>

-        {/* ═══ 磁盘监控: 使用率 / BPS / IOPS ═══ */}
+        {/* 磁盘监控 */}
        <TabsContent value="disk" className="mt-3 space-y-3">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <MetricChartCard
              title="磁盘使用率(%)" value={currentVal('disk')} icon={<HardDrive className="h-4 w-4 text-orange-400" />}
-              data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]}
-              period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
+              data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType}
            />
            <MetricChartCard
-              title="所有磁盘读取BPS(B/s)" value={currentVal('ioR')} icon={<Disc className="h-4 w-4 text-blue-400" />}
-              data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']}
-              period="平均值"
+              title="所有磁盘读取BPS(KB/s)" value={currentVal('ioR')} icon={<Disc className="h-4 w-4 text-blue-400" />}
+              data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
            />
            <MetricChartCard
-              title="所有磁盘写入BPS(B/s)" value={currentVal('ioW')} icon={<Disc className="h-4 w-4 text-emerald-400" />}
-              data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']}
-              period="平均值"
+              title="所有磁盘写入BPS(KB/s)" value={currentVal('ioW')} icon={<Disc className="h-4 w-4 text-emerald-400" />}
+              data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
            />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <MetricChartCard
              title="所有磁盘每秒读取次数(count/s)" value={currentVal('ioR_ops')} icon={<Zap className="h-4 w-4 text-blue-400" />}
-              data={metrics.ioReadOps} color="#6366f1" unit="count/s" domain={[0, 'auto']}
-              period="平均值"
+              data={metrics.ioReadOps} color="#6366f1" unit="count/s" domain={[0, 'auto']} aggType={aggType}
            />
            <MetricChartCard
              title="所有磁盘每秒写入次数(count/s)" value={currentVal('ioW_ops')} icon={<Zap className="h-4 w-4 text-emerald-400" />}
-              data={metrics.ioWriteOps} color="#22d3ee" unit="count/s" domain={[0, 'auto']}
-              period="平均值"
+              data={metrics.ioWriteOps} color="#22d3ee" unit="count/s" domain={[0, 'auto']} aggType={aggType}
            />
          </div>
        </TabsContent>

-        {/* ═══ 网络监控: TCP连接 / 接收 / 发送 ═══ */}
+        {/* 网络监控 */}
        <TabsContent value="network" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricChartCard
            title="TCP连接数(个)" value={currentVal('tcp')} icon={<Network className="h-4 w-4 text-purple-400" />}
-            data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']}
-            period={`ESTABLISHED / TIME_WAIT ${netInfo.tcp_time_wait || 0}`}
+            data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']} aggType={aggType}
          />
          <MetricChartCard
            title="网络接收速率(KB/s)" value={currentVal('rx')} icon={<Network className="h-4 w-4 text-blue-400" />}
-            data={metrics.rx} color="#3b82f6" unit="KB/s" domain={[0, 'auto']}
-            period={netInfo.nic_name ? `网卡: ${netInfo.nic_name}` : '平均值'}
+            data={metrics.rx} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
          />
          <MetricChartCard
            title="网络发送速率(KB/s)" value={currentVal('tx')} icon={<Network className="h-4 w-4 text-emerald-400" />}
-            data={metrics.tx} color="#10b981" unit="KB/s" domain={[0, 'auto']}
-            period={netInfo.nic_name ? `网卡: ${netInfo.nic_name}` : '平均值'}
+            data={metrics.tx} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
          />
        </TabsContent>

-        {/* ═══ 系统信息 ═══ */}
+        {/* 系统信息 */}
        <TabsContent value="system" className="mt-3 space-y-3">
          <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
            <CardContent className="p-4">
@@ -346,10 +373,10 @@ export function HostMonitor() {
            </Card>
          )}

-          {/* 磁盘分区详情 */}
+          {/* 磁盘分区 */}
          {latest?.disk_info && (() => {
            const disk = parseJSON(latest.disk_info);
-            const parts = disk.partitions || [];
+            const parts = Array.isArray(disk) ? disk : (disk.partitions || []);
            if (!parts.length) return null;
            return (
              <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
@@ -361,12 +388,12 @@ export function HostMonitor() {
                  <div className="space-y-1.5">
                    {parts.map((p: any, i: number) => (
                      <div key={i} className="flex items-center gap-2 text-xs">
-                        <span className="text-[var(--dg-text-muted)] w-24 font-mono truncate">{p.mountpoint || p.path}</span>
+                        <span className="text-[var(--dg-text-muted)] w-24 font-mono truncate">{p.mount || p.mountpoint || p.device || `disk${i}`}</span>
                        <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
-                          <div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.min(p.used_percent || 0, 100)}%` }} />
+                          <div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.min(p.usage_percent || p.used_percent || 0, 100)}%` }} />
                        </div>
-                        <span className="text-[var(--dg-text-primary)] w-20 text-right tabular-nums">{p.used || '?'}/{p.total || '?'}</span>
-                        <span className="text-blue-400 w-12 text-right tabular-nums">{p.used_percent || 0}%</span>
+                        <span className="text-[var(--dg-text-primary)] w-20 text-right tabular-nums">{p.used_gb?.toFixed(1) || p.used || '?'}/{p.total_gb?.toFixed(0) || p.total || '?'}GB</span>
+                        <span className="text-blue-400 w-12 text-right tabular-nums">{p.usage_percent || p.used_percent || 0}%</span>
                      </div>
                    ))}
                  </div>
@@ -375,7 +402,7 @@ export function HostMonitor() {
            );
          })()}

-          {/* 网络接口详情 */}
+          {/* 网络接口 */}
          {netInfo && (
            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
              <CardContent className="p-4">
@@ -387,7 +414,7 @@ export function HostMonitor() {
                  <div><span className="text-[var(--dg-text-muted)]">网卡：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.nic_name || '—'}</span></div>
                  <div><span className="text-[var(--dg-text-muted)]">接收：</span><span className="text-blue-400 font-mono">{netInfo.net_rx_bps ? `${(netInfo.net_rx_bps/1024).toFixed(1)} KB/s` : '—'}</span></div>
                  <div><span className="text-[var(--dg-text-muted)]">发送：</span><span className="text-emerald-400 font-mono">{netInfo.net_tx_bps ? `${(netInfo.net_tx_bps/1024).toFixed(1)} KB/s` : '—'}</span></div>
-                  <div><span className="text-[var(--dg-text-muted)]">EST/TW/LN：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.tcp_established || 0}/{netInfo.tcp_time_wait || 0}/{netInfo.tcp_listen || 0}</span></div>
+                  <div><span className="text-[var(--dg-text-muted)]">EST/TW：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.tcp_established || 0}/{netInfo.tcp_time_wait || 0}</span></div>
                </div>
              </CardContent>
            </Card>
@@ -398,13 +425,20 @@ export function HostMonitor() {
  );
 }

-// ═══════ 指标图表卡片 ═══════
+// ═══════ 指标图表卡片 (带 Brush 缩放 + avg/max/min 数据) ═══════
 function MetricChartCard({
-  title, value, icon, data, color, unit, domain, period,
+  title, value, icon, data, color, unit, domain, aggType,
 }: {
-  title: string; value: string; icon: React.ReactNode; data: { time: string; value: number }[];
-  color: string; unit: string; domain: [number, number | 'auto']; period: string;
+  title: string; value: string; icon: React.ReactNode;
+  data: BucketPoint[]; color: string; unit: string;
+  domain: [number, number | 'auto']; aggType: AggType;
 }) {
+  // 选择当前聚合类型的值
+  const chartData = data.map(d => ({
+    ...d,
+    value: d[aggType],
+  }));
+
  return (
    <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
      <CardContent className="p-3">
@@ -414,7 +448,9 @@ function MetricChartCard({
            {icon}
            <span className="text-xs text-[var(--dg-text-primary)] font-medium truncate">{title}</span>
          </div>
-          <span className="text-[10px] text-[var(--dg-text-muted)]">{period}</span>
+          <span className="text-[10px] text-[var(--dg-text-muted)]">
+            {aggType === 'avg' ? '平均值' : aggType === 'max' ? '最大值' : '最小值'}
+          </span>
        </div>

        {/* 当前值 */}
@@ -423,15 +459,15 @@ function MetricChartCard({
          {unit && <span className="text-xs text-[var(--dg-text-muted)] ml-1">{unit}</span>}
        </div>

-        {/* 趋势图 */}
-        <div className="h-36">
-          {data.length === 0 ? (
+        {/* 趋势图 + Brush 缩放 */}
+        <div className="h-48">
+          {chartData.length === 0 ? (
            <div className="h-full flex items-center justify-center text-xs text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-md">
              暂无数据
            </div>
          ) : (
            <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={data} margin={{ top: 2, right: 2, bottom: 0, left: -10 }}>
+              <AreaChart data={chartData} margin={{ top: 2, right: 2, bottom: 0, left: -10 }}>
                <defs>
                  <linearGradient id={`grad-${title}`} x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor={color} stopOpacity={0.3} />
@@ -440,18 +476,34 @@ function MetricChartCard({
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" strokeOpacity={0.5} />
                <XAxis dataKey="time" hide />
-                <YAxis
-                  hide
-                  domain={domain[1] === 'auto' ? [0, (max: number) => max * 1.1] : domain as [number, number]}
-                />
+                <YAxis hide domain={domain[1] === 'auto' ? [0, (max: number) => max * 1.1] : domain as [number, number]} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: '#0f172a', border: '1px solid #1e293b',
                    borderRadius: '4px', color: '#f8fafc', fontSize: '11px', padding: '4px 8px',
                  }}
                  formatter={(v: number) => [`${v.toFixed(2)} ${unit}`, title.replace(/\(.+\)/, '')]}
+                  labelFormatter={(label) => `时间: ${label}`}
                />
                <Area type="monotone" dataKey="value" stroke={color} strokeWidth={1.5} fill={`url(#grad-${title})`} />
+                {/* Brush 缩放条 — 可拖动选择时间范围，鼠标滚轮精细调整 */}
+                <Brush
+                  dataKey="time"
+                  height={24}
+                  stroke="#334155"
+                  fill="#0f172a"
+                  tickFormatter={(t: string) => t}
+                  startIndex={Math.max(0, chartData.length - Math.min(20, chartData.length))}
+                />
+                {/* 参考线：平均值 */}
+                {chartData.length > 0 && (
+                  <ReferenceLine
+                    y={chartData.reduce((s, d) => s + d.value, 0) / chartData.length}
+                    stroke={color}
+                    strokeOpacity={0.3}
+                    strokeDasharray="4 4"
+                  />
+                )}
              </AreaChart>
            </ResponsiveContainer>
          )}