From e6880cba17f483bcd16451853f296c47e2227b41 Mon Sep 17 00:00:00 2001 From: kkfluous Date: Tue, 28 Apr 2026 11:20:32 +0800 Subject: [PATCH] feat(energy): hydrogen overview KPI cards (4-card grid) Co-Authored-By: Claude Opus 4.7 (1M context) --- src/modules/energy/HydrogenDaily.tsx | 7 +++ src/modules/energy/HydrogenOverview.tsx | 75 +++++++++++++++++++++++++ src/modules/energy/HydrogenView.tsx | 37 +++++++++++- 3 files changed, 116 insertions(+), 3 deletions(-) create mode 100644 src/modules/energy/HydrogenDaily.tsx create mode 100644 src/modules/energy/HydrogenOverview.tsx 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)}
+
+
+
+
+
+ ); +} diff --git a/src/modules/energy/HydrogenView.tsx b/src/modules/energy/HydrogenView.tsx index 7397ce7..e7f52f8 100644 --- a/src/modules/energy/HydrogenView.tsx +++ b/src/modules/energy/HydrogenView.tsx @@ -1,7 +1,38 @@ +import { useState } from 'react'; +import { LayoutDashboard, CalendarDays } from 'lucide-react'; +import { motion } from 'motion/react'; +import HydrogenOverview from './HydrogenOverview'; +import HydrogenDaily from './HydrogenDaily'; + +type SubTab = 'overview' | 'daily'; + export default function HydrogenView() { + const [sub, setSub] = useState('overview'); return ( -
- 氢能视图占位 — 将在 Task 3-5 实现 -
+ <> +
+ + +
+ {sub === 'overview' ? : } + ); }