feat: implement Leaflet map hook and AI-assisted city card forecast view for dashboard

This commit is contained in:
2569718930@qq.com
2026-04-26 10:13:44 +08:00
parent d54050ceb0
commit 1ee8408b1f
5 changed files with 226 additions and 288 deletions
@@ -86,7 +86,7 @@
--border-subtle: rgba(226, 232, 240, 0.74);
--text-primary: #0F172A;
--text-secondary: #475569;
--text-muted: #94A3B8;
--text-muted: #64748B;
background: #F7F9FC;
color: #0F172A;
background-image:
@@ -13826,7 +13826,60 @@
}
.root :global(.scan-terminal.light .scan-map-shell) {
background: rgba(255, 255, 255, 0.72);
background:
radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.12), transparent 34%),
linear-gradient(180deg, #f8fbff, #eaf3ff);
border-color: rgba(37, 99, 235, 0.16);
box-shadow: 0 16px 34px rgba(40, 70, 110, 0.12);
}
.root :global(.scan-terminal.light .scan-map-shell .map),
.root :global(.scan-terminal.light .scan-map-shell .leaflet-container) {
background: #eaf3ff !important;
}
.root :global(.scan-terminal.light .scan-map-shell .leaflet-tile) {
filter: saturate(1.06) contrast(0.98) brightness(1.04) !important;
}
.root :global(.scan-terminal.light .scan-map-caption) {
color: #475569;
}
.root :global(.scan-terminal.light .scan-list-tabs button),
.root :global(.scan-terminal.light .scan-mode-tab-sub),
.root :global(.scan-terminal.light .scan-opportunity-models em),
.root :global(.scan-terminal.light .scan-opportunity-stat small),
.root :global(.scan-terminal.light .panel-meta-chip),
.root :global(.scan-terminal.light .panel-weather-chip),
.root :global(.scan-terminal.light .scan-distribution-card),
.root :global(.scan-terminal.light .scan-chart-legend),
.root :global(.scan-terminal.light .scan-kpi-note),
.root :global(.scan-terminal.light .scan-calendar-subtitle),
.root :global(.scan-terminal.light .scan-calendar-action span),
.root :global(.scan-terminal.light .scan-calendar-countdown small),
.root :global(.scan-terminal.light .scan-opportunity-ai small),
.root :global(.scan-terminal.light .scan-ai-log-head span),
.root :global(.scan-terminal.light .scan-ai-log-time),
.root :global(.scan-terminal.light .scan-ai-log-empty),
.root :global(.scan-terminal.light .scan-ai-log-item small),
.root :global(.scan-terminal.light .scan-ai-summary-card p),
.root :global(.scan-terminal.light .scan-ai-city-head p),
.root :global(.scan-terminal.light .scan-ai-contract p),
.root :global(.scan-terminal.light .scan-ai-contract small),
.root :global(.scan-terminal.light .scan-v4-analysis p),
.root :global(.scan-terminal.light .scan-v4-analysis ul),
.root :global(.scan-terminal.light .scan-v4-evidence > div > span),
.root :global(.scan-terminal.light .scan-v4-model-sources em),
.root :global(.scan-terminal.light .scan-ai-raw-metar),
.root :global(.scan-terminal.light .scan-opportunity-hero p),
.root :global(.scan-terminal.light .scan-opportunity-summary span),
.root :global(.scan-terminal.light .scan-opportunity-lane-head p),
.root :global(.scan-terminal.light .scan-opportunity-decision-card p),
.root :global(.scan-terminal.light .scan-opportunity-decision-head span),
.root :global(.scan-terminal.light .scan-opportunity-decision-primary span),
.root :global(.scan-terminal.light .scan-opportunity-decision-foot small) {
color: #475569;
}
@media (max-width: 1480px) {
@@ -23,6 +23,62 @@ function toFiniteDecisionNumber(value: unknown) {
return Number.isFinite(numeric) ? numeric : null;
}
function parseEpochMs(value: unknown) {
if (value == null || value === "") return null;
const numeric = Number(value);
if (Number.isFinite(numeric)) return numeric > 1_000_000_000_000 ? numeric : numeric * 1000;
const parsed = new Date(String(value));
return Number.isNaN(parsed.getTime()) ? null : parsed.getTime();
}
function formatMetarReportTime(detail: CityDetail | null, report: string, isEn: boolean) {
const offsetSeconds = Number(detail?.utc_offset_seconds);
const epochMs =
parseEpochMs(detail?.airport_current?.report_time) ??
parseEpochMs(detail?.airport_current?.obs_time_epoch) ??
parseEpochMs(detail?.airport_current?.obs_time) ??
parseEpochMs(detail?.current?.report_time) ??
parseEpochMs(detail?.current?.obs_time_epoch) ??
parseEpochMs(detail?.current?.obs_time);
if (epochMs != null) {
const utc = new Date(epochMs);
const zText = `${String(utc.getUTCHours()).padStart(2, "0")}:${String(
utc.getUTCMinutes(),
).padStart(2, "0")}Z`;
if (Number.isFinite(offsetSeconds)) {
const local = new Date(epochMs + offsetSeconds * 1000);
const localText = `${String(local.getUTCHours()).padStart(2, "0")}:${String(
local.getUTCMinutes(),
).padStart(2, "0")}`;
return isEn ? `${zText} / local ${localText}` : `${zText} / 当地 ${localText}`;
}
return zText;
}
const rawToken = String(report || "").match(/\b(\d{2})(\d{2})(\d{2})Z\b/i);
if (!rawToken) return "";
const zText = `${rawToken[2]}:${rawToken[3]}Z`;
if (!Number.isFinite(offsetSeconds)) return zText;
const utcMinutes = Number(rawToken[2]) * 60 + Number(rawToken[3]);
if (!Number.isFinite(utcMinutes)) return zText;
const localMinutes = Math.round(
((utcMinutes + offsetSeconds / 60) % 1440 + 1440) % 1440,
);
const localText = `${String(Math.floor(localMinutes / 60)).padStart(2, "0")}:${String(
localMinutes % 60,
).padStart(2, "0")}`;
return isEn ? `${zText} / local ${localText}` : `${zText} / 当地 ${localText}`;
}
function normalizeMetarReadTime(text: string, displayTime: string, isEn: boolean) {
if (!text || !displayTime) return text;
const timeLabel = isEn ? `report time ${displayTime}` : `报文时间 ${displayTime}`;
return text
.replace(/报文时间\s*\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z/gi, timeLabel)
.replace(/report time\s*\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z/gi, timeLabel)
.replace(/\bat\s+\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z/gi, `at ${displayTime}`);
}
function AiPinnedCityCard({
item,
detail,
@@ -82,6 +138,7 @@ function AiPinnedCityCard({
? "Waiting for intraday observations to compare against the DEB path."
: "等待更多日内实测,用来对照 DEB 预测路径。");
const report = detail?.current?.raw_metar || detail?.airport_current?.raw_metar || "";
const metarReportTimeDisplay = formatMetarReportTime(detail, report, isEn);
const airportStation =
detail?.risk?.icao ||
detail?.current?.station_code ||
@@ -104,16 +161,31 @@ function AiPinnedCityCard({
});
const aiCityForecast = aiForecast.payload?.city_forecast || null;
const localizedFinalJudgment =
const localizedFinalJudgmentRaw =
(isEn ? aiCityForecast?.final_judgment_en : aiCityForecast?.final_judgment_zh) ||
(isEn ? aiCityForecast?.reasoning_en : aiCityForecast?.reasoning_zh) ||
"";
const localizedMetarRead =
const localizedMetarReadRaw =
(isEn ? aiCityForecast?.metar_read_en : aiCityForecast?.metar_read_zh) ||
"";
const localizedReasoning =
const localizedReasoningRaw =
(isEn ? aiCityForecast?.reasoning_en : aiCityForecast?.reasoning_zh) ||
"";
const localizedFinalJudgment = normalizeMetarReadTime(
localizedFinalJudgmentRaw,
metarReportTimeDisplay,
isEn,
);
const localizedMetarRead = normalizeMetarReadTime(
localizedMetarReadRaw,
metarReportTimeDisplay,
isEn,
);
const localizedReasoning = normalizeMetarReadTime(
localizedReasoningRaw,
metarReportTimeDisplay,
isEn,
);
const localizedModelNote =
(isEn
? aiCityForecast?.model_cluster_note_en
@@ -349,13 +421,11 @@ function AiPinnedCityCard({
? "Deepseek V4 pro is reading the latest airport bulletin..."
: "Deepseek V4 pro 正在解读最新机场报文...")}
</p>
{aiForecast.streamText ? (
<p className="scan-ai-city-muted">
{isEn
? "Streaming airport read; final forecast is still being completed..."
: "机场报文解读正在流式输出,最终预报结论仍在补全..."}
</p>
) : null}
<p className="scan-ai-city-muted">
{isEn
? "Non-streaming mode is enabled to avoid truncated airport reads."
: "已停用流式输出,改用非流式 JSON 请求,避免报文解读被截断。"}
</p>
</>
) : aiForecast.status === "ready" && aiCityForecast ? (
<>
@@ -96,6 +96,16 @@ function getBucketAnchor(bucket: MarketTopBucket) {
return toFiniteMarketNumber(bucket.temp ?? bucket.value ?? bucket.lower);
}
function getRoundedWeatherBucketValue(
expectedHigh: number | null,
tempSymbol: string,
bucket: MarketTopBucket,
) {
const comparable = normalizeMarketComparableTemp(expectedHigh, tempSymbol, bucket);
if (comparable == null || !Number.isFinite(comparable)) return null;
return Math.round(comparable);
}
function getBucketModelProbability(bucket?: MarketTopBucket | null) {
const model = normalizeMarketProbability(bucket?.model_probability);
const probability = normalizeMarketProbability(bucket?.probability);
@@ -164,24 +174,33 @@ export function pickMarketBucketForWeatherCenter(
return isReasonableFallback(selectedBucket) ? selectedBucket : null;
}
let roundedMatch: MarketTopBucket | null = null;
let nearest: MarketTopBucket | null = null;
let nearestDelta = Number.POSITIVE_INFINITY;
for (const bucket of buckets) {
const comparable = normalizeMarketComparableTemp(expectedHigh, tempSymbol, bucket);
if (comparable == null) continue;
const roundedTarget = getRoundedWeatherBucketValue(expectedHigh, tempSymbol, bucket);
const lower = bucket.lower != null ? Number(bucket.lower) : null;
const upper = bucket.upper != null ? Number(bucket.upper) : null;
const anchor = getBucketAnchor(bucket);
if (anchor != null && roundedTarget != null && Math.round(anchor) === roundedTarget) {
roundedMatch = bucket;
break;
}
if (
roundedMatch == null &&
lower != null &&
upper != null &&
Number.isFinite(lower) &&
Number.isFinite(upper) &&
comparable >= lower - 0.01 &&
comparable <= upper + 0.01
roundedTarget != null &&
roundedTarget >= lower - 0.01 &&
roundedTarget <= upper + 0.01
) {
return bucket;
roundedMatch = bucket;
break;
}
const anchor = getBucketAnchor(bucket);
if (anchor == null) continue;
const delta = Math.abs(anchor - comparable);
if (delta < nearestDelta) {
@@ -189,6 +208,7 @@ export function pickMarketBucketForWeatherCenter(
nearestDelta = delta;
}
}
if (roundedMatch) return roundedMatch;
if (!nearest) return isReasonableFallback(selectedBucket) ? selectedBucket : null;
const comparable = normalizeMarketComparableTemp(expectedHigh, tempSymbol, nearest);
const unit = String(nearest.unit || "").toUpperCase();
@@ -1,11 +1,6 @@
"use client";
import { useCallback, useEffect, useMemo, useState } from "react";
import {
enqueueAiCityFetch,
extractStreamingAirportRead,
parseSseBlock,
} from "@/components/dashboard/scan-terminal/ai-city-stream";
import type {
AiCityForecastPayload,
AiCityForecastState,
@@ -14,9 +9,9 @@ import { useDashboardStore } from "@/hooks/useDashboardStore";
import type { CityDetail, MarketScan } from "@/lib/dashboard-types";
import { normalizeCityKey } from "./decision-utils";
const AI_CITY_FORECAST_CACHE_PREFIX = "polyWeather_aiCityForecast_v1";
const AI_CITY_FORECAST_CACHE_PREFIX = "polyWeather_aiCityForecast_v2";
const AI_CITY_FORECAST_CACHE_TTL_MS = 60 * 60 * 1000;
const CITY_MARKET_SCAN_CACHE_PREFIX = "polyWeather_cityMarketScan_v1";
const CITY_MARKET_SCAN_CACHE_PREFIX = "polyWeather_cityMarketScan_v2";
const CITY_MARKET_SCAN_CACHE_TTL_MS = 10 * 60 * 1000;
function getStorage() {
@@ -62,56 +57,6 @@ function writeCachedPayload<T>(key: string, payload: T) {
}
}
function buildPartialAiStreamPayload({
fallbackText,
isEn,
tempSymbol,
}: {
fallbackText?: string | null;
isEn: boolean;
tempSymbol?: string | null;
}): AiCityForecastPayload {
const preservedText =
String(fallbackText || "").trim() ||
(isEn
? "The AI airport read stream was interrupted after partial output."
: "AI 机场报文解读已输出部分内容,但最终载荷未返回。");
const retryHint = isEn
? "The streaming connection ended before the final structured payload. The partial airport read above is preserved; refresh once if you need the full JSON-backed conclusion."
: "流式连接在最终结构化载荷返回前结束。上方已保留已输出的机场报文解读;如需完整 JSON 结论可刷新一次。";
return {
city_forecast: {
confidence: "low",
final_judgment_en: isEn
? preservedText
: "Partial AI airport read was preserved after the stream ended early.",
final_judgment_zh: isEn
? "AI 机场报文解读已保留部分输出,但流式连接提前结束。"
: preservedText,
metar_read_en: isEn ? preservedText : "",
metar_read_zh: isEn ? "" : preservedText,
model_cluster_note_en: "",
model_cluster_note_zh: "",
predicted_max: null,
range_high: null,
range_low: null,
reasoning_en: retryHint,
reasoning_zh: retryHint,
risks_en: isEn ? [retryHint] : [],
risks_zh: isEn ? [] : [retryHint],
unit: tempSymbol || "°C",
},
raw_reason: "partial_ai_stream_without_final_payload",
reason: retryHint,
reason_en: isEn
? retryHint
: "AI stream ended before the final payload; partial text was preserved.",
reason_zh: isEn ? "AI 流在最终载荷前结束;已保留部分文本。" : retryHint,
status: "partial_stream",
};
}
export function useAiCityForecast({
detail,
detailCityName,
@@ -138,8 +83,6 @@ export function useAiCityForecast({
: "",
[detail, detailCityName, locale, report],
);
const aiTempSymbol = detail?.temp_symbol || "°C";
useEffect(() => {
if (!enabled || !aiForecastKey) {
setAiForecast({ status: "idle" });
@@ -162,199 +105,55 @@ export function useAiCityForecast({
controller.abort();
};
}
setAiForecast({ status: "loading", streamText: null, streamRaw: "" });
enqueueAiCityFetch(
() =>
fetch("/api/scan/terminal/ai-city/stream", {
method: "POST",
headers: {
Accept: "text/event-stream",
"Content-Type": "application/json",
},
cache: "no-store",
signal: controller.signal,
body: JSON.stringify({
city: detailCityName,
force_refresh: aiRefreshToken > 0,
locale,
}),
}).then(async (response) => {
if (!response.ok) {
let detailMessage = "";
try {
const errorPayload = await response.json();
const message = String(errorPayload?.error || "").trim();
const rawDetail = String(errorPayload?.detail || "").trim();
const elapsed = Number(errorPayload?.elapsed_ms);
const timeout = Number(errorPayload?.timeout_ms);
detailMessage = [
message,
rawDetail,
Number.isFinite(elapsed) && Number.isFinite(timeout)
? `elapsed ${Math.round(elapsed / 1000)}s / timeout ${Math.round(timeout / 1000)}s`
: "",
]
.filter(Boolean)
.join(" · ");
} catch {
detailMessage = "";
}
throw new Error(
detailMessage
? `HTTP ${response.status} · ${detailMessage}`
: `HTTP ${response.status}`,
);
}
const contentType = response.headers.get("content-type") || "";
if (!response.body || !contentType.includes("text/event-stream")) {
return response.json() as Promise<AiCityForecastPayload>;
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
let rawStream = "";
let finalPayload: AiCityForecastPayload | null = null;
let latestReadableText = "";
const rememberReadableText = (value?: string | null) => {
const text = String(value || "").trim();
if (text) {
latestReadableText = text;
}
};
const handleBlock = (block: string) => {
const message = parseSseBlock(block);
if (!message || !message.data || typeof message.data !== "object") {
return;
}
const data = message.data as Record<string, unknown>;
if (message.event === "progress") {
const progressText =
String(
locale === "en-US" ? data.message_en || "" : data.message_zh || "",
).trim() || String(data.message || "").trim();
if (progressText && !cancelled) {
rememberReadableText(progressText);
setAiForecast((current) =>
current.status === "loading"
? { ...current, streamText: current.streamText || progressText }
: current,
);
}
} else if (message.event === "preview") {
const previewText =
String(
locale === "en-US"
? data.metar_read_en || ""
: data.metar_read_zh || "",
).trim() ||
String(data.metar_read_zh || data.metar_read_en || "").trim() ||
String(
locale === "en-US"
? data.final_judgment_en || ""
: data.final_judgment_zh || "",
).trim() ||
String(data.final_judgment_zh || data.final_judgment_en || "").trim();
if (previewText && !cancelled) {
rememberReadableText(previewText);
setAiForecast((current) =>
current.status === "loading"
? {
...current,
streamText: previewText,
}
: current,
);
}
} else if (message.event === "delta") {
const content = String(data.content || "");
if (!content) return;
rawStream += content;
const airportRead = extractStreamingAirportRead(rawStream, locale);
const streamingText =
airportRead ||
(rawStream.trim()
? isEn
? "AI has started streaming; parsing the METAR read field…"
: "AI 已开始流式输出,正在解析机场报文字段…"
: "");
rememberReadableText(airportRead || streamingText);
if (!cancelled) {
setAiForecast((current) =>
current.status === "loading"
? {
...current,
streamRaw: rawStream,
streamText: streamingText || current.streamText || null,
}
: current,
);
}
} else if (message.event === "final") {
finalPayload = data as AiCityForecastPayload;
}
};
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const blocks = buffer.split(/\n\n|\r\n\r\n/);
buffer = blocks.pop() || "";
for (const block of blocks) {
handleBlock(block);
}
}
buffer += decoder.decode();
if (buffer.trim()) {
handleBlock(buffer);
}
if (!finalPayload) {
const fallbackText =
extractStreamingAirportRead(rawStream, locale) ||
latestReadableText;
const partialPayload = buildPartialAiStreamPayload({
fallbackText,
isEn,
tempSymbol: aiTempSymbol,
});
writeCachedPayload(cacheKey, partialPayload);
return partialPayload;
}
return finalPayload;
}),
controller.signal,
{
onQueued: () => {
if (cancelled) return;
setAiForecast((current) =>
current.status === "loading"
? {
...current,
streamText: isEn
? "Waiting for the AI airport read queue..."
: "正在等待 AI 机场报文解读队列...",
}
: current,
);
},
onStart: () => {
if (cancelled) return;
setAiForecast((current) =>
current.status === "loading"
? {
...current,
streamText: current.streamRaw
? current.streamText
: isEn
? "Connecting to DeepSeek V4-Pro for airport bulletin streaming..."
: "正在连接 DeepSeek V4-Pro,准备流式解读机场报文...",
}
: current,
);
},
setAiForecast({
status: "loading",
streamText: isEn
? "DeepSeek V4-Pro is reading the latest airport bulletin..."
: "DeepSeek V4-Pro 正在解读最新机场报文...",
});
fetch("/api/scan/terminal/ai-city", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
)
cache: "no-store",
signal: controller.signal,
body: JSON.stringify({
city: detailCityName,
force_refresh: aiRefreshToken > 0,
locale,
}),
})
.then(async (response) => {
if (!response.ok) {
let detailMessage = "";
try {
const errorPayload = await response.json();
const message = String(errorPayload?.error || "").trim();
const rawDetail = String(errorPayload?.detail || "").trim();
const elapsed = Number(errorPayload?.elapsed_ms);
const timeout = Number(errorPayload?.timeout_ms);
detailMessage = [
message,
rawDetail,
Number.isFinite(elapsed) && Number.isFinite(timeout)
? `elapsed ${Math.round(elapsed / 1000)}s / timeout ${Math.round(timeout / 1000)}s`
: "",
]
.filter(Boolean)
.join(" · ");
} catch {
detailMessage = "";
}
throw new Error(
detailMessage
? `HTTP ${response.status} · ${detailMessage}`
: `HTTP ${response.status}`,
);
}
return response.json() as Promise<AiCityForecastPayload>;
})
.then((payload) => {
if (!cancelled) {
writeCachedPayload(cacheKey, payload);
@@ -364,22 +163,6 @@ export function useAiCityForecast({
.catch((error) => {
if (controller.signal.aborted) return;
if (!cancelled) {
const message = String(error);
if (message.includes("AI stream ended before final payload")) {
setAiForecast((current) => {
const partialPayload = buildPartialAiStreamPayload({
fallbackText: current.streamText,
isEn,
tempSymbol: aiTempSymbol,
});
writeCachedPayload(cacheKey, partialPayload);
return {
payload: partialPayload,
status: "ready",
};
});
return;
}
setAiForecast({ error: String(error), status: "failed" });
}
});
@@ -387,7 +170,7 @@ export function useAiCityForecast({
cancelled = true;
controller.abort();
};
}, [aiForecastKey, aiRefreshToken, aiTempSymbol, detailCityName, enabled, isEn, locale]);
}, [aiForecastKey, aiRefreshToken, detailCityName, enabled, isEn, locale]);
const refreshAiForecast = useCallback(() => {
setAiRefreshToken((current) => current + 1);
+16 -4
View File
@@ -58,10 +58,15 @@ function getMarkerDisplayOffset(cityName: string) {
}
function getMapTileUrl() {
if (
typeof document !== "undefined" &&
document.documentElement.classList.contains("light")
) {
if (typeof document === "undefined") {
return MAP_TILE_URLS.dark;
}
const lightMode =
document.documentElement.classList.contains("light") ||
document.body.classList.contains("light") ||
Boolean(document.querySelector(".scan-terminal.light"));
if (lightMode) {
return MAP_TILE_URLS.light;
}
return MAP_TILE_URLS.dark;
@@ -603,6 +608,13 @@ export function useLeafletMap({
attributeFilter: ["class"],
attributes: true,
});
if (document.body) {
observer.observe(document.body, {
attributeFilter: ["class"],
attributes: true,
subtree: true,
});
}
return () => observer.disconnect();
}, []);