@lmy54321/design-system 1.1.4 → 1.3.0

package/template/src/pages/ExplorePage.tsx

@@ -0,0 +1,1014 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { BottomNavigationBar } from "@lmy54321/design-system";
+import type { TabId } from "@lmy54321/design-system";
+import { ImageWithFallback } from "@lmy54321/design-system";
+import { DraggablePanel, DRAWER_STATES } from "@lmy54321/design-system";
+import { TencentMap } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { RouteDetailPage } from "./RouteDetailPage";
+import type { RouteItem } from "./RouteDetailPage";
+import { cdnImage } from "../config/cdn";
+
+/* ── 筛选标签 ── */
+const categories = [
+  { label: "推荐", icon: "star" },
+  { label: "路线", icon: "map-navigation" },
+  { label: "美食", icon: "fork" },
+  { label: "景点", icon: "map-marked" },
+  { label: "咖啡", icon: "tea" },
+  { label: "购物", icon: "shop" },
+  { label: "文化", icon: "museum" },
+  { label: "亲子", icon: "heart" },
+];
+
+/* ── 地图标注 POI ── */
+const mapPOIs = [
+  { name: "故宫", lat: 39.916, lng: 116.397, top: "22%", left: "48%" },
+  { name: "南锣鼓巷", lat: 39.937, lng: 116.403, top: "18%", left: "56%" },
+  { name: "798", lat: 39.984, lng: 116.494, top: "12%", left: "72%" },
+  { name: "三里屯", lat: 39.932, lng: 116.454, top: "26%", left: "62%" },
+  { name: "什刹海", lat: 39.942, lng: 116.383, top: "16%", left: "40%" },
+];
+
+/* ── 路线推荐数据 ── */
+export const routeRecommendations: RouteItem[] = [
+  {
+    id: "r1",
+    title: "一天走完中轴线！累但值得",
+    desc: "从永定门一路暴走到钟鼓楼，把北京城600年的底蕴踩在脚下，步数3w+但每一步都是历史",
+    image: cdnImage("/images/feed-axis.png"),
+    duration: "1天",
+    distance: "7.8km",
+    stops: [
+      { name: "永定门", icon: "map-marked", dur: "30min" },
+      { name: "天坛公园", icon: "map-marked", dur: "1.5h" },
+      { name: "天安门广场", icon: "map-marked", dur: "1h" },
+      { name: "故宫博物院", icon: "museum", dur: "3h" },
+      { name: "景山公园", icon: "map-marked", dur: "1h" },
+      { name: "钟鼓楼", icon: "map-marked", dur: "40min" },
+    ],
+    rating: "4.9",
+    saves: 5832,
+    tag: "经典",
+    tagColor: "#367BF6",
+    author: "在逃的建筑系学生",
+  },
+  {
+    id: "r2",
+    title: "什刹海半日闲逛｜拍照巨出片",
+    desc: "恭王府逛完溜达到后海，路上随便一拍就是大片，咖啡也绝绝子",
+    image: cdnImage("/images/feed/route-shichahai.png"),
+    duration: "半天",
+    distance: "3.2km",
+    stops: [
+      { name: "恭王府", icon: "museum", dur: "1.5h" },
+      { name: "烟袋斜街", icon: "shop", dur: "40min" },
+      { name: "银锭桥", icon: "map-marked", dur: "20min" },
+      { name: "后海酒吧街", icon: "drink", dur: "1h" },
+    ],
+    rating: "4.7",
+    saves: 3216,
+    tag: "文艺",
+    tagColor: "#6C5CE7",
+    author: "胡同串子阿瑶",
+  },
+  {
+    id: "r3",
+    title: "朝阳觅食一整天！从brunch吃到宵夜",
+    desc: "早上国贸吃brunch，中午三里屯逛吃，晚上望京撸串，这条线我走了不下5遍",
+    image: cdnImage("/images/feed/route-food-cbd.png"),
+    duration: "1天",
+    distance: "4.5km",
+    stops: [
+      { name: "国贸·Brunch", icon: "fork", dur: "1h" },
+      { name: "三里屯太古里", icon: "shop", dur: "2h" },
+      { name: "亮马桥官舍", icon: "tea", dur: "40min" },
+      { name: "望京小腰", icon: "fork", dur: "1.5h" },
+      { name: "团结湖居酒屋", icon: "drink", dur: "1h" },
+    ],
+    rating: "4.8",
+    saves: 4107,
+    tag: "干饭",
+    tagColor: "#FF6B35",
+    author: "朝阳干饭王小陈",
+  },
+  {
+    id: "r4",
+    title: "京郊自驾赏秋｜美哭了真的",
+    desc: "坡峰岭的红叶太震撼了！拍了300张照片，随手一张都是壁纸级别",
+    image: cdnImage("/images/feed/route-autumn.png"),
+    duration: "1天",
+    distance: "120km",
+    stops: [
+      { name: "坡峰岭红叶", icon: "cherry", dur: "2h" },
+      { name: "十渡风景区", icon: "map-marked", dur: "1.5h" },
+      { name: "野三坡百里峡", icon: "map-marked", dur: "2h" },
+      { name: "拒马河漂流", icon: "map-marked", dur: "1h" },
+    ],
+    rating: "4.6",
+    saves: 2890,
+    tag: "自驾",
+    tagColor: "#10B981",
+    author: "周末出逃计划",
+  },
+];
+
+/* ── 瀑布流帖子（丰富版） ── */
+type FeedItem = {
+  id: string;
+  type: "article" | "route";
+  image: string;
+  title: string;
+  content: string;
+  author: string;
+  authorAvatar: string;
+  authorLevel?: string;
+  likes: number;
+  comments: number;
+  shares: number;
+  aspectH: number;
+  routeId?: string;
+  tags: string[];
+  location?: string;
+  publishTime: string;
+  isLiked?: boolean;
+  isCollected?: boolean;
+};
+
+const feeds: FeedItem[] = [
+  {
+    id: "1",
+    type: "article",
+    image: cdnImage("/images/feed-hutong.png"),
+    title: "救命！北京胡同也太好逛了吧",
+    content: "从南锣鼓巷一路逛到五道营，每条胡同都有惊喜！墙上的涂鸦、藏在深处的咖啡馆、老北京四合院的门墩...",
+    author: "迷路的南方人",
+    authorAvatar: "https://picsum.photos/seed/avatar-1/100/100",
+    authorLevel: "本地达人",
+    likes: 2463,
+    comments: 342,
+    shares: 128,
+    aspectH: 180,
+    tags: ["胡同", "拍照"],
+    location: "南锣鼓巷",
+    publishTime: "3小时前",
+  },
+  {
+    id: "2",
+    type: "route",
+    image: cdnImage("/images/feed-axis.png"),
+    title: "一天走完中轴线！累但值得",
+    content: "从永定门一路暴走到钟鼓楼，步数3w+但每一步都值了！",
+    author: "在逃的建筑系学生",
+    authorAvatar: "https://picsum.photos/seed/avatar-2/100/100",
+    authorLevel: "路线达人",
+    likes: 5832,
+    comments: 891,
+    shares: 567,
+    aspectH: 150,
+    routeId: "r1",
+    tags: ["中轴线", "暴走"],
+    location: "故宫",
+    publishTime: "昨天",
+  },
+  {
+    id: "3",
+    type: "article",
+    image: cdnImage("/images/feed-coffee-sanlitun.png"),
+    title: "三里屯这家咖啡也太绝了｜环境氛围感拉满",
+    content: "被种草很久终于来了！loft风的装修超有feel，拿铁拉花巨好看，坐窗边随手一拍就是大片",
+    author: "每日一杯美式续命",
+    authorAvatar: "https://picsum.photos/seed/avatar-3/100/100",
+    likes: 1287,
+    comments: 156,
+    shares: 89,
+    aspectH: 130,
+    tags: ["咖啡", "氛围感"],
+    location: "三里屯太古里",
+    publishTime: "5小时前",
+  },
+  {
+    id: "4",
+    type: "route",
+    image: cdnImage("/images/feed/route-food-cbd.png"),
+    title: "朝阳觅食一整天！从brunch吃到宵夜",
+    content: "早上国贸brunch，中午三里屯逛吃，晚上望京撸串，这条线走了不下5遍",
+    author: "朝阳干饭王小陈",
+    authorAvatar: "https://picsum.photos/seed/avatar-4/100/100",
+    authorLevel: "美食博主",
+    likes: 4107,
+    comments: 623,
+    shares: 412,
+    aspectH: 145,
+    routeId: "r3",
+    tags: ["美食", "觅食"],
+    location: "朝阳区",
+    publishTime: "2天前",
+  },
+  {
+    id: "5",
+    type: "article",
+    image: cdnImage("/images/feed/feed-autumn.png"),
+    title: "京郊红叶拍照攻略｜朋友圈直接炸了",
+    content: "坡峰岭的红叶真的太震撼了！分享几个绝佳机位，随手拍都是壁纸级别",
+    author: "周末出逃计划",
+    authorAvatar: "https://picsum.photos/seed/avatar-5/100/100",
+    authorLevel: "摄影达人",
+    likes: 3891,
+    comments: 467,
+    shares: 289,
+    aspectH: 170,
+    tags: ["红叶", "拍照攻略"],
+    location: "坡峰岭",
+    publishTime: "3天前",
+  },
+  {
+    id: "6",
+    type: "article",
+    image: cdnImage("/images/feed/feed-museum.png"),
+    title: "故宫这个展太绝了！冲冲冲",
+    content: "千秋佳人特展，展品超精美！建议留出半天时间慢慢看，记得提前预约",
+    author: "博物馆女孩日记",
+    authorAvatar: "https://picsum.photos/seed/avatar-6/100/100",
+    authorLevel: "文化博主",
+    likes: 5102,
+    comments: 734,
+    shares: 501,
+    aspectH: 140,
+    tags: ["故宫", "展览"],
+    location: "故宫博物院",
+    publishTime: "1天前",
+  },
+  {
+    id: "7",
+    type: "route",
+    image: cdnImage("/images/feed/route-shichahai.png"),
+    title: "什刹海半日闲逛｜拍照巨出片",
+    content: "恭王府逛完溜达到后海，路上随便一拍就是大片",
+    author: "胡同串子阿瑶",
+    authorAvatar: "https://picsum.photos/seed/avatar-7/100/100",
+    likes: 3216,
+    comments: 398,
+    shares: 234,
+    aspectH: 148,
+    routeId: "r2",
+    tags: ["什刹海", "出片"],
+    location: "什刹海",
+    publishTime: "4天前",
+  },
+  {
+    id: "8",
+    type: "article",
+    image: cdnImage("/images/feed/feed-food.png"),
+    title: "簋街深夜暴走！吃到扶墙出系列",
+    content: "从东直门一路吃到北新桥，小龙虾、烤鱼、卤煮、炒肝…热量炸弹一晚上全补回来了",
+    author: "深夜放毒小分队",
+    authorAvatar: "https://picsum.photos/seed/avatar-8/100/100",
+    authorLevel: "吃货达人",
+    likes: 4215,
+    comments: 589,
+    shares: 367,
+    aspectH: 160,
+    tags: ["簋街", "深夜美食"],
+    location: "簋街",
+    publishTime: "6小时前",
+  },
+  {
+    id: "9",
+    type: "article",
+    image: cdnImage("/images/feed/feed-temple.png"),
+    title: "雍和宫求啥最灵？本地人来说说",
+    content: "作为北京土著分享一下经验：求事业去法轮殿，求学业去万福阁，求姻缘去…",
+    author: "佛系北京妞",
+    authorAvatar: "https://picsum.photos/seed/avatar-9/100/100",
+    likes: 1893,
+    comments: 412,
+    shares: 178,
+    aspectH: 125,
+    tags: ["雍和宫", "攻略"],
+    location: "雍和宫",
+    publishTime: "2天前",
+  },
+  {
+    id: "10",
+    type: "route",
+    image: cdnImage("/images/feed/route-autumn.png"),
+    title: "京郊自驾赏秋｜美哭了真的",
+    content: "坡峰岭红叶太震撼！拍了300张照片随手一张都是壁纸",
+    author: "周末出逃计划",
+    authorAvatar: "https://picsum.photos/seed/avatar-10/100/100",
+    likes: 2890,
+    comments: 321,
+    shares: 245,
+    aspectH: 150,
+    routeId: "r4",
+    tags: ["自驾", "赏秋"],
+    location: "房山区",
+    publishTime: "5天前",
+  },
+  {
+    id: "11",
+    type: "article",
+    image: cdnImage("/images/feed/feed-park.png"),
+    title: "朝阳公园遛娃天花板！孩子玩疯了",
+    content: "带娃来了N次了，沙坑、滑梯、草坪野餐…一待就是一整天，大人也能放松",
+    author: "俩娃妈的日常",
+    authorAvatar: "https://picsum.photos/seed/avatar-11/100/100",
+    likes: 967,
+    comments: 134,
+    shares: 89,
+    aspectH: 165,
+    tags: ["遛娃", "亲子"],
+    location: "朝阳公园",
+    publishTime: "1天前",
+  },
+  {
+    id: "12",
+    type: "article",
+    image: cdnImage("/images/feed/feed-art.png"),
+    title: "798这几个展我愿称之为年度最佳",
+    content: "UCCA尤伦斯的新展、木木美术馆的沉浸式体验、还有长征空间…周末花一天刷完",
+    author: "艺术民工小王",
+    authorAvatar: "https://picsum.photos/seed/avatar-12/100/100",
+    authorLevel: "艺术达人",
+    likes: 2340,
+    comments: 278,
+    shares: 198,
+    aspectH: 135,
+    tags: ["798", "展览"],
+    location: "798艺术区",
+    publishTime: "3天前",
+  },
+];
+
+interface ExplorePageProps {
+  activeTab: TabId;
+  onTabChange: (id: TabId) => void;
+  onCreatePlan?: (plan: { title: string; spots: number; image: string; stops: { name: string; icon: string; dur: string }[] }) => void;
+}
+
+export function ExplorePage({ activeTab, onTabChange, onCreatePlan }: ExplorePageProps) {
+  const [selected, setSelected] = useState("推荐");
+  const [selectedRoute, setSelectedRoute] = useState<RouteItem | null>(null);
+  const [panelState, setPanelState] = useState(DRAWER_STATES.MEDIUM);
+  const [toast, setToast] = useState<string | null>(null);
+  const [likedPosts, setLikedPosts] = useState<Set<string>>(new Set());
+  const [selectedPost, setSelectedPost] = useState<FeedItem | null>(null);
+
+  const showToast = useCallback((t: string) => setToast(t), []);
+  useEffect(() => {
+    if (!toast) return;
+    const id = setTimeout(() => setToast(null), 2200);
+    return () => clearTimeout(id);
+  }, [toast]);
+
+  const toggleLike = useCallback((postId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLikedPosts(prev => {
+      const next = new Set(prev);
+      if (next.has(postId)) {
+        next.delete(postId);
+      } else {
+        next.add(postId);
+      }
+      return next;
+    });
+  }, []);
+
+  const filteredFeeds = selected === "路线"
+    ? feeds.filter(f => f.type === "route")
+    : selected === "美食"
+      ? feeds.filter(f => f.tags.some(t => ["美食", "觅食", "深夜美食", "簋街", "咖啡"].includes(t)) || f.type === "route" && f.routeId === "r3")
+      : selected === "景点"
+        ? feeds.filter(f => f.tags.some(t => ["故宫", "展览", "雍和宫", "798"].includes(t)))
+        : selected === "咖啡"
+          ? feeds.filter(f => f.tags.some(t => ["咖啡", "氛围感"].includes(t)))
+          : selected === "文化"
+            ? feeds.filter(f => f.tags.some(t => ["故宫", "展览", "798", "雍和宫", "博物馆"].includes(t)))
+            : feeds;
+
+  /* 路线详情页 */
+  if (selectedRoute) {
+    return (
+      <RouteDetailPage
+        route={selectedRoute}
+        onBack={() => setSelectedRoute(null)}
+        onCreatePlan={(plan) => {
+          setSelectedRoute(null);
+          onCreatePlan?.(plan);
+        }}
+      />
+    );
+  }
+
+  /* 帖子详情页 */
+  if (selectedPost) {
+    const isRoute = selectedPost.type === "route";
+    const route = isRoute ? routeRecommendations.find(r => r.id === selectedPost.routeId) : null;
+    return (
+      <PostDetailView
+        post={selectedPost}
+        route={route ?? null}
+        isLiked={likedPosts.has(selectedPost.id)}
+        onToggleLike={() => {
+          setLikedPosts(prev => {
+            const next = new Set(prev);
+            if (next.has(selectedPost.id)) next.delete(selectedPost.id);
+            else next.add(selectedPost.id);
+            return next;
+          });
+        }}
+        onBack={() => setSelectedPost(null)}
+        onRouteClick={(r) => { setSelectedPost(null); setSelectedRoute(r); }}
+        onToast={showToast}
+      />
+    );
+  }
+
+  return (
+    <div
+      className="relative w-full h-[100dvh] overflow-hidden bg-background"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* 1. 腾讯地图底图 */}
+      <TencentMap
+        className="absolute inset-0 w-full h-full"
+        center={{ lat: 39.929, lng: 116.417 }}
+        zoom={13}
+        pitch={40}
+        rotation={0}
+      />
+
+      {/* 地图上的热门标注点 */}
+      <div className="absolute inset-0 pointer-events-none z-[5]">
+        {mapPOIs.map((poi) => (
+          <motion.div
+            key={poi.name}
+            className="absolute flex flex-col items-center pointer-events-auto"
+            style={{ top: poi.top, left: poi.left, transform: "translate(-50%,-100%)" }}
+            initial={{ opacity: 0, scale: 0.5, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            transition={{ delay: 0.2, duration: 0.4, type: "spring" }}
+          >
+            <div className="bg-accent text-white text-[10px] font-medium px-[6px] py-[2px] rounded-[6px] mb-[3px] whitespace-nowrap shadow-sm">
+              {poi.name}
+            </div>
+            <div className="size-[10px] rounded-full bg-accent shadow-[0_0_0_3px_rgba(54,123,246,0.2)]" />
+          </motion.div>
+        ))}
+      </div>
+
+      {/* 右侧地图控制 */}
+      <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 }}
+      >
+        <button
+          className="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 flex items-center justify-center active:bg-card/60 transition-colors"
+          onClick={() => showToast("切换地图图层")}
+        >
+          <IconFont name="layers" size="20px" className="text-foreground" />
+        </button>
+        <button
+          className="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 flex items-center justify-center active:bg-card/60 transition-colors"
+          onClick={() => showToast("定位到当前位置")}
+        >
+          <IconFont name="focus" size="20px" className="text-accent" />
+        </button>
+      </motion.div>
+
+      {/* 2. 底部导航栏 — 覆盖在面板上方 */}
+      <div className="absolute bottom-[12px] left-1/2 -translate-x-1/2 z-[1001]">
+        <BottomNavigationBar activeTab={activeTab} onTabChange={onTabChange} />
+      </div>
+
+      {/* 3. DraggablePanel 三段式面板 */}
+      <DraggablePanel
+        state={panelState}
+        onStateChange={setPanelState}
+        customSmallHeight={260}
+        customMediumHeight={480}
+        bottomOffset={8}
+      >
+        {/* 面板头部：标题 + 筛选标签 */}
+        <div className="shrink-0">
+          <div className="flex items-center justify-between px-[16px] pb-[8px]">
+            <span className="text-[18px] font-semibold text-foreground">探索</span>
+            <div className="flex items-center gap-[4px] text-[12px] text-muted-foreground">
+              <IconFont name="location" size="13px" />
+              <span>北京</span>
+            </div>
+          </div>
+
+          {/* 筛选标签 */}
+          <div className="px-[16px] pb-[12px]">
+            <div className="flex gap-[8px] overflow-x-auto scrollbar-hide -mx-[16px] px-[16px]">
+              {categories.map((cat) => (
+                <button
+                  key={cat.label}
+                  onClick={() => setSelected(cat.label)}
+                  className={cn(
+                    "shrink-0 flex items-center gap-[4px] px-[14px] py-[6px] rounded-full text-[13px] font-medium transition-all",
+                    selected === cat.label
+                      ? "bg-primary text-white shadow-sm"
+                      : "bg-black/[0.04] text-muted-foreground active:bg-black/[0.08]"
+                  )}
+                >
+                  <IconFont name={cat.icon} size="13px" />
+                  {cat.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 可滚动区域 */}
+        <div className="flex flex-col h-full min-h-0">
+          <div className="flex-1 min-h-0 overflow-y-auto">
+            {/* 附近热门 快速横滑 */}
+            <div className="px-[16px] pb-[12px]">
+              <div className="flex items-center justify-between mb-[8px]">
+                <span className="text-[14px] font-medium text-foreground">附近热门</span>
+                <Tag
+                  label="更多"
+                  size="sm"
+                  showArrow
+                  className="bg-black/[0.04] text-muted-foreground border-transparent"
+                />
+              </div>
+              <div className="flex gap-[10px] overflow-x-auto scrollbar-hide -mx-[16px] px-[16px] pb-[4px]">
+                {feeds.slice(0, 5).map((item, i) => (
+                  <motion.div
+                    key={`hot-${item.id}`}
+                    className="shrink-0 w-[140px] rounded-[14px] overflow-hidden bg-card-muted cursor-pointer active:scale-[0.98] transition-transform"
+                    initial={{ opacity: 0, x: 15 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: 0.04 * i, duration: 0.3 }}
+                    onClick={() => setSelectedPost(item)}
+                  >
+                    <div className="relative h-[100px]">
+                      <ImageWithFallback src={item.image} alt={item.title} className="w-full h-full object-cover" />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+                      {item.location && (
+                        <div className="absolute bottom-[6px] left-[6px] flex items-center gap-[2px]">
+                          <IconFont name="location" size="9px" className="text-white/90" />
+                          <span className="text-[9px] text-white/90 font-medium">{item.location}</span>
+                        </div>
+                      )}
+                    </div>
+                    <div className="p-[8px]">
+                      <p className="text-[12px] font-medium text-foreground leading-[16px] line-clamp-2">{item.title}</p>
+                      <div className="flex items-center gap-[3px] mt-[4px]">
+                        <div className="size-[14px] rounded-full overflow-hidden shrink-0">
+                          <ImageWithFallback src={item.authorAvatar} alt="" className="size-full object-cover" />
+                        </div>
+                        <span className="text-[10px] text-muted-foreground truncate">{item.author}</span>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+
+            {/* 分割线 */}
+            <div className="mx-[16px] h-px bg-black/[0.06]" />
+
+            {/* 瀑布流 Feed */}
+            <div className="px-[16px] pt-[12px]">
+              <div className="flex items-center justify-between mb-[10px]">
+                <span className="text-[15px] font-medium text-foreground">
+                  {selected === "路线" ? "路线推荐" : "最新资讯"}
+                </span>
+                <button className="flex items-center gap-[2px] text-[12px] text-muted-foreground active:opacity-60">
+                  <IconFont name="swap" size="13px" />
+                  <span>最新</span>
+                </button>
+              </div>
+              <div className="flex gap-[10px]">
+                {/* 左列 */}
+                <div className="flex-1 min-w-0 flex flex-col gap-[10px]">
+                  {filteredFeeds
+                    .filter((_, i) => i % 2 === 0)
+                    .map((item, i) => (
+                      <FeedCard
+                        key={item.id}
+                        item={item}
+                        index={i}
+                        isLiked={likedPosts.has(item.id)}
+                        onToggleLike={toggleLike}
+                        onPostClick={setSelectedPost}
+                      />
+                    ))}
+                </div>
+                {/* 右列 */}
+                <div className="flex-1 min-w-0 flex flex-col gap-[10px]">
+                  {filteredFeeds
+                    .filter((_, i) => i % 2 === 1)
+                    .map((item, i) => (
+                      <FeedCard
+                        key={item.id}
+                        item={item}
+                        index={i}
+                        delay={0.04}
+                        isLiked={likedPosts.has(item.id)}
+                        onToggleLike={toggleLike}
+                        onPostClick={setSelectedPost}
+                      />
+                    ))}
+                </div>
+              </div>
+              {/* 底部留白 */}
+              <div className="h-[20px]" />
+            </div>
+          </div>
+        </div>
+      </DraggablePanel>
+
+      {/* Toast */}
+      <div className="fixed top-[120px] left-0 right-0 z-[2000] flex justify-center pointer-events-none">
+        <AnimatePresence>
+          {toast && (
+            <motion.div
+              className="pointer-events-auto"
+              initial={{ y: -10, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: -10, opacity: 0 }}
+            >
+              <Toast lines={[toast]} showIcon showClose onClose={() => setToast(null)} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
+
+/* ── 瀑布流 Feed 卡片（丰富版） ── */
+function FeedCard({ item, index, delay = 0, isLiked, onToggleLike, onPostClick }: {
+  item: FeedItem;
+  index: number;
+  delay?: number;
+  isLiked: boolean;
+  onToggleLike: (id: string, e: React.MouseEvent) => void;
+  onPostClick: (post: FeedItem) => void;
+}) {
+  const isRoute = item.type === "route";
+  const route = isRoute ? routeRecommendations.find(r => r.id === item.routeId) : null;
+
+  const handleClick = () => {
+    onPostClick(item);
+  };
+
+  return (
+    <motion.div
+      className="rounded-[16px] overflow-hidden cursor-pointer active:scale-[0.98] transition-transform bg-card-muted"
+      initial={{ opacity: 0, y: 15 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.06 * index + delay, duration: 0.3 }}
+      onClick={handleClick}
+    >
+      {/* 图片区 */}
+      <div style={{ height: item.aspectH }} className="w-full bg-black/[0.04] relative">
+        <ImageWithFallback src={item.image} alt={item.title} className="w-full h-full object-cover" />
+        {isRoute && route && (
+          <>
+            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+            <div className="absolute top-[8px] left-[8px]">
+              <span
+                className="flex items-center gap-[3px] px-[7px] py-[3px] rounded-full text-[10px] font-medium text-white backdrop-blur-sm"
+                style={{ backgroundColor: `${route.tagColor}CC` }}
+              >
+                <IconFont name="map-navigation" size="10px" />
+                {route.tag}路线
+              </span>
+            </div>
+            <div className="absolute bottom-[8px] left-[8px] right-[8px]">
+              <div className="flex items-center gap-[4px] text-[10px] text-white/90">
+                <IconFont name="location" size="10px" />
+                <span>{route.stops.length}站</span>
+                <span className="text-white/50">·</span>
+                <span>{route.distance}</span>
+                <span className="text-white/50">·</span>
+                <span>{route.duration}</span>
+              </div>
+            </div>
+          </>
+        )}
+        {!isRoute && item.location && (
+          <div className="absolute top-[8px] left-[8px]">
+            <span className="flex items-center gap-[2px] px-[6px] py-[2px] rounded-full text-[10px] font-medium text-white bg-black/40 backdrop-blur-sm">
+              <IconFont name="location" size="9px" />
+              {item.location}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* 信息区 */}
+      <div className="p-[10px]">
+        {/* 标题 */}
+        <p className="text-[13px] font-medium text-foreground leading-[18px] line-clamp-2">
+          {isRoute && <IconFont name="map-navigation" size="12px" className="text-accent mr-[3px] align-[-1px]" />}
+          {item.title}
+        </p>
+
+        {/* 内容摘要 */}
+        <p className="text-[11px] text-muted-foreground leading-[16px] line-clamp-2 mt-[4px]">
+          {item.content}
+        </p>
+
+        {/* 路线站点预览 */}
+        {isRoute && route && (
+          <div className="flex items-center gap-[4px] mt-[6px] overflow-hidden">
+            {route.stops.slice(0, 3).map((s, si) => (
+              <React.Fragment key={s.name}>
+                {si > 0 && <IconFont name="chevron-right" size="8px" className="text-muted-foreground/50 shrink-0" />}
+                <span className="text-[10px] text-muted-foreground truncate">{s.name}</span>
+              </React.Fragment>
+            ))}
+            {route.stops.length > 3 && <span className="text-[10px] text-muted-foreground shrink-0">+{route.stops.length - 3}</span>}
+          </div>
+        )}
+
+        {/* 标签 */}
+        {item.tags.length > 0 && (
+          <div className="flex items-center gap-[4px] mt-[6px] overflow-hidden">
+            {item.tags.slice(0, 2).map(tag => (
+              <span key={tag} className="px-[6px] py-[1px] rounded-[4px] bg-accent/8 text-[10px] text-accent font-medium shrink-0">
+                #{tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* 作者 + 互动 */}
+        <div className="flex items-center justify-between mt-[8px]">
+          <div className="flex items-center gap-[5px] min-w-0 flex-1">
+            <div className="size-[18px] rounded-full overflow-hidden shrink-0 bg-black/[0.04]">
+              <ImageWithFallback src={item.authorAvatar} alt="" className="size-full object-cover" />
+            </div>
+            <span className="text-[11px] text-muted-foreground truncate">{item.author}</span>
+            {item.authorLevel && (
+              <span className="px-[4px] py-[1px] rounded-[3px] bg-[#FFB800]/15 text-[9px] text-[#B88600] font-medium shrink-0">
+                {item.authorLevel}
+              </span>
+            )}
+          </div>
+          <button
+            className="flex items-center gap-[2px] shrink-0 ml-[4px] active:scale-110 transition-transform"
+            onClick={(e) => onToggleLike(item.id, e)}
+          >
+            <IconFont
+              name="heart"
+              variant={isLiked ? "filled" : undefined}
+              size="13px"
+              className={isLiked ? "text-destructive" : "text-muted-foreground"}
+            />
+            <span className={cn("text-[11px]", isLiked ? "text-destructive" : "text-muted-foreground")}>
+              {formatNumber(item.likes + (isLiked ? 1 : 0))}
+            </span>
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+/* ── 帖子详情视图 ── */
+function PostDetailView({ post, route, isLiked, onToggleLike, onBack, onRouteClick, onToast }: {
+  post: FeedItem;
+  route: RouteItem | null;
+  isLiked: boolean;
+  onToggleLike: () => void;
+  onBack: () => void;
+  onRouteClick: (r: RouteItem) => void;
+  onToast: (t: string) => void;
+}) {
+  const [panelState, setPanelState] = useState(DRAWER_STATES.MEDIUM);
+
+  return (
+    <div
+      className="relative w-full h-[100dvh] overflow-hidden bg-background"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* 地图底图 */}
+      <TencentMap
+        className="absolute inset-0 w-full h-full"
+        center={{ lat: 39.929, lng: 116.417 }}
+        zoom={14}
+      />
+
+      {/* 地图上的位置标记 */}
+      {post.location && (
+        <div className="absolute inset-0 pointer-events-none z-[5]">
+          <motion.div
+            className="absolute pointer-events-auto"
+            style={{ top: "35%", left: "50%", transform: "translate(-50%,-100%)" }}
+            initial={{ opacity: 0, scale: 0.5, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            transition={{ delay: 0.2, type: "spring" }}
+          >
+            <div className="bg-accent text-white text-[11px] font-medium px-[8px] py-[3px] rounded-[8px] mb-[4px] whitespace-nowrap shadow-md">
+              {post.location}
+            </div>
+            <div className="size-[14px] rounded-full bg-accent shadow-[0_0_0_4px_rgba(54,123,246,0.2)] mx-auto" />
+          </motion.div>
+        </div>
+      )}
+
+      {/* DraggablePanel */}
+      <DraggablePanel
+        state={panelState}
+        onStateChange={setPanelState}
+        customSmallHeight={320}
+        customMediumHeight={500}
+        topToolbar={{
+          mode: "center-title",
+          title: "详情",
+          showBack: true,
+          onBack,
+        }}
+        showTopToolbarInStates={[DRAWER_STATES.SMALL, DRAWER_STATES.MEDIUM, DRAWER_STATES.LARGE]}
+        bottomBar={
+          <div className="px-[16px] pb-[16px] pt-[8px] border-t border-black/[0.04] shrink-0">
+            <div className="flex items-center gap-[16px]">
+              <div className="flex items-center gap-[20px] flex-1">
+                <button className="flex flex-col items-center gap-[2px] active:scale-110 transition-transform" onClick={onToggleLike}>
+                  <IconFont name="heart" variant={isLiked ? "filled" : undefined} size="22px" className={isLiked ? "text-destructive" : "text-foreground"} />
+                  <span className={cn("text-[10px]", isLiked ? "text-destructive" : "text-muted-foreground")}>{formatNumber(post.likes)}</span>
+                </button>
+                <button className="flex flex-col items-center gap-[2px] active:scale-110 transition-transform" onClick={() => onToast("评论功能开发中")}>
+                  <IconFont name="chat" size="22px" className="text-foreground" />
+                  <span className="text-[10px] text-muted-foreground">{formatNumber(post.comments)}</span>
+                </button>
+                <button className="flex flex-col items-center gap-[2px] active:scale-110 transition-transform" onClick={() => onToast("已收藏")}>
+                  <IconFont name="star" size="22px" className="text-foreground" />
+                  <span className="text-[10px] text-muted-foreground">收藏</span>
+                </button>
+                <button className="flex flex-col items-center gap-[2px] active:scale-110 transition-transform" onClick={() => onToast("已分享")}>
+                  <IconFont name="share" size="22px" className="text-foreground" />
+                  <span className="text-[10px] text-muted-foreground">{formatNumber(post.shares)}</span>
+                </button>
+              </div>
+              {route && (
+                <Btn
+                  size="large"
+                  variant="primary"
+                  label="查看路线"
+                  icon={<IconFont name="map-navigation" size="16px" />}
+                  onClick={() => onRouteClick(route)}
+                  className="shrink-0"
+                />
+              )}
+            </div>
+          </div>
+        }
+      >
+        <div className="flex flex-col h-full">
+          {/* 头图 */}
+          <div className="px-[16px] shrink-0">
+            <div className="rounded-[16px] overflow-hidden mb-[12px]">
+              <div className="relative h-[200px]">
+                <ImageWithFallback src={post.image} alt={post.title} className="w-full h-full object-cover" />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
+                {post.location && (
+                  <div className="absolute bottom-[10px] left-[10px] flex items-center gap-[4px]">
+                    <IconFont name="location" size="12px" className="text-white/90" />
+                    <span className="text-[12px] text-white/90 font-medium">{post.location}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* 可滚动内容 */}
+          <div className="flex-1 min-h-0 overflow-y-auto px-[16px]">
+            {/* 标题 */}
+            <h2 className="text-[18px] font-semibold text-foreground leading-[26px]">{post.title}</h2>
+
+            {/* 标签 */}
+            {post.tags.length > 0 && (
+              <div className="flex items-center gap-[6px] mt-[8px]">
+                {post.tags.map(tag => (
+                  <span key={tag} className="px-[8px] py-[3px] rounded-[6px] bg-accent/8 text-[12px] text-accent font-medium">
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {/* 正文 */}
+            <p className="text-[14px] text-foreground/80 leading-[22px] mt-[12px]">
+              {post.content}
+            </p>
+
+            {/* 路线信息卡片 */}
+            {route && (
+              <motion.div
+                className="mt-[14px] rounded-[14px] overflow-hidden bg-card border border-black/[0.06] cursor-pointer active:scale-[0.99] transition-transform"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                onClick={() => onRouteClick(route)}
+              >
+                <div className="flex items-center gap-[12px] p-[12px]">
+                  <div className="size-[48px] rounded-[12px] overflow-hidden shrink-0">
+                    <ImageWithFallback src={route.image} alt="" className="size-full object-cover" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-[6px]">
+                      <span
+                        className="flex items-center gap-[2px] px-[6px] py-[2px] rounded-full text-[10px] font-medium text-white"
+                        style={{ backgroundColor: route.tagColor }}
+                      >
+                        <IconFont name="map-navigation" size="9px" />
+                        {route.tag}
+                      </span>
+                      <span className="text-[13px] font-medium text-foreground truncate">{route.title}</span>
+                    </div>
+                    <div className="flex items-center gap-[8px] mt-[4px] text-[11px] text-muted-foreground">
+                      <span>{route.stops.length}站</span>
+                      <span>·</span>
+                      <span>{route.distance}</span>
+                      <span>·</span>
+                      <span>{route.duration}</span>
+                    </div>
+                  </div>
+                  <IconFont name="chevron-right" size="16px" className="text-muted-foreground shrink-0" />
+                </div>
+              </motion.div>
+            )}
+
+            {/* 作者信息 */}
+            <div className="flex items-center gap-[10px] mt-[16px] py-[12px] border-t border-black/[0.06]">
+              <div className="size-[36px] rounded-full overflow-hidden shrink-0">
+                <ImageWithFallback src={post.authorAvatar} alt="" className="size-full object-cover" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-[6px]">
+                  <span className="text-[14px] font-medium text-foreground">{post.author}</span>
+                  {post.authorLevel && (
+                    <span className="px-[6px] py-[1px] rounded-[4px] bg-[#FFB800]/15 text-[10px] text-[#B88600] font-medium">
+                      {post.authorLevel}
+                    </span>
+                  )}
+                </div>
+                <span className="text-[12px] text-muted-foreground">{post.publishTime}发布</span>
+              </div>
+              <Btn
+                size="small"
+                variant="secondary"
+                label="关注"
+                icon={<IconFont name="add" size="14px" />}
+                onClick={() => onToast("已关注")}
+              />
+            </div>
+
+            {/* 互动数据统计 */}
+            <div className="flex items-center gap-[16px] py-[12px] border-t border-black/[0.06]">
+              <div className="flex items-center gap-[4px]">
+                <IconFont name="heart" variant="filled" size="14px" className="text-destructive" />
+                <span className="text-[13px] text-foreground font-medium">{post.likes.toLocaleString()}</span>
+                <span className="text-[12px] text-muted-foreground">赞</span>
+              </div>
+              <div className="flex items-center gap-[4px]">
+                <IconFont name="chat" size="14px" className="text-muted-foreground" />
+                <span className="text-[13px] text-foreground font-medium">{post.comments.toLocaleString()}</span>
+                <span className="text-[12px] text-muted-foreground">评论</span>
+              </div>
+              <div className="flex items-center gap-[4px]">
+                <IconFont name="share" size="14px" className="text-muted-foreground" />
+                <span className="text-[13px] text-foreground font-medium">{post.shares.toLocaleString()}</span>
+                <span className="text-[12px] text-muted-foreground">分享</span>
+              </div>
+            </div>
+
+            {/* 底部留白 */}
+            <div className="h-[16px]" />
+          </div>
+        </div>
+      </DraggablePanel>
+
+      {/* Toast */}
+      <div className="fixed top-[120px] left-0 right-0 z-[2000] flex justify-center pointer-events-none">
+        <AnimatePresence>
+          {/* reuse parent toast */}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
+
+/* ── 工具函数 ── */
+function formatNumber(n: number): string {
+  if (n >= 10000) return `${(n / 10000).toFixed(1)}w`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return String(n);
+}