# Wireframe — `/login`

> 文字版 wireframe，供 Frontend Agent 參考實作。Phase 0 雛形範圍。

---

## 佈局（Desktop ≥ 1024px）

```
┌────────────────────────────────────────────────────────────────┐
│                       背景：bg-background                         │
│                                                                 │
│                                                                 │
│                                                                 │
│                  ┌──────────────────────────┐                   │
│                  │   [48x48 Logo rounded]    │                   │
│                  │      visionA Cloud         │                   │
│                  │    Edge AI Platform         │                   │
│                  └──────────────────────────┘                   │
│                                                                 │
│            ┌────────────────────────────────────────┐           │
│            │  Card (w-full, py-8 px-6)              │           │
│            │                                         │           │
│            │  Label: Email                           │           │
│            │  ┌───────────────────────────────────┐ │           │
│            │  │ Input type=email                   │ │           │
│            │  │ placeholder: you@example.com       │ │           │
│            │  │ autoComplete=email required        │ │           │
│            │  └───────────────────────────────────┘ │           │
│            │                                         │           │
│            │  Label: 密碼                             │           │
│            │  ┌───────────────────────────────────┐ │           │
│            │  │ Input type=password                │ │           │
│            │  │ autoComplete=current-password       │ │           │
│            │  │ required                            │ │           │
│            │  └───────────────────────────────────┘ │           │
│            │                                         │           │
│            │  ┌───────────────────────────────────┐ │           │
│            │  │ Button variant=default w-full     │ │           │
│            │  │ 登入                               │ │           │
│            │  └───────────────────────────────────┘ │           │
│            │                                         │           │
│            │  ─────── 還沒有帳號？ ───────           │           │
│            │  (Separator 左右 + 中央文字)             │           │
│            │                                         │           │
│            │  ┌───────────────────────────────────┐ │           │
│            │  │ Link → /register                   │ │           │
│            │  │ Button variant=outline w-full      │ │           │
│            │  │ 建立新帳號                          │ │           │
│            │  └───────────────────────────────────┘ │           │
│            └────────────────────────────────────────┘           │
│                                                                 │
│                忘記密碼？ (link disabled)  |  語言：繁中 ▾           │
│                                                                 │
│                                                                 │
└────────────────────────────────────────────────────────────────┘
```

---

## 關鍵尺寸

- 容器寬度：`max-w-md`（448px）
- 水平 padding：`px-4`
- 垂直間距：品牌區與 Card 之間 `mt-8`，Card 與底部連結之間 `mt-4`
- Card 內部：`gap-y-4`
- Logo：`h-12 w-12 rounded-lg`
- 品牌文字：`text-2xl font-bold` 主標 + `text-sm text-muted-foreground` 副標

---

## 響應式

- Mobile（< 640px）：結構不變，`px-4` 確保左右 padding
- Tablet / Desktop：結構不變，置中

---

## 互動

| 元素 | 行為 |
|------|------|
| Email Input | 聚焦顯示 ring；Tab 移到 Password |
| Password Input | 聚焦顯示 ring；Enter 提交表單 |
| 登入 Button | click / Enter 觸發 `handleLogin`；Phase 0 直接 `router.push('/')` |
| 建立新帳號 | Link 導航到 `/register` |
| 忘記密碼？ | Phase 0 disabled |
| 語言切換 | Select 切換後 store 更新，整頁重新渲染 |

---

## Dark Mode

自動跟隨系統（`ThemeSync`），無特殊處理。

---

## 無障礙

- Form 提交靠 `<form onSubmit>`（可按 Enter）
- Input Label 用 `<Label htmlFor>`
- Button 有明確文字，無需 `aria-label`
- Tab 順序：Email → Password → 登入 → 建立新帳號 → 忘記密碼 → 語言切換
- Skip link：Phase 1+ 再加

---

## 連結到的 i18n

見 `flows/flow-auth.md` 第 3.6 節。