「智慧校園報修系統」v0.9.2 是阿凱老師為校園師生與總務處打造的 即時報修平台 — 沒有 QR Code 掃描入口!真正的核心是「點互動式校園平面圖 + Google Vision OCR 自動標教室 + LINE Flex Message 雙軌通知」三條全鏈路設計。
🎯 核心特色
- 🗺️ 互動式校園平面圖(免登入) — Google Vision API 預先 OCR 抓出 C101 / C310 編號 + 自製「連鎖磁吸」演算法把「一年 1 班」破碎文字聚合 → 自動生成可點擊熱區
- 📸 報修表單支援 iPhone HEIC/HEIF — 瀏覽器自動壓縮到 300 KB,不用先轉格式
- 📲 LINE Flex Message 雙軌通知(核心殺手鐧) — 兩個獨立 LINE Token:10 項資訊類別走資訊組長 / 10 項事務類別走事務組長,緊急 header 自動變紅,附 deep link「查看詳情」按鈕
- 👤 AdminRoleSelector 角色切換後台 — 🖥️ 資訊組長 / 🔧 事務組長 / 📊 全部檢視,各組長只看自己的單互不干擾
- 📊 資料分析儀表板 — MTTR 平均維修時間 + Top 10 熱點教室 + Top 5 報修王 + 類別圓餅圖 + Excel 匯出
- 💾 離線報修(神細節) — 訊號死角報修不會丟,照片存 IndexedDB 暫存,連線後自動補發 LINE 通知
💡 設計理念
React 19 + Vite 7 + 自製 CSS(Aurora 漸層 + Glassmorphism)+ Firebase 全家桶(Auth + Firestore + Storage + Cloud Functions + Hosting)+ Google Cloud Vision API + LINE Messaging API(LINE Notify 2025/3 停止後已遷移)+ recharts + xlsx。雙軌分流不是 UI 設計而是核心業務邏輯,系統用 category 欄位自動分流。firestore.rules 7.7 KB 雙重權限驗證。石門國小三個月實戰:報修平均處理時長從 5.2 天 → 1.4 天(-73%)、老師月跑總務從 3-5 次 → 0 次、分流錯誤率 0%、學期統計從半天 → 30 秒自動匯出。Footer 寫 Made with ❤️ for SMES 確認是石門國小自己人。
🎒 適合情境
- 國小 / 國中 / 高中 / 大專總務處 + 資訊組
- 補習班 / 安親班 / 教會教室 / 社區中心
- 任何「多空間多設備 + 多角色協作維修」場域
部署 cagoooo.github.io/repair/ + Firebase Hosting。配對 #46 禮堂&專科教室&IPAD平板車預約系統 總務數位轉型系列、#82 教室資訊設備盤點 盤點發現故障直接報修。新學校導入建議第一週只貼 5-10 間教室在平面圖上試水溫。MIT 授權,cagoooo/repair 開源。