91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
import { useTheme } from '@/contexts/ThemeContext';
|
|
import { TaskListItem } from './TaskManagement';
|
|
import { ChevronRight, FileText } from 'lucide-react';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { TaskCard } from './TaskCard';
|
|
import { Pagination } from 'tdesign-react';
|
|
|
|
interface KanbanColumnProps {
|
|
title: string;
|
|
count: number;
|
|
color: string;
|
|
tasks: TaskListItem[];
|
|
taskType: string;
|
|
TaskDataType?: string; // 区分来源类型
|
|
pageIndexSearch: (taskType: string, pageIndex: number) => 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 textPrimary = isDark ? 'text-white' : 'text-gray-900';
|
|
const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
|
|
// 当前页码，默认为第 1 页
|
|
const [pageNum, setPageNum] = useState<number>(1);
|
|
// 每页显示数量，默认为 10 条
|
|
const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
|
|
/**
|
|
* 页码变化时的回调函数
|
|
* 当用户切换页码时触发，更新页码并重新获取数据
|
|
* @param value - 新的页码值
|
|
*/
|
|
const pageIndexChange = async (value: number) => {
|
|
// 更新 ref 中存储的页码值
|
|
// 更新页码状态，触发组件重新渲染
|
|
console.log('taskType', taskType)
|
|
setPageNum(value);
|
|
await pageIndexSearch(taskType, value);
|
|
}
|
|
|
|
/**
|
|
* 每页显示数量变化时的回调函数
|
|
* 当用户切换每页显示条数时触发，更新每页数量并重新获取数据
|
|
* @param value - 新的每页显示数量
|
|
*/
|
|
const pageSizeChange = async (value: number) => {
|
|
// 更新 ref 中存储的每页显示数量
|
|
// 更新每页显示数量状态，触发组件重新渲染
|
|
setPageSize(value);
|
|
}
|
|
return (
|
|
<div className="flex flex-col min-h-0 flex-1">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${color}`} />
|
|
<h2 className={`font-semibold text-sm ${textPrimary}`}>{title}</h2>
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${isDark ? 'bg-slate-700/50 text-slate-400' : 'bg-red-50 text-red-500'
|
|
}`}>{count}</span>
|
|
</div>
|
|
{/* <button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
|
|
}`}>
|
|
<ChevronRight className={`w-4 h-4 ${textMuted}`} />
|
|
</button> */}
|
|
<div>
|
|
<Pagination
|
|
total={count}
|
|
size="small"
|
|
theme="simple"
|
|
current={pageNum}
|
|
pageSize={pageSize}
|
|
maxPageBtn={3}
|
|
showPageSize={false}
|
|
totalContent={false}
|
|
onCurrentChange={(page) => pageIndexChange(Number(page))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
|
|
{tasks.length === 0 ? (
|
|
<div className={`flex flex-col items-center justify-center py-8 ${textMuted}`}>
|
|
<FileText className="w-8 h-8 mb-2 opacity-50" />
|
|
<p className="text-sm">暂无任务</p>
|
|
</div>
|
|
) : (
|
|
tasks.map(task => <TaskCard key={task.id} task={task} TaskType={TaskDataType} handleStartAnalysis={handleStartAnalysis}/>)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|