|
|
<!DOCTYPE html> |
|
|
<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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
background-color: #f8f9fa; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background-color: white; |
|
|
padding: 30px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
box-sizing: border-box; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
#statusSection { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
left: auto; |
|
|
transform: none; |
|
|
z-index: 9999; |
|
|
width: auto; |
|
|
max-width: 400px; |
|
|
min-width: 250px; |
|
|
} |
|
|
|
|
|
|
|
|
#statusSection .status { |
|
|
padding: 12px 20px; |
|
|
border-radius: 8px; |
|
|
margin: 0; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
|
|
opacity: 0; |
|
|
transform: translateX(100%); |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
} |
|
|
|
|
|
#statusSection .status.show { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
#statusSection .status.fade-out { |
|
|
opacity: 0; |
|
|
transform: translateX(100%); |
|
|
} |
|
|
|
|
|
#statusSection .status.success { |
|
|
background-color: #28a745; |
|
|
border: none; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
#statusSection .status.error { |
|
|
background-color: #dc3545; |
|
|
border: none; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
#statusSection .status.warning { |
|
|
background-color: #ffc107; |
|
|
border: none; |
|
|
color: #212529; |
|
|
} |
|
|
|
|
|
#statusSection .status.info { |
|
|
background-color: #17a2b8; |
|
|
border: none; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.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: inline-flex; |
|
|
background: linear-gradient(145deg, #f5f5f7, #e8e8ed); |
|
|
padding: 6px; |
|
|
border-radius: 14px; |
|
|
margin-bottom: 25px; |
|
|
border-bottom: none; |
|
|
gap: 3px; |
|
|
overflow-x: auto; |
|
|
max-width: 100%; |
|
|
user-select: none; |
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), |
|
|
0 1px 2px rgba(255, 255, 255, 0.9); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
.tab-slider { |
|
|
position: absolute; |
|
|
top: 6px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: calc(100% - 12px); |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), |
|
|
0 1px 3px rgba(0, 0, 0, 0.06), |
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.02); |
|
|
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), |
|
|
right 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
.tab-slider::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 50%; |
|
|
background: linear-gradient(180deg, |
|
|
rgba(255, 255, 255, 0.8) 0%, |
|
|
rgba(255, 255, 255, 0) 100%); |
|
|
border-radius: 10px 10px 0 0; |
|
|
pointer-events: none; |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.tabs::-webkit-scrollbar { |
|
|
height: 4px; |
|
|
} |
|
|
|
|
|
.tabs::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.tabs::-webkit-scrollbar-thumb { |
|
|
background: rgba(0, 0, 0, 0.15); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.tabs::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
|
|
|
.tab { |
|
|
padding: 10px 18px; |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
background: transparent; |
|
|
border-radius: 10px; |
|
|
color: #666; |
|
|
font-size: 14px; |
|
|
font-weight: 450; |
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
white-space: nowrap; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.tab::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-radius: 50%; |
|
|
background: rgba(66, 133, 244, 0.15); |
|
|
transform: translate(-50%, -50%); |
|
|
transition: width 0.4s ease, height 0.4s ease; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.tab:active::before { |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
} |
|
|
|
|
|
.tab.active { |
|
|
color: #1a1a1a; |
|
|
font-weight: 550; |
|
|
transform: translateY(0); |
|
|
|
|
|
} |
|
|
|
|
|
.tab:hover:not(.active) { |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
color: #333; |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
|
|
|
.tab:active { |
|
|
transform: scale(0.97) translateY(0); |
|
|
transition: transform 0.1s ease; |
|
|
} |
|
|
|
|
|
.tab.active:active { |
|
|
transform: scale(0.98); |
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), |
|
|
inset 0 1px 2px rgba(0, 0, 0, 0.02); |
|
|
} |
|
|
|
|
|
|
|
|
.tab:focus { |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.tab:focus-visible { |
|
|
outline: 2px solid rgba(66, 133, 244, 0.5); |
|
|
outline-offset: 2px; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
|
|
|
} |
|
|
|
|
|
.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; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
.cooldown-badge { |
|
|
background-color: #ffc107; |
|
|
color: #856404; |
|
|
padding: 2px 8px; |
|
|
border-radius: 12px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.cooldown-badge.ready { |
|
|
background-color: #28a745; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.model-cooldown-details { |
|
|
background-color: #e3f2fd; |
|
|
border: 1px solid #90caf9; |
|
|
border-radius: 4px; |
|
|
padding: 8px; |
|
|
margin-top: 8px; |
|
|
font-size: 11px; |
|
|
color: #1976d2; |
|
|
} |
|
|
|
|
|
.model-cooldown-item { |
|
|
display: inline-block; |
|
|
background-color: #64b5f6; |
|
|
color: white; |
|
|
padding: 2px 6px; |
|
|
border-radius: 10px; |
|
|
margin: 2px; |
|
|
font-size: 10px; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
.cred-quota-details { |
|
|
margin-top: 10px; |
|
|
animation: slideDown 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideDown { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.cred-quota-content { |
|
|
background: linear-gradient(to bottom, #ffffff, #f8f9fa); |
|
|
border: 2px solid #17a2b8; |
|
|
border-radius: 8px; |
|
|
padding: 10px; |
|
|
box-shadow: 0 2px 8px rgba(23, 162, 184, 0.15); |
|
|
} |
|
|
|
|
|
.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"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;"> |
|
|
<div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;"> |
|
|
<h1 style="margin: 0;">GCLI2API 管理面板</h1> |
|
|
<span id="versionInfo" style="font-size: 12px; color: #666;"> |
|
|
<span id="versionText">加载中...</span> |
|
|
</span> |
|
|
<button onclick="checkForUpdates()" id="checkUpdateBtn" |
|
|
style="padding: 4px 12px; background-color: #17a2b8; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; white-space: nowrap;"> |
|
|
检查更新 |
|
|
</button> |
|
|
</div> |
|
|
<button onclick="logout()" |
|
|
style="padding: 8px 20px; background-color: #dc3545; color: white; border: none; border-radius: 5px; font-size: 14px; cursor: pointer;"> |
|
|
退出登录 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tabs"> |
|
|
<div class="tab-slider"></div> |
|
|
<button class="tab active" onclick="switchTab('oauth')">OAuth认证</button> |
|
|
<button class="tab" onclick="switchTab('antigravity')">Antigravity认证</button> |
|
|
<button class="tab" onclick="switchTab('upload')">批量上传</button> |
|
|
<button class="tab" onclick="switchTab('manage')">GCLI凭证管理</button> |
|
|
<button class="tab" onclick="switchTab('antigravity-manage')">Antigravity凭证管理</button> |
|
|
<button class="tab" onclick="switchTab('config')">配置管理</button> |
|
|
<button class="tab" onclick="switchTab('logs')">实时日志</button> |
|
|
<button class="tab" onclick="switchTab('about')">项目信息</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="oauthTab" class="tab-content active"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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:11451显示成功页面</li> |
|
|
<li>关闭OAuth窗口，返回本页面</li> |
|
|
<li>点击下方"获取认证文件"按钮完成流程</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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>防火墙阻止了11451端口访问</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:11451/?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:11451/?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="antigravityTab" class="tab-content"> |
|
|
<div class="status info" style="margin-bottom: 20px;"> |
|
|
<strong>🚀 Antigravity 认证模式</strong> |
|
|
<p style="margin: 10px 0;"> |
|
|
获取谷歌Antigravity 凭证 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<button class="btn" id="getAntigravityAuthBtn">获取 Antigravity 认证链接</button> |
|
|
|
|
|
<div id="antigravityAuthUrlSection" class="hidden"> |
|
|
<h3>Antigravity 认证链接：</h3> |
|
|
<div class="auth-url"> |
|
|
<a id="antigravityAuthUrl" href="#" target="_blank">点击此链接进行认证</a> |
|
|
</div> |
|
|
<div class="status info"> |
|
|
<strong>使用说明：</strong> |
|
|
<ol style="margin: 10px 0; padding-left: 20px;"> |
|
|
<li>点击上方认证链接，在新窗口中完成 Google 授权</li> |
|
|
<li>授权成功后会跳转到 localhost 显示成功页面</li> |
|
|
<li>关闭 OAuth 窗口，返回本页面</li> |
|
|
<li>点击下方"获取凭证"按钮完成流程</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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="toggleAntigravityCallbackUrlSection()"> |
|
|
<span style="font-weight: bold; color: #0066cc;">🚀 无法回源？试试快捷方式</span> |
|
|
<span id="antigravityCallbackUrlToggleIcon" |
|
|
style="font-size: 14px; color: #666; transition: transform 0.3s ease;">▼</span> |
|
|
</div> |
|
|
<div id="antigravityCallbackUrlSection" 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>防火墙阻止了11451端口访问</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:11451/?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="antigravityCallbackUrlInput" |
|
|
placeholder="粘贴完整的回调URL，例如：http://localhost:11451/?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="processAntigravityCallbackUrl()"> |
|
|
从回调URL获取凭证 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="btn" id="getAntigravityCredsBtn" onclick="getAntigravityCredentials()">获取 Antigravity |
|
|
凭证</button> |
|
|
|
|
|
<div id="antigravityCredsSection" class="hidden"> |
|
|
<h3>Antigravity 凭证内容：</h3> |
|
|
<div class="credentials"> |
|
|
<pre id="antigravityCredsContent"></pre> |
|
|
</div> |
|
|
<button class="btn" onclick="downloadAntigravityCredentials()">下载凭证文件</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="uploadTab" class="tab-content"> |
|
|
<h3>批量上传认证文件</h3> |
|
|
<p>支持批量上传 GCLI 和 Antigravity 认证文件</p> |
|
|
|
|
|
|
|
|
<div |
|
|
style="margin-bottom: 30px; padding: 20px; border: 2px solid #e1e4e8; border-radius: 8px; background: #f8f9fa;"> |
|
|
<h4 style="margin-top: 0; color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 10px;"> |
|
|
📤 GCLI 凭证批量上传</h4> |
|
|
|
|
|
<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 style="padding: 20px; border: 2px solid #e1e4e8; border-radius: 8px; background: #f8f9fa;"> |
|
|
<h4 style="margin-top: 0; color: #28a745; border-bottom: 2px solid #28a745; padding-bottom: 10px;"> |
|
|
📤 Antigravity 凭证批量上传</h4> |
|
|
|
|
|
<div class="upload-area" style="border-color: #28a745;" |
|
|
onclick="document.getElementById('antigravityFileInput').click()" |
|
|
ondragover="event.preventDefault(); this.style.borderColor='#28a745'; this.style.backgroundColor='#e7f9e7';" |
|
|
ondragleave="this.style.borderColor='#ddd'; this.style.backgroundColor='#fafafa';" |
|
|
ondrop="handleAntigravityFileDrop(event)"> |
|
|
<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="antigravityFileInput" multiple accept=".json,.zip" style="display: none;" |
|
|
onchange="handleAntigravityFileSelect(event)" /> |
|
|
|
|
|
<div id="antigravityFileListSection" class="hidden"> |
|
|
<h4>选择的文件：</h4> |
|
|
<div class="file-list" id="antigravityFileList"></div> |
|
|
<button class="btn" style="background-color: #28a745;" |
|
|
onclick="uploadAntigravityFiles()">上传文件</button> |
|
|
<button class="btn" style="background-color: #6c757d;" |
|
|
onclick="clearAntigravityFiles()">清空列表</button> |
|
|
</div> |
|
|
|
|
|
<div id="antigravityUploadProgressSection" class="hidden"> |
|
|
<div class="upload-progress"> |
|
|
<h4>上传进度：</h4> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="antigravityProgressFill" style="width: 0%"></div> |
|
|
</div> |
|
|
<p id="antigravityProgressText">0%</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="manageTab" class="tab-content"> |
|
|
<h3>GCLI凭证文件管理</h3> |
|
|
<p>管理所有GCLI认证文件，查看状态和执行操作</p> |
|
|
|
|
|
|
|
|
<div class="status info" style="margin-bottom: 20px;"> |
|
|
<strong>💡 检验功能说明：</strong> |
|
|
<p style="margin: 10px 0;"> |
|
|
点击每个凭证的"检验"按钮可以重新获取Project ID。<br> |
|
|
<strong style="color: #0c5460;">✅ 检验成功可以恢复403错误</strong>，让凭证重新正常工作。<br> |
|
|
建议在遇到403错误时使用此功能。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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" style="background-color: #ff9800;" id="batchVerifyBtn" |
|
|
onclick="batchVerifyProjectIds()" disabled>批量检验</button> |
|
|
<button class="batch-btn batch-email" onclick="refreshAllEmails()">刷新所有邮箱</button> |
|
|
<button class="batch-btn" style="background-color: #e91e63;" |
|
|
onclick="deduplicateByEmail()">凭证一键去重</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="filter-container"> |
|
|
<label for="statusFilter">凭证状态：</label> |
|
|
<select id="statusFilter" class="filter-select" onchange="applyStatusFilter()"> |
|
|
<option value="all">全部凭证</option> |
|
|
<option value="enabled">仅启用</option> |
|
|
<option value="disabled">仅禁用</option> |
|
|
</select> |
|
|
|
|
|
<label for="errorCodeFilter" style="margin-left: 20px;">错误码：</label> |
|
|
<select id="errorCodeFilter" class="filter-select" onchange="applyStatusFilter()"> |
|
|
<option value="all">全部</option> |
|
|
<option value="400">400</option> |
|
|
<option value="403">403</option> |
|
|
<option value="429">429</option> |
|
|
<option value="500">500</option> |
|
|
</select> |
|
|
|
|
|
<label for="cooldownFilter" style="margin-left: 20px;">冷却状态：</label> |
|
|
<select id="cooldownFilter" class="filter-select" onchange="applyStatusFilter()"> |
|
|
<option value="all">全部</option> |
|
|
<option value="in_cooldown">CD中</option> |
|
|
<option value="no_cooldown">未CD</option> |
|
|
</select> |
|
|
|
|
|
<label for="pageSizeSelect" style="margin-left: 20px;">每页显示：</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> |
|
|
<option value="200">200</option> |
|
|
<option value="500">500</option> |
|
|
<option value="1000">1000</option> |
|
|
</select> |
|
|
</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="antigravity-manageTab" class="tab-content"> |
|
|
<h3>Antigravity凭证文件管理</h3> |
|
|
<p>管理所有Antigravity认证文件，查看状态和执行操作</p> |
|
|
|
|
|
|
|
|
<div class="status info" style="margin-bottom: 20px;"> |
|
|
<strong>💡 检验功能说明：</strong> |
|
|
<p style="margin: 10px 0;"> |
|
|
点击每个凭证的"检验"按钮可以重新获取Project ID。<br> |
|
|
<strong style="color: #0c5460;">✅ 检验成功可以恢复403错误</strong>，让凭证重新正常工作。<br> |
|
|
建议在遇到403错误时使用此功能。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="stats-container" id="antigravityStatsContainer"> |
|
|
<div class="stat-item total"> |
|
|
<span class="stat-number" id="antigravityStatTotal">0</span> |
|
|
<span class="stat-label">总计</span> |
|
|
</div> |
|
|
<div class="stat-item normal"> |
|
|
<span class="stat-number" id="antigravityStatNormal">0</span> |
|
|
<span class="stat-label">正常</span> |
|
|
</div> |
|
|
<div class="stat-item disabled"> |
|
|
<span class="stat-number" id="antigravityStatDisabled">0</span> |
|
|
<span class="stat-label">禁用</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="manage-actions"> |
|
|
<button class="refresh-btn" onclick="refreshAntigravityCredsList()">刷新状态</button> |
|
|
<button class="download-all-btn" onclick="downloadAllAntigravityCreds()">打包下载所有文件</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="selectAllAntigravityCheckbox" class="select-all-checkbox" |
|
|
onchange="toggleSelectAllAntigravity()"> |
|
|
<label for="selectAllAntigravityCheckbox">全选</label> |
|
|
</div> |
|
|
<span class="selected-count" id="antigravitySelectedCount">已选择 0 项</span> |
|
|
<button class="batch-btn batch-enable" id="antigravityBatchEnableBtn" |
|
|
onclick="batchAntigravityAction('enable')" disabled>批量启用</button> |
|
|
<button class="batch-btn batch-disable" id="antigravityBatchDisableBtn" |
|
|
onclick="batchAntigravityAction('disable')" disabled>批量禁用</button> |
|
|
<button class="batch-btn batch-delete" id="antigravityBatchDeleteBtn" |
|
|
onclick="batchAntigravityAction('delete')" disabled>批量删除</button> |
|
|
<button class="batch-btn" style="background-color: #ff9800;" id="antigravityBatchVerifyBtn" |
|
|
onclick="batchVerifyAntigravityProjectIds()" disabled>批量检验</button> |
|
|
<button class="batch-btn batch-email" onclick="refreshAllAntigravityEmails()">刷新所有邮箱</button> |
|
|
<button class="batch-btn" style="background-color: #e91e63;" |
|
|
onclick="deduplicateAntigravityByEmail()">凭证一键去重</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="filter-container"> |
|
|
<label for="antigravityStatusFilter">凭证状态：</label> |
|
|
<select id="antigravityStatusFilter" class="filter-select" |
|
|
onchange="applyAntigravityStatusFilter()"> |
|
|
<option value="all">全部凭证</option> |
|
|
<option value="enabled">仅启用</option> |
|
|
<option value="disabled">仅禁用</option> |
|
|
</select> |
|
|
|
|
|
<label for="antigravityErrorCodeFilter" style="margin-left: 20px;">错误码：</label> |
|
|
<select id="antigravityErrorCodeFilter" class="filter-select" |
|
|
onchange="applyAntigravityStatusFilter()"> |
|
|
<option value="all">全部</option> |
|
|
<option value="400">400</option> |
|
|
<option value="403">403</option> |
|
|
<option value="429">429</option> |
|
|
<option value="500">500</option> |
|
|
</select> |
|
|
|
|
|
<label for="antigravityCooldownFilter" style="margin-left: 20px;">冷却状态：</label> |
|
|
<select id="antigravityCooldownFilter" class="filter-select" |
|
|
onchange="applyAntigravityStatusFilter()"> |
|
|
<option value="all">全部</option> |
|
|
<option value="in_cooldown">CD中</option> |
|
|
<option value="no_cooldown">未CD</option> |
|
|
</select> |
|
|
|
|
|
<label for="antigravityPageSizeSelect" style="margin-left: 20px;">每页显示：</label> |
|
|
<select id="antigravityPageSizeSelect" class="page-size-select" |
|
|
onchange="changeAntigravityPageSize()"> |
|
|
<option value="20">20</option> |
|
|
<option value="50">50</option> |
|
|
<option value="100">100</option> |
|
|
<option value="200">200</option> |
|
|
<option value="500">500</option> |
|
|
<option value="1000">1000</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div id="antigravityCredsListSection"> |
|
|
<div class="loading" id="antigravityCredsLoading">正在加载凭证文件...</div> |
|
|
<div id="antigravityCredsList"></div> |
|
|
|
|
|
|
|
|
<div class="pagination-container" id="antigravityPaginationContainer" style="display: none;"> |
|
|
<button class="pagination-btn" id="antigravityPrevPageBtn" |
|
|
onclick="changeAntigravityPage(-1)">上一页</button> |
|
|
<div class="pagination-info" id="antigravityPaginationInfo">第 1 页，共 1 页</div> |
|
|
<button class="pagination-btn" id="antigravityNextPageBtn" |
|
|
onclick="changeAntigravityPage(1)">下一页</button> |
|
|
</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:11451 或 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 class="form-group"> |
|
|
<label for="antigravityApiUrl">Antigravity API Endpoint:</label> |
|
|
<input type="text" id="antigravityApiUrl" class="config-input" |
|
|
placeholder="https://daily-cloudcode-pa.sandbox.googleapis.com" /> |
|
|
<small class="config-note">Google Antigravity 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>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 class="form-group"> |
|
|
<label> |
|
|
<input type="checkbox" id="returnThoughtsToFrontend" class="config-checkbox" /> |
|
|
返回思维链到前端 |
|
|
</label> |
|
|
<small class="config-note">启用后，模型的思维链会在响应中返回；禁用后，思维链会被过滤掉 <span |
|
|
style="color: #28a745;">✓ 支持热更新</span></small> |
|
|
<div class="config-info" |
|
|
style="background-color: #e3f2fd; border: 1px solid #2196f3; color: #0d47a1;"> |
|
|
<strong>💭 说明：</strong>某些模型（如Gemini 2.0 |
|
|
Pro）支持thinking模式，会在生成回答前先输出思考过程。启用后可以看到模型的思考过程；禁用后只显示最终回答，让输出更简洁。 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label> |
|
|
<input type="checkbox" id="antigravityStream2nostream" class="config-checkbox" /> |
|
|
Antigravity流式转非流式 |
|
|
</label> |
|
|
<small class="config-note">启用后，非流式请求将使用流式API并收集为完整响应 <span |
|
|
style="color: #28a745;">✓ 支持热更新</span></small> |
|
|
<div class="config-info" |
|
|
style="background-color: #f3e5f5; border: 1px solid #9c27b0; color: #4a148c;"> |
|
|
<strong>🔄 说明：</strong>针对Antigravity模式的优化选项。启用后，即使客户端请求非流式响应，后端也会使用流式API获取数据并收集完整后再返回。 |
|
|
<br><strong>适用场景：</strong>某些情况下流式API比非流式API更稳定，启用此选项可以提高响应质量。 |
|
|
<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-color: #e7f3ff; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #4285f4; text-align: center;"> |
|
|
<h4 style="margin-top: 0; color: #1976d2;">💬 交流群</h4> |
|
|
<div style="color: #1565c0; line-height: 1.6;"> |
|
|
<p>欢迎加入 QQ 群交流讨论！</p> |
|
|
<p style="font-size: 18px; font-weight: bold; color: #4285f4;">QQ 群号：937681997</p> |
|
|
</div> |
|
|
<div |
|
|
style="display: inline-block; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); margin-top: 10px;"> |
|
|
<img src="docs/qq群.jpg" alt="QQ群二维码" |
|
|
style="width: 200px; height: 200px; border-radius: 8px; display: block;"> |
|
|
<p |
|
|
style="color: #666; margin: 10px 0 0 0; font-size: 13px; font-weight: 600; text-align: center;"> |
|
|
扫码加入QQ群</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> |
|
|
|
|
|
|
|
|
<script src="./front/common.js"></script> |
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |
