234 lines
11 KiB
TypeScript
234 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { Check, Clock3, Sparkles } from 'lucide-react';
|
||
import { formatDateTime } from '@/lib/format';
|
||
import type { Requirement } from '@/lib/requirement';
|
||
import type { RequirementCoverageStatus, VersionPlan, VersionPlanLog } from '@/lib/version-plan';
|
||
import {
|
||
getRequirementCoverage,
|
||
getRequirementCoverageStatus,
|
||
getRequirementCoverageSummary,
|
||
REQUIREMENT_COVERAGE_LABEL,
|
||
updateRequirementCoverage,
|
||
} from '@/lib/version-plan';
|
||
|
||
type RequirementOption = Pick<Requirement, 'id' | 'code' | 'title'> & { isHistorical?: boolean };
|
||
|
||
interface CoverageProps {
|
||
plan: VersionPlan;
|
||
requirements: RequirementOption[];
|
||
canEdit: boolean;
|
||
currentUserName: string;
|
||
onUpdate: (id: string, data: Partial<VersionPlan>) => void;
|
||
}
|
||
|
||
interface LogTimelineProps {
|
||
logs?: VersionPlanLog[];
|
||
className?: string;
|
||
}
|
||
|
||
const COVERAGE_STATUS_OPTIONS: RequirementCoverageStatus[] = ['partial', 'completed', 'not_started'];
|
||
|
||
const COVERAGE_BADGE_STYLE: Record<RequirementCoverageStatus, string> = {
|
||
not_started: 'border-zinc-200 bg-zinc-50 text-zinc-500',
|
||
partial: 'border-amber-200 bg-amber-50 text-amber-700',
|
||
completed: 'border-emerald-200 bg-emerald-50 text-emerald-700',
|
||
};
|
||
|
||
function getLogIcon(log: VersionPlanLog) {
|
||
if (log.type === 'ai_decompose') return <Sparkles className="h-3.5 w-3.5" />;
|
||
if (log.type === 'requirement_progress') return <Check className="h-3.5 w-3.5" />;
|
||
return <Clock3 className="h-3.5 w-3.5" />;
|
||
}
|
||
|
||
function getLogTone(log: VersionPlanLog): string {
|
||
if (log.aiStatus === 'error') return 'bg-red-50 text-red-700 ring-red-100';
|
||
if (log.type === 'ai_decompose') return 'bg-purple-50 text-purple-700 ring-purple-100';
|
||
if (log.coverageStatus === 'completed') return 'bg-emerald-50 text-emerald-700 ring-emerald-100';
|
||
if (log.coverageStatus === 'partial') return 'bg-amber-50 text-amber-700 ring-amber-100';
|
||
return 'bg-zinc-50 text-zinc-600 ring-zinc-100';
|
||
}
|
||
|
||
export function PlanRequirementCoveragePanel({ plan, requirements, canEdit, currentUserName, onUpdate }: CoverageProps) {
|
||
const [editingRequirementId, setEditingRequirementId] = useState<string | null>(null);
|
||
const [draftStatus, setDraftStatus] = useState<RequirementCoverageStatus>('partial');
|
||
const [completedContent, setCompletedContent] = useState('');
|
||
const [remainingContent, setRemainingContent] = useState('');
|
||
const summary = getRequirementCoverageSummary(plan);
|
||
|
||
if (requirements.length === 0) return null;
|
||
|
||
const openEditor = (req: RequirementOption) => {
|
||
const coverage = getRequirementCoverage(plan, req.id);
|
||
setEditingRequirementId(req.id);
|
||
setDraftStatus(coverage?.status === 'completed' ? 'completed' : coverage?.status === 'not_started' ? 'not_started' : 'partial');
|
||
setCompletedContent(coverage?.completedContent ?? '');
|
||
setRemainingContent(coverage?.remainingContent ?? '');
|
||
};
|
||
|
||
const closeEditor = () => {
|
||
setEditingRequirementId(null);
|
||
setCompletedContent('');
|
||
setRemainingContent('');
|
||
setDraftStatus('partial');
|
||
};
|
||
|
||
const canSave = draftStatus === 'not_started'
|
||
|| (draftStatus === 'completed' && completedContent.trim().length > 0)
|
||
|| (draftStatus === 'partial' && completedContent.trim().length > 0 && remainingContent.trim().length > 0);
|
||
|
||
const saveCoverage = (req: RequirementOption) => {
|
||
if (!canEdit || !canSave) return;
|
||
const patch = updateRequirementCoverage(plan, {
|
||
requirementId: req.id,
|
||
status: draftStatus,
|
||
completedContent: draftStatus === 'not_started' ? undefined : completedContent,
|
||
remainingContent: draftStatus === 'partial' ? remainingContent : undefined,
|
||
updatedBy: currentUserName,
|
||
requirementCode: req.code,
|
||
requirementTitle: req.title,
|
||
});
|
||
onUpdate(plan.id, patch);
|
||
closeEditor();
|
||
};
|
||
|
||
return (
|
||
<div className="mt-3 space-y-2">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<div className="text-[11px] font-semibold text-[var(--ink-muted)]">引用需求</div>
|
||
<div className="mt-0.5 text-[11px] text-[var(--ink-soft)]">
|
||
完全完成 {summary.completed} / {summary.total}
|
||
{summary.partial > 0 && <span className="ml-2 text-amber-700">部分完成 {summary.partial}</span>}
|
||
</div>
|
||
</div>
|
||
<span className="shrink-0 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{summary.percent}%</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--bg-subtle)]">
|
||
<div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${summary.percent}%` }} />
|
||
</div>
|
||
</div>
|
||
<div className="max-h-56 space-y-1 overflow-y-auto rounded-lg bg-[var(--bg-subtle)] p-2 pr-1">
|
||
{requirements.map((req) => {
|
||
const status = getRequirementCoverageStatus(plan, req.id);
|
||
const coverage = getRequirementCoverage(plan, req.id);
|
||
const isEditing = editingRequirementId === req.id;
|
||
return (
|
||
<div key={req.id} className="rounded-md px-2 py-1.5 hover:bg-[var(--bg-card)]">
|
||
<div className="flex min-w-0 items-start gap-2">
|
||
<span className={`mt-0.5 inline-flex shrink-0 items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium ${COVERAGE_BADGE_STYLE[status]}`}>
|
||
{REQUIREMENT_COVERAGE_LABEL[status]}
|
||
</span>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span className="shrink-0 font-mono text-[11px] text-[var(--ink-muted)]">{req.code}</span>
|
||
<span className="min-w-0 truncate text-[12px] font-medium text-[var(--ink)]" title={req.title}>{req.title}</span>
|
||
{req.isHistorical && <span className="shrink-0 rounded bg-orange-50 px-1.5 py-0.5 text-[10px] text-orange-600">历史</span>}
|
||
</div>
|
||
{(coverage?.completedContent || coverage?.remainingContent) && (
|
||
<div className="mt-1 space-y-0.5 text-[11px] leading-4 text-[var(--ink-soft)]">
|
||
{coverage.completedContent && <div className="line-clamp-2">已完成：{coverage.completedContent}</div>}
|
||
{coverage.remainingContent && <div className="line-clamp-2 text-amber-700">剩余：{coverage.remainingContent}</div>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{canEdit && (
|
||
<button
|
||
type="button"
|
||
onClick={() => isEditing ? closeEditor() : openEditor(req)}
|
||
className="shrink-0 rounded-md border border-[var(--line)] px-2 py-1 text-[11px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]"
|
||
>
|
||
{isEditing ? '收起' : '记录'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
{isEditing && (
|
||
<div className="mt-2 space-y-2 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] p-2">
|
||
<div className="grid grid-cols-3 gap-1.5">
|
||
{COVERAGE_STATUS_OPTIONS.map((statusOption) => (
|
||
<button
|
||
key={statusOption}
|
||
type="button"
|
||
onClick={() => setDraftStatus(statusOption)}
|
||
className={`h-7 rounded-md border text-[11px] font-medium transition-colors ${draftStatus === statusOption ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`}
|
||
>
|
||
{REQUIREMENT_COVERAGE_LABEL[statusOption]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{draftStatus !== 'not_started' && (
|
||
<textarea
|
||
value={completedContent}
|
||
onChange={(e) => setCompletedContent(e.target.value)}
|
||
rows={2}
|
||
placeholder="本次已完成的内容"
|
||
className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2 py-1.5 text-[12px] focus:border-[var(--accent)] focus:outline-none"
|
||
/>
|
||
)}
|
||
{draftStatus === 'partial' && (
|
||
<textarea
|
||
value={remainingContent}
|
||
onChange={(e) => setRemainingContent(e.target.value)}
|
||
rows={2}
|
||
placeholder="剩余未完成的内容"
|
||
className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2 py-1.5 text-[12px] focus:border-[var(--accent)] focus:outline-none"
|
||
/>
|
||
)}
|
||
<div className="flex justify-end gap-2">
|
||
<button type="button" onClick={closeEditor} className="h-7 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => saveCoverage(req)}
|
||
disabled={!canSave}
|
||
className="h-7 rounded-md bg-[var(--accent)] px-3 text-[11px] font-medium text-white hover:bg-[var(--accent-hover)] disabled:opacity-50"
|
||
>
|
||
保存记录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function PlanLogTimeline({ logs, className = '' }: LogTimelineProps) {
|
||
const sortedLogs = [...(logs ?? [])].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||
const frameClass = className || 'border-l border-[var(--line)] pl-4';
|
||
|
||
return (
|
||
<aside className={frameClass}>
|
||
<div className="flex items-center justify-between">
|
||
<div className="text-[11px] font-semibold text-[var(--ink-muted)]">日志</div>
|
||
<span className="text-[11px] tabular-nums text-[var(--ink-soft)]">{sortedLogs.length}</span>
|
||
</div>
|
||
{sortedLogs.length === 0 ? (
|
||
<div className="mt-4 rounded-lg bg-[var(--bg-subtle)] px-3 py-4 text-center text-[11px] text-[var(--ink-muted)]">暂无日志</div>
|
||
) : (
|
||
<div className="mt-3 max-h-80 space-y-3 overflow-y-auto pr-1">
|
||
{sortedLogs.map((log) => (
|
||
<div key={log.id} className="relative pl-5">
|
||
<span className={`absolute left-0 top-0 flex h-6 w-6 -translate-x-3 items-center justify-center rounded-full ring-4 ${getLogTone(log)}`}>
|
||
{getLogIcon(log)}
|
||
</span>
|
||
<div className="space-y-1">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="min-w-0 text-[12px] font-medium leading-5 text-[var(--ink)]">{log.title}</div>
|
||
<span className="shrink-0 text-[10px] text-[var(--ink-muted)]">{formatDateTime(log.createdAt)}</span>
|
||
</div>
|
||
<div className="text-[11px] text-[var(--ink-muted)]">{log.actor}</div>
|
||
{log.detail && <div className="whitespace-pre-wrap rounded-md bg-[var(--bg-subtle)] px-2 py-1.5 text-[11px] leading-4 text-[var(--ink-soft)]">{log.detail}</div>}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</aside>
|
||
);
|
||
}
|