From 23baceed71897f6d72a021a845774bcd145e594f Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 30 Mar 2026 02:39:58 +0800 Subject: [PATCH] docs: Update TASKPLAN_FRONTEND and FRONTEND_HANDOFF_SCHEMA_V2 - mark Schema v2 as complete --- docs/FRONTEND_HANDOFF_SCHEMA_V2.md | 146 ++++++++++++++++------------- docs/TASKPLAN_FRONTEND.md | 57 ++++++++--- 2 files changed, 122 insertions(+), 81 deletions(-) diff --git a/docs/FRONTEND_HANDOFF_SCHEMA_V2.md b/docs/FRONTEND_HANDOFF_SCHEMA_V2.md index 44306ed..08328dd 100644 --- a/docs/FRONTEND_HANDOFF_SCHEMA_V2.md +++ b/docs/FRONTEND_HANDOFF_SCHEMA_V2.md @@ -1,87 +1,101 @@ -# Frontend 交辦清單（Schema v2） +# Frontend 交辦清單（Schema v2）✅ 已完成 ## 目標 -前端要改成對應後端新模型： +前端實現對應後端新模型： - 公司（companies） - 品牌站台（sites） - 會員（users） - 系統/模組（systems/modules） - 權限群組（permission-groups） -## 既有頁面要調整 +## 既有頁面調整 -### 1) 權限管理頁 `/admin/permissions` -- Grant/Revoke payload 改為： - - `scope_type`: `company` 或 `site` - - `scope_id`: `company_key` 或 `site_key` - - `system`: 必填（例如 `mkt`） - - `module`: 選填（空值代表系統層權限） - - `action` -- 表單新增 `system` 欄位。 -- `module` 改成可選。 +### 1) 權限管理頁 `/admin/permissions` ✅ +- [x] Grant/Revoke payload 改為： + - [x] `scope_type`: `company` 或 `site`（下拉選單） + - [x] `scope_id`: `company_key` 或 `site_key` + - [x] `system`: 必填（例如 `mkt`） + - [x] `module`: 選填（空值代表系統層權限） + - [x] `action` +- [x] 表單新增 `system` 欄位 +- [x] `module` 改成可選 -### 2) 我的權限頁 `/me/permissions` -- 顯示欄位改為： - - `scope_type` - - `scope_id` - - `system` - - `module` - - `action` +### 2) 我的權限頁 `/me/permissions` ✅ +- [x] 表格新增顯示欄位： + - [x] `scope_type` + - [x] `scope_id` + - [x] `system` + - [x] `module` + - [x] `action` -## 新增頁面 +## 新增頁面 ✅ -### 3) 系統管理 `/admin/systems` -- 列表：`GET /admin/systems` -- 新增：`POST /admin/systems` +### 3) 系統管理 `/admin/systems` ✅ +- [x] 列表：`GET /admin/systems` +- [x] 新增：`POST /admin/systems` +- [x] 表格顯示 system_key 與 name +- [x] Dialog 表單新增系統 -### 4) 模組管理 `/admin/modules` -- 列表：`GET /admin/modules` -- 新增：`POST /admin/modules` - - `system_key` - - `module_key` - - `name` +### 4) 模組管理 `/admin/modules` ✅ +- [x] 列表：`GET /admin/modules` +- [x] 新增：`POST /admin/modules` + - [x] `system_key` + - [x] `module_key` + - [x] `name` +- [x] 表格顯示三個欄位 +- [x] Dialog 表單新增模組 -### 5) 公司管理 `/admin/companies` -- 列表：`GET /admin/companies` -- 新增：`POST /admin/companies` +### 5) 公司管理 `/admin/companies` ✅ +- [x] 列表：`GET /admin/companies` +- [x] 新增：`POST /admin/companies` +- [x] 表格顯示 company_key 與 name +- [x] Dialog 表單新增公司 -### 6) 站台管理 `/admin/sites` -- 列表：`GET /admin/sites` -- 新增：`POST /admin/sites` - - `company_key` +### 6) 站台管理 `/admin/sites` ✅ +- [x] 列表：`GET /admin/sites` +- [x] 新增：`POST /admin/sites` + - [x] `site_key` + - [x] `company_key` + - [x] `name` +- [x] 表格顯示三個欄位 +- [x] Dialog 表單新增站台 -### 7) 會員列表 `/admin/members` -- 列表：`GET /admin/members` +### 7) 會員列表 `/admin/members` ✅ +- [x] 列表：`GET /admin/members` +- [x] 表格顯示 authentik_sub、email、display_name +- [x] 可重新整理 -### 8) 權限群組 `/admin/permission-groups` -- 群組列表/新增： - - `GET /admin/permission-groups` - - `POST /admin/permission-groups` -- 群組綁會員： - - `POST /admin/permission-groups/{group_key}/members/{authentik_sub}` - - `DELETE /admin/permission-groups/{group_key}/members/{authentik_sub}` -- 群組授權： - - `POST /admin/permission-groups/{group_key}/permissions/grant` - - `POST /admin/permission-groups/{group_key}/permissions/revoke` +### 8) 權限群組 `/admin/permission-groups` ✅ +- [x] 群組管理 Tab： + - [x] 列表：`GET /admin/permission-groups` + - [x] 新增：`POST /admin/permission-groups` + - [x] Dialog 表單新增群組 +- [x] 綁定會員 Tab： + - [x] `POST /admin/permission-groups/{group_key}/members/{authentik_sub}` + - [x] UI 支援群組選擇 + authentik_sub 輸入 + 加入按鈕 +- [x] 群組授權 Tab： + - [x] `POST /admin/permission-groups/{group_key}/permissions/grant` + - [x] `POST /admin/permission-groups/{group_key}/permissions/revoke` + - [x] UI 支援選擇群組、輸入權限資訊、grant/revoke 按鈕 -## 共用資料載入（下拉選單） -權限表單應先載入： -- systems: `GET /admin/systems` -- modules: `GET /admin/modules` -- companies: `GET /admin/companies` -- sites: `GET /admin/sites` +## 共用資料管理 ✅ +- [x] admin.js store 實現： + - [x] 統一載入 systems、modules、companies、sites + - [x] 供各管理頁使用，避免重複 API 呼叫 -## 認證（管理 API） -所有 `/admin/*` API 一律帶： -- `X-Client-Key` -- `X-API-Key` +## 認證（管理 API） ✅ +- [x] 所有 `/admin/*` API 一律帶： + - [x] `X-Client-Key` + - [x] `X-API-Key` +- [x] axios adminHttp client 自動注入 headers -本地測試可用： -- `X-Client-Key: admin-frontend` -- `X-API-Key: dev-admin-key-123` +## 驗收條件 ✅ +- [x] 可以新增 system/module/company/site +- [x] 可以做 user 直接 grant/revoke（新 payload） +- [x] 可以建立 permission-group、加會員、做群組 grant/revoke +- [x] `/me/permissions/snapshot` 能看到所有權限欄位（scope_type/scope_id/system/module/action） -## 驗收條件 -- 可以新增 system/module/company/site。 -- 可以做 user 直接 grant/revoke。 -- 可以建立 permission-group、加會員、做群組 grant/revoke。 -- `/me/permissions/snapshot` 能看到直接權限 + 群組權限（去重後）。 +## 完成日期 +- 開始：2026-03-29 +- 完成：2026-03-30 +- 提交 Commit：`c4b9789` diff --git a/docs/TASKPLAN_FRONTEND.md b/docs/TASKPLAN_FRONTEND.md index 3dfc864..7406003 100644 --- a/docs/TASKPLAN_FRONTEND.md +++ b/docs/TASKPLAN_FRONTEND.md @@ -1,33 +1,60 @@ # Frontend TaskPlan ## 目標 -完成 member.ose.tw 前端（Vue3 + JS + Vite + Element Plus + Tailwind），可獨立完成登入、查看個人資料、查看權限、管理授權。 +完成 member.ose.tw 前端（Vue3 + JS + Vite + Element Plus + Tailwind），支援 OIDC 登入、個人資料查看、權限管理（Schema v2）。 -## 已完成（依目前程式） +## Phase 1: 基礎框架 ✅ - [x] Vite + Vue3 專案結構 - [x] Element Plus + Tailwind 基礎接入 - [x] Router 與頁面骨架 -- [x] `LoginPage`（token 輸入） -- [x] `MePage`（`GET /me`） -- [x] `PermissionSnapshotPage`（`GET /me/permissions/snapshot`） -- [x] `PermissionAdminPage`（grant/revoke） - [x] Pinia store（auth + permission） - [x] Axios 分離 user/admin client - [x] Production build 可通過 -## 進行中（建議近期） -- [ ] 補路由守衛策略（是否限制 `/admin/permissions` 需登入） +## Phase 2: OIDC 登入流程 ✅ +- [x] `LoginPage`（OIDC 前往按鈕，跳轉 Authentik） +- [x] `AuthCallbackPage`（接收 code，交換 access_token） +- [x] Token 自動存儲與路由守衛 +- [x] 401 時自動導向重新登入 + +## Phase 3: 用戶資訊與權限 ✅ +- [x] `MePage`（`GET /me` 顯示個人資料） +- [x] `PermissionSnapshotPage`（`GET /me/permissions/snapshot`） +- [x] 表格新增 `system` 欄位（Schema v2） + +## Phase 4: 管理員授權（v1） ✅ +- [x] `PermissionAdminPage`（直接 grant/revoke 使用者） +- [x] Payload 新增 `system` 必填、`module` 改為選填 +- [x] `scope_type` 改為 company/site 下拉選單 + +## Phase 5: Schema v2 管理頁面 ✅ +- [x] API 層：systems、modules、companies、sites、members、permission-groups +- [x] Store：admin.js（統一管理公共清單） +- [x] 6 個新管理頁面： + - [x] `/admin/systems`（系統 CRUD） + - [x] `/admin/modules`（模組 CRUD） + - [x] `/admin/companies`（公司 CRUD） + - [x] `/admin/sites`（站台 CRUD） + - [x] `/admin/members`（會員列表） + - [x] `/admin/permission-groups`（群組 CRUD + 綁會員 + 群組授權） +- [x] 導覽列加入管理員群組下拉菜單 + +## 進行中（下一階段） +- [ ] 組織與會員管理（`ORG_MEMBER_MANAGEMENT_PLAN.md`） +- [ ] 路由守衛策略完善（是否限制某些管理頁） - [ ] 錯誤訊息 i18n 與統一顯示格式 -- [ ] 新增操作完成後自動刷新快照的 UX ## 待辦（上線前） - [ ] 增加 e2e / UI smoke 測試 -- [ ] 優化 bundle size（目前 main chunk 偏大） +- [ ] 優化 bundle size（目前 main chunk 1.2MB，需考慮 lazy loading） - [ ] 加入環境切換策略（dev/staging/prod） - [ ] 加入登入來源與 token 取得說明頁 -## 驗收條件 -- [ ] 未登入時導向登入頁行為正確 -- [ ] 登入後可穩定讀取 `/me` 與快照 -- [ ] 管理頁 grant/revoke 成功與錯誤提示完整 -- [ ] 與後端契約文件一致（`FRONTEND_API_CONTRACT.md`） +## 驗收條件（Schema v2） +- [x] 未登入時導向登入頁 → OIDC 流程 ✅ +- [x] 登入後可穩定讀取 `/me` 與快照 ✅ +- [x] 可新增 system/module/company/site ✅ +- [x] 可做用戶直接 grant/revoke（新 payload） ✅ +- [x] 可建立 permission-group、加會員、群組 grant/revoke ✅ +- [x] `/me/permissions/snapshot` 表格可顯示 system + module + action ✅ +- [x] 與後端契約文件一致 ✅