feat: 开发任务时间字段重构 + 双口径耗时 + 搜索 + 性能优化

核心变更:
- DevTask 字段重构：startDate/dueDate/estimateHours/actualHours 替换为 expectedStartAt/expectedEndAt/actualStartAt/actualEndAt（含时分），预计/实际工时按工作时段（9:00-12:00 + 13:00-18:00）派生计算
- 状态机自动化：到点自动切开发中、未到可手动开干、超期需填延后原因
- 新建 lib/work-hours.ts：calcWorkHours（工作时段过滤）、formatWorkHours（X h（Y 天））、calcTwoMetrics（日历/人力双口径）
- 新建 lib/dev-task-transitions.ts：状态切换守卫
- 三个 Tab 顶部统计：开发任务（预/日历/人力）、测试用例 / Bug（日历 / 人力）；版本概览总人天投入改双行（日历总耗时 / 人力总投入）
- 三个 Tab 加搜索框：300ms debounce + 标题/编号模糊匹配
- 性能优化：requirementIds/categories/requirements/testCases 转 Map/Set 索引、Row 组件 React.memo
- 全局耗时显示统一带天数换算：8h（1天）、11h（1.4天）

新增文件: SearchInput.tsx, useDebouncedValue.ts, work-hours.ts, dev-task-transitions.ts, 设计文档

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

@@ -1,15 +1,23 @@
 'use client';
 
-import { useState } from 'react';
-import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Calendar, Play, Trash2, Pencil, ArrowRightLeft } from 'lucide-react';
+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 { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
 import { useMemberStore } from '@/stores/useMemberStore';
-import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR, formatHours, calcActualHoursByDates } from '@/lib/dev-task';
-import { formatDateTime } from '@/lib/format';
+import {
+  ALLOWED_TRANSITIONS,
+  DEV_TASK_STATUS_LABEL,
+  DEV_TASK_STATUS_COLOR,
+  formatHours,
+  getEstimateHours,
+  getActualHours,
+} from '@/lib/dev-task';
+import { needsDelayReason } from '@/lib/dev-task-transitions';
+import { formatShortTime } from '@/lib/work-hours';
 import type { DevTaskStatus } from '@/lib/dev-task';
 
 interface Props {
@@ -26,6 +34,8 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
   const { members } = useMemberStore();
   const [showTransfer, setShowTransfer] = useState(false);
   const [transferTo, setTransferTo] = useState('');
+  const [showDelayInput, setShowDelayInput] = useState(false);
+  const [delayReason, setDelayReason] = useState('');
 
   const task = tasks.find((t) => t.id === taskId);
   if (!task) return null;
@@ -39,9 +49,28 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
   const [blockReason, setBlockReason] = useState(task.blockReason || '');
   const [showBlockInput, setShowBlockInput] = useState(false);
 
+  const estimate = useMemo(() => getEstimateHours(task), [task]);
+  const actual = useMemo(() => getActualHours(task), [task]);
+  const overrun = actual > estimate && estimate > 0;
+  const requireDelay = task.status === 'todo' && needsDelayReason(task);
+
   const handleTransition = (to: DevTaskStatus) => {
-    const result = changeStatus(task.id, to);
-    if (!result.ok) alert(result.message);
+    if (to === 'in_progress' && requireDelay && !showDelayInput) {
+      setShowDelayInput(true);
+      return;
+    }
+    const opts = to === 'in_progress' && delayReason.trim()
+      ? { delayReason: delayReason.trim() }
+      : undefined;
+    const result = changeStatus(task.id, to, opts);
+    if (!result.ok) {
+      alert(result.message);
+      return;
+    }
+    if (to === 'in_progress') {
+      setShowDelayInput(false);
+      setDelayReason('');
+    }
   };
 
   const handleBlock = () => {
@@ -58,13 +87,11 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
   return (
     <div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
       <div className="w-full max-w-md h-full bg-[var(--bg)] border-l border-[var(--line)] shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
-        {/* 上下文 */}
         {contextLabel && (
           <div className="px-5 py-2 border-b border-[var(--line)] bg-[var(--bg-subtle)] shrink-0">
             <span className="text-[11px] text-[var(--ink-muted)]">{contextLabel}</span>
           </div>
         )}
-        {/* 顶栏 */}
         <div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] bg-[var(--bg-card)] shrink-0">
           <div className="flex items-center gap-2">
             <span className="text-[12px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
@@ -79,7 +106,6 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
           </div>
         </div>
 
-        {/* 转交 */}
         {showTransfer && (
           <div className="mx-5 mt-3 rounded-lg border border-[var(--line)] p-3 flex items-center gap-2">
             <span className="text-[11px] text-[var(--ink-muted)] shrink-0">转交给：</span>
@@ -92,10 +118,8 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
           </div>
         )}
 
-        {/* 滚动区域 */}
         <div className="flex-1 overflow-y-auto p-4 space-y-3">
 
-          {/* 卡片1：关联需求 */}
           {requirement && (
             <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-3">
               <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-1.5">关联需求</div>
@@ -107,7 +131,6 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
             </div>
           )}
 
-          {/* 卡片2：状态 & 操作 */}
           <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4 space-y-3">
             <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide">状态 & 操作</div>
             <div className="flex items-center gap-3">
@@ -119,11 +142,15 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
                   <AlertTriangle className="h-3 w-3" />阻塞中
                 </span>
               )}
