54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 权限守卫组件
|
||
* 根据应用角色控制子内容的显示/隐藏
|
||
*
|
||
* 用法：
|
||
* <PermissionGuard :app-id="123" permission="canManageMembers">
|
||
* <a-button>邀请成员</a-button>
|
||
* </PermissionGuard>
|
||
*
|
||
* <PermissionGuard :app-id="123" :min-role="'admin'">
|
||
* 仅管理员和 Owner 可见
|
||
* </PermissionGuard>
|
||
*/
|
||
import type { AppRole } from '@/api/app/appUser/model'
|
||
import { useAppPermission } from '@/composables/useAppPermission'
|
||
|
||
const props = defineProps<{
|
||
/** 应用 ID */
|
||
appId?: number | null
|
||
/** 要检查的权限字段（与 canManageMembers 等对应） */
|
||
permission?: string
|
||
/** 最低角色要求（优先级高于 permission） */
|
||
minRole?: AppRole
|
||
/** 权限不足时是否显示提示（而非隐藏） */
|
||
showTip?: boolean
|
||
}>()
|
||
|
||
const { hasPermission, hasRole, getNoPermissionTip, getAppPermission } = useAppPermission()
|
||
|
||
const hasAccess = computed(() => {
|
||
if (!props.appId) return false
|
||
if (props.minRole) return hasRole(props.appId, props.minRole)
|
||
if (props.permission) return hasPermission(props.appId, props.permission as 'canManageMembers')
|
||
return true
|
||
})
|
||
|
||
const tipText = computed(() => {
|
||
const perm = getAppPermission(props.appId)
|
||
return perm ? getNoPermissionTip(perm.role) : ''
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<slot v-if="hasAccess" />
|
||
<slot v-else-if="showTip" name="fallback">
|
||
<a-tooltip :title="tipText">
|
||
<span class="text-gray-400 cursor-not-allowed">
|
||
<slot name="disabled-content" />
|
||
</span>
|
||
</a-tooltip>
|
||
</slot>
|
||
</template>
|