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

fix: 项目详情顶部卡片 + 版本记录耗时和状态胶囊与版本详情联动

Browse Source 
1. 顶部卡片从 6 个改为 4 个：
   - 总版本数、已开发、需求数、Bug 总数
   - 去掉重复的进行中、总耗时(天)、加班(h)
   - bugCount 从 useBugStore 实时统计

2. 版本记录里的耗时与版本详情联动：
   - 不再用 version.startDate 简单计算
   - 改用版本详情同样的算法：取所有阶段最早实际开始
     (plans.actualStartAt / devTasks.startDate / testCases.startedAt)
   - 数据完全一致

3. 版本记录里的状态胶囊与版本详情联动：
   - 之前 <CapsuleStages /> 不传任何数据，永远空胶囊
   - 现在传入 stageProgress (与版本详情同样算法)
   - 调研/产品/UI/开发/测试/BUG 各阶段进度一致

VersionCard 接收 plans/devTasks/testCases/bugs/requirements
useMemo 派生 versionData 和 stageProgress

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
2026-06-16 11:52:39 +08:00
parent 57e55b6788
commit 4b05e09dab
1 changed files with 124 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
apps/web/app/projects/[id]/page.tsx
View File

@@ -9,12 +9,17 @@ import { useOvertimeStore } from '@/stores/useOvertimeStore';
import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useBugStore } from '@/stores/useBugStore';
import { getProjectDetail, VersionWithContext } from '@/lib/derive';
import { Stage, Role, STAGES, ROLES, STAGE_INDEX, ROLE_LABEL } from '@/lib/stage';
import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_BG } from '@/lib/version-status';
import { STATUS_PROGRESS } from '@/lib/dev-task';
import { STATUS_PROGRESS, calcGroupProgress as calcDevTaskProgress } from '@/lib/dev-task';
import { CapsuleStages } from '@/components/version/CapsuleStages';
import { MemberChips } from '@/components/version/MemberChips';
import type { VersionPlan } from '@/lib/version-plan';
import type { DevTask } from '@/lib/dev-task';
import type { TestCase } from '@/lib/test-case';
import type { Bug } from '@/lib/bug';
/* ─── StatCard ─── */
function StatCard({ value, label }: { value: number | string; label: string }) {
@@ -43,20 +48,115 @@ function ProgressBar({ role, percent, daysSpent }: { role: Role; percent: number
}
/* ─── VersionCard ─── */
function VersionCard({ version, progress, onNavigate }: { version: VersionWithContext; progress: number; onNavigate: (id: string) => void }) {
function VersionCard({ version, progress, plans, devTasks, testCases, bugs, requirements, onNavigate }: {
version: VersionWithContext;
progress: number;
plans: VersionPlan[];
devTasks: DevTask[];
testCases: TestCase[];
bugs: Bug[];
requirements: { id: string; versionId?: string }[];
onNavigate: (id: string) => void;
}) {
const [expanded, setExpanded] = useState(false);
// Calculate actual elapsed days from dates instead of old progress data
const totalDays = useMemo(() => {
if (!version.startDate) return 0;
const start = new Date(version.startDate);
// 与版本详情一致：取所有阶段最早的实际开始
const versionData = useMemo(() => {
const vPlans = plans.filter((p) => p.versionId === version.id);
const vReqIds = new Set(requirements.filter((r) => r.versionId === version.id).map((r) => r.id));
const vDevTasks = devTasks.filter((t) => vReqIds.has(t.requirementId));
const vTCs = testCases.filter((c) => c.versionId === version.id);
const vBugs = bugs.filter((b) => b.versionId === version.id);
const startDates: string[] = [];
vPlans.forEach((p) => {
if (p.actualStartAt) startDates.push(p.actualStartAt);
else if (p.status === 'pending' && p.startTime && new Date(p.startTime) <= new Date()) startDates.push(p.startTime);
});
vDevTasks.forEach((t) => { if (t.startDate) startDates.push(t.startDate); });
vTCs.forEach((c) => { if (c.startedAt) startDates.push(c.startedAt); });
const earliestStart = startDates.length > 0 ? startDates.sort()[0] : version.startDate;
let totalDays = 0;
if (earliestStart) {
const start = new Date(earliestStart);
start.setHours(0, 0, 0, 0);
const end = version.status === 'released' && version.releaseDate
? new Date(version.releaseDate)
: new Date();
const end = version.status === 'released' && version.releaseDate ? new Date(version.releaseDate) : new Date();
end.setHours(0, 0, 0, 0);
return Math.max(0, Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)));
}, [version.startDate, version.releaseDate, version.status]);
totalDays = Math.max(0, Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)));
}
return { vPlans, vDevTasks, vTCs, vBugs, totalDays };
}, [version, plans, devTasks, testCases, bugs, requirements]);
// 状态胶囊数据 — 与版本详情一致
const stageProgress = useMemo(() => {
const { vPlans, vDevTasks, vTCs, vBugs } = versionData;
const sp: any = {};
const calcGroupProgress = (group: VersionPlan[], type: 'research' | 'product' | 'ui') => {
if (group.length === 0) return 0;
let totalItems = 0;
let doneItems = 0;
for (const p of group) {
if (type === 'research') {
const tasks = p.tasks || [];
const count = Math.max(tasks.length, 1);
totalItems += count;
if (p.status === 'completed') doneItems += count;
else doneItems += tasks.filter((t) => t.status === 'completed').length;
} else {
const linked = p.linkedRequirementIds || [];
const count = Math.max(linked.length, 1);
totalItems += count;
if (p.status === 'completed') doneItems += count;
else {
const completed = p.completedRequirementIds || [];
doneItems += completed.filter((id) => linked.includes(id)).length;
}
}
}
return totalItems > 0 ? Math.round((doneItems / totalItems) * 100) : 0;
};
const getPlanStatus = (group: VersionPlan[]): 'idle' | 'active' | 'done' => {
if (group.length === 0) return 'idle';
if (group.every((p) => p.status === 'completed')) return 'done';
if (group.some((p) => p.status === 'in_progress')) return 'active';
return 'idle';
};
const research = vPlans.filter((p) => p.type === 'research');
const product = vPlans.filter((p) => p.type === 'product');
const ui = vPlans.filter((p) => p.type === 'ui');
if (research.length > 0) sp['requirement'] = { percent: calcGroupProgress(research, 'research'), status: getPlanStatus(research) };
if (product.length > 0) sp['product_design'] = { percent: calcGroupProgress(product, 'product'), status: getPlanStatus(product) };
if (ui.length > 0) sp['ui_design'] = { percent: calcGroupProgress(ui, 'ui'), status: getPlanStatus(ui) };
if (vDevTasks.length > 0) {
const devProgress = calcDevTaskProgress(vDevTasks);
const allSubmitted = vDevTasks.every((t) => t.status === 'submitted');
const hasActive = vDevTasks.some((t) => t.status === 'in_progress' || t.status === 'testing');
sp['dev'] = { percent: devProgress, status: allSubmitted ? 'done' : hasActive ? 'active' : 'idle' };
}
if (vTCs.length > 0) {
const executed = vTCs.filter((c) => c.status === 'passed' || c.status === 'failed' || c.status === 'blocked').length;
const tp = Math.round((executed / vTCs.length) * 100);
const allPassed = vTCs.every((c) => c.status === 'passed');
const hasRunning = vTCs.some((c) => c.status === 'running');
sp['testing'] = { percent: tp, status: allPassed ? 'done' : (hasRunning || executed > 0) ? 'active' : 'idle' };
}
if (vBugs.length > 0) {
const closedBugs = vBugs.filter((b) => b.status === 'closed' || b.status === 'rejected').length;
const bp = Math.round((closedBugs / vBugs.length) * 100);
const allClosed = vBugs.every((b) => b.status === 'closed' || b.status === 'rejected');
sp['bug'] = { percent: bp, status: allClosed ? 'done' : closedBugs > 0 || vBugs.length > 0 ? 'active' : 'idle' };
}
return sp;
}, [versionData]);
const totalDays = versionData.totalDays;
const displayStatus = VERSION_STATUS_LABEL[version.status] ?? '开发中';
const displayBg = VERSION_STATUS_BG[version.status] ?? 'bg-blue-500/10 text-blue-600';
@@ -92,7 +192,7 @@ function VersionCard({ version, progress, onNavigate }: { version: VersionWithCo
</button>
{expanded && (
<div className="px-4 pb-4 pt-2 border-t border-[var(--line-soft)] space-y-3">
<CapsuleStages />
<CapsuleStages stageProgress={stageProgress} />
<MemberChips members={version.members ?? []} />
</div>
)}
@@ -199,6 +299,7 @@ export default function ProjectDetailPage() {
const { plans, fetchPlans } = useVersionPlanStore();
const { tasks: devTasks, fetchTasks: fetchDevTasks } = useDevTaskStore();
const { testCases, fetchTestCases } = useTestCaseStore();
const { bugs, fetchBugs } = useBugStore();
const [statusFilter, setStatusFilter] = useState<string>('all');
useEffect(() => { fetchOverview(); }, [fetchOverview]);
@@ -296,22 +397,14 @@ export default function ProjectDetailPage() {
}, [project, plans, requirements, devTasks, testCases]);
const stats = useMemo(() => {
if (!project) return { total: 0, developing: 0, released: 0, totalDays: 0, reqCount: 0, overtimeHours: 0 };
if (!project) return { total: 0, released: 0, reqCount: 0, bugCount: 0 };
const total = project.versions.length;
const developing = project.versions.filter((v) => v.status === 'developing').length;
const released = project.versions.filter((v) => v.status === 'released').length;
const totalDays = project.versions.reduce((sum, v) => {
if (!v.startDate) return sum;
const start = new Date(v.startDate);
start.setHours(0, 0, 0, 0);
const end = v.status === 'released' && v.releaseDate ? new Date(v.releaseDate) : new Date();
end.setHours(0, 0, 0, 0);
return sum + Math.max(0, Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)));
}, 0);
const reqCount = requirements.filter((r) => r.projectId === projectId).length;
const overtimeHours = Math.round(records.filter((r) => r.projectId === projectId).reduce((sum, r) => sum + r.duration, 0) * 10) / 10;
return { total, developing, released, totalDays, reqCount, overtimeHours };
}, [project, requirements, records, projectId]);
const versionIds = new Set(project.versions.map((v) => v.id));
const bugCount = bugs.filter((b) => versionIds.has(b.versionId)).length;
return { total, released, reqCount, bugCount };
}, [project, requirements, bugs, projectId]);
const teamByRole = useMemo(() => {
if (!project) return {} as Record<string, Record<string, number>>;
@@ -352,13 +445,11 @@ export default function ProjectDetailPage() {
<div className="flex-1 overflow-y-auto p-5 bg-[var(--bg)]">
<div className="space-y-5">
<div className="grid grid-cols-6 gap-4">
<div className="grid grid-cols-4 gap-4">
<StatCard value={stats.total} label="总版本数" />
<StatCard value={stats.developing} label="进行中" />
<StatCard value={stats.released} label="已发布" />
<StatCard value={stats.totalDays} label="总耗时(天)" />
<StatCard value={stats.released} label="已开发" />
<StatCard value={stats.reqCount} label="需求数" />
<StatCard value={stats.overtimeHours} label="加班(h)" />
<StatCard value={stats.bugCount} label="Bug 总数" />
</div>
<TeamSection teamByRole={teamByRole} />
@@ -385,7 +476,7 @@ export default function ProjectDetailPage() {
{sortedVersions.length === 0 ? (
<div className="rounded-xl border border-dashed border-[var(--line)] p-6 text-center text-xs text-[var(--ink-muted)]">暂无版本</div>
) : (
sortedVersions.map((v) => <VersionCard key={v.id} version={v} progress={versionProgressMap[v.id] ?? 0} onNavigate={(id) => router.push(`/versions/${id}`)} />)
sortedVersions.map((v) => <VersionCard key={v.id} version={v} progress={versionProgressMap[v.id] ?? 0} plans={plans} devTasks={devTasks} testCases={testCases} bugs={bugs} requirements={requirements} onNavigate={(id) => router.push(`/versions/${id}`)} />)
)}
</div>
</section>