管道工厂

创建一个数据管道可视化编辑器。用工厂流水线的视觉隐喻——数据源是"原料仓库"，每个转换步骤（过滤、聚合、JOIN、排序）是流水线上的"加工机器"，最终输出是"成品仓库"。用户可以从侧边栏拖拽不同的加工机器到流水线上，用管道连接它们，点击机器可以配置参数（如过滤条件、聚合字段）。数据流过管道时有小圆点粒子沿管道流动的动画。风格要有工业设计的机械美感。请输出完整的单文件 HTML。

创建一个数据 ETL 管道的可视化编辑器，用**工厂流水线**的视觉隐喻来呈现数据的采集、转换与输出流程。 页面布局： - 左侧是一个**工具侧边栏**，陈列可用的"加工机器"组件——至少包括：过滤器、聚合器、JOIN 连接器、排序器，每种机器有独特的图标或缩略图 - 右侧是主画布，默认已放置一个"原料仓库"（数据源）节点和一个"成品仓库"（最终输出）节点 交互设计： - 用户可以从侧边栏**拖拽**加工机器到画布上，放置后成为流水线上的一个节点 - 节点有输入和输出端口，用户从一个节点的输出端口**拖线**连接到另一个节点的输入端口，形成管道 - 画布上的节点可以自由拖动调整位置，连线跟随节点移动实时更新 - 点击某台机器弹出**参数配置面板**——过滤器可设置字段名、运算符和阈值；聚合器可选择聚合函数（SUM/COUNT/AVG）和分组字段；JOIN 连接器可选择连接类型和匹配键；排序器可选择排序字段和升降序 - 支持删除节点和连线 数据流动画： - 当管道连通（从原料仓库到成品仓库形成完整路径）时，管道上有**小圆点粒子**沿连线方向持续流动，表示数据正在流过 - 粒子的密度或速度可以随管道的"繁忙程度"变化（比如经过聚合节点后粒子变少、变慢） 视觉风格（最核心）： - 整体要有**工业设计的机械美感**——冷灰钢板质感的背景、铜橙色的管道、带铆钉和仪表盘装饰的机器节点 - "原料仓库"要像一座真正的工厂仓库（货架、箱子的意象），"成品仓库"要有包装完毕、整齐码放的感觉，而不是和中间的加工机器长一样 - 每种加工机器要有视觉辨识度——不同的形状、颜色标识或图标，一眼就能分辨过滤器和聚合器 - 连接管道要有粗细和圆角，像真正的工业管道，而不是普通的直线段 请直接输出一个完整可运行的单文件 HTML。允许通过 CDN 引入开源库。整体需适配桌面浏览器全屏显示。