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

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

@@ -26,6 +26,12 @@ function defaultPlannedTestLocal(): string {
   return isoToLocal(d.toISOString());
 }
 
+function defaultPlannedEndLocal(): string {
+  const d = new Date();
+  d.setHours(10, 0, 0, 0);
+  return isoToLocal(d.toISOString());
+}
+
 export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClose }: Props) {
   const { createTestCase } = useTestCaseStore();
   const { requirements } = useRequirementStore();
@@ -49,6 +55,7 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
   );
   const [estimateHours, setEstimateHours] = useState(0.5);
   const [plannedTestLocal, setPlannedTestLocal] = useState(defaultPlannedTestLocal);
+  const [plannedEndLocal, setPlannedEndLocal] = useState(defaultPlannedEndLocal);
   const [assigneeId, setAssigneeId] = useState(user?.name || '');
   const [description, setDescription] = useState('');
   const [prototypeNotes, setPrototypeNotes] = useState('');
@@ -69,7 +76,9 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
 
   const normalizedEstimateHours = clampTestCaseEstimateHours(selectedCategory?.code, estimateHours);
   const plannedTestAt = localToISO(plannedTestLocal);
-  const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0 && Boolean(plannedTestAt);
+  const plannedEndAt = localToISO(plannedEndLocal);
+  const hasValidPlan = Boolean(plannedTestAt && plannedEndAt && plannedEndAt > plannedTestAt);
+  const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0 && hasValidPlan;
 
   const handleSubmit = () => {
     if (!canSubmit) return;
@@ -92,6 +101,7 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
       priority,
       estimateHours: normalizedEstimateHours,
       plannedTestAt,
+      plannedEndAt,
       assigneeId: assigneeId || undefined,
       references: references.length > 0 ? references : undefined,
       createdBy: user?.name || '系统',
@@ -154,15 +164,32 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
               </select>
             </div>
           </div>
-          <div>
-            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划测试时间 *</label>
-            <WorkDateTimePicker
-              value={plannedTestLocal}
-              onChange={setPlannedTestLocal}
-              placeholder="选择计划测试时间"
-              defaultHour={9}
-            />
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划开始 *</label>
+              <WorkDateTimePicker
+                value={plannedTestLocal}
+                onChange={setPlannedTestLocal}
+                placeholder="选择计划开始时间"
+                defaultHour={9}
+              />
+            </div>
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划结束 *</label>
+              <WorkDateTimePicker
+                value={plannedEndLocal}
+                onChange={setPlannedEndLocal}
+                placeholder="选择计划结束时间"
+                defaultHour={10}
+                popoverAlign="right"
+              />
+            </div>
           </div>
+          {!hasValidPlan && plannedTestLocal && plannedEndLocal && (
+            <div className="rounded-lg border border-amber-200 bg-amber-50 p-2 text-[11px] text-amber-700">
+              计划开始必须早于计划结束
+            </div>
+          )}
           <div>
             <label className="block text-[12px] text-[var(--ink-soft)] mb-1">测试步骤 & 预期结果</label>
             <textarea rows={4} value={description} onChange={(e) => setDescription(e.target.value)} className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" placeholder="1. 操作步骤...&#10;2. 预期结果..." />

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

@@ -4,14 +4,17 @@ import { useState } from 'react';
 import { X, AlertTriangle, Link2, ChevronRight, Bug as BugIcon, Trash2, ArrowRightLeft } from 'lucide-react';
 import { TestCaseStatusBadge } from './TestCaseStatusBadge';
 import { BugStatusBadge } from '@/components/bug/BugStatusBadge';
+import { ActivityLogPanel } from '@/components/ActivityLogPanel';
 import { useTestCaseStore } from '@/stores/useTestCaseStore';
 import { useBugStore } from '@/stores/useBugStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
 import { useMemberStore } from '@/stores/useMemberStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
 import { CategoryChip } from '@/components/dev-task/CategoryChip';
-import { TC_ALLOWED_TRANSITIONS, TEST_CASE_STATUS_LABEL, getTestCaseActualHours } from '@/lib/test-case';
-import { formatWorkHours } from '@/lib/work-hours';
+import { TC_ALLOWED_TRANSITIONS, TEST_CASE_STATUS_LABEL, canStartTestCase, getTestCaseActualHours, needsTestCaseClaim } from '@/lib/test-case';
+import { calcWorkHours, formatWorkHours, isoToLocal, localToISO } from '@/lib/work-hours';
 import { formatDateTime } from '@/lib/format';
 import { BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
 import type { TestCaseStatus } from '@/lib/test-case';
@@ -23,14 +26,30 @@ 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(10, 0, 0, 0);
+  return isoToLocal(d.toISOString());
+}
+
 export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, contextLabel }: Props) {
   const { testCases, changeStatus, deleteTestCase, updateTestCase } = useTestCaseStore();
   const { bugs } = useBugStore();
   const { requirements } = useRequirementStore();
   const { members } = useMemberStore();
   const { categories } = useTaskCategoryStore();
+  const user = useAuthStore((s) => s.user);
   const [showTransfer, setShowTransfer] = useState(false);
   const [transferTo, setTransferTo] = useState('');
+  const [showPlanInput, setShowPlanInput] = useState(false);
+  const [planStartLocal, setPlanStartLocal] = useState('');
+  const [planEndLocal, setPlanEndLocal] = useState('');
 
   const tc = testCases.find((c) => c.id === testCaseId);
   if (!tc) return null;
@@ -42,6 +61,39 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
   const executorEstimateHours = typeof tc.estimateHours === 'number' && tc.estimateHours > 0 ? tc.estimateHours : undefined;
   const aiEstimateHours = typeof tc.aiEstimateHours === 'number' && tc.aiEstimateHours > 0 ? tc.aiEstimateHours : undefined;
   const actualHours = getTestCaseActualHours(tc);
+  const planDisplay = tc.plannedTestAt && tc.plannedEndAt
+    ? `${formatDateTime(tc.plannedTestAt)} → ${formatDateTime(tc.plannedEndAt)}`
+    : tc.plannedTestAt ? formatDateTime(tc.plannedTestAt) : '-';
+  const currentUserName = user?.name || '';
+  const needsClaim = needsTestCaseClaim(tc);
+  const startReady = canStartTestCase(tc);
+  const visibleNextStatuses = nextStatuses.filter((status) => status !== 'running' || startReady);
+  const planStartISO = localToISO(planStartLocal);
+  const planEndISO = localToISO(planEndLocal);
+  const planStartBeforeEnd = Boolean(planStartISO && planEndISO && planEndISO > planStartISO);
+  const planEstimateHours = planStartBeforeEnd ? calcWorkHours(planStartISO, planEndISO) : 0;
+
+  const openPlanInput = () => {
+    setPlanStartLocal(tc.plannedTestAt ? isoToLocal(tc.plannedTestAt) : defaultPlanStartLocal());
+    setPlanEndLocal(tc.plannedEndAt ? isoToLocal(tc.plannedEndAt) : defaultPlanEndLocal());
+    setShowPlanInput(true);
+  };
+
+  const handleSavePlan = () => {
+    const assigneeId = tc.assigneeId || currentUserName;
+    if (!assigneeId) {
+      alert('领取前需要先登录或选择负责人');
+      return;
+    }
+    if (!planStartBeforeEnd || planEstimateHours <= 0 || !planStartISO || !planEndISO) return;
+    updateTestCase(tc.id, {
+      assigneeId,
+      plannedTestAt: planStartISO,
+      plannedEndAt: planEndISO,
+      estimateHours: planEstimateHours,
+    });
+    setShowPlanInput(false);
+  };
 
   const [failReason, setFailReason] = useState('');
   const [blockReason, setBlockReason] = useState('');
@@ -49,6 +101,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
   const [showBlockInput, setShowBlockInput] = useState(false);
 
   const handleTransition = (to: TestCaseStatus) => {
+    if (to === 'running' && !startReady) {
+      openPlanInput();
+      return;
+    }
     if (to === 'failed') { setShowFailInput(true); return; }
     if (to === 'blocked') { setShowBlockInput(true); return; }
     changeStatus(tc.id, to);
@@ -122,10 +178,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
               {tc.executedAt && <span className="text-[11px] text-[var(--ink-muted)]">执行于 {tc.executedAt}</span>}
             </div>
 
-            {nextStatuses.length > 0 && !showFailInput && !showBlockInput && (
+            {visibleNextStatuses.length > 0 && !showFailInput && !showBlockInput && (
               <div className="flex items-center gap-2 pt-1">
                 <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 transition-colors ${s === 'passed' ? 'bg-emerald-500 text-white hover:bg-emerald-600' : s === 'failed' ? 'bg-red-500 text-white hover:bg-red-600' : 'bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]'}`}>
                     {TEST_CASE_STATUS_LABEL[s]}
                   </button>
@@ -133,6 +189,61 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
               </div>
             )}
 
+            {tc.status === 'pending' && !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={10}
+                      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 ? formatWorkHours(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>
+            )}
+
             {showFailInput && (
               <div className="flex gap-2 pt-1">
                 <input value={failReason} onChange={(e) => setFailReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') confirmFail(); }} placeholder="不通过原因（可选）" className="flex-1 h-8 rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-red-400 focus:outline-none" autoFocus />
@@ -157,10 +268,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
           <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-3">基本信息</div>
             <div className="grid grid-cols-2 gap-y-3 gap-x-4 text-[12px]">
-              <div><span className="text-[var(--ink-muted)]">计划测试：</span><span className="text-[var(--ink)] font-medium">{tc.plannedTestAt ? formatDateTime(tc.plannedTestAt) : '待排期'}</span></div>
+              <div><span className="text-[var(--ink-muted)]">计划测试：</span><span className="text-[var(--ink)] font-medium">{planDisplay}</span></div>
               <div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)] font-medium">{tc.priority}</span></div>
               <div className="flex items-center gap-1.5"><span className="text-[var(--ink-muted)]">任务类型：</span><CategoryChip category={category} /></div>
-              <div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)] font-medium">{tc.assigneeId || '-'}</span></div>
+              <div><span className="text-[var(--ink-muted)]">负责人：</span><span className={`font-medium ${needsClaim ? 'text-orange-600' : 'text-[var(--ink)]'}`}>{needsClaim ? '待领取' : tc.assigneeId}</span></div>
               <div><span className="text-[var(--ink-muted)]">AI 预估：</span><span className="text-[var(--ink)] font-medium">{aiEstimateHours ? formatWorkHours(aiEstimateHours) : '—'}</span></div>
               <div><span className="text-[var(--ink-muted)]">执行预估：</span><span className="text-[var(--ink)] font-medium">{executorEstimateHours ? formatWorkHours(executorEstimateHours) : '待负责人填写'}</span></div>
               <div><span className="text-[var(--ink-muted)]">创建人：</span><span className="text-[var(--ink)]">{tc.createdBy}</span></div>
@@ -204,6 +315,8 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
               </div>
             )}
           </div>
+
+          <ActivityLogPanel sourceType="test_case" sourceId={tc.id} />
         </div>
       </div>
     </div>

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

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

@@ -3,9 +3,12 @@
 import { TEST_CASE_STATUS_LABEL, TEST_CASE_STATUS_COLOR } from '@/lib/test-case';
 import type { TestCaseStatus } from '@/lib/test-case';
 
-export function TestCaseStatusBadge({ status }: { status: TestCaseStatus }) {
+export function TestCaseStatusBadge({ status, widthEm }: { status: TestCaseStatus; widthEm?: number }) {
   return (
-    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${TEST_CASE_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 ${TEST_CASE_STATUS_COLOR[status]}`}
+      style={widthEm ? { width: `${widthEm}em` } : undefined}
+    >
       {TEST_CASE_STATUS_LABEL[status]}
     </span>
   );

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

@@ -152,6 +152,10 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
 
   const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
   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 bugCountByCase = useMemo(() => {
     const map = new Map<string, number>();
     for (const b of versionBugs) map.set(b.testCaseId, (map.get(b.testCaseId) ?? 0) + 1);
@@ -230,21 +234,19 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
                 <div className="pl-4 flex items-center">
                   <input type="checkbox" checked={cases.every((c) => selectedIds.has(c.id))} onChange={() => { const ids = cases.map((c) => c.id); const allSel = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSel) 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-3 px-4 py-2">
+                <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-14 min-w-0 shrink-0 truncate text-[11px] font-mono text-[var(--ink-muted)]" title={req?.code || '通用'}>{req?.code || '通用'}</span>
-                  {deliveryStatus ? (
-                    <span className={`inline-flex h-5 w-24 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap ${
+                  <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title || '未关联需求'}</span>
+                  {deliveryStatus && (
+                    <span className={`inline-flex h-5 w-14 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap ${
                       deliveryStatus === 'submitted'
                         ? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
                         : 'bg-orange-50 text-orange-600 border border-orange-100'
                     }`}>
                       {deliveryStatus === 'submitted' ? '已提测' : '待提测'}
                     </span>
-                  ) : (
-                    <span className="h-5 w-24 shrink-0" />
                   )}
-                  <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title || '未关联需求'}</span>
                   <span className="text-[11px] text-[var(--ink-muted)]">{reqPassed}/{cases.length} 通过</span>
                 </div>
               </div>
@@ -254,7 +256,7 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
                     <input type="checkbox" checked={selectedIds.has(c.id)} onChange={() => toggleSelect(c.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <TestCaseRow testCase={c} category={categoryMap.get(c.categoryId)} bugCount={bugCountByCase.get(c.id) ?? 0} onClick={() => setSelectedCaseId(c.id)} />
+                    <TestCaseRow testCase={c} category={categoryMap.get(c.categoryId)} categoryLabelWidthEm={categoryLabelWidthEm} bugCount={bugCountByCase.get(c.id) ?? 0} onClick={() => setSelectedCaseId(c.id)} />
                   </div>
                 </div>
               ))}