自動分類證據

設計說明 — 頁 B：單一批次流程頁

路由 .../auto-classify/:batchUid。一批作業從上傳到歸檔都在這一頁完成。

為什麼步驟列放頂部，而且四步永遠都在

• 這是會跨天、跨 session 的流程，使用者回來第一個問題是「我做到哪了」。步驟列固定在最上方，一眼回答。
• 四步全部顯示（含還沒走到的），讓人預期得到後面還有什麼，不會在第①步以為按下去就結束了。
• 已完成的步可以點回去看（唯讀），進行中與未到的步不能點——避免使用者跳到還沒有資料的步驟看到空畫面。

PrimeVue 3.53 Steps 的雷，實作要注意

• prop 是 :active-step，不是 :active-index（那是 TabView 的，兩者相反，最容易混）。
• :readonly="true" 會讓所有步驟都不能點；要「已完成可回看」就得設 :readonly="false"，再自己在 @update:active-step 裡擋掉未完成的步，不能只靠元件。
• 步驟 label 含翻譯字串，model 陣列必須包 computed()，否則切語系不會重算。
• 本 mockup 的步驟列是靜態摹本（連接線畫在 li 上而非疊在圓圈底下），實作直接用 Steps 元件即可，不要照抄這段 CSS。

第①步：投遞區為什麼可收合

• 投遞區只有「要加檔」時才需要，佔掉一大塊版面是常態浪費；收起來之後清單就上移，一眼能看到更多檔。
• 收合列仍顯示「已上傳 N 個檔」，收起來也知道現況，不需要展開確認。
• 上傳中的檔案獨立列在投遞區下方（逐筆進度＋可取消），不混進下方已完成清單——兩者關心的事不同：一個是「還在跑嗎」，一個是「我這批有什麼」。

第①步：檔案多了不會一直往下長

• 表格固定高度（約 19rem）內捲、表頭 sticky，外層頁面高度不受檔數影響。
• 每頁 20 筆分頁，加上搜尋檔名與狀態篩選——42 個檔跟 420 個檔的版面一樣高。
• 主按鈕「開始 AI 分類」固定在卡片底部，不會因為捲動而找不到。

第①步：每一列都能預覽

• 動作欄兩顆 icon button：預覽、刪除，都帶 tooltip（實作用 v-tooltip.top）。
• 預覽重用 EvidencePreviewDialog.vue，不另做檢視器；刪除是破壞性動作，hover 轉紅並走二次確認。
• 檔名本身也可點開預覽——多數人會直覺點檔名而不是找 icon。

第①步：開跑前的分類設定與預估

• 三個欄位沿用既有的 AIEvidenceClassificationDialog.vue，不另發明一套： 信心門檻（滑桿，預設 0.70）、AI 模型（下拉）、歸檔方式（分類並歸檔／只分析不歸檔）。
• 模型選擇維持 DEV/admin 限定（既有 VITE_DEV_MODE gate）：一般使用者不該也不需要挑模型， 給了只會變成一個沒人知道該選什麼的選項。系統管理員調校時才看得到。
• 下拉依廠商分組（OpenAI／Anthropic／…），因為挑模型時真正在比的是「哪家、多貴」，分組讓這件事一眼可比。 同組內依便宜到貴排列，標籤直接寫用途（「最省，適合大批粗篩」）而不是只給型號——型號本身對人沒有意義。
• 沒設定 API 金鑰的廠商整組反灰，並在下方給一條「到系統設定填金鑰」的指路。 理由：金鑰沒給就算選了也跑不動，與其讓人選完才吃錯誤，不如當場說明並給出解法。 Gemini 那組在 mockup 裡就是這個狀態的示意。
• 這件事會牽動後端：目前分類容器只接 Anthropic，要支援 OpenAI 需在容器端加對應的呼叫實作， 並讓可選清單由「後端實際支援的模型 × 已設定金鑰的廠商」動態產生，不是前端寫死一份清單。
• 預估列放在主按鈕正上方：耗時、token 用量、費用。理由：這三個數字只有在「按下去之前」才有決策價值—— 按下去之後它們就只是事後帳單。切換模型時數字即時改變，讓人看得到快與貴的取捨（mockup 切 Opus 可看到）。
• 預估明講「依 42 個檔與目前設定推估，實際以跑完結果為準」——寫死一個看起來很精確的數字反而會被當成承諾。

第②步：只講三件事

• 跑到哪（進度條＋16/42）、還活著嗎（最後回應幾秒前，也就是心跳）、我可以走嗎（明講可離開、從哪回來）。
• 心跳時間比單純轉圈重要：AI 分類久是正常的，但「久」跟「掛了」必須分得出來。
• 另補一行「已跑多久」與目前累積用量／費用，讓人隨時能跟開跑前的預估對照（用量那行同樣 DEV/admin 限定）。

第③步：只畫佔位框

• 這步直接重用既有審閱頁（EvidenceClassificationReview.vue），只換資料來源，屬 T-3.4，本卡不重畫。

第④步：結果摘要與清理

• 三個數字分三張卡，用色分承載結論：綠＝成功歸檔、橘＝需要人處理（找不到對應任務）、灰＝未分類。
• 清理區明說「救不回來」，並提供「留著」的等價選項——破壞性動作不預設，也不藏在小字裡。
• 另有一列實際用量（模型／耗時／tokens／費用），沿用既有審閱頁 run-cost-bar 的呈現方式， 同樣 DEV/admin 限定；它與第①步的預估成對，讓調校的人能回頭校正自己的預估公式。

角色差異（manager／auditor）

• auditor 視角：投遞區整塊不出現，所有寫入按鈕（開始分類、刪除、清理）不顯示，頂部一條說明條講清楚為什麼。
• 不用反灰而用隱藏：反灰會讓人一直去想「怎樣才能按」；說明條一次講完比十顆灰按鈕清楚。
• 後端仍會擋（403），前端隱藏只是不讓人白按。用上面的切換鈕可看這個視角。

未設定儲存後端

• 常駐紅色橫幅＋主按鈕反灰，示意一次（不是每步都畫）。理由同頁 A：先講原因並指路，比按下去吃 412 好。

實作對照（給下一棒）

• 色彩全走 token、字級用 PrimeFlex class；本檔 :root 與 .text-* 是離線預覽替身，實作刪除。
• 圖示本檔用 inline SVG 以便 file:// 直開，每個都標了 data-pi，實作換回 PrimeIcons。
• 所有 async 動作配 xxxLoading ref＋button :loading；預覽 Dialog 先開再載（ProgressSpinner）。
• 上傳者顯示暱稱：created_user_name || created_user。