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

apps/web/components/test-case/TestCaseRow.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from 'react';
 import { TestCaseStatusBadge } from './TestCaseStatusBadge';
-import { getTestCaseActualHours, getTestCaseEstimateHours } from '@/lib/test-case';
+import { getTestCaseActualHours, getTestCaseEstimateHours, needsTestCaseClaim } from '@/lib/test-case';
 import { formatWorkHours } from '@/lib/work-hours';
 import { formatDateTimeShort } from '@/lib/format';
 import type { TestCase } from '@/lib/test-case';
@@ -11,6 +11,7 @@ import type { TaskCategory } from '@/lib/task-category';
 interface Props {
   testCase: TestCase;
   category?: TaskCategory;
+  categoryLabelWidthEm?: number;
   bugCount: number;
   onClick?: () => void;
 }
@@ -22,45 +23,74 @@ const PRIORITY_DOT: Record<string, string> = {
   P3: 'bg-zinc-300',
 };
 
-function TestCaseRowImpl({ testCase, category, bugCount, onClick }: Props) {
+function TestCaseRowImpl({ testCase, category, categoryLabelWidthEm, bugCount, onClick }: Props) {
   const estimateHours = getTestCaseEstimateHours(testCase);
   const actualHours = getTestCaseActualHours(testCase);
+  const needsClaim = needsTestCaseClaim(testCase);
+  const labelWidthStyle = categoryLabelWidthEm ? { width: `${categoryLabelWidthEm}em` } : undefined;
   const hasExecutorEstimate = typeof testCase.estimateHours === 'number' && testCase.estimateHours > 0;
   const hasAiEstimate = typeof testCase.aiEstimateHours === 'number' && testCase.aiEstimateHours > 0;
   const estimatePrefix = hasExecutorEstimate ? '执行预' : hasAiEstimate ? 'AI预' : '预';
+  const planText = testCase.plannedTestAt && testCase.plannedEndAt
+    ? `${formatDateTimeShort(testCase.plannedTestAt)} → ${formatDateTimeShort(testCase.plannedEndAt)}`
+    : testCase.plannedTestAt ? formatDateTimeShort(testCase.plannedTestAt) : '';
   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 ${testCase.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}>
-      <span className={`h-2 w-2 rounded-full shrink-0 ${PRIORITY_DOT[testCase.priority] || 'bg-zinc-300'}`} />
-      <span className="text-[11px] font-mono text-[var(--ink-muted)] w-14 shrink-0">{testCase.caseNo}</span>
-      <span
-        className="inline-flex h-5 w-24 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap"
-        style={{
-          backgroundColor: category?.color ? `${category.color}15` : 'var(--bg-subtle)',
-          color: category?.color || 'var(--ink-soft)',
-        }}
-        title={category?.name || '未分类'}
-      >
-        {category?.name || '未分类'}
-      </span>
-      <div className="flex-1 min-w-0 flex items-center gap-1.5">
-        <span className="text-[13px] text-[var(--ink)] truncate">{testCase.title}</span>
-        {testCase.aiDraft && (
-          <span className="text-[10px] text-purple-600 bg-purple-100 px-1.5 py-0.5 rounded shrink-0" title="AI 拆解草案，编辑后会移除标记">
-            AI 草案
-          </span>
-        )}
+    <div onClick={onClick} className={`px-4 py-2 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0 ${testCase.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}>
+      <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[testCase.priority] || 'bg-zinc-300'}`} />
+        <span className="mt-0.5 w-14 shrink-0 text-[11px] font-mono text-[var(--ink-muted)]">{testCase.caseNo}</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)]">{testCase.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]">
+              {planText && (
+                <span className="tabular-nums whitespace-nowrap text-[var(--ink-muted)]" title="计划测试时间">{planText}</span>
+              )}
+              <span className="tabular-nums whitespace-nowrap text-[var(--ink-muted)]">
+                {actualHours > 0 ? `${formatWorkHours(actualHours)} / ${formatWorkHours(estimateHours)}` : `${estimatePrefix} ${formatWorkHours(estimateHours)}`}
+              </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]">
+            {bugCount > 0 && (
+              <span className="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded bg-red-50 px-1.5 text-[10px] font-medium text-red-500">{bugCount} Bug</span>
+            )}
+            {testCase.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)]">负责人：{testCase.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>
+            ) : (
+              <TestCaseStatusBadge status={testCase.status} widthEm={categoryLabelWidthEm} />
+            )}
+            <span
+              className="inline-flex h-5 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap"
+              style={{
+                ...(categoryLabelWidthEm ? { width: `${categoryLabelWidthEm}em` } : {}),
+                backgroundColor: category?.color ? `${category.color}15` : 'var(--bg-subtle)',
+                color: category?.color || 'var(--ink-soft)',
+              }}
+              title={category?.name || '未分类'}
+            >
+              {category?.name || '未分类'}
+            </span>
+          </div>
+        </div>
       </div>
-      {bugCount > 0 && (
-        <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{bugCount} Bug</span>
-      )}
-      <TestCaseStatusBadge status={testCase.status} />
-      <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-24 text-right shrink-0 whitespace-nowrap" title="计划测试时间">
-        {testCase.plannedTestAt ? formatDateTimeShort(testCase.plannedTestAt) : '待排期'}
-      </span>
-      <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-32 text-right shrink-0 whitespace-nowrap">
-        {actualHours > 0 ? `${formatWorkHours(actualHours)} / ${formatWorkHours(estimateHours)}` : `${estimatePrefix} ${formatWorkHours(estimateHours)}`}
-      </span>
-      <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate shrink-0">{testCase.assigneeId || '-'}</span>
     </div>
   );
 }