From 346836f561a58de9919995e68eb68056dc240cba Mon Sep 17 00:00:00 2001 From: "2569718930@qq.com" <2569718930@qq.com> Date: Sun, 29 Mar 2026 20:53:48 +0800 Subject: [PATCH] Improve history peak scrolling and hide Ankara MGM observations --- .../components/dashboard/Dashboard.module.css | 82 +++++++++++++++++++ .../components/dashboard/HistoryModal.tsx | 55 ++----------- frontend/lib/dashboard-utils.ts | 14 +++- 3 files changed, 99 insertions(+), 52 deletions(-) diff --git a/frontend/components/dashboard/Dashboard.module.css b/frontend/components/dashboard/Dashboard.module.css index 09e48d14..afd20562 100644 --- a/frontend/components/dashboard/Dashboard.module.css +++ b/frontend/components/dashboard/Dashboard.module.css @@ -2237,6 +2237,70 @@ height: 100% !important; } +.root :global(.history-modal .history-peak-reference) { + margin-top: 18px; + padding: 14px 16px; + border: 1px solid rgba(148, 163, 184, 0.14); + border-radius: 16px; + background: rgba(15, 23, 42, 0.42); +} + +.root :global(.history-modal .history-peak-reference-title) { + color: var(--text-primary); + font-size: 14px; + font-weight: 700; + margin-bottom: 10px; +} + +.root :global(.history-modal .history-peak-reference-scroll) { + display: grid; + gap: 8px; + max-height: 360px; + overflow-y: auto; + padding-right: 6px; + scrollbar-width: thin; + scrollbar-color: rgba(96, 165, 250, 0.5) rgba(15, 23, 42, 0.32); +} + +.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar) { + width: 8px; +} + +.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-track) { + background: rgba(15, 23, 42, 0.32); + border-radius: 999px; +} + +.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-thumb) { + background: linear-gradient( + 180deg, + rgba(56, 189, 248, 0.72) 0%, + rgba(96, 165, 250, 0.52) 100% + ); + border-radius: 999px; +} + +.root :global(.history-modal .history-peak-reference-row) { + display: grid; + grid-template-columns: minmax(72px, 88px) 1fr; + gap: 10px; + padding: 10px 12px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.03); +} + +.root :global(.history-modal .history-peak-reference-date) { + color: var(--text-secondary); + font-size: 12px; + font-weight: 700; +} + +.root :global(.history-modal .history-peak-reference-meta) { + color: var(--text-secondary); + font-size: 12px; + line-height: 1.7; +} + @media (max-width: 980px) { .root :global(.history-modal .modal-body) { padding: 18px; @@ -2250,6 +2314,10 @@ .root :global(.history-modal .history-chart-wrapper) { height: 360px; } + + .root :global(.history-modal .history-peak-reference-scroll) { + max-height: 320px; + } } @media (max-width: 640px) { @@ -2291,6 +2359,20 @@ height: 300px; padding: 8px 10px 6px; } + + .root :global(.history-modal .history-peak-reference) { + padding: 12px; + } + + .root :global(.history-modal .history-peak-reference-scroll) { + max-height: 260px; + padding-right: 2px; + } + + .root :global(.history-modal .history-peak-reference-row) { + grid-template-columns: 1fr; + gap: 6px; + } } /* ── Info Button ── */ diff --git a/frontend/components/dashboard/HistoryModal.tsx b/frontend/components/dashboard/HistoryModal.tsx index 9b12e5bf..c2a4e7fc 100644 --- a/frontend/components/dashboard/HistoryModal.tsx +++ b/frontend/components/dashboard/HistoryModal.tsx @@ -195,7 +195,6 @@ export function HistoryModal() { row.actual_peak_time && row.deb_at_peak_minus_12h != null, ) - .slice(-8) .reverse(), [summary.recentData], ); @@ -319,61 +318,19 @@ export function HistoryModal() { {!isLoading && !error && } {!isLoading && !error && settledPeakRows.length > 0 && ( -
-
+
+
{locale === "en-US" ? "Peak-12h DEB Reference (Approx.)" : "峰值前 12 小时 DEB 参考（近似）"}
-
+
{settledPeakRows.map((row) => ( -
-
+
+
{row.date}
-
+
{locale === "en-US" ? "Peak ref" : "峰值参考"}:{" "} diff --git a/frontend/lib/dashboard-utils.ts b/frontend/lib/dashboard-utils.ts index 4d3cffa0..29897987 100644 --- a/frontend/lib/dashboard-utils.ts +++ b/frontend/lib/dashboard-utils.ts @@ -182,6 +182,8 @@ export function getHeroMetaItems(detail: CityDetail, locale: Locale = "zh-CN") { const current = detail.current || {}; const parts: string[] = []; const sourceTag = getObservationSourceTag(detail); + const suppressAnkaraMgmObservation = + String(detail.name || "").trim().toLowerCase() === "ankara"; if (current.obs_time) { const ageText = @@ -211,7 +213,7 @@ export function getHeroMetaItems(detail: CityDetail, locale: Locale = "zh-CN") { parts.push(`👁️ ${current.visibility_mi}mi`); } - if (detail.mgm?.temp != null) { + if (!suppressAnkaraMgmObservation && detail.mgm?.temp != null) { const timeMatch = detail.mgm.time?.match(/T?(\d{2}:\d{2})/); const timeText = timeMatch ? ` @${timeMatch[1]}` : ""; parts.push( @@ -251,6 +253,8 @@ export function getTemperatureChartData( const hourly = detail.hourly || {}; const times = hourly.times || []; const temps = hourly.temps || []; + const suppressAnkaraMgmObservation = + String(detail.name || "").trim().toLowerCase() === "ankara"; if (!times.length) return null; @@ -354,7 +358,11 @@ export function getTemperatureChartData( }); const mgmPoints = new Array(times.length).fill(null); - if (detail.mgm?.temp != null && detail.mgm?.time) { + if ( + !suppressAnkaraMgmObservation && + detail.mgm?.temp != null && + detail.mgm?.time + ) { const match = detail.mgm.time.match(/T?(\d{2}):(\d{2})/); if (match) { let hour = Number.parseInt(match[1], 10); @@ -543,7 +551,7 @@ export function getTemperatureChartData( }; const legendParts: string[] = []; - if (detail.mgm?.temp != null) { + if (!suppressAnkaraMgmObservation && detail.mgm?.temp != null) { legendParts.push(`MGM: ${detail.mgm.temp}${detail.temp_symbol}`); } if (!hasMgmHourly && debMax != null && omMax != null && Math.abs(offset) > 0.3) {