修改项目描述

This commit is contained in:
JIANG
2026-02-05 11:56:54 +08:00
parent 5b52afcc53
commit 4bd7b48bcf

View File

@@ -2,7 +2,7 @@
## Project Overview ## Project Overview
A Next.js 15 + TypeScript water network management system built with Refine framework, featuring real-time hydraulic simulation, SCADA data management, and GIS visualization using OpenLayers and Deck.gl. A Next.js 16 + TypeScript water network management system built with Refine framework, featuring real-time hydraulic simulation, SCADA data management, and GIS visualization using OpenLayers and Deck.gl.
## Build, Test, and Lint Commands ## Build, Test, and Lint Commands
@@ -24,6 +24,7 @@ npm run lint # Run ESLint
``` ```
**Run single test file:** **Run single test file:**
```bash ```bash
npm test -- path/to/test-file.test.ts npm test -- path/to/test-file.test.ts
``` ```
@@ -31,13 +32,15 @@ npm test -- path/to/test-file.test.ts
## Architecture ## Architecture
### Framework Stack ### Framework Stack
- **Next.js 15** with App Router (not Pages Router)
- **Next.js 16** with App Router (not Pages Router)
- **Refine** framework for admin/CRUD operations - **Refine** framework for admin/CRUD operations
- **NextAuth.js** with Keycloak for SSO authentication - **NextAuth.js** with Keycloak for SSO authentication
- **Material-UI (MUI) v6** for UI components - **Material-UI (MUI) v6** for UI components
- **OpenLayers** + **Deck.gl** for map visualization - **OpenLayers** + **Deck.gl** for map visualization
### Route Structure ### Route Structure
- `src/app/layout.tsx` - Root layout with RefineContext - `src/app/layout.tsx` - Root layout with RefineContext
- `src/app/(main)/` - Protected routes with shared layout - `src/app/(main)/` - Protected routes with shared layout
- `/network-simulation` - Real-time network simulation - `/network-simulation` - Real-time network simulation
@@ -50,6 +53,7 @@ npm test -- path/to/test-file.test.ts
- `src/app/login/` - Public authentication pages - `src/app/login/` - Public authentication pages
### Key Directories ### Key Directories
- `src/app/_refine_context.tsx` - Refine configuration with resources, auth provider, and data provider - `src/app/_refine_context.tsx` - Refine configuration with resources, auth provider, and data provider
- `src/providers/data-provider/` - REST API data provider (currently mock, update API_URL for production) - `src/providers/data-provider/` - REST API data provider (currently mock, update API_URL for production)
- `src/contexts/color-mode/` - Theme switching (light/dark mode persisted in cookies) - `src/contexts/color-mode/` - Theme switching (light/dark mode persisted in cookies)
@@ -58,6 +62,7 @@ npm test -- path/to/test-file.test.ts
- `src/config/config.ts` - Environment-based configuration with fallback defaults - `src/config/config.ts` - Environment-based configuration with fallback defaults
### Path Aliases (TypeScript) ### Path Aliases (TypeScript)
```typescript ```typescript
@app/* -> src/app/* @app/* -> src/app/*
@assets/* -> src/assets/* @assets/* -> src/assets/*
@@ -72,7 +77,9 @@ npm test -- path/to/test-file.test.ts
``` ```
### Map Architecture ### Map Architecture
The map system uses a hybrid approach: The map system uses a hybrid approach:
- **OpenLayers** as the base map engine (vector tiles from GeoServer) - **OpenLayers** as the base map engine (vector tiles from GeoServer)
- **Deck.gl** overlays for advanced visualizations (trips, contours, text labels) - **Deck.gl** overlays for advanced visualizations (trips, contours, text labels)
- **DeckLayer** custom class bridges OL and Deck.gl (`@utils/layers`) - **DeckLayer** custom class bridges OL and Deck.gl (`@utils/layers`)
@@ -80,6 +87,7 @@ The map system uses a hybrid approach:
- Layers: junctions, pipes, valves, reservoirs, pumps, tanks, scada - Layers: junctions, pipes, valves, reservoirs, pumps, tanks, scada
### Client vs Server Components ### Client vs Server Components
- Most interactive components use `"use client"` directive (~35 files) - Most interactive components use `"use client"` directive (~35 files)
- Map components are always client-side (OpenLayers requires browser APIs) - Map components are always client-side (OpenLayers requires browser APIs)
- Layout and page files without interactivity can be server components - Layout and page files without interactivity can be server components
@@ -87,12 +95,14 @@ The map system uses a hybrid approach:
## Key Conventions ## Key Conventions
### Authentication Flow ### Authentication Flow
- Keycloak SSO via NextAuth.js (`src/app/api/auth/[...nextauth]/`) - Keycloak SSO via NextAuth.js (`src/app/api/auth/[...nextauth]/`)
- Session managed with `SessionProvider` wrapper - Session managed with `SessionProvider` wrapper
- Auth check redirects to `/login` if unauthenticated - Auth check redirects to `/login` if unauthenticated
- Use `useSession()` hook for current user data - Use `useSession()` hook for current user data
### Environment Variables ### Environment Variables
- All frontend-accessible variables must have `NEXT_PUBLIC_` prefix - All frontend-accessible variables must have `NEXT_PUBLIC_` prefix
- Backend URL: `NEXT_PUBLIC_BACKEND_URL` (defaults to http://192.168.1.42:8000) - Backend URL: `NEXT_PUBLIC_BACKEND_URL` (defaults to http://192.168.1.42:8000)
- GeoServer URL: `NEXT_PUBLIC_MAP_URL` (defaults to http://127.0.0.1:8080/geoserver) - GeoServer URL: `NEXT_PUBLIC_MAP_URL` (defaults to http://127.0.0.1:8080/geoserver)
@@ -100,29 +110,35 @@ The map system uses a hybrid approach:
- Keycloak config in `.env.local` (not committed) - Keycloak config in `.env.local` (not committed)
### Refine Resources ### Refine Resources
Resources defined in `_refine_context.tsx` use Chinese labels and route to pages in `(main)/`: Resources defined in `_refine_context.tsx` use Chinese labels and route to pages in `(main)/`:
- Each resource has: name (Chinese), list (route path), meta (icon + label) - Each resource has: name (Chinese), list (route path), meta (icon + label)
- Icons from `react-icons` library - Icons from `react-icons` library
- No CRUD operations defined (list-only pages) - No CRUD operations defined (list-only pages)
### Map Styling ### Map Styling
- Default styles in `config.MAP_DEFAULT_STYLE` (stroke, circle, colors) - Default styles in `config.MAP_DEFAULT_STYLE` (stroke, circle, colors)
- Circle radius uses zoom-based interpolation (1px at z12, 8px at z24) - Circle radius uses zoom-based interpolation (1px at z12, 8px at z24)
- WebGL rendering for vector tiles - WebGL rendering for vector tiles
- Style legends generated dynamically in map controls - Style legends generated dynamically in map controls
### TypeScript Configuration ### TypeScript Configuration
- Strict mode enabled - Strict mode enabled
- Path aliases match jest.config.js mappings - Path aliases match jest.config.js mappings
- Target ES5 for broader compatibility - Target ES5 for broader compatibility
- Incremental builds enabled - Incremental builds enabled
### Next.js Configuration ### Next.js Configuration
- **Standalone output** for Docker deployment - **Standalone output** for Docker deployment
- SVG files handled by `@svgr/webpack` (imported as React components) - SVG files handled by `@svgr/webpack` (imported as React components)
- No custom server or middleware - No custom server or middleware
### Testing Setup ### Testing Setup
- Jest with React Testing Library - Jest with React Testing Library
- jsdom environment for component testing - jsdom environment for component testing
- Path aliases configured to match tsconfig.json - Path aliases configured to match tsconfig.json
@@ -131,23 +147,27 @@ Resources defined in `_refine_context.tsx` use Chinese labels and route to pages
## Common Patterns ## Common Patterns
### Adding a New Route ### Adding a New Route
1. Create directory in `src/app/(main)/your-route/` 1. Create directory in `src/app/(main)/your-route/`
2. Add `page.tsx` and optional `loading.tsx` 2. Add `page.tsx` and optional `loading.tsx`
3. Register resource in `src/app/_refine_context.tsx` resources array 3. Register resource in `src/app/_refine_context.tsx` resources array
4. Import icon from `react-icons` 4. Import icon from `react-icons`
### Working with Maps ### Working with Maps
- Use `MapComponent` from `src/app/OlMap/MapComponent.tsx` - Use `MapComponent` from `src/app/OlMap/MapComponent.tsx`
- Access map context via `useMapData()` hook - Access map context via `useMapData()` hook
- Vector tile layers auto-load from GeoServer workspace - Vector tile layers auto-load from GeoServer workspace
- Custom overlays use Deck.gl layers (TextLayer, TripsLayer, ContourLayer) - Custom overlays use Deck.gl layers (TextLayer, TripsLayer, ContourLayer)
### API Calls ### API Calls
- Update `dataProvider` in `src/providers/data-provider/index.ts` for real backend - Update `dataProvider` in `src/providers/data-provider/index.ts` for real backend
- Currently points to `https://api.fake-rest.refine.dev` - Currently points to `https://api.fake-rest.refine.dev`
- Use Refine hooks (`useList`, `useOne`, etc.) for data fetching - Use Refine hooks (`useList`, `useOne`, etc.) for data fetching
### Theme Management ### Theme Management
- Theme stored in cookies (not localStorage) - Theme stored in cookies (not localStorage)
- Toggle via `ColorModeContext` from `@contexts/color-mode` - Toggle via `ColorModeContext` from `@contexts/color-mode`
- Supports light/dark modes only - Supports light/dark modes only