69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
import type { ForeshadowView } from "@/lib/api/types";
|
||
import { LANE_LABELS, type ForeshadowStatus } from "@/lib/foreshadow/board";
|
||
import { Badge } from "@/components/ui/Badge";
|
||
import { ForeshadowCard } from "./ForeshadowCard";
|
||
|
||
interface KanbanColumnProps {
|
||
status: ForeshadowStatus;
|
||
items: ForeshadowView[];
|
||
busy: boolean;
|
||
onTransition: (
|
||
code: string,
|
||
toStatus: ForeshadowStatus | null,
|
||
progressNote: string,
|
||
) => void;
|
||
}
|
||
|
||
// 单个状态泳道（UX §6.8）。OVERDUE 列整列琥珀强调（表头 + 卡片）。
|
||
export function KanbanColumn({
|
||
status,
|
||
items,
|
||
busy,
|
||
onTransition,
|
||
}: KanbanColumnProps) {
|
||
const overdue = status === "OVERDUE";
|
||
return (
|
||
<section
|
||
data-status={status}
|
||
className="flex min-w-0 flex-col rounded border border-line bg-bg"
|
||
aria-label={`${LANE_LABELS[status]} 泳道`}
|
||
>
|
||
<header
|
||
className={`flex items-center justify-between rounded-t border-b px-3 py-2 ${
|
||
overdue
|
||
? "border-overdue bg-overdue/10 text-ink"
|
||
: "border-line bg-panel text-ink-soft"
|
||
}`}
|
||
>
|
||
<span className="flex items-center gap-2">
|
||
{overdue ? (
|
||
<Badge variant="warning">{LANE_LABELS[status]}</Badge>
|
||
) : (
|
||
<span className="text-sm font-medium text-ink">
|
||
{LANE_LABELS[status]}
|
||
</span>
|
||
)}
|
||
</span>
|
||
<span className="font-mono text-xs">{items.length}</span>
|
||
</header>
|
||
<ul className="space-y-2 p-2 xl:flex-1 xl:overflow-auto">
|
||
{items.length === 0 ? (
|
||
<li className="px-1 py-3 text-xs text-ink-soft/60">—</li>
|
||
) : (
|
||
items.map((item) => (
|
||
<ForeshadowCard
|
||
key={item.code}
|
||
item={item}
|
||
overdue={overdue}
|
||
busy={busy}
|
||
onTransition={onTransition}
|
||
/>
|
||
))
|
||
)}
|
||
</ul>
|
||
</section>
|
||
);
|
||
}
|