feat: GeoScene frontend POC + Docker deploy for remote host

Migrate maps to @geoscene/core, polish monitoring/alerts UX, fix timeline
basemap flicker and district alert regions, and ship compose/nginx Docker
deploy assets with CBPOA_ROOT data mounts.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-07-24 03:28:29 +08:00
parent fe8bed58f5
commit e22b004f9e
77 changed files with 3421 additions and 3589 deletions

View File

@@ -1,19 +1,21 @@
# Frontend — React + TypeScript + Leaflet
# Frontend — React + TypeScript + GeoScene Maps SDK
## Stack
- React 18, TypeScript 5, Vite 5
- Tailwind CSS, Recharts, Zustand (state), Axios
- Leaflet / react-leaflet (maps)
- `@geoscene/core` (Maps SDK for JavaScript) — POC uses Tianditu basemap + local GeoJSON / FastAPI risk tiles
- Playwright (e2e tests)
## Structure
```
frontend/src/
main.tsx # Entry point
main.tsx # Entry (+ GeoScene theme CSS)
App.tsx # Router setup
geoscene/ # MapView helpers + layer factories
components/ # Reusable UI (maps, charts, nav)
legacy/ # Unused former Leaflet map experiments
pages/ # Route-level views
services/api.ts # Axios client with TTL cache + request dedup
stores/ # Zustand stores
@@ -28,15 +30,21 @@ frontend/src/
## Patterns
- Components: PascalCase, one per file, default export
- API calls: use `services/api.ts` wrappers (`riskApi`, `alertApi`, `caseApi`, `gridApi`) — they handle caching and request dedup
- State: Zustand stores in `stores/`, typed with TypeScript interfaces from `types/`
- Styling: Tailwind utility classes, no CSS modules
- Map components: imperative `@geoscene/core` via `createMapView` — do not pass MapView instances between components
- Coordinates: GeoScene uses `[longitude, latitude]`
- API calls: use `services/api.ts` wrappers (`riskApi`, `alertApi`, `caseApi`, `gridApi`)
- State: Zustand stores in `stores/`
- Styling: Tailwind utility classes
## Env (optional Enterprise later)
See `.env.example` for `VITE_GEOSCENE_PORTAL_URL` / `VITE_LAYER_*`. POC runs without them.
## Running
```bash
cd frontend
pnpm dev # localhost:5173, proxies /api → localhost:8000
pnpm dev # localhost:3000, proxies /api → localhost:8000
pnpm build # tsc + vite build → dist/
```
@@ -47,3 +55,4 @@ pnpm build # tsc + vite build → dist/
- Don't mix data fetching with presentation — fetch in pages, render in components
- Don't inline styles when Tailwind classes work
- Don't create god components (>200 lines) — extract sub-components
- Don't reintroduce Leaflet or role/perspective switchers