feat: 拆分"再来一轮"为 Top N 决赛和换一批餐厅两个选项

This commit is contained in:
2026-02-24 19:34:35 +08:00
parent 5d297684fc
commit cb9f4a3d0f
4 changed files with 102 additions and 16 deletions
+15 -1
View File
@@ -2,13 +2,27 @@ import { NextResponse } from "next/server";
import { atomicUpdateRoom } from "@/lib/store";
export async function POST(
_req: Request,
req: Request,
{ params }: { params: Promise<{ id: string }> },
) {
const { id } = await params;
let restaurantIds: string[] | undefined;
try {
const body = await req.json().catch(() => null);
if (body?.restaurantIds && Array.isArray(body.restaurantIds)) {
restaurantIds = body.restaurantIds;
}
} catch {
// No body or invalid JSON — plain reset
}
try {
const updated = await atomicUpdateRoom(id, (data) => {
if (restaurantIds && restaurantIds.length > 0) {
const idSet = new Set(restaurantIds);
data.restaurants = data.restaurants.filter((r) => idSet.has(r.id));
}
data.likes = {};
data.swipeCounts = {};
data.match = null;
+10
View File
@@ -34,6 +34,15 @@ export default function RoomPage() {
await mutate();
}, [roomId, mutate]);
const handleNarrow = useCallback(async (restaurantIds: string[]) => {
await fetch(`/api/room/${roomId}/reset`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ restaurantIds }),
});
await mutate();
}, [roomId, mutate]);
const initialIndex = swipeCounts[userId] ?? 0;
const ready = joined && userId && restaurants.length > 0;
@@ -62,6 +71,7 @@ export default function RoomPage() {
swipeCounts={swipeCounts}
userCount={userCount}
onReset={handleReset}
onNarrow={handleNarrow}
/>
</div>
);
+54 -9
View File
@@ -15,6 +15,8 @@ import {
SearchX,
Home,
ChevronDown,
Swords,
RefreshCw,
} from "lucide-react";
import { Restaurant, MatchType, RunnerUp } from "@/types";
@@ -26,6 +28,7 @@ interface MatchResultProps {
allRestaurants: Restaurant[];
userCount: number;
onReset: () => Promise<void>;
onNarrow: (restaurantIds: string[]) => Promise<void>;
resetting: boolean;
}
@@ -163,8 +166,10 @@ export default function MatchResult({
allRestaurants,
userCount,
onReset,
onNarrow,
resetting,
}: MatchResultProps) {
const router = useRouter();
const [showRunnerUps, setShowRunnerUps] = useState(false);
if (matchType === "no_match") {
@@ -180,6 +185,11 @@ export default function MatchResult({
})
.filter((x): x is { restaurant: Restaurant; likes: number } => x !== null);
const canNarrow = !isUnanimous && runnerUpRestaurants.length > 0;
const narrowIds = canNarrow
? [restaurant.id, ...runnerUps.map((ru) => ru.id)]
: [];
return (
<motion.div
className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
@@ -369,19 +379,54 @@ export default function MatchResult({
</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}
<motion.div
className="mt-5 flex w-full flex-col items-center gap-2.5"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.8 }}
>
<RotateCcw size={13} className={resetting ? "animate-spin" : ""} />
{resetting ? "重置中..." : "再来一轮"}
</motion.button>
{canNarrow ? (
<>
<motion.button
onClick={() => onNarrow(narrowIds)}
disabled={resetting}
className="flex w-full 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 disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<Swords size={15} />
{resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
</motion.button>
<motion.button
onClick={() => router.push("/")}
className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white"
>
<RefreshCw size={13} />
</motion.button>
</>
) : (
<>
<motion.button
onClick={onReset}
disabled={resetting}
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 disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
{resetting ? "重置中..." : "再来一轮"}
</motion.button>
<motion.button
onClick={() => router.push("/")}
className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
isUnanimous ? "text-emerald-200" : "text-amber-200"
}`}
>
<RefreshCw size={13} />
</motion.button>
</>
)}
</motion.div>
</div>
</motion.div>
);
+23 -6
View File
@@ -149,6 +149,7 @@ interface SwipeDeckProps {
swipeCounts: Record<string, number>;
userCount: number;
onReset: () => Promise<void>;
onNarrow: (restaurantIds: string[]) => Promise<void>;
}
export default function SwipeDeck({
@@ -164,6 +165,7 @@ export default function SwipeDeck({
swipeCounts,
userCount,
onReset,
onNarrow,
}: SwipeDeckProps) {
const [currentIndex, setCurrentIndex] = useState(initialIndex);
const [showMatch, setShowMatch] = useState(false);
@@ -280,19 +282,33 @@ export default function SwipeDeck({
swipeFnRef.current = null;
}, [swipeHistory, currentIndex, roomId, userId]);
const clearLocalState = useCallback(() => {
setCurrentIndex(0);
setShowMatch(false);
setLocalMatchId(null);
setSwipeHistory([]);
prevLikeCounts.current = {};
}, []);
const handleReset = useCallback(async () => {
setResetting(true);
try {
await onReset();
setCurrentIndex(0);
setShowMatch(false);
setLocalMatchId(null);
setSwipeHistory([]);
prevLikeCounts.current = {};
clearLocalState();
} finally {
setResetting(false);
}
}, [onReset]);
}, [onReset, clearLocalState]);
const handleNarrow = useCallback(async (restaurantIds: string[]) => {
setResetting(true);
try {
await onNarrow(restaurantIds);
clearLocalState();
} finally {
setResetting(false);
}
}, [onNarrow, clearLocalState]);
const allSwiped = currentIndex >= restaurants.length;
const isDone = allSwiped || resolvedMatchId != null;
@@ -404,6 +420,7 @@ export default function SwipeDeck({
allRestaurants={restaurants}
userCount={userCount}
onReset={handleReset}
onNarrow={handleNarrow}
resetting={resetting}
/>
)}