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

@@ -0,0 +1,111 @@
+import { useMemo, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import TrendBadge from './TrendBadge';
+import { ELECTRIC_MONTHLY } from './mock';
+import type { CustomerType } from './types';
+
+export default function ElectricDaily() {
+  const [customer, setCustomer] = useState<CustomerType>('external');
+  const [openMonths, setOpenMonths] = useState<Set<string>>(new Set([ELECTRIC_MONTHLY[0]?.month]));
+
+  const months = useMemo(() => {
+    // mock 暂不区分客户类型，customer 切换不影响数据；保留 UI 切换以与 BI 一致
+    void customer;
+    return ELECTRIC_MONTHLY;
+  }, [customer]);
+
+  const toggleMonth = (m: string) => setOpenMonths(prev => {
+    const next = new Set(prev);
+    next.has(m) ? next.delete(m) : next.add(m);
+    return next;
+  });
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* 客户类型 */}
+      <div className="bg-slate-100 rounded-xl p-1 grid grid-cols-2 gap-1">
+        {(['external', 'lingniu'] as const).map(c => (
+          <button
+            key={c}
+            onClick={() => setCustomer(c)}
+            className={`rounded-lg py-1.5 text-[12px] font-bold transition-all ${
+              customer === c ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500'
+            }`}
+          >
+            {c === 'external' ? '外部' : '羚牛'}
+          </button>
+        ))}
+      </div>
+
+      {/* 月份分组表 */}
+      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
+        <div className="grid grid-cols-[1fr_auto_auto_auto] md:grid-cols-[1fr_120px_140px_120px] gap-2 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
+          <span>月份 / 日期</span>
+          <span className="hidden md:block text-right">充电电量</span>
+          <span className="text-right md:hidden">度</span>
+          <span className="text-right">充电费用(元)</span>
+          <span className="text-right">环比</span>
+        </div>
+        {months.map(m => {
+          const open = openMonths.has(m.month);
+          return (
+            <div key={m.month} className="border-t border-slate-100 first:border-t-0">
+              <button
+                onClick={() => toggleMonth(m.month)}
+                className={`w-full grid grid-cols-[1fr_auto_auto_auto] md:grid-cols-[1fr_120px_140px_120px] gap-2 px-3 py-2.5 text-left transition-colors ${
+                  open ? 'bg-blue-50/30' : 'hover:bg-slate-50'
+                }`}
+              >
+                <span className="flex items-center gap-1 text-[12px] text-slate-700 font-bold">
+                  <ChevronRight size={14} className={`transition-transform ${open ? 'rotate-90' : ''} text-slate-400`} />
+                  {m.month}
+                </span>
+                <span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
+                  {m.kwh.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
+                </span>
+                <span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
+                  {m.fee.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
+                </span>
+                <span />
+              </button>
+              <AnimatePresence initial={false}>
+                {open && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="overflow-hidden"
+                  >
+                    {m.rows.map(d => {
+                      const isAbnormal = Math.abs(d.chainPct) >= 0.3;
+                      const abnormalBg = isAbnormal
+                        ? d.chainPct > 0 ? 'bg-emerald-50/40' : 'bg-red-50/40'
+                        : 'bg-slate-50/50';
+                      return (
+                        <div
+                          key={d.date}
+                          className={`grid grid-cols-[1fr_auto_auto_auto] md:grid-cols-[1fr_120px_140px_120px] gap-2 px-3 py-2 pl-9 border-t border-slate-100 ${abnormalBg}`}
+                        >
+                          <span className="text-[12px] text-slate-600">{d.date.slice(5)}</span>
+                          <span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
+                            {d.kwh.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
+                          </span>
+                          <span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
+                            {d.fee.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
+                          </span>
+                          <span className="text-right"><TrendBadge value={d.chainPct} /></span>
+                        </div>
+                      );
+                    })}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}