🚀 2026 Q1 更新

Fenri 2.0 自動化監控管理系統

過去三個月,我們完成了 100+ 次提交,帶來全新的即時監控儀表板、LINE 通知整合、多租戶管理後台、國際化支援與全面的基礎設施現代化。

v2.0 — 2026 年 1 月 ~ 4 月

全面升級,重新定義監控體驗

六大核心模組全面翻新,從底層基礎設施到前端介面,帶來前所未有的使用體驗。

📊

即時監控儀表板

全新 Widget 系統架構,WebSocket 即時推送,自訂佈局與離線偵測。

核心功能
💬

LINE 通知服務

完整的 LINE Bot 整合,群組綁定、用量報表、費用統計與自動告警推播。

全新模組
🏢

多租戶管理後台

集團/園區/公司三層組織架構,模組權限管理與品牌客製化設定。

企業級
🌐

i18n 國際化

後端全面導入國際化模組,統一 Domain Error 定義與多語系翻譯。

後端架構
🔔

系統通知中心

全新通知系統,告警重發機制、靜音控制與即時推播。

體驗改善
⚙️

基礎設施現代化

QA 環境建置、CI/CD Pipeline 優化、Docker 開發環境 Hot Reload 支援。

DevOps

重新打造的
監控儀表板

從零重構的 Widget 系統架構,支援自訂佈局與即時數據推送,搭配全新的離線偵測機制。

  • 🔌
    WebSocket 即時監測 基於 WebSocket 的即時數據推送,設備狀態零延遲更新
  • 🧩
    Widget 組件化系統 Dashboard 組件化重構,支援 Toolbar、自訂佈局與 Store 管理
  • 🔇
    告警靜音 & 音效控制 新增靜音功能、告警音效解鎖與頁籤切換自動靜音
  • ⏱️
    離線偵測機制 基於資料時間判斷實作三分鐘離線偵測保護

Fenri 2.0 旗艦功能
企業級 LINE 通知整合系統

本次 v2.0 改版最核心、開發投入最重的系統模組。從無到有打造專為台灣水質監測場域設計的 LINE 智能推播平台,讓現場人員第一時間在手機 LINE 群組收到超限告警,徹底取代過去人工電話通報的低效流程。

16+
LINE 子功能
50+
API 單元測試
5
覆蓋功能模組

🔗 【一】兩步驟快速群組綁定流程

  • Step 1:掃 QR Code 邀請機器人 系統顯示 Bot 的 QR Code,現場人員直接掃描即可將官方通知機器人邀請進 LINE 群組,完全不需要手動輸入任何帳號資訊。
  • Step 2:群組 @Tag 取得一次性 OTP 驗證碼完成綁定 機器人進入群組後,成員在群組內 @Tag 機器人,機器人即時回覆 6 位數一次性驗證碼 (OTP);使用者輸入後系統立即完成綁定,整個流程不超過 2 分鐘。
  • 站點關聯精細設定(關聯哪些站點推哪個群組) 綁定完成後可在 Dashboard 精細設定「哪些監測站點的告警要推送到這個群組」,支援單一群組服務多個站點,也可讓不同站點推送到不同的專屬群組。
  • 綁定狀態、群組人數及費率自動同步 每日背景任務自動同步群組最新人數,費率以每人每則 NT$ 0.2 計算;若群組成員人數變動,費率於下次同步後自動更新,管理人員無需手動維護。
  • 更換群組雙重確認防誤觸 點擊「更換群組」時系統彈出確認視窗並明確說明「原有群組將停止接收告警通知」,有效避免管理人員誤操作中斷生產環境的告警推播服務。

📊 【二】精準計費與用量分析趨勢

  • 跨日期範圍篩選 × 按群組過濾的趨勢圖 費用報表支援任意日期區間查詢,可針對單一 LINE 群組或全部群組過濾;折線圖以 ECharts 雙 Y 軸呈現「每日發送則數」與「每日費用(NT$)」兩條趨勢線,並自動補齊無數據日期為 0,確保圖形連續不中斷。
  • 精準費用公式:每則 NT$ 0.2 × 實際推送人次 改以 SUM(snapshot_member_count) 精準累加每次推播當下的群組人數(snapshot),費用 = 發送則數 × NT$ 0.2,完全對齊 LINE 官方計費邏輯,提升帳務透明度。
  • 摘要統計卡 + 每日明細雙層呈現 頁面頂部呈現查詢期間「累積發送則數」與「費用合計(NT$)」兩張摘要卡;下方表格逐日列出發送筆數、發送則數、累積費用,讓 PM 能快速掌握整體量與當日異常峰值。
  • 一鍵 CSV 匯出,自動命名含日期範圍 點擊「匯出 CSV」即可下載完整費用明細,檔名自動帶入查詢日期(如 Line費用報表_2026-03-01_2026-03-31.csv),方便 PM 直接提供給財務或客戶做帳。
  • 測試訊息計費警示 + 當日累積次數提醒 發送測試訊息前系統先彈窗確認「此訊息將計入費用」;發送成功後後端回傳當日測試次數,當日超過 1 次時主動跳出「今日已發送 N 次,每次皆計入費用」orange 警示,有效阻擋粗心的高頻測試。

