我们对 React Flow UI（前称 React Flow 组件）进行了一些重大改进。这些变化增强了组件的功能、视觉外观和可用性，以改善整体开发者体验。

🌐 We have made some significant improvements to React Flow UI (formerly known as React Flow components). These changes enhance the functionality, visual look and usability of the components, to improive the general developer experience.

重新组织组件

🌐 Re-organize components

一些组件已被移到示例中，而其他组件已在新结构中合并：

🌐 Some components have been moved to examples, while others have been consolidated in a new structure:

• 节点工具：这些组件可以用作创建自定义节点的构建模块。
• 自定义节点：这些都是功能齐全的节点，可以直接在你的应用中使用。
• 句柄：这些组件用于在节点内部创建连接点。
• 自定义边缘：可直接使用的全功能边缘。
• 控件：交互式控件的集合。
• 杂项：各种不属于其他类别的实用组件，如DevTools。

在 React Flow UI 页面 中找到它们全部。

🌐 Find all of them in the React Flow UI page.

BaseNode 增强功能

🌐 BaseNode enhancements

我们的 BaseNode 组件已经完全重新设计，以提供与 shadcn UI  以及我们其余的 React Flow UI 组件库 更加一致的体验。

🌐 Our BaseNode component has been fully revamped, to provide a more consistent experience with shadcn UI , and the rest of our React Flow UI component library.

新的 BaseNode 组件现在包括改进的样式和封装组件，符合 shadcn UI 设计原则。

🌐 The new BaseNode component now includes improved styling and wrapper components, aligning to shadcn UI design principles.

就像一个 shadcn UI 卡片组件 ，BaseNode 组件现在也导出

🌐 Just like a shadcn UI Card component , the BaseNode component now exports

• BaseNodeHeader 和 BaseNodeHeaderTitle 用于标题部分，
• BaseNodeContent 用于主要内容区域，并且
• BaseNodeFooter 用于页脚部分。

这个结构允许在节点内更好地组织内容，从而更容易创建复杂的节点布局。

🌐 This structure allows for better organization of content within the node, making it easier to create complex node layouts.

改进的示例和节点

🌐 Improved examples and nodes

我们还添加了一些新组件并改进了现有组件。我们的组件页面现在包括更全面的示例，展示组件的新功能和能力。例如：

🌐 We have also added a few new components and improved existing ones. Our component pages now include more comprehensive examples that showcase the new features and capabilities of the components. For example:

• 新的NodeAppendix组件，可用于向节点添加额外的信息或控件，就像Node Badge一样！
• AnnotationNode 组件已被移至 BaseNode 的示例用法，以演示如何为 BaseNode 进行样式设置。
• StatusIndicator 现在包括一个带有覆盖旋转器的变体，以及改进的使用示例。
• TooltipNode 组件已经得到改进，并已迁移到 NodeTooltip。它不再是自定义节点，而是一个实用组件，你可以使用它来给自定义节点添加工具提示。

不再有 selected 属性

🌐 No more selected prop

你不再需要将 selected 属性传递给 BaseNode 或其相关组件。选中状态的样式现在由 Tailwind CSS 选择器自动处理。

🌐 You don’t need to pass the selected prop to the BaseNode or its related components anymore. Styling the selected state is now handled automatically by tailwind CSS selectors.

然而，selected 仍然是 React Flow 中节点的有效属性，你仍然可以在自定义组件中使用它来判断节点是否被选中。如果你不需要 selected 属性来进行自定义逻辑，而只是用于样式，你可以安全地从组件中移除它，并且可以参考 BaseNode 的实现方式来为自定义选中节点实现自定义样式。

🌐 However, selected is still a valid prop for nodes in React Flow, and you can still use it to determine if a node is selected or not in your custom components. If you do not need the selected prop for custom logic, but you only use it for styling, you can safely remove it from your components, and you can follow how BaseNode is implemented to achieve custom styling for your custom selected nodes.

export const BaseNode = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'relative rounded-md border bg-card text-card-foreground',
        'hover:ring-1',
        // React Flow displays node elements inside of a `NodeWrapper` component,
        // which compiles down to a div with the class `react-flow__node`.
        // When a node is selected, the class `selected` is added to the
        // `react-flow__node` element. This allows us to style the node when it
        // is selected, using Tailwind's `&` selector.
        '[.react-flow\\_\\_node.selected_&]:border-muted-foreground',
        '[.react-flow\\_\\_node.selected_&]:shadow-lg',
        className,
      )}
      tabIndex={0}
      {...props}
    />
  ),
);
BaseNode.displayName = 'BaseNode';

反馈

🌐 Feedback

我们希望这些改进能让你使用 React Flow UI 的体验更加出色。如果你有任何反馈或建议，请通过 邮件 或 Discord  告诉我们！

🌐 We hope these improvements make your experience with React Flow UI even better. If you have any feedback or suggestions, please let us know via mail or Discord !