refactor: surface hydrogen source failures

src/modules/energy/HydrogenDaily.tsx

@@ -64,6 +64,7 @@ export default function HydrogenDaily() {
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   const [rows, setRows] = useState<HydrogenDailyRow[] | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [retryKey, setRetryKey] = useState(0);
 
   const effectiveRange = useMemo(() => normalizeRange(dateRange.start, dateRange.end), [dateRange.start, dateRange.end]);
   const selectedStationId = drillContext.level === 'station' ? drillContext.stationId : undefined;
@@ -90,7 +91,7 @@ export default function HydrogenDaily() {
       .then(r => { if (!cancelled) setRows(r); })
       .catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
     return () => { cancelled = true; };
-  }, [pick, customer, effectiveRange.start, effectiveRange.end, selectedStationId, selectedCustomerName]);
+  }, [pick, customer, effectiveRange.start, effectiveRange.end, selectedStationId, selectedCustomerName, retryKey]);
 
   // 柱图：按日期升序，用于"从左到右时间流"
   const trendData = useMemo(() => (rows ? [...rows].sort((a, b) => a.date.localeCompare(b.date)) : []), [rows]);
@@ -164,6 +165,12 @@ export default function HydrogenDaily() {
     }, 'replace');
   };
 
+  const retryLoad = () => {
+    setRows(null);
+    setError(null);
+    setRetryKey(key => key + 1);
+  };
+
   useEffect(() => {
     const handlePopState = () => {
       const next = parseHydrogenDrillContext(window.location.search);
@@ -186,6 +193,7 @@ export default function HydrogenDaily() {
             <button
               key={opt.id}
               onClick={() => applyQuickPick(opt.id)}
+              aria-pressed={pick === opt.id}
               className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
                 pick === opt.id
                   ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
@@ -197,6 +205,7 @@ export default function HydrogenDaily() {
           ))}
           <button
             onClick={() => setPick('custom')}
+            aria-pressed={pick === 'custom'}
             className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
               pick === 'custom'
                 ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
@@ -211,6 +220,8 @@ export default function HydrogenDaily() {
           <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
             <span className="block text-[10px] font-black text-slate-400">开始日期</span>
             <input
+              id="hydrogen-start-date"
+              name="hydrogenStartDate"
               type="date"
               value={dateRange.start}
               onChange={e => updateDateRange('start', e.target.value)}
@@ -221,6 +232,8 @@ export default function HydrogenDaily() {
           <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
             <span className="block text-[10px] font-black text-slate-400">结束日期</span>
             <input
+              id="hydrogen-end-date"
+              name="hydrogenEndDate"
               type="date"
               value={dateRange.end}
               onChange={e => updateDateRange('end', e.target.value)}
@@ -235,6 +248,7 @@ export default function HydrogenDaily() {
             <button
               key={c}
               onClick={() => updateCustomer(c)}
+              aria-pressed={customer === c}
               className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
                 customer === c ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
               }`}
@@ -284,15 +298,23 @@ export default function HydrogenDaily() {
         </section>
       )}
 
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+      {error && (
+        <ErrorState
+          title="氢能数据源暂不可用"
+          message={error}
+          onRetry={retryLoad}
+        />
+      )}
+
+      {!error && rows !== null && <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
         <MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper={rangeText} />
         <MetricTile icon={Truck} label="车辆归属" value={customer === 'external' ? '外部' : '羚牛'} helper="当前筛选口径" tone="emerald" />
         <MetricTile icon={TrendingUp} label="有效天数" value={`${activeDays}/${rows?.length ?? 0}`} helper={`日均 ${avgKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} tone="amber" />
         <MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper="按明细站点去重" tone="slate" />
-      </div>
+      </div>}
 
       {/* 外部车辆：新系统数据还没准备好 */}
-      {customer === 'external' && rows !== null && totalKg === 0 && (
+      {!error && customer === 'external' && rows !== null && totalKg === 0 && (
         <motion.div
           initial={{ opacity: 0, y: 8 }}
           animate={{ opacity: 1, y: 0 }}
@@ -313,7 +335,7 @@ export default function HydrogenDaily() {
       )}
 
       {/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
-      {!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
+      {!error && !(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
         <SurfaceCard>
           <div className="flex items-center justify-between px-4 pt-4 mb-2">
             <span className="text-sm font-bold text-slate-700">每日加氢量</span>
@@ -390,7 +412,7 @@ export default function HydrogenDaily() {
       )}
 
       {/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
-      {!(customer === 'external' && rows !== null && totalKg === 0) && (
+      {!error && !(customer === 'external' && rows !== null && totalKg === 0) && (
       <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
         {/* 表头 */}
         <div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
@@ -407,9 +429,7 @@ export default function HydrogenDaily() {
           <span />
         </div>
         {/* 主行 + 子行 */}
-        {error ? (
-          <div className="p-3"><ErrorState message={error} /></div>
-        ) : rows === null ? (
+        {rows === null ? (
           <div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
         ) : rows.length === 0 ? (
           <div className="p-3"><EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" /></div>
@@ -476,7 +496,7 @@ export default function HydrogenDaily() {
         })}
       </div>
       )}
-      <RotatingFooterHint />
+      {!error && <RotatingFooterHint />}
     </div>
   );
 }

src/modules/energy/HydrogenOverview.tsx

@@ -7,6 +7,7 @@ import { motion, AnimatePresence } from 'motion/react';
 import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
 import { buildHydrogenDrillUrl } from './hydrogen-drill-context';
+import { ErrorState } from '../../components/ui/surface';
 
 const REGION_COLORS = [
   '#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
@@ -120,7 +121,14 @@ export default function HydrogenOverview() {
   }, [year, load]);
 
   if (error && !data) {
-    return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
+    return (
+      <ErrorState
+        title="氢能数据源暂不可用"
+        message={error}
+        onRetry={() => void load(year, true)}
+        retrying={refreshing}
+      />
+    );
   }
   if (!data) {
     return <HydrogenOverviewSkeleton />;