# FR-039 Agent 認證 v2 — 前端(FE)開發計劃（詳盡版）

> repo：`compliance-manager-fe`。依據 `design-agent-auth.md` v2 + 後端計劃 §1 契約。
> 範圍：設備清單改版(自動出現/online-offline/狀態) + 註冊 token 管理頁 + 重新綁定/撤銷。
> **退場先保留**：現有「Agent 管理」(手動新增 / 測試連線 / 對帳)**全留著**,以下是**加在旁邊**,不取代。
> **依賴契約**：BE 計劃 §1 的 token 管理 / revoke / rebind / 清單欄位(online、status、device_fingerprint、last_seen_at)。可對 mock 先開發。
> 📋 **進度回填**：開工/完成/卡住都更新 [TRACKER](2026-06-19-agent-auth-v2-TRACKER.md)。

---

## 既有基礎（重用）
- 頁面：`src/views/remote-agent/RemoteAgentManage.vue`（已有 DataTable + 新增/編輯 dialog + 啟用切換 + 刪除 + 測試連線 + 對帳）。
- api：`src/config/api/api.js` 的 `REMOTE_AGENTS*`;i18n `remote-agent.json`;route `/system/remote-agent-manage`。

---

## 任務

### F1 · 設備清單改版（狀態 + 自我註冊設備呈現）
- 清單欄位新增 / 調整(`RemoteAgentManage.vue`)：
  - **連線狀態(online/offline)**：用 BE 回的 `online` 布林(由 last_seen_at 推算)取代/並列現有「健康檢查」狀態欄。顯示 🟢 線上 / ⚪ 離線 + last_seen 時間。
  - **status**：active / 🔴 revoked badge。
  - **device_fingerprint**：顯示「已綁定」(非空) + 截短指紋 tooltip;未綁定灰字。
  - **agent_version**：顯示版本欄。
- 自我註冊的設備會由 BE 自動 upsert → 清單**重新整理就會出現**（即時推播延後,先手動重整;可加一顆「重新整理」鈕）。
- **驗收**：清單顯示 online/offline + status + 綁定 + 版本;新註冊設備重整後出現。**依賴**：BE A0/B3/B4 契約。

### F2 · 註冊 Token 管理（新區塊/分頁）
- 在 Agent 管理頁加「註冊 Token」分頁或卡片：
  - 載入 `GET /agents/enroll-token` → 顯示是否已產生 + label + 建立時間（**不顯示明文**）。
  - 【產生 / 重新產生】鈕 → `POST /agents/enroll-token` → 跳**可複製對話框**：token 明文 + 雲端 endpoint + 警語「僅顯示一次,請保存」。
  - 【撤銷】鈕 → `POST /agents/enroll-token/revoke`。
  - manager 權限才看得到/操作。
- api.js 加 `AGENT_ENROLL_TOKEN` 常數;i18n 補字串。
- **驗收**：產生顯示一次明文 + 可複製;重整後只看得到 hash 狀態;撤銷生效。**依賴**：BE B2。

### F3 · 重新綁定 / 撤銷 鈕
- 設備列 action 加：
  - 【撤銷】/【復用】→ `POST /remote-agents/<uid>/revoke|unrevoke`（manager;撤銷後該列顯示 revoked）。
  - 【重新綁定設備】→ `POST /remote-agents/<uid>/rebind`（manager;硬體換新後續同 agent_uid）。確認框說明「將以該設備當下指紋覆寫」。
- i18n 補字串。
- **驗收**：撤銷/復用切 status + UI 反映;重新綁定觸發 + 結果回饋。**依賴**：BE B6。

---

## 紀律 / 注意
- 跨 repo：動工前讀 FE CLAUDE.md;BaseService get/post/put 回值慣例(有 meta 回 {data,meta} 否則 data);error code i18n。
- 既有功能**不移除**（退場先保留）—— F1/F2/F3 是新增。
- 即時 UI（SocketIO 推播）**延後**：先手動重新整理看狀態。
- manager 權限：token 管理 / revoke / rebind 都要 manager;沿用既有權限機制(RBAC 選單 + 後端 manager 檢查)。
- 可對 mock 契約先開發,BE endpoint 好了再串。
- **依賴順序**：三任務獨立,各對應 BE 的 B2/B3+B4/B6;BE 對應 endpoint 好了才能整合測。