wanzi/ftb-project-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(版本详情): 完善流程日志与需求覆盖

Browse Source
This commit is contained in:
Script Generator
2026-06-30 11:00:07 +08:00
parent d754585fe0
commit 1cd595c42e
38 changed files with 4123 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web/components/ActivityLogPanel.tsx Normal file
View File

@@ -0,0 +1,49 @@
'use client';
import { useEffect, useMemo } from 'react';
import { formatDateTime } from '@/lib/format';
import type { WorkActivitySourceType } from '@/lib/work-activity';
import { getEntityActivityLogEntries, type EntityActivityLogEntry } from '@/lib/entity-activity-log';
import { useWorkActivityStore } from '@/stores/useWorkActivityStore';
interface Props {
sourceType: WorkActivitySourceType;
sourceId: string;
legacyEntries?: EntityActivityLogEntry[];
title?: string;
}
export function ActivityLogPanel({ sourceType, sourceId, legacyEntries = [], title = '操作日志' }: Props) {
const { activities, fetchActivities } = useWorkActivityStore();
useEffect(() => {
fetchActivities();
}, [fetchActivities]);
const entries = useMemo(
() => getEntityActivityLogEntries(activities, sourceType, sourceId, legacyEntries),
[activities, sourceType, sourceId, legacyEntries],
);
return (
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
<div className="mb-3 text-[10px] uppercase tracking-wide text-[var(--ink-muted)]">{title}</div>
{entries.length === 0 ? (
<p className="text-[12px] text-[var(--ink-muted)]">暂无操作日志</p>
) : (
<div className="space-y-2.5">
{entries.map((entry) => (
<div key={entry.id} className="flex gap-2.5 text-[11px]">
<span className="w-[110px] shrink-0 tabular-nums text-[var(--ink-muted)]">{formatDateTime(entry.occurredAt)}</span>
<div className="min-w-0 flex-1">
<span className="font-medium text-[var(--ink)]">{entry.actorId || '系统'}</span>
<span className="text-[var(--ink-soft)]"> {entry.label}</span>
<div className="mt-0.5 truncate text-[var(--ink-muted)]">{entry.summary}</div>
</div>
</div>
))}
</div>
)}
</div>
);
}

41
apps/web/components/bug/BugDetailDrawer.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { X, Link2, ChevronRight, ArrowRightLeft } from 'lucide-react';
import { BugStatusBadge } from './BugStatusBadge';
import { ActivityLogPanel } from '@/components/ActivityLogPanel';
import { useBugStore } from '@/stores/useBugStore';
import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
@@ -11,6 +12,7 @@ import { useAuthStore } from '@/stores/useAuthStore';
import { BUG_ALLOWED_TRANSITIONS, BUG_STATUS_LABEL, BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
import { formatDateTime } from '@/lib/format';
import { isMemberReference, resolveMemberDisplayName } from '@/lib/member-system';
import type { EntityActivityLogEntry } from '@/lib/entity-activity-log';
import type { BugStatus } from '@/lib/bug';
const LOG_ACTION_LABEL: Record<string, string> = {
@@ -53,6 +55,21 @@ export function BugDetailDrawer({ bugId, onClose, contextLabel }: Props) {
const [transferTo, setTransferTo] = useState('');
const [transferRemark, setTransferRemark] = useState('');
const [lightboxSrc, setLightboxSrc] = useState<string | null>(null);
const legacyLogEntries = useMemo<EntityActivityLogEntry[]>(() => {
return (bug.logs || []).map((log) => {
const from = log.fromValue ? resolveMemberDisplayName(log.fromValue, members) : '';
const to = log.toValue ? resolveMemberDisplayName(log.toValue, members) : '';
const change = from && to ? `${from} → ${to}` : '';
const remark = log.remark ? `（${log.remark}）` : '';
return {
id: `bug-log-${log.id}`,
occurredAt: log.createdAt,
actorId: resolveMemberDisplayName(log.operator, members),
label: LOG_ACTION_LABEL[log.action] || log.action,
summary: [change, remark].filter(Boolean).join(' ') || bug.title,
};
});
}, [bug.logs, bug.title, members]);
const handleTransition = (to: BugStatus) => {
if (to === 'fixed') { setShowResolutionInput(true); return; }
@@ -201,27 +218,7 @@ export function BugDetailDrawer({ bugId, onClose, contextLabel }: Props) {
</div>
)}
{/* 操作日志 */}
{bug.logs && bug.logs.length > 0 && (
<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="space-y-2.5">
{[...bug.logs].reverse().map((log) => (
<div key={log.id} className="flex gap-2.5 text-[11px]">
<span className="text-[var(--ink-muted)] tabular-nums shrink-0 w-[110px]">{formatDateTime(log.createdAt)}</span>
<div className="flex-1">
<span className="font-medium text-[var(--ink)]">{resolveMemberDisplayName(log.operator, members)}</span>
<span className="text-[var(--ink-soft)]"> {LOG_ACTION_LABEL[log.action] || log.action}</span>
{log.fromValue && log.toValue && (
<span className="text-[var(--ink-muted)]"> {resolveMemberDisplayName(log.fromValue, members)} → {resolveMemberDisplayName(log.toValue, members)}</span>
)}
{log.remark && <span className="text-[var(--ink-muted)]"> ({log.remark})</span>}
</div>
</div>
))}
</div>
</div>
)}
<ActivityLogPanel sourceType="bug" sourceId={bug.id} legacyEntries={legacyLogEntries} />
</div>
</div>

38
apps/web/components/bug/BugRow.tsx
View File

@@ -27,20 +27,30 @@ function BugRowImpl({ bug, testCaseNo, onClick }: Props) {
const members = useMemberStore((s) => s.members);
const assigneeName = resolveMemberDisplayName(bug.assigneeId, members);
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 shrink-0 ${BUG_SEVERITY_COLOR[bug.severity]}`}>{BUG_SEVERITY_LABEL[bug.severity]}</span>
<BugStatusBadge status={bug.status} />
<span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-24 text-right shrink-0 whitespace-nowrap" title="计划修复时间">
{bug.plannedFixAt ? formatDateTimeShort(bug.plannedFixAt) : '待排期'}
</span>
{actualHours > 0 && (
<span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-28 text-right shrink-0 whitespace-nowrap">{formatWorkHours(actualHours)}</span>
)}
{testCaseNo && <span className="text-[10px] font-mono text-[var(--ink-muted)] w-14 text-right shrink-0">{testCaseNo}</span>}
<span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate shrink-0">{assigneeName}</span>
<div onClick={onClick} className="px-4 py-2 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0">
<div className="flex min-w-0 items-start gap-2">
<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${PRIORITY_DOT[bug.priority] || 'bg-zinc-300'}`} />
<span className="mt-0.5 w-16 shrink-0 text-[11px] font-mono text-[var(--ink-muted)]">{bug.bugNo}</span>
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-center gap-1.5">
<span className="truncate text-[13px] font-medium leading-5 text-[var(--ink)]">{bug.title}</span>
<span className="ml-auto inline-flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
<span className="tabular-nums whitespace-nowrap text-[var(--ink-muted)]" title="计划修复时间">
{bug.plannedFixAt ? formatDateTimeShort(bug.plannedFixAt) : '待排期'}
</span>
{actualHours > 0 && (
<span className="tabular-nums whitespace-nowrap text-[var(--ink-muted)]">实际 {formatWorkHours(actualHours)}</span>
)}
</span>
</div>
<div className="mt-1 flex min-w-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
<span className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] ${BUG_SEVERITY_COLOR[bug.severity]}`}>{BUG_SEVERITY_LABEL[bug.severity]}</span>
<BugStatusBadge status={bug.status} />
<span className="max-w-[120px] truncate whitespace-nowrap text-[var(--ink-soft)]">{assigneeName}</span>
{testCaseNo && <span className="font-mono text-[10px] text-[var(--ink-muted)]">{testCaseNo}</span>}
</div>
</div>
</div>
</div>
);
}

2
apps/web/components/bug/BugStatusBadge.tsx
View File

@@ -5,7 +5,7 @@ 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]}`}>
<span className={`inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium ${BUG_STATUS_COLOR[status]}`}>
{BUG_STATUS_LABEL[status]}
</span>
);

