在供应链系统中，从采购下单、仓储入库、分拣打包到物流配送，每个环节都紧密相连，形成一个动态的工作流程。传统基于表单或文本描述的业务流程管理方式，不仅直观性差，而且在流程调整、异常处理与协作沟通上效率低下。一个

可视化、可交互、可拖拽的工作流设计器

，能够让业务人员像搭积木一样自由设计与调整供应链节点与路径，极大提升流程管理的灵活性与透明度。

——一个专为构建基于节点的交互式图表、编辑器和工作流而生的React库，打造一个功能完备、贴合电商供应链业务场景的可拖拽工作流设计器。

一、认识React Flow：为何是构建工作流设计器的利器？ 

React Flow是一个轻量级、高性能的React库，其核心设计理念就是让开发者能够轻松创建基于节点(Node)和边(Edge)的可视化应用。相较于从零开发或使用通用的SVG绘图库，React Flow提供了开箱即用的解决方案：

在供应链场景中，一个“采购审批”节点、一条“质检通过”的连接线，都能在React Flow中找到直观的映射，这使其成为构建可视化工作流设计器的理想基石。

首先，创建一个新的React应用并安装React Flow及其依赖。

npx create-react-app supply-chain-workflow-designer
cd supply-chain-workflow-designer
npm install reactflow

在编码之前，我们需要理解React Flow的核心数据结构和如何将其映射到供应链业务。

我们的应用状态将主要管理一个包含

三、从零实现供应链工作流设计器 

我们首先创建一个最基础的可视化画布，并添加上下文钩子与工具面板。

import React, { useState, useCallback } from 'react';
import ReactFlow, {
  Background,
  Controls,
  MiniMap,
  addEdge,
  applyNodeChanges,
  applyEdgeChanges,
} from 'reactflow';
import 'reactflow/dist/style.css'; // 引入默认样式

import SupplierNode from './components/nodes/SupplierNode';
import WarehouseNode from './components/nodes/WarehouseNode';
import InspectionNode from './components/nodes/InspectionNode';

// 1. 定义自定义节点类型映射
const nodeTypes = {
  supplierNode: SupplierNode,
  warehouseNode: WarehouseNode,
  inspectionNode: InspectionNode,
};

const initialNodes = [
  {
    id: '1',
    type: 'supplierNode',
    position: { x: 100, y: 100 },
    data: { label: '供应商接单', product: '商品A', quantity: 1000 },
  },
  {
    id: '2',
    type: 'warehouseNode',
    position: { x: 400, y: 100 },
    data: { label: '仓库收货', status: 'pending' },
  },
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: '发货' }];

function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  // 2. 处理节点变化（拖拽位置）
  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    []
  );
  // 3. 处理边的变化
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    []
  );
  // 4. 处理连接线创建
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    []
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
        fitView // 初始适应视图
      >
        {/* 工具组件 */}
        <Background variant="dots" gap={12} size={1} />
        <Controls /> {/* 缩放、全屏等控制按钮 */}
        <MiniMap /> {/* 缩略导航图 */}
      </ReactFlow>
    </div>
  );
}

export default Flow;

3.2 实现自定义供应链节点组件 

供应链各环节的UI和交互各不相同，我们需要为每种节点类型创建定制组件。

import React from 'react';
import { Handle, Position } from 'reactflow';

const InspectionNode = ({ data, selected }) => {
  // 根据业务状态决定样式
  const statusColor = {
    pending: 'bg-yellow-100 border-yellow-400',
    passed: 'bg-green-100 border-green-500',
    failed: 'bg-red-100 border-red-500',
  }[data.status || 'pending'];

  return (
    <div
      className={`px-4 py-2 shadow-lg rounded-lg border-2 ${statusColor} ${
        selected ? 'ring-2 ring-blue-400' : ''
      }`}
      style={{ minWidth: '180px' }}
    >
      {/* 顶部输入连接点 (允许从上游节点连接进来) */}
      <Handle type="target" position={Position.Top} />
      
      <div className="flex flex-col">
        <div className="font-bold text-center">{data.label}</div>
        <div className="text-sm mt-1">质检员: {data.inspector || '未指派'}</div>
        <div className="text-xs mt-2 text-gray-600">
          状态: <span className="font-medium">{data.status || 'pending'}</span>
        </div>
        {/* 这里可以添加更多的业务信息或操作按钮 */}
        {data.sampleId && (
          <div className="text-xs mt-1">样品ID: {data.sampleId}</div>
        )}
      </div>

      {/* 底部输出连接点 (允许连接到下游节点) */}
      <Handle type="source" position={Position.Bottom} id="a" />
      {/* 可以定义多个输出句柄，对应不同结果 */}
      <Handle
        type="source"
        position={Position.Right}
        id="b"
        style={{ top: '70%' }}
      />
    </div>
  );
};

export default InspectionNode;

设计器的核心功能之一是从工具栏拖拽新节点到画布。

import React from 'react';

const nodeTypes = [
  { type: 'supplierNode', label: '供应商', className: 'bg-blue-200' },
  { type: 'warehouseNode', label: '仓库', className: 'bg-green-200' },
  { type: 'inspectionNode', label: '质检', className: 'bg-yellow-200' },
  { type: 'logisticsNode', label: '物流', className: 'bg-purple-200' },
];

const Sidebar = () => {
  // 开始拖拽时，将节点类型信息存入dataTransfer
  const onDragStart = (event, nodeType) => {
    event.dataTransfer.setData('application/reactflow', nodeType);
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <aside className="w-60 border-r p-4 bg-gray-50">
      <h2 className="text-lg font-bold mb-4">供应链节点库</h2>
      <p className="text-sm text-gray-500 mb-4">拖拽到画布添加节点</p>
      <div className="space-y-3">
        {nodeTypes.map((node) => (
          <div
            key={node.type}
            className={`p-3 border rounded-lg cursor-grab active:cursor-grabbing ${node.className}`}
            onDragStart={(e) => onDragStart(e, node.type)}
            draggable
          >
            {node.label}
          </div>
        ))}
      </div>
    </aside>
  );
};

