接线工坊 WiringLab

在线练习 · GitHub 仓库

个人电工接线练习工具，React + TypeScript + Vite + SVG + React Three Fiber。没有服务器端业务、账号或数据库。

在线使用与部署

打开在线练习地址即可使用，无需安装。进度只保存在访问者自己的浏览器，不上传到 GitHub。

仓库为公开状态。向 main 分支推送更新后，GitHub Actions 会安装依赖、运行测试、构建并自动发布到 GitHub Pages。Pull Request 只测试和构建，不部署。可以在 Actions 页手动运行 Test and deploy WiringLab。

项目使用相对资源地址，支持 GitHub Pages 的仓库子路径。复制到自己的 GitHub 仓库后，将 Settings → Pages → Source 设置为 GitHub Actions 即可部署，并更新本 README 的在线地址。

启动

需要 Node.js 20.19+ 或 22.12+。当前开发机已安装依赖。

npm install
npm run dev

Windows 可双击 启动练习.cmd。固定地址为 http://127.0.0.1:5174/，保持相同地址可继续使用本浏览器保存的进度。若该端口已运行本程序，直接打开地址即可；其他程序占用时请先释放端口。使用 localhost、其他端口或其他浏览器会进入独立的存储空间，可用导入导出迁移。

npm run build
npm run preview
npm test

功能

• 三道题：K31-01 配电箱、K31-02 单相电表照明、K31-03 三相电动机连续运行与点动。
• 二维和三维共享导线及端子数据，两种视图均可接线和操作元件。
• 点击两个端子接线；二维可点击空白处添加走线拐点。自动走线会避让元件。
• 选择线色/截面积，拆线、撤销、重做、缩放、平移、三维旋转与视角复位。
• 原始 PDF 和渲染原理图对照；连接提示、导线定位、示范接线。
• 电气节点连通性检查，允许同一节点的等效接法，报告跨节点错接和缺失连接。
• 功能仿真：接触器自锁、复合按钮点动、停止、热继电器保护、断电失压；双控照明、日光灯及插座；分路带电状态。
• 本地自动保存、JSON 导入导出，三题分别保存。模拟考试隐藏提示和示范。

范围与图纸解释

1. 三维模型为本项目程序生成的教学近似模型，不是照片的精确复刻，也没有使用未经验证授权的厂商 CAD。元件编号清楚、功能正确优先，后续可替换为 GLB 模型。
2. 题目以项目内三份 PDF 为依据；照片参考元件外观，没有擅自推定看不清的考场端子排接线。软件直接练习元件教学端子。
3. K31-01 原图的“照明2”重复标为 QF3，本练习统一为 QF5。N/PE 排内部桥接为固定连接；分路输出无需接外部负载。
4. K31-02 双控开关采用 C/1/2 端子，电子镇流器采用 L/N/T1…T4 教学端子。灯光是功能级模拟，不计算启动瞬态或精确功耗。
5. K31-03 SB1 是带常开/常闭联动的点动按钮，SB2 启动，SB3 停止。按钮释放以先断后合的教学事件处理，防止错误自锁；真实继电器吸合释放时间未建模。控制电源按原图 L1/L2 建模，不将模型当作实物选型依据。
6. 检查只评价电气节点与功能；线色、截面积是练习参数，尚不作判分。螺丝紧固、环形端子、焊接质量、保护动作曲线和真实电流不在模拟范围。模拟考试没有官方评分效力。
7. 本地存储版本号为 1，使用 wiring-v1-<lesson>。清除浏览器网站数据会丢失进度，请用导出功能备份。导入仅接受当前题目、合法端子/颜色/截面积/有限坐标的 JSON。

结构

文件	用途
src/data/lessons.ts	题目、元件、端子、固定连接、目标电气节点
src/engine.ts	连通性检查、接触器和开关状态仿真
src/routing.ts	正交避障走线
src/usePractice.ts	保存、历史记录、通电状态管理
src/components/Board2D.tsx	二维 SVG 接线板
src/components/Board3D.tsx	按需加载的三维接线板
src/components/DeviceFace.tsx	元件二维外观
src/components/AssistantPanel.tsx	提示、检查和通电操作
public/schematics/	原始图纸的只读预览

验证

Vitest 覆盖三题正确/缺失接线、等效连接、错接与短接、母排、非法导入，以及启动自锁、点动释放、停止、过载、双控照明、分路开关。浏览器使用本机 Chrome + Playwright 验证二维/三维接线、保存恢复、功能操作、原理图和移动端布局。

界面概念由内置 Image Gen 生成，采用白色工作区、青绿色操作控件、左侧选题、中央画板、右侧助手布局。三维器件是程序网格；概念中的写实材质为后续可提升项。