@lmy54321/design-system 1.1.4 → 1.2.0

package/template/src/pages/TeamTripPage.tsx

@@ -0,0 +1,697 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@lmy54321/design-system";
+import { TopToolbar } from "@lmy54321/design-system";
+import { SegmentedControl } from "@lmy54321/design-system";
+import { Btn } from "@lmy54321/design-system";
+import { Tag } from "@lmy54321/design-system";
+import { StatGrid } from "@lmy54321/design-system";
+import { NotificationBar } from "@lmy54321/design-system";
+import { Toast } from "@lmy54321/design-system";
+import { BottomSheet } from "@lmy54321/design-system";
+import { IconFont } from "@lmy54321/design-system";
+import { TencentMap } from "@lmy54321/design-system";
+import { DraggablePanel, DRAWER_STATES } from "@lmy54321/design-system";
+
+/* ══════════════════════════════════════════
+   数据
+   ══════════════════════════════════════════ */
+
+const MEMBER_COLORS = ["#367BF6", "#FF6B35", "#22C55E", "#A855F7", "#F59E0B", "#EC4899"];
+
+interface TeamMember {
+  id: string;
+  name: string;
+  avatar: string;
+  color: string;
+  status: "moving" | "arrived" | "offline";
+  distance: string;
+  eta: string;
+  lat: number;
+  lng: number;
+}
+
+const teamMembers: TeamMember[] = [
+  { id: "1", name: "张伟", avatar: "user", color: MEMBER_COLORS[0], status: "moving", distance: "2.3km", eta: "8分钟", lat: 40, lng: 48 },
+  { id: "2", name: "李娜", avatar: "user", color: MEMBER_COLORS[1], status: "arrived", distance: "0m", eta: "已到达", lat: 55, lng: 60 },
+  { id: "3", name: "王磊", avatar: "user", color: MEMBER_COLORS[2], status: "moving", distance: "5.1km", eta: "15分钟", lat: 30, lng: 35 },
+  { id: "4", name: "赵敏", avatar: "user", color: MEMBER_COLORS[3], status: "moving", distance: "1.8km", eta: "6分钟", lat: 45, lng: 70 },
+  { id: "5", name: "陈强", avatar: "user", color: MEMBER_COLORS[4], status: "offline", distance: "--", eta: "离线", lat: 65, lng: 25 },
+  { id: "6", name: "刘芳", avatar: "user", color: MEMBER_COLORS[5], status: "moving", distance: "3.6km", eta: "12分钟", lat: 25, lng: 55 },
+];
+
+interface Itinerary {
+  id: string;
+  order: number;
+  name: string;
+  address: string;
+  time: string;
+  status: "completed" | "current" | "upcoming";
+  type: "food" | "scenic" | "hotel" | "activity";
+}
+
+const itineraryItems: Itinerary[] = [
+  { id: "1", order: 1, name: "望京集合点", address: "望京SOHO T1 大堂", time: "09:00", status: "completed", type: "activity" },
+  { id: "2", order: 2, name: "古北水镇", address: "北京市密云区古北口镇司马台村", time: "10:30", status: "current", type: "scenic" },
+  { id: "3", order: 3, name: "司马台长城", address: "北京市密云区古北口镇", time: "14:00", status: "upcoming", type: "scenic" },
+  { id: "4", order: 4, name: "烧烤农家乐", address: "古北口镇河西村18号", time: "17:00", status: "upcoming", type: "food" },
+  { id: "5", order: 5, name: "水镇大酒店", address: "古北水镇景区内", time: "19:30", status: "upcoming", type: "hotel" },
+];
+
+const typeIcons: Record<string, string> = {
+  food: "fork",
+  scenic: "map-marked",
+  hotel: "building",
+  activity: "flag",
+};
+
+interface ChatMessage {
+  id: string;
+  type: "text" | "pat";
+  senderId: string;
+  senderName: string;
+  senderColor: string;
+  content: string;
+  time: string;
+  /** pat 消息：拍一拍的目标名 */
+  patTarget?: string;
+}
+
+const initialChatMessages: ChatMessage[] = [
+  { id: "c1", type: "text", senderId: "1", senderName: "小明", senderColor: MEMBER_COLORS[0], content: "大家早上好！我已经到故宫午门了，人不算多~", time: "09:30" },
+  { id: "c2", type: "text", senderId: "2", senderName: "小红", senderColor: MEMBER_COLORS[1], content: "我快到了！地铁刚出站", time: "09:32" },
+  { id: "c3", type: "text", senderId: "3", senderName: "小丽", senderColor: MEMBER_COLORS[2], content: "我打车过来，大概3分钟到", time: "09:33" },
+  { id: "c4", type: "text", senderId: "1", senderName: "小明", senderColor: MEMBER_COLORS[0], content: "好的，大家到了在午门集合哈", time: "09:34" },
+  { id: "c5", type: "text", senderId: "4", senderName: "小刚", senderColor: MEMBER_COLORS[3], content: "堵车了...可能要晚一点，你们先进去吧", time: "09:36" },
+  { id: "c6", type: "text", senderId: "2", senderName: "小红", senderColor: MEMBER_COLORS[1], content: "到了到了！午门这边好壮观", time: "09:38" },
+];
+
+const quickReplies = ["我快到了", "在哪集合？", "等一下我", "拍照打卡！", "走起~", "到了"];
+
+/* ══════════════════════════════════════════
+   主页面
+   ══════════════════════════════════════════ */
+
+export function TeamTripPage() {
+  const [panelView, setPanelView] = useState("成员");
+  const [toastText, setToastText] = useState<string | null>(null);
+  const [showNotification, setShowNotification] = useState(true);
+  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
+  const [panelState, setPanelState] = useState(DRAWER_STATES.SMALL);
+  /* 聊天相关状态 */
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>(initialChatMessages);
+  const [chatInput, setChatInput] = useState("");
+  const [patAnimId, setPatAnimId] = useState<string | null>(null);
+  const chatEndRef = React.useRef<HTMLDivElement>(null);
+  const lastTapRef = React.useRef<{ id: string; time: number } | null>(null);
+
+  const showToast = useCallback((text: string) => {
+    setToastText(text);
+  }, []);
+
+  /* 自动滚动到聊天底部 */
+  useEffect(() => {
+    if (panelView === "聊天") {
+      chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [chatMessages, panelView]);
+
+  /* 发送聊天消息 */
+  const sendChat = useCallback((text: string) => {
+    if (!text.trim()) return;
+    const now = new Date();
+    const timeStr = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
+    setChatMessages(prev => [...prev, {
+      id: `c${Date.now()}`,
+      type: "text",
+      senderId: "me",
+      senderName: "我",
+      senderColor: "#367BF6",
+      content: text.trim(),
+      time: timeStr,
+    }]);
+    setChatInput("");
+  }, []);
+
+  /* 拍一拍处理 — 双击头像触发 */
+  const handleAvatarTap = useCallback((msg: ChatMessage) => {
+    const now = Date.now();
+    const last = lastTapRef.current;
+    if (last && last.id === msg.senderId && now - last.time < 400) {
+      // 双击 → 触发拍一拍
+      lastTapRef.current = null;
+      const timeStr = `${String(new Date().getHours()).padStart(2, "0")}:${String(new Date().getMinutes()).padStart(2, "0")}`;
+      const patMsg: ChatMessage = {
+        id: `pat${Date.now()}`,
+        type: "pat",
+        senderId: "me",
+        senderName: "我",
+        senderColor: "#367BF6",
+        content: "",
+        time: timeStr,
+        patTarget: msg.senderName,
+      };
+      setChatMessages(prev => [...prev, patMsg]);
+      setPatAnimId(msg.senderId);
+      setTimeout(() => setPatAnimId(null), 600);
+    } else {
+      lastTapRef.current = { id: msg.senderId, time: now };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!toastText) return;
+    const timer = setTimeout(() => setToastText(null), 2200);
+    return () => clearTimeout(timer);
+  }, [toastText]);
+
+  const arrivedCount = teamMembers.filter((m) => m.status === "arrived").length;
+  const movingCount = teamMembers.filter((m) => m.status === "moving").length;
+  const offlineCount = teamMembers.filter((m) => m.status === "offline").length;
+  const currentStop = itineraryItems.find((i) => i.status === "current")!;
+
+  return (
+    <div
+      className="relative w-full h-[100dvh] overflow-hidden bg-background flex flex-col"
+      style={{ fontFamily: "var(--font-family-sans)" }}
+    >
+      {/* ── 地图背景 ── */}
+      <TencentMap className="absolute inset-0 w-full h-full" center={{ lat: 40.68, lng: 117.18 }} />
+
+      {/* ── 地图上的标记层 ── */}
+      <div className="absolute inset-0 pointer-events-none z-[5]">
+        {/* ── 目的地标记 ── */}
+        <div className="absolute pointer-events-auto" style={{ top: "52%", left: "57%", transform: "translate(-50%, -100%)" }}>
+          <div className="flex flex-col items-center">
+            <div className="bg-destructive/90 text-white text-[10px] font-medium px-[6px] py-[2px] rounded-[6px] mb-[2px] whitespace-nowrap shadow-sm">
+              {currentStop.name}
+            </div>
+            <IconFont name="location" size="36px" className="text-destructive" />
+          </div>
+        </div>
+
+        {/* ── 团队成员标记点 ── */}
+        {teamMembers.map((member) => (
+          <button
+            key={member.id}
+            className="absolute flex flex-col items-center pointer-events-auto"
+            style={{
+              top: `${member.lat}%`,
+              left: `${member.lng}%`,
+              transform: "translate(-50%, -50%)",
+            }}
+            onClick={() => setSelectedMember(member)}
+          >
+            <div
+              className={cn(
+                "size-[36px] rounded-full flex items-center justify-center border-[2.5px] shadow-md",
+                member.status === "offline" ? "opacity-50 grayscale" : ""
+              )}
+              style={{
+                borderColor: member.color,
+                backgroundColor: `${member.color}15`,
+              }}
+            >
+              <IconFont name="user" size="18px" style={{ color: member.color }} />
+            </div>
+            <span
+              className="text-[10px] font-medium mt-[2px] px-[4px] py-[1px] rounded-[4px] whitespace-nowrap"
+              style={{
+                color: member.color,
+                backgroundColor: `${member.color}18`,
+              }}
+            >
+              {member.name}
+            </span>
+            {/* 移动中的脉冲 */}
+            {member.status === "moving" && (
+              <div
+                className="absolute size-[36px] rounded-full animate-ping opacity-30"
+                style={{ backgroundColor: member.color }}
+              />
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* ── TopToolbar ── */}
+      <div className="relative z-50 pt-[8px]">
+        <TopToolbar
+          mode="center-title"
+          appearance="glass"
+          title="公司团建·古北水镇"
+          showBack={true}
+          rightActionCount={1}
+          onBack={() => showToast("返回上一页")}
+          onAction={() => showToast("更多操作")}
+        />
+      </div>
+
+      {/* ── 通知条 ── */}
+      <AnimatePresence>
+        {showNotification && (
+          <motion.div
+            className="relative z-40 px-[var(--spacing-base)] mt-[var(--spacing-xs)]"
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+          >
+            <NotificationBar
+              variant="info"
+              message={`李娜 已到达${currentStop.name}`}
+              onClose={() => setShowNotification(false)}
+              actions={[{ label: "查看" }]}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ── 底部面板 ── */}
+      <DraggablePanel
+        state={panelState}
+        onStateChange={setPanelState}
+        customSmallHeight={260}
+        customMediumHeight={420}
+        bottomBar={panelView !== "聊天" ? (
+          <div className="px-[var(--spacing-base)] pb-[var(--spacing-base)] pt-[var(--spacing-xs)] border-t border-black/[0.04]">
+            <div className="flex gap-[var(--spacing-xs)]">
+              <Btn
+                size="large"
+                variant="secondary"
+                label="分享位置"
+                icon={null}
+                onClick={() => showToast("已分享我的位置")}
+                className="flex-1"
+              />
+              <Btn
+                size="large"
+                variant="primary"
+                label={`导航至${currentStop.name}`}
+                icon={null}
+                onClick={() => showToast(`正在导航至${currentStop.name}...`)}
+                className="flex-[2]"
+              />
+            </div>
+          </div>
+        ) : undefined}
+      >
+        {/* 统计概览 — 紧凑内联 */}
+        <div className="flex items-center gap-[var(--spacing-md)] px-[var(--spacing-base)] pb-[var(--spacing-sm)]">
+          <span className="text-sm"><span className="font-medium text-accent">{arrivedCount}人</span> <span className="text-muted-foreground">已到达</span></span>
+          <span className="text-sm"><span className="font-medium text-primary">{movingCount}人</span> <span className="text-muted-foreground">在途中</span></span>
+          <span className="text-sm"><span className="font-medium text-foreground">{offlineCount}人</span> <span className="text-muted-foreground">离线</span></span>
+        </div>
+
+        {/* 分段控制器 */}
+        <div className="px-[var(--spacing-base)] pb-[var(--spacing-sm)]">
+          <SegmentedControl
+            value={panelView}
+            options={["成员", "行程", "聊天"]}
+            onChange={setPanelView}
+            size="small"
+          />
+        </div>
+
+        {/* ── 内容区 ── */}
+        <div className="overflow-y-auto flex-1 min-h-0">
+          <AnimatePresence mode="wait">
+            {panelView === "成员" ? (
+              <motion.div
+                key="members"
+                initial={{ opacity: 0, x: -16 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 16 }}
+                transition={{ duration: 0.15 }}
+                className="px-[var(--spacing-base)] pb-[var(--spacing-base)]"
+              >
+                {teamMembers.map((member, index) => (
+                  <button
+                    key={member.id}
+                    onClick={() => setSelectedMember(member)}
+                    className={cn(
+                      "w-full flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-left",
+                      "active:bg-muted/30 -mx-[var(--spacing-xxs)] px-[var(--spacing-xxs)] rounded-[12px] transition-colors",
+                      index < teamMembers.length - 1 && "border-b border-black/[0.04]"
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "size-[40px] rounded-full flex items-center justify-center border-[2px] shrink-0",
+                        member.status === "offline" && "opacity-50 grayscale"
+                      )}
+                      style={{ borderColor: member.color, backgroundColor: `${member.color}10` }}
+                    >
+                      <IconFont name="user" size="20px" style={{ color: member.color }} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-[6px]">
+                        <span className="text-[14px] font-medium text-foreground leading-[20px]">
+                          {member.name}
+                        </span>
+                        <Tag
+                          label={
+                            member.status === "arrived"
+                              ? "已到达"
+                              : member.status === "moving"
+                              ? "移动中"
+                              : "离线"
+                          }
+                          size="xs"
+                          className={cn(
+                            "border-transparent",
+                            member.status === "arrived" && "bg-[#22C55E]/10 text-[#22C55E]",
+                            member.status === "moving" && "bg-accent/10 text-accent",
+                            member.status === "offline" && "bg-muted text-muted-foreground"
+                          )}
+                        />
+                      </div>
+                      <span className="text-[12px] text-muted-foreground leading-[16px]">
+                        {member.status === "arrived"
+                          ? `已在${currentStop.name}`
+                          : member.status === "offline"
+                          ? "设备离线"
+                          : `距目的地 ${member.distance}`}
+                      </span>
+                    </div>
+                    <div className="flex flex-col items-end shrink-0">
+                      <span
+                        className={cn(
+                          "text-[13px] font-medium leading-[18px]",
+                          member.status === "arrived"
+                            ? "text-[#22C55E]"
+                            : member.status === "offline"
+                            ? "text-muted-foreground"
+                            : "text-accent"
+                        )}
+                      >
+                        {member.eta}
+                      </span>
+                      {member.status === "moving" && (
+                        <span className="text-[11px] text-muted-foreground leading-[14px]">
+                          预计到达
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                ))}
+              </motion.div>
+            ) : panelView === "行程" ? (
+              <motion.div
+                key="itinerary"
+                initial={{ opacity: 0, x: 16 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -16 }}
+                transition={{ duration: 0.15 }}
+                className="px-[var(--spacing-base)] pb-[var(--spacing-base)]"
+              >
+                {itineraryItems.map((item, index) => (
+                  <div key={item.id} className="flex gap-[var(--spacing-sm)]">
+                    <div className="flex flex-col items-center w-[24px] shrink-0">
+                      <div
+                        className={cn(
+                          "size-[24px] rounded-full flex items-center justify-center shrink-0 text-[12px]",
+                          item.status === "completed" && "bg-[#22C55E]/15 text-[#22C55E]",
+                          item.status === "current" && "bg-accent text-accent-foreground shadow-md",
+                          item.status === "upcoming" && "bg-card-muted text-muted-foreground"
+                        )}
+                      >
+                        {item.status === "completed" ? (
+                          <IconFont name="check-circle" size="14px" />
+                        ) : item.status === "current" ? (
+                          <span className="text-[11px] font-bold">{item.order}</span>
+                        ) : (
+                          <span className="text-[11px]">{item.order}</span>
+                        )}
+                      </div>
+                      {index < itineraryItems.length - 1 && (
+                        <div
+                          className={cn(
+                            "w-[1.5px] flex-1 min-h-[32px]",
+                            item.status === "completed" ? "bg-[#22C55E]/30" : "bg-border"
+                          )}
+                        />
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0 pb-[var(--spacing-base)]">
+                      <div
+                        className={cn(
+                          "rounded-[16px] p-[var(--spacing-sm)]",
+                          item.status === "current"
+                            ? "bg-card shadow-[var(--elevation-sm)] border border-accent/20"
+                            : ""
+                        )}
+                      >
+                        <div className="flex items-center gap-[6px]">
+                          <span className="text-[16px]">{typeIcons[item.type] && <IconFont name={typeIcons[item.type]} size="16px" />}</span>
+                          <span
+                            className={cn(
+                              "text-[14px] font-medium leading-[20px]",
+                              item.status === "completed"
+                                ? "text-muted-foreground line-through"
+                                : "text-foreground"
+                            )}
+                          >
+                            {item.name}
+                          </span>
+                          {item.status === "current" && (
+                            <Tag
+                              label="当前"
+                              size="xs"
+                              className="bg-accent/10 text-accent border-transparent"
+                            />
+                          )}
+                        </div>
+                        <p className="text-[12px] text-muted-foreground leading-[16px] mt-[2px] truncate">
+                          {item.address}
+                        </p>
+                        <div className="flex items-center gap-[4px] mt-[4px]">
+                          <span className="text-muted-foreground">
+                            <IconFont name="time" size="12px" />
+                          </span>
+                          <span
+                            className={cn(
+                              "text-[12px] leading-[16px]",
+                              item.status === "current"
+                                ? "text-accent font-medium"
+                                : "text-muted-foreground"
+                            )}
+                          >
+                            {item.time}
+                          </span>
+                          {item.status === "current" && (
+                            <span className="text-[12px] text-[#22C55E] ml-[8px]">
+                              {arrivedCount}/{teamMembers.length}人已到达
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </motion.div>
+            ) : (
+              /* ── 聊天视图 ── */
+              <motion.div
+                key="chat"
+                initial={{ opacity: 0, x: 16 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -16 }}
+                transition={{ duration: 0.15 }}
+                className="flex flex-col"
+              >
+                {/* 消息列表 */}
+                <div className="px-[var(--spacing-base)] pb-[var(--spacing-xs)] space-y-[2px]">
+                  {chatMessages.map((msg, idx) => {
+                    const isMe = msg.senderId === "me";
+                    const showTime =
+                      idx === 0 ||
+                      chatMessages[idx - 1].time !== msg.time ||
+                      chatMessages[idx - 1].type === "pat";
+
+                    if (msg.type === "pat") {
+                      return (
+                        <motion.div
+                          key={msg.id}
+                          initial={{ opacity: 0, scale: 0.9 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          className="flex justify-center py-[6px]"
+                        >
+                          <span className="text-[12px] text-muted-foreground bg-black/[0.04] px-[10px] py-[3px] rounded-[10px]">
+                            {msg.senderName} 拍了拍 {msg.patTarget}
+                          </span>
+                        </motion.div>
+                      );
+                    }
+
+                    return (
+                      <div key={msg.id}>
+                        {showTime && (
+                          <div className="flex justify-center py-[4px]">
+                            <span className="text-[11px] text-muted-foreground">{msg.time}</span>
+                          </div>
+                        )}
+                        <div className={cn("flex gap-[8px] py-[4px]", isMe ? "flex-row-reverse" : "flex-row")}>
+                          <motion.button
+                            className="shrink-0 self-start"
+                            onDoubleClick={() => !isMe && handleAvatarTap(msg)}
+                            onClick={() => !isMe && handleAvatarTap(msg)}
+                            animate={
+                              patAnimId === msg.senderId
+                                ? { rotate: [0, -12, 12, -8, 8, 0], scale: [1, 1.15, 0.9, 1.1, 1] }
+                                : {}
+                            }
+                            transition={{ duration: 0.5 }}
+                          >
+                            <div
+                              className="size-[36px] rounded-full flex items-center justify-center text-[18px] border-[2px]"
+                              style={{
+                                borderColor: msg.senderColor,
+                                backgroundColor: `${msg.senderColor}12`,
+                              }}
+                            >
+                              <IconFont name="user" size="18px" style={{ color: msg.senderColor }} />
+                            </div>
+                          </motion.button>
+                          <div className={cn("flex flex-col max-w-[70%]", isMe ? "items-end" : "items-start")}>
+                            {!isMe && (
+                              <span className="text-[12px] font-medium leading-[16px] mb-[2px]" style={{ color: msg.senderColor }}>
+                                {msg.senderName}
+                              </span>
+                            )}
+                            <div
+                              className={cn(
+                                "rounded-[16px] px-[12px] py-[8px] text-[14px] leading-[20px]",
+                                isMe
+                                  ? "bg-accent/10 text-foreground rounded-tr-[4px]"
+                                  : "bg-card text-foreground rounded-tl-[4px] shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
+                              )}
+                            >
+                              {msg.content}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                  <div ref={chatEndRef} />
+                </div>
+
+                {/* 快捷回复 */}
+                <div className="px-[var(--spacing-base)] py-[var(--spacing-xs)] overflow-x-auto" style={{ scrollbarWidth: "none" }}>
+                  <div className="flex gap-[8px]">
+                    {quickReplies.map((text) => (
+                      <button
+                        key={text}
+                        onClick={() => sendChat(text)}
+                        className="shrink-0 px-[14px] py-[7px] rounded-[20px] bg-accent/8 text-accent text-[13px] font-medium active:bg-accent/15 transition-colors border border-accent/15"
+                      >
+                        {text}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 输入框 */}
+                <div className="px-[var(--spacing-base)] pb-[var(--spacing-sm)] pt-[var(--spacing-xxs)]">
+                  <div className="flex items-center gap-[8px]">
+                    <div className="flex-1 flex items-center bg-card rounded-[24px] border border-black/[0.06] px-[14px] h-[40px]">
+                      <input
+                        type="text"
+                        value={chatInput}
+                        onChange={(e) => setChatInput(e.target.value)}
+                        onKeyDown={(e) => e.key === "Enter" && sendChat(chatInput)}
+                        placeholder="发消息...."
+                        className="flex-1 bg-transparent text-[14px] text-foreground placeholder:text-muted-foreground outline-none"
+                      />
+                    </div>
+                    <button
+                      onClick={() => showToast("发送位置")}
+                      className="shrink-0 size-[40px] rounded-full flex items-center justify-center text-accent active:bg-accent/10 transition-colors"
+                    >
+                      <IconFont name="location" size="22px" />
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+      </DraggablePanel>
+
+      {/* ── 成员详情 BottomSheet ── */}
+      <BottomSheet
+        open={!!selectedMember}
+        onOpenChange={(open) => { if (!open) setSelectedMember(null); }}
+        title={selectedMember?.name ?? ""}
+        headerDescription={
+          selectedMember
+            ? selectedMember.status === "arrived"
+              ? `已到达 ${currentStop.name}`
+              : selectedMember.status === "offline"
+              ? "设备离线中"
+              : `距目的地 ${selectedMember.distance}，预计 ${selectedMember.eta}到达`
+            : ""
+        }
+        mainActionText="呼叫TA"
+        secondaryActionText="发消息"
+        onMainAction={() => {
+          showToast(`正在呼叫${selectedMember?.name}...`);
+          setSelectedMember(null);
+        }}
+        onSecondaryAction={() => {
+          showToast(`已向${selectedMember?.name}发送消息`);
+          setSelectedMember(null);
+        }}
+      >
+        {selectedMember && (
+          <div className="flex flex-col items-center py-[var(--spacing-sm)]">
+            <div
+              className="size-[56px] rounded-full flex items-center justify-center border-[3px] mb-[var(--spacing-xs)]"
+              style={{
+                borderColor: selectedMember.color,
+                backgroundColor: `${selectedMember.color}10`,
+              }}
+            >
+              <IconFont name="user" size="28px" style={{ color: selectedMember.color }} />
+            </div>
+            <div className="flex items-center gap-[6px]">
+              <Tag
+                label={
+                  selectedMember.status === "arrived"
+                    ? "已到达"
+                    : selectedMember.status === "moving"
+                    ? "移动中"
+                    : "离线"
+                }
+                size="sm"
+                className={cn(
+                  "border-transparent",
+                  selectedMember.status === "arrived" && "bg-[#22C55E]/10 text-[#22C55E]",
+                  selectedMember.status === "moving" && "bg-accent/10 text-accent",
+                  selectedMember.status === "offline" && "bg-muted text-muted-foreground"
+                )}
+              />
+            </div>
+          </div>
+        )}
+      </BottomSheet>
+
+      {/* ── 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>
+  );
+}