export default Sidebar;

// 在App.js中，为画布添加onDrop和onDragOver事件
import Sidebar from './components/Sidebar';

function Flow() {
  // ... 之前的states和callbacks ...

  const reactFlowInstance = useReactFlow();

  const onDrop = useCallback(
    (event) => {
      event.preventDefault();
      const type = event.dataTransfer.getData('application/reactflow');

      // 确保拖拽的是有效节点类型
      if (typeof type === 'undefined' || !type) {
        return;
      }

      // 计算鼠标在画布上的位置
      const position = reactFlowInstance.screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });

      // 生成唯一ID和新节点对象
      const newNodeId = `${type}_${Date.now()}`;
      const newNode = {
        id: newNodeId,
        type,
        position,
        data: { label: `${type.replace('Node', '')}节点` },
      };

      // 更新节点状态
      setNodes((nds) => nds.concat(newNode));
    },
    [reactFlowInstance]
  );

  const onDragOver = useCallback((event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);

  return (
    <div className="flex" style={{ width: '100vw', height: '100vh' }}>
      <Sidebar />
      <div className="flex-grow">
        <ReactFlow
          // ... 其他props ...
          onDrop={onDrop}
          onDragOver={onDragOver}
        >
          {/* ... */}
        </ReactFlow>
      </div>
    </div>
  );
}

3.4 实现边（连线）的交互与配置 

连线是工作流的逻辑体现。我们可以为边添加标签、交互和样式。

// 在App.js中，可以定义边的类型和样式
const edgeTypes = {
  // 可以定义自定义边类型
};

const Flow = () => {
  // ...

  return (
    <ReactFlow
      // ...
      edges={edges}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      // 配置边的默认样式和类型
      defaultEdgeOptions={{
        type: 'smoothstep', // 使用平滑的步进线，更美观
        animated: false,
        style: { stroke: '#555', strokeWidth: 2 },
      }}
      // 连接线的验证规则（可选）
      isValidConnection={(connection) => {
        // 例如：禁止从“质检失败”连接到“发货”
        // 可以根据connection.sourceNode, connection.targetNode做业务判断
        return true; // 默认允许所有连接
      }}
    >
      {/* ... */}
    </ReactFlow>
  );
};

一个生产级的设计器还需要更多功能。

数组序列化保存到后端。加载时，再将其反序列化并设置为React Flow的状态。

// 保存流程
const handleSave = async () => {
  const flow = reactFlowInstance.toObject(); // 获取包含nodes, edges, viewport的完整对象
  await axios.post('/api/workflow/save', { flowData: flow });
};

// 加载流程
const handleLoad = async (workflowId) => {
  const { data } = await axios.get(`/api/workflow/load/${workflowId}`);
  const { nodes: loadedNodes, edges: loadedEdges, viewport } = data.flowData;
  setNodes(loadedNodes);
  setEdges(loadedEdges);
  // 恢复视图状态
  reactFlowInstance.setViewport(viewport);
};

可以为节点添加双击事件或上下文菜单，弹出一个表单来编辑节点的

// 在自定义节点组件内
const onNodeDoubleClick = () => {
  // 触发一个全局状态或事件，打开编辑侧边栏/弹窗，并将当前节点ID和data传入
  openEditPanel(nodeId, nodeData);
};
// 编辑完成后，更新对应节点的data
const updateNodeData = (nodeId, newData) => {
  setNodes((nds) =>
    nds.map((node) => {
      if (node.id === nodeId) {
        return { ...node, data: { ...node.data, ...newData } };
      }
      return node;
    })
  );
};

对于复杂的工作流，建议使用状态管理库（如Zustand、Redux）来集中管理

功能。React Flow本身不提供历史记录，但可以结合

等钩子或状态管理库的中间件来实现。

当节点数量非常多时（数百上千），可以考虑：

通过本文的逐步拆解，我们实现了一个功能完整的、基于

将工作流可视化，不仅是技术的实现，更是对业务逻辑的深度梳理与呈现。利用React Flow，前端开发者能够高效地搭建出强大、美观且用户体验极佳的业务流程设计工具，为电商供应链系统的敏捷管理与持续优化提供坚实的技术支撑。

在供应链系统中，从采购下单、仓储入库、分拣打包到物流配送，每个环节都紧密相连，形成一个动态的工作流程。传统基于表单或文本描述的业务流程管理方式，不仅直观性差，而且在流程调整、异常处理与协作沟通上效率低下。一个可视化、可交互、可拖拽的工作流设计器，能够让业务人员像搭积木一样自由设计与调整供应链节点与路径，极大提升流程管理的灵活性与透明度。

供应链可视化开发实战 | React Flow实现可拖拽供应链工作流设计器

前端开发

前端

架构设计

开发工具

本文介绍如何利用ReactFlow构建电商供应链可视化工作流设计器，实现采购、仓储、质检等环节的节点拖拽与流程编排。涵盖核心概念、自定义节点开发、连线交互、数据持久化等关键技术点，帮助开发者快速搭建高效灵活的业务流程管理系统。

数据集成

数据结构

中间件

虚拟化

容器

HTML5

2026采购季 | AI焕新·智启新局

message-queue-catalog

datainlong

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

供应链可视化开发实战 | React Flow实现可拖拽供应链工作流设计器

供应链可视化开发实战 | React Flow实现可拖拽供应链工作流设计器

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