@lmy54321/design-system 1.1.4 → 1.2.0

package/template/src/pages/MapSearchPage.tsx

@@ -0,0 +1,529 @@
+import React, { useState, useEffect, useCallback, useMemo } 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 { Toast } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+
+/* ══════════════════════════════════════════
+   数据
+   ══════════════════════════════════════════ */
+
+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: "美食", image: "/images/scene/peking-duck.png" },
+  { icon: "tea", label: "咖啡", image: "/images/scene/cafe.png" },
+  { icon: "building", label: "酒店", image: "/images/scene/hotel.png" },
+  { icon: "vehicle", label: "加油站", image: "/images/scene/gas-station.png" },
+  { icon: "map-marked", label: "停车场", image: "/images/scene/parking.png" },
+  { icon: "film", label: "电影", image: "/images/scene/cinema.png" },
+];
+
+/* 分类卡片的倾斜角度和偏移 */
+const categoryTransforms = [
+  { rotate: -3, translateY: 0 },
+  { rotate: 2, translateY: -6 },
+  { rotate: -1.5, translateY: 4 },
+  { rotate: 3, translateY: -8 },
+  { rotate: -2, translateY: 2 },
+  { rotate: 1.5, translateY: -4 },
+];
+
+/* 历史标签不倾斜，传统效率型排列 */
+
+interface SuggestItem {
+  id: string;
+  name: string;
+  address: string;
+  category: string;
+  distance: string;
+}
+
+const allSuggestions: SuggestItem[] = [
+  { 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" },
+];
+
+/* ══════════════════════════════════════════
+   高亮文字工具
+   ══════════════════════════════════════════ */
+
+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>
+        )
+      )}
+    </>
+  );
+}
+
+/* ══════════════════════════════════════════
+   快捷分类 — 倾斜错落图片卡片
+   ══════════════════════════════════════════ */
+
+function QuickCategoryGrid({
+  onSelect,
+}: {
+  onSelect: (label: string) => void;
+}) {
+  return (
+    <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" size="13px" className="text-accent" />
+        <span className="text-[13px] font-medium text-foreground/70 leading-[18px]">快捷探索</span>
+      </div>
+      <div className="flex gap-[var(--spacing-xs)] overflow-x-auto pb-[var(--spacing-xs)]" style={{ scrollbarWidth: "none" }}>
+        {quickCategories.map((cat, index) => {
+          const t = categoryTransforms[index];
+          return (
+            <motion.button
+              key={cat.label}
+              initial={{ opacity: 0, y: 20, rotate: 0 }}
+              animate={{ opacity: 1, y: 0, rotate: t.rotate }}
+              transition={{ delay: index * 0.05, type: "spring", stiffness: 300, damping: 20 }}
+              onClick={() => onSelect(cat.label)}
+              className={cn(
+                "flex flex-col items-center shrink-0 w-[88px] cursor-pointer group",
+                "active:scale-95 transition-transform"
+              )}
+              style={{ transform: `rotate(${t.rotate}deg) translateY(${t.translateY}px)` }}
+            >
+              {/* 图片卡 */}
+              <div
+                className={cn(
+                  "w-[80px] h-[64px] rounded-[16px] overflow-hidden mb-[var(--spacing-xs)]",
+                  "bg-card border border-card-border shadow-[var(--elevation-sm)]",
+                  "group-active:shadow-none transition-shadow"
+                )}
+              >
+                <ImageWithFallback
+                  src={cat.image}
+                  alt={cat.label}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              {/* icon + 文字 */}
+              <div className="flex items-center gap-[2px]">
+                <IconFont name={cat.icon} size="14px" className="text-foreground" />
+                <span className="text-[12px] text-foreground font-medium leading-[16px] whitespace-nowrap">
+                  {cat.label}
+                </span>
+              </div>
+            </motion.button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   搜索历史 — 散落标签风格
+   ══════════════════════════════════════════ */
+
+function HistorySection({
+  history,
+  onSelect,
+  onRemove,
+  onClear,
+}: {
+  history: string[];
+  onSelect: (text: string) => void;
+  onRemove: (text: string) => void;
+  onClear: () => void;
+}) {
+  if (history.length === 0) return null;
+  return (
+    <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={onClear}
+          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={() => onSelect(text)}
+            className={cn(
+              "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",
+              "hover:shadow-md"
+            )}
+          >
+            {text}
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove(text);
+              }}
+              className="text-muted-foreground/40 hover:text-muted-foreground"
+            >
+              <IconFont name="close" size="11px" />
+            </span>
+          </motion.button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   热门搜索 — 卡片式错落布局
+   ══════════════════════════════════════════ */
+
+/* 热门搜索不使用倾斜，保持规整高效 */
+
+function HotSearchSection({
+  onSelect,
+}: {
+  onSelect: (text: string) => void;
+}) {
+  /* 拆成两列 */
+  const col1 = hotSearches.filter((_, i) => i % 2 === 0);
+  const col2 = hotSearches.filter((_, i) => i % 2 === 1);
+
+  return (
+    <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="flex gap-[var(--spacing-sm)]">
+        {/* 左列 */}
+        <div className="flex-1 flex flex-col gap-[var(--spacing-xs)]">
+          {col1.map((item) => (
+            <HotCard key={item.text} item={item} onSelect={onSelect} />
+          ))}
+        </div>
+        {/* 右列 — 与左列对齐，不做偏移 */}
+        <div className="flex-1 flex flex-col gap-[var(--spacing-xs)]">
+          {col2.map((item) => (
+            <HotCard key={item.text} item={item} onSelect={onSelect} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function HotCard({
+  item,
+  onSelect,
+}: {
+  item: { rank: number; text: string; hot: boolean };
+  onSelect: (text: string) => void;
+}) {
+  return (
+    <motion.button
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        delay: item.rank * 0.04,
+        duration: 0.25,
+      }}
+      onClick={() => onSelect(item.text)}
+      className={cn(
+        "flex items-center gap-[var(--spacing-xs)] p-[var(--spacing-sm)] text-left",
+        "bg-card rounded-[20px]",
+        "border border-card-border shadow-[var(--elevation-sm)]",
+        "active:scale-[0.97] transition-transform",
+        "hover:shadow-md"
+      )}
+    >
+      {/* 排名圆圈 */}
+      <div
+        className={cn(
+          "size-[26px] rounded-full flex items-center justify-center shrink-0 text-[12px] font-bold",
+          item.rank <= 3 ? "bg-destructive/12 text-destructive" : "bg-muted 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>
+  );
+}
+
+/* ══════════════════════════════════════════
+   搜索建议列表
+   ══════════════════════════════════════════ */
+
+function SuggestionList({
+  suggestions,
+  query,
+  onSelect,
+}: {
+  suggestions: SuggestItem[];
+  query: string;
+  onSelect: (item: SuggestItem) => void;
+}) {
+  if (suggestions.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-[var(--spacing-3xl)]">
+        <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">
+          {`\u672a\u627e\u5230\u300c${query}\u300d\u76f8\u5173\u7ed3\u679c`}
+        </p>
+        <p className="text-[12px] text-muted-foreground/60 mt-[var(--spacing-xxs)]">
+          试试其他关键词
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div 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>
+          <div className="text-muted-foreground/40 shrink-0">
+            <IconFont name="arrow-up" size="14px" style={{ transform: "rotate(-45deg)" }} />
+          </div>
+        </motion.button>
+      ))}
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   主页面
+   ══════════════════════════════════════════ */
+
+export function MapSearchPage() {
+  const [searchValue, setSearchValue] = useState("");
+  const [toastText, setToastText] = useState<string | null>(null);
+  const [history, setHistory] = useState(searchHistory);
+
+  const showToast = useCallback((text: string) => {
+    setToastText(text);
+  }, []);
+
+  useEffect(() => {
+    if (!toastText) return;
+    const timer = setTimeout(() => setToastText(null), 2200);
+    return () => clearTimeout(timer);
+  }, [toastText]);
+
+  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]);
+
+  const hasInput = searchValue.trim().length > 0;
+
+  const handleSelectSuggestion = (item: SuggestItem) => {
+    showToast(`\u6b63\u5728\u5bfc\u822a\u81f3${item.name}...`);
+    setSearchValue(item.name);
+  };
+
+  const handleSelectHistory = (text: string) => {
+    setSearchValue(text);
+  };
+
+  const handleClearHistory = () => {
+    setHistory([]);
+    showToast("\u641c\u7d22\u5386\u53f2\u5df2\u6e05\u7a7a");
+  };
+
+  const handleRemoveHistoryItem = (text: string) => {
+    setHistory((prev) => prev.filter((h) => h !== text));
+  };
+
+  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-[#EEF2F9] via-[#F4F6FB] to-background" />
+      {/* 装饰光斑 */}
+      <div className="absolute top-[-40px] right-[-50px] w-[180px] h-[180px] bg-accent/6 rounded-full blur-[80px]" />
+      <div className="absolute top-[200px] left-[-70px] w-[160px] h-[160px] bg-destructive/4 rounded-full blur-[70px]" />
+      <div className="absolute bottom-[100px] right-[-30px] w-[140px] h-[140px] bg-[#F0D6A0]/10 rounded-full blur-[60px]" />
+
+      {/* ── 主内容 ── */}
+      <div className="relative z-10 flex-1 flex flex-col overflow-hidden">
+
+        {/* ── 顶部搜索栏 ── */}
+        <div className="relative z-50 pt-[56px] px-[var(--spacing-base)] pb-[var(--spacing-xs)]">
+          <SearchBox
+            value={searchValue}
+            onChange={setSearchValue}
+            variant="card"
+            placeholder="\u641c\u7d22\u5730\u70b9\u3001\u516c\u4ea4\u3001\u5730\u94c1"
+            onBack={() => setSearchValue("")}
+            onSearch={() => {
+              if (searchValue.trim()) showToast(`\u6b63\u5728\u641c\u7d22\u300c${searchValue}\u300d...`);
+            }}
+            onMic={() => showToast("\u8bed\u97f3\u8bc6\u522b\u4e2d...")}
+            onClear={() => setSearchValue("")}
+            className="bg-input-background"
+          />
+        </div>
+
+        {/* ── 内容区（滚动） ── */}
+        <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: "none" }}>
+          <AnimatePresence mode="wait">
+            {hasInput ? (
+              <motion.div
+                key="suggestions"
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -8 }}
+                transition={{ duration: 0.2 }}
+              >
+                <SuggestionList
+                  suggestions={suggestions}
+                  query={searchValue.trim()}
+                  onSelect={handleSelectSuggestion}
+                />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="default"
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -8 }}
+                transition={{ duration: 0.2 }}
+              >
+                {/* 快捷分类 — 倾斜图片卡片 */}
+                <QuickCategoryGrid onSelect={handleSelectHistory} />
+
+                {/* 搜索历史 — 散落标签 */}
+                <HistorySection
+                  history={history}
+                  onSelect={handleSelectHistory}
+                  onRemove={handleRemoveHistoryItem}
+                  onClear={handleClearHistory}
+                />
+
+                {/* 分割线 */}
+                <div className="mx-[var(--spacing-lg)] h-px bg-border/30" />
+
+                {/* 热门搜索 — 错落双列卡片 */}
+                <HotSearchSection onSelect={handleSelectHistory} />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </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>
+  );
+}