From bdd039a2c4404c32589391622cc49d97f85e4dd1 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Tue, 28 Apr 2026 12:01:13 +0800
Subject: [PATCH] refactor(energy): visual polish + KPI/table self-consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mock: derive ELECTRIC_KPI month/today from APR_DAYS so card and table
  totals always agree (previously ¥8,437 vs ¥9,151 mismatch)
- overview: Top5 bar chart now shows rank badges (1-5) and inline value
  labels at bar ends — readable without hover
- overview: donut "年合计 362.43T" moves into the chart center
  (previously below as a separate line, defeating the donut hole)
- daily: rows with |chainPct| ≥ 30% get a tinted background
  (green for spikes, red for drops) for at-a-glance abnormal-day spotting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/modules/energy/HydrogenDaily.tsx    |  8 ++-
 src/modules/energy/HydrogenOverview.tsx | 80 ++++++++++++++++++-------
 src/modules/energy/mock.ts              | 26 ++++----
 3 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/modules/energy/HydrogenDaily.tsx b/src/modules/energy/HydrogenDaily.tsx
index 1794b81..b58fbb6 100644
--- a/src/modules/energy/HydrogenDaily.tsx
+++ b/src/modules/energy/HydrogenDaily.tsx
@@ -120,11 +120,15 @@ export default function HydrogenDaily() {
           <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">暂无数据</div>
         ) : rows.map(r => {
           const open = expanded.has(r.date);
+          const isAbnormal = Math.abs(r.chainPct) >= 0.3;
+          const abnormalBg = isAbnormal
+            ? r.chainPct > 0 ? 'bg-emerald-50/40' : 'bg-red-50/40'
+            : '';
           return (
-            <div key={r.date} className="border-t border-slate-100">
+            <div key={r.date} className={`border-t border-slate-100 ${abnormalBg}`}>
               <button
                 onClick={() => toggle(r.date)}
-                className="w-full grid grid-cols-[1fr_auto_auto] md:grid-cols-[1fr_140px_120px_120px] gap-2 px-3 py-2.5 text-left hover:bg-slate-50 transition-colors"
+                className="w-full grid grid-cols-[1fr_auto_auto] md:grid-cols-[1fr_140px_120px_120px] gap-2 px-3 py-2.5 text-left hover:bg-slate-50/60 transition-colors"
               >
                 <span className="flex items-center gap-1 text-[12px] text-slate-700 font-bold">
                   <ChevronRight size={14} className={`transition-transform ${open ? 'rotate-90' : ''} text-slate-400`} />
diff --git a/src/modules/energy/HydrogenOverview.tsx b/src/modules/energy/HydrogenOverview.tsx
index c256ed3..642486e 100644
--- a/src/modules/energy/HydrogenOverview.tsx
+++ b/src/modules/energy/HydrogenOverview.tsx
@@ -1,7 +1,28 @@
 import { Fuel, Wallet, Coins, CalendarClock } from 'lucide-react';
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList } from 'recharts';
 import { HYDROGEN_KPI, HYDROGEN_STATIONS_TOP5, HYDROGEN_REGION_SHARE } from './mock';
 
+interface YAxisTickProps {
+  x?: number;
+  y?: number;
+  index?: number;
+  payload?: { value: string };
+}
+
+function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <circle cx={-158} cy={0} r={9} fill="#3b82f6" />
+      <text x={-158} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
+        {index + 1}
+      </text>
+      <text x={-144} y={4} textAnchor="start" fontSize={11} fill="#475569">
+        {payload?.value}
+      </text>
+    </g>
+  );
+}
+
 const REGION_COLORS = [
   '#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
   '#10b981', '#ef4444', '#6366f1', '#14b8a6',
@@ -84,14 +105,14 @@ export default function HydrogenOverview() {
             <span className="text-sm font-bold text-slate-700">加氢站加注量 Top5</span>
             <span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
           </div>
-          <ResponsiveContainer width="100%" height={240}>
-            <BarChart data={HYDROGEN_STATIONS_TOP5} layout="vertical" margin={{ top: 0, right: 60, bottom: 0, left: 0 }}>
+          <ResponsiveContainer width="100%" height={260}>
+            <BarChart data={HYDROGEN_STATIONS_TOP5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 0 }}>
               <XAxis type="number" hide />
               <YAxis
                 type="category"
                 dataKey="name"
-                width={150}
-                tick={{ fontSize: 11, fill: '#475569' }}
+                width={170}
+                tick={<RankYAxisTick />}
                 tickLine={false}
                 axisLine={false}
               />
@@ -103,6 +124,14 @@ export default function HydrogenOverview() {
                 {HYDROGEN_STATIONS_TOP5.map((_, i) => (
                   <Cell key={i} fill={`url(#topBarGrad)`} />
                 ))}
+                <LabelList
+                  dataKey="kg"
+                  position="right"
+                  formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`}
+                  fill="#475569"
+                  fontSize={11}
+                  fontWeight={700}
+                />
               </Bar>
               <defs>
                 <linearGradient id="topBarGrad" x1="0" x2="1" y1="0" y2="0">
@@ -117,23 +146,29 @@ export default function HydrogenOverview() {
         <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 flex flex-col gap-2">
           <span className="text-sm font-bold text-slate-700">各区域加氢占比</span>
           <div className="flex items-center gap-2">
-            <ResponsiveContainer width="50%" height={200}>
-              <PieChart>
-                <Pie
-                  data={HYDROGEN_REGION_SHARE}
-                  dataKey="kg"
-                  nameKey="region"
-                  innerRadius={48}
-                  outerRadius={80}
-                  paddingAngle={1}
-                >
-                  {HYDROGEN_REGION_SHARE.map((_, i) => (
-                    <Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
-                  ))}
-                </Pie>
-                <Tooltip formatter={(v) => `${(Number(v ?? 0) / 1000).toFixed(2)}T`} contentStyle={{ borderRadius: 12, fontSize: 12 }} />
-              </PieChart>
-            </ResponsiveContainer>
+            <div className="relative w-1/2 h-[200px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={HYDROGEN_REGION_SHARE}
+                    dataKey="kg"
+                    nameKey="region"
+                    innerRadius={48}
+                    outerRadius={80}
+                    paddingAngle={1}
+                  >
+                    {HYDROGEN_REGION_SHARE.map((_, i) => (
+                      <Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
+                    ))}
+                  </Pie>
+                  <Tooltip formatter={(v) => `${(Number(v ?? 0) / 1000).toFixed(2)}T`} contentStyle={{ borderRadius: 12, fontSize: 12 }} />
+                </PieChart>
+              </ResponsiveContainer>
+              <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+                <div className="text-[10px] text-slate-400 font-bold">年合计</div>
+                <div className="text-base font-bold text-slate-700 leading-tight">{(HYDROGEN_KPI.yearKg / 1000).toFixed(2)}T</div>
+              </div>
+            </div>
             <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
               {HYDROGEN_REGION_SHARE.map((r, i) => (
                 <div key={r.region} className="flex items-center gap-1.5">
@@ -144,7 +179,6 @@ export default function HydrogenOverview() {
               ))}
             </div>
           </div>
-          <div className="text-center text-[11px] text-slate-400 font-bold pt-1">年合计 {(HYDROGEN_KPI.yearKg / 1000).toFixed(2)}T</div>
         </div>
       </div>
     </div>
diff --git a/src/modules/energy/mock.ts b/src/modules/energy/mock.ts
index f848879..018e969 100644
--- a/src/modules/energy/mock.ts
+++ b/src/modules/energy/mock.ts
@@ -72,16 +72,6 @@ export const HYDROGEN_DAILY: HydrogenDailyRow[] = Array.from({ length: 30 }, (_,
   };
 });
 
-export const ELECTRIC_KPI: ElectricKpi = {
-  totalKwh: 817_632.24,
-  totalFee: 151_542.92,
-  monthKwh:  42_318.56,
-  monthFee:   8_437.12,
-  todayKwh:     510.91,
-  todayFee:     184.82,
-  todayChainPct: -0.821,
-};
-
 const APR_DAYS: Array<[string, number, number]> = [
   ['2026-04-26', 510.91,  184.82],
   ['2026-04-25', 2859.61, 314.20],
@@ -113,6 +103,22 @@ function buildElectricRows(days: Array<[string, number, number]>) {
   });
 }
 
+const APR_KWH_SUM = APR_DAYS.reduce((a, [, k]) => a + k, 0);
+const APR_FEE_SUM = APR_DAYS.reduce((a, [, , f]) => a + f, 0);
+const [TODAY_DATE, TODAY_KWH, TODAY_FEE] = APR_DAYS[0];
+const [, PREV_KWH] = APR_DAYS[1];
+void TODAY_DATE;
+
+export const ELECTRIC_KPI: ElectricKpi = {
+  totalKwh: 817_632.24,
+  totalFee: 151_542.92,
+  monthKwh: APR_KWH_SUM,
+  monthFee: APR_FEE_SUM,
+  todayKwh: TODAY_KWH,
+  todayFee: TODAY_FEE,
+  todayChainPct: (TODAY_KWH - PREV_KWH) / PREV_KWH,
+};
+
 export const ELECTRIC_MONTHLY: ElectricMonthGroup[] = [
   {
     month: '2026-04',