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/ElectricOverview.tsx

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import { Wallet, BatteryCharging, CalendarClock } from 'lucide-react';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip } from 'recharts';
+import TrendBadge from './TrendBadge';
+import { ELECTRIC_KPI, ELECTRIC_MONTHLY } from './mock';
+
+function fmtYuan(yuan: number) {
+  return `¥${yuan.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`;
+}
+function fmtKwh(kwh: number) {
+  return `${kwh.toLocaleString('zh-CN', { maximumFractionDigits: 2 })} 度`;
+}
+
+export default function ElectricOverview() {
+  const k = ELECTRIC_KPI;
+
+  // 本月每日数据（按日期升序，便于柱图按时间从左到右展示）
+  const trendData = useMemo(() => {
+    const first = ELECTRIC_MONTHLY[0];
+    if (!first) return [];
+    return [...first.rows].sort((a, b) => a.date.localeCompare(b.date));
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* 横向 mini KPI 头 */}
+      <div className="grid grid-cols-3 gap-2 md:gap-3">
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
+          <div className="flex items-center gap-1 text-[11px] text-slate-500 font-bold mb-1">
+            <Wallet size={11} className="text-blue-600" />累计
+          </div>
+          <div className="text-base md:text-2xl font-bold text-slate-800">{fmtYuan(k.totalFee)}</div>
+          <div className="text-[11px] text-slate-500 font-bold mt-0.5">{fmtKwh(k.totalKwh)}</div>
+        </div>
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
+          <div className="flex items-center gap-1 text-[11px] text-slate-500 font-bold mb-1">
+            <CalendarClock size={11} className="text-blue-600" />本月
+          </div>
+          <div className="text-base md:text-2xl font-bold text-slate-800">{fmtYuan(k.monthFee)}</div>
+          <div className="text-[11px] text-slate-500 font-bold mt-0.5">{fmtKwh(k.monthKwh)}</div>
+        </div>
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 relative">
+          <div className="flex items-center gap-1 text-[11px] text-slate-500 font-bold mb-1">
+            <BatteryCharging size={11} className="text-blue-600" />今日
+          </div>
+          <div className="text-base md:text-2xl font-bold text-slate-800">{fmtYuan(k.todayFee)}</div>
+          <div className="text-[11px] text-slate-500 font-bold mt-0.5 whitespace-nowrap">{fmtKwh(k.todayKwh)}</div>
+          <TrendBadge value={k.todayChainPct} className="absolute top-2 right-2 md:top-3 md:right-3" />
+        </div>
+      </div>
+
+      {/* 本月每日充电柱图 */}
+      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm 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">单位 元</span>
+        </div>
+        <ResponsiveContainer width="100%" height={160}>
+          <BarChart data={trendData} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
+            <XAxis
+              dataKey="date"
+              tickFormatter={(v: string) => v.slice(5)}
+              tick={{ fontSize: 10, fill: '#94a3b8' }}
+              tickLine={false}
+              axisLine={false}
+              interval="preserveStartEnd"
+              minTickGap={8}
+            />
+            <YAxis hide />
+            <Tooltip
+              formatter={(v) => [`¥${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`, '充电费用']}
+              labelFormatter={(d) => `日期 ${d}`}
+              contentStyle={{ borderRadius: 12, fontSize: 12 }}
+              cursor={{ fill: 'rgba(59, 130, 246, 0.06)' }}
+            />
+            <Bar dataKey="fee" radius={[4, 4, 0, 0]}>
+              {trendData.map((_, i) => (
+                <Cell key={i} fill="url(#electricBarGrad)" />
+              ))}
+            </Bar>
+            <defs>
+              <linearGradient id="electricBarGrad" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="0%" stopColor="#3b82f6" />
+                <stop offset="100%" stopColor="#22d3ee" />
+              </linearGradient>
+            </defs>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}