PCB 測試點自動比對工具

🚀 開啟工具 →

專案架構

本專案採用現代化的 Web 前端技術棧開發，並完全在瀏覽器端（Client-side）運行，確保機密 CAD 資料不外流。

核心框架： Next.js (App Router) + React
視覺與 UI： Tailwind CSS（全面採用深色模式 Dark Mode，並以科技藍 Tech Blue 作為狀態高亮主色，降低工程師視覺疲勞）。
資料解析層：
- HTML 解析： 使用瀏覽器原生 DOMParser，精準萃取 OrCAD 報表中的 <table> 數據。
- DXF 解析： 導入輕量級開源庫（如 dxf-parser）提取板框幾何資料。
視覺化渲染層： 使用 HTML5 Canvas 或 SVG，負責繪製 2D 點位分佈圖、板框底圖、以及位移向量（虛線）。

系統工作流程

輸入： 接收舊版 HTML、新版 HTML、以及可選的白名單 (Target List) 與 DXF 板框檔。
清洗： 透過白名單機制，剔除不需要檢測的無關測試點。
比對： 以 RefDes 為 Unique Key，計算 ΔX 與 ΔY，判定狀態（Unchanged, Moved, Added, Removed）。
對齊： 將 DXF 的座標套用使用者自訂的「縮放倍率」與「偏移量」，與測試點座標系疊合。
輸出： 呈現 2D 視覺化圖表與可篩選的明細資料表。

開發過程遇到的挑戰與解決方案

在使用 AI (Claude Code) 協助開發的過程中，我們遇到並克服了幾個極具代表性的「軟硬體資料交接」問題：

1. 報表解析失敗（資料結構不符預期）

問題點： 最初設定時，AI 寫的解析邏輯抓不到任何資料（顯示 0 筆）。因為 OrCAD 匯出的 HTML 結構帶有特定的老舊標籤與未知的欄位名稱，與 AI 預設猜測的標準表格不同。

解法： 採取「餵實例」策略。直接打開 OrCAD 的 HTML 原始碼，複製一小段真實的 <table> 結構貼給 Claude Code，讓 AI 針對真實的 DOM 結構重新撰寫特製的萃取函式，成功精準抓出 RefDes, X, Y。

2. 全板資料過載（缺乏焦點）

問題點： 當 PCB 複雜時，成百上千的測試點全上畫布，會讓畫面佈滿雜訊，工程師難以聚焦在這次改版的局部區域。

解法： 導入「Target List 白名單」功能。在核心比對邏輯執行前，先做一層 Data Culling（資料剔除），讓程式只處理並渲染工程師貼上的目標測試點，大幅提升判讀效率。

3. 缺乏實體空間感（點位懸浮）

問題點： 單純比對 X/Y 座標，畫面上只是一群懸浮的點，無法判斷點位是否太靠近板邊或螺絲孔，缺乏物理防呆機制。

解法： 決定擴展架構，加入讀取「DXF 板框」作為底圖的功能，讓測試點能映射回真實的 PCB 輪廓中。

4. 座標系崩壞：單位縮放與原點偏移 (mil vs. mm)

問題點： 匯入 DXF 後，板框縮成一個極小的點。這是硬體 CAD 最經典的坑：HTML 測試點座標是 mil（數值動輒幾千），而 DXF 解析出來被當成 mm（數值只有幾百），導致兩者相差了近 40 倍的 Scale，且原點可能不同。

解法： 在前端 UI 加入「動態對齊控制面板」。不要求工程師回 OrCAD 重新出圖，而是直接在網頁端加入「縮放倍率 (預設 39.37)」、「X 偏移」、「Y 偏移」的滑塊/輸入框。透過數學公式 $Target = (Original \times Scale) + Offset$ 即時重繪畫布，完美解決疊圖不匹配的問題。

5. 開發環境與日常使用的摩擦力

問題點： 現代前端框架 (Next.js) 需要透過終端機執行 localhost 伺服器，這對於習慣「雙擊軟體直接開啟」的硬體工程師來說，每次啟動都非常繁瑣。

解法： 撰寫了專屬的 .bat 批次檔，實現一鍵在背景啟動環境並自動開啟瀏覽器。同時也確立了未來將專案部署上雲端（Vercel）的最佳實踐方向，實現真正的隨插即用。

這個專案不僅解決了實務問題，更證明了利用 AI 工具（如 Dify、Claude Code 等）能極大地縮短硬體工程師跨足軟體開發的學習曲線。這是一個非常精彩的起點！