xiaoxia-saas/apps/web/src/pages/tasks/components/TaskTable.tsx

import React from "react"
import { Table, Tag, Button, Popconfirm, Tooltip } from "antd"
import { RedoOutlined, InfoCircleOutlined, ClockCircleOutlined } 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"
import { TaskErrorDetail } from "./TaskErrorDetail"

interface TaskTableProps {
  dataSource: TaskItem[]
  loading: boolean
  total: number
  page: number
  pageSize: number
  expandedTaskId: string | null
  expandedTaskDetail: TaskItem | null
  retryLoading: boolean
  onPageChange: (page: number, pageSize: number) => void
  onExpand: (expanded: boolean, record: TaskItem) => void
  onRetry: (id: string) => void
  onViewDetail: (record: TaskItem) => void
}

/**
 * 任务列表表格
 * 含列定义、分页、展开行
 */
export const TaskTable: React.FC<TaskTableProps> = ({
  dataSource,
  loading,
  total,
  page,
  pageSize,
  expandedTaskId,
  expandedTaskDetail,
  retryLoading,
  onPageChange,
  onExpand,
  onRetry,
  onViewDetail,
}) => {
  // 表格列定义
  const columns: ColumnsType<TaskItem> = [
    {
      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>
      },
    },
  ]

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="id"
      loading={loading}
      pagination={{
        current: page,
        pageSize,
        total,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (t) => `共 ${t} 条`,
        onChange: onPageChange,
      }}
      expandable={{
        expandedRowRender: (record) => (
          <TaskErrorDetail record={record} detail={expandedTaskDetail} />
        ),
        expandedRowKeys: expandedTaskId ? [expandedTaskId] : [],
        onExpand,
        rowExpandable: (record) =>
          record.status === "failed" && (!!record.error_info || !!record.error_message),
      }}
      scroll={{ x: 800 }}
      className="task-table"
      locale={{
        emptyText: (
          <div className="task-empty">
            <ClockCircleOutlined />
            <p>暂无任务记录</p>
          </div>
        ),
      }}
    />
  )
}