frontend: 修改清洗状态和页面布局

Author: chenghh-9609

frontend/src/components/CardView.tsx

@@ -170,7 +170,7 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
 
   return (
     <div className="flex-1 flex flex-col overflow-auto">
-      <div className="flex-1 overflow-auto grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+      <div className="flex-1 overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
         {data.map((item) => (
           <div
             key={item.id}

frontend/src/mock/mock-seed/data-cleansing.cjs

@@ -51,7 +51,7 @@ function cleaningTaskItem() {
     id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""),
     name: Mock.Random.ctitle(5, 20),
     description: Mock.Random.csentence(5, 30),
-    status: Mock.Random.pick(["pending", "running", "completed", "failed"]),
+    status: Mock.Random.pick(["PENDING", "RUNNING", "COMPLETED", "FAILED", "STOPPED"]),
     srcDatasetId: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""),
     srcDatasetName: Mock.Random.ctitle(5, 15),
     destDatasetId: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""),

frontend/src/mock/mock-seed/data-management.cjs

@@ -157,17 +157,17 @@ module.exports = function (router) {
 
   // 获取数据集列表
   router.get(API.queryDatasetsUsingGet, (req, res) => {
-    const { page = 0, size = 10, keywords, type, status, tags } = req.query;
+    const { page = 0, size = 10, keyword, type, status, tags } = req.query;
     console.log("Received query params:", req.query);
 
     let filteredDatasets = datasetList;
-    if (keywords) {
-      console.log("filter keywords:", keywords);
+    if (keyword) {
+      console.log("filter keyword:", keyword);
 
       filteredDatasets = filteredDatasets.filter(
         (dataset) =>
-          dataset.name.includes(keywords) ||
-          dataset.description.includes(keywords)
+          dataset.name.includes(keyword) ||
+          dataset.description.includes(keyword)
       );
     }
     if (type) {

frontend/src/pages/DataAnnotation/Home/DataAnnotation.tsx

@@ -350,9 +350,9 @@ export default function DataAnnotation() {
 
       {/* Filters Toolbar */}
       <SearchControls
-        searchTerm={searchParams.keywords}
-        onSearchChange={(keywords) =>
-          setSearchParams({ ...searchParams, keywords })
+        searchTerm={searchParams.keyword}
+        onSearchChange={(keyword) =>
+          setSearchParams({ ...searchParams, keyword })
         }
         searchPlaceholder="搜索任务..."
         filters={filterOptions}

frontend/src/pages/DataCleansing/cleansing.const.tsx

@@ -12,6 +12,7 @@ import {
   AlertOutlined,
   DatabaseOutlined,
   AppstoreOutlined,
+  PauseCircleOutlined,
 } from "@ant-design/icons";
 
 export const templateTypesMap = {
@@ -72,6 +73,12 @@ export const TaskStatusMap = {
     color: "red",
     icon: <AlertOutlined />,
   },
+  [TaskStatus.STOPPED]: {
+    label: "已停止",
+    value: TaskStatus.STOPPED,
+    color: "orange",
+    icon: <PauseCircleOutlined />,
+  },
 };
 
 export const mapTask = (task: CleansingTask) => {

frontend/src/pages/DataCleansing/cleansing.model.ts

@@ -46,6 +46,7 @@ export enum TaskStatus {
   RUNNING = "RUNNING",
   COMPLETED = "COMPLETED",
   FAILED = "FAILED",
+  STOPPED = "STOPPED",
 }
 
 export interface RuleCondition {

frontend/src/pages/DataManagement/Create/CreateDataset.tsx

@@ -77,7 +77,7 @@ export default function DatasetCreate() {
   // 获取归集任务列表
   const fetchCollectionTasks = async () => {
     try {
-      const { data } = await queryTasksUsingGet({ page: 1, size: 100 });
+      const { data } = await queryTasksUsingGet({ page: 0, size: 100 });
       const options = data.map((task: any) => ({
         label: task.name,
         value: task.id,

frontend/src/pages/DataManagement/dataset.api.ts

@@ -103,8 +103,6 @@ export function updateDatasetTagByIdUsingPut(id: string | number, data: any) {
 
 // 删除数据集标签
 export function deleteDatasetTagByIdUsingDelete(tag) {
-  console.log(tag);
-
   return del(`/api/data-management/tags/${tag.id}`);
 }
 
@@ -188,8 +186,7 @@ export function cancelUploadUsingPut(id) {
 }
 
 export function uploadFileChunkUsingPost(id: string | number, params, config) {
-  console.log('upload chunk');
-  return upload(`/api/data-management/datasets/${id}/upload/chunk`, params, {
+  return upload(`/api/data-management/datasets/${id}/files/upload/chunk`, params, {
     headers: {
       accept: "*/*",
       "Content-Type": "multipart/form-data;charset=UTF-8",

frontend/src/pages/Layout/MainLayout.tsx

@@ -4,12 +4,12 @@ import Sidebar from "./Sidebar";
 
 const MainLayout = () => {
   return (
-    <div className="w-full h-screen flex flex-col bg-gray-50">
+    <div className="w-full h-screen flex flex-col bg-gray-50 min-w-6xl">
       <div className="w-full h-full flex">
         {/* Sidebar */}
         <Sidebar />
         {/* Main Content */}
-        <div className="flex-1 flex flex-col overflow-auto p-6 min-w-4xl">
+        <div className="flex-1 flex flex-col overflow-auto p-6">
           {/* Content Area */}
           <div className="flex-1 flex flex-col overflow-auto">
             <Outlet />