earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign profiles page with card layout showing postcard stats

Browse Source
This commit is contained in:
Zichao Lin
2026-07-05 22:27:13 +08:00
parent 5b6b2ccef8
commit a212021997
3 changed files with 93 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/templates/profiles.html
View File

@@ -7,48 +7,77 @@
<div class="inline-form">
<form method="post" action="/profiles" class="form-row">
<input type="text" name="nickname" placeholder="新 Profile 昵称" required>
<button type="submit" class="btn btn-primary">添加</button>
<button type="submit" class="btn btn-primary">+ 新建</button>
</form>
</div>
{% if profiles %}
<table>
<thead><tr><th>昵称</th><th>创建时间</th><th>操作</th></tr></thead>
<tbody>
{% for p in profiles %}
<tr>
<td>
<span class="nickname-display" id="name-display-{{ p.id }}">{{ p.nickname }}</span>
<form method="post" action="/profiles/{{ p.id }}/rename" class="inline nickname-edit" id="name-edit-{{ p.id }}" style="display:none">
<input type="text" name="nickname" value="{{ p.nickname }}" required>
<button type="submit" class="btn btn-primary btn-sm">确定</button>
<button type="button" class="btn btn-sm" onclick="cancelRename({{ p.id }})">取消</button>
</form>
</td>
<td>{{ p.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
<td>
<a href="/profiles/{{ p.id }}/postcards" class="btn btn-sm">查看</a>
<button type="button" class="btn btn-sm" onclick="startRename({{ p.id }})">改名</button>
<div class="profile-grid">
{% for p in profiles %}
{% set e = extras[p.id] %}
<div class="profile-card">
<div class="profile-card-header">
<h3 class="profile-card-name">
{{ p.nickname }}
<button type="button" class="icon-btn" onclick="startRename({{ p.id }})" title="改名">✏️</button>
</h3>
<form method="post" action="/profiles/{{ p.id }}/rename" class="rename-form" id="name-edit-{{ p.id }}" style="display:none">
<input type="text" name="nickname" value="{{ p.nickname }}" required>
<button type="submit" class="btn btn-primary btn-sm">✓</button>
<button type="button" class="btn btn-sm" onclick="cancelRename({{ p.id }})">✕</button>
</form>
</div>
<div class="profile-card-stats">
<div class="stat">
<span class="stat-value">{{ e.total }}</span>
<span class="stat-label">总计</span>
</div>
<div class="stat">
<span class="stat-value badge-sent-text">{{ e.sent }}</span>
<span class="stat-label">已寄出</span>
</div>
<div class="stat">
<span class="stat-value badge-delivered-text">{{ e.delivered }}</span>
<span class="stat-label">已送达</span>
</div>
<div class="stat">
<span class="stat-value badge-received-text">{{ e.received }}</span>
<span class="stat-label">已收到</span>
</div>
<div class="stat">
<span class="stat-value">{{ e.countries }}</span>
<span class="stat-label">国家</span>
</div>
</div>
<div class="profile-card-footer">
<span class="profile-card-date">创建于 {{ p.created_at.strftime('%Y-%m-%d') }}</span>
<div class="profile-card-actions">
<a href="/profiles/{{ p.id }}/postcards" class="btn btn-primary btn-sm">查看明信片</a>
<form method="post" action="/profiles/{{ p.id }}/delete" class="inline">
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定删除该 Profile 及其所有明信片？')">删除</button>
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定删除「{{ p.nickname }}」及其所有明信片？')">删除</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="empty">还没有 Profile。</p>
<div class="empty-state">
<div class="empty-icon">📮</div>
<p>还没有 Profile</p>
<p class="empty-sub">创建一个 Profile 来管理你的明信片吧</p>
</div>
{% endif %}
<script>
function startRename(id) {
document.getElementById('name-display-' + id).style.display = 'none';
var edit = document.getElementById('name-edit-' + id);
edit.style.display = 'inline-flex';
edit.querySelector('input').focus();
var form = document.getElementById('name-edit-' + id);
form.style.display = 'inline-flex';
form.querySelector('input').focus();
}
function cancelRename(id) {
var form = document.getElementById('name-edit-' + id);
form.style.display = 'none';
document.getElementById('name-display-' + id).style.display = '';
document.getElementById('name-edit-' + id).style.display = 'none';
}
</script>
{% endblock %}