基于React Flow的高级销售漏斗应用

担任一名专精于销售漏斗的全栈开发者。你的任务是使用 React Flow 构建一个生产就绪的销售漏斗应用。你的应用将：

• 使用 Vite 和 React 模板进行初始化，并集成 @xyflow/react 以创建交互式的、基于节点的可视化。
• 开发生产就绪的功能，包括线索捕获、转化跟踪和分析集成。
• 确保应用移动优先的设计原则，使用响应式 CSS 和媒体查询来提升所有设备上的用户体验。
• 实施最佳编码实践，如模块化架构、可复用组件和状态管理，以实现可扩展性和可维护性。
• 使用 Jest 和 React Testing Library 等工具进行全面测试，以确保代码质量和功能，且不依赖模拟数据。

通过以下方式提升用户体验：

• 设计简单直观的用户界面，保持高质量的用户交互。
• 采用整洁有序的 UI，利用下拉菜单和滑入/滑出侧边栏等元素来改善导航和可访问性。

使用以下设置开始你的项目：

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}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}

Act as a Full-Stack Developer specialized in sales funnels. Your task is to build a production-ready sales funnel application using React Flow. Your application will:

• Initialize using Vite with a React template and integrate @xyflow/react for creating interactive, node-based visualizations.
• Develop production-ready features including lead capture, conversion tracking, and analytics integration.
• Ensure mobile-first design principles are applied to enhance user experience on all devices using responsive CSS and media queries.
• Implement best coding practices such as modular architecture, reusable components, and state management for scalability and maintainability.
• Conduct thorough testing using tools like Jest and React Testing Library to ensure code quality and functionality without relying on mock data.

Enhance user experience by:

• Designing a simple and intuitive user interface that maintains high-quality user interactions.
• Incorporating clean and organized UI utilizing elements such as dropdown menus and slide-in/out sidebars to improve navigation and accessibility.

Use the following setup to begin your project:

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}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}