wanzi/ftb-project-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
2026-06-12 15:26:11 +08:00
parent 3fc387eac5
commit 452cbb4671
2 changed files with 115 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
apps/web/components/dev-task/DevTaskTab.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState, useMemo, useEffect } from 'react'; 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 { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore'; import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore'; import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
@@ -38,11 +38,11 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
[tasks, requirementIds], [tasks, requirementIds],
); );
// 筛选状态 // 筛选
const [filterAssignee, setFilterAssignee] = useState<string>(''); const [filterAssignee, setFilterAssignee] = useState('');
const [filterStatus, setFilterStatus] = useState<string>(''); const [filterStatus, setFilterStatus] = useState('');
const [filterBlocked, setFilterBlocked] = useState<string>(''); const [filterBlocked, setFilterBlocked] = useState('');
const [filterCategory, setFilterCategory] = useState<string>(''); const [filterCategory, setFilterCategory] = useState('');
const filteredTasks = useMemo(() => { const filteredTasks = useMemo(() => {
let result = versionTasks; 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 { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredTasks, 20);
// 统计
const progress = calcGroupProgress(versionTasks); const progress = calcGroupProgress(versionTasks);
const totalEstimate = versionTasks.reduce((s, t) => s + t.estimateHours, 0); 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 blockedCount = versionTasks.filter((t) => t.isBlocked).length;
const [showCreate, setShowCreate] = useState(false); 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); if (next.has(id)) next.delete(id); else next.add(id);
setSelectedIds(next); setSelectedIds(next);
}; };
const toggleAll = () => { const toggleAll = () => {
if (isAllSelected) { setSelectedIds(isAllSelected ? new Set() : new Set(paged.map((t) => t.id)));
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(paged.map((t) => t.id)));
}
}; };
const handleBatchDelete = () => { const handleBatchDelete = () => {
if (selectedIds.size === 0) return; if (selectedIds.size === 0) return;
if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return; if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return;
@@ -90,7 +82,6 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
setSelectedIds(new Set()); setSelectedIds(new Set());
}; };
// 按需求分组
const groupedByReq = useMemo(() => { const groupedByReq = useMemo(() => {
const map = new Map<string, DevTask[]>(); const map = new Map<string, DevTask[]>();
for (const t of paged) { for (const t of paged) {
@@ -101,112 +92,93 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
return map; return map;
}, [paged]); }, [paged]);
const assignees = useMemo(() => { const assignees = useMemo(() => Array.from(new Set(versionTasks.map((t) => t.assigneeId))), [versionTasks]);
const names = new Set(versionTasks.map((t) => t.assigneeId));
return Array.from(names);
}, [versionTasks]);
const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory); const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory);
return ( return (
<div className="space-y-3"> <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 px-4 py-2.5 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)] flex-wrap">
<div className="flex items-center gap-2"> {/* 进度 */}
<Code2 className="h-4 w-4 text-[var(--accent)]" /> <Code2 className="h-3.5 w-3.5 text-[var(--accent)] shrink-0" />
<span className="text-[13px] font-medium text-[var(--ink)]">开发进度 {progress}%</span> <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>
<div className="h-2 flex-1 rounded-full bg-[var(--bg)] overflow-hidden"> <span className="text-[11px] text-[var(--ink-muted)] shrink-0">{versionTasks.length}任务 · {totalEstimate}h</span>
<div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${progress}%` }} /> {blockedCount > 0 && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{blockedCount}阻塞</span>}
</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="w-px h-4 bg-[var(--line)] mx-1 shrink-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"> <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> <option value="">负责人</option>
{user?.name && <option value={user.name}>我的任务</option>} {user?.name && <option value={user.name}>我的</option>}
{assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)} {assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)}
</select> </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"> <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> <option value="">状态</option>
{(Object.entries(DEV_TASK_STATUS_LABEL) as [DevTaskStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)} {(Object.entries(DEV_TASK_STATUS_LABEL) as [DevTaskStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
</select> </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"> <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="">阻塞</option>
<option value="yes">阻塞中</option> <option value="yes">阻塞中</option>
<option value="no">正常</option> <option value="no">正常</option>
</select> </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"> <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> <option value="">类型</option>
{categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)} {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
</select> </select>
{hasFilter && ( {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setPage(1); }} className="text-[10px] text-[var(--accent)] hover:underline shrink-0">清除</button>}
<button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setPage(1); }} className="text-[11px] text-[var(--accent)] hover:underline">清除筛选</button>
)} {/* 右侧操作 */}
{selectedIds.size > 0 && ( <div className="ml-auto flex items-center gap-2 shrink-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"> {selectedIds.size > 0 && (
<Trash2 className="h-3 w-3" />删除 {selectedIds.size} 项 <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> </button>
)} </div>
<span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredTasks.length} 条结果</span>
</div> </div>
{/* 任务列表 */} {/* 列表 */}
{filteredTasks.length === 0 ? ( {filteredTasks.length === 0 ? (
<div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center"> <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> <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>} {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
</div> </div>
) : ( ) : (
<> Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
{/* 全选 */} const req = requirements.find((r) => r.id === reqId);
<div className="flex items-center gap-2 px-4 py-1.5"> const reqProgress = calcGroupProgress(reqTasks);
<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, reqTasks]) => { <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)]" />
const req = requirements.find((r) => r.id === reqId); <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
const reqProgress = calcGroupProgress(reqTasks); <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
return ( <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
<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> </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)} />} {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={versionTasks.map((t) => t.id)} onClose={() => setSelectedTaskId(null)} />}
</div> </div>

113
apps/web/components/test-case/TestCaseTab.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { Plus, ClipboardCheck, Filter, CheckCircle2, Trash2 } from 'lucide-react'; import { Plus, ClipboardCheck, CheckCircle2, Trash2 } from 'lucide-react';
import { useTestCaseStore } from '@/stores/useTestCaseStore'; import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useBugStore } from '@/stores/useBugStore'; import { useBugStore } from '@/stores/useBugStore';
import { useDevTaskStore } from '@/stores/useDevTaskStore'; import { useDevTaskStore } from '@/stores/useDevTaskStore';
@@ -35,7 +35,7 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
[testCases, versionId], [testCases, versionId],
); );
// 提测状态判断 // 提测状态
const versionDevTasks = useMemo(() => devTasks.filter((t) => requirementIds.includes(t.requirementId)), [devTasks, requirementIds]); const versionDevTasks = useMemo(() => devTasks.filter((t) => requirementIds.includes(t.requirementId)), [devTasks, requirementIds]);
const allSubmitted = versionDevTasks.length > 0 && versionDevTasks.every((t) => t.status === 'submitted'); const allSubmitted = versionDevTasks.length > 0 && versionDevTasks.every((t) => t.status === 'submitted');
@@ -67,12 +67,9 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
if (next.has(id)) next.delete(id); else next.add(id); if (next.has(id)) next.delete(id); else next.add(id);
setSelectedIds(next); setSelectedIds(next);
}; };
const toggleAll = () => { const toggleAll = () => {
if (isAllSelected) setSelectedIds(new Set()); setSelectedIds(isAllSelected ? new Set() : new Set(paged.map((c) => c.id)));
else setSelectedIds(new Set(paged.map((c) => c.id)));
}; };
const handleBatchDelete = () => { const handleBatchDelete = () => {
if (selectedIds.size === 0) return; if (selectedIds.size === 0) return;
const hasBug = Array.from(selectedIds).some((id) => bugs.some((b) => b.testCaseId === id)); const hasBug = Array.from(selectedIds).some((id) => bugs.some((b) => b.testCaseId === id));
@@ -82,7 +79,7 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
setSelectedIds(new Set()); setSelectedIds(new Set());
}; };
// 按需求分组（无需求的归为"通用"） // 按需求分组
const groupedByReq = useMemo(() => { const groupedByReq = useMemo(() => {
const map = new Map<string, typeof paged>(); const map = new Map<string, typeof paged>();
for (const c of paged) { for (const c of paged) {
@@ -94,65 +91,58 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
return map; return map;
}, [paged]); }, [paged]);
const assignees = useMemo(() => { const assignees = useMemo(() => Array.from(new Set(versionCases.map((c) => c.assigneeId).filter(Boolean) as string[])), [versionCases]);
const names = new Set(versionCases.map((c) => c.assigneeId).filter(Boolean) as string[]);
return Array.from(names);
}, [versionCases]);
const hasFilter = !!(filterAssignee || filterStatus); const hasFilter = !!(filterAssignee || filterStatus);
return ( return (
<div className="space-y-3"> <div className="space-y-3">
{/* 提测通知 */} {/* 提测通知 */}
{allSubmitted && ( {allSubmitted && (
<div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-emerald-50 border border-emerald-200"> <div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-50 border border-emerald-200">
<CheckCircle2 className="h-4 w-4 text-emerald-600" /> <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
<span className="text-[12px] font-medium text-emerald-700">开发已全部提测，可以开始测试</span> <span className="text-[12px] font-medium text-emerald-700">开发已全部提测，可以开始测试</span>
{versionDevTasks.length > 0 && <span className="text-[11px] text-emerald-600 ml-auto">{versionDevTasks.length} 个开发任务已交付</span>} <span className="text-[11px] text-emerald-600 ml-auto">{versionDevTasks.length} 个任务已交付</span>
</div> </div>
)} )}
{versionDevTasks.length > 0 && !allSubmitted && ( {versionDevTasks.length > 0 && !allSubmitted && (
<div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-orange-50 border border-orange-200"> <div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-orange-50 border border-orange-200">
<span className="text-[12px] text-orange-700">开发进行中，尚未全部提测（{versionDevTasks.filter((t) => t.status === 'submitted').length}/{versionDevTasks.length}）</span> <span className="text-[12px] text-orange-700">开发进行中（{versionDevTasks.filter((t) => t.status === 'submitted').length}/{versionDevTasks.length} 已提测）</span>
</div> </div>
)} )}
{/* 统计栏 */}
<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">
<ClipboardCheck className="h-4 w-4 text-[var(--accent)]" />
<span className="text-[13px] font-medium text-[var(--ink)]">测试完成 {stats.completionRate}%</span>
</div>
<div className="h-2 flex-1 rounded-full bg-[var(--bg)] overflow-hidden">
<div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${stats.completionRate}%` }} />
</div>
<span className="text-[11px] text-[var(--ink-muted)] tabular-nums">
{stats.total} 用例 · 通过 {stats.passed} · 失败 {stats.failed} · 阻塞 {stats.blocked}
</span>
<span className="text-[11px] text-[var(--ink-muted)]">通过率 {stats.passRate}%</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>
{/* 筛选 */} {/* 工具栏：进度 + 筛选 + 操作 一行 */}
<div className="flex items-center gap-2 px-1"> <div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)] flex-wrap">
<Filter className="h-3.5 w-3.5 text-[var(--ink-muted)]" /> <ClipboardCheck className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
<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"> <span className="text-[12px] font-medium text-[var(--ink)] shrink-0">{stats.completionRate}%</span>
<option value="">全部负责人</option> <div className="h-1.5 w-20 rounded-full bg-[var(--bg)] overflow-hidden shrink-0">
{user?.name && <option value={user.name}>我的用例</option>} <div className="h-full rounded-full bg-emerald-500" style={{ width: `${stats.completionRate}%` }} />
</div>
<span className="text-[11px] text-[var(--ink-muted)] shrink-0">{stats.total}例 · 通过{stats.passed} · 失败{stats.failed}</span>
<span className="text-[11px] text-[var(--ink-muted)] shrink-0">通过率{stats.passRate}%</span>
<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>)} {assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)}
</select> </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"> <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> <option value="">状态</option>
{(Object.entries(TEST_CASE_STATUS_LABEL) as [TestCaseStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)} {(Object.entries(TEST_CASE_STATUS_LABEL) as [TestCaseStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
</select> </select>
{hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setPage(1); }} className="text-[11px] text-[var(--accent)] hover:underline">清除</button>} {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setPage(1); }} className="text-[10px] text-[var(--accent)] hover:underline shrink-0">清除</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"> <div className="ml-auto flex items-center gap-2 shrink-0">
<Trash2 className="h-3 w-3" />删除 {selectedIds.size} 项 {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> </button>
)} </div>
<span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredCases.length} 条</span>
</div> </div>
{/* 列表 */} {/* 列表 */}
@@ -162,19 +152,15 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
{!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个用例</button>} {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个用例</button>}
</div> </div>
) : ( ) : (
<> Array.from(groupedByReq.entries()).map(([reqId, cases]) => {
<div className="flex items-center gap-2 px-4 py-1.5"> const req = reqId === '__none__' ? null : requirements.find((r) => r.id === reqId);
<input type="checkbox" checked={isAllSelected} onChange={toggleAll} className="h-3.5 w-3.5 rounded border-[var(--line)]" /> const reqPassed = cases.filter((c) => c.status === 'passed').length;
<span className="text-[11px] text-[var(--ink-muted)]">全选当页</span> return (
</div> <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
{Array.from(groupedByReq.entries()).map(([reqId, cases]) => { <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
const req = reqId === '__none__' ? null : requirements.find((r) => r.id === reqId); <input type="checkbox" checked={cases.every((c) => selectedIds.has(c.id))} onChange={() => { const ids = cases.map((c) => c.id); const allSel = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSel) 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)]" />
const reqPassed = cases.filter((c) => c.status === 'passed').length; <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code || '通用'}</span>
return ( <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title || '未关联需求'}</span>
<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> <span className="text-[11px] text-[var(--ink-muted)]">{reqPassed}/{cases.length} 通过</span>
</div> </div>
{cases.map((c) => ( {cases.map((c) => (
@@ -189,14 +175,13 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
))} ))}
</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 && <TestCaseCreateModal versionId={versionId} requirementIds={requirementIds} onClose={() => setShowCreate(false)} />} {showCreate && <TestCaseCreateModal versionId={versionId} requirementIds={requirementIds} onClose={() => setShowCreate(false)} />}
{selectedCaseId && <TestCaseDetailDrawer testCaseId={selectedCaseId} onClose={() => setSelectedCaseId(null)} onCreateBug={(id) => { setBugForCaseId(id); }} />} {selectedCaseId && <TestCaseDetailDrawer testCaseId={selectedCaseId} onClose={() => setSelectedCaseId(null)} onCreateBug={(id) => setBugForCaseId(id)} />}
{bugForCaseId && <BugCreateModal testCaseId={bugForCaseId} onClose={() => setBugForCaseId(null)} />} {bugForCaseId && <BugCreateModal testCaseId={bugForCaseId} onClose={() => setBugForCaseId(null)} />}
</div> </div>
); );