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/DevTaskTab.tsx

@@ -11,8 +11,11 @@ import { useAuthStore } from '@/stores/useAuthStore';
 import { DevTaskRow } from './DevTaskRow';
 import { DevTaskCreateModal } from './DevTaskCreateModal';
 import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
-import { calcGroupProgress, DEV_TASK_STATUS_LABEL } from '@/lib/dev-task';
+import { calcGroupProgress, DEV_TASK_STATUS_LABEL, aggregateDevTaskHours, devTaskIntervals } from '@/lib/dev-task';
+import { formatWorkHours, calcTwoMetrics } from '@/lib/work-hours';
 import { Pagination, usePagination } from '@/components/Pagination';
+import { SearchInput, matchTitleOrNo } from '@/components/SearchInput';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
 import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
 
 interface Props {
@@ -33,16 +36,18 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
   useEffect(() => { fetchCategories(); }, [fetchCategories]);
   useEffect(() => { fetchWorklogs(); }, [fetchWorklogs]);
 
+  const reqIdSet = useMemo(() => new Set(requirementIds), [requirementIds]);
   const versionTasks = useMemo(
-    () => tasks.filter((t) => requirementIds.includes(t.requirementId)),
-    [tasks, requirementIds],
+    () => tasks.filter((t) => reqIdSet.has(t.requirementId)),
+    [tasks, reqIdSet],
   );
 
-  // 筛选
   const [filterAssignee, setFilterAssignee] = useState('');
   const [filterStatus, setFilterStatus] = useState('');
   const [filterBlocked, setFilterBlocked] = useState('');
   const [filterCategory, setFilterCategory] = useState('');
+  const [keyword, setKeyword] = useState('');
+  const debouncedKeyword = useDebouncedValue(keyword, 300);
 
   const filteredTasks = useMemo(() => {
     let result = versionTasks;
@@ -51,30 +56,30 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     if (filterBlocked === 'yes') result = result.filter((t) => t.isBlocked);
     if (filterBlocked === 'no') result = result.filter((t) => !t.isBlocked);
     if (filterCategory) result = result.filter((t) => t.categoryId === filterCategory);
+    if (debouncedKeyword) result = result.filter((t) => matchTitleOrNo({ title: t.title, no: t.taskNo }, debouncedKeyword));
     return result;
-  }, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory]);
+  }, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory, debouncedKeyword]);
 
   const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredTasks, 20);
 
   const progress = calcGroupProgress(versionTasks);
-  const totalEstimate = versionTasks.reduce((s, t) => s + t.estimateHours, 0);
+  const { estimate: totalEstimate } = aggregateDevTaskHours(versionTasks);
+  const { calendarHours, manhours } = useMemo(() => calcTwoMetrics(devTaskIntervals(versionTasks)), [versionTasks]);
+  const overrun = manhours > totalEstimate && totalEstimate > 0;
+  const underrun = manhours > 0 && manhours < totalEstimate;
+  const hoursTone = overrun ? 'text-red-600' : underrun ? 'text-emerald-600' : 'text-[var(--ink-muted)]';
   const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
 
   const [showCreate, setShowCreate] = useState(false);
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
 
-  // 批量选择
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-  const isAllSelected = paged.length > 0 && paged.every((t) => selectedIds.has(t.id));
 
   const toggleSelect = (id: string) => {
     const next = new Set(selectedIds);
     if (next.has(id)) next.delete(id); else next.add(id);
     setSelectedIds(next);
   };
-  const toggleAll = () => {
-    setSelectedIds(isAllSelected ? new Set() : new Set(paged.map((t) => t.id)));
-  };
   const handleBatchDelete = () => {
     if (selectedIds.size === 0) return;
     if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return;
@@ -92,25 +97,27 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     return map;
   }, [paged]);
 
+  const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
+  const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
+  const allTaskIds = useMemo(() => versionTasks.map((t) => t.id), [versionTasks]);
+
   const assignees = useMemo(() => Array.from(new Set(versionTasks.map((t) => t.assigneeId))), [versionTasks]);
