237899745
0f9948ffc3
Some checks are pending
Docker Image CI / build-and-push-image (push) Waiting to run
449 lines
25 KiB
HTML
449 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>注册控制台 - OpenAI 注册系统</title>
|
||
<link rel="stylesheet" href="/static/css/style.css?v={{ static_version }}">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
||
<style>
|
||
/* 两栏布局 */
|
||
.two-column-layout {
|
||
display: grid;
|
||
grid-template-columns: 30% 70%;
|
||
gap: var(--spacing-lg);
|
||
align-items: start;
|
||
}
|
||
|
||
.left-panel {
|
||
position: sticky;
|
||
top: calc(60px + var(--spacing-lg));
|
||
}
|
||
|
||
.right-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
/* 任务状态行 */
|
||
.task-status-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-sm);
|
||
padding: var(--spacing-md);
|
||
background: var(--surface-hover);
|
||
border-radius: var(--radius);
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.task-status-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.task-status-item .label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.task-status-item .value {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* 已注册账号列表 */
|
||
.recent-accounts-table {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.recent-accounts-table table {
|
||
width: 100%;
|
||
}
|
||
|
||
.recent-accounts-table th,
|
||
.recent-accounts-table td {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.password-cell {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.password-hidden {
|
||
filter: blur(4px);
|
||
cursor: pointer;
|
||
transition: filter 0.2s;
|
||
}
|
||
|
||
.password-hidden:hover {
|
||
filter: blur(0);
|
||
}
|
||
|
||
/* 自定义多选下拉 */
|
||
.multi-select-dropdown {
|
||
position: relative;
|
||
width: 100%;
|
||
font-size: 0.85rem;
|
||
}
|
||
.msd-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 5px 10px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
background: var(--surface);
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.msd-trigger:hover { border-color: var(--primary-color); }
|
||
.msd-arrow { font-size: 0.7rem; transition: transform 0.15s; }
|
||
.msd-dropdown.open .msd-arrow { transform: rotate(180deg); }
|
||
.msd-list {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 4px);
|
||
left: 0; right: 0;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||
z-index: 100;
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
padding: 4px 0;
|
||
}
|
||
.msd-dropdown.open .msd-list { display: block; }
|
||
.msd-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
}
|
||
.msd-item:hover { background: var(--surface-hover); }
|
||
.msd-item input[type=checkbox] { margin: 0; cursor: pointer; }
|
||
.msd-empty { padding: 8px 12px; color: var(--text-muted); font-size: 0.8rem; }
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 1024px) {
|
||
.two-column-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.left-panel {
|
||
position: static;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="nav-brand">
|
||
<h1>OpenAI 注册系统</h1>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="/" class="nav-link active">注册</a>
|
||
<a href="/accounts" class="nav-link">账号管理</a>
|
||
<a href="/email-services" class="nav-link">邮箱服务</a>
|
||
<a href="/payment" class="nav-link">支付</a>
|
||
<a href="/settings" class="nav-link">设置</a>
|
||
<a href="/logout" class="nav-link">退出</a>
|
||
</div>
|
||
<button class="theme-toggle" onclick="theme.toggle()" title="切换主题">
|
||
🌙
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- 主内容区 - 两栏布局 -->
|
||
<main class="main-content">
|
||
<div class="two-column-layout">
|
||
<!-- 左侧面板 - 注册设置 -->
|
||
<div class="left-panel">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📝 注册设置</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="registration-form">
|
||
<div class="form-group">
|
||
<label for="email-service">邮箱服务</label>
|
||
<select id="email-service" name="email_service" required>
|
||
<option value="tempmail:default">Tempmail.lol (临时邮箱)</option>
|
||
<option value="outlook">Outlook</option>
|
||
<option value="moe_mail">MoeMail</option>
|
||
<option value="temp_mail">Temp-Mail 自部署</option>
|
||
<option value="duck_mail">DuckMail</option>
|
||
<option value="imap_mail">IMAP 邮箱</option>
|
||
<option value="outlook_batch:all">Outlook 批量注册</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Outlook 批量注册区域 -->
|
||
<div id="outlook-batch-section" style="display: none;">
|
||
<div class="form-group">
|
||
<label>选择账户</label>
|
||
<div id="outlook-accounts-container" style="max-height: 200px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius); padding: var(--spacing-sm);">
|
||
<div class="loading-placeholder" style="text-align: center; padding: var(--spacing-md); color: var(--text-muted);">
|
||
加载中...
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: var(--spacing-sm); display: flex; gap: var(--spacing-xs); flex-wrap: wrap;">
|
||
<button type="button" class="btn btn-ghost btn-sm" onclick="selectAllOutlookAccounts()">全选</button>
|
||
<button type="button" class="btn btn-ghost btn-sm" onclick="selectUnregisteredOutlook()">只选未注册</button>
|
||
<button type="button" class="btn btn-ghost btn-sm" onclick="deselectAllOutlookAccounts()">取消全选</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-concurrency-mode">并发模式</label>
|
||
<select id="outlook-concurrency-mode" name="outlook_concurrency_mode">
|
||
<option value="pipeline">流水线（Pipeline）</option>
|
||
<option value="parallel">并行（Parallel）</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-concurrency-count">并发数 (1-50)</label>
|
||
<input type="number" id="outlook-concurrency-count" name="outlook_concurrency_count" min="1" max="50" value="3">
|
||
<small id="outlook-concurrency-hint" style="color: var(--text-muted); font-size: 0.75rem;">同时最多运行 N 个任务，每隔 interval 秒启动新任务</small>
|
||
</div>
|
||
<div id="outlook-interval-group">
|
||
<div class="form-group">
|
||
<label for="outlook-interval-min">最小间隔 (秒)</label>
|
||
<input type="number" id="outlook-interval-min" name="outlook_interval_min" min="0" max="300" value="5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-interval-max">最大间隔 (秒)</label>
|
||
<input type="number" id="outlook-interval-max" name="outlook_interval_max" min="1" max="600" value="30">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label style="display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer;">
|
||
<input type="checkbox" id="outlook-skip-registered" checked>
|
||
<span>自动跳过已注册的邮箱</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" id="reg-mode-group">
|
||
<label for="reg-mode">注册模式</label>
|
||
<select id="reg-mode" name="reg_mode">
|
||
<option value="single">单次注册</option>
|
||
<option value="batch">批量注册</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" id="batch-count-group" style="display: none;">
|
||
<label for="batch-count">注册数量 (1-100)</label>
|
||
<input type="number" id="batch-count" name="batch_count" min="1" max="100" value="5">
|
||
</div>
|
||
|
||
<div id="batch-options" style="display: none;">
|
||
<div class="form-group">
|
||
<label for="concurrency-mode">并发模式</label>
|
||
<select id="concurrency-mode" name="concurrency_mode">
|
||
<option value="pipeline">流水线（Pipeline）</option>
|
||
<option value="parallel">并行（Parallel）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="concurrency-count">并发数 (1-50)</label>
|
||
<input type="number" id="concurrency-count" name="concurrency_count" min="1" max="50" value="3">
|
||
<small id="concurrency-hint" style="color: var(--text-muted); font-size: 0.75rem;">同时最多运行 N 个任务，每隔 interval 秒启动新任务</small>
|
||
</div>
|
||
|
||
<div id="interval-group">
|
||
<div class="form-group">
|
||
<label for="interval-min">最小间隔 (秒)</label>
|
||
<input type="number" id="interval-min" name="interval_min" min="0" max="300" value="5">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="interval-max">最大间隔 (秒)</label>
|
||
<input type="number" id="interval-max" name="interval_max" min="1" max="600" value="30">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" id="auto-upload-group">
|
||
<label style="font-weight: 500; margin-bottom: var(--spacing-xs); display: block;">注册后自动操作</label>
|
||
|
||
<!-- CPA -->
|
||
<label style="display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer;">
|
||
<input type="checkbox" id="auto-upload-cpa">
|
||
<span>上传到 CPA</span>
|
||
</label>
|
||
<div id="cpa-service-select-group" style="display:none; margin-top: 6px; margin-bottom: 8px; padding-left: 4px;">
|
||
<div class="multi-select-dropdown" id="cpa-service-select"></div>
|
||
</div>
|
||
|
||
<!-- Sub2API -->
|
||
<label style="display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; margin-top: 6px;">
|
||
<input type="checkbox" id="auto-upload-sub2api">
|
||
<span>上传到 Sub2API</span>
|
||
</label>
|
||
<div id="sub2api-service-select-group" style="display:none; margin-top: 6px; margin-bottom: 8px; padding-left: 4px;">
|
||
<div class="multi-select-dropdown" id="sub2api-service-select"></div>
|
||
</div>
|
||
|
||
<!-- Sub2API 高级配置 -->
|
||
<div id="sub2api-advanced-group" style="display:none; margin-top: 8px; padding-left: 4px; border-left: 2px solid var(--border-color, #e0e0e0); padding-bottom: 8px;">
|
||
<!-- 分组选择 -->
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 0.85em; color: var(--text-secondary, #666); display: block; margin-bottom: 4px;">上传分组</label>
|
||
<select id="sub2api-group-select" multiple style="width: 100%; min-height: 60px; padding: 4px; border: 1px solid var(--border-color, #ddd); border-radius: 4px; font-size: 0.85em;">
|
||
<option value="" disabled>加载中...</option>
|
||
</select>
|
||
<p style="font-size: 0.75em; color: var(--text-secondary, #999); margin: 2px 0 0;">按住 Ctrl 多选，不选则不绑定分组</p>
|
||
</div>
|
||
|
||
<!-- 代理节点选择 -->
|
||
<div style="margin-bottom: 8px;">
|
||
<label style="font-size: 0.85em; color: var(--text-secondary, #666); display: block; margin-bottom: 4px;">代理节点</label>
|
||
<select id="sub2api-proxy-select" style="width: 100%; padding: 4px; border: 1px solid var(--border-color, #ddd); border-radius: 4px; font-size: 0.85em;">
|
||
<option value="">不指定（使用默认）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 模型限制 -->
|
||
<div>
|
||
<label style="font-size: 0.85em; color: var(--text-secondary, #666); display: block; margin-bottom: 4px;">模型限制</label>
|
||
<div id="sub2api-model-checkboxes" style="display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px;"></div>
|
||
<div style="display: flex; gap: 4px; align-items: center;">
|
||
<input type="text" id="sub2api-custom-models" placeholder="输入自定义模型名" style="flex: 1; padding: 4px 6px; border: 1px solid var(--border-color, #ddd); border-radius: 4px; font-size: 0.82em;">
|
||
<button type="button" id="sub2api-add-model-btn" style="padding: 4px 12px; border: 1px solid var(--primary-color, #4a90d9); background: var(--primary-color, #4a90d9); color: #fff; border-radius: 4px; font-size: 0.82em; cursor: pointer; white-space: nowrap;">添加</button>
|
||
</div>
|
||
<div id="sub2api-custom-model-tags" style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;"></div>
|
||
<p style="font-size: 0.75em; color: var(--text-secondary, #999); margin: 2px 0 0;">勾选预置模型或输入自定义模型名点击添加，上传后账号仅允许使用已选模型</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Team Manager -->
|
||
<label style="display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; margin-top: 6px;">
|
||
<input type="checkbox" id="auto-upload-tm">
|
||
<span>上传到 Team Manager</span>
|
||
</label>
|
||
<div id="tm-service-select-group" style="display:none; margin-top: 6px; padding-left: 4px;">
|
||
<div class="multi-select-dropdown" id="tm-service-select"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions" style="flex-direction: column;">
|
||
<button type="submit" class="btn btn-primary btn-lg" id="start-btn" style="width: 100%;">
|
||
🚀 开始注册
|
||
</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-btn" disabled style="width: 100%;">
|
||
取消任务
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧面板 -->
|
||
<div class="right-panel">
|
||
<!-- 监控台 -->
|
||
<div class="card" id="console-card">
|
||
<div class="card-header">
|
||
<h3>💻 监控台</h3>
|
||
<div style="display: flex; gap: var(--spacing-sm); align-items: center;">
|
||
<span id="task-status-badge" class="status-badge pending" style="display: none;">等待中</span>
|
||
<button class="btn btn-ghost btn-sm" id="clear-log-btn">清空</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<!-- 任务状态行 -->
|
||
<div class="task-status-row" id="task-status-row" style="display: none;">
|
||
<div class="task-status-item">
|
||
<div class="label">任务 ID</div>
|
||
<div class="value" id="task-id">-</div>
|
||
</div>
|
||
<div class="task-status-item">
|
||
<div class="label">邮箱</div>
|
||
<div class="value" id="task-email">-</div>
|
||
</div>
|
||
<div class="task-status-item">
|
||
<div class="label">邮箱服务</div>
|
||
<div class="value" id="task-service">-</div>
|
||
</div>
|
||
<div class="task-status-item">
|
||
<div class="label">状态</div>
|
||
<div class="value" id="task-status">-</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量进度 -->
|
||
<div id="batch-progress-section" style="display: none; padding: var(--spacing-md); border-bottom: 1px solid var(--border-light);">
|
||
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-sm);">
|
||
<span id="batch-progress-text">0/0</span>
|
||
<span id="batch-progress-percent">0%</span>
|
||
</div>
|
||
<div class="progress-bar-container">
|
||
<div id="progress-bar" class="progress-bar" style="width: 0%"></div>
|
||
</div>
|
||
<div class="batch-stats" style="margin-top: var(--spacing-sm);">
|
||
<span>✅ <strong id="batch-success">0</strong></span>
|
||
<span>❌ <strong id="batch-failed">0</strong></span>
|
||
<span>⏳ <strong id="batch-remaining">0</strong></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 控制台日志 -->
|
||
<div id="console-log" class="console-log">
|
||
<div class="log-line info">[系统] 准备就绪，等待开始注册...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已注册账号列表 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📋 已注册账号</h3>
|
||
<div style="display: flex; gap: var(--spacing-sm);">
|
||
<button class="btn btn-ghost btn-sm" id="refresh-accounts-btn">🔄 刷新</button>
|
||
<a href="/accounts" class="btn btn-secondary btn-sm">查看全部</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<div class="recent-accounts-table">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 50px;">ID</th>
|
||
<th>邮箱</th>
|
||
<th style="width: 120px;">密码</th>
|
||
<th style="width: 80px;">状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="recent-accounts-table">
|
||
<tr>
|
||
<td colspan="5">
|
||
<div class="empty-state" style="padding: var(--spacing-md);">
|
||
<div class="empty-state-icon">📭</div>
|
||
<div class="empty-state-title">暂无已注册账号</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="/static/js/utils.js?v={{ static_version }}"></script>
|
||
<script src="/static/js/app.js?v={{ static_version }}"></script>
|
||
</body>
|
||
</html>
|