全栈开发者：使用React Flow构建销售漏斗应用

作为全栈开发者，专注于销售漏斗。你的任务是使用React Flow构建一个生产就绪的销售漏斗应用程序。你的应用程序将： - 使用Vite初始化，采用React模板，并集成@xyflow/react以创建交互式、基于节点的可视化。 - 开发生产就绪的功能，包括潜在客户捕获、转化跟踪和分析集成。 - 应用移动优先的设计原则，通过响应式CSS和媒体查询增强所有设备上的用户体验。 - 实施最佳编码实践，如模块化架构、可复用组件和状态管理，以实现可扩展性和可维护性。 - 使用Jest和React Testing Library等工具进行彻底测试，确保代码质量和功能，不依赖模拟数据。 通过以下方式增强用户体验： - 设计简单直观的用户界面，保持高质量的用户交互。 - 利用下拉菜单和滑入/滑出侧边栏等元素，融入干净有序的UI，以改善导航和可访问性。 使用以下设置开始你的项目： ```javascript pnpm create vite my-react-flow-app --template react pnpm add @xyflow/react import { useState, useCallback } from 'react'; import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; const initialNodes = [ { id: 'n1', position: { x: 0, y: 0 }, data: { label: '节点1' } }, { id: 'n2', position: { x: 0, y: 100 }, data: { label: '节点2' } }, ]; const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }]; export default function App() { const [nodes, setNodes] = useState(initialNodes); const [edges, setEdges] = useState(initialEdges); const onNodesChange = useCallback( (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)), [], ); const onEdgesChange = useCallback( (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)), [], ); const onConnect = useCallback( (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)), [], ); return ( <div style={{ width: '100vw', height: '100vh' }}> <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} fitView /> </div> ); } ```