refactor: 拆分 MatchResult、ProfilePage、BlindboxRoomPage 大组件
- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行） - ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行） - BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）
This commit is contained in:
+20
-185
@@ -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"
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
<ProfileFavoritesCard
|
||||
favorites={favorites}
|
||||
loading={favLoading}
|
||||
open={showFavorites}
|
||||
onToggle={() => setShowFavorites((v) => !v)}
|
||||
onRemove={handleRemoveFavorite}
|
||||
onEmpty={() => router.push("/blindbox")}
|
||||
delay={0.2}
|
||||
/>
|
||||
|
||||
{/* Logout */}
|
||||
<motion.div
|
||||
|
||||
Reference in New Issue
Block a user