feat: implement available models loading functionality with UI integration, status updates, and internationalization support

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');
@@ -525,8 +543,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 +573,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 +581,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) => {
@@ -673,6 +696,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

@@ -94,7 +94,7 @@ const i18n = {
             'nav.usage_stats': '使用统计',
             'nav.config_management': '配置管理',
             'nav.logs': '日志查看',
-            'nav.system_info': '系统信息',
+            'nav.system_info': '管理中心信息',
 
             // 基础设置
             'basic_settings.title': '基础设置',
@@ -472,7 +472,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 +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',
@@ -553,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': '配置状态:',
@@ -562,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': '调试设置已更新',
@@ -726,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',
@@ -1103,7 +1113,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 +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',
@@ -1184,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:',
@@ -1193,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">
+                                <div class="card-header logs-header">
-                                    <h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
+                                    <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>
+                                            <span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
-                                    </div>
+                                        </div>
-                                    <button id="refresh-logs" class="btn btn-primary">
+                                        <button id="refresh-logs" class="btn btn-primary">
-                                        <i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
+                                            <i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
-                                    </button>
+                                        </button>
-                                    <button id="select-error-log" class="btn btn-secondary">
+                                        <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>
+                                            <i class="fas fa-file-circle-exclamation"></i> <span data-i18n="logs.error_log_button">选择错误日志</span>
-                                    </button>
+                                        </button>
-                                    <button id="download-logs" class="btn btn-secondary">
+                                        <button id="download-logs" class="btn btn-secondary">
-                                        <i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
+                                            <i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
-                                    </button>
+                                        </button>
-                                    <button id="clear-logs" class="btn btn-danger">
+                                        <button id="clear-logs" class="btn btn-danger">
-                                        <i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
+                                            <i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
                                         </button>
                                     </div>
                                 </div>
@@ -966,67 +972,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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-3" class="model-filter-select chart-line-select" data-line-index="3" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-4" class="model-filter-select chart-line-select" data-line-index="4" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-5" class="model-filter-select chart-line-select" data-line-index="5" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-6" class="model-filter-select chart-line-select" data-line-index="6" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-7" class="model-filter-select chart-line-select" data-line-index="7" disabled>
-                                    </select>
+                                            <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>
+                                    <div class="chart-line-control">
-                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                        <select id="chart-line-select-8" class="model-filter-select chart-line-select" data-line-index="8" disabled>
-                                    </select>
+                                            <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 +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
@@ -128,25 +92,7 @@ export function getGeminiKeysFromConfig(config) {
     }
 
     const geminiKeys = Array.isArray(config['gemini-api-key']) ? config['gemini-api-key'] : [];
-    if (geminiKeys.length > 0) {
+    return geminiKeys;
-        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);
 }
 
 export async function renderGeminiKeys(keys, keyStats = null) {

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/'));
+        const visibleLines = this.filterLogLinesBySearch(displayedLines);
-        let displayedLines = filteredLines;
+        this.displayedLogLines = visibleLines.slice();
-        if (filteredLines.length > this.maxDisplayLogLines) {
-            const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
-            displayedLines = filteredLines.slice(linesToRemove);
-        }
 
-        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);
+        const baseLines = Array.isArray(this.allLogLines) && this.allLogLines.length > 0
-        if (this.displayedLogLines.length > this.maxDisplayLogLines) {
+            ? this.allLogLines
-            this.displayedLogLines = this.displayedLogLines.slice(this.displayedLogLines.length - this.maxDisplayLogLines);
+            : (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,7 @@ 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';
 
 // 获取API密钥的统计信息
 export async function getKeyStats(usageData = null) {
@@ -269,12 +270,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) {
+    const deleteButtons = document.querySelectorAll('.chart-line-delete');
-        removeBtn.disabled = visibleCount <= MIN_CHART_LINE_COUNT;
+    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 +305,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 +332,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');
+        const allOption = document.createElement('option');
-        hiddenOption.value = 'none';
+        allOption.value = ALL_MODELS_VALUE;
-        hiddenOption.textContent = i18n.t('usage_stats.chart_line_hidden');
+        allOption.textContent = i18n.t('usage_stats.chart_line_all');
-        fragment.appendChild(hiddenOption);
+        fragment.appendChild(allOption);
         modelNames.forEach(name => {
             const option = document.createElement('option');
             option.value = name;
@@ -336,22 +363,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 +391,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';
+        const value = this.chartLineSelections[index] || ALL_MODELS_VALUE;
-        select.value = index < visibleCount ? value : 'none';
+        select.value = index < visibleCount ? value : ALL_MODELS_VALUE;
     });
+    this.chartLineSelectionsInitialized = hasModels;
     this.updateChartLineControlsUI();
 }
 
@@ -391,7 +432,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;
     }
@@ -860,11 +901,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,
@@ -1466,6 +1533,7 @@ export const usageModule = {
     updateChartLineControlsUI,
     setChartLineVisibleCount,
     changeChartLineCount,
+    removeChartLine,
     updateChartLineSelectors,
     handleChartLineSelectionChange,
     refreshChartsForSelections,

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

@@ -1385,7 +1385,6 @@ textarea::placeholder {
 #config-management .card {
     display: flex;
     flex-direction: column;
-    min-height: calc(100vh - 360px);
     margin-bottom: 12px;
 }
 
@@ -2243,6 +2242,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);
@@ -3129,6 +3209,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;
 }
@@ -4318,6 +4412,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 +4497,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;