feat: 任务看板支持托拽更新

Author: 赵汝波

package.json

@@ -26,6 +26,8 @@
 		]
 	},
 	"dependencies": {
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/utilities": "^3.2.2",
 		"@hookform/resolvers": "^5.2.2",
 		"@prisma/client": "^6.19.3",
 		"@radix-ui/react-dialog": "^1.1.15",

pnpm-lock.yaml

@@ -1,5 +1,10 @@
 'use client'
 
+import type {
+	DraggableAttributes,
+	DraggableSyntheticListeners,
+} from '@dnd-kit/core'
+import { GripVertical } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { TaskDetailSheet } from '@/components/task-detail-sheet'
 import { PRIORITY_BADGE_CLASS, PRIORITY_LABEL } from '@/lib/task-priority'
@@ -22,10 +27,17 @@ export function TaskBoardCard({
 	task,
 	initialDetailOpen = false,
 	onDetailClose,
+	boardDragSetHandle,
+	boardDragAttributes,
+	boardDragListeners,
 }: {
 	task: TaskListItem
 	initialDetailOpen?: boolean
 	onDetailClose?: () => void
+	/** 看板拖拽：与下面两项同时传入时渲染左侧手柄（dnd-kit `setActivatorNodeRef`） */
+	boardDragSetHandle?: (element: HTMLElement | null) => void
+	boardDragAttributes?: DraggableAttributes
+	boardDragListeners?: DraggableSyntheticListeners
 }) {
 	const [detailOpen, setDetailOpen] = useState(initialDetailOpen)
 
@@ -35,12 +47,31 @@ export function TaskBoardCard({
 
 	const dueLabel = formatDueShort(task.dueDate)
 
-	return (
-		<>
+	const showBoardDrag =
+		boardDragSetHandle != null &&
+		boardDragAttributes != null &&
+		boardDragListeners != null
+
+	const body = (
+		<div
+			className={`flex w-full items-stretch gap-0.5 rounded-lg border border-zinc-200 border-t-[3px] bg-white text-left shadow-sm transition ${COLUMN_TOP[task.status]} hover:border-zinc-300 hover:shadow`}
+		>
+			{showBoardDrag ? (
+				<button
+					type='button'
+					ref={boardDragSetHandle}
+					className='touch-none cursor-grab rounded-l-md px-1 py-3 text-zinc-400 hover:bg-zinc-50 active:cursor-grabbing'
+					aria-label='拖动以改变状态列'
+					{...boardDragAttributes}
+					{...boardDragListeners}
+				>
+					<GripVertical className='h-4 w-4 shrink-0' />
+				</button>
+			) : null}
 			<button
 				type='button'
 				onClick={() => setDetailOpen(true)}
-				className={`w-full rounded-lg border border-zinc-200 border-t-[3px] bg-white p-3 text-left shadow-sm transition ${COLUMN_TOP[task.status]} hover:border-zinc-300 hover:shadow`}
+				className='min-w-0 flex-1 p-3 text-left'
 			>
 				<div className='flex items-start justify-between gap-2'>
 					<span className='line-clamp-3 text-sm font-medium leading-snug text-zinc-900'>
@@ -63,7 +94,12 @@ export function TaskBoardCard({
 					</p>
 				) : null}
 			</button>
+		</div>
+	)
 
+	return (
+		<>
+			{body}
 			<TaskDetailSheet
 				task={task}
 				open={detailOpen}

src/components/task-board-card.tsx

@@ -1,6 +1,21 @@
 'use client'
 
-import { useMemo } from 'react'
+import {
+	DndContext,
+	PointerSensor,
+	closestCorners,
+	useDraggable,
+	useDroppable,
+	useSensor,
+	useSensors,
+	type DragEndEvent,
+	type UniqueIdentifier,
+} from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
+import { useMemo, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+import { updateTaskStatusAction } from '@/app/actions/tasks'
 import { TaskBoardCard } from '@/components/task-board-card'
 import { Badge } from '@/components/ui/badge'
 import type { TaskListItem, TaskStatus } from '@/types/task'
@@ -13,16 +28,107 @@ const STATUS_TITLE: Record<TaskStatus, string> = {
 	done: '已完成',
 }
 
+function resolveDropColumn(
+	overId: UniqueIdentifier,
+	tasks: TaskListItem[]
+): TaskStatus | null {
+	const s = String(overId)
+	if (s === 'todo' || s === 'doing' || s === 'done') return s
+	const hit = tasks.find(t => t.id === s)
+	return hit?.status ?? null
+}
+
+function BoardDraggableCard({
+	task,
+	openTaskId,
+	onStripTaskId,
+}: {
+	task: TaskListItem
+	openTaskId?: string
+	onStripTaskId?: () => void
+}) {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		isDragging,
+	} = useDraggable({ id: task.id })
+
+	const style = {
+		transform: CSS.Translate.toString(transform),
+		opacity: isDragging ? 0.55 : undefined,
+		zIndex: isDragging ? 20 : undefined,
+	}
+
+	return (
+		<div ref={setNodeRef} style={style}>
+			<TaskBoardCard
+				task={task}
+				initialDetailOpen={openTaskId === task.id}
+				onDetailClose={openTaskId === task.id ? onStripTaskId : undefined}
+				boardDragSetHandle={setActivatorNodeRef}
+				boardDragAttributes={attributes}
+				boardDragListeners={listeners}
+			/>
+		</div>
+	)
+}
+
+function BoardColumn({
+	status,
+	count,
+	children,
+}: {
+	status: TaskStatus
+	count: number
+	children: React.ReactNode
+}) {
+	const { setNodeRef, isOver } = useDroppable({ id: status })
+
+	return (
+		<section
+			className={`flex min-h-[min(60vh,28rem)] flex-col rounded-xl border bg-zinc-50/40 p-3 transition-colors ${
+				isOver
+					? 'border-violet-400 ring-2 ring-violet-400/30'
+					: 'border-zinc-200'
+			}`}
+		>
+			<div className='mb-3 flex items-center justify-between gap-2'>
+				<span className='text-xs font-semibold uppercase tracking-wide text-zinc-500'>
+					{STATUS_TITLE[status]}
+				</span>
+				<Badge variant='secondary'>{count}</Badge>
+			</div>
+			<div
+				ref={setNodeRef}
+				className='flex min-h-[12rem] flex-col gap-2 rounded-lg border border-transparent'
+			>
+				{children}
+			</div>
+		</section>
+	)
+}
+
 export function TasksBoard({
 	tasks,
 	openTaskId,
 	onStripTaskId,
 }: {
 	tasks: TaskListItem[]
 	openTaskId?: string
-	/** 关闭详情时从 URL 去掉 `taskId`（与列表行一致） */
 	onStripTaskId?: () => void
 }) {
+	const router = useRouter()
+	const [pending, startTransition] = useTransition()
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, {
+			activationConstraint: { distance: 8 },
+		})
+	)
+
 	const grouped = useMemo(() => {
 		const m: Record<TaskStatus, TaskListItem[]> = {
 			todo: [],
@@ -35,39 +141,59 @@ export function TasksBoard({
 		return m
 	}, [tasks])
 
+	const handleDragEnd = (event: DragEndEvent) => {
+		const { active, over } = event
+		if (!over || pending) return
+
+		const taskId = String(active.id)
+		const nextStatus = resolveDropColumn(over.id, tasks)
+		if (!nextStatus) return
+
+		const task = tasks.find(t => t.id === taskId)
+		if (!task || task.status === nextStatus) return
+
+		startTransition(async () => {
+			const res = await updateTaskStatusAction(taskId, nextStatus)
+			if (!res.ok) {
+				toast.error(res.error ?? '更新状态失败')
+				return
+			}
+			router.refresh()
+			toast.success(`已移至「${STATUS_TITLE[nextStatus]}」`)
+		})
+	}
+
 	return (
-		<div className='grid grid-cols-1 gap-4 md:grid-cols-3 md:items-start'>
-			{STATUSES.map(s => (
-				<section
-					key={s}
-					className='flex min-h-[min(60vh,28rem)] flex-col rounded-xl border border-zinc-200 bg-zinc-50/40 p-3'
-				>
-					<div className='mb-3 flex items-center justify-between gap-2'>
-						<span className='text-xs font-semibold uppercase tracking-wide text-zinc-500'>
-							{STATUS_TITLE[s]}
-						</span>
-						<Badge variant='secondary'>{grouped[s].length}</Badge>
-					</div>
-					<div className='flex flex-col gap-2'>
+		<DndContext
+			// 固定 id：避免 useUniqueId 的全局计数在 SSR 与客户端不一致导致 aria-describedby 水合不匹配
+			id='tasks-board-dnd'
+			sensors={sensors}
+			collisionDetection={closestCorners}
+			onDragEnd={handleDragEnd}
+		>
+			<p className='mb-2 text-xs text-zinc-500'>
+				拖动卡片左侧手柄到其它列即可更新状态（与列表共用同一套权限校验）。
+			</p>
+			<div className='grid grid-cols-1 gap-4 md:grid-cols-3 md:items-start'>
+				{STATUSES.map(s => (
+					<BoardColumn key={s} status={s} count={grouped[s].length}>
 						{grouped[s].length === 0 ? (
-							<p className='rounded-lg border border-dashed border-zinc-200 bg-white/60 py-6 text-center text-xs text-zinc-400'>
-								无任务
+							<p className='rounded-lg border border-dashed border-zinc-200 bg-white/60 py-8 text-center text-xs text-zinc-400'>
+								拖入任务到此处
 							</p>
 						) : (
 							grouped[s].map(task => (
-								<TaskBoardCard
+								<BoardDraggableCard
 									key={task.id}
 									task={task}
-									initialDetailOpen={openTaskId === task.id}
-									onDetailClose={
-										openTaskId === task.id ? onStripTaskId : undefined
-									}
+									openTaskId={openTaskId}
+									onStripTaskId={onStripTaskId}
 								/>
 							))
 						)}
-					</div>
-				</section>
-			))}
-		</div>
+					</BoardColumn>
+				))}
+			</div>
+		</DndContext>
 	)
 }