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

fix(dev-task): 体验优化 — 新建弹窗默认值+详情卡片分区+筛选分页+胶囊联动

Browse Source 
- 新建弹窗：负责人默认当前用户，提示版本截止日期，超期需填写原因
- 详情抽屉：重写为卡片分区布局，展示关联需求，状态流转按钮醒目化
- 详情实时更新：改为从 store 实时读取而非 prop 快照
- 列表增加筛选：负责人/状态/阻塞/任务类型 + 分页（每页20条）
- 工时展示：列表行显示 实际Xh / 预计Yh 格式
- 概览胶囊联动：dev 阶段进度由 DevTask 完成度驱动
- 概览统计卡片：替换 mock 为真实 DevTask 数据（待开发/开发中/阻塞中）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
2026-06-11 18:51:33 +08:00
parent a560634091
commit d619846b93
6 changed files with 274 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/web/app/versions/[id]/page.tsx
View File

@@ -19,7 +19,9 @@ import { VersionRequirementsTab } from '@/components/version/VersionRequirements
import { PlanTab } from '@/components/version/PlanTab'; import { PlanTab } from '@/components/version/PlanTab';
import { DevTaskTab } from '@/components/dev-task/DevTaskTab'; import { DevTaskTab } from '@/components/dev-task/DevTaskTab';
import { useVersionPlanStore } from '@/stores/useVersionPlanStore'; import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useAuthStore } from '@/stores/useAuthStore'; import { useAuthStore } from '@/stores/useAuthStore';
import { calcGroupProgress as calcDevTaskProgress } from '@/lib/dev-task';
const PRIORITY_STYLE: Record<string, string> = { const PRIORITY_STYLE: Record<string, string> = {
P0: 'bg-red-500/10 text-red-600', P0: 'bg-red-500/10 text-red-600',
@@ -48,6 +50,7 @@ export default function VersionDetailPage() {
const { requirements, fetchRequirements, updateRequirement } = useRequirementStore(); const { requirements, fetchRequirements, updateRequirement } = useRequirementStore();
const { records, fetchRecords } = useOvertimeStore(); const { records, fetchRecords } = useOvertimeStore();
const { plans, fetchPlans, createPlan, updatePlan, completePlan, deletePlan } = useVersionPlanStore(); const { plans, fetchPlans, createPlan, updatePlan, completePlan, deletePlan } = useVersionPlanStore();
const { tasks: devTasks, fetchTasks: fetchDevTasks } = useDevTaskStore();
const user = useAuthStore((s) => s.user); const user = useAuthStore((s) => s.user);
const [activeTab, setActiveTab] = useState('overview'); const [activeTab, setActiveTab] = useState('overview');
@@ -55,6 +58,7 @@ export default function VersionDetailPage() {
useEffect(() => { fetchRequirements(); }, [fetchRequirements]); useEffect(() => { fetchRequirements(); }, [fetchRequirements]);
useEffect(() => { fetchRecords(); }, [fetchRecords]); useEffect(() => { fetchRecords(); }, [fetchRecords]);
useEffect(() => { fetchPlans(); }, [fetchPlans]); useEffect(() => { fetchPlans(); }, [fetchPlans]);
useEffect(() => { fetchDevTasks(); }, [fetchDevTasks]);
const version = useMemo(() => getVersionDetail(overview, versionId), [overview, versionId]); const version = useMemo(() => getVersionDetail(overview, versionId), [overview, versionId]);
@@ -177,11 +181,13 @@ export default function VersionDetailPage() {
const reasonRanking = Object.entries(reasonMap).sort((a, b) => b[1] - a[1]); const reasonRanking = Object.entries(reasonMap).sort((a, b) => b[1] - a[1]);
const reasonTotal = reasonRanking.reduce((s, [, v]) => s + v, 0) || 1; const reasonTotal = reasonRanking.reduce((s, [, v]) => s + v, 0) || 1;
// Mock 数据占位 // DevTask 真实统计
const mockTaskCount = Math.max(versionReqs.length * 2, 3); const versionDevTasks = devTasks.filter((t) => versionReqs.some((r) => r.id === t.requirementId));
const devTaskTodo = versionDevTasks.filter((t) => t.status === 'todo').length;
const devTaskInProgress = versionDevTasks.filter((t) => t.status === 'in_progress').length;
const devTaskBlocked = versionDevTasks.filter((t) => t.isBlocked).length;
const mockBugTotal = Math.max(Math.floor(versionReqs.length * 1.5), 2); const mockBugTotal = Math.max(Math.floor(versionReqs.length * 1.5), 2);
const mockBugOpen = Math.max(Math.floor(mockBugTotal * 0.3), 1); const mockBugOpen = Math.max(Math.floor(mockBugTotal * 0.3), 1);
const mockTaskPending = Math.max(Math.floor(mockTaskCount * 0.4), 1);
return ( return (
<div className="space-y-4"> <div className="space-y-4">
@@ -213,9 +219,9 @@ export default function VersionDetailPage() {
<div className="grid grid-cols-6 gap-3"> <div className="grid grid-cols-6 gap-3">
<StatCard label="加班时长" value={`${totalOTHours}h`} accent /> <StatCard label="加班时长" value={`${totalOTHours}h`} accent />
<StatCard label="关联需求" value={versionReqs.length} /> <StatCard label="关联需求" value={versionReqs.length} />
<StatCard label="待开发任务" value={mockTaskPending} /> <StatCard label="待开发" value={devTaskTodo} />
<StatCard label="BUG总数" value={mockBugTotal} /> <StatCard label="开发中" value={devTaskInProgress} accent />
<StatCard label="未解决BUG" value={mockBugOpen} warn /> <StatCard label="阻塞中" value={devTaskBlocked} warn={devTaskBlocked > 0} />
<StatCard label="参与人员" value={version.members?.length ?? 0} /> <StatCard label="参与人员" value={version.members?.length ?? 0} />
</div> </div>
@@ -285,6 +291,14 @@ export default function VersionDetailPage() {
if (productPlans.length > 0) stageProgress['product_design'] = { percent: calcGroupProgress(productPlans, 'product'), daysSpent: calcDays(productPlans) }; if (productPlans.length > 0) stageProgress['product_design'] = { percent: calcGroupProgress(productPlans, 'product'), daysSpent: calcDays(productPlans) };
if (uiPlans.length > 0) stageProgress['ui_design'] = { percent: calcGroupProgress(uiPlans, 'ui'), daysSpent: calcDays(uiPlans) }; if (uiPlans.length > 0) stageProgress['ui_design'] = { percent: calcGroupProgress(uiPlans, 'ui'), daysSpent: calcDays(uiPlans) };
// 开发阶段进度由 DevTask 驱动
if (versionDevTasks.length > 0) {
const devProgress = calcDevTaskProgress(versionDevTasks);
const devStart = versionDevTasks.reduce((min, t) => t.startDate && t.startDate < min ? t.startDate : min, today);
const devDays = devStart <= today ? Math.max(1, Math.ceil((new Date(today).getTime() - new Date(devStart).getTime()) / (1000 * 60 * 60 * 24))) : 0;
stageProgress['dev'] = { percent: devProgress, daysSpent: devDays };
}
return <CapsuleStages currentStage={version.currentStage} progress={version.progress} stageProgress={stageProgress} />; return <CapsuleStages currentStage={version.currentStage} progress={version.progress} stageProgress={stageProgress} />;
})()} })()}
@@ -458,6 +472,7 @@ export default function VersionDetailPage() {
<DevTaskTab <DevTaskTab
versionId={version.id} versionId={version.id}
requirementIds={versionReqs.map((r) => r.id)} requirementIds={versionReqs.map((r) => r.id)}
versionDeadline={version.expectedReleaseDate ?? undefined}
/> />
); );
})() })()

