feat: 卡片增加高德详情和大众点评外链按钮

src/components/RestaurantCard.tsx

@@ -1,13 +1,30 @@
 "use client";
 
-import { Star, MapPin, Clock } from "lucide-react";
+import { useCallback } from "react";
+import { Star, MapPin, Clock, ExternalLink } from "lucide-react";
 import { Restaurant } from "@/types";
 
 interface RestaurantCardProps {
   restaurant: Restaurant;
 }
 
+function stopAll(e: React.SyntheticEvent) {
+  e.stopPropagation();
+}
+
 export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
+  const openLink = useCallback(
+    (url: string) => (e: React.MouseEvent | React.TouchEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(url, "_blank", "noopener,noreferrer");
+    },
+    [],
+  );
+
+  const amapUrl = `https://uri.amap.com/poidetail?poiid=${restaurant.id}`;
+  const dianpingUrl = `https://m.dianping.com/search/keyword/0/0_${encodeURIComponent(restaurant.name)}`;
+
   return (
     <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-xl">
       <div className="relative h-[58%] w-full shrink-0 overflow-hidden">
@@ -28,9 +45,31 @@ export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
       </div>
 
       <div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
+        <div className="flex items-start justify-between gap-2">
           <h2 className="text-lg font-bold leading-tight text-zinc-900">
             {restaurant.name}
           </h2>
+          <div className="mt-0.5 flex shrink-0 gap-1.5">
+            <button
+              onClick={openLink(amapUrl)}
+              onPointerDown={stopAll}
+              onTouchStart={stopAll}
+              className="flex items-center gap-0.5 rounded-full bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-500 transition-colors active:bg-blue-100"
+            >
+              高德
+              <ExternalLink size={10} />
+            </button>
+            <button
+              onClick={openLink(dianpingUrl)}
+              onPointerDown={stopAll}
+              onTouchStart={stopAll}
+              className="flex items-center gap-0.5 rounded-full bg-orange-50 px-2 py-0.5 text-[11px] font-medium text-orange-500 transition-colors active:bg-orange-100"
+            >
+              点评
+              <ExternalLink size={10} />
+            </button>
+          </div>
+        </div>
 
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
           <div className="flex items-center gap-1">