feat(flow): unify member-group-permission admin workflow and docs

src/pages/admin/MembersPage.vue

@@ -30,6 +30,11 @@
       <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
         <el-form-item label="Email" prop="email"><el-input v-model="createForm.email" /></el-form-item>
         <el-form-item label="顯示名稱" prop="display_name"><el-input v-model="createForm.display_name" /></el-form-item>
+        <el-form-item label="權限群組">
+          <el-select v-model="createForm.group_keys" multiple filterable clearable style="width: 100%" placeholder="可選多個群組">
+            <el-option v-for="g in groups" :key="g.group_key" :label="`${g.name} (${g.group_key})`" :value="g.group_key" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="啟用"><el-switch v-model="createForm.is_active" /></el-form-item>
         <el-form-item label="同步 Authentik"><el-switch v-model="createForm.sync_to_authentik" /></el-form-item>
       </el-form>
@@ -44,6 +49,11 @@
         <el-form-item label="Authentik Sub"><el-input :model-value="editForm.authentik_sub" disabled /></el-form-item>
         <el-form-item label="Email"><el-input v-model="editForm.email" /></el-form-item>
         <el-form-item label="顯示名稱"><el-input v-model="editForm.display_name" /></el-form-item>
+        <el-form-item label="權限群組">
+          <el-select v-model="editForm.group_keys" multiple filterable clearable style="width: 100%" placeholder="可選多個群組">
+            <el-option v-for="g in groups" :key="g.group_key" :label="`${g.name} (${g.group_key})`" :value="g.group_key" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="啟用"><el-switch v-model="editForm.is_active" /></el-form-item>
         <el-form-item label="同步 Authentik"><el-switch v-model="editForm.sync_to_authentik" /></el-form-item>
       </el-form>
@@ -59,9 +69,17 @@
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Refresh } from '@element-plus/icons-vue'
-import { getMembers, upsertMember, updateMember } from '@/api/members'
+import {
+  getMembers,
+  upsertMember,
+  updateMember,
+  getMemberPermissionGroups,
+  setMemberPermissionGroups
+} from '@/api/members'
+import { getPermissionGroups } from '@/api/permission-groups'
 
 const members = ref([])
+const groups = ref([])
 const loading = ref(false)
 const error = ref(false)
 const errorMsg = ref('')
@@ -72,6 +90,7 @@ const creating = ref(false)
 const createForm = ref({
   email: '',
   display_name: '',
+  group_keys: [],
   is_active: true,
   sync_to_authentik: true
 })
@@ -85,6 +104,7 @@ const editForm = ref({
   authentik_sub: '',
   email: '',
   display_name: '',
+  group_keys: [],
   is_active: true,
   sync_to_authentik: true
 })
@@ -93,8 +113,9 @@ async function load() {
   loading.value = true
   error.value = false
   try {
-    const res = await getMembers()
-    members.value = res.data?.items || []
+    const [membersRes, groupsRes] = await Promise.all([getMembers(), getPermissionGroups()])
+    members.value = membersRes.data?.items || []
+    groups.value = groupsRes.data?.items || []
   } catch (err) {
     error.value = true
     errorMsg.value = err.response?.data?.detail || '載入失敗，請稍後再試'
@@ -107,19 +128,27 @@ function resetCreateForm() {
   createForm.value = {
     email: '',
     display_name: '',
+    group_keys: [],
     is_active: true,
     sync_to_authentik: true
   }
 }
 
-function openEdit(row) {
+async function openEdit(row) {
   editForm.value = {
     authentik_sub: row.authentik_sub,
     email: row.email || '',
     display_name: row.display_name || '',
+    group_keys: [],
     is_active: !!row.is_active,
     sync_to_authentik: true
   }
+  try {
+    const res = await getMemberPermissionGroups(row.authentik_sub)
+    editForm.value.group_keys = res.data?.group_keys || []
+  } catch (err) {
+    ElMessage.warning('載入會員群組失敗，仍可先編輯基本資料')
+  }
   showEditDialog.value = true
 }
 
@@ -128,6 +157,7 @@ function resetEditForm() {
     authentik_sub: '',
     email: '',
     display_name: '',
+    group_keys: [],
     is_active: true,
     sync_to_authentik: true
   }
@@ -138,7 +168,11 @@ async function handleCreate() {
   if (!valid) return
   creating.value = true
   try {
-    await upsertMember({ ...createForm.value })
+    const created = await upsertMember({ ...createForm.value })
+    const createdSub = created.data?.authentik_sub
+    if (createdSub && createForm.value.group_keys.length > 0) {
+      await setMemberPermissionGroups(createdSub, createForm.value.group_keys)
+    }
     ElMessage.success('新增會員成功')
     showCreateDialog.value = false
     resetCreateForm()
@@ -160,6 +194,7 @@ async function handleEdit() {
       is_active: editForm.value.is_active,
       sync_to_authentik: editForm.value.sync_to_authentik
     })
+    await setMemberPermissionGroups(editForm.value.authentik_sub, editForm.value.group_keys || [])
     ElMessage.success('更新會員成功')
     showEditDialog.value = false
     await load()