feat: implement scan terminal mobile dashboard components and data management logic

2026-05-17 15:32:47 +08:00
parent 04e0369255
commit 2d9aa576dd
11 changed files with 450 additions and 4 deletions
@@ -5,6 +5,7 @@ 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 { AirportEvidencePanel } from "@/components/dashboard/scan-terminal/AirportEvidencePanel";
 import { CityCardHeader } from "@/components/dashboard/scan-terminal/CityCardHeader";
 import { MobileDecisionCard } from "@/components/dashboard/scan-terminal/MobileDecisionCard";
 import { ModelEvidencePanel } from "@/components/dashboard/scan-terminal/ModelEvidencePanel";
@@ -654,6 +655,7 @@ export function AiPinnedCityCard({
                />
              </div>

+              <AirportEvidencePanel detail={detail} isEn={isEn} />
              <ModelEvidencePanel detail={detail} isEn={isEn} />
            </div>
          ) : !detail ? (
@@ -0,0 +1,146 @@
+"use client";
+
+import type { CityDetail } from "@/lib/dashboard-types";
+import { getDisplayAirportPrimary } from "@/lib/airport-observation-display";
+import { formatTemperatureValue } from "@/lib/temperature-utils";
+
+const FOCUS_RUNWAY_PAIRS: Record<string, Array<[string, string]>> = {
+  chongqing: [["02L", "20R"]],
+  shanghai: [["17L", "35R"]],
+  wuhan: [["04", "22"]],
+  beijing: [["01", "19"]],
+  guangzhou: [["02L", "20R"]],
+  chengdu: [["02L", "20R"]],
+  seoul: [["15R", "33L"]],
+};
+
+function normalizeRunwayLabel(value?: string | null) {
+  return String(value || "").trim().toUpperCase().replace(/\s+/g, "");
+}
+
+function normalizeCityKey(value?: string | null) {
+  return String(value || "").trim().toLowerCase().replace(/[\s_-]+/g, "");
+}
+
+function pairKey(pair: [string, string]) {
+  return pair.map(normalizeRunwayLabel).sort().join("/");
+}
+
+function toFiniteNumber(value: unknown) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+function formatObsTime(value: unknown) {
+  const raw = String(value || "").trim();
+  if (!raw) return "";
+  if (raw.includes("T")) {
+    const parsed = new Date(raw);
+    if (!Number.isNaN(parsed.getTime())) {
+      return `${String(parsed.getUTCHours()).padStart(2, "0")}:${String(
+        parsed.getUTCMinutes(),
+      ).padStart(2, "0")}Z`;
+    }
+  }
+  return raw.length >= 16 && raw[10] === " " ? raw.slice(11, 16) : raw;
+}
+
+function buildFocusedRunwayEvidence(detail: CityDetail | null) {
+  if (!detail) return null;
+  const cityKey = normalizeCityKey(detail.name) || normalizeCityKey(detail.display_name);
+  const focusPairs = FOCUS_RUNWAY_PAIRS[cityKey];
+  if (!focusPairs?.length) return null;
+  const focusKeys = new Set(focusPairs.map(pairKey));
+  const runwayObs = detail.amos?.runway_obs || {};
+  const runwayPairs = runwayObs.runway_pairs || [];
+  const runwayTemps = runwayObs.temperatures || [];
+  const pointTemps = runwayObs.point_temperatures || [];
+  const rows: Array<{
+    label: string;
+    maxTemp: number;
+    values: number[];
+  }> = [];
+
+  runwayPairs.forEach((rawPair, index) => {
+    const pair = rawPair as [string, string];
+    if (!Array.isArray(pair) || pair.length < 2) return;
+    if (!focusKeys.has(pairKey(pair))) return;
+    const values = [
+      ...(Array.isArray(runwayTemps[index]) ? runwayTemps[index] : []),
+      toFiniteNumber(pointTemps[index]?.tdz_temp),
+      toFiniteNumber(pointTemps[index]?.mid_temp),
+      toFiniteNumber(pointTemps[index]?.end_temp),
+    ].filter((value): value is number => Number.isFinite(value));
+    if (!values.length) return;
+    rows.push({
+      label: `${normalizeRunwayLabel(pair[0])}/${normalizeRunwayLabel(pair[1])}`,
+      maxTemp: Math.max(...values),
+      values,
+    });
+  });
+
+  if (!rows.length) return null;
+  return {
+    observedAt:
+      formatObsTime(detail.amos?.observation_time_local) ||
+      formatObsTime(detail.amos?.observation_time),
+    rows,
+    sourceLabel: detail.amos?.source_label || detail.amos?.source || "AMOS",
+  };
+}
+
+export function AirportEvidencePanel({
+  detail,
+  isEn,
+}: {
+  detail: CityDetail | null;
+  isEn: boolean;
+}) {
+  const airportPrimary = getDisplayAirportPrimary(detail);
+  const airportCurrent = detail?.airport_current;
+  const station = airportPrimary || airportCurrent || null;
+  const runwayEvidence = buildFocusedRunwayEvidence(detail);
+  const tempSymbol = detail?.temp_symbol || "°C";
+  if (!station && !runwayEvidence) return null;
+
+  return (
+    <section className="scan-ai-city-section scan-airport-evidence">
+      <div className="scan-ai-city-section-head">
+        <div>
+          <span className="scan-ai-city-kicker">
+            {isEn ? "Airport live evidence" : "机场实时证据"}
+          </span>
+          <h4>{isEn ? "Airport / focused runway" : "机场主站 / 重点跑道"}</h4>
+        </div>
+      </div>
+      <div className="scan-airport-evidence-grid">
+        {station ? (
+          <div className="scan-airport-evidence-card">
+            <span>{isEn ? "Airport station" : "机场主站"}</span>
+            <b>
+              {station.temp != null && Number.isFinite(Number(station.temp))
+                ? formatTemperatureValue(Number(station.temp), tempSymbol, { digits: 1 })
+                : "--"}
+            </b>
+            <small>
+              {[station.station_label || station.station_code, station.source_label || "METAR", formatObsTime(station.obs_time || station.report_time)]
+                .filter(Boolean)
+                .join(" · ")}
+            </small>
+          </div>
+        ) : null}
+        {runwayEvidence?.rows.map((row) => (
+          <div className="scan-airport-evidence-card runway" key={row.label}>
+            <span>{isEn ? "Focused runway" : "重点跑道"}</span>
+            <b>{formatTemperatureValue(row.maxTemp, tempSymbol, { digits: 1 })}</b>
+            <small>
+              {[row.label, runwayEvidence.sourceLabel, runwayEvidence.observedAt]
+                .filter(Boolean)
+                .join(" · ")}
+            </small>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
@@ -5,6 +5,7 @@ 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 { AirportEvidencePanel } from "@/components/dashboard/scan-terminal/AirportEvidencePanel";
 import {
  CityStatusTags,
  type CityStatusTag,
@@ -102,6 +103,7 @@ export function MobileDecisionCard({
  const loadingCopy = getCityLoadingCopy({ isEn, isHkoObservation });
  const [modelOpen, setModelOpen] = useState(false);
  const [chartOpen, setChartOpen] = useState(false);
+  const [airportOpen, setAirportOpen] = useState(false);
  const statusTags: CityStatusTag[] = decisionState.badges.length
    ? decisionState.badges
    : [{ label: decisionState.aiStatusLabel, tone: decisionState.aiStatusTone as StatusTone }];
@@ -201,6 +203,17 @@ export function MobileDecisionCard({
            tempSymbol={tempSymbol}
          />

+          <details
+            className="scan-ai-city-section scan-mobile-fold"
+            open={airportOpen}
+            onToggle={(event) => setAirportOpen(event.currentTarget.open)}
+          >
+            <summary className="scan-ai-city-section-title">
+              {isEn ? "Airport live evidence" : "机场实时证据"}
+            </summary>
+            {airportOpen ? <AirportEvidencePanel detail={detail} isEn={isEn} /> : null}
+          </details>
+
          <details
            className="scan-ai-city-section scan-mobile-fold"
            open={modelOpen}
@@ -14,7 +14,7 @@ import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
 import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
 import type { Locale } from "@/lib/i18n";

-export type ScanTerminalContentView = "analysis" | "map";
+export type ScanTerminalContentView = "city-list" | "analysis" | "map";

 type ThemeMode = "dark" | "light";

@@ -42,6 +42,12 @@ export function runTests() {
    !shellPartsSource.includes('"monitor"') && !shellPartsSource.includes('"runway"'),
    "scan terminal content views must not include market monitor or runway tabs",
  );
+  assert(
+    shellPartsSource.includes('"city-list"') &&
+      dashboardSource.includes("scan-mobile-city-list-view") &&
+      dashboardSource.includes('setActiveView("city-list")'),
+    "mobile web should expose the lightweight city-list entry view",
+  );
  assert(
    !dashboardSource.includes('setActiveView("monitor")') &&
      !dashboardSource.includes('setActiveView("runway")') &&
@@ -0,0 +1,52 @@
+import fs from "node:fs";
+import path from "node:path";
+
+function assert(condition: unknown, message: string) {
+  if (!condition) throw new Error(message);
+}
+
+export function runTests() {
+  const projectRoot = process.cwd();
+  const queryPath = path.join(
+    projectRoot,
+    "components",
+    "dashboard",
+    "scan-terminal",
+    "use-scan-terminal-query.ts",
+  );
+  const dashboardPath = path.join(
+    projectRoot,
+    "components",
+    "dashboard",
+    "ScanTerminalDashboard.tsx",
+  );
+  const airportEvidencePath = path.join(
+    projectRoot,
+    "components",
+    "dashboard",
+    "scan-terminal",
+    "AirportEvidencePanel.tsx",
+  );
+
+  const querySource = fs.readFileSync(queryPath, "utf8");
+  const dashboardSource = fs.readFileSync(dashboardPath, "utf8");
+  const airportEvidenceSource = fs.readFileSync(airportEvidencePath, "utf8");
+
+  assert(
+    querySource.includes("void fetchScanTerminal({ forceRefresh: false, showLoading: false })"),
+    "web auto refresh must read cached scan data instead of forcing a full server scan",
+  );
+  assert(
+    dashboardSource.includes("scan-mobile-city-list-view") &&
+      dashboardSource.includes("MapCanvas") &&
+      dashboardSource.indexOf("scan-mobile-city-list-view") < dashboardSource.indexOf("scan-map-view"),
+    "mobile city list should be the lightweight entry before the optional map view",
+  );
+  assert(
+    airportEvidenceSource.includes("FOCUS_RUNWAY_PAIRS") &&
+      airportEvidenceSource.includes("chongqing") &&
+      airportEvidenceSource.includes("seoul") &&
+      !airportEvidenceSource.includes("busan:"),
+    "airport evidence must only expose configured focused runways, not all runway observations",
+  );
+}
@@ -84,7 +84,7 @@ export function useScanTerminalQuery({
      ) {
        return;
      }
-      void fetchScanTerminal({ forceRefresh: true, showLoading: false });
+      void fetchScanTerminal({ forceRefresh: false, showLoading: false });
    }, scanTerminalQueryPolicy.autoRefreshMs);
    return () => window.clearInterval(intervalId);
  }, [fetchScanTerminal, isLoading, isPro, proAccessLoading]);