feat: enhance file upload functionality to support multiple JSON file uploads with improved validation and notification handling

feat: implement OpenAI provider connection testing with UI integration, status updates, and internationalization support
feat: add version check functionality with UI integration, status updates, and internationalization support
2026-02-03 03:10:50 +08:00 · 2025-12-06 13:16:09 +08:00 · 2025-12-06 01:25:04 +08:00 · 2025-12-06 00:15:44 +08:00 · 2025-12-05 19:02:49 +08:00 · 2025-12-05 18:30:01 +08:00
10 changed files with 932 additions and 35 deletions
--- a/app.js
+++ b/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,152 @@ class CLIProxyManager {
        });
    }

+    // 顶栏标题动画与状态
+    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.updateBrandTextWidths({ immediate: true });
+            window.addEventListener('resize', this.brandResizeHandler);
+        }
+
+        this.brandAnimationReady = true;
+    }
+
+    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);
+    }
+
+    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.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.brandAnimationReady || (mainPage && mainPage.style.display === 'none')) {
+            this.brandIsCollapsed = false;
+            return;
+        }
+
+        this.brandIsCollapsed = false;
+        this.setBrandCollapsed(false, { animate: false });
+    }
+
+    refreshBrandTitleAfterTextChange() {
+        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') {
--- a/i18n.js
+++ b/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': '正在自动登录...',
@@ -94,7 +95,7 @@ const i18n = {
            'nav.usage_stats': '使用统计',
            'nav.config_management': '配置管理',
            'nav.logs': '日志查看',
-            'nav.system_info': '管理中心信息',
+            'nav.system_info': '中心信息',

            // 基础设置
            'basic_settings.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',
--- a/index.html
+++ b/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">
@@ -182,7 +187,7 @@
                            <i class="fas fa-scroll"></i> <span data-i18n="nav.logs">日志查看</span>
                        </a></li>
                    <li data-i18n-tooltip="nav.system_info"><a href="#system-info" class="nav-item" data-section="system-info">
-                            <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">管理中心信息</span>
+                            <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">中心信息</span>
                        </a></li>
                </ul>
            </nav>
@@ -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>

                        <!-- 使用统计 -->
@@ -1309,6 +1315,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>
                    <!-- /内容区域 -->
--- a/src/core/connection.js
+++ b/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 {
--- a/src/modules/ai-providers.js
+++ b/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,
--- a/src/modules/auth-files.js
+++ b/src/modules/auth-files.js
@@ -998,37 +998,65 @@ export const authFilesModule = {

    // 处理文件上传
    async handleFileUpload(event) {
-        const file = event.target.files[0];
-        if (!file) return;
+        const input = event?.target;
+        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 {
-            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}`);
-            }
-
-            this.clearCache(); // 清除缓存
+        if (successCount > 0) {
+            this.clearCache();
            await this.loadAuthFiles();
-            this.showNotification(i18n.t('auth_files.upload_success'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.upload_failed')}: ${error.message}`, 'error');
-        } finally {
-            // 清空文件输入框,允许重复上传同一文件
-            event.target.value = '';
+            const suffix = validFiles.length > 1 ? ` (${successCount}/${validFiles.length})` : '';
+            this.showNotification(`${i18n.t('auth_files.upload_success')}${suffix}`, failed.length ? 'warning' : 'success');
+        }
+
+        if (failed.length) {
+            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}`);
        }
    },

--- a/src/modules/language.js
+++ b/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();

--- a/src/modules/login.js
+++ b/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) {
--- a/src/modules/usage.js
+++ b/src/modules/usage.js
@@ -5,6 +5,46 @@ const DEFAULT_CHART_LINE_COUNT = 3;
 const MIN_CHART_LINE_COUNT = 1;
 const ALL_MODELS_VALUE = 'all';

+export function maskUsageSensitiveValue(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    const raw = typeof value === 'string' ? value : String(value);
+    if (!raw) {
+        return '';
+    }
+    const maskFn = (this && typeof this.maskApiKey === 'function') ? this.maskApiKey : (v) => v;
+    let masked = raw;
+
+    const queryRegex = /([?&])(api[-_]?key|key|token|access_token|authorization)=([^&#\s]+)/ig;
+    masked = masked.replace(queryRegex, (full, prefix, keyName, valuePart) => `${prefix}${keyName}=${maskFn(valuePart)}`);
+
+    const headerRegex = /(api[-_]?key|key|token|access[-_]?token|authorization)\s*([:=])\s*([A-Za-z0-9._-]+)/ig;
+    masked = masked.replace(headerRegex, (full, keyName, separator, valuePart) => `${keyName}${separator}${maskFn(valuePart)}`);
+
+    const keyLikeRegex = /(sk-[A-Za-z0-9]{6,}|AI[a-zA-Z0-9_-]{6,}|AIza[0-9A-Za-z-_]{8,}|hf_[A-Za-z0-9]{6,}|pk_[A-Za-z0-9]{6,}|rk_[A-Za-z0-9]{6,})/g;
+    masked = masked.replace(keyLikeRegex, match => maskFn(match));
+
+    if (masked === raw) {
+        const trimmed = raw.trim();
+        if (trimmed && !/\s/.test(trimmed)) {
+            const looksLikeKey = /^sk-/i.test(trimmed)
+                || /^AI/i.test(trimmed)
+                || /^AIza/i.test(trimmed)
+                || /^hf_/i.test(trimmed)
+                || /^pk_/i.test(trimmed)
+                || /^rk_/i.test(trimmed)
+                || (!/[\\/]/.test(trimmed) && (/\d/.test(trimmed) || trimmed.length >= 10))
+                || trimmed.length >= 24;
+            if (looksLikeKey) {
+                return maskFn(trimmed);
+            }
+        }
+    }
+
+    return masked;
+}
+
 // 获取API密钥的统计信息
 export async function getKeyStats(usageData = null) {
    try {
@@ -45,7 +85,9 @@ export async function getKeyStats(usageData = null) {
                const details = modelEntry.details || [];

                details.forEach(detail => {
-                    const source = detail.source;
+                    const source = this.maskUsageSensitiveValue
+                        ? this.maskUsageSensitiveValue(detail.source)
+                        : detail.source;
                    const authIndexKey = normalizeAuthIndex(detail?.auth_index);
                    const isFailed = detail.failed === true;

@@ -1489,17 +1531,24 @@ export function updateApiStatsTable(data) {
    Object.entries(apis).forEach(([endpoint, apiData]) => {
        const totalRequests = apiData.total_requests || 0;
        const endpointCost = calculateEndpointCost(apiData);
+        const displayEndpoint = (this.maskUsageSensitiveValue
+            ? this.maskUsageSensitiveValue(endpoint)
+            : (endpoint ?? '')) || '-';
+        const safeEndpoint = this.escapeHtml
+            ? this.escapeHtml(displayEndpoint)
+            : displayEndpoint;

        // 构建模型详情
        let modelsHtml = '';
        if (apiData.models && Object.keys(apiData.models).length > 0) {
            modelsHtml = '<div class="model-details">';
            Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+                const safeModel = this.escapeHtml ? this.escapeHtml(modelName || '') : (modelName || '');
                const modelRequests = modelData.total_requests ?? 0;
                const modelTokens = this.formatTokensInMillions(modelData.total_tokens ?? 0);
                modelsHtml += `
                    <div class="model-item">
-                        <span class="model-name">${modelName}</span>
+                        <span class="model-name">${safeModel}</span>
                        <span>${modelRequests} 请求 / ${modelTokens} tokens</span>
                    </div>
                `;
@@ -1509,7 +1558,7 @@ export function updateApiStatsTable(data) {

        tableHtml += `
            <tr>
-                <td>${endpoint}</td>
+                <td>${safeEndpoint}</td>
                <td>${totalRequests}</td>
                <td>${this.formatTokensInMillions(apiData.total_tokens || 0)}</td>
                <td>${hasPrices && endpointCost > 0 ? this.formatUsd(endpointCost) : '--'}</td>
@@ -1526,6 +1575,7 @@ export const usageModule = {
    getKeyStats,
    loadUsageStats,
    updateUsageOverview,
+    maskUsageSensitiveValue,
    getModelNamesFromUsage,
    getChartLineMaxCount,
    getVisibleChartLineCount,
--- a/styles.css
+++ b/styles.css
@@ -804,7 +804,7 @@ body {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
-    min-height: 100%;
+    min-height: calc(100vh - var(--navbar-height, 69px));
 }

 /* 顶部导航栏 */
@@ -836,6 +836,7 @@ body {
    align-items: center;
    gap: 12px;
    max-width: max-content;
+    flex-shrink: 0;
 }

 .top-navbar-brand-logo {
@@ -849,8 +850,70 @@ 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;
 }

 .top-navbar-actions {
@@ -1036,6 +1099,8 @@ body {
 /* 主内容区域 */
 .main-content {
    flex: 1;
+    display: flex;
+    flex-direction: column;
    padding: 24px 32px;
    max-width: 1400px;
    width: 100%;
@@ -1046,6 +1111,8 @@ body {
 .content-area {
    flex: 1;
    width: 100%;
+    display: flex;
+    flex-direction: column;
 }

 .content-section {
@@ -2364,6 +2431,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;
@@ -2599,6 +2725,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);
@@ -3528,6 +3697,7 @@ input:checked+.slider:before {
    margin-top: 40px;
    padding: 24px 0;
    border-top: 1px solid var(--border-primary);
+    flex-shrink: 0;
 }

 .version-info {
Author	SHA1	Message	Date
Supra4E8C	69f808e180	feat: enhance file upload functionality to support multiple JSON file uploads with improved validation and notification handling	2025-12-06 13:16:09 +08:00
Supra4E8C	86edc1ee95	feat: implement OpenAI provider connection testing with UI integration, status updates, and internationalization support	2025-12-06 01:25:04 +08:00
Supra4E8C	112f86966d	feat: add version check functionality with UI integration, status updates, and internationalization support	2025-12-06 00:15:44 +08:00
Supra4E8C	658814bf6a	refactor: streamline model name handling in updateApiStatsTable function for improved readability	2025-12-05 19:02:49 +08:00
Supra4E8C	ac4f310fe8	feat: add sensitive value masking functionality to usage module and update UI for system info localization	2025-12-05 18:30:01 +08:00