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

src/pages/admin/PermissionGroupsPage.vue

@@ -20,43 +20,13 @@
             <el-table-column label="操作" width="120">
               <template #default="{ row }">
                 <el-button size="small" @click="openEditGroup(row)">編輯</el-button>
+                <el-button size="small" class="ml-2" @click="openPermissionsDialog(row)">權限</el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </el-tab-pane>
 
-      <!-- Members Tab -->
-      <el-tab-pane label="綁定會員" name="members">
-        <div class="mt-4">
-          <el-form :model="memberForm" label-width="120px" class="max-w-xl mb-4">
-            <el-form-item label="Group Key">
-              <el-select v-model="memberForm.groupKey" 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="Authentik Sub">
-              <el-select v-model="memberForm.authentikSub" placeholder="選擇會員" filterable allow-create default-first-option style="width: 100%">
-                <el-option
-                  v-for="m in members"
-                  :key="m.authentik_sub"
-                  :label="`${m.display_name || m.email || '(no-name)'} (${m.authentik_sub})`"
-                  :value="m.authentik_sub"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" :loading="addingMember" @click="handleAddMember" :disabled="!memberForm.groupKey || !memberForm.authentikSub">
-                加入群組
-              </el-button>
-            </el-form-item>
-          </el-form>
-
-          <el-alert v-if="memberError" :title="memberError" type="error" show-icon :closable="false" class="mt-3" />
-          <el-alert v-if="memberSuccess" :title="memberSuccess" type="success" show-icon :closable="false" class="mt-3" />
-        </div>
-      </el-tab-pane>
-
       <!-- Permissions Tab -->
       <el-tab-pane label="群組授權" name="permissions">
         <div class="mt-4">
@@ -165,6 +135,23 @@
         <el-button type="primary" :loading="savingGroup" @click="handleEditGroup">儲存</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="showPermissionsDialog" title="群組權限列表" width="900px">
+      <div class="mb-3 text-sm text-gray-600">
+        Group: <span class="font-medium">{{ selectedGroupKey }}</span>
+      </div>
+      <el-table :data="selectedGroupPermissions" border stripe v-loading="loadingGroupPermissions">
+        <template #empty><el-empty description="此群組目前沒有權限" /></template>
+        <el-table-column prop="scope_type" label="Scope" width="100" />
+        <el-table-column prop="scope_id" label="Scope ID" min-width="140" />
+        <el-table-column prop="system" label="系統" width="120" />
+        <el-table-column prop="module" label="模組" width="180" />
+        <el-table-column prop="action" label="操作" width="120" />
+      </el-table>
+      <template #footer>
+        <el-button @click="showPermissionsDialog = false">關閉</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -176,7 +163,7 @@ import {
   getPermissionGroups,
   createPermissionGroup,
   updatePermissionGroup,
-  addMemberToGroup,
+  getPermissionGroupPermissions,
   groupGrant,
   groupRevoke
 } from '@/api/permission-groups'
@@ -184,14 +171,12 @@ import { getSystems } from '@/api/systems'
 import { getModules } from '@/api/modules'
 import { getCompanies } from '@/api/companies'
 import { getSites } from '@/api/sites'
-import { getMembers } from '@/api/members'
 
 const activeTab = ref('groups')
 const systems = ref([])
 const modules = ref([])
 const companies = ref([])
 const sites = ref([])
-const members = ref([])
 const actionOptions = ['view', 'edit', 'manage', 'admin']
 
 const filteredModuleOptions = computed(() => {
@@ -237,18 +222,16 @@ async function loadGroups() {
 }
 
 async function loadCatalogs() {
-  const [systemsRes, modulesRes, companiesRes, sitesRes, membersRes] = await Promise.all([
+  const [systemsRes, modulesRes, companiesRes, sitesRes] = await Promise.all([
     getSystems(),
     getModules(),
     getCompanies(),
-    getSites(),
-    getMembers()
+    getSites()
   ])
   systems.value = systemsRes.data?.items || []
   modules.value = modulesRes.data?.items || []
   companies.value = companiesRes.data?.items || []
   sites.value = sitesRes.data?.items || []
-  members.value = membersRes.data?.items || []
 }
 
 // Create Group
@@ -313,25 +296,22 @@ async function handleEditGroup() {
   }
 }
 
-// Add Member
-const memberForm = reactive({ groupKey: '', authentikSub: '' })
-const addingMember = ref(false)
-const memberError = ref('')
-const memberSuccess = ref('')
+const showPermissionsDialog = ref(false)
+const loadingGroupPermissions = ref(false)
+const selectedGroupPermissions = ref([])
+const selectedGroupKey = ref('')
 
-async function handleAddMember() {
-  memberError.value = ''
-  memberSuccess.value = ''
-  addingMember.value = true
+async function openPermissionsDialog(row) {
+  selectedGroupKey.value = row.group_key
+  showPermissionsDialog.value = true
+  loadingGroupPermissions.value = true
   try {
-    await addMemberToGroup(memberForm.groupKey, memberForm.authentikSub)
-    memberSuccess.value = '加入成功'
-    memberForm.groupKey = ''
-    memberForm.authentikSub = ''
+    const res = await getPermissionGroupPermissions(row.group_key)
+    selectedGroupPermissions.value = res.data?.items || []
   } catch (err) {
-    memberError.value = '加入失敗，請稍後再試'
+    ElMessage.error('載入群組權限失敗')
   } finally {
-    addingMember.value = false
+    loadingGroupPermissions.value = false
   }
 }