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

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

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

## Notes

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