# Delivery Radar v2 改版計畫

## 改版目標

以外送員為主：打開首頁即可用地址查附近雷區；登入後可管理自己通報過的雷區。

## 保留不變

- 技術棧（Vue3 + Vite + Vue Router + Pinia + Axios + Leaflet + Bootstrap 5 / PHP 8.3 API + JWT + MySQL 8）
- 通報、評論、收藏、後台管理

## 現況與缺口

| v2 需求 | 現況 | 缺口 |
|--------|------|------|
| 首頁輸入地址搜尋雷區 | 首頁只有地圖 + 類型／等級篩選 | 無地址搜尋欄、無 forward geocode、API 只支援地圖 bbox |
| 登入 | 已有 login / register / JWT | 幾乎不用重做 |
| 查看個人回報 | 只有「我的收藏」「個人資料」 | 無「我的回報」列表 |
| 修改／刪除個人回報 | API 已有 PUT / DELETE | 前端無編輯頁、詳情頁無擁有者按鈕 |

### 已有／需新增／需調整

- ✅ 已有：JWT、註冊登入、通報、地圖、評論、收藏、後台、ReportController update/delete
- 🆕 需新增：首頁地址搜尋、forward geocode、nearby 搜尋 API、`/my-reports`、編輯頁
- 🔧 需調整：`HomeView`、`FilterBar`（或新 `AddressSearchBar`）、`ReportDetailView`（擁有者顯示編輯／刪除）、`DefaultLayout` 導覽

## 功能需求

### 1. 首頁地址搜尋（訪客可用）

採用 **地址 → 座標 → 半徑搜尋** 方案（較符合外送「這個地址附近有沒有雷」的使用情境）。

流程：

1. 使用者輸入地址（例：台北市大安區復興南路一段）
2. 呼叫 `GET /api/geocode/forward?q=...`（Nominatim search）取得 lat/lng
3. 以座標為中心、半徑查詢已核准雷區：`GET /api/reports/nearby?lat=&lng=&radius=500`
4. 地圖自動移動到該點並顯示標記
5. 側邊或下方列出搜尋結果（標題、類型、等級、距離）

規格細節：

- 預設搜尋半徑：500m（可調）
- 搜尋與現有類型／等級篩選並存
- 無結果時提示「附近尚無回報」，引導登入後通報
- Nominatim 使用限制：需 User-Agent、建議 debounce 避免過度請求

### 2. 我的回報（需登入）

| 項目 | 規格 |
|------|------|
| 新路由 | `/my-reports` |
| 新 API | `GET /api/reports/mine`（JWT，依 `user_id` 篩選） |
| 列表欄位 | 標題、地址、類型、等級、狀態、建立時間 |
| 操作 | 編輯 → `/reports/:id/edit`；刪除 → 確認後 `DELETE` |
| 編輯頁 | 複用 `ReportCreateView` 邏輯，或抽成 `ReportForm.vue` |
| 導覽列 | `DefaultLayout` 加「我的回報」連結 |

編輯欄位同通報表單：標題、類型、描述、地址、經緯度、危險等級、照片。

## API 新增

| 方法 | 路徑 | 說明 | 驗證 |
|------|------|------|------|
| GET | `/api/geocode/forward?q={地址}` | 地址轉經緯度 | 無 |
| GET | `/api/reports/nearby?lat=&lng=&radius=500&type_id=&level=` | 半徑內雷區列表 | 無 |
| GET | `/api/reports/mine` | 當前使用者的回報列表 | JWT |

既有 API 沿用：

- `PUT /api/reports/{id}` — 編輯（擁有者或 admin）
- `DELETE /api/reports/{id}` — 刪除（擁有者或 admin）

## 前端變更

| 檔案／路由 | 變更內容 |
|-----------|----------|
| `HomeView.vue` | 加入 `AddressSearchBar`、搜尋結果區、地圖定位 |
| `FilterBar.vue` 或新元件 | 地址搜尋列（可獨立為 `AddressSearchBar.vue`） |
| `/my-reports` | 新頁面 `MyReportsView.vue` |
| `/reports/:id/edit` | 新頁面 `ReportEditView.vue` |
| `DefaultLayout.vue` | 導覽加「我的回報」 |
| `ReportDetailView.vue` | 擁有者可見編輯／刪除按鈕 |

## UX 建議

1. 首頁搜尋列要夠顯眼：放在 navbar 下方或地圖上方固定，placeholder 如「輸入送餐地址，查附近雷區」
2. 搜尋與地圖篩選並存：地址搜尋後，類型／等級篩選仍作用於結果
3. 編輯頁與詳情頁都要有刪除入口，避免使用者找不到
4. 未登入點「通報」導向 login 並帶 `redirect`（router 已支援）

## 實作順序

請依照以下順序執行，**每完成一個 Phase 再詢問是否繼續**。

### Phase A：首頁地址搜尋（不需登入）

- `GeocodeController::forward()`
- `ReportModel::listNearby(lat, lng, radius)`
- `GET /api/reports/nearby`
- `HomeView` 搜尋列 + 結果列表 + 地圖定位

### Phase B：我的回報（需登入）

- `GET /api/reports/mine`
- `MyReportsView.vue` + 路由
- `DefaultLayout` 導覽連結

### Phase C：編輯／刪除 UI

- `ReportEditView.vue`（複用表單）
- `ReportDetailView` 擁有者按鈕
- 刪除確認 modal

### Phase D（可選）：體驗優化

- 搜尋 debounce、搜尋紀錄、地址 autocomplete