fixbug: 算子库搜索，添加算子全选功能

chenghh-9609 · chenghh-9609 · commit d19d3b4b4bdc · 2025-10-20T17:29:47.000+08:00
diff --git a/frontend/src/mock/mock-seed/data-cleansing.cjs b/frontend/src/mock/mock-seed/data-cleansing.cjs
@@ -11,13 +11,10 @@ function operatorItem() {
     outputs: Mock.Random.integer(1, 5),
     settings: JSON.stringify({
       host: { type: "input", label: "主机地址", value: "localhost" },
-      port: { type: "input", label: "端口", value: "3306" },
-      database: { type: "input", label: "数据库名", value: "" },
-      table: { type: "input", label: "表名", value: "" },
       limit: {
         type: "range",
         label: "读取行数",
-        value: [1000],
+        value: [1000, 2000],
         min: 100,
         max: 10000,
         step: 100,
@@ -35,6 +32,24 @@ function operatorItem() {
         value: [],
         options: ["feature1", "feature2", "feature3"],
       },
+      repeatPhraseRatio: {
+        name: "文档词重复率",
+        description: "某个词的统计数/文档总词数 > 设定值，该文档被去除。",
+        type: "slider",
+        defaultVal: 0.5,
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+      hitStopwords: {
+        name: "去除停用词",
+        description: "统计重复词时，选择是否要去除停用词。",
+        type: "switch",
+        defaultVal: false,
+        required: true,
+        checkedLabel: "去除",
+        unCheckedLabel: "不去除",
+      },
     }),
     categories: [Mock.Random.pick([3, 4, 5, 6, 7, 8, 9])],
     isStar: Mock.Random.boolean(),
@@ -51,7 +66,13 @@ 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", "STOPPED"]),
+    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, ""),
diff --git a/frontend/src/pages/DataCleansing/Create/CreateTask.tsx b/frontend/src/pages/DataCleansing/Create/CreateTask.tsx
@@ -1,15 +1,12 @@
 import { useState } from "react";
-import { Card, Steps, Button, message, Form } from "antd";
+import { Steps, Button, message, Form } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
 import { Link, useNavigate } from "react-router";
 import { ArrowLeft } from "lucide-react";
 import { createCleaningTaskUsingPost } from "../cleansing.api";
 import CreateTaskStepOne from "./components/CreateTaskStepOne";
 import { useCreateStepTwo } from "./hooks/useCreateStepTwo";
-import {
-  DatasetSubType,
-  DatasetType,
-} from "@/pages/DataManagement/dataset.model";
+import { DatasetType } from "@/pages/DataManagement/dataset.model";
 
 export default function CleansingTaskCreate() {
   const navigate = useNavigate();
@@ -43,7 +40,6 @@ export default function CleansingTaskCreate() {
         },
       })),
     };
-    console.log("创建任务:", task);
     navigate("/data/cleansing");
     await createCleaningTaskUsingPost(task);
     message.success("任务已创建");
diff --git a/frontend/src/pages/DataCleansing/Create/components/OperatorLibrary.tsx b/frontend/src/pages/DataCleansing/Create/components/OperatorLibrary.tsx
@@ -1,5 +1,14 @@
 import React, { useMemo, useState } from "react";
-import { Card, Input, Select, Tooltip, Collapse, Tag, Checkbox } from "antd";
+import {
+  Card,
+  Input,
+  Select,
+  Tooltip,
+  Collapse,
+  Tag,
+  Checkbox,
+  Button,
+} from "antd";
 import { StarFilled, StarOutlined, SearchOutlined } from "@ant-design/icons";
 import { CategoryI, OperatorI } from "@/pages/OperatorMarket/operator.model";
 import { Layers } from "lucide-react";
@@ -76,6 +85,7 @@ interface OperatorLibraryProps {
   selectedOperators: OperatorI[];
   operatorList: OperatorI[];
   categoryOptions: CategoryI[];
+  setSelectedOperators: (operators: OperatorI[]) => void;
   toggleOperator: (template: OperatorI) => void;
   handleDragStart: (
     e: React.DragEvent,
@@ -88,6 +98,7 @@ const OperatorLibrary: React.FC<OperatorLibraryProps> = ({
   selectedOperators,
   operatorList,
   categoryOptions,
+  setSelectedOperators,
   toggleOperator,
   handleDragStart,
 }) => {
@@ -116,25 +127,40 @@ const OperatorLibrary: React.FC<OperatorLibraryProps> = ({
         }
       });
     }
-    setExpandedCategories(new Set(Object.keys(groups)));
-    return groups;
-  }, [categoryOptions, selectedCategory]);
 
