278c2b6c67
新增功能： - 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>
82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
||
<div>
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-xl font-bold text-gray-800">我的權限快照</h2>
|
||
<el-button :loading="loading" @click="load" :icon="Refresh" size="small">重新整理</el-button>
|
||
</div>
|
||
|
||
<el-alert
|
||
v-if="error"
|
||
:title="errorMessage"
|
||
type="error"
|
||
show-icon
|
||
:closable="false"
|
||
class="mb-4"
|
||
/>
|
||
|
||
<el-skeleton v-if="loading && !snapshot" :rows="4" animated />
|
||
|
||
<template v-if="snapshot">
|
||
<p class="text-sm text-gray-500 mb-3">
|
||
Sub：<span class="font-mono">{{ snapshot.authentik_sub }}</span>
|
||
</p>
|
||
|
||
<el-empty
|
||
v-if="snapshot.permissions.length === 0"
|
||
description="目前沒有任何權限"
|
||
/>
|
||
|
||
<el-table
|
||
v-else
|
||
:data="snapshot.permissions"
|
||
stripe
|
||
border
|
||
class="w-full shadow-sm"
|
||
>
|
||
<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="120" />
|
||
<el-table-column prop="action" label="操作" width="100" />
|
||
</el-table>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { Refresh } from '@element-plus/icons-vue'
|
||
import { usePermissionStore } from '@/stores/permission'
|
||
|
||
const permissionStore = usePermissionStore()
|
||
|
||
const snapshot = ref(null)
|
||
const loading = ref(false)
|
||
const error = ref(null)
|
||
const errorMessage = ref('')
|
||
|
||
async function load() {
|
||
loading.value = true
|
||
error.value = null
|
||
try {
|
||
await permissionStore.fetchMySnapshot()
|
||
snapshot.value = permissionStore.snapshot
|
||
} catch (err) {
|
||
error.value = err
|
||
const status = err.response?.status
|
||
const detail = err.response?.data?.detail
|
||
if (status === 401) {
|
||
errorMessage.value = 'Token 已過期，請重新登入'
|
||
} else if (detail) {
|
||
errorMessage.value = `錯誤：${detail}`
|
||
} else {
|
||
errorMessage.value = '載入失敗，請稍後再試'
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(load)
|
||
</script>
|