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

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

@@ -9,9 +9,11 @@ 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 +25,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 +60,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 +100,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 +177,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 +188,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 +267,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>