deerflow-code/web-code/components/taskManagement/ActionColumn.tsx

import { useTheme } from '@/contexts/ThemeContext';
import { ActionListItem, TaskListItem, taskStatusList } from '@/pages/TaskManagement';
import { Bot, ChevronRight, Download, Edit, Eye, FileText, Layers, MoreHorizontal, Play, Search, User, Users, Workflow } from 'lucide-react';
import React, { useEffect, useRef, useState } from 'react';
import { PageType } from '../Sidebar';
import { format } from 'date-fns';
import { useNavigate } from 'react-router-dom';
import { Col, Empty, Pagination, Progress, Row } from 'tdesign-react';
import { requestCrudService } from '@/service/request-axios-service';

interface ActionColumnProps {
  TaskType?: string;
  title: string;
  category: string;
  subCategory: string;
  icon: string;
  columnIndex: number;
  columnName: string;
  actionCount: number;
  actionList: ActionListItem[];
}

const service = requestCrudService;
const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
export const ActionColumn: React.FC<ActionColumnProps> = ({ title, category, subCategory, icon, columnName, columnIndex, actionCount, actionList }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  // 主题颜色变量
  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
  const navigate = useNavigate();
  const [searchQuery, setSearchQuery] = useState<string>('');
  // 当前页码，默认为第 1 页
  const [pageNum, setPageNum] = useState<number>(1);
  // 每页显示数量，默认为 10 条
  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
  const [total, setTotal] = useState<number>(0); // 查询任务总数
  const state = useRef({
    pageIndex: 1,
    pageSize: 10
  })
  /**
  * 页码变化时的回调函数
  * 当用户切换页码时触发，更新页码并重新获取数据
  * @param value - 新的页码值
  */
  const pageIndexChange = async (value: number) => {
    // 更新 ref 中存储的页码值
    // 更新页码状态，触发组件重新渲染
    setPageNum(value);
    state.current.pageIndex = value;
  }

  const actionRouterChange = (item: ActionListItem) => {
    if (item.actionStatus !== 0) {
      window.open(`https://ch1.b.uat.4.cn/web/#/action/item-aiceh/step-analysis-three?id=${item.id}`);
    } else {
      window.open(`https://ch1.b.uat.4.cn/web/#/action/item-aiceh/step-action-topic?id=${item.id}&isPassApply=false`);
    }
  }

  return (
    <div className={`h-[calc(100vh-100px)] p-[10px] flex-1 ${isDark? 'dark-action-bg' : `bg-white action-bg${columnIndex} shadow-[2px_0px_6px_rgba(0,0,0,0.12)]`} rounded-[4px]`}>
      <div className="mb-[10px]">
        <div className="flex items-center mb-[20px]">
          <img src={`/icon/${icon}`} className="w-[24px] mr-[10px]" alt="" />
          <span className="text[#222222] text-[18px] font-bold mr-[20px]">{columnName}</span>
          <span className="text[#222222] text-[18px] font-bold mr-[20px]">{actionCount}</span>
        </div>
      </div>
      <div className="h-[calc(100vh-200px)] overflow-y-auto pr-[10px]">
        {
          actionList.map((item: ActionListItem, index: number) => (
            <div key={index} className={`${isDark? 'dark-action-item' : 'bg-white border border-[#f5f5f5] shadow-[0_1px_16px_#0000000f] action-item'} rounded-md px-4 py-2.5 mb-[10px] hover:boder-[var(--card-border)]`} onClick={() => actionRouterChange(item)}>
              <div className="line-clamp-4 overflow-hidden mb-[10px]">
                {
                  item.actionName
                }
              </div>
              <div className="flex items-center mb-[10px]">
                <span className={`${isDark? 'bg-[#0062d94d] text-[#aaceff]' :'bg-[#f5f5f5]'} leading-[16px] p-[5px_10px] rounded-[2px]`}>
                  {item.level === 1 ? '主要行动' : '次要行动'}
                </span>
              </div>
              <div className="flex justify-between">
                <span className={`${isDark? 'bg-[#0062d94d] text-[#aaceff]' :'bg-[#f5f5f5]'} leading-[16px] p-[5px_10px] rounded-[2px]`}>
                  {item.deptName}
                </span>
                <span className="border border-[var(--color-main)] text-[var(--color-main)] cursor-pointer leading-[16px] ml-[10px] p-[5px_10px] rounded-[2px]">
                  {
                    item.actionStatus === 0 ? <span>XD签收</span> : <span>开始CEH</span>
                  }
                </span>
              </div>
            </div>
          ))
        }
        {
          actionList.length === 0 && <Empty image={
            <img
              src="/icon/empty-list.png"
              alt="empty"
              className="w-[135px]"
            />
          } />
        }
      </div>
    </div>
  );
}