feat: 匹配结果页增加"分享结果到群里"按钮，支持 Web Share 和剪贴板

src/components/MatchResult.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useRouter } from "next/navigation";
 import {
@@ -17,6 +17,7 @@ import {
   ChevronDown,
   Swords,
   RefreshCw,
+  Share2,
 } from "lucide-react";
 import { Restaurant, MatchType, RunnerUp } from "@/types";
 
@@ -171,6 +172,48 @@ export default function MatchResult({
 }: MatchResultProps) {
   const router = useRouter();
   const [showRunnerUps, setShowRunnerUps] = useState(false);
+  const [toast, setToast] = useState("");
+
+  const showToast = useCallback((msg: string) => {
+    setToast(msg);
+    setTimeout(() => setToast(""), 2200);
+  }, []);
+
+  const handleShare = useCallback(async () => {
+    const lines = [
+      `🎉 我们用 NoWhatever 选好了！`,
+      ``,
+      `📍 ${restaurant.name}`,
+      restaurant.rating ? `⭐ ${restaurant.rating}` : "",
+      restaurant.price && restaurant.price !== "未知" ? `💰 人均${restaurant.price}` : "",
+      restaurant.address ? `📮 ${restaurant.address}` : "",
+    ].filter(Boolean);
+
+    const text = lines.join("\n");
+    const navUrl = buildNavUrl(restaurant);
+
+    const shareData = {
+      title: `我们选了${restaurant.name}！`,
+      text,
+      url: navUrl,
+    };
+
+    try {
+      if (navigator.share && navigator.canShare?.(shareData)) {
+        await navigator.share(shareData);
+        return;
+      }
+    } catch (e) {
+      if (e instanceof Error && e.name === "AbortError") return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(`${text}\n\n${navUrl}`);
+      showToast("已复制，快去发给朋友吧！");
+    } catch {
+      showToast("复制失败，请手动复制");
+    }
+  }, [restaurant, showToast]);
 
   if (matchType === "no_match") {
     return <NoMatchResult onReset={onReset} resetting={resetting} />;
@@ -334,6 +377,15 @@ export default function MatchResult({
               打电话订位
             </motion.a>
           )}
+
+          <motion.button
+            onClick={handleShare}
+            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 }}
+          >
+            <Share2 size={15} />
+            分享结果到群里
+          </motion.button>
         </motion.div>
 
         {!isUnanimous && runnerUpRestaurants.length > 0 && (
@@ -428,6 +480,20 @@ export default function MatchResult({
           )}
         </motion.div>
       </div>
+
+      <AnimatePresence>
+        {toast && (
+          <motion.div
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
+            initial={{ opacity: 0, y: -12, x: "-50%" }}
+            animate={{ opacity: 1, y: 0, x: "-50%" }}
+            exit={{ opacity: 0, y: -12, x: "-50%" }}
+            transition={{ type: "spring", stiffness: 400, damping: 25 }}
+          >
+            {toast}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 }