'use client'; import { useState, useMemo } from 'react'; import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Play, Trash2, ArrowRightLeft, CalendarRange } from 'lucide-react'; import { StatusBadge } from './StatusBadge'; import { CategoryChip } from './CategoryChip'; import { useDevTaskStore } from '@/stores/useDevTaskStore'; import { useWorkActivityStore } from '@/stores/useWorkActivityStore'; import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore'; import { useRequirementStore } from '@/stores/useRequirementStore'; import { useMemberStore } from '@/stores/useMemberStore'; import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR, formatHours, getEstimateHours, getActualHours, } from '@/lib/dev-task'; import { needsDelayReason } from '@/lib/dev-task-transitions'; import { formatShortTime } from '@/lib/work-hours'; import type { DevTaskStatus } from '@/lib/dev-task'; interface Props { taskId: string; allTaskIds: string[]; onClose: () => void; contextLabel?: string; } export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel }: Props) { const { tasks, changeStatus, setBlocked, deleteTask, updateTask } = useDevTaskStore(); const addProgressNote = useWorkActivityStore((s) => s.addProgressNote); const { categories } = useTaskCategoryStore(); const { requirements } = useRequirementStore(); const { members } = useMemberStore(); const [showTransfer, setShowTransfer] = useState(false); const [transferTo, setTransferTo] = useState(''); const [showDelayInput, setShowDelayInput] = useState(false); const [delayReason, setDelayReason] = useState(''); const [progressNote, setProgressNote] = useState(''); const [progressBlocker, setProgressBlocker] = useState(''); const [progressHelperId, setProgressHelperId] = useState(''); const [progressDelayRisk, setProgressDelayRisk] = useState(''); const task = tasks.find((t) => t.id === taskId); if (!task) return null; const category = categories.find((c) => c.id === task.categoryId); const requirement = requirements.find((r) => r.id === task.requirementId); const allTasks = tasks.filter((t) => allTaskIds.includes(t.id)); const predecessors = (task.predecessorIds || []).map((id) => allTasks.find((t) => t.id === id)).filter(Boolean); const nextStatuses = ALLOWED_TRANSITIONS[task.status] || []; const [blockReason, setBlockReason] = useState(task.blockReason || ''); const [showBlockInput, setShowBlockInput] = useState(false); const estimate = useMemo(() => getEstimateHours(task), [task]); const executorEstimate = typeof task.estimateHours === 'number' && task.estimateHours > 0 ? task.estimateHours : undefined; const aiEstimate = typeof task.aiEstimateHours === 'number' && task.aiEstimateHours > 0 ? task.aiEstimateHours : undefined; const actual = useMemo(() => getActualHours(task), [task]); const overrun = actual > estimate && estimate > 0; const requireDelay = task.status === 'todo' && needsDelayReason(task); const handleTransition = (to: DevTaskStatus) => { if (to === 'in_progress' && requireDelay && !showDelayInput) { setShowDelayInput(true); return; } const opts = to === 'in_progress' && delayReason.trim() ? { delayReason: delayReason.trim() } : undefined; const result = changeStatus(task.id, to, opts); if (!result.ok) { alert(result.message); return; } if (to === 'in_progress') { setShowDelayInput(false); setDelayReason(''); } }; const handleBlock = () => { if (!blockReason.trim()) return; setBlocked(task.id, true, blockReason.trim()); setShowBlockInput(false); }; const handleUnblock = () => { setBlocked(task.id, false); setBlockReason(''); }; const handleProgressNote = () => { const note = progressNote.trim(); const blocker = progressBlocker.trim(); const delayRisk = progressDelayRisk.trim(); if (!note && !blocker && !delayRisk) return; addProgressNote({ actorId: task.assigneeId, sourceType: 'dev_task', sourceId: task.id, title: task.title, note: note || '今日进展已更新', blocker: blocker || undefined, helperId: progressHelperId || undefined, delayRisk: delayRisk || undefined, }); setProgressNote(''); setProgressBlocker(''); setProgressHelperId(''); setProgressDelayRisk(''); }; return (
e.stopPropagation()}> {contextLabel && (
{contextLabel}
)}
{task.taskNo} {task.title}
{task.status !== 'submitted' && ( )}
{showTransfer && (
转交给：
)}
{requirement && (
关联需求
{requirement.code} {requirement.title}
)}
状态 & 操作
{DEV_TASK_STATUS_LABEL[task.status]} {task.isBlocked && ( 阻塞中 )} {requireDelay && ( 超期未开始 )}
{nextStatuses.length > 0 && !showDelayInput && (
{nextStatuses.map((s) => ( ))}
)} {showDelayInput && (
已超过预计开始时间，请说明延后原因
setDelayReason(e.target.value)} placeholder="延后原因（必填）" className="h-8 w-full rounded-md border border-orange-200 bg-white px-2 text-[12px] focus:border-orange-400 focus:outline-none" autoFocus />
)}
{task.isBlocked ? (
{task.blockReason}
) : ( showBlockInput ? (
setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleBlock(); }} placeholder="阻塞原因" className="flex-1 h-8 rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-red-400 focus:outline-none" autoFocus />
) : ( ) )}
{task.status !== 'todo' && task.status !== 'submitted' && (
今日进展