init: init prok

2026-04-16 15:34:47 +08:00
commit db74381f13
56 changed files with 5850 additions and 0 deletions
--- a/packages/web/src/pages/AlbumPage.tsx
+++ b/packages/web/src/pages/AlbumPage.tsx
@@ -0,0 +1,164 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import type { StampWithStatus, RedemptionRuleInfo, RedemptionRecord } from "@stamp/shared";
+import { apiFetch } from "../lib/api";
+import { useAuth } from "../lib/auth";
+import StampGrid from "../components/StampGrid";
+import RedeemModal from "../components/RedeemModal";
+import RegisterModal from "../components/RegisterModal";
+
+export default function AlbumPage() {
+  const navigate = useNavigate();
+  const { user, isLoading: authLoading } = useAuth();
+  const [stamps, setStamps] = useState<StampWithStatus[]>([]);
+  const [rules, setRules] = useState<RedemptionRuleInfo[]>([]);
+  const [history, setHistory] = useState<RedemptionRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showRedeem, setShowRedeem] = useState(false);
+  const [showRegister, setShowRegister] = useState(false);
+
+  const collectedCount = stamps.filter((s) => s.collected).length;
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [stampsData, rulesData] = await Promise.all([
+        apiFetch<StampWithStatus[]>("/stamps"),
+        apiFetch<RedemptionRuleInfo[]>("/redemption/rules"),
+      ]);
+      setStamps(stampsData);
+      setRules(rulesData);
+
+      if (user) {
+        const historyData = await apiFetch<RedemptionRecord[]>("/redemption/history");
+        setHistory(historyData);
+      }
+    } catch {
+      // Stamps endpoint works without auth
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!authLoading) fetchData();
+  }, [authLoading, user]);
+
+  const handleRedeem = async (ruleId: string) => {
+    await apiFetch("/redemption/redeem", {
+      method: "POST",
+      body: JSON.stringify({ ruleId }),
+    });
+    await fetchData();
+  };
+
+  const handleRedeemClick = () => {
+    if (!user) {
+      setShowRegister(true);
+      return;
+    }
+    setShowRedeem(true);
+  };
+
+  if (loading || authLoading) {
+    return (
+      <div className="min-h-screen bg-[var(--bg-cream)] flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-[var(--gold)] border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-cream)] paper-texture">
+      {/* Header */}
+      <div className="sticky top-0 z-40 bg-[var(--bg-cream)]/90 backdrop-blur-sm border-b border-[var(--border-muted)]">
+        <div className="flex items-center justify-between px-4 py-3">
+          <button onClick={() => navigate("/")} className="text-[var(--text-secondary)] p-1">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+          <h1 className="text-base font-semibold text-[var(--text-primary)]">图章集册</h1>
+          <div className="w-8" />
+        </div>
+      </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>
+        <div className="h-2 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%" }}
+          />
+        </div>
+      </div>
+
+      {/* Stamp Grid */}
+      <div className="px-4 pb-6">
+        <StampGrid stamps={stamps} />
+      </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>
+      )}
+
+      {/* Redemption History */}
+      {history.length > 0 && (
+        <div className="px-6 pb-8">
+          <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-3">兑换记录</h3>
+          <div className="space-y-2">
+            {history.map((r) => (
+              <div key={r.id} className="flex items-center justify-between py-2 px-3 bg-white/60 rounded-lg">
+                <div>
+                  <p className="text-sm text-[var(--text-primary)]">{r.ruleName}</p>
+                  <p className="text-xs text-[var(--text-muted)]">
+                    {new Date(r.redeemedAt).toLocaleDateString("zh-CN")}
+                  </p>
+                </div>
+                <span className="text-xs text-[var(--jade)]">已兑换</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Modals */}
+      {showRedeem && (
+        <RedeemModal
+          rules={rules}
+          collectedCount={collectedCount}
+          onRedeem={handleRedeem}
+          onClose={() => setShowRedeem(false)}
+        />
+      )}
+
+      {showRegister && (
+        <RegisterModal
+          onSuccess={() => {
+            setShowRegister(false);
+            fetchData();
+          }}
+          onClose={() => setShowRegister(false)}
+        />
+      )}
+    </div>
+  );
+}