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）。
6.1 KiB
6.1 KiB
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 節。