diff --git a/web/src/components/WorkFlow/nodes/Plugin/PluginNode.tsx b/web/src/components/WorkFlow/nodes/Plugin/PluginNode.tsx index 9251d49e..2d587e1f 100644 --- a/web/src/components/WorkFlow/nodes/Plugin/PluginNode.tsx +++ b/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 = (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 ( - } colorScheme={colorScheme}> - - - - - - {/* */} - {/* {toolName} */} - + } + colorScheme={colorScheme} + > + <> + + + + + ); }; -export default React.memo(PluginNode); \ No newline at end of file +export default React.memo(PluginNode); diff --git a/web/src/components/WorkFlow/nodes/Plugin/PluginNodeProperties.tsx b/web/src/components/WorkFlow/nodes/Plugin/PluginNodeProperties.tsx index 2023992c..4cb99ca6 100644 --- a/web/src/components/WorkFlow/nodes/Plugin/PluginNodeProperties.tsx +++ b/web/src/components/WorkFlow/nodes/Plugin/PluginNodeProperties.tsx @@ -15,7 +15,9 @@ const PluginNodeProperties: React.FC = ({ }) => { 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,24 +38,24 @@ const PluginNodeProperties: React.FC = ({ return ( - Tool Name: - {tool?.display_name || node.data.toolName} {/* 显示工具名称 */} + Input param: - {tool?.input_parameters && Object.entries(tool.input_parameters).map(([key, value]) => ( - - {key}: - - onNodeDataChange(node.id, "args", { - ...node.data.args, - [key]: e.target.value, - }) - } - placeholder={`Enter ${key}`} - /> - - ))} + {tool?.input_parameters && + Object.entries(tool.input_parameters).map(([key, value]) => ( + + {key}: + + onNodeDataChange(node.id, "args", { + ...node.data.args, + [key]: e.target.value, + }) + } + placeholder={`Enter ${key}`} + /> + + ))} @@ -61,4 +63,4 @@ const PluginNodeProperties: React.FC = ({ ); }; -export default PluginNodeProperties; \ No newline at end of file +export default PluginNodeProperties; diff --git a/web/src/components/WorkFlow/nodes/nodeConfig.ts b/web/src/components/WorkFlow/nodes/nodeConfig.ts index 8061b193..9bbdf4dd 100644 --- a/web/src/components/WorkFlow/nodes/nodeConfig.ts +++ b/web/src/components/WorkFlow/nodes/nodeConfig.ts @@ -81,7 +81,7 @@ export const nodeConfig: Record = { plugin: { display: "Plugin", icon: TfiGithub, // 你需要定义一个图标 - colorScheme: "blue", + colorScheme: "gray", properties: PluginNodeProperties, // 如果有特定的属性面板 initialData: { toolName: "", // 工具名称