Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GCLI2API 控制面板</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| .container { | |
| background-color: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| color: #555; | |
| } | |
| input[type="text"] { | |
| width: 100%; | |
| padding: 10px; | |
| border: 2px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| box-sizing: border-box; | |
| } | |
| input[type="text"]:focus { | |
| border-color: #4285f4; | |
| outline: none; | |
| } | |
| .btn { | |
| background-color: #4285f4; | |
| color: white; | |
| padding: 12px 30px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| width: 100%; | |
| margin-bottom: 10px; | |
| } | |
| .btn:hover { | |
| background-color: #3367d6; | |
| } | |
| .btn:disabled { | |
| background-color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .auth-url { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin: 20px 0; | |
| word-break: break-all; | |
| } | |
| .auth-url a { | |
| color: #4285f4; | |
| text-decoration: none; | |
| } | |
| .auth-url a:hover { | |
| text-decoration: underline; | |
| } | |
| .credentials { | |
| background-color: #f0f8ff; | |
| border: 1px solid #b0d4ff; | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin: 20px 0; | |
| font-family: monospace; | |
| font-size: 12px; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .status { | |
| padding: 10px; | |
| border-radius: 5px; | |
| margin: 10px 0; | |
| } | |
| .status.success { | |
| background-color: #d4edda; | |
| border: 1px solid #c3e6cb; | |
| color: #155724; | |
| } | |
| .status.error { | |
| background-color: #f8d7da; | |
| border: 1px solid #f5c6cb; | |
| color: #721c24; | |
| } | |
| .status.info { | |
| background-color: #d1ecf1; | |
| border: 1px solid #bee5eb; | |
| color: #0c5460; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .loading { | |
| text-align: center; | |
| color: #666; | |
| } | |
| .login-form { | |
| text-align: center; | |
| padding: 50px 0; | |
| } | |
| .login-form input[type="password"] { | |
| width: 300px; | |
| padding: 12px; | |
| border: 2px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| margin-bottom: 20px; | |
| box-sizing: border-box; | |
| } | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid #ddd; | |
| margin-bottom: 20px; | |
| } | |
| .tab { | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| border: none; | |
| background: #f5f5f5; | |
| border-bottom: 2px solid transparent; | |
| } | |
| .tab.active { | |
| background: white; | |
| border-bottom-color: #4285f4; | |
| color: #4285f4; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .upload-area { | |
| border: 2px dashed #ddd; | |
| border-radius: 5px; | |
| padding: 40px; | |
| text-align: center; | |
| background-color: #fafafa; | |
| margin: 20px 0; | |
| cursor: pointer; | |
| transition: border-color 0.3s; | |
| } | |
| .upload-area:hover { | |
| border-color: #4285f4; | |
| } | |
| .upload-area.dragover { | |
| border-color: #4285f4; | |
| background-color: #f0f8ff; | |
| } | |
| .file-list { | |
| margin: 20px 0; | |
| } | |
| .file-item { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 3px; | |
| padding: 10px; | |
| margin: 5px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .file-item .file-name { | |
| font-family: monospace; | |
| color: #333; | |
| } | |
| .file-item .file-size { | |
| color: #666; | |
| font-size: 12px; | |
| } | |
| .file-item .remove-btn { | |
| background: #dc3545; | |
| color: white; | |
| border: none; | |
| border-radius: 3px; | |
| padding: 2px 8px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| } | |
| .upload-progress { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 5px; | |
| padding: 15px; | |
| margin: 20px 0; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 20px; | |
| background-color: #e9ecef; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin: 10px 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #28a745; | |
| transition: width 0.3s ease; | |
| } | |
| /* 文件管理样式 */ | |
| .cred-card { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin: 10px 0; | |
| position: relative; | |
| min-width: 600px; | |
| } | |
| .cred-card.disabled { | |
| background-color: #f5f5f5; | |
| border-color: #ccc; | |
| opacity: 0.7; | |
| } | |
| .cred-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 10px; | |
| gap: 20px; | |
| } | |
| .cred-filename { | |
| font-family: monospace; | |
| font-weight: bold; | |
| color: #333; | |
| font-size: 14px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| min-width: 300px; | |
| } | |
| .cred-status { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .status-badge { | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| color: white; | |
| } | |
| .status-badge.enabled { | |
| background-color: #28a745; | |
| } | |
| .status-badge.disabled { | |
| background-color: #6c757d; | |
| } | |
| .error-codes { | |
| background-color: #f8d7da; | |
| color: #721c24; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| } | |
| .cred-actions { | |
| display: flex; | |
| gap: 5px; | |
| flex-wrap: wrap; | |
| } | |
| .cred-btn { | |
| padding: 4px 12px; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .cred-btn.enable { | |
| background-color: #28a745; | |
| color: white; | |
| } | |
| .cred-btn.disable { | |
| background-color: #6c757d; | |
| color: white; | |
| } | |
| .cred-btn.delete { | |
| background-color: #dc3545; | |
| color: white; | |
| } | |
| .cred-btn.download { | |
| background-color: #007bff; | |
| color: white; | |
| } | |
| .cred-btn.view { | |
| background-color: #17a2b8; | |
| color: white; | |
| } | |
| .cred-details { | |
| margin-top: 10px; | |
| display: none; | |
| } | |
| .cred-details.show { | |
| display: block; | |
| } | |
| .cred-content { | |
| background-color: #f0f8ff; | |
| border: 1px solid #b0d4ff; | |
| border-radius: 4px; | |
| padding: 10px; | |
| font-family: monospace; | |
| font-size: 11px; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .manage-actions { | |
| margin-bottom: 20px; | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| /* 文件管理新增样式 */ | |
| .stats-container { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| background: linear-gradient(45deg, #f8f9fa, #e9ecef); | |
| border: 1px solid #dee2e6; | |
| border-radius: 8px; | |
| padding: 12px 20px; | |
| text-align: center; | |
| min-width: 120px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-number { | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: #333; | |
| display: block; | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: #666; | |
| text-transform: uppercase; | |
| margin-top: 4px; | |
| } | |
| .stat-item.total { | |
| border-left: 4px solid #007bff; | |
| } | |
| .stat-item.normal { | |
| border-left: 4px solid #28a745; | |
| } | |
| .stat-item.disabled { | |
| border-left: 4px solid #6c757d; | |
| } | |
| .filter-container { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .filter-select { | |
| padding: 8px 12px; | |
| border: 2px solid #ddd; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| background-color: white; | |
| } | |
| .filter-select:focus { | |
| border-color: #4285f4; | |
| outline: none; | |
| } | |
| .pagination-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 20px 0; | |
| flex-wrap: wrap; | |
| } | |
| .pagination-info { | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| .pagination-btn { | |
| padding: 8px 12px; | |
| border: 1px solid #ddd; | |
| background: white; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| } | |
| .pagination-btn:hover:not(:disabled) { | |
| background: #f8f9fa; | |
| border-color: #4285f4; | |
| } | |
| .pagination-btn:disabled { | |
| background: #f5f5f5; | |
| color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .pagination-btn.active { | |
| background: #4285f4; | |
| color: white; | |
| border-color: #4285f4; | |
| } | |
| .page-size-select { | |
| padding: 6px 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| } | |
| .refresh-btn { | |
| background-color: #17a2b8; | |
| color: white; | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .download-all-btn { | |
| background-color: #28a745; | |
| color: white; | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| /* 批量操作样式 */ | |
| .batch-controls { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .checkbox-container { | |
| display: flex; | |
| align-items: center; | |
| margin-right: 15px; | |
| } | |
| .batch-actions { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| margin-top: 10px; | |
| } | |
| .batch-btn { | |
| padding: 6px 12px; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .batch-btn.batch-enable { | |
| background-color: #28a745; | |
| color: white; | |
| } | |
| .batch-btn.batch-disable { | |
| background-color: #6c757d; | |
| color: white; | |
| } | |
| .batch-btn.batch-delete { | |
| background-color: #dc3545; | |
| color: white; | |
| } | |
| .batch-btn.batch-email { | |
| background-color: #17a2b8; | |
| color: white; | |
| } | |
| .batch-btn:disabled { | |
| background-color: #e9ecef; | |
| color: #6c757d; | |
| cursor: not-allowed; | |
| } | |
| .cred-btn.email { | |
| background-color: #17a2b8; | |
| color: white; | |
| } | |
| .cred-btn.email:hover { | |
| background-color: #138496; | |
| } | |
| .selected-count { | |
| font-weight: bold; | |
| color: #007bff; | |
| margin-right: 10px; | |
| } | |
| .select-all-checkbox { | |
| margin-right: 8px; | |
| transform: scale(1.2); | |
| } | |
| /* 错误码筛选增强 */ | |
| .error-filter-container { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .error-code-badge { | |
| display: inline-block; | |
| background-color: #dc3545; | |
| color: white; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-size: 11px; | |
| margin: 1px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .error-code-badge:hover { | |
| background-color: #c82333; | |
| } | |
| .error-code-badge.selected { | |
| background-color: #007bff; | |
| } | |
| /* 配置管理样式 */ | |
| .config-group { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin: 15px 0; | |
| } | |
| .config-group h4 { | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| color: #333; | |
| border-bottom: 1px solid #e1e4e8; | |
| padding-bottom: 8px; | |
| } | |
| .config-input { | |
| width: 100%; | |
| padding: 8px 12px; | |
| border: 2px solid #ddd; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| box-sizing: border-box; | |
| margin-bottom: 5px; | |
| } | |
| .config-input:focus { | |
| border-color: #4285f4; | |
| outline: none; | |
| } | |
| .config-input:disabled { | |
| background-color: #f5f5f5; | |
| color: #666; | |
| cursor: not-allowed; | |
| } | |
| .config-checkbox { | |
| margin-right: 8px; | |
| transform: scale(1.2); | |
| } | |
| .config-note { | |
| display: block; | |
| color: #666; | |
| font-size: 12px; | |
| margin-bottom: 10px; | |
| font-style: italic; | |
| } | |
| .config-info { | |
| background-color: #e3f2fd; | |
| border: 1px solid #1976d2; | |
| border-radius: 4px; | |
| padding: 12px; | |
| margin-top: 8px; | |
| font-size: 13px; | |
| color: #1565c0; | |
| } | |
| .config-info ul { | |
| margin: 8px 0 4px 0; | |
| color: #424242; | |
| } | |
| .config-info li { | |
| margin: 3px 0; | |
| } | |
| .env-locked { | |
| position: relative; | |
| } | |
| .env-locked::after { | |
| content: "🔒 环境变量锚定"; | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: #ffc107; | |
| color: #212529; | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| font-size: 11px; | |
| pointer-events: none; | |
| } | |
| /* 使用统计样式 */ | |
| .usage-card { | |
| background-color: #f8f9fa; | |
| border: 1px solid #e1e4e8; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin: 10px 0; | |
| position: relative; | |
| } | |
| .usage-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .usage-filename { | |
| font-family: monospace; | |
| font-weight: bold; | |
| color: #333; | |
| font-size: 14px; | |
| } | |
| .usage-progress { | |
| margin: 10px 0; | |
| } | |
| .usage-progress-label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 5px; | |
| font-size: 12px; | |
| } | |
| .usage-progress-bar { | |
| width: 100%; | |
| height: 20px; | |
| background-color: #e9ecef; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .usage-progress-fill { | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .usage-progress-fill.gemini { | |
| background-color: #ff6b35; | |
| } | |
| .usage-progress-fill.total { | |
| background-color: #007bff; | |
| } | |
| .usage-progress-fill.warning { | |
| background-color: #ffc107; | |
| } | |
| .usage-progress-fill.danger { | |
| background-color: #dc3545; | |
| } | |
| .usage-actions { | |
| display: flex; | |
| gap: 5px; | |
| margin-top: 10px; | |
| } | |
| .usage-btn { | |
| padding: 4px 8px; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .usage-btn.reset { | |
| background-color: #6c757d; | |
| color: white; | |
| } | |
| .usage-btn.limits { | |
| background-color: #17a2b8; | |
| color: white; | |
| } | |
| .usage-info { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-top: 10px; | |
| font-size: 12px; | |
| } | |
| .usage-info-item { | |
| background-color: #ffffff; | |
| padding: 8px; | |
| border-radius: 4px; | |
| border: 1px solid #dee2e6; | |
| } | |
| .usage-info-label { | |
| font-weight: bold; | |
| color: #666; | |
| display: block; | |
| margin-bottom: 2px; | |
| } | |
| .usage-info-value { | |
| color: #333; | |
| } | |
| .reset-time { | |
| font-size: 11px; | |
| color: #666; | |
| font-style: italic; | |
| margin-top: 5px; | |
| } | |
| /* 限制设置弹窗样式 */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| } | |
| .modal-content { | |
| background-color: #fefefe; | |
| margin: 15% auto; | |
| padding: 20px; | |
| border-radius: 8px; | |
| width: 400px; | |
| max-width: 90%; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #dee2e6; | |
| } | |
| .modal-title { | |
| margin: 0; | |
| font-size: 16px; | |
| color: #333; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 20px; | |
| cursor: pointer; | |
| color: #999; | |
| } | |
| .modal-close:hover { | |
| color: #333; | |
| } | |
| .modal-body { | |
| margin-bottom: 15px; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- 登录界面 --> | |
| <div id="loginSection" class="login-form"> | |
| <h1>GCLI2API 管理面板</h1> | |
| <p>请输入访问密码：</p> | |
| <input type="password" id="loginPassword" placeholder="输入密码" onkeypress="handlePasswordEnter(event)" /> | |
| <br> | |
| <button class="btn" onclick="login()">登录</button> | |
| </div> | |
| <!-- 主界面 --> | |
| <div id="mainSection" class="hidden"> | |
| <h1>GCLI2API 管理面板</h1> | |
| <!-- 标签页 --> | |
| <div class="tabs"> | |
| <button class="tab active" onclick="switchTab('oauth')">OAuth认证</button> | |
| <button class="tab" onclick="switchTab('upload')">批量上传</button> | |
| <button class="tab" onclick="switchTab('envload')">环境变量</button> | |
| <button class="tab" onclick="switchTab('manage')">文件管理</button> | |
| <button class="tab" onclick="switchTab('usage')">使用统计</button> | |
| <button class="tab" onclick="switchTab('config')">配置管理</button> | |
| <button class="tab" onclick="switchTab('logs')">实时日志</button> | |
| <button class="tab" onclick="switchTab('about')">项目信息</button> | |
| </div> | |
| <!-- OAuth认证标签页 --> | |
| <div id="oauthTab" class="tab-content active"> | |
| <!-- API 自动启用说明 --> | |
| <div class="status success" style="margin-bottom: 20px;"> | |
| <strong>✨ 自动化优化：</strong> 系统现在会在认证成功后自动为您的项目启用必需的API服务 | |
| <ul style="margin: 10px 0; padding-left: 20px;"> | |
| <li><strong>Gemini Cloud Assist API</strong></li> | |
| <li><strong>Gemini for Google Cloud API</strong></li> | |
| </ul> | |
| <p style="margin: 10px 0; color: #155724;"><strong>说明：</strong>无需手动启用API，系统会自动处理这些配置步骤，让认证流程更加顺畅。 | |
| </p> | |
| </div> | |
| <!-- 折叠式 Project ID 输入框 --> | |
| <div class="form-group"> | |
| <div style="cursor: pointer; user-select: none; padding: 12px; border: 2px solid #ddd; border-radius: 5px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center;" | |
| onclick="toggleProjectIdSection()"> | |
| <span style="font-weight: bold; color: #555;">📁 高级选项：Google Cloud Project ID | |
| (不用管，直接点击获取链接即可)</span> | |
| <span id="projectIdToggleIcon" | |
| style="font-size: 14px; color: #666; transition: transform 0.3s ease;">▶</span> | |
| </div> | |
| <div id="projectIdSection" | |
| style="display: none; margin-top: 15px; padding: 15px; border: 2px solid #ddd; border-top: none; border-radius: 0 0 5px 5px; background: #ffffff;"> | |
| <label for="projectId" | |
| style="display: block; margin-bottom: 5px; font-weight: bold; color: #555;">Google Cloud | |
| Project ID (可选):</label> | |
| <input type="text" id="projectId" | |
| style="width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; box-sizing: border-box;" | |
| placeholder="留空将尝试自动检测，或手动输入项目ID" /> | |
| <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;"> | |
| 💡 提示：如果你不懂这是什么，可以留空此字段让系统自动检测项目ID | |
| </small> | |
| </div> | |
| </div> | |
| <!-- 为所有项目获取凭证选项 --> | |
| <div class="form-group"> | |
| <div style="padding: 15px; border: 2px solid #28a745; border-radius: 8px; background: #f8fff9;"> | |
| <div style="display: flex; align-items: center; gap: 12px;"> | |
| <input type="checkbox" id="getAllProjectsCreds" style="transform: scale(1.3);"> | |
| <label for="getAllProjectsCreds" | |
| style="font-weight: bold; color: #28a745; margin: 0; cursor: pointer;"> | |
| 🌐 为当前账号所有项目获取凭证 | |
| </label> | |
| </div> | |
| <div style="margin-top: 10px; color: #155724; font-size: 14px; line-height: 1.5;"> | |
| <strong>说明：</strong>勾选此选项后，系统会自动检测当前Google账号下的所有项目，<strong>并发处理</strong>为每个项目生成独立的认证文件。 | |
| </div> | |
| <div id="allProjectsNote" | |
| style="margin-top: 8px; padding: 8px; background: #d4edda; border-radius: 5px; font-size: 13px; color: #155724; display: none;"> | |
| ✨ <strong>批量并发认证模式已启用</strong> - 认证完成后将并发为所有可访问的项目生成凭证文件 | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn" id="getAuthBtn" onclick="startAuth()">获取认证链接</button> | |
| <div id="authUrlSection" class="hidden"> | |
| <h3>认证链接：</h3> | |
| <div class="auth-url"> | |
| <a id="authUrl" href="#" target="_blank">点击此链接进行认证</a> | |
| </div> | |
| <div class="status info"> | |
| <strong>重要说明：</strong> | |
| <ol style="margin: 10px 0; padding-left: 20px;"> | |
| <li>点击上方认证链接，会在新窗口中打开Google OAuth页面</li> | |
| <li>完成Google账号登录和授权</li> | |
| <li>授权成功后会跳转到localhost:8080显示成功页面</li> | |
| <li>关闭OAuth窗口，返回本页面</li> | |
| <li>点击下方"获取认证文件"按钮完成流程</li> | |
| </ol> | |
| </div> | |
| <!-- 快捷回调URL输入选项 --> | |
| <div class="form-group" | |
| style="margin: 20px 0; padding: 15px; border: 2px solid #e8f4fd; border-radius: 8px; background: #f8fcff;"> | |
| <div style="cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;" | |
| onclick="toggleCallbackUrlSection()"> | |
| <span style="font-weight: bold; color: #0066cc;">🚀 无法回源？试试快捷方式</span> | |
| <span id="callbackUrlToggleIcon" | |
| style="font-size: 14px; color: #666; transition: transform 0.3s ease;">▼</span> | |
| </div> | |
| <div id="callbackUrlSection" style="display: none;"> | |
| <div | |
| style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 12px; margin-bottom: 12px;"> | |
| <div style="color: #856404; font-size: 14px; font-weight: bold; margin-bottom: 6px;">📚 | |
| 适用场景：</div> | |
| <ul | |
| style="color: #856404; font-size: 13px; margin: 0; padding-left: 18px; line-height: 1.5;"> | |
| <li>云服务器、VPS等非本地环境</li> | |
| <li>防火墙阻止了8080端口访问</li> | |
| <li>网络环境无法正常回源到localhost</li> | |
| <li>Docker容器内运行，端口映射问题</li> | |
| </ul> | |
| </div> | |
| <div style="color: #666; font-size: 13px; margin-bottom: 12px; line-height: 1.6;"> | |
| <strong style="color: #0066cc;">🔍 什么是回调URL？</strong><br> | |
| 完成Google OAuth授权后，浏览器地址栏显示的完整URL，通常看起来像这样：<br> | |
| <code | |
| style="background: #f1f3f4; padding: 2px 6px; border-radius: 3px; font-size: 12px; word-break: break-all;"> | |
| http://localhost:8080/?state=abc123...&code=4/0AVMBsJ...&scope=email%20profile... | |
| </code> | |
| </div> | |
| <div | |
| style="background: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 6px; padding: 10px; margin-bottom: 12px;"> | |
| <div style="color: #0066cc; font-size: 13px; font-weight: bold; margin-bottom: 4px;">📋 | |
| 使用步骤：</div> | |
| <ol | |
| style="color: #0066cc; font-size: 12px; margin: 0; padding-left: 18px; line-height: 1.4;"> | |
| <li>点击上方认证链接，完成Google授权</li> | |
| <li>授权成功后，复制浏览器地址栏的<strong>完整URL</strong></li> | |
| <li>粘贴到下方输入框，点击获取凭证即可</li> | |
| </ol> | |
| </div> | |
| <div class="input-group"> | |
| <input type="url" id="callbackUrlInput" | |
| placeholder="粘贴完整的回调URL，例如：http://localhost:8080/?state=xxx&code=xxx&scope=xxx..." | |
| style="width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 4px; font-size: 13px;"> | |
| </div> | |
| <button class="btn" style="margin-top: 10px; background: #28a745; border-color: #28a745;" | |
| onclick="processCallbackUrl()"> | |
| 从回调URL获取凭证 | |
| </button> | |
| </div> | |
| </div> | |
| <button class="btn" id="getCredsBtn" onclick="getCredentials()">获取认证文件</button> | |
| </div> | |
| <div id="credentialsSection" class="hidden"> | |
| <h3>认证文件内容：</h3> | |
| <div class="credentials" id="credentialsContent"></div> | |
| </div> | |
| </div> | |
| <!-- 批量上传标签页 --> | |
| <div id="uploadTab" class="tab-content"> | |
| <h3>批量上传认证文件</h3> | |
| <p>支持上传多个JSON格式的认证文件到服务器</p> | |
| <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()"> | |
| <p>点击选择文件或拖拽文件到此区域</p> | |
| <p style="color: #666; font-size: 14px;">支持 .json 和 .zip 格式文件</p> | |
| <p style="color: #888; font-size: 12px;">ZIP文件会自动解压提取其中的JSON凭证</p> | |
| </div> | |
| <input type="file" id="fileInput" multiple accept=".json,.zip" style="display: none;" | |
| onchange="handleFileSelect(event)" /> | |
| <div id="fileListSection" class="hidden"> | |
| <h4>选择的文件：</h4> | |
| <div class="file-list" id="fileList"></div> | |
| <button class="btn" onclick="uploadFiles()">上传文件</button> | |
| <button class="btn" style="background-color: #6c757d;" onclick="clearFiles()">清空列表</button> | |
| </div> | |
| <div id="uploadProgressSection" class="hidden"> | |
| <div class="upload-progress"> | |
| <h4>上传进度：</h4> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill" style="width: 0%"></div> | |
| </div> | |
| <p id="progressText">0%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 环境变量标签页 --> | |
| <div id="envloadTab" class="tab-content"> | |
| <h3>环境变量凭证导入</h3> | |
| <p>从环境变量批量导入认证文件，支持部署自动化场景</p> | |
| <!-- 环境变量状态信息 --> | |
| <div id="envStatusSection"> | |
| <div class="loading" id="envStatusLoading">正在检查环境变量状态...</div> | |
| <div id="envStatusContent" class="hidden"> | |
| <div class="config-group"> | |
| <h4>环境变量状态</h4> | |
| <div class="form-group"> | |
| <label>可用的环境变量:</label> | |
| <div id="envVarsList" class="cred-content"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label>自动加载设置:</label> | |
| <span id="autoLoadStatus" style="font-weight: bold;"></span> | |
| <small class="config-note"> | |
| 要启用自动加载，请设置环境变量 AUTO_LOAD_ENV_CREDS=true | |
| </small> | |
| </div> | |
| <div class="form-group"> | |
| <label>已导入的环境变量文件:</label> | |
| <span id="envFilesCount" style="font-weight: bold;"></span> | |
| <div id="envFilesList" class="config-note"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 操作按钮 --> | |
| <div class="manage-actions"> | |
| <button class="btn" onclick="checkEnvCredsStatus()">刷新状态</button> | |
| <button class="btn" onclick="loadEnvCredentials()">从环境变量导入</button> | |
| <button class="btn" style="background-color: #dc3545;" | |
| onclick="clearEnvCredentials()">清除环境变量文件</button> | |
| </div> | |
| <!-- 使用说明 --> | |
| <div class="config-group"> | |
| <h4>使用说明</h4> | |
| <div class="config-info"> | |
| <strong>环境变量格式：</strong> | |
| <ul> | |
| <li><code>GCLI_CREDS_1</code>, <code>GCLI_CREDS_2</code>, ... (编号格式)</li> | |
| <li><code>GCLI_CREDS_项目名1</code>, <code>GCLI_CREDS_项目名2</code>, ... (项目名格式)</li> | |
| </ul> | |
| <strong>环境变量值：</strong> 完整的认证文件JSON内容 | |
| <br><br> | |
| <strong>示例：</strong> | |
| <pre style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-size: 11px;"> | |
| export GCLI_CREDS_1='{"client_id":"your-client-id","client_secret":"your-secret","refresh_token":"your-token","token_uri":"https://oauth2.googleapis.com/token","project_id":"your-project"}' | |
| export GCLI_CREDS_myproject='{"client_id":"...","project_id":"myproject",...}' | |
| export AUTO_LOAD_ENV_CREDS=true # 启用程序启动时自动导入</pre> | |
| <strong>Docker部署示例：</strong> | |
| <pre style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-size: 11px;"> | |
| docker run -e GCLI_CREDS_1='{"client_id":"..."}' \ | |
| -e AUTO_LOAD_ENV_CREDS=true \ | |
| your-image</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 文件管理标签页 --> | |
| <div id="manageTab" class="tab-content"> | |
| <h3>凭证文件管理</h3> | |
| <p>管理所有认证文件，查看状态和执行操作</p> | |
| <!-- 状态统计 --> | |
| <div class="stats-container" id="statsContainer"> | |
| <div class="stat-item total"> | |
| <span class="stat-number" id="statTotal">0</span> | |
| <span class="stat-label">总计</span> | |
| </div> | |
| <div class="stat-item normal"> | |
| <span class="stat-number" id="statNormal">0</span> | |
| <span class="stat-label">正常</span> | |
| </div> | |
| <div class="stat-item disabled"> | |
| <span class="stat-number" id="statDisabled">0</span> | |
| <span class="stat-label">禁用</span> | |
| </div> | |
| </div> | |
| <div class="manage-actions"> | |
| <button class="refresh-btn" onclick="refreshCredsStatus()">刷新状态</button> | |
| <button class="download-all-btn" onclick="downloadAllCreds()">打包下载所有文件</button> | |
| </div> | |
| <!-- 批量操作控件 --> | |
| <div class="batch-controls"> | |
| <h4 style="margin-top: 0; margin-bottom: 10px;">批量操作</h4> | |
| <div class="batch-actions"> | |
| <div class="checkbox-container"> | |
| <input type="checkbox" id="selectAllCheckbox" class="select-all-checkbox" | |
| onchange="toggleSelectAll()"> | |
| <label for="selectAllCheckbox">全选</label> | |
| </div> | |
| <span class="selected-count" id="selectedCount">已选择 0 项</span> | |
| <button class="batch-btn batch-enable" id="batchEnableBtn" onclick="batchAction('enable')" | |
| disabled>批量启用</button> | |
| <button class="batch-btn batch-disable" id="batchDisableBtn" onclick="batchAction('disable')" | |
| disabled>批量禁用</button> | |
| <button class="batch-btn batch-delete" id="batchDeleteBtn" onclick="batchAction('delete')" | |
| disabled>批量删除</button> | |
| <button class="batch-btn batch-email" onclick="refreshAllEmails()">刷新所有邮箱</button> | |
| </div> | |
| </div> | |
| <!-- 筛选和分页控件 --> | |
| <div class="filter-container"> | |
| <label for="statusFilter">状态筛选：</label> | |
| <select id="statusFilter" class="filter-select" onchange="applyFilters()"> | |
| <option value="all">全部</option> | |
| <option value="normal">正常</option> | |
| <option value="disabled">禁用</option> | |
| </select> | |
| <label for="errorCodeFilter">错误码筛选：</label> | |
| <select id="errorCodeFilter" class="filter-select" onchange="applyFilters()"> | |
| <option value="all">全部错误码</option> | |
| <option value="no-errors">无错误</option> | |
| <option value="has-errors">有错误</option> | |
| <option value="400">错误码 400</option> | |
| <option value="401">错误码 401</option> | |
| <option value="403">错误码 403</option> | |
| <option value="404">错误码 404</option> | |
| <option value="429">错误码 429</option> | |
| <option value="500">错误码 500</option> | |
| </select> | |
| <label for="pageSizeSelect">每页显示：</label> | |
| <select id="pageSizeSelect" class="page-size-select" onchange="changePageSize()"> | |
| <option value="20">20</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> | |
| <div class="error-filter-container" id="errorFilterContainer"> | |
| <span>快速筛选错误码：</span> | |
| <div id="errorCodeBadges"></div> | |
| </div> | |
| </div> | |
| <div id="credsListSection"> | |
| <div class="loading" id="credsLoading">正在加载凭证文件...</div> | |
| <div id="credsList"></div> | |
| <!-- 分页控件 --> | |
| <div class="pagination-container" id="paginationContainer" style="display: none;"> | |
| <button class="pagination-btn" id="prevPageBtn" onclick="changePage(-1)">上一页</button> | |
| <div class="pagination-info" id="paginationInfo">第 1 页，共 1 页</div> | |
| <button class="pagination-btn" id="nextPageBtn" onclick="changePage(1)">下一页</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 使用统计标签页 --> | |
| <div id="usageTab" class="tab-content"> | |
| <h3>使用统计</h3> | |
| <p>查看每个凭证文件的API调用统计和配额使用情况</p> | |
| <!-- 统计概览 --> | |
| <div class="stats-container" id="usageStatsContainer"> | |
| <div class="stat-item total"> | |
| <span class="stat-number" id="totalApiCalls">0</span> | |
| <span class="stat-label">总调用数</span> | |
| </div> | |
| <div class="stat-item normal" style="border-left: 4px solid #ff6b35;"> | |
| <span class="stat-number" id="geminiProCalls">0</span> | |
| <span class="stat-label">Gemini 2.5 Pro</span> | |
| </div> | |
| <div class="stat-item disabled"> | |
| <span class="stat-number" id="totalFiles">0</span> | |
| <span class="stat-label">活跃文件数</span> | |
| </div> | |
| </div> | |
| <div class="manage-actions"> | |
| <button class="refresh-btn" onclick="refreshUsageStats()">刷新统计</button> | |
| <button class="btn" style="background-color: #dc3545;" | |
| onclick="resetAllUsageStats()">重置所有统计</button> | |
| </div> | |
| <!-- 文件使用统计列表 --> | |
| <div id="usageListSection"> | |
| <div class="loading" id="usageLoading">正在加载使用统计...</div> | |
| <div id="usageList"></div> | |
| </div> | |
| <!-- 使用说明 --> | |
| <div class="config-group"> | |
| <h4>使用说明</h4> | |
| <div class="config-info"> | |
| <strong>统计范围：</strong> | |
| <ul> | |
| <li><strong>Gemini 2.5 Pro 调用次数：</strong>仅统计 gemini-2.5-pro 及其变体模型的成功调用</li> | |
| <li><strong>所有模型调用次数：</strong>统计所有模型的成功调用总数</li> | |
| <li><strong>每日配额：</strong>默认每日配额 Gemini 2.5 Pro: 100次，所有模型: 1000次</li> | |
| <li><strong>配额重置：</strong>每天 UTC 07:00 自动重置调用计数</li> | |
| </ul> | |
| <strong>注意：</strong> | |
| <ul> | |
| <li>只统计返回正常响应的API调用，报错的调用不计入统计</li> | |
| <li>统计数据持久化保存在 creds_state.toml 文件中</li> | |
| <li>支持每个凭证文件独立统计和配额管理</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 配置管理标签页 --> | |
| <div id="configTab" class="tab-content"> | |
| <h3>配置管理</h3> | |
| <p>管理系统配置参数，修改后立即生效</p> | |
| <div class="manage-actions"> | |
| <button class="refresh-btn" onclick="loadConfig()">刷新配置</button> | |
| <button class="btn" onclick="saveConfig()">保存配置</button> | |
| </div> | |
| <div id="configSection"> | |
| <div class="loading" id="configLoading">正在加载配置...</div> | |
| <div id="configForm" class="hidden"> | |
| <div class="config-group"> | |
| <h4>服务器配置</h4> | |
| <div class="form-group"> | |
| <label for="host">服务器主机地址:</label> | |
| <input type="text" id="host" class="config-input" | |
| placeholder="例如: 0.0.0.0, 127.0.0.1" /> | |
| <small class="config-note">服务器监听的主机地址，0.0.0.0表示监听所有接口</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="port">服务器端口:</label> | |
| <input type="number" id="port" class="config-input" min="1" max="65535" | |
| placeholder="7861" /> | |
| <small class="config-note">服务器监听的端口号，修改后需要重启服务器</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="configApiPassword">API访问密码:</label> | |
| <input type="text" id="configApiPassword" class="config-input" placeholder="pwd" /> | |
| <small class="config-note">聊天API访问密码，用于OpenAI和Gemini API端点的认证</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="configPanelPassword">控制面板密码:</label> | |
| <input type="text" id="configPanelPassword" class="config-input" placeholder="pwd" /> | |
| <small class="config-note">控制面板访问密码，用于web界面登录认证</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="configPassword">通用密码:</label> | |
| <input type="text" id="configPassword" class="config-input" placeholder="pwd" /> | |
| <small class="config-note">（兼容性保留）设置后将覆盖上述两个密码，留空则使用分开的密码设置</small> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>基础配置</h4> | |
| <div class="form-group"> | |
| <label for="credentialsDir">凭证目录路径:</label> | |
| <input type="text" id="credentialsDir" class="config-input" /> | |
| <small class="config-note">存储认证文件的目录路径</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="proxy">代理设置:</label> | |
| <input type="text" id="proxy" class="config-input" | |
| placeholder="例如: http://proxy:8080 或 socks5://proxy:1080" /> | |
| <small class="config-note">HTTP/HTTPS/SOCKS5Endpoint，留空表示不使用代理</small> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>端点配置</h4> | |
| <!-- 快速配置按钮 --> | |
| <div class="form-group"> | |
| <div style="display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;"> | |
| <button type="button" class="btn" onclick="useMirrorUrls()" | |
| style="background-color: #28a745; font-size: 14px;"> | |
| 🚀 一键使用镜像网址 | |
| </button> | |
| <button type="button" class="btn" onclick="restoreOfficialUrls()" | |
| style="background-color: #17a2b8; font-size: 14px;"> | |
| 🔄 还原官方端点 | |
| </button> | |
| </div> | |
| <small class="config-note">镜像网址主要解决墙内无法访问官方端点的问题，部分地区可能无法使用</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="codeAssistEndpoint">Code Assist Endpoint:</label> | |
| <input type="text" id="codeAssistEndpoint" class="config-input" /> | |
| <small class="config-note">Google Cloud Code Assist API端点地址</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="oauthProxyUrl">OAuth Endpoint:</label> | |
| <input type="text" id="oauthProxyUrl" class="config-input" | |
| placeholder="https://oauth2.googleapis.com" /> | |
| <small class="config-note">Google OAuth2 API端点地址，用于token获取和刷新</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="googleapisProxyUrl">Google APIs Endpoint:</label> | |
| <input type="text" id="googleapisProxyUrl" class="config-input" | |
| placeholder="https://www.googleapis.com" /> | |
| <small class="config-note">Google APIs API端点地址，用于API服务调用</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="resourceManagerApiUrl">Resource Manager API Endpoint:</label> | |
| <input type="text" id="resourceManagerApiUrl" class="config-input" | |
| placeholder="https://cloudresourcemanager.googleapis.com" /> | |
| <small class="config-note">Google Cloud Resource Manager API端点地址，用于项目管理</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="serviceUsageApiUrl">Service Usage API Endpoint:</label> | |
| <input type="text" id="serviceUsageApiUrl" class="config-input" | |
| placeholder="https://serviceusage.googleapis.com" /> | |
| <small class="config-note">Google Cloud Service Usage API端点地址，用于服务启用管理</small> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>自动封禁配置</h4> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" id="autoBanEnabled" class="config-checkbox" /> | |
| 启用自动封禁 | |
| </label> | |
| <small class="config-note">遇到指定错误码时自动禁用凭证</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="autoBanErrorCodes">自动封禁错误码:</label> | |
| <input type="text" id="autoBanErrorCodes" class="config-input" | |
| placeholder="例如: 400,403" /> | |
| <small class="config-note">用逗号分隔的错误码列表</small> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>性能配置</h4> | |
| <div class="form-group"> | |
| <label for="callsPerRotation">凭证轮换调用次数:</label> | |
| <input type="number" id="callsPerRotation" class="config-input" min="1" max="100" /> | |
| <small class="config-note">每个凭证使用多少次后轮换到下一个</small> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>429重试配置</h4> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" id="retry429Enabled" class="config-checkbox" /> | |
| 启用429重试 | |
| </label> | |
| <small class="config-note">遇到429错误时自动重试</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="retry429MaxRetries">429重试次数:</label> | |
| <input type="number" id="retry429MaxRetries" class="config-input" min="1" max="50" /> | |
| <small class="config-note">遇到429错误时的最大重试次数</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="retry429Interval">429重试间隔(秒):</label> | |
| <input type="number" id="retry429Interval" class="config-input" min="0.01" max="10" | |
| step="0.01" /> | |
| <small class="config-note">遇到429错误时每两次重试间的等待时间</small> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>兼容性配置</h4> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" id="compatibilityModeEnabled" class="config-checkbox" /> | |
| 启用兼容性模式 | |
| </label> | |
| <small class="config-note">启用后所有system消息全部转换成user，停用system_instructions <span | |
| style="color: #28a745;">✓ 支持热更新</span></small> | |
| <div class="config-info" | |
| style="background-color: #fff3cd; border: 1px solid #ffc107; color: #856404;"> | |
| <strong>⚠️ 注意：</strong>该选项可能会降低模型理解能力，但是能避免流式空回的情况。 | |
| <br><strong>适用场景：</strong>当遇到流式传输时模型不返回内容或返回空响应时启用此选项。 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>抗截断配置</h4> | |
| <div class="form-group"> | |
| <label for="antiTruncationMaxAttempts">抗截断最大重试次数:</label> | |
| <input type="number" id="antiTruncationMaxAttempts" class="config-input" min="1" | |
| max="10" /> | |
| <small class="config-note">当检测到输出截断时的最大续传尝试次数</small> | |
| </div> | |
| <div class="form-group"> | |
| <div class="config-info"> | |
| <strong>注意：</strong>抗截断功能现在通过模型名控制： | |
| <ul style="margin: 5px 0; padding-left: 20px;"> | |
| <li>选择带有 "-流式抗截断" 后缀的模型即可启用</li> | |
| <li>该功能仅在流式传输时生效</li> | |
| <li>例如: "gemini-2.5-pro-流式抗截断"</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="config-group"> | |
| <h4>配置热更新说明</h4> | |
| <div class="form-group"> | |
| <div class="config-info" | |
| style="background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;"> | |
| <strong>🔥 热更新配置（立即生效）：</strong> | |
| <ul style="margin: 8px 0; padding-left: 20px; color: #212529;"> | |
| <li><strong>网络配置：</strong>代理设置、端点配置、HTTP超时时间、最大连接数</li> | |
| <li><strong>API配置：</strong>凭证轮换次数、429重试设置、自动封禁配置</li> | |
| <li><strong>密码配置：</strong>API密码、控制面板密码、通用密码</li> | |
| <li><strong>功能配置：</strong>抗截断最大重试次数</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="config-info" | |
| style="background-color: #fff3cd; border: 1px solid #ffc107; color: #856404;"> | |
| <strong>🔄 需要重启的配置：</strong> | |
| <ul style="margin: 8px 0; padding-left: 20px; color: #212529;"> | |
| <li><strong>服务器配置：</strong>主机地址、端口号</li> | |
| <li><strong>目录配置：</strong>凭证目录路径、Code Assist端点</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 实时日志标签页 --> | |
| <div id="logsTab" class="tab-content"> | |
| <h3>实时日志</h3> | |
| <p>查看系统实时日志输出，支持日志筛选和自动滚动</p> | |
| <div class="manage-actions"> | |
| <button class="refresh-btn" onclick="connectWebSocket()">连接日志流</button> | |
| <button class="btn" style="background-color: #dc3545;" onclick="disconnectWebSocket()">断开连接</button> | |
| <button class="btn" style="background-color: #28a745;" onclick="downloadLogs()">下载日志</button> | |
| <button class="btn" style="background-color: #6c757d;" onclick="clearLogs()">清空日志</button> | |
| </div> | |
| <div class="filter-container"> | |
| <label for="logLevelFilter">日志级别筛选：</label> | |
| <select id="logLevelFilter" class="filter-select" onchange="filterLogs()"> | |
| <option value="all">全部</option> | |
| <option value="ERROR">错误</option> | |
| <option value="WARNING">警告</option> | |
| <option value="INFO">信息</option> | |
| <option value="DEBUG">调试</option> | |
| </select> | |
| <label> | |
| <input type="checkbox" id="autoScroll" checked> 自动滚动到底部 | |
| </label> | |
| </div> | |
| <div id="logConnectionStatus" class="status info"> | |
| <strong>连接状态：</strong> <span id="connectionStatusText">未连接</span> | |
| </div> | |
| <div id="logContainer" | |
| style="background-color: #1e1e1e; color: #ffffff; font-family: 'Courier New', monospace; font-size: 12px; height: 600px; overflow-y: auto; border: 1px solid #333; border-radius: 5px; padding: 15px; white-space: pre-wrap; word-break: break-all;"> | |
| <div id="logContent">等待连接日志流...</div> | |
| </div> | |
| </div> | |
| <!-- 项目信息标签页 --> | |
| <div id="aboutTab" class="tab-content"> | |
| <h3>项目信息</h3> | |
| <p>关于GCLI2API项目的详细信息和支持方式</p> | |
| <!-- 项目介绍 --> | |
| <div | |
| style="background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #007bff;"> | |
| <h4 style="margin-top: 0; color: #007bff;">📋 项目简介</h4> | |
| <p style="margin: 10px 0; line-height: 1.6; color: #495057;"> | |
| GCLI2API是一个将Google Gemini API转换为OpenAI 和GEMINI API格式的代理工具，支持多账户管理、自动轮换、实时日志监控等功能。 | |
| </p> | |
| <div style="margin: 15px 0;"> | |
| <p style="margin: 5px 0;"><strong>🔗 项目地址：</strong> <a | |
| href="https://github.com/su-kaka/gcli2api" target="_blank" | |
| style="color: #007bff; text-decoration: none;">GitHub - su-kaka/gcli2api</a></p> | |
| <p style="margin: 5px 0;"><strong>⚠️ 使用声明：</strong> <span | |
| style="color: #dc3545; font-weight: 500;">禁止商业用途和倒卖 - 仅供学习使用</span></p> | |
| </div> | |
| </div> | |
| <!-- 功能特性 --> | |
| <div | |
| style="background-color: #e7f3ff; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #17a2b8;"> | |
| <h4 style="margin-top: 0; color: #17a2b8;">✨ 主要功能</h4> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;"> | |
| <div> | |
| <p><strong>🔄 多账户管理：</strong> 支持批量上传和管理多个Google账户</p> | |
| <p><strong>⚡ 自动轮换：</strong> 智能轮换账户，避免单账户限额</p> | |
| <p><strong>📊 实时监控：</strong> 使用统计、错误监控、实时日志</p> | |
| </div> | |
| <div> | |
| <p><strong>🛡️ 安全可靠：</strong> OAuth2认证、自动封禁异常账户</p> | |
| <p><strong>🎛️ 配置灵活：</strong> 支持热更新配置、代理设置</p> | |
| <p><strong>📱 界面友好：</strong> 响应式设计、移动端适配</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 支持项目 --> | |
| <div | |
| style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; margin: 30px 0; text-align: center; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);"> | |
| <h4 style="margin: 0 0 15px 0; font-size: 24px; font-weight: 600;">💝 支持项目发展</h4> | |
| <p style="margin: 0 0 25px 0; font-size: 16px; opacity: 0.9; line-height: 1.6;"> | |
| 如果这个项目对您有帮助，欢迎通过币安扫码捐赠支持项目的持续发展！<br> | |
| 您的每一份支持都是我们前进的动力 ❤️ | |
| </p> | |
| <div | |
| style="display: inline-block; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 25px rgba(0,0,0,0.1);"> | |
| <img src="docs/币安.jpg" alt="币安捐赠二维码" | |
| style="width: 200px; height: 200px; border-radius: 10px; display: block;"> | |
| <p style="color: #666; margin: 12px 0 0 0; font-size: 14px; font-weight: 600;">扫码币安捐赠</p> | |
| </div> | |
| </div> | |
| <!-- 联系和反馈 --> | |
| <div | |
| style="background-color: #d1ecf1; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #bee5eb;"> | |
| <h4 style="margin-top: 0; color: #0c5460;">📞 联系我们</h4> | |
| <div style="color: #0c5460; line-height: 1.6;"> | |
| <p>• <strong>问题反馈：</strong> 通过GitHub Issues提交问题和建议</p> | |
| <p>• <strong>功能请求：</strong> 在GitHub Discussions中讨论新功能</p> | |
| <p>• <strong>代码贡献：</strong> 欢迎提交Pull Request改进项目</p> | |
| <p>• <strong>文档完善：</strong> 帮助改进项目文档和使用指南</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="statusSection"></div> | |
| <!-- 项目信息 --> | |
| <div | |
| style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 12px; margin-top: 30px; text-align: center; border-left: 4px solid #007bff;"> | |
| <p style="margin: 5px 0; font-size: 14px; color: #495057;">GitHub: <a | |
| href="https://github.com/su-kaka/gcli2api" target="_blank" | |
| style="color: #007bff; text-decoration: none;">https://github.com/su-kaka/gcli2api</a></p> | |
| <p style="margin: 5px 0; font-size: 14px; color: #dc3545; font-weight: 500;">⚠️ 禁止商业用途和倒卖 - 仅供学习使用 ⚠️ | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 限制设置弹窗 --> | |
| <div id="limitsModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">设置使用限制</h3> | |
| <button class="modal-close" onclick="closeLimitsModal()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label for="modalFilename">文件名:</label> | |
| <input type="text" id="modalFilename" class="config-input" readonly /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="modalGeminiLimit">Gemini 2.5 Pro 每日限制:</label> | |
| <input type="number" id="modalGeminiLimit" class="config-input" min="1" max="10000" /> | |
| <small class="config-note">每日Gemini 2.5 Pro模型调用次数限制</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="modalTotalLimit">所有模型每日限制:</label> | |
| <input type="number" id="modalTotalLimit" class="config-input" min="1" max="50000" /> | |
| <small class="config-note">每日所有模型调用次数总限制</small> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn" onclick="closeLimitsModal()" style="background-color: #6c757d;">取消</button> | |
| <button class="btn" onclick="saveLimits()">保存</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let currentProjectId = ''; | |
| let authInProgress = false; | |
| let uploadSelectedFiles = []; // 上传页面用的文件列表 | |
| let authToken = ''; | |
| let credsData = {}; | |
| // 分页和筛选相关变量 | |
| let filteredCredsData = {}; | |
| let currentPage = 1; | |
| let pageSize = 20; | |
| let currentFilter = 'all'; | |
| let currentErrorCodeFilter = 'all'; | |
| let selectedCredFiles = new Set(); // 选中的凭证文件名集合 | |
| let availableErrorCodes = new Set(); // 所有可用的错误码 | |
| let statsData = { | |
| total: 0, | |
| normal: 0, | |
| disabled: 0 | |
| }; | |
| function showStatus(message, type = 'info') { | |
| console.log('showStatus called:', message, type); | |
| const statusSection = document.getElementById('statusSection'); | |
| if (statusSection) { | |
| statusSection.innerHTML = `<div class="status ${type}">${message}</div>`; | |
| } else { | |
| console.error('statusSection not found'); | |
| alert(message); // 临时回退方案 | |
| } | |
| } | |
| // 登录相关函数 | |
| async function login() { | |
| console.log('Login function called'); | |
| const password = document.getElementById('loginPassword').value; | |
| console.log('Password length:', password ? password.length : 0); | |
| if (!password) { | |
| showStatus('请输入密码', 'error'); | |
| return; | |
| } | |
| try { | |
| console.log('Sending login request...'); | |
| const response = await fetch('/auth/login', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ password: password }) | |
| }); | |
| console.log('Login response status:', response.status); | |
| const data = await response.json(); | |
| console.log('Login response data:', data); | |
| if (response.ok) { | |
| authToken = data.token; | |
| console.log('Login successful, token received'); | |
| document.getElementById('loginSection').classList.add('hidden'); | |
| document.getElementById('mainSection').classList.remove('hidden'); | |
| showStatus('登录成功', 'success'); | |
| } else { | |
| console.log('Login failed:', data); | |
| showStatus(`登录失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('Login error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| function handlePasswordEnter(event) { | |
| if (event.key === 'Enter') { | |
| login(); | |
| } | |
| } | |
| // 标签页切换 | |
| function switchTab(tabName) { | |
| // 移除所有活动标签 | |
| document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); | |
| // 激活选中标签 | |
| event.target.classList.add('active'); | |
| document.getElementById(tabName + 'Tab').classList.add('active'); | |
| // 如果切换到文件管理页面，自动加载数据 | |
| if (tabName === 'manage') { | |
| refreshCredsStatus(); | |
| } | |
| // 如果切换到使用统计页面，自动加载统计 | |
| if (tabName === 'usage') { | |
| refreshUsageStats(); | |
| } | |
| // 如果切换到配置管理页面，自动加载配置 | |
| if (tabName === 'config') { | |
| loadConfig(); | |
| } | |
| // 如果切换到环境变量页面，自动检查状态 | |
| if (tabName === 'envload') { | |
| checkEnvCredsStatus(); | |
| } | |
| // 如果切换到日志页面，自动连接WebSocket | |
| if (tabName === 'logs') { | |
| connectWebSocket(); | |
| } | |
| } | |
| // 获取认证头 | |
| function getAuthHeaders() { | |
| return { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${authToken}` | |
| }; | |
| } | |
| async function startAuth() { | |
| const projectId = document.getElementById('projectId').value.trim(); | |
| const getAllProjects = document.getElementById('getAllProjectsCreds').checked; | |
| // 项目ID现在是可选的 | |
| currentProjectId = projectId || null; | |
| const btn = document.getElementById('getAuthBtn'); | |
| btn.disabled = true; | |
| btn.textContent = '正在获取认证链接...'; | |
| try { | |
| const requestBody = {}; | |
| if (projectId) { | |
| requestBody.project_id = projectId; | |
| } | |
| if (getAllProjects) { | |
| requestBody.get_all_projects = true; | |
| showStatus('批量并发认证模式：将为当前账号所有项目生成认证链接...', 'info'); | |
| } else if (projectId) { | |
| showStatus('使用指定的项目ID生成认证链接...', 'info'); | |
| } else { | |
| showStatus('将尝试自动检测项目ID，正在生成认证链接...', 'info'); | |
| } | |
| const response = await fetch('/auth/start', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify(requestBody) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| document.getElementById('authUrl').href = data.auth_url; | |
| document.getElementById('authUrl').textContent = data.auth_url; | |
| document.getElementById('authUrlSection').classList.remove('hidden'); | |
| if (getAllProjects) { | |
| showStatus('批量并发认证链接已生成，完成授权后将并发为所有可访问项目生成凭证文件', 'info'); | |
| } else if (data.auto_project_detection) { | |
| showStatus('认证链接已生成（将在认证完成后自动检测项目ID），请点击链接完成授权', 'info'); | |
| } else { | |
| showStatus(`认证链接已生成（项目ID: ${data.detected_project_id}），请点击链接完成授权`, 'info'); | |
| } | |
| authInProgress = true; | |
| } else { | |
| showStatus(`错误: ${data.error || '获取认证链接失败'}`, 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } finally { | |
| btn.disabled = false; | |
| btn.textContent = '获取认证链接'; | |
| } | |
| } | |
| async function getCredentials() { | |
| if (!authInProgress) { | |
| showStatus('请先获取认证链接并完成授权', 'error'); | |
| return; | |
| } | |
| const btn = document.getElementById('getCredsBtn'); | |
| const getAllProjects = document.getElementById('getAllProjectsCreds').checked; | |
| btn.disabled = true; | |
| btn.textContent = getAllProjects ? '并发批量获取所有项目凭证中...' : '等待OAuth回调中...'; | |
| try { | |
| if (getAllProjects) { | |
| showStatus('正在并发为所有项目获取认证凭证，采用并发处理提升速度...', 'info'); | |
| } else { | |
| showStatus('正在等待OAuth回调，这可能需要一些时间...', 'info'); | |
| } | |
| const requestBody = {}; | |
| if (currentProjectId) { | |
| requestBody.project_id = currentProjectId; | |
| } | |
| if (getAllProjects) { | |
| requestBody.get_all_projects = true; | |
| } | |
| const response = await fetch('/auth/callback', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify(requestBody) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| const credentialsSection = document.getElementById('credentialsSection'); | |
| const credentialsContent = document.getElementById('credentialsContent'); | |
| if (getAllProjects && data.multiple_credentials) { | |
| // 处理多项目认证结果 | |
| const results = data.multiple_credentials; | |
| let resultText = `批量并发认证完成！成功为 ${results.success.length} 个项目生成凭证：\n\n`; | |
| // 显示成功的项目 | |
| results.success.forEach((item, index) => { | |
| resultText += `${index + 1}. 项目: ${item.project_name} (${item.project_id})\n`; | |
| resultText += ` 文件: ${item.file_path}\n\n`; | |
| }); | |
| // 显示失败的项目（如果有） | |
| if (results.failed.length > 0) { | |
| resultText += `\n失败的项目 (${results.failed.length} 个):\n`; | |
| results.failed.forEach((item, index) => { | |
| resultText += `${index + 1}. 项目: ${item.project_name} (${item.project_id})\n`; | |
| resultText += ` 错误: ${item.error}\n\n`; | |
| }); | |
| } | |
| credentialsContent.textContent = resultText; | |
| showStatus(`✅ 批量并发认证完成！成功生成 ${results.success.length} 个项目的凭证文件${results.failed.length > 0 ? `，${results.failed.length} 个项目失败` : ''}`, 'success'); | |
| } else { | |
| // 处理单项目认证结果 | |
| credentialsContent.textContent = JSON.stringify(data.credentials, null, 2); | |
| if (data.auto_detected_project) { | |
| showStatus(`✅ 认证成功！项目ID已自动检测为: ${data.credentials.project_id}，文件已保存到: ${data.file_path}`, 'success'); | |
| } else { | |
| showStatus(`✅ 认证成功！文件已保存到: ${data.file_path}`, 'success'); | |
| } | |
| } | |
| credentialsSection.classList.remove('hidden'); | |
| authInProgress = false; | |
| } else { | |
| // 检查是否需要项目选择 | |
| if (data.requires_project_selection && data.available_projects) { | |
| let projectOptions = "请选择一个项目：\n\n"; | |
| data.available_projects.forEach((project, index) => { | |
| projectOptions += `${index + 1}. ${project.name} (${project.projectId})\n`; | |
| }); | |
| projectOptions += `\n请输入序号 (1-${data.available_projects.length}):`; | |
| const selection = prompt(projectOptions); | |
| const projectIndex = parseInt(selection) - 1; | |
| if (projectIndex >= 0 && projectIndex < data.available_projects.length) { | |
| const selectedProject = data.available_projects[projectIndex]; | |
| currentProjectId = selectedProject.projectId; | |
| btn.textContent = '重新尝试获取认证文件'; | |
| showStatus(`使用选择的项目 ${selectedProject.name} (${selectedProject.projectId}) 重新尝试...`, 'info'); | |
| setTimeout(() => getCredentials(), 1000); | |
| return; | |
| } else { | |
| showStatus('无效的选择，请重新开始认证', 'error'); | |
| } | |
| } | |
| // 检查是否需要手动输入项目ID | |
| else if (data.requires_manual_project_id) { | |
| const userProjectId = prompt('无法自动检测项目ID，请手动输入您的Google Cloud项目ID:'); | |
| if (userProjectId && userProjectId.trim()) { | |
| // 重新尝试，使用用户输入的项目ID | |
| currentProjectId = userProjectId.trim(); | |
| btn.textContent = '重新尝试获取认证文件'; | |
| showStatus('使用手动输入的项目ID重新尝试...', 'info'); | |
| setTimeout(() => getCredentials(), 1000); | |
| return; | |
| } else { | |
| showStatus('需要项目ID才能完成认证，请重新开始并输入正确的项目ID', 'error'); | |
| } | |
| } else { | |
| showStatus(`❌ 错误: ${data.error || '获取认证文件失败'}`, 'error'); | |
| if (data.error && data.error.includes('未接收到授权回调')) { | |
| showStatus('提示：请确保已完成浏览器中的OAuth认证，并看到了"OAuth authentication successful"页面', 'info'); | |
| } | |
| } | |
| } | |
| } catch (error) { | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } finally { | |
| btn.disabled = false; | |
| btn.textContent = '获取认证文件'; | |
| } | |
| } | |
| // 文件上传相关函数 | |
| function handleFileSelect(event) { | |
| const files = Array.from(event.target.files); | |
| addFiles(files); | |
| } | |
| function addFiles(files) { | |
| files.forEach(file => { | |
| if (file.type === 'application/json' || file.name.endsWith('.json') || | |
| file.type === 'application/zip' || file.name.endsWith('.zip')) { | |
| if (!uploadSelectedFiles.find(f => f.name === file.name && f.size === file.size)) { | |
| uploadSelectedFiles.push(file); | |
| } | |
| } else { | |
| showStatus(`文件 ${file.name} 格式不支持，只支持JSON和ZIP文件`, 'error'); | |
| } | |
| }); | |
| updateFileList(); | |
| } | |
| function updateFileList() { | |
| const fileList = document.getElementById('fileList'); | |
| const fileListSection = document.getElementById('fileListSection'); | |
| if (uploadSelectedFiles.length === 0) { | |
| fileListSection.classList.add('hidden'); | |
| return; | |
| } | |
| fileListSection.classList.remove('hidden'); | |
| fileList.innerHTML = ''; | |
| uploadSelectedFiles.forEach((file, index) => { | |
| const fileItem = document.createElement('div'); | |
| fileItem.className = 'file-item'; | |
| const isZip = file.name.endsWith('.zip'); | |
| const fileIcon = isZip ? '📦' : '📄'; | |
| const fileType = isZip ? ' (ZIP压缩包)' : ' (JSON文件)'; | |
| fileItem.innerHTML = ` | |
| <div> | |
| <span class="file-name">${fileIcon} ${file.name}</span> | |
| <span class="file-size">(${formatFileSize(file.size)}${fileType})</span> | |
| </div> | |
| <button class="remove-btn" onclick="removeFile(${index})">删除</button> | |
| `; | |
| fileList.appendChild(fileItem); | |
| }); | |
| } | |
| function removeFile(index) { | |
| uploadSelectedFiles.splice(index, 1); | |
| updateFileList(); | |
| } | |
| function clearFiles() { | |
| uploadSelectedFiles = []; | |
| updateFileList(); | |
| } | |
| function formatFileSize(bytes) { | |
| if (bytes < 1024) return bytes + ' B'; | |
| if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB'; | |
| return Math.round(bytes / (1024 * 1024)) + ' MB'; | |
| } | |
| async function uploadFiles() { | |
| if (uploadSelectedFiles.length === 0) { | |
| showStatus('请选择要上传的文件', 'error'); | |
| return; | |
| } | |
| // 检查文件大小 | |
| const totalSize = uploadSelectedFiles.reduce((sum, file) => sum + file.size, 0); | |
| const maxSize = 200 * 1024 * 1024; // 200MB limit | |
| if (totalSize > maxSize) { | |
| showStatus(`文件总大小 ${(totalSize / 1024 / 1024).toFixed(1)}MB 超过限制 ${maxSize / 1024 / 1024}MB。请分批上传或删除部分文件。`, 'error'); | |
| return; | |
| } | |
| // 检查单个文件大小 | |
| for (const file of uploadSelectedFiles) { | |
| if (file.size > 5 * 1024 * 1024) { | |
| showStatus(`文件 "${file.name}" 大小 ${(file.size / 1024 / 1024).toFixed(1)}MB 超过单文件5MB限制`, 'error'); | |
| return; | |
| } | |
| } | |
| const progressSection = document.getElementById('uploadProgressSection'); | |
| const progressFill = document.getElementById('progressFill'); | |
| const progressText = document.getElementById('progressText'); | |
| progressSection.classList.remove('hidden'); | |
| const formData = new FormData(); | |
| uploadSelectedFiles.forEach(file => { | |
| formData.append('files', file); | |
| }); | |
| // 检查是否有ZIP文件，给用户提示 | |
| const hasZipFiles = uploadSelectedFiles.some(file => file.name.endsWith('.zip')); | |
| if (hasZipFiles) { | |
| showStatus('正在上传并解压ZIP文件...', 'info'); | |
| } | |
| try { | |
| const xhr = new XMLHttpRequest(); | |
| // 设置超时时间 (5分钟) | |
| xhr.timeout = 300000; | |
| xhr.upload.onprogress = function (event) { | |
| if (event.lengthComputable) { | |
| const percentComplete = (event.loaded / event.total) * 100; | |
| progressFill.style.width = percentComplete + '%'; | |
| progressText.textContent = Math.round(percentComplete) + '%'; | |
| } | |
| }; | |
| xhr.onload = function () { | |
| if (xhr.status === 200) { | |
| try { | |
| const data = JSON.parse(xhr.responseText); | |
| showStatus(`成功上传 ${data.uploaded_count} 个文件`, 'success'); | |
| clearFiles(); | |
| progressSection.classList.add('hidden'); | |
| } catch (e) { | |
| showStatus('上传失败: 服务器响应格式错误', 'error'); | |
| } | |
| } else { | |
| try { | |
| const error = JSON.parse(xhr.responseText); | |
| showStatus(`上传失败: ${error.detail || error.error || '未知错误'}`, 'error'); | |
| } catch (e) { | |
| showStatus(`上传失败: HTTP ${xhr.status} - ${xhr.statusText || '未知错误'}`, 'error'); | |
| } | |
| } | |
| }; | |
| xhr.onerror = function () { | |
| console.error('Upload XHR error:', { | |
| readyState: xhr.readyState, | |
| status: xhr.status, | |
| statusText: xhr.statusText, | |
| responseText: xhr.responseText, | |
| fileCount: uploadSelectedFiles.length, | |
| totalSize: (totalSize / 1024 / 1024).toFixed(1) + 'MB' | |
| }); | |
| showStatus(`上传失败：连接中断 - 可能原因：文件过多(${uploadSelectedFiles.length}个)或网络不稳定。建议分批上传。`, 'error'); | |
| progressSection.classList.add('hidden'); | |
| }; | |
| xhr.ontimeout = function () { | |
| showStatus('上传失败：请求超时 - 文件处理时间过长，请减少文件数量或检查网络连接', 'error'); | |
| progressSection.classList.add('hidden'); | |
| }; | |
| xhr.open('POST', '/auth/upload'); | |
| xhr.setRequestHeader('Authorization', `Bearer ${authToken}`); | |
| xhr.send(formData); | |
| } catch (error) { | |
| showStatus(`上传失败: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 拖拽功能 | |
| const uploadArea = document.getElementById('uploadArea'); | |
| uploadArea.addEventListener('dragover', function (event) { | |
| event.preventDefault(); | |
| uploadArea.classList.add('dragover'); | |
| }); | |
| uploadArea.addEventListener('dragleave', function (event) { | |
| event.preventDefault(); | |
| uploadArea.classList.remove('dragover'); | |
| }); | |
| uploadArea.addEventListener('drop', function (event) { | |
| event.preventDefault(); | |
| uploadArea.classList.remove('dragover'); | |
| const files = Array.from(event.dataTransfer.files); | |
| addFiles(files); | |
| }); | |
| // WebSocket日志相关变量和函数 | |
| let logWebSocket = null; | |
| let allLogs = []; | |
| let filteredLogs = []; | |
| let currentLogFilter = 'all'; | |
| function connectWebSocket() { | |
| if (logWebSocket && logWebSocket.readyState === WebSocket.OPEN) { | |
| showStatus('WebSocket已经连接', 'info'); | |
| return; | |
| } | |
| try { | |
| const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; | |
| const wsUrl = `${protocol}//${window.location.host}/auth/logs/stream`; | |
| document.getElementById('connectionStatusText').textContent = '连接中...'; | |
| document.getElementById('logConnectionStatus').className = 'status info'; | |
| logWebSocket = new WebSocket(wsUrl); | |
| logWebSocket.onopen = function (event) { | |
| document.getElementById('connectionStatusText').textContent = '已连接'; | |
| document.getElementById('logConnectionStatus').className = 'status success'; | |
| showStatus('日志流连接成功', 'success'); | |
| clearLogsDisplay(); // 只清空前端显示的旧日志，不清空服务器文件 | |
| }; | |
| logWebSocket.onmessage = function (event) { | |
| const logLine = event.data; | |
| if (logLine.trim()) { | |
| allLogs.push(logLine); | |
| // 限制日志数量，保留最后1000条 | |
| if (allLogs.length > 1000) { | |
| allLogs = allLogs.slice(-1000); | |
| } | |
| filterLogs(); | |
| // 自动滚动到底部 | |
| if (document.getElementById('autoScroll').checked) { | |
| const logContainer = document.getElementById('logContainer'); | |
| logContainer.scrollTop = logContainer.scrollHeight; | |
| } | |
| } | |
| }; | |
| logWebSocket.onclose = function (event) { | |
| document.getElementById('connectionStatusText').textContent = '连接断开'; | |
| document.getElementById('logConnectionStatus').className = 'status error'; | |
| showStatus('日志流连接断开', 'info'); | |
| }; | |
| logWebSocket.onerror = function (error) { | |
| document.getElementById('connectionStatusText').textContent = '连接错误'; | |
| document.getElementById('logConnectionStatus').className = 'status error'; | |
| showStatus('日志流连接错误: ' + error, 'error'); | |
| }; | |
| } catch (error) { | |
| showStatus('创建WebSocket连接失败: ' + error.message, 'error'); | |
| document.getElementById('connectionStatusText').textContent = '连接失败'; | |
| document.getElementById('logConnectionStatus').className = 'status error'; | |
| } | |
| } | |
| function disconnectWebSocket() { | |
| if (logWebSocket) { | |
| logWebSocket.close(); | |
| logWebSocket = null; | |
| document.getElementById('connectionStatusText').textContent = '未连接'; | |
| document.getElementById('logConnectionStatus').className = 'status info'; | |
| showStatus('日志流连接已断开', 'info'); | |
| } | |
| } | |
| function clearLogsDisplay() { | |
| // 只清空前端显示的日志，不清空服务器文件 | |
| allLogs = []; | |
| filteredLogs = []; | |
| document.getElementById('logContent').textContent = '日志已清空，等待新日志...'; | |
| } | |
| async function downloadLogs() { | |
| try { | |
| // 调用后端API下载日志文件 | |
| const response = await fetch('/auth/logs/download', { | |
| method: 'GET', | |
| headers: getAuthHeaders() | |
| }); | |
| if (response.ok) { | |
| // 获取文件名 | |
| const contentDisposition = response.headers.get('Content-Disposition'); | |
| let filename = 'gcli2api_logs.txt'; | |
| if (contentDisposition) { | |
| const filenameMatch = contentDisposition.match(/filename=(.+)/); | |
| if (filenameMatch) { | |
| filename = filenameMatch[1]; | |
| } | |
| } | |
| // 下载文件 | |
| 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); | |
| showStatus(`日志文件下载成功: ${filename}`, 'success'); | |
| } else { | |
| const errorText = await response.text(); | |
| let errorMsg = '下载失败'; | |
| try { | |
| const errorData = JSON.parse(errorText); | |
| errorMsg = errorData.detail || errorData.error || '未知错误'; | |
| } catch (e) { | |
| errorMsg = errorText || '未知错误'; | |
| } | |
| showStatus(`下载日志失败: ${errorMsg}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('downloadLogs error:', error); | |
| showStatus(`下载日志时网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| async function clearLogs() { | |
| try { | |
| // 调用后端API清空日志文件 | |
| const response = await fetch('/auth/logs/clear', { | |
| method: 'POST', | |
| headers: getAuthHeaders() | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| // 清空前端显示的日志 | |
| clearLogsDisplay(); | |
| showStatus(data.message, 'success'); | |
| } else { | |
| showStatus(`清空日志失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('clearLogs error:', error); | |
| // 即使后端清空失败，也清空前端显示 | |
| clearLogsDisplay(); | |
| showStatus(`清空日志时网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| function filterLogs() { | |
| const filter = document.getElementById('logLevelFilter').value; | |
| currentLogFilter = filter; | |
| if (filter === 'all') { | |
| filteredLogs = [...allLogs]; | |
| } else { | |
| filteredLogs = allLogs.filter(log => log.toUpperCase().includes(filter)); | |
| } | |
| displayLogs(); | |
| } | |
| function displayLogs() { | |
| const logContent = document.getElementById('logContent'); | |
| if (filteredLogs.length === 0) { | |
| logContent.textContent = currentLogFilter === 'all' ? | |
| '暂无日志...' : `暂无${currentLogFilter}级别的日志...`; | |
| } else { | |
| logContent.textContent = filteredLogs.join('\n'); | |
| } | |
| } | |
| // 凭证文件管理相关函数 | |
| async function refreshCredsStatus() { | |
| const credsLoading = document.getElementById('credsLoading'); | |
| const credsList = document.getElementById('credsList'); | |
| try { | |
| credsLoading.style.display = 'block'; | |
| credsList.innerHTML = ''; | |
| console.log('Fetching creds status...'); | |
| const response = await fetch('/creds/status', { | |
| method: 'GET', | |
| headers: getAuthHeaders() | |
| }); | |
| console.log('Creds status response:', response.status); | |
| const data = await response.json(); | |
| console.log('Creds status data:', data); | |
| if (response.ok) { | |
| credsData = data.creds; | |
| // 计算统计数据 | |
| calculateStats(); | |
| // 更新统计显示 | |
| updateStatsDisplay(); | |
| // 应用筛选并显示第一页 | |
| currentPage = 1; | |
| applyFilters(); | |
| showStatus(`已加载 ${Object.keys(credsData).length} 个凭证文件`, 'success'); | |
| } else { | |
| showStatus(`加载失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('refreshCredsStatus error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } finally { | |
| credsLoading.style.display = 'none'; | |
| } | |
| } | |
| // 计算统计数据 | |
| function calculateStats() { | |
| statsData = { | |
| total: 0, | |
| normal: 0, | |
| disabled: 0 | |
| }; | |
| // 清空并重新收集错误码 | |
| availableErrorCodes.clear(); | |
| for (const [fullPath, credInfo] of Object.entries(credsData)) { | |
| statsData.total++; | |
| if (credInfo.status.disabled) { | |
| statsData.disabled++; | |
| } else { | |
| statsData.normal++; | |
| } | |
| // 收集错误码信息 | |
| if (credInfo.status.error_codes && credInfo.status.error_codes.length > 0) { | |
| credInfo.status.error_codes.forEach(code => { | |
| availableErrorCodes.add(code); | |
| }); | |
| } | |
| } | |
| // 更新错误码快速筛选按钮 | |
| updateErrorCodeBadges(); | |
| } | |
| // 更新错误码筛选快速按钮 | |
| function updateErrorCodeBadges() { | |
| const errorCodeBadges = document.getElementById('errorCodeBadges'); | |
| errorCodeBadges.innerHTML = ''; | |
| if (availableErrorCodes.size === 0) { | |
| errorCodeBadges.innerHTML = '<span style="color: #28a745;">所有文件都无错误</span>'; | |
| return; | |
| } | |
| const sortedCodes = Array.from(availableErrorCodes).sort((a, b) => a - b); | |
| sortedCodes.forEach(code => { | |
| const badge = document.createElement('span'); | |
| badge.className = 'error-code-badge'; | |
| badge.textContent = code; | |
| badge.onclick = () => filterByErrorCode(code); | |
| errorCodeBadges.appendChild(badge); | |
| }); | |
| } | |
| // 按错误码快速筛选 | |
| function filterByErrorCode(code) { | |
| document.getElementById('errorCodeFilter').value = code.toString(); | |
| applyFilters(); | |
| } | |
| // 更新统计显示 | |
| function updateStatsDisplay() { | |
| document.getElementById('statTotal').textContent = statsData.total; | |
| document.getElementById('statNormal').textContent = statsData.normal; | |
| document.getElementById('statDisabled').textContent = statsData.disabled; | |
| } | |
| // 应用筛选 | |
| function applyFilters() { | |
| const statusFilter = document.getElementById('statusFilter').value; | |
| const errorCodeFilter = document.getElementById('errorCodeFilter').value; | |
| currentFilter = statusFilter; | |
| currentErrorCodeFilter = errorCodeFilter; | |
| filteredCredsData = {}; | |
| for (const [fullPath, credInfo] of Object.entries(credsData)) { | |
| let shouldInclude = false; | |
| // 状态筛选 | |
| switch (statusFilter) { | |
| case 'all': | |
| shouldInclude = true; | |
| break; | |
| case 'normal': | |
| shouldInclude = !credInfo.status.disabled; | |
| break; | |
| case 'disabled': | |
| shouldInclude = credInfo.status.disabled; | |
| break; | |
| } | |
| // 如果状态筛选已经排除，跳过错误码筛选 | |
| if (!shouldInclude) { | |
| continue; | |
| } | |
| // 错误码筛选 | |
| const errorCodes = credInfo.status.error_codes || []; | |
| switch (errorCodeFilter) { | |
| case 'all': | |
| // 保持当前状态 | |
| break; | |
| case 'no-errors': | |
| shouldInclude = errorCodes.length === 0; | |
| break; | |
| case 'has-errors': | |
| shouldInclude = errorCodes.length > 0; | |
| break; | |
| default: | |
| // 具体错误码筛选 | |
| const targetCode = parseInt(errorCodeFilter); | |
| if (!isNaN(targetCode)) { | |
| shouldInclude = errorCodes.includes(targetCode); | |
| } | |
| break; | |
| } | |
| if (shouldInclude) { | |
| filteredCredsData[fullPath] = credInfo; | |
| } | |
| } | |
| // 清空选择状态 | |
| selectedCredFiles.clear(); | |
| updateBatchControls(); | |
| currentPage = 1; | |
| renderCredsList(); | |
| updatePagination(); | |
| } | |
| // 获取当前页数据 | |
| function getCurrentPageData() { | |
| const filteredEntries = Object.entries(filteredCredsData); | |
| const startIndex = (currentPage - 1) * pageSize; | |
| const endIndex = startIndex + pageSize; | |
| return filteredEntries.slice(startIndex, endIndex); | |
| } | |
| // 获取总页数 | |
| function getTotalPages() { | |
| return Math.ceil(Object.keys(filteredCredsData).length / pageSize); | |
| } | |
| // 渲染凭证列表 | |
| function renderCredsList() { | |
| const credsList = document.getElementById('credsList'); | |
| credsList.innerHTML = ''; | |
| const currentPageData = getCurrentPageData(); | |
| if (currentPageData.length === 0) { | |
| const message = Object.keys(credsData).length === 0 ? | |
| '暂无凭证文件' : '当前筛选条件下暂无数据'; | |
| credsList.innerHTML = `<p style="text-align: center; color: #666;">${message}</p>`; | |
| document.getElementById('paginationContainer').style.display = 'none'; | |
| return; | |
| } | |
| for (const [fullPath, credInfo] of currentPageData) { | |
| const card = createCredCard(fullPath, credInfo); | |
| credsList.appendChild(card); | |
| } | |
| document.getElementById('paginationContainer').style.display = getTotalPages() > 1 ? 'flex' : 'none'; | |
| // 更新批量控件状态 | |
| updateBatchControls(); | |
| } | |
| // 更新分页信息 | |
| function updatePagination() { | |
| const totalPages = getTotalPages(); | |
| const totalItems = Object.keys(filteredCredsData).length; | |
| const startItem = (currentPage - 1) * pageSize + 1; | |
| const endItem = Math.min(currentPage * pageSize, totalItems); | |
| document.getElementById('paginationInfo').textContent = | |
| `第 ${currentPage} 页，共 ${totalPages} 页 (显示 ${startItem}-${endItem}，共 ${totalItems} 项)`; | |
| document.getElementById('prevPageBtn').disabled = currentPage <= 1; | |
| document.getElementById('nextPageBtn').disabled = currentPage >= totalPages; | |
| } | |
| // 切换页面 | |
| function changePage(direction) { | |
| const totalPages = getTotalPages(); | |
| const newPage = currentPage + direction; | |
| if (newPage >= 1 && newPage <= totalPages) { | |
| currentPage = newPage; | |
| renderCredsList(); | |
| updatePagination(); | |
| } | |
| } | |
| // 改变每页显示数量 | |
| function changePageSize() { | |
| pageSize = parseInt(document.getElementById('pageSizeSelect').value); | |
| currentPage = 1; | |
| renderCredsList(); | |
| updatePagination(); | |
| } | |
| function createCredCard(fullPath, credInfo) { | |
| const div = document.createElement('div'); | |
| const status = credInfo.status; | |
| const filename = credInfo.filename; | |
| // 调试：记录状态 | |
| if (filename.includes('atomic-affinity')) { | |
| console.log(`Creating card for ${filename}:`, status); | |
| } | |
| // 设置卡片状态样式 | |
| let cardClass = 'cred-card'; | |
| if (status.disabled) cardClass += ' disabled'; | |
| div.className = cardClass; | |
| // 创建状态标签 | |
| let statusBadges = ''; | |
| if (status.disabled) { | |
| statusBadges += '<span class="status-badge disabled">已禁用</span>'; | |
| } else { | |
| statusBadges += '<span class="status-badge enabled">已启用</span>'; | |
| } | |
| // 调试：记录 error_codes | |
| console.log(`Error codes for ${filename}:`, status.error_codes); | |
| if (status.error_codes && status.error_codes.length > 0) { | |
| statusBadges += `<span class="error-codes">错误码: ${status.error_codes.join(', ')}</span>`; | |
| // 检查是否包含自动封禁的错误码 | |
| const autoBanErrors = status.error_codes.filter(code => code === 400 || code === 403); | |
| if (autoBanErrors.length > 0 && status.disabled) { | |
| statusBadges += `<span class="status-badge" style="background-color: #e74c3c; color: white;">AUTO_BAN</span>`; | |
| } | |
| } else { | |
| // 显示无错误码状态 | |
| statusBadges += `<span class="status-badge" style="background-color: #28a745; color: white;">无错误</span>`; | |
| } | |
| // 为HTML ID生成安全的标识符 | |
| const pathId = btoa(encodeURIComponent(fullPath)).replace(/[+/=]/g, '_'); | |
| // 创建操作按钮 - 使用文件名而不是完整路径 | |
| let actionButtons = ''; | |
| if (status.disabled) { | |
| actionButtons += `<button class="cred-btn enable" data-filename="${filename}" data-action="enable">启用</button>`; | |
| } else { | |
| actionButtons += `<button class="cred-btn disable" data-filename="${filename}" data-action="disable">禁用</button>`; | |
| } | |
| actionButtons += ` | |
| <button class="cred-btn view" onclick="toggleCredDetails('${pathId}')">查看内容</button> | |
| <button class="cred-btn download" onclick="downloadCred('${filename}')">下载</button> | |
| <button class="cred-btn email" onclick="fetchUserEmail('${filename}')">查看账号邮箱</button> | |
| <button class="cred-btn delete" data-filename="${filename}" data-action="delete">删除</button> | |
| `; | |
| // 构建邮箱显示 | |
| let emailInfo = ''; | |
| if (credInfo.user_email) { | |
| emailInfo = `<div class="cred-email" style="font-size: 12px; color: #666; margin-top: 2px;">${credInfo.user_email}</div>`; | |
| } else { | |
| emailInfo = `<div class="cred-email" style="font-size: 12px; color: #999; margin-top: 2px; font-style: italic;">未获取邮箱</div>`; | |
| } | |
| div.innerHTML = ` | |
| <div class="cred-header"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <input type="checkbox" class="file-checkbox" data-filename="${filename}" onchange="toggleFileSelection('${filename}')"> | |
| <div> | |
| <div class="cred-filename">${filename}</div> | |
| ${emailInfo} | |
| </div> | |
| </div> | |
| <div class="cred-status">${statusBadges}</div> | |
| </div> | |
| <div class="cred-actions">${actionButtons}</div> | |
| <div class="cred-details" id="details-${pathId}"> | |
| <div class="cred-content"></div> | |
| </div> | |
| `; | |
| // 设置文件内容（避免HTML注入） | |
| const contentDiv = div.querySelector('.cred-content'); | |
| if (credInfo.content) { | |
| contentDiv.textContent = JSON.stringify(credInfo.content, null, 2); | |
| } else { | |
| contentDiv.textContent = credInfo.error || '无法读取文件内容'; | |
| } | |
| // 添加事件监听器到按钮 | |
| const actionButtonElements = div.querySelectorAll('[data-filename][data-action]'); | |
| actionButtonElements.forEach(button => { | |
| button.addEventListener('click', function () { | |
| const filename = this.getAttribute('data-filename'); | |
| const action = this.getAttribute('data-action'); | |
| if (action === 'delete') { | |
| deleteCred(filename); | |
| } else { | |
| credAction(filename, action); | |
| } | |
| }); | |
| }); | |
| return div; | |
| } | |
| async function credAction(filename, action) { | |
| try { | |
| console.log('Performing action:', action, 'on file:', filename); | |
| console.log('Filename type:', typeof filename); | |
| console.log('Filename length:', filename.length); | |
| console.log('Ends with .json:', filename.endsWith('.json')); | |
| const requestBody = { | |
| filename: filename, | |
| action: action | |
| }; | |
| console.log('Request body:', requestBody); | |
| const response = await fetch('/creds/action', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify(requestBody) | |
| }); | |
| console.log('Response status:', response.status); | |
| const data = await response.json(); | |
| console.log('Response data:', data); | |
| if (response.ok) { | |
| showStatus(data.message, 'success'); | |
| await refreshCredsStatus(); // 刷新状态 | |
| } else { | |
| showStatus(`操作失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('credAction error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| function toggleCredDetails(pathId) { | |
| const detailsId = 'details-' + pathId; | |
| const details = document.getElementById(detailsId); | |
| if (details) { | |
| details.classList.toggle('show'); | |
| } | |
| } | |
| async function downloadCred(filename) { | |
| try { | |
| const response = await fetch(`/creds/download/${filename}`, { | |
| method: 'GET', | |
| headers: { | |
| 'Authorization': `Bearer ${authToken}` | |
| } | |
| }); | |
| if (response.ok) { | |
| const blob = await response.blob(); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.style.display = 'none'; | |
| a.href = url; | |
| a.download = filename; | |
| document.body.appendChild(a); | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| document.body.removeChild(a); | |
| showStatus(`已下载文件: ${filename}`, 'success'); | |
| } else { | |
| const data = await response.json(); | |
| showStatus(`下载失败: ${data.error}`, 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(`下载失败: ${error.message}`, 'error'); | |
| } | |
| } | |
| async function downloadAllCreds() { | |
| try { | |
| const response = await fetch('/creds/download-all', { | |
| method: 'GET', | |
| headers: { | |
| 'Authorization': `Bearer ${authToken}` | |
| } | |
| }); | |
| if (response.ok) { | |
| const blob = await response.blob(); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.style.display = 'none'; | |
| a.href = url; | |
| a.download = 'credentials.zip'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| document.body.removeChild(a); | |
| showStatus('已下载所有凭证文件', 'success'); | |
| } else { | |
| const data = await response.json(); | |
| showStatus(`打包下载失败: ${data.error}`, 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(`打包下载失败: ${error.message}`, 'error'); | |
| } | |
| } | |
| async function deleteCred(filename) { | |
| if (!confirm(`确定要删除凭证文件吗？\n${filename}`)) { | |
| return; | |
| } | |
| await credAction(filename, 'delete'); | |
| } | |
| // 配置管理相关函数 | |
| let currentConfig = {}; | |
| let envLockedFields = new Set(); | |
| async function loadConfig() { | |
| const configLoading = document.getElementById('configLoading'); | |
| const configForm = document.getElementById('configForm'); | |
| try { | |
| configLoading.style.display = 'block'; | |
| configForm.classList.add('hidden'); | |
| const response = await fetch('/config/get', { | |
| method: 'GET', | |
| headers: getAuthHeaders() | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| currentConfig = data.config; | |
| envLockedFields = new Set(data.env_locked || []); | |
| populateConfigForm(); | |
| configForm.classList.remove('hidden'); | |
| showStatus('配置加载成功', 'success'); | |
| } else { | |
| showStatus(`加载配置失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('loadConfig error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } finally { | |
| configLoading.style.display = 'none'; | |
| } | |
| } | |
| function populateConfigForm() { | |
| // 服务器配置 | |
| setConfigField('host', currentConfig.host || '0.0.0.0'); | |
| setConfigField('port', currentConfig.port || 7861); | |
| setConfigField('configApiPassword', currentConfig.api_password || ''); | |
| setConfigField('configPanelPassword', currentConfig.panel_password || ''); | |
| setConfigField('configPassword', currentConfig.password || 'pwd'); | |
| // 基础配置 | |
| setConfigField('credentialsDir', currentConfig.credentials_dir || ''); | |
| setConfigField('proxy', currentConfig.proxy || ''); | |
| // 端点配置 | |
| setConfigField('codeAssistEndpoint', currentConfig.code_assist_endpoint || ''); | |
| setConfigField('oauthProxyUrl', currentConfig.oauth_proxy_url || ''); | |
| setConfigField('googleapisProxyUrl', currentConfig.googleapis_proxy_url || ''); | |
| setConfigField('resourceManagerApiUrl', currentConfig.resource_manager_api_url || ''); | |
| setConfigField('serviceUsageApiUrl', currentConfig.service_usage_api_url || ''); | |
| // 自动封禁配置 | |
| document.getElementById('autoBanEnabled').checked = Boolean(currentConfig.auto_ban_enabled); | |
| setConfigField('autoBanErrorCodes', (currentConfig.auto_ban_error_codes || []).join(',')); | |
| // 性能配置 | |
| setConfigField('callsPerRotation', currentConfig.calls_per_rotation || 10); | |
| // 429重试配置 | |
| document.getElementById('retry429Enabled').checked = Boolean(currentConfig.retry_429_enabled); | |
| setConfigField('retry429MaxRetries', currentConfig.retry_429_max_retries || 20); | |
| setConfigField('retry429Interval', currentConfig.retry_429_interval || 0.1); | |
| // 兼容性配置 | |
| document.getElementById('compatibilityModeEnabled').checked = Boolean(currentConfig.compatibility_mode_enabled); | |
| // 抗截断配置 | |
| setConfigField('antiTruncationMaxAttempts', currentConfig.anti_truncation_max_attempts || 3); | |
| } | |
| function setConfigField(fieldId, value) { | |
| const field = document.getElementById(fieldId); | |
| if (field) { | |
| field.value = value; | |
| // 检查是否被环境变量锚定 | |
| const configKey = fieldId.replace(/([A-Z])/g, '_$1').toLowerCase(); | |
| if (envLockedFields.has(configKey)) { | |
| field.disabled = true; | |
| field.classList.add('env-locked'); | |
| } else { | |
| field.disabled = false; | |
| field.classList.remove('env-locked'); | |
| } | |
| } | |
| } | |
| async function saveConfig() { | |
| try { | |
| // 调试：检查password字段的实际值 | |
| const passwordElement = document.getElementById('configPassword'); | |
| console.log('DEBUG: configPassword元素:', passwordElement); | |
| console.log('DEBUG: configPassword值:', passwordElement ? passwordElement.value : 'ELEMENT_NOT_FOUND'); | |
| const config = { | |
| host: document.getElementById('host').value.trim(), | |
| port: parseInt(document.getElementById('port').value) || 7861, | |
| api_password: document.getElementById('configApiPassword').value.trim(), | |
| panel_password: document.getElementById('configPanelPassword').value.trim(), | |
| password: document.getElementById('configPassword').value.trim(), | |
| code_assist_endpoint: document.getElementById('codeAssistEndpoint').value.trim(), | |
| credentials_dir: document.getElementById('credentialsDir').value.trim(), | |
| proxy: document.getElementById('proxy').value.trim(), | |
| // 端点配置 | |
| oauth_proxy_url: document.getElementById('oauthProxyUrl').value.trim(), | |
| googleapis_proxy_url: document.getElementById('googleapisProxyUrl').value.trim(), | |
| resource_manager_api_url: document.getElementById('resourceManagerApiUrl').value.trim(), | |
| service_usage_api_url: document.getElementById('serviceUsageApiUrl').value.trim(), | |
| auto_ban_enabled: document.getElementById('autoBanEnabled').checked, | |
| auto_ban_error_codes: document.getElementById('autoBanErrorCodes').value | |
| .split(',') | |
| .map(code => parseInt(code.trim())) | |
| .filter(code => !isNaN(code)), | |
| calls_per_rotation: parseInt(document.getElementById('callsPerRotation').value) || 10, | |
| retry_429_enabled: document.getElementById('retry429Enabled').checked, | |
| retry_429_max_retries: parseInt(document.getElementById('retry429MaxRetries').value) || 20, | |
| retry_429_interval: parseFloat(document.getElementById('retry429Interval').value) || 0.1, | |
| // 兼容性配置 | |
| compatibility_mode_enabled: document.getElementById('compatibilityModeEnabled').checked, | |
| // 抗截断配置 | |
| anti_truncation_max_attempts: parseInt(document.getElementById('antiTruncationMaxAttempts').value) || 3 | |
| }; | |
| const response = await fetch('/config/save', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify({ config: config }) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| let message = '配置保存成功'; | |
| // 处理热更新状态信息 | |
| if (data.hot_updated && data.hot_updated.length > 0) { | |
| message += `，以下配置已立即生效: ${data.hot_updated.join(', ')}`; | |
| } | |
| // 处理重启提醒 | |
| if (data.restart_required && data.restart_required.length > 0) { | |
| message += `\n⚠️ 重启提醒: ${data.restart_notice}`; | |
| showStatus(message, 'info'); | |
| } else { | |
| showStatus(message, 'success'); | |
| } | |
| // 重新加载配置以获取最新状态 | |
| setTimeout(() => loadConfig(), 1000); | |
| } else { | |
| showStatus(`保存配置失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('saveConfig error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 环境变量凭证管理相关函数 | |
| async function checkEnvCredsStatus() { | |
| const envStatusLoading = document.getElementById('envStatusLoading'); | |
| const envStatusContent = document.getElementById('envStatusContent'); | |
| try { | |
| envStatusLoading.style.display = 'block'; | |
| envStatusContent.classList.add('hidden'); | |
| const response = await fetch('/auth/env-creds-status', { | |
| method: 'GET', | |
| headers: getAuthHeaders() | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| // 更新环境变量列表 | |
| const envVarsList = document.getElementById('envVarsList'); | |
| if (Object.keys(data.available_env_vars).length > 0) { | |
| envVarsList.textContent = Object.keys(data.available_env_vars).join(', '); | |
| } else { | |
| envVarsList.textContent = '未找到GCLI_CREDS_*环境变量'; | |
| } | |
| // 更新自动加载状态 | |
| const autoLoadStatus = document.getElementById('autoLoadStatus'); | |
| autoLoadStatus.textContent = data.auto_load_enabled ? '✅ 已启用' : '❌ 未启用'; | |
| autoLoadStatus.style.color = data.auto_load_enabled ? '#28a745' : '#dc3545'; | |
| // 更新已导入文件统计 | |
| const envFilesCount = document.getElementById('envFilesCount'); | |
| envFilesCount.textContent = `${data.existing_env_files_count} 个文件`; | |
| const envFilesList = document.getElementById('envFilesList'); | |
| if (data.existing_env_files.length > 0) { | |
| envFilesList.textContent = data.existing_env_files.join(', '); | |
| } else { | |
| envFilesList.textContent = '无'; | |
| } | |
| envStatusContent.classList.remove('hidden'); | |
| showStatus('环境变量状态检查完成', 'success'); | |
| } else { | |
| showStatus(`获取环境变量状态失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('checkEnvCredsStatus error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } finally { | |
| envStatusLoading.style.display = 'none'; | |
| } | |
| } | |
| async function loadEnvCredentials() { | |
| try { | |
| showStatus('正在从环境变量导入凭证...', 'info'); | |
| const response = await fetch('/auth/load-env-creds', { | |
| method: 'POST', | |
| headers: getAuthHeaders() | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| if (data.loaded_count > 0) { | |
| showStatus(`✅ 成功导入 ${data.loaded_count}/${data.total_count} 个凭证文件`, 'success'); | |
| // 刷新状态 | |
| setTimeout(() => checkEnvCredsStatus(), 1000); | |
| } else { | |
| showStatus(`⚠️ ${data.message}`, 'info'); | |
| } | |
| } else { | |
| showStatus(`导入失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('loadEnvCredentials error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| async function clearEnvCredentials() { | |
| if (!confirm('确定要清除所有从环境变量导入的凭证文件吗？\n这将删除所有文件名以 "env-" 开头的认证文件。')) { | |
| return; | |
| } | |
| try { | |
| showStatus('正在清除环境变量凭证文件...', 'info'); | |
| const response = await fetch('/auth/env-creds', { | |
| method: 'DELETE', | |
| headers: getAuthHeaders() | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showStatus(`✅ 成功删除 ${data.deleted_count} 个环境变量凭证文件`, 'success'); | |
| // 刷新状态 | |
| setTimeout(() => checkEnvCredsStatus(), 1000); | |
| } else { | |
| showStatus(`清除失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('clearEnvCredentials error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 批量操作相关函数 | |
| function toggleFileSelection(filename) { | |
| if (selectedCredFiles.has(filename)) { | |
| selectedCredFiles.delete(filename); | |
| } else { | |
| selectedCredFiles.add(filename); | |
| } | |
| updateBatchControls(); | |
| } | |
| function toggleSelectAll() { | |
| const selectAllCheckbox = document.getElementById('selectAllCheckbox'); | |
| const fileCheckboxes = document.querySelectorAll('.file-checkbox'); | |
| if (selectAllCheckbox.checked) { | |
| // 全选当前页面的文件 | |
| fileCheckboxes.forEach(checkbox => { | |
| const filename = checkbox.getAttribute('data-filename'); | |
| selectedCredFiles.add(filename); | |
| checkbox.checked = true; | |
| }); | |
| } else { | |
| // 取消全选 | |
| selectedCredFiles.clear(); | |
| fileCheckboxes.forEach(checkbox => { | |
| checkbox.checked = false; | |
| }); | |
| } | |
| updateBatchControls(); | |
| } | |
| function updateBatchControls() { | |
| const selectedCount = selectedCredFiles.size; | |
| const selectedCountElement = document.getElementById('selectedCount'); | |
| const batchEnableBtn = document.getElementById('batchEnableBtn'); | |
| const batchDisableBtn = document.getElementById('batchDisableBtn'); | |
| const batchDeleteBtn = document.getElementById('batchDeleteBtn'); | |
| const selectAllCheckbox = document.getElementById('selectAllCheckbox'); | |
| selectedCountElement.textContent = `已选择 ${selectedCount} 项`; | |
| // 启用/禁用批量操作按钮 | |
| const hasSelection = selectedCount > 0; | |
| batchEnableBtn.disabled = !hasSelection; | |
| batchDisableBtn.disabled = !hasSelection; | |
| batchDeleteBtn.disabled = !hasSelection; | |
| // 更新全选复选框状态 | |
| const currentPageFileCount = document.querySelectorAll('.file-checkbox').length; | |
| const currentPageSelectedCount = Array.from(document.querySelectorAll('.file-checkbox')) | |
| .filter(checkbox => selectedCredFiles.has(checkbox.getAttribute('data-filename'))).length; | |
| if (currentPageSelectedCount === 0) { | |
| selectAllCheckbox.indeterminate = false; | |
| selectAllCheckbox.checked = false; | |
| } else if (currentPageSelectedCount === currentPageFileCount) { | |
| selectAllCheckbox.indeterminate = false; | |
| selectAllCheckbox.checked = true; | |
| } else { | |
| selectAllCheckbox.indeterminate = true; | |
| selectAllCheckbox.checked = false; | |
| } | |
| // 更新页面上的复选框状态 | |
| document.querySelectorAll('.file-checkbox').forEach(checkbox => { | |
| const filename = checkbox.getAttribute('data-filename'); | |
| checkbox.checked = selectedCredFiles.has(filename); | |
| }); | |
| } | |
| async function batchAction(action) { | |
| const selectedFiles = Array.from(selectedCredFiles); | |
| if (selectedFiles.length === 0) { | |
| showStatus('请先选择要操作的文件', 'error'); | |
| return; | |
| } | |
| let confirmMessage = ''; | |
| switch (action) { | |
| case 'enable': | |
| confirmMessage = `确定要启用选中的 ${selectedFiles.length} 个文件吗？`; | |
| break; | |
| case 'disable': | |
| confirmMessage = `确定要禁用选中的 ${selectedFiles.length} 个文件吗？`; | |
| break; | |
| case 'delete': | |
| confirmMessage = `确定要删除选中的 ${selectedFiles.length} 个文件吗？\n注意：此操作不可恢复！`; | |
| break; | |
| } | |
| if (!confirm(confirmMessage)) { | |
| return; | |
| } | |
| try { | |
| showStatus(`正在执行批量${action === 'enable' ? '启用' : action === 'disable' ? '禁用' : '删除'}操作...`, 'info'); | |
| const requestBody = { | |
| action: action, | |
| filenames: selectedFiles | |
| }; | |
| const response = await fetch('/creds/batch-action', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify(requestBody) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showStatus(`批量操作完成：成功处理 ${data.success_count}/${selectedFiles.length} 个文件`, 'success'); | |
| // 清空选择 | |
| selectedCredFiles.clear(); | |
| updateBatchControls(); | |
| // 刷新列表 | |
| await refreshCredsStatus(); | |
| } else { | |
| showStatus(`批量操作失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('batchAction error:', error); | |
| showStatus(`批量操作网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 邮箱相关函数 | |
| async function fetchUserEmail(filename) { | |
| try { | |
| showStatus('正在获取用户邮箱...', 'info'); | |
| const response = await fetch(`/creds/fetch-email/${encodeURIComponent(filename)}`, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${authToken}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| const data = await response.json(); | |
| if (response.ok && data.user_email) { | |
| showStatus(`成功获取邮箱: ${data.user_email}`, 'success'); | |
| // 刷新凭证状态以更新显示 | |
| await refreshCredsStatus(); | |
| } else { | |
| showStatus(data.message || '无法获取用户邮箱', 'error'); | |
| } | |
| } catch (error) { | |
| console.error('fetchUserEmail error:', error); | |
| showStatus(`获取邮箱失败: ${error.message}`, 'error'); | |
| } | |
| } | |
| async function refreshAllEmails() { | |
| try { | |
| if (!confirm('确定要刷新所有凭证的用户邮箱吗？这可能需要一些时间。')) { | |
| return; | |
| } | |
| showStatus('正在刷新所有用户邮箱...', 'info'); | |
| const response = await fetch('/creds/refresh-all-emails', { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${authToken}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showStatus(`邮箱刷新完成：成功获取 ${data.success_count}/${data.total_count} 个邮箱地址`, 'success'); | |
| // 刷新凭证状态以更新显示 | |
| await refreshCredsStatus(); | |
| } else { | |
| showStatus(data.message || '邮箱刷新失败', 'error'); | |
| } | |
| } catch (error) { | |
| console.error('refreshAllEmails error:', error); | |
| showStatus(`邮箱刷新网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // Project ID 折叠切换函数 | |
| function toggleProjectIdSection() { | |
| const section = document.getElementById('projectIdSection'); | |
| const icon = document.getElementById('projectIdToggleIcon'); | |
| if (section.style.display === 'none') { | |
| section.style.display = 'block'; | |
| icon.style.transform = 'rotate(90deg)'; | |
| icon.textContent = '▼'; | |
| } else { | |
| section.style.display = 'none'; | |
| icon.style.transform = 'rotate(0deg)'; | |
| icon.textContent = '▶'; | |
| } | |
| } | |
| // 回调URL输入区域折叠切换函数 | |
| function toggleCallbackUrlSection() { | |
| const section = document.getElementById('callbackUrlSection'); | |
| const icon = document.getElementById('callbackUrlToggleIcon'); | |
| if (section.style.display === 'none') { | |
| section.style.display = 'block'; | |
| icon.style.transform = 'rotate(180deg)'; | |
| icon.textContent = '▲'; | |
| } else { | |
| section.style.display = 'none'; | |
| icon.style.transform = 'rotate(0deg)'; | |
| icon.textContent = '▼'; | |
| } | |
| } | |
| // 处理回调URL的函数 | |
| async function processCallbackUrl() { | |
| const callbackUrlInput = document.getElementById('callbackUrlInput'); | |
| const callbackUrl = callbackUrlInput.value.trim(); | |
| const getAllProjects = document.getElementById('getAllProjectsCreds').checked; | |
| if (!callbackUrl) { | |
| showStatus('请输入回调URL', 'error'); | |
| return; | |
| } | |
| // 简单验证URL格式 | |
| if (!callbackUrl.startsWith('http://') && !callbackUrl.startsWith('https://')) { | |
| showStatus('请输入有效的URL（以http://或https://开头）', 'error'); | |
| return; | |
| } | |
| // 检查是否包含必要参数 | |
| if (!callbackUrl.includes('code=') || !callbackUrl.includes('state=')) { | |
| showStatus('❌ 这不是有效的回调URL！请确保：\n1. 已完成Google OAuth授权\n2. 复制的是浏览器地址栏的完整URL\n3. URL包含code和state参数', 'error'); | |
| return; | |
| } | |
| if (getAllProjects) { | |
| showStatus('正在从回调URL并发批量获取所有项目凭证...', 'info'); | |
| } else { | |
| showStatus('正在从回调URL获取凭证...', 'info'); | |
| } | |
| try { | |
| // 获取当前项目ID设置（如果有的话） | |
| const projectIdInput = document.getElementById('projectId'); | |
| const projectId = projectIdInput ? projectIdInput.value.trim() : null; | |
| const response = await fetch('/auth/callback-url', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify({ | |
| callback_url: callbackUrl, | |
| project_id: projectId || null, | |
| get_all_projects: getAllProjects | |
| }) | |
| }); | |
| const result = await response.json(); | |
| if (getAllProjects && result.multiple_credentials) { | |
| // 处理多项目认证结果 | |
| const results = result.multiple_credentials; | |
| let resultText = `批量并发认证完成！成功为 ${results.success.length} 个项目生成凭证：\n\n`; | |
| // 显示成功的项目 | |
| results.success.forEach((item, index) => { | |
| resultText += `${index + 1}. 项目: ${item.project_name} (${item.project_id})\n`; | |
| resultText += ` 文件: ${item.file_path}\n\n`; | |
| }); | |
| // 显示失败的项目（如果有） | |
| if (results.failed.length > 0) { | |
| resultText += `\n失败的项目 (${results.failed.length} 个):\n`; | |
| results.failed.forEach((item, index) => { | |
| resultText += `${index + 1}. 项目: ${item.project_name} (${item.project_id})\n`; | |
| resultText += ` 错误: ${item.error}\n\n`; | |
| }); | |
| } | |
| // 显示结果 | |
| document.getElementById('credentialsContent').textContent = resultText; | |
| document.getElementById('credentialsSection').classList.remove('hidden'); | |
| showStatus(`✅ 批量并发认证完成！成功生成 ${results.success.length} 个项目的凭证文件${results.failed.length > 0 ? `，${results.failed.length} 个项目失败` : ''}`, 'success'); | |
| } else if (result.credentials) { | |
| // 处理单项目认证结果 | |
| showStatus(result.message || '从回调URL获取凭证成功！', 'success'); | |
| // 显示凭证内容 | |
| document.getElementById('credentialsContent').innerHTML = | |
| '<pre>' + JSON.stringify(result.credentials, null, 2) + '</pre>'; | |
| document.getElementById('credentialsSection').classList.remove('hidden'); | |
| } else if (result.requires_manual_project_id) { | |
| showStatus('需要手动指定项目ID，请在高级选项中填入Google Cloud项目ID后重试', 'error'); | |
| } else if (result.requires_project_selection) { | |
| let projectOptions = '<br><strong>可用项目：</strong><br>'; | |
| result.available_projects.forEach(project => { | |
| projectOptions += `• ${project.name} (ID: ${project.projectId})<br>`; | |
| }); | |
| showStatus('检测到多个项目，请在高级选项中指定项目ID：' + projectOptions, 'error'); | |
| } else { | |
| showStatus(result.error || '从回调URL获取凭证失败', 'error'); | |
| } | |
| // 清空输入框 | |
| callbackUrlInput.value = ''; | |
| // 刷新凭证列表（如果有） | |
| setTimeout(() => { | |
| if (typeof refreshCredsStatus === 'function') { | |
| refreshCredsStatus(); | |
| } | |
| }, 1000); | |
| } catch (error) { | |
| console.error('从回调URL获取凭证时出错:', error); | |
| showStatus(`从回调URL获取凭证失败: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 处理勾选框状态变化 | |
| function handleGetAllProjectsChange() { | |
| const checkbox = document.getElementById('getAllProjectsCreds'); | |
| const note = document.getElementById('allProjectsNote'); | |
| const projectIdSection = document.getElementById('projectIdSection'); | |
| const projectIdToggle = document.querySelector('[onclick="toggleProjectIdSection()"]'); | |
| if (checkbox.checked) { | |
| // 显示批量认证提示 | |
| note.style.display = 'block'; | |
| // 禁用项目ID输入（批量模式下不需要指定单个项目） | |
| if (projectIdSection.style.display !== 'none') { | |
| toggleProjectIdSection(); | |
| } | |
| projectIdToggle.style.opacity = '0.5'; | |
| projectIdToggle.style.pointerEvents = 'none'; | |
| projectIdToggle.title = '批量认证模式下无需指定单个项目ID'; | |
| } else { | |
| // 隐藏批量认证提示 | |
| note.style.display = 'none'; | |
| // 重新启用项目ID输入 | |
| projectIdToggle.style.opacity = '1'; | |
| projectIdToggle.style.pointerEvents = 'auto'; | |
| projectIdToggle.title = ''; | |
| } | |
| } | |
| // 页面加载时检查状态 | |
| window.onload = function () { | |
| console.log('Page loaded'); | |
| console.log('Login section exists:', !!document.getElementById('loginSection')); | |
| console.log('Main section exists:', !!document.getElementById('mainSection')); | |
| console.log('Status section exists:', !!document.getElementById('statusSection')); | |
| // 添加勾选框事件监听器 | |
| const checkbox = document.getElementById('getAllProjectsCreds'); | |
| if (checkbox) { | |
| checkbox.addEventListener('change', handleGetAllProjectsChange); | |
| } | |
| showStatus('请输入密码登录', 'info'); | |
| }; | |
| // ===================================================================== | |
| // 使用统计相关函数 | |
| // ===================================================================== | |
| let usageStatsData = {}; | |
| let currentEditingFile = ''; | |
| // 刷新使用统计 | |
| async function refreshUsageStats() { | |
| const usageLoading = document.getElementById('usageLoading'); | |
| const usageList = document.getElementById('usageList'); | |
| try { | |
| usageLoading.style.display = 'block'; | |
| usageList.innerHTML = ''; | |
| // 获取所有文件的使用统计 | |
| const [statsResponse, aggregatedResponse] = await Promise.all([ | |
| fetch('/usage/stats', { | |
| method: 'GET', | |
| headers: getAuthHeaders() | |
| }), | |
| fetch('/usage/aggregated', { | |
| method: 'GET', | |
| headers: getAuthHeaders() | |
| }) | |
| ]); | |
| const statsData = await statsResponse.json(); | |
| const aggregatedData = await aggregatedResponse.json(); | |
| if (statsResponse.ok && aggregatedResponse.ok) { | |
| usageStatsData = statsData.data; | |
| // 更新概览统计 | |
| document.getElementById('totalApiCalls').textContent = aggregatedData.data.total_all_model_calls || 0; | |
| document.getElementById('geminiProCalls').textContent = aggregatedData.data.total_gemini_2_5_pro_calls || 0; | |
| document.getElementById('totalFiles').textContent = aggregatedData.data.total_files || 0; | |
| // 渲染使用统计列表 | |
| renderUsageList(); | |
| showStatus(`已加载 ${aggregatedData.data.total_files} 个文件的使用统计`, 'success'); | |
| } else { | |
| showStatus('加载使用统计失败', 'error'); | |
| } | |
| } catch (error) { | |
| console.error('refreshUsageStats error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } finally { | |
| usageLoading.style.display = 'none'; | |
| } | |
| } | |
| // 渲染使用统计列表 | |
| function renderUsageList() { | |
| const usageList = document.getElementById('usageList'); | |
| usageList.innerHTML = ''; | |
| if (Object.keys(usageStatsData).length === 0) { | |
| usageList.innerHTML = '<p style="text-align: center; color: #666;">暂无使用统计数据</p>'; | |
| return; | |
| } | |
| for (const [filename, stats] of Object.entries(usageStatsData)) { | |
| const card = createUsageCard(filename, stats); | |
| usageList.appendChild(card); | |
| } | |
| } | |
| // 创建使用统计卡片 | |
| function createUsageCard(filename, stats) { | |
| const div = document.createElement('div'); | |
| div.className = 'usage-card'; | |
| // 计算使用百分比 | |
| const geminiPercent = Math.min((stats.gemini_2_5_pro_calls / stats.daily_limit_gemini_2_5_pro) * 100, 100); | |
| const totalPercent = Math.min((stats.total_calls / stats.daily_limit_total) * 100, 100); | |
| // 确定进度条颜色 | |
| function getProgressClass(percent) { | |
| if (percent >= 90) return 'danger'; | |
| if (percent >= 70) return 'warning'; | |
| return 'gemini'; | |
| } | |
| function getTotalProgressClass(percent) { | |
| if (percent >= 90) return 'danger'; | |
| if (percent >= 70) return 'warning'; | |
| return 'total'; | |
| } | |
| // 格式化时间 | |
| function formatTime(isoString) { | |
| if (!isoString) return '未知'; | |
| try { | |
| const date = new Date(isoString); | |
| return date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' }); | |
| } catch (e) { | |
| return '格式错误'; | |
| } | |
| } | |
| div.innerHTML = ` | |
| <div class="usage-header"> | |
| <div class="usage-filename">${filename}</div> | |
| </div> | |
| <div class="usage-progress"> | |
| <div class="usage-progress-label"> | |
| <span>Gemini 2.5 Pro</span> | |
| <span>${stats.gemini_2_5_pro_calls}/${stats.daily_limit_gemini_2_5_pro} (${geminiPercent.toFixed(1)}%)</span> | |
| </div> | |
| <div class="usage-progress-bar"> | |
| <div class="usage-progress-fill ${getProgressClass(geminiPercent)}" style="width: ${geminiPercent}%"></div> | |
| </div> | |
| </div> | |
| <div class="usage-progress"> | |
| <div class="usage-progress-label"> | |
| <span>所有模型</span> | |
| <span>${stats.total_calls}/${stats.daily_limit_total} (${totalPercent.toFixed(1)}%)</span> | |
| </div> | |
| <div class="usage-progress-bar"> | |
| <div class="usage-progress-fill ${getTotalProgressClass(totalPercent)}" style="width: ${totalPercent}%"></div> | |
| </div> | |
| </div> | |
| <div class="usage-info"> | |
| <div class="usage-info-item" style="grid-column: 1 / -1;"> | |
| <span class="usage-info-label">下次重置时间</span> | |
| <span class="usage-info-value">${formatTime(stats.next_reset_time)}</span> | |
| </div> | |
| </div> | |
| <div class="usage-actions"> | |
| <button class="usage-btn limits" onclick="openLimitsModal('${filename}')">设置限制</button> | |
| <button class="usage-btn reset" onclick="resetSingleUsageStats('${filename}')">重置统计</button> | |
| </div> | |
| `; | |
| return div; | |
| } | |
| // 打开限制设置弹窗 | |
| function openLimitsModal(filename) { | |
| const stats = usageStatsData[filename]; | |
| if (!stats) { | |
| showStatus('找不到文件统计数据', 'error'); | |
| return; | |
| } | |
| currentEditingFile = filename; | |
| document.getElementById('modalFilename').value = filename; | |
| document.getElementById('modalGeminiLimit').value = stats.daily_limit_gemini_2_5_pro; | |
| document.getElementById('modalTotalLimit').value = stats.daily_limit_total; | |
| document.getElementById('limitsModal').style.display = 'block'; | |
| } | |
| // 关闭限制设置弹窗 | |
| function closeLimitsModal() { | |
| document.getElementById('limitsModal').style.display = 'none'; | |
| currentEditingFile = ''; | |
| } | |
| // 保存限制设置 | |
| async function saveLimits() { | |
| const geminiLimit = parseInt(document.getElementById('modalGeminiLimit').value); | |
| const totalLimit = parseInt(document.getElementById('modalTotalLimit').value); | |
| if (isNaN(geminiLimit) || geminiLimit < 1) { | |
| showStatus('Gemini 2.5 Pro 限制必须是大于0的数字', 'error'); | |
| return; | |
| } | |
| if (isNaN(totalLimit) || totalLimit < 1) { | |
| showStatus('总调用限制必须是大于0的数字', 'error'); | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/usage/update-limits', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify({ | |
| filename: currentEditingFile, | |
| gemini_2_5_pro_limit: geminiLimit, | |
| total_limit: totalLimit | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showStatus(data.message, 'success'); | |
| closeLimitsModal(); | |
| // 刷新统计数据 | |
| await refreshUsageStats(); | |
| } else { | |
| showStatus(`设置失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('saveLimits error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 重置单个文件的使用统计 | |
| async function resetSingleUsageStats(filename) { | |
| if (!confirm(`确定要重置 ${filename} 的使用统计吗？`)) { | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/usage/reset', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify({ filename: filename }) | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showStatus(data.message, 'success'); | |
| await refreshUsageStats(); | |
| } else { | |
| showStatus(`重置失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('resetSingleUsageStats error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 重置所有使用统计 | |
| async function resetAllUsageStats() { | |
| if (!confirm('确定要重置所有文件的使用统计吗？此操作不可恢复！')) { | |
| return; | |
| } | |
| try { | |
| const response = await fetch('/usage/reset', { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify({}) // 不提供filename表示重置所有 | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| showStatus(data.message, 'success'); | |
| await refreshUsageStats(); | |
| } else { | |
| showStatus(`重置失败: ${data.detail || data.error || '未知错误'}`, 'error'); | |
| } | |
| } catch (error) { | |
| console.error('resetAllUsageStats error:', error); | |
| showStatus(`网络错误: ${error.message}`, 'error'); | |
| } | |
| } | |
| // 关闭弹窗当点击弹窗外部时 | |
| window.onclick = function (event) { | |
| const modal = document.getElementById('limitsModal'); | |
| if (event.target == modal) { | |
| closeLimitsModal(); | |
| } | |
| } | |
| // ===================================================================== | |
| // 端点配置快速切换函数 | |
| // ===================================================================== | |
| // 镜像网址配置 | |
| const mirrorUrls = { | |
| codeAssistEndpoint: 'https://gcli-api.sukaka.top/cloudcode-pa', | |
| oauthProxyUrl: 'https://gcli-api.sukaka.top/oauth2', | |
| googleapisProxyUrl: 'https://gcli-api.sukaka.top/googleapis', | |
| resourceManagerApiUrl: 'https://gcli-api.sukaka.top/cloudresourcemanager', | |
| serviceUsageApiUrl: 'https://gcli-api.sukaka.top/serviceusage' | |
| }; | |
| // 官方端点配置 | |
| const officialUrls = { | |
| codeAssistEndpoint: 'https://cloudcode-pa.googleapis.com', | |
| oauthProxyUrl: 'https://oauth2.googleapis.com', | |
| googleapisProxyUrl: 'https://www.googleapis.com', | |
| resourceManagerApiUrl: 'https://cloudresourcemanager.googleapis.com', | |
| serviceUsageApiUrl: 'https://serviceusage.googleapis.com' | |
| }; | |
| // 使用镜像网址 | |
| function useMirrorUrls() { | |
| if (confirm('确定要将所有端点配置为镜像网址吗？\n\n镜像网址：\n• Code Assist: https://gcli-api.sukaka.top/cloudcode-pa\n• OAuth: https://gcli-api.sukaka.top/oauth2\n• Google APIs: https://gcli-api.sukaka.top/googleapis\n• Resource Manager: https://gcli-api.sukaka.top/cloudresourcemanager\n• Service Usage: https://gcli-api.sukaka.top/serviceusage')) { | |
| // 设置所有端点为镜像网址 | |
| for (const [fieldId, url] of Object.entries(mirrorUrls)) { | |
| const field = document.getElementById(fieldId); | |
| if (field && !field.disabled) { | |
| field.value = url; | |
| } | |
| } | |
| showStatus('✅ 已切换到镜像网址配置，记得点击"保存配置"按钮保存设置', 'success'); | |
| } | |
| } | |
| // 还原官方端点 | |
| function restoreOfficialUrls() { | |
| if (confirm('确定要将所有端点配置为官方地址吗？\n\n官方端点：\n• Code Assist: https://cloudcode-pa.googleapis.com\n• OAuth: https://oauth2.googleapis.com\n• Google APIs: https://www.googleapis.com\n• Resource Manager: https://cloudresourcemanager.googleapis.com\n• Service Usage: https://serviceusage.googleapis.com')) { | |
| // 设置所有端点为官方地址 | |
| for (const [fieldId, url] of Object.entries(officialUrls)) { | |
| const field = document.getElementById(fieldId); | |
| if (field && !field.disabled) { | |
| field.value = url; | |
| } | |
| } | |
| showStatus('✅ 已切换到官方端点配置，记得点击"保存配置"按钮保存设置', 'success'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |