feat: 开发任务和测试用例增加批量删除 + 单条删改

- DevTaskTab: 列表行前增加 checkbox，支持全选/批量删除
- DevTaskDetailDrawer: 顶部增加删除按钮（带确认）
- TestCaseTab: 同上，批量删除时校验关联 Bug（有 Bug 不可删）
- TestCaseDetailDrawer: 顶部增加删除按钮（有关联 Bug 时提示不可删）

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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Calendar, Play } from 'lucide-react';
+import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Calendar, Play, Trash2, Pencil } from 'lucide-react';
 import { StatusBadge } from './StatusBadge';
 import { CategoryChip } from './CategoryChip';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
@@ -17,7 +17,7 @@ interface Props {
 }
 
 export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose }: Props) {
-  const { tasks, changeStatus, setBlocked } = useDevTaskStore();
+  const { tasks, changeStatus, setBlocked, deleteTask } = useDevTaskStore();
   const { categories } = useTaskCategoryStore();
   const { requirements } = useRequirementStore();
 
@@ -58,7 +58,10 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose }: Props) {
             <span className="text-[12px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
             <span className="text-[14px] font-semibold text-[var(--ink)] truncate max-w-[240px]">{task.title}</span>
           </div>
-          <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 className="flex items-center gap-1">
+            <button onClick={() => { if (confirm('确定删除此任务？')) { deleteTask(task.id); onClose(); } }} className="p-1.5 rounded-lg hover:bg-red-50 text-[var(--ink-muted)] hover:text-red-500" title="删除"><Trash2 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>
         </div>
 
         {/* 滚动区域 */}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo, useEffect } from 'react';
-import { Plus, Code2, Filter } from 'lucide-react';
+import { Plus, Code2, Filter, Trash2 } from 'lucide-react';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
@@ -22,7 +22,7 @@ interface Props {
 }
 
 export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props) {
-  const { tasks, fetchTasks } = useDevTaskStore();
+  const { tasks, fetchTasks, deleteTask } = useDevTaskStore();
   const { categories, fetchCategories } = useTaskCategoryStore();
   const { fetchWorklogs } = useTaskWorklogStore();
   const { requirements } = useRequirementStore();
@@ -44,7 +44,6 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
   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);
@@ -55,7 +54,6 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
     return result;
   }, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory]);
 
-  // 分页
   const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredTasks, 20);
 
   // 统计
@@ -67,7 +65,32 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
   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 = () => {
+    if (isAllSelected) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(paged.map((t) => t.id)));
+    }
+  };
+
+  const handleBatchDelete = () => {
+    if (selectedIds.size === 0) return;
+    if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return;
+    selectedIds.forEach((id) => deleteTask(id));
+    setSelectedIds(new Set());
+  };
+
+  // 按需求分组
   const groupedByReq = useMemo(() => {
     const map = new Map<string, DevTask[]>();
     for (const t of paged) {
@@ -78,7 +101,6 @@ 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);
@@ -108,7 +130,7 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
         </button>
       </div>
 
-      {/* 筛选栏 */}
+      {/* 筛选栏 + 批量操作 */}
       <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">
@@ -132,6 +154,11 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
         {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} 项
+          </button>
+        )}
         <span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredTasks.length} 条结果</span>
       </div>
 
@@ -142,22 +169,36 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
           {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
         </div>
       ) : (
-        Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
+        <>
-          const req = requirements.find((r) => r.id === reqId);
+          {/* 全选 */}
-          const reqProgress = calcGroupProgress(reqTasks);
+          <div className="flex items-center gap-2 px-4 py-1.5">
-          return (
+            <input type="checkbox" checked={isAllSelected} onChange={toggleAll} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
-            <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
+            <span className="text-[11px] text-[var(--ink-muted)]">全选当页</span>
-              <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
+          </div>
-                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
+          {Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
-                <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
+            const req = requirements.find((r) => r.id === reqId);
-                <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
+            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>
+                ))}
               </div>
-              {reqTasks.map((t) => (
+            );
-                <DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
+          })}
-              ))}
+        </>
-            </div>
-          );
-        })
       )}
 
       {/* 分页 */}

apps/web/components/test-case/TestCaseDetailDrawer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { X, AlertTriangle, Link2, ChevronRight, Bug as BugIcon } from 'lucide-react';
+import { X, AlertTriangle, Link2, ChevronRight, Bug as BugIcon, Trash2 } from 'lucide-react';
 import { TestCaseStatusBadge } from './TestCaseStatusBadge';
 import { BugStatusBadge } from '@/components/bug/BugStatusBadge';
 import { useTestCaseStore } from '@/stores/useTestCaseStore';
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug }: Props) {
-  const { testCases, changeStatus } = useTestCaseStore();
+  const { testCases, changeStatus, deleteTestCase } = useTestCaseStore();
   const { bugs } = useBugStore();
   const { requirements } = useRequirementStore();
 
@@ -60,7 +60,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug }: Props
             <span className="text-[12px] font-mono text-[var(--ink-muted)]">{tc.caseNo}</span>
             <span className="text-[14px] font-semibold text-[var(--ink)] truncate max-w-[240px]">{tc.title}</span>
           </div>
