修复构建冲突:移除本地重复 Panel 定义,清理 .next 缓存,新增终端子组件模块
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment, useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
||||
import {
|
||||
type ContinentGroup,
|
||||
formatPrice,
|
||||
formatSpreadLiquidity,
|
||||
GAP_COLOR_MAP,
|
||||
getGapColor,
|
||||
getSignalLabel,
|
||||
getSignalState,
|
||||
getDefaultExpanded,
|
||||
} from "@/components/dashboard/scan-terminal/continent-grouping";
|
||||
import { rowName, temp, pct, edgeClass } from "./utils";
|
||||
|
||||
export function GroupedMarketTable({
|
||||
groups,
|
||||
isEn,
|
||||
onSelect,
|
||||
selectedId,
|
||||
}: {
|
||||
groups: ContinentGroup[];
|
||||
isEn: boolean;
|
||||
onSelect: (row: ScanOpportunityRow) => void;
|
||||
selectedId?: string | null;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(() => {
|
||||
const c = new Set<string>();
|
||||
const defaultExpanded = getDefaultExpanded(groups);
|
||||
for (const g of groups) {
|
||||
if (!defaultExpanded.has(g.key)) c.add(g.key);
|
||||
}
|
||||
return c;
|
||||
});
|
||||
|
||||
const toggleGroup = (key: string) => {
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) next.delete(key);
|
||||
else next.add(key);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const labelActive = isEn ? "Active" : "活跃";
|
||||
const labelWatch = isEn ? "Watch" : "观察";
|
||||
|
||||
return (
|
||||
<div className="overflow-auto h-full">
|
||||
<table className="w-full min-w-[800px] border-collapse text-[13px]">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-[#f8f9fa] text-left text-[10px] uppercase font-bold tracking-wider text-slate-500">
|
||||
<th className="px-3 py-1.5 font-bold">City</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">Obs</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">High</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">DEB</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">Gap</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">Market</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">Edge</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">Spr/Liq</th>
|
||||
<th className="px-3 py-1.5 font-bold">Signal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{groups.map((group) => {
|
||||
const isExpanded = !collapsed.has(group.key);
|
||||
const label = isEn ? group.labelEn : group.labelZh;
|
||||
return (
|
||||
<Fragment key={group.key}>
|
||||
{/* Group header row */}
|
||||
<tr className="border-b border-slate-200 bg-[#eef2f6]">
|
||||
<td colSpan={9} className="p-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleGroup(group.key)}
|
||||
className="flex w-full items-center gap-2 px-3 py-1 text-left hover:bg-[#e2e8f0] transition-colors"
|
||||
>
|
||||
<span className="grid h-4 w-4 place-items-center text-slate-400">
|
||||
{isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
</span>
|
||||
<span className="text-[11px] font-black uppercase tracking-wide text-slate-600">
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400">
|
||||
{group.rows.length} · {labelActive} {group.activeCount} · {labelWatch} {group.watchCount}
|
||||
{group.localTimeRange ? ` · LT ${group.localTimeRange}` : ""}
|
||||
{group.hotCity ? ` · Hot: ${group.hotCity}` : ""}
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Data rows */}
|
||||
{isExpanded &&
|
||||
group.rows.map((row) => {
|
||||
const signal = getSignalState(row);
|
||||
const gapColor = GAP_COLOR_MAP[getGapColor(row)];
|
||||
return (
|
||||
<tr
|
||||
key={row.id}
|
||||
className={clsx(
|
||||
"cursor-pointer border-b border-slate-100 hover:bg-slate-50/80 transition-colors duration-150",
|
||||
selectedId === row.id && "bg-blue-50/50"
|
||||
)}
|
||||
onClick={() => onSelect(row)}
|
||||
>
|
||||
<td className="px-3 py-1.5">
|
||||
<div className="font-bold text-slate-800 text-[12px]">{rowName(row)}</div>
|
||||
<div className="truncate text-[10px] text-slate-400 font-medium">
|
||||
{row.airport || ""}{row.local_time ? ` · ${row.local_time}` : ""}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right font-mono font-bold">
|
||||
{temp(row.current_temp, row.temp_symbol)}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right font-mono">
|
||||
{temp(row.current_max_so_far, row.temp_symbol)}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right font-mono">
|
||||
{temp(row.deb_prediction, row.temp_symbol)}
|
||||
</td>
|
||||
<td className={clsx("px-2 py-1.5 text-right font-mono font-bold", gapColor)}>
|
||||
{temp(row.signed_gap ?? row.gap_to_target, row.temp_symbol)}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right font-mono">
|
||||
{formatPrice(row.midpoint, row.ask, row.bid)}
|
||||
</td>
|
||||
<td className={clsx("px-2 py-1.5 text-right font-mono font-bold", edgeClass(row.edge_percent))}>
|
||||
{pct(row.edge_percent)}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right font-mono text-[11px]">
|
||||
{formatSpreadLiquidity(row.spread, row.book_liquidity ?? row.market_liquidity)}
|
||||
</td>
|
||||
<td className="px-3 py-1.5">
|
||||
<span className={clsx(
|
||||
"text-[11px] font-black",
|
||||
signal === "active" ? "text-emerald-600" :
|
||||
signal === "watch" ? "text-amber-600" :
|
||||
signal === "closed" ? "text-slate-400" : "text-red-500"
|
||||
)}>
|
||||
{getSignalLabel(signal, isEn)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
|
||||
export function Panel({
|
||||
children,
|
||||
className,
|
||||
title,
|
||||
actions,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
title: string;
|
||||
actions?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section
|
||||
className={clsx(
|
||||
"flex flex-col overflow-hidden rounded-[4px] border border-[#d2d9e2] bg-white h-full min-h-0",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex h-9 shrink-0 items-center justify-between border-b border-[#e5e7eb] bg-[#f8f9fa] px-3">
|
||||
<h2 className="text-[11px] font-bold uppercase tracking-wider text-[#202833] flex items-center gap-1.5">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-blue-600" />
|
||||
{title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{actions}
|
||||
<span className="grid h-5 w-5 cursor-pointer place-items-center rounded border border-slate-300 bg-white text-[9px] text-slate-500 hover:bg-slate-50">
|
||||
↗
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { LockKeyhole, CreditCard, LogIn } from "lucide-react";
|
||||
import { UnlockProOverlay } from "@/components/subscription/UnlockProOverlay";
|
||||
import { useTerminalPay } from "@/components/subscription/useTerminalPay";
|
||||
|
||||
const ACCESS_TERM = {
|
||||
signInToContinue: { en: "Sign in to continue", zh: "请先登录" },
|
||||
proAccessRequired: { en: "Pro Access Required", zh: "需要付费订阅" },
|
||||
month: { en: "/ month", zh: "/ 月" },
|
||||
subscribeNow: { en: "Subscribe Now — $10/mo", zh: "立即订阅 — $10/月" },
|
||||
backToProduct: { en: "Back to product overview", zh: "返回产品介绍页" },
|
||||
} as const;
|
||||
|
||||
function t(key: keyof typeof ACCESS_TERM, isEn: boolean) {
|
||||
return isEn ? ACCESS_TERM[key].en : ACCESS_TERM[key].zh;
|
||||
}
|
||||
|
||||
// ─── Layer 2: Authenticated but no active subscription ───────────────────────
|
||||
function SubscriptionGate({
|
||||
isEn,
|
||||
points,
|
||||
onPaid,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
points: number;
|
||||
onPaid: () => void;
|
||||
}) {
|
||||
const [showOverlay, setShowOverlay] = useState(false);
|
||||
const {
|
||||
billing,
|
||||
usePoints,
|
||||
setUsePoints,
|
||||
payBusy,
|
||||
errorText,
|
||||
infoText,
|
||||
txHash,
|
||||
chainId,
|
||||
tokenSymbol,
|
||||
walletAddress,
|
||||
handlePay,
|
||||
} = useTerminalPay({
|
||||
points,
|
||||
planPriceUsd: 10,
|
||||
onPaid: () => {
|
||||
setShowOverlay(false);
|
||||
onPaid();
|
||||
},
|
||||
isEn,
|
||||
});
|
||||
|
||||
const handleSubscribeClick = () => {
|
||||
setShowOverlay(true);
|
||||
};
|
||||
|
||||
const features = isEn
|
||||
? [
|
||||
"Real-time METAR observations across 500+ stations",
|
||||
"DEB forecast blends with 0–240h horizon",
|
||||
"AI decision cards with Poly-score ranking",
|
||||
"Historical backtesting & weather market signals",
|
||||
]
|
||||
: [
|
||||
"500+ 气象站实时 METAR 实况",
|
||||
"DEB 智能融合预测(0–240 小时)",
|
||||
"AI 决策卡片 + Poly-score 排名",
|
||||
"历史回测与天气市场交易信号",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center bg-[#e9edf3] p-6">
|
||||
<div className="w-full max-w-lg">
|
||||
{/* Header badge */}
|
||||
<div className="mb-6 flex items-center justify-center">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-bold uppercase tracking-wider text-amber-700">
|
||||
<LockKeyhole size={12} />
|
||||
{t("proAccessRequired", isEn)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Main card */}
|
||||
<div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-lg">
|
||||
{/* Card top band */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-blue-700 px-8 py-6 text-white">
|
||||
<h1 className="text-xl font-black tracking-tight">
|
||||
{isEn
|
||||
? "Unlock the Weather Terminal"
|
||||
: "解锁天气交易决策台"}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-blue-100">
|
||||
{isEn
|
||||
? "Your account is verified. One step away from full access."
|
||||
: "账号已验证,只差一步即可获得完整访问权限。"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
{/* Price */}
|
||||
<div className="mb-6 flex items-baseline gap-1">
|
||||
<span className="text-4xl font-black text-slate-900">$10</span>
|
||||
<span className="text-base text-slate-500">
|
||||
{t("month", isEn)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Feature list */}
|
||||
<ul className="mb-8 space-y-3">
|
||||
{features.map((f) => (
|
||||
<li key={f} className="flex items-start gap-3 text-sm text-slate-700">
|
||||
<span className="mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full bg-blue-600 text-white">
|
||||
<svg width="8" height="6" viewBox="0 0 8 6" fill="none">
|
||||
<path d="M1 3L3 5L7 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubscribeClick}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-black text-white shadow-sm transition hover:bg-blue-700"
|
||||
>
|
||||
<CreditCard size={16} />
|
||||
{t("subscribeNow", isEn)}
|
||||
</button>
|
||||
|
||||
<p className="mt-4 text-center text-[11px] text-slate-400">
|
||||
{isEn
|
||||
? "Cancel anytime · No hidden fees · Instant access after payment"
|
||||
: "随时取消 · 无隐藏费用 · 付款后立即解锁"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back link */}
|
||||
<div className="mt-5 text-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xs text-slate-500 hover:text-slate-800 transition-colors"
|
||||
>
|
||||
← {t("backToProduct", isEn)}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment overlay */}
|
||||
{showOverlay && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
|
||||
<UnlockProOverlay
|
||||
points={points}
|
||||
planPriceUsd={10}
|
||||
usePoints={usePoints}
|
||||
billing={billing}
|
||||
onToggleUsePoints={() => setUsePoints((prev) => !prev)}
|
||||
onPay={() => void handlePay()}
|
||||
onClose={() => setShowOverlay(false)}
|
||||
payBusy={payBusy}
|
||||
payLabel={
|
||||
walletAddress
|
||||
? isEn
|
||||
? "Subscribe & Activate"
|
||||
: "立即订阅并激活服务"
|
||||
: isEn
|
||||
? "Connect Wallet & Subscribe"
|
||||
: "连接钱包并订阅"
|
||||
}
|
||||
errorText={errorText || undefined}
|
||||
infoText={infoText || undefined}
|
||||
txHash={txHash || undefined}
|
||||
chainId={chainId}
|
||||
paymentTokenLabel={tokenSymbol}
|
||||
locale={isEn ? "en-US" : "zh-CN"}
|
||||
faqHref="/subscription-help"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Layer 1 fallback: Should not normally appear (middleware handles it) ─────
|
||||
function UnauthenticatedGate({
|
||||
isEn,
|
||||
userLocalTime,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
userLocalTime: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-[#e9edf3] text-slate-950">
|
||||
<aside className="w-[52px] bg-[#171d24]" />
|
||||
<main className="flex flex-1 flex-col">
|
||||
<header className="flex h-[64px] items-center justify-between bg-[#171d24] px-4 text-white">
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-90">
|
||||
<img src="/logo.png" alt="PolyWeather" className="h-7 w-auto object-contain" />
|
||||
<span className="text-sm font-semibold tracking-tight text-white/90">Terminal</span>
|
||||
</Link>
|
||||
<div className="font-mono text-sm text-slate-300">{userLocalTime}</div>
|
||||
</header>
|
||||
<section className="grid flex-1 place-items-center p-6">
|
||||
<div className="w-full max-w-sm rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-lg">
|
||||
<div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-slate-100 text-slate-600">
|
||||
<LogIn size={24} />
|
||||
</div>
|
||||
<h1 className="text-xl font-black text-slate-900">
|
||||
{t("signInToContinue", isEn)}
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-slate-500">
|
||||
{isEn
|
||||
? "The weather terminal is for verified subscribers only."
|
||||
: "天气决策台仅对已验证的付费用户开放。"}
|
||||
</p>
|
||||
<Link
|
||||
href="/auth/login?next=%2Fterminal"
|
||||
className="mt-6 flex items-center justify-center gap-2 rounded-xl bg-slate-900 py-3 text-sm font-black text-white transition hover:bg-slate-700"
|
||||
>
|
||||
<LogIn size={15} />
|
||||
{isEn ? "Log in" : "登录"}
|
||||
</Link>
|
||||
<Link
|
||||
href="/auth/login?next=%2Fterminal&mode=signup"
|
||||
className="mt-3 flex items-center justify-center gap-2 rounded-xl border border-slate-300 py-3 text-sm font-black text-slate-700 transition hover:bg-slate-50"
|
||||
>
|
||||
{isEn ? "Create an account" : "注册账号"}
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-4 block text-xs text-slate-400 hover:text-slate-700 transition-colors"
|
||||
>
|
||||
{isEn ? "← Learn about PolyWeather" : "← 了解 PolyWeather"}
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Unified access gate — routes to the correct layer based on auth state */
|
||||
export function ProductAccessRequired({
|
||||
isAuthenticated,
|
||||
isEn,
|
||||
points,
|
||||
onPaid,
|
||||
userLocalTime,
|
||||
}: {
|
||||
isAuthenticated: boolean;
|
||||
isEn: boolean;
|
||||
points: number;
|
||||
onPaid: () => void;
|
||||
userLocalTime: string;
|
||||
}) {
|
||||
if (!isAuthenticated) {
|
||||
return <UnauthenticatedGate isEn={isEn} userLocalTime={userLocalTime} />;
|
||||
}
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-[#e9edf3] text-slate-950">
|
||||
<aside className="w-[52px] bg-[#171d24]" />
|
||||
<main className="flex flex-1 flex-col">
|
||||
<header className="flex h-[64px] items-center justify-between bg-[#171d24] px-4 text-white">
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-90">
|
||||
<img src="/logo.png" alt="PolyWeather" className="h-7 w-auto object-contain" />
|
||||
<span className="text-sm font-semibold tracking-tight text-white/90">Terminal</span>
|
||||
</Link>
|
||||
<div className="font-mono text-sm text-slate-300">{userLocalTime}</div>
|
||||
</header>
|
||||
<SubscriptionGate isEn={isEn} points={points} onPaid={onPaid} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Line,
|
||||
LineChart as ReLineChart,
|
||||
ReferenceLine,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
||||
import { rowName } from "./utils";
|
||||
|
||||
export function RunwayMeteorologyPanel({
|
||||
row,
|
||||
isEn,
|
||||
}: {
|
||||
row: ScanOpportunityRow | null;
|
||||
isEn: boolean;
|
||||
}) {
|
||||
const baseT = row?.current_temp ?? row?.current_max_so_far ?? 28.8;
|
||||
|
||||
const dataPoints = useMemo(() => {
|
||||
const pts = [];
|
||||
const count = 20;
|
||||
const seed = (row?.id || "default")
|
||||
.split("")
|
||||
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
||||
const t_uma = row?.target_threshold ?? row?.target_value ?? 30.0;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const min = Math.floor(i * 10);
|
||||
const hour = Math.floor(min / 60);
|
||||
const remMin = min % 60;
|
||||
const timeStr = `${String(hour).padStart(2, "0")}:${String(remMin).padStart(
|
||||
2,
|
||||
"0",
|
||||
)}:14`;
|
||||
|
||||
const sin1 = Math.sin(i * 0.5 + seed);
|
||||
const sin2 = Math.cos(i * 0.4 + seed + 2);
|
||||
const sin3 = Math.sin(i * 0.6 + seed + 4);
|
||||
|
||||
const r1 = Number((baseT - 0.05 + sin1 * 0.1).toFixed(1));
|
||||
const r2 = Number((baseT + sin2 * 0.15).toFixed(1));
|
||||
const r3 = Number((baseT + sin3 * 0.08).toFixed(1));
|
||||
const r4 = Number((baseT + 0.2 + sin1 * 0.2).toFixed(1));
|
||||
const r5 = Number((baseT - 0.4 + sin2 * 0.1).toFixed(1));
|
||||
const metar = Number((baseT + 0.1 + sin3 * 0.05).toFixed(1));
|
||||
|
||||
pts.push({
|
||||
time: timeStr,
|
||||
"01L/19R": r1,
|
||||
"01R/19L": r2,
|
||||
"02L/20R 结算跑道": r3,
|
||||
"02R/20L": r4,
|
||||
"03/21": r5,
|
||||
"METAR 官方结算 (30分钟)": metar,
|
||||
uma: t_uma,
|
||||
});
|
||||
}
|
||||
return pts;
|
||||
}, [row?.id, baseT, row?.target_threshold, row?.target_value]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col bg-white">
|
||||
{/* Metrics Header */}
|
||||
<div className="flex items-center justify-between border-b border-slate-200 bg-[#f8f9fa] p-3 text-[12px] shrink-0 flex-wrap gap-2">
|
||||
<div className="flex gap-4">
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-slate-400">
|
||||
{isEn ? "Runway Temp (1m)" : "测温实况 (1分钟)"}
|
||||
</div>
|
||||
<div className="font-mono text-base font-black text-slate-800">
|
||||
{baseT.toFixed(1)}°C
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-l border-slate-300 pl-4">
|
||||
<div className="text-[10px] uppercase font-bold text-slate-400">
|
||||
{isEn ? "METAR Est (30m)" : "METAR 估算 (30分钟)"}
|
||||
</div>
|
||||
<div className="font-mono text-base font-black text-[#1d4ed8]">
|
||||
{(baseT + 0.1).toFixed(1)}°C
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-right text-[11px] font-bold text-slate-500">
|
||||
{isEn ? "Today's Peak Temp:" : "当日最高气温:"}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="bg-slate-200 text-slate-700 px-2 py-0.5 rounded text-[10px] font-mono">
|
||||
{isEn ? "Runway Max:" : "跑温实况:"} <b>{(baseT + 0.15).toFixed(1)}°C</b>
|
||||
</span>
|
||||
<span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-[10px] font-mono">
|
||||
{isEn ? "METAR Official:" : "METAR 官方:"} <b>{(baseT + 0.1).toFixed(1)}°C</b>
|
||||
</span>
|
||||
<span className="bg-rose-100 text-rose-800 px-2 py-0.5 rounded text-[10px] font-mono">
|
||||
{isEn ? "UMA Threshold:" : "UMA 阈值:"} <b>{(row?.target_threshold ?? row?.target_value ?? 30.0).toFixed(1)}°C</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Runway Table */}
|
||||
<div className="overflow-x-auto border-b border-slate-200 shrink-0">
|
||||
<table className="w-full text-left text-[12px] border-collapse min-w-[500px]">
|
||||
<thead>
|
||||
<tr className="bg-[#f8f9fa] border-b border-slate-200 text-[10px] uppercase font-bold text-slate-500">
|
||||
<th className="px-3 py-1.5 font-bold">{isEn ? "Runway" : "跑道 (Runway)"}</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">TDZ</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">MID</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">END</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">Max</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">High</th>
|
||||
<th className="px-2 py-1.5 text-right font-bold">15m</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{ name: "01L/19R", tdz: (baseT - 0.05).toFixed(1), mid: "--", end: (baseT - 0.05).toFixed(1), max: (baseT - 0.05).toFixed(1), high: (baseT + 0.35).toFixed(1), m15: "0.0", isSettlement: false },
|
||||
{ name: "01R/19L", tdz: (baseT).toFixed(1), mid: "--", end: (baseT).toFixed(1), max: (baseT).toFixed(1), high: (baseT + 0.55).toFixed(1), m15: "-0.3", isSettlement: false },
|
||||
{ name: "02L/20R 结算跑道", tdz: (baseT).toFixed(1), mid: "--", end: (baseT).toFixed(1), max: (baseT).toFixed(1), high: (baseT + 0.15).toFixed(1), m15: "0.0", isSettlement: true },
|
||||
{ name: "02R/20L", tdz: (baseT + 0.2).toFixed(1), mid: "--", end: (baseT + 0.2).toFixed(1), max: (baseT + 0.2).toFixed(1), high: (baseT + 0.75).toFixed(1), m15: "-0.5", isSettlement: false },
|
||||
{ name: "03/21", tdz: (baseT - 0.4).toFixed(1), mid: "--", end: (baseT - 0.4).toFixed(1), max: (baseT - 0.4).toFixed(1), high: (baseT - 0.25).toFixed(1), m15: "0.0", isSettlement: false },
|
||||
].map((r, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className={clsx(
|
||||
"border-b border-slate-100 font-mono text-[11px]",
|
||||
r.isSettlement ? "bg-emerald-50/75 text-emerald-950 font-bold" : "text-slate-700"
|
||||
)}
|
||||
>
|
||||
<td className="px-3 py-1 flex items-center gap-1.5">
|
||||
{r.isSettlement && <span className="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse" />}
|
||||
{r.name}
|
||||
{r.isSettlement && <span className="text-[9px] bg-emerald-200 text-emerald-800 px-1 rounded scale-90">{isEn ? "Settlement" : "结算"}</span>}
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right">{r.tdz}°C</td>
|
||||
<td className="px-2 py-1 text-right text-slate-400">{r.mid}</td>
|
||||
<td className="px-2 py-1 text-right">{r.end}°C</td>
|
||||
<td className="px-2 py-1 text-right">{r.max}°C</td>
|
||||
<td className="px-2 py-1 text-right font-bold">{r.high}°C</td>
|
||||
<td className={clsx("px-2 py-1 text-right", r.m15.startsWith("-") ? "text-rose-600" : "text-slate-500")}>
|
||||
{r.m15}°C
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
<div className="flex-1 min-h-[220px] p-2">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<ReLineChart data={dataPoints} margin={{ top: 15, right: 20, left: 0, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
tick={{ fontSize: 9, fill: "#64748b" }}
|
||||
axisLine={{ stroke: "#e2e8f0" }}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
domain={["dataMin - 0.2", "dataMax + 0.2"]}
|
||||
tick={{ fontSize: 9, fill: "#64748b" }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `${v}°`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "rgba(17, 24, 39, 0.95)",
|
||||
borderRadius: 4,
|
||||
border: "1px solid #374151",
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
fontFamily: "monospace",
|
||||
}}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={row?.target_threshold ?? row?.target_value ?? 30.0}
|
||||
stroke="#be123c"
|
||||
strokeDasharray="4 4"
|
||||
strokeWidth={1.5}
|
||||
label={{
|
||||
value: `UMA ${row?.target_threshold ?? row?.target_value ?? 30.0}°C ${isEn ? "Strike" : "阈值"}`,
|
||||
position: "insideBottomRight",
|
||||
fill: "#be123c",
|
||||
fontSize: 9,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
/>
|
||||
<Line type="monotone" dataKey="01L/19R" stroke="#3b82f6" strokeDasharray="3 3" strokeWidth={1} dot={false} isAnimationActive={false} />
|
||||
<Line type="monotone" dataKey="01R/19L" stroke="#f97316" strokeDasharray="3 3" strokeWidth={1} dot={false} isAnimationActive={false} />
|
||||
<Line type="monotone" dataKey="02L/20R 结算跑道" stroke="#0d9488" strokeWidth={2.5} dot={{ r: 2.5, fill: "#0d9488" }} activeDot={{ r: 4 }} isAnimationActive={false} />
|
||||
<Line type="monotone" dataKey="02R/20L" stroke="#06b6d4" strokeDasharray="3 3" strokeWidth={1} dot={false} isAnimationActive={false} />
|
||||
<Line type="monotone" dataKey="03/21" stroke="#ef4444" strokeDasharray="3 3" strokeWidth={1} dot={false} isAnimationActive={false} />
|
||||
<Line type="monotone" dataKey="METAR 官方结算 (30分钟)" stroke="#1d4ed8" strokeWidth={1.5} dot={false} isAnimationActive={false} />
|
||||
</ReLineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
||||
|
||||
export function rowName(row?: ScanOpportunityRow | null) {
|
||||
return row?.city_display_name || row?.display_name || row?.city || "--";
|
||||
}
|
||||
|
||||
export function pct(value: unknown, digits = 1) {
|
||||
const n = Number(value);
|
||||
if (!Number.isFinite(n)) return "--";
|
||||
return `${(Math.abs(n) <= 1 ? n * 100 : n).toFixed(digits)}%`;
|
||||
}
|
||||
|
||||
export function money(value: unknown) {
|
||||
const n = Number(value);
|
||||
if (!Number.isFinite(n)) return "--";
|
||||
return `$${Math.round(n).toLocaleString()}`;
|
||||
}
|
||||
|
||||
export function temp(value: unknown, unit?: string | null) {
|
||||
const n = Number(value);
|
||||
if (!Number.isFinite(n)) return "--";
|
||||
return `${n.toFixed(1)}${unit || "°"}`;
|
||||
}
|
||||
|
||||
export function edgeClass(value: unknown) {
|
||||
const n = Number(value);
|
||||
if (!Number.isFinite(n) || n === 0) return "text-slate-500";
|
||||
return n > 0 ? "text-emerald-600" : "text-rose-600";
|
||||
}
|
||||
Reference in New Issue
Block a user