fix(dev-task): 体验优化 — 新建弹窗默认值+详情卡片分区+筛选分页+胶囊联动

- 新建弹窗：负责人默认当前用户，提示版本截止日期，超期需填写原因
- 详情抽屉：重写为卡片分区布局，展示关联需求，状态流转按钮醒目化
- 详情实时更新：改为从 store 实时读取而非 prop 快照
- 列表增加筛选：负责人/状态/阻塞/任务类型 + 分页（每页20条）
- 工时展示：列表行显示 实际Xh / 预计Yh 格式
- 概览胶囊联动：dev 阶段进度由 DevTask 完成度驱动
- 概览统计卡片：替换 mock 为真实 DevTask 数据（待开发/开发中/阻塞中）

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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { X } from 'lucide-react';
+import { X, AlertTriangle } from 'lucide-react';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
@@ -12,11 +12,12 @@ import type { Priority } from '@/lib/derive';
 interface Props {
   versionId: string;
   requirementIds: string[];
+  versionDeadline?: string;
   onClose: () => void;
   onCreated?: () => void;
 }
 
-export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreated }: Props) {
+export function DevTaskCreateModal({ versionId, requirementIds, versionDeadline, onClose, onCreated }: Props) {
   const { createTask, tasks } = useDevTaskStore();
   const { categories } = useTaskCategoryStore();
   const { requirements } = useRequirementStore();
@@ -35,16 +36,18 @@ export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreat
   const [title, setTitle] = useState('');
   const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || '');
   const [categoryId, setCategoryId] = useState(categories[0]?.id || '');
-  const [assigneeId, setAssigneeId] = useState('');
+  const [assigneeId, setAssigneeId] = useState(user?.name || '');
   const [priority, setPriority] = useState<Priority>('P2');
   const [estimateHours, setEstimateHours] = useState<number>(8);
   const [dueDate, setDueDate] = useState('');
   const [predecessorIds, setPredecessorIds] = useState<string[]>([]);
   const [description, setDescription] = useState('');
+  const [overdueReason, setOverdueReason] = useState('');
 
   const selectedReq = versionReqs.find((r) => r.id === requirementId);
   const effectivePriority = selectedReq?.priority || priority;
-  const canSubmit = title.trim() && requirementId && categoryId && assigneeId && estimateHours > 0;
+  const isOverdue = !!(dueDate && versionDeadline && dueDate > versionDeadline);
+  const canSubmit = title.trim() && requirementId && categoryId && assigneeId && estimateHours > 0 && (!isOverdue || overdueReason.trim());
 
   const handleSubmit = () => {
     if (!canSubmit) return;
@@ -65,6 +68,7 @@ export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreat
       blockedById: undefined,
       predecessorIds: predecessorIds.length > 0 ? predecessorIds : undefined,
       riskLevel: undefined,
+      overdueReason: isOverdue ? overdueReason.trim() : undefined,
       createdBy: user?.name || '系统',
     });
     onCreated?.();
@@ -118,8 +122,20 @@ export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreat
             <div>
               <label className="block text-[12px] text-[var(--ink-soft)] mb-1">截止日期</label>
               <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+              {versionDeadline && (
+                <p className="text-[10px] text-[var(--ink-muted)] mt-0.5">版本截止：{versionDeadline}</p>
+              )}
             </div>
           </div>
