清理旧 Dashboard 全栈死代码：useDashboardStore、dashboardClient、22个关联组件
删除 6650+ 行死代码：useDashboardStore.tsx(1666)、dashboardClient.ts(576)、CitySidebar/DetailPanel/PanelSections/ProbabilityDistribution 及关联 CSS、9个 opportunity-* 模块、ModelEvidencePanel/AiPinnedCityCard/MobileDecisionCard/AiPinnedForecastView/useAiPinnedCityWorkspace。scan-root-styles 清理 6 个无用 CSS 导入。
This commit is contained in:
2569718930@qq.com
@@ -1,378 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { startTransition, useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { Clock, Search } from "lucide-react";
|
|
||||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
|
||||||
import { useI18n } from "@/hooks/useI18n";
|
|
||||||
import { getLocalizedCityName } from "@/lib/dashboard-home-copy";
|
|
||||||
import { CityListItem, DeviationMonitor } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
type RiskGroupKey = "high" | "medium" | "low" | "other";
|
|
||||||
|
|
||||||
const GROUP_STATE_STORAGE_KEY = "polyWeather_sidebar_groups_v1";
|
|
||||||
const DEFAULT_EXPANDED_GROUPS: Record<RiskGroupKey, boolean> = {
|
|
||||||
high: true,
|
|
||||||
medium: true,
|
|
||||||
low: false,
|
|
||||||
other: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
function toRiskGroup(level?: string): RiskGroupKey {
|
|
||||||
if (level === "high" || level === "medium" || level === "low") return level;
|
|
||||||
return "other";
|
|
||||||
}
|
|
||||||
|
|
||||||
function toPerformanceGroup(city: CityListItem): RiskGroupKey {
|
|
||||||
return toRiskGroup(city.deb_recent_tier);
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeExpandedGroups(
|
|
||||||
value: unknown,
|
|
||||||
): Record<RiskGroupKey, boolean> {
|
|
||||||
if (!value || typeof value !== "object") {
|
|
||||||
return DEFAULT_EXPANDED_GROUPS;
|
|
||||||
}
|
|
||||||
const candidate = value as Partial<Record<RiskGroupKey, unknown>>;
|
|
||||||
return {
|
|
||||||
high:
|
|
||||||
typeof candidate.high === "boolean"
|
|
||||||
? candidate.high
|
|
||||||
: DEFAULT_EXPANDED_GROUPS.high,
|
|
||||||
medium:
|
|
||||||
typeof candidate.medium === "boolean"
|
|
||||||
? candidate.medium
|
|
||||||
: DEFAULT_EXPANDED_GROUPS.medium,
|
|
||||||
low:
|
|
||||||
typeof candidate.low === "boolean"
|
|
||||||
? candidate.low
|
|
||||||
: DEFAULT_EXPANDED_GROUPS.low,
|
|
||||||
other:
|
|
||||||
typeof candidate.other === "boolean"
|
|
||||||
? candidate.other
|
|
||||||
: DEFAULT_EXPANDED_GROUPS.other,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CitySidebar() {
|
|
||||||
const store = useDashboardStore();
|
|
||||||
const { locale, t } = useI18n();
|
|
||||||
const selectedCity = store.selectedCity;
|
|
||||||
const riskOrder = { high: 0, medium: 1, low: 2, other: 3 };
|
|
||||||
const [expandedGroups, setExpandedGroups] = useState<
|
|
||||||
Record<RiskGroupKey, boolean>
|
|
||||||
>(DEFAULT_EXPANDED_GROUPS);
|
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
|
||||||
const cityItemRefs = useRef<Record<string, HTMLButtonElement | null>>({});
|
|
||||||
const normalizedQuery = searchQuery.trim().toLowerCase();
|
|
||||||
|
|
||||||
const sortedCities = useMemo(
|
|
||||||
() =>
|
|
||||||
[...store.cities].sort((a, b) => {
|
|
||||||
const aGroup = toPerformanceGroup(a);
|
|
||||||
const bGroup = toPerformanceGroup(b);
|
|
||||||
const aHitRate = Number(a.deb_recent_hit_rate ?? -1);
|
|
||||||
const bHitRate = Number(b.deb_recent_hit_rate ?? -1);
|
|
||||||
const aSamples = Number(a.deb_recent_sample_count ?? 0);
|
|
||||||
const bSamples = Number(b.deb_recent_sample_count ?? 0);
|
|
||||||
return (
|
|
||||||
(riskOrder[aGroup] ?? 3) - (riskOrder[bGroup] ?? 3) ||
|
|
||||||
bHitRate - aHitRate ||
|
|
||||||
bSamples - aSamples ||
|
|
||||||
a.display_name.localeCompare(b.display_name)
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
[store.cities],
|
|
||||||
);
|
|
||||||
|
|
||||||
const groupedCities = useMemo(() => {
|
|
||||||
const groups: Record<RiskGroupKey, CityListItem[]> = {
|
|
||||||
high: [],
|
|
||||||
medium: [],
|
|
||||||
low: [],
|
|
||||||
other: [],
|
|
||||||
};
|
|
||||||
sortedCities.forEach((city) => {
|
|
||||||
const summary = store.citySummariesByName[city.name];
|
|
||||||
const detail = store.cityDetailsByName[city.name];
|
|
||||||
const localizedName = getLocalizedCityName(
|
|
||||||
city.name,
|
|
||||||
summary?.display_name || detail?.display_name || city.display_name,
|
|
||||||
locale,
|
|
||||||
);
|
|
||||||
if (normalizedQuery) {
|
|
||||||
const searchCorpus = [
|
|
||||||
city.name,
|
|
||||||
city.display_name,
|
|
||||||
city.airport,
|
|
||||||
city.icao,
|
|
||||||
localizedName,
|
|
||||||
]
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(" ")
|
|
||||||
.toLowerCase();
|
|
||||||
if (!searchCorpus.includes(normalizedQuery)) return;
|
|
||||||
}
|
|
||||||
groups[toPerformanceGroup(city)].push(city);
|
|
||||||
});
|
|
||||||
return groups;
|
|
||||||
}, [
|
|
||||||
locale,
|
|
||||||
normalizedQuery,
|
|
||||||
sortedCities,
|
|
||||||
store.cityDetailsByName,
|
|
||||||
store.citySummariesByName,
|
|
||||||
]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedCity) return;
|
|
||||||
const selected = store.cities.find((city) => city.name === selectedCity);
|
|
||||||
if (!selected) return;
|
|
||||||
const groupKey = toPerformanceGroup(selected);
|
|
||||||
setExpandedGroups((current) =>
|
|
||||||
current[groupKey] ? current : { ...current, [groupKey]: true },
|
|
||||||
);
|
|
||||||
}, [selectedCity, store.cities]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!selectedCity) return;
|
|
||||||
const selected = store.cities.find((city) => city.name === selectedCity);
|
|
||||||
if (!selected) return;
|
|
||||||
const groupKey = toPerformanceGroup(selected);
|
|
||||||
if (!expandedGroups[groupKey]) return;
|
|
||||||
|
|
||||||
const frameId = window.requestAnimationFrame(() => {
|
|
||||||
cityItemRefs.current[selectedCity]?.scrollIntoView({
|
|
||||||
block: "center",
|
|
||||||
inline: "nearest",
|
|
||||||
behavior: "smooth",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return () => window.cancelAnimationFrame(frameId);
|
|
||||||
}, [expandedGroups, selectedCity, store.cities]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof window === "undefined") return;
|
|
||||||
const raw = window.localStorage.getItem(GROUP_STATE_STORAGE_KEY);
|
|
||||||
if (!raw) return;
|
|
||||||
try {
|
|
||||||
const parsed = JSON.parse(raw);
|
|
||||||
setExpandedGroups(normalizeExpandedGroups(parsed));
|
|
||||||
} catch {}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof window === "undefined") return;
|
|
||||||
try {
|
|
||||||
window.localStorage.setItem(
|
|
||||||
GROUP_STATE_STORAGE_KEY,
|
|
||||||
JSON.stringify(expandedGroups),
|
|
||||||
);
|
|
||||||
} catch {}
|
|
||||||
}, [expandedGroups]);
|
|
||||||
|
|
||||||
const formatDeviationText = (monitor?: DeviationMonitor | null) => {
|
|
||||||
if (!monitor?.available) return "";
|
|
||||||
const label = locale === "en-US" ? monitor.label_en : monitor.label_zh;
|
|
||||||
const trendLabel =
|
|
||||||
locale === "en-US" ? monitor.trend_label_en : monitor.trend_label_zh;
|
|
||||||
if (!label) return "";
|
|
||||||
return trendLabel ? `${label} · ${trendLabel}` : label;
|
|
||||||
};
|
|
||||||
|
|
||||||
const groupMeta: Array<{ key: RiskGroupKey; label: string }> = [
|
|
||||||
{ key: "high", label: t("sidebar.group.high") },
|
|
||||||
{ key: "medium", label: t("sidebar.group.medium") },
|
|
||||||
{ key: "low", label: t("sidebar.group.low") },
|
|
||||||
{ key: "other", label: t("sidebar.group.other") },
|
|
||||||
];
|
|
||||||
const syncTime = useMemo(
|
|
||||||
() =>
|
|
||||||
new Intl.DateTimeFormat(locale === "en-US" ? "en-US" : "zh-CN", {
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
second: "2-digit",
|
|
||||||
hour12: false,
|
|
||||||
}).format(new Date()),
|
|
||||||
[locale],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav className="city-list">
|
|
||||||
<div className="city-list-header">
|
|
||||||
<span>{t("sidebar.title")}</span>
|
|
||||||
<span className="city-count">{store.cities.length}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="city-search">
|
|
||||||
<Search size={14} strokeWidth={2} aria-hidden="true" />
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(event) => setSearchQuery(event.target.value)}
|
|
||||||
placeholder={locale === "en-US" ? "Search city" : "搜索城市"}
|
|
||||||
aria-label={locale === "en-US" ? "Search city" : "搜索城市"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="city-list-items">
|
|
||||||
{groupMeta.map((group) => {
|
|
||||||
const citiesInGroup = groupedCities[group.key];
|
|
||||||
if (!citiesInGroup.length) return null;
|
|
||||||
const expanded = expandedGroups[group.key];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
key={group.key}
|
|
||||||
className={clsx("city-group", !expanded && "collapsed")}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="city-group-header"
|
|
||||||
aria-expanded={expanded}
|
|
||||||
onClick={() =>
|
|
||||||
setExpandedGroups((current) => ({
|
|
||||||
...current,
|
|
||||||
[group.key]: !current[group.key],
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span className="city-group-title">
|
|
||||||
<span
|
|
||||||
className={clsx("city-group-indicator", group.key)}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
{group.label}
|
|
||||||
</span>
|
|
||||||
<span className="city-group-meta">
|
|
||||||
<span className="city-group-count">
|
|
||||||
{citiesInGroup.length}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={clsx("city-group-arrow", expanded && "expanded")}
|
|
||||||
>
|
|
||||||
▾
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="city-group-items">
|
|
||||||
{citiesInGroup.map((city) => {
|
|
||||||
const detail = store.cityDetailsByName[city.name];
|
|
||||||
const summary = store.citySummariesByName[city.name];
|
|
||||||
const snapshot = detail || summary;
|
|
||||||
const localizedCityName = getLocalizedCityName(
|
|
||||||
city.name,
|
|
||||||
snapshot?.display_name || city.display_name,
|
|
||||||
locale,
|
|
||||||
);
|
|
||||||
const isActive = store.selectedCity === city.name;
|
|
||||||
const tempSymbol = snapshot?.temp_symbol || "°C";
|
|
||||||
const currentTempText =
|
|
||||||
snapshot?.current?.temp != null
|
|
||||||
? t("sidebar.currentTemp", {
|
|
||||||
temp: `${snapshot.current.temp}${tempSymbol}`,
|
|
||||||
})
|
|
||||||
: t("common.na");
|
|
||||||
const deviationText = formatDeviationText(
|
|
||||||
snapshot?.deviation_monitor,
|
|
||||||
);
|
|
||||||
const peakTempText =
|
|
||||||
detail?.current?.max_so_far != null &&
|
|
||||||
detail.current.max_temp_time
|
|
||||||
? t("sidebar.peakTempAt", {
|
|
||||||
temp: `${detail.current.max_so_far}${tempSymbol}`,
|
|
||||||
time: detail.current.max_temp_time,
|
|
||||||
})
|
|
||||||
: detail?.current?.max_temp_time
|
|
||||||
? t("sidebar.peakAt", {
|
|
||||||
time: detail.current.max_temp_time,
|
|
||||||
})
|
|
||||||
: "";
|
|
||||||
const deviationDirection =
|
|
||||||
snapshot?.deviation_monitor?.direction || "normal";
|
|
||||||
const deviationSeverity =
|
|
||||||
snapshot?.deviation_monitor?.severity || "normal";
|
|
||||||
const secondaryText = deviationText || peakTempText;
|
|
||||||
const performanceTier = toPerformanceGroup(city);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={city.name}
|
|
||||||
ref={(node) => {
|
|
||||||
cityItemRefs.current[city.name] = node;
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
className={clsx("city-item", isActive && "active")}
|
|
||||||
onClick={() =>
|
|
||||||
startTransition(() => {
|
|
||||||
void store.focusCity(city.name);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="city-item-main">
|
|
||||||
<span className={clsx("risk-dot", performanceTier)} />
|
|
||||||
<span className="city-name-text">
|
|
||||||
{localizedCityName}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={clsx(
|
|
||||||
"city-temp",
|
|
||||||
snapshot?.current?.temp != null && "loaded",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{currentTempText}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="city-item-info">
|
|
||||||
<span className="city-local-time">
|
|
||||||
{snapshot?.local_time ? (
|
|
||||||
<>
|
|
||||||
<Clock
|
|
||||||
size={10}
|
|
||||||
strokeWidth={2}
|
|
||||||
className="city-clock-icon"
|
|
||||||
/>
|
|
||||||
{snapshot.local_time}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={clsx(
|
|
||||||
"city-max-info",
|
|
||||||
deviationText && "city-deviation-info",
|
|
||||||
deviationText &&
|
|
||||||
`city-deviation-${deviationDirection}`,
|
|
||||||
deviationText &&
|
|
||||||
deviationSeverity === "strong" &&
|
|
||||||
"strong",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{secondaryText}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="sidebar-footer">
|
|
||||||
<div>
|
|
||||||
{locale === "en-US" ? "Data sync" : "数据更新"} {syncTime}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "Sources: METAR · Open-Meteo · DEB · Market"
|
|
||||||
: "数据来源：METAR · Open-Meteo · DEB · 市场"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,299 +0,0 @@
|
|||||||
.root :global(.scan-select) {
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: linear-gradient(135deg, var(--color-accent-primary), #00b383);
|
|
||||||
color: #000;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 224, 164, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.scan-cta-button:hover:not(:disabled)) {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 6px 20px rgba(0, 224, 164, 0.4);
|
|
||||||
filter: brightness(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.scan-cta-button:active:not(:disabled)) {
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-overlay) {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(2, 6, 23, 0.75);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
z-index: 10000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-content) {
|
|
||||||
background: #16213A;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 16px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 700px;
|
|
||||||
max-height: calc(100vh - 48px);
|
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-header) {
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.root :global(.modal-header h2) {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.root :global(.future-modal-title-with-actions) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.future-refresh-btn) {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-muted);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.future-refresh-btn:hover) {
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
background: rgba(34, 211, 238, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.future-refresh-btn.spinning svg) {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-close) {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
.root :global(.modal-close:hover) {
|
|
||||||
color: var(--accent-red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-body) {
|
|
||||||
padding: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keep scroll behavior but hide visual scrollbar in today's/future analysis modal */
|
|
||||||
.root :global(.modal-content.large.future-modal .modal-body) {
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root
|
|
||||||
:global(.modal-content.large.future-modal .modal-body::-webkit-scrollbar) {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.root :global(.modal-content) {
|
|
||||||
border-radius: 14px;
|
|
||||||
max-height: calc(100vh - 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-header) {
|
|
||||||
padding: 14px 14px 12px;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-header h2) {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-body) {
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Info Button ── */
|
|
||||||
.root :global(.account-btn) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(34, 211, 238, 0.34);
|
|
||||||
background: rgba(34, 211, 238, 0.08);
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
.root :global(.account-btn:hover) {
|
|
||||||
background: rgba(34, 211, 238, 0.16);
|
|
||||||
border-color: rgba(34, 211, 238, 0.62);
|
|
||||||
color: #f8fbff;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.account-renew-badge) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(245, 158, 11, 0.34);
|
|
||||||
background: rgba(245, 158, 11, 0.1);
|
|
||||||
color: #fbbf24;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.account-renew-badge:hover) {
|
|
||||||
background: rgba(245, 158, 11, 0.18);
|
|
||||||
border-color: rgba(245, 158, 11, 0.6);
|
|
||||||
color: #fff6d5;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.account-renew-badge.expired) {
|
|
||||||
border-color: rgba(239, 68, 68, 0.34);
|
|
||||||
background: rgba(239, 68, 68, 0.12);
|
|
||||||
color: #fca5a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.trial-promo-badge) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(34, 211, 238, 0.28);
|
|
||||||
background: rgba(34, 211, 238, 0.1);
|
|
||||||
color: #a5f3fc;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.trial-promo-badge:hover) {
|
|
||||||
background: rgba(34, 211, 238, 0.16);
|
|
||||||
border-color: rgba(34, 211, 238, 0.45);
|
|
||||||
color: #ecfeff;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.info-btn) {
|
|
||||||
background: rgba(99, 102, 241, 0.1);
|
|
||||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
||||||
color: var(--accent-blue);
|
|
||||||
padding: 6px 14px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--transition);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.root :global(.info-btn:hover) {
|
|
||||||
background: rgba(99, 102, 241, 0.2);
|
|
||||||
border-color: var(--accent-blue);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.info-btn.active) {
|
|
||||||
background: rgba(34, 211, 238, 0.14);
|
|
||||||
border-color: rgba(34, 211, 238, 0.42);
|
|
||||||
color: #e0fbff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Guide Modal Customizations ── */
|
|
||||||
.root :global(.modal-content.large) {
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.root :global(.guide-grid) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.guide-card) {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
.root :global(.guide-card:hover) {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-color: var(--border-glass);
|
|
||||||
}
|
|
||||||
.root :global(.guide-card h3) {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.root :global(.guide-card p) {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.root :global(.guide-card b) {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.guide-footer) {
|
|
||||||
margin-top: 24px;
|
|
||||||
padding-top: 16px;
|
|
||||||
border-top: 1px solid var(--border-subtle);
|
|
||||||
text-align: center;
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
@@ -1,821 +0,0 @@
|
|||||||
/* ── Header ── */
|
|
||||||
.root :global(.header) {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: var(--header-height);
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 24px;
|
|
||||||
padding: 0 16px;
|
|
||||||
background: rgba(7, 11, 18, 0.94);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-bottom: 1px solid var(--border-glass);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.brand) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.brand-mark) {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(0, 224, 164, 0.22);
|
|
||||||
background: rgba(8, 15, 28, 0.78);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow:
|
|
||||||
inset 0 0 0 1px rgba(148, 163, 184, 0.08),
|
|
||||||
0 0 20px rgba(0, 224, 164, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.brand-mark img) {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: block;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.brand h1) {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
var(--accent-cyan) 0%,
|
|
||||||
var(--accent-blue) 100%
|
|
||||||
);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.subtitle) {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-muted);
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-nav) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 6px;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-nav-link) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: rgba(203, 213, 225, 0.82);
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: var(--transition);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-nav-link:hover) {
|
|
||||||
color: #f8fafc;
|
|
||||||
background: rgba(30, 41, 59, 0.44);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-nav-link.active) {
|
|
||||||
color: #f8fafc;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-nav-link.active::after) {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 18px;
|
|
||||||
right: 18px;
|
|
||||||
bottom: 4px;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-right) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.lang-switch) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid var(--border-glass);
|
|
||||||
background: var(--bg-glass);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.lang-btn) {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-radius: 7px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.lang-btn:hover) {
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: rgba(99, 102, 241, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.lang-btn.active) {
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: rgba(0, 224, 164, 0.12);
|
|
||||||
box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.live-badge) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
background: rgba(0, 224, 164, 0.08);
|
|
||||||
border: 1px solid rgba(0, 224, 164, 0.22);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--accent-green);
|
|
||||||
letter-spacing: 1.2px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.pulse-dot) {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--accent-green);
|
|
||||||
animation: pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
box-shadow: 0 0 0 0 rgba(0, 224, 164, 0.4);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.7;
|
|
||||||
box-shadow: 0 0 0 6px rgba(0, 224, 164, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.refresh-btn) {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border-glass);
|
|
||||||
background: rgba(13, 19, 33, 0.6);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 150ms ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.root :global(.refresh-btn:hover) {
|
|
||||||
background: rgba(0, 224, 164, 0.1);
|
|
||||||
border-color: rgba(0, 224, 164, 0.3);
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
.root :global(.refresh-btn.spinning) {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.locale-switch) {
|
|
||||||
height: 32px;
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(0, 224, 164, 0.2);
|
|
||||||
background: rgba(8, 15, 27, 0.82);
|
|
||||||
color: rgba(148, 163, 184, 0.86);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.locale-switch span) {
|
|
||||||
min-width: 32px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 7px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.locale-switch span.active) {
|
|
||||||
color: #f8fafc;
|
|
||||||
background: rgba(0, 224, 164, 0.16);
|
|
||||||
box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.24);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.locale-switch:hover) {
|
|
||||||
border-color: rgba(0, 224, 164, 0.34);
|
|
||||||
background: rgba(11, 22, 40, 0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-utility-btn) {
|
|
||||||
min-width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(115, 137, 161, 0.18);
|
|
||||||
background: rgba(8, 15, 27, 0.82);
|
|
||||||
color: rgba(226, 232, 240, 0.8);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-utility-btn:hover) {
|
|
||||||
color: #f8fafc;
|
|
||||||
border-color: rgba(0, 224, 164, 0.34);
|
|
||||||
background: rgba(11, 22, 40, 0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-utility-btn.active) {
|
|
||||||
color: #f8fafc;
|
|
||||||
border-color: rgba(123, 97, 255, 0.34);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-utility-btn.more) {
|
|
||||||
padding: 0;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── City List Sidebar ── */
|
|
||||||
.root :global(.city-list) {
|
|
||||||
position: fixed;
|
|
||||||
top: calc(var(--header-height) + 12px);
|
|
||||||
left: 12px;
|
|
||||||
width: var(--sidebar-width);
|
|
||||||
max-height: calc(100vh - var(--header-height) - 24px);
|
|
||||||
z-index: 900;
|
|
||||||
background: var(--bg-glass);
|
|
||||||
backdrop-filter: blur(var(--glass-blur));
|
|
||||||
border: 1px solid var(--border-glass);
|
|
||||||
border-radius: 18px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list-header) {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 14px 16px 10px;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-primary);
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-search) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 0 14px 12px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(115, 137, 161, 0.14);
|
|
||||||
background: rgba(6, 12, 22, 0.82);
|
|
||||||
color: rgba(148, 163, 184, 0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-search input) {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
background: transparent;
|
|
||||||
color: #f8fafc;
|
|
||||||
font: inherit;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-search input::placeholder) {
|
|
||||||
color: rgba(148, 163, 184, 0.72);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-count) {
|
|
||||||
background: rgba(123, 97, 255, 0.2);
|
|
||||||
color: var(--accent-blue);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
border: 1px solid rgba(123, 97, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list-items) {
|
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 6px 8px;
|
|
||||||
}
|
|
||||||
.root :global(.city-list-items::-webkit-scrollbar) {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
.root :global(.city-list-items::-webkit-scrollbar-track) {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.root :global(.city-list-items::-webkit-scrollbar-thumb) {
|
|
||||||
background: var(--border-glass);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.sidebar-footer) {
|
|
||||||
border-top: 1px solid var(--border-subtle);
|
|
||||||
padding: 10px 12px;
|
|
||||||
color: rgba(148, 163, 184, 0.72);
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group) {
|
|
||||||
border: 1px solid rgba(115, 137, 161, 0.12);
|
|
||||||
border-radius: 14px;
|
|
||||||
background: rgba(10, 17, 30, 0.48);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group:last-child) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-header) {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
background: rgba(15, 28, 47, 0.56);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 7px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: background 150ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-header:hover) {
|
|
||||||
background: rgba(18, 34, 55, 0.82);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-title) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.4px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-indicator) {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 2px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.root :global(.city-group-indicator.high) {
|
|
||||||
background: var(--risk-high);
|
|
||||||
box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
.root :global(.city-group-indicator.medium) {
|
|
||||||
background: var(--risk-medium);
|
|
||||||
box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
|
|
||||||
}
|
|
||||||
.root :global(.city-group-indicator.low) {
|
|
||||||
background: var(--risk-low);
|
|
||||||
box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
|
|
||||||
}
|
|
||||||
.root :global(.city-group-indicator.other) {
|
|
||||||
background: var(--text-muted);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-meta) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-count) {
|
|
||||||
min-width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border-radius: 9px;
|
|
||||||
padding: 0 6px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(123, 97, 255, 0.26);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-arrow) {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-arrow.expanded) {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-items) {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group.collapsed .city-group-items) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item) {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--transition);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: transparent;
|
|
||||||
color: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.root :global(.city-item:hover) {
|
|
||||||
background: rgba(10, 26, 44, 0.84);
|
|
||||||
border-color: rgba(0, 224, 164, 0.18);
|
|
||||||
box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.03);
|
|
||||||
}
|
|
||||||
.root :global(.city-item.active) {
|
|
||||||
background:
|
|
||||||
linear-gradient(135deg, rgba(0, 224, 164, 0.12), rgba(123, 97, 255, 0.1)),
|
|
||||||
rgba(9, 18, 32, 0.92);
|
|
||||||
border-color: rgba(0, 224, 164, 0.24);
|
|
||||||
box-shadow:
|
|
||||||
0 0 20px rgba(0, 224, 164, 0.08),
|
|
||||||
inset 0 0 0 1px rgba(0, 224, 164, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item-main) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-name-text) {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item-info) {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 20px; /* Align with name text, after the dot */
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-max-info) {
|
|
||||||
color: var(--accent-blue);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-deviation-info) {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-deviation-cold) {
|
|
||||||
color: var(--color-accent-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-deviation-hot) {
|
|
||||||
color: var(--color-signal-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-deviation-normal) {
|
|
||||||
color: #22d3ee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-deviation-info.strong) {
|
|
||||||
text-shadow: 0 0 10px rgba(56, 189, 248, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-deviation-hot.strong) {
|
|
||||||
text-shadow: 0 0 10px rgba(245, 158, 11, 0.24);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .risk-dot) {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.root :global(.city-item .risk-dot.high) {
|
|
||||||
background: var(--risk-high);
|
|
||||||
box-shadow: 0 0 6px var(--risk-high);
|
|
||||||
}
|
|
||||||
.root :global(.city-item .risk-dot.medium) {
|
|
||||||
background: var(--risk-medium);
|
|
||||||
box-shadow: 0 0 6px var(--risk-medium);
|
|
||||||
}
|
|
||||||
.root :global(.city-item .risk-dot.low) {
|
|
||||||
background: var(--risk-low);
|
|
||||||
box-shadow: 0 0 6px var(--risk-low);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-clock-icon) {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: -1px;
|
|
||||||
margin-right: 3px;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-temp) {
|
|
||||||
margin-left: auto;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 200ms ease;
|
|
||||||
}
|
|
||||||
.root :global(.city-item .city-temp.loaded) {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Responsive ── */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.root {
|
|
||||||
--panel-width: 460px;
|
|
||||||
}
|
|
||||||
.root :global(.hero-value) {
|
|
||||||
font-size: 52px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.root :global(.header) {
|
|
||||||
height: auto;
|
|
||||||
min-height: var(--header-height);
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.brand) {
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-right) {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.lang-switch) {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.account-btn),
|
|
||||||
.root :global(.info-btn) {
|
|
||||||
padding: 6px 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.live-badge) {
|
|
||||||
order: 4;
|
|
||||||
padding: 4px 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.refresh-btn) {
|
|
||||||
order: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list) {
|
|
||||||
display: flex;
|
|
||||||
top: auto;
|
|
||||||
left: 8px;
|
|
||||||
right: 8px;
|
|
||||||
bottom: 8px;
|
|
||||||
width: auto;
|
|
||||||
max-height: min(36vh, 320px);
|
|
||||||
border-radius: 14px;
|
|
||||||
z-index: 920;
|
|
||||||
}
|
|
||||||
.root :global(.detail-panel) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.root {
|
|
||||||
--panel-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list-header) {
|
|
||||||
padding: 12px 14px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list-items) {
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-header) {
|
|
||||||
padding: 8px 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item) {
|
|
||||||
padding: 8px 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item .city-name-text),
|
|
||||||
.root :global(.city-item .city-temp) {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item-info) {
|
|
||||||
padding-left: 18px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
row-gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-header) {
|
|
||||||
padding: 16px 16px 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.root :global(.header) {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.brand) {
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.subtitle) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.root :global(.brand h1) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.header-right) {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.lang-switch) {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.account-btn),
|
|
||||||
.root :global(.info-btn) {
|
|
||||||
min-height: 34px;
|
|
||||||
padding: 6px 9px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.account-btn span),
|
|
||||||
.root :global(.info-btn span) {
|
|
||||||
max-width: 88px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.live-badge) {
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-size: 10px;
|
|
||||||
letter-spacing: 0.6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.refresh-btn) {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.hero-value) {
|
|
||||||
font-size: 42px;
|
|
||||||
}
|
|
||||||
.root :global(.hero-details) {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.root :global(.hero-item .value) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list) {
|
|
||||||
left: 6px;
|
|
||||||
right: 6px;
|
|
||||||
bottom: 6px;
|
|
||||||
max-height: min(40vh, 300px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-list-header) {
|
|
||||||
padding: 10px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-group-title) {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item-main) {
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-item-info) {
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-header) {
|
|
||||||
padding: 14px 14px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.city-marker:hover) {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.marker-bubble) {
|
|
||||||
min-width: 48px;
|
|
||||||
min-height: 32px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.marker-name) {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.prob-price-grid) {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.prob-price-head) {
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
@@ -1,472 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import clsx from "clsx";
|
|
||||||
import dynamic from "next/dynamic";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import { ForecastTable } from "@/components/dashboard/PanelSections";
|
|
||||||
import {
|
|
||||||
useDashboardModal,
|
|
||||||
useDashboardStore,
|
|
||||||
useProAccess,
|
|
||||||
} from "@/hooks/useDashboardStore";
|
|
||||||
import { useI18n } from "@/hooks/useI18n";
|
|
||||||
import { useRelativeTime } from "@/hooks/useRelativeTime";
|
|
||||||
import { getOfficialSourceLinks } from "@/lib/dashboard-official-sources";
|
|
||||||
import { trackAppEvent } from "@/lib/app-analytics";
|
|
||||||
import { getTodayPolymarketUrl } from "@/lib/polymarket-market-links";
|
|
||||||
import { getCityProfileStats } from "@/lib/dashboard-utils";
|
|
||||||
import { normalizeObservationSourceLabel } from "@/lib/source-labels";
|
|
||||||
import { getRiskBadgeLabel } from "@/lib/weather-summary-utils";
|
|
||||||
|
|
||||||
const DetailMiniTemperatureChart = dynamic(
|
|
||||||
() =>
|
|
||||||
import("@/components/dashboard/DetailMiniTemperatureChart").then(
|
|
||||||
(module) => module.DetailMiniTemperatureChart,
|
|
||||||
),
|
|
||||||
{
|
|
||||||
loading: () => <div className="detail-mini-chart detail-mini-chart-loading" />,
|
|
||||||
ssr: false,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
export function DetailPanel({
|
|
||||||
variant = "overlay",
|
|
||||||
}: {
|
|
||||||
variant?: "overlay" | "rail";
|
|
||||||
} = {}) {
|
|
||||||
const store = useDashboardStore();
|
|
||||||
const modal = useDashboardModal();
|
|
||||||
const { proAccess } = useProAccess();
|
|
||||||
const { locale, t } = useI18n();
|
|
||||||
const router = useRouter();
|
|
||||||
const isRail = variant === "rail";
|
|
||||||
const detail = store.selectedDetail;
|
|
||||||
const selectedCityItem = useMemo(
|
|
||||||
() =>
|
|
||||||
store.selectedCity
|
|
||||||
? store.cities.find((city) => city.name === store.selectedCity) || null
|
|
||||||
: null,
|
|
||||||
[store.cities, store.selectedCity],
|
|
||||||
);
|
|
||||||
const selectedSummary = useMemo(
|
|
||||||
() =>
|
|
||||||
store.selectedCity
|
|
||||||
? store.citySummariesByName[store.selectedCity] || null
|
|
||||||
: null,
|
|
||||||
[store.citySummariesByName, store.selectedCity],
|
|
||||||
);
|
|
||||||
const isPro = proAccess.subscriptionActive;
|
|
||||||
const isAuthenticated = proAccess.authenticated;
|
|
||||||
const panelRef = useRef<HTMLElement | null>(null);
|
|
||||||
const lastDetailFetchedAtRef = useRef<number>(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (detail?.name) {
|
|
||||||
lastDetailFetchedAtRef.current = Date.now();
|
|
||||||
}
|
|
||||||
}, [detail?.name]);
|
|
||||||
|
|
||||||
const detailAgeText = useRelativeTime(
|
|
||||||
lastDetailFetchedAtRef.current
|
|
||||||
? new Date(lastDetailFetchedAtRef.current).toISOString()
|
|
||||||
: null,
|
|
||||||
);
|
|
||||||
const [heavyContentReady, setHeavyContentReady] = useState(false);
|
|
||||||
const isOverlayOpen =
|
|
||||||
Boolean(modal.futureModalDate);
|
|
||||||
const isVisible = isRail
|
|
||||||
? Boolean(store.selectedCity) && !isOverlayOpen
|
|
||||||
: store.isPanelOpen && Boolean(store.selectedCity) && !isOverlayOpen;
|
|
||||||
const hasBasicPanelContent = Boolean(
|
|
||||||
detail || selectedSummary || selectedCityItem,
|
|
||||||
);
|
|
||||||
const panelDisplayName =
|
|
||||||
detail?.display_name ||
|
|
||||||
selectedSummary?.display_name ||
|
|
||||||
selectedCityItem?.display_name ||
|
|
||||||
store.selectedCity ||
|
|
||||||
"...";
|
|
||||||
const panelRiskLevel =
|
|
||||||
detail?.risk?.level ||
|
|
||||||
selectedSummary?.risk?.level ||
|
|
||||||
selectedCityItem?.risk_level ||
|
|
||||||
"low";
|
|
||||||
const profileStats = useMemo(
|
|
||||||
() => (detail ? getCityProfileStats(detail, locale) : []),
|
|
||||||
[detail, locale],
|
|
||||||
);
|
|
||||||
const officialLinks = useMemo(
|
|
||||||
() => (detail ? getOfficialSourceLinks(detail) : []),
|
|
||||||
[detail],
|
|
||||||
);
|
|
||||||
const marketUrl = useMemo(
|
|
||||||
() => getTodayPolymarketUrl(detail, locale),
|
|
||||||
[detail, locale],
|
|
||||||
);
|
|
||||||
const basicSettlementLabel = normalizeObservationSourceLabel(
|
|
||||||
selectedSummary?.current?.settlement_source_label ||
|
|
||||||
selectedCityItem?.settlement_source_label ||
|
|
||||||
selectedCityItem?.settlement_source,
|
|
||||||
locale === "en-US" ? "Settlement source pending" : "结算口径待确认",
|
|
||||||
);
|
|
||||||
const basicAirportLabel =
|
|
||||||
selectedCityItem?.airport ||
|
|
||||||
selectedSummary?.icao ||
|
|
||||||
(locale === "en-US" ? "Airport pending" : "机场待确认");
|
|
||||||
const heroSettlementLabel = normalizeObservationSourceLabel(
|
|
||||||
detail?.current?.settlement_source_label,
|
|
||||||
basicSettlementLabel,
|
|
||||||
);
|
|
||||||
const heroAirportLabel = detail?.risk?.airport || basicAirportLabel;
|
|
||||||
const isSparsePanelDetail = Boolean(
|
|
||||||
detail &&
|
|
||||||
(detail.detail_depth !== "full" ||
|
|
||||||
(detail.forecast?.daily?.length ?? 0) <= 1),
|
|
||||||
);
|
|
||||||
const isPanelSyncing = store.loadingState.cityDetail;
|
|
||||||
const [panelSyncTimedOut, setPanelSyncTimedOut] = useState(false);
|
|
||||||
const showPanelSyncing = isPanelSyncing && !panelSyncTimedOut;
|
|
||||||
const isShowingCachedDetailDuringSync = false;
|
|
||||||
|
|
||||||
const blurActiveElement = () => {
|
|
||||||
if (typeof document === "undefined") return;
|
|
||||||
const active = document.activeElement;
|
|
||||||
if (active instanceof HTMLElement) {
|
|
||||||
active.blur();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTodayAccess = () => {
|
|
||||||
blurActiveElement();
|
|
||||||
|
|
||||||
if (isPro) {
|
|
||||||
void modal.openTodayModal();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
trackAppEvent("paywall_feature_clicked", {
|
|
||||||
entry: "detail_panel",
|
|
||||||
feature: "today",
|
|
||||||
city: store.selectedCity,
|
|
||||||
user_state: isAuthenticated ? "logged_in" : "guest",
|
|
||||||
});
|
|
||||||
router.push("/account");
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isPanelSyncing || !store.selectedCity) {
|
|
||||||
setPanelSyncTimedOut(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setPanelSyncTimedOut(false);
|
|
||||||
const timeoutId = window.setTimeout(() => {
|
|
||||||
setPanelSyncTimedOut(true);
|
|
||||||
}, 12_000);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
};
|
|
||||||
}, [isPanelSyncing, store.selectedCity]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const panel = panelRef.current;
|
|
||||||
if (!panel) return;
|
|
||||||
|
|
||||||
if (!isVisible) {
|
|
||||||
panel.setAttribute("inert", "");
|
|
||||||
if (
|
|
||||||
typeof document !== "undefined" &&
|
|
||||||
panel.contains(document.activeElement)
|
|
||||||
) {
|
|
||||||
const active = document.activeElement;
|
|
||||||
if (active instanceof HTMLElement) {
|
|
||||||
active.blur();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
panel.removeAttribute("inert");
|
|
||||||
}, [isVisible]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isVisible || !detail) {
|
|
||||||
setHeavyContentReady(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let canceled = false;
|
|
||||||
let timeoutId: number | null = null;
|
|
||||||
let idleId: number | null = null;
|
|
||||||
const win = typeof window !== "undefined" ? (window as any) : null;
|
|
||||||
|
|
||||||
const markReady = () => {
|
|
||||||
if (!canceled) {
|
|
||||||
setHeavyContentReady(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (win && typeof win.requestIdleCallback === "function") {
|
|
||||||
idleId = win.requestIdleCallback(markReady, { timeout: 180 });
|
|
||||||
} else if (typeof window !== "undefined") {
|
|
||||||
timeoutId = window.setTimeout(markReady, 80);
|
|
||||||
} else {
|
|
||||||
setHeavyContentReady(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
canceled = true;
|
|
||||||
if (
|
|
||||||
win &&
|
|
||||||
idleId != null &&
|
|
||||||
typeof win.cancelIdleCallback === "function"
|
|
||||||
) {
|
|
||||||
win.cancelIdleCallback(idleId);
|
|
||||||
}
|
|
||||||
if (timeoutId != null && typeof window !== "undefined") {
|
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [detail, isVisible]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<aside
|
|
||||||
ref={panelRef}
|
|
||||||
className={clsx(
|
|
||||||
"detail-panel",
|
|
||||||
isRail && "scan-city-detail-rail",
|
|
||||||
(isVisible || isRail) && "visible",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="panel-header">
|
|
||||||
{!isRail ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="panel-close"
|
|
||||||
aria-label={t("detail.closeAria")}
|
|
||||||
onClick={() => {
|
|
||||||
blurActiveElement();
|
|
||||||
store.closePanel();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
<div className="panel-title-area">
|
|
||||||
<div className="panel-title-stack">
|
|
||||||
<div className="panel-overline">
|
|
||||||
<span>{locale === "en-US" ? "City briefing" : "城市简报"}</span>
|
|
||||||
<span className="panel-overline-sep">•</span>
|
|
||||||
<span>{panelDisplayName.toUpperCase()}</span>
|
|
||||||
</div>
|
|
||||||
<h2>{panelDisplayName}</h2>
|
|
||||||
</div>
|
|
||||||
{showPanelSyncing && (
|
|
||||||
<div
|
|
||||||
className="panel-loading-hint"
|
|
||||||
role="status"
|
|
||||||
aria-live="polite"
|
|
||||||
>
|
|
||||||
<span className="panel-loading-spinner" aria-hidden="true" />
|
|
||||||
<span>
|
|
||||||
{locale === "en-US"
|
|
||||||
? isSparsePanelDetail
|
|
||||||
? `Completing ${panelDisplayName} cards...`
|
|
||||||
: `Syncing ${panelDisplayName}...`
|
|
||||||
: isSparsePanelDetail
|
|
||||||
? `正在补齐 ${panelDisplayName} 卡片...`
|
|
||||||
: `正在同步 ${panelDisplayName}...`}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{panelSyncTimedOut && (
|
|
||||||
<div className="panel-loading-hint timed-out" role="alert">
|
|
||||||
<span>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "Sync is taking longer than expected. Data shown may be incomplete."
|
|
||||||
: "同步时间较长，当前展示的数据可能不完整。"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="panel-meta">
|
|
||||||
<span className={clsx("risk-badge", panelRiskLevel)}>
|
|
||||||
{getRiskBadgeLabel(panelRiskLevel, locale)}
|
|
||||||
</span>
|
|
||||||
{detailAgeText ? (
|
|
||||||
<span
|
|
||||||
className="panel-meta-chip panel-meta-chip-muted"
|
|
||||||
title={
|
|
||||||
locale === "en-US"
|
|
||||||
? "Time since last data refresh"
|
|
||||||
: "上次数据更新时间"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{locale === "en-US" ? "Updated " : "更新于 "}
|
|
||||||
{detailAgeText}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
<span className="panel-meta-chip panel-meta-chip-strong">
|
|
||||||
{heroSettlementLabel}
|
|
||||||
</span>
|
|
||||||
<span className="panel-meta-chip panel-meta-chip-muted">
|
|
||||||
{heroAirportLabel}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="panel-actions">
|
|
||||||
{marketUrl ? (
|
|
||||||
<a
|
|
||||||
className="panel-action-button panel-action-button-ghost"
|
|
||||||
href={marketUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
title={
|
|
||||||
locale === "en-US"
|
|
||||||
? "Open today's Polymarket market"
|
|
||||||
: "打开今日 Polymarket 题目页"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{locale === "en-US" ? "Market" : "市场页"}
|
|
||||||
</a>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
"panel-body",
|
|
||||||
isShowingCachedDetailDuringSync && "is-syncing",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isShowingCachedDetailDuringSync ? (
|
|
||||||
<div className="panel-sync-blocker" role="status" aria-live="polite">
|
|
||||||
<span className="panel-loading-spinner" aria-hidden="true" />
|
|
||||||
<span>
|
|
||||||
{locale === "en-US"
|
|
||||||
? `Refreshing ${panelDisplayName}. Current cards are paused until the latest data arrives.`
|
|
||||||
: `正在刷新 ${panelDisplayName}，最新数据返回前暂停展示旧卡片。`}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
isShowingCachedDetailDuringSync && "panel-content-stale",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{!hasBasicPanelContent ? (
|
|
||||||
<section className="detail-summary-shell detail-empty-state">
|
|
||||||
<div className="detail-section-head">
|
|
||||||
<div>
|
|
||||||
<div className="detail-section-kicker">
|
|
||||||
{locale === "en-US" ? "No city selected" : "尚未选择城市"}
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "Pick a city to start."
|
|
||||||
: "先选择一个城市。"}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ color: "var(--text-muted)", fontSize: "13px" }}>
|
|
||||||
{showPanelSyncing
|
|
||||||
? t("detail.loading")
|
|
||||||
: t("detail.emptyHint")}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
) : !detail ? (
|
|
||||||
<div className="detail-mini-meta" role="status" aria-live="polite">
|
|
||||||
{showPanelSyncing
|
|
||||||
? locale === "en-US"
|
|
||||||
? "Loading city cards..."
|
|
||||||
: "正在加载城市卡片..."
|
|
||||||
: locale === "en-US"
|
|
||||||
? "City cards will appear here."
|
|
||||||
: "城市卡片会显示在这里。"}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<section className="detail-structured-section">
|
|
||||||
<div className="detail-section-head">
|
|
||||||
<div>
|
|
||||||
<div className="detail-section-kicker">
|
|
||||||
{locale === "en-US" ? "Profile" : "城市画像"}
|
|
||||||
</div>
|
|
||||||
<h3>{t("detail.profile")}</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="detail-grid">
|
|
||||||
{profileStats.map((item) => (
|
|
||||||
<article key={item.label} className="detail-card">
|
|
||||||
<span className="detail-label">{item.label}</span>
|
|
||||||
<span className="detail-value">{item.value}</span>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{officialLinks.length > 0 ? (
|
|
||||||
<section className="detail-structured-section">
|
|
||||||
<div className="detail-section-head">
|
|
||||||
<div>
|
|
||||||
<div className="detail-section-kicker">
|
|
||||||
{locale === "en-US" ? "Primary references" : "官方参考"}
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "Settlement and observation references"
|
|
||||||
: "结算与观测参考来源"}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="detail-source-note">
|
|
||||||
{locale === "en-US"
|
|
||||||
? "AGENCY = national meteorological service, METAR = airport observation, AIRPORT = airport official page."
|
|
||||||
: "AGENCY = 国家气象机构，METAR = 机场实测报文，AIRPORT = 机场官网页面。"}
|
|
||||||
</p>
|
|
||||||
<div className="detail-source-list">
|
|
||||||
{officialLinks.map((link) => (
|
|
||||||
<a
|
|
||||||
key={`${link.label}-${link.href}`}
|
|
||||||
className="detail-source-link"
|
|
||||||
href={link.href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<span className="detail-source-kind">
|
|
||||||
{link.kind.toUpperCase()}
|
|
||||||
</span>
|
|
||||||
<span className="detail-source-label">
|
|
||||||
{link.label}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<section className="detail-structured-section rounded-2xl">
|
|
||||||
<div className="detail-section-head">
|
|
||||||
<div>
|
|
||||||
<div className="detail-section-kicker">
|
|
||||||
{locale === "en-US" ? "Mini trend" : "温度微趋势"}
|
|
||||||
</div>
|
|
||||||
<h3>{t("detail.todayMiniTrend")}</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{heavyContentReady ? (
|
|
||||||
<DetailMiniTemperatureChart detail={detail} />
|
|
||||||
) : (
|
|
||||||
<div className="detail-mini-meta">{t("detail.loading")}</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{heavyContentReady ? <ForecastTable /> : null}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,233 +0,0 @@
|
|||||||
.root :global(.panel-title-stack) {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-overline) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-overline-sep) {
|
|
||||||
opacity: 0.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-subtitle) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-weather-chip) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-meta-chip) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 28px;
|
|
||||||
padding: 0 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-meta-chip-strong) {
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: rgba(34, 211, 238, 0.1);
|
|
||||||
border-color: rgba(34, 211, 238, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-meta-chip-muted) {
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-actions) {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-action-button) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 38px;
|
|
||||||
padding: 0 14px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-action-button:hover) {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-action-button-primary) {
|
|
||||||
color: #FFFFFF;
|
|
||||||
background: linear-gradient(135deg, var(--color-accent-primary), #3B82F6);
|
|
||||||
border-color: rgba(77, 163, 255, 0.34);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-action-button-secondary) {
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-action-button-ghost) {
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
background: rgba(34, 211, 238, 0.08);
|
|
||||||
border-color: rgba(34, 211, 238, 0.16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-shell) {
|
|
||||||
background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
border-radius: 18px;
|
|
||||||
padding: 16px;
|
|
||||||
box-shadow: 0 18px 42px rgba(2, 6, 23, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-body section.detail-summary-shell) {
|
|
||||||
padding: 16px;
|
|
||||||
margin: 18px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-shell-live) {
|
|
||||||
background: linear-gradient(180deg, rgba(22, 78, 99, 0.18), rgba(15, 23, 42, 0.3));
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-section-head) {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-section-kicker) {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-main) {
|
|
||||||
display: grid;
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-hero) {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-temp) {
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 38px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-supporting) {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-summary-grid) {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-card) {
|
|
||||||
background: rgba(255, 255, 255, 0.035);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-card-hero) {
|
|
||||||
background: rgba(34, 211, 238, 0.08);
|
|
||||||
border-color: rgba(34, 211, 238, 0.16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-card-wide) {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-callout-card) {
|
|
||||||
background: rgba(255, 255, 255, 0.025);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-value-muted) {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-structured-section) {
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 18px;
|
|
||||||
padding: 16px 16px 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-empty-state) {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-loading-hint) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: rgba(77, 163, 255, 0.06);
|
|
||||||
border: 1px solid rgba(77, 163, 255, 0.1);
|
|
||||||
color: var(--color-accent-secondary);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.panel-loading-hint.timed-out) {
|
|
||||||
background: rgba(245, 158, 11, 0.06);
|
|
||||||
border-color: rgba(245, 158, 11, 0.16);
|
|
||||||
color: var(--color-signal-warning);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
@@ -1,295 +0,0 @@
|
|||||||
/* Detail panel content styles. */
|
|
||||||
|
|
||||||
.root :global(.detail-grid) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-card) {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-list) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-note) {
|
|
||||||
margin: 8px 0 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-link) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px 14px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
color: var(--text-main);
|
|
||||||
text-decoration: none;
|
|
||||||
transition:
|
|
||||||
background 0.18s ease,
|
|
||||||
border-color 0.18s ease,
|
|
||||||
transform 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-link:hover) {
|
|
||||||
background: rgba(34, 211, 238, 0.08);
|
|
||||||
border-color: rgba(34, 211, 238, 0.28);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-kind) {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
text-transform: uppercase;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-label) {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-main);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-label) {
|
|
||||||
display: block;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 11px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-value) {
|
|
||||||
display: block;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.profile-lead) {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-wrap) {
|
|
||||||
display: grid;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart) {
|
|
||||||
position: relative;
|
|
||||||
height: 210px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.scan-city-detail-rail .detail-mini-chart) {
|
|
||||||
height: 230px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart canvas) {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend span) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend i) {
|
|
||||||
width: 16px;
|
|
||||||
height: 3px;
|
|
||||||
border-radius: 999px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend i.forecast) {
|
|
||||||
background: rgba(100, 116, 139, 0.72);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend i.forecast.calibrated) {
|
|
||||||
background: #38bdf8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart-legend i.observation) {
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
background: #22c55e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-meta) {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.insight-list) {
|
|
||||||
display: grid;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.insight-item) {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.insight-title) {
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.insight-text) {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.65;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-card) {
|
|
||||||
position: relative;
|
|
||||||
min-height: 210px;
|
|
||||||
border-radius: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.78)),
|
|
||||||
rgba(255, 255, 255, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-image) {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-overlay) {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
min-height: 210px;
|
|
||||||
padding: 18px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
rgba(2, 6, 23, 0.08) 0%,
|
|
||||||
rgba(2, 6, 23, 0.86) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-copy),
|
|
||||||
.root :global(.detail-scenery-fallback) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-fallback) {
|
|
||||||
min-height: 210px;
|
|
||||||
padding: 18px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
circle at top left,
|
|
||||||
rgba(34, 211, 238, 0.12),
|
|
||||||
transparent 34%
|
|
||||||
),
|
|
||||||
linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-kicker) {
|
|
||||||
color: rgba(226, 232, 240, 0.78);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.16em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-title) {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
text-shadow: 0 6px 22px rgba(2, 6, 23, 0.42);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-subtitle) {
|
|
||||||
max-width: 320px;
|
|
||||||
color: rgba(226, 232, 240, 0.9);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.6;
|
|
||||||
text-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-credit) {
|
|
||||||
align-self: flex-start;
|
|
||||||
color: rgba(226, 232, 240, 0.9);
|
|
||||||
font-size: 11px;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
||||||
background: rgba(2, 6, 23, 0.35);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-scenery-credit:hover) {
|
|
||||||
border-color: rgba(34, 211, 238, 0.4);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.root :global(.detail-grid) {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-mini-chart) {
|
|
||||||
height: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-link) {
|
|
||||||
padding: 10px 12px;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.detail-source-label) {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,82 +0,0 @@
|
|||||||
.root :global(.modal-title-stack) {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-overline) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-overline-sep) {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-subtitle) {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-header-meta) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-meta-pill) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 28px;
|
|
||||||
padding: 0 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
background: rgba(34, 211, 238, 0.08);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-callout) {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 12px 14px;
|
|
||||||
border-radius: 14px;
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
||||||
background: rgba(255, 255, 255, 0.035);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.65;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-callout-info) {
|
|
||||||
border-color: rgba(56, 189, 248, 0.24);
|
|
||||||
background: rgba(14, 165, 233, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-section-heading) {
|
|
||||||
display: grid;
|
|
||||||
gap: 6px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-section-kicker) {
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root :global(.modal-section-note) {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,450 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
function getTempExtremeClass(temp: number | null | undefined, symbol?: string | null) {
|
|
||||||
if (temp == null || !Number.isFinite(temp)) return "";
|
|
||||||
const isF = String(symbol || "").toUpperCase().includes("F");
|
|
||||||
if (isF ? temp >= 104 : temp >= 40) return "temp-extreme-hot";
|
|
||||||
if (isF ? temp <= 23 : temp <= -5) return "temp-extreme-cold";
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
import type { ChartConfiguration } from "chart.js";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { startTransition, useMemo } from "react";
|
|
||||||
import { useChart } from "@/hooks/useChart";
|
|
||||||
import {
|
|
||||||
useCityData,
|
|
||||||
useCityDetails,
|
|
||||||
useDashboardModal,
|
|
||||||
} from "@/hooks/useDashboardStore";
|
|
||||||
import { useI18n } from "@/hooks/useI18n";
|
|
||||||
import { CityDetail } from "@/lib/dashboard-types";
|
|
||||||
import { getTemperatureChartData } from "@/lib/chart-utils";
|
|
||||||
import {
|
|
||||||
normalizeObservationSourceCode,
|
|
||||||
normalizeObservationSourceLabel,
|
|
||||||
} from "@/lib/source-labels";
|
|
||||||
import {
|
|
||||||
getHeroMetaItems,
|
|
||||||
getRiskBadgeLabel,
|
|
||||||
getWeatherSummary,
|
|
||||||
} from "@/lib/weather-summary-utils";
|
|
||||||
|
|
||||||
function EmptyState({ text }: { text: string }) {
|
|
||||||
return (
|
|
||||||
<div style={{ color: "var(--text-muted)", fontSize: "13px" }}>{text}</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function HeroSummary() {
|
|
||||||
const { data } = useCityData();
|
|
||||||
const { locale } = useI18n();
|
|
||||||
if (!data) return null;
|
|
||||||
|
|
||||||
const { weatherIcon, weatherText } = getWeatherSummary(data, locale);
|
|
||||||
const metaItems = getHeroMetaItems(data, locale);
|
|
||||||
const current = data.current || {};
|
|
||||||
const settlementSourceCode = normalizeObservationSourceCode(
|
|
||||||
current.settlement_source || "metar",
|
|
||||||
);
|
|
||||||
const settlementIcao = String(current.station_code || data.risk?.icao || "")
|
|
||||||
.trim()
|
|
||||||
.toUpperCase();
|
|
||||||
const settlementSource =
|
|
||||||
settlementSourceCode === "metar" && settlementIcao
|
|
||||||
? `${settlementIcao} METAR`
|
|
||||||
: normalizeObservationSourceLabel(
|
|
||||||
current.settlement_source_label || current.settlement_source,
|
|
||||||
"METAR",
|
|
||||||
).toUpperCase();
|
|
||||||
const isMax =
|
|
||||||
current.max_so_far != null &&
|
|
||||||
current.temp != null &&
|
|
||||||
current.max_so_far <= current.temp;
|
|
||||||
const currentObsText =
|
|
||||||
current.temp != null
|
|
||||||
? `${current.temp}${data.temp_symbol} @${current.obs_time || "--"}`
|
|
||||||
: data.metar_status?.stale_for_today
|
|
||||||
? locale === "en-US"
|
|
||||||
? "No same-day METAR"
|
|
||||||
: "今日暂无 METAR"
|
|
||||||
: "--";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="hero-section">
|
|
||||||
<div className="hero-weather">
|
|
||||||
<span>
|
|
||||||
{weatherIcon} {weatherText}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className={`hero-temp ${getTempExtremeClass(current.temp, data.temp_symbol)}`}>
|
|
||||||
<span className="hero-value">
|
|
||||||
{current.temp != null ? current.temp.toFixed(1) : "--"}
|
|
||||||
</span>
|
|
||||||
<span className="hero-unit">{data.temp_symbol || "°C"}</span>
|
|
||||||
</div>
|
|
||||||
<div className="hero-max-time">
|
|
||||||
{isMax && current.max_temp_time
|
|
||||||
? locale === "en-US"
|
|
||||||
? `Today's peak temperature appeared at local time ${current.max_temp_time}`
|
|
||||||
: `该城市今日最高温出现在当地时间 ${current.max_temp_time}`
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
<div className="hero-details">
|
|
||||||
<div className="hero-item">
|
|
||||||
<span className="label">
|
|
||||||
{locale === "en-US" ? "Current Obs" : "当前实测"}
|
|
||||||
</span>
|
|
||||||
<span className="value">{currentObsText}</span>
|
|
||||||
</div>
|
|
||||||
<div className="hero-item">
|
|
||||||
<span className="label">
|
|
||||||
{locale === "en-US"
|
|
||||||
? `${settlementSource} Anchor`
|
|
||||||
: `${settlementSource} 锚点`}
|
|
||||||
</span>
|
|
||||||
<span className="value highlight">
|
|
||||||
{current.wu_settlement != null
|
|
||||||
? `${current.wu_settlement}${data.temp_symbol}`
|
|
||||||
: "--"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="hero-item">
|
|
||||||
<span className="label">
|
|
||||||
{locale === "en-US" ? "DEB Forecast" : "DEB 预测"}
|
|
||||||
</span>
|
|
||||||
<span className="value">
|
|
||||||
{data.deb?.prediction != null
|
|
||||||
? `${data.deb.prediction}${data.temp_symbol}`
|
|
||||||
: "--"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="hero-sub">
|
|
||||||
{metaItems.map((item) => (
|
|
||||||
<span key={item}>{item}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TemperatureChart() {
|
|
||||||
const { data } = useCityData();
|
|
||||||
const { locale, t } = useI18n();
|
|
||||||
const chartData = useMemo(
|
|
||||||
() => (data ? getTemperatureChartData(data, locale) : null),
|
|
||||||
[data, locale],
|
|
||||||
);
|
|
||||||
|
|
||||||
const canvasRef = useChart(() => {
|
|
||||||
if (!data || !chartData) {
|
|
||||||
return {
|
|
||||||
data: { datasets: [], labels: [] },
|
|
||||||
type: "line",
|
|
||||||
} satisfies ChartConfiguration<"line">;
|
|
||||||
}
|
|
||||||
|
|
||||||
const datasets: NonNullable<
|
|
||||||
ChartConfiguration<"line">["data"]
|
|
||||||
>["datasets"] = [];
|
|
||||||
|
|
||||||
if (chartData.datasets.hasMgmHourly) {
|
|
||||||
datasets.push({
|
|
||||||
backgroundColor: "rgba(234, 179, 8, 0.05)",
|
|
||||||
borderColor: "rgba(234, 179, 8, 0.8)",
|
|
||||||
borderWidth: 2,
|
|
||||||
data: chartData.datasets.mgmHourlyPoints,
|
|
||||||
fill: false,
|
|
||||||
label: locale === "en-US" ? "MGM Forecast" : "MGM 预报",
|
|
||||||
pointHoverRadius: 6,
|
|
||||||
pointRadius: 3,
|
|
||||||
spanGaps: true,
|
|
||||||
tension: 0.3,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
datasets.push({
|
|
||||||
backgroundColor: "rgba(77, 163, 255, 0.06)",
|
|
||||||
borderColor: "rgba(77, 163, 255, 0.66)",
|
|
||||||
borderWidth: 1.5,
|
|
||||||
data: chartData.datasets.debPast,
|
|
||||||
fill: true,
|
|
||||||
label: locale === "en-US" ? "DEB Forecast" : "DEB 预报",
|
|
||||||
pointHoverRadius: 3,
|
|
||||||
pointRadius: 0,
|
|
||||||
tension: 0.3,
|
|
||||||
});
|
|
||||||
datasets.push({
|
|
||||||
borderColor: "rgba(77, 163, 255, 0.36)",
|
|
||||||
borderDash: [5, 3],
|
|
||||||
borderWidth: 1.5,
|
|
||||||
data: chartData.datasets.debFuture,
|
|
||||||
fill: false,
|
|
||||||
label: locale === "en-US" ? "DEB Forecast" : "DEB 预报",
|
|
||||||
pointRadius: 0,
|
|
||||||
tension: 0.3,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
datasets.push({
|
|
||||||
backgroundColor: "#4DA3FF",
|
|
||||||
borderColor: "#4DA3FF",
|
|
||||||
borderWidth: 0,
|
|
||||||
data: chartData.datasets.metarPoints,
|
|
||||||
fill: false,
|
|
||||||
label:
|
|
||||||
chartData.observationLabel ||
|
|
||||||
(locale === "en-US" ? "METAR Observation" : "METAR 实况"),
|
|
||||||
order: 0,
|
|
||||||
pointHoverRadius: 7,
|
|
||||||
pointRadius: 5,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (chartData.datasets.mgmPoints.some((value) => value != null)) {
|
|
||||||
datasets.push({
|
|
||||||
backgroundColor: "#facc15",
|
|
||||||
borderColor: "#facc15",
|
|
||||||
borderWidth: 0,
|
|
||||||
data: chartData.datasets.mgmPoints,
|
|
||||||
fill: false,
|
|
||||||
label: locale === "en-US" ? "MGM Observation" : "MGM 实测",
|
|
||||||
order: -1,
|
|
||||||
pointHoverRadius: 9,
|
|
||||||
pointRadius: 7,
|
|
||||||
showLine: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
!chartData.datasets.hasMgmHourly &&
|
|
||||||
Math.abs(chartData.datasets.offset) > 0.3
|
|
||||||
) {
|
|
||||||
datasets.push({
|
|
||||||
borderColor: "rgba(77, 163, 255, 0.22)",
|
|
||||||
borderDash: [2, 4],
|
|
||||||
borderWidth: 1,
|
|
||||||
data: chartData.datasets.temps,
|
|
||||||
fill: false,
|
|
||||||
label: locale === "en-US" ? "OM Raw" : "OM 原始",
|
|
||||||
pointRadius: 0,
|
|
||||||
tension: 0.3,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: {
|
|
||||||
datasets,
|
|
||||||
labels: chartData.times,
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
interaction: { intersect: false, mode: "index" },
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: { display: false },
|
|
||||||
tooltip: {
|
|
||||||
backgroundColor: "rgba(15, 23, 42, 0.9)",
|
|
||||||
borderColor: "rgba(77, 163, 255, 0.28)",
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: { color: "rgba(255,255,255,0.04)" },
|
|
||||||
ticks: {
|
|
||||||
callback: (_value, index) =>
|
|
||||||
typeof index === "number" && index % 3 === 0
|
|
||||||
? chartData.times[index]
|
|
||||||
: "",
|
|
||||||
color: "#6B7A90",
|
|
||||||
maxRotation: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
grid: { color: "rgba(255,255,255,0.04)" },
|
|
||||||
max: chartData.max,
|
|
||||||
min: chartData.min,
|
|
||||||
ticks: {
|
|
||||||
callback: (value) =>
|
|
||||||
`${Number(value).toFixed(chartData.yTickStep < 1 ? 1 : 0)}${data.temp_symbol || "°C"}`,
|
|
||||||
color: "#6B7A90",
|
|
||||||
stepSize: chartData.yTickStep,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
type: "line",
|
|
||||||
} satisfies ChartConfiguration<"line">;
|
|
||||||
}, [data, chartData, locale]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="chart-section">
|
|
||||||
<h3>{t("section.todayTempTrend")}</h3>
|
|
||||||
<div className="chart-wrapper">
|
|
||||||
<canvas ref={canvasRef} />
|
|
||||||
</div>
|
|
||||||
<div className="chart-legend">
|
|
||||||
{chartData?.legendText || t("section.chartEmpty")}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { ProbabilityDistribution } from "./ProbabilityDistribution";
|
|
||||||
|
|
||||||
export { ModelForecast } from "./ModelForecast";
|
|
||||||
|
|
||||||
export function ForecastTable() {
|
|
||||||
const modal = useDashboardModal();
|
|
||||||
const { loadingState } = useCityDetails();
|
|
||||||
const { data } = useCityData();
|
|
||||||
const { locale, t } = useI18n();
|
|
||||||
const daily = useMemo(() => {
|
|
||||||
if (!data) return [];
|
|
||||||
const rawDaily = Array.isArray(data.forecast?.daily)
|
|
||||||
? data.forecast?.daily || []
|
|
||||||
: [];
|
|
||||||
const seen = new Set<string>();
|
|
||||||
return rawDaily.filter((day) => {
|
|
||||||
const date = String(day?.date || "").trim();
|
|
||||||
if (!date || seen.has(date)) return false;
|
|
||||||
seen.add(date);
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}, [data]);
|
|
||||||
if (!data) return null;
|
|
||||||
const isSparseDaily = daily.length <= 1;
|
|
||||||
const isForecastCompleting =
|
|
||||||
loadingState.cityDetail &&
|
|
||||||
(data.detail_depth !== "full" || isSparseDaily);
|
|
||||||
const resolveForecastTemp = (
|
|
||||||
date: string,
|
|
||||||
fallback: number | null | undefined,
|
|
||||||
) => {
|
|
||||||
const debPrediction = data.multi_model_daily?.[date]?.deb?.prediction;
|
|
||||||
return debPrediction ?? fallback ?? null;
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<section className="forecast-section">
|
|
||||||
<h3>{t("forecast.title")}</h3>
|
|
||||||
{isSparseDaily && (
|
|
||||||
<div className="forecast-inline-note">
|
|
||||||
{isForecastCompleting
|
|
||||||
? locale === "en-US"
|
|
||||||
? "Multi-day forecast is syncing. Only the current-day card has arrived."
|
|
||||||
: "多日预报同步中，当前只到达当日卡片。"
|
|
||||||
: locale === "en-US"
|
|
||||||
? "Only the current-day forecast is available right now."
|
|
||||||
: "当前只收到当日预报，其他日期结果暂未回传。"}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="forecast-table">
|
|
||||||
{daily.length === 0 ? (
|
|
||||||
<EmptyState text={t("forecast.empty")} />
|
|
||||||
) : (
|
|
||||||
daily
|
|
||||||
.map((day, index) => {
|
|
||||||
const isToday = data.local_date
|
|
||||||
? day.date === data.local_date
|
|
||||||
: index === 0;
|
|
||||||
const isSelected =
|
|
||||||
(isToday &&
|
|
||||||
modal.forecastModalMode === "today" &&
|
|
||||||
Boolean(modal.futureModalDate)) ||
|
|
||||||
(modal.forecastModalMode !== "today" &&
|
|
||||||
modal.futureModalDate === day.date) ||
|
|
||||||
modal.selectedForecastDate === day.date;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={day.date}
|
|
||||||
type="button"
|
|
||||||
className={clsx(
|
|
||||||
"forecast-day",
|
|
||||||
isToday && "today",
|
|
||||||
isSelected && "selected",
|
|
||||||
)}
|
|
||||||
onClick={() => {
|
|
||||||
startTransition(() => {
|
|
||||||
if (isToday) {
|
|
||||||
modal.openTodayModal();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
modal.openFutureModal(day.date);
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="f-date">
|
|
||||||
{isToday
|
|
||||||
? t("forecast.today")
|
|
||||||
: day.date.substring(5).replace("-", "/")}
|
|
||||||
</div>
|
|
||||||
<div className="f-temp">
|
|
||||||
{resolveForecastTemp(day.date, day.max_temp)}
|
|
||||||
{data.temp_symbol}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.concat(
|
|
||||||
isForecastCompleting
|
|
||||||
? Array.from({ length: Math.max(0, 5 - daily.length) }).map(
|
|
||||||
(_, index) => (
|
|
||||||
<button
|
|
||||||
key={`forecast-sync-${index}`}
|
|
||||||
type="button"
|
|
||||||
className="forecast-day forecast-day-sync"
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<div className="f-date">
|
|
||||||
{locale === "en-US" ? "Syncing" : "同步中"}
|
|
||||||
</div>
|
|
||||||
<div className="f-temp">--</div>
|
|
||||||
</button>
|
|
||||||
),
|
|
||||||
)
|
|
||||||
: [],
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function RiskInfo() {
|
|
||||||
const { data } = useCityData();
|
|
||||||
const { t } = useI18n();
|
|
||||||
if (!data) return null;
|
|
||||||
const risk = data.risk || {};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="risk-section">
|
|
||||||
<h3>{t("section.risk")}</h3>
|
|
||||||
<div className="risk-info">
|
|
||||||
{!risk.airport ? (
|
|
||||||
<span style={{ color: "var(--text-muted)" }}>
|
|
||||||
{t("section.noRiskProfile")}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="risk-row">
|
|
||||||
<span className="risk-label">{t("section.airport")}</span>
|
|
||||||
<span>
|
|
||||||
{risk.airport} ({risk.icao})
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="risk-row">
|
|
||||||
<span className="risk-label">{t("section.distance")}</span>
|
|
||||||
<span>{risk.distance_km}km</span>
|
|
||||||
</div>
|
|
||||||
{risk.warning && (
|
|
||||||
<div className="risk-row">
|
|
||||||
<span className="risk-label">{t("section.note")}</span>
|
|
||||||
<span>{risk.warning}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,955 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { useMemo } from "react";
|
|
||||||
import { useI18n } from "@/hooks/useI18n";
|
|
||||||
import {
|
|
||||||
CityDetail,
|
|
||||||
MarketScan,
|
|
||||||
MarketTopBucket,
|
|
||||||
ProbabilityBucket,
|
|
||||||
} from "@/lib/dashboard-types";
|
|
||||||
import { getModelView, getProbabilityView } from "@/lib/model-utils";
|
|
||||||
|
|
||||||
function EmptyState({ text }: { text: string }) {
|
|
||||||
return (
|
|
||||||
<div style={{ color: "var(--text-muted)", fontSize: "13px" }}>{text}</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toPercent(value?: number | null) {
|
|
||||||
if (value == null) return null;
|
|
||||||
const numeric = Number(value);
|
|
||||||
if (!Number.isFinite(numeric)) return null;
|
|
||||||
return `${(numeric * 100).toFixed(1)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function toPriceCents(value?: number | null) {
|
|
||||||
if (value == null) return null;
|
|
||||||
const numeric = Number(value);
|
|
||||||
if (!Number.isFinite(numeric)) return null;
|
|
||||||
const normalized = numeric > 1 ? numeric / 100 : numeric;
|
|
||||||
const cents = normalized * 100;
|
|
||||||
const rounded = Math.round(cents * 10) / 10;
|
|
||||||
const text = Number.isInteger(rounded)
|
|
||||||
? String(rounded.toFixed(0))
|
|
||||||
: String(rounded);
|
|
||||||
return `${text}c`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseTempFromText(value: unknown) {
|
|
||||||
const text = String(value || "");
|
|
||||||
const match = text.match(/(-?\d+(?:\.\d+)?)/);
|
|
||||||
if (!match) return null;
|
|
||||||
const numeric = Number(match[1]);
|
|
||||||
return Number.isFinite(numeric) ? numeric : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBucketTemp(bucket: ProbabilityBucket) {
|
|
||||||
if (bucket.value != null) {
|
|
||||||
const byValue = Number(bucket.value);
|
|
||||||
if (Number.isFinite(byValue)) return byValue;
|
|
||||||
}
|
|
||||||
return parseTempFromText(bucket.label || bucket.bucket || bucket.range);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarketYesPrice(scan?: MarketScan | null) {
|
|
||||||
if (scan?.market_price != null) {
|
|
||||||
const preferred = Number(scan.market_price);
|
|
||||||
if (Number.isFinite(preferred)) return preferred;
|
|
||||||
}
|
|
||||||
if (scan?.yes_token?.implied_probability != null) {
|
|
||||||
const implied = Number(scan.yes_token.implied_probability);
|
|
||||||
if (Number.isFinite(implied)) return implied;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isFahrenheitSymbol(symbol?: string | null) {
|
|
||||||
return String(symbol || "")
|
|
||||||
.toUpperCase()
|
|
||||||
.includes("F");
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayTempToMarketCelsius(
|
|
||||||
value: number | null,
|
|
||||||
detail: Pick<CityDetail, "temp_symbol">,
|
|
||||||
) {
|
|
||||||
if (value == null || !Number.isFinite(value)) return null;
|
|
||||||
if (isFahrenheitSymbol(detail.temp_symbol)) {
|
|
||||||
return ((value - 32) * 5) / 9;
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatBucketDisplayLabel(
|
|
||||||
bucket: ProbabilityBucket,
|
|
||||||
detail: Pick<CityDetail, "temp_symbol">,
|
|
||||||
) {
|
|
||||||
let bucketLabel = bucket.label || `${bucket.value}${detail.temp_symbol}`;
|
|
||||||
if (!bucketLabel) return "";
|
|
||||||
let str = String(bucketLabel).toUpperCase().replace(/\s+/g, "");
|
|
||||||
const symbol = detail.temp_symbol || "°C";
|
|
||||||
if (isFahrenheitSymbol(symbol)) {
|
|
||||||
str = str.replace(/℃/g, "°F").replace(/°C/g, "°F");
|
|
||||||
} else {
|
|
||||||
str = str.replace(/℃/g, "°C").replace(/°F/g, "°C");
|
|
||||||
}
|
|
||||||
str = str.replace(/°?C($|\+|-)/g, "°C$1");
|
|
||||||
str = str.replace(/°?F($|\+|-)/g, "°F$1");
|
|
||||||
if (!/[°℃][CF]/.test(str) && /[0-9]/.test(str)) {
|
|
||||||
str += symbol;
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarketBucketUnit(bucket?: MarketTopBucket | null) {
|
|
||||||
return String(bucket?.unit || "").toUpperCase();
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMarketBucketAbove(bucket?: MarketTopBucket | null) {
|
|
||||||
const text =
|
|
||||||
`${bucket?.label || ""} ${bucket?.slug || ""} ${bucket?.question || ""}`
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/\s+/g, "");
|
|
||||||
return (
|
|
||||||
text.includes("+") ||
|
|
||||||
text.includes("orhigher") ||
|
|
||||||
text.includes("or-higher")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMarketBucketBelow(bucket?: MarketTopBucket | null) {
|
|
||||||
const text =
|
|
||||||
`${bucket?.label || ""} ${bucket?.slug || ""} ${bucket?.question || ""}`
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/\s+/g, "");
|
|
||||||
return (
|
|
||||||
text.includes("<=") || text.includes("orlower") || text.includes("or-lower")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function findMarketBucketForDisplayTemp(
|
|
||||||
buckets: MarketTopBucket[],
|
|
||||||
displayTemp: number | null,
|
|
||||||
detail: Pick<CityDetail, "temp_symbol">,
|
|
||||||
) {
|
|
||||||
if (displayTemp == null || !Number.isFinite(displayTemp)) return null;
|
|
||||||
|
|
||||||
let best: MarketTopBucket | null = null;
|
|
||||||
let bestDelta = Number.POSITIVE_INFINITY;
|
|
||||||
for (const bucket of buckets) {
|
|
||||||
const bucketUnit = String(bucket.unit || "").toUpperCase();
|
|
||||||
const compareTemp =
|
|
||||||
bucketUnit === "F"
|
|
||||||
? displayTemp
|
|
||||||
: displayTempToMarketCelsius(displayTemp, detail);
|
|
||||||
if (compareTemp == null) continue;
|
|
||||||
|
|
||||||
const lower = bucket.lower != null ? Number(bucket.lower) : null;
|
|
||||||
const upper = bucket.upper != null ? Number(bucket.upper) : null;
|
|
||||||
if (
|
|
||||||
lower != null &&
|
|
||||||
upper != null &&
|
|
||||||
Number.isFinite(lower) &&
|
|
||||||
Number.isFinite(upper) &&
|
|
||||||
compareTemp >= lower - 0.01 &&
|
|
||||||
compareTemp <= upper + 0.01
|
|
||||||
) {
|
|
||||||
return bucket;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawTemp = bucket.temp ?? bucket.value ?? null;
|
|
||||||
if (rawTemp == null) continue;
|
|
||||||
const candidateTemp = Number(rawTemp);
|
|
||||||
if (!Number.isFinite(candidateTemp)) continue;
|
|
||||||
const delta = Math.abs(candidateTemp - compareTemp);
|
|
||||||
if (delta < bestDelta) {
|
|
||||||
best = bucket;
|
|
||||||
bestDelta = delta;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const tolerance = isFahrenheitSymbol(detail.temp_symbol) ? 0.56 : 0.26;
|
|
||||||
return best && bestDelta <= tolerance ? best : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function marketBucketContainsDisplayTemp(
|
|
||||||
bucket: MarketTopBucket | null,
|
|
||||||
displayTemp: number | null,
|
|
||||||
detail: Pick<CityDetail, "temp_symbol">,
|
|
||||||
) {
|
|
||||||
if (!bucket || displayTemp == null || !Number.isFinite(displayTemp))
|
|
||||||
return false;
|
|
||||||
|
|
||||||
const bucketUnit = getMarketBucketUnit(bucket);
|
|
||||||
const compareTemp =
|
|
||||||
bucketUnit === "F"
|
|
||||||
? displayTemp
|
|
||||||
: displayTempToMarketCelsius(displayTemp, detail);
|
|
||||||
if (compareTemp == null) return false;
|
|
||||||
|
|
||||||
const lower = bucket.lower != null ? Number(bucket.lower) : null;
|
|
||||||
const upper = bucket.upper != null ? Number(bucket.upper) : null;
|
|
||||||
if (lower != null && !Number.isFinite(lower)) return false;
|
|
||||||
if (upper != null && !Number.isFinite(upper)) return false;
|
|
||||||
|
|
||||||
if (lower != null && upper != null) {
|
|
||||||
return compareTemp >= lower - 0.01 && compareTemp <= upper + 0.01;
|
|
||||||
}
|
|
||||||
if (lower != null && isMarketBucketAbove(bucket)) {
|
|
||||||
return compareTemp >= lower - 0.01;
|
|
||||||
}
|
|
||||||
if (lower != null && isMarketBucketBelow(bucket)) {
|
|
||||||
return compareTemp <= lower + 0.01;
|
|
||||||
}
|
|
||||||
const reference = bucket.temp ?? bucket.value ?? lower;
|
|
||||||
const numeric = reference != null ? Number(reference) : null;
|
|
||||||
if (numeric == null || !Number.isFinite(numeric)) return false;
|
|
||||||
const tolerance = bucketUnit === "F" ? 0.56 : 0.26;
|
|
||||||
return Math.abs(compareTemp - numeric) <= tolerance;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAggregatedModelProbabilityForMarketBucket(
|
|
||||||
probabilities: ProbabilityBucket[],
|
|
||||||
bucket: MarketTopBucket | null,
|
|
||||||
detail: Pick<CityDetail, "temp_symbol">,
|
|
||||||
) {
|
|
||||||
if (!bucket) return null;
|
|
||||||
|
|
||||||
let total = 0;
|
|
||||||
let matched = 0;
|
|
||||||
for (const probabilityBucket of probabilities) {
|
|
||||||
const temp = getBucketTemp(probabilityBucket);
|
|
||||||
if (!marketBucketContainsDisplayTemp(bucket, temp, detail)) continue;
|
|
||||||
const probability = Number(probabilityBucket.probability);
|
|
||||||
if (!Number.isFinite(probability)) continue;
|
|
||||||
total += probability;
|
|
||||||
matched += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return matched > 0 ? Math.max(0, Math.min(1, total)) : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
type ProbabilityDisplayRow = {
|
|
||||||
key: string;
|
|
||||||
label: string;
|
|
||||||
probability: number;
|
|
||||||
marketBucket?: MarketTopBucket | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
function formatMarketBucketDisplayLabel(
|
|
||||||
bucket: MarketTopBucket,
|
|
||||||
detail: Pick<CityDetail, "temp_symbol">,
|
|
||||||
) {
|
|
||||||
const label = String(bucket.label || "").trim();
|
|
||||||
if (label) {
|
|
||||||
const unit = getMarketBucketUnit(bucket);
|
|
||||||
let normalized = label.toUpperCase().replace(/\s+/g, "");
|
|
||||||
if (unit === "F" || isFahrenheitSymbol(detail.temp_symbol)) {
|
|
||||||
normalized = normalized
|
|
||||||
.replace(/ORHIGHER/g, "+")
|
|
||||||
.replace(/ORLOWER/g, "-")
|
|
||||||
.replace(/℃/g, "°F")
|
|
||||||
.replace(/°C/g, "°F")
|
|
||||||
.replace(/(?<=\d)F/g, "°F");
|
|
||||||
} else {
|
|
||||||
normalized = normalized
|
|
||||||
.replace(/ORHIGHER/g, "+")
|
|
||||||
.replace(/ORLOWER/g, "-")
|
|
||||||
.replace(/℃/g, "°C")
|
|
||||||
.replace(/°F/g, "°C")
|
|
||||||
.replace(/(?<=\d)C/g, "°C");
|
|
||||||
}
|
|
||||||
return normalized.replace(/\+/g, "+");
|
|
||||||
}
|
|
||||||
|
|
||||||
const unit =
|
|
||||||
getMarketBucketUnit(bucket) === "F" ||
|
|
||||||
isFahrenheitSymbol(detail.temp_symbol)
|
|
||||||
? "°F"
|
|
||||||
: "°C";
|
|
||||||
const lower = bucket.lower != null ? Number(bucket.lower) : null;
|
|
||||||
const upper = bucket.upper != null ? Number(bucket.upper) : null;
|
|
||||||
if (
|
|
||||||
lower != null &&
|
|
||||||
upper != null &&
|
|
||||||
Number.isFinite(lower) &&
|
|
||||||
Number.isFinite(upper)
|
|
||||||
) {
|
|
||||||
return `${lower}-${upper}${unit}`;
|
|
||||||
}
|
|
||||||
const value = bucket.value ?? bucket.temp ?? lower;
|
|
||||||
const numeric = value != null ? Number(value) : null;
|
|
||||||
if (numeric != null && Number.isFinite(numeric)) {
|
|
||||||
return isMarketBucketAbove(bucket)
|
|
||||||
? `${numeric}${unit}+`
|
|
||||||
: `${numeric}${unit}`;
|
|
||||||
}
|
|
||||||
return "--";
|
|
||||||
}
|
|
||||||
|
|
||||||
type ModelMetadata = NonNullable<
|
|
||||||
NonNullable<CityDetail["source_forecasts"]>["open_meteo_multi_model"]
|
|
||||||
>["model_metadata"];
|
|
||||||
|
|
||||||
|
|
||||||
function normalizeModelNameForVote(name: string) {
|
|
||||||
return String(name || "")
|
|
||||||
.trim()
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[\s_/-]/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
function getModelVoteFamily(name: string) {
|
|
||||||
const normalized = normalizeModelNameForVote(name);
|
|
||||||
if (["icon", "iconeu", "icond2"].includes(normalized)) return "dwd_icon";
|
|
||||||
if (["gem", "gdps", "rdps", "hrdps"].includes(normalized)) return "eccc_gem";
|
|
||||||
if (["ecmwfaifs", "aifs"].includes(normalized)) return "ecmwf_aifs";
|
|
||||||
if (normalized === "ecmwf") return "ecmwf_ifs";
|
|
||||||
return normalized || name;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getModelVotePriority(name: string) {
|
|
||||||
const normalized = normalizeModelNameForVote(name);
|
|
||||||
return (
|
|
||||||
{
|
|
||||||
icond2: 40,
|
|
||||||
iconeu: 30,
|
|
||||||
icon: 20,
|
|
||||||
hrdps: 40,
|
|
||||||
rdps: 35,
|
|
||||||
gdps: 30,
|
|
||||||
gem: 20,
|
|
||||||
ecmwfaifs: 30,
|
|
||||||
ecmwf: 30,
|
|
||||||
gfs: 30,
|
|
||||||
jma: 30,
|
|
||||||
mgm: 45,
|
|
||||||
nws: 45,
|
|
||||||
openmeteo: 15,
|
|
||||||
}[normalized] || 10
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRoundedModelVoteDistribution(
|
|
||||||
detail: CityDetail,
|
|
||||||
targetDate?: string | null,
|
|
||||||
) {
|
|
||||||
const view = getModelView(detail, targetDate);
|
|
||||||
const representatives = new Map<
|
|
||||||
string,
|
|
||||||
{ name: string; priority: number; value: number }
|
|
||||||
>();
|
|
||||||
|
|
||||||
Object.entries(view.models || {}).forEach(([name, rawValue]) => {
|
|
||||||
const normalized = normalizeModelNameForVote(name);
|
|
||||||
const value = Number(rawValue);
|
|
||||||
if (!Number.isFinite(value)) return;
|
|
||||||
const family = getModelVoteFamily(name);
|
|
||||||
const priority = getModelVotePriority(name);
|
|
||||||
const current = representatives.get(family);
|
|
||||||
if (!current || priority > current.priority) {
|
|
||||||
representatives.set(family, { name, priority, value });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const bucketMap = new Map<number, { count: number; models: string[] }>();
|
|
||||||
representatives.forEach(({ name, value }) => {
|
|
||||||
const rounded = Math.round(value);
|
|
||||||
const row = bucketMap.get(rounded) || { count: 0, models: [] };
|
|
||||||
row.count += 1;
|
|
||||||
row.models.push(name);
|
|
||||||
bucketMap.set(rounded, row);
|
|
||||||
});
|
|
||||||
|
|
||||||
const total = representatives.size;
|
|
||||||
const rows = Array.from(bucketMap.entries())
|
|
||||||
.map(([value, row]) => ({
|
|
||||||
count: row.count,
|
|
||||||
models: row.models,
|
|
||||||
percent: total > 0 ? row.count / total : 0,
|
|
||||||
value,
|
|
||||||
}))
|
|
||||||
.sort((a, b) => b.count - a.count || b.value - a.value);
|
|
||||||
|
|
||||||
return {
|
|
||||||
rows,
|
|
||||||
total,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeMarketProbability(value?: number | null) {
|
|
||||||
if (value == null) return null;
|
|
||||||
const numeric = Number(value);
|
|
||||||
if (!Number.isFinite(numeric)) return null;
|
|
||||||
if (numeric > 1) return Math.max(0, Math.min(1, numeric / 100));
|
|
||||||
return Math.max(0, Math.min(1, numeric));
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeSignedProbability(value?: number | null) {
|
|
||||||
if (value == null) return null;
|
|
||||||
const numeric = Number(value);
|
|
||||||
if (!Number.isFinite(numeric)) return null;
|
|
||||||
if (Math.abs(numeric) > 1) return numeric / 100;
|
|
||||||
return numeric;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatSignedPercent(value?: number | null, digits = 1) {
|
|
||||||
const normalized = normalizeSignedProbability(value);
|
|
||||||
if (normalized == null) return "--";
|
|
||||||
const percent = normalized * 100;
|
|
||||||
const sign = percent > 0 ? "+" : "";
|
|
||||||
return `${sign}${percent.toFixed(digits)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarketTopBuckets(scan?: MarketScan | null) {
|
|
||||||
const buckets = Array.isArray(scan?.top_buckets) ? scan.top_buckets : [];
|
|
||||||
if (!buckets.length) return [];
|
|
||||||
|
|
||||||
return buckets
|
|
||||||
.map((item) => ({
|
|
||||||
...item,
|
|
||||||
probability: normalizeMarketProbability(item.probability),
|
|
||||||
}))
|
|
||||||
.filter(
|
|
||||||
(item): item is MarketTopBucket & { probability: number } =>
|
|
||||||
item.probability != null,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarketAllBuckets(scan?: MarketScan | null) {
|
|
||||||
const buckets = Array.isArray(scan?.all_buckets)
|
|
||||||
? scan.all_buckets
|
|
||||||
: Array.isArray(scan?.top_buckets)
|
|
||||||
? scan.top_buckets
|
|
||||||
: [];
|
|
||||||
if (!buckets.length) return [];
|
|
||||||
|
|
||||||
return buckets
|
|
||||||
.map((item) => ({
|
|
||||||
...item,
|
|
||||||
probability: normalizeMarketProbability(item.probability),
|
|
||||||
}))
|
|
||||||
.filter(
|
|
||||||
(item): item is MarketTopBucket & { probability: number } =>
|
|
||||||
item.probability != null,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarketTopBucketKey(bucket: MarketTopBucket) {
|
|
||||||
if (bucket?.value != null) {
|
|
||||||
const valueNum = Number(bucket.value);
|
|
||||||
if (Number.isFinite(valueNum)) return `v:${valueNum.toFixed(2)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (bucket?.temp != null) {
|
|
||||||
const tempNum = Number(bucket.temp);
|
|
||||||
if (Number.isFinite(tempNum)) return `t:${tempNum.toFixed(2)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsed = parseTempFromText(bucket?.label);
|
|
||||||
if (parsed != null) return `l:${parsed.toFixed(2)}`;
|
|
||||||
|
|
||||||
return `s:${String(bucket?.slug || bucket?.question || bucket?.label || "")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function hasLgbmModel(detail: CityDetail, targetDate?: string | null) {
|
|
||||||
const view = getModelView(detail, targetDate);
|
|
||||||
return Object.keys(view.models || {}).some((name) =>
|
|
||||||
normalizeModelNameForVote(name).includes("lgbm"),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatProbabilityEngineLabel(
|
|
||||||
detail: CityDetail,
|
|
||||||
targetDate: string | null | undefined,
|
|
||||||
locale: string,
|
|
||||||
) {
|
|
||||||
const view = getProbabilityView(detail, targetDate);
|
|
||||||
if (hasLgbmModel(detail, targetDate)) {
|
|
||||||
return locale === "en-US" ? "LGBM-calibrated probability" : "LGBM 校准概率";
|
|
||||||
}
|
|
||||||
const engine = String(view.engine || "")
|
|
||||||
.trim()
|
|
||||||
.toLowerCase();
|
|
||||||
const calibrationMode = String(view.calibrationMode || "")
|
|
||||||
.trim()
|
|
||||||
.toLowerCase();
|
|
||||||
if (engine === "emos" || calibrationMode.includes("emos")) {
|
|
||||||
return locale === "en-US" ? "EMOS-calibrated probability" : "EMOS 校准概率";
|
|
||||||
}
|
|
||||||
return locale === "en-US" ? "Model probability" : "模型概率";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export function ProbabilityDistribution({
|
|
||||||
detail,
|
|
||||||
hideTitle = false,
|
|
||||||
targetDate,
|
|
||||||
marketScan,
|
|
||||||
}: {
|
|
||||||
detail: CityDetail;
|
|
||||||
hideTitle?: boolean;
|
|
||||||
targetDate?: string | null;
|
|
||||||
marketScan?: MarketScan | null;
|
|
||||||
}) {
|
|
||||||
const { locale, t } = useI18n();
|
|
||||||
const view = getProbabilityView(detail, targetDate);
|
|
||||||
const modelView = getModelView(detail, targetDate);
|
|
||||||
const marketYesPrice = getMarketYesPrice(marketScan);
|
|
||||||
const marketYesText = toPercent(marketYesPrice);
|
|
||||||
const isToday = !targetDate || targetDate === detail.local_date;
|
|
||||||
const probabilityEngineLabel = formatProbabilityEngineLabel(
|
|
||||||
detail,
|
|
||||||
targetDate,
|
|
||||||
locale,
|
|
||||||
);
|
|
||||||
const hasLgbmProbability = hasLgbmModel(detail, targetDate);
|
|
||||||
const modelVoteView = useMemo(
|
|
||||||
() => getRoundedModelVoteDistribution(detail, targetDate),
|
|
||||||
[detail, targetDate],
|
|
||||||
);
|
|
||||||
const modelVoteHint = modelVoteView.rows
|
|
||||||
.slice(0, 2)
|
|
||||||
.map(
|
|
||||||
(row) =>
|
|
||||||
`${row.value}${detail.temp_symbol} ${row.count}/${modelVoteView.total}`,
|
|
||||||
)
|
|
||||||
.join(" · ");
|
|
||||||
const marketTopBuckets = isToday ? getMarketTopBuckets(marketScan) : [];
|
|
||||||
const marketAllBuckets = isToday ? getMarketAllBuckets(marketScan) : [];
|
|
||||||
const sortedMarketTopBuckets = useMemo(() => {
|
|
||||||
const sorted = [...marketTopBuckets].sort(
|
|
||||||
(a, b) => Number(b.probability || 0) - Number(a.probability || 0),
|
|
||||||
);
|
|
||||||
const deduped: Array<MarketTopBucket & { probability: number }> = [];
|
|
||||||
const seenKeys = new Set<string>();
|
|
||||||
for (const row of sorted) {
|
|
||||||
const key = getMarketTopBucketKey(row);
|
|
||||||
if (seenKeys.has(key)) continue;
|
|
||||||
seenKeys.add(key);
|
|
||||||
deduped.push(row);
|
|
||||||
if (deduped.length >= 4) break;
|
|
||||||
}
|
|
||||||
return deduped;
|
|
||||||
}, [marketTopBuckets]);
|
|
||||||
const useMarketTopBuckets =
|
|
||||||
marketScan?.available && sortedMarketTopBuckets.length >= 2;
|
|
||||||
const topMarketBucketText = toPercent(sortedMarketTopBuckets[0]?.probability);
|
|
||||||
const topProbability = [...(view.probabilities || [])].sort(
|
|
||||||
(a, b) => Number(b.probability || 0) - Number(a.probability || 0),
|
|
||||||
)[0];
|
|
||||||
const topProbabilityText = toPercent(topProbability?.probability);
|
|
||||||
const topProbabilityLabel = topProbability
|
|
||||||
? formatBucketDisplayLabel(topProbability, detail)
|
|
||||||
: null;
|
|
||||||
const topProbabilityTemp = topProbability
|
|
||||||
? getBucketTemp(topProbability)
|
|
||||||
: null;
|
|
||||||
const probabilitiesForMarketContracts =
|
|
||||||
view.probabilitiesAll?.length > 0
|
|
||||||
? view.probabilitiesAll
|
|
||||||
: view.probabilities || [];
|
|
||||||
const marketContractRows = useMemo<ProbabilityDisplayRow[]>(() => {
|
|
||||||
if (!isToday || !marketScan?.available || marketAllBuckets.length === 0) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows: ProbabilityDisplayRow[] = [];
|
|
||||||
const seenKeys = new Set<string>();
|
|
||||||
for (const marketBucket of marketAllBuckets) {
|
|
||||||
const probability = getAggregatedModelProbabilityForMarketBucket(
|
|
||||||
probabilitiesForMarketContracts,
|
|
||||||
marketBucket,
|
|
||||||
detail,
|
|
||||||
);
|
|
||||||
|
|
||||||
const key =
|
|
||||||
marketBucket.slug ||
|
|
||||||
marketBucket.label ||
|
|
||||||
`${marketBucket.lower ?? marketBucket.value ?? marketBucket.temp}-${marketBucket.upper ?? ""}`;
|
|
||||||
if (seenKeys.has(key)) continue;
|
|
||||||
seenKeys.add(key);
|
|
||||||
rows.push({
|
|
||||||
key,
|
|
||||||
label: formatMarketBucketDisplayLabel(marketBucket, detail),
|
|
||||||
probability: probability ?? 0,
|
|
||||||
marketBucket,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return rows;
|
|
||||||
}, [
|
|
||||||
detail,
|
|
||||||
isToday,
|
|
||||||
marketAllBuckets,
|
|
||||||
marketScan?.available,
|
|
||||||
probabilitiesForMarketContracts,
|
|
||||||
]);
|
|
||||||
const modelProbabilityRows = useMemo<ProbabilityDisplayRow[]>(
|
|
||||||
() =>
|
|
||||||
(view.probabilities || []).slice(0, 6).map((bucket, index) => {
|
|
||||||
const bucketTemp = getBucketTemp(bucket);
|
|
||||||
return {
|
|
||||||
key: `${bucket.label || bucket.value || index}`,
|
|
||||||
label: formatBucketDisplayLabel(bucket, detail),
|
|
||||||
probability: Number(bucket.probability || 0),
|
|
||||||
marketBucket: findMarketBucketForDisplayTemp(
|
|
||||||
marketAllBuckets,
|
|
||||||
bucketTemp,
|
|
||||||
detail,
|
|
||||||
),
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
[detail, marketAllBuckets, view.probabilities],
|
|
||||||
);
|
|
||||||
const probabilityRows =
|
|
||||||
marketContractRows.length > 0
|
|
||||||
? marketContractRows.slice(0, 8)
|
|
||||||
: modelProbabilityRows;
|
|
||||||
const topContractRow =
|
|
||||||
marketContractRows.length > 0
|
|
||||||
? marketContractRows.reduce((best, row) =>
|
|
||||||
row.probability > best.probability ? row : best,
|
|
||||||
)
|
|
||||||
: null;
|
|
||||||
const displayTopLabel = topContractRow?.label || topProbabilityLabel || null;
|
|
||||||
const displayTopProbability =
|
|
||||||
topContractRow?.probability ??
|
|
||||||
(topProbability?.probability != null
|
|
||||||
? Number(topProbability.probability)
|
|
||||||
: null);
|
|
||||||
const displayTopProbabilityText = toPercent(displayTopProbability);
|
|
||||||
const displayUsesMarketBuckets = marketContractRows.length > 0;
|
|
||||||
const linkedMarketBucket = useMemo(() => {
|
|
||||||
if (topContractRow?.marketBucket) return topContractRow.marketBucket;
|
|
||||||
if (topProbabilityTemp == null) return null;
|
|
||||||
return findMarketBucketForDisplayTemp(
|
|
||||||
marketAllBuckets,
|
|
||||||
topProbabilityTemp,
|
|
||||||
detail,
|
|
||||||
);
|
|
||||||
}, [detail, marketAllBuckets, topContractRow, topProbabilityTemp]);
|
|
||||||
const priceAnalysis = marketScan?.price_analysis;
|
|
||||||
const yesPriceView = priceAnalysis?.yes;
|
|
||||||
const noPriceView = priceAnalysis?.no;
|
|
||||||
const linkedMarketAsk =
|
|
||||||
linkedMarketBucket?.yes_buy ??
|
|
||||||
linkedMarketBucket?.market_price ??
|
|
||||||
yesPriceView?.ask ??
|
|
||||||
null;
|
|
||||||
const linkedNoAsk = linkedMarketBucket?.no_buy ?? noPriceView?.ask ?? null;
|
|
||||||
const linkedContractLabel =
|
|
||||||
topContractRow?.label ||
|
|
||||||
(linkedMarketBucket
|
|
||||||
? formatMarketBucketDisplayLabel(linkedMarketBucket, detail)
|
|
||||||
: null) ||
|
|
||||||
topProbabilityLabel ||
|
|
||||||
null;
|
|
||||||
const aggregatedMarketProbability =
|
|
||||||
getAggregatedModelProbabilityForMarketBucket(
|
|
||||||
probabilitiesForMarketContracts,
|
|
||||||
linkedMarketBucket,
|
|
||||||
detail,
|
|
||||||
);
|
|
||||||
const linkedMarketProbability =
|
|
||||||
topContractRow?.probability ??
|
|
||||||
aggregatedMarketProbability ??
|
|
||||||
(topProbability?.probability != null
|
|
||||||
? Number(topProbability.probability)
|
|
||||||
: null);
|
|
||||||
const linkedMarketProbabilityText = toPercent(linkedMarketProbability);
|
|
||||||
const linkedMarketEdge =
|
|
||||||
linkedMarketProbability != null && linkedMarketAsk != null
|
|
||||||
? linkedMarketProbability - Number(linkedMarketAsk)
|
|
||||||
: null;
|
|
||||||
const linkedNoEdge =
|
|
||||||
linkedMarketProbability != null && linkedNoAsk != null
|
|
||||||
? 1 - linkedMarketProbability - Number(linkedNoAsk)
|
|
||||||
: null;
|
|
||||||
const linkedBestSide =
|
|
||||||
linkedMarketBucket && linkedNoEdge != null && linkedMarketEdge != null
|
|
||||||
? linkedNoEdge > linkedMarketEdge
|
|
||||||
? "no"
|
|
||||||
: "yes"
|
|
||||||
: null;
|
|
||||||
const linkedBestAsk = linkedBestSide === "no" ? linkedNoAsk : linkedMarketAsk;
|
|
||||||
const linkedBestEdge =
|
|
||||||
linkedBestSide === "no" ? linkedNoEdge : linkedMarketEdge;
|
|
||||||
const preferredPriceView = linkedMarketBucket
|
|
||||||
? {
|
|
||||||
ask: linkedBestAsk,
|
|
||||||
edge: linkedBestEdge,
|
|
||||||
}
|
|
||||||
: priceAnalysis?.best_side === "no"
|
|
||||||
? noPriceView
|
|
||||||
: yesPriceView;
|
|
||||||
const preferredSideLabel = linkedMarketBucket
|
|
||||||
? linkedBestSide === "no"
|
|
||||||
? "NO"
|
|
||||||
: "YES"
|
|
||||||
: priceAnalysis?.best_side === "no"
|
|
||||||
? locale === "en-US"
|
|
||||||
? "NO"
|
|
||||||
: "NO"
|
|
||||||
: locale === "en-US"
|
|
||||||
? "YES"
|
|
||||||
: "YES";
|
|
||||||
const yesDisplayPrice = linkedMarketBucket
|
|
||||||
? linkedMarketAsk
|
|
||||||
: yesPriceView?.ask;
|
|
||||||
const noDisplayPrice = linkedMarketBucket ? linkedNoAsk : noPriceView?.ask;
|
|
||||||
const yesDisplayEdge = linkedMarketBucket
|
|
||||||
? linkedMarketEdge
|
|
||||||
: yesPriceView?.edge;
|
|
||||||
const noDisplayEdge = linkedMarketBucket ? linkedNoEdge : noPriceView?.edge;
|
|
||||||
const hasPriceAnalysis =
|
|
||||||
isToday &&
|
|
||||||
(Boolean(priceAnalysis?.available) ||
|
|
||||||
Boolean(marketScan) ||
|
|
||||||
Boolean(topProbability));
|
|
||||||
const lockEdge = normalizeSignedProbability(priceAnalysis?.lock?.edge);
|
|
||||||
const lockAvailable = Boolean(
|
|
||||||
priceAnalysis?.lock?.available && lockEdge != null,
|
|
||||||
);
|
|
||||||
const quoteSource =
|
|
||||||
linkedMarketBucket?.quote_source ||
|
|
||||||
marketScan?.yes_token?.quote_source ||
|
|
||||||
marketScan?.no_token?.quote_source ||
|
|
||||||
null;
|
|
||||||
const quoteAgeMs =
|
|
||||||
linkedMarketBucket?.quote_age_ms ??
|
|
||||||
marketScan?.yes_token?.quote_age_ms ??
|
|
||||||
marketScan?.no_token?.quote_age_ms;
|
|
||||||
const quoteSourceLabel =
|
|
||||||
quoteSource === "polymarket_ws"
|
|
||||||
? locale === "en-US"
|
|
||||||
? `WS live${quoteAgeMs != null ? ` · ${Math.max(0, Math.round(Number(quoteAgeMs) / 1000))}s` : ""}`
|
|
||||||
: `WS 实时${quoteAgeMs != null ? ` · ${Math.max(0, Math.round(Number(quoteAgeMs) / 1000))}秒` : ""}`
|
|
||||||
: locale === "en-US"
|
|
||||||
? "CLOB fallback"
|
|
||||||
: "CLOB 兜底";
|
|
||||||
const actionableEdge = normalizeSignedProbability(preferredPriceView?.edge);
|
|
||||||
const linkedContractOverpriced =
|
|
||||||
Boolean(linkedMarketBucket) &&
|
|
||||||
linkedBestSide === "no" &&
|
|
||||||
linkedMarketProbability != null &&
|
|
||||||
linkedMarketAsk != null &&
|
|
||||||
linkedMarketEdge != null &&
|
|
||||||
linkedMarketEdge < 0 &&
|
|
||||||
linkedNoEdge != null &&
|
|
||||||
linkedNoEdge > 0;
|
|
||||||
const linkedContractOverpay =
|
|
||||||
linkedContractOverpriced &&
|
|
||||||
linkedMarketProbability != null &&
|
|
||||||
linkedMarketAsk != null
|
|
||||||
? Number(linkedMarketAsk) - linkedMarketProbability
|
|
||||||
: null;
|
|
||||||
const actionText = !marketScan
|
|
||||||
? locale === "en-US"
|
|
||||||
? "Waiting"
|
|
||||||
: "等待"
|
|
||||||
: !marketScan.available
|
|
||||||
? locale === "en-US"
|
|
||||||
? "No market"
|
|
||||||
: "无盘口"
|
|
||||||
: actionableEdge == null
|
|
||||||
? locale === "en-US"
|
|
||||||
? "No quote"
|
|
||||||
: "无报价"
|
|
||||||
: actionableEdge >= 0.02
|
|
||||||
? linkedContractOverpriced
|
|
||||||
? locale === "en-US"
|
|
||||||
? "Overpriced"
|
|
||||||
: "市场偏贵"
|
|
||||||
: locale === "en-US"
|
|
||||||
? `Watch ${preferredSideLabel}`
|
|
||||||
: `可关注 ${preferredSideLabel}`
|
|
||||||
: actionableEdge > 0
|
|
||||||
? linkedContractOverpriced
|
|
||||||
? locale === "en-US"
|
|
||||||
? "Slightly overpriced"
|
|
||||||
: "略偏贵"
|
|
||||||
: locale === "en-US"
|
|
||||||
? `Small ${preferredSideLabel}`
|
|
||||||
: `${preferredSideLabel} 优势较小`
|
|
||||||
: locale === "en-US"
|
|
||||||
? "No clear edge"
|
|
||||||
: "暂无优势";
|
|
||||||
const actionNote =
|
|
||||||
linkedContractOverpriced && linkedContractOverpay != null
|
|
||||||
? locale === "en-US"
|
|
||||||
? `YES above model by ${formatSignedPercent(linkedContractOverpay)}`
|
|
||||||
: `YES 高于模型 ${formatSignedPercent(linkedContractOverpay)}`
|
|
||||||
: actionableEdge != null && actionableEdge >= 0.02
|
|
||||||
? locale === "en-US"
|
|
||||||
? `${formatSignedPercent(actionableEdge)} vs ask`
|
|
||||||
: `相对买价 ${formatSignedPercent(actionableEdge)}`
|
|
||||||
: locale === "en-US"
|
|
||||||
? `${preferredSideLabel} ${formatSignedPercent(actionableEdge)}`
|
|
||||||
: `${preferredSideLabel} ${formatSignedPercent(actionableEdge)}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="prob-section">
|
|
||||||
{!hideTitle && <h3>{t("section.probability")}</h3>}
|
|
||||||
<div className="prob-bars">
|
|
||||||
<div className="prob-calibration-head">
|
|
||||||
<div>
|
|
||||||
<span className="prob-source-chip">{probabilityEngineLabel}</span>
|
|
||||||
<strong>
|
|
||||||
{displayTopLabel && displayTopProbabilityText
|
|
||||||
? locale === "en-US"
|
|
||||||
? displayUsesMarketBuckets
|
|
||||||
? `${displayTopLabel} is the top displayed contract bucket at ${displayTopProbabilityText}`
|
|
||||||
: `${displayTopLabel} is the top single bucket at ${displayTopProbabilityText}`
|
|
||||||
: displayUsesMarketBuckets
|
|
||||||
? `${displayTopLabel} 为当前显示分布最高，${displayTopProbabilityText}`
|
|
||||||
: `${displayTopLabel} 单点最高，${displayTopProbabilityText}`
|
|
||||||
: locale === "en-US"
|
|
||||||
? "Awaiting calibrated buckets"
|
|
||||||
: "等待校准概率桶"}
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
{hasLgbmProbability
|
|
||||||
? locale === "en-US"
|
|
||||||
? "LGBM is the learned intraday adjustment; raw model points below are only diagnostic."
|
|
||||||
: "LGBM 作为日内学习校准项；下方原始模型落点仅用于诊断。"
|
|
||||||
: locale === "en-US"
|
|
||||||
? "Using the calibrated probability distribution; raw model points below are not probabilities."
|
|
||||||
: "使用校准后的概率分布；下方原始模型落点不是概率。"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{marketScan?.available && (topMarketBucketText || marketYesText) && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
color: "var(--text-secondary)",
|
|
||||||
fontSize: "11px",
|
|
||||||
marginBottom: "6px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{useMarketTopBuckets
|
|
||||||
? locale === "en-US"
|
|
||||||
? `Market reference only: top traded bucket ${topMarketBucketText}`
|
|
||||||
: `市场仅作参考：最高交易温度桶 ${topMarketBucketText}`
|
|
||||||
: locale === "en-US"
|
|
||||||
? `Market reference only: this bucket ${marketYesText}`
|
|
||||||
: `市场仅作参考：该温度桶 ${marketYesText}`}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="prob-distribution-panel">
|
|
||||||
<div className="prob-distribution-head">
|
|
||||||
<span>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "Probability distribution"
|
|
||||||
: "概率分布"}
|
|
||||||
</span>
|
|
||||||
<em>
|
|
||||||
{marketContractRows.length > 0
|
|
||||||
? locale === "en-US"
|
|
||||||
? "market buckets are aggregated from single-degree probability buckets"
|
|
||||||
: "市场合约桶由单点概率分布聚合"
|
|
||||||
: locale === "en-US"
|
|
||||||
? "temperature probability buckets"
|
|
||||||
: "温度概率桶"}
|
|
||||||
</em>
|
|
||||||
</div>
|
|
||||||
{probabilityRows.length === 0 ? (
|
|
||||||
<EmptyState text={t("section.noProb")} />
|
|
||||||
) : (
|
|
||||||
probabilityRows.map((row, index) => {
|
|
||||||
const probability = Math.round(
|
|
||||||
Number(row.probability || 0) * 100,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={`${row.key || index}`} className="prob-row">
|
|
||||||
<div className="prob-label">{row.label}</div>
|
|
||||||
<div className="prob-bar-track">
|
|
||||||
<div
|
|
||||||
className={clsx("prob-bar-fill", `rank-${index}`)}
|
|
||||||
style={{ width: `${Math.max(probability, 8)}%` }}
|
|
||||||
>
|
|
||||||
{probability}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{hasPriceAnalysis && (
|
|
||||||
<div className="prob-price-card">
|
|
||||||
<div className="prob-price-head">
|
|
||||||
<span>
|
|
||||||
{locale === "en-US" ? "Win-rate reference" : "胜率参考"}
|
|
||||||
</span>
|
|
||||||
<strong>
|
|
||||||
{!marketScan
|
|
||||||
? locale === "en-US"
|
|
||||||
? "Waiting for market context"
|
|
||||||
: "等待市场参照"
|
|
||||||
: !marketScan.available
|
|
||||||
? locale === "en-US"
|
|
||||||
? "No matched active market"
|
|
||||||
: "未匹配到活跃盘口"
|
|
||||||
: locale === "en-US"
|
|
||||||
? `${linkedContractLabel || topProbabilityLabel || "Temperature bucket"} · model ${linkedMarketProbabilityText || topProbabilityText || "--"}`
|
|
||||||
: `${linkedContractLabel || topProbabilityLabel || "温度桶"} · 模型 ${linkedMarketProbabilityText || topProbabilityText || "--"}`}
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
<div className="prob-price-grid">
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
{locale === "en-US" ? "Bucket" : "温度桶"}
|
|
||||||
</span>
|
|
||||||
<strong>
|
|
||||||
{linkedContractLabel || topProbabilityLabel || "--"}
|
|
||||||
</strong>
|
|
||||||
<em>
|
|
||||||
{linkedMarketProbabilityText || topProbabilityText || "--"}
|
|
||||||
</em>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{locale === "en-US" ? "DEB" : "DEB"}</span>
|
|
||||||
<strong>
|
|
||||||
{modelView.deb != null && Number.isFinite(Number(modelView.deb))
|
|
||||||
? `${Number(modelView.deb).toFixed(1)}${detail.temp_symbol}`
|
|
||||||
: "--"}
|
|
||||||
</strong>
|
|
||||||
<em>{locale === "en-US" ? "final fused forecast" : "最终融合预测"}</em>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{locale === "en-US" ? "Model support" : "模型支持"}</span>
|
|
||||||
<strong>{modelVoteHint || "--"}</strong>
|
|
||||||
<em>{locale === "en-US" ? "raw model agreement" : "原始模型一致性"}</em>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>{locale === "en-US" ? "Market role" : "盘口角色"}</span>
|
|
||||||
<strong>{locale === "en-US" ? "Reference only" : "仅作参考"}</strong>
|
|
||||||
<em>{quoteSourceLabel}</em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "This card follows the same rule as AI forecast: DEB first, model agreement second, METAR conflict check before settlement."
|
|
||||||
: "该卡片与 AI 预测口径一致：先看 DEB，再看模型支持，最后检查 METAR 是否冲突。"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{modelVoteHint && (
|
|
||||||
<div className="prob-model-hint">
|
|
||||||
<span>
|
|
||||||
{locale === "en-US" ? "Raw model points" : "原始模型落点"}
|
|
||||||
</span>
|
|
||||||
<strong>{modelVoteHint}</strong>
|
|
||||||
<em>
|
|
||||||
{locale === "en-US"
|
|
||||||
? "diagnostic only; EMOS and contract rows use calibrated probabilities"
|
|
||||||
: "仅作诊断；EMOS 与合约行使用校准概率"}
|
|
||||||
</em>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,274 +0,0 @@
|
|||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import { formatTemperatureValue } from "@/lib/temperature-utils";
|
|
||||||
|
|
||||||
export function decodeRawMetarCloud(rawMetar?: string | null, locale = "zh-CN") {
|
|
||||||
const raw = String(rawMetar || "").toUpperCase();
|
|
||||||
const matches = Array.from(raw.matchAll(/\b(FEW|SCT|BKN|OVC)(\d{3})?\b/g));
|
|
||||||
if (!matches.length) return "";
|
|
||||||
const coverText: Record<string, { zh: string; en: string }> = {
|
|
||||||
FEW: { zh: "少云", en: "few" },
|
|
||||||
SCT: { zh: "散云", en: "scattered" },
|
|
||||||
BKN: { zh: "多云", en: "broken" },
|
|
||||||
OVC: { zh: "阴天", en: "overcast" },
|
|
||||||
};
|
|
||||||
return matches
|
|
||||||
.slice(0, 3)
|
|
||||||
.map((match) => {
|
|
||||||
const cover = coverText[match[1]] || { zh: match[1], en: match[1] };
|
|
||||||
const base = match[2] ? `${Number(match[2]) * 100}ft` : "";
|
|
||||||
return locale === "en-US"
|
|
||||||
? [cover.en, base].filter(Boolean).join(" ")
|
|
||||||
: [cover.zh, base].filter(Boolean).join(" ");
|
|
||||||
})
|
|
||||||
.join(locale === "en-US" ? ", " : "、");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function decodeRawMetarVisibility(rawMetar?: string | null) {
|
|
||||||
const raw = String(rawMetar || "").toUpperCase();
|
|
||||||
if (/\b9999\b/.test(raw)) return "10km+";
|
|
||||||
const meterMatch = raw.match(/\b(\d{4})\b/);
|
|
||||||
if (meterMatch) return `${Number(meterMatch[1]) / 1000}km`;
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function decodeMetarWeatherToken(token?: string | null, locale = "zh-CN") {
|
|
||||||
const raw = String(token || "").trim().toUpperCase();
|
|
||||||
if (!raw) return "";
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const intensity = raw.startsWith("-")
|
|
||||||
? isEn
|
|
||||||
? "light "
|
|
||||||
: "轻"
|
|
||||||
: raw.startsWith("+")
|
|
||||||
? isEn
|
|
||||||
? "heavy "
|
|
||||||
: "强"
|
|
||||||
: "";
|
|
||||||
const cleaned = raw.replace(/^[+-]/, "");
|
|
||||||
const descriptors: Record<string, { zh: string; en: string }> = {
|
|
||||||
VC: { zh: "附近", en: "nearby " },
|
|
||||||
SH: { zh: "阵性", en: "showery " },
|
|
||||||
TS: { zh: "雷暴性", en: "thunderstorm " },
|
|
||||||
FZ: { zh: "冻", en: "freezing " },
|
|
||||||
BL: { zh: "吹扬", en: "blowing " },
|
|
||||||
DR: { zh: "低吹", en: "drifting " },
|
|
||||||
MI: { zh: "浅层", en: "shallow " },
|
|
||||||
BC: { zh: "碎片状", en: "patches of " },
|
|
||||||
PR: { zh: "部分", en: "partial " },
|
|
||||||
};
|
|
||||||
const phenomena: Record<string, { zh: string; en: string }> = {
|
|
||||||
DZ: { zh: "毛毛雨", en: "drizzle" },
|
|
||||||
RA: { zh: "雨", en: "rain" },
|
|
||||||
SN: { zh: "雪", en: "snow" },
|
|
||||||
SG: { zh: "米雪", en: "snow grains" },
|
|
||||||
IC: { zh: "冰晶", en: "ice crystals" },
|
|
||||||
PL: { zh: "冰粒", en: "ice pellets" },
|
|
||||||
GR: { zh: "冰雹", en: "hail" },
|
|
||||||
GS: { zh: "小冰雹", en: "small hail" },
|
|
||||||
UP: { zh: "未知降水", en: "unknown precipitation" },
|
|
||||||
BR: { zh: "薄雾", en: "mist" },
|
|
||||||
FG: { zh: "雾", en: "fog" },
|
|
||||||
FU: { zh: "烟", en: "smoke" },
|
|
||||||
VA: { zh: "火山灰", en: "volcanic ash" },
|
|
||||||
DU: { zh: "浮尘", en: "dust" },
|
|
||||||
SA: { zh: "沙", en: "sand" },
|
|
||||||
HZ: { zh: "霾", en: "haze" },
|
|
||||||
PY: { zh: "喷雾", en: "spray" },
|
|
||||||
PO: { zh: "尘卷风", en: "dust whirls" },
|
|
||||||
SQ: { zh: "飑", en: "squall" },
|
|
||||||
FC: { zh: "漏斗云", en: "funnel cloud" },
|
|
||||||
SS: { zh: "沙暴", en: "sandstorm" },
|
|
||||||
DS: { zh: "尘暴", en: "duststorm" },
|
|
||||||
};
|
|
||||||
const descriptorText = Object.entries(descriptors)
|
|
||||||
.filter(([code]) => cleaned.includes(code))
|
|
||||||
.map(([, text]) => (isEn ? text.en : text.zh))
|
|
||||||
.join("");
|
|
||||||
const phenomenonText = Object.entries(phenomena)
|
|
||||||
.filter(([code]) => cleaned.includes(code))
|
|
||||||
.map(([, text]) => (isEn ? text.en : text.zh))
|
|
||||||
.join(isEn ? " / " : "、");
|
|
||||||
if (!phenomenonText) return "";
|
|
||||||
return `${intensity}${descriptorText}${phenomenonText}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function decodeRawMetarWeather(rawMetar?: string | null, locale = "zh-CN") {
|
|
||||||
const raw = String(rawMetar || "").toUpperCase();
|
|
||||||
const matches = Array.from(
|
|
||||||
raw.matchAll(/\b([+-]?(?:VC)?(?:MI|PR|BC|DR|BL|SH|TS|FZ)?(?:DZ|RA|SN|SG|IC|PL|GR|GS|UP|BR|FG|FU|VA|DU|SA|HZ|PY|PO|SQ|FC|SS|DS))\b/g),
|
|
||||||
);
|
|
||||||
return Array.from(
|
|
||||||
new Set(
|
|
||||||
matches
|
|
||||||
.map((match) => decodeMetarWeatherToken(match[1], locale))
|
|
||||||
.filter(Boolean),
|
|
||||||
),
|
|
||||||
).join(locale === "en-US" ? ", " : "、");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getAirportWeatherInputs(row: ScanOpportunityRow, detail: CityDetail | null) {
|
|
||||||
const context = row.metar_context || {};
|
|
||||||
const airport: Partial<NonNullable<CityDetail["airport_current"]>> =
|
|
||||||
detail?.airport_current || {};
|
|
||||||
const rawMetar = String(context.airport_raw_metar || airport.raw_metar || "").trim();
|
|
||||||
return {
|
|
||||||
cloud: String(context.airport_cloud_desc || airport.cloud_desc || "").trim(),
|
|
||||||
rawMetar,
|
|
||||||
visibility:
|
|
||||||
context.airport_visibility_mi != null && Number.isFinite(Number(context.airport_visibility_mi))
|
|
||||||
? Number(context.airport_visibility_mi)
|
|
||||||
: airport.visibility_mi != null && Number.isFinite(Number(airport.visibility_mi))
|
|
||||||
? Number(airport.visibility_mi)
|
|
||||||
: null,
|
|
||||||
weather: String(context.airport_wx_desc || airport.wx_desc || "").trim(),
|
|
||||||
windSpeed:
|
|
||||||
context.airport_wind_speed_kt != null && Number.isFinite(Number(context.airport_wind_speed_kt))
|
|
||||||
? Number(context.airport_wind_speed_kt)
|
|
||||||
: airport.wind_speed_kt != null && Number.isFinite(Number(airport.wind_speed_kt))
|
|
||||||
? Number(airport.wind_speed_kt)
|
|
||||||
: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatAirportWeatherRead(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
detail: CityDetail | null,
|
|
||||||
locale: string,
|
|
||||||
) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const inputs = getAirportWeatherInputs(row, detail);
|
|
||||||
const decodedCloud = inputs.cloud || decodeRawMetarCloud(inputs.rawMetar, locale);
|
|
||||||
const decodedWeather =
|
|
||||||
decodeMetarWeatherToken(inputs.weather, locale) ||
|
|
||||||
inputs.weather ||
|
|
||||||
decodeRawMetarWeather(inputs.rawMetar, locale);
|
|
||||||
const visibilityText =
|
|
||||||
inputs.visibility != null ? `${inputs.visibility.toFixed(1)}mi` : decodeRawMetarVisibility(inputs.rawMetar);
|
|
||||||
const cloudRaw = `${inputs.cloud} ${inputs.rawMetar}`.toUpperCase();
|
|
||||||
const weatherRaw = `${inputs.weather} ${inputs.rawMetar}`.toUpperCase();
|
|
||||||
const suppressors: string[] = [];
|
|
||||||
const supporters: string[] = [];
|
|
||||||
|
|
||||||
if (/(RA|DZ|SN|TS|SH|FG|BR|HZ|OVC|BKN)/.test(weatherRaw) || /(OVC|BKN)/.test(cloudRaw)) {
|
|
||||||
suppressors.push(
|
|
||||||
isEn
|
|
||||||
? "cloud, precipitation or restricted visibility can suppress solar heating"
|
|
||||||
: "云雨、薄雾或低能见度会压制太阳辐射升温",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (inputs.visibility != null && inputs.visibility < 6) {
|
|
||||||
suppressors.push(
|
|
||||||
isEn
|
|
||||||
? `visibility is only ${visibilityText}, so the airport path may warm more slowly`
|
|
||||||
: `能见度仅 ${visibilityText}，机场路径可能升温偏慢`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (/(FEW|SCT)/.test(cloudRaw) && !/(RA|DZ|SN|TS|FG|BR|HZ|OVC|BKN)/.test(weatherRaw)) {
|
|
||||||
supporters.push(
|
|
||||||
isEn
|
|
||||||
? "few or scattered clouds do not block the heating path materially"
|
|
||||||
: "少云或散云对日间升温压制不明显",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (inputs.windSpeed != null && inputs.windSpeed >= 15) {
|
|
||||||
suppressors.push(
|
|
||||||
isEn
|
|
||||||
? "stronger wind mixing can change the airport temperature path"
|
|
||||||
: "风速偏大，边界层混合可能改写机场温度路径",
|
|
||||||
);
|
|
||||||
} else if (inputs.windSpeed != null && inputs.windSpeed <= 5 && !suppressors.length) {
|
|
||||||
supporters.push(
|
|
||||||
isEn
|
|
||||||
? "light wind leaves the temperature path mainly driven by local sunshine"
|
|
||||||
: "风速较弱，温度路径更取决于本地日照",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const descriptors = [
|
|
||||||
decodedWeather ? (isEn ? `weather ${decodedWeather}` : `天气 ${decodedWeather}`) : null,
|
|
||||||
decodedCloud ? (isEn ? `cloud ${decodedCloud}` : `云况 ${decodedCloud}`) : null,
|
|
||||||
visibilityText ? (isEn ? `visibility ${visibilityText}` : `能见度 ${visibilityText}`) : null,
|
|
||||||
].filter(Boolean);
|
|
||||||
const read = suppressors[0] || supporters[0];
|
|
||||||
if (!descriptors.length && !read) return null;
|
|
||||||
const prefix = isEn ? "Airport weather read" : "机场气象解读";
|
|
||||||
const evidence = descriptors.length ? `${descriptors.join(isEn ? ", " : "，")}；` : "";
|
|
||||||
return `${prefix}：${evidence}${read || (isEn ? "no clear weather suppression signal yet" : "暂未看到明确天气压温信号")}。`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatAirportReportRead(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
detail: CityDetail | null,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const context = row.metar_context || {};
|
|
||||||
const airport: Partial<NonNullable<CityDetail["airport_current"]>> =
|
|
||||||
detail?.airport_current || {};
|
|
||||||
const station =
|
|
||||||
context.station ||
|
|
||||||
detail?.risk?.icao ||
|
|
||||||
airport.station_code ||
|
|
||||||
null;
|
|
||||||
const obsTime =
|
|
||||||
context.airport_obs_time ||
|
|
||||||
context.last_time ||
|
|
||||||
airport.obs_time ||
|
|
||||||
row.metar_status?.last_observation_time ||
|
|
||||||
null;
|
|
||||||
const temp =
|
|
||||||
context.airport_current_temp != null && Number.isFinite(Number(context.airport_current_temp))
|
|
||||||
? Number(context.airport_current_temp)
|
|
||||||
: airport.temp != null && Number.isFinite(Number(airport.temp))
|
|
||||||
? Number(airport.temp)
|
|
||||||
: null;
|
|
||||||
const windSpeed =
|
|
||||||
context.airport_wind_speed_kt != null && Number.isFinite(Number(context.airport_wind_speed_kt))
|
|
||||||
? Number(context.airport_wind_speed_kt)
|
|
||||||
: airport.wind_speed_kt != null && Number.isFinite(Number(airport.wind_speed_kt))
|
|
||||||
? Number(airport.wind_speed_kt)
|
|
||||||
: null;
|
|
||||||
const windDir =
|
|
||||||
context.airport_wind_dir != null && Number.isFinite(Number(context.airport_wind_dir))
|
|
||||||
? Number(context.airport_wind_dir)
|
|
||||||
: airport.wind_dir != null && Number.isFinite(Number(airport.wind_dir))
|
|
||||||
? Number(airport.wind_dir)
|
|
||||||
: null;
|
|
||||||
const cloud = String(context.airport_cloud_desc || airport.cloud_desc || "").trim();
|
|
||||||
const weather = String(context.airport_wx_desc || airport.wx_desc || "").trim();
|
|
||||||
const rawMetar = String(context.airport_raw_metar || airport.raw_metar || "").trim();
|
|
||||||
const decodedCloud = cloud || decodeRawMetarCloud(rawMetar, locale);
|
|
||||||
const decodedWeather =
|
|
||||||
decodeMetarWeatherToken(weather, locale) ||
|
|
||||||
weather ||
|
|
||||||
decodeRawMetarWeather(rawMetar, locale);
|
|
||||||
const visibility =
|
|
||||||
context.airport_visibility_mi != null && Number.isFinite(Number(context.airport_visibility_mi))
|
|
||||||
? Number(context.airport_visibility_mi)
|
|
||||||
: airport.visibility_mi != null && Number.isFinite(Number(airport.visibility_mi))
|
|
||||||
? Number(airport.visibility_mi)
|
|
||||||
: null;
|
|
||||||
const decodedVisibility = visibility != null ? `${visibility.toFixed(1)}mi` : decodeRawMetarVisibility(rawMetar);
|
|
||||||
|
|
||||||
const parts: string[] = [];
|
|
||||||
if (temp != null) parts.push(formatTemperatureValue(temp, tempSymbol, { digits: 1 }));
|
|
||||||
if (windSpeed != null) {
|
|
||||||
parts.push(
|
|
||||||
windDir != null
|
|
||||||
? isEn
|
|
||||||
? `wind ${Math.round(windDir)}°/${Math.round(windSpeed)}kt`
|
|
||||||
: `风 ${Math.round(windDir)}°/${Math.round(windSpeed)}kt`
|
|
||||||
: isEn
|
|
||||||
? `wind ${Math.round(windSpeed)}kt`
|
|
||||||
: `风 ${Math.round(windSpeed)}kt`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (decodedCloud) parts.push(isEn ? `cloud ${decodedCloud}` : `云况 ${decodedCloud}`);
|
|
||||||
if (decodedWeather) parts.push(isEn ? `weather ${decodedWeather}` : `天气 ${decodedWeather}`);
|
|
||||||
if (decodedVisibility) parts.push(isEn ? `visibility ${decodedVisibility}` : `能见度 ${decodedVisibility}`);
|
|
||||||
if (!parts.length) return null;
|
|
||||||
const prefix = isEn ? "Latest airport METAR read" : "最新机场报文解读";
|
|
||||||
const head = [station, obsTime].filter(Boolean).join(" ");
|
|
||||||
return `${prefix}${head ? ` ${head}` : ""}：${parts.join("，")}。`;
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
export function getLocalizedRowText(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
locale: string,
|
|
||||||
zh?: string | null,
|
|
||||||
en?: string | null,
|
|
||||||
) {
|
|
||||||
return locale === "en-US" ? en || zh || null : zh || en || null;
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
export function normalizeLookupKey(value?: string | null) {
|
|
||||||
return String(value || "")
|
|
||||||
.trim()
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[\s_-]+/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getDetailForRow(
|
|
||||||
row: Pick<ScanOpportunityRow, "city" | "city_display_name" | "display_name">,
|
|
||||||
cityDetailsByName?: Record<string, CityDetail>,
|
|
||||||
) {
|
|
||||||
if (!cityDetailsByName) return null;
|
|
||||||
const rowKeys = [row.city, row.city_display_name, row.display_name]
|
|
||||||
.map(normalizeLookupKey)
|
|
||||||
.filter(Boolean);
|
|
||||||
return (
|
|
||||||
Object.entries(cityDetailsByName).find(([name, detail]) => {
|
|
||||||
const detailKeys = [name, detail.name, detail.display_name]
|
|
||||||
.map(normalizeLookupKey)
|
|
||||||
.filter(Boolean);
|
|
||||||
return rowKeys.some((key) => detailKeys.includes(key));
|
|
||||||
})?.[1] || null
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getDetailViewDate(detail: CityDetail, row?: ScanOpportunityRow | null) {
|
|
||||||
if (!row) return detail.local_date;
|
|
||||||
const rawDate = row.selected_date || row.local_date || "";
|
|
||||||
const phase = String(row.window_phase || "").toLowerCase();
|
|
||||||
if ((phase === "tomorrow" || phase === "week_ahead") && rawDate) return rawDate;
|
|
||||||
if (!rawDate || rawDate === detail.local_date || row.local_date === detail.local_date) {
|
|
||||||
return detail.local_date;
|
|
||||||
}
|
|
||||||
return detail.local_date || rawDate;
|
|
||||||
}
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import {
|
|
||||||
formatTemperatureValue,
|
|
||||||
normalizeTemperatureLabel,
|
|
||||||
} from "@/lib/temperature-utils";
|
|
||||||
import { getTargetRange } from "./opportunity-target";
|
|
||||||
|
|
||||||
export function formatPercent(value?: number | null, signed = false) {
|
|
||||||
if (value == null || Number.isNaN(Number(value))) return "--";
|
|
||||||
const numeric = Number(value);
|
|
||||||
return `${signed && numeric >= 0 ? "+" : ""}${numeric.toFixed(1)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function normalizeProbability(value?: number | null) {
|
|
||||||
if (value == null) return null;
|
|
||||||
const numeric = Number(value);
|
|
||||||
if (!Number.isFinite(numeric)) return null;
|
|
||||||
return Math.max(0, Math.min(1, numeric > 1 ? numeric / 100 : numeric));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatWindowMinutes(value: number | null | undefined, locale: string) {
|
|
||||||
if (value == null || !Number.isFinite(Number(value))) return "--";
|
|
||||||
const minutes = Math.max(0, Math.round(Number(value)));
|
|
||||||
const hours = Math.floor(minutes / 60);
|
|
||||||
const remains = minutes % 60;
|
|
||||||
if (locale === "en-US") {
|
|
||||||
if (hours <= 0) return `${remains}m left`;
|
|
||||||
return `${hours}h ${remains}m left`;
|
|
||||||
}
|
|
||||||
if (hours <= 0) return `剩余 ${remains} 分钟`;
|
|
||||||
return `剩余 ${hours}h ${remains}m`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatMinuteSpan(value: number | null | undefined, locale: string) {
|
|
||||||
if (value == null || !Number.isFinite(Number(value))) return "--";
|
|
||||||
const minutes = Math.max(0, Math.round(Number(value)));
|
|
||||||
const hours = Math.floor(minutes / 60);
|
|
||||||
const remains = minutes % 60;
|
|
||||||
if (locale === "en-US") {
|
|
||||||
if (hours <= 0) return `${remains}m`;
|
|
||||||
return `${hours}h ${remains}m`;
|
|
||||||
}
|
|
||||||
if (hours <= 0) return `${remains} 分钟`;
|
|
||||||
return `${hours}h ${remains}m`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatAction(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
return formatTradeSide(row, locale, tempSymbol);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatQuoteCents(value?: number | null) {
|
|
||||||
if (value == null || Number.isNaN(Number(value))) return "--";
|
|
||||||
const cents = Number(value) * 100;
|
|
||||||
const text =
|
|
||||||
cents < 1 || cents >= 99 || Math.abs(cents - Math.round(cents)) >= 0.05
|
|
||||||
? cents.toFixed(1)
|
|
||||||
: Math.round(cents).toFixed(0);
|
|
||||||
return `${text.replace(/\.0$/, "")}¢`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatTradeSide(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const side = String(row.side || "").toLowerCase();
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const { lower, upper } = getTargetRange(row);
|
|
||||||
const threshold =
|
|
||||||
lower != null && upper == null
|
|
||||||
? formatTemperatureValue(lower, tempSymbol)
|
|
||||||
: upper != null && lower == null
|
|
||||||
? formatTemperatureValue(upper, tempSymbol)
|
|
||||||
: null;
|
|
||||||
if (threshold && lower != null && upper == null) {
|
|
||||||
if (side === "yes") return isEn ? `High reaches ${threshold}` : `最高温达到 ${threshold}`;
|
|
||||||
if (side === "no") return isEn ? `High stays below ${threshold}` : `最高温低于 ${threshold}`;
|
|
||||||
}
|
|
||||||
if (threshold && upper != null && lower == null) {
|
|
||||||
if (side === "yes") return isEn ? `High stays at/below ${threshold}` : `最高温不高于 ${threshold}`;
|
|
||||||
if (side === "no") return isEn ? `High exceeds ${threshold}` : `最高温高于 ${threshold}`;
|
|
||||||
}
|
|
||||||
if (lower != null && upper != null && Math.abs(lower - upper) > 0.01) {
|
|
||||||
const range = `${formatTemperatureValue(lower, tempSymbol)} ~ ${formatTemperatureValue(upper, tempSymbol)}`;
|
|
||||||
if (side === "yes") return isEn ? `High lands in ${range}` : `最高温落在 ${range}`;
|
|
||||||
if (side === "no") return isEn ? `High avoids ${range}` : `最高温不在 ${range}`;
|
|
||||||
}
|
|
||||||
const bucket = formatThreshold(row, tempSymbol);
|
|
||||||
if (side === "yes") return isEn ? `High lands on ${bucket}` : `最高温落在 ${bucket} 桶`;
|
|
||||||
if (side === "no") return isEn ? `High avoids ${bucket}` : `最高温不落在 ${bucket} 桶`;
|
|
||||||
if (row.action) {
|
|
||||||
return normalizeTemperatureLabel(
|
|
||||||
String(row.action).replace(String(row.target_label || ""), ""),
|
|
||||||
tempSymbol,
|
|
||||||
)
|
|
||||||
.replace(/\s+/g, " ")
|
|
||||||
.trim()
|
|
||||||
.toUpperCase();
|
|
||||||
}
|
|
||||||
return locale === "en-US" ? "WATCH" : "观察";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatThreshold(row: ScanOpportunityRow, tempSymbol?: string | null) {
|
|
||||||
const targetLabel = normalizeTemperatureLabel(row.target_label, tempSymbol);
|
|
||||||
if (targetLabel) return targetLabel;
|
|
||||||
if (row.target_lower != null && row.target_upper != null) {
|
|
||||||
return `${formatTemperatureValue(Number(row.target_lower), tempSymbol)} ~ ${formatTemperatureValue(Number(row.target_upper), tempSymbol)}`;
|
|
||||||
}
|
|
||||||
if (row.target_threshold != null) {
|
|
||||||
return formatTemperatureValue(Number(row.target_threshold), tempSymbol);
|
|
||||||
}
|
|
||||||
if (row.target_value != null) {
|
|
||||||
return formatTemperatureValue(Number(row.target_value), tempSymbol);
|
|
||||||
}
|
|
||||||
return "--";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatTemperatureDelta(value: number, tempSymbol?: string | null) {
|
|
||||||
return formatTemperatureValue(Math.abs(value), tempSymbol, { digits: 1 });
|
|
||||||
}
|
|
||||||
@@ -1,185 +0,0 @@
|
|||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import { getLocalizedCityName } from "@/lib/dashboard-home-copy";
|
|
||||||
import { getModelView, getProbabilityView } from "@/lib/model-utils";
|
|
||||||
import {
|
|
||||||
formatTemperatureValue,
|
|
||||||
normalizeTemperatureSymbol,
|
|
||||||
} from "@/lib/temperature-utils";
|
|
||||||
import { getWindowPhaseMeta, type PhaseMeta } from "./opportunity-window-phase";
|
|
||||||
import {
|
|
||||||
getDetailForRow,
|
|
||||||
getDetailViewDate,
|
|
||||||
} from "./opportunity-detail";
|
|
||||||
import {
|
|
||||||
formatThreshold,
|
|
||||||
normalizeProbability,
|
|
||||||
} from "./opportunity-format";
|
|
||||||
import { formatModelClusterRange } from "./opportunity-model-summary";
|
|
||||||
import {
|
|
||||||
extractNumbers,
|
|
||||||
getTargetRange,
|
|
||||||
normalizeBucketLabel,
|
|
||||||
} from "./opportunity-target";
|
|
||||||
|
|
||||||
export function getBucketText(bucket: { label?: string | null; bucket?: string | null; range?: string | null }) {
|
|
||||||
return [bucket.label, bucket.bucket, bucket.range]
|
|
||||||
.map((value) => String(value || "").trim())
|
|
||||||
.filter(Boolean);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function bucketMatchesRow(
|
|
||||||
bucket: {
|
|
||||||
label?: string | null;
|
|
||||||
bucket?: string | null;
|
|
||||||
range?: string | null;
|
|
||||||
value?: number | string | null;
|
|
||||||
},
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const targetLabel = normalizeBucketLabel(row.target_label, tempSymbol);
|
|
||||||
const bucketLabels = getBucketText(bucket).map((label) =>
|
|
||||||
normalizeBucketLabel(label, tempSymbol),
|
|
||||||
);
|
|
||||||
if (targetLabel && bucketLabels.some((label) => label === targetLabel)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawTargetLabel = String(row.target_label || "");
|
|
||||||
const targetNumbers = extractNumbers(rawTargetLabel);
|
|
||||||
const targetValue =
|
|
||||||
row.target_value ?? row.target_threshold ?? row.target_lower ?? row.target_upper ?? targetNumbers[0] ?? null;
|
|
||||||
if (targetValue == null || !Number.isFinite(Number(targetValue))) return false;
|
|
||||||
|
|
||||||
const bucketNumbers = [
|
|
||||||
...(bucket.value != null && Number.isFinite(Number(bucket.value))
|
|
||||||
? [Number(bucket.value)]
|
|
||||||
: []),
|
|
||||||
...getBucketText(bucket).flatMap(extractNumbers),
|
|
||||||
];
|
|
||||||
const matchesNumber = bucketNumbers.some(
|
|
||||||
(value) => Math.abs(Number(value) - Number(targetValue)) < 0.05,
|
|
||||||
);
|
|
||||||
if (!matchesNumber) return false;
|
|
||||||
|
|
||||||
const targetIsUpper =
|
|
||||||
/(\+|以上|or\s*above|above|greater|>=|≥)/i.test(rawTargetLabel) ||
|
|
||||||
(row.target_lower != null && row.target_upper == null);
|
|
||||||
const targetIsLower =
|
|
||||||
/(<=|≤|below|or\s*below|以下)/i.test(rawTargetLabel) ||
|
|
||||||
(row.target_upper != null && row.target_lower == null);
|
|
||||||
const bucketRaw = getBucketText(bucket).join(" ");
|
|
||||||
const bucketIsUpper = /(\+|以上|or\s*above|above|greater|>=|≥|inf|∞)/i.test(bucketRaw);
|
|
||||||
const bucketIsLower = /(<=|≤|below|or\s*below|以下|-inf|-∞)/i.test(bucketRaw);
|
|
||||||
|
|
||||||
if (targetIsUpper || bucketIsUpper) return targetIsUpper === bucketIsUpper;
|
|
||||||
if (targetIsLower || bucketIsLower) return targetIsLower === bucketIsLower;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getDetailBucketEventProbability(
|
|
||||||
detail: CityDetail | null,
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
if (!detail) return null;
|
|
||||||
const view = getProbabilityView(detail, getDetailViewDate(detail, row));
|
|
||||||
const buckets = Array.isArray(view.probabilitiesAll)
|
|
||||||
? view.probabilitiesAll
|
|
||||||
: [];
|
|
||||||
if (!buckets.length) return null;
|
|
||||||
const matched = buckets.find((bucket) => bucketMatchesRow(bucket, row, tempSymbol));
|
|
||||||
return normalizeProbability(matched?.probability);
|
|
||||||
}
|
|
||||||
|
|
||||||
export type OpportunityGroup = {
|
|
||||||
key: string;
|
|
||||||
cityName: string;
|
|
||||||
date?: string | null;
|
|
||||||
tempSymbol?: string | null;
|
|
||||||
debLabel: string;
|
|
||||||
peakLabel: string;
|
|
||||||
peakProbability?: number | null;
|
|
||||||
phaseMeta: PhaseMeta;
|
|
||||||
localTime?: string | null;
|
|
||||||
remainingMinutes?: number | null;
|
|
||||||
rows: ScanOpportunityRow[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export function buildOpportunityGroups(
|
|
||||||
rows: ScanOpportunityRow[],
|
|
||||||
locale: string,
|
|
||||||
cityDetailsByName?: Record<string, CityDetail>,
|
|
||||||
): OpportunityGroup[] {
|
|
||||||
const groups = new Map<string, OpportunityGroup>();
|
|
||||||
for (const row of rows) {
|
|
||||||
const tempSymbol = normalizeTemperatureSymbol(row.target_unit || row.temp_symbol);
|
|
||||||
const detail = getDetailForRow(row, cityDetailsByName);
|
|
||||||
const cityName = getLocalizedCityName(
|
|
||||||
row.city,
|
|
||||||
row.city_display_name || row.display_name || row.city,
|
|
||||||
locale,
|
|
||||||
);
|
|
||||||
const date = detail ? getDetailViewDate(detail, row) : row.selected_date || row.local_date || "";
|
|
||||||
const key = `${row.city || cityName}|${date}`;
|
|
||||||
const modelView = detail ? getModelView(detail, date) : null;
|
|
||||||
const debPrediction = modelView?.deb ?? row.deb_prediction ?? null;
|
|
||||||
const modelClusterLabel = formatModelClusterRange(
|
|
||||||
modelView?.models || row.model_cluster_sources,
|
|
||||||
tempSymbol,
|
|
||||||
);
|
|
||||||
const existing = groups.get(key);
|
|
||||||
if (!existing) {
|
|
||||||
groups.set(key, {
|
|
||||||
key,
|
|
||||||
cityName,
|
|
||||||
date,
|
|
||||||
tempSymbol,
|
|
||||||
debLabel:
|
|
||||||
debPrediction != null
|
|
||||||
? formatTemperatureValue(Number(debPrediction), tempSymbol, { digits: 1 })
|
|
||||||
: "--",
|
|
||||||
peakLabel: modelClusterLabel,
|
|
||||||
peakProbability: null,
|
|
||||||
phaseMeta: getWindowPhaseMeta(row, locale),
|
|
||||||
localTime: row.local_time,
|
|
||||||
remainingMinutes: row.remaining_window_minutes,
|
|
||||||
rows: [row],
|
|
||||||
});
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
existing.rows.push(row);
|
|
||||||
if (existing.peakLabel === "--" && modelClusterLabel !== "--") {
|
|
||||||
existing.peakLabel = modelClusterLabel;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return Array.from(groups.values()).map((group) => ({
|
|
||||||
...group,
|
|
||||||
rows: [...group.rows].sort(
|
|
||||||
(a, b) =>
|
|
||||||
Number(b.edge_percent ?? -Infinity) - Number(a.edge_percent ?? -Infinity) ||
|
|
||||||
Number(b.final_score ?? -Infinity) - Number(a.final_score ?? -Infinity),
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getBucketDisplayLabel(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const { lower, upper } = getTargetRange(row);
|
|
||||||
if (lower != null && upper == null) {
|
|
||||||
const value = formatTemperatureValue(lower, tempSymbol);
|
|
||||||
return isEn ? `${value} or higher` : `${value} 以上`;
|
|
||||||
}
|
|
||||||
if (upper != null && lower == null) {
|
|
||||||
const value = formatTemperatureValue(upper, tempSymbol);
|
|
||||||
return isEn ? `${value} or lower` : `${value} 以下`;
|
|
||||||
}
|
|
||||||
if (lower != null && upper != null && Math.abs(lower - upper) > 0.01) {
|
|
||||||
return `${formatTemperatureValue(lower, tempSymbol)} ~ ${formatTemperatureValue(upper, tempSymbol)}`;
|
|
||||||
}
|
|
||||||
return formatThreshold(row, tempSymbol);
|
|
||||||
}
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import { formatTemperatureValue } from "@/lib/temperature-utils";
|
|
||||||
|
|
||||||
export function formatModelSources(row: ScanOpportunityRow, tempSymbol?: string | null) {
|
|
||||||
const sources = row.model_cluster_sources || {};
|
|
||||||
return Object.entries(sources)
|
|
||||||
.filter(([, value]) => value != null && Number.isFinite(Number(value)))
|
|
||||||
.sort(([left], [right]) => left.localeCompare(right))
|
|
||||||
.map(([name, value]) => ({
|
|
||||||
name,
|
|
||||||
value: formatTemperatureValue(Number(value), tempSymbol, { digits: 1 }),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatModelClusterRange(
|
|
||||||
sources?: Record<string, number | null> | null,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const values = Object.values(sources || {})
|
|
||||||
.map((value) => Number(value))
|
|
||||||
.filter((value) => Number.isFinite(value));
|
|
||||||
if (!values.length) return "--";
|
|
||||||
const low = Math.min(...values);
|
|
||||||
const high = Math.max(...values);
|
|
||||||
if (Math.abs(low - high) < 0.05) {
|
|
||||||
return formatTemperatureValue(low, tempSymbol, { digits: 1 });
|
|
||||||
}
|
|
||||||
return `${formatTemperatureValue(low, tempSymbol, { digits: 1 })} ~ ${formatTemperatureValue(high, tempSymbol, { digits: 1 })}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getModelSourceSummary(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const sources = formatModelSources(row, tempSymbol);
|
|
||||||
if (!sources.length) {
|
|
||||||
return locale === "en-US"
|
|
||||||
? "model cluster pending"
|
|
||||||
: "模型集群暂未回传";
|
|
||||||
}
|
|
||||||
const shown = sources.map((item) => `${item.name} ${item.value}`).join(" / ");
|
|
||||||
return locale === "en-US"
|
|
||||||
? `all models: ${shown}`
|
|
||||||
: `全部模型：${shown}`;
|
|
||||||
}
|
|
||||||
@@ -1,328 +0,0 @@
|
|||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import {
|
|
||||||
formatTemperatureValue,
|
|
||||||
normalizeTemperatureSymbol,
|
|
||||||
} from "@/lib/temperature-utils";
|
|
||||||
import {
|
|
||||||
formatAirportReportRead,
|
|
||||||
formatAirportWeatherRead,
|
|
||||||
} from "./opportunity-airport-read";
|
|
||||||
import { formatMinuteSpan } from "./opportunity-format";
|
|
||||||
import { getTargetRange } from "./opportunity-target";
|
|
||||||
|
|
||||||
export type ObservationPoint = { time?: string; temp?: number | null };
|
|
||||||
|
|
||||||
export function normalizeObservationPoints(points?: ObservationPoint[] | null) {
|
|
||||||
if (!Array.isArray(points)) return [];
|
|
||||||
return points
|
|
||||||
.map((point) => ({
|
|
||||||
time: String(point?.time || "").trim(),
|
|
||||||
temp:
|
|
||||||
point?.temp != null && Number.isFinite(Number(point.temp))
|
|
||||||
? Number(point.temp)
|
|
||||||
: null,
|
|
||||||
}))
|
|
||||||
.filter((point): point is { time: string; temp: number } =>
|
|
||||||
Boolean(point.time && point.temp != null),
|
|
||||||
)
|
|
||||||
.sort((a, b) => getObservationSortMinutes(a.time) - getObservationSortMinutes(b.time));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getObservationSortMinutes(time: string) {
|
|
||||||
const parsed = Date.parse(time);
|
|
||||||
if (Number.isFinite(parsed)) {
|
|
||||||
const date = new Date(parsed);
|
|
||||||
return date.getUTCHours() * 60 + date.getUTCMinutes();
|
|
||||||
}
|
|
||||||
const match = time.match(/(\d{1,2}):(\d{2})/);
|
|
||||||
if (!match) return Number.MAX_SAFE_INTEGER;
|
|
||||||
return Number(match[1]) * 60 + Number(match[2]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatPeakWindowTiming(row: ScanOpportunityRow, locale: string) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const phase = String(row.window_phase || "").toLowerCase();
|
|
||||||
const label = String(row.peak_window_label || "").trim();
|
|
||||||
const untilStart =
|
|
||||||
row.minutes_until_peak_start != null && Number.isFinite(Number(row.minutes_until_peak_start))
|
|
||||||
? Number(row.minutes_until_peak_start)
|
|
||||||
: null;
|
|
||||||
const untilEnd =
|
|
||||||
row.minutes_until_peak_end != null && Number.isFinite(Number(row.minutes_until_peak_end))
|
|
||||||
? Number(row.minutes_until_peak_end)
|
|
||||||
: null;
|
|
||||||
const windowText = label ? `${isEn ? "peak window" : "峰值窗口"} ${label}` : isEn ? "peak window" : "峰值窗口";
|
|
||||||
if (phase === "active_peak" || (untilStart != null && untilStart <= 0 && untilEnd != null && untilEnd > 0)) {
|
|
||||||
return isEn ? `Currently inside the ${windowText}.` : `当前已进入${windowText}。`;
|
|
||||||
}
|
|
||||||
if (phase === "post_peak" || (untilEnd != null && untilEnd <= 0)) {
|
|
||||||
return isEn ? `The ${windowText} has passed.` : `${windowText}已结束。`;
|
|
||||||
}
|
|
||||||
if (untilStart != null && untilStart > 0) {
|
|
||||||
return isEn
|
|
||||||
? `${windowText} starts in ${formatMinuteSpan(untilStart, locale)}.`
|
|
||||||
: `${windowText}尚未开始，约 ${formatMinuteSpan(untilStart, locale)} 后进入。`;
|
|
||||||
}
|
|
||||||
if (phase === "early_today" || phase === "setup_today") {
|
|
||||||
return isEn ? `Before the ${windowText}; latest METAR is not final peak evidence yet.` : `尚处峰值前，最新 METAR 还不能当作最终峰值证据。`;
|
|
||||||
}
|
|
||||||
return label ? (isEn ? `Reference ${windowText}.` : `参考${windowText}。`) : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function firstNonEmptyPoints(...groups: Array<ReturnType<typeof normalizeObservationPoints>>) {
|
|
||||||
return groups.find((group) => group.length > 0) || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMetarObservationContext(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
detail: CityDetail | null,
|
|
||||||
) {
|
|
||||||
const context = row.metar_context || {};
|
|
||||||
const metarToday = firstNonEmptyPoints(
|
|
||||||
normalizeObservationPoints(context.today_obs),
|
|
||||||
normalizeObservationPoints(row.metar_today_obs),
|
|
||||||
);
|
|
||||||
const detailMetarToday = normalizeObservationPoints(detail?.metar_today_obs);
|
|
||||||
const metarRecent = firstNonEmptyPoints(
|
|
||||||
normalizeObservationPoints(context.recent_obs),
|
|
||||||
normalizeObservationPoints(row.metar_recent_obs),
|
|
||||||
);
|
|
||||||
const detailMetarRecent = normalizeObservationPoints(detail?.metar_recent_obs);
|
|
||||||
const settlementToday = firstNonEmptyPoints(
|
|
||||||
normalizeObservationPoints(context.settlement_today_obs),
|
|
||||||
normalizeObservationPoints(row.settlement_today_obs),
|
|
||||||
);
|
|
||||||
const detailSettlementToday = normalizeObservationPoints(detail?.settlement_today_obs);
|
|
||||||
|
|
||||||
const primaryPoints =
|
|
||||||
metarToday.length
|
|
||||||
? metarToday
|
|
||||||
: detailMetarToday.length
|
|
||||||
? detailMetarToday
|
|
||||||
: metarRecent.length
|
|
||||||
? metarRecent
|
|
||||||
: detailMetarRecent.length
|
|
||||||
? detailMetarRecent
|
|
||||||
: settlementToday.length
|
|
||||||
? settlementToday
|
|
||||||
: detailSettlementToday;
|
|
||||||
const trendPoints =
|
|
||||||
(metarRecent.length
|
|
||||||
? metarRecent
|
|
||||||
: detailMetarRecent.length
|
|
||||||
? detailMetarRecent
|
|
||||||
: primaryPoints.slice(-4));
|
|
||||||
const explicitLast = context.last_temp ?? row.metar_status?.last_temp ?? detail?.metar_status?.last_temp;
|
|
||||||
const lastPoint = primaryPoints[primaryPoints.length - 1] || null;
|
|
||||||
const maxPoint = primaryPoints.reduce<{ time: string; temp: number } | null>(
|
|
||||||
(best, point) => (!best || point.temp >= best.temp ? point : best),
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const trendFirst = trendPoints[0] || null;
|
|
||||||
const trendLast = trendPoints[trendPoints.length - 1] || null;
|
|
||||||
const trendDelta =
|
|
||||||
context.trend_delta != null && Number.isFinite(Number(context.trend_delta))
|
|
||||||
? Number(context.trend_delta)
|
|
||||||
: trendFirst && trendLast && trendPoints.length >= 2
|
|
||||||
? trendLast.temp - trendFirst.temp
|
|
||||||
: null;
|
|
||||||
const lastTemp =
|
|
||||||
explicitLast != null && Number.isFinite(Number(explicitLast))
|
|
||||||
? Number(explicitLast)
|
|
||||||
: lastPoint?.temp ?? null;
|
|
||||||
const maxTemp =
|
|
||||||
context.max_temp != null && Number.isFinite(Number(context.max_temp))
|
|
||||||
? Number(context.max_temp)
|
|
||||||
: maxPoint?.temp ?? null;
|
|
||||||
const stale =
|
|
||||||
context.stale_for_today === true ||
|
|
||||||
row.metar_status?.stale_for_today === true ||
|
|
||||||
detail?.metar_status?.stale_for_today === true;
|
|
||||||
|
|
||||||
return {
|
|
||||||
points: primaryPoints,
|
|
||||||
lastTime: String(context.last_time || lastPoint?.time || ""),
|
|
||||||
lastTemp,
|
|
||||||
maxTime: String(context.max_time || maxPoint?.time || ""),
|
|
||||||
maxTemp,
|
|
||||||
trendDelta,
|
|
||||||
stale,
|
|
||||||
station: context.station || detail?.risk?.icao || detail?.airport_current?.station_code || null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMetarGate(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
detail: CityDetail | null,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const side = String(row.side || "").toLowerCase();
|
|
||||||
const selectedDate = String(row.selected_date || "");
|
|
||||||
const localDate = String(row.local_date || detail?.local_date || "");
|
|
||||||
const futureContract = Boolean(selectedDate && localDate && selectedDate > localDate);
|
|
||||||
if (futureContract) return null;
|
|
||||||
|
|
||||||
const obs = getMetarObservationContext(row, detail);
|
|
||||||
const evidence: string[] = [];
|
|
||||||
const unit = normalizeTemperatureSymbol(tempSymbol);
|
|
||||||
const peakTiming = formatPeakWindowTiming(row, locale);
|
|
||||||
const airportReport = formatAirportReportRead(row, detail, locale, unit);
|
|
||||||
const airportWeatherRead = formatAirportWeatherRead(row, detail, locale);
|
|
||||||
if (peakTiming) evidence.push(peakTiming);
|
|
||||||
if (airportReport) evidence.push(airportReport);
|
|
||||||
if (airportWeatherRead) evidence.push(airportWeatherRead);
|
|
||||||
if (obs.lastTemp != null) {
|
|
||||||
evidence.push(
|
|
||||||
`${isEn ? "METAR latest" : "METAR 最新"} ${formatTemperatureValue(obs.lastTemp, unit, { digits: 1 })}${obs.lastTime ? ` @ ${obs.lastTime}` : ""}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (obs.maxTemp != null) {
|
|
||||||
evidence.push(
|
|
||||||
`${isEn ? "METAR max" : "METAR 最高"} ${formatTemperatureValue(obs.maxTemp, unit, { digits: 1 })}${obs.maxTime ? ` @ ${obs.maxTime}` : ""}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (obs.trendDelta != null) {
|
|
||||||
evidence.push(
|
|
||||||
`${isEn ? "Recent METAR delta" : "近端 METAR 变化"} ${formatTemperatureValue(obs.trendDelta, unit, { digits: 1 })}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (obs.station) evidence.push(`${isEn ? "Station" : "站点"} ${obs.station}`);
|
|
||||||
|
|
||||||
if (obs.stale || !obs.points.length || obs.maxTemp == null) {
|
|
||||||
return {
|
|
||||||
decision: "downgrade" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "AI has no same-day METAR confirmation yet, so this bucket remains forecast-only."
|
|
||||||
: "AI 还没有拿到同日 METAR 确认，该桶暂时只能作为预测映射。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const { lower, upper } = getTargetRange(row);
|
|
||||||
if (lower == null && upper == null) {
|
|
||||||
return {
|
|
||||||
decision: "watchlist" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "AI has METAR data, but the contract threshold cannot be mapped cleanly to a bucket."
|
|
||||||
: "AI 已读取 METAR，但该合约阈值无法稳定映射到温度桶。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const epsilon = String(unit).toUpperCase().includes("F") ? 0.7 : 0.4;
|
|
||||||
const trendDelta = obs.trendDelta;
|
|
||||||
const isNotRising = trendDelta != null && trendDelta <= epsilon;
|
|
||||||
const isFalling = trendDelta != null && trendDelta <= -epsilon;
|
|
||||||
const phase = String(row.window_phase || "").toLowerCase();
|
|
||||||
const remaining =
|
|
||||||
row.remaining_window_minutes != null && Number.isFinite(Number(row.remaining_window_minutes))
|
|
||||||
? Number(row.remaining_window_minutes)
|
|
||||||
: null;
|
|
||||||
const minutesUntilPeakStart =
|
|
||||||
row.minutes_until_peak_start != null && Number.isFinite(Number(row.minutes_until_peak_start))
|
|
||||||
? Number(row.minutes_until_peak_start)
|
|
||||||
: null;
|
|
||||||
const lateWindow =
|
|
||||||
phase === "active_peak" ||
|
|
||||||
phase === "post_peak" ||
|
|
||||||
(remaining != null && remaining <= 180);
|
|
||||||
const beforePeak =
|
|
||||||
phase === "early_today" ||
|
|
||||||
phase === "setup_today" ||
|
|
||||||
phase === "tomorrow" ||
|
|
||||||
phase === "week_ahead" ||
|
|
||||||
(minutesUntilPeakStart != null && minutesUntilPeakStart > 0);
|
|
||||||
const aboveUpper = upper != null && obs.maxTemp > upper + epsilon;
|
|
||||||
const belowLower = lower != null && obs.maxTemp < lower - epsilon;
|
|
||||||
const insideBucket =
|
|
||||||
(lower == null || obs.maxTemp >= lower - epsilon) &&
|
|
||||||
(upper == null || obs.maxTemp <= upper + epsilon);
|
|
||||||
|
|
||||||
if (side === "no") {
|
|
||||||
if (aboveUpper) {
|
|
||||||
return {
|
|
||||||
decision: "approve" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR max has already moved above this bucket, so AI marks the NO bucket as observation-supported."
|
|
||||||
: "METAR 实测最高已越过目标桶上沿，AI 判断 NO 桶有实测支撑。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (belowLower && (lateWindow || isFalling || isNotRising)) {
|
|
||||||
if (beforePeak && !lateWindow) {
|
|
||||||
return {
|
|
||||||
decision: "watchlist" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "The peak window has not arrived, so a still-low METAR path cannot confirm this NO bucket yet; AI keeps it on watch."
|
|
||||||
: "峰值窗口尚未到来，METAR 暂未触达不能直接确认 NO 桶，AI 先列观察。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
decision: "approve" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR max remains below this bucket and recent observations are not strengthening, so AI favors the NO bucket."
|
|
||||||
: "METAR 最高仍低于目标桶且近期走势不强，AI 倾向 NO 桶。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (insideBucket && lateWindow && isNotRising) {
|
|
||||||
return {
|
|
||||||
decision: "downgrade" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR max is still close to this bucket, so AI cannot treat the NO bucket as confirmed."
|
|
||||||
: "METAR 最高仍贴近目标桶，AI 不能把 NO 桶视为已确认。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (side === "yes") {
|
|
||||||
if (aboveUpper) {
|
|
||||||
return {
|
|
||||||
decision: "veto" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR max has already exceeded the bucket, so AI marks this YES bucket as outside the observed path."
|
|
||||||
: "METAR 实测最高已越过目标桶上沿，AI 判断该 YES 桶已偏离实测路径。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (belowLower && (lateWindow || isFalling || isNotRising)) {
|
|
||||||
if (beforePeak && !lateWindow) {
|
|
||||||
return {
|
|
||||||
decision: "watchlist" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "The peak window has not arrived, so METAR not reaching the bucket only means this bucket still needs peak-window confirmation."
|
|
||||||
: "峰值窗口尚未到来，METAR 未触达目标桶只能说明仍需等待峰值验证，AI 暂列观察。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
decision: "downgrade" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR max has not reached the bucket and recent observations are weak, so AI downgrades the YES bucket."
|
|
||||||
: "METAR 最高仍未触达目标桶且走势不强，AI 将 YES 桶降级观察。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (insideBucket) {
|
|
||||||
return {
|
|
||||||
decision: "approve" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR max is inside the target bucket, so AI sees observation support while monitoring an overshoot."
|
|
||||||
: "METAR 实测最高已落入目标桶，AI 认为 YES 桶有实测依据，但仍需防止继续升穿上沿。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
decision: "watchlist" as const,
|
|
||||||
reason: isEn
|
|
||||||
? "METAR does not give a clean final confirmation yet, so AI keeps this as watchlist."
|
|
||||||
: "METAR 还没有给出干净的最终确认，AI 暂列观察。",
|
|
||||||
evidence,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import { normalizeTemperatureLabel } from "@/lib/temperature-utils";
|
|
||||||
|
|
||||||
export function normalizeBucketLabel(value?: string | null, tempSymbol?: string | null) {
|
|
||||||
return normalizeTemperatureLabel(value, tempSymbol)
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/\s+/g, "")
|
|
||||||
.replace(/℃/g, "°c");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extractNumbers(value?: string | null) {
|
|
||||||
return Array.from(String(value || "").matchAll(/-?\d+(?:\.\d+)?/g)).map((match) =>
|
|
||||||
Number(match[0]),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTargetRange(row: ScanOpportunityRow) {
|
|
||||||
const lower =
|
|
||||||
row.target_lower != null && Number.isFinite(Number(row.target_lower))
|
|
||||||
? Number(row.target_lower)
|
|
||||||
: null;
|
|
||||||
const upper =
|
|
||||||
row.target_upper != null && Number.isFinite(Number(row.target_upper))
|
|
||||||
? Number(row.target_upper)
|
|
||||||
: null;
|
|
||||||
if (lower != null || upper != null) return { lower, upper };
|
|
||||||
|
|
||||||
const rawLabel = String(row.target_label || row.action || "");
|
|
||||||
const numbers = extractNumbers(rawLabel);
|
|
||||||
if (numbers.length >= 2) {
|
|
||||||
return { lower: Math.min(numbers[0], numbers[1]), upper: Math.max(numbers[0], numbers[1]) };
|
|
||||||
}
|
|
||||||
const value =
|
|
||||||
row.target_threshold ??
|
|
||||||
row.target_value ??
|
|
||||||
(numbers.length ? numbers[0] : null);
|
|
||||||
if (value == null || !Number.isFinite(Number(value))) {
|
|
||||||
return { lower: null, upper: null };
|
|
||||||
}
|
|
||||||
const numeric = Number(value);
|
|
||||||
if (/(\+|above|higher|or\s+higher|>=|≥|以上)/i.test(rawLabel)) {
|
|
||||||
return { lower: numeric, upper: null };
|
|
||||||
}
|
|
||||||
if (/(below|or\s+below|<=|≤|以下)/i.test(rawLabel)) {
|
|
||||||
return { lower: null, upper: numeric };
|
|
||||||
}
|
|
||||||
return { lower: numeric, upper: numeric };
|
|
||||||
}
|
|
||||||
@@ -1,250 +0,0 @@
|
|||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import { getTodayPaceView } from "@/lib/pace-utils";
|
|
||||||
import {
|
|
||||||
formatTemperatureValue,
|
|
||||||
normalizeTemperatureSymbol,
|
|
||||||
} from "@/lib/temperature-utils";
|
|
||||||
import {
|
|
||||||
formatAirportReportRead,
|
|
||||||
formatAirportWeatherRead,
|
|
||||||
} from "./opportunity-airport-read";
|
|
||||||
import { getLocalizedRowText } from "./opportunity-copy";
|
|
||||||
import { formatPeakWindowTiming } from "./opportunity-observation";
|
|
||||||
import { getModelSourceSummary } from "./opportunity-model-summary";
|
|
||||||
import { getTargetRange } from "./opportunity-target";
|
|
||||||
import type { OpportunityGroup } from "./opportunity-groups";
|
|
||||||
import type { V4CityForecast } from "./opportunity-v4-types";
|
|
||||||
|
|
||||||
export function getPaceDeviationRead(
|
|
||||||
detail: CityDetail | null,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
if (!detail) return null;
|
|
||||||
const paceView = getTodayPaceView(detail, locale === "en-US" ? "en-US" : "zh-CN");
|
|
||||||
if (!paceView) return null;
|
|
||||||
const unit = normalizeTemperatureSymbol(tempSymbol || detail.temp_symbol);
|
|
||||||
const observed = formatTemperatureValue(paceView.observedNow, unit, { digits: 1 });
|
|
||||||
const expected = formatTemperatureValue(paceView.expectedNow, unit, { digits: 1 });
|
|
||||||
const delta = `${paceView.delta > 0 ? "+" : ""}${paceView.delta.toFixed(1)}${unit}`;
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const toneText =
|
|
||||||
paceView.biasTone === "warm"
|
|
||||||
? isEn
|
|
||||||
? "running hotter"
|
|
||||||
: "偏热"
|
|
||||||
: paceView.biasTone === "cold"
|
|
||||||
? isEn
|
|
||||||
? "running cooler"
|
|
||||||
: "偏冷"
|
|
||||||
: isEn
|
|
||||||
? "tracking"
|
|
||||||
: "基本跟踪";
|
|
||||||
return {
|
|
||||||
adjustedHigh: paceView.paceAdjustedHigh,
|
|
||||||
delta: paceView.delta,
|
|
||||||
label: paceView.badge,
|
|
||||||
read: isEn
|
|
||||||
? `Observed path vs DEB curve: ${observed} now vs ${expected} expected, ${delta} (${toneText}).`
|
|
||||||
: `实测路径对比 DEB 曲线：当前 ${observed}，同刻预期 ${expected}，偏差 ${delta}（${toneText}）。`,
|
|
||||||
tone: paceView.biasTone,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPaceSignalLabel(forecast: V4CityForecast, locale: string, tempSymbol?: string | null) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
if (forecast.paceDelta == null || !Number.isFinite(Number(forecast.paceDelta))) {
|
|
||||||
return isEn ? "Path pending" : "路径待确认";
|
|
||||||
}
|
|
||||||
const unit = normalizeTemperatureSymbol(tempSymbol);
|
|
||||||
const delta = `${forecast.paceDelta > 0 ? "+" : ""}${Number(forecast.paceDelta).toFixed(1)}${unit}`;
|
|
||||||
if (forecast.paceTone === "warm") return isEn ? `Hot path ${delta}` : `实测偏热 ${delta}`;
|
|
||||||
if (forecast.paceTone === "cold") return isEn ? `Cool path ${delta}` : `实测偏冷 ${delta}`;
|
|
||||||
return isEn ? `On path ${delta}` : `路径跟踪 ${delta}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPaceDecisionTail(forecast: V4CityForecast, locale: string, tempSymbol?: string | null) {
|
|
||||||
if (forecast.paceDelta == null || !Number.isFinite(Number(forecast.paceDelta))) return "";
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const unit = normalizeTemperatureSymbol(tempSymbol);
|
|
||||||
const delta = `${forecast.paceDelta > 0 ? "+" : ""}${Number(forecast.paceDelta).toFixed(1)}${unit}`;
|
|
||||||
if (forecast.paceTone === "warm") {
|
|
||||||
return isEn
|
|
||||||
? ` Observations are running ${delta} above the DEB path, so upside boundaries need extra caution.`
|
|
||||||
: ` 实测比 DEB 路径偏高 ${delta}，上方阈值要额外谨慎。`;
|
|
||||||
}
|
|
||||||
if (forecast.paceTone === "cold") {
|
|
||||||
return isEn
|
|
||||||
? ` Observations are running ${delta} below the DEB path, which weakens upside breakout odds.`
|
|
||||||
: ` 实测比 DEB 路径偏低 ${delta}，上破概率需要下修。`;
|
|
||||||
}
|
|
||||||
return isEn
|
|
||||||
? " Observations are still tracking the DEB path."
|
|
||||||
: " 实测仍基本跟踪 DEB 路径。";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function median(values: number[]) {
|
|
||||||
if (!values.length) return null;
|
|
||||||
const sorted = [...values].sort((a, b) => a - b);
|
|
||||||
const mid = Math.floor(sorted.length / 2);
|
|
||||||
return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getV4CityForecast(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
group: OpportunityGroup,
|
|
||||||
detail: CityDetail | null,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
): V4CityForecast {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const aiPredicted =
|
|
||||||
row.ai_predicted_max != null && Number.isFinite(Number(row.ai_predicted_max))
|
|
||||||
? Number(row.ai_predicted_max)
|
|
||||||
: null;
|
|
||||||
const aiLow =
|
|
||||||
row.ai_predicted_low != null && Number.isFinite(Number(row.ai_predicted_low))
|
|
||||||
? Number(row.ai_predicted_low)
|
|
||||||
: null;
|
|
||||||
const aiHigh =
|
|
||||||
row.ai_predicted_high != null && Number.isFinite(Number(row.ai_predicted_high))
|
|
||||||
? Number(row.ai_predicted_high)
|
|
||||||
: null;
|
|
||||||
const modelValues = Object.values(row.model_cluster_sources || {})
|
|
||||||
.map((value) => Number(value))
|
|
||||||
.filter((value) => Number.isFinite(value));
|
|
||||||
const fallbackPredicted =
|
|
||||||
aiPredicted ??
|
|
||||||
(row.deb_prediction != null && Number.isFinite(Number(row.deb_prediction))
|
|
||||||
? Number(row.deb_prediction)
|
|
||||||
: median(modelValues));
|
|
||||||
const fallbackLow = aiLow ?? (modelValues.length ? Math.min(...modelValues) : fallbackPredicted);
|
|
||||||
const fallbackHigh = aiHigh ?? (modelValues.length ? Math.max(...modelValues) : fallbackPredicted);
|
|
||||||
const peakWindow =
|
|
||||||
getLocalizedRowText(row, locale, row.ai_peak_window_zh, row.ai_peak_window_en) ||
|
|
||||||
formatPeakWindowTiming(row, locale);
|
|
||||||
const airportRead =
|
|
||||||
getLocalizedRowText(
|
|
||||||
row,
|
|
||||||
locale,
|
|
||||||
row.ai_airport_metar_read_zh,
|
|
||||||
row.ai_airport_metar_read_en,
|
|
||||||
) || formatAirportReportRead(row, detail, locale, tempSymbol);
|
|
||||||
const weatherRead = formatAirportWeatherRead(row, detail, locale);
|
|
||||||
const paceRead = getPaceDeviationRead(detail, locale, tempSymbol);
|
|
||||||
const modelNote =
|
|
||||||
row.ai_city_model_cluster_note ||
|
|
||||||
row.ai_model_cluster_note ||
|
|
||||||
getModelSourceSummary(row, locale, tempSymbol);
|
|
||||||
const reason =
|
|
||||||
getLocalizedRowText(row, locale, row.ai_forecast_reason_zh, row.ai_forecast_reason_en) ||
|
|
||||||
getLocalizedRowText(row, locale, row.ai_city_thesis_zh, row.ai_city_thesis_en) ||
|
|
||||||
(fallbackPredicted != null
|
|
||||||
? isEn
|
|
||||||
? `${group.cityName} final high is centered near ${formatTemperatureValue(fallbackPredicted, tempSymbol, { digits: 1 })}; market temperature buckets are only mapped against that forecast range.`
|
|
||||||
: `${group.cityName} 最终最高温先以 ${formatTemperatureValue(fallbackPredicted, tempSymbol, { digits: 1 })} 附近为中枢，市场温度桶只用于对照 AI 预测区间。`
|
|
||||||
: null);
|
|
||||||
return {
|
|
||||||
predicted: fallbackPredicted,
|
|
||||||
low: fallbackLow,
|
|
||||||
high: fallbackHigh,
|
|
||||||
confidence: row.ai_forecast_confidence || row.ai_city_confidence,
|
|
||||||
peakWindow,
|
|
||||||
airportRead,
|
|
||||||
weatherRead,
|
|
||||||
paceRead: paceRead?.read || null,
|
|
||||||
paceTone: paceRead?.tone || null,
|
|
||||||
paceDelta: paceRead?.delta ?? null,
|
|
||||||
paceAdjustedHigh: paceRead?.adjustedHigh ?? null,
|
|
||||||
reason,
|
|
||||||
modelNote,
|
|
||||||
source: aiPredicted != null ? "ai" : "fallback",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getForecastRangeLabel(forecast: V4CityForecast, tempSymbol?: string | null) {
|
|
||||||
if (forecast.low == null && forecast.high == null) return "--";
|
|
||||||
if (forecast.low != null && forecast.high != null) {
|
|
||||||
if (Math.abs(forecast.low - forecast.high) < 0.05) {
|
|
||||||
return formatTemperatureValue(forecast.low, tempSymbol, { digits: 1 });
|
|
||||||
}
|
|
||||||
return `${formatTemperatureValue(forecast.low, tempSymbol, { digits: 1 })} ~ ${formatTemperatureValue(forecast.high, tempSymbol, { digits: 1 })}`;
|
|
||||||
}
|
|
||||||
if (forecast.low != null) return `>= ${formatTemperatureValue(forecast.low, tempSymbol, { digits: 1 })}`;
|
|
||||||
return `<= ${formatTemperatureValue(Number(forecast.high), tempSymbol, { digits: 1 })}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getForecastContractFit(
|
|
||||||
row: ScanOpportunityRow,
|
|
||||||
forecast: V4CityForecast,
|
|
||||||
locale: string,
|
|
||||||
tempSymbol?: string | null,
|
|
||||||
) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const explicitMatch = String(row.ai_forecast_match || "").toLowerCase();
|
|
||||||
const explicitReason = getLocalizedRowText(
|
|
||||||
row,
|
|
||||||
locale,
|
|
||||||
row.ai_forecast_match_reason_zh,
|
|
||||||
row.ai_forecast_match_reason_en,
|
|
||||||
);
|
|
||||||
if (explicitMatch && explicitReason) {
|
|
||||||
return {
|
|
||||||
label:
|
|
||||||
explicitMatch === "core"
|
|
||||||
? isEn ? "Core bucket" : "核心桶"
|
|
||||||
: explicitMatch === "outside"
|
|
||||||
? isEn ? "Outside forecast" : "预测区间外"
|
|
||||||
: explicitMatch === "edge"
|
|
||||||
? isEn ? "Boundary bucket" : "边界桶"
|
|
||||||
: isEn ? "Watch" : "观察",
|
|
||||||
tone: explicitMatch === "core" ? "approve" : explicitMatch === "outside" ? "veto" : "watchlist",
|
|
||||||
reason: explicitReason,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const { lower, upper } = getTargetRange(row);
|
|
||||||
const predicted = forecast.predicted;
|
|
||||||
if (predicted == null || (lower == null && upper == null)) {
|
|
||||||
return {
|
|
||||||
label: isEn ? "Await forecast" : "等待预测",
|
|
||||||
tone: "watchlist",
|
|
||||||
reason: isEn ? "AI has no stable max-temperature center yet." : "AI 还没有稳定的最高温中枢。",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const unit = normalizeTemperatureSymbol(tempSymbol);
|
|
||||||
const tolerance = String(unit).toUpperCase().includes("F") ? 1.0 : 0.5;
|
|
||||||
const inside =
|
|
||||||
(lower == null || predicted >= lower - tolerance) &&
|
|
||||||
(upper == null || predicted <= upper + tolerance);
|
|
||||||
const rangeOverlaps =
|
|
||||||
forecast.low != null &&
|
|
||||||
forecast.high != null &&
|
|
||||||
(lower == null || forecast.high >= lower - tolerance) &&
|
|
||||||
(upper == null || forecast.low <= upper + tolerance);
|
|
||||||
if (inside) {
|
|
||||||
return {
|
|
||||||
label: isEn ? "Core bucket" : "核心桶",
|
|
||||||
tone: "approve",
|
|
||||||
reason: isEn
|
|
||||||
? `AI max-temperature center ${formatTemperatureValue(predicted, unit, { digits: 1 })} sits inside this bucket.`
|
|
||||||
: `AI 最高温中枢 ${formatTemperatureValue(predicted, unit, { digits: 1 })} 落在这个温度桶内。`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (rangeOverlaps) {
|
|
||||||
return {
|
|
||||||
label: isEn ? "Boundary bucket" : "边界桶",
|
|
||||||
tone: "watchlist",
|
|
||||||
reason: isEn
|
|
||||||
? `This bucket touches the AI interval ${getForecastRangeLabel(forecast, unit)}, but is not the center.`
|
|
||||||
: `该桶触及 AI 区间 ${getForecastRangeLabel(forecast, unit)}，但不是预测中枢。`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
label: isEn ? "Outside forecast" : "预测区间外",
|
|
||||||
tone: "veto",
|
|
||||||
reason: isEn
|
|
||||||
? `This bucket is outside the AI max-temperature interval ${getForecastRangeLabel(forecast, unit)}.`
|
|
||||||
: `该桶位于 AI 最高温区间 ${getForecastRangeLabel(forecast, unit)} 之外。`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
export type V4TradeDecision = {
|
|
||||||
decision: "approve" | "downgrade" | "veto" | "watchlist";
|
|
||||||
label: string;
|
|
||||||
tone: "approve" | "downgrade" | "veto" | "watchlist";
|
|
||||||
reason: string;
|
|
||||||
metarSummary?: string | null;
|
|
||||||
airportReport?: string | null;
|
|
||||||
metarEvidence: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export type V4CityForecast = {
|
|
||||||
predicted: number | null;
|
|
||||||
low: number | null;
|
|
||||||
high: number | null;
|
|
||||||
confidence?: string | null;
|
|
||||||
peakWindow?: string | null;
|
|
||||||
airportRead?: string | null;
|
|
||||||
weatherRead?: string | null;
|
|
||||||
paceRead?: string | null;
|
|
||||||
paceTone?: "warm" | "cold" | "neutral" | string | null;
|
|
||||||
paceDelta?: number | null;
|
|
||||||
paceAdjustedHigh?: number | null;
|
|
||||||
reason?: string | null;
|
|
||||||
modelNote?: string | null;
|
|
||||||
source: "ai" | "fallback";
|
|
||||||
};
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
export type PhaseMeta = {
|
|
||||||
label: string;
|
|
||||||
tone: "green" | "amber" | "blue" | "red";
|
|
||||||
};
|
|
||||||
|
|
||||||
export function getWindowPhaseMeta(
|
|
||||||
row: Pick<ScanOpportunityRow, "window_phase" | "trend_alignment">,
|
|
||||||
locale: string,
|
|
||||||
): PhaseMeta {
|
|
||||||
const mode = String(row.window_phase || "").toLowerCase();
|
|
||||||
if (mode === "city_snapshot") {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "City Snapshot" : "城市概况",
|
|
||||||
tone: "blue",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mode === "active_peak") {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Peak Window" : "峰值窗口",
|
|
||||||
tone: "red",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mode === "setup_today") {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Touch Play" : "触达博弈",
|
|
||||||
tone: "red",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mode === "early_today") {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Early Today" : "日内早段",
|
|
||||||
tone: "blue",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mode === "tomorrow" || mode === "week_ahead") {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Early" : "早期机会",
|
|
||||||
tone: "blue",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mode === "post_peak") {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Post Peak" : "峰后确认",
|
|
||||||
tone: "amber",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (row.trend_alignment) {
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Trend" : "趋势确认",
|
|
||||||
tone: "amber",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
label: locale === "en-US" ? "Tradable" : "可交易",
|
|
||||||
tone: "green",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -2,14 +2,9 @@
|
|||||||
Consolidates 20 CSS Modules that are always co-imported into
|
Consolidates 20 CSS Modules that are always co-imported into
|
||||||
a single className, keeping ScanTerminalDashboard.tsx lean. */
|
a single className, keeping ScanTerminalDashboard.tsx lean. */
|
||||||
|
|
||||||
|
/* Barrel: pre-combined scan-terminal root class name. */
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
import dashboardModalGuideStyles from "./DashboardModalGuide.module.css";
|
|
||||||
import dashboardShellStyles from "./DashboardShell.module.css";
|
|
||||||
import detailChromeStyles from "./DetailPanelChrome.module.css";
|
|
||||||
import detailContentStyles from "./DetailPanelContent.module.css";
|
|
||||||
import detailSectionsStyles from "./DetailPanelSections.module.css";
|
|
||||||
import modalChromeStyles from "./ModalChrome.module.css";
|
|
||||||
import scanTerminalStyles from "./ScanTerminal.module.css";
|
import scanTerminalStyles from "./ScanTerminal.module.css";
|
||||||
import scanTerminalBoardStyles from "./ScanTerminalBoard.module.css";
|
import scanTerminalBoardStyles from "./ScanTerminalBoard.module.css";
|
||||||
import scanTerminalCardStyles from "./ScanTerminalCard.module.css";
|
import scanTerminalCardStyles from "./ScanTerminalCard.module.css";
|
||||||
@@ -23,8 +18,6 @@ import scanTerminalContinentStyles from "./ScanTerminalContinent.module.css";
|
|||||||
import scanTerminalStateStyles from "./ScanTerminalState.module.css";
|
import scanTerminalStateStyles from "./ScanTerminalState.module.css";
|
||||||
|
|
||||||
export const scanRootClass = clsx(
|
export const scanRootClass = clsx(
|
||||||
dashboardShellStyles.root,
|
|
||||||
dashboardModalGuideStyles.root,
|
|
||||||
scanTerminalStyles.root,
|
scanTerminalStyles.root,
|
||||||
scanTerminalShellStyles.root,
|
scanTerminalShellStyles.root,
|
||||||
scanTerminalFiltersStyles.root,
|
scanTerminalFiltersStyles.root,
|
||||||
@@ -36,8 +29,4 @@ export const scanRootClass = clsx(
|
|||||||
scanTerminalCardStyles.root,
|
scanTerminalCardStyles.root,
|
||||||
scanTerminalContinentStyles.root,
|
scanTerminalContinentStyles.root,
|
||||||
scanTerminalMobileStyles.root,
|
scanTerminalMobileStyles.root,
|
||||||
detailChromeStyles.root,
|
|
||||||
detailContentStyles.root,
|
|
||||||
detailSectionsStyles.root,
|
|
||||||
modalChromeStyles.root,
|
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,567 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import clsx from "clsx";
|
|
||||||
import type { MouseEvent } from "react";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { AiCityTemperatureChart } from "@/components/dashboard/scan-terminal/AiCityTemperatureChart";
|
|
||||||
import { AiEvidencePanel } from "@/components/dashboard/scan-terminal/AiEvidencePanel";
|
|
||||||
import { CityCardHeader } from "@/components/dashboard/scan-terminal/CityCardHeader";
|
|
||||||
import { MobileDecisionCard } from "@/components/dashboard/scan-terminal/MobileDecisionCard";
|
|
||||||
import { ModelEvidencePanel } from "@/components/dashboard/scan-terminal/ModelEvidencePanel";
|
|
||||||
import { WeatherDecisionBand } from "@/components/dashboard/scan-terminal/WeatherDecisionBand";
|
|
||||||
import {
|
|
||||||
buildWeatherDecisionView,
|
|
||||||
resolveExpectedHighCandidate,
|
|
||||||
} from "@/components/dashboard/scan-terminal/city-card-decision-utils";
|
|
||||||
import { buildCityDecisionState } from "@/components/dashboard/scan-terminal/city-decision-state";
|
|
||||||
import {
|
|
||||||
getAiReadCopy,
|
|
||||||
getCityLoadingCopy,
|
|
||||||
} from "@/components/dashboard/scan-terminal/decision-copy";
|
|
||||||
import { getPeakWindowLabel, normalizeCityKey } from "@/components/dashboard/scan-terminal/decision-utils";
|
|
||||||
import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
|
|
||||||
import type { AiPinnedCity } from "@/components/dashboard/scan-terminal/types";
|
|
||||||
import {
|
|
||||||
useAiCityForecast,
|
|
||||||
} from "@/components/dashboard/scan-terminal/use-ai-city-card-data";
|
|
||||||
import { getDisplayAirportPrimary } from "@/lib/airport-observation-display";
|
|
||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import { getModelView } from "@/lib/model-utils";
|
|
||||||
import { getTodayPaceView } from "@/lib/pace-utils";
|
|
||||||
import { formatTemperatureValue } from "@/lib/temperature-utils";
|
|
||||||
|
|
||||||
function toFiniteDecisionNumber(value: unknown) {
|
|
||||||
if (value == null || value === "") return null;
|
|
||||||
const numeric = Number(value);
|
|
||||||
return Number.isFinite(numeric) ? numeric : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRowModelEntries(row: ScanOpportunityRow | null) {
|
|
||||||
const sources = row?.model_cluster_sources;
|
|
||||||
if (!sources || typeof sources !== "object") return [];
|
|
||||||
return Object.entries(sources)
|
|
||||||
.map(([name, value]) => [name, Number(value)] as const)
|
|
||||||
.filter(([, value]) => Number.isFinite(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
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 isHkoObservationCity(detail?: CityDetail | null) {
|
|
||||||
const source = String(
|
|
||||||
detail?.current?.settlement_source ||
|
|
||||||
detail?.settlement_station?.settlement_source ||
|
|
||||||
"",
|
|
||||||
)
|
|
||||||
.trim()
|
|
||||||
.toLowerCase();
|
|
||||||
return source === "hko";
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatFreshnessAge(value: unknown, isEn: boolean) {
|
|
||||||
const minutes = Number(value);
|
|
||||||
if (!Number.isFinite(minutes) || minutes < 0) return "";
|
|
||||||
if (minutes < 1) return isEn ? "just now" : "刚刚";
|
|
||||||
if (minutes < 60) {
|
|
||||||
const rounded = Math.max(1, Math.round(minutes));
|
|
||||||
return isEn ? `${rounded}m ago` : `${rounded} 分钟前`;
|
|
||||||
}
|
|
||||||
const hours = Math.floor(minutes / 60);
|
|
||||||
const remaining = Math.round(minutes % 60);
|
|
||||||
if (remaining <= 0) return isEn ? `${hours}h ago` : `${hours} 小时前`;
|
|
||||||
return isEn ? `${hours}h ${remaining}m ago` : `${hours} 小时 ${remaining} 分钟前`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatUpdateTime(value: unknown, locale: string) {
|
|
||||||
const epochMs = parseEpochMs(value);
|
|
||||||
if (epochMs == null) return "";
|
|
||||||
const date = new Date(epochMs);
|
|
||||||
const now = new Date();
|
|
||||||
const sameDay = date.toDateString() === now.toDateString();
|
|
||||||
const time = date.toLocaleTimeString(locale === "en-US" ? "en-US" : "zh-CN", {
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
});
|
|
||||||
if (locale === "en-US") {
|
|
||||||
const day = sameDay
|
|
||||||
? "today"
|
|
||||||
: date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
||||||
return `${day} ${time} updated`;
|
|
||||||
}
|
|
||||||
const day = sameDay
|
|
||||||
? "今日"
|
|
||||||
: date.toLocaleDateString("zh-CN", { month: "numeric", day: "numeric" });
|
|
||||||
return `${day} ${time} 更新`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildObservationFreshnessValue({
|
|
||||||
detail,
|
|
||||||
displayTime,
|
|
||||||
isEn,
|
|
||||||
isHkoObservation,
|
|
||||||
}: {
|
|
||||||
detail: CityDetail | null;
|
|
||||||
displayTime: string;
|
|
||||||
isEn: boolean;
|
|
||||||
isHkoObservation: boolean;
|
|
||||||
}) {
|
|
||||||
const stale = Boolean(
|
|
||||||
detail?.metar_status?.stale_for_today ||
|
|
||||||
detail?.airport_current?.stale_for_today ||
|
|
||||||
detail?.current?.observation_status === "stale",
|
|
||||||
);
|
|
||||||
if (stale) {
|
|
||||||
return isEn ? "stale; background only" : "已过旧，仅作背景参考";
|
|
||||||
}
|
|
||||||
const ageLabel = formatFreshnessAge(
|
|
||||||
isHkoObservation ? detail?.current?.obs_age_min : detail?.airport_current?.obs_age_min ?? detail?.current?.obs_age_min,
|
|
||||||
isEn,
|
|
||||||
);
|
|
||||||
if (ageLabel) return ageLabel;
|
|
||||||
if (displayTime) return displayTime;
|
|
||||||
return isEn ? "time pending" : "时间待确认";
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildModelFreshnessValue(detail: CityDetail | null, locale: string, isEn: boolean) {
|
|
||||||
return (
|
|
||||||
formatUpdateTime(detail?.updated_at, locale) ||
|
|
||||||
(isEn ? "latest run loaded" : "已加载最新模型")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AiPinnedCityCard({
|
|
||||||
item,
|
|
||||||
detail,
|
|
||||||
row,
|
|
||||||
locale,
|
|
||||||
collapsed,
|
|
||||||
removing,
|
|
||||||
onRefreshCityDetail,
|
|
||||||
onRemove,
|
|
||||||
onToggleCollapsed,
|
|
||||||
}: {
|
|
||||||
item: AiPinnedCity;
|
|
||||||
detail: CityDetail | null;
|
|
||||||
row: ScanOpportunityRow | null;
|
|
||||||
locale: string;
|
|
||||||
collapsed: boolean;
|
|
||||||
removing?: boolean;
|
|
||||||
onRefreshCityDetail: (cityName: string) => Promise<void>;
|
|
||||||
onRemove: () => void;
|
|
||||||
onToggleCollapsed: () => void;
|
|
||||||
}) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const displayName =
|
|
||||||
detail?.display_name ||
|
|
||||||
row?.city_display_name ||
|
|
||||||
row?.display_name ||
|
|
||||||
item.displayName ||
|
|
||||||
item.cityName;
|
|
||||||
const tempSymbol = detail?.temp_symbol || row?.temp_symbol || "°C";
|
|
||||||
const modelView = detail ? getModelView(detail, detail.local_date) : null;
|
|
||||||
const detailModelEntries = modelView
|
|
||||||
? Object.entries(modelView.models || {})
|
|
||||||
.map(([name, value]) => [name, Number(value)] as const)
|
|
||||||
.filter(([, value]) => Number.isFinite(value))
|
|
||||||
: [];
|
|
||||||
const modelEntries = detailModelEntries.length ? detailModelEntries : getRowModelEntries(row);
|
|
||||||
const modelValues = modelEntries.map(([, value]) => value);
|
|
||||||
const modelMin = modelValues.length ? Math.min(...modelValues) : null;
|
|
||||||
const modelMax = modelValues.length ? Math.max(...modelValues) : null;
|
|
||||||
const paceView = detail ? getTodayPaceView(detail, locale as "zh-CN" | "en-US") : null;
|
|
||||||
const peakWindow =
|
|
||||||
paceView?.peakWindowText ||
|
|
||||||
(row ? getPeakWindowLabel(row) : null) ||
|
|
||||||
"--";
|
|
||||||
const deb = detail?.deb?.prediction ?? row?.deb_prediction ?? null;
|
|
||||||
const isHkoObservation = isHkoObservationCity(detail);
|
|
||||||
const displayAirportPrimary = getDisplayAirportPrimary(detail);
|
|
||||||
const currentTemp =
|
|
||||||
(isHkoObservation
|
|
||||||
? detail?.current?.temp ?? row?.current_temp
|
|
||||||
: displayAirportPrimary?.temp ??
|
|
||||||
detail?.airport_current?.temp ??
|
|
||||||
detail?.current?.temp ??
|
|
||||||
row?.current_temp) ?? null;
|
|
||||||
const debNumber = toFiniteDecisionNumber(deb);
|
|
||||||
const currentTempNumber = toFiniteDecisionNumber(currentTemp);
|
|
||||||
const modelRange =
|
|
||||||
modelMin != null && modelMax != null
|
|
||||||
? `${formatTemperatureValue(modelMin, tempSymbol, { digits: 1 })} ~ ${formatTemperatureValue(modelMax, tempSymbol, { digits: 1 })}`
|
|
||||||
: "--";
|
|
||||||
const paceTone = paceView?.biasTone || "neutral";
|
|
||||||
const paceText =
|
|
||||||
paceView?.summary ||
|
|
||||||
(isEn
|
|
||||||
? "Waiting for intraday observations to compare against the DEB path."
|
|
||||||
: "等待更多日内实测，用来对照 DEB 预测路径。");
|
|
||||||
const report = isHkoObservation
|
|
||||||
? ""
|
|
||||||
: detail?.current?.raw_metar || detail?.airport_current?.raw_metar || "";
|
|
||||||
const observationSourceZh = isHkoObservation ? "香港天文台观测" : "METAR 实测";
|
|
||||||
const observationSourceEn = isHkoObservation ? "HKO observations" : "METAR observations";
|
|
||||||
const detailCityName = detail?.name || item.cityName;
|
|
||||||
const [refreshingDetail, setRefreshingDetail] = useState(false);
|
|
||||||
const { aiForecast, refreshAiForecast } = useAiCityForecast({
|
|
||||||
detail,
|
|
||||||
detailCityName,
|
|
||||||
enabled: Boolean(detail),
|
|
||||||
isEn,
|
|
||||||
locale,
|
|
||||||
report,
|
|
||||||
});
|
|
||||||
const isRefreshing = refreshingDetail || aiForecast.status === "loading";
|
|
||||||
const [isCompactCard, setIsCompactCard] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof window === "undefined" || !window.matchMedia) return;
|
|
||||||
const media = window.matchMedia("(max-width: 820px)");
|
|
||||||
const syncCompactMode = () => setIsCompactCard(media.matches);
|
|
||||||
syncCompactMode();
|
|
||||||
media.addEventListener("change", syncCompactMode);
|
|
||||||
return () => media.removeEventListener("change", syncCompactMode);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const aiCityForecast = aiForecast.payload?.city_forecast || null;
|
|
||||||
const localizedFinalJudgment =
|
|
||||||
(isEn ? aiCityForecast?.final_judgment_en : aiCityForecast?.final_judgment_zh) ||
|
|
||||||
(isEn ? aiCityForecast?.reasoning_en : aiCityForecast?.reasoning_zh) ||
|
|
||||||
"";
|
|
||||||
const localizedMetarRead =
|
|
||||||
(isEn ? aiCityForecast?.metar_read_en : aiCityForecast?.metar_read_zh) ||
|
|
||||||
"";
|
|
||||||
const localizedReasoning =
|
|
||||||
(isEn ? aiCityForecast?.reasoning_en : aiCityForecast?.reasoning_zh) ||
|
|
||||||
"";
|
|
||||||
const localizedModelNote =
|
|
||||||
(isEn
|
|
||||||
? aiCityForecast?.model_cluster_note_en
|
|
||||||
: aiCityForecast?.model_cluster_note_zh) || "";
|
|
||||||
const modelPreview = modelEntries
|
|
||||||
.slice(0, 4)
|
|
||||||
.map(([name, value]) => `${name} ${formatTemperatureValue(value, tempSymbol, { digits: 1 })}`)
|
|
||||||
.join(isEn ? " / " : " / ");
|
|
||||||
const localModelSupportNote = modelEntries.length
|
|
||||||
? isEn
|
|
||||||
? modelEntries.length <= 2
|
|
||||||
? `Model support is sparse: only ${modelEntries.length} sources are available${modelPreview ? ` (${modelPreview})` : ""}, so the read should lean more on DEB path and ${observationSourceEn}.`
|
|
||||||
: `Model support: ${modelEntries.length} sources cluster between ${modelRange}; ${modelPreview}.`
|
|
||||||
: modelEntries.length <= 2
|
|
||||||
? `多模型支撑偏少：当前只有 ${modelEntries.length} 个模型${modelPreview ? `（${modelPreview}）` : ""}，需要更重视 DEB 路径和${observationSourceZh}。`
|
|
||||||
: `多模型支撑：${modelEntries.length} 个模型集中在 ${modelRange}，代表模型为 ${modelPreview}。`
|
|
||||||
: isEn
|
|
||||||
? `Model support is unavailable, so this city must rely on DEB path and ${observationSourceEn}.`
|
|
||||||
: `暂无可用多模型支撑，需要主要参考 DEB 路径和${observationSourceZh}。`;
|
|
||||||
const aiPredictedMax =
|
|
||||||
aiForecast.status === "ready"
|
|
||||||
? toFiniteDecisionNumber(aiCityForecast?.predicted_max)
|
|
||||||
: null;
|
|
||||||
const aiRangeLow =
|
|
||||||
toFiniteDecisionNumber(aiCityForecast?.range_low) ??
|
|
||||||
toFiniteDecisionNumber(row?.ai_predicted_low) ??
|
|
||||||
modelMin;
|
|
||||||
const aiRangeHigh =
|
|
||||||
toFiniteDecisionNumber(aiCityForecast?.range_high) ??
|
|
||||||
toFiniteDecisionNumber(row?.ai_predicted_high) ??
|
|
||||||
modelMax;
|
|
||||||
const aiConfidence =
|
|
||||||
String(aiCityForecast?.confidence || row?.ai_forecast_confidence || "").trim() || null;
|
|
||||||
const decisionExpectedHighNumber = resolveExpectedHighCandidate({
|
|
||||||
aiPredictedMax,
|
|
||||||
currentTemp: currentTempNumber,
|
|
||||||
deb: debNumber,
|
|
||||||
modelMax,
|
|
||||||
modelMin,
|
|
||||||
paceAdjustedHigh: paceView?.paceAdjustedHigh ?? null,
|
|
||||||
});
|
|
||||||
const decisionView = buildWeatherDecisionView({
|
|
||||||
aiCityForecast,
|
|
||||||
currentTemp: currentTempNumber,
|
|
||||||
deb: debNumber,
|
|
||||||
isEn,
|
|
||||||
localModelSupportNote,
|
|
||||||
modelEntries,
|
|
||||||
modelMax,
|
|
||||||
modelMin,
|
|
||||||
paceTone,
|
|
||||||
paceView,
|
|
||||||
peakWindow,
|
|
||||||
tempSymbol,
|
|
||||||
});
|
|
||||||
const expectedHighText =
|
|
||||||
decisionExpectedHighNumber != null
|
|
||||||
? formatTemperatureValue(decisionExpectedHighNumber, tempSymbol, { digits: 1 })
|
|
||||||
: "--";
|
|
||||||
const debText =
|
|
||||||
debNumber != null
|
|
||||||
? formatTemperatureValue(debNumber, tempSymbol, { digits: 1 })
|
|
||||||
: "--";
|
|
||||||
const aiMeta = aiCityForecast?._polyweather_meta || null;
|
|
||||||
const guardReason = aiMeta?.deterministic_guard_reason || {};
|
|
||||||
const observationStale = Boolean(
|
|
||||||
detail?.metar_status?.stale_for_today ||
|
|
||||||
detail?.airport_current?.stale_for_today ||
|
|
||||||
detail?.current?.observation_status === "stale" ||
|
|
||||||
guardReason.observation_stale,
|
|
||||||
);
|
|
||||||
const observedHighBreak = Boolean(
|
|
||||||
guardReason.observed_high_break ||
|
|
||||||
(currentTempNumber != null &&
|
|
||||||
modelMax != null &&
|
|
||||||
currentTempNumber > modelMax + 0.2),
|
|
||||||
);
|
|
||||||
const observedLowBreak = Boolean(guardReason.observed_low_break);
|
|
||||||
const observedLowLag = Boolean(guardReason.observed_low_lag);
|
|
||||||
const peakHasPassed = Boolean(
|
|
||||||
guardReason.peak_has_passed ||
|
|
||||||
["past", "post_peak", "after_peak"].includes(
|
|
||||||
String((row as { window_phase?: string | null } | null)?.window_phase || "").toLowerCase(),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
const modelSpread = modelMax != null && modelMin != null ? modelMax - modelMin : null;
|
|
||||||
const modelHighlyConsistent =
|
|
||||||
modelEntries.length >= 4 && modelSpread != null && modelSpread <= 2;
|
|
||||||
const needsNextBulletin =
|
|
||||||
!observationStale &&
|
|
||||||
!observedHighBreak &&
|
|
||||||
!observedLowBreak &&
|
|
||||||
!peakHasPassed &&
|
|
||||||
(observedLowLag || paceTone === "neutral" || aiForecast.status === "loading");
|
|
||||||
const aiRuleEvidenceMode = Boolean(
|
|
||||||
aiForecast.status === "failed" ||
|
|
||||||
(aiForecast.status === "ready" && !aiCityForecast) ||
|
|
||||||
aiForecast.payload?.degraded ||
|
|
||||||
aiMeta?.fallback,
|
|
||||||
);
|
|
||||||
const aiReadCopy = getAiReadCopy({ isEn, isHkoObservation });
|
|
||||||
const aiReadInProgressText = aiReadCopy.inProgress;
|
|
||||||
const aiReadCompleteText = aiReadCopy.complete;
|
|
||||||
const aiRuleEvidenceText = aiReadCopy.ruleEvidence;
|
|
||||||
const decisionState = buildCityDecisionState({
|
|
||||||
aiCityForecast,
|
|
||||||
aiForecast,
|
|
||||||
aiRuleEvidenceMode,
|
|
||||||
isEn,
|
|
||||||
isHkoObservation,
|
|
||||||
modelHighlyConsistent,
|
|
||||||
needsNextBulletin,
|
|
||||||
observationStale,
|
|
||||||
observedHighBreak,
|
|
||||||
observedLowBreak,
|
|
||||||
observedLowLag,
|
|
||||||
peakHasPassed,
|
|
||||||
});
|
|
||||||
const dataFreshnessRows = [
|
|
||||||
{
|
|
||||||
label: isEn ? "Models" : "模型",
|
|
||||||
value: buildModelFreshnessValue(detail, locale, isEn),
|
|
||||||
tone: "fresh" as const,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const freshnessSeparator = isEn ? ": " : "：";
|
|
||||||
const localizedRisksRaw =
|
|
||||||
(isEn ? aiCityForecast?.risks_en : aiCityForecast?.risks_zh) || [];
|
|
||||||
const localizedRisks = Array.isArray(localizedRisksRaw)
|
|
||||||
? localizedRisksRaw
|
|
||||||
: localizedRisksRaw
|
|
||||||
? [String(localizedRisksRaw)]
|
|
||||||
: [];
|
|
||||||
const aiBullets = [
|
|
||||||
localizedMetarRead,
|
|
||||||
localizedReasoning !== localizedFinalJudgment ? localizedReasoning : "",
|
|
||||||
localizedModelNote || localModelSupportNote,
|
|
||||||
...localizedRisks,
|
|
||||||
].filter((line) => String(line || "").trim());
|
|
||||||
const fallbackAiReason =
|
|
||||||
(isEn ? aiForecast.payload?.reason_en : aiForecast.payload?.reason_zh) ||
|
|
||||||
aiForecast.payload?.reason ||
|
|
||||||
"";
|
|
||||||
const collapseId = `ai-city-body-${normalizeCityKey(item.cityName) || item.addedAt}`;
|
|
||||||
const loadingCopy = getCityLoadingCopy({ isEn, isHkoObservation });
|
|
||||||
const handleRefresh = (event: MouseEvent<HTMLButtonElement>) => {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
if (refreshingDetail) return;
|
|
||||||
setRefreshingDetail(true);
|
|
||||||
void onRefreshCityDetail(detailCityName)
|
|
||||||
.catch(() => {})
|
|
||||||
.finally(() => {
|
|
||||||
refreshAiForecast();
|
|
||||||
setRefreshingDetail(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const handleRemove = (event: MouseEvent<HTMLButtonElement>) => {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
onRemove();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<article
|
|
||||||
className={clsx(
|
|
||||||
"scan-ai-city-card",
|
|
||||||
isCompactCard && "scan-mobile-decision-card",
|
|
||||||
collapsed && !isCompactCard && "collapsed",
|
|
||||||
removing && "removing",
|
|
||||||
)}
|
|
||||||
tabIndex={-1}
|
|
||||||
data-ai-status={decisionState.aiStatus}
|
|
||||||
data-evidence-quality={decisionState.evidenceQuality}
|
|
||||||
data-recommendation={decisionState.recommendation}
|
|
||||||
data-urgency={decisionState.urgency}
|
|
||||||
>
|
|
||||||
{isCompactCard ? (
|
|
||||||
<MobileDecisionCard
|
|
||||||
aiBullets={aiBullets}
|
|
||||||
aiCityForecast={aiCityForecast}
|
|
||||||
aiConfidence={aiConfidence}
|
|
||||||
aiForecast={aiForecast}
|
|
||||||
aiPredictedMax={aiPredictedMax}
|
|
||||||
aiRangeHigh={aiRangeHigh}
|
|
||||||
aiRangeLow={aiRangeLow}
|
|
||||||
aiReadCompleteText={aiReadCompleteText}
|
|
||||||
aiReadInProgressText={aiReadInProgressText}
|
|
||||||
aiRuleEvidenceMode={aiRuleEvidenceMode}
|
|
||||||
aiRuleEvidenceText={aiRuleEvidenceText}
|
|
||||||
debPrediction={debNumber}
|
|
||||||
decisionState={decisionState}
|
|
||||||
detail={detail}
|
|
||||||
displayName={displayName}
|
|
||||||
expectedHighText={expectedHighText}
|
|
||||||
fallbackAiReason={fallbackAiReason}
|
|
||||||
isEn={isEn}
|
|
||||||
isHkoObservation={isHkoObservation}
|
|
||||||
isRefreshing={isRefreshing}
|
|
||||||
localModelSupportNote={localModelSupportNote}
|
|
||||||
localizedFinalJudgment={localizedFinalJudgment}
|
|
||||||
onRefresh={handleRefresh}
|
|
||||||
onRemove={handleRemove}
|
|
||||||
peakWindow={peakWindow}
|
|
||||||
removing={removing}
|
|
||||||
tempSymbol={tempSymbol}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<CityCardHeader
|
|
||||||
aiStatusLabel={decisionState.aiStatusLabel}
|
|
||||||
aiStatusTone={decisionState.aiStatusTone}
|
|
||||||
collapseId={collapseId}
|
|
||||||
collapsed={collapsed}
|
|
||||||
debText={debText}
|
|
||||||
detailLocalTime={detail?.local_time}
|
|
||||||
displayName={displayName}
|
|
||||||
expectedHighText={expectedHighText}
|
|
||||||
isEn={isEn}
|
|
||||||
isRefreshing={isRefreshing}
|
|
||||||
modelRange={modelRange}
|
|
||||||
onRefresh={handleRefresh}
|
|
||||||
onRemove={handleRemove}
|
|
||||||
onToggleCollapsed={onToggleCollapsed}
|
|
||||||
peakWindow={peakWindow}
|
|
||||||
removing={removing}
|
|
||||||
rowLocalTime={row?.local_time}
|
|
||||||
statusTags={decisionState.badges}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{detail && !collapsed ? (
|
|
||||||
<div className="scan-ai-city-body" id={collapseId}>
|
|
||||||
<WeatherDecisionBand
|
|
||||||
decisionView={decisionView}
|
|
||||||
decisionWhyText={decisionState.primaryReason}
|
|
||||||
isEn={isEn}
|
|
||||||
paceDeltaText={paceView?.deltaText || "--"}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="scan-ai-city-analysis-grid">
|
|
||||||
<AiCityTemperatureChart detail={detail} />
|
|
||||||
<AiEvidencePanel
|
|
||||||
aiBullets={aiBullets}
|
|
||||||
aiCityForecast={aiCityForecast}
|
|
||||||
aiConfidence={aiConfidence}
|
|
||||||
aiForecast={aiForecast}
|
|
||||||
aiPredictedMax={aiPredictedMax}
|
|
||||||
aiRangeHigh={aiRangeHigh}
|
|
||||||
aiRangeLow={aiRangeLow}
|
|
||||||
aiReadCompleteText={aiReadCompleteText}
|
|
||||||
aiReadInProgressText={aiReadInProgressText}
|
|
||||||
aiRuleEvidenceMode={aiRuleEvidenceMode}
|
|
||||||
aiRuleEvidenceText={aiRuleEvidenceText}
|
|
||||||
debPrediction={debNumber}
|
|
||||||
fallbackAiReason={fallbackAiReason}
|
|
||||||
isEn={isEn}
|
|
||||||
isHkoObservation={isHkoObservation}
|
|
||||||
localModelSupportNote={localModelSupportNote}
|
|
||||||
localizedFinalJudgment={localizedFinalJudgment}
|
|
||||||
tempSymbol={tempSymbol}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ModelEvidencePanel detail={detail} isEn={isEn} />
|
|
||||||
</div>
|
|
||||||
) : !detail ? (
|
|
||||||
<div className="scan-ai-city-loading">
|
|
||||||
<LoadingSignal
|
|
||||||
title={loadingCopy.title}
|
|
||||||
description={loadingCopy.description}
|
|
||||||
compact
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</article>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,183 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
|
||||||
import { AiPinnedCityCard } from "@/components/dashboard/scan-terminal/AiPinnedCityCard";
|
|
||||||
import { findDetailForCity } from "@/components/dashboard/scan-terminal/city-detail-utils";
|
|
||||||
import { findRowForCity, normalizeCityKey } from "@/components/dashboard/scan-terminal/decision-utils";
|
|
||||||
import type { AiPinnedCity } from "@/components/dashboard/scan-terminal/types";
|
|
||||||
import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
export function AiPinnedForecastView({
|
|
||||||
items,
|
|
||||||
rows,
|
|
||||||
detailsByName,
|
|
||||||
locale,
|
|
||||||
onRefreshCityDetail,
|
|
||||||
onRemoveCity,
|
|
||||||
}: {
|
|
||||||
items: AiPinnedCity[];
|
|
||||||
rows: ScanOpportunityRow[];
|
|
||||||
detailsByName: Record<string, CityDetail>;
|
|
||||||
locale: string;
|
|
||||||
onRefreshCityDetail: (cityName: string) => Promise<void>;
|
|
||||||
onRemoveCity: (cityName: string) => void;
|
|
||||||
}) {
|
|
||||||
const isEn = locale === "en-US";
|
|
||||||
const [expandedCityKey, setExpandedCityKey] = useState<string | null>(null);
|
|
||||||
const [removingCities, setRemovingCities] = useState<Set<string>>(
|
|
||||||
() => new Set(),
|
|
||||||
);
|
|
||||||
const cityCardRefs = useRef<Record<string, HTMLDivElement | null>>({});
|
|
||||||
const knownCityKeysRef = useRef<Set<string>>(new Set());
|
|
||||||
const previousFirstCityKeyRef = useRef<string | null>(null);
|
|
||||||
const removeTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const activeKeyList = items.map(
|
|
||||||
(item) => normalizeCityKey(item.cityName) || item.cityName,
|
|
||||||
);
|
|
||||||
const activeKeys = new Set(activeKeyList);
|
|
||||||
const firstCityKey = activeKeyList[0] ?? null;
|
|
||||||
const hasNewCity = activeKeyList.some((key) => !knownCityKeysRef.current.has(key));
|
|
||||||
const firstCityChanged = firstCityKey !== previousFirstCityKeyRef.current;
|
|
||||||
|
|
||||||
setExpandedCityKey((current) => {
|
|
||||||
if (!firstCityKey) return null;
|
|
||||||
if (hasNewCity || firstCityChanged) return firstCityKey;
|
|
||||||
if (current && activeKeys.has(current)) return current;
|
|
||||||
return firstCityKey;
|
|
||||||
});
|
|
||||||
Object.keys(cityCardRefs.current).forEach((key) => {
|
|
||||||
if (!activeKeys.has(key)) {
|
|
||||||
delete cityCardRefs.current[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
knownCityKeysRef.current = activeKeys;
|
|
||||||
previousFirstCityKeyRef.current = firstCityKey;
|
|
||||||
}, [items]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
removeTimersRef.current.forEach((timer) => clearTimeout(timer));
|
|
||||||
removeTimersRef.current.clear();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const removeCityWithMotion = useCallback(
|
|
||||||
(item: AiPinnedCity, stableKey: string) => {
|
|
||||||
if (removeTimersRef.current.has(stableKey)) return;
|
|
||||||
setRemovingCities((current) => {
|
|
||||||
const next = new Set(current);
|
|
||||||
next.add(stableKey);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
onRemoveCity(item.cityName);
|
|
||||||
setRemovingCities((current) => {
|
|
||||||
const next = new Set(current);
|
|
||||||
next.delete(stableKey);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
removeTimersRef.current.delete(stableKey);
|
|
||||||
}, 260);
|
|
||||||
removeTimersRef.current.set(stableKey, timer);
|
|
||||||
},
|
|
||||||
[onRemoveCity],
|
|
||||||
);
|
|
||||||
|
|
||||||
const scrollToCity = useCallback((stableKey: string) => {
|
|
||||||
cityCardRefs.current[stableKey]?.scrollIntoView({
|
|
||||||
behavior: "smooth",
|
|
||||||
block: "start",
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const focusCity = useCallback((stableKey: string) => {
|
|
||||||
setExpandedCityKey(stableKey);
|
|
||||||
window.requestAnimationFrame(() => scrollToCity(stableKey));
|
|
||||||
}, [scrollToCity]);
|
|
||||||
|
|
||||||
if (!items.length) {
|
|
||||||
return (
|
|
||||||
<div className="scan-ai-workspace empty">
|
|
||||||
<div className="scan-empty-state">
|
|
||||||
<div className="scan-empty-title">
|
|
||||||
{isEn ? "Select a city from the market list" : "从市场列表选择城市"}
|
|
||||||
</div>
|
|
||||||
<div className="scan-empty-copy">
|
|
||||||
{isEn
|
|
||||||
? "Selected cities will appear here as deep analysis blocks."
|
|
||||||
: "选中的城市会加入深度分析页，并保留为城市分析区块。"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="scan-ai-workspace">
|
|
||||||
<div className="scan-ai-workspace-head">
|
|
||||||
<div>
|
|
||||||
<span>{isEn ? "Selected city workspace" : "城市分析工作区"}</span>
|
|
||||||
<strong>
|
|
||||||
{isEn
|
|
||||||
? `${items.length} cities under deep analysis`
|
|
||||||
: `${items.length} 个城市正在深度分析`}
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
{isEn
|
|
||||||
? "Market-list selections add cities here. City analysis stays here until you remove it."
|
|
||||||
: "市场列表选择会把城市加入这里；城市分析会保留，直到你手动移除。"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="scan-ai-city-jumpbar" aria-label={isEn ? "Selected city shortcuts" : "已选城市快捷跳转"}>
|
|
||||||
{items.map((item) => {
|
|
||||||
const stableKey = normalizeCityKey(item.cityName) || item.cityName;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={stableKey}
|
|
||||||
type="button"
|
|
||||||
onClick={() => focusCity(stableKey)}
|
|
||||||
>
|
|
||||||
{item.cityName}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="scan-ai-city-stack">
|
|
||||||
{items.map((item) => {
|
|
||||||
const detail = findDetailForCity(detailsByName, item.cityName);
|
|
||||||
const row = findRowForCity(rows, item.cityName);
|
|
||||||
const key = normalizeCityKey(item.cityName);
|
|
||||||
const stableKey = key || item.cityName;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={stableKey}
|
|
||||||
ref={(node) => {
|
|
||||||
cityCardRefs.current[stableKey] = node;
|
|
||||||
}}
|
|
||||||
className="scan-ai-city-anchor"
|
|
||||||
>
|
|
||||||
<AiPinnedCityCard
|
|
||||||
item={item}
|
|
||||||
detail={detail}
|
|
||||||
row={row}
|
|
||||||
locale={locale}
|
|
||||||
collapsed={expandedCityKey !== stableKey}
|
|
||||||
removing={removingCities.has(stableKey)}
|
|
||||||
onRefreshCityDetail={onRefreshCityDetail}
|
|
||||||
onRemove={() => removeCityWithMotion(item, stableKey)}
|
|
||||||
onToggleCollapsed={() => {
|
|
||||||
setExpandedCityKey((current) =>
|
|
||||||
current === stableKey ? null : stableKey,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { RefreshCw, X } from "lucide-react";
|
|
||||||
import type { MouseEvent } from "react";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { AiCityTemperatureChart } from "@/components/dashboard/scan-terminal/AiCityTemperatureChart";
|
|
||||||
import { AiEvidencePanel } from "@/components/dashboard/scan-terminal/AiEvidencePanel";
|
|
||||||
import {
|
|
||||||
CityStatusTags,
|
|
||||||
type CityStatusTag,
|
|
||||||
type StatusTone,
|
|
||||||
} from "@/components/dashboard/scan-terminal/CityStatusTags";
|
|
||||||
import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
|
|
||||||
import { ModelEvidencePanel } from "@/components/dashboard/scan-terminal/ModelEvidencePanel";
|
|
||||||
import type { CityDecisionState } from "@/components/dashboard/scan-terminal/city-decision-state";
|
|
||||||
import {
|
|
||||||
getCityLoadingCopy,
|
|
||||||
getMobileDecisionCopy,
|
|
||||||
} from "@/components/dashboard/scan-terminal/decision-copy";
|
|
||||||
import type {
|
|
||||||
AiCityForecastPayload,
|
|
||||||
AiCityForecastState,
|
|
||||||
} from "@/components/dashboard/scan-terminal/types";
|
|
||||||
import type { CityDetail } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
export function MobileDecisionCard({
|
|
||||||
aiBullets,
|
|
||||||
aiCityForecast,
|
|
||||||
aiConfidence,
|
|
||||||
aiForecast,
|
|
||||||
aiPredictedMax,
|
|
||||||
aiRangeHigh,
|
|
||||||
aiRangeLow,
|
|
||||||
aiReadCompleteText,
|
|
||||||
aiReadInProgressText,
|
|
||||||
aiRuleEvidenceMode,
|
|
||||||
aiRuleEvidenceText,
|
|
||||||
debPrediction,
|
|
||||||
decisionState,
|
|
||||||
detail,
|
|
||||||
displayName,
|
|
||||||
expectedHighText,
|
|
||||||
fallbackAiReason,
|
|
||||||
isEn,
|
|
||||||
isHkoObservation,
|
|
||||||
isRefreshing,
|
|
||||||
localModelSupportNote,
|
|
||||||
localizedFinalJudgment,
|
|
||||||
onRefresh,
|
|
||||||
onRemove,
|
|
||||||
peakWindow,
|
|
||||||
removing,
|
|
||||||
tempSymbol,
|
|
||||||
}: {
|
|
||||||
aiBullets: string[];
|
|
||||||
aiCityForecast: AiCityForecastPayload["city_forecast"] | null;
|
|
||||||
aiConfidence: string | null;
|
|
||||||
aiForecast: AiCityForecastState;
|
|
||||||
aiPredictedMax: number | null;
|
|
||||||
aiRangeHigh: number | null;
|
|
||||||
aiRangeLow: number | null;
|
|
||||||
aiReadCompleteText: string;
|
|
||||||
aiReadInProgressText: string;
|
|
||||||
aiRuleEvidenceMode: boolean;
|
|
||||||
aiRuleEvidenceText: string;
|
|
||||||
debPrediction: number | null;
|
|
||||||
decisionState: CityDecisionState;
|
|
||||||
detail: CityDetail | null;
|
|
||||||
displayName: string;
|
|
||||||
expectedHighText: string;
|
|
||||||
fallbackAiReason: string;
|
|
||||||
isEn: boolean;
|
|
||||||
isHkoObservation: boolean;
|
|
||||||
isRefreshing: boolean;
|
|
||||||
localModelSupportNote: string;
|
|
||||||
localizedFinalJudgment: string;
|
|
||||||
onRefresh: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
||||||
onRemove: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
||||||
peakWindow: string;
|
|
||||||
removing?: boolean;
|
|
||||||
tempSymbol: string;
|
|
||||||
}) {
|
|
||||||
const copy = getMobileDecisionCopy(isEn);
|
|
||||||
const loadingCopy = getCityLoadingCopy({ isEn, isHkoObservation });
|
|
||||||
const [modelOpen, setModelOpen] = useState(false);
|
|
||||||
const [chartOpen, setChartOpen] = useState(false);
|
|
||||||
const statusTags: CityStatusTag[] = decisionState.badges.length
|
|
||||||
? decisionState.badges
|
|
||||||
: [{ label: decisionState.aiStatusLabel, tone: decisionState.aiStatusTone as StatusTone }];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<header className="scan-mobile-decision-head">
|
|
||||||
<div>
|
|
||||||
<span className="scan-ai-city-kicker">
|
|
||||||
{isEn ? "Mobile action card" : "移动端行动卡"}
|
|
||||||
</span>
|
|
||||||
<h3>{displayName}</h3>
|
|
||||||
</div>
|
|
||||||
<div className="scan-ai-city-actions">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="scan-ai-city-icon-button"
|
|
||||||
onClick={onRefresh}
|
|
||||||
aria-label={`${copy.refresh} ${displayName}`}
|
|
||||||
title={copy.refresh}
|
|
||||||
disabled={isRefreshing}
|
|
||||||
>
|
|
||||||
<RefreshCw size={15} className={isRefreshing ? "spin" : undefined} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="scan-ai-city-icon-button danger"
|
|
||||||
onClick={onRemove}
|
|
||||||
aria-label={`${copy.remove} ${displayName}`}
|
|
||||||
title={copy.remove}
|
|
||||||
disabled={removing}
|
|
||||||
>
|
|
||||||
<X size={15} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="scan-mobile-decision-metrics">
|
|
||||||
<span className="primary">
|
|
||||||
<small>{copy.expectedHigh}</small>
|
|
||||||
<b>{expectedHighText}</b>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<small>{copy.peakWindow}</small>
|
|
||||||
<b>{peakWindow}</b>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="scan-mobile-decision-reason">{decisionState.primaryReason}</p>
|
|
||||||
<CityStatusTags tags={statusTags} />
|
|
||||||
|
|
||||||
{!detail ? (
|
|
||||||
<div className="scan-ai-city-loading">
|
|
||||||
<LoadingSignal
|
|
||||||
title={loadingCopy.title}
|
|
||||||
description={loadingCopy.description}
|
|
||||||
compact
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="scan-mobile-decision-folds">
|
|
||||||
<AiEvidencePanel
|
|
||||||
aiBullets={aiBullets}
|
|
||||||
aiCityForecast={aiCityForecast}
|
|
||||||
aiConfidence={aiConfidence}
|
|
||||||
aiForecast={aiForecast}
|
|
||||||
aiPredictedMax={aiPredictedMax}
|
|
||||||
aiRangeHigh={aiRangeHigh}
|
|
||||||
aiRangeLow={aiRangeLow}
|
|
||||||
aiReadCompleteText={aiReadCompleteText}
|
|
||||||
aiReadInProgressText={aiReadInProgressText}
|
|
||||||
aiRuleEvidenceMode={aiRuleEvidenceMode}
|
|
||||||
aiRuleEvidenceText={aiRuleEvidenceText}
|
|
||||||
debPrediction={debPrediction}
|
|
||||||
fallbackAiReason={fallbackAiReason}
|
|
||||||
isEn={isEn}
|
|
||||||
isHkoObservation={isHkoObservation}
|
|
||||||
localModelSupportNote={localModelSupportNote}
|
|
||||||
localizedFinalJudgment={localizedFinalJudgment}
|
|
||||||
tempSymbol={tempSymbol}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<details
|
|
||||||
className="scan-ai-city-section scan-mobile-fold"
|
|
||||||
open={modelOpen}
|
|
||||||
onToggle={(event) => setModelOpen(event.currentTarget.open)}
|
|
||||||
>
|
|
||||||
<summary className="scan-ai-city-section-title">{copy.modelEvidence}</summary>
|
|
||||||
{modelOpen ? <ModelEvidencePanel detail={detail} isEn={isEn} /> : null}
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details
|
|
||||||
className="scan-ai-city-section scan-mobile-fold"
|
|
||||||
open={chartOpen}
|
|
||||||
onToggle={(event) => setChartOpen(event.currentTarget.open)}
|
|
||||||
>
|
|
||||||
<summary className="scan-ai-city-section-title">{copy.chart}</summary>
|
|
||||||
{chartOpen ? <AiCityTemperatureChart detail={detail} /> : null}
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { ModelForecast } from "@/components/dashboard/PanelSections";
|
|
||||||
import type { CityDetail } from "@/lib/dashboard-types";
|
|
||||||
|
|
||||||
export function ModelEvidencePanel({
|
|
||||||
detail,
|
|
||||||
isEn,
|
|
||||||
}: {
|
|
||||||
detail: CityDetail;
|
|
||||||
isEn: boolean;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<section className="scan-ai-city-section models">
|
|
||||||
<div className="scan-ai-city-section-title">
|
|
||||||
{isEn ? "Evidence · multi-model support" : "证据 · 多模型支撑"}
|
|
||||||
</div>
|
|
||||||
<ModelForecast detail={detail} targetDate={detail.local_date} hideTitle />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,166 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
|
||||||
import { getLocalizedCityName } from "@/lib/dashboard-home-copy";
|
|
||||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
||||||
import type { useDashboardStore } from "@/hooks/useDashboardStore";
|
|
||||||
import {
|
|
||||||
findDetailForCity,
|
|
||||||
isFullEnoughForDeepAnalysis,
|
|
||||||
} from "@/components/dashboard/scan-terminal/city-detail-utils";
|
|
||||||
import {
|
|
||||||
findRowForCity,
|
|
||||||
normalizeCityKey,
|
|
||||||
prettifyCityName,
|
|
||||||
} from "@/components/dashboard/scan-terminal/decision-utils";
|
|
||||||
import type { AiPinnedCity } from "@/components/dashboard/scan-terminal/types";
|
|
||||||
|
|
||||||
type DashboardStore = ReturnType<typeof useDashboardStore>;
|
|
||||||
|
|
||||||
export function useAiPinnedCityWorkspace({
|
|
||||||
locale,
|
|
||||||
store,
|
|
||||||
timeSortedRows,
|
|
||||||
}: {
|
|
||||||
locale: string;
|
|
||||||
store: DashboardStore;
|
|
||||||
timeSortedRows: ScanOpportunityRow[];
|
|
||||||
}) {
|
|
||||||
const [aiPinnedCities, setAiPinnedCities] = useState<AiPinnedCity[]>([]);
|
|
||||||
const aiFullHydrationRef = useRef<Set<string>>(new Set());
|
|
||||||
const aiHydrationQueueRef = useRef<string[]>([]);
|
|
||||||
const aiHydrationRunningRef = useRef(false);
|
|
||||||
const aiHydrationRetriesRef = useRef<Map<string, number>>(new Map());
|
|
||||||
|
|
||||||
const runAiHydrationQueue = useCallback(async () => {
|
|
||||||
if (aiHydrationRunningRef.current) return;
|
|
||||||
aiHydrationRunningRef.current = true;
|
|
||||||
try {
|
|
||||||
while (aiHydrationQueueRef.current.length > 0) {
|
|
||||||
const nextCity = aiHydrationQueueRef.current.shift();
|
|
||||||
const key = normalizeCityKey(nextCity || "");
|
|
||||||
if (!nextCity || !key) continue;
|
|
||||||
try {
|
|
||||||
const detail = await store.ensureCityDetail(
|
|
||||||
nextCity,
|
|
||||||
false,
|
|
||||||
"full",
|
|
||||||
);
|
|
||||||
if (!isFullEnoughForDeepAnalysis(detail)) {
|
|
||||||
const retries = aiHydrationRetriesRef.current.get(key) || 0;
|
|
||||||
if (retries >= 3) {
|
|
||||||
aiFullHydrationRef.current.delete(key);
|
|
||||||
aiHydrationRetriesRef.current.delete(key);
|
|
||||||
} else {
|
|
||||||
aiHydrationRetriesRef.current.set(key, retries + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
const retries = aiHydrationRetriesRef.current.get(key) || 0;
|
|
||||||
if (retries >= 3) {
|
|
||||||
aiFullHydrationRef.current.delete(key);
|
|
||||||
aiHydrationRetriesRef.current.delete(key);
|
|
||||||
} else {
|
|
||||||
aiHydrationRetriesRef.current.set(key, retries + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
aiHydrationRunningRef.current = false;
|
|
||||||
if (aiHydrationQueueRef.current.length > 0) {
|
|
||||||
void runAiHydrationQueue();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [store.ensureCityDetail]);
|
|
||||||
|
|
||||||
const queueAiFullHydration = useCallback(
|
|
||||||
(cityName: string) => {
|
|
||||||
const key = normalizeCityKey(cityName);
|
|
||||||
if (!key || aiFullHydrationRef.current.has(key)) return;
|
|
||||||
aiFullHydrationRef.current.add(key);
|
|
||||||
aiHydrationQueueRef.current.push(cityName);
|
|
||||||
void runAiHydrationQueue();
|
|
||||||
},
|
|
||||||
[runAiHydrationQueue],
|
|
||||||
);
|
|
||||||
|
|
||||||
const addAiPinnedCity = useCallback((cityName: string) => {
|
|
||||||
const cleanName = String(cityName || "").trim();
|
|
||||||
const key = normalizeCityKey(cleanName);
|
|
||||||
if (!key) return;
|
|
||||||
const matchedRow = findRowForCity(timeSortedRows, cleanName);
|
|
||||||
const prettyName = prettifyCityName(cleanName);
|
|
||||||
const displayName =
|
|
||||||
matchedRow?.city_display_name ||
|
|
||||||
matchedRow?.display_name ||
|
|
||||||
getLocalizedCityName(cleanName, prettyName || cleanName, locale) ||
|
|
||||||
prettyName ||
|
|
||||||
cleanName;
|
|
||||||
// Clear the hydration guard so that re-selecting this city always
|
|
||||||
// triggers a fresh hydration attempt (fixes second-city loading failure).
|
|
||||||
aiFullHydrationRef.current.delete(key);
|
|
||||||
aiHydrationRetriesRef.current.delete(key);
|
|
||||||
setAiPinnedCities((current) => {
|
|
||||||
const existing = current.findIndex(
|
|
||||||
(item) => normalizeCityKey(item.cityName) === key,
|
|
||||||
);
|
|
||||||
const nextItem = {
|
|
||||||
cityName: matchedRow?.city || cleanName,
|
|
||||||
displayName,
|
|
||||||
addedAt: Date.now(),
|
|
||||||
};
|
|
||||||
if (existing >= 0) {
|
|
||||||
const next = [...current];
|
|
||||||
next[existing] = { ...next[existing], ...nextItem };
|
|
||||||
return [
|
|
||||||
next[existing],
|
|
||||||
...next.filter((_, index) => index !== existing),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
return [nextItem, ...current].slice(0, 8);
|
|
||||||
});
|
|
||||||
queueAiFullHydration(matchedRow?.city || cleanName);
|
|
||||||
}, [locale, queueAiFullHydration, timeSortedRows]);
|
|
||||||
|
|
||||||
const removeAiPinnedCity = useCallback((cityName: string) => {
|
|
||||||
const key = normalizeCityKey(cityName);
|
|
||||||
aiFullHydrationRef.current.delete(key);
|
|
||||||
aiHydrationQueueRef.current = aiHydrationQueueRef.current.filter(
|
|
||||||
(queuedCity) => normalizeCityKey(queuedCity) !== key,
|
|
||||||
);
|
|
||||||
setAiPinnedCities((current) =>
|
|
||||||
current.filter((item) => normalizeCityKey(item.cityName) !== key),
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const refreshAiPinnedCityDetail = useCallback(
|
|
||||||
async (cityName: string) => {
|
|
||||||
const key = normalizeCityKey(cityName);
|
|
||||||
if (key) {
|
|
||||||
aiFullHydrationRef.current.delete(key);
|
|
||||||
}
|
|
||||||
await store.ensureCityDetail(cityName, true, "full");
|
|
||||||
},
|
|
||||||
[store.ensureCityDetail],
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
aiPinnedCities.forEach((item) => {
|
|
||||||
const key = normalizeCityKey(item.cityName);
|
|
||||||
if (!key || aiFullHydrationRef.current.has(key)) return;
|
|
||||||
const retries = aiHydrationRetriesRef.current.get(key) || 0;
|
|
||||||
if (retries >= 3) return;
|
|
||||||
const detail = findDetailForCity(store.cityDetailsByName, item.cityName);
|
|
||||||
const needsFullHydration = !isFullEnoughForDeepAnalysis(detail);
|
|
||||||
if (!needsFullHydration) return;
|
|
||||||
queueAiFullHydration(item.cityName);
|
|
||||||
});
|
|
||||||
}, [aiPinnedCities, queueAiFullHydration, store.cityDetailsByName]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
addAiPinnedCity,
|
|
||||||
aiPinnedCities,
|
|
||||||
refreshAiPinnedCityDetail,
|
|
||||||
removeAiPinnedCity,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,575 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
CityDetail,
|
|
||||||
CityListItem,
|
|
||||||
CitySummary,
|
|
||||||
MarketScan,
|
|
||||||
ScanTerminalFilters,
|
|
||||||
ScanTerminalResponse,
|
|
||||||
} from "@/lib/dashboard-types";
|
|
||||||
import {
|
|
||||||
buildBrowserBackendHeaders,
|
|
||||||
fetchBackendApi,
|
|
||||||
} from "@/lib/backend-api";
|
|
||||||
import { formatHttpErrorMessage } from "@/lib/http-error";
|
|
||||||
|
|
||||||
const CACHE_KEY = "polyWeather_v2_chart_full_day";
|
|
||||||
const CACHE_TTL_MS = 30 * 60 * 1000;
|
|
||||||
const SCAN_TERMINAL_CLIENT_TIMEOUT_MS = 35_000;
|
|
||||||
const CITY_DETAIL_CLIENT_TIMEOUT_MS = 35_000;
|
|
||||||
const pendingCityDetailRequests = new Map<string, Promise<CityDetail>>();
|
|
||||||
const pendingCitySummaryRequests = new Map<string, Promise<CitySummary>>();
|
|
||||||
const pendingCityMarketScanRequests = new Map<
|
|
||||||
string,
|
|
||||||
Promise<{
|
|
||||||
fetched_at?: string | null;
|
|
||||||
market_scan?: MarketScan | null;
|
|
||||||
selected_date?: string | null;
|
|
||||||
}>
|
|
||||||
>();
|
|
||||||
const pendingScanTerminalRequests = new Map<string, Promise<ScanTerminalResponse>>();
|
|
||||||
const pendingScanTerminalAiRequests = new Map<string, Promise<ScanTerminalResponse>>();
|
|
||||||
const PRIORITY_WARM_SESSION_KEY = "polyWeather_priority_warm_v1";
|
|
||||||
|
|
||||||
type CityCacheMeta = {
|
|
||||||
cachedAt: number;
|
|
||||||
revision: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type CityCacheBundle = {
|
|
||||||
details: Record<string, CityDetail>;
|
|
||||||
meta: Record<string, CityCacheMeta>;
|
|
||||||
};
|
|
||||||
|
|
||||||
function normalizeCityName(cityName: string) {
|
|
||||||
return encodeURIComponent(String(cityName).replace(/\s/g, "-"));
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeDetailDepth(depth?: "panel" | "market" | "nearby" | "full") {
|
|
||||||
if (depth === "full") return "full";
|
|
||||||
if (depth === "nearby") return "nearby";
|
|
||||||
if (depth === "market") return "market";
|
|
||||||
return "panel";
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchJson<T>(
|
|
||||||
url: string,
|
|
||||||
options?: { cache?: RequestCache; timeoutMs?: number },
|
|
||||||
): Promise<T> {
|
|
||||||
const timeoutMs = options?.timeoutMs;
|
|
||||||
const controller =
|
|
||||||
timeoutMs && typeof AbortController !== "undefined"
|
|
||||||
? new AbortController()
|
|
||||||
: null;
|
|
||||||
const timeoutId =
|
|
||||||
controller &&
|
|
||||||
typeof window !== "undefined" &&
|
|
||||||
typeof window.setTimeout === "function"
|
|
||||||
? window.setTimeout(() => controller.abort(), timeoutMs)
|
|
||||||
: null;
|
|
||||||
const headers = await buildBrowserBackendHeaders({
|
|
||||||
Accept: "application/json",
|
|
||||||
});
|
|
||||||
|
|
||||||
let response: Response;
|
|
||||||
try {
|
|
||||||
response = await fetchBackendApi(url, {
|
|
||||||
headers,
|
|
||||||
cache: options?.cache ?? "default",
|
|
||||||
signal: controller?.signal,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
if (controller?.signal.aborted) {
|
|
||||||
throw new Error("Request timed out");
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
if (timeoutId != null) {
|
|
||||||
if (typeof window.clearTimeout === "function") {
|
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const body = await response.text().catch(() => "");
|
|
||||||
throw new Error(
|
|
||||||
formatHttpErrorMessage(response.status, response.statusText, body),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.json() as Promise<T>;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isStaleMarketSlugResponse(payload: {
|
|
||||||
market_scan?: MarketScan | null;
|
|
||||||
} | null | undefined) {
|
|
||||||
const scan = payload?.market_scan;
|
|
||||||
const reason = String(scan?.reason || "").toLowerCase();
|
|
||||||
return (
|
|
||||||
scan?.available === false &&
|
|
||||||
(reason.includes("market_slug not found") ||
|
|
||||||
reason.includes("specified market_slug not found") ||
|
|
||||||
reason.includes("slug not found"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isClient() {
|
|
||||||
return typeof window !== "undefined";
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeRevisionPart(value: unknown) {
|
|
||||||
return value == null ? "" : String(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getCityRevision(source?: CityDetail | CitySummary | null) {
|
|
||||||
if (!source) return "";
|
|
||||||
const modelDaily =
|
|
||||||
"multi_model_daily" in source && source.multi_model_daily
|
|
||||||
? source.multi_model_daily?.[source.local_date || ""]
|
|
||||||
: null;
|
|
||||||
const modelFootprint = modelDaily?.models || ("multi_model" in source ? source.multi_model : null);
|
|
||||||
const forecastFootprint =
|
|
||||||
"forecast" in source && Array.isArray(source.forecast?.daily)
|
|
||||||
? source.forecast.daily
|
|
||||||
.map((item) => `${normalizeRevisionPart(item?.date)}:${normalizeRevisionPart(item?.max_temp)}`)
|
|
||||||
.join("|")
|
|
||||||
: "";
|
|
||||||
const marketScan = "market_scan" in source ? source.market_scan : null;
|
|
||||||
const marketFootprint = marketScan
|
|
||||||
? [
|
|
||||||
normalizeRevisionPart(marketScan.selected_slug),
|
|
||||||
normalizeRevisionPart(marketScan.market_price),
|
|
||||||
normalizeRevisionPart(marketScan.yes_buy),
|
|
||||||
normalizeRevisionPart(marketScan.yes_sell),
|
|
||||||
normalizeRevisionPart(marketScan.no_buy),
|
|
||||||
normalizeRevisionPart(marketScan.no_sell),
|
|
||||||
normalizeRevisionPart(marketScan.price_analysis?.best_side),
|
|
||||||
normalizeRevisionPart(
|
|
||||||
Array.isArray(marketScan.all_buckets)
|
|
||||||
? marketScan.all_buckets
|
|
||||||
.slice(0, 6)
|
|
||||||
.map(
|
|
||||||
(bucket) =>
|
|
||||||
`${normalizeRevisionPart(bucket?.temp ?? bucket?.value)}:${normalizeRevisionPart(
|
|
||||||
bucket?.market_price ?? bucket?.yes_buy,
|
|
||||||
)}`,
|
|
||||||
)
|
|
||||||
.join(",")
|
|
||||||
: "",
|
|
||||||
),
|
|
||||||
].join("|")
|
|
||||||
: "";
|
|
||||||
return [
|
|
||||||
normalizeRevisionPart(source.updated_at),
|
|
||||||
normalizeRevisionPart(source.current?.obs_time),
|
|
||||||
normalizeRevisionPart(source.current?.temp),
|
|
||||||
normalizeRevisionPart(source.deb?.prediction),
|
|
||||||
normalizeRevisionPart(
|
|
||||||
modelFootprint && typeof modelFootprint === "object"
|
|
||||||
? Object.keys(modelFootprint)
|
|
||||||
.sort()
|
|
||||||
.map((key) => `${key}:${normalizeRevisionPart(modelFootprint[key])}`)
|
|
||||||
.join("|")
|
|
||||||
: "",
|
|
||||||
),
|
|
||||||
normalizeRevisionPart(forecastFootprint),
|
|
||||||
normalizeRevisionPart(marketFootprint),
|
|
||||||
].join("|");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function toCitySummary(detail: CityDetail): CitySummary {
|
|
||||||
return {
|
|
||||||
name: detail.name,
|
|
||||||
display_name: detail.display_name,
|
|
||||||
icao: detail.risk?.icao,
|
|
||||||
local_time: detail.local_time,
|
|
||||||
temp_symbol: detail.temp_symbol,
|
|
||||||
current: {
|
|
||||||
obs_time: detail.current?.obs_time,
|
|
||||||
temp: detail.current?.temp,
|
|
||||||
},
|
|
||||||
deb: {
|
|
||||||
prediction: detail.deb?.prediction,
|
|
||||||
},
|
|
||||||
deviation_monitor: detail.deviation_monitor,
|
|
||||||
risk: {
|
|
||||||
level: detail.risk?.level,
|
|
||||||
warning: detail.risk?.warning,
|
|
||||||
},
|
|
||||||
updated_at: detail.updated_at,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function isFresh(meta?: CityCacheMeta | null) {
|
|
||||||
return Boolean(meta && Date.now() - meta.cachedAt < CACHE_TTL_MS);
|
|
||||||
}
|
|
||||||
|
|
||||||
function readLegacyCache(raw: string): CityCacheBundle {
|
|
||||||
const parsed = JSON.parse(raw) as {
|
|
||||||
timestamp?: number;
|
|
||||||
data?: Record<string, CityDetail>;
|
|
||||||
};
|
|
||||||
const details = parsed.data || {};
|
|
||||||
const cachedAt = parsed.timestamp || 0;
|
|
||||||
const freshDetails: Record<string, CityDetail> = {};
|
|
||||||
const meta: Record<string, CityCacheMeta> = {};
|
|
||||||
Object.entries(details).forEach(([cityName, detail]) => {
|
|
||||||
const nextMeta = {
|
|
||||||
cachedAt,
|
|
||||||
revision: getCityRevision(detail),
|
|
||||||
};
|
|
||||||
if (!isFresh(nextMeta)) return;
|
|
||||||
freshDetails[cityName] = detail;
|
|
||||||
meta[cityName] = nextMeta;
|
|
||||||
});
|
|
||||||
return { details: freshDetails, meta };
|
|
||||||
}
|
|
||||||
|
|
||||||
export const dashboardClient = {
|
|
||||||
clearCityDetailCache() {
|
|
||||||
if (!isClient()) return;
|
|
||||||
try {
|
|
||||||
window.sessionStorage?.removeItem(CACHE_KEY);
|
|
||||||
} catch {
|
|
||||||
// Storage can be unavailable in embedded/private browser contexts.
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async getCities() {
|
|
||||||
const data = await fetchJson<{ cities?: CityListItem[] }>("/api/cities");
|
|
||||||
return data.cities || [];
|
|
||||||
},
|
|
||||||
|
|
||||||
sendPriorityWarmHint(timezone?: string | null) {
|
|
||||||
if (!isClient()) return;
|
|
||||||
if (
|
|
||||||
typeof fetch !== "function" ||
|
|
||||||
typeof Intl === "undefined" ||
|
|
||||||
!window.sessionStorage
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const tz = String(
|
|
||||||
timezone || Intl.DateTimeFormat().resolvedOptions().timeZone || "",
|
|
||||||
).trim();
|
|
||||||
if (!tz) return;
|
|
||||||
const cacheKey = `${PRIORITY_WARM_SESSION_KEY}:${tz}`;
|
|
||||||
try {
|
|
||||||
if (window.sessionStorage.getItem(cacheKey)) return;
|
|
||||||
window.sessionStorage.setItem(cacheKey, "1");
|
|
||||||
} catch {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const params = new URLSearchParams({ timezone: tz });
|
|
||||||
void fetch(`/api/system/priority-warm?${params.toString()}`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { Accept: "application/json" },
|
|
||||||
cache: "default",
|
|
||||||
keepalive: true,
|
|
||||||
}).catch(() => {});
|
|
||||||
},
|
|
||||||
|
|
||||||
async getCitySummary(cityName: string, options?: { force?: boolean }) {
|
|
||||||
const force = options?.force ?? false;
|
|
||||||
const requestKey = `${cityName}::${force ? "force" : "cached"}`;
|
|
||||||
const existing = pendingCitySummaryRequests.get(requestKey);
|
|
||||||
if (existing) {
|
|
||||||
return existing;
|
|
||||||
}
|
|
||||||
|
|
||||||
const request = fetchJson<CitySummary>(
|
|
||||||
`/api/city/${normalizeCityName(cityName)}/summary?force_refresh=${force}`,
|
|
||||||
force ? { cache: "no-store" } : undefined,
|
|
||||||
).finally(() => {
|
|
||||||
pendingCitySummaryRequests.delete(requestKey);
|
|
||||||
});
|
|
||||||
|
|
||||||
pendingCitySummaryRequests.set(requestKey, request);
|
|
||||||
return request;
|
|
||||||
},
|
|
||||||
|
|
||||||
async getCityDetail(
|
|
||||||
cityName: string,
|
|
||||||
options?: { force?: boolean; depth?: "panel" | "market" | "nearby" | "full" },
|
|
||||||
) {
|
|
||||||
const force = options?.force ?? false;
|
|
||||||
const depth = normalizeDetailDepth(options?.depth);
|
|
||||||
if (!force) {
|
|
||||||
const requestKey = `${cityName}::${depth}::cached`;
|
|
||||||
const existing = pendingCityDetailRequests.get(requestKey);
|
|
||||||
if (existing) {
|
|
||||||
return existing;
|
|
||||||
}
|
|
||||||
|
|
||||||
const request = fetchJson<CityDetail>(
|
|
||||||
`/api/city/${normalizeCityName(cityName)}?force_refresh=false&depth=${depth}`,
|
|
||||||
{ timeoutMs: CITY_DETAIL_CLIENT_TIMEOUT_MS },
|
|
||||||
).finally(() => {
|
|
||||||
pendingCityDetailRequests.delete(requestKey);
|
|
||||||
});
|
|
||||||
|
|
||||||
pendingCityDetailRequests.set(requestKey, request);
|
|
||||||
return request;
|
|
||||||
}
|
|
||||||
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
force_refresh: "true",
|
|
||||||
depth,
|
|
||||||
_ts: String(Date.now()),
|
|
||||||
});
|
|
||||||
return fetchJson<CityDetail>(
|
|
||||||
`/api/city/${normalizeCityName(cityName)}?${params.toString()}`,
|
|
||||||
{ cache: "no-store", timeoutMs: CITY_DETAIL_CLIENT_TIMEOUT_MS },
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
async getCityMarketScan(
|
|
||||||
cityName: string,
|
|
||||||
options?: {
|
|
||||||
force?: boolean;
|
|
||||||
lite?: boolean;
|
|
||||||
marketSlug?: string | null;
|
|
||||||
targetDate?: string | null;
|
|
||||||
},
|
|
||||||
) {
|
|
||||||
const force = options?.force ?? false;
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
force_refresh: String(force),
|
|
||||||
_ts: String(Date.now()),
|
|
||||||
});
|
|
||||||
if (options?.targetDate) {
|
|
||||||
params.set("target_date", options.targetDate);
|
|
||||||
}
|
|
||||||
if (options?.marketSlug) {
|
|
||||||
params.set("market_slug", options.marketSlug);
|
|
||||||
}
|
|
||||||
if (options?.lite) {
|
|
||||||
params.set("lite", "true");
|
|
||||||
}
|
|
||||||
const requestKey = [
|
|
||||||
cityName,
|
|
||||||
force ? "force" : "cached",
|
|
||||||
options?.lite ? "lite" : "full",
|
|
||||||
options?.targetDate || "",
|
|
||||||
options?.marketSlug || "",
|
|
||||||
].join("::");
|
|
||||||
if (!force) {
|
|
||||||
const existing = pendingCityMarketScanRequests.get(requestKey);
|
|
||||||
if (existing) {
|
|
||||||
return existing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
type MarketScanPayload = {
|
|
||||||
fetched_at?: string | null;
|
|
||||||
market_scan?: MarketScan | null;
|
|
||||||
selected_date?: string | null;
|
|
||||||
};
|
|
||||||
const request = (async () => {
|
|
||||||
const payload = await fetchJson<MarketScanPayload>(
|
|
||||||
`/api/city/${normalizeCityName(cityName)}/market-scan?${params.toString()}`,
|
|
||||||
force ? { cache: "no-store" } : undefined,
|
|
||||||
);
|
|
||||||
if (!force && options?.marketSlug && isStaleMarketSlugResponse(payload)) {
|
|
||||||
const fallbackParams = new URLSearchParams({
|
|
||||||
force_refresh: "false",
|
|
||||||
_ts: String(Date.now()),
|
|
||||||
});
|
|
||||||
if (options?.lite) {
|
|
||||||
fallbackParams.set("lite", "true");
|
|
||||||
}
|
|
||||||
return fetchJson<MarketScanPayload>(
|
|
||||||
`/api/city/${normalizeCityName(cityName)}/market-scan?${fallbackParams.toString()}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return payload;
|
|
||||||
})().finally(() => {
|
|
||||||
pendingCityMarketScanRequests.delete(requestKey);
|
|
||||||
});
|
|
||||||
if (!force) {
|
|
||||||
pendingCityMarketScanRequests.set(requestKey, request);
|
|
||||||
}
|
|
||||||
return request;
|
|
||||||
},
|
|
||||||
|
|
||||||
async getScanTerminal(
|
|
||||||
filters: ScanTerminalFilters,
|
|
||||||
options?: { force?: boolean },
|
|
||||||
) {
|
|
||||||
const force = options?.force ?? false;
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
scan_mode: String(filters.scan_mode),
|
|
||||||
min_price: String(filters.min_price),
|
|
||||||
max_price: String(filters.max_price),
|
|
||||||
min_edge_pct: String(filters.min_edge_pct),
|
|
||||||
min_liquidity: String(filters.min_liquidity),
|
|
||||||
high_liquidity_only: String(filters.high_liquidity_only),
|
|
||||||
market_type: String(filters.market_type),
|
|
||||||
time_range: String(filters.time_range),
|
|
||||||
limit: String(filters.limit),
|
|
||||||
force_refresh: String(force),
|
|
||||||
});
|
|
||||||
const requestKey = `${params.toString()}::${force ? "force" : "cached"}`;
|
|
||||||
if (!force) {
|
|
||||||
const existing = pendingScanTerminalRequests.get(requestKey);
|
|
||||||
if (existing) {
|
|
||||||
return existing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const request = fetchJson<ScanTerminalResponse>(
|
|
||||||
`/api/scan/terminal?${params.toString()}`,
|
|
||||||
{
|
|
||||||
cache: force ? "no-store" : "default",
|
|
||||||
timeoutMs: SCAN_TERMINAL_CLIENT_TIMEOUT_MS,
|
|
||||||
},
|
|
||||||
).finally(() => {
|
|
||||||
pendingScanTerminalRequests.delete(requestKey);
|
|
||||||
});
|
|
||||||
if (!force) {
|
|
||||||
pendingScanTerminalRequests.set(requestKey, request);
|
|
||||||
}
|
|
||||||
return request;
|
|
||||||
},
|
|
||||||
|
|
||||||
async reviewScanTerminalWithAi(payload: {
|
|
||||||
filters: ScanTerminalFilters;
|
|
||||||
snapshotId?: string | null;
|
|
||||||
}) {
|
|
||||||
const snapshotId = String(payload.snapshotId || "").trim();
|
|
||||||
const requestKey = [
|
|
||||||
snapshotId || "latest",
|
|
||||||
JSON.stringify(payload.filters || {}),
|
|
||||||
].join("::");
|
|
||||||
const existing = pendingScanTerminalAiRequests.get(requestKey);
|
|
||||||
if (existing) {
|
|
||||||
return existing;
|
|
||||||
}
|
|
||||||
const request = buildBrowserBackendHeaders({
|
|
||||||
Accept: "application/json",
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}).then((headers) => fetchBackendApi("/api/scan/terminal/ai", {
|
|
||||||
method: "POST",
|
|
||||||
headers,
|
|
||||||
cache: "default",
|
|
||||||
body: JSON.stringify({
|
|
||||||
filters: payload.filters,
|
|
||||||
snapshot_id: snapshotId || null,
|
|
||||||
}),
|
|
||||||
}))
|
|
||||||
.then(async (response) => {
|
|
||||||
if (!response.ok) {
|
|
||||||
const body = await response.text().catch(() => "");
|
|
||||||
throw new Error(
|
|
||||||
formatHttpErrorMessage(response.status, response.statusText, body),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return response.json() as Promise<ScanTerminalResponse>;
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
pendingScanTerminalAiRequests.delete(requestKey);
|
|
||||||
});
|
|
||||||
pendingScanTerminalAiRequests.set(requestKey, request);
|
|
||||||
return request;
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
isCityDetailFresh(meta?: CityCacheMeta | null) {
|
|
||||||
return isFresh(meta);
|
|
||||||
},
|
|
||||||
|
|
||||||
readCityDetailCacheBundle() {
|
|
||||||
if (!isClient()) {
|
|
||||||
return {
|
|
||||||
details: {},
|
|
||||||
meta: {},
|
|
||||||
} satisfies CityCacheBundle;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const cached = window.sessionStorage.getItem(CACHE_KEY);
|
|
||||||
if (!cached) {
|
|
||||||
return {
|
|
||||||
details: {},
|
|
||||||
meta: {},
|
|
||||||
} satisfies CityCacheBundle;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsed = JSON.parse(cached) as
|
|
||||||
| {
|
|
||||||
entries?: Record<
|
|
||||||
string,
|
|
||||||
{ cachedAt?: number; detail?: CityDetail; revision?: string }
|
|
||||||
>;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
timestamp?: number;
|
|
||||||
data?: Record<string, CityDetail>;
|
|
||||||
};
|
|
||||||
|
|
||||||
if ("entries" in parsed && parsed.entries) {
|
|
||||||
const details: Record<string, CityDetail> = {};
|
|
||||||
const meta: Record<string, CityCacheMeta> = {};
|
|
||||||
Object.entries(parsed.entries).forEach(([cityName, entry]) => {
|
|
||||||
if (!entry?.detail) return;
|
|
||||||
const nextMeta = {
|
|
||||||
cachedAt: entry.cachedAt || 0,
|
|
||||||
revision: entry.revision || getCityRevision(entry.detail),
|
|
||||||
};
|
|
||||||
if (!isFresh(nextMeta)) return;
|
|
||||||
details[cityName] = entry.detail;
|
|
||||||
meta[cityName] = nextMeta;
|
|
||||||
});
|
|
||||||
return { details, meta };
|
|
||||||
}
|
|
||||||
|
|
||||||
return readLegacyCache(cached);
|
|
||||||
} catch {
|
|
||||||
return {
|
|
||||||
details: {},
|
|
||||||
meta: {},
|
|
||||||
} satisfies CityCacheBundle;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
readCityDetailCache() {
|
|
||||||
return this.readCityDetailCacheBundle().details;
|
|
||||||
},
|
|
||||||
|
|
||||||
writeCityDetailCacheBundle(
|
|
||||||
details: Record<string, CityDetail>,
|
|
||||||
meta: Record<string, CityCacheMeta>,
|
|
||||||
) {
|
|
||||||
if (!isClient()) return;
|
|
||||||
// Keep only the 12 most-recently-accessed cities to prevent sessionStorage bloat
|
|
||||||
const MAX_CACHED_CITIES = 12;
|
|
||||||
const allEntries = Object.entries(details).map(([cityName, detail]) => ({
|
|
||||||
cityName,
|
|
||||||
cachedAt: meta[cityName]?.cachedAt || 0,
|
|
||||||
detail,
|
|
||||||
revision: meta[cityName]?.revision || getCityRevision(detail),
|
|
||||||
}));
|
|
||||||
const topEntries = allEntries
|
|
||||||
.sort((a, b) => b.cachedAt - a.cachedAt)
|
|
||||||
.slice(0, MAX_CACHED_CITIES);
|
|
||||||
const entries = Object.fromEntries(
|
|
||||||
topEntries.map((e) => [e.cityName, { cachedAt: e.cachedAt, detail: e.detail, revision: e.revision }]),
|
|
||||||
);
|
|
||||||
try {
|
|
||||||
window.sessionStorage?.setItem(CACHE_KEY, JSON.stringify({ entries }));
|
|
||||||
} catch {
|
|
||||||
// Storage can be unavailable in embedded/private browser contexts.
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
writeCityDetailCache(data: Record<string, CityDetail>) {
|
|
||||||
const now = Date.now();
|
|
||||||
const meta = Object.fromEntries(
|
|
||||||
Object.entries(data).map(([cityName, detail]) => [
|
|
||||||
cityName,
|
|
||||||
{ cachedAt: now, revision: getCityRevision(detail) },
|
|
||||||
]),
|
|
||||||
);
|
|
||||||
this.writeCityDetailCacheBundle(data, meta);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user