237899745
0f9948ffc3
Some checks are pending
Docker Image CI / build-and-push-image (push) Waiting to run
523 lines
30 KiB
HTML
523 lines
30 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>">
|
||
</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">注册</a>
|
||
<a href="/accounts" class="nav-link">账号管理</a>
|
||
<a href="/email-services" class="nav-link active">邮箱服务</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="page-header">
|
||
<h2>邮箱服务管理</h2>
|
||
<p class="subtitle">配置和管理注册所需的邮箱服务</p>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card info">
|
||
<div class="stat-value" id="outlook-count">0</div>
|
||
<div class="stat-label">Outlook 账户</div>
|
||
</div>
|
||
<div class="stat-card success">
|
||
<div class="stat-value" id="custom-count">0</div>
|
||
<div class="stat-label">自定义邮箱</div>
|
||
</div>
|
||
<div class="stat-card warning">
|
||
<div class="stat-value" id="tempmail-status">可用</div>
|
||
<div class="stat-label">临时邮箱</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="total-enabled">0</div>
|
||
<div class="stat-label">已启用服务</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Outlook 管理 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📥 Outlook 批量导入</h3>
|
||
<button class="btn btn-ghost btn-sm" id="toggle-outlook-import">展开</button>
|
||
</div>
|
||
<div class="card-body" id="outlook-import-body" style="display: none;">
|
||
<div class="import-info">
|
||
<p><strong>支持格式：</strong></p>
|
||
<ul>
|
||
<li><code>邮箱----密码</code> （密码认证）</li>
|
||
<li><code>邮箱----密码----client_id----refresh_token</code> （XOAUTH2 认证，推荐）</li>
|
||
</ul>
|
||
<p>每行一个账户，使用四个连字符（----）分隔字段。以 # 开头的行将被忽略。</p>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-import-data">批量导入数据</label>
|
||
<textarea id="outlook-import-data" rows="8" placeholder="example@outlook.com----password123 test@outlook.com----password456----client_id----refresh_token"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="outlook-import-enabled" checked>
|
||
导入后启用
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-import-priority">优先级</label>
|
||
<input type="number" id="outlook-import-priority" value="0" min="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-primary" id="outlook-import-btn">📥 开始导入</button>
|
||
<button type="button" class="btn btn-secondary" id="clear-import-btn">清空</button>
|
||
</div>
|
||
<div id="import-result" style="display: none; margin-top: var(--spacing-md);"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自定义邮箱管理（含 MoeMail / TempMail / DuckMail） -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>🔗 自定义邮箱服务</h3>
|
||
<button class="btn btn-primary btn-sm" id="add-custom-btn">➕ 添加服务</button>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40px;"><input type="checkbox" id="select-all-custom"></th>
|
||
<th>名称</th>
|
||
<th style="width: 90px;">类型</th>
|
||
<th style="width: 200px;">地址</th>
|
||
<th style="width: 100px;">状态</th>
|
||
<th style="width: 80px;">优先级</th>
|
||
<th style="width: 160px;">最后使用</th>
|
||
<th style="width: 180px;">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="custom-services-table">
|
||
<tr>
|
||
<td colspan="8">
|
||
<div class="empty-state">
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text" style="width: 80%;"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Outlook 账户列表 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📧 Outlook 账户列表</h3>
|
||
<button class="btn btn-danger btn-sm" id="batch-delete-outlook-btn" disabled>🗑️ 批量删除</button>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40px;"><input type="checkbox" id="select-all-outlook"></th>
|
||
<th>邮箱</th>
|
||
<th style="width: 100px;">认证方式</th>
|
||
<th style="width: 100px;">状态</th>
|
||
<th style="width: 80px;">优先级</th>
|
||
<th style="width: 160px;">最后使用</th>
|
||
<th style="width: 140px;">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="outlook-accounts-table">
|
||
<tr>
|
||
<td colspan="7">
|
||
<div class="empty-state">
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text" style="width: 80%;"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 临时邮箱配置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>🌐 临时邮箱配置</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="tempmail-form">
|
||
<div class="form-group">
|
||
<label for="tempmail-api">Tempmail.lol API 地址</label>
|
||
<input type="text" id="tempmail-api" name="api_url" placeholder="https://tempmail.lol/api">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="tempmail-enabled" checked>
|
||
启用临时邮箱
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">💾 保存设置</button>
|
||
<button type="button" class="btn btn-secondary" id="test-tempmail-btn">🔌 测试连接</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 添加自定义邮箱服务模态框（含类型选择） -->
|
||
<div class="modal" id="add-custom-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>➕ 添加自定义邮箱服务</h3>
|
||
<button class="modal-close" id="close-custom-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="add-custom-form">
|
||
<div class="form-group">
|
||
<label for="custom-name">服务名称</label>
|
||
<input type="text" id="custom-name" name="name" required placeholder="例如：我的域名邮箱">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-sub-type">服务类型</label>
|
||
<select id="custom-sub-type" name="sub_type">
|
||
<option value="moemail">MoeMail（自定义域名 API）</option>
|
||
<option value="tempmail">TempMail（自部署 Cloudflare Worker）</option>
|
||
<option value="duckmail">DuckMail（DuckMail API）</option>
|
||
<option value="freemail">Freemail（自部署 Cloudflare Worker）</option>
|
||
<option value="imap">标准 IMAP（Gmail/QQ/163等）</option>
|
||
</select>
|
||
</div>
|
||
<!-- MoeMail 字段 -->
|
||
<div id="add-moemail-fields">
|
||
<div class="form-group">
|
||
<label for="custom-api-url">API 地址</label>
|
||
<input type="text" id="custom-api-url" name="api_url" placeholder="https://api.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-api-key">API 密钥 (可选)</label>
|
||
<input type="text" id="custom-api-key" name="api_key" placeholder="API Key">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-domain">邮箱域名</label>
|
||
<input type="text" id="custom-domain" name="domain" placeholder="example.com">
|
||
</div>
|
||
</div>
|
||
<!-- TempMail 字段 -->
|
||
<div id="add-tempmail-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="custom-tm-base-url">Worker 地址</label>
|
||
<input type="text" id="custom-tm-base-url" name="tm_base_url" placeholder="https://mail.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-tm-admin-password">Admin 密码</label>
|
||
<input type="password" id="custom-tm-admin-password" name="tm_admin_password" placeholder="x-admin-auth 密码">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-tm-domain">邮箱域名</label>
|
||
<input type="text" id="custom-tm-domain" name="tm_domain" placeholder="example.com">
|
||
</div>
|
||
</div>
|
||
<!-- DuckMail 字段 -->
|
||
<div id="add-duckmail-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="custom-dm-base-url">API 地址</label>
|
||
<input type="text" id="custom-dm-base-url" name="dm_base_url" placeholder="https://api.duckmail.sbs">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-dm-api-key">API Key（可选）</label>
|
||
<input type="text" id="custom-dm-api-key" name="dm_api_key" placeholder="dk_xxx">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-dm-domain">默认域名</label>
|
||
<input type="text" id="custom-dm-domain" name="dm_domain" placeholder="example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-dm-password-length">随机密码长度</label>
|
||
<input type="number" id="custom-dm-password-length" name="dm_password_length" min="6" max="64" value="12">
|
||
</div>
|
||
</div>
|
||
<!-- Freemail 字段 -->
|
||
<div id="add-freemail-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="custom-fm-base-url">Worker 地址</label>
|
||
<input type="text" id="custom-fm-base-url" name="fm_base_url" placeholder="https://freemail.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-fm-admin-token">Admin Token</label>
|
||
<input type="password" id="custom-fm-admin-token" name="fm_admin_token" placeholder="JWT_TOKEN 值">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-fm-domain">邮箱域名 (可选)</label>
|
||
<input type="text" id="custom-fm-domain" name="fm_domain" placeholder="example.com">
|
||
</div>
|
||
</div>
|
||
<!-- IMAP 字段 -->
|
||
<div id="add-imap-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="custom-imap-host">IMAP 服务器</label>
|
||
<input type="text" id="custom-imap-host" name="imap_host" placeholder="imap.gmail.com / imap.qq.com / imap.163.com">
|
||
<small style="color: var(--text-muted);">Gmail: imap.gmail.com | QQ: imap.qq.com | 163: imap.163.com</small>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="custom-imap-port">端口</label>
|
||
<input type="number" id="custom-imap-port" name="imap_port" value="993" min="1" max="65535">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-imap-use-ssl">加密方式</label>
|
||
<select id="custom-imap-use-ssl" name="imap_use_ssl">
|
||
<option value="true">SSL（端口 993）</option>
|
||
<option value="false">STARTTLS（端口 143）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-imap-email">邮箱地址</label>
|
||
<input type="email" id="custom-imap-email" name="imap_email" placeholder="your@gmail.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-imap-password">密码 / 授权码</label>
|
||
<input type="password" id="custom-imap-password" name="imap_password" placeholder="Gmail 需使用 App Password，QQ/163 需使用授权码">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="custom-priority">优先级</label>
|
||
<input type="number" id="custom-priority" name="priority" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="custom-enabled" name="enabled" checked>
|
||
启用服务
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">添加</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-add-custom">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 编辑自定义邮箱服务模态框（含类型选择） -->
|
||
<div class="modal" id="edit-custom-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>✏️ 编辑自定义邮箱服务</h3>
|
||
<button class="modal-close" id="close-edit-custom-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="edit-custom-form">
|
||
<input type="hidden" id="edit-custom-id" name="id">
|
||
<input type="hidden" id="edit-custom-sub-type-hidden" name="sub_type">
|
||
<div class="form-group">
|
||
<label for="edit-custom-name">服务名称</label>
|
||
<input type="text" id="edit-custom-name" name="name" required placeholder="例如：我的域名邮箱">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>服务类型</label>
|
||
<div id="edit-custom-type-badge" style="padding: 6px 0; color: var(--text-muted); font-size: 0.875rem;"></div>
|
||
</div>
|
||
<!-- MoeMail 字段 -->
|
||
<div id="edit-moemail-fields">
|
||
<div class="form-group">
|
||
<label for="edit-custom-api-url">API 地址</label>
|
||
<input type="text" id="edit-custom-api-url" name="api_url" placeholder="https://api.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-custom-api-key">API 密钥</label>
|
||
<input type="text" id="edit-custom-api-key" name="api_key" placeholder="API Key">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-custom-domain">邮箱域名</label>
|
||
<input type="text" id="edit-custom-domain" name="domain" placeholder="example.com">
|
||
</div>
|
||
</div>
|
||
<!-- TempMail 字段 -->
|
||
<div id="edit-tempmail-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="edit-tm-base-url">Worker 地址</label>
|
||
<input type="text" id="edit-tm-base-url" name="tm_base_url" placeholder="https://mail.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-tm-admin-password">Admin 密码</label>
|
||
<input type="password" id="edit-tm-admin-password" name="tm_admin_password" placeholder="留空则不修改">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-tm-domain">邮箱域名</label>
|
||
<input type="text" id="edit-tm-domain" name="tm_domain" placeholder="example.com">
|
||
</div>
|
||
</div>
|
||
<!-- DuckMail 字段 -->
|
||
<div id="edit-duckmail-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="edit-dm-base-url">API 地址</label>
|
||
<input type="text" id="edit-dm-base-url" name="dm_base_url" placeholder="https://api.duckmail.sbs">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-dm-api-key">API Key</label>
|
||
<input type="text" id="edit-dm-api-key" name="dm_api_key" placeholder="留空则不修改">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-dm-domain">默认域名</label>
|
||
<input type="text" id="edit-dm-domain" name="dm_domain" placeholder="example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-dm-password-length">随机密码长度</label>
|
||
<input type="number" id="edit-dm-password-length" name="dm_password_length" min="6" max="64" value="12">
|
||
</div>
|
||
</div>
|
||
<!-- Freemail 字段 -->
|
||
<div id="edit-freemail-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="edit-fm-base-url">Worker 地址</label>
|
||
<input type="text" id="edit-fm-base-url" name="fm_base_url" placeholder="https://freemail.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-fm-admin-token">Admin Token</label>
|
||
<input type="password" id="edit-fm-admin-token" name="fm_admin_token" placeholder="留空则不修改">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-fm-domain">邮箱域名 (可选)</label>
|
||
<input type="text" id="edit-fm-domain" name="fm_domain" placeholder="example.com">
|
||
</div>
|
||
</div>
|
||
<!-- IMAP 字段 -->
|
||
<div id="edit-imap-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label for="edit-imap-host">IMAP 服务器</label>
|
||
<input type="text" id="edit-imap-host" name="imap_host" placeholder="imap.gmail.com">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-imap-port">端口</label>
|
||
<input type="number" id="edit-imap-port" name="imap_port" value="993" min="1" max="65535">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-imap-use-ssl">加密方式</label>
|
||
<select id="edit-imap-use-ssl" name="imap_use_ssl">
|
||
<option value="true">SSL（端口 993）</option>
|
||
<option value="false">STARTTLS（端口 143）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-imap-email">邮箱地址</label>
|
||
<input type="email" id="edit-imap-email" name="imap_email" placeholder="your@gmail.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-imap-password">密码 / 授权码</label>
|
||
<input type="password" id="edit-imap-password" name="imap_password" placeholder="留空则保持原值不变">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-custom-priority">优先级</label>
|
||
<input type="number" id="edit-custom-priority" name="priority" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="edit-custom-enabled" name="enabled">
|
||
启用服务
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-edit-custom">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑 Outlook 账户模态框 -->
|
||
<div class="modal" id="edit-outlook-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>✏️ 编辑 Outlook 账户</h3>
|
||
<button class="modal-close" id="close-edit-outlook-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="edit-outlook-form">
|
||
<input type="hidden" id="edit-outlook-id" name="id">
|
||
<div class="form-group">
|
||
<label for="edit-outlook-email">邮箱地址</label>
|
||
<input type="text" id="edit-outlook-email" name="email" required placeholder="example@outlook.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-outlook-password">密码</label>
|
||
<input type="password" id="edit-outlook-password" name="password" placeholder="留空则保持原值不变">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-outlook-client-id">OAuth Client ID (可选)</label>
|
||
<input type="text" id="edit-outlook-client-id" name="client_id" placeholder="用于 XOAUTH2 认证">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-outlook-refresh-token">OAuth Refresh Token (可选)</label>
|
||
<input type="text" id="edit-outlook-refresh-token" name="refresh_token" placeholder="留空则保持原值不变">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-outlook-priority">优先级</label>
|
||
<input type="number" id="edit-outlook-priority" name="priority" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="edit-outlook-enabled" name="enabled">
|
||
启用账户
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-edit-outlook">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script src="/static/js/utils.js?v={{ static_version }}"></script>
|
||
<script src="/static/js/email_services.js?v={{ static_version }}"></script>
|
||
</body>
|
||
</html>
|