feat(dev-task): 开发任务模块 V1 完整实现
- 核心库：dev-task.ts（类型+状态机+进度计算）、task-worklog.ts（工时）、task-category.ts（字典）、work-item.ts（聚合契约） - Store：useDevTaskStore（CRUD+状态流转）、useTaskWorklogStore（工时记录）、useTaskCategoryStore（字典管理） - UI组件：DevTaskTab、DevTaskCreateModal、DevTaskDetailDrawer、DevTaskRow、WorklogPanel、StatusBadge、CategoryChip - 集成：版本详情页"开发任务"Tab、"与我相关"工作台开发任务分组、任务类型管理页 - 设计文档：spec + 实施计划 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Script Generator
18
apps/web/components/dev-task/CategoryChip.tsx
Normal file
18
apps/web/components/dev-task/CategoryChip.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
'use client';
|
||||
|
||||
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>;
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
|
||||
style={{
|
||||
backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
|
||||
color: category.color || 'var(--ink-soft)',
|
||||
}}
|
||||
>
|
||||
{category.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
148
apps/web/components/dev-task/DevTaskCreateModal.tsx
Normal file
148
apps/web/components/dev-task/DevTaskCreateModal.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||||
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
|
||||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||||
import { useMemberStore } from '@/stores/useMemberStore';
|
||||
import { useAuthStore } from '@/stores/useAuthStore';
|
||||
import type { Priority } from '@/lib/derive';
|
||||
|
||||
interface Props {
|
||||
versionId: string;
|
||||
requirementIds: string[];
|
||||
onClose: () => void;
|
||||
onCreated?: () => void;
|
||||
}
|
||||
|
||||
export function DevTaskCreateModal({ versionId, requirementIds, onClose, onCreated }: Props) {
|
||||
const { createTask, tasks } = useDevTaskStore();
|
||||
const { categories } = useTaskCategoryStore();
|
||||
const { requirements } = useRequirementStore();
|
||||
const { members } = useMemberStore();
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
const versionReqs = useMemo(
|
||||
() => requirements.filter((r) => requirementIds.includes(r.id)),
|
||||
[requirements, requirementIds],
|
||||
);
|
||||
const versionTasks = useMemo(
|
||||
() => tasks.filter((t) => requirementIds.includes(t.requirementId)),
|
||||
[tasks, requirementIds],
|
||||
);
|
||||
|
||||
const [title, setTitle] = useState('');
|
||||
const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || '');
|
||||
const [categoryId, setCategoryId] = useState(categories[0]?.id || '');
|
||||
const [assigneeId, setAssigneeId] = useState('');
|
||||
const [priority, setPriority] = useState<Priority>('P2');
|
||||
const [estimateHours, setEstimateHours] = useState<number>(8);
|
||||
const [dueDate, setDueDate] = useState('');
|
||||
const [predecessorIds, setPredecessorIds] = useState<string[]>([]);
|
||||
const [description, setDescription] = useState('');
|
||||
|
||||
const selectedReq = versionReqs.find((r) => r.id === requirementId);
|
||||
const effectivePriority = selectedReq?.priority || priority;
|
||||
const canSubmit = title.trim() && requirementId && categoryId && assigneeId && estimateHours > 0;
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!canSubmit) return;
|
||||
createTask({
|
||||
requirementId,
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
categoryId,
|
||||
assigneeId,
|
||||
reviewerId: undefined,
|
||||
priority: effectivePriority,
|
||||
estimateHours,
|
||||
startDate: undefined,
|
||||
dueDate: dueDate || undefined,
|
||||
completedAt: undefined,
|
||||
status: 'todo',
|
||||
blockReason: undefined,
|
||||
blockedById: undefined,
|
||||
predecessorIds: predecessorIds.length > 0 ? predecessorIds : undefined,
|
||||
riskLevel: undefined,
|
||||
createdBy: user?.name || '系统',
|
||||
});
|
||||
onCreated?.();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
|
||||
<div className="w-full max-w-lg rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-[14px] font-semibold text-[var(--ink)]">新建开发任务</h3>
|
||||
<button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
|
||||
</div>
|
||||
<div className="space-y-3 max-h-[60vh] overflow-y-auto">
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">任务标题 *</label>
|
||||
<input value={title} onChange={(e) => setTitle(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" placeholder="例如：排班界面开发" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">所属需求 *</label>
|
||||
<select value={requirementId} onChange={(e) => { setRequirementId(e.target.value); const r = versionReqs.find((x) => x.id === e.target.value); if (r) setPriority(r.priority); }} 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">
|
||||
{versionReqs.map((r) => <option key={r.id} value={r.id}>{r.code} {r.title}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">任务类型 *</label>
|
||||
<select value={categoryId} onChange={(e) => setCategoryId(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">
|
||||
{categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">负责人 *</label>
|
||||
<select value={assigneeId} onChange={(e) => setAssigneeId(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">
|
||||
<option value="">选择负责人</option>
|
||||
{members.map((m) => <option key={m.id} value={m.name}>{m.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">优先级</label>
|
||||
<select value={effectivePriority} onChange={(e) => setPriority(e.target.value as Priority)} 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">
|
||||
{(['P0','P1','P2','P3'] as Priority[]).map((p) => <option key={p} value={p}>{p}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">预计工时(h) *</label>
|
||||
<input type="number" min={0.5} step={0.5} value={estimateHours} onChange={(e) => setEstimateHours(parseFloat(e.target.value) || 0)} 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" />
|
||||
</div>
|
||||
<div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
{versionTasks.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">前置任务</label>
|
||||
<div className="space-y-1 max-h-28 overflow-y-auto border border-[var(--line)] rounded-lg p-2">
|
||||
{versionTasks.map((t) => (
|
||||
<label key={t.id} className="flex items-center gap-2 text-[12px] text-[var(--ink)]">
|
||||
<input type="checkbox" checked={predecessorIds.includes(t.id)} onChange={(e) => setPredecessorIds(e.target.checked ? [...predecessorIds, t.id] : predecessorIds.filter((x) => x !== t.id))} />
|
||||
<span className="text-[var(--ink-muted)] font-mono">{t.taskNo}</span> {t.title}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-[12px] text-[var(--ink-soft)] mb-1">描述</label>
|
||||
<textarea rows={3} 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="任务描述（可选）" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4 border-t border-[var(--line)] mt-4">
|
||||
<button onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
|
||||
<button onClick={handleSubmit} disabled={!canSubmit} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] disabled:opacity-50">创建</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
131
apps/web/components/dev-task/DevTaskDetailDrawer.tsx
Normal file
131
apps/web/components/dev-task/DevTaskDetailDrawer.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { X, AlertTriangle, Link2 } from 'lucide-react';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
import { CategoryChip } from './CategoryChip';
|
||||
import { WorklogPanel } from './WorklogPanel';
|
||||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||||
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
|
||||
import { ALLOWED_TRANSITIONS, DEV_TASK_STATUS_LABEL, formatHours } from '@/lib/dev-task';
|
||||
import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
|
||||
|
||||
interface Props {
|
||||
task: DevTask;
|
||||
allTasks: DevTask[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function DevTaskDetailDrawer({ task, allTasks, onClose }: Props) {
|
||||
const { changeStatus, setBlocked } = useDevTaskStore();
|
||||
const { categories } = useTaskCategoryStore();
|
||||
const category = categories.find((c) => c.id === task.categoryId);
|
||||
|
||||
const [blockReason, setBlockReason] = useState(task.blockReason || '');
|
||||
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 result = changeStatus(task.id, to);
|
||||
if (!result.ok) alert(result.message);
|
||||
};
|
||||
|
||||
const handleBlock = () => {
|
||||
if (!blockReason.trim()) return;
|
||||
setBlocked(task.id, true, blockReason.trim());
|
||||
setShowBlockInput(false);
|
||||
};
|
||||
|
||||
const handleUnblock = () => {
|
||||
setBlocked(task.id, false);
|
||||
setBlockReason('');
|
||||
};
|
||||
|
||||
return (
|
||||
<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()}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between h-14 px-5 border-b border-[var(--line)] shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[12px] font-mono text-[var(--ink-muted)]">{task.taskNo}</span>
|
||||
<StatusBadge status={task.status} />
|
||||
{task.isBlocked && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">阻塞</span>}
|
||||
</div>
|
||||
<button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4" /></button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-5">
|
||||
<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>}
|
||||
|
||||
{/* 状态流转 */}
|
||||
{nextStatuses.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[11px] text-[var(--ink-muted)]">流转到：</span>
|
||||
{nextStatuses.map((s) => (
|
||||
<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">
|
||||
{DEV_TASK_STATUS_LABEL[s]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 阻塞管理 */}
|
||||
<div className="rounded-lg border border-[var(--line)] p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[12px] font-medium text-[var(--ink)]">阻塞状态</span>
|
||||
{task.isBlocked ? (
|
||||
<button onClick={handleUnblock} className="text-[11px] text-emerald-600 hover:underline">解除阻塞</button>
|
||||
) : (
|
||||
<button onClick={() => setShowBlockInput(true)} className="text-[11px] text-red-500 hover:underline">标记阻塞</button>
|
||||
)}
|
||||
</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" />
|
||||
<span>{task.blockReason}</span>
|
||||
</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><span className="text-[var(--ink-muted)]">类型：</span><CategoryChip category={category} /></div>
|
||||
<div><span className="text-[var(--ink-muted)]">负责人：</span><span className="text-[var(--ink)]">{task.assigneeId}</span></div>
|
||||
<div><span className="text-[var(--ink-muted)]">优先级：</span><span className="text-[var(--ink)]">{task.priority}</span></div>
|
||||
<div><span className="text-[var(--ink-muted)]">预计工时：</span><span className="text-[var(--ink)]">{formatHours(task.estimateHours)}</span></div>
|
||||
{task.dueDate && <div><span className="text-[var(--ink-muted)]">截止日期：</span><span className="text-[var(--ink)]">{task.dueDate}</span></div>}
|
||||
{task.completedAt && <div><span className="text-[var(--ink-muted)]">完成日期：</span><span className="text-[var(--ink)]">{task.completedAt}</span></div>}
|
||||
</div>
|
||||
|
||||
{/* 前置任务 */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* 工时记录 */}
|
||||
<WorklogPanel taskId={task.id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
apps/web/components/dev-task/DevTaskRow.tsx
Normal file
47
apps/web/components/dev-task/DevTaskRow.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
import { CategoryChip } from './CategoryChip';
|
||||
import { formatHours } from '@/lib/dev-task';
|
||||
import type { DevTask } from '@/lib/dev-task';
|
||||
import type { TaskCategory } from '@/lib/task-category';
|
||||
|
||||
interface Props {
|
||||
task: DevTask;
|
||||
category?: TaskCategory;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const PRIORITY_DOT: Record<string, string> = {
|
||||
P0: 'bg-red-500',
|
||||
P1: 'bg-orange-400',
|
||||
P2: 'bg-blue-400',
|
||||
P3: 'bg-zinc-300',
|
||||
};
|
||||
|
||||
export function DevTaskRow({ task, category, onClick }: Props) {
|
||||
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[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.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>
|
||||
<CategoryChip category={category} />
|
||||
<StatusBadge status={task.status} />
|
||||
<span className="text-[11px] text-[var(--ink-muted)] w-20 text-right tabular-nums">
|
||||
{task.actualHours > 0 ? `${task.actualHours}h/` : ''}{formatHours(task.estimateHours).split('（')[0]}
|
||||
</span>
|
||||
<span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{task.assigneeId}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
apps/web/components/dev-task/DevTaskTab.tsx
Normal file
104
apps/web/components/dev-task/DevTaskTab.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { Plus, Code2 } from 'lucide-react';
|
||||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||||
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
|
||||
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
|
||||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||||
import { DevTaskRow } from './DevTaskRow';
|
||||
import { DevTaskCreateModal } from './DevTaskCreateModal';
|
||||
import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
|
||||
import { calcGroupProgress } from '@/lib/dev-task';
|
||||
import type { DevTask } from '@/lib/dev-task';
|
||||
|
||||
interface Props {
|
||||
versionId: string;
|
||||
requirementIds: string[];
|
||||
}
|
||||
|
||||
export function DevTaskTab({ versionId, requirementIds }: Props) {
|
||||
const { tasks, fetchTasks } = useDevTaskStore();
|
||||
const { categories, fetchCategories } = useTaskCategoryStore();
|
||||
const { fetchWorklogs } = useTaskWorklogStore();
|
||||
const { requirements } = useRequirementStore();
|
||||
|
||||
useEffect(() => { fetchTasks(); }, [fetchTasks]);
|
||||
useEffect(() => { fetchCategories(); }, [fetchCategories]);
|
||||
useEffect(() => { fetchWorklogs(); }, [fetchWorklogs]);
|
||||
|
||||
const versionTasks = useMemo(
|
||||
() => tasks.filter((t) => requirementIds.includes(t.requirementId)),
|
||||
[tasks, requirementIds],
|
||||
);
|
||||
|
||||
const progress = calcGroupProgress(versionTasks);
|
||||
const totalEstimate = versionTasks.reduce((s, t) => s + t.estimateHours, 0);
|
||||
const totalActual = versionTasks.reduce((s, t) => s + t.actualHours, 0);
|
||||
const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
|
||||
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [selectedTask, setSelectedTask] = useState<DevTask | null>(null);
|
||||
|
||||
const groupedByReq = useMemo(() => {
|
||||
const map = new Map<string, DevTask[]>();
|
||||
for (const t of versionTasks) {
|
||||
const list = map.get(t.requirementId) || [];
|
||||
list.push(t);
|
||||
map.set(t.requirementId, list);
|
||||
}
|
||||
return map;
|
||||
}, [versionTasks]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 统计栏 */}
|
||||
<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">
|
||||
<Code2 className="h-4 w-4 text-[var(--accent)]" />
|
||||
<span className="text-[13px] font-medium text-[var(--ink)]">开发进度 {progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 flex-1 rounded-full bg-[var(--bg)] overflow-hidden">
|
||||
<div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
<span className="text-[11px] text-[var(--ink-muted)] tabular-nums">
|
||||
{versionTasks.length} 任务 · 投入 {totalActual}h / 预计 {totalEstimate}h
|
||||
</span>
|
||||
{blockedCount > 0 && (
|
||||
<span className="text-[11px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded">{blockedCount} 阻塞</span>
|
||||
)}
|
||||
<button onClick={() => setShowCreate(true)} className="ml-auto flex items-center gap-1 h-7 px-3 rounded-md text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
|
||||
<Plus className="h-3 w-3" />新建任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 按需求分组列表 */}
|
||||
{versionTasks.length === 0 ? (
|
||||
<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>
|
||||
<button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>
|
||||
</div>
|
||||
) : (
|
||||
Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
|
||||
const req = requirements.find((r) => r.id === reqId);
|
||||
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)]">
|
||||
<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>
|
||||
{reqTasks.map((t) => (
|
||||
<DevTaskRow key={t.id} task={t} category={categories.find((c) => c.id === t.categoryId)} onClick={() => setSelectedTask(t)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
{showCreate && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} onClose={() => setShowCreate(false)} />}
|
||||
{selectedTask && <DevTaskDetailDrawer task={selectedTask} allTasks={versionTasks} onClose={() => setSelectedTask(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
apps/web/components/dev-task/StatusBadge.tsx
Normal file
12
apps/web/components/dev-task/StatusBadge.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
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 }) {
|
||||
return (
|
||||
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}>
|
||||
{DEV_TASK_STATUS_LABEL[status]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
85
apps/web/components/dev-task/WorklogPanel.tsx
Normal file
85
apps/web/components/dev-task/WorklogPanel.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
|
||||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||||
import { useAuthStore } from '@/stores/useAuthStore';
|
||||
import { getTaskWorklogs } from '@/lib/task-worklog';
|
||||
|
||||
interface Props {
|
||||
taskId: string;
|
||||
}
|
||||
|
||||
export function WorklogPanel({ taskId }: Props) {
|
||||
const { worklogs, addWorklog, deleteWorklog } = useTaskWorklogStore();
|
||||
const { syncActualHours } = useDevTaskStore();
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
const taskLogs = getTaskWorklogs(worklogs, taskId);
|
||||
const totalHours = taskLogs.reduce((sum, w) => sum + w.hours, 0);
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
const [date, setDate] = useState(today);
|
||||
const [hours, setHours] = useState<number>(1);
|
||||
const [workContent, setWorkContent] = useState('');
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!workContent.trim() || hours <= 0) return;
|
||||
addWorklog({ taskId, userId: user?.name || '', date, hours, workContent: workContent.trim() });
|
||||
const newTotal = totalHours + hours;
|
||||
syncActualHours(taskId, newTotal);
|
||||
setWorkContent('');
|
||||
setHours(1);
|
||||
setAdding(false);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string, logHours: number) => {
|
||||
deleteWorklog(id);
|
||||
syncActualHours(taskId, Math.max(0, totalHours - logHours));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[12px] font-medium text-[var(--ink)]">工时记录（累计 {totalHours}h）</span>
|
||||
{!adding && (
|
||||
<button onClick={() => setAdding(true)} className="flex items-center gap-1 text-[11px] text-[var(--accent)] hover:underline">
|
||||
<Plus className="h-3 w-3" />登记工时
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{adding && (
|
||||
<div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-3 space-y-2">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
|
||||
<input type="number" min={0.5} step={0.5} value={hours} onChange={(e) => setHours(parseFloat(e.target.value) || 0)} placeholder="小时" className="h-8 rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
|
||||
</div>
|
||||
<input value={workContent} onChange={(e) => setWorkContent(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); }} placeholder="工作内容（必填）" className="h-8 w-full rounded-md border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={() => setAdding(false)} className="h-7 px-2 text-[11px] text-[var(--ink-muted)] hover:text-[var(--ink)]">取消</button>
|
||||
<button onClick={handleAdd} disabled={!workContent.trim() || hours <= 0} className="h-7 px-3 rounded-md text-[11px] font-medium bg-[var(--accent)] text-white disabled:opacity-50">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{taskLogs.length === 0 && !adding && (
|
||||
<p className="text-[12px] text-[var(--ink-muted)] py-2">暂无工时记录</p>
|
||||
)}
|
||||
|
||||
{taskLogs.map((log) => (
|
||||
<div key={log.id} className="flex items-start gap-2 py-1.5 border-b border-[var(--line)] last:border-0">
|
||||
<div className="flex-1">
|
||||
<p className="text-[12px] text-[var(--ink)]">{log.workContent}</p>
|
||||
<p className="text-[10px] text-[var(--ink-muted)]">{log.date} · {log.hours}h · {log.userId}</p>
|
||||
</div>
|
||||
<button onClick={() => handleDelete(log.id, log.hours)} className="p-1 rounded hover:bg-red-50">
|
||||
<Trash2 className="h-3 w-3 text-[var(--ink-muted)] hover:text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user