以下是一个基于HTML的邮件发送状态查询界面设计示例，结合筛选功能、状态展示和重新发送操作，采用Bootstrap框架实现响应式布局：
html
<!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="[email protected]">张三</option>
<option value="[email protected]">李四</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: "[email protected]",
subject: "项目进度报告",
status: "success"
},
{
date: "2025-03-18 09:15",
recipient: "[email protected]",
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>关键功能设计说明：
- 智能筛选系统
- 双条件复合筛选（月份+接收者）
- 动态日期范围生成（可扩展为自动生成最近12个月选项）
- 接收者列表自动去重加载
- 状态可视化设计
- 采用彩色徽章区分状态（成功/失败/待发送）
- 状态颜色符合通用设计规范（绿色-成功，红色-失败，灰色-待处理）
- 响应式表格适配移动端显示
- 交互增强功能
- 失败邮件专属操作按钮（重新发送）
- 异步请求处理机制
- 操作后自动刷新数据列表
- 分页加载支持大数据量展示
- 技术实现要点
- 使用Bootstrap 5实现响应式布局
- 纯前端数据过滤演示（实际应对接后端API）
- 模拟数据动态渲染机制
- 符合RESTful规范的API设计
扩展建议：
- 数据可视化增强
- 添加统计图表展示各月份发送成功率
- 实现状态分布饼图
- 添加发送耗时趋势图
- 企业级功能扩展
- 批量重新发送功能
- 失败原因查看弹窗
- 邮件内容预览功能
- 导出CSV报表功能
- 性能优化方向
- 添加本地缓存机制
- 实现虚拟滚动加载
- 增加筛选条件记忆功能
- 添加加载状态指示器
该设计遵循现代Web应用设计规范，采用模块化开发思路，实际部署时需要对接后端API服务并添加用户认证模块。建议使用Vue/React框架进行组件化改造以提升可维护性。