建議 model:opus/effort:medium——設計頁面資訊層級與版面,需讀設計系統與既有元件,無後端改動。
本卡屬 FR-107(母卡 CM-1843)第 .1 棒(子需求卡 CM-1844),因 T-1.4(CM-1853)UI 驗收不合格整頁退回而開。做完本卡的 mockup、決策者過目通過後,T-1.4 才會重派實作。
這張卡做什麼(白話)
出兩頁可在瀏覽器直接打開的 HTML mockup 給決策者看,用專案既有的 design tokens 與暗色主題,不是真的 Vue 頁、不用接 API。過目通過後才拿它當 T-1.4 重做的規格,不是這張卡自己去改 Vue 檔。
為什麼要重做(決策者 2026-09-17 原話)
「最好用流程引導的方式,需要有一個歷史清單,新建批次與上傳分開,功能應該叫『自動分類證據』不是『批次上傳證據』,上傳的檔案一律要能預覽,檔案數量一多會一直往下長,整個重新設計,參考業界設計。」根因:guidant-design-system skill 明寫新頁面要先出 HTML mockup 給決策者過目再實作,上一棒(T-1.4)跳過了這步直接刻 Vue。
六點對照(決策者原話 → 本卡怎麼落地)
- 「流程引導的方式」→ 頁面頂部放 PrimeVue Steps 四步流程列
- 「需要有一個歷史清單」→ 入口頁是批次歷史表,不是直接跳進上傳畫面
- 「新建批次與上傳分開」→ 歷史表右上「+新增自動分類」按鈕,按下才進第①步
- 「功能應該叫自動分類證據」→ 命名統一改「自動分類證據」,路由 auto-classify
- 「上傳的檔案一律要能預覽」→ 檔案列表每列有預覽按鈕,重用 EvidencePreviewDialog.vue
- 「檔案數量一多會一直往下長」→ 固定高度表格+分頁(每頁 20)+搜尋與狀態篩選
已定案(不必再討論,照做)
- ① 兩頁結構:頁 A 批次歷史清單(入口)、頁 B 單一批次四步流程頁
- ② 第③步(確認分類)直接重用既有審閱頁 EvidenceClassificationReview.vue,只是換資料來源——這件事屬 T-3.4,本卡只需在 mockup 上畫一個佔位框說明,不用真的設計這步的介面
- ③ 命名「自動分類證據」、路由 auto-classify
頁面規格 — 頁 A:自動分類證據(歷史清單)
路由 /project/projects/:id/round/:roundUid/auto-classify。
- 表格欄位:建立時間/建立者(暱稱)/檔數/目前步驟(①②③④ 用步驟徽章顯示)/已歸檔 n/N/動作(繼續/檢視)