60s 轮询扩展:跑道曲线 + 站点观测同步刷新

原来只轮询 summary 拿 current.temp 更新数字。
现在同时 fetch detail?depth=full 合并 amos/runway_plate_history/
airport_primary_today_obs 等字段,跑道曲线和站点线每 60s 刷新。
后端 CITY_FULL_CACHE_TTL_SEC=60 保证轻量命中缓存。
This commit is contained in:
2569718930@qq.com
2026-05-26 09:46:36 +08:00
parent 6e6d27f323
commit dd72908e0e
3 changed files with 86 additions and 17 deletions
@@ -11,21 +11,60 @@ export function LoadingSignal({
}) {
return (
<div
className={clsx("scan-loading-signal", compact && "compact")}
className={clsx(
"flex flex-col items-center justify-center text-center select-none",
compact ? "p-4 gap-2 w-full max-w-[280px]" : "p-6 gap-4 w-full max-w-[360px]"
)}
role="status"
aria-live="polite"
>
<div className="scan-loading-spinner-wrapper" aria-hidden="true">
<div className="scan-loading-spinner-ring" />
<img
src="/apple-touch-icon.png"
alt="PolyWeather"
className="scan-loading-spinner-logo"
/>
<div
className={clsx(
"relative flex items-center justify-center rounded-full shrink-0",
compact ? "w-16 h-16" : "w-24 h-24"
)}
aria-hidden="true"
>
{/* Background Track Ring */}
<div className="absolute inset-0 rounded-full border-[3px] border-slate-200/80 dark:border-slate-800" />
{/* Active Spinning Ring */}
<div className="absolute inset-0 rounded-full border-[3px] border-transparent border-t-blue-500 border-r-blue-400 animate-spin" />
{/* Centered Rounded Logo Card */}
<div
className={clsx(
"absolute bg-white dark:bg-slate-900 rounded-xl flex items-center justify-center shadow-sm border border-slate-100/80 dark:border-slate-800/80",
compact ? "w-10 h-10" : "w-14 h-14"
)}
>
<img
src="/apple-touch-icon.png"
alt="PolyWeather Logo"
className={clsx(
"object-contain rounded-lg",
compact ? "w-7 h-7" : "w-10 h-10"
)}
/>
</div>
</div>
<div className="scan-loading-copy-block">
<strong>{title}</strong>
{description ? <span>{description}</span> : null}
{/* Text Copy */}
<div className="flex flex-col items-center gap-1">
<strong className={clsx(
"font-bold text-slate-800 dark:text-slate-100",
compact ? "text-xs" : "text-sm"
)}>
{title}
</strong>
{description && (
<span className={clsx(
"text-slate-500 dark:text-slate-400 leading-normal",
compact ? "text-[10px] max-w-[200px]" : "text-xs max-w-[280px]"
)}>
{description}
</span>
)}
</div>
</div>
);