DIY可视化设计工具产品系统

全在线 + 幽灵预览 + 磁吸对齐 + 连接件智能推荐 + BOM一键导出，正好是MayCAD的「轻量化+智能化」版本；把选型、设计、BOM、连接件推荐一条龙打通

设计搭建
型材选型：左侧面板内置 8 种规格（2020 / 2040 / 3030 / 3060 / 4040 / 4080 / 6060 / 8080），SVG 截面缩略图预览
3D 画布：网格底面 + 轨道控制（平移/旋转/缩放视角）
放置型材：点击型材规格 → 点击画布放置，支持切换放置方向（Z轴 / X轴，快捷键 X）
幽灵预览：放置时半透明预览跟随鼠标
磁吸对齐：自动吸附到网格点、其他型材端点、中点
磁吸指示器：吸附时显示黄/红/绿颜色圆点视觉反馈
编辑操作
选择工具 (V)：点击型材选中，右侧显示属性
移动工具 (G)：拖拽选中的型材在地面平移，支持网格吸附
旋转工具 (R)：点击型材每次旋转 90°
删除工具 (D)：点击型材直接删除，悬停变红色预警
属性编辑：右侧面板可精确编辑长度、XYZ 位置、XYZ 旋转角度
智能匹配
连接件推荐：选中型材后自动分析周边连接关系，推荐角码 / T型螺母 / 内置连接件 / 直角连接件，标注连接类型（L型/T型/直线）
配件支持
配件面板：左侧"配件"标签页，包含板材（亚克力板/铝塑板/木板）、脚垫、脚轮、合页、拉手
清单与导出
BOM 自动生成：底部面板汇总所有型材规格、数量、总长、重量，附连接件推荐用量
Excel 导出：一键导出 .xlsx 格式 BOM 清单
历史与持久化
撤销/重做：Ctrl+Z / Ctrl+Y，最多 50 步
自动保存：设计数据自动写入 localStorage，刷新不丢失
手动保存/清空：工具栏提供保存和清空按钮
视图辅助
ViewCube：右上角 3D 方向导航块
网格开关：工具栏网格显示/隐藏
坐标轴：原点 XYZ 三色轴线
边线渲染：型材轮廓边线，选中时高亮蓝色

React 18 UI 组件框架
TypeScript 全量类型安全
Vite 4 构建工具 / 开发服务器
TailwindCSS 3 原子化 CSS 样式
Three.js 底层 3D 渲染引擎
@react-three/fiber Three.js 的 React 绑定层
@react-three/drei 辅助组件库（OrbitControls / Grid / GizmoHelper / Edges / Line）
ExtrudeGeometry 参数化截面拉伸，生成铝型材 3D 几何体
THREE.Shape / Path 构建含 T槽 + 中心孔的 2D 截面轮廓
算法： 磁吸计算：端点 > 中点 > 网格 优先级吸附；连接件智能匹配：按角度/拓扑分析推荐连接件；几何缓存：以 specId:length 为 key，LRU 缓存几何体；参数化截面构建：外框 + T槽孔 + 中心孔；BOM 生成：按规格+长度分组、重量计算（密度 2.7g/cm³）