xiaoxia-saas/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx

import React from "react"
import { Tag, Button, Popconfirm, Tooltip } from "antd"
import { RedoOutlined, InfoCircleOutlined } from "@ant-design/icons"
import type { ColumnsType } from "antd/es/table"
import type { TaskItem, TaskStatus } from "@/api/tasks"
import { STATUS_CONFIG, TYPE_LABELS } from "../../constants"
import { formatDuration, formatTime } from "../../utils"

interface UseTaskTableColumnsOptions {
  retryLoading: boolean
  onRetry: (id: string) => void
  onViewDetail: (record: TaskItem) => void
}

export function useTaskTableColumns({
  retryLoading,
  onRetry,
  onViewDetail,
}: UseTaskTableColumnsOptions): ColumnsType<TaskItem> {
  return [
    {
      title: "任务ID",
      dataIndex: "id",
      key: "id",
      width: 120,
      ellipsis: true,
      render: (id: string) => (
        <Tooltip title={id}>
          <span className="task-id">{id.slice(0, 8)}...</span>
        </Tooltip>
      ),
    },
    {
      title: "类型",
      dataIndex: "task_type",
      key: "task_type",
      width: 100,
      render: (type: string) => {
        const config = TYPE_LABELS[type] || { label: type, color: "default" }
        return <Tag color={config.color}>{config.label}</Tag>
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 120,
      render: (status: TaskStatus, record: TaskItem) => {
        const config = STATUS_CONFIG[status] || {
          label: status,
          color: "default",
          icon: null,
        }
        return (
          <Tag color={config.color} icon={config.icon} className="task-status-tag">
            {config.label}
            {status === "running" && record.progress > 0 && (
              <span className="task-progress"> {record.progress}%</span>
            )}
          </Tag>
        )
      },
    },
    {
      title: "当前步骤",
      dataIndex: "current_step",
      key: "current_step",
      width: 150,
      ellipsis: true,
      render: (step: string) => <span className="task-step">{step || "-"}</span>,
    },
    {
      title: "耗时",
      dataIndex: "duration_seconds",
      key: "duration_seconds",
      width: 100,
      render: (seconds: number) => (
        <span className="task-duration">{formatDuration(seconds)}</span>
      ),
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      key: "created_at",
      width: 120,
      render: (time: string) => <span className="task-time">{formatTime(time)}</span>,
    },
    {
      title: "操作",
      key: "action",
      width: 100,
      fixed: "right",
      render: (_: unknown, record: TaskItem) => {
        if (record.status === "failed" && record.retryable) {
          return (
            <Popconfirm
              title="确认重试"
              description="确定要重试这个失败的任务吗？"
              onConfirm={() => onRetry(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <Button
                type="link"
                size="small"
                icon={<RedoOutlined />}
                loading={retryLoading}
                className="task-retry-btn"
              >
                重试
              </Button>
            </Popconfirm>
          )
        }
        if (record.status === "failed") {
          return (
            <Button
              type="link"
              size="small"
              icon={<InfoCircleOutlined />}
              onClick={() => onViewDetail(record)}
            >
              详情
            </Button>
          )
        }
        return <span className="task-action-placeholder">-</span>
      },
    },
  ]
}