feat: 导入 16 枚图章并重构图册为 4x4 圆形布局

- 按 A4 排列顺序导入 16 枚真实商户图章（彩色 + 灰色）到数据库
- 图章素材存放于 packages/server/uploads/stamps/，命名与 sortOrder 一致
- 图册页布局由 3 列改为 4 列，StampCard 采用圆形白底容器承托透明圆章
- 去除邮票打孔/方形渐变背景，已收集态增加金色内描边与柔光阴影
- 优化进度区与兑换按钮视觉：突出数字、显示差额提示、禁用态文案

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/web/src/pages/AlbumPage.tsx

@@ -84,14 +84,25 @@ export default function AlbumPage() {
       </div>
 
       {/* Progress */}
-      <div className="px-6 pt-5 pb-4">
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-sm text-[var(--text-secondary)]">收集进度</span>
-          <span className="text-sm font-semibold text-[var(--gold)]">
-            {collectedCount} / {stamps.length}
-          </span>
+      <div className="px-6 pt-5 pb-5">
+        <div className="flex items-end justify-between mb-2">
+          <div>
+            <div className="text-xs text-[var(--text-muted)] mb-0.5">收集进度</div>
+            <div className="flex items-baseline gap-1">
+              <span className="text-2xl font-semibold text-[var(--text-primary)]">{collectedCount}</span>
+              <span className="text-sm text-[var(--text-muted)]">/ {stamps.length}</span>
+            </div>
+          </div>
+          {stamps.length > 0 && collectedCount < stamps.length && (
+            <span className="text-xs text-[var(--text-secondary)] pb-1">
+              还差 {stamps.length - collectedCount} 枚集齐
+            </span>
+          )}
+          {stamps.length > 0 && collectedCount === stamps.length && (
+            <span className="text-xs font-medium text-[var(--gold)] pb-1">已集齐全部图章 ✨</span>
+          )}
         </div>
-        <div className="h-2 bg-[var(--border-muted)] rounded-full overflow-hidden">
+        <div className="h-1.5 bg-[var(--border-muted)] rounded-full overflow-hidden">
           <div
             className="h-full bg-gradient-to-r from-[var(--gold)] to-[var(--terracotta)] rounded-full transition-all duration-500"
             style={{ width: stamps.length ? `${(collectedCount / stamps.length) * 100}%` : "0%" }}
@@ -105,20 +116,31 @@ export default function AlbumPage() {
       </div>
 
       {/* Redeem Section */}
-      {rules.length > 0 && (
-        <div className="px-6 pb-6">
-          <button
-            onClick={handleRedeemClick}
-            className="w-full py-3 rounded-xl text-sm font-medium transition-colors"
-            style={{
-              backgroundColor: collectedCount > 0 ? "var(--jade)" : "var(--border-muted)",
-              color: collectedCount > 0 ? "white" : "var(--text-muted)",
-            }}
-          >
-            兑换奖品 ({rules.filter((r) => collectedCount >= r.threshold).length} 个可兑换)
-          </button>
-        </div>
-      )}
+      {rules.length > 0 && (() => {
+        const availableCount = rules.filter((r) => collectedCount >= r.threshold).length;
+        const canRedeem = availableCount > 0;
+        return (
+          <div className="px-6 pb-6">
+            <button
+              onClick={handleRedeemClick}
+              disabled={!canRedeem}
+              className="w-full py-3.5 rounded-xl text-sm font-medium transition-all disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              style={{
+                backgroundColor: canRedeem ? "var(--jade)" : "var(--border-muted)",
+                color: canRedeem ? "white" : "var(--text-muted)",
+                boxShadow: canRedeem ? "0 2px 8px rgba(45,106,79,0.25)" : "none",
+              }}
+            >
+              <span>{canRedeem ? "兑换奖品" : "继续收集以解锁奖品"}</span>
+              {canRedeem && (
+                <span className="text-xs px-2 py-0.5 rounded-full bg-white/20">
+                  {availableCount} 个可兑换
+                </span>
+              )}
+            </button>
+          </div>
+        );
+      })()}
 
       {/* Redemption History */}
       {history.length > 0 && (