feat: 更新节点详情页，添加健康事件过滤和流量分析功能

atsf_server/web/components/data/rank-chart.tsx

@@ -18,20 +18,24 @@ type RankChartProps = {
 
 const defaultFormatter = (value: number) => value.toLocaleString('zh-CN');
 
+function getChartValue(params: unknown) {
+  if (typeof params !== 'object' || params === null || !('value' in params)) {
+    return 0;
+  }
+  const rawValue = (params as { value?: unknown }).value;
+  if (Array.isArray(rawValue)) {
+    const candidate = rawValue[0];
+    return typeof candidate === 'number' ? candidate : 0;
+  }
+  return typeof rawValue === 'number' ? rawValue : 0;
+}
+
 export function RankChart({
   items,
   color,
   valueFormatter = defaultFormatter,
   emptyMessage = '暂无分布数据',
 }: RankChartProps) {
-  if (items.length === 0) {
-    return (
-      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
-        {emptyMessage}
-      </div>
-    );
-  }
-
   const option = useMemo<EChartsOption>(
     () => ({
       animationDuration: 400,
@@ -100,14 +104,7 @@ export function RankChart({
             show: true,
             position: 'right',
             color: '#e2e8f0',
-            formatter: (params: any) => {
-              const rawValue = Array.isArray(params.value)
-                ? params.value[0]
-                : params.value;
-              return valueFormatter(
-                typeof rawValue === 'number' ? rawValue : 0,
-              );
-            },
+            formatter: (params: unknown) => valueFormatter(getChartValue(params)),
           },
         },
       ],
@@ -115,6 +112,14 @@ export function RankChart({
     [color, items, valueFormatter],
   );
 
+  if (items.length === 0) {
+    return (
+      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
+        {emptyMessage}
+      </div>
+    );
+  }
+
   return (
     <ReactECharts
       option={option}

atsf_server/web/components/data/trend-chart.tsx

@@ -22,14 +22,6 @@ type TrendChartProps = {
 const defaultFormatter = (value: number) => value.toLocaleString('zh-CN');
 
 export function TrendChart({ labels, series, height = 220 }: TrendChartProps) {
-  if (labels.length === 0 || series.length === 0) {
-    return (
-      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
-        暂无趋势数据
-      </div>
-    );
-  }
-
   const option = useMemo<EChartsOption>(() => {
     const maxValue =
       Math.max(
@@ -120,6 +112,14 @@ export function TrendChart({ labels, series, height = 220 }: TrendChartProps) {
     };
   }, [labels, series]);
 
+  if (labels.length === 0 || series.length === 0) {
+    return (
+      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
+        暂无趋势数据
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap gap-3">