75 lines
3.3 KiB
Markdown
75 lines
3.3 KiB
Markdown
# T516 — fe-radar-watches-page
|
||
|
||
> Status: `done`
|
||
> Milestone: `M1`
|
||
> Kind: `feat`
|
||
> Est. change: `~200 lines`
|
||
|
||
## Goal
|
||
|
||
完成後系統應：`/app/radar/watches` 可建立／編修／暫停／恢復／封存雷達訂閱，並可採用 AI 關鍵字建議。
|
||
|
||
## Depends on
|
||
|
||
- T502、T503、T513、T514
|
||
|
||
## Inputs
|
||
|
||
- Spec：`../spec.md` §4.2、§5.3、§9.1
|
||
- 既有頁面骨架：`apps/web/src/pages/ScoutPage.tsx`、路由設定 `src/App.tsx`
|
||
|
||
## Outputs
|
||
|
||
### 程式變更（預期路徑）
|
||
|
||
| 路徑 | 動作 | 說明 |
|
||
|------|------|------|
|
||
| `apps/web/src/pages/RadarWatchesPage.tsx` | add | 列表＋新增／編輯抽屜＋狀態動作 |
|
||
| `apps/web/src/components/radar/WatchSuggestPanel.tsx` | add | 建議清單，逐條採用／全採用 |
|
||
| `apps/web/src/App.tsx` | edit | 註冊 `/app/radar/watches` 路由 |
|
||
| `apps/web/src/data/live/radarRepos.ts` | edit | watches CRUD／pause／resume／suggest 實作 |
|
||
| `apps/web/src/styles/radar.css` | edit | 列表與抽屜樣式 |
|
||
|
||
### 行為變更
|
||
|
||
- 未建服務檔案時，頁面顯示引導並停用「新增」，附連結到 `/app/brands` 服務檔案分頁。
|
||
- 觸到 `max_active_watches` 時直接顯示後端 message（含上限與升級提示），不用前端自行推測文案。
|
||
- 每列顯示 `terms`、地區、狀態、`last_swept_at`。
|
||
|
||
## Out of scope
|
||
|
||
- 手動觸發即時巡的 UI（T533 提供 API，UI 併入 T552 或此頁後續）
|
||
- 今日商機頁（T551）
|
||
|
||
## Acceptance
|
||
|
||
- [x] 無服務檔案時「新增」被停用並有引導
|
||
- [x] 建立→暫停→恢復→封存的狀態變化正確反映
|
||
- [x] 指令：
|
||
|
||
```bash
|
||
cd apps/web && npm run build && npm run check:tokens && npm run test && npm run lint
|
||
```
|
||
|
||
## Notes
|
||
|
||
### 實作落點
|
||
|
||
- `apps/web/src/pages/RadarWatchesPage.tsx`：清單（關鍵字／排除詞 chip、狀態 badge、地區、`last_swept_at`）＋狀態篩選＋分頁＋新增／編輯表單。
|
||
- `apps/web/src/components/radar/WatchSuggestPanel.tsx`：按下才問 AI（避免開頁就燒 credit），逐條／全部採用，已在表單裡的詞顯示「已採用」並停用按鈕。
|
||
- `apps/web/src/App.tsx`：`/app/radar/watches` lazy 路由。側欄項在 T553。
|
||
- `apps/web/src/styles/radar.css`：`.hb-radar-form`、`.hb-radar-suggest*`。
|
||
|
||
### 決策
|
||
|
||
- **採用建議不等於建立訂閱**：建議只往表單塞字，仍要按儲存才會打 API。使用者可以先刪掉不要的再送。
|
||
- **關鍵字用換行／逗號／頓號都能分隔**：使用者常直接從別處貼一整串過來。
|
||
- **每個動作後重讀清單**：暫停／恢復會連動 `active_count` 與配額提示，局部改 state 很容易和後端對不起來。
|
||
- **配額與缺服務檔案的文案來自後端**：`403003`（含「1 of 1 on your plan」與升級提示）與 `400100` 都直接顯示後端 message，前端不自行推測上限。
|
||
- **建立失敗時表單不關**：使用者可以改成「不立刻啟用」或先去暫停別的再送。
|
||
- 封存列不再顯示任何動作按鈕（狀態機的終點），避免點了才發現不能恢復。
|
||
|
||
### 測試
|
||
|
||
`src/pages/RadarWatchesPage.test.tsx`（5 案）：無服務檔案停用新增＋指路、建立→暫停→恢復→封存的狀態與配額連動、配額滿顯示後端原句且表單留著、建議逐條採用分流到關鍵字／排除詞、建議失敗說原因。
|