FAE Website 專案架構與開發重點筆記
https://webems.gustech.com.tw/fae/
此專案是一個基於 Vue 3 框架開發的前端應用程式，旨在提供 FAE（現場應用工程師）所需的技術支持工具及管理界面。
1. 核心技術棧
- 前端框架: Vue 3 (Composition API)
- 開發工具: Vite
- 路由管理: Vue Router (處理多頁面切換與權限導向)
- 狀態管理: Pinia (管理全局設備狀態與用戶資訊)
- UI 組件庫: Element Plus (提供標準化的工業管理界面組件)
- 數據可視化: ECharts (用於呈現電池曲線或設備歷史數據)
2. 系統目錄架構
/src/views:- Dashboard: 系統概覽與核心指標展示。
- Monitor: 即時設備數據監控。
- Logs: 系統運行日誌與錯誤紀錄，便於 FAE 追蹤問題。
/src/components: 封裝了如導航列、側邊欄以及自定義的數據顯示卡片。/src/api: 集中管理後端接口請求，包含與 EMS（能源管理系統）相關的 API 對接。/src/store: 定義 Pinia 模組，例如useAppStore或useDeviceStore。
3. 功能開發重點
- 響應式數據綁定: 核心功能在於實時反映後端傳回的數據。
- 持久化儲存: 針對 FAE 客製化的界面佈局，使用
localStorage記錄座標與配置，提升操作體驗。 - 導航守衛: 實作路由攔截，確保只有經過授權的技術人員能存取特定的設備控制頁面。
- 代理配置: 透過
vite.config.ts的 Proxy 設定處理跨域請求，對接特定的伺服器（如 InfluxDB 或 WebEMS）。
4. 運維與部署建議
- 環境變數: 應區分開發環境與生產環境（.env 文件），以正確對接 API 入口。
- 日誌過濾: 建議在前端實作層級過濾，幫助 FAE 在大量數據中快速定位
Warning或Error。 - 反向代理: 部署時配合 Nginx 進行路由轉發與 SSL 憑證管理，確保通訊安全。