Compare commits

...

20 Commits

Author SHA1 Message Date
Supra4E8C
ba6a461a40 feat: implement available models loading functionality with UI integration, status updates, and internationalization support 2025-12-05 02:01:21 +08:00
Supra4E8C
0e01ee0456 feat: add log search functionality with UI input, filtering logic, and internationalization support 2025-12-04 23:42:13 +08:00
Supra4E8C
d235cfde81 refactor: simplify gemini key retrieval logic by removing legacy key handling 2025-12-04 01:07:59 +08:00
Supra4E8C
4d419448e8 feat: implement chart line deletion functionality with UI controls and internationalization support 2025-12-04 00:55:24 +08:00
Supra4E8C
63c0e5ffe2 refactor: remove min-height from config management card for improved layout flexibility 2025-12-03 23:38:22 +08:00
Supra4E8C
79b73dd3a0 feat: implement dynamic chart line management with UI controls, internationalization, and enhanced data handling 2025-12-03 18:51:31 +08:00
Supra4E8C
9e41fa0aa7 feat: add model search functionality with UI components and internationalization support 2025-12-03 18:13:23 +08:00
Supra4E8C
a607b8d9c1 feat: implement OAuth excluded models configuration handling with fallback data loading and UI updates 2025-12-03 18:07:08 +08:00
Supra4E8C
9a540791f5 refactor: adjust YAML editor dimensions and layout for improved consistency in config management 2025-12-03 12:17:38 +08:00
Supra4E8C
b026285e65 feat: enhance provider item display with improved base URL styling and layout adjustments 2025-12-03 00:53:34 +08:00
Supra4E8C
fc8b02f58e feat: add error log selection and download functionality with UI updates and internationalization support 2025-12-03 00:49:27 +08:00
Supra4E8C
c77527cd13 feat: enhance excluded models management with UI components, internationalization, and data handling 2025-12-03 00:27:45 +08:00
Supra4E8C
d3630373ed feat: add OAuth excluded models management with UI integration and internationalization support 2025-12-03 00:01:16 +08:00
Supra4E8C
0114dad58d feat: implement endpoint cost calculation in API stats table with pricing support 2025-11-27 19:49:06 +08:00
Supra4E8C
ca14ab4917 feat: add cost period selection and update cost chart functionality 2025-11-27 19:39:59 +08:00
Supra4E8C
fd1956cb94 feat: implement model pricing functionality with UI elements, storage management, and cost calculation 2025-11-27 19:19:17 +08:00
Supra4E8C
b5d8d003e1 docs: update usage instructions in README files for clarity on static file access after build 2025-11-27 18:16:10 +08:00
Supra4E8C
96961d7b79 feat: add cached and reasoning token metrics with internationalization support 2025-11-27 18:04:47 +08:00
Supra4E8C
5415a61ad7 feat: add RPM and TPM metrics for the last 30 minutes with internationalization support 2025-11-27 17:59:47 +08:00
Supra4E8C
63a8b32c26 feat: expose manager instance to global scope for inline event handlers 2025-11-27 12:26:30 +08:00
16 changed files with 3111 additions and 193 deletions

View File

