feat: enhance backend deployment, frontend file selection and synthesis task management (#129)

* feat: Implement data synthesis task management with database models and API endpoints

* feat: Update Python version requirements and refine dependency constraints in configuration

* fix: Correctly extract file values from selectedFilesMap in AddDataDialog

* feat: Refactor synthesis task routes and enhance file task management in the API

* feat: Enhance SynthesisTaskTab with tooltip actions and add chunk data retrieval in API
This commit is contained in:
Dallas98
2025-12-04 09:57:13 +08:00
committed by GitHub
parent 1d19cd3a62
commit 7012a9ad98
14 changed files with 975 additions and 1193 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,186 @@
import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router";
import { Table, Badge, Button } from "antd";
import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
import { querySynthesisFileTasksUsingGet, querySynthesisTaskByIdUsingGet } from "@/pages/SynthesisTask/synthesis-api";
import type { BadgeProps } from "antd";
import { formatDateTime } from "@/utils/unit";
interface SynthesisFileTaskItem {
id: string;
synthesis_instance_id: string;
file_name: string;
source_file_id: string;
target_file_location: string;
status?: string;
total_chunks: number;
processed_chunks: number;
created_at?: string;
updated_at?: string;
}
interface PagedResponse<T> {
content: T[];
totalElements: number;
totalPages: number;
page: number;
size: number;
}
interface SynthesisTaskInfo {
id: string;
name: string;
synthesis_type: string;
status: string;
created_at: string;
model_id: string;
}
export default function SynthFileTask() {
const { id: taskId = "" } = useParams();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [data, setData] = useState<SynthesisFileTaskItem[]>([]);
const [pagination, setPagination] = useState<TablePaginationConfig>({
current: 1,
pageSize: 10,
total: 0,
});
const [taskInfo, setTaskInfo] = useState<SynthesisTaskInfo | null>(null);
// 查询总任务详情
useEffect(() => {
if (!taskId) return;
querySynthesisTaskByIdUsingGet(taskId).then((res) => {
setTaskInfo(res?.data?.data || null);
});
}, [taskId]);
const fetchData = async (page = 1, pageSize = 10) => {
if (!taskId) return;
setLoading(true);
try {
const res = await querySynthesisFileTasksUsingGet(taskId, {
page,
page_size: pageSize,
});
const payload: PagedResponse<SynthesisFileTaskItem> =
res?.data?.data ?? res?.data ?? {
content: [],
totalElements: 0,
totalPages: 0,
page,
size: pageSize,
};
setData(payload.content || []);
setPagination({
current: payload.page ?? page,
pageSize: payload.size ?? pageSize,
total: payload.totalElements ?? payload.content?.length ?? 0,
});
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchData(1, pagination.pageSize || 10);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [taskId]);
const handleTableChange = (pag: TablePaginationConfig) => {
fetchData(pag.current || 1, pag.pageSize || 10);
};
const columns: ColumnsType<SynthesisFileTaskItem> = [
{
title: "文件名",
dataIndex: "file_name",
key: "file_name",
},
{
title: "状态",
dataIndex: "status",
key: "status",
render: (status?: string) => {
let badgeStatus: BadgeProps["status"] = "default";
let text = status || "未知";
if (status === "pending" || status === "processing") {
badgeStatus = "processing";
text = "处理中";
} else if (status === "completed") {
badgeStatus = "success";
text = "已完成";
} else if (status === "failed") {
badgeStatus = "error";
text = "失败";
}
return <Badge status={badgeStatus} text={text} />;
},
},
{
title: "切片进度",
key: "chunks",
render: (_text, record) => (
<span>
{record.processed_chunks}/{record.total_chunks}
</span>
),
},
{
title: "目标文件路径",
dataIndex: "target_file_location",
key: "target_file_location",
ellipsis: true,
},
{
title: "创建时间",
dataIndex: "created_at",
key: "created_at",
render: (val?: string) => (val ? formatDateTime(val) : "-"),
},
{
title: "更新时间",
dataIndex: "updated_at",
key: "updated_at",
render: (val?: string) => (val ? formatDateTime(val) : "-"),
},
];
return (
<div className="p-4 bg-white rounded-lg h-full flex flex-col">
{/* 顶部任务信息和返回按钮 */}
<div className="flex items-center justify-between mb-4">
<div className="space-y-1">
{taskInfo && (
<>
<div className="text-lg font-medium flex items-center gap-2">
<span>{taskInfo.name}</span>
<span className="text-xs px-2 py-0.5 rounded bg-blue-50 text-blue-700 border border-blue-200">
{taskInfo.synthesis_type === "QA" ? "问答对生成" : taskInfo.synthesis_type === "COT" ? "链式推理生成" : taskInfo.synthesis_type}
</span>
<span className="text-xs px-2 py-0.5 rounded bg-gray-50 text-gray-700 border border-gray-200">
{taskInfo.status === "pending" ? "等待中" : taskInfo.status === "completed" ? "已完成" : taskInfo.status === "failed" ? "失败" : taskInfo.status}
</span>
</div>
<div className="text-xs text-gray-500 flex gap-4">
<span>{formatDateTime(taskInfo.created_at)}</span>
<span>ID{taskInfo.model_id}</span>
</div>
</>
)}
</div>
<Button type="default" onClick={() => navigate("/data/synthesis/task")}></Button>
</div>
{/* 文件任务表格 */}
<Table<SynthesisFileTaskItem>
rowKey="id"
loading={loading}
dataSource={data}
columns={columns}
pagination={pagination}
onChange={handleTableChange}
/>
</div>
);
}

View File

@@ -1,112 +1,116 @@
import { useState } from "react";
import { Card, Button, Badge, Table, Progress } from "antd";
import { useState, useEffect, ElementType } from "react";
import { Card, Button, Badge, Table, Modal, message, Tooltip } from "antd";
import {
Plus,
Sparkles,
ArrowUp,
ArrowDown,
Pause,
Play,
DownloadIcon,
CheckCircle,
Check,
StopCircle,
Sparkles,
} from "lucide-react";
import type { SynthesisTask } from "@/pages/SynthesisTask/synthesis";
import { mockSynthesisTasks } from "@/mock/synthesis";
import { DeleteOutlined, EyeOutlined } from "@ant-design/icons";
import { Link, useNavigate } from "react-router";
import { SearchControls } from "@/components/SearchControls";
import { formatDateTime } from "@/utils/unit";
import {
querySynthesisTasksUsingGet,
deleteSynthesisTaskByIdUsingDelete,
} from "@/pages/SynthesisTask/synthesis-api";
interface SynthesisTask {
id: string;
name: string;
description?: string;
status: string;
synthesis_type: string;
model_id: string;
progress?: number;
result_data_location?: string;
text_split_config?: {
chunk_size: number;
chunk_overlap: number;
};
synthesis_config?: {
temperature?: number | null;
prompt_template?: string;
synthesis_count?: number | null;
};
source_file_id?: string[];
total_files?: number;
processed_files?: number;
total_chunks?: number;
processed_chunks?: number;
total_synthesis_data?: number;
created_at: string;
updated_at?: string;
created_by?: string;
updated_by?: string;
}
export default function SynthesisTaskTab() {
const navigate = useNavigate();
const [searchQuery, setSearchQuery] = useState("");
const [tasks, setTasks] = useState<SynthesisTask[]>(mockSynthesisTasks);
const [tasks, setTasks] = useState<SynthesisTask[]>([]);
const [filterStatus, setFilterStatus] = useState("all");
const [sortBy, setSortBy] = useState<"createdAt" | "name">("createdAt");
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
// 过滤任务
const filteredTasks = tasks.filter((task) => {
const matchesSearch =
task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
task.template.toLowerCase().includes(searchQuery.toLowerCase());
const matchesStatus =
filterStatus === "all" || task.status === filterStatus;
return matchesSearch && matchesStatus;
});
// 排序任务
const sortedTasks = [...filteredTasks].sort((a, b) => {
if (sortBy === "createdAt") {
const dateA = new Date(a.createdAt).getTime();
const dateB = new Date(b.createdAt).getTime();
return sortOrder === "asc" ? dateA - dateB : dateB - dateA;
} else if (sortBy === "name") {
return sortOrder === "asc"
? a.name.localeCompare(b.name)
: b.name.localeCompare(a.name);
// 获取任务列表
const loadTasks = async () => {
setLoading(true);
try {
const params = {
page: page,
page_size: pageSize,
} as {
page?: number;
page_size?: number;
synthesis_type?: string;
status?: string;
name?: string;
};
if (searchQuery) params.name = searchQuery;
if (filterStatus !== "all") params.synthesis_type = filterStatus;
const res = await querySynthesisTasksUsingGet(params);
setTasks(res?.data?.content || []);
setTotal(res?.data?.totalElements || 0);
} catch {
setTasks([]);
setTotal(0);
} finally {
setLoading(false);
}
return 0;
});
const handleTaskAction = (taskId: number, action: string) => {
setTasks((prev) =>
prev.map((task) => {
if (task.id === taskId) {
switch (action) {
case "pause":
return { ...task, status: "paused" as const };
case "resume":
return { ...task, status: "running" as const };
case "stop":
return {
...task,
status: "failed" as const,
progress: task.progress,
};
default:
return task;
}
}
return task;
})
);
};
useEffect(() => {
loadTasks();
// eslint-disable-next-line
}, [searchQuery, filterStatus, page, pageSize]);
// 状态徽章
const getStatusBadge = (status: string) => {
const statusConfig = {
pending: {
label: "等待中",
color: "#F59E0B",
icon: Pause,
},
running: {
label: "运行中",
color: "#3B82F6",
icon: Play,
},
completed: {
label: "已完成",
color: "#10B981",
icon: CheckCircle,
},
failed: {
label: "失败",
color: "#EF4444",
icon: Pause,
},
paused: {
label: "已暂停",
color: "#E5E7EB",
icon: Pause,
},
const statusConfig: Record<string, { label: string; color: string; icon: ElementType }> = {
pending: { label: "等待中", color: "#F59E0B", icon: Pause },
running: { label: "运行中", color: "#3B82F6", icon: Play },
completed: { label: "已完成", color: "#10B981", icon: CheckCircle },
failed: { label: "失败", color: "#EF4444", icon: Pause },
paused: { label: "已暂停", color: "#E5E7EB", icon: Pause },
};
return (
statusConfig[status as keyof typeof statusConfig] || statusConfig.pending
);
return statusConfig[status] ?? statusConfig["pending"];
};
// 任务表格列
// 类型映射
const typeMap: Record<string, string> = {
QA: "问答对生成",
COT: "链式推理生成",
};
// 表格列
const taskColumns = [
{
title: (
@@ -134,98 +138,77 @@ export default function SynthesisTaskTab() {
dataIndex: "name",
key: "name",
fixed: "left" as const,
render: (text: string, task: SynthesisTask) => (
render: (_: unknown, task: SynthesisTask) => (
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center shadow-sm">
{/* 可根据 type 渲染不同图标 */}
<span className="text-white font-bold text-base">
{task.type?.toUpperCase()?.slice(0, 1) || "T"}
{task.synthesis_type?.toUpperCase()?.slice(0, 1) || "T"}
</span>
</div>
<div>
<Link to={`/data/synthesis/task/${task.id}`}>{task.name}</Link>
<div className="text-xs text-gray-500">{task.template}</div>
</div>
</div>
),
},
{
title: "类型",
dataIndex: "type",
key: "type",
render: (type: string) => type.toUpperCase(),
dataIndex: "synthesis_type",
key: "synthesis_type",
render: (type: string) => typeMap[type] || type,
},
{
title: "状态",
dataIndex: "status",
key: "status",
render: (status: string) => {
const statusConfig = getStatusBadge(status);
return <Badge color={statusConfig.color} text={statusConfig.label} />;
},
},
{
title: "进度",
dataIndex: "progress",
key: "progress",
width: 150,
render: (_: any, task: SynthesisTask) => (
<Progress percent={task.progress} size="small" />
),
},
{
title: "源数据集",
dataIndex: "sourceDataset",
key: "sourceDataset",
render: (text: string) => (
<div className="text-sm text-gray-900">{text}</div>
),
},
{
title: "生成数量",
dataIndex: "generatedCount",
key: "generatedCount",
render: (_: any, task: SynthesisTask) => (
<div className="text-sm font-medium text-gray-900">
{task.generatedCount?.toLocaleString?.()} /{" "}
{task.targetCount?.toLocaleString?.()}
</div>
),
},
{
title: "质量评分",
dataIndex: "quality",
key: "quality",
render: (quality: number) => (quality ? `${quality}%` : "-"),
title: "文件数",
dataIndex: "total_files",
key: "total_files",
render: (num: number, task: SynthesisTask) => <span>{num ?? (task.source_file_id?.length ?? 0)}</span>,
},
{
title: "创建时间",
dataIndex: "createdAt",
key: "createdAt",
render: formatDateTime,
dataIndex: "created_at",
key: "created_at",
render: (val: string) => formatDateTime(val),
},
{
title: "操作",
key: "actions",
fixed: "right" as const,
render: (_: any, task: SynthesisTask) => (
render: (_: unknown, task: SynthesisTask) => (
<div className="flex items-center justify-center gap-1">
{task.status === "running" && (
<Tooltip title="查看详情">
<Button
onClick={() => handleTaskAction(task.id, "pause")}
className="hover:bg-orange-50 p-1 h-7 w-7"
onClick={() => navigate(`/data/synthesis/task/${task.id}`)}
className="hover:bg-blue-50 p-1 h-7 w-7"
type="text"
icon={<Pause className="w-4 h-4" />}
></Button>
)}
{task.status === "paused" && (
icon={<EyeOutlined />}
/>
</Tooltip>
<Tooltip title="删除任务">
<Button
onClick={() => handleTaskAction(task.id, "resume")}
className="hover:bg-green-50 p-1 h-7 w-7"
danger
type="text"
icon={<Play className="w-4 h-4" />}
></Button>
)}
className="hover:bg-red-50 p-1 h-7 w-7"
icon={<DeleteOutlined />}
onClick={() => {
Modal.confirm({
title: `确认删除任务?`,
content: `任务名:${task.name}`,
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: async () => {
try {
await deleteSynthesisTaskByIdUsingDelete(task.id);
message.success("删除成功");
loadTasks();
} catch {
message.error("删除失败");
}
},
});
}}
/>
</Tooltip>
</div>
),
},
@@ -237,18 +220,15 @@ export default function SynthesisTaskTab() {
<SearchControls
searchTerm={searchQuery}
onSearchChange={setSearchQuery}
searchPlaceholder="搜索任务名称或模板..."
searchPlaceholder="搜索任务名称..."
filters={[
{
key: "status",
label: "状态",
label: "类型",
options: [
{ label: "全部状态", value: "all" },
{ label: "等待中", value: "pending" },
{ label: "运行中", value: "running" },
{ label: "已完成", value: "completed" },
{ label: "失败", value: "failed" },
{ label: "已暂停", value: "paused" },
{ label: "全部类型", value: "all" },
{ label: "问答对生成", value: "QA" },
{ label: "链式推理生成", value: "COT" },
],
},
]}
@@ -259,13 +239,23 @@ export default function SynthesisTaskTab() {
showFilters
showViewToggle={false}
/>
{/* 任务表格 */}
<Card>
<Table
columns={taskColumns}
dataSource={sortedTasks}
dataSource={tasks}
rowKey="id"
loading={loading}
pagination={{
current: page,
pageSize: pageSize,
total: total,
onChange: (p, ps) => {
setPage(p);
setPageSize(ps);
},
showSizeChanger: true,
}}
scroll={{ x: "max-content" }}
locale={{
emptyText: (

View File

@@ -0,0 +1,37 @@
import { get, post, del } from "@/utils/request";
// 创建数据合成任务
export function createSynthesisTaskUsingPost(data: unknown) {
return post("/api/synthesis/gen/task", data);
}
// 获取数据合成任务详情
export function querySynthesisTaskByIdUsingGet(taskId: string) {
return get(`/api/synthesis/gen/task/${taskId}`);
}
// 分页查询数据合成任务列表
export function querySynthesisTasksUsingGet(params: {
page?: number;
page_size?: number;
synthesis_type?: string;
status?: string;
name?: string;
}) {
return get(`/api/synthesis/gen/tasks`, params as any);
}
// 删除整个数据合成任务
export function deleteSynthesisTaskByIdUsingDelete(taskId: string) {
return del(`/api/synthesis/gen/task/${taskId}`);
}
// 分页查询某个任务下的文件任务列表
export function querySynthesisFileTasksUsingGet(taskId: string, params: { page?: number; page_size?: number }) {
return get(`/api/synthesis/gen/task/${taskId}/files`, params as any);
}
// 获取不同合成类型对应的 Prompt
export function getPromptByTypeUsingGet(synthType: string) {
return get(`/api/synthesis/gen/prompt`, { synth_type: synthType } as any);
}