EMS Frontend Template

Base React frontend template for EMS customer projects.

Usage

When creating a new customer project, copy this template:

cp -r ems-frontend-template/ <customer-repo>/frontend/
cd <customer-repo>/frontend
npm install

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

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 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

Notes

• Not all pages are needed for every customer
• Remove unused page imports from App.tsx
• Remove corresponding dependencies from package.json