节点状态指示器

¥Node Status Indicator

具有多个状态的节点封装器，用于指示节点的状态。状态可以是以下之一："success"、"loading"、"error" 和 "initial"。

¥A node wrapper that has multiple states for indicating the status of a node. Status can be one of the following: "success", "loading", "error" and "initial".

此外，NodeStatusIndicator 组件支持不同的加载方式："border" 和 "overlay"，可以使用 loadingVariant 属性进行设置。

¥Additionally, the NodeStatusIndicator component supports different loading variants: "border" and "overlay", which can be set using the loadingVariant prop.

• "border" 变体是默认变体，在节点处于加载状态时，会在节点周围显示旋转边框。

  ¥The "border" variant is the default and shows a spinning border around the node when it is in loading state.

• "overlay" 变体显示完整的叠加层，并在节点处于加载状态时在其上显示动画旋转器。

  ¥The "overlay" variant shows a full overlay, with an animated spinner on the node when it is in loading state.

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

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

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

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

import { BaseNode, BaseNodeContent } from "@/components/base-node";
import { NodeStatusIndicator } from "@/components/node-status-indicator";
 
export const LoadingNode = () => {
  return (
    <NodeStatusIndicator status="loading" variant="border">
      <BaseNode>
        <BaseNodeContent>This node is loading...</BaseNodeContent>
      </BaseNode>
    </NodeStatusIndicator>
  );
};

import { Background, ReactFlow } from "@xyflow/react";
 
import { LoadingNode } from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 120, y: 160 },
    type: "loadingNode",
    data: {},
  },
];
 
const nodeTypes = {
  loadingNode: LoadingNode,
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}