From 1d98503f375ac35a242c0fb8fe81817b3f265655 Mon Sep 17 00:00:00 2001
From: attacker <attacker@gitee.com>
Date: Sun, 14 Jun 2026 10:04:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E7=9B=98=E4=BA=91?=
 =?UTF-8?q?=E6=88=90=E6=9C=AC=E5=A2=9E=E9=95=BF=E7=8E=87=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=A9=B1=E5=8A=A8=E5=8C=96=20=E2=80=94=20?=
 =?UTF-8?q?=E5=9F=BA=E4=BA=8Emonth=5Ftrend=E7=9C=9F=E5=AE=9E=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E7=8E=AF=E6=AF=94(=E5=8E=9F=E7=A1=AC=E7=BC=96?=
 =?UTF-8?q?=E7=A0=81+12.5%=E2=86=92=E5=AE=9E=E6=97=B6+3.1%)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/dev-log.md                               | 21 ++++++++++
 .../src/components/dashboard/Dashboard.tsx    | 38 +++++++++++++++++--
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/docs/dev-log.md b/docs/dev-log.md
index 1771735..c26c48c 100644
--- a/docs/dev-log.md
+++ b/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）
diff --git a/frontend/src/components/dashboard/Dashboard.tsx b/frontend/src/components/dashboard/Dashboard.tsx
index 83df6b9..138056c 100644
--- a/frontend/src/components/dashboard/Dashboard.tsx
+++ b/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>