metro designer地铁线路图设计器产品系统Vibe Coding

Metro Designer 面向轨道交通信息可视化、线网方案表达及交通科普场景，旨在降低地铁线路图绘制与演示制作的门槛。传统绘图工具需要手动处理线路连接、站点布局和换乘符号，修改与维护较为繁琐。本项目将线路编辑、真实地图展示和动态演示整合到浏览器中，为轨道交通爱好者、学习者和内容创作者提供便捷的线网设计工具。

项目包含线网编辑、地图展示、样式配置、方案管理、账号认证及辅助创作等模块。用户可创建线路与站点，拖拽调整位置，设置区间途经点和圆角，并通过撤销、重做修订方案。支持纯示意图与高德地图两种模式，提供多种线路及换乘站视觉样式，可调整站名位置与显示密度。支持云端保存、加载和复制方案，以及图片导出和按开通日期逐段展示线路的动态视频导出。此外，提供中英文界面、命令栏操作，以及基于大模型的站名翻译和自然语言辅助编辑。

项目采用前后端分离架构。前端使用 React、TypeScript、Ant Design 和 Konva，实现交互式画布、线路与站点编辑、状态管理及撤销重做；后端使用 JavaScript、Node.js 和 Express，提供账号认证、方案存储、高德静态地图代理及 AI 接口，生产数据使用 PostgreSQL 保存。动态视频通过 Canvas 2D 绘制动画，并使用 MediaRecorder 录制导出。实现重点包括线路与站点关系维护、地理坐标映射、换乘符号几何计算和视频时间轴调度；通过共享几何模块减少画布与导出结果的差异，并配置身份验证、参数校验和接口限流。