template-monorepo/frontend/README.md

Gateway Frontend

一般使用者前台 + 簡易管理後台，對應本 repo 的 Gateway API。

技術

• Vite + React + TypeScript + React Router
• 無 UI 框架，表單與頁面導覽即可日常使用

啟動（推薦一鍵後端）

# 終端 1：後端全套（首次約 1–2 分鐘，等 ZITADEL 起來）
make dev-up

# 終端 2：前端
make frontend-dev

開啟 http://localhost:5173 · 註冊 OTP 到 http://localhost:8025（MailHog）

關閉：make dev-down

頁面結構

使用者前台

路徑	功能
/login	登入
/register	註冊（寄 Email OTP）
/register/confirm	輸入 6 碼完成註冊
/app	首頁（個人摘要、驗證狀態、角色）
/app/profile	編輯顯示名稱、語系、幣別、電話
/app/security	商業 Email/手機驗證、TOTP 綁定

管理後台（需 tenant_admin 或 tenant_owner）

路徑	功能
/admin	總覽、Policy 重載
/admin/roles	角色列表、新增、改名、刪除
/admin/users	依 UID 查詢 / 指派 / 撤銷角色

有管理權限時，使用者前台頂部會出現「管理後台」連結。

本機預設

• 租戶：k6-tenant
• 邀請碼：K6INVITE（需先 make k6-seed-fixtures 或對應 Mongo 資料）
• OTP：開發環境到 MailHog http://localhost:8025 查看

取得管理員權限

make dev-up 會自動建立原始管理員並寫入 Mongo：

欄位	值
Email	admin@k6.local
密碼	Admin-Pass-1!
租戶	k6-tenant
角色	tenant_admin

登入後頂部會出現「管理後台」，或在首頁 /app 的「權限管理」卡片進入。

手動重跑 seed（冪等）：

make dev-seed-admin

環境變數

變數	說明
VITE_API_BASE	API 根網址；留空則走 Vite proxy /api → :8888

建置

npm run build   # → dist/