-  // 过滤算子
-  const filteredOperators = useMemo(() => {
-    let filtered = operatorList;
     if (searchTerm) {
-      filtered = filtered.filter(
-        (operator) =>
-          operator.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          operator.description.toLowerCase().includes(searchTerm.toLowerCase())
-      );
+      Object.keys(groups).forEach((key) => {
+        groups[key].operators = groups[key].operators.filter((operator) =>
+          operator.name.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+        if (groups[key].operators.length === 0) {
+          delete groups[key];
+        }
+      });
     }
+
     if (showFavorites) {
-      filtered = filtered.filter((operator) => favorites.has(operator.id));
+      Object.keys(groups).forEach((key) => {
+        groups[key].operators = groups[key].operators.filter((operator) =>
+          favorites.has(operator.id)
+        );
+        if (groups[key].operators.length === 0) {
+          delete groups[key];
+        }
+      });
     }
+
+    setExpandedCategories(new Set(Object.keys(groups)));
+    return groups;
+  }, [categoryOptions, selectedCategory, searchTerm, showFavorites]);
+
+  // 过滤算子
+  const filteredOperators = useMemo(() => {
+    const filtered = Object.values(groupedOperators).flatMap(
+      (category) => category.operators
+    );
     return filtered;
-  }, [groupedOperators, searchTerm, showFavorites, favorites]);
+  }, [groupedOperators]);
 
   // 收藏切换
   const toggleFavorite = (operatorId: string) => {
@@ -147,21 +173,33 @@ const OperatorLibrary: React.FC<OperatorLibraryProps> = ({
     setFavorites(newFavorites);
   };
 
+  // 全选分类算子
+  const handleSelectAll = (operators: OperatorI[]) => {
+    const newSelected = [...selectedOperators];
+    operators.forEach((operator) => {
+      if (!newSelected.some((op) => op.id === operator.id)) {
+        newSelected.push(operator);
+      }
+    });
+    setSelectedOperators(newSelected);
+  };
+
   return (
     <div className="w-1/4 h-full min-w-3xs flex flex-col">
       <div className="pb-4 border-b border-gray-200">
         <span className="flex items-center font-semibold text-base">
           <Layers className="w-4 h-4 mr-2" />
-          算子库({operatorList.length})
+          算子库({filteredOperators.length})
         </span>
       </div>
       <div className="flex flex-col h-full pt-4 pr-4 overflow-hidden">
         {/* 过滤器 */}
         <div className="flex flex-wrap gap-2 border-b border-gray-100 pb-4">
           <Input
             prefix={<SearchOutlined />}
-            placeholder="搜索算子..."
+            placeholder="搜索算子名称..."
             value={searchTerm}
+            allowClear
             onChange={(e) => setSearchTerm(e.target.value)}
           />
           <Select
@@ -200,10 +238,22 @@ const OperatorLibrary: React.FC<OperatorLibraryProps> = ({
               <Collapse.Panel
                 key={key}
                 header={
-                  <span className="flex items-center gap-2">
-                    <span>{category.name}</span>
-                    <Tag>{category.operators.length}</Tag>
-                  </span>
+                  <div className="flex items-center justify-between w-full">
+                    <span className="flex items-center gap-2">
+                      <span>{category.name}</span>
+                      <Tag>{category.operators.length}</Tag>
+                    </span>
+                    <Button
+                      type="link"
+                      size="small"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSelectAll(category.operators);
+                      }}
+                    >
+                      全选
+                    </Button>
+                  </div>
                 }
               >
                 <OperatorList
diff --git a/frontend/src/pages/DataCleansing/Create/components/ParamConfig.tsx b/frontend/src/pages/DataCleansing/Create/components/ParamConfig.tsx
@@ -1,5 +1,13 @@
 import React from "react";
-import { Input, Select, Radio, Checkbox, Form, InputNumber, Slider } from "antd";
+import {
+  Input,
+  Select,
+  Radio,
+  Checkbox,
+  Form,
+  InputNumber,
+  Slider,
+} from "antd";
 import { OperatorI } from "@/pages/OperatorMarket/operator.model";
 
 interface ParamConfigProps {
@@ -28,6 +36,7 @@ const ParamConfig: React.FC<ParamConfigProps> = ({
             value={value}
             onChange={(e) => updateValue(e.target.value)}
             placeholder={`请输入${param.label}`}
+            className="w-full"
           />
         </Form.Item>
       );
@@ -92,6 +101,7 @@ const ParamConfig: React.FC<ParamConfigProps> = ({
               min={param.min || 0}
               max={param.max || 100}
               step={param.step || 1}
+              className="flex-1"
             />
             <InputNumber
               min={param.min || 0}
@@ -122,6 +132,7 @@ const ParamConfig: React.FC<ParamConfigProps> = ({
             min={param.min || 0}
             max={param.max || 100}
             step={param.step || 1}
+            className="w-full"
           />
         </Form.Item>
       );
diff --git a/frontend/src/pages/DataCleansing/Create/hooks/useCreateStepTwo.tsx b/frontend/src/pages/DataCleansing/Create/hooks/useCreateStepTwo.tsx
@@ -44,6 +44,7 @@ export function useCreateStepTwo() {
         categoryOptions={categoryOptions}
         selectedOperators={selectedOperators}
         operatorList={operators}
+        setSelectedOperators={setSelectedOperators}
         toggleOperator={toggleOperator}
         handleDragStart={handleDragStart}
       />
diff --git a/frontend/src/pages/DataCleansing/Home/components/TaskList.tsx b/frontend/src/pages/DataCleansing/Home/components/TaskList.tsx
@@ -177,6 +177,30 @@ export default function TaskList() {
         <Progress percent={progress} size="small" />
       ),
     },
+    {
+      title: "创建时间",
+      dataIndex: "createdAt",
+      key: "createdAt",
+      width: 180,
+    },
+    {
+      title: "执行耗时",
+      dataIndex: "duration",
+      key: "duration",
+      width: 180,
+    },
+    {
+      title: "数据量变化",
+      dataIndex: "dataSizeChange",
+      key: "dataSizeChange",
+      width: 180,
+      render: (_: any, record: CleansingTask) => {
+        if (record.before !== undefined && record.after !== undefined) {
+          return `${record.before} → ${record.after}`;
+        }
+        return "-";
+      },
+    },
     {
       title: "操作",
       key: "action",
diff --git a/frontend/src/pages/DataCleansing/cleansing.const.tsx b/frontend/src/pages/DataCleansing/cleansing.const.tsx
@@ -4,7 +4,11 @@ import {
   TaskStatus,
   TemplateType,
 } from "@/pages/DataCleansing/cleansing.model";
-import { formatDateTime } from "@/utils/unit";
+import {
+  formatBytes,
+  formatDateTime,
+  formatExecutionDuration,
+} from "@/utils/unit";
 import {
   ClockCircleOutlined,
   PlayCircleOutlined,
@@ -82,15 +86,39 @@ export const TaskStatusMap = {
 };
 
 export const mapTask = (task: CleansingTask) => {
+  const duration = formatExecutionDuration(task.startedAt, task.finishedAt);
+  const before = formatBytes(task.beforeSize);
+  const after = formatBytes(task.afterSize);
+  const status = TaskStatusMap[task.status];
+  const finishedAt = formatDateTime(task.finishedAt);
+  const startedAt = formatDateTime(task.startedAt);
+  const createdAt = formatDateTime(task.createdAt);
   return {
     ...task,
-    createdAt: formatDateTime(task.createdAt),
-    startedAt: formatDateTime(task.startedAt),
-    endedAt: formatDateTime(task.endedAt),
+    createdAt,
+    startedAt,
+    finishedAt,
     icon: <DatabaseOutlined style={{ color: "#1677ff" }} />,
     iconColor: "bg-blue-100",
-    status: TaskStatusMap[task.status],
-    statistics: [{ label: "进度", value: `${task.progress}%` }],
+    status,
+    duration,
+    before,
+    after,
+    statistics: [
+      { label: "进度", value: `${task.progress || 0}%` },
+      {
+        label: "执行耗时",
+        value: duration,
+      },
+      {
+        label: "处理前数据大小",
+        value: task.beforeSize ? formatBytes(task.beforeSize) : "--",
+      },
+      {
+        label: "处理后数据大小",
+        value: task.afterSize ? formatBytes(task.afterSize) : "--",
+      },
+    ],
     lastModified: formatDateTime(task.createdAt),
   };
 };
diff --git a/frontend/src/pages/DataCleansing/cleansing.model.ts b/frontend/src/pages/DataCleansing/cleansing.model.ts
@@ -20,6 +20,9 @@ export interface CleansingTask {
   operators: OperatorI[];
   createdAt: string;
   updatedAt: string;
+  finishedAt: string;
+  beforeSize?: number;
+  afterSize?: number;
 }
 
 export interface CleansingTemplate {
diff --git a/frontend/src/pages/DataManagement/Create/EditDataset.tsx b/frontend/src/pages/DataManagement/Create/EditDataset.tsx
@@ -71,10 +71,10 @@ export default function EditDataset({
   return (
     <Drawer
       title={`编辑数据集${data?.name}`}
-      closable={{ "aria-label": "Close Button" }}
       onClose={onClose}
       open={open}
       width={600}
+      maskClosable={false}
       footer={
         <div className="flex gap-2 justify-end p-6">
           <Button onClick={onClose}>取消</Button>
diff --git a/frontend/src/utils/unit.ts b/frontend/src/utils/unit.ts

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,9 @@ export interface CleansingTask {`
`20`	`20`	`operators: OperatorI[];`
`21`	`21`	`createdAt: string;`
`22`	`22`	`updatedAt: string;`
	`23`	`+ finishedAt: string;`
	`24`	`+ beforeSize?: number;`
	`25`	`+ afterSize?: number;`
`23`	`26`	`}`
`24`	`27`
`25`	`28`	`export interface CleansingTemplate {`