update card icon ui (#50)

* feat: update icons in various components and improve styling for better UI consistency
2025-10-31 16:07:32 +08:00
parent ba0c69086a
commit a055546873
9 changed files with 22 additions and 35 deletions
--- a/frontend/src/components/CardView.tsx
+++ b/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">
--- a/frontend/src/components/DetailHeader.tsx
+++ b/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">
--- a/frontend/src/mock/mock-apis.cjs
+++ b/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", // 预上传文件
--- a/frontend/src/mock/mock-seed/data-cleansing.cjs
+++ b/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;
--- a/frontend/src/pages/DataCleansing/cleansing.const.tsx
+++ b/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),
 });
--- a/frontend/src/pages/DataManagement/dataset.const.tsx
+++ b/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 },
--- a/frontend/src/pages/KnowledgeBase/knowledge-base.const.tsx
+++ b/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",
      },
    ],
--- a/frontend/src/pages/OperatorMarket/Home/components/Filters.tsx
+++ b/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
--- a/frontend/src/pages/OperatorMarket/operator.const.tsx
+++ b/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" />,
  };
 };