feat: 匹配成功页体验优化 — 浮动操作栏、收藏、决赛引导

- 底部操作改为固定浮动栏,"再来一轮"和"换一批店"始终可见
- 结果卡片右上角新增收藏按钮,复用已有收藏 API
- 非全员一致时"Top N 决赛"按钮上方增加引导文案
- 更新 ROADMAP 标记已完成项,移除低优先级条目
This commit is contained in:
2026-02-26 14:03:38 +08:00
parent afde70c98e
commit 0f83e9c6ae
2 changed files with 199 additions and 54 deletions
+86 -54
View File
@@ -19,6 +19,7 @@ import {
RefreshCw,
Share2,
Zap,
Heart,
} from "lucide-react";
import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
import { fireCelebration, playChime } from "@/lib/celebrate";
@@ -189,6 +190,8 @@ export default function MatchResult({
const celebratedRef = useRef(false);
const historySavedRef = useRef(false);
const isUnanimous = matchType === "unanimous";
const [favorited, setFavorited] = useState(false);
const [favLoading, setFavLoading] = useState(false);
const showToast = useCallback((msg: string) => {
setToast(msg);
@@ -229,6 +232,25 @@ export default function MatchResult({
setShowShareCard(true);
}, []);
const handleFavorite = useCallback(async () => {
if (!isRegistered() || favorited || favLoading) return;
setFavLoading(true);
try {
const res = await fetch("/api/user/favorite", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userId, restaurant }),
});
if (res.ok) {
setFavorited(true);
showToast("已收藏");
}
} catch {
/* ignore */
}
setFavLoading(false);
}, [userId, restaurant, favorited, favLoading, showToast]);
if (matchType === "no_match") {
return <NoMatchResult onReset={onReset} resetting={resetting} />;
}
@@ -247,7 +269,7 @@ export default function MatchResult({
return (
<motion.div
className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 pb-24 pt-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4 }}
@@ -314,11 +336,27 @@ export default function MatchResult({
{/* Result card */}
<motion.div
className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
className="relative mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
>
{isRegistered() && (
<motion.button
onClick={handleFavorite}
disabled={favLoading}
className="absolute right-3 top-3 z-10 rounded-full bg-black/40 p-2 backdrop-blur-sm transition-colors hover:bg-black/60 disabled:opacity-50"
whileTap={{ scale: 0.85 }}
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: 0.7, type: "spring", stiffness: 300, damping: 15 }}
>
<Heart
size={18}
className={favorited ? "fill-red-500 text-red-500" : "text-white"}
/>
</motion.button>
)}
{restaurant.images?.[0] && (
<img
src={restaurant.images[0]}
@@ -466,62 +504,56 @@ export default function MatchResult({
</motion.div>
)}
</AnimatePresence>
{canNarrow && (
<div className="mt-4 flex flex-col items-center gap-2">
<p className="text-xs text-muted">
{runnerUpRestaurants.length}
</p>
<motion.button
onClick={() => onNarrow(narrowIds)}
disabled={resetting}
className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<Swords size={15} />
{resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
</motion.button>
</div>
)}
</motion.div>
)}
{/* Bottom actions */}
<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 }}
>
{canNarrow ? (
<>
<motion.button
onClick={() => onNarrow(narrowIds)}
disabled={resetting}
className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle 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 underline underline-offset-2 hover:text-white ${
isUnanimous ? "text-emerald-400" : "text-amber-400"
}`}
>
<RefreshCw size={13} />
</motion.button>
</>
) : (
<>
<motion.button
onClick={onReset}
disabled={resetting}
className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle 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-400" : "text-amber-400"
}`}
>
<RefreshCw size={13} />
</motion.button>
</>
)}
</motion.div>
</div>
{/* Floating bottom bar */}
<motion.div
className="fixed inset-x-0 bottom-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-xl"
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.9, type: "spring", stiffness: 200, damping: 20 }}
>
<div className="mx-auto flex max-w-sm items-center gap-3 px-6 pb-6 pt-3">
<span className="shrink-0 text-xs text-muted"></span>
<motion.button
onClick={onReset}
disabled={resetting}
className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
whileTap={{ scale: 0.95 }}
>
<RotateCcw size={12} className={resetting ? "animate-spin" : ""} />
{resetting ? "重置中..." : "再来一轮"}
</motion.button>
<motion.button
onClick={() => router.push("/")}
className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle"
whileTap={{ scale: 0.95 }}
>
<RefreshCw size={12} />
</motion.button>
</div>
</motion.div>
<ShareCardModal
open={showShareCard}
onClose={() => setShowShareCard(false)}