古法编程

用 AI 快速构建 React Flow 流程图节点组件

解决 React Flow 开发中重复造轮子的问题：AI 能依据统一模板快速生成节点组件和类型定义，自动处理状态订阅与菜单注册，大幅缩短自定义节点的开发时间。

为什么需要这个技能

在构建 React Flow 可视化编辑器时，添加新类型的节点（如数据库、服务器、逻辑判断）通常需要编写繁琐的组件代码和类型定义。每个节点还需处理 Resize 拖拽、状态更新 (useAppStore) 以及菜单注册。手动编写容易出错且效率低。

AI 技能能根据预设的原子模板，一键生成符合规范的 PascalCase 组件名、kebab-case 类型标识以及完整的 TypeScript 接口。它自动将组件与 Zustand Store 集成，确保节点能正常响应状态变化（如选中、画布模式）。

适用场景

  • 需要为 React Flow 流程快速扩展多种类型的自定义节点时。
  • 想要确保所有新生成节点都具备完整的 TypeScript 类型约束。
  • 需要在生成组件后自动完成 Store 注册和菜单配置时。

核心工作流

  1. 准备组件骨架：将 {{NodeName}}、{{nodeType}} 和 {{NodeData}} 替换为实际内容。

    • {{NodeName}} 变为 PascalCase，如 VideoNode。
    • {{nodeType}} 变为 kebab-case，如 video-node。
    • {{NodeData}} 变为 Data 接口名，如 VideoNodeData。

  2. 生成代码与注册：

    • 在 src/frontend/src/components/nodes/ 目录下创建新组件。
    • 将生成的类型定义添加到 src/frontend/src/types/index.ts。
    • 在 src/frontend/src/store/app-store.ts 中配置默认值。

  3. 注册节点类型：

    • 在 src/frontend/src/components/nodes/index.ts 中导出组件。
    • 在画布配置 nodeTypes 中注册该类型。
    • 确保组件在 AddBlockMenu 和 ConnectMenu 中可见。

代码模板

参考以下模式快速生成代码，确保包含 NodeResizer 和 Handle 组件：

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});
export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

下载和安装

下载 react-flow-node-ts 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。

你可能还需要

暂无推荐