frontend: 算子市场页面更新

chenghh-9609 · chenghh-9609 · commit cc439a204d6d · 2025-10-15T18:36:55.000+08:00
diff --git a/frontend/src/hooks/useFetchData.ts b/frontend/src/hooks/useFetchData.ts
@@ -55,13 +55,14 @@ export default function useFetchData<T>(
     return arr[0];
   }
 
-  async function fetchData() {
+  async function fetchData(extraParams = {}) {
     const { keywords, filter, current, pageSize } = searchParams;
     Loading.show();
     setLoading(true);
     try {
       const { data } = await fetchFunc({
         ...filter,
+        ...extraParams,
         keywords,
         type: getFirstOfArray(filter?.type) || undefined,
         status: getFirstOfArray(filter?.status) || undefined,
diff --git a/frontend/src/pages/DataCleansing/Create/components/OperatorConfig.tsx b/frontend/src/pages/DataCleansing/Create/components/OperatorConfig.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Tag, Divider, Form } from "antd";
 import ParamConfig from "./ParamConfig";
-import { OperatorI } from "../../cleansing.model";
 import { Settings } from "lucide-react";
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
 
 // OperatorConfig/OperatorTemplate 类型需根据主文件实际导入
 interface OperatorConfigProps {
diff --git a/frontend/src/pages/DataCleansing/Create/components/OperatorLibrary.tsx b/frontend/src/pages/DataCleansing/Create/components/OperatorLibrary.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { Card, Input, Select, Tooltip, Collapse, Tag, Checkbox } from "antd";
 import { StarFilled, StarOutlined, SearchOutlined } from "@ant-design/icons";
-import type { OperatorI } from "@/pages/DataCleansing/cleansing.model";
-import { CategoryI } from "@/pages/OperatorMarket/operator.model";
+import { CategoryI, OperatorI } from "@/pages/OperatorMarket/operator.model";
 import { Layers } from "lucide-react";
 
 interface OperatorListProps {
diff --git a/frontend/src/pages/DataCleansing/Create/components/OperatorOrchestration.tsx b/frontend/src/pages/DataCleansing/Create/components/OperatorOrchestration.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { Card, Input, Tag, Select, Button } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import { CleansingTemplate, OperatorI } from "../../cleansing.model";
+import { CleansingTemplate } from "../../cleansing.model";
 import { Workflow } from "lucide-react";
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
 
 interface OperatorFlowProps {
   selectedOperators: OperatorI[];
diff --git a/frontend/src/pages/DataCleansing/Create/components/ParamConfig.tsx b/frontend/src/pages/DataCleansing/Create/components/ParamConfig.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Input, Select, Radio, Checkbox, Form, InputNumber, Slider } from "antd";
-import { OperatorI } from "../../cleansing.model";
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
 
 interface ParamConfigProps {
   operator: OperatorI;
diff --git a/frontend/src/pages/DataCleansing/Create/hooks/useDragOperators.ts b/frontend/src/pages/DataCleansing/Create/hooks/useDragOperators.ts
@@ -1,5 +1,5 @@
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
 import React, { useState } from "react";
-import { OperatorI } from "../../cleansing.model";
 
 export function useDragOperators({
   operators,
diff --git a/frontend/src/pages/DataCleansing/Create/hooks/useOperatorOperations.ts b/frontend/src/pages/DataCleansing/Create/hooks/useOperatorOperations.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { CleansingTemplate, OperatorI } from "../../cleansing.model";
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
+import { CleansingTemplate } from "../../cleansing.model";
 import { queryCleaningTemplatesUsingGet } from "../../cleansing.api";
 import {
   queryCategoryTreeUsingGet,
diff --git a/frontend/src/pages/DataCleansing/Detail/components/BasicInfo.tsx b/frontend/src/pages/DataCleansing/Detail/components/BasicInfo.tsx
@@ -1,8 +1,6 @@
-import type {
-  CleansingTask,
-  OperatorI,
-} from "@/pages/DataCleansing/cleansing.model";
-import { Button, Card, Descriptions, Progress, Badge, Tag } from "antd";
+import type { CleansingTask } from "@/pages/DataCleansing/cleansing.model";
+import { OperatorI } from "@/pages/OperatorMarket/operator.model";
+import { Button, Card, Descriptions, Progress, Tag } from "antd";
 import { Activity, AlertCircle, CheckCircle, Clock } from "lucide-react";
 import { useNavigate } from "react-router";
 
diff --git a/frontend/src/pages/DataCleansing/cleansing.model.ts b/frontend/src/pages/DataCleansing/cleansing.model.ts
@@ -1,28 +1,4 @@
-export interface OperatorI {
-  id: string;
-  name: string;
-  type: string;
-  icon: React.ReactNode;
-  description: string;
-  tags: string[];
-  isStar?: boolean;
-  originalId?: string; // 用于标识原始算子ID，便于去重
-  categories: number[]; // 分类列表
-  settings: string;
-  params?: { [key: string]: any }; // 用户配置的参数
-  defaultParams?: { [key: string]: any }; // 默认参数
-  configs: {
-    [key: string]: {
-      type: "input" | "select" | "radio" | "checkbox" | "range";
-      label: string;
-      value: any;
-      options?: string[] | { label: string; value: any }[];
-      min?: number;
-      max?: number;
-      step?: number;
-    };
-  };
-}
+import { OperatorI } from "../OperatorMarket/operator.model";
 
 export interface CleansingTask {
   id: string;
diff --git a/frontend/src/pages/DataCollection/Home/components/TaskManagement.tsx b/frontend/src/pages/DataCollection/Home/components/TaskManagement.tsx
@@ -10,9 +10,11 @@ import {
 import { TaskStatus, type CollectionTask } from "../../collection.model";
 import { StatusMap, SyncModeMap } from "../../collection.const";
 import useFetchData from "@/hooks/useFetchData";
+import { useNavigate } from "react-router";
 
 export default function TaskManagement() {
   const { message } = App.useApp();
+  const navigate = useNavigate();
   const filters = [
     {
       key: "status",
@@ -52,19 +54,17 @@ export default function TaskManagement() {
     fetchData();
   };
 
-  const handleViewDetail = (record: CollectionTask) => {
-    // Implement your view detail logic here
-    console.log("Viewing details for task:", record);
-  };
-
   const columns = [
     {
       title: "任务名称",
       dataIndex: "name",
       key: "name",
       fixed: "left",
       render: (text: string, record: CollectionTask) => (
-        <Button type="link" onClick={() => handleViewDetail(record)}>
+        <Button
+          type="link"
+          onClick={() => navigate("`/data-collection/tasks/${record.id}`)}>")}
+        >
           {text}
         </Button>
       ),
diff --git a/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx b/frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx
@@ -7,22 +7,17 @@ import {
   FileTextOutlined,
   DatabaseOutlined,
   FileImageOutlined,
-  ClockCircleOutlined,
 } from "@ant-design/icons";
 import DetailHeader from "@/components/DetailHeader";
-import {
-  mapDataset,
-  datasetStatusMap,
-  datasetSubTypeMap,
-} from "../dataset.const";
+import { mapDataset, datasetSubTypeMap } from "../dataset.const";
 import type { Dataset } from "@/pages/DataManagement/dataset.model";
 import { Link, useParams } from "react-router";
 import { useFilesOperation, useImportFile } from "../hooks";
 import { downloadFile, queryDatasetByIdUsingGet } from "../dataset.api";
 import DataQuality from "./components/DataQuality";
 import DataLineageFlow from "./components/DataLineageFlow";
 import Overview from "./components/Overview";
-import { Activity, Clock, Dock, File, FileType } from "lucide-react";
+import { Activity, Clock, File, FileType } from "lucide-react";
 
 const navigateItems = [
   {
diff --git a/frontend/src/pages/OperatorMarket/Detail/OperatorPluginDetail.tsx b/frontend/src/pages/OperatorMarket/Detail/OperatorPluginDetail.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { useState } from "react";
 import { Card, Breadcrumb } from "antd";
@@ -7,22 +7,52 @@ import {
   ShareAltOutlined,
   StarOutlined,
 } from "@ant-design/icons";
-import { Download, Settings, Clock, User, Package, Zap } from "lucide-react";
+import { Download, Clock, User } from "lucide-react";
 import DetailHeader from "@/components/DetailHeader";
-import { Link } from "react-router";
+import { Link, useParams } from "react-router";
 import Overview from "./components/Overview";
 import Install from "./components/Install";
 import Documentation from "./components/Documentation";
 import Examples from "./components/Examples";
 import ChangeLog from "./components/ChangeLog";
 import Reviews from "./components/Reviews";
+import { queryOperatorByIdUsingGet } from "../operator.api";
+import { OperatorI } from "../operator.model";
+import { mapOperator } from "../operator.const";
 
 export default function OperatorPluginDetail() {
+  const { id } = useParams(); // 获取动态路由参数
   const [activeTab, setActiveTab] = useState("overview");
   const [isFavorited, setIsFavorited] = useState(false);
+  const [operator, setOperator] = useState<OperatorI | null>(null);
+
+  const fetchOperator = async () => {
+    try {
+      const { data } = await queryOperatorByIdUsingGet(id as unknown as number);
+      setOperator(mapOperator(data));
+    } catch (error) {
+      setOperator("error");
+    }
+  };
+
+  useEffect(() => {
+    fetchOperator();
+  }, [id]);
+
+  if (!operator) {
+    return <div>Loading...</div>;
+  }
+
+  if (operator === "error") {
+    return (
+      <div className="text-red-500">
+        Failed to load operator details. Please try again later.
+      </div>
+    );
+  }
 
   // 模拟算子数据
-  const operator = {
+  const mockOperator = {
     id: 1,
     name: "图像预处理算子",
     version: "1.2.0",
@@ -216,73 +246,21 @@ result = processor.process(image)`,
     ],
   };
 
-  const getStatusBadge = (status: string) => {
-    const statusConfig = {
-      active: {
-        label: "活跃",
-        color:
-          "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200",
-        icon: Zap,
-      },
-      beta: {
-        label: "测试版",
-        color:
-          "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200",
-        icon: Settings,
-      },
-      deprecated: {
-        label: "已弃用",
-        color:
-          "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200",
-        icon: Settings,
-      },
-    };
-    return (
-      statusConfig[status as keyof typeof statusConfig] || statusConfig.active
-    );
-  };
-
-  // 构造 DetailHeader 所需数据
-  const headerData = {
-    id: operator.id,
-    icon: (
-      <div className="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center">
-        <Package className="w-8 h-8 text-blue-600" />
-      </div>
-    ),
-    name: operator.name,
-    description: operator.description,
-    status: {
-      label: getStatusBadge(operator.status).label,
-      icon: React.createElement(getStatusBadge(operator.status).icon, {
-        className: "w-3 h-3",
-      }),
-      color:
-        operator.status === "active"
-          ? "green"
-          : operator.status === "beta"
-          ? "blue"
-          : "gray",
-    },
-    createdAt: operator.createdAt,
-    lastUpdated: operator.lastModified,
-  };
-
   const statistics = [
     {
       icon: <Download className="w-4 h-4" />,
       label: "",
-      value: operator.downloads.toLocaleString(),
+      value: operator?.downloads?.toLocaleString(),
     },
     {
       icon: <User className="w-4 h-4" />,
       label: "",
-      value: operator.author,
+      value: operator?.author,
     },
     {
       icon: <Clock className="w-4 h-4" />,
       label: "",
-      value: operator.lastModified,
+      value: operator?.lastModified,
     },
   ];
 
@@ -327,12 +305,12 @@ result = processor.process(image)`,
             href: "/data/operator-market",
           },
           {
-            title: operator.name,
+            title: operator?.name,
           },
         ]}
       />
       <DetailHeader
-        data={headerData}
+        data={operator}
         statistics={statistics}
         operations={operations}
       />
diff --git a/frontend/src/pages/OperatorMarket/Home/OperatorMarket.tsx b/frontend/src/pages/OperatorMarket/Home/OperatorMarket.tsx
diff --git a/frontend/src/pages/OperatorMarket/Home/components/Filters.tsx b/frontend/src/pages/OperatorMarket/Home/components/Filters.tsx
diff --git a/frontend/src/pages/OperatorMarket/operator.const.tsx b/frontend/src/pages/OperatorMarket/operator.const.tsx
diff --git a/frontend/src/pages/OperatorMarket/operator.model.ts b/frontend/src/pages/OperatorMarket/operator.model.ts
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