📋 【三】六欄全資訊發送日誌系統

  • 四種訊息類型完整分類標記 每筆推播日誌依訊息類型自動上色標籤:設備告警(紅)/ 告警恢復(綠)/ 每日報表(藍)/ 系統通知(灰),維運人員掃一眼即知觸發原因,不再需要逐字閱讀訊息內容。
  • 六欄完整資訊:時間 / 類型 / 群組 / 內容 / 人數 / 費用 Log Viewer 表格依序記錄「發送時間、訊息類型、目的群組名稱、訊息內容(可搜尋)、發送人數(snapshot_member_count)、當筆費用(NT$)」,並在最後顯示推播成功/失敗狀態,查修時不再需要翻 Server 日誌。
  • 群組 + 日期區間 + 關鍵字三維篩選 支援同時複合篩選:選擇特定 LINE 群組、指定任意起訖日期、並可用關鍵字模糊搜尋訊息內容文字,快速定位特定告警的推播記錄。
  • 全欄支援點擊排序 + 後端分頁(10 / 20 / 50 / 100 筆) 表格所有欄位均支援升降序排序,每頁筆數可自選,並支援頁碼跳轉,即使日誌量達數千筆也能高效查閱,不卡頓。
  • 嚴格的租戶資料隔離(Customer UUID 強制過濾) List 與 Export 兩個 API 都強制附加 Customer UUID 作為查詢條件,從根本阻斷不同廠商、不同白牌客戶之間的資料互通,保護每個客戶的推播隱私。

🚨 【四】智慧告警推播與通知控制

  • 告警觸發條件複合表達式優化 翻修告警判斷邏輯,支援更精細的複合式表達式設定,讓 LINE 推播僅在真正異常時觸發,有效降低誤報率與不必要的訊息費用消耗。
  • 告警重發機制(Alarm Resend) 針對推播失敗或特殊情境下被遺漏的告警,系統提供手動重發功能,確保每筆超限事件都能確實送達現場維運人員的 LINE 群組,做到零遺漏。
  • 靜音開關與頁籤切換自動靜音 新增告警音效靜音開關;切換至其他瀏覽器頁籤時系統自動靜音,切回後自動恢復,避免控制室多螢幕作業時告警聲影響同事,也防止離開頁面時一直響。
  • LINE 推播啟用 / 停用確認彈窗 管理員切換 LINE 服務啟用狀態前,系統強制跳出確認彈窗,說明操作後果,防止誤觸將整個公司的告警推播關閉而不自知。

🖥️ 【五】LINE Dashboard 驅動管理總覽

  • 三大即時統計卡:綁定狀態 / 服務總人數 / 本月發送則數 Dashboard 首頁以三張統計卡即時呈現核心指標,綁定狀態以綠色(已綁定)與灰色(未綁定)清楚區分,讓管理員進入頁面 3 秒內掌握服務健康狀態。
  • 訊息上限進度條:綠 → 橘 → 紅三色動態預警 依使用量自動變色:使用率低於 70% 顯示綠色安全、70–90% 轉橘色警示、超過 90% 亮紅燈緊急提醒,並即時顯示「剩餘 N 則可發送」,在月底前主動預警避免超量斷訊。
  • 發送測試前額度攔截保護 系統在前端即判斷當月使用量是否已達上限,若已達上限則直接攔截測試請求並給出明確提示,不讓測試訊息在額度已滿時仍造成計費衝突。
  • 全頁面互動式 el-tour 新手導覽(4 個 Dashboard 步驟) Dashboard / 綁定設定 / 費用報表 / 發送日誌四個頁面,各自備有 Element Plus Tour 分步驟引導,每步驟精準 highlight 對應 UI 元件並說明功能;老用戶可透過全站跳過機制一次性關閉所有頁面的導覽。

🏢 【六】多層白牌組織架構深度整合

  • 集團 → 園區 → 公司三層綁定管理 LINE 群組管理與全新企業組織架構深度整合,可依公司、園區或集團的維度個別設定推播群組,確保「對的告警只推給對的人」,不跨層洩漏資訊。
  • 白牌客製化 Logo 與品牌識別 配合 Branding 品牌設定系統,不同白牌客戶(OEM 合作夥伴)在管理後台可設定專屬 Logo 與主題色;LINE 相關頁面亦同步套用各自的品牌識別,強化客戶專屬感。
  • Root Admin 租戶視角切換 超級管理員可一鍵切換至任意客戶的租戶視角,在同一後台介面即可協助客戶進行 LINE 群組綁定設定與額度查閱,大幅降低跨廠商的客服支援成本。
  • 合約期限連動管控 客戶合約到期後,系統自動停止 LINE 推播功能並阻擋登入;有效避免合約終止後服務繼續消耗 LINE 訊息額度,保障服務商的成本控制。
