↑ 需求首頁 ⌂ 需求中心

缺失改善（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.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。