先讓資料
成為畫面。

總覽回應以站點分組，每個站點包含一個 devices 陣列。先找出裝置名稱、狀態與最後量測時間，對應到列表上的三個位置。

{
  "id": "demo-device-01",
  "name": "示範加速度計 A",
  "status": "normal",
  "lastMeasurementAt": "2026-10-15T01:00:00.000Z",
  "currentValue": { "ax": 0.01, "ay": -0.02, "az": 0.03 }
}

合成資料與欄位子集，並非真實站點量測。完整範例可在文末下載。

名稱與狀態

name 顯示裝置名稱；狀態搭配文字和顏色，不只靠顏色區分。

量測時間

lastMeasurementAt 是 ISO 時間或 null。顯示時轉為本機時區，沒有時間則標示「尚無量測資料」。

缺值與零值

currentValue: null 表示沒有量測值，和數值為零不同。單位等正式裝置設定確認後再標示。

列表不是只有「有資料」一種情況。讓資料來源回傳空列表、延遲或錯誤，就能先把畫面行為整理好，再處理真實網路。

把資料存取包在獨立介面，畫面只處理載入、內容、空列表與錯誤。未來從 JSON 換成 HTTP 時，就能沿用已經建立的畫面邏輯。

登入不是只切換頁面。帳密送到後端後會取得 token，之後的受保護請求再帶上這份登入資訊。下面把三個請求放進同一條路徑。

{
  "userName": "<測試帳號>",
  "password": "<測試密碼>"
}

登入回應的 user 包含 id、name、role；/auth/me 則直接回傳 sub、userId、role。兩者的資料模型不同。

測試入口與帳號尚待提供。這份網頁只展示流程，不接收帳密、不連線到正式 API。

資料結構與畫面行為相同，UI 元件和網路工具則沿用平台習慣。選擇一條路線閱讀。

兩份 JSON 可直接用來練習列表狀態。Postman 範本包含登入、查身分與總覽三個請求，待測試入口就緒後使用。