+          {isOverdue && (
+            <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" />
+                任务截止日期超出版本截止日期（{versionDeadline}），请说明原因
+              </div>
+              <input value={overdueReason} onChange={(e) => setOverdueReason(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" />
+            </div>
+          )}
           {versionTasks.length > 0 && (
             <div>
               <label className="block text-[12px] text-[var(--ink-soft)] mb-1">前置任务</label>

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

@@ -1,32 +1,39 @@
 'use client';
 
 import { useState } from 'react';
-import { X, AlertTriangle, Link2 } from 'lucide-react';
+import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Calendar } from 'lucide-react';
 import { StatusBadge } from './StatusBadge';
 import { CategoryChip } from './CategoryChip';
 import { WorklogPanel } from './WorklogPanel';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
-import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, formatHours } from '@/lib/dev-task';
-import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR, formatHours } from '@/lib/dev-task';
+import type { DevTaskStatus } from '@/lib/dev-task';
 
 interface Props {
-  task: DevTask;
-  allTasks: DevTask[];
+  taskId: string;
+  allTaskIds: string[];
   onClose: () => void;
 }
 
-export function DevTaskDetailDrawer({ task, allTasks, onClose }: Props) {
-  const { changeStatus, setBlocked } = useDevTaskStore();
+export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose }: Props) {
+  const { tasks, changeStatus, setBlocked } = useDevTaskStore();
   const { categories } = useTaskCategoryStore();
+  const { requirements } = useRequirementStore();
+
+  const task = tasks.find((t) => t.id === taskId);
+  if (!task) return null;
+
   const category = categories.find((c) => c.id === task.categoryId);
+  const requirement = requirements.find((r) => r.id === task.requirementId);
+  const allTasks = tasks.filter((t) => allTaskIds.includes(t.id));
+  const predecessors = (task.predecessorIds || []).map((id) => allTasks.find((t) => t.id === id)).filter(Boolean);
+  const nextStatuses = ALLOWED_TRANSITIONS[task.status];
 
   const [blockReason, setBlockReason] = useState(task.blockReason || '');
   const [showBlockInput, setShowBlockInput] = useState(false);
 
-  const nextStatuses = ALLOWED_TRANSITIONS[task.status];
-  const predecessors = (task.predecessorIds || []).map((id) => allTasks.find((t) => t.id === id)).filter(Boolean) as DevTask[];
-
   const handleTransition = (to: DevTaskStatus) => {
     const result = changeStatus(task.id, to);
     if (!result.ok) alert(result.message);
@@ -45,85 +52,152 @@ export function DevTaskDetailDrawer({ task, allTasks, onClose }: Props) {
 
   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-card)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}>
-        {/* Header */}
-        <div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] shrink-0">
+      <div className="w-full max-w-md h-full bg-[var(--bg)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}>
+        {/* 顶栏 */}
+        <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>
-            <StatusBadge status={task.status} />
-            {task.isBlocked && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">阻塞</span>}
+            <span className="text-[14px] font-semibold text-[var(--ink)] truncate max-w-[240px]">{task.title}</span>
           </div>
-          <button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4" /></button>
+          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
         </div>
 
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto p-5 space-y-5">
-          <h2 className="text-[15px] font-semibold text-[var(--ink)]">{task.title}</h2>
-          {task.description && <p className="text-[12px] text-[var(--ink-soft)]">{task.description}</p>}
+        {/* 滚动区域 */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
 
-          {/* 状态流转 */}
-          {nextStatuses.length > 0 && (
-            <div className="flex items-center gap-2">
-              <span className="text-[11px] text-[var(--ink-muted)]">流转到：</span>
-              {nextStatuses.map((s) => (
-                <button key={s} onClick={() => handleTransition(s)} className="h-7 px-3 rounded-md text-[11px] font-medium border border-[var(--line)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors">
-                  {DEV_TASK_STATUS_LABEL[s]}
-                </button>
-              ))}
+          {/* 卡片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>
+              <div className="flex items-center gap-2">
+                <Link2 className="h-3.5 w-3.5 text-[var(--accent)]" />
+                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{requirement.code}</span>
+                <span className="text-[13px] text-[var(--ink)]">{requirement.title}</span>
+              </div>
             </div>
           )}
 
-          {/* 阻塞管理 */}
-          <div className="rounded-lg border border-[var(--line)] p-3 space-y-2">
-            <div className="flex items-center justify-between">
-              <span className="text-[12px] font-medium text-[var(--ink)]">阻塞状态</span>
-              {task.isBlocked ? (
-                <button onClick={handleUnblock} className="text-[11px] text-emerald-600 hover:underline">解除阻塞</button>
-              ) : (
-                <button onClick={() => setShowBlockInput(true)} className="text-[11px] text-red-500 hover:underline">标记阻塞</button>
+          {/* 卡片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">
+              <span className={`inline-flex items-center rounded-lg px-3 py-1.5 text-[13px] font-semibold ${DEV_TASK_STATUS_COLOR[task.status]}`}>
+                {DEV_TASK_STATUS_LABEL[task.status]}
+              </span>
+              {task.isBlocked && (
+                <span className="inline-flex items-center gap-1 text-[11px] text-red-600 bg-red-50 border border-red-200 px-2 py-1 rounded-lg">
+                  <AlertTriangle className="h-3 w-3" />阻塞中
+                </span>
               )}
             </div>
-            {task.isBlocked && (
-              <div className="flex items-start gap-1.5 text-[12px] text-red-600 bg-red-50 rounded px-2 py-1.5">
-                <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
-                <span>{task.blockReason}</span>
+
+            {/* 流转按钮 */}
+            {nextStatuses.length > 0 && (
+              <div className="flex items-center gap-2 pt-1">
+                <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">
+                    {DEV_TASK_STATUS_LABEL[s]}
+                  </button>
+                ))}
               </div>
             )}
-            {showBlockInput && !task.isBlocked && (
-              <div className="flex gap-2">
-                <input value={blockReason} onChange={(e) => setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleBlock(); }} placeholder="阻塞原因" className="flex-1 h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
-                <button onClick={handleBlock} className="h-8 px-3 rounded-md text-[11px] font-medium bg-red-500 text-white">确认</button>
-              </div>
-            )}
-          </div>
 
-          {/* 基本信息 */}
-          <div className="grid grid-cols-2 gap-3 text-[12px]">
-            <div><span className="text-[var(--ink-muted)]">类型：</span><CategoryChip category={category} /></div>
-            <div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)]">{task.assigneeId}</span></div>
-            <div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)]">{task.priority}</span></div>
-            <div><span className="text-[var(--ink-muted)]">预计工时：</span><span className="text-[var(--ink)]">{formatHours(task.estimateHours)}</span></div>
-            {task.dueDate && <div><span className="text-[var(--ink-muted)]">截止日期：</span><span className="text-[var(--ink)]">{task.dueDate}</span></div>}
-            {task.completedAt && <div><span className="text-[var(--ink-muted)]">完成日期：</span><span className="text-[var(--ink)]">{task.completedAt}</span></div>}
-          </div>
-
-          {/* 前置任务 */}
-          {predecessors.length > 0 && (
-            <div className="space-y-1.5">
-              <span className="text-[12px] font-medium text-[var(--ink)]">前置任务</span>
-              {predecessors.map((p) => (
-                <div key={p.id} className="flex items-center gap-2 text-[12px] px-2 py-1 rounded bg-[var(--bg-subtle)]">
-                  <Link2 className="h-3 w-3 text-[var(--ink-muted)]" />
-                  <span className="font-mono text-[var(--ink-muted)]">{p.taskNo}</span>
-                  <span className="text-[var(--ink)]">{p.title}</span>
-                  <StatusBadge status={p.status} />
+            {/* 阻塞管理 */}
+            <div className="pt-2 border-t border-[var(--line)]">
+              {task.isBlocked ? (
+                <div className="space-y-2">
+                  <div className="flex items-start gap-1.5 text-[12px] text-red-600 bg-red-50 rounded-lg px-3 py-2">
+                    <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+                    <span>{task.blockReason}</span>
+                  </div>
+                  <button onClick={handleUnblock} className="text-[11px] text-emerald-600 font-medium hover:underline">解除阻塞</button>
                 </div>
-              ))}
+              ) : (
+                showBlockInput ? (
+                  <div className="flex gap-2">
+                    <input value={blockReason} onChange={(e) => setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleBlock(); }} placeholder="阻塞原因" className="flex-1 h-8 rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-red-400 focus:outline-none" autoFocus />
+                    <button onClick={handleBlock} disabled={!blockReason.trim()} className="h-8 px-3 rounded-lg text-[11px] font-medium bg-red-500 text-white disabled:opacity-50">确认</button>
+                    <button onClick={() => setShowBlockInput(false)} className="h-8 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
+                  </div>
+                ) : (
+                  <button onClick={() => setShowBlockInput(true)} className="text-[11px] text-red-500 font-medium hover:underline">标记阻塞</button>
+                )
+              )}
+            </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">基本信息</div>
+            <div className="grid grid-cols-2 gap-y-3 gap-x-4 text-[12px]">
+              <div className="flex items-center gap-2">
+                <Tag className="h-3 w-3 text-[var(--ink-muted)]" />
+                <span className="text-[var(--ink-muted)]">类型</span>
+                <CategoryChip category={category} />
+              </div>
+              <div className="flex items-center gap-2">
+                <User className="h-3 w-3 text-[var(--ink-muted)]" />
+                <span className="text-[var(--ink-muted)]">负责人</span>
+                <span className="text-[var(--ink)] font-medium">{task.assigneeId}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-[var(--ink-muted)]">优先级</span>
+                <span className="text-[var(--ink)] font-medium">{task.priority}</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">{formatHours(task.estimateHours)}</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.actualHours > 0 ? `${task.actualHours}h` : '-'}</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">{task.completedAt}</span>
+                </div>
+              )}
+            </div>
+            {task.description && (
+              <div className="mt-3 pt-3 border-t border-[var(--line)]">
+                <p className="text-[12px] text-[var(--ink-soft)] leading-relaxed">{task.description}</p>
+              </div>
+            )}
+          </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>
+              <div className="space-y-2">
+                {predecessors.map((p: any) => (
+                  <div key={p.id} className="flex items-center gap-2 text-[12px] px-2.5 py-1.5 rounded-lg bg-[var(--bg-subtle)]">
+                    <Link2 className="h-3 w-3 text-[var(--ink-muted)]" />
+                    <span className="font-mono text-[var(--ink-muted)]">{p.taskNo}</span>
+                    <span className="text-[var(--ink)] flex-1 truncate">{p.title}</span>
+                    <StatusBadge status={p.status} />
+                  </div>
+                ))}
+              </div>
             </div>
           )}
 
