充電樁畫面修改

第一階段：狀態與邏輯骨架（核心資料流移轉）

這個階段的目標是把變數與 API 搬出去，但畫面先留在 App.vue。

• 步驟 1-1：撰寫 src/stores/emsStore.js

  • 內容：將原本在 App.vue 裡的 essData, cniData, evseData 移進來，並把核心的 fetchData 邏輯寫進去。

• 步驟 1-2：撰寫 src/stores/configStore.js

  • 內容：把原本處理 /config 的 config 變數、fetchConfig 與 saveConfig 移進來。

• 步驟 1-3：撰寫 src/composables/usePolling.js

  • 內容：封裝 isPolling 狀態、setInterval 的啟動與清除機制。

• 回頭修改與驗證 App.vue（第一次割接）

  • 修改：刪除 App.vue 裡原本零散的數據 ref、API fetch 函式與計時器邏輯。改為引入（Import）寫好的 Store 與 Composable。

  • 驗證指標：執行 npm run dev，畫面完全沒變，網頁打開依然能正常載入資料、燈號正常閃爍、背景輪詢沒斷，代表資料層重構成功。

第二階段：核心工具與基礎元件（打底工作）

在拆分頁面之前，先把會重複用到的圖表工具與小零件寫好。

• 步驟 2-1：撰寫 src/components/LineChart/EmsLineChart.vue 、HistoryChart.vue 、CniCellBarChart.vue 、CellBarChart.vue

  • 內容：將圖表 init、setOption 與監聽 resize 縮放的邏輯封裝起來。

• 步驟 2-2：撰寫 src/components/ui/StatusBadge.vue 與 BaseToggle.vue

  • 內容：把最底層、最簡單的「連線/斷線狀態燈」與「手自動切換開關」樣式與邏輯寫好。

• 回頭修改與驗證 App.vue（第二次割接）

  • 修改：將 App.vue 內的 ECharts 圖表初始化邏輯，改用 useECharts 接手；並把原本用 Tailwind 刻的狀態燈與開關改用這兩個 UI 元件替代。

  • 驗證指標：確保圖表依然會動，在視窗縮放時不會變形；連線燈號顏色正確。

第三階段：工商控制頁面割接（由小到大）

我們從畫面相對單純、且包含重要控制請求的「工商控制頁」開始割接。

• 步驟 3-1：撰寫 src/components/CniControl/ConfirmCommandModal.vue

  • 內容：負責處理下發功率指令前的二次確認與 125kW 安全防錯警報彈窗。

• 步驟 3-2：撰寫 src/views/CniControl/CniControl.vue

  • 內容：把 App.vue 中 currentPage === 'cni_detail' 的那整塊控制面板與表單複製過來，並引入上一步寫好的彈窗。

• 回頭修改與驗證 App.vue（第三次割接）

  • 修改：在 App.vue 中刪除整個工商控制的 HTML，替換為 <CniControl v-if=\"currentPage === 'cni_detail'\" />。

  • 驗證指標：點選導覽切換到工商控制頁，確認功率設定表單運作正常，點擊送出時會跳出確認彈窗，功能無損。

第四階段：電芯監控詳情頁面割接

處理擁有 15 個電池 Pack 迴圈與柱狀圖分析的頁面。

• 步驟 4-1：撰寫 src/components/CellDetail/CellAnalysisModal.vue

  • 內容：點擊個別電池包時彈出的 Modal 視窗，包含單一 Pack 電芯電壓壓差分析圖表（利用第二階段的 useECharts）。

• 步驟 4-2：撰寫 src/views/CellDetail/CellDetail.vue

  • 內容：把 App.vue 中 currentPage === 'detail' 的整塊 15-Pack 列表代碼移過來，並將點擊事件綁定到上一步的分析彈窗。

• 回頭修改與驗證 App.vue（第四次割接）

  • 修改：在 App.vue 中將電芯詳情區塊替換為 <CellDetail v-if=\"currentPage === 'detail'\" />。

  • 驗證指標：切換到電芯詳情頁，15 個 Pack 的資料呈現正確。點擊任何一個 Pack，能正常彈出電芯壓差柱狀圖。

第五階段：主儀表板與後台割接（終點線）

最後處理最龐大的主畫面與剩餘的後台。

• 步驟 5-1：撰寫 src/components/Dashboard/ 下的兩個子元件

  • EssStorageCard.vue（移動儲能卡片，含 SOC 動畫）

  • EvseChargerCard.vue（充電樁槍口狀態卡片）

• 步驟 5-2：撰寫 src/views/Dashboard/Dashboard.vue

  • 內容：將主儀表板的佈局（Header、狀態列）複製進來，並組合上述三個寫好的卡片元件。

• 步驟 5-3：撰寫 src/views/Admin/AdminSetting.vue

  • 內容：移轉最後的工程後台設定表單。

• 最終修改與清理 App.vue

  • 修改：將 App.vue 裡面最後殘留的 Dashboard 與 Admin HTML 清空，替換為 <Dashboard v-if=\"...\" /> 與 <AdminSetting v-if=\"...\" />。

  • 驗證指標：此時 App.vue 應該只剩下路由判斷與最外層的背景樣式（不到 50 行）。整個專案所有按鈕、切換、圖表與 API 通訊皆完美運作。