代码修改

web-code/components/taskManagement/KanbanColumn.tsx

@@ -0,0 +1,92 @@
+import { useTheme } from '@/contexts/ThemeContext';
+import { TaskListItem } from '@/pages/TaskManagement';
+import { ChevronRight, FileText } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { PageType } from '../Sidebar';
+import { TaskCard } from './TaskCard';
+import { Pagination } from 'tdesign-react';
+
+interface KanbanColumnProps {
+  title: string;
+  count: number;
+  color: string;
+  tasks: TaskListItem[];
+  taskType: string;
+  TaskDataType?: string; // 区分来源类型
+  onNavigate: (page: PageType) => void;
+  pageIndexSearch: (taskType: string, pageIndex: number) => void;
+  handleStartAnalysis: (task: TaskListItem) => void
+}
+
+export const KanbanColumn: React.FC<KanbanColumnProps> = ({ title, count, color, tasks,taskType, TaskDataType = 'task' , onNavigate, 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} onNavigate={onNavigate} handleStartAnalysis={handleStartAnalysis}/>)
+        )}
+      </div>
+    </div>
+  );
+}