refactor(energy): split electric view into 总览/每日 sub-tabs

- Symmetry with hydrogen — both sides now have a 每日/总览 sub-tab pair
- New ElectricOverview (KPI + bar chart) and ElectricDaily (table)
- Sub-tab styling: pill fill (active = blue-50/blue-600) instead of the
  underline-style used by parent — clearer visual hierarchy
- Tab order swapped to 每日 → 总览 with 每日 as default (daily ops focus)
- Today KPI: pill moves to absolute top-right corner so today's kwh
  reading regains full row width (was getting truncated to "510...")

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

src/modules/energy/HydrogenView.tsx

@@ -1,36 +1,35 @@
 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';
+type SubTab = 'daily' | 'overview';
+
+const SUB_TABS: Array<{ id: SubTab; label: string; icon: typeof LayoutDashboard }> = [
+  { id: 'daily',    label: '每日', icon: CalendarDays },
+  { id: 'overview', label: '总览', icon: LayoutDashboard },
+];
 
 export default function HydrogenView() {
-  const [sub, setSub] = useState<SubTab>('overview');
+  const [sub, setSub] = useState<SubTab>('daily');
   return (
     <>
-      <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 className="bg-white rounded-2xl border border-slate-100 shadow-sm p-1 sticky top-[58px] z-20 flex gap-1">
+        {SUB_TABS.map(({ id, label, icon: Icon }) => {
+          const active = sub === id;
+          return (
+            <button
+              key={id}
+              onClick={() => setSub(id)}
+              className={`flex-1 flex items-center justify-center gap-1.5 rounded-xl py-1.5 text-[12px] font-bold transition-all ${
+                active ? 'bg-blue-50 text-blue-600' : 'text-slate-400 hover:bg-slate-50'
+              }`}
+            >
+              <Icon size={14} />
+              <span>{label}</span>
+            </button>
+          );
+        })}
       </div>
       {sub === 'overview' ? <HydrogenOverview /> : <HydrogenDaily />}
     </>