From 6e0dec4567e562784d920689032dea88ef90d2c6 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Thu, 20 Nov 2025 18:35:22 +0800
Subject: [PATCH] feat(versioning): implement UI and server version tracking
 with build date display in footer

---
 app.js                       |  4 ++
 i18n.js                      |  8 +++-
 index.html                   |  9 +++-
 src/core/connection.js       | 91 ++++++++++++++++++++++++++++++++++++
 src/modules/auth-files.js    |  6 +++
 src/modules/config-editor.js |  4 ++
 src/modules/login.js         |  1 +
 7 files changed, 120 insertions(+), 3 deletions(-)

diff --git a/app.js b/app.js
index fc240fe..6d36e7b 100644
--- a/app.js
+++ b/app.js
@@ -42,6 +42,9 @@ class CLIProxyManager {
         this.managementKey = '';
         this.isConnected = false;
         this.isLoggedIn = false;
+        this.uiVersion = null;
+        this.serverVersion = null;
+        this.serverBuildDate = null;
 
         // 配置缓存 - 改为分段缓存
         this.configCache = {};  // 改为对象，按配置段缓存
@@ -129,6 +132,7 @@ class CLIProxyManager {
     }
 
     init() {
+        this.initUiVersion();
         this.initializeTheme();
         this.checkLoginStatus();
         this.bindEvents();
diff --git a/i18n.js b/i18n.js
index 70cb2cb..5473708 100644
--- a/i18n.js
+++ b/i18n.js
@@ -508,7 +508,9 @@ const i18n = {
             'sidebar.toggle_collapse': '收起侧边栏',
 
             // 页脚
-            'footer.version': '版本',
+            'footer.api_version': 'CLI Proxy API 版本',
+            'footer.build_date': '构建时间',
+            'footer.version': '管理中心版本',
             'footer.author': '作者'
         },
 
@@ -1013,7 +1015,9 @@ const i18n = {
             'sidebar.toggle_collapse': 'Collapse sidebar',
 
             // Footer
-            'footer.version': 'Version',
+            'footer.api_version': 'CLI Proxy API Version',
+            'footer.build_date': 'Build Time',
+            'footer.version': 'Management UI Version',
             'footer.author': 'Author'
         }
     },
diff --git a/index.html b/index.html
index dda0222..b334b6e 100644
--- a/index.html
+++ b/index.html
@@ -1003,7 +1003,14 @@
                     <!-- 版本信息 -->
                     <footer class="version-footer">
                         <div class="version-info">
-                            <span data-i18n="footer.version">版本</span>: __VERSION__
+                            <span data-i18n="footer.api_version">CLI Proxy API 版本</span>:
+                            <span id="api-version">-</span>
+                            <span class="separator">•</span>
+                            <span data-i18n="footer.build_date">构建时间</span>:
+                            <span id="api-build-date">-</span>
+                            <span class="separator">•</span>
+                            <span data-i18n="footer.version">管理中心版本</span>:
+                            <span id="ui-version" data-ui-version="__VERSION__">-</span>
                             <span class="separator">•</span>
                             <span data-i18n="footer.author">作者</span>: CLI Proxy API Team
                         </div>
diff --git a/src/core/connection.js b/src/core/connection.js
index 2dece5f..40ed899 100644
--- a/src/core/connection.js
+++ b/src/core/connection.js
@@ -58,6 +58,95 @@ export const connectionModule = {
         this.updateLoginConnectionInfo();
     },
 
+    // 读取并填充管理中心版本号（可能来自构建时注入或占位符）
+    initUiVersion() {
+        const uiVersion = this.readUiVersionFromDom();
+        this.uiVersion = uiVersion;
+        this.renderVersionInfo();
+    },
+
+    // 从 DOM 获取版本占位符，并处理空值、引号或未替换的占位符
+    readUiVersionFromDom() {
+        const el = document.getElementById('ui-version');
+        if (!el) return null;
+
+        const raw = (el.dataset && el.dataset.uiVersion) ? el.dataset.uiVersion : el.textContent;
+        if (typeof raw !== 'string') return null;
+
+        const cleaned = raw.replace(/^"+|"+$/g, '').trim();
+        if (!cleaned || cleaned === '__VERSION__') {
+            return null;
+        }
+        return cleaned;
+    },
+
+    // 根据响应头更新版本与构建时间
+    updateVersionFromHeaders(headers) {
+        if (!headers || typeof headers.get !== 'function') {
+            return;
+        }
+
+        const version = headers.get('X-CPA-VERSION');
+        const buildDate = headers.get('X-CPA-BUILD-DATE');
+        let updated = false;
+
+        if (version && version !== this.serverVersion) {
+            this.serverVersion = version;
+            updated = true;
+        }
+
+        if (buildDate && buildDate !== this.serverBuildDate) {
+            this.serverBuildDate = buildDate;
+            updated = true;
+        }
+
+        if (updated) {
+            this.renderVersionInfo();
+        }
+    },
+
+    // 渲染底栏的版本与构建时间
+    renderVersionInfo() {
+        const versionEl = document.getElementById('api-version');
+        const buildDateEl = document.getElementById('api-build-date');
+        const uiVersionEl = document.getElementById('ui-version');
+
+        if (versionEl) {
+            versionEl.textContent = this.serverVersion || '-';
+        }
+
+        if (buildDateEl) {
+            buildDateEl.textContent = this.serverBuildDate
+                ? this.formatBuildDate(this.serverBuildDate)
+                : '-';
+        }
+
+        if (uiVersionEl) {
+            const domVersion = this.readUiVersionFromDom();
+            uiVersionEl.textContent = this.uiVersion || domVersion || 'v0.0.0-dev';
+        }
+    },
+
+    // 清空版本信息（例如登出时）
+    resetVersionInfo() {
+        this.serverVersion = null;
+        this.serverBuildDate = null;
+        this.renderVersionInfo();
+    },
+
+    // 格式化构建时间，优先使用界面语言对应的本地格式
+    formatBuildDate(buildDate) {
+        if (!buildDate) return '-';
+
+        const parsed = Date.parse(buildDate);
+        if (!Number.isNaN(parsed)) {
+            const locale = i18n?.currentLanguage || undefined;
+            return new Date(parsed).toLocaleString(locale);
+        }
+
+        return buildDate;
+    },
+
     // API 请求方法
     async makeRequest(endpoint, options = {}) {
         const url = `${this.apiUrl}${endpoint}`;
@@ -73,6 +162,8 @@ export const connectionModule = {
                 headers
             });
 
+            this.updateVersionFromHeaders(response.headers);
+
             if (!response.ok) {
                 const errorData = await response.json().catch(() => ({}));
                 throw new Error(errorData.error || `HTTP ${response.status}`);
diff --git a/src/modules/auth-files.js b/src/modules/auth-files.js
index 3128685..d5850bb 100644
--- a/src/modules/auth-files.js
+++ b/src/modules/auth-files.js
@@ -732,6 +732,8 @@ export const authFilesModule = {
                 body: formData
             });
 
+            this.updateVersionFromHeaders(response.headers);
+
             if (!response.ok) {
                 let errorMessage = `HTTP ${response.status}`;
                 try {
@@ -891,6 +893,8 @@ export const authFilesModule = {
                 }
             });
 
+            this.updateVersionFromHeaders(response.headers);
+
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}`);
             }
@@ -1029,6 +1033,8 @@ export const authFilesModule = {
                 body: formData
             });
 
+            this.updateVersionFromHeaders(response.headers);
+
             if (!response.ok) {
                 const errorData = await response.json().catch(() => ({}));
                 throw new Error(errorData.error || `HTTP ${response.status}`);
diff --git a/src/modules/config-editor.js b/src/modules/config-editor.js
index eca592f..10295b8 100644
--- a/src/modules/config-editor.js
+++ b/src/modules/config-editor.js
@@ -160,6 +160,8 @@ export const configEditorModule = {
                 }
             });
 
+            this.updateVersionFromHeaders(response.headers);
+
             if (!response.ok) {
                 const errorText = await response.text().catch(() => '');
                 const message = errorText || `HTTP ${response.status}`;
@@ -235,6 +237,8 @@ export const configEditorModule = {
             body: yamlText
         });
 
+        this.updateVersionFromHeaders(response.headers);
+
         if (!response.ok) {
             const contentType = response.headers.get('content-type') || '';
             let errorText = '';
diff --git a/src/modules/login.js b/src/modules/login.js
index 67e0336..7878e90 100644
--- a/src/modules/login.js
+++ b/src/modules/login.js
@@ -100,6 +100,7 @@ export const loginModule = {
         this.isConnected = false;
         this.clearCache();
         this.stopStatusUpdateTimer();
+        this.resetVersionInfo();
 
         localStorage.removeItem('isLoggedIn');
         secureStorage.removeItem('managementKey');