b5fce34793
Changes: - 短信列表: 简化为列表视图，只显示号码、时间、完整内容 - 统计信息: 最近接收增加详细参数(签名、IP、详情链接) - 统计信息: 显示从10条增加到20条 - 优化CSS样式，提升可读性
347 lines
9.2 KiB
HTML
347 lines
9.2 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>统计信息</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 20px;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
color: #333;
|
|
}
|
|
|
|
.header .nav a {
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
background: #667eea;
|
|
color: white;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-card h2 {
|
|
font-size: 16px;
|
|
color: #666;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stat-card .value {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.stat-card .sub {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.section {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 18px;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
border-bottom: 2px solid #667eea;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.detailed-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.detailed-list li {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.detailed-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detailed-list li:hover {
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.detailed-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detailed-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detailed-id {
|
|
font-size: 12px;
|
|
color: #999;
|
|
background: #f0f0f0;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.from-number {
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.msg-time {
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
|
|
.detailed-content {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.msg-detail {
|
|
color: #333;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin-bottom: 10px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.msg-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-tag {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.detail-link {
|
|
font-size: 12px;
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
padding: 4px 10px;
|
|
background: #f0f0f0;
|
|
border-radius: 3px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.detail-link:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sign-verified {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.numbers-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.number-card {
|
|
padding: 15px;
|
|
background: #f5f5f5;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.number-card .number {
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.number-card .count {
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cleanup-btn {
|
|
background: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.cleanup-btn:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>📊 统计信息</h1>
|
|
<div class="nav">
|
|
<a href="/">返回列表</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h2>短信总数</h2>
|
|
<div class="value">{{ stats.total }}</div>
|
|
<div class="sub">累计接收</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h2>今日</h2>
|
|
<div class="value">{{ stats.today }}</div>
|
|
<div class="sub">今日新增</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h2>本周</h2>
|
|
<div class="value">{{ stats.week }}</div>
|
|
<div class="sub">近7天</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h2>签名验证</h2>
|
|
<div class="value">{{ stats.verified }} / {{ stats.verified + stats.unverified }}</div>
|
|
<div class="sub">已验证 / 总数</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>📬 最近接收</h3>
|
|
{% if recent %}
|
|
<ul class="detailed-list">
|
|
{% for msg in recent %}
|
|
<li>
|
|
<div class="detailed-header">
|
|
<div class="detailed-info">
|
|
<span class="from-number">{{ msg.from_number }}</span>
|
|
<span class="detailed-id">ID: {{ msg.id }}</span>
|
|
</div>
|
|
<span class="msg-time">{{ msg.created_at }}</span>
|
|
</div>
|
|
<div class="detailed-content">
|
|
<div class="msg-detail">{{ msg.content }}</div>
|
|
<div class="msg-meta">
|
|
<span class="meta-tag">
|
|
{% if msg.sign_verified %}
|
|
<span class="sign-verified yes">✓ 已验证</span>
|
|
{% else %}
|
|
<span class="sign-verified no">✗ 未验证</span>
|
|
{% endif %}
|
|
</span>
|
|
{% if msg.ip_address %}
|
|
<span class="meta-tag">🌐 {{ msg.ip_address }}</span>
|
|
{% endif %}
|
|
<a href="/message/{{ msg.id }}" class="detail-link">查看详情</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
暂无数据
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>📱 发送方号码</h3>
|
|
{% if from_numbers %}
|
|
<div class="numbers-list">
|
|
{% for num in from_numbers %}
|
|
<div class="number-card">
|
|
<div class="number">{{ num.from_number }}</div>
|
|
<div class="count">{{ num.count }} 条短信</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
暂无数据
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>🗑️ 数据清理</h3>
|
|
<p style="color: #666; margin-bottom: 15px;">
|
|
清理 {{ cleanup_days }} 天前的数据，最多保留 {{ max_messages }} 条
|
|
</p>
|
|
<button class="cleanup-btn" onclick="if(confirm('确定要清理旧数据吗？此操作不可恢复！')) { location.href='/cleanup'; }">
|
|
清理旧数据
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|