feat: 版本详情完整功能 + 数据串联 + 登录模块
- 版本详情：关联需求Tab（从需求池添加已采纳需求/移除释放） - 版本详情：调研/产品方案/UI设计Tab（计划CRUD、完成提交成果、耗时统计） - 版本详情：超期校验（结束日期超版本截止需填写原因） - 版本详情：概览统计卡片（加班时长/排名/原因占比） - 数据串联：产品→项目→版本→需求→加班全链路贯通 - 版本管理：规划中版本可删除，删除释放关联需求 - 数据清理：仅保留翻台宝/值班，需求池10条值班待评审需求 - 修复：列表页overflow裁剪菜单问题（4个页面统一修复） - 新增：登录模块、AuthGuard、VersionPlan store Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
@@ -4,6 +4,8 @@ import { useEffect, useMemo, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { ChevronLeft, Package, Calendar, Clock, Users, Tag, ChevronDown } from 'lucide-react';
|
||||
import { useProductStore } from '@/stores/useProductStore';
|
||||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||||
import { useOvertimeStore } from '@/stores/useOvertimeStore';
|
||||
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';
|
||||
@@ -37,7 +39,7 @@ function ProgressBar({ role, percent, daysSpent }: { role: Role; percent: number
|
||||
}
|
||||
|
||||
/* ─── VersionCard ─── */
|
||||
function VersionCard({ version }: { version: VersionWithContext }) {
|
||||
function VersionCard({ version, onNavigate }: { version: VersionWithContext; onNavigate: (id: string) => void }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const totalDays = (version.progress ?? []).reduce((sum, p) => sum + p.daysSpent, 0);
|
||||
|
||||
@@ -49,7 +51,7 @@ function VersionCard({ version }: { version: VersionWithContext }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-dashed border-[var(--line)] px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-[var(--ink)]">{version.name}</span>
|
||||
<span onClick={() => onNavigate(version.id)} className="text-sm font-medium text-[var(--ink)] cursor-pointer hover:text-[var(--accent)]">{version.name}</span>
|
||||
<span className={`text-[11px] px-2 py-0.5 rounded-full ${displayBg}`}>{displayStatus}</span>
|
||||
<span className="text-[11px] text-[var(--ink-muted)]">暂无详情</span>
|
||||
</div>
|
||||
@@ -65,7 +67,7 @@ function VersionCard({ version }: { version: VersionWithContext }) {
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-[var(--bg-hover)] transition-colors"
|
||||
>
|
||||
<span className="text-sm font-medium text-[var(--ink)]">{version.name}</span>
|
||||
<span onClick={(e) => { e.stopPropagation(); onNavigate(version.id); }} className="text-sm font-medium text-[var(--ink)] cursor-pointer hover:text-[var(--accent)]">{version.name}</span>
|
||||
<span className={`text-[11px] px-2 py-0.5 rounded-full ${displayBg}`}>{displayStatus}</span>
|
||||
<span className="flex-1 text-[11px] text-[var(--ink-muted)] flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
@@ -87,7 +89,7 @@ function VersionCard({ version }: { version: VersionWithContext }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="text-sm font-medium text-[var(--ink)]">{version.name}</span>
|
||||
<span onClick={() => onNavigate(version.id)} className="text-sm font-medium text-[var(--ink)] cursor-pointer hover:text-[var(--accent)]">{version.name}</span>
|
||||
<span className={`text-[11px] px-2 py-0.5 rounded-full ${displayBg}`}>{displayStatus}</span>
|
||||
</div>
|
||||
<div className="mb-3"><CapsuleStages currentStage={version.currentStage} progress={version.progress} /></div>
|
||||
@@ -173,9 +175,13 @@ export default function ProjectDetailPage() {
|
||||
const router = useRouter();
|
||||
const projectId = params.id as string;
|
||||
const { overview, fetchOverview } = useProductStore();
|
||||
const { requirements, fetchRequirements } = useRequirementStore();
|
||||
const { records, fetchRecords } = useOvertimeStore();
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
|
||||
useEffect(() => { fetchOverview(); }, [fetchOverview]);
|
||||
useEffect(() => { fetchRequirements(); }, [fetchRequirements]);
|
||||
useEffect(() => { fetchRecords(); }, [fetchRecords]);
|
||||
|
||||
const project = useMemo(() => getProjectDetail(overview, projectId), [overview, projectId]);
|
||||
|
||||
@@ -195,13 +201,15 @@ export default function ProjectDetailPage() {
|
||||
}, [project, statusFilter]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
if (!project) return { total: 0, developing: 0, released: 0, totalDays: 0 };
|
||||
if (!project) return { total: 0, developing: 0, released: 0, totalDays: 0, reqCount: 0, overtimeHours: 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) => sum + (v.progress ?? []).reduce((s, p) => s + p.daysSpent, 0), 0);
|
||||
return { total, developing, released, totalDays };
|
||||
}, [project]);
|
||||
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 teamByRole = useMemo(() => {
|
||||
if (!project) return {} as Record<string, Record<string, number>>;
|
||||
@@ -242,11 +250,13 @@ 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-4 gap-4">
|
||||
<div className="grid grid-cols-6 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.reqCount} label="需求数" />
|
||||
<StatCard value={stats.overtimeHours} label="加班(h)" />
|
||||
</div>
|
||||
|
||||
<TeamSection teamByRole={teamByRole} />
|
||||
@@ -273,7 +283,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} />)
|
||||
sortedVersions.map((v) => <VersionCard key={v.id} version={v} onNavigate={(id) => router.push(`/versions/${id}`)} />)
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user