fix:update layout

Author: Onelevenvy

web/src/components/WorkFlow/nodes/Plugin/PluginNode.tsx

@@ -6,25 +6,28 @@ import { useSkillsQuery } from "@/hooks/useSkillsQuery"; // 新增导入
 import ToolsIcon from "@/components/Icons/Tools";
 import { Box } from "@chakra-ui/react";
 
-const { colorScheme } = nodeConfig.plugin;
-
 const PluginNode: React.FC<NodeProps> = (props) => {
   const { data: skills } = useSkillsQuery(); // 获取工具信息
   // 获取工具名称
-//   const toolName = skills?.data.find(skill => skill.name === props.data.toolName)?.display_name || props.data.toolName;
-  const { icon: Icon, colorScheme } = nodeConfig.plugin;
+  const toolName =
+    skills?.data.find((skill) => skill.name === props.data.toolName)
+      ?.display_name || props.data.toolName;
+  const { colorScheme } = nodeConfig.plugin;
+
   return (
-    <BaseNode {...props} icon={<Icon />} colorScheme={colorScheme}>
-      <Handle type="target" position={Position.Left} id="left" />
-      <Handle type="target" position={Position.Right} id="right" />
-      <Handle type="source" position={Position.Left} id="left" />
-      <Handle type="source" position={Position.Right} id="right" />
-      <Box style={{ padding: '10px', border: '1px solid #ddd', borderRadius: '4px', backgroundColor: '#fff' }}>
-        {/* <ToolsIcon tools_name={toolName.replace(/ /g, "_")} />  */}
-        {/* <Box>{toolName}</Box>  */}
-      </Box>
+    <BaseNode
+      {...props}
+      icon={<ToolsIcon tools_name={toolName.replace(/ /g, "_")} w={6} h={6} />}
+      colorScheme={colorScheme}
+    >
+      <>
+        <Handle type="target" position={Position.Left} id="left" />
+        <Handle type="target" position={Position.Right} id="right" />
+        <Handle type="source" position={Position.Left} id="left" />
+        <Handle type="source" position={Position.Right} id="right" />
+      </>
     </BaseNode>
   );
 };
 
-export default React.memo(PluginNode);
+export default React.memo(PluginNode);

web/src/components/WorkFlow/nodes/Plugin/PluginNodeProperties.tsx

@@ -15,7 +15,9 @@ const PluginNodeProperties: React.FC<PluginNodePropertiesProps> = ({
 }) => {
   const { data: skills } = useSkillsQuery(); // 获取工具信息
   // 根据 node.data.toolName 匹配工具
-  const tool = skills?.data.find(skill => skill.display_name === node.data.toolName); // 获取当前工具
+  const tool = skills?.data.find(
+    (skill) => skill.display_name === node.data.toolName
+  ); // 获取当前工具
   const [loading, setLoading] = useState(false); // 加载状态
 
   const handleInvoke = async () => {
@@ -36,29 +38,29 @@ const PluginNodeProperties: React.FC<PluginNodePropertiesProps> = ({
   return (
     <VStack align="stretch" spacing={4}>
       <Box>
-        <Text fontWeight="bold">Tool Name:</Text>
-        <Text>{tool?.display_name || node.data.toolName}</Text> {/* 显示工具名称 */}
+        <Text fontWeight="bold">Input param:</Text>
       </Box>
-      {tool?.input_parameters && Object.entries(tool.input_parameters).map(([key, value]) => (
-        <Box key={key}>
-          <Text fontWeight="bold">{key}:</Text>
-          <Input
-            value={node.data.args[key] || ""}
-            onChange={(e) =>
-              onNodeDataChange(node.id, "args", {
-                ...node.data.args,
-                [key]: e.target.value,
-              })
-            }
-            placeholder={`Enter ${key}`}
-          />
-        </Box>
-      ))}
+      {tool?.input_parameters &&
+        Object.entries(tool.input_parameters).map(([key, value]) => (
+          <Box key={key}>
+            <Text fontWeight="bold">{key}:</Text>
+            <Input
+              value={node.data.args[key] || ""}
+              onChange={(e) =>
+                onNodeDataChange(node.id, "args", {
+                  ...node.data.args,
+                  [key]: e.target.value,
+                })
+              }
+              placeholder={`Enter ${key}`}
+            />
+          </Box>
+        ))}
       <Button onClick={handleInvoke} isLoading={loading}>
         Run Tool
       </Button>
     </VStack>
   );
 };
 
-export default PluginNodeProperties;
+export default PluginNodeProperties;

web/src/components/WorkFlow/nodes/nodeConfig.ts

@@ -81,7 +81,7 @@ export const nodeConfig: Record<string, NodeConfigItem> = {
   plugin: {
     display: "Plugin",
     icon: TfiGithub, // 你需要定义一个图标
-    colorScheme: "blue",
+    colorScheme: "gray",
     properties: PluginNodeProperties, // 如果有特定的属性面板
     initialData: {
       toolName: "", // 工具名称