70 lines
3.0 KiB
Markdown
70 lines
3.0 KiB
Markdown
|
# T515 — fe-service-profile-tab-brands
|
|||
|
|
|
|||
|
|
> Status: `done`
|
|||
|
|
> Milestone: `M1`
|
|||
|
|
> Kind: `feat`
|
|||
|
|
> Est. change: `~180 lines`
|
|||
|
|
|
|||
|
|
## Goal
|
|||
|
|
|
|||
|
|
完成後系統應：`/app/brands` 多一個「服務檔案」分頁，可完整編修服務檔案並存檔。
|
|||
|
|
|
|||
|
|
## Depends on
|
|||
|
|
|
|||
|
|
- T502、T511
|
|||
|
|
|
|||
|
|
## Inputs
|
|||
|
|
|
|||
|
|
- Spec：`../spec.md` §4.1、§5.3
|
|||
|
|
- 既有：`apps/web/src/pages/BrandsPage.tsx`、`src/components/ui/`、`src/styles/radar.css`
|
|||
|
|
|
|||
|
|
## Outputs
|
|||
|
|
|
|||
|
|
### 程式變更（預期路徑）
|
|||
|
|
|
|||
|
|
| 路徑 | 動作 | 說明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| `apps/web/src/pages/BrandsPage.tsx` | edit | 加分頁切換，掛入服務檔案面板 |
|
|||
|
|
| `apps/web/src/components/radar/ServiceProfileForm.tsx` | add | 服務項目＋價格區間、案例、不能說的內容、FAQ、服務地區＋可遠端、空檔、語氣備註 |
|
|||
|
|
| `apps/web/src/data/live/radarRepos.ts` | edit | service-profile GET／PUT 實作 |
|
|||
|
|
| `apps/web/src/styles/radar.css` | edit | 表單樣式 |
|
|||
|
|
|
|||
|
|
### 行為變更
|
|||
|
|
|
|||
|
|
- 尚未建立時顯示引導文案與必填提示；存檔成功後顯示更新時間。
|
|||
|
|
- 「不能說的內容」明示用途：會硬性過濾 AI 回覆用詞。
|
|||
|
|
- 驗證錯誤就地顯示後端 message，不吞錯。
|
|||
|
|
|
|||
|
|
## Out of scope
|
|||
|
|
|
|||
|
|
- 雷達訂閱管理（T516）
|
|||
|
|
- 側欄新增項目（T553）
|
|||
|
|
|
|||
|
|
## Acceptance
|
|||
|
|
|
|||
|
|
- [x] 填寫→存檔→重載欄位一致（mock 與 live 皆可）
|
|||
|
|
- [x] 新樣式只進 `radar.css`
|
|||
|
|
- [x] 指令：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd apps/web && npm run build && npm run check:tokens && npm run test && npm run lint
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Notes
|
|||
|
|
|
|||
|
|
放在 `/app/brands` 而非新側欄項，是為了不讓側欄再膨脹（spec §5.3）。
|
|||
|
|
|
|||
|
|
### 實作落點
|
|||
|
|
|
|||
|
|
- `apps/web/src/components/radar/ServiceProfileForm.tsx`：服務項目（可增刪）＋價格區間、服務區域 chip＋可遠端、禁語（一行一條）、案例、FAQ、可接案時間、口吻備註。
|
|||
|
|
- `apps/web/src/components/radar/serviceAreas.ts`：22 個縣市代碼表，與後端 `radar/domain/service_profile.go` 的 `serviceAreaCodes` 一致；後端會拒絕表外代碼，所以不自行擴充。
|
|||
|
|
- `apps/web/src/pages/BrandsPage.tsx`：分頁改成**頁層**（品牌庫｜服務檔案），不是品牌內分頁——服務檔案是每會員一份，掛在某個品牌底下會讓人以為可以一牌一份。
|
|||
|
|
- `apps/web/src/styles/radar.css`：`.hb-radar-row`／`.hb-radar-area-grid`／`.hb-radar-chip.is-active`／`.hb-radar-check`／`.hb-radar-actions`。
|
|||
|
|
|
|||
|
|
### 決策
|
|||
|
|
|
|||
|
|
- **驗證錯誤顯示後端原句**：`apiErrors.ts` 把 `400100` 加進「優先顯示後端 message」的碼單。後端會回 `services[0].name required` 這種指到欄位的訊息，比通用句有用；訊息太短（<24 字元且非中文）時仍退回語言包。
|
|||
|
|
- **價格留空 = 面議**：空字串轉 `undefined` 而非 `0`，否則後端會收到「免費」。
|
|||
|
|
- **禁語一行一條**：禁語本身可能含逗號，用換行切比逗號安全。
|
|||
|
|
- 測試 `ServiceProfileForm.test.tsx` 蓋：首次引導文案、填寫→存檔→重載一致、空價格不送 0、後端驗證訊息原樣顯示。
|