57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
/** 任务进度列表卡片 */
|
|
import { ClipboardList, ChevronRight } from "lucide-react";
|
|
import type { TaskSummary } from "../../types/api";
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
pending: "待处理",
|
|
in_progress: "进行中",
|
|
completed: "已完成",
|
|
cancelled: "已取消",
|
|
};
|
|
|
|
function statusColor(status: string): string {
|
|
switch (status) {
|
|
case "pending": return "bg-yellow-100 text-yellow-700";
|
|
case "in_progress": return "bg-blue-100 text-blue-700";
|
|
case "completed": return "bg-green-100 text-green-700";
|
|
default: return "bg-gray-100 text-gray-600";
|
|
}
|
|
}
|
|
|
|
interface TaskListCardProps {
|
|
tasks: TaskSummary[];
|
|
}
|
|
|
|
export default function TaskListCard({ tasks }: TaskListCardProps) {
|
|
return (
|
|
<div className="rounded-xl bg-white shadow-sm">
|
|
<div className="flex items-center gap-2 border-b border-gray-100 px-4 py-3">
|
|
<ClipboardList className="h-5 w-5 text-blue-600" />
|
|
<h3 className="font-semibold text-gray-800">当前进度</h3>
|
|
<span className="ml-auto text-xs text-gray-400">{tasks.length} 个任务</span>
|
|
</div>
|
|
|
|
{tasks.length === 0 ? (
|
|
<div className="px-4 py-8 text-center text-sm text-gray-400">暂无关联任务</div>
|
|
) : (
|
|
<div className="divide-y divide-gray-50">
|
|
{tasks.map((task) => (
|
|
<div key={task.id} className="flex items-center gap-3 px-4 py-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-gray-800">{task.task_name}</p>
|
|
<p className="text-xs text-gray-400">
|
|
负责人: {task.assignee_id ?? "未分配"}
|
|
</p>
|
|
</div>
|
|
<span className={`shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${statusColor(task.status)}`}>
|
|
{STATUS_LABELS[task.status] ?? task.status}
|
|
</span>
|
|
<ChevronRight className="h-4 w-4 shrink-0 text-gray-300" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|