feat: 仪表盘云成本增长率标签数据驱动化 — 基于month_trend真实计算环比(原硬编码+12.5%→实时+3.1%)

frontend/src/components/dashboard/Dashboard.tsx

@@ -53,6 +53,26 @@ const CLOUD_COLORS: Record<string, string> = {
 };
 const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];
 
+// 计算月度环比变化（基于 month_trend 最后两个月）
+function computeMonthChange(monthTrend: any[]): {
+  pct: number;
+  label: string;
+  direction: 'up' | 'down' | 'neutral';
+} {
+  if (!monthTrend || monthTrend.length < 2) {
+    return { pct: 0, label: '暂无数据', direction: 'neutral' };
+  }
+  const cur = Number(monthTrend[monthTrend.length - 1].cost ?? 0);
+  const prev = Number(monthTrend[monthTrend.length - 2].cost ?? 0);
+  if (prev === 0) {
+    return { pct: 0, label: cur > 0 ? '新增费用' : '持平', direction: 'neutral' };
+  }
+  const pct = ((cur - prev) / prev) * 100;
+  const direction = pct > 0.05 ? 'up' : pct < -0.05 ? 'down' : 'neutral';
+  const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% 较上月`;
+  return { pct, label, direction };
+}
+
 // 根据平均值生成24小时趋势数据（无实时指标时使用）
 function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
   const data = [];
@@ -149,6 +169,7 @@ function CostOverviewCard({ costStats }: { costStats: any }) {
   const monthlyData = monthTrend.map((m) => ({ month: m.month, cost: m.cost }));
   const totalCost =
     costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
+  const costChange = computeMonthChange(monthTrend);
 
   return (
     <Card className="bg-slate-900 border-slate-800">
@@ -160,7 +181,15 @@ function CostOverviewCard({ costStats }: { costStats: any }) {
           </div>
           <div className="text-right">
             <p className="text-2xl font-bold text-slate-100">¥{Number(totalCost).toLocaleString()}</p>
-            <p className="text-xs text-emerald-400">+12.5% 较上月</p>
+            <p className={`text-xs ${
+              costChange.direction === 'up'
+                ? 'text-emerald-400'
+                : costChange.direction === 'down'
+                ? 'text-red-400'
+                : 'text-slate-500'
+            }`}>
+              {costChange.label}
+            </p>
           </div>
         </div>
       </CardHeader>
@@ -820,6 +849,7 @@ export function Dashboard() {
   const k8sStats = stats?.k8s_stats;
   const alertStats = stats?.alert_stats;
   const costStats = stats?.cost_stats;
+  const costChange = computeMonthChange(costStats?.month_trend);
 
   return (
     <div className="space-y-6">
@@ -873,10 +903,10 @@ export function Dashboard() {
         <StatCard
           title="本月云成本"
           value={`¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`}
-          description="较上月 +12.5%"
+          description={costChange.label}
           icon={DollarSign}
-          trend="up"
-          trendValue="+12.5%"
+          trend={costChange.direction}
+          trendValue={`${costChange.pct > 0 ? '+' : ''}${costChange.pct.toFixed(1)}%`}
           color="orange"
         />
       </div>