258 lines
13 KiB
TypeScript
258 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useEffect } from 'react';
|
|
import { Plus, Code2, Trash2 } from 'lucide-react';
|
|
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
|
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
|
|
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
|
|
import { useRequirementStore } from '@/stores/useRequirementStore';
|
|
import { useMemberStore } from '@/stores/useMemberStore';
|
|
import { useAuthStore } from '@/stores/useAuthStore';
|
|
import { DevTaskRow } from './DevTaskRow';
|
|
import { DevTaskCreateModal } from './DevTaskCreateModal';
|
|
import { DevTaskDetailDrawer } from './DevTaskDetailDrawer';
|
|
import { calcGroupProgress, DEV_TASK_STATUS_LABEL, aggregateDevTaskHours, devTaskIntervals } from '@/lib/dev-task';
|
|
import { calcTwoMetrics } from '@/lib/work-hours';
|
|
import { Pagination, usePagination } from '@/components/Pagination';
|
|
import { FilterSelect } from '@/components/FilterSelect';
|
|
import { SearchInput, matchTitleOrNo } from '@/components/SearchInput';
|
|
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
|
|
import { orderByRequirementForGrouping } from '@/lib/requirement-grouping';
|
|
import { buildEffortSummaryMetrics, sumPositiveHours } from '@/lib/effort-summary';
|
|
import type { DevTask, DevTaskStatus } from '@/lib/dev-task';
|
|
|
|
interface Props {
|
|
versionId: string;
|
|
requirementIds: string[];
|
|
versionDeadline?: string;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
const NO_REQUIREMENT_GROUP_PREFIX = '__no_requirement__';
|
|
|
|
function getDevTaskGroupKey(task: DevTask): string {
|
|
return task.requirementId || `${NO_REQUIREMENT_GROUP_PREFIX}${task.requirementName || '未命名需求'}`;
|
|
}
|
|
|
|
function getNoRequirementGroupName(groupKey: string): string {
|
|
return groupKey.slice(NO_REQUIREMENT_GROUP_PREFIX.length) || '未命名需求';
|
|
}
|
|
|
|
export function DevTaskTab({ versionId, requirementIds, versionDeadline, readOnly = false }: Props) {
|
|
const { tasks, fetchTasks, deleteTask } = useDevTaskStore();
|
|
const { categories, fetchCategories } = useTaskCategoryStore();
|
|
const { fetchWorklogs } = useTaskWorklogStore();
|
|
const { requirements } = useRequirementStore();
|
|
const { members } = useMemberStore();
|
|
const user = useAuthStore((s) => s.user);
|
|
|
|
useEffect(() => { fetchTasks(); }, [fetchTasks]);
|
|
useEffect(() => { fetchCategories(); }, [fetchCategories]);
|
|
useEffect(() => { fetchWorklogs(); }, [fetchWorklogs]);
|
|
|
|
const reqIdSet = useMemo(() => new Set(requirementIds), [requirementIds]);
|
|
const versionTasks = useMemo(
|
|
() => tasks.filter((t) => t.versionId === versionId || (!t.versionId && reqIdSet.has(t.requirementId))),
|
|
[tasks, reqIdSet, versionId],
|
|
);
|
|
|
|
const [filterAssignee, setFilterAssignee] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('');
|
|
const [filterBlocked, setFilterBlocked] = useState('');
|
|
const [filterCategory, setFilterCategory] = useState('');
|
|
const [keyword, setKeyword] = useState('');
|
|
const debouncedKeyword = useDebouncedValue(keyword, 300);
|
|
|
|
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);
|
|
if (debouncedKeyword) result = result.filter((t) => matchTitleOrNo({ title: t.title, no: t.taskNo }, debouncedKeyword));
|
|
return result;
|
|
}, [versionTasks, filterAssignee, filterStatus, filterBlocked, filterCategory, debouncedKeyword]);
|
|
|
|
const orderedTasks = useMemo(
|
|
() => orderByRequirementForGrouping(filteredTasks, requirementIds, (task) => task.requirementId),
|
|
[filteredTasks, requirementIds],
|
|
);
|
|
|
|
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(orderedTasks, 20);
|
|
|
|
const progress = calcGroupProgress(versionTasks);
|
|
const { actual: actualHours } = aggregateDevTaskHours(versionTasks);
|
|
const { manhours } = useMemo(() => calcTwoMetrics(devTaskIntervals(versionTasks)), [versionTasks]);
|
|
const effortMetrics = useMemo(
|
|
() => buildEffortSummaryMetrics({
|
|
aiEstimateHours: sumPositiveHours(versionTasks, (task) => task.aiEstimateHours),
|
|
estimateHours: sumPositiveHours(versionTasks, (task) => task.estimateHours),
|
|
actualHours,
|
|
manhours,
|
|
}),
|
|
[versionTasks, actualHours, manhours],
|
|
);
|
|
const blockedCount = versionTasks.filter((t) => t.isBlocked).length;
|
|
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
|
|
|
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
|
|
|
const toggleSelect = (id: string) => {
|
|
if (readOnly) return;
|
|
const next = new Set(selectedIds);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
setSelectedIds(next);
|
|
};
|
|
const handleBatchDelete = () => {
|
|
if (readOnly) return;
|
|
if (selectedIds.size === 0) return;
|
|
if (!confirm(`确定删除选中的 ${selectedIds.size} 个任务？`)) return;
|
|
selectedIds.forEach((id) => deleteTask(id));
|
|
setSelectedIds(new Set());
|
|
};
|
|
|
|
const groupedByReq = useMemo(() => {
|
|
const map = new Map<string, DevTask[]>();
|
|
for (const t of paged) {
|
|
const key = getDevTaskGroupKey(t);
|
|
const list = map.get(key) || [];
|
|
list.push(t);
|
|
map.set(key, list);
|
|
}
|
|
return map;
|
|
}, [paged]);
|
|
|
|
const categoryMap = useMemo(() => new Map(categories.map((c) => [c.id, c])), [categories]);
|
|
const categoryLabelWidthEm = useMemo(
|
|
() => Math.max(4, ...categories.map((category) => category.name.length)) + 1,
|
|
[categories],
|
|
);
|
|
const requirementMap = useMemo(() => new Map(requirements.map((r) => [r.id, r])), [requirements]);
|
|
const allTaskIds = useMemo(() => versionTasks.map((t) => t.id), [versionTasks]);
|
|
|
|
const assignees = useMemo(() => Array.from(new Set(versionTasks.map((t) => t.assigneeId))), [versionTasks]);
|
|
const hasFilter = !!(filterAssignee || filterStatus || filterBlocked || filterCategory || debouncedKeyword);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)] flex-wrap">
|
|
<Code2 className="h-3.5 w-3.5 text-[var(--accent)] shrink-0" />
|
|
<span className="text-[12px] font-medium text-[var(--ink)] shrink-0">{progress}%</span>
|
|
<div className="h-1.5 w-20 rounded-full bg-[var(--bg)] overflow-hidden shrink-0">
|
|
<div className="h-full rounded-full bg-[var(--accent)]" style={{ width: `${progress}%` }} />
|
|
</div>
|
|
<span className="text-[11px] text-[var(--ink-muted)] shrink-0">{versionTasks.length}任务</span>
|
|
{effortMetrics.map((metric) => (
|
|
<span key={metric.label} className="text-[11px] text-[var(--ink-muted)] shrink-0">
|
|
{metric.label} <span className="tabular-nums text-[var(--ink)]">{metric.value}</span>
|
|
</span>
|
|
))}
|
|
{blockedCount > 0 && <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{blockedCount}阻塞</span>}
|
|
|
|
<span className="w-px h-4 bg-[var(--line)] mx-1 shrink-0" />
|
|
|
|
<SearchInput value={keyword} onChange={(v) => { setKeyword(v); setPage(1); }} placeholder="搜索标题/编号" />
|
|
<FilterSelect
|
|
value={filterAssignee || 'all'}
|
|
onChange={(value) => { setFilterAssignee(value === 'all' ? '' : value); setPage(1); }}
|
|
options={[
|
|
...(user?.name ? [{ value: user.name, label: '我的' }] : []),
|
|
...assignees.filter((a) => a !== user?.name).map((a) => ({ value: a, label: a })),
|
|
]}
|
|
allLabel="负责人"
|
|
/>
|
|
<FilterSelect
|
|
value={filterStatus || 'all'}
|
|
onChange={(value) => { setFilterStatus(value === 'all' ? '' : value); setPage(1); }}
|
|
options={(Object.entries(DEV_TASK_STATUS_LABEL) as [DevTaskStatus, string][]).map(([value, label]) => ({ value, label }))}
|
|
allLabel="状态"
|
|
/>
|
|
<FilterSelect
|
|
value={filterBlocked || 'all'}
|
|
onChange={(value) => { setFilterBlocked(value === 'all' ? '' : value); setPage(1); }}
|
|
options={[
|
|
{ value: 'yes', label: '阻塞中' },
|
|
{ value: 'no', label: '正常' },
|
|
]}
|
|
allLabel="阻塞"
|
|
/>
|
|
<FilterSelect
|
|
value={filterCategory || 'all'}
|
|
onChange={(value) => { setFilterCategory(value === 'all' ? '' : value); setPage(1); }}
|
|
options={categories.map((category) => ({ value: category.id, label: category.name }))}
|
|
allLabel="类型"
|
|
/>
|
|
{hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setFilterBlocked(''); setFilterCategory(''); setKeyword(''); setPage(1); }} className="text-[10px] text-[var(--accent)] hover:underline shrink-0">清除</button>}
|
|
|
|
<div className="ml-auto flex items-center gap-2 shrink-0">
|
|
{selectedIds.size > 0 && !readOnly && (
|
|
<button onClick={handleBatchDelete} className="flex items-center gap-1 h-6 px-2 rounded text-[11px] font-medium bg-red-500 text-white hover:bg-red-600">
|
|
<Trash2 className="h-3 w-3" />删除{selectedIds.size}项
|
|
</button>
|
|
)}
|
|
{!readOnly && (
|
|
<button onClick={() => setShowCreate(true)} className="flex items-center gap-1 h-6 px-2.5 rounded text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
|
|
<Plus className="h-3 w-3" />新建
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{filteredTasks.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)]">{hasFilter ? '没有匹配的任务' : '暂无开发任务'}</p>
|
|
{!hasFilter && !readOnly && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个任务</button>}
|
|
</div>
|
|
) : (
|
|
Array.from(groupedByReq.entries()).map(([reqId, reqTasks]) => {
|
|
const isNoRequirementGroup = reqId.startsWith(NO_REQUIREMENT_GROUP_PREFIX);
|
|
const req = isNoRequirementGroup ? undefined : requirementMap.get(reqId);
|
|
const noRequirementName = isNoRequirementGroup ? getNoRequirementGroupName(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 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
|
|
{!readOnly && (
|
|
<div className="pl-4 flex items-center">
|
|
<input type="checkbox" checked={reqTasks.every((t) => selectedIds.has(t.id))} onChange={() => { const ids = reqTasks.map((t) => t.id); const allSelected = ids.every((id) => selectedIds.has(id)); const next = new Set(selectedIds); if (allSelected) ids.forEach((id) => next.delete(id)); else ids.forEach((id) => next.add(id)); setSelectedIds(next); }} className="h-3.5 w-3.5 rounded border-[var(--line)]" />
|
|
</div>
|
|
)}
|
|
<div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-2">
|
|
<span className="h-2 w-2 shrink-0" />
|
|
<span className="w-16 shrink-0 truncate text-[11px] font-mono text-[var(--ink-muted)]" title={isNoRequirementGroup ? '无需求ID' : req?.code}>
|
|
{isNoRequirementGroup ? '无需求ID' : req?.code}
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate text-[12px] font-medium text-[var(--ink)]">
|
|
{isNoRequirementGroup ? noRequirementName : req?.title}
|
|
</span>
|
|
<span className="shrink-0 text-[11px] text-[var(--ink-muted)]">{reqProgress}%</span>
|
|
</div>
|
|
</div>
|
|
{reqTasks.map((t) => (
|
|
<div key={t.id} className="flex items-center">
|
|
{!readOnly && (
|
|
<div className="pl-4 flex items-center">
|
|
<input type="checkbox" checked={selectedIds.has(t.id)} onChange={() => toggleSelect(t.id)} className="h-3.5 w-3.5 rounded border-[var(--line)]" onClick={(e) => e.stopPropagation()} />
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<DevTaskRow task={t} category={categoryMap.get(t.categoryId)} categoryLabelWidthEm={categoryLabelWidthEm} onClick={() => setSelectedTaskId(t.id)} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
|
|
{total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}
|
|
|
|
{showCreate && !readOnly && <DevTaskCreateModal versionId={versionId} requirementIds={requirementIds} versionDeadline={versionDeadline} onClose={() => setShowCreate(false)} />}
|
|
{selectedTaskId && <DevTaskDetailDrawer taskId={selectedTaskId} allTaskIds={allTaskIds} readOnly={readOnly} onClose={() => setSelectedTaskId(null)} />}
|
|
</div>
|
|
);
|
|
}
|