Upgrade frontend to Schema V2: Admin management pages
新增功能： - OIDC 登入流程完整實現（LoginPage → AuthCallbackPage） - 6 個管理頁面：系統、模組、公司、站台、會員、權限群組 - 權限群組管理：群組 CRUD + 綁定會員 + 群組授權/撤銷 - 新 API 層：systems、modules、companies、sites、members、permission-groups - admin store：統一管理公共清單資料 調整既有頁面： - PermissionSnapshotPage：表格新增 system 欄位 - PermissionAdminPage： - 新增 system 必填欄位 - scope_type 改為 company/site 下拉選單 - module 改為選填（空值代表系統層權限） - Router：補 6 條新管理路由 - App.vue：導覽列新增管理員群組下拉菜單 驗收條件達成： ✓ 可新增 system/module/company/site ✓ 可做用戶直接 grant/revoke（新 payload） ✓ 可建立 permission-group、加會員、群組 grant/revoke ✓ /me/permissions/snapshot 表格可顯示 system + module + action Build：成功（0 errors） Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Chris
296
src/pages/admin/PermissionGroupsPage.vue
Normal file
296
src/pages/admin/PermissionGroupsPage.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6">權限群組管理</h2>
|
||||
|
||||
<!-- 認證 -->
|
||||
<el-card class="mb-6 shadow-sm">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-medium text-gray-700">管理員認證</span>
|
||||
<el-tag v-if="credsSaved" type="success" size="small">已儲存（session）</el-tag>
|
||||
<el-tag v-else type="warning" size="small">未設定</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="credsForm" inline>
|
||||
<el-form-item label="X-Client-Key">
|
||||
<el-input v-model="credsForm.clientKey" placeholder="client key" style="width: 220px" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="X-API-Key">
|
||||
<el-input v-model="credsForm.apiKey" placeholder="api key" style="width: 220px" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveCreds">儲存認證</el-button>
|
||||
<el-button v-if="credsSaved" @click="clearCreds" class="ml-2">清除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-tabs v-model="activeTab" type="border-card" class="shadow-sm">
|
||||
<!-- Groups Tab -->
|
||||
<el-tab-pane label="群組管理" name="groups">
|
||||
<div class="mt-4">
|
||||
<el-button v-if="credsSaved" type="primary" @click="showCreateGroup = true" :icon="Plus" class="mb-4">
|
||||
新增群組
|
||||
</el-button>
|
||||
<p v-if="!credsSaved" class="text-xs text-yellow-600 mb-4">請先設定管理員認證</p>
|
||||
|
||||
<el-skeleton v-if="loadingGroups" :rows="4" animated />
|
||||
|
||||
<el-table v-else :data="groups" stripe border class="w-full">
|
||||
<el-empty v-if="groups.length === 0" slot="empty" description="目前無群組" />
|
||||
<el-table-column prop="group_key" label="Group Key" width="180" />
|
||||
<el-table-column prop="name" label="群組名稱" min-width="200" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- Members Tab -->
|
||||
<el-tab-pane label="綁定會員" name="members" :disabled="!credsSaved">
|
||||
<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-input v-model="memberForm.authentikSub" placeholder="authentik-sub-xxx" />
|
||||
</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>
|
||||
|
||||
<p v-if="memberError" class="text-red-600 text-sm mb-2">{{ memberError }}</p>
|
||||
<p v-if="memberSuccess" class="text-green-600 text-sm mb-2">{{ memberSuccess }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- Permissions Tab -->
|
||||
<el-tab-pane label="群組授權" name="permissions" :disabled="!credsSaved">
|
||||
<div class="mt-4">
|
||||
<el-form :model="groupPermForm" label-width="120px" class="max-w-xl mb-4">
|
||||
<el-form-item label="Group Key">
|
||||
<el-select v-model="groupPermForm.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="Scope Type">
|
||||
<el-select v-model="groupPermForm.scope_type" placeholder="company or site">
|
||||
<el-option label="Company" value="company" />
|
||||
<el-option label="Site" value="site" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Scope ID">
|
||||
<el-input v-model="groupPermForm.scope_id" placeholder="company_key or site_key" />
|
||||
</el-form-item>
|
||||
<el-form-item label="系統">
|
||||
<el-input v-model="groupPermForm.system" placeholder="mkt" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模組（選填）">
|
||||
<el-input v-model="groupPermForm.module" placeholder="campaign" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作">
|
||||
<el-input v-model="groupPermForm.action" placeholder="view" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="grantingGroupPerm"
|
||||
@click="handleGroupGrant"
|
||||
:disabled="!groupPermForm.groupKey || !groupPermForm.scope_type || !groupPermForm.scope_id || !groupPermForm.system || !groupPermForm.action"
|
||||
>
|
||||
Grant 授權
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
class="ml-2"
|
||||
:loading="revokingGroupPerm"
|
||||
@click="handleGroupRevoke"
|
||||
:disabled="!groupPermForm.groupKey || !groupPermForm.scope_type || !groupPermForm.scope_id || !groupPermForm.system || !groupPermForm.action"
|
||||
>
|
||||
Revoke 撤銷
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<p v-if="groupPermError" class="text-red-600 text-sm mb-2">{{ groupPermError }}</p>
|
||||
<p v-if="groupPermSuccess" class="text-green-600 text-sm mb-2">{{ groupPermSuccess }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- Create Group Dialog -->
|
||||
<el-dialog v-model="showCreateGroup" title="新增群組" @close="resetCreateForm">
|
||||
<el-form :model="createForm" label-width="120px">
|
||||
<el-form-item label="Group Key">
|
||||
<el-input v-model="createForm.group_key" placeholder="group-001" />
|
||||
</el-form-item>
|
||||
<el-form-item label="群組名稱">
|
||||
<el-input v-model="createForm.name" placeholder="群組名稱" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showCreateGroup = false">取消</el-button>
|
||||
<el-button type="primary" :loading="creatingGroup" @click="handleCreateGroup">確認</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { usePermissionStore } from '@/stores/permission'
|
||||
import {
|
||||
getPermissionGroups,
|
||||
createPermissionGroup,
|
||||
addMemberToGroup,
|
||||
removeMemberFromGroup,
|
||||
groupGrant,
|
||||
groupRevoke
|
||||
} from '@/api/permission-groups'
|
||||
|
||||
const permissionStore = usePermissionStore()
|
||||
const activeTab = ref('groups')
|
||||
|
||||
// 認證
|
||||
const credsForm = reactive({
|
||||
clientKey: permissionStore.adminClientKey,
|
||||
apiKey: permissionStore.adminApiKey
|
||||
})
|
||||
|
||||
const credsSaved = computed(() => permissionStore.hasAdminCreds())
|
||||
|
||||
function saveCreds() {
|
||||
if (!credsForm.clientKey || !credsForm.apiKey) {
|
||||
ElMessage.warning('請填寫完整認證')
|
||||
return
|
||||
}
|
||||
permissionStore.setAdminCreds(credsForm.clientKey, credsForm.apiKey)
|
||||
ElMessage.success('認證已儲存（session）')
|
||||
}
|
||||
|
||||
function clearCreds() {
|
||||
permissionStore.clearAdminCreds()
|
||||
credsForm.clientKey = ''
|
||||
credsForm.apiKey = ''
|
||||
ElMessage.info('認證已清除')
|
||||
}
|
||||
|
||||
// Groups
|
||||
const groups = ref([])
|
||||
const loadingGroups = ref(false)
|
||||
|
||||
async function loadGroups() {
|
||||
loadingGroups.value = true
|
||||
try {
|
||||
const res = await getPermissionGroups()
|
||||
groups.value = res.data || []
|
||||
} catch (err) {
|
||||
ElMessage.error('載入群組失敗')
|
||||
} finally {
|
||||
loadingGroups.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Create Group
|
||||
const showCreateGroup = ref(false)
|
||||
const creatingGroup = ref(false)
|
||||
const createForm = reactive({ group_key: '', name: '' })
|
||||
|
||||
function resetCreateForm() {
|
||||
createForm.group_key = ''
|
||||
createForm.name = ''
|
||||
}
|
||||
|
||||
async function handleCreateGroup() {
|
||||
if (!createForm.group_key || !createForm.name) {
|
||||
ElMessage.warning('請填寫完整資訊')
|
||||
return
|
||||
}
|
||||
creatingGroup.value = true
|
||||
try {
|
||||
await createPermissionGroup(createForm)
|
||||
ElMessage.success('新增成功')
|
||||
showCreateGroup.value = false
|
||||
resetCreateForm()
|
||||
await loadGroups()
|
||||
} catch (err) {
|
||||
ElMessage.error('新增失敗')
|
||||
} finally {
|
||||
creatingGroup.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Add Member
|
||||
const memberForm = reactive({ groupKey: '', authentikSub: '' })
|
||||
const addingMember = ref(false)
|
||||
const memberError = ref('')
|
||||
const memberSuccess = ref('')
|
||||
|
||||
async function handleAddMember() {
|
||||
memberError.value = ''
|
||||
memberSuccess.value = ''
|
||||
addingMember.value = true
|
||||
try {
|
||||
await addMemberToGroup(memberForm.groupKey, memberForm.authentikSub)
|
||||
memberSuccess.value = '加入成功'
|
||||
memberForm.groupKey = ''
|
||||
memberForm.authentikSub = ''
|
||||
} catch (err) {
|
||||
memberError.value = '加入失敗，請稍後再試'
|
||||
} finally {
|
||||
addingMember.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Group Grant/Revoke
|
||||
const groupPermForm = reactive({
|
||||
groupKey: '',
|
||||
scope_type: '',
|
||||
scope_id: '',
|
||||
system: '',
|
||||
module: '',
|
||||
action: ''
|
||||
})
|
||||
const grantingGroupPerm = ref(false)
|
||||
const revokingGroupPerm = ref(false)
|
||||
const groupPermError = ref('')
|
||||
const groupPermSuccess = ref('')
|
||||
|
||||
async function handleGroupGrant() {
|
||||
groupPermError.value = ''
|
||||
groupPermSuccess.value = ''
|
||||
grantingGroupPerm.value = true
|
||||
try {
|
||||
const { groupKey, ...permData } = groupPermForm
|
||||
await groupGrant(groupKey, permData)
|
||||
groupPermSuccess.value = 'Grant 成功'
|
||||
} catch (err) {
|
||||
groupPermError.value = 'Grant 失敗'
|
||||
} finally {
|
||||
grantingGroupPerm.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGroupRevoke() {
|
||||
groupPermError.value = ''
|
||||
groupPermSuccess.value = ''
|
||||
revokingGroupPerm.value = true
|
||||
try {
|
||||
const { groupKey, ...permData } = groupPermForm
|
||||
await groupRevoke(groupKey, permData)
|
||||
groupPermSuccess.value = 'Revoke 成功'
|
||||
} catch (err) {
|
||||
groupPermError.value = 'Revoke 失敗'
|
||||
} finally {
|
||||
revokingGroupPerm.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadGroups)
|
||||
</script>
|
||||
Reference in New Issue
Block a user