refactor: 使用 React Query 优化统计数据管理

- 移除手动 loading 状态管理,使用 React Query 统一处理
- 添加 5 秒自动刷新统计数据功能
- 简化组件代码,提升用户体验
- 移除冗余的加载状态 UI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: zsio

src/app/dashboard/_components/statistics/chart.tsx

@@ -56,14 +56,13 @@ const getUserColor = (index: number) =>
 export interface UserStatisticsChartProps {
   data: UserStatisticsData;
   onTimeRangeChange?: (timeRange: TimeRange) => void;
-  loading?: boolean;
 }
 
 /**
  * 用户统计图表组件
  * 展示用户的消费金额和API调用次数
  */
-export function UserStatisticsChart({ data, onTimeRangeChange, loading = false }: UserStatisticsChartProps) {
+export function UserStatisticsChart({ data, onTimeRangeChange }: UserStatisticsChartProps) {
   const [activeChart, setActiveChart] = React.useState<"cost" | "calls">("cost")
 
   // 动态生成图表配置
@@ -247,12 +246,7 @@ export function UserStatisticsChart({ data, onTimeRangeChange, loading = false }
         )}
       >
         <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 lg:!py-0">
-          <div className="flex items-center gap-2">
-            <CardTitle>使用统计</CardTitle>
-            {loading && (
-              <div className="h-4 w-4 animate-spin rounded-full border-2 border-orange-600 border-t-transparent" />
-            )}
-          </div>
+          <CardTitle>使用统计</CardTitle>
           <CardDescription>
             {getTimeRangeDescription()} · {getAggregationLabel()}
           </CardDescription>
@@ -262,7 +256,6 @@ export function UserStatisticsChart({ data, onTimeRangeChange, loading = false }
           <TimeRangeSelector
             value={data.timeRange}
             onChange={onTimeRangeChange}
-            disabled={loading}
             className="border-t lg:border-t-0"
           />
         )}

src/app/dashboard/_components/statistics/wrapper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
 import { UserStatisticsChart } from "./chart";
 import { getUserStatistics } from "@/actions/statistics";
 import type { TimeRange, UserStatisticsData } from "@/types/statistics";
@@ -11,6 +12,16 @@ interface StatisticsWrapperProps {
   initialData?: UserStatisticsData;
 }
 
+const STATISTICS_REFRESH_INTERVAL = 5000; // 5秒刷新一次
+
+async function fetchStatistics(timeRange: TimeRange): Promise<UserStatisticsData> {
+  const result = await getUserStatistics(timeRange);
+  if (result.ok && result.data) {
+    return result.data;
+  }
+  throw new Error(result.error || '获取统计数据失败');
+}
+
 /**
  * 统计组件包装器
  * 处理时间范围状态管理和数据获取
@@ -19,71 +30,39 @@ export function StatisticsWrapper({ initialData }: StatisticsWrapperProps) {
   const [timeRange, setTimeRange] = React.useState<TimeRange>(
     initialData?.timeRange ?? DEFAULT_TIME_RANGE
   );
-  const [data, setData] = React.useState<UserStatisticsData | null>(initialData ?? null);
-  const [loading, setLoading] = React.useState(false);
-
-  // 防抖获取统计数据
-  const fetchStatistics = React.useCallback(async (newTimeRange: TimeRange) => {
-    if (loading) return; // 防止重复请求
-
-    setLoading(true);
-    try {
-      const result = await getUserStatistics(newTimeRange);
-      if (!result.ok) {
-        toast.error(result.error || '获取统计数据失败');
-        return;
-      }
 
-      if (!result.data) {
-        toast.error('统计数据为空');
-        return;
-      }
+  const { data, error } = useQuery<UserStatisticsData, Error>({
+    queryKey: ["user-statistics", timeRange],
+    queryFn: () => fetchStatistics(timeRange),
+    initialData,
+    refetchInterval: STATISTICS_REFRESH_INTERVAL,
+  });
 
-      setData(result.data);
-      setTimeRange(newTimeRange);
-    } catch (error) {
-      console.error('Failed to fetch statistics:', error);
-      toast.error('获取统计数据失败');
-    } finally {
-      // 添加一个小延迟让用户看到加载状态，避免闪烁
-      setTimeout(() => setLoading(false), 150);
+  // 错误提示
+  React.useEffect(() => {
+    if (error) {
+      toast.error(error.message);
     }
-  }, [loading]);
+  }, [error]);
 
   // 处理时间范围变化
   const handleTimeRangeChange = React.useCallback((newTimeRange: TimeRange) => {
-    if (newTimeRange !== timeRange && !loading) {
-      fetchStatistics(newTimeRange);
-    }
-  }, [timeRange, loading, fetchStatistics]);
+    setTimeRange(newTimeRange);
+  }, []);
 
-  // 如果没有数据且不在加载中，显示空状态
-  if (!data && !loading) {
+  // 如果没有数据，显示空状态
+  if (!data) {
     return (
       <div className="text-center py-8 text-muted-foreground">
         暂无统计数据
       </div>
     );
   }
 
-  // 如果有数据，显示图表
-  if (data) {
-    return (
-      <UserStatisticsChart
-        data={data}
-        onTimeRangeChange={handleTimeRangeChange}
-        loading={loading}
-      />
-    );
-  }
-
-  // 纯加载状态
   return (
-    <div className="text-center py-8">
-      <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
-        <div className="h-4 w-4 animate-spin rounded-full border-2 border-orange-600 border-t-transparent" />
-        加载统计数据...
-      </div>
-    </div>
+    <UserStatisticsChart
+      data={data}
+      onTimeRangeChange={handleTimeRangeChange}
+    />
   );
 }