feat(qr): QR scanner (stage C item 2) - #75
Merged
Merged
Conversation
補齊 QR 產生器的另一半：相機或圖片掃描，純前端零上傳。 - 解碼引擎選 jsQR（新依賴）而非 handoff 提的 barcode-detector： 原生 BarcodeDetector 在 Safari/Firefox 缺席，wasm ponyfill 逾 1MB； jsQR 純 JS、QR-only 正好符合範圍，且 headless e2e 行為確定。 - src/lib/qrScan.ts：內容分類與解析（TDD 7 tests），是 qrFormats.ts 產生器的反向——WIFI:/vCard 跳脫反解、RFC 摺行展開、往返測試釘住； javascript:/ftp: 等連結一律當純文字，不給可點的 <a>。 - src/tools/QrScanner.tsx：圖片分頁（點選／拖放／Ctrl+V 貼上， 大圖縮到 1024 邊長再解）＋相機分頁（getUserMedia，~150ms 節流 掃描，對到自動停）；網址／WiFi／名片結構化顯示與複製。 - 中英頁面、tools.ts 註冊（實用工具 📷）、OG 卡 70 張（守門測試同步）。 - e2e：qrcode 套件現做 QR 圖上傳，涵蓋網址（rel=noopener 斷言）、 WiFi 解析、無 QR 圖片的明確錯誤（+3）。 測試：typecheck:api ✓ / 537 unit ✓（+7）/ 60 e2e ✓（+3） 純前端，不碰 api/。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
TTigger
added a commit
that referenced
this pull request
Jul 13, 2026
The other half of the QR generator: scan from camera or image, fully client-side with zero upload. - Decoder is jsQR (new dependency) instead of the handoff's barcode-detector suggestion: the native BarcodeDetector API is absent in Safari/Firefox and the wasm ponyfill exceeds 1MB; jsQR is pure JS, QR-only (exactly the scope), and deterministic in headless e2e. - src/lib/qrScan.ts: content classification and parsing (TDD 7 tests), the inverse of the qrFormats.ts generators — WIFI:/vCard unescaping, RFC line unfolding, round-trip tests against the generators; javascript:/ftp: style links are treated as plain text, never rendered as clickable anchors. - src/tools/QrScanner.tsx: image tab (click / drag / Ctrl+V paste, large images downscaled to 1024px before decoding) and camera tab (getUserMedia, ~150ms throttled scan loop, auto-stop on hit); URL / WiFi / vCard results shown as structured fields with copy. - zh/en pages, tools.ts entry (📷), OG cards regenerated (70 total). - e2e: QR PNGs generated on the fly with the qrcode package — URL (rel=noopener asserted), WiFi parsing, clear error on a QR-less image (+3). Tests: typecheck:api / 537 unit (+7) / 60 e2e (+3). Frontend only; api/ untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
TTigger
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
摘要
階段 C 第 2 項：QR 掃描 —— 補齊 QR 產生器的另一半。相機或圖片掃描，解碼完全在瀏覽器本機，零上傳。
設計取捨
BarcodeDetectorAPI 在 Safari / Firefox 不支援，wasm ponyfill（zxing-wasm）逾 1MB；jsQR 純 JS、QR-only 正好符合工具範圍，headless e2e 行為也確定。src/lib/qrScan.ts是qrFormats.ts產生器的反向操作（WIFI:/vCard 跳脫反解、RFC 摺行展開），單元測試直接拿產生器做往返驗證。rel=noopener noreferrer，e2e 釘住）；javascript:等一律當純文字。功能
getUserMedia後鏡頭優先、~150ms 節流掃描、對到自動停、權限被拒有明確訊息驗證
🤖 Generated with Claude Code