mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-02 10:50:49 +08:00
1396 lines
97 KiB
HTML
1396 lines
97 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title data-i18n="title.login">CLI Proxy API Management Center</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/comment/comment.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
|
||
<script src="i18n.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 自动登录加载页面 -->
|
||
<div id="auto-login-loading" class="login-container" style="display: none;">
|
||
<div class="login-card">
|
||
<div class="auto-login-content">
|
||
<div class="loading-spinner">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
<h2 data-i18n="auto_login.title">正在自动登录...</h2>
|
||
<p data-i18n="auto_login.message">正在使用本地保存的连接信息尝试连接服务器</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 登录页面 -->
|
||
<div id="login-page" class="login-container">
|
||
<div class="login-card">
|
||
<div class="login-header">
|
||
<div class="login-header-top">
|
||
<h1 class="login-title">
|
||
<img id="login-logo" alt="Logo" style="display:none" />
|
||
<span data-i18n="title.login">CLI Proxy API Management Center</span>
|
||
</h1>
|
||
<div class="header-controls">
|
||
<div class="language-switcher">
|
||
<button id="language-toggle" class="btn btn-secondary language-btn">
|
||
<i class="fas fa-globe"></i>
|
||
<span data-i18n="language.switch">语言</span>
|
||
</button>
|
||
</div>
|
||
<div class="theme-switcher">
|
||
<button id="theme-toggle" class="btn btn-secondary theme-btn">
|
||
<i class="fas fa-moon"></i>
|
||
<span data-i18n="theme.switch">主题</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="login-body">
|
||
<div class="login-connection-info">
|
||
<div class="connection-summary">
|
||
<i class="fas fa-link"></i>
|
||
<div>
|
||
<h3 data-i18n="login.connection_title">连接地址</h3>
|
||
<p class="connection-url">
|
||
<span data-i18n="login.connection_current">当前地址</span>
|
||
<span class="connection-url-separator">:</span>
|
||
<span id="login-connection-url">-</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p class="form-hint" data-i18n="login.connection_auto_hint">系统将自动使用当前访问地址进行连接</p>
|
||
</div>
|
||
|
||
<form class="login-form">
|
||
<div class="form-group">
|
||
<label for="login-api-base" data-i18n="login.custom_connection_label">自定义连接地址:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="login-api-base" data-i18n-placeholder="login.custom_connection_placeholder">
|
||
<button type="button" id="login-reset-api-base"
|
||
class="btn btn-secondary connection-reset-btn">
|
||
<i class="fas fa-location-arrow"></i>
|
||
<span data-i18n="login.use_current_address">使用当前地址</span>
|
||
</button>
|
||
</div>
|
||
<p class="form-hint" data-i18n="login.custom_connection_hint">默认使用当前访问地址，若需要可手动输入其他地址。</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="login-management-key" data-i18n="login.management_key_label">管理密钥:</label>
|
||
<div class="input-group">
|
||
<input type="password" id="login-management-key" data-i18n-placeholder="login.management_key_placeholder" required>
|
||
<button type="button" class="btn btn-secondary toggle-key-visibility">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 连接按钮 -->
|
||
<div class="form-actions">
|
||
<button type="button" id="login-submit" class="btn btn-primary login-btn">
|
||
<i class="fas fa-plug"></i> <span data-i18n="login.connect_button">Connect</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div id="login-error" class="login-error" style="display: none;">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
<span id="login-error-message"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主页面 -->
|
||
<div id="main-page" style="display: none;">
|
||
<!-- 顶部导航栏 -->
|
||
<div class="top-navbar">
|
||
<div class="top-navbar-left">
|
||
<button class="mobile-menu-btn" id="mobile-menu-btn">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<button class="sidebar-toggle-btn-desktop" id="sidebar-toggle-btn-desktop" data-i18n-title="sidebar.toggle_collapse">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<div class="top-navbar-brand">
|
||
<img id="site-logo" class="top-navbar-brand-logo" alt="Logo" style="display:none" />
|
||
<button class="top-navbar-brand-toggle expanded" id="brand-name-toggle" type="button" aria-label="展开标题">
|
||
<span class="brand-texts" id="brand-texts">
|
||
<span class="top-navbar-brand-text brand-text brand-text-full" data-i18n="title.main">CLI Proxy API Management Center</span>
|
||
<span class="top-navbar-brand-text brand-text brand-text-short" data-i18n="title.abbr">CPAMC</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="top-navbar-actions">
|
||
<div class="header-controls">
|
||
<div class="language-switcher">
|
||
<button id="language-toggle-main" class="btn btn-secondary language-btn">
|
||
<i class="fas fa-globe"></i>
|
||
</button>
|
||
</div>
|
||
<div class="theme-switcher">
|
||
<button id="theme-toggle-main" class="btn btn-secondary theme-btn">
|
||
<i class="fas fa-moon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<button id="connection-status" class="btn btn-secondary">
|
||
<i class="fas fa-circle"></i> <span data-i18n="header.check_connection">检查连接</span>
|
||
</button>
|
||
<button id="refresh-all" class="btn btn-primary">
|
||
<i class="fas fa-sync-alt"></i>
|
||
</button>
|
||
<button id="logout-btn" class="btn btn-danger">
|
||
<i class="fas fa-sign-out-alt"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout" id="layout-container">
|
||
<!-- 侧边栏 -->
|
||
<nav class="sidebar" id="sidebar">
|
||
<!-- 导航菜单 -->
|
||
<ul class="nav-menu">
|
||
<li data-i18n-tooltip="nav.basic_settings"><a href="#basic-settings" class="nav-item active"
|
||
data-section="basic-settings">
|
||
<i class="fas fa-sliders-h"></i> <span data-i18n="nav.basic_settings">基础设置</span>
|
||
</a></li>
|
||
<li data-i18n-tooltip="nav.api_keys"><a href="#api-keys" class="nav-item" data-section="api-keys">
|
||
<i class="fas fa-key"></i> <span data-i18n="nav.api_keys">API 密钥</span>
|
||
</a></li>
|
||
<li data-i18n-tooltip="nav.ai_providers"><a href="#ai-providers" class="nav-item" data-section="ai-providers">
|
||
<i class="fas fa-robot"></i> <span data-i18n="nav.ai_providers">AI 提供商</span>
|
||
</a></li>
|
||
<li data-i18n-tooltip="nav.auth_files"><a href="#auth-files" class="nav-item" data-section="auth-files">
|
||
<i class="fas fa-file-alt"></i> <span data-i18n="nav.auth_files">认证文件</span>
|
||
</a></li>
|
||
<li data-i18n-tooltip="nav.usage_stats"><a href="#usage-stats" class="nav-item" data-section="usage-stats">
|
||
<i class="fas fa-chart-line"></i> <span data-i18n="nav.usage_stats">使用统计</span>
|
||
</a></li>
|
||
<li data-i18n-tooltip="nav.config_management"><a href="#config-management" class="nav-item" data-section="config-management">
|
||
<i class="fas fa-cog"></i> <span data-i18n="nav.config_management">配置管理</span>
|
||
</a></li>
|
||
<li id="logs-nav-item" data-i18n-tooltip="nav.logs" style="display: none;"><a href="#logs" class="nav-item" data-section="logs">
|
||
<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>
|
||
</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- 侧边栏遮罩（移动端） -->
|
||
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
||
|
||
<!-- 主内容包装器 -->
|
||
<div class="main-wrapper" id="main-wrapper">
|
||
<!-- 主内容区域 -->
|
||
<div class="main-content">
|
||
<!-- 内容区域 -->
|
||
<div class="content-area">
|
||
<!-- 基础设置 -->
|
||
<section id="basic-settings" class="content-section active">
|
||
<h2 data-i18n="basic_settings.title">基础设置</h2>
|
||
|
||
<!-- Debug 设置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-bug"></i> <span
|
||
data-i18n="basic_settings.debug_title">调试模式</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="debug-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label" data-i18n="basic_settings.debug_enable">启用调试模式</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 代理设置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-network-wired"></i> <span
|
||
data-i18n="basic_settings.proxy_title">代理设置</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="form-group">
|
||
<label for="proxy-url" data-i18n="basic_settings.proxy_url_label">代理
|
||
URL:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="proxy-url" data-i18n-placeholder="basic_settings.proxy_url_placeholder">
|
||
<button id="update-proxy" class="btn btn-primary"
|
||
data-i18n="basic_settings.proxy_update">更新</button>
|
||
<button id="clear-proxy" class="btn btn-danger"
|
||
data-i18n="basic_settings.proxy_clear">清空</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 请求重试设置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-redo"></i> <span
|
||
data-i18n="basic_settings.retry_title">请求重试</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="form-group">
|
||
<label for="request-retry"
|
||
data-i18n="basic_settings.retry_count_label">重试次数:</label>
|
||
<div class="input-group">
|
||
<input type="number" id="request-retry" min="0" max="10" value="3">
|
||
<button id="update-retry" class="btn btn-primary"
|
||
data-i18n="basic_settings.retry_update">更新</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配额超出行为 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-exclamation-triangle"></i> <span
|
||
data-i18n="basic_settings.quota_title">配额超出行为</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="switch-project-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label"
|
||
data-i18n="basic_settings.quota_switch_project">自动切换项目</span>
|
||
</div>
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="switch-preview-model-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label"
|
||
data-i18n="basic_settings.quota_switch_preview">切换到预览模型</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用统计设置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-bar"></i> <span
|
||
data-i18n="basic_settings.usage_statistics_title">使用统计</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="usage-statistics-enabled-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label"
|
||
data-i18n="basic_settings.usage_statistics_enable">启用使用统计</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日志记录设置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-file-alt"></i> <span
|
||
data-i18n="basic_settings.logging_title">日志记录</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="logging-to-file-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label"
|
||
data-i18n="basic_settings.logging_to_file_enable">启用日志记录到文件</span>
|
||
</div>
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="request-log-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label"
|
||
data-i18n="basic_settings.request_log_enable">启用请求日志</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WebSocket 鉴权 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-shield-alt"></i> <span
|
||
data-i18n="basic_settings.ws_auth_title">WebSocket 鉴权</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="toggle-group">
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="ws-auth-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label"
|
||
data-i18n="basic_settings.ws_auth_enable">启用 /ws/* 鉴权</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- API 密钥管理 -->
|
||
<section id="api-keys" class="content-section">
|
||
<h2 data-i18n="api_keys.title">API 密钥管理</h2>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-key"></i> <span
|
||
data-i18n="api_keys.proxy_auth_title">代理服务认证密钥</span></h3>
|
||
<button id="add-api-key" class="btn btn-primary">
|
||
<i class="fas fa-plus"></i> <span data-i18n="api_keys.add_button">添加密钥</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="api-keys-list" class="key-list"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI 提供商 -->
|
||
<section id="ai-providers" class="content-section">
|
||
<h2 data-i18n="ai_providers.title">AI 提供商配置</h2>
|
||
|
||
<!-- Gemini API Keys -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fab fa-google"></i> <span data-i18n="ai_providers.gemini_title">Gemini
|
||
API 密钥</span></h3>
|
||
<button id="add-gemini-key" class="btn btn-primary">
|
||
<i class="fas fa-plus"></i> <span
|
||
data-i18n="ai_providers.gemini_add_button">添加密钥</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="gemini-keys-list" class="key-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Codex API Keys -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-code"></i> <span data-i18n="ai_providers.codex_title">Codex API
|
||
配置</span></h3>
|
||
<button id="add-codex-key" class="btn btn-primary">
|
||
<i class="fas fa-plus"></i> <span
|
||
data-i18n="ai_providers.codex_add_button">添加配置</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="codex-keys-list" class="provider-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Claude API Keys -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-brain"></i> <span data-i18n="ai_providers.claude_title">Claude
|
||
API 配置</span></h3>
|
||
<button id="add-claude-key" class="btn btn-primary">
|
||
<i class="fas fa-plus"></i> <span
|
||
data-i18n="ai_providers.claude_add_button">添加配置</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="claude-keys-list" class="provider-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OpenAI 兼容提供商 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-plug"></i> <span data-i18n="ai_providers.openai_title">OpenAI
|
||
兼容提供商</span></h3>
|
||
<button id="add-openai-provider" class="btn btn-primary">
|
||
<i class="fas fa-plus"></i> <span
|
||
data-i18n="ai_providers.openai_add_button">添加提供商</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="openai-providers-list" class="provider-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vertex AI Credential Import -->
|
||
<div class="card" id="vertex-import-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.title">Vertex AI 凭证导入</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" data-i18n="vertex_import.description">
|
||
上传 Google 服务账号 JSON 并保存为 vertex-<project>.json。
|
||
</p>
|
||
<div class="form-group">
|
||
<label for="vertex-location" data-i18n="vertex_import.location_label">区域 (可选)</label>
|
||
<input type="text" id="vertex-location" data-i18n-placeholder="vertex_import.location_placeholder" value="us-central1">
|
||
<p class="form-hint" data-i18n="vertex_import.location_hint">留空则使用默认 us-central1。</p>
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-i18n="vertex_import.file_label">服务账号密钥 JSON</label>
|
||
<div class="input-group">
|
||
<input type="text" id="vertex-file-display" readonly data-i18n-placeholder="vertex_import.file_placeholder" placeholder="尚未选择文件">
|
||
<input type="file" id="vertex-file-input" accept=".json" style="display: none;">
|
||
<button type="button" id="vertex-select-file" class="btn btn-secondary">
|
||
<i class="fas fa-file-upload"></i> <span data-i18n="vertex_import.choose_file">选择文件</span>
|
||
</button>
|
||
</div>
|
||
<p class="form-hint" data-i18n="vertex_import.file_hint">仅支持 Google Cloud service account JSON。</p>
|
||
</div>
|
||
<div class="form-actions vertex-import-actions">
|
||
<button type="button" id="vertex-import-btn" class="btn btn-primary" disabled>
|
||
<i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.import_button">导入 Vertex 凭证</span>
|
||
</button>
|
||
</div>
|
||
<div id="vertex-import-result" class="vertex-import-result" style="display: none;">
|
||
<div class="vertex-import-result-header">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span data-i18n="vertex_import.result_title">凭证已保存</span>
|
||
</div>
|
||
<ul>
|
||
<li><span data-i18n="vertex_import.result_project">项目 ID</span>: <code id="vertex-result-project">-</code></li>
|
||
<li><span data-i18n="vertex_import.result_email">服务账号</span>: <code id="vertex-result-email">-</code></li>
|
||
<li><span data-i18n="vertex_import.result_location">区域</span>: <code id="vertex-result-location">-</code></li>
|
||
<li><span data-i18n="vertex_import.result_file">存储文件</span>: <code id="vertex-result-file">-</code></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 认证文件管理 -->
|
||
<section id="auth-files" class="content-section">
|
||
<h2 data-i18n="auth_files.title">认证文件管理</h2>
|
||
|
||
<div class="card" style="margin-bottom: 20px;">
|
||
<div class="card-content">
|
||
<p class="form-hint" data-i18n="auth_files.description">
|
||
这里管理 Qwen 和 Gemini 的认证配置文件。上传 JSON 格式的认证文件以启用相应的 AI 服务。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 认证文件 -->
|
||
<div class="card">
|
||
<div class="card-header card-header-with-filter">
|
||
<div class="header-left">
|
||
<h3><i class="fas fa-file-alt"></i> <span
|
||
data-i18n="auth_files.title_section">认证文件</span></h3>
|
||
<!-- 类型筛选 -->
|
||
<div class="auth-file-filter">
|
||
<button class="filter-btn active" data-type="all" data-i18n-text="auth_files.filter_all">All</button>
|
||
<button class="filter-btn" data-type="qwen" data-i18n-text="auth_files.filter_qwen">Qwen</button>
|
||
<button class="filter-btn" data-type="gemini" data-i18n-text="auth_files.filter_gemini">Gemini</button>
|
||
<button class="filter-btn" data-type="gemini-cli" data-i18n-text="auth_files.filter_gemini-cli">GeminiCLI</button>
|
||
<button class="filter-btn" data-type="aistudio" data-i18n-text="auth_files.filter_aistudio">AIStudio</button>
|
||
<button class="filter-btn" data-type="claude" data-i18n-text="auth_files.filter_claude">Claude</button>
|
||
<button class="filter-btn" data-type="codex" data-i18n-text="auth_files.filter_codex">Codex</button>
|
||
<button class="filter-btn" data-type="antigravity" data-i18n-text="auth_files.filter_antigravity">Antigravity</button>
|
||
<button class="filter-btn" data-type="iflow" data-i18n-text="auth_files.filter_iflow">iFlow</button>
|
||
<button class="filter-btn" data-type="vertex" data-i18n-text="auth_files.filter_vertex">Vertex</button>
|
||
<button class="filter-btn" data-type="empty" data-i18n-text="auth_files.filter_empty">Empty</button>
|
||
</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button id="upload-auth-file" class="btn btn-primary">
|
||
<i class="fas fa-upload"></i> <span
|
||
data-i18n="auth_files.upload_button">上传文件</span>
|
||
</button>
|
||
<button id="delete-all-auth-files" class="btn btn-danger">
|
||
<i class="fas fa-trash"></i> <span
|
||
data-i18n="auth_files.delete_all_button">删除全部</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="auth-file-toolbar">
|
||
<div class="auth-file-search-group">
|
||
<label for="auth-files-search-input"
|
||
data-i18n="auth_files.search_label">搜索配置文件</label>
|
||
<div class="auth-file-search">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" id="auth-files-search-input"
|
||
data-i18n-placeholder="auth_files.search_placeholder"
|
||
placeholder="搜索文件名或类型">
|
||
</div>
|
||
</div>
|
||
<div class="auth-file-page-size">
|
||
<label for="auth-files-page-size-input"
|
||
data-i18n="auth_files.page_size_label">单页数量</label>
|
||
<div class="page-size-input">
|
||
<input type="number" id="auth-files-page-size-input" min="3" max="60"
|
||
step="1">
|
||
<span data-i18n="auth_files.page_size_unit">个/页</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="auth-files-list" class="file-list file-grid"></div>
|
||
<div id="auth-files-pagination" class="pagination-controls" style="display: none;">
|
||
<button class="btn btn-secondary pagination-btn" data-action="prev">
|
||
<i class="fas fa-chevron-left"></i>
|
||
<span data-i18n="auth_files.pagination_prev">上一页</span>
|
||
</button>
|
||
<div id="auth-files-pagination-info" class="pagination-info">-</div>
|
||
<button class="btn btn-secondary pagination-btn" data-action="next">
|
||
<span data-i18n="auth_files.pagination_next">下一页</span>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<input type="file" id="auth-file-input" accept=".json" multiple style="display: none;">
|
||
</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">
|
||
<h3><i class="fas fa-code"></i> <span data-i18n="auth_login.codex_oauth_title">Codex
|
||
OAuth</span></h3>
|
||
<button id="codex-oauth-btn" class="btn btn-primary">
|
||
<i class="fas fa-sign-in-alt"></i> <span
|
||
data-i18n="auth_login.codex_oauth_button">开始 Codex 登录</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" style="margin-bottom: 20px;"
|
||
data-i18n="auth_login.codex_oauth_hint">
|
||
通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。
|
||
</p>
|
||
<div id="codex-oauth-content" style="display: none;">
|
||
<div class="form-group">
|
||
<label data-i18n="auth_login.codex_oauth_url_label">授权链接:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="codex-oauth-url" readonly>
|
||
<button id="codex-open-link" class="btn btn-primary">
|
||
<i class="fas fa-external-link-alt"></i> <span
|
||
data-i18n="auth_login.codex_open_link">打开链接</span>
|
||
</button>
|
||
<button id="codex-copy-link" class="btn btn-secondary">
|
||
<i class="fas fa-copy"></i> <span
|
||
data-i18n="auth_login.codex_copy_link">复制链接</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="codex-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Anthropic OAuth -->
|
||
<div class="card" id="anthropic-oauth-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-brain"></i> <span
|
||
data-i18n="auth_login.anthropic_oauth_title">Anthropic OAuth</span></h3>
|
||
<button id="anthropic-oauth-btn" class="btn btn-primary">
|
||
<i class="fas fa-sign-in-alt"></i> <span
|
||
data-i18n="auth_login.anthropic_oauth_button">开始 Anthropic 登录</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" style="margin-bottom: 20px;"
|
||
data-i18n="auth_login.anthropic_oauth_hint">
|
||
通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。
|
||
</p>
|
||
<div id="anthropic-oauth-content" style="display: none;">
|
||
<div class="form-group">
|
||
<label data-i18n="auth_login.anthropic_oauth_url_label">授权链接:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="anthropic-oauth-url" readonly>
|
||
<button id="anthropic-open-link" class="btn btn-primary">
|
||
<i class="fas fa-external-link-alt"></i> <span
|
||
data-i18n="auth_login.anthropic_open_link">打开链接</span>
|
||
</button>
|
||
<button id="anthropic-copy-link" class="btn btn-secondary">
|
||
<i class="fas fa-copy"></i> <span
|
||
data-i18n="auth_login.anthropic_copy_link">复制链接</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="anthropic-oauth-status" class="form-hint" style="margin-top: 10px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Antigravity OAuth -->
|
||
<div class="card" id="antigravity-oauth-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-rocket"></i> <span
|
||
data-i18n="auth_login.antigravity_oauth_title">Antigravity OAuth</span></h3>
|
||
<button id="antigravity-oauth-btn" class="btn btn-primary">
|
||
<i class="fas fa-sign-in-alt"></i> <span
|
||
data-i18n="auth_login.antigravity_oauth_button">开始 Antigravity 登录</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" style="margin-bottom: 20px;"
|
||
data-i18n="auth_login.antigravity_oauth_hint">
|
||
通过 OAuth 流程登录 Antigravity（Google 账号）服务，自动获取并保存认证文件。
|
||
</p>
|
||
<div id="antigravity-oauth-content" style="display: none;">
|
||
<div class="form-group">
|
||
<label data-i18n="auth_login.antigravity_oauth_url_label">授权链接:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="antigravity-oauth-url" readonly>
|
||
<button id="antigravity-open-link" class="btn btn-primary">
|
||
<i class="fas fa-external-link-alt"></i> <span
|
||
data-i18n="auth_login.antigravity_open_link">打开链接</span>
|
||
</button>
|
||
<button id="antigravity-copy-link" class="btn btn-secondary">
|
||
<i class="fas fa-copy"></i> <span
|
||
data-i18n="auth_login.antigravity_copy_link">复制链接</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="antigravity-oauth-status" class="form-hint" style="margin-top: 10px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gemini CLI OAuth -->
|
||
<div class="card" id="gemini-cli-oauth-card">
|
||
<div class="card-header">
|
||
<h3><i class="fab fa-google"></i> <span
|
||
data-i18n="auth_login.gemini_cli_oauth_title">Gemini CLI OAuth</span></h3>
|
||
<button id="gemini-cli-oauth-btn" class="btn btn-primary">
|
||
<i class="fas fa-sign-in-alt"></i> <span
|
||
data-i18n="auth_login.gemini_cli_oauth_button">开始 Gemini CLI 登录</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" style="margin-bottom: 20px;"
|
||
data-i18n="auth_login.gemini_cli_oauth_hint">
|
||
通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。
|
||
</p>
|
||
<div class="form-group" style="margin-bottom: 20px;">
|
||
<label for="gemini-cli-project-id"
|
||
data-i18n="auth_login.gemini_cli_project_id_label">Google Cloud 项目 ID
|
||
(可选):</label>
|
||
<input type="text" id="gemini-cli-project-id"
|
||
data-i18n-placeholder="auth_login.gemini_cli_project_id_placeholder">
|
||
<div class="form-hint" data-i18n="auth_login.gemini_cli_project_id_hint">
|
||
如果指定了项目 ID，将使用该项目的认证信息。
|
||
</div>
|
||
</div>
|
||
<div id="gemini-cli-oauth-content" style="display: none;">
|
||
<div class="form-group">
|
||
<label data-i18n="auth_login.gemini_cli_oauth_url_label">授权链接:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="gemini-cli-oauth-url" readonly>
|
||
<button id="gemini-cli-open-link" class="btn btn-primary">
|
||
<i class="fas fa-external-link-alt"></i> <span
|
||
data-i18n="auth_login.gemini_cli_open_link">打开链接</span>
|
||
</button>
|
||
<button id="gemini-cli-copy-link" class="btn btn-secondary">
|
||
<i class="fas fa-copy"></i> <span
|
||
data-i18n="auth_login.gemini_cli_copy_link">复制链接</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="gemini-cli-oauth-status" class="form-hint" style="margin-top: 10px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Qwen OAuth -->
|
||
<div class="card" id="qwen-oauth-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-robot"></i> <span data-i18n="auth_login.qwen_oauth_title">Qwen
|
||
OAuth</span></h3>
|
||
<button id="qwen-oauth-btn" class="btn btn-primary">
|
||
<i class="fas fa-sign-in-alt"></i> <span
|
||
data-i18n="auth_login.qwen_oauth_button">开始 Qwen 登录</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" style="margin-bottom: 20px;"
|
||
data-i18n="auth_login.qwen_oauth_hint">
|
||
通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。
|
||
</p>
|
||
<div id="qwen-oauth-content" style="display: none;">
|
||
<div class="form-group">
|
||
<label data-i18n="auth_login.qwen_oauth_url_label">授权链接:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="qwen-oauth-url" readonly>
|
||
<button id="qwen-open-link" class="btn btn-primary">
|
||
<i class="fas fa-external-link-alt"></i> <span
|
||
data-i18n="auth_login.qwen_open_link">打开链接</span>
|
||
</button>
|
||
<button id="qwen-copy-link" class="btn btn-secondary">
|
||
<i class="fas fa-copy"></i> <span
|
||
data-i18n="auth_login.qwen_copy_link">复制链接</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="qwen-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- iFlow OAuth -->
|
||
<div class="card" id="iflow-oauth-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-stream"></i> <span
|
||
data-i18n="auth_login.iflow_oauth_title">iFlow OAuth</span></h3>
|
||
<button id="iflow-oauth-btn" class="btn btn-primary">
|
||
<i class="fas fa-sign-in-alt"></i> <span
|
||
data-i18n="auth_login.iflow_oauth_button">开始 iFlow 登录</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" style="margin-bottom: 20px;"
|
||
data-i18n="auth_login.iflow_oauth_hint">
|
||
通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。
|
||
</p>
|
||
<div id="iflow-oauth-content" style="display: none;">
|
||
<div class="form-group">
|
||
<label data-i18n="auth_login.iflow_oauth_url_label">授权链接:</label>
|
||
<div class="input-group">
|
||
<input type="text" id="iflow-oauth-url" readonly>
|
||
<button id="iflow-open-link" class="btn btn-primary">
|
||
<i class="fas fa-external-link-alt"></i> <span
|
||
data-i18n="auth_login.iflow_open_link">打开链接</span>
|
||
</button>
|
||
<button id="iflow-copy-link" class="btn btn-secondary">
|
||
<i class="fas fa-copy"></i> <span
|
||
data-i18n="auth_login.iflow_copy_link">复制链接</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="iflow-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-content" style="border-top: 1px solid var(--border-color); margin-top: 16px; padding-top: 16px;">
|
||
<h4 style="margin-bottom: 10px;" data-i18n="auth_login.iflow_cookie_title">iFlow Cookie 登录</h4>
|
||
<p class="form-hint" data-i18n="auth_login.iflow_cookie_hint">
|
||
直接提交 Cookie 完成登录并保存凭据，无需打开授权链接。
|
||
</p>
|
||
<div class="form-group">
|
||
<label for="iflow-cookie-input" data-i18n="auth_login.iflow_cookie_label">Cookie 内容:</label>
|
||
<textarea id="iflow-cookie-input" rows="3" data-i18n-placeholder="auth_login.iflow_cookie_placeholder" placeholder="粘贴浏览器中的 Cookie"></textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="iflow-cookie-submit" class="btn btn-primary">
|
||
<i class="fas fa-cookie-bite"></i> <span data-i18n="auth_login.iflow_cookie_button">提交 Cookie 登录</span>
|
||
</button>
|
||
</div>
|
||
<div id="iflow-cookie-status" class="form-hint" style="margin-top: 10px;"></div>
|
||
<div id="iflow-cookie-result" class="vertex-import-result" style="display: none;">
|
||
<div class="vertex-import-result-header">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span data-i18n="auth_login.iflow_cookie_result_title">Cookie 登录结果</span>
|
||
</div>
|
||
<ul>
|
||
<li><span data-i18n="auth_login.iflow_cookie_result_email">账号</span>: <code id="iflow-cookie-result-email">-</code></li>
|
||
<li><span data-i18n="auth_login.iflow_cookie_result_expired">过期时间</span>: <code id="iflow-cookie-result-expired">-</code></li>
|
||
<li><span data-i18n="auth_login.iflow_cookie_result_path">保存路径</span>: <code id="iflow-cookie-result-path">-</code></li>
|
||
<li><span data-i18n="auth_login.iflow_cookie_result_type">类型</span>: <code id="iflow-cookie-result-type">-</code></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 日志查看 -->
|
||
<section id="logs" class="content-section">
|
||
<h2 data-i18n="logs.title">日志查看</h2>
|
||
|
||
<div class="card">
|
||
<div class="card-header logs-header">
|
||
<div class="logs-header-main">
|
||
<h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
|
||
<div class="logs-search">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" id="logs-search-input" aria-label="搜索日志" data-i18n-placeholder="logs.search_placeholder" placeholder="搜索日志...">
|
||
</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<div class="toggle-group" style="margin-right: 15px;">
|
||
<label class="toggle-switch" style="margin-right: 5px;">
|
||
<input type="checkbox" id="logs-auto-refresh-toggle">
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
|
||
</div>
|
||
<button id="refresh-logs" class="btn btn-primary">
|
||
<i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
|
||
</button>
|
||
<button id="select-error-log" class="btn btn-secondary">
|
||
<i class="fas fa-file-circle-exclamation"></i> <span data-i18n="logs.error_log_button">选择错误日志</span>
|
||
</button>
|
||
<button id="download-logs" class="btn btn-secondary">
|
||
<i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
|
||
</button>
|
||
<button id="clear-logs" class="btn btn-danger">
|
||
<i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="logs-content" class="logs-container">
|
||
<div class="loading-placeholder" data-i18n="logs.loading">正在加载日志...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- 使用统计 -->
|
||
<section id="usage-stats" class="content-section">
|
||
<h2 data-i18n="usage_stats.title">使用统计</h2>
|
||
|
||
<!-- 概览统计卡片 -->
|
||
<div class="stats-overview">
|
||
<div class="stat-card">
|
||
<div class="stat-card-header">
|
||
<div class="stat-meta">
|
||
<div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
|
||
<div class="stat-number" id="total-requests">0</div>
|
||
<div class="stat-subtext stat-subtext-inline">
|
||
<span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
|
||
<span class="dot-divider">•</span>
|
||
<span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-icon">
|
||
<i class="fas fa-paper-plane"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-sparkline" aria-label="30分钟请求趋势">
|
||
<canvas id="requests-sparkline"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-card-header">
|
||
<div class="stat-meta">
|
||
<div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
|
||
<div class="stat-number" id="total-tokens">0</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 class="stat-icon">
|
||
<i class="fas fa-coins"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-sparkline" aria-label="30分钟Token趋势">
|
||
<canvas id="tokens-sparkline"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-card-header">
|
||
<div class="stat-meta">
|
||
<div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
|
||
<div class="stat-number" id="rpm-30m">0</div>
|
||
</div>
|
||
<div class="stat-icon">
|
||
<i class="fas fa-gauge-high"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-sparkline" aria-label="30分钟RPM趋势">
|
||
<canvas id="rpm-sparkline"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-card-header">
|
||
<div class="stat-meta">
|
||
<div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
|
||
<div class="stat-number" id="tpm-30m">0</div>
|
||
</div>
|
||
<div class="stat-icon">
|
||
<i class="fas fa-stopwatch"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-sparkline" aria-label="30分钟TPM趋势">
|
||
<canvas id="tpm-sparkline"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card cost-summary-card">
|
||
<div class="stat-card-header">
|
||
<div class="stat-meta">
|
||
<div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
|
||
<div class="stat-number" id="total-cost">--</div>
|
||
<div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
|
||
</div>
|
||
<div class="stat-icon">
|
||
<i class="fas fa-dollar-sign"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-sparkline" aria-label="30分钟花费趋势">
|
||
<canvas id="cost-sparkline"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表曲线选择 -->
|
||
<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>
|
||
<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 chart-line-group" data-line-index="1">
|
||
<label for="chart-line-select-1" data-i18n="usage_stats.chart_line_label_2">曲线 2</label>
|
||
<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 chart-line-group" data-line-index="2">
|
||
<label for="chart-line-select-2" data-i18n="usage_stats.chart_line_label_3">曲线 3</label>
|
||
<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>
|
||
|
||
<!-- 图表区域 -->
|
||
<div class="charts-container">
|
||
<!-- 请求趋势图 -->
|
||
<div class="card chart-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-line"></i> <span
|
||
data-i18n="usage_stats.requests_trend">请求趋势</span></h3>
|
||
<div class="chart-controls">
|
||
<button class="btn btn-small" data-period="hour" id="requests-hour-btn">
|
||
<span data-i18n="usage_stats.by_hour">按小时</span>
|
||
</button>
|
||
<button class="btn btn-small active" data-period="day"
|
||
id="requests-day-btn">
|
||
<span data-i18n="usage_stats.by_day">按天</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="chart-container">
|
||
<canvas id="requests-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Token使用趋势图 -->
|
||
<div class="card chart-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-area"></i> <span
|
||
data-i18n="usage_stats.tokens_trend">Token 使用趋势</span></h3>
|
||
<div class="chart-controls">
|
||
<button class="btn btn-small" data-period="hour" id="tokens-hour-btn">
|
||
<span data-i18n="usage_stats.by_hour">按小时</span>
|
||
</button>
|
||
<button class="btn btn-small active" data-period="day" id="tokens-day-btn">
|
||
<span data-i18n="usage_stats.by_day">按天</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="chart-container">
|
||
<canvas id="tokens-chart"></canvas>
|
||
</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详细统计 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-list"></i> <span data-i18n="usage_stats.api_details">API
|
||
详细统计</span></h3>
|
||
<button id="refresh-usage-stats" class="btn btn-primary">
|
||
<i class="fas fa-sync-alt"></i> <span data-i18n="usage_stats.refresh">刷新</span>
|
||
</button>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="api-stats-table" class="api-stats-table">
|
||
<div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
|
||
</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>
|
||
|
||
<!-- 配置管理 -->
|
||
<section id="config-management" class="content-section">
|
||
<h2 data-i18n="config_management.title">配置管理</h2>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-file-code"></i> <span data-i18n="config_management.editor_title">配置文件</span></h3>
|
||
<div class="editor-actions">
|
||
<button id="config-reload-btn" class="btn btn-secondary">
|
||
<i class="fas fa-sync-alt"></i> <span data-i18n="config_management.reload">重新加载</span>
|
||
</button>
|
||
<button id="config-save-btn" class="btn btn-primary">
|
||
<i class="fas fa-save"></i> <span data-i18n="config_management.save">保存</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<p class="form-hint" data-i18n="config_management.description">查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。</p>
|
||
<div class="yaml-editor-container">
|
||
<textarea id="config-editor" class="yaml-editor" spellcheck="false" data-i18n="config_management.editor_placeholder"></textarea>
|
||
<div id="config-editor-status" class="editor-status" data-i18n="config_management.status_idle">等待操作</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 管理中心信息 -->
|
||
<section id="system-info" class="content-section">
|
||
<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">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span>
|
||
</h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="connection-info">
|
||
<div class="info-item">
|
||
<div class="info-label">
|
||
<i class="fas fa-globe"></i>
|
||
<span data-i18n="connection.server_address">服务器地址:</span>
|
||
</div>
|
||
<div class="info-value" id="display-api-url">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">
|
||
<i class="fas fa-circle"></i>
|
||
<span data-i18n="connection.status">连接状态:</span>
|
||
</div>
|
||
<div class="info-value" id="display-connection-status">
|
||
<span class="status-indicator disconnected"
|
||
data-i18n="common.disconnected">未连接</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-info-circle"></i> <span
|
||
data-i18n="system_info.connection_status_title">连接状态</span></h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="system-status" class="status-info">
|
||
<div class="status-item">
|
||
<span class="status-label" data-i18n="system_info.api_status_label">API
|
||
状态:</span>
|
||
<span id="api-status" class="status-value"
|
||
data-i18n="common.disconnected">未连接</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label"
|
||
data-i18n="system_info.config_status_label">配置状态:</span>
|
||
<span id="config-status" class="status-value"
|
||
data-i18n="system_info.not_loaded">未加载</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label"
|
||
data-i18n="system_info.last_update_label">最后更新:</span>
|
||
<span id="last-update" class="status-value">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-arrows-rotate"></i> <span data-i18n="system_info.version_check_title">版本检查</span></h3>
|
||
</div>
|
||
<div class="card-content version-check">
|
||
<p class="form-hint" data-i18n="system_info.version_check_desc">调用 /latest-version 接口比对服务器版本，提示是否有可用更新。</p>
|
||
<div class="version-check-rows">
|
||
<div class="version-check-row">
|
||
<span class="status-label" data-i18n="system_info.version_current_label">当前版本</span>
|
||
<span id="version-check-current" class="version-check-value">-</span>
|
||
</div>
|
||
<div class="version-check-row">
|
||
<span class="status-label" data-i18n="system_info.version_latest_label">最新版本</span>
|
||
<span id="version-check-latest" class="version-check-value">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="version-check-actions">
|
||
<button type="button" id="version-check-btn" class="btn btn-primary">
|
||
<i class="fas fa-search"></i> <span data-i18n="system_info.version_check_button">检查更新</span>
|
||
</button>
|
||
<span id="version-check-result" class="version-check-result" data-i18n="system_info.version_check_idle">点击检查更新</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- /内容区域 -->
|
||
|
||
<!-- 版本信息 -->
|
||
<footer class="version-footer">
|
||
<div class="version-info">
|
||
<span data-i18n="footer.api_version">CLI Proxy API 版本</span>:
|
||
<span id="api-version">-</span>
|
||
<span class="separator">•</span>
|
||
<span data-i18n="footer.build_date">构建时间</span>:
|
||
<span id="api-build-date">-</span>
|
||
<span class="separator">•</span>
|
||
<span data-i18n="footer.version">管理中心版本</span>:
|
||
<span id="ui-version" data-ui-version="__VERSION__">-</span>
|
||
<span class="separator">•</span>
|
||
<span data-i18n="footer.author">作者</span>: CLI Proxy API Team
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<!-- /主内容区域 -->
|
||
</div>
|
||
<!-- /主内容包装器 -->
|
||
</div>
|
||
<!-- /主页面 -->
|
||
|
||
<!-- 模态框 -->
|
||
<div id="modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<div id="modal-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通知 -->
|
||
<div id="notification" class="notification"></div>
|
||
|
||
</div>
|
||
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
|
||
</html>
|