-          {/* 工时记录 */}
-          <WorklogPanel taskId={task.id} />
+          {/* 卡片5：工时记录 */}
+          <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
+            <WorklogPanel taskId={task.id} />
+          </div>
         </div>
       </div>
     </div>

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

@@ -38,8 +38,10 @@ export function DevTaskRow({ task, category, onClick }: Props) {
       </div>
       <CategoryChip category={category} />
       <StatusBadge status={task.status} />
-      <span className="text-[11px] text-[var(--ink-muted)] w-20 text-right tabular-nums">
-        {task.actualHours > 0 ? `${task.actualHours}h/` : ''}{formatHours(task.estimateHours).split('（')[0]}
+      <span className="text-[11px] text-[var(--ink-muted)] w-24 text-right tabular-nums">
+        {task.actualHours > 0 && <span className="text-[var(--ink-soft)]">{task.actualHours}h</span>}
+        {task.actualHours > 0 && ' / '}
+        {formatHours(task.estimateHours).split('（')[0]}
       </span>
       <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{task.assigneeId}</span>
     </div>

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

@@ -1,27 +1,33 @@
 'use client';
 
 import { useState, useMemo, useEffect } from 'react';
-import { Plus, Code2 } from 'lucide-react';
+import { Plus, Code2, Filter } from 'lucide-react';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useMemberStore } from '@/stores/useMemberStore';
+import { useAuthStore } from '@/stores/useAuthStore';
 import { DevTaskRow } from './DevTaskRow';
 import { DevTaskCreateModal } from './DevTaskCreateModal';
 import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
