证据面板加载态立即显示 DEB + AI 预测中占位卡片

此前 AI 预测卡片需等流式 SSE 返回后才显示,loading 期间整个双卡片
区域消失。现在:DEB 卡片立即显示,AI 侧显示"预测中…"呼吸动画占位,
流式返回后自动替换为真实预测值。
This commit is contained in:
2569718930@qq.com
2026-05-06 16:08:09 +08:00
parent eb42d644a3
commit 13025f5c77
2 changed files with 40 additions and 0 deletions
@@ -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;
@@ -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" ? (