2026-03-09 10:53:23 +08:00
|
|
|
# PolyWeather Frontend
|
2026-03-06 08:41:19 +08:00
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
This directory is the only web frontend in production.
|
|
|
|
|
|
|
|
|
|
Production URL:
|
|
|
|
|
- https://polyweather-pro.vercel.app/
|
2026-03-06 08:41:19 +08:00
|
|
|
|
|
|
|
|
## Stack
|
|
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
- Next.js App Router
|
2026-03-09 10:53:23 +08:00
|
|
|
- React (component-driven dashboard)
|
2026-03-06 08:41:19 +08:00
|
|
|
- Tailwind CSS
|
2026-03-09 10:53:23 +08:00
|
|
|
- Leaflet (map runtime)
|
|
|
|
|
- Chart.js (charts with manual lifecycle wrapper)
|
|
|
|
|
- Typed store + typed data client
|
2026-03-06 19:10:05 +08:00
|
|
|
|
|
|
|
|
## Production Model
|
|
|
|
|
|
2026-03-09 10:53:23 +08:00
|
|
|
- Vercel serves the web UI and BFF route handlers
|
|
|
|
|
- FastAPI on VPS serves weather APIs only
|
2026-03-06 19:10:05 +08:00
|
|
|
- The old FastAPI static website has been removed
|
2026-03-09 10:53:23 +08:00
|
|
|
- The production page shell is React-driven (`components/dashboard/*`), with no runtime dependency on `public/static/app.js`
|
2026-03-06 19:10:05 +08:00
|
|
|
|
|
|
|
|
Current request flow:
|
|
|
|
|
- Browser -> Vercel frontend
|
2026-03-09 10:53:23 +08:00
|
|
|
- React store/client -> Next route handlers
|
|
|
|
|
- Next route handlers -> FastAPI API
|
2026-03-06 08:41:19 +08:00
|
|
|
|
|
|
|
|
## Local Development
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd frontend
|
|
|
|
|
cp .env.example .env.local
|
|
|
|
|
npm install
|
|
|
|
|
npm run dev
|
|
|
|
|
```
|
|
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
Default local URL:
|
|
|
|
|
- http://localhost:3000
|
2026-03-06 08:41:19 +08:00
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
## Required Environment Variable
|
2026-03-06 08:41:19 +08:00
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
```env
|
|
|
|
|
POLYWEATHER_API_BASE_URL=https://<your-fastapi-host>
|
2026-03-06 08:41:19 +08:00
|
|
|
```
|
|
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
Examples:
|
|
|
|
|
- `http://38.54.27.70:8000`
|
|
|
|
|
- `https://api.example.com`
|
2026-03-06 08:41:19 +08:00
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
## Route Handlers
|
|
|
|
|
|
|
|
|
|
Thin BFF routes currently exposed by Next:
|
2026-03-06 08:41:19 +08:00
|
|
|
- `GET /api/cities`
|
2026-03-06 19:10:05 +08:00
|
|
|
- `GET /api/city/[name]`
|
2026-03-09 10:53:23 +08:00
|
|
|
- `GET /api/city/[name]/summary`
|
2026-03-06 19:10:05 +08:00
|
|
|
- `GET /api/history/[name]`
|
2026-03-06 08:41:19 +08:00
|
|
|
|
2026-03-09 04:41:24 +08:00
|
|
|
Current frontend behavior:
|
2026-03-09 10:53:23 +08:00
|
|
|
- `/` keeps the world overview layout and initial city temperatures preload
|
|
|
|
|
- Marker click: focus map + open right city card + render nearby stations
|
|
|
|
|
- Right-card "今日日内分析": opens modal and freezes map motion
|
|
|
|
|
- Blank-map click: closes right card only, without resetting camera
|
2026-03-09 04:41:24 +08:00
|
|
|
|
2026-03-06 08:41:19 +08:00
|
|
|
## Vercel Deployment
|
|
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
1. Import the repo into Vercel
|
|
|
|
|
2. Set Root Directory to `frontend`
|
|
|
|
|
3. Set `POLYWEATHER_API_BASE_URL`
|
|
|
|
|
4. Deploy
|
2026-03-06 08:41:19 +08:00
|
|
|
|
|
|
|
|
## Notes
|
|
|
|
|
|
2026-03-06 19:10:05 +08:00
|
|
|
- Backend CORS must allow `https://polyweather-pro.vercel.app`
|
2026-03-09 10:53:23 +08:00
|
|
|
- City detail cache TTL is 5 minutes with revision probe; manual refresh bypasses cache
|
|
|
|
|
- UI layout and sizing remain aligned with the legacy visual contract after React migration
|
2026-03-06 19:10:05 +08:00
|
|
|
|
2026-03-09 04:41:24 +08:00
|
|
|
Last updated: 2026-03-09
|
