feat(版本详情): 完善任务流程与风险预警

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>
   );
 }