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

docs/dev-log.md

@@ -239,3 +239,24 @@ cd ~/devops/aiops
   - 仪表盘「+12.5%」等增长率标签从硬编码改为基于 month_trend 真实计算
   - 告警规则关联通知渠道 — 规则创建时可选择已配置的通知渠道
   - 域名列表到期时间显示格式优化（当前显示完整 RFC3339，可截取 YYYY-MM-DD）
+
+## 2026-06-14 10:15 自动推进
+
+- **任务**: 仪表盘云成本增长率标签从硬编码改为基于 month_trend 真实计算 — 消除虚假的「+12.5%」展示
+- **修改**:
+  - `frontend/src/components/dashboard/Dashboard.tsx` — 新增 `computeMonthChange(monthTrend)` 工具函数：基于 month_trend 最后两个月（本月 vs 上月）计算环比百分比，返回 `{pct, label, direction}`；direction 区分 up/down/neutral 并驱动颜色（涨=emerald/跌=red/持平=slate）
+    - CostOverviewCard 卡片头：将硬编码 `+12.5% 较上月` 替换为 `costChange.label`（动态标签 + 颜色）
+    - 顶部「本月云成本」StatCard：description/trend/trendValue 三处全部改为动态计算（原硬编码 trend="up" trendValue="+12.5%" description="较上月 +12.5%"）
+- **结果**:
+  - `npx tsc --noEmit` 类型检查通过 ✅
+  - `npm run build` 构建通过 ✅
+  - 浏览器验证: 顶部 StatCard 显示 `¥96,700 → +3.1%`（原 +12.5%）✅
+  - 浏览器验证: 云成本概览卡片头显示 `¥536,685 → +3.1% 较上月`（原 +12.5% 较上月）✅
+  - 计算依据: month_trend 5月=93799, 6月=96700 → (96700-93799)/93799×100 ≈ +3.1% ✅
+  - 无 console 错误 ✅
+  - 后端/前端服务运行中: 8080 + 5173 ✅
+- **下一步建议**:
+  - 服务器「+3 本月」/ 告警「-5 本周」增长率标签仍为硬编码（需后端新增历史快照数据才能真实计算，属较大改动）
+  - K8s 集群拓扑图(TopologyView)前后端数据联调
+  - 告警规则关联通知渠道 — 规则创建时可选择已配置的通知渠道
+  - 域名列表到期时间显示格式优化（截取 YYYY-MM-DD）

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>