-import { calcGroupProgress } from '@/lib/dev-task';
-import type { DevTask } from '@/lib/dev-task';
+import { calcGroupProgress, DEV_TASK_STATUS_LABEL } from '@/lib/dev-task';
+import { Pagination, usePagination } from '@/components/Pagination';
+import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
 
 interface Props {
   versionId: string;
   requirementIds: string[];
+  versionDeadline?: string;
 }
 
-export function DevTaskTab({ versionId, requirementIds }: Props) {
+export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props) {
   const { tasks, fetchTasks } = useDevTaskStore();
   const { categories, fetchCategories } = useTaskCategoryStore();
   const { fetchWorklogs } = useTaskWorklogStore();
   const { requirements } = useRequirementStore();
+  const { members } = useMemberStore();
+  const user = useAuthStore((s) => s.user);
 
   useEffect(() => { fetchTasks(); }, [fetchTasks]);
   useEffect(() => { fetchCategories(); }, [fetchCategories]);
@@ -32,26 +38,56 @@ export function DevTaskTab({ versionId, requirementIds }: Props) {
     [tasks, requirementIds],
   );
 
+  // 筛选状态
+  const [filterAssignee, setFilterAssignee] = useState<string>('');
+  const [filterStatus, setFilterStatus] = useState<string>('');
+  const [filterBlocked, setFilterBlocked] = useState<string>('');
+  const [filterCategory, setFilterCategory] = useState<string>('');
+
+  // 应用筛选
+  const filteredTasks = useMemo(() => {
+    let result = versionTasks;
+    if (filterAssignee) result = result.filter((t) => t.assigneeId === filterAssignee);
+    if (filterStatus) result = result.filter((t) => t.status === filterStatus);
+    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);
+    return result;
+  }, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory]);
+
+  // 分页
+  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 totalActual = versionTasks.reduce((s, t) => s + t.actualHours, 0);
   const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
 
   const [showCreate, setShowCreate] = useState(false);
