<template>
  <AdminTablePage
    eyebrow="SYSTEM ROLES"
    title="角色权限"
    description="管理后台角色和授权关系，后续可在详情抽屉内配置菜单权限。"
    primary-action="新增角色"
    :columns="columns"
    :rows="rows"
    :loading="loading"
    @refresh="load"
  />
</template>
<script setup>
import { onMounted, ref } from 'vue'
import AdminTablePage from './AdminTablePage.vue'
import { getRoles } from '@/api/request/admin'
const columns = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: '角色名称' },
  { key: 'code', label: '角色编码', type: 'tag' }
]
const rows = ref([])
const loading = ref(false)
const load = async () => {
  loading.value = true
  rows.value = await getRoles().catch(() => [])
  loading.value = false
}
onMounted(load)
</script>
