member-platform/docs/TASKPLAN_FRONTEND.md

Frontend TaskPlan

目標

完成 member.ose.tw 前端（Vue3 + JS + Vite + Element Plus + Tailwind），支援 OIDC 登入、個人資料查看、權限管理（Schema v2）。

Phase 1: 基礎框架 ✅

• Vite + Vue3 專案結構
• Element Plus + Tailwind 基礎接入
• Router 與頁面骨架
• Pinia store（auth + permission）
• Axios 分離 user/admin client
• Production build 可通過

Phase 2: OIDC 登入流程 ✅

• LoginPage（OIDC 前往按鈕，跳轉 Authentik）
• AuthCallbackPage（接收 code，交換 access_token）
• Token 自動存儲與路由守衛
• 401 時自動導向重新登入

Phase 3: 用戶資訊與權限 ✅

• MePage（GET /me 顯示個人資料）
• PermissionSnapshotPage（GET /me/permissions/snapshot）
• 表格新增 system 欄位（Schema v2）

Phase 4: 管理員授權（v1） ✅

• PermissionAdminPage（直接 grant/revoke 使用者）
• Payload 新增 system 必填、module 改為選填
• scope_type 改為 company/site 下拉選單

Phase 5: Schema v2 管理頁面 ✅

• API 層：systems、modules、companies、sites、members、permission-groups
• Store：admin.js（統一管理公共清單）
• 6 個新管理頁面：
  • /admin/systems（系統 CRUD）
  • /admin/modules（模組 CRUD）
  • /admin/companies（公司 CRUD）
  • /admin/sites（站台 CRUD）
  • /admin/members（會員 CRUD + 指派群組）
  • /admin/permission-groups（群組 CRUD + 群組授權 + 群組權限列表）
• 導覽列加入管理員群組下拉菜單

進行中（下一階段）

• 組織與會員管理（ORG_MEMBER_MANAGEMENT_PLAN.md）
• 路由守衛策略完善（是否限制某些管理頁）
• 錯誤訊息 i18n 與統一顯示格式

待辦（上線前）

• 增加 e2e / UI smoke 測試
• 優化 bundle size（目前 main chunk 1.2MB，需考慮 lazy loading）
• 加入環境切換策略（dev/staging/prod）
• 加入登入來源與 token 取得說明頁

驗收條件（Schema v2）

• 未登入時導向登入頁 → OIDC 流程 ✅
• 登入後可穩定讀取 /me 與快照 ✅
• 可新增 system/module/company/site ✅
• 可做用戶直接 grant/revoke（新 payload） ✅
• 可建立 permission-group，並從會員頁指派群組，做群組 grant/revoke ✅
• /me/permissions/snapshot 表格可顯示 system + module + action ✅
• 與後端契約文件一致 ✅