-  const [selectedTask, setSelectedTask] = useState<DevTask | null>(null);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
 
+  // 按需求分组（对当前页数据）
   const groupedByReq = useMemo(() => {
     const map = new Map<string, DevTask[]>();
-    for (const t of versionTasks) {
+    for (const t of paged) {
       const list = map.get(t.requirementId) || [];
       list.push(t);
       map.set(t.requirementId, list);
     }
     return map;
+  }, [paged]);
+
+  // 参与人列表
+  const assignees = useMemo(() => {
+    const names = new Set(versionTasks.map((t) => t.assigneeId));
+    return Array.from(names);
   }, [versionTasks]);
 
+  const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory);
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* 统计栏 */}
       <div className="flex items-center gap-4 px-4 py-3 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)]">
         <div className="flex items-center gap-2">
@@ -72,11 +108,38 @@ export function DevTaskTab({ versionId, requirementIds }: Props) {
         </button>
       </div>
 
-      {/* 按需求分组列表 */}
-      {versionTasks.length === 0 ? (
+      {/* 筛选栏 */}
+      <div className="flex items-center gap-2 px-1">
+        <Filter className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
+        <select value={filterAssignee} onChange={(e) => { setFilterAssignee(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
+          <option value="">全部负责人</option>
+          {user?.name && <option value={user.name}>我的任务</option>}
+          {assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)}
+        </select>
+        <select value={filterStatus} onChange={(e) => { setFilterStatus(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
+          <option value="">全部状态</option>
+          {(Object.entries(DEV_TASK_STATUS_LABEL) as [DevTaskStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+        </select>
+        <select value={filterBlocked} onChange={(e) => { setFilterBlocked(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
+          <option value="">阻塞状态</option>
+          <option value="yes">阻塞中</option>
+          <option value="no">正常</option>
+        </select>
+        <select value={filterCategory} onChange={(e) => { setFilterCategory(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
+          <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-[11px] text-[var(--accent)] hover:underline">清除筛选</button>
+        )}
+        <span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredTasks.length} 条结果</span>
+      </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)]">暂无开发任务</p>
-          <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>
+          <p className="text-[13px] text-[var(--ink-muted)]">{hasFilter ? '没有匹配的任务' : '暂无开发任务'}</p>
+          {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
         </div>
       ) : (
         Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
@@ -90,15 +153,21 @@ export function DevTaskTab({ versionId, requirementIds }: Props) {
                 <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
               </div>
               {reqTasks.map((t) => (
-                <DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTask(t)} />
+                <DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
               ))}
             </div>
           );
         })
       )}
 
-      {showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} onClose={() => setShowCreate(false)} />}
-      {selectedTask && <DevTaskDetailDrawer task={selectedTask} allTasks={versionTasks} onClose={() => setSelectedTask(null)} />}
+      {/* 分页 */}
+      {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)} />}
     </div>
   );
 }