RoleUsersView 功能規格文檔
概述
RoleUsersView 是一個使用者角色管理介面，允許管理員查看、管理和修改系統中使用者的角色分配。該頁面顯示分頁的使用者列表及其相關角色，並提供各種管理操作。
核心功能
1. 使用者列表展示
- 分頁顯示：支援大量使用者資料的分頁瀏覽
- 排序功能：可按 Email、姓名、創建時間排序
- 搜尋篩選：支援按 Email 和姓名搜尋
- 角色篩選：可按角色類型篩選使用者
2. 表格欄位
| 欄位 | 功能 | 互動性 |
|---|---|---|
| 選擇 | 批量操作選取 | 單選/全選 |
| User ID | 使用者識別 | 可複製 |
| 使用者信箱 | 可排序 | |
| 姓名 | 使用者姓名 | 可排序 |
| 角色 | 現有角色列表 | 顯示 |
| 創建時間 | 註冊時間 | 可排序 |
| 操作 | 行動選單 | 下拉選單 |
主要操作
個別使用者操作
- 查看詳情：導航至使用者詳細頁面
- 修改角色：開啟角色分配對話框（主要功能）
- 匯出詳情：匯出個別使用者資料（佔位符）
- 刪除使用者：軟刪除使用者（佔位符）
批量操作
當選取多個使用者時可執行：
- 批量變更角色（佔位符）
- 匯出清單（佔位符）
- 刪除所選（佔位符）
角色分配工作流程
1. 觸發條件
點擊個別行的「修改角色」按鈕
2. 對話框流程
- 開啟對話框：載入使用者當前角色並預選
- 角色選擇：顯示所有可用角色的複選框清單
- 確認變更：比較新舊角色並執行 API 呼叫
- 結果處理：成功時重新整理列表，失敗時顯示錯誤
3. API 操作
- 使用
setUserRole(userId, roleId)新增角色 - 使用
removeUserRole(userId, roleId)移除角色 - 支援原子操作和錯誤回滾
權限控制
| 操作 | 管理員 | 支援人員 | 一般使用者 |
|---|---|---|---|
| 查看使用者列表 | ✅ | ✅ | ❌ |
| 修改使用者角色 | ✅ | ✅ | ❌ |
| 刪除使用者 | ✅ | ❌ | ❌ |
| 批量操作 | ✅ | ✅ | ❌ |
| 匯出資料 | ✅ | ✅ | ❌ |
技術實作
資料管理
- API：使用 Supabase 與
user_details檢視 - 分頁：伺服器端分頁（offset/limit）
- 篩選：資料庫層級篩選
- 狀態管理：Vue 3 Composition API
效能考量
- 角色資料快取避免重複 API 呼叫
- 搜尋操作防抖處理
- 錯誤處理和使用者回饋
目前限制
已實作功能
- ✅ 使用者列表展示和分頁
- ✅ 搜尋和篩選功能
- ✅ 角色分配對話框
- ✅ 個別角色修改
待實作功能（佔位符）
- ❌ 批量角色變更
- ❌ 使用者匯出功能
- ❌ 使用者刪除功能
- ❌ 進階篩選選項
測試策略
Unit Tests
- Composables 邏輯測試
- 資料轉換和驗證函數
- 錯誤處理機制
Integration Tests
- 組件互動測試
- 角色分配對話框流程
- 分頁和搜尋功能
- API 整合測試
E2E Tests
- 完整使用者流程
- 權限控制驗證
- 錯誤場景處理
測試覆蓋率目標：Unit Tests 95%+, Integration Tests 85%+, E2E Tests 60%+
維護指南
新增功能時
- 確保權限控制正確實作
- 加入相應的測試覆蓋
- 更新此文檔
除錯時
- 檢查 API 回應和錯誤處理
- 驗證權限矩陣設定
- 確認快取策略運作正常
此文檔為開發和維護 RoleUsersView 的核心指南，詳細實作細節請參考相關代碼檔案。