feat(版本详情): 优化任务统计与测试轮次
This commit is contained in:
Script Generator
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { Plus, ClipboardCheck, CheckCircle2, Trash2 } from 'lucide-react';
|
||||
import { Plus, ClipboardCheck, Trash2 } from 'lucide-react';
|
||||
import { useTestCaseStore } from '@/stores/useTestCaseStore';
|
||||
import { useBugStore } from '@/stores/useBugStore';
|
||||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||||
@@ -12,11 +12,13 @@ import { TestCaseRow } from './TestCaseRow';
|
||||
import { TestCaseCreateModal } from './TestCaseCreateModal';
|
||||
import { TestCaseDetailDrawer } from './TestCaseDetailDrawer';
|
||||
import { BugCreateModal } from '@/components/bug/BugCreateModal';
|
||||
import { aggregateTestCaseHours, calcTestProgress, TEST_CASE_STATUS_LABEL, testCaseIntervals } from '@/lib/test-case';
|
||||
import { formatWorkHours, calcTwoMetrics } from '@/lib/work-hours';
|
||||
import { aggregateTestCaseHours, calcTestProgress, canStartNextTestRound, copyTestCaseToRound, getNextTestRoundNo, getRequirementDeliveryStatus, getTestCaseRoundNo, TEST_CASE_STATUS_LABEL, testCaseIntervals } from '@/lib/test-case';
|
||||
import { calcTwoMetrics } from '@/lib/work-hours';
|
||||
import { Pagination, usePagination } from '@/components/Pagination';
|
||||
import { SearchInput, matchTitleOrNo } from '@/components/SearchInput';
|
||||
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
|
||||
import { orderByRequirementForGrouping } from '@/lib/requirement-grouping';
|
||||
import { buildEffortSummaryMetrics, sumPositiveHours } from '@/lib/effort-summary';
|
||||
import type { TestCaseStatus } from '@/lib/test-case';
|
||||
|
||||
interface Props {
|
||||
@@ -25,7 +27,7 @@ interface Props {
|
||||
}
|
||||
|
||||
export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
const { testCases, fetchTestCases, deleteTestCase } = useTestCaseStore();
|
||||
const { testCases, fetchTestCases, createTestCases, deleteTestCase } = useTestCaseStore();
|
||||
const { bugs, fetchBugs } = useBugStore();
|
||||
const { tasks: devTasks } = useDevTaskStore();
|
||||
const { requirements } = useRequirementStore();
|
||||
@@ -41,16 +43,50 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
() => testCases.filter((c) => c.versionId === versionId),
|
||||
[testCases, versionId],
|
||||
);
|
||||
const rounds = useMemo(
|
||||
() => Array.from(new Set(versionCases.map((testCase) => getTestCaseRoundNo(testCase)))).sort((a, b) => a - b),
|
||||
[versionCases],
|
||||
);
|
||||
const [activeRound, setActiveRound] = useState(1);
|
||||
useEffect(() => {
|
||||
if (rounds.length === 0) {
|
||||
if (activeRound !== 1) setActiveRound(1);
|
||||
return;
|
||||
}
|
||||
if (!rounds.includes(activeRound)) setActiveRound(rounds[rounds.length - 1]);
|
||||
}, [rounds, activeRound]);
|
||||
const activeRoundCases = useMemo(
|
||||
() => versionCases.filter((testCase) => getTestCaseRoundNo(testCase) === activeRound),
|
||||
[versionCases, activeRound],
|
||||
);
|
||||
const firstRoundCases = useMemo(
|
||||
() => versionCases.filter((testCase) => getTestCaseRoundNo(testCase) === 1),
|
||||
[versionCases],
|
||||
);
|
||||
const versionBugs = useMemo(
|
||||
() => bugs.filter((bug) => bug.versionId === versionId),
|
||||
[bugs, versionId],
|
||||
);
|
||||
|
||||
const versionDevTasks = useMemo(
|
||||
() => devTasks.filter((t) => reqIdSet.has(t.requirementId)),
|
||||
[devTasks, reqIdSet],
|
||||
);
|
||||
const allSubmitted = versionDevTasks.length > 0 && versionDevTasks.every((t) => t.status === 'submitted');
|
||||
|
||||
const stats = calcTestProgress(versionCases);
|
||||
const { estimate: tcEstimateHours, actual: tcActualHours } = aggregateTestCaseHours(versionCases);
|
||||
const { calendarHours: tcCalendarHours, manhours: tcManhours } = useMemo(() => calcTwoMetrics(testCaseIntervals(versionCases)), [versionCases]);
|
||||
const stats = calcTestProgress(activeRoundCases, versionBugs);
|
||||
const { actual: tcActualHours } = aggregateTestCaseHours(versionCases);
|
||||
const { manhours: tcManhours } = useMemo(() => calcTwoMetrics(testCaseIntervals(versionCases)), [versionCases]);
|
||||
const effortMetrics = useMemo(
|
||||
() => buildEffortSummaryMetrics({
|
||||
aiEstimateHours: sumPositiveHours(versionCases, (testCase) => testCase.aiEstimateHours),
|
||||
estimateHours: sumPositiveHours(versionCases, (testCase) => testCase.estimateHours),
|
||||
actualHours: tcActualHours,
|
||||
manhours: tcManhours,
|
||||
}),
|
||||
[versionCases, tcActualHours, tcManhours],
|
||||
);
|
||||
const canCreateNextRound = useMemo(() => canStartNextTestRound(versionCases), [versionCases]);
|
||||
const nextRoundNo = useMemo(() => getNextTestRoundNo(versionCases), [versionCases]);
|
||||
|
||||
const [filterAssignee, setFilterAssignee] = useState('');
|
||||
const [filterStatus, setFilterStatus] = useState('');
|
||||
@@ -58,14 +94,19 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
const debouncedKeyword = useDebouncedValue(keyword, 300);
|
||||
|
||||
const filteredCases = useMemo(() => {
|
||||
let result = versionCases;
|
||||
let result = activeRoundCases;
|
||||
if (filterAssignee) result = result.filter((c) => c.assigneeId === filterAssignee);
|
||||
if (filterStatus) result = result.filter((c) => c.status === filterStatus);
|
||||
if (debouncedKeyword) result = result.filter((c) => matchTitleOrNo({ title: c.title, no: c.caseNo }, debouncedKeyword));
|
||||
return result;
|
||||
}, [versionCases, filterAssignee, filterStatus, debouncedKeyword]);
|
||||
}, [activeRoundCases, filterAssignee, filterStatus, debouncedKeyword]);
|
||||
|
||||
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredCases, 20);
|
||||
const orderedCases = useMemo(
|
||||
() => orderByRequirementForGrouping(filteredCases, requirementIds, (testCase) => testCase.requirementId),
|
||||
[filteredCases, requirementIds],
|
||||
);
|
||||
|
||||
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(orderedCases, 20);
|
||||
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
|
||||
@@ -86,6 +127,17 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
selectedIds.forEach((id) => deleteTestCase(id));
|
||||
setSelectedIds(new Set());
|
||||
};
|
||||
const handleRoundChange = (roundNo: number) => {
|
||||
setActiveRound(roundNo);
|
||||
setSelectedIds(new Set());
|
||||
setPage(1);
|
||||
};
|
||||
const handleStartNewRound = () => {
|
||||
if (!canCreateNextRound) return;
|
||||
const operator = user?.name || '系统';
|
||||
createTestCases(firstRoundCases.map((testCase) => copyTestCaseToRound(testCase, nextRoundNo, operator)));
|
||||
handleRoundChange(nextRoundNo);
|
||||
};
|
||||
|
||||
const groupedByReq = useMemo(() => {
|
||||
const map = new Map<string, typeof paged>();
|
||||
@@ -102,39 +154,31 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
|
||||
const bugCountByCase = useMemo(() => {
|
||||
const map = new Map<string, number>();
|
||||
for (const b of bugs) map.set(b.testCaseId, (map.get(b.testCaseId) ?? 0) + 1);
|
||||
for (const b of versionBugs) map.set(b.testCaseId, (map.get(b.testCaseId) ?? 0) + 1);
|
||||
return map;
|
||||
}, [bugs]);
|
||||
}, [versionBugs]);
|
||||
|
||||
const assignees = useMemo(() => Array.from(new Set(versionCases.map((c) => c.assigneeId).filter(Boolean) as string[])), [versionCases]);
|
||||
const assignees = useMemo(() => Array.from(new Set(activeRoundCases.map((c) => c.assigneeId).filter(Boolean) as string[])), [activeRoundCases]);
|
||||
const hasFilter = !!(filterAssignee || filterStatus || debouncedKeyword);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{allSubmitted && (
|
||||
<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-50 border border-emerald-200">
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
|
||||
<span className="text-[12px] font-medium text-emerald-700">开发已全部提测，可以开始测试</span>
|
||||
<span className="text-[11px] text-emerald-600 ml-auto">{versionDevTasks.length} 个任务已交付</span>
|
||||
</div>
|
||||
)}
|
||||
{versionDevTasks.length > 0 && !allSubmitted && (
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)] flex-wrap">
|
||||
<ClipboardCheck className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
|
||||
<span className="text-[12px] font-medium text-[var(--ink)] shrink-0">{stats.completionRate}%</span>
|
||||
<div className="h-1.5 w-20 rounded-full bg-[var(--bg)] overflow-hidden shrink-0">
|
||||
<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} · 预 {formatWorkHours(tcEstimateHours)} / 实 {formatWorkHours(tcActualHours)}</span>
|
||||
<span className="text-[11px] text-[var(--ink-muted)] shrink-0">通过率{stats.passRate}%</span>
|
||||
{tcManhours > 0 && (
|
||||
<span className="text-[11px] text-[var(--ink-muted)] shrink-0">日历 {formatWorkHours(tcCalendarHours)} / 人力 {formatWorkHours(tcManhours)}</span>
|
||||
)}
|
||||
<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">无Bug通过率{stats.passRate}%</span>
|
||||
{effortMetrics.map((metric) => (
|
||||
<span key={metric.label} className="text-[11px] text-[var(--ink-muted)] shrink-0">
|
||||
{metric.label} <span className="tabular-nums text-[var(--ink)]">{metric.value}</span>
|
||||
</span>
|
||||
))}
|
||||
<select value={activeRound} onChange={(e) => handleRoundChange(Number(e.target.value))} 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">
|
||||
{(rounds.length > 0 ? rounds : [1]).map((roundNo) => <option key={roundNo} value={roundNo}>测试轮{roundNo}次</option>)}
|
||||
</select>
|
||||
|
||||
<span className="w-px h-4 bg-[var(--line)] mx-1 shrink-0" />
|
||||
|
||||
@@ -156,6 +200,14 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
<Trash2 className="h-3 w-3" />删除{selectedIds.size}项
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleStartNewRound}
|
||||
disabled={!canCreateNextRound}
|
||||
title={canCreateNextRound ? `复制第1轮用例，开启第${nextRoundNo}轮测试` : '最新一轮测试用例全部测完后才能开启新一轮'}
|
||||
className="flex items-center gap-1 h-6 px-2.5 rounded text-[11px] font-medium bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus className="h-3 w-3" />开启新一轮测试
|
||||
</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>
|
||||
@@ -171,13 +223,30 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
Array.from(groupedByReq.entries()).map(([reqId, cases]) => {
|
||||
const req = reqId === '__none__' ? null : requirementMap.get(reqId);
|
||||
const reqPassed = cases.filter((c) => c.status === 'passed').length;
|
||||
const deliveryStatus = req ? getRequirementDeliveryStatus(req.id, versionDevTasks) : null;
|
||||
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={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)]" />
|
||||
<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 className="flex items-center bg-[var(--bg-subtle)] border-b border-[var(--line)]">
|
||||
<div className="pl-4 flex items-center">
|
||||
<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)]" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 items-center gap-3 px-4 py-2">
|
||||
<span className="h-2 w-2 shrink-0" />
|
||||
<span className="w-14 min-w-0 shrink-0 truncate text-[11px] font-mono text-[var(--ink-muted)]" title={req?.code || '通用'}>{req?.code || '通用'}</span>
|
||||
{deliveryStatus ? (
|
||||
<span className={`inline-flex h-5 w-24 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap ${
|
||||
deliveryStatus === 'submitted'
|
||||
? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
|
||||
: 'bg-orange-50 text-orange-600 border border-orange-100'
|
||||
}`}>
|
||||
{deliveryStatus === 'submitted' ? '已提测' : '待提测'}
|
||||
</span>
|
||||
) : (
|
||||
<span className="h-5 w-24 shrink-0" />
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
{cases.map((c) => (
|
||||
<div key={c.id} className="flex items-center">
|
||||
@@ -196,7 +265,7 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
|
||||
{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} roundNo={activeRound} onClose={() => setShowCreate(false)} />}
|
||||
{selectedCaseId && <TestCaseDetailDrawer testCaseId={selectedCaseId} onClose={() => setSelectedCaseId(null)} onCreateBug={(id) => setBugForCaseId(id)} />}
|
||||
{bugForCaseId && <BugCreateModal testCaseId={bugForCaseId} onClose={() => setBugForCaseId(null)} />}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user