@@ -27,8 +27,8 @@ Since 6.0.19 the WebUI ships with the main program; access it via `/management.h
1) **After CLI Proxy API is running (recommended)**
Visit `http://your-server:8317/management.html`.
2) **Direct static use**
Open `index.html` (or the bundled `dist/index.html` from `npm run build`) directly in your browser.
2) **Direct static use after build**
The single file `dist/index.html` generated by `npm run build`
3) **Local server**
```bash

View File

@@ -27,8 +27,8 @@
1) **主程序启动后使用(推荐)**
访问 `http://您的服务器:8317/management.html`
2) **直接静态打开**
浏览器打开 `index.html`(或 `npm run build` 生成的 `dist/index.html` 单文件)。
2) **构建后直接静态打开**
`npm run build` 生成的 `dist/index.html` 单文件
3) **本地服务器**
```bash

106
app.js
View File

@@ -14,7 +14,7 @@ import { aiProvidersModule } from './src/modules/ai-providers.js';
// 工具函数导入
import { escapeHtml } from './src/utils/html.js';
import { maskApiKey } from './src/utils/string.js';
import { maskApiKey, formatFileSize } from './src/utils/string.js';
import { normalizeArrayResponse } from './src/utils/array.js';
import { debounce } from './src/utils/dom.js';
import {
@@ -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;
@@ -97,6 +102,10 @@ class CLIProxyManager {
this.authFilesPageSizeKey = STORAGE_KEY_AUTH_FILES_PAGE_SIZE;
this.loadAuthFilePreferences();
// OAuth 模型排除列表状态
this.oauthExcludedModels = {};
this._oauthExcludedLoading = false;
// Vertex AI credential import state
this.vertexImportState = {
file: null,
@@ -270,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());
@@ -277,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');
@@ -325,13 +338,18 @@ class CLIProxyManager {
// 日志查看
const refreshLogs = document.getElementById('refresh-logs');
const selectErrorLog = document.getElementById('select-error-log');
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());
}
if (selectErrorLog) {
selectErrorLog.addEventListener('click', () => this.openErrorLogsModal());
}
if (downloadLogs) {
downloadLogs.addEventListener('click', () => this.downloadLogs());
}
@@ -341,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');
@@ -385,6 +411,17 @@ class CLIProxyManager {
this.bindAuthFilesPageSizeControl();
this.syncAuthFileControls();
// OAuth 排除列表
const oauthExcludedAdd = document.getElementById('oauth-excluded-add');
const oauthExcludedRefresh = document.getElementById('oauth-excluded-refresh');
if (oauthExcludedAdd) {
oauthExcludedAdd.addEventListener('click', () => this.openOauthExcludedEditor());
}
if (oauthExcludedRefresh) {
oauthExcludedRefresh.addEventListener('click', () => this.loadOauthExcludedModels(true));
}
// Vertex AI credential import
const vertexSelectFile = document.getElementById('vertex-select-file');
const vertexFileInput = document.getElementById('vertex-file-input');
@@ -503,7 +540,14 @@ class CLIProxyManager {
const requestsDayBtn = document.getElementById('requests-day-btn');
const tokensHourBtn = document.getElementById('tokens-hour-btn');
const tokensDayBtn = document.getElementById('tokens-day-btn');
const costHourBtn = document.getElementById('cost-hour-btn');
const costDayBtn = document.getElementById('cost-day-btn');
const addChartLineBtn = document.getElementById('add-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');
if (refreshUsageStats) {
refreshUsageStats.addEventListener('click', () => this.loadUsageStats());
@@ -520,6 +564,15 @@ class CLIProxyManager {
if (tokensDayBtn) {
tokensDayBtn.addEventListener('click', () => this.switchTokensPeriod('day'));
}
if (costHourBtn) {
costHourBtn.addEventListener('click', () => this.switchCostPeriod('hour'));
}
if (costDayBtn) {
costDayBtn.addEventListener('click', () => this.switchCostPeriod('day'));
}
if (addChartLineBtn) {
addChartLineBtn.addEventListener('click', () => this.changeChartLineCount(1));
}
if (chartLineSelects.length) {
chartLineSelects.forEach(select => {
select.addEventListener('change', (event) => {
@@ -528,6 +581,27 @@ 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) => {
event.preventDefault();
this.handleModelPriceSubmit();
});
}
if (resetModelPricesBtn) {
resetModelPricesBtn.addEventListener('click', () => this.handleModelPriceReset());
}
if (modelPriceSelect) {
modelPriceSelect.addEventListener('change', () => this.prefillModelPriceInputs());
}
// 模态框
const closeBtn = document.querySelector('.close');
@@ -617,14 +691,27 @@ class CLIProxyManager {
// 使用统计状态
requestsChart = null;
tokensChart = null;
costChart = null;
currentUsageData = null;
chartLineSelections = ['none', 'none', 'none'];
chartLineSelectIds = ['chart-line-select-0', 'chart-line-select-1', 'chart-line-select-2'];
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)' },
{ 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';
modelPrices = {};
modelPriceInitialized = false;
showModal() {
const modal = document.getElementById('modal');
@@ -663,12 +750,22 @@ Object.assign(
// 将工具函数绑定到原型上,供模块使用
CLIProxyManager.prototype.escapeHtml = escapeHtml;
CLIProxyManager.prototype.maskApiKey = maskApiKey;
CLIProxyManager.prototype.formatFileSize = formatFileSize;
CLIProxyManager.prototype.normalizeArrayResponse = normalizeArrayResponse;
CLIProxyManager.prototype.debounce = debounce;
// 全局管理器实例
let manager;
// 让内联事件处理器可以访问到 manager 实例
function exposeManagerInstance(instance) {
if (typeof window !== 'undefined') {
window.manager = instance;
} else if (typeof globalThis !== 'undefined') {
globalThis.manager = instance;
}
}
// 尝试自动加载根目录 Logo支持多种常见文件名/扩展名)
function setupSiteLogo() {
const img = document.getElementById('site-logo');
@@ -723,4 +820,5 @@ document.addEventListener('DOMContentLoaded', () => {
setupSiteLogo();
manager = new CLIProxyManager();
exposeManagerInstance(manager);
});

View File

@@ -169,42 +169,44 @@ function build() {
console.log(`使用版本号: ${version}`);
html = html.replace(/__VERSION__/g, version);
html = html.replace(
'<link rel="stylesheet" href="styles.css">',
`<style>
${css}
</style>`
);
html = html.replace(
'<link rel="stylesheet" href="styles.css">',
() => `<style>
${css}
</style>`
);
html = html.replace(
'<script src="i18n.js"></script>',
() => `<script>
${i18n}
</script>`
);
html = html.replace(
'<script src="i18n.js"></script>',
`<script>
${i18n}
</script>`
);
const scriptTagRegex = /<script[^>]*src="app\.js"[^>]*><\/script>/i;
if (scriptTagRegex.test(html)) {
html = html.replace(
scriptTagRegex,
`<script>
${app}
</script>`
);
const scriptTagRegex = /<script[^>]*src="app\.js"[^>]*><\/script>/i;
if (scriptTagRegex.test(html)) {
html = html.replace(
scriptTagRegex,
() => `<script>
${app}
</script>`
);
} else {
console.warn('未找到 app.js 脚本标签,未内联应用代码。');
}
const logoDataUrl = loadLogoDataUrl();
if (logoDataUrl) {
const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
if (html.includes('</body>')) {
html = html.replace('</body>', `${logoScript}\n</body>`);
} else {
html += `\n${logoScript}`;
}
} else {
console.warn('未找到可内联的 Logo 文件,将保持运行时加载。');
const logoDataUrl = loadLogoDataUrl();
if (logoDataUrl) {
const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
const closingBodyTag = '</body>';
const closingBodyIndex = html.lastIndexOf(closingBodyTag);
if (closingBodyIndex !== -1) {
html = `${html.slice(0, closingBodyIndex)}${logoScript}\n${closingBodyTag}${html.slice(closingBodyIndex + closingBodyTag.length)}`;
} else {
html += `\n${logoScript}`;
}
} else {
console.warn('未找到可内联的 Logo 文件,将保持运行时加载。');
}
const outputPath = path.join(distDir, 'index.html');

194
i18n.js
View File

@@ -94,7 +94,7 @@ const i18n = {
'nav.usage_stats': '使用统计',
'nav.config_management': '配置管理',
'nav.logs': '日志查看',
'nav.system_info': '系统信息',
'nav.system_info': '管理中心信息',
// 基础设置
'basic_settings.title': '基础设置',
@@ -149,6 +149,10 @@ const i18n = {
'ai_providers.gemini_edit_modal_title': '编辑Gemini API密钥',
'ai_providers.gemini_edit_modal_key_label': 'API密钥:',
'ai_providers.gemini_delete_confirm': '确定要删除这个Gemini密钥吗',
'ai_providers.excluded_models_label': '排除的模型 (可选):',
'ai_providers.excluded_models_placeholder': '用逗号或换行分隔,例如: gemini-1.5-pro, gemini-1.5-flash',
'ai_providers.excluded_models_hint': '留空表示不过滤;保存时会自动去重并忽略空白。',
'ai_providers.excluded_models_count': '排除 {count} 个模型',
'ai_providers.codex_title': 'Codex API 配置',
'ai_providers.codex_add_button': '添加配置',
@@ -220,6 +224,9 @@ const i18n = {
'ai_providers.openai_models_fetch_error': '获取模型失败',
'ai_providers.openai_models_fetch_back': '返回编辑',
'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_added': '已添加 {count} 个新模型',
'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
@@ -306,6 +313,40 @@ const i18n = {
'vertex_import.result_location': '区域',
'vertex_import.result_file': '存储文件',
// OAuth 排除模型
'oauth_excluded.title': 'OAuth 排除列表',
'oauth_excluded.description': '按提供商分列展示,点击卡片编辑或删除;支持 * 通配符,范围跟随上方的配置文件过滤标签。',
'oauth_excluded.add': '新增排除',
'oauth_excluded.add_title': '新增提供商排除列表',
'oauth_excluded.edit_title': '编辑 {provider} 的排除列表',
'oauth_excluded.refresh': '刷新',
'oauth_excluded.refreshing': '刷新中...',
'oauth_excluded.provider_label': '提供商',
'oauth_excluded.provider_auto': '跟随当前过滤',
'oauth_excluded.provider_placeholder': '例如 gemini-cli / openai',
'oauth_excluded.provider_hint': '默认选中当前筛选的提供商,也可直接输入或选择其他名称。',
'oauth_excluded.models_label': '排除的模型',
'oauth_excluded.models_placeholder': 'gpt-4.1-mini\n*-preview',
'oauth_excluded.models_hint': '逗号或换行分隔;留空保存将删除该提供商记录;支持 * 通配符。',
'oauth_excluded.save': '保存/更新',
'oauth_excluded.saving': '正在保存...',
'oauth_excluded.save_success': '排除列表已更新',
'oauth_excluded.save_failed': '更新排除列表失败',
'oauth_excluded.delete': '删除提供商',
'oauth_excluded.delete_confirm': '确定要删除 {provider} 的排除列表吗?',
'oauth_excluded.delete_success': '已删除该提供商的排除列表',
'oauth_excluded.delete_failed': '删除排除列表失败',
'oauth_excluded.deleting': '正在删除...',
'oauth_excluded.no_models': '未配置排除模型',
'oauth_excluded.model_count': '排除 {count} 个模型',
'oauth_excluded.list_empty_all': '暂无任何提供商的排除列表,点击“新增排除”创建。',
'oauth_excluded.list_empty_filtered': '当前筛选下没有排除项,点击“新增排除”添加。',
'oauth_excluded.disconnected': '请先连接服务器以查看排除列表',
'oauth_excluded.load_failed': '加载排除列表失败',
'oauth_excluded.provider_required': '请先填写提供商名称',
'oauth_excluded.scope_all': '当前范围:全局(显示所有提供商)',
'oauth_excluded.scope_provider': '当前范围:{provider}',
// Codex OAuth
'auth_login.codex_oauth_title': 'Codex OAuth',
@@ -409,6 +450,10 @@ const i18n = {
'usage_stats.success_requests': '成功请求',
'usage_stats.failed_requests': '失败请求',
'usage_stats.total_tokens': '总Token数',
'usage_stats.cached_tokens': '缓存 Token 数',
'usage_stats.reasoning_tokens': '思考 Token 数',
'usage_stats.rpm_30m': 'RPM近30分钟',
'usage_stats.tpm_30m': 'TPM近30分钟',
'usage_stats.requests_trend': '请求趋势',
'usage_stats.tokens_trend': 'Token 使用趋势',
'usage_stats.api_details': 'API 详细统计',
@@ -418,7 +463,18 @@ const i18n = {
'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_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_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.loading_error': '加载失败',
'usage_stats.api_endpoint': 'API端点',
@@ -426,6 +482,25 @@ const i18n = {
'usage_stats.tokens_count': 'Token数量',
'usage_stats.models': '模型统计',
'usage_stats.success_rate': '成功率',
'usage_stats.total_cost': '总花费',
'usage_stats.total_cost_hint': '基于已设置的模型单价',
'usage_stats.model_price_title': '模型价格',
'usage_stats.model_price_reset': '清除价格',
'usage_stats.model_price_model_label': '选择模型',
'usage_stats.model_price_select_placeholder': '选择模型',
'usage_stats.model_price_select_hint': '模型列表来自使用统计明细',
'usage_stats.model_price_prompt': '提示价格 ($/1M tokens)',
'usage_stats.model_price_completion': '补全价格 ($/1M tokens)',
'usage_stats.model_price_save': '保存价格',
'usage_stats.model_price_empty': '暂未设置任何模型价格',
'usage_stats.model_price_model': '模型',
'usage_stats.model_price_saved': '模型价格已保存',
'usage_stats.model_price_model_required': '请选择要设置价格的模型',
'usage_stats.cost_trend': '花费统计',
'usage_stats.cost_axis_label': '花费 ($)',
'usage_stats.cost_need_price': '请先设置模型价格',
'usage_stats.cost_need_usage': '暂无使用数据,无法计算花费',
'usage_stats.cost_no_data': '没有可计算的花费数据',
'stats.success': '成功',
'stats.failure': '失败',
@@ -434,6 +509,15 @@ const i18n = {
'logs.refresh_button': '刷新日志',
'logs.clear_button': '清空日志',
'logs.download_button': '下载日志',
'logs.error_log_button': '选择错误日志',
'logs.error_logs_modal_title': '错误请求日志',
'logs.error_logs_description': '请选择要下载的错误请求日志文件(仅在关闭请求日志时生成)。',
'logs.error_logs_empty': '暂无错误请求日志文件',
'logs.error_logs_load_error': '加载错误日志列表失败',
'logs.error_logs_size': '大小',
'logs.error_logs_modified': '最后修改',
'logs.error_logs_download': '下载',
'logs.error_log_download_success': '错误日志下载成功',
'logs.empty_title': '暂无日志记录',
'logs.empty_desc': '当启用"日志记录到文件"功能后,日志将显示在这里',
'logs.log_content': '日志内容',
@@ -445,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',
@@ -470,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': '配置状态:',
@@ -479,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': '调试设置已更新',
@@ -643,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',
@@ -698,6 +791,10 @@ const i18n = {
'ai_providers.gemini_edit_modal_title': 'Edit Gemini API Key',
'ai_providers.gemini_edit_modal_key_label': 'API Key:',
'ai_providers.gemini_delete_confirm': 'Are you sure you want to delete this Gemini key?',
'ai_providers.excluded_models_label': 'Excluded models (optional):',
'ai_providers.excluded_models_placeholder': 'Comma or newline separated, e.g. gemini-1.5-pro, gemini-1.5-flash',
'ai_providers.excluded_models_hint': 'Leave empty to allow all models; values are trimmed and deduplicated automatically.',
'ai_providers.excluded_models_count': 'Excluding {count} models',
'ai_providers.codex_title': 'Codex API Configuration',
'ai_providers.codex_add_button': 'Add Configuration',
@@ -769,6 +866,9 @@ const i18n = {
'ai_providers.openai_models_fetch_error': 'Failed to fetch models',
'ai_providers.openai_models_fetch_back': 'Back to edit',
'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_added': '{count} new models added',
'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
@@ -855,6 +955,40 @@ const i18n = {
'vertex_import.result_location': 'Region',
'vertex_import.result_file': 'Persisted file',
// OAuth excluded models
'oauth_excluded.title': 'OAuth Excluded Models',
'oauth_excluded.description': 'Per-provider exclusions are shown as cards; click edit to adjust. Wildcards * are supported and the scope follows the auth file filter.',
'oauth_excluded.add': 'Add Exclusion',
'oauth_excluded.add_title': 'Add provider exclusion',
'oauth_excluded.edit_title': 'Edit exclusions for {provider}',
'oauth_excluded.refresh': 'Refresh',
'oauth_excluded.refreshing': 'Refreshing...',
'oauth_excluded.provider_label': 'Provider',
'oauth_excluded.provider_auto': 'Follow current filter',
'oauth_excluded.provider_placeholder': 'e.g. gemini-cli',
'oauth_excluded.provider_hint': 'Defaults to the current filter; pick an existing provider or type a new name.',
'oauth_excluded.models_label': 'Models to exclude',
'oauth_excluded.models_placeholder': 'gpt-4.1-mini\n*-preview',
'oauth_excluded.models_hint': 'Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.',
'oauth_excluded.save': 'Save/Update',
'oauth_excluded.saving': 'Saving...',
'oauth_excluded.save_success': 'Excluded models updated',
'oauth_excluded.save_failed': 'Failed to update excluded models',
'oauth_excluded.delete': 'Delete Provider',
'oauth_excluded.delete_confirm': 'Delete the exclusion list for {provider}?',
'oauth_excluded.delete_success': 'Exclusion list removed',
'oauth_excluded.delete_failed': 'Failed to delete exclusion list',
'oauth_excluded.deleting': 'Deleting...',
'oauth_excluded.no_models': 'No excluded models',
'oauth_excluded.model_count': '{count} models excluded',
'oauth_excluded.list_empty_all': 'No exclusions yet—use “Add Exclusion” to create one.',
'oauth_excluded.list_empty_filtered': 'No exclusions in this scope; click “Add Exclusion” to add.',
'oauth_excluded.disconnected': 'Connect to the server to view exclusions',
'oauth_excluded.load_failed': 'Failed to load exclusion list',
'oauth_excluded.provider_required': 'Please enter a provider first',
'oauth_excluded.scope_all': 'Scope: All providers',
'oauth_excluded.scope_provider': 'Scope: {provider}',
// Codex OAuth
'auth_login.codex_oauth_title': 'Codex OAuth',
'auth_login.codex_oauth_button': 'Start Codex Login',
@@ -957,6 +1091,10 @@ const i18n = {
'usage_stats.success_requests': 'Success Requests',
'usage_stats.failed_requests': 'Failed Requests',
'usage_stats.total_tokens': 'Total Tokens',
'usage_stats.cached_tokens': 'Cached Tokens',
'usage_stats.reasoning_tokens': 'Reasoning Tokens',
'usage_stats.rpm_30m': 'RPM (last 30 min)',
'usage_stats.tpm_30m': 'TPM (last 30 min)',
'usage_stats.requests_trend': 'Request Trends',
'usage_stats.tokens_trend': 'Token Usage Trends',
'usage_stats.api_details': 'API Details',
@@ -966,7 +1104,18 @@ const i18n = {
'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_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_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.loading_error': 'Loading Failed',
'usage_stats.api_endpoint': 'API Endpoint',
@@ -974,6 +1123,25 @@ const i18n = {
'usage_stats.tokens_count': 'Token Count',
'usage_stats.models': 'Model Statistics',
'usage_stats.success_rate': 'Success Rate',
'usage_stats.total_cost': 'Total Cost',
'usage_stats.total_cost_hint': 'Based on configured model pricing',
'usage_stats.model_price_title': 'Model Pricing',
'usage_stats.model_price_reset': 'Clear Prices',
'usage_stats.model_price_model_label': 'Model',
'usage_stats.model_price_select_placeholder': 'Choose a model',
'usage_stats.model_price_select_hint': 'Models come from usage details',
'usage_stats.model_price_prompt': 'Prompt price ($/1M tokens)',
'usage_stats.model_price_completion': 'Completion price ($/1M tokens)',
'usage_stats.model_price_save': 'Save Price',
'usage_stats.model_price_empty': 'No model prices set',
'usage_stats.model_price_model': 'Model',
'usage_stats.model_price_saved': 'Model price saved',
'usage_stats.model_price_model_required': 'Please choose a model to set pricing',
'usage_stats.cost_trend': 'Cost Overview',
'usage_stats.cost_axis_label': 'Cost ($)',
'usage_stats.cost_need_price': 'Set a model price to view cost stats',
'usage_stats.cost_need_usage': 'No usage data available to calculate cost',
'usage_stats.cost_no_data': 'No cost data yet',
'stats.success': 'Success',
'stats.failure': 'Failure',
@@ -982,6 +1150,15 @@ const i18n = {
'logs.refresh_button': 'Refresh Logs',
'logs.clear_button': 'Clear Logs',
'logs.download_button': 'Download Logs',
'logs.error_log_button': 'Select Error Log',
'logs.error_logs_modal_title': 'Error Request Logs',
'logs.error_logs_description': 'Pick an error request log file to download (only generated when request logging is off).',
'logs.error_logs_empty': 'No error request log files found',
'logs.error_logs_load_error': 'Failed to load error log list',
'logs.error_logs_size': 'Size',
'logs.error_logs_modified': 'Last modified',
'logs.error_logs_download': 'Download',
'logs.error_log_download_success': 'Error log downloaded successfully',
'logs.empty_title': 'No Logs Available',
'logs.empty_desc': 'When "Enable logging to file" is enabled, logs will be displayed here',
'logs.log_content': 'Log Content',
@@ -993,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',
@@ -1018,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:',
@@ -1027,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',

View File

@@ -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>
@@ -557,6 +557,31 @@
</div>
</div>
<!-- OAuth 排除列表 -->
<div class="card" id="oauth-excluded-card">
<div class="card-header card-header-with-filter">
<div class="header-left">
<h3><i class="fas fa-ban"></i> <span data-i18n="oauth_excluded.title">OAuth 排除列表</span></h3>
<div class="oauth-excluded-scope" id="oauth-excluded-scope"></div>
</div>
<div class="card-actions">
<button id="oauth-excluded-refresh" class="btn btn-secondary">
<i class="fas fa-sync-alt"></i> <span data-i18n="oauth_excluded.refresh">刷新</span>
</button>
<button id="oauth-excluded-add" class="btn btn-primary">
<i class="fas fa-plus"></i> <span data-i18n="oauth_excluded.add">新增排除</span>
</button>
</div>
</div>
<div class="card-content">
<p class="form-hint" data-i18n="oauth_excluded.description">为 OAuth/文件凭据配置模型黑名单,支持通配符。</p>
<div id="oauth-excluded-status" class="form-hint subtle"></div>
<div id="oauth-excluded-list" class="oauth-excluded-list oauth-excluded-grid provider-list">
<div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
</div>
</div>
</div>
<!-- Codex OAuth -->
<div class="card" id="codex-oauth-card">
<div class="card-header">
@@ -814,8 +839,14 @@
<h2 data-i18n="logs.title">日志查看</h2>
<div class="card">
<div class="card-header">
<h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
<div class="card-header logs-header">
<div class="logs-header-main">
<h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
<div class="logs-search">
<i class="fas fa-search"></i>
<input type="text" id="logs-search-input" aria-label="搜索日志" data-i18n-placeholder="logs.search_placeholder" placeholder="搜索日志...">
</div>
</div>
<div class="header-actions">
<div class="toggle-group" style="margin-right: 15px;">
<label class="toggle-switch" style="margin-right: 5px;">
@@ -827,6 +858,9 @@
<button id="refresh-logs" class="btn btn-primary">
<i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
</button>
<button id="select-error-log" class="btn btn-secondary">
<i class="fas fa-file-circle-exclamation"></i> <span data-i18n="logs.error_log_button">选择错误日志</span>
</button>
<button id="download-logs" class="btn btn-secondary">
<i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
</button>
@@ -886,29 +920,169 @@
<div class="stat-content">
<div class="stat-number" id="total-tokens">0</div>
<div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
<div class="stat-subtext">
<span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
<span id="cached-tokens">0</span>
</div>
<div class="stat-subtext">
<span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
<span id="reasoning-tokens">0</span>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-gauge-high"></i>
</div>
<div class="stat-content">
<div class="stat-number" id="rpm-30m">0</div>
<div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM近30分钟</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-stopwatch"></i>
</div>
<div class="stat-content">
<div class="stat-number" id="tpm-30m">0</div>
<div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM近30分钟</div>
</div>
</div>
<div class="stat-card cost-summary-card">
<div class="stat-icon">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="stat-content">
<div class="stat-number" id="total-cost">--</div>
<div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
<div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
</div>
</div>
</div>
<!-- 图表曲线选择 -->
<div class="usage-filter-bar">
<div class="usage-filter-group">
<div class="usage-filter-bar" id="chart-line-bar">
<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>
<select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
<option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
</select>
<div class="chart-line-control">
<select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
</select>
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="0">
<i class="fas fa-trash"></i>
<span data-i18n="usage_stats.chart_line_delete">删除</span>
</button>
</div>
</div>
<div class="usage-filter-group">
<div class="usage-filter-group chart-line-group" data-line-index="1">
<label for="chart-line-select-1" data-i18n="usage_stats.chart_line_label_2">曲线 2</label>
<select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
<option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
</select>
<div class="chart-line-control">
<select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
</select>
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="1">
<i class="fas fa-trash"></i>
<span data-i18n="usage_stats.chart_line_delete">删除</span>
</button>
</div>
</div>
<div class="usage-filter-group">
<div class="usage-filter-group chart-line-group" data-line-index="2">
<label for="chart-line-select-2" data-i18n="usage_stats.chart_line_label_3">曲线 3</label>
<select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
<option value="none" data-i18n="usage_stats.chart_line_hidden">不显示</option>
</select>
<div class="chart-line-control">
<select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
<option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
</select>
<button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="2">
<i class="fas fa-trash"></i>
<span data-i18n="usage_stats.chart_line_delete">删除</span>
</button>
</div>
</div>
<div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="3">
<label for="chart-line-select-3" data-i18n="usage_stats.chart_line_label_4">曲线 4</label>
<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>
@@ -956,6 +1130,26 @@
</div>
</div>
</div>
<div class="card chart-card cost-chart-card">
<div class="card-header">
<h3><i class="fas fa-sack-dollar"></i> <span data-i18n="usage_stats.cost_trend">花费统计</span></h3>
<div class="chart-controls">
<button class="btn btn-small" data-period="hour" id="cost-hour-btn">
<span data-i18n="usage_stats.by_hour">按小时</span>
</button>
<button class="btn btn-small active" data-period="day" id="cost-day-btn">
<span data-i18n="usage_stats.by_day">按天</span>
</button>
</div>
</div>
<div class="card-content">
<div class="chart-container">
<canvas id="cost-chart"></canvas>
<div id="cost-chart-placeholder" class="chart-placeholder" data-i18n="usage_stats.cost_need_price">请先设置模型价格</div>
</div>
</div>
</div>
</div>
<!-- API详细统计 -->
@@ -973,6 +1167,46 @@
</div>
</div>
</div>
<div class="card cost-config-card">
<div class="card-header">
<h3><i class="fas fa-tags"></i> <span data-i18n="usage_stats.model_price_title">模型价格</span></h3>
<div class="card-actions">
<button type="button" id="reset-model-prices" class="btn btn-secondary">
<i class="fas fa-rotate-left"></i> <span data-i18n="usage_stats.model_price_reset">清除价格</span>
</button>
</div>
</div>
<div class="card-content">
<form id="model-price-form" class="model-price-form">
<div class="form-group">
<label for="model-price-model-select" data-i18n="usage_stats.model_price_model_label">选择模型</label>
<select id="model-price-model-select" class="model-filter-select">
<option value="" data-i18n="usage_stats.model_price_select_placeholder">选择模型</option>
</select>
<p class="form-hint" data-i18n="usage_stats.model_price_select_hint">模型列表来自使用统计</p>
</div>
<div class="price-input-grid">
<div class="form-group">
<label for="model-price-prompt" data-i18n="usage_stats.model_price_prompt">提示价格 ($/1M tokens)</label>
<input type="number" step="0.0001" min="0" id="model-price-prompt" placeholder="0.0000">
</div>
<div class="form-group">
<label for="model-price-completion" data-i18n="usage_stats.model_price_completion">补全价格 ($/1M tokens)</label>
<input type="number" step="0.0001" min="0" id="model-price-completion" placeholder="0.0000">
</div>
</div>
<div class="price-form-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> <span data-i18n="usage_stats.model_price_save">保存价格</span>
</button>
</div>
</form>
<div class="model-price-list" id="model-price-list">
<div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
</div>
</div>
</div>
</section>
<!-- 配置管理 -->
@@ -1001,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">

View File

@@ -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,

View File

@@ -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,59 @@ 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;
};
const normalizeExcludedModels = (input) => {
const rawList = Array.isArray(input)
? input
: (typeof input === 'string' ? input.split(/[\n,]/) : []);
const seen = new Set();
const normalized = [];
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);
rawList.forEach(item => {
if (item === undefined || item === null) {
return;
}
if (Array.isArray(payload.models)) {
return payload.models.map(toModel).filter(Boolean);
}
}
const trimmed = String(item).trim();
if (!trimmed) return;
const key = trimmed.toLowerCase();
if (seen.has(key)) return;
seen.add(key);
normalized.push(trimmed);
});
return [];
return normalized;
};
export function collectExcludedModels(textareaId) {
const textarea = document.getElementById(textareaId);
if (!textarea) return [];
return normalizeExcludedModels(textarea.value);
}
export function setExcludedModelsValue(textareaId, models = []) {
const textarea = document.getElementById(textareaId);
if (!textarea) return;
textarea.value = normalizeExcludedModels(models).join('\n');
}
export function renderExcludedModelBadges(models) {
const normalized = normalizeExcludedModels(models);
if (!normalized.length) {
return '';
}
const badges = normalized.map(model => `
<span class="provider-model-tag excluded-model-tag">
<span class="model-name">${this.escapeHtml(model)}</span>
</span>
`).join('');
return `
<div class="item-subtitle">${i18n.t('ai_providers.excluded_models_count', { count: normalized.length })}</div>
<div class="provider-models excluded-models">
${badges}
</div>
`;
}
export async function loadGeminiKeys() {
try {
const config = await this.getConfig();
@@ -75,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;
}
const legacyKeys = Array.isArray(config['generative-language-api-key']) ? config['generative-language-api-key'] : [];
return legacyKeys
.map(item => {
if (item && typeof item === 'object') {
return { ...item };
}
if (typeof item === 'string') {
const trimmed = item.trim();
if (trimmed) {
return { 'api-key': trimmed };
}
}
return null;
})
.filter(Boolean);
return geminiKeys;
}
export async function renderGeminiKeys(keys, keyStats = null) {
@@ -144,6 +143,7 @@ export async function renderGeminiKeys(keys, keyStats = null) {
const configJson = JSON.stringify(config).replace(/"/g, '&quot;');
const apiKeyJson = JSON.stringify(rawKey || '').replace(/"/g, '&quot;');
const baseUrl = config['base-url'] || config['base_url'] || '';
const excludedModelsHtml = this.renderExcludedModelBadges(config['excluded-models']);
return `
<div class="key-item">
<div class="item-content">
@@ -151,6 +151,7 @@ export async function renderGeminiKeys(keys, keyStats = null) {
<div class="item-subtitle">${i18n.t('common.api_key')}: ${maskedDisplay}</div>
${baseUrl ? `<div class="item-subtitle">${i18n.t('common.base_url')}: ${this.escapeHtml(baseUrl)}</div>` : ''}
${this.renderHeaderBadges(config.headers)}
${excludedModelsHtml}
<div class="item-stats">
<span class="stat-badge stat-success">
<i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${usageStats.success}
@@ -191,6 +192,11 @@ export function showAddGeminiKeyModal() {
<div id="new-gemini-headers-wrapper" class="header-input-list"></div>
<button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('new-gemini-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
</div>
<div class="form-group">
<label for="new-gemini-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
<p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
<textarea id="new-gemini-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
<button class="btn btn-primary" onclick="manager.addGeminiKey()">${i18n.t('common.add')}</button>
@@ -200,11 +206,13 @@ export function showAddGeminiKeyModal() {
modal.style.display = 'block';
this.populateGeminiKeyFields('new-gemini-keys-wrapper');
this.populateHeaderFields('new-gemini-headers-wrapper');
this.setExcludedModelsValue('new-gemini-excluded-models');
}
export async function addGeminiKey() {
const entries = this.collectGeminiKeyFieldInputs('new-gemini-keys-wrapper');
const headers = this.collectHeaderInputs('new-gemini-headers-wrapper');
const excludedModels = this.collectExcludedModels('new-gemini-excluded-models');
if (!entries.length) {
this.showNotification(i18n.t('notification.gemini_multi_input_required'), 'error');
@@ -245,6 +253,7 @@ export async function addGeminiKey() {
} else {
delete newConfig['base-url'];
}
newConfig['excluded-models'] = excludedModels;
this.applyHeadersToConfig(newConfig, headers);
const nextKeys = [...currentKeys, newConfig];
@@ -371,6 +380,11 @@ export function editGeminiKey(index, config) {
<div id="edit-gemini-headers-wrapper" class="header-input-list"></div>
<button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('edit-gemini-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
</div>
<div class="form-group">
<label for="edit-gemini-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
<p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
<textarea id="edit-gemini-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
<button class="btn btn-primary" onclick="manager.updateGeminiKey(${index})">${i18n.t('common.update')}</button>
@@ -380,6 +394,7 @@ export function editGeminiKey(index, config) {
modal.style.display = 'block';
this.populateGeminiKeyFields('edit-gemini-keys-wrapper', [config], { allowRemoval: false });
this.populateHeaderFields('edit-gemini-headers-wrapper', config.headers || null);
this.setExcludedModelsValue('edit-gemini-excluded-models', config['excluded-models'] || []);
}
export async function updateGeminiKey(index) {
@@ -392,6 +407,7 @@ export async function updateGeminiKey(index) {
const newKey = entry['api-key'];
const baseUrl = entry['base-url'] || '';
const headers = this.collectHeaderInputs('edit-gemini-headers-wrapper');
const excludedModels = this.collectExcludedModels('edit-gemini-excluded-models');
if (!newKey) {
this.showNotification(i18n.t('notification.please_enter') + ' ' + i18n.t('notification.gemini_api_key'), 'error');
@@ -406,6 +422,7 @@ export async function updateGeminiKey(index) {
} else {
delete newConfig['base-url'];
}
newConfig['excluded-models'] = excludedModels;
this.applyHeadersToConfig(newConfig, headers);
await this.makeRequest('/gemini-api-key', {
@@ -477,6 +494,7 @@ export async function renderCodexKeys(keys, keyStats = null) {
const maskedDisplay = this.escapeHtml(masked);
const usageStats = (rawKey && (statsBySource[rawKey] || statsBySource[masked])) || { success: 0, failure: 0 };
const deleteArg = JSON.stringify(rawKey).replace(/"/g, '&quot;');
const excludedModelsHtml = this.renderExcludedModelBadges(config['excluded-models']);
return `
<div class="provider-item">
<div class="item-content">
@@ -485,6 +503,7 @@ export async function renderCodexKeys(keys, keyStats = null) {
${config['base-url'] ? `<div class="item-subtitle">${i18n.t('common.base_url')}: ${this.escapeHtml(config['base-url'])}</div>` : ''}
${config['proxy-url'] ? `<div class="item-subtitle">${i18n.t('common.proxy_url')}: ${this.escapeHtml(config['proxy-url'])}</div>` : ''}
${this.renderHeaderBadges(config.headers)}
${excludedModelsHtml}
<div class="item-stats">
<span class="stat-badge stat-success">
<i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${usageStats.success}
@@ -525,6 +544,11 @@ export function showAddCodexKeyModal() {
<label for="new-codex-proxy">${i18n.t('ai_providers.codex_add_modal_proxy_label')}</label>
<input type="text" id="new-codex-proxy" placeholder="${i18n.t('ai_providers.codex_add_modal_proxy_placeholder')}">
</div>
<div class="form-group">
<label for="new-codex-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
<p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
<textarea id="new-codex-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
</div>
<div class="form-group">
<label>${i18n.t('common.custom_headers_label')}</label>
<p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
@@ -539,6 +563,7 @@ export function showAddCodexKeyModal() {
modal.style.display = 'block';
this.populateHeaderFields('new-codex-headers-wrapper');
this.setExcludedModelsValue('new-codex-excluded-models');
}
export async function addCodexKey() {
@@ -546,6 +571,7 @@ export async function addCodexKey() {
const baseUrl = document.getElementById('new-codex-url').value.trim();
const proxyUrl = document.getElementById('new-codex-proxy').value.trim();
const headers = this.collectHeaderInputs('new-codex-headers-wrapper');
const excludedModels = this.collectExcludedModels('new-codex-excluded-models');
if (!apiKey) {
this.showNotification(i18n.t('notification.field_required'), 'error');
@@ -560,7 +586,7 @@ export async function addCodexKey() {
const data = await this.makeRequest('/codex-api-key');
const currentKeys = this.normalizeArrayResponse(data, 'codex-api-key').map(item => ({ ...item }));
const newConfig = this.buildCodexConfig(apiKey, baseUrl, proxyUrl, {}, headers);
const newConfig = this.buildCodexConfig(apiKey, baseUrl, proxyUrl, {}, headers, excludedModels);
currentKeys.push(newConfig);
@@ -596,6 +622,11 @@ export function editCodexKey(index, config) {
<label for="edit-codex-proxy">${i18n.t('ai_providers.codex_edit_modal_proxy_label')}</label>
<input type="text" id="edit-codex-proxy" value="${config['proxy-url'] || ''}">
</div>
<div class="form-group">
<label for="edit-codex-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
<p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
<textarea id="edit-codex-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
</div>
<div class="form-group">
<label>${i18n.t('common.custom_headers_label')}</label>
<p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
@@ -610,6 +641,7 @@ export function editCodexKey(index, config) {
modal.style.display = 'block';
this.populateHeaderFields('edit-codex-headers-wrapper', config.headers || null);
this.setExcludedModelsValue('edit-codex-excluded-models', config['excluded-models'] || []);
}
export async function updateCodexKey(index) {
@@ -617,6 +649,7 @@ export async function updateCodexKey(index) {
const baseUrl = document.getElementById('edit-codex-url').value.trim();
const proxyUrl = document.getElementById('edit-codex-proxy').value.trim();
const headers = this.collectHeaderInputs('edit-codex-headers-wrapper');
const excludedModels = this.collectExcludedModels('edit-codex-excluded-models');
if (!apiKey) {
this.showNotification(i18n.t('notification.field_required'), 'error');
@@ -636,7 +669,7 @@ export async function updateCodexKey(index) {
}
const original = currentList[index] ? { ...currentList[index] } : {};
const newConfig = this.buildCodexConfig(apiKey, baseUrl, proxyUrl, original, headers);
const newConfig = this.buildCodexConfig(apiKey, baseUrl, proxyUrl, original, headers, excludedModels);
await this.makeRequest('/codex-api-key', {
method: 'PATCH',
@@ -1002,7 +1035,7 @@ export async function renderOpenAIProviders(providers, keyStats = null) {
<div class="provider-item">
<div class="item-content">
<div class="item-title">${this.escapeHtml(name)}</div>
<div class="item-subtitle">${i18n.t('common.base_url')}: ${this.escapeHtml(baseUrl)}</div>
<div class="item-subtitle provider-base-url" title="${this.escapeHtml(baseUrl)}">${i18n.t('common.base_url')}: ${this.escapeHtml(baseUrl)}</div>
${this.renderHeaderBadges(item.headers)}
<div class="item-subtitle">${i18n.t('ai_providers.openai_keys_count')}: ${apiKeyEntries.length}</div>
<div class="item-subtitle">${i18n.t('ai_providers.openai_models_count')}: ${models.length}</div>
@@ -1065,6 +1098,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>
</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-list" class="model-discovery-list"></div>
<div class="modal-actions">
@@ -1087,6 +1124,13 @@ function ensureOpenAIModelDiscoveryCard(manager) {
bind('openai-model-discovery-cancel', () => manager.closeOpenAIModelDiscovery());
bind('openai-model-discovery-refresh', () => manager.refreshOpenAIModelDiscovery());
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;
}
@@ -1098,10 +1142,30 @@ export function setOpenAIModelDiscoveryStatus(message = '', type = 'info') {
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 = []) {
const list = document.getElementById('openai-model-discovery-list');
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) {
list.innerHTML = `
<div class="model-discovery-empty">
@@ -1112,10 +1176,20 @@ export function renderOpenAIModelDiscoveryList(models = []) {
return;
}
list.innerHTML = models.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>` : '';
if (!filtered.length) {
list.innerHTML = `
<div class="model-discovery-empty">
<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 `
<label class="model-discovery-row">
<input type="checkbox" class="model-discovery-checkbox" data-model-index="${index}">
@@ -1157,13 +1231,18 @@ export function openOpenAIModelDiscovery(mode = 'new') {
...context,
endpoint,
headers,
discoveredModels: []
discoveredModels: [],
modelSearchQuery: ''
};
const urlInput = document.getElementById('openai-model-discovery-url');
if (urlInput) {
urlInput.value = endpoint;
}
const searchInput = document.getElementById('openai-model-discovery-search');
if (searchInput) {
searchInput.value = '';
}
this.renderOpenAIModelDiscoveryList([]);
this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_loading'), 'info');
@@ -1601,11 +1680,15 @@ export const aiProvidersModule = {
refreshOpenAIModelDiscovery,
renderOpenAIModelDiscoveryList,
setOpenAIModelDiscoveryStatus,
setOpenAIModelDiscoverySearch,
applyOpenAIModelDiscoverySelection,
closeOpenAIModelDiscovery,
addModelField,
populateModelFields,
collectModelInputs,
renderModelBadges,
renderExcludedModelBadges,
collectExcludedModels,
setExcludedModelsValue,
validateOpenAIProviderInput
};

View File

@@ -230,7 +230,7 @@ export const apiKeysModule = {
},
// 构造Codex配置保持未展示的字段
buildCodexConfig(apiKey, baseUrl, proxyUrl, original = {}, headers = null) {
buildCodexConfig(apiKey, baseUrl, proxyUrl, original = {}, headers = null, excludedModels = null) {
const result = {
...original,
'api-key': apiKey,
@@ -238,6 +238,9 @@ export const apiKeysModule = {
'proxy-url': proxyUrl || ''
};
this.applyHeadersToConfig(result, headers);
if (Array.isArray(excludedModels)) {
result['excluded-models'] = excludedModels;
}
return result;
},

View File

@@ -540,6 +540,7 @@ export const authFilesModule = {
}
this.refreshFilterButtonTexts();
this.renderOauthExcludedModels();
},
generateDynamicTypeLabel(type) {
@@ -1031,18 +1032,573 @@ export const authFilesModule = {
}
},
normalizeOauthExcludedMap(payload = {}) {
const raw = (payload && (payload['oauth-excluded-models'] || payload.items)) || payload || {};
if (!raw || typeof raw !== 'object') {
return {};
}
const normalized = {};
Object.entries(raw).forEach(([provider, models]) => {
const key = typeof provider === 'string' ? provider.trim() : '';
if (!key) return;
const list = Array.isArray(models)
? models.map(item => String(item || '').trim()).filter(Boolean)
: [];
normalized[key.toLowerCase()] = list;
});
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) {
const map = this.oauthExcludedModels || {};
if (!map || typeof map !== 'object') {
return {};
}
const type = (filterType || 'all').toLowerCase();
if (type === 'all') {
return map;
}
const result = {};
Object.entries(map).forEach(([provider, models]) => {
if ((provider || '').toLowerCase() === type) {
result[provider] = models;
}
});
return result;
},
findOauthExcludedEntry(provider) {
if (!provider || provider === 'all') {
return null;
}
const normalized = provider.toLowerCase();
const map = this.oauthExcludedModels || {};
for (const [key, models] of Object.entries(map)) {
if ((key || '').toLowerCase() === normalized) {
return { provider: key, models: Array.isArray(models) ? models : [] };
}
}
return null;
},
setOauthExcludedForm(provider = '', models = null) {
const providerSelect = document.getElementById('oauth-excluded-provider-select');
const modelsInput = document.getElementById('oauth-excluded-models');
const normalizedProvider = (provider || '').trim();
if (providerSelect) {
const options = Array.from(providerSelect.options || []);
let match = options.find(opt => (opt.value || '').toLowerCase() === normalizedProvider.toLowerCase());
if (!match && normalizedProvider) {
match = new Option(this.generateDynamicTypeLabel(normalizedProvider) || normalizedProvider, normalizedProvider);
providerSelect.appendChild(match);
}
if (normalizedProvider && match) {
providerSelect.value = match.value;
} else {
providerSelect.value = 'auto';
}
}
if (modelsInput && models !== null && models !== undefined) {
const list = Array.isArray(models) ? models : [];
modelsInput.value = list.map(item => item || '').join('\n');
}
},
syncOauthExcludedFormWithFilter(overrideModels = false) {
const filterType = (this.currentAuthFileFilter || 'all').toLowerCase();
const entry = this.findOauthExcludedEntry(filterType);
if (filterType === 'all') {
if (overrideModels) {
if (entry) {
this.setOauthExcludedForm(entry.provider, entry.models);
} else {
this.setOauthExcludedForm('', '');
}
}
return;
}
if (overrideModels) {
this.setOauthExcludedForm(filterType, entry ? entry.models : []);
} else {
this.setOauthExcludedForm(filterType);
}
},
getOauthExcludedProviderValue() {
const providerSelect = document.getElementById('oauth-excluded-provider-select');
const filterFallback = (this.currentAuthFileFilter && this.currentAuthFileFilter !== 'all')
? this.currentAuthFileFilter
: '';
let selected = (providerSelect && providerSelect.value) ? providerSelect.value.trim() : '';
if (!selected || selected === 'auto') {
return filterFallback;
}
return selected;
},
refreshOauthProviderOptions() {
const providerSelect = document.getElementById('oauth-excluded-provider-select');
if (!providerSelect) return;
const allowedProviders = ['gemini-cli', 'vertex', 'aistudio', 'antigravity', 'claude', 'codex', 'qwen', 'iflow'];
const mapProviders = Object.keys(this.oauthExcludedModels || {});
const filterType = (this.currentAuthFileFilter || '').toLowerCase();
const providers = Array.from(new Set([...allowedProviders, ...mapProviders].filter(Boolean)));
const prevValue = providerSelect.value || 'auto';
providerSelect.innerHTML = '';
const addOption = (value, textKey, fallbackText = null) => {
const opt = document.createElement('option');
opt.value = value;
if (textKey) {
opt.setAttribute('data-i18n-text', textKey);
opt.textContent = i18n.t(textKey);
} else {
opt.textContent = fallbackText || value;
}
providerSelect.appendChild(opt);
};
addOption('auto', 'oauth_excluded.provider_auto');
providers.sort((a, b) => a.localeCompare(b)).forEach(item => addOption(item, null, this.generateDynamicTypeLabel(item) || item));
const restoreValue = (() => {
if (prevValue && Array.from(providerSelect.options).some(opt => opt.value === prevValue)) {
return prevValue;
}
if (filterType && Array.from(providerSelect.options).some(opt => opt.value === filterType)) {
return filterType;
}
return 'auto';
})();
providerSelect.value = restoreValue;
},
parseOauthExcludedModelsInput(input = '') {
const tokens = (input || '').split(/[\n,]/).map(token => token.trim()).filter(Boolean);
const unique = [];
tokens.forEach(token => {
if (!unique.includes(token)) {
unique.push(token);
}
});
return unique;
},
openOauthExcludedEditor(provider = '', models = null) {
const modal = document.getElementById('modal');
const modalBody = document.getElementById('modal-body');
if (!modal || !modalBody) return;
const normalizedProvider = (provider || '').trim();
const fallbackProvider = normalizedProvider
|| ((this.currentAuthFileFilter && this.currentAuthFileFilter !== 'all') ? this.currentAuthFileFilter : '');
let targetModels = models;
if ((targetModels === null || targetModels === undefined) && fallbackProvider) {
const existing = this.findOauthExcludedEntry(fallbackProvider);
if (existing) {
targetModels = existing.models;
}
}
modalBody.innerHTML = `
<h3>${fallbackProvider
? i18n.t('oauth_excluded.edit_title', { provider: this.generateDynamicTypeLabel(fallbackProvider) })
: i18n.t('oauth_excluded.add_title')
}</h3>
<div class="provider-item oauth-excluded-editor-card">
<div class="item-content">
<div class="form-group">
<label for="oauth-excluded-provider-select" data-i18n="oauth_excluded.provider_label">${i18n.t('oauth_excluded.provider_label')}</label>
<select id="oauth-excluded-provider-select"></select>
<p class="form-hint" data-i18n="oauth_excluded.provider_hint">${i18n.t('oauth_excluded.provider_hint')}</p>
</div>
<div class="form-group">
<label for="oauth-excluded-models" data-i18n="oauth_excluded.models_label">${i18n.t('oauth_excluded.models_label')}</label>
<textarea id="oauth-excluded-models" rows="5" data-i18n-placeholder="oauth_excluded.models_placeholder" placeholder="${i18n.t('oauth_excluded.models_placeholder')}"></textarea>
<p class="form-hint" data-i18n="oauth_excluded.models_hint">${i18n.t('oauth_excluded.models_hint')}</p>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-primary" id="oauth-excluded-save">
<i class="fas fa-save"></i> ${i18n.t('oauth_excluded.save')}
</button>
<button class="btn btn-danger" id="oauth-excluded-delete">
<i class="fas fa-trash"></i> ${i18n.t('oauth_excluded.delete')}
</button>
<button class="btn btn-secondary" onclick="manager.closeModal()">
${i18n.t('common.cancel')}
</button>
</div>
`;
this.refreshOauthProviderOptions();
this.setOauthExcludedForm(fallbackProvider, targetModels != null ? targetModels : []);
this.showModal();
const saveBtn = document.getElementById('oauth-excluded-save');
if (saveBtn) {
saveBtn.onclick = () => this.saveOauthExcludedEntry();
}
const deleteBtn = document.getElementById('oauth-excluded-delete');
if (deleteBtn) {
deleteBtn.onclick = () => this.deleteOauthExcludedEntry();
}
const providerSelect = document.getElementById('oauth-excluded-provider-select');
const syncDeleteState = () => {
if (deleteBtn) {
deleteBtn.disabled = !this.getOauthExcludedProviderValue();
}
};
if (providerSelect) {
providerSelect.addEventListener('change', syncDeleteState);
}
syncDeleteState();
this.updateOauthExcludedButtonsState(false);
},
buildOauthExcludedItem(provider, models = []) {
const providerLabel = this.generateDynamicTypeLabel(provider) || provider;
const normalizedModels = Array.isArray(models) ? models.filter(Boolean) : [];
const tags = normalizedModels.length
? normalizedModels.map(model => `<span class="provider-model-tag"><span class="model-name">${this.escapeHtml(String(model))}</span></span>`).join('')
: `<span class="oauth-excluded-empty">${i18n.t('oauth_excluded.no_models')}</span>`;
const modelCount = normalizedModels.length;
return `
<div class="provider-item oauth-excluded-card" data-provider="${this.escapeHtml(provider)}">
<div class="item-content">
<div class="item-title">${this.escapeHtml(providerLabel)}</div>
<div class="item-meta">
<span class="item-subtitle">
${modelCount > 0
? i18n.t('oauth_excluded.model_count', { count: modelCount })
: i18n.t('oauth_excluded.no_models')}
</span>
</div>
<div class="provider-models oauth-excluded-tags">
${tags}
</div>
</div>
<div class="item-actions">
<button class="btn btn-secondary" data-action="edit" data-provider="${this.escapeHtml(provider)}">
<i class="fas fa-pen"></i>
</button>
<button class="btn btn-danger" data-action="delete" data-provider="${this.escapeHtml(provider)}">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`;
},
renderOauthExcludedModels(filterType = this.currentAuthFileFilter) {
const container = document.getElementById('oauth-excluded-list');
const scopeEl = document.getElementById('oauth-excluded-scope');
if (!container) return;
const currentType = (filterType || 'all').toLowerCase();
const map = this.getFilteredOauthExcludedMap(currentType);
const providers = Object.keys(map || {});
if (scopeEl) {
const label = currentType === 'all'
? i18n.t('oauth_excluded.scope_all')
: i18n.t('oauth_excluded.scope_provider', { provider: this.generateDynamicTypeLabel(currentType) });
scopeEl.textContent = label;
}
if (!this.isConnected) {
container.innerHTML = `<div class="oauth-excluded-empty">${i18n.t('oauth_excluded.disconnected')}</div>`;
return;
}
if (this._oauthExcludedLoading) {
container.innerHTML = `<div class="loading-placeholder">${i18n.t('common.loading')}</div>`;
return;
}
if (!providers.length) {
const emptyKey = currentType === 'all'
? 'oauth_excluded.list_empty_all'
: 'oauth_excluded.list_empty_filtered';
container.innerHTML = `<div class="oauth-excluded-empty">${i18n.t(emptyKey)}</div>`;
return;
}
const itemsHtml = providers
.sort((a, b) => a.localeCompare(b))
.map(provider => this.buildOauthExcludedItem(provider, map[provider]))
.join('');
container.innerHTML = itemsHtml;
this.refreshOauthProviderOptions();
this.bindOauthExcludedActionEvents();
},
bindOauthExcludedActionEvents() {
const container = document.getElementById('oauth-excluded-list');
if (!container) return;
if (container._oauthExcludedListener) {
container.removeEventListener('click', container._oauthExcludedListener);
}
const listener = (event) => {
const button = event.target.closest('button[data-action]');
if (!button || !container.contains(button)) return;
const provider = button.dataset.provider;
if (!provider) return;
const entry = this.findOauthExcludedEntry(provider);
if (button.dataset.action === 'edit') {
this.openOauthExcludedEditor(provider, entry ? entry.models : []);
} else if (button.dataset.action === 'delete') {
this.deleteOauthExcludedEntry(provider);
}
};
container._oauthExcludedListener = listener;
container.addEventListener('click', listener);
},
updateOauthExcludedButtonsState(isLoading = false) {
const refreshBtn = document.getElementById('oauth-excluded-refresh');
const saveBtn = document.getElementById('oauth-excluded-save');
const deleteBtn = document.getElementById('oauth-excluded-delete');
const addBtn = document.getElementById('oauth-excluded-add');
const disabled = isLoading || !this.isConnected;
[refreshBtn, saveBtn, deleteBtn, addBtn].forEach(btn => {
if (btn) {
btn.disabled = disabled;
}
});
},
setOauthExcludedStatus(message = '') {
const statusEl = document.getElementById('oauth-excluded-status');
if (statusEl) {
statusEl.textContent = message || '';
}
},
async loadOauthExcludedModels(forceRefresh = false) {
if (!this.isConnected) {
this.renderOauthExcludedModels();
this.updateOauthExcludedButtonsState();
return;
}
if (this._oauthExcludedLoading) {
return;
}
this._oauthExcludedLoading = true;
this.updateOauthExcludedButtonsState(true);
this.setOauthExcludedStatus(i18n.t('oauth_excluded.refreshing'));
this.renderOauthExcludedModels();
try {
let targetMap = {};
let hasData = false;
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('');
} catch (error) {
console.error('加载 OAuth 排除列表失败:', error);
const message = `${i18n.t('oauth_excluded.load_failed')}: ${error.message}`;
this.setOauthExcludedStatus(message);
this.showNotification(message, 'error');
} finally {
this._oauthExcludedLoading = false;
this.updateOauthExcludedButtonsState(false);
this.renderOauthExcludedModels();
}
},
async saveOauthExcludedEntry() {
if (!this.isConnected) {
this.showNotification(i18n.t('notification.connection_required'), 'error');
return;
}
const modelsInput = document.getElementById('oauth-excluded-models');
if (!modelsInput) return;
const providerValue = this.getOauthExcludedProviderValue();
if (!providerValue) {
this.showNotification(i18n.t('oauth_excluded.provider_required'), 'error');
return;
}
const models = this.parseOauthExcludedModelsInput(modelsInput.value);
this.updateOauthExcludedButtonsState(true);
this.setOauthExcludedStatus(i18n.t('oauth_excluded.saving'));
try {
await this.makeRequest('/oauth-excluded-models', {
method: 'PATCH',
body: JSON.stringify({
provider: providerValue,
models
})
});
const successKey = models.length === 0 ? 'oauth_excluded.delete_success' : 'oauth_excluded.save_success';
this.showNotification(i18n.t(successKey), 'success');
this.clearCache('oauth-excluded-models');
await this.loadOauthExcludedModels(true);
this.closeModal();
} catch (error) {
this.showNotification(`${i18n.t('oauth_excluded.save_failed')}: ${error.message}`, 'error');
} finally {
this.setOauthExcludedStatus('');
this.updateOauthExcludedButtonsState(false);
}
},
async deleteOauthExcludedEntry(providerOverride = null) {
if (!this.isConnected) {
this.showNotification(i18n.t('notification.connection_required'), 'error');
return;
}
const providerValue = (providerOverride || this.getOauthExcludedProviderValue() || '').trim();
if (!providerValue) {
this.showNotification(i18n.t('oauth_excluded.provider_required'), 'error');
return;
}
if (!confirm(i18n.t('oauth_excluded.delete_confirm', { provider: providerValue }))) {
return;
}
this.updateOauthExcludedButtonsState(true);
this.setOauthExcludedStatus(i18n.t('oauth_excluded.deleting'));
try {
await this.makeRequest(`/oauth-excluded-models?provider=${encodeURIComponent(providerValue)}`, { method: 'DELETE' });
this.showNotification(i18n.t('oauth_excluded.delete_success'), 'success');
this.clearCache('oauth-excluded-models');
await this.loadOauthExcludedModels(true);
this.closeModal();
} catch (error) {
this.showNotification(`${i18n.t('oauth_excluded.delete_failed')}: ${error.message}`, 'error');
} finally {
this.setOauthExcludedStatus('');
this.updateOauthExcludedButtonsState(false);
}
},
registerAuthFilesListeners() {
if (!this.events || typeof this.events.on !== 'function') {
return;
}
this.events.on('data:config-loaded', async (event) => {
const detail = event?.detail || {};
const config = detail.config || {};
const keyStats = detail.keyStats || null;
try {
await this.loadAuthFiles(keyStats);
} catch (error) {
console.error('加载认证文件失败:', error);
}
try {
const applied = this.applyOauthExcludedFromConfig(config, { render: true });
if (!applied) {
await this.loadOauthExcludedModels(true);
}
} catch (error) {
console.error('加载 OAuth 排除列表失败:', error);
}
});
this.events.on('connection:status-changed', (event) => {
const detail = event?.detail || {};
this.updateOauthExcludedButtonsState(false);
if (detail.isConnected) {
if (!this.applyOauthExcludedFromConfig(null, { render: true })) {
this.renderOauthExcludedModels();
}
} else {
this.renderOauthExcludedModels();
}
});
}
};

View File

@@ -32,7 +32,6 @@ export const configEditorModule = {
}
});
editorInstance.setSize('100%', '100%');
editorInstance.on('change', () => {
this.isConfigEditorDirty = true;
this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));

View File

@@ -101,6 +101,14 @@ export const loginModule = {
this.stopStatusUpdateTimer();
this.resetVersionInfo();
this.setManagementKey('', { persist: false });
this.oauthExcludedModels = {};
this._oauthExcludedLoading = false;
if (typeof this.renderOauthExcludedModels === 'function') {
this.renderOauthExcludedModels('all');
}
if (typeof this.clearAvailableModels === 'function') {
this.clearAvailableModels('common.disconnected');
}
localStorage.removeItem('isLoggedIn');
secureStorage.removeItem('managementKey');

View File

@@ -50,20 +50,19 @@ export const logsModule = {
} else if (!incremental && response.lines.length > 0) {
this.renderLogs(response.lines, response['line-count'] || response.lines.length, true);
} else if (!incremental) {
logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
i18n.t('logs.empty_desc') + '</p></div>';
this.latestLogTimestamp = null;
this.renderLogs([], 0, false);
}
} else if (!incremental) {
logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
i18n.t('logs.empty_desc') + '</p></div>';
this.latestLogTimestamp = null;
this.renderLogs([], 0, false);
}
} catch (error) {
console.error('加载日志失败:', error);
if (!incremental) {
this.allLogLines = [];
this.displayedLogLines = [];
this.latestLogTimestamp = null;
const is404 = error.message && (error.message.includes('404') || error.message.includes('Not Found'));
if (is404) {
@@ -82,7 +81,17 @@ export const logsModule = {
const logsContent = document.getElementById('logs-content');
if (!logsContent) return;
if (!lines || lines.length === 0) {
const sourceLines = Array.isArray(lines) ? lines : [];
const filteredLines = sourceLines.filter(line => !line.includes('/v0/management/'));
let displayedLines = filteredLines;
if (filteredLines.length > this.maxDisplayLogLines) {
const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
displayedLines = filteredLines.slice(linesToRemove);
}
this.allLogLines = displayedLines.slice();
if (displayedLines.length === 0) {
this.displayedLogLines = [];
logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
@@ -90,14 +99,15 @@ export const logsModule = {
return;
}
const filteredLines = lines.filter(line => !line.includes('/v0/management/'));
let displayedLines = filteredLines;
if (filteredLines.length > this.maxDisplayLogLines) {
const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
displayedLines = filteredLines.slice(linesToRemove);
}
const visibleLines = this.filterLogLinesBySearch(displayedLines);
this.displayedLogLines = visibleLines.slice();
this.displayedLogLines = displayedLines.slice();
if (visibleLines.length === 0) {
logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-search"></i><p data-i18n="logs.search_empty_title">' +
i18n.t('logs.search_empty_title') + '</p><p data-i18n="logs.search_empty_desc">' +
i18n.t('logs.search_empty_desc') + '</p></div>';
return;
}
const displayedLineCount = this.displayedLogLines.length;
logsContent.innerHTML = `
@@ -107,7 +117,7 @@ export const logsModule = {
<pre class="logs-text">${this.buildLogsHtml(this.displayedLogLines)}</pre>
`;
if (scrollToBottom) {
if (scrollToBottom && !this.logSearchQuery) {
const logsTextElement = logsContent.querySelector('.logs-text');
if (logsTextElement) {
logsTextElement.scrollTop = logsTextElement.scrollHeight;
@@ -138,9 +148,21 @@ export const logsModule = {
const isAtBottom = logsTextElement.scrollHeight - logsTextElement.scrollTop - logsTextElement.clientHeight < 50;
this.displayedLogLines = this.displayedLogLines.concat(filteredNewLines);
if (this.displayedLogLines.length > this.maxDisplayLogLines) {
this.displayedLogLines = this.displayedLogLines.slice(this.displayedLogLines.length - this.maxDisplayLogLines);
const baseLines = Array.isArray(this.allLogLines) && this.allLogLines.length > 0
? this.allLogLines
: (Array.isArray(this.displayedLogLines) ? this.displayedLogLines : []);
this.allLogLines = baseLines.concat(filteredNewLines);
if (this.allLogLines.length > this.maxDisplayLogLines) {
this.allLogLines = this.allLogLines.slice(this.allLogLines.length - this.maxDisplayLogLines);
}
const visibleLines = this.filterLogLinesBySearch(this.allLogLines);
this.displayedLogLines = visibleLines.slice();
if (visibleLines.length === 0) {
this.renderLogs(this.allLogLines, this.allLogLines.length, false);
return;
}
logsTextElement.innerHTML = this.buildLogsHtml(this.displayedLogLines);
@@ -150,11 +172,44 @@ export const logsModule = {
logsInfoElement.innerHTML = `<span><i class="fas fa-list-ol"></i> ${displayedLines} ${i18n.t('logs.lines')}</span>`;
}
if (isAtBottom) {
if (isAtBottom && !this.logSearchQuery) {
logsTextElement.scrollTop = logsTextElement.scrollHeight;
}
},
filterLogLinesBySearch(lines) {
const keyword = (this.logSearchQuery || '').toLowerCase();
if (!keyword) {
return Array.isArray(lines) ? lines.slice() : [];
}
if (!Array.isArray(lines) || lines.length === 0) {
return [];
}
return lines.filter(line => (line || '').toLowerCase().includes(keyword));
},
updateLogSearchQuery(value = '') {
const normalized = (value || '').trim();
if (this.logSearchQuery === normalized) {
return;
}
this.logSearchQuery = normalized;
this.applyLogSearchFilter();
},
applyLogSearchFilter() {
const logsContent = document.getElementById('logs-content');
if (!logsContent) return;
if (logsContent.querySelector('.upgrade-notice') || logsContent.querySelector('.error-state')) {
return;
}
const baseLines = Array.isArray(this.allLogLines) ? this.allLogLines : [];
if (baseLines.length === 0 && logsContent.querySelector('.loading-placeholder')) {
return;
}
this.renderLogs(baseLines, baseLines.length, false);
},
buildLogsHtml(lines) {
if (!lines || lines.length === 0) {
return '';
@@ -346,6 +401,162 @@ export const logsModule = {
return null;
},
async openErrorLogsModal() {
const modalBody = document.getElementById('modal-body');
if (!modalBody) return;
modalBody.innerHTML = `
<h3>${i18n.t('logs.error_logs_modal_title')}</h3>
<div class="provider-item">
<div class="item-content">
<p class="form-hint">${i18n.t('logs.error_logs_description')}</p>
<div class="loading-placeholder">${i18n.t('common.loading')}</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
</div>
`;
this.showModal();
try {
const response = await this.makeRequest('/request-error-logs', {
method: 'GET'
});
const files = Array.isArray(response?.files) ? response.files.slice() : [];
if (files.length > 1) {
files.sort((a, b) => (b.modified || 0) - (a.modified || 0));
}
modalBody.innerHTML = this.buildErrorLogsModal(files);
this.showModal();
this.bindErrorLogDownloadButtons();
} catch (error) {
console.error('加载错误日志列表失败:', error);
modalBody.innerHTML = `
<h3>${i18n.t('logs.error_logs_modal_title')}</h3>
<div class="provider-item">
<div class="item-content">
<div class="error-state">
<i class="fas fa-exclamation-triangle"></i>
<p>${i18n.t('logs.error_logs_load_error')}</p>
<p>${this.escapeHtml(error.message || '')}</p>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
</div>
`;
this.showNotification(`${i18n.t('logs.error_logs_load_error')}: ${error.message}`, 'error');
}
},
buildErrorLogsModal(files) {
const listHtml = Array.isArray(files) && files.length > 0
? files.map(file => this.buildErrorLogCard(file)).join('')
: `
<div class="empty-state">
<i class="fas fa-inbox"></i>
<h3>${i18n.t('logs.error_logs_empty')}</h3>
<p>${i18n.t('logs.error_logs_description')}</p>
</div>
`;
return `
<h3>${i18n.t('logs.error_logs_modal_title')}</h3>
<p class="form-hint">${i18n.t('logs.error_logs_description')}</p>
<div class="provider-list">
${listHtml}
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
</div>
`;
},
buildErrorLogCard(file) {
const name = file?.name || '';
const size = typeof file?.size === 'number' ? this.formatFileSize(file.size) : '-';
const modified = file?.modified ? this.formatErrorLogTime(file.modified) : '-';
return `
<div class="provider-item">
<div class="item-content">
<div class="item-title">${this.escapeHtml(name)}</div>
<div class="item-subtitle">${i18n.t('logs.error_logs_size')}: ${this.escapeHtml(size)}</div>
<div class="item-subtitle">${i18n.t('logs.error_logs_modified')}: ${this.escapeHtml(modified)}</div>
</div>
<div class="item-actions">
<button class="btn btn-secondary error-log-download-btn" data-log-name="${this.escapeHtml(name)}">
<i class="fas fa-download"></i> ${i18n.t('logs.error_logs_download')}
</button>
</div>
</div>
`;
},
bindErrorLogDownloadButtons() {
const modalBody = document.getElementById('modal-body');
if (!modalBody) return;
const buttons = modalBody.querySelectorAll('.error-log-download-btn');
buttons.forEach(button => {
button.onclick = () => {
const filename = button.getAttribute('data-log-name');
if (filename) {
this.downloadErrorLog(filename);
}
};
});
},
formatErrorLogTime(timestamp) {
const numeric = Number(timestamp);
if (!Number.isFinite(numeric) || numeric <= 0) {
return '-';
}
const date = new Date(numeric * 1000);
if (Number.isNaN(date.getTime())) {
return '-';
}
const locale = i18n?.currentLanguage || undefined;
return date.toLocaleString(locale);
},
async downloadErrorLog(filename) {
if (!filename) return;
try {
const response = await this.apiClient.requestRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
method: 'GET'
});
if (!response.ok) {
let errorMessage = `HTTP ${response.status}`;
try {
const errorData = await response.json();
if (errorData && errorData.error) {
errorMessage = errorData.error;
}
} catch (parseError) {
// ignore JSON parse error and use default message
}
throw new Error(errorMessage);
}
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
this.showNotification(i18n.t('logs.error_log_download_success'), 'success');
} catch (error) {
console.error('下载错误日志失败:', error);
this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
}
},
async downloadLogs() {
try {
const response = await this.makeRequest('/logs', {

File diff suppressed because it is too large Load Diff

104
src/utils/models.js Normal file
View File

@@ -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;
}

View File

@@ -1385,7 +1385,6 @@ textarea::placeholder {
#config-management .card {
display: flex;
flex-direction: column;
min-height: calc(100vh - 360px);
margin-bottom: 12px;
}
@@ -1404,8 +1403,6 @@ textarea::placeholder {
.yaml-editor {
width: 100%;
flex: 1;
min-height: 520px;
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 12px 14px;
@@ -1417,10 +1414,12 @@ textarea::placeholder {
resize: vertical;
}
#config-management .yaml-editor {
height: 520px;
}
#config-management .CodeMirror {
flex: 1;
min-height: 520px;
height: 100%;
height: 520px;
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
@@ -1433,7 +1432,7 @@ textarea::placeholder {
#config-management .CodeMirror-scroll {
min-height: 0;
height: 100%;
max-height: none;
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
}
@@ -1484,9 +1483,9 @@ textarea::placeholder {
min-height: 360px;
}
.yaml-editor,
#config-management .yaml-editor,
#config-management .CodeMirror {
min-height: 360px;
height: 360px;
}
}
@@ -1748,6 +1747,71 @@ input:checked+.slider:before {
white-space: nowrap;
}
.oauth-excluded-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin-top: 8px;
}
.oauth-excluded-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
margin-top: 12px;
}
.oauth-excluded-scope {
color: var(--text-secondary);
font-weight: 600;
margin: 0;
}
.oauth-excluded-list {
margin-top: 12px;
}
.oauth-excluded-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
align-items: stretch;
}
.oauth-excluded-card {
height: 100%;
}
.oauth-excluded-card .provider-models {
margin-top: 6px;
}
.oauth-excluded-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.oauth-excluded-card .item-actions {
top: 14px;
right: 14px;
transform: none;
}
.oauth-excluded-editor-card .item-content {
padding-right: 0;
}
.oauth-excluded-editor-card textarea {
min-height: 140px;
}
.oauth-excluded-empty {
color: var(--text-tertiary);
font-size: 0.95rem;
}
/* 认证文件工具栏 */
.auth-file-toolbar {
display: flex;
@@ -2136,6 +2200,13 @@ input:checked+.slider:before {
font-size: 0.9rem;
}
.provider-base-url {
word-break: break-all;
overflow-wrap: anywhere;
white-space: normal;
display: block;
}
.provider-item .provider-models {
margin-top: 8px;
display: flex;
@@ -2156,6 +2227,12 @@ input:checked+.slider:before {
font-size: 0.85rem;
}
.provider-item .excluded-models .provider-model-tag {
background: var(--warning-bg);
border-color: var(--warning-border);
color: var(--warning-text);
}
.provider-model-tag .model-name {
font-weight: 600;
}
@@ -2165,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);
@@ -2988,11 +3146,23 @@ input:checked+.slider:before {
/* 使用统计样式 */
.stats-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 30px;
}
@media (max-width: 1200px) {
.stats-overview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.stats-overview {
grid-template-columns: 1fr;
}
}
.usage-filter-bar {
display: flex;
justify-content: flex-start;
@@ -3008,12 +3178,55 @@ input:checked+.slider:before {
min-width: 220px;
}
.usage-filter-actions {
min-width: 260px;
}
.usage-filter-group label {
font-weight: 600;
color: var(--text-secondary);
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 {
border: 1px solid var(--border-color);
border-radius: 10px;
@@ -3086,6 +3299,20 @@ input:checked+.slider:before {
font-weight: 500;
}
.stat-subtext {
font-size: 12px;
color: var(--text-tertiary);
line-height: 1.4;
}
.stat-subtext:first-of-type {
margin-top: 6px;
}
.cost-summary-card .stat-icon {
background: #f59e0b;
}
.charts-container {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -3177,6 +3404,84 @@ input:checked+.slider:before {
font-size: 12px;
}
.cost-config-card .card-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.model-price-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.price-input-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 768px) {
.price-input-grid {
grid-template-columns: 1fr;
}
}
.price-form-actions {
display: flex;
justify-content: flex-end;
}
.model-price-list {
margin-top: 6px;
}
.model-price-table {
display: flex;
flex-direction: column;
gap: 8px;
}
.model-price-header,
.model-price-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 10px;
align-items: center;
}
.model-price-header {
font-weight: 700;
color: var(--text-primary);
background: var(--bg-secondary);
}
.model-price-row {
background: var(--bg-primary);
color: var(--text-secondary);
}
.chart-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-tertiary);
background: var(--bg-primary);
border: 1px dashed var(--border-color);
border-radius: 12px;
}
.cost-chart-card {
grid-column: 1 / -1;
}
.model-item {
display: flex;
justify-content: space-between;
@@ -4107,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;
@@ -4138,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;