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,
|
||||
Package,
|
||||
Flame,
|
||||
Trophy,
|
||||
Users,
|
||||
Share2,
|
||||
LogIn,
|
||||
Copy,
|
||||
Trash2,
|
||||
LogOut,
|
||||
Pencil,
|
||||
Check,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import confetti from "canvas-confetti";
|
||||
import { getCachedProfile, isRegistered } from "@/lib/userId";
|
||||
import ShareCardModal from "@/components/ShareCardModal";
|
||||
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 { useShare } from "@/hooks/useShare";
|
||||
import { BlindboxRoomSkeleton } from "@/components/Skeleton";
|
||||
@@ -38,132 +36,8 @@ interface RoomInfo {
|
||||
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";
|
||||
|
||||
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() {
|
||||
const { code } = useParams<{ code: string }>();
|
||||
const router = useRouter();
|
||||
@@ -729,68 +603,16 @@ export default function BlindboxRoomPage() {
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* My ideas in pool */}
|
||||
{myIdeas.length > 0 && phase === "pool" && (
|
||||
<MyIdeasSection
|
||||
<BlindboxMyIdeas
|
||||
ideas={myIdeas}
|
||||
onEdit={handleEditIdea}
|
||||
onDelete={handleDeleteIdea}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* History */}
|
||||
{drawnHistory.length > 0 && phase !== "shaking" && (
|
||||
<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>
|
||||
{phase !== "shaking" && (
|
||||
<BlindboxDrawnHistory items={drawnHistory} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
+19
-184
@@ -6,12 +6,7 @@ import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Mail,
|
||||
Clock,
|
||||
Star,
|
||||
MapPin,
|
||||
Trash2,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
LogOut,
|
||||
Lock,
|
||||
Edit3,
|
||||
@@ -20,25 +15,16 @@ import {
|
||||
Eye,
|
||||
EyeOff,
|
||||
Zap,
|
||||
ClipboardList,
|
||||
Heart,
|
||||
} from "lucide-react";
|
||||
import EmptyState from "@/components/EmptyState";
|
||||
import Card from "@/components/Card";
|
||||
import Input from "@/components/Input";
|
||||
import ProfileHistoryCard from "@/components/ProfileHistoryCard";
|
||||
import ProfileFavoritesCard from "@/components/ProfileFavoritesCard";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import RestaurantImage from "@/components/RestaurantImage";
|
||||
import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
|
||||
import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
|
||||
import { getAvatarBg, AVATARS } from "@/lib/avatars";
|
||||
import { buildNavUrl } from "@/lib/navigation";
|
||||
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 : "";
|
||||
}
|
||||
import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord } from "@/types";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const router = useRouter();
|
||||
@@ -499,175 +485,24 @@ export default function ProfilePage() {
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Decision History */}
|
||||
<Card animated className="mt-4" delay={0.15}>
|
||||
<button
|
||||
onClick={() => setShowHistory((v) => !v)}
|
||||
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: showHistory ? 180 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="text-muted"
|
||||
>
|
||||
<ChevronDown size={16} />
|
||||
</motion.span>
|
||||
</button>
|
||||
<ProfileHistoryCard
|
||||
history={history}
|
||||
loading={historyLoading}
|
||||
open={showHistory}
|
||||
onToggle={() => setShowHistory((v) => !v)}
|
||||
onEmpty={() => router.push("/blindbox")}
|
||||
delay={0.15}
|
||||
/>
|
||||
|
||||
<AnimatePresence>
|
||||
{showHistory && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
{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"
|
||||
<ProfileFavoritesCard
|
||||
favorites={favorites}
|
||||
loading={favLoading}
|
||||
open={showFavorites}
|
||||
onToggle={() => setShowFavorites((v) => !v)}
|
||||
onRemove={handleRemoveFavorite}
|
||||
onEmpty={() => router.push("/blindbox")}
|
||||
delay={0.2}
|
||||
/>
|
||||
) : (
|
||||
<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 */}
|
||||
<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,
|
||||
Trophy,
|
||||
RotateCcw,
|
||||
SearchX,
|
||||
Home,
|
||||
ChevronDown,
|
||||
Swords,
|
||||
RefreshCw,
|
||||
@@ -35,6 +33,8 @@ import ShareCardModal from "@/components/ShareCardModal";
|
||||
import RestaurantImage from "@/components/RestaurantImage";
|
||||
import AuthModal from "@/components/AuthModal";
|
||||
import Button from "@/components/Button";
|
||||
import NoMatchResult from "@/components/NoMatchResult";
|
||||
import RunnerUpCard from "@/components/RunnerUpCard";
|
||||
import { buildNavUrl } from "@/lib/navigation";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
|
||||
@@ -53,127 +53,6 @@ interface MatchResultProps {
|
||||
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({
|
||||
restaurant,
|
||||
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