feat(wavelet): 总览仪表盘对齐旧前端 ECharts 图表样式

将请求/容量趋势图迁移至 ECharts，并补充网络磁盘趋势、Top 节点榜单、
来源分布、状态码分布与 Top Domain 板块。

Wavelet/frontend/app/(main)/components/dashboard/capacity-trend-chart.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Area, AreaChart, CartesianGrid, Line, XAxis, YAxis } from 'recharts';
-
+import {TrendChart} from '@/components/data/trend-chart';
 import {
   Card,
   CardContent,
@@ -9,54 +8,11 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/ui/chart';
-import type { CapacityTrendPoint } from '@/lib/services/openflare';
+import type {CapacityTrendPoint} from '@/lib/services/openflare';
 
-import { formatPercent, formatTrendHour } from './dashboard-utils';
-
-const chartConfig = {
-  cpu: {
-    label: '平均 CPU',
-    color: 'hsl(var(--chart-2))',
-  },
-  memory: {
-    label: '平均内存',
-    color: 'hsl(var(--chart-3))',
-  },
-} satisfies ChartConfig;
-
-export function CapacityTrendChart({ points }: { points: CapacityTrendPoint[] }) {
-  const data = points.map((point) => ({
-    hour: formatTrendHour(point.bucket_started_at),
-    cpu: point.average_cpu_usage_percent,
-    memory: point.average_memory_usage_percent,
-  }));
-
-  if (data.length === 0) {
-    return (
-      <Card className="border-dashed shadow-none">
-        <CardHeader>
-          <CardTitle className="text-sm font-semibold">24 小时容量趋势</CardTitle>
-          <CardDescription className="text-xs">
-            按小时聚合 CPU 与内存使用率，判断整体容量是否持续紧张。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
-            暂无趋势数据
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
+import {formatPercent, formatTrendHour} from './dashboard-utils';
 
+export function CapacityTrendChart({points}: {points: CapacityTrendPoint[]}) {
   return (
     <Card className="border-dashed shadow-none">
       <CardHeader>
@@ -65,64 +21,27 @@ export function CapacityTrendChart({ points }: { points: CapacityTrendPoint[] })
           按小时聚合 CPU 与内存使用率，判断整体容量是否持续紧张。
         </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="capacityCpuFill" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="var(--color-cpu)" stopOpacity={0.2} />
-                  <stop offset="95%" stopColor="var(--color-cpu)" 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}
-                domain={[0, 100]}
-                tickFormatter={(value) => formatPercent(Number(value))}
-              />
-              <ChartTooltip
-                cursor={false}
-                content={
-                  <ChartTooltipContent
-                    formatter={(value, name) => (
-                      <span className="font-mono tabular-nums">
-                        {formatPercent(Number(value))}
-                        <span className="ml-1 text-muted-foreground">
-                          {name === 'cpu' ? 'CPU' : '内存'}
-                        </span>
-                      </span>
-                    )}
-                  />
-                }
-              />
-              <Area
-                type="monotone"
-                dataKey="cpu"
-                stroke="var(--color-cpu)"
-                fill="url(#capacityCpuFill)"
-                strokeWidth={2}
-              />
-              <Line
-                type="monotone"
-                dataKey="memory"
-                stroke="var(--color-memory)"
-                strokeWidth={2}
-                dot={false}
-              />
-              <ChartLegend content={<ChartLegendContent />} />
-            </AreaChart>
-          </ChartContainer>
-        </div>
+      <CardContent>
+        <TrendChart
+          labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
+          yAxisValueFormatter={formatPercent}
+          series={[
+            {
+              label: '平均 CPU',
+              color: '#0f766e',
+              fillColor: 'rgba(15, 118, 110, 0.15)',
+              variant: 'area',
+              values: points.map((point) => point.average_cpu_usage_percent),
+              valueFormatter: formatPercent,
+            },
+            {
+              label: '平均内存',
+              color: '#2563eb',
+              values: points.map((point) => point.average_memory_usage_percent),
+              valueFormatter: formatPercent,
+            },
+          ]}
+        />
       </CardContent>
     </Card>
   );