docs: rewrite README with full structure, Docker, setup guide, v1.2.0
- Add complete project structure section - Add npm commands (dev/build/preview) and port info - Add Docker deployment section - Add new customer setup guide with customization steps - Fix package.json version from 1.0.0 to 1.2.0 - Add version info referencing VERSIONS.json Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
127
README.md
127
README.md
@@ -1,24 +1,87 @@
|
||||
# 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
|
||||
# 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
|
||||
```
|
||||
|
||||
Then customize:
|
||||
1. Edit `src/App.tsx` — add/remove routes per customer needs
|
||||
2. Edit `src/layouts/MainLayout.tsx` — customer branding (logo, colors, sidebar)
|
||||
3. Edit `package.json` — remove unused deps (e.g., Three.js if no 3D)
|
||||
4. Edit `vite.config.ts` — update proxy target if backend port differs
|
||||
### 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
|
||||
@@ -26,18 +89,40 @@ Then customize:
|
||||
- i18next (zh + en)
|
||||
- Vite 8
|
||||
|
||||
## Available Pages
|
||||
- Dashboard, Monitoring, Devices, DeviceDetail
|
||||
- Analysis (cost, loss, YoY, MoM, subitem)
|
||||
- Alarms, Carbon, Reports
|
||||
- BigScreen (2D), BigScreen3D (3D)
|
||||
- Charging (stations, piles, orders, pricing)
|
||||
- Prediction, EnergyStrategy, AIOperations
|
||||
- Maintenance, DataQuery, Management, Quota
|
||||
- System (settings, audit log)
|
||||
- Login
|
||||
---
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
- Not all pages are needed for every customer
|
||||
- Remove unused page imports from App.tsx
|
||||
- Remove corresponding dependencies from package.json
|
||||
|
||||
- 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.
|
||||
|
||||
Reference in New Issue
Block a user