<script setup lang="ts">
/**
 * 角色标签组件
 * 在应用卡片、成员列表等位置显示当前用户的角色
 */
import type { AppRole } from '@/api/app/appUser/model'
import { ROLE_LABEL, ROLE_COLOR } from '@/composables/useAppPermission'

const props = defineProps<{
  role: AppRole
  size?: 'small' | 'default'
}>()

const colorMap: Record<AppRole, string> = {
  owner: '#faad14',
  admin: '#1677ff',
  developer: '#52c41a',
  viewer: '#8c8c8c',
}
</script>

<template>
  <a-tag :color="colorMap[props.role]" :size="props.size || 'default'">
    {{ ROLE_LABEL[props.role] }}
  </a-tag>
</template>
