mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-03 11:20:50 +08:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d235cfde81 | ||
|
|
4d419448e8 | ||
|
|
63c0e5ffe2 | ||
|
|
79b73dd3a0 | ||
|
|
9e41fa0aa7 | ||
|
|
a607b8d9c1 |
29
app.js
29
app.js
@@ -524,7 +524,9 @@ class CLIProxyManager {
|
|||||||
const tokensDayBtn = document.getElementById('tokens-day-btn');
|
const tokensDayBtn = document.getElementById('tokens-day-btn');
|
||||||
const costHourBtn = document.getElementById('cost-hour-btn');
|
const costHourBtn = document.getElementById('cost-hour-btn');
|
||||||
const costDayBtn = document.getElementById('cost-day-btn');
|
const costDayBtn = document.getElementById('cost-day-btn');
|
||||||
|
const addChartLineBtn = document.getElementById('add-chart-line');
|
||||||
const chartLineSelects = document.querySelectorAll('.chart-line-select');
|
const chartLineSelects = document.querySelectorAll('.chart-line-select');
|
||||||
|
const chartLineDeleteButtons = document.querySelectorAll('.chart-line-delete');
|
||||||
const modelPriceForm = document.getElementById('model-price-form');
|
const modelPriceForm = document.getElementById('model-price-form');
|
||||||
const resetModelPricesBtn = document.getElementById('reset-model-prices');
|
const resetModelPricesBtn = document.getElementById('reset-model-prices');
|
||||||
const modelPriceSelect = document.getElementById('model-price-model-select');
|
const modelPriceSelect = document.getElementById('model-price-model-select');
|
||||||
@@ -550,6 +552,9 @@ class CLIProxyManager {
|
|||||||
if (costDayBtn) {
|
if (costDayBtn) {
|
||||||
costDayBtn.addEventListener('click', () => this.switchCostPeriod('day'));
|
costDayBtn.addEventListener('click', () => this.switchCostPeriod('day'));
|
||||||
}
|
}
|
||||||
|
if (addChartLineBtn) {
|
||||||
|
addChartLineBtn.addEventListener('click', () => this.changeChartLineCount(1));
|
||||||
|
}
|
||||||
if (chartLineSelects.length) {
|
if (chartLineSelects.length) {
|
||||||
chartLineSelects.forEach(select => {
|
chartLineSelects.forEach(select => {
|
||||||
select.addEventListener('change', (event) => {
|
select.addEventListener('change', (event) => {
|
||||||
@@ -558,6 +563,15 @@ 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) {
|
if (modelPriceForm) {
|
||||||
modelPriceForm.addEventListener('submit', (event) => {
|
modelPriceForm.addEventListener('submit', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -661,12 +675,21 @@ class CLIProxyManager {
|
|||||||
tokensChart = null;
|
tokensChart = null;
|
||||||
costChart = null;
|
costChart = null;
|
||||||
currentUsageData = null;
|
currentUsageData = null;
|
||||||
chartLineSelections = ['none', 'none', 'none'];
|
chartLineMaxCount = 9;
|
||||||
chartLineSelectIds = ['chart-line-select-0', 'chart-line-select-1', 'chart-line-select-2'];
|
chartLineVisibleCount = 3;
|
||||||
|
chartLineSelections = Array(3).fill('none');
|
||||||
|
chartLineSelectionsInitialized = false;
|
||||||
|
chartLineSelectIds = Array.from({ length: 9 }, (_, idx) => `chart-line-select-${idx}`);
|
||||||
chartLineStyles = [
|
chartLineStyles = [
|
||||||
{ borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
|
{ borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
|
||||||
{ borderColor: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.15)' },
|
{ borderColor: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.15)' },
|
||||||
{ borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' }
|
{ borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' },
|
||||||
|
{ borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.15)' },
|
||||||
|
{ borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' },
|
||||||
|
{ borderColor: '#14b8a6', backgroundColor: 'rgba(20, 184, 166, 0.15)' },
|
||||||
|
{ borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.15)' },
|
||||||
|
{ borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.15)' },
|
||||||
|
{ borderColor: '#22c55e', backgroundColor: 'rgba(34, 197, 94, 0.15)' }
|
||||||
];
|
];
|
||||||
modelPriceStorageKey = 'cli-proxy-model-prices-v2';
|
modelPriceStorageKey = 'cli-proxy-model-prices-v2';
|
||||||
modelPrices = {};
|
modelPrices = {};
|
||||||
|
|||||||
28
i18n.js
28
i18n.js
@@ -224,6 +224,9 @@ const i18n = {
|
|||||||
'ai_providers.openai_models_fetch_error': '获取模型失败',
|
'ai_providers.openai_models_fetch_error': '获取模型失败',
|
||||||
'ai_providers.openai_models_fetch_back': '返回编辑',
|
'ai_providers.openai_models_fetch_back': '返回编辑',
|
||||||
'ai_providers.openai_models_fetch_apply': '添加所选模型',
|
'ai_providers.openai_models_fetch_apply': '添加所选模型',
|
||||||
|
'ai_providers.openai_models_search_label': '搜索模型',
|
||||||
|
'ai_providers.openai_models_search_placeholder': '按名称、别名或描述筛选',
|
||||||
|
'ai_providers.openai_models_search_empty': '没有匹配的模型,请更换关键字试试。',
|
||||||
'ai_providers.openai_models_fetch_invalid_url': '请先填写有效的 Base URL',
|
'ai_providers.openai_models_fetch_invalid_url': '请先填写有效的 Base URL',
|
||||||
'ai_providers.openai_models_fetch_added': '已添加 {count} 个新模型',
|
'ai_providers.openai_models_fetch_added': '已添加 {count} 个新模型',
|
||||||
'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
|
'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
|
||||||
@@ -460,7 +463,18 @@ const i18n = {
|
|||||||
'usage_stats.chart_line_label_1': '曲线 1',
|
'usage_stats.chart_line_label_1': '曲线 1',
|
||||||
'usage_stats.chart_line_label_2': '曲线 2',
|
'usage_stats.chart_line_label_2': '曲线 2',
|
||||||
'usage_stats.chart_line_label_3': '曲线 3',
|
'usage_stats.chart_line_label_3': '曲线 3',
|
||||||
|
'usage_stats.chart_line_label_4': '曲线 4',
|
||||||
|
'usage_stats.chart_line_label_5': '曲线 5',
|
||||||
|
'usage_stats.chart_line_label_6': '曲线 6',
|
||||||
|
'usage_stats.chart_line_label_7': '曲线 7',
|
||||||
|
'usage_stats.chart_line_label_8': '曲线 8',
|
||||||
|
'usage_stats.chart_line_label_9': '曲线 9',
|
||||||
'usage_stats.chart_line_hidden': '不显示',
|
'usage_stats.chart_line_hidden': '不显示',
|
||||||
|
'usage_stats.chart_line_actions_label': '曲线数量',
|
||||||
|
'usage_stats.chart_line_add': '增加曲线',
|
||||||
|
'usage_stats.chart_line_all': '全部',
|
||||||
|
'usage_stats.chart_line_delete': '删除曲线',
|
||||||
|
'usage_stats.chart_line_hint': '最多同时显示 9 条模型曲线',
|
||||||
'usage_stats.no_data': '暂无数据',
|
'usage_stats.no_data': '暂无数据',
|
||||||
'usage_stats.loading_error': '加载失败',
|
'usage_stats.loading_error': '加载失败',
|
||||||
'usage_stats.api_endpoint': 'API端点',
|
'usage_stats.api_endpoint': 'API端点',
|
||||||
@@ -843,6 +857,9 @@ const i18n = {
|
|||||||
'ai_providers.openai_models_fetch_error': 'Failed to fetch models',
|
'ai_providers.openai_models_fetch_error': 'Failed to fetch models',
|
||||||
'ai_providers.openai_models_fetch_back': 'Back to edit',
|
'ai_providers.openai_models_fetch_back': 'Back to edit',
|
||||||
'ai_providers.openai_models_fetch_apply': 'Add selected models',
|
'ai_providers.openai_models_fetch_apply': 'Add selected models',
|
||||||
|
'ai_providers.openai_models_search_label': 'Search models',
|
||||||
|
'ai_providers.openai_models_search_placeholder': 'Filter by name, alias, or description',
|
||||||
|
'ai_providers.openai_models_search_empty': 'No models match your search. Try a different keyword.',
|
||||||
'ai_providers.openai_models_fetch_invalid_url': 'Please enter a valid Base URL first',
|
'ai_providers.openai_models_fetch_invalid_url': 'Please enter a valid Base URL first',
|
||||||
'ai_providers.openai_models_fetch_added': '{count} new models added',
|
'ai_providers.openai_models_fetch_added': '{count} new models added',
|
||||||
'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
|
'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
|
||||||
@@ -1078,7 +1095,18 @@ const i18n = {
|
|||||||
'usage_stats.chart_line_label_1': 'Line 1',
|
'usage_stats.chart_line_label_1': 'Line 1',
|
||||||
'usage_stats.chart_line_label_2': 'Line 2',
|
'usage_stats.chart_line_label_2': 'Line 2',
|
||||||
'usage_stats.chart_line_label_3': 'Line 3',
|
'usage_stats.chart_line_label_3': 'Line 3',
|
||||||
|
'usage_stats.chart_line_label_4': 'Line 4',
|
||||||
|
'usage_stats.chart_line_label_5': 'Line 5',
|
||||||
|
'usage_stats.chart_line_label_6': 'Line 6',
|
||||||
|
'usage_stats.chart_line_label_7': 'Line 7',
|
||||||
|
'usage_stats.chart_line_label_8': 'Line 8',
|
||||||
|
'usage_stats.chart_line_label_9': 'Line 9',
|
||||||
'usage_stats.chart_line_hidden': 'Hide',
|
'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_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.no_data': 'No Data Available',
|
||||||
'usage_stats.loading_error': 'Loading Failed',
|
'usage_stats.loading_error': 'Loading Failed',
|
||||||
'usage_stats.api_endpoint': 'API Endpoint',
|
'usage_stats.api_endpoint': 'API Endpoint',
|
||||||
|
|||||||
127
index.html
127
index.html
@@ -958,24 +958,125 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 图表曲线选择 -->
|
<!-- 图表曲线选择 -->
|
||||||
<div class="usage-filter-bar">
|
<div class="usage-filter-bar" id="chart-line-bar">
|
||||||
<div class="usage-filter-group">
|
<div class="usage-filter-group usage-filter-actions">
|
||||||
|
<label data-i18n="usage_stats.chart_line_actions_label">曲线数量</label>
|
||||||
|
<div class="chart-line-actions">
|
||||||
|
<button type="button" class="btn btn-small" id="add-chart-line">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_add">增加曲线</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>
|
<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>
|
||||||
<div class="usage-filter-group">
|
<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>
|
<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>
|
||||||
<div class="usage-filter-group">
|
<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>
|
<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>
|
||||||
|
<div class="chart-line-control">
|
||||||
|
<select id="chart-line-select-3" class="model-filter-select chart-line-select" data-line-index="3" disabled>
|
||||||
|
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="3">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_delete">删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="4">
|
||||||
|
<label for="chart-line-select-4" data-i18n="usage_stats.chart_line_label_5">曲线 5</label>
|
||||||
|
<div class="chart-line-control">
|
||||||
|
<select id="chart-line-select-4" class="model-filter-select chart-line-select" data-line-index="4" disabled>
|
||||||
|
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="4">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_delete">删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="5">
|
||||||
|
<label for="chart-line-select-5" data-i18n="usage_stats.chart_line_label_6">曲线 6</label>
|
||||||
|
<div class="chart-line-control">
|
||||||
|
<select id="chart-line-select-5" class="model-filter-select chart-line-select" data-line-index="5" disabled>
|
||||||
|
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="5">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_delete">删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="6">
|
||||||
|
<label for="chart-line-select-6" data-i18n="usage_stats.chart_line_label_7">曲线 7</label>
|
||||||
|
<div class="chart-line-control">
|
||||||
|
<select id="chart-line-select-6" class="model-filter-select chart-line-select" data-line-index="6" disabled>
|
||||||
|
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="6">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_delete">删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="7">
|
||||||
|
<label for="chart-line-select-7" data-i18n="usage_stats.chart_line_label_8">曲线 8</label>
|
||||||
|
<div class="chart-line-control">
|
||||||
|
<select id="chart-line-select-7" class="model-filter-select chart-line-select" data-line-index="7" disabled>
|
||||||
|
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="7">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_delete">删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="8">
|
||||||
|
<label for="chart-line-select-8" data-i18n="usage_stats.chart_line_label_9">曲线 9</label>
|
||||||
|
<div class="chart-line-control">
|
||||||
|
<select id="chart-line-select-8" class="model-filter-select chart-line-select" data-line-index="8" disabled>
|
||||||
|
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="8">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="usage_stats.chart_line_delete">删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -128,25 +128,7 @@ export function getGeminiKeysFromConfig(config) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const geminiKeys = Array.isArray(config['gemini-api-key']) ? config['gemini-api-key'] : [];
|
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) {
|
export async function renderGeminiKeys(keys, keyStats = null) {
|
||||||
@@ -1152,6 +1134,10 @@ function ensureOpenAIModelDiscoveryCard(manager) {
|
|||||||
<button type="button" class="btn btn-secondary" id="openai-model-discovery-refresh">${i18n.t('ai_providers.openai_models_fetch_refresh')}</button>
|
<button type="button" class="btn btn-secondary" id="openai-model-discovery-refresh">${i18n.t('ai_providers.openai_models_fetch_refresh')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="openai-model-discovery-search">${i18n.t('ai_providers.openai_models_search_label')}</label>
|
||||||
|
<input type="text" id="openai-model-discovery-search" placeholder="${i18n.t('ai_providers.openai_models_search_placeholder')}">
|
||||||
|
</div>
|
||||||
<div id="openai-model-discovery-status" class="model-discovery-status"></div>
|
<div id="openai-model-discovery-status" class="model-discovery-status"></div>
|
||||||
<div id="openai-model-discovery-list" class="model-discovery-list"></div>
|
<div id="openai-model-discovery-list" class="model-discovery-list"></div>
|
||||||
<div class="modal-actions">
|
<div class="modal-actions">
|
||||||
@@ -1174,6 +1160,13 @@ function ensureOpenAIModelDiscoveryCard(manager) {
|
|||||||
bind('openai-model-discovery-cancel', () => manager.closeOpenAIModelDiscovery());
|
bind('openai-model-discovery-cancel', () => manager.closeOpenAIModelDiscovery());
|
||||||
bind('openai-model-discovery-refresh', () => manager.refreshOpenAIModelDiscovery());
|
bind('openai-model-discovery-refresh', () => manager.refreshOpenAIModelDiscovery());
|
||||||
bind('openai-model-discovery-apply', () => manager.applyOpenAIModelDiscoverySelection());
|
bind('openai-model-discovery-apply', () => manager.applyOpenAIModelDiscoverySelection());
|
||||||
|
const searchInput = document.getElementById('openai-model-discovery-search');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', (event) => {
|
||||||
|
const query = event?.target?.value || '';
|
||||||
|
manager.setOpenAIModelDiscoverySearch(query);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return overlay;
|
return overlay;
|
||||||
}
|
}
|
||||||
@@ -1185,10 +1178,30 @@ export function setOpenAIModelDiscoveryStatus(message = '', type = 'info') {
|
|||||||
status.className = `model-discovery-status ${type}`;
|
status.className = `model-discovery-status ${type}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function setOpenAIModelDiscoverySearch(query = '') {
|
||||||
|
if (!this.openAIModelDiscoveryContext) return;
|
||||||
|
const normalized = (query || '').trim();
|
||||||
|
this.openAIModelDiscoveryContext.modelSearchQuery = normalized;
|
||||||
|
const models = this.openAIModelDiscoveryContext.discoveredModels || [];
|
||||||
|
this.renderOpenAIModelDiscoveryList(models);
|
||||||
|
}
|
||||||
|
|
||||||
export function renderOpenAIModelDiscoveryList(models = []) {
|
export function renderOpenAIModelDiscoveryList(models = []) {
|
||||||
const list = document.getElementById('openai-model-discovery-list');
|
const list = document.getElementById('openai-model-discovery-list');
|
||||||
if (!list) return;
|
if (!list) return;
|
||||||
|
|
||||||
|
const context = this.openAIModelDiscoveryContext || {};
|
||||||
|
const filter = (context.modelSearchQuery || '').trim().toLowerCase();
|
||||||
|
const filtered = models
|
||||||
|
.map((model, index) => ({ model, index }))
|
||||||
|
.filter(({ model }) => {
|
||||||
|
if (!filter) return true;
|
||||||
|
const name = (model?.name || '').toLowerCase();
|
||||||
|
const alias = (model?.alias || '').toLowerCase();
|
||||||
|
const desc = (model?.description || '').toLowerCase();
|
||||||
|
return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
|
||||||
|
});
|
||||||
|
|
||||||
if (!models.length) {
|
if (!models.length) {
|
||||||
list.innerHTML = `
|
list.innerHTML = `
|
||||||
<div class="model-discovery-empty">
|
<div class="model-discovery-empty">
|
||||||
@@ -1199,10 +1212,20 @@ export function renderOpenAIModelDiscoveryList(models = []) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
list.innerHTML = models.map((model, index) => {
|
if (!filtered.length) {
|
||||||
const name = this.escapeHtml(model.name || '');
|
list.innerHTML = `
|
||||||
const alias = model.alias ? `<span class="model-discovery-alias">${this.escapeHtml(model.alias)}</span>` : '';
|
<div class="model-discovery-empty">
|
||||||
const desc = model.description ? `<div class="model-discovery-desc">${this.escapeHtml(model.description)}</div>` : '';
|
<i class="fas fa-search"></i>
|
||||||
|
<span>${i18n.t('ai_providers.openai_models_search_empty')}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
list.innerHTML = filtered.map(({ model, index }) => {
|
||||||
|
const name = this.escapeHtml(model?.name || '');
|
||||||
|
const alias = model?.alias ? `<span class="model-discovery-alias">${this.escapeHtml(model.alias)}</span>` : '';
|
||||||
|
const desc = model?.description ? `<div class="model-discovery-desc">${this.escapeHtml(model.description)}</div>` : '';
|
||||||
return `
|
return `
|
||||||
<label class="model-discovery-row">
|
<label class="model-discovery-row">
|
||||||
<input type="checkbox" class="model-discovery-checkbox" data-model-index="${index}">
|
<input type="checkbox" class="model-discovery-checkbox" data-model-index="${index}">
|
||||||
@@ -1244,13 +1267,18 @@ export function openOpenAIModelDiscovery(mode = 'new') {
|
|||||||
...context,
|
...context,
|
||||||
endpoint,
|
endpoint,
|
||||||
headers,
|
headers,
|
||||||
discoveredModels: []
|
discoveredModels: [],
|
||||||
|
modelSearchQuery: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
const urlInput = document.getElementById('openai-model-discovery-url');
|
const urlInput = document.getElementById('openai-model-discovery-url');
|
||||||
if (urlInput) {
|
if (urlInput) {
|
||||||
urlInput.value = endpoint;
|
urlInput.value = endpoint;
|
||||||
}
|
}
|
||||||
|
const searchInput = document.getElementById('openai-model-discovery-search');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
this.renderOpenAIModelDiscoveryList([]);
|
this.renderOpenAIModelDiscoveryList([]);
|
||||||
this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_loading'), 'info');
|
this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_loading'), 'info');
|
||||||
@@ -1688,6 +1716,7 @@ export const aiProvidersModule = {
|
|||||||
refreshOpenAIModelDiscovery,
|
refreshOpenAIModelDiscovery,
|
||||||
renderOpenAIModelDiscoveryList,
|
renderOpenAIModelDiscoveryList,
|
||||||
setOpenAIModelDiscoveryStatus,
|
setOpenAIModelDiscoveryStatus,
|
||||||
|
setOpenAIModelDiscoverySearch,
|
||||||
applyOpenAIModelDiscoverySelection,
|
applyOpenAIModelDiscoverySelection,
|
||||||
closeOpenAIModelDiscovery,
|
closeOpenAIModelDiscovery,
|
||||||
addModelField,
|
addModelField,
|
||||||
|
|||||||
@@ -1049,6 +1049,50 @@ export const authFilesModule = {
|
|||||||
return normalized;
|
return normalized;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
resolveOauthExcludedFromConfig(config = null) {
|
||||||
|
const sources = [];
|
||||||
|
if (config && typeof config === 'object') {
|
||||||
|
sources.push(config);
|
||||||
|
}
|
||||||
|
if (this.configCache && typeof this.configCache === 'object') {
|
||||||
|
if (this.configCache['oauth-excluded-models'] !== undefined) {
|
||||||
|
sources.push({ 'oauth-excluded-models': this.configCache['oauth-excluded-models'] });
|
||||||
|
}
|
||||||
|
if (this.configCache['__full__']) {
|
||||||
|
sources.push(this.configCache['__full__']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const source of sources) {
|
||||||
|
if (!source || typeof source !== 'object') continue;
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, 'oauth-excluded-models')) {
|
||||||
|
return {
|
||||||
|
map: this.normalizeOauthExcludedMap(source),
|
||||||
|
found: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { map: {}, found: false };
|
||||||
|
},
|
||||||
|
|
||||||
|
applyOauthExcludedFromConfig(config = null, options = {}) {
|
||||||
|
const { render = true } = options || {};
|
||||||
|
const { map, found } = this.resolveOauthExcludedFromConfig(config);
|
||||||
|
if (!found) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.oauthExcludedModels = map;
|
||||||
|
this._oauthExcludedLoading = false;
|
||||||
|
this.setOauthExcludedStatus('');
|
||||||
|
this.updateOauthExcludedButtonsState(false);
|
||||||
|
if (render) {
|
||||||
|
this.renderOauthExcludedModels();
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
getFilteredOauthExcludedMap(filterType = this.currentAuthFileFilter) {
|
getFilteredOauthExcludedMap(filterType = this.currentAuthFileFilter) {
|
||||||
const map = this.oauthExcludedModels || {};
|
const map = this.oauthExcludedModels || {};
|
||||||
if (!map || typeof map !== 'object') {
|
if (!map || typeof map !== 'object') {
|
||||||
@@ -1407,9 +1451,36 @@ export const authFilesModule = {
|
|||||||
this.renderOauthExcludedModels();
|
this.renderOauthExcludedModels();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data = await this.makeRequest('/oauth-excluded-models');
|
let targetMap = {};
|
||||||
this.oauthExcludedModels = this.normalizeOauthExcludedMap(data);
|
let hasData = false;
|
||||||
this.refreshOauthProviderOptions();
|
|
||||||
|
if (!forceRefresh) {
|
||||||
|
const { map, found } = this.resolveOauthExcludedFromConfig();
|
||||||
|
if (found) {
|
||||||
|
targetMap = map;
|
||||||
|
hasData = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasData) {
|
||||||
|
try {
|
||||||
|
const configSection = await this.getConfig('oauth-excluded-models', forceRefresh);
|
||||||
|
if (configSection !== undefined) {
|
||||||
|
targetMap = this.normalizeOauthExcludedMap(configSection);
|
||||||
|
hasData = true;
|
||||||
|
}
|
||||||
|
} catch (configError) {
|
||||||
|
console.warn('从配置获取 OAuth 排除列表失败,尝试回退接口:', configError);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasData) {
|
||||||
|
const data = await this.makeRequest('/oauth-excluded-models');
|
||||||
|
targetMap = this.normalizeOauthExcludedMap(data);
|
||||||
|
hasData = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.oauthExcludedModels = targetMap;
|
||||||
this.setOauthExcludedStatus('');
|
this.setOauthExcludedStatus('');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载 OAuth 排除列表失败:', error);
|
console.error('加载 OAuth 排除列表失败:', error);
|
||||||
@@ -1501,6 +1572,7 @@ export const authFilesModule = {
|
|||||||
}
|
}
|
||||||
this.events.on('data:config-loaded', async (event) => {
|
this.events.on('data:config-loaded', async (event) => {
|
||||||
const detail = event?.detail || {};
|
const detail = event?.detail || {};
|
||||||
|
const config = detail.config || {};
|
||||||
const keyStats = detail.keyStats || null;
|
const keyStats = detail.keyStats || null;
|
||||||
try {
|
try {
|
||||||
await this.loadAuthFiles(keyStats);
|
await this.loadAuthFiles(keyStats);
|
||||||
@@ -1508,7 +1580,10 @@ export const authFilesModule = {
|
|||||||
console.error('加载认证文件失败:', error);
|
console.error('加载认证文件失败:', error);
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
await this.loadOauthExcludedModels(true);
|
const applied = this.applyOauthExcludedFromConfig(config, { render: true });
|
||||||
|
if (!applied) {
|
||||||
|
await this.loadOauthExcludedModels(true);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载 OAuth 排除列表失败:', error);
|
console.error('加载 OAuth 排除列表失败:', error);
|
||||||
}
|
}
|
||||||
@@ -1518,7 +1593,9 @@ export const authFilesModule = {
|
|||||||
const detail = event?.detail || {};
|
const detail = event?.detail || {};
|
||||||
this.updateOauthExcludedButtonsState(false);
|
this.updateOauthExcludedButtonsState(false);
|
||||||
if (detail.isConnected) {
|
if (detail.isConnected) {
|
||||||
this.loadOauthExcludedModels(true);
|
if (!this.applyOauthExcludedFromConfig(null, { render: true })) {
|
||||||
|
this.renderOauthExcludedModels();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.renderOauthExcludedModels();
|
this.renderOauthExcludedModels();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
const DEFAULT_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices-v2';
|
const DEFAULT_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices-v2';
|
||||||
const LEGACY_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices';
|
const LEGACY_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices';
|
||||||
const TOKENS_PER_PRICE_UNIT = 1_000_000;
|
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密钥的统计信息
|
// 获取API密钥的统计信息
|
||||||
export async function getKeyStats(usageData = null) {
|
export async function getKeyStats(usageData = null) {
|
||||||
@@ -214,23 +217,136 @@ export function getModelNamesFromUsage(usage) {
|
|||||||
return Array.from(names).sort((a, b) => a.localeCompare(b));
|
return Array.from(names).sort((a, b) => a.localeCompare(b));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getChartLineMaxCount() {
|
||||||
|
const idCount = Array.isArray(this.chartLineSelectIds) ? this.chartLineSelectIds.length : 0;
|
||||||
|
const configuredMax = Number(this.chartLineMaxCount);
|
||||||
|
const fallback = idCount || DEFAULT_CHART_LINE_COUNT;
|
||||||
|
const resolvedMax = Number.isFinite(configuredMax) ? configuredMax : fallback;
|
||||||
|
if (idCount > 0) {
|
||||||
|
return Math.max(MIN_CHART_LINE_COUNT, Math.min(resolvedMax, idCount));
|
||||||
|
}
|
||||||
|
return Math.max(MIN_CHART_LINE_COUNT, resolvedMax);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getVisibleChartLineCount() {
|
||||||
|
const maxCount = this.getChartLineMaxCount();
|
||||||
|
const stored = Number(this.chartLineVisibleCount);
|
||||||
|
const base = Number.isFinite(stored)
|
||||||
|
? stored
|
||||||
|
: (Array.isArray(this.chartLineSelections) ? this.chartLineSelections.length : DEFAULT_CHART_LINE_COUNT);
|
||||||
|
const resolved = Math.min(Math.max(base, MIN_CHART_LINE_COUNT), maxCount);
|
||||||
|
this.chartLineVisibleCount = resolved;
|
||||||
|
return resolved;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ensureChartLineSelectionLength(targetLength = null) {
|
||||||
|
const maxCount = this.getChartLineMaxCount();
|
||||||
|
const desiredLength = Math.min(
|
||||||
|
Math.max(targetLength ?? this.getVisibleChartLineCount(), MIN_CHART_LINE_COUNT),
|
||||||
|
maxCount
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!Array.isArray(this.chartLineSelections)) {
|
||||||
|
this.chartLineSelections = Array(desiredLength).fill('none');
|
||||||
|
return this.chartLineSelections;
|
||||||
|
}
|
||||||
|
|
||||||
|
const trimmed = this.chartLineSelections.slice(0, maxCount);
|
||||||
|
if (trimmed.length < desiredLength) {
|
||||||
|
this.chartLineSelections = [...trimmed, ...Array(desiredLength - trimmed.length).fill('none')];
|
||||||
|
} else if (trimmed.length > desiredLength) {
|
||||||
|
this.chartLineSelections = trimmed.slice(0, desiredLength);
|
||||||
|
} else {
|
||||||
|
this.chartLineSelections = trimmed;
|
||||||
|
}
|
||||||
|
return this.chartLineSelections;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateChartLineControlsUI() {
|
||||||
|
const maxCount = this.getChartLineMaxCount();
|
||||||
|
const visibleCount = this.getVisibleChartLineCount();
|
||||||
|
const counter = document.getElementById('chart-line-count');
|
||||||
|
if (counter) {
|
||||||
|
counter.textContent = `${visibleCount}/${maxCount}`;
|
||||||
|
}
|
||||||
|
const addBtn = document.getElementById('add-chart-line');
|
||||||
|
if (addBtn) {
|
||||||
|
addBtn.disabled = visibleCount >= maxCount;
|
||||||
|
}
|
||||||
|
const deleteButtons = document.querySelectorAll('.chart-line-delete');
|
||||||
|
if (deleteButtons.length) {
|
||||||
|
deleteButtons.forEach(button => {
|
||||||
|
const group = button.closest('.chart-line-group');
|
||||||
|
const index = Number.parseInt(button.getAttribute('data-line-index'), 10);
|
||||||
|
const isVisible = group
|
||||||
|
? !group.classList.contains('chart-line-hidden')
|
||||||
|
: (Number.isFinite(index) ? index < visibleCount : true);
|
||||||
|
button.disabled = visibleCount <= MIN_CHART_LINE_COUNT || !isVisible;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setChartLineVisibleCount(count) {
|
||||||
|
const maxCount = this.getChartLineMaxCount();
|
||||||
|
const nextCount = Math.min(Math.max(count, MIN_CHART_LINE_COUNT), maxCount);
|
||||||
|
const current = this.getVisibleChartLineCount();
|
||||||
|
if (nextCount === current) {
|
||||||
|
this.updateChartLineControlsUI();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.chartLineVisibleCount = nextCount;
|
||||||
|
this.ensureChartLineSelectionLength(nextCount);
|
||||||
|
this.updateChartLineSelectors(this.currentUsageData);
|
||||||
|
this.refreshChartsForSelections();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function changeChartLineCount(delta = 0) {
|
||||||
|
const current = this.getVisibleChartLineCount();
|
||||||
|
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) {
|
export function updateChartLineSelectors(usage) {
|
||||||
const modelNames = this.getModelNamesFromUsage(usage);
|
const modelNames = this.getModelNamesFromUsage(usage);
|
||||||
const selectors = this.chartLineSelectIds
|
const selectors = this.chartLineSelectIds
|
||||||
.map(id => document.getElementById(id))
|
.map(id => document.getElementById(id))
|
||||||
.filter(Boolean);
|
.filter(Boolean);
|
||||||
|
|
||||||
|
const availableCount = selectors.length || this.getChartLineMaxCount();
|
||||||
|
const visibleCount = Math.min(this.getVisibleChartLineCount(), availableCount);
|
||||||
|
this.chartLineVisibleCount = visibleCount;
|
||||||
|
this.ensureChartLineSelectionLength(visibleCount);
|
||||||
|
const wasInitialized = this.chartLineSelectionsInitialized === true;
|
||||||
|
|
||||||
if (!selectors.length) {
|
if (!selectors.length) {
|
||||||
this.chartLineSelections = ['none', 'none', 'none'];
|
this.chartLineSelections = Array(visibleCount).fill('none');
|
||||||
|
this.chartLineSelectionsInitialized = false;
|
||||||
|
this.updateChartLineControlsUI();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const optionsFragment = () => {
|
const optionsFragment = () => {
|
||||||
const fragment = document.createDocumentFragment();
|
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 => {
|
modelNames.forEach(name => {
|
||||||
const option = document.createElement('option');
|
const option = document.createElement('option');
|
||||||
option.value = name;
|
option.value = name;
|
||||||
@@ -241,57 +357,82 @@ export function updateChartLineSelectors(usage) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const hasModels = modelNames.length > 0;
|
const hasModels = modelNames.length > 0;
|
||||||
selectors.forEach(select => {
|
selectors.forEach((select, index) => {
|
||||||
|
const group = select.closest('.chart-line-group');
|
||||||
|
const isVisible = index < visibleCount;
|
||||||
|
if (group) {
|
||||||
|
group.classList.toggle('chart-line-hidden', !isVisible);
|
||||||
|
}
|
||||||
|
const deleteBtn = group ? group.querySelector('.chart-line-delete') : null;
|
||||||
select.innerHTML = '';
|
select.innerHTML = '';
|
||||||
select.appendChild(optionsFragment());
|
select.appendChild(optionsFragment());
|
||||||
select.disabled = !hasModels;
|
select.disabled = !isVisible;
|
||||||
|
if (deleteBtn) {
|
||||||
|
deleteBtn.disabled = !isVisible || visibleCount <= MIN_CHART_LINE_COUNT;
|
||||||
|
}
|
||||||
|
if (!isVisible) {
|
||||||
|
select.value = ALL_MODELS_VALUE;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!hasModels) {
|
if (!hasModels) {
|
||||||
this.chartLineSelections = ['none', 'none', 'none'];
|
this.chartLineSelections = Array(visibleCount).fill(ALL_MODELS_VALUE);
|
||||||
selectors.forEach(select => {
|
this.chartLineSelectionsInitialized = false;
|
||||||
select.value = 'none';
|
selectors.forEach((select, index) => {
|
||||||
|
const group = select.closest('.chart-line-group');
|
||||||
|
if (group) {
|
||||||
|
group.classList.toggle('chart-line-hidden', index >= visibleCount);
|
||||||
|
}
|
||||||
|
select.value = ALL_MODELS_VALUE;
|
||||||
});
|
});
|
||||||
|
this.updateChartLineControlsUI();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const nextSelections = Array.isArray(this.chartLineSelections)
|
const nextSelections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
|
||||||
? [...this.chartLineSelections]
|
|
||||||
: ['none', 'none', 'none'];
|
|
||||||
|
|
||||||
const validNames = new Set(modelNames);
|
const validNames = new Set([...modelNames, ALL_MODELS_VALUE]);
|
||||||
let hasActiveSelection = false;
|
let hasActiveSelection = false;
|
||||||
for (let i = 0; i < nextSelections.length; i++) {
|
for (let i = 0; i < nextSelections.length; i++) {
|
||||||
const selection = nextSelections[i];
|
const selection = nextSelections[i];
|
||||||
if (selection && selection !== 'none' && !validNames.has(selection)) {
|
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;
|
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) => {
|
modelNames.slice(0, nextSelections.length).forEach((name, index) => {
|
||||||
nextSelections[index] = name;
|
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;
|
this.chartLineSelections = nextSelections;
|
||||||
selectors.forEach((select, index) => {
|
selectors.forEach((select, index) => {
|
||||||
const value = this.chartLineSelections[index] || 'none';
|
const value = this.chartLineSelections[index] || ALL_MODELS_VALUE;
|
||||||
select.value = value;
|
select.value = index < visibleCount ? value : ALL_MODELS_VALUE;
|
||||||
});
|
});
|
||||||
|
this.chartLineSelectionsInitialized = hasModels;
|
||||||
|
this.updateChartLineControlsUI();
|
||||||
}
|
}
|
||||||
|
|
||||||
export function handleChartLineSelectionChange(index, value) {
|
export function handleChartLineSelectionChange(index, value) {
|
||||||
if (!Array.isArray(this.chartLineSelections)) {
|
const visibleCount = this.getVisibleChartLineCount();
|
||||||
this.chartLineSelections = ['none', 'none', 'none'];
|
if (index < 0 || index >= visibleCount) {
|
||||||
}
|
|
||||||
if (index < 0 || index >= this.chartLineSelections.length) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const normalized = value || 'none';
|
this.ensureChartLineSelectionLength(visibleCount);
|
||||||
|
const normalized = (value && value !== 'none') ? value : ALL_MODELS_VALUE;
|
||||||
if (this.chartLineSelections[index] === normalized) {
|
if (this.chartLineSelections[index] === normalized) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -324,10 +465,9 @@ export function refreshChartsForSelections() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function getActiveChartLineSelections() {
|
export function getActiveChartLineSelections() {
|
||||||
if (!Array.isArray(this.chartLineSelections)) {
|
const visibleCount = this.getVisibleChartLineCount();
|
||||||
this.chartLineSelections = ['none', 'none', 'none'];
|
const selections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
|
||||||
}
|
return selections
|
||||||
return this.chartLineSelections
|
|
||||||
.map((value, index) => ({ model: value, index }))
|
.map((value, index) => ({ model: value, index }))
|
||||||
.filter(item => item.model && item.model !== 'none');
|
.filter(item => item.model && item.model !== 'none');
|
||||||
}
|
}
|
||||||
@@ -761,11 +901,37 @@ export function buildChartDataForMetric(period = 'day', metric = 'requests') {
|
|||||||
const labels = baseSeries?.labels || [];
|
const labels = baseSeries?.labels || [];
|
||||||
const dataByModel = baseSeries?.dataByModel || new Map();
|
const dataByModel = baseSeries?.dataByModel || new Map();
|
||||||
const activeSelections = this.getActiveChartLineSelections();
|
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 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[0];
|
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 {
|
return {
|
||||||
label: selection.model,
|
label,
|
||||||
data: values,
|
data: values,
|
||||||
borderColor: style.borderColor,
|
borderColor: style.borderColor,
|
||||||
backgroundColor: style.backgroundColor,
|
backgroundColor: style.backgroundColor,
|
||||||
@@ -1361,6 +1527,13 @@ export const usageModule = {
|
|||||||
loadUsageStats,
|
loadUsageStats,
|
||||||
updateUsageOverview,
|
updateUsageOverview,
|
||||||
getModelNamesFromUsage,
|
getModelNamesFromUsage,
|
||||||
|
getChartLineMaxCount,
|
||||||
|
getVisibleChartLineCount,
|
||||||
|
ensureChartLineSelectionLength,
|
||||||
|
updateChartLineControlsUI,
|
||||||
|
setChartLineVisibleCount,
|
||||||
|
changeChartLineCount,
|
||||||
|
removeChartLine,
|
||||||
updateChartLineSelectors,
|
updateChartLineSelectors,
|
||||||
handleChartLineSelectionChange,
|
handleChartLineSelectionChange,
|
||||||
refreshChartsForSelections,
|
refreshChartsForSelections,
|
||||||
|
|||||||
44
styles.css
44
styles.css
@@ -1385,7 +1385,6 @@ textarea::placeholder {
|
|||||||
#config-management .card {
|
#config-management .card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: calc(100vh - 360px);
|
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3098,12 +3097,55 @@ input:checked+.slider:before {
|
|||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.usage-filter-actions {
|
||||||
|
min-width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
.usage-filter-group label {
|
.usage-filter-group label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chart-line-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-line-count {
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-line-hint {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
.model-filter-select {
|
.model-filter-select {
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|||||||
Reference in New Issue
Block a user