From 134d279f0c94734d41a0de9f6c9fbff7a0642cd4 Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Thu, 18 Jun 2026 19:35:32 +0800
Subject: [PATCH] =?UTF-8?q?style(wavelet):=20=E8=8A=82=E7=82=B9=E7=BD=91?=
 =?UTF-8?q?=E7=BB=9C/=E7=A3=81=E7=9B=98=E8=B6=8B=E5=8A=BF=E5=9B=BE?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E5=8E=9F=E7=89=88=20ECharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改用 TrendChart 组件，恢复系列摘要卡与平滑面积折线图样式。
---
 .../nodes/components/disk-io-trend-chart.tsx  | 131 ++++-------------
 .../nodes/components/network-trend-chart.tsx  | 134 +++++-------------
 docs/changelog/index.md                       |   1 +
 3 files changed, 62 insertions(+), 204 deletions(-)

diff --git a/Wavelet/frontend/app/(main)/nodes/components/disk-io-trend-chart.tsx b/Wavelet/frontend/app/(main)/nodes/components/disk-io-trend-chart.tsx
index 285a4aa1..d417eda0 100644
--- a/Wavelet/frontend/app/(main)/nodes/components/disk-io-trend-chart.tsx
+++ b/Wavelet/frontend/app/(main)/nodes/components/disk-io-trend-chart.tsx
@@ -1,31 +1,16 @@
 'use client';
 
-import {Area, AreaChart, CartesianGrid, Line, XAxis, YAxis} from 'recharts';
-
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {TrendChart} from '@/components/data/trend-chart';
 import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/ui/chart';
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import type {DiskIOTrendPoint} from '@/lib/services/openflare';
 
