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
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user