705 lines
32 KiB
TypeScript
705 lines
32 KiB
TypeScript
'use client';
|
||
|
||
import { RouteGuard } from '@/components/auth/Guard';
|
||
import { useEffect, useMemo, useState } from 'react';
|
||
import { Search, Plus, Lightbulb, ArrowUp, ArrowDown, ChevronDown, ChevronRight, FolderOpen, Layers } from 'lucide-react';
|
||
import { useRequirementStore } from '@/stores/useRequirementStore';
|
||
import { useProductStore } from '@/stores/useProductStore';
|
||
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
||
import { useAuthStore } from '@/stores/useAuthStore';
|
||
import { flattenProjects, flattenVersions } from '@/lib/derive';
|
||
import { REQ_STATUS_LABEL, REQ_STATUS_COLOR, SOURCE_TYPE_LABEL } from '@/lib/requirement';
|
||
import type { Requirement, RequirementStatus, SourceType } from '@/lib/requirement';
|
||
import { deriveReqDevStatus, canEditRequirement, canCloseRequirement, REQ_DEV_STATUS_LABEL, REQ_DEV_STATUS_COLOR } from '@/lib/linkage-engine';
|
||
import { buildRequirementScopeTree, filterRequirementsByScope, type RequirementProductScopeNode, type RequirementScopeSelection } from '@/lib/requirement-scope';
|
||
import { Pagination, usePagination } from '@/components/Pagination';
|
||
import { RequirementModal } from '@/components/requirement/RequirementModal';
|
||
import { RequirementDetail } from '@/components/requirement/RequirementDetail';
|
||
import { DictDrawer, SourceDrawer } from '@/components/requirement/DictDrawer';
|
||
import { FilterSelect } from '@/components/FilterSelect';
|
||
|
||
const PRIORITY_COLORS: Record<string, string> = {
|
||
P0: 'bg-red-500/10 text-red-600',
|
||
P1: 'bg-orange-500/10 text-orange-600',
|
||
P2: 'bg-blue-500/10 text-blue-600',
|
||
P3: 'bg-zinc-100 text-zinc-600',
|
||
P4: 'bg-zinc-100 text-zinc-500',
|
||
};
|
||
|
||
const STATUS_TABS: { key: string; label: string }[] = [
|
||
{ key: 'all', label: '全部' },
|
||
{ key: 'pending_review', label: '待评审' },
|
||
{ key: 'adopted', label: '已采纳' },
|
||
{ key: 'rejected', label: '已拒绝' },
|
||
{ key: 'developing', label: '开发中' },
|
||
{ key: 'dev_completed', label: '已完成' },
|
||
{ key: 'released', label: '已上线' },
|
||
{ key: 'closed', label: '已关闭' },
|
||
];
|
||
|
||
export default function RequirementsPage() {
|
||
return (
|
||
<RouteGuard permission="requirement:view">
|
||
<RequirementsPageContent />
|
||
</RouteGuard>
|
||
);
|
||
}
|
||
|
||
function RequirementProductNode({
|
||
product,
|
||
selectedScope,
|
||
onSelect,
|
||
}: {
|
||
product: RequirementProductScopeNode;
|
||
selectedScope: RequirementScopeSelection;
|
||
onSelect: (scope: RequirementScopeSelection) => void;
|
||
}) {
|
||
const [expanded, setExpanded] = useState(true);
|
||
const active = selectedScope.type === 'product' && selectedScope.productId === product.id;
|
||
|
||
return (
|
||
<div className="mb-0.5">
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
type="button"
|
||
onClick={() => setExpanded((value) => !value)}
|
||
className="flex h-7 w-6 shrink-0 items-center justify-center rounded-md text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)]"
|
||
aria-label={expanded ? '收起产品' : '展开产品'}
|
||
>
|
||
{expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelect({ type: 'product', productId: product.id })}
|
||
className={`flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-[12px] transition-colors ${
|
||
active
|
||
? 'bg-[var(--accent-soft)] font-medium text-[var(--accent)]'
|
||
: 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'
|
||
}`}
|
||
>
|
||
<span className="min-w-0 flex-1 truncate text-left">{product.name}</span>
|
||
<ScopeSignals count={product.count} />
|
||
</button>
|
||
</div>
|
||
{expanded && (
|
||
<div className="ml-7 mt-0.5 space-y-0.5">
|
||
{product.projects.map((project) => (
|
||
<RequirementProjectNode
|
||
key={project.id}
|
||
project={project}
|
||
selectedScope={selectedScope}
|
||
onSelect={onSelect}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function RequirementProjectNode({
|
||
project,
|
||
selectedScope,
|
||
onSelect,
|
||
}: {
|
||
project: RequirementProductScopeNode['projects'][number];
|
||
selectedScope: RequirementScopeSelection;
|
||
onSelect: (scope: RequirementScopeSelection) => void;
|
||
}) {
|
||
const active = selectedScope.type === 'project' && selectedScope.projectId === project.id;
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelect({ type: 'project', projectId: project.id })}
|
||
className={`flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-[12px] transition-colors ${
|
||
active
|
||
? 'bg-[var(--accent-soft)] font-medium text-[var(--accent)]'
|
||
: 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'
|
||
}`}
|
||
>
|
||
<FolderOpen className="h-3.5 w-3.5 shrink-0 text-[var(--ink-muted)]" />
|
||
<span className="min-w-0 flex-1 truncate text-left">{project.name}</span>
|
||
<ScopeSignals count={project.count} compact />
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function ScopeSignals({ count, compact = false }: { count: RequirementProductScopeNode['count']; compact?: boolean }) {
|
||
const pendingReview = count.byStatus.pending_review ?? 0;
|
||
const active = (count.byStatus.developing ?? 0) + (count.byStatus.testing ?? 0);
|
||
|
||
return (
|
||
<span className="flex shrink-0 items-center gap-1">
|
||
{!compact && <ScopeSignal title="待评审" label="评" count={pendingReview} tone="amber" />}
|
||
{!compact && <ScopeSignal title="执行中" label="进" count={active} tone="blue" />}
|
||
<ScopeCount count={count.total} />
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function ScopeSignal({ title, label, count, tone }: { title: string; label: string; count: number; tone: 'amber' | 'blue' }) {
|
||
if (count <= 0) return null;
|
||
const toneClass = tone === 'amber' ? 'bg-amber-50 text-amber-700' : 'bg-blue-50 text-blue-700';
|
||
return (
|
||
<span title={title} className={`rounded px-1.5 py-0.5 text-[10px] font-medium tabular-nums ${toneClass}`}>
|
||
{label}{count}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function ScopeCount({ count }: { count: number }) {
|
||
return (
|
||
<span className="rounded bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-[var(--ink-muted)]">
|
||
{count}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function RequirementsPageContent() {
|
||
const {
|
||
requirements, fetchRequirements, createRequirement, updateRequirement, deleteRequirement,
|
||
sourceTargets, types, platforms,
|
||
addSourceTarget, updateSourceTarget, deleteSourceTarget,
|
||
addType, updateType, deleteType,
|
||
addPlatform, updatePlatform, deletePlatform,
|
||
} = useRequirementStore();
|
||
const { overview, fetchOverview } = useProductStore();
|
||
const { tasks: devTasks, fetchTasks: fetchDevTasks } = useDevTaskStore();
|
||
const user = useAuthStore((s) => s.user);
|
||
const currentUserName = user?.name || '系统';
|
||
const allProjects = useMemo(() => flattenProjects(overview), [overview]);
|
||
const allVersions = useMemo(() => flattenVersions(overview), [overview]);
|
||
|
||
const [selectedScope, setSelectedScope] = useState<RequirementScopeSelection>({ type: 'all' });
|
||
const [search, setSearch] = useState('');
|
||
const [statusFilter, setStatusFilter] = useState('all');
|
||
const [priorityFilter, setPriorityFilter] = useState('all');
|
||
const [typeFilter, setTypeFilter] = useState('all');
|
||
const [versionFilter, setVersionFilter] = useState('all');
|
||
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [editingReq, setEditingReq] = useState<Requirement | null>(null);
|
||
const [viewingReq, setViewingReq] = useState<Requirement | null>(null);
|
||
const [drawerType, setDrawerType] = useState<null | 'source' | 'type' | 'platform'>(null);
|
||
const [rejectingReq, setRejectingReq] = useState<Requirement | null>(null);
|
||
const [rejectReason, setRejectReason] = useState('');
|
||
const [dateSort, setDateSort] = useState<'desc' | 'asc'>('desc');
|
||
|
||
useEffect(() => { fetchOverview(); }, [fetchOverview]);
|
||
useEffect(() => { fetchRequirements(); }, [fetchRequirements]);
|
||
useEffect(() => { fetchDevTasks(); }, [fetchDevTasks]);
|
||
|
||
const selectedScopeKey = selectedScope.type === 'all'
|
||
? 'all'
|
||
: selectedScope.type === 'product'
|
||
? `product:${selectedScope.productId}`
|
||
: `project:${selectedScope.projectId}`;
|
||
|
||
useEffect(() => {
|
||
setVersionFilter('all');
|
||
}, [selectedScopeKey]);
|
||
|
||
const scopeTree = useMemo(() => buildRequirementScopeTree(overview, requirements), [overview, requirements]);
|
||
const scopedRequirements = useMemo(() => filterRequirementsByScope(requirements, selectedScope), [requirements, selectedScope]);
|
||
const scopedVersions = useMemo(() => {
|
||
if (selectedScope.type === 'product') return allVersions.filter((v) => v.productId === selectedScope.productId);
|
||
if (selectedScope.type === 'project') return allVersions.filter((v) => v.projectId === selectedScope.projectId);
|
||
return allVersions;
|
||
}, [allVersions, selectedScope]);
|
||
|
||
const selectedScopeTitle = useMemo(() => {
|
||
if (selectedScope.type === 'product') {
|
||
return overview.find((product) => product.id === selectedScope.productId)?.name ?? '产品需求';
|
||
}
|
||
if (selectedScope.type === 'project') {
|
||
return allProjects.find((project) => project.id === selectedScope.projectId)?.name ?? '项目需求';
|
||
}
|
||
return '全部需求';
|
||
}, [allProjects, overview, selectedScope]);
|
||
|
||
const selectedScopeMeta = useMemo(() => {
|
||
if (selectedScope.type === 'product') return '产品下全部项目';
|
||
if (selectedScope.type === 'project') {
|
||
const project = allProjects.find((item) => item.id === selectedScope.projectId);
|
||
return project ? `${project.productName} / 项目` : '项目';
|
||
}
|
||
return '所有产品与项目';
|
||
}, [allProjects, selectedScope]);
|
||
|
||
// Resolve version name from overview
|
||
const resolveVersionName = (versionId?: string): string => {
|
||
if (!versionId) return '-';
|
||
for (const product of overview) {
|
||
const version = product.versions?.find((v: any) => v.id === versionId);
|
||
if (version) return version.name;
|
||
}
|
||
return '-';
|
||
};
|
||
|
||
const filtered = useMemo(() => {
|
||
let list = [...scopedRequirements];
|
||
|
||
// search filter
|
||
if (search) {
|
||
const q = search.toLowerCase();
|
||
list = list.filter(
|
||
(r) => r.code.toLowerCase().includes(q) || r.title.toLowerCase().includes(q),
|
||
);
|
||
}
|
||
|
||
// status filter
|
||
if (statusFilter !== 'all') {
|
||
list = statusFilter === 'dev_completed'
|
||
? list.filter((r) => deriveReqDevStatus(r.id, devTasks) === 'completed')
|
||
: list.filter((r) => r.status === statusFilter);
|
||
}
|
||
|
||
// priority filter
|
||
if (priorityFilter !== 'all') {
|
||
list = list.filter((r) => r.priority === priorityFilter);
|
||
}
|
||
|
||
// type filter
|
||
if (typeFilter !== 'all') {
|
||
list = list.filter((r) => r.typeId === typeFilter);
|
||
}
|
||
if (versionFilter !== 'all') {
|
||
list = list.filter((r) => r.versionId === versionFilter);
|
||
}
|
||
|
||
// sort by createdAt
|
||
list.sort((a, b) => {
|
||
const diff = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
|
||
return dateSort === 'asc' ? diff : -diff;
|
||
});
|
||
|
||
return list;
|
||
}, [scopedRequirements, search, statusFilter, priorityFilter, typeFilter, versionFilter, dateSort, devTasks]);
|
||
|
||
const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filtered, 20);
|
||
|
||
const handleEdit = (req: Requirement) => {
|
||
setViewingReq(null);
|
||
setEditingReq(req);
|
||
setShowModal(true);
|
||
};
|
||
|
||
const handleRowClick = (req: Requirement) => {
|
||
setViewingReq(req);
|
||
};
|
||
|
||
const handleCreate = () => {
|
||
setEditingReq(null);
|
||
setShowModal(true);
|
||
};
|
||
|
||
return (
|
||
<div className="flex h-full overflow-hidden bg-[var(--bg)]">
|
||
<aside className="flex w-72 shrink-0 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
|
||
<div className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] px-4">
|
||
<div>
|
||
<h1 className="text-[14px] font-semibold text-[var(--ink)]">需求池</h1>
|
||
<p className="mt-0.5 text-[11px] text-[var(--ink-muted)]">按产品 / 项目查看</p>
|
||
</div>
|
||
<span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
|
||
{requirements.length}
|
||
</span>
|
||
</div>
|
||
<div className="flex-1 overflow-y-auto p-2">
|
||
<button
|
||
onClick={() => setSelectedScope({ type: 'all' })}
|
||
className={`mb-1 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-[12px] transition-colors ${
|
||
selectedScope.type === 'all'
|
||
? 'bg-[var(--accent-soft)] font-medium text-[var(--accent)]'
|
||
: 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'
|
||
}`}
|
||
>
|
||
<Layers className="h-3.5 w-3.5 shrink-0" />
|
||
<span className="flex-1 text-left">全部需求</span>
|
||
<ScopeCount count={requirements.length} />
|
||
</button>
|
||
{scopeTree.map((product) => (
|
||
<RequirementProductNode
|
||
key={product.id}
|
||
product={product}
|
||
selectedScope={selectedScope}
|
||
onSelect={setSelectedScope}
|
||
/>
|
||
))}
|
||
</div>
|
||
</aside>
|
||
|
||
<main className="min-w-0 flex-1 flex flex-col overflow-hidden">
|
||
{/* Header */}
|
||
<header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2.5">
|
||
<h2 className="truncate text-[15px] font-semibold tracking-tight text-[var(--ink)]">{selectedScopeTitle}</h2>
|
||
<span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
|
||
{scopedRequirements.length}
|
||
</span>
|
||
</div>
|
||
<p className="mt-0.5 text-[11px] text-[var(--ink-muted)]">{selectedScopeMeta}</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => setDrawerType('source')}
|
||
className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] font-medium text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors"
|
||
>
|
||
<Lightbulb className="h-3.5 w-3.5" strokeWidth={2} />
|
||
来源管理
|
||
</button>
|
||
<button
|
||
onClick={handleCreate}
|
||
className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors"
|
||
>
|
||
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
|
||
新建需求
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Filters */}
|
||
<div className="flex shrink-0 flex-wrap items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
|
||
<div className="relative">
|
||
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
|
||
<input
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
placeholder="搜索编号或标题"
|
||
className="h-8 w-64 rounded-lg border border-[var(--line)] bg-[var(--bg)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
|
||
/>
|
||
</div>
|
||
|
||
{/* Status tabs */}
|
||
<div className="flex flex-wrap gap-1">
|
||
{STATUS_TABS.map((tab) => (
|
||
<button
|
||
key={tab.key}
|
||
onClick={() => setStatusFilter(tab.key)}
|
||
className={`h-8 rounded-lg px-3 text-[12px] transition-colors ${
|
||
statusFilter === tab.key
|
||
? 'bg-[var(--accent)] text-white'
|
||
: 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)]'
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Priority dropdown */}
|
||
<FilterSelect
|
||
value={priorityFilter}
|
||
onChange={setPriorityFilter}
|
||
options={['P0', 'P1', 'P2', 'P3', 'P4'].map((p) => ({ value: p, label: p }))}
|
||
placeholder="全部优先级"
|
||
allLabel="全部优先级"
|
||
/>
|
||
|
||
{/* Type dropdown */}
|
||
<FilterSelect
|
||
value={typeFilter}
|
||
onChange={setTypeFilter}
|
||
options={types.map((t) => ({ value: t.id, label: t.name }))}
|
||
placeholder="全部类型"
|
||
allLabel="全部类型"
|
||
/>
|
||
|
||
{/* Version dropdown */}
|
||
<FilterSelect
|
||
value={versionFilter}
|
||
onChange={setVersionFilter}
|
||
options={scopedVersions.map((v) => ({ value: v.id, label: v.name }))}
|
||
placeholder="全部版本"
|
||
allLabel="全部版本"
|
||
/>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 overflow-y-auto bg-[var(--bg)]">
|
||
<div className="px-5 py-4">
|
||
{filtered.length === 0 ? (
|
||
<div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
|
||
<p className="text-[13px] font-medium text-[var(--ink-soft)]">没有找到匹配的需求</p>
|
||
<p className="mt-1.5 text-[12px] text-[var(--ink-muted)]">尝试调整筛选条件</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="overflow-x-auto rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
|
||
<table className="min-w-[1120px] w-full text-left text-[13px]">
|
||
<thead className="sticky top-0 z-10 bg-[var(--bg-subtle)]">
|
||
<tr className="border-b border-[var(--line)] bg-[var(--bg-subtle)]">
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求编号</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求概述</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求来源</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">所属项目</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求类型</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">业务状态</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">优先级</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">所属版本</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">实际进度</th>
|
||
<th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">录入人员</th>
|
||
<th
|
||
className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)] cursor-pointer select-none hover:text-[var(--ink-soft)] transition-colors"
|
||
onClick={() => setDateSort(dateSort === 'desc' ? 'asc' : 'desc')}
|
||
>
|
||
<span className="inline-flex items-center gap-1">
|
||
录入日期
|
||
{dateSort === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUp className="h-3 w-3" />}
|
||
</span>
|
||
</th>
|
||
<th className="px-4 py-2.5 text-right text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{paged.map((req) => (
|
||
<tr
|
||
key={req.id}
|
||
onClick={() => handleRowClick(req)}
|
||
className="border-b border-[var(--line-soft)] last:border-0 cursor-pointer transition-colors hover:bg-[var(--bg-subtle)]"
|
||
>
|
||
{/* 需求编号 */}
|
||
<td className="px-4 py-3 whitespace-nowrap">
|
||
<span className="font-medium text-[var(--ink)]">{req.code}</span>
|
||
</td>
|
||
|
||
{/* 需求概述 */}
|
||
<td className="px-4 py-3">
|
||
<span className="block max-w-[200px] truncate text-[var(--ink)]">{req.title}</span>
|
||
</td>
|
||
|
||
{/* 需求来源 */}
|
||
<td className="px-4 py-3 text-[13px] text-[var(--ink-soft)]">
|
||
{SOURCE_TYPE_LABEL[req.sourceType]}: {req.sourceTarget}
|
||
</td>
|
||
|
||
{/* 所属项目 */}
|
||
<td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
|
||
{allProjects.find((p) => p.id === req.projectId)?.name ?? '-'}
|
||
</td>
|
||
|
||
{/* 需求类型 */}
|
||
<td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
|
||
{types.find((t) => t.id === req.typeId)?.name ?? '-'}
|
||
</td>
|
||
|
||
{/* 状态 */}
|
||
<td className="px-4 py-3">
|
||
<span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${REQ_STATUS_COLOR[req.status]}`}>
|
||
{REQ_STATUS_LABEL[req.status]}
|
||
</span>
|
||
</td>
|
||
|
||
{/* 优先级 */}
|
||
<td className="px-4 py-3">
|
||
<span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${PRIORITY_COLORS[req.priority] ?? 'bg-zinc-100 text-zinc-500'}`}>
|
||
{req.priority}
|
||
</span>
|
||
</td>
|
||
|
||
{/* 所属版本 */}
|
||
<td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
|
||
{resolveVersionName(req.versionId)}
|
||
</td>
|
||
|
||
{/* 开发状态 */}
|
||
<td className="px-4 py-3">
|
||
{(() => {
|
||
const devStatus = deriveReqDevStatus(req.id, devTasks);
|
||
return (
|
||
<span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-medium ${REQ_DEV_STATUS_COLOR[devStatus]}`}>
|
||
{REQ_DEV_STATUS_LABEL[devStatus]}
|
||
</span>
|
||
);
|
||
})()}
|
||
</td>
|
||
|
||
{/* 录入人员 */}
|
||
<td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
|
||
{req.creator}
|
||
</td>
|
||
|
||
{/* 录入日期 */}
|
||
<td className="px-4 py-3 text-[var(--ink-muted)] tabular-nums">
|
||
{new Date(req.createdAt).toISOString().slice(0, 10)}
|
||
</td>
|
||
|
||
{/* 操作 */}
|
||
<td className="px-4 py-3 text-right" onClick={(e) => e.stopPropagation()}>
|
||
<div className="flex items-center justify-end gap-1">
|
||
{/* 编辑：待评审/已采纳/已规划，且开发中不可编辑 */}
|
||
{(['pending_review', 'adopted', 'planned'] as const).includes(req.status as any) && canEditRequirement(req.id, devTasks) && (
|
||
<button
|
||
onClick={() => handleEdit(req)}
|
||
className="h-6 px-2 rounded text-[11px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] transition-colors"
|
||
>
|
||
编辑
|
||
</button>
|
||
)}
|
||
{/* 待评审：采纳/拒绝 */}
|
||
{req.status === 'pending_review' && (
|
||
<>
|
||
<button
|
||
onClick={() => updateRequirement(req.id, { status: 'adopted' })}
|
||
className="h-6 px-2 rounded text-[11px] font-medium text-emerald-600 hover:bg-emerald-50 transition-colors"
|
||
>
|
||
采纳
|
||
</button>
|
||
<button
|
||
onClick={() => { setRejectingReq(req); setRejectReason(''); }}
|
||
className="h-6 px-2 rounded text-[11px] font-medium text-red-600 hover:bg-red-50 transition-colors"
|
||
>
|
||
拒绝
|
||
</button>
|
||
</>
|
||
)}
|
||
{/* 已采纳/已规划：关闭 */}
|
||
{(req.status === 'adopted' || req.status === 'planned') && canCloseRequirement(req.id, devTasks) && (
|
||
<button
|
||
onClick={() => updateRequirement(req.id, { status: 'closed' })}
|
||
className="h-6 px-2 rounded text-[11px] font-medium text-orange-600 hover:bg-orange-50 transition-colors"
|
||
>
|
||
关闭
|
||
</button>
|
||
)}
|
||
{/* 删除：待评审/已拒绝/已关闭（已采纳后不能直接删，需走拒绝） */}
|
||
{(['pending_review', 'rejected', 'closed'] as const).includes(req.status as any) && (
|
||
<button
|
||
onClick={() => deleteRequirement(req.id)}
|
||
className="h-6 px-2 rounded text-[11px] font-medium text-red-500 hover:bg-red-50 transition-colors"
|
||
>
|
||
删除
|
||
</button>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{/* Detail drawer */}
|
||
{viewingReq && (
|
||
<RequirementDetail
|
||
requirement={viewingReq}
|
||
projects={allProjects.map((p) => ({ id: p.id, name: p.name }))}
|
||
types={types}
|
||
platforms={platforms}
|
||
sourceTargets={sourceTargets}
|
||
requirements={requirements}
|
||
resolveVersionName={resolveVersionName}
|
||
onClose={() => setViewingReq(null)}
|
||
onEdit={canEditRequirement(viewingReq.id, devTasks) ? () => handleEdit(viewingReq) : undefined}
|
||
onAdopt={() => { updateRequirement(viewingReq.id, { status: 'adopted' }); setViewingReq(null); }}
|
||
onReject={() => { setRejectingReq(viewingReq); setRejectReason(''); setViewingReq(null); }}
|
||
onCloseReq={canCloseRequirement(viewingReq.id, devTasks) ? () => { updateRequirement(viewingReq.id, { status: 'closed' }); setViewingReq(null); } : undefined}
|
||
onDelete={() => { deleteRequirement(viewingReq.id); setViewingReq(null); }}
|
||
/>
|
||
)}
|
||
|
||
{/* Modal */}
|
||
{showModal && (
|
||
<RequirementModal
|
||
open={true}
|
||
initial={editingReq}
|
||
products={overview.map((p) => ({ id: p.id, name: p.name }))}
|
||
projects={allProjects.map((p) => ({ id: p.id, name: p.name, productId: p.productId }))}
|
||
versions={allVersions.map((v) => ({ id: v.id, name: v.name, projectId: v.projectId }))}
|
||
sourceTargets={sourceTargets}
|
||
types={types}
|
||
platforms={platforms}
|
||
requirements={requirements}
|
||
currentUserName={currentUserName}
|
||
onClose={() => { setShowModal(false); setEditingReq(null); }}
|
||
onSubmit={(data) => {
|
||
if (editingReq) {
|
||
updateRequirement(editingReq.id, data);
|
||
} else {
|
||
createRequirement(data);
|
||
}
|
||
setShowModal(false);
|
||
setEditingReq(null);
|
||
}}
|
||
onOpenDrawer={(type) => setDrawerType(type)}
|
||
/>
|
||
)}
|
||
|
||
{/* Drawer */}
|
||
{drawerType === 'source' && (
|
||
<SourceDrawer
|
||
open={true}
|
||
items={sourceTargets}
|
||
onClose={() => setDrawerType(null)}
|
||
onAdd={addSourceTarget}
|
||
onUpdate={updateSourceTarget}
|
||
onDelete={deleteSourceTarget}
|
||
/>
|
||
)}
|
||
{drawerType === 'type' && (
|
||
<DictDrawer
|
||
open={true}
|
||
title="需求类型管理"
|
||
items={types}
|
||
onClose={() => setDrawerType(null)}
|
||
onAdd={addType}
|
||
onUpdate={updateType}
|
||
onDelete={deleteType}
|
||
/>
|
||
)}
|
||
{drawerType === 'platform' && (
|
||
<DictDrawer
|
||
open={true}
|
||
title="支持端管理"
|
||
items={platforms}
|
||
onClose={() => setDrawerType(null)}
|
||
onAdd={addPlatform}
|
||
onUpdate={updatePlatform}
|
||
onDelete={deletePlatform}
|
||
/>
|
||
)}
|
||
|
||
{/* 拒绝原因弹窗 */}
|
||
{rejectingReq && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setRejectingReq(null)}>
|
||
<div className="w-full max-w-sm rounded-xl bg-[var(--bg-card)] border border-[var(--line)] p-5 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
|
||
<h3 className="text-[13px] font-semibold text-[var(--ink)] mb-3">拒绝需求</h3>
|
||
<p className="text-[12px] text-[var(--ink-muted)] mb-2">需求：{rejectingReq.title}</p>
|
||
<textarea
|
||
value={rejectReason}
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
placeholder="请填写拒绝原因..."
|
||
rows={3}
|
||
className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none resize-none"
|
||
/>
|
||
<div className="flex justify-end gap-2 mt-3">
|
||
<button onClick={() => setRejectingReq(null)} 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={() => {
|
||
if (!rejectReason.trim()) return;
|
||
updateRequirement(rejectingReq.id, { status: 'rejected', description: rejectingReq.description + `\n\n【拒绝原因】${rejectReason.trim()}` });
|
||
setRejectingReq(null);
|
||
}}
|
||
disabled={!rejectReason.trim()}
|
||
className="h-8 px-3 rounded-lg text-[12px] font-medium bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
确认拒绝
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|