优化界面布局: 简化短信列表，增强统计信息详情
Changes: - 短信列表: 简化为列表视图，只显示号码、时间、完整内容 - 统计信息: 最近接收增加详细参数(签名、IP、详情链接) - 统计信息: 显示从10条增加到20条 - 优化CSS样式，提升可读性
This commit is contained in:
OpenClaw Agent
@@ -138,26 +138,54 @@
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.messages-table th,
|
||||
.messages-table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
.messages-list {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-view {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-view li {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.messages-table th {
|
||||
background: #f5f5f5;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.messages-table tr:hover {
|
||||
.list-view li:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.list-view li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.msg-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.from-number {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.sign-verified {
|
||||
@@ -351,40 +379,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="messages-table">
|
||||
<div class="messages-list">
|
||||
{% if messages %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>发送方</th>
|
||||
<th>内容</th>
|
||||
<th>时间</th>
|
||||
<th>验证</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for msg in messages %}
|
||||
<tr>
|
||||
<td>{{ msg.id }}</td>
|
||||
<td><span class="from-number">{{ msg.from_number }}</span></td>
|
||||
<td>
|
||||
<a href="/message/{{ msg.id }}" style="color: #333; text-decoration: none;">
|
||||
{{ msg.content[:50] }}{% if msg.content|length > 50 %}...{% endif %}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ msg.created_at }}</td>
|
||||
<td>
|
||||
{% if msg.sign_verified %}
|
||||
<span class="sign-verified yes">✓ 已验证</span>
|
||||
{% else %}
|
||||
<span class="sign-verified no">✗ 未验证</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="list-view">
|
||||
{% for msg in messages %}
|
||||
<li>
|
||||
<div class="msg-header">
|
||||
<span class="from-number">{{ msg.from_number }}</span>
|
||||
<span class="msg-time">{{ msg.created_at }}</span>
|
||||
</div>
|
||||
<div class="msg-content">{{ msg.content }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<h3>暂无短信数据</h3>
|
||||
|
||||
@@ -95,33 +95,102 @@
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.recent-list {
|
||||
.detailed-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.recent-list li {
|
||||
padding: 15px;
|
||||
.detailed-list li {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.recent-list li:last-child {
|
||||
.detailed-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recent-list .from {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
.detailed-list li:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.recent-list .time {
|
||||
.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;
|
||||
margin-left: 10px;
|
||||
background: #f0f0f0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.recent-list .content {
|
||||
.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;
|
||||
margin-top: 5px;
|
||||
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 {
|
||||
@@ -213,17 +282,37 @@
|
||||
<div class="section">
|
||||
<h3>📬 最近接收</h3>
|
||||
{% if recent %}
|
||||
<ul class="recent-list">
|
||||
<ul class="detailed-list">
|
||||
{% for msg in recent %}
|
||||
<li>
|
||||
<span class="from">{{ msg.from_number }}</span>
|
||||
<span class="time">{{ msg.created_at }}</span>
|
||||
<div class="content">{{ msg.content[:100] }}{% if msg.content|length > 100 %}...{% endif %}</div>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user