From 542ea59869f2aefedd1b0eb8c59ee881d1003401 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Wed, 29 Jul 2026 17:11:47 +0800 Subject: [PATCH 1/5] =?UTF-8?q?refactor(tasks):=20=E6=8B=86=E5=88=86=20Tas?= =?UTF-8?q?kTable=20=E5=88=97=E5=AE=9A=E4=B9=89=E5=92=8C=E7=A9=BA=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E5=88=B0=E5=AD=90=E6=A8=A1=E5=9D=97=EF=BC=88190?= =?UTF-8?q?=E2=86=9272=E8=A1=8C,=20-62%=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/tasks/components/TaskTable.tsx | 128 +---------------- .../components/task-table/TaskEmptyState.tsx | 9 ++ .../tasks/components/task-table/index.ts | 2 + .../task-table/useTaskTableColumns.tsx | 131 ++++++++++++++++++ 4 files changed, 147 insertions(+), 123 deletions(-) mode change 100644 => 100755 apps/web/src/pages/tasks/components/TaskTable.tsx create mode 100755 apps/web/src/pages/tasks/components/task-table/TaskEmptyState.tsx create mode 100755 apps/web/src/pages/tasks/components/task-table/index.ts create mode 100755 apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx diff --git a/apps/web/src/pages/tasks/components/TaskTable.tsx b/apps/web/src/pages/tasks/components/TaskTable.tsx old mode 100644 new mode 100755 index 84a331f0e..fb751fc25 --- a/apps/web/src/pages/tasks/components/TaskTable.tsx +++ b/apps/web/src/pages/tasks/components/TaskTable.tsx @@ -1,11 +1,8 @@ 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 { Table } from "antd" +import type { TaskItem } from "@/api/tasks" import { TaskErrorDetail } from "./TaskErrorDetail" +import { useTaskTableColumns, TaskEmptyState } from "./task-table" interface TaskTableProps { dataSource: TaskItem[] @@ -24,7 +21,6 @@ interface TaskTableProps { /** * 任务列表表格 - * 含列定义、分页、展开行 */ export const TaskTable: React.FC = ({ dataSource, @@ -40,116 +36,7 @@ export const TaskTable: React.FC = ({ onRetry, onViewDetail, }) => { - // 表格列定义 - const columns: ColumnsType = [ - { - title: "任务ID", - dataIndex: "id", - key: "id", - width: 120, - ellipsis: true, - render: (id: string) => ( - - {id.slice(0, 8)}... - - ), - }, - { - title: "类型", - dataIndex: "task_type", - key: "task_type", - width: 100, - render: (type: string) => { - const config = TYPE_LABELS[type] || { label: type, color: "default" } - return {config.label} - }, - }, - { - title: "状态", - dataIndex: "status", - key: "status", - width: 120, - render: (status: TaskStatus, record: TaskItem) => { - const config = STATUS_CONFIG[status] || { - label: status, - color: "default", - icon: null, - } - return ( - - {config.label} - {status === "running" && record.progress > 0 && ( - {record.progress}% - )} - - ) - }, - }, - { - title: "当前步骤", - dataIndex: "current_step", - key: "current_step", - width: 150, - ellipsis: true, - render: (step: string) => {step || "-"}, - }, - { - title: "耗时", - dataIndex: "duration_seconds", - key: "duration_seconds", - width: 100, - render: (seconds: number) => {formatDuration(seconds)}, - }, - { - title: "创建时间", - dataIndex: "created_at", - key: "created_at", - width: 120, - render: (time: string) => {formatTime(time)}, - }, - { - title: "操作", - key: "action", - width: 100, - fixed: "right", - render: (_: unknown, record: TaskItem) => { - if (record.status === "failed" && record.retryable) { - return ( - onRetry(record.id)} - okText="确定" - cancelText="取消" - > - - - ) - } - if (record.status === "failed") { - return ( - - ) - } - return - - }, - }, - ] + const columns = useTaskTableColumns({ retryLoading, onRetry, onViewDetail }) return ( = ({ scroll={{ x: 800 }} className="task-table" locale={{ - emptyText: ( -
- -

暂无任务记录

-
- ), + emptyText: , }} /> ) diff --git a/apps/web/src/pages/tasks/components/task-table/TaskEmptyState.tsx b/apps/web/src/pages/tasks/components/task-table/TaskEmptyState.tsx new file mode 100755 index 000000000..de5e4682e --- /dev/null +++ b/apps/web/src/pages/tasks/components/task-table/TaskEmptyState.tsx @@ -0,0 +1,9 @@ +import React from "react" +import { ClockCircleOutlined } from "@ant-design/icons" + +export const TaskEmptyState: React.FC = () => ( +
+ +

暂无任务记录

+
+) diff --git a/apps/web/src/pages/tasks/components/task-table/index.ts b/apps/web/src/pages/tasks/components/task-table/index.ts new file mode 100755 index 000000000..50a42ac1b --- /dev/null +++ b/apps/web/src/pages/tasks/components/task-table/index.ts @@ -0,0 +1,2 @@ +export { useTaskTableColumns } from "./useTaskTableColumns" +export { TaskEmptyState } from "./TaskEmptyState" diff --git a/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx b/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx new file mode 100755 index 000000000..72c4f9298 --- /dev/null +++ b/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx @@ -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 { + return [ + { + title: "任务ID", + dataIndex: "id", + key: "id", + width: 120, + ellipsis: true, + render: (id: string) => ( + + {id.slice(0, 8)}... + + ), + }, + { + title: "类型", + dataIndex: "task_type", + key: "task_type", + width: 100, + render: (type: string) => { + const config = TYPE_LABELS[type] || { label: type, color: "default" } + return {config.label} + }, + }, + { + title: "状态", + dataIndex: "status", + key: "status", + width: 120, + render: (status: TaskStatus, record: TaskItem) => { + const config = STATUS_CONFIG[status] || { + label: status, + color: "default", + icon: null, + } + return ( + + {config.label} + {status === "running" && record.progress > 0 && ( + {record.progress}% + )} + + ) + }, + }, + { + title: "当前步骤", + dataIndex: "current_step", + key: "current_step", + width: 150, + ellipsis: true, + render: (step: string) => {step || "-"}, + }, + { + title: "耗时", + dataIndex: "duration_seconds", + key: "duration_seconds", + width: 100, + render: (seconds: number) => ( + {formatDuration(seconds)} + ), + }, + { + title: "创建时间", + dataIndex: "created_at", + key: "created_at", + width: 120, + render: (time: string) => {formatTime(time)}, + }, + { + title: "操作", + key: "action", + width: 100, + fixed: "right", + render: (_: unknown, record: TaskItem) => { + if (record.status === "failed" && record.retryable) { + return ( + onRetry(record.id)} + okText="确定" + cancelText="取消" + > + + + ) + } + if (record.status === "failed") { + return ( + + ) + } + return - + }, + }, + ] +} -- 2.54.0 From 9aab0f5dca12fe023a1515562763c1c6bc6002aa Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Wed, 29 Jul 2026 17:22:47 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E6=9C=AA=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=9A=84React=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/tasks/components/task-table/useTaskTableColumns.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx b/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx index 72c4f9298..7ea93c3f2 100755 --- a/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx +++ b/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx @@ -1,4 +1,3 @@ -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" -- 2.54.0 From d3373144aafa8254a193312a092af34716cee373 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Wed, 29 Jul 2026 18:30:36 +0800 Subject: [PATCH 3/5] =?UTF-8?q?style:=20prettier=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/tasks/components/task-table/useTaskTableColumns.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx b/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx index 7ea93c3f2..018437d61 100755 --- a/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx +++ b/apps/web/src/pages/tasks/components/task-table/useTaskTableColumns.tsx @@ -73,9 +73,7 @@ export function useTaskTableColumns({ dataIndex: "duration_seconds", key: "duration_seconds", width: 100, - render: (seconds: number) => ( - {formatDuration(seconds)} - ), + render: (seconds: number) => {formatDuration(seconds)}, }, { title: "创建时间", -- 2.54.0 From db83222dd7a6d9ff248c726a0599778d11f9a38b Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Wed, 29 Jul 2026 18:37:38 +0800 Subject: [PATCH 4/5] =?UTF-8?q?test:=20=E6=B7=BB=E5=8A=A0tasks=E6=A8=A1?= =?UTF-8?q?=E5=9D=97smoke=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/test/pages/tasks/smoke.test.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 apps/web/src/test/pages/tasks/smoke.test.tsx diff --git a/apps/web/src/test/pages/tasks/smoke.test.tsx b/apps/web/src/test/pages/tasks/smoke.test.tsx new file mode 100644 index 000000000..cade9a0a5 --- /dev/null +++ b/apps/web/src/test/pages/tasks/smoke.test.tsx @@ -0,0 +1,18 @@ +/** + * Tasks 模块 smoke test + * 建立依赖链，确保 vitest related 能匹配到 tasks 目录下的改动 + */ +import { describe, it, expect } from "vitest" + +import "@/pages/tasks/components/TaskTable" +import "@/pages/tasks/components/task-table/useTaskTableColumns" +import "@/pages/tasks/components/task-table/TaskEmptyState" +import "@/pages/tasks/components/TaskFilterBar" +import "@/pages/tasks/components/TaskErrorDetail" + +describe("Tasks module smoke test", () => { + it("should load all task modules", () => { + expect(true).toBe(true) + }) +}) + -- 2.54.0 From 0717aea36ece07c07faa4799ef37c4a5a4e810f6 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Wed, 29 Jul 2026 18:48:41 +0800 Subject: [PATCH 5/5] =?UTF-8?q?style(tasks):=20=E4=BF=AE=E5=A4=8D=20smoke.?= =?UTF-8?q?test.tsx=20Prettier=20=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/test/pages/tasks/smoke.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/src/test/pages/tasks/smoke.test.tsx b/apps/web/src/test/pages/tasks/smoke.test.tsx index cade9a0a5..f1b2a72d3 100644 --- a/apps/web/src/test/pages/tasks/smoke.test.tsx +++ b/apps/web/src/test/pages/tasks/smoke.test.tsx @@ -15,4 +15,3 @@ describe("Tasks module smoke test", () => { expect(true).toBe(true) }) }) - -- 2.54.0