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: 'Node 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 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}