@lmy54321/design-system 1.1.4 → 1.2.0

package/template/src/pages/POIRecommendPage.tsx

@@ -0,0 +1,676 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { TencentMap } from "@lmy54321/design-system";
+
+/* ══════════════════════════════════════════
+   推荐卡片数据
+   ══════════════════════════════════════════ */
+
+interface POICard {
+  id: string;
+  images: string[];
+  title: string;
+  tags: { label: string; icon?: "flag" | "pin"; accent?: boolean }[];
+  aiPrompt: string;
+  distance: string;
+  type: "route" | "single" | "topic" | "explore";
+  badge?: string;
+}
+
+const poiCards: POICard[] = [
+  {
+    id: "1",
+    images: [
+      "/images/scene/relax.png",
+    ],
+    title: "\u5076\u5c14\u653e\u7a7a\uff0c\u5728\u5306\u5fd9\u7684\u57ce\u5e02\u4eab\u53d7\u9633\u5149",
+    tags: [
+      { label: "\u6674\u5929\u9002\u5b9c", icon: "pin" },
+      { label: "\u65b0\u5f00\u4e1a" },
+      { label: "\u6709\u5145\u7535\u6869" },
+    ],
+    aiPrompt: "\u201c\u6211\u5bb6\u9644\u8fd1\u6709\u6ca1\u6709\u7c7b\u4f3c\u7684\u5e97\u201d",
+    distance: "1.1km",
+    type: "route",
+  },
+  {
+    id: "2",
+    images: [
+      "/images/scene/poi-relax.png",
+      "/images/scene/cafe.png",
+    ],
+    title: "\u5076\u5c14\u653e\u7a7a\uff0c\u5728\u5306\u5fd9\u7684\u57ce\u5e02\u4eab\u53d7\u9633\u5149",
+    tags: [
+      { label: "\u7cbe\u9009\u6f14\u51fa", icon: "flag", accent: true },
+      { label: "\u677e\u5f1b\u611f" },
+    ],
+    aiPrompt: "\u201c\u4e0d\u8981\u6cd5\u9910\u5385\uff0c\u6362\u4e00\u4e2a\u5403\u591c\u5bb5\u7684\u201d",
+    distance: "1.1km",
+    type: "single",
+  },
+  {
+    id: "3",
+    images: [
+      "/images/scene/friends-outing.png",
+    ],
+    title: "\u5076\u5c14\u653e\u7a7a\uff0c\u5728\u5306\u5fd9\u7684\u57ce\u5e02\u4eab\u53d7\u9633\u5149",
+    tags: [
+      { label: "\u7cbe\u9009\u6f14\u51fa", icon: "flag", accent: true },
+      { label: "\u677e\u5f1b\u611f" },
+    ],
+    aiPrompt: "\u201c\u4e0d\u8981\u6cd5\u9910\u5385\uff0c\u6362\u4e00\u4e2a\u5403\u591c\u5bb5\u7684\u201d",
+    distance: "1.1km",
+    type: "topic",
+    badge: "\u5546\u5708\u5185",
+  },
+  {
+    id: "4",
+    images: [
+      "/images/scene/poi-retro.png",
+      "/images/scene/restaurant.png",
+      "/images/scene/cafe.png",
+    ],
+    title: "\u590d\u53e4\u56de\u6f6e\uff1a\u63a2\u5e97\u5357\u5934\u53e4\u57ce5\u5bb6\u6000\u65e7\u98ce\u5c0f\u5e97",
+    tags: [
+      { label: "\u5546\u5708\u5185", icon: "flag", accent: true },
+      { label: "\u5ba0\u7269\u53cb\u597d" },
+      { label: "\u4e3b\u9898\u73a9\u6cd5" },
+    ],
+    aiPrompt: "\u201c\u6211\u5bb6\u9644\u8fd1\u6709\u6ca1\u6709\u7c7b\u4f3c\u7684\u5e97\u201d",
+    distance: "1.1km",
+    type: "explore",
+  },
+  {
+    id: "5",
+    images: [
+      "/images/feed/feed-park.png",
+    ],
+    title: "\u5076\u5c14\u653e\u7a7a\uff0c\u5728\u5306\u5fd9\u7684\u57ce\u5e02\u4eab\u53d7\u9633\u5149",
+    tags: [
+      { label: "\u6674\u5929\u9002\u5b9c", icon: "pin" },
+      { label: "\u6c1b\u56f4\u611f" },
+      { label: "\u597d\u505c\u8f66" },
+    ],
+    aiPrompt: "\u201c\u6709\u6ca1\u6709\u5b89\u9759\u4e00\u70b9\u7684\u9152\u5427\u201d",
+    distance: "2.3km",
+    type: "route",
+  },
+];
+
+/* ══════════════════════════════════════════
+   图片布局子组件（按卡片类型区分）
+   — 带倾斜、压盖、错落的活泼布局
+   ══════════════════════════════════════════ */
+
+function RouteImageLayout({ card }: { card: POICard }) {
+  return (
+    <div className="relative w-full h-[200px] overflow-hidden">
+      {/* 地图背景 */}
+      <TencentMap className="absolute inset-0 w-full h-full" center={{ lat: 39.909, lng: 116.397 }} />
+      {/* 倾斜的照片叠在地图上 */}
+      <div
+        className="absolute bottom-[16px] right-[16px] w-[110px] h-[80px] rounded-[12px] overflow-hidden shadow-lg border-[2.5px] border-white z-10"
+        style={{ transform: "rotate(4deg)" }}
+      >
+        <ImageWithFallback
+          src={card.images[0]}
+          alt={card.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      {/* 距离标签 */}
+      <div className="absolute top-[var(--spacing-sm)] left-[var(--spacing-sm)] z-10 flex items-center gap-[3px] bg-white/90 backdrop-blur-sm rounded-[8px] px-[8px] py-[4px] shadow-sm">
+        <IconFont name="location" size="10px" className="text-accent" />
+        <span className="text-[11px] text-foreground/70 leading-[14px]">距你{card.distance}</span>
+      </div>
+    </div>
+  );
+}
+
+function SingleImageLayout({ card }: { card: POICard }) {
+  return (
+    <div className="relative w-full h-[200px] overflow-hidden bg-card-muted">
+      {/* 底层大图 — 微微倾斜 */}
+      <div
+        className="absolute top-[10px] left-[12px] w-[180px] h-[160px] rounded-[16px] overflow-hidden shadow-md"
+        style={{ transform: "rotate(-3deg)" }}
+      >
+        <ImageWithFallback
+          src={card.images[0]}
+          alt={card.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      {/* 上层小图 — 反方向倾斜，压盖在大图右下 */}
+      {card.images[1] && (
+        <div
+          className="absolute bottom-[8px] right-[12px] w-[140px] h-[120px] rounded-[14px] overflow-hidden shadow-lg border-[2.5px] border-white"
+          style={{ transform: "rotate(3.5deg)", zIndex: 2 }}
+        >
+          <ImageWithFallback
+            src={card.images[1]}
+            alt={card.title}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+      {/* 距离标签 */}
+      <div className="absolute top-[var(--spacing-sm)] left-[var(--spacing-sm)] flex items-center gap-[3px] bg-black/40 backdrop-blur-sm rounded-[8px] px-[8px] py-[4px]" style={{ zIndex: 3 }}>
+        <IconFont name="location" size="10px" className="text-white/90" />
+        <span className="text-[11px] text-white/90 leading-[14px]">距你{card.distance}</span>
+      </div>
+    </div>
+  );
+}
+
+function TopicImageLayout({ card }: { card: POICard }) {
+  return (
+    <div className="relative w-full h-[200px] overflow-hidden">
+      {/* 主图铺满 */}
+      <ImageWithFallback
+        src={card.images[0]}
+        alt={card.title}
+        className="w-full h-full object-cover"
+      />
+      <div className="absolute inset-x-0 bottom-0 h-[80px] bg-gradient-to-t from-black/40 to-transparent" />
+      {/* 距离标签 */}
+      <div className="absolute top-[var(--spacing-sm)] left-[var(--spacing-sm)] flex items-center gap-[3px] bg-black/40 backdrop-blur-sm rounded-[8px] px-[8px] py-[4px]">
+        <IconFont name="location" size="10px" className="text-white/90" />
+        <span className="text-[11px] text-white/90 leading-[14px]">距你{card.distance}</span>
+      </div>
+      {/* 右上角徽章 */}
+      {card.badge && (
+        <div className="absolute top-[var(--spacing-sm)] right-[var(--spacing-sm)] flex items-center gap-[3px] bg-accent/90 backdrop-blur-sm rounded-[8px] px-[8px] py-[4px]">
+          <IconFont name="flag" size="10px" className="text-white" />
+          <span className="text-[11px] text-white font-medium leading-[14px]">{card.badge}</span>
+        </div>
+      )}
+      {/* 左下角场景标签 */}
+      {card.tags[0] && (
+        <div className="absolute bottom-[var(--spacing-sm)] left-[var(--spacing-sm)] flex items-center gap-[3px] bg-white/85 backdrop-blur-sm rounded-[8px] px-[8px] py-[4px] shadow-sm">
+          <IconFont name="location" size="10px" className="text-accent" />
+          <span className="text-[11px] text-foreground/80 font-medium leading-[14px]">{card.tags[0].label}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ExploreImageLayout({ card }: { card: POICard }) {
+  return (
+    <div className="relative w-full h-[200px] overflow-hidden bg-card-muted">
+      {/* 主图（左侧偏大，微倾） */}
+      <div
+        className="absolute top-[10px] left-[8px] w-[160px] h-[170px] rounded-[14px] overflow-hidden shadow-md"
+        style={{ transform: "rotate(-2.5deg)", zIndex: 1 }}
+      >
+        <ImageWithFallback
+          src={card.images[0]}
+          alt={card.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      {/* 右上小图（正向倾斜，压在主图上方） */}
+      <div
+        className="absolute top-[6px] right-[10px] w-[120px] h-[90px] rounded-[12px] overflow-hidden shadow-lg border-[2px] border-white"
+        style={{ transform: "rotate(4deg)", zIndex: 2 }}
+      >
+        <ImageWithFallback
+          src={card.images[1] || card.images[0]}
+          alt={card.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      {/* 右下小图（反向倾斜，与右上图错开） */}
+      <div
+        className="absolute bottom-[6px] right-[18px] w-[110px] h-[85px] rounded-[12px] overflow-hidden shadow-lg border-[2px] border-white"
+        style={{ transform: "rotate(-3deg)", zIndex: 3 }}
+      >
+        <ImageWithFallback
+          src={card.images[2] || card.images[0]}
+          alt={card.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      {/* 距离标签 */}
+      <div className="absolute top-[var(--spacing-sm)] left-[var(--spacing-sm)] flex items-center gap-[3px] bg-black/40 backdrop-blur-sm rounded-[8px] px-[8px] py-[4px]" style={{ zIndex: 4 }}>
+        <IconFont name="location" size="10px" className="text-white/90" />
+        <span className="text-[11px] text-white/90 leading-[14px]">距你{card.distance}</span>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   推荐卡片组件
+   ══════════════════════════════════════════ */
+
+function RecommendCard({
+  card,
+  onTap,
+  onAiPrompt,
+}: {
+  card: POICard;
+  onTap: () => void;
+  onAiPrompt: (prompt: string) => void;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col shrink-0 w-[280px] cursor-pointer group",
+        "bg-card rounded-[var(--radius-card)]",
+        "border border-card-border",
+        "shadow-[var(--elevation-sm)]",
+        "overflow-hidden"
+      )}
+      onClick={onTap}
+    >
+      {/* 图片区域 — 根据类型渲染不同布局 */}
+      {card.type === "route" && <RouteImageLayout card={card} />}
+      {card.type === "single" && <SingleImageLayout card={card} />}
+      {card.type === "topic" && <TopicImageLayout card={card} />}
+      {card.type === "explore" && <ExploreImageLayout card={card} />}
+
+      {/* 卡片内容区域 */}
+      <div className="flex flex-col p-[var(--spacing-base)]">
+        {/* 标题 */}
+        <h3 className="text-[15px] font-semibold text-foreground leading-[22px] line-clamp-2 mb-[var(--spacing-xs)]">
+          {card.title}
+        </h3>
+
+        {/* 标签行 */}
+        <div className="flex flex-wrap gap-[4px] mb-[var(--spacing-sm)]">
+          {card.tags.map((tag, i) => (
+            <Tag
+              key={i}
+              label={tag.label}
+              size="xs"
+              icon={
+                tag.icon === "flag" ? (
+                  <IconFont name="flag" size="10px" className={tag.accent ? "text-destructive" : "text-muted-foreground"} />
+                ) : tag.icon === "pin" ? (
+                  <IconFont name="location" size="10px" className="text-accent" />
+                ) : undefined
+              }
+              className={cn(
+                "border-transparent",
+                tag.accent
+                  ? "bg-accent/8 text-foreground/70"
+                  : "bg-card-muted text-muted-foreground"
+              )}
+            />
+          ))}
+        </div>
+
+        {/* AI 追问提示 */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onAiPrompt(card.aiPrompt);
+          }}
+          className={cn(
+            "flex items-center gap-[6px] px-[var(--spacing-sm)] py-[6px]",
+            "bg-card-muted rounded-[var(--radius)] w-full",
+            "active:bg-muted transition-colors text-left"
+          )}
+        >
+          <IconFont name="star" size="12px" className="text-accent shrink-0" />
+          <span className="text-[12px] text-muted-foreground leading-[16px] truncate flex-1">
+            {card.aiPrompt}
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   AI 输入栏组件
+   ══════════════════════════════════════════ */
+
+function AIInputBar({
+  value,
+  onChange,
+  onSend,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  onSend: () => void;
+  placeholder: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-[var(--spacing-xs)] px-[var(--spacing-md)] py-[var(--spacing-xs)]",
+        "bg-card backdrop-blur-xl rounded-[var(--radius-button)]",
+        "shadow-[var(--elevation-sm)]",
+        "border border-card-border"
+      )}
+    >
+      {/* 声纹图标 */}
+      <div className="shrink-0">
+        <IconFont name="sound" size="18px" className="text-accent" />
+      </div>
+
+      {/* 输入框 */}
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && value.trim()) {
+            onSend();
+          }
+        }}
+        placeholder={placeholder}
+        className={cn(
+          "flex-1 bg-transparent border-none outline-none",
+          "text-[14px] text-foreground placeholder:text-muted-foreground/70",
+          "min-w-0"
+        )}
+      />
+
+      {/* 发送按钮 */}
+      {value.trim() && (
+        <motion.button
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0, opacity: 0 }}
+          onClick={onSend}
+          className="size-[32px] rounded-full bg-accent flex items-center justify-center shrink-0 active:opacity-80 transition-opacity"
+        >
+          <IconFont name="send" size="16px" className="text-white" />
+        </motion.button>
+      )}
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   AI 生成结果面板
+   ══════════════════════════════════════════ */
+
+interface AIResult {
+  name: string;
+  address: string;
+  reason: string;
+  distance: string;
+  rating: string;
+}
+
+const mockAIResults: AIResult[] = [
+  { name: "胡桃里音乐酒馆", address: "国贸商城B1层", reason: "现场驻唱 + 创意菜，适合4人聚餐", distance: "800m", rating: "4.8" },
+  { name: "海底捞（国贸店）", address: "建国门外大街1号", reason: "下班后聚餐首选，不用排队", distance: "1.2km", rating: "4.7" },
+  { name: "探鱼（三里屯店）", address: "三里屯路19号", reason: "烤鱼配啤酒，性价比高", distance: "2.1km", rating: "4.6" },
+];
+
+/* ══════════════════════════════════════════
+   主页面
+   ══════════════════════════════════════════ */
+
+export function POIRecommendPage() {
+  const [inputValue, setInputValue] = useState("");
+  const [toastText, setToastText] = useState<string | null>(null);
+  const [aiGenerating, setAiGenerating] = useState(false);
+  const [aiResults, setAiResults] = useState<AIResult[] | null>(null);
+  const [currentPrompt, setCurrentPrompt] = useState("");
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const showToast = useCallback((text: string) => {
+    setToastText(text);
+  }, []);
+
+  useEffect(() => {
+    if (!toastText) return;
+    const timer = setTimeout(() => setToastText(null), 2200);
+    return () => clearTimeout(timer);
+  }, [toastText]);
+
+  const handleSend = useCallback(() => {
+    if (!inputValue.trim()) return;
+    setCurrentPrompt(inputValue);
+    setInputValue("");
+    setAiGenerating(true);
+    setAiResults(null);
+
+    // 模拟 AI 生成
+    setTimeout(() => {
+      setAiGenerating(false);
+      setAiResults(mockAIResults);
+    }, 2000);
+  }, [inputValue]);
+
+  const handleAiPrompt = useCallback((prompt: string) => {
+    setInputValue(prompt.replace(/^"|"$/g, ""));
+  }, []);
+
+  const handleCloseAI = useCallback(() => {
+    setAiResults(null);
+    setCurrentPrompt("");
+  }, []);
+
+  return (
+    <div
+      className="relative w-full h-[100dvh] overflow-hidden flex flex-col"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* ── 渐变背景 ── */}
+      <div className="absolute inset-0 bg-gradient-to-b from-[#E8EEF8] via-[#F0F4FA] to-background" />
+      {/* 装饰性模糊光斑 */}
+      <div className="absolute top-[-60px] right-[-40px] w-[200px] h-[200px] bg-accent/8 rounded-full blur-[80px]" />
+      <div className="absolute top-[100px] left-[-60px] w-[180px] h-[180px] bg-[#F0D6A0]/15 rounded-full blur-[70px]" />
+
+      {/* ── 主内容区 ── */}
+      <div className="relative z-10 flex-1 flex flex-col overflow-hidden">
+
+        {/* ── 顶部标题区 ── */}
+        <div className="px-[var(--spacing-lg)] pt-[56px] pb-[var(--spacing-sm)]">
+          {/* 标题 */}
+          <div className="flex items-start justify-between">
+            <div>
+              <div className="flex items-center gap-[6px] mb-[2px]">
+                <IconFont name="cherry" size="22px" className="text-[#C57B3C]" />
+                <h1 className="text-[22px] font-bold text-foreground leading-[30px]">
+                  秋色正好
+                </h1>
+              </div>
+              <h2 className="text-[22px] font-bold text-foreground leading-[30px]">
+                去这些地方兜兜风
+              </h2>
+            </div>
+
+            {/* 当前位置 */}
+            <div className="flex items-center gap-[4px] mt-[6px] shrink-0">
+              <IconFont name="location" size="14px" className="text-accent" />
+              <span className="text-[12px] text-muted-foreground leading-[16px]">
+                你正在 <span className="text-accent font-medium">SKP(国贸店)</span> 附近
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── 卡片横向滚动区 ── */}
+        <div className="flex-1 min-h-0 relative">
+          <div
+            ref={scrollRef}
+            className="flex gap-[var(--spacing-base)] overflow-x-auto px-[var(--spacing-lg)] pb-[var(--spacing-base)] pt-[var(--spacing-xs)] snap-x snap-mandatory scrollbar-hide"
+            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+          >
+            {poiCards.map((card) => (
+              <div key={card.id} className="snap-start">
+                <RecommendCard
+                  card={card}
+                  onTap={() => showToast(`查看「${card.title.slice(0, 8)}...」详情`)}
+                  onAiPrompt={handleAiPrompt}
+                />
+              </div>
+            ))}
+            {/* 右侧留白 */}
+            <div className="shrink-0 w-[var(--spacing-lg)]" />
+          </div>
+
+          {/* 右侧播放按钮（自动播放指示） */}
+          <div className="absolute right-[var(--spacing-base)] top-[var(--spacing-xs)]">
+            <button
+              className="size-[36px] rounded-full bg-accent flex items-center justify-center shadow-md active:opacity-80 transition-opacity"
+              onClick={() => showToast("自动播放推荐中...")}
+            >
+              <IconFont name="play-circle" size="20px" className="text-white" />
+            </button>
+          </div>
+        </div>
+
+        {/* ── AI 结果面板 ── */}
+        <AnimatePresence>
+          {(aiGenerating || aiResults) && (
+            <motion.div
+              initial={{ opacity: 0, y: 40 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 40 }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="absolute inset-x-0 bottom-[80px] z-30 mx-[var(--spacing-base)]"
+            >
+              <div
+                className={cn(
+                  "rounded-[var(--radius-card)] overflow-hidden",
+                  "bg-card backdrop-blur-xl",
+                  "shadow-[var(--elevation-sm)]",
+                  "border border-card-border"
+                )}
+              >
+                {/* 头部 */}
+                <div className="flex items-center justify-between px-[var(--spacing-base)] pt-[var(--spacing-base)] pb-[var(--spacing-xs)]">
+                  <div className="flex items-center gap-[6px]">
+                    <IconFont name="star" size="14px" className="text-accent" />
+                    <span className="text-[14px] font-medium text-foreground leading-[20px]">
+                      AI 推荐
+                    </span>
+                    {currentPrompt && (
+                      <span className="text-[12px] text-muted-foreground ml-[4px] truncate max-w-[180px]">
+                        「{currentPrompt}」
+                      </span>
+                    )}
+                  </div>
+                  <button
+                    onClick={handleCloseAI}
+                    className="text-muted-foreground active:opacity-60 text-[12px]"
+                  >
+                    关闭
+                  </button>
+                </div>
+
+                {/* 内容 */}
+                <div className="px-[var(--spacing-base)] pb-[var(--spacing-base)] max-h-[280px] overflow-y-auto">
+                  {aiGenerating ? (
+                    <div className="flex flex-col items-center py-[var(--spacing-xl)]">
+                      <div className="flex items-center gap-[8px] mb-[var(--spacing-sm)]">
+                        <motion.div
+                          className="size-[8px] rounded-full bg-accent"
+                          animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}
+                          transition={{ repeat: Infinity, duration: 1, delay: 0 }}
+                        />
+                        <motion.div
+                          className="size-[8px] rounded-full bg-accent"
+                          animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}
+                          transition={{ repeat: Infinity, duration: 1, delay: 0.2 }}
+                        />
+                        <motion.div
+                          className="size-[8px] rounded-full bg-accent"
+                          animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}
+                          transition={{ repeat: Infinity, duration: 1, delay: 0.4 }}
+                        />
+                      </div>
+                      <p className="text-[13px] text-muted-foreground">正在为你生成推荐...</p>
+                    </div>
+                  ) : aiResults ? (
+                    <div className="flex flex-col gap-[var(--spacing-xs)]">
+                      {aiResults.map((result, index) => (
+                        <motion.button
+                          key={result.name}
+                          initial={{ opacity: 0, x: -12 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{ delay: index * 0.1 }}
+                          onClick={() => showToast(`正在导航至${result.name}...`)}
+                          className={cn(
+                            "flex items-center gap-[var(--spacing-sm)] p-[var(--spacing-sm)] text-left",
+                            "rounded-[16px] bg-card-muted active:bg-muted transition-colors"
+                          )}
+                        >
+                          {/* 序号 */}
+                          <div
+                            className={cn(
+                              "size-[28px] rounded-full flex items-center justify-center shrink-0 text-[12px] font-bold",
+                              index === 0
+                                ? "bg-accent text-white"
+                                : "bg-muted text-muted-foreground"
+                            )}
+                          >
+                            {index + 1}
+                          </div>
+
+                          {/* 信息 */}
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-[6px]">
+                              <span className="text-[14px] font-medium text-foreground leading-[20px] truncate">
+                                {result.name}
+                              </span>
+                              <span className="text-[12px] text-accent font-medium shrink-0">
+                                {result.rating}分
+                              </span>
+                            </div>
+                            <p className="text-[12px] text-muted-foreground leading-[16px] truncate mt-[1px]">
+                              {result.reason}
+                            </p>
+                          </div>
+
+                          {/* 距离 + 导航 */}
+                          <div className="flex flex-col items-end shrink-0 gap-[2px]">
+                            <span className="text-[12px] text-accent font-medium">{result.distance}</span>
+                            <Btn size="xsmall" variant="primary" label="去这里" icon={null} />
+                          </div>
+                        </motion.button>
+                      ))}
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* ── 底部 AI 输入栏 ── */}
+        <div className="relative z-40 px-[var(--spacing-lg)] pb-[var(--spacing-lg)] pt-[var(--spacing-xs)]">
+          <AIInputBar
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={handleSend}
+            placeholder="适合下班后和同事聚餐的地方，4个人"
+          />
+        </div>
+      </div>
+
+      {/* ── Toast ── */}
+      <div className="fixed top-[120px] left-0 right-0 z-[200] flex justify-center pointer-events-none">
+        <AnimatePresence>
+          {toastText && (
+            <div className="pointer-events-auto">
+              <Toast
+                lines={[toastText]}
+                showIcon={true}
+                showClose={true}
+                onClose={() => setToastText(null)}
+              />
+            </div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}