thread-master/docs/product/demand-radar/tasks/T574-fe-crm-board-eight-columns.md

T574 — fe-crm-board-eight-columns

Status: done
Milestone: M4
Kind: feat
Est. change: ~200 lines

Goal

完成後系統應：/app/crm 以單一 Contact 工作清單呈現，可搜尋、篩選、排序、分頁與安全移除。

Depends on

• T502、T503、T569

Inputs

• Spec：../spec.md §3.4、§4.6.4、§5.3

Outputs

程式變更（預期路徑）

路徑	動作	說明
apps/web/src/pages/CrmBoardPage.tsx	edit	搜尋／篩選／排序／分頁工作清單＋同頁詳情＋安全移除
apps/web/src/App.tsx	edit	註冊 /app/crm
apps/web/src/data/live/radarRepos.ts	edit	crm contacts 列表實作
apps/web/src/styles/radar.css	edit	響應式清單＋右側詳情樣式

行為變更

• 「待追蹤」為跨階段篩選（needs_follow_up=true），不是第八個階段，也不重複畫 Contact。
• 空名單顯示引導（去 /app/radar 加入名單），不顯示空白。
• 名單固定每頁 20 筆，支援名稱／帳號搜尋、階段篩選、最近接觸／意向排序。
• 手機版維持單欄，詳情排到清單下方；不產生整頁橫向捲動。
• 安全移除需明示歷史保留，並經確認後執行。

Out of scope

• 手動合併／拆分聯絡人
• 統計（T591）

Acceptance

• 分頁與後端 filter 結果一致；待追蹤篩選不重複 Contact
• 空名單有引導
• 搜尋、移除與 live repository DELETE 有自動測試
• 指令：

cd apps/web && npm run build && npm run check:tokens && npm run test && npm run lint

Notes

同時把 T553 的「即將推出」佔位換成真頁。2026-08-12 依首次使用回饋，由八格改為單一工作清單：避免待追蹤重複 Contact，也避免名單多時橫向溢出；詳情固定在右側（手機改排在下方），階段改用單一選單。