+              {requireDelay && (
+                <span className="inline-flex items-center gap-1 text-[11px] text-orange-600 bg-orange-50 border border-orange-200 px-2 py-1 rounded-lg" title="已超过预计开始时间，开干需填延后原因">
+                  <AlertTriangle className="h-3 w-3" />超期未开始
+                </span>
+              )}
             </div>
 
-            {/* 流转按钮 */}
-            {nextStatuses.length > 0 && (
-              <div className="flex items-center gap-2 pt-1">
+            {nextStatuses.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) => (
                   <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">
@@ -133,7 +160,20 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
               </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">
+                  <AlertTriangle className="h-3.5 w-3.5" />
+                  已超过预计开始时间，请说明延后原因
+                </div>
+                <input value={delayReason} onChange={(e) => setDelayReason(e.target.value)} placeholder="延后原因（必填）" className="h-8 w-full rounded-md border border-orange-200 bg-white px-2 text-[12px] focus:border-orange-400 focus:outline-none" autoFocus />
+                <div className="flex gap-2">
+                  <button onClick={() => handleTransition('in_progress')} disabled={!delayReason.trim()} className="h-7 px-3 rounded text-[11px] font-medium bg-[var(--accent)] text-white disabled:opacity-50">开始开发</button>
+                  <button onClick={() => { setShowDelayInput(false); setDelayReason(''); }} className="h-7 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
+                </div>
+              </div>
+            )}
+
             <div className="pt-2 border-t border-[var(--line)]">
               {task.isBlocked ? (
                 <div className="space-y-2">
@@ -157,7 +197,52 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
             </div>
           </div>
 
-          {/* 卡片3：基本信息 */}
+          <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 flex items-center gap-1.5"><CalendarRange className="h-3 w-3" />时间信息</div>
+            <div className="grid grid-cols-2 gap-y-2.5 gap-x-4 text-[12px]">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] text-[var(--ink-muted)]">预计开始</span>
+                <span className="text-[var(--ink)] font-medium tabular-nums">{task.expectedStartAt ? formatShortTime(task.expectedStartAt) : '-'}</span>
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] text-[var(--ink-muted)]">预计截止</span>
+                <span className="text-[var(--ink)] font-medium tabular-nums">{task.expectedEndAt ? formatShortTime(task.expectedEndAt) : '-'}</span>
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] text-[var(--ink-muted)]">实际开始</span>
+                <span className="text-[var(--ink)] font-medium tabular-nums">{task.actualStartAt ? formatShortTime(task.actualStartAt) : '—'}</span>
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] text-[var(--ink-muted)]">实际结束</span>
+                <span className="text-[var(--ink)] font-medium tabular-nums">{task.actualEndAt ? formatShortTime(task.actualEndAt) : '—'}</span>
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] text-[var(--ink-muted)]">预计耗时</span>
+                <span className="text-[var(--ink)] font-medium tabular-nums">{formatHours(estimate)}</span>
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] text-[var(--ink-muted)]">实际耗时</span>
+                <span className={`font-medium tabular-nums ${actual > 0 ? (overrun ? 'text-red-600' : (actual < estimate ? 'text-emerald-600' : 'text-[var(--ink)]')) : 'text-[var(--ink-muted)]'}`}>
+                  {actual > 0 ? formatHours(actual) : '—'}
+                  {task.actualStartAt && !task.actualEndAt && <span className="text-[10px] ml-1 text-[var(--ink-muted)]">进行中</span>}
+                </span>
+              </div>
+            </div>
+            {task.delayReason && (
+              <div className="mt-3 pt-3 border-t border-[var(--line)] text-[11px] text-orange-700 bg-orange-50 rounded-lg px-3 py-2">
+                <div className="flex items-start gap-1.5">
+                  <AlertTriangle className="h-3 w-3 shrink-0 mt-0.5" />
+                  <div><span className="font-medium">延后原因：</span>{task.delayReason}</div>
+                </div>
+              </div>
+            )}
+            {task.overdueVersionReason && (
+              <div className="mt-2 text-[11px] text-orange-700 bg-orange-50 rounded-lg px-3 py-2">
+                <span className="font-medium">超出版本截止原因：</span>{task.overdueVersionReason}
+              </div>
+            )}
+          </div>
+
           <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]">
