# 缺失改善（POA&M）頁重設計規格 — 表格清單 + 側邊抽屜（A 模式）

> Date: 2026-06-21 · 給下個 session 執行。目標頁：`compliance-manager-fe/src/views/project/RoundPoamView.vue`
> 現況：已先做過「accordion 版重設計」（總覽列 + 收合脈絡 + reveal 表單 + 里程碑卡片，已 commit）。
> 本規格是**下一步的結構性改版**：把 accordion 換成 **DataTable 清單 + Sidebar 抽屜詳情**（對齊商用 GRC：ServiceNow/AuditBoard）。

## 1. 為什麼
單一 accordion 卡把「缺失脈絡 + 風險 + 矯正措施 + 里程碑」全疊在一起，層次太深、難掃描。
商用 GRC 都把「**瀏覽很多筆**」和「**操作其中一筆**」拆開：主畫面表格掃描，點一筆滑出抽屜聚焦處理。

## 2. 版面
```
┌─────────────────────────────────────────┬──────────────────┐
│  頂部總覽列（沿用現有：缺失數/進行中/已結案/矯正進度條）        │                  │
├─────────────────────────────────────────┤   側邊抽屜        │
│  DataTable 缺失清單                        │   （Sidebar，     │
│  控制項 | 嚴重度 | 狀態 | 期限 | 進度        │    position=right）│
│  [選中列高亮]                              │   點列才滑出      │
└─────────────────────────────────────────┴──────────────────┘
```
- 主區：`DataTable`（PrimeVue），列可排序/篩選，選中列高亮（`selectionMode="single"` + `v-model:selection`）。
- 抽屜：`Sidebar`（PrimeVue，`position="right"`、寬 ~32rem），點某列 `onRowSelect` → 載入 detail（`loadDetail`）→ 開抽屜。

## 3. 表格欄位（資料來自 `GET /poam-items`，現有 item 欄位）
| 欄 | 來源 | 備註 |
|---|---|---|
| 控制項 | `item.control_id || item.title` | 主鍵顯示 |
| 嚴重度 | `item.severity` | 色點 + Tag（high/medium/low → danger/warning/secondary）可排序 |
| 狀態 | `item.status` | open/closed → 未結案/已結案；可篩選 |
| 期限 | `item.target_date` | `deadline_warning` 為真標紅；可排序 |
| 進度 | `item.milestone_done / item.milestone_count` | 迷你進度條 + `done/total`（沿用現有 `itemPct`） |

> **負責人欄（選配）**：item 層級**沒有單一負責人**（負責人在里程碑層 assignee）。若要加「負責人」欄，需 BE 在 `/poam-items` 回傳彙整 assignee（例如 distinct milestone assignees）。**預設先不放**，避免為了一欄載全 detail。要做再開 BE 小改。

## 4. 抽屜詳情（Sidebar 內容）
**標頭**：`control_id` + 嚴重度 Tag + 狀態 Tag + 關閉鈕。

**分頁（TabView）**，三個 tab：
1. **矯正措施**（預設）：主操作區。沿用現有 accordion 版的 `risks → remediations → milestones` 結構與互動：
   - risk：名稱 + 嚴重度 Tag + `risk.statement`（影響）。
   - remediation：🔧 標題 + 描述 + 里程碑清單（每個里程碑一張小卡：標題/狀態 Tag/負責人；下排 Calendar/Dropdown(負責人)/Dropdown(狀態)/儲存）。
   - reveal 新增：「＋ 新增里程碑」「＋ 新增矯正措施」（沿用現有 `_showAddMs` / `_showAddRem`）。
2. **缺失脈絡**：`deficiency`（缺失說明）+ observations（描述 + 方法 Tag(用 `methodLabel`) + 對象 Tag）。唯讀參考。
3. **證據**：把所有 observation 的 `relevant_evidence` 攤平成清單（📎 + `ev.description`，若 `ev.reference_url`/`drive_url` 可點開連結）。也可在 tab1 的脈絡裡保留，但獨立「證據」tab 更好掃。

## 5. 互動（沿用既有，端點不變）
- `addRemediation(item, risk)` → `POST /ar/risk/{risk.uid}/remediations`
- `addMilestone(item, rem)` → `POST /remediation/{rem.uid}/milestones`
- `saveMilestone(item, ms)` → `PUT /poam-milestone/{ms.uid}`（status/assignee/target_date 一起存）
- 存完 `loadDetail(item.uid)` + `fetchItems()`（刷新表格進度）。

## 6. 元件 / 重用
- 新增：`DataTable` / `Column` / `Sidebar` / `TabView` / `TabPanel`（PrimeVue，import 即用）。
- 重用現有 script：`overview`、`itemPct`、`assigneeName`、`methodLabel`、`msSeverity`、`sevSeverity`、`fmtDate`、所有 add/save 函數、`loadDetail`（含 `_newRem/_newMs/_showAddRem/_showAddMs/_date` 初始化）。
- 重用現有 CSS：進度條 `.bar/.bar-fill`、里程碑卡 `.ms-item`、reveal `.add-link`、`.rem` accent 邊條等。
- i18n：現有 `lang.round_poam.*`（含本次新增 `ov_*`/`context_label`/`remediation_plan`）。新增 tab 標題 key：`tab_remediation`/`tab_context`/`tab_evidence`。

## 7. 注意 / 邊界
- **BE 不用改**（除非要表格「負責人」欄 → 加 `/poam-items` assignee 彙整）。
- 抽屜開啟才 `loadDetail`（lazy，沿用 `details` 快取）。
- 響應式：窄螢幕抽屜可改全寬覆蓋（`Sidebar` 預設行為），或 detail 走整頁（C 模式）當 fallback。
- 證據要顯示前提：BE `_item_observations` 已回 `relevant_evidence`（本 session 已加，需 BE 重啟）。

## 8. 驗收
- 表格能掃所有缺失（嚴重度/狀態/期限/進度），點列滑出抽屜。
- 抽屜三 tab 切換；矯正措施可新增/編輯里程碑、新增矯正措施，存後表格進度即時更新。
- 方法顯示中文、證據顯示 📎。
- FE build 過；手測一輪有 not_met 的 round。