refactor: 拆分 MatchResult、ProfilePage、BlindboxRoomPage 大组件
- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行） - ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行） - BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）
This commit is contained in:
@@ -9,21 +9,19 @@ import {
|
|||||||
Loader2,
|
Loader2,
|
||||||
Package,
|
Package,
|
||||||
Flame,
|
Flame,
|
||||||
Trophy,
|
|
||||||
Users,
|
Users,
|
||||||
Share2,
|
Share2,
|
||||||
LogIn,
|
LogIn,
|
||||||
Copy,
|
Copy,
|
||||||
Trash2,
|
Trash2,
|
||||||
LogOut,
|
LogOut,
|
||||||
Pencil,
|
|
||||||
Check,
|
|
||||||
X,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import confetti from "canvas-confetti";
|
import confetti from "canvas-confetti";
|
||||||
import { getCachedProfile, isRegistered } from "@/lib/userId";
|
import { getCachedProfile, isRegistered } from "@/lib/userId";
|
||||||
import ShareCardModal from "@/components/ShareCardModal";
|
import ShareCardModal from "@/components/ShareCardModal";
|
||||||
import Button from "@/components/Button";
|
import Button from "@/components/Button";
|
||||||
|
import BlindboxMyIdeas, { type MyIdea } from "@/components/BlindboxMyIdeas";
|
||||||
|
import BlindboxDrawnHistory, { type DrawnIdea } from "@/components/BlindboxDrawnHistory";
|
||||||
import { useToast } from "@/hooks/useToast";
|
import { useToast } from "@/hooks/useToast";
|
||||||
import { useShare } from "@/hooks/useShare";
|
import { useShare } from "@/hooks/useShare";
|
||||||
import { BlindboxRoomSkeleton } from "@/components/Skeleton";
|
import { BlindboxRoomSkeleton } from "@/components/Skeleton";
|
||||||
@@ -38,132 +36,8 @@ interface RoomInfo {
|
|||||||
members: { id: string; username: string; avatar: string }[];
|
members: { id: string; username: string; avatar: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface MyIdea {
|
|
||||||
id: string;
|
|
||||||
content: string;
|
|
||||||
createdAt: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DrawnIdea {
|
|
||||||
id: string;
|
|
||||||
content: string;
|
|
||||||
createdAt: string;
|
|
||||||
user?: { id: string; username: string; avatar: string };
|
|
||||||
drawnBy?: { id: string; username: string; avatar: string } | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
type Phase = "pool" | "shaking" | "reveal";
|
type Phase = "pool" | "shaking" | "reveal";
|
||||||
|
|
||||||
function MyIdeaItem({
|
|
||||||
idea,
|
|
||||||
onEdit,
|
|
||||||
onDelete,
|
|
||||||
}: {
|
|
||||||
idea: MyIdea;
|
|
||||||
onEdit: (id: string, content: string) => Promise<void>;
|
|
||||||
onDelete: (id: string) => Promise<void>;
|
|
||||||
}) {
|
|
||||||
const [editing, setEditing] = useState(false);
|
|
||||||
const [draft, setDraft] = useState(idea.content);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!draft.trim() || saving) return;
|
|
||||||
setSaving(true);
|
|
||||||
await onEdit(idea.id, draft);
|
|
||||||
setSaving(false);
|
|
||||||
setEditing(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
layout
|
|
||||||
className="flex items-center gap-2 rounded-xl bg-surface/60 px-3 py-2.5 ring-1 ring-border/80"
|
|
||||||
initial={{ opacity: 0, y: -8 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
exit={{ opacity: 0, x: -20 }}
|
|
||||||
>
|
|
||||||
{editing ? (
|
|
||||||
<>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={draft}
|
|
||||||
onChange={(e) => setDraft(e.target.value.slice(0, 200))}
|
|
||||||
onKeyDown={(e) => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") { setEditing(false); setDraft(idea.content); } }}
|
|
||||||
maxLength={200}
|
|
||||||
autoFocus
|
|
||||||
className="h-8 min-w-0 flex-1 rounded-lg bg-elevated px-2.5 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-purple-600/50"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={saving || !draft.trim()}
|
|
||||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-purple-600 text-white disabled:opacity-40"
|
|
||||||
>
|
|
||||||
{saving ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => { setEditing(false); setDraft(idea.content); }}
|
|
||||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-elevated text-muted"
|
|
||||||
>
|
|
||||||
<X size={12} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span className="text-sm">💡</span>
|
|
||||||
<p className="min-w-0 flex-1 truncate text-sm text-secondary">{idea.content}</p>
|
|
||||||
<button
|
|
||||||
onClick={() => setEditing(true)}
|
|
||||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-purple-400"
|
|
||||||
>
|
|
||||||
<Pencil size={12} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => onDelete(idea.id)}
|
|
||||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-rose-400"
|
|
||||||
>
|
|
||||||
<Trash2 size={12} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MyIdeasSection({
|
|
||||||
ideas,
|
|
||||||
onEdit,
|
|
||||||
onDelete,
|
|
||||||
}: {
|
|
||||||
ideas: MyIdea[];
|
|
||||||
onEdit: (id: string, content: string) => Promise<void>;
|
|
||||||
onDelete: (id: string) => Promise<void>;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="mt-6 w-full max-w-sm"
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ delay: 0.2 }}
|
|
||||||
>
|
|
||||||
<div className="mb-2 flex items-center gap-2">
|
|
||||||
<Package size={13} className="text-purple-400" />
|
|
||||||
<h3 className="text-xs font-bold tracking-wider text-muted">
|
|
||||||
我投入的想法（{ideas.length}）
|
|
||||||
</h3>
|
|
||||||
<div className="h-px flex-1 bg-border" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1.5">
|
|
||||||
<AnimatePresence>
|
|
||||||
{ideas.map((idea) => (
|
|
||||||
<MyIdeaItem key={idea.id} idea={idea} onEdit={onEdit} onDelete={onDelete} />
|
|
||||||
))}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function BlindboxRoomPage() {
|
export default function BlindboxRoomPage() {
|
||||||
const { code } = useParams<{ code: string }>();
|
const { code } = useParams<{ code: string }>();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -729,68 +603,16 @@ export default function BlindboxRoomPage() {
|
|||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
|
||||||
{/* My ideas in pool */}
|
|
||||||
{myIdeas.length > 0 && phase === "pool" && (
|
{myIdeas.length > 0 && phase === "pool" && (
|
||||||
<MyIdeasSection
|
<BlindboxMyIdeas
|
||||||
ideas={myIdeas}
|
ideas={myIdeas}
|
||||||
onEdit={handleEditIdea}
|
onEdit={handleEditIdea}
|
||||||
onDelete={handleDeleteIdea}
|
onDelete={handleDeleteIdea}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* History */}
|
{phase !== "shaking" && (
|
||||||
{drawnHistory.length > 0 && phase !== "shaking" && (
|
<BlindboxDrawnHistory items={drawnHistory} />
|
||||||
<motion.div
|
|
||||||
className="mt-10 w-full max-w-sm"
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ delay: 0.3 }}
|
|
||||||
>
|
|
||||||
<div className="mb-3 flex items-center gap-2">
|
|
||||||
<Trophy size={13} className="text-amber-400" />
|
|
||||||
<h3 className="text-xs font-bold tracking-wider text-muted">
|
|
||||||
履约记录
|
|
||||||
</h3>
|
|
||||||
<div className="h-px flex-1 bg-border" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
{drawnHistory.map((item, i) => (
|
|
||||||
<motion.div
|
|
||||||
key={item.id}
|
|
||||||
className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ delay: i * 0.06 }}
|
|
||||||
>
|
|
||||||
<span className="mt-0.5 text-sm">🏆</span>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p className="text-sm font-medium text-secondary">
|
|
||||||
{item.content}
|
|
||||||
</p>
|
|
||||||
<div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
|
|
||||||
{item.user && (
|
|
||||||
<span>{item.user.avatar} {item.user.username} 投入</span>
|
|
||||||
)}
|
|
||||||
{item.drawnBy && (
|
|
||||||
<>
|
|
||||||
<span>·</span>
|
|
||||||
<span>{item.drawnBy.avatar} {item.drawnBy.username} 抽中</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<span>·</span>
|
|
||||||
<span>
|
|
||||||
{new Date(item.createdAt).toLocaleDateString("zh-CN", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
weekday: "short",
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
+19
-184
@@ -6,12 +6,7 @@ import { motion, AnimatePresence } from "framer-motion";
|
|||||||
import {
|
import {
|
||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
Mail,
|
Mail,
|
||||||
Clock,
|
|
||||||
Star,
|
|
||||||
MapPin,
|
|
||||||
Trash2,
|
|
||||||
Loader2,
|
Loader2,
|
||||||
ChevronDown,
|
|
||||||
LogOut,
|
LogOut,
|
||||||
Lock,
|
Lock,
|
||||||
Edit3,
|
Edit3,
|
||||||
@@ -20,25 +15,16 @@ import {
|
|||||||
Eye,
|
Eye,
|
||||||
EyeOff,
|
EyeOff,
|
||||||
Zap,
|
Zap,
|
||||||
ClipboardList,
|
|
||||||
Heart,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import EmptyState from "@/components/EmptyState";
|
|
||||||
import Card from "@/components/Card";
|
import Card from "@/components/Card";
|
||||||
import Input from "@/components/Input";
|
import Input from "@/components/Input";
|
||||||
|
import ProfileHistoryCard from "@/components/ProfileHistoryCard";
|
||||||
|
import ProfileFavoritesCard from "@/components/ProfileFavoritesCard";
|
||||||
import { useToast } from "@/hooks/useToast";
|
import { useToast } from "@/hooks/useToast";
|
||||||
import RestaurantImage from "@/components/RestaurantImage";
|
|
||||||
import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
|
import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
|
||||||
import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
|
import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
|
||||||
import { getAvatarBg, AVATARS } from "@/lib/avatars";
|
import { getAvatarBg, AVATARS } from "@/lib/avatars";
|
||||||
import { buildNavUrl } from "@/lib/navigation";
|
import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord } from "@/types";
|
||||||
import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
|
|
||||||
|
|
||||||
function firstImage(r: Restaurant): string {
|
|
||||||
if (r.images?.length > 0) return r.images[0];
|
|
||||||
const legacy = (r as unknown as Record<string, unknown>).image;
|
|
||||||
return typeof legacy === "string" ? legacy : "";
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -499,175 +485,24 @@ export default function ProfilePage() {
|
|||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Decision History */}
|
<ProfileHistoryCard
|
||||||
<Card animated className="mt-4" delay={0.15}>
|
history={history}
|
||||||
<button
|
loading={historyLoading}
|
||||||
onClick={() => setShowHistory((v) => !v)}
|
open={showHistory}
|
||||||
className="flex w-full items-center justify-between"
|
onToggle={() => setShowHistory((v) => !v)}
|
||||||
>
|
onEmpty={() => router.push("/blindbox")}
|
||||||
<div className="flex items-center gap-2">
|
delay={0.15}
|
||||||
<Clock size={15} className="text-muted" />
|
/>
|
||||||
<h3 className="text-sm font-semibold text-secondary">
|
|
||||||
决策记录 {history.length > 0 && `(${history.length})`}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<motion.span
|
|
||||||
animate={{ rotate: showHistory ? 180 : 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
className="text-muted"
|
|
||||||
>
|
|
||||||
<ChevronDown size={16} />
|
|
||||||
</motion.span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<AnimatePresence>
|
<ProfileFavoritesCard
|
||||||
{showHistory && (
|
favorites={favorites}
|
||||||
<motion.div
|
loading={favLoading}
|
||||||
initial={{ height: 0, opacity: 0 }}
|
open={showFavorites}
|
||||||
animate={{ height: "auto", opacity: 1 }}
|
onToggle={() => setShowFavorites((v) => !v)}
|
||||||
exit={{ height: 0, opacity: 0 }}
|
onRemove={handleRemoveFavorite}
|
||||||
transition={{ duration: 0.2 }}
|
onEmpty={() => router.push("/blindbox")}
|
||||||
className="overflow-hidden"
|
delay={0.2}
|
||||||
>
|
|
||||||
{historyLoading ? (
|
|
||||||
<div className="mt-3 flex flex-col gap-2">
|
|
||||||
<RecordItemSkeleton />
|
|
||||||
<RecordItemSkeleton />
|
|
||||||
</div>
|
|
||||||
) : history.length === 0 ? (
|
|
||||||
<EmptyState
|
|
||||||
icon={ClipboardList}
|
|
||||||
title="还没有决策记录"
|
|
||||||
subtitle="创建房间开始一起选餐厅"
|
|
||||||
ctaLabel="去创建第一个房间"
|
|
||||||
onCta={() => router.push("/blindbox")}
|
|
||||||
color="purple"
|
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
<div className="mt-3 flex flex-col gap-2">
|
|
||||||
{history.map((d) => (
|
|
||||||
<a
|
|
||||||
key={d.id}
|
|
||||||
href={buildNavUrl(d.restaurantData)}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
|
|
||||||
>
|
|
||||||
{firstImage(d.restaurantData) && (
|
|
||||||
<RestaurantImage
|
|
||||||
src={firstImage(d.restaurantData)}
|
|
||||||
alt={d.restaurantName}
|
|
||||||
className="h-12 w-12 shrink-0 rounded-lg object-cover"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
|
||||||
<p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
|
|
||||||
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
|
|
||||||
<span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
|
|
||||||
<span>{d.participants} 人参与</span>
|
|
||||||
<span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Favorites */}
|
|
||||||
<Card animated className="mt-4" delay={0.2}>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowFavorites((v) => !v)}
|
|
||||||
className="flex w-full items-center justify-between"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Star size={15} className="text-muted" />
|
|
||||||
<h3 className="text-sm font-semibold text-secondary">
|
|
||||||
收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<motion.span
|
|
||||||
animate={{ rotate: showFavorites ? 180 : 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
className="text-muted"
|
|
||||||
>
|
|
||||||
<ChevronDown size={16} />
|
|
||||||
</motion.span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<AnimatePresence>
|
|
||||||
{showFavorites && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ height: 0, opacity: 0 }}
|
|
||||||
animate={{ height: "auto", opacity: 1 }}
|
|
||||||
exit={{ height: 0, opacity: 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
className="overflow-hidden"
|
|
||||||
>
|
|
||||||
{favLoading ? (
|
|
||||||
<div className="mt-3 flex flex-col gap-2">
|
|
||||||
<RecordItemSkeleton />
|
|
||||||
<RecordItemSkeleton />
|
|
||||||
</div>
|
|
||||||
) : favorites.length === 0 ? (
|
|
||||||
<EmptyState
|
|
||||||
icon={Heart}
|
|
||||||
title="还没有收藏的餐厅"
|
|
||||||
subtitle="在匹配结果中收藏喜欢的店"
|
|
||||||
ctaLabel="去创建第一个房间"
|
|
||||||
onCta={() => router.push("/blindbox")}
|
|
||||||
color="amber"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="mt-3 flex flex-col gap-2">
|
|
||||||
{favorites.map((f) => {
|
|
||||||
const r = f.restaurantData;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={f.id}
|
|
||||||
className="flex gap-3 rounded-xl bg-elevated p-2.5"
|
|
||||||
>
|
|
||||||
{firstImage(r) && (
|
|
||||||
<RestaurantImage
|
|
||||||
src={firstImage(r)}
|
|
||||||
alt={r.name}
|
|
||||||
className="h-12 w-12 shrink-0 rounded-lg object-cover"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
|
||||||
<p className="truncate text-sm font-semibold text-heading">{r.name}</p>
|
|
||||||
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
|
|
||||||
<span className="flex items-center gap-0.5">
|
|
||||||
<Star size={10} className="fill-amber-400 text-amber-400" />
|
|
||||||
{r.rating}
|
|
||||||
</span>
|
|
||||||
<span>{r.price}</span>
|
|
||||||
{r.distance && (
|
|
||||||
<span className="flex items-center gap-0.5">
|
|
||||||
<MapPin size={10} />
|
|
||||||
{r.distance}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => handleRemoveFavorite(f.id)}
|
|
||||||
className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
|
|
||||||
>
|
|
||||||
<Trash2 size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Logout */}
|
{/* Logout */}
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
@@ -0,0 +1,70 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Trophy } from "lucide-react";
|
||||||
|
|
||||||
|
export interface DrawnIdea {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
createdAt: string;
|
||||||
|
user?: { id: string; username: string; avatar: string };
|
||||||
|
drawnBy?: { id: string; username: string; avatar: string } | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BlindboxDrawnHistory({ items }: { items: DrawnIdea[] }) {
|
||||||
|
if (items.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="mt-10 w-full max-w-sm"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<Trophy size={13} className="text-amber-400" />
|
||||||
|
<h3 className="text-xs font-bold tracking-wider text-muted">
|
||||||
|
履约记录
|
||||||
|
</h3>
|
||||||
|
<div className="h-px flex-1 bg-border" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={item.id}
|
||||||
|
className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: i * 0.06 }}
|
||||||
|
>
|
||||||
|
<span className="mt-0.5 text-sm">🏆</span>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-sm font-medium text-secondary">
|
||||||
|
{item.content}
|
||||||
|
</p>
|
||||||
|
<div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
|
||||||
|
{item.user && (
|
||||||
|
<span>{item.user.avatar} {item.user.username} 投入</span>
|
||||||
|
)}
|
||||||
|
{item.drawnBy && (
|
||||||
|
<>
|
||||||
|
<span>·</span>
|
||||||
|
<span>{item.drawnBy.avatar} {item.drawnBy.username} 抽中</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<span>·</span>
|
||||||
|
<span>
|
||||||
|
{new Date(item.createdAt).toLocaleDateString("zh-CN", {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
weekday: "short",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { Package, Loader2, Pencil, Trash2, Check, X } from "lucide-react";
|
||||||
|
|
||||||
|
export interface MyIdea {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MyIdeaItem({
|
||||||
|
idea,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
}: {
|
||||||
|
idea: MyIdea;
|
||||||
|
onEdit: (id: string, content: string) => Promise<void>;
|
||||||
|
onDelete: (id: string) => Promise<void>;
|
||||||
|
}) {
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const [draft, setDraft] = useState(idea.content);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!draft.trim() || saving) return;
|
||||||
|
setSaving(true);
|
||||||
|
await onEdit(idea.id, draft);
|
||||||
|
setSaving(false);
|
||||||
|
setEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
className="flex items-center gap-2 rounded-xl bg-surface/60 px-3 py-2.5 ring-1 ring-border/80"
|
||||||
|
initial={{ opacity: 0, y: -8 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
>
|
||||||
|
{editing ? (
|
||||||
|
<>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={draft}
|
||||||
|
onChange={(e) => setDraft(e.target.value.slice(0, 200))}
|
||||||
|
onKeyDown={(e) => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") { setEditing(false); setDraft(idea.content); } }}
|
||||||
|
maxLength={200}
|
||||||
|
autoFocus
|
||||||
|
className="h-8 min-w-0 flex-1 rounded-lg bg-elevated px-2.5 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-purple-600/50"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving || !draft.trim()}
|
||||||
|
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-purple-600 text-white disabled:opacity-40"
|
||||||
|
>
|
||||||
|
{saving ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setEditing(false); setDraft(idea.content); }}
|
||||||
|
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-elevated text-muted"
|
||||||
|
>
|
||||||
|
<X size={12} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="text-sm">💡</span>
|
||||||
|
<p className="min-w-0 flex-1 truncate text-sm text-secondary">{idea.content}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setEditing(true)}
|
||||||
|
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-purple-400"
|
||||||
|
>
|
||||||
|
<Pencil size={12} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => onDelete(idea.id)}
|
||||||
|
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-rose-400"
|
||||||
|
>
|
||||||
|
<Trash2 size={12} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BlindboxMyIdeas({
|
||||||
|
ideas,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
}: {
|
||||||
|
ideas: MyIdea[];
|
||||||
|
onEdit: (id: string, content: string) => Promise<void>;
|
||||||
|
onDelete: (id: string) => Promise<void>;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="mt-6 w-full max-w-sm"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<div className="mb-2 flex items-center gap-2">
|
||||||
|
<Package size={13} className="text-purple-400" />
|
||||||
|
<h3 className="text-xs font-bold tracking-wider text-muted">
|
||||||
|
我投入的想法（{ideas.length}）
|
||||||
|
</h3>
|
||||||
|
<div className="h-px flex-1 bg-border" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1.5">
|
||||||
|
<AnimatePresence>
|
||||||
|
{ideas.map((idea) => (
|
||||||
|
<MyIdeaItem key={idea.id} idea={idea} onEdit={onEdit} onDelete={onDelete} />
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -12,8 +12,6 @@ import {
|
|||||||
Clock,
|
Clock,
|
||||||
Trophy,
|
Trophy,
|
||||||
RotateCcw,
|
RotateCcw,
|
||||||
SearchX,
|
|
||||||
Home,
|
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
Swords,
|
Swords,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
@@ -35,6 +33,8 @@ import ShareCardModal from "@/components/ShareCardModal";
|
|||||||
import RestaurantImage from "@/components/RestaurantImage";
|
import RestaurantImage from "@/components/RestaurantImage";
|
||||||
import AuthModal from "@/components/AuthModal";
|
import AuthModal from "@/components/AuthModal";
|
||||||
import Button from "@/components/Button";
|
import Button from "@/components/Button";
|
||||||
|
import NoMatchResult from "@/components/NoMatchResult";
|
||||||
|
import RunnerUpCard from "@/components/RunnerUpCard";
|
||||||
import { buildNavUrl } from "@/lib/navigation";
|
import { buildNavUrl } from "@/lib/navigation";
|
||||||
import { useToast } from "@/hooks/useToast";
|
import { useToast } from "@/hooks/useToast";
|
||||||
|
|
||||||
@@ -53,127 +53,6 @@ interface MatchResultProps {
|
|||||||
scene?: SceneType;
|
scene?: SceneType;
|
||||||
}
|
}
|
||||||
|
|
||||||
function NoMatchResult({
|
|
||||||
onReset,
|
|
||||||
resetting,
|
|
||||||
}: {
|
|
||||||
onReset: () => Promise<void>;
|
|
||||||
resetting: boolean;
|
|
||||||
}) {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ duration: 0.4 }}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
initial={{ scale: 0, rotate: -20 }}
|
|
||||||
animate={{ scale: 1, rotate: 0 }}
|
|
||||||
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
|
|
||||||
>
|
|
||||||
<SearchX size={56} className="text-muted" />
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.h1
|
|
||||||
className="mt-4 text-3xl font-black text-heading"
|
|
||||||
initial={{ y: 30, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{ delay: 0.35 }}
|
|
||||||
>
|
|
||||||
都不太满意
|
|
||||||
</motion.h1>
|
|
||||||
|
|
||||||
<motion.p
|
|
||||||
className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
|
|
||||||
initial={{ y: 20, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{ delay: 0.45 }}
|
|
||||||
>
|
|
||||||
这一轮没有店被选中，换个范围或类型再试试？
|
|
||||||
</motion.p>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
className="mt-8 flex w-full max-w-xs flex-col gap-3"
|
|
||||||
initial={{ y: 30, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{ delay: 0.55 }}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
onClick={onReset}
|
|
||||||
shape="pill"
|
|
||||||
loading={resetting}
|
|
||||||
loadingText="重置中..."
|
|
||||||
icon={<RotateCcw size={15} />}
|
|
||||||
className="px-8 py-3"
|
|
||||||
>
|
|
||||||
再来一轮
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={() => router.push("/")}
|
|
||||||
variant="secondary"
|
|
||||||
shape="pill"
|
|
||||||
icon={<Home size={15} />}
|
|
||||||
className="px-8 py-3"
|
|
||||||
>
|
|
||||||
换个条件重新搜
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function RunnerUpCard({
|
|
||||||
restaurant,
|
|
||||||
likes,
|
|
||||||
userCount,
|
|
||||||
}: {
|
|
||||||
restaurant: Restaurant;
|
|
||||||
likes: number;
|
|
||||||
userCount: number;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
href={buildNavUrl(restaurant)}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
|
|
||||||
>
|
|
||||||
{restaurant.images?.[0] && (
|
|
||||||
<RestaurantImage
|
|
||||||
src={restaurant.images[0]}
|
|
||||||
alt={restaurant.name}
|
|
||||||
className="h-16 w-16 shrink-0 rounded-lg object-cover"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
|
||||||
<p className="truncate text-sm font-bold text-heading">
|
|
||||||
{restaurant.name}
|
|
||||||
</p>
|
|
||||||
<div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
|
|
||||||
<span className="flex items-center gap-0.5">
|
|
||||||
<Star size={11} className="fill-yellow-300 text-yellow-300" />
|
|
||||||
{restaurant.rating}
|
|
||||||
</span>
|
|
||||||
<span>{restaurant.price}</span>
|
|
||||||
{restaurant.distance && (
|
|
||||||
<span className="flex items-center gap-0.5">
|
|
||||||
<MapPin size={11} />
|
|
||||||
{restaurant.distance}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="mt-0.5 text-[11px] font-medium text-amber-400">
|
|
||||||
{likes}/{userCount} 人想去
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function MatchResult({
|
export default function MatchResult({
|
||||||
restaurant,
|
restaurant,
|
||||||
matchType,
|
matchType,
|
||||||
|
|||||||
@@ -0,0 +1,78 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { SearchX, RotateCcw, Home } from "lucide-react";
|
||||||
|
import Button from "@/components/Button";
|
||||||
|
|
||||||
|
interface NoMatchResultProps {
|
||||||
|
onReset: () => Promise<void>;
|
||||||
|
resetting: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NoMatchResult({ onReset, resetting }: NoMatchResultProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.4 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0, rotate: -20 }}
|
||||||
|
animate={{ scale: 1, rotate: 0 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<SearchX size={56} className="text-muted" />
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
className="mt-4 text-3xl font-black text-heading"
|
||||||
|
initial={{ y: 30, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.35 }}
|
||||||
|
>
|
||||||
|
都不太满意
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.45 }}
|
||||||
|
>
|
||||||
|
这一轮没有店被选中，换个范围或类型再试试？
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="mt-8 flex w-full max-w-xs flex-col gap-3"
|
||||||
|
initial={{ y: 30, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.55 }}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
onClick={onReset}
|
||||||
|
shape="pill"
|
||||||
|
loading={resetting}
|
||||||
|
loadingText="重置中..."
|
||||||
|
icon={<RotateCcw size={15} />}
|
||||||
|
className="px-8 py-3"
|
||||||
|
>
|
||||||
|
再来一轮
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
variant="secondary"
|
||||||
|
shape="pill"
|
||||||
|
icon={<Home size={15} />}
|
||||||
|
className="px-8 py-3"
|
||||||
|
>
|
||||||
|
换个条件重新搜
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { Star, MapPin, ChevronDown, Trash2, Heart } from "lucide-react";
|
||||||
|
import Card from "@/components/Card";
|
||||||
|
import EmptyState from "@/components/EmptyState";
|
||||||
|
import RestaurantImage from "@/components/RestaurantImage";
|
||||||
|
import { RecordItemSkeleton } from "@/components/Skeleton";
|
||||||
|
import type { FavoriteRecord, Restaurant } from "@/types";
|
||||||
|
|
||||||
|
function firstImage(r: Restaurant): string {
|
||||||
|
if (r.images?.length > 0) return r.images[0];
|
||||||
|
const legacy = (r as unknown as Record<string, unknown>).image;
|
||||||
|
return typeof legacy === "string" ? legacy : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProfileFavoritesCardProps {
|
||||||
|
favorites: FavoriteRecord[];
|
||||||
|
loading: boolean;
|
||||||
|
open: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
onRemove: (id: string) => Promise<void>;
|
||||||
|
onEmpty: () => void;
|
||||||
|
delay?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProfileFavoritesCard({
|
||||||
|
favorites,
|
||||||
|
loading,
|
||||||
|
open,
|
||||||
|
onToggle,
|
||||||
|
onRemove,
|
||||||
|
onEmpty,
|
||||||
|
delay,
|
||||||
|
}: ProfileFavoritesCardProps) {
|
||||||
|
return (
|
||||||
|
<Card animated className="mt-4" delay={delay}>
|
||||||
|
<button
|
||||||
|
onClick={onToggle}
|
||||||
|
className="flex w-full items-center justify-between"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Star size={15} className="text-muted" />
|
||||||
|
<h3 className="text-sm font-semibold text-secondary">
|
||||||
|
收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<motion.span
|
||||||
|
animate={{ rotate: open ? 180 : 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="text-muted"
|
||||||
|
>
|
||||||
|
<ChevronDown size={16} />
|
||||||
|
</motion.span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{open && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ height: 0, opacity: 0 }}
|
||||||
|
animate={{ height: "auto", opacity: 1 }}
|
||||||
|
exit={{ height: 0, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="overflow-hidden"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="mt-3 flex flex-col gap-2">
|
||||||
|
<RecordItemSkeleton />
|
||||||
|
<RecordItemSkeleton />
|
||||||
|
</div>
|
||||||
|
) : favorites.length === 0 ? (
|
||||||
|
<EmptyState
|
||||||
|
icon={Heart}
|
||||||
|
title="还没有收藏的餐厅"
|
||||||
|
subtitle="在匹配结果中收藏喜欢的店"
|
||||||
|
ctaLabel="去创建第一个房间"
|
||||||
|
onCta={onEmpty}
|
||||||
|
color="amber"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="mt-3 flex flex-col gap-2">
|
||||||
|
{favorites.map((f) => {
|
||||||
|
const r = f.restaurantData;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={f.id}
|
||||||
|
className="flex gap-3 rounded-xl bg-elevated p-2.5"
|
||||||
|
>
|
||||||
|
{firstImage(r) && (
|
||||||
|
<RestaurantImage
|
||||||
|
src={firstImage(r)}
|
||||||
|
alt={r.name}
|
||||||
|
className="h-12 w-12 shrink-0 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
||||||
|
<p className="truncate text-sm font-semibold text-heading">{r.name}</p>
|
||||||
|
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
|
||||||
|
<span className="flex items-center gap-0.5">
|
||||||
|
<Star size={10} className="fill-amber-400 text-amber-400" />
|
||||||
|
{r.rating}
|
||||||
|
</span>
|
||||||
|
<span>{r.price}</span>
|
||||||
|
{r.distance && (
|
||||||
|
<span className="flex items-center gap-0.5">
|
||||||
|
<MapPin size={10} />
|
||||||
|
{r.distance}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => onRemove(f.id)}
|
||||||
|
className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
|
||||||
|
>
|
||||||
|
<Trash2 size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { Clock, ChevronDown, ClipboardList } from "lucide-react";
|
||||||
|
import Card from "@/components/Card";
|
||||||
|
import EmptyState from "@/components/EmptyState";
|
||||||
|
import RestaurantImage from "@/components/RestaurantImage";
|
||||||
|
import { RecordItemSkeleton } from "@/components/Skeleton";
|
||||||
|
import { buildNavUrl } from "@/lib/navigation";
|
||||||
|
import type { DecisionRecord, Restaurant } from "@/types";
|
||||||
|
|
||||||
|
function firstImage(r: Restaurant): string {
|
||||||
|
if (r.images?.length > 0) return r.images[0];
|
||||||
|
const legacy = (r as unknown as Record<string, unknown>).image;
|
||||||
|
return typeof legacy === "string" ? legacy : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProfileHistoryCardProps {
|
||||||
|
history: DecisionRecord[];
|
||||||
|
loading: boolean;
|
||||||
|
open: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
onEmpty: () => void;
|
||||||
|
delay?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProfileHistoryCard({
|
||||||
|
history,
|
||||||
|
loading,
|
||||||
|
open,
|
||||||
|
onToggle,
|
||||||
|
onEmpty,
|
||||||
|
delay,
|
||||||
|
}: ProfileHistoryCardProps) {
|
||||||
|
return (
|
||||||
|
<Card animated className="mt-4" delay={delay}>
|
||||||
|
<button
|
||||||
|
onClick={onToggle}
|
||||||
|
className="flex w-full items-center justify-between"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock size={15} className="text-muted" />
|
||||||
|
<h3 className="text-sm font-semibold text-secondary">
|
||||||
|
决策记录 {history.length > 0 && `(${history.length})`}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<motion.span
|
||||||
|
animate={{ rotate: open ? 180 : 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="text-muted"
|
||||||
|
>
|
||||||
|
<ChevronDown size={16} />
|
||||||
|
</motion.span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{open && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ height: 0, opacity: 0 }}
|
||||||
|
animate={{ height: "auto", opacity: 1 }}
|
||||||
|
exit={{ height: 0, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="overflow-hidden"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="mt-3 flex flex-col gap-2">
|
||||||
|
<RecordItemSkeleton />
|
||||||
|
<RecordItemSkeleton />
|
||||||
|
</div>
|
||||||
|
) : history.length === 0 ? (
|
||||||
|
<EmptyState
|
||||||
|
icon={ClipboardList}
|
||||||
|
title="还没有决策记录"
|
||||||
|
subtitle="创建房间开始一起选餐厅"
|
||||||
|
ctaLabel="去创建第一个房间"
|
||||||
|
onCta={onEmpty}
|
||||||
|
color="purple"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="mt-3 flex flex-col gap-2">
|
||||||
|
{history.map((d) => (
|
||||||
|
<a
|
||||||
|
key={d.id}
|
||||||
|
href={buildNavUrl(d.restaurantData)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
|
||||||
|
>
|
||||||
|
{firstImage(d.restaurantData) && (
|
||||||
|
<RestaurantImage
|
||||||
|
src={firstImage(d.restaurantData)}
|
||||||
|
alt={d.restaurantName}
|
||||||
|
className="h-12 w-12 shrink-0 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
||||||
|
<p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
|
||||||
|
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
|
||||||
|
<span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
|
||||||
|
<span>{d.participants} 人参与</span>
|
||||||
|
<span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Star, MapPin } from "lucide-react";
|
||||||
|
import type { Restaurant } from "@/types";
|
||||||
|
import RestaurantImage from "@/components/RestaurantImage";
|
||||||
|
import { buildNavUrl } from "@/lib/navigation";
|
||||||
|
|
||||||
|
interface RunnerUpCardProps {
|
||||||
|
restaurant: Restaurant;
|
||||||
|
likes: number;
|
||||||
|
userCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RunnerUpCard({ restaurant, likes, userCount }: RunnerUpCardProps) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={buildNavUrl(restaurant)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
|
||||||
|
>
|
||||||
|
{restaurant.images?.[0] && (
|
||||||
|
<RestaurantImage
|
||||||
|
src={restaurant.images[0]}
|
||||||
|
alt={restaurant.name}
|
||||||
|
className="h-16 w-16 shrink-0 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="flex min-w-0 flex-1 flex-col justify-center">
|
||||||
|
<p className="truncate text-sm font-bold text-heading">
|
||||||
|
{restaurant.name}
|
||||||
|
</p>
|
||||||
|
<div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
|
||||||
|
<span className="flex items-center gap-0.5">
|
||||||
|
<Star size={11} className="fill-yellow-300 text-yellow-300" />
|
||||||
|
{restaurant.rating}
|
||||||
|
</span>
|
||||||
|
<span>{restaurant.price}</span>
|
||||||
|
{restaurant.distance && (
|
||||||
|
<span className="flex items-center gap-0.5">
|
||||||
|
<MapPin size={11} />
|
||||||
|
{restaurant.distance}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="mt-0.5 text-[11px] font-medium text-amber-400">
|
||||||
|
{likes}/{userCount} 人想去
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user