本卡屬 FR-132（母卡 CM-2510），A.5 存取管理前端第 1 張。依賴：T-3.1。建議 model：opus。
新的存取管理四頁要用到三個今天沒有的元件：① 能力點矩陣——列是「模組 → 資源」兩層樹、欄是動詞（read／create／update／delete／approve…），勾整列存 grc.*.*、勾整欄存 *.*.read，畫面上永遠顯示展開後的結果、存起來的是最短的 pattern；② 部門樹選擇器（今天部門只有扁平下拉）；③ 日期區間選擇器（指派起訖用）。
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/views/role-manage/RoleForm.vue:456-516 現有 TreeTable 三態矩陣（CSS :531-605），605 行
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/views/role-manage/RoleForm.vue:41-54,171-220,236-240 平台層過濾、可指派集合、license 旗標（isRcLicensed，缺席 fail-open）
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/stores/menuStore.js:268-278 uiRoutes／capabilityMenu 載入
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/composables/useTenantScopedMenus.js:29-30 ORG_UNIT_MENU 租戶隔離快取，可沿用
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/components/ai-quota/…/AiUsageSummary.vue:171 唯一的 selectionMode=range 範例
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/views/org-unit/OrgUnitManage.vue 部門管理頁（部門資料是扁平清單，要自己組樹）
放置處：src/components/ 下新子資料夾（例 access-management/），先看既有 components 命名慣例
capabilities 含 module／resource_type／action／display_name／sort／is_platform／license_module）＋目前 pattern 清單＋唯讀旗標；emit 最短 pattern 清單。列從能力點名前兩段長出（不再用 uiRoutes 樹）；欄＝動詞聯集，read 排第一。三態（空／勾／減號）照搬現有 CSS 與邏輯。展開與壓縮規則：勾選集合 → 能壓成 模組.*.*、*.*.動詞、模組.資源.* 就壓；展開邏輯與後端一致（* 只整段）。TreeSelect（先查 frontend-overview.md §3.6 的 quirks），資料由扁平 org_units（含 path）在前端組樹；可選任一層。config/translations 對應 FE 的 i18n 檔）。npm run build 通過＋下方手測。E2E 屬母案收口，不在本卡。grc.*.*、勾整欄存 *.*.read；部門樹可選子部門。