From dc1f0326fcc0c140dbebd187a2380db9759e1dda Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Tue, 28 Apr 2026 11:27:38 +0800
Subject: [PATCH] feat(energy): hydrogen overview Top5 bar + region donut

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/modules/energy/HydrogenOverview.tsx | 79 ++++++++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)

diff --git a/src/modules/energy/HydrogenOverview.tsx b/src/modules/energy/HydrogenOverview.tsx
index f0fc22c..8cc2443 100644
--- a/src/modules/energy/HydrogenOverview.tsx
+++ b/src/modules/energy/HydrogenOverview.tsx
@@ -1,5 +1,12 @@
 import { Fuel, Wallet, Coins, CalendarClock } from 'lucide-react';
-import { HYDROGEN_KPI } from './mock';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip } from 'recharts';
+import { HYDROGEN_KPI, HYDROGEN_STATIONS_TOP5, HYDROGEN_REGION_SHARE } from './mock';
+
+const REGION_COLORS = [
+  '#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
+  '#10b981', '#ef4444', '#6366f1', '#14b8a6',
+  '#94a3b8',
+];
 
 function fmtKg(kg: number) {
   if (kg >= 1000) return `${(kg / 1000).toFixed(2)}T`;
@@ -70,6 +77,76 @@ export default function HydrogenOverview() {
           </div>
         </div>
       </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {/* Top5 加氢站 */}
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
+          <div className="flex items-center justify-between mb-3">
+            <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 }}>
+              <XAxis type="number" hide />
+              <YAxis
+                type="category"
+                dataKey="name"
+                width={120}
+                tick={{ fontSize: 11, fill: '#475569' }}
+                tickLine={false}
+                axisLine={false}
+              />
+              <Tooltip
+                formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN')} Kg`}
+                contentStyle={{ borderRadius: 12, fontSize: 12 }}
+              />
+              <Bar dataKey="kg" radius={[6, 6, 6, 6]}>
+                {HYDROGEN_STATIONS_TOP5.map((_, i) => (
+                  <Cell key={i} fill={`url(#topBarGrad)`} />
+                ))}
+              </Bar>
+              <defs>
+                <linearGradient id="topBarGrad" x1="0" x2="1" y1="0" y2="0">
+                  <stop offset="0%" stopColor="#3b82f6" />
+                  <stop offset="100%" stopColor="#22d3ee" />
+                </linearGradient>
+              </defs>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+        {/* 区域占比环 */}
+        <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="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">
+                  <span className="w-2 h-2 rounded-full" style={{ background: REGION_COLORS[i % REGION_COLORS.length] }} />
+                  <span className="text-slate-600">{r.region}</span>
+                  <span className="text-slate-400 ml-auto font-bold">{(r.share * 100).toFixed(1)}%</span>
+                </div>
+              ))}
+            </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>
   );
 }