member/member-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Chris
2026-03-30 03:54:22 +08:00
parent 5dd759d2cb
commit 4e23a5bff5
6 changed files with 156 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/members.js
View File

@@ -3,3 +3,6 @@ import { adminHttp } from './http'
export const getMembers = () => adminHttp.get('/admin/members')
export const upsertMember = (data) => adminHttp.post('/admin/members/upsert', data)
export const updateMember = (authentikSub, data) => adminHttp.patch(`/admin/members/${authentikSub}`, data)
export const getMemberPermissionGroups = (authentikSub) => adminHttp.get(`/admin/members/${authentikSub}/permission-groups`)
export const setMemberPermissionGroups = (authentikSub, groupKeys) =>
adminHttp.put(`/admin/members/${authentikSub}/permission-groups`, { group_keys: groupKeys })

2
src/api/permission-admin.js
View File

@@ -2,3 +2,5 @@ import { adminHttp } from './http'
export const grantPermission = (data) => adminHttp.post('/admin/permissions/grant', data)
export const revokePermission = (data) => adminHttp.post('/admin/permissions/revoke', data)
export const listDirectPermissions = (params) => adminHttp.get('/admin/permissions/direct', { params })
export const revokeDirectPermissionById = (permissionId) => adminHttp.delete(`/admin/permissions/direct/${permissionId}`)

1
src/api/permission-groups.js
View File

@@ -3,6 +3,7 @@ import { adminHttp } from './http'
export const getPermissionGroups = () => adminHttp.get('/admin/permission-groups')
export const createPermissionGroup = (data) => adminHttp.post('/admin/permission-groups', data)
export const updatePermissionGroup = (groupKey, data) => adminHttp.patch(`/admin/permission-groups/${groupKey}`, data)
export const getPermissionGroupPermissions = (groupKey) => adminHttp.get(`/admin/permission-groups/${groupKey}/permissions`)
export const addMemberToGroup = (groupKey, authentikSub) =>
adminHttp.post(`/admin/permission-groups/${groupKey}/members/${authentikSub}`)

45
src/pages/admin/MembersPage.vue
View File

@@ -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()

86
src/pages/admin/PermissionGroupsPage.vue
View File

@@ -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
}
}

78
src/pages/permissions/PermissionAdminPage.vue
View File

@@ -154,6 +154,40 @@
</el-form>
</el-tab-pane>
</el-tabs>
<el-card class="mt-6 shadow-sm">
<template #header>
<div class="flex items-center justify-between gap-3">
<span class="font-medium text-gray-700">已授權列表（直接授權）</span>
<div class="flex items-center gap-2">
<el-input v-model="listFilters.keyword" placeholder="搜尋 email/sub/module/action" clearable style="width: 280px" @keyup.enter="loadDirectPermissionList" />
<el-select v-model="listFilters.scope_type" clearable placeholder="Scope" style="width: 140px">
<el-option label="Company" value="company" />
<el-option label="Site" value="site" />
</el-select>
<el-button :loading="listLoading" @click="loadDirectPermissionList">查詢</el-button>
</div>
</div>
</template>
<el-table :data="directPermissions" stripe border class="w-full" v-loading="listLoading">
<template #empty><el-empty description="目前沒有直接授權資料" /></template>
<el-table-column prop="display_name" label="名稱" min-width="140" />
<el-table-column prop="email" label="Email" min-width="200" />
<el-table-column prop="authentik_sub" label="Sub" min-width="200" />
<el-table-column prop="scope_type" label="Scope" width="90" />
<el-table-column prop="scope_id" label="Scope ID" min-width="120" />
<el-table-column prop="system" label="系統" width="100" />
<el-table-column prop="module" label="模組" width="130" />
<el-table-column prop="action" label="操作" width="100" />
<el-table-column prop="created_at" label="建立時間" min-width="180" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="danger" size="small" @click="handleRevokeByRow(row)" :loading="revokeRowLoadingId === row.permission_id">撤銷</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
@@ -166,6 +200,7 @@ import { getModules } from '@/api/modules'
import { getCompanies } from '@/api/companies'
import { getSites } from '@/api/sites'
import { getMembers } from '@/api/members'
import { listDirectPermissions, revokeDirectPermissionById } from '@/api/permission-admin'
const permissionStore = usePermissionStore()
@@ -176,6 +211,10 @@ const companies = ref([])
const sites = ref([])
const members = ref([])
const actionOptions = ['view', 'edit', 'manage', 'admin']
const listFilters = reactive({ keyword: '', scope_type: '' })
const listLoading = ref(false)
const directPermissions = ref([])
const revokeRowLoadingId = ref('')
// Grant
const grantFormRef = ref()
@@ -237,6 +276,7 @@ async function handleGrant() {
const result = await permissionStore.grant({ ...grantForm })
grantSuccess.value = `授權成功（ID: ${result.permission_id}）`
ElMessage.success('Grant 成功')
await loadDirectPermissionList()
} catch (err) {
grantError.value = formatAdminError(err)
} finally {
@@ -305,6 +345,7 @@ async function handleRevoke() {
const result = await permissionStore.revoke({ ...revokeForm })
revokeSuccess.value = `撤銷成功（共刪除 ${result.deleted} 筆）`
ElMessage.success('Revoke 成功')
await loadDirectPermissionList()
} catch (err) {
revokeError.value = formatAdminError(err)
} finally {
@@ -356,6 +397,39 @@ async function loadCatalogs() {
members.value = membersRes.data?.items || []
}
async function loadDirectPermissionList() {
listLoading.value = true
try {
const res = await listDirectPermissions({
keyword: listFilters.keyword || undefined,
scope_type: listFilters.scope_type || undefined,
limit: 200,
offset: 0
})
directPermissions.value = (res.data?.items || []).map(row => ({
...row,
created_at: row.created_at ? new Date(row.created_at).toLocaleString() : ''
}))
} catch (err) {
ElMessage.error('載入權限列表失敗')
} finally {
listLoading.value = false
}
}
async function handleRevokeByRow(row) {
revokeRowLoadingId.value = row.permission_id
try {
await revokeDirectPermissionById(row.permission_id)
ElMessage.success('已撤銷該筆授權')
await loadDirectPermissionList()
} catch (err) {
ElMessage.error('撤銷失敗')
} finally {
revokeRowLoadingId.value = ''
}
}
watch(() => grantForm.scope_type, () => { grantForm.scope_id = '' })
watch(() => grantForm.system, () => { grantForm.module = '' })
watch(() => revokeForm.scope_type, () => { revokeForm.scope_id = '' })
@@ -368,5 +442,7 @@ watch(() => grantForm.authentik_sub, (sub) => {
grantForm.display_name = user.display_name || ''
})
onMounted(loadCatalogs)
onMounted(async () => {
await Promise.all([loadCatalogs(), loadDirectPermissionList()])
})
</script>