refactor: 拆分 MatchResult、ProfilePage、BlindboxRoomPage 大组件

- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行） - ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行） - BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）
2026-02-26 19:59:35 +08:00
parent 423b94440d
commit 2a3cef890c
9 changed files with 589 additions and 491 deletions
@@ -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>
+  );
+}