jim800121chen
fb7da5d180
依 autoflow-agent workspace v2 設計把 PRD / 設計 / 架構 / 交付類 共享文件從個人層 .autoflow/（ignored）搬到 docs/autoflow/（進 git）， 讓團隊可共享產品與架構文件，個人層只留 progress / review / testing 等 per-branch 筆記。 - 02-prd/ 21 個檔（PRD、features、market-analysis 等） - 03-design/ 18 個檔（design-spec、wireframes、flows 等） - 04-architecture/ 31 個檔（TDD、design-doc、ADR×14、API 規格等） - 07-delivery/ 3 個檔（project-summary、phase-0.6-handover、stage-deployment-setup） 合計 73 檔。原檔已從 .autoflow/ 移除（migration 工具執行 git mv， 但因 .autoflow/ 在 .gitignore 中、git 將此操作視為新增、無 rename history）。
111 lines
7.1 KiB
Markdown
111 lines
7.1 KiB
Markdown
# 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 副選單皆可。
|