diff --git a/src/modules/energy/HydrogenDaily.tsx b/src/modules/energy/HydrogenDaily.tsx
new file mode 100644
index 0000000..5dca2d9
--- /dev/null
+++ b/src/modules/energy/HydrogenDaily.tsx
@@ -0,0 +1,7 @@
+export default function HydrogenDaily() {
+ return (
+
+ 每日氢能视图占位 — 将在 Task 5 实现
+
+ );
+}
diff --git a/src/modules/energy/HydrogenOverview.tsx b/src/modules/energy/HydrogenOverview.tsx
new file mode 100644
index 0000000..f0fc22c
--- /dev/null
+++ b/src/modules/energy/HydrogenOverview.tsx
@@ -0,0 +1,75 @@
+import { Fuel, Wallet, Coins, CalendarClock } from 'lucide-react';
+import { HYDROGEN_KPI } from './mock';
+
+function fmtKg(kg: number) {
+ if (kg >= 1000) return `${(kg / 1000).toFixed(2)}T`;
+ return `${kg.toFixed(2)}Kg`;
+}
+function fmtYuanWan(yuan: number) {
+ return `¥${(yuan / 10_000).toFixed(2)}万`;
+}
+function fmtYuan(yuan: number) {
+ return `¥${yuan.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`;
+}
+
+export default function HydrogenOverview() {
+ const k = HYDROGEN_KPI;
+ return (
+
+
+ 数据自 2025-01-01 起，每 5 分钟更新
+
+
+ {/* 卡 1：年加氢量 */}
+
+
+ 年加氢量
+
+
{fmtKg(k.yearKg)}
+
+
我方 {fmtKg(k.ourYearKg)}
+
客户产生 {fmtKg(k.customerYearKg)}
+
+
+ {/* 卡 2：年加氢费 */}
+
+
+ 年加氢费
+
+
{fmtYuanWan(k.yearFee)}
+
+
我方 {fmtYuanWan(k.ourYearFee)}
+
+
+ {/* 卡 3：累计羚牛承担 */}
+
+
+ 累计羚牛承担
+
+
{fmtYuanWan(k.lingniuBornFee)}
+
+
量 {fmtKg(k.lingniuBornKg)}
+
+
+ {/* 卡 4：本月 / 今日 */}
+
+
+ 本月 / 今日
+
+
+
+
本月
+
{fmtKg(k.monthKg)}
+
{fmtYuanWan(k.monthFee)}
+
+
+
今日
+
{fmtKg(k.todayKg)}
+
{fmtYuan(k.todayFee)}
+
+
+
+
+
- 氢能视图占位 — 将在 Task 3-5 实现
-
+ <>
+
+
+
+
+ {sub === 'overview' ? : }
+
);
}