feature: 清洗任务详情页 (#73)

* feature: 清洗任务详情

* fix: 取消构建镜像，改为直接拉取

* fix: 增加清洗任务详情页

* fix: 增加清洗任务详情页

* fix: 算子列表可点击

* fix: 模板详情和更新

frontend/src/pages/DataCleansing/Home/components/TaskList.tsx

@@ -43,10 +43,6 @@ export default function TaskList() {
     handleFiltersChange,
   } = useFetchData(queryCleaningTasksUsingGet, mapTask);
 
-  const handleViewTask = (task: any) => {
-    navigate("/data/cleansing/task-detail/" + task.id);
-  };
-
   const pauseTask = async (item: CleansingTask) => {
     await stopCleaningTaskUsingPost(item.id);
     message.success("任务已暂停");
@@ -86,8 +82,12 @@ export default function TaskList() {
       onClick: startTask, // implement pause/play logic
     };
     return [
-      isRunning && pauseBtn,
-      showStart && startBtn,
+      ...(isRunning
+        ? [ pauseBtn ]
+        : []),
+      ...(showStart
+        ? [ startBtn ]
+        : []),
       {
         key: "delete",
         label: "删除",
@@ -106,6 +106,18 @@ export default function TaskList() {
       fixed: "left",
       width: 150,
       ellipsis: true,
+      render: (_, task: CleansingTask) => {
+        return (
+          <Button
+            type="link"
+            onClick={() =>
+              navigate("/data/cleansing/task-detail/" + task.id)
+            }
+          >
+            {task.name}
+          </Button>
+        );
+      },
     },
     {
       title: "任务ID",
@@ -273,6 +285,9 @@ export default function TaskList() {
           data={tableData}
           operations={taskOperations}
           pagination={pagination}
+          onView={(tableData) => {
+            navigate("/data/cleansing/task-detail/" + tableData.id)
+          }}
         />
       ) : (
         <Card>

frontend/src/pages/DataCleansing/Home/components/TemplateList.tsx

@@ -1,21 +1,102 @@
-import { DeleteOutlined } from "@ant-design/icons";
+import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
 import CardView from "@/components/CardView";
 import {
-  deleteCleaningTemplateByIdUsingDelete,
-  queryCleaningTemplatesUsingGet,
+  deleteCleaningTemplateByIdUsingDelete, queryCleaningTemplatesUsingGet,
 } from "../../cleansing.api";
 import useFetchData from "@/hooks/useFetchData";
-import { mapTemplate } from "../../cleansing.const";
-import { App } from "antd";
-import { CleansingTemplate } from "../../cleansing.model";
+import {mapTemplate} from "../../cleansing.const";
+import {App, Button, Card, Table, Tooltip} from "antd";
+import {CleansingTemplate} from "../../cleansing.model";
+import {SearchControls} from "@/components/SearchControls.tsx";
+import {useNavigate} from "react-router";
+import {useState} from "react";
 
 export default function TemplateList() {
+  const navigate = useNavigate();
   const { message } = App.useApp();
+  const [viewMode, setViewMode] = useState<"card" | "list">("list");
 
-  const { tableData, pagination, fetchData } = useFetchData(
-    queryCleaningTemplatesUsingGet,
-    mapTemplate
-  );
+  const {
+    loading,
+    tableData,
+    pagination,
+    searchParams,
+    setSearchParams,
+    fetchData,
+    handleFiltersChange,
+  } = useFetchData(queryCleaningTemplatesUsingGet, mapTemplate);
+
+  const templateOperations = () => {
+    return [
+      {
+        key: "update",
+        label: "编辑",
+        icon: <EditOutlined />,
+        onClick: (template: CleansingTemplate) => navigate(`/data/cleansing/update-template/${template.id}`)
+      },
+      {
+        key: "delete",
+        label: "删除",
+        danger: true,
+        icon: <DeleteOutlined />,
+        onClick: deleteTemplate, // implement delete logic
+      },
+    ];
+  };
+
+  const templateColumns = [
+    {
+      title: "模板名称",
+      dataIndex: "name",
+      key: "name",
+      fixed: "left",
+      width: 150,
+      ellipsis: true,
+      render: (_, template: CleansingTemplate) => {
+        return (
+          <Button
+            type="link"
+            onClick={() =>
+              navigate("/data/cleansing/template-detail/" + template.id)
+            }
+          >
+            {template.name}
+          </Button>
+        );
+      }},
+      {
+        title: "算子数量",
+        dataIndex: "num",
+        key: "num",
+        width: 100,
+        ellipsis: true,
+        render: (_, template: CleansingTemplate) => {
+          return template.instance?.length ?? 0;
+        },
+      },
+      {
+        title: "操作",
+        key: "action",
+        fixed: "right",
+        width: 20,
+        render: (text: string, record: any) => (
+          <div className="flex gap-2">
+            {templateOperations(record).map((op) =>
+              op ? (
+                <Tooltip key={op.key} title={op.label}>
+                  <Button
+                    type="text"
+                    icon={op.icon}
+                    danger={op?.danger}
+                    onClick={() => op.onClick(record)}
+                  />
+                </Tooltip>
+              ) : null
+            )}
+          </div>
+        ),
+      },
+    ]
 
   const deleteTemplate = async (template: CleansingTemplate) => {
     if (!template.id) {
@@ -27,21 +108,43 @@ export default function TemplateList() {
     message.success("模板删除成功");
   };
 
-  const operations = [
-    {
-      key: "delete",
-      label: "删除模板",
-      danger: true,
-      icon: <DeleteOutlined />,
-      onClick: (template: CleansingTemplate) => deleteTemplate(template), // 可实现删除逻辑
-    },
-  ];
-
   return (
-    <CardView
-      data={tableData}
-      operations={operations}
-      pagination={pagination}
-    />
+    <>
+      {/* Search and Filters */}
+      <SearchControls
+        searchTerm={searchParams.keyword}
+        onSearchChange={(keyword) =>
+          setSearchParams({ ...searchParams, keyword })
+        }
+        searchPlaceholder="搜索模板名称、描述"
+        onFiltersChange={handleFiltersChange}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        showViewToggle={true}
+        onReload={fetchData}
+        onClearFilters={() => setSearchParams({ ...searchParams, filter: {} })}
+      />
+      {viewMode === "card" ? (
+        <CardView
+          data={tableData}
+          operations={templateOperations}
+          pagination={pagination}
+          onView={(tableData) => {
+            navigate("/data/cleansing/template-detail/" + tableData.id)
+          }}
+        />
+      ) : (
+        <Card>
+          <Table
+            columns={templateColumns}
+            dataSource={tableData}
+            rowKey="id"
+            loading={loading}
+            scroll={{ x: "max-content", y: "calc(100vh - 35rem)" }}
+            pagination={pagination}
+          />
+        </Card>
+      )}
+    </>
   );
 }