feat(ui): redesign dashboard as global overview with stats, progress bar, recent activity

app/templates/dashboard.html

@@ -1,56 +1,120 @@
 {% extends "base.html" %}
 {% block title %}Dashboard - Postcard Manager{% endblock %}
 {% block content %}
-<h1>👋 欢迎，{{ user.username }}</h1>
+<div class="section-header">
+    <h1>👋 欢迎，{{ user.username }}</h1>
+</div>
 
-<section class="section">
-    {% if profiles %}
-    <div class="card-grid">
-        {% for p in profiles %}
-        {% set ex = extras[p.id] %}
-        <a href="/profiles/{{ p.id }}/postcards" class="card dashboard-card">
-            <div class="dc-header">
-                <span class="dc-icon">📮</span>
-                <h3>{{ p.nickname }}</h3>
-            </div>
-            <div class="dc-stats">
-                <div class="dc-stat">
-                    <span class="dc-num">{{ stats[p.id].total }}</span>
-                    <span class="dc-label">总计</span>
-                </div>
-                <div class="dc-stat">
-                    <span class="dc-num dc-sent">{{ stats[p.id].sent }}</span>
-                    <span class="dc-label">寄出</span>
-                </div>
-                <div class="dc-stat">
-                    <span class="dc-num dc-delivered">{{ stats[p.id].delivered }}</span>
-                    <span class="dc-label">送达</span>
-                </div>
-                <div class="dc-stat">
-                    <span class="dc-num dc-received">{{ stats[p.id].received }}</span>
-                    <span class="dc-label">收到</span>
-                </div>
-            </div>
-            {% if ex.countries %}
-            <div class="dc-tags">
-                {% for c in ex.countries %}
-                <span class="dc-tag">{{ c }}</span>
-                {% endfor %}
-            </div>
-            {% endif %}
-            {% if ex.recent %}
-            <div class="dc-recent">
-                <span class="dc-recent-label">最近</span>
-                {% for c in ex.recent %}
-                <span class="dc-recent-item">{{ c.card_number }}</span>
-                {% endfor %}
-            </div>
-            {% endif %}
-        </a>
-        {% endfor %}
+{% if profiles %}
+<div class="dash-stats">
+    <div class="dash-stat-card">
+        <div class="dash-stat-icon">📮</div>
+        <div class="dash-stat-body">
+            <span class="dash-stat-value">{{ total }}</span>
+            <span class="dash-stat-label">全部明信片</span>
+        </div>
     </div>
-    {% else %}
-    <p class="empty">还没有 Profile，<a href="/profiles">去创建一个</a>。</p>
-    {% endif %}
-</section>
+    <div class="dash-stat-card">
+        <div class="dash-stat-icon">📤</div>
+        <div class="dash-stat-body">
+            <span class="dash-stat-value dash-sent">{{ sent }}</span>
+            <span class="dash-stat-label">已寄出</span>
+        </div>
+    </div>
+    <div class="dash-stat-card">
+        <div class="dash-stat-icon">📬</div>
+        <div class="dash-stat-body">
+            <span class="dash-stat-value dash-delivered">{{ delivered }}</span>
+            <span class="dash-stat-label">已送达</span>
+        </div>
+    </div>
+    <div class="dash-stat-card">
+        <div class="dash-stat-icon">💌</div>
+        <div class="dash-stat-body">
+            <span class="dash-stat-value dash-received">{{ received }}</span>
+            <span class="dash-stat-label">已收到</span>
+        </div>
+    </div>
+    <div class="dash-stat-card">
+        <div class="dash-stat-icon">🌍</div>
+        <div class="dash-stat-body">
+            <span class="dash-stat-value">{{ countries }}</span>
+            <span class="dash-stat-label">国家/地区</span>
+        </div>
+    </div>
+</div>
+
+{% if total > 0 %}
+<div class="dash-progress">
+    <div class="progress-bar">
+        <div class="progress-seg progress-sent" style="width:{{ sent_pct }}%"></div>
+        <div class="progress-seg progress-delivered" style="width:{{ delivered_pct }}%"></div>
+        <div class="progress-seg progress-received" style="width:{{ received_pct }}%"></div>
+    </div>
+    <div class="progress-legend">
+        <span><i class="dot dot-sent"></i>已寄出 {{ sent_pct }}%</span>
+        <span><i class="dot dot-delivered"></i>已送达 {{ delivered_pct }}%</span>
+        <span><i class="dot dot-received"></i>已收到 {{ received_pct }}%</span>
+    </div>
+</div>
+{% endif %}
+
+<div class="dash-sections">
+    <div class="dash-section">
+        <h2>最近动态</h2>
+        {% if recent %}
+        <div class="recent-list">
+            {% for pc in recent %}
+            <a href="/postcards/{{ pc.id }}" class="recent-item">
+                <div class="recent-img">
+                    {% if pc.image_front %}
+                    <img src="{{ pc.image_front }}" alt="">
+                    {% else %}
+                    <span>📷</span>
+                    {% endif %}
+                </div>
+                <div class="recent-info">
+                    <strong>{{ pc.card_number }}</strong>
+                    <span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达','received':'已收到'}.get(pc.status) }}</span>
+                </div>
+                <div class="recent-meta">
+                    {% if pc.status in ('sent','delivered') %}
+                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
+                    <span>→ {{ pc.recipient_name or '-' }}</span>
+                    {% else %}
+                    <span>← {{ pc.sender_name or '-' }}</span>
+                    {% endif %}
+                </div>
+            </a>
+            {% endfor %}
+        </div>
+        {% else %}
+        <p class="empty">暂无明信片</p>
+        {% endif %}
+    </div>
+
+    <div class="dash-section">
+        <h2>Profiles</h2>
+        <div class="dash-profiles">
+            {% for p in profiles %}
+            <a href="/profiles/{{ p.id }}/postcards" class="dash-profile-link">
+                <span class="dash-profile-name">{{ p.nickname }}</span>
+                <span class="dash-profile-arrow">→</span>
+            </a>
+            {% endfor %}
+            <a href="/profiles" class="dash-profile-link dash-profile-more">
+                <span class="dash-profile-name">管理全部</span>
+                <span class="dash-profile-arrow">→</span>
+            </a>
+        </div>
+    </div>
+</div>
+
+{% else %}
+<div class="empty-state">
+    <div class="empty-icon">📮</div>
+    <p>欢迎使用明信片管理器！</p>
+    <p class="empty-sub">创建一个 <a href="/profiles">Profile</a> 开始管理你的明信片</p>
+</div>
+{% endif %}
 {% endblock %}