feat: 导入 16 枚图章并重构图册为 4x4 圆形布局
- 按 A4 排列顺序导入 16 枚真实商户图章（彩色 + 灰色）到数据库 - 图章素材存放于 packages/server/uploads/stamps/，命名与 sortOrder 一致 - 图册页布局由 3 列改为 4 列，StampCard 采用圆形白底容器承托透明圆章 - 去除邮票打孔/方形渐变背景，已收集态增加金色内描边与柔光阴影 - 优化进度区与兑换按钮视觉：突出数字、显示差额提示、禁用态文案 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,58 +7,53 @@ type StampCardProps = {
|
||||
};
|
||||
|
||||
export default function StampCard({ name, imageColor, imageGrey, collected, onClick }: StampCardProps) {
|
||||
const src = collected ? imageColor : imageGrey;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-xl transition-transform active:scale-95"
|
||||
className="flex flex-col items-center gap-1.5 p-1 transition-transform active:scale-95"
|
||||
>
|
||||
{/* Stamp image with perforated border effect */}
|
||||
<div
|
||||
className="relative w-full aspect-square rounded-lg overflow-hidden
|
||||
shadow-[var(--shadow-sm)] border border-[var(--border-muted)]"
|
||||
style={{
|
||||
background: collected
|
||||
? "linear-gradient(135deg, #fdf6ee 0%, #f8eed8 100%)"
|
||||
: "linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Perforated edge effect */}
|
||||
<div className="absolute inset-0 stamp-border pointer-events-none z-10" />
|
||||
|
||||
<img
|
||||
src={collected ? imageColor : imageGrey}
|
||||
alt={name}
|
||||
className="w-full h-full object-contain p-3"
|
||||
style={collected ? {} : { filter: "grayscale(1) opacity(0.4)" }}
|
||||
onError={(e) => {
|
||||
// Fallback for missing images: show placeholder
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
target.parentElement!.innerHTML += `
|
||||
<div class="w-full h-full flex items-center justify-center text-3xl"
|
||||
style="color: ${collected ? "var(--gold)" : "var(--text-muted)"}; opacity: ${collected ? 1 : 0.3}">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<circle cx="12" cy="12" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
<div className="relative w-full aspect-square">
|
||||
<div
|
||||
className="w-full h-full rounded-full bg-white overflow-hidden flex items-center justify-center border border-[var(--border-muted)]"
|
||||
style={{
|
||||
boxShadow: collected
|
||||
? "0 2px 6px rgba(212,165,116,0.25), inset 0 0 0 1px rgba(212,165,116,0.15)"
|
||||
: "0 1px 3px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={name}
|
||||
className="w-[92%] h-[92%] object-contain"
|
||||
style={{ opacity: collected ? 1 : 0.55 }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
target.parentElement!.innerHTML += `
|
||||
<div class="w-full h-full flex items-center justify-center"
|
||||
style="color: var(--text-muted); opacity: 0.3">
|
||||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Collected badge */}
|
||||
{collected && (
|
||||
<div className="absolute top-1 right-1 w-5 h-5 rounded-full bg-[var(--jade)] flex items-center justify-center">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
|
||||
<div className="absolute top-0 right-0 w-4 h-4 rounded-full bg-[var(--jade)] flex items-center justify-center shadow-sm z-10">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stamp name */}
|
||||
<span
|
||||
className="text-xs font-medium truncate w-full text-center"
|
||||
className="text-[10px] leading-tight truncate w-full text-center"
|
||||
style={{ color: collected ? "var(--text-primary)" : "var(--text-muted)" }}
|
||||
>
|
||||
{name}
|
||||
|
||||
@@ -8,7 +8,7 @@ type StampGridProps = {
|
||||
|
||||
export default function StampGrid({ stamps, onStampClick }: StampGridProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-3 stagger-children">
|
||||
<div className="grid grid-cols-4 gap-3 stagger-children">
|
||||
{stamps.map((stamp) => (
|
||||
<StampCard
|
||||
key={stamp.id}
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user