基于HTML的邮件发送状态查询界面设计示例

以下是一个基于HTML的邮件发送状态查询界面设计示例，结合筛选功能、状态展示和重新发送操作，采用Bootstrap框架实现响应式布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>邮件发送状态监控系统</title><style>.status-badge {padding: 4px 8px;border-radius: 12px;font-size: 0.9em;}.success { background-color: #d4edda; color: #155724; }.failed { background-color: #f8d7da; color: #721c24; }.pending { background-color: #e2e3e5; color: #41464b; }.filter-section { background: #f8f9fa; padding: 20px; border-radius: 8px; }</style>
</head>
<body><div class="container mt-4"><!-- 筛选区域 --><div class="filter-section mb-4"><div class="row g-3"><div class="col-md-4"><select class="form-select" id="monthSelect"><option value="">选择月份</option><option value="2025-03">2025年3月</option><option value="2025-02">2025年2月</option></select></div><div class="col-md-4"><select class="form-select" id="recipientFilter"><option value="">所有接收者</option><option value="user1@example.com">张三</option><option value="user2@example.com">李四</option></select></div><div class="col-md-4"><button class="btn btn-primary w-100" onclick="filterRecords()">查询</button></div></div></div><!-- 数据表格 --><div class="table-responsive"><table class="table table-hover align-middle"><thead><tr><th>发送时间</th><th>接收者</th><th>邮件主题</th><th>发送状态</th><th>操作</th></tr></thead><tbody id="mailTableBody"><!-- 动态数据加载 --></tbody></table></div><!-- 分页 --><nav class="mt-3"><ul class="pagination justify-content-center"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item active"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul></nav></div><script>// 模拟数据const mailRecords = [{date: "2025-03-15 14:30",recipient: "user1@example.com",subject: "项目进度报告",status: "success"},{date: "2025-03-18 09:15",recipient: "user2@example.com",subject: "系统维护通知",status: "failed"}];// 渲染表格function renderTable(data) {const tbody = document.getElementById('mailTableBody');tbody.innerHTML = data.map(record => `<tr><td>$${record.date}</td><td>$${record.recipient}</td><td>$${record.subject}</td><td><span class="status-badge $${record.status}">$${record.status === 'success' ? '发送成功' : record.status === 'failed' ? '发送失败' : '待发送'}</span></td><td>$${record.status === 'failed' ? `<button class="btn btn-sm btn-outline-danger" onclick="retrySend('$${record.recipient}')"> 重新发送 </button>` : ''}</td></tr>`).join('');}// 筛选功能function filterRecords() {const month = document.getElementById('monthSelect').value;const recipient = document.getElementById('recipientFilter').value;const filtered = mailRecords.filter(record => {const matchMonth = month ? record.date.startsWith(month) : true;const matchRecipient = recipient ? record.recipient === recipient : true;return matchMonth && matchRecipient;});renderTable(filtered);}// 重新发送功能async function retrySend(recipient) {try {const response = await fetch('/api/retry-send', {method: 'POST',body: JSON.stringify({ recipient })});if(response.ok) {alert('重新发送请求已提交');filterRecords(); // 刷新列表}} catch (error) {console.error('发送失败:', error);}}// 初始化加载renderTable(mailRecords);</script>
</body>
</html>