352 lines
17 KiB
HTML
352 lines
17 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 rel="stylesheet" href="style.css">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
||
<style>
|
||
/* 背景与容器风格对齐用户页 */
|
||
body {
|
||
background: #f5f7fa;
|
||
}
|
||
.admin-container {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
.admin-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
overflow: hidden;
|
||
width: 100%;
|
||
max-width: 1100px;
|
||
animation: slideIn 0.5s ease-out;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
@keyframes slideIn {
|
||
from { opacity: 0; transform: translateY(30px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.admin-header {
|
||
background: #0078d4;
|
||
color: white;
|
||
padding: 16px 18px;
|
||
text-align: center;
|
||
}
|
||
.admin-header h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px 0; }
|
||
.admin-header p { margin: 0; opacity: .9; }
|
||
.admin-content { padding: 16px; }
|
||
.login-section { max-width: 420px; margin: 0 auto; }
|
||
.management-section { display: none; }
|
||
|
||
/* 账号卡片风格 */
|
||
.account-item {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
padding: 14px;
|
||
margin-bottom: 12px;
|
||
background: #ffffff;
|
||
transition: box-shadow .2s ease, border-color .2s ease;
|
||
}
|
||
.account-item:hover {
|
||
border-color: #cbd5e0;
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
||
background: #fff;
|
||
}
|
||
|
||
/* 按钮与输入对齐用户页 */
|
||
.btn-admin {
|
||
background: #0078d4;
|
||
border: none;
|
||
color: white;
|
||
border-radius: 6px;
|
||
padding: 6px 12px;
|
||
transition: all 0.2s ease;
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
}
|
||
.btn-admin:hover { background: #005a9e; color: #fff; transform: translateY(-1px); }
|
||
|
||
.input-group-custom { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
||
.input-group-custom input {
|
||
flex: 1; min-width: 200px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; outline: none; transition: all .3s;
|
||
}
|
||
.input-group-custom input:focus { border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1); }
|
||
.btn-custom { padding: 6px 10px; border: none; border-radius: 6px; font-weight: 500; cursor: pointer; transition: all .3s; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
|
||
.btn-primary-custom { background: #0078d4; color: #fff; }
|
||
.btn-primary-custom:hover { background: #005a9e; }
|
||
.btn-outline-secondary { border: 1px solid #e2e8f0; color: #718096; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
|
||
|
||
/* 选项卡与内容区域 */
|
||
.nav-tabs .nav-link { border: 1px solid transparent; border-radius: 8px 8px 0 0; color: #0078d4; padding: 6px 10px; font-size: 13px; }
|
||
.nav-tabs .nav-link.active { background: #0078d4; color: white; border-color: #0078d4; }
|
||
.tab-content { border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 8px 8px; padding: 12px; background: white; max-height: 55vh; overflow-y: auto; }
|
||
.admin-content { padding: 16px; flex: 1; overflow-y: auto; max-height: calc(100vh - 160px); }
|
||
|
||
/* 模态风格对齐用户页 */
|
||
.modal-content { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); }
|
||
.modal-header { background: #0078d4; color: white; border-radius: 12px 12px 0 0; border-bottom: none; padding: 15px 20px; }
|
||
.modal-title { font-size: 16px; font-weight: 600; }
|
||
.modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }
|
||
.modal-header .btn-close:hover { opacity: 1; }
|
||
.modal-body .form-label { font-weight: 600; color: #2d3748; margin-bottom: 6px; font-size: 14px; }
|
||
.modal-body .form-control { border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px; transition: all 0.3s; font-size: 14px; }
|
||
.modal-body .form-control:focus { border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1); }
|
||
</style>
|
||
</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>
|
||
|
||
<div class="admin-container">
|
||
<div class="admin-card">
|
||
<div class="admin-header P-3">
|
||
<h2><i class="bi bi-gear me-2"></i>Outlook邮件系统 - 账号管理</h2>
|
||
</div>
|
||
|
||
<div class="admin-content">
|
||
<!-- 登录验证区域 -->
|
||
<div id="loginSection" class="login-section">
|
||
<div class="text-center mb-4">
|
||
<i class="bi bi-shield-lock display-4 text-primary"></i>
|
||
<h4 class="mt-3">身份验证</h4>
|
||
<p class="text-muted">请输入管理令牌以访问账号管理功能</p>
|
||
</div>
|
||
|
||
<form id="loginForm">
|
||
<div class="mb-3">
|
||
<label for="tokenInput" class="form-label">管理令牌</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text">
|
||
<i class="bi bi-key"></i>
|
||
</span>
|
||
<input type="password" class="form-control" id="tokenInput"
|
||
placeholder="请输入管理令牌" required>
|
||
</div>
|
||
<div class="form-text">
|
||
<i class="bi bi-info-circle me-1"></i>
|
||
默认令牌：admin123（可通过环境变量 ADMIN_TOKEN 修改）
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-admin w-100">
|
||
<i class="bi bi-unlock me-2"></i>验证并登录
|
||
</button>
|
||
</form>
|
||
|
||
<div class="text-center mt-3">
|
||
<a href="/" class="text-decoration-none">
|
||
<i class="bi bi-arrow-left me-1"></i>返回邮件管理
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管理功能区域（单页紧凑版） -->
|
||
<div id="managementSection" class="management-section">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<div class="d-flex justify-content-end gap-2">
|
||
<button class="btn btn-outline-secondary btn-sm" id="openImportModalBtn" title="导入">
|
||
<i class="bi bi-upload"></i> 导入
|
||
</button>
|
||
<button class="btn btn-outline-secondary btn-sm" id="exportDataBtn" title="导出">
|
||
<i class="bi bi-download"></i> 导出
|
||
</button>
|
||
</div>
|
||
<div class="d-flex gap-2 align-items-center">
|
||
<div class="input-group-custom" style="width: 280px;">
|
||
<input type="text" id="accountSearchInput" placeholder="搜索邮箱...">
|
||
<button class="btn btn-outline-secondary btn-sm" id="searchAccountsBtn" title="搜索">
|
||
<i class="bi bi-search"></i>
|
||
</button>
|
||
</div>
|
||
<button class="btn btn-outline-secondary btn-sm" id="refreshAccountsBtn" title="刷新">
|
||
<i class="bi bi-arrow-clockwise"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="accountsList" class="accounts-list">
|
||
<div class="table-responsive">
|
||
<table class="table table-hover align-middle mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th class="small text-muted" style="width:50%">邮箱</th>
|
||
<th class="small text-muted">标签</th>
|
||
<th class="text-end small text-muted" style="width:120px">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="accountsTbody">
|
||
<tr>
|
||
<td colspan="3" class="text-center py-4">
|
||
<div class="spinner-border text-primary" role="status"></div>
|
||
<div class="mt-2 small text-muted">正在加载账号列表...</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||
<div class="small text-muted" id="accountsPagerInfo">第 1 / 1 页，共 0 条</div>
|
||
<div class="btn-group" role="group">
|
||
<button class="btn btn-outline-secondary btn-sm" id="prevPageBtn" title="上一页"><i class="bi bi-chevron-left"></i></button>
|
||
<button class="btn btn-outline-secondary btn-sm" id="nextPageBtn" title="下一页"><i class="bi bi-chevron-right"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 退出登录 -->
|
||
<div class="text-center mt-4">
|
||
<button class="btn btn-sm btn-outline-danger" id="logoutBtn">
|
||
<i class="bi bi-box-arrow-right me-2"></i>退出管理
|
||
</button>
|
||
<a href="/" class="btn btn-outline-secondary ms-2">
|
||
<i class="bi bi-arrow-left me-2"></i>返回邮件管理
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成功提示模态框 -->
|
||
<div class="modal fade" id="successModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header border-0">
|
||
<h5 class="modal-title">
|
||
<i class="bi bi-check-circle me-2"></i>操作成功
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="successMessage" class="mb-0"></p>
|
||
</div>
|
||
<div class="modal-footer border-0">
|
||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误提示模态框 -->
|
||
<div class="modal fade" id="errorModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header border-0">
|
||
<h5 class="modal-title text-danger">
|
||
<i class="bi bi-exclamation-triangle me-2"></i>错误提示
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="errorMessage" class="mb-0"></p>
|
||
</div>
|
||
<div class="modal-footer border-0">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标签管理模态框（保留用于行内编辑） -->
|
||
<div class="modal fade" id="tagManagementModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="tagManagementModalTitle">
|
||
<i class="bi bi-tags me-2"></i>管理标签
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="mb-3">
|
||
<label for="tagManagementInput" class="form-label">标签</label>
|
||
<input type="text" class="form-control" id="tagManagementInput"
|
||
placeholder="输入标签，用逗号分隔，如：微软,谷歌,苹果">
|
||
<div class="form-text">
|
||
<i class="bi bi-lightbulb me-1"></i>
|
||
多个标签用逗号分隔，如：微软,谷歌,苹果
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<small class="text-muted">当前标签：</small>
|
||
<div id="tagManagementCurrentTags" class="mt-1">
|
||
<span class="text-muted">暂无标签</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" id="tagManagementSaveBtn">
|
||
<i class="bi bi-save me-1"></i>保存标签
|
||
</button>
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导入对话框 -->
|
||
<div class="modal fade" id="importModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">
|
||
<i class="bi bi-upload me-2"></i>批量导入账号
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="alert alert-info" role="alert" style="font-size: 12px;">
|
||
<i class="bi bi-info-circle"></i>
|
||
支持：完整格式「邮箱----密码----client_id----refresh_token」或简化格式「邮箱----refresh_token」。
|
||
</div>
|
||
<div class="mb-2">
|
||
<label for="importTextarea" class="form-label small mb-1">账户数据</label>
|
||
<textarea class="form-control" id="importTextarea" rows="8" placeholder="每行一个账户，使用四个短横线（----）分隔字段"></textarea>
|
||
</div>
|
||
<div>
|
||
<label for="mergeMode" class="form-label small mb-1">合并模式</label>
|
||
<select class="form-select form-select-sm" id="mergeMode">
|
||
<option value="update">更新现有账户</option>
|
||
<option value="skip">跳过重复账户</option>
|
||
<option value="replace">替换所有数据</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-admin btn-sm" id="executeImportBtn">
|
||
<i class="bi bi-upload me-1"></i>导入
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="admin.js"></script>
|
||
</body>
|
||
</html> |