151 lines
4.2 KiB
Markdown
151 lines
4.2 KiB
Markdown
# EMS Frontend Template
|
|
|
|
> Base React/TypeScript UI template for EMS customer projects
|
|
|
|
**Current Version: 1.2.0** | See `VERSIONS.json`
|
|
|
|
This is the shared frontend template used to bootstrap new EMS customer frontends. Copy it into a new customer repo and customize.
|
|
|
|
---
|
|
|
|
## Usage — New Customer Setup
|
|
|
|
```bash
|
|
# Copy template into customer repo
|
|
cp -r ems-frontend-template/ <customer-repo>/frontend/
|
|
cd <customer-repo>/frontend
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start dev server
|
|
npm run dev
|
|
# Opens at http://localhost:3000, proxies /api to localhost:8000
|
|
```
|
|
|
|
### Customize for your customer:
|
|
|
|
1. `src/contexts/ThemeContext.tsx` -- Branding colors, customer name
|
|
2. `src/layouts/MainLayout.tsx` -- Logo, sidebar menu items
|
|
3. `src/App.tsx` -- Add/remove routes per customer needs
|
|
4. `vite.config.ts` -- Update proxy target if backend port differs
|
|
5. `package.json` -- Remove unused deps (e.g., Three.js if no 3D)
|
|
6. Update `VERSIONS.json` -- Set new project name and version
|
|
|
|
---
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
ems-frontend-template/
|
|
+-- src/
|
|
| +-- pages/ # Page components
|
|
| | +-- Dashboard/ # Main dashboard
|
|
| | +-- Monitoring/ # Real-time monitoring
|
|
| | +-- Devices/ # Device management
|
|
| | +-- DeviceDetail/ # Device detail view
|
|
| | +-- Analysis/ # Energy analysis (cost, loss, YoY, MoM)
|
|
| | +-- Alarms/ # Alarm center
|
|
| | +-- Carbon/ # Carbon emissions
|
|
| | +-- Reports/ # Report center
|
|
| | +-- BigScreen/ # 2D visualization screen
|
|
| | +-- BigScreen3D/ # 3D visualization screen
|
|
| | +-- Charging/ # EV charging management
|
|
| | +-- Prediction/ # Energy prediction
|
|
| | +-- EnergyStrategy/ # Energy strategy
|
|
| | +-- AIOperations/ # AI-assisted operations
|
|
| | +-- Maintenance/ # Maintenance management
|
|
| | +-- DataQuery/ # Data query
|
|
| | +-- Management/ # General management
|
|
| | +-- Quota/ # Energy quota
|
|
| | +-- System/ # System settings & audit log
|
|
| | +-- Login/ # Login page
|
|
| +-- layouts/ # Layout components (MainLayout)
|
|
| +-- contexts/ # React contexts (ThemeContext)
|
|
| +-- hooks/ # Custom hooks (useRealtimeWebSocket)
|
|
| +-- services/ # API service layer
|
|
| +-- i18n/ # Internationalization (zh + en)
|
|
| +-- utils/ # Utility functions
|
|
| +-- assets/ # Static assets
|
|
| +-- App.tsx # Root component with routes
|
|
| +-- main.tsx # Entry point
|
|
+-- public/
|
|
| +-- devices/ # SVG device icons
|
|
+-- Dockerfile # Dev container
|
|
+-- Dockerfile.prod # Production container
|
|
+-- vite.config.ts # Vite config (proxy, port)
|
|
+-- package.json
|
|
+-- VERSIONS.json # Version tracking
|
|
```
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
- React 19 + TypeScript
|
|
- Ant Design 5 + ProComponents
|
|
- ECharts 6
|
|
- Three.js + React Three Fiber (optional, for 3D visualization)
|
|
- i18next (zh + en)
|
|
- Vite 8
|
|
|
|
---
|
|
|
|
## Available Commands
|
|
|
|
```bash
|
|
npm run dev # Start dev server (port 3000)
|
|
npm run build # Production build
|
|
npm run preview # Preview production build
|
|
```
|
|
|
|
---
|
|
|
|
## Docker
|
|
|
|
```bash
|
|
# Development
|
|
docker build -t ems-frontend .
|
|
docker run -p 3000:3000 ems-frontend
|
|
|
|
# Production
|
|
docker build -f Dockerfile.prod -t ems-frontend-prod .
|
|
docker run -p 80:80 ems-frontend-prod
|
|
```
|
|
|
|
---
|
|
|
|
## Version Management
|
|
|
|
```bash
|
|
# List all versions
|
|
git tag -l
|
|
|
|
# Download a specific version
|
|
git checkout v1.1.0
|
|
|
|
# Download as zip
|
|
curl -o template-v1.1.0.zip \
|
|
"http://100.69.143.96:3300/tianpu/ems-frontend-template/archive/v1.1.0.zip"
|
|
|
|
# Go back to latest
|
|
git checkout master
|
|
```
|
|
|
|
When releasing: update `VERSIONS.json` + `package.json` version, then tag and push.
|
|
See [ems-core README](http://100.69.143.96:3300/tianpu/ems-core) for the full version management guide.
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Not all pages are needed for every customer -- remove unused page imports from `App.tsx`
|
|
- Remove corresponding dependencies from `package.json` (e.g., Three.js if no 3D)
|
|
- The template is designed to work with ems-core backend at `/api`
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
Copyright 2026. All rights reserved.
|