53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import { ChevronDown, UserRoundCog } from '@lucide/vue'
|
|||
|
|
import type { Role } from '@/types/admin'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
roles: Role[]
|
|||
|
|
currentRole: Role | null
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
select: [roleId: string]
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const roleName = computed(() => props.currentRole?.name ?? '无可用角色')
|
|||
|
|
const accessibleLabel = computed(() => `权限预览：${roleName.value}，数据范围未模拟`)
|
|||
|
|
|
|||
|
|
function handleCommand(command: string | number) {
|
|||
|
|
emit('select', String(command))
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-dropdown :disabled="roles.length === 0" trigger="click" @command="handleCommand">
|
|||
|
|
<button
|
|||
|
|
class="role-preview-trigger"
|
|||
|
|
type="button"
|
|||
|
|
:aria-label="accessibleLabel"
|
|||
|
|
:title="accessibleLabel"
|
|||
|
|
>
|
|||
|
|
<UserRoundCog :size="18" aria-hidden="true" />
|
|||
|
|
<span class="role-preview-copy">
|
|||
|
|
<strong>权限预览：{{ roleName }}</strong>
|
|||
|
|
<small>仅预览菜单、页面和操作；数据范围未模拟</small>
|
|||
|
|
</span>
|
|||
|
|
<ChevronDown :size="15" aria-hidden="true" />
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<template #dropdown>
|
|||
|
|
<el-dropdown-menu>
|
|||
|
|
<el-dropdown-item
|
|||
|
|
v-for="role in roles"
|
|||
|
|
:key="role.id"
|
|||
|
|
:command="role.id"
|
|||
|
|
:disabled="role.id === currentRole?.id"
|
|||
|
|
>
|
|||
|
|
{{ role.name }}
|
|||
|
|
</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</template>
|
|||
|
|
</el-dropdown>
|
|||
|
|
</template>
|