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