docs: Update TASKPLAN_FRONTEND and FRONTEND_HANDOFF_SCHEMA_V2 - mark Schema v2 as complete

2026-03-30 02:39:58 +08:00
parent c4b9789df7
commit 23baceed71
2 changed files with 122 additions and 81 deletions
--- 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`
--- 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] 與後端契約文件一致 ✅