节点状态指示器

🌐 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" 变体是默认选项，当节点处于加载状态时，会显示节点周围旋转的边框。
• "overlay" 变体显示完整覆盖，当节点处于加载状态时，会显示带动画的旋转器。

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>
  );
}