feat(energy): 氢能总览补全维度（5KPI+收支+客户/加氢站全量+年份切换）

按 BI 页面 (https://bi.lnh2e.com/lingniu/decision/link/0iqP) 完整还原：
- 5 张 KPI：累计加氢量 / 累计加氢费 / 时享加氢获利 / 本月加氢 / 本日加氢
- 月度收支对比柱图：成本支出 vs 客户收入双柱
- 加氢站加氢汇总（全量 55 站）：加氢量+占比+氢费收入+收入占比，进度条
- 客户账单 Top 30：承担方 / 加氢量 / 成本支出 / 应收
- 年份切换（2025/2026），全量数据按选定年份重算
- 关键修正：用 cost_type 区分客户单/我司单（cost_type=2 客户单，cost_type=3 我司单），获利口径与 BI 对齐

后端 /hydrogen/overview 重写：
- 增加 customers/stations/availableYears/year 字段
- KPI 含 yearProfit/monthProfit/todayProfit
- monthly 含 fee/revenue/profit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/modules/energy/HydrogenOverview.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import {
-  BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList,
+  BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList, Legend,
 } from 'recharts';
-import { Fuel, Wallet, CalendarDays, Sparkles } from 'lucide-react';
+import { Fuel, Wallet, CalendarDays, Sparkles, TrendingUp } from 'lucide-react';
 import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
 
@@ -39,8 +39,9 @@ function fmtKg(kg: number): { value: string; unit: string } {
   return { value: kg.toFixed(2), unit: 'Kg' };
 }
 function fmtYuan(yuan: number): { value: string; unit: string } {
-  if (yuan >= 100_000_000) return { value: (yuan / 100_000_000).toFixed(2), unit: '亿元' };
-  if (yuan >= 10_000) {
+  const abs = Math.abs(yuan);
+  if (abs >= 100_000_000) return { value: (yuan / 100_000_000).toFixed(2), unit: '亿元' };
+  if (abs >= 10_000) {
     const w = yuan / 10_000;
     return { value: w.toLocaleString('zh-CN', { maximumFractionDigits: 2 }), unit: '万元' };
   }
@@ -52,7 +53,7 @@ interface KpiCardProps {
   icon: React.ReactNode;
   label: string;
   hero: { value: string; unit: string };
-  rows: { label: string; value: string }[];
+  rows: { label: string; value: string; valueClass?: string }[];
   accentClass: string;
   iconBg: string;
 }
@@ -73,7 +74,7 @@ function KpiCard({ icon, label, hero, rows, accentClass, iconBg }: KpiCardProps)
         {rows.map((r, i) => (
           <div key={i} className="flex items-center justify-between text-[11px] font-bold">
             <span className="text-slate-400">{r.label}</span>
-            <span className="text-slate-700 tabular-nums">{r.value}</span>
+            <span className={`tabular-nums ${r.valueClass ?? 'text-slate-700'}`}>{r.value}</span>
           </div>
         ))}
       </div>
@@ -85,14 +86,15 @@ function KpiCard({ icon, label, hero, rows, accentClass, iconBg }: KpiCardProps)
 export default function HydrogenOverview() {
   const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [year, setYear] = useState<number | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    fetchHydrogenOverview()
+    fetchHydrogenOverview(year ?? undefined)
       .then(d => { if (!cancelled) setData(d); })
       .catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
     return () => { cancelled = true; };
-  }, []);
+  }, [year]);
 
   if (error) {
     return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
@@ -104,9 +106,14 @@ export default function HydrogenOverview() {
   const top5 = data.top5;
   const regions = data.regions;
   const monthly = data.monthly;
+  const customers = data.customers;
+  const stations = data.stations;
+  const availableYears = data.availableYears;
+  const activeYear = data.year;
 
   const yearKgFmt = fmtKg(k.yearKg);
   const yearFeeFmt = fmtYuan(k.yearFee);
+  const yearProfitFmt = fmtYuan(k.yearProfit);
   const ourYearKgFmt = fmtKg(k.ourYearKg);
   const customerYearKgFmt = fmtKg(k.customerYearKg);
   const monthKgFmt = fmtKg(k.monthKg);
@@ -115,18 +122,41 @@ export default function HydrogenOverview() {
   const todayFeeFmt = fmtYuan(k.todayFee);
   const customerYearFee = Math.max(0, k.yearFee - k.ourYearFee);
   const customerYearFeeFmt = fmtYuan(customerYearFee);
-  const todayYear = new Date().getFullYear();
+  const yearRevenueFmt = fmtYuan(k.yearRevenue);
+
+  const profitColor = k.yearProfit >= 0 ? 'text-emerald-600' : 'text-red-600';
+
+  // 月度收支组合数据（推算"年内每月"图）
+  const monthlyDual = monthly.map(m => ({
+    ...m,
+    monthLabel: m.month.slice(5).replace(/^0/, '') + '月',
+  }));
 
   return (
     <div className="flex flex-col gap-3">
-      {/* 顶部说明条 */}
-      <div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 flex items-center justify-between">
+      {/* 顶部说明条 + 年份切换 */}
+      <div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 flex items-center justify-between gap-2">
         <span>数据自 2025-01-01 起 · 每分钟刷新</span>
-        <span className="hidden md:inline text-slate-300">{todayYear} 年累计口径</span>
+        <div className="flex items-center gap-1 bg-slate-50 rounded-lg p-0.5">
+          {availableYears.map(y => {
+            const active = y === activeYear;
+            return (
+              <button
+                key={y}
+                onClick={() => setYear(y)}
+                className={`px-2 py-0.5 text-[11px] font-bold rounded-md transition-all ${
+                  active ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'
+                }`}
+              >
+                {y}
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      {/* KPI 4 卡 */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3">
+      {/* KPI 5 卡 */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
         <KpiCard
           icon={<Fuel size={14} className="text-cyan-600" strokeWidth={2.4} />}
           iconBg="bg-cyan-50"
@@ -149,6 +179,17 @@ export default function HydrogenOverview() {
             { label: '客户承担', value: `¥${customerYearFeeFmt.value} ${customerYearFeeFmt.unit}` },
           ]}
         />
+        <KpiCard
+          icon={<TrendingUp size={14} className="text-emerald-600" strokeWidth={2.4} />}
+          iconBg="bg-emerald-50"
+          accentClass={profitColor}
+          label="时享加氢获利"
+          hero={{ value: `¥${yearProfitFmt.value}`, unit: yearProfitFmt.unit }}
+          rows={[
+            { label: '收入', value: `¥${yearRevenueFmt.value} ${yearRevenueFmt.unit}` },
+            { label: '成本', value: `¥${yearFeeFmt.value} ${yearFeeFmt.unit}` },
+          ]}
+        />
         <KpiCard
           icon={<CalendarDays size={14} className="text-amber-600" strokeWidth={2.4} />}
           iconBg="bg-amber-50"
@@ -173,18 +214,17 @@ export default function HydrogenOverview() {
         />
       </div>
 
-      {/* 月度趋势：年内每月 */}
+      {/* 月度趋势：年内每月加氢量 */}
       {monthly.length > 0 && (
         <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
           <div className="flex items-center justify-between mb-2">
-            <span className="text-sm font-bold text-slate-700">{todayYear} 年月度加氢量</span>
+            <span className="text-sm font-bold text-slate-700">{activeYear} 年月度加氢量</span>
             <span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
           </div>
           <ResponsiveContainer width="100%" height={140}>
-            <BarChart data={monthly} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
+            <BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
               <XAxis
-                dataKey="month"
-                tickFormatter={(v: string) => v.slice(5).replace(/^0/, '') + '月'}
+                dataKey="monthLabel"
                 tick={{ fontSize: 10, fill: '#94a3b8' }}
                 tickLine={false}
                 axisLine={false}
@@ -198,7 +238,7 @@ export default function HydrogenOverview() {
                 cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
               />
               <Bar dataKey="kg" radius={[4, 4, 0, 0]}>
-                {monthly.map((_, i) => (
+                {monthlyDual.map((_, i) => (
                   <Cell key={i} fill="url(#monthlyBarGrad)" />
                 ))}
               </Bar>
@@ -213,6 +253,44 @@ export default function HydrogenOverview() {
         </div>
       )}
 
+      {/* 月度收支对比 */}
+      {monthly.length > 0 && (
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-bold text-slate-700">{activeYear} 年月度收支对比</span>
+            <span className="text-[11px] text-slate-400 font-bold">单位 元</span>
+          </div>
+          <ResponsiveContainer width="100%" height={180}>
+            <BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
+              <XAxis
+                dataKey="monthLabel"
+                tick={{ fontSize: 10, fill: '#94a3b8' }}
+                tickLine={false}
+                axisLine={false}
+                interval={0}
+              />
+              <YAxis hide />
+              <Legend
+                verticalAlign="top"
+                height={20}
+                iconSize={8}
+                wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}
+              />
+              <Tooltip
+                formatter={(v, name) => {
+                  const f = fmtYuan(Number(v ?? 0));
+                  return [`¥${f.value} ${f.unit}`, name];
+                }}
+                contentStyle={{ borderRadius: 12, fontSize: 12 }}
+                cursor={{ fill: 'rgba(148, 163, 184, 0.06)' }}
+              />
+              <Bar dataKey="fee"     name="成本支出" fill="#f59e0b" radius={[3, 3, 0, 0]} />
+              <Bar dataKey="revenue" name="客户收入" fill="#10b981" radius={[3, 3, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+
       {/* Top5 + 区域占比 */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         {/* Top5 加氢站 */}
@@ -299,6 +377,117 @@ export default function HydrogenOverview() {
         </div>
       </div>
 
+      {/* 加氢站加氢汇总（全量） */}
+      {stations.length > 0 && (
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-bold text-slate-700">加氢站加氢汇总</span>
+            <span className="text-[11px] text-slate-400 font-bold">共 {stations.length} 站</span>
+          </div>
+          <div className="overflow-x-auto -mx-1 px-1">
+            <table className="w-full text-[11px]">
+              <thead>
+                <tr className="text-slate-400 font-bold border-b border-slate-100">
+                  <th className="text-left py-1.5 pl-1 w-8">#</th>
+                  <th className="text-left py-1.5">加氢站</th>
+                  <th className="text-right py-1.5 w-20">加氢量</th>
+                  <th className="text-right py-1.5 pl-2 hidden sm:table-cell">占比</th>
+                  <th className="text-right py-1.5 pl-2 w-24">氢费收入</th>
+                  <th className="text-right py-1.5 pr-1 hidden md:table-cell">收入占比</th>
+                </tr>
+              </thead>
+              <tbody>
+                {stations.map((s, i) => {
+                  const kgFmt = fmtKg(s.kg);
+                  const revFmt = fmtYuan(s.revenue);
+                  return (
+                    <tr key={s.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
+                      <td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
+                      <td className="py-1.5 text-slate-700 truncate max-w-[180px]">{s.name}</td>
+                      <td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
+                        {kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
+                      </td>
+                      <td className="py-1.5 pl-2 text-right hidden sm:table-cell">
+                        <div className="inline-flex items-center gap-1.5">
+                          <div className="w-12 h-1 bg-slate-100 rounded-full overflow-hidden">
+                            <div className="h-full bg-gradient-to-r from-cyan-400 to-blue-500" style={{ width: `${Math.min(100, s.share * 100)}%` }} />
+                          </div>
+                          <span className="text-slate-500 tabular-nums">{(s.share * 100).toFixed(1)}%</span>
+                        </div>
+                      </td>
+                      <td className="py-1.5 pl-2 text-right tabular-nums font-bold text-emerald-600">
+                        ¥{revFmt.value}<span className="text-slate-400 font-normal ml-0.5">{revFmt.unit}</span>
+                      </td>
+                      <td className="py-1.5 pr-1 text-right hidden md:table-cell">
+                        <div className="inline-flex items-center gap-1.5">
+                          <div className="w-12 h-1 bg-slate-100 rounded-full overflow-hidden">
+                            <div className="h-full bg-gradient-to-r from-emerald-400 to-emerald-600" style={{ width: `${Math.min(100, s.revenueShare * 100)}%` }} />
+                          </div>
+                          <span className="text-slate-500 tabular-nums">{(s.revenueShare * 100).toFixed(1)}%</span>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* 客户账单汇总 Top */}
+      {customers.length > 0 && (
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-bold text-slate-700">客户账单汇总</span>
+            <span className="text-[11px] text-slate-400 font-bold">Top {customers.length}</span>
+          </div>
+          <div className="overflow-x-auto -mx-1 px-1">
+            <table className="w-full text-[11px]">
+              <thead>
+                <tr className="text-slate-400 font-bold border-b border-slate-100">
+                  <th className="text-left py-1.5 pl-1 w-8">#</th>
+                  <th className="text-left py-1.5">客户</th>
+                  <th className="text-center py-1.5 w-14 hidden sm:table-cell">承担方</th>
+                  <th className="text-right py-1.5 w-20">加氢量</th>
+                  <th className="text-right py-1.5 pl-2 w-24">成本支出</th>
+                  <th className="text-right py-1.5 pr-1 w-24 hidden md:table-cell">应收</th>
+                </tr>
+              </thead>
+              <tbody>
+                {customers.map((c2, i) => {
+                  const kgFmt = fmtKg(c2.kg);
+                  const costFmt = fmtYuan(c2.cost);
+                  const revFmt = fmtYuan(c2.revenue);
+                  return (
+                    <tr key={c2.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
+                      <td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
+                      <td className="py-1.5 text-slate-700 truncate max-w-[200px]">{c2.name}</td>
+                      <td className="py-1.5 text-center hidden sm:table-cell">
+                        {c2.payer === 'lingniu' ? (
+                          <span className="px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 text-[10px] font-bold">羚牛</span>
+                        ) : (
+                          <span className="px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 text-[10px] font-bold">客户</span>
+                        )}
+                      </td>
+                      <td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
+                        {kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
+                      </td>
+                      <td className="py-1.5 pl-2 text-right tabular-nums text-amber-600 font-bold">
+                        ¥{costFmt.value}<span className="text-slate-400 font-normal ml-0.5">{costFmt.unit}</span>
+                      </td>
+                      <td className="py-1.5 pr-1 text-right tabular-nums text-emerald-600 font-bold hidden md:table-cell">
+                        ¥{revFmt.value}<span className="text-slate-400 font-normal ml-0.5">{revFmt.unit}</span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
       <RotatingFooterHint />
     </div>
   );
@@ -311,9 +500,9 @@ function HydrogenOverviewSkeleton() {
         <div className="h-3 w-44 bg-slate-100 rounded" />
       </div>
 
-      {/* 4 卡占位 */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3">
-        {Array.from({ length: 4 }).map((_, i) => (
+      {/* 5 卡占位 */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
+        {Array.from({ length: 5 }).map((_, i) => (
           <div key={i} className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 space-y-2">
             <div className="flex items-center gap-2">
               <div className="w-7 h-7 rounded-xl bg-slate-100" />

src/modules/energy/api.ts

@@ -1,6 +1,7 @@
 import { fetchJson } from '../../auth/api-client';
 import type {
   HydrogenKpi, HydrogenStationTop, HydrogenRegionShare, HydrogenMonthlyPoint, HydrogenDailyRow,
+  HydrogenCustomerRow, HydrogenStationFull,
   ElectricKpi, ElectricDailyRow, ElectricMonthGroup,
   CustomerType, DateQuickPick,
 } from './types';
@@ -12,10 +13,15 @@ export interface HydrogenOverviewResponse {
   top5: HydrogenStationTop[];
   regions: HydrogenRegionShare[];
   monthly: HydrogenMonthlyPoint[];
+  customers: HydrogenCustomerRow[];
+  stations: HydrogenStationFull[];
+  availableYears: number[];
+  year: number;
 }
 
-export function fetchHydrogenOverview(): Promise<HydrogenOverviewResponse> {
-  return fetchJson<HydrogenOverviewResponse>(`${BASE}/hydrogen/overview`);
+export function fetchHydrogenOverview(year?: number): Promise<HydrogenOverviewResponse> {
+  const q = year ? `?year=${year}` : '';
+  return fetchJson<HydrogenOverviewResponse>(`${BASE}/hydrogen/overview${q}`);
 }
 
 export function fetchHydrogenDaily(range: DateQuickPick, customer: CustomerType): Promise<HydrogenDailyRow[]> {

src/modules/energy/types.ts

@@ -4,13 +4,19 @@ export type DateQuickPick = 'thisWeek' | 'thisMonth' | 'last15';
 export interface HydrogenKpi {
   yearKg: number;
   yearFee: number;
+  yearRevenue: number;
+  yearProfit: number;
   ourYearKg: number;
   ourYearFee: number;
   customerYearKg: number;
   monthKg: number;
   monthFee: number;
+  monthRevenue: number;
+  monthProfit: number;
   todayKg: number;
   todayFee: number;
+  todayRevenue: number;
+  todayProfit: number;
   lingniuBornKg: number;
   lingniuBornFee: number;
 }
@@ -33,6 +39,24 @@ export interface HydrogenMonthlyPoint {
   month: string;  // YYYY-MM
   kg: number;
   fee: number;
+  revenue: number;
+  profit: number;
+}
+
+export interface HydrogenCustomerRow {
+  name: string;
+  payer: 'lingniu' | 'customer';
+  kg: number;
+  cost: number;
+  revenue: number;
+}
+
+export interface HydrogenStationFull {
+  name: string;
+  kg: number;
+  revenue: number;
+  share: number;       // 加氢量占比
+  revenueShare: number;// 收入占比
 }
 
 export interface HydrogenStationRow {