huangzhenpc
a5fd90cb1e
Detect refund/suspension status changes and generate notifications stored in Redis. Bell icon in navbar shows unread count badge, click to expand dropdown with dismiss per-item or read-all. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
435 lines
20 KiB
HTML
435 lines
20 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>Outlook 邮件管理器</title>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.css" rel="stylesheet">
|
||
<link href="style.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ====================================================================
|
||
登录遮罩
|
||
==================================================================== -->
|
||
<div id="loginOverlay" class="login-overlay">
|
||
<div class="login-card">
|
||
<div class="login-icon"><i class="bi bi-shield-lock"></i></div>
|
||
<h3 class="login-title">邮箱助手</h3>
|
||
<p class="login-subtitle">请输入访问密码</p>
|
||
<div class="login-input-wrap">
|
||
<i class="bi bi-key"></i>
|
||
<input type="password" id="loginPassword" placeholder="输入密码..." autocomplete="off">
|
||
</div>
|
||
<button class="btn btn-primary login-btn" id="loginBtn">进入系统</button>
|
||
<p class="login-error" id="loginError"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================================================================
|
||
视图1：账号管理（默认主页）
|
||
==================================================================== -->
|
||
<div id="accountView" class="view-container">
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="navbar-container">
|
||
<a href="#" class="logo">
|
||
<div class="logo-icon"><i class="bi bi-envelope-fill"></i></div>
|
||
<span class="logo-text">邮箱助手</span>
|
||
</a>
|
||
<div class="nav-actions">
|
||
<div class="search-box">
|
||
<i class="bi bi-search"></i>
|
||
<input type="text" id="accountSearch" placeholder="搜索邮箱..." autocomplete="off">
|
||
</div>
|
||
<button class="btn btn-primary" id="importBtn">
|
||
<i class="bi bi-clipboard-plus"></i>
|
||
<span>粘贴导入</span>
|
||
</button>
|
||
<button class="btn btn-primary" id="exportBtn">
|
||
<i class="bi bi-download"></i>
|
||
<span>导出</span>
|
||
</button>
|
||
<button class="btn btn-primary" id="claudePaymentBtn">
|
||
<i class="bi bi-credit-card"></i>
|
||
<span>Claude检测</span>
|
||
</button>
|
||
<select class="filter-select" id="paymentFilter" title="支付状态筛选">
|
||
<option value="">全部状态</option>
|
||
<option value="paid">已支付</option>
|
||
<option value="unpaid">未支付</option>
|
||
<option value="refunded">已退款</option>
|
||
<option value="refund_received">退款已到账</option>
|
||
<option value="refund_not_received">退款未到账</option>
|
||
<option value="suspended">已封号</option>
|
||
<option value="unchecked">未检测</option>
|
||
</select>
|
||
<div class="notification-wrapper">
|
||
<button class="btn btn-icon" id="notificationBtn" title="通知">
|
||
<i class="bi bi-bell"></i>
|
||
<span class="notification-badge" id="notifBadge" style="display:none">0</span>
|
||
</button>
|
||
<div class="notification-dropdown" id="notifDropdown" style="display:none">
|
||
<div class="notif-header">
|
||
<span>通知</span>
|
||
<button class="notif-read-all-btn" id="notifReadAll">全部已读</button>
|
||
</div>
|
||
<div class="notif-list" id="notifList"></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-icon" id="refreshAccountsBtn" title="刷新">
|
||
<i class="bi bi-arrow-clockwise"></i>
|
||
</button>
|
||
<a href="/admin" class="btn btn-icon" title="管理后台">
|
||
<i class="bi bi-gear"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-container">
|
||
<!-- 表格容器 -->
|
||
<div class="table-container">
|
||
<div class="table-header">
|
||
<h2 class="table-title">
|
||
<i class="bi bi-people"></i>
|
||
邮箱账号列表
|
||
</h2>
|
||
</div>
|
||
<div class="table-scroll">
|
||
<table class="data-table" id="accountTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-num">#</th>
|
||
<th>邮箱</th>
|
||
<th>密码</th>
|
||
<th>凭证</th>
|
||
<th>支付状态</th>
|
||
<th>退款状态</th>
|
||
<th>支付时间</th>
|
||
<th>退款时间</th>
|
||
<th>封号时间</th>
|
||
<th>到账时间</th>
|
||
<th>备注/卡号</th>
|
||
<th>代理</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="accountTableBody">
|
||
<tr>
|
||
<td colspan="13">
|
||
<div class="no-data">
|
||
<i class="bi bi-inbox"></i>
|
||
<div>暂无邮箱数据，点击"粘贴导入"添加</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination-container" id="paginationContainer">
|
||
<div class="pagination-info">
|
||
<span id="pagerInfo">共 0 条</span>
|
||
<span class="divider">|</span>
|
||
<span id="pagerCurrent">1/1 页</span>
|
||
</div>
|
||
<div class="pagination-controls" id="pagerControls">
|
||
<button class="pagination-btn" id="prevPageBtn" disabled title="上一页">
|
||
<i class="bi bi-chevron-left"></i>
|
||
</button>
|
||
<button class="pagination-btn active">1</button>
|
||
<button class="pagination-btn" id="nextPageBtn" disabled title="下一页">
|
||
<i class="bi bi-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================================================================
|
||
视图2：邮件查看器
|
||
==================================================================== -->
|
||
<div id="emailView" class="view-container" style="display:none;">
|
||
<!-- 顶部导航 -->
|
||
<nav class="navbar">
|
||
<div class="navbar-container">
|
||
<button class="btn btn-primary" id="backToAccounts">
|
||
<i class="bi bi-arrow-left"></i>
|
||
<span>返回邮箱管理</span>
|
||
</button>
|
||
<div class="current-email-info">
|
||
<div class="info-icon"><i class="bi bi-envelope"></i></div>
|
||
<div class="info-text">
|
||
<div class="info-label">当前查看</div>
|
||
<div class="info-value">
|
||
<span id="topbarEmail"></span>
|
||
<span class="folder-badge" id="topbarFolder"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 移动端邮件列表按钮 -->
|
||
<button class="btn btn-icon d-md-none" id="mobileMailToggle" title="邮件列表">
|
||
<i class="bi bi-list-ul"></i>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 双栏主体 -->
|
||
<div class="email-main">
|
||
<!-- 左侧邮件列表 -->
|
||
<div class="email-list-panel" id="emailListPanel">
|
||
<div class="email-list-header">
|
||
<span id="emailListTitle">邮件列表</span>
|
||
<span class="email-count-badge" id="emailCountBadge" style="display:none;">0</span>
|
||
<button class="btn-icon email-refresh-btn" id="refreshEmailsBtn" title="刷新邮件">
|
||
<i class="bi bi-arrow-clockwise"></i>
|
||
</button>
|
||
</div>
|
||
<div class="email-list-content" id="emailListContent">
|
||
<div class="empty-state">
|
||
<i class="bi bi-envelope"></i>
|
||
<p>加载中...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧邮件详情 -->
|
||
<div class="email-detail-panel" id="emailDetailPanel">
|
||
<div class="detail-content" id="detailContent">
|
||
<div class="empty-detail">
|
||
<i class="bi bi-envelope-open"></i>
|
||
<h6>选择一封邮件查看详情</h6>
|
||
<p>从左侧列表中选择邮件</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端遮罩 -->
|
||
<div class="mobile-overlay" id="mobileOverlay"></div>
|
||
</div>
|
||
|
||
<!-- ====================================================================
|
||
导入模态框
|
||
==================================================================== -->
|
||
<div class="paste-modal" id="importModal">
|
||
<div class="paste-modal-content">
|
||
<div class="paste-modal-header">
|
||
<div class="paste-modal-icon"><i class="bi bi-clipboard-plus"></i></div>
|
||
<div>
|
||
<h3 class="paste-modal-title">粘贴导入邮箱</h3>
|
||
<p class="paste-modal-subtitle">将邮箱数据粘贴到下方输入框中</p>
|
||
</div>
|
||
</div>
|
||
<textarea class="paste-textarea" id="importText"
|
||
placeholder="每行一个账户 格式: 邮箱----密码----客户ID----令牌 简化: 邮箱----令牌"></textarea>
|
||
<div class="paste-modal-hint">
|
||
<i class="bi bi-info-circle"></i>
|
||
<span>使用 <code>----</code> 分隔各字段，每行一个邮箱</span>
|
||
</div>
|
||
<div class="merge-mode-section">
|
||
<label class="input-label">合并模式</label>
|
||
<div class="merge-options">
|
||
<label class="merge-option">
|
||
<input type="radio" name="mergeMode" value="update" checked>
|
||
<span>更新已有</span>
|
||
</label>
|
||
<label class="merge-option">
|
||
<input type="radio" name="mergeMode" value="skip">
|
||
<span>跳过重复</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="paste-modal-buttons">
|
||
<button class="btn btn-cancel" id="cancelImportBtn">取消</button>
|
||
<button class="btn btn-primary" id="doImportBtn">
|
||
<i class="bi bi-check2"></i>
|
||
<span>确定导入</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备注/卡号编辑弹窗 -->
|
||
<div class="paste-modal" id="noteModal">
|
||
<div class="paste-modal-content" style="max-width:420px;">
|
||
<div class="paste-modal-header">
|
||
<div class="paste-modal-icon"><i class="bi bi-pencil-square"></i></div>
|
||
<div>
|
||
<h3 class="paste-modal-title">编辑备注</h3>
|
||
<p class="paste-modal-subtitle" id="noteModalEmail"></p>
|
||
</div>
|
||
</div>
|
||
<div class="note-fields">
|
||
<div class="note-field-group">
|
||
<label class="input-label">标题</label>
|
||
<input type="text" class="proxy-input" id="noteTitle" placeholder="如：淘宝、开台" autocomplete="off">
|
||
</div>
|
||
<div class="note-field-group">
|
||
<label class="input-label">卡号</label>
|
||
<input type="text" class="proxy-input" id="noteCardNumber" placeholder="银行卡号" autocomplete="off">
|
||
</div>
|
||
<div class="note-field-group">
|
||
<label class="input-label">备注</label>
|
||
<textarea class="proxy-input" id="noteRemark" rows="3" placeholder="其他备注信息" style="resize:vertical;min-height:60px;"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="paste-modal-buttons">
|
||
<button class="btn btn-cancel" id="cancelNoteBtn">取消</button>
|
||
<button class="btn btn-primary" id="saveNoteBtn">
|
||
<i class="bi bi-check2"></i>
|
||
<span>保存</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 代理编辑弹窗 -->
|
||
<div class="paste-modal" id="proxyModal">
|
||
<div class="paste-modal-content" style="max-width:480px;">
|
||
<div class="paste-modal-header">
|
||
<div class="paste-modal-icon"><i class="bi bi-globe"></i></div>
|
||
<div>
|
||
<h3 class="paste-modal-title">编辑代理</h3>
|
||
<p class="paste-modal-subtitle" id="proxyModalEmail"></p>
|
||
</div>
|
||
</div>
|
||
<div class="proxy-format-section">
|
||
<label class="input-label">协议类型</label>
|
||
<div class="proxy-format-options">
|
||
<label class="merge-option"><input type="radio" name="proxyProtocol" value="http" checked><span>HTTP</span></label>
|
||
<label class="merge-option"><input type="radio" name="proxyProtocol" value="https"><span>HTTPS</span></label>
|
||
<label class="merge-option"><input type="radio" name="proxyProtocol" value="socks5"><span>SOCKS5</span></label>
|
||
</div>
|
||
</div>
|
||
<div class="proxy-fields">
|
||
<div class="proxy-row">
|
||
<div class="proxy-field">
|
||
<label class="input-label">IP地址</label>
|
||
<input type="text" class="proxy-input" id="proxyHost" placeholder="127.0.0.1" autocomplete="off">
|
||
</div>
|
||
<div class="proxy-field proxy-field-sm">
|
||
<label class="input-label">端口</label>
|
||
<input type="text" class="proxy-input" id="proxyPort" placeholder="1080" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="proxy-row">
|
||
<div class="proxy-field">
|
||
<label class="input-label">账号 <span style="color:#94a3b8;font-weight:400">(可选)</span></label>
|
||
<input type="text" class="proxy-input" id="proxyUser" placeholder="username" autocomplete="off">
|
||
</div>
|
||
<div class="proxy-field">
|
||
<label class="input-label">密码 <span style="color:#94a3b8;font-weight:400">(可选)</span></label>
|
||
<input type="text" class="proxy-input" id="proxyPass" placeholder="password" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="proxy-extra-section">
|
||
<div class="proxy-row">
|
||
<div class="proxy-field">
|
||
<label class="input-label">IP有效期</label>
|
||
<div class="proxy-expire-options">
|
||
<label class="merge-option"><input type="radio" name="proxyExpire" value="10"><span>10天</span></label>
|
||
<label class="merge-option"><input type="radio" name="proxyExpire" value="30" checked><span>30天</span></label>
|
||
<label class="merge-option"><input type="radio" name="proxyExpire" value="custom"><span>自定义</span></label>
|
||
<input type="number" class="proxy-input proxy-input-mini" id="proxyExpireCustom" placeholder="天" min="1" style="display:none;">
|
||
</div>
|
||
</div>
|
||
<div class="proxy-field">
|
||
<label class="input-label">类型</label>
|
||
<div class="proxy-share-options">
|
||
<label class="merge-option"><input type="radio" name="proxyShare" value="exclusive" checked><span>独享</span></label>
|
||
<label class="merge-option"><input type="radio" name="proxyShare" value="shared"><span>共享</span></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="proxy-row">
|
||
<div class="proxy-field">
|
||
<label class="input-label">购买日期</label>
|
||
<input type="date" class="proxy-input" id="proxyPurchaseDate">
|
||
</div>
|
||
<div class="proxy-field">
|
||
<label class="input-label">到期日期 <span style="color:#94a3b8;font-weight:400">(自动计算)</span></label>
|
||
<input type="text" class="proxy-input" id="proxyExpireDate" readonly style="background:#f8fafc;color:#64748b;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="paste-modal-hint" style="margin-top:10px;">
|
||
<i class="bi bi-info-circle"></i>
|
||
<span>也可直接粘贴：<code>ip:端口:账号:密码</code> 或 <code>socks5://user:pass@host:port</code></span>
|
||
</div>
|
||
<div class="proxy-raw-section">
|
||
<label class="input-label">快速粘贴</label>
|
||
<input type="text" class="proxy-input" id="proxyRaw" placeholder="粘贴完整代理字符串，自动解析" autocomplete="off">
|
||
</div>
|
||
<div class="proxy-preview" id="proxyPreview"></div>
|
||
<div class="paste-modal-buttons">
|
||
<button class="btn btn-cancel" id="clearProxyBtn" style="margin-right:auto;">清除代理</button>
|
||
<button class="btn btn-cancel" id="cancelProxyBtn">取消</button>
|
||
<button class="btn btn-primary" id="saveProxyBtn">
|
||
<i class="bi bi-check2"></i>
|
||
<span>保存</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 凭证查看弹窗 -->
|
||
<div class="paste-modal" id="credentialModal">
|
||
<div class="paste-modal-content" style="max-width:500px;">
|
||
<div class="paste-modal-header">
|
||
<div class="paste-modal-icon"><i class="bi bi-key"></i></div>
|
||
<div>
|
||
<h3 class="paste-modal-title">账户凭证</h3>
|
||
<p class="paste-modal-subtitle" id="credModalEmail"></p>
|
||
</div>
|
||
</div>
|
||
<div class="note-fields">
|
||
<div class="note-field-group">
|
||
<label class="input-label">Client ID</label>
|
||
<div class="cred-value-box" id="credClientId"></div>
|
||
</div>
|
||
<div class="note-field-group">
|
||
<label class="input-label">Refresh Token</label>
|
||
<div class="cred-value-box" id="credToken" style="word-break:break-all;max-height:120px;overflow-y:auto;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="paste-modal-buttons">
|
||
<button class="btn btn-primary" id="copyCredClientIdBtn"><i class="bi bi-clipboard"></i> 复制ID</button>
|
||
<button class="btn btn-primary" id="copyCredTokenBtn"><i class="bi bi-clipboard"></i> 复制Token</button>
|
||
<button class="btn btn-cancel" id="closeCredentialBtn">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认弹窗 -->
|
||
<div class="paste-modal" id="confirmModal">
|
||
<div class="paste-modal-content" style="max-width:380px;text-align:center;">
|
||
<div class="paste-modal-icon" id="confirmIcon" style="margin:0 auto 1rem;"><i class="bi bi-question-circle"></i></div>
|
||
<h3 class="paste-modal-title" id="confirmTitle" style="margin-bottom:8px;">确认操作</h3>
|
||
<p class="paste-modal-subtitle" id="confirmMessage" style="margin-bottom:1.5rem;"></p>
|
||
<div class="paste-modal-buttons" style="justify-content:center;">
|
||
<button class="btn btn-cancel" id="confirmCancelBtn">取消</button>
|
||
<button class="btn btn-primary" id="confirmOkBtn"><i class="bi bi-check2"></i> 确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast 提示 -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<!-- Loading 遮罩 -->
|
||
<div class="loading-overlay" id="loadingOverlay">
|
||
<div class="loading-spinner"></div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|