feat(energy): rebuild hydrogen BI board and drill-through

2026-08-20 13:59:03 +08:00
parent 37a9f303ec
commit 62efef0ab9
72 changed files with 36773 additions and 965 deletions
@@ -0,0 +1,47 @@
+# Energy Hydrogen Board Design QA
+
+- Source of truth: `/tmp/energy-h2-bi-board-prototype-0818/index.html`
+- Prototype archive: `/Users/kkfluous/Library/Containers/com.tencent.xinWeChat/Data/Documents/xwechat_files/wxid_1704407055112_3af8/msg/file/2026-08/energy-h2-bi-board-html.zip`
+- Implementation: `http://localhost:3000/energy#hydrogen/overview`
+- Desktop viewport: 1280 x 720 CSS px
+- Mobile viewport checked for the daily flow: 390 x 844 CSS px
+
+## Compared States
+
+| State | Prototype | Implementation | Combined comparison |
+| --- | --- | --- | --- |
+| Global overview | `/var/tmp/proto-global-overview.png` | `/var/tmp/impl-global-overview-final.png` | `/var/tmp/compare-global-overview-final.png` |
+| Global daily | `/var/tmp/proto-global-daily.png` | `/var/tmp/impl-global-daily-final.png` | `/var/tmp/compare-global-daily-final.png` |
+| All stations | `/var/tmp/proto-station.png` | `/var/tmp/impl-station-final.png` | `/var/tmp/compare-station-final.png` |
+| Station detail | `/var/tmp/proto-station-detail.png` | `/var/tmp/impl-station-detail-final.png` | `/var/tmp/compare-station-detail-final.png` |
+
+All desktop comparisons use the same viewport, pixel dimensions, navigation state, and side-by-side source/implementation input.
+
+## Interaction Evidence
+
+- Global overview KPI, month, region, station, customer, and insight entries open real ledger drill-down data.
+- Global daily supports date presets, custom dates, all/Lingniu/external vehicle scopes, chart-to-date focus, and date -> station -> customer -> vehicle/source drill-down.
+- Daily and station evidence tables provide Excel export where the prototype exposes an export command.
+- All-station mode supports all/single station display, station selection, clickable daily KPI dialogs, and zero-activity stations.
+- Station detail includes a continuous 10-day series with zero-filled late days, recent 7-day table, range trend, and 12-month customer quantity/fee matrices.
+- Entering and leaving a station detail resets the page scroll position so the header and notice remain visible.
+- A clean browser tab loaded the final overview with no console warnings or errors.
+- Daily mobile flow has no body-level horizontal overflow; wide analytical tables retain intentional internal horizontal scrolling.
+
+## Iteration History
+
+1. P1: Station detail inherited the long station-list scroll position. Added deterministic scroll reset on enter and return.
+2. P1: Daily drill stopped at station level. Implemented the prototype's full four-level drill and real ledger rows.
+3. P1: Station KPI cards were static. Added the three prototype daily detail dialogs using continuous server-side daily summaries.
+4. P2: Prototype state matrix was incomplete. Added global overview, global daily, all-station, single-station selector, and station detail states.
+5. P2: Icons differed from the prototype. Replaced approximate icons with matching Lucide Fuel, Zap, Wallet, Calendar, Truck, Refresh, Download, and navigation icons.
+6. P2: Recharts could measure a transitioning container at a negative size. Added minimum and initial dimensions and verified a clean reload.
+7. P2: Station detail omitted dates without records. Zero-filled the requested range so delayed or absent reporting is visible rather than silently skipped.
+
+## Residual P3
+
+- Prototype screenshots contain fixed mock dates and values; implementation screenshots use the current read-only database values.
+- The prototype warning says opening balances are still calibrating. The implementation uses a truthful traceability notice because the live ledger does not expose that calibration state.
+- Native date-picker popovers vary by operating system; the closed controls match the prototype hierarchy and icon roles.
+
+final result: passed
@@ -10,11 +10,6 @@ services:
      DB_USER: "oneos_db_prod"
      DB_PASSWORD: "adASHJcviqwjkbn23ngt1"
      DB_NAME: "ln_asset_management"
-      HYDROGEN_DB_HOST: "47.99.185.173"
-      HYDROGEN_DB_PORT: "3306"
-      HYDROGEN_DB_USER: "root"
-      HYDROGEN_DB_PASSWORD: "lnMysql."
-      HYDROGEN_DB_NAME: "ln_asset_management"
      MILEAGE_DB_HOST: "101.133.130.65"
      MILEAGE_DB_PORT: "3306"
      MILEAGE_DB_USER: "bi_reader_02"
@@ -1,12 +1,12 @@
 import { lazy } from 'react';
 import {
  Activity,
-  BatteryCharging,
  Fuel,
  MapPinned,
-  Receipt,
  Route,
  Truck,
+  Wallet,
+  Zap,
 } from 'lucide-react';
 import type { ModuleConfig } from '../components/Shell';
 import { canAccessEnergy, canAccessScheduling } from '../shared/auth/roles';
@@ -49,8 +49,8 @@ const SCHEDULING_MODULE: ModuleConfig = {

 const ENERGY_MODULES: ModuleConfig[] = [
  { id: 'hydrogen', label: '氢能', icon: Fuel, component: HydrogenModule },
-  { id: 'electric', label: '电能', icon: BatteryCharging, component: ElectricModule },
-  { id: 'etc', label: 'ETC', icon: Receipt, component: EtcModule },
+  { id: 'electric', label: '电能', icon: Zap, component: ElectricModule },
+  { id: 'etc', label: 'ETC', icon: Wallet, component: EtcModule },
 ];

 /** 根据主路径和角色生成导航；返回新数组，避免调用方修改静态注册表。 */
@@ -83,6 +83,9 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {

  const { user } = useAuth();
  const activeLabel = flatModules.find((module) => module.id === activeModule)?.label ?? '业务看板';
+  // 氢能经营看板已在模块内提供原型一致的标题与导航，避免桌面端重复显示全局面包屑。
+  const showDesktopBreadcrumb = activeModule !== 'hydrogen';
+  const isHydrogenPrototype = activeModule === 'hydrogen';
  const watermarkText = useMemo(() => {
    const name = user?.userName || '未登录';
    const time = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-');
@@ -92,14 +95,16 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
  return (
    <DemoModeProvider enabled={false}>
    <div className="enterprise-grid-bg flex min-h-screen">
-      {/* 全局水印 */}
+      {/* 氢费看板按原型交付；其他模块继续保留全局水印。 */}
+      {!isHydrogenPrototype ? (
        <div className="fixed inset-0 pointer-events-none z-[9999] overflow-hidden" style={{ opacity: 0.06 }}>
          <div className="absolute inset-0" style={{
            backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200'><text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle' font-size='14' font-family='sans-serif' fill='%23000' transform='rotate(-25 160 100)'>${watermarkText}</text></svg>`)}")`,
            backgroundRepeat: 'repeat',
          }} />
        </div>
-      {/* Web 侧边栏 (md 及以上) */}
+      ) : null}
+      {/* Web 侧边栏 (md 及以上)：能源各模块使用同一套规格，以电能为基准。 */}
      <nav className="fixed left-0 top-0 z-50 hidden h-full w-20 flex-col items-center border-r border-white/10 bg-slate-950 px-2 py-4 text-white shadow-[12px_0_40px_rgba(15,23,42,0.16)] md:flex">
        <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-white text-blue-600 shadow-lg shadow-blue-950/20">
          <Building2 size={22} />
@@ -118,7 +123,8 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
                  aria-expanded={isGroup ? isOpen : undefined}
                  aria-haspopup={isGroup ? 'menu' : undefined}
                  className={cn(
-                    'group relative flex h-16 w-16 flex-col items-center justify-center rounded-2xl text-[10px] font-black transition-all',
+                    'group relative flex flex-col items-center justify-center transition-all',
+                    'h-16 w-16 rounded-2xl text-[10px] font-black',
                    isActive ? 'text-white' : 'text-slate-400 hover:bg-white/8 hover:text-white',
                  )}
                  title={m.label}
@@ -157,15 +163,17 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {

      {/* 内容区 */}
      <main className="min-w-0 flex-1 pb-16 md:ml-20 md:pb-0" style={{ overflowX: 'clip' }}>
-        <div className="pointer-events-none fixed left-20 right-0 top-0 z-20 hidden h-12 items-center border-b border-white/60 bg-white/55 px-6 text-xs font-bold text-slate-400 backdrop-blur-xl md:flex">
+        {showDesktopBreadcrumb ? (
+          <div className={cn('pointer-events-none fixed right-0 top-0 z-20 hidden h-12 items-center border-b border-white/60 bg-white/55 px-6 text-xs font-bold text-slate-400 backdrop-blur-xl md:flex', isHydrogenPrototype ? 'left-[72px]' : 'left-20')}>
            <span className="text-slate-600">羚牛氢能 BI</span>
            <span className="mx-2 text-slate-300">/</span>
            <span>{activeLabel}</span>
          </div>
+        ) : null}
        <Suspense fallback={<div className="p-3 md:p-6"><LoadingState label="正在加载业务模块" /></div>}>
          {ActiveComponent && <ActiveComponent />}
        </Suspense>
-        <FeedbackFab module={activeModule} />
+        {!isHydrogenPrototype ? <FeedbackFab module={activeModule} /> : null}
      </main>

      {/* 移动端底部导航 (md 以下) */}
@@ -1,79 +1,52 @@
-import { motion } from 'motion/react';
-import { Construction, Hammer } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { BadgeCheck, CarFront, FileText, ReceiptText, WalletCards } from 'lucide-react';
+import { fetchEtcOverview, type EtcOverviewResponse } from './api';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

-const ETC_HINTS = [
-  'ETC 通行费数据正在与发卡方系统打通…',
-  '工人 GG 正在搭脚手架，敬请期待 ~',
-  '马上能看到每月通行费明细啦',
-  '想看哪个维度的 ETC？反馈一下嘛',
-  '上线时机：等数据接通的那一天',
-];
+function formatYuan(value: number) {
+  return `¥${value.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
+}

 export default function ETCView() {
+  const [data, setData] = useState<EtcOverviewResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchEtcOverview()
+      .then(result => { if (!cancelled) setData(result); })
+      .catch(reason => { if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason)); });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (error) return <ErrorState message="ETC 数据源暂时不可用，请稍后刷新。" />;
+  if (!data) return <LoadingState label="正在核对 ETC 台账" />;
+
+  if (!data.hasData) {
    return (
-    <div className="flex flex-col gap-4">
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
-      >
-        <div className="relative w-20 h-20 mb-4">
-          <motion.div
-            animate={{ rotate: [0, -8, 8, -4, 4, 0] }}
-            transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
-            className="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"
-          >
-            <Construction size={36} className="text-amber-500" strokeWidth={2.2} />
-          </motion.div>
-          <motion.div
-            animate={{ rotate: [0, 18, -10, 0], y: [0, -2, 1, 0] }}
-            transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
-            className="absolute -top-1 -right-1 w-9 h-9 rounded-2xl bg-white border border-amber-100 shadow-sm flex items-center justify-center"
-          >
-            <Hammer size={16} className="text-amber-500" strokeWidth={2.2} />
-          </motion.div>
+      <div className="flex flex-col gap-3">
+        <EmptyState title="暂无 ETC 通行台账" description="当前账单和通行明细均未入库，接入后会自动展示统计数据。" />
+        <RotatingFooterHint hints={['ETC 台账状态已按数据库实时核对', '待通行明细入库后自动生成统计']} />
      </div>
+    );
+  }

-        <div className="text-base font-black text-slate-800 mb-1.5">ETC 模块建设中</div>
-        <div className="text-[12px] text-slate-500 font-bold leading-relaxed max-w-[280px]">
-          通行费明细、按车按月统计、运营成本拆分
-          <br />
-          这些数据都在路上啦
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <MetricTile icon={ReceiptText} label="通行明细" value={data.tollRecordCount.toLocaleString('zh-CN')} unit="笔" helper={data.latestTollTime ? `最新记录 ${data.latestTollTime}` : '暂无通行时间'} />
+        <MetricTile icon={CarFront} label="涉及车辆" value={data.vehicleCount.toLocaleString('zh-CN')} unit="台" helper="按通行明细车牌去重" tone="emerald" />
+        <MetricTile icon={WalletCards} label="通行费金额" value={formatYuan(data.totalAmount)} helper="通行费与服务费合计" tone="amber" />
+        <MetricTile icon={FileText} label="ETC 账单" value={data.billCount.toLocaleString('zh-CN')} unit="张" helper={`应收 ${formatYuan(data.receivableAmount)} · 已收 ${formatYuan(data.paidAmount)}`} tone="slate" />
      </div>
-
-        {/* 简单的里程碑进度感 */}
-        <div className="mt-6 w-full max-w-xs space-y-2">
-          {[
-            { label: '需求评审', done: true },
-            { label: '数据对接', done: true },
-            { label: '页面开发', done: false, current: true },
-            { label: '正式上线', done: false },
-          ].map((m, i) => (
-            <motion.div
-              key={i}
-              initial={{ opacity: 0, x: -8 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 0.1 + i * 0.08, duration: 0.3 }}
-              className="flex items-center gap-2.5 text-[11px]"
-            >
-              <span className={`w-3 h-3 rounded-full flex-shrink-0 ${
-                m.done ? 'bg-emerald-400'
-                : m.current ? 'bg-amber-400 ring-4 ring-amber-100 animate-pulse'
-                : 'bg-slate-200'
-              }`} />
-              <span className={`font-bold ${m.done ? 'text-slate-500' : m.current ? 'text-amber-600' : 'text-slate-300'}`}>
-                {m.label}
-              </span>
-              {m.done && <span className="text-[10px] text-emerald-500 font-bold ml-auto">已完成</span>}
-              {m.current && <span className="text-[10px] text-amber-500 font-bold ml-auto">进行中</span>}
-            </motion.div>
-          ))}
+      <SurfaceCard className="p-4">
+        <div className="flex items-start gap-2 text-xs font-bold text-slate-500">
+          <BadgeCheck size={17} className="mt-0.5 shrink-0 text-emerald-500" />
+          <div>当前统计直接读取 ETC 通行明细与账单台账；金额、应收和已收均不做推算。</div>
        </div>
-      </motion.div>
-
-      <RotatingFooterHint hints={ETC_HINTS} />
+      </SurfaceCard>
+      <RotatingFooterHint />
    </div>
  );
 }
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
+import { BatteryCharging, CalendarDays, ChevronRight, TrendingUp, Wallet } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
 import TrendBadge from './TrendBadge';
 import { fetchElectricMonthly } from './api';
 import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
@@ -59,7 +59,6 @@ export default function ElectricDaily() {
  } = useMemo(() => summarizeElectricMonths(months), [months]);
  const scopeLabel = getRangeModeLabel(pick);
  const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
-  const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;

  const applyQuickPick = (nextPick: DateQuickPick) => {
    setPick(nextPick);
@@ -89,37 +88,15 @@ export default function ElectricDaily() {
        <MetricTile
          icon={Wallet}
          label="充电费用"
-          value={hasFeeDetail ? `¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '待同步'}
-          helper={hasFeeDetail ? `均价 ${avgPrice.toFixed(2)} 元/度` : '当前明细仅返回充电量'}
+          value={`¥${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>

-      {/* 外部车辆 数据未就绪 */}
-      {showExternalEmpty && (
-        <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
-        >
-          <div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
-            <Plug size={22} className="text-blue-500" />
-            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
-            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
-          </div>
-          <div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
-          <div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
-            新系统的外部车辆充电数据还在准备中
-            <br />
-            上线后此处将展示完整明细
-          </div>
-        </motion.div>
-      )}
-
      {/* 月份分组表 */}
-      {!showExternalEmpty && (
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
          <span>月份 / 日期</span>
@@ -185,7 +162,6 @@ export default function ElectricDaily() {
          );
        })}
      </div>
-      )}
      <RotatingFooterHint />
    </div>
  );
@@ -6,7 +6,7 @@ import { useHashSubTab } from './useHashSubTab';
 import { FadeIn, PageFrame } from '../../components/ui/surface';

 const SUB_TABS = [
-  { id: 'daily',    label: '每日', icon: CalendarDays },
+  { id: 'daily',    label: '按日', icon: CalendarDays },
  { id: 'overview', label: '总览', icon: LayoutDashboard },
 ] as const satisfies readonly { id: ElectricSubTab; label: string; icon: typeof CalendarDays }[];

@@ -16,11 +16,11 @@ export default function ElectricModule() {
  const [sub, setSub] = useHashSubTab<ElectricSubTab>('electric', SUB_IDS);
  return (
    <PageFrame
-      title="电能成本看板"
-      subtitle="围绕充电量、费用、日趋势和车辆归属展示电能支出结构，辅助识别费用波动。"
+      title="电能经营看板"
+      subtitle="充电量、费用、日趋势与车辆归属"
      icon={CalendarDays}
      eyebrow="ELECTRIC BI"
-      meta="时间单位清晰标注 · 支持日/总览切换"
+      meta="按日 · 总览"
    >
      <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
      <AnimatePresence mode="wait">
@@ -34,28 +34,32 @@ export default function ElectricOverview() {
  const trendData = data.trend;
  // 当电能数据滞后（本月无数据走 fallback）时，柱图标题显示实际月份
  const trendMonthLabel = trendData[0]?.date.slice(0, 7);
-  const currentMonth = new Date().toISOString().slice(0, 7);
-  const chartTitle = trendMonthLabel && trendMonthLabel !== currentMonth
-    ? `${trendMonthLabel} 每日充电`
-    : '本月每日充电';
+  const now = new Date();
+  const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+  const dataIsCurrentMonth = trendMonthLabel === currentMonth;
+  const chartTitle = trendMonthLabel ? `${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 latestDay = trendData.at(-1) ?? null;
+  const displayedMonthKwh = dataIsCurrentMonth ? k.monthKwh : trendData.reduce((sum, item) => sum + item.kwh, 0);
+  const displayedMonthFee = dataIsCurrentMonth ? k.monthFee : trendData.reduce((sum, item) => sum + item.fee, 0);
  const avgPrice = k.totalKwh > 0 ? k.totalFee / k.totalKwh : 0;
-  const monthPrice = k.monthKwh > 0 ? k.monthFee / k.monthKwh : 0;
+  const monthPrice = displayedMonthKwh > 0 ? displayedMonthFee / displayedMonthKwh : 0;
+  const dataAsOf = data.latestChargeTime ?? '暂无充电记录';

  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">
-        龙王路停车场充电站，期初 2025-01-01，手工导入每日更新
+      <div className="rounded-xl border border-slate-100 bg-white px-3 py-1.5 text-[11px] font-bold text-slate-400">
+        充电账本最新记录：{dataAsOf} · {dataIsCurrentMonth ? '本月数据' : `${trendMonthLabel ?? '暂无'} 数据`}
      </div>
      {/* 横向 mini KPI 头 */}
      <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'} />
+        <MetricTile icon={CalendarClock} label={dataIsCurrentMonth ? '本月充电费' : '数据最新月费用'} value={fmtYuan(displayedMonthFee)} helper={fmtKwh(displayedMonthKwh)} tone="emerald" />
+        <MetricTile icon={Gauge} label="累计均价" value={avgPrice.toFixed(2)} unit="元/度" helper={`${dataIsCurrentMonth ? '本月' : '最新月'} ${monthPrice.toFixed(2)} 元/度`} tone="amber" />
+        <MetricTile icon={BatteryCharging} label={dataIsCurrentMonth ? '今日充电' : '最新日充电'} value={(dataIsCurrentMonth ? k.todayKwh : latestDay?.kwh ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={dataIsCurrentMonth ? `${fmtYuan(k.todayFee)} · ${k.todayChainPct >= 0 ? '+' : ''}${(k.todayChainPct * 100).toFixed(1)}%` : `${latestDay?.date ?? '暂无记录'} · ${fmtYuan(latestDay?.fee ?? 0)}`} tone={dataIsCurrentMonth && Math.abs(k.todayChainPct) >= 0.3 ? 'rose' : 'slate'} />
      </div>

      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
@@ -71,8 +75,8 @@ export default function ElectricOverview() {
        </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>
+          <div className="mt-1 text-xl font-black text-emerald-600">{k.totalFee > 0 ? (displayedMonthFee / k.totalFee * 100).toFixed(1) : '0.0'}%</div>
+          <div className="mt-1 text-[11px] font-bold text-slate-500">{dataIsCurrentMonth ? '本月' : '最新月'}费用 / 累计费用</div>
        </SurfaceCard>
      </div>

@@ -6,10 +6,10 @@ export default function EtcModule() {
  return (
    <PageFrame
      title="ETC 通行费看板"
-      subtitle="规划按车、按月、按线路拆分通行费，让车辆运营成本口径逐步完整。"
+      subtitle="通行明细、账单与回款状态"
      icon={Receipt}
      eyebrow="ETC BI"
-      meta="数据对接中 · 页面能力预留"
+      meta="通行明细 · 账单"
    >
      <ETCView />
    </PageFrame>
@@ -0,0 +1,97 @@
+import './styles/energy-bi-board.css';
+
+export type HydrogenBoardScope = 'global' | 'station';
+export type HydrogenBoardView = 'daily' | 'overview';
+
+export function HydrogenBoardNotice() {
+  return null;
+}
+
+export default function HydrogenBoardChrome({
+  scope,
+  view,
+  rangeText,
+  onScopeChange,
+  onViewChange,
+}: {
+  scope: HydrogenBoardScope;
+  view: HydrogenBoardView;
+  rangeText?: string;
+  onScopeChange: (scope: HydrogenBoardScope) => void;
+  onViewChange: (view: HydrogenBoardView) => void;
+}) {
+  return (
+    <header className="ehb-chrome">
+      <div className="ehb-chrome__lead">
+        <div className="ehb-crumb">羚牛氢能 BI / 氢能</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 2, flexWrap: 'wrap' }}>
+          <h1 style={{ margin: 0 }}>氢能经营看板</h1>
+          {scope === 'global' && rangeText ? (
+            <span
+              className="ehb-time-range-pill"
+              style={{
+                fontSize: 12,
+                color: '#0284c7',
+                background: '#eff6ff',
+                border: '1px solid #bae6fd',
+                padding: '3px 10px',
+                borderRadius: 16,
+                fontWeight: 500,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 4,
+                boxShadow: '0 1px 2px rgba(2, 132, 199, 0.06)',
+              }}
+            >
+              📅 统计时间范围：{rangeText}
+            </span>
+          ) : null}
+        </div>
+      </div>
+      <div className="ehb-chrome__tools">
+        <div className="ehb-seg ehb-seg--wrap" role="tablist" aria-label="范围">
+          <button
+            type="button"
+            role="tab"
+            className={scope === 'global' ? 'is-active' : ''}
+            aria-selected={scope === 'global'}
+            onClick={() => onScopeChange('global')}
+          >
+            全局
+          </button>
+          <button
+            type="button"
+            role="tab"
+            className={scope === 'station' ? 'is-active' : ''}
+            aria-selected={scope === 'station'}
+            onClick={() => onScopeChange('station')}
+          >
+            单站
+          </button>
+        </div>
+        {scope === 'global' ? (
+          <div className="ehb-seg ehb-seg--wrap" role="tablist" aria-label="视图">
+            <button
+              type="button"
+              role="tab"
+              className={view === 'daily' ? 'is-active' : ''}
+              aria-selected={view === 'daily'}
+              onClick={() => onViewChange('daily')}
+            >
+              按日
+            </button>
+            <button
+              type="button"
+              role="tab"
+              className={view === 'overview' ? 'is-active' : ''}
+              aria-selected={view === 'overview'}
+              onClick={() => onViewChange('overview')}
+            >
+              总览
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </header>
+  );
+}
@@ -1,278 +1,304 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ChevronRight, Fuel, Plug, TrendingUp, Truck } from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-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 { AlertTriangle, RefreshCw } from 'lucide-react';
+import { fetchHydrogenDaily, fetchHydrogenDailyDetail, type HydrogenVerifyScope } from './api';
+import type { CustomerType, DateQuickPick, HydrogenDailyDetailResponse, HydrogenDailyRow } from './types';
 import {
+  buildHydrogenDailyTrend,
+  filterHydrogenRowsByStation,
+  getHydrogenDailyStations,
  getQuickRange,
  getRangeModeLabel,
+  mergeHydrogenDailyRows,
  normalizeRange,
  summarizeHydrogenRows,
+  type HydrogenDailyBoardScope,
+  type HydrogenDailyVehicleScope,
  type RangeMode,
 } from './hydrogen-daily/model';
 import DailyRangeControls from './daily-range/DailyRangeControls';
-import RotatingFooterHint from '../../components/RotatingFooterHint';
-import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
+import { DailyDetailTable } from './hydrogen-daily/components/DailyDetailTable';
+import { DailyKpiGrid } from './hydrogen-daily/components/DailyKpiGrid';
+import { DailyTrendChart } from './hydrogen-daily/components/DailyTrendChart';
+import { StationDailyOverview } from './hydrogen-daily/components/StationDailyOverview';
+import { EmptyState, ErrorState, LoadingState } from '../../components/ui/surface';
+import './styles/energy-bi-board.css';

-export default function HydrogenDaily() {
+export interface HydrogenDailyProps {
+  scope?: HydrogenDailyBoardScope;
+  onRangeTextChange?: (rangeText: string) => void;
+}
+
+interface DailyDatasets {
+  lingniu: HydrogenDailyRow[] | null;
+  external: HydrogenDailyRow[] | null;
+}
+
+export interface DailyDetailState {
+  loading: boolean;
+  data: HydrogenDailyDetailResponse | null;
+  error: string | null;
+}
+
+function formatUpdatedAt(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+export default function HydrogenDaily({ scope = 'global', onRangeTextChange }: HydrogenDailyProps) {
+  const [vehicleScope, setVehicleScope] = useState<HydrogenDailyVehicleScope>('all');
+  // Kept explicit even though this view has no verification toggle yet: drill
+  // requests always declare their data scope instead of silently defaulting.
+  const verifyScope: HydrogenVerifyScope = 'all';
  const [pick, setPick] = useState<RangeMode>('last15');
  const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
-  const [customer, setCustomer] = useState<CustomerType>('lingniu');
+  const [selectedStationId, setSelectedStationId] = useState<number | null>(null);
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const [rows, setRows] = useState<HydrogenDailyRow[] | null>(null);
+  const [highlightedDate, setHighlightedDate] = useState<string | null>(null);
+  const [datasets, setDatasets] = useState<DailyDatasets>({ lingniu: null, external: null });
+  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [updatedAt, setUpdatedAt] = useState<string | null>(null);
+  const [details, setDetails] = useState<Record<string, DailyDetailState>>({});

-  const effectiveRange = useMemo(() => normalizeRange(dateRange.start, dateRange.end), [dateRange.start, dateRange.end]);
+  const effectiveRange = useMemo(
+    () => normalizeRange(dateRange.start, dateRange.end),
+    [dateRange.start, dateRange.end],
+  );
+
+  useEffect(() => {
+    onRangeTextChange?.(`${effectiveRange.start} 至 ${effectiveRange.end}`);
+  }, [effectiveRange.start, effectiveRange.end, onRangeTextChange]);

  useEffect(() => {
    let cancelled = false;
+    setLoading(true);
    setError(null);
    const query = pick === 'custom'
      ? { startDate: effectiveRange.start, endDate: effectiveRange.end }
      : { range: pick };
-    fetchHydrogenDaily(query, customer)
-      .then(r => { if (!cancelled) setRows(r); })
-      .catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
+
+    Promise.all([
+      fetchHydrogenDaily(query, 'lingniu'),
+      fetchHydrogenDaily(query, 'external'),
+    ])
+      .then(([lingniu, external]) => {
+        if (cancelled) return;
+        setDatasets({ lingniu, external });
+        setUpdatedAt(formatUpdatedAt(new Date()));
+      })
+      .catch((reason) => {
+        if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
    return () => { cancelled = true; };
-  }, [pick, customer, effectiveRange.start, effectiveRange.end]);
+  }, [pick, effectiveRange.start, effectiveRange.end, refreshKey]);

-  const {
-    trendData,
-    totalKg,
-    activeDays,
-    stationCount,
-    avgKg,
-    peakDay,
-    lowDay,
-    zeroDays,
-  } = useMemo(() => summarizeHydrogenRows(rows), [rows]);
-  const scopeLabel = getRangeModeLabel(pick);
-  const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
+  const allRows = useMemo(
+    () => mergeHydrogenDailyRows(datasets.lingniu, datasets.external),
+    [datasets.external, datasets.lingniu],
+  );
+  const vehicleRows = useMemo(() => {
+    if (vehicleScope === 'lingniu') return datasets.lingniu;
+    if (vehicleScope === 'external') return datasets.external;
+    return allRows;
+  }, [allRows, datasets.external, datasets.lingniu, vehicleScope]);
+  const stationOptions = useMemo(() => getHydrogenDailyStations(vehicleRows), [vehicleRows]);

-  const toggle = (date: string) => setExpanded(prev => {
-    const next = new Set(prev);
-    next.has(date) ? next.delete(date) : next.add(date);
+  useEffect(() => {
+    if (scope !== 'station') return;
+    if (selectedStationId !== null && stationOptions.some((station) => station.id === selectedStationId)) return;
+    setSelectedStationId(stationOptions[0]?.id ?? null);
+  }, [scope, selectedStationId, stationOptions]);
+
+  const scopedRows = useMemo(() => {
+    if (scope !== 'station' || selectedStationId === null) return vehicleRows;
+    return filterHydrogenRowsByStation(vehicleRows, selectedStationId);
+  }, [scope, selectedStationId, vehicleRows]);
+
+  const summary = useMemo(
+    () => summarizeHydrogenRows(scopedRows),
+    [scopedRows],
+  );
+  const trend = useMemo(
+    () => buildHydrogenDailyTrend(datasets.lingniu, datasets.external, vehicleScope, scope === 'station' ? selectedStationId : null),
+    [datasets.external, datasets.lingniu, scope, selectedStationId, vehicleScope],
+  );
+
+  const selectedStation = stationOptions.find((station) => station.id === selectedStationId);
+
+  const dayCount = useMemo(() => {
+    const start = new Date(effectiveRange.start).getTime();
+    const end = new Date(effectiveRange.end).getTime();
+    return Math.max(1, Math.round(Math.abs(end - start) / (24 * 3600 * 1000)) + 1);
+  }, [effectiveRange.end, effectiveRange.start]);
+
+  const lingniuSum = useMemo(() => {
+    return (datasets.lingniu ?? []).reduce((s, r) => s + r.totalKg, 0);
+  }, [datasets.lingniu]);
+
+  const externalSum = useMemo(() => {
+    return (datasets.external ?? []).reduce((s, r) => s + r.totalKg, 0);
+  }, [datasets.external]);
+
+  const loadDetail = async (date: string, force = false) => {
+    if (!force && details[date]?.data) return;
+    setDetails((previous) => ({
+      ...previous,
+      [date]: { loading: true, data: previous[date]?.data ?? null, error: null },
+    }));
+    try {
+      const data = await fetchHydrogenDailyDetail(
+        date,
+        vehicleScope,
+        scope === 'station' ? selectedStationId : null,
+        verifyScope,
+      );
+      setDetails((previous) => ({
+        ...previous,
+        [date]: { loading: false, data, error: null },
+      }));
+    } catch (reason) {
+      setDetails((previous) => ({
+        ...previous,
+        [date]: {
+          loading: false,
+          data: previous[date]?.data ?? null,
+          error: reason instanceof Error ? reason.message : String(reason),
+        },
+      }));
+    }
+  };
+
+  const toggleRow = (date: string) => {
+    setExpanded((previous) => {
+      const next = new Set(previous);
+      if (next.has(date)) {
+        next.delete(date);
+      } else {
+        next.add(date);
+        void loadDetail(date);
+      }
      return next;
    });
-
-  const applyQuickPick = (nextPick: DateQuickPick) => {
-    setPick(nextPick);
-    setDateRange(getQuickRange(nextPick));
  };

-  const updateDateRange = (field: 'start' | 'end', value: string) => {
-    if (!value) return;
-    setPick('custom');
-    setDateRange(prev => ({ ...prev, [field]: value }));
+  const handleSelectDate = (date: string) => {
+    setExpanded((previous) => new Set(previous).add(date));
+    void loadDetail(date);
+    setHighlightedDate(date);
+    const element = document.getElementById(`hydrogen-daily-row-${date}`);
+    element?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

+  if (loading && !scopedRows) {
+    return <LoadingState label="正在加载氢气按日看板数据..." />;
+  }
+
+  if (error && !scopedRows) {
+    return <ErrorState message={error} />;
+  }
+
  return (
    <div className="flex flex-col gap-3">
      <DailyRangeControls
        pick={pick}
        dateRange={dateRange}
-        customer={customer}
-        onQuickPick={applyQuickPick}
+        customer={vehicleScope === 'all' ? 'all' : vehicleScope === 'lingniu' ? 'lingniu' : 'external'}
+        stations={scope === 'station' ? stationOptions : undefined}
+        selectedStationId={scope === 'station' ? selectedStationId : undefined}
+        vehicleScope={vehicleScope}
+        updatedAt={updatedAt}
+        loading={loading}
+        onQuickPick={(p: DateQuickPick) => {
+          setPick(p);
+          setDateRange(getQuickRange(p));
+        }}
        onCustomPick={() => setPick('custom')}
-        onDateRangeChange={updateDateRange}
-        onCustomerChange={setCustomer}
+        onDateRangeChange={(field, value) => {
+          setPick('custom');
+          setDateRange((prev) => ({ ...prev, [field]: value }));
+        }}
+        onCustomerChange={(cust: CustomerType) => {
+          setVehicleScope(cust === 'all' ? 'all' : cust === 'lingniu' ? 'lingniu' : 'external');
+        }}
+        onStationChange={scope === 'station' ? setSelectedStationId : undefined}
+        onVehicleScopeChange={setVehicleScope}
+        onRefresh={() => setRefreshKey((k) => k + 1)}
      />

-      <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={rangeText} />
-        <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>
-
-      {/* 外部车辆：新系统数据还没准备好 */}
-      {customer === 'external' && rows !== null && totalKg === 0 && (
-        <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
-        >
-          <div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
-            <Plug size={22} className="text-blue-500" />
-            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
-            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
-          </div>
-          <div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
-          <div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
-            新系统的外部车辆加氢数据还在准备中
-            <br />
-            上线后此处将展示完整明细
-          </div>
-        </motion.div>
-      )}
-
-      {/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
-      {!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
-        <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>
-          </div>
-          <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)}
-                tick={{ fontSize: 10, fill: '#94a3b8' }}
-                tickLine={false}
-                axisLine={false}
-                interval="preserveStartEnd"
-                minTickGap={8}
-              />
-              <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)" />
-                ))}
-              </Bar>
-              <defs>
-                <linearGradient id="hydrogenBarGrad" x1="0" x2="0" y1="0" y2="1">
-                  <stop offset="0%" stopColor="#22d3ee" />
-                  <stop offset="100%" stopColor="#3b82f6" />
-                </linearGradient>
-              </defs>
-            </BarChart>
-          </ResponsiveContainer>
-          </div>
-        </SurfaceCard>
-      )}
-
-      {/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
-      {!(customer === 'external' && rows !== null && totalKg === 0) && (
-      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
-        {/* 表头 */}
-        <div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
-          <span>日期 / 加氢站</span>
-          <span className="hidden md:block text-right">单价 (元/Kg)</span>
-          <span className="text-right">加氢量 (Kg)</span>
-          <span className="text-right">环比</span>
-        </div>
-        {/* 合计行 */}
-        <div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-blue-50/50 text-[12px] text-blue-600 font-bold">
-          <span>合计</span>
-          <span className="hidden md:block" />
-          <span className="text-right">{totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}</span>
-          <span />
-        </div>
-        {/* 主行 + 子行 */}
      {error ? (
-          <div className="p-3"><ErrorState message={error} /></div>
-        ) : rows === null ? (
-          <div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
-        ) : rows.length === 0 ? (
-          <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;
-          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 ${abnormalBg}`}>
+        <div className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-xs text-amber-800">
+          <div className="flex items-center gap-2">
+            <AlertTriangle size={14} className="text-amber-600" />
+            <span>最新数据刷新失败，正展示上一版缓存内容：{error}</span>
+          </div>
          <button
-                onClick={() => toggle(r.date)}
-                className="w-full grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2.5 text-left hover:bg-slate-50/60 transition-colors"
+            type="button"
+            onClick={() => setRefreshKey((k) => k + 1)}
+            className="inline-flex items-center gap-1 font-bold text-amber-900 hover:underline"
          >
-                <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`} />
-                  {r.date}
-                </span>
-                <span className="hidden md:block text-right text-[12px] text-slate-300">—</span>
-                <span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
-                  {r.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
-                </span>
-                <span className="text-right"><TrendBadge value={r.chainPct} /></span>
+            <RefreshCw size={12} /> 重试
          </button>
-              <AnimatePresence initial={false}>
-                {open && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: 'auto', opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.15 }}
-                    className="overflow-hidden bg-slate-50/50"
-                  >
-                    {r.stations.map(s => (
-                      <div
-                        key={s.name}
-                        className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 pl-6 md:pl-9 border-t border-slate-100 first:border-t-0 items-start"
-                      >
-                        <div className="min-w-0">
-                          <div className="text-[12px] text-slate-700 font-medium whitespace-nowrap leading-snug">
-                            {s.name}
-                          </div>
-                          {s.pricePerKg > 0 && (
-                            <div className="md:hidden mt-1">
-                              <span className="inline-flex items-center text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold whitespace-nowrap">
-                                单价 {s.pricePerKg} 元/Kg
-                              </span>
        </div>
+      ) : null}
+
+      {scope === 'station' && selectedStation ? (
+        <StationDailyOverview
+          station={selectedStation}
+          totalKg={summary.totalKg}
+          totalFee={summary.totalFee}
+          averagePrice={summary.avgPrice}
+        />
+      ) : null}
+
+      <DailyKpiGrid
+        rangeLabel={getRangeModeLabel(pick)}
+        rangeText={`${effectiveRange.start} 至 ${effectiveRange.end}`}
+        totalKg={summary.totalKg}
+        activeDays={summary.activeDays}
+        dayCount={dayCount}
+        averageKg={summary.avgKg}
+        stationCount={summary.stationCount}
+        vehicleScope={vehicleScope}
+        lingniuKg={lingniuSum}
+        externalKg={externalSum}
+        selectedStationName={scope === 'station' ? selectedStation?.name : undefined}
+      />
+
+      <DailyTrendChart
+        rows={trend}
+        averageKg={summary.avgKg}
+        peakDay={summary.peakDay}
+        lowDay={summary.lowDay}
+        zeroDays={summary.zeroDays}
+        selectedDate={highlightedDate}
+        onSelectDate={handleSelectDate}
+      />
+
+      {scopedRows && scopedRows.length > 0 ? (
+        <DailyDetailTable
+          rows={scopedRows}
+          totalKg={summary.totalKg}
+          totalFee={summary.totalFee}
+          expanded={expanded}
+          highlightedDate={highlightedDate}
+          details={details}
+          onToggle={toggleRow}
+          onRetryDetail={(date) => void loadDetail(date, true)}
+        />
+      ) : (
+        <EmptyState
+          title="当前筛选条件下没有加氢记录"
+          description="可尝试切换统计区间、车辆范围或站点。"
+        />
      )}
    </div>
-                        <span className="hidden md:block text-right text-[12px] text-slate-500 font-bold tabular-nums">{s.pricePerKg > 0 ? s.pricePerKg : '—'}</span>
-                        <span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
-                          {s.kg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
-                        </span>
-                        <span className="text-right"><TrendBadge value={s.chainPct} /></span>
-                      </div>
-                    ))}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          );
-        })}
-      </div>
-      )}
-      <RotatingFooterHint />
-    </div>
  );
 }
@@ -1,33 +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 },
-  { id: 'overview', label: '总览', icon: LayoutDashboard },
-] as const satisfies readonly { id: HydrogenSubTab; label: string; icon: typeof CalendarDays }[];
-
-const SUB_IDS: readonly HydrogenSubTab[] = ['daily', 'overview'];
+import { EnergyBiBoardApp } from './hydrogen-bi-v2/PrototypeBoard';

+/**
+ * New standalone Hydrogen BI surface. The legacy feature files remain for a
+ * controlled rollback, but the live hydrogen route now uses only v2.
+ */
 export default function HydrogenModule() {
-  const [sub, setSub] = useHashSubTab<HydrogenSubTab>('hydrogen', SUB_IDS);
-  return (
-    <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>
-  );
+  return <EnergyBiBoardApp />;
 }
@@ -1,106 +1,282 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import RotatingFooterHint from '../../components/RotatingFooterHint';
-import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  fetchHydrogenOverview,
+  fetchHydrogenOverviewDetail,
+  type HydrogenOverviewResponse,
+  type HydrogenVehicleScope,
+  type HydrogenVerifyScope,
+} from './api';
+import type { HydrogenBoardScope } from './HydrogenBoardChrome';
 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 { OverviewDrillTreeDialog } from './hydrogen-overview/components/OverviewDrillTreeDialog';
 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';
+import {
+  deriveOverviewMetrics,
+  formatYuan,
+  type OverviewDrillRequest,
+  type OverviewScope,
+} from './hydrogen-overview/model';
+import type {
+  HydrogenOverviewDetailGroupBy,
+  HydrogenOverviewDetailResponse,
+} from './types';
+import './styles/energy-bi-board.css';

-export default function HydrogenOverview() {
+export interface HydrogenOverviewProps {
+  scope?: OverviewScope;
+  selectedStationId?: number | null;
+  onScopeChange?: (scope: HydrogenBoardScope) => void;
+  onSubChange?: (sub: 'daily' | 'overview' | 'settlement') => void;
+  onSelectStation?: (stationId: number | null) => void;
+  onOpenDaily?: () => void;
+  onRangeTextChange?: (rangeText: string) => void;
+}
+
+const DEFAULT_AVAILABLE_YEARS = [2026, 2025, 2024, 2023, 2022, 2021, 2020];
+
+interface DrillSelection {
+  stationId?: number | null;
+  customerId?: number | null;
+  customerName?: string | null;
+  plateNo?: string | null;
+  region?: string | null;
+  month?: string | null;
+  date?: string | null;
+}
+
+export default function HydrogenOverview({
+  scope = 'global',
+  selectedStationId = null,
+  onScopeChange,
+  onSubChange,
+  onSelectStation,
+  onOpenDaily,
+  onRangeTextChange,
+}: HydrogenOverviewProps) {
+  const currentYear = new Date().getFullYear();
+  const [activeYear, setActiveYear] = useState<number>(() => {
+    return DEFAULT_AVAILABLE_YEARS.includes(currentYear) ? currentYear : 2026;
+  });
+  const [vehicleScope, setVehicleScope] = useState<HydrogenVehicleScope>('all');
+  const [verifyScope, setVerifyScope] = useState<HydrogenVerifyScope>('all');
+  const [internalStationId, setInternalStationId] = useState<number | null>(selectedStationId);
  const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [year, setYear] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [lastRefreshAt, setLastRefreshAt] = useState<number>(0);
-  const refreshSeq = useRef(0);
+  const [error, setError] = useState<string | null>(null);

-  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);
+  const [drillTree, setDrillTree] = useState<{
+    title: string;
+    selection: DrillSelection;
+  } | null>(null);
+
+  const effectiveStationId = scope === 'station' ? (internalStationId ?? selectedStationId) : null;
+
+  const load = useCallback(async (force = false) => {
+    if (force) setRefreshing(true);
+    else setLoading(true);
    setError(null);
+
+    try {
+      const result = await fetchHydrogenOverview({
+        year: activeYear,
+        vehicleScope,
+        verifyScope,
+        stationId: effectiveStationId,
+        force,
+      });
+      setData(result);
      setLastRefreshAt(Date.now());
-    } catch (e) {
-      if (seq !== refreshSeq.current) return;
-      setError(e instanceof Error ? e.message : String(e));
+      const rangeEnd = result.latestLedgerTime?.slice(0, 10) ?? (activeYear === currentYear ? '至今' : `${activeYear}-12-31`);
+      onRangeTextChange?.(`${activeYear}-01-01 至 ${rangeEnd}`);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
    } finally {
-      if (seq === refreshSeq.current) setRefreshing(false);
+      setLoading(false);
+      setRefreshing(false);
    }
-  }, []);
+  }, [activeYear, currentYear, effectiveStationId, onRangeTextChange, vehicleScope, verifyScope]);

-  // 初始加载 + 年份切换：用 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]);
+    void load(false);
+  }, [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>;
+  const handleDrillRequest = (request: OverviewDrillRequest) => {
+    const selection: DrillSelection = {};
+    if (request.entityId) {
+      if (request.kind === 'station') selection.stationId = request.entityId;
+      if (request.kind === 'customer') selection.customerId = request.entityId;
    }
-  if (!data) {
+    if (request.kind === 'customer' && !request.entityId) selection.customerName = request.key;
+    if (request.kind === 'month') selection.month = request.key;
+    if (request.kind === 'region') selection.region = request.key;
+
+    setDrillTree({
+      title: request.label || '数据下钻穿透',
+      selection,
+    });
+  };
+
+  const handleDrillLoad = useCallback(async (
+    groupBy: HydrogenOverviewDetailGroupBy | null,
+    selection: DrillSelection,
+    scopeParam: HydrogenVehicleScope,
+    includeAll = false,
+  ): Promise<HydrogenOverviewDetailResponse> => {
+    return fetchHydrogenOverviewDetail({
+      year: activeYear,
+      vehicleScope: scopeParam,
+      verifyScope,
+      stationId: selection.stationId ?? effectiveStationId,
+      customerId: selection.customerId ?? null,
+      customerName: selection.customerName ?? null,
+      plateNo: selection.plateNo ?? null,
+      month: selection.month ?? null,
+      date: selection.date ?? null,
+      region: selection.region ?? null,
+      groupBy,
+      limit: includeAll ? 500 : 50,
+    });
+  }, [activeYear, effectiveStationId, verifyScope]);
+
+  const derived = useMemo(() => {
+    if (!data) return null;
+    return deriveOverviewMetrics(data);
+  }, [data]);
+
+  if (loading && !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);
+  if (error && !data) {
+    return (
+      <div className="rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700">
+        <div className="font-bold">氢能总览数据加载失败</div>
+        <p className="mt-1 text-xs text-red-600">{error}</p>
+        <button
+          type="button"
+          onClick={() => void load(true)}
+          className="mt-3 inline-flex items-center rounded-lg bg-white px-3 py-1.5 text-xs font-bold text-slate-700 shadow-sm hover:bg-slate-50"
+        >
+          重新加载
+        </button>
+      </div>
+    );
+  }
+
+  const selectedStationName = data?.stations.find((s) => s.id === effectiveStationId)?.name ?? null;
+  const yearProfitFmt = data ? formatYuan(data.kpi.yearProfit) : { value: '0', unit: '元' };
+  const yearRevenueFmt = data ? formatYuan(data.kpi.yearRevenue) : { value: '0', unit: '元' };

  return (
-    <div className="flex flex-col gap-3 relative">
+    <>
      <OverviewHeader
        activeYear={activeYear}
-        availableYears={availableYears}
+        availableYears={DEFAULT_AVAILABLE_YEARS}
+        vehicleScope={vehicleScope}
+        verifyScope={verifyScope}
+        latestLedgerTime={data?.latestLedgerTime ?? null}
        lastRefreshAt={lastRefreshAt}
        refreshing={refreshing}
-        onSelectYear={setYear}
-        onRefresh={() => void load(year, true)}
+        onSelectYear={(y) => setActiveYear(y)}
+        onVehicleScopeChange={(vs) => setVehicleScope(vs)}
+        onVerifyScopeChange={setVerifyScope}
+        onRefresh={() => void load(true)}
      />

-      <KpiSection kpi={kpi} />
+      {data && derived ? (
+        <section className="ehb-host" aria-label="经营总览">
+          <KpiSection
+            kpi={data.kpi}
+            scope={scope}
+            scopeLabel={selectedStationName}
+            onDrillRequest={handleDrillRequest}
+          />

          <InsightCards
-        monthAvgKg={monthAvgKg}
-        bestMonth={bestMonth}
-        latestMonth={latestMonth}
-        monthMomentum={monthMomentum}
-        top5Share={top5Share}
-        profitYield={profitYield}
-        stationAvgKg={stationAvgKg}
-        stationCount={stations.length}
+            monthAvgKg={derived.monthAvgKg}
+            bestMonth={derived.bestMonth}
+            latestMonth={derived.latestMonth}
+            monthMomentum={derived.monthMomentum}
+            top5Share={derived.top5Share}
+            customerGrossMarginPct={derived.customerGrossMarginPct}
+            stationAvgKg={derived.stationAvgKg}
+            stationCount={data.stations.length}
            yearProfitValue={yearProfitFmt.value}
            yearProfitUnit={yearProfitFmt.unit}
            yearRevenueValue={yearRevenueFmt.value}
            yearRevenueUnit={yearRevenueFmt.unit}
+            stations={data.stations}
+            onSelectStation={(stId) => {
+              setInternalStationId(stId);
+              onSelectStation?.(stId);
+            }}
+            onDrillRequest={handleDrillRequest}
          />

-      <MonthlyCharts activeYear={activeYear} monthly={monthly} monthlyDual={monthlyDual} />
-      <DistributionCharts top5={top5} regions={regions} yearKg={kpi.yearKg} />
-      <StationSummaryTable stations={stations} />
-      <CustomerSummaryTable customers={customers} />
+          <div className="ehb-overview-charts">
+            <MonthlyCharts
+              activeYear={activeYear}
+              monthly={data.monthly}
+              monthlyDual={derived.monthlyDual}
+              scope={scope}
+              scopeLabel={selectedStationName}
+              onDrillRequest={handleDrillRequest}
+            />

-      <RotatingFooterHint />
-      <RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
+            <DistributionCharts
+              top5={data.top5}
+              regions={data.regions}
+              stations={data.stations}
+              yearKg={data.kpi.yearKg}
+              onSelectStation={(stId) => {
+                setInternalStationId(stId);
+                onSelectStation?.(stId);
+              }}
+              scope={scope}
+              scopeLabel={selectedStationName}
+              onDrillRequest={handleDrillRequest}
+            />
          </div>
+
+          <StationSummaryTable
+            stations={data.stations}
+            onSelectStation={(stId) => {
+              setInternalStationId(stId);
+              onSelectStation?.(stId);
+            }}
+            scope={scope}
+            scopeLabel={selectedStationName}
+            onDrillRequest={handleDrillRequest}
+          />
+
+          <CustomerSummaryTable
+            customers={data.customers}
+            scope={scope}
+            scopeLabel={selectedStationName}
+            onDrillRequest={handleDrillRequest}
+          />
+        </section>
+      ) : null}
+
+      {drillTree && (
+        <OverviewDrillTreeDialog
+          title={drillTree.title}
+          initialVehicleScope={vehicleScope}
+          initialSelection={drillTree.selection}
+          load={handleDrillLoad}
+          onClose={() => setDrillTree(null)}
+        />
+      )}
+
+      <RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
+    </>
  );
 }
@@ -0,0 +1,186 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Building2, CalendarDays, Landmark, ReceiptText, ShieldCheck, WalletCards } from 'lucide-react';
+import { fetchHydrogenSettlement, type HydrogenSettlementRange, type HydrogenSettlementResponse } from './api';
+import { getQuickRange } from './hydrogen-daily/model';
+import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
+import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from './components/SortableColumnHeader';
+
+type ViewRange = HydrogenSettlementRange | 'custom';
+
+const RANGE_OPTIONS: { id: ViewRange; label: string }[] = [
+  { id: 'latest', label: '最近有数据' },
+  { id: 'thisWeek', label: '本周' },
+  { id: 'thisMonth', label: '本月' },
+  { id: 'last15', label: '近15日' },
+  { id: 'custom', label: '自定义' },
+];
+
+const matchModeText = {
+  exact: '精确匹配',
+  manual: '人工匹配',
+  group: '集团匹配',
+  unmatched: '待匹配',
+} as const;
+
+function formatYuan(value: number) {
+  return `¥${value.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
+}
+
+export default function HydrogenSettlement() {
+  const [range, setRange] = useState<ViewRange>('latest');
+  const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
+  const [data, setData] = useState<HydrogenSettlementResponse | null>(null);
+  const [selectedStation, setSelectedStation] = useState<string>('');
+  const [sortKey, setSortKey] = useState<'date' | 'stationName' | 'matchMode' | 'paymentCount' | 'amount'>('date');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    const query = range === 'custom'
+      ? { range: 'custom' as const, startDate: dateRange.start, endDate: dateRange.end }
+      : { range };
+    fetchHydrogenSettlement(query)
+      .then(result => { if (!cancelled) setData(result); })
+      .catch(reason => { if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason)); });
+    return () => { cancelled = true; };
+  }, [range, dateRange.start, dateRange.end]);
+
+  const stationOptions = useMemo(() => {
+    if (!data) return [];
+    return Array.from(new Set(data.rows.map(row => row.stationName))).sort((a, b) => a.localeCompare(b, 'zh-CN'));
+  }, [data]);
+  const rows = useMemo(
+    () => data?.rows.filter(row => !selectedStation || row.stationName === selectedStation) ?? [],
+    [data, selectedStation],
+  );
+  const sortedRows = useMemo(() => sortBy(rows, sortKey, sortDirection, (row, key) => row[key]), [rows, sortDirection, sortKey]);
+  const selectedSummary = useMemo(() => ({
+    amount: rows.reduce((total, row) => total + row.amount, 0),
+    paymentCount: rows.reduce((total, row) => total + row.paymentCount, 0),
+    stationDayCount: rows.length,
+  }), [rows]);
+
+  useEffect(() => {
+    if (selectedStation && !stationOptions.includes(selectedStation)) setSelectedStation('');
+  }, [selectedStation, stationOptions]);
+
+  const setPreset = (next: ViewRange) => {
+    setRange(next);
+    if (next !== 'latest' && next !== 'custom') setDateRange(getQuickRange(next));
+  };
+  const changeSort = (nextKey: typeof sortKey) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="px-1">
+        <h2 className="text-base font-black text-slate-900">站日现结台账</h2>
+        <p className="mt-0.5 text-[11px] font-bold text-slate-400">只读展示已入库的加氢站付款流水，不提供登记或审批操作</p>
+      </div>
+
+      <SurfaceCard className="p-2 md:p-3">
+        <div className="flex items-center gap-2 overflow-x-auto pb-1">
+          {RANGE_OPTIONS.map(option => (
+            <button
+              key={option.id}
+              onClick={() => setPreset(option.id)}
+              className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${range === option.id
+                ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
+                : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'}`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+        {range === 'custom' ? (
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            {(['start', 'end'] as const).map(field => (
+              <label key={field} className="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
+                <span className="block text-[10px] font-black text-slate-400">{field === 'start' ? '开始日期' : '结束日期'}</span>
+                <input
+                  type="date"
+                  value={dateRange[field]}
+                  onChange={event => setDateRange(previous => ({ ...previous, [field]: event.target.value }))}
+                  className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
+                />
+              </label>
+            ))}
+          </div>
+        ) : null}
+        {stationOptions.length > 0 ? (
+          <label className="mt-2 flex min-h-10 items-center gap-2 rounded-xl border border-slate-100 bg-slate-50 px-3 text-slate-600">
+            <Building2 size={14} className="shrink-0 text-slate-400" />
+            <select
+              aria-label="筛选现结加氢站"
+              value={selectedStation}
+              onChange={event => setSelectedStation(event.target.value)}
+              className="min-w-0 flex-1 bg-transparent text-[12px] font-black outline-none"
+            >
+              <option value="">全部加氢站</option>
+              {stationOptions.map(station => <option key={station} value={station}>{station}</option>)}
+            </select>
+          </label>
+        ) : null}
+      </SurfaceCard>
+
+      {error ? <ErrorState message="站日现结台账暂时不可用，请稍后刷新。" /> : null}
+      {!data && !error ? <LoadingState label="正在读取站日现结台账" /> : null}
+
+      {data ? (
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+          <MetricTile icon={WalletCards} label="现结金额" value={formatYuan(selectedSummary.amount)} helper={`${data.range.start ?? '--'} 至 ${data.range.end ?? '--'}`} />
+          <MetricTile icon={ReceiptText} label="付款流水" value={selectedSummary.paymentCount.toLocaleString('zh-CN')} unit="笔" helper="按付款流水累计" tone="emerald" />
+          <MetricTile icon={CalendarDays} label="站日记录" value={selectedSummary.stationDayCount.toLocaleString('zh-CN')} unit="条" helper="日期与站点组合" tone="amber" />
+          <MetricTile icon={Landmark} label="最新付款日" value={data.summary.latestPaymentDate ?? '--'} helper={`涉及 ${selectedStation ? 1 : data.summary.stationCount} 个加氢站`} tone="slate" />
+        </div>
+      ) : null}
+
+      {data && rows.length === 0 ? <EmptyState title="当前统计范围没有付款流水" description="可选择“最近有数据”查看最近一次已入库的站日现结记录。" /> : null}
+
+      {data && rows.length > 0 ? (
+        <SurfaceCard className="overflow-hidden">
+          <div className="flex items-start justify-between gap-3 border-b border-slate-100 px-4 py-3">
+            <div>
+              <h3 className="text-sm font-black text-slate-800">站日现结明细</h3>
+              <p className="mt-0.5 text-[11px] font-bold text-slate-400">付款日期、匹配站点及实际付款金额</p>
+            </div>
+            <div className="flex items-center gap-1 rounded-lg bg-emerald-50 px-2 py-1 text-[10px] font-black text-emerald-600">
+              <ShieldCheck size={13} /> 只读台账
+            </div>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="min-w-[620px] w-full text-left text-[12px]">
+              <thead className="bg-slate-50 text-[11px] font-black text-slate-400">
+                <tr>
+                  <th className="px-4 py-3"><SortableColumnHeader label="付款日期" sortKey="date" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="px-4 py-3"><SortableColumnHeader label="加氢站" sortKey="stationName" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="px-4 py-3"><SortableColumnHeader label="匹配方式" sortKey="matchMode" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="px-4 py-3 text-right"><SortableColumnHeader label="流水笔数" sortKey="paymentCount" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th className="px-4 py-3 text-right"><SortableColumnHeader label="现结金额" sortKey="amount" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100 font-bold text-slate-700">
+                {sortedRows.map(row => (
+                  <tr key={`${row.date}-${row.stationId ?? row.stationName}`}>
+                    <td className="whitespace-nowrap px-4 py-3 text-slate-500">{row.date}</td>
+                    <td className="max-w-[260px] truncate px-4 py-3 text-slate-800" title={row.stationName}>{row.stationName}</td>
+                    <td className="px-4 py-3"><span className="rounded-md bg-slate-100 px-2 py-1 text-[10px] text-slate-500">{matchModeText[row.matchMode]}</span></td>
+                    <td className="px-4 py-3 text-right">{row.paymentCount}</td>
+                    <td className="whitespace-nowrap px-4 py-3 text-right font-black text-emerald-600">{formatYuan(row.amount)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </SurfaceCard>
+      ) : null}
+      <RotatingFooterHint hints={['付款金额仅取已入库流水，不补算应付或未付金额', '登记、审批与付款操作不在 BI 页面开放']} />
+    </div>
+  );
+}
@@ -0,0 +1,544 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ArrowLeft,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Fuel,
+  RefreshCw,
+  Wallet,
+  X,
+} from 'lucide-react';
+import * as XLSX from 'xlsx';
+import { fetchHydrogenStationBoard } from './api';
+import type {
+  HydrogenStationBoardCustomerMonth,
+  HydrogenStationBoardResponse,
+  HydrogenStationBoardStation,
+  HydrogenStationBoardSummaryDailyRow,
+} from './types';
+import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from './components/SortableColumnHeader';
+import './styles/energy-bi-board.css';
+import './hydrogen-bi-v2/prototype-station-daily.css';
+
+function formatYmd(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+function defaultRange() {
+  const end = new Date();
+  end.setHours(0, 0, 0, 0);
+  const start = new Date(end);
+  start.setDate(start.getDate() - 9);
+  return { start: formatYmd(start), end: formatYmd(end) };
+}
+
+function formatNumber(value: number, digits = 2): string {
+  return value.toLocaleString('zh-CN', { minimumFractionDigits: digits, maximumFractionDigits: digits });
+}
+
+function regionLabel(station: HydrogenStationBoardStation): string {
+  const parts = [station.province, station.city].filter(part => part && part !== '未归属');
+  return [...new Set(parts)].join(' · ') || '区域待补充';
+}
+
+function resetPageScroll() {
+  document.documentElement.scrollTop = 0;
+  document.body.scrollTop = 0;
+  window.scrollTo(0, 0);
+}
+
+export default function HydrogenStationBoard({ embedded = false }: { embedded?: boolean }) {
+  const [dateRange, setDateRange] = useState(defaultRange);
+  const [selectedStationId, setSelectedStationId] = useState<number | null>(null);
+  const [data, setData] = useState<HydrogenStationBoardResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async (force = false) => {
+    setLoading(true);
+    try {
+      const result = await fetchHydrogenStationBoard({
+        startDate: dateRange.start,
+        endDate: dateRange.end,
+        stationId: selectedStationId,
+        force,
+      });
+      setData(result);
+      setError(null);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    } finally {
+      setLoading(false);
+    }
+  }, [dateRange.end, dateRange.start, selectedStationId]);
+
+  useEffect(() => { void load(false); }, [load]);
+
+  useEffect(() => {
+    // 站点列表较长，切换列表/详情时统一从页面顶部开始展示。
+    resetPageScroll();
+    const frame = window.requestAnimationFrame(resetPageScroll);
+    return () => window.cancelAnimationFrame(frame);
+  }, [selectedStationId]);
+
+  const selectedStation = data?.stations.find(station => station.id === selectedStationId) ?? null;
+
+  if (error && !data) {
+    return (
+      <div className="rounded-xl border border-red-200 bg-red-50 p-5 text-sm text-red-700">
+        <div>单站经营数据暂时不可用。</div>
+        <button type="button" onClick={() => void load(true)} className="mt-3 rounded-lg bg-white px-3 py-2 text-xs font-bold shadow-sm">重新加载</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={embedded ? 'sd-embedded' : 'relative flex flex-col gap-3'}>
+      {!(selectedStation && data?.selected) ? <StationBoardHeader
+        embedded={embedded}
+        selectedStation={selectedStation}
+        range={dateRange}
+        latestLedgerTime={data?.summary.latestLedgerTime ?? null}
+        loading={loading}
+        onBack={() => {
+          setSelectedStationId(null);
+          window.requestAnimationFrame(resetPageScroll);
+        }}
+        onRangeChange={setDateRange}
+        onRefresh={() => void load(true)}
+        onExport={() => data && exportStationEvidence(data, selectedStation)}
+      /> : null}
+
+      {data ? selectedStation && data.selected ? (
+        <StationDetail
+          station={selectedStation}
+          data={data}
+          latestLedgerTime={data.summary.latestLedgerTime}
+          loading={loading}
+          onBack={() => setSelectedStationId(null)}
+          onRangeChange={setDateRange}
+          onRefresh={() => void load(true)}
+          onExport={() => exportStationEvidence(data, selectedStation)}
+        />
+      ) : (
+        <StationOverview
+          data={data}
+          onSelectStation={stationId => {
+            setSelectedStationId(stationId);
+            window.requestAnimationFrame(resetPageScroll);
+          }}
+        />
+      ) : (
+        <StationBoardSkeleton />
+      )}
+
+      {loading && data ? (
+        <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-white/45 backdrop-blur-[1px]">
+          <div className="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-xs font-bold text-slate-600 shadow-xl">
+            <RefreshCw size={15} className="animate-spin text-blue-600" /> 正在刷新单站数据
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function StationBoardHeader({
+  embedded,
+  selectedStation,
+  range,
+  latestLedgerTime,
+  loading,
+  onBack,
+  onRangeChange,
+  onRefresh,
+  onExport,
+}: {
+  embedded: boolean;
+  selectedStation: HydrogenStationBoardStation | null;
+  range: { start: string; end: string };
+  latestLedgerTime: string | null;
+  loading: boolean;
+  onBack: () => void;
+  onRangeChange: (range: { start: string; end: string }) => void;
+  onRefresh: () => void;
+  onExport: () => void;
+}) {
+  if (embedded && !selectedStation) {
+    return <header className="sd-topbar sd-topbar--embedded"><p className="sd-topbar__updated">最后更新时间 {latestLedgerTime ?? '暂无账本时间'}</p><div className="sd-topbar__tools"><StationRangePicker range={range} onChange={onRangeChange} /><button type="button" onClick={onRefresh} disabled={loading} className="sd-btn sd-btn--ghost"><RefreshCw size={14} className={loading ? 'animate-spin' : ''} /> 刷新</button></div></header>;
+  }
+  return (
+    <header className="rounded-[12px] border border-slate-200 bg-white px-4 py-3 shadow-sm">
+      <div className="flex flex-wrap items-center gap-3">
+        {selectedStation ? (
+          <button type="button" onClick={onBack} className="inline-flex h-9 items-center gap-1 rounded-lg border border-slate-200 px-3 text-xs font-bold text-slate-600 hover:bg-slate-50">
+            <ArrowLeft size={15} /> 返回
+          </button>
+        ) : null}
+        <div className="min-w-0 flex-1">
+          {selectedStation ? <h1 className="truncate text-[18px] font-black text-slate-950">{selectedStation.name}</h1> : null}
+          {selectedStation ? <p className="mt-0.5 text-[11px] font-medium text-slate-500">{regionLabel(selectedStation)} · {range.start} 至 {range.end}</p> : null}
+          <p className={`${selectedStation ? 'mt-1' : ''} text-[11px] font-medium text-slate-400`}>最后更新时间 {latestLedgerTime ?? '暂无账本时间'}</p>
+        </div>
+        <label className="flex h-9 items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 text-[11px] font-bold text-slate-600">
+          <Calendar size={14} className="text-blue-600" />
+          <span className="hidden sm:inline">查询日期</span>
+          <input aria-label="开始日期" type="date" value={range.start} onChange={event => onRangeChange({ ...range, start: event.target.value })} className="w-[110px] bg-transparent outline-none" />
+          <span>至</span>
+          <input aria-label="结束日期" type="date" value={range.end} onChange={event => onRangeChange({ ...range, end: event.target.value })} className="w-[110px] bg-transparent outline-none" />
+        </label>
+        <button type="button" onClick={onRefresh} disabled={loading} className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-slate-200 px-3 text-xs font-bold text-slate-600 hover:bg-slate-50 disabled:opacity-60">
+          <RefreshCw size={14} className={loading ? 'animate-spin' : ''} /> 刷新
+        </button>
+        {selectedStation ? (
+          <button type="button" onClick={onExport} className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-blue-600 px-3 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
+            <Download size={14} /> 导出取证
+          </button>
+        ) : null}
+      </div>
+    </header>
+  );
+}
+
+function StationRangePicker({ range, onChange }: { range: { start: string; end: string }; onChange: (range: { start: string; end: string }) => void }) {
+  const [open, setOpen] = useState(false);
+  const [activeBoundary, setActiveBoundary] = useState<'start' | 'end'>('start');
+  const [draft, setDraft] = useState(range);
+  const initial = new Date(`${range.start}T00:00:00`);
+  const [displayMonth, setDisplayMonth] = useState({ year: initial.getFullYear(), month: initial.getMonth() + 1 });
+  const rootRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const closeWhenOutside = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', closeWhenOutside);
+    return () => document.removeEventListener('mousedown', closeWhenOutside);
+  }, []);
+  const anchor = new Date(`${range.end}T00:00:00`);
+  const apply = (next: { start: string; end: string }, close = false) => {
+    const normalized = next.start <= next.end ? next : { start: next.end, end: next.start };
+    setDraft(normalized);
+    if (close) { onChange(normalized); setOpen(false); }
+  };
+  const today = formatYmd(anchor);
+  const startOfWeek = new Date(anchor);
+  startOfWeek.setDate(anchor.getDate() - ((anchor.getDay() + 6) % 7));
+  const shortcuts = {
+    today: { start: today, end: today },
+    week: { start: formatYmd(startOfWeek), end: formatYmd(new Date(startOfWeek.getFullYear(), startOfWeek.getMonth(), startOfWeek.getDate() + 6)) },
+    month: { start: `${anchor.getFullYear()}-${String(anchor.getMonth() + 1).padStart(2, '0')}-01`, end: formatYmd(new Date(anchor.getFullYear(), anchor.getMonth() + 1, 0)) },
+  };
+  const daysInMonth = new Date(displayMonth.year, displayMonth.month, 0).getDate();
+  const leadingDays = new Date(displayMonth.year, displayMonth.month - 1, 1).getDay();
+  const selectDay = (day: number) => {
+    const value = `${displayMonth.year}-${String(displayMonth.month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    if (activeBoundary === 'start') {
+      const next = { start: value, end: value > draft.end ? value : draft.end };
+      setDraft(next); setActiveBoundary('end'); return;
+    }
+    const next = value < draft.start ? { start: value, end: draft.start } : { start: draft.start, end: value };
+    setDraft(next); setActiveBoundary('start');
+  };
+  return <div className="sd-date sd-date--right" ref={rootRef}>
+    <button type="button" className={`sd-date__trigger ${open ? 'is-open' : ''}`} aria-label="查询日期" aria-haspopup="dialog" aria-expanded={open} onClick={() => {
+      if (!open) { setDraft(range); setActiveBoundary('start'); setDisplayMonth({ year: initial.getFullYear(), month: initial.getMonth() + 1 }); }
+      setOpen(value => !value);
+    }}><span className="sd-date__label">查询日期</span><span className="sd-date__value">{range.start} 至 {range.end}</span><ChevronDown size={15} aria-hidden className="sd-date__icon" /></button>
+    {open ? <div className="sd-date__popover sd-date__popover--range" role="dialog" aria-label="查询日期">
+      <div className="sd-date__shortcuts"><button type="button" onClick={() => apply(shortcuts.today, true)}>本日</button><button type="button" onClick={() => apply(shortcuts.week, true)}>本周</button><button type="button" onClick={() => apply(shortcuts.month, true)}>本月</button></div>
+      <div className="sd-date__range-tabs"><button type="button" className={activeBoundary === 'start' ? 'is-on' : ''} onClick={() => setActiveBoundary('start')}>开始 {draft.start}</button><button type="button" className={activeBoundary === 'end' ? 'is-on' : ''} onClick={() => setActiveBoundary('end')}>结束 {draft.end}</button></div>
+      <div className="sd-date__header"><button type="button" className="sd-date__nav" aria-label="上一月" onClick={() => setDisplayMonth(value => value.month === 1 ? { year: value.year - 1, month: 12 } : { ...value, month: value.month - 1 })}><ChevronLeft size={16} /></button><div className="sd-date__title">{displayMonth.year}年{String(displayMonth.month).padStart(2, '0')}月</div><button type="button" className="sd-date__nav" aria-label="下一月" onClick={() => setDisplayMonth(value => value.month === 12 ? { year: value.year + 1, month: 1 } : { ...value, month: value.month + 1 })}><ChevronRight size={16} /></button></div>
+      <div className="sd-date__week">{['日','一','二','三','四','五','六'].map(day => <span key={day}>{day}</span>)}</div><div className="sd-date__grid">{Array.from({ length: leadingDays }, (_, index) => <span key={`empty-${index}`} className="sd-date__day is-empty" />)}{Array.from({ length: daysInMonth }, (_, index) => { const day = index + 1; const value = `${displayMonth.year}-${String(displayMonth.month).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const classes = ['sd-date__day', value === draft.start || value === draft.end ? 'is-selected' : '', value >= draft.start && value <= draft.end ? 'is-in-range' : ''].filter(Boolean).join(' '); return <button key={day} type="button" className={classes} onClick={() => selectDay(day)}>{day}</button>; })}</div>
+      <div className="sd-date__footer sd-date__footer--range"><button type="button" className="sd-date__today" onClick={() => apply(shortcuts.today, true)}>本日</button><button type="button" className="sd-btn sd-btn--primary sd-date__apply" onClick={() => apply(draft, true)}>确定</button></div>
+    </div> : null}
+  </div>;
+}
+
+function StationOverview({ data, onSelectStation }: { data: HydrogenStationBoardResponse; onSelectStation: (id: number) => void }) {
+  const [displayMode, setDisplayMode] = useState<'all' | 'single'>('all');
+  const [displayStationId, setDisplayStationId] = useState(data.stations[0]?.id ?? 0);
+  const [dailyDrill, setDailyDrill] = useState<'kg' | 'fee' | 'payment' | null>(null);
+  const [partnersExpanded, setPartnersExpanded] = useState(false);
+  const { selfManagedStations, partnerStations } = useMemo(() => {
+    const selfManaged = data.stations
+      .filter(isSelfManagedStation)
+      .sort((left, right) => selfManagedStationRank(left) - selfManagedStationRank(right));
+    const selfManagedIds = new Set(selfManaged.map(station => station.id));
+    return {
+      selfManagedStations: selfManaged,
+      partnerStations: data.stations
+        .filter(station => station.kg > 0 && !selfManagedIds.has(station.id))
+        .sort((left, right) => right.kg - left.kg || left.name.localeCompare(right.name, 'zh-CN')),
+    };
+  }, [data.stations]);
+  const visiblePartnerStations = partnersExpanded ? partnerStations : partnerStations.slice(0, 10);
+  const selectedStation = data.stations.filter(station => station.id === displayStationId);
+  // Top5 的条形、图例与钻取入口必须共用同一份按加氢量降序的结果。
+  const shareStations = data.stations
+    .filter(station => station.kg > 0)
+    .sort((left, right) => right.kg - left.kg)
+    .slice(0, 5);
+  const shareTrackTotal = shareStations.reduce((sum, station) => sum + station.kg, 0);
+  return (
+    <>
+      <section aria-label="全站核心指标" className="sd-hero-kpis">
+        <div className="sd-hero-kpi"><span className="sd-hero-kpi__label">加氢站</span><strong className="sd-hero-kpi__value">{data.summary.stationCount}<span>站</span></strong><span className="sd-hero-kpi__sub">统计站点数 · 活跃 {data.summary.activeStationCount} 站</span></div>
+        <StationSummaryMetric label="统计加氢总量" value={formatNumber(data.summary.totalKg)} unit="Kg" helper={`${data.summary.recordCount} 车次 · 点按查看日明细`} onClick={() => setDailyDrill('kg')} />
+        <StationSummaryMetric label="统计加氢量" value={formatNumber(data.summary.totalKg)} unit="Kg" helper={`¥${formatNumber(data.summary.totalFee)} · ${data.summary.daily.length} 天`} onClick={() => setDailyDrill('fee')} />
+        <StationSummaryMetric label="统计现结金额" value={formatNumber(data.summary.paymentAmount)} unit="元" helper={`${data.summary.daily.filter(item => item.paymentAmount > 0).length} 天有进账`} onClick={() => setDailyDrill('payment')} />
+      </section>
+      <section className="sd-share-panel" aria-label="加氢量占比Top5">
+        <div className="sd-share-panel__head"><h2 className="sd-share-panel__title">加氢量占比Top5 <span className="sd-share-panel__range">{data.range.start} 至 {data.range.end}</span></h2><span className="sd-share-panel__total">合计 <strong>{formatNumber(data.summary.totalKg)} Kg</strong></span></div>
+        <div className="sd-share-track">{shareStations.map((station, index) => <button key={station.id} type="button" className={`sd-share-seg sd-share-seg--${index}`} style={{ width: `${shareTrackTotal > 0 ? (station.kg / shareTrackTotal) * 100 : 0}%` }} onClick={() => onSelectStation(station.id)}><span className="sd-share-seg__pct">{(station.share * 100).toFixed(1)}%</span><span className="sd-share-seg__name">{station.name}</span></button>)}</div>
+        <ul className="sd-share-legend">{shareStations.map((station, index) => <li key={station.id}><button type="button" className="sd-share-legend__btn" onClick={() => onSelectStation(station.id)}><span className={`sd-share-legend__swatch sd-share-seg--${index}`} /><span className="sd-share-legend__rank" aria-label={`第 ${index + 1} 名`}>{index + 1}</span><span className="sd-share-legend__name">{station.name}</span><span className="sd-share-legend__val">{formatNumber(station.kg)} Kg · {(station.share * 100).toFixed(1)}%</span></button></li>)}</ul>
+      </section>
+
+      <section aria-label="各站经营概况">
+        <div className="sd-section-head"><h2 className="sd-section-title">各站概况</h2><div className="sd-board-mode" role="tablist" aria-label="各站展示方式"><button type="button" role="tab" aria-selected={displayMode === 'all'} onClick={() => setDisplayMode('all')} className={displayMode === 'all' ? 'is-on' : ''}>全部</button><button type="button" role="tab" aria-selected={displayMode === 'single'} onClick={() => setDisplayMode('single')} className={displayMode === 'single' ? 'is-on' : ''}>单站</button>{displayMode === 'single' ? <select aria-label="选择站点" value={displayStationId} onChange={event => setDisplayStationId(Number(event.target.value))} className="sd-board-station-select">{data.stations.map(station => <option key={station.id} value={station.id}>{station.name}</option>)}</select> : null}</div></div>
+        {displayMode === 'all' ? <div className="sd-station-groups">
+          <StationGroup title="自营站" count={selfManagedStations.length} stations={selfManagedStations} onSelectStation={onSelectStation} emptyText="自营站数据待接入" />
+          <StationGroup title="合作站" count={partnerStations.length} stations={visiblePartnerStations} onSelectStation={onSelectStation} emptyText="本区间暂无合作站加氢量" />
+          {partnerStations.length > 10 ? <button type="button" className="sd-more-btn" onClick={() => setPartnersExpanded(value => !value)}>{partnersExpanded ? '收起合作站' : `更多合作站（还有 ${partnerStations.length - 10} 站）`} <ChevronDown size={14} aria-hidden className={partnersExpanded ? 'rotate-180' : ''} /></button> : null}
+        </div> : <div className="sd-station-single-card"><StationRows stations={selectedStation} onSelectStation={onSelectStation} /></div>}
+      </section>
+      <StationSummaryDailyDialog
+        mode={dailyDrill}
+        range={data.range}
+        rows={data.summary.daily}
+        onClose={() => setDailyDrill(null)}
+      />
+    </>
+  );
+}
+
+function isSelfManagedStation(station: HydrogenStationBoardStation): boolean {
+  return station.name.includes('佛山南海羚牛') || station.name.includes('东鹏大道');
+}
+
+function selfManagedStationRank(station: HydrogenStationBoardStation): number {
+  return station.name.includes('佛山南海羚牛') ? 0 : 1;
+}
+
+function StationGroup({ title, count, stations, onSelectStation, emptyText }: {
+  title: string;
+  count: number;
+  stations: HydrogenStationBoardStation[];
+  onSelectStation: (id: number) => void;
+  emptyText: string;
+}) {
+  return <section className="sd-station-group" aria-label={title}>
+    <div className="sd-station-group__head"><h3>{title}</h3><span>{count} 站</span></div>
+    {stations.length ? <div className="sd-station-single-card"><StationRows stations={stations} onSelectStation={onSelectStation} /></div> : <p className="sd-station-group__empty">{emptyText}</p>}
+  </section>;
+}
+
+function StationRows({ stations, onSelectStation }: { stations: HydrogenStationBoardStation[]; onSelectStation: (id: number) => void }) {
+  return <>{stations.map(station => <button key={station.id} type="button" onClick={() => onSelectStation(station.id)} className="sd-station-row"><div className="sd-station-row__main"><span className="sd-station-card__icon"><Fuel size={17} /></span><div><div className="sd-station-card__name">{station.name}</div><div className="sd-station-card__region">{regionLabel(station)}</div></div>{station.kg > 0 ? <MiniSpark values={station.dailyKg.map(item => item.kg)} /> : <div className="sd-spark sd-spark--empty" />}<div className="sd-station-row__metrics"><StationRowMetric label="区间加氢" value={formatNumber(station.kg)} unit="Kg" /><StationRowMetric label="区间金额" value={formatNumber(station.fee)} unit="元" /><StationRowMetric label="现结进账" value={formatNumber(station.paymentAmount)} unit="元" /><div><span className="sd-station-card__m-label">加氢量占比</span><span className="sd-station-card__share">{(station.share * 100).toFixed(1)}%</span></div></div><span className="sd-station-card__go"><ChevronRight size={17} /></span></div></button>)}</>;
+}
+
+function StationSummaryMetric({ label, value, unit, helper, onClick }: { label: string; value: string; unit?: string; helper: string; onClick: () => void }) {
+  return <button type="button" onClick={onClick} className="sd-hero-kpi sd-hero-kpi--click"><span className="sd-hero-kpi__label">{label}</span><strong className="sd-hero-kpi__value">{value}{unit ? <span>{unit}</span> : null}</strong><span className="sd-hero-kpi__sub">{helper}</span></button>;
+}
+
+function StationSummaryDailyDialog({
+  mode,
+  range,
+  rows,
+  onClose,
+}: {
+  mode: 'kg' | 'fee' | 'payment' | null;
+  range: { start: string; end: string };
+  rows: HydrogenStationBoardSummaryDailyRow[];
+  onClose: () => void;
+}) {
+  const [sortKey, setSortKey] = useState<'date' | 'recordCount' | 'kg' | 'fee' | 'paymentCount' | 'paymentAmount'>('date');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const sortedRows = useMemo(() => sortBy(rows, sortKey, sortDirection, (row, key) => row[key]), [rows, sortDirection, sortKey]);
+  const changeSort = (nextKey: typeof sortKey) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+  if (!mode) return null;
+  const title = mode === 'kg'
+    ? '统计加氢总量 · 日明细'
+    : mode === 'fee'
+      ? '统计加氢金额 · 单日数据'
+      : '统计现结金额 · 单日数据';
+  return (
+    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-slate-950/60 p-3 backdrop-blur-[4px]" role="presentation" onMouseDown={event => { if (event.target === event.currentTarget) onClose(); }}>
+      <section className="flex max-h-[82vh] w-full max-w-[720px] flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl" role="dialog" aria-modal="true" aria-labelledby="station-summary-drill-title">
+        <header className="flex items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
+          <div>
+            <h3 id="station-summary-drill-title" className="text-[15px] font-black text-slate-900">{title}</h3>
+            <p className="mt-0.5 text-[11px] font-medium text-slate-400">{range.start} 至 {range.end}</p>
+          </div>
+          <button type="button" onClick={onClose} className="grid h-8 w-8 place-items-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200" aria-label="关闭"><X size={16} /></button>
+        </header>
+        <div className="overflow-auto">
+          {mode === 'payment' ? (
+            <table className="w-full min-w-[420px] text-[12px]">
+              <thead className="sticky top-0 bg-slate-50 text-slate-500"><tr><th className="px-4 py-2.5 text-left"><SortableColumnHeader label="日期" sortKey="date" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th><th className="px-4 py-2.5 text-right"><SortableColumnHeader label="现结笔数" sortKey="paymentCount" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th><th className="px-4 py-2.5 text-right"><SortableColumnHeader label="现结金额（元）" sortKey="paymentAmount" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th></tr></thead>
+              <tbody>{sortedRows.map(row => <tr key={row.date} className="border-t border-slate-100"><td className="px-4 py-2.5 font-mono font-semibold text-slate-700">{row.date}</td><td className="px-4 py-2.5 text-right tabular-nums text-slate-600">{row.paymentCount}</td><td className="px-4 py-2.5 text-right font-semibold tabular-nums text-slate-800">{formatNumber(row.paymentAmount)}</td></tr>)}</tbody>
+            </table>
+          ) : (
+            <table className="w-full min-w-[620px] text-[12px]">
+              <thead className="sticky top-0 bg-slate-50 text-slate-500"><tr><th className="px-4 py-2.5 text-left"><SortableColumnHeader label="日期" sortKey="date" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th><th className="px-4 py-2.5 text-right"><SortableColumnHeader label="加氢车次" sortKey="recordCount" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th><th className="px-4 py-2.5 text-right"><SortableColumnHeader label="加氢量(Kg)" sortKey="kg" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th><th className="px-4 py-2.5 text-right"><SortableColumnHeader label="加氢金额(元)" sortKey="fee" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th></tr></thead>
+              <tbody>{sortedRows.map(row => <tr key={row.date} className="border-t border-slate-100"><td className="px-4 py-2.5 font-mono font-semibold text-slate-700">{row.date}</td><td className="px-4 py-2.5 text-right tabular-nums text-slate-600">{row.recordCount}</td><td className="px-4 py-2.5 text-right font-semibold tabular-nums text-slate-800">{formatNumber(row.kg)}</td><td className="px-4 py-2.5 text-right font-semibold tabular-nums text-slate-800">{formatNumber(row.fee)}</td></tr>)}</tbody>
+            </table>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function StationRowMetric({ label, value, unit }: { label: string; value: string; unit: string }) {
+  return <div><span className="sd-station-card__m-label">{label}</span><strong>{value}<span>{unit}</span></strong></div>;
+}
+
+function MiniSpark({ values }: { values: number[] }) {
+  const max = Math.max(...values, 0);
+  return <div className="sd-spark" aria-label="站点每日加氢趋势">{values.map((value, index) => <span key={index} className="sd-spark__col"><span className="sd-spark__bar" style={{ height: `${max > 0 ? Math.max(6, Math.round((value / max) * 100)) : 0}%` }} /></span>)}</div>;
+}
+
+function StationDetail({
+  station,
+  data,
+  latestLedgerTime,
+  loading,
+  onBack,
+  onRangeChange,
+  onRefresh,
+  onExport,
+}: {
+  station: HydrogenStationBoardStation;
+  data: HydrogenStationBoardResponse;
+  latestLedgerTime: string | null;
+  loading: boolean;
+  onBack: () => void;
+  onRangeChange: (range: { start: string; end: string }) => void;
+  onRefresh: () => void;
+  onExport: () => void;
+}) {
+  const detail = data.selected!;
+  const [hoveredDate, setHoveredDate] = useState<string | null>(null);
+  const [dailySummaryExpanded, setDailySummaryExpanded] = useState(false);
+  const lastDaily = detail.daily.at(-1);
+  const visibleDailySummary = dailySummaryExpanded
+    ? detail.daily
+    : detail.daily.slice(-30);
+  const monthKey = data.range.end.slice(0, 7);
+  const monthRows = detail.customerMonths.filter(item => item.month === monthKey);
+  const monthKg = monthRows.reduce((sum, row) => sum + row.kg, 0);
+  const intervalPayments = detail.daily.reduce((sum, row) => sum + row.paymentAmount, 0);
+  const trendMax = Math.max(...detail.daily.map(row => row.kg), 0);
+  const hovered = detail.daily.find(row => row.date === hoveredDate) ?? null;
+
+  return (
+    <>
+      <section className="sd-detail-top">
+        <div className="sd-detail-top__lead"><button type="button" className="sd-btn sd-btn--ghost" onClick={onBack}><ArrowLeft size={16} /> 返回</button><div><h1 className="sd-detail-top__title">{station.name}</h1><p className="sd-detail-top__meta">{regionLabel(station)} · {data.range.start} 至 {data.range.end}</p><p className="sd-detail-top__updated">最后更新时间 {latestLedgerTime ?? '暂无账本时间'}</p></div></div>
+        <div className="sd-detail-top__tools"><StationRangePicker range={data.range} onChange={onRangeChange} /><button type="button" className="sd-btn sd-btn--ghost" onClick={onRefresh} disabled={loading}><RefreshCw size={14} className={loading ? 'animate-spin' : ''} /> 刷新</button><button type="button" className="sd-btn sd-btn--primary" onClick={onExport}><Download size={14} /> 导出取证</button></div>
+      </section>
+      <section className="sd-hero-kpis sd-hero-kpis--detail">
+        <DetailMetric label="当日加氢" value={formatNumber(lastDaily?.kg ?? 0)} unit="Kg" helper={`¥${formatNumber(lastDaily?.fee ?? 0)} · ${lastDaily?.recordCount ?? 0}车次`} />
+        <DetailMetric label={`近 ${detail.daily.length} 日加氢`} value={formatNumber(station.kg)} unit="Kg" helper={`¥${formatNumber(station.fee)}`} />
+        <DetailMetric label="本月加氢" value={formatNumber(monthKg)} unit="Kg" helper={monthKey} />
+        <DetailMetric label={`近 ${detail.daily.length} 日现结`} value={formatNumber(intervalPayments)} unit="元" helper={`${detail.daily.filter(row => row.paymentAmount > 0).length}天有进账`} />
+      </section>
+      <section className="sd-panel sd-panel--block">
+        <h2 className="sd-panel__title">加氢站每日加氢量汇总（{data.range.start} 至 {data.range.end}）</h2>
+        <div className="sd-table-scroll"><table className="sd-bi-table sd-bi-table--fill"><thead><tr><th>日期 ↓</th><th className="is-num">加氢量(Kg) ↕</th><th className="is-num">较昨日 ↕</th><th className="is-num">单价 ↕</th><th className="is-num">成本金额(元) ↕</th><th className="is-num">车次 ↕</th></tr></thead><tbody>
+          <tr className="is-total"><td>查询区间合计</td><td className="is-num">{formatNumber(detail.daily.reduce((sum, row) => sum + row.kg, 0))}</td><td className="is-num">—</td><td className="is-num">—</td><td className="is-num">{formatNumber(detail.daily.reduce((sum, row) => sum + row.fee, 0))}</td><td className="is-num">{detail.daily.reduce((sum, row) => sum + row.recordCount, 0)}</td></tr>
+          {[...visibleDailySummary].reverse().map(row => <tr key={row.date}><td className="is-mono">{row.date}</td><td className="is-num">{formatNumber(row.kg)}</td><td className={`is-num ${row.changeKg > 0 ? 'is-stock-up' : row.changeKg < 0 ? 'is-stock-down' : 'is-stock-flat'}`}>{row.changeKg > 0 ? '+' : ''}{formatNumber(row.changeKg)}{row.changeKg !== 0 ? <span className="sd-delta">{row.changeKg > 0 ? '▲' : '▼'}</span> : null}</td><td className="is-num">{formatNumber(row.avgPrice)}</td><td className="is-num">{formatNumber(row.fee)}</td><td className="is-num">{row.recordCount}</td></tr>)}
+          {detail.daily.length > 30 ? <tr><td colSpan={6} className="sd-table-more"><button type="button" onClick={() => setDailySummaryExpanded(value => !value)}>{dailySummaryExpanded ? '收起日期明细' : `更多（还有 ${detail.daily.length - 30} 天）`}</button></td></tr> : null}
+        </tbody></table></div>
+      </section>
+      <section className="sd-panel sd-panel--block"><div className="sd-panel__head-row"><h2 className="sd-panel__title">区间加氢量趋势</h2><span className="sd-trend-legend-chip"><span className="sd-trend-legend-dot" />{station.name}</span></div><div className="sd-trend">{hovered ? <div className="sd-trend-tip"><div className="sd-trend-tip__date">{hovered.date}</div><div className="sd-trend-tip__row"><span className="sd-trend-tip__name">加氢量</span><strong>{formatNumber(hovered.kg)} Kg</strong></div><div className="sd-trend-tip__sub">{hovered.recordCount}车次 · ¥{formatNumber(hovered.fee)}</div></div> : null}<div className="sd-trend--fill">{detail.daily.map(row => <div key={row.date} className={`sd-trend__col ${hoveredDate === row.date ? 'is-hover' : ''}`} onMouseEnter={() => setHoveredDate(row.date)} onMouseLeave={() => setHoveredDate(null)}><span className="sd-trend__val">{formatNumber(row.kg, 0)}</span><div className="sd-trend__bar-wrap"><span className="sd-trend__bar" style={{ height: `${trendMax > 0 ? Math.max(3, Math.round((row.kg / trendMax) * 100)) : 0}%` }} /></div><span className="sd-trend__date">{row.date.slice(5)}</span></div>)}</div></div></section>
+
+      <CustomerMonthMatrix title="客户月加氢量汇总（Kg）" valueKey="kg" rows={detail.customerMonths} />
+      <CustomerMonthMatrix title="客户月加氢费汇总（元）" valueKey="fee" rows={detail.customerMonths} />
+      <StationCashPanels />
+    </>
+  );
+}
+
+function DetailMetric({ label, value, unit, helper }: { label: string; value: string; unit: string; helper: string }) {
+  return <div className="sd-hero-kpi sd-hero-kpi--accent"><span className="sd-hero-kpi__label">{label}</span><strong className="sd-hero-kpi__value">{value}<span className="sd-unit">{unit}</span></strong><span className="sd-hero-kpi__sub">{helper}</span></div>;
+}
+
+function CustomerMonthMatrix({ title, valueKey, rows }: { title: string; valueKey: 'kg' | 'fee'; rows: HydrogenStationBoardCustomerMonth[] }) {
+  const months = useMemo(() => [...new Set(rows.map(row => row.month))].sort(), [rows]);
+  const customers = useMemo(() => [...new Set(rows.map(row => row.customerName))].sort((left, right) => left.localeCompare(right, 'zh-CN')), [rows]);
+  const [selectedCustomers, setSelectedCustomers] = useState<string[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  const values = useMemo(() => new Map(rows.map(row => [`${row.customerName}\u0000${row.month}`, row[valueKey]])), [rows, valueKey]);
+  const totals = useMemo(() => new Map(months.map(month => [month, rows.filter(row => row.month === month).reduce((sum,row)=>sum+row[valueKey],0)])), [months, rows, valueKey]);
+  const visibleCustomers = selectedCustomers.length === 0 ? customers : customers.filter(customer => selectedCustomers.includes(customer));
+  const shownCustomers = expanded ? visibleCustomers : visibleCustomers.slice(0, 10);
+  const trendClass = (current: number, previous: number | undefined) => previous == null || current === previous ? '' : current > previous ? 'is-stock-up' : 'is-stock-down';
+  const trendMark = (current: number, previous: number | undefined) => previous == null || current === previous ? '' : current > previous ? '▲' : '▼';
+  return (
+    <section className="sd-panel sd-panel--block">
+      <div className="sd-panel__head-row"><h2 className="sd-panel__title">{title}</h2><CustomerMultiSelect options={customers} value={selectedCustomers} onChange={setSelectedCustomers} /></div>
+      <div className="sd-table-scroll sd-table-scroll--matrix"><table className={`sd-bi-table sd-bi-table--matrix ${valueKey === 'fee' ? 'is-amount' : ''}`}><thead><tr><th>客户</th>{months.map(month => <th key={month} className="is-num">{month.replace('-', '年')}月</th>)}</tr></thead><tbody>
+        <tr className="is-total"><td>合计</td>{months.map((month, index) => { const current = totals.get(month) ?? 0; const previous = index > 0 ? totals.get(months[index - 1]) : undefined; return <td key={month} className={`is-num ${trendClass(current, previous)}`}>{formatNumber(current)}{trendMark(current, previous)}</td>; })}</tr>
+        {shownCustomers.map(customer => <tr key={customer}><td title={customer}>{customer}</td>{months.map((month, index) => { const current = values.get(`${customer}\u0000${month}`) ?? 0; const previous = index > 0 ? values.get(`${customer}\u0000${months[index - 1]}`) : undefined; return <td key={month} className={`is-num ${trendClass(current, previous)}`}>{formatNumber(current)}{trendMark(current, previous)}</td>; })}</tr>)}
+      </tbody></table></div>{visibleCustomers.length > 10 ? <button type="button" className="sd-more-btn" onClick={() => setExpanded(value => !value)}>{expanded ? '收起' : `更多（还有 ${visibleCustomers.length - 10} 条）`} <ChevronDown size={14} aria-hidden className={expanded ? 'rotate-180' : ''} /></button> : null}
+    </section>
+  );
+}
+
+function StationCashPanels() {
+  return <section className="sd-dual sd-dual--cash">
+    <section className="sd-panel sd-panel--grow">
+      <div className="sd-panel__head-row"><h2 className="sd-panel__title">客户氢费收支汇总</h2></div>
+      <div className="sd-table-scroll sd-table-scroll--cash-lines"><table className="sd-bi-table sd-bi-table--ledger"><thead><tr><th>客户</th><th className="is-num">充值/现金结算</th><th className="is-num">扣预付</th><th className="is-num">现结</th><th className="is-num">余额</th><th>备注</th></tr></thead><tbody><tr className="sd-pending-row"><td colSpan={6}>数据写入中，敬请期待。</td></tr></tbody></table></div>
+    </section>
+    <section className="sd-panel sd-panel--grow">
+      <div className="sd-panel__head-row"><h2 className="sd-panel__title">氢费充值/现结进账明细</h2><span className="sd-panel__meta">数据写入中</span></div>
+      <div className="sd-table-scroll sd-table-scroll--cash-lines"><table className="sd-bi-table sd-bi-table--ledger"><thead><tr><th>充值日期</th><th>客户</th><th>付款方式</th><th className="is-num">金额（元）</th></tr></thead><tbody><tr className="sd-pending-row"><td colSpan={4}>数据写入中，敬请期待。</td></tr></tbody></table></div>
+    </section>
+  </section>;
+}
+
+function CustomerMultiSelect({ options, value, onChange }: { options: string[]; value: string[]; onChange: (value: string[]) => void }) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const rootRef = useRef<HTMLDivElement>(null);
+  const allSelected = value.length === 0 || value.length === options.length;
+  const selectedLabel = allSelected ? '全部客户' : value.length <= 2 ? value.join('、') : `已选 ${value.length} 家`;
+  const visibleOptions = search.trim() ? options.filter(option => option.includes(search.trim())) : options;
+  useEffect(() => {
+    if (!open) return;
+    const close = (event: MouseEvent) => { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+  const toggle = (customer: string) => {
+    if (allSelected) { onChange([customer]); return; }
+    if (value.includes(customer)) { const next = value.filter(item => item !== customer); onChange(next.length === 0 ? [] : next); return; }
+    const next = [...value, customer];
+    onChange(next.length === options.length ? [] : next);
+  };
+  return <div className={`sd-msel ${open ? 'is-open' : ''}`} ref={rootRef}><button type="button" className="sd-msel__trigger" aria-haspopup="listbox" aria-expanded={open} onClick={() => setOpen(current => !current)}><span className="sd-msel__label">客户</span><span className="sd-msel__value" title={selectedLabel}>{selectedLabel}</span><ChevronDown size={14} aria-hidden className="sd-msel__chev" /></button>{open ? <div className="sd-msel__panel" role="listbox" aria-multiselectable="true"><div className="sd-msel__search"><input type="search" value={search} onChange={event => setSearch(event.target.value)} placeholder="搜索客户" aria-label="搜索客户" /></div><div className="sd-msel__actions"><button type="button" onClick={() => onChange([])}>全选</button><button type="button" onClick={() => { onChange([]); setOpen(false); }}>重置</button></div><ul className="sd-msel__list">{visibleOptions.length === 0 ? <li className="sd-msel__empty">无匹配客户</li> : visibleOptions.map(option => { const on = allSelected || value.includes(option); return <li key={option}><button type="button" className={`sd-msel__opt ${on ? 'is-on' : ''}`} role="option" aria-selected={on} onClick={() => toggle(option)}><span className="sd-msel__check" aria-hidden>{on ? <Check size={12} /> : null}</span><span className="sd-msel__name">{option}</span></button></li>; })}</ul></div> : null}</div>;
+}
+
+function exportStationEvidence(data: HydrogenStationBoardResponse, station: HydrogenStationBoardStation | null) {
+  if (!station || !data.selected) return;
+  const workbook = XLSX.utils.book_new();
+  const daily = [['日期','加氢量(Kg)','较昨日(Kg)','平均单价','加氢金额(元)','车次','现结金额(元)','现结笔数'], ...data.selected.daily.map(row => [row.date,row.kg,row.changeKg,row.avgPrice,row.fee,row.recordCount,row.paymentAmount,row.paymentCount])];
+  const customers = [['月份','客户','加氢量(Kg)','加氢费(元)','车次'], ...data.selected.customerMonths.map(row => [row.month,row.customerName,row.kg,row.fee,row.recordCount])];
+  XLSX.utils.book_append_sheet(workbook, XLSX.utils.aoa_to_sheet(daily), '每日汇总');
+  XLSX.utils.book_append_sheet(workbook, XLSX.utils.aoa_to_sheet(customers), '客户月汇总');
+  XLSX.writeFile(workbook, `${station.name}_${data.range.start}_${data.range.end}_取证.xlsx`);
+}
+
+function StationBoardSkeleton() {
+  return <div className="grid gap-3"><div className="h-28 animate-pulse rounded-xl bg-slate-200/70" /><div className="h-72 animate-pulse rounded-xl bg-slate-200/70" /></div>;
+}
@@ -1,12 +1,34 @@
 import HydrogenOverview from './HydrogenOverview';
 import HydrogenDaily from './HydrogenDaily';
+import HydrogenSettlement from './HydrogenSettlement';
+import type { HydrogenBoardScope } from './HydrogenBoardChrome';

-export type HydrogenSubTab = 'daily' | 'overview';
+export type HydrogenSubTab = 'daily' | 'overview' | 'settlement';

 interface Props {
  sub: HydrogenSubTab;
+  onSubChange?: (sub: HydrogenSubTab) => void;
+  onScopeChange?: (scope: HydrogenBoardScope) => void;
+  onDailyRangeTextChange?: (rangeText: string) => void;
+  onOverviewRangeTextChange?: (rangeText: string) => void;
 }

-export default function HydrogenView({ sub }: Props) {
-  return sub === 'overview' ? <HydrogenOverview /> : <HydrogenDaily />;
+export default function HydrogenView({
+  sub,
+  onSubChange,
+  onScopeChange,
+  onDailyRangeTextChange,
+  onOverviewRangeTextChange,
+}: Props) {
+  if (sub === 'overview') {
+    return (
+      <HydrogenOverview
+        onSubChange={onSubChange}
+        onScopeChange={onScopeChange}
+        onRangeTextChange={onOverviewRangeTextChange}
+      />
+    );
+  }
+  if (sub === 'settlement') return <HydrogenSettlement />;
+  return <HydrogenDaily scope="global" onRangeTextChange={onDailyRangeTextChange} />;
 }
@@ -0,0 +1,14 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { buildHydrogenSettlementQuery } from './api.js';
+
+test('现结自定义日期明确传递 custom 范围，避免服务端回退到最近有数据', () => {
+  assert.equal(
+    buildHydrogenSettlementQuery({
+      range: 'custom',
+      startDate: '2026-05-26',
+      endDate: '2026-05-26',
+    }),
+    'range=custom&startDate=2026-05-26&endDate=2026-05-26',
+  );
+});
@@ -4,6 +4,10 @@ import type {
  HydrogenCustomerRow, HydrogenStationFull,
  ElectricKpi, ElectricDailyRow, ElectricMonthGroup,
  CustomerType, DateQuickPick,
+  HydrogenStationBoardResponse,
+  HydrogenDailyDetailResponse,
+  HydrogenOverviewDetailGroupBy,
+  HydrogenOverviewDetailResponse,
 } from './types';

 const BASE = '/api/energy';
@@ -17,20 +21,74 @@ export interface HydrogenOverviewResponse {
  stations: HydrogenStationFull[];
  availableYears: number[];
  year: number;
+  latestLedgerTime: string | null;
+  filter: {
+    stationId: number | null;
+    vehicleScope: HydrogenVehicleScope;
+    verifyScope: HydrogenVerifyScope;
+  };
 }

-export function fetchHydrogenOverview(year?: number, force = false): Promise<HydrogenOverviewResponse> {
+export type HydrogenVehicleScope = 'all' | 'lingniu' | 'external';
+export type HydrogenVerifyScope = 'all' | 'verified';
+
+export interface HydrogenOverviewQuery {
+  year?: number;
+  stationId?: number | null;
+  vehicleScope?: HydrogenVehicleScope;
+  verifyScope?: HydrogenVerifyScope;
+  force?: boolean;
+}
+
+export function fetchHydrogenOverview(query: HydrogenOverviewQuery = {}): Promise<HydrogenOverviewResponse> {
  const params = new URLSearchParams();
-  if (year) params.set('year', String(year));
-  if (force) params.set('force', '1');
+  if (query.year) params.set('year', String(query.year));
+  if (query.stationId) params.set('stationId', String(query.stationId));
+  if (query.vehicleScope && query.vehicleScope !== 'all') params.set('vehicleScope', query.vehicleScope);
+  if (query.verifyScope === 'verified') params.set('verifyScope', 'verified');
+  if (query.force) params.set('force', '1');
  const q = params.toString();
  return fetchJson<HydrogenOverviewResponse>(`${BASE}/hydrogen/overview${q ? `?${q}` : ''}`);
 }

+export interface HydrogenOverviewDetailQuery {
+  year: number;
+  vehicleScope?: HydrogenVehicleScope;
+  verifyScope?: HydrogenVerifyScope;
+  stationId?: number | null;
+  month?: string | null;
+  date?: string | null;
+  customerName?: string | null;
+  customerId?: number | null;
+  plateNo?: string | null;
+  region?: string | null;
+  regionGranularity?: 'province' | 'city';
+  groupBy?: HydrogenOverviewDetailGroupBy | null;
+  limit?: number;
+}
+
+export function fetchHydrogenOverviewDetail(query: HydrogenOverviewDetailQuery): Promise<HydrogenOverviewDetailResponse> {
+  const params = new URLSearchParams({ year: String(query.year) });
+  if (query.vehicleScope && query.vehicleScope !== 'all') params.set('vehicleScope', query.vehicleScope);
+  if (query.verifyScope === 'verified') params.set('verifyScope', 'verified');
+  if (query.stationId) params.set('stationId', String(query.stationId));
+  if (query.month) params.set('month', query.month);
+  if (query.date) params.set('date', query.date);
+  if (query.customerName) params.set('customerName', query.customerName);
+  if (query.customerId !== null && query.customerId !== undefined) params.set('customerId', String(query.customerId));
+  if (query.plateNo) params.set('plateNo', query.plateNo);
+  if (query.region) params.set('region', query.region);
+  if (query.regionGranularity) params.set('regionGranularity', query.regionGranularity);
+  if (query.groupBy) params.set('groupBy', query.groupBy);
+  if (query.limit) params.set('limit', String(query.limit));
+  return fetchJson<HydrogenOverviewDetailResponse>(`${BASE}/hydrogen/overview-detail?${params.toString()}`);
+}
+
 export interface HydrogenDailyQuery {
  range?: DateQuickPick;
  startDate?: string;
  endDate?: string;
+  verifyScope?: HydrogenVerifyScope;
 }

 export function fetchHydrogenDaily(query: HydrogenDailyQuery, customer: CustomerType): Promise<HydrogenDailyRow[]> {
@@ -38,12 +96,40 @@ export function fetchHydrogenDaily(query: HydrogenDailyQuery, customer: Customer
  if (query.range) q.set('range', query.range);
  if (query.startDate) q.set('startDate', query.startDate);
  if (query.endDate) q.set('endDate', query.endDate);
+  if (query.verifyScope === 'verified') q.set('verifyScope', 'verified');
  return fetchJson<HydrogenDailyRow[]>(`${BASE}/hydrogen/daily?${q.toString()}`);
 }

+export function fetchHydrogenDailyDetail(
+  date: string,
+  customer: CustomerType,
+  stationId?: number | null,
+  verifyScope: HydrogenVerifyScope = 'all',
+): Promise<HydrogenDailyDetailResponse> {
+  const params = new URLSearchParams({ date, customer });
+  if (stationId) params.set('stationId', String(stationId));
+  if (verifyScope === 'verified') params.set('verifyScope', 'verified');
+  return fetchJson<HydrogenDailyDetailResponse>(`${BASE}/hydrogen/daily-detail?${params.toString()}`);
+}
+
+export interface HydrogenStationBoardQuery {
+  startDate: string;
+  endDate: string;
+  stationId?: number | null;
+  force?: boolean;
+}
+
+export function fetchHydrogenStationBoard(query: HydrogenStationBoardQuery): Promise<HydrogenStationBoardResponse> {
+  const params = new URLSearchParams({ startDate: query.startDate, endDate: query.endDate });
+  if (query.stationId) params.set('stationId', String(query.stationId));
+  if (query.force) params.set('force', '1');
+  return fetchJson<HydrogenStationBoardResponse>(`${BASE}/hydrogen/station-board?${params.toString()}`);
+}
+
 export interface ElectricOverviewResponse {
  kpi: ElectricKpi;
  trend: ElectricDailyRow[];
+  latestChargeTime: string | null;
 }

 export function fetchElectricOverview(): Promise<ElectricOverviewResponse> {
@@ -57,3 +143,60 @@ export function fetchElectricMonthly(customer: CustomerType, query: HydrogenDail
  if (query.endDate) q.set('endDate', query.endDate);
  return fetchJson<ElectricMonthGroup[]>(`${BASE}/electric/monthly?${q.toString()}`);
 }
+
+export interface EtcOverviewResponse {
+  tollRecordCount: number;
+  vehicleCount: number;
+  totalAmount: number;
+  latestTollTime: string | null;
+  billCount: number;
+  receivableAmount: number;
+  paidAmount: number;
+  hasData: boolean;
+}
+
+export function fetchEtcOverview(force = false): Promise<EtcOverviewResponse> {
+  return fetchJson<EtcOverviewResponse>(`${BASE}/etc/overview${force ? '?force=1' : ''}`);
+}
+
+export type HydrogenSettlementRange = DateQuickPick | 'latest';
+
+export interface HydrogenSettlementRow {
+  date: string;
+  stationId: number | null;
+  stationName: string;
+  amount: number;
+  paymentCount: number;
+  matchMode: 'exact' | 'manual' | 'group' | 'unmatched';
+}
+
+export interface HydrogenSettlementResponse {
+  range: { start: string | null; end: string | null; mode: HydrogenSettlementRange | 'custom' };
+  summary: {
+    amount: number;
+    paymentCount: number;
+    stationDayCount: number;
+    stationCount: number;
+    latestPaymentDate: string | null;
+  };
+  rows: HydrogenSettlementRow[];
+}
+
+export interface HydrogenSettlementQuery {
+  range?: HydrogenSettlementRange | 'custom';
+  startDate?: string;
+  endDate?: string;
+}
+
+export function buildHydrogenSettlementQuery(query: HydrogenSettlementQuery = {}) {
+  const params = new URLSearchParams();
+  if (query.range) params.set('range', query.range);
+  if (query.startDate) params.set('startDate', query.startDate);
+  if (query.endDate) params.set('endDate', query.endDate);
+  return params.toString();
+}
+
+export function fetchHydrogenSettlement(query: HydrogenSettlementQuery = {}): Promise<HydrogenSettlementResponse> {
+  const q = buildHydrogenSettlementQuery(query);
+  return fetchJson<HydrogenSettlementResponse>(`${BASE}/hydrogen/settlement${q ? `?${q}` : ''}`);
+}
@@ -0,0 +1,67 @@
+import { ArrowDown, ArrowDownUp, ArrowUp } from 'lucide-react';
+
+export type SortDirection = 'asc' | 'desc';
+
+export function SortableColumnHeader<Key extends string>({
+  label,
+  sortKey,
+  activeSortKey,
+  sortDirection,
+  onSort,
+  align = 'left',
+  className = '',
+}: {
+  label: string;
+  sortKey: Key;
+  activeSortKey: Key;
+  sortDirection: SortDirection;
+  onSort: (sortKey: Key) => void;
+  align?: 'left' | 'right' | 'center';
+  className?: string;
+}) {
+  const active = activeSortKey === sortKey;
+  const Icon = active ? (sortDirection === 'asc' ? ArrowUp : ArrowDown) : ArrowDownUp;
+  const order = active ? (sortDirection === 'asc' ? '升序' : '降序') : '未排序';
+  const justify = align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start';
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSort(sortKey)}
+      className={`inline-flex w-full items-center ${justify} gap-1 rounded px-1 py-0.5 transition-colors ${active ? 'text-blue-600' : 'text-slate-400 hover:bg-slate-100 hover:text-slate-600'} ${className}`}
+      title={`${label}：${order}，点击切换`}
+      aria-label={`${label}：${order}，点击切换`}
+      aria-sort={active ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'}
+    >
+      <span>{label}</span>
+      <Icon size={12} strokeWidth={active ? 2.5 : 2} />
+    </button>
+  );
+}
+
+export function toggleSort<Key extends string>(
+  currentKey: Key,
+  currentDirection: SortDirection,
+  nextKey: Key,
+): { key: Key; direction: SortDirection } {
+  return nextKey === currentKey
+    ? { key: currentKey, direction: currentDirection === 'asc' ? 'desc' : 'asc' }
+    : { key: nextKey, direction: 'desc' };
+}
+
+export function sortBy<Key extends string, Row>(
+  rows: Row[],
+  sortKey: Key,
+  sortDirection: SortDirection,
+  valueOf: (row: Row, key: Key) => string | number | null | undefined,
+): Row[] {
+  const multiplier = sortDirection === 'asc' ? 1 : -1;
+  // Keep the caller's row order immutable while remaining compatible with the
+  // ES2022 target used by this dashboard (Array.prototype.toSorted is ES2023).
+  return [...rows].sort((left, right) => {
+    const leftValue = valueOf(left, sortKey) ?? '';
+    const rightValue = valueOf(right, sortKey) ?? '';
+    if (typeof leftValue === 'number' && typeof rightValue === 'number') return (leftValue - rightValue) * multiplier;
+    return String(leftValue).localeCompare(String(rightValue), 'zh-CN', { numeric: true }) * multiplier;
+  });
+}
@@ -1,92 +1,172 @@
-import { Truck } from 'lucide-react';
-import { SurfaceCard } from '../../../components/ui/surface';
+import { Calendar, Fuel, RefreshCw, Truck } from 'lucide-react';
 import type { CustomerType, DateQuickPick } from '../types';
+import type { HydrogenDailyVehicleScope } from '../hydrogen-daily/model';
 import { QUICK_PICK_OPTIONS, type RangeMode } from './model';

 interface DailyRangeControlsProps {
  pick: RangeMode;
  dateRange: { start: string; end: string };
  customer: CustomerType;
+  stations?: { id: number; name: string }[];
+  selectedStationId?: number | null;
+  vehicleScope?: HydrogenDailyVehicleScope;
+  updatedAt?: string | null;
+  loading?: boolean;
  onQuickPick: (pick: DateQuickPick) => void;
  onCustomPick: () => void;
  onDateRangeChange: (field: 'start' | 'end', value: string) => void;
  onCustomerChange: (customer: CustomerType) => void;
+  onStationChange?: (stationId: number | null) => void;
+  onVehicleScopeChange?: (scope: HydrogenDailyVehicleScope) => void;
+  onRefresh?: () => void;
 }

 export default function DailyRangeControls({
  pick,
  dateRange,
  customer,
+  stations = [],
+  selectedStationId = null,
+  vehicleScope,
+  updatedAt,
+  loading = false,
  onQuickPick,
  onCustomPick,
  onDateRangeChange,
  onCustomerChange,
+  onStationChange,
+  onVehicleScopeChange,
+  onRefresh,
 }: DailyRangeControlsProps) {
  return (
-    <SurfaceCard className="p-2 md:p-3">
-      <div className="flex items-center gap-2 overflow-x-auto pb-1">
-        {QUICK_PICK_OPTIONS.map(opt => (
+    <section className="rounded-[14px] border border-slate-200/70 bg-white px-3 py-3 shadow-sm md:px-4">
+      <div className="flex flex-col gap-3">
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          <div className="flex rounded-md bg-slate-100 p-0.5">
+            {QUICK_PICK_OPTIONS.map(option => (
              <button
-            key={opt.id}
-            onClick={() => onQuickPick(opt.id)}
-            className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
-              pick === opt.id
-                ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
-                : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
+                key={option.id}
+                type="button"
+                onClick={() => onQuickPick(option.id)}
+                className={`h-7 rounded px-3 text-[12px] font-medium transition-colors ${
+                  pick === option.id
+                    ? 'bg-white font-semibold text-blue-600 shadow-sm'
+                    : 'text-slate-500 hover:text-slate-800'
                }`}
              >
-            {opt.label}
+                {option.label}
              </button>
            ))}
            <button
+              type="button"
              onClick={onCustomPick}
-          className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
+              className={`h-7 rounded px-3 text-[12px] font-medium transition-colors ${
                pick === 'custom'
-              ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
-              : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
+                  ? 'bg-white font-semibold text-blue-600 shadow-sm'
+                  : 'text-slate-500 hover:text-slate-800'
              }`}
            >
              自定义
            </button>
          </div>

-      <div className="mt-2 grid grid-cols-2 gap-2">
-        <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
-          <span className="block text-[10px] font-black text-slate-400">开始日期</span>
-          <input
-            type="date"
-            value={dateRange.start}
-            onChange={event => onDateRangeChange('start', event.target.value)}
-            onInput={event => onDateRangeChange('start', event.currentTarget.value)}
-            className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
-          />
-        </label>
-        <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
-          <span className="block text-[10px] font-black text-slate-400">结束日期</span>
-          <input
-            type="date"
-            value={dateRange.end}
-            onChange={event => onDateRangeChange('end', event.target.value)}
-            onInput={event => onDateRangeChange('end', event.currentTarget.value)}
-            className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
-          />
+          <DateField label="开始日期" value={dateRange.start} onChange={value => onDateRangeChange('start', value)} />
+          <DateField label="结束日期" value={dateRange.end} onChange={value => onDateRangeChange('end', value)} />
+
+          {onStationChange ? (
+            <label className="inline-flex h-8 min-w-[190px] max-w-full items-center gap-2 rounded-md border border-slate-300 bg-white px-2.5 text-slate-600 transition-colors focus-within:border-sky-600 focus-within:ring-2 focus-within:ring-sky-100">
+              <Fuel size={13} className="shrink-0 text-slate-400" />
+              <select
+                aria-label="选择加氢站"
+                value={selectedStationId ?? ''}
+                onChange={event => onStationChange(event.target.value === '' ? null : Number(event.target.value))}
+                className="min-w-0 flex-1 bg-transparent text-[12px] font-semibold text-slate-700 outline-none"
+              >
+                <option value="">请选择加氢站</option>
+                {stations.map((station, index) => (
+                  <option key={`${station.id}-${station.name}-${index}`} value={station.id}>{station.name}</option>
+                ))}
+              </select>
            </label>
+          ) : null}
        </div>

-      <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          {onVehicleScopeChange && vehicleScope ? (
+            <div className="flex rounded-md bg-slate-100 p-0.5" aria-label="车辆归属">
+              {([
+                ['all', '全部车辆'],
+                ['lingniu', '仅羚牛车辆'],
+                ['external', '仅外部车辆'],
+              ] as const).map(([id, label]) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => onVehicleScopeChange(id)}
+                  className={`inline-flex h-8 items-center gap-1.5 rounded px-2.5 text-[12px] font-medium transition-colors ${
+                    vehicleScope === id
+                      ? 'bg-white font-semibold text-blue-600 shadow-sm'
+                      : 'text-slate-500 hover:text-slate-800'
+                  }`}
+                >
+                  <Truck size={13} />
+                  {label}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="flex rounded-md bg-slate-100 p-0.5">
              {(['lingniu', 'external'] as const).map(option => (
                <button
                  key={option}
+                  type="button"
                  onClick={() => onCustomerChange(option)}
-            className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
-              customer === option ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+                  className={`inline-flex h-8 items-center gap-1.5 rounded px-3 text-[12px] font-medium transition-colors ${
+                    customer === option
+                      ? 'bg-white font-semibold text-blue-600 shadow-sm'
+                      : 'text-slate-500 hover:text-slate-800'
                  }`}
                >
-            <Truck size={14} />
+                  <Truck size={13} />
                  {option === 'external' ? '外部车辆' : '羚牛车辆'}
                </button>
              ))}
            </div>
-    </SurfaceCard>
+          )}
+
+          <div className="ml-auto flex items-center gap-3">
+            {updatedAt ? <span className="font-mono text-[11px] text-slate-400">{updatedAt}</span> : null}
+            {onRefresh ? (
+              <button
+                type="button"
+                onClick={onRefresh}
+                disabled={loading}
+                title="刷新数据"
+                className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-3 text-[12px] font-semibold text-slate-600 transition-colors hover:border-blue-200 hover:text-blue-600 disabled:cursor-wait disabled:opacity-60"
+              >
+                <RefreshCw size={13} className={loading ? 'animate-spin' : ''} />
+                刷新
+              </button>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function DateField({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
+  return (
+    <label className="inline-flex h-8 items-center gap-2 rounded-md border border-slate-300 bg-white px-2.5 transition-colors focus-within:border-sky-600 focus-within:ring-2 focus-within:ring-sky-100">
+      <Calendar size={13} className="shrink-0 text-sky-600" />
+      <span className="hidden text-[11px] font-medium text-slate-400 sm:inline">{label}</span>
+      <input
+        type="date"
+        aria-label={label}
+        value={value}
+        onChange={event => onChange(event.target.value)}
+        className="h-7 min-w-[112px] bg-transparent font-mono text-[11px] font-semibold text-slate-700 outline-none"
+      />
+    </label>
  );
 }
@@ -0,0 +1,46 @@
+import { fetchJson } from '../../../auth/api-client';
+import type {
+  H2BiDailyResponse,
+  H2BiDailyTreeQuery,
+  H2BiDailyTreeResponse,
+  H2BiDrillQuery,
+  H2BiDrillResponse,
+  H2BiMetaResponse,
+  H2BiOverviewResponse,
+  H2BiQuery,
+} from './types';
+
+const BASE = '/api/energy/h2/v2';
+
+function queryString(query: Record<string, unknown>) {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value !== undefined && value !== null && value !== '') params.set(key, String(value));
+  }
+  return params.toString();
+}
+
+function request<T>(path: string, query: object = {}) {
+  const qs = queryString(query as Record<string, unknown>);
+  return fetchJson<T>(`${BASE}/${path}${qs ? `?${qs}` : ''}`);
+}
+
+export function fetchH2BiMeta() {
+  return request<H2BiMetaResponse>('meta');
+}
+
+export function fetchH2BiOverview(query: H2BiQuery) {
+  return request<H2BiOverviewResponse>('overview', query);
+}
+
+export function fetchH2BiDaily(query: H2BiQuery) {
+  return request<H2BiDailyResponse>('daily', query);
+}
+
+export function fetchH2BiDailyTree(date: string, query: H2BiDailyTreeQuery) {
+  return request<H2BiDailyTreeResponse>('daily-tree', { date, ...query });
+}
+
+export function fetchH2BiDrill(query: H2BiDrillQuery) {
+  return request<H2BiDrillResponse>('drill', query);
+}
@@ -0,0 +1,70 @@
+import {
+  fetchH2BiDaily,
+  fetchH2BiDailyTree,
+  fetchH2BiDrill,
+  fetchH2BiMeta,
+  fetchH2BiOverview,
+} from "./api";
+import type { H2BiDailyTreeResponse, H2BiDrillQuery, H2BiQuery } from "./types";
+
+/**
+ * The only permitted bridge between the imported prototype DOM and live data.
+ * It deliberately maps data, never presentation: the original component keeps
+ * its markup, class names, ordering and interaction hierarchy unchanged.
+ */
+export async function loadPrototypeOverview(query: H2BiQuery) {
+  const [meta, overview] = await Promise.all([
+    fetchH2BiMeta(),
+    fetchH2BiOverview(query),
+  ]);
+  return {
+    years: meta.years.map((item) => item.value),
+    range: overview.range,
+    watermark: overview.watermark,
+    kpi: overview.kpis,
+    monthlyQuantity: overview.monthly.map((item) => ({
+      month: item.month,
+      ownKg: item.lingniuKg,
+      extKg: item.externalKg,
+      totalKg: item.totalKg,
+    })),
+    monthlyRevenue: overview.monthly.map((item) => ({
+      month: item.month,
+      customerAmount: item.customerRevenue,
+      // 收入仅来自客户承担订单；成本按账本 settlement_type 分成客户、
+      // 我司、其他三段，三段之和严格等于当月总成本。
+      cost: item.customerCost,
+      customerCost: item.customerCost,
+      companyCost: item.companyCost,
+      otherCost: item.otherCost,
+    })),
+    topStations: overview.topStations.map((item, index) => ({
+      rank: index + 1,
+      ...item,
+      ownKg: item.lingniuKg,
+      extKg: item.externalKg,
+    })),
+    regions: overview.regions,
+    stations: overview.stations,
+    customers: overview.customers,
+  };
+}
+
+export async function loadPrototypeDaily(query: H2BiQuery) {
+  return fetchH2BiDaily(query);
+}
+
+export async function loadPrototypeDailyTree(
+  date: string,
+  query: Pick<H2BiQuery, "stationId" | "vehicleScope" | "verifyScope">,
+): Promise<H2BiDailyTreeResponse> {
+  return fetchH2BiDailyTree(date, query);
+}
+
+/**
+ * Keeps the prototype's station -> customer -> vehicle -> record hierarchy,
+ * while delegating every aggregate and leaf value to the live drill endpoint.
+ */
+export async function loadPrototypeDrill(query: H2BiDrillQuery) {
+  return fetchH2BiDrill(query);
+}
@@ -0,0 +1,12 @@
+import * as XLSX from 'xlsx';
+
+export function downloadExcelAoa(
+  rows: Array<Array<string | number | boolean | null | undefined>>,
+  fileName: string,
+  sheetName: string,
+) {
+  const workbook = XLSX.utils.book_new();
+  const sheet = XLSX.utils.aoa_to_sheet(rows);
+  XLSX.utils.book_append_sheet(workbook, sheet, sheetName.slice(0, 31));
+  XLSX.writeFile(workbook, fileName);
+}
@@ -0,0 +1,692 @@
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Download, RefreshCw, Truck } from "lucide-react";
+import { fetchH2BiDaily, fetchH2BiDailyTree, fetchH2BiDrill } from "./api";
+import { downloadExcelAoa } from "./prototype-download";
+import type {
+  H2BiDailyResponse,
+  H2BiDailyTreeResponse,
+  H2BiDrillResponse,
+  H2BiQuery,
+  H2BiVehicleScope,
+} from "./types";
+
+const format = (value: number, digits = 2) =>
+  value.toLocaleString("zh-CN", {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+const toScope = (scope: "all" | "own" | "external"): H2BiVehicleScope =>
+  scope === "own" ? "lingniu" : scope;
+const sourceLabel = (source: unknown) => {
+  const value = String(source || "").toLowerCase();
+  if (value === "lingniu") return "羚牛上报";
+  if (value === "api") return "API接入";
+  if (value === "station") return "站点上报";
+  return String(source || "未知来源");
+};
+/** Keep raw API statuses out of the UI. Missing/unknown statuses are unverified. */
+const verifyLabel = (status: unknown) => {
+  const value = String(status ?? "").trim().toLowerCase();
+  return value === "verified" || value === "pass" || value === "已验证"
+    ? "已验证"
+    : "未验证";
+};
+
+export function PrototypeRealDailyView({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  fleetScope,
+  onFleetScopeChange,
+  verifyScope,
+  onRefresh,
+}: {
+  startDate: string;
+  endDate: string;
+  onStartDateChange: (value: string) => void;
+  onEndDateChange: (value: string) => void;
+  fleetScope: "all" | "own" | "external";
+  onFleetScopeChange: (value: "all" | "own" | "external") => void;
+  verifyScope: "all" | "verified";
+  onRefresh: () => void;
+}) {
+  const query = useMemo<H2BiQuery>(
+    () => ({
+      year: Number(startDate.slice(0, 4)),
+      startDate,
+      endDate,
+      vehicleScope: toScope(fleetScope),
+      verifyScope,
+    }),
+    [endDate, fleetScope, startDate, verifyScope],
+  );
+  const [daily, setDaily] = useState<H2BiDailyResponse | null>(null);
+  const [trees, setTrees] = useState<Record<string, H2BiDailyTreeResponse>>({});
+  const [expandedDate, setExpandedDate] = useState<string | null>(null);
+  const [expandedStation, setExpandedStation] = useState<
+    Record<string, boolean>
+  >({});
+  const [expandedCustomer, setExpandedCustomer] = useState<
+    Record<string, boolean>
+  >({});
+  const [expandedStationLists, setExpandedStationLists] = useState<
+    Record<string, boolean>
+  >({});
+  const [expandedCustomerLists, setExpandedCustomerLists] = useState<
+    Record<string, boolean>
+  >({});
+  const [expandedRecordLists, setExpandedRecordLists] = useState<
+    Record<string, boolean>
+  >({});
+  const [customerRecords, setCustomerRecords] = useState<
+    Record<string, H2BiDrillResponse>
+  >({});
+  const [error, setError] = useState<string | null>(null);
+  const [highlightedDate, setHighlightedDate] = useState<string | null>(null);
+  const dateRowRefs = useRef<Record<string, HTMLTableRowElement | null>>({});
+  useEffect(() => {
+    let alive = true;
+    setError(null);
+    setTrees({});
+    setExpandedDate(null);
+    setExpandedStation({});
+    setExpandedCustomer({});
+    setExpandedStationLists({});
+    setExpandedCustomerLists({});
+    setExpandedRecordLists({});
+    setCustomerRecords({});
+    void fetchH2BiDaily(query)
+      .then((result) => alive && setDaily(result))
+      .catch(
+        (reason: unknown) =>
+          alive &&
+          setError(
+            reason instanceof Error ? reason.message : "按日数据加载失败",
+          ),
+      );
+    return () => {
+      alive = false;
+    };
+  }, [query]);
+  const ensureDateTree = (date: string) => {
+    if (trees[date]) return;
+    void fetchH2BiDailyTree(date, {
+      vehicleScope: query.vehicleScope,
+      verifyScope,
+    }).then((tree) => setTrees((items) => ({ ...items, [date]: tree })));
+  };
+  const openDate = (date: string, scrollIntoDate = false) => {
+    setExpandedDate(date);
+    ensureDateTree(date);
+    if (!scrollIntoDate) return;
+    setHighlightedDate(date);
+    window.setTimeout(() => {
+      dateRowRefs.current[date]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }, 40);
+    window.setTimeout(() => {
+      setHighlightedDate((current) => (current === date ? null : current));
+    }, 2200);
+  };
+  const toggleDate = (date: string) => {
+    if (expandedDate === date) {
+      setExpandedDate(null);
+      return;
+    }
+    openDate(date);
+  };
+  const toggleCustomer = (
+    date: string,
+    stationId: string | number,
+    customerId: number,
+  ) => {
+    const key = `${date}:${stationId}:${customerId}`;
+    setExpandedCustomer((items) => ({ ...items, [key]: !items[key] }));
+    if (customerRecords[key]) return;
+    void fetchH2BiDrill({
+      ...query,
+      date,
+      stationId,
+      customerId,
+      groupBy: "record",
+      page: 1,
+      pageSize: 200,
+    }).then((result) =>
+      setCustomerRecords((items) => ({ ...items, [key]: result })),
+    );
+  };
+  const exportRows = () => {
+    const rows: Array<Array<string | number>> = [
+      ["日期", "加氢站", "客户", "加氢量(Kg)", "成本(元)", "流水笔数"],
+    ];
+    Object.values(trees).forEach((tree) =>
+      tree.stations.forEach((station) =>
+        station.customers.forEach((customer) =>
+          rows.push([
+            tree.date,
+            station.name,
+            customer.name,
+            customer.kg,
+            customer.cost,
+            customer.recordCount,
+          ]),
+        ),
+      ),
+    );
+    downloadExcelAoa(
+      rows,
+      `每日加氢数据明细_${startDate}_${endDate}.xlsx`,
+      "每日加氢明细",
+    );
+  };
+  const trend = daily?.trend ?? [];
+  const maxKg = Math.max(...trend.map((row) => row.kg), 1);
+  const averageKg = daily?.kpis.averageDailyKg ?? 0;
+  const peak = trend.reduce(
+    (best, row) => (row.kg > best.kg ? row : best),
+    trend[0],
+  );
+  const trough = trend
+    .filter((row) => row.kg > 0)
+    .reduce(
+      (best, row) => (!best || row.kg < best.kg ? row : best),
+      undefined as (typeof trend)[number] | undefined,
+    );
+  return (
+    <div className="ehb-daily-container">
+      <section className="ehb-daily-filter-card">
+        <div className="ehb-daily-filter-row">
+          <div className="ehb-daily-filter-group">
+            <div className="ehb-pill-tabs">
+              <button
+                type="button"
+                className="ehb-pill-btn"
+                onClick={() => {
+                  const today = endDate;
+                  onStartDateChange(today.slice(0, 8) + "01");
+                }}
+              >
+                本月
+              </button>
+              <button
+                type="button"
+                className="ehb-pill-btn"
+                onClick={() => {
+                  const end = new Date(`${endDate}T00:00:00`);
+                  const begin = new Date(end);
+                  begin.setDate(end.getDate() - 14);
+                  onStartDateChange(begin.toISOString().slice(0, 10));
+                }}
+              >
+                近15天
+              </button>
+              <button type="button" className="ehb-pill-btn is-active">
+                自定义
+              </button>
+            </div>
+            <input
+              className="ehb-modal-select"
+              type="date"
+              value={startDate}
+              onChange={(event) => onStartDateChange(event.target.value)}
+            />
+            <input
+              className="ehb-modal-select"
+              type="date"
+              value={endDate}
+              onChange={(event) => onEndDateChange(event.target.value)}
+            />
+          </div>
+          <div className="ehb-daily-filter-group">
+            <div className="ehb-fleet-segmented">
+              <button
+                type="button"
+                className={`ehb-fleet-btn ${fleetScope === "all" ? "is-active" : ""}`}
+                onClick={() => onFleetScopeChange("all")}
+              >
+                全部车辆
+              </button>
+              <button
+                type="button"
+                className={`ehb-fleet-btn ${fleetScope === "own" ? "is-active" : ""}`}
+                onClick={() => onFleetScopeChange("own")}
+              >
+                <Truck size={14} />
+                仅羚牛车辆
+              </button>
+              <button
+                type="button"
+                className={`ehb-fleet-btn ${fleetScope === "external" ? "is-active" : ""}`}
+                onClick={() => onFleetScopeChange("external")}
+              >
+                <Truck size={14} />
+                仅外部车辆
+              </button>
+            </div>
+            <button
+              type="button"
+              className="ehb-btn ehb-btn--ghost"
+              onClick={onRefresh}
+            >
+              <RefreshCw size={14} />
+              刷新
+            </button>
+          </div>
+        </div>
+      </section>
+      {error ? <div className="ehb-empty">{error}</div> : null}
+      <section className="ehb-daily-kpi-grid">
+        <div className="ehb-daily-kpi-card">
+          <div className="ehb-daily-kpi-title">区间加氢量</div>
+          <div className="ehb-daily-kpi-val">
+            {format(daily?.kpis.totalKg ?? 0)} <small>Kg</small>
+          </div>
+          <div className="ehb-daily-kpi-sub">
+            {startDate} 至 {endDate}
+          </div>
+        </div>
+        <div className="ehb-daily-kpi-card">
+          <div className="ehb-daily-kpi-title">区间成本</div>
+          <div className="ehb-daily-kpi-val">
+            ¥{format(daily?.kpis.totalCost ?? 0)}
+          </div>
+          <div className="ehb-daily-kpi-sub">真实成本台账汇总</div>
+        </div>
+        <div className="ehb-daily-kpi-card">
+          <div className="ehb-daily-kpi-title">有效天数</div>
+          <div className="ehb-daily-kpi-val">{daily?.kpis.activeDays ?? 0}</div>
+          <div className="ehb-daily-kpi-sub">
+            日均 {format(daily?.kpis.averageDailyKg ?? 0)} Kg
+          </div>
+        </div>
+        <div className="ehb-daily-kpi-card">
+          <div className="ehb-daily-kpi-title">涉及加氢站</div>
+          <div className="ehb-daily-kpi-val">
+            {daily?.kpis.stationCount ?? 0} <small>站</small>
+          </div>
+          <div className="ehb-daily-kpi-sub">按明细站点去重</div>
+        </div>
+      </section>
+      <section className="ehb-daily-chart-section">
+        <div className="ehb-daily-chart-head">
+          <div className="ehb-daily-chart-title">
+            每日加氢量{" "}
+            <span className="ehb-title-sub">
+              （点击柱体下锚定位到对应日期明细）
+            </span>
+          </div>
+          <div className="ehb-daily-chart-meta-group">
+            <div className="ehb-daily-chart-legend">
+              <span className="ehb-legend-item">
+                <span className="ehb-legend-dot is-own" />
+                内部客户
+              </span>
+              <span className="ehb-legend-item">
+                <span className="ehb-legend-dot is-ext" />
+                外部客户
+              </span>
+            </div>
+            <span className="ehb-daily-chart-meta">时间单位：日 · 单位 Kg</span>
+          </div>
+        </div>
+        <div className="ehb-daily-summary-pills">
+          <div className="ehb-daily-pill-item">
+            <span>峰值日</span>
+            <strong>{peak ? `${peak.date} ${format(peak.kg)} Kg` : "—"}</strong>
+          </div>
+          <div className="ehb-daily-pill-item">
+            <span>低谷日</span>
+            <strong>
+              {trough ? `${trough.date} ${format(trough.kg)} Kg` : "—"}
+            </strong>
+          </div>
+          <div className="ehb-daily-pill-item">
+            <span>零数日</span>
+            <strong>{trend.filter((row) => row.kg === 0).length} 天</strong>
+          </div>
+        </div>
+        <div className="ehb-daily-bar-container">
+          <div
+            className="ehb-daily-avg-line"
+            style={{
+              bottom: `${Math.min(92, Math.round((averageKg / maxKg) * 100))}%`,
+            }}
+          >
+            <span className="ehb-daily-avg-label">
+              均值 {format(averageKg)} Kg
+            </span>
+          </div>
+          {trend.map((row) => {
+            const total = row.kg || 1;
+            const ownRatio = (row.lingniuKg / total) * 100;
+            const extRatio = (row.externalKg / total) * 100;
+            const active = expandedDate === row.date;
+            return (
+              <button
+                type="button"
+                key={row.date}
+                className="ehb-daily-bar-col"
+                onClick={() => openDate(row.date, true)}
+                title={`${row.date} 加氢总量 ${format(row.kg)} Kg；点击展开并定位当日明细`}
+                aria-label={`展开并定位${row.date}当日加氢明细`}
+              >
+                <div
+                  className="ehb-daily-bar-val"
+                  style={{
+                    color: active ? "#0284c7" : undefined,
+                    fontWeight: active ? 700 : undefined,
+                  }}
+                >
+                  {Math.round(row.kg)}
+                </div>
+                <div
+                  className={`ehb-daily-bar-fill is-stacked ${active ? "is-active" : ""}`}
+                  style={{ height: `${Math.max(0, (row.kg / maxKg) * 100)}%` }}
+                >
+                  {row.externalKg > 0 ? (
+                    <div
+                      className="ehb-bar-segment is-ext"
+                      style={{ height: `${extRatio}%` }}
+                    />
+                  ) : null}
+                  {row.lingniuKg > 0 ? (
+                    <div
+                      className="ehb-bar-segment is-own"
+                      style={{ height: `${ownRatio}%` }}
+                    />
+                  ) : null}
+                </div>
+                <div
+                  className="ehb-daily-bar-label"
+                  style={{
+                    color: active ? "#0284c7" : undefined,
+                    fontWeight: active ? 700 : undefined,
+                  }}
+                >
+                  {row.date.slice(5)}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+      <section className="ehb-daily-table-card">
+        <div className="ehb-daily-table-head">
+          <div className="ehb-daily-table-title">
+            每日加氢数据明细{" "}
+            <span className="ehb-title-sub">
+              （可多层下钻：按日 → 加氢站 → 客户 → 车辆及数据源）
+            </span>
+          </div>
+          <button
+            type="button"
+            className="ehb-btn ehb-btn--outline ehb-export-btn"
+            onClick={exportRows}
+          >
+            <Download size={14} />
+            导出 Excel
+          </button>
+        </div>
+        <div
+          className="ehb-h5-scroll-hint ehb-daily-table-scroll-hint"
+          aria-hidden="true"
+        >
+          ‹ 左右滑动查看完整指标列 ›
+        </div>
+        <div className="ehb-table-wrap">
+          <table className="ehb-table">
+            <thead>
+              <tr>
+                <th>日期 / 加氢站 / 客户 / 车辆明细</th>
+                <th>单价(元/Kg)</th>
+                <th>加氢量(Kg)</th>
+                <th>成本金额(元) / 环比</th>
+                <th>预充值余额 / 数据来源</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr style={{ background: "#f8fafc", fontWeight: 700 }}>
+                <td>合计</td>
+                <td />
+                <td>{format(daily?.kpis.totalKg ?? 0)}</td>
+                <td>¥{format(daily?.kpis.totalCost ?? 0)}</td>
+                <td>暂无来源</td>
+              </tr>
+              {(daily?.days ?? []).map((day) => {
+                const tree = trees[day.date];
+                const open = expandedDate === day.date;
+                return (
+                  <Fragment key={day.date}>
+                    <tr
+                      ref={(node) => {
+                        dateRowRefs.current[day.date] = node;
+                      }}
+                      id={`daily-row-${day.date}`}
+                      className={`ehb-daily-date-row${highlightedDate === day.date ? " is-highlighted" : ""}`}
+                      style={{
+                        cursor: "pointer",
+                        background: open ? "#f0f9ff" : undefined,
+                      }}
+                      onClick={() => toggleDate(day.date)}
+                    >
+                      <td>
+                        <span className="ehb-daily-tree-toggle is-date">
+                          {open ? "▼" : "►"}
+                        </span>
+                        {day.date}{" "}
+                        <span className="ehb-title-sub">
+                          ({day.stationCount ?? 0} 个加氢站)
+                        </span>
+                      </td>
+                      <td>—</td>
+                      <td>{format(day.kg)}</td>
+                      <td>
+                        ¥{format(day.cost)} /{" "}
+                        {format((day as { chainPct?: number }).chainPct ?? 0)}%
+                      </td>
+                      <td>暂无来源</td>
+                    </tr>
+                    {open &&
+                      tree?.stations
+                        .slice(0, expandedStationLists[day.date] ? undefined : 10)
+                        .map((station) => {
+                        const stationKey = `${day.date}:${station.id}`;
+                        const stationOpen = !!expandedStation[stationKey];
+                        return (
+                          <Fragment key={stationKey}>
+                            <tr
+                              style={{
+                                cursor: "pointer",
+                                background: "#f8fafc",
+                              }}
+                              onClick={() =>
+                                setExpandedStation((items) => ({
+                                  ...items,
+                                  [stationKey]: !items[stationKey],
+                                }))
+                              }
+                            >
+                              <td className="ehb-tree-cell-l1">
+                                <span className="ehb-daily-tree-toggle is-station">
+                                  {stationOpen ? "▼" : "►"}
+                                </span>
+                                <span className="ehb-daily-tree-branch">└</span>
+                                加氢站：{station.name}
+                              </td>
+                              <td>—</td>
+                              <td>{format(station.kg)}</td>
+                              <td>¥{format(station.cost)}</td>
+                              <td>暂无来源</td>
+                            </tr>
+                            {stationOpen &&
+                              station.customers
+                                .slice(
+                                  0,
+                                  expandedCustomerLists[stationKey]
+                                    ? undefined
+                                    : 10,
+                                )
+                                .map((customer) => {
+                                const customerKey = `${stationKey}:${customer.id}`;
+                                const customerOpen =
+                                  !!expandedCustomer[customerKey];
+                                const allRecords =
+                                  customerRecords[customerKey]?.records ?? [];
+                                const records = allRecords.slice(
+                                  0,
+                                  expandedRecordLists[customerKey]
+                                    ? undefined
+                                    : 20,
+                                );
+                                return (
+                                  <Fragment key={customerKey}>
+                                    <tr
+                                      style={{ cursor: "pointer" }}
+                                      onClick={() =>
+                                        toggleCustomer(
+                                          day.date,
+                                          station.id,
+                                          customer.id,
+                                        )
+                                      }
+                                    >
+                                      <td className="ehb-tree-cell-l2">
+                                        <span className="ehb-daily-tree-toggle is-customer">
+                                          {customerOpen ? "▼" : "►"}
+                                        </span>
+                                        <span className="ehb-daily-tree-branch">└─</span>
+                                        客户：{customer.name}{" "}
+                                        <span className="ehb-title-sub">
+                                          ({customer.recordCount} 笔)
+                                        </span>
+                                      </td>
+                                      <td>—</td>
+                                      <td>{format(customer.kg)}</td>
+                                      <td>¥{format(customer.cost)}</td>
+                                      <td>点击查看真实流水</td>
+                                    </tr>
+                                    {customerOpen &&
+                                      records.map((record) => (
+                                        <tr key={String(record.id)}>
+                                          <td className="ehb-tree-cell-l3">
+                                            <span className="ehb-daily-tree-branch">└──</span>
+                                            {String(record.time || "—").slice(11, 16)}{" "}
+                                            <strong>
+                                              {String(record.plateNo || "无车牌")}
+                                            </strong>{" "}
+                                            <span
+                                              className={`ehb-daily-record-tag ${record.vehicleScope === "lingniu" ? "is-own" : "is-external"}`}
+                                            >
+                                              {record.vehicleScope === "lingniu"
+                                                ? "羚牛车辆"
+                                                : "外部车辆"}
+                                            </span>
+                                            <span
+                                              className="ehb-daily-record-tag is-source"
+                                              title={String(record.source || "未知来源")}
+                                            >
+                                              {sourceLabel(record.source)}
+                                            </span>
+                                            <span
+                                              className={`ehb-daily-record-tag ${verifyLabel(record.verifyStatus) === "已验证" ? "is-verified" : "is-unverified"}`}
+                                              title={verifyLabel(record.verifyStatus)}
+                                            >
+                                              {verifyLabel(record.verifyStatus)}
+                                            </span>
+                                          </td>
+                                          <td>
+                                            {format(
+                                              Number(record.unitPrice ?? 0),
+                                            )}
+                                          </td>
+                                          <td>
+                                            {format(Number(record.kg ?? 0))}
+                                          </td>
+                                          <td>
+                                            ¥{format(Number(record.cost ?? 0))}
+                                          </td>
+                                          <td>暂无预充值余额</td>
+                                        </tr>
+                                      ))}
+                                    {customerOpen && allRecords.length > 20 ? (
+                                      <tr className="ehb-daily-tree-more-row">
+                                        <td colSpan={5}>
+                                          <button
+                                            type="button"
+                                            className="ehb-daily-tree-more-btn"
+                                            onClick={(event) => {
+                                              event.stopPropagation();
+                                              setExpandedRecordLists((items) => ({
+                                                ...items,
+                                                [customerKey]: !items[customerKey],
+                                              }));
+                                            }}
+                                          >
+                                            {expandedRecordLists[customerKey]
+                                              ? "收起车辆明细"
+                                              : `更多车辆明细（还有 ${allRecords.length - 20} 笔）`}
+                                          </button>
+                                        </td>
+                                      </tr>
+                                    ) : null}
+                                  </Fragment>
+                                );
+                              })}
+                            {stationOpen && station.customers.length > 10 ? (
+                              <tr className="ehb-daily-tree-more-row">
+                                <td colSpan={5}>
+                                  <button
+                                    type="button"
+                                    className="ehb-daily-tree-more-btn"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setExpandedCustomerLists((items) => ({
+                                        ...items,
+                                        [stationKey]: !items[stationKey],
+                                      }));
+                                    }}
+                                  >
+                                    {expandedCustomerLists[stationKey]
+                                      ? "收起客户"
+                                      : `更多客户（还有 ${station.customers.length - 10} 个）`}
+                                  </button>
+                                </td>
+                              </tr>
+                            ) : null}
+                          </Fragment>
+                        );
+                      })}
+                    {open && tree && tree.stations.length > 10 ? (
+                      <tr className="ehb-daily-tree-more-row">
+                        <td colSpan={5}>
+                          <button
+                            type="button"
+                            className="ehb-daily-tree-more-btn"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              setExpandedStationLists((items) => ({
+                                ...items,
+                                [day.date]: !items[day.date],
+                              }));
+                            }}
+                          >
+                            {expandedStationLists[day.date]
+                              ? "收起加氢站"
+                              : `更多加氢站（还有 ${tree.stations.length - 10} 个）`}
+                          </button>
+                        </td>
+                      </tr>
+                    ) : null}
+                  </Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,869 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ChevronDown, ChevronLeft, Download, Search, Truck, X } from "lucide-react";
+import { fetchH2BiDrill, fetchH2BiMeta } from "./api";
+import { downloadExcelAoa } from "./prototype-download";
+import type {
+  H2BiDrillGroupBy,
+  H2BiDrillGroupRow,
+  H2BiDrillResponse,
+  H2BiAmountScope,
+  H2BiMetaResponse,
+  H2BiQuery,
+  H2BiVehicleScope,
+} from "./types";
+
+type DrillKind = "kpi" | "customer" | "station" | "records";
+
+export interface PrototypeDrillModalProps {
+  kind: DrillKind;
+  label: string;
+  query: H2BiQuery;
+  onClose: () => void;
+}
+
+type DrillRootDimension = "station" | "customer";
+
+type DrillState = Pick<
+  H2BiQuery,
+  | "stationId"
+  | "customerId"
+  | "customerName"
+  | "plateNo"
+  | "date"
+  | "month"
+  | "region"
+  | "regionGranularity"
+> & {
+  level: H2BiDrillGroupBy;
+  rootDimension: DrillRootDimension;
+  amountScope: H2BiAmountScope;
+  stationName?: string;
+};
+
+const formatNumber = (value: unknown, digits = 2) =>
+  Number(value ?? 0).toLocaleString("zh-CN", {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+const fleetScope = (value: "all" | "own" | "external"): H2BiVehicleScope =>
+  value === "own" ? "lingniu" : value;
+const verifyLabel = (status: unknown) => {
+  const value = String(status ?? "").trim().toLowerCase();
+  return value === "verified" || value === "pass" || value === "已验证"
+    ? "已验证"
+    : "未验证";
+};
+
+const sourceLabel = (source: unknown) => {
+  const value = String(source ?? "").trim().toLowerCase();
+  if (value === "api") return "API接入";
+  if (value === "station" || value === "station_report") return "站点上报";
+  if (value === "lingniu" || value === "lingniu_report") return "羚牛上报";
+  return String(source ?? "真实账本");
+};
+
+const sourceClass = (source: unknown) => {
+  const value = String(source ?? "").trim().toLowerCase();
+  if (value === "api") return "ehb-tag--source-api";
+  if (value === "station" || value === "station_report") return "ehb-tag--source-station";
+  return "ehb-tag--source-lingniu";
+};
+
+/** 原生 select 会出现双箭头且不支持长列表检索；统一为可搜索选择器。 */
+function DrillSearchSelect({
+  ariaLabel,
+  value,
+  onChange,
+  options,
+  allLabel,
+  placeholder,
+  disabled = false,
+}: {
+  ariaLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ value: string; label: string }>;
+  allLabel: string;
+  placeholder: string;
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState("");
+  const rootRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const close = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    if (open) document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    setKeyword("");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, [open]);
+
+  const selectedLabel =
+    options.find((option) => option.value === value)?.label ?? allLabel;
+  const matches = useMemo(() => {
+    const query = keyword.trim().toLowerCase();
+    return query
+      ? options.filter(
+          (option) =>
+            option.label.toLowerCase().includes(query) ||
+            option.value.toLowerCase().includes(query),
+        )
+      : options;
+  }, [keyword, options]);
+
+  return (
+    <div
+      className={`ehb-bi-search-select ${disabled ? "is-disabled" : ""}`}
+      ref={rootRef}
+      style={{ width: 180 }}
+    >
+      <button
+        type="button"
+        className={`ehb-bi-search-select__trigger ${open ? "is-open" : ""} ${value ? "has-value" : ""}`}
+        onClick={() => !disabled && setOpen((shown) => !shown)}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        title={selectedLabel}
+      >
+        <span className="ehb-bi-search-select__label">{selectedLabel}</span>
+        <ChevronDown size={13} className="ehb-bi-search-select__chevron" />
+      </button>
+      {open && !disabled ? (
+        <div className="ehb-bi-search-select__dropdown">
+          <label className="ehb-bi-search-select__search">
+            <Search size={13} />
+            <input
+              ref={inputRef}
+              value={keyword}
+              onChange={(event) => setKeyword(event.target.value)}
+              placeholder={placeholder}
+              aria-label={`搜索${ariaLabel}`}
+            />
+          </label>
+          <div className="ehb-bi-search-select__list">
+            <button
+              type="button"
+              className={`ehb-bi-search-select__item ${value ? "" : "is-selected"}`}
+              onClick={() => {
+                onChange("");
+                setOpen(false);
+              }}
+            >
+              {allLabel}
+            </button>
+            {matches.map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                className={`ehb-bi-search-select__item ${value === option.value ? "is-selected" : ""}`}
+                onClick={() => {
+                  onChange(option.value);
+                  setOpen(false);
+                }}
+                title={option.label}
+              >
+                {option.label}
+              </button>
+            ))}
+            {matches.length === 0 ? (
+              <div className="ehb-bi-search-select__empty">无匹配项</div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function initialState(kind: DrillKind, label: string): DrillState {
+  // Canonical labels use “2026年4月”. Accept the former “2026年2026-04”
+  // form too so a legacy label can never silently drop the month filter.
+  const monthParts =
+    label.match(/(\d{4})年(\d{1,2})月/) ?? label.match(/(\d{4})-(\d{1,2})/);
+  const regionMatch = label.match(/区域(市|省)：(.+)/);
+  const stationIdMatch = label.match(/stationId=(\d+)/);
+  const cleanLabel = label.replace(/\|stationId=\d+$/, "");
+  // 对客金额、对客成本和利润都只看客户承担订单；利润减法使用完全
+  // 相同订单集。成本图的另外两段则按账本 settlement_type 定向下钻。
+  const amountScope: H2BiAmountScope = /我司承担成本/.test(cleanLabel)
+    ? "company"
+    : /其他成本/.test(cleanLabel)
+      ? "other"
+      : /加氢利润|对客金额|对客收入|客户收入|客户承担成本|对客成本/.test(cleanLabel)
+        ? "customer"
+        : "all";
+  if (kind === "customer" || kind === "station")
+    return { level: "date", rootDimension: "station", amountScope };
+  if (kind === "records")
+    return { level: "record", rootDimension: "station", amountScope };
+  return {
+    level: stationIdMatch ? "customer" : "station",
+    rootDimension: "station",
+    amountScope,
+    stationId: stationIdMatch ? stationIdMatch[1] : undefined,
+    month: monthParts
+      ? `${monthParts[1]}-${monthParts[2].padStart(2, "0")}`
+      : undefined,
+    region: regionMatch ? regionMatch[2] : undefined,
+    regionGranularity: regionMatch
+      ? regionMatch[1] === "省"
+        ? "province"
+        : "city"
+      : undefined,
+    // Keep this assignment solely to make the parsed label explicit in DevTools;
+    // it is not sent as a business filter.
+    customerName: cleanLabel.startsWith("客户：")
+      ? cleanLabel.slice(3)
+      : undefined,
+  };
+}
+
+function titleFor(level: H2BiDrillGroupBy) {
+  return (
+    {
+      station: "加氢站",
+      customer: "客户",
+      date: "日期",
+      vehicle: "车辆",
+      record: "加氢记录",
+    } as const
+  )[level];
+}
+
+function nextState(current: DrillState, row: H2BiDrillGroupRow): DrillState {
+  if (current.level === "station") {
+    if (current.rootDimension === "customer" && current.customerId !== undefined)
+      return { ...current, level: "vehicle", stationId: row.id, stationName: row.name };
+    return { ...current, level: "customer", stationId: row.id, stationName: row.name };
+  }
+  if (current.level === "customer") {
+    if (current.rootDimension === "customer" && current.customerId === undefined)
+      return {
+        ...current,
+        level: "station",
+        customerId: Number(row.id),
+        customerName: row.name,
+      };
+    return {
+      ...current,
+      level: "vehicle",
+      customerId: Number(row.id),
+      customerName: row.name,
+    };
+  }
+  if (current.level === "date")
+    return { ...current, level: "vehicle", date: row.id };
+  if (current.level === "vehicle")
+    return { ...current, level: "record", plateNo: row.name };
+  return current;
+}
+
+function useDrill(query: H2BiQuery, state: DrillState) {
+  const [data, setData] = useState<H2BiDrillResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const key = JSON.stringify({ ...query, ...state });
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    void fetchH2BiDrill({
+      ...query,
+      ...state,
+      groupBy: state.level,
+      amountScope: state.amountScope,
+      page: 1,
+      pageSize: 200,
+    })
+      .then((result) => alive && setData(result))
+      .catch(
+        (reason: unknown) =>
+          alive &&
+          setError(
+            reason instanceof Error ? reason.message : "下钻数据加载失败",
+          ),
+      )
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [key]);
+  return { data, error, loading };
+}
+
+function GroupTable({
+  state,
+  data,
+  onOpen,
+}: {
+  state: DrillState;
+  data: H2BiDrillResponse;
+  onOpen: (row: H2BiDrillGroupRow) => void;
+}) {
+  const customerBearingScope = data.amountScope === "customer";
+  const costLabel =
+    data.amountScope === "company"
+      ? "我司承担成本金额"
+      : data.amountScope === "other"
+        ? "其他成本金额"
+        : customerBearingScope
+          ? "对客成本金额"
+          : "成本金额";
+  const isProfit = state.amountScope === "customer";
+  if (state.level === "record") {
+    return (
+      <table className="ehb-modal-table">
+        <thead>
+          <tr>
+            <th>加氢站 / 客户 / 车辆与凭证链路</th>
+            <th>类型 / 归属</th>
+            <th>数据来源及凭证号</th>
+            <th>核对状态</th>
+            <th style={{ textAlign: "right" }}>加氢笔数</th>
+            <th style={{ textAlign: "right" }}>加氢总量 (Kg)</th>
+            <th style={{ textAlign: "right" }}>{costLabel} (元)</th>
+            <th style={{ textAlign: "right" }}>对客金额 (元)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {state.stationName ? (
+            <tr className="ehb-tree-row-station">
+              <td className="ehb-tree-cell-l1"><div className="ehb-tree-node-title"><span aria-hidden>▾</span><strong>{state.stationName}</strong></div></td>
+              <td><span className="ehb-tree-node-sub">加氢站</span></td><td><span className="ehb-tree-node-sub">真实账本流水</span></td><td>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td>
+            </tr>
+          ) : null}
+          {state.customerName ? (
+            <tr className="ehb-tree-row-customer">
+              <td className="ehb-tree-cell-l2"><div className="ehb-tree-node-title"><span aria-hidden>▾</span><strong>└─ 客户：{state.customerName}</strong></div></td>
+              <td><span className="ehb-tree-node-sub">客户</span></td><td><span className="ehb-tree-node-sub">真实账本流水</span></td><td>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td>
+            </tr>
+          ) : null}
+          {state.plateNo ? (
+            <tr>
+              <td className="ehb-tree-cell-l3"><div className="ehb-tree-node-title"><span aria-hidden>▾</span><strong>└─ {state.plateNo}</strong></div></td>
+              <td><span className="ehb-tag ehb-tag--own-fleet">车辆</span></td><td><span className="ehb-tree-node-sub">真实账本流水</span></td><td>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td><td style={{ textAlign: "right" }}>—</td>
+            </tr>
+          ) : null}
+          {data.records.map((record, index) => (
+            <tr key={`${String(record.id)}-${index}`}>
+              <td className="ehb-tree-cell-l4">
+                <div className="ehb-tree-ord-block">
+                  <strong>
+                    订单编号 {String(record.orderNo || record.id || "—")}
+                  </strong>
+                  <span className="ehb-tree-ord-time">
+                    {String(record.time || "—")} · {String(record.stationName || "未关联站点")} · {String(record.customerName || "未关联客户")}
+                  </span>
+                </div>
+              </td>
+              <td>
+                <span
+                  className={`ehb-tag ${record.vehicleScope === "lingniu" ? "ehb-tag--own-fleet" : "ehb-tag--ext-fleet"}`}
+                >
+                  {record.vehicleScope === "lingniu" ? "羚牛车辆" : "外部车辆"}
+                </span>
+              </td>
+              <td>
+                <span className={`ehb-tag ${sourceClass(record.source)}`}>
+                  {sourceLabel(record.source)}
+                </span>
+              </td>
+              <td>
+                <span
+                  className={`ehb-tag ${verifyLabel(record.verifyStatus) === "已验证" ? "ehb-tag--verify-ok" : "ehb-tag--verify-warn"}`}
+                >
+                  {verifyLabel(record.verifyStatus)}
+                </span>
+              </td>
+              <td style={{ textAlign: "right" }}>
+                1 笔
+              </td>
+              <td style={{ textAlign: "right" }}>{formatNumber(record.kg)}</td>
+              <td style={{ textAlign: "right" }}>
+                ¥{formatNumber(record.cost)}
+              </td>
+              <td style={{ textAlign: "right" }}>
+                ¥{formatNumber(record.revenue)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+  return (
+    <table className="ehb-modal-table">
+      <thead>
+        <tr>
+          <th>加氢站 / 客户 / 车辆与凭证链路</th>
+          <th>类型 / 归属</th>
+          <th>数据来源及凭证号</th>
+          <th>核对状态</th>
+          <th style={{ textAlign: "right" }}>加氢笔数</th>
+          <th style={{ textAlign: "right" }}>加氢总量 (Kg)</th>
+          <th style={{ textAlign: "right" }}>{costLabel} (元)</th>
+          <th style={{ textAlign: "right" }}>对客金额 (元)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {state.stationName ? (
+          <tr className="ehb-tree-row-station">
+            <td className="ehb-tree-cell-l1">
+              <div className="ehb-tree-node-title"><span aria-hidden>▾</span><strong>{state.stationName}</strong></div>
+            </td>
+            <td><span className="ehb-tree-node-sub">加氢站</span></td>
+            <td><span className="ehb-tree-node-sub">真实账本流水</span></td>
+            <td>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+          </tr>
+        ) : null}
+        {state.customerName && state.level !== "customer" ? (
+          <tr className="ehb-tree-row-customer">
+            <td className="ehb-tree-cell-l2">
+              <div className="ehb-tree-node-title"><span aria-hidden>▾</span><strong>└─ 客户：{state.customerName}</strong></div>
+            </td>
+            <td><span className="ehb-tree-node-sub">客户</span></td>
+            <td><span className="ehb-tree-node-sub">真实账本流水</span></td>
+            <td>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+            <td style={{ textAlign: "right" }}>—</td>
+          </tr>
+        ) : null}
+        {data.groups.map((row, index) => (
+          <tr
+            key={`${row.id}-${index}`}
+            onClick={() => onOpen(row)}
+            style={{ cursor: "pointer" }}
+            title={`点击继续查看${titleFor(nextState(state, row).level)}`}
+          >
+            <td
+              className={
+                state.level === "station"
+                  ? "ehb-tree-cell-l1"
+                  : state.level === "customer"
+                    ? "ehb-tree-cell-l2"
+                    : state.level === "vehicle"
+                      ? "ehb-tree-cell-l3"
+                      : "ehb-tree-cell-l1"
+              }
+            >
+              <div className="ehb-tree-node-title">
+                <span aria-hidden>{state.level === "station" ? "▸" : "└─"}</span>
+                <strong>
+                  {state.level === "customer" ? "客户：" : ""}
+                  {row.name}
+                </strong>
+                {row.province ? <span className="ehb-tree-node-sub">{row.province}</span> : null}
+                <span className="ehb-kpi-drill-hint">钻取 ›</span>
+              </div>
+            </td>
+            <td>
+              {state.level === "vehicle" ? (
+                <span
+                  className={`ehb-tag ${row.lingniuKg > 0 ? "ehb-tag--own-fleet" : "ehb-tag--ext-fleet"}`}
+                >
+                  {row.lingniuKg > 0 ? "羚牛车辆" : "外部车辆"}
+                </span>
+              ) : state.level === "station" ? (
+                <span className="ehb-tree-node-sub">
+                  覆盖 {formatNumber(row.customerCount, 0)} 家客户
+                </span>
+              ) : (
+                <span className="ehb-tree-node-sub">聚合</span>
+              )}
+            </td>
+            <td>
+              <span className="ehb-tree-node-sub">
+                {state.level === "vehicle" ? "真实账本流水" : "全量自动归集"}
+              </span>
+            </td>
+            <td>
+              <span className="ehb-tree-node-sub">
+                {state.level === "station" ? "汇总" : "点击展开"}
+              </span>
+            </td>
+            <td style={{ textAlign: "right" }}>{formatNumber(row.recordCount, 0)} 笔</td>
+            <td style={{ textAlign: "right", fontWeight: 700 }}>
+              {formatNumber(row.kg)}
+            </td>
+            <td style={{ textAlign: "right" }}>
+              ¥{formatNumber(row.cost)}
+            </td>
+            <td style={{ textAlign: "right", color: isProfit ? "#10b981" : undefined }}>
+              ¥{formatNumber(row.revenue)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** Preserves the prototype overlay/card/meta/table anatomy, but every row is live ledger data. */
+export function PrototypeDrillModal({
+  kind,
+  label,
+  query,
+  onClose,
+}: PrototypeDrillModalProps) {
+  const [state, setState] = useState<DrillState>(() => ({
+    ...initialState(kind, label),
+    ...(kind === "customer" ? { customerName: label } : {}),
+  }));
+  const [history, setHistory] = useState<DrillState[]>([]);
+  const [search, setSearch] = useState("");
+  const [meta, setMeta] = useState<H2BiMetaResponse | null>(null);
+  const [fleetCategoryFilter, setFleetCategoryFilter] = useState<
+    "all" | "own" | "external"
+  >(() =>
+    query.vehicleScope === "lingniu"
+      ? "own"
+      : query.vehicleScope === "external"
+        ? "external"
+        : "all",
+  );
+  useEffect(() => {
+    let alive = true;
+    void fetchH2BiMeta().then((result) => alive && setMeta(result)).catch(() => {
+      // The drill itself remains usable even when the optional select metadata is unavailable.
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  const liveQuery = useMemo(
+    () => ({ ...query, vehicleScope: fleetScope(fleetCategoryFilter) }),
+    [fleetCategoryFilter, query],
+  );
+  const live = useDrill(liveQuery, state);
+  const data = useMemo(() => {
+    if (!live.data || !search.trim()) return live.data;
+    const term = search.trim().toLowerCase();
+    return {
+      ...live.data,
+      groups: live.data.groups.filter((row) =>
+        JSON.stringify(row).toLowerCase().includes(term),
+      ),
+      records: live.data.records.filter((row) =>
+        JSON.stringify(row).toLowerCase().includes(term),
+      ),
+    };
+  }, [live.data, search]);
+  const cleanLabel = label.replace(/\|stationId=\d+$/, "");
+  const customerBearingScope = live.data?.amountScope === "customer";
+  const profit =
+    Number(live.data?.summary.revenue ?? 0) -
+    Number(live.data?.summary.cost ?? 0);
+  const coverageStationCount = Number(
+    live.data?.summary.stationCount ??
+      (state.stationId
+        ? 1
+        : state.level === "station"
+          ? live.data?.groups.length ?? 0
+          : 0),
+  );
+  const traceability = Number(live.data?.summary.recordCount ?? 0)
+    ? (Number(live.data?.summary.traceableRecordCount ?? 0) /
+        Number(live.data?.summary.recordCount ?? 1)) *
+      100
+    : 0;
+  const open = (row: H2BiDrillGroupRow) => {
+    setHistory((items) => [...items, state]);
+    setState(nextState(state, row));
+  };
+  const stationOptions = meta?.stations ?? [];
+  const customerOptions =
+    state.level === "customer"
+      ? live.data?.groups.map((row) => ({ id: row.id, name: row.name })) ?? []
+      : state.customerId && state.customerName
+        ? [{ id: String(state.customerId), name: state.customerName }]
+        : [];
+  const vehicleOptions =
+    state.level === "vehicle"
+      ? live.data?.groups.map((row) => ({ id: row.id, name: row.name })) ?? []
+      : state.plateNo
+        ? [{ id: state.plateNo, name: state.plateNo }]
+        : [];
+  const resetToRoot = (overrides: Partial<DrillState> = {}) => {
+    setHistory([]);
+    setSearch("");
+    setState({ ...initialState(kind, label), ...overrides });
+  };
+  const changeStation = (value: string) => {
+    if (!value) {
+      resetToRoot({ rootDimension: state.rootDimension, level: state.rootDimension });
+      return;
+    }
+    resetToRoot({
+      stationId: value,
+      stationName: stationOptions.find((station) => String(station.id) === value)?.name,
+      level: "customer",
+      rootDimension: "station",
+    });
+  };
+  const changeCustomer = (value: string) => {
+    if (!value) {
+      if (state.stationId) setState((current) => ({ ...current, level: "customer", customerId: undefined, plateNo: undefined }));
+      return;
+    }
+    setHistory([]);
+    setSearch("");
+    setState((current) => ({
+      ...current,
+      customerId: Number(value),
+      customerName: customerOptions.find((customer) => customer.id === value)?.name,
+      plateNo: undefined,
+      level: "vehicle",
+    }));
+  };
+  const changeVehicle = (value: string) => {
+    if (!value) {
+      setState((current) => ({ ...current, level: "vehicle", plateNo: undefined }));
+      return;
+    }
+    setHistory([]);
+    setSearch("");
+    setState((current) => ({ ...current, plateNo: value, level: "record" }));
+  };
+  const exportCurrent = () => {
+    if (!data) return;
+    const rows: Array<Array<string | number>> = [
+      [
+        "加氢站 / 客户 / 车辆与凭证链路",
+        "加氢量(Kg)",
+        "成本金额(元)",
+        "对客金额(元)",
+      ],
+    ];
+    if (state.level === "record") {
+      data.records.forEach((record) =>
+        rows.push([
+          `${String(record.stationName || "未关联站点")} / ${String(record.customerName || "未关联客户")} / ${String(record.plateNo || "无车牌")} / ${String(record.orderNo || record.id || "—")}`,
+          Number(record.kg ?? 0),
+          Number(record.cost ?? 0),
+          Number(record.revenue ?? 0),
+        ]),
+      );
+    } else {
+      data.groups.forEach((row) =>
+        rows.push([row.name, row.kg, row.cost, row.revenue]),
+      );
+    }
+    downloadExcelAoa(rows, `${cleanLabel}_真实账本穿透.xlsx`, "真实账本穿透");
+  };
+  const switchRootDimension = (rootDimension: DrillRootDimension) => {
+    if (kind !== "kpi" || state.rootDimension === rootDimension) return;
+    setHistory([]);
+    setSearch("");
+    setState({
+      ...initialState(kind, label),
+      rootDimension,
+      level: rootDimension,
+    });
+  };
+  const back = () => {
+    const previous = history.at(-1);
+    if (!previous) {
+      onClose();
+      return;
+    }
+    setHistory((items) => items.slice(0, -1));
+    setState(previous);
+  };
+  const scope =
+    state.date ||
+    state.month ||
+    query.date ||
+    query.month ||
+    (query.startDate && query.endDate
+      ? `${query.startDate} 至 ${query.endDate}`
+      : `${query.year} 年`);
+  const displayTitle = /\d{4}年/.test(cleanLabel)
+    ? `${cleanLabel}明细`
+    : `「${query.year}」${cleanLabel}明细`;
+  return (
+    <div
+      className="ehb-modal-overlay"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className="ehb-modal-card"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="ehb-modal-head">
+          <div className="ehb-modal-head__title-group">
+            <button
+              type="button"
+              className="ehb-modal-back-btn"
+              onClick={back}
+              title="返回"
+            >
+              <ChevronLeft size={18} />
+              <span>{history.length ? "返回上级" : "返回"}</span>
+            </button>
+            <div>
+              <div className="ehb-modal-head__title">{displayTitle}</div>
+              <div className="ehb-modal-head__sub">真实账本下钻 · {scope}</div>
+            </div>
+          </div>
+          <div className="ehb-modal-head__actions">
+            <button
+              type="button"
+              className="ehb-modal-close-btn"
+              onClick={onClose}
+              title="关闭"
+            >
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+        <div className="ehb-modal-body">
+          <div className="ehb-modal-meta-bar">
+            <div className="ehb-modal-meta-item">
+              <span className="ehb-modal-meta-label">数据归集总量</span>
+              <span className="ehb-modal-meta-val">
+                <span style={{ color: "#0284c7" }}>
+                  {formatNumber(Number(live.data?.summary.kg ?? 0) / 1000)} T
+                </span>
+              </span>
+            </div>
+            <div className="ehb-modal-meta-item">
+              <span className="ehb-modal-meta-label">数据总金额</span>
+              <span className="ehb-modal-meta-val">
+                <span style={{ color: "#10b981" }}>
+                  ¥{formatNumber(Number(live.data?.summary.cost ?? 0) / 10000)} 万元
+                </span>
+              </span>
+            </div>
+            <div className="ehb-modal-meta-item">
+              <span className="ehb-modal-meta-label">覆盖加氢站数</span>
+              <span className="ehb-modal-meta-val">
+                {coverageStationCount} 站
+              </span>
+            </div>
+            <div className="ehb-modal-meta-item">
+              <span className="ehb-modal-meta-label">数据源可追溯率</span>
+              <span className="ehb-modal-meta-val">
+                <span style={{ color: "#f59e0b" }}>
+                  {formatNumber(traceability, 0)}%（含账本来源字段）
+                </span>
+              </span>
+            </div>
+          </div>
+          {cleanLabel === "加氢利润" && customerBearingScope ? (
+            <div className="ehb-modal-hint-text" style={{ marginBottom: 10 }}>
+              利润口径：客户承担订单的对客总价 ¥
+              {formatNumber(live.data?.summary.revenue)} − 成本总价 ¥
+              {formatNumber(live.data?.summary.cost)} = ¥{formatNumber(profit)}
+            </div>
+          ) : null}
+          <div className="ehb-modal-filter-row">
+            <div className="ehb-modal-filter-group">
+              <DrillSearchSelect
+                ariaLabel="筛选加氢站"
+                value={state.stationId ? String(state.stationId) : ""}
+                onChange={changeStation}
+                options={stationOptions.map((station) => ({
+                  value: String(station.id),
+                  label: station.name,
+                }))}
+                allLabel="全部加氢站"
+                placeholder="搜索加氢站"
+              />
+              <DrillSearchSelect
+                ariaLabel="筛选客户"
+                value={state.customerId ? String(state.customerId) : ""}
+                onChange={changeCustomer}
+                options={customerOptions.map((customer) => ({
+                  value: String(customer.id),
+                  label: customer.name,
+                }))}
+                allLabel="全部客户"
+                placeholder="搜索客户"
+                disabled={!state.stationId}
+              />
+              <DrillSearchSelect
+                ariaLabel="筛选车辆"
+                value={state.plateNo ?? ""}
+                onChange={changeVehicle}
+                options={vehicleOptions.map((vehicle) => ({
+                  value: vehicle.name,
+                  label: vehicle.name,
+                }))}
+                allLabel="全部车辆"
+                placeholder="搜索车牌"
+                disabled={!state.customerId}
+              />
+              <div className="ehb-fleet-segmented" role="radiogroup" aria-label="车辆归属">
+                {([
+                  ["all", "全部车辆"],
+                  ["own", "仅羚牛车辆"],
+                  ["external", "仅外部车辆"],
+                ] as const).map(([value, text]) => (
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-checked={fleetCategoryFilter === value}
+                    className={`ehb-fleet-btn ${fleetCategoryFilter === value ? "is-active" : ""}`}
+                    onClick={() => setFleetCategoryFilter(value)}
+                    key={value}
+                  >
+                    {value !== "all" ? <Truck size={14} aria-hidden /> : null}
+                    {text}
+                  </button>
+                ))}
+              </div>
+              <button type="button" className="ehb-btn ehb-btn--outline ehb-export-btn" onClick={exportCurrent}>
+                <Download size={14} aria-hidden />
+                导出 Excel 穿透账单
+              </button>
+              {kind === "kpi" && history.length === 0 ? (
+                <div className="ehb-pill-tabs" role="group" aria-label="下钻首层维度">
+                  <button type="button" className={`ehb-pill-btn ${state.rootDimension === "station" ? "is-active" : ""}`} onClick={() => switchRootDimension("station")}>加氢站 → 客户</button>
+                  <button type="button" className={`ehb-pill-btn ${state.rootDimension === "customer" ? "is-active" : ""}`} onClick={() => switchRootDimension("customer")}>客户 → 加氢站</button>
+                </div>
+              ) : null}
+              <span className="ehb-modal-hint-text">提示：点击表格行可四级层层展开【加氢站 → 客户 → 车牌 → 单笔订单与核对明细】</span>
+            </div>
+            <label className="ehb-modal-search-input">
+              <Search size={14} />
+              <input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="搜索当前下钻结果" />
+            </label>
+          </div>
+          <div className="ehb-h5-scroll-hint">‹ 左右滑动查看完整指标列 ›</div>
+          <div className="ehb-modal-table-wrap is-v-scroll">
+            {live.loading ? (
+              <div className="ehb-empty">正在加载真实下钻数据…</div>
+            ) : live.error ? (
+              <div className="ehb-empty">{live.error}</div>
+            ) : data &&
+              (state.level === "record"
+                ? data.records.length
+                : data.groups.length) > 0 ? (
+              <GroupTable state={state} data={data} onOpen={open} />
+            ) : (
+              <div className="ehb-empty">当前筛选范围暂无数据</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function prototypeFleetScope(value: "all" | "own" | "external") {
+  return fleetScope(value);
+}
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import './styles/energy-bi-board.css';
+import { isOssGateSessionAuthed } from '../../common/oss-access-gate';
+
+export const ENERGY_BI_PASSWORD = 'lingniu';
+export const ENERGY_BI_AUTH_KEY = 'energy-h2-bi-board-auth-v1';
+
+export function isEnergyBiAuthed(): boolean {
+  return isOssGateSessionAuthed(ENERGY_BI_AUTH_KEY);
+}
+
+export function setEnergyBiAuthed(ok: boolean): void {
+  try {
+    if (ok) sessionStorage.setItem(ENERGY_BI_AUTH_KEY, '1');
+    else sessionStorage.removeItem(ENERGY_BI_AUTH_KEY);
+  } catch {
+    /* ignore */
+  }
+}
+
+interface EnergyBiAccessGateProps {
+  onOk: () => void;
+}
+
+/** 轻门禁：口令 lingniu · 本会话记住（与汇报舱 / 作战室同口径） */
+export const EnergyBiAccessGate: React.FC<EnergyBiAccessGateProps> = ({ onOk }) => {
+  const [pwd, setPwd] = useState('');
+  const [err, setErr] = useState('');
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (pwd.trim() === ENERGY_BI_PASSWORD) {
+      setEnergyBiAuthed(true);
+      setErr('');
+      onOk();
+      return;
+    }
+    setErr('口令不对，请重试');
+  };
+
+  return (
+    <div className="ehb-gate">
+      <form className="ehb-gate-card" onSubmit={submit}>
+        <p className="ehb-gate-kicker">ONEOS · 能源 BI</p>
+        <h1 className="ehb-gate-title">氢能经营看板</h1>
+        <p className="ehb-gate-sub">我司成本 · 按日 / 总览 · 单站日报</p>
+        <label className="ehb-gate-label" htmlFor="ehb-pwd">
+          访问口令
+        </label>
+        <input
+          id="ehb-pwd"
+          className="ehb-gate-input"
+          type="password"
+          autoComplete="current-password"
+          autoFocus
+          value={pwd}
+          onChange={(e) => {
+            setPwd(e.target.value);
+            if (err) setErr('');
+          }}
+          placeholder="请输入口令"
+        />
+        <p className="ehb-gate-error" role="alert">
+          {err}
+        </p>
+        <button type="submit" className="ehb-gate-btn">
+          进入看板
+        </button>
+        <p className="ehb-gate-foot">内部文件 · 请勿外传</p>
+      </form>
+    </div>
+  );
+};
@@ -0,0 +1,33 @@
+{
+  "directory": {
+    "title": "能源氢费经营看板",
+    "nodes": [
+      {
+        "id": "overview",
+        "title": "产品需求说明（PRD）",
+        "type": "markdown",
+        "path": ".spec/requirements-prd.md",
+        "description": "口令 lingniu · 顶栏全局/单站 · 无关联入口卡 · 默认全部车辆·KPI/图表/钻取跟随筛选 · 无车牌归外部车辆 · 外部主数据见 energy-h2-external-* · 分流 own→氢费明细 external→仅 BI"
+      },
+      {
+        "id": "board-app",
+        "title": "氢能经营看板",
+        "type": "route",
+        "path": "/prototypes/energy-h2-bi-board",
+        "description": "顶栏全局/单站；单站=日报起止查询·行内加氢量占比·按量降序"
+      },
+      {
+        "id": "energy-board-plan",
+        "title": "能源 BI 看板方案",
+        "type": "markdown",
+        "path": "../../resources/prd/energy-board-plan-20260806.md"
+      },
+      {
+        "id": "host-ref",
+        "title": "宿主 overview 视觉参考",
+        "type": "markdown",
+        "path": "../../resources/prd/energy-bi-host-ref/content.md"
+      }
+    ]
+  }
+}
@@ -0,0 +1,283 @@
+import type {
+  CostDim,
+  FleetScope,
+  H2OrderRow,
+  LeaseKind,
+  OpsKind,
+} from '../types';
+import { COST_DIM_LABEL, LEASE_KIND_LABEL, OPS_KIND_LABEL } from '../types';
+
+export function filterOrders(
+  rows: H2OrderRow[],
+  year: number,
+  verifyScope: 'all' | 'verified',
+  fleetScope: FleetScope,
+): H2OrderRow[] {
+  return rows.filter((r) => {
+    if (!r.occurredAt.startsWith(String(year))) return false;
+    if (verifyScope === 'verified' && r.verifyStatus !== 'verified') return false;
+    if (fleetScope === 'own' && r.fleet !== 'own') return false;
+    if (fleetScope === 'external' && r.fleet !== 'external') return false;
+    return true;
+  });
+}
+
+export function sumAmount(rows: H2OrderRow[]): number {
+  return rows.reduce((s, r) => s + r.amount, 0);
+}
+
+export function sumKg(rows: H2OrderRow[]): number {
+  return rows.reduce((s, r) => s + r.quantityKg, 0);
+}
+
+export function companyCostRows(rows: H2OrderRow[]): H2OrderRow[] {
+  return rows.filter((r) => r.borneBy === 'company');
+}
+
+export function dimAmount(rows: H2OrderRow[], dim: CostDim): number {
+  return sumAmount(companyCostRows(rows).filter((r) => r.costDim === dim));
+}
+
+export function leaseSubAmount(rows: H2OrderRow[], kind: LeaseKind): number {
+  return sumAmount(
+    companyCostRows(rows).filter((r) => r.costDim === 'lease' && r.leaseKind === kind),
+  );
+}
+
+export function opsSubAmount(rows: H2OrderRow[], kind: OpsKind): number {
+  return sumAmount(
+    companyCostRows(rows).filter((r) => r.costDim === 'ops' && r.opsKind === kind),
+  );
+}
+
+export interface DimCard {
+  key: CostDim;
+  label: string;
+  amount: number;
+  subs: { key: string; label: string; amount: number }[];
+}
+
+export function costDimCards(rows: H2OrderRow[]): DimCard[] {
+  return [
+    {
+      key: 'lease',
+      label: COST_DIM_LABEL.lease,
+      amount: dimAmount(rows, 'lease'),
+      subs: [
+        { key: 'company_borne', label: LEASE_KIND_LABEL.company_borne, amount: leaseSubAmount(rows, 'company_borne') },
+        { key: 'package_h2', label: LEASE_KIND_LABEL.package_h2, amount: leaseSubAmount(rows, 'package_h2') },
+      ],
+    },
+    {
+      key: 'logistics',
+      label: COST_DIM_LABEL.logistics,
+      amount: dimAmount(rows, 'logistics'),
+      subs: [],
+    },
+    {
+      key: 'ops',
+      label: COST_DIM_LABEL.ops,
+      amount: dimAmount(rows, 'ops'),
+      subs: [
+        { key: 'abnormal', label: OPS_KIND_LABEL.abnormal, amount: opsSubAmount(rows, 'abnormal') },
+        { key: 'transfer', label: OPS_KIND_LABEL.transfer, amount: opsSubAmount(rows, 'transfer') },
+      ],
+    },
+  ];
+}
+
+export function pendingAmount(rows: H2OrderRow[]): number {
+  return dimAmount(rows, 'pending');
+}
+
+export function unverified(rows: H2OrderRow[]): { amount: number; count: number } {
+  const list = rows.filter((r) => r.verifyStatus === 'unverified');
+  return { amount: sumAmount(list), count: list.length };
+}
+
+export function formatYuan(n: number): string {
+  return `¥${n.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
+}
+
+export function formatKg(n: number): string {
+  return `${n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })} kg`;
+}
+
+export function costDimLabel(row: H2OrderRow): string {
+  if (row.costDim === 'lease' && row.leaseKind) {
+    return `${COST_DIM_LABEL.lease} · ${LEASE_KIND_LABEL[row.leaseKind]}`;
+  }
+  if (row.costDim === 'ops' && row.opsKind) {
+    return `${COST_DIM_LABEL.ops} · ${OPS_KIND_LABEL[row.opsKind]}`;
+  }
+  return COST_DIM_LABEL[row.costDim];
+}
+
+export type DimFilter =
+  | { dim: CostDim; sub?: string }
+  | null;
+
+export function applyDimFilter(rows: H2OrderRow[], filter: DimFilter): H2OrderRow[] {
+  if (!filter) return rows;
+  return rows.filter((r) => {
+    if (r.borneBy !== 'company') return false;
+    if (r.costDim !== filter.dim) return false;
+    if (!filter.sub) return true;
+    if (filter.dim === 'lease') return r.leaseKind === filter.sub;
+    if (filter.dim === 'ops') return r.opsKind === filter.sub;
+    return true;
+  });
+}
+
+/** 统计/明细共用：维度筛后的我司成本行；无维度筛则全部我司行 */
+export function companyRowsForStats(rows: H2OrderRow[], filter: DimFilter): H2OrderRow[] {
+  if (!filter) return companyCostRows(rows);
+  return applyDimFilter(rows, filter);
+}
+
+export interface StationMonthRow {
+  stationId: string;
+  stationName: string;
+  month: string;
+  amount: number;
+  quantityKg: number;
+  unverifiedAmount: number;
+}
+
+export function stationMonthAgg(rows: H2OrderRow[]): StationMonthRow[] {
+  const map = new Map<string, H2OrderRow[]>();
+  rows.forEach((r) => {
+    const month = r.occurredAt.slice(0, 7);
+    const key = `${r.stationId}|${month}`;
+    const list = map.get(key) ?? [];
+    list.push(r);
+    map.set(key, list);
+  });
+  return Array.from(map.entries())
+    .map(([key, list]) => {
+      const [stationId, month] = key.split('|');
+      return {
+        stationId,
+        stationName: list[0].stationName,
+        month,
+        amount: sumAmount(list),
+        quantityKg: sumKg(list),
+        unverifiedAmount: sumAmount(list.filter((x) => x.verifyStatus === 'unverified')),
+      };
+    })
+    .sort((a, b) => b.amount - a.amount);
+}
+
+export interface CustomerAttrRow {
+  customerId: string;
+  customerName: string;
+  borneLabel: string;
+  quantityKg: number;
+  companyCost: number;
+  unverifiedAmount: number;
+}
+
+export function customerAttrAgg(rows: H2OrderRow[]): CustomerAttrRow[] {
+  const map = new Map<string, H2OrderRow[]>();
+  rows.forEach((r) => {
+    const list = map.get(r.customerId) ?? [];
+    list.push(r);
+    map.set(r.customerId, list);
+  });
+  return Array.from(map.entries())
+    .map(([customerId, list]) => {
+      const company = list.filter((x) => x.borneBy === 'company');
+      const customer = list.filter((x) => x.borneBy === 'customer');
+      let borneLabel = '混合';
+      if (company.length && !customer.length) borneLabel = '我司';
+      else if (customer.length && !company.length) borneLabel = '客户';
+      return {
+        customerId,
+        customerName: list[0].customerName,
+        borneLabel,
+        quantityKg: sumKg(list),
+        companyCost: sumAmount(company),
+        unverifiedAmount: sumAmount(list.filter((x) => x.verifyStatus === 'unverified')),
+      };
+    })
+    .sort((a, b) => b.companyCost - a.companyCost || b.quantityKg - a.quantityKg);
+}
+
+export const SOURCE_LABEL: Record<H2OrderRow['source'], string> = {
+  api: 'API',
+  manual: '补录',
+  fence: '围栏',
+};
+
+/** 总览 KPI：在宿主示意量级上按当前筛选（年/车辆/核对）等比缩放，保证卡片跟随顶栏筛选 */
+export function computeHostKpi(
+  filtered: H2OrderRow[],
+  year: number,
+  allOrders: H2OrderRow[],
+  base: {
+    totalKgT: number;
+    companyKgT: number;
+    customerKgT: number;
+    totalFeeWan: number;
+    companyFeeWan: number;
+    customerFeeWan: number;
+    profitWan: number;
+    incomeWan: number;
+    costWan: number;
+    monthKgT: number;
+    monthFeeWan: number;
+    monthYearPct: number;
+    dayKg: number;
+    dayFee: number;
+    dayMonthPct: number;
+  },
+) {
+  const round2 = (n: number) => Math.round(n * 100) / 100;
+  const baseline = filterOrders(allOrders, year, 'all', 'all');
+  const baseKg = sumKg(baseline) || 1;
+  const fKg = sumKg(filtered);
+  const ratio = fKg / baseKg;
+
+  const companyKg = sumKg(filtered.filter((r) => r.borneBy === 'company'));
+  const customerKg = sumKg(filtered.filter((r) => r.borneBy === 'customer'));
+  const split = companyKg + customerKg || 1;
+  const companyShare = companyKg / split;
+  const customerShare = customerKg / split;
+
+  const monthRows = filtered.filter((r) => r.occurredAt.startsWith(`${year}-08`));
+  const dayRows = filtered.filter((r) => r.occurredAt.startsWith(`${year}-08-08`));
+  const monthKg = sumKg(monthRows);
+  const dayKgVal = sumKg(dayRows);
+  const monthAmt = sumAmount(monthRows);
+  const dayAmt = sumAmount(dayRows);
+  const yearKg = fKg || 1;
+  const monthKgShare = monthKg / yearKg;
+  const dayMonthShare = monthKg > 0 ? dayKgVal / monthKg : 0;
+
+  const totalKgT = round2(base.totalKgT * ratio);
+  const totalFeeWan = round2(base.totalFeeWan * ratio);
+  const incomeWan = round2(base.incomeWan * ratio);
+  const costWan = round2(base.costWan * ratio);
+  const profitWan = round2(base.profitWan * ratio);
+  const monthKgT = round2(totalKgT * monthKgShare);
+  const monthFeeWan = round2(totalFeeWan * monthKgShare);
+
+  return {
+    totalKgT,
+    companyKgT: round2(totalKgT * companyShare),
+    customerKgT: round2(totalKgT * customerShare),
+    totalFeeWan,
+    companyFeeWan: round2(totalFeeWan * companyShare),
+    customerFeeWan: round2(totalFeeWan * customerShare),
+    profitWan,
+    incomeWan,
+    costWan,
+    monthKgT,
+    monthFeeWan,
+    monthYearPct: round2(monthKgShare * 100),
+    dayKg: round2(dayKgVal > 0 ? dayKgVal : base.dayKg * ratio * Math.max(dayMonthShare, 0.01)),
+    dayFee: Math.round(dayAmt > 0 ? dayAmt : base.dayFee * ratio * Math.max(dayMonthShare, 0.01)),
+    dayMonthPct: round2((dayMonthShare || base.dayMonthPct / 100) * 100),
+    profitRatePct: incomeWan > 0 ? round2((profitWan / incomeWan) * 100) : 0,
+  };
+}
@@ -0,0 +1,182 @@
+import type { H2OrderRow, StationPrepaid } from '../types';
+
+/** 辅助生成 200 条逼真高质量订单明细假数据 */
+function generate200MockOrders(): H2OrderRow[] {
+  const stations = [
+    { id: 'st-ln', name: '佛山南海羚牛加氢站' },
+    { id: 'st-dp', name: '东鹏大道甲醇制氢一体站' },
+    { id: 'st-jx', name: '嘉兴中石化滨海加氢站' },
+    { id: 'st-jj', name: '嘉兴嘉锦加氢站' },
+    { id: 'st-cd', name: '成都中石化天府机场高速北站加氢站' },
+    { id: 'st-gz', name: '广州黄埔高新区氢能示范加氢站' },
+    { id: 'st-sh', name: '上海安亭加氢站' },
+  ];
+
+  const ownPlates = [
+    '粤A99887', '粤B12001', '浙A52088', '浙F77881', '浙A88888F',
+    '浙A66666', '浙F11223', '浙F33445', '川A77889', '川B99001',
+    '沪A33219', '粤B88102', '浙F99812', '浙F66521', '粤A11029',
+  ];
+
+  const extPlates = [
+    '粤A77661', '浙F33211', '川A55432', '沪B98765', '粤B66554',
+    '浙A22334', '粤A99102', '川B88761', '无车牌(散车)',
+  ];
+
+  const customers = [
+    { id: 'c-ln', name: '羚牛自营', type: 'internal', deptId: 'd-ops', deptName: '运维中心' },
+    { id: 'c-bao', name: '包氢专线项目', type: 'internal', deptId: 'd-lease', deptName: '租赁业务一部' },
+    { id: 'c-lease-a', name: '嘉兴智奇供应链', type: 'internal', deptId: 'd-lease', deptName: '租赁业务一部' },
+    { id: 'c-log', name: '嘉兴益顺冷链', type: 'internal', deptId: 'd-log', deptName: '物流中心' },
+    { id: 'c-log2', name: '四川群彬物流', type: 'internal', deptId: 'd-log', deptName: '物流中心' },
+    { id: 'c-lease-b', name: '无锡铭康物流', type: 'internal', deptId: 'd-lease', deptName: '租赁业务二部' },
+    { id: 'c-ops', name: '运维调拨车辆', type: 'internal', deptId: 'd-ops', deptName: '运维中心' },
+    { id: 'c-pend', name: '待归属样本', type: 'internal', deptId: 'd-lease', deptName: '租赁业务一部' },
+    { id: 'c-ext-a', name: '广东氢动力', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
+    { id: 'c-ext-b', name: '广东清运专线', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
+    { id: 'c-ext-c', name: '东展供应链', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
+    { id: 'c-ext-d', name: '顺丰冷运专线', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
+    { id: 'c-ext-e', name: '极兔速递冷链', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
+  ];
+
+  const list: H2OrderRow[] = [];
+
+  // 生成 200 条记录
+  for (let i = 1; i <= 200; i++) {
+    const padId = String(i).padStart(3, '0');
+
+    // 年份分配: 1~145 (2026年), 146~185 (2025年), 186~200 (2024年)
+    let year = 2026;
+    let month = Math.floor((i % 8)) + 1; // 1~8月
+    if (i > 145 && i <= 185) {
+      year = 2025;
+      month = Math.floor((i % 12)) + 1;
+    } else if (i > 185) {
+      year = 2024;
+      month = Math.floor((i % 12)) + 1;
+    }
+
+    const day = (i * 7 % 28) + 1;
+    const hour = (i * 3 % 14) + 7;
+    const minute = (i * 11 % 50) + 5;
+
+    const mm = month < 10 ? `0${month}` : `${month}`;
+    const dd = day < 10 ? `0${day}` : `${day}`;
+    const hh = hour < 10 ? `0${hour}` : `${hour}`;
+    const min = minute < 10 ? `0${minute}` : `${minute}`;
+
+    const occurredAt = `${year}-${mm}-${dd} ${hh}:${min}`;
+    const station = stations[i % stations.length];
+    const customer = customers[i % customers.length];
+
+    const isOwn = customer.type === 'internal';
+    const fleet = isOwn ? 'own' : 'external';
+    const plateNo = isOwn
+      ? ownPlates[i % ownPlates.length]
+      : extPlates[i % extPlates.length];
+
+    // 单价 & 加氢量
+    const unitPrice = [28, 30, 32, 35][i % 4];
+    const quantityKg = Math.round((18 + (i * 3.7 % 85)) * 100) / 100;
+    const amount = Math.round(quantityKg * unitPrice);
+
+    // 成本维度与费用承担
+    let borneBy: 'company' | 'customer' = 'company';
+    let costDim: 'lease' | 'logistics' | 'ops' | 'pending' = 'lease';
+    let leaseKind: 'company_borne' | 'package_h2' | undefined = undefined;
+    let opsKind: 'abnormal' | 'transfer' | undefined = undefined;
+
+    if (customer.id === 'c-ext-a' || customer.id === 'c-ext-d') {
+      borneBy = 'customer';
+    }
+
+    const dimType = i % 5;
+    if (dimType === 0) {
+      costDim = 'lease';
+      leaseKind = 'company_borne';
+    } else if (dimType === 1) {
+      costDim = 'lease';
+      leaseKind = 'package_h2';
+    } else if (dimType === 2) {
+      costDim = 'logistics';
+    } else if (dimType === 3) {
+      costDim = 'ops';
+      opsKind = i % 2 === 0 ? 'abnormal' : 'transfer';
+    } else {
+      costDim = 'pending';
+    }
+
+    // 核对状态与数据来源
+    const verifyStatus = isOwn ? (i % 4 === 0 ? 'unverified' : 'verified') : 'unverified';
+    const source = isOwn
+      ? (i % 3 === 0 ? 'manual' : i % 3 === 1 ? 'fence' : 'api')
+      : (i % 2 === 0 ? 'api' : 'manual');
+
+    list.push({
+      id: `HO-${String(year).slice(2)}${mm}-${padId}`,
+      occurredAt,
+      stationId: station.id,
+      stationName: station.name,
+      plateNo,
+      customerId: customer.id,
+      customerName: customer.name,
+      deptId: customer.deptId,
+      deptName: customer.deptName,
+      amount,
+      quantityKg,
+      unitPrice,
+      borneBy,
+      costDim,
+      leaseKind,
+      opsKind,
+      verifyStatus,
+      source,
+      fleet,
+    });
+  }
+
+  return list;
+}
+
+/** 假数：200 条订单明细（三维度成本拆分） */
+export const MOCK_ORDERS: H2OrderRow[] = generate200MockOrders();
+
+export const MOCK_PREPAID: StationPrepaid[] = [
+  {
+    stationId: 'st-jx',
+    stationName: '嘉兴中石化滨海加氢站',
+    openingBalance: 120000,
+    openingAnchorLabel: '2025 年末财务期末',
+    recharge: 80000,
+    consume: 95000,
+  },
+  {
+    stationId: 'st-jj',
+    stationName: '嘉兴嘉锦加氢站',
+    openingBalance: null,
+    openingAnchorLabel: null,
+    recharge: 40000,
+    consume: 28000,
+  },
+];
+
+/** 宿主总览 KPI（与 zip content 同量级示意，只读壳） */
+export const HOST_KPI = {
+  totalKgT: 697.16,
+  companyKgT: 468.28,
+  customerKgT: 228.88,
+  totalFeeWan: 2093.71,
+  companyFeeWan: 1362.85,
+  customerFeeWan: 730.87,
+  profitWan: 13.01,
+  incomeWan: 743.88,
+  costWan: 2093.71,
+  monthKgT: 16.67,
+  monthFeeWan: 50.36,
+  monthYearPct: 2.4,
+  dayKg: 181.78,
+  dayFee: 6533,
+  dayMonthPct: 1.1,
+};
+
+export const DEFAULT_YEAR = 2026;
@@ -0,0 +1,50 @@
+/**
+ * @name 能源氢费经营看板
+ * @description 嵌入 bi-next #hydrogen/overview · 我司成本三维度（非 OneOS V2） · 口令 lingniu
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  type AnnotationSourceDocument,
+  type AnnotationViewerOptions,
+} from '@axhub/annotation';
+import { PrototypeAnnotationHost } from '../../common/prototype-annotation-host';
+import { clearHostPrototypeRouteInfo } from '../../common/useHashPage';
+import { EnergyBiAccessGate, isEnergyBiAuthed } from './EnergyBiAccessGate';
+import { EnergyBiBoardApp } from './EnergyBiBoardApp';
+import annotationSourceDocument from './annotation-source.json';
+
+function AuthedEnergyBiBoard() {
+  const [ok, setOk] = useState(() => isEnergyBiAuthed());
+  if (!ok) return <EnergyBiAccessGate onOk={() => setOk(true)} />;
+  return <EnergyBiBoardApp />;
+}
+
+export default function EnergyH2BiBoardEntry() {
+  useEffect(() => {
+    clearHostPrototypeRouteInfo();
+  }, []);
+
+  const annotationOptions = useMemo<AnnotationViewerOptions>(
+    () => ({ title: '能源氢费经营看板' }),
+    [],
+  );
+
+  return (
+    <PrototypeAnnotationHost
+      source={annotationSourceDocument as unknown as AnnotationSourceDocument}
+      options={annotationOptions}
+    >
+      <AuthedEnergyBiBoard />
+    </PrototypeAnnotationHost>
+  );
+}
+
+if (typeof document !== 'undefined') {
+  const container = document.getElementById('root');
+  if (container && !container.dataset.energyH2BiBoardMounted) {
+    container.dataset.energyH2BiBoardMounted = '1';
+    const root = createRoot(container);
+    root.render(<EnergyH2BiBoardEntry />);
+  }
+}
@@ -0,0 +1,44 @@
+{
+  "version": 1,
+  "format": "axhub-published-source",
+  "sourceRoot": "source",
+  "entry": "index.tsx",
+  "files": [
+    {
+      "path": "annotation-source.json",
+      "kind": "source"
+    },
+    {
+      "path": "data/aggregates.ts",
+      "kind": "source"
+    },
+    {
+      "path": "data/mockBoard.ts",
+      "kind": "source"
+    },
+    {
+      "path": "data/mockDaily.ts",
+      "kind": "source"
+    },
+    {
+      "path": "EnergyBiAccessGate.tsx",
+      "kind": "source"
+    },
+    {
+      "path": "EnergyBiBoardApp.tsx",
+      "kind": "source"
+    },
+    {
+      "path": "index.tsx",
+      "kind": "entry"
+    },
+    {
+      "path": "styles/energy-bi-board.css",
+      "kind": "source"
+    },
+    {
+      "path": "types.ts",
+      "kind": "source"
+    }
+  ]
+}
@@ -0,0 +1,64 @@
+/** 能源 BI · 氢能总览嵌入功能 · 类型（宿主 bi-next #hydrogen/overview，非 OneOS V2） */
+
+/** 我司成本三维度（本尊 2026-08-07） */
+export type CostDim = 'lease' | 'logistics' | 'ops' | 'pending';
+
+/** 租赁成本二级 */
+export type LeaseKind = 'company_borne' | 'package_h2';
+
+/** 运维成本二级 */
+export type OpsKind = 'abnormal' | 'transfer';
+
+export type VerifyStatus = 'verified' | 'unverified';
+export type BorneBy = 'company' | 'customer';
+export type FleetScope = 'own' | 'external' | 'all';
+/** 按日 | 总览（站日报 / 现结登记已拆独立模块） */
+export type HostView = 'daily' | 'overview';
+
+export interface H2OrderRow {
+  id: string;
+  occurredAt: string;
+  stationId: string;
+  stationName: string;
+  plateNo: string;
+  customerId: string;
+  customerName: string;
+  deptId: string;
+  deptName: string;
+  amount: number;
+  quantityKg: number;
+  unitPrice: number;
+  borneBy: BorneBy;
+  costDim: CostDim;
+  leaseKind?: LeaseKind;
+  opsKind?: OpsKind;
+  verifyStatus: VerifyStatus;
+  source: 'api' | 'manual' | 'fence';
+  fleet: 'own' | 'external';
+}
+
+export interface StationPrepaid {
+  stationId: string;
+  stationName: string;
+  openingBalance: number | null;
+  openingAnchorLabel: string | null;
+  recharge: number;
+  consume: number;
+}
+
+export const COST_DIM_LABEL: Record<CostDim, string> = {
+  lease: '租赁成本',
+  logistics: '物流成本',
+  ops: '运维成本',
+  pending: '待归属',
+};
+
+export const LEASE_KIND_LABEL: Record<LeaseKind, string> = {
+  company_borne: '我司承担',
+  package_h2: '包氢项目',
+};
+
+export const OPS_KIND_LABEL: Record<OpsKind, string> = {
+  abnormal: '异动',
+  transfer: '调拨',
+};
@@ -0,0 +1,905 @@
+/* Exact station-overview primitives carried from the supplied prototype. */
+.ehb-shell--station-daily,
+.sd-embedded {
+  --sd-ink: #0f172a;
+  --sd-muted: #64748b;
+  --sd-tertiary: #94a3b8;
+  --sd-line: rgba(15, 23, 42, 0.08);
+  --sd-cyan: #2563eb;
+  --sd-cyan-soft: #eff6ff;
+  --sd-surface: #fff;
+  --sd-font:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
+    "Microsoft YaHei", "Noto Sans SC", sans-serif;
+  --sd-mono:
+    "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", ui-monospace,
+    monospace;
+  color: #1e293b;
+  font-family: var(--sd-font);
+}
+.sd-embedded {
+  margin-top: 4px;
+  width: 100%;
+  min-width: 0;
+}
+.sd-topbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+.sd-topbar--embedded {
+  margin-bottom: 14px;
+}
+.sd-topbar__updated {
+  margin: 4px 0 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: #94a3b8;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--sd-mono);
+}
+.sd-topbar__tools {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.sd-date {
+  position: relative;
+  display: inline-block;
+}
+.sd-date--right .sd-date__popover {
+  left: auto;
+  right: 0;
+}
+.sd-date__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  height: 30px;
+  padding: 0 10px 0 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  background: #fff;
+  color: var(--sd-ink);
+  cursor: pointer;
+}
+.sd-date__trigger:hover,
+.sd-date__trigger.is-open {
+  border-color: #2563eb;
+  background: #fff;
+  box-shadow: 0 0 0 2px #2563eb1f;
+}
+
+.sd-date__trigger:focus-visible,
+.sd-btn:focus-visible,
+.sd-hero-kpi--click:focus-visible,
+.sd-share-seg:focus-visible,
+.sd-share-legend__btn:focus-visible,
+.sd-station-row:focus-visible,
+.sd-board-mode > button[role="tab"]:focus-visible,
+.sd-board-station-select:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.72);
+  outline-offset: 2px;
+}
+.sd-date__label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sd-muted);
+}
+.sd-date__value {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--sd-mono);
+  font-variant-numeric: tabular-nums;
+  color: #0f172a;
+}
+.sd-date__icon {
+  color: #94a3b8;
+  flex-shrink: 0;
+}
+.sd-date__popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 40;
+  width: 300px;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background: #fff;
+  box-shadow:
+    0 18px 40px -18px #0f172a47,
+    0 8px 16px -10px #0284c72e;
+}
+.sd-date__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
+.sd-date__title { font-size:14px; font-weight:800; color:var(--sd-ink); letter-spacing:-.02em; }
+.sd-date__nav { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:none; border-radius:8px; background:#f1f5f9; color:#475569; cursor:pointer; }
+.sd-date__week { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; text-align:center; font-size:11px; font-weight:700; color:#94a3b8; }
+.sd-date__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
+.sd-date__day { display:inline-flex; align-items:center; justify-content:center; height:32px; border:none; border-radius:8px; background:transparent; color:#334155; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; }
+.sd-date__day.is-empty { cursor:default; pointer-events:none; }.sd-date__day.is-selected { background:var(--sd-cyan); color:#fff; font-weight:800; box-shadow:0 6px 14px -6px #0284c78c; }.sd-date__day.is-in-range:not(.is-selected) { background:#dbeafe; color:#1e40af; border-radius:0; }
+.sd-date__range-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }.sd-date__range-tabs button { min-height:32px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#64748b; font-size:11px; font-weight:600; font-family:var(--sd-mono); cursor:pointer; padding:4px 6px; }.sd-date__range-tabs button.is-on { border-color:#2563eb; color:#1d4ed8; background:#eff6ff; box-shadow:0 0 0 2px #2563eb1a; }
+.sd-date__today { border:none; background:transparent; color:var(--sd-cyan); font-size:12px; font-weight:700; cursor:pointer; padding:4px 6px; border-radius:6px; }.sd-date__apply { margin-left:auto; }
+.sd-date__shortcuts {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.sd-date__shortcuts button {
+  flex: 1;
+  height: 28px;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.sd-date__shortcuts button:hover {
+  border-color: #93c5fd;
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+.sd-date__range-fields {
+  display: grid;
+  gap: 8px;
+}
+.sd-date__range-fields label {
+  display: grid;
+  grid-template-columns: 62px 1fr;
+  align-items: center;
+  gap: 8px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+}
+.sd-date__range-fields input {
+  height: 30px;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  padding: 0 7px;
+  color: #0f172a;
+  background: #fff;
+  font: 600 12px var(--sd-mono);
+}
+.sd-date__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid #eef2f7;
+}
+.sd-date__footer--range {
+  justify-content: space-between;
+  align-items: center;
+  color: #64748b;
+  font: 500 11px var(--sd-mono);
+}
+
+/* Station detail: kept in the same DOM/class hierarchy as the supplied prototype. */
+.sd-detail-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
+.sd-detail-top__lead { display:flex; align-items:flex-start; gap:12px; }
+.sd-detail-top__title { margin:0; font-size:16px; font-weight:700; color:var(--sd-ink); letter-spacing:-.01em; }
+.sd-detail-top__meta { margin:4px 0 0; font-size:12px; color:var(--sd-muted); font-family:var(--sd-mono); font-variant-numeric:tabular-nums; }
+.sd-detail-top__updated { margin:4px 0 0; font-size:12px; font-weight:500; color:#94a3b8; font-variant-numeric:tabular-nums; font-family:var(--sd-mono); }
+.sd-detail-top__tools { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
+.sd-hero-kpis--detail { margin-bottom:16px; }
+.sd-unit { margin-left:2px; font-size:11px; font-weight:500; color:var(--sd-muted); font-family:var(--sd-font); }
+.sd-panel { background:#fff; border:1px solid var(--sd-line); border-radius:10px; padding:12px 14px; box-shadow:none; min-width:0; }
+.sd-panel--block { width:100%; margin-top:16px; }
+.sd-panel__title { margin:0; font-size:14px; font-weight:700; color:var(--sd-ink); letter-spacing:-.01em; }
+.sd-panel__head-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
+.sd-table-scroll { overflow-x:auto; overflow-y:visible; margin-top:8px; max-width:100%; -webkit-overflow-scrolling:touch; }
+.sd-table-scroll--matrix { border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
+.sd-bi-table { width:100%; border-collapse:separate; border-spacing:0; text-align:left; font-size:13px; min-width:0; }
+.sd-bi-table th { font-size:12px; font-weight:500; color:var(--sd-muted); padding:8px 12px; border-bottom:1px solid var(--sd-line); white-space:nowrap; background:#f8fafc; text-align:left; }
+.sd-bi-table td { font-size:13px; font-weight:400; color:#334155; padding:8px 12px; border-bottom:1px solid var(--sd-line); white-space:nowrap; vertical-align:middle; }
+.sd-bi-table tr:last-child td { border-bottom:none; }
+.sd-bi-table td.is-num,.sd-bi-table th.is-num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--sd-mono); font-size:12px; }
+.sd-bi-table tr:hover td { background:#f8fafc; }
+.sd-bi-table tr.is-total td { font-weight:700; background:#f8fafc; color:#0f172a; }
+.sd-table-more { padding:8px !important; text-align:center; background:#f8fafc; }
+.sd-table-more button { border:1px dashed #bfdbfe; border-radius:5px; padding:4px 12px; background:#fff; color:#0284c7; font-size:12px; font-weight:700; cursor:pointer; }
+.sd-table-more button:hover { background:#eff6ff; }
+.sd-bi-table .is-mono { font-family:var(--sd-mono); font-size:12px; color:#475569; }
+.sd-bi-table--fill { width:100%; min-width:100%; }
+.sd-bi-table--matrix { width:max(100%,1080px); min-width:100%; table-layout:auto; }
+.sd-bi-table--matrix th:first-child,.sd-bi-table--matrix td:first-child { position:sticky; left:0; z-index:2; background:#fff; min-width:168px; max-width:220px; white-space:normal; word-break:break-word; box-shadow:4px 0 8px -6px #0f172a2e; }
+.sd-bi-table--matrix thead th:first-child { z-index:3; background:#f8fafc; }
+.sd-bi-table--matrix tr.is-total td:first-child,.sd-bi-table--matrix tr:hover td:first-child { background:#f8fafc; }
+.sd-bi-table--matrix th.is-num,.sd-bi-table--matrix td.is-num { min-width:72px; padding-left:6px; padding-right:8px; text-align:right; }
+.sd-bi-table--matrix.is-amount th.is-num,.sd-bi-table--matrix.is-amount td.is-num { min-width:92px; font-size:12px; }
+.is-stock-up { color:#ef4444 !important; font-weight:700; }
+.is-stock-down { color:#10b981 !important; font-weight:700; }
+.is-stock-flat { color:#64748b; }
+.sd-delta { display:inline-block; margin-left:3px; font-size:10px; line-height:1; vertical-align:middle; }
+.sd-trend { position:relative; margin-top:8px; }
+.sd-trend-legend-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#64748b; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.sd-trend-legend-dot { width:8px; height:8px; border-radius:2px; background:#2563eb; flex:0 0 auto; display:inline-block; }
+.sd-trend--fill { display:flex; align-items:flex-end; gap:6px; width:100%; min-height:220px; padding:12px 4px 4px; box-sizing:border-box; }
+.sd-trend__col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
+.sd-trend__val { font-size:11px; color:#64748b; font-variant-numeric:tabular-nums; font-family:var(--sd-mono); }
+.sd-trend__bar-wrap { width:100%; height:140px; display:flex; align-items:flex-end; justify-content:center; }
+.sd-trend__bar { width:min(42px,70%); border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#60a5fa,#2563eb); }
+.sd-trend__date { font-size:10px; color:#94a3b8; font-family:var(--sd-mono); font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.02em; }
+.sd-trend__col.is-hover .sd-trend__bar { filter:brightness(1.08); outline:2px solid rgba(37,99,235,.35); }
+.sd-trend-tip { position:absolute; top:8px; right:12px; z-index:5; min-width:220px; max-width:320px; padding:10px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fffffff5; box-shadow:0 8px 20px #0f172a1f; pointer-events:none; }
+.sd-trend-tip__date { font-size:12px; font-weight:700; color:#0f172a; font-family:var(--sd-mono); margin-bottom:6px; }
+.sd-trend-tip__row { display:flex; align-items:center; gap:6px; font-size:12px; color:#334155; }
+.sd-trend-tip__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.sd-trend-tip__row strong { font-family:var(--sd-mono); font-variant-numeric:tabular-nums; color:#0f172a; white-space:nowrap; }
+.sd-trend-tip__sub { margin-top:4px; font-size:11px; color:#94a3b8; }
+.sd-msel { position:relative; flex:0 0 auto; }
+.sd-msel__trigger { display:inline-flex; align-items:center; gap:8px; height:30px; max-width:280px; padding:0 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; cursor:pointer; color:#0f172a; }
+.sd-msel.is-open .sd-msel__trigger,.sd-msel__trigger:hover { border-color:#2563eb; box-shadow:0 0 0 2px #2563eb1f; }
+.sd-msel__label { font-size:12px; font-weight:500; color:#64748b; flex:0 0 auto; }
+.sd-msel__value { font-size:12px; font-weight:600; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
+.sd-msel__chev { color:#94a3b8; flex:0 0 auto; }
+.sd-msel__panel { position:absolute; top:calc(100% + 6px); right:0; z-index:40; width:min(320px,80vw); max-height:320px; display:flex; flex-direction:column; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 12px 28px #0f172a1f; overflow:hidden; }
+.sd-msel__search { padding:10px 10px 6px; }
+.sd-msel__search input { width:100%; height:32px; border:1px solid #e2e8f0; border-radius:8px; padding:0 10px; font-size:12px; box-sizing:border-box; }
+.sd-msel__actions { display:flex; gap:8px; padding:0 10px 8px; }
+.sd-msel__actions button { border:none; background:#f1f5f9; color:#334155; font-size:12px; font-weight:600; height:26px; padding:0 10px; border-radius:999px; cursor:pointer; }
+.sd-msel__list { list-style:none; margin:0; padding:0 0 8px; overflow:auto; flex:1; }
+.sd-msel__opt { width:100%; display:flex; align-items:flex-start; gap:8px; padding:8px 12px; border:none; background:transparent; cursor:pointer; text-align:left; }
+.sd-msel__opt:hover { background:#f8fafc; }.sd-msel__opt.is-on { background:#eff6ff; }
+.sd-msel__check { width:16px; height:16px; border-radius:4px; border:1px solid #cbd5e1; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:1px; color:#fff; background:#fff; }
+.sd-msel__opt.is-on .sd-msel__check { background:#2563eb; border-color:#2563eb; }
+.sd-msel__name { font-size:12px; color:#334155; line-height:1.35; }.sd-msel__empty { padding:16px; text-align:center; color:#94a3b8; font-size:12px; }
+.sd-dual { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:16px; }
+.sd-dual--cash { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
+.sd-panel--grow { min-width:0; }
+.sd-table-scroll--cash-lines { max-height:420px; overflow:auto; }
+.sd-bi-table--ledger { width:100%; min-width:520px; }
+.sd-bi-table--ledger td:first-child,.sd-bi-table--ledger th:first-child { white-space:normal; word-break:break-word; max-width:160px; }
+.sd-more-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; width:100%; margin-top:10px; height:32px; border:1px dashed #cbd5e1; border-radius:8px; background:#f8fafc; color:#475569; font-size:12px; font-weight:600; cursor:pointer; }
+.sd-more-btn:hover { border-color:#93c5fd; color:#2563eb; background:#eff6ff; }
+.sd-pending-row td { height:110px; color:#94a3b8; text-align:center; font-size:12px; background:#fff; }
+@media (max-width:767px) { .sd-detail-top__tools{width:100%;}.sd-detail-top__tools .sd-date{flex:1;}.sd-detail-top__tools .sd-date__trigger{width:100%;justify-content:space-between;}.sd-panel__head-row{flex-direction:column;align-items:stretch;}.sd-msel__trigger{max-width:none;width:100%;}.sd-msel__panel{left:0;right:0;width:auto;}.sd-trend__date{font-size:9px;} }
+@media (max-width:1024px) { .sd-dual--cash { grid-template-columns:minmax(0,1fr); } }
+.sd-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 30px;
+  min-height: 30px;
+  padding: 0 11px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--sd-line);
+  background: #fff;
+  color: #1e293b;
+}
+.sd-btn--ghost {
+  background: #fff;
+  border-color: var(--sd-line);
+  color: var(--sd-muted);
+}
+.sd-btn--ghost:hover {
+  border-color: #2563eb59;
+  color: #2563eb;
+}
+.sd-hero-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.sd-hero-kpi {
+  position: relative;
+  background: #fff;
+  border: 1px solid var(--sd-line);
+  border-radius: 10px;
+  padding: 10px 12px;
+  box-shadow: none;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.sd-hero-kpi--click {
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+.sd-hero-kpi--click:hover,
+.sd-station-row:hover {
+  border-color: #93c5fd;
+  box-shadow: 0 0 0 2px #2563eb14;
+}
+.sd-hero-kpi__label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sd-muted);
+  margin-bottom: 4px;
+}
+.sd-hero-kpi__value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #0f172a;
+  font-family: var(--sd-mono);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+.sd-hero-kpi__sub {
+  margin-top: auto;
+  font-size: 11px;
+  color: var(--sd-muted);
+  font-family: var(--sd-mono);
+  font-variant-numeric: tabular-nums;
+  background: #f8fafc;
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+.sd-share-panel {
+  background: #fff;
+  border: 1px solid var(--sd-line);
+  border-radius: 10px;
+  padding: 12px 14px;
+  margin-bottom: 12px;
+}
+.sd-share-panel__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.sd-share-panel__title,
+.sd-section-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e293b;
+}
+.sd-share-panel__title {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.sd-share-panel__range {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sd-muted);
+  font-family: var(--sd-mono);
+  font-variant-numeric: tabular-nums;
+}
+.sd-share-panel__total {
+  font-size: 11px;
+  color: var(--sd-muted);
+  font-family: var(--sd-mono);
+}
+.sd-share-panel__total strong {
+  color: var(--sd-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+.sd-share-track {
+  display: flex;
+  gap: 2px;
+  min-height: 44px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.sd-share-seg {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  min-width: 48px;
+  padding: 8px 12px;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  text-align: left;
+}
+.sd-share-seg--0 {
+  background: #2563eb;
+}
+.sd-share-seg--1 {
+  background: #0ea5e9;
+}
+.sd-share-seg--2 {
+  background: #6366f1;
+}
+.sd-share-seg--3 {
+  background: #8b5cf6;
+}
+.sd-share-seg--4 {
+  background: #f59e0b;
+}
+.sd-share-seg__pct {
+  font-size: 13px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--sd-mono);
+  line-height: 1;
+  flex: 0 0 auto;
+}
+.sd-share-seg__name {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.92;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sd-share-legend {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 0;
+  row-gap: 6px;
+}
+.sd-share-legend > li:nth-child(odd) {
+  padding-right: 18px;
+  border-right: 1px solid var(--sd-line);
+}
+.sd-share-legend > li:nth-child(even) {
+  padding-left: 18px;
+}
+.sd-share-legend__btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 4px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 8px;
+}
+.sd-share-legend__swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex: 0 0 auto;
+}
+.sd-share-legend__rank {
+  min-width: 12px;
+  color: var(--sd-muted);
+  font-family: var(--sd-mono);
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.sd-share-legend__name {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(22vw, 240px);
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sd-share-legend__val {
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--sd-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.sd-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.sd-board-mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.sd-board-mode > button[role="tab"] {
+  height: 28px;
+  min-height: 28px;
+  padding: 0 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  background: #fff;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.sd-board-mode > button[role="tab"].is-on {
+  border-color: #2563eb;
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+.sd-board-station-select {
+  height: 28px;
+  min-height: 28px;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  padding: 0 8px;
+  font-size: 12px;
+  color: #0f172a;
+  background: #fff;
+  max-width: 180px;
+}
+.sd-station-single-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.sd-station-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.sd-station-group {
+  min-width: 0;
+}
+.sd-station-group__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+.sd-station-group__head h3 {
+  margin: 0;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 700;
+}
+.sd-station-group__head span {
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.sd-station-group__empty {
+  display: flex;
+  align-items: center;
+  min-height: 52px;
+  margin: 0;
+  padding: 0 14px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 500;
+}
+.sd-station-row {
+  width: 100%;
+  border: 1px solid var(--sd-line);
+  border-radius: 10px;
+  background: #fff;
+  padding: 12px 14px;
+  cursor: pointer;
+  text-align: left;
+}
+.sd-station-row__main {
+  display: grid;
+  grid-template-columns:
+    auto minmax(120px, 1.2fr) minmax(100px, 0.8fr) minmax(280px, 2fr)
+    auto;
+  gap: 12px 16px;
+  align-items: center;
+}
+.sd-station-card__icon {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #eff6ff;
+  color: #2563eb;
+}
+.sd-station-card__name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--sd-ink);
+  line-height: 1.35;
+}
+.sd-station-card__region {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sd-muted);
+}
+.sd-spark {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 48px;
+  padding: 4px 2px 0;
+}
+.sd-spark--empty {
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px dashed #e2e8f0;
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 500;
+}
+.sd-spark--empty:after {
+  content: "本区间无加氢量";
+}
+.sd-spark__col {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+.sd-spark__bar {
+  width: 100%;
+  border-radius: 3px 3px 1px 1px;
+  background: linear-gradient(180deg, #60a5fa, #2563eb);
+  min-height: 3px;
+}
+.sd-station-row__metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+.sd-station-row__metrics > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.sd-station-card__m-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--sd-muted);
+  margin-bottom: 2px;
+}
+.sd-station-row__metrics strong {
+  font-size: 13px;
+  font-weight: 700;
+  font-family: var(--sd-mono);
+  font-variant-numeric: tabular-nums;
+  color: #0f172a;
+}
+.sd-station-row__metrics strong span {
+  margin-left: 2px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--sd-muted);
+  font-family: var(--sd-font);
+}
+.sd-station-card__share {
+  font-size: 12px;
+  font-weight: 700;
+  color: #2563eb;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--sd-mono);
+}
+.sd-station-card__go {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sd-cyan);
+  background: var(--sd-cyan-soft);
+}
+@media (max-width: 900px) {
+  .sd-hero-kpis {
+    grid-template-columns: 1fr 1fr;
+  }
+  .sd-station-row__main {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .sd-station-row__main > .sd-spark {
+    flex: 1 1 140px;
+  }
+  .sd-station-row__metrics {
+    flex: 1 1 100%;
+  }
+}
+@media (max-width: 560px) {
+  .sd-hero-kpis {
+    grid-template-columns: 1fr;
+  }
+  .sd-hero-kpi__value {
+    font-size: 18px;
+  }
+  .sd-station-row__metrics {
+    grid-template-columns: 1fr 1fr;
+  }
+  .sd-share-legend {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 触屏窄屏：保留 2×2 指标密度，并将时间与站点操作变成明确的纵向分组。 */
+@media (max-width: 560px) {
+  .sd-topbar,
+  .sd-topbar--embedded {
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .sd-topbar__updated {
+    margin: 0;
+    font-size: 11px;
+  }
+
+  .sd-topbar__tools {
+    width: 100%;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sd-date {
+    min-width: 0;
+    flex: 1 1 220px;
+  }
+
+  .sd-date__trigger {
+    width: 100%;
+    min-width: 0;
+    min-height: 40px;
+    height: 40px;
+    justify-content: flex-start;
+    padding: 0 8px;
+  }
+
+  .sd-date__label {
+    display: none;
+  }
+
+  .sd-date__value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+  }
+
+  .sd-date__popover,
+  .sd-date--right .sd-date__popover {
+    position: fixed;
+    right: 12px;
+    /* Shell 的移动端底部导航为固定层，日期弹层必须避开它。 */
+    bottom: calc(72px + env(safe-area-inset-bottom));
+    left: 12px;
+    top: auto;
+    width: auto;
+    max-width: none;
+    max-height: calc(100dvh - 84px);
+    overflow: auto;
+  }
+
+  .sd-date__shortcuts button,
+  .sd-date__range-fields input,
+  .sd-btn {
+    min-height: 40px;
+    height: 40px;
+  }
+
+  .sd-hero-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .sd-hero-kpi {
+    min-height: 88px;
+    padding: 10px;
+  }
+
+  .sd-hero-kpi__label,
+  .sd-hero-kpi__sub {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sd-hero-kpi__value {
+    font-size: 18px;
+  }
+
+  .sd-share-panel {
+    padding: 12px;
+  }
+
+  .sd-share-panel__head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .sd-share-panel__total {
+    align-self: flex-end;
+  }
+
+  .sd-section-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .sd-board-mode {
+    width: 100%;
+  }
+
+  .sd-board-mode > button[role="tab"] {
+    flex: 0 0 auto;
+    min-height: 40px;
+  }
+
+  .sd-board-station-select {
+    min-height: 40px;
+    max-width: 100%;
+    flex: 1 1 140px;
+  }
+
+  .sd-station-row {
+    min-height: 56px;
+    padding: 12px;
+  }
+
+  .sd-station-card__name {
+    font-size: 13px;
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .sd-date__trigger:active,
+  .sd-btn:active,
+  .sd-hero-kpi--click:active,
+  .sd-share-seg:active,
+  .sd-share-legend__btn:active,
+  .sd-station-row:active,
+  .sd-board-mode > button[role="tab"]:active {
+    transform: scale(0.985);
+    filter: brightness(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-date__trigger,
+  .sd-btn,
+  .sd-hero-kpi--click,
+  .sd-share-seg,
+  .sd-share-legend__btn,
+  .sd-station-row,
+  .sd-board-mode > button[role="tab"] {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+@media (max-width: 359px) {
+  .sd-hero-kpis {
+    grid-template-columns: 1fr;
+  }
+}
@@ -0,0 +1,268 @@
+export type H2BiScope = "global" | "station";
+export type H2BiView = "overview" | "daily";
+export type H2BiVehicleScope = "all" | "lingniu" | "external";
+export type H2BiVerifyScope = "all" | "verified";
+/** 账本 settlement_type 的承担口径；下钻、KPI 与趋势图必须使用同一口径。 */
+export type H2BiAmountScope = "all" | "customer" | "company" | "other";
+export type H2BiRegionGranularity = "province" | "city";
+
+export interface H2BiQuery {
+  year: number;
+  startDate?: string;
+  endDate?: string;
+  date?: string;
+  month?: string;
+  stationId?: string | number | null;
+  customerId?: number | null;
+  customerName?: string | null;
+  plateNo?: string | null;
+  region?: string | null;
+  regionGranularity?: H2BiRegionGranularity;
+  vehicleScope: H2BiVehicleScope;
+  verifyScope: H2BiVerifyScope;
+}
+
+export interface H2BiRange {
+  startDate: string | null;
+  endDate: string | null;
+}
+
+export interface H2BiWatermark {
+  ledgerAt: string | null;
+  paymentAt: string | null;
+}
+
+export interface H2BiStationOption {
+  id: string | number;
+  name: string;
+}
+
+export interface H2BiMetaResponse {
+  years: Array<{ value: number; startDate: string; endDate: string }>;
+  stations: H2BiStationOption[];
+  watermark: H2BiWatermark;
+}
+
+export interface H2BiKpis {
+  totalKg: number;
+  totalCost: number;
+  /** 加氢量：账本 settlement_type=1（客户承担）。 */
+  customerBearingKg: number;
+  /** 加氢量：账本 settlement_type=2（我司承担）。 */
+  companyBearingKg: number;
+  /** 加氢量：其他承担方式（含客户自行结算、未知）。 */
+  otherBearingKg: number;
+  /** 对客金额：账本 settlement_type=1 的 fee_total。 */
+  customerRevenue: number;
+  /** 成本金额：账本 settlement_type=1 的 cost_total。 */
+  customerCost: number;
+  /** 成本金额：账本 settlement_type=2 的 cost_total。 */
+  companyCost: number;
+  /** 成本金额：其他承担方式的 cost_total。 */
+  otherCost: number;
+  totalRevenue: number;
+  customerGrossProfit: number;
+  monthKg: number;
+  monthCost: number;
+  todayKg: number;
+  todayCost: number;
+  monthShareOfRange: number;
+  todayShareOfMonth: number;
+  recordCount: number;
+  stationCount: number;
+}
+
+export interface H2BiMonthlyPoint {
+  month: string;
+  totalKg: number;
+  lingniuKg: number;
+  externalKg: number;
+  cost: number;
+  customerCost: number;
+  companyCost: number;
+  otherCost: number;
+  revenue: number;
+  customerRevenue: number;
+  customerGrossProfit: number;
+}
+
+export interface H2BiRegionRow {
+  region: string;
+  kg: number;
+  share: number;
+}
+
+export interface H2BiStationRow {
+  rank?: number;
+  id: string | number | null;
+  name: string;
+  province: string | null;
+  city: string | null;
+  kg: number;
+  lingniuKg: number;
+  externalKg: number;
+  cost: number;
+  revenue: number;
+  /** 对客金额：账本 settlement_type=1 的 fee_total。 */
+  customerRevenue: number;
+  customerCost: number;
+  companyCost: number;
+  otherCost: number;
+  recordCount: number;
+  customerCount: number;
+  share: number;
+}
+
+export interface H2BiCustomerRow {
+  rank?: number;
+  id: number | null;
+  name: string;
+  kg: number;
+  /** 加氢订单中账本 settlement_type=1（客户承担）的量。 */
+  customerBearingKg: number;
+  /** 加氢订单中账本 settlement_type=2（我司承担）的量。 */
+  companyBearingKg: number;
+  /** 其他承担方式（含客户自行结算、未知）的量。 */
+  otherBearingKg: number;
+  bearer: "company" | "customer" | "both" | "other";
+  cost: number;
+  revenue: number;
+  customerRevenue: number;
+  customerCost: number;
+  companyCost: number;
+  otherCost: number;
+  recordCount: number;
+}
+
+export interface H2BiOverviewResponse {
+  range: H2BiRange;
+  watermark: H2BiWatermark;
+  filters: Partial<H2BiQuery>;
+  kpis: H2BiKpis;
+  monthly: H2BiMonthlyPoint[];
+  topStations: H2BiStationRow[];
+  regions: H2BiRegionRow[];
+  stations: H2BiStationRow[];
+  customers: H2BiCustomerRow[];
+}
+
+export interface H2BiDailyPoint {
+  date: string;
+  kg: number;
+  lingniuKg: number;
+  externalKg: number;
+  cost: number;
+  recordCount: number;
+}
+
+export interface H2BiDailyRow extends H2BiDailyPoint {
+  stationCount?: number;
+}
+
+export interface H2BiDailyKpis {
+  totalKg: number;
+  totalCost: number;
+  averageDailyKg: number;
+  stationCount: number;
+  activeDays: number;
+}
+
+export interface H2BiDailyResponse {
+  range: H2BiRange;
+  watermark: H2BiWatermark;
+  filters: Partial<H2BiQuery>;
+  kpis: H2BiDailyKpis;
+  trend: H2BiDailyPoint[];
+  days: H2BiDailyRow[];
+}
+
+export type H2BiDrillMetric =
+  | "totalKg"
+  | "totalCost"
+  | "totalRevenue"
+  | "customerGrossProfit"
+  | "monthKg"
+  | "todayKg"
+  | "station"
+  | "customer"
+  | "day";
+export type H2BiDrillGroupBy =
+  "station" | "customer" | "date" | "vehicle" | "record";
+
+export interface H2BiDrillQuery extends H2BiQuery {
+  groupBy: H2BiDrillGroupBy;
+  amountScope?: H2BiAmountScope;
+  customerId?: number | null;
+  plateNo?: string | null;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface H2BiDrillSummary {
+  label?: string;
+  value?: number;
+  count?: number;
+  [key: string]: string | number | null | undefined;
+}
+
+export type H2BiDrillRecord = Record<
+  string,
+  string | number | boolean | null | undefined
+>;
+
+export interface H2BiDrillGroupRow {
+  [key: string]: string | number | boolean | null | undefined;
+  id: string;
+  name: string;
+  province: string | null;
+  city: string | null;
+  recordCount: number;
+  stationCount: number;
+  customerCount: number;
+  kg: number;
+  cost: number;
+  revenue: number;
+  lingniuKg: number;
+  externalKg: number;
+}
+
+export interface H2BiDrillResponse {
+  groupBy: H2BiDrillGroupBy;
+  amountScope: H2BiAmountScope;
+  filters: Partial<H2BiQuery>;
+  summary: H2BiDrillSummary;
+  groups: H2BiDrillGroupRow[];
+  records: H2BiDrillRecord[];
+  page: {
+    page: number;
+    pageSize: number;
+    hasMore: boolean;
+  };
+}
+
+export interface H2BiDailyTreeCustomer {
+  id: number;
+  name: string;
+  kg: number;
+  cost: number;
+  recordCount: number;
+}
+
+export interface H2BiDailyTreeStation {
+  id: string | number;
+  name: string;
+  kg: number;
+  cost: number;
+  recordCount: number;
+  customers: H2BiDailyTreeCustomer[];
+}
+
+export interface H2BiDailyTreeResponse {
+  date: string;
+  stations: H2BiDailyTreeStation[];
+}
+
+export type H2BiDailyTreeQuery = Omit<
+  Partial<H2BiQuery>,
+  "date" | "startDate" | "endDate" | "month"
+>;
@@ -0,0 +1,375 @@
+import { useMemo, useState } from 'react';
+import { ChevronRight, Download, RefreshCw } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import * as XLSX from 'xlsx';
+import TrendBadge from '../../TrendBadge';
+import type { HydrogenDailyDetailCustomer, HydrogenDailyDetailStation, HydrogenDailyRow } from '../../types';
+import type { DailyDetailState } from '../../HydrogenDaily';
+import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from '../../components/SortableColumnHeader';
+
+type DailySortKey = 'date' | 'price' | 'kg' | 'fee' | 'chainPct';
+
+interface DailyDetailTableProps {
+  rows: HydrogenDailyRow[];
+  totalKg: number;
+  totalFee: number;
+  expanded: Set<string>;
+  highlightedDate?: string | null;
+  details: Record<string, DailyDetailState>;
+  onToggle: (date: string) => void;
+  onRetryDetail: (date: string) => void;
+}
+
+export function DailyDetailTable({
+  rows,
+  totalKg,
+  totalFee,
+  expanded,
+  highlightedDate,
+  details,
+  onToggle,
+  onRetryDetail,
+}: DailyDetailTableProps) {
+  const [sortKey, setSortKey] = useState<DailySortKey>('date');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const sortedRows = useMemo(() => sortBy(rows, sortKey, sortDirection, (row, key) => {
+    if (key === 'price') return row.totalKg > 0 ? row.totalFee / row.totalKg : 0;
+    return row[key === 'kg' ? 'totalKg' : key === 'fee' ? 'totalFee' : key];
+  }), [rows, sortDirection, sortKey]);
+  const changeSort = (nextKey: DailySortKey) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+  return (
+    <section className="overflow-hidden rounded-[14px] border border-slate-200/70 bg-white shadow-sm">
+      <div className="flex items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
+        <h2 className="text-[14px] font-bold text-slate-800">
+          每日加氢数据明细
+          <span className="ml-1 text-[11px] font-normal text-slate-400">（日期 → 加氢站 → 客户 → 车辆/来源）</span>
+        </h2>
+        <div className="flex shrink-0 items-center gap-2">
+          <span className="hidden text-[11px] font-medium text-slate-400 sm:inline">{rows.length} 天</span>
+          <button
+            type="button"
+            onClick={() => exportDailyRows(rows, details)}
+            className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-2.5 text-[11px] font-semibold text-slate-600 hover:bg-slate-50"
+          >
+            <Download size={13} />导出 Excel
+          </button>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <div className="min-w-[780px]">
+          <div className="grid grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] gap-3 bg-slate-50 px-3 py-2 text-[11px] font-medium text-slate-500">
+            <span><SortableColumnHeader label="日期 / 加氢站" sortKey="date" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></span>
+            <span className="text-right"><SortableColumnHeader label="单价 (元/Kg)" sortKey="price" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></span>
+            <span className="text-right"><SortableColumnHeader label="加氢量 (Kg)" sortKey="kg" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></span>
+            <span className="text-right"><SortableColumnHeader label="成本 / 环比" sortKey="fee" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></span>
+            <span className="text-right">站点余额</span>
+          </div>
+          <div className="grid grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] gap-3 bg-blue-50/60 px-3 py-2 text-[12px] font-semibold text-blue-700">
+            <span>合计</span>
+            <span />
+            <span className="text-right font-mono tabular-nums">{formatNumber(totalKg, 2)}</span>
+            <span className="text-right font-mono tabular-nums">¥{formatNumber(totalFee, 0)}</span>
+            <span className="text-right text-[10px] font-medium text-slate-400">以源表为准</span>
+          </div>
+          {sortedRows.map(row => {
+            const open = expanded.has(row.date);
+            const highlighted = highlightedDate === row.date;
+            const abnormal = Math.abs(row.chainPct) >= 0.3;
+            const background = highlighted
+              ? 'bg-sky-50 ring-1 ring-inset ring-sky-200'
+              : abnormal
+                ? row.chainPct > 0 ? 'bg-emerald-50/35' : 'bg-red-50/35'
+                : '';
+            return (
+              <div key={row.date} id={`hydrogen-daily-row-${row.date}`} className={`border-t border-slate-100 ${background}`}>
+                <button
+                  type="button"
+                  onClick={() => onToggle(row.date)}
+                  className="grid w-full grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] gap-3 px-3 py-2.5 text-left transition-colors hover:bg-slate-50/60"
+                >
+                  <span className="flex items-center gap-1.5 text-[12px] font-semibold text-slate-700">
+                    <ChevronRight size={14} className={`text-sky-600 transition-transform ${open ? 'rotate-90' : ''}`} />
+                    <span className="font-mono tabular-nums">{row.date}</span>
+                    <span className="text-[10px] font-normal text-slate-400">({row.stations.length} 个加氢站)</span>
+                  </span>
+                  <span className="text-right text-[12px] text-slate-300">—</span>
+                  <span className="text-right font-mono text-[12px] font-semibold tabular-nums text-slate-800">{formatNumber(row.totalKg, 2)}</span>
+                  <span className="text-right"><TrendBadge value={row.chainPct} /></span>
+                  <span className="text-right text-[10px] text-slate-400">展开查看</span>
+                </button>
+                <AnimatePresence initial={false}>
+                  {open ? (
+                    <StationRows
+                      date={row.date}
+                      fallbackStations={row.stations}
+                      detail={details[row.date]}
+                      onRetry={() => onRetryDetail(row.date)}
+                      sortKey={sortKey}
+                      sortDirection={sortDirection}
+                    />
+                  ) : null}
+                </AnimatePresence>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+interface StationRowsProps {
+  date: string;
+  fallbackStations: HydrogenDailyRow['stations'];
+  detail?: DailyDetailState;
+  onRetry: () => void;
+  sortKey: DailySortKey;
+  sortDirection: SortDirection;
+}
+
+function StationRows({ date, fallbackStations, detail, onRetry, sortKey, sortDirection }: StationRowsProps) {
+  const [openStations, setOpenStations] = useState<Set<string>>(new Set());
+  const [openCustomers, setOpenCustomers] = useState<Set<string>>(new Set());
+  const stations = detail?.data?.stations;
+  const sortedStations = useMemo(() => sortBy(stations ?? [], sortKey, sortDirection, (station, key) => dailyDetailValue(station, key)), [sortDirection, sortKey, stations]);
+
+  const toggleStation = (station: HydrogenDailyDetailStation) => {
+    const key = `${date}:${station.id}`;
+    setOpenStations(previous => toggleSet(previous, key));
+  };
+
+  const toggleCustomer = (station: HydrogenDailyDetailStation, customer: HydrogenDailyDetailCustomer) => {
+    const key = `${date}:${station.id}:${customer.id}:${customer.name}`;
+    setOpenCustomers(previous => toggleSet(previous, key));
+  };
+
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.15 }}
+      className="overflow-hidden bg-slate-50/60"
+    >
+      {detail?.loading ? <DetailStatus label="正在读取客户和车辆明细" /> : null}
+      {detail?.error ? (
+        <div className="flex items-center justify-between px-9 py-3 text-[11px] text-rose-600">
+          <span>明细读取失败，请重试。</span>
+          <button type="button" onClick={onRetry} className="inline-flex items-center gap-1 font-semibold"><RefreshCw size={12} />重试</button>
+        </div>
+      ) : null}
+      {!detail ? <DetailStatus label={`正在准备 ${fallbackStations.length} 个站点明细`} /> : null}
+      {stations?.length === 0 ? (
+        <div className="px-9 py-3 text-[11px] text-slate-400">当日无站点明细</div>
+      ) : sortedStations.map((station, index) => {
+        const stationKey = `${date}:${station.id}`;
+        const stationOpen = openStations.has(stationKey);
+        return (
+          <div key={`${station.id}-${station.name}-${index}`} className="border-t border-slate-100 first:border-t-0">
+            <button
+              type="button"
+              onClick={() => toggleStation(station)}
+              className="grid w-full grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] items-center gap-3 px-3 py-2 pl-9 text-left hover:bg-slate-100/80"
+            >
+              <div className="flex min-w-0 items-center gap-1.5">
+                <ChevronRight size={13} className={`shrink-0 text-sky-600 transition-transform ${stationOpen ? 'rotate-90' : ''}`} />
+                <div className="min-w-0">
+                  <div className="truncate text-[12px] font-medium text-slate-700" title={station.name}>{station.name}</div>
+                  <div className="mt-0.5 text-[10px] text-slate-400">{station.customers.length} 个客户 · {formatStationType(station.stationType)}</div>
+                </div>
+              </div>
+              <span className="text-right font-mono text-[12px] font-semibold tabular-nums text-slate-600">{station.kg > 0 ? formatNumber(station.fee / station.kg, 2) : '—'}</span>
+              <span className="text-right font-mono text-[12px] font-semibold tabular-nums text-slate-800">{formatNumber(station.kg, 2)}</span>
+              <span className="text-right font-mono text-[11px] font-semibold tabular-nums text-emerald-700">¥{formatNumber(station.fee, 0)}</span>
+              <span
+                className={`text-right font-mono text-[10px] tabular-nums ${station.balance === null ? 'text-slate-400' : 'font-semibold text-slate-700'}`}
+                title={station.balanceEffectiveTime ? `余额记录时间：${station.balanceEffectiveTime}` : '数据源暂无该站点余额记录'}
+              >
+                {station.balance === null ? '暂无记录' : `¥${formatNumber(station.balance, 2)}`}
+              </span>
+            </button>
+            <AnimatePresence initial={false}>
+              {stationOpen ? (
+                <CustomerRows
+                  date={date}
+                  station={station}
+                  openCustomers={openCustomers}
+                  onToggle={customer => toggleCustomer(station, customer)}
+                  sortKey={sortKey}
+                  sortDirection={sortDirection}
+                />
+              ) : null}
+            </AnimatePresence>
+          </div>
+        );
+      })}
+    </motion.div>
+  );
+}
+
+function CustomerRows({
+  date,
+  station,
+  openCustomers,
+  onToggle,
+  sortKey,
+  sortDirection,
+}: {
+  date: string;
+  station: HydrogenDailyDetailStation;
+  openCustomers: Set<string>;
+  onToggle: (customer: HydrogenDailyDetailCustomer) => void;
+  sortKey: DailySortKey;
+  sortDirection: SortDirection;
+}) {
+  const sortedCustomers = useMemo(() => sortBy(station.customers, sortKey, sortDirection, (customer, key) => dailyDetailValue(customer, key)), [sortDirection, sortKey, station.customers]);
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.15 }}
+      className="overflow-hidden bg-white"
+    >
+      {sortedCustomers.map(customer => {
+        const customerKey = `${date}:${station.id}:${customer.id}:${customer.name}`;
+        const customerOpen = openCustomers.has(customerKey);
+        return (
+          <div key={customerKey} className="border-t border-slate-100">
+            <button
+              type="button"
+              onClick={() => onToggle(customer)}
+              className="grid w-full grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] items-center gap-3 px-3 py-2 pl-14 text-left hover:bg-sky-50/50"
+            >
+              <span className="flex min-w-0 items-center gap-1.5">
+                <ChevronRight size={12} className={`shrink-0 text-slate-400 transition-transform ${customerOpen ? 'rotate-90' : ''}`} />
+                <span className="truncate text-[11px] font-medium text-slate-700" title={customer.name}>{customer.name}</span>
+                <span className="shrink-0 text-[10px] text-slate-400">{customer.vehicles.length} 条</span>
+              </span>
+              <span className="text-right text-[11px] text-slate-400">客户</span>
+              <span className="text-right font-mono text-[11px] tabular-nums text-slate-700">{formatNumber(customer.kg, 2)}</span>
+              <span className="text-right font-mono text-[11px] tabular-nums text-emerald-700">¥{formatNumber(customer.fee, 0)}</span>
+              <span className="text-right text-[11px] text-slate-300">—</span>
+            </button>
+            <AnimatePresence initial={false}>
+              {customerOpen ? <VehicleRows customer={customer} sortKey={sortKey} sortDirection={sortDirection} /> : null}
+            </AnimatePresence>
+          </div>
+        );
+      })}
+    </motion.div>
+  );
+}
+
+function VehicleRows({ customer, sortKey, sortDirection }: { customer: HydrogenDailyDetailCustomer; sortKey: DailySortKey; sortDirection: SortDirection }) {
+  const sortedVehicles = useMemo(() => sortBy(customer.vehicles, sortKey, sortDirection, (vehicle, key) => dailyDetailValue(vehicle, key)), [customer.vehicles, sortDirection, sortKey]);
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.15 }}
+      className="overflow-hidden bg-slate-50/80 px-3 py-1.5 pl-[74px]"
+    >
+      {sortedVehicles.map(vehicle => (
+        <div key={vehicle.id} className="grid grid-cols-[minmax(176px,1fr)_110px_120px_110px_100px] items-center gap-3 border-t border-slate-100 py-1.5 first:border-t-0">
+          <div className="flex min-w-0 items-center gap-2 text-[10px]">
+            <span className="font-mono tabular-nums text-slate-400">{vehicle.time}</span>
+            <span className="truncate font-semibold text-slate-700">{vehicle.plateNo}</span>
+            <span className={`rounded px-1 py-0.5 font-medium ${vehicle.vehicleScope === 'lingniu' ? 'bg-blue-50 text-blue-600' : 'bg-amber-50 text-amber-700'}`}>
+              {vehicle.vehicleScope === 'lingniu' ? '羚牛' : '外部'}
+            </span>
+          </div>
+          <div className="flex min-w-0 justify-end gap-1 text-[9px]">
+            <span className="max-w-[72px] truncate rounded bg-white px-1 py-0.5 text-slate-500" title={vehicle.source}>{vehicle.source}</span>
+            <span className="rounded bg-white px-1 py-0.5 text-slate-500">{formatVerifyStatus(vehicle.verifyStatus)}</span>
+          </div>
+          <span className="text-right font-mono text-[10px] font-semibold tabular-nums text-slate-700">{formatNumber(vehicle.kg, 3)}</span>
+          <span className="text-right font-mono text-[10px] tabular-nums text-emerald-700">¥{formatNumber(vehicle.fee, 2)}</span>
+          <span className="text-right text-[10px] text-slate-300">—</span>
+        </div>
+      ))}
+    </motion.div>
+  );
+}
+
+function dailyDetailValue(
+  row: HydrogenDailyDetailStation | HydrogenDailyDetailCustomer | HydrogenDailyDetailCustomer['vehicles'][number],
+  key: DailySortKey,
+) {
+  if (key === 'date') return 'time' in row ? `${row.time} ${row.plateNo}` : 'name' in row ? row.name : '';
+  if (key === 'price') return row.kg > 0 ? row.fee / row.kg : 0;
+  if (key === 'chainPct') return row.kg;
+  return row[key];
+}
+
+function DetailStatus({ label }: { label: string }) {
+  return <div className="px-9 py-3 text-[11px] text-slate-400">{label}</div>;
+}
+
+function toggleSet(previous: Set<string>, key: string) {
+  const next = new Set(previous);
+  next.has(key) ? next.delete(key) : next.add(key);
+  return next;
+}
+
+function formatVerifyStatus(value: string) {
+  const normalized = value.toUpperCase();
+  if (normalized === 'VERIFIED' || normalized === 'PASS') return '已核验';
+  if (normalized === 'FAILED' || normalized === 'REJECT') return '异常';
+  return '待核验';
+}
+
+function formatStationType(value: string) {
+  const normalized = value.toLowerCase();
+  if (normalized === 'self' || normalized === 'internal') return '自营站';
+  if (normalized === 'external' || normalized === 'partner') return '合作站';
+  return '加氢站';
+}
+
+function exportDailyRows(rows: HydrogenDailyRow[], details: Record<string, DailyDetailState>) {
+  const workbook = XLSX.utils.book_new();
+  const summaryRows = rows.flatMap(row => row.stations.length > 0
+    ? row.stations.map(station => ({
+      日期: row.date,
+      加氢站: station.name,
+      单价元每Kg: station.pricePerKg,
+      加氢量Kg: station.kg,
+      成本元: station.fee,
+      日环比: row.chainPct,
+    }))
+    : [{ 日期: row.date, 加氢站: '', 单价元每Kg: 0, 加氢量Kg: row.totalKg, 成本元: row.totalFee, 日环比: row.chainPct }]);
+  XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(summaryRows), '日报汇总');
+
+  const recordRows = Object.values(details).flatMap(state => {
+    if (!state.data) return [];
+    return state.data.stations.flatMap(station => station.customers.flatMap(customer => (
+      customer.vehicles.map(vehicle => ({
+        日期: state.data?.date,
+        时间: vehicle.time,
+        加氢站: station.name,
+        客户: customer.name,
+        车牌: vehicle.plateNo,
+        车辆归属: vehicle.vehicleScope === 'lingniu' ? '羚牛' : '外部',
+        来源: vehicle.source,
+        核验状态: formatVerifyStatus(vehicle.verifyStatus),
+        单价元每Kg: vehicle.unitPrice,
+        加氢量Kg: vehicle.kg,
+        成本元: vehicle.fee,
+      }))
+    )));
+  });
+  if (recordRows.length > 0) XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(recordRows), '已下钻流水');
+  const start = rows.at(-1)?.date ?? '开始';
+  const end = rows[0]?.date ?? '结束';
+  XLSX.writeFile(workbook, `氢能按日_${start}_${end}.xlsx`);
+}
+
+function formatNumber(value: number, digits: number): string {
+  return value.toLocaleString('zh-CN', { minimumFractionDigits: digits, maximumFractionDigits: digits });
+}
@@ -0,0 +1,123 @@
+import { Fuel, TrendingUp, Truck, Zap } from 'lucide-react';
+import type { HydrogenDailyVehicleScope } from '../model';
+
+interface DailyKpiGridProps {
+  rangeLabel: string;
+  rangeText: string;
+  totalKg: number;
+  activeDays: number;
+  dayCount: number;
+  averageKg: number;
+  stationCount: number;
+  vehicleScope: HydrogenDailyVehicleScope;
+  lingniuKg: number;
+  externalKg: number;
+  selectedStationName?: string;
+}
+
+const VEHICLE_LABEL: Record<HydrogenDailyVehicleScope, string> = {
+  all: '全部车辆',
+  lingniu: '羚牛车辆',
+  external: '外部车辆',
+};
+
+export function DailyKpiGrid({
+  rangeLabel,
+  rangeText,
+  totalKg,
+  activeDays,
+  dayCount,
+  averageKg,
+  stationCount,
+  vehicleScope,
+  lingniuKg,
+  externalKg,
+  selectedStationName,
+}: DailyKpiGridProps) {
+  return (
+    <section className="grid grid-cols-2 gap-2.5 md:grid-cols-4 md:gap-3">
+      <KpiCard
+        icon={Fuel}
+        title={`${rangeLabel}加氢量`}
+        value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })}
+        unit="Kg"
+        helper={rangeText}
+        tone="blue"
+      />
+      <KpiCard
+        icon={Truck}
+        title="车辆结构"
+        value={VEHICLE_LABEL[vehicleScope]}
+        helper={vehicleScope === 'all'
+          ? `羚牛 ${formatKg(lingniuKg)} · 外部 ${formatKg(externalKg)}`
+          : `仅统计${VEHICLE_LABEL[vehicleScope]}`}
+        tone="green"
+        smallValue
+      />
+      <KpiCard
+        icon={TrendingUp}
+        title="有效天数"
+        value={activeDays}
+        unit="天"
+        helper={`区间 ${dayCount} 天 · 日均 ${averageKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`}
+        tone="amber"
+      />
+      <KpiCard
+        icon={Zap}
+        title={selectedStationName ? '当前加氢站' : '涉及加氢站'}
+        value={selectedStationName ?? stationCount}
+        unit={selectedStationName ? undefined : '站'}
+        helper={selectedStationName ?? '按区间明细站点去重'}
+        tone="purple"
+        smallValue={Boolean(selectedStationName)}
+      />
+    </section>
+  );
+}
+
+function formatKg(value: number): string {
+  return `${value.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`;
+}
+
+function KpiCard({
+  icon: Icon,
+  title,
+  value,
+  unit,
+  helper,
+  tone,
+  smallValue = false,
+}: {
+  icon: typeof Fuel;
+  title: string;
+  value: string | number;
+  unit?: string;
+  helper: string;
+  tone: 'blue' | 'green' | 'amber' | 'purple';
+  smallValue?: boolean;
+}) {
+  const toneClass = {
+    blue: 'bg-blue-50 text-blue-600',
+    green: 'bg-emerald-50 text-emerald-600',
+    amber: 'bg-amber-50 text-amber-600',
+    purple: 'bg-violet-50 text-violet-600',
+  }[tone];
+
+  return (
+    <article className="min-w-0 rounded-[10px] border border-slate-200/70 bg-white px-3 py-3 shadow-sm md:px-4">
+      <div className="flex items-center justify-between gap-2">
+        <span className="truncate text-[12px] font-medium text-slate-500">{title}</span>
+        <span className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${toneClass}`}>
+          <Icon size={14} />
+        </span>
+      </div>
+      <div className="mt-1.5 flex min-w-0 items-baseline gap-1 font-mono tabular-nums text-slate-900">
+        <strong className={`${smallValue ? 'truncate text-[17px] md:text-[19px]' : 'text-[23px] md:text-[25px]'} leading-tight font-extrabold`}>
+          {value}
+        </strong>
+        {unit ? <span className="shrink-0 text-[11px] font-semibold text-slate-400">{unit}</span> : null}
+      </div>
+      <p className="mt-1 truncate font-mono text-[10px] font-medium text-slate-400" title={helper}>{helper}</p>
+    </article>
+  );
+}
@@ -0,0 +1,167 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { HydrogenDailyRow } from '../../types';
+import type { HydrogenDailyTrendPoint } from '../model';
+
+interface DailyTrendChartProps {
+  rows: HydrogenDailyTrendPoint[];
+  averageKg: number;
+  peakDay: HydrogenDailyRow | null;
+  lowDay: HydrogenDailyRow | null;
+  zeroDays: number;
+  selectedDate?: string | null;
+  onSelectDate?: (date: string) => void;
+}
+
+export function DailyTrendChart({
+  rows,
+  averageKg,
+  peakDay,
+  lowDay,
+  zeroDays,
+  selectedDate,
+  onSelectDate,
+}: DailyTrendChartProps) {
+  const selectActiveDate = (state: { activeLabel?: string | number } | null) => {
+    if (state?.activeLabel) onSelectDate?.(String(state.activeLabel));
+  };
+
+  return (
+    <section className="rounded-[14px] border border-slate-200/70 bg-white p-3.5 shadow-sm md:p-4">
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
+          <h2 className="text-[14px] font-bold text-slate-800">
+            每日加氢量
+            <span className="ml-1 text-[11px] font-normal text-slate-400">（点击柱体定位到对应日期明细）</span>
+          </h2>
+        </div>
+        <div className="flex items-center justify-between gap-4 md:justify-end">
+          <div className="flex items-center gap-3 text-[11px] font-medium text-slate-600">
+            <Legend color="#0284c7" label="羚牛车辆" />
+            <Legend color="#f59e0b" label="外部车辆" />
+          </div>
+          <span className="shrink-0 text-[10px] font-medium text-slate-400">时间单位：日 · 单位 Kg</span>
+        </div>
+      </div>
+
+      <div className="mt-3 flex gap-4 rounded-md bg-slate-50 px-3 py-2 text-[11px] text-slate-500">
+        <TrendFact label="峰值日" value={peakDay ? `${peakDay.date.slice(5)} · ${formatCompact(peakDay.totalKg)}` : '—'} />
+        <TrendFact label="低谷日" value={lowDay ? `${lowDay.date.slice(5)} · ${formatCompact(lowDay.totalKg)}` : '—'} />
+        <TrendFact label="零数日" value={`${zeroDays} 天`} valueClass={zeroDays > 0 ? 'text-amber-600' : 'text-emerald-600'} />
+      </div>
+
+      <div className="mt-2 overflow-x-auto pb-1">
+        <div className="h-[230px] min-w-[680px] md:min-w-0">
+          <ResponsiveContainer
+            width="100%"
+            height="100%"
+            minWidth={0}
+            minHeight={0}
+            initialDimension={{ width: 680, height: 230 }}
+          >
+            <BarChart
+              data={rows}
+              margin={{ top: 25, right: 12, bottom: 0, left: -6 }}
+              onClick={selectActiveDate}
+              className="cursor-pointer"
+            >
+              <CartesianGrid vertical={false} stroke="#e2e8f0" strokeDasharray="3 4" />
+              <XAxis
+                dataKey="date"
+                tickFormatter={(value: string) => value.slice(5)}
+                tick={{ fontSize: 10, fill: '#94a3b8' }}
+                tickLine={false}
+                axisLine={{ stroke: '#e2e8f0' }}
+                interval={0}
+              />
+              <YAxis
+                width={52}
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 10, fill: '#94a3b8' }}
+                tickFormatter={formatAxis}
+              />
+              <Tooltip
+                formatter={(value, name) => [
+                  `${Number(value ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })} Kg`,
+                  name === 'lingniuKg' ? '羚牛车辆' : '外部车辆',
+                ]}
+                labelFormatter={date => `日期 ${date}`}
+                contentStyle={{ borderRadius: 8, borderColor: '#e2e8f0', fontSize: 12, boxShadow: '0 10px 30px rgba(15,23,42,.12)' }}
+                cursor={{ fill: 'rgba(2,132,199,.05)' }}
+              />
+              {averageKg > 0 ? (
+                <ReferenceLine
+                  y={averageKg}
+                  stroke="#2563eb"
+                  strokeDasharray="5 4"
+                  label={{ value: `均值 ${formatCompact(averageKg)}`, position: 'insideTopLeft', fill: '#1d4ed8', fontSize: 10, fontWeight: 600 }}
+                />
+              ) : null}
+              <defs>
+                <linearGradient id="dailyLingniuBar" x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" stopColor="#38bdf8" />
+                  <stop offset="100%" stopColor="#0284c7" />
+                </linearGradient>
+                <linearGradient id="dailyExternalBar" x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" stopColor="#fbbf24" />
+                  <stop offset="100%" stopColor="#f59e0b" />
+                </linearGradient>
+              </defs>
+              <Bar dataKey="lingniuKg" stackId="daily" fill="url(#dailyLingniuBar)" maxBarSize={30}>
+                {rows.map(row => <Cell key={`lingniu-${row.date}`} fill={row.date === selectedDate ? '#0369a1' : 'url(#dailyLingniuBar)'} />)}
+              </Bar>
+              <Bar dataKey="externalKg" stackId="daily" fill="url(#dailyExternalBar)" radius={[4, 4, 0, 0]} maxBarSize={30}>
+                <LabelList
+                  dataKey="totalKg"
+                  position="top"
+                  formatter={value => formatCompact(Number(value ?? 0))}
+                  style={{ fill: '#64748b', fontSize: 9, fontWeight: 600 }}
+                />
+                {rows.map(row => <Cell key={`external-${row.date}`} fill={row.date === selectedDate ? '#d97706' : 'url(#dailyExternalBar)'} />)}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Legend({ color, label }: { color: string; label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
+      <span className="h-2 w-2 rounded-sm" style={{ backgroundColor: color }} />
+      {label}
+    </span>
+  );
+}
+
+function TrendFact({ label, value, valueClass = 'text-slate-800' }: { label: string; value: string; valueClass?: string }) {
+  return (
+    <span className="inline-flex min-w-0 items-center gap-1.5">
+      <span>{label}</span>
+      <strong className={`truncate font-mono tabular-nums ${valueClass}`}>{value}</strong>
+    </span>
+  );
+}
+
+function formatAxis(value: number): string {
+  if (value >= 10_000) return `${(value / 10_000).toFixed(value % 10_000 === 0 ? 0 : 1)}万`;
+  if (value >= 1_000) return `${Math.round(value / 1_000)}k`;
+  return `${Math.round(value)}`;
+}
+
+function formatCompact(value: number): string {
+  return value.toLocaleString('zh-CN', { maximumFractionDigits: 0 });
+}
@@ -0,0 +1,39 @@
+import { Building2, Gauge, Wallet } from 'lucide-react';
+import type { HydrogenDailyStationOption } from '../model';
+
+interface StationDailyOverviewProps {
+  station: HydrogenDailyStationOption;
+  totalKg: number;
+  totalFee: number;
+  averagePrice: number;
+}
+
+export function StationDailyOverview({ station, totalKg, totalFee, averagePrice }: StationDailyOverviewProps) {
+  return (
+    <section className="flex flex-col gap-3 rounded-[14px] border border-sky-100 bg-sky-50/50 px-4 py-3 shadow-sm md:flex-row md:items-center md:justify-between">
+      <div className="flex min-w-0 items-center gap-3">
+        <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px] bg-white text-sky-600 shadow-sm ring-1 ring-sky-100">
+          <Building2 size={17} />
+        </span>
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold text-sky-700">单站按日视图</div>
+          <h2 className="truncate text-[15px] font-bold text-slate-900" title={station.name}>{station.name}</h2>
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-2 md:min-w-[430px]">
+        <StationFact icon={Gauge} label="区间加氢量" value={`${totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} />
+        <StationFact icon={Wallet} label="区间成本" value={`¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`} />
+        <StationFact icon={Gauge} label="成本均价" value={`${averagePrice.toFixed(2)} 元/Kg`} />
+      </div>
+    </section>
+  );
+}
+
+function StationFact({ icon: Icon, label, value }: { icon: typeof Gauge; label: string; value: string }) {
+  return (
+    <div className="min-w-0 rounded-lg bg-white/90 px-2.5 py-2 ring-1 ring-sky-100/80">
+      <div className="flex items-center gap-1 text-[10px] font-medium text-slate-400"><Icon size={11} />{label}</div>
+      <div className="mt-1 truncate font-mono text-[11px] font-bold tabular-nums text-slate-800" title={value}>{value}</div>
+    </div>
+  );
+}
@@ -2,8 +2,12 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import type { HydrogenDailyRow } from '../types.js';
 import {
+  buildHydrogenDailyTrend,
  getQuickRange,
+  filterHydrogenRowsByStation,
+  getHydrogenDailyStations,
  getRangeModeLabel,
+  mergeHydrogenDailyRows,
  normalizeRange,
  summarizeHydrogenRows,
 } from './model.js';
@@ -24,6 +28,43 @@ test('快捷日期继续使用本地自然日并覆盖本周、本月和近15天
  });
 });

+test('全部车辆由两类真实日报按日期和站点合并', () => {
+  const lingniu: HydrogenDailyRow[] = [{
+    date: '2026-08-11', totalKg: 100, totalFee: 2_400, chainPct: 0, customerType: 'lingniu',
+    stations: [{ id: 1, name: 'A站', kg: 100, fee: 2_400, pricePerKg: 24, chainPct: 0 }],
+  }];
+  const external: HydrogenDailyRow[] = [{
+    date: '2026-08-11', totalKg: 50, totalFee: 1_000, chainPct: 0, customerType: 'external',
+    stations: [{ id: 1, name: 'A站', kg: 50, fee: 1_000, pricePerKg: 20, chainPct: 0 }],
+  }];
+
+  const merged = mergeHydrogenDailyRows(lingniu, external)!;
+  assert.equal(merged[0].totalKg, 150);
+  assert.equal(merged[0].totalFee, 3_400);
+  assert.equal(merged[0].stations[0].pricePerKg, 22.67);
+  assert.deepEqual(buildHydrogenDailyTrend(lingniu, external, 'all', null), [{
+    date: '2026-08-11', totalKg: 150, lingniuKg: 100, externalKg: 50,
+  }]);
+});
+
+test('趋势数据同时遵守车辆归属和单站筛选', () => {
+  const lingniu: HydrogenDailyRow[] = [{
+    date: '2026-08-11', totalKg: 130, totalFee: 3_000, chainPct: 0, customerType: 'lingniu',
+    stations: [
+      { id: 1, name: 'A站', kg: 80, fee: 1_920, pricePerKg: 24, chainPct: 0 },
+      { id: 2, name: 'B站', kg: 50, fee: 1_080, pricePerKg: 21.6, chainPct: 0 },
+    ],
+  }];
+  const external: HydrogenDailyRow[] = [{
+    date: '2026-08-11', totalKg: 20, totalFee: 400, chainPct: 0, customerType: 'external',
+    stations: [{ id: 1, name: 'A站', kg: 20, fee: 400, pricePerKg: 20, chainPct: 0 }],
+  }];
+
+  assert.deepEqual(buildHydrogenDailyTrend(lingniu, external, 'lingniu', 1), [{
+    date: '2026-08-11', totalKg: 80, lingniuKg: 80, externalKg: 0,
+  }]);
+});
+
 test('自定义日期倒置时仅交换查询边界', () => {
  assert.deepEqual(normalizeRange('2026-08-12', '2026-08-01'), {
    start: '2026-08-01',
@@ -38,23 +79,26 @@ test('每日加氢统计保持排序、有效天、站点去重和峰谷口径',
    {
      date: '2026-08-12',
      totalKg: 0,
+      totalFee: 0,
      chainPct: -1,
      customerType: 'lingniu',
-      stations: [{ name: 'A站', kg: 0, pricePerKg: 0, chainPct: -1 }],
+      stations: [{ id: 1, name: 'A站', kg: 0, fee: 0, pricePerKg: 0, chainPct: -1 }],
    },
    {
      date: '2026-08-10',
      totalKg: 100,
+      totalFee: 2_000,
      chainPct: 0,
      customerType: 'lingniu',
-      stations: [{ name: 'A站', kg: 100, pricePerKg: 20, chainPct: 0 }],
+      stations: [{ id: 1, name: 'A站', kg: 100, fee: 2_000, pricePerKg: 20, chainPct: 0 }],
    },
    {
      date: '2026-08-11',
      totalKg: 300,
+      totalFee: 7_500,
      chainPct: 2,
      customerType: 'lingniu',
-      stations: [{ name: 'B站', kg: 300, pricePerKg: 25, chainPct: 2 }],
+      stations: [{ id: 2, name: 'B站', kg: 300, fee: 7_500, pricePerKg: 25, chainPct: 2 }],
    },
  ];

@@ -62,8 +106,10 @@ test('每日加氢统计保持排序、有效天、站点去重和峰谷口径',
  assert.deepEqual(rows.map(row => row.date), ['2026-08-12', '2026-08-10', '2026-08-11']);
  assert.deepEqual(summary.trendData.map(row => row.date), ['2026-08-10', '2026-08-11', '2026-08-12']);
  assert.equal(summary.totalKg, 400);
+  assert.equal(summary.totalFee, 9_500);
  assert.equal(summary.activeDays, 2);
  assert.equal(summary.avgKg, 200);
+  assert.equal(summary.avgPrice, 23.75);
  assert.equal(summary.stationCount, 2);
  assert.equal(summary.peakDay?.date, '2026-08-11');
  assert.equal(summary.lowDay?.date, '2026-08-10');
@@ -74,11 +120,41 @@ test('空数据保持零值且没有峰谷日', () => {
  assert.deepEqual(summarizeHydrogenRows(null), {
    trendData: [],
    totalKg: 0,
+    totalFee: 0,
    activeDays: 0,
    stationCount: 0,
    avgKg: 0,
+    avgPrice: 0,
    peakDay: null,
    lowDay: null,
    zeroDays: 0,
  });
 });
+
+test('站点筛选按站点 ID 重算日报总量、费用和环比', () => {
+  const rows: HydrogenDailyRow[] = [
+    {
+      date: '2026-08-11', totalKg: 150, totalFee: 3_400, chainPct: 0, customerType: 'lingniu',
+      stations: [
+        { id: 1, name: 'A站', kg: 100, fee: 2_400, pricePerKg: 24, chainPct: 0 },
+        { id: 2, name: 'B站', kg: 50, fee: 1_000, pricePerKg: 20, chainPct: 0 },
+      ],
+    },
+    {
+      date: '2026-08-10', totalKg: 80, totalFee: 1_760, chainPct: 0, customerType: 'lingniu',
+      stations: [{ id: 1, name: 'A站', kg: 80, fee: 1_760, pricePerKg: 22, chainPct: 0 }],
+    },
+  ];
+
+  assert.deepEqual(getHydrogenDailyStations(rows), [
+    { id: 1, name: 'A站', totalKg: 180, totalFee: 4_160 },
+    { id: 2, name: 'B站', totalKg: 50, totalFee: 1_000 },
+  ]);
+
+  const filtered = filterHydrogenRowsByStation(rows, 1)!;
+  assert.deepEqual(filtered.map(row => ({ date: row.date, kg: row.totalKg, fee: row.totalFee, chain: row.chainPct })), [
+    { date: '2026-08-11', kg: 100, fee: 2_400, chain: 0.25 },
+    { date: '2026-08-10', kg: 80, fee: 1_760, chain: 0 },
+  ]);
+  assert.equal(summarizeHydrogenRows(filtered).totalFee, 4_160);
+});
@@ -14,9 +14,10 @@ export function summarizeHydrogenRows(rows: HydrogenDailyRow[] | null) {
  // 图表固定按日期升序；复制数组避免改变接口返回及表格原始顺序。
  const trendData = [...source].sort((left, right) => left.date.localeCompare(right.date));
  const totalKg = source.reduce((total, row) => total + row.totalKg, 0);
+  const totalFee = source.reduce((total, row) => total + row.totalFee, 0);
  const activeDays = source.filter(row => row.totalKg > 0).length;
-  const stationNames = new Set<string>();
-  source.forEach(row => row.stations.forEach(station => stationNames.add(station.name)));
+  const stationIds = new Set<number>();
+  source.forEach(row => row.stations.forEach(station => stationIds.add(station.id)));
  const peakDay = trendData.reduce<HydrogenDailyRow | null>(
    (best, item) => (!best || item.totalKg > best.totalKg ? item : best),
    null,
@@ -31,11 +32,177 @@ export function summarizeHydrogenRows(rows: HydrogenDailyRow[] | null) {
  return {
    trendData,
    totalKg,
+    totalFee,
    activeDays,
-    stationCount: stationNames.size,
+    stationCount: stationIds.size,
    avgKg: activeDays > 0 ? totalKg / activeDays : 0,
+    avgPrice: totalKg > 0 ? totalFee / totalKg : 0,
    peakDay,
    lowDay,
    zeroDays: source.filter(row => row.totalKg === 0).length,
  };
 }
+
+export interface HydrogenDailyStationOption {
+  id: number;
+  name: string;
+  totalKg: number;
+  totalFee: number;
+}
+
+export type HydrogenDailyVehicleScope = 'all' | 'lingniu' | 'external';
+export type HydrogenDailyBoardScope = 'global' | 'station';
+
+export interface HydrogenDailyTrendPoint {
+  date: string;
+  totalKg: number;
+  lingniuKg: number;
+  externalKg: number;
+}
+
+function round2(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+/**
+ * “全部车辆”由羚牛与外部车辆两次真实查询合并得到。合并只累加账本
+ * 已返回的加氢量和成本，不引入原型里的演示数据。
+ */
+export function mergeHydrogenDailyRows(
+  lingniuRows: HydrogenDailyRow[] | null,
+  externalRows: HydrogenDailyRow[] | null,
+): HydrogenDailyRow[] | null {
+  if (lingniuRows === null || externalRows === null) return null;
+
+  const rowsByDate = new Map<string, HydrogenDailyRow[]>();
+  for (const row of [...lingniuRows, ...externalRows]) {
+    const rows = rowsByDate.get(row.date) ?? [];
+    rows.push(row);
+    rowsByDate.set(row.date, rows);
+  }
+
+  const merged = [...rowsByDate.entries()].map(([date, rows]) => {
+    const stationsById = new Map<number, HydrogenDailyRow['stations'][number]>();
+    for (const row of rows) {
+      for (const station of row.stations) {
+        const current = stationsById.get(station.id);
+        const kg = round2((current?.kg ?? 0) + station.kg);
+        const fee = round2((current?.fee ?? 0) + station.fee);
+        stationsById.set(station.id, {
+          id: station.id,
+          name: station.name || current?.name || `站点 #${station.id}`,
+          kg,
+          fee,
+          // 跨车辆归属聚合后展示实际成本加权均价。
+          pricePerKg: kg > 0 ? round2(fee / kg) : 0,
+          chainPct: 0,
+        });
+      }
+    }
+    const stations = [...stationsById.values()].sort((left, right) => right.kg - left.kg);
+    return {
+      date,
+      totalKg: round2(stations.reduce((sum, station) => sum + station.kg, 0)),
+      totalFee: round2(stations.reduce((sum, station) => sum + station.fee, 0)),
+      chainPct: 0,
+      customerType: 'lingniu' as const,
+      stations,
+    };
+  });
+
+  return recomputeHydrogenDailyChains(merged);
+}
+
+function recomputeHydrogenDailyChains(rows: HydrogenDailyRow[]): HydrogenDailyRow[] {
+  const ascending = [...rows]
+    .map(row => ({ ...row, stations: row.stations.map(station => ({ ...station })) }))
+    .sort((left, right) => left.date.localeCompare(right.date));
+
+  let previousTotalKg = 0;
+  const stationPreviousKg = new Map<number, number>();
+  for (const row of ascending) {
+    row.chainPct = previousTotalKg > 0 ? (row.totalKg - previousTotalKg) / previousTotalKg : 0;
+    previousTotalKg = row.totalKg;
+    for (const station of row.stations) {
+      const previousStationKg = stationPreviousKg.get(station.id) ?? 0;
+      station.chainPct = previousStationKg > 0 ? (station.kg - previousStationKg) / previousStationKg : 0;
+      stationPreviousKg.set(station.id, station.kg);
+    }
+  }
+  return ascending.sort((left, right) => right.date.localeCompare(left.date));
+}
+
+/** Build one stable station selector from the current date range. */
+export function getHydrogenDailyStations(rows: HydrogenDailyRow[] | null): HydrogenDailyStationOption[] {
+  const stations = new Map<number, HydrogenDailyStationOption>();
+  for (const row of rows ?? []) {
+    for (const station of row.stations) {
+      const current = stations.get(station.id);
+      stations.set(station.id, {
+        id: station.id,
+        name: station.name,
+        totalKg: (current?.totalKg ?? 0) + station.kg,
+        totalFee: (current?.totalFee ?? 0) + station.fee,
+      });
+    }
+  }
+  return [...stations.values()].sort((left, right) => right.totalKg - left.totalKg || left.name.localeCompare(right.name));
+}
+
+/**
+ * Daily endpoint returns all stations in the selected date range. This keeps
+ * station drill-down local and recomputes each day's totals and chain change.
+ */
+export function filterHydrogenRowsByStation(
+  rows: HydrogenDailyRow[] | null,
+  stationId: number | null,
+): HydrogenDailyRow[] | null {
+  if (rows === null || stationId === null) return rows;
+
+  const filtered = rows.map(row => {
+    const stations = row.stations.filter(station => station.id === stationId);
+    return {
+      ...row,
+      totalKg: stations.reduce((sum, station) => sum + station.kg, 0),
+      totalFee: stations.reduce((sum, station) => sum + station.fee, 0),
+      stations,
+    };
+  });
+  return recomputeHydrogenDailyChains(filtered);
+}
+
+/** Build the prototype's blue/orange stacked daily series from real queries. */
+export function buildHydrogenDailyTrend(
+  lingniuRows: HydrogenDailyRow[] | null,
+  externalRows: HydrogenDailyRow[] | null,
+  vehicleScope: HydrogenDailyVehicleScope,
+  stationId: number | null,
+): HydrogenDailyTrendPoint[] {
+  if (lingniuRows === null || externalRows === null) return [];
+  const lingniu = filterHydrogenRowsByStation(lingniuRows, stationId) ?? [];
+  const external = filterHydrogenRowsByStation(externalRows, stationId) ?? [];
+  const byDate = new Map<string, HydrogenDailyTrendPoint>();
+
+  for (const row of lingniu) {
+    byDate.set(row.date, {
+      date: row.date,
+      lingniuKg: vehicleScope === 'external' ? 0 : row.totalKg,
+      externalKg: 0,
+      totalKg: vehicleScope === 'external' ? 0 : row.totalKg,
+    });
+  }
+  for (const row of external) {
+    const current = byDate.get(row.date) ?? {
+      date: row.date,
+      lingniuKg: 0,
+      externalKg: 0,
+      totalKg: 0,
+    };
+    const externalKg = vehicleScope === 'lingniu' ? 0 : row.totalKg;
+    current.externalKg = externalKg;
+    current.totalKg = round2(current.lingniuKg + externalKg);
+    byDate.set(row.date, current);
+  }
+
+  return [...byDate.values()].sort((left, right) => left.date.localeCompare(right.date));
+}
@@ -10,7 +10,16 @@ import {
  XAxis,
  YAxis,
 } from 'recharts';
-import type { HydrogenRegionShare, HydrogenStationTop } from '../../types';
+import { useMemo, useState } from 'react';
+import type { HydrogenRegionShare, HydrogenStationFull, HydrogenStationTop } from '../../types';
+import {
+  buildRegionDrillPayload,
+  buildStationDrillPayload,
+  type OverviewDrillPayload,
+  type OverviewDrillRequest,
+  type OverviewScope,
+} from '../model';
+import { OverviewDrillDialog } from './OverviewDrillDialog';

 const REGION_COLORS = [
  '#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
@@ -42,70 +51,123 @@ function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
 interface DistributionChartsProps {
  top5: HydrogenStationTop[];
  regions: HydrogenRegionShare[];
+  stations: HydrogenStationFull[];
  yearKg: number;
+  onSelectStation?: (stationId: number) => void;
+  scope?: OverviewScope;
+  scopeLabel?: string | null;
+  onDrillRequest?: (request: OverviewDrillRequest) => void;
 }

-export function DistributionCharts({ top5, regions, yearKg }: DistributionChartsProps) {
+export function DistributionCharts({ top5, regions, stations, yearKg, onSelectStation, scope = 'global', scopeLabel, onDrillRequest }: DistributionChartsProps) {
+  const [regionGranularity, setRegionGranularity] = useState<'province' | 'city'>('city');
+  const [drill, setDrill] = useState<OverviewDrillPayload | null>(null);
+  const [selectedStationId, setSelectedStationId] = useState<number | null>(null);
+  const provinceRegions = useMemo(() => {
+    const totals = new Map<string, number>();
+    for (const station of stations) {
+      const province = station.province?.trim() || '未归属';
+      totals.set(province, (totals.get(province) ?? 0) + station.kg);
+    }
+    return [...totals.entries()]
+      .map(([region, kg]) => ({ region, kg, share: kg / Math.max(1, yearKg) }))
+      .sort((a, b) => b.kg - a.kg);
+  }, [stations, yearKg]);
+  const visibleRegions = regionGranularity === 'province' ? provinceRegions : regions;
+  const openStation = (stationId: number) => {
+    const station = stations.find(item => item.id === stationId);
+    if (!station) return;
+    setSelectedStationId(station.id);
+    if (onDrillRequest) onDrillRequest({ kind: 'station', key: String(station.id), label: station.name, entityId: station.id });
+    else setDrill(buildStationDrillPayload(station));
+  };
+  const openRegion = (region: HydrogenRegionShare) => {
+    setSelectedStationId(null);
+    if (onDrillRequest) onDrillRequest({ kind: 'region', key: `${regionGranularity}:${region.region}`, label: region.region });
+    else setDrill(buildRegionDrillPayload(region, stations, regionGranularity));
+  };
+  const scopeText = scope === 'station' && scopeLabel ? ` · ${scopeLabel}` : '';
  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-      <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-3">
-          <span className="text-sm font-bold text-slate-700">加氢站加注量 Top5</span>
-          <span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
+    <>
+    <div className="ehb-two-charts-row">
+      <div className="ehb-chart-box">
+        <div className="ehb-chart-box-head">
+          <div className="ehb-chart-box-title">加氢站加氢量 Top5{scopeText}</div>
+          <div className="ehb-chart-box-meta">单位：Kg</div>
        </div>
-        <ResponsiveContainer width="100%" height={260}>
-          <BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 12 }}>
+        <div className="ehb-chart-box-body h-[260px]">
+        <ResponsiveContainer width="100%" height={260} minWidth={0} initialDimension={{ width: 1, height: 260 }}>
+          <BarChart
+            data={top5}
+            layout="vertical"
+            margin={{ top: 0, right: 24, left: 16, bottom: 0 }}
+            barSize={10}
+            className="cursor-pointer"
+            onClick={(state) => {
+              const stationId = (state as { activePayload?: { payload?: HydrogenStationTop }[] } | undefined)?.activePayload?.[0]?.payload?.id;
+              if (stationId) openStation(stationId);
+            }}
+          >
            <XAxis type="number" hide />
            <YAxis
-              type="category"
              dataKey="name"
-              width={188}
-              tick={<RankYAxisTick />}
-              tickLine={false}
+              type="category"
              axisLine={false}
+              tickLine={false}
+              width={180}
+              tick={<RankYAxisTick />}
            />
            <Tooltip
-              formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN')} Kg`}
-              contentStyle={{ borderRadius: 12, fontSize: 12 }}
-            />
-            <Bar dataKey="kg" radius={[6, 6, 6, 6]}>
-              {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}
+              cursor={{ fill: 'rgba(59, 130, 246, 0.04)' }}
+              contentStyle={{ borderRadius: '12px', fontSize: '12px', padding: '8px 12px', border: 'none', boxShadow: '0 4px 20px rgba(0,0,0,0.08)' }}
+              formatter={(val: unknown) => [`${Number(val ?? 0).toLocaleString('zh-CN')} Kg`, '加氢量']}
            />
+            <Bar dataKey="kg" fill="#3b82f6" radius={[0, 4, 4, 0]}>
+              <LabelList dataKey="kg" position="right" formatter={(v: unknown) => {
+                const value = Number(v ?? 0);
+                return value >= 1000 ? `${(value / 1000).toFixed(1)}k` : String(value);
+              }} fontSize={11} fontWeight={700} fill="#475569" />
            </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>

-      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
-        <span className="text-sm font-bold text-slate-700">各区域加氢占比</span>
-        <div className="flex items-center gap-2">
+      <div className="ehb-chart-box">
+        <div className="ehb-chart-box-head">
+          <div className="ehb-chart-box-title">各区域加氢占比{scopeText}</div>
+          <div className="ehb-mini-tabs">
+            <button
+              type="button"
+              className={`ehb-mini-tab ${regionGranularity === 'province' ? 'is-active' : ''}`}
+              onClick={() => setRegionGranularity('province')}
+            >
+              按省
+            </button>
+            <button
+              type="button"
+              className={`ehb-mini-tab ${regionGranularity === 'city' ? 'is-active' : ''}`}
+              onClick={() => setRegionGranularity('city')}
+            >
+              按市
+            </button>
+          </div>
+        </div>
+        <div className="ehb-chart-box-body h-[260px] flex items-center justify-center">
          <div className="relative w-1/2 h-[200px]">
-            <ResponsiveContainer width="100%" height="100%">
+            <ResponsiveContainer width="100%" height="100%" minWidth={0} initialDimension={{ width: 1, height: 200 }}>
              <PieChart>
                <Pie
-                  data={regions}
+                  data={visibleRegions}
                  dataKey="kg"
                  nameKey="region"
                  innerRadius={48}
                  outerRadius={80}
                  paddingAngle={1}
+                  className="cursor-pointer outline-none"
+                  onClick={(entry) => openRegion(entry as unknown as HydrogenRegionShare)}
                >
-                  {regions.map((_, i) => (
+                  {visibleRegions.map((_, i) => (
                    <Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
                  ))}
                </Pie>
@@ -118,16 +180,22 @@ export function DistributionCharts({ top5, regions, yearKg }: DistributionCharts
            </div>
          </div>
          <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
-            {regions.map((r, i) => (
-              <div key={r.region} className="flex items-center gap-1.5">
+            {visibleRegions.map((r, i) => (
+              <button key={r.region} type="button" onClick={() => openRegion(r)} className="flex min-w-0 items-center gap-1.5 rounded px-1 py-0.5 text-left hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
                <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: REGION_COLORS[i % REGION_COLORS.length] }} />
                <span className="text-slate-600 truncate">{r.region}</span>
                <span className="text-slate-400 ml-auto font-bold flex-shrink-0">{(r.share * 100).toFixed(1)}%</span>
-              </div>
+              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
+    <OverviewDrillDialog
+      payload={drill}
+      onClose={() => { setDrill(null); setSelectedStationId(null); }}
+      onPrimaryAction={selectedStationId && onSelectStation ? () => { const stationId = selectedStationId; setDrill(null); setSelectedStationId(null); onSelectStation(stationId); } : undefined}
+    />
+    </>
  );
 }
@@ -1,6 +1,13 @@
-import { AlertTriangle, Building2, Gauge } from 'lucide-react';
-import type { HydrogenMonthlyPoint } from '../../types';
-import { formatKg as fmtKg } from '../model';
+import { Activity, ChevronDown, Shield, TrendingDown } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { HydrogenMonthlyPoint, HydrogenStationFull } from '../../types';
+import {
+  buildStationDrillPayload,
+  formatKg as fmtKg,
+  type OverviewDrillPayload,
+  type OverviewDrillRequest,
+} from '../model';
+import { OverviewDrillDialog } from './OverviewDrillDialog';

 interface InsightCardsProps {
  monthAvgKg: number;
@@ -8,13 +15,16 @@ interface InsightCardsProps {
  latestMonth: HydrogenMonthlyPoint | undefined;
  monthMomentum: number | null;
  top5Share: number;
-  profitYield: number;
+  customerGrossMarginPct: number;
  stationAvgKg: number;
  stationCount: number;
  yearProfitValue: string;
  yearProfitUnit: string;
  yearRevenueValue: string;
  yearRevenueUnit: string;
+  stations: HydrogenStationFull[];
+  onSelectStation: (stationId: number) => void;
+  onDrillRequest?: (request: OverviewDrillRequest) => void;
 }

 export function InsightCards({
@@ -23,66 +33,144 @@ export function InsightCards({
  latestMonth,
  monthMomentum,
  top5Share,
-  profitYield,
+  customerGrossMarginPct,
  stationAvgKg,
  stationCount,
  yearProfitValue,
  yearProfitUnit,
  yearRevenueValue,
  yearRevenueUnit,
+  stations,
+  onSelectStation,
+  onDrillRequest,
 }: InsightCardsProps) {
+  const [rankingOpen, setRankingOpen] = useState(false);
+  const [drill, setDrill] = useState<OverviewDrillPayload | null>(null);
+  const [selectedStationId, setSelectedStationId] = useState<number | null>(null);
+  const rankingRef = useRef<HTMLDivElement>(null);
+  const highestKg = stations[0]?.kg || 1;
+  useEffect(() => {
+    if (!rankingOpen) return;
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (rankingRef.current && !rankingRef.current.contains(event.target as Node)) setRankingOpen(false);
+    };
+    document.addEventListener('mousedown', closeOnOutsideClick);
+    return () => document.removeEventListener('mousedown', closeOnOutsideClick);
+  }, [rankingOpen]);
+  const openStation = (station: HydrogenStationFull) => {
+    setRankingOpen(false);
+    setSelectedStationId(station.id);
+    if (onDrillRequest) onDrillRequest({ kind: 'station', key: String(station.id), label: station.name, entityId: station.id });
+    else setDrill(buildStationDrillPayload(station));
+  };
  return (
-    <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 className="ehb-insight" aria-label="经营洞察">
+      <div className="ehb-insight__card">
+        <div className="ehb-insight__icon is-down">
+          <TrendingDown size={18} aria-hidden />
+        </div>
        <div>
-            <div className="text-[11px] font-black text-slate-400">月度动能</div>
-            <div className="mt-1 text-lg font-black text-slate-900">
+          <div className="ehb-insight__title">月度加氢异常波动</div>
+          <div className="ehb-insight__value is-neg">
            {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">
+          <div className="ehb-insight__desc">
            {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} />
+
+      <div
+        className={`ehb-insight__card ehb-insight__card--rank ${rankingOpen ? 'is-open' : ''}`}
+        ref={rankingRef}
+        onClick={() => setRankingOpen((v) => !v)}
+        style={{ cursor: 'pointer' }}
+        title="点击查看加氢站加氢量排名"
+      >
+        <div className="ehb-insight__icon">
+          <Shield size={18} aria-hidden />
+        </div>
+        <div className="ehb-insight__rank-body">
+          <div className="ehb-insight__title">头部加氢站占比</div>
+          <div className="ehb-insight__value">Top5 {top5Share.toFixed(1)}%</div>
+          <div className="ehb-insight__desc">
+            共 {stationCount} 站 · 单站年均 {fmtKg(stationAvgKg).value}{fmtKg(stationAvgKg).unit} · 点击展开加氢量排名
+          </div>
+        </div>
+        <ChevronDown
+          size={14}
+          className={`ehb-insight__rank-chevron ${rankingOpen ? 'is-open' : ''}`}
+          aria-hidden
+        />
+        {rankingOpen && (
+          <div
+            className="ehb-station-rank-dropdown"
+            onClick={(e) => e.stopPropagation()}
+            role="listbox"
+            aria-label="加氢站加氢量排名"
+          >
+            <div className="ehb-station-rank-dropdown__head">
+              <span>加氢站加氢量排名</span>
+              <span className="ehb-station-rank-dropdown__meta">
+                高 → 低 · 共 {stationCount} 站
              </span>
            </div>
-        <div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
-          共 {stationCount} 站 · 单站年均 {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} />
+            <div className="ehb-station-rank-dropdown__list">
+              {stations.map((station, index) => (
+                <button
+                  key={`${station.id}-${station.name}-${index}`}
+                  type="button"
+                  className="ehb-station-rank-item"
+                  onClick={() => openStation(station)}
+                  title="点击钻取该站明细"
+                >
+                  <span className={`ehb-station-rank-item__rank ${index < 3 ? 'is-top' : ''}`}>
+                    {index + 1}
                  </span>
+                  <span className="ehb-station-rank-item__main">
+                    <span className="ehb-station-rank-item__name">{station.name}</span>
+                    <span className="ehb-station-rank-item__bar">
+                      <span style={{ width: `${Math.max(2, station.kg / highestKg * 100)}%` }} />
+                    </span>
+                  </span>
+                  <span className="ehb-station-rank-item__val">
+                    {fmtKg(station.kg).value} {fmtKg(station.kg).unit}
+                  </span>
+                  <span className="ehb-station-rank-item__share">{(station.share * 100).toFixed(1)}%</span>
+                </button>
+              ))}
+              {stations.length === 0 && (
+                <div className="ehb-station-rank-empty">当前筛选下暂无站点数据</div>
+              )}
            </div>
-        <div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
-          时享获利 {yearProfitValue}{yearProfitUnit} · 客户收入 {yearRevenueValue}{yearRevenueUnit}
-          {profitYield < 0 ? ' · 需关注亏损站点与客户价格' : ' · 当前保持正向收益'}
+          </div>
+        )}
+      </div>
+
+      <div className="ehb-insight__card">
+        <div className={`ehb-insight__icon ${customerGrossMarginPct >= 0 ? 'is-ok' : 'is-neg'}`}>
+          <Activity size={18} aria-hidden />
+        </div>
+        <div>
+          <div className="ehb-insight__title">客户单毛利率</div>
+          <div className={`ehb-insight__value ${customerGrossMarginPct >= 0 ? 'is-pos' : 'is-neg'}`}>
+            {customerGrossMarginPct.toFixed(1)}%
+          </div>
+          <div className="ehb-insight__desc">
+            客户单毛利 {yearProfitValue}{yearProfitUnit} · 客户收入 {yearRevenueValue}{yearRevenueUnit}
+            {customerGrossMarginPct < 0 ? ' · 需关注客户价格与站点成本' : ' · 当前客户单保持正毛利'}
          </div>
        </div>
      </div>
+    </div>
+    <OverviewDrillDialog
+      payload={drill}
+      onClose={() => { setDrill(null); setSelectedStationId(null); }}
+      onPrimaryAction={selectedStationId ? () => { const stationId = selectedStationId; setDrill(null); setSelectedStationId(null); onSelectStation(stationId); } : undefined}
+    />
+    </>
  );
 }
@@ -1,43 +1,76 @@
-import type { ReactNode } from 'react';
-import { CalendarDays, Fuel, Sparkles, TrendingUp, Wallet } from 'lucide-react';
+import { Activity, Fuel, Search, Truck, Wallet, Zap } from 'lucide-react';
+import { useState, type ReactNode } from 'react';
 import type { HydrogenKpi } from '../../types';
-import { formatKg as fmtKg, formatYuan as fmtYuan } from '../model';
+import {
+  buildMetricDrillPayload,
+  formatKg as fmtKg,
+  formatYuan as fmtYuan,
+  type OverviewDrillPayload,
+  type OverviewDrillRequest,
+  type OverviewMetricKey,
+  type OverviewScope,
+} from '../model';
+import { OverviewDrillDialog } from './OverviewDrillDialog';

 interface KpiCardProps {
  icon: ReactNode;
+  metricKey: OverviewMetricKey;
  label: string;
  hero: { value: string; unit: string };
-  rows: { label: string; value: string; valueClass?: string }[];
-  accentClass: string;
-  iconBg: string;
+  rows: { label: string; value: string }[];
+  tone: 'blue' | 'green' | 'amber' | 'purple';
+  valueClass?: string;
+  onOpen: (key: OverviewMetricKey) => void;
 }

-function KpiCard({ icon, label, hero, rows, accentClass, iconBg }: KpiCardProps) {
+const TONE_CLASS = {
+  blue: 'bg-blue-50 text-blue-600',
+  green: 'bg-emerald-50 text-emerald-600',
+  amber: 'bg-amber-50 text-amber-600',
+  purple: 'bg-violet-50 text-violet-600',
+} as const;
+
+function KpiCard({ icon, metricKey, label, hero, rows, tone, onOpen }: KpiCardProps) {
+  const isYuan = hero.value.startsWith('¥');
+  const numValue = isYuan ? hero.value.replace('¥', '') : hero.value;
  return (
-    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
-      <div className="flex items-center gap-2">
-        <div className={`w-7 h-7 rounded-xl flex items-center justify-center ${iconBg}`}>
-          {icon}
+    <div
+      className={`ehb-kpi-dual is-${tone}`}
+      onClick={() => onOpen(metricKey)}
+      title="点击查看真实汇总及可用下钻明细"
+    >
+      <div className="ehb-kpi-dual__head">
+        <span className="ehb-kpi-dual__label">
+          {label}
+          <span className="ehb-kpi-drill-hint">
+            <Search size={10} /> 钻取
+          </span>
+        </span>
+        <span className={`ehb-kpi-dual__badge is-${tone}`}>{icon}</span>
      </div>
-        <span className="text-[11px] font-bold text-slate-500">{label}</span>
-      </div>
-      <div className="flex items-baseline gap-1">
-        <span className={`text-xl md:text-2xl font-black tabular-nums leading-none ${accentClass}`}>{hero.value}</span>
-        <span className="text-[11px] text-slate-400 font-bold">{hero.unit}</span>
-      </div>
-      <div className="space-y-0.5 pt-1 border-t border-slate-50">
-        {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={`tabular-nums ${r.valueClass ?? 'text-slate-700'}`}>{r.value}</span>
+      <div className="ehb-kpi-dual__val">
+        {isYuan && <span className="ehb-kpi-dual__symbol">¥</span>}
+        <span className="ehb-kpi-dual__num">{numValue}</span>
+        {hero.unit && <span className="ehb-kpi-dual__unit">{hero.unit}</span>}
      </div>
+      <div className="ehb-kpi-dual__deck">
+        {rows.map((row) => (
+          <span key={row.label}>{row.label} {row.value}</span>
        ))}
      </div>
    </div>
  );
 }

-export function KpiSection({ kpi: k }: { kpi: HydrogenKpi }) {
+interface KpiSectionProps {
+  kpi: HydrogenKpi;
+  scope?: OverviewScope;
+  scopeLabel?: string | null;
+  onDrillRequest?: (request: OverviewDrillRequest) => void;
+}
+
+export function KpiSection({ kpi: k, scope = 'global', scopeLabel, onDrillRequest }: KpiSectionProps) {
+  const [drill, setDrill] = useState<OverviewDrillPayload | null>(null);
  const yearKgFmt = fmtKg(k.yearKg);
  const yearFeeFmt = fmtYuan(k.yearFee);
  const yearProfitFmt = fmtYuan(k.yearProfit);
@@ -50,65 +83,22 @@ export function KpiSection({ kpi: k }: { kpi: HydrogenKpi }) {
  const customerYearFee = Math.max(0, k.yearFee - k.ourYearFee);
  const customerYearFeeFmt = fmtYuan(customerYearFee);
  const yearRevenueFmt = fmtYuan(k.yearRevenue);
-  const profitColor = k.yearProfit >= 0 ? 'text-emerald-600' : 'text-red-600';
+
+  const openDrill = (key: OverviewMetricKey) => {
+    if (onDrillRequest) onDrillRequest({ kind: 'metric', key, label: key });
+    else setDrill(buildMetricDrillPayload(k, key));
+  };

  return (
-    <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"
-        accentClass="text-slate-800"
-        label="累计加氢量"
-        hero={yearKgFmt}
-        rows={[
-          { label: '我司', value: `${ourYearKgFmt.value} ${ourYearKgFmt.unit}` },
-          { label: '客户', value: `${customerYearKgFmt.value} ${customerYearKgFmt.unit}` },
-        ]}
-      />
-      <KpiCard
-        icon={<Wallet size={14} className="text-blue-600" strokeWidth={2.4} />}
-        iconBg="bg-blue-50"
-        accentClass="text-slate-800"
-        label="累计加氢费"
-        hero={{ value: `¥${yearFeeFmt.value}`, unit: yearFeeFmt.unit }}
-        rows={[
-          { label: '我司承担', value: `¥${fmtYuan(k.ourYearFee).value} ${fmtYuan(k.ourYearFee).unit}` },
-          { 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"
-        accentClass="text-amber-600"
-        label="本月加氢"
-        hero={monthKgFmt}
-        rows={[
-          { label: '加氢费', value: `¥${monthFeeFmt.value} ${monthFeeFmt.unit}` },
-          { label: '占年比', value: `${k.yearKg > 0 ? (k.monthKg / k.yearKg * 100).toFixed(1) : '0.0'}%` },
-        ]}
-      />
-      <KpiCard
-        icon={<Sparkles size={14} className="text-violet-600" strokeWidth={2.4} />}
-        iconBg="bg-violet-50"
-        accentClass="text-violet-600"
-        label="本日加氢"
-        hero={todayKgFmt}
-        rows={[
-          { label: '加氢费', value: `¥${todayFeeFmt.value} ${todayFeeFmt.unit}` },
-          { label: '占月比', value: `${k.monthKg > 0 ? (k.todayKg / k.monthKg * 100).toFixed(1) : '0.0'}%` },
-        ]}
-      />
+    <>
+      <div className="ehb-host-kpi" aria-label={`${scope === 'station' ? scopeLabel || '单站' : '全局'}经营指标`}>
+        <KpiCard metricKey="yearKg" icon={<Fuel size={14} />} tone="blue" label="累计加氢量" hero={yearKgFmt} rows={[{ label: '我司', value: `${ourYearKgFmt.value}${ourYearKgFmt.unit}` }, { label: '客户', value: `${customerYearKgFmt.value}${customerYearKgFmt.unit}` }]} onOpen={openDrill} />
+        <KpiCard metricKey="yearFee" icon={<Wallet size={14} />} tone="blue" label="累计加氢费" hero={{ value: `¥${yearFeeFmt.value}`, unit: yearFeeFmt.unit }} rows={[{ label: '我司', value: `¥${fmtYuan(k.ourYearFee).value}${fmtYuan(k.ourYearFee).unit}` }, { label: '客户', value: `¥${customerYearFeeFmt.value}${customerYearFeeFmt.unit}` }]} onOpen={openDrill} />
+        <KpiCard metricKey="yearProfit" icon={<Activity size={14} />} tone="green" label="客户单毛利" hero={{ value: `¥${yearProfitFmt.value}`, unit: yearProfitFmt.unit }} rows={[{ label: '收入', value: `¥${yearRevenueFmt.value}${yearRevenueFmt.unit}` }, { label: '成本', value: `¥${customerYearFeeFmt.value}${customerYearFeeFmt.unit}` }]} onOpen={openDrill} />
+        <KpiCard metricKey="monthKg" icon={<Truck size={14} />} tone="amber" label="本月加氢" hero={monthKgFmt} rows={[{ label: '加氢费', value: `¥${monthFeeFmt.value}${monthFeeFmt.unit}` }, { label: '占年比', value: `${k.yearKg > 0 ? (k.monthKg / k.yearKg * 100).toFixed(1) : '0.0'}%` }]} onOpen={openDrill} />
+        <KpiCard metricKey="todayKg" icon={<Zap size={14} />} tone="purple" label="本日加氢" hero={todayKgFmt} rows={[{ label: '加氢费', value: `¥${todayFeeFmt.value}${todayFeeFmt.unit}` }, { label: '占月比', value: `${k.monthKg > 0 ? (k.todayKg / k.monthKg * 100).toFixed(1) : '0.0'}%` }]} onOpen={openDrill} />
      </div>
+      <OverviewDrillDialog payload={drill} onClose={() => setDrill(null)} />
+    </>
  );
 }
@@ -1,15 +1,23 @@
 import {
  Bar,
  BarChart,
-  Cell,
+  LabelList,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
 } from 'recharts';
+import { useState } from 'react';
 import type { HydrogenMonthlyPoint } from '../../types';
-import { formatYuan as fmtYuan } from '../model';
+import {
+  buildMonthDrillPayload,
+  formatYuan as fmtYuan,
+  type OverviewDrillPayload,
+  type OverviewDrillRequest,
+  type OverviewScope,
+} from '../model';
+import { OverviewDrillDialog } from './OverviewDrillDialog';

 type MonthlyChartPoint = HydrogenMonthlyPoint & { monthLabel: string };

@@ -17,19 +25,36 @@ interface MonthlyChartsProps {
  activeYear: number;
  monthly: HydrogenMonthlyPoint[];
  monthlyDual: MonthlyChartPoint[];
+  scope?: OverviewScope;
+  scopeLabel?: string | null;
+  onDrillRequest?: (request: OverviewDrillRequest) => void;
 }

-export function MonthlyCharts({ activeYear, monthly, monthlyDual }: MonthlyChartsProps) {
+export function MonthlyCharts({ activeYear, monthly, monthlyDual, scope = 'global', scopeLabel, onDrillRequest }: MonthlyChartsProps) {
+  const [drill, setDrill] = useState<OverviewDrillPayload | null>(null);
+  const openMonthPoint = (point: MonthlyChartPoint | undefined) => {
+    if (!point) return;
+    if (onDrillRequest) onDrillRequest({ kind: 'month', key: point.month, label: `${point.month} 月度经营明细` });
+    else setDrill(buildMonthDrillPayload(point));
+  };
+  const openMonthFromChart = (state: unknown) => {
+    openMonthPoint((state as { activePayload?: { payload?: MonthlyChartPoint }[] } | undefined)?.activePayload?.[0]?.payload);
+  };
+  const openMonthFromBar = (entry: unknown) => {
+    openMonthPoint((entry as { payload?: MonthlyChartPoint } | undefined)?.payload);
+  };
+  const scopeText = scope === 'station' && scopeLabel ? ` · ${scopeLabel}` : '';
  return (
    <>
      {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">单位 Kg</span>
+        <div className="ehb-chart-box">
+          <div className="ehb-chart-box-head">
+            <div className="ehb-chart-box-title">{activeYear} 年月度加氢量{scopeText}</div>
+            <div className="ehb-chart-box-meta">单位：Kg</div>
          </div>
-          <ResponsiveContainer width="100%" height={140}>
-            <BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
+          <div className="ehb-chart-box-body">
+          <ResponsiveContainer width="100%" height="100%" minWidth={0} initialDimension={{ width: 1, height: 200 }}>
+            <BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }} onClick={openMonthFromChart} className="cursor-pointer">
              <XAxis
                dataKey="monthLabel"
                tick={{ fontSize: 10, fill: '#94a3b8' }}
@@ -44,30 +69,29 @@ export function MonthlyCharts({ activeYear, monthly, monthlyDual }: MonthlyChart
                contentStyle={{ borderRadius: 12, fontSize: 12 }}
                cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
              />
-              <Bar dataKey="kg" radius={[4, 4, 0, 0]}>
-                {monthlyDual.map((_, i) => (
-                  <Cell key={i} fill="url(#monthlyBarGrad)" />
-                ))}
+              <Legend verticalAlign="top" height={24} iconSize={8} wrapperStyle={{ fontSize: 11, paddingBottom: 4 }} />
+              <Bar dataKey="lingniuKg" name="羚牛车辆" stackId="kg" fill="#4ba3df" radius={[0, 0, 0, 0]} onClick={openMonthFromBar} />
+              <Bar dataKey="externalKg" name="外部车辆" stackId="kg" fill="#f4bb45" radius={[4, 4, 0, 0]} onClick={openMonthFromBar}>
+                <LabelList dataKey="kg" position="top" formatter={value => {
+                  const total = Number(value ?? 0);
+                  return total >= 1000 ? `${(total / 1000).toFixed(1)}k` : total.toFixed(0);
+                }} fill="#475569" fontSize={10} fontWeight={700} />
              </Bar>
-              <defs>
-                <linearGradient id="monthlyBarGrad" x1="0" x2="0" y1="0" y2="1">
-                  <stop offset="0%" stopColor="#22d3ee" />
-                  <stop offset="100%" stopColor="#3b82f6" />
-                </linearGradient>
-              </defs>
            </BarChart>
          </ResponsiveContainer>
          </div>
+        </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 className="ehb-chart-box">
+          <div className="ehb-chart-box-head">
+            <div className="ehb-chart-box-title">{activeYear} 年月度收支对比{scopeText}</div>
+            <div className="ehb-chart-box-meta">单位：元</div>
          </div>
-          <ResponsiveContainer width="100%" height={180}>
-            <BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
+          <div className="ehb-chart-box-body">
+          <ResponsiveContainer width="100%" height="100%" minWidth={0} initialDimension={{ width: 1, height: 200 }}>
+            <BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }} onClick={openMonthFromChart} className="cursor-pointer">
              <XAxis
                dataKey="monthLabel"
                tick={{ fontSize: 10, fill: '#94a3b8' }}
@@ -90,12 +114,14 @@ export function MonthlyCharts({ activeYear, monthly, monthlyDual }: MonthlyChart
                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]} />
+              <Bar dataKey="fee" name="成本支出" fill="#f59e0b" radius={[3, 3, 0, 0]} onClick={openMonthFromBar} />
+              <Bar dataKey="revenue" name="客户收入" fill="#10b981" radius={[3, 3, 0, 0]} onClick={openMonthFromBar} />
            </BarChart>
          </ResponsiveContainer>
          </div>
+        </div>
      )}
+      <OverviewDrillDialog payload={drill} onClose={() => setDrill(null)} />
    </>
  );
 }
@@ -0,0 +1,165 @@
+import { ChevronLeft, Database, ExternalLink, Search, X } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { OverviewDrillPayload } from '../model';
+import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from '../../components/SortableColumnHeader';
+
+interface OverviewDrillDialogProps {
+  payload: OverviewDrillPayload | null;
+  onClose: () => void;
+  onPrimaryAction?: () => void;
+  onGroupByChange?: (groupBy: 'station' | 'customer' | 'vehicle') => void;
+  onRowSelect?: (row: Record<string, string | number>) => void;
+}
+
+const TONE_CLASS = {
+  default: 'text-slate-900',
+  blue: 'text-sky-600',
+  green: 'text-emerald-600',
+  amber: 'text-amber-600',
+  red: 'text-rose-600',
+} as const;
+
+export function OverviewDrillDialog({ payload, onClose, onPrimaryAction, onGroupByChange, onRowSelect }: OverviewDrillDialogProps) {
+  const [sortKey, setSortKey] = useState('');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  useEffect(() => {
+    if (!payload) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onClose, payload]);
+
+  useEffect(() => {
+    if (!payload?.columns.length) return;
+    setSortKey(payload.columns[0].key);
+    setSortDirection('desc');
+  }, [payload]);
+
+  const sortedRows = useMemo(
+    () => payload ? sortBy(payload.rows, sortKey, sortDirection, (row, key) => row[key]) : [],
+    [payload, sortDirection, sortKey],
+  );
+  const changeSort = (nextKey: string) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+
+  if (!payload || typeof document === 'undefined') return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[1000] flex items-center justify-center bg-slate-950/70 p-3 backdrop-blur-[8px] md:p-5"
+      onMouseDown={event => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+      role="presentation"
+    >
+      <section
+        className="flex max-h-[90vh] w-full max-w-[1100px] flex-col overflow-hidden rounded-xl border border-slate-200/80 bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.35)]"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="overview-drill-title"
+      >
+        <header className="flex items-center justify-between gap-3 bg-slate-900 px-3 py-3 text-white md:px-5 md:py-4">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <button type="button" onClick={onClose} className="inline-flex h-8 shrink-0 items-center gap-1 rounded-lg border border-white/20 bg-white/10 px-2.5 text-[12px] font-bold text-slate-100 transition hover:border-sky-400 hover:bg-sky-400/15 hover:text-sky-300">
+              <ChevronLeft size={16} />
+              <span className="hidden sm:inline">返回</span>
+            </button>
+            <div className="min-w-0">
+              <h2 id="overview-drill-title" className="flex items-center gap-2 truncate text-[14px] font-bold text-slate-50 md:text-[16px]">
+                <Search size={16} className="shrink-0 text-sky-300" />
+                <span className="truncate">{payload.title}</span>
+              </h2>
+              <p className="mt-0.5 truncate text-[11px] font-medium text-slate-400 md:text-[12px]">{payload.subtitle}</p>
+            </div>
+          </div>
+          <button type="button" onClick={onClose} className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-white/10 text-slate-300 transition hover:bg-rose-500/80 hover:text-white" aria-label="关闭下钻弹层">
+            <X size={17} />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto bg-slate-50 p-3 md:p-5">
+          <div className="grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-white p-3 md:grid-cols-4 md:gap-4 md:px-[18px] md:py-[14px]">
+            {payload.metrics.map(metric => (
+              <div key={metric.label} className="min-w-0">
+                <div className="text-[11px] font-medium text-slate-500">{metric.label}</div>
+                <div className={`mt-1 truncate text-[16px] font-extrabold tabular-nums ${TONE_CLASS[metric.tone ?? 'default']}`} title={metric.value}>{metric.value}</div>
+              </div>
+            ))}
+          </div>
+
+          {payload.groupByOptions?.length && onGroupByChange ? (
+            <div className="mt-4 flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2.5">
+              <div className="text-[11px] font-medium text-slate-500">汇总维度</div>
+              <div className="flex rounded-md bg-slate-100 p-0.5">
+                {payload.groupByOptions.map(groupBy => (
+                  <button
+                    key={groupBy}
+                    type="button"
+                    onClick={() => onGroupByChange(groupBy)}
+                    className={`rounded px-3 py-1.5 text-[11px] font-bold transition ${payload.groupBy === groupBy ? 'bg-white text-sky-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+                  >
+                    按{groupBy === 'customer' ? '客户' : groupBy === 'station' ? '加氢站' : '车辆'}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {payload.columns.length > 0 && payload.rows.length > 0 ? (
+            <div className="mt-4 max-h-[440px] overflow-auto rounded-lg border border-slate-200 bg-white">
+              <table className="w-full min-w-[620px] border-collapse text-left">
+                <thead className="sticky top-0 z-10 bg-slate-100">
+                  <tr>
+                    {payload.columns.map(column => (
+                      <th key={column.key} className={`border-b border-slate-200 px-3 py-2.5 text-[11px] font-bold text-slate-600 ${column.align === 'right' ? 'text-right' : 'text-left'}`}><SortableColumnHeader label={column.label} sortKey={column.key} activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align={column.align === 'right' ? 'right' : 'left'} /></th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {sortedRows.map((row, rowIndex) => (
+                    <tr
+                      key={rowIndex}
+                      className={`border-b border-slate-100 last:border-0 hover:bg-slate-50 ${onRowSelect && payload.rowActionLabel ? 'cursor-pointer' : ''}`}
+                      onClick={() => onRowSelect?.(row)}
+                      title={onRowSelect && payload.rowActionLabel ? payload.rowActionLabel : undefined}
+                    >
+                      {payload.columns.map(column => (
+                        <td key={column.key} className={`whitespace-nowrap px-3 py-2.5 text-[12px] text-slate-700 ${column.align === 'right' ? 'text-right font-semibold tabular-nums' : 'text-left'}`}>{row[column.key]}</td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div className="mt-4 flex min-h-[180px] flex-col items-center justify-center rounded-lg border border-dashed border-slate-300 bg-white px-5 text-center">
+              <span className="grid h-10 w-10 place-items-center rounded-lg bg-sky-50 text-sky-600"><Database size={19} /></span>
+              <div className="mt-3 text-[13px] font-bold text-slate-700">真实明细尚未接入当前总览接口</div>
+              <p className="mt-1 max-w-[620px] text-[11px] font-medium leading-5 text-slate-500">{payload.emptyMessage}</p>
+            </div>
+          )}
+
+          {payload.primaryActionLabel && onPrimaryAction ? (
+            <div className="mt-4 flex justify-end">
+              <button type="button" onClick={onPrimaryAction} className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-sky-600 px-3.5 text-[12px] font-bold text-white shadow-sm transition hover:bg-sky-700">
+                {payload.primaryActionLabel}<ExternalLink size={14} />
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </section>
+    </div>,
+    document.body,
+  );
+}
@@ -0,0 +1,378 @@
+import { ChevronDown, ChevronRight, Database, Download, Search, Truck, X } from 'lucide-react';
+import { Fragment, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import * as XLSX from 'xlsx';
+import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from '../../components/SortableColumnHeader';
+import type {
+  HydrogenOverviewDetailGroup,
+  HydrogenOverviewDetailGroupBy,
+  HydrogenOverviewDetailRecord,
+  HydrogenOverviewDetailResponse,
+} from '../../types';
+import type { HydrogenVehicleScope } from '../../api';
+
+type Selection = {
+  stationId?: number | null;
+  customerId?: number | null;
+  customerName?: string | null;
+  plateNo?: string | null;
+};
+
+type TreeSortKey = 'name' | 'ownership' | 'source' | 'verify' | 'recordCount' | 'kg' | 'cost' | 'revenue';
+
+interface OverviewDrillTreeDialogProps {
+  title: string;
+  initialVehicleScope: HydrogenVehicleScope;
+  initialSelection?: Selection;
+  load: (
+    groupBy: HydrogenOverviewDetailGroupBy | null,
+    selection: Selection,
+    vehicleScope: HydrogenVehicleScope,
+    includeAll?: boolean,
+  ) => Promise<HydrogenOverviewDetailResponse>;
+  onClose: () => void;
+}
+
+const number = (value: number, digits = 2) => value.toLocaleString('zh-CN', { minimumFractionDigits: digits, maximumFractionDigits: digits });
+const customerKey = (stationId: number | string, customer: HydrogenOverviewDetailGroup) => `${stationId}:${customer.id}:${customer.name}`;
+const vehicleKey = (stationId: number | string, customer: HydrogenOverviewDetailGroup, vehicle: HydrogenOverviewDetailGroup) => `${customerKey(stationId, customer)}:${vehicle.name}`;
+
+/** 原型定义的四层账本树：加氢站 -> 客户 -> 车辆 -> 单笔订单与核对明细。 */
+export function OverviewDrillTreeDialog({ title, initialVehicleScope, initialSelection = {}, load, onClose }: OverviewDrillTreeDialogProps) {
+  const [root, setRoot] = useState<HydrogenOverviewDetailResponse | null>(null);
+  const [customers, setCustomers] = useState<Record<string, HydrogenOverviewDetailGroup[]>>({});
+  const [vehicles, setVehicles] = useState<Record<string, HydrogenOverviewDetailGroup[]>>({});
+  const [orders, setOrders] = useState<Record<string, HydrogenOverviewDetailRecord[]>>({});
+  const [openStations, setOpenStations] = useState<Record<string, boolean>>({});
+  const [openCustomers, setOpenCustomers] = useState<Record<string, boolean>>({});
+  const [openVehicles, setOpenVehicles] = useState<Record<string, boolean>>({});
+  const [loading, setLoading] = useState<string | null>('root');
+  const [stationFilter, setStationFilter] = useState('all');
+  const [customerFilter, setCustomerFilter] = useState('all');
+  const [plateFilter, setPlateFilter] = useState('all');
+  const [vehicleScope, setVehicleScope] = useState<HydrogenVehicleScope>(initialVehicleScope);
+  const [exporting, setExporting] = useState(false);
+  const [sortKey, setSortKey] = useState<TreeSortKey>('kg');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const loadRoot = useCallback(async (scope: HydrogenVehicleScope) => {
+    setLoading('root');
+    setCustomers({});
+    setVehicles({});
+    setOrders({});
+    setOpenStations({});
+    setOpenCustomers({});
+    setOpenVehicles({});
+    try {
+      setRoot(await load('station', initialSelection, scope));
+    } catch {
+      setRoot(null);
+    } finally {
+      setLoading(null);
+    }
+  }, [initialSelection, load]);
+
+  useEffect(() => { void loadRoot(vehicleScope); }, [loadRoot, vehicleScope]);
+
+  const toggleStation = async (station: HydrogenOverviewDetailGroup) => {
+    const key = String(station.id);
+    if (openStations[key]) {
+      setOpenStations(value => ({ ...value, [key]: false }));
+      return;
+    }
+    setOpenStations(value => ({ ...value, [key]: true }));
+    if (customers[key]) return;
+    setLoading(`station:${key}`);
+    try {
+      const data = await load('customer', { ...initialSelection, stationId: Number(station.id) || null }, vehicleScope);
+      setCustomers(value => ({ ...value, [key]: data.groups }));
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const toggleCustomer = async (stationId: number | string, customer: HydrogenOverviewDetailGroup) => {
+    const key = customerKey(stationId, customer);
+    if (openCustomers[key]) {
+      setOpenCustomers(value => ({ ...value, [key]: false }));
+      return;
+    }
+    setOpenCustomers(value => ({ ...value, [key]: true }));
+    if (vehicles[key]) return;
+    setLoading(`customer:${key}`);
+    try {
+      const data = await load('vehicle', {
+        ...initialSelection,
+        stationId: Number(stationId) || null,
+        customerId: Number(customer.id) || 0,
+        customerName: customer.name,
+      }, vehicleScope);
+      setVehicles(value => ({ ...value, [key]: data.groups }));
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const toggleVehicle = async (stationId: number | string, customer: HydrogenOverviewDetailGroup, vehicle: HydrogenOverviewDetailGroup) => {
+    const key = vehicleKey(stationId, customer, vehicle);
+    if (openVehicles[key]) {
+      setOpenVehicles(value => ({ ...value, [key]: false }));
+      return;
+    }
+    setOpenVehicles(value => ({ ...value, [key]: true }));
+    if (orders[key]) return;
+    setLoading(`vehicle:${key}`);
+    try {
+      const data = await load(null, {
+        ...initialSelection,
+        stationId: Number(stationId) || null,
+        customerId: Number(customer.id) || 0,
+        customerName: customer.name,
+        plateNo: vehicle.name,
+      }, vehicleScope);
+      setOrders(value => ({ ...value, [key]: data.records }));
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const stationOptions = root?.groups ?? [];
+  const selectedStation = stationFilter === 'all' ? null : stationOptions.find(station => String(station.id) === stationFilter) ?? null;
+  const customerOptions = selectedStation ? customers[String(selectedStation.id)] ?? [] : [];
+  const selectedCustomer = customerFilter === 'all' ? null : customerOptions.find(customer => customerKey(selectedStation?.id ?? '', customer) === customerFilter) ?? null;
+  const plateOptions = selectedStation && selectedCustomer ? vehicles[customerKey(selectedStation.id, selectedCustomer)] ?? [] : [];
+  const visibleStations = useMemo(() => {
+    const filtered = stationFilter === 'all' ? stationOptions : stationOptions.filter(station => String(station.id) === stationFilter);
+    return sortTreeGroups(filtered, sortKey, sortDirection);
+  }, [sortDirection, sortKey, stationFilter, stationOptions]);
+
+  const selectStation = (value: string) => {
+    setStationFilter(value);
+    setCustomerFilter('all');
+    setPlateFilter('all');
+    const station = stationOptions.find(item => String(item.id) === value);
+    if (station && !openStations[String(station.id)]) void toggleStation(station);
+  };
+
+  const selectCustomer = (value: string) => {
+    setCustomerFilter(value);
+    setPlateFilter('all');
+    const customer = customerOptions.find(item => customerKey(selectedStation?.id ?? '', item) === value);
+    if (selectedStation && customer && !openCustomers[value]) void toggleCustomer(selectedStation.id, customer);
+  };
+
+  const changeVehicleScope = (scope: HydrogenVehicleScope) => {
+    if (scope === vehicleScope) return;
+    setVehicleScope(scope);
+    setStationFilter('all');
+    setCustomerFilter('all');
+    setPlateFilter('all');
+  };
+
+  const changeSort = (nextKey: TreeSortKey) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+
+  const exportAll = async () => {
+    setExporting(true);
+    try {
+      const detail = await load(null, {
+        ...initialSelection,
+        stationId: selectedStation ? Number(selectedStation.id) || null : null,
+        customerId: selectedCustomer ? Number(selectedCustomer.id) || 0 : null,
+        customerName: selectedCustomer?.name ?? null,
+        plateNo: plateFilter === 'all' ? null : plateFilter,
+      }, vehicleScope, true);
+      const rows = detail.records.map(record => ({
+        加氢时间: record.refuelTime,
+        加氢站: record.stationName,
+        客户: record.customerName,
+        车牌: record.plateNo,
+        车辆归属: record.vehicleScope === 'lingniu' ? '羚牛车辆' : '外部车辆',
+        数据来源: record.source,
+        核对状态: verifyText(record.verifyStatus),
+        订单编号: record.orderNo,
+        加氢量Kg: record.kg,
+        成本元: record.cost,
+        客户收入元: record.revenue,
+      }));
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(rows), '穿透账单');
+      XLSX.writeFile(workbook, `${title.replaceAll(/[\\/:*?"<>|]/g, '_')}_穿透账单.xlsx`);
+      if (detail.truncated) window.alert('当前筛选范围超过 20,000 笔，导出已截取前 20,000 笔。请收窄筛选范围后再次导出。');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  if (typeof document === 'undefined') return null;
+  const summary = root?.summary;
+  return createPortal(
+    <div className="ehb-modal-overlay" onMouseDown={event => { if (event.target === event.currentTarget) onClose(); }}>
+      <section className="ehb-modal-card" role="dialog" aria-modal="true" aria-label={`${title}穿透明细`}>
+        <header className="ehb-modal-head">
+          <div className="ehb-modal-head__title-group">
+            <div>
+              <h2 className="ehb-modal-head__title">{title}</h2>
+              <p className="ehb-modal-head__sub">加氢站 → 客户 → 车辆 → 单笔订单与核对明细</p>
+            </div>
+          </div>
+          <button type="button" onClick={onClose} className="ehb-modal-close-btn" aria-label="关闭下钻弹层"><X size={17} /></button>
+        </header>
+        <div className="ehb-modal-body">
+          <div className="ehb-modal-meta-bar">
+            <Metric label="统计范围" value={title} />
+            <Metric label="加氢总量" value={`${number(summary?.kg ?? 0, 2)} Kg`} tone="text-sky-600" />
+            <Metric label="涉及加氢站" value={`${summary?.stationCount ?? 0} 站`} />
+            <Metric label="账本流水" value={`${summary?.recordCount ?? 0} 笔`} />
+          </div>
+
+          <div className="ehb-modal-filter-row">
+            <div className="ehb-modal-filter-group">
+              <SearchSelect allLabel="全部加氢站" value={stationFilter} onChange={selectStation} options={stationOptions.map(item => ({ value: String(item.id), label: item.name }))} />
+              <SearchSelect allLabel="全部客户" value={customerFilter} onChange={selectCustomer} disabled={!selectedStation} options={customerOptions.map(item => ({ value: customerKey(selectedStation?.id ?? '', item), label: item.name }))} />
+              <SearchSelect allLabel="全部车辆" value={plateFilter} onChange={setPlateFilter} disabled={!selectedCustomer} options={plateOptions.map(item => ({ value: item.name, label: item.name }))} />
+              <div className="flex h-8 overflow-hidden rounded-md border border-slate-300 bg-white text-[11px]">
+                {([{ key: 'all', label: '全部车辆' }, { key: 'lingniu', label: '仅羚牛车辆' }, { key: 'external', label: '仅外部车辆' }] as const).map(item => (
+                  <button key={item.key} type="button" onClick={() => changeVehicleScope(item.key)} className={`inline-flex items-center gap-1 px-2.5 font-medium transition-colors ${vehicleScope === item.key ? 'bg-sky-50 text-sky-700 shadow-sm' : 'text-slate-500 hover:bg-slate-50'}`}>
+                    {item.key !== 'all' ? <Truck size={13} /> : null}{item.label}
+                  </button>
+                ))}
+              </div>
+              <p className="ehb-modal-hint-text">提示：点击表格行可四级层层展开</p>
+            </div>
+            <button type="button" onClick={() => void exportAll()} disabled={exporting} className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-slate-300 bg-white px-2.5 text-[11px] font-semibold text-slate-600 transition-colors hover:border-sky-300 hover:bg-sky-50 hover:text-sky-700 disabled:opacity-60">
+              <Download size={14} />{exporting ? '正在导出…' : '导出 Excel 穿透账单'}
+            </button>
+          </div>
+
+          <p className="mb-2 text-center text-[11px] text-slate-400 md:hidden">左右滑动查看完整数据与凭证列</p>
+          <div className="ehb-modal-table-wrap is-v-scroll">
+            <table className="ehb-modal-table min-w-[1080px]">
+              <thead className="sticky top-0 z-10">
+                <tr>
+                  <th className="min-w-[240px] border-b border-slate-200 px-3 py-2.5"><SortableColumnHeader label="加氢站 / 客户 / 车辆与凭证链路" sortKey="name" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5"><SortableColumnHeader label="类型 / 归属" sortKey="ownership" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5"><SortableColumnHeader label="数据来源及凭证号" sortKey="source" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5"><SortableColumnHeader label="核对状态" sortKey="verify" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5 text-right"><SortableColumnHeader label="加氢笔数" sortKey="recordCount" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5 text-right"><SortableColumnHeader label="加氢总量 (Kg)" sortKey="kg" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5 text-right"><SortableColumnHeader label="成本 (元)" sortKey="cost" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th className="border-b border-slate-200 px-3 py-2.5 text-right"><SortableColumnHeader label="客户收入 (元)" sortKey="revenue" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                </tr>
+              </thead>
+              <tbody>
+                {visibleStations.map(station => {
+                  const stationKey = String(station.id);
+                  return <StationBranch key={`${stationKey}:${station.name}`} station={station} expanded={Boolean(openStations[stationKey])} loadingKey={loading} customers={customers[stationKey] ?? []} customerFilter={customerFilter} plateFilter={plateFilter} openCustomers={openCustomers} vehicles={vehicles} orders={orders} openVehicles={openVehicles} sortKey={sortKey} sortDirection={sortDirection} onStation={() => void toggleStation(station)} onCustomer={customer => void toggleCustomer(station.id, customer)} onVehicle={(customer, vehicle) => void toggleVehicle(station.id, customer, vehicle)} />;
+                })}
+              </tbody>
+            </table>
+          </div>
+          {!root && loading === null ? <div className="mt-4 flex items-center gap-2 rounded-lg border border-dashed border-slate-300 bg-white p-5 text-sm text-slate-500"><Database size={18} />真实账本读取失败，请关闭后重试。</div> : null}
+        </div>
+      </section>
+    </div>, document.body,
+  );
+}
+
+function Metric({ label, value, tone = 'text-slate-900' }: { label: string; value: string; tone?: string }) {
+  return <div className="ehb-modal-meta-item"><div className="ehb-modal-meta-label">{label}</div><div className={`ehb-modal-meta-val ${tone}`} title={value}>{value}</div></div>;
+}
+
+function SearchSelect({ allLabel, value, onChange, options, disabled = false }: { allLabel: string; value: string; onChange: (value: string) => void; options: { value: string; label: string }[]; disabled?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const selected = options.find(option => option.value === value);
+  const filtered = options.filter(option => option.label.toLowerCase().includes(keyword.trim().toLowerCase()));
+  const pick = (next: string) => {
+    onChange(next);
+    setOpen(false);
+    setKeyword('');
+  };
+  return <div className={`ehb-bi-search-select w-[170px] ${disabled ? 'is-disabled' : ''}`}>
+    <button type="button" aria-label={allLabel} aria-expanded={open} disabled={disabled} onClick={() => setOpen(value => !value)} className={`ehb-bi-search-select__trigger ${open ? 'is-open' : ''} ${selected ? 'has-value' : ''}`}>
+      <span className="ehb-bi-search-select__label">{selected?.label ?? allLabel}</span><ChevronDown size={14} className="ehb-bi-search-select__chevron" />
+    </button>
+    {open ? <div className="ehb-bi-search-select__dropdown">
+      <label className="ehb-bi-search-select__search"><Search size={13} /><input autoFocus value={keyword} onChange={event => setKeyword(event.target.value)} placeholder={`搜索${allLabel.replace('全部', '')}…`} /></label>
+      <div className="ehb-bi-search-select__list">
+        <button type="button" onClick={() => pick('all')} className={`ehb-bi-search-select__item ${value === 'all' ? 'is-selected' : ''}`}>{allLabel}</button>
+        {filtered.map(option => <button key={option.value} type="button" onClick={() => pick(option.value)} className={`ehb-bi-search-select__item ${value === option.value ? 'is-selected' : ''}`}>{option.label}</button>)}
+        {filtered.length === 0 ? <p className="ehb-bi-search-select__empty">暂无匹配结果</p> : null}
+      </div>
+    </div> : null}
+  </div>;
+}
+
+function ExpandMark({ open }: { open: boolean }) { return open ? <ChevronDown size={15} className="shrink-0 text-sky-600" /> : <ChevronRight size={15} className="shrink-0 text-sky-600" />; }
+
+function StationBranch({ station, expanded, loadingKey, customers, customerFilter, plateFilter, openCustomers, vehicles, orders, openVehicles, sortKey, sortDirection, onStation, onCustomer, onVehicle }: {
+  station: HydrogenOverviewDetailGroup; expanded: boolean; loadingKey: string | null; customers: HydrogenOverviewDetailGroup[]; customerFilter: string; plateFilter: string; openCustomers: Record<string, boolean>; vehicles: Record<string, HydrogenOverviewDetailGroup[]>; orders: Record<string, HydrogenOverviewDetailRecord[]>; openVehicles: Record<string, boolean>; sortKey: TreeSortKey; sortDirection: SortDirection; onStation: () => void; onCustomer: (customer: HydrogenOverviewDetailGroup) => void; onVehicle: (customer: HydrogenOverviewDetailGroup, vehicle: HydrogenOverviewDetailGroup) => void;
+}) {
+  const stationKey = String(station.id);
+  const visibleCustomers = sortTreeGroups(customerFilter === 'all' ? customers : customers.filter(customer => customerKey(station.id, customer) === customerFilter), sortKey, sortDirection);
+  return <>
+    <TreeRow className={expanded ? 'bg-sky-50 font-bold' : 'bg-slate-50 font-bold'} onClick={onStation} label={<><ExpandMark open={expanded} />{station.name}<span className="ml-2 text-[11px] font-medium text-slate-400">({station.customerCount} 家客户)</span></>} ownership="-" source="全量自动归集" verify="-" group={station} />
+    {expanded && visibleCustomers.map(customer => {
+      const key = customerKey(stationKey, customer);
+      const childVehicles = vehicles[key] ?? [];
+      const visibleVehicles = sortTreeGroups(plateFilter === 'all' ? childVehicles : childVehicles.filter(vehicle => vehicle.name === plateFilter), sortKey, sortDirection);
+      return <Fragment key={key}>
+        <TreeRow className={openCustomers[key] ? 'bg-slate-100' : 'bg-white'} onClick={() => onCustomer(customer)} indent={1} label={<><ExpandMark open={Boolean(openCustomers[key])} />└─ 客户：{customer.name}</>} ownership="客户" source={`${childVehicles.length || '待'} 辆车挂载`} verify="-" group={customer} />
+        {openCustomers[key] && visibleVehicles.map(vehicle => {
+          const key = vehicleKey(stationKey, customer, vehicle);
+          return <Fragment key={key}>
+            <TreeRow className={openVehicles[key] ? 'bg-slate-100 text-[11px]' : 'bg-white text-[11px]'} onClick={() => onVehicle(customer, vehicle)} indent={2} label={<><ExpandMark open={Boolean(openVehicles[key])} /><strong>{vehicle.name}</strong><span className="ml-1 text-[10px] font-normal text-slate-400">({vehicle.recordCount} 笔订单)</span></>} ownership={vehicle.vehicleScope === 'lingniu' ? '羚牛车辆' : '外部车辆'} source={vehicle.source ?? '未知来源'} verify={verifyText(vehicle.verifyStatus)} group={vehicle} />
+            {openVehicles[key] && <OrderRows orders={orders[key] ?? []} sortKey={sortKey} sortDirection={sortDirection} />}
+          </Fragment>;
+        })}
+        {openCustomers[key] && loadingKey === `customer:${key}` ? <LoadingRow text="正在读取车辆汇总…" /> : null}
+      </Fragment>;
+    })}
+    {expanded && loadingKey === `station:${stationKey}` ? <LoadingRow text="正在读取客户汇总…" /> : null}
+  </>;
+}
+
+function TreeRow({ label, ownership, source, verify, group, indent = 0, className, onClick }: { label: ReactNode; ownership: string; source: string; verify: string; group: HydrogenOverviewDetailGroup; indent?: number; className: string; onClick: () => void }) {
+  return <tr className={`${className} cursor-pointer border-b border-slate-100 transition-colors hover:bg-slate-50`} onClick={onClick}><td className="px-3 py-2.5" style={{ paddingLeft: `${12 + indent * 16}px` }}><span className="inline-flex items-center gap-1.5">{label}</span></td><td className="px-3 py-2.5 text-slate-500">{ownership}</td><td className="px-3 py-2.5 text-[11px] text-slate-500">{source}</td><td className="px-3 py-2.5">{verify === '-' ? <span className="text-slate-400">-</span> : <VerifyTag value={verify} />}</td><td className="px-3 py-2.5 text-right font-mono text-slate-600">{group.recordCount} 笔</td><td className="px-3 py-2.5 text-right font-mono font-semibold text-sky-600">{number(group.kg, 3)}</td><td className="px-3 py-2.5 text-right font-mono">{number(group.cost)}</td><td className="px-3 py-2.5 text-right font-mono">{number(group.revenue)}</td></tr>;
+}
+
+function OrderRows({ orders, sortKey, sortDirection }: { orders: HydrogenOverviewDetailRecord[]; sortKey: TreeSortKey; sortDirection: SortDirection }) {
+  return <>{sortTreeOrders(orders, sortKey, sortDirection).map(order => <tr key={order.id} className="border-b border-slate-100 bg-slate-50 text-[11px]"><td className="px-3 py-2" style={{ paddingLeft: '76px' }}><span className="mr-1.5 text-slate-300">└──</span><span className="mr-1 text-[10px] text-slate-500">订单编号</span><span className="font-mono font-semibold text-sky-600">{order.orderNo || order.id}</span><span className="ml-1 text-[10px] text-slate-500">({order.refuelTime})</span></td><td className="px-3 py-2 text-[10px] text-slate-500">单价 ¥{order.costPrice.toFixed(2)}/Kg</td><td className="px-3 py-2">{order.source}</td><td className="px-3 py-2"><VerifyTag value={verifyText(order.verifyStatus)} /></td><td className="px-3 py-2 text-right font-mono text-slate-400">1 笔</td><td className="px-3 py-2 text-right font-mono text-sky-600">{number(order.kg, 3)}</td><td className="px-3 py-2 text-right font-mono">{number(order.cost)}</td><td className="px-3 py-2 text-right font-mono">{number(order.revenue)}</td></tr>)}</>;
+}
+
+function sortTreeGroups(rows: HydrogenOverviewDetailGroup[], sortKey: TreeSortKey, sortDirection: SortDirection) {
+  return sortBy(rows, sortKey, sortDirection, (row, key) => {
+    if (key === 'ownership') return row.vehicleScope ?? '';
+    if (key === 'verify') return row.verifyStatus ?? '';
+    return row[key === 'name' ? 'name' : key] ?? '';
+  });
+}
+
+function sortTreeOrders(rows: HydrogenOverviewDetailRecord[], sortKey: TreeSortKey, sortDirection: SortDirection) {
+  return sortBy(rows, sortKey, sortDirection, (row, key) => {
+    if (key === 'name') return row.orderNo || row.id;
+    if (key === 'ownership') return row.vehicleScope;
+    if (key === 'verify') return row.verifyStatus;
+    if (key === 'recordCount') return 1;
+    return row[key] ?? '';
+  });
+}
+
+function LoadingRow({ text }: { text: string }) { return <tr><td className="px-8 py-3 text-xs text-slate-400" colSpan={8}>{text}</td></tr>; }
+
+function verifyText(value?: string) {
+  const normalized = (value ?? '').toUpperCase();
+  if (normalized === 'VERIFIED' || normalized === 'PASS') return '已核对';
+  if (normalized === 'PARTIAL') return '部分核对';
+  if (normalized === 'FAILED' || normalized === 'REJECT') return '异常';
+  return '未核对';
+}
+
+function VerifyTag({ value }: { value: string }) {
+  const color = value === '已核对' ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : value === '部分核对' ? 'border-amber-100 bg-amber-50 text-amber-700' : value === '异常' ? 'border-rose-100 bg-rose-50 text-rose-700' : 'border-slate-200 bg-slate-50 text-slate-500';
+  return <span className={`inline-flex rounded border px-1.5 py-0.5 text-[10px] font-medium ${color}`}>{value}</span>;
+}
@@ -1,53 +1,174 @@
-import { RefreshCw } from 'lucide-react';
+import { ChevronDown, RefreshCw, Truck } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { HydrogenVehicleScope } from '../../api';
 import { formatRefreshTime } from '../model';

+interface BiYearSelectProps {
+  value: number;
+  years: number[];
+  onChange: (year: number) => void;
+}
+
+function BiYearSelect({ value, years, onChange }: BiYearSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className="ehb-year-select-wrapper" ref={ref}>
+      <button
+        type="button"
+        className={`ehb-year-select-btn ${isOpen ? 'is-active' : ''}`}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="年份选择"
+      >
+        <span className="ehb-year-text">{value} 年</span>
+        <ChevronDown
+          size={13}
+          style={{
+            transition: 'transform 0.2s ease',
+            transform: isOpen ? 'rotate(180deg)' : 'none',
+            color: '#64748b',
+          }}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="ehb-year-dropdown">
+          <div className="ehb-year-dropdown__header">切换数据年份</div>
+          <div className="ehb-year-dropdown__list">
+            {years.map((y) => (
+              <button
+                key={y}
+                type="button"
+                className={`ehb-year-dropdown__item ${y === value ? 'is-selected' : ''}`}
+                onClick={() => {
+                  onChange(y);
+                  setIsOpen(false);
+                }}
+              >
+                <span>{y} 年</span>
+                {y === value && <span className="ehb-year-check">✓</span>}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface OverviewHeaderProps {
  activeYear: number;
  availableYears: number[];
-  lastRefreshAt: number;
-  refreshing: boolean;
+  vehicleScope: HydrogenVehicleScope;
+  verifyScope?: 'all' | 'verified';
+  onVerifyScopeChange?: (scope: 'all' | 'verified') => void;
+  selectedStationId?: number | null;
+  selectedStationName?: string | null;
+  stations?: { id: number; name: string }[];
+  latestLedgerTime?: string | null;
+  lastRefreshAt?: number;
+  refreshing?: boolean;
  onSelectYear: (year: number) => void;
+  onVehicleScopeChange: (scope: HydrogenVehicleScope) => void;
+  onStationChange?: (stationId: number | null) => void;
  onRefresh: () => void;
 }

 export function OverviewHeader({
  activeYear,
  availableYears,
-  lastRefreshAt,
-  refreshing,
+  vehicleScope,
+  verifyScope = 'all',
+  onVerifyScopeChange,
+  latestLedgerTime,
+  lastRefreshAt = 0,
+  refreshing = false,
  onSelectYear,
+  onVehicleScopeChange,
  onRefresh,
 }: OverviewHeaderProps) {
  return (
-    <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 className="truncate">{lastRefreshAt ? `更新于 ${formatRefreshTime(lastRefreshAt)}` : '数据自 2025-01-01 起'}</span>
-      <div className="flex items-center gap-2 flex-shrink-0">
-        <div className="flex items-center gap-1 bg-slate-50 rounded-lg p-0.5">
-          {availableYears.map(y => {
-            const active = y === activeYear;
-            return (
+    <section className="ehb-daily-filter-card" style={{ marginBottom: 12 }} aria-label="总览筛选工具栏">
+      <div className="ehb-daily-filter-row">
+        <div className="ehb-daily-filter-group">
+          <BiYearSelect value={activeYear} years={availableYears} onChange={onSelectYear} />
+          <div className="ehb-pill-tabs">
            <button
-                key={y}
-                onClick={() => onSelectYear(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'
-                }`}
+              type="button"
+              className={`ehb-pill-btn ${verifyScope === 'all' ? 'is-active' : ''}`}
+              onClick={() => onVerifyScopeChange?.('all')}
            >
-                {y}
+              全量订单
            </button>
-            );
-          })}
-        </div>
            <button
+              type="button"
+              className={`ehb-pill-btn ${verifyScope === 'verified' ? 'is-active' : ''}`}
+              onClick={() => onVerifyScopeChange?.('verified')}
+              title="真实账本已返回全量有效订单"
+            >
+              仅已核对
+            </button>
+          </div>
+        </div>
+
+        <div className="ehb-daily-filter-group">
+          <div className="ehb-fleet-segmented">
+            <button
+              type="button"
+              className={`ehb-fleet-btn ${vehicleScope === 'all' ? 'is-active' : ''}`}
+              onClick={() => onVehicleScopeChange('all')}
+            >
+              全部车辆
+            </button>
+            <button
+              type="button"
+              className={`ehb-fleet-btn ${vehicleScope === 'lingniu' ? 'is-active' : ''}`}
+              onClick={() => onVehicleScopeChange('lingniu')}
+            >
+              <Truck size={14} />
+              仅羚牛车辆
+            </button>
+            <button
+              type="button"
+              className={`ehb-fleet-btn ${vehicleScope === 'external' ? 'is-active' : ''}`}
+              onClick={() => onVehicleScopeChange('external')}
+            >
+              <Truck size={14} />
+              仅外部车辆
+            </button>
+          </div>
+
+          <span className="ehb-chrome__clock" style={{ fontSize: 12, color: '#64748b' }}>
+            {latestLedgerTime ? `账本 ${latestLedgerTime.slice(5, 16)}` : lastRefreshAt ? formatRefreshTime(lastRefreshAt) : '已同步'}
+          </span>
+
+          <button
+            type="button"
+            className="ehb-btn ehb-btn--ghost"
            onClick={onRefresh}
            disabled={refreshing}
-          className="flex items-center gap-1 px-2 py-0.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
-          title="手动刷新（绕过缓存）"
+            title="数据刷新"
          >
-          <RefreshCw size={11} className={refreshing ? 'animate-spin' : ''} strokeWidth={2.6} />
-          <span className="text-[11px] font-bold">刷新</span>
+            <RefreshCw size={14} className={refreshing ? 'animate-spin' : ''} aria-hidden />
+            刷新
          </button>
        </div>
      </div>
+    </section>
  );
 }
@@ -1,55 +1,116 @@
 import type { HydrogenCustomerRow, HydrogenStationFull } from '../../types';
-import { formatKg as fmtKg, formatYuan as fmtYuan } from '../model';
+import { useMemo, useState } from 'react';
+import { ChevronRight, Search } from 'lucide-react';
+import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from '../../components/SortableColumnHeader';
+import {
+  buildCustomerDrillPayload,
+  buildStationDrillPayload,
+  formatKg as fmtKg,
+  formatYuan as fmtYuan,
+  type OverviewDrillPayload,
+  type OverviewDrillRequest,
+  type OverviewScope,
+} from '../model';
+import { OverviewDrillDialog } from './OverviewDrillDialog';

-export function StationSummaryTable({ stations }: { stations: HydrogenStationFull[] }) {
+export function StationSummaryTable({
+  stations,
+  onSelectStation,
+  scope = 'global',
+  scopeLabel,
+  onDrillRequest,
+}: {
+  stations: HydrogenStationFull[];
+  onSelectStation?: (stationId: number) => void;
+  scope?: OverviewScope;
+  scopeLabel?: string | null;
+  onDrillRequest?: (request: OverviewDrillRequest) => void;
+}) {
+  const [province, setProvince] = useState('all');
+  const [sortKey, setSortKey] = useState<'name' | 'province' | 'kg' | 'share' | 'revenue' | 'revenueShare'>('kg');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const [drill, setDrill] = useState<OverviewDrillPayload | null>(null);
+  const [selectedStationId, setSelectedStationId] = useState<number | null>(null);
+  const provinces = useMemo(() => [...new Set(stations.map(station => station.province?.trim()).filter(Boolean) as string[])], [stations]);
+  const filteredStations = province === 'all'
+    ? stations
+    : stations.filter(station => station.province === province);
+  const sortedStations = useMemo(() => sortBy(filteredStations, sortKey, sortDirection, (station, key) => station[key]), [filteredStations, sortDirection, sortKey]);
+  const changeSort = (nextKey: typeof sortKey) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+  const openStation = (station: HydrogenStationFull) => {
+    setSelectedStationId(station.id);
+    if (onDrillRequest) onDrillRequest({ kind: 'station', key: String(station.id), label: station.name, entityId: station.id });
+    else setDrill(buildStationDrillPayload(station));
+  };
  return (
    <>
      {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 className="ehb-sum-table-card">
+          <div className="ehb-sum-table-card__head" style={{ flexWrap: 'wrap', gap: 12 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+              <div className="ehb-sum-table-card__title"><Search size={14} className="text-sky-600" />加氢站加氢汇总{scope === 'station' && scopeLabel ? ` · ${scopeLabel}` : ''}</div>
+              <div className="ehb-mini-tabs">
+                <button type="button" onClick={() => setProvince('all')} className={`ehb-mini-tab ${province === 'all' ? 'is-active' : ''}`}>全国</button>
+                {provinces.map(item => <button key={item} type="button" onClick={() => setProvince(item)} className={`ehb-mini-tab ${province === item ? 'is-active' : ''}`}>{item}</button>)}
              </div>
-          <div className="overflow-x-auto -mx-1 px-1">
-            <table className="w-full text-[11px]">
+            </div>
+            <div className="ehb-sum-table-card__meta">
+              统计范围内共 {stations.length} 站
+            </div>
+          </div>
+
+          <div className="ehb-sum-table-wrap">
+            <table className="ehb-sum-table">
              <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>
+                  <th className="col-idx">#</th>
+                  <th style={{ textAlign: 'left' }}><SortableColumnHeader label="加氢站" sortKey="name" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th style={{ textAlign: 'left' }}><SortableColumnHeader label="所属省份" sortKey="province" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="加氢量" sortKey="kg" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="占比" sortKey="share" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="氢费收入" sortKey="revenue" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="收入占比" sortKey="revenueShare" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
                </tr>
              </thead>
              <tbody>
-                {stations.map((s, i) => {
+                {sortedStations.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>
+                    <tr key={s.name + i} onClick={() => openStation(s)} style={{ cursor: 'pointer' }} title="查看加氢站汇总明细">
+                      <td className="col-idx">{i + 1}</td>
+                      <td style={{ fontWeight: 600, color: '#0284c7' }}>
+                        {s.name} <span style={{ fontSize: 11, fontWeight: 400, opacity: 0.8 }}>钻取 ›</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)}%` }} />
+                      <td>
+                        <span style={{ fontSize: 11, color: '#0284c7', background: '#eff6ff', padding: '1px 6px', borderRadius: 4, fontWeight: 500 }}>
+                          {s.province ?? '未归属'}
+                        </span>
+                      </td>
+                      <td style={{ textAlign: 'right' }} className="col-bold-kg">
+                        {kgFmt.value} <span style={{ fontSize: 11, fontWeight: 400, color: '#64748b' }}>{kgFmt.unit}</span>
+                      </td>
+                      <td>
+                        <div className="ehb-ratio-flex">
+                          <div className="ehb-mini-bar-track">
+                            <div className="ehb-mini-bar-fill is-blue" style={{ width: `${Math.min(100, s.share * 100 * 2.5)}%` }} />
                          </div>
-                          <span className="text-slate-500 tabular-nums">{(s.share * 100).toFixed(1)}%</span>
+                          <span className="ehb-ratio-text">{(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 style={{ textAlign: 'right' }} className="col-green-fee">
+                        ¥{revFmt.value} <span style={{ fontSize: 11, fontWeight: 400 }}>{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)}%` }} />
+                      <td>
+                        <div className="ehb-ratio-flex">
+                          <div className="ehb-mini-bar-track">
+                            <div className="ehb-mini-bar-fill is-green" style={{ width: `${Math.min(100, s.revenueShare * 100 * 5)}%` }} />
                          </div>
-                          <span className="text-slate-500 tabular-nums">{(s.revenueShare * 100).toFixed(1)}%</span>
+                          <span className="ehb-ratio-text">{(s.revenueShare * 100).toFixed(1)}%</span>
                        </div>
                      </td>
                    </tr>
@@ -60,55 +121,98 @@ export function StationSummaryTable({ stations }: { stations: HydrogenStationFul
          </div>
        </div>
      )}
+      <OverviewDrillDialog
+        payload={drill}
+        onClose={() => { setDrill(null); setSelectedStationId(null); }}
+        onPrimaryAction={selectedStationId && onSelectStation ? () => { const stationId = selectedStationId; setDrill(null); setSelectedStationId(null); onSelectStation(stationId); } : undefined}
+      />
    </>
  );
 }

-export function CustomerSummaryTable({ customers }: { customers: HydrogenCustomerRow[] }) {
+export function CustomerSummaryTable({
+  customers,
+  scope = 'global',
+  scopeLabel,
+  onDrillRequest,
+}: {
+  customers: HydrogenCustomerRow[];
+  scope?: OverviewScope;
+  scopeLabel?: string | null;
+  onDrillRequest?: (request: OverviewDrillRequest) => void;
+}) {
+  const [sortKey, setSortKey] = useState<'name' | 'payer' | 'kg' | 'cost' | 'revenue'>('kg');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const [drill, setDrill] = useState<OverviewDrillPayload | null>(null);
+  const sortedCustomers = useMemo(() => sortBy(customers, sortKey, sortDirection, (customer, key) => customer[key]), [customers, sortDirection, sortKey]);
+  const changeSort = (nextKey: typeof sortKey) => {
+    const next = toggleSort(sortKey, sortDirection, nextKey);
+    setSortKey(next.key);
+    setSortDirection(next.direction);
+  };
+  const openCustomer = (customer: HydrogenCustomerRow, index: number) => {
+    if (onDrillRequest) onDrillRequest({ kind: 'customer', key: `${customer.name}-${index}`, label: customer.name });
+    else setDrill(buildCustomerDrillPayload(customer));
+  };
  return (
    <>
      {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 className="ehb-sum-table-card">
+          <div className="ehb-sum-table-card__head">
+            <div className="ehb-sum-table-card__title">
+              <Search size={14} className="text-sky-600" style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: 6 }} />
+              客户账单汇总{scope === 'station' && scopeLabel ? ` · ${scopeLabel}` : ''}
+              <span className="ehb-title-sub ehb-hide-h5">
+                （已收 / 未收：等待客户能源账户和对账单打通后获取）
+              </span>
+              <span className="ehb-title-sub ehb-show-h5">
+                （已收未收打通中）
+              </span>
            </div>
-          <div className="overflow-x-auto -mx-1 px-1">
-            <table className="w-full text-[11px]">
+            <div className="ehb-sum-table-card__meta">
+              Top {customers.length}
+            </div>
+          </div>
+          <div className="ehb-sum-table-wrap">
+            <table className="ehb-sum-table">
              <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>
+                  <th className="col-idx">#</th>
+                  <th style={{ textAlign: 'left' }}><SortableColumnHeader label="客户" sortKey="name" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></th>
+                  <th style={{ textAlign: 'center' }}><SortableColumnHeader label="承担方" sortKey="payer" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="center" /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="加氢量" sortKey="kg" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="成本支出" sortKey="cost" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
+                  <th style={{ textAlign: 'right' }}><SortableColumnHeader label="应收" sortKey="revenue" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></th>
                </tr>
              </thead>
              <tbody>
-                {customers.map((c2, i) => {
+                {sortedCustomers.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">
+                    <tr key={c2.name + i} onClick={() => openCustomer(c2, i)} style={{ cursor: 'pointer' }} title="点击查看客户账单明细">
+                      <td className="col-idx">{i + 1}</td>
+                      <td style={{ fontWeight: 600, color: '#0284c7' }}>
+                        {c2.name} <span style={{ fontSize: 11, fontWeight: 400, opacity: 0.8 }}>钻取 ›</span>
+                      </td>
+                      <td style={{ textAlign: 'center' }}>
                        {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="ehb-payer-tag is-own">羚牛</span>
+                        ) : c2.payer === 'mixed' ? (
+                          <span className="ehb-payer-tag is-mix">混合</span>
                        ) : (
-                          <span className="px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 text-[10px] font-bold">客户</span>
+                          <span className="ehb-payer-tag is-ext">客户</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 style={{ textAlign: 'right' }} className="col-bold-kg">
+                        {kgFmt.value} <span style={{ fontSize: 11, fontWeight: 400, color: '#64748b' }}>{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 style={{ textAlign: 'right' }} className="col-amber-fee">
+                        ¥{costFmt.value} <span style={{ fontSize: 11, fontWeight: 400 }}>{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 style={{ textAlign: 'right' }} className="col-green-fee">
+                        ¥{revFmt.value} <span style={{ fontSize: 11, fontWeight: 400 }}>{revFmt.unit}</span>
                      </td>
                    </tr>
                  );
@@ -118,6 +222,7 @@ export function CustomerSummaryTable({ customers }: { customers: HydrogenCustome
          </div>
        </div>
      )}
+      <OverviewDrillDialog payload={drill} onClose={() => setDrill(null)} />
    </>
  );
 }
@@ -2,12 +2,37 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import type { HydrogenOverviewResponse } from '../api.js';
 import {
+  buildCustomerDrillPayload,
+  buildMetricDrillPayload,
+  buildMonthDrillPayload,
+  buildRegionDrillPayload,
+  buildStationDrillPayload,
  deriveOverviewMetrics,
  formatKg,
  formatRelative,
  formatYuan,
 } from './model.js';

+const drillKpi = {
+  yearKg: 10_000,
+  yearFee: 80_000,
+  yearRevenue: 75_000,
+  yearProfit: 15_000,
+  ourYearKg: 4_000,
+  ourYearFee: 20_000,
+  customerYearKg: 6_000,
+  monthKg: 1_000,
+  monthFee: 8_000,
+  monthRevenue: 7_500,
+  monthProfit: 1_500,
+  todayKg: 100,
+  todayFee: 800,
+  todayRevenue: 750,
+  todayProfit: 150,
+  lingniuBornKg: 0,
+  lingniuBornFee: 0,
+};
+
 test('重量和金额单位保持现有阈值及负数格式', () => {
  assert.deepEqual(formatKg(999.5), { value: '999.50', unit: 'Kg' });
  assert.deepEqual(formatKg(1000), { value: '1.00', unit: 'T' });
@@ -45,7 +70,7 @@ test('总览派生指标保持月份顺序、动能、集中度和收益率口
      lingniuBornKg: 0,
      lingniuBornFee: 0,
    },
-    top5: [{ rank: 1, name: 'A', kg: 600, fee: 100, share: 0.6 }],
+    top5: [{ id: 1, rank: 1, name: 'A', kg: 600, fee: 100, share: 0.6 }],
    regions: [],
    monthly: [
      { month: '2026-01', kg: 100, fee: 20, revenue: 30, profit: 10 },
@@ -53,11 +78,13 @@ test('总览派生指标保持月份顺序、动能、集中度和收益率口
    ],
    customers: [],
    stations: [
-      { name: 'A', kg: 600, share: 0.6, revenue: 300, revenueShare: 0.6 },
-      { name: 'B', kg: 400, share: 0.4, revenue: 200, revenueShare: 0.4 },
+      { id: 1, name: 'A', kg: 600, share: 0.6, revenue: 300, revenueShare: 0.6 },
+      { id: 2, name: 'B', kg: 400, share: 0.4, revenue: 200, revenueShare: 0.4 },
    ],
    availableYears: [2026],
    year: 2026,
+    latestLedgerTime: '2026-08-17 21:50:09',
+    filter: { stationId: null, vehicleScope: 'all', verifyScope: 'all' },
  } satisfies HydrogenOverviewResponse;

  const metrics = deriveOverviewMetrics(data);
@@ -66,7 +93,56 @@ test('总览派生指标保持月份顺序、动能、集中度和收益率口
  assert.equal(metrics.latestMonth?.month, '2026-02');
  assert.equal(metrics.monthMomentum, 50);
  assert.equal(metrics.top5Share, 60);
-  assert.equal(metrics.profitYield, -10);
+  assert.equal(metrics.customerGrossMarginPct, -10);
  assert.equal(metrics.stationAvgKg, 500);
  assert.deepEqual(metrics.monthlyDual.map(item => item.monthLabel), ['1月', '2月']);
 });
+
+test('KPI 下钻只使用真实汇总口径且保留客户单毛利语义', () => {
+  const payload = buildMetricDrillPayload(drillKpi, 'yearProfit');
+  assert.equal(payload.title, '客户单毛利');
+  assert.equal(payload.metrics[0]?.label, '客户单毛利');
+  assert.equal(payload.metrics[0]?.value, '¥1.5 万元');
+  assert.equal(payload.rows.length, 0);
+  assert.match(payload.emptyMessage ?? '', /未返回站点、客户、车牌及单笔订单层级/);
+});
+
+test('月度下钻按接口返回的羚牛与外部车辆加氢量拆分', () => {
+  const payload = buildMonthDrillPayload({
+    month: '2026-08',
+    kg: 1_000,
+    lingniuKg: 700,
+    externalKg: 300,
+    fee: 4_500,
+    revenue: 5_000,
+    profit: 500,
+  });
+  assert.equal(payload.rows[0]?.category, '羚牛车辆');
+  assert.equal(payload.rows[0]?.share, '70.0%');
+  assert.equal(payload.rows[1]?.share, '30.0%');
+  assert.equal(payload.metrics[3]?.label, '客户单毛利');
+});
+
+test('省级区域下钻仅关联同省真实站点，市级缺少映射时明确空态', () => {
+  const stations = [
+    { id: 1, name: '嘉兴站', province: '浙江', kg: 600, revenue: 1_000, share: 0.6, revenueShare: 0.5 },
+    { id: 2, name: '广州站', province: '广东', kg: 400, revenue: 1_000, share: 0.4, revenueShare: 0.5 },
+  ];
+  const provincePayload = buildRegionDrillPayload({ region: '浙江', kg: 600, share: 0.6 }, stations, 'province');
+  assert.equal(provincePayload.rows.length, 1);
+  assert.equal(provincePayload.rows[0]?.station, '嘉兴站');
+
+  const cityPayload = buildRegionDrillPayload({ region: '嘉兴', kg: 600, share: 0.6 }, stations, 'city');
+  assert.equal(cityPayload.rows.length, 0);
+  assert.match(cityPayload.emptyMessage ?? '', /未返回城市字段/);
+});
+
+test('站点与客户弹层提供汇总指标及真实事件入口', () => {
+  const stationPayload = buildStationDrillPayload({ id: 9, name: '测试站', province: '广东', kg: 900, revenue: 3_000, share: 0.3, revenueShare: 0.4 });
+  assert.equal(stationPayload.primaryActionLabel, '进入单站视图');
+  assert.equal(stationPayload.metrics[0]?.value, '900.00 Kg');
+
+  const customerPayload = buildCustomerDrillPayload({ name: '测试客户', payer: 'customer', kg: 500, cost: 2_000, revenue: 2_500 });
+  assert.equal(customerPayload.metrics[3]?.label, '价差');
+  assert.equal(customerPayload.metrics[3]?.value, '¥500 元');
+});
@@ -1,4 +1,48 @@
 import type { HydrogenOverviewResponse } from '../api';
+import type {
+  HydrogenCustomerRow,
+  HydrogenKpi,
+  HydrogenMonthlyPoint,
+  HydrogenRegionShare,
+  HydrogenStationFull,
+} from '../types';
+
+export type OverviewScope = 'global' | 'station';
+export type OverviewMetricKey = 'yearKg' | 'yearFee' | 'yearProfit' | 'monthKg' | 'todayKg';
+export type OverviewDrillKind = 'metric' | 'month' | 'station' | 'customer' | 'region';
+
+export interface OverviewDrillRequest {
+  kind: OverviewDrillKind;
+  key: string;
+  label: string;
+  entityId?: number;
+}
+
+export interface OverviewDrillMetric {
+  label: string;
+  value: string;
+  tone?: 'default' | 'blue' | 'green' | 'amber' | 'red';
+}
+
+export interface OverviewDrillColumn {
+  key: string;
+  label: string;
+  align?: 'left' | 'right';
+}
+
+export interface OverviewDrillPayload {
+  kind: OverviewDrillKind;
+  title: string;
+  subtitle: string;
+  metrics: OverviewDrillMetric[];
+  columns: OverviewDrillColumn[];
+  rows: Record<string, string | number>[];
+  emptyMessage?: string;
+  primaryActionLabel?: string;
+  groupBy?: 'station' | 'customer' | 'vehicle';
+  groupByOptions?: Array<'station' | 'customer' | 'vehicle'>;
+  rowActionLabel?: string;
+}

 export function formatKg(kg: number): { value: string; unit: string } {
  if (kg >= 1000) return { value: (kg / 1000).toFixed(2), unit: 'T' };
@@ -22,6 +66,185 @@ export function formatYuan(yuan: number): { value: string; unit: string } {
  };
 }

+function formatKgText(value: number): string {
+  const formatted = formatKg(value);
+  return `${formatted.value} ${formatted.unit}`;
+}
+
+function formatYuanText(value: number): string {
+  const formatted = formatYuan(value);
+  return `¥${formatted.value} ${formatted.unit}`;
+}
+
+const METRIC_LABELS: Record<OverviewMetricKey, string> = {
+  yearKg: '累计加氢量',
+  yearFee: '累计加氢费',
+  yearProfit: '客户单毛利',
+  monthKg: '本月加氢',
+  todayKg: '本日加氢',
+};
+
+/**
+ * 总览接口只返回聚合值。弹层先完整呈现可核验汇总，订单树由父页面在接入
+ * 明细接口后通过 onDrillRequest 承接，避免用推算值冒充真实订单。
+ */
+export function buildMetricDrillPayload(kpi: HydrogenKpi, key: OverviewMetricKey): OverviewDrillPayload {
+  const customerCost = Math.max(0, kpi.yearFee - kpi.ourYearFee);
+  const common = {
+    kind: 'metric' as const,
+    title: METRIC_LABELS[key],
+    subtitle: '汇总口径穿透 · 当前筛选范围',
+    columns: [],
+    rows: [],
+    emptyMessage: '当前总览接口未返回站点、客户、车牌及单笔订单层级；汇总值已按真实账本展示。',
+  };
+
+  if (key === 'yearKg') {
+    return {
+      ...common,
+      metrics: [
+        { label: '累计加氢量', value: formatKgText(kpi.yearKg), tone: 'blue' },
+        { label: '我司车辆', value: formatKgText(kpi.ourYearKg) },
+        { label: '客户车辆', value: formatKgText(kpi.customerYearKg) },
+      ],
+    };
+  }
+  if (key === 'yearFee') {
+    return {
+      ...common,
+      metrics: [
+        { label: '累计加氢费', value: formatYuanText(kpi.yearFee), tone: 'blue' },
+        { label: '我司承担', value: formatYuanText(kpi.ourYearFee) },
+        { label: '客户承担', value: formatYuanText(customerCost) },
+      ],
+    };
+  }
+  if (key === 'yearProfit') {
+    return {
+      ...common,
+      metrics: [
+        { label: '客户单毛利', value: formatYuanText(kpi.yearProfit), tone: kpi.yearProfit >= 0 ? 'green' : 'red' },
+        { label: '客户收入', value: formatYuanText(kpi.yearRevenue) },
+        { label: '客户成本', value: formatYuanText(customerCost) },
+      ],
+    };
+  }
+  if (key === 'monthKg') {
+    return {
+      ...common,
+      metrics: [
+        { label: '本月加氢量', value: formatKgText(kpi.monthKg), tone: 'amber' },
+        { label: '本月加氢费', value: formatYuanText(kpi.monthFee) },
+        { label: '占年比', value: `${kpi.yearKg > 0 ? (kpi.monthKg / kpi.yearKg * 100).toFixed(1) : '0.0'}%` },
+      ],
+    };
+  }
+  return {
+    ...common,
+    metrics: [
+      { label: '本日加氢量', value: formatKgText(kpi.todayKg), tone: 'blue' },
+      { label: '本日加氢费', value: formatYuanText(kpi.todayFee) },
+      { label: '占月比', value: `${kpi.monthKg > 0 ? (kpi.todayKg / kpi.monthKg * 100).toFixed(1) : '0.0'}%` },
+    ],
+  };
+}
+
+export function buildMonthDrillPayload(month: HydrogenMonthlyPoint): OverviewDrillPayload {
+  const lingniuKg = month.lingniuKg ?? 0;
+  const externalKg = month.externalKg ?? Math.max(0, month.kg - lingniuKg);
+  return {
+    kind: 'month',
+    title: `${month.month} 月度经营明细`,
+    subtitle: '月度聚合 · 当前车辆范围',
+    metrics: [
+      { label: '加氢总量', value: formatKgText(month.kg), tone: 'blue' },
+      { label: '成本支出', value: formatYuanText(month.fee), tone: 'amber' },
+      { label: '客户收入', value: formatYuanText(month.revenue), tone: 'green' },
+      { label: '客户单毛利', value: formatYuanText(month.profit), tone: month.profit >= 0 ? 'green' : 'red' },
+    ],
+    columns: [
+      { key: 'category', label: '车辆范围' },
+      { key: 'kg', label: '加氢量', align: 'right' },
+      { key: 'share', label: '占比', align: 'right' },
+    ],
+    rows: [
+      { category: '羚牛车辆', kg: formatKgText(lingniuKg), share: `${month.kg > 0 ? (lingniuKg / month.kg * 100).toFixed(1) : '0.0'}%` },
+      { category: '外部车辆', kg: formatKgText(externalKg), share: `${month.kg > 0 ? (externalKg / month.kg * 100).toFixed(1) : '0.0'}%` },
+    ],
+  };
+}
+
+export function buildStationDrillPayload(station: HydrogenStationFull): OverviewDrillPayload {
+  return {
+    kind: 'station',
+    title: `「${station.name}」加氢汇总明细`,
+    subtitle: `${station.province || '未归属省份'} · 当前统计周期`,
+    metrics: [
+      { label: '加氢量', value: formatKgText(station.kg), tone: 'blue' },
+      { label: '氢费收入', value: formatYuanText(station.revenue), tone: 'green' },
+      { label: '加氢量占比', value: `${(station.share * 100).toFixed(1)}%` },
+      { label: '收入占比', value: `${(station.revenueShare * 100).toFixed(1)}%` },
+    ],
+    columns: [],
+    rows: [],
+    emptyMessage: '当前总览接口未返回该站按日、客户及车辆流水；可切换到单站视图继续查看真实数据。',
+    primaryActionLabel: '进入单站视图',
+  };
+}
+
+export function buildCustomerDrillPayload(customer: HydrogenCustomerRow): OverviewDrillPayload {
+  const payerLabel = customer.payer === 'lingniu' ? '羚牛承担' : customer.payer === 'mixed' ? '混合承担' : '客户承担';
+  return {
+    kind: 'customer',
+    title: `「${customer.name}」客户账单明细`,
+    subtitle: `${payerLabel} · 当前统计周期`,
+    metrics: [
+      { label: '加氢量', value: formatKgText(customer.kg), tone: 'blue' },
+      { label: '成本支出', value: formatYuanText(customer.cost), tone: 'amber' },
+      { label: '应收', value: formatYuanText(customer.revenue), tone: 'green' },
+      { label: '价差', value: formatYuanText(customer.revenue - customer.cost), tone: customer.revenue - customer.cost >= 0 ? 'green' : 'red' },
+    ],
+    columns: [],
+    rows: [],
+    emptyMessage: '当前总览接口未返回该客户按日、车牌及单笔加氢流水。',
+  };
+}
+
+export function buildRegionDrillPayload(
+  region: HydrogenRegionShare,
+  stations: HydrogenStationFull[],
+  granularity: 'province' | 'city',
+): OverviewDrillPayload {
+  const matchedStations = granularity === 'province'
+    ? stations.filter(station => (station.province?.trim() || '未归属') === region.region)
+    : [];
+  return {
+    kind: 'region',
+    title: `${region.region}加氢区域明细`,
+    subtitle: `${granularity === 'province' ? '省级' : '市级'}口径 · 当前统计周期`,
+    metrics: [
+      { label: '区域加氢量', value: formatKgText(region.kg), tone: 'blue' },
+      { label: '全局占比', value: `${(region.share * 100).toFixed(1)}%` },
+      { label: '已关联站点', value: `${matchedStations.length} 站` },
+    ],
+    columns: [
+      { key: 'station', label: '加氢站' },
+      { key: 'province', label: '所属省份' },
+      { key: 'kg', label: '加氢量', align: 'right' },
+      { key: 'share', label: '区域内占比', align: 'right' },
+    ],
+    rows: matchedStations.map(station => ({
+      station: station.name,
+      province: station.province || '未归属',
+      kg: formatKgText(station.kg),
+      share: `${region.kg > 0 ? (station.kg / region.kg * 100).toFixed(1) : '0.0'}%`,
+    })),
+    emptyMessage: granularity === 'city'
+      ? '当前站点汇总接口未返回城市字段，无法将市级汇总继续关联到具体站点。'
+      : '当前区域暂无可关联站点。',
+  };
+}
+
 export function formatRelative(timestamp: number, now = Date.now()): string {
  const seconds = Math.max(0, Math.floor((now - timestamp) / 1000));
  if (seconds < 5) return '刚刚';
@@ -65,7 +288,7 @@ export function deriveOverviewMetrics(data: HydrogenOverviewResponse) {
      ? ((latestMonth.kg - previousMonth.kg) / previousMonth.kg) * 100
      : null,
    top5Share: (top5.reduce((sum, item) => sum + item.kg, 0) / Math.max(1, kpi.yearKg)) * 100,
-    profitYield: kpi.yearRevenue > 0 ? (kpi.yearProfit / kpi.yearRevenue) * 100 : 0,
+    customerGrossMarginPct: kpi.yearRevenue > 0 ? (kpi.yearProfit / kpi.yearRevenue) * 100 : 0,
    stationAvgKg: stations.length > 0 ? kpi.yearKg / stations.length : 0,
    monthlyDual: monthly.map(month => ({
      ...month,
@@ -1,10 +1,11 @@
-export type CustomerType = 'external' | 'lingniu';
+export type CustomerType = 'all' | 'external' | 'lingniu';
 export type DateQuickPick = 'thisWeek' | 'thisMonth' | 'last15';

 export interface HydrogenKpi {
  yearKg: number;
  yearFee: number;
  yearRevenue: number;
+  // 客户单毛利：对客收入减去客户承担订单的氢气成本，不代表全量经营利润。
  yearProfit: number;
  ourYearKg: number;
  ourYearFee: number;
@@ -22,6 +23,7 @@ export interface HydrogenKpi {
 }

 export interface HydrogenStationTop {
+  id: number;
  rank: number;
  name: string;
  kg: number;
@@ -38,6 +40,8 @@ export interface HydrogenRegionShare {
 export interface HydrogenMonthlyPoint {
  month: string;  // YYYY-MM
  kg: number;
+  lingniuKg?: number;
+  externalKg?: number;
  fee: number;
  revenue: number;
  profit: number;
@@ -45,14 +49,16 @@ export interface HydrogenMonthlyPoint {

 export interface HydrogenCustomerRow {
  name: string;
-  payer: 'lingniu' | 'customer';
+  payer: 'lingniu' | 'customer' | 'mixed';
  kg: number;
  cost: number;
  revenue: number;
 }

 export interface HydrogenStationFull {
+  id: number;
  name: string;
+  province?: string;
  kg: number;
  revenue: number;
  share: number;       // 加氢量占比
@@ -60,20 +66,199 @@ export interface HydrogenStationFull {
 }

 export interface HydrogenStationRow {
+  id: number;
  name: string;
  pricePerKg: number;
  kg: number;
+  fee: number;
  chainPct: number;
 }

 export interface HydrogenDailyRow {
  date: string;
  totalKg: number;
+  totalFee: number;
  chainPct: number;
  customerType: CustomerType;
  stations: HydrogenStationRow[];
 }

+export interface HydrogenDailyDetailVehicle {
+  id: string;
+  time: string;
+  plateNo: string;
+  vehicleScope: 'lingniu' | 'external';
+  source: string;
+  verifyStatus: string;
+  unitPrice: number;
+  kg: number;
+  fee: number;
+}
+
+export interface HydrogenDailyDetailCustomer {
+  id: number;
+  name: string;
+  kg: number;
+  fee: number;
+  vehicles: HydrogenDailyDetailVehicle[];
+}
+
+export interface HydrogenDailyDetailStation {
+  id: number;
+  name: string;
+  stationType: string;
+  kg: number;
+  fee: number;
+  // Null means the source system has no persisted station-balance record for
+  // this station on or before the selected date; it must not be treated as 0.
+  balance: number | null;
+  balanceEffectiveTime: string | null;
+  customers: HydrogenDailyDetailCustomer[];
+}
+
+export interface HydrogenDailyDetailResponse {
+  date: string;
+  recordCount: number;
+  stations: HydrogenDailyDetailStation[];
+}
+
+export interface HydrogenStationBoardStation {
+  id: number;
+  name: string;
+  province: string;
+  city: string;
+  kg: number;
+  fee: number;
+  recordCount: number;
+  paymentAmount: number;
+  paymentCount: number;
+  share: number;
+  latestLedgerTime: string | null;
+  latestPaymentDate: string | null;
+  // 区间内逐日真实加氢量，仅供单站总览的迷你趋势柱使用。
+  // 空日期由服务端补零，绝不使用前端模拟数据。
+  dailyKg: Array<{ date: string; kg: number }>;
+}
+
+export interface HydrogenStationBoardDailyRow {
+  date: string;
+  kg: number;
+  fee: number;
+  avgPrice: number;
+  recordCount: number;
+  changeKg: number;
+  paymentAmount: number;
+  paymentCount: number;
+}
+
+export interface HydrogenStationBoardSummaryDailyRow {
+  date: string;
+  kg: number;
+  fee: number;
+  recordCount: number;
+  paymentAmount: number;
+  paymentCount: number;
+}
+
+export interface HydrogenStationBoardCustomerMonth {
+  month: string;
+  customerName: string;
+  kg: number;
+  fee: number;
+  recordCount: number;
+}
+
+export interface HydrogenStationBoardResponse {
+  range: { start: string; end: string };
+  summary: {
+    stationCount: number;
+    activeStationCount: number;
+    totalKg: number;
+    totalFee: number;
+    recordCount: number;
+    paymentAmount: number;
+    paymentCount: number;
+    latestLedgerTime: string | null;
+    daily: HydrogenStationBoardSummaryDailyRow[];
+  };
+  stations: HydrogenStationBoardStation[];
+  selected: {
+    daily: HydrogenStationBoardDailyRow[];
+    customerMonths: HydrogenStationBoardCustomerMonth[];
+  } | null;
+}
+
+export interface HydrogenOverviewDetailRecord {
+  id: number;
+  orderNo: string;
+  refuelTime: string;
+  stationId: number;
+  stationName: string;
+  province: string;
+  city: string;
+  customerId: number;
+  customerName: string;
+  plateNo: string;
+  vehicleScope: 'lingniu' | 'external';
+  source: string;
+  verifyStatus: string;
+  kg: number;
+  costPrice: number;
+  cost: number;
+  customerPrice: number;
+  revenue: number;
+  paymentStatus: number | null;
+}
+
+export type HydrogenOverviewDetailGroupBy = 'station' | 'customer' | 'vehicle';
+
+export interface HydrogenOverviewDetailGroup {
+  id: number | string;
+  name: string;
+  province: string | null;
+  city: string | null;
+  recordCount: number;
+  stationCount: number;
+  customerCount: number;
+  kg: number;
+  cost: number;
+  customerCost: number;
+  revenue: number;
+  vehicleScope?: 'lingniu' | 'external';
+  source?: string;
+  verifyStatus?: string;
+}
+
+export interface HydrogenOverviewDetailResponse {
+  filter: {
+    year: number;
+    vehicleScope: 'all' | 'lingniu' | 'external';
+    verifyScope: 'all' | 'verified';
+    stationId: number | null;
+    month: string | null;
+    date: string | null;
+    customerName: string | null;
+    customerId: number | null;
+    plateNo: string | null;
+    region: string | null;
+    regionGranularity: 'province' | 'city';
+    groupBy: HydrogenOverviewDetailGroupBy | null;
+  };
+  truncated: boolean;
+  summary: {
+    recordCount: number;
+    stationCount: number;
+    customerCount: number;
+    kg: number;
+    cost: number;
+    customerCost: number;
+    revenue: number;
+  };
+  groupBy: HydrogenOverviewDetailGroupBy | null;
+  groups: HydrogenOverviewDetailGroup[];
+  records: HydrogenOverviewDetailRecord[];
+}
+
 export interface ElectricKpi {
  totalKwh: number;
  totalFee: number;
@@ -4,11 +4,13 @@ import dotenv from 'dotenv';
 dotenv.config();

 const hydrogenPool = mysql.createPool({
-  host: process.env.HYDROGEN_DB_HOST || '47.99.185.173',
-  port: Number(process.env.HYDROGEN_DB_PORT) || 3306,
-  user: process.env.HYDROGEN_DB_USER || 'root',
-  password: process.env.HYDROGEN_DB_PASSWORD || 'lnMysql.',
-  database: process.env.HYDROGEN_DB_NAME || 'ln_asset_management',
+  // 氢能账本归属线上业务库。保留专用变量，便于未来拆分独立只读库；
+  // 未配置专用变量时，复用主业务库，避免部署环境误回退到历史数据库地址。
+  host: process.env.HYDROGEN_DB_HOST || process.env.DB_HOST,
+  port: Number(process.env.HYDROGEN_DB_PORT || process.env.DB_PORT) || 3306,
+  user: process.env.HYDROGEN_DB_USER || process.env.DB_USER,
+  password: process.env.HYDROGEN_DB_PASSWORD || process.env.DB_PASSWORD,
+  database: process.env.HYDROGEN_DB_NAME || process.env.DB_NAME,
  waitForConnections: true,
  connectionLimit: 5,
  queueLimit: 0,
@@ -32,7 +32,8 @@ export function registerElectricOverviewRoute(
       SUM(CASE WHEN DATE_FORMAT(start_time, '%Y-%m') = DATE_FORMAT(CURDATE(), '%Y-%m')
                THEN fee ELSE 0 END) AS monthFee,
       SUM(CASE WHEN DATE(start_time) = CURDATE() THEN kwh ELSE 0 END) AS todayKwh,
-       SUM(CASE WHEN DATE(start_time) = CURDATE() THEN fee ELSE 0 END) AS todayFee
+       SUM(CASE WHEN DATE(start_time) = CURDATE() THEN fee ELSE 0 END) AS todayFee,
+       DATE_FORMAT(MAX(start_time), '%Y-%m-%d %H:%i:%s') AS latestChargeTime
     FROM bi_ele_charge_record`,
    );
    const k = kpiRows[0] ?? {};
@@ -94,6 +95,7 @@ export function registerElectricOverviewRoute(
    return {
      kpi: { totalKwh, totalFee, monthKwh, monthFee, todayKwh, todayFee, todayChainPct },
      trend: trendArr,
+      latestChargeTime: typeof k.latestChargeTime === 'string' ? k.latestChargeTime : null,
    };
    }, { force });
    return c.json(data);
@@ -0,0 +1,45 @@
+import type { Hono } from 'hono';
+import type { RowDataPacket } from 'mysql2';
+import type pool from '../../db.js';
+import type { cached } from './cache.js';
+
+export interface EtcOverviewDependencies {
+  pool: Pick<typeof pool, 'query'>;
+  cached: typeof cached;
+}
+
+// ETC 仅聚合已入库的账单与通行明细；空表应明确返回空状态，不能伪造经营数据。
+export function registerEtcOverviewRoute(
+  app: Hono,
+  { pool, cached }: EtcOverviewDependencies,
+) {
+  app.get('/etc/overview', async (c) => {
+    const force = c.req.query('force') === '1';
+    const data = await cached('etc/overview', async () => {
+      const [rows] = await pool.query<RowDataPacket[]>(
+        `SELECT
+           (SELECT COUNT(*) FROM etc_toll_record WHERE del_flag = '0') AS tollRecordCount,
+           (SELECT COUNT(DISTINCT plate_number) FROM etc_toll_record WHERE del_flag = '0') AS vehicleCount,
+           (SELECT ROUND(SUM(total_amount), 2) FROM etc_toll_record WHERE del_flag = '0') AS totalAmount,
+           (SELECT DATE_FORMAT(MAX(trans_time), '%Y-%m-%d %H:%i:%s') FROM etc_toll_record WHERE del_flag = '0') AS latestTollTime,
+           (SELECT COUNT(*) FROM energy_etc_bill WHERE del_flag = '0') AS billCount,
+           (SELECT ROUND(SUM(receivable_amount), 2) FROM energy_etc_bill WHERE del_flag = '0') AS receivableAmount,
+           (SELECT ROUND(SUM(paid_amount), 2) FROM energy_etc_bill WHERE del_flag = '0') AS paidAmount`,
+      );
+      const row = rows[0] ?? {};
+      const tollRecordCount = Number(row.tollRecordCount) || 0;
+      const billCount = Number(row.billCount) || 0;
+      return {
+        tollRecordCount,
+        vehicleCount: Number(row.vehicleCount) || 0,
+        totalAmount: Number(row.totalAmount) || 0,
+        latestTollTime: typeof row.latestTollTime === 'string' ? row.latestTollTime : null,
+        billCount,
+        receivableAmount: Number(row.receivableAmount) || 0,
+        paidAmount: Number(row.paidAmount) || 0,
+        hasData: tollRecordCount > 0 || billCount > 0,
+      };
+    }, { force });
+    return c.json(data);
+  });
+}
@@ -0,0 +1,903 @@
+import type { Hono } from "hono";
+import type { RowDataPacket } from "mysql2";
+import type hydrogenPool from "../../hydrogen-db.js";
+import {
+  HYDROGEN_BASE_WHERE_B,
+  HYDROGEN_LOCAL,
+  HYDROGEN_MIN_DATE,
+  HYDROGEN_TABLE,
+} from "./constants.js";
+
+/**
+ * The BI v2 contract is intentionally independent of the legacy hydrogen
+ * endpoints.  It is shaped around the prototype screens so the client never
+ * has to merge multiple historical responses or recompute a business metric.
+ */
+export interface HydrogenBiV2Dependencies {
+  hydrogenPool: Pick<typeof hydrogenPool, "query">;
+}
+
+type VehicleScope = "all" | "lingniu" | "external";
+type VerifyScope = "all" | "verified";
+type AmountScope = "all" | "customer" | "company" | "other";
+type GroupBy = "station" | "customer" | "date" | "vehicle" | "record";
+type RegionGranularity = "province" | "city";
+
+type Filter = {
+  startDate: string;
+  endDate: string;
+  // Station IDs are bigint values. Keep them as strings end-to-end: converting
+  // them to JavaScript Number merges distinct OneOS station IDs above 2^53.
+  stationId: string | null;
+  customerId: number | null;
+  customerName: string | null;
+  plateNo: string | null;
+  date: string | null;
+  month: string | null;
+  region: string | null;
+  regionGranularity: RegionGranularity;
+  vehicleScope: VehicleScope;
+  verifyScope: VerifyScope;
+  clauses: string[];
+  params: unknown[];
+};
+
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const MONTH_PATTERN = /^\d{4}-(0[1-9]|1[0-2])$/;
+
+function validDate(value: string | undefined): value is string {
+  if (!value || !DATE_PATTERN.test(value)) return false;
+  const parsed = new Date(`${value}T00:00:00Z`);
+  return (
+    !Number.isNaN(parsed.getTime()) &&
+    parsed.toISOString().slice(0, 10) === value
+  );
+}
+
+function endOfMonth(month: string) {
+  const [year, monthNumber] = month.split("-").map(Number);
+  return new Date(Date.UTC(year, monthNumber, 0)).toISOString().slice(0, 10);
+}
+
+function stationRegionSql(granularity: RegionGranularity) {
+  // new_hydrogen_site is the OneOS station master (453 active stations).  The
+  // historical hydrogen_station table only contains 89 records, so it cannot
+  // be used to decide a ledger station's province/city.
+  const districtColumn = granularity === "province" ? "rs.province" : "rs.city";
+  const stationName = `COALESCE(
+    (SELECT COALESCE(NULLIF(rs.site_short_name, ''), NULLIF(rs.site_name, ''))
+       FROM new_hydrogen_site rs
+      WHERE rs.id = b.station_id AND rs.del_flag = '0'
+      LIMIT 1),
+    b.station_name,
+    ''
+  )`;
+  const fallback =
+    granularity === "province"
+      ? `CASE WHEN ${stationName} LIKE '%嘉兴%' OR ${stationName} LIKE '%平湖%' THEN '浙江省'
+            WHEN ${stationName} LIKE '%广州%' OR ${stationName} LIKE '%佛山%' THEN '广东省'
+            WHEN ${stationName} LIKE '%成都%' THEN '四川省'
+            WHEN ${stationName} LIKE '%昆山%' THEN '江苏省'
+            ELSE '未归属省份' END`
+      : `CASE WHEN ${stationName} LIKE '%嘉兴%' OR ${stationName} LIKE '%平湖%' THEN '嘉兴市'
+            WHEN ${stationName} LIKE '%广州%' THEN '广州市'
+            WHEN ${stationName} LIKE '%佛山%' THEN '佛山市'
+            WHEN ${stationName} LIKE '%成都%' THEN '成都市'
+            WHEN ${stationName} LIKE '%昆山%' THEN '昆山市'
+            ELSE '未归属区域' END`;
+  return `COALESCE(
+    (SELECT NULLIF(rd.NAME, '')
+       FROM new_hydrogen_site rs
+       LEFT JOIN common_district rd
+         ON CONVERT(rd.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(${districtColumn} USING utf8mb4) COLLATE utf8mb4_unicode_ci
+        AND rd.STATUS = 'VALID'
+      WHERE rs.id = b.station_id AND rs.del_flag = '0'
+      LIMIT 1),
+    ${fallback}
+  )`;
+}
+
+function todayYmd() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+}
+
+function dateForYear(year: number, edge: "start" | "end") {
+  return `${year}-${edge === "start" ? "01-01" : "12-31"}`;
+}
+
+function validYear(value: string | undefined) {
+  const year = Number(value);
+  // 原型允许查看 2020 起的历史年份。即使真实台账尚未覆盖某一年，
+  // 也必须保持该筛选范围并返回空聚合，不能静默回退到当前年。
+  return Number.isInteger(year) && year >= 2020 && year <= 2100 ? year : null;
+}
+
+function resolveFilter(query: (key: string) => string | undefined): Filter {
+  const requestedYear = validYear(query("year"));
+  const currentYear = new Date().getFullYear();
+  const year = requestedYear ?? currentYear;
+  const exactDate = validDate(query("date")) ? query("date")! : null;
+  const requestedMonth = MONTH_PATTERN.test(query("month") ?? "")
+    ? query("month")!
+    : null;
+  const startDate =
+    exactDate ??
+    (requestedMonth
+      ? `${requestedMonth}-01`
+      : validDate(query("startDate"))
+        ? query("startDate")!
+        : dateForYear(year, "start"));
+  // A current-year dashboard must never render future zero months/days by
+  // default. Historical years retain their complete calendar range.
+  const endDate =
+    exactDate ??
+    (requestedMonth
+      ? endOfMonth(requestedMonth)
+      : validDate(query("endDate"))
+        ? query("endDate")!
+        : year === currentYear
+          ? todayYmd()
+          : dateForYear(year, "end"));
+  const [safeStart, safeEnd] =
+    startDate <= endDate ? [startDate, endDate] : [endDate, startDate];
+  const stationValue = query("stationId");
+  const stationId =
+    stationValue !== undefined && /^\d+$/.test(stationValue)
+      ? stationValue
+      : null;
+  const customerValue = query("customerId");
+  const customerRaw = Number(customerValue);
+  const customerId =
+    customerValue !== undefined &&
+    Number.isInteger(customerRaw) &&
+    customerRaw >= 0
+      ? customerRaw
+      : null;
+  const customerName =
+    (query("customerName") ?? "").trim().slice(0, 100) || null;
+  const plateNo = (query("plateNo") ?? "").trim().slice(0, 32) || null;
+  const region = (query("region") ?? "").trim().slice(0, 64) || null;
+  const regionGranularity: RegionGranularity =
+    query("regionGranularity") === "province" ? "province" : "city";
+  const vehicleScope: VehicleScope =
+    query("vehicleScope") === "lingniu" || query("vehicleScope") === "external"
+      ? (query("vehicleScope") as VehicleScope)
+      : "all";
+  const verifyScope: VerifyScope =
+    query("verifyScope") === "verified" ? "verified" : "all";
+  const clauses = [
+    HYDROGEN_BASE_WHERE_B,
+    `b.${HYDROGEN_LOCAL} >= ?`,
+    `b.${HYDROGEN_LOCAL} < DATE_ADD(?, INTERVAL 1 DAY)`,
+  ];
+  const params: unknown[] = [
+    safeStart < HYDROGEN_MIN_DATE ? HYDROGEN_MIN_DATE : safeStart,
+    safeEnd,
+  ];
+  if (stationId !== null) {
+    clauses.push("COALESCE(b.station_id, 0) = ?");
+    params.push(stationId);
+  }
+  if (customerId !== null) {
+    clauses.push("COALESCE(b.system_customer_id, b.customer_id, 0) = ?");
+    params.push(customerId);
+  }
+  if (customerName) {
+    clauses.push(
+      "COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') = ?",
+    );
+    params.push(customerName);
+  }
+  if (plateNo) {
+    clauses.push("COALESCE(NULLIF(b.license_plate, ''), '无车牌') = ?");
+    params.push(plateNo);
+  }
+  if (region) {
+    clauses.push(`${stationRegionSql(regionGranularity)} = ?`);
+    params.push(region);
+  }
+  if (vehicleScope === "lingniu") clauses.push("b.vehicle_id IS NOT NULL");
+  if (vehicleScope === "external") clauses.push("b.vehicle_id IS NULL");
+  if (verifyScope === "verified")
+    clauses.push(
+      "LOWER(COALESCE(NULLIF(TRIM(b.verify_status), ''), 'unverified')) = 'verified'",
+    );
+  return {
+    startDate: safeStart,
+    endDate: safeEnd,
+    stationId,
+    customerId,
+    customerName,
+    plateNo,
+    date: exactDate,
+    month: requestedMonth,
+    region,
+    regionGranularity,
+    vehicleScope,
+    verifyScope,
+    clauses,
+    params,
+  };
+}
+
+function where(filter: Filter) {
+  return filter.clauses.join(" AND ");
+}
+function filterContext(filter: Filter) {
+  return {
+    startDate: filter.startDate,
+    endDate: filter.endDate,
+    stationId: filter.stationId,
+    customerId: filter.customerId,
+    customerName: filter.customerName,
+    plateNo: filter.plateNo,
+    date: filter.date,
+    month: filter.month,
+    region: filter.region,
+    regionGranularity: filter.regionGranularity,
+    vehicleScope: filter.vehicleScope,
+    verifyScope: filter.verifyScope,
+  };
+}
+function number(value: unknown, digits = 2) {
+  const numeric = Number(value) || 0;
+  const factor = 10 ** digits;
+  return Math.round(numeric * factor) / factor;
+}
+
+// 承担方必须以账本专用字段 settlement_type 为准，不能由对客单价/金额反推。
+// hydrogen_fuel_ledger_log 中的业务映射：1 = 客户承担，2 = 我司承担，3 = 客户自行结算。
+// 其余值（含 3、4、NULL）统一归入“其他”，避免把未知/自行结算误计为我司承担。
+const CUSTOMER_BEARING_ORDER = "b.settlement_type = 1";
+const COMPANY_BEARING_ORDER = "b.settlement_type = 2";
+const OTHER_BEARING_ORDER =
+  "(b.settlement_type NOT IN (1, 2) OR b.settlement_type IS NULL)";
+
+function resolveAmountScope(value: string | undefined): AmountScope {
+  return value === "customer" || value === "company" || value === "other"
+    ? value
+    : "all";
+}
+
+function formatWatermark(value: unknown) {
+  return value === null || value === undefined ? null : String(value);
+}
+
+function monthKeys(start: string, end: string) {
+  const list: string[] = [];
+  const cursor = new Date(`${start.slice(0, 7)}-01T00:00:00`);
+  const finish = new Date(`${end.slice(0, 7)}-01T00:00:00`);
+  while (cursor <= finish && list.length <= 36) {
+    list.push(
+      `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, "0")}`,
+    );
+    cursor.setMonth(cursor.getMonth() + 1);
+  }
+  return list;
+}
+
+function dateKeys(start: string, end: string) {
+  const list: string[] = [];
+  const cursor = new Date(`${start}T00:00:00`);
+  const finish = new Date(`${end}T00:00:00`);
+  while (cursor <= finish && list.length <= 400) {
+    list.push(
+      `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, "0")}-${String(cursor.getDate()).padStart(2, "0")}`,
+    );
+    cursor.setDate(cursor.getDate() + 1);
+  }
+  return list;
+}
+
+async function meta(hydrogenPool: HydrogenBiV2Dependencies["hydrogenPool"]) {
+  const [yearRows, stationRows, watermarkRows] = await Promise.all([
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT YEAR(${HYDROGEN_LOCAL}) AS value,
+              DATE_FORMAT(MIN(${HYDROGEN_LOCAL}), '%Y-%m-%d') AS startDate,
+              DATE_FORMAT(MAX(${HYDROGEN_LOCAL}), '%Y-%m-%d') AS endDate
+       FROM ${HYDROGEN_TABLE}
+       WHERE del_flag = '0' AND ${HYDROGEN_LOCAL} >= ?
+       GROUP BY YEAR(${HYDROGEN_LOCAL})
+       ORDER BY value DESC`,
+      [HYDROGEN_MIN_DATE],
+    ),
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT CAST(s.id AS CHAR) AS id,
+              COALESCE(NULLIF(s.site_short_name, ''), NULLIF(s.site_name, ''), CONCAT('站点 #', s.id)) AS name,
+              COALESCE(NULLIF(p.NAME, ''), '未归属') AS province,
+              COALESCE(NULLIF(ct.NAME, ''), '未归属') AS city
+       FROM new_hydrogen_site s
+       LEFT JOIN common_district p ON CONVERT(p.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci AND p.STATUS = 'VALID'
+       LEFT JOIN common_district ct ON CONVERT(ct.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci AND ct.STATUS = 'VALID'
+       WHERE s.del_flag = '0'
+       ORDER BY name`,
+    ),
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT DATE_FORMAT(MAX(${HYDROGEN_LOCAL}), '%Y-%m-%d %H:%i:%s') AS ledgerAt
+       FROM ${HYDROGEN_TABLE}
+       WHERE del_flag = '0' AND ${HYDROGEN_LOCAL} >= ?`,
+      [HYDROGEN_MIN_DATE],
+    ),
+  ]);
+  return {
+    years: yearRows[0].map((row) => ({
+      value: Number(row.value),
+      startDate: String(row.startDate),
+      endDate: String(row.endDate),
+    })),
+    stations: stationRows[0].map((row) => ({
+      id: String(row.id),
+      name: String(row.name),
+      province: String(row.province),
+      city: String(row.city),
+    })),
+    watermark: {
+      ledgerAt: formatWatermark(watermarkRows[0][0]?.ledgerAt),
+      paymentAt: null,
+    },
+  };
+}
+
+async function overview(
+  hydrogenPool: HydrogenBiV2Dependencies["hydrogenPool"],
+  filter: Filter,
+) {
+  const sqlWhere = where(filter);
+  const month = filter.endDate.slice(0, 7);
+  const [summaryRows, monthlyRows, stationRows, customerRows] =
+    await Promise.all([
+      hydrogenPool.query<RowDataPacket[]>(
+        `SELECT DATE_FORMAT(MAX(b.${HYDROGEN_LOCAL}), '%Y-%m-%d %H:%i:%s') AS ledgerAt,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS totalKg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS totalCost,
+              ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS totalRevenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.amount_kg ELSE 0 END), 0), 3) AS customerBearingKg,
+              ROUND(COALESCE(SUM(CASE WHEN ${COMPANY_BEARING_ORDER} THEN b.amount_kg ELSE 0 END), 0), 3) AS companyBearingKg,
+              ROUND(COALESCE(SUM(CASE WHEN ${OTHER_BEARING_ORDER} THEN b.amount_kg ELSE 0 END), 0), 3) AS otherBearingKg,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.fee_total ELSE 0 END), 0), 2) AS customerRevenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${COMPANY_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS companyCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${OTHER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS otherCost,
+              ROUND(COALESCE(SUM(CASE WHEN DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m') = ? THEN b.amount_kg ELSE 0 END), 0), 3) AS monthKg,
+              ROUND(COALESCE(SUM(CASE WHEN DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m') = ? THEN b.cost_total ELSE 0 END), 0), 2) AS monthCost,
+              ROUND(COALESCE(SUM(CASE WHEN DATE(b.${HYDROGEN_LOCAL}) = ? THEN b.amount_kg ELSE 0 END), 0), 3) AS todayKg,
+              ROUND(COALESCE(SUM(CASE WHEN DATE(b.${HYDROGEN_LOCAL}) = ? THEN b.cost_total ELSE 0 END), 0), 2) AS todayCost,
+              COUNT(*) AS recordCount,
+              COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount
+       FROM ${HYDROGEN_TABLE} b
+       WHERE ${sqlWhere}`,
+        [month, month, filter.endDate, filter.endDate, ...filter.params],
+      ),
+      hydrogenPool.query<RowDataPacket[]>(
+        `SELECT DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m') AS month,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS totalKg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NOT NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS lingniuKg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS externalKg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+              ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.fee_total ELSE 0 END), 0), 2) AS customerRevenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${COMPANY_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS companyCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${OTHER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS otherCost
+       FROM ${HYDROGEN_TABLE} b
+       WHERE ${sqlWhere}
+       GROUP BY DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m')
+       ORDER BY month`,
+        filter.params,
+      ),
+      hydrogenPool.query<RowDataPacket[]>(
+        `SELECT CAST(MAX(COALESCE(b.station_id, 0)) AS CHAR) AS id,
+              COALESCE(MAX(NULLIF(s.site_short_name, '')), MAX(NULLIF(s.site_name, '')), MAX(NULLIF(b.station_name, '')), '未关联站点') AS name,
+              COALESCE(MAX(NULLIF(p.NAME, '')), '未归属') AS province,
+              COALESCE(MAX(NULLIF(ct.NAME, '')), '未归属') AS city,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NOT NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS lingniuKg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS externalKg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+              ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.fee_total ELSE 0 END), 0), 2) AS customerRevenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${COMPANY_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS companyCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${OTHER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS otherCost,
+              COUNT(*) AS recordCount,
+              COUNT(DISTINCT COALESCE(b.system_customer_id, b.customer_id, 0)) AS customerCount
+       FROM ${HYDROGEN_TABLE} b
+       LEFT JOIN new_hydrogen_site s ON s.id = b.station_id AND s.del_flag = '0'
+       LEFT JOIN common_district p ON CONVERT(p.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci AND p.STATUS = 'VALID'
+       LEFT JOIN common_district ct ON CONVERT(ct.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci AND ct.STATUS = 'VALID'
+       WHERE ${sqlWhere}
+       GROUP BY COALESCE(b.station_id, 0)
+       ORDER BY kg DESC`,
+        filter.params,
+      ),
+      hydrogenPool.query<RowDataPacket[]>(
+        `SELECT COALESCE(b.system_customer_id, b.customer_id, 0) AS id,
+              COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS name,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.amount_kg ELSE 0 END), 0), 3) AS customerBearingKg,
+              ROUND(COALESCE(SUM(CASE WHEN ${COMPANY_BEARING_ORDER} THEN b.amount_kg ELSE 0 END), 0), 3) AS companyBearingKg,
+              ROUND(COALESCE(SUM(CASE WHEN ${OTHER_BEARING_ORDER} THEN b.amount_kg ELSE 0 END), 0), 3) AS otherBearingKg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+              ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.fee_total ELSE 0 END), 0), 2) AS customerRevenue,
+              ROUND(COALESCE(SUM(CASE WHEN ${CUSTOMER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${COMPANY_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS companyCost,
+              ROUND(COALESCE(SUM(CASE WHEN ${OTHER_BEARING_ORDER} THEN b.cost_total ELSE 0 END), 0), 2) AS otherCost,
+              COUNT(*) AS recordCount
+       FROM ${HYDROGEN_TABLE} b
+       WHERE ${sqlWhere}
+       GROUP BY COALESCE(b.system_customer_id, b.customer_id, 0), COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户')
+       ORDER BY kg DESC
+       LIMIT 200`,
+        filter.params,
+      ),
+    ]);
+  const summary: RowDataPacket = summaryRows[0][0] ?? ({} as RowDataPacket);
+  const totalKg = number(summary.totalKg, 3);
+  const totalRevenue = number(summary.totalRevenue);
+  const customerRevenue = number(summary.customerRevenue);
+  const customerCost = number(summary.customerCost);
+  const monthlyMap = new Map(
+    monthlyRows[0].map((row) => [String(row.month), row]),
+  );
+  const monthly = monthKeys(filter.startDate, filter.endDate).map((key) => {
+    const row = monthlyMap.get(key);
+    const revenue = number(row?.revenue);
+    const customerMonthRevenue = number(row?.customerRevenue);
+    const cost = number(row?.cost);
+    const customerMonthCost = number(row?.customerCost);
+    const companyMonthCost = number(row?.companyCost);
+    const otherMonthCost = number(row?.otherCost);
+    return {
+      month: key,
+      totalKg: number(row?.totalKg, 3),
+      lingniuKg: number(row?.lingniuKg, 3),
+      externalKg: number(row?.externalKg, 3),
+      cost,
+      revenue,
+      customerRevenue: customerMonthRevenue,
+      customerCost: customerMonthCost,
+      companyCost: companyMonthCost,
+      otherCost: otherMonthCost,
+      customerGrossProfit: number(customerMonthRevenue - customerMonthCost),
+    };
+  });
+  const stations = stationRows[0].map((row) => ({
+    id: String(row.id),
+    name: String(row.name),
+    province: String(row.province),
+    city: String(row.city),
+    kg: number(row.kg, 3),
+    lingniuKg: number(row.lingniuKg, 3),
+    externalKg: number(row.externalKg, 3),
+    cost: number(row.cost),
+    revenue: number(row.revenue),
+    customerRevenue: number(row.customerRevenue),
+    customerCost: number(row.customerCost),
+    companyCost: number(row.companyCost),
+    otherCost: number(row.otherCost),
+    recordCount: Number(row.recordCount) || 0,
+    customerCount: Number(row.customerCount) || 0,
+    share: totalKg ? number((Number(row.kg) / totalKg) * 100, 2) : 0,
+  }));
+  // The station aggregation above already joins the district dimension. Reusing
+  // it avoids a second full-ledger scan with a correlated subquery for regions.
+  const regionMap = new Map<string, number>();
+  for (const station of stations) {
+    const rawRegion =
+      filter.regionGranularity === "province" ? station.province : station.city;
+    const region =
+      rawRegion === "未归属"
+        ? filter.regionGranularity === "province"
+          ? "未归属省份"
+          : "未归属区域"
+        : rawRegion;
+    regionMap.set(region, (regionMap.get(region) || 0) + station.kg);
+  }
+  const regionSum = [...regionMap.values()].reduce((sum, kg) => sum + kg, 0);
+  const regions = [...regionMap.entries()]
+    .map(([region, kg]) => ({
+      region,
+      kg: number(kg, 3),
+      share: regionSum ? number((kg / regionSum) * 100, 2) : 0,
+    }))
+    .sort((left, right) => right.kg - left.kg);
+  return {
+    range: { startDate: filter.startDate, endDate: filter.endDate },
+    watermark: { ledgerAt: formatWatermark(summary.ledgerAt), paymentAt: null },
+    filters: filterContext(filter),
+    kpis: {
+      totalKg,
+      totalCost: number(summary.totalCost),
+      customerBearingKg: number(summary.customerBearingKg, 3),
+      companyBearingKg: number(summary.companyBearingKg, 3),
+      otherBearingKg: number(summary.otherBearingKg, 3),
+      totalRevenue,
+      customerRevenue,
+      customerCost,
+      companyCost: number(summary.companyCost),
+      otherCost: number(summary.otherCost),
+      customerGrossProfit: number(customerRevenue - customerCost),
+      monthKg: number(summary.monthKg, 3),
+      monthCost: number(summary.monthCost),
+      monthShareOfRange: totalKg
+        ? number((number(summary.monthKg, 3) / totalKg) * 100, 2)
+        : 0,
+      todayKg: number(summary.todayKg, 3),
+      todayCost: number(summary.todayCost),
+      month: filter.endDate.slice(0, 7),
+      todayShareOfMonth: number(summary.monthKg, 3)
+        ? number(
+            (number(summary.todayKg, 3) / number(summary.monthKg, 3)) * 100,
+            2,
+          )
+        : 0,
+      recordCount: Number(summary.recordCount) || 0,
+      stationCount: Number(summary.stationCount) || 0,
+    },
+    monthly,
+    topStations: stations.slice(0, 5),
+    stations,
+    regions,
+    customers: customerRows[0].map((row) => {
+      const customerBearingKg = number(row.customerBearingKg, 3);
+      const companyBearingKg = number(row.companyBearingKg, 3);
+      const otherBearingKg = number(row.otherBearingKg, 3);
+      return {
+        id: Number(row.id) || 0,
+        name: String(row.name),
+        kg: number(row.kg, 3),
+        customerBearingKg,
+        companyBearingKg,
+        otherBearingKg,
+        bearer:
+          otherBearingKg > 0
+            ? "other"
+            : customerBearingKg > 0 && companyBearingKg > 0
+              ? "both"
+              : customerBearingKg > 0
+                ? "customer"
+                : "company",
+        cost: number(row.cost),
+        revenue: number(row.revenue),
+        customerRevenue: number(row.customerRevenue),
+        customerCost: number(row.customerCost),
+        companyCost: number(row.companyCost),
+        otherCost: number(row.otherCost),
+        recordCount: Number(row.recordCount) || 0,
+      };
+    }),
+  };
+}
+
+async function daily(
+  hydrogenPool: HydrogenBiV2Dependencies["hydrogenPool"],
+  filter: Filter,
+) {
+  const sqlWhere = where(filter);
+  const [rows, watermarkRows] = await Promise.all([
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS date,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NOT NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS lingniuKg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS externalKg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+              COUNT(*) AS recordCount,
+              COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount
+       FROM ${HYDROGEN_TABLE} b
+       WHERE ${sqlWhere}
+       GROUP BY DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d')
+       ORDER BY date`,
+      filter.params,
+    ),
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT DATE_FORMAT(MAX(b.${HYDROGEN_LOCAL}), '%Y-%m-%d %H:%i:%s') AS ledgerAt
+       FROM ${HYDROGEN_TABLE} b WHERE ${sqlWhere}`,
+      filter.params,
+    ),
+  ]);
+  const map = new Map(rows[0].map((row) => [String(row.date), row]));
+  let previousKg = 0;
+  const days = dateKeys(filter.startDate, filter.endDate).map((date) => {
+    const row = map.get(date);
+    const kg = number(row?.kg, 3);
+    const chainPct = previousKg
+      ? number(((kg - previousKg) / previousKg) * 100, 2)
+      : 0;
+    previousKg = kg;
+    return {
+      date,
+      kg,
+      lingniuKg: number(row?.lingniuKg, 3),
+      externalKg: number(row?.externalKg, 3),
+      cost: number(row?.cost),
+      recordCount: Number(row?.recordCount) || 0,
+      stationCount: Number(row?.stationCount) || 0,
+      chainPct,
+    };
+  });
+  const totalKg = days.reduce((sum, row) => sum + row.kg, 0);
+  const totalCost = days.reduce((sum, row) => sum + row.cost, 0);
+  return {
+    range: { startDate: filter.startDate, endDate: filter.endDate },
+    watermark: {
+      ledgerAt: formatWatermark(watermarkRows[0][0]?.ledgerAt),
+      paymentAt: null,
+    },
+    filters: filterContext(filter),
+    kpis: {
+      totalKg: number(totalKg, 3),
+      totalCost: number(totalCost),
+      averageDailyKg: number(totalKg / Math.max(1, days.length), 3),
+      stationCount: Math.max(0, ...days.map((row) => row.stationCount)),
+      activeDays: days.filter((row) => row.kg > 0).length,
+    },
+    trend: days,
+    days: [...days].reverse(),
+  };
+}
+
+/**
+ * Prototype daily detail is a real hierarchy, not a flattened table: one
+ * business day expands into station, customer and then the existing record
+ * drill.  Records remain paged through /drill to keep a busy day bounded.
+ */
+async function dailyTree(
+  hydrogenPool: HydrogenBiV2Dependencies["hydrogenPool"],
+  filter: Filter,
+) {
+  const sqlWhere = where(filter);
+  const [stationRows, customerRows] = await Promise.all([
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT CAST(MAX(COALESCE(b.station_id, 0)) AS CHAR) AS id,
+              COALESCE(MAX(NULLIF(s.site_short_name, '')), MAX(NULLIF(s.site_name, '')), MAX(NULLIF(b.station_name, '')), '未关联站点') AS name,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+              COUNT(*) AS recordCount
+       FROM ${HYDROGEN_TABLE} b
+       LEFT JOIN new_hydrogen_site s ON s.id = b.station_id AND s.del_flag = '0'
+       WHERE ${sqlWhere}
+       GROUP BY COALESCE(b.station_id, 0)
+       ORDER BY kg DESC`,
+      filter.params,
+    ),
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT CAST(MAX(COALESCE(b.station_id, 0)) AS CHAR) AS stationId,
+              COALESCE(b.system_customer_id, b.customer_id, 0) AS id,
+              COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS name,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+              COUNT(*) AS recordCount
+       FROM ${HYDROGEN_TABLE} b
+       WHERE ${sqlWhere}
+       GROUP BY COALESCE(b.station_id, 0), COALESCE(b.system_customer_id, b.customer_id, 0), COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户')
+       ORDER BY stationId, kg DESC`,
+      filter.params,
+    ),
+  ]);
+  const customersByStation = new Map<
+    string,
+    Array<{
+      id: number;
+      name: string;
+      kg: number;
+      cost: number;
+      recordCount: number;
+    }>
+  >();
+  customerRows[0].forEach((row) => {
+    const stationId = String(row.stationId);
+    const list = customersByStation.get(stationId) || [];
+    list.push({
+      id: Number(row.id) || 0,
+      name: String(row.name),
+      kg: number(row.kg, 3),
+      cost: number(row.cost),
+      recordCount: Number(row.recordCount) || 0,
+    });
+    customersByStation.set(stationId, list);
+  });
+  return {
+    date: filter.startDate,
+    stations: stationRows[0].map((row) => ({
+      id: String(row.id),
+      name: String(row.name),
+      kg: number(row.kg, 3),
+      cost: number(row.cost),
+      recordCount: Number(row.recordCount) || 0,
+      customers: customersByStation.get(String(row.id)) || [],
+    })),
+  };
+}
+
+async function drill(
+  hydrogenPool: HydrogenBiV2Dependencies["hydrogenPool"],
+  filter: Filter,
+  groupBy: GroupBy,
+  page: number,
+  pageSize: number,
+  amountScope: AmountScope,
+) {
+  const sqlWhere = where(filter);
+  const scopedWhere =
+    amountScope === "customer"
+      ? `${sqlWhere} AND ${CUSTOMER_BEARING_ORDER}`
+      : amountScope === "company"
+        ? `${sqlWhere} AND ${COMPANY_BEARING_ORDER}`
+        : amountScope === "other"
+          ? `${sqlWhere} AND ${OTHER_BEARING_ORDER}`
+          : sqlWhere;
+  const params = filter.params;
+  const offset = (page - 1) * pageSize;
+  const groupSelect =
+    groupBy === "station"
+      ? "CAST(MAX(COALESCE(b.station_id, 0)) AS CHAR) AS id, COALESCE(MAX(NULLIF(s.site_short_name, '')), MAX(NULLIF(s.site_name, '')), MAX(NULLIF(b.station_name, '')), '未关联站点') AS name, COALESCE(MAX(NULLIF(p.NAME, '')), '未归属') AS province, COALESCE(MAX(NULLIF(ct.NAME, '')), '未归属') AS city"
+      : groupBy === "customer"
+        ? "COALESCE(b.system_customer_id, b.customer_id, 0) AS id, COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS name, NULL AS province, NULL AS city"
+        : groupBy === "date"
+          ? `DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS id, DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS name, NULL AS province, NULL AS city`
+          : "COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS id, COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS name, NULL AS province, NULL AS city";
+  const groupExpression =
+    groupBy === "station"
+      ? "COALESCE(b.station_id, 0)"
+      : groupBy === "customer"
+        ? "COALESCE(b.system_customer_id, b.customer_id, 0), COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户')"
+        : groupBy === "date"
+          ? `DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d')`
+          : "COALESCE(NULLIF(b.license_plate, ''), '无车牌')";
+  const groupOrder = groupBy === "date" ? "id DESC" : "kg DESC";
+  const [summaryRows, groupRows, recordRows] = await Promise.all([
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT COUNT(*) AS recordCount,
+              COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount,
+              COUNT(DISTINCT COALESCE(b.system_customer_id, b.customer_id, 0)) AS customerCount,
+              SUM(CASE WHEN NULLIF(b.record_source, '') IS NOT NULL OR b.source IS NOT NULL THEN 1 ELSE 0 END) AS traceableRecordCount,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+              ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost, ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue
+       FROM ${HYDROGEN_TABLE} b WHERE ${scopedWhere}`,
+      params,
+    ),
+    groupBy === "record"
+      ? Promise.resolve([[] as RowDataPacket[]])
+      : hydrogenPool.query<RowDataPacket[]>(
+          `SELECT ${groupSelect},
+              COUNT(*) AS recordCount, COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount,
+              COUNT(DISTINCT COALESCE(b.system_customer_id, b.customer_id, 0)) AS customerCount,
+              ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg, ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost, ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NOT NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS lingniuKg,
+              ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.amount_kg ELSE 0 END), 0), 3) AS externalKg
+       FROM ${HYDROGEN_TABLE} b
+       LEFT JOIN new_hydrogen_site s ON s.id = b.station_id AND s.del_flag = '0'
+       LEFT JOIN common_district p ON CONVERT(p.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci AND p.STATUS = 'VALID'
+       LEFT JOIN common_district ct ON CONVERT(ct.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci AND ct.STATUS = 'VALID'
+       WHERE ${scopedWhere}
+       GROUP BY ${groupExpression}
+       ORDER BY ${groupOrder} LIMIT ? OFFSET ?`,
+          [...params, pageSize, offset],
+        ),
+    hydrogenPool.query<RowDataPacket[]>(
+      `SELECT b.id, DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d %H:%i:%s') AS time, b.order_no AS orderNo,
+              CAST(COALESCE(b.station_id, 0) AS CHAR) AS stationId, COALESCE(NULLIF(b.station_name, ''), '未关联站点') AS stationName,
+              COALESCE(b.system_customer_id, b.customer_id, 0) AS customerId, COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS customerName,
+              COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS plateNo, COALESCE(NULLIF(b.record_source, ''), CAST(b.source AS CHAR), '未知来源') AS source,
+              COALESCE(NULLIF(b.verify_status, ''), 'UNVERIFIED') AS verifyStatus, b.vehicle_id AS vehicleId,
+              ROUND(COALESCE(b.amount_kg, 0), 3) AS kg, ROUND(COALESCE(b.cost_price, 0), 2) AS unitPrice,
+              ROUND(COALESCE(b.cost_total, 0), 2) AS cost, ROUND(COALESCE(b.fee_total, 0), 2) AS revenue
+       FROM ${HYDROGEN_TABLE} b WHERE ${scopedWhere}
+       ORDER BY b.${HYDROGEN_LOCAL} DESC, b.id DESC LIMIT ? OFFSET ?`,
+      [...params, pageSize, offset],
+    ),
+  ]);
+  const summary = summaryRows[0][0] ?? {};
+  return {
+    groupBy,
+    amountScope,
+    filters: filterContext(filter),
+    summary: {
+      recordCount: Number(summary.recordCount) || 0,
+      stationCount: Number(summary.stationCount) || 0,
+      customerCount: Number(summary.customerCount) || 0,
+      traceableRecordCount: Number(summary.traceableRecordCount) || 0,
+      kg: number(summary.kg, 3),
+      cost: number(summary.cost),
+      revenue: number(summary.revenue),
+    },
+    groups: groupRows[0].map((row) => ({
+      id: String(row.id),
+      name: String(row.name),
+      province: row.province ? String(row.province) : null,
+      city: row.city ? String(row.city) : null,
+      recordCount: Number(row.recordCount) || 0,
+      stationCount: Number(row.stationCount) || 0,
+      customerCount: Number(row.customerCount) || 0,
+      kg: number(row.kg, 3),
+      cost: number(row.cost),
+      revenue: number(row.revenue),
+      lingniuKg: number(row.lingniuKg, 3),
+      externalKg: number(row.externalKg, 3),
+    })),
+    records: recordRows[0].map((row) => ({
+      id: String(row.id),
+      time: String(row.time),
+      orderNo: String(row.orderNo || ""),
+      stationId: String(row.stationId),
+      stationName: String(row.stationName),
+      customerId: Number(row.customerId) || 0,
+      customerName: String(row.customerName),
+      plateNo: String(row.plateNo),
+      source: String(row.source),
+      verifyStatus: String(row.verifyStatus),
+      vehicleScope:
+        row.vehicleId === null || row.vehicleId === undefined
+          ? "external"
+          : "lingniu",
+      kg: number(row.kg, 3),
+      unitPrice: number(row.unitPrice),
+      cost: number(row.cost),
+      revenue: number(row.revenue),
+    })),
+    page: { page, pageSize, hasMore: recordRows[0].length === pageSize },
+  };
+}
+
+export function registerHydrogenBiV2Routes(
+  app: Hono,
+  { hydrogenPool }: HydrogenBiV2Dependencies,
+) {
+  app.get("/h2/v2/meta", async (c) => c.json(await meta(hydrogenPool)));
+  app.get("/h2/v2/overview", async (c) =>
+    c.json(
+      await overview(
+        hydrogenPool,
+        resolveFilter((key) => c.req.query(key)),
+      ),
+    ),
+  );
+  app.get("/h2/v2/daily", async (c) =>
+    c.json(
+      await daily(
+        hydrogenPool,
+        resolveFilter((key) => c.req.query(key)),
+      ),
+    ),
+  );
+  app.get("/h2/v2/daily-tree", async (c) => {
+    const date = c.req.query("date");
+    if (!validDate(date))
+      return c.json({ message: "date 必须为有效的 YYYY-MM-DD" }, 400);
+    const filter = resolveFilter((key) =>
+      key === "date" ? date : c.req.query(key),
+    );
+    return c.json(await dailyTree(hydrogenPool, filter));
+  });
+  app.get("/h2/v2/drill", async (c) => {
+    const groupBy: GroupBy = [
+      "station",
+      "customer",
+      "date",
+      "vehicle",
+      "record",
+    ].includes(c.req.query("groupBy") ?? "")
+      ? (c.req.query("groupBy") as GroupBy)
+      : "station";
+    const requestedPage = Number(c.req.query("page"));
+    const page =
+      Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;
+    const requestedSize = Number(c.req.query("pageSize"));
+    const pageSize =
+      Number.isInteger(requestedSize) && requestedSize > 0
+        ? Math.min(requestedSize, 200)
+        : 100;
+    return c.json(
+      await drill(
+        hydrogenPool,
+        resolveFilter((key) => c.req.query(key)),
+        groupBy,
+        page,
+        pageSize,
+        resolveAmountScope(c.req.query("amountScope")),
+      ),
+    );
+  });
+}
@@ -0,0 +1,153 @@
+import type { Hono } from 'hono';
+import type { RowDataPacket } from 'mysql2';
+import type hydrogenPool from '../../hydrogen-db.js';
+import type { cached } from './cache.js';
+import { HYDROGEN_BASE_WHERE_B, HYDROGEN_LOCAL, HYDROGEN_TABLE } from './constants.js';
+import { customerClause, type CustomerKind } from './query-model.js';
+
+export interface HydrogenDailyDetailDependencies {
+  hydrogenPool: Pick<typeof hydrogenPool, 'query'>;
+  cached: typeof cached;
+}
+
+const YMD = /^\d{4}-\d{2}-\d{2}$/;
+
+export function registerHydrogenDailyDetailRoute(
+  app: Hono,
+  { hydrogenPool, cached }: HydrogenDailyDetailDependencies,
+) {
+  app.get('/hydrogen/daily-detail', async (c) => {
+    const date = c.req.query('date') || '';
+    if (!YMD.test(date)) return c.json({ error: 'date must be YYYY-MM-DD' }, 400);
+    const customer = (c.req.query('customer') || 'all') as CustomerKind;
+    const verifyScope = c.req.query('verifyScope') === 'verified' ? 'verified' : 'all';
+    const force = c.req.query('force') === '1';
+    const stationValue = Number(c.req.query('stationId'));
+    const stationId = Number.isInteger(stationValue) && stationValue > 0 ? stationValue : null;
+    const stationClause = stationId ? ' AND b.station_id = ?' : '';
+    const params: unknown[] = [date, ...(stationId ? [stationId] : [])];
+
+    const data = await cached(
+      `hydrogen/daily-detail?date=${date}&customer=${customer}${stationId ? `&station=${stationId}` : ''}${verifyScope === 'verified' ? '&verify=verified' : ''}`,
+      async () => {
+        const [rows] = await hydrogenPool.query<RowDataPacket[]>(
+          `SELECT b.id,
+                  DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%H:%i') AS time,
+                  COALESCE(b.station_id, 0) AS stationId,
+                  COALESCE(s.station_short_name, s.station_name, b.station_name, '未关联站点') AS stationName,
+                  COALESCE(s.station_type, 'unknown') AS stationType,
+                  COALESCE(b.system_customer_id, b.customer_id, 0) AS customerId,
+                  COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS customerName,
+                  COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS plateNo,
+                  b.vehicle_id AS vehicleId,
+                  COALESCE(NULLIF(b.record_source, ''), CAST(b.source AS CHAR), '未知来源') AS source,
+                  COALESCE(NULLIF(b.verify_status, ''), 'UNVERIFIED') AS verifyStatus,
+                  ROUND(COALESCE(b.cost_price, 0), 2) AS unitPrice,
+                  ROUND(COALESCE(b.amount_kg, 0), 3) AS kg,
+                  ROUND(COALESCE(b.cost_total, 0), 2) AS fee
+           FROM ${HYDROGEN_TABLE} b
+           LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
+           WHERE ${HYDROGEN_BASE_WHERE_B}
+             AND DATE(b.${HYDROGEN_LOCAL}) = ?
+             AND ${customerClause(customer).replaceAll('vehicle_id', 'b.vehicle_id')}${verifyScope === 'verified' ? " AND LOWER(COALESCE(NULLIF(TRIM(b.verify_status), ''), 'unverified')) = 'verified'" : ''}${stationClause}
+           ORDER BY b.${HYDROGEN_LOCAL} ASC, b.id ASC
+           LIMIT 3000`,
+          params,
+        );
+
+        type Vehicle = {
+          id: string;
+          time: string;
+          plateNo: string;
+          vehicleScope: 'lingniu' | 'external';
+          source: string;
+          verifyStatus: string;
+          unitPrice: number;
+          kg: number;
+          fee: number;
+        };
+        type Customer = { id: number; name: string; kg: number; fee: number; vehicles: Vehicle[] };
+        type Station = { id: number; name: string; stationType: string; kg: number; fee: number; customers: Map<number, Customer> };
+        const stations = new Map<number, Station>();
+
+        for (const row of rows) {
+          const currentStationId = Number(row.stationId) || 0;
+          const currentCustomerId = Number(row.customerId) || 0;
+          let station = stations.get(currentStationId);
+          if (!station) {
+            station = { id: currentStationId, name: String(row.stationName), stationType: String(row.stationType), kg: 0, fee: 0, customers: new Map() };
+            stations.set(currentStationId, station);
+          }
+          let customerRow = station.customers.get(currentCustomerId);
+          if (!customerRow) {
+            customerRow = { id: currentCustomerId, name: String(row.customerName), kg: 0, fee: 0, vehicles: [] };
+            station.customers.set(currentCustomerId, customerRow);
+          }
+          const kg = Number(row.kg) || 0;
+          const fee = Number(row.fee) || 0;
+          station.kg += kg;
+          station.fee += fee;
+          customerRow.kg += kg;
+          customerRow.fee += fee;
+          customerRow.vehicles.push({
+            // Ledger ids can exceed Number.MAX_SAFE_INTEGER. Keep the database
+            // identifier lossless so the final vehicle/source drill-down has
+            // stable React keys.
+            id: String(row.id),
+            time: String(row.time),
+            plateNo: String(row.plateNo),
+            vehicleScope: row.vehicleId === null || row.vehicleId === undefined ? 'external' : 'lingniu',
+            source: String(row.source),
+            verifyStatus: String(row.verifyStatus),
+            unitPrice: Number(row.unitPrice) || 0,
+            kg,
+            fee,
+          });
+        }
+
+        // `new_hydrogen_site_balance_record` is the only persisted station-balance
+        // source. It is intentionally queried separately so a missing balance record
+        // stays null instead of becoming a fabricated zero balance.
+        const stationIds = [...stations.keys()].filter(id => id > 0);
+        const balances = new Map<number, { amount: number; effectiveTime: string | null }>();
+        if (stationIds.length > 0) {
+          const placeholders = stationIds.map(() => '?').join(', ');
+          const [balanceRows] = await hydrogenPool.query<RowDataPacket[]>(
+            `SELECT r.site_id AS stationId,
+                    r.ending_balance AS amount,
+                    DATE_FORMAT(r.effective_time, '%Y-%m-%d %H:%i:%s') AS effectiveTime
+             FROM new_hydrogen_site_balance_record r
+             INNER JOIN (
+               SELECT site_id, MAX(effective_time) AS maxEffectiveTime
+               FROM new_hydrogen_site_balance_record
+               WHERE del_flag = '0' AND effective_time < DATE_ADD(?, INTERVAL 1 DAY)
+                 AND site_id IN (${placeholders})
+               GROUP BY site_id
+             ) latest ON latest.site_id = r.site_id AND latest.maxEffectiveTime = r.effective_time
+             WHERE r.del_flag = '0'`,
+            [date, ...stationIds],
+          );
+          for (const row of balanceRows) {
+            balances.set(Number(row.stationId), {
+              amount: Number(row.amount),
+              effectiveTime: row.effectiveTime === null || row.effectiveTime === undefined ? null : String(row.effectiveTime),
+            });
+          }
+        }
+
+        return {
+          date,
+          recordCount: rows.length,
+          stations: [...stations.values()].map(station => ({
+            ...station,
+            balance: balances.get(station.id)?.amount ?? null,
+            balanceEffectiveTime: balances.get(station.id)?.effectiveTime ?? null,
+            customers: [...station.customers.values()],
+          })),
+        };
+      },
+      { force },
+    );
+    return c.json(data);
+  });
+}
@@ -31,20 +31,24 @@ export function registerHydrogenDailyRoute(
    const range = (c.req.query('range') || 'last15') as Range;
    const dateRange = resolveDateRange(range, c.req.query('startDate'), c.req.query('endDate'));
    const customer = (c.req.query('customer') || 'external') as CustomerKind;
+    const verifyScope = c.req.query('verifyScope') === 'verified' ? 'verified' : 'all';
    const force = c.req.query('force') === '1';

-    const data = await cached(`hydrogen/daily?start=${dateRange.start}&end=${dateRange.end}&customer=${customer}`, async () => {
+    const data = await cached(`hydrogen/daily?start=${dateRange.start}&end=${dateRange.end}&customer=${customer}${verifyScope === 'verified' ? '&verify=verified' : ''}`, async () => {

    const where = [
      HYDROGEN_BASE_WHERE_B,
      `b.${HYDROGEN_LOCAL} >= '${HYDROGEN_MIN_DATE}'`,
      dateRangeClause(`b.${HYDROGEN_LOCAL}`),
-      customerClause(customer).replaceAll('customer_price', 'b.customer_price').replaceAll('fee_total', 'b.fee_total'),
+      customerClause(customer).replaceAll('vehicle_id', 'b.vehicle_id'),
+      ...(verifyScope === 'verified'
+        ? ["LOWER(COALESCE(NULLIF(TRIM(b.verify_status), ''), 'unverified')) = 'verified'"]
+        : []),
    ].join(' AND ');

    // 站点级聚合（每日 × 每站）。前端组装成 day → stations
    // 站点名 fallback：站点主数据 → 账本冗余站点名 → 未关联站点
-    // 单价不重算：直接取账本成本价。
+    // 单价不重算：直接取账本成本价；费用直接累计账本成本总额。
    const [stationRows] = await hydrogenPool.query<RowDataPacket[]>(
      `SELECT DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS d,
            COALESCE(b.station_id, 0) AS stationId,
@@ -52,6 +56,7 @@ export function registerHydrogenDailyRoute(
                     CASE WHEN MAX(b.station_id) IS NULL THEN '未关联站点'
                          ELSE CONCAT('未知站点 #', MAX(b.station_id)) END) AS stationName,
            ROUND(SUM(b.amount_kg), 2) AS kg,
+            ROUND(SUM(b.cost_total), 2) AS fee,
            -- 单价：直接取订单中的成本价（不重算）。MAX 自然忽略 0 元的免费/赠送单
            MAX(b.cost_price) AS pricePerKg
     FROM ${HYDROGEN_TABLE} b
@@ -64,21 +69,30 @@ export function registerHydrogenDailyRoute(

    // 站点环比：同站点上一条记录的 kg
    // 按 stationId 分组、按日期升序计算
-    type StationRow = { date: string; stationId: number; name: string; kg: number; pricePerKg: number };
+    type StationRow = {
+      date: string;
+      stationId: number;
+      name: string;
+      kg: number;
+      fee: number;
+      pricePerKg: number;
+    };
    const flat: StationRow[] = stationRows.map(r => ({
      date: r.d as string,
      stationId: Number(r.stationId),
      name: r.stationName as string,
      kg: Number(r.kg) || 0,
+      fee: Number(r.fee) || 0,
      pricePerKg: Number(r.pricePerKg) || 0,
    }));

    // 计算日级总量 + 日级环比
-    const dayMap = new Map<string, { totalKg: number; stations: typeof flat }>();
+    const dayMap = new Map<string, { totalKg: number; totalFee: number; stations: typeof flat }>();
    for (const s of flat) {
-      if (!dayMap.has(s.date)) dayMap.set(s.date, { totalKg: 0, stations: [] });
+      if (!dayMap.has(s.date)) dayMap.set(s.date, { totalKg: 0, totalFee: 0, stations: [] });
      const e = dayMap.get(s.date)!;
      e.totalKg += s.kg;
+      e.totalFee += s.fee;
      e.stations.push(s);
    }
    const dates = Array.from(dayMap.keys()).sort(); // ASC for chain
@@ -115,13 +129,16 @@ export function registerHydrogenDailyRoute(
      return {
        date,
        totalKg: info ? Math.round(info.totalKg * 100) / 100 : 0,
+        totalFee: info ? Math.round(info.totalFee * 100) / 100 : 0,
        chainPct: dayChainPct.get(date) ?? 0,
        customerType: customer,
        stations: info
            ? info.stations.slice().sort((a, b) => b.kg - a.kg).map(s => ({
+              id: s.stationId,
              name: s.name,
              pricePerKg: Math.round(s.pricePerKg * 100) / 100,
              kg: Math.round(s.kg * 100) / 100,
+              fee: Math.round(s.fee * 100) / 100,
              chainPct: stationChain.get(`${s.date}|${s.stationId}`) ?? 0,
            }))
          : [],
@@ -0,0 +1,271 @@
+import type { Hono } from 'hono';
+import type { RowDataPacket } from 'mysql2';
+import type hydrogenPool from '../../hydrogen-db.js';
+import type { cached } from './cache.js';
+import { HYDROGEN_BASE_WHERE_B, HYDROGEN_LOCAL, HYDROGEN_MIN_DATE, HYDROGEN_TABLE } from './constants.js';
+
+export interface HydrogenOverviewDetailDependencies {
+  hydrogenPool: Pick<typeof hydrogenPool, 'query'>;
+  cached: typeof cached;
+}
+
+type VehicleScope = 'all' | 'lingniu' | 'external';
+type VerifyScope = 'all' | 'verified';
+type GroupBy = 'station' | 'customer' | 'vehicle';
+
+export function registerHydrogenOverviewDetailRoute(
+  app: Hono,
+  { hydrogenPool, cached }: HydrogenOverviewDetailDependencies,
+) {
+  app.get('/hydrogen/overview-detail', async (c) => {
+    const requestedYear = Number(c.req.query('year'));
+    const year = Number.isInteger(requestedYear) && requestedYear >= 2020 && requestedYear <= 2100
+      ? requestedYear
+      : new Date().getFullYear();
+    const scopeParam = c.req.query('vehicleScope');
+    const vehicleScope: VehicleScope = scopeParam === 'lingniu' || scopeParam === 'external' ? scopeParam : 'all';
+    const verifyScope: VerifyScope = c.req.query('verifyScope') === 'verified' ? 'verified' : 'all';
+    const stationValue = Number(c.req.query('stationId'));
+    const stationId = Number.isInteger(stationValue) && stationValue > 0 ? stationValue : null;
+    const month = /^\d{4}-\d{2}$/.test(c.req.query('month') || '') ? c.req.query('month')! : null;
+    const date = /^\d{4}-\d{2}-\d{2}$/.test(c.req.query('date') || '') ? c.req.query('date')! : null;
+    const customerName = (c.req.query('customerName') || '').trim().slice(0, 128) || null;
+    const customerValue = Number(c.req.query('customerId'));
+    const customerId = Number.isInteger(customerValue) && customerValue >= 0 ? customerValue : null;
+    const plateNo = (c.req.query('plateNo') || '').trim().slice(0, 32) || null;
+    const region = (c.req.query('region') || '').trim().slice(0, 64) || null;
+    const regionGranularity = c.req.query('regionGranularity') === 'city' ? 'city' : 'province';
+    const groupByParam = c.req.query('groupBy');
+    const groupBy: GroupBy | null = groupByParam === 'station' || groupByParam === 'customer' || groupByParam === 'vehicle' ? groupByParam : null;
+    const requestedLimit = Number(c.req.query('limit'));
+    // 普通下钻避免一次返回过多账本；导出明确申请时，仍限制在可控范围。
+    const recordLimit = Number.isInteger(requestedLimit) && requestedLimit > 0
+      ? Math.min(requestedLimit, 20_000)
+      : 2_000;
+    const force = c.req.query('force') === '1';
+
+    const clauses = [HYDROGEN_BASE_WHERE_B, `b.${HYDROGEN_LOCAL} >= ?`, `YEAR(b.${HYDROGEN_LOCAL}) = ?`];
+    const params: unknown[] = [HYDROGEN_MIN_DATE, year];
+    if (vehicleScope === 'lingniu') clauses.push('b.vehicle_id IS NOT NULL');
+    if (vehicleScope === 'external') clauses.push('b.vehicle_id IS NULL');
+    if (verifyScope === 'verified') {
+      clauses.push("LOWER(COALESCE(NULLIF(TRIM(b.verify_status), ''), 'unverified')) = 'verified'");
+    }
+    if (stationId) { clauses.push('b.station_id = ?'); params.push(stationId); }
+    if (month) { clauses.push(`DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m') = ?`); params.push(month); }
+    if (date) { clauses.push(`DATE(b.${HYDROGEN_LOCAL}) = ?`); params.push(date); }
+    if (customerName) {
+      clauses.push(`COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') = ?`);
+      params.push(customerName);
+    }
+    if (customerId !== null) {
+      clauses.push('COALESCE(b.system_customer_id, b.customer_id, 0) = ?');
+      params.push(customerId);
+    }
+    if (plateNo) {
+      clauses.push(`COALESCE(NULLIF(b.license_plate, ''), '无车牌') = ?`);
+      params.push(plateNo);
+    }
+    if (region) {
+      clauses.push(regionGranularity === 'city'
+        ? `COALESCE(NULLIF(dc.NAME, ''), NULLIF(s.city, ''), '未归属') = ?`
+        : `COALESCE(NULLIF(dp.NAME, ''), NULLIF(s.province, ''), '未归属') = ?`);
+      params.push(region);
+    }
+    const cacheKey = [
+      `hydrogen/overview-detail?year=${year}`,
+      `vehicle=${vehicleScope}`,
+      verifyScope !== 'all' ? `verify=${verifyScope}` : '',
+      stationId ? `station=${stationId}` : '',
+      month ? `month=${month}` : '',
+      date ? `date=${date}` : '',
+      customerName ? `customer=${customerName}` : '',
+      customerId !== null ? `customerId=${customerId}` : '',
+      plateNo ? `plate=${plateNo}` : '',
+      region ? `${regionGranularity}=${region}` : '',
+      groupBy ? `groupBy=${groupBy}` : '',
+    ].filter(Boolean).join('&');
+
+    const data = await cached(cacheKey, async () => {
+      const [summaryRows] = await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT COUNT(*) AS recordCount,
+                COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount,
+                COUNT(DISTINCT CONCAT(
+                  COALESCE(b.system_customer_id, b.customer_id, 0), '|',
+                  COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户')
+                )) AS customerCount,
+                ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+                ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+                ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+                ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue
+         FROM ${HYDROGEN_TABLE} b
+         LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
+         LEFT JOIN common_district dp
+           ON CONVERT(dp.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          AND dp.STATUS = 'VALID'
+         LEFT JOIN common_district dc
+           ON CONVERT(dc.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          AND dc.STATUS = 'VALID'
+         WHERE ${clauses.join(' AND ')}`,
+        params,
+      );
+      // 总览第一层先返回业务维度汇总；只有用户点选某一行时，才读取账本流水。
+      const groupSelect = groupBy === 'station'
+        ? `COALESCE(b.station_id, 0) AS id,
+           COALESCE(s.station_short_name, s.station_name, b.station_name, '未关联站点') AS name,
+           COALESCE(NULLIF(dp.NAME, ''), NULLIF(s.province, ''), '未归属') AS province,
+           COALESCE(NULLIF(dc.NAME, ''), NULLIF(s.city, ''), '未归属') AS city,
+           COUNT(*) AS recordCount,
+           1 AS stationCount,
+           COUNT(DISTINCT CONCAT(COALESCE(b.system_customer_id, b.customer_id, 0), '|', COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户'))) AS customerCount,
+           ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+           ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+           ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+           ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue`
+        : groupBy === 'customer'
+          ? `COALESCE(b.system_customer_id, b.customer_id, 0) AS id,
+           COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS name,
+           NULL AS province,
+           NULL AS city,
+           COUNT(*) AS recordCount,
+           COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount,
+           1 AS customerCount,
+           ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+           ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+           ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+           ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue`
+          : `COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS id,
+           COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS name,
+           NULL AS province,
+           NULL AS city,
+           COUNT(*) AS recordCount,
+           COUNT(DISTINCT COALESCE(b.station_id, 0)) AS stationCount,
+           COUNT(DISTINCT CONCAT(COALESCE(b.system_customer_id, b.customer_id, 0), '|', COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户'))) AS customerCount,
+           ROUND(COALESCE(SUM(b.amount_kg), 0), 3) AS kg,
+           ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS cost,
+           ROUND(COALESCE(SUM(CASE WHEN b.vehicle_id IS NULL THEN b.cost_total ELSE 0 END), 0), 2) AS customerCost,
+           ROUND(COALESCE(SUM(b.fee_total), 0), 2) AS revenue,
+           CASE WHEN MAX(CASE WHEN b.vehicle_id IS NULL THEN 0 ELSE 1 END) = 1 THEN 'lingniu' ELSE 'external' END AS vehicleScope,
+           COALESCE(NULLIF(MAX(b.record_source), ''), CAST(MAX(b.source) AS CHAR), '未知来源') AS source,
+           COALESCE(NULLIF(MAX(b.verify_status), ''), 'UNVERIFIED') AS verifyStatus`;
+      const groupBySql = groupBy === 'station'
+        ? `COALESCE(b.station_id, 0), COALESCE(s.station_short_name, s.station_name, b.station_name, '未关联站点'), COALESCE(NULLIF(dp.NAME, ''), NULLIF(s.province, ''), '未归属'), COALESCE(NULLIF(dc.NAME, ''), NULLIF(s.city, ''), '未归属')`
+        : groupBy === 'customer'
+          ? `COALESCE(b.system_customer_id, b.customer_id, 0), COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户')`
+          : `COALESCE(NULLIF(b.license_plate, ''), '无车牌')`;
+      const [groupRows] = groupBy
+        ? await hydrogenPool.query<RowDataPacket[]>(
+          `SELECT ${groupSelect}
+           FROM ${HYDROGEN_TABLE} b
+           LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
+           LEFT JOIN common_district dp
+             ON CONVERT(dp.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+              = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            AND dp.STATUS = 'VALID'
+           LEFT JOIN common_district dc
+             ON CONVERT(dc.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+              = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            AND dc.STATUS = 'VALID'
+           WHERE ${clauses.join(' AND ')}
+           GROUP BY ${groupBySql}
+           ORDER BY kg DESC, recordCount DESC
+           LIMIT 200`,
+          params,
+        )
+        : [[] as RowDataPacket[]];
+      const [rows] = groupBy ? [[] as RowDataPacket[]] : await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT b.id,
+                b.order_no AS orderNo,
+                DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d %H:%i:%s') AS refuelTime,
+                COALESCE(b.station_id, 0) AS stationId,
+                COALESCE(s.station_short_name, s.station_name, b.station_name, '未关联站点') AS stationName,
+                COALESCE(NULLIF(dp.NAME, ''), NULLIF(s.province, ''), '未归属') AS province,
+                COALESCE(NULLIF(dc.NAME, ''), NULLIF(s.city, ''), '未归属') AS city,
+                COALESCE(b.system_customer_id, b.customer_id, 0) AS customerId,
+                COALESCE(NULLIF(b.system_customer_name, ''), NULLIF(b.customer_name, ''), '未关联客户') AS customerName,
+                COALESCE(NULLIF(b.license_plate, ''), '无车牌') AS plateNo,
+                b.vehicle_id AS vehicleId,
+                COALESCE(NULLIF(b.record_source, ''), CAST(b.source AS CHAR), '未知来源') AS source,
+                COALESCE(NULLIF(b.verify_status, ''), 'UNVERIFIED') AS verifyStatus,
+                ROUND(COALESCE(b.amount_kg, 0), 3) AS kg,
+                ROUND(COALESCE(b.cost_price, 0), 2) AS costPrice,
+                ROUND(COALESCE(b.cost_total, 0), 2) AS cost,
+                ROUND(COALESCE(b.customer_price, 0), 2) AS customerPrice,
+                ROUND(COALESCE(b.fee_total, 0), 2) AS revenue,
+                b.payment_status AS paymentStatus
+         FROM ${HYDROGEN_TABLE} b
+         LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
+         LEFT JOIN common_district dp
+           ON CONVERT(dp.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          AND dp.STATUS = 'VALID'
+         LEFT JOIN common_district dc
+           ON CONVERT(dc.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          AND dc.STATUS = 'VALID'
+         WHERE ${clauses.join(' AND ')}
+         ORDER BY b.${HYDROGEN_LOCAL} DESC, b.id DESC
+         LIMIT ${recordLimit}`,
+        params,
+      );
+      const groups = groupRows.map(row => ({
+        id: groupBy === 'vehicle' ? String(row.id || '无车牌') : Number(row.id) || 0,
+        name: String(row.name || (groupBy === 'station' ? '未关联站点' : groupBy === 'customer' ? '未关联客户' : '无车牌')),
+        province: row.province === null || row.province === undefined ? null : String(row.province),
+        city: row.city === null || row.city === undefined ? null : String(row.city),
+        recordCount: Number(row.recordCount) || 0,
+        stationCount: Number(row.stationCount) || 0,
+        customerCount: Number(row.customerCount) || 0,
+        kg: Number(row.kg) || 0,
+        cost: Number(row.cost) || 0,
+        customerCost: Number(row.customerCost) || 0,
+        revenue: Number(row.revenue) || 0,
+        vehicleScope: row.vehicleScope === 'lingniu' ? 'lingniu' : row.vehicleScope === 'external' ? 'external' : undefined,
+        source: row.source === null || row.source === undefined ? undefined : String(row.source),
+        verifyStatus: row.verifyStatus === null || row.verifyStatus === undefined ? undefined : String(row.verifyStatus),
+      }));
+      const records = rows.map(row => ({
+        id: Number(row.id),
+        orderNo: String(row.orderNo || ''),
+        refuelTime: String(row.refuelTime),
+        stationId: Number(row.stationId) || 0,
+        stationName: String(row.stationName),
+        province: String(row.province),
+        city: String(row.city),
+        customerId: Number(row.customerId) || 0,
+        customerName: String(row.customerName),
+        plateNo: String(row.plateNo),
+        vehicleScope: row.vehicleId === null || row.vehicleId === undefined ? 'external' as const : 'lingniu' as const,
+        source: String(row.source),
+        verifyStatus: String(row.verifyStatus),
+        kg: Number(row.kg) || 0,
+        costPrice: Number(row.costPrice) || 0,
+        cost: Number(row.cost) || 0,
+        customerPrice: Number(row.customerPrice) || 0,
+        revenue: Number(row.revenue) || 0,
+        paymentStatus: row.paymentStatus === null || row.paymentStatus === undefined ? null : Number(row.paymentStatus),
+      }));
+      const summaryRow = summaryRows[0] || {};
+      const recordCount = Number(summaryRow.recordCount) || 0;
+      return {
+        filter: { year, vehicleScope, verifyScope, stationId, month, date, customerName, customerId, plateNo, region, regionGranularity, groupBy },
+        groupBy,
+        groups,
+        truncated: !groupBy && recordCount > rows.length,
+        summary: {
+          recordCount,
+          stationCount: Number(summaryRow.stationCount) || 0,
+          customerCount: Number(summaryRow.customerCount) || 0,
+          kg: Number(summaryRow.kg) || 0,
+          cost: Number(summaryRow.cost) || 0,
+          customerCost: Number(summaryRow.customerCost) || 0,
+          revenue: Number(summaryRow.revenue) || 0,
+        },
+        records,
+      };
+    }, { force });
+    return c.json(data);
+  });
+}
@@ -15,7 +15,68 @@ export interface HydrogenOverviewDependencies {
  cached: typeof cached;
 }

-// 氢能总览：KPI + Top5 + 区域占比。
+type VehicleScope = 'all' | 'lingniu' | 'external';
+type VerifyScope = 'all' | 'verified';
+
+interface OverviewFilter {
+  cacheKey: string;
+  ledgerSql: string;
+  billSql: string;
+  params: number[];
+  stationId: number | null;
+  vehicleScope: VehicleScope;
+  verifyScope: VerifyScope;
+}
+
+function overviewFilter(
+  stationIdParam: string | undefined,
+  vehicleScopeParam: string | undefined,
+  verifyScopeParam: string | undefined,
+): OverviewFilter {
+  const stationId = Number(stationIdParam);
+  const safeStationId = Number.isInteger(stationId) && stationId > 0 ? stationId : null;
+  const vehicleScope: VehicleScope = vehicleScopeParam === 'lingniu' || vehicleScopeParam === 'external'
+    ? vehicleScopeParam
+    : 'all';
+  const verifyScope: VerifyScope = verifyScopeParam === 'verified' ? 'verified' : 'all';
+  const clauses: string[] = [];
+  const params: number[] = [];
+
+  if (safeStationId) {
+    clauses.push('station_id = ?');
+    params.push(safeStationId);
+  }
+  if (vehicleScope === 'lingniu') clauses.push('vehicle_id IS NOT NULL');
+  if (vehicleScope === 'external') clauses.push('vehicle_id IS NULL');
+  // Only use the ledger's persisted verification state; never infer verification
+  // from import source or payment status.
+  if (verifyScope === 'verified') {
+    clauses.push("LOWER(COALESCE(NULLIF(TRIM(verify_status), ''), 'unverified')) = 'verified'");
+  }
+
+  const suffix = clauses.length ? ` AND ${clauses.join(' AND ')}` : '';
+  const billSuffix = suffix
+    .replaceAll('station_id', 'b.station_id')
+    .replaceAll('vehicle_id', 'b.vehicle_id')
+    .replaceAll('verify_status', 'b.verify_status');
+  const cacheParts = [
+    safeStationId ? `station=${safeStationId}` : '',
+    vehicleScope !== 'all' ? `vehicle=${vehicleScope}` : '',
+    verifyScope !== 'all' ? `verify=${verifyScope}` : '',
+  ].filter(Boolean);
+
+  return {
+    cacheKey: cacheParts.length ? `&${cacheParts.join('&')}` : '',
+    ledgerSql: suffix,
+    billSql: billSuffix,
+    params,
+    stationId: safeStationId,
+    vehicleScope,
+    verifyScope,
+  };
+}
+
+// 氢能总览：KPI + 趋势 + 站点/区域/客户汇总。筛选只使用账本中可验证的站点和车辆归属字段。
 export function registerHydrogenOverviewRoute(
  app: Hono,
  { hydrogenPool, cached }: HydrogenOverviewDependencies,
@@ -23,26 +84,35 @@ export function registerHydrogenOverviewRoute(
  app.get('/hydrogen/overview', async (c) => {
    const yearParam = c.req.query('year');
    const force = c.req.query('force') === '1';
+    const filter = overviewFilter(c.req.query('stationId'), c.req.query('vehicleScope'), c.req.query('verifyScope'));
    const today = new Date();
    const todayYear = today.getFullYear();
    const requestedYear = yearParam ? Number(yearParam) || todayYear : todayYear;

-    const data = await cached(`hydrogen/overview?year=${requestedYear}`, async () => {
+    const data = await cached(`hydrogen/overview?year=${requestedYear}${filter.cacheKey}`, async () => {
    // 可选年份（数据自 HYDROGEN_MIN_DATE 起）
    const [yearListRows] = await hydrogenPool.query<RowDataPacket[]>(
-      `SELECT DISTINCT YEAR(${HYDROGEN_LOCAL}) AS y
+      `SELECT YEAR(${HYDROGEN_LOCAL}) AS y,
+            DATE_FORMAT(MAX(${HYDROGEN_LOCAL}), '%Y-%m-%d %H:%i:%s') AS latestLedgerTime
     FROM ${HYDROGEN_TABLE}
     WHERE ${HYDROGEN_BASE_WHERE} AND ${HYDROGEN_LOCAL} >= ?
+     GROUP BY YEAR(${HYDROGEN_LOCAL})
     ORDER BY y DESC`,
      [HYDROGEN_MIN_DATE],
    );
    const availableYears = yearListRows.map(r => Number(r.y)).filter(y => y > 0);
+    // 数据源时间来自账本，不等同于前端请求完成时间。
    const year = availableYears.includes(requestedYear) ? requestedYear : (availableYears[0] ?? todayYear);
+    // The watermark is calculated with the active scope below.  The year list
+    // remains global metadata so users can still select a year with no matching
+    // verified/vehicle/station records.
+    let latestLedgerTime: string | null = null;
    const isCurrentYear = year === todayYear;

-    // KPI（按 year 分桶；月/日仅在 isCurrentYear 时取本月/今日）
+    // KPI（按 year 分桶；月/日仅在 isCurrentYear 时取本月/今日）。
+    // yearProfit 是客户单毛利：仅以存在对客价/对客收入的订单成本抵扣对客收入。
    const [kpiRows] = await hydrogenPool.query<RowDataPacket[]>(
-      `SELECT
+      `SELECT DATE_FORMAT(MAX(CASE WHEN YEAR(${HYDROGEN_LOCAL}) = ? THEN ${HYDROGEN_LOCAL} END), '%Y-%m-%d %H:%i:%s') AS latestLedgerTime,
       SUM(CASE WHEN YEAR(${HYDROGEN_LOCAL}) = ?
                THEN amount_kg ELSE 0 END) AS yearKg,
       SUM(CASE WHEN YEAR(${HYDROGEN_LOCAL}) = ?
@@ -80,13 +150,14 @@ export function registerHydrogenOverviewRoute(
       SUM(CASE WHEN vehicle_id IS NOT NULL
                THEN cost_total ELSE 0 END) AS lingniuBornFee
     FROM ${HYDROGEN_TABLE}
-     WHERE ${HYDROGEN_BASE_WHERE} AND ${HYDROGEN_LOCAL} >= ?`,
-      [year, year, year, year, year, year, year,
+     WHERE ${HYDROGEN_BASE_WHERE} AND ${HYDROGEN_LOCAL} >= ?${filter.ledgerSql}`,
+      [year, year, year, year, year, year, year, year,
        isCurrentYear ? 1 : 0, isCurrentYear ? 1 : 0, isCurrentYear ? 1 : 0, isCurrentYear ? 1 : 0,
        isCurrentYear ? 1 : 0, isCurrentYear ? 1 : 0, isCurrentYear ? 1 : 0, isCurrentYear ? 1 : 0,
-        HYDROGEN_MIN_DATE],
+        HYDROGEN_MIN_DATE, ...filter.params],
    );
    const k = kpiRows[0] ?? {};
+    latestLedgerTime = typeof k.latestLedgerTime === 'string' ? k.latestLedgerTime : null;
    const yearFee = Number(k.yearFee) || 0;
    const yearCustomerCost = Number(k.yearCustomerCost) || 0;
    const yearRevenue = Number(k.yearRevenue) || 0;
@@ -128,15 +199,16 @@ export function registerHydrogenOverviewRoute(
     LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
     WHERE ${HYDROGEN_BASE_WHERE_B}
       AND b.${HYDROGEN_LOCAL} >= ?
-       AND YEAR(b.${HYDROGEN_LOCAL}) = ?
+       AND YEAR(b.${HYDROGEN_LOCAL}) = ?${filter.billSql}
     GROUP BY b.station_id
     ORDER BY kg DESC
     LIMIT 5`,
-      [HYDROGEN_MIN_DATE, year],
+      [HYDROGEN_MIN_DATE, year, ...filter.params],
    );
    const top5KgSum = kpi.yearKg || 1;
    const top5 = top5Rows.map((r, i) => ({
      rank: i + 1,
+      id: Number(r.id) || 0,
      name: r.name as string,
      kg:   Number(r.kg)  || 0,
      fee:  Number(r.fee) || 0,
@@ -149,21 +221,28 @@ export function registerHydrogenOverviewRoute(
            COALESCE(MAX(s.station_short_name), MAX(s.station_name), MAX(b.station_name),
              CASE WHEN b.station_id IS NULL THEN '未关联站点'
                   ELSE CONCAT('未知站点 #', b.station_id) END) AS name,
+            COALESCE(MAX(d.NAME), '未归属') AS province,
            SUM(b.amount_kg) AS kg,
            SUM(b.fee_total) AS revenue
     FROM ${HYDROGEN_TABLE} b
     LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
+     LEFT JOIN common_district d
+       ON CONVERT(d.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+        = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci
+      AND d.STATUS = 'VALID'
     WHERE ${HYDROGEN_BASE_WHERE_B}
       AND b.${HYDROGEN_LOCAL} >= ?
-       AND YEAR(b.${HYDROGEN_LOCAL}) = ?
+       AND YEAR(b.${HYDROGEN_LOCAL}) = ?${filter.billSql}
     GROUP BY b.station_id
     ORDER BY kg DESC`,
-      [HYDROGEN_MIN_DATE, year],
+      [HYDROGEN_MIN_DATE, year, ...filter.params],
    );
    const stationKgSum = stationFullRows.reduce((s, r) => s + (Number(r.kg) || 0), 0) || 1;
    const stationRevSum = stationFullRows.reduce((s, r) => s + (Number(r.revenue) || 0), 0) || 1;
    const stations = stationFullRows.map(r => ({
+      id: Number(r.id) || 0,
      name: r.name as string,
+      province: r.province as string,
      kg:           Number(r.kg)      || 0,
      revenue:      Number(r.revenue) || 0,
      share:        (Number(r.kg)      || 0) / stationKgSum,
@@ -174,6 +253,7 @@ export function registerHydrogenOverviewRoute(
    const [regionRows] = await hydrogenPool.query<RowDataPacket[]>(
      `SELECT region, SUM(kg) AS kg FROM (
       SELECT CASE
+                WHEN NULLIF(TRIM(d.NAME), '') IS NOT NULL THEN d.NAME
                WHEN COALESCE(s.station_name, b.station_name, '') LIKE '%嘉兴%' OR COALESCE(s.station_name, b.station_name, '') LIKE '%平湖%' THEN '嘉兴'
                WHEN COALESCE(s.station_name, b.station_name, '') LIKE '%广州%' THEN '广州'
                WHEN COALESCE(s.station_name, b.station_name, '') LIKE '%佛山%' THEN '佛山'
@@ -181,18 +261,23 @@ export function registerHydrogenOverviewRoute(
                WHEN COALESCE(s.station_name, b.station_name, '') LIKE '%重庆%' THEN '重庆'
                WHEN COALESCE(s.station_name, b.station_name, '') LIKE '%乌鲁木齐%' THEN '乌鲁木齐'
                WHEN COALESCE(s.station_name, b.station_name, '') LIKE '%昆山%' THEN '昆山'
-                ELSE COALESCE(NULLIF(s.station_name, ''), NULLIF(b.station_name, ''), '未知')
+                ELSE '未归属区域'
              END AS region,
              b.amount_kg AS kg
       FROM ${HYDROGEN_TABLE} b
       LEFT JOIN hydrogen_station s ON s.id = b.station_id AND s.del_flag = '0'
+       -- 历史站点城市编码与行政区字典的排序规则不同，显式统一避免线上连接报错。
+       LEFT JOIN common_district d
+         ON CONVERT(d.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci
+        AND d.STATUS = 'VALID'
       WHERE ${HYDROGEN_BASE_WHERE_B}
         AND b.${HYDROGEN_LOCAL} >= ?
-         AND YEAR(b.${HYDROGEN_LOCAL}) = ?
+         AND YEAR(b.${HYDROGEN_LOCAL}) = ?${filter.billSql}
     ) r
     GROUP BY region
     ORDER BY kg DESC`,
-      [HYDROGEN_MIN_DATE, year],
+      [HYDROGEN_MIN_DATE, year, ...filter.params],
    );
    const totalKg = regionRows.reduce((sum, r) => sum + (Number(r.kg) || 0), 0) || 1;
    const TOP_REGIONS = 8;
@@ -212,61 +297,77 @@ export function registerHydrogenOverviewRoute(
    const [monthRows] = await hydrogenPool.query<RowDataPacket[]>(
      `SELECT DATE_FORMAT(${HYDROGEN_LOCAL}, '%Y-%m') AS m,
            ROUND(SUM(amount_kg), 2) AS kg,
+            ROUND(SUM(CASE WHEN vehicle_id IS NOT NULL THEN amount_kg ELSE 0 END), 2) AS lingniuKg,
+            ROUND(SUM(CASE WHEN vehicle_id IS NULL THEN amount_kg ELSE 0 END), 2) AS externalKg,
            ROUND(SUM(cost_total), 2) AS fee,
            ROUND(SUM(CASE WHEN COALESCE(customer_price, 0) > 0 OR COALESCE(fee_total, 0) > 0 THEN cost_total ELSE 0 END), 2) AS customerCost,
            ROUND(SUM(fee_total), 2) AS revenue
     FROM ${HYDROGEN_TABLE}
     WHERE ${HYDROGEN_BASE_WHERE}
       AND ${HYDROGEN_LOCAL} >= ?
-       AND YEAR(${HYDROGEN_LOCAL}) = ?
+       AND YEAR(${HYDROGEN_LOCAL}) = ?${filter.ledgerSql}
     GROUP BY m
     ORDER BY m`,
-      [HYDROGEN_MIN_DATE, year],
+      [HYDROGEN_MIN_DATE, year, ...filter.params],
    );
-    const monthMap = new Map<string, { kg: number; fee: number; revenue: number; customerCost: number }>();
+    const monthMap = new Map<string, { kg: number; lingniuKg: number; externalKg: number; fee: number; revenue: number; customerCost: number }>();
    for (const r of monthRows) {
      monthMap.set(r.m as string, {
        kg: Number(r.kg) || 0,
+        lingniuKg: Number(r.lingniuKg) || 0,
+        externalKg: Number(r.externalKg) || 0,
        fee: Number(r.fee) || 0,
        revenue: Number(r.revenue) || 0,
        customerCost: Number(r.customerCost) || 0,
      });
    }
    const lastMonth = isCurrentYear ? today.getMonth() + 1 : 12;
-    const monthly: { month: string; kg: number; fee: number; revenue: number; profit: number }[] = [];
+    const monthly: { month: string; kg: number; lingniuKg: number; externalKg: number; fee: number; revenue: number; profit: number }[] = [];
    for (let mi = 1; mi <= lastMonth; mi++) {
      const key = `${year}-${String(mi).padStart(2, '0')}`;
-      const v = monthMap.get(key) || { kg: 0, fee: 0, revenue: 0, customerCost: 0 };
-      monthly.push({ month: key, kg: v.kg, fee: v.fee, revenue: v.revenue, profit: v.revenue - v.customerCost });
+      const v = monthMap.get(key) || { kg: 0, lingniuKg: 0, externalKg: 0, fee: 0, revenue: 0, customerCost: 0 };
+      monthly.push({ month: key, kg: v.kg, lingniuKg: v.lingniuKg, externalKg: v.externalKg, fee: v.fee, revenue: v.revenue, profit: v.revenue - v.customerCost });
    }

-    // 客户账单 Top（指定年份；按加氢量降序，前 30）
-    // payer：有客户单价/收入 → 客户承担；否则 → 羚牛承担
+    // 客户账单 Top（指定年份；按加氢量降序，前 30）。
+    // 同一客户可能同时存在客户承担与羚牛承担订单，必须显示为混合，不能按任一条记录覆盖。
    const [customerRows] = await hydrogenPool.query<RowDataPacket[]>(
      `SELECT COALESCE(NULLIF(TRIM(customer_name), ''), '未指定客户') AS name,
-            CASE WHEN MAX(COALESCE(customer_price, 0)) <= 0 AND MAX(COALESCE(fee_total, 0)) <= 0 THEN 'lingniu'
-                 ELSE 'customer' END AS payer,
+            CASE
+              WHEN SUM(CASE WHEN COALESCE(customer_price, 0) > 0 OR COALESCE(fee_total, 0) > 0 THEN 1 ELSE 0 END) > 0
+               AND SUM(CASE WHEN COALESCE(customer_price, 0) <= 0 AND COALESCE(fee_total, 0) <= 0 THEN 1 ELSE 0 END) > 0 THEN 'mixed'
+              WHEN SUM(CASE WHEN COALESCE(customer_price, 0) > 0 OR COALESCE(fee_total, 0) > 0 THEN 1 ELSE 0 END) > 0 THEN 'customer'
+              ELSE 'lingniu'
+            END AS payer,
            SUM(amount_kg) AS kg,
            SUM(cost_total) AS cost,
            SUM(fee_total) AS revenue
     FROM ${HYDROGEN_TABLE}
     WHERE ${HYDROGEN_BASE_WHERE}
       AND ${HYDROGEN_LOCAL} >= ?
-       AND YEAR(${HYDROGEN_LOCAL}) = ?
+       AND YEAR(${HYDROGEN_LOCAL}) = ?${filter.ledgerSql}
     GROUP BY name
     ORDER BY kg DESC
     LIMIT 30`,
-      [HYDROGEN_MIN_DATE, year],
+      [HYDROGEN_MIN_DATE, year, ...filter.params],
    );
    const customers = customerRows.map(r => ({
      name:    r.name as string,
-      payer:   (r.payer as string) === 'lingniu' ? 'lingniu' as const : 'customer' as const,
+      payer:   (r.payer as string) === 'lingniu'
+        ? 'lingniu' as const
+        : (r.payer as string) === 'mixed'
+          ? 'mixed' as const
+          : 'customer' as const,
      kg:      Number(r.kg)      || 0,
      cost:    Number(r.cost)    || 0,
      revenue: Number(r.revenue) || 0,
    }));

-    return { kpi, top5, regions, monthly, customers, stations, availableYears, year };
+    return { kpi, top5, regions, monthly, customers, stations, availableYears, year, latestLedgerTime, filter: {
+      stationId: filter.stationId,
+      vehicleScope: filter.vehicleScope,
+      verifyScope: filter.verifyScope,
+    } };
    }, { force });
    return c.json(data);
  });
@@ -0,0 +1,119 @@
+import type { Hono } from 'hono';
+import type { RowDataPacket } from 'mysql2';
+import type hydrogenPool from '../../hydrogen-db.js';
+import type { cached } from './cache.js';
+import { resolveDateRange, type EnergyDateRangeKind } from './query-model.js';
+
+type SettlementRange = EnergyDateRangeKind | 'latest' | 'custom';
+
+export interface HydrogenSettlementDependencies {
+  hydrogenPool: Pick<typeof hydrogenPool, 'query'>;
+  cached: typeof cached;
+}
+
+function toDateString(value: unknown): string | null {
+  if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
+  return null;
+}
+
+function minusDays(date: string, days: number): string {
+  // 用 UTC 正午作为日历运算锚点，避免东八区转 ISO 日期时落到前一天。
+  const result = new Date(`${date}T12:00:00Z`);
+  result.setUTCDate(result.getUTCDate() - days);
+  return result.toISOString().slice(0, 10);
+}
+
+function normalizeMatchMode(value: unknown): 'exact' | 'manual' | 'group' | 'unmatched' {
+  if (value === 'exact' || value === 'manual' || value === 'group') return value;
+  return 'unmatched';
+}
+
+// 站日现结只读台账：数据来自已入库的付款流水，不承担登记或审批职责。
+export function registerHydrogenSettlementRoute(
+  app: Hono,
+  { hydrogenPool, cached }: HydrogenSettlementDependencies,
+) {
+  app.get('/hydrogen/settlement', async (c) => {
+    const requestedRange = (c.req.query('range') || 'latest') as SettlementRange;
+    const force = c.req.query('force') === '1';
+
+    const [latestRows] = await hydrogenPool.query<RowDataPacket[]>(
+      `SELECT DATE_FORMAT(MAX(payment_date), '%Y-%m-%d') AS latestPaymentDate
+       FROM hydrogen_station_payment
+       WHERE del_flag = '0'`,
+    );
+    const latestPaymentDate = toDateString(latestRows[0]?.latestPaymentDate);
+
+    const dateRange = requestedRange === 'latest'
+      ? latestPaymentDate
+        ? { start: minusDays(latestPaymentDate, 14), end: latestPaymentDate, mode: 'latest' as const }
+        : { start: null, end: null, mode: 'latest' as const }
+      : (() => {
+        const resolved = resolveDateRange(
+          requestedRange as EnergyDateRangeKind,
+          c.req.query('startDate'),
+          c.req.query('endDate'),
+        );
+        return { ...resolved, mode: requestedRange === 'custom' ? 'custom' as const : requestedRange };
+      })();
+
+    if (!dateRange.start || !dateRange.end) {
+      return c.json({
+        range: dateRange,
+        summary: { amount: 0, paymentCount: 0, stationDayCount: 0, stationCount: 0, latestPaymentDate },
+        rows: [],
+      });
+    }
+
+    const data = await cached(
+      `hydrogen/settlement?start=${dateRange.start}&end=${dateRange.end}`,
+      async () => {
+        const [rows] = await hydrogenPool.query<RowDataPacket[]>(
+          `SELECT DATE_FORMAT(p.payment_date, '%Y-%m-%d') AS date,
+                  p.station_id AS stationId,
+                  COALESCE(MAX(s.station_short_name), MAX(s.station_name), MAX(p.raw_station_name), '未匹配加氢站') AS stationName,
+                  ROUND(SUM(p.amount), 2) AS amount,
+                  COUNT(*) AS paymentCount,
+                  CASE
+                    WHEN SUM(p.match_mode = 'exact') = COUNT(*) THEN 'exact'
+                    WHEN SUM(p.match_mode = 'manual') = COUNT(*) THEN 'manual'
+                    WHEN SUM(p.match_mode = 'group') = COUNT(*) THEN 'group'
+                    ELSE 'unmatched'
+                  END AS matchMode
+           FROM hydrogen_station_payment p
+           LEFT JOIN hydrogen_station s ON s.id = p.station_id AND s.del_flag = '0'
+           WHERE p.del_flag = '0'
+             AND p.payment_date >= ?
+             AND p.payment_date <= ?
+           GROUP BY DATE_FORMAT(p.payment_date, '%Y-%m-%d'), p.station_id, p.raw_station_name
+           ORDER BY date DESC, amount DESC
+           LIMIT 500`,
+          [dateRange.start, dateRange.end],
+        );
+
+        const normalizedRows = rows.map(row => ({
+          date: String(row.date),
+          stationId: row.stationId === null || row.stationId === undefined ? null : Number(row.stationId),
+          stationName: String(row.stationName),
+          amount: Number(row.amount) || 0,
+          paymentCount: Number(row.paymentCount) || 0,
+          matchMode: normalizeMatchMode(row.matchMode),
+        }));
+        const stationIds = new Set(normalizedRows.map(row => row.stationId ?? `name:${row.stationName}`));
+        return {
+          range: dateRange,
+          summary: {
+            amount: normalizedRows.reduce((total, row) => total + row.amount, 0),
+            paymentCount: normalizedRows.reduce((total, row) => total + row.paymentCount, 0),
+            stationDayCount: normalizedRows.length,
+            stationCount: stationIds.size,
+            latestPaymentDate,
+          },
+          rows: normalizedRows,
+        };
+      },
+      { force },
+    );
+    return c.json(data);
+  });
+}
@@ -0,0 +1,263 @@
+import type { Hono } from 'hono';
+import type { RowDataPacket } from 'mysql2';
+import type hydrogenPool from '../../hydrogen-db.js';
+import type { cached } from './cache.js';
+import { HYDROGEN_BASE_WHERE_B, HYDROGEN_LOCAL, HYDROGEN_TABLE } from './constants.js';
+import { dateRangeClause, enumerateDateRange, resolveDateRange } from './query-model.js';
+
+export interface HydrogenStationBoardDependencies {
+  hydrogenPool: Pick<typeof hydrogenPool, 'query'>;
+  cached: typeof cached;
+}
+
+function safeStationId(value: string | undefined): number | null {
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+
+function numberValue(value: unknown): number {
+  return Number(value) || 0;
+}
+
+// 单站经营看板只做只读聚合。站点列表保留区间内零业务站点，便于核对站点覆盖范围。
+export function registerHydrogenStationBoardRoute(
+  app: Hono,
+  { hydrogenPool, cached }: HydrogenStationBoardDependencies,
+) {
+  app.get('/hydrogen/station-board', async (c) => {
+    const range = resolveDateRange(
+      'last15',
+      c.req.query('startDate'),
+      c.req.query('endDate'),
+    );
+    const stationId = safeStationId(c.req.query('stationId'));
+    const force = c.req.query('force') === '1';
+    const cacheKey = `hydrogen/station-board?start=${range.start}&end=${range.end}${stationId ? `&station=${stationId}` : ''}`;
+
+    const data = await cached(cacheKey, async () => {
+      const [stationRows] = await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT s.id,
+                COALESCE(NULLIF(s.station_short_name, ''), NULLIF(s.station_name, ''), CONCAT('未知站点 #', s.id)) AS name,
+                COALESCE(NULLIF(dp.NAME, ''), NULLIF(s.province, ''), '未归属') AS province,
+                COALESCE(NULLIF(dc.NAME, ''), NULLIF(s.city, ''), '未归属') AS city,
+                ROUND(COALESCE(SUM(b.amount_kg), 0), 2) AS kg,
+                ROUND(COALESCE(SUM(b.cost_total), 0), 2) AS fee,
+                COUNT(b.id) AS recordCount,
+                DATE_FORMAT(MAX(b.${HYDROGEN_LOCAL}), '%Y-%m-%d %H:%i:%s') AS latestLedgerTime
+         FROM hydrogen_station s
+         LEFT JOIN ${HYDROGEN_TABLE} b
+           ON b.station_id = s.id
+          AND ${HYDROGEN_BASE_WHERE_B}
+          AND ${dateRangeClause(`b.${HYDROGEN_LOCAL}`)}
+         LEFT JOIN common_district dp
+           ON CONVERT(dp.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.province USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          AND dp.STATUS = 'VALID'
+         LEFT JOIN common_district dc
+           ON CONVERT(dc.CODE USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.city USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          AND dc.STATUS = 'VALID'
+         WHERE s.del_flag = '0'
+         GROUP BY s.id, s.station_short_name, s.station_name, dp.NAME, s.province, dc.NAME, s.city
+         ORDER BY kg DESC, name ASC`,
+        [range.start, range.end],
+      );
+
+      const [paymentRows] = await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT station_id AS stationId,
+                ROUND(SUM(amount), 2) AS amount,
+                COUNT(*) AS paymentCount,
+                DATE_FORMAT(MAX(payment_date), '%Y-%m-%d') AS latestPaymentDate
+         FROM hydrogen_station_payment
+         WHERE del_flag = '0'
+           AND payment_date >= ?
+           AND payment_date <= ?
+         GROUP BY station_id`,
+        [range.start, range.end],
+      );
+      const [summaryDailyRows] = await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS date,
+                ROUND(SUM(b.amount_kg), 2) AS kg,
+                ROUND(SUM(b.cost_total), 2) AS fee,
+                COUNT(*) AS recordCount
+         FROM ${HYDROGEN_TABLE} b
+         WHERE ${HYDROGEN_BASE_WHERE_B}
+           AND ${dateRangeClause(`b.${HYDROGEN_LOCAL}`)}
+         GROUP BY DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d')
+         ORDER BY date ASC`,
+        [range.start, range.end],
+      );
+      const [stationDailyRows] = await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT b.station_id AS stationId,
+                DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS date,
+                ROUND(SUM(b.amount_kg), 2) AS kg
+         FROM ${HYDROGEN_TABLE} b
+         WHERE ${HYDROGEN_BASE_WHERE_B}
+           AND ${dateRangeClause(`b.${HYDROGEN_LOCAL}`)}
+         GROUP BY b.station_id, DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d')
+         ORDER BY stationId ASC, date ASC`,
+        [range.start, range.end],
+      );
+      const [summaryPaymentDailyRows] = await hydrogenPool.query<RowDataPacket[]>(
+        `SELECT DATE_FORMAT(payment_date, '%Y-%m-%d') AS date,
+                ROUND(SUM(amount), 2) AS amount,
+                COUNT(*) AS paymentCount
+         FROM hydrogen_station_payment
+         WHERE del_flag = '0'
+           AND payment_date >= ?
+           AND payment_date <= ?
+         GROUP BY DATE_FORMAT(payment_date, '%Y-%m-%d')
+         ORDER BY date ASC`,
+        [range.start, range.end],
+      );
+      const paymentByStation = new Map(paymentRows.map(row => [numberValue(row.stationId), row]));
+      const dailyKgByStation = new Map<number, Map<string, number>>();
+      for (const row of stationDailyRows) {
+        const id = numberValue(row.stationId);
+        const values = dailyKgByStation.get(id) ?? new Map<string, number>();
+        values.set(String(row.date), numberValue(row.kg));
+        dailyKgByStation.set(id, values);
+      }
+      const totalKg = stationRows.reduce((sum, row) => sum + numberValue(row.kg), 0);
+      const stations = stationRows.map(row => {
+        const id = numberValue(row.id);
+        const payment = paymentByStation.get(id);
+        return {
+          id,
+          name: String(row.name),
+          province: String(row.province),
+          city: String(row.city),
+          kg: numberValue(row.kg),
+          fee: numberValue(row.fee),
+          recordCount: numberValue(row.recordCount),
+          paymentAmount: numberValue(payment?.amount),
+          paymentCount: numberValue(payment?.paymentCount),
+          share: totalKg > 0 ? numberValue(row.kg) / totalKg : 0,
+          latestLedgerTime: typeof row.latestLedgerTime === 'string' ? row.latestLedgerTime : null,
+          latestPaymentDate: typeof payment?.latestPaymentDate === 'string' ? payment.latestPaymentDate : null,
+          dailyKg: enumerateDateRange(range.start, range.end).map(date => ({
+            date,
+            kg: dailyKgByStation.get(id)?.get(date) ?? 0,
+          })),
+        };
+      });
+
+      let selected = null;
+      if (stationId) {
+        const [dailyRows] = await hydrogenPool.query<RowDataPacket[]>(
+          `SELECT DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d') AS date,
+                  ROUND(SUM(b.amount_kg), 2) AS kg,
+                  ROUND(SUM(b.cost_total), 2) AS fee,
+                  ROUND(AVG(NULLIF(b.cost_price, 0)), 2) AS avgPrice,
+                  COUNT(*) AS recordCount
+           FROM ${HYDROGEN_TABLE} b
+           WHERE ${HYDROGEN_BASE_WHERE_B}
+             AND b.station_id = ?
+             AND ${dateRangeClause(`b.${HYDROGEN_LOCAL}`)}
+           GROUP BY DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m-%d')
+           ORDER BY date ASC`,
+          [stationId, range.start, range.end],
+        );
+        const [dailyPaymentRows] = await hydrogenPool.query<RowDataPacket[]>(
+          `SELECT DATE_FORMAT(payment_date, '%Y-%m-%d') AS date,
+                  ROUND(SUM(amount), 2) AS amount,
+                  COUNT(*) AS paymentCount
+           FROM hydrogen_station_payment
+           WHERE del_flag = '0'
+             AND station_id = ?
+             AND payment_date >= ?
+             AND payment_date <= ?
+           GROUP BY DATE_FORMAT(payment_date, '%Y-%m-%d')
+           ORDER BY date ASC`,
+          [stationId, range.start, range.end],
+        );
+        const paymentByDate = new Map(dailyPaymentRows.map(row => [String(row.date), row]));
+        const ledgerByDate = new Map(dailyRows.map(row => [String(row.date), row]));
+        let previousKg = 0;
+        const daily = enumerateDateRange(range.start, range.end).map(date => {
+          const ledger = ledgerByDate.get(date);
+          const kg = numberValue(ledger?.kg);
+          const payment = paymentByDate.get(date);
+          const result = {
+            date,
+            kg,
+            fee: numberValue(ledger?.fee),
+            avgPrice: numberValue(ledger?.avgPrice),
+            recordCount: numberValue(ledger?.recordCount),
+            changeKg: kg - previousKg,
+            paymentAmount: numberValue(payment?.amount),
+            paymentCount: numberValue(payment?.paymentCount),
+          };
+          previousKg = kg;
+          return result;
+        });
+
+        const [customerMonthRows] = await hydrogenPool.query<RowDataPacket[]>(
+          `SELECT DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m') AS month,
+                  COALESCE(NULLIF(MAX(b.system_customer_name), ''), NULLIF(MAX(b.customer_name), ''), '未关联客户') AS customerName,
+                  ROUND(SUM(b.amount_kg), 2) AS kg,
+                  ROUND(SUM(b.cost_total), 2) AS fee,
+                  COUNT(*) AS recordCount
+           FROM ${HYDROGEN_TABLE} b
+           WHERE ${HYDROGEN_BASE_WHERE_B}
+             AND b.station_id = ?
+             AND b.${HYDROGEN_LOCAL} >= DATE_SUB(DATE_FORMAT(?, '%Y-%m-01'), INTERVAL 11 MONTH)
+             AND b.${HYDROGEN_LOCAL} < DATE_ADD(?, INTERVAL 1 DAY)
+           GROUP BY DATE_FORMAT(b.${HYDROGEN_LOCAL}, '%Y-%m'), COALESCE(b.system_customer_id, b.customer_id, 0)
+           ORDER BY month ASC, kg DESC`,
+          [stationId, range.end, range.end],
+        );
+        selected = {
+          daily,
+          customerMonths: customerMonthRows.map(row => ({
+            month: String(row.month),
+            customerName: String(row.customerName),
+            kg: numberValue(row.kg),
+            fee: numberValue(row.fee),
+            recordCount: numberValue(row.recordCount),
+          })),
+        };
+      }
+
+      const paymentTotal = stations.reduce((sum, station) => sum + station.paymentAmount, 0);
+      const summaryLedgerByDate = new Map(summaryDailyRows.map(row => [String(row.date), row]));
+      const summaryPaymentByDate = new Map(summaryPaymentDailyRows.map(row => [String(row.date), row]));
+      const summaryDaily = enumerateDateRange(range.start, range.end).map(date => {
+        const ledger = summaryLedgerByDate.get(date);
+        const payment = summaryPaymentByDate.get(date);
+        return {
+          date,
+          kg: numberValue(ledger?.kg),
+          fee: numberValue(ledger?.fee),
+          recordCount: numberValue(ledger?.recordCount),
+          paymentAmount: numberValue(payment?.amount),
+          paymentCount: numberValue(payment?.paymentCount),
+        };
+      });
+      const latestLedgerTime = stations
+        .map(station => station.latestLedgerTime)
+        .filter((value): value is string => Boolean(value))
+        .sort()
+        .at(-1) ?? null;
+
+      return {
+        range,
+        summary: {
+          stationCount: stations.length,
+          activeStationCount: stations.filter(station => station.kg > 0).length,
+          totalKg,
+          totalFee: stations.reduce((sum, station) => sum + station.fee, 0),
+          recordCount: stations.reduce((sum, station) => sum + station.recordCount, 0),
+          paymentAmount: paymentTotal,
+          paymentCount: stations.reduce((sum, station) => sum + station.paymentCount, 0),
+          latestLedgerTime,
+          daily: summaryDaily,
+        },
+        stations,
+        selected,
+      };
+    }, { force });
+
+    return c.json(data);
+  });
+}
@@ -8,8 +8,14 @@ import {
  registerElectricMonthlyRoute,
  registerElectricOverviewRoute,
 } from './electric.js';
+import { registerEtcOverviewRoute } from './etc.js';
 import { registerHydrogenDailyRoute } from './hydrogen-daily.js';
+import { registerHydrogenDailyDetailRoute } from './hydrogen-daily-detail.js';
 import { registerHydrogenOverviewRoute } from './hydrogen-overview.js';
+import { registerHydrogenOverviewDetailRoute } from './hydrogen-overview-detail.js';
+import { registerHydrogenSettlementRoute } from './hydrogen-settlement.js';
+import { registerHydrogenStationBoardRoute } from './hydrogen-station-board.js';
+import { registerHydrogenBiV2Routes } from './hydrogen-bi-v2.js';

 const app = new Hono();

@@ -26,8 +32,14 @@ app.use('*', async (c, next) => {
 const cacheDependency = { cached };

 registerHydrogenOverviewRoute(app, { ...cacheDependency, hydrogenPool });
+registerHydrogenOverviewDetailRoute(app, { ...cacheDependency, hydrogenPool });
 registerHydrogenDailyRoute(app, { ...cacheDependency, hydrogenPool });
+registerHydrogenDailyDetailRoute(app, { ...cacheDependency, hydrogenPool });
+registerHydrogenSettlementRoute(app, { ...cacheDependency, hydrogenPool });
+registerHydrogenStationBoardRoute(app, { ...cacheDependency, hydrogenPool });
+registerHydrogenBiV2Routes(app, { hydrogenPool });
 registerElectricOverviewRoute(app, { ...cacheDependency, pool });
 registerElectricMonthlyRoute(app, { ...cacheDependency, pool });
+registerEtcOverviewRoute(app, { ...cacheDependency, pool });

 export default app;
@@ -7,9 +7,9 @@ import {
  resolveDateRange,
 } from './query-model.js';

-test('客户范围继续让外部车辆返回空数据', () => {
-  assert.equal(customerClause('external'), '1=0');
-  assert.equal(customerClause('lingniu'), '1=1');
+test('车辆归属按账本 vehicle_id 区分羚牛和外部车辆', () => {
+  assert.equal(customerClause('external'), 'vehicle_id IS NULL');
+  assert.equal(customerClause('lingniu'), 'vehicle_id IS NOT NULL');
  assert.equal(customerClause('all'), '1=1');
 });

@@ -8,10 +8,11 @@ export interface EnergyDateRange {

 const YMD_RE = /^\d{4}-\d{2}-\d{2}$/;

-// 新账本目前只承载羚牛车辆订单；外部车辆仍需返回空集合而不是混用羚牛数据。
+// 车辆归属以账本 vehicle_id 为准，与氢能总览的筛选口径一致。
+// 账本未关联车辆的记录归入外部车辆，避免在日报中遗漏真实加氢数据。
 export function customerClause(customer: CustomerKind): string {
-  if (customer === 'external') return '1=0';
-  if (customer === 'lingniu') return '1=1';
+  if (customer === 'external') return 'vehicle_id IS NULL';
+  if (customer === 'lingniu') return 'vehicle_id IS NOT NULL';
  return '1=1';
 }

@@ -1,21 +1,37 @@
-import assert from 'node:assert/strict';
-import { createHash } from 'node:crypto';
-import test from 'node:test';
-import { Hono } from 'hono';
-import app from './index.js';
+import assert from "node:assert/strict";
+import { createHash } from "node:crypto";
+import test from "node:test";
+import { Hono } from "hono";
+import app from "./index.js";
 import {
  registerElectricMonthlyRoute,
  registerElectricOverviewRoute,
  type ElectricDependencies,
-} from './electric.js';
+} from "./electric.js";
+import {
+  registerEtcOverviewRoute,
+  type EtcOverviewDependencies,
+} from "./etc.js";
 import {
  registerHydrogenDailyRoute,
  type HydrogenDailyDependencies,
-} from './hydrogen-daily.js';
+} from "./hydrogen-daily.js";
 import {
  registerHydrogenOverviewRoute,
  type HydrogenOverviewDependencies,
-} from './hydrogen-overview.js';
+} from "./hydrogen-overview.js";
+import {
+  registerHydrogenSettlementRoute,
+  type HydrogenSettlementDependencies,
+} from "./hydrogen-settlement.js";
+import {
+  registerHydrogenStationBoardRoute,
+  type HydrogenStationBoardDependencies,
+} from "./hydrogen-station-board.js";
+import {
+  registerHydrogenBiV2Routes,
+  type HydrogenBiV2Dependencies,
+} from "./hydrogen-bi-v2.js";

 interface QueryCall {
  sql: string;
@@ -46,45 +62,654 @@ function createCachedMock(calls: CacheCall[]) {
 }

 function sqlHash(sql: string): string {
-  return createHash('sha256').update(sql).digest('hex').slice(0, 12);
+  return createHash("sha256").update(sql).digest("hex").slice(0, 12);
 }

-test('能源路由继续按原顺序注册四个 GET 接口', () => {
+test("能源路由按既有顺序注册并增加只读单站看板接口", () => {
  assert.deepEqual(
-    app.routes.filter(route => route.method === 'GET').map(route => route.path),
+    app.routes
+      .filter((route) => route.method === "GET")
+      .map((route) => route.path),
    [
-      '/hydrogen/overview',
-      '/hydrogen/daily',
-      '/electric/overview',
-      '/electric/monthly',
+      "/hydrogen/overview",
+      "/hydrogen/overview-detail",
+      "/hydrogen/daily",
+      "/hydrogen/daily-detail",
+      "/hydrogen/settlement",
+      "/hydrogen/station-board",
+      "/h2/v2/meta",
+      "/h2/v2/overview",
+      "/h2/v2/daily",
+      "/h2/v2/daily-tree",
+      "/h2/v2/drill",
+      "/electric/overview",
+      "/electric/monthly",
+      "/etc/overview",
    ],
  );
 });

-test('四个处理器继续使用原缓存语义、数据库、SQL 与参数', async () => {
+test("氢能 BI v2 使用独立真实账本合同，并且不让前端拼接旧接口", async () => {
+  const calls: QueryCall[] = [];
+  const v2App = new Hono();
+  registerHydrogenBiV2Routes(v2App, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [{ value: 2026, startDate: "2026-01-01", endDate: "2026-08-18" }],
+          [{ id: 7, name: "测试站", province: "广东省", city: "佛山市" }],
+          [{ ledgerAt: "2026-08-18 10:00:00" }],
+        ],
+        calls,
+      ),
+    },
+  } as unknown as HydrogenBiV2Dependencies);
+
+  const response = await v2App.request("/h2/v2/meta");
+  assert.equal(response.status, 200);
+  assert.deepEqual(await response.json(), {
+    years: [{ value: 2026, startDate: "2026-01-01", endDate: "2026-08-18" }],
+    stations: [{ id: "7", name: "测试站", province: "广东省", city: "佛山市" }],
+    watermark: { ledgerAt: "2026-08-18 10:00:00", paymentAt: null },
+  });
+  assert.equal(calls.length, 3);
+  assert.match(calls[0].sql, /FROM hydrogen_fuel_ledger/);
+  assert.match(calls[1].sql, /FROM new_hydrogen_site/);
+});
+
+test("氢能 BI v2 下钻在日期、站点、客户、车辆及区域上下文中复用同一过滤口径", async () => {
+  const calls: QueryCall[] = [];
+  const v2App = new Hono();
+  registerHydrogenBiV2Routes(v2App, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [{ recordCount: 2, kg: 30, cost: 900, revenue: 1000 }],
+          [
+            {
+              id: "2026-08-18",
+              name: "2026-08-18",
+              province: null,
+              city: null,
+              recordCount: 2,
+              stationCount: 1,
+              customerCount: 1,
+              kg: 30,
+              cost: 900,
+              revenue: 1000,
+              lingniuKg: 0,
+              externalKg: 30,
+            },
+          ],
+          [
+            {
+              id: 9,
+              time: "2026-08-18 08:00:00",
+              orderNo: "H2-9",
+              stationId: 0,
+              stationName: "未关联站点",
+              customerId: 0,
+              customerName: "未关联客户",
+              plateNo: "无车牌",
+              source: "import",
+              verifyStatus: "VERIFIED",
+              vehicleId: null,
+              kg: 30,
+              unitPrice: 30,
+              cost: 900,
+              revenue: 1000,
+            },
+          ],
+        ],
+        calls,
+      ),
+    },
+  } as unknown as HydrogenBiV2Dependencies);
+
+  const response = await v2App.request(
+    "/h2/v2/drill?date=2026-08-18&stationId=0&customerId=0&customerName=%E6%9C%AA%E5%85%B3%E8%81%94%E5%AE%A2%E6%88%B7&plateNo=%E6%97%A0%E8%BD%A6%E7%89%8C&region=%E5%98%89%E5%85%B4%E5%B8%82&regionGranularity=city&vehicleScope=external&verifyScope=verified&groupBy=date&pageSize=20",
+  );
+  assert.equal(response.status, 200);
+  const payload = await response.json();
+  assert.equal(payload.groupBy, "date");
+  assert.equal(payload.filters.date, "2026-08-18");
+  assert.equal(payload.filters.stationId, "0");
+  assert.equal(payload.filters.customerId, 0);
+  assert.equal(payload.filters.customerName, "未关联客户");
+  assert.equal(payload.filters.plateNo, "无车牌");
+  assert.equal(payload.filters.region, "嘉兴市");
+  assert.equal(payload.groups[0].id, "2026-08-18");
+  assert.equal(payload.summary.kg, 30);
+
+  assert.equal(calls.length, 3);
+  const commonParams = [
+    "2026-08-18",
+    "2026-08-18",
+    "0",
+    0,
+    "未关联客户",
+    "无车牌",
+    "嘉兴市",
+  ];
+  assert.deepEqual(calls[0].params, commonParams);
+  assert.deepEqual((calls[1].params as unknown[]).slice(0, -2), commonParams);
+  assert.deepEqual((calls[2].params as unknown[]).slice(0, -2), commonParams);
+  for (const call of calls) {
+    assert.match(call.sql, /COALESCE\(b\.station_id, 0\) = \?/);
+    assert.match(
+      call.sql,
+      /COALESCE\(b\.system_customer_id, b\.customer_id, 0\) = \?/,
+    );
+    assert.match(call.sql, /COALESCE\(NULLIF\(b\.license_plate/);
+    assert.match(call.sql, /new_hydrogen_site rs/);
+    assert.match(call.sql, /b\.vehicle_id IS NULL/);
+    assert.match(call.sql, /verify_status/);
+  }
+  assert.match(
+    calls[1].sql,
+    /GROUP BY DATE_FORMAT\(b\.refuel_time, '%Y-%m-%d'\)/,
+  );
+  assert.match(calls[1].sql, /ORDER BY id DESC/);
+});
+
+test("氢能 BI v2 利润下钻只保留客户承担订单，并与对客总价使用同一订单集合", async () => {
+  const calls: QueryCall[] = [];
+  const v2App = new Hono();
+  registerHydrogenBiV2Routes(v2App, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [{ recordCount: 1, kg: 10, cost: 300, revenue: 360 }],
+          [
+            {
+              id: "7",
+              name: "客户承担站",
+              province: "浙江省",
+              city: "嘉兴市",
+              recordCount: 1,
+              stationCount: 1,
+              customerCount: 1,
+              kg: 10,
+              cost: 300,
+              revenue: 360,
+              lingniuKg: 10,
+              externalKg: 0,
+            },
+          ],
+          [
+            {
+              id: 1,
+              time: "2026-08-18 09:00:00",
+              orderNo: "H2-1",
+              stationId: 7,
+              stationName: "客户承担站",
+              customerId: 8,
+              customerName: "客户A",
+              plateNo: "浙A1",
+              source: "api",
+              verifyStatus: "VERIFIED",
+              vehicleId: 1,
+              kg: 10,
+              unitPrice: 30,
+              cost: 300,
+              revenue: 360,
+            },
+          ],
+        ],
+        calls,
+      ),
+    },
+  } as unknown as HydrogenBiV2Dependencies);
+
+  const response = await v2App.request(
+    "/h2/v2/drill?year=2026&vehicleScope=all&verifyScope=all&groupBy=station&amountScope=customer",
+  );
+  assert.equal(response.status, 200);
+  const payload = await response.json();
+  assert.equal(payload.amountScope, "customer");
+  assert.equal(payload.summary.revenue - payload.summary.cost, 60);
+  assert.equal(calls.length, 3);
+  for (const call of calls) {
+    assert.match(
+      call.sql,
+      /b\.settlement_type = 1/,
+    );
+  }
+});
+
+test("氢能 BI v2 保留原型允许选择的 2023 历史年份，不回退到当前年", async () => {
+  const calls: QueryCall[] = [];
+  const v2App = new Hono();
+  registerHydrogenBiV2Routes(v2App, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [
+            {
+              ledgerAt: null,
+              totalKg: 0,
+              totalCost: 0,
+              totalRevenue: 0,
+              customerCost: 0,
+              monthKg: 0,
+              monthCost: 0,
+              todayKg: 0,
+              todayCost: 0,
+              recordCount: 0,
+              stationCount: 0,
+            },
+          ],
+          [],
+          [],
+          [],
+        ],
+        calls,
+      ),
+    },
+  } as unknown as HydrogenBiV2Dependencies);
+
+  const response = await v2App.request(
+    "/h2/v2/overview?year=2023&vehicleScope=all&verifyScope=all",
+  );
+  assert.equal(response.status, 200);
+  const payload = await response.json();
+  assert.deepEqual(payload.range, {
+    startDate: "2023-01-01",
+    endDate: "2023-12-31",
+  });
+  assert.equal(payload.filters.startDate, "2023-01-01");
+  assert.equal(payload.filters.endDate, "2023-12-31");
+  assert.equal(payload.kpis.totalKg, 0);
+  assert.equal(calls.length, 4);
+});
+
+test("氢能 BI v2 客户账单按 settlement_type 映射客户、我司和其他承担", async () => {
+  const calls: QueryCall[] = [];
+  const v2App = new Hono();
+  registerHydrogenBiV2Routes(v2App, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [
+            {
+              ledgerAt: "2026-08-19 10:00:00",
+              totalKg: 60,
+              totalCost: 1800,
+              totalRevenue: 720,
+              customerBearingKg: 10,
+              companyBearingKg: 30,
+              otherBearingKg: 20,
+              customerRevenue: 360,
+              customerCost: 600,
+              companyCost: 900,
+              otherCost: 300,
+              monthKg: 60,
+              monthCost: 1800,
+              todayKg: 0,
+              todayCost: 0,
+              recordCount: 3,
+              stationCount: 1,
+            },
+          ],
+          [
+            {
+              month: "2026-01",
+              totalKg: 60,
+              lingniuKg: 30,
+              externalKg: 30,
+              cost: 1800,
+              revenue: 720,
+              customerRevenue: 360,
+              customerCost: 600,
+            },
+          ],
+          [],
+          [
+            {
+              id: 1,
+              name: "混合承担客户",
+              kg: 30,
+              customerBearingKg: 10,
+              companyBearingKg: 20,
+              otherBearingKg: 0,
+              cost: 900,
+              revenue: 300,
+              customerRevenue: 360,
+              customerCost: 600,
+              companyCost: 300,
+              otherCost: 0,
+              recordCount: 2,
+            },
+            {
+              id: 2,
+              name: "仅我司承担客户",
+              kg: 30,
+              customerBearingKg: 0,
+              companyBearingKg: 10,
+              otherBearingKg: 20,
+              cost: 900,
+              revenue: 0,
+              customerRevenue: 0,
+              customerCost: 0,
+              companyCost: 300,
+              otherCost: 600,
+              recordCount: 1,
+            },
+          ],
+        ],
+        calls,
+      ),
+    },
+  } as unknown as HydrogenBiV2Dependencies);
+
+  const response = await v2App.request(
+    "/h2/v2/overview?year=2026&vehicleScope=all&verifyScope=all",
+  );
+  assert.equal(response.status, 200);
+  const payload = await response.json();
+  assert.equal(payload.kpis.customerBearingKg, 10);
+  assert.equal(payload.kpis.companyBearingKg, 30);
+  assert.equal(payload.kpis.otherBearingKg, 20);
+  assert.equal(
+    payload.kpis.totalKg,
+    payload.kpis.customerBearingKg +
+      payload.kpis.companyBearingKg +
+      payload.kpis.otherBearingKg,
+  );
+  assert.equal(payload.kpis.customerGrossProfit, -240);
+  assert.equal(payload.monthly[0].customerRevenue, 360);
+  assert.equal(payload.monthly[0].customerCost, 600);
+  assert.equal(payload.monthly[0].customerGrossProfit, -240);
+  assert.deepEqual(payload.customers.map((row: { name: string; bearer: string }) => ({
+    name: row.name,
+    bearer: row.bearer,
+  })), [
+    { name: "混合承担客户", bearer: "both" },
+    { name: "仅我司承担客户", bearer: "other" },
+  ]);
+  assert.match(calls[3].sql, /AS customerBearingKg/);
+  assert.match(calls[3].sql, /AS companyBearingKg/);
+  assert.match(calls[3].sql, /AS otherBearingKg/);
+  assert.match(calls[2].sql, /AS customerRevenue/);
+  assert.match(calls[2].sql, /AS customerCost/);
+  assert.match(calls[2].sql, /AS companyCost/);
+  assert.match(calls[2].sql, /AS otherCost/);
+  assert.match(calls[3].sql, /AS customerRevenue/);
+  assert.match(calls[3].sql, /AS customerCost/);
+  assert.match(calls[3].sql, /AS companyCost/);
+  assert.match(calls[3].sql, /AS otherCost/);
+  assert.equal(payload.customers[0].customerRevenue, 360);
+  assert.equal(payload.customers[0].customerCost, 600);
+  assert.match(calls[3].sql, /b\.settlement_type = 1/);
+  assert.match(calls[3].sql, /b\.settlement_type = 2/);
+  assert.match(calls[3].sql, /b\.settlement_type NOT IN \(1, 2\)/);
+});
+
+test("氢能 BI v2 月度上下文换算为完整自然月并沿用至明细", async () => {
+  const calls: QueryCall[] = [];
+  const v2App = new Hono();
+  registerHydrogenBiV2Routes(v2App, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [[{ recordCount: 0, kg: 0, cost: 0, revenue: 0 }], []],
+        calls,
+      ),
+    },
+  } as unknown as HydrogenBiV2Dependencies);
+
+  const response = await v2App.request(
+    "/h2/v2/drill?month=2026-02&vehicleScope=all&verifyScope=all&groupBy=record",
+  );
+  assert.equal(response.status, 200);
+  const payload = await response.json();
+  assert.deepEqual(payload.filters.startDate, "2026-02-01");
+  assert.deepEqual(payload.filters.endDate, "2026-02-28");
+  assert.equal(payload.filters.month, "2026-02");
+  assert.equal(calls.length, 2);
+  assert.deepEqual(calls[0].params, ["2026-02-01", "2026-02-28"]);
+  assert.deepEqual((calls[1].params as unknown[]).slice(0, -2), [
+    "2026-02-01",
+    "2026-02-28",
+  ]);
+});
+
+test("单站看板保留零业务站点并合并区间现结流水", async () => {
+  const calls: QueryCall[] = [];
+  const cacheCalls: CacheCall[] = [];
+  const stationBoardApp = new Hono();
+  registerHydrogenStationBoardRoute(stationBoardApp, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [
+            {
+              id: 7,
+              name: "测试加氢站",
+              province: "广东省",
+              city: "佛山市",
+              kg: 100,
+              fee: 3500,
+              recordCount: 2,
+              latestLedgerTime: "2026-08-17 10:00:00",
+            },
+            {
+              id: 8,
+              name: "零业务站",
+              province: "广东省",
+              city: "广州市",
+              kg: 0,
+              fee: 0,
+              recordCount: 0,
+              latestLedgerTime: null,
+            },
+          ],
+          [
+            {
+              stationId: 7,
+              amount: 5000,
+              paymentCount: 1,
+              latestPaymentDate: "2026-08-17",
+            },
+          ],
+          [
+            { date: "2026-08-16", kg: 40, fee: 1400, recordCount: 1 },
+            { date: "2026-08-17", kg: 60, fee: 2100, recordCount: 1 },
+          ],
+          [
+            { stationId: 7, date: "2026-08-16", kg: 40 },
+            { stationId: 7, date: "2026-08-17", kg: 60 },
+          ],
+          [{ date: "2026-08-17", amount: 5000, paymentCount: 1 }],
+        ],
+        calls,
+      ),
+    },
+    cached: createCachedMock(cacheCalls),
+  } as unknown as HydrogenStationBoardDependencies);
+
+  const response = await stationBoardApp.request(
+    "/hydrogen/station-board?startDate=2026-08-16&endDate=2026-08-17&force=1",
+  );
+  assert.equal(response.status, 200);
+  const payload = await response.json();
+  assert.deepEqual(payload.summary, {
+    stationCount: 2,
+    activeStationCount: 1,
+    totalKg: 100,
+    totalFee: 3500,
+    recordCount: 2,
+    paymentAmount: 5000,
+    paymentCount: 1,
+    latestLedgerTime: "2026-08-17 10:00:00",
+    daily: [
+      {
+        date: "2026-08-16",
+        kg: 40,
+        fee: 1400,
+        recordCount: 1,
+        paymentAmount: 0,
+        paymentCount: 0,
+      },
+      {
+        date: "2026-08-17",
+        kg: 60,
+        fee: 2100,
+        recordCount: 1,
+        paymentAmount: 5000,
+        paymentCount: 1,
+      },
+    ],
+  });
+  assert.equal(payload.stations[1].name, "零业务站");
+  assert.equal(payload.stations[1].kg, 0);
+  assert.deepEqual(payload.stations[0].dailyKg, [
+    { date: "2026-08-16", kg: 40 },
+    { date: "2026-08-17", kg: 60 },
+  ]);
+  assert.deepEqual(cacheCalls, [
+    {
+      key: "hydrogen/station-board?start=2026-08-16&end=2026-08-17",
+      force: true,
+    },
+  ]);
+  assert.equal(calls.length, 5);
+  assert.match(calls[0].sql, /FROM hydrogen_station s/);
+  assert.match(calls[1].sql, /FROM hydrogen_station_payment/);
+  assert.match(calls[2].sql, /SUM\(b\.amount_kg\)/);
+  assert.match(calls[3].sql, /GROUP BY b\.station_id/);
+  assert.match(calls[4].sql, /GROUP BY DATE_FORMAT\(payment_date/);
+});
+
+test("站日现结台账仅读取付款流水，并按最近有数据的 15 天聚合", async () => {
+  const calls: QueryCall[] = [];
+  const cacheCalls: CacheCall[] = [];
+  const app = new Hono();
+  registerHydrogenSettlementRoute(app, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [{ latestPaymentDate: "2026-05-26" }],
+          [
+            {
+              date: "2026-05-26",
+              stationId: 44,
+              stationName: "联新加氢站",
+              amount: 30000,
+              paymentCount: 1,
+              matchMode: "exact",
+            },
+            {
+              date: "2026-05-25",
+              stationId: null,
+              stationName: "佛山中石化",
+              amount: 20000,
+              paymentCount: 2,
+              matchMode: "group",
+            },
+          ],
+        ],
+        calls,
+      ),
+    },
+    cached: createCachedMock(cacheCalls),
+  } as unknown as HydrogenSettlementDependencies);
+
+  const response = await app.request(
+    "/hydrogen/settlement?range=latest&force=1",
+  );
+  assert.equal(response.status, 200);
+  assert.deepEqual(await response.json(), {
+    range: { start: "2026-05-12", end: "2026-05-26", mode: "latest" },
+    summary: {
+      amount: 50000,
+      paymentCount: 3,
+      stationDayCount: 2,
+      stationCount: 2,
+      latestPaymentDate: "2026-05-26",
+    },
+    rows: [
+      {
+        date: "2026-05-26",
+        stationId: 44,
+        stationName: "联新加氢站",
+        amount: 30000,
+        paymentCount: 1,
+        matchMode: "exact",
+      },
+      {
+        date: "2026-05-25",
+        stationId: null,
+        stationName: "佛山中石化",
+        amount: 20000,
+        paymentCount: 2,
+        matchMode: "group",
+      },
+    ],
+  });
+  assert.deepEqual(cacheCalls, [
+    { key: "hydrogen/settlement?start=2026-05-12&end=2026-05-26", force: true },
+  ]);
+  assert.equal(calls.length, 2);
+  assert.match(calls[0].sql, /MAX\(payment_date\)/);
+  assert.match(calls[1].sql, /FROM hydrogen_station_payment p/);
+  assert.match(calls[1].sql, /LIMIT 500/);
+  assert.deepEqual(calls[1].params, ["2026-05-12", "2026-05-26"]);
+});
+
+test("四个处理器继续使用原缓存语义、数据库、SQL 与参数", async () => {
  const hydrogenCalls: QueryCall[] = [];
  const electricCalls: QueryCall[] = [];
  const cacheCalls: CacheCall[] = [];
  const cached = createCachedMock(cacheCalls);
-  const hydrogenQuery = createQueryMock([
-    [{ y: 2025 }],
+  const hydrogenQuery = createQueryMock(
+    [
+      [{ y: 2025, latestLedgerTime: "2025-01-02 10:30:00" }],
      [{}],
      [],
      [],
      [],
      [],
-    [],
      [
-      { d: '2025-01-02', stationId: 7, stationName: '测试站', kg: 10, pricePerKg: 35 },
+        {
+          name: "混合承担客户",
+          payer: "mixed",
+          kg: 10,
+          cost: 350,
+          revenue: 360,
+        },
+      ],
+      [
+        {
+          d: "2025-01-02",
+          stationId: 7,
+          stationName: "测试站",
+          kg: 10,
+          fee: 350,
+          pricePerKg: 35,
+        },
+      ],
+    ],
+    hydrogenCalls,
+  );
+  const electricQuery = createQueryMock(
+    [
+      [
+        {
+          totalKwh: 20,
+          totalFee: 30,
+          monthKwh: 15,
+          monthFee: 25,
+          todayKwh: 10,
+          todayFee: 12,
+        },
      ],
-  ], hydrogenCalls);
-  const electricQuery = createQueryMock([
-    [{ totalKwh: 20, totalFee: 30, monthKwh: 15, monthFee: 25, todayKwh: 10, todayFee: 12 }],
      [],
-    [{ date: '2025-01-02', kwh: 10, fee: 12 }],
+      [{ date: "2025-01-02", kwh: 10, fee: 12 }],
      [{ kwh: 5 }],
-    [{ date: '2025-01-02', kwh: 10, fee: 12 }],
-  ], electricCalls);
+      [{ date: "2025-01-02", kwh: 10, fee: 12 }],
+    ],
+    electricCalls,
+  );

  const hydrogenOverviewApp = new Hono();
  registerHydrogenOverviewRoute(hydrogenOverviewApp, {
@@ -92,9 +717,21 @@ test('四个处理器继续使用原缓存语义、数据库、SQL 与参数', a
    cached,
  } as unknown as HydrogenOverviewDependencies);
  const overviewResponse = await hydrogenOverviewApp.request(
-    '/hydrogen/overview?year=2025&force=1',
+    "/hydrogen/overview?year=2025&force=1",
  );
  assert.equal(overviewResponse.status, 200);
+  const overviewPayload = (await overviewResponse.json()) as {
+    customers: { payer: string; name: string }[];
+  };
+  assert.deepEqual(overviewPayload.customers, [
+    {
+      name: "混合承担客户",
+      payer: "mixed",
+      kg: 10,
+      cost: 350,
+      revenue: 360,
+    },
+  ]);

  const hydrogenDailyApp = new Hono();
  registerHydrogenDailyRoute(hydrogenDailyApp, {
@@ -102,9 +739,36 @@ test('四个处理器继续使用原缓存语义、数据库、SQL 与参数', a
    cached,
  } as unknown as HydrogenDailyDependencies);
  const dailyResponse = await hydrogenDailyApp.request(
-    '/hydrogen/daily?startDate=2025-01-01&endDate=2025-01-02&customer=external&force=1',
+    "/hydrogen/daily?startDate=2025-01-01&endDate=2025-01-02&customer=external&force=1",
  );
  assert.equal(dailyResponse.status, 200);
+  assert.deepEqual(await dailyResponse.json(), [
+    {
+      date: "2025-01-02",
+      totalKg: 10,
+      totalFee: 350,
+      chainPct: 0,
+      customerType: "external",
+      stations: [
+        {
+          id: 7,
+          name: "测试站",
+          pricePerKg: 35,
+          kg: 10,
+          fee: 350,
+          chainPct: 0,
+        },
+      ],
+    },
+    {
+      date: "2025-01-01",
+      totalKg: 0,
+      totalFee: 0,
+      chainPct: 0,
+      customerType: "external",
+      stations: [],
+    },
+  ]);

  const electricApp = new Hono();
  const electricDependencies = {
@@ -113,55 +777,181 @@ test('四个处理器继续使用原缓存语义、数据库、SQL 与参数', a
  } as unknown as ElectricDependencies;
  registerElectricOverviewRoute(electricApp, electricDependencies);
  registerElectricMonthlyRoute(electricApp, electricDependencies);
-  const electricOverviewResponse = await electricApp.request('/electric/overview?force=1');
+  const electricOverviewResponse = await electricApp.request(
+    "/electric/overview?force=1",
+  );
  assert.equal(electricOverviewResponse.status, 200);
  const electricMonthlyResponse = await electricApp.request(
-    '/electric/monthly?startDate=2025-01-01&endDate=2025-01-02&customer=external&force=1',
+    "/electric/monthly?startDate=2025-01-01&endDate=2025-01-02&customer=external&force=1",
  );
  assert.equal(electricMonthlyResponse.status, 200);

  assert.deepEqual(cacheCalls, [
-    { key: 'hydrogen/overview?year=2025', force: true },
-    { key: 'hydrogen/daily?start=2025-01-01&end=2025-01-02&customer=external', force: true },
-    { key: 'electric/overview', force: true },
-    { key: 'electric/monthly?customer=external&start=2025-01-01&end=2025-01-02', force: true },
+    { key: "hydrogen/overview?year=2025", force: true },
+    {
+      key: "hydrogen/daily?start=2025-01-01&end=2025-01-02&customer=external",
+      force: true,
+    },
+    { key: "electric/overview", force: true },
+    {
+      key: "electric/monthly?customer=external&start=2025-01-01&end=2025-01-02",
+      force: true,
+    },
  ]);

  // 指纹来自拆分前的 13 条 SQL，连空白符变化也会使测试失败。
  assert.deepEqual(
-    [...hydrogenCalls, ...electricCalls].map(call => sqlHash(call.sql)),
+    [...hydrogenCalls, ...electricCalls].map((call) => sqlHash(call.sql)),
    [
-      '95f6d99b61c9',
-      '63a63c5f78bb',
-      '1367eddb3b7f',
-      '83a52a7f9336',
-      'f28fa4a3cb08',
-      'dac9e86fc527',
-      'a71da8f05765',
-      'b562668859ce',
-      '226fd8f950a1',
-      '6e4031b10926',
-      '4fc77463294c',
-      '1886d54939d8',
-      '09fc714ec4b2',
+      "515acf4dbb2a",
+      "de16af670e96",
+      "1367eddb3b7f",
+      "f125d4dde376",
+      "c547b8e1318e",
+      "0e3dfd8f4b81",
+      "f1f69f275993",
+      "688cfdb7a2bf",
+      "03fd669f8077",
+      "6e4031b10926",
+      "4fc77463294c",
+      "1886d54939d8",
+      "09fc714ec4b2",
    ],
  );

-  assert.deepEqual(hydrogenCalls.map(call => call.params), [
-    ['2024-01-01'],
-    [2025, 2025, 2025, 2025, 2025, 2025, 2025, 0, 0, 0, 0, 0, 0, 0, 0, '2024-01-01'],
-    ['2024-01-01', 2025],
-    ['2024-01-01', 2025],
-    ['2024-01-01', 2025],
-    ['2024-01-01', 2025],
-    ['2024-01-01', 2025],
-    ['2025-01-01', '2025-01-02'],
+  assert.deepEqual(
+    hydrogenCalls.map((call) => call.params),
+    [
+      ["2024-01-01"],
+      [
+        2025,
+        2025,
+        2025,
+        2025,
+        2025,
+        2025,
+        2025,
+        2025,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        "2024-01-01",
+      ],
+      ["2024-01-01", 2025],
+      ["2024-01-01", 2025],
+      ["2024-01-01", 2025],
+      ["2024-01-01", 2025],
+      ["2024-01-01", 2025],
+      ["2025-01-01", "2025-01-02"],
+    ],
+  );
+  assert.match(hydrogenCalls[7].sql, /b\.vehicle_id IS NULL/);
+  assert.deepEqual(
+    electricCalls.map((call) => call.params),
+    [undefined, undefined, undefined, undefined, ["2025-01-01", "2025-01-02"]],
+  );
+});
+
+test("氢能总览按车辆归属和单站筛选，并隔离缓存结果", async () => {
+  const calls: QueryCall[] = [];
+  const cacheCalls: CacheCall[] = [];
+  const app = new Hono();
+  registerHydrogenOverviewRoute(app, {
+    hydrogenPool: {
+      query: createQueryMock(
+        [
+          [{ y: 2026, latestLedgerTime: "2026-08-17 21:50:09" }],
+          [{ yearKg: 12, latestLedgerTime: "2026-08-17 21:50:09" }],
+          [],
+          [],
+          [],
+          [],
+          [],
+        ],
+        calls,
+      ),
+    },
+    cached: createCachedMock(cacheCalls),
+  } as unknown as HydrogenOverviewDependencies);
+
+  const response = await app.request(
+    "/hydrogen/overview?year=2026&stationId=7&vehicleScope=lingniu",
+  );
+  const payload = await response.json();
+
+  assert.equal(response.status, 200);
+  assert.equal(payload.latestLedgerTime, "2026-08-17 21:50:09");
+  assert.deepEqual(cacheCalls, [
+    {
+      key: "hydrogen/overview?year=2026&station=7&vehicle=lingniu",
+      force: false,
+    },
  ]);
-  assert.deepEqual(electricCalls.map(call => call.params), [
-    undefined,
-    undefined,
-    undefined,
-    undefined,
-    ['2025-01-01', '2025-01-02'],
-  ]);
+  assert.deepEqual(payload.filter, {
+    stationId: 7,
+    vehicleScope: "lingniu",
+    verifyScope: "all",
+  });
+  // 年份候选项是全局元数据；其余查询都必须带上单站筛选参数。
+  assert.ok(
+    calls
+      .slice(1)
+      .every(
+        (call) =>
+          Array.isArray(call.params) && (call.params as unknown[]).includes(7),
+      ),
+  );
+  assert.match(calls[1].sql, /station_id = \? AND vehicle_id IS NOT NULL/);
+  assert.match(
+    calls[2].sql,
+    /b\.station_id = \? AND b\.vehicle_id IS NOT NULL/,
+  );
+});
+
+test("ETC 总览对空台账返回明确空状态", async () => {
+  const calls: QueryCall[] = [];
+  const cacheCalls: CacheCall[] = [];
+  const app = new Hono();
+  registerEtcOverviewRoute(app, {
+    pool: {
+      query: createQueryMock(
+        [
+          [
+            {
+              tollRecordCount: 0,
+              vehicleCount: 0,
+              totalAmount: null,
+              latestTollTime: null,
+              billCount: 0,
+              receivableAmount: null,
+              paidAmount: null,
+            },
+          ],
+        ],
+        calls,
+      ),
+    },
+    cached: createCachedMock(cacheCalls),
+  } as unknown as EtcOverviewDependencies);
+
+  const response = await app.request("/etc/overview?force=1");
+  assert.equal(response.status, 200);
+  assert.deepEqual(await response.json(), {
+    tollRecordCount: 0,
+    vehicleCount: 0,
+    totalAmount: 0,
+    latestTollTime: null,
+    billCount: 0,
+    receivableAmount: 0,
+    paidAmount: 0,
+    hasData: false,
+  });
+  assert.deepEqual(cacheCalls, [{ key: "etc/overview", force: true }]);
+  assert.match(calls[0].sql, /FROM etc_toll_record/);
+  assert.match(calls[0].sql, /FROM energy_etc_bill/);
 });
@@ -16,5 +16,6 @@
      "@/*": ["./*"]
    }
  },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/modules/energy/hydrogen-bi-v2/prototype-source/**"]
 }