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
6.1 KiB
Markdown
111 lines
6.1 KiB
Markdown
# 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 節。
|