feat: polish BI dashboards and bump version

2026-06-27 21:59:33 +08:00
parent 5377d2c225
commit b0caa5afcb
33 changed files with 2363 additions and 483 deletions
--- a/src/modules/energy/ElectricDaily.tsx
+++ b/src/modules/energy/ElectricDaily.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ChevronRight, Plug } from 'lucide-react';
+import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import TrendBadge from './TrendBadge';
 import { fetchElectricMonthly } from './api';
 import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { EmptyState, ErrorState, LoadingState, MetricTile } from '../../components/ui/surface';

 const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
  { id: 'thisWeek',  label: '本周'    },
@@ -40,10 +41,30 @@ export default function ElectricDaily() {
  });

  const totalKwh = useMemo(() => (months ?? []).reduce((s, m) => s + (m.kwh || 0), 0), [months]);
+  const totalFee = useMemo(() => (months ?? []).reduce((s, m) => s + (m.fee || 0), 0), [months]);
+  const activeDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => r.kwh > 0).length, 0), [months]);
+  const abnormalDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => Math.abs(r.chainPct) >= 0.3).length, 0), [months]);
+  const avgKwh = activeDays > 0 ? totalKwh / activeDays : 0;
+  const avgPrice = totalKwh > 0 ? totalFee / totalKwh : 0;
+  const scopeLabel = QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const hasFeeDetail = totalFee > 0;
  const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;

  return (
    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <MetricTile icon={BatteryCharging} label={`${scopeLabel}充电量`} value={totalKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper="按日期汇总" />
+        <MetricTile
+          icon={Wallet}
+          label="充电费用"
+          value={hasFeeDetail ? `¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '待同步'}
+          helper={hasFeeDetail ? `均价 ${avgPrice.toFixed(2)} 元/度` : '当前明细仅返回充电量'}
+          tone={hasFeeDetail ? 'emerald' : 'slate'}
+        />
+        <MetricTile icon={CalendarDays} label="有效天数" value={`${activeDays}`} unit="天" helper={`日均 ${avgKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度`} tone="amber" />
+        <MetricTile icon={TrendingUp} label="波动提醒" value={abnormalDays} unit="天" helper="环比超过 30% 标记" tone={abnormalDays > 0 ? 'rose' : 'slate'} />
+      </div>
+
      {/* 日期速选 */}
      <div className="flex items-center gap-2 overflow-x-auto -mx-1 px-1 pb-1 snap-x">
        {QUICK_PICK_OPTIONS.map(opt => (
@@ -106,11 +127,11 @@ export default function ElectricDaily() {
          <span className="text-right">环比</span>
        </div>
        {error ? (
-          <div className="px-3 py-10 text-center text-red-500 text-[12px] font-bold">加载失败：{error}</div>
+          <div className="p-3"><ErrorState message={error} /></div>
        ) : months === null ? (
-          <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">加载中…</div>
+          <div className="p-3"><LoadingState label="正在加载充电明细" /></div>
        ) : months.length === 0 ? (
-          <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">暂无数据</div>
+          <div className="p-3"><EmptyState title="暂无充电数据" description="请切换时间范围或车辆归属" /></div>
        ) : months.map(m => {
          const open = openMonths.has(m.month);
          return (
--- a/src/modules/energy/ElectricModule.tsx
+++ b/src/modules/energy/ElectricModule.tsx
@@ -1,7 +1,9 @@
 import { LayoutDashboard, CalendarDays } from 'lucide-react';
+import { AnimatePresence } from 'motion/react';
 import ElectricView, { type ElectricSubTab } from './ElectricView';
 import SubTabs from './SubTabs';
 import { useHashSubTab } from './useHashSubTab';
+import { FadeIn, PageFrame } from '../../components/ui/surface';

 const SUB_TABS = [
  { id: 'daily',    label: '每日', icon: CalendarDays },
@@ -13,11 +15,19 @@ const SUB_IDS: readonly ElectricSubTab[] = ['daily', 'overview'];
 export default function ElectricModule() {
  const [sub, setSub] = useHashSubTab<ElectricSubTab>('electric', SUB_IDS);
  return (
-    <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
-      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 max-md:landscape:pb-0 max-md:landscape:h-full max-md:landscape:flex-1 max-md:landscape:overflow-hidden">
-        <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
-        <ElectricView sub={sub} />
-      </div>
-    </div>
+    <PageFrame
+      title="电能成本看板"
+      subtitle="围绕充电量、费用、日趋势和车辆归属展示电能支出结构，辅助识别费用波动。"
+      icon={CalendarDays}
+      eyebrow="ELECTRIC BI"
+      meta="时间单位清晰标注 · 支持日/总览切换"
+    >
+      <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
+      <AnimatePresence mode="wait">
+        <FadeIn key={sub}>
+          <ElectricView sub={sub} />
+        </FadeIn>
+      </AnimatePresence>
+    </PageFrame>
  );
 }
--- a/src/modules/energy/ElectricOverview.tsx
+++ b/src/modules/energy/ElectricOverview.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
-import { Wallet, CalendarClock } from 'lucide-react';
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip } from 'recharts';
+import { BatteryCharging, Gauge, Wallet, CalendarClock } from 'lucide-react';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip, ReferenceLine } from 'recharts';
 import { fetchElectricOverview, type ElectricOverviewResponse } from './api';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

 function fmtYuan(yuan: number) {
  return `¥${yuan.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`;
@@ -24,10 +25,10 @@ export default function ElectricOverview() {
  }, []);

  if (error) {
-    return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
+    return <ErrorState message={error} />;
  }
  if (!data) {
-    return <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6 text-center text-slate-400 text-sm">加载中…</div>;
+    return <LoadingState label="正在加载电能总览" />;
  }
  const k = data.kpi;
  const trendData = data.trend;
@@ -37,6 +38,12 @@ export default function ElectricOverview() {
  const chartTitle = trendMonthLabel && trendMonthLabel !== currentMonth
    ? `${trendMonthLabel} 每日充电`
    : '本月每日充电';
+  const activeDays = trendData.filter(item => item.kwh > 0).length;
+  const avgDailyKwh = activeDays > 0 ? trendData.reduce((sum, item) => sum + item.kwh, 0) / activeDays : 0;
+  const avgDailyFee = activeDays > 0 ? trendData.reduce((sum, item) => sum + item.fee, 0) / activeDays : 0;
+  const peakDay = trendData.reduce<typeof trendData[number] | null>((best, item) => (!best || item.kwh > best.kwh ? item : best), null);
+  const avgPrice = k.totalKwh > 0 ? k.totalFee / k.totalKwh : 0;
+  const monthPrice = k.monthKwh > 0 ? k.monthFee / k.monthKwh : 0;

  return (
    <div className="flex flex-col gap-3">
@@ -44,28 +51,36 @@ export default function ElectricOverview() {
        龙王路停车场充电站，期初 2025-01-01，手工导入每日更新
      </div>
      {/* 横向 mini KPI 头 */}
-      <div className="grid grid-cols-2 gap-2 md:gap-3">
-        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
-          <div className="flex items-center gap-1 text-[11px] text-slate-500 font-bold mb-1">
-            <Wallet size={11} className="text-blue-600" />累计
-          </div>
-          <div className="text-base md:text-2xl font-bold text-slate-800">{fmtYuan(k.totalFee)}</div>
-          <div className="text-[11px] text-slate-500 font-bold mt-0.5">{fmtKwh(k.totalKwh)}</div>
-        </div>
-        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
-          <div className="flex items-center gap-1 text-[11px] text-slate-500 font-bold mb-1">
-            <CalendarClock size={11} className="text-blue-600" />本月
-          </div>
-          <div className="text-base md:text-2xl font-bold text-slate-800">{fmtYuan(k.monthFee)}</div>
-          <div className="text-[11px] text-slate-500 font-bold mt-0.5">{fmtKwh(k.monthKwh)}</div>
-        </div>
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <MetricTile icon={Wallet} label="累计充电费" value={fmtYuan(k.totalFee)} helper={fmtKwh(k.totalKwh)} />
+        <MetricTile icon={CalendarClock} label="本月充电费" value={fmtYuan(k.monthFee)} helper={fmtKwh(k.monthKwh)} tone="emerald" />
+        <MetricTile icon={Gauge} label="累计均价" value={avgPrice.toFixed(2)} unit="元/度" helper={`本月 ${monthPrice.toFixed(2)} 元/度`} tone="amber" />
+        <MetricTile icon={BatteryCharging} label="今日充电" value={k.todayKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={`${fmtYuan(k.todayFee)} · ${k.todayChainPct >= 0 ? '+' : ''}${(k.todayChainPct * 100).toFixed(1)}%`} tone={Math.abs(k.todayChainPct) >= 0.3 ? 'rose' : 'slate'} />
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+        <SurfaceCard className="p-3">
+          <div className="text-[11px] font-black text-slate-400">有效充电日</div>
+          <div className="mt-1 text-xl font-black text-slate-900">{activeDays}<span className="ml-1 text-[11px] text-slate-400">天</span></div>
+          <div className="mt-1 text-[11px] font-bold text-slate-500">日均 {avgDailyKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度</div>
+        </SurfaceCard>
+        <SurfaceCard className="p-3">
+          <div className="text-[11px] font-black text-slate-400">峰值日</div>
+          <div className="mt-1 text-xl font-black text-blue-600">{peakDay ? peakDay.date.slice(5) : '—'}</div>
+          <div className="mt-1 text-[11px] font-bold text-slate-500">{peakDay ? `${peakDay.kwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度 · ${fmtYuan(peakDay.fee)}` : '暂无数据'}</div>
+        </SurfaceCard>
+        <SurfaceCard className="p-3">
+          <div className="text-[11px] font-black text-slate-400">月度占比</div>
+          <div className="mt-1 text-xl font-black text-emerald-600">{k.totalFee > 0 ? (k.monthFee / k.totalFee * 100).toFixed(1) : '0.0'}%</div>
+          <div className="mt-1 text-[11px] font-bold text-slate-500">本月费用 / 累计费用</div>
+        </SurfaceCard>
      </div>

      {/* 本月每日充电柱图 */}
-      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
+      <SurfaceCard className="p-4">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-bold text-slate-700">{chartTitle}</span>
-          <span className="text-[11px] text-slate-400 font-bold">单位 元</span>
+          <span className="text-[11px] text-slate-400 font-bold">时间单位：日 · 单位 元 · 均线为日均费用</span>
        </div>
        <ResponsiveContainer width="100%" height={160}>
          <BarChart data={trendData} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
@@ -85,6 +100,14 @@ export default function ElectricOverview() {
              contentStyle={{ borderRadius: 12, fontSize: 12 }}
              cursor={{ fill: 'rgba(59, 130, 246, 0.06)' }}
            />
+            {avgDailyFee > 0 && (
+              <ReferenceLine
+                y={avgDailyFee}
+                stroke="#f59e0b"
+                strokeDasharray="4 4"
+                label={{ value: '均值', position: 'right', fill: '#d97706', fontSize: 10, fontWeight: 700 }}
+              />
+            )}
            <Bar dataKey="fee" radius={[4, 4, 0, 0]}>
              {trendData.map((_, i) => (
                <Cell key={i} fill="url(#electricBarGrad)" />
@@ -98,7 +121,7 @@ export default function ElectricOverview() {
            </defs>
          </BarChart>
        </ResponsiveContainer>
-      </div>
+      </SurfaceCard>
      <RotatingFooterHint />
    </div>
  );
--- a/src/modules/energy/EtcModule.tsx
+++ b/src/modules/energy/EtcModule.tsx
@@ -1,11 +1,17 @@
+import { Receipt } from 'lucide-react';
 import ETCView from './ETCView';
+import { PageFrame } from '../../components/ui/surface';

 export default function EtcModule() {
  return (
-    <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
-      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 max-md:landscape:pb-0 max-md:landscape:h-full max-md:landscape:flex-1 max-md:landscape:overflow-hidden">
-        <ETCView />
-      </div>
-    </div>
+    <PageFrame
+      title="ETC 通行费看板"
+      subtitle="规划按车、按月、按线路拆分通行费，让车辆运营成本口径逐步完整。"
+      icon={Receipt}
+      eyebrow="ETC BI"
+      meta="数据对接中 · 页面能力预留"
+    >
+      <ETCView />
+    </PageFrame>
  );
 }
--- a/src/modules/energy/HydrogenDaily.tsx
+++ b/src/modules/energy/HydrogenDaily.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ChevronRight, Plug } from 'lucide-react';
+import { ChevronRight, Fuel, Plug, TrendingUp, Truck } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip, ReferenceLine } from 'recharts';
 import TrendBadge from './TrendBadge';
 import { fetchHydrogenDaily } from './api';
 import type { CustomerType, DateQuickPick, HydrogenDailyRow } from './types';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

 const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
  { id: 'thisWeek',  label: '本周'    },
@@ -32,6 +33,19 @@ export default function HydrogenDaily() {
  // 柱图：按日期升序，用于"从左到右时间流"
  const trendData = useMemo(() => (rows ? [...rows].sort((a, b) => a.date.localeCompare(b.date)) : []), [rows]);
  const totalKg = (rows ?? []).reduce((a, r) => a + r.totalKg, 0);
+  const activeDays = (rows ?? []).filter(r => r.totalKg > 0).length;
+  const stationCount = useMemo(() => {
+    const names = new Set<string>();
+    (rows ?? []).forEach(r => r.stations.forEach(s => names.add(s.name)));
+    return names.size;
+  }, [rows]);
+  const avgKg = activeDays > 0 ? totalKg / activeDays : 0;
+  const scopeLabel = QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const peakDay = trendData.reduce<HydrogenDailyRow | null>((best, item) => (!best || item.totalKg > best.totalKg ? item : best), null);
+  const lowDay = trendData
+    .filter(item => item.totalKg > 0)
+    .reduce<HydrogenDailyRow | null>((low, item) => (!low || item.totalKg < low.totalKg ? item : low), null);
+  const zeroDays = (rows ?? []).filter(r => r.totalKg === 0).length;

  const toggle = (date: string) => setExpanded(prev => {
    const next = new Set(prev);
@@ -41,6 +55,13 @@ export default function HydrogenDaily() {

  return (
    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper="按日期汇总" />
+        <MetricTile icon={Truck} label="车辆归属" value={customer === 'external' ? '外部' : '羚牛'} helper="当前筛选口径" tone="emerald" />
+        <MetricTile icon={TrendingUp} label="有效天数" value={`${activeDays}/${rows?.length ?? 0}`} helper={`日均 ${avgKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} tone="amber" />
+        <MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper="按明细站点去重" tone="slate" />
+      </div>
+
      {/* 日期速选 */}
      <div className="flex items-center gap-2 overflow-x-auto -mx-1 px-1 pb-1 snap-x">
        {QUICK_PICK_OPTIONS.map(opt => (
@@ -96,13 +117,34 @@ export default function HydrogenDaily() {

      {/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
      {!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
-        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
-          <div className="flex items-center justify-between mb-2">
+        <SurfaceCard>
+          <div className="flex items-center justify-between px-4 pt-4 mb-2">
            <span className="text-sm font-bold text-slate-700">每日加氢量</span>
-            <span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
+            <span className="text-[11px] text-slate-400 font-bold">时间单位：日 · 单位 Kg</span>
          </div>
-          <ResponsiveContainer width="100%" height={160}>
-            <BarChart data={trendData} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
+          <div className="mx-4 mb-2 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-2">
+            <div>
+              <div className="text-[10px] font-black text-slate-400">峰值日</div>
+              <div className="mt-0.5 truncate text-[11px] font-black text-slate-800">
+                {peakDay ? `${peakDay.date.slice(5)} · ${peakDay.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '—'}
+              </div>
+            </div>
+            <div>
+              <div className="text-[10px] font-black text-slate-400">低谷日</div>
+              <div className="mt-0.5 truncate text-[11px] font-black text-slate-800">
+                {lowDay ? `${lowDay.date.slice(5)} · ${lowDay.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '—'}
+              </div>
+            </div>
+            <div>
+              <div className="text-[10px] font-black text-slate-400">零数据日</div>
+              <div className={`mt-0.5 text-[11px] font-black ${zeroDays > 0 ? 'text-amber-600' : 'text-emerald-600'}`}>
+                {zeroDays} 天
+              </div>
+            </div>
+          </div>
+          <div className="h-[180px] min-w-0 px-2 pb-2">
+          <ResponsiveContainer width="100%" height={180} minWidth={0}>
+            <BarChart data={trendData} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
              <XAxis
                dataKey="date"
                tickFormatter={(v: string) => v.slice(5)}
@@ -112,13 +154,27 @@ export default function HydrogenDaily() {
                interval="preserveStartEnd"
                minTickGap={8}
              />
-              <YAxis hide />
+              <YAxis
+                width={42}
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 9, fill: '#94a3b8' }}
+                tickFormatter={(v: number) => v >= 1000 ? `${Math.round(v / 1000)}k` : `${Math.round(v)}`}
+              />
              <Tooltip
                formatter={(v) => [`${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })} Kg`, '加氢量']}
                labelFormatter={(d) => `日期 ${d}`}
                contentStyle={{ borderRadius: 12, fontSize: 12 }}
                cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
              />
+              {avgKg > 0 && (
+                <ReferenceLine
+                  y={avgKg}
+                  stroke="#f59e0b"
+                  strokeDasharray="4 4"
+                  label={{ value: '均值', position: 'right', fill: '#d97706', fontSize: 10, fontWeight: 700 }}
+                />
+              )}
              <Bar dataKey="totalKg" radius={[4, 4, 0, 0]}>
                {trendData.map((_, i) => (
                  <Cell key={i} fill="url(#hydrogenBarGrad)" />
@@ -132,7 +188,8 @@ export default function HydrogenDaily() {
              </defs>
            </BarChart>
          </ResponsiveContainer>
-        </div>
+          </div>
+        </SurfaceCard>
      )}

      {/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
@@ -154,11 +211,11 @@ export default function HydrogenDaily() {
        </div>
        {/* 主行 + 子行 */}
        {error ? (
-          <div className="px-3 py-10 text-center text-red-500 text-[12px] font-bold">加载失败：{error}</div>
+          <div className="p-3"><ErrorState message={error} /></div>
        ) : rows === null ? (
-          <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">加载中…</div>
+          <div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
        ) : rows.length === 0 ? (
-          <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">暂无数据</div>
+          <div className="p-3"><EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" /></div>
        ) : rows.map(r => {
          const open = expanded.has(r.date);
          const isAbnormal = Math.abs(r.chainPct) >= 0.3;
--- a/src/modules/energy/HydrogenModule.tsx
+++ b/src/modules/energy/HydrogenModule.tsx
@@ -1,7 +1,9 @@
 import { LayoutDashboard, CalendarDays } from 'lucide-react';
+import { AnimatePresence } from 'motion/react';
 import HydrogenView, { type HydrogenSubTab } from './HydrogenView';
 import SubTabs from './SubTabs';
 import { useHashSubTab } from './useHashSubTab';
+import { FadeIn, PageFrame } from '../../components/ui/surface';

 const SUB_TABS = [
  { id: 'daily',    label: '每日', icon: CalendarDays },
@@ -13,11 +15,19 @@ const SUB_IDS: readonly HydrogenSubTab[] = ['daily', 'overview'];
 export default function HydrogenModule() {
  const [sub, setSub] = useHashSubTab<HydrogenSubTab>('hydrogen', SUB_IDS);
  return (
-    <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
-      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 max-md:landscape:pb-0 max-md:landscape:h-full max-md:landscape:flex-1 max-md:landscape:overflow-hidden">
-        <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
-        <HydrogenView sub={sub} />
-      </div>
-    </div>
+    <PageFrame
+      title="氢能经营看板"
+      subtitle="按时间、车辆归属、加氢站和区域统一展示加氢量、费用、收入与异常波动。"
+      icon={CalendarDays}
+      eyebrow="ENERGY BI"
+      meta="数据单位清晰标注 · 支持日/总览切换"
+    >
+      <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
+      <AnimatePresence mode="wait">
+        <FadeIn key={sub}>
+          <HydrogenView sub={sub} />
+        </FadeIn>
+      </AnimatePresence>
+    </PageFrame>
  );
 }
--- a/src/modules/energy/HydrogenOverview.tsx
+++ b/src/modules/energy/HydrogenOverview.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import {
  BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList, Legend,
 } from 'recharts';
-import { Fuel, Wallet, CalendarDays, Sparkles, TrendingUp, RefreshCw } from 'lucide-react';
+import { Fuel, Wallet, CalendarDays, Sparkles, TrendingUp, RefreshCw, Gauge, AlertTriangle, Building2 } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
@@ -147,6 +147,14 @@ export default function HydrogenOverview() {
  const yearRevenueFmt = fmtYuan(k.yearRevenue);

  const profitColor = k.yearProfit >= 0 ? 'text-emerald-600' : 'text-red-600';
+  const monthAvgKg = monthly.length > 0 ? monthly.reduce((sum, m) => sum + m.kg, 0) / monthly.length : 0;
+  const bestMonth = monthly.reduce<typeof monthly[number] | null>((best, item) => (!best || item.kg > best.kg ? item : best), null);
+  const latestMonth = monthly[monthly.length - 1];
+  const prevMonth = monthly[monthly.length - 2];
+  const monthMomentum = latestMonth && prevMonth && prevMonth.kg > 0 ? (latestMonth.kg - prevMonth.kg) / prevMonth.kg * 100 : null;
+  const top5Share = top5.reduce((sum, item) => sum + item.kg, 0) / Math.max(1, k.yearKg) * 100;
+  const profitYield = k.yearRevenue > 0 ? k.yearProfit / k.yearRevenue * 100 : 0;
+  const stationAvgKg = stations.length > 0 ? k.yearKg / stations.length : 0;

  // 月度收支组合数据（推算"年内每月"图）
  const monthlyDual = monthly.map(m => ({
@@ -247,6 +255,59 @@ export default function HydrogenOverview() {
        />
      </div>

+      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-3">
+        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <div className="text-[11px] font-black text-slate-400">月度动能</div>
+              <div className="mt-1 text-lg font-black text-slate-900">
+                {monthMomentum === null ? '暂无对比' : `${monthMomentum >= 0 ? '+' : ''}${monthMomentum.toFixed(1)}%`}
+              </div>
+            </div>
+            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 ring-1 ring-blue-100">
+              <Gauge size={18} />
+            </span>
+          </div>
+          <div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
+            {latestMonth ? `${latestMonth.month} 加氢 ${fmtKg(latestMonth.kg).value}${fmtKg(latestMonth.kg).unit}` : '暂无月度数据'}
+            {bestMonth ? ` · 峰值 ${bestMonth.month}` : ''}
+            {monthAvgKg > 0 ? ` · 月均 ${fmtKg(monthAvgKg).value}${fmtKg(monthAvgKg).unit}` : ''}
+          </div>
+        </div>
+        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <div className="text-[11px] font-black text-slate-400">站点集中度</div>
+              <div className="mt-1 text-lg font-black text-slate-900">Top5 {top5Share.toFixed(1)}%</div>
+            </div>
+            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-cyan-50 text-cyan-600 ring-1 ring-cyan-100">
+              <Building2 size={18} />
+            </span>
+          </div>
+          <div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
+            共 {stations.length} 站 · 单站年均 {fmtKg(stationAvgKg).value}{fmtKg(stationAvgKg).unit}
+            {top5Share >= 70 ? ' · 头部站点依赖偏高' : ' · 分布相对健康'}
+          </div>
+        </div>
+        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <div className="text-[11px] font-black text-slate-400">收支健康度</div>
+              <div className={`mt-1 text-lg font-black ${profitYield >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
+                {profitYield.toFixed(1)}%
+              </div>
+            </div>
+            <span className={`flex h-9 w-9 items-center justify-center rounded-xl ring-1 ${profitYield >= 0 ? 'bg-emerald-50 text-emerald-600 ring-emerald-100' : 'bg-rose-50 text-rose-600 ring-rose-100'}`}>
+              <AlertTriangle size={18} />
+            </span>
+          </div>
+          <div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
+            时享获利 {yearProfitFmt.value}{yearProfitFmt.unit} · 客户收入 {yearRevenueFmt.value}{yearRevenueFmt.unit}
+            {profitYield < 0 ? ' · 需关注亏损站点与客户价格' : ' · 当前保持正向收益'}
+          </div>
+        </div>
+      </div>
+
      {/* 月度趋势：年内每月加氢量 */}
      {monthly.length > 0 && (
        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
--- a/src/modules/energy/SubTabs.tsx
+++ b/src/modules/energy/SubTabs.tsx
@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import { SegmentedNav } from '../../components/ui/surface';

 interface SubTab<T extends string> {
  id: T;
@@ -14,26 +15,8 @@ interface Props<T extends string> {

 export default function SubTabs<T extends string>({ tabs, active, onChange }: Props<T>) {
  return (
-    <div className="sticky top-0 z-30 -mx-3 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-4 bg-[#F8F9FB] shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)]">
-      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
-        <div className="p-1 flex gap-1">
-          {tabs.map(({ id, label, icon: Icon }) => {
-            const isActive = active === id;
-            return (
-              <button
-                key={id}
-                onClick={() => onChange(id)}
-                className={`flex-1 flex items-center justify-center gap-1.5 rounded-xl py-1.5 text-[12px] font-bold transition-all ${
-                  isActive ? 'bg-blue-50 text-blue-600' : 'text-slate-400 hover:bg-slate-50'
-                }`}
-              >
-                <Icon size={14} />
-                <span>{label}</span>
-              </button>
-            );
-          })}
-        </div>
-      </div>
+    <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
+      <SegmentedNav tabs={tabs} active={active} onChange={onChange} />
    </div>
  );
 }