feat(energy): hydrogen overview KPI cards (4-card grid)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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<SubTab>('overview');
   return (
-    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6 text-center text-slate-400 text-sm">
-      氢能视图占位 — 将在 Task 3-5 实现
-    </div>
+    <>
+      <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-[58px] z-20">
+        <button
+          onClick={() => setSub('overview')}
+          className={`flex items-center gap-2 py-1 transition-all relative ${sub === 'overview' ? 'text-blue-600' : 'text-slate-400'}`}
+        >
+          <LayoutDashboard size={14} />
+          <span className="text-[11px] font-bold">总览</span>
+          {sub === 'overview' && (
+            <motion.div layoutId="activeHydrogenSub" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
+          )}
+        </button>
+        <button
+          onClick={() => setSub('daily')}
+          className={`flex items-center gap-2 py-1 transition-all relative ${sub === 'daily' ? 'text-blue-600' : 'text-slate-400'}`}
+        >
+          <CalendarDays size={14} />
+          <span className="text-[11px] font-bold">每日</span>
+          {sub === 'daily' && (
+            <motion.div layoutId="activeHydrogenSub" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
+          )}
+        </button>
+      </div>
+      {sub === 'overview' ? <HydrogenOverview /> : <HydrogenDaily />}
+    </>
   );
 }