feat: fix the problem in the Operator Market frontend pages

frontend/src/pages/Orchestration/components/CustomNode.tsx

@@ -1,158 +1,158 @@
-import { Handle, Position } from "@xyflow/react";
-
-import { Button, Card } from "antd";
-import {
-  Settings,
-  Database,
-  Trash2,
-  Copy,
-  ChevronDown,
-  MessageSquare,
-  Brain,
-  Cpu,
-} from "lucide-react";
-import { useState } from "react";
-
-const CustomNode = ({ data, selected }: { data: any; selected: boolean }) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const getNodeIcon = (type: string) => {
-    switch (type) {
-      case "knowledge-search":
-        return <Database className="w-4 h-4 text-blue-600" />;
-      case "ai-dialogue":
-        return <MessageSquare className="w-4 h-4 text-blue-600" />;
-      case "data-processing":
-        return <Cpu className="w-4 h-4 text-blue-600" />;
-      default:
-        return <Brain className="w-4 h-4 text-blue-600" />;
-    }
-  };
-
-  return (
-    <div
-      className="relative"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {/* Left side handles - inputs */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="left-input"
-        className="w-3 h-3 bg-green-500 border-2 border-white shadow-md hover:bg-green-600 transition-all duration-200 hover:scale-110"
-        style={{ left: -6, top: "50%" }}
-      />
-
-      {/* Right side handles - outputs */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="right-output"
-        className="w-3 h-3 bg-blue-500 border-2 border-white shadow-md hover:bg-blue-600 transition-all duration-200 hover:scale-110"
-        style={{ right: -6, top: "50%" }}
-      />
-
-      <Card
-        className={`w-80 transition-all duration-200 ${selected
-            ? "ring-2 ring-blue-500 shadow-lg"
-            : "shadow-md hover:shadow-lg"
-          }`}
-        styles={{ body: { padding: 0 } }}
-      >
-        <div className="pb-3 bg-blue-50 border-b px-4 pt-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-                {getNodeIcon(data.type)}
-              </div>
-              <div>
-                <div className="font-semibold text-gray-900">{data.name}</div>
-                <div className="text-sm text-gray-600">{data.description}</div>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                type="text"
-                size="small"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  data.onDuplicate?.(data.id);
-                }}
-                className="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
-                icon={<Copy className="w-4 h-4" />}
-              />
-              <Button
-                type="text"
-                size="small"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  data.onDelete?.(data.id);
-                }}
-                className="h-8 w-8 p-0 text-gray-500 hover:text-red-600"
-                icon={<Trash2 className="w-4 h-4" />}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="p-4 space-y-4">
-          {/* Input Section */}
-          <div>
-            <div className="font-medium text-gray-900 mb-3 flex items-center gap-2">
-              <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
-              输入
-            </div>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-600">AI 模型</span>
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium">手动选择</span>
-                  <ChevronDown className="w-4 h-4 text-gray-400" />
-                </div>
-              </div>
-              <Button type="primary" className="w-full">
-                <Settings className="w-4 h-4 mr-2" />
-                装载
-              </Button>
-            </div>
-          </div>
-
-          {/* Parameters Table */}
-          <div>
-            <div className="font-medium text-gray-900 mb-3">搜索参数设置</div>
-            <div className="bg-gray-50 rounded-lg p-3">
-              <div className="grid grid-cols-5 gap-2 text-xs font-medium text-gray-600 mb-2">
-                <div>查询方式</div>
-                <div>可用上限</div>
-                <div>查询参数</div>
-                <div>检索数量</div>
-                <div>问题优化</div>
-              </div>
-              <div className="grid grid-cols-5 gap-2 text-xs text-gray-700">
-                <div>含义文档</div>
-                <div>5000</div>
-                <div>0.4</div>
-                <div className="text-red-500">✕</div>
-                <div>Qwen-max</div>
-              </div>
-            </div>
-          </div>
-
-          {/* Output Section */}
-          <div>
-            <div className="font-medium text-gray-900 mb-2 flex items-center gap-2">
-              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
-              输出
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-600">知识库内容</span>
-              <span className="text-gray-500">知识库搜索</span>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default CustomNode;
+import { Handle, Position } from "@xyflow/react";
+
+import { Button, Card } from "antd";
+import {
+  Settings,
+  Database,
+  Trash2,
+  Copy,
+  ChevronDown,
+  MessageSquare,
+  Brain,
+  Cpu,
+} from "lucide-react";
+import { useState } from "react";
+
+const CustomNode = ({ data, selected }: { data: any; selected: boolean }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const getNodeIcon = (type: string) => {
+    switch (type) {
+      case "knowledge-search":
+        return <Database className="w-4 h-4 text-blue-600" />;
+      case "ai-dialogue":
+        return <MessageSquare className="w-4 h-4 text-blue-600" />;
+      case "data-processing":
+        return <Cpu className="w-4 h-4 text-blue-600" />;
+      default:
+        return <Brain className="w-4 h-4 text-blue-600" />;
+    }
+  };
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Left side handles - inputs */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="left-input"
+        className="w-3 h-3 bg-green-500 border-2 border-white shadow-md hover:bg-green-600 transition-all duration-200 hover:scale-110"
+        style={{ left: -6, top: "50%" }}
+      />
+
+      {/* Right side handles - outputs */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="right-output"
+        className="w-3 h-3 bg-blue-500 border-2 border-white shadow-md hover:bg-blue-600 transition-all duration-200 hover:scale-110"
+        style={{ right: -6, top: "50%" }}
+      />
+
+      <Card
+        className={`w-80 transition-all duration-200 ${selected
+            ? "ring-2 ring-blue-500 shadow-lg"
+            : "shadow-md hover:shadow-lg"
+          }`}
+        styles={{ body: { padding: 0 } }}
+      >
+        <div className="pb-3 bg-blue-50 border-b px-4 pt-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
+                {getNodeIcon(data.type)}
+              </div>
+              <div>
+                <div className="font-semibold text-gray-900">{data.name}</div>
+                <div className="text-sm text-gray-600">{data.description}</div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                type="text"
+                size="small"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  data.onDuplicate?.(data.id);
+                }}
+                className="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
+                icon={<Copy className="w-4 h-4" />}
+              />
+              <Button
+                type="text"
+                size="small"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  data.onDelete?.(data.id);
+                }}
+                className="h-8 w-8 p-0 text-gray-500 hover:text-red-600"
+                icon={<Trash2 className="w-4 h-4" />}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="p-4 space-y-4">
+          {/* Input Section */}
+          <div>
+            <div className="font-medium text-gray-900 mb-3 flex items-center gap-2">
+              <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
+              输入
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600">AI 模型</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">手动选择</span>
+                  <ChevronDown className="w-4 h-4 text-gray-400" />
+                </div>
+              </div>
+              <Button type="primary" className="w-full">
+                <Settings className="w-4 h-4 mr-2" />
+                装载
+              </Button>
+            </div>
+          </div>
+
+          {/* Parameters Table */}
+          <div>
+            <div className="font-medium text-gray-900 mb-3">搜索参数设置</div>
+            <div className="bg-gray-50 rounded-lg p-3">
+              <div className="grid grid-cols-5 gap-2 text-xs font-medium text-gray-600 mb-2">
+                <div>查询方式</div>
+                <div>可用上限</div>
+                <div>查询参数</div>
+                <div>检索数量</div>
+                <div>问题优化</div>
+              </div>
+              <div className="grid grid-cols-5 gap-2 text-xs text-gray-700">
+                <div>含义文档</div>
+                <div>5000</div>
+                <div>0.4</div>
+                <div className="text-red-500">✕</div>
+                <div>Qwen-max</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Output Section */}
+          <div>
+            <div className="font-medium text-gray-900 mb-2 flex items-center gap-2">
+              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+              输出
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-gray-600">知识库内容</span>
+              <span className="text-gray-500">知识库搜索</span>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default CustomNode;