diff --git a/frontend/src/pages/OperatorMarket/operator.const.tsx b/frontend/src/pages/OperatorMarket/operator.const.tsx
index ee2c25f..424fd59 100644
--- a/frontend/src/pages/OperatorMarket/operator.const.tsx
+++ b/frontend/src/pages/OperatorMarket/operator.const.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { Code, FileSliders, Image } from "lucide-react";
+import { Atom, Code, FileText, Film, Image, Music } from "lucide-react";
import { OperatorI } from "./operator.model";
import { formatDateTime } from "@/utils/unit.ts";
@@ -11,17 +11,73 @@ const getOperatorVisual = (
const inputs = (op?.inputs || "").toLowerCase();
const outputs = (op?.outputs || "").toLowerCase();
+ // 后端固定的分类 ID,兼容 categories 传 UUID 的情况
+ const CATEGORY_IDS = {
+ text: "d8a5df7a-52a9-42c2-83c4-01062e60f597",
+ image: "de36b61c-9e8a-4422-8c31-d30585c7100f",
+ audio: "42dd9392-73e4-458c-81ff-41751ada47b5",
+ video: "a233d584-73c8-4188-ad5d-8f7c8dda9c27",
+ } as const;
+
+ const hasCategoryId = (key: keyof typeof CATEGORY_IDS) =>
+ (op?.categories || []).some((c) => c === CATEGORY_IDS[key]);
+
+ const isMultimodal =
+ ["multimodal", "multi", "多模态"].some((k) =>
+ type.includes(k)
+ ) ||
+ categories.some((c) => c.includes("multimodal") || c.includes("多模态")) ||
+ inputs.includes("multimodal") ||
+ outputs.includes("multimodal");
+
+ const isVideoOp =
+ ["video", "视频"].includes(type) ||
+ categories.some((c) => c.includes("video") || c.includes("视频")) ||
+ inputs.includes("video") ||
+ outputs.includes("video") ||
+ hasCategoryId("video");
+
+ const isAudioOp =
+ ["audio", "音频"].includes(type) ||
+ categories.some((c) => c.includes("audio") || c.includes("音频")) ||
+ inputs.includes("audio") ||
+ outputs.includes("audio") ||
+ hasCategoryId("audio");
+
const isImageOp =
["image", "图像", "图像类"].includes(type) ||
categories.some((c) => c.includes("image") || c.includes("图像")) ||
inputs.includes("image") ||
- outputs.includes("image");
+ outputs.includes("image") ||
+ hasCategoryId("image");
const isTextOp =
["text", "文本", "文本类"].includes(type) ||
categories.some((c) => c.includes("text") || c.includes("文本")) ||
inputs.includes("text") ||
- outputs.includes("text");
+ outputs.includes("text") ||
+ hasCategoryId("text");
+
+ if (isMultimodal) {
+ return {
+ icon: ,
+ iconColor: "#F472B6",
+ };
+ }
+
+ if (isVideoOp) {
+ return {
+ icon: ,
+ iconColor: "#22D3EE",
+ };
+ }
+
+ if (isAudioOp) {
+ return {
+ icon: ,
+ iconColor: "#F59E0B",
+ };
+ }
if (isImageOp) {
return {
@@ -32,7 +88,7 @@ const getOperatorVisual = (
if (isTextOp) {
return {
- icon: ,
+ icon: ,
iconColor: "#A78BFA", // 文本算子背景色
};
}