tianpu/ems-frontend-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tianpu:v1.2.0
Branches Tags
tianpu:master
tianpu:v1.4.0 tianpu:v1.3.0 tianpu:v1.2.0 tianpu:v1.1.0
..
compare: tianpu:master
Branches Tags
tianpu:master
tianpu:v1.4.0 tianpu:v1.3.0 tianpu:v1.2.0 tianpu:v1.1.0

2 Commits
v1.2.0 ... master

Author SHA1 Message Date
Du Wenbo
99add8050b feat: add version display on login page and sidebar (v1.4.0) 
- Login page: shows "vX.Y.Z | Core: vA.B.C" at bottom of card
- Sidebar footer: shows version when expanded
- Calls GET /api/v1/version (no auth required)
- For field engineers to instantly identify platform version

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-06 22:36:12 +08:00
Du Wenbo
ba190c33ca feat: generic branding, remove all Tianpu hardcoding (v1.3.0) 
- Replace all 天普/Tianpu text with generic "智慧能源管理平台"
- Change brandName to "EMS Platform" in both zh/en locales
- Update localStorage keys from tianpu-* to ems-*
- Make login subtitle generic

New customers copying this template will get neutral branding
that they customize for their own park/brand.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
 2026-04-06 22:04:11 +08:00
13 changed files with 45 additions and 19 deletions
Expand all files Collapse all files

6
VERSIONS.json
View File

@@ -1,7 +1,7 @@
{ {
"project": "ems-frontend-template", "project": "ems-frontend-template",
"project_version": "1.2.0", "project_version": "1.4.0",
"core_version": "1.1.0", "core_version": "1.4.0",
"last_updated": "2026-04-06", "last_updated": "2026-04-06",
"notes": "Base React/TypeScript UI template for customer frontends" "notes": "Version display on login + sidebar for field engineers"
} }

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>天普智慧能源管理平台</title> <title>智慧能源管理平台</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "frontend", "name": "frontend",
"private": true, "private": true,
"version": "1.2.0", "version": "1.4.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

4
src/contexts/ThemeContext.tsx
View File

