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>

apps/web/components/bug/BugCreateModal.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { X } from 'lucide-react';
+import { useBugStore } from '@/stores/useBugStore';
+import { useTestCaseStore } from '@/stores/useTestCaseStore';
+import { useDevTaskStore } from '@/stores/useDevTaskStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useMemberStore } from '@/stores/useMemberStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import type { Priority } from '@/lib/derive';
+import type { BugSeverity } from '@/lib/bug';
+
+interface Props {
+  testCaseId: string;
+  onClose: () => void;
+}
+
+export function BugCreateModal({ testCaseId, onClose }: Props) {
+  const { createBug } = useBugStore();
+  const { testCases } = useTestCaseStore();
+  const { tasks: devTasks } = useDevTaskStore();
+  const { requirements } = useRequirementStore();
+  const { members } = useMemberStore();
+  const user = useAuthStore((s) => s.user);
+
+  const tc = testCases.find((c) => c.id === testCaseId);
+  const requirement = requirements.find((r) => r.id === tc?.requirementId);
+
+  // 推导默认负责人
+  const defaultAssignee = useMemo(() => {
+    if (!tc) return '';
+    const reqTasks = devTasks.filter((t) => t.requirementId === tc.requirementId);
+    const inProgress = reqTasks.filter((t) => t.status === 'in_progress').sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    if (inProgress.length > 0) return inProgress[0].assigneeId;
+    const latest = reqTasks.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    return latest.length > 0 ? latest[0].assigneeId : '';
+  }, [tc, devTasks]);
+
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [severity, setSeverity] = useState<BugSeverity>('major');
+  const [priority, setPriority] = useState<Priority>(tc?.priority || 'P1');
+  const [assigneeId, setAssigneeId] = useState(defaultAssignee);
+
+  const canSubmit = title.trim() && description.trim() && assigneeId;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    createBug({
+      testCaseId,
+      title: title.trim(),
+      description: description.trim(),
+      severity,
+      priority,
+      reportedBy: user?.name || '系统',
+      assigneeId,
+    });
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[60] 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)]">提交 Bug</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="rounded-lg bg-[var(--bg-subtle)] px-3 py-2 mb-4 space-y-1 text-[12px]">
+          <div><span className="text-[var(--ink-muted)]">关联用例：</span><span className="text-[var(--ink)]">{tc?.caseNo} {tc?.title}</span></div>
+          {requirement && <div><span className="text-[var(--ink-muted)]">关联需求：</span><span className="text-[var(--ink)]">{requirement.code} {requirement.title}</span></div>}
+        </div>
+
+        <div className="space-y-3">
+          <div>
+            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">Bug 标题 *</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">Bug 描述 *</label>
+            <textarea rows={3} 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="复现步骤、实际结果、预期结果" />
+          </div>
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">严重程度</label>
+              <select value={severity} onChange={(e) => setSeverity(e.target.value as BugSeverity)} 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="critical">致命</option>
+                <option value="major">严重</option>
+                <option value="minor">一般</option>
+                <option value="trivial">轻微</option>
+              </select>
+            </div>
+            <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>
+        <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-red-500 text-white hover:bg-red-600 disabled:opacity-50">提交 Bug</button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/bug/BugDetailDrawer.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Link2, ChevronRight } from 'lucide-react';
+import { BugStatusBadge } from './BugStatusBadge';
+import { useBugStore } from '@/stores/useBugStore';
+import { useTestCaseStore } from '@/stores/useTestCaseStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { BUG_ALLOWED_TRANSITIONS, BUG_STATUS_LABEL, BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
+import type { BugStatus } from '@/lib/bug';
+
+interface Props {
+  bugId: string;
+  onClose: () => void;
+}
+
+export function BugDetailDrawer({ bugId, onClose }: Props) {
+  const { bugs, changeStatus } = useBugStore();
+  const { testCases } = useTestCaseStore();
+  const { requirements } = useRequirementStore();
+
+  const bug = bugs.find((b) => b.id === bugId);
+  if (!bug) return null;
+
+  const tc = testCases.find((c) => c.id === bug.testCaseId);
+  const requirement = tc ? requirements.find((r) => r.id === tc.requirementId) : null;
+  const nextStatuses = BUG_ALLOWED_TRANSITIONS[bug.status];
+
+  const [resolution, setResolution] = useState(bug.resolution || '');
+  const [showResolutionInput, setShowResolutionInput] = useState(false);
+
+  const handleTransition = (to: BugStatus) => {
+    if (to === 'fixed') { setShowResolutionInput(true); return; }
+    changeStatus(bug.id, to);
+  };
+
+  const confirmFix = () => {
+    changeStatus(bug.id, 'fixed', { resolution: resolution.trim() || undefined });
+    setShowResolutionInput(false);
+  };
+
+  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)]">{bug.bugNo}</span>
+            <span className="text-[14px] font-semibold text-[var(--ink)] truncate max-w-[240px]">{bug.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">
+          {/* 关联链路 */}
+          <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-3 space-y-2">
+            <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide">关联链路</div>
+            {tc && (
+              <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)]">{tc.caseNo}</span>
+                <span className="text-[13px] text-[var(--ink)]">{tc.title}</span>
+              </div>
+            )}
+            {requirement && (
+              <div className="flex items-center gap-2 pl-5">
+                <ChevronRight className="h-3 w-3 text-[var(--ink-muted)]" />
+                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{requirement.code}</span>
+                <span className="text-[12px] text-[var(--ink-soft)]">{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">
+              <BugStatusBadge status={bug.status} />
+              <span className={`text-[10px] px-2 py-0.5 rounded ${BUG_SEVERITY_COLOR[bug.severity]}`}>{BUG_SEVERITY_LABEL[bug.severity]}</span>
+              <span className="text-[11px] text-[var(--ink-muted)]">{bug.priority}</span>
+            </div>
+
+            {nextStatuses.length > 0 && !showResolutionInput && (
+              <div className="flex items-center gap-2 pt-1 flex-wrap">
+                <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 === 'closed' ? 'bg-emerald-500 text-white hover:bg-emerald-600' : s === 'rejected' ? 'bg-zinc-400 text-white hover:bg-zinc-500' : 'bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]'}`}>
+                    {BUG_STATUS_LABEL[s]}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {showResolutionInput && (
+              <div className="space-y-2 pt-1">
+                <input value={resolution} onChange={(e) => setResolution(e.target.value)} placeholder="修复说明" className="h-8 w-full rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-[var(--accent)] focus:outline-none" autoFocus />
+                <div className="flex gap-2">
+                  <button onClick={confirmFix} className="h-8 px-3 rounded-lg text-[11px] font-medium bg-[var(--accent)] text-white">确认已修复</button>
+                  <button onClick={() => setShowResolutionInput(false)} className="h-8 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
+                </div>
+              </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)]">{bug.reportedBy}</span></div>
+              <div><span className="text-[var(--ink-muted)]">修复人：</span><span className="text-[var(--ink)] font-medium">{bug.assigneeId}</span></div>
+              <div><span className="text-[var(--ink-muted)]">提交：</span><span className="text-[var(--ink)]">{bug.createdAt.slice(0, 10)}</span></div>
+              {bug.resolvedAt && <div><span className="text-[var(--ink-muted)]">修复：</span><span className="text-[var(--ink)]">{bug.resolvedAt}</span></div>}
+              {bug.closedAt && <div><span className="text-[var(--ink-muted)]">关闭：</span><span className="text-emerald-600">{bug.closedAt}</span></div>}
+            </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-2">Bug 描述</div>
+            <p className="text-[12px] text-[var(--ink-soft)] leading-relaxed whitespace-pre-wrap">{bug.description}</p>
+          </div>
+
+          {/* 修复说明 */}
+          {bug.resolution && (
+            <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
+              <div className="text-[10px] text-emerald-700 uppercase tracking-wide mb-2">修复说明</div>
+              <p className="text-[12px] text-emerald-800 leading-relaxed whitespace-pre-wrap">{bug.resolution}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/bug/BugRow.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { BugStatusBadge } from './BugStatusBadge';
+import { BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
+import type { Bug } from '@/lib/bug';
+
+interface Props {
+  bug: Bug;
+  testCaseNo?: string;
+  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 BugRow({ bug, testCaseNo, 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[bug.priority] || 'bg-zinc-300'}`} />
+      <span className="text-[11px] font-mono text-[var(--ink-muted)] w-16 shrink-0">{bug.bugNo}</span>
+      <span className="text-[13px] 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} />
+      {testCaseNo && <span className="text-[10px] font-mono text-[var(--ink-muted)] w-14 text-right">{testCaseNo}</span>}
+      <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{bug.assigneeId}</span>
+    </div>
+  );
+}

apps/web/components/bug/BugStatusBadge.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { BUG_STATUS_LABEL, BUG_STATUS_COLOR } from '@/lib/bug';
+import type { BugStatus } from '@/lib/bug';
+
+export function BugStatusBadge({ status }: { status: BugStatus }) {
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${BUG_STATUS_COLOR[status]}`}>
+      {BUG_STATUS_LABEL[status]}
+    </span>
+  );
+}

apps/web/components/bug/BugTab.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { Bug as BugIcon, Filter } from 'lucide-react';
+import { useBugStore } from '@/stores/useBugStore';
+import { useTestCaseStore } from '@/stores/useTestCaseStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { BugRow } from './BugRow';
+import { BugDetailDrawer } from './BugDetailDrawer';
+import { Pagination, usePagination } from '@/components/Pagination';
+import { BUG_STATUS_LABEL, BUG_SEVERITY_LABEL } from '@/lib/bug';
+import type { BugStatus, BugSeverity } from '@/lib/bug';
+
+interface Props {
+  versionId: string;
+  requirementIds: string[];
+}
+
+export function BugTab({ versionId, requirementIds }: Props) {
+  const { bugs, fetchBugs } = useBugStore();
+  const { testCases, fetchTestCases } = useTestCaseStore();
+  const { requirements } = useRequirementStore();
+  const user = useAuthStore((s) => s.user);
+
+  useEffect(() => { fetchBugs(); }, [fetchBugs]);
+  useEffect(() => { fetchTestCases(); }, [fetchTestCases]);
+
+  // 该版本的所有 Bug（通过测试用例 → 需求 关联）
+  const versionCases = useMemo(
+    () => testCases.filter((c) => requirementIds.includes(c.requirementId)),
+    [testCases, requirementIds],
+  );
+  const versionCaseIds = useMemo(() => new Set(versionCases.map((c) => c.id)), [versionCases]);
+  const versionBugs = useMemo(
+    () => bugs.filter((b) => versionCaseIds.has(b.testCaseId)),
+    [bugs, versionCaseIds],
+  );
+
+  // 统计
+  const openCount = versionBugs.filter((b) => b.status === 'open').length;
+  const fixingCount = versionBugs.filter((b) => b.status === 'fixing').length;
+  const fixedCount = versionBugs.filter((b) => b.status === 'fixed' || b.status === 'verifying').length;
+  const closedCount = versionBugs.filter((b) => b.status === 'closed' || b.status === 'rejected').length;
+  const criticalCount = versionBugs.filter((b) => b.severity === 'critical' && b.status !== 'closed' && b.status !== 'rejected').length;
+  const resolveRate = versionBugs.length > 0 ? Math.round(((fixedCount + closedCount) / versionBugs.length) * 100) : 0;
+
+  // 筛选
+  const [filterAssignee, setFilterAssignee] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const [filterSeverity, setFilterSeverity] = useState('');
+
+  const filteredBugs = useMemo(() => {
+    let result = versionBugs;
+    if (filterAssignee) result = result.filter((b) => b.assigneeId === filterAssignee);
+    if (filterStatus) result = result.filter((b) => b.status === filterStatus);
+    if (filterSeverity) result = result.filter((b) => b.severity === filterSeverity);
+    return result;
+  }, [versionBugs, filterAssignee, filterStatus, filterSeverity]);
+
+  const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredBugs, 20);
+
+  const [selectedBugId, setSelectedBugId] = useState<string | null>(null);
+
+  const assignees = useMemo(() => {
+    const names = new Set(versionBugs.map((b) => b.assigneeId));
+    return Array.from(names);
+  }, [versionBugs]);
+
+  const hasFilter = !!(filterAssignee || filterStatus || filterSeverity);
+
+  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">
+          <BugIcon className="h-4 w-4 text-red-500" />
+          <span className="text-[13px] font-medium text-[var(--ink)]">Bug {versionBugs.length} 个</span>
+        </div>
+        <span className="text-[11px] text-[var(--ink-muted)] tabular-nums">
+          待修复 {openCount} · 修复中 {fixingCount} · 已修复 {fixedCount} · 已关闭 {closedCount}
+        </span>
+        {criticalCount > 0 && (
+          <span className="text-[11px] text-red-600 bg-red-50 px-1.5 py-0.5 rounded font-medium">{criticalCount} 致命</span>
+        )}
+        <span className="text-[11px] text-[var(--ink-muted)]">解决率 {resolveRate}%</span>
+      </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}>我的Bug</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(BUG_STATUS_LABEL) as [BugStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+        </select>
+        <select value={filterSeverity} onChange={(e) => { setFilterSeverity(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(BUG_SEVERITY_LABEL) as [BugSeverity, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+        </select>
+        {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterSeverity(''); setPage(1); }} className="text-[11px] text-[var(--accent)] hover:underline">清除</button>}
+        <span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredBugs.length} 条</span>
+      </div>
+
+      {/* 列表 */}
+      {filteredBugs.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 ? '没有匹配的 Bug' : '暂无 Bug，很好'}</p>
+        </div>
+      ) : (
+        <div className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
+          {paged.map((bug) => {
+            const tc = testCases.find((c) => c.id === bug.testCaseId);
+            return <BugRow key={bug.id} bug={bug} testCaseNo={tc?.caseNo} onClick={() => setSelectedBugId(bug.id)} />;
+          })}
+        </div>
+      )}
+
+      {total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}
+
+      {selectedBugId && <BugDetailDrawer bugId={selectedBugId} onClose={() => setSelectedBugId(null)} />}
+    </div>
+  );
+}