feat(test-case+bug): 测试用例模块 + Bug 模块完整实现
需求验收体系： - 测试用例：五态状态机（待执行/执行中/通过/失败/阻塞） - Bug：六态状态机（待修复/修复中/已修复/验证中/已关闭/已拒绝） - Bug 通过测试用例间接关联需求（不冗余存版本） - Bug 默认修复人 = 关联需求的开发任务负责人 - 测试进度 = 已执行用例/总用例, 通过率 = 通过/已执行 UI: - 版本详情页新增"测试用例" Tab + "BUG" Tab - 测试用例：统计栏+筛选+按需求分组列表+详情抽屉+提BUG入口 - Bug：统计栏+筛选+列表+详情抽屉（链式跳转用例→需求） - 概览胶囊"测试"阶段进度联动 - "与我相关"新增测试用例/Bug分组 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
93
apps/web/components/test-case/TestCaseCreateModal.tsx
Normal file
93
apps/web/components/test-case/TestCaseCreateModal.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { useTestCaseStore } from '@/stores/useTestCaseStore';
|
||||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||||
import { useMemberStore } from '@/stores/useMemberStore';
|
||||
import { useAuthStore } from '@/stores/useAuthStore';
|
||||
import type { Priority } from '@/lib/derive';
|
||||
|
||||
interface Props {
|
||||
requirementIds: string[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TestCaseCreateModal({ requirementIds, onClose }: Props) {
|
||||
const { createTestCase } = useTestCaseStore();
|
||||
const { requirements } = useRequirementStore();
|
||||
const { members } = useMemberStore();
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
const versionReqs = useMemo(
|
||||
() => requirements.filter((r) => requirementIds.includes(r.id)),
|
||||
[requirements, requirementIds],
|
||||
);
|
||||
|
||||
const [title, setTitle] = useState('');
|
||||
const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || '');
|
||||
const [priority, setPriority] = useState<Priority>(versionReqs[0]?.priority || 'P2');
|
||||
const [assigneeId, setAssigneeId] = useState(user?.name || '');
|
||||
const [description, setDescription] = useState('');
|
||||
|
||||
const canSubmit = title.trim() && requirementId;
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!canSubmit) return;
|
||||
createTestCase({
|
||||
requirementId,
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
priority,
|
||||
assigneeId: assigneeId || undefined,
|
||||
createdBy: user?.name || '系统',
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
|
||||
<div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-[14px] font-semibold text-[var(--ink)]">新建测试用例</h3>
|
||||
<button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">用例标题 *</label>
|
||||
<input value={title} onChange={(e) => setTitle(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" placeholder="例如：正常排班" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">所属需求 *</label>
|
||||
<select value={requirementId} onChange={(e) => { setRequirementId(e.target.value); const r = versionReqs.find((x) => x.id === e.target.value); if (r) setPriority(r.priority); }} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
|
||||
{versionReqs.map((r) => <option key={r.id} value={r.id}>{r.code} {r.title}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">优先级</label>
|
||||
<select value={priority} onChange={(e) => setPriority(e.target.value as Priority)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
|
||||
{(['P0','P1','P2','P3'] as Priority[]).map((p) => <option key={p} value={p}>{p}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">测试负责人</label>
|
||||
<select value={assigneeId} onChange={(e) => setAssigneeId(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
|
||||
<option value="">选择负责人</option>
|
||||
{members.map((m) => <option key={m.id} value={m.name}>{m.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">测试步骤 & 预期结果</label>
|
||||
<textarea rows={4} value={description} onChange={(e) => setDescription(e.target.value)} className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" placeholder="1. 操作步骤... 2. 预期结果..." />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4 border-t border-[var(--line)] mt-4">
|
||||
<button onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
|
||||
<button onClick={handleSubmit} disabled={!canSubmit} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] disabled:opacity-50">创建</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
166
apps/web/components/test-case/TestCaseDetailDrawer.tsx
Normal file
166
apps/web/components/test-case/TestCaseDetailDrawer.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { X, AlertTriangle, Link2, ChevronRight, Bug as BugIcon } from 'lucide-react';
|
||||
import { TestCaseStatusBadge } from './TestCaseStatusBadge';
|
||||
import { BugStatusBadge } from '@/components/bug/BugStatusBadge';
|
||||
import { useTestCaseStore } from '@/stores/useTestCaseStore';
|
||||
import { useBugStore } from '@/stores/useBugStore';
|
||||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||||
import { TC_ALLOWED_TRANSITIONS, TEST_CASE_STATUS_LABEL } from '@/lib/test-case';
|
||||
import { BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
|
||||
import type { TestCaseStatus } from '@/lib/test-case';
|
||||
|
||||
interface Props {
|
||||
testCaseId: string;
|
||||
onClose: () => void;
|
||||
onCreateBug?: (testCaseId: string) => void;
|
||||
}
|
||||
|
||||
export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug }: Props) {
|
||||
const { testCases, changeStatus } = useTestCaseStore();
|
||||
const { bugs } = useBugStore();
|
||||
const { requirements } = useRequirementStore();
|
||||
|
||||
const tc = testCases.find((c) => c.id === testCaseId);
|
||||
if (!tc) return null;
|
||||
|
||||
const requirement = requirements.find((r) => r.id === tc.requirementId);
|
||||
const relatedBugs = bugs.filter((b) => b.testCaseId === tc.id);
|
||||
const nextStatuses = TC_ALLOWED_TRANSITIONS[tc.status];
|
||||
|
||||
const [failReason, setFailReason] = useState('');
|
||||
const [blockReason, setBlockReason] = useState('');
|
||||
const [showFailInput, setShowFailInput] = useState(false);
|
||||
const [showBlockInput, setShowBlockInput] = useState(false);
|
||||
|
||||
const handleTransition = (to: TestCaseStatus) => {
|
||||
if (to === 'failed') { setShowFailInput(true); return; }
|
||||
if (to === 'blocked') { setShowBlockInput(true); return; }
|
||||
changeStatus(tc.id, to);
|
||||
};
|
||||
|
||||
const confirmFail = () => {
|
||||
changeStatus(tc.id, 'failed', { failReason: failReason.trim() || undefined });
|
||||
setShowFailInput(false);
|
||||
setFailReason('');
|
||||
};
|
||||
|
||||
const confirmBlock = () => {
|
||||
changeStatus(tc.id, 'blocked', { blockReason: blockReason.trim() || undefined });
|
||||
setShowBlockInput(false);
|
||||
setBlockReason('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
|
||||
<div className="w-full max-w-md h-full bg-[var(--bg)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] bg-[var(--bg-card)] shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{/* 关联需求 */}
|
||||
{requirement && (
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-3">
|
||||
<div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-1.5">关联需求</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-3.5 w-3.5 text-[var(--accent)]" />
|
||||
<span className="text-[11px] font-mono text-[var(--ink-muted)]">{requirement.code}</span>
|
||||
<span className="text-[13px] text-[var(--ink)]">{requirement.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 状态 & 操作 */}
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4 space-y-3">
|
||||
<div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide">状态 & 操作</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<TestCaseStatusBadge status={tc.status} />
|
||||
{tc.executedAt && <span className="text-[11px] text-[var(--ink-muted)]">执行于 {tc.executedAt}</span>}
|
||||
</div>
|
||||
|
||||
{nextStatuses.length > 0 && !showFailInput && !showBlockInput && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<ChevronRight className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
|
||||
{nextStatuses.map((s) => (
|
||||
<button key={s} onClick={() => handleTransition(s)} className={`h-8 px-4 rounded-lg text-[12px] font-medium transition-colors ${s === 'passed' ? 'bg-emerald-500 text-white hover:bg-emerald-600' : s === 'failed' ? 'bg-red-500 text-white hover:bg-red-600' : 'bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]'}`}>
|
||||
{TEST_CASE_STATUS_LABEL[s]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showFailInput && (
|
||||
<div className="flex gap-2 pt-1">
|
||||
<input value={failReason} onChange={(e) => setFailReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') confirmFail(); }} placeholder="失败原因（可选）" className="flex-1 h-8 rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-red-400 focus:outline-none" autoFocus />
|
||||
<button onClick={confirmFail} className="h-8 px-3 rounded-lg text-[11px] font-medium bg-red-500 text-white">确认失败</button>
|
||||
<button onClick={() => setShowFailInput(false)} className="h-8 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showBlockInput && (
|
||||
<div className="flex gap-2 pt-1">
|
||||
<input value={blockReason} onChange={(e) => setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') confirmBlock(); }} placeholder="阻塞原因（可选）" className="flex-1 h-8 rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-orange-400 focus:outline-none" autoFocus />
|
||||
<button onClick={confirmBlock} className="h-8 px-3 rounded-lg text-[11px] font-medium bg-orange-500 text-white">确认阻塞</button>
|
||||
<button onClick={() => setShowBlockInput(false)} className="h-8 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tc.failReason && <div className="text-[12px] text-red-600 bg-red-50 rounded-lg px-3 py-2"><AlertTriangle className="h-3 w-3 inline mr-1" />失败原因：{tc.failReason}</div>}
|
||||
{tc.blockReason && <div className="text-[12px] text-orange-600 bg-orange-50 rounded-lg px-3 py-2"><AlertTriangle className="h-3 w-3 inline mr-1" />阻塞原因：{tc.blockReason}</div>}
|
||||
</div>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
|
||||
<div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-3">基本信息</div>
|
||||
<div className="grid grid-cols-2 gap-y-3 gap-x-4 text-[12px]">
|
||||
<div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)] font-medium">{tc.priority}</span></div>
|
||||
<div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)] font-medium">{tc.assigneeId || '-'}</span></div>
|
||||
<div><span className="text-[var(--ink-muted)]">创建人：</span><span className="text-[var(--ink)]">{tc.createdBy}</span></div>
|
||||
<div><span className="text-[var(--ink-muted)]">创建日期：</span><span className="text-[var(--ink)]">{tc.createdAt.slice(0, 10)}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用例描述 */}
|
||||
{tc.description && (
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
|
||||
<div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-2">测试步骤 & 预期</div>
|
||||
<p className="text-[12px] text-[var(--ink-soft)] leading-relaxed whitespace-pre-wrap">{tc.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 关联 Bug + 提BUG按钮 */}
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide">关联 Bug ({relatedBugs.length})</div>
|
||||
{tc.status === 'failed' && onCreateBug && (
|
||||
<button onClick={() => onCreateBug(tc.id)} className="flex items-center gap-1 h-7 px-3 rounded-lg text-[11px] font-medium bg-red-500 text-white hover:bg-red-600">
|
||||
<BugIcon className="h-3 w-3" />提 BUG
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{relatedBugs.length === 0 ? (
|
||||
<p className="text-[12px] text-[var(--ink-muted)]">暂无关联 Bug</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{relatedBugs.map((bug) => (
|
||||
<div key={bug.id} className="flex items-center gap-2 text-[12px] px-2.5 py-1.5 rounded-lg bg-[var(--bg-subtle)]">
|
||||
<span className="font-mono text-[var(--ink-muted)]">{bug.bugNo}</span>
|
||||
<span className="text-[var(--ink)] flex-1 truncate">{bug.title}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${BUG_SEVERITY_COLOR[bug.severity]}`}>{BUG_SEVERITY_LABEL[bug.severity]}</span>
|
||||
<BugStatusBadge status={bug.status} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
33
apps/web/components/test-case/TestCaseRow.tsx
Normal file
33
apps/web/components/test-case/TestCaseRow.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
'use client';
|
||||
|
||||
import { TestCaseStatusBadge } from './TestCaseStatusBadge';
|
||||
import type { TestCase } from '@/lib/test-case';
|
||||
import type { Bug } from '@/lib/bug';
|
||||
|
||||
interface Props {
|
||||
testCase: TestCase;
|
||||
bugCount: number;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const PRIORITY_DOT: Record<string, string> = {
|
||||
P0: 'bg-red-500',
|
||||
P1: 'bg-orange-400',
|
||||
P2: 'bg-blue-400',
|
||||
P3: 'bg-zinc-300',
|
||||
};
|
||||
|
||||
export function TestCaseRow({ testCase, bugCount, onClick }: Props) {
|
||||
return (
|
||||
<div onClick={onClick} className="flex items-center gap-3 px-4 py-2.5 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0">
|
||||
<span className={`h-2 w-2 rounded-full shrink-0 ${PRIORITY_DOT[testCase.priority] || 'bg-zinc-300'}`} />
|
||||
<span className="text-[11px] font-mono text-[var(--ink-muted)] w-14 shrink-0">{testCase.caseNo}</span>
|
||||
<span className="text-[13px] text-[var(--ink)] flex-1 truncate">{testCase.title}</span>
|
||||
<TestCaseStatusBadge status={testCase.status} />
|
||||
{bugCount > 0 && (
|
||||
<span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">{bugCount} Bug</span>
|
||||
)}
|
||||
<span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{testCase.assigneeId || '-'}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
apps/web/components/test-case/TestCaseStatusBadge.tsx
Normal file
12
apps/web/components/test-case/TestCaseStatusBadge.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { TEST_CASE_STATUS_LABEL, TEST_CASE_STATUS_COLOR } from '@/lib/test-case';
|
||||
import type { TestCaseStatus } from '@/lib/test-case';
|
||||
|
||||
export function TestCaseStatusBadge({ status }: { status: TestCaseStatus }) {
|
||||
return (
|
||||
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${TEST_CASE_STATUS_COLOR[status]}`}>
|
||||
{TEST_CASE_STATUS_LABEL[status]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
141
apps/web/components/test-case/TestCaseTab.tsx
Normal file
141
apps/web/components/test-case/TestCaseTab.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { Plus, ClipboardCheck, Filter } from 'lucide-react';
|
||||
import { useTestCaseStore } from '@/stores/useTestCaseStore';
|
||||
import { useBugStore } from '@/stores/useBugStore';
|
||||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||||
import { useAuthStore } from '@/stores/useAuthStore';
|
||||
import { TestCaseRow } from './TestCaseRow';
|
||||
import { TestCaseCreateModal } from './TestCaseCreateModal';
|
||||
import { TestCaseDetailDrawer } from './TestCaseDetailDrawer';
|
||||
import { BugCreateModal } from '@/components/bug/BugCreateModal';
|
||||
import { calcTestProgress, TEST_CASE_STATUS_LABEL } from '@/lib/test-case';
|
||||
import { Pagination, usePagination } from '@/components/Pagination';
|
||||
import type { TestCaseStatus } from '@/lib/test-case';
|
||||
|
||||
interface Props {
|
||||
versionId: string;
|
||||
requirementIds: string[];
|
||||
}
|
||||
|
||||
export function TestCaseTab({ versionId, requirementIds }: Props) {
|
||||
const { testCases, fetchTestCases } = useTestCaseStore();
|
||||
const { bugs, fetchBugs } = useBugStore();
|
||||
const { requirements } = useRequirementStore();
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
useEffect(() => { fetchTestCases(); }, [fetchTestCases]);
|
||||
useEffect(() => { fetchBugs(); }, [fetchBugs]);
|
||||
|
||||
const versionCases = useMemo(
|
||||
() => testCases.filter((c) => requirementIds.includes(c.requirementId)),
|
||||
[testCases, requirementIds],
|
||||
);
|
||||
|
||||
const stats = calcTestProgress(versionCases);
|
||||
|
||||
// 筛选
|
||||
const [filterAssignee, setFilterAssignee] = useState('');
|
||||
const [filterStatus, setFilterStatus] = useState('');
|
||||
|
||||
const filteredCases = useMemo(() => {
|
||||
let result = versionCases;
|
||||
if (filterAssignee) result = result.filter((c) => c.assigneeId === filterAssignee);
|
||||
if (filterStatus) result = result.filter((c) => c.status === filterStatus);
|
||||
return result;
|
||||
}, [versionCases, filterAssignee, filterStatus]);
|
||||
|
||||
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredCases, 20);
|
||||
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
|
||||
const [bugForCaseId, setBugForCaseId] = useState<string | null>(null);
|
||||
|
||||
// 按需求分组
|
||||
const groupedByReq = useMemo(() => {
|
||||
const map = new Map<string, typeof paged>();
|
||||
for (const c of paged) {
|
||||
const list = map.get(c.requirementId) || [];
|
||||
list.push(c);
|
||||
map.set(c.requirementId, list);
|
||||
}
|
||||
return map;
|
||||
}, [paged]);
|
||||
|
||||
const assignees = useMemo(() => {
|
||||
const names = new Set(versionCases.map((c) => c.assigneeId).filter(Boolean) as string[]);
|
||||
return Array.from(names);
|
||||
}, [versionCases]);
|
||||
|
||||
const hasFilter = !!(filterAssignee || filterStatus);
|
||||
|
||||
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">
|
||||
<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">
|
||||
<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(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>}
|
||||
<span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredCases.length} 条</span>
|
||||
</div>
|
||||
|
||||
{/* 列表 */}
|
||||
{filteredCases.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>
|
||||
) : (
|
||||
Array.from(groupedByReq.entries()).map(([reqId, cases]) => {
|
||||
const req = requirements.find((r) => r.id === reqId);
|
||||
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>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
{total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}
|
||||
|
||||
{showCreate && <TestCaseCreateModal requirementIds={requirementIds} 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