-  const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory);
+  const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory || debouncedKeyword);
 
   return (
     <div className="space-y-3">
-      {/* 工具栏：进度 + 筛选 + 操作 合为一行 */}
       <div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)] flex-wrap">
-        {/* 进度 */}
         <Code2 className="h-3.5 w-3.5 text-[var(--accent)] shrink-0" />
         <span className="text-[12px] font-medium text-[var(--ink)] shrink-0">{progress}%</span>
         <div className="h-1.5 w-20 rounded-full bg-[var(--bg)] overflow-hidden shrink-0">
           <div className="h-full rounded-full bg-[var(--accent)]" style={{ width: `${progress}%` }} />
         </div>
-        <span className="text-[11px] text-[var(--ink-muted)] shrink-0">{versionTasks.length}任务 · {totalEstimate}h</span>
+        <span className="text-[11px] text-[var(--ink-muted)] shrink-0">{versionTasks.length}任务 · 预 {formatWorkHours(totalEstimate)}{manhours > 0 ? <> · 日历 {formatWorkHours(calendarHours)} / 人力 <span className={`tabular-nums ${hoursTone}`}>{formatWorkHours(manhours)}</span></> : null}</span>
         {blockedCount > 0 && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{blockedCount}阻塞</span>}
 
         <span className="w-px h-4 bg-[var(--line)] mx-1 shrink-0" />
 
-        {/* 筛选 */}
+        <SearchInput value={keyword} onChange={(v) => { setKeyword(v); setPage(1); }} placeholder="搜索标题/编号" />
         <select value={filterAssignee} onChange={(e) => { setFilterAssignee(e.target.value); setPage(1); }} className="h-6 rounded border border-[var(--line)] bg-[var(--bg-card)] px-1.5 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
           <option value="">负责人</option>
           {user?.name && <option value={user.name}>我的</option>}
@@ -129,9 +136,8 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
           <option value="">类型</option>
           {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
         </select>
-        {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setPage(1); }} className="text-[10px] text-[var(--accent)] hover:underline shrink-0">清除</button>}
+        {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setKeyword(''); setPage(1); }} className="text-[10px] text-[var(--accent)] hover:underline shrink-0">清除</button>}
 
-        {/* 右侧操作 */}
         <div className="ml-auto flex items-center gap-2 shrink-0">
           {selectedIds.size > 0 && (
             <button onClick={handleBatchDelete} className="flex items-center gap-1 h-6 px-2 rounded text-[11px] font-medium bg-red-500 text-white hover:bg-red-600">
@@ -144,7 +150,6 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
         </div>
       </div>
 
-      {/* 列表 */}
       {filteredTasks.length === 0 ? (
         <div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
           <p className="text-[13px] text-[var(--ink-muted)]">{hasFilter ? '没有匹配的任务' : '暂无开发任务'}</p>
@@ -152,7 +157,7 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
         </div>
       ) : (
         Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
-          const req = requirements.find((r) => r.id === reqId);
+          const req = requirementMap.get(reqId);
           const reqProgress = calcGroupProgress(reqTasks);
           return (
             <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
@@ -168,7 +173,7 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
                     <input type="checkbox" checked={selectedIds.has(t.id)} onChange={() => toggleSelect(t.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <DevTaskRow task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
+                    <DevTaskRow task={t} category={categoryMap.get(t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
                   </div>
                 </div>
               ))}
@@ -180,7 +185,7 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
       {total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}
 
       {showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} versionDeadline={versionDeadline} onClose={() => setShowCreate(false)} />}
-      {selectedTaskId && <DevTaskDetailDrawer taskId={selectedTaskId} allTaskIds={versionTasks.map((t) => t.id)} onClose={() => setSelectedTaskId(null)} />}
+      {selectedTaskId && <DevTaskDetailDrawer taskId={selectedTaskId} allTaskIds={allTaskIds} onClose={() => setSelectedTaskId(null)} />}
     </div>
   );
 }