refactor: unify embedded BI states

src/modules/energy/ETCDetails.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
-import { ChevronLeft, ChevronRight, Loader2, ReceiptText, Route, Search } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ReceiptText, Route, Search } from 'lucide-react';
 import Blur from '../../components/Blur';
+import { ErrorState, LoadingState } from '../../components/ui/surface';
 import { fetchEtcBills, fetchEtcRecords } from './api';
 import type { EtcBillResponse, EtcTollRecordResponse } from './types';
 import type { EtcDetailView, EtcDrillContext } from './etc-drill-context';
@@ -165,11 +166,9 @@ export default function ETCDetails({
       ) : null}
 
       {error ? (
-        <div className="m-4 rounded-lg border border-rose-100 bg-rose-50 p-3 text-xs font-bold text-rose-700">{error}</div>
+        <ErrorState message={error} variant="inline" />
       ) : loading && !activeData ? (
-        <div className="flex items-center justify-center gap-2 py-14 text-xs font-bold text-slate-400">
-          <Loader2 size={16} className="animate-spin" />正在加载 ETC 明细
-        </div>
+        <LoadingState label="正在加载 ETC 明细" variant="inline" />
       ) : view === 'records' && records ? (
         records.items.length === 0 ? (
           <div className="py-14 text-center">

src/modules/energy/ElectricDaily.tsx

@@ -311,11 +311,11 @@ export default function ElectricDaily() {
           <span className="text-right">环比</span>
         </div>
         {error ? (
-          <div className="p-3"><ErrorState message={error} /></div>
+          <ErrorState message={error} variant="inline" />
         ) : months === null ? (
-          <div className="p-3"><LoadingState label="正在加载充电明细" /></div>
+          <LoadingState label="正在加载充电明细" variant="inline" />
         ) : months.length === 0 ? (
-          <div className="p-3"><EmptyState title="暂无充电数据" description="请切换时间范围或车辆归属" /></div>
+          <EmptyState title="暂无充电数据" description="请切换时间范围或车辆归属" variant="inline" />
         ) : months.map(m => {
           const open = openMonths.has(m.month);
           return (
@@ -369,11 +369,11 @@ export default function ElectricDaily() {
                           {selectedDate === d.date && (
                             <div className="border-t border-blue-100 bg-blue-50/40 px-3 py-3 md:pl-9">
                               {ordersError ? (
-                                <ErrorState message={ordersError} />
+                                <ErrorState message={ordersError} variant="inline" />
                               ) : !orders || orders.date !== d.date ? (
-                                <LoadingState label="正在加载充电订单" />
+                                <LoadingState label="正在加载充电订单" variant="inline" />
                               ) : orders.items.length === 0 ? (
-                                <EmptyState title="当日无充电订单" description="当前车辆归属下没有订单明细" />
+                                <EmptyState title="当日无充电订单" description="当前车辆归属下没有订单明细" variant="inline" />
                               ) : (
                                 <div className="overflow-hidden rounded-lg border border-blue-100 bg-white">
                                   <div className="flex flex-wrap items-center justify-between gap-2 border-b border-blue-100 bg-blue-50 px-3 py-2 text-[10px] font-bold text-blue-700">

src/modules/energy/HydrogenDaily.tsx

@@ -472,9 +472,9 @@ export default function HydrogenDaily() {
         </div>
         {/* 主行 + 子行 */}
         {rows === null ? (
-          <div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
+          <LoadingState label="正在加载加氢明细" variant="inline" />
         ) : rows.length === 0 ? (
-          <div className="p-3"><EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" /></div>
+          <EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" variant="inline" />
         ) : rows.map(r => {
           const open = expanded.has(r.date);
           const isAbnormal = Math.abs(r.chainPct) >= 0.3;

src/modules/energy/HydrogenOrders.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
-import { ChevronLeft, ChevronRight, Loader2, ReceiptText, RefreshCw, X } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ReceiptText, X } from 'lucide-react';
 import Blur from '../../components/Blur';
+import { EmptyState, ErrorState, LoadingState } from '../../components/ui/surface';
 import { fetchHydrogenOrders } from './api';
 import type { CustomerType, HydrogenOrderResponse } from './types';
 
@@ -81,23 +82,16 @@ export default function HydrogenOrders({
       ) : null}
 
       {error ? (
-        <div className="flex flex-col items-center px-4 py-8 text-center">
-          <div className="text-xs font-black text-rose-700">订单数据暂不可用</div>
-          <div className="mt-1 text-[10px] font-bold text-rose-500">{error}</div>
-          <button
-            type="button"
-            onClick={() => setRetryKey(key => key + 1)}
-            className="mt-3 inline-flex h-8 items-center gap-1.5 rounded-lg border border-rose-100 bg-rose-50 px-3 text-[10px] font-black text-rose-700"
-          >
-            <RefreshCw size={12} />重试
-          </button>
-        </div>
+        <ErrorState
+          title="订单数据暂不可用"
+          message={error}
+          onRetry={() => setRetryKey(key => key + 1)}
+          variant="inline"
+        />
       ) : loading && !data ? (
-        <div className="flex items-center justify-center gap-2 py-10 text-xs font-bold text-slate-400">
-          <Loader2 size={15} className="animate-spin" />正在加载加氢订单
-        </div>
+        <LoadingState label="正在加载加氢订单" variant="inline" />
       ) : data?.items.length === 0 ? (
-        <div className="py-10 text-center text-xs font-bold text-slate-400">当前筛选下无加氢订单</div>
+        <EmptyState title="当前筛选下无加氢订单" description="请切换日期、车辆归属或实体范围" variant="inline" />
       ) : data ? (
         <>
           <div className="hidden overflow-x-auto md:block">