530 lines
26 KiB
TypeScript
530 lines
26 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Search, FileText, Palette, ClipboardList, Code2, ClipboardCheck, Bug as BugIcon, ExternalLink, CheckCircle2, ChevronRight, ChevronDown, FolderOpen, Layers } from 'lucide-react';
|
|
import { useProductStore } from '@/stores/useProductStore';
|
|
import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
|
|
import { useRequirementStore } from '@/stores/useRequirementStore';
|
|
import { useDevTaskStore } from '@/stores/useDevTaskStore';
|
|
import { useTestCaseStore } from '@/stores/useTestCaseStore';
|
|
import { useBugStore } from '@/stores/useBugStore';
|
|
import { useAuthStore } from '@/stores/useAuthStore';
|
|
import { useTaskWorklogStore } from '@/stores/useTaskWorklogStore';
|
|
import { useWorkActivityStore } from '@/stores/useWorkActivityStore';
|
|
import { flattenVersions } from '@/lib/derive';
|
|
import { aggregateWorkItems, getWorkspacePendingCountByVersion, WORK_ITEM_TYPE_LABEL } from '@/lib/workspace-engine';
|
|
import type { WorkItem, WorkItemType } from '@/lib/workspace-engine';
|
|
import { DailyReportPanel } from '@/components/workspace/DailyReportPanel';
|
|
import { PlanDetailDrawer } from '@/components/version/PlanDetailDrawer';
|
|
import { DevTaskDetailDrawer } from '@/components/dev-task/DevTaskDetailDrawer';
|
|
import { TestCaseDetailDrawer } from '@/components/test-case/TestCaseDetailDrawer';
|
|
import { BugDetailDrawer } from '@/components/bug/BugDetailDrawer';
|
|
import { BugCreateModal } from '@/components/bug/BugCreateModal';
|
|
import { DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR, getEstimateHours, getActualHours } from '@/lib/dev-task';
|
|
import { formatDateTime, formatLocalDate } from '@/lib/format';
|
|
import { formatShortTime, formatWorkHours } from '@/lib/work-hours';
|
|
import { TEST_CASE_STATUS_LABEL, TEST_CASE_STATUS_COLOR } from '@/lib/test-case';
|
|
import { BUG_STATUS_LABEL, BUG_STATUS_COLOR, BUG_SEVERITY_LABEL, BUG_SEVERITY_COLOR } from '@/lib/bug';
|
|
import { getWorkspaceDailyReport } from '@/lib/workspace-daily-report';
|
|
import { VERSION_STATUS_BG, VERSION_STATUS_LABEL, getVersionReadonlyNotice, isVersionReadonly, type VersionStatus } from '@/lib/version-status';
|
|
import { loadV22WorkspaceData, type V22WorkspaceData } from '@/lib/v22-api';
|
|
import { selectWorkspaceCollections } from '@/lib/workspace-v22-source';
|
|
|
|
type TabKey = 'all' | 'plan_research' | 'plan_product' | 'plan_ui' | 'devTask' | 'testCase' | 'bug';
|
|
type WorkspaceVersionContext = { id: string; name: string; productName: string; projectName: string; status: VersionStatus };
|
|
type TreeVersion = { id: string; name: string; status: VersionStatus; pendingCount: number };
|
|
type ProductTree = Map<string, { name: string; projects: Map<string, { name: string; versions: TreeVersion[] }> }>;
|
|
|
|
const TABS: { key: TabKey; label: string; icon: any }[] = [
|
|
{ key: 'all', label: '全部', icon: ClipboardList },
|
|
{ key: 'plan_research', label: '调研', icon: Search },
|
|
{ key: 'plan_product', label: '产品方案', icon: FileText },
|
|
{ key: 'plan_ui', label: 'UI设计', icon: Palette },
|
|
{ key: 'devTask', label: '开发任务', icon: Code2 },
|
|
{ key: 'testCase', label: '测试用例', icon: ClipboardCheck },
|
|
{ key: 'bug', label: 'Bug', icon: BugIcon },
|
|
];
|
|
|
|
const PLAN_STATUS_STYLE: Record<string, string> = {
|
|
pending: 'bg-zinc-100 text-zinc-600',
|
|
in_progress: 'bg-blue-50 text-blue-600',
|
|
completed: 'bg-emerald-50 text-emerald-600',
|
|
};
|
|
const PLAN_STATUS_LABEL: Record<string, string> = { pending: '未开始', in_progress: '进行中', completed: '已完成' };
|
|
|
|
export default function WorkspacePage() {
|
|
const router = useRouter();
|
|
const { overview, fetchOverview } = useProductStore();
|
|
const { plans, fetchPlans, loaded: plansLoaded } = useVersionPlanStore();
|
|
const { requirements, fetchRequirements, loaded: requirementsLoaded } = useRequirementStore();
|
|
const { tasks: devTasks, fetchTasks, loaded: devTasksLoaded } = useDevTaskStore();
|
|
const { testCases, fetchTestCases, loaded: testCasesLoaded } = useTestCaseStore();
|
|
const { bugs, fetchBugs, loaded: bugsLoaded } = useBugStore();
|
|
const { worklogs, fetchWorklogs } = useTaskWorklogStore();
|
|
const { activities, fetchActivities } = useWorkActivityStore();
|
|
const user = useAuthStore((s) => s.user);
|
|
const [activeTab, setActiveTab] = useState<TabKey>('all');
|
|
const [showCompleted, setShowCompleted] = useState(true);
|
|
const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
|
|
const [drawerItem, setDrawerItem] = useState<WorkItem | null>(null);
|
|
const [bugFromTestCaseId, setBugFromTestCaseId] = useState<string | null>(null);
|
|
const [v22WorkspaceData, setV22WorkspaceData] = useState<V22WorkspaceData | null>(null);
|
|
const [v22WorkspaceLoaded, setV22WorkspaceLoaded] = useState(false);
|
|
const [v22WorkspaceFailed, setV22WorkspaceFailed] = useState(false);
|
|
|
|
useEffect(() => { fetchOverview(); }, [fetchOverview]);
|
|
useEffect(() => { fetchWorklogs(); }, [fetchWorklogs]);
|
|
useEffect(() => { fetchActivities(); }, [fetchActivities]);
|
|
|
|
const userId = user?.id ?? '';
|
|
const userName = user?.name ?? '';
|
|
const workspaceUserKey = userId || userName;
|
|
const workspaceUserRefs = useMemo(() => [userName, userId].filter(Boolean), [userId, userName]);
|
|
|
|
useEffect(() => {
|
|
if (!workspaceUserKey.trim()) {
|
|
setV22WorkspaceData(null);
|
|
setV22WorkspaceLoaded(false);
|
|
setV22WorkspaceFailed(false);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
setV22WorkspaceLoaded(false);
|
|
setV22WorkspaceFailed(false);
|
|
loadV22WorkspaceData(workspaceUserKey)
|
|
.then((data) => {
|
|
if (cancelled) return;
|
|
setV22WorkspaceData(data);
|
|
setV22WorkspaceLoaded(true);
|
|
})
|
|
.catch(() => {
|
|
if (cancelled) return;
|
|
setV22WorkspaceData(null);
|
|
setV22WorkspaceFailed(true);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [workspaceUserKey]);
|
|
|
|
useEffect(() => {
|
|
if (!workspaceUserKey.trim() || !v22WorkspaceFailed) return;
|
|
void fetchPlans();
|
|
void fetchRequirements();
|
|
void fetchTasks();
|
|
void fetchTestCases();
|
|
void fetchBugs();
|
|
}, [
|
|
fetchBugs,
|
|
fetchPlans,
|
|
fetchRequirements,
|
|
fetchTasks,
|
|
fetchTestCases,
|
|
v22WorkspaceFailed,
|
|
workspaceUserKey,
|
|
]);
|
|
|
|
const allVersions = useMemo(() => flattenVersions(overview), [overview]);
|
|
|
|
const versionMap = useMemo(() => {
|
|
const map = new Map<string, WorkspaceVersionContext>();
|
|
allVersions.forEach((v) => map.set(v.id, { id: v.id, name: v.name, productName: v.productName, projectName: v.projectName, status: v.status }));
|
|
return map;
|
|
}, [allVersions]);
|
|
|
|
const requirementVersionMap = useMemo(() => {
|
|
const map = new Map<string, string>();
|
|
requirements.forEach((r) => { if (r.versionId) map.set(r.id, r.versionId); });
|
|
return map;
|
|
}, [requirements]);
|
|
|
|
const workspaceCollections = useMemo(
|
|
() => selectWorkspaceCollections({
|
|
v22Loaded: v22WorkspaceLoaded,
|
|
v22Failed: v22WorkspaceFailed,
|
|
v22Data: v22WorkspaceData,
|
|
appData: { plans, devTasks, testCases, bugs },
|
|
}),
|
|
[bugs, devTasks, plans, testCases, v22WorkspaceData, v22WorkspaceFailed, v22WorkspaceLoaded],
|
|
);
|
|
|
|
const workItems = useMemo(() =>
|
|
aggregateWorkItems(
|
|
workspaceUserRefs,
|
|
workspaceCollections.versionPlans,
|
|
workspaceCollections.devTasks,
|
|
workspaceCollections.testCases,
|
|
workspaceCollections.bugs,
|
|
versionMap,
|
|
requirementVersionMap,
|
|
),
|
|
[workspaceUserRefs, workspaceCollections, versionMap, requirementVersionMap]
|
|
);
|
|
const pendingCountByVersion = useMemo(() => getWorkspacePendingCountByVersion(workItems), [workItems]);
|
|
|
|
// 构建树：只显示跟自己有关的产品/项目/版本
|
|
const tree = useMemo(() => {
|
|
const myVersionIds = new Set(workItems.map((i) => i.versionId).filter(Boolean));
|
|
const productMap: ProductTree = new Map();
|
|
|
|
allVersions.forEach((v) => {
|
|
if (!myVersionIds.has(v.id)) return;
|
|
if (!productMap.has(v.productName)) productMap.set(v.productName, { name: v.productName, projects: new Map() });
|
|
const prod = productMap.get(v.productName)!;
|
|
if (!prod.projects.has(v.projectName)) prod.projects.set(v.projectName, { name: v.projectName, versions: [] });
|
|
const proj = prod.projects.get(v.projectName)!;
|
|
const pending = pendingCountByVersion.get(v.id) ?? 0;
|
|
if (!proj.versions.find((ver) => ver.id === v.id)) {
|
|
proj.versions.push({ id: v.id, name: v.name, status: v.status, pendingCount: pending });
|
|
}
|
|
});
|
|
|
|
return productMap;
|
|
}, [allVersions, pendingCountByVersion, workItems]);
|
|
|
|
const filteredItems = useMemo(() => {
|
|
let items = workItems;
|
|
if (selectedVersionId) items = items.filter((i) => i.versionId === selectedVersionId);
|
|
if (activeTab !== 'all') items = items.filter((i) => i.type === activeTab);
|
|
if (!showCompleted) items = items.filter((i) => !i.completed);
|
|
return items.sort((a, b) => (a.completed !== b.completed ? (a.completed ? 1 : -1) : 0));
|
|
}, [workItems, activeTab, showCompleted, selectedVersionId]);
|
|
|
|
const today = useMemo(() => formatLocalDate(), []);
|
|
|
|
const dailyReport = useMemo(() =>
|
|
getWorkspaceDailyReport({
|
|
activities,
|
|
worklogs,
|
|
workItems,
|
|
userId: userName || userId,
|
|
date: today,
|
|
}),
|
|
[activities, userId, worklogs, workItems, userName, today]
|
|
);
|
|
|
|
// 待办数量按 tab 分（受 version filter 影响）
|
|
const pendingByTab = useMemo(() => {
|
|
const base = selectedVersionId ? workItems.filter((i) => i.versionId === selectedVersionId) : workItems;
|
|
return {
|
|
all: base.filter((i) => !i.completed).length,
|
|
plan_research: base.filter((i) => i.type === 'plan_research' && !i.completed).length,
|
|
plan_product: base.filter((i) => i.type === 'plan_product' && !i.completed).length,
|
|
plan_ui: base.filter((i) => i.type === 'plan_ui' && !i.completed).length,
|
|
devTask: base.filter((i) => i.type === 'devTask' && !i.completed).length,
|
|
testCase: base.filter((i) => i.type === 'testCase' && !i.completed).length,
|
|
bug: base.filter((i) => i.type === 'bug' && !i.completed).length,
|
|
};
|
|
}, [workItems, selectedVersionId]);
|
|
|
|
const pendingCount = pendingByTab.all;
|
|
const completedCount = (selectedVersionId ? workItems.filter((i) => i.versionId === selectedVersionId) : workItems).filter((i) => i.completed).length;
|
|
const selectedVersion = selectedVersionId ? versionMap.get(selectedVersionId) : undefined;
|
|
const drawerVersionStatus = drawerItem ? versionMap.get(drawerItem.versionId)?.status : undefined;
|
|
const drawerReadOnly = drawerVersionStatus ? isVersionReadonly(drawerVersionStatus) : false;
|
|
const ensureWorkspaceDrawerStores = useCallback(async (item: WorkItem) => {
|
|
const pendingLoads: Array<Promise<void>> = [];
|
|
if (!requirementsLoaded) pendingLoads.push(fetchRequirements());
|
|
if ((item.type === 'plan_research' || item.type === 'plan_product' || item.type === 'plan_ui') && !plansLoaded) {
|
|
pendingLoads.push(fetchPlans());
|
|
}
|
|
if (item.type === 'devTask' && !devTasksLoaded) pendingLoads.push(fetchTasks());
|
|
if (item.type === 'testCase' && !testCasesLoaded) pendingLoads.push(fetchTestCases());
|
|
if (item.type === 'bug' && !bugsLoaded) pendingLoads.push(fetchBugs());
|
|
await Promise.all(pendingLoads);
|
|
}, [
|
|
bugsLoaded,
|
|
devTasksLoaded,
|
|
fetchBugs,
|
|
fetchPlans,
|
|
fetchRequirements,
|
|
fetchTasks,
|
|
fetchTestCases,
|
|
plansLoaded,
|
|
requirementsLoaded,
|
|
testCasesLoaded,
|
|
]);
|
|
const openWorkItemDrawer = useCallback(async (item: WorkItem) => {
|
|
await ensureWorkspaceDrawerStores(item);
|
|
setDrawerItem(item);
|
|
}, [ensureWorkspaceDrawerStores]);
|
|
|
|
return (
|
|
<div className="flex h-full">
|
|
{/* 左侧第一列：产品/项目/版本树 */}
|
|
<div className="w-64 shrink-0 border-r border-[var(--line)] bg-[var(--bg-card)] flex flex-col">
|
|
<div className="flex h-14 items-center px-4 border-b border-[var(--line)]">
|
|
<h1 className="text-[14px] font-semibold text-[var(--ink)]">与我相关</h1>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-2">
|
|
<button
|
|
onClick={() => setSelectedVersionId(null)}
|
|
className={`w-full flex items-center gap-2 px-3 py-1.5 rounded-lg text-[12px] mb-1 transition-colors ${!selectedVersionId ? 'bg-[var(--accent-soft)] text-[var(--accent)] font-medium' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`}
|
|
>
|
|
<Layers className="h-3 w-3" />
|
|
<span className="flex-1 text-left">全部</span>
|
|
{pendingByTab.all > 0 && !selectedVersionId && (
|
|
<span className="text-[10px] bg-red-500 text-white rounded-full px-1.5 min-w-[18px] text-center">{pendingByTab.all}</span>
|
|
)}
|
|
</button>
|
|
{Array.from(tree.entries()).map(([prodName, prod]) => (
|
|
<ProductNode key={prodName} name={prodName} prod={prod} selectedVersionId={selectedVersionId} onSelect={setSelectedVersionId} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 左侧第二列：环节分类 */}
|
|
<div className="w-56 shrink-0 border-r border-[var(--line)] bg-[var(--bg-card)] flex flex-col">
|
|
<div className="flex h-14 items-center px-4 border-b border-[var(--line)]">
|
|
<div className="flex items-center gap-3 text-[11px]">
|
|
<span className="text-[var(--ink-muted)]">待办 <span className="font-medium text-[var(--ink)]">{pendingCount}</span></span>
|
|
<span className="text-[var(--ink-muted)]">完成 <span className="font-medium text-emerald-600">{completedCount}</span></span>
|
|
</div>
|
|
</div>
|
|
<nav className="flex-1 p-2 space-y-0.5">
|
|
{TABS.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const pending = pendingByTab[tab.key];
|
|
const active = activeTab === tab.key;
|
|
return (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-[12px] transition-colors ${active ? 'bg-[var(--accent-soft)] text-[var(--accent)] font-medium' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`}
|
|
>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
<span className="flex-1 text-left">{tab.label}</span>
|
|
{pending > 0 && (
|
|
<span className="text-[10px] bg-red-500 text-white rounded-full px-1.5 min-w-[18px] text-center">{pending}</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
<div className="p-3 border-t border-[var(--line)]">
|
|
<label className="flex items-center gap-2 text-[11px] text-[var(--ink-soft)] cursor-pointer">
|
|
<input type="checkbox" checked={showCompleted} onChange={(e) => setShowCompleted(e.target.checked)} className="h-3.5 w-3.5 rounded" />
|
|
显示已完成
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧：任务列表 */}
|
|
<div className="min-w-0 flex-1 flex flex-col overflow-hidden">
|
|
<header className="flex h-14 shrink-0 items-center border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
|
|
<h2 className="text-[14px] font-semibold text-[var(--ink)]">{TABS.find((t) => t.key === activeTab)?.label}</h2>
|
|
<span className="ml-2 text-[12px] text-[var(--ink-muted)]">{filteredItems.length} 项</span>
|
|
{selectedVersion && (
|
|
<span className="ml-3 inline-flex items-center gap-1.5 rounded-full bg-[var(--accent-soft)] px-2 py-0.5 text-[11px] text-[var(--accent)]">
|
|
<span>{selectedVersion.name}</span>
|
|
<VersionStatusTag status={selectedVersion.status} />
|
|
</span>
|
|
)}
|
|
</header>
|
|
|
|
<div className="flex-1 overflow-y-auto p-5 bg-[var(--bg)]">
|
|
{filteredItems.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>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{filteredItems.map((item) => (
|
|
<WorkItemCard
|
|
key={item.id}
|
|
item={item}
|
|
versionStatus={versionMap.get(item.versionId)?.status}
|
|
onNavigate={() => item.versionId && router.push(`/versions/${item.versionId}`)}
|
|
onClick={() => { void openWorkItemDrawer(item); }}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DailyReportPanel report={dailyReport} />
|
|
|
|
{/* Detail Drawers */}
|
|
{drawerItem && (drawerItem.type === 'plan_research' || drawerItem.type === 'plan_product' || drawerItem.type === 'plan_ui') && (
|
|
<PlanDetailDrawer planId={drawerItem.id} readOnly={drawerReadOnly} onClose={() => setDrawerItem(null)} contextLabel={`${drawerItem.productName} / ${drawerItem.projectName} / ${drawerItem.versionName}`} />
|
|
)}
|
|
{drawerItem && drawerItem.type === 'devTask' && (
|
|
<DevTaskDetailDrawer taskId={drawerItem.id} allTaskIds={devTasks.map((t) => t.id)} readOnly={drawerReadOnly} onClose={() => setDrawerItem(null)} contextLabel={`${drawerItem.productName} / ${drawerItem.projectName} / ${drawerItem.versionName}`} />
|
|
)}
|
|
{drawerItem && drawerItem.type === 'testCase' && (
|
|
<TestCaseDetailDrawer testCaseId={drawerItem.id} readOnly={drawerReadOnly} onClose={() => setDrawerItem(null)} onCreateBug={(tcId) => { if (!drawerReadOnly) { setDrawerItem(null); setBugFromTestCaseId(tcId); } }} contextLabel={`${drawerItem.productName} / ${drawerItem.projectName} / ${drawerItem.versionName}`} />
|
|
)}
|
|
{drawerItem && drawerItem.type === 'bug' && (
|
|
<BugDetailDrawer bugId={drawerItem.id} readOnly={drawerReadOnly} onClose={() => setDrawerItem(null)} contextLabel={`${drawerItem.productName} / ${drawerItem.projectName} / ${drawerItem.versionName}`} />
|
|
)}
|
|
{bugFromTestCaseId && (
|
|
<BugCreateModal testCaseId={bugFromTestCaseId} onClose={() => setBugFromTestCaseId(null)} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProductNode({ name, prod, selectedVersionId, onSelect }: {
|
|
name: string;
|
|
prod: { name: string; projects: Map<string, { name: string; versions: TreeVersion[] }> };
|
|
selectedVersionId: string | null;
|
|
onSelect: (id: string | null) => void;
|
|
}) {
|
|
const [expanded, setExpanded] = useState(true);
|
|
return (
|
|
<div className="mb-0.5">
|
|
<button onClick={() => setExpanded(!expanded)} className="w-full flex items-center gap-1.5 px-2 py-1 rounded text-[11px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">
|
|
{expanded ? <ChevronDown className="h-3 w-3 shrink-0" /> : <ChevronRight className="h-3 w-3 shrink-0" />}
|
|
<span className="truncate">{name}</span>
|
|
</button>
|
|
{expanded && Array.from(prod.projects.entries()).map(([projName, proj]) => (
|
|
<ProjectNode key={projName} name={projName} versions={proj.versions} selectedVersionId={selectedVersionId} onSelect={onSelect} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProjectNode({ name, versions, selectedVersionId, onSelect }: {
|
|
name: string;
|
|
versions: TreeVersion[];
|
|
selectedVersionId: string | null;
|
|
onSelect: (id: string | null) => void;
|
|
}) {
|
|
const [expanded, setExpanded] = useState(true);
|
|
return (
|
|
<div className="ml-3">
|
|
<button onClick={() => setExpanded(!expanded)} className="w-full flex items-center gap-1.5 px-2 py-1 rounded text-[11px] text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)]">
|
|
{expanded ? <ChevronDown className="h-2.5 w-2.5 shrink-0" /> : <ChevronRight className="h-2.5 w-2.5 shrink-0" />}
|
|
<FolderOpen className="h-3 w-3 shrink-0 text-[var(--ink-muted)]" />
|
|
<span className="truncate">{name}</span>
|
|
</button>
|
|
{expanded && versions.map((v) => (
|
|
<button
|
|
key={v.id}
|
|
onClick={() => onSelect(selectedVersionId === v.id ? null : v.id)}
|
|
className={`w-full flex items-center gap-1.5 ml-5 px-2 py-1 rounded text-[11px] transition-colors ${selectedVersionId === v.id ? 'bg-[var(--accent-soft)] text-[var(--accent)] font-medium' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`}
|
|
>
|
|
<span className="flex-1 text-left truncate">{v.name}</span>
|
|
<VersionStatusTag status={v.status} readonlyOnly />
|
|
{v.pendingCount > 0 && (
|
|
<span className="text-[9px] bg-red-500 text-white rounded-full px-1.5 min-w-[16px] text-center">{v.pendingCount}</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function VersionStatusTag({ status, readonlyOnly = false }: { status?: VersionStatus; readonlyOnly?: boolean }) {
|
|
if (!status) return null;
|
|
const readonlyNotice = getVersionReadonlyNotice(status);
|
|
if (readonlyOnly && !readonlyNotice) return null;
|
|
|
|
return (
|
|
<span
|
|
className={`shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-medium leading-none ${VERSION_STATUS_BG[status]}`}
|
|
title={readonlyNotice ?? VERSION_STATUS_LABEL[status]}
|
|
>
|
|
{VERSION_STATUS_LABEL[status]}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function WorkItemCard({ item, versionStatus, onNavigate, onClick }: {
|
|
item: WorkItem;
|
|
versionStatus?: VersionStatus;
|
|
onNavigate: () => void;
|
|
onClick: () => void;
|
|
}) {
|
|
const statusBadge = getStatusBadge(item);
|
|
const isDevTask = item.type === 'devTask';
|
|
const devTaskRaw = isDevTask ? (item.raw as any) : null;
|
|
const devEstimate = devTaskRaw ? getEstimateHours(devTaskRaw) : 0;
|
|
const devActual = devTaskRaw ? getActualHours(devTaskRaw) : 0;
|
|
const devOverrun = devActual > devEstimate && devEstimate > 0;
|
|
const devTimeRange = devTaskRaw ? (
|
|
devTaskRaw.actualStartAt
|
|
? `实际 ${formatShortTime(devTaskRaw.actualStartAt)} → ${devTaskRaw.actualEndAt ? formatShortTime(devTaskRaw.actualEndAt) : '进行中'}`
|
|
: (devTaskRaw.expectedStartAt && devTaskRaw.expectedEndAt
|
|
? `预计 ${formatShortTime(devTaskRaw.expectedStartAt)} → ${formatShortTime(devTaskRaw.expectedEndAt)}`
|
|
: '')
|
|
) : '';
|
|
|
|
return (
|
|
<div onClick={onClick} className={`rounded-xl border border-[var(--line)] bg-[var(--bg-card)] px-4 py-3 transition-colors hover:border-[var(--accent)] cursor-pointer ${item.completed ? 'opacity-60' : ''}`}>
|
|
<div className="flex items-center gap-3">
|
|
{item.completed && <CheckCircle2 className="h-4 w-4 text-emerald-500 shrink-0" />}
|
|
<span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-[var(--bg-subtle)] text-[var(--ink-muted)] shrink-0">
|
|
{WORK_ITEM_TYPE_LABEL[item.type]}
|
|
</span>
|
|
{statusBadge}
|
|
{item.extra?.taskNo && <span className="text-[11px] font-mono text-[var(--ink-muted)] shrink-0">{item.extra.taskNo}</span>}
|
|
{item.extra?.caseNo && <span className="text-[11px] font-mono text-[var(--ink-muted)] shrink-0">{item.extra.caseNo}</span>}
|
|
{item.extra?.bugNo && <span className="text-[11px] font-mono text-[var(--ink-muted)] shrink-0">{item.extra.bugNo}</span>}
|
|
<span className="text-[13px] font-medium text-[var(--ink)] flex-1 truncate">{item.title}</span>
|
|
{item.priority && <span className="text-[10px] text-[var(--ink-muted)] shrink-0">{item.priority}</span>}
|
|
{item.extra?.severity && (
|
|
<span className={`text-[10px] px-1.5 py-0.5 rounded shrink-0 ${BUG_SEVERITY_COLOR[item.extra.severity as keyof typeof BUG_SEVERITY_COLOR] || ''}`}>
|
|
{BUG_SEVERITY_LABEL[item.extra.severity as keyof typeof BUG_SEVERITY_LABEL] || ''}
|
|
</span>
|
|
)}
|
|
<button onClick={(e) => { e.stopPropagation(); onNavigate(); }} className="h-6 w-6 flex items-center justify-center rounded text-[var(--ink-muted)] hover:text-[var(--accent)] hover:bg-[var(--bg-subtle)] shrink-0" title="跳转到版本详情">
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-1.5 text-[11px] text-[var(--ink-muted)]">
|
|
<span>{item.productName}</span>
|
|
<span className="text-[var(--line)]">/</span>
|
|
<span>{item.projectName}</span>
|
|
<span className="text-[var(--line)]">/</span>
|
|
<button onClick={(e) => { e.stopPropagation(); onNavigate(); }} className="text-[var(--accent)] hover:underline">{item.versionName}</button>
|
|
<VersionStatusTag status={versionStatus} readonlyOnly />
|
|
{isDevTask && devTimeRange && (
|
|
<>
|
|
<span className="ml-2 tabular-nums">{devTimeRange}</span>
|
|
{devEstimate > 0 && (
|
|
<span className={`ml-2 tabular-nums ${devActual > 0 ? (devOverrun ? 'text-red-600' : (devActual < devEstimate ? 'text-emerald-600' : '')) : ''}`}>
|
|
{devActual > 0 ? `${formatWorkHours(devActual)} / ${formatWorkHours(devEstimate)}` : `预 ${formatWorkHours(devEstimate)}`}
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
{item.extra?.startTime && <span className="ml-2">{formatDateTime(item.extra.startTime)} → {formatDateTime(item.extra.endTime)}</span>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getStatusBadge(item: WorkItem) {
|
|
if (item.type === 'devTask') {
|
|
return (
|
|
<span className={`text-[10px] font-medium px-2 py-0.5 rounded-full shrink-0 ${DEV_TASK_STATUS_COLOR[item.status as keyof typeof DEV_TASK_STATUS_COLOR] || 'bg-zinc-100 text-zinc-600'}`}>
|
|
{DEV_TASK_STATUS_LABEL[item.status as keyof typeof DEV_TASK_STATUS_LABEL] || item.status}
|
|
</span>
|
|
);
|
|
}
|
|
if (item.type === 'testCase') {
|
|
return (
|
|
<span className={`text-[10px] font-medium px-2 py-0.5 rounded-full shrink-0 ${TEST_CASE_STATUS_COLOR[item.status as keyof typeof TEST_CASE_STATUS_COLOR] || 'bg-zinc-100 text-zinc-600'}`}>
|
|
{TEST_CASE_STATUS_LABEL[item.status as keyof typeof TEST_CASE_STATUS_LABEL] || item.status}
|
|
</span>
|
|
);
|
|
}
|
|
if (item.type === 'bug') {
|
|
return (
|
|
<span className={`text-[10px] font-medium px-2 py-0.5 rounded-full shrink-0 ${BUG_STATUS_COLOR[item.status as keyof typeof BUG_STATUS_COLOR] || 'bg-zinc-100 text-zinc-600'}`}>
|
|
{BUG_STATUS_LABEL[item.status as keyof typeof BUG_STATUS_LABEL] || item.status}
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span className={`text-[10px] font-medium px-2 py-0.5 rounded-full shrink-0 ${PLAN_STATUS_STYLE[item.status] || 'bg-zinc-100 text-zinc-600'}`}>
|
|
{PLAN_STATUS_LABEL[item.status] || item.status}
|
|
</span>
|
|
);
|
|
}
|