@lmy54321/design-system 1.1.3 → 1.2.0

package/template/src/pages/MapHome.tsx

@@ -0,0 +1,388 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { BottomNavigationBar } from "@lmy54321/design-system";
+import type { TabId } from "@lmy54321/design-system";
+import { DraggablePanel, DRAWER_STATES } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { Dialog } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+import { TencentMap } from "@lmy54321/design-system";
+import { SearchFlowDemo } from "./SearchFlowDemo";
+
+/* ── 功能入口（5个均分） ── */
+const serviceEntries = [
+  { label: "驾车", color: "#367BF6", icon: "vehicle" },
+  { label: "打车", color: "#FF6B35", icon: "vehicle" },
+  { label: "叮当", color: "#00B894", icon: "service" },
+  { label: "指南", color: "#6C5CE7", icon: "map-marked" },
+  { label: "更多", color: "#E84393", icon: "app" },
+];
+
+/* ── Nearby POI data (含经纬度，用于地图标注联动) ── */
+const nearbyPOIs = [
+  {
+    id: "1",
+    name: "星巴克臻选（国贸旗舰店）",
+    category: "咖啡厅",
+    distance: "320m",
+    rating: "4.8",
+    photo: "/images/scene/cafe.png",
+    tag: "人气推荐",
+    lat: 39.9088,
+    lng: 116.4605,
+  },
+  {
+    id: "2",
+    name: "海底捞火锅（三里屯店）",
+    category: "火锅",
+    distance: "580m",
+    rating: "4.7",
+    photo: "/images/scene/hotpot.png",
+    tag: "排队中",
+    lat: 39.9320,
+    lng: 116.4540,
+  },
+  {
+    id: "3",
+    name: "全聚德烤鸭（前门店）",
+    category: "北京菜",
+    distance: "1.2km",
+    rating: "4.5",
+    photo: "/images/scene/peking-duck.png",
+    tag: "老字号",
+    lat: 39.8992,
+    lng: 116.3974,
+  },
+  {
+    id: "4",
+    name: "朝阳大悦城",
+    category: "购物中心",
+    distance: "1.5km",
+    rating: "4.6",
+    photo: "/images/scene/mall.png",
+    tag: "",
+    lat: 39.9210,
+    lng: 116.4810,
+  },
+  {
+    id: "5",
+    name: "故宫博物院",
+    category: "景点",
+    distance: "2.3km",
+    rating: "4.9",
+    photo: "/images/feed-axis.png",
+    tag: "必去",
+    lat: 39.9163,
+    lng: 116.3972,
+  },
+];
+
+/* ── Glass round button ── */
+function GlassButton({
+  children,
+  onClick,
+  className,
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "relative flex items-center justify-center shrink-0 size-[40px] rounded-[20px]",
+        "bg-card/80 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.10)] backdrop-blur-md border border-white/40",
+        "active:after:absolute active:after:inset-0 active:after:bg-foreground/10 active:after:content-[''] active:after:rounded-[inherit]",
+        "text-foreground transition-all duration-200",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface MapHomeProps {
+  activeTab: TabId;
+  onTabChange: (id: TabId) => void;
+}
+
+/* ── POI 标注点屏幕坐标（基于地图中心 39.909,116.42 zoom=13 的近似映射） ── */
+const DEFAULT_CENTER = { lat: 39.909, lng: 116.42 };
+const DEFAULT_ZOOM = 13;
+
+export function MapHome({ activeTab, onTabChange }: MapHomeProps) {
+
+  const [selectedPOI, setSelectedPOI] = useState<(typeof nearbyPOIs)[number] | null>(null);
+  const [toastText, setToastText] = useState<string | null>(null);
+  const [panelState, setPanelState] = useState(DRAWER_STATES.SMALL);
+
+  /* ── 地图联动状态 ── */
+  const [mapCenter, setMapCenter] = useState(DEFAULT_CENTER);
+  const [mapZoom, setMapZoom] = useState(DEFAULT_ZOOM);
+  const [highlightedPoiId, setHighlightedPoiId] = useState<string | null>(null);
+
+  /* 点击 POI 列表项 → 联动地图 */
+  const handlePoiTap = useCallback((poi: typeof nearbyPOIs[number]) => {
+    setHighlightedPoiId(poi.id);
+    setMapCenter({ lat: poi.lat, lng: poi.lng });
+    setMapZoom(16);
+    setSelectedPOI(poi);
+  }, []);
+
+  /* 关闭 POI 详情 → 恢复地图视野 */
+  const handleClosePOI = useCallback(() => {
+    setSelectedPOI(null);
+    setHighlightedPoiId(null);
+    setMapCenter(DEFAULT_CENTER);
+    setMapZoom(DEFAULT_ZOOM);
+  }, []);
+
+  const showToast = useCallback((text: string) => {
+    setToastText(text);
+  }, []);
+
+  useEffect(() => {
+    if (!toastText) return;
+    const timer = setTimeout(() => setToastText(null), 2200);
+    return () => clearTimeout(timer);
+  }, [toastText]);
+
+  return (
+    <div
+      className="relative w-full h-[100dvh] overflow-hidden bg-background"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* ── POI Detail Dialog ── */}
+      <Dialog
+        open={!!selectedPOI}
+        onOpenChange={(open) => { if (!open) handleClosePOI(); }}
+        title={selectedPOI?.name ?? ""}
+        description={selectedPOI ? `${selectedPOI.rating}分 · ${selectedPOI.category} · ${selectedPOI.distance}` : ""}
+        secondaryActionText="关闭"
+        mainActionText="开始导航"
+        onSecondaryAction={handleClosePOI}
+        onMainAction={() => { handleClosePOI(); showToast("正在规划路线..."); }}
+      />
+
+      {/* ── 1. 真实腾讯地图底图（联动 center/zoom + markers） ── */}
+      <TencentMap
+        className="absolute inset-0 w-full h-full"
+        center={mapCenter}
+        zoom={mapZoom}
+        pitch={60}
+        rotation={0}
+      />
+
+      {/* ── Left top: Compass indicator ── */}
+      <motion.div
+        className="absolute top-[56px] left-[16px] z-40"
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.2, duration: 0.3 }}
+      >
+        <div className="flex flex-col items-center">
+          <div className="size-[32px] flex items-center justify-center">
+            <div className="relative">
+              <span className="text-[10px] font-bold text-destructive leading-none">N</span>
+              <div className="absolute -bottom-[2px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-[3px] border-r-[3px] border-t-[5px] border-l-transparent border-r-transparent border-t-destructive" />
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* ── Right side: Map Controls ── */}
+      <motion.div
+        className="absolute right-[16px] top-[56px] z-40 flex flex-col gap-[8px] items-center"
+        initial={{ x: 20, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        transition={{ delay: 0.3, duration: 0.4 }}
+      >
+        <div className="flex flex-col items-center gap-[2px] w-[40px] h-[60px] justify-center rounded-[20px] bg-card/80 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.10)] backdrop-blur-md border border-white/40">
+          <IconFont name="sunny" size="14px" className="text-[#FFB800]" />
+          <span className="text-[8px] font-medium text-foreground leading-none">31°C</span>
+        </div>
+        <div className="h-[4px]" />
+        <GlassButton>
+          <IconFont name="layers" size="20px" />
+        </GlassButton>
+        <GlassButton>
+          <span className="text-[12px] font-bold text-foreground">2D</span>
+        </GlassButton>
+        <GlassButton>
+          <IconFont name="mail" size="18px" />
+        </GlassButton>
+      </motion.div>
+
+      {/* ── Right bottom: Compass + Location ── */}
+      <motion.div
+        className="absolute right-[16px] bottom-[340px] z-40 flex flex-col gap-[8px] items-center"
+        initial={{ x: 20, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        transition={{ delay: 0.4, duration: 0.4 }}
+      >
+        <GlassButton onClick={() => showToast("指南针已重置")}>
+          <IconFont name="compass" size="20px" />
+        </GlassButton>
+        <GlassButton>
+          <IconFont name="focus" size="20px" className="text-accent" />
+        </GlassButton>
+      </motion.div>
+
+      {/* ── 2. Bottom Navigation — 压盖在面板上方，全屏搜索时隐藏 ── */}
+      {panelState !== DRAWER_STATES.FULL && (
+        <div className="absolute bottom-[12px] left-1/2 -translate-x-1/2 z-[1001]">
+          <BottomNavigationBar activeTab={activeTab} onTabChange={onTabChange} />
+        </div>
+      )}
+
+      {/* ── DraggablePanel ── */}
+      <DraggablePanel
+        state={panelState}
+        onStateChange={setPanelState}
+        customSmallHeight={260}
+        customMediumHeight={500}
+        bottomOffset={8}
+        fullScreenContent={
+          <SearchFlowDemo onBack={() => setPanelState(DRAWER_STATES.SMALL)} />
+        }
+      >
+        {/* Search Bar - 展示型假搜索框，点击展开面板为全屏搜索 */}
+        <div className="px-[16px] pb-[10px]">
+          <button
+            type="button"
+            onClick={() => setPanelState(DRAWER_STATES.FULL)}
+            className="w-full h-[48px] rounded-[24px] bg-card/50 flex items-center px-[16px] gap-[8px] active:bg-card/70 transition-colors"
+          >
+            <IconFont name="search" size="18px" className="text-muted-foreground shrink-0" />
+            <span className="text-[16px] text-muted-foreground font-normal">搜索地点、公交、地铁</span>
+          </button>
+        </div>
+
+        {/* 3. 金刚位 — 5个均分，grid-cols-5 */}
+        <div className="px-[16px] pb-[10px]">
+          <div className="grid grid-cols-5 gap-x-0">
+            {serviceEntries.map((entry) => (
+              <button
+                key={entry.label}
+                onClick={() => showToast(`打开${entry.label}`)}
+                className="flex flex-col items-center gap-[6px] active:opacity-70 transition-opacity"
+              >
+                <div
+                  className="size-[48px] rounded-[16px] flex items-center justify-center"
+                  style={{ backgroundColor: `${entry.color}12` }}
+                >
+                  <IconFont name={entry.icon} size="24px" style={{ color: entry.color }} />
+                </div>
+                <span className="text-[12px] text-foreground font-normal leading-[1.4] whitespace-nowrap">
+                  {entry.label}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Quick shortcuts row */}
+        <div className="px-[16px] pb-[8px]">
+          <div className="flex gap-[10px]">
+            <button
+              onClick={() => showToast("正在导航回家...")}
+              className="flex-1 flex items-center gap-[8px] px-[12px] py-[10px] rounded-[14px] bg-card-muted active:bg-black/[0.06] transition-colors"
+            >
+              <IconFont name="home" size="16px" className="text-[#FF6B35] shrink-0" />
+              <span className="text-[13px] font-medium text-foreground">回家</span>
+              <span className="text-[12px] text-muted-foreground ml-auto">25分钟</span>
+            </button>
+            <button
+              onClick={() => showToast("打开帝都秋日漫步指南")}
+              className="flex-1 flex items-center gap-[8px] px-[12px] py-[10px] rounded-[14px] bg-card-muted active:bg-black/[0.06] transition-colors"
+            >
+              <IconFont name="map-marked" size="16px" className="text-[#6C5CE7] shrink-0" />
+              <span className="text-[13px] font-medium text-foreground truncate">帝都秋日漫步指南</span>
+            </button>
+          </div>
+        </div>
+
+        {/* === 以下内容上滑 MEDIUM 后才可见 === */}
+
+        <div className="mx-[16px] h-px bg-border/60" />
+
+        {/* Nearby Recommendations */}
+        <div className="px-[16px] py-[12px]">
+          <div className="flex items-center justify-between mb-[10px]">
+            <span className="text-[16px] font-medium text-foreground leading-[1.5]">附近推荐</span>
+            <Tag
+              label="查看更多"
+              size="sm"
+              showArrow
+              className="bg-black/[0.04] text-muted-foreground border-transparent"
+            />
+          </div>
+          <div className="flex flex-col gap-[4px]">
+            {nearbyPOIs.map((poi) => (
+              <div
+                key={poi.id}
+                onClick={() => handlePoiTap(poi)}
+                className={cn(
+                  "flex items-center gap-[12px] py-[10px] cursor-pointer -mx-[4px] px-[4px] rounded-[14px] transition-colors",
+                  highlightedPoiId === poi.id
+                    ? "bg-accent/[0.06]"
+                    : "active:bg-black/[0.03]"
+                )}
+              >
+                <div className="size-[56px] rounded-[14px] overflow-hidden shrink-0 bg-card-muted">
+                  <ImageWithFallback src={poi.photo} alt={poi.name} className="size-full object-cover" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-[6px]">
+                    <p className="text-[14px] font-medium text-foreground truncate leading-[20px]">{poi.name}</p>
+                    {poi.tag && <Tag label={poi.tag} size="xs" className="shrink-0" />}
+                  </div>
+                  <div className="flex items-center gap-[6px] text-[12px] text-muted-foreground leading-[16px] mt-[3px]">
+                    <span className="flex items-center gap-[2px]">
+                      <IconFont name="star" variant="filled" size="12px" className="text-[#FFB800]" />
+                      {poi.rating}
+                    </span>
+                    <span className="w-px h-[10px] bg-border" />
+                    <span>{poi.category}</span>
+                    <span className="w-px h-[10px] bg-border" />
+                    <span>{poi.distance}</span>
+                  </div>
+                </div>
+                <Btn
+                  size="small"
+                  variant="primary"
+                  label="导航"
+                  icon={<IconFont name="map-navigation" size="14px" />}
+                  onClick={() => showToast(`正在规划前往${poi.name}的路线...`)}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </DraggablePanel>
+
+      {/* ── Toast ── */}
+      <div className="fixed top-[120px] left-0 right-0 z-[2000] flex justify-center pointer-events-none">
+        <AnimatePresence>
+          {toastText && (
+            <motion.div
+              className="pointer-events-auto"
+              initial={{ y: -10, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: -10, opacity: 0 }}
+            >
+              <Toast lines={[toastText]} showIcon showClose onClose={() => setToastText(null)} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}