output/mockups.md

QR Code Manager — UI Mockups

Date: 2026-07-12 Status: draft

---

項目

QR Code 圖片管理工具 — mobile-only web app

• Express + SQLite + HTML
• Port: 5052
• 部署: Zeabur

---

功能頁面

1. 首頁 / 瀏覽頁

• Category filter tabs（All / Restaurant / Payment / Website...）
• 2-column card grid：QR 縮圖 + 類別標籤 + 名稱 + URL + 日期
• Bottom tab bar：Home / Upload(+) / Search / Settings

2. 上傳頁

• 虛線框 upload zone（拖拽 / 點擊上傳）
• Client-side jsQR 即時解碼
• Vision AI 分析圖片內容
• 自動分類 + 編輯 label / tags / notes
• Save 按鈕

3. 詳情頁

• 大 QR 圖片展示
• 完整 metadata：分類、標籤、URL、Vision 描述
• 操作：Open URL / Edit / Share / Delete

---

Mockups

Home / Browse

Upload

Detail