refactor(tasks): 拆分 TaskTable 列定义和空状态到子模块（190→72行, -62%）

2026-07-29 17:11:47 +08:00
parent fac825b60b
commit 542ea59869
4 changed files with 147 additions and 123 deletions
@@ -0,0 +1,131 @@
+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>
+      },
+    },
+  ]
+}