💡 為什麼 LINE 整合是這次的核心?

水質監測的核心痛點在於「即時性」——當水質參數超限的第一分鐘,維運人員必須立即知道。 Fenri 2.0 的 LINE 整合系統讓告警不再依賴人盯螢幕,而是口袋裡的手機。 結合精準的費用管控與嚴格的資安隔離,我們為每個合作的自來水廠與工業客戶,都提供了一個 「零部署、開蓋即用」的企業級 LINE 推播解決方案

✓ 告警秒達維運人員 LINE
✓ 費用透明可控可預測
✓ 零跨廠商資料洩漏
✓ 多租戶白牌深度整合

企業級
多租戶管理

全新管理後台架構,支援三層組織架構、模組權限精細控制與白牌品牌客製化。

  • 🏗️
    組織階層管理 集團 → 園區 → 公司三層樹狀結構,CRUD 完整支援
  • 🔐
    權限隔離系統 Root Admin 角色過濾、租戶權限隔離、模擬身份限制
  • 🎨
    品牌設定 (Branding) 支援自訂 Logo、主題色與企業識別客製化
  • 📋
    合約期限管理 客戶合約期限 UI、JWT 合約驗證、過期自動檢查
  • 👥
    使用者管理增強 管理員建立使用者端點、欄位驗證優化、群組分類設定

現代化 DevOps 工程

全面升級開發流程與部署架構,提升團隊生產力與系統可靠度。

🧪

QA 環境

獨立 QA 環境部署設定、專用 CI/CD Pipeline,確保品質。

🔄

CI/CD 優化

Pipeline 預編譯 Go binary、vue-tsc 型別檢查、自動部署。

🐳

Docker Hot Reload

開發環境支援 Hot Reload,正式機專用 Docker Compose 配置。

🔑

環境變數統一

CORS、SMTP 改由 Docker 環境變數注入,移除硬編碼數值。

📦

Migration 管理

新增 10+ 個 Database Migration,完整組織階層與 LINE 表結構。

🚀

自動化部署

正式機自動化升級腳本、rsync 部署一鍵推送生產環境。

UI/UX 全面進化

重構核心佈局架構,帶來更流暢、更直覺的操作體驗。

01

Sidebar 動態導航

由 Router Meta 自動生成側邊欄選單,支援收縮/展開動畫。

02

Breadcrumb 導航元件

全新麵包屑組件,搭配 Header 按鈕對齊優化。

03

el-tour 互動導覽

新人引導 Tour 功能,老用戶可一鍵跳過全站導覽。

04

CompanySwitcher 重構

三層折疊樹結構,修正白牌切換邏輯,支援公司快速切換。

05

CWMS 水質監測模組

新增有效值查詢、全幅值設定與狀態碼設定等三大子功能。

06

Playwright E2E 測試

完整 E2E 測試框架搭建,覆蓋核心流程自動化驗證。

三個月的演進軌跡

從基礎架構搭建到功能完善,每一步都凝聚著團隊的心血。

2026 年 2 月

後台建置與品牌化

  • 管理後台頁面架構與 API 建立
  • 支援白牌化的 Branding 品牌設定
  • 國際化 (i18n) 模層導入
  • 客戶合約期限管理系統上線
  • 核心 UI 與路由架構翻新
2026 年 3 月上旬

LINE 整合與架構升級

  • LINE 服務完整上線 (報表/綁定/日誌)
  • Dashboard Widget 組件化重構
  • 集團/園區三層組織階層架構
  • 系統通知中心功能建置
  • QA 環境分離與 CI/CD Pipeline 預編譯
2026 年 3 月下旬

進階擴增與穩定性打磨

  • CWMS 水質模組 (有效值/狀態碼)
  • 50+ 個 LINE API 嚴格單元測試
  • 群組與模組權限管理優化
  • 前端 Pipeline 導入 vue-tsc 型別檢查
  • 全域自動導覽與 Demo 站點部署
2026 年 4 月

企業級安控與重構

  • 租戶視圖切換與資料全隔離
  • Root Admin 過濾與模擬身份權限限制
  • 生產環境專屬 Docker Compose 與 Port 隔離
  • 正式機全自動化升級腳本 (支援 Seed)
  • Playwright E2E 測試與部署快取安全修復

用數字說話

0
+
Commits 提交
0
+
功能特性
0
核心模組
0
+
DB Migrations
0
+
測試案例
0
部署環境