基本节点

🌐 Base Node

一个带有一些基本样式的节点封装器，用于在应用中的所有节点之间创建共享设计。类似于 shadcn ui 的 card  组件文件导出了：

🌐 A node wrapper with some basic styling used for creating a shared design among all nodes in your application. Similarly to shadcn ui’s card  the components file exports:

• BaseNode 主容器，
• BaseNodeHeader 容器，你通常会在其中添加操作，以及一个 BaseNodeHeaderTitle
• BaseNodeContent 容器是你用来添加节点主要内容的地方。
• BaseNodeFooter 容器，你可能想在其中添加额外信息或可见操作。

如果你需要微调拖动和滚动等交互在自定义组件中的工作方式，React Flow 提供了几个 CSS 工具类

🌐 In case you need to fine-tune how interactions like dragging and scrolling work with your custom components, React Flow provides several CSS utility classes

你应该在节点的交互组件（例如按钮）中使用 nodrag React Flow 工具类，以在用户与按钮或滑块交互时禁用节点在流程中的拖动。

🌐 You should use the nodrag React Flow utility class in interactive components of your node such as buttons, to disable dragging the node inside the flow when the user is interacting with buttons or sliders.

npx shadcn@latest add https://ui.reactflow.dev/base-node

pnpm dlx shadcn@latest add https://ui.reactflow.dev/base-node

yarn dlx shadcn@latest add https://ui.reactflow.dev/base-node

bun x shadcn@latest add https://ui.reactflow.dev/base-node

import { memo } from "react";
 
import { Button } from "@/components/ui/button";
import {
  BaseNode,
  BaseNodeContent,
  BaseNodeFooter,
  BaseNodeHeader,
  BaseNodeHeaderTitle,
} from "@/components/base-node";
import { Rocket } from "lucide-react";
 
export const BaseNodeFullDemo = memo(() => {
  return (
    <BaseNode className="w-96">
      <BaseNodeHeader className="border-b">
        <Rocket className="size-4" />
        <BaseNodeHeaderTitle>Header</BaseNodeHeaderTitle>
      </BaseNodeHeader>
      <BaseNodeContent>
        <h3 className="text-lg font-bold">Content</h3>
        <p className="text-xs">
          This is a full-featured node with a header, content, and footer. You
          can customize it as needed.
        </p>
      </BaseNodeContent>
      <BaseNodeFooter>
        <h4 className="text-md self-start font-bold">Footer</h4>
 
        <Button variant="outline" className="nodrag w-full">
          Action 1
        </Button>
      </BaseNodeFooter>
    </BaseNode>
  );
});
 
BaseNodeFullDemo.displayName = "BaseNodeFullDemo";

import { Background, FitViewOptions, ReactFlow } from "@xyflow/react";
 
import { BaseNodeFullDemo } from "./component-example";
 
const nodeTypes = {
  baseNodeFull: BaseNodeFullDemo,
};
 
const defaultNodes = [
  {
    id: "2",
    position: { x: 200, y: 200 },
    data: {},
    type: "baseNodeFull",
  },
];
 
const fitViewOptions: FitViewOptions = {
  padding: "100px",
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        nodeTypes={nodeTypes}
        fitView
        fitViewOptions={fitViewOptions}
      >
        <Background />
      </ReactFlow>
    </div>
  );
}

主题

🌐 Theming

要自定义自定义节点的视觉外观，你可以简单地使用 Tailwind CSS  类。所有 React Flow 组件都基于 shadcn UI ，你应该按照 shadcn UI 主题指南  来自定义应用中的字体排版和颜色等方面。

🌐 To customize the visual appearance of your custom nodes, you can simply use Tailwind CSS  classes. All of the React Flow components are based on shadcn UI , and you should follow the shadcn UI theming guide  to customize aspects like typography and colors in your application.

然而，在大多数情况下，当开发自定义节点时，你可能只需要添加自定义的 Tailwind CSS 类。所有 BaseNode 组件只是围绕 <div> 的轻量封装。

🌐 In most occasions though, when developing custom nodes, you may simply need to add custom Tailwind CSS classes. All of the BaseNode components are just light wrappers around <div>.

例如，要根据假设的执行状态更改节点的边框颜色，你可以传递额外的 className:

🌐 For example, to change the border color of a node, based on an hypothetical execution status, you can pass extra classNames:

// Assuming your component is receiving a `data` prop
export const BaseNodeSimpleDemo = memo(({ data }: NodeProps) => {
  return (
    <BaseNode
      className={cn('w-[350px] p-0 hover:ring-orange-500', {
        'border-orange-500': data.status === 'loading',
        'border-red-500': data.status === 'error',
      })}
    >
      
    </BaseNode>
  );
});