member-platform/docs/FRONTEND_ARCHITECTURE.md

member.ose.tw 前端架構（Vue）

1. 角色定位

• 網域：member.ose.tw
• 功能：會員中心前台（管理 users/公司/站台/權限）
• 注意：密碼流程不在這裡做，自動導 Authentik flow

2. 技術棧

• Vue 3 + Vite
• Element Plus
• Tailwind CSS
• Vue Router
• Pinia（建議）

3. 建議目錄

• frontend/src/main.ts
• frontend/src/router/
• frontend/src/stores/
• frontend/src/api/（axios client + modules）
• frontend/src/pages/
  • users/
  • companies/
  • sites/
  • permissions/
• frontend/src/components/

4. 第一版頁面

• 使用者列表/搜尋
• 公司列表
• 站台列表
• 權限指派（user x scope x module x action）

5. 權限與登入

• 透過 Authentik OIDC 登入
• 前端持有 backend session/token，不直接操作 Authentik admin API
• 「修改密碼 / 忘記密碼」按鈕導 Authentik 使用者流程頁

6. API 串接

• VITE_API_BASE_URL=https://memberapi.ose.tw
• 所有請求帶上必要 auth header
• 管理操作走 memberapi 的 admin 路由

7. UI/互動規則

• Element Plus 做表單/表格/對話框
• Tailwind 做 spacing/layout/快速樣式
• 權限編輯畫面要清楚顯示：
  • scope_type（company/site）
  • scope_id
  • module
  • action（view/edit）

8. 第一版不做項目

• 不做密碼重設畫面
• 不做複雜儀表板
• 不做跨系統 SSO 管理 UI