revert: restore v1.1.14 (37a9f303)

src/modules/energy/HydrogenOverview.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
+import { DistributionCharts } from './hydrogen-overview/components/DistributionCharts';
+import { HydrogenOverviewSkeleton } from './hydrogen-overview/components/HydrogenOverviewSkeleton';
+import { InsightCards } from './hydrogen-overview/components/InsightCards';
+import { KpiSection } from './hydrogen-overview/components/KpiSection';
+import { MonthlyCharts } from './hydrogen-overview/components/MonthlyCharts';
+import { OverviewHeader } from './hydrogen-overview/components/OverviewHeader';
+import { RefreshOverlay } from './hydrogen-overview/components/RefreshOverlay';
+import { CustomerSummaryTable, StationSummaryTable } from './hydrogen-overview/components/SummaryTables';
+import { deriveOverviewMetrics, formatYuan as fmtYuan } from './hydrogen-overview/model';
+
+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);
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastRefreshAt, setLastRefreshAt] = useState<number>(0);
+  const refreshSeq = useRef(0);
+
+  const load = useCallback(async (selectedYear: number | null, force: boolean) => {
+    const seq = ++refreshSeq.current;
+    setRefreshing(true);
+    try {
+      const d = await fetchHydrogenOverview(selectedYear ?? undefined, force);
+      if (seq !== refreshSeq.current) return; // outdated
+      setData(d);
+      setError(null);
+      setLastRefreshAt(Date.now());
+    } catch (e) {
+      if (seq !== refreshSeq.current) return;
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      if (seq === refreshSeq.current) setRefreshing(false);
+    }
+  }, []);
+
+  // 初始加载 + 年份切换：用 force=false 命中热缓存
+  useEffect(() => { void load(year, false); }, [year, load]);
+
+  // 客户端兜底自动刷新：每 60s 静默拉一次（命中后端热缓存，几乎零成本）
+  useEffect(() => {
+    const t = setInterval(() => { void load(year, false); }, 60_000);
+    return () => clearInterval(t);
+  }, [year, load]);
+
+  if (error && !data) {
+    return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
+  }
+  if (!data) {
+    return <HydrogenOverviewSkeleton />;
+  }
+
+  const { kpi, top5, regions, monthly, customers, stations, availableYears, year: activeYear } = data;
+  const {
+    monthAvgKg,
+    bestMonth,
+    latestMonth,
+    monthMomentum,
+    top5Share,
+    profitYield,
+    stationAvgKg,
+    monthlyDual,
+  } = deriveOverviewMetrics(data);
+  const yearProfitFmt = fmtYuan(kpi.yearProfit);
+  const yearRevenueFmt = fmtYuan(kpi.yearRevenue);
+
+  return (
+    <div className="flex flex-col gap-3 relative">
+      <OverviewHeader
+        activeYear={activeYear}
+        availableYears={availableYears}
+        lastRefreshAt={lastRefreshAt}
+        refreshing={refreshing}
+        onSelectYear={setYear}
+        onRefresh={() => void load(year, true)}
+      />
+
+      <KpiSection kpi={kpi} />
+
+      <InsightCards
+        monthAvgKg={monthAvgKg}
+        bestMonth={bestMonth}
+        latestMonth={latestMonth}
+        monthMomentum={monthMomentum}
+        top5Share={top5Share}
+        profitYield={profitYield}
+        stationAvgKg={stationAvgKg}
+        stationCount={stations.length}
+        yearProfitValue={yearProfitFmt.value}
+        yearProfitUnit={yearProfitFmt.unit}
+        yearRevenueValue={yearRevenueFmt.value}
+        yearRevenueUnit={yearRevenueFmt.unit}
+      />
+
+      <MonthlyCharts activeYear={activeYear} monthly={monthly} monthlyDual={monthlyDual} />
+      <DistributionCharts top5={top5} regions={regions} yearKg={kpi.yearKg} />
+      <StationSummaryTable stations={stations} />
+      <CustomerSummaryTable customers={customers} />
+
+      <RotatingFooterHint />
+      <RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
+    </div>
+  );
+}