-import {formatTrendHour} from '../../components/dashboard/dashboard-utils';
-import {formatBytes} from './node-utils';
-
-const chartConfig = {
-  diskRead: {
-    label: '磁盘读',
-    color: 'hsl(var(--chart-3))',
-  },
-  diskWrite: {
-    label: '磁盘写',
-    color: 'hsl(var(--chart-5))',
-  },
-} satisfies ChartConfig;
+import {formatBytes, formatTrendHour} from '../../components/dashboard/dashboard-utils';
 
 export function DiskIOTrendChart({
   points,
@@ -36,91 +21,33 @@ export function DiskIOTrendChart({
   title?: string;
   description?: string;
 }) {
-  const data = points.map((point) => ({
-    hour: formatTrendHour(point.bucket_started_at),
-    diskRead: point.disk_read_bytes,
-    diskWrite: point.disk_write_bytes,
-  }));
-
-  if (data.length === 0) {
-    return (
-      <Card className="border-dashed shadow-none">
-        <CardHeader>
-          <CardTitle className="text-sm font-semibold">{title}</CardTitle>
-          <CardDescription className="text-xs">{description}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
-            暂无趋势数据
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
   return (
     <Card className="border-dashed shadow-none">
       <CardHeader>
         <CardTitle className="text-sm font-semibold">{title}</CardTitle>
         <CardDescription className="text-xs">{description}</CardDescription>
       </CardHeader>
-      <CardContent className="pl-2 pr-4">
-        <div className="h-[280px] w-full">
-          <ChartContainer config={chartConfig} className="h-full w-full">
-            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
-              <defs>
-                <linearGradient id="nodeDiskReadFill" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="var(--color-diskRead)" stopOpacity={0.2} />
-                  <stop offset="95%" stopColor="var(--color-diskRead)" stopOpacity={0.02} />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={false} />
-              <XAxis
-                dataKey="hour"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={24}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                tickFormatter={(value) => formatBytes(Number(value))}
-              />
-              <ChartTooltip
-                cursor={false}
-                content={
-                  <ChartTooltipContent
-                    formatter={(value, name) => (
-                      <span className="font-mono tabular-nums">
-                        {formatBytes(Number(value))}
-                        <span className="ml-1 text-muted-foreground">
-                          {name === 'diskRead' ? '读' : '写'}
-                        </span>
-                      </span>
-                    )}
-                  />
-                }
-              />
-              <Area
-                type="monotone"
-                dataKey="diskRead"
-                stroke="var(--color-diskRead)"
-                fill="url(#nodeDiskReadFill)"
-                strokeWidth={2}
-              />
-              <Line
-                type="monotone"
-                dataKey="diskWrite"
-                stroke="var(--color-diskWrite)"
-                strokeWidth={2}
-                dot={false}
-              />
-              <ChartLegend content={<ChartLegendContent />} />
-            </AreaChart>
-          </ChartContainer>
-        </div>
+      <CardContent>
+        <TrendChart
+          labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
+          yAxisValueFormatter={formatBytes}
+          series={[
+            {
+              label: '磁盘读',
+              color: '#a78bfa',
+              fillColor: 'rgba(167, 139, 250, 0.14)',
+              variant: 'area',
+              values: points.map((point) => point.disk_read_bytes),
+              valueFormatter: formatBytes,
+            },
+            {
+              label: '磁盘写',
+              color: '#fb7185',
+              values: points.map((point) => point.disk_write_bytes),
+              valueFormatter: formatBytes,
+            },
+          ]}
+        />
       </CardContent>
     </Card>
   );
diff --git a/Wavelet/frontend/app/(main)/nodes/components/network-trend-chart.tsx b/Wavelet/frontend/app/(main)/nodes/components/network-trend-chart.tsx
index ac7b23b9..8a768ebc 100644
--- a/Wavelet/frontend/app/(main)/nodes/components/network-trend-chart.tsx
+++ b/Wavelet/frontend/app/(main)/nodes/components/network-trend-chart.tsx
@@ -1,31 +1,19 @@
 'use client';
 
-import {Area, AreaChart, CartesianGrid, Line, XAxis, YAxis} from 'recharts';
-
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {TrendChart} from '@/components/data/trend-chart';
 import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/ui/chart';
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import type {NetworkTrendPoint} from '@/lib/services/openflare';
 
-import {formatTrendHour} from '../../components/dashboard/dashboard-utils';
-import {formatBytesPerSecond} from './node-utils';
-
-const chartConfig = {
-  openrestyRx: {
-    label: 'OpenResty 入站',
-    color: 'hsl(var(--chart-2))',
-  },
-  openrestyTx: {
-    label: 'OpenResty 出站',
-    color: 'hsl(var(--chart-4))',
-  },
-} satisfies ChartConfig;
+import {
+  formatBytesPerSecond,
+  formatTrendHour,
+} from '../../components/dashboard/dashboard-utils';
 
 export function NetworkTrendChart({
   points,
@@ -36,91 +24,33 @@ export function NetworkTrendChart({
   title?: string;
   description?: string;
 }) {
-  const data = points.map((point) => ({
-    hour: formatTrendHour(point.bucket_started_at),
-    openrestyRx: point.openresty_rx_bytes,
-    openrestyTx: point.openresty_tx_bytes,
-  }));
-
-  if (data.length === 0) {
-    return (
-      <Card className="border-dashed shadow-none">
-        <CardHeader>
-          <CardTitle className="text-sm font-semibold">{title}</CardTitle>
-          <CardDescription className="text-xs">{description}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
-            暂无趋势数据
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
   return (
     <Card className="border-dashed shadow-none">
       <CardHeader>
         <CardTitle className="text-sm font-semibold">{title}</CardTitle>
         <CardDescription className="text-xs">{description}</CardDescription>
       </CardHeader>
-      <CardContent className="pl-2 pr-4">
-        <div className="h-[280px] w-full">
-          <ChartContainer config={chartConfig} className="h-full w-full">
-            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
-              <defs>
-                <linearGradient id="nodeOpenrestyRxFill" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="var(--color-openrestyRx)" stopOpacity={0.2} />
-                  <stop offset="95%" stopColor="var(--color-openrestyRx)" stopOpacity={0.02} />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={false} />
-              <XAxis
-                dataKey="hour"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={24}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                tickFormatter={(value) => formatBytesPerSecond(Number(value), 3600)}
-              />
-              <ChartTooltip
-                cursor={false}
-                content={
-                  <ChartTooltipContent
-                    formatter={(value, name) => (
-                      <span className="font-mono tabular-nums">
-                        {formatBytesPerSecond(Number(value), 3600)}
-                        <span className="ml-1 text-muted-foreground">
-                          {name === 'openrestyRx' ? '入站' : '出站'}
-                        </span>
-                      </span>
-                    )}
-                  />
-                }
-              />
-              <Area
-                type="monotone"
-                dataKey="openrestyRx"
-                stroke="var(--color-openrestyRx)"
-                fill="url(#nodeOpenrestyRxFill)"
-                strokeWidth={2}
-              />
-              <Line
-                type="monotone"
-                dataKey="openrestyTx"
-                stroke="var(--color-openrestyTx)"
-                strokeWidth={2}
-                dot={false}
-              />
-              <ChartLegend content={<ChartLegendContent />} />
-            </AreaChart>
-          </ChartContainer>
-        </div>
+      <CardContent>
+        <TrendChart
+          labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
+          yAxisValueFormatter={(value) => formatBytesPerSecond(value, 3600)}
+          series={[
+            {
+              label: 'OpenResty 入站',
+              color: '#22c55e',
+              fillColor: 'rgba(34, 197, 94, 0.14)',
+              variant: 'area',
+              values: points.map((point) => point.openresty_rx_bytes),
+              valueFormatter: (value) => formatBytesPerSecond(value, 3600),
+            },
+            {
+              label: 'OpenResty 出站',
+              color: '#38bdf8',
+              values: points.map((point) => point.openresty_tx_bytes),
+              valueFormatter: (value) => formatBytesPerSecond(value, 3600),
+            },
+          ]}
+        />
       </CardContent>
     </Card>
   );
diff --git a/docs/changelog/index.md b/docs/changelog/index.md
index 148faa88..49c6e987 100644
--- a/docs/changelog/index.md
+++ b/docs/changelog/index.md
@@ -51,6 +51,7 @@ sidebar: false
 - 修复开发模式下 `/api/*` 尾斜杠引发 Next.js 308 与 Gin 301 循环重定向：前端 Service 与 `api-client` 请求拦截器规范化路径、强制浏览器同源代理、Next `skipTrailingSlashRedirect`、后端 `RegisterCollection` 双路径注册；Access Token 管理员权限校验对齐 `token_admin`。
 - 补全 Wavelet 边缘节点详情数据看板：迁移运行诊断摘要、系统信息、实时资源、网络流量、24 小时请求/容量/网络/磁盘趋势、请求结构分布与健康事件时间线。
 - 节点详情页改为 Tabs 布局（概览 / 数据看板 / 配置与部署），统一 Edge/Relay/Tunnel 详情壳层并支持 `tab` URL 参数深链。
+- 节点详情 24 小时网络/磁盘 IO 趋势图对齐原版 ECharts 样式，恢复系列摘要卡与平滑面积折线图。
 - OpenFlare 前端路由去除 `/openflare` 前缀，业务页面直接挂载于 `/`（如 `/nodes`、`/websites`）；侧栏移除「首页」「我的文件」；旧路径 `/openflare/*`、`/home` 永久重定向至新路径。
 
 ## [v2.3.4] - 2026-06-17