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>
feat: generic branding, remove all Tianpu hardcoding (v1.3.0)
2026-04-06 22:36:12 +08:00 · 2026-04-06 22:04:11 +08:00
13 changed files with 45 additions and 19 deletions
--- a/VERSIONS.json
+++ b/VERSIONS.json
@@ -1,7 +1,7 @@
 {
  "project": "ems-frontend-template",
-  "project_version": "1.2.0",
-  "core_version": "1.1.0",
+  "project_version": "1.4.0",
+  "core_version": "1.4.0",
  "last_updated": "2026-04-06",
-  "notes": "Base React/TypeScript UI template for customer frontends"
+  "notes": "Version display on login + sidebar for field engineers"
 }
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>天普智慧能源管理平台</title>
+    <title>智慧能源管理平台</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "frontend",
  "private": true,
-  "version": "1.2.0",
+  "version": "1.4.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -12,12 +12,12 @@ const ThemeContext = createContext<ThemeContextType>({

 export function ThemeProvider({ children }: { children: ReactNode }) {
  const [darkMode, setDarkMode] = useState(() => {
-    const saved = localStorage.getItem('tianpu-dark-mode');
+    const saved = localStorage.getItem('ems-dark-mode');
    return saved === 'true';
  });

  useEffect(() => {
-    localStorage.setItem('tianpu-dark-mode', String(darkMode));
+    localStorage.setItem('ems-dark-mode', String(darkMode));
    document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
  }, [darkMode]);

--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -8,7 +8,7 @@ i18n.use(initReactI18next).init({
    zh: { translation: zh },
    en: { translation: en },
  },
-  lng: localStorage.getItem('tianpu-lang') || 'zh',
+  lng: localStorage.getItem('ems-lang') || 'zh',
  fallbackLng: 'zh',
  interpolation: {
    escapeValue: false,
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -29,7 +29,7 @@
    "viewAllAlarms": "View all alarms",
    "profile": "Profile",
    "logout": "Sign Out",
-    "brandName": "Tianpu EMS"
+    "brandName": "EMS Platform"
  },
  "common": {
    "save": "Save",
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -29,7 +29,7 @@
    "viewAllAlarms": "查看全部告警",
    "profile": "个人信息",
    "logout": "退出登录",
-    "brandName": "天普EMS"
+    "brandName": "EMS Platform"
  },
  "common": {
    "save": "保存",
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -12,7 +12,7 @@ import {
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { getUser, removeToken } from '../utils/auth';
-import { getAlarmStats, getAlarmEvents } from '../services/api';
+import { getAlarmStats, getAlarmEvents, getVersion } from '../services/api';
 import { useTheme } from '../contexts/ThemeContext';

 const { Header, Sider, Content } = Layout;
@@ -28,6 +28,7 @@ export default function MainLayout() {
  const [collapsed, setCollapsed] = useState(false);
  const [alarmCount, setAlarmCount] = useState(0);
  const [recentAlarms, setRecentAlarms] = useState<any[]>([]);
+  const [versionInfo, setVersionInfo] = useState<any>(null);
  const navigate = useNavigate();
  const location = useLocation();
  const user = getUser();
@@ -93,6 +94,10 @@ export default function MainLayout() {
    return () => clearInterval(timer);
  }, [fetchAlarms]);

+  useEffect(() => {
+    getVersion().then(setVersionInfo).catch(() => {});
+  }, []);
+
  const handleLogout = () => {
    removeToken();
    localStorage.removeItem('user');
@@ -101,7 +106,7 @@ export default function MainLayout() {

  const handleLanguageChange = (lang: string) => {
    i18n.changeLanguage(lang);
-    localStorage.setItem('tianpu-lang', lang);
+    localStorage.setItem('ems-lang', lang);
  };

  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>
      <Layout>
        <Header style={{
--- a/src/pages/BigScreen/index.tsx
+++ b/src/pages/BigScreen/index.tsx
@@ -131,7 +131,7 @@ export default function BigScreen() {
      {/* Header */}
      <div className={styles.header}>
        <span className={styles.headerDate}>{formatDate(clock)}</span>
-        <h1 className={styles.headerTitle}>天普零碳园区智慧能源管理平台</h1>
+        <h1 className={styles.headerTitle}>智慧能源管理平台</h1>
        <span className={styles.headerTime}>{formatTime(clock)}</span>
      </div>

--- a/src/pages/BigScreen3D/components/HUDOverlay.tsx
+++ b/src/pages/BigScreen3D/components/HUDOverlay.tsx
@@ -47,7 +47,7 @@ export default function HUDOverlay({ overview, realtimeData }: HUDOverlayProps)
    <div className={styles.hudOverlay}>
      <div className={styles.header}>
        <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>
      </div>

--- a/src/pages/BigScreen3D/index.tsx
+++ b/src/pages/BigScreen3D/index.tsx
@@ -71,7 +71,7 @@ export default function BigScreen3D() {
    return (
      <div className={styles.container}>
        <div className={styles.placeholder}>
-          <h2 className={styles.placeholderTitle}>天普零碳园区 3D智慧能源管理平台</h2>
+          <h2 className={styles.placeholderTitle}>3D智慧能源管理平台</h2>
          <p style={{ color: '#8899aa' }}>正在加载设备数据...</p>
        </div>
      </div>
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Form, Input, Button, Card, message, Typography } from 'antd';
 import { UserOutlined, LockOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
-import { login } from '../../services/api';
+import { login, getVersion } from '../../services/api';
 import { setToken, setUser } from '../../utils/auth';

 const { Title, Text } = Typography;
@@ -10,8 +10,13 @@ const { Title, Text } = Typography;
 export default function LoginPage() {
  const [loading, setLoading] = useState(false);
  const [guestLoading, setGuestLoading] = useState(false);
+  const [versionInfo, setVersionInfo] = useState<any>(null);
  const navigate = useNavigate();

+  useEffect(() => {
+    getVersion().then(setVersionInfo).catch(() => {});
+  }, []);
+
  const doLogin = async (username: string, password: string) => {
    const res: any = await login(username, password);
    setToken(res.access_token);
@@ -54,9 +59,9 @@ export default function LoginPage() {
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <ThunderboltOutlined style={{ fontSize: 48, color: '#1890ff' }} />
          <Title level={3} style={{ marginTop: 12, marginBottom: 4 }}>
-            天普智慧能源管理平台
+            智慧能源管理平台
          </Title>
-          <Text type="secondary">零碳园区 · 智慧运维</Text>
+          <Text type="secondary">智慧能源 · 高效运维</Text>
        </div>
        <Form onFinish={onFinish} size="large">
          <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
@@ -82,6 +87,11 @@ export default function LoginPage() {
            </Text>
          </div>
        </Form>
+        {versionInfo && (
+          <div style={{ textAlign: 'center', marginTop: 16, opacity: 0.4, fontSize: 11 }}>
+            v{versionInfo.project_version} | Core: v{versionInfo.core_version || '—'}
+          </div>
+        )}
      </Card>
    </div>
  );
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -342,6 +342,9 @@ export const getStrategySavingsReport = (params: Record<string, any>) => api.get
 export const getStrategyRecommendations = () => api.get('/strategy/recommendations');
 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 (气象数据)
 export const getWeatherCurrent = () => api.get('/weather/current');
 export const getWeatherForecast = (params?: Record<string, any>) => api.get('/weather/forecast', { params });