feat: polish BI dashboards and bump version

src/modules/energy/ElectricDaily.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ChevronRight, Plug } from 'lucide-react';
+import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import TrendBadge from './TrendBadge';
 import { fetchElectricMonthly } from './api';
 import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
+import { EmptyState, ErrorState, LoadingState, MetricTile } from '../../components/ui/surface';
 
 const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
   { id: 'thisWeek',  label: '本周'    },
@@ -40,10 +41,30 @@ export default function ElectricDaily() {
   });
 
   const totalKwh = useMemo(() => (months ?? []).reduce((s, m) => s + (m.kwh || 0), 0), [months]);
+  const totalFee = useMemo(() => (months ?? []).reduce((s, m) => s + (m.fee || 0), 0), [months]);
+  const activeDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => r.kwh > 0).length, 0), [months]);
+  const abnormalDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => Math.abs(r.chainPct) >= 0.3).length, 0), [months]);
+  const avgKwh = activeDays > 0 ? totalKwh / activeDays : 0;
+  const avgPrice = totalKwh > 0 ? totalFee / totalKwh : 0;
+  const scopeLabel = QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const hasFeeDetail = totalFee > 0;
   const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;
 
   return (
     <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <MetricTile icon={BatteryCharging} label={`${scopeLabel}充电量`} value={totalKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper="按日期汇总" />
+        <MetricTile
+          icon={Wallet}
+          label="充电费用"
+          value={hasFeeDetail ? `¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '待同步'}
+          helper={hasFeeDetail ? `均价 ${avgPrice.toFixed(2)} 元/度` : '当前明细仅返回充电量'}
+          tone={hasFeeDetail ? 'emerald' : 'slate'}
+        />
+        <MetricTile icon={CalendarDays} label="有效天数" value={`${activeDays}`} unit="天" helper={`日均 ${avgKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度`} tone="amber" />
+        <MetricTile icon={TrendingUp} label="波动提醒" value={abnormalDays} unit="天" helper="环比超过 30% 标记" tone={abnormalDays > 0 ? 'rose' : 'slate'} />
+      </div>
+
       {/* 日期速选 */}
       <div className="flex items-center gap-2 overflow-x-auto -mx-1 px-1 pb-1 snap-x">
         {QUICK_PICK_OPTIONS.map(opt => (
@@ -106,11 +127,11 @@ export default function ElectricDaily() {
           <span className="text-right">环比</span>
         </div>
         {error ? (
-          <div className="px-3 py-10 text-center text-red-500 text-[12px] font-bold">加载失败：{error}</div>
+          <div className="p-3"><ErrorState message={error} /></div>
         ) : months === null ? (
-          <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">加载中…</div>
+          <div className="p-3"><LoadingState label="正在加载充电明细" /></div>
         ) : months.length === 0 ? (
-          <div className="px-3 py-10 text-center text-slate-400 text-[12px] font-bold">暂无数据</div>
+          <div className="p-3"><EmptyState title="暂无充电数据" description="请切换时间范围或车辆归属" /></div>
         ) : months.map(m => {
           const open = openMonths.has(m.month);
           return (