From 13025f5c772fb84fb8374434bcba53938be33438 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Wed, 6 May 2026 16:08:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=81=E6=8D=AE=E9=9D=A2=E6=9D=BF=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=80=81=E7=AB=8B=E5=8D=B3=E6=98=BE=E7=A4=BA=20DEB=20?=
 =?UTF-8?q?+=20AI=20=E9=A2=84=E6=B5=8B=E4=B8=AD=E5=8D=A0=E4=BD=8D=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

此前 AI 预测卡片需等流式 SSE 返回后才显示，loading 期间整个双卡片
区域消失。现在：DEB 卡片立即显示，AI 侧显示"预测中…"呼吸动画占位，
流式返回后自动替换为真实预测值。
---
 .../dashboard/ScanTerminalCard.module.css     | 15 +++++++++++
 .../scan-terminal/AiEvidencePanel.tsx         | 25 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/frontend/components/dashboard/ScanTerminalCard.module.css b/frontend/components/dashboard/ScanTerminalCard.module.css
index 51c40274..1e85bf3b 100644
--- a/frontend/components/dashboard/ScanTerminalCard.module.css
+++ b/frontend/components/dashboard/ScanTerminalCard.module.css
@@ -1000,6 +1000,21 @@
   color: #7d92b2;
 }
 
+.root :global(.scan-ai-prediction-card.ai.pending) {
+  border-color: rgba(34, 211, 238, 0.14);
+  background: rgba(8, 36, 52, 0.28);
+}
+
+.root :global(.scan-ai-prediction-card.ai.pending strong) {
+  color: #4a7d9a;
+  animation: pulse-pending 2s ease-in-out infinite;
+}
+
+@keyframes pulse-pending {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.6; }
+}
+
 .root :global(.scan-ai-weather-summary) {
   color: #e6edf3;
   font-weight: 850;
diff --git a/frontend/components/dashboard/scan-terminal/AiEvidencePanel.tsx b/frontend/components/dashboard/scan-terminal/AiEvidencePanel.tsx
index f06331d0..905f3428 100644
--- a/frontend/components/dashboard/scan-terminal/AiEvidencePanel.tsx
+++ b/frontend/components/dashboard/scan-terminal/AiEvidencePanel.tsx
@@ -99,6 +99,14 @@ export function AiEvidencePanel({
                   </span>
                   {aiRangeText ? <em>{aiRangeText}</em> : null}
                 </div>
+              ) : aiForecast.status === "loading" && hasDebPrediction ? (
+                <div className="scan-ai-prediction-card ai pending">
+                  <small>{isEn ? "AI predicted high" : "AI 预测最高温"}</small>
+                  <strong>{isEn ? "..." : "…"}</strong>
+                  <span className="scan-ai-confidence low">
+                    {isEn ? "Predicting" : "预测中"}
+                  </span>
+                </div>
               ) : null}
               {hasDebPrediction ? (
                 <div className="scan-ai-prediction-card deb">
@@ -110,6 +118,23 @@ export function AiEvidencePanel({
                 </div>
               ) : null}
             </div>
+          ) : hasDebPrediction ? (
+            <div className="scan-ai-prediction-dual">
+              <div className="scan-ai-prediction-card deb">
+                <small>{isEn ? "DEB fusion" : "DEB 融合"}</small>
+                <strong>{formatTemperatureValue(debPrediction!, tempSymbol, { digits: 1 })}</strong>
+                <span className="scan-ai-confidence neutral">
+                  {isEn ? "Reference" : "参考"}
+                </span>
+              </div>
+              <div className="scan-ai-prediction-card ai pending">
+                <small>{isEn ? "AI predicted high" : "AI 预测最高温"}</small>
+                <strong>{isEn ? "..." : "…"}</strong>
+                <span className="scan-ai-confidence low">
+                  {isEn ? "Predicting" : "预测中"}
+                </span>
+              </div>
+            </div>
           ) : null}
 
           {aiForecast.status === "loading" ? (