feat: Implement initial PolyWeather dashboard with city list, detail view, map, and API endpoints.
This commit is contained in:
2569718930@qq.com
@@ -1,21 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { AlertTriangle, Bot, Globe2 } from "lucide-react";
|
||||
import {
|
||||
AlertTriangle,
|
||||
Bot,
|
||||
Globe2,
|
||||
Languages,
|
||||
Radar,
|
||||
Signal,
|
||||
Waves,
|
||||
} from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CityDetailPanel } from "@/components/city-detail-panel";
|
||||
import { CityList } from "@/components/city-list";
|
||||
import { MapView } from "@/components/map-view";
|
||||
import { getCities, getCityDetail } from "@/lib/api";
|
||||
import { copy, type Locale } from "@/lib/i18n";
|
||||
import type { CityDetail, CitySummary } from "@/lib/types";
|
||||
|
||||
export function PolyWeatherDashboard() {
|
||||
const [locale, setLocale] = useState<Locale>("zh");
|
||||
const [cities, setCities] = useState<CitySummary[]>([]);
|
||||
const [selectedCity, setSelectedCity] = useState<string | null>(null);
|
||||
const [selectedDetail, setSelectedDetail] = useState<CityDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const t = copy[locale];
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
@@ -64,6 +75,14 @@ export function PolyWeatherDashboard() {
|
||||
);
|
||||
}, [cities]);
|
||||
|
||||
const riskStats = useMemo(() => {
|
||||
return {
|
||||
high: cities.filter((c) => c.risk_level === "high").length,
|
||||
medium: cities.filter((c) => c.risk_level === "medium").length,
|
||||
low: cities.filter((c) => c.risk_level === "low").length,
|
||||
};
|
||||
}, [cities]);
|
||||
|
||||
async function refreshCurrentCity() {
|
||||
if (!selectedCity) return;
|
||||
setLoading(true);
|
||||
@@ -77,35 +96,94 @@ export function PolyWeatherDashboard() {
|
||||
}
|
||||
}
|
||||
|
||||
function localizeError(raw: string) {
|
||||
if (raw.includes("POLYWEATHER_API_BASE_URL")) {
|
||||
return t.backendConfigMissing;
|
||||
}
|
||||
if (raw.toLowerCase().includes("failed to load cities")) {
|
||||
return `${t.loadCitiesFailed}: ${raw}`;
|
||||
}
|
||||
if (raw.toLowerCase().includes("failed to load city detail")) {
|
||||
return `${t.loadCityDetailFailed}: ${raw}`;
|
||||
}
|
||||
return raw;
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="h-screen w-full p-3 md:p-4">
|
||||
<div className="grid h-full grid-cols-1 gap-3 md:grid-cols-[280px_1fr_360px]">
|
||||
<section className="min-h-0">
|
||||
<main className="h-screen w-full overflow-hidden p-2 md:p-4">
|
||||
<div className="grid h-full grid-cols-1 gap-3 lg:grid-cols-[290px_1fr_370px]">
|
||||
<section className="min-h-0 lg:block">
|
||||
<CityList
|
||||
cities={orderedCities}
|
||||
selectedCity={selectedCity}
|
||||
onSelectCity={setSelectedCity}
|
||||
locale={locale}
|
||||
text={{
|
||||
monitoredCities: t.monitoredCities,
|
||||
high: t.high,
|
||||
medium: t.medium,
|
||||
low: t.low,
|
||||
fahrenheit: t.fahrenheit,
|
||||
celsius: t.celsius,
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="relative min-h-0">
|
||||
<div className="absolute left-3 right-3 top-3 z-[900] rounded-xl border border-slate-800 bg-slate-950/70 p-2 backdrop-blur md:left-4 md:right-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe2 className="h-4 w-4 text-cyan-300" />
|
||||
<h1 className="text-lg font-semibold uppercase tracking-wide text-cyan-100 md:text-xl">
|
||||
<div className="glass fade-up absolute left-2 right-2 top-2 z-[900] rounded-2xl border border-slate-700/80 p-2.5 md:left-4 md:right-4 md:top-4 md:p-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Globe2 className="h-4 w-4 shrink-0 text-cyan-300" />
|
||||
<h1 className="shrink-0 text-base font-semibold uppercase tracking-[0.16em] text-cyan-100 md:text-lg">
|
||||
PolyWeather
|
||||
</h1>
|
||||
<span className="hidden text-xs text-slate-400 md:inline">
|
||||
Global Weather Risk Intelligence
|
||||
<span className="hidden truncate text-xs text-slate-400 xl:inline">
|
||||
{t.brandSubtitle}
|
||||
</span>
|
||||
</div>
|
||||
<Button size="sm" variant="secondary">
|
||||
<Bot className="mr-1 h-4 w-4" />
|
||||
Technical Guide
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="hidden items-center gap-2 rounded-full border border-slate-700 bg-slate-900/70 px-2 py-1 text-[11px] text-emerald-300 md:flex">
|
||||
<Signal className="h-3 w-3" />
|
||||
{t.live}
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => setLocale((v) => (v === "zh" ? "en" : "zh"))}
|
||||
>
|
||||
<Languages className="mr-1 h-4 w-4" />
|
||||
{locale === "zh" ? "EN" : "ZH"}
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary">
|
||||
<Bot className="mr-1 h-4 w-4" />
|
||||
{t.technicalGuide}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-2 left-2 right-2 z-[900] md:bottom-4 md:left-4 md:right-auto">
|
||||
<div className="glass fade-up inline-flex flex-wrap items-center gap-2 rounded-xl border border-slate-700/80 p-2">
|
||||
<div className="rounded-lg border border-red-900/60 bg-red-950/50 px-2.5 py-1 text-xs text-red-200">
|
||||
H {riskStats.high}
|
||||
</div>
|
||||
<div className="rounded-lg border border-amber-900/60 bg-amber-950/50 px-2.5 py-1 text-xs text-amber-200">
|
||||
M {riskStats.medium}
|
||||
</div>
|
||||
<div className="rounded-lg border border-emerald-900/60 bg-emerald-950/50 px-2.5 py-1 text-xs text-emerald-200">
|
||||
L {riskStats.low}
|
||||
</div>
|
||||
<div className="hidden items-center gap-1 rounded-lg border border-cyan-900/60 bg-cyan-950/40 px-2.5 py-1 text-xs text-cyan-200 sm:flex">
|
||||
<Radar className="h-3.5 w-3.5" />
|
||||
{cities.length} {t.cities}
|
||||
</div>
|
||||
<div className="hidden items-center gap-1 rounded-lg border border-slate-700 px-2.5 py-1 text-xs text-slate-300 sm:flex">
|
||||
<Waves className="h-3.5 w-3.5" />
|
||||
AI + DEB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MapView
|
||||
cities={orderedCities}
|
||||
selectedCity={selectedCity}
|
||||
@@ -113,11 +191,45 @@ export function PolyWeatherDashboard() {
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="min-h-0">
|
||||
<section className="min-h-0 hidden lg:block">
|
||||
<CityDetailPanel
|
||||
detail={selectedDetail}
|
||||
loading={loading}
|
||||
onRefresh={refreshCurrentCity}
|
||||
locale={locale}
|
||||
text={{
|
||||
cityDetail: t.cityDetail,
|
||||
selectCityHint: t.selectCityHint,
|
||||
refresh: t.refresh,
|
||||
currentMax: t.currentMax,
|
||||
cloud: t.cloud,
|
||||
wind: t.wind,
|
||||
topProb: t.topProb,
|
||||
noProb: t.noProb,
|
||||
aiSummary: t.aiSummary,
|
||||
noAnalysis: t.noAnalysis,
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="min-h-0 lg:hidden">
|
||||
<CityDetailPanel
|
||||
detail={selectedDetail}
|
||||
loading={loading}
|
||||
onRefresh={refreshCurrentCity}
|
||||
locale={locale}
|
||||
text={{
|
||||
cityDetail: t.cityDetail,
|
||||
selectCityHint: t.selectCityHint,
|
||||
refresh: t.refresh,
|
||||
currentMax: t.currentMax,
|
||||
cloud: t.cloud,
|
||||
wind: t.wind,
|
||||
topProb: t.topProb,
|
||||
noProb: t.noProb,
|
||||
aiSummary: t.aiSummary,
|
||||
noAnalysis: t.noAnalysis,
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
@@ -126,7 +238,7 @@ export function PolyWeatherDashboard() {
|
||||
<div className="pointer-events-none fixed bottom-4 left-1/2 z-[1200] -translate-x-1/2 rounded-lg border border-red-900 bg-red-950/90 px-3 py-2 text-sm text-red-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<span>{error}</span>
|
||||
<span>{localizeError(error)}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user