# Wireframe — `/account`

> 文字版 wireframe。Phase 0 單頁 stub，Phase 1 拆多頁。

---

## 佈局（Desktop）

```
┌────────────────────────────────────────────────────────────────┐
│ [Sidebar]  [Header]                                             │
│ ──────────────────────────────────────────────────────────────  │
│                                                                 │
│   帳號設定                                                        │
│   管理你的個人資料與偏好                                           │
│                                                                 │
│   ┌───────────────────────────────────────────────────────┐    │
│   │ Card: 個人資料                                         │    │
│   │                                                        │    │
│   │ Email       jim@example.com (readonly, bg-muted)       │    │
│   │                                                        │    │
│   │ 顯示名稱     [Jim Chen____________] [儲存 Button]        │    │
│   │                                                        │    │
│   └───────────────────────────────────────────────────────┘    │
│                                                                 │
│   ┌───────────────────────────────────────────────────────┐    │
│   │ Card: 已配對的裝置                                       │    │
│   │                                                        │    │
│   │ ┌────────────────────────────────────────────────────┐│    │
│   │ │ Kneron KL520 — office-mac                           ││    │
│   │ │ 配對於 2026-04-18  最後心跳 2 分鐘前                  ││    │
│   │ │                              [🟢 在線] [解除配對]    ││    │
│   │ └────────────────────────────────────────────────────┘│    │
│   │ ┌────────────────────────────────────────────────────┐│    │
│   │ │ Kneron KL720 — home-pi                              ││    │
│   │ │ 配對於 2026-04-21  最後心跳 5 天前                   ││    │
│   │ │                             [⚪ 離線] [解除配對]     ││    │
│   │ └────────────────────────────────────────────────────┘│    │
│   │                                                        │    │
│   │ [+ 配對新裝置] → /devices/pair                          │    │
│   └───────────────────────────────────────────────────────┘    │
│                                                                 │
│   ┌───────────────────────────────────────────────────────┐    │
│   │ Card: 偏好設定                                         │    │
│   │ (此區段可能與 /settings 重複，Phase 0 暫 skip 或只做一個)│    │
│   └───────────────────────────────────────────────────────┘    │
│                                                                 │
│   ┌───────────────────────────────────────────────────────┐    │
│   │ Card: 危險區（Danger Zone）                              │    │
│   │ border: border-destructive/50                          │    │
│   │                                                        │    │
│   │ 登出此瀏覽器                  [登出]                    │    │
│   │ ─────────                                               │    │
│   │ 刪除帳號                     [刪除帳號 (destructive)]   │    │
│   │ 一旦刪除，此操作無法復原                                 │    │
│   └───────────────────────────────────────────────────────┘    │
│                                                                 │
└────────────────────────────────────────────────────────────────┘
```

---

## 互動（Phase 0 簡化）

| 操作 | Phase 0 行為 | Phase 1 行為 |
|------|-------------|-------------|
| 儲存顯示名稱 | toast「此功能開發中」 | 真實 API 呼叫 |
| 解除配對 | AlertDialog 確認後 → toast「此功能開發中」 | 呼叫 `DELETE /api/devices/:id` |
| 配對新裝置 | 跳 `/devices/pair` | 同 |
| 登出 | `useAuthStore.logout()` → 跳 `/login` | 同 + 呼叫 server logout |
| 刪除帳號 | AlertDialog → toast「此功能開發中」 | 完整流程 |

---

## 資料來源

**Phase 0（Mock 資料）：**
- `user.email`：從 `useAuthStore` 讀
- `user.displayName`：從 `localStorage.displayName` 讀（若無，預設 Email 前綴）
- 配對裝置列表：從 `useDeviceStore` 讀

**Phase 1：**
- 改為 `GET /api/account/me` 拉真實資料
- 裝置列表 `GET /api/devices?owner=me`

---

## 響應式

- Desktop：Card 單欄 `max-w-3xl`
- Tablet：同 Desktop
- Mobile：Card 撐滿，`px-4`

---

## Phase 1 TODO

拆成以下子路由：

| 子路由 | 內容 |
|-------|------|
| `/account/profile` | Email、顯示名稱、頭像、密碼變更 |
| `/account/devices` | 已配對裝置管理 |
| `/account/api-keys` | Personal Access Tokens（for CLI / API 使用） |
| `/account/sessions` | 登入過的裝置 / 瀏覽器，可撤銷 |
| `/account/preferences` | 語言、主題、通知偏好（與 /settings 合併？）|
| `/account/billing` | 訂閱方案、付款方式、發票 |
| `/account/danger` | 刪除帳號、匯出資料（GDPR） |

導航：Tabs 或 Sidebar 副選單皆可。