109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { FileText } from 'lucide-react';
|
|
import { Pagination } from 'tdesign-react';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
import { TaskListItem } from './TaskManagement';
|
|
import { TaskCard } from './TaskCard';
|
|
|
|
interface KanbanColumnProps {
|
|
title: string;
|
|
count: number;
|
|
color: string;
|
|
tasks: TaskListItem[];
|
|
taskType: string;
|
|
taskDataType?: string;
|
|
pageIndexSearch: (taskType: string, pageIndex: number) => void | Promise<void>;
|
|
handleStartAnalysis: (task: TaskListItem) => void;
|
|
}
|
|
|
|
export const KanbanColumn: React.FC<KanbanColumnProps> = ({
|
|
title,
|
|
count,
|
|
color,
|
|
tasks,
|
|
taskType,
|
|
taskDataType = 'task',
|
|
pageIndexSearch,
|
|
handleStartAnalysis,
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
const [pageNum, setPageNum] = useState(1);
|
|
|
|
const handlePageChange = async (value: number) => {
|
|
setPageNum(value);
|
|
await pageIndexSearch(taskType, value);
|
|
};
|
|
|
|
const columnClass = isDark
|
|
? 'border border-[rgba(67,89,124,0.46)] bg-[linear-gradient(180deg,rgba(18,36,67,0.96),rgba(12,28,54,0.96))] shadow-[0_18px_40px_rgba(3,10,22,0.18)]'
|
|
: 'border border-[#E8E8E8] bg-[linear-gradient(180deg,#FFFFFF_0%,#FFF9F9_100%)] shadow-[0_14px_28px_rgba(245,34,45,0.06)]';
|
|
|
|
return (
|
|
<section className={`flex h-full flex-col rounded-[28px] p-4 ${columnClass}`}>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className={`h-2.5 w-2.5 rounded-full ${color}`} />
|
|
<h2
|
|
className={`whitespace-nowrap text-[15px] font-semibold leading-none ${
|
|
isDark ? 'text-white' : 'text-[#222222]'
|
|
}`}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<span
|
|
className={`inline-flex rounded-full px-2 py-0.5 text-xs ${
|
|
isDark ? 'bg-[rgba(77,141,255,0.14)] text-[#9CCBFF]' : 'bg-[#FFF1F0] text-[#CF1322]'
|
|
}`}
|
|
>
|
|
{count}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Pagination
|
|
className="sentiment-pagination shrink-0"
|
|
total={count}
|
|
size="small"
|
|
theme="simple"
|
|
current={pageNum}
|
|
pageSize={10}
|
|
maxPageBtn={3}
|
|
showPageSize={false}
|
|
totalContent={false}
|
|
onCurrentChange={(page) => handlePageChange(Number(page))}
|
|
/>
|
|
</div>
|
|
|
|
<p className={`mt-2 text-xs leading-6 ${isDark ? 'text-slate-400' : 'text-[#8C8C8C]'}`}>
|
|
按时间倒序展示，支持分页切换。
|
|
</p>
|
|
|
|
<div className="mt-4 flex-1 space-y-4">
|
|
{tasks.length === 0 ? (
|
|
<div
|
|
className={`flex h-full min-h-[220px] flex-col items-center justify-center rounded-[22px] border border-dashed ${
|
|
isDark
|
|
? 'border-[rgba(87,111,149,0.42)] bg-[rgba(12,24,44,0.46)] text-slate-400'
|
|
: 'border-[#F3C4C8] bg-[#FFF7F7] text-[#A6A6A6]'
|
|
}`}
|
|
>
|
|
<FileText className="h-8 w-8 opacity-70" />
|
|
<p className="mt-3 text-sm">暂无任务</p>
|
|
</div>
|
|
) : (
|
|
tasks.map((task) => (
|
|
<TaskCard
|
|
key={task.id}
|
|
task={task}
|
|
taskDataType={taskDataType}
|
|
handleStartAnalysis={handleStartAnalysis}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|