feat(energy): 外部车辆 tab 暂时显示「数据未就绪」占位

新系统的外部车辆数据尚未接通，按零填充会显示一长串 0，体验差。当 customer=external 且全期总量为 0 时： - 隐藏柱图与明细表 - 显示「外部车辆 · 数据未就绪」友好占位（Plug 图标 + 蓝色脉冲点 + 文案「新系统的外部车辆 X 数据还在准备中」）氢能/电能 daily 都加。一旦后端接通真实外部数据，totalKg/totalKwh > 0，占位自动消失，恢复正常表格视图。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-30 15:18:14 +08:00
parent f2acb73033
commit c3b463d9ca
2 changed files with 40 additions and 12 deletions
--- a/src/modules/energy/ElectricDaily.tsx
+++ b/src/modules/energy/ElectricDaily.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { ChevronRight } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { ChevronRight, Plug } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import TrendBadge from './TrendBadge';
 import { fetchElectricMonthly } from './api';
@@ -39,6 +39,9 @@ export default function ElectricDaily() {
    return next;
  });

+  const totalKwh = useMemo(() => (months ?? []).reduce((s, m) => s + (m.kwh || 0), 0), [months]);
+  const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;
+
  return (
    <div className="flex flex-col gap-3">
      {/* 日期速选 */}
@@ -73,7 +76,29 @@ export default function ElectricDaily() {
        ))}
      </div>

+      {/* 外部车辆 数据未就绪 */}
+      {showExternalEmpty && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
+        >
+          <div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
+            <Plug size={22} className="text-blue-500" />
+            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
+            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
+          </div>
+          <div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
+          <div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
+            新系统的外部车辆充电数据还在准备中
+            <br />
+            上线后此处将展示完整明细
+          </div>
+        </motion.div>
+      )}
+
      {/* 月份分组表 */}
+      {!showExternalEmpty && (
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
          <span>月份 / 日期</span>
@@ -139,6 +164,7 @@ export default function ElectricDaily() {
          );
        })}
      </div>
+      )}
      <RotatingFooterHint />
    </div>
  );
--- a/src/modules/energy/HydrogenDaily.tsx
+++ b/src/modules/energy/HydrogenDaily.tsx
@@ -73,27 +73,29 @@ export default function HydrogenDaily() {
        ))}
      </div>

-      {/* 外部数据对接中 友好空状态 */}
-      {customer === 'external' && rows !== null && rows.length === 0 && (
+      {/* 外部车辆：新系统数据还没准备好 */}
+      {customer === 'external' && rows !== null && totalKg === 0 && (
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
-          className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-12 flex flex-col items-center text-center"
+          className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
        >
          <div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
            <Plug size={22} className="text-blue-500" />
            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
          </div>
-          <div className="text-sm font-bold text-slate-700 mb-1">数据对接中…</div>
-          <div className="text-[11px] text-slate-400 max-w-[260px] leading-relaxed">
-            外部加氢账单正在与合作方系统打通，上线后此处将展示完整数据
+          <div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
+          <div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
+            新系统的外部车辆加氢数据还在准备中
+            <br />
+            上线后此处将展示完整明细
          </div>
        </motion.div>
      )}

-      {/* 时段加氢量柱图 */}
-      {trendData.length > 0 && (
+      {/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
+      {!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
        <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>
@@ -133,8 +135,8 @@ export default function HydrogenDaily() {
        </div>
      )}

-      {/* 表格（外部空数据时不渲染，由上方友好空状态替代） */}
-      {!(customer === 'external' && rows !== null && rows.length === 0) && (
+      {/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
+      {!(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">