feat: best 匹配结果页展示 Top 3 候选排行，支持折叠查看备选餐厅

2026-02-24 19:30:10 +08:00
parent 30329df136
commit 5d297684fc
6 changed files with 278 additions and 170 deletions
@@ -26,18 +26,20 @@ export async function GET(
    let match = data.match;
    let matchType: MatchType = null;
    let matchLikes = 0;
+    let runnerUps: { id: string; likes: number }[] = [];

    if (match) {
      matchType = "unanimous";
      matchLikes = data.users.length;
    } else if (allFinished && data.restaurants.length > 0) {
-      const best = findBestMatch(data.likes, data.restaurants);
-      if (best.likes > 0) {
-        match = best.id;
+      const ranked = rankRestaurants(data.likes, data.restaurants);
+      if (ranked[0].likes > 0) {
+        match = ranked[0].id;
        matchType = "best";
-        matchLikes = best.likes;
+        matchLikes = ranked[0].likes;
+        runnerUps = ranked.slice(1, 3).filter((r) => r.likes > 0);
      } else {
-        match = best.id;
+        match = ranked[0].id;
        matchType = "no_match";
        matchLikes = 0;
      }
@@ -56,6 +58,7 @@ export async function GET(
      match,
      matchType,
      matchLikes,
+      runnerUps,
      likeCounts,
      swipeCounts: data.swipeCounts,
      restaurants: data.restaurants,
@@ -69,26 +72,12 @@ export async function GET(
  }
 }

-function findBestMatch(
+function rankRestaurants(
  likes: Record<string, string[]>,
  restaurants: { id: string; rating: number }[],
-): { id: string; likes: number } {
-  let bestId = restaurants[0].id;
-  let bestLikes = 0;
-  let bestRating = restaurants[0].rating;
-
-  for (const r of restaurants) {
-    const count = likes[r.id]?.length ?? 0;
-
-    if (
-      count > bestLikes ||
-      (count === bestLikes && r.rating > bestRating)
-    ) {
-      bestId = r.id;
-      bestLikes = count;
-      bestRating = r.rating;
-    }
-  }
-
-  return { id: bestId, likes: bestLikes };
+): { id: string; likes: number }[] {
+  return restaurants
+    .map((r) => ({ id: r.id, likes: likes[r.id]?.length ?? 0, rating: r.rating }))
+    .sort((a, b) => b.likes - a.likes || b.rating - a.rating)
+    .map(({ id, likes: l }) => ({ id, likes: l }));
 }
@@ -15,7 +15,7 @@ export default function RoomPage() {
  const [joined, setJoined] = useState(false);

  const {
-    userCount, match, matchType, matchLikes, likeCounts, swipeCounts, restaurants, mutate,
+    userCount, match, matchType, matchLikes, runnerUps, likeCounts, swipeCounts, restaurants, mutate,
  } = useRoomPolling(roomId);

  useEffect(() => {
@@ -57,6 +57,7 @@ export default function RoomPage() {
        matchedRestaurantId={match}
        matchType={matchType}
        matchLikes={matchLikes}
+        runnerUps={runnerUps}
        likeCounts={likeCounts}
        swipeCounts={swipeCounts}
        userCount={userCount}
@@ -1,6 +1,7 @@
 "use client";

-import { motion } from "framer-motion";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { useRouter } from "next/navigation";
 import {
  MapPin,
@@ -13,13 +14,16 @@ import {
  RotateCcw,
  SearchX,
  Home,
+  ChevronDown,
 } from "lucide-react";
-import { Restaurant, MatchType } from "@/types";
+import { Restaurant, MatchType, RunnerUp } from "@/types";

 interface MatchResultProps {
  restaurant: Restaurant;
  matchType: MatchType;
  matchLikes: number;
+  runnerUps: RunnerUp[];
+  allRestaurants: Restaurant[];
  userCount: number;
  onReset: () => Promise<void>;
  resetting: boolean;
@@ -104,23 +108,81 @@ function NoMatchResult({
  );
 }

+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-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20"
+    >
+      <img
+        src={restaurant.image}
+        alt={restaurant.name}
+        className="h-16 w-16 shrink-0 rounded-lg object-cover"
+        referrerPolicy="no-referrer"
+      />
+      <div className="flex min-w-0 flex-1 flex-col justify-center">
+        <p className="truncate text-sm font-bold text-white">
+          {restaurant.name}
+        </p>
+        <div className="mt-1 flex items-center gap-2 text-xs text-white/70">
+          <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-200">
+          {likes}/{userCount} 人想去
+        </p>
+      </div>
+    </a>
+  );
+}
+
 export default function MatchResult({
  restaurant,
  matchType,
  matchLikes,
+  runnerUps,
+  allRestaurants,
  userCount,
  onReset,
  resetting,
 }: MatchResultProps) {
+  const [showRunnerUps, setShowRunnerUps] = useState(false);
+
  if (matchType === "no_match") {
    return <NoMatchResult onReset={onReset} resetting={resetting} />;
  }

  const isUnanimous = matchType === "unanimous";

+  const runnerUpRestaurants = runnerUps
+    .map((ru) => {
+      const r = allRestaurants.find((rest) => rest.id === ru.id);
+      return r ? { restaurant: r, likes: ru.likes } : null;
+    })
+    .filter((x): x is { restaurant: Restaurant; likes: number } => x !== null);
+
  return (
    <motion.div
-      className={`fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto px-6 py-10 ${
+      className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
        isUnanimous
          ? "bg-linear-to-b from-emerald-500 to-teal-600"
          : "bg-linear-to-b from-amber-500 to-orange-500"
@@ -129,153 +191,198 @@ export default function MatchResult({
      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 }}
-      >
-        {isUnanimous ? (
-          <PartyPopper size={56} className="text-yellow-300" />
-        ) : (
-          <Trophy size={56} className="text-yellow-200" />
-        )}
-      </motion.div>
-
-      <motion.h1
-        className="mt-3 text-4xl font-black text-white"
-        initial={{ y: 30, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.35 }}
-      >
-        就去这了！
-      </motion.h1>
-
-      <motion.p
-        className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`}
-        initial={{ y: 20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.45 }}
-      >
-        {isUnanimous
-          ? "大家一拍即合！"
-          : `${matchLikes}/${userCount} 人想去这家`}
-      </motion.p>
-
-      <motion.div
-        className="mt-6 w-full max-w-sm overflow-hidden rounded-2xl bg-white shadow-2xl"
-        initial={{ y: 60, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
-      >
-        <img
-          src={restaurant.image}
-          alt={restaurant.name}
-          className="h-44 w-full object-cover"
-          referrerPolicy="no-referrer"
-        />
-        <div className="p-4">
-          <div className="flex items-start justify-between gap-2">
-            <h2 className="text-lg font-bold leading-tight text-zinc-900">
-              {restaurant.name}
-            </h2>
-            {restaurant.category && (
-              <span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600">
-                {restaurant.category}
-              </span>
-            )}
-          </div>
-
-          <div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
-            <span className="flex items-center gap-1">
-              <Star size={13} className="fill-amber-400 text-amber-400" />
-              {restaurant.rating}
-            </span>
-            <span className="font-semibold text-emerald-600">
-              {restaurant.price}
-            </span>
-            {restaurant.distance && (
-              <span className="flex items-center gap-1">
-                <MapPin size={13} />
-                {restaurant.distance}
-              </span>
-            )}
-          </div>
-
-          {restaurant.address && (
-            <p className="mt-2 text-xs leading-relaxed text-zinc-400">
-              {restaurant.address}
-            </p>
-          )}
-
-          {restaurant.openTime && (
-            <div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
-              <Clock size={12} />
-              <span>{restaurant.openTime}</span>
-            </div>
-          )}
-
-          {restaurant.tag && (
-            <div className="mt-2 flex flex-wrap gap-1">
-              {restaurant.tag
-                .split(",")
-                .slice(0, 4)
-                .map((t) => (
-                  <span
-                    key={t}
-                    className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
-                  >
-                    {t.trim()}
-                  </span>
-                ))}
-            </div>
-          )}
-        </div>
-      </motion.div>
-
-      <motion.div
-        className="mt-5 flex w-full max-w-sm flex-col gap-2.5"
-        initial={{ y: 30, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.65 }}
-      >
-        <motion.a
-          href={buildNavUrl(restaurant)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={`flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold shadow-lg transition-colors hover:bg-emerald-50 ${
-            isUnanimous ? "text-emerald-600" : "text-orange-600"
-          }`}
-          whileTap={{ scale: 0.95 }}
+      <div className="flex w-full max-w-sm flex-1 flex-col items-center justify-center">
+        <motion.div
+          initial={{ scale: 0, rotate: -20 }}
+          animate={{ scale: 1, rotate: 0 }}
+          transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
        >
-          <Navigation size={16} />
-          导航过去
-        </motion.a>
+          {isUnanimous ? (
+            <PartyPopper size={56} className="text-yellow-300" />
+          ) : (
+            <Trophy size={56} className="text-yellow-200" />
+          )}
+        </motion.div>

-        {restaurant.tel && (
+        <motion.h1
+          className="mt-3 text-4xl font-black text-white"
+          initial={{ y: 30, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.35 }}
+        >
+          就去这了！
+        </motion.h1>
+
+        <motion.p
+          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`}
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.45 }}
+        >
+          {isUnanimous
+            ? "大家一拍即合！"
+            : `${matchLikes}/${userCount} 人想去这家`}
+        </motion.p>
+
+        <motion.div
+          className="mt-6 w-full overflow-hidden rounded-2xl bg-white shadow-2xl"
+          initial={{ y: 60, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
+        >
+          <img
+            src={restaurant.image}
+            alt={restaurant.name}
+            className="h-44 w-full object-cover"
+            referrerPolicy="no-referrer"
+          />
+          <div className="p-4">
+            <div className="flex items-start justify-between gap-2">
+              <h2 className="text-lg font-bold leading-tight text-zinc-900">
+                {restaurant.name}
+              </h2>
+              {restaurant.category && (
+                <span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600">
+                  {restaurant.category}
+                </span>
+              )}
+            </div>
+
+            <div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
+              <span className="flex items-center gap-1">
+                <Star size={13} className="fill-amber-400 text-amber-400" />
+                {restaurant.rating}
+              </span>
+              <span className="font-semibold text-emerald-600">
+                {restaurant.price}
+              </span>
+              {restaurant.distance && (
+                <span className="flex items-center gap-1">
+                  <MapPin size={13} />
+                  {restaurant.distance}
+                </span>
+              )}
+            </div>
+
+            {restaurant.address && (
+              <p className="mt-2 text-xs leading-relaxed text-zinc-400">
+                {restaurant.address}
+              </p>
+            )}
+
+            {restaurant.openTime && (
+              <div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
+                <Clock size={12} />
+                <span>{restaurant.openTime}</span>
+              </div>
+            )}
+
+            {restaurant.tag && (
+              <div className="mt-2 flex flex-wrap gap-1">
+                {restaurant.tag
+                  .split(",")
+                  .slice(0, 4)
+                  .map((t) => (
+                    <span
+                      key={t}
+                      className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
+                    >
+                      {t.trim()}
+                    </span>
+                  ))}
+              </div>
+            )}
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="mt-5 flex w-full flex-col gap-2.5"
+          initial={{ y: 30, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.65 }}
+        >
          <motion.a
-            href={`tel:${restaurant.tel}`}
-            className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
+            href={buildNavUrl(restaurant)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold shadow-lg transition-colors hover:bg-emerald-50 ${
+              isUnanimous ? "text-emerald-600" : "text-orange-600"
+            }`}
            whileTap={{ scale: 0.95 }}
          >
-            <Phone size={15} />
-            打电话订位
+            <Navigation size={16} />
+            导航过去
          </motion.a>
-        )}
-      </motion.div>

-      <motion.button
-        className={`mt-4 flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-          isUnanimous ? "text-emerald-200" : "text-amber-200"
-        }`}
-        onClick={onReset}
-        disabled={resetting}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.8 }}
-      >
-        <RotateCcw size={13} className={resetting ? "animate-spin" : ""} />
-        {resetting ? "重置中..." : "再来一轮"}
-      </motion.button>
+          {restaurant.tel && (
+            <motion.a
+              href={`tel:${restaurant.tel}`}
+              className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
+              whileTap={{ scale: 0.95 }}
+            >
+              <Phone size={15} />
+              打电话订位
+            </motion.a>
+          )}
+        </motion.div>
+
+        {!isUnanimous && runnerUpRestaurants.length > 0 && (
+          <motion.div
+            className="mt-5 w-full"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.75 }}
+          >
+            <button
+              onClick={() => setShowRunnerUps((v) => !v)}
+              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-white/80 transition-colors hover:text-white"
+            >
+              其他候选（{runnerUpRestaurants.length}）
+              <motion.span
+                animate={{ rotate: showRunnerUps ? 180 : 0 }}
+                transition={{ duration: 0.2 }}
+                className="inline-flex"
+              >
+                <ChevronDown size={14} />
+              </motion.span>
+            </button>
+            <AnimatePresence>
+              {showRunnerUps && (
+                <motion.div
+                  className="flex flex-col gap-2"
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: "auto", opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.25 }}
+                >
+                  {runnerUpRestaurants.map(({ restaurant: r, likes }) => (
+                    <RunnerUpCard
+                      key={r.id}
+                      restaurant={r}
+                      likes={likes}
+                      userCount={userCount}
+                    />
+                  ))}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        )}
+
+        <motion.button
+          className={`mt-4 flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
+            isUnanimous ? "text-emerald-200" : "text-amber-200"
+          }`}
+          onClick={onReset}
+          disabled={resetting}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.8 }}
+        >
+          <RotateCcw size={13} className={resetting ? "animate-spin" : ""} />
+          {resetting ? "重置中..." : "再来一轮"}
+        </motion.button>
+      </div>
    </motion.div>
  );
 }
@@ -6,7 +6,7 @@ import SwipeableCard from "./SwipeableCard";
 import ActionButtons from "./ActionButtons";
 import MatchResult from "./MatchResult";
 import SwipeGuide from "./SwipeGuide";
-import { Restaurant, SwipeDirection, MatchType } from "@/types";
+import { Restaurant, SwipeDirection, MatchType, RunnerUp } from "@/types";
 import { Heart, Undo2, Check } from "lucide-react";

 const AVATARS = [
@@ -144,6 +144,7 @@ interface SwipeDeckProps {
  matchedRestaurantId: string | null;
  matchType: MatchType;
  matchLikes: number;
+  runnerUps: RunnerUp[];
  likeCounts: Record<string, number>;
  swipeCounts: Record<string, number>;
  userCount: number;
@@ -158,6 +159,7 @@ export default function SwipeDeck({
  matchedRestaurantId,
  matchType,
  matchLikes,
+  runnerUps,
  likeCounts,
  swipeCounts,
  userCount,
@@ -398,6 +400,8 @@ export default function SwipeDeck({
          restaurant={matchRestaurant}
          matchType={matchType ?? "unanimous"}
          matchLikes={matchLikes}
+          runnerUps={runnerUps}
+          allRestaurants={restaurants}
          userCount={userCount}
          onReset={handleReset}
          resetting={resetting}
@@ -29,6 +29,7 @@ export function useRoomPolling(roomId: string) {
    match: data?.match ?? null,
    matchType: data?.matchType ?? null,
    matchLikes: data?.matchLikes ?? 0,
+    runnerUps: data?.runnerUps ?? [],
    likeCounts: data?.likeCounts ?? {},
    swipeCounts: data?.swipeCounts ?? {},
    restaurants: data?.restaurants ?? [],
@@ -17,12 +17,18 @@ export type SwipeDirection = "left" | "right";

 export type MatchType = "unanimous" | "best" | "no_match" | null;

+export interface RunnerUp {
+  id: string;
+  likes: number;
+}
+
 export interface RoomStatus {
  roomId: string;
  userCount: number;
  match: string | null;
  matchType: MatchType;
  matchLikes: number;
+  runnerUps: RunnerUp[];
  likeCounts: Record<string, number>;
  swipeCounts: Record<string, number>;
  restaurants: Restaurant[];