feat: refactor model price display and editing functionality with improved layout and interaction

app.js

@@ -56,6 +56,9 @@ class CLIProxyManager {
         this.uiVersion = null;
         this.serverVersion = null;
         this.serverBuildDate = null;
+        this.latestVersion = null;
+        this.versionCheckStatus = 'muted';
+        this.versionCheckMessage = i18n.t('system_info.version_check_idle');
 
         // 配置缓存 - 改为分段缓存（交由 ConfigService 管理）
         this.cacheExpiry = CACHE_EXPIRY_MS;
@@ -113,6 +116,20 @@ class CLIProxyManager {
             result: null
         };
 
+        // 顶栏标题动画状态
+        this.brandCollapseTimer = null;
+        this.brandCollapseDelayMs = 5000;
+        this.brandIsCollapsed = false;
+        this.brandAnimationReady = false;
+        this.brandElements = {
+            toggle: null,
+            wrapper: null,
+            fullText: null,
+            shortText: null
+        };
+        this.brandResizeHandler = null;
+        this.brandToggleHandler = null;
+
         // 主题管理
         this.currentTheme = 'light';
 
@@ -280,6 +297,7 @@ class CLIProxyManager {
         const connectionStatus = document.getElementById('connection-status');
         const refreshAll = document.getElementById('refresh-all');
         const availableModelsRefresh = document.getElementById('available-models-refresh');
+        const versionCheckBtn = document.getElementById('version-check-btn');
 
         if (connectionStatus) {
             connectionStatus.addEventListener('click', () => this.checkConnectionStatus());
@@ -290,6 +308,9 @@ class CLIProxyManager {
         if (availableModelsRefresh) {
             availableModelsRefresh.addEventListener('click', () => this.loadAvailableModels({ forceRefresh: true }));
         }
+        if (versionCheckBtn) {
+            versionCheckBtn.addEventListener('click', () => this.checkLatestVersion());
+        }
 
         // 基础设置
         const debugToggle = document.getElementById('debug-toggle');
@@ -659,6 +680,226 @@ class CLIProxyManager {
         });
     }
 
+    // 顶栏标题动画与状态
+    isMobileViewport() {
+        return typeof window !== 'undefined' ? window.innerWidth <= 768 : false;
+    }
+
+    setupBrandTitleAnimation() {
+        const mainPage = document.getElementById('main-page');
+        if (mainPage && mainPage.style.display === 'none') {
+            return;
+        }
+
+        const toggle = document.getElementById('brand-name-toggle');
+        const wrapper = document.getElementById('brand-texts');
+        const fullText = document.querySelector('.brand-text-full');
+        const shortText = document.querySelector('.brand-text-short');
+
+        if (!toggle || !wrapper || !fullText || !shortText) {
+            return;
+        }
+
+        this.brandElements = { toggle, wrapper, fullText, shortText };
+
+        if (!this.brandToggleHandler) {
+            this.brandToggleHandler = () => this.handleBrandToggle();
+            toggle.addEventListener('click', this.brandToggleHandler);
+        }
+        if (!this.brandResizeHandler) {
+            this.brandResizeHandler = () => this.handleBrandResize();
+            window.addEventListener('resize', this.brandResizeHandler);
+        }
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+        } else {
+            this.enableBrandAnimation();
+        }
+    }
+
+    enableBrandAnimation() {
+        const { toggle } = this.brandElements || {};
+        if (toggle) {
+            toggle.removeAttribute('aria-disabled');
+            toggle.style.pointerEvents = '';
+        }
+        this.brandAnimationReady = true;
+    }
+
+    applyMobileBrandState() {
+        const { toggle, wrapper, shortText } = this.brandElements || {};
+        if (!toggle || !wrapper || !shortText) {
+            return;
+        }
+
+        this.clearBrandCollapseTimer();
+        this.brandIsCollapsed = true;
+        this.brandAnimationReady = false;
+
+        toggle.classList.add('collapsed');
+        toggle.classList.remove('expanded');
+        toggle.setAttribute('aria-disabled', 'true');
+        toggle.style.pointerEvents = 'none';
+
+        const targetWidth = this.getBrandTextWidth(shortText);
+        this.applyBrandWidth(targetWidth, { animate: false });
+    }
+
+    getBrandTextWidth(element) {
+        if (!element) {
+            return 0;
+        }
+        const width = element.scrollWidth || element.getBoundingClientRect().width || 0;
+        return Number.isFinite(width) ? Math.ceil(width) : 0;
+    }
+
+    applyBrandWidth(targetWidth, { animate = true } = {}) {
+        const wrapper = this.brandElements?.wrapper;
+        if (!wrapper || !Number.isFinite(targetWidth)) {
+            return;
+        }
+
+        if (!animate) {
+            const previousTransition = wrapper.style.transition;
+            wrapper.style.transition = 'none';
+            wrapper.style.width = `${targetWidth}px`;
+            wrapper.getBoundingClientRect(); // 强制重绘以应用无动画的宽度
+            wrapper.style.transition = previousTransition;
+            return;
+        }
+
+        wrapper.style.width = `${targetWidth}px`;
+    }
+
+    updateBrandTextWidths(options = {}) {
+        const { wrapper, fullText, shortText } = this.brandElements || {};
+        if (!wrapper || !fullText || !shortText) {
+            return;
+        }
+
+        const targetSpan = this.brandIsCollapsed ? shortText : fullText;
+        const targetWidth = this.getBrandTextWidth(targetSpan);
+        this.applyBrandWidth(targetWidth, { animate: !options.immediate });
+    }
+
+    setBrandCollapsed(collapsed, options = {}) {
+        const { toggle, fullText, shortText } = this.brandElements || {};
+        if (!toggle || !fullText || !shortText) {
+            return;
+        }
+
+        this.brandIsCollapsed = collapsed;
+        const targetSpan = collapsed ? shortText : fullText;
+        const targetWidth = this.getBrandTextWidth(targetSpan);
+
+        this.applyBrandWidth(targetWidth, { animate: options.animate !== false });
+        toggle.classList.toggle('collapsed', collapsed);
+        toggle.classList.toggle('expanded', !collapsed);
+    }
+
+    handleBrandResize() {
+        if (!this.brandElements?.wrapper) {
+            return;
+        }
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
+        if (!this.brandAnimationReady) {
+            this.enableBrandAnimation();
+            this.brandIsCollapsed = false;
+            this.setBrandCollapsed(false, { animate: false });
+            this.scheduleBrandCollapse(this.brandCollapseDelayMs);
+            return;
+        }
+
+        this.updateBrandTextWidths({ immediate: true });
+    }
+
+    scheduleBrandCollapse(delayMs = this.brandCollapseDelayMs) {
+        this.clearBrandCollapseTimer();
+        this.brandCollapseTimer = window.setTimeout(() => {
+            this.setBrandCollapsed(true);
+            this.brandCollapseTimer = null;
+        }, delayMs);
+    }
+
+    clearBrandCollapseTimer() {
+        if (this.brandCollapseTimer) {
+            clearTimeout(this.brandCollapseTimer);
+            this.brandCollapseTimer = null;
+        }
+    }
+
+    startBrandCollapseCycle() {
+        this.setupBrandTitleAnimation();
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
+        if (!this.brandAnimationReady) {
+            return;
+        }
+
+        this.clearBrandCollapseTimer();
+        this.brandIsCollapsed = false;
+        this.setBrandCollapsed(false, { animate: false });
+        this.scheduleBrandCollapse(this.brandCollapseDelayMs);
+    }
+
+    resetBrandTitleState() {
+        this.clearBrandCollapseTimer();
+        const mainPage = document.getElementById('main-page');
+
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
+        if (!this.brandAnimationReady || (mainPage && mainPage.style.display === 'none')) {
+            this.brandIsCollapsed = false;
+            return;
+        }
+
+        this.brandIsCollapsed = false;
+        this.setBrandCollapsed(false, { animate: false });
+    }
+
+    refreshBrandTitleAfterTextChange() {
+        if (this.isMobileViewport()) {
+            this.applyMobileBrandState();
+            return;
+        }
+
+        if (!this.brandAnimationReady) {
+            return;
+        }
+        this.updateBrandTextWidths({ immediate: true });
+        if (!this.brandIsCollapsed) {
+            this.scheduleBrandCollapse(this.brandCollapseDelayMs);
+        }
+    }
+
+    handleBrandToggle() {
+        if (!this.brandAnimationReady) {
+            return;
+        }
+
+        const nextCollapsed = !this.brandIsCollapsed;
+        this.setBrandCollapsed(nextCollapsed);
+        this.clearBrandCollapseTimer();
+
+        if (!nextCollapsed) {
+            // 展开后给用户留出一点时间阅读再收起
+            this.scheduleBrandCollapse(this.brandCollapseDelayMs + 1500);
+        }
+    }
+
 
     // 显示通知
     showNotification(message, type = 'info') {

i18n.js

@@ -52,6 +52,7 @@ const i18n = {
             // 页面标题
             'title.main': 'CLI Proxy API Management Center',
             'title.login': 'CLI Proxy API Management Center',
+            'title.abbr': 'CPAMC',
 
             // 自动登录
             'auto_login.title': '正在自动登录...',
@@ -237,6 +238,15 @@ const i18n = {
             'ai_providers.openai_delete_confirm': '确定要删除这个OpenAI提供商吗？',
             'ai_providers.openai_keys_count': '密钥数量',
             'ai_providers.openai_models_count': '模型数量',
+            'ai_providers.openai_test_title': '连通性测试',
+            'ai_providers.openai_test_hint': '使用当前配置向 /v1/chat/completions 请求，验证是否可用。',
+            'ai_providers.openai_test_model_placeholder': '选择或输入要测试的模型',
+            'ai_providers.openai_test_action': '发送测试',
+            'ai_providers.openai_test_running': '正在发送测试请求...',
+            'ai_providers.openai_test_success': '测试成功，模型可用。',
+            'ai_providers.openai_test_failed': '测试失败',
+            'ai_providers.openai_test_select_placeholder': '从当前模型列表选择',
+            'ai_providers.openai_test_select_empty': '当前未配置模型，可直接输入',
 
 
             // 认证文件管理
@@ -572,6 +582,18 @@ const i18n = {
             'system_info.models_empty': '未从 /v1/models 获取到模型数据',
             'system_info.models_error': '获取模型列表失败',
             'system_info.models_count': '可用模型 {count} 个',
+            'system_info.version_check_title': '版本检查',
+            'system_info.version_check_desc': '调用 /latest-version 接口比对服务器版本，提示是否有可用更新。',
+            'system_info.version_current_label': '当前版本',
+            'system_info.version_latest_label': '最新版本',
+            'system_info.version_check_button': '检查更新',
+            'system_info.version_check_idle': '点击检查更新',
+            'system_info.version_checking': '正在检查最新版本...',
+            'system_info.version_update_available': '有新版本可用：{version}',
+            'system_info.version_is_latest': '当前已是最新版本',
+            'system_info.version_check_error': '检查更新失败',
+            'system_info.version_current_missing': '未获取到服务器版本号，暂无法比对',
+            'system_info.version_unknown': '未知',
 
             // 通知消息
             'notification.debug_updated': '调试设置已更新',
@@ -606,6 +628,9 @@ const i18n = {
             'notification.openai_provider_updated': 'OpenAI提供商更新成功',
             'notification.openai_provider_deleted': 'OpenAI提供商删除成功',
             'notification.openai_model_name_required': '请填写模型名称',
+            'notification.openai_test_url_required': '请先填写有效的 Base URL 以进行测试',
+            'notification.openai_test_key_required': '请至少填写一个 API 密钥以进行测试',
+            'notification.openai_test_model_required': '请选择或输入要测试的模型',
             'notification.data_refreshed': '数据刷新成功',
             'notification.connection_required': '请先建立连接',
             'notification.refresh_failed': '刷新失败',
@@ -694,6 +719,7 @@ const i18n = {
             // Page titles
             'title.main': 'CLI Proxy API Management Center',
             'title.login': 'CLI Proxy API Management Center',
+            'title.abbr': 'CPAMC',
 
             // Auto login
             'auto_login.title': 'Auto Login in Progress...',
@@ -879,6 +905,15 @@ const i18n = {
             'ai_providers.openai_delete_confirm': 'Are you sure you want to delete this OpenAI provider?',
             'ai_providers.openai_keys_count': 'Keys Count',
             'ai_providers.openai_models_count': 'Models Count',
+            'ai_providers.openai_test_title': 'Connection Test',
+            'ai_providers.openai_test_hint': 'Send a /v1/chat/completions request with the current settings to verify availability.',
+            'ai_providers.openai_test_model_placeholder': 'Model to test',
+            'ai_providers.openai_test_action': 'Run Test',
+            'ai_providers.openai_test_running': 'Sending test request...',
+            'ai_providers.openai_test_success': 'Test succeeded. The model responded.',
+            'ai_providers.openai_test_failed': 'Test failed',
+            'ai_providers.openai_test_select_placeholder': 'Choose from current models',
+            'ai_providers.openai_test_select_empty': 'No models configured, enter manually',
 
 
             // Auth files management
@@ -1213,6 +1248,18 @@ const i18n = {
             'system_info.models_empty': 'No models returned by /v1/models',
             'system_info.models_error': 'Failed to load model list',
             'system_info.models_count': '{count} available models',
+            'system_info.version_check_title': 'Update Check',
+            'system_info.version_check_desc': 'Call the /latest-version endpoint to compare with the server version and see if an update is available.',
+            'system_info.version_current_label': 'Current version',
+            'system_info.version_latest_label': 'Latest version',
+            'system_info.version_check_button': 'Check for updates',
+            'system_info.version_check_idle': 'Click to check for updates',
+            'system_info.version_checking': 'Checking for the latest version...',
+            'system_info.version_update_available': 'An update is available: {version}',
+            'system_info.version_is_latest': 'You are on the latest version',
+            'system_info.version_check_error': 'Update check failed',
+            'system_info.version_current_missing': 'Server version is unavailable; cannot compare',
+            'system_info.version_unknown': 'Unknown',
 
             // Notification messages
             'notification.debug_updated': 'Debug settings updated',
@@ -1247,6 +1294,9 @@ const i18n = {
             'notification.openai_provider_updated': 'OpenAI provider updated successfully',
             'notification.openai_provider_deleted': 'OpenAI provider deleted successfully',
             'notification.openai_model_name_required': 'Model name is required',
+            'notification.openai_test_url_required': 'Please provide a valid Base URL before testing',
+            'notification.openai_test_key_required': 'Please add at least one API key before testing',
+            'notification.openai_test_model_required': 'Please select or enter a model to test',
             'notification.data_refreshed': 'Data refreshed successfully',
             'notification.connection_required': 'Please establish connection first',
             'notification.refresh_failed': 'Refresh failed',

index.html

@@ -126,7 +126,12 @@
                 </button>
                 <div class="top-navbar-brand">
                     <img id="site-logo" class="top-navbar-brand-logo" alt="Logo" style="display:none" />
-                    <span class="top-navbar-brand-text" data-i18n="title.main">CLI Proxy API Management Center</span>
+                    <button class="top-navbar-brand-toggle expanded" id="brand-name-toggle" type="button" aria-label="展开标题">
+                        <span class="brand-texts" id="brand-texts">
+                            <span class="top-navbar-brand-text brand-text brand-text-full" data-i18n="title.main">CLI Proxy API Management Center</span>
+                            <span class="top-navbar-brand-text brand-text brand-text-short" data-i18n="title.abbr">CPAMC</span>
+                        </span>
+                    </button>
                 </div>
             </div>
             <div class="top-navbar-actions">
@@ -553,7 +558,7 @@
                                             <i class="fas fa-chevron-right"></i>
                                         </button>
                                     </div>
-                                    <input type="file" id="auth-file-input" accept=".json" style="display: none;">
+                                    <input type="file" id="auth-file-input" accept=".json" multiple style="display: none;">
                                 </div>
                             </div>
 
@@ -875,6 +880,7 @@
                                     </div>
                                 </div>
                             </div>
+
                         </section>
 
                         <!-- 使用统计 -->
@@ -884,81 +890,91 @@
                             <!-- 概览统计卡片 -->
                             <div class="stats-overview">
                                 <div class="stat-card">
-                                    <div class="stat-icon">
+                                    <div class="stat-card-header">
-                                        <i class="fas fa-paper-plane"></i>
+                                        <div class="stat-meta">
-                                    </div>
+                                            <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
-                                    <div class="stat-content">
+                                            <div class="stat-number" id="total-requests">0</div>
-                                        <div class="stat-number" id="total-requests">0</div>
+                                            <div class="stat-subtext stat-subtext-inline">
-                                        <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
+                                                <span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
-                                    </div>
+                                                <span class="dot-divider">•</span>
-                                </div>
+                                                <span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
-
+                                            </div>
-                                <div class="stat-card">
-                                    <div class="stat-icon success">
-                                        <i class="fas fa-check-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="success-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.success_requests">成功请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon error">
-                                        <i class="fas fa-exclamation-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="failed-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.failed_requests">失败请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-coins"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-tokens">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
-                                        <div class="stat-subtext">
-                                            <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
-                                            <span id="cached-tokens">0</span>
                                         </div>
-                                        <div class="stat-subtext">
+                                        <div class="stat-icon">
-                                            <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
+                                            <i class="fas fa-paper-plane"></i>
-                                            <span id="reasoning-tokens">0</span>
                                         </div>
                                     </div>
-                                </div>
+                                    <div class="stat-sparkline" aria-label="30分钟请求趋势">
-
+                                        <canvas id="requests-sparkline"></canvas>
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-gauge-high"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="rpm-30m">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
                                     </div>
                                 </div>
 
                                 <div class="stat-card">
-                                    <div class="stat-icon">
+                                    <div class="stat-card-header">
-                                        <i class="fas fa-stopwatch"></i>
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
+                                            <div class="stat-number" id="total-tokens">0</div>
+                                            <div class="stat-subtext">
+                                                <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
+                                                <span id="cached-tokens">0</span>
+                                            </div>
+                                            <div class="stat-subtext">
+                                                <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
+                                                <span id="reasoning-tokens">0</span>
+                                            </div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-coins"></i>
+                                        </div>
                                     </div>
-                                    <div class="stat-content">
+                                    <div class="stat-sparkline" aria-label="30分钟Token趋势">
-                                        <div class="stat-number" id="tpm-30m">0</div>
+                                        <canvas id="tokens-sparkline"></canvas>
-                                        <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
+                                            <div class="stat-number" id="rpm-30m">0</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-gauge-high"></i>
+                                        </div>
+                                    </div>
+                                    <div class="stat-sparkline" aria-label="30分钟RPM趋势">
+                                        <canvas id="rpm-sparkline"></canvas>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                            <div class="stat-number" id="tpm-30m">0</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-stopwatch"></i>
+                                        </div>
+                                    </div>
+                                    <div class="stat-sparkline" aria-label="30分钟TPM趋势">
+                                        <canvas id="tpm-sparkline"></canvas>
                                     </div>
                                 </div>
 
                                 <div class="stat-card cost-summary-card">
-                                    <div class="stat-icon">
+                                    <div class="stat-card-header">
-                                        <i class="fas fa-dollar-sign"></i>
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
+                                            <div class="stat-number" id="total-cost">--</div>
+                                            <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-dollar-sign"></i>
+                                        </div>
                                     </div>
-                                    <div class="stat-content">
+                                    <div class="stat-sparkline" aria-label="30分钟花费趋势">
-                                        <div class="stat-number" id="total-cost">--</div>
+                                        <canvas id="cost-sparkline"></canvas>
-                                        <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
-                                        <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
                                     </div>
                                 </div>
                             </div>
@@ -1309,6 +1325,31 @@
                                     </div>
                                 </div>
                             </div>
+
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-arrows-rotate"></i> <span data-i18n="system_info.version_check_title">版本检查</span></h3>
+                                </div>
+                                <div class="card-content version-check">
+                                    <p class="form-hint" data-i18n="system_info.version_check_desc">调用 /latest-version 接口比对服务器版本，提示是否有可用更新。</p>
+                                    <div class="version-check-rows">
+                                        <div class="version-check-row">
+                                            <span class="status-label" data-i18n="system_info.version_current_label">当前版本</span>
+                                            <span id="version-check-current" class="version-check-value">-</span>
+                                        </div>
+                                        <div class="version-check-row">
+                                            <span class="status-label" data-i18n="system_info.version_latest_label">最新版本</span>
+                                            <span id="version-check-latest" class="version-check-value">-</span>
+                                        </div>
+                                    </div>
+                                    <div class="version-check-actions">
+                                        <button type="button" id="version-check-btn" class="btn btn-primary">
+                                            <i class="fas fa-search"></i> <span data-i18n="system_info.version_check_button">检查更新</span>
+                                        </button>
+                                        <span id="version-check-result" class="version-check-result" data-i18n="system_info.version_check_idle">点击检查更新</span>
+                                    </div>
+                                </div>
+                            </div>
                         </section>
                     </div>
                     <!-- /内容区域 -->

src/core/connection.js

@@ -129,6 +129,56 @@ export const connectionModule = {
         }
     },
 
+    renderVersionCheckStatus({
+        currentVersion,
+        latestVersion,
+        message,
+        status
+    } = {}) {
+        const resolvedCurrent = (typeof currentVersion === 'undefined' || currentVersion === null)
+            ? this.serverVersion
+            : currentVersion;
+        const resolvedLatest = (typeof latestVersion === 'undefined' || latestVersion === null)
+            ? this.latestVersion
+            : latestVersion;
+        const resolvedMessage = (typeof message === 'undefined' || message === null)
+            ? (this.versionCheckMessage || i18n.t('system_info.version_check_idle'))
+            : message;
+        const resolvedStatus = status || this.versionCheckStatus || 'muted';
+
+        this.latestVersion = resolvedLatest || null;
+        this.versionCheckMessage = resolvedMessage;
+        this.versionCheckStatus = resolvedStatus;
+
+        const currentEl = document.getElementById('version-check-current');
+        if (currentEl) {
+            currentEl.textContent = resolvedCurrent || i18n.t('system_info.version_unknown');
+        }
+
+        const latestEl = document.getElementById('version-check-latest');
+        if (latestEl) {
+            latestEl.textContent = resolvedLatest || '-';
+        }
+
+        const resultEl = document.getElementById('version-check-result');
+        if (resultEl) {
+            resultEl.textContent = resolvedMessage;
+            resultEl.className = `version-check-result ${resolvedStatus}`.trim();
+        }
+    },
+
+    resetVersionCheckStatus() {
+        this.latestVersion = null;
+        this.versionCheckMessage = i18n.t('system_info.version_check_idle');
+        this.versionCheckStatus = 'muted';
+        this.renderVersionCheckStatus({
+            currentVersion: this.serverVersion,
+            latestVersion: this.latestVersion,
+            message: this.versionCheckMessage,
+            status: this.versionCheckStatus
+        });
+    },
+
     // 渲染底栏的版本与构建时间
     renderVersionInfo() {
         const versionEl = document.getElementById('api-version');
@@ -149,12 +199,20 @@ export const connectionModule = {
             const domVersion = this.readUiVersionFromDom();
             uiVersionEl.textContent = this.uiVersion || domVersion || 'v0.0.0-dev';
         }
+
+        this.renderVersionCheckStatus({
+            currentVersion: this.serverVersion,
+            latestVersion: this.latestVersion,
+            message: this.versionCheckMessage,
+            status: this.versionCheckStatus
+        });
     },
 
     // 清空版本信息（例如登出时）
     resetVersionInfo() {
         this.serverVersion = null;
         this.serverBuildDate = null;
+        this.resetVersionCheckStatus();
         this.renderVersionInfo();
     },
 
@@ -171,6 +229,119 @@ export const connectionModule = {
         return buildDate;
     },
 
+    parseVersionSegments(version) {
+        if (!version || typeof version !== 'string') return null;
+        const cleaned = version.trim().replace(/^v/i, '');
+        if (!cleaned) return null;
+        const parts = cleaned.split(/[^0-9]+/).filter(Boolean).map(segment => {
+            const parsed = parseInt(segment, 10);
+            return Number.isFinite(parsed) ? parsed : 0;
+        });
+        return parts.length ? parts : null;
+    },
+
+    compareVersions(latestVersion, currentVersion) {
+        const latestParts = this.parseVersionSegments(latestVersion);
+        const currentParts = this.parseVersionSegments(currentVersion);
+        if (!latestParts || !currentParts) {
+            return null;
+        }
+
+        const length = Math.max(latestParts.length, currentParts.length);
+        for (let i = 0; i < length; i++) {
+            const latest = latestParts[i] || 0;
+            const current = currentParts[i] || 0;
+            if (latest > current) return 1;
+            if (latest < current) return -1;
+        }
+
+        return 0;
+    },
+
+    async checkLatestVersion() {
+        if (!this.isConnected) {
+            const message = i18n.t('notification.connection_required');
+            this.renderVersionCheckStatus({
+                currentVersion: this.serverVersion,
+                latestVersion: this.latestVersion,
+                message,
+                status: 'warning'
+            });
+            this.showNotification(message, 'error');
+            return;
+        }
+
+        const button = document.getElementById('version-check-btn');
+        const originalLabel = button ? button.innerHTML : '';
+
+        if (button) {
+            button.disabled = true;
+            button.innerHTML = `<div class="loading"></div> ${i18n.t('system_info.version_checking')}`;
+        }
+
+        this.renderVersionCheckStatus({
+            currentVersion: this.serverVersion,
+            latestVersion: this.latestVersion,
+            message: i18n.t('system_info.version_checking'),
+            status: 'info'
+        });
+
+        try {
+            const data = await this.makeRequest('/latest-version');
+            const latestVersion = data?.['latest-version'] || data?.latest_version || '';
+            const latestParts = this.parseVersionSegments(latestVersion);
+            const currentParts = this.parseVersionSegments(this.serverVersion);
+            const comparison = (latestParts && currentParts)
+                ? this.compareVersions(latestVersion, this.serverVersion)
+                : null;
+            let messageKey = 'system_info.version_check_error';
+            let statusClass = 'error';
+
+            if (!latestParts) {
+                messageKey = 'system_info.version_check_error';
+            } else if (!currentParts) {
+                messageKey = 'system_info.version_current_missing';
+                statusClass = 'warning';
+            } else if (comparison > 0) {
+                messageKey = 'system_info.version_update_available';
+                statusClass = 'warning';
+            } else {
+                messageKey = 'system_info.version_is_latest';
+                statusClass = 'success';
+            }
+
+            const message = i18n.t(messageKey, latestVersion ? { version: latestVersion } : undefined);
+            this.renderVersionCheckStatus({
+                currentVersion: this.serverVersion,
+                latestVersion,
+                message,
+                status: statusClass
+            });
+
+            if (latestVersion && comparison !== null) {
+                const notifyKey = comparison > 0
+                    ? 'system_info.version_update_available'
+                    : 'system_info.version_is_latest';
+                const notifyType = comparison > 0 ? 'warning' : 'success';
+                this.showNotification(i18n.t(notifyKey, { version: latestVersion }), notifyType);
+            }
+        } catch (error) {
+            const message = `${i18n.t('system_info.version_check_error')}: ${error.message}`;
+            this.renderVersionCheckStatus({
+                currentVersion: this.serverVersion,
+                latestVersion: this.latestVersion,
+                message,
+                status: 'error'
+            });
+            this.showNotification(message, 'error');
+        } finally {
+            if (button) {
+                button.disabled = false;
+                button.innerHTML = originalLabel;
+            }
+        }
+    },
+
     // API 请求方法
     async makeRequest(endpoint, options = {}) {
         try {

src/modules/ai-providers.js

@@ -23,6 +23,19 @@ const buildModelEndpoint = (baseUrl) => {
     return `${trimmed}/v1/models`;
 };
 
+const buildChatCompletionsEndpoint = (baseUrl) => {
+    if (!baseUrl) return '';
+    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
+    if (!trimmed) return '';
+    if (trimmed.endsWith('/chat/completions')) {
+        return trimmed;
+    }
+    if (trimmed.endsWith('/v1')) {
+        return `${trimmed}/chat/completions`;
+    }
+    return `${trimmed}/v1/chat/completions`;
+};
+
 const normalizeExcludedModels = (input) => {
     const rawList = Array.isArray(input)
         ? input
@@ -1336,6 +1349,9 @@ export function applyOpenAIModelDiscoverySelection() {
     });
 
     this.populateModelFields(context.modelWrapperId, Array.from(mergedMap.values()));
+    if (context.mode === 'edit' && typeof this.populateOpenAITestModelOptions === 'function') {
+        this.populateOpenAITestModelOptions(Array.from(mergedMap.values()), { preserveInput: true });
+    }
     this.closeOpenAIModelDiscovery();
 
     if (addedCount > 0) {
@@ -1353,6 +1369,180 @@ export function closeOpenAIModelDiscovery() {
     this.openAIModelDiscoveryContext = null;
 }
 
+export function populateOpenAITestModelOptions(models = [], { preserveInput = true } = {}) {
+    const select = document.getElementById('openai-test-model-select');
+    const input = document.getElementById('openai-test-model-input');
+    if (!select) return;
+
+    const names = [];
+    const seen = new Set();
+    (Array.isArray(models) ? models : []).forEach(model => {
+        const name = model?.name ? String(model.name).trim() : '';
+        if (!name || seen.has(name)) return;
+        seen.add(name);
+        names.push(name);
+    });
+
+    if (!names.length) {
+        select.disabled = true;
+        select.innerHTML = `<option value="">${i18n.t('ai_providers.openai_test_select_empty')}</option>`;
+        if (input && !preserveInput) {
+            input.value = '';
+        }
+        return;
+    }
+
+    select.disabled = false;
+    const placeholder = `<option value="">${i18n.t('ai_providers.openai_test_select_placeholder')}</option>`;
+    const options = names.map(name => `<option value="${this.escapeHtml(name)}">${this.escapeHtml(name)}</option>`).join('');
+    select.innerHTML = `${placeholder}${options}`;
+
+    if (input) {
+        if (!preserveInput || !input.value) {
+            const firstName = names[0];
+            if (firstName) {
+                input.value = firstName;
+                select.value = firstName;
+                return;
+            }
+        }
+
+        const current = input.value.trim();
+        if (current && names.includes(current)) {
+            select.value = current;
+        } else {
+            select.value = '';
+        }
+    }
+}
+
+export function setOpenAITestStatus(message = '', type = 'info') {
+    const statusEl = document.getElementById('openai-test-status');
+    if (!statusEl) return;
+    statusEl.textContent = message || '';
+    statusEl.className = `openai-test-status ${type || ''}`.trim();
+}
+
+const setOpenAITestButtonState = (state = 'idle') => {
+    const button = document.getElementById('openai-test-button');
+    if (!button) return;
+    button.disabled = state === 'loading';
+    button.classList.remove('openai-test-btn-success', 'openai-test-btn-error');
+
+    switch (state) {
+        case 'loading':
+            button.innerHTML = `<i class="fas fa-spinner fa-spin"></i>`;
+            break;
+        case 'success':
+            button.classList.add('openai-test-btn-success');
+            button.innerHTML = `<i class="fas fa-check"></i>`;
+            break;
+        case 'error':
+            button.classList.add('openai-test-btn-error');
+            button.innerHTML = `<i class="fas fa-times"></i>`;
+            break;
+        default:
+            button.innerHTML = `<i class="fas fa-stethoscope"></i> ${i18n.t('ai_providers.openai_test_action')}`;
+            break;
+    }
+};
+
+export async function testOpenAIProviderConnection() {
+    const baseUrlInput = document.getElementById('edit-provider-url');
+    const baseUrl = baseUrlInput ? baseUrlInput.value.trim() : '';
+    if (!baseUrl) {
+        const message = i18n.t('notification.openai_test_url_required');
+        this.setOpenAITestStatus(message, 'error');
+        this.showNotification(message, 'error');
+        return;
+    }
+
+    const endpoint = buildChatCompletionsEndpoint(baseUrl);
+    if (!endpoint) {
+        const message = i18n.t('notification.openai_test_url_required');
+        this.setOpenAITestStatus(message, 'error');
+        this.showNotification(message, 'error');
+        return;
+    }
+
+    const apiKeyEntries = this.collectApiKeyEntryInputs('edit-openai-keys-wrapper');
+    const firstKeyEntry = Array.isArray(apiKeyEntries) ? apiKeyEntries.find(entry => entry && entry['api-key']) : null;
+    if (!firstKeyEntry) {
+        const message = i18n.t('notification.openai_test_key_required');
+        this.setOpenAITestStatus(message, 'error');
+        this.showNotification(message, 'error');
+        return;
+    }
+
+    const models = this.collectModelInputs('edit-provider-models-wrapper');
+    this.populateOpenAITestModelOptions(models);
+
+    const modelInput = document.getElementById('openai-test-model-input');
+    let modelName = modelInput ? modelInput.value.trim() : '';
+    if (!modelName) {
+        const firstModel = Array.isArray(models) ? models.find(model => model && model.name) : null;
+        if (firstModel && firstModel.name) {
+            modelName = firstModel.name;
+            if (modelInput) {
+                modelInput.value = firstModel.name;
+            }
+        }
+    }
+
+    if (!modelName) {
+        const message = i18n.t('notification.openai_test_model_required');
+        this.setOpenAITestStatus(message, 'error');
+        this.showNotification(message, 'error');
+        return;
+    }
+
+    const customHeaders = this.collectHeaderInputs('edit-openai-headers-wrapper') || {};
+    const headers = {
+        'Content-Type': 'application/json',
+        ...customHeaders
+    };
+    if (!headers.Authorization && !headers.authorization) {
+        headers.Authorization = `Bearer ${firstKeyEntry['api-key']}`;
+    }
+
+    this.setOpenAITestStatus('', 'info');
+    setOpenAITestButtonState('loading');
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                model: modelName,
+                messages: [{ role: 'user', content: 'Hi' }],
+                stream: false,
+                max_tokens: 5
+            })
+        });
+
+        const rawText = await response.text();
+
+        if (!response.ok) {
+            let errorMessage = `${response.status} ${response.statusText}`;
+            try {
+                const parsed = rawText ? JSON.parse(rawText) : null;
+                errorMessage = parsed?.error?.message || parsed?.message || errorMessage;
+            } catch (error) {
+                if (rawText) {
+                    errorMessage = rawText;
+                }
+            }
+            throw new Error(errorMessage);
+        }
+
+        this.setOpenAITestStatus('', 'info');
+        setOpenAITestButtonState('success');
+    } catch (error) {
+        this.setOpenAITestStatus(`${i18n.t('ai_providers.openai_test_failed')}: ${error.message}`, 'error');
+        setOpenAITestButtonState('error');
+    }
+}
+
 export function showAddOpenAIProviderModal() {
     const modal = document.getElementById('modal');
     const modalBody = document.getElementById('modal-body');
@@ -1490,6 +1680,18 @@ export function editOpenAIProvider(index, provider) {
                     </button>
                 </div>
             </div>
+            <div class="form-group">
+                <label>${i18n.t('ai_providers.openai_test_title')}</label>
+                <p class="form-hint">${i18n.t('ai_providers.openai_test_hint')}</p>
+                <div class="input-group openai-test-group">
+                    <select id="openai-test-model-select" aria-label="${i18n.t('ai_providers.openai_test_model_placeholder')}"></select>
+                    <input type="text" id="openai-test-model-input" placeholder="${i18n.t('ai_providers.openai_test_model_placeholder')}">
+                    <button type="button" class="btn btn-secondary" id="openai-test-button" onclick="manager.testOpenAIProviderConnection()">
+                        <i class="fas fa-stethoscope"></i> ${i18n.t('ai_providers.openai_test_action')}
+                    </button>
+                </div>
+                <div id="openai-test-status" class="openai-test-status"></div>
+            </div>
             <div class="modal-actions">
                 <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
                 <button class="btn btn-primary" onclick="manager.updateOpenAIProvider(${index})">${i18n.t('common.update')}</button>
@@ -1500,6 +1702,28 @@ export function editOpenAIProvider(index, provider) {
     this.populateModelFields('edit-provider-models-wrapper', models);
     this.populateHeaderFields('edit-openai-headers-wrapper', provider?.headers || null);
     this.populateApiKeyEntryFields('edit-openai-keys-wrapper', apiKeyEntries);
+    this.populateOpenAITestModelOptions(models);
+    this.setOpenAITestStatus('', 'info');
+    setOpenAITestButtonState('idle');
+
+    const modelWrapper = document.getElementById('edit-provider-models-wrapper');
+    if (modelWrapper) {
+        modelWrapper.addEventListener('input', () => {
+            const currentModels = this.collectModelInputs('edit-provider-models-wrapper');
+            this.populateOpenAITestModelOptions(currentModels, { preserveInput: true });
+        });
+    }
+
+    const modelSelect = document.getElementById('openai-test-model-select');
+    if (modelSelect) {
+        modelSelect.addEventListener('change', (event) => {
+            const value = event?.target?.value || '';
+            const input = document.getElementById('openai-test-model-input');
+            if (input && value) {
+                input.value = value;
+            }
+        });
+    }
 }
 
 export async function updateOpenAIProvider(index) {
@@ -1683,6 +1907,9 @@ export const aiProvidersModule = {
     setOpenAIModelDiscoverySearch,
     applyOpenAIModelDiscoverySelection,
     closeOpenAIModelDiscovery,
+    populateOpenAITestModelOptions,
+    setOpenAITestStatus,
+    testOpenAIProviderConnection,
     addModelField,
     populateModelFields,
     collectModelInputs,

src/modules/auth-files.js

@@ -998,37 +998,65 @@ export const authFilesModule = {
 
     // 处理文件上传
     async handleFileUpload(event) {
-        const file = event.target.files[0];
+        const input = event?.target;
-        if (!file) return;
+        const files = Array.from(input?.files || []);
+        if (input) {
+            input.value = '';
+        }
+        if (!files.length) return;
 
-        if (!file.name.endsWith('.json')) {
+        const validFiles = [];
+        const invalidFiles = [];
+        files.forEach(file => {
+            if (file && file.name.endsWith('.json')) {
+                validFiles.push(file);
+            } else if (file) {
+                invalidFiles.push(file.name);
+            }
+        });
+
+        if (invalidFiles.length) {
             this.showNotification(i18n.t('auth_files.upload_error_json'), 'error');
-            event.target.value = '';
+        }
-            return;
+        if (!validFiles.length) return;
+
+        let successCount = 0;
+        const failed = [];
+
+        for (const file of validFiles) {
+            try {
+                await this.uploadSingleAuthFile(file);
+                successCount++;
+            } catch (error) {
+                failed.push({ name: file.name, message: error.message });
+            }
         }
 
-        try {
+        if (successCount > 0) {
-            const formData = new FormData();
+            this.clearCache();
-            formData.append('file', file, file.name);
-
-            const response = await this.apiClient.requestRaw('/auth-files', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                throw new Error(errorData.error || `HTTP ${response.status}`);
-            }
-
-            this.clearCache(); // 清除缓存
             await this.loadAuthFiles();
-            this.showNotification(i18n.t('auth_files.upload_success'), 'success');
+            const suffix = validFiles.length > 1 ? ` (${successCount}/${validFiles.length})` : '';
-        } catch (error) {
+            this.showNotification(`${i18n.t('auth_files.upload_success')}${suffix}`, failed.length ? 'warning' : 'success');
-            this.showNotification(`${i18n.t('notification.upload_failed')}: ${error.message}`, 'error');
+        }
-        } finally {
+
-            // 清空文件输入框,允许重复上传同一文件
+        if (failed.length) {
-            event.target.value = '';
+            const details = failed.map(item => `${item.name}: ${item.message}`).join('; ');
+            this.showNotification(`${i18n.t('notification.upload_failed')}: ${details}`, 'error');
+        }
+    },
+
+    async uploadSingleAuthFile(file) {
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+
+        const response = await this.apiClient.requestRaw('/auth-files', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.error || `HTTP ${response.status}`);
         }
     },
 

src/modules/language.js

@@ -21,6 +21,7 @@ export const languageModule = {
         const newLang = currentLang === 'zh-CN' ? 'en-US' : 'zh-CN';
         i18n.setLanguage(newLang);
 
+        this.refreshBrandTitleAfterTextChange();
         this.updateThemeButtons();
         this.updateConnectionStatus();
 

src/modules/login.js

@@ -66,6 +66,7 @@ export const loginModule = {
         document.getElementById('login-page').style.display = 'flex';
         document.getElementById('main-page').style.display = 'none';
         this.isLoggedIn = false;
+        this.resetBrandTitleState();
         this.updateLoginConnectionInfo();
     },
 
@@ -74,6 +75,7 @@ export const loginModule = {
         document.getElementById('main-page').style.display = 'block';
         this.isLoggedIn = true;
         this.updateConnectionInfo();
+        this.startBrandCollapseCycle();
     },
 
     async login(apiBase, managementKey) {

src/modules/usage.js

@@ -140,6 +140,7 @@ export async function loadUsageStats(usageData = null) {
 
         // 更新概览卡片
         this.updateUsageOverview(usage);
+        this.renderOverviewSparklines(usage);
         this.updateChartLineSelectors(usage);
         this.renderModelPriceOptions(usage);
         this.renderSavedModelPrices();
@@ -168,6 +169,7 @@ export async function loadUsageStats(usageData = null) {
         this.renderModelPriceOptions(null);
         this.renderSavedModelPrices();
         this.updateCostSummaryAndChart(null);
+        this.destroySparklineCharts();
 
         // 清空概览数据
         ['total-requests', 'success-requests', 'failed-requests', 'total-tokens', 'cached-tokens', 'reasoning-tokens', 'rpm-30m', 'tpm-30m'].forEach(id => {
@@ -242,6 +244,36 @@ export function formatPerMinuteValue(value) {
     return num.toFixed(2);
 }
 
+export function formatCompactNumber(value) {
+    const num = Number(value);
+    if (!Number.isFinite(num)) {
+        return '0';
+    }
+    const abs = Math.abs(num);
+    if (abs >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`;
+    }
+    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
+}
+
+export function formatCompactNumber(value) {
+    const num = Number(value);
+    if (!Number.isFinite(num)) {
+        return '0';
+    }
+    const abs = Math.abs(num);
+    if (abs >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`;
+    }
+    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
+}
+
 export function getModelNamesFromUsage(usage) {
     if (!usage) {
         return [];
@@ -678,29 +710,65 @@ export function renderSavedModelPrices() {
         container.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.model_price_empty')}</div>`;
         return;
     }
-
     const rows = entries.map(([model, price]) => {
         const prompt = Number(price?.prompt) || 0;
         const completion = Number(price?.completion) || 0;
+        const safeModel = this.escapeHtml ? this.escapeHtml(model) : model;
+        const editArg = JSON.stringify(model).replace(/"/g, '&quot;');
         return `
-            <div class="model-price-row">
+            <div class="provider-item model-price-item" onclick="manager.handleModelPriceEdit(${editArg})">
-                <span class="model-name">${model}</span>
+                <div class="item-content">
-                <span>$${prompt.toFixed(4)} / 1M</span>
+                    <div class="item-title">${safeModel}</div>
-                <span>$${completion.toFixed(4)} / 1M</span>
+                    <div class="item-meta">
+                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_prompt')}: $${prompt.toFixed(4)} / 1M</span>
+                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_completion')}: $${completion.toFixed(4)} / 1M</span>
+                    </div>
+                </div>
+                <div class="item-actions">
+                    <button class="btn btn-secondary" onclick="event.stopPropagation(); manager.handleModelPriceEdit(${editArg});">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                </div>
             </div>
         `;
     }).join('');
 
-    container.innerHTML = `
+    container.innerHTML = rows;
-        <div class="model-price-table">
+}
-            <div class="model-price-header">
+
-                <span>${i18n.t('usage_stats.model_price_model')}</span>
+export function handleModelPriceEdit(modelName) {
-                <span>${i18n.t('usage_stats.model_price_prompt')}</span>
+    const model = (modelName || '').trim();
-                <span>${i18n.t('usage_stats.model_price_completion')}</span>
+    const select = document.getElementById('model-price-model-select');
-            </div>
+    const promptInput = document.getElementById('model-price-prompt');
-            ${rows}
+    const completionInput = document.getElementById('model-price-completion');
-        </div>
+    const form = document.getElementById('model-price-form');
-    `;
+    if (!select || !promptInput || !completionInput) {
+        return;
+    }
+
+    const options = Array.from(select.options).map(opt => opt.value);
+    if (model && !options.includes(model)) {
+        const opt = document.createElement('option');
+        opt.value = model;
+        opt.textContent = model;
+        select.appendChild(opt);
+    }
+
+    select.disabled = false;
+    select.value = model;
+    const price = this.modelPrices?.[model];
+    if (price) {
+        promptInput.value = Number.isFinite(price.prompt) ? price.prompt : '';
+        completionInput.value = Number.isFinite(price.completion) ? price.completion : '';
+    } else {
+        promptInput.value = '';
+        completionInput.value = '';
+    }
+
+    promptInput.focus();
+    if (form && typeof form.scrollIntoView === 'function') {
+        form.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
 }
 
 export function prefillModelPriceInputs() {
@@ -751,6 +819,7 @@ export function handleModelPriceSubmit() {
     this.persistModelPrices(next);
     this.renderSavedModelPrices();
     this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
+    this.renderOverviewSparklines(this.currentUsageData);
     this.showNotification(i18n.t('usage_stats.model_price_saved'), 'success');
 }
 
@@ -768,6 +837,7 @@ export function handleModelPriceReset() {
     this.renderSavedModelPrices();
     this.prefillModelPriceInputs();
     this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
+    this.renderOverviewSparklines(this.currentUsageData);
 }
 
 export function calculateTokenBreakdown(usage = null) {
@@ -826,6 +896,191 @@ export function calculateRecentPerMinuteRates(windowMinutes = 30, usage = null)
     };
 }
 
+export function buildRecentWindowSeries(windowMinutes = 30, usage = null, prices = null) {
+    const usagePayload = usage || this.currentUsageData;
+    const effectiveWindow = Number.isFinite(windowMinutes) && windowMinutes > 0
+        ? Math.min(windowMinutes, 720)
+        : 30;
+    const bucketMs = 60 * 1000;
+    const bucketCount = Math.max(1, Math.floor(effectiveWindow));
+    const now = Date.now();
+    const windowStart = now - bucketCount * bucketMs;
+    const labels = Array.from({ length: bucketCount }, (_, index) =>
+        this.formatMinuteLabel(new Date(windowStart + index * bucketMs))
+    );
+
+    const requestSeries = new Array(bucketCount).fill(0);
+    const tokenSeries = new Array(bucketCount).fill(0);
+    const costSeries = new Array(bucketCount).fill(0);
+    const priceTable = prices || this.modelPrices || {};
+    const hasPrices = Object.keys(priceTable).length > 0;
+
+    if (!usagePayload) {
+        return {
+            labels,
+            requests: requestSeries,
+            tokens: tokenSeries,
+            rpm: requestSeries,
+            tpm: tokenSeries,
+            cost: costSeries,
+            hasPrices
+        };
+    }
+
+    const details = this.collectUsageDetailsFromUsage(usagePayload);
+    const calculateDetailCost = (detail) => {
+        if (!hasPrices) {
+            return 0;
+        }
+        const modelName = detail.__modelName || '';
+        const price = priceTable[modelName];
+        if (!price) {
+            return 0;
+        }
+        const tokens = detail?.tokens || {};
+        const promptTokens = Number(tokens.input_tokens) || 0;
+        const completionTokens = Number(tokens.output_tokens) || 0;
+        const promptCost = (promptTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.prompt) || 0);
+        const completionCost = (completionTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.completion) || 0);
+        const total = promptCost + completionCost;
+        return Number.isFinite(total) && total > 0 ? total : 0;
+    };
+
+    details.forEach(detail => {
+        const timestamp = Date.parse(detail.timestamp);
+        if (Number.isNaN(timestamp) || timestamp < windowStart) {
+            return;
+        }
+        const bucketIndex = Math.min(bucketCount - 1, Math.floor((timestamp - windowStart) / bucketMs));
+        if (bucketIndex < 0 || bucketIndex >= bucketCount) {
+            return;
+        }
+
+        requestSeries[bucketIndex] += 1;
+        tokenSeries[bucketIndex] += this.extractTotalTokens(detail);
+        costSeries[bucketIndex] += calculateDetailCost(detail);
+    });
+
+    return {
+        labels,
+        requests: requestSeries,
+        tokens: tokenSeries,
+        rpm: requestSeries,
+        tpm: tokenSeries,
+        cost: costSeries,
+        hasPrices
+    };
+}
+
+export function destroySparklineCharts(targetIds = null) {
+    if (!this.sparklineCharts) {
+        this.sparklineCharts = {};
+    }
+    const ids = targetIds && targetIds.length ? targetIds : Object.keys(this.sparklineCharts);
+    ids.forEach(id => {
+        const chart = this.sparklineCharts[id];
+        if (chart && typeof chart.destroy === 'function') {
+            chart.destroy();
+        }
+        delete this.sparklineCharts[id];
+
+        const canvas = document.getElementById(id);
+        if (canvas && typeof canvas.getContext === 'function') {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const width = canvas.width || canvas.clientWidth || 300;
+                const height = canvas.height || canvas.clientHeight || 80;
+                ctx.clearRect(0, 0, width, height);
+            }
+        }
+    });
+}
+
+export function renderOverviewSparklines(usage = null) {
+    const series = this.buildRecentWindowSeries(30, usage, this.modelPrices);
+    const labels = series.labels || [];
+    const styleFor = (index = 0) => {
+        const fallback = { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' };
+        if (!Array.isArray(this.chartLineStyles) || !this.chartLineStyles.length) {
+            return fallback;
+        }
+        return this.chartLineStyles[index % this.chartLineStyles.length] || fallback;
+    };
+
+    const createSparkline = ({ id, data, styleIndex, requirePrices = false }) => {
+        if (requirePrices && !series.hasPrices) {
+            this.destroySparklineCharts([id]);
+            return;
+        }
+        const canvas = document.getElementById(id);
+        if (!canvas) {
+            return;
+        }
+
+        const style = styleFor(styleIndex);
+        const values = Array.isArray(data) && data.length ? data : [0];
+        const maxValue = values.reduce((max, value) => Math.max(max, Number(value) || 0), 0);
+        const suggestedMax = maxValue > 0 ? maxValue * 1.2 : 1;
+
+        this.destroySparklineCharts([id]);
+        if (!this.sparklineCharts) {
+            this.sparklineCharts = {};
+        }
+
+        this.sparklineCharts[id] = new Chart(canvas, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [{
+                    data: values,
+                    borderColor: style.borderColor,
+                    backgroundColor: style.backgroundColor,
+                    fill: true,
+                    tension: 0.35,
+                    pointRadius: 0,
+                    pointHoverRadius: 3,
+                    borderWidth: 2,
+                    spanGaps: true
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: false,
+                interaction: { intersect: false, mode: 'index' },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        callbacks: {
+                            label: (ctx) => this.formatCompactNumber(ctx.parsed.y || 0)
+                        }
+                    }
+                },
+                layout: { padding: { left: 2, right: 2, top: 6, bottom: 6 } },
+                scales: {
+                    x: { display: false },
+                    y: {
+                        display: false,
+                        beginAtZero: true,
+                        suggestedMin: 0,
+                        suggestedMax
+                    }
+                },
+                elements: {
+                    line: { borderWidth: 2, tension: 0.35 },
+                    point: { radius: 0, hitRadius: 3 }
+                }
+            }
+        });
+    };
+
+    createSparkline({ id: 'requests-sparkline', data: series.requests, styleIndex: 0 });
+    createSparkline({ id: 'tokens-sparkline', data: series.tokens, styleIndex: 1 });
+    createSparkline({ id: 'rpm-sparkline', data: series.rpm, styleIndex: 2 });
+    createSparkline({ id: 'tpm-sparkline', data: series.tpm, styleIndex: 3 });
+    createSparkline({ id: 'cost-sparkline', data: series.cost, styleIndex: 7, requirePrices: true });
+}
+
 export function createHourlyBucketMeta() {
     const hourMs = 60 * 60 * 1000;
     const now = new Date();
@@ -1000,6 +1255,15 @@ export function formatHourLabel(date) {
     return `${month}-${day} ${hour}:00`;
 }
 
+export function formatMinuteLabel(date) {
+    if (!(date instanceof Date)) {
+        return '';
+    }
+    const hour = date.getHours().toString().padStart(2, '0');
+    const minute = date.getMinutes().toString().padStart(2, '0');
+    return `${hour}:${minute}`;
+}
+
 export function formatDayLabel(date) {
     if (!(date instanceof Date)) {
         return '';
@@ -1596,19 +1860,23 @@ export const usageModule = {
     persistModelPrices,
     renderModelPriceOptions,
     renderSavedModelPrices,
+    handleModelPriceEdit,
     prefillModelPriceInputs,
     normalizePriceValue,
     handleModelPriceSubmit,
     handleModelPriceReset,
     calculateTokenBreakdown,
     calculateRecentPerMinuteRates,
+    buildRecentWindowSeries,
     createHourlyBucketMeta,
     buildHourlySeriesByModel,
     buildDailySeriesByModel,
     buildChartDataForMetric,
     formatHourLabel,
+    formatMinuteLabel,
     formatTokensInMillions,
     formatPerMinuteValue,
+    formatCompactNumber,
     formatDayLabel,
     extractTotalTokens,
     formatUsd,
@@ -1616,6 +1884,8 @@ export const usageModule = {
     getCostChartPeriod,
     setCostChartPlaceholder,
     destroyCostChart,
+    destroySparklineCharts,
+    renderOverviewSparklines,
     initializeCostChart,
     updateCostSummaryAndChart,
     initializeCharts,

styles.css

@@ -267,6 +267,8 @@
     display: inline-flex;
     align-items: center;
     height: 36px;
+    min-width: 36px;
+    justify-content: center;
 }
 
 /* 登录页面的按钮样式优化 */
@@ -836,6 +838,7 @@ body {
     align-items: center;
     gap: 12px;
     max-width: max-content;
+    flex-shrink: 0;
 }
 
 .top-navbar-brand-logo {
@@ -849,8 +852,90 @@ body {
     font-size: 18px;
     font-weight: 600;
     color: var(--text-primary);
+    overflow: visible;
+    text-overflow: initial;
+    white-space: nowrap;
+    line-height: 1;
+}
+
+.top-navbar-brand-toggle {
+    display: inline-flex;
+    align-items: center;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font: inherit;
+    color: var(--text-primary);
+    height: 32px;
+}
+
+.top-navbar-brand-toggle:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 4px;
+    border-radius: 8px;
+}
+
+.brand-texts {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
     overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: width 0.45s ease;
+}
+
+.brand-text {
+    display: block;
+    white-space: nowrap;
+    transition: opacity 0.35s ease;
+    line-height: 1.2;
+}
+
+.brand-text-short {
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+}
+
+.top-navbar-brand-toggle.expanded .brand-text-full {
+    opacity: 1;
+}
+
+.top-navbar-brand-toggle.expanded .brand-text-short {
+    opacity: 0;
+}
+
+.top-navbar-brand-toggle.collapsed .brand-text-full {
+    opacity: 0;
+    position: absolute;
+}
+
+.top-navbar-brand-toggle.collapsed .brand-text-short {
+    opacity: 1;
+    position: relative;
+}
+
+@media (max-width: 768px) {
+    .top-navbar-brand-toggle {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .brand-texts {
+        transition: none;
+    }
+
+    .top-navbar-brand-toggle .brand-text-full {
+        display: none;
+    }
+
+    .top-navbar-brand-toggle .brand-text-short {
+        position: relative;
+        opacity: 1;
+    }
 }
 
 .top-navbar-actions {
@@ -863,63 +948,99 @@ body {
 .top-navbar-actions>* {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     height: 36px;
+    min-width: 44px;
 }
 
 .top-navbar .header-controls {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    height: 100%;
+    height: auto;
 }
 
 .top-navbar .language-btn,
 .top-navbar .theme-btn {
-    width: 36px;
     height: 36px;
     min-height: 36px;
-    padding: 0;
+    min-width: 44px;
+    padding: 0 12px;
     justify-content: center;
+    line-height: 1;
 }
 
 .top-navbar-actions .btn {
     height: 36px;
     min-height: 36px;
+    min-width: 44px;
+    padding: 0 12px;
+    justify-content: center;
+    line-height: 1;
 }
 
 @media (max-width: 768px) {
+    .top-navbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+        height: auto;
+        min-height: var(--navbar-height, 69px);
+    }
+
+    .top-navbar-left {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
     .top-navbar-actions {
+        width: 100%;
         flex-wrap: wrap;
         justify-content: flex-end;
         gap: 8px;
+        margin-left: 0;
+        align-items: center;
     }
 
     .top-navbar .header-controls {
-        width: 100%;
+        width: auto;
+        order: 0;
         justify-content: flex-end;
-        order: 99;
         gap: 8px;
+        height: auto;
+        align-items: center;
     }
 
     .top-navbar-actions>* {
-        height: 34px;
+        height: 36px;
-        min-height: 34px;
+        min-height: 36px;
+        min-width: 44px;
+        justify-content: center;
     }
 
     .top-navbar .language-btn,
     .top-navbar .theme-btn {
-        width: 34px;
+        height: 36px;
-        height: 34px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 0 12px;
+        justify-content: center;
+        line-height: 1;
     }
 
     .top-navbar-actions .btn {
-        height: 34px;
+        height: 36px;
-        min-height: 34px;
+        min-height: 36px;
-        padding: 0 10px;
+        min-width: 44px;
+        padding: 0 12px;
+        justify-content: center;
+        line-height: 1;
     }
 
-    .top-navbar-actions .btn span {
+    .top-navbar .language-btn i,
-        display: none;
+    .top-navbar .theme-btn i,
+    .top-navbar-actions .btn i {
+        margin: 0;
     }
 }
 
@@ -2368,6 +2489,65 @@ input:checked+.slider:before {
     color: var(--text-tertiary);
 }
 
+.version-check {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.version-check-rows {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 12px;
+}
+
+.version-check-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+    border-radius: 8px;
+    background: var(--bg-quaternary);
+    border: 1px solid var(--border-primary);
+}
+
+.version-check-value {
+    font-weight: 600;
+    color: var(--text-tertiary);
+}
+
+.version-check-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.version-check-result {
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.version-check-result.success {
+    color: #10b981;
+}
+
+.version-check-result.warning {
+    color: #f59e0b;
+}
+
+.version-check-result.error {
+    color: #ef4444;
+}
+
+.version-check-result.info {
+    color: var(--text-secondary);
+}
+
+.version-check-result.muted {
+    color: var(--text-quaternary);
+}
+
 /* JSON模态框 */
 .json-modal {
     position: fixed;
@@ -2603,6 +2783,49 @@ input:checked+.slider:before {
     color: #d97706;
 }
 
+.openai-test-status {
+    min-height: 22px;
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+}
+
+.openai-test-status.success {
+    color: #16a34a;
+}
+
+.openai-test-status.error {
+    color: #dc2626;
+}
+
+.openai-test-status.warning {
+    color: #d97706;
+}
+
+.openai-test-group select {
+    min-width: 200px;
+    padding: 10px 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: 10px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.openai-test-group select:disabled {
+    opacity: 0.6;
+}
+
+.openai-test-btn-success {
+    background: #16a34a !important;
+    border-color: #16a34a !important;
+    color: #ffffff !important;
+}
+
+.openai-test-btn-error {
+    background: #dc2626 !important;
+    border-color: #dc2626 !important;
+    color: #ffffff !important;
+}
+
 .model-discovery-list {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
@@ -2883,38 +3106,51 @@ input:checked+.slider:before {
 @media (max-width: 768px) {
     .top-navbar {
         padding: 12px 16px;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+        height: auto;
+        min-height: var(--navbar-height, 69px);
     }
 
     .top-navbar-title {
         font-size: 18px;
     }
 
+    .top-navbar-left {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
     .top-navbar-actions {
         gap: 6px;
         flex-wrap: wrap;
         justify-content: flex-end;
+        width: 100%;
+        margin-left: 0;
     }
 
     .top-navbar-actions>* {
-        height: 34px;
+        height: 36px;
-        min-height: 34px;
+        min-height: 36px;
+        min-width: 44px;
     }
 
     .top-navbar .header-controls {
-        height: 34px;
+        height: 36px;
-        gap: 6px;
+        gap: 8px;
+        width: auto;
+        order: 0;
+        justify-content: flex-end;
     }
 
     .top-navbar-actions .btn,
     .top-navbar .language-btn,
     .top-navbar .theme-btn {
-        height: 34px;
+        height: 36px;
-        min-height: 34px;
+        min-height: 36px;
-        padding: 0 10px;
+        min-width: 44px;
-    }
+        padding: 8px 12px;
-
-    .top-navbar-actions .btn span {
-        display: none;
     }
 
     .btn {
@@ -3150,14 +3386,14 @@ input:checked+.slider:before {
 /* 使用统计样式 */
 .stats-overview {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 20px;
     margin-bottom: 30px;
 }
 
 @media (max-width: 1200px) {
     .stats-overview {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }
 }
 
@@ -3184,6 +3420,13 @@ input:checked+.slider:before {
 
 .usage-filter-actions {
     min-width: 260px;
+    flex: 1 0 100%;
+    order: 0;
+}
+
+.chart-line-group {
+    flex: 1 1 260px;
+    order: 1;
 }
 
 .usage-filter-group label {
@@ -3250,10 +3493,11 @@ input:checked+.slider:before {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
-    padding: 24px;
+    padding: 18px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: 16px;
+    gap: 12px;
+    min-height: 220px;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -3264,16 +3508,31 @@ input:checked+.slider:before {
     transform: translateY(-2px);
 }
 
+.stat-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 110px;
+}
+
+.stat-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+}
+
 .stat-icon {
-    width: 50px;
+    width: 44px;
-    height: 50px;
+    height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary-color);
     color: white;
-    font-size: 20px;
+    font-size: 18px;
     flex-shrink: 0;
 }
 
@@ -3285,32 +3544,47 @@ input:checked+.slider:before {
     background: #ef4444;
 }
 
-.stat-content {
-    flex: 1;
-}
-
 .stat-number {
-    font-size: 28px;
+    font-size: 30px;
     font-weight: 700;
     color: var(--text-primary);
-    line-height: 1;
+    line-height: 1.1;
-    margin-bottom: 4px;
 }
 
 .stat-label {
-    font-size: 14px;
+    font-size: 13px;
+    letter-spacing: 0.2px;
     color: var(--text-secondary);
-    font-weight: 500;
+    text-transform: uppercase;
+    font-weight: 600;
 }
 
 .stat-subtext {
     font-size: 12px;
     color: var(--text-tertiary);
-    line-height: 1.4;
+    line-height: 1.5;
 }
 
-.stat-subtext:first-of-type {
+.stat-subtext-inline {
-    margin-top: 6px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.dot-divider {
+    color: var(--text-tertiary);
+    font-weight: 700;
+}
+
+.stat-sparkline {
+    height: 90px;
+    margin-top: auto;
+}
+
+.stat-sparkline canvas {
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .cost-summary-card .stat-icon {
@@ -3439,34 +3713,18 @@ input:checked+.slider:before {
 
 .model-price-list {
     margin-top: 6px;
-}
-
-.model-price-table {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
-.model-price-header,
+.model-price-item {
-.model-price-row {
+    cursor: pointer;
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    gap: 12px;
-    padding: 10px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    align-items: center;
 }
 
-.model-price-header {
+.model-price-item .item-meta {
-    font-weight: 700;
+    margin-bottom: 0;
-    color: var(--text-primary);
+    gap: 10px;
-    background: var(--bg-secondary);
-}
-
-.model-price-row {
-    background: var(--bg-primary);
-    color: var(--text-secondary);
 }
 
 .chart-placeholder {
@@ -4710,6 +4968,12 @@ input:checked+.slider:before {
     border: 1px solid var(--success-border);
 }
 
+.stat-badge.stat-neutral {
+    background-color: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
 .stat-badge.stat-success i {
     font-size: 13px;
 }