feat(app.js, i18n, index.html): refactor model filtering to chart line selections

- Replaced the model filter dropdown with multiple chart line selectors for improved data visualization. - Updated event handling to manage changes in chart line selections and refresh chart data accordingly. - Enhanced internationalization strings for chart line labels in both English and Chinese. - Adjusted the HTML structure to accommodate the new chart line selection UI.
feat(app.js, i18n, index.html, styles.css): implement model filtering in usage statistics
2026-02-03 03:10:50 +08:00 · 2025-11-16 17:27:58 +08:00 · 2025-11-16 11:25:18 +08:00 · 2025-11-16 11:08:47 +08:00
4 changed files with 446 additions and 55 deletions
--- a/app.js
+++ b/app.js
@@ -754,6 +754,7 @@ class CLIProxyManager {
        const requestsDayBtn = document.getElementById('requests-day-btn');
        const tokensHourBtn = document.getElementById('tokens-hour-btn');
        const tokensDayBtn = document.getElementById('tokens-day-btn');
+        const chartLineSelects = document.querySelectorAll('.chart-line-select');

        if (refreshUsageStats) {
            refreshUsageStats.addEventListener('click', () => this.loadUsageStats());
@@ -770,6 +771,14 @@ class CLIProxyManager {
        if (tokensDayBtn) {
            tokensDayBtn.addEventListener('click', () => this.switchTokensPeriod('day'));
        }
+        if (chartLineSelects.length) {
+            chartLineSelects.forEach(select => {
+                select.addEventListener('change', (event) => {
+                    const index = Number.parseInt(select.getAttribute('data-line-index'), 10);
+                    this.handleChartLineSelectionChange(Number.isNaN(index) ? -1 : index, event.target.value);
+                });
+            });
+        }

        // 模态框
        const closeBtn = document.querySelector('.close');
@@ -5852,10 +5861,17 @@ class CLIProxyManager {

    // ===== 使用统计相关方法 =====

-    // 初始化图表变量
+    // 使用统计状态
    requestsChart = null;
    tokensChart = null;
    currentUsageData = null;
+    chartLineSelections = ['none', 'none', 'none'];
+    chartLineSelectIds = ['chart-line-select-0', 'chart-line-select-1', 'chart-line-select-2'];
+    chartLineStyles = [
+        { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
+        { borderColor: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.15)' },
+        { borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' }
+    ];

    // 获取API密钥的统计信息
    async getKeyStats() {
@@ -5921,6 +5937,7 @@ class CLIProxyManager {

            // 更新概览卡片
            this.updateUsageOverview(usage);
+            this.updateChartLineSelectors(usage);

            // 读取当前图表周期
            const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
@@ -5938,6 +5955,7 @@ class CLIProxyManager {
        } catch (error) {
            console.error('加载使用统计失败:', error);
            this.currentUsageData = null;
+            this.updateChartLineSelectors(null);

            // 清空概览数据
            ['total-requests', 'success-requests', 'failed-requests', 'total-tokens'].forEach(id => {
@@ -5971,6 +5989,339 @@ class CLIProxyManager {
        document.getElementById('total-tokens').textContent = safeData.total_tokens ?? 0;
    }

+    getModelNamesFromUsage(usage) {
+        if (!usage) {
+            return [];
+        }
+        const apis = usage.apis || {};
+        const names = new Set();
+        Object.values(apis).forEach(apiEntry => {
+            const models = apiEntry.models || {};
+            Object.keys(models).forEach(modelName => {
+                if (modelName) {
+                    names.add(modelName);
+                }
+            });
+        });
+        return Array.from(names).sort((a, b) => a.localeCompare(b));
+    }
+
+    updateChartLineSelectors(usage) {
+        const modelNames = this.getModelNamesFromUsage(usage);
+        const selectors = this.chartLineSelectIds
+            .map(id => document.getElementById(id))
+            .filter(Boolean);
+
+        if (!selectors.length) {
+            this.chartLineSelections = ['none', 'none', 'none'];
+            return;
+        }
+
+        const optionsFragment = () => {
+            const fragment = document.createDocumentFragment();
+            const hiddenOption = document.createElement('option');
+            hiddenOption.value = 'none';
+            hiddenOption.textContent = i18n.t('usage_stats.chart_line_hidden');
+            fragment.appendChild(hiddenOption);
+            modelNames.forEach(name => {
+                const option = document.createElement('option');
+                option.value = name;
+                option.textContent = name;
+                fragment.appendChild(option);
+            });
+            return fragment;
+        };
+
+        const hasModels = modelNames.length > 0;
+        selectors.forEach(select => {
+            select.innerHTML = '';
+            select.appendChild(optionsFragment());
+            select.disabled = !hasModels;
+        });
+
+        if (!hasModels) {
+            this.chartLineSelections = ['none', 'none', 'none'];
+            selectors.forEach(select => {
+                select.value = 'none';
+            });
+            return;
+        }
+
+        const nextSelections = Array.isArray(this.chartLineSelections)
+            ? [...this.chartLineSelections]
+            : ['none', 'none', 'none'];
+
+        const validNames = new Set(modelNames);
+        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';
+            }
+            if (nextSelections[i] !== 'none') {
+                hasActiveSelection = true;
+            }
+        }
+
+        if (!hasActiveSelection) {
+            modelNames.slice(0, nextSelections.length).forEach((name, index) => {
+                nextSelections[index] = name;
+            });
+        }
+
+        this.chartLineSelections = nextSelections;
+        selectors.forEach((select, index) => {
+            const value = this.chartLineSelections[index] || 'none';
+            select.value = value;
+        });
+    }
+
+    handleChartLineSelectionChange(index, value) {
+        if (!Array.isArray(this.chartLineSelections)) {
+            this.chartLineSelections = ['none', 'none', 'none'];
+        }
+        if (index < 0 || index >= this.chartLineSelections.length) {
+            return;
+        }
+        const normalized = value || 'none';
+        if (this.chartLineSelections[index] === normalized) {
+            return;
+        }
+        this.chartLineSelections[index] = normalized;
+        this.refreshChartsForSelections();
+    }
+
+    refreshChartsForSelections() {
+        if (!this.currentUsageData) {
+            return;
+        }
+        const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
+        const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
+        const requestsPeriod = requestsHourActive ? 'hour' : 'day';
+        const tokensPeriod = tokensHourActive ? 'hour' : 'day';
+
+        if (this.requestsChart) {
+            this.requestsChart.data = this.getRequestsChartData(requestsPeriod);
+            this.requestsChart.update();
+        } else {
+            this.initializeRequestsChart(requestsPeriod);
+        }
+
+        if (this.tokensChart) {
+            this.tokensChart.data = this.getTokensChartData(tokensPeriod);
+            this.tokensChart.update();
+        } else {
+            this.initializeTokensChart(tokensPeriod);
+        }
+    }
+
+    getActiveChartLineSelections() {
+        if (!Array.isArray(this.chartLineSelections)) {
+            this.chartLineSelections = ['none', 'none', 'none'];
+        }
+        return this.chartLineSelections
+            .map((value, index) => ({ model: value, index }))
+            .filter(item => item.model && item.model !== 'none');
+    }
+
+    // 收集所有请求明细，供图表等复用
+    collectUsageDetailsFromUsage(usage) {
+        if (!usage) {
+            return [];
+        }
+        const apis = usage.apis || {};
+        const details = [];
+        Object.values(apis).forEach(apiEntry => {
+            const models = apiEntry.models || {};
+            Object.entries(models).forEach(([modelName, modelEntry]) => {
+                const modelDetails = Array.isArray(modelEntry.details) ? modelEntry.details : [];
+                modelDetails.forEach(detail => {
+                    if (detail && detail.timestamp) {
+                        details.push({
+                            ...detail,
+                            __modelName: modelName
+                        });
+                    }
+                });
+            });
+        });
+        return details;
+    }
+
+    collectUsageDetails() {
+        return this.collectUsageDetailsFromUsage(this.currentUsageData);
+    }
+
+    createHourlyBucketMeta() {
+        const hourMs = 60 * 60 * 1000;
+        const now = new Date();
+        const currentHour = new Date(now);
+        currentHour.setMinutes(0, 0, 0);
+
+        const earliestBucket = new Date(currentHour);
+        earliestBucket.setHours(earliestBucket.getHours() - 23);
+        const earliestTime = earliestBucket.getTime();
+        const labels = [];
+        for (let i = 0; i < 24; i++) {
+            const bucketStart = earliestTime + i * hourMs;
+            labels.push(this.formatHourLabel(new Date(bucketStart)));
+        }
+
+        return {
+            labels,
+            earliestTime,
+            bucketSize: hourMs,
+            lastBucketTime: earliestTime + (labels.length - 1) * hourMs
+        };
+    }
+
+    buildHourlySeriesByModel(metric = 'requests') {
+        const meta = this.createHourlyBucketMeta();
+        const details = this.collectUsageDetails();
+        const dataByModel = new Map();
+        let hasData = false;
+
+        if (!details.length) {
+            return { labels: meta.labels, dataByModel, hasData };
+        }
+
+        details.forEach(detail => {
+            const timestamp = Date.parse(detail.timestamp);
+            if (Number.isNaN(timestamp)) {
+                return;
+            }
+
+            const normalized = new Date(timestamp);
+            normalized.setMinutes(0, 0, 0);
+            const bucketStart = normalized.getTime();
+            if (bucketStart < meta.earliestTime || bucketStart > meta.lastBucketTime) {
+                return;
+            }
+
+            const bucketIndex = Math.floor((bucketStart - meta.earliestTime) / meta.bucketSize);
+            if (bucketIndex < 0 || bucketIndex >= meta.labels.length) {
+                return;
+            }
+
+            const modelName = detail.__modelName || 'Unknown';
+            if (!dataByModel.has(modelName)) {
+                dataByModel.set(modelName, new Array(meta.labels.length).fill(0));
+            }
+
+            const bucketValues = dataByModel.get(modelName);
+            if (metric === 'tokens') {
+                bucketValues[bucketIndex] += this.extractTotalTokens(detail);
+            } else {
+                bucketValues[bucketIndex] += 1;
+            }
+            hasData = true;
+        });
+
+        return { labels: meta.labels, dataByModel, hasData };
+    }
+
+    buildDailySeriesByModel(metric = 'requests') {
+        const details = this.collectUsageDetails();
+        const valuesByModel = new Map();
+        const labelsSet = new Set();
+        let hasData = false;
+
+        if (!details.length) {
+            return { labels: [], dataByModel: new Map(), hasData };
+        }
+
+        details.forEach(detail => {
+            const timestamp = Date.parse(detail.timestamp);
+            if (Number.isNaN(timestamp)) {
+                return;
+            }
+            const dayLabel = this.formatDayLabel(new Date(timestamp));
+            if (!dayLabel) {
+                return;
+            }
+
+            const modelName = detail.__modelName || 'Unknown';
+            if (!valuesByModel.has(modelName)) {
+                valuesByModel.set(modelName, new Map());
+            }
+            const modelDayMap = valuesByModel.get(modelName);
+            const increment = metric === 'tokens' ? this.extractTotalTokens(detail) : 1;
+            modelDayMap.set(dayLabel, (modelDayMap.get(dayLabel) || 0) + increment);
+            labelsSet.add(dayLabel);
+            hasData = true;
+        });
+
+        const labels = Array.from(labelsSet).sort();
+        const dataByModel = new Map();
+        valuesByModel.forEach((dayMap, modelName) => {
+            const series = labels.map(label => dayMap.get(label) || 0);
+            dataByModel.set(modelName, series);
+        });
+
+        return { labels, dataByModel, hasData };
+    }
+
+    buildChartDataForMetric(period = 'day', metric = 'requests') {
+        const baseSeries = period === 'hour'
+            ? this.buildHourlySeriesByModel(metric)
+            : this.buildDailySeriesByModel(metric);
+
+        const labels = baseSeries?.labels || [];
+        const dataByModel = baseSeries?.dataByModel || new Map();
+        const activeSelections = this.getActiveChartLineSelections();
+        const datasets = activeSelections.map(selection => {
+            const values = dataByModel.get(selection.model) || new Array(labels.length).fill(0);
+            const style = this.chartLineStyles[selection.index] || this.chartLineStyles[0];
+            return {
+                label: selection.model,
+                data: values,
+                borderColor: style.borderColor,
+                backgroundColor: style.backgroundColor,
+                fill: false,
+                tension: 0.35,
+                pointBackgroundColor: style.borderColor,
+                pointBorderColor: '#ffffff',
+                pointBorderWidth: 2,
+                pointRadius: values.some(v => v > 0) ? 4 : 3
+            };
+        });
+
+        return { labels, datasets };
+    }
+
+    // 统一格式化小时标签
+    formatHourLabel(date) {
+        if (!(date instanceof Date)) {
+            return '';
+        }
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const hour = date.getHours().toString().padStart(2, '0');
+        return `${month}-${day} ${hour}:00`;
+    }
+
+    formatDayLabel(date) {
+        if (!(date instanceof Date)) {
+            return '';
+        }
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+
+    extractTotalTokens(detail) {
+        const tokens = detail?.tokens || {};
+        if (typeof tokens.total_tokens === 'number') {
+            return tokens.total_tokens;
+        }
+        const tokenKeys = ['input_tokens', 'output_tokens', 'reasoning_tokens', 'cached_tokens'];
+        return tokenKeys.reduce((sum, key) => {
+            const value = tokens[key];
+            return sum + (typeof value === 'number' ? value : 0);
+        }, 0);
+    }
+
    // 初始化图表
    initializeCharts() {
        const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
@@ -5997,9 +6348,18 @@ class CLIProxyManager {
            options: {
                responsive: true,
                maintainAspectRatio: false,
+                interaction: {
+                    mode: 'index',
+                    intersect: false
+                },
                plugins: {
                    legend: {
-                        display: false
+                        display: true,
+                        position: 'top',
+                        align: 'start',
+                        labels: {
+                            usePointStyle: true
+                        }
                    }
                },
                scales: {
@@ -6019,14 +6379,10 @@ class CLIProxyManager {
                },
                elements: {
                    line: {
-                        borderColor: '#3b82f6',
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        fill: true,
-                        tension: 0.4
+                        tension: 0.35,
+                        borderWidth: 2
                    },
                    point: {
-                        backgroundColor: '#3b82f6',
-                        borderColor: '#ffffff',
                        borderWidth: 2,
                        radius: 4
                    }
@@ -6053,9 +6409,18 @@ class CLIProxyManager {
            options: {
                responsive: true,
                maintainAspectRatio: false,
+                interaction: {
+                    mode: 'index',
+                    intersect: false
+                },
                plugins: {
                    legend: {
-                        display: false
+                        display: true,
+                        position: 'top',
+                        align: 'start',
+                        labels: {
+                            usePointStyle: true
+                        }
                    }
                },
                scales: {
@@ -6075,14 +6440,10 @@ class CLIProxyManager {
                },
                elements: {
                    line: {
-                        borderColor: '#10b981',
-                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                        fill: true,
-                        tension: 0.4
+                        tension: 0.35,
+                        borderWidth: 2
                    },
                    point: {
-                        backgroundColor: '#10b981',
-                        borderColor: '#ffffff',
                        borderWidth: 2,
                        radius: 4
                    }
@@ -6094,53 +6455,17 @@ class CLIProxyManager {
    // 获取请求图表数据
    getRequestsChartData(period) {
        if (!this.currentUsageData) {
-            return { labels: [], datasets: [{ data: [] }] };
+            return { labels: [], datasets: [] };
        }
-
-        let dataSource, labels, values;
-
-        if (period === 'hour') {
-            dataSource = this.currentUsageData.requests_by_hour || {};
-            labels = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
-            values = labels.map(hour => dataSource[hour] || 0);
-        } else {
-            dataSource = this.currentUsageData.requests_by_day || {};
-            labels = Object.keys(dataSource).sort();
-            values = labels.map(day => dataSource[day] || 0);
-        }
-
-        return {
-            labels: labels,
-            datasets: [{
-                data: values
-            }]
-        };
+        return this.buildChartDataForMetric(period, 'requests');
    }

    // 获取Token图表数据
    getTokensChartData(period) {
        if (!this.currentUsageData) {
-            return { labels: [], datasets: [{ data: [] }] };
+            return { labels: [], datasets: [] };
        }
-
-        let dataSource, labels, values;
-
-        if (period === 'hour') {
-            dataSource = this.currentUsageData.tokens_by_hour || {};
-            labels = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
-            values = labels.map(hour => dataSource[hour] || 0);
-        } else {
-            dataSource = this.currentUsageData.tokens_by_day || {};
-            labels = Object.keys(dataSource).sort();
-            values = labels.map(day => dataSource[day] || 0);
-        }
-
-        return {
-            labels: labels,
-            datasets: [{
-                data: values
-            }]
-        };
+        return this.buildChartDataForMetric(period, 'tokens');
    }

    // 切换请求图表时间周期
--- a/i18n.js
+++ b/i18n.js
@@ -374,6 +374,10 @@ const i18n = {
            'usage_stats.by_hour': '按小时',
            'usage_stats.by_day': '按天',
            'usage_stats.refresh': '刷新',
+            'usage_stats.chart_line_label_1': '曲线 1',
+            'usage_stats.chart_line_label_2': '曲线 2',
+            'usage_stats.chart_line_label_3': '曲线 3',
+            'usage_stats.chart_line_hidden': '不显示',
            'usage_stats.no_data': '暂无数据',
            'usage_stats.loading_error': '加载失败',
            'usage_stats.api_endpoint': 'API端点',
@@ -875,6 +879,10 @@ const i18n = {
            'usage_stats.by_hour': 'By Hour',
            'usage_stats.by_day': 'By Day',
            'usage_stats.refresh': 'Refresh',
+            'usage_stats.chart_line_label_1': 'Line 1',
+            'usage_stats.chart_line_label_2': 'Line 2',
+            'usage_stats.chart_line_label_3': 'Line 3',
+            'usage_stats.chart_line_hidden': 'Hide',
            'usage_stats.no_data': 'No Data Available',
            'usage_stats.loading_error': 'Loading Failed',
            'usage_stats.api_endpoint': 'API Endpoint',
--- a/index.html
+++ b/index.html
@@ -825,6 +825,28 @@
                                </div>
                            </div>

+                            <!-- 图表曲线选择 -->
+                            <div class="usage-filter-bar">
+                                <div class="usage-filter-group">
+                                    <label for="chart-line-select-0" data-i18n="usage_stats.chart_line_label_1">曲线 1</label>
+                                    <select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group">
+                                    <label for="chart-line-select-1" data-i18n="usage_stats.chart_line_label_2">曲线 2</label>
+                                    <select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                                <div class="usage-filter-group">
+                                    <label for="chart-line-select-2" data-i18n="usage_stats.chart_line_label_3">曲线 3</label>
+                                    <select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
+                                        <option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
+                                    </select>
+                                </div>
+                            </div>
+
                            <!-- 图表区域 -->
                            <div class="charts-container">
                                <!-- 请求趋势图 -->
--- a/styles.css
+++ b/styles.css
@@ -2703,6 +2703,42 @@ input:checked+.slider:before {
    margin-bottom: 30px;
 }

+.usage-filter-bar {
+    display: flex;
+    justify-content: flex-start;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+}
+
+.usage-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 220px;
+}
+
+.usage-filter-group label {
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+.model-filter-select {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 10px 14px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 40px;
+    font-size: 14px;
+}
+
+.model-filter-select:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
 .stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);