feat(版本详情): 完善流程日志与需求覆盖

apps/web/components/dev-task/CategoryChip.tsx

@@ -1,13 +1,25 @@
 'use client';
 
+import type { CSSProperties } from 'react';
 import type { TaskCategory } from '@/lib/task-category';
 
-export function CategoryChip({ category }: { category?: TaskCategory }) {
-  if (!category) return <span className="text-[11px] text-[var(--ink-muted)]">未分类</span>;
+export function CategoryChip({ category, widthEm }: { category?: TaskCategory; widthEm?: number }) {
+  const widthStyle: CSSProperties = widthEm ? { width: `${widthEm}em` } : {};
+  if (!category) {
+    return (
+      <span
+        className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium text-[var(--ink-muted)]"
+        style={widthStyle}
+      >
+        未分类
+      </span>
+    );
+  }
   return (
     <span
-      className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
+      className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium"
       style={{
+        ...widthStyle,
         backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
         color: category.color || 'var(--ink-soft)',
       }}

apps/web/components/dev-task/DevTaskDetailDrawer.tsx

@@ -4,21 +4,26 @@ 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 { ActivityLogPanel } from '@/components/ActivityLogPanel';
 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 { useAuthStore } from '@/stores/useAuthStore';
+import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
 import {
   ALLOWED_TRANSITIONS,
   DEV_TASK_STATUS_LABEL,
   DEV_TASK_STATUS_COLOR,
+  canStartDevTask,
   formatHours,
   getEstimateHours,
   getActualHours,
+  needsDevTaskClaim,
 } from '@/lib/dev-task';
 import { needsDelayReason } from '@/lib/dev-task-transitions';
-import { formatShortTime } from '@/lib/work-hours';
+import { calcWorkHours, formatShortTime, isoToLocal, localToISO } from '@/lib/work-hours';
 import type { DevTaskStatus } from '@/lib/dev-task';
 
 interface Props {
@@ -28,16 +33,32 @@ interface Props {
   contextLabel?: string;
 }
 
+function defaultPlanStartLocal(): string {
+  const d = new Date();
+  d.setHours(9, 0, 0, 0);
+  return isoToLocal(d.toISOString());
+}
+
+function defaultPlanEndLocal(): string {
+  const d = new Date();
+  d.setHours(18, 0, 0, 0);
+  return isoToLocal(d.toISOString());
+}
+
 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 user = useAuthStore((s) => s.user);
   const [showTransfer, setShowTransfer] = useState(false);
   const [transferTo, setTransferTo] = useState('');
   const [showDelayInput, setShowDelayInput] = useState(false);
   const [delayReason, setDelayReason] = useState('');
+  const [showPlanInput, setShowPlanInput] = useState(false);
+  const [planStartLocal, setPlanStartLocal] = useState('');
+  const [planEndLocal, setPlanEndLocal] = useState('');
   const [progressNote, setProgressNote] = useState('');
   const [progressBlocker, setProgressBlocker] = useState('');
   const [progressHelperId, setProgressHelperId] = useState('');
@@ -61,8 +82,42 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
   const actual = useMemo(() => getActualHours(task), [task]);
   const overrun = actual > estimate && estimate > 0;
   const requireDelay = task.status === 'todo' && needsDelayReason(task);
+  const currentUserName = user?.name || '';
+  const needsClaim = needsDevTaskClaim(task);
+  const startReady = canStartDevTask(task);
+  const visibleNextStatuses = nextStatuses.filter((status) => status !== 'in_progress' || startReady);
+  const planStartISO = localToISO(planStartLocal);
+  const planEndISO = localToISO(planEndLocal);
+  const planStartBeforeEnd = Boolean(planStartISO && planEndISO && planStartISO < planEndISO);
+  const planEstimateHours = planStartBeforeEnd ? calcWorkHours(planStartISO, planEndISO) : 0;
+
+  const openPlanInput = () => {
+    setPlanStartLocal(task.expectedStartAt ? isoToLocal(task.expectedStartAt) : defaultPlanStartLocal());
+    setPlanEndLocal(task.expectedEndAt ? isoToLocal(task.expectedEndAt) : defaultPlanEndLocal());
+    setShowPlanInput(true);
+  };
+
+  const handleSavePlan = () => {
+    const assigneeId = task.assigneeId || currentUserName;
+    if (!assigneeId) {
+      alert('领取前需要先登录或选择负责人');
+      return;
+    }
+    if (!planStartBeforeEnd || planEstimateHours <= 0 || !planStartISO || !planEndISO) return;
+    updateTask(task.id, {
+      assigneeId,
+      expectedStartAt: planStartISO,
+      expectedEndAt: planEndISO,
+      estimateHours: planEstimateHours,
+    });
+    setShowPlanInput(false);
+  };
 
   const handleTransition = (to: DevTaskStatus) => {
+    if (to === 'in_progress' && !startReady) {
+      openPlanInput();
+      return;
+    }
     if (to === 'in_progress' && requireDelay && !showDelayInput) {
       setShowDelayInput(true);
       return;
@@ -179,10 +234,10 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
               )}
             </div>
 
-            {nextStatuses.length > 0 && !showDelayInput && (
+            {visibleNextStatuses.length > 0 && !showDelayInput && (
               <div className="flex items-center gap-2 pt-1 flex-wrap">
                 <ChevronRight className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
-                {nextStatuses.map((s) => (
+                {visibleNextStatuses.map((s) => (
                   <button key={s} onClick={() => handleTransition(s)} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] transition-colors">
                     {DEV_TASK_STATUS_LABEL[s]}
                   </button>
@@ -190,6 +245,61 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
               </div>
             )}
 
+            {task.status === 'todo' && !startReady && !showPlanInput && (
+              <div className="flex items-center gap-2 pt-1">
+                <button
+                  onClick={openPlanInput}
+                  disabled={needsClaim && !currentUserName}
+                  className="h-8 px-4 rounded-lg text-[12px] font-medium bg-orange-500 text-white hover:bg-orange-600 disabled:opacity-50"
+                >
+                  {needsClaim ? '领取并填写计划' : '填写计划'}
+                </button>
+                <span className="text-[11px] text-[var(--ink-muted)]">
+                  {needsClaim ? '领取时必须填写预计开始和预计截止' : '开始开发前需要补齐预计开始和预计截止'}
+                </span>
+              </div>
+            )}
+
+            {showPlanInput && (
+              <div className="rounded-lg border border-orange-200 bg-orange-50 p-3 space-y-3">
+                <div className="text-[11px] font-medium text-orange-700">
+                  {needsClaim ? '领取并填写计划' : '填写计划'}
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="mb-1 block text-[11px] text-orange-700">预计开始</label>
+                    <WorkDateTimePicker
+                      value={planStartLocal}
+                      onChange={setPlanStartLocal}
+                      placeholder="选择预计开始"
+                      defaultHour={9}
+                      className="bg-white"
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-[11px] text-orange-700">预计截止</label>
+                    <WorkDateTimePicker
+                      value={planEndLocal}
+                      onChange={setPlanEndLocal}
+                      placeholder="选择预计截止"
+                      defaultHour={18}
+                      popoverAlign="right"
+                      className="bg-white"
+                    />
+                  </div>
+                </div>
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-[11px] text-orange-700">
+                    执行预估：{planEstimateHours > 0 ? formatHours(planEstimateHours) : '请选择有效起止时间'}
+                  </span>
+                  <div className="flex gap-2">
+                    <button onClick={handleSavePlan} disabled={!planStartBeforeEnd || planEstimateHours <= 0} className="h-7 px-3 rounded text-[11px] font-medium bg-[var(--accent)] text-white disabled:opacity-50">保存</button>
+                    <button onClick={() => setShowPlanInput(false)} className="h-7 px-2 text-[11px] text-orange-700">取消</button>
+                  </div>
+                </div>
+              </div>
+            )}
+
             {showDelayInput && (
               <div className="rounded-lg border border-orange-200 bg-orange-50 p-3 space-y-2">
                 <div className="flex items-center gap-1.5 text-[11px] text-orange-700">
@@ -332,7 +442,7 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
               <div className="flex items-center gap-2">
                 <User className="h-3 w-3 text-[var(--ink-muted)]" />
                 <span className="text-[var(--ink-muted)]">负责人</span>
-                <span className="text-[var(--ink)] font-medium">{task.assigneeId}</span>
+                <span className={`font-medium ${needsClaim ? 'text-orange-600' : 'text-[var(--ink)]'}`}>{needsClaim ? '待领取' : task.assigneeId}</span>
               </div>
               <div className="flex items-center gap-2">
                 <span className="text-[var(--ink-muted)]">优先级</span>
@@ -351,6 +461,8 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
             )}
           </div>
 
+          <ActivityLogPanel sourceType="dev_task" sourceId={task.id} />
+
           {predecessors.length > 0 && (
             <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
               <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-2">前置任务</div>

apps/web/components/dev-task/DevTaskRow.tsx

@@ -3,7 +3,7 @@
 import { AlertTriangle } from 'lucide-react';
 import { StatusBadge } from './StatusBadge';
 import { CategoryChip } from './CategoryChip';
-import { getEstimateHours, getActualHours } from '@/lib/dev-task';
+import { getEstimateHours, getActualHours, needsDevTaskClaim } from '@/lib/dev-task';
 import { formatShortTime, formatWorkHours } from '@/lib/work-hours';
 import type { DevTask } from '@/lib/dev-task';
 import type { TaskCategory } from '@/lib/task-category';
@@ -11,6 +11,7 @@ import type { TaskCategory } from '@/lib/task-category';
 interface Props {
   task: DevTask;
   category?: TaskCategory;
+  categoryLabelWidthEm?: number;
   onClick?: () => void;
 }
 
@@ -45,37 +46,64 @@ function hoursText(task: DevTask, estimate: number, actual: number): { text: str
   return { text: `${formatWorkHours(actual)} / ${formatWorkHours(estimate)}`, tone };
 }
 
-export function DevTaskRow({ task, category, onClick }: Props) {
+export function DevTaskRow({ task, category, categoryLabelWidthEm, onClick }: Props) {
   const estimate = getEstimateHours(task);
   const actual = getActualHours(task);
   const range = timeRangeText(task);
   const hours = hoursText(task, estimate, actual);
+  const needsClaim = needsDevTaskClaim(task);
+  const labelWidthStyle = categoryLabelWidthEm ? { width: `${categoryLabelWidthEm}em` } : undefined;
 
   return (
     <div
       onClick={onClick}
-      className={`flex items-center gap-3 px-4 py-2.5 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0 ${task.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}
+      className={`px-4 py-2 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0 ${task.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}
     >
-      <span className={`h-2 w-2 rounded-full shrink-0 ${PRIORITY_DOT[task.priority] || 'bg-zinc-300'}`} title={task.priority} />
-      <span className="text-[11px] font-mono text-[var(--ink-muted)] w-16 shrink-0">{task.taskNo}</span>
-      <div className="flex-1 min-w-0 flex items-center gap-1.5">
-        <span className="text-[13px] text-[var(--ink)] truncate">{task.title}</span>
-        {task.aiDraft && (
-          <span className="flex items-center gap-0.5 text-[10px] text-purple-600 bg-purple-100 px-1.5 py-0.5 rounded shrink-0" title="AI 拆解草案，编辑后会移除标记">
-            AI 草案
-          </span>
-        )}
-        {task.isBlocked && (
-          <span className="flex items-center gap-0.5 text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0" title={task.blockReason}>
-            <AlertTriangle className="h-2.5 w-2.5" />阻塞
-          </span>
-        )}
+      <div className="flex min-w-0 items-start gap-2">
+        <span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${PRIORITY_DOT[task.priority] || 'bg-zinc-300'}`} title={task.priority} />
+        <span className="mt-0.5 w-16 shrink-0 text-[11px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span className="truncate text-[13px] font-medium leading-5 text-[var(--ink)]">{task.title}</span>
+            <span className="ml-auto inline-flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
+              {range.text && (
+                <span className={`tabular-nums whitespace-nowrap ${range.tone}`} title={range.text}>{range.text}</span>
+              )}
+              <span className={`tabular-nums whitespace-nowrap ${hours.tone}`}>{hours.text}</span>
+            </span>
+          </div>
+          <div className="mt-1 flex min-w-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
+            {task.isBlocked && (
+              <span className="inline-flex h-5 shrink-0 items-center gap-0.5 whitespace-nowrap rounded bg-red-50 px-1.5 text-[10px] font-medium text-red-500" title={task.blockReason}>
+                <AlertTriangle className="h-2.5 w-2.5" />阻塞
+              </span>
+            )}
+            {task.aiDraft && (
+              <span
+                className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded bg-purple-100 px-1.5 text-[10px] font-medium text-purple-600"
+                style={labelWidthStyle}
+                title="AI 拆解草案，编辑后会移除标记"
+              >
+                AI 草案
+              </span>
+            )}
+            {!needsClaim && (
+              <span className="max-w-[140px] truncate whitespace-nowrap text-[var(--ink-soft)]">负责人：{task.assigneeId}</span>
+            )}
+            {needsClaim ? (
+              <span
+                className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded bg-orange-50 px-1.5 text-[10px] font-medium text-orange-600"
+                style={labelWidthStyle}
+              >
+                待领取
+              </span>
+            ) : (
+              <StatusBadge status={task.status} widthEm={categoryLabelWidthEm} />
+            )}
+            <CategoryChip category={category} widthEm={categoryLabelWidthEm} />
+          </div>
+        </div>
       </div>
-      <CategoryChip category={category} />
-      <StatusBadge status={task.status} />
-      <span className={`text-[11px] tabular-nums shrink-0 ${range.tone}`} title={range.text}>{range.text}</span>
-      <span className={`text-[11px] tabular-nums w-40 text-right shrink-0 whitespace-nowrap ${hours.tone}`}>{hours.text}</span>
-      <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate shrink-0">{task.assigneeId}</span>
     </div>
   );
 }

apps/web/components/dev-task/DevTaskTab.tsx

@@ -111,6 +111,10 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
   }, [paged]);
 
   const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
+  const categoryLabelWidthEm = useMemo(
+    () => Math.max(4, ...categories.map((category) => category.name.length)) + 1,
+    [categories],
+  );
   const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
   const allTaskIds = useMemo(() => versionTasks.map((t) => t.id), [versionTasks]);
 
@@ -179,11 +183,16 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
           const reqProgress = calcGroupProgress(reqTasks);
           return (
             <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
-              <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
-                <input type="checkbox" checked={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) ids.forEach((id) => next.delete(id)); else ids.forEach((id) => next.add(id)); setSelectedIds(next); }} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
-                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
-                <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
-                <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
+              <div className="flex items-center bg-[var(--bg-subtle)] border-b border-[var(--line)]">
+                <div className="pl-4 flex items-center">
+                  <input type="checkbox" checked={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) ids.forEach((id) => next.delete(id)); else ids.forEach((id) => next.add(id)); setSelectedIds(next); }} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
+                </div>
+                <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-2">
+                  <span className="h-2 w-2 shrink-0" />
+                  <span className="w-16 shrink-0 truncate text-[11px] font-mono text-[var(--ink-muted)]" title={req?.code}>{req?.code}</span>
+                  <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-[var(--ink)]">{req?.title}</span>
+                  <span className="shrink-0 text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
+                </div>
               </div>
               {reqTasks.map((t) => (
                 <div key={t.id} className="flex items-center">
@@ -191,7 +200,7 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
                     <input type="checkbox" checked={selectedIds.has(t.id)} onChange={() => toggleSelect(t.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <DevTaskRow task={t} category={categoryMap.get(t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
+                    <DevTaskRow task={t} category={categoryMap.get(t.categoryId)} categoryLabelWidthEm={categoryLabelWidthEm} onClick={() => setSelectedTaskId(t.id)} />
                   </div>
                 </div>
               ))}

apps/web/components/dev-task/StatusBadge.tsx

@@ -3,9 +3,12 @@
 import { DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR } from '@/lib/dev-task';
 import type { DevTaskStatus } from '@/lib/dev-task';
 
-export function StatusBadge({ status }: { status: DevTaskStatus }) {
+export function StatusBadge({ status, widthEm }: { status: DevTaskStatus; widthEm?: number }) {
   return (
-    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}>
+    <span
+      className={`inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}
+      style={widthEm ? { width: `${widthEm}em` } : undefined}
+    >
       {DEV_TASK_STATUS_LABEL[status]}
     </span>
   );