@lmy54321/design-system 1.1.3 → 1.2.0

package/template/src/pages/SearchFlowDemo.tsx

@@ -0,0 +1,954 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { SearchBox } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { BottomSheet } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+
+/* ══════════════════════════════════════════
+   类型定义
+   ══════════════════════════════════════════ */
+
+type FlowStep = "home" | "sug" | "result" | "detail";
+
+interface SugItem {
+  id: string;
+  name: string;
+  address: string;
+  category: string;
+  distance: string;
+}
+
+interface POIDetail {
+  id: string;
+  name: string;
+  address: string;
+  category: string;
+  distance: string;
+  rating: string;
+  ratingCount: string;
+  pricePerPerson: string;
+  phone: string;
+  hours: string;
+  image: string;
+  tags: string[];
+  photos: string[];
+  lat: number;
+  lng: number;
+}
+
+/* ══════════════════════════════════════════
+   模拟数据
+   ══════════════════════════════════════════ */
+
+const searchHistory = [
+  "天安门广场",
+  "三里屯太古里",
+  "北京南站",
+  "颐和园",
+  "望京SOHO",
+  "朝阳大悦城",
+];
+
+const hotSearches = [
+  { rank: 1, text: "故宫博物院", hot: true },
+  { rank: 2, text: "环球影城", hot: true },
+  { rank: 3, text: "国贸大厦", hot: false },
+  { rank: 4, text: "西单大悦城", hot: false },
+  { rank: 5, text: "鸟巢体育馆", hot: false },
+  { rank: 6, text: "中关村", hot: false },
+];
+
+const quickCategories = [
+  { icon: "fork", label: "美食" },
+  { icon: "tea", label: "咖啡" },
+  { icon: "building", label: "酒店" },
+  { icon: "vehicle", label: "加油站" },
+  { icon: "map-marked", label: "停车场" },
+  { icon: "film", label: "电影" },
+];
+
+const allSuggestions: SugItem[] = [
+  { id: "1", name: "天安门广场", address: "北京市东城区东长安街", category: "景点", distance: "6.2km" },
+  { id: "2", name: "天安门城楼", address: "北京市东城区天安门", category: "景点", distance: "6.3km" },
+  { id: "3", name: "天坛公园", address: "北京市东城区天坛内东里7号", category: "公园", distance: "8.1km" },
+  { id: "4", name: "天通苑", address: "北京市昌平区天通苑社区", category: "住宅区", distance: "18.5km" },
+  { id: "5", name: "三里屯太古里", address: "北京市朝阳区三里屯路19号", category: "商场", distance: "4.5km" },
+  { id: "6", name: "三里屯SOHO", address: "北京市朝阳区工体北路8号", category: "写字楼", distance: "4.2km" },
+  { id: "7", name: "故宫博物院", address: "北京市东城区景山前街4号", category: "博物馆", distance: "7.0km" },
+  { id: "8", name: "颐和园", address: "北京市海淀区新建宫门路19号", category: "公园", distance: "14.2km" },
+  { id: "9", name: "北京南站", address: "北京市丰台区永外大街车站路12号", category: "火车站", distance: "8.5km" },
+  { id: "10", name: "北京西站", address: "北京市丰台区莲花池东路118号", category: "火车站", distance: "10.3km" },
+  { id: "11", name: "望京SOHO", address: "北京市朝阳区望京街10号", category: "写字楼", distance: "2.1km" },
+  { id: "12", name: "国贸商城", address: "北京市朝阳区建国门外大街1号", category: "商场", distance: "5.8km" },
+  { id: "13", name: "朝阳大悦城", address: "北京市朝阳区朝阳北路101号", category: "商场", distance: "3.2km" },
+  { id: "14", name: "中关村软件园", address: "北京市海淀区东北旺西路8号", category: "科技园", distance: "15.2km" },
+  { id: "15", name: "环球影城", address: "北京市通州区京哈高速与东六环路交叉口", category: "主题公园", distance: "25.0km" },
+  { id: "16", name: "西单大悦城", address: "北京市西城区西单北大街131号", category: "商场", distance: "8.8km" },
+];
+
+/* 搜索结果列表 POI 数据 — 更丰富 */
+const searchResultPOIs: POIDetail[] = [
+  // ── 美食 ──
+  {
+    id: "r1", name: "四季民福烤鸭店（故宫店）", address: "北京市东城区南池子大街11号", category: "美食",
+    distance: "5.8km", rating: "4.7", ratingCount: "3.2万", pricePerPerson: "168",
+    phone: "010-65260008", hours: "11:00-22:00", lat: 39.9120, lng: 116.4050,
+    tags: ["烤鸭", "老字号", "排队名店"],
+    image: "/images/scene/peking-duck.png",
+    photos: [
+      "/images/scene/peking-duck.png",
+      "/images/scene/hotpot.png",
+      "/images/scene/pizza.png",
+    ],
+  },
+  {
+    id: "r2", name: "海底捞火锅（望京店）", address: "北京市朝阳区望京街9号", category: "美食",
+    distance: "2.3km", rating: "4.6", ratingCount: "1.8万", pricePerPerson: "135",
+    phone: "010-64788899", hours: "10:00-次日07:00", lat: 39.9920, lng: 116.4800,
+    tags: ["火锅", "服务好", "24小时"],
+    image: "/images/scene/hotpot.png",
+    photos: [
+      "/images/scene/hotpot.png",
+      "/images/scene/peking-duck.png",
+    ],
+  },
+  {
+    id: "r3", name: "文和友老长沙龙虾馆", address: "北京市朝阳区三里屯路19号", category: "美食",
+    distance: "4.5km", rating: "4.4", ratingCount: "8765", pricePerPerson: "108",
+    phone: "010-64178800", hours: "11:30-凌晨02:00", lat: 39.9340, lng: 116.4540,
+    tags: ["小龙虾", "网红餐厅", "夜宵"],
+    image: "/images/scene/crayfish.png",
+    photos: [
+      "/images/scene/crayfish.png",
+      "/images/scene/hotpot.png",
+    ],
+  },
+  // ── 咖啡 ──
+  {
+    id: "r4", name: "Manner Coffee（国贸店）", address: "北京市朝阳区建国门外大街1号", category: "咖啡",
+    distance: "5.2km", rating: "4.5", ratingCount: "6543", pricePerPerson: "25",
+    phone: "010-65051234", hours: "07:30-20:00", lat: 39.9085, lng: 116.4600,
+    tags: ["精品咖啡", "性价比", "自带杯减5"],
+    image: "/images/scene/pour-coffee.png",
+    photos: [
+      "/images/scene/pour-coffee.png",
+      "/images/scene/cafe.png",
+      "/images/scene/matcha.png",
+    ],
+  },
+  {
+    id: "r5", name: "星巴克臻选（三里屯旗舰店）", address: "北京市朝阳区三里屯路11号", category: "咖啡",
+    distance: "4.6km", rating: "4.3", ratingCount: "1.2万", pricePerPerson: "42",
+    phone: "010-64176688", hours: "07:00-23:00", lat: 39.9350, lng: 116.4530,
+    tags: ["臻选门店", "手冲咖啡", "空间大"],
+    image: "/images/scene/cafe.png",
+    photos: [
+      "/images/scene/cafe.png",
+      "/images/scene/pour-coffee.png",
+    ],
+  },
+  // ── 酒店 ──
+  {
+    id: "r6", name: "北京国贸大酒店", address: "北京市朝阳区建国门外大街1号", category: "酒店",
+    distance: "5.3km", rating: "4.8", ratingCount: "2.1万", pricePerPerson: "1280",
+    phone: "010-65052299", hours: "全天", lat: 39.9080, lng: 116.4610,
+    tags: ["五星级", "商务出行", "CBD核心"],
+    image: "/images/scene/hotel.png",
+    photos: [
+      "/images/scene/hotel.png",
+      "/images/scene/hotel-room.png",
+    ],
+  },
+  {
+    id: "r7", name: "亚朵酒店（望京SOHO店）", address: "北京市朝阳区望京街10号", category: "酒店",
+    distance: "2.0km", rating: "4.6", ratingCount: "9876", pricePerPerson: "458",
+    phone: "010-64789900", hours: "全天", lat: 39.9930, lng: 116.4790,
+    tags: ["人文主题", "免费书吧", "性价比"],
+    image: "/images/scene/hotel-room.png",
+    photos: [
+      "/images/scene/hotel-room.png",
+      "/images/scene/hotel.png",
+    ],
+  },
+  // ── 加油站 ──
+  {
+    id: "r8", name: "中国石化（望京南加油站）", address: "北京市朝阳区广顺南大街16号", category: "加油站",
+    distance: "1.8km", rating: "4.2", ratingCount: "3245", pricePerPerson: "",
+    phone: "010-64739988", hours: "06:00-23:00", lat: 39.9870, lng: 116.4720,
+    tags: ["92号", "95号", "柴油"],
+    image: "/images/scene/gas-station.png",
+    photos: [
+      "/images/scene/gas-station.png",
+    ],
+  },
+  {
+    id: "r9", name: "中国石油（酒仙桥加油站）", address: "北京市朝阳区酒仙桥路12号", category: "加油站",
+    distance: "3.1km", rating: "4.0", ratingCount: "2180", pricePerPerson: "",
+    phone: "010-64371122", hours: "全天", lat: 39.9750, lng: 116.4900,
+    tags: ["24小时", "洗车服务", "便利店"],
+    image: "/images/scene/gas-station.png",
+    photos: [
+      "/images/scene/gas-station.png",
+    ],
+  },
+  // ── 停车场 ──
+  {
+    id: "r10", name: "望京SOHO地下停车场", address: "北京市朝阳区望京街10号B2", category: "停车场",
+    distance: "2.1km", rating: "4.1", ratingCount: "5432", pricePerPerson: "8",
+    phone: "010-64780088", hours: "全天", lat: 39.9925, lng: 116.4785,
+    tags: ["地下停车", "8元/小时", "车位充足"],
+    image: "/images/scene/parking.png",
+    photos: [
+      "/images/scene/parking.png",
+    ],
+  },
+  {
+    id: "r11", name: "三里屯太古里停车场", address: "北京市朝阳区三里屯路19号B1", category: "停车场",
+    distance: "4.5km", rating: "3.9", ratingCount: "8765", pricePerPerson: "10",
+    phone: "010-64170088", hours: "全天", lat: 39.9345, lng: 116.4535,
+    tags: ["消费满减", "10元/小时", "节假日拥挤"],
+    image: "/images/scene/parking.png",
+    photos: [
+      "/images/scene/parking.png",
+    ],
+  },
+  // ── 电影 ──
+  {
+    id: "r12", name: "万达影城（望京IMAX店）", address: "北京市朝阳区望京西路48号", category: "电影",
+    distance: "2.5km", rating: "4.5", ratingCount: "2.3万", pricePerPerson: "55",
+    phone: "010-64738866", hours: "09:00-次日01:00", lat: 39.9880, lng: 116.4680,
+    tags: ["IMAX", "杜比全景声", "VIP厅"],
+    image: "/images/scene/cinema.png",
+    photos: [
+      "/images/scene/cinema.png",
+    ],
+  },
+  {
+    id: "r13", name: "CGV影城（三里屯店）", address: "北京市朝阳区三里屯路19号太古里南区", category: "电影",
+    distance: "4.7km", rating: "4.6", ratingCount: "1.5万", pricePerPerson: "68",
+    phone: "010-64176677", hours: "10:00-次日00:00", lat: 39.9348, lng: 116.4528,
+    tags: ["4DX", "ScreenX", "情侣座"],
+    image: "/images/scene/cinema.png",
+    photos: [
+      "/images/scene/cinema.png",
+    ],
+  },
+  // ── 景点（保留原有） ──
+  {
+    id: "r14", name: "故宫博物院", address: "北京市东城区景山前街4号", category: "景点",
+    distance: "7.0km", rating: "4.9", ratingCount: "28.6万", pricePerPerson: "60",
+    phone: "010-85007421", hours: "08:30-17:00", lat: 39.9163, lng: 116.3972,
+    tags: ["5A景区", "世界文化遗产", "必去打卡"],
+    image: "/images/feed-axis.png",
+    photos: [
+      "/images/feed-axis.png",
+      "/images/feed/feed-museum.png",
+      "/images/scene/trip-palace.png",
+      "/images/scene/jingshan.png",
+    ],
+  },
+  {
+    id: "r15", name: "景山公园", address: "北京市西城区景山西街44号", category: "景点",
+    distance: "6.8km", rating: "4.8", ratingCount: "15.3万", pricePerPerson: "2",
+    phone: "010-64038098", hours: "06:00-21:00", lat: 39.9245, lng: 116.3967,
+    tags: ["登高望远", "故宫全景", "历史遗迹"],
+    image: "/images/scene/jingshan.png",
+    photos: [
+      "/images/scene/jingshan.png",
+      "/images/scene/trip-palace.png",
+    ],
+  },
+];
+
+/* ══════════════════════════════════════════
+   工具函数
+   ══════════════════════════════════════════ */
+
+function HighlightText({ text, query }: { text: string; query: string }) {
+  if (!query) return <>{text}</>;
+  const parts = text.split(new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi"));
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.toLowerCase() === query.toLowerCase() ? (
+          <span key={i} className="text-accent font-medium">{part}</span>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </>
+  );
+}
+
+/* ══════════════════════════════════════════
+   Step 1: 搜索首页
+   ══════════════════════════════════════════ */
+
+function SearchHome({
+  history,
+  onSelectHistory,
+  onRemoveHistory,
+  onClearHistory,
+  onSelectCategory,
+  onSelectHot,
+}: {
+  history: string[];
+  onSelectHistory: (t: string) => void;
+  onRemoveHistory: (t: string) => void;
+  onClearHistory: () => void;
+  onSelectCategory: (label: string) => void;
+  onSelectHot: (t: string) => void;
+}) {
+  return (
+    <motion.div
+      key="search-home"
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -8 }}
+      transition={{ duration: 0.2 }}
+    >
+      {/* 快捷分类 */}
+      <div className="px-[var(--spacing-base)] pt-[var(--spacing-xs)] pb-[var(--spacing-sm)]">
+        <div className="flex items-center gap-[6px] mb-[var(--spacing-sm)] px-[var(--spacing-xxs)]">
+          <IconFont name="star" variant="filled" size="13px" className="text-accent" />
+          <span className="text-[13px] font-medium text-foreground/70 leading-[18px]">快捷探索</span>
+        </div>
+        <div className="flex gap-[var(--spacing-md)] overflow-x-auto pb-[var(--spacing-xs)]" style={{ scrollbarWidth: "none" }}>
+          {quickCategories.map((cat, index) => (
+            <motion.button
+              key={cat.label}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.04, duration: 0.2 }}
+              onClick={() => onSelectCategory(cat.label)}
+              className="flex flex-col items-center shrink-0 cursor-pointer active:scale-95 transition-transform"
+            >
+              <div className="size-[48px] rounded-full bg-card-muted flex items-center justify-center mb-[6px]">
+                <IconFont name={cat.icon} size="22px" className="text-foreground/70" />
+              </div>
+              <span className="text-[12px] text-foreground font-medium leading-[16px] whitespace-nowrap">{cat.label}</span>
+            </motion.button>
+          ))}
+        </div>
+      </div>
+
+      {/* 搜索历史 */}
+      {history.length > 0 && (
+        <div className="px-[var(--spacing-base)] pb-[var(--spacing-md)]">
+          <div className="flex items-center justify-between mb-[var(--spacing-sm)]">
+            <div className="flex items-center gap-[var(--spacing-xxs)]">
+              <IconFont name="time" size="14px" className="text-muted-foreground" />
+              <span className="text-[13px] font-medium text-foreground leading-[18px]">最近搜索</span>
+            </div>
+            <button onClick={onClearHistory} className="text-[12px] text-muted-foreground active:opacity-60 transition-opacity">清空</button>
+          </div>
+          <div className="flex flex-wrap gap-[var(--spacing-xs)] items-center">
+            {history.map((text, index) => (
+              <motion.button
+                key={text}
+                initial={{ opacity: 0, scale: 0.92 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: index * 0.03, duration: 0.2 }}
+                onClick={() => onSelectHistory(text)}
+                className="h-[34px] px-[var(--spacing-sm)] flex items-center gap-[6px] bg-card rounded-[var(--radius-button)] border border-card-border shadow-[var(--elevation-sm)] text-[13px] text-foreground active:bg-muted transition-colors"
+              >
+                {text}
+                <span
+                  onClick={(e) => { e.stopPropagation(); onRemoveHistory(text); }}
+                  className="text-muted-foreground/40 hover:text-muted-foreground"
+                >
+                  <IconFont name="close" size="11px" />
+                </span>
+              </motion.button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="mx-[var(--spacing-lg)] h-px bg-border/30" />
+
+      {/* 热门搜索 */}
+      <div className="px-[var(--spacing-base)] pt-[var(--spacing-md)] pb-[var(--spacing-lg)]">
+        <div className="flex items-center gap-[var(--spacing-xxs)] mb-[var(--spacing-sm)]">
+          <IconFont name="trending-up" size="14px" className="text-destructive" />
+          <span className="text-[13px] font-medium text-foreground leading-[18px]">热门搜索</span>
+        </div>
+        <div className="rounded-[var(--radius)] bg-card-muted p-[var(--spacing-sm)]">
+          <div className="flex gap-[var(--spacing-xs)]">
+            {[0, 1].map(col => (
+              <div key={col} className="flex-1 flex flex-col">
+                {hotSearches.filter((_, i) => i % 2 === col).map(item => (
+                  <motion.button
+                    key={item.text}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: item.rank * 0.04, duration: 0.25 }}
+                    onClick={() => onSelectHot(item.text)}
+                    className="flex items-center gap-[var(--spacing-xs)] px-[var(--spacing-xs)] py-[var(--spacing-sm)] text-left active:bg-background/60 rounded-[12px] transition-colors"
+                  >
+                    <div className={cn("size-[22px] rounded-full flex items-center justify-center shrink-0 text-[11px] font-bold", item.rank <= 3 ? "bg-destructive/12 text-destructive" : "bg-background text-muted-foreground")}>
+                      {item.rank}
+                    </div>
+                    <span className="text-[14px] text-foreground leading-[20px] flex-1 truncate font-medium">{item.text}</span>
+                    {item.hot && <Tag label="热" size="xs" className="bg-destructive/10 text-destructive border-transparent shrink-0" />}
+                  </motion.button>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   Step 2: Sug 搜索建议
+   ══════════════════════════════════════════ */
+
+function SugList({
+  suggestions,
+  query,
+  onSelect,
+  onFill,
+}: {
+  suggestions: SugItem[];
+  query: string;
+  onSelect: (item: SugItem) => void;
+  onFill: (name: string) => void;
+}) {
+  if (suggestions.length === 0) {
+    return (
+      <motion.div key="sug-empty" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex flex-col items-center justify-center py-[60px]">
+        <div className="size-[56px] rounded-full bg-card-muted flex items-center justify-center text-muted-foreground mb-[var(--spacing-sm)]">
+          <IconFont name="search" size="24px" />
+        </div>
+        <p className="text-[14px] text-muted-foreground">未找到「{query}」相关结果</p>
+        <p className="text-[12px] text-muted-foreground/60 mt-[var(--spacing-xxs)]">试试其他关键词</p>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      key="sug-list"
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -8 }}
+      transition={{ duration: 0.2 }}
+      className="flex flex-col px-[var(--spacing-base)]"
+    >
+      {suggestions.map((item, index) => (
+        <motion.button
+          key={item.id}
+          initial={{ opacity: 0, x: -10 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: index * 0.03 }}
+          onClick={() => onSelect(item)}
+          className={cn(
+            "flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-left",
+            "active:bg-muted/40 -mx-[var(--spacing-xxs)] px-[var(--spacing-xxs)] rounded-[12px] transition-colors",
+            index < suggestions.length - 1 && "border-b border-border/50"
+          )}
+        >
+          <div className="size-[36px] rounded-full bg-card-muted flex items-center justify-center text-muted-foreground shrink-0">
+            <IconFont name="location" size="18px" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-[var(--spacing-xs)]">
+              <span className="text-[15px] font-medium text-foreground leading-[22px] truncate">
+                <HighlightText text={item.name} query={query} />
+              </span>
+              <Tag label={item.category} size="xs" className="bg-card-muted text-muted-foreground border-transparent shrink-0" />
+            </div>
+            <span className="text-[12px] text-muted-foreground leading-[16px] truncate block mt-[2px]">
+              <HighlightText text={item.address} query={query} />
+            </span>
+          </div>
+          <span className="text-[12px] text-accent font-medium shrink-0">{item.distance}</span>
+          <button
+            onClick={(e) => { e.stopPropagation(); onFill(item.name); }}
+            className="text-muted-foreground/40 shrink-0 rotate-[-135deg] active:text-accent transition-colors p-[4px]"
+          >
+            <IconFont name="arrow-up" size="14px" />
+          </button>
+        </motion.button>
+      ))}
+    </motion.div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   Step 3: 搜索结果列表
+   ══════════════════════════════════════════ */
+
+function SearchResultList({
+  query,
+  results,
+  onSelectPOI,
+}: {
+  query: string;
+  results: POIDetail[];
+  onSelectPOI: (poi: POIDetail) => void;
+}) {
+  return (
+    <motion.div
+      key="result-list"
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -8 }}
+      transition={{ duration: 0.2 }}
+    >
+      {/* 结果统计 + 筛选栏 */}
+      <div className="px-[var(--spacing-base)] py-[var(--spacing-xs)]">
+        <div className="flex items-center justify-between">
+          <span className="text-[13px] text-muted-foreground">
+            找到 <span className="text-foreground font-medium">{results.length}</span> 个「{query}」相关结果
+          </span>
+          <div className="flex gap-[6px]">
+            <Tag label="综合排序" size="sm" className="bg-card-muted text-foreground border-transparent" showArrow />
+            <Tag label="筛选" size="sm" className="bg-card-muted text-foreground border-transparent" icon={<IconFont name="filter" size="12px" />} />
+          </div>
+        </div>
+      </div>
+
+      {/* POI 列表 */}
+      <div className="px-[var(--spacing-base)]">
+        {results.map((poi, index) => (
+          <motion.div
+            key={poi.id}
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.06, duration: 0.3 }}
+            onClick={() => onSelectPOI(poi)}
+            className="flex gap-[var(--spacing-sm)] py-[var(--spacing-sm)] cursor-pointer active:bg-muted/20 -mx-[4px] px-[4px] rounded-[12px] transition-colors border-b border-border/30 last:border-0"
+          >
+            {/* 图片 */}
+            <div className="shrink-0 w-[91px] h-[91px] rounded-[12px] overflow-hidden bg-card-muted">
+              <ImageWithFallback src={poi.image} alt={poi.name} className="w-full h-full object-cover" />
+            </div>
+            {/* 内容 */}
+            <div className="flex-1 min-w-0 flex flex-col gap-[6px]">
+              <div className="flex items-center gap-[4px]">
+                <span className="text-[16px] font-medium text-foreground leading-[22px] truncate">
+                  <HighlightText text={poi.name} query={query} />
+                </span>
+              </div>
+              {/* 标签 */}
+              <div className="flex gap-[4px] overflow-x-auto" style={{ scrollbarWidth: "none" }}>
+                {poi.tags.slice(0, 3).map(t => (
+                  <span key={t} className="shrink-0 h-[20px] px-[6px] flex items-center rounded-[4px] bg-accent/8 text-accent text-[11px] font-medium">{t}</span>
+                ))}
+              </div>
+              {/* 评分/价格/分类 */}
+              <div className="flex gap-[6px] items-center text-[12px] leading-[16px] text-muted-foreground">
+                <span className="text-[#FF8C00] font-medium">{poi.rating}分</span>
+                <span className="text-border">|</span>
+                <span>¥{poi.pricePerPerson}/人</span>
+                <span className="text-border">|</span>
+                <span>{poi.category}</span>
+              </div>
+              {/* 距离/地址 */}
+              <div className="flex gap-[6px] items-center text-[12px] leading-[16px] text-muted-foreground">
+                <span className="text-accent font-medium">{poi.distance}</span>
+                <span className="truncate">{poi.address}</span>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   Step 4: POI 详情页
+   ══════════════════════════════════════════ */
+
+function POIDetailView({
+  poi,
+  onBack,
+  onToast,
+}: {
+  poi: POIDetail;
+  onBack: () => void;
+  onToast: (t: string) => void;
+}) {
+  const [showShare, setShowShare] = useState(false);
+
+  return (
+    <motion.div
+      key="poi-detail"
+      className="absolute inset-0 z-[60] bg-background flex flex-col"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+      transition={{ duration: 0.25 }}
+    >
+      {/* 头部图片 */}
+      <div className="relative shrink-0 h-[240px] bg-card-muted">
+        <ImageWithFallback src={poi.image} alt={poi.name} className="w-full h-full object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20" />
+        {/* 返回 + 操作按钮 */}
+        <div className="absolute top-[48px] left-0 right-0 px-[var(--spacing-base)] flex items-center justify-between">
+          <button onClick={onBack} className="size-[36px] rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center active:bg-black/50 transition-colors">
+            <IconFont name="chevron-left" size="20px" className="text-white" />
+          </button>
+          <div className="flex gap-[8px]">
+            <button onClick={() => setShowShare(true)} className="size-[36px] rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center active:bg-black/50 transition-colors">
+              <IconFont name="share" size="18px" className="text-white" />
+            </button>
+            <button onClick={() => onToast("已收藏")} className="size-[36px] rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center active:bg-black/50 transition-colors">
+              <IconFont name="star" size="18px" className="text-white" />
+            </button>
+          </div>
+        </div>
+        {/* 图片计数 */}
+        <div className="absolute bottom-[12px] right-[12px] bg-black/40 backdrop-blur-sm rounded-[12px] px-[8px] py-[3px] flex items-center gap-[4px]">
+          <IconFont name="image" size="12px" className="text-white/80" />
+          <span className="text-[11px] text-white/90">{poi.photos.length}张</span>
+        </div>
+      </div>
+
+      {/* 内容滚动区 */}
+      <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: "none" }}>
+        {/* 基本信息 */}
+        <div className="px-[var(--spacing-base)] pt-[var(--spacing-base)] pb-[var(--spacing-sm)]">
+          <h1 className="text-[22px] font-semibold text-foreground leading-[30px]">{poi.name}</h1>
+          <div className="flex items-center gap-[8px] mt-[6px]">
+            <div className="flex items-center gap-[3px]">
+              <IconFont name="star" variant="filled" size="14px" className="text-[#FF8C00]" />
+              <span className="text-[15px] font-semibold text-[#FF8C00]">{poi.rating}</span>
+              <span className="text-[12px] text-muted-foreground">({poi.ratingCount}条)</span>
+            </div>
+            <span className="text-border">|</span>
+            <span className="text-[13px] text-foreground">¥{poi.pricePerPerson}/人</span>
+            <span className="text-border">|</span>
+            <span className="text-[13px] text-muted-foreground">{poi.category}</span>
+          </div>
+          {/* 标签 */}
+          <div className="flex gap-[6px] mt-[10px] overflow-x-auto" style={{ scrollbarWidth: "none" }}>
+            {poi.tags.map(t => (
+              <span key={t} className="shrink-0 h-[24px] px-[10px] flex items-center rounded-[12px] bg-accent/8 text-accent text-[12px] font-medium">{t}</span>
+            ))}
+          </div>
+        </div>
+
+        {/* 信息卡片 */}
+        <div className="px-[var(--spacing-base)] pb-[var(--spacing-sm)]">
+          <div className="bg-card-muted rounded-[16px] p-[var(--spacing-base)] flex flex-col gap-[var(--spacing-sm)]">
+            <div className="flex items-start gap-[var(--spacing-sm)]">
+              <IconFont name="location" size="16px" className="text-muted-foreground mt-[2px] shrink-0" />
+              <div className="flex-1 min-w-0">
+                <span className="text-[14px] text-foreground leading-[20px]">{poi.address}</span>
+                <span className="text-[12px] text-accent ml-[6px]">{poi.distance}</span>
+              </div>
+              <button onClick={() => onToast("已复制地址")} className="shrink-0">
+                <IconFont name="file-copy" size="16px" className="text-muted-foreground" />
+              </button>
+            </div>
+            <div className="h-px bg-border/30" />
+            <div className="flex items-center gap-[var(--spacing-sm)]">
+              <IconFont name="call" size="16px" className="text-muted-foreground shrink-0" />
+              <span className="text-[14px] text-accent flex-1">{poi.phone}</span>
+              <button onClick={() => onToast(`拨打 ${poi.phone}`)} className="shrink-0">
+                <IconFont name="call" size="16px" className="text-accent" />
+              </button>
+            </div>
+            <div className="h-px bg-border/30" />
+            <div className="flex items-center gap-[var(--spacing-sm)]">
+              <IconFont name="time" size="16px" className="text-muted-foreground shrink-0" />
+              <span className="text-[14px] text-foreground flex-1">营业时间 {poi.hours}</span>
+              <Tag label="营业中" size="xs" className="bg-[#22C55E]/10 text-[#22C55E] border-transparent" />
+            </div>
+          </div>
+        </div>
+
+        {/* 图片墙 */}
+        <div className="px-[var(--spacing-base)] pb-[var(--spacing-sm)]">
+          <div className="flex items-center justify-between mb-[var(--spacing-xs)]">
+            <span className="text-[15px] font-medium text-foreground">用户照片</span>
+            <button className="text-[13px] text-accent flex items-center gap-[2px]">
+              全部 <IconFont name="chevron-right" size="14px" />
+            </button>
+          </div>
+          <div className="flex gap-[8px] overflow-x-auto" style={{ scrollbarWidth: "none" }}>
+            {poi.photos.map((p, i) => (
+              <div key={i} className="shrink-0 w-[120px] h-[90px] rounded-[12px] overflow-hidden bg-card-muted">
+                <ImageWithFallback src={p} alt={`${poi.name} ${i + 1}`} className="w-full h-full object-cover" />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 周边推荐 placeholder */}
+        <div className="px-[var(--spacing-base)] pb-[var(--spacing-base)]">
+          <div className="flex items-center gap-[6px] mb-[var(--spacing-xs)]">
+            <IconFont name="map-marked" size="15px" className="text-accent" />
+            <span className="text-[15px] font-medium text-foreground">周边推荐</span>
+          </div>
+          <div className="grid grid-cols-2 gap-[8px]">
+            {["附近美食", "周边景点", "酒店住宿", "交通出行"].map(label => (
+              <button
+                key={label}
+                onClick={() => onToast(`查看${label}`)}
+                className="flex items-center gap-[8px] p-[12px] bg-card-muted rounded-[12px] active:bg-muted transition-colors"
+              >
+                <IconFont
+                  name={label === "附近美食" ? "fork" : label === "周边景点" ? "map-marked" : label === "酒店住宿" ? "building" : "vehicle"}
+                  size="18px"
+                  className="text-muted-foreground"
+                />
+                <span className="text-[13px] text-foreground font-medium">{label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* 底部留白 */}
+        <div className="h-[80px]" />
+      </div>
+
+      {/* 底部操作栏 */}
+      <div className="shrink-0 border-t border-border/30 bg-background px-[var(--spacing-base)] py-[var(--spacing-sm)] pb-[max(var(--spacing-sm),env(safe-area-inset-bottom))]">
+        <div className="flex gap-[var(--spacing-xs)]">
+          <button onClick={() => onToast(`拨打 ${poi.phone}`)} className="size-[48px] rounded-full bg-card-muted flex items-center justify-center shrink-0 active:bg-muted transition-colors">
+            <IconFont name="call" size="20px" className="text-foreground" />
+          </button>
+          <button onClick={() => onToast("已收藏")} className="size-[48px] rounded-full bg-card-muted flex items-center justify-center shrink-0 active:bg-muted transition-colors">
+            <IconFont name="star" size="20px" className="text-foreground" />
+          </button>
+          <Btn size="large" variant="primary" label="到这去" icon={<IconFont name="map-navigation" size="18px" />} onClick={() => onToast(`正在导航至${poi.name}...`)} className="flex-1" />
+        </div>
+      </div>
+
+      {/* 分享弹窗 */}
+      <BottomSheet
+        open={showShare}
+        onOpenChange={setShowShare}
+        title="分享"
+        mainActionText="取消"
+        secondaryActionText="复制链接"
+        onMainAction={() => setShowShare(false)}
+        onSecondaryAction={() => { onToast("链接已复制"); setShowShare(false); }}
+      />
+    </motion.div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   主组件
+   ══════════════════════════════════════════ */
+
+interface SearchFlowDemoProps {
+  onBack?: () => void;
+}
+
+export function SearchFlowDemo({ onBack }: SearchFlowDemoProps) {
+  const [step, setStep] = useState<FlowStep>("home");
+  const [searchValue, setSearchValue] = useState("");
+  const [confirmedQuery, setConfirmedQuery] = useState("");
+  const [toastText, setToastText] = useState<string | null>(null);
+  const [history, setHistory] = useState(searchHistory);
+  const [selectedPOI, setSelectedPOI] = useState<POIDetail | null>(null);
+  const [activeResultTab, setActiveResultTab] = useState("全部");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isSearchingRef = useRef(false);
+
+  const showToast = useCallback((t: string) => setToastText(t), []);
+  useEffect(() => { if (!toastText) return; const id = setTimeout(() => setToastText(null), 2200); return () => clearTimeout(id); }, [toastText]);
+
+  /* Sug 过滤 */
+  const suggestions = useMemo(() => {
+    if (!searchValue.trim()) return [];
+    const q = searchValue.trim().toLowerCase();
+    return allSuggestions.filter(s => s.name.toLowerCase().includes(q) || s.address.toLowerCase().includes(q));
+  }, [searchValue]);
+
+  /* 搜索结果过滤 — 同时考虑 confirmedQuery 和 activeResultTab */
+  const searchResults = useMemo(() => {
+    let results = searchResultPOIs;
+    // 先按搜索词过滤
+    if (confirmedQuery.trim()) {
+      const q = confirmedQuery.trim().toLowerCase();
+      const filtered = searchResultPOIs.filter(p => p.name.toLowerCase().includes(q) || p.category.toLowerCase().includes(q) || p.tags.some(t => t.toLowerCase().includes(q)));
+      if (filtered.length > 0) results = filtered;
+    }
+    // 再按 tab 过滤
+    if (activeResultTab !== "全部") {
+      const tabFiltered = results.filter(p => p.category === activeResultTab);
+      if (tabFiltered.length > 0) results = tabFiltered;
+    }
+    return results;
+  }, [confirmedQuery, activeResultTab]);
+
+  /* 当用户手动输入变化时，切换到 sug（doSearch 触发的不受影响） */
+  useEffect(() => {
+    if (isSearchingRef.current) {
+      isSearchingRef.current = false;
+      return;
+    }
+    if (searchValue.trim() && (step === "home" || step === "result")) {
+      setStep("sug");
+    }
+    if (!searchValue.trim() && step === "sug") {
+      setStep("home");
+    }
+  }, [searchValue, step]);
+
+  /* 结果页 tab 列表 */
+  const resultTabs = ["全部", "美食", "咖啡", "酒店", "加油站", "停车场", "电影", "景点"];
+
+  /* 确认搜索 → 跳到结果 */
+  const doSearch = useCallback((query: string) => {
+    if (!query.trim()) return;
+    isSearchingRef.current = true;
+    setSearchValue(query);
+    setConfirmedQuery(query);
+    setStep("result");
+    // 自动匹配 tab
+    const q = query.trim();
+    const matchedTab = resultTabs.find(t => t !== "全部" && t === q);
+    setActiveResultTab(matchedTab ?? "全部");
+    // 加入历史
+    setHistory(prev => {
+      const filtered = prev.filter(h => h !== query);
+      return [query, ...filtered].slice(0, 8);
+    });
+  }, []);
+
+  /* Sug 项选中 → 直接搜索 */
+  const handleSugSelect = useCallback((item: SugItem) => {
+    doSearch(item.name);
+  }, [doSearch]);
+
+  /* POI 选中 → 详情 */
+  const handleSelectPOI = useCallback((poi: POIDetail) => {
+    setSelectedPOI(poi);
+    setStep("detail");
+  }, []);
+
+  /* 返回逻辑 */
+  const handleBack = useCallback(() => {
+    if (step === "detail") {
+      setStep("result");
+      setSelectedPOI(null);
+    } else if (step === "result") {
+      setStep("sug");
+    } else if (step === "sug") {
+      setSearchValue("");
+      setStep("home");
+    } else {
+      onBack?.();
+    }
+  }, [step, onBack]);
+
+  return (
+    <div className="relative w-full h-full flex flex-col bg-white" style={{ fontFamily: "var(--font-family-sans)" }}>
+      {/* 渐变背景 */}
+      <div className="absolute inset-0 bg-gradient-to-b from-[#EEF2F9] via-[#F4F6FB] to-white" />
+
+      {/* 主内容 */}
+      <div className="relative z-10 flex-1 flex flex-col overflow-hidden">
+        {/* 顶部搜索栏 */}
+        {step !== "detail" && (
+          <div className="relative z-50 pt-[12px] px-[var(--spacing-base)] pb-[var(--spacing-xs)]">
+            <SearchBox
+              value={searchValue}
+              onChange={setSearchValue}
+              variant="card"
+              placeholder="搜索地点、公交、地铁"
+              onBack={handleBack}
+              onSearch={() => doSearch(searchValue)}
+              onMic={() => showToast("语音识别中...")}
+              onClear={() => { setSearchValue(""); setStep("home"); }}
+              className="bg-card-muted"
+            />
+          </div>
+        )}
+
+        {/* 结果页 tab 栏 */}
+        {step === "result" && (
+          <motion.div
+            className="relative z-40 px-[var(--spacing-base)] pb-[var(--spacing-xs)]"
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className="flex gap-[6px] overflow-x-auto" style={{ scrollbarWidth: "none" }}>
+              {resultTabs.map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveResultTab(tab)}
+                  className={cn(
+                    "shrink-0 h-[32px] px-[14px] rounded-[16px] text-[13px] font-medium transition-colors",
+                    activeResultTab === tab ? "bg-primary text-white" : "bg-card-muted text-foreground active:bg-muted"
+                  )}
+                >
+                  {tab}
+                </button>
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+        {/* 内容区 */}
+        <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: "none" }}>
+          <AnimatePresence mode="wait">
+            {step === "home" && (
+              <SearchHome
+                history={history}
+                onSelectHistory={text => doSearch(text)}
+                onRemoveHistory={text => setHistory(prev => prev.filter(h => h !== text))}
+                onClearHistory={() => { setHistory([]); showToast("搜索历史已清空"); }}
+                onSelectCategory={label => doSearch(label)}
+                onSelectHot={text => doSearch(text)}
+              />
+            )}
+            {step === "sug" && (
+              <SugList
+                suggestions={suggestions}
+                query={searchValue.trim()}
+                onSelect={handleSugSelect}
+                onFill={(name) => setSearchValue(name)}
+              />
+            )}
+            {step === "result" && (
+              <SearchResultList
+                query={confirmedQuery}
+                results={searchResults}
+                onSelectPOI={handleSelectPOI}
+              />
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* POI 详情页覆盖层 */}
+      <AnimatePresence>
+        {step === "detail" && selectedPOI && (
+          <POIDetailView
+            poi={selectedPOI}
+            onBack={() => { setStep("result"); setSelectedPOI(null); }}
+            onToast={showToast}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* 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 showClose onClose={() => setToastText(null)} />
+            </div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}