24
apps/web/components/dev-task/DevTaskCreateModal.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { X } from 'lucide-react'; import { X, AlertTriangle } from 'lucide-react';
import { useDevTaskStore } from '@/stores/useDevTaskStore'; import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore'; import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { useRequirementStore } from '@/stores/useRequirementStore'; import { useRequirementStore } from '@/stores/useRequirementStore';
@@ -12,11 +12,12 @@ import type { Priority } from '@/lib/derive';
interface Props { interface Props {
versionId: string; versionId: string;
requirementIds: string[]; requirementIds: string[];
versionDeadline?: string;
onClose: () => void; onClose: () => void;
onCreated?: () => void; onCreated?: () => void;
} }
export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreated }: Props) { export function DevTaskCreateModal({ versionId, requirementIds, versionDeadline, onClose, onCreated }: Props) {
const { createTask, tasks } = useDevTaskStore(); const { createTask, tasks } = useDevTaskStore();
const { categories } = useTaskCategoryStore(); const { categories } = useTaskCategoryStore();
const { requirements } = useRequirementStore(); const { requirements } = useRequirementStore();
@@ -35,16 +36,18 @@ export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreat
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || ''); const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || '');
const [categoryId, setCategoryId] = useState(categories[0]?.id || ''); const [categoryId, setCategoryId] = useState(categories[0]?.id || '');
const [assigneeId, setAssigneeId] = useState(''); const [assigneeId, setAssigneeId] = useState(user?.name || '');
const [priority, setPriority] = useState<Priority>('P2'); const [priority, setPriority] = useState<Priority>('P2');
const [estimateHours, setEstimateHours] = useState<number>(8); const [estimateHours, setEstimateHours] = useState<number>(8);
const [dueDate, setDueDate] = useState(''); const [dueDate, setDueDate] = useState('');
const [predecessorIds, setPredecessorIds] = useState<string[]>([]); const [predecessorIds, setPredecessorIds] = useState<string[]>([]);
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [overdueReason, setOverdueReason] = useState('');
const selectedReq = versionReqs.find((r) => r.id === requirementId); const selectedReq = versionReqs.find((r) => r.id === requirementId);
const effectivePriority = selectedReq?.priority || priority; const effectivePriority = selectedReq?.priority || priority;
const canSubmit = title.trim() && requirementId && categoryId && assigneeId && estimateHours > 0; const isOverdue = !!(dueDate && versionDeadline && dueDate > versionDeadline);
const canSubmit = title.trim() && requirementId && categoryId && assigneeId && estimateHours > 0 && (!isOverdue || overdueReason.trim());
const handleSubmit = () => { const handleSubmit = () => {
if (!canSubmit) return; if (!canSubmit) return;
@@ -65,6 +68,7 @@ export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreat
blockedById: undefined, blockedById: undefined,
predecessorIds: predecessorIds.length > 0 ? predecessorIds : undefined, predecessorIds: predecessorIds.length > 0 ? predecessorIds : undefined,
riskLevel: undefined, riskLevel: undefined,
overdueReason: isOverdue ? overdueReason.trim() : undefined,
createdBy: user?.name || '系统', createdBy: user?.name || '系统',
}); });
onCreated?.(); onCreated?.();
@@ -118,8 +122,20 @@ export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreat
<div> <div>
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">截止日期</label> <label className="block text-[12px] text-[var(--ink-soft)] mb-1">截止日期</label>
<input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" /> <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
{versionDeadline && (
<p className="text-[10px] text-[var(--ink-muted)] mt-0.5">版本截止：{versionDeadline}</p>
)}
</div> </div>
</div> </div>
{isOverdue && (
<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">
<AlertTriangle className="h-3.5 w-3.5" />
任务截止日期超出版本截止日期（{versionDeadline}），请说明原因
</div>
<input value={overdueReason} onChange={(e) => setOverdueReason(e.target.value)} placeholder="超期原因（必填）" className="h-8 w-full rounded-md border border-orange-200 bg-white px-2 text-[12px] focus:border-orange-400 focus:outline-none" />
</div>
)}
{versionTasks.length > 0 && ( {versionTasks.length > 0 && (
<div> <div>
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">前置任务</label> <label className="block text-[12px] text-[var(--ink-soft)] mb-1">前置任务</label>

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

@@ -1,32 +1,39 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { X, AlertTriangle, Link2 } from 'lucide-react'; import { X, AlertTriangle, Link2, ChevronRight, Clock, User, Tag, Calendar } from 'lucide-react';
import { StatusBadge } from './StatusBadge'; import { StatusBadge } from './StatusBadge';
import { CategoryChip } from './CategoryChip'; import { CategoryChip } from './CategoryChip';
import { WorklogPanel } from './WorklogPanel'; import { WorklogPanel } from './WorklogPanel';
import { useDevTaskStore } from '@/stores/useDevTaskStore'; import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore'; import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, formatHours } from '@/lib/dev-task'; import { useRequirementStore } from '@/stores/useRequirementStore';
import type { DevTask, DevTaskStatus } from '@/lib/dev-task'; import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR, formatHours } from '@/lib/dev-task';
import type { DevTaskStatus } from '@/lib/dev-task';
interface Props { interface Props {
task: DevTask; taskId: string;
allTasks: DevTask[]; allTaskIds: string[];
onClose: () => void; onClose: () => void;
} }
export function DevTaskDetailDrawer({ task, allTasks, onClose }: Props) { export function DevTaskDetailDrawer({ taskId, allTaskIds, onClose }: Props) {
const { changeStatus, setBlocked } = useDevTaskStore(); const { tasks, changeStatus, setBlocked } = useDevTaskStore();
const { categories } = useTaskCategoryStore(); const { categories } = useTaskCategoryStore();
const { requirements } = useRequirementStore();
const task = tasks.find((t) => t.id === taskId);
if (!task) return null;
const category = categories.find((c) => c.id === task.categoryId); const category = categories.find((c) => c.id === task.categoryId);
const requirement = requirements.find((r) => r.id === task.requirementId);
const allTasks = tasks.filter((t) => allTaskIds.includes(t.id));
const predecessors = (task.predecessorIds || []).map((id) => allTasks.find((t) => t.id === id)).filter(Boolean);
const nextStatuses = ALLOWED_TRANSITIONS[task.status];
const [blockReason, setBlockReason] = useState(task.blockReason || ''); const [blockReason, setBlockReason] = useState(task.blockReason || '');
const [showBlockInput, setShowBlockInput] = useState(false); const [showBlockInput, setShowBlockInput] = useState(false);
const nextStatuses = ALLOWED_TRANSITIONS[task.status];
const predecessors = (task.predecessorIds || []).map((id) => allTasks.find((t) => t.id === id)).filter(Boolean) as DevTask[];
const handleTransition = (to: DevTaskStatus) => { const handleTransition = (to: DevTaskStatus) => {
const result = changeStatus(task.id, to); const result = changeStatus(task.id, to);
if (!result.ok) alert(result.message); if (!result.ok) alert(result.message);
@@ -45,85 +52,152 @@ export function DevTaskDetailDrawer({ task, allTasks, onClose }: Props) {
return ( return (
<div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}> <div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
<div className="w-full max-w-md h-full bg-[var(--bg-card)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}> <div className="w-full max-w-md h-full bg-[var(--bg)] border-l border-[var(--line)] shadow-[var(--shadow-lg)] flex flex-col" onClick={(e) => e.stopPropagation()}>
{/* Header */} {/* 顶栏 */}
<div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] shrink-0"> <div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] bg-[var(--bg-card)] shrink-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[12px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span> <span className="text-[12px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
<StatusBadge status={task.status} /> <span className="text-[14px] font-semibold text-[var(--ink)] truncate max-w-[240px]">{task.title}</span>
{task.isBlocked && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">阻塞</span>}
</div> </div>
<button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4" /></button> <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
</div> </div>
{/* Body */} {/* 滚动区域 */}
<div className="flex-1 overflow-y-auto p-5 space-y-5"> <div className="flex-1 overflow-y-auto p-4 space-y-3">
<h2 className="text-[15px] font-semibold text-[var(--ink)]">{task.title}</h2>
{task.description && <p className="text-[12px] text-[var(--ink-soft)]">{task.description}</p>}
{/* 状态流转 */} {/* 卡片1：关联需求 */}
{nextStatuses.length > 0 && ( {requirement && (
<div className="flex items-center gap-2"> <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-3">
<span className="text-[11px] text-[var(--ink-muted)]">流转到：</span> <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide mb-1.5">关联需求</div>
{nextStatuses.map((s) => ( <div className="flex items-center gap-2">
<button key={s} onClick={() => handleTransition(s)} className="h-7 px-3 rounded-md text-[11px] font-medium border border-[var(--line)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors"> <Link2 className="h-3.5 w-3.5 text-[var(--accent)]" />
{DEV_TASK_STATUS_LABEL[s]} <span className="text-[11px] font-mono text-[var(--ink-muted)]">{requirement.code}</span>
</button> <span className="text-[13px] text-[var(--ink)]">{requirement.title}</span>
))} </div>
</div> </div>
)} )}
{/* 阻塞管理 */} {/* 卡片2：状态 & 操作 */}
<div className="rounded-lg border border-[var(--line)] p-3 space-y-2"> <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4 space-y-3">
<div className="flex items-center justify-between"> <div className="text-[10px] text-[var(--ink-muted)] uppercase tracking-wide">状态 & 操作</div>
<span className="text-[12px] font-medium text-[var(--ink)]">阻塞状态</span> <div className="flex items-center gap-3">
{task.isBlocked ? ( <span className={`inline-flex items-center rounded-lg px-3 py-1.5 text-[13px] font-semibold ${DEV_TASK_STATUS_COLOR[task.status]}`}>
<button onClick={handleUnblock} className="text-[11px] text-emerald-600 hover:underline">解除阻塞</button> {DEV_TASK_STATUS_LABEL[task.status]}
) : ( </span>
<button onClick={() => setShowBlockInput(true)} className="text-[11px] text-red-500 hover:underline">标记阻塞</button> {task.isBlocked && (
<span className="inline-flex items-center gap-1 text-[11px] text-red-600 bg-red-50 border border-red-200 px-2 py-1 rounded-lg">
<AlertTriangle className="h-3 w-3" />阻塞中
</span>
)} )}
</div> </div>
{task.isBlocked && (
<div className="flex items-start gap-1.5 text-[12px] text-red-600 bg-red-50 rounded px-2 py-1.5"> {/* 流转按钮 */}
<AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" /> {nextStatuses.length > 0 && (
<span>{task.blockReason}</span> <div className="flex items-center gap-2 pt-1">
<ChevronRight className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
{nextStatuses.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>
))}
</div> </div>
)} )}
{showBlockInput && !task.isBlocked && (
<div className="flex gap-2">
<input value={blockReason} onChange={(e) => setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleBlock(); }} placeholder="阻塞原因" className="flex-1 h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
<button onClick={handleBlock} className="h-8 px-3 rounded-md text-[11px] font-medium bg-red-500 text-white">确认</button>
</div>
)}
</div>
{/* 基本信息 */} {/* 阻塞管理 */}
<div className="grid grid-cols-2 gap-3 text-[12px]"> <div className="pt-2 border-t border-[var(--line)]">
<div><span className="text-[var(--ink-muted)]">类型：</span><CategoryChip category={category} /></div> {task.isBlocked ? (
<div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)]">{task.assigneeId}</span></div> <div className="space-y-2">
<div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)]">{task.priority}</span></div> <div className="flex items-start gap-1.5 text-[12px] text-red-600 bg-red-50 rounded-lg px-3 py-2">
<div><span className="text-[var(--ink-muted)]">预计工时：</span><span className="text-[var(--ink)]">{formatHours(task.estimateHours)}</span></div> <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
{task.dueDate && <div><span className="text-[var(--ink-muted)]">截止日期：</span><span className="text-[var(--ink)]">{task.dueDate}</span></div>} <span>{task.blockReason}</span>
{task.completedAt && <div><span className="text-[var(--ink-muted)]">完成日期：</span><span className="text-[var(--ink)]">{task.completedAt}</span></div>} </div>
</div> <button onClick={handleUnblock} className="text-[11px] text-emerald-600 font-medium hover:underline">解除阻塞</button>
{/* 前置任务 */}
{predecessors.length > 0 && (
<div className="space-y-1.5">
<span className="text-[12px] font-medium text-[var(--ink)]">前置任务</span>
{predecessors.map((p) => (
<div key={p.id} className="flex items-center gap-2 text-[12px] px-2 py-1 rounded bg-[var(--bg-subtle)]">
<Link2 className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="font-mono text-[var(--ink-muted)]">{p.taskNo}</span>
<span className="text-[var(--ink)]">{p.title}</span>
<StatusBadge status={p.status} />
</div> </div>
))} ) : (
showBlockInput ? (
<div className="flex gap-2">
<input value={blockReason} onChange={(e) => setBlockReason(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleBlock(); }} placeholder="阻塞原因" className="flex-1 h-8 rounded-lg border border-[var(--line)] px-3 text-[12px] focus:border-red-400 focus:outline-none" autoFocus />
<button onClick={handleBlock} disabled={!blockReason.trim()} className="h-8 px-3 rounded-lg text-[11px] font-medium bg-red-500 text-white disabled:opacity-50">确认</button>
<button onClick={() => setShowBlockInput(false)} className="h-8 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
</div>
) : (
<button onClick={() => setShowBlockInput(true)} className="text-[11px] text-red-500 font-medium hover:underline">标记阻塞</button>
)
)}
</div>
</div>
{/* 卡片3：基本信息 */}
<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 className="flex items-center gap-2">
<Tag className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="text-[var(--ink-muted)]">类型</span>
<CategoryChip category={category} />
</div>
<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>
</div>
<div className="flex items-center gap-2">
<span className="text-[var(--ink-muted)]">优先级</span>
<span className="text-[var(--ink)] font-medium">{task.priority}</span>
</div>
<div className="flex items-center gap-2">
<Clock className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="text-[var(--ink-muted)]">预计</span>
<span className="text-[var(--ink)] font-medium">{formatHours(task.estimateHours)}</span>
</div>
<div className="flex items-center gap-2">
<Clock className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="text-[var(--ink-muted)]">实际</span>
<span className="text-[var(--ink)] font-medium">{task.actualHours > 0 ? `${task.actualHours}h` : '-'}</span>
</div>
{task.dueDate && (
<div className="flex items-center gap-2">
<Calendar className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="text-[var(--ink-muted)]">截止</span>
<span className="text-[var(--ink)]">{task.dueDate}</span>
</div>
)}
{task.completedAt && (
<div className="flex items-center gap-2">
<Calendar className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="text-[var(--ink-muted)]">完成</span>
<span className="text-emerald-600 font-medium">{task.completedAt}</span>
</div>
)}
</div>
{task.description && (
<div className="mt-3 pt-3 border-t border-[var(--line)]">
<p className="text-[12px] text-[var(--ink-soft)] leading-relaxed">{task.description}</p>
</div>
)}
</div>
{/* 卡片4：前置任务 */}
{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>
<div className="space-y-2">
{predecessors.map((p: any) => (
<div key={p.id} className="flex items-center gap-2 text-[12px] px-2.5 py-1.5 rounded-lg bg-[var(--bg-subtle)]">
<Link2 className="h-3 w-3 text-[var(--ink-muted)]" />
<span className="font-mono text-[var(--ink-muted)]">{p.taskNo}</span>
<span className="text-[var(--ink)] flex-1 truncate">{p.title}</span>
<StatusBadge status={p.status} />
</div>
))}
</div>
</div> </div>
)} )}
{/* 工时记录 */} {/* 卡片5：工时记录 */}
<WorklogPanel taskId={task.id} /> <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-4">
<WorklogPanel taskId={task.id} />
</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -38,8 +38,10 @@ export function DevTaskRow({ task, category, onClick }: Props) {
</div> </div>
<CategoryChip category={category} /> <CategoryChip category={category} />
<StatusBadge status={task.status} /> <StatusBadge status={task.status} />
<span className="text-[11px] text-[var(--ink-muted)] w-20 text-right tabular-nums"> <span className="text-[11px] text-[var(--ink-muted)] w-24 text-right tabular-nums">
{task.actualHours > 0 ? `${task.actualHours}h/` : ''}{formatHours(task.estimateHours).split('（')[0]} {task.actualHours > 0 && <span className="text-[var(--ink-soft)]">{task.actualHours}h</span>}
{task.actualHours > 0 && ' / '}
{formatHours(task.estimateHours).split('（')[0]}
</span> </span>
<span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{task.assigneeId}</span> <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{task.assigneeId}</span>
</div> </div>

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

@@ -1,27 +1,33 @@
'use client'; 'use client';
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { Plus, Code2 } from 'lucide-react'; import { Plus, Code2, Filter } from 'lucide-react';
import { useDevTaskStore } from '@/stores/useDevTaskStore'; import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore'; import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore'; import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
import { useRequirementStore } from '@/stores/useRequirementStore'; import { useRequirementStore } from '@/stores/useRequirementStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { DevTaskRow } from './DevTaskRow'; import { DevTaskRow } from './DevTaskRow';
import { DevTaskCreateModal } from './DevTaskCreateModal'; import { DevTaskCreateModal } from './DevTaskCreateModal';
import { DevTaskDetailDrawer } from './DevTaskDetailDrawer'; import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
import { calcGroupProgress } from '@/lib/dev-task'; import { calcGroupProgress, DEV_TASK_STATUS_LABEL } from '@/lib/dev-task';
import type { DevTask } from '@/lib/dev-task'; import { Pagination, usePagination } from '@/components/Pagination';
import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
interface Props { interface Props {
versionId: string; versionId: string;
requirementIds: string[]; requirementIds: string[];
versionDeadline?: string;
} }
export function DevTaskTab({ versionId, requirementIds }: Props) { export function DevTaskTab({ versionId, requirementIds, versionDeadline }: Props) {
const { tasks, fetchTasks } = useDevTaskStore(); const { tasks, fetchTasks } = useDevTaskStore();
const { categories, fetchCategories } = useTaskCategoryStore(); const { categories, fetchCategories } = useTaskCategoryStore();
const { fetchWorklogs } = useTaskWorklogStore(); const { fetchWorklogs } = useTaskWorklogStore();
const { requirements } = useRequirementStore(); const { requirements } = useRequirementStore();
const { members } = useMemberStore();
const user = useAuthStore((s) => s.user);
useEffect(() => { fetchTasks(); }, [fetchTasks]); useEffect(() => { fetchTasks(); }, [fetchTasks]);
useEffect(() => { fetchCategories(); }, [fetchCategories]); useEffect(() => { fetchCategories(); }, [fetchCategories]);
@@ -32,26 +38,56 @@ export function DevTaskTab({ versionId, requirementIds }: Props) {
[tasks, requirementIds], [tasks, requirementIds],
); );
// 筛选状态
const [filterAssignee, setFilterAssignee] = useState<string>('');
const [filterStatus, setFilterStatus] = useState<string>('');
const [filterBlocked, setFilterBlocked] = useState<string>('');
const [filterCategory, setFilterCategory] = useState<string>('');
// 应用筛选
const filteredTasks = useMemo(() => {
let result = versionTasks;
if (filterAssignee) result = result.filter((t) => t.assigneeId === filterAssignee);
if (filterStatus) result = result.filter((t) => t.status === filterStatus);
if (filterBlocked === 'yes') result = result.filter((t) => t.isBlocked);
if (filterBlocked === 'no') result = result.filter((t) => !t.isBlocked);
if (filterCategory) result = result.filter((t) => t.categoryId === filterCategory);
return result;
}, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory]);
// 分页
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredTasks, 20);
// 统计
const progress = calcGroupProgress(versionTasks); const progress = calcGroupProgress(versionTasks);
const totalEstimate = versionTasks.reduce((s, t) => s + t.estimateHours, 0); const totalEstimate = versionTasks.reduce((s, t) => s + t.estimateHours, 0);
const totalActual = versionTasks.reduce((s, t) => s + t.actualHours, 0); const totalActual = versionTasks.reduce((s, t) => s + t.actualHours, 0);
const blockedCount = versionTasks.filter((t) => t.isBlocked).length; const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
const [showCreate, setShowCreate] = useState(false); const [showCreate, setShowCreate] = useState(false);
const [selectedTask, setSelectedTask] = useState<DevTask | null>(null); const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
// 按需求分组（对当前页数据）
const groupedByReq = useMemo(() => { const groupedByReq = useMemo(() => {
const map = new Map<string, DevTask[]>(); const map = new Map<string, DevTask[]>();
for (const t of versionTasks) { for (const t of paged) {
const list = map.get(t.requirementId) || []; const list = map.get(t.requirementId) || [];
list.push(t); list.push(t);
map.set(t.requirementId, list); map.set(t.requirementId, list);
} }
return map; return map;
}, [paged]);
// 参与人列表
const assignees = useMemo(() => {
const names = new Set(versionTasks.map((t) => t.assigneeId));
return Array.from(names);
}, [versionTasks]); }, [versionTasks]);
const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory);
return ( return (
<div className="space-y-4"> <div className="space-y-3">
{/* 统计栏 */} {/* 统计栏 */}
<div className="flex items-center gap-4 px-4 py-3 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)]"> <div className="flex items-center gap-4 px-4 py-3 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)]">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -72,11 +108,38 @@ export function DevTaskTab({ versionId, requirementIds }: Props) {
</button> </button>
</div> </div>
{/* 按需求分组列表 */} {/* 筛选栏 */}
{versionTasks.length === 0 ? ( <div className="flex items-center gap-2 px-1">
<Filter className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
<select value={filterAssignee} onChange={(e) => { setFilterAssignee(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
<option value="">全部负责人</option>
{user?.name && <option value={user.name}>我的任务</option>}
{assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)}
</select>
<select value={filterStatus} onChange={(e) => { setFilterStatus(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
<option value="">全部状态</option>
{(Object.entries(DEV_TASK_STATUS_LABEL) as [DevTaskStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
</select>
<select value={filterBlocked} onChange={(e) => { setFilterBlocked(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
<option value="">阻塞状态</option>
<option value="yes">阻塞中</option>
<option value="no">正常</option>
</select>
<select value={filterCategory} onChange={(e) => { setFilterCategory(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
<option value="">全部类型</option>
{categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
</select>
{hasFilter && (
<button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setPage(1); }} className="text-[11px] text-[var(--accent)] hover:underline">清除筛选</button>
)}
<span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredTasks.length} 条结果</span>
</div>
{/* 任务列表 */}
{filteredTasks.length === 0 ? (
<div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center"> <div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
<p className="text-[13px] text-[var(--ink-muted)]">暂无开发任务</p> <p className="text-[13px] text-[var(--ink-muted)]">{hasFilter ? '没有匹配的任务' : '暂无开发任务'}</p>
<button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button> {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
</div> </div>
) : ( ) : (
Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => { Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
@@ -90,15 +153,21 @@ export function DevTaskTab({ versionId, requirementIds }: Props) {
<span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span> <span className="text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
</div> </div>
{reqTasks.map((t) => ( {reqTasks.map((t) => (
<DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTask(t)} /> <DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTaskId(t.id)} />
))} ))}
</div> </div>
); );
}) })
)} )}
{showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} onClose={() => setShowCreate(false)} />} {/* 分页 */}
{selectedTask && <DevTaskDetailDrawer task={selectedTask} allTasks={versionTasks} onClose={() => setSelectedTask(null)} />} {total > 20 && (
<Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />
)}
{/* 弹窗 & 抽屉 */}
{showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} versionDeadline={versionDeadline} onClose={() => setShowCreate(false)} />}
{selectedTaskId && <DevTaskDetailDrawer taskId={selectedTaskId} allTaskIds={versionTasks.map((t) => t.id)} onClose={() => setSelectedTaskId(null)} />}
</div> </div>
); );
} }

1
apps/web/lib/dev-task.ts
View File

@@ -23,6 +23,7 @@ export interface DevTask {
blockedById?: string; blockedById?: string;
predecessorIds?: string[]; predecessorIds?: string[];
riskLevel?: 'low' | 'medium' | 'high'; riskLevel?: 'low' | 'medium' | 'high';
overdueReason?: string;
createdBy: string; createdBy: string;
createdAt: string; createdAt: string;
updatedAt: string; updatedAt: string;