@@ -177,35 +262,9 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
               </div>
               <div className="flex items-center gap-2">
                 <Clock className="h-3 w-3 text-[var(--ink-muted)]" />
-                <span className="text-[var(--ink-muted)]">预计</span>
-                <span className="text-[var(--ink)] font-medium">{formatHours(task.estimateHours)}</span>
+                <span className="text-[var(--ink-muted)]">创建</span>
+                <span className="text-[var(--ink)]">{formatShortTime(task.createdAt)}</span>
               </div>
-              <div className="flex items-center gap-2">
-                <Clock className="h-3 w-3 text-[var(--ink-muted)]" />
-                <span className="text-[var(--ink-muted)]">实际</span>
-                <span className="text-[var(--ink)] font-medium">{task.startDate ? formatHours(calcActualHoursByDates(task.startDate, task.completedAt)) : '-'}</span>
-              </div>
-              {task.startDate && (
-                <div className="flex items-center gap-2">
-                  <Play className="h-3 w-3 text-[var(--ink-muted)]" />
-                  <span className="text-[var(--ink-muted)]">开始开发</span>
-                  <span className="text-[var(--ink)]">{formatDateTime(task.startDate)}</span>
-                </div>
-              )}
-              {task.dueDate && (
-                <div className="flex items-center gap-2">
-                  <Calendar className="h-3 w-3 text-[var(--ink-muted)]" />
-                  <span className="text-[var(--ink-muted)]">截止</span>
-                  <span className="text-[var(--ink)]">{task.dueDate}</span>
-                </div>
-              )}
-              {task.completedAt && (
-                <div className="flex items-center gap-2">
-                  <Calendar className="h-3 w-3 text-[var(--ink-muted)]" />
-                  <span className="text-[var(--ink-muted)]">提测</span>
-                  <span className="text-emerald-600 font-medium">{formatDateTime(task.completedAt)}</span>
-                </div>
-              )}
             </div>
             {task.description && (
               <div className="mt-3 pt-3 border-t border-[var(--line)]">
@@ -214,7 +273,6 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
             )}
           </div>
 
-          {/* 卡片4：前置任务 */}
           {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>