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