基本节点

¥Base Node

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

¥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 主容器

  ¥The BaseNode main container,

• BaseNodeHeader 容器，你通常会在其中添加操作和 BaseNodeHeaderTitle

  ¥The BaseNodeHeader container where you would usually add actions and a BaseNodeHeaderTitle

• 你可能希望在其中添加节点主要内容的 BaseNodeContent 容器。

  ¥The BaseNodeContent container where you would add the main contents of the node.

• 你可能希望在其中添加额外信息或可见操作的 BaseNodeFooter 容器。

  ¥The BaseNodeFooter container where you may want to add extra information, or visible actions.

如果你需要微调拖动和滚动等交互与自定义组件的配合方式，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',
      })}
    >
      {/* Your custom node definiton goes here */}
    </BaseNode>
  );
});