SuperAPI AI 工具集

react-flow-node-ts

前端与建站

查看项目

更新于 10-15 23:25

技能介绍

用途:按既定模式创建 React Flow 节点组件,配好 TypeScript 类型并完成状态仓库集成。

主要能力:提供模板与占位符替换,assets/template.tsx 为节点组件模板,assets/types.template.ts 为 TypeScript 定义模板。占位符包括:{{NodeName}} 替换为 PascalCase 组件名(如 VideoNode),{{nodeType}} 替换为短横线小写类型标识(如 video-node),{{NodeData}} 替换为数据接口名(如 VideoNodeData)。组件模式使用 memo 包裹,从 useAppStore 取 updateNode 与 canvasMode,配合 NodeResizer、Handle 使用。类型模式为数据接口继承 Record<string, unknown>,并用 Node<MyNodeData, 'my-node'> 定义节点类型。

使用方式:先从 assets/ 复制模板并替换占位符;集成步骤为把类型加入 src/frontend/src/types/index.ts,在 src/frontend/src/components/nodes/ 创建组件,从该目录 index.ts 导出,在 src/frontend/src/store/app-store.ts 添加默认值,在画布的 nodeTypes 注册,并加入 AddBlockMenu 与 ConnectMenu。

适用场景:需要新增符合项目既有规范的 React Flow 节点时。

限制:仅在任务与上述范围明确匹配时使用;输出不能替代针对具体环境的验证、测试或专家评审;若缺少必要输入、权限、安全边界或成功标准,应停止并请求澄清。