feat: add sensitive value masking functionality to usage module and update UI for system info localization

app.js

@@ -65,6 +65,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 +80,9 @@ class CLIProxyManager {
         this.logsRefreshTimer = null;
 
         // 当前展示的日志行
+        this.allLogLines = [];
         this.displayedLogLines = [];
+        this.logSearchQuery = '';
         this.maxDisplayLogLines = MAX_LOG_LINES;
         this.logFetchLimit = LOG_FETCH_LIMIT;
 
@@ -274,6 +279,7 @@ class CLIProxyManager {
         // 连接状态检查
         const connectionStatus = document.getElementById('connection-status');
         const refreshAll = document.getElementById('refresh-all');
+        const availableModelsRefresh = document.getElementById('available-models-refresh');
 
         if (connectionStatus) {
             connectionStatus.addEventListener('click', () => this.checkConnectionStatus());
@@ -281,6 +287,9 @@ class CLIProxyManager {
         if (refreshAll) {
             refreshAll.addEventListener('click', () => this.refreshAllData());
         }
+        if (availableModelsRefresh) {
+            availableModelsRefresh.addEventListener('click', () => this.loadAvailableModels({ forceRefresh: true }));
+        }
 
         // 基础设置
         const debugToggle = document.getElementById('debug-toggle');
@@ -333,6 +342,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 +359,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');

i18n.js

@@ -94,7 +94,7 @@ const i18n = {
             'nav.usage_stats': '使用统计',
             'nav.config_management': '配置管理',
             'nav.logs': '日志查看',
-            'nav.system_info': '系统信息',
+            'nav.system_info': '中心信息',
 
             // 基础设置
             'basic_settings.title': '基础设置',
@@ -529,6 +529,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',
@@ -554,7 +557,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': '配置状态:',
@@ -563,6 +566,12 @@ 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} 个',
 
             // 通知消息
             'notification.debug_updated': '调试设置已更新',
@@ -727,7 +736,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',
@@ -1161,6 +1170,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',
@@ -1186,7 +1198,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:',
@@ -1195,6 +1207,12 @@ 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',
 
             // Notification messages
             'notification.debug_updated': 'Debug settings updated',

index.html

@@ -182,7 +182,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>
@@ -839,27 +839,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>
@@ -1229,9 +1235,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">

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
@@ -153,6 +181,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 +403,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 +485,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 +538,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,44 +23,6 @@ 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);
-    }
-
-    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);
-        }
-    }
-
-    return [];
-};
-
 const normalizeExcludedModels = (input) => {
     const rawList = Array.isArray(input)
         ? input

src/modules/login.js

@@ -106,6 +106,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

@@ -5,6 +5,46 @@ const DEFAULT_CHART_LINE_COUNT = 3;
 const MIN_CHART_LINE_COUNT = 1;
 const ALL_MODELS_VALUE = 'all';
 
+export function maskUsageSensitiveValue(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    const raw = typeof value === 'string' ? value : String(value);
+    if (!raw) {
+        return '';
+    }
+    const maskFn = (this && typeof this.maskApiKey === 'function') ? this.maskApiKey : (v) => v;
+    let masked = raw;
+
+    const queryRegex = /([?&])(api[-_]?key|key|token|access_token|authorization)=([^&#\s]+)/ig;
+    masked = masked.replace(queryRegex, (full, prefix, keyName, valuePart) => `${prefix}${keyName}=${maskFn(valuePart)}`);
+
+    const headerRegex = /(api[-_]?key|key|token|access[-_]?token|authorization)\s*([:=])\s*([A-Za-z0-9._-]+)/ig;
+    masked = masked.replace(headerRegex, (full, keyName, separator, valuePart) => `${keyName}${separator}${maskFn(valuePart)}`);
+
+    const keyLikeRegex = /(sk-[A-Za-z0-9]{6,}|AI[a-zA-Z0-9_-]{6,}|AIza[0-9A-Za-z-_]{8,}|hf_[A-Za-z0-9]{6,}|pk_[A-Za-z0-9]{6,}|rk_[A-Za-z0-9]{6,})/g;
+    masked = masked.replace(keyLikeRegex, match => maskFn(match));
+
+    if (masked === raw) {
+        const trimmed = raw.trim();
+        if (trimmed && !/\s/.test(trimmed)) {
+            const looksLikeKey = /^sk-/i.test(trimmed)
+                || /^AI/i.test(trimmed)
+                || /^AIza/i.test(trimmed)
+                || /^hf_/i.test(trimmed)
+                || /^pk_/i.test(trimmed)
+                || /^rk_/i.test(trimmed)
+                || (!/[\\/]/.test(trimmed) && (/\d/.test(trimmed) || trimmed.length >= 10))
+                || trimmed.length >= 24;
+            if (looksLikeKey) {
+                return maskFn(trimmed);
+            }
+        }
+    }
+
+    return masked;
+}
+
 // 获取API密钥的统计信息
 export async function getKeyStats(usageData = null) {
     try {
@@ -45,7 +85,9 @@ export async function getKeyStats(usageData = null) {
                 const details = modelEntry.details || [];
 
                 details.forEach(detail => {
-                    const source = detail.source;
+                    const source = this.maskUsageSensitiveValue
+                        ? this.maskUsageSensitiveValue(detail.source)
+                        : detail.source;
                     const authIndexKey = normalizeAuthIndex(detail?.auth_index);
                     const isFailed = detail.failed === true;
 
@@ -1489,17 +1531,27 @@ 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 maskedModel = (this.maskUsageSensitiveValue
+                    ? this.maskUsageSensitiveValue(modelName)
+                    : modelName) || '';
+                const safeModel = this.escapeHtml ? this.escapeHtml(maskedModel) : maskedModel;
                 const modelRequests = modelData.total_requests ?? 0;
                 const modelTokens = this.formatTokensInMillions(modelData.total_tokens ?? 0);
                 modelsHtml += `
                     <div class="model-item">
-                        <span class="model-name">${modelName}</span>
+                        <span class="model-name">${safeModel}</span>
                         <span>${modelRequests} 请求 / ${modelTokens} tokens</span>
                     </div>
                 `;
@@ -1509,7 +1561,7 @@ export function updateApiStatsTable(data) {
 
         tableHtml += `
             <tr>
-                <td>${endpoint}</td>
+                <td>${safeEndpoint}</td>
                 <td>${totalRequests}</td>
                 <td>${this.formatTokensInMillions(apiData.total_tokens || 0)}</td>
                 <td>${hasPrices && endpointCost > 0 ? this.formatUsd(endpointCost) : '--'}</td>
@@ -1526,6 +1578,7 @@ export const usageModule = {
     getKeyStats,
     loadUsageStats,
     updateUsageOverview,
+    maskUsageSensitiveValue,
     getModelNamesFromUsage,
     getChartLineMaxCount,
     getVisibleChartLineCount,

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

@@ -804,7 +804,7 @@ body {
     display: flex;
     flex-direction: column;
     background: var(--bg-primary);
-    min-height: 100%;
+    min-height: calc(100vh - var(--navbar-height, 69px));
 }
 
 /* 顶部导航栏 */
@@ -1036,6 +1036,8 @@ body {
 /* 主内容区域 */
 .main-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
     padding: 24px 32px;
     max-width: 1400px;
     width: 100%;
@@ -1046,6 +1048,8 @@ body {
 .content-area {
     flex: 1;
     width: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .content-section {
@@ -2242,6 +2246,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);
@@ -3447,6 +3532,7 @@ input:checked+.slider:before {
     margin-top: 40px;
     padding: 24px 0;
     border-top: 1px solid var(--border-primary);
+    flex-shrink: 0;
 }
 
 .version-info {
@@ -4331,6 +4417,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;
@@ -4362,6 +4502,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;