本卡屬 FR-161（母卡見「母卡」欄），第 4 棒：兩個新頁面。吃卡 1、2 的 API。決策者最早看得到畫面的一棒。

這張卡做什麼（白話）

做兩個新畫面。第一個是客戶與顧問都會用的「事前資料」頁：每個大類一張卡，可以丟檔案、上傳新版、看舊版、刪除、下載全部。第二個是「系統設定 ／ 事前資料大類」：用表格管理大類，可以新增、改名、排序、刪除。兩頁都已有可點的雛形，照雛形的結構與資訊順序做，視覺一律用全站設計系統。

雛形：~/Projects/Billows/Audit-Manager/compliance-manager-be/docs/features/FR-161-2610-pre-engagement-materials/prototype/materials.html（畫面 1）、~/Projects/Billows/Audit-Manager/compliance-manager-be/docs/features/FR-161-2610-pre-engagement-materials/prototype/settings-categories.html（畫面 3）。雙擊就能開。

怎麼做

事前資料頁：新 view src/views/pre-engagement/PreEngagementView.vue，路由名 pre-engagement（對應卡 1 的 ui_routes）。

• 頁首只有大標「事前資料」與「公司：<目前租戶名>」。不顯示框架或資源庫名稱、顧問、總數、提示條（決策者裁示：會搞混）。右上「下載全部（zip）」。
• 每個大類一張 dark-card：標題、資料數、大類說明（description，有才顯示，放標題下方一行）、右上「上傳」鈕；空的大類顯示拖放區。
• 資料列：檔案類型小標、顯示名稱、版本 Tag（有兩版以上才顯示 v2）、可能過時 · 超過一年沒更新（is_stale）、已過時（is_obsolete）；下一行檔名、大小、上傳者暱稱（created_user_name）、時間；舊版清單可展開、每版可下載。
• 操作：下載、上傳新版、刪除。is_locked=true 時刪除換成「標為過時」（tooltip：已被稽核引用，不能刪）。
• 上傳對話框：拖放區＋顯示名稱（選填）。選好檔案後先打 check-duplicate；有結果時在對話框內顯示「這格已經有一份『<名稱>』」與兩個選項「當成新版（變成 v<N>，舊版留著可看）」（預設）／「另存成一份新資料」，選前者改打 versions API。
• 從資源庫進來：src/views/module_frame/ModuleFrame.vue（579 行）列操作選單加一項「事前資料」導到同一路由。只加一行入口。

事前資料大類頁：新 view，路由名 pre-engagement-category-settings，掛在系統設定區。

• PrimeVue DataTable：拖曳排序把手、名稱（起始值加 Tag「起始值」，判斷 seed_key 非空）、說明、資料數、最後更新（暱稱＋日期）、操作（編輯、刪除）。拖曳後打 order API。
• 右上「新增大類」；新增與編輯都開 Dialog（名稱必填、說明選填，說明欄下註「顯示在事前資料頁那張卡的標題下方」）。
• 資料數大於 0 時刪除鈕 disabled，v-tooltip.top 顯示「底下還有 N 份資料，先在事前資料頁搬走」。

共通：API 常數加到 src/config/api/api.js；service 繼承 BaseService；i18n 加 lang.pre_engagement.* 與 lang.pre_engagement_category.<key>（中英兩份）；卡 1 的六個 PRE_* error code 加進 error-code.json（中英）。

設計系統紅線

• 🔴 禁止左側粗色邊框（border-left 3px 以上，任何顏色）；要強調用 Tag／Badge 或四邊 1px 細框。交付前 grep -rn "border-left" <新檔> 要空。
• 卡片一律 dark-card；字級用全站基準，不自訂 font-size／font-family、不用 max-width 鎖紙面寬。雛形的 CSS 不要搬。