Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
240975b2c0 | ||
|
|
21c0cf8b15 | ||
|
|
6a62272ba4 |
149
README.md
149
README.md
@@ -1,24 +1,87 @@
|
|||||||
# EMS Frontend Template
|
# EMS Frontend Template
|
||||||
|
|
||||||
Base React frontend template for EMS customer projects.
|
> Base React/TypeScript UI template for EMS customer projects
|
||||||
|
|
||||||
## Usage
|
**Current Version: 1.2.0** | See `VERSIONS.json`
|
||||||
|
|
||||||
When creating a new customer project, copy this template:
|
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
|
```bash
|
||||||
|
# Copy template into customer repo
|
||||||
cp -r ems-frontend-template/ <customer-repo>/frontend/
|
cp -r ems-frontend-template/ <customer-repo>/frontend/
|
||||||
cd <customer-repo>/frontend
|
cd <customer-repo>/frontend
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
npm install
|
npm install
|
||||||
|
|
||||||
|
# Start dev server
|
||||||
|
npm run dev
|
||||||
|
# Opens at http://localhost:3000, proxies /api to localhost:8000
|
||||||
```
|
```
|
||||||
|
|
||||||
Then customize:
|
### Customize for your customer:
|
||||||
1. Edit `src/App.tsx` — add/remove routes per customer needs
|
|
||||||
2. Edit `src/layouts/MainLayout.tsx` — customer branding (logo, colors, sidebar)
|
1. `src/contexts/ThemeContext.tsx` -- Branding colors, customer name
|
||||||
3. Edit `package.json` — remove unused deps (e.g., Three.js if no 3D)
|
2. `src/layouts/MainLayout.tsx` -- Logo, sidebar menu items
|
||||||
4. Edit `vite.config.ts` — update proxy target if backend port differs
|
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
|
## Tech Stack
|
||||||
|
|
||||||
- React 19 + TypeScript
|
- React 19 + TypeScript
|
||||||
- Ant Design 5 + ProComponents
|
- Ant Design 5 + ProComponents
|
||||||
- ECharts 6
|
- ECharts 6
|
||||||
@@ -26,18 +89,62 @@ Then customize:
|
|||||||
- i18next (zh + en)
|
- i18next (zh + en)
|
||||||
- Vite 8
|
- Vite 8
|
||||||
|
|
||||||
## Available Pages
|
---
|
||||||
- Dashboard, Monitoring, Devices, DeviceDetail
|
|
||||||
- Analysis (cost, loss, YoY, MoM, subitem)
|
## Available Commands
|
||||||
- Alarms, Carbon, Reports
|
|
||||||
- BigScreen (2D), BigScreen3D (3D)
|
```bash
|
||||||
- Charging (stations, piles, orders, pricing)
|
npm run dev # Start dev server (port 3000)
|
||||||
- Prediction, EnergyStrategy, AIOperations
|
npm run build # Production build
|
||||||
- Maintenance, DataQuery, Management, Quota
|
npm run preview # Preview production build
|
||||||
- System (settings, audit log)
|
```
|
||||||
- Login
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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
|
## Notes
|
||||||
- Not all pages are needed for every customer
|
|
||||||
- Remove unused page imports from App.tsx
|
- Not all pages are needed for every customer -- remove unused page imports from `App.tsx`
|
||||||
- Remove corresponding dependencies from package.json
|
- 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.
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"project": "ems-frontend-template",
|
"project": "ems-frontend-template",
|
||||||
"project_version": "1.1.0",
|
"project_version": "1.2.0",
|
||||||
"core_version": "1.1.0",
|
"core_version": "1.1.0",
|
||||||
"last_updated": "2026-04-05",
|
"last_updated": "2026-04-06",
|
||||||
"notes": "Initial frontend template from ems-core v1.1.0"
|
"notes": "Base React/TypeScript UI template for customer frontends"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "frontend",
|
"name": "frontend",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.0",
|
"version": "1.2.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
Reference in New Issue
Block a user