382 lines
16 KiB
TypeScript
382 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useMemo } from 'react';
|
||
import { X, CheckCircle2, AlertTriangle, HelpCircle, ListChecks } from 'lucide-react';
|
||
import type { VersionPlan } from '@/lib/version-plan';
|
||
import type { VersionWithContext } from '@/lib/derive';
|
||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||
import { useTestCaseStore } from '@/stores/useTestCaseStore';
|
||
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
|
||
import { useAuthStore } from '@/stores/useAuthStore';
|
||
import { findCategoryByCode, resolveCategoryIdFromCode } from '@/lib/task-category';
|
||
import { addWorkHours } from '@/lib/work-hours';
|
||
import { clampDevEstimateHours, clampTestCaseEstimateHours } from '@/lib/ai-estimation-policy';
|
||
import type {
|
||
AgentDecomposeResponse,
|
||
AgentDevTaskDraft,
|
||
AgentTestCaseDraft,
|
||
} from '@ftb/shared';
|
||
|
||
interface Props {
|
||
result: AgentDecomposeResponse;
|
||
version: VersionWithContext;
|
||
plan: VersionPlan;
|
||
requirements: Array<{ id: string; code: string; title: string; description?: string }>;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function DecomposeReportModal({ result, version, plan, requirements, onClose }: Props) {
|
||
const { createTask } = useDevTaskStore();
|
||
const { createTestCase } = useTestCaseStore();
|
||
const { categories } = useTaskCategoryStore();
|
||
const user = useAuthStore((s) => s.user);
|
||
|
||
const { result: data, meta } = result;
|
||
|
||
const [selectedDevIdx, setSelectedDevIdx] = useState<Set<number>>(
|
||
new Set(data.devTaskDrafts.map((_, i) => i)),
|
||
);
|
||
const [selectedTcIdx, setSelectedTcIdx] = useState<Set<number>>(
|
||
new Set(data.testCaseDrafts.map((_, i) => i)),
|
||
);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [submitted, setSubmitted] = useState(false);
|
||
|
||
const reqByCode = useMemo(() => {
|
||
const m = new Map<string, { id: string; code: string; title: string }>();
|
||
for (const r of requirements) m.set(r.code, r);
|
||
return m;
|
||
}, [requirements]);
|
||
|
||
const reqByInternalId = useMemo(() => {
|
||
const m = new Map<string, { id: string; code: string; title: string }>();
|
||
for (const r of requirements) m.set(r.id, r);
|
||
return m;
|
||
}, [requirements]);
|
||
|
||
const toggleDev = (i: number) => {
|
||
const n = new Set(selectedDevIdx);
|
||
if (n.has(i)) n.delete(i);
|
||
else n.add(i);
|
||
setSelectedDevIdx(n);
|
||
};
|
||
const toggleTc = (i: number) => {
|
||
const n = new Set(selectedTcIdx);
|
||
if (n.has(i)) n.delete(i);
|
||
else n.add(i);
|
||
setSelectedTcIdx(n);
|
||
};
|
||
|
||
const handleAdopt = () => {
|
||
if (submitting) return;
|
||
setSubmitting(true);
|
||
const now = new Date().toISOString();
|
||
|
||
// 把每个 reference 的 requirement 类型 id（AI 给的是 code）映射回内部 id
|
||
const normalizeRefs = (refs: AgentDevTaskDraft['references'] | AgentTestCaseDraft['references']) =>
|
||
refs.map((ref) => {
|
||
if (ref.type === 'requirement') {
|
||
const r = reqByCode.get(ref.id) ?? reqByInternalId.get(ref.id);
|
||
if (r) return { ...ref, id: r.id, label: ref.label || `${r.code} ${r.title}` };
|
||
}
|
||
return ref;
|
||
});
|
||
|
||
let devCount = 0;
|
||
for (let i = 0; i < data.devTaskDrafts.length; i++) {
|
||
if (!selectedDevIdx.has(i)) continue;
|
||
const draft = data.devTaskDrafts[i];
|
||
const refs = normalizeRefs(draft.references);
|
||
const reqRef = refs.find((r) => r.type === 'requirement');
|
||
const requirementId = reqRef?.id ?? requirements[0]?.id ?? '';
|
||
const categoryId = resolveCategoryIdFromCode(categories, draft.categoryCode, 'development');
|
||
const estimateHours = clampDevEstimateHours(draft.categoryCode, draft.estimateHours);
|
||
const startISO = new Date().toISOString();
|
||
const endISO = addWorkHours(startISO, estimateHours);
|
||
|
||
createTask({
|
||
requirementId,
|
||
title: draft.title,
|
||
description: draft.description,
|
||
categoryId,
|
||
assigneeId: '',
|
||
reviewerId: undefined,
|
||
priority: draft.priority,
|
||
expectedStartAt: startISO,
|
||
expectedEndAt: endISO,
|
||
estimateHours,
|
||
actualStartAt: undefined,
|
||
actualEndAt: undefined,
|
||
status: 'todo',
|
||
blockReason: undefined,
|
||
blockedById: undefined,
|
||
predecessorIds: undefined,
|
||
riskLevel: undefined,
|
||
delayReason: undefined,
|
||
overdueVersionReason: undefined,
|
||
references: refs,
|
||
aiDraft: true,
|
||
aiDraftAt: now,
|
||
createdBy: user?.name || 'AI',
|
||
} as any);
|
||
devCount++;
|
||
}
|
||
|
||
let tcCount = 0;
|
||
for (let i = 0; i < data.testCaseDrafts.length; i++) {
|
||
if (!selectedTcIdx.has(i)) continue;
|
||
const draft = data.testCaseDrafts[i];
|
||
const refs = normalizeRefs(draft.references);
|
||
const reqRef = refs.find((r) => r.type === 'requirement');
|
||
const categoryId = resolveCategoryIdFromCode(categories, draft.categoryCode, 'testing');
|
||
const estimateHours = clampTestCaseEstimateHours(draft.categoryCode, draft.estimateHours);
|
||
|
||
createTestCase({
|
||
versionId: version.id,
|
||
requirementId: reqRef?.id,
|
||
title: draft.title,
|
||
description: draft.description,
|
||
categoryId,
|
||
priority: draft.priority,
|
||
estimateHours,
|
||
assigneeId: undefined,
|
||
references: refs,
|
||
aiDraft: true,
|
||
aiDraftAt: now,
|
||
createdBy: user?.name || 'AI',
|
||
} as any);
|
||
tcCount++;
|
||
}
|
||
|
||
setSubmitted(true);
|
||
setSubmitting(false);
|
||
|
||
// 1.5 秒后自动关闭
|
||
setTimeout(() => onClose(), 1500);
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
|
||
<div
|
||
className="w-full max-w-3xl max-h-[85vh] flex flex-col rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] shadow-2xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--line)]">
|
||
<div className="flex items-center gap-2">
|
||
<ListChecks className="h-4 w-4 text-purple-600" />
|
||
<h3 className="text-[14px] font-semibold text-[var(--ink)]">AI 拆解结果</h3>
|
||
<span className="text-[11px] text-[var(--ink-muted)]">
|
||
{meta.model} · 输入 {meta.inputTokens} tok · 输出 {meta.outputTokens} tok ·{' '}
|
||
{(meta.durationMs / 1000).toFixed(1)}s
|
||
</span>
|
||
</div>
|
||
<button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)]">
|
||
<X className="h-4 w-4 text-[var(--ink-muted)]" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
|
||
{/* 对账报告 */}
|
||
<section>
|
||
<h4 className="text-[12px] font-semibold text-[var(--ink-soft)] mb-2">对账报告</h4>
|
||
|
||
{data.report.matched.length > 0 && (
|
||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 mb-2">
|
||
<div className="flex items-center gap-1.5 mb-1.5">
|
||
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
|
||
<span className="text-[12px] font-medium text-emerald-700">
|
||
完美对应（{data.report.matched.length}）
|
||
</span>
|
||
</div>
|
||
<ul className="text-[12px] text-emerald-800 space-y-1 ml-5">
|
||
{data.report.matched.map((m, i) => (
|
||
<li key={i}>
|
||
{m.reqId} ↔ {m.noteIds.join(', ') || '(仅需求驱动)'} → 拆出 {m.taskCount} 个任务
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{data.report.reqOnly.length > 0 && (
|
||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-3 mb-2">
|
||
<div className="flex items-center gap-1.5 mb-1.5">
|
||
<AlertTriangle className="h-3.5 w-3.5 text-amber-600" />
|
||
<span className="text-[12px] font-medium text-amber-700">仅需求未见原型</span>
|
||
</div>
|
||
<p className="text-[11px] text-amber-700 mb-1">
|
||
以下需求在原型上未找到对应批注，已按需求文字拆解，请人工核对：
|
||
</p>
|
||
<ul className="text-[12px] text-amber-800 ml-5 list-disc">
|
||
{data.report.reqOnly.map((id, i) => <li key={i}>{id}</li>)}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{data.report.noteOnly.length > 0 && (
|
||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-3 mb-2">
|
||
<div className="flex items-center gap-1.5 mb-1.5">
|
||
<AlertTriangle className="h-3.5 w-3.5 text-blue-600" />
|
||
<span className="text-[12px] font-medium text-blue-700">仅原型未见需求</span>
|
||
</div>
|
||
<p className="text-[11px] text-blue-700 mb-1">
|
||
以下原型批注在需求清单中未提及，已跳过拆解（可能是漏录需求）：
|
||
</p>
|
||
<ul className="text-[12px] text-blue-800 ml-5 list-disc">
|
||
{data.report.noteOnly.map((id, i) => <li key={i}>{id}</li>)}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{data.report.ambiguous.length > 0 && (
|
||
<div className="rounded-lg border border-rose-200 bg-rose-50 p-3 mb-2">
|
||
<div className="flex items-center gap-1.5 mb-1.5">
|
||
<HelpCircle className="h-3.5 w-3.5 text-rose-600" />
|
||
<span className="text-[12px] font-medium text-rose-700">含糊批注</span>
|
||
</div>
|
||
<ul className="text-[12px] text-rose-800 ml-5 space-y-0.5">
|
||
{data.report.ambiguous.map((a, i) => (
|
||
<li key={i}>
|
||
<span className="font-medium">{a.noteId}</span>：{a.reason}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{/* DevTask 草案 */}
|
||
<section>
|
||
<h4 className="text-[12px] font-semibold text-[var(--ink-soft)] mb-2">
|
||
开发任务草案（{data.devTaskDrafts.length}）
|
||
</h4>
|
||
{data.devTaskDrafts.length === 0 ? (
|
||
<p className="text-[12px] text-[var(--ink-muted)]">无可生成的任务</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{data.devTaskDrafts.map((d, i) => (
|
||
<label
|
||
key={i}
|
||
className="flex gap-2 p-3 rounded-lg border border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedDevIdx.has(i)}
|
||
onChange={() => toggleDev(i)}
|
||
className="mt-0.5"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="text-[13px] font-medium text-[var(--ink)]">{d.title}</span>
|
||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-subtle)] text-[var(--ink-soft)]">
|
||
{findCategoryByCode(categories, d.categoryCode)?.name ?? d.categoryCode}
|
||
</span>
|
||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-zinc-100 text-zinc-600">
|
||
{d.priority}
|
||
</span>
|
||
<span className="text-[10px] text-[var(--ink-muted)]">
|
||
{clampDevEstimateHours(d.categoryCode, d.estimateHours)}h
|
||
</span>
|
||
</div>
|
||
{d.description && (
|
||
<p className="mt-1 text-[12px] text-[var(--ink-soft)] line-clamp-2">{d.description}</p>
|
||
)}
|
||
<div className="mt-1.5 flex flex-wrap gap-1">
|
||
{d.references.map((r, j) => (
|
||
<span
|
||
key={j}
|
||
className="text-[10px] px-1.5 py-0.5 rounded bg-purple-50 text-purple-700 border border-purple-200"
|
||
>
|
||
{r.label}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</label>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{/* TestCase 草案 */}
|
||
<section>
|
||
<h4 className="text-[12px] font-semibold text-[var(--ink-soft)] mb-2">
|
||
测试用例草案（{data.testCaseDrafts.length}）
|
||
</h4>
|
||
{data.testCaseDrafts.length === 0 ? (
|
||
<p className="text-[12px] text-[var(--ink-muted)]">无可生成的用例</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{data.testCaseDrafts.map((d, i) => (
|
||
<label
|
||
key={i}
|
||
className="flex gap-2 p-3 rounded-lg border border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedTcIdx.has(i)}
|
||
onChange={() => toggleTc(i)}
|
||
className="mt-0.5"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="text-[13px] font-medium text-[var(--ink)]">{d.title}</span>
|
||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-subtle)] text-[var(--ink-soft)]">
|
||
{findCategoryByCode(categories, d.categoryCode)?.name ?? d.categoryCode}
|
||
</span>
|
||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-zinc-100 text-zinc-600">
|
||
{d.priority}
|
||
</span>
|
||
<span className="text-[10px] text-[var(--ink-muted)]">
|
||
{clampTestCaseEstimateHours(d.categoryCode, d.estimateHours)}h
|
||
</span>
|
||
</div>
|
||
<pre className="mt-1 text-[11px] text-[var(--ink-soft)] whitespace-pre-wrap font-sans line-clamp-3">
|
||
{d.description}
|
||
</pre>
|
||
<div className="mt-1.5 flex flex-wrap gap-1">
|
||
{d.references.map((r, j) => (
|
||
<span
|
||
key={j}
|
||
className="text-[10px] px-1.5 py-0.5 rounded bg-purple-50 text-purple-700 border border-purple-200"
|
||
>
|
||
{r.label}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</label>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="flex items-center justify-between px-5 py-3 border-t border-[var(--line)]">
|
||
<div className="text-[12px] text-[var(--ink-muted)]">
|
||
已选 {selectedDevIdx.size} 个任务 + {selectedTcIdx.size} 个用例
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<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={handleAdopt}
|
||
disabled={submitting || submitted || (selectedDevIdx.size === 0 && selectedTcIdx.size === 0)}
|
||
className="h-8 px-4 rounded-lg text-[12px] font-medium bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50"
|
||
>
|
||
{submitted ? '✓ 已采纳' : submitting ? '采纳中...' : '采纳选中'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|