From 21c0cf8b156b4a17cb6bd14439e53eaa19946f69 Mon Sep 17 00:00:00 2001
From: Du Wenbo <duwenbo88@163.com>
Date: Mon, 6 Apr 2026 08:55:47 +0800
Subject: [PATCH] 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>
---
 README.md    | 127 ++++++++++++++++++++++++++++++++++++++++++---------
 package.json |   2 +-
 2 files changed, 107 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 190c3ac..a821537 100644
--- a/README.md
+++ b/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.
diff --git a/package.json b/package.json
index b23556e..4527373 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",