kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
每个 SortablePlanItem 被 motion.div 包裹，last:mb-0 会对
所有 item 生效导致 mb-5 失效，移除 last:mb-0 即可。
同步优化卡片内部间距、padding、reason 加分隔线。
This commit is contained in:
kurihada
2026-03-02 13:03:53 +08:00
parent 04a45c4894
commit 7b6ce22f63
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlindboxPlan.tsx
+11 -11
View File
@@ -197,13 +197,13 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
};
return (
<div ref={setNodeRef} style={style} className="relative mb-4 last:mb-0">
<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 ref={setNodeRef} style={style} className="relative mb-5">
<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>
<div className="rounded-xl bg-surface/80 p-3.5 ring-1 ring-border/80">
<div className="flex items-start gap-2">
<div className="rounded-2xl bg-surface/80 p-4 ring-1 ring-border/80">
<div className="flex items-start gap-2.5">
{canEdit && (
<button
{...attributes}
@@ -214,20 +214,20 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
<GripVertical size={14} />
</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="flex items-center gap-1.5">
<CategoryBadge category={guessCategory(item.activity)} />
<p className="truncate text-sm font-bold text-heading">{item.activity}</p>
</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" />
<span className="truncate">{item.poi}</span>
</div>
{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">
<Clock size={9} />
{formatDuration(item.duration)}
@@ -245,7 +245,7 @@ function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps)
)}
</div>
{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}
</p>
)}
@@ -434,13 +434,13 @@ export default function BlindboxPlan({
<AnimatePresence mode="wait">
<motion.div
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 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
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
key={dayIndex}