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;
@@ -65,6 +68,9 @@ class CLIProxyManager {
         });
         this.configCache = this.configService.cache;
         this.cacheTimestamps = this.configService.cacheTimestamps;
+        this.availableModels = [];
+        this.availableModelApiKeysCache = null;
+        this.availableModelsLoading = false;
 
         // 状态更新定时器
         this.statusUpdateTimer = null;
@@ -77,7 +83,9 @@ class CLIProxyManager {
         this.logsRefreshTimer = null;
 
         // 当前展示的日志行
+        this.allLogLines = [];
         this.displayedLogLines = [];
+        this.logSearchQuery = '';
         this.maxDisplayLogLines = MAX_LOG_LINES;
         this.logFetchLimit = LOG_FETCH_LIMIT;
 
@@ -108,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';
 
@@ -274,6 +296,8 @@ 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());
@@ -281,6 +305,12 @@ class CLIProxyManager {
         if (refreshAll) {
             refreshAll.addEventListener('click', () => this.refreshAllData());
         }
+        if (availableModelsRefresh) {
+            availableModelsRefresh.addEventListener('click', () => this.loadAvailableModels({ forceRefresh: true }));
+        }
+        if (versionCheckBtn) {
+            versionCheckBtn.addEventListener('click', () => this.checkLatestVersion());
+        }
 
         // 基础设置
         const debugToggle = document.getElementById('debug-toggle');
@@ -333,6 +363,7 @@ class CLIProxyManager {
         const downloadLogs = document.getElementById('download-logs');
         const clearLogs = document.getElementById('clear-logs');
         const logsAutoRefreshToggle = document.getElementById('logs-auto-refresh-toggle');
+        const logsSearchInput = document.getElementById('logs-search-input');
 
         if (refreshLogs) {
             refreshLogs.addEventListener('click', () => this.refreshLogs());
@@ -349,6 +380,14 @@ class CLIProxyManager {
         if (logsAutoRefreshToggle) {
             logsAutoRefreshToggle.addEventListener('change', (e) => this.toggleLogsAutoRefresh(e.target.checked));
         }
+        if (logsSearchInput) {
+            const debouncedLogSearch = this.debounce((value) => {
+                this.updateLogSearchQuery(value);
+            }, 200);
+            logsSearchInput.addEventListener('input', (e) => {
+                debouncedLogSearch(e?.target?.value ?? '');
+            });
+        }
 
         // API 密钥管理
         const addApiKey = document.getElementById('add-api-key');
@@ -525,8 +564,8 @@ class CLIProxyManager {
         const costHourBtn = document.getElementById('cost-hour-btn');
         const costDayBtn = document.getElementById('cost-day-btn');
         const addChartLineBtn = document.getElementById('add-chart-line');
-        const removeChartLineBtn = document.getElementById('remove-chart-line');
         const chartLineSelects = document.querySelectorAll('.chart-line-select');
+        const chartLineDeleteButtons = document.querySelectorAll('.chart-line-delete');
         const modelPriceForm = document.getElementById('model-price-form');
         const resetModelPricesBtn = document.getElementById('reset-model-prices');
         const modelPriceSelect = document.getElementById('model-price-model-select');
@@ -555,9 +594,6 @@ class CLIProxyManager {
         if (addChartLineBtn) {
             addChartLineBtn.addEventListener('click', () => this.changeChartLineCount(1));
         }
-        if (removeChartLineBtn) {
-            removeChartLineBtn.addEventListener('click', () => this.changeChartLineCount(-1));
-        }
         if (chartLineSelects.length) {
             chartLineSelects.forEach(select => {
                 select.addEventListener('change', (event) => {
@@ -566,6 +602,14 @@ class CLIProxyManager {
                 });
             });
         }
+        if (chartLineDeleteButtons.length) {
+            chartLineDeleteButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const index = Number.parseInt(button.getAttribute('data-line-index'), 10);
+                    this.removeChartLine(Number.isNaN(index) ? -1 : index);
+                });
+            });
+        }
         this.updateChartLineControlsUI();
         if (modelPriceForm) {
             modelPriceForm.addEventListener('submit', (event) => {
@@ -636,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') {
@@ -673,6 +937,7 @@ class CLIProxyManager {
     chartLineMaxCount = 9;
     chartLineVisibleCount = 3;
     chartLineSelections = Array(3).fill('none');
+    chartLineSelectionsInitialized = false;
     chartLineSelectIds = Array.from({ length: 9 }, (_, idx) => `chart-line-select-${idx}`);
     chartLineStyles = [
         { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },

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': '当前未配置模型，可直接输入',
 
 
             // 认证文件管理
@@ -472,7 +482,8 @@ const i18n = {
             'usage_stats.chart_line_hidden': '不显示',
             'usage_stats.chart_line_actions_label': '曲线数量',
             'usage_stats.chart_line_add': '增加曲线',
-            'usage_stats.chart_line_remove': '减少曲线',
+            'usage_stats.chart_line_all': '全部',
+            'usage_stats.chart_line_delete': '删除曲线',
             'usage_stats.chart_line_hint': '最多同时显示 9 条模型曲线',
             'usage_stats.no_data': '暂无数据',
             'usage_stats.loading_error': '加载失败',
@@ -528,6 +539,9 @@ const i18n = {
             'logs.auto_refresh': '自动刷新',
             'logs.auto_refresh_enabled': '自动刷新已开启',
             'logs.auto_refresh_disabled': '自动刷新已关闭',
+            'logs.search_placeholder': '搜索日志内容或关键字',
+            'logs.search_empty_title': '未找到匹配的日志',
+            'logs.search_empty_desc': '尝试更换关键字或清空搜索条件。',
             'logs.lines': '行',
             'logs.removed': '已删除',
             'logs.upgrade_required_title': '需要升级 CLI Proxy API',
@@ -553,7 +567,7 @@ const i18n = {
             'config_management.editor_placeholder': 'key: value',
 
             // 系统信息
-            'system_info.title': '系统信息',
+            'system_info.title': '管理中心信息',
             'system_info.connection_status_title': '连接状态',
             'system_info.api_status_label': 'API 状态:',
             'system_info.config_status_label': '配置状态:',
@@ -562,6 +576,24 @@ const i18n = {
             'system_info.real_time_data': '实时数据',
             'system_info.not_loaded': '未加载',
             'system_info.seconds_ago': '秒前',
+            'system_info.models_title': '可用模型列表',
+            'system_info.models_desc': '展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。',
+            'system_info.models_loading': '正在加载可用模型...',
+            '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': '调试设置已更新',
@@ -596,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': '刷新失败',
@@ -684,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...',
@@ -726,7 +762,7 @@ const i18n = {
             'nav.usage_stats': 'Usage Statistics',
             'nav.config_management': 'Config Management',
             'nav.logs': 'Logs Viewer',
-            'nav.system_info': 'System Info',
+            'nav.system_info': 'Management Center Info',
 
             // Basic settings
             'basic_settings.title': 'Basic Settings',
@@ -869,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
@@ -1103,7 +1148,8 @@ const i18n = {
             'usage_stats.chart_line_hidden': 'Hide',
             'usage_stats.chart_line_actions_label': 'Lines to display',
             'usage_stats.chart_line_add': 'Add line',
-            'usage_stats.chart_line_remove': 'Remove line',
+            'usage_stats.chart_line_all': 'All',
+            'usage_stats.chart_line_delete': 'Delete line',
             'usage_stats.chart_line_hint': 'Show up to 9 model lines at once',
             'usage_stats.no_data': 'No Data Available',
             'usage_stats.loading_error': 'Loading Failed',
@@ -1159,6 +1205,9 @@ const i18n = {
             'logs.auto_refresh': 'Auto Refresh',
             'logs.auto_refresh_enabled': 'Auto refresh enabled',
             'logs.auto_refresh_disabled': 'Auto refresh disabled',
+            'logs.search_placeholder': 'Search logs by content or keyword',
+            'logs.search_empty_title': 'No matching logs found',
+            'logs.search_empty_desc': 'Try a different keyword or clear the search filter.',
             'logs.lines': 'lines',
             'logs.removed': 'Removed',
             'logs.upgrade_required_title': 'Please Upgrade CLI Proxy API',
@@ -1184,7 +1233,7 @@ const i18n = {
             'config_management.editor_placeholder': 'key: value',
 
             // System info
-            'system_info.title': 'System Information',
+            'system_info.title': 'Management Center Info',
             'system_info.connection_status_title': 'Connection Status',
             'system_info.api_status_label': 'API Status:',
             'system_info.config_status_label': 'Config Status:',
@@ -1193,6 +1242,24 @@ const i18n = {
             'system_info.real_time_data': 'Real-time Data',
             'system_info.not_loaded': 'Not Loaded',
             'system_info.seconds_ago': 'seconds ago',
+            'system_info.models_title': 'Available Models',
+            'system_info.models_desc': 'Shows the /v1/models response and uses saved API keys for auth automatically.',
+            'system_info.models_loading': 'Loading available models...',
+            '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',
@@ -1227,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">
@@ -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>
 
@@ -839,27 +844,33 @@
                             <h2 data-i18n="logs.title">日志查看</h2>
 
                             <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
+                                <div class="card-header logs-header">
+                                    <div class="logs-header-main">
+                                        <h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
+                                        <div class="logs-search">
+                                            <i class="fas fa-search"></i>
+                                            <input type="text" id="logs-search-input" aria-label="搜索日志" data-i18n-placeholder="logs.search_placeholder" placeholder="搜索日志...">
+                                        </div>
+                                    </div>
                                     <div class="header-actions">
                                         <div class="toggle-group" style="margin-right: 15px;">
                                             <label class="toggle-switch" style="margin-right: 5px;">
                                                 <input type="checkbox" id="logs-auto-refresh-toggle">
                                                 <span class="slider"></span>
                                             </label>
-                                        <span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
-                                    </div>
-                                    <button id="refresh-logs" class="btn btn-primary">
-                                        <i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
-                                    </button>
-                                    <button id="select-error-log" class="btn btn-secondary">
-                                        <i class="fas fa-file-circle-exclamation"></i> <span data-i18n="logs.error_log_button">选择错误日志</span>
-                                    </button>
-                                    <button id="download-logs" class="btn btn-secondary">
-                                        <i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
-                                    </button>
-                                    <button id="clear-logs" class="btn btn-danger">
-                                        <i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
+                                            <span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
+                                        </div>
+                                        <button id="refresh-logs" class="btn btn-primary">
+                                            <i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
+                                        </button>
+                                        <button id="select-error-log" class="btn btn-secondary">
+                                            <i class="fas fa-file-circle-exclamation"></i> <span data-i18n="logs.error_log_button">选择错误日志</span>
+                                        </button>
+                                        <button id="download-logs" class="btn btn-secondary">
+                                            <i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
+                                        </button>
+                                        <button id="clear-logs" class="btn btn-danger">
+                                            <i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
                                         </button>
                                     </div>
                                 </div>
@@ -869,6 +880,7 @@
                                     </div>
                                 </div>
                             </div>
+
                         </section>
 
                         <!-- 使用统计 -->
@@ -878,81 +890,91 @@
                             <!-- 概览统计卡片 -->
                             <div class="stats-overview">
                                 <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-paper-plane"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
-                                    </div>
-                                </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 class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
+                                            <div class="stat-number" id="total-requests">0</div>
+                                            <div class="stat-subtext stat-subtext-inline">
+                                                <span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
+                                                <span class="dot-divider">•</span>
+                                                <span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
+                                            </div>
                                         </div>
-                                        <div class="stat-subtext">
-                                            <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
-                                            <span id="reasoning-tokens">0</span>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-paper-plane"></i>
                                         </div>
                                     </div>
-                                </div>
-
-                                <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 class="stat-sparkline" aria-label="30分钟请求趋势">
+                                        <canvas id="requests-sparkline"></canvas>
                                     </div>
                                 </div>
 
                                 <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-stopwatch"></i>
+                                    <div class="stat-card-header">
+                                        <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-number" id="tpm-30m">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                    <div class="stat-sparkline" aria-label="30分钟Token趋势">
+                                        <canvas id="tokens-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.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">
-                                        <i class="fas fa-dollar-sign"></i>
+                                    <div class="stat-card-header">
+                                        <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-number" id="total-cost">--</div>
-                                        <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 class="stat-sparkline" aria-label="30分钟花费趋势">
+                                        <canvas id="cost-sparkline"></canvas>
                                     </div>
                                 </div>
                             </div>
@@ -966,67 +988,117 @@
                                             <i class="fas fa-plus"></i>
                                             <span data-i18n="usage_stats.chart_line_add">增加曲线</span>
                                         </button>
-                                        <button type="button" class="btn btn-small btn-secondary" id="remove-chart-line">
-                                            <i class="fas fa-minus"></i>
-                                            <span data-i18n="usage_stats.chart_line_remove">减少曲线</span>
-                                        </button>
                                         <span class="chart-line-count" id="chart-line-count">3/9</span>
                                     </div>
                                     <div class="chart-line-hint" data-i18n="usage_stats.chart_line_hint">最多显示 9 条模型曲线</div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group" data-line-index="0">
                                     <label for="chart-line-select-0" data-i18n="usage_stats.chart_line_label_1">曲线 1</label>
-                                    <select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="0">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group" data-line-index="1">
                                     <label for="chart-line-select-1" data-i18n="usage_stats.chart_line_label_2">曲线 2</label>
-                                    <select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="1">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group" data-line-index="2">
                                     <label for="chart-line-select-2" data-i18n="usage_stats.chart_line_label_3">曲线 3</label>
-                                    <select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="2">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="3">
                                     <label for="chart-line-select-3" data-i18n="usage_stats.chart_line_label_4">曲线 4</label>
-                                    <select id="chart-line-select-3" class="model-filter-select chart-line-select" data-line-index="3" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-3" class="model-filter-select chart-line-select" data-line-index="3" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="3">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="4">
                                     <label for="chart-line-select-4" data-i18n="usage_stats.chart_line_label_5">曲线 5</label>
-                                    <select id="chart-line-select-4" class="model-filter-select chart-line-select" data-line-index="4" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-4" class="model-filter-select chart-line-select" data-line-index="4" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="4">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="5">
                                     <label for="chart-line-select-5" data-i18n="usage_stats.chart_line_label_6">曲线 6</label>
-                                    <select id="chart-line-select-5" class="model-filter-select chart-line-select" data-line-index="5" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-5" class="model-filter-select chart-line-select" data-line-index="5" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="5">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="6">
                                     <label for="chart-line-select-6" data-i18n="usage_stats.chart_line_label_7">曲线 7</label>
-                                    <select id="chart-line-select-6" class="model-filter-select chart-line-select" data-line-index="6" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-6" class="model-filter-select chart-line-select" data-line-index="6" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="6">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="7">
                                     <label for="chart-line-select-7" data-i18n="usage_stats.chart_line_label_8">曲线 8</label>
-                                    <select id="chart-line-select-7" class="model-filter-select chart-line-select" data-line-index="7" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-7" class="model-filter-select chart-line-select" data-line-index="7" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="7">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="8">
                                     <label for="chart-line-select-8" data-i18n="usage_stats.chart_line_label_9">曲线 9</label>
-                                    <select id="chart-line-select-8" class="model-filter-select chart-line-select" data-line-index="8" disabled>
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
-                                    </select>
+                                    <div class="chart-line-control">
+                                        <select id="chart-line-select-8" class="model-filter-select chart-line-select" data-line-index="8" disabled>
+                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
+                                        </select>
+                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="8">
+                                            <i class="fas fa-trash"></i>
+                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
 
@@ -1179,9 +1251,23 @@
                             </div>
                         </section>
 
-                        <!-- 系统信息 -->
+                        <!-- 管理中心信息 -->
                         <section id="system-info" class="content-section">
-                            <h2 data-i18n="system_info.title">系统信息</h2>
+                            <h2 data-i18n="system_info.title">管理中心信息</h2>
+
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-layer-group"></i> <span data-i18n="system_info.models_title">可用模型列表</span></h3>
+                                    <button type="button" id="available-models-refresh" class="btn btn-secondary">
+                                        <i class="fas fa-sync-alt"></i> <span data-i18n="common.refresh">刷新</span>
+                                    </button>
+                                </div>
+                                <div class="card-content">
+                                    <p class="form-hint" data-i18n="system_info.models_desc">展示当前服务返回的 /v1/models 列表（使用服务器保存的 API Key 自动鉴权）。</p>
+                                    <div id="available-models-status" class="available-models-status" data-i18n="common.loading">加载中...</div>
+                                    <div id="available-models-list" class="available-models-list"></div>
+                                </div>
+                            </div>
 
                             <!-- 连接信息卡片 -->
                             <div class="card">
@@ -1239,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

@@ -3,6 +3,34 @@
 
 import { STATUS_UPDATE_INTERVAL_MS, DEFAULT_API_PORT } from '../utils/constants.js';
 import { secureStorage } from '../utils/secure-storage.js';
+import { normalizeModelList, classifyModels } from '../utils/models.js';
+
+const buildModelsEndpoint = (baseUrl) => {
+    if (!baseUrl) return '';
+    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
+    if (!trimmed) return '';
+    return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
+};
+
+const normalizeApiKeyList = (input) => {
+    if (!Array.isArray(input)) return [];
+    const seen = new Set();
+    const keys = [];
+
+    input.forEach(item => {
+        const value = typeof item === 'string'
+            ? item
+            : (item && item['api-key'] ? item['api-key'] : '');
+        const trimmed = String(value || '').trim();
+        if (!trimmed || seen.has(trimmed)) {
+            return;
+        }
+        seen.add(trimmed);
+        keys.push(trimmed);
+    });
+
+    return keys;
+};
 
 export const connectionModule = {
     // 规范化基础地址，移除尾部斜杠与 /v0/management
@@ -101,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');
@@ -121,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();
     },
 
@@ -143,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 {
@@ -153,6 +352,178 @@ export const connectionModule = {
         }
     },
 
+    buildAvailableModelsEndpoint() {
+        return buildModelsEndpoint(this.apiBase || this.apiClient?.apiBase || '');
+    },
+
+    setAvailableModelsStatus(message = '', type = 'info') {
+        const statusEl = document.getElementById('available-models-status');
+        if (!statusEl) return;
+        statusEl.textContent = message || '';
+        statusEl.className = `available-models-status ${type}`;
+    },
+
+    renderAvailableModels(models = []) {
+        const listEl = document.getElementById('available-models-list');
+        if (!listEl) return;
+
+        if (!models.length) {
+            listEl.innerHTML = `
+                <div class="available-models-empty">
+                    <i class="fas fa-inbox"></i>
+                    <span>${i18n.t('system_info.models_empty')}</span>
+                </div>
+            `;
+            return;
+        }
+
+        const language = (i18n?.currentLanguage || '').toLowerCase();
+        const otherLabel = language.startsWith('zh') ? '其他' : 'Other';
+        const groups = classifyModels(models, { otherLabel });
+
+        const groupHtml = groups.map(group => {
+            const pills = group.items.map(model => {
+                const name = this.escapeHtml(model.name || '');
+                const alias = model.alias ? `<span class="model-alias">${this.escapeHtml(model.alias)}</span>` : '';
+                const description = model.description ? this.escapeHtml(model.description) : '';
+                const titleAttr = description ? ` title="${description}"` : '';
+                return `
+                    <span class="provider-model-tag available-model-tag"${titleAttr}>
+                        <span class="model-name">${name}</span>
+                        ${alias}
+                    </span>
+                `;
+            }).join('');
+
+            const label = this.escapeHtml(group.label || group.id || '');
+            return `
+                <div class="available-model-group">
+                    <div class="available-model-group-header">
+                        <div class="available-model-group-title">
+                            <span class="available-model-group-label">${label}</span>
+                            <span class="available-model-group-count">${group.items.length}</span>
+                        </div>
+                    </div>
+                    <div class="available-model-group-body">
+                        ${pills}
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        listEl.innerHTML = groupHtml;
+    },
+
+    clearAvailableModels(messageKey = 'system_info.models_empty') {
+        this.availableModels = [];
+        this.availableModelApiKeysCache = null;
+        const listEl = document.getElementById('available-models-list');
+        if (listEl) {
+            listEl.innerHTML = '';
+        }
+        this.setAvailableModelsStatus(i18n.t(messageKey), 'warning');
+    },
+
+    async resolveApiKeysForModels({ config = null, forceRefresh = false } = {}) {
+        if (!forceRefresh && Array.isArray(this.availableModelApiKeysCache) && this.availableModelApiKeysCache.length) {
+            return this.availableModelApiKeysCache;
+        }
+
+        const configKeys = normalizeApiKeyList(config?.['api-keys'] || this.configCache?.['api-keys']);
+        if (configKeys.length) {
+            this.availableModelApiKeysCache = configKeys;
+            return configKeys;
+        }
+
+        try {
+            const data = await this.makeRequest('/api-keys');
+            const keys = normalizeApiKeyList(data?.['api-keys']);
+            if (keys.length) {
+                this.availableModelApiKeysCache = keys;
+            }
+            return keys;
+        } catch (error) {
+            console.warn('自动获取 API Key 失败:', error);
+            return [];
+        }
+    },
+
+    async loadAvailableModels({ config = null, forceRefresh = false } = {}) {
+        const listEl = document.getElementById('available-models-list');
+        const statusEl = document.getElementById('available-models-status');
+
+        if (!listEl || !statusEl) {
+            return;
+        }
+
+        if (!this.isConnected) {
+            this.setAvailableModelsStatus(i18n.t('common.disconnected'), 'warning');
+            listEl.innerHTML = '';
+            return;
+        }
+
+        const endpoint = this.buildAvailableModelsEndpoint();
+        if (!endpoint) {
+            this.setAvailableModelsStatus(i18n.t('system_info.models_error'), 'error');
+            listEl.innerHTML = `
+                <div class="available-models-empty">
+                    <i class="fas fa-exclamation-circle"></i>
+                    <span>${i18n.t('login.error_invalid')}</span>
+                </div>
+            `;
+            return;
+        }
+
+        this.availableModelsLoading = true;
+        this.setAvailableModelsStatus(i18n.t('system_info.models_loading'), 'info');
+        listEl.innerHTML = '<div class="available-models-placeholder"><i class="fas fa-spinner fa-spin"></i></div>';
+
+        try {
+            const headers = {};
+            const keys = await this.resolveApiKeysForModels({ config, forceRefresh });
+            if (keys.length) {
+                headers.Authorization = `Bearer ${keys[0]}`;
+            }
+
+            const response = await fetch(endpoint, { headers });
+            if (!response.ok) {
+                throw new Error(`${response.status} ${response.statusText}`);
+            }
+
+            let data;
+            try {
+                data = await response.json();
+            } catch (err) {
+                const text = await response.text();
+                throw new Error(text || err.message || 'Invalid JSON');
+            }
+
+            const models = normalizeModelList(data, { dedupe: true });
+            this.availableModels = models;
+
+            if (!models.length) {
+                this.setAvailableModelsStatus(i18n.t('system_info.models_empty'), 'warning');
+                this.renderAvailableModels([]);
+                return;
+            }
+
+            this.setAvailableModelsStatus(i18n.t('system_info.models_count', { count: models.length }), 'success');
+            this.renderAvailableModels(models);
+        } catch (error) {
+            console.error('加载可用模型失败:', error);
+            this.availableModels = [];
+            this.setAvailableModelsStatus(`${i18n.t('system_info.models_error')}: ${error.message}`, 'error');
+            listEl.innerHTML = `
+                <div class="available-models-empty">
+                    <i class="fas fa-exclamation-circle"></i>
+                    <span>${this.escapeHtml(error.message || '')}</span>
+                </div>
+            `;
+        } finally {
+            this.availableModelsLoading = false;
+        }
+    },
+
     // 测试连接（简化版，用于内部调用）
     async testConnection() {
         try {
@@ -203,6 +574,11 @@ export const connectionModule = {
             apiStatus.textContent = i18n.t('common.disconnected');
             configStatus.textContent = i18n.t('system_info.not_loaded');
             configStatus.style.color = '#6b7280';
+            this.setAvailableModelsStatus(i18n.t('common.disconnected'), 'warning');
+            const modelsList = document.getElementById('available-models-list');
+            if (modelsList) {
+                modelsList.innerHTML = '';
+            }
         }
 
         lastUpdate.textContent = new Date().toLocaleString('zh-CN');
@@ -280,8 +656,12 @@ export const connectionModule = {
         this.configService.clearCache(section);
         this.configCache = this.configService.cache;
         this.cacheTimestamps = this.configService.cacheTimestamps;
+        if (!section || section === 'api-keys') {
+            this.availableModelApiKeysCache = null;
+        }
         if (!section) {
             this.configYamlCache = '';
+            this.availableModels = [];
         }
     },
 
@@ -329,6 +709,8 @@ export const connectionModule = {
             // 从配置中提取并设置各个设置项（现在传递keyStats）
             await this.updateSettingsFromConfig(config, keyStats);
 
+            await this.loadAvailableModels({ config, forceRefresh });
+
             if (this.events && typeof this.events.emit === 'function') {
                 this.events.emit('data:config-loaded', {
                     config,

src/modules/ai-providers.js

@@ -2,6 +2,8 @@
 // 这些函数依赖于 CLIProxyManager 实例上的 makeRequest/getConfig/clearCache/showNotification 等能力，
 // 以及 apiKeysModule 中的工具方法（如 applyHeadersToConfig/renderHeaderBadges）。
 
+import { normalizeModelList } from '../utils/models.js';
+
 const getStatsBySource = (stats) => {
     if (stats && typeof stats === 'object' && stats.bySource) {
         return stats.bySource;
@@ -21,42 +23,17 @@ const buildModelEndpoint = (baseUrl) => {
     return `${trimmed}/v1/models`;
 };
 
-const normalizeModelList = (payload) => {
-    const toModel = (entry) => {
-        if (typeof entry === 'string') {
-            return { name: entry };
-        }
-        if (!entry || typeof entry !== 'object') {
-            return null;
-        }
-        const name = entry.id || entry.name || entry.model || entry.value;
-        if (!name) return null;
-        const alias = entry.alias || entry.display_name || entry.displayName;
-        const description = entry.description || entry.note || entry.comment;
-        const model = { name: String(name) };
-        if (alias && alias !== name) {
-            model.alias = String(alias);
-        }
-        if (description) {
-            model.description = String(description);
-        }
-        return model;
-    };
-
-    if (Array.isArray(payload)) {
-        return payload.map(toModel).filter(Boolean);
+const buildChatCompletionsEndpoint = (baseUrl) => {
+    if (!baseUrl) return '';
+    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
+    if (!trimmed) return '';
+    if (trimmed.endsWith('/chat/completions')) {
+        return trimmed;
     }
-
-    if (payload && typeof payload === 'object') {
-        if (Array.isArray(payload.data)) {
-            return payload.data.map(toModel).filter(Boolean);
-        }
-        if (Array.isArray(payload.models)) {
-            return payload.models.map(toModel).filter(Boolean);
-        }
+    if (trimmed.endsWith('/v1')) {
+        return `${trimmed}/chat/completions`;
     }
-
-    return [];
+    return `${trimmed}/v1/chat/completions`;
 };
 
 const normalizeExcludedModels = (input) => {
@@ -128,25 +105,7 @@ export function getGeminiKeysFromConfig(config) {
     }
 
     const geminiKeys = Array.isArray(config['gemini-api-key']) ? config['gemini-api-key'] : [];
-    if (geminiKeys.length > 0) {
-        return geminiKeys;
-    }
-
-    const legacyKeys = Array.isArray(config['generative-language-api-key']) ? config['generative-language-api-key'] : [];
-    return legacyKeys
-        .map(item => {
-            if (item && typeof item === 'object') {
-                return { ...item };
-            }
-            if (typeof item === 'string') {
-                const trimmed = item.trim();
-                if (trimmed) {
-                    return { 'api-key': trimmed };
-                }
-            }
-            return null;
-        })
-        .filter(Boolean);
+    return geminiKeys;
 }
 
 export async function renderGeminiKeys(keys, keyStats = null) {
@@ -1390,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) {
@@ -1407,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');
@@ -1544,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>
@@ -1554,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) {
@@ -1737,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];
-        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}`);
         }
     },
 

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) {
@@ -106,6 +108,9 @@ export const loginModule = {
         if (typeof this.renderOauthExcludedModels === 'function') {
             this.renderOauthExcludedModels('all');
         }
+        if (typeof this.clearAvailableModels === 'function') {
+            this.clearAvailableModels('common.disconnected');
+        }
 
         localStorage.removeItem('isLoggedIn');
         secureStorage.removeItem('managementKey');

src/modules/logs.js

@@ -50,20 +50,19 @@ export const logsModule = {
                 } else if (!incremental && response.lines.length > 0) {
                     this.renderLogs(response.lines, response['line-count'] || response.lines.length, true);
                 } else if (!incremental) {
-                    logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
-                        i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
-                        i18n.t('logs.empty_desc') + '</p></div>';
                     this.latestLogTimestamp = null;
+                    this.renderLogs([], 0, false);
                 }
             } else if (!incremental) {
-                logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
-                    i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
-                    i18n.t('logs.empty_desc') + '</p></div>';
                 this.latestLogTimestamp = null;
+                this.renderLogs([], 0, false);
             }
         } catch (error) {
             console.error('加载日志失败:', error);
             if (!incremental) {
+                this.allLogLines = [];
+                this.displayedLogLines = [];
+                this.latestLogTimestamp = null;
                 const is404 = error.message && (error.message.includes('404') || error.message.includes('Not Found'));
 
                 if (is404) {
@@ -82,7 +81,17 @@ export const logsModule = {
         const logsContent = document.getElementById('logs-content');
         if (!logsContent) return;
 
-        if (!lines || lines.length === 0) {
+        const sourceLines = Array.isArray(lines) ? lines : [];
+        const filteredLines = sourceLines.filter(line => !line.includes('/v0/management/'));
+        let displayedLines = filteredLines;
+        if (filteredLines.length > this.maxDisplayLogLines) {
+            const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
+            displayedLines = filteredLines.slice(linesToRemove);
+        }
+
+        this.allLogLines = displayedLines.slice();
+
+        if (displayedLines.length === 0) {
             this.displayedLogLines = [];
             logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
                 i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
@@ -90,14 +99,15 @@ export const logsModule = {
             return;
         }
 
-        const filteredLines = lines.filter(line => !line.includes('/v0/management/'));
-        let displayedLines = filteredLines;
-        if (filteredLines.length > this.maxDisplayLogLines) {
-            const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
-            displayedLines = filteredLines.slice(linesToRemove);
-        }
+        const visibleLines = this.filterLogLinesBySearch(displayedLines);
+        this.displayedLogLines = visibleLines.slice();
 
-        this.displayedLogLines = displayedLines.slice();
+        if (visibleLines.length === 0) {
+            logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-search"></i><p data-i18n="logs.search_empty_title">' +
+                i18n.t('logs.search_empty_title') + '</p><p data-i18n="logs.search_empty_desc">' +
+                i18n.t('logs.search_empty_desc') + '</p></div>';
+            return;
+        }
 
         const displayedLineCount = this.displayedLogLines.length;
         logsContent.innerHTML = `
@@ -107,7 +117,7 @@ export const logsModule = {
             <pre class="logs-text">${this.buildLogsHtml(this.displayedLogLines)}</pre>
         `;
 
-        if (scrollToBottom) {
+        if (scrollToBottom && !this.logSearchQuery) {
             const logsTextElement = logsContent.querySelector('.logs-text');
             if (logsTextElement) {
                 logsTextElement.scrollTop = logsTextElement.scrollHeight;
@@ -138,9 +148,21 @@ export const logsModule = {
 
         const isAtBottom = logsTextElement.scrollHeight - logsTextElement.scrollTop - logsTextElement.clientHeight < 50;
 
-        this.displayedLogLines = this.displayedLogLines.concat(filteredNewLines);
-        if (this.displayedLogLines.length > this.maxDisplayLogLines) {
-            this.displayedLogLines = this.displayedLogLines.slice(this.displayedLogLines.length - this.maxDisplayLogLines);
+        const baseLines = Array.isArray(this.allLogLines) && this.allLogLines.length > 0
+            ? this.allLogLines
+            : (Array.isArray(this.displayedLogLines) ? this.displayedLogLines : []);
+
+        this.allLogLines = baseLines.concat(filteredNewLines);
+        if (this.allLogLines.length > this.maxDisplayLogLines) {
+            this.allLogLines = this.allLogLines.slice(this.allLogLines.length - this.maxDisplayLogLines);
+        }
+
+        const visibleLines = this.filterLogLinesBySearch(this.allLogLines);
+        this.displayedLogLines = visibleLines.slice();
+
+        if (visibleLines.length === 0) {
+            this.renderLogs(this.allLogLines, this.allLogLines.length, false);
+            return;
         }
 
         logsTextElement.innerHTML = this.buildLogsHtml(this.displayedLogLines);
@@ -150,11 +172,44 @@ export const logsModule = {
             logsInfoElement.innerHTML = `<span><i class="fas fa-list-ol"></i> ${displayedLines} ${i18n.t('logs.lines')}</span>`;
         }
 
-        if (isAtBottom) {
+        if (isAtBottom && !this.logSearchQuery) {
             logsTextElement.scrollTop = logsTextElement.scrollHeight;
         }
     },
 
+    filterLogLinesBySearch(lines) {
+        const keyword = (this.logSearchQuery || '').toLowerCase();
+        if (!keyword) {
+            return Array.isArray(lines) ? lines.slice() : [];
+        }
+        if (!Array.isArray(lines) || lines.length === 0) {
+            return [];
+        }
+        return lines.filter(line => (line || '').toLowerCase().includes(keyword));
+    },
+
+    updateLogSearchQuery(value = '') {
+        const normalized = (value || '').trim();
+        if (this.logSearchQuery === normalized) {
+            return;
+        }
+        this.logSearchQuery = normalized;
+        this.applyLogSearchFilter();
+    },
+
+    applyLogSearchFilter() {
+        const logsContent = document.getElementById('logs-content');
+        if (!logsContent) return;
+        if (logsContent.querySelector('.upgrade-notice') || logsContent.querySelector('.error-state')) {
+            return;
+        }
+        const baseLines = Array.isArray(this.allLogLines) ? this.allLogLines : [];
+        if (baseLines.length === 0 && logsContent.querySelector('.loading-placeholder')) {
+            return;
+        }
+        this.renderLogs(baseLines, baseLines.length, false);
+    },
+
     buildLogsHtml(lines) {
         if (!lines || lines.length === 0) {
             return '';

src/modules/usage.js

@@ -3,6 +3,47 @@ const LEGACY_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices';
 const TOKENS_PER_PRICE_UNIT = 1_000_000;
 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) {
@@ -44,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;
 
@@ -97,6 +140,7 @@ export async function loadUsageStats(usageData = null) {
 
         // 更新概览卡片
         this.updateUsageOverview(usage);
+        this.renderOverviewSparklines(usage);
         this.updateChartLineSelectors(usage);
         this.renderModelPriceOptions(usage);
         this.renderSavedModelPrices();
@@ -125,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 => {
@@ -199,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 [];
@@ -269,12 +344,19 @@ export function updateChartLineControlsUI() {
         counter.textContent = `${visibleCount}/${maxCount}`;
     }
     const addBtn = document.getElementById('add-chart-line');
-    const removeBtn = document.getElementById('remove-chart-line');
     if (addBtn) {
         addBtn.disabled = visibleCount >= maxCount;
     }
-    if (removeBtn) {
-        removeBtn.disabled = visibleCount <= MIN_CHART_LINE_COUNT;
+    const deleteButtons = document.querySelectorAll('.chart-line-delete');
+    if (deleteButtons.length) {
+        deleteButtons.forEach(button => {
+            const group = button.closest('.chart-line-group');
+            const index = Number.parseInt(button.getAttribute('data-line-index'), 10);
+            const isVisible = group
+                ? !group.classList.contains('chart-line-hidden')
+                : (Number.isFinite(index) ? index < visibleCount : true);
+            button.disabled = visibleCount <= MIN_CHART_LINE_COUNT || !isVisible;
+        });
     }
 }
 
@@ -297,6 +379,23 @@ export function changeChartLineCount(delta = 0) {
     this.setChartLineVisibleCount(current + delta);
 }
 
+export function removeChartLine(index) {
+    const visibleCount = this.getVisibleChartLineCount();
+    const normalizedIndex = Number.parseInt(index, 10);
+    if (!Number.isFinite(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= visibleCount) {
+        return;
+    }
+    if (visibleCount <= MIN_CHART_LINE_COUNT) {
+        return;
+    }
+    const nextSelections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
+    nextSelections.splice(normalizedIndex, 1);
+    this.chartLineSelections = nextSelections;
+    this.chartLineVisibleCount = Math.max(MIN_CHART_LINE_COUNT, visibleCount - 1);
+    this.updateChartLineSelectors(this.currentUsageData);
+    this.refreshChartsForSelections();
+}
+
 export function updateChartLineSelectors(usage) {
     const modelNames = this.getModelNamesFromUsage(usage);
     const selectors = this.chartLineSelectIds
@@ -307,19 +406,21 @@ export function updateChartLineSelectors(usage) {
     const visibleCount = Math.min(this.getVisibleChartLineCount(), availableCount);
     this.chartLineVisibleCount = visibleCount;
     this.ensureChartLineSelectionLength(visibleCount);
+    const wasInitialized = this.chartLineSelectionsInitialized === true;
 
     if (!selectors.length) {
         this.chartLineSelections = Array(visibleCount).fill('none');
+        this.chartLineSelectionsInitialized = false;
         this.updateChartLineControlsUI();
         return;
     }
 
     const optionsFragment = () => {
         const fragment = document.createDocumentFragment();
-        const hiddenOption = document.createElement('option');
-        hiddenOption.value = 'none';
-        hiddenOption.textContent = i18n.t('usage_stats.chart_line_hidden');
-        fragment.appendChild(hiddenOption);
+        const allOption = document.createElement('option');
+        allOption.value = ALL_MODELS_VALUE;
+        allOption.textContent = i18n.t('usage_stats.chart_line_all');
+        fragment.appendChild(allOption);
         modelNames.forEach(name => {
             const option = document.createElement('option');
             option.value = name;
@@ -336,22 +437,27 @@ export function updateChartLineSelectors(usage) {
         if (group) {
             group.classList.toggle('chart-line-hidden', !isVisible);
         }
+        const deleteBtn = group ? group.querySelector('.chart-line-delete') : null;
         select.innerHTML = '';
         select.appendChild(optionsFragment());
-        select.disabled = !hasModels || !isVisible;
+        select.disabled = !isVisible;
+        if (deleteBtn) {
+            deleteBtn.disabled = !isVisible || visibleCount <= MIN_CHART_LINE_COUNT;
+        }
         if (!isVisible) {
-            select.value = 'none';
+            select.value = ALL_MODELS_VALUE;
         }
     });
 
     if (!hasModels) {
-        this.chartLineSelections = Array(visibleCount).fill('none');
+        this.chartLineSelections = Array(visibleCount).fill(ALL_MODELS_VALUE);
+        this.chartLineSelectionsInitialized = false;
         selectors.forEach((select, index) => {
             const group = select.closest('.chart-line-group');
             if (group) {
                 group.classList.toggle('chart-line-hidden', index >= visibleCount);
             }
-            select.value = 'none';
+            select.value = ALL_MODELS_VALUE;
         });
         this.updateChartLineControlsUI();
         return;
@@ -359,29 +465,38 @@ export function updateChartLineSelectors(usage) {
 
     const nextSelections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
 
-    const validNames = new Set(modelNames);
+    const validNames = new Set([...modelNames, ALL_MODELS_VALUE]);
     let hasActiveSelection = false;
     for (let i = 0; i < nextSelections.length; i++) {
         const selection = nextSelections[i];
         if (selection && selection !== 'none' && !validNames.has(selection)) {
-            nextSelections[i] = 'none';
+            nextSelections[i] = ALL_MODELS_VALUE;
         }
-        if (nextSelections[i] !== 'none') {
+        if (nextSelections[i] && nextSelections[i] !== 'none') {
             hasActiveSelection = true;
         }
     }
 
-    if (!hasActiveSelection) {
+    const allSelectionsAreAll = nextSelections.length > 0 && nextSelections.every(value => value === ALL_MODELS_VALUE);
+
+    if (!hasActiveSelection || (!wasInitialized && allSelectionsAreAll)) {
         modelNames.slice(0, nextSelections.length).forEach((name, index) => {
             nextSelections[index] = name;
         });
     }
 
+    for (let i = 0; i < nextSelections.length; i++) {
+        if (!nextSelections[i] || nextSelections[i] === 'none') {
+            nextSelections[i] = modelNames[i % Math.max(modelNames.length, 1)] || ALL_MODELS_VALUE;
+        }
+    }
+
     this.chartLineSelections = nextSelections;
     selectors.forEach((select, index) => {
-        const value = this.chartLineSelections[index] || 'none';
-        select.value = index < visibleCount ? value : 'none';
+        const value = this.chartLineSelections[index] || ALL_MODELS_VALUE;
+        select.value = index < visibleCount ? value : ALL_MODELS_VALUE;
     });
+    this.chartLineSelectionsInitialized = hasModels;
     this.updateChartLineControlsUI();
 }
 
@@ -391,7 +506,7 @@ export function handleChartLineSelectionChange(index, value) {
         return;
     }
     this.ensureChartLineSelectionLength(visibleCount);
-    const normalized = value || 'none';
+    const normalized = (value && value !== 'none') ? value : ALL_MODELS_VALUE;
     if (this.chartLineSelections[index] === normalized) {
         return;
     }
@@ -595,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">
-                <span class="model-name">${model}</span>
-                <span>$${prompt.toFixed(4)} / 1M</span>
-                <span>$${completion.toFixed(4)} / 1M</span>
+            <div class="provider-item model-price-item" onclick="manager.handleModelPriceEdit(${editArg})">
+                <div class="item-content">
+                    <div class="item-title">${safeModel}</div>
+                    <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 = `
-        <div class="model-price-table">
-            <div class="model-price-header">
-                <span>${i18n.t('usage_stats.model_price_model')}</span>
-                <span>${i18n.t('usage_stats.model_price_prompt')}</span>
-                <span>${i18n.t('usage_stats.model_price_completion')}</span>
-            </div>
-            ${rows}
-        </div>
-    `;
+    container.innerHTML = rows;
+}
+
+export function handleModelPriceEdit(modelName) {
+    const model = (modelName || '').trim();
+    const select = document.getElementById('model-price-model-select');
+    const promptInput = document.getElementById('model-price-prompt');
+    const completionInput = document.getElementById('model-price-completion');
+    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() {
@@ -668,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');
 }
 
@@ -685,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) {
@@ -743,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();
@@ -860,11 +1198,37 @@ export function buildChartDataForMetric(period = 'day', metric = 'requests') {
     const labels = baseSeries?.labels || [];
     const dataByModel = baseSeries?.dataByModel || new Map();
     const activeSelections = this.getActiveChartLineSelections();
+    let allSeriesCache = null;
+
+    const getAllSeries = () => {
+        if (allSeriesCache) {
+            return allSeriesCache;
+        }
+        const summed = new Array(labels.length).fill(0);
+        dataByModel.forEach(values => {
+            values.forEach((value, idx) => {
+                summed[idx] = (summed[idx] || 0) + value;
+            });
+        });
+        allSeriesCache = summed;
+        return summed;
+    };
+
+    const getSeriesForSelection = (selectionValue) => {
+        if (selectionValue === ALL_MODELS_VALUE) {
+            return getAllSeries();
+        }
+        return dataByModel.get(selectionValue) || new Array(labels.length).fill(0);
+    };
+
     const datasets = activeSelections.map(selection => {
-        const values = dataByModel.get(selection.model) || new Array(labels.length).fill(0);
+        const values = getSeriesForSelection(selection.model);
         const style = this.chartLineStyles[selection.index % this.chartLineStyles.length] || this.chartLineStyles[0];
+        const label = selection.model === ALL_MODELS_VALUE
+            ? i18n.t('usage_stats.chart_line_all')
+            : selection.model;
         return {
-            label: selection.model,
+            label,
             data: values,
             borderColor: style.borderColor,
             backgroundColor: style.backgroundColor,
@@ -891,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 '';
@@ -1422,17 +1795,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>
                 `;
@@ -1442,7 +1822,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>
@@ -1459,6 +1839,7 @@ export const usageModule = {
     getKeyStats,
     loadUsageStats,
     updateUsageOverview,
+    maskUsageSensitiveValue,
     getModelNamesFromUsage,
     getChartLineMaxCount,
     getVisibleChartLineCount,
@@ -1466,6 +1847,7 @@ export const usageModule = {
     updateChartLineControlsUI,
     setChartLineVisibleCount,
     changeChartLineCount,
+    removeChartLine,
     updateChartLineSelectors,
     handleChartLineSelectionChange,
     refreshChartsForSelections,
@@ -1478,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,
@@ -1498,6 +1884,8 @@ export const usageModule = {
     getCostChartPeriod,
     setCostChartPlaceholder,
     destroyCostChart,
+    destroySparklineCharts,
+    renderOverviewSparklines,
     initializeCostChart,
     updateCostSummaryAndChart,
     initializeCharts,

src/utils/models.js

@@ -0,0 +1,104 @@
+/**
+ * 模型工具函数
+ * 提供模型列表的规范化与去重能力
+ */
+export function normalizeModelList(payload, { dedupe = false } = {}) {
+    const toModel = (entry) => {
+        if (typeof entry === 'string') {
+            return { name: entry };
+        }
+        if (!entry || typeof entry !== 'object') {
+            return null;
+        }
+        const name = entry.id || entry.name || entry.model || entry.value;
+        if (!name) return null;
+
+        const alias = entry.alias || entry.display_name || entry.displayName;
+        const description = entry.description || entry.note || entry.comment;
+        const model = { name: String(name) };
+        if (alias && alias !== name) {
+            model.alias = String(alias);
+        }
+        if (description) {
+            model.description = String(description);
+        }
+        return model;
+    };
+
+    let models = [];
+
+    if (Array.isArray(payload)) {
+        models = payload.map(toModel).filter(Boolean);
+    } else if (payload && typeof payload === 'object') {
+        if (Array.isArray(payload.data)) {
+            models = payload.data.map(toModel).filter(Boolean);
+        } else if (Array.isArray(payload.models)) {
+            models = payload.models.map(toModel).filter(Boolean);
+        }
+    }
+
+    if (!dedupe) {
+        return models;
+    }
+
+    const seen = new Set();
+    return models.filter(model => {
+        const key = (model?.name || '').toLowerCase();
+        if (!key || seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+}
+
+const MODEL_CATEGORIES = [
+    { id: 'gpt', label: 'GPT', patterns: [/gpt/i, /\bo\d\b/i, /\bo\d+\.?/i, /\bchatgpt/i] },
+    { id: 'claude', label: 'Claude', patterns: [/claude/i] },
+    { id: 'gemini', label: 'Gemini', patterns: [/gemini/i, /\bgai\b/i] },
+    { id: 'kimi', label: 'Kimi', patterns: [/kimi/i] },
+    { id: 'qwen', label: 'Qwen', patterns: [/qwen/i] },
+    { id: 'glm', label: 'GLM', patterns: [/glm/i, /chatglm/i] },
+    { id: 'grok', label: 'Grok', patterns: [/grok/i] },
+    { id: 'deepseek', label: 'DeepSeek', patterns: [/deepseek/i] }
+];
+
+function matchCategory(text) {
+    for (const category of MODEL_CATEGORIES) {
+        if (category.patterns.some(pattern => pattern.test(text))) {
+            return category.id;
+        }
+    }
+    return null;
+}
+
+export function classifyModels(models = [], { otherLabel = 'Other' } = {}) {
+    const groups = MODEL_CATEGORIES.map(category => ({
+        id: category.id,
+        label: category.label,
+        items: []
+    }));
+
+    const otherGroup = { id: 'other', label: otherLabel, items: [] };
+
+    models.forEach(model => {
+        const name = (model?.name || '').toString();
+        const alias = (model?.alias || '').toString();
+        const haystack = `${name} ${alias}`.toLowerCase();
+        const matchedId = matchCategory(haystack);
+        const target = matchedId ? groups.find(group => group.id === matchedId) : null;
+
+        if (target) {
+            target.items.push(model);
+        } else {
+            otherGroup.items.push(model);
+        }
+    });
+
+    const populatedGroups = groups.filter(group => group.items.length > 0);
+    if (otherGroup.items.length) {
+        populatedGroups.push(otherGroup);
+    }
+
+    return populatedGroups;
+}

styles.css

@@ -267,6 +267,8 @@
     display: inline-flex;
     align-items: center;
     height: 36px;
+    min-width: 36px;
+    justify-content: center;
 }
 
 /* 登录页面的按钮样式优化 */
@@ -804,7 +806,7 @@ body {
     display: flex;
     flex-direction: column;
     background: var(--bg-primary);
-    min-height: 100%;
+    min-height: calc(100vh - var(--navbar-height, 69px));
 }
 
 /* 顶部导航栏 */
@@ -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;
-        min-height: 34px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        justify-content: center;
     }
 
     .top-navbar .language-btn,
     .top-navbar .theme-btn {
-        width: 34px;
-        height: 34px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 0 12px;
+        justify-content: center;
+        line-height: 1;
     }
 
     .top-navbar-actions .btn {
-        height: 34px;
-        min-height: 34px;
-        padding: 0 10px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 0 12px;
+        justify-content: center;
+        line-height: 1;
     }
 
-    .top-navbar-actions .btn span {
-        display: none;
+    .top-navbar .language-btn i,
+    .top-navbar .theme-btn i,
+    .top-navbar-actions .btn i {
+        margin: 0;
     }
 }
 
@@ -1036,6 +1157,8 @@ body {
 /* 主内容区域 */
 .main-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
     padding: 24px 32px;
     max-width: 1400px;
     width: 100%;
@@ -1046,6 +1169,8 @@ body {
 .content-area {
     flex: 1;
     width: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .content-section {
@@ -1385,7 +1510,6 @@ textarea::placeholder {
 #config-management .card {
     display: flex;
     flex-direction: column;
-    min-height: calc(100vh - 360px);
     margin-bottom: 12px;
 }
 
@@ -2243,6 +2367,87 @@ input:checked+.slider:before {
     font-style: italic;
 }
 
+.available-models-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin-bottom: 10px;
+}
+
+.available-models-status.success {
+    color: #10b981;
+}
+
+.available-models-status.warning {
+    color: #d97706;
+}
+
+.available-models-status.error {
+    color: #dc2626;
+}
+
+.available-models-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.available-models-empty {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-tertiary);
+    padding: 6px 0;
+}
+
+.available-models-placeholder {
+    color: var(--text-tertiary);
+}
+
+.available-model-group {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 10px 12px;
+}
+
+.available-model-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.available-model-group-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.available-model-group-label {
+    font-size: 0.95rem;
+    letter-spacing: 0.3px;
+}
+
+.available-model-group-count {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    padding: 2px 8px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.available-model-group-body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
 .item-value {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     background: var(--bg-tertiary);
@@ -2284,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;
@@ -2519,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);
@@ -2799,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;
-        min-height: 34px;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
     }
 
     .top-navbar .header-controls {
-        height: 34px;
-        gap: 6px;
+        height: 36px;
+        gap: 8px;
+        width: auto;
+        order: 0;
+        justify-content: flex-end;
     }
 
     .top-navbar-actions .btn,
     .top-navbar .language-btn,
     .top-navbar .theme-btn {
-        height: 34px;
-        min-height: 34px;
-        padding: 0 10px;
-    }
-
-    .top-navbar-actions .btn span {
-        display: none;
+        height: 36px;
+        min-height: 36px;
+        min-width: 44px;
+        padding: 8px 12px;
     }
 
     .btn {
@@ -3066,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));
     }
 }
 
@@ -3100,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 {
@@ -3129,6 +3456,20 @@ input:checked+.slider:before {
     font-size: 13px;
 }
 
+.chart-line-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.chart-line-control .model-filter-select {
+    flex: 1;
+}
+
+.chart-line-delete {
+    white-space: nowrap;
+}
+
 .chart-line-group.chart-line-hidden {
     display: none;
 }
@@ -3152,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;
-    gap: 16px;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 220px;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -3166,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;
-    height: 50px;
+    width: 44px;
+    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;
 }
 
@@ -3187,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;
-    margin-bottom: 4px;
+    line-height: 1.1;
 }
 
 .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 {
-    margin-top: 6px;
+.stat-subtext-inline {
+    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 {
@@ -3341,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-row {
-    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-item {
+    cursor: pointer;
 }
 
-.model-price-header {
-    font-weight: 700;
-    color: var(--text-primary);
-    background: var(--bg-secondary);
-}
-
-.model-price-row {
-    background: var(--bg-primary);
-    color: var(--text-secondary);
+.model-price-item .item-meta {
+    margin-bottom: 0;
+    gap: 10px;
 }
 
 .chart-placeholder {
@@ -3434,6 +3790,7 @@ input:checked+.slider:before {
     margin-top: 40px;
     padding: 24px 0;
     border-top: 1px solid var(--border-primary);
+    flex-shrink: 0;
 }
 
 .version-info {
@@ -4318,6 +4675,60 @@ input:checked+.slider:before {
     line-height: 1.6;
 }
 
+/* 日志页面头部布局 */
+#logs .card-header.logs-header {
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.logs-header-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+    min-width: 280px;
+}
+
+.logs-header-main h3 {
+    margin: 0;
+}
+
+.logs-search {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border-primary);
+    border-radius: 10px;
+    padding: 0 12px;
+    background: var(--bg-secondary);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+    min-width: 240px;
+    max-width: 420px;
+    flex: 1;
+}
+
+[data-theme="dark"] .logs-search {
+    background: var(--bg-tertiary);
+    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
+}
+
+.logs-search i {
+    color: var(--text-tertiary);
+    margin-right: 8px;
+}
+
+.logs-search input {
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    width: 100%;
+    padding: 10px 0;
+    font-size: 0.95rem;
+}
+
+.logs-search input:focus {
+    outline: none;
+}
+
 /* 日志页面头部操作区域 */
 #logs .card-header .header-actions {
     display: flex;
@@ -4349,6 +4760,21 @@ input:checked+.slider:before {
         font-size: 12px;
     }
 
+    #logs .card-header.logs-header {
+        align-items: flex-start;
+    }
+
+    .logs-header-main {
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .logs-search {
+        width: 100%;
+        max-width: none;
+    }
+
     #logs .card-header .header-actions {
         width: 100%;
         justify-content: flex-start;
@@ -4542,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;
 }