Spaces:
Paused
Paused
| <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> | |
| <!-- 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> | |