update card icon ui (#50)

* feat: update icons in various components and improve styling for better UI consistency

Author: chenghh-9609

frontend/src/components/CardView.tsx

@@ -4,6 +4,7 @@ import { ClockCircleOutlined, StarFilled } from "@ant-design/icons";
 import type { ItemType } from "antd/es/menu/interface";
 import { formatDateTime } from "@/utils/unit";
 import ActionDropdown from "./ActionDropdown";
+import { Database } from "lucide-react";
 
 interface BaseCardDataType {
   id: string | number;
@@ -193,12 +194,9 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
                   <div className="flex items-center gap-3 min-w-0">
                     {item?.icon && (
                       <div
-                        className={`flex-shrink-0 w-12 h-12 ${
-                          item?.iconColor ||
-                          "bg-gradient-to-br from-blue-100 to-blue-200"
-                        } rounded-lg flex items-center justify-center`}
+                        className={`flex-shrink-0 w-12 h-12 bg-gradient-to-br from-sky-300 to-blue-500 text-white rounded-lg flex items-center justify-center`}
                       >
-                        {item?.icon}
+                        <div className="w-6 h-6 text-gray-50">{item?.icon}</div>
                       </div>
                     )}
                     <div className="flex-1 min-w-0">

frontend/src/components/DetailHeader.tsx

@@ -49,13 +49,11 @@ function DetailHeader<T>({
       <div className="flex items-start justify-between">
         <div className="flex items-start gap-4 flex-1">
           <div
-            className={`w-16 h-16 text-white rounded-lg flex-center shadow-lg ${
-              data?.iconColor
-                ? data.iconColor
-                : "bg-gradient-to-br from-blue-100 to-blue-200"
-            }`}
+            className={`w-16 h-16 text-white rounded-lg flex-center shadow-lg bg-gradient-to-br from-sky-300 to-blue-500 text-white`}
           >
-            {data?.icon || <Database className="w-8 h-8" />}
+            {<div className="w-8 h-8 text-gray-50">{data?.icon}</div> || (
+              <Database className="w-8 h-8 text-white" />
+            )}
           </div>
           <div className="flex-1">
             <div className="flex items-center gap-3 mb-2">

frontend/src/mock/mock-apis.cjs

@@ -129,9 +129,9 @@ const MockAPI = {
   // 算子市场
   queryOperatorsUsingPost: "/operators/list", // 获取算子列表
   queryCategoryTreeUsingGet: "/categories/tree", // 获取算子分类树
-  queryOperatorByIdUsingGet: "/operators/:operatorId", // 根据ID获取算子详情
+  queryOperatorByIdUsingGet: "/operators/:id", // 根据ID获取算子详情
   createOperatorUsingPost: "/operators/create", // 创建算子
-  updateOperatorByIdUsingPut: "/operators/:operatorId", // 更新算子
+  updateOperatorByIdUsingPut: "/operators/:id", // 更新算子
   uploadOperatorUsingPost: "/operators/upload", // 上传算子
   uploadFileChunkUsingPost: "/operators/upload/chunk", // 上传切片
   preUploadOperatorUsingPost: "/operators/upload/pre-upload", // 预上传文件

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

@@ -427,7 +427,8 @@ module.exports = function (router) {
   router.get(API.queryOperatorByIdUsingGet, (req, res) => {
     const { id } = req.params;
     const operator = operatorList.find((op) => op.id === id);
-
+    console.log("获取算子详情：", id, operator);
+    
     if (operator) {
       // 增加浏览次数模拟
       operator.viewCount = (operator.viewCount || 0) + 1;

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

@@ -14,10 +14,9 @@ import {
   PlayCircleOutlined,
   CheckCircleOutlined,
   AlertOutlined,
-  DatabaseOutlined,
-  AppstoreOutlined,
   PauseCircleOutlined,
 } from "@ant-design/icons";
+import { BrushCleaning, Layout } from "lucide-react";
 
 export const templateTypesMap = {
   [TemplateType.TEXT]: {
@@ -99,8 +98,7 @@ export const mapTask = (task: CleansingTask) => {
     createdAt,
     startedAt,
     finishedAt,
-    icon: <DatabaseOutlined style={{ color: "#1677ff" }} />,
-    iconColor: "bg-blue-100",
+    icon: <BrushCleaning className="w-full h-full" />,
     status,
     duration,
     before,
@@ -128,8 +126,7 @@ export const mapTemplate = (template: CleansingTemplate) => ({
   ...template,
   createdAt: formatDateTime(template.createdAt),
   updatedAt: formatDateTime(template.updatedAt),
-  icon: <AppstoreOutlined style={{ color: "#1677ff" }} />,
-  iconColor: "bg-blue-100",
+  icon: <Layout className="w-full h-full" />,
   statistics: [{ label: "算子数量", value: template.instance?.length ?? 0 }],
   lastModified: formatDateTime(template.updatedAt),
 });

frontend/src/pages/DataManagement/dataset.const.tsx

@@ -205,14 +205,7 @@ export function mapDataset(dataset: AnyObject): Dataset {
     size: formatBytes(dataset.totalSize || 0),
     createdAt: formatDateTime(dataset.createdAt) || "--",
     updatedAt: formatDateTime(dataset?.updatedAt) || "--",
-    icon: IconComponent ? (
-      <IconComponent
-        className="w-5 h-5 text-gray-500"
-        // style={{ color: iconColor }}
-      />
-    ) : (
-      <Database />
-    ),
+    icon: IconComponent ? <IconComponent className="w-full h-full" /> : <Database />,
     status: datasetStatusMap[dataset.status],
     statistics: [
       { label: "文件数", value: dataset.fileCount || 0 },

frontend/src/pages/KnowledgeBase/knowledge-base.const.tsx

@@ -66,7 +66,7 @@ export const KBTypeMap = {
 export function mapKnowledgeBase(kb: KnowledgeBaseItem): KnowledgeBaseItem {
   return {
     ...kb,
-    icon: <BookOpenText className="text-gray-400" />,
+    icon: <BookOpenText className="w-full h-full" />,
     description: kb.description,
     statistics: [
       {
@@ -78,19 +78,19 @@ export function mapKnowledgeBase(kb: KnowledgeBaseItem): KnowledgeBaseItem {
       {
         label: "文本理解模型",
         key: "chatModel",
-        icon: <BookType className="w-4 h-4 text-green-500" />,
+        icon: <BookType className="w-4 h-4 text-blue-500" />,
         value: kb.chatModel,
       },
       {
         label: "文件数",
         key: "fileCount",
-        icon: <File className="w-4 h-4 text-yellow-500" />,
+        icon: <File className="w-4 h-4 text-blue-500" />,
         value: formatNumber(kb?.fileCount) || 0,
       },
       {
         label: "大小",
         key: "size",
-        icon: <ChartNoAxesColumn className="w-4 h-4 text-red-500" />,
+        icon: <ChartNoAxesColumn className="w-4 h-4 text-blue-500" />,
         value: formatBytes(kb?.size) || "0 MB",
       },
     ],

frontend/src/pages/OperatorMarket/Home/components/Filters.tsx

@@ -140,7 +140,7 @@ const Filters: React.FC<FiltersProps> = ({
               className="cursor-pointer hover:text-blue-500"
             ></Button>
           </Tooltip>
-          <h4>筛选器</h4>
+          <span>筛选器</span>
         </h3>
         {hasActiveFilters && (
           <span

frontend/src/pages/OperatorMarket/operator.const.tsx

@@ -1,9 +1,9 @@
-import { Boxes } from "lucide-react";
+import { Code } from "lucide-react";
 import { OperatorI } from "./operator.model";
 
 export const mapOperator = (op: OperatorI) => {
   return {
     ...op,
-    icon: <Boxes className="w-5 h-5 text-gray-500" />,
+    icon: <Code className="w-full h-full" />,
   };
 };