react-flow-node-ts

捆绑的上游支持文件

支持文件位于相对于此技能的路径中。其固定来源、许可证、哈希值和导入变更，请参阅 UPSTREAM-NOTICE.md。

React Flow 节点

按照既定模式创建 React Flow 节点组件，并使用正确的 TypeScript 类型和 store 集成。

快速开始

从 assets/ 复制模板并替换占位符：

• {{NodeName}} → PascalCase 格式的组件名称（例如，VideoNode）
• {{nodeType}} → kebab-case 格式的类型标识符（例如，video-node）
• {{NodeData}} → 数据接口名称（例如，VideoNodeData）

模板

• assets/template.tsx - 节点组件
• assets/types.template.ts - TypeScript 定义

节点组件模式

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'>;

模板集成检查

这些模板依赖项目专用的 @/types、@/store、工具别名和 CSS 变量；此捆绑包不提供应用程序/store。替换占位符，根据已安装的 @xyflow/react 验证 NodeProps，并确认 updateNode 会合并节点数据，而不是丢弃其他同级字段。根据需要为可编辑输入提供无障碍标签以及 nodrag/nowheel 行为，并测试键盘编辑、调整大小和连接状态。编辑模式下 UI 的可见性不能作为服务端授权边界。

集成步骤

1. 将类型添加到 src/frontend/src/types/index.ts
2. 在 src/frontend/src/components/nodes/ 中创建组件
3. 从 src/frontend/src/components/nodes/index.ts 导出
4. 在 src/frontend/src/store/app-store.ts 中添加默认值
5. 在画布的 nodeTypes 中注册
6. 添加到 AddBlockMenu 和 ConnectMenu

适用场景

当任务与上述概述中所述的工作流或操作相符时，可使用此技能。

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为环境专属验证、测试或专家审核的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请暂停并请求澄清。