fix: 修复行程卡片间距被 last:mb-0 清零的问题

每个 SortablePlanItem 被 motion.div 包裹,last:mb-0 会对
所有 item 生效导致 mb-5 失效,移除 last:mb-0 即可。
同步优化卡片内部间距、padding、reason 加分隔线。
This commit is contained in:
2026-03-02 13:03:53 +08:00
parent 04a45c4894
commit 7b6ce22f63
+11 -11
View File
@@ -197,13 +197,13 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
}; };
return ( return (
<div ref={setNodeRef} style={style} className="relative mb-4 last:mb-0"> <div ref={setNodeRef} style={style} className="relative mb-5">
<div className="absolute -left-6 top-3 flex h-[18px] w-[18px] items-center justify-center rounded-full bg-purple-600/20 ring-2 ring-background"> <div className="absolute -left-6 top-4 flex h-[18px] w-[18px] items-center justify-center rounded-full bg-purple-600/20 ring-2 ring-background">
<div className="h-2 w-2 rounded-full bg-purple-400" /> <div className="h-2 w-2 rounded-full bg-purple-400" />
</div> </div>
<div className="rounded-xl bg-surface/80 p-3.5 ring-1 ring-border/80"> <div className="rounded-2xl bg-surface/80 p-4 ring-1 ring-border/80">
<div className="flex items-start gap-2"> <div className="flex items-start gap-2.5">
{canEdit && ( {canEdit && (
<button <button
{...attributes} {...attributes}
@@ -214,20 +214,20 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
<GripVertical size={14} /> <GripVertical size={14} />
</button> </button>
)} )}
<span className="mt-0.5 text-sm font-black text-purple-400">{item.time}</span> <span className="mt-0.5 min-w-[38px] text-sm font-black text-purple-400">{item.time}</span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<CategoryBadge category={guessCategory(item.activity)} /> <CategoryBadge category={guessCategory(item.activity)} />
<p className="truncate text-sm font-bold text-heading">{item.activity}</p> <p className="truncate text-sm font-bold text-heading">{item.activity}</p>
</div> </div>
<div className="mt-1.5 flex items-center gap-1 text-[11px] text-muted"> <div className="mt-2 flex items-center gap-1 text-[11px] text-muted">
<MapPin size={10} className="shrink-0" /> <MapPin size={10} className="shrink-0" />
<span className="truncate">{item.poi}</span> <span className="truncate">{item.poi}</span>
</div> </div>
{item.address && ( {item.address && (
<p className="mt-0.5 truncate text-[10px] text-dim">{item.address}</p> <p className="mt-1 truncate text-[10px] text-dim">{item.address}</p>
)} )}
<div className="mt-2 flex items-center gap-3"> <div className="mt-2.5 flex items-center gap-3">
<span className="flex items-center gap-1 text-[10px] text-dim"> <span className="flex items-center gap-1 text-[10px] text-dim">
<Clock size={9} /> <Clock size={9} />
{formatDuration(item.duration)} {formatDuration(item.duration)}
@@ -245,7 +245,7 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
)} )}
</div> </div>
{item.reason && ( {item.reason && (
<p className="mt-1.5 text-[10px] leading-relaxed text-dim italic"> <p className="mt-2.5 border-t border-border/30 pt-2 text-[10px] leading-relaxed text-dim italic">
{item.reason} {item.reason}
</p> </p>
)} )}
@@ -434,13 +434,13 @@ export default function BlindboxPlan({
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.div <motion.div
key={dayIndex} key={dayIndex}
className="relative mx-auto max-w-sm pl-6" className="relative mx-auto max-w-sm px-4 pb-2 pl-9"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }} exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
> >
<div className="absolute left-[9px] top-2 bottom-2 w-px bg-purple-500/20" /> <div className="absolute left-[21px] top-2 bottom-2 w-px bg-purple-500/20" />
<DndContext <DndContext
key={dayIndex} key={dayIndex}