-          <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 className="flex items-center gap-1">
+            <button onClick={() => { if (relatedBugs.length > 0) { alert('该用例有关联 Bug，无法删除'); return; } if (confirm('确定删除此测试用例？')) { deleteTestCase(tc.id); onClose(); } }} className="p-1.5 rounded-lg hover:bg-red-50 text-[var(--ink-muted)] hover:text-red-500" title="删除"><Trash2 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>
         </div>
 
         <div className="flex-1 overflow-y-auto p-4 space-y-3">

apps/web/components/test-case/TestCaseTab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo, useEffect } from 'react';
-import { Plus, ClipboardCheck, Filter, CheckCircle2 } from 'lucide-react';
+import { Plus, ClipboardCheck, Filter, CheckCircle2, Trash2 } from 'lucide-react';
 import { useTestCaseStore } from '@/stores/useTestCaseStore';
 import { useBugStore } from '@/stores/useBugStore';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export function TestCaseTab({ versionId, requirementIds }: Props) {
-  const { testCases, fetchTestCases } = useTestCaseStore();
+  const { testCases, fetchTestCases, deleteTestCase } = useTestCaseStore();
   const { bugs, fetchBugs } = useBugStore();
   const { tasks: devTasks } = useDevTaskStore();
   const { requirements } = useRequirementStore();
@@ -58,6 +58,30 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
   const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
   const [bugForCaseId, setBugForCaseId] = useState<string | null>(null);
 
+  // 批量选择
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const isAllSelected = paged.length > 0 && paged.every((c) => selectedIds.has(c.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 = () => {
+    if (isAllSelected) setSelectedIds(new Set());
+    else setSelectedIds(new Set(paged.map((c) => c.id)));
+  };
+
+  const handleBatchDelete = () => {
+    if (selectedIds.size === 0) return;
+    const hasBug = Array.from(selectedIds).some((id) => bugs.some((b) => b.testCaseId === id));
+    if (hasBug) { alert('选中的用例中有关联 Bug 的用例，无法删除。请先取消关联 Bug 的用例选择。'); return; }
+    if (!confirm(`确定删除选中的 ${selectedIds.size} 个测试用例？`)) return;
+    selectedIds.forEach((id) => deleteTestCase(id));
+    setSelectedIds(new Set());
+  };
+
   // 按需求分组（无需求的归为"通用"）
   const groupedByReq = useMemo(() => {
     const map = new Map<string, typeof paged>();
@@ -123,6 +147,11 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
           {(Object.entries(TEST_CASE_STATUS_LABEL) as [TestCaseStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
         </select>
         {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); 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} 项
+          </button>
+        )}
         <span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredCases.length} 条</span>
       </div>
 
@@ -133,22 +162,35 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
           {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个用例</button>}
         </div>
       ) : (
-        Array.from(groupedByReq.entries()).map(([reqId, cases]) => {
+        <>
-          const req = requirements.find((r) => r.id === reqId);
+          <div className="flex items-center gap-2 px-4 py-1.5">
-          const reqPassed = cases.filter((c) => c.status === 'passed').length;
+            <input type="checkbox" checked={isAllSelected} onChange={toggleAll} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
-          return (
+            <span className="text-[11px] text-[var(--ink-muted)]">全选当页</span>
-            <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
+          </div>
-              <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
+          {Array.from(groupedByReq.entries()).map(([reqId, cases]) => {
-                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
+            const req = reqId === '__none__' ? null : requirements.find((r) => r.id === reqId);
-                <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
+            const reqPassed = cases.filter((c) => c.status === 'passed').length;
+            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)]">{reqPassed}/{cases.length} 通过</span>
               </div>
               {cases.map((c) => (
-                <TestCaseRow key={c.id} testCase={c} bugCount={bugs.filter((b) => b.testCaseId === c.id).length} onClick={() => setSelectedCaseId(c.id)} />
+                <div key={c.id} className="flex items-center">
+                  <div className="pl-4 flex items-center">
+                    <input type="checkbox" checked={selectedIds.has(c.id)} onChange={() => toggleSelect(c.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <TestCaseRow testCase={c} bugCount={bugs.filter((b) => b.testCaseId === c.id).length} onClick={() => setSelectedCaseId(c.id)} />
+                  </div>
+                </div>
               ))}
             </div>
           );
-        })
+        })}
+        </>
       )}
 
       {total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}