@lmy54321/design-system 1.1.4 → 1.3.0

package/template/src/pages/PlanDetailPage.tsx

@@ -0,0 +1,345 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } 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 COLORS = ["#367BF6", "#FF6B35", "#22C55E", "#A855F7", "#F59E0B"];
+
+interface Member { id: string; name: string; color: string; status: "moving"|"arrived"|"offline"; distance: string; eta: string; lat: number; lng: number; role: string; }
+interface Stop { id: string; order: number; name: string; address: string; time: string; dur: string; status: "completed"|"current"|"upcoming"; icon: string; }
+
+const members: Member[] = [
+  { id:"1", name:"小明", color:COLORS[0], status:"arrived", distance:"0m", eta:"已到达", lat:48, lng:55, role:"组织者" },
+  { id:"2", name:"小红", color:COLORS[1], status:"moving", distance:"1.2km", eta:"5分钟", lat:35, lng:40, role:"成员" },
+  { id:"3", name:"小刚", color:COLORS[2], status:"moving", distance:"3.5km", eta:"12分钟", lat:62, lng:30, role:"成员" },
+  { id:"4", name:"小丽", color:COLORS[3], status:"moving", distance:"0.8km", eta:"3分钟", lat:42, lng:72, role:"成员" },
+  { id:"5", name:"小强", color:COLORS[4], status:"offline", distance:"--", eta:"离线", lat:70, lng:22, role:"成员" },
+];
+
+const stops: Stop[] = [
+  { id:"1", order:1, name:"天安门广场", address:"北京市东城区长安街", time:"08:30", dur:"1h", status:"completed", icon:"map-marked" },
+  { id:"2", order:2, name:"故宫博物院", address:"北京市东城区景山前街4号", time:"09:45", dur:"3h", status:"current", icon:"museum" },
+  { id:"3", order:3, name:"故宫角楼咖啡", address:"故宫神武门外东侧", time:"13:00", dur:"40min", status:"upcoming", icon:"tea" },
+  { id:"4", order:4, name:"景山公园", address:"北京市西城区景山西街44号", time:"14:00", dur:"1.5h", status:"upcoming", icon:"map-marked" },
+  { id:"5", order:5, name:"南锣鼓巷", address:"北京市东城区南锣鼓巷", time:"16:00", dur:"2h", status:"upcoming", icon:"shop" },
+  { id:"6", order:6, name:"簋街·胡大饭馆", address:"北京市东城区东直门内大街", time:"18:30", dur:"1.5h", status:"upcoming", icon:"fork" },
+];
+
+interface Props { onBack: () => void; }
+
+interface ChatMsg { id: string; memberId: string; text: string; time: string; type: "text"|"location"|"quick"; }
+
+const initMessages: ChatMsg[] = [
+  { id:"c1", memberId:"1", text:"大家早上好！我已经到故宫午门了，人不算多~", time:"09:30", type:"text" },
+  { id:"c2", memberId:"2", text:"我快到了！地铁刚出站", time:"09:32", type:"text" },
+  { id:"c3", memberId:"4", text:"我打车过来，大概3分钟到", time:"09:33", type:"text" },
+  { id:"c4", memberId:"1", text:"好的，大家到了在午门集合哈", time:"09:34", type:"text" },
+  { id:"c5", memberId:"3", text:"堵车了...可能要晚一点，你们先进去吧", time:"09:40", type:"text" },
+  { id:"c6", memberId:"1", text:"[位置] 故宫博物院·午门入口", time:"09:41", type:"location" },
+  { id:"c7", memberId:"2", text:"到了到了！看到你了小明", time:"09:45", type:"text" },
+  { id:"c8", memberId:"4", text:"我也到了，在买票", time:"09:46", type:"text" },
+  { id:"c9", memberId:"1", text:"记得带身份证刷码进，不用买票", time:"09:46", type:"text" },
+  { id:"c10", memberId:"5", text:"抱歉大家，我今天身体不太舒服，可能去不了了", time:"09:50", type:"text" },
+  { id:"c11", memberId:"1", text:"没事小强，你好好休息！我们拍照给你看", time:"09:51", type:"text" },
+];
+
+const quickMsgs = ["我快到了", "在哪集合？", "等一下我", "拍照打卡！", "走起~", "到了"];
+
+export function PlanDetailPage({ onBack }: Props) {
+  const [view, setView] = useState("成员");
+  const [toast, setToast] = useState<string|null>(null);
+  const [notif, setNotif] = useState(true);
+  const [selMember, setSelMember] = useState<Member|null>(null);
+  const [panelState, setPanelState] = useState(DRAWER_STATES.SMALL);
+  const [messages, setMessages] = useState<ChatMsg[]>(initMessages);
+  const [inputText, setInputText] = useState("");
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const chatScrollRef = useRef<HTMLDivElement>(null);
+
+  const showToast = useCallback((t: string) => setToast(t), []);
+  useEffect(() => { if (!toast) return; const id = setTimeout(() => setToast(null), 2200); return () => clearTimeout(id); }, [toast]);
+
+  const scrollToBottom = useCallback(() => {
+    setTimeout(() => chatEndRef.current?.scrollIntoView({ behavior:"smooth" }), 50);
+  }, []);
+
+  useEffect(() => { if (view === "聊天") { setPanelState(DRAWER_STATES.LARGE); scrollToBottom(); } }, [view, scrollToBottom]);
+
+  const sendMsg = 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")}`;
+    const newMsg: ChatMsg = { id:`u${Date.now()}`, memberId:"self", text, time:timeStr, type:"text" };
+    setMessages(prev => [...prev, newMsg]);
+    setInputText("");
+    scrollToBottom();
+    // 模拟自动回复
+    const replyMember = members.filter(m => m.status !== "offline")[Math.floor(Math.random()*3)];
+    const replies = ["好的！","收到~","哈哈没问题","OK 马上来","太棒了！","等我一下~","在路上了"];
+    setTimeout(() => {
+      setMessages(prev => [...prev, {
+        id:`r${Date.now()}`, memberId:replyMember.id, text:replies[Math.floor(Math.random()*replies.length)],
+        time:timeStr, type:"text"
+      }]);
+      scrollToBottom();
+    }, 800 + Math.random()*1200);
+  }, [scrollToBottom]);
+
+  const arrived = members.filter(m => m.status === "arrived").length;
+  const moving = members.filter(m => m.status === "moving").length;
+  const offline = members.filter(m => m.status === "offline").length;
+  const cur = stops.find(s => s.status === "current")!;
+  const done = stops.filter(s => s.status === "completed").length;
+
+  const upcomingPos = [{ t:"45%",l:"52%" },{ t:"28%",l:"60%" },{ t:"22%",l:"40%" },{ t:"15%",l:"72%" }];
+
+  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: 39.909, lng: 116.397 }} />
+
+      {/* 地图标记层 */}
+      <div className="absolute inset-0 pointer-events-none z-[5]">
+        {/* 已完成站点 */}
+        <div className="absolute flex flex-col items-center opacity-50 pointer-events-auto" style={{ top:"72%", left:"18%", transform:"translate(-50%,-100%)" }}>
+          <div className="bg-[#22C55E]/70 text-white text-[9px] font-medium px-[5px] py-[1px] rounded-[5px] mb-[2px]">天安门广场</div>
+          <div className="size-[20px] rounded-full bg-[#22C55E]/40 flex items-center justify-center text-[#22C55E]"><IconFont name="check-circle" size="12px"/></div>
+        </div>
+
+        {/* 即将站点 */}
+        {stops.filter(s => s.status === "upcoming").map((s, i) => {
+          const p = upcomingPos[i]; if (!p) return null;
+          return (<div key={s.id} className="absolute flex flex-col items-center opacity-40 pointer-events-auto" style={{ top:p.t, left:p.l, transform:"translate(-50%,-100%)" }}>
+            <div className="bg-black/20 text-white text-[9px] font-medium px-[5px] py-[1px] rounded-[5px] mb-[2px] whitespace-nowrap">{s.name}</div>
+            <div className="size-[18px] rounded-full border border-dashed border-[#8B8B8B] bg-white/50 flex items-center justify-center text-[#8B8B8B] text-[8px] font-semibold">{s.order}</div>
+          </div>);
+        })}
+
+        {/* 当前目的地 */}
+        <div className="absolute pointer-events-auto" style={{ top:"50%", left:"50%", 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">{cur.name}</div>
+            <IconFont name="location" size="36px" className="text-destructive"/>
+            <div className="absolute bottom-[6px] size-[16px] rounded-full bg-destructive/20 animate-ping"/>
+          </div>
+        </div>
+
+        {/* 成员位置 */}
+        {members.map(m => (
+          <button key={m.id} className="absolute flex flex-col items-center pointer-events-auto" style={{ top:`${m.lat}%`, left:`${m.lng}%`, transform:"translate(-50%,-50%)" }} onClick={() => setSelMember(m)}>
+            <div className={cn("size-[36px] rounded-full flex items-center justify-center border-[2.5px] shadow-md", m.status === "offline" && "opacity-50 grayscale")} style={{ borderColor:m.color, backgroundColor:`${m.color}20` }}>
+              <IconFont name="user" size="18px" style={{ color:m.color }}/>
+            </div>
+            <span className="text-[10px] font-medium mt-[2px] px-[4px] py-[1px] rounded-[4px] whitespace-nowrap" style={{ color:m.color, backgroundColor:`${m.color}18` }}>{m.name}</span>
+            {m.status === "moving" && <div className="absolute size-[36px] rounded-full animate-ping opacity-25" style={{ backgroundColor:m.color }}/>}
+          </button>
+        ))}
+      </div>
+
+      {/* 进度条 — 固定悬浮在 TopToolbar 下方 */}
+      <div className="absolute z-40 left-0 right-0 top-[88px] px-[var(--spacing-base)]">
+        <div className="flex items-center gap-[8px] bg-white/70 backdrop-blur-[16px] rounded-[14px] px-[12px] py-[8px] shadow-sm border border-black/[0.06]">
+          <div className="flex items-center gap-[4px] text-[12px] text-muted-foreground">
+            <IconFont name="location" size="14px" className="text-accent"/>
+            <span className="text-foreground font-medium">{done}/{stops.length}</span><span>站</span>
+          </div>
+          <div className="flex-1 h-[4px] bg-black/[0.06] rounded-full overflow-hidden">
+            <motion.div className="h-full bg-accent rounded-full" initial={{ width:0 }} animate={{ width:`${((done+0.5)/stops.length)*100}%` }} transition={{ duration:0.8 }}/>
+          </div>
+          <div className="flex items-center gap-[4px] text-[12px]">
+            <IconFont name="time" size="14px" className="text-muted-foreground"/><span className="text-foreground font-medium">09:45</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 通知 — 固定悬浮在进度条下方 */}
+      <AnimatePresence>{notif && (
+        <motion.div className="absolute z-40 left-0 right-0 top-[140px] px-[var(--spacing-base)]" initial={{ opacity:0,y:-10 }} animate={{ opacity:1,y:0 }} exit={{ opacity:0,y:-10 }}>
+          <NotificationBar variant="info" message={`小明 已到达${cur.name}`} onClose={() => setNotif(false)} actions={[{ label:"查看" }]}/>
+        </motion.div>
+      )}</AnimatePresence>
+
+      {/* 底部面板 — TopToolbar 通过 DraggablePanel 的 topToolbar prop 管理 */}
+      <DraggablePanel
+        state={panelState}
+        onStateChange={setPanelState}
+        customSmallHeight={260}
+        customMediumHeight={400}
+        topToolbar={{
+          mode: "center-title",
+          title: "故宫+景山一日游",
+          showBack: true,
+          rightActionCount: 1,
+          onBack: onBack,
+          onAction: () => showToast("更多操作"),
+        }}
+        showTopToolbarInStates={[DRAWER_STATES.SMALL, DRAWER_STATES.MEDIUM, DRAWER_STATES.LARGE]}
+        bottomBar={view !== "聊天" ? (
+          <div className="px-[var(--spacing-base)] pb-[var(--spacing-base)] pt-[var(--spacing-xs)] border-t border-black/[0.04] shrink-0">
+            <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={`导航至${cur.name}`} icon={null} onClick={() => showToast(`正在导航至${cur.name}...`)} className="flex-[2]"/>
+            </div>
+          </div>
+        ) : undefined}
+      >
+        <div className="px-[var(--spacing-base)] pb-[var(--spacing-xs)] shrink-0">
+          <SegmentedControl value={view} options={["成员","行程","聊天"]} onChange={setView} size="small" className="w-full [&>button]:flex-1"/>
+        </div>
+        <div className="flex items-center gap-[var(--spacing-sm)] px-[var(--spacing-base)] pb-[var(--spacing-sm)] shrink-0">
+          <span className="text-xs"><span className="font-medium text-accent">{arrived}</span> <span className="text-muted-foreground">已到达</span></span>
+          <span className="text-muted-foreground/30">·</span>
+          <span className="text-xs"><span className="font-medium text-primary">{moving}</span> <span className="text-muted-foreground">在途中</span></span>
+          <span className="text-muted-foreground/30">·</span>
+          <span className="text-xs"><span className="font-medium text-foreground">{offline}</span> <span className="text-muted-foreground">离线</span></span>
+        </div>
+
+        <div className="overflow-y-auto flex-1 min-h-0" ref={view==="聊天"?chatScrollRef:undefined}>
+          <AnimatePresence mode="wait">
+            {view === "成员" ? (
+              <motion.div key="m" 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)]">
+                {members.map((m, i) => (
+                  <button key={m.id} onClick={() => setSelMember(m)} 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", i < members.length-1 && "border-b border-black/[0.04]")}>
+                    <div className={cn("size-[40px] rounded-full flex items-center justify-center border-[2px] shrink-0", m.status==="offline" && "opacity-50 grayscale")} style={{ borderColor:m.color, backgroundColor:`${m.color}10` }}>
+                      <IconFont name="user" size="20px" style={{ color:m.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]">{m.name}</span>
+                        {m.role === "组织者" && <Tag label="组织者" size="xs" className="bg-[#F59E0B]/10 text-[#F59E0B] border-transparent"/>}
+                        <Tag label={m.status==="arrived"?"已到达":m.status==="moving"?"移动中":"离线"} size="xs" className={cn("border-transparent", m.status==="arrived" && "bg-[#22C55E]/10 text-[#22C55E]", m.status==="moving" && "bg-accent/10 text-accent", m.status==="offline" && "bg-muted text-muted-foreground")}/>
+                      </div>
+                      <span className="text-[12px] text-muted-foreground leading-[16px]">{m.status==="arrived"?`已在${cur.name}`:m.status==="offline"?"设备离线":`距目的地 ${m.distance}`}</span>
+                    </div>
+                    <div className="flex flex-col items-end shrink-0">
+                      <span className={cn("text-[13px] font-medium leading-[18px]", m.status==="arrived"?"text-[#22C55E]":m.status==="offline"?"text-muted-foreground":"text-accent")}>{m.eta}</span>
+                      {m.status === "moving" && <span className="text-[11px] text-muted-foreground leading-[14px]">预计到达</span>}
+                    </div>
+                  </button>
+                ))}
+              </motion.div>
+            ) : view === "行程" ? (
+              <motion.div key="it" 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)]">
+                {stops.map((s, i) => (
+                  <div key={s.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", s.status==="completed" && "bg-[#22C55E]/15 text-[#22C55E]", s.status==="current" && "bg-accent text-white shadow-md", s.status==="upcoming" && "bg-card-muted text-muted-foreground")}>
+                        {s.status==="completed" ? <IconFont name="check-circle" size="14px"/> : <span className="text-[11px] font-bold">{s.order}</span>}
+                      </div>
+                      {i < stops.length-1 && <div className={cn("w-[1.5px] flex-1 min-h-[32px]", s.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)]", s.status==="current" && "bg-card shadow-[var(--elevation-sm)] border border-accent/20")}>
+                        <div className="flex items-center gap-[6px]">
+                          <IconFont name={s.icon} size="16px" className={s.status==="completed"?"text-muted-foreground":"text-foreground"}/>
+                          <span className={cn("text-[14px] font-medium leading-[20px]", s.status==="completed"?"text-muted-foreground line-through":"text-foreground")}>{s.name}</span>
+                          {s.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">{s.address}</p>
+                        <div className="flex items-center gap-[4px] mt-[4px]">
+                          <IconFont name="time" size="12px" className="text-muted-foreground"/>
+                          <span className={cn("text-[12px] leading-[16px]", s.status==="current"?"text-accent font-medium":"text-muted-foreground")}>{s.time}</span>
+                          <span className="text-[12px] text-muted-foreground ml-[4px]">· {s.dur}</span>
+                          {s.status==="current" && <span className="text-[12px] text-[#22C55E] ml-[8px]">{arrived}/{members.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="px-[var(--spacing-sm)] pb-[16px]">
+                {messages.map((msg) => {
+                  const isSelf = msg.memberId === "self";
+                  const sender = members.find(m => m.id === msg.memberId);
+                  return (
+                    <motion.div key={msg.id} className={cn("flex gap-[8px] mb-[10px]", isSelf && "flex-row-reverse")} initial={{ opacity:0, y:8 }} animate={{ opacity:1, y:0 }} transition={{ duration:0.2 }}>
+                      {!isSelf && sender && (
+                        <div className="size-[28px] rounded-full flex items-center justify-center border-[1.5px] shrink-0 mt-[2px]" style={{ borderColor:sender.color, backgroundColor:`${sender.color}10` }}>
+                          <IconFont name="user" size="14px" style={{ color:sender.color }}/>
+                        </div>
+                      )}
+                      <div className={cn("max-w-[75%] min-w-0", isSelf && "items-end")}>
+                        {!isSelf && sender && <span className="text-[11px] font-medium leading-[14px] mb-[2px] block" style={{ color:sender.color }}>{sender.name}</span>}
+                        <div className={cn("rounded-[16px] px-[12px] py-[8px] text-[13px] leading-[19px] break-words",
+                          isSelf ? "bg-accent text-white rounded-tr-[4px]" :
+                          msg.type === "location" ? "bg-[#22C55E]/10 text-foreground border border-[#22C55E]/20 rounded-tl-[4px]" :
+                          "bg-card-muted text-foreground rounded-tl-[4px]"
+                        )}>
+                          {msg.type === "location" && <span className="inline-flex items-center gap-[3px] mr-[2px]"><IconFont name="location" size="13px" className="text-[#22C55E]"/></span>}
+                          {msg.text}
+                        </div>
+                        <span className={cn("text-[10px] text-muted-foreground leading-[14px] mt-[2px] block", isSelf && "text-right")}>{msg.time}</span>
+                      </div>
+                      {isSelf && <div className="size-[28px] rounded-full bg-accent/15 flex items-center justify-center shrink-0 mt-[2px]"><IconFont name="user" size="14px" className="text-accent"/></div>}
+                    </motion.div>
+                  );
+                })}
+                <div ref={chatEndRef}/>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* 底部操作 — 聊天视图时显示输入框 */}
+        {view === "聊天" && (
+          <div className="px-[var(--spacing-sm)] pb-[var(--spacing-sm)] pt-[var(--spacing-xs)] border-t border-black/[0.04] shrink-0">
+            <div className="flex gap-[6px] overflow-x-auto pb-[8px] scrollbar-hide">
+              {quickMsgs.map(q => (
+                <button key={q} onClick={() => sendMsg(q)} className="shrink-0 px-[10px] py-[5px] rounded-[20px] bg-accent/8 text-accent text-[12px] font-medium active:bg-accent/15 transition-colors border border-accent/15">{q}</button>
+              ))}
+            </div>
+            <div className="flex gap-[8px] items-end">
+              <div className="flex-1 relative">
+                <input
+                  type="text"
+                  value={inputText}
+                  onChange={e => setInputText(e.target.value)}
+                  onKeyDown={e => { if (e.key === "Enter" && !e.nativeEvent.isComposing) sendMsg(inputText); }}
+                  placeholder="发消息..."
+                  className="w-full h-[38px] px-[14px] rounded-[20px] bg-card-muted text-[14px] text-foreground placeholder:text-muted-foreground outline-none border border-black/[0.06] focus:border-accent/40 transition-colors"
+                />
+              </div>
+              <button onClick={() => { if (inputText.trim()) sendMsg(inputText); else showToast("[位置] 已分享当前位置"); }} className={cn("size-[38px] rounded-full flex items-center justify-center shrink-0 transition-colors", inputText.trim() ? "bg-accent text-white" : "bg-card-muted text-muted-foreground")}>
+                <IconFont name={inputText.trim() ? "arrow-up" : "location"} size="18px"/>
+              </button>
+            </div>
+          </div>
+        )}
+      </DraggablePanel>
+
+      {/* 成员详情 BottomSheet */}
+      <BottomSheet open={!!selMember} onOpenChange={o => { if(!o) setSelMember(null); }} title={selMember?.name ?? ""} headerDescription={selMember ? (selMember.status==="arrived"?`已到达 ${cur.name}`:selMember.status==="offline"?"设备离线中":`距目的地 ${selMember.distance}，预计 ${selMember.eta}到达`) : ""} mainActionText="呼叫TA" secondaryActionText="发消息" onMainAction={() => { showToast(`正在呼叫${selMember?.name}...`); setSelMember(null); }} onSecondaryAction={() => { showToast(`已向${selMember?.name}发送消息`); setSelMember(null); }}>
+        {selMember && (
+          <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:selMember.color, backgroundColor:`${selMember.color}10` }}>
+              <IconFont name="user" size="28px" style={{ color:selMember.color }}/>
+            </div>
+            <div className="flex items-center gap-[6px]">
+              {selMember.role === "组织者" && <Tag label="组织者" size="sm" className="bg-[#F59E0B]/10 text-[#F59E0B] border-transparent"/>}
+              <Tag label={selMember.status==="arrived"?"已到达":selMember.status==="moving"?"移动中":"离线"} size="sm" className={cn("border-transparent", selMember.status==="arrived" && "bg-[#22C55E]/10 text-[#22C55E]", selMember.status==="moving" && "bg-accent/10 text-accent", selMember.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>{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>
+  );
+}