@@ -12,12 +12,12 @@ const ThemeContext = createContext<ThemeContextType>({
export function ThemeProvider({ children }: { children: ReactNode }) { export function ThemeProvider({ children }: { children: ReactNode }) {
const [darkMode, setDarkMode] = useState(() => { const [darkMode, setDarkMode] = useState(() => {
const saved = localStorage.getItem('tianpu-dark-mode'); const saved = localStorage.getItem('ems-dark-mode');
return saved === 'true'; return saved === 'true';
}); });
useEffect(() => { useEffect(() => {
localStorage.setItem('tianpu-dark-mode', String(darkMode)); localStorage.setItem('ems-dark-mode', String(darkMode));
document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
}, [darkMode]); }, [darkMode]);

2
src/i18n/index.ts
View File

@@ -8,7 +8,7 @@ i18n.use(initReactI18next).init({
zh: { translation: zh }, zh: { translation: zh },
en: { translation: en }, en: { translation: en },
}, },
lng: localStorage.getItem('tianpu-lang') || 'zh', lng: localStorage.getItem('ems-lang') || 'zh',
fallbackLng: 'zh', fallbackLng: 'zh',
interpolation: { interpolation: {
escapeValue: false, escapeValue: false,

2
src/i18n/locales/en.json
View File

@@ -29,7 +29,7 @@
"viewAllAlarms": "View all alarms", "viewAllAlarms": "View all alarms",
"profile": "Profile", "profile": "Profile",
"logout": "Sign Out", "logout": "Sign Out",
"brandName": "Tianpu EMS" "brandName": "EMS Platform"
}, },
"common": { "common": {
"save": "Save", "save": "Save",

2
src/i18n/locales/zh.json
View File

@@ -29,7 +29,7 @@
"viewAllAlarms": "查看全部告警", "viewAllAlarms": "查看全部告警",
"profile": "个人信息", "profile": "个人信息",
"logout": "退出登录", "logout": "退出登录",
"brandName": "天普EMS" "brandName": "EMS Platform"
}, },
"common": { "common": {
"save": "保存", "save": "保存",

17
src/layouts/MainLayout.tsx
View File

@@ -12,7 +12,7 @@ import {
import { Outlet, useNavigate, useLocation } from 'react-router-dom'; import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getUser, removeToken } from '../utils/auth'; import { getUser, removeToken } from '../utils/auth';
import { getAlarmStats, getAlarmEvents } from '../services/api'; import { getAlarmStats, getAlarmEvents, getVersion } from '../services/api';
import { useTheme } from '../contexts/ThemeContext'; import { useTheme } from '../contexts/ThemeContext';
const { Header, Sider, Content } = Layout; const { Header, Sider, Content } = Layout;
@@ -28,6 +28,7 @@ export default function MainLayout() {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const [alarmCount, setAlarmCount] = useState(0); const [alarmCount, setAlarmCount] = useState(0);
const [recentAlarms, setRecentAlarms] = useState<any[]>([]); const [recentAlarms, setRecentAlarms] = useState<any[]>([]);
const [versionInfo, setVersionInfo] = useState<any>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const user = getUser(); const user = getUser();
@@ -93,6 +94,10 @@ export default function MainLayout() {
return () => clearInterval(timer); return () => clearInterval(timer);
}, [fetchAlarms]); }, [fetchAlarms]);
useEffect(() => {
getVersion().then(setVersionInfo).catch(() => {});
}, []);
const handleLogout = () => { const handleLogout = () => {
removeToken(); removeToken();
localStorage.removeItem('user'); localStorage.removeItem('user');
@@ -101,7 +106,7 @@ export default function MainLayout() {
const handleLanguageChange = (lang: string) => { const handleLanguageChange = (lang: string) => {
i18n.changeLanguage(lang); i18n.changeLanguage(lang);
localStorage.setItem('tianpu-lang', lang); localStorage.setItem('ems-lang', lang);
}; };
const userMenu = { const userMenu = {
@@ -136,6 +141,14 @@ export default function MainLayout() {
} }
}} }}
/> />
{!collapsed && versionInfo && (
<div style={{
padding: '8px 16px', fontSize: 11, color: 'rgba(255,255,255,0.3)',
borderTop: '1px solid rgba(255,255,255,0.06)', textAlign: 'center',
}}>
v{versionInfo.project_version}
</div>
)}
</Sider> </Sider>
<Layout> <Layout>
<Header style={{ <Header style={{

2
src/pages/BigScreen/index.tsx
View File

@@ -131,7 +131,7 @@ export default function BigScreen() {
{/* Header */} {/* Header */}
<div className={styles.header}> <div className={styles.header}>
<span className={styles.headerDate}>{formatDate(clock)}</span> <span className={styles.headerDate}>{formatDate(clock)}</span>
<h1 className={styles.headerTitle}>天普零碳园区智慧能源管理平台</h1> <h1 className={styles.headerTitle}>智慧能源管理平台</h1>
<span className={styles.headerTime}>{formatTime(clock)}</span> <span className={styles.headerTime}>{formatTime(clock)}</span>
</div> </div>

2
src/pages/BigScreen3D/components/HUDOverlay.tsx
View File

@@ -47,7 +47,7 @@ export default function HUDOverlay({ overview, realtimeData }: HUDOverlayProps)
<div className={styles.hudOverlay}> <div className={styles.hudOverlay}>
<div className={styles.header}> <div className={styles.header}>
<span className={styles.headerDate}>{formatDate(now)}</span> <span className={styles.headerDate}>{formatDate(now)}</span>
<span className={styles.headerTitle}>天普零碳园区 3D智慧能源管理平台</span> <span className={styles.headerTitle}>3D智慧能源管理平台</span>
<span className={styles.headerClock}>{formatTime(now)}</span> <span className={styles.headerClock}>{formatTime(now)}</span>
</div> </div>

2
src/pages/BigScreen3D/index.tsx
View File

@@ -71,7 +71,7 @@ export default function BigScreen3D() {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.placeholder}> <div className={styles.placeholder}>
<h2 className={styles.placeholderTitle}>天普零碳园区 3D智慧能源管理平台</h2> <h2 className={styles.placeholderTitle}>3D智慧能源管理平台</h2>
<p style={{ color: '#8899aa' }}>正在加载设备数据...</p> <p style={{ color: '#8899aa' }}>正在加载设备数据...</p>
</div> </div>
</div> </div>

18
src/pages/Login/index.tsx
View File

@@ -1,8 +1,8 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message, Typography } from 'antd'; import { Form, Input, Button, Card, message, Typography } from 'antd';
import { UserOutlined, LockOutlined, ThunderboltOutlined } from '@ant-design/icons'; import { UserOutlined, LockOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { login } from '../../services/api'; import { login, getVersion } from '../../services/api';
import { setToken, setUser } from '../../utils/auth'; import { setToken, setUser } from '../../utils/auth';
const { Title, Text } = Typography; const { Title, Text } = Typography;
@@ -10,8 +10,13 @@ const { Title, Text } = Typography;
export default function LoginPage() { export default function LoginPage() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [guestLoading, setGuestLoading] = useState(false); const [guestLoading, setGuestLoading] = useState(false);
const [versionInfo, setVersionInfo] = useState<any>(null);
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => {
getVersion().then(setVersionInfo).catch(() => {});
}, []);
const doLogin = async (username: string, password: string) => { const doLogin = async (username: string, password: string) => {
const res: any = await login(username, password); const res: any = await login(username, password);
setToken(res.access_token); setToken(res.access_token);
@@ -54,9 +59,9 @@ export default function LoginPage() {
<div style={{ textAlign: 'center', marginBottom: 32 }}> <div style={{ textAlign: 'center', marginBottom: 32 }}>
<ThunderboltOutlined style={{ fontSize: 48, color: '#1890ff' }} /> <ThunderboltOutlined style={{ fontSize: 48, color: '#1890ff' }} />
<Title level={3} style={{ marginTop: 12, marginBottom: 4 }}> <Title level={3} style={{ marginTop: 12, marginBottom: 4 }}>
天普智慧能源管理平台 智慧能源管理平台
</Title> </Title>
<Text type="secondary">零碳园区 · 智慧运维</Text> <Text type="secondary">智慧能源 · 高效运维</Text>
</div> </div>
<Form onFinish={onFinish} size="large"> <Form onFinish={onFinish} size="large">
<Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}> <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
@@ -82,6 +87,11 @@ export default function LoginPage() {
</Text> </Text>
</div> </div>
</Form> </Form>
{versionInfo && (
<div style={{ textAlign: 'center', marginTop: 16, opacity: 0.4, fontSize: 11 }}>
v{versionInfo.project_version} | Core: v{versionInfo.core_version || '—'}
</div>
)}
</Card> </Card>
</div> </div>
); );

3
src/services/api.ts
View File

@@ -342,6 +342,9 @@ export const getStrategySavingsReport = (params: Record<string, any>) => api.get
export const getStrategyRecommendations = () => api.get('/strategy/recommendations'); export const getStrategyRecommendations = () => api.get('/strategy/recommendations');
export const simulateStrategy = (data: any) => api.post('/strategy/simulate', data); export const simulateStrategy = (data: any) => api.post('/strategy/simulate', data);
// Version info (no auth required)
export const getVersion = () => api.get('/version').then(r => r.data);
// Weather (气象数据) // Weather (气象数据)
export const getWeatherCurrent = () => api.get('/weather/current'); export const getWeatherCurrent = () => api.get('/weather/current');
export const getWeatherForecast = (params?: Record<string, any>) => api.get('/weather/forecast', { params }); export const getWeatherForecast = (params?: Record<string, any>) => api.get('/weather/forecast', { params });