fix(ui): 工具栏合并为一行 — 进度+筛选+操作紧凑布局

开发任务和测试用例列表顶部从三行（进度/筛选/多选）
合并为一行工具栏：左侧进度条和统计，中间筛选下拉，右侧批量删除+新建。
多选 checkbox 内嵌到分组头和行内。

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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo, useEffect } from 'react';
-import { Plus, Code2, Filter, Trash2 } from 'lucide-react';
+import { Plus, Code2, Trash2 } from 'lucide-react';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
@@ -38,11 +38,11 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     [tasks, requirementIds],
   );
 
-  // 筛选状态
-  const [filterAssignee, setFilterAssignee] = useState<string>('');
-  const [filterStatus, setFilterStatus] = useState<string>('');
-  const [filterBlocked, setFilterBlocked] = useState<string>('');
-  const [filterCategory, setFilterCategory] = useState<string>('');
+  // 筛选
+  const [filterAssignee, setFilterAssignee] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const [filterBlocked, setFilterBlocked] = useState('');
+  const [filterCategory, setFilterCategory] = useState('');
 
   const filteredTasks = useMemo(() => {
     let result = versionTasks;
@@ -56,10 +56,8 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
 
   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);
@@ -74,15 +72,9 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     if (next.has(id)) next.delete(id); else next.add(id);
     setSelectedIds(next);
   };
-
   const toggleAll = () => {
-    if (isAllSelected) {
-      setSelectedIds(new Set());
-    } else {
-      setSelectedIds(new Set(paged.map((t) => t.id)));
-    }
+    setSelectedIds(isAllSelected ? new Set() : new Set(paged.map((t) => t.id)));
   };
-
   const handleBatchDelete = () => {
     if (selectedIds.size === 0) return;
     if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return;
@@ -90,7 +82,6 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     setSelectedIds(new Set());
   };
 
-  // 按需求分组
   const groupedByReq = useMemo(() => {
     const map = new Map<string, DevTask[]>();
     for (const t of paged) {
@@ -101,112 +92,93 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     return map;
   }, [paged]);
 
-  const assignees = useMemo(() => {
-    const names = new Set(versionTasks.map((t) => t.assigneeId));
-    return Array.from(names);
-  }, [versionTasks]);
-
+  const assignees = useMemo(() => Array.from(new Set(versionTasks.map((t) => t.assigneeId))), [versionTasks]);
   const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory);
 
   return (
     <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">
-          <Code2 className="h-4 w-4 text-[var(--accent)]" />
-          <span className="text-[13px] font-medium text-[var(--ink)]">开发进度 {progress}%</span>
+      {/* 工具栏：进度 + 筛选 + 操作 合为一行 */}
+      <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>
-        <div className="h-2 flex-1 rounded-full bg-[var(--bg)] overflow-hidden">
-          <div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${progress}%` }} />
-        </div>
-        <span className="text-[11px] text-[var(--ink-muted)] tabular-nums">
-          {versionTasks.length} 任务 · 投入 {totalActual}h / 预计 {totalEstimate}h
-        </span>
-        {blockedCount > 0 && (
-          <span className="text-[11px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">{blockedCount} 阻塞</span>
-        )}
-        <button onClick={() => setShowCreate(true)} className="ml-auto flex items-center gap-1 h-7 px-3 rounded-md text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
-          <Plus className="h-3 w-3" />新建任务
-        </button>
-      </div>
+        <span className="text-[11px] text-[var(--ink-muted)] shrink-0">{versionTasks.length}任务 · {totalEstimate}h</span>
+        {blockedCount > 0 && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{blockedCount}阻塞</span>}
 
-      {/* 筛选栏 + 批量操作 */}
-      <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>}
+        <span className="w-px h-4 bg-[var(--line)] mx-1 shrink-0" />
+
+        {/* 筛选 */}
+        <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>}
           {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>
+        <select value={filterStatus} onChange={(e) => { setFilterStatus(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>
           {(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>
+        <select value={filterBlocked} onChange={(e) => { setFilterBlocked(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>
           <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>
+        <select value={filterCategory} onChange={(e) => { setFilterCategory(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>
           {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>
-        )}
-        {selectedIds.size > 0 && (
-          <button onClick={handleBatchDelete} className="flex items-center gap-1 h-7 px-3 rounded-md text-[11px] font-medium bg-red-500 text-white hover:bg-red-600">
-            <Trash2 className="h-3 w-3" />删除 {selectedIds.size} 项
+        {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); 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">
+              <Trash2 className="h-3 w-3" />删除{selectedIds.size}项
+            </button>
+          )}
+          <button onClick={() => setShowCreate(true)} className="flex items-center gap-1 h-6 px-2.5 rounded text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
+            <Plus className="h-3 w-3" />新建
           </button>
-        )}
-        <span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredTasks.length} 条结果</span>
+        </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>
           {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
         </div>
       ) : (
-        <>
-          {/* 全选 */}
-          <div className="flex items-center gap-2 px-4 py-1.5">
-            <input type="checkbox" checked={isAllSelected} onChange={toggleAll} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
-            <span className="text-[11px] text-[var(--ink-muted)]">全选当页</span>
-          </div>
-          {Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
-            const req = requirements.find((r) => r.id === reqId);
-            const reqProgress = calcGroupProgress(reqTasks);
-            return (
-              <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
-                <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
-                  <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
-                  <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
-                  <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
-                </div>
-                {reqTasks.map((t) => (
-                  <div key={t.id} className="flex items-center">
-                    <div className="pl-4 flex items-center">
-                      <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)} />
-                    </div>
-                  </div>
-                ))}
+        Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
+          const req = requirements.find((r) => r.id === reqId);
+          const reqProgress = calcGroupProgress(reqTasks);
+          return (
+            <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
+              <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
+                <input type="checkbox" checked={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) ids.forEach((id) => next.delete(id)); else ids.forEach((id) => next.add(id)); setSelectedIds(next); }} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
+                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
+                <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
+                <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
               </div>
-            );
-          })}
-        </>
+              {reqTasks.map((t) => (
+                <div key={t.id} className="flex items-center">
+                  <div className="pl-4 flex items-center">
+                    <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)} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          );
+        })
       )}
 
-      {/* 分页 */}
-      {total > 20 && (
-        <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />
-      )}
+      {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>