18
apps/web/components/dev-task/CategoryChip.tsx
View File

@@ -1,13 +1,25 @@
'use client';
import type { CSSProperties } from 'react';
import type { TaskCategory } from '@/lib/task-category';
export function CategoryChip({ category }: { category?: TaskCategory }) {
if (!category) return <span className="text-[11px] text-[var(--ink-muted)]">未分类</span>;
export function CategoryChip({ category, widthEm }: { category?: TaskCategory; widthEm?: number }) {
const widthStyle: CSSProperties = widthEm ? { width: `${widthEm}em` } : {};
if (!category) {
return (
<span
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium text-[var(--ink-muted)]"
style={widthStyle}
>
未分类
</span>
);
}
return (
<span
className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium"
style={{
...widthStyle,
backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
color: category.color || 'var(--ink-soft)',
}}

120
apps/web/components/dev-task/DevTaskDetailDrawer.tsx
View File

@@ -4,21 +4,26 @@ import { useState, useMemo } from 'react';
import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Play, Trash2, ArrowRightLeft, CalendarRange } from 'lucide-react';
import { StatusBadge } from './StatusBadge';
import { CategoryChip } from './CategoryChip';
import { ActivityLogPanel } from '@/components/ActivityLogPanel';
import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useWorkActivityStore } from '@/stores/useWorkActivityStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
import {
ALLOWED_TRANSITIONS,
DEV_TASK_STATUS_LABEL,
DEV_TASK_STATUS_COLOR,
canStartDevTask,
formatHours,
getEstimateHours,
getActualHours,
needsDevTaskClaim,
} from '@/lib/dev-task';
import { needsDelayReason } from '@/lib/dev-task-transitions';
import { formatShortTime } from '@/lib/work-hours';
import { calcWorkHours, formatShortTime, isoToLocal, localToISO } from '@/lib/work-hours';
import type { DevTaskStatus } from '@/lib/dev-task';
interface Props {
@@ -28,16 +33,32 @@ interface Props {
contextLabel?: string;
}
function defaultPlanStartLocal(): string {
const d = new Date();
d.setHours(9, 0, 0, 0);
return isoToLocal(d.toISOString());
}
function defaultPlanEndLocal(): string {
const d = new Date();
d.setHours(18, 0, 0, 0);
return isoToLocal(d.toISOString());
}
export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel }: Props) {
const { tasks, changeStatus, setBlocked, deleteTask, updateTask } = useDevTaskStore();
const addProgressNote = useWorkActivityStore((s) => s.addProgressNote);
const { categories } = useTaskCategoryStore();
const { requirements } = useRequirementStore();
const { members } = useMemberStore();
const user = useAuthStore((s) => s.user);
const [showTransfer, setShowTransfer] = useState(false);
const [transferTo, setTransferTo] = useState('');
const [showDelayInput, setShowDelayInput] = useState(false);
const [delayReason, setDelayReason] = useState('');
const [showPlanInput, setShowPlanInput] = useState(false);
const [planStartLocal, setPlanStartLocal] = useState('');
const [planEndLocal, setPlanEndLocal] = useState('');
const [progressNote, setProgressNote] = useState('');
const [progressBlocker, setProgressBlocker] = useState('');
const [progressHelperId, setProgressHelperId] = useState('');
@@ -61,8 +82,42 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
const actual = useMemo(() => getActualHours(task), [task]);
const overrun = actual > estimate && estimate > 0;
const requireDelay = task.status === 'todo' && needsDelayReason(task);
const currentUserName = user?.name || '';
const needsClaim = needsDevTaskClaim(task);
const startReady = canStartDevTask(task);
const visibleNextStatuses = nextStatuses.filter((status) => status !== 'in_progress' || startReady);
const planStartISO = localToISO(planStartLocal);
const planEndISO = localToISO(planEndLocal);
const planStartBeforeEnd = Boolean(planStartISO && planEndISO && planStartISO < planEndISO);
const planEstimateHours = planStartBeforeEnd ? calcWorkHours(planStartISO, planEndISO) : 0;
const openPlanInput = () => {
setPlanStartLocal(task.expectedStartAt ? isoToLocal(task.expectedStartAt) : defaultPlanStartLocal());
setPlanEndLocal(task.expectedEndAt ? isoToLocal(task.expectedEndAt) : defaultPlanEndLocal());
setShowPlanInput(true);
};
const handleSavePlan = () => {
const assigneeId = task.assigneeId || currentUserName;
if (!assigneeId) {
alert('领取前需要先登录或选择负责人');
return;
}
if (!planStartBeforeEnd || planEstimateHours <= 0 || !planStartISO || !planEndISO) return;
updateTask(task.id, {
assigneeId,
expectedStartAt: planStartISO,
expectedEndAt: planEndISO,
estimateHours: planEstimateHours,
});
setShowPlanInput(false);
};
const handleTransition = (to: DevTaskStatus) => {
if (to === 'in_progress' && !startReady) {
openPlanInput();
return;
}
if (to === 'in_progress' && requireDelay && !showDelayInput) {
setShowDelayInput(true);
return;
@@ -179,10 +234,10 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
)}
</div>
{nextStatuses.length > 0 && !showDelayInput && (
{visibleNextStatuses.length > 0 && !showDelayInput && (
<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) => (
{visibleNextStatuses.map((s) => (
<button key={s} onClick={() => handleTransition(s)} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] transition-colors">
{DEV_TASK_STATUS_LABEL[s]}
</button>
@@ -190,6 +245,61 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
</div>
)}
{task.status === 'todo' && !startReady && !showPlanInput && (
<div className="flex items-center gap-2 pt-1">
<button
onClick={openPlanInput}
disabled={needsClaim && !currentUserName}
className="h-8 px-4 rounded-lg text-[12px] font-medium bg-orange-500 text-white hover:bg-orange-600 disabled:opacity-50"
>
{needsClaim ? '领取并填写计划' : '填写计划'}
</button>
<span className="text-[11px] text-[var(--ink-muted)]">
{needsClaim ? '领取时必须填写预计开始和预计截止' : '开始开发前需要补齐预计开始和预计截止'}
</span>
</div>
)}
{showPlanInput && (
<div className="rounded-lg border border-orange-200 bg-orange-50 p-3 space-y-3">
<div className="text-[11px] font-medium text-orange-700">
{needsClaim ? '领取并填写计划' : '填写计划'}
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="mb-1 block text-[11px] text-orange-700">预计开始</label>
<WorkDateTimePicker
value={planStartLocal}
onChange={setPlanStartLocal}
placeholder="选择预计开始"
defaultHour={9}
className="bg-white"
/>
</div>
<div>
<label className="mb-1 block text-[11px] text-orange-700">预计截止</label>
<WorkDateTimePicker
value={planEndLocal}
onChange={setPlanEndLocal}
placeholder="选择预计截止"
defaultHour={18}
popoverAlign="right"
className="bg-white"
/>
</div>
</div>
<div className="flex items-center justify-between gap-2">
<span className="text-[11px] text-orange-700">
执行预估：{planEstimateHours > 0 ? formatHours(planEstimateHours) : '请选择有效起止时间'}
</span>
<div className="flex gap-2">
<button onClick={handleSavePlan} disabled={!planStartBeforeEnd || planEstimateHours <= 0} className="h-7 px-3 rounded text-[11px] font-medium bg-[var(--accent)] text-white disabled:opacity-50">保存</button>
<button onClick={() => setShowPlanInput(false)} className="h-7 px-2 text-[11px] text-orange-700">取消</button>
</div>
</div>
</div>
)}
{showDelayInput && (
<div className="rounded-lg border border-orange-200 bg-orange-50 p-3 space-y-2">
<div className="flex items-center gap-1.5 text-[11px] text-orange-700">
@@ -332,7 +442,7 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
<div className="flex items-center gap-2">
<User className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="text-[var(--ink-muted)]">负责人</span>
<span className="text-[var(--ink)] font-medium">{task.assigneeId}</span>
<span className={`font-medium ${needsClaim ? 'text-orange-600' : 'text-[var(--ink)]'}`}>{needsClaim ? '待领取' : task.assigneeId}</span>
</div>
<div className="flex items-center gap-2">
<span className="text-[var(--ink-muted)]">优先级</span>
@@ -351,6 +461,8 @@ export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose, contextLabel
)}
</div>
<ActivityLogPanel sourceType="dev_task" sourceId={task.id} />
{predecessors.length > 0 && (
<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>

72
apps/web/components/dev-task/DevTaskRow.tsx
View File

@@ -3,7 +3,7 @@
import { AlertTriangle } from 'lucide-react';
import { StatusBadge } from './StatusBadge';
import { CategoryChip } from './CategoryChip';
import { getEstimateHours, getActualHours } from '@/lib/dev-task';
import { getEstimateHours, getActualHours, needsDevTaskClaim } from '@/lib/dev-task';
import { formatShortTime, formatWorkHours } from '@/lib/work-hours';
import type { DevTask } from '@/lib/dev-task';
import type { TaskCategory } from '@/lib/task-category';
@@ -11,6 +11,7 @@ import type { TaskCategory } from '@/lib/task-category';
interface Props {
task: DevTask;
category?: TaskCategory;
categoryLabelWidthEm?: number;
onClick?: () => void;
}
@@ -45,37 +46,64 @@ function hoursText(task: DevTask, estimate: number, actual: number): { text: str
return { text: `${formatWorkHours(actual)} / ${formatWorkHours(estimate)}`, tone };
}
export function DevTaskRow({ task, category, onClick }: Props) {
export function DevTaskRow({ task, category, categoryLabelWidthEm, onClick }: Props) {
const estimate = getEstimateHours(task);
const actual = getActualHours(task);
const range = timeRangeText(task);
const hours = hoursText(task, estimate, actual);
const needsClaim = needsDevTaskClaim(task);
const labelWidthStyle = categoryLabelWidthEm ? { width: `${categoryLabelWidthEm}em` } : undefined;
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 ${task.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}
className={`px-4 py-2 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0 ${task.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}
>
<span className={`h-2 w-2 rounded-full shrink-0 ${PRIORITY_DOT[task.priority] || 'bg-zinc-300'}`} title={task.priority} />
<span className="text-[11px] font-mono text-[var(--ink-muted)] w-16 shrink-0">{task.taskNo}</span>
<div className="flex-1 min-w-0 flex items-center gap-1.5">
<span className="text-[13px] text-[var(--ink)] truncate">{task.title}</span>
{task.aiDraft && (
<span className="flex items-center gap-0.5 text-[10px] text-purple-600 bg-purple-100 px-1.5 py-0.5 rounded shrink-0" title="AI 拆解草案，编辑后会移除标记">
AI 草案
</span>
)}
{task.isBlocked && (
<span className="flex items-center gap-0.5 text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0" title={task.blockReason}>
<AlertTriangle className="h-2.5 w-2.5" />阻塞
</span>
)}
<div className="flex min-w-0 items-start gap-2">
<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${PRIORITY_DOT[task.priority] || 'bg-zinc-300'}`} title={task.priority} />
<span className="mt-0.5 w-16 shrink-0 text-[11px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-center gap-1.5">
<span className="truncate text-[13px] font-medium leading-5 text-[var(--ink)]">{task.title}</span>
<span className="ml-auto inline-flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
{range.text && (
<span className={`tabular-nums whitespace-nowrap ${range.tone}`} title={range.text}>{range.text}</span>
)}
<span className={`tabular-nums whitespace-nowrap ${hours.tone}`}>{hours.text}</span>
</span>
</div>
<div className="mt-1 flex min-w-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
{task.isBlocked && (
<span className="inline-flex h-5 shrink-0 items-center gap-0.5 whitespace-nowrap rounded bg-red-50 px-1.5 text-[10px] font-medium text-red-500" title={task.blockReason}>
<AlertTriangle className="h-2.5 w-2.5" />阻塞
</span>
)}
{task.aiDraft && (
<span
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded bg-purple-100 px-1.5 text-[10px] font-medium text-purple-600"
style={labelWidthStyle}
title="AI 拆解草案，编辑后会移除标记"
>
AI 草案
</span>
)}
{!needsClaim && (
<span className="max-w-[140px] truncate whitespace-nowrap text-[var(--ink-soft)]">负责人：{task.assigneeId}</span>
)}
{needsClaim ? (
<span
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded bg-orange-50 px-1.5 text-[10px] font-medium text-orange-600"
style={labelWidthStyle}
>
待领取
</span>
) : (
<StatusBadge status={task.status} widthEm={categoryLabelWidthEm} />
)}
<CategoryChip category={category} widthEm={categoryLabelWidthEm} />
</div>
</div>
</div>
<CategoryChip category={category} />
<StatusBadge status={task.status} />
<span className={`text-[11px] tabular-nums shrink-0 ${range.tone}`} title={range.text}>{range.text}</span>
<span className={`text-[11px] tabular-nums w-40 text-right shrink-0 whitespace-nowrap ${hours.tone}`}>{hours.text}</span>
<span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate shrink-0">{task.assigneeId}</span>
</div>
);
}

21
apps/web/components/dev-task/DevTaskTab.tsx
View File

@@ -111,6 +111,10 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
}, [paged]);
const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
const categoryLabelWidthEm = useMemo(
() => Math.max(4, ...categories.map((category) => category.name.length)) + 1,
[categories],
);
const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
const allTaskIds = useMemo(() => versionTasks.map((t) => t.id), [versionTasks]);
@@ -179,11 +183,16 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
const reqProgress = calcGroupProgress(reqTasks);
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={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) 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)]">{reqProgress}%</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={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) 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-2 px-4 py-2">
<span className="h-2 w-2 shrink-0" />
<span className="w-16 shrink-0 truncate text-[11px] font-mono text-[var(--ink-muted)]" title={req?.code}>{req?.code}</span>
<span className="min-w-0 flex-1 truncate text-[12px] font-medium text-[var(--ink)]">{req?.title}</span>
<span className="shrink-0 text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
</div>
</div>
{reqTasks.map((t) => (
<div key={t.id} className="flex items-center">
@@ -191,7 +200,7 @@ export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props
<input type="checkbox" checked={selectedIds.has(t.id)} onChange={() => toggleSelect(t.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
</div>
<div className="flex-1 min-w-0">
<DevTaskRow task={t} category={categoryMap.get(t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
<DevTaskRow task={t} category={categoryMap.get(t.categoryId)} categoryLabelWidthEm={categoryLabelWidthEm} onClick={() => setSelectedTaskId(t.id)} />
</div>
</div>
))}

7
apps/web/components/dev-task/StatusBadge.tsx
View File

@@ -3,9 +3,12 @@
import { DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR } from '@/lib/dev-task';
import type { DevTaskStatus } from '@/lib/dev-task';
export function StatusBadge({ status }: { status: DevTaskStatus }) {
export function StatusBadge({ status, widthEm }: { status: DevTaskStatus; widthEm?: number }) {
return (
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}>
<span
className={`inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}
style={widthEm ? { width: `${widthEm}em` } : undefined}
>
{DEV_TASK_STATUS_LABEL[status]}
</span>
);

45
apps/web/components/test-case/TestCaseCreateModal.tsx
View File

@@ -26,6 +26,12 @@ function defaultPlannedTestLocal(): string {
return isoToLocal(d.toISOString());
}
function defaultPlannedEndLocal(): string {
const d = new Date();
d.setHours(10, 0, 0, 0);
return isoToLocal(d.toISOString());
}
export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClose }: Props) {
const { createTestCase } = useTestCaseStore();
const { requirements } = useRequirementStore();
@@ -49,6 +55,7 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
);
const [estimateHours, setEstimateHours] = useState(0.5);
const [plannedTestLocal, setPlannedTestLocal] = useState(defaultPlannedTestLocal);
const [plannedEndLocal, setPlannedEndLocal] = useState(defaultPlannedEndLocal);
const [assigneeId, setAssigneeId] = useState(user?.name || '');
const [description, setDescription] = useState('');
const [prototypeNotes, setPrototypeNotes] = useState('');
@@ -69,7 +76,9 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
const normalizedEstimateHours = clampTestCaseEstimateHours(selectedCategory?.code, estimateHours);
const plannedTestAt = localToISO(plannedTestLocal);
const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0 && Boolean(plannedTestAt);
const plannedEndAt = localToISO(plannedEndLocal);
const hasValidPlan = Boolean(plannedTestAt && plannedEndAt && plannedEndAt > plannedTestAt);
const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0 && hasValidPlan;
const handleSubmit = () => {
if (!canSubmit) return;
@@ -92,6 +101,7 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
priority,
estimateHours: normalizedEstimateHours,
plannedTestAt,
plannedEndAt,
assigneeId: assigneeId || undefined,
references: references.length > 0 ? references : undefined,
createdBy: user?.name || '系统',
@@ -154,15 +164,32 @@ export function TestCaseCreateModal({ versionId, requirementIds, roundNo, onClos
</select>
</div>
</div>
<div>
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划测试时间 *</label>
<WorkDateTimePicker
value={plannedTestLocal}
onChange={setPlannedTestLocal}
placeholder="选择计划测试时间"
defaultHour={9}
/>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划开始 *</label>
<WorkDateTimePicker
value={plannedTestLocal}
onChange={setPlannedTestLocal}
placeholder="选择计划开始时间"
defaultHour={9}
/>
</div>
<div>
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">计划结束 *</label>
<WorkDateTimePicker
value={plannedEndLocal}
onChange={setPlannedEndLocal}
placeholder="选择计划结束时间"
defaultHour={10}
popoverAlign="right"
/>
</div>
</div>
{!hasValidPlan && plannedTestLocal && plannedEndLocal && (
<div className="rounded-lg border border-amber-200 bg-amber-50 p-2 text-[11px] text-amber-700">
计划开始必须早于计划结束
</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. 操作步骤...&#10;2. 预期结果..." />

125
apps/web/components/test-case/TestCaseDetailDrawer.tsx
View File

@@ -4,14 +4,17 @@ import { useState } from 'react';
import { X, AlertTriangle, Link2, ChevronRight, Bug as BugIcon, Trash2, ArrowRightLeft } from 'lucide-react';
import { TestCaseStatusBadge } from './TestCaseStatusBadge';
import { BugStatusBadge } from '@/components/bug/BugStatusBadge';
import { ActivityLogPanel } from '@/components/ActivityLogPanel';
import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useBugStore } from '@/stores/useBugStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
import { CategoryChip } from '@/components/dev-task/CategoryChip';
import { TC_ALLOWED_TRANSITIONS, TEST_CASE_STATUS_LABEL, getTestCaseActualHours } from '@/lib/test-case';
import { formatWorkHours } from '@/lib/work-hours';
import { TC_ALLOWED_TRANSITIONS, TEST_CASE_STATUS_LABEL, canStartTestCase, getTestCaseActualHours, needsTestCaseClaim } from '@/lib/test-case';
import { calcWorkHours, formatWorkHours, isoToLocal, localToISO } from '@/lib/work-hours';
import { formatDateTime } from '@/lib/format';
import { BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
import type { TestCaseStatus } from '@/lib/test-case';
@@ -23,14 +26,30 @@ interface Props {
contextLabel?: string;
}
function defaultPlanStartLocal(): string {
const d = new Date();
d.setHours(9, 0, 0, 0);
return isoToLocal(d.toISOString());
}
function defaultPlanEndLocal(): string {
const d = new Date();
d.setHours(10, 0, 0, 0);
return isoToLocal(d.toISOString());
}
export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, contextLabel }: Props) {
const { testCases, changeStatus, deleteTestCase, updateTestCase } = useTestCaseStore();
const { bugs } = useBugStore();
const { requirements } = useRequirementStore();
const { members } = useMemberStore();
const { categories } = useTaskCategoryStore();
const user = useAuthStore((s) => s.user);
const [showTransfer, setShowTransfer] = useState(false);
const [transferTo, setTransferTo] = useState('');
const [showPlanInput, setShowPlanInput] = useState(false);
const [planStartLocal, setPlanStartLocal] = useState('');
const [planEndLocal, setPlanEndLocal] = useState('');
const tc = testCases.find((c) => c.id === testCaseId);
if (!tc) return null;
@@ -42,6 +61,39 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
const executorEstimateHours = typeof tc.estimateHours === 'number' && tc.estimateHours > 0 ? tc.estimateHours : undefined;
const aiEstimateHours = typeof tc.aiEstimateHours === 'number' && tc.aiEstimateHours > 0 ? tc.aiEstimateHours : undefined;
const actualHours = getTestCaseActualHours(tc);
const planDisplay = tc.plannedTestAt && tc.plannedEndAt
? `${formatDateTime(tc.plannedTestAt)} → ${formatDateTime(tc.plannedEndAt)}`
: tc.plannedTestAt ? formatDateTime(tc.plannedTestAt) : '-';
const currentUserName = user?.name || '';
const needsClaim = needsTestCaseClaim(tc);
const startReady = canStartTestCase(tc);
const visibleNextStatuses = nextStatuses.filter((status) => status !== 'running' || startReady);
const planStartISO = localToISO(planStartLocal);
const planEndISO = localToISO(planEndLocal);
const planStartBeforeEnd = Boolean(planStartISO && planEndISO && planEndISO > planStartISO);
const planEstimateHours = planStartBeforeEnd ? calcWorkHours(planStartISO, planEndISO) : 0;
const openPlanInput = () => {
setPlanStartLocal(tc.plannedTestAt ? isoToLocal(tc.plannedTestAt) : defaultPlanStartLocal());
setPlanEndLocal(tc.plannedEndAt ? isoToLocal(tc.plannedEndAt) : defaultPlanEndLocal());
setShowPlanInput(true);
};
const handleSavePlan = () => {
const assigneeId = tc.assigneeId || currentUserName;
if (!assigneeId) {
alert('领取前需要先登录或选择负责人');
return;
}
if (!planStartBeforeEnd || planEstimateHours <= 0 || !planStartISO || !planEndISO) return;
updateTestCase(tc.id, {
assigneeId,
plannedTestAt: planStartISO,
plannedEndAt: planEndISO,
estimateHours: planEstimateHours,
});
setShowPlanInput(false);
};
const [failReason, setFailReason] = useState('');
const [blockReason, setBlockReason] = useState('');
@@ -49,6 +101,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
const [showBlockInput, setShowBlockInput] = useState(false);
const handleTransition = (to: TestCaseStatus) => {
if (to === 'running' && !startReady) {
openPlanInput();
return;
}
if (to === 'failed') { setShowFailInput(true); return; }
if (to === 'blocked') { setShowBlockInput(true); return; }
changeStatus(tc.id, to);
@@ -122,10 +178,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
{tc.executedAt && <span className="text-[11px] text-[var(--ink-muted)]">执行于 {tc.executedAt}</span>}
</div>
{nextStatuses.length > 0 && !showFailInput && !showBlockInput && (
{visibleNextStatuses.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) => (
{visibleNextStatuses.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>
@@ -133,6 +189,61 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
</div>
)}
{tc.status === 'pending' && !startReady && !showPlanInput && (
<div className="flex items-center gap-2 pt-1">
<button
onClick={openPlanInput}
disabled={needsClaim && !currentUserName}
className="h-8 px-4 rounded-lg text-[12px] font-medium bg-orange-500 text-white hover:bg-orange-600 disabled:opacity-50"
>
{needsClaim ? '领取并填写计划' : '填写计划'}
</button>
<span className="text-[11px] text-[var(--ink-muted)]">
{needsClaim ? '领取时必须填写计划开始和计划结束' : '开始测试前需要补齐计划开始和计划结束'}
</span>
</div>
)}
{showPlanInput && (
<div className="rounded-lg border border-orange-200 bg-orange-50 p-3 space-y-3">
<div className="text-[11px] font-medium text-orange-700">
{needsClaim ? '领取并填写计划' : '填写计划'}
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="mb-1 block text-[11px] text-orange-700">计划开始</label>
<WorkDateTimePicker
value={planStartLocal}
onChange={setPlanStartLocal}
placeholder="选择计划开始"
defaultHour={9}
className="bg-white"
/>
</div>
<div>
<label className="mb-1 block text-[11px] text-orange-700">计划结束</label>
<WorkDateTimePicker
value={planEndLocal}
onChange={setPlanEndLocal}
placeholder="选择计划结束"
defaultHour={10}
popoverAlign="right"
className="bg-white"
/>
</div>
</div>
<div className="flex items-center justify-between gap-2">
<span className="text-[11px] text-orange-700">
执行预估：{planEstimateHours > 0 ? formatWorkHours(planEstimateHours) : '请选择有效起止时间'}
</span>
<div className="flex gap-2">
<button onClick={handleSavePlan} disabled={!planStartBeforeEnd || planEstimateHours <= 0} className="h-7 px-3 rounded text-[11px] font-medium bg-[var(--accent)] text-white disabled:opacity-50">保存</button>
<button onClick={() => setShowPlanInput(false)} className="h-7 px-2 text-[11px] text-orange-700">取消</button>
</div>
</div>
</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 />
@@ -157,10 +268,10 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
<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.plannedTestAt ? formatDateTime(tc.plannedTestAt) : '待排期'}</span></div>
<div><span className="text-[var(--ink-muted)]">计划测试：</span><span className="text-[var(--ink)] font-medium">{planDisplay}</span></div>
<div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)] font-medium">{tc.priority}</span></div>
<div className="flex items-center gap-1.5"><span className="text-[var(--ink-muted)]">任务类型：</span><CategoryChip category={category} /></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={`font-medium ${needsClaim ? 'text-orange-600' : 'text-[var(--ink)]'}`}>{needsClaim ? '待领取' : tc.assigneeId}</span></div>
<div><span className="text-[var(--ink-muted)]">AI 预估：</span><span className="text-[var(--ink)] font-medium">{aiEstimateHours ? formatWorkHours(aiEstimateHours) : '—'}</span></div>
<div><span className="text-[var(--ink-muted)]">执行预估：</span><span className="text-[var(--ink)] font-medium">{executorEstimateHours ? formatWorkHours(executorEstimateHours) : '待负责人填写'}</span></div>
<div><span className="text-[var(--ink-muted)]">创建人：</span><span className="text-[var(--ink)]">{tc.createdBy}</span></div>
@@ -204,6 +315,8 @@ export function TestCaseDetailDrawer({ testCaseId, onClose, onCreateBug, context
</div>
)}
</div>
<ActivityLogPanel sourceType="test_case" sourceId={tc.id} />
</div>
</div>
</div>

96
apps/web/components/test-case/TestCaseRow.tsx
View File

@@ -2,7 +2,7 @@
import { memo } from 'react';
import { TestCaseStatusBadge } from './TestCaseStatusBadge';
import { getTestCaseActualHours, getTestCaseEstimateHours } from '@/lib/test-case';
import { getTestCaseActualHours, getTestCaseEstimateHours, needsTestCaseClaim } from '@/lib/test-case';
import { formatWorkHours } from '@/lib/work-hours';
import { formatDateTimeShort } from '@/lib/format';
import type { TestCase } from '@/lib/test-case';
@@ -11,6 +11,7 @@ import type { TaskCategory } from '@/lib/task-category';
interface Props {
testCase: TestCase;
category?: TaskCategory;
categoryLabelWidthEm?: number;
bugCount: number;
onClick?: () => void;
}
@@ -22,45 +23,74 @@ const PRIORITY_DOT: Record<string, string> = {
P3: 'bg-zinc-300',
};
function TestCaseRowImpl({ testCase, category, bugCount, onClick }: Props) {
function TestCaseRowImpl({ testCase, category, categoryLabelWidthEm, bugCount, onClick }: Props) {
const estimateHours = getTestCaseEstimateHours(testCase);
const actualHours = getTestCaseActualHours(testCase);
const needsClaim = needsTestCaseClaim(testCase);
const labelWidthStyle = categoryLabelWidthEm ? { width: `${categoryLabelWidthEm}em` } : undefined;
const hasExecutorEstimate = typeof testCase.estimateHours === 'number' && testCase.estimateHours > 0;
const hasAiEstimate = typeof testCase.aiEstimateHours === 'number' && testCase.aiEstimateHours > 0;
const estimatePrefix = hasExecutorEstimate ? '执行预' : hasAiEstimate ? 'AI预' : '预';
const planText = testCase.plannedTestAt && testCase.plannedEndAt
? `${formatDateTimeShort(testCase.plannedTestAt)} → ${formatDateTimeShort(testCase.plannedEndAt)}`
: testCase.plannedTestAt ? formatDateTimeShort(testCase.plannedTestAt) : '';
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 ${testCase.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}>
<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="inline-flex h-5 w-24 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap"
style={{
backgroundColor: category?.color ? `${category.color}15` : 'var(--bg-subtle)',
color: category?.color || 'var(--ink-soft)',
}}
title={category?.name || '未分类'}
>
{category?.name || '未分类'}
</span>
<div className="flex-1 min-w-0 flex items-center gap-1.5">
<span className="text-[13px] text-[var(--ink)] truncate">{testCase.title}</span>
{testCase.aiDraft && (
<span className="text-[10px] text-purple-600 bg-purple-100 px-1.5 py-0.5 rounded shrink-0" title="AI 拆解草案，编辑后会移除标记">
AI 草案
</span>
)}
<div onClick={onClick} className={`px-4 py-2 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0 ${testCase.aiDraft ? 'border-l-2 border-l-purple-400 bg-purple-50/30' : ''}`}>
<div className="flex min-w-0 items-start gap-2">
<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${PRIORITY_DOT[testCase.priority] || 'bg-zinc-300'}`} />
<span className="mt-0.5 w-14 shrink-0 text-[11px] font-mono text-[var(--ink-muted)]">{testCase.caseNo}</span>
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-center gap-1.5">
<span className="truncate text-[13px] font-medium leading-5 text-[var(--ink)]">{testCase.title}</span>
<span className="ml-auto inline-flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
{planText && (
<span className="tabular-nums whitespace-nowrap text-[var(--ink-muted)]" title="计划测试时间">{planText}</span>
)}
<span className="tabular-nums whitespace-nowrap text-[var(--ink-muted)]">
{actualHours > 0 ? `${formatWorkHours(actualHours)} / ${formatWorkHours(estimateHours)}` : `${estimatePrefix} ${formatWorkHours(estimateHours)}`}
</span>
</span>
</div>
<div className="mt-1 flex min-w-0 flex-wrap items-center justify-end gap-x-2.5 gap-y-1 text-[11px]">
{bugCount > 0 && (
<span className="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded bg-red-50 px-1.5 text-[10px] font-medium text-red-500">{bugCount} Bug</span>
)}
{testCase.aiDraft && (
<span
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded bg-purple-100 px-1.5 text-[10px] font-medium text-purple-600"
style={labelWidthStyle}
title="AI 拆解草案，编辑后会移除标记"
>
AI 草案
</span>
)}
{!needsClaim && (
<span className="max-w-[140px] truncate whitespace-nowrap text-[var(--ink-soft)]">负责人：{testCase.assigneeId}</span>
)}
{needsClaim ? (
<span
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded bg-orange-50 px-1.5 text-[10px] font-medium text-orange-600"
style={labelWidthStyle}
>
待领取
</span>
) : (
<TestCaseStatusBadge status={testCase.status} widthEm={categoryLabelWidthEm} />
)}
<span
className="inline-flex h-5 shrink-0 items-center justify-center rounded px-1.5 text-[10px] font-medium whitespace-nowrap"
style={{
...(categoryLabelWidthEm ? { width: `${categoryLabelWidthEm}em` } : {}),
backgroundColor: category?.color ? `${category.color}15` : 'var(--bg-subtle)',
color: category?.color || 'var(--ink-soft)',
}}
title={category?.name || '未分类'}
>
{category?.name || '未分类'}
</span>
</div>
</div>
</div>
{bugCount > 0 && (
<span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{bugCount} Bug</span>
)}
<TestCaseStatusBadge status={testCase.status} />
<span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-24 text-right shrink-0 whitespace-nowrap" title="计划测试时间">
{testCase.plannedTestAt ? formatDateTimeShort(testCase.plannedTestAt) : '待排期'}
</span>
<span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-32 text-right shrink-0 whitespace-nowrap">
{actualHours > 0 ? `${formatWorkHours(actualHours)} / ${formatWorkHours(estimateHours)}` : `${estimatePrefix} ${formatWorkHours(estimateHours)}`}
</span>
<span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate shrink-0">{testCase.assigneeId || '-'}</span>
</div>
);
}

7
apps/web/components/test-case/TestCaseStatusBadge.tsx
View File

@@ -3,9 +3,12 @@
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 }) {
export function TestCaseStatusBadge({ status, widthEm }: { status: TestCaseStatus; widthEm?: number }) {
return (
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${TEST_CASE_STATUS_COLOR[status]}`}>
<span
className={`inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium ${TEST_CASE_STATUS_COLOR[status]}`}
style={widthEm ? { width: `${widthEm}em` } : undefined}
>
{TEST_CASE_STATUS_LABEL[status]}
</span>
);

16
apps/web/components/test-case/TestCaseTab.tsx
View File

@@ -152,6 +152,10 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
const categoryLabelWidthEm = useMemo(
() => Math.max(4, ...categories.map((category) => category.name.length)) + 1,
[categories],
);
const bugCountByCase = useMemo(() => {
const map = new Map<string, number>();
for (const b of versionBugs) map.set(b.testCaseId, (map.get(b.testCaseId) ?? 0) + 1);
@@ -230,21 +234,19 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
<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">
<div className="flex flex-1 min-w-0 items-center gap-2 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 ${
<span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title || '未关联需求'}</span>
{deliveryStatus && (
<span className={`inline-flex h-5 w-14 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>
@@ -254,7 +256,7 @@ export function TestCaseTab({ versionId, requirementIds }: Props) {
<input type="checkbox" checked={selectedIds.has(c.id)} onChange={() => toggleSelect(c.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
</div>
<div className="flex-1 min-w-0">
<TestCaseRow testCase={c} category={categoryMap.get(c.categoryId)} bugCount={bugCountByCase.get(c.id) ?? 0} onClick={() => setSelectedCaseId(c.id)} />
<TestCaseRow testCase={c} category={categoryMap.get(c.categoryId)} categoryLabelWidthEm={categoryLabelWidthEm} bugCount={bugCountByCase.get(c.id) ?? 0} onClick={() => setSelectedCaseId(c.id)} />
</div>
</div>
))}

26
apps/web/components/version/AiDecomposeButton.tsx
View File

@@ -2,6 +2,7 @@
import { useEffect, useRef, useState } from 'react';
import { Sparkles, Loader2, AlertCircle, RotateCw } from 'lucide-react';
import { appendPlanLog } from '@/lib/version-plan';
import type { VersionPlan } from '@/lib/version-plan';
import type { VersionWithContext } from '@/lib/derive';
import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
@@ -102,6 +103,23 @@ export function AiDecomposeButton({ plan, version }: Props) {
return '任务和用例';
};
const appendAiLog = (
target: AgentDecomposeTarget,
status: 'started' | 'completed' | 'error',
detail?: string,
) => {
const currentPlan = useVersionPlanStore.getState().plans.find((item) => item.id === plan.id) ?? plan;
const statusText = status === 'started' ? '已触发' : status === 'completed' ? '已完成' : '失败';
return appendPlanLog(currentPlan, {
type: 'ai_decompose',
actor: user?.name ?? plan.owner,
title: `AI 拆解${targetText(target)}${statusText}`,
detail,
aiTarget: target,
aiStatus: status,
});
};
const handleClick = async (target: AgentDecomposeTarget) => {
if (loading) return;
// 即便 persistStatus 是 in_progress，只要超过阈值就允许重新点
@@ -117,6 +135,7 @@ export function AiDecomposeButton({ plan, version }: Props) {
aiDecomposeAt: new Date().toISOString(),
aiDecomposeTarget: target,
aiDecomposeError: undefined,
logs: appendAiLog(target, 'started'),
});
const members = (version.members ?? []).map((m) => ({
@@ -144,6 +163,7 @@ export function AiDecomposeButton({ plan, version }: Props) {
aiDecomposeStatus: 'error',
aiDecomposeTarget: target,
aiDecomposeError: resp.error,
logs: appendAiLog(target, 'error', resp.error),
});
} else {
const targetFilteredResult = filterDecomposeResultByTarget(resp.result, target);
@@ -166,6 +186,11 @@ export function AiDecomposeButton({ plan, version }: Props) {
aiDecomposeStatus: 'completed',
aiDecomposeTarget: target,
aiDecomposeError: undefined,
logs: appendAiLog(
target,
'completed',
`生成开发任务 ${deduped.result.devTaskDrafts.length} 条，测试用例 ${deduped.result.testCaseDrafts.length} 条。已过滤重复开发任务 ${deduped.removedDevTaskCount} 条，重复测试用例 ${deduped.removedTestCaseCount} 条。`,
),
});
}
} catch (e: any) {
@@ -174,6 +199,7 @@ export function AiDecomposeButton({ plan, version }: Props) {
aiDecomposeStatus: 'error',
aiDecomposeTarget: target,
aiDecomposeError: msg,
logs: appendAiLog(target, 'error', msg),
});
} finally {
setActiveTarget(null);

46
apps/web/components/version/PlanDetailDrawer.tsx
View File

@@ -5,9 +5,10 @@ import { X, Check, Link2, FileUp, ExternalLink, Play, ArrowRightLeft } from 'luc
import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { useAuthStore } from '@/stores/useAuthStore';
import {
calcPlanProgress,
calcLinkedReqProgress,
getRequirementCoverageSummary,
PRODUCT_PLAN_KIND_LABEL,
PRODUCT_PLAN_REVIEW_FAILURE_OPTIONS,
PRODUCT_PLAN_REVIEW_RESULT_LABEL,
@@ -16,6 +17,7 @@ import { formatDateTime } from '@/lib/format';
import type { PlanTask, ProductPlanKind, ProductPlanReviewFailureType, ProductPlanReviewResult, VersionPlan } from '@/lib/version-plan';
import { canEditPlanRequirementCoverage, canTogglePlanChecklist, getPlanCompletionState } from '@/lib/version-plan-workflow';
import type { PlanResultPayload } from '@/lib/version-plan-workflow';
import { PlanLogTimeline, PlanRequirementCoveragePanel } from './PlanRequirementCoveragePanel';
interface Props {
planId: string;
@@ -49,6 +51,7 @@ export function PlanDetailDrawer({ planId, onClose, contextLabel }: Props) {
const { plans, updatePlan, completePlan } = useVersionPlanStore();
const { requirements } = useRequirementStore();
const { members } = useMemberStore();
const user = useAuthStore((s) => s.user);
const [showTransfer, setShowTransfer] = useState(false);
const [transferTo, setTransferTo] = useState('');
const [resultType, setResultType] = useState<'link' | 'file'>('link');
@@ -67,10 +70,11 @@ export function PlanDetailDrawer({ planId, onClose, contextLabel }: Props) {
const completionState = getPlanCompletionState(plan);
const isResearch = plan.type === 'research';
const progress = isResearch ? calcPlanProgress(plan.tasks) : calcLinkedReqProgress(plan.linkedRequirementIds, plan.completedRequirementIds);
const progress = isResearch ? calcPlanProgress(plan.tasks) : getRequirementCoverageSummary(plan).percent;
const linkedReqs = (plan.linkedRequirementIds || []).map((id) => requirements.find((r) => r.id === id)).filter(Boolean) as { id: string; code: string; title: string }[];
const canToggle = canTogglePlanChecklist(plan);
const canEditCoverage = canEditPlanRequirementCoverage(plan);
const currentUserName = user?.name ?? plan.owner;
const productPlanKind = plan.type === 'product' ? getProductPlanKind(plan) : undefined;
const isProductDesignPlan = productPlanKind === 'design';
const isProductReviewPlan = productPlanKind === 'review';
@@ -82,13 +86,6 @@ export function PlanDetailDrawer({ planId, onClose, contextLabel }: Props) {
updatePlan(plan.id, { tasks: updatedTasks });
};
const handleToggleReq = (reqId: string) => {
if (!canEditCoverage) return;
const current = plan.completedRequirementIds || [];
const next = current.includes(reqId) ? current.filter((id) => id !== reqId) : [...current, reqId];
updatePlan(plan.id, { completedRequirementIds: next });
};
const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
@@ -235,32 +232,25 @@ export function PlanDetailDrawer({ planId, onClose, contextLabel }: Props) {
</div>
)}
{/* Product/UI: Linked Requirements */}
{linkedReqs.length > 0 && (
<div className="space-y-1.5">
<div className="text-[11px] font-medium text-[var(--ink-muted)]">关联需求</div>
{linkedReqs.map((req) => {
const isDone = (plan.completedRequirementIds || []).includes(req.id);
return (
<div key={req.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-[var(--bg-subtle)]">
<button
disabled={!canEditCoverage}
onClick={() => handleToggleReq(req.id)}
className={`h-4 w-4 rounded border flex items-center justify-center shrink-0 transition-colors ${!canEditCoverage ? 'opacity-40 cursor-not-allowed' : ''} ${isDone ? 'bg-[var(--accent)] border-[var(--accent)]' : 'border-[var(--line)]'}`}
>
{isDone && <Check className="h-2.5 w-2.5 text-white" strokeWidth={3} />}
</button>
<span className="text-[11px] font-mono text-[var(--ink-muted)]">{req.code}</span>
<span className={`flex-1 text-[12px] ${isDone ? 'line-through text-[var(--ink-muted)]' : 'text-[var(--ink)]'}`}>{req.title}</span>
</div>
);
})}
<div>
<PlanRequirementCoveragePanel
plan={plan}
requirements={linkedReqs}
canEdit={canEditCoverage}
currentUserName={currentUserName}
onUpdate={updatePlan}
/>
{plan.status === 'in_progress' && !completionState.canSubmitResult && (
<p className="pt-1 text-[11px] text-[var(--ink-muted)]">还不能提交成果：{completionState.missingReasons.join('、')}</p>
)}
</div>
)}
{!isResearch && (
<PlanLogTimeline logs={plan.logs} className="border-l-0 border-t border-[var(--line)] pt-4 pl-0" />
)}
{/* Result */}
{plan.status === 'completed' && plan.resultUrl && (
<div className="rounded-lg bg-[var(--bg-subtle)] p-3">

233
apps/web/components/version/PlanRequirementCoveragePanel.tsx Normal file
View File

@@ -0,0 +1,233 @@
'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>
);
}

60
apps/web/components/version/PlanTab.tsx
View File

@@ -8,7 +8,6 @@ import {
formatDuration,
calcTotalDuration,
calcPlanProgress,
calcLinkedReqProgress,
sortPlansNewestFirst,
PRODUCT_PLAN_KIND_LABEL,
PRODUCT_PLAN_REVIEW_FAILURE_OPTIONS,
@@ -18,6 +17,7 @@ import { formatDateTime } from '@/lib/format';
import { FieldError } from '@/components/FieldError';
import { WorkDateTimePicker } from '@/components/WorkDateTimePicker';
import { AiDecomposeButton } from './AiDecomposeButton';
import { PlanLogTimeline, PlanRequirementCoveragePanel } from './PlanRequirementCoveragePanel';
import type { VersionWithContext } from '@/lib/derive';
import type { Requirement } from '@/lib/requirement';
import { mergeSelectedRequirementOptions } from '@/lib/requirement-selector';
@@ -119,6 +119,8 @@ export function PlanTab({ plans, versionId, version, versionDeadline, currentUse
}
return (
<div key={plan.id} className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4 shadow-[var(--shadow-sm)]">
<div className={plan.type === 'research' ? '' : 'grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]'}>
<div className="min-w-0">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2">
@@ -229,48 +231,14 @@ export function PlanTab({ plans, versionId, version, versionDeadline, currentUse
</div>
</div>
)}
{/* 关联需求 */}
{plan.linkedRequirementIds && plan.linkedRequirementIds.length > 0 && requirementOptions.length > 0 && (
<div className="mt-3 space-y-2">
<div className="flex items-center justify-between gap-3">
<div>
<div className="text-[11px] font-medium text-[var(--ink-muted)]">引用需求</div>
<div className="mt-0.5 text-[11px] text-[var(--ink-soft)]">
已覆盖 {(plan.completedRequirementIds || []).filter((id) => plan.linkedRequirementIds?.includes(id)).length} / {plan.linkedRequirementIds.length}
</div>
</div>
<span className="shrink-0 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{calcLinkedReqProgress(plan.linkedRequirementIds, plan.completedRequirementIds)}%</span>
</div>
<div className="flex items-center gap-2">
<div className="flex-1 h-1.5 rounded-full bg-[var(--bg-subtle)] overflow-hidden">
<div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${calcLinkedReqProgress(plan.linkedRequirementIds, plan.completedRequirementIds)}%` }} />
</div>
</div>
<div className="max-h-44 space-y-1 overflow-y-auto rounded-lg bg-[var(--bg-subtle)] p-2 pr-1">
{plan.linkedRequirementIds.map((rid) => {
const req = requirementOptions.find((r) => r.id === rid);
const isDone = (plan.completedRequirementIds || []).includes(rid);
return req ? (
<div key={rid} className="flex min-w-0 items-center gap-2 rounded-md px-2 py-1 hover:bg-[var(--bg-card)]">
<button
disabled={!canEditCoverage}
onClick={() => {
if (!canEditCoverage) return;
const current = plan.completedRequirementIds || [];
const next = isDone ? current.filter((id) => id !== rid) : [...current, rid];
onUpdate(plan.id, { completedRequirementIds: next });
}}
className={`h-4 w-4 rounded border flex items-center justify-center shrink-0 transition-colors ${!canEditCoverage ? 'opacity-40 cursor-not-allowed' : ''} ${isDone ? 'bg-[var(--accent)] border-[var(--accent)]' : 'border-[var(--line)]'}`}
>
{isDone && <Check className="h-2.5 w-2.5 text-white" strokeWidth={3} />}
</button>
<span className="shrink-0 text-[11px] font-mono text-[var(--ink-muted)]">{req.code}</span>
<span className={`min-w-0 flex-1 truncate text-[12px] ${isDone ? 'line-through text-[var(--ink-muted)]' : 'text-[var(--ink)]'}`} title={req.title}>{req.title}</span>
</div>
) : null;
})}
</div>
</div>
<PlanRequirementCoveragePanel
plan={plan}
requirements={plan.linkedRequirementIds.map((rid) => requirementOptions.find((r) => r.id === rid)).filter(Boolean) as Requirement[]}
canEdit={canEditCoverage}
currentUserName={currentUserName}
onUpdate={onUpdate}
/>
)}
{plan.status === 'in_progress' && !completionState.canSubmitResult && (
<p className="mt-2 text-[11px] text-[var(--ink-muted)]">还不能提交成果：{completionState.missingReasons.join('、')}</p>
@@ -314,6 +282,14 @@ export function PlanTab({ plans, versionId, version, versionDeadline, currentUse
<button onClick={() => setCompletingPlan(plan)} className="text-[11px] font-medium text-green-700 hover:text-green-900 underline">{getSubmitActionLabel(plan)}</button>
</div>
)}
</div>
{plan.type !== 'research' && (
<PlanLogTimeline
logs={plan.logs}
className="border-t border-[var(--line)] pt-4 xl:border-l xl:border-t-0 xl:pt-0 xl:pl-4"
/>
)}
</div>
</div>
);
})}