update role frontend

frontend/src/components/RolePermissionModal.vue

@@ -153,7 +153,7 @@ watch(
 <template>
   <a-modal
     :open="open"
-    :title="`配置权限 - ${role?.description || role?.name || ''}`"
+    :title="`配置权限 - ${role?.label || role?.name || ''}`"
     width="720px"
     :footer="null"
     @cancel="handleClose"

frontend/src/components/__tests__/RolePermissionModal.spec.ts

@@ -33,9 +33,10 @@ import { api } from '@/utils/request'
 const mockRole = {
   id: 2,
   name: 'editor',
-  description: '编辑者',
+  label: '编辑者',
-  user_count: 3,
+  description: '可以编辑内容的角色',
-  route_group_count: 2,
+  users_count: 3,
+  route_groups_count: 2,
 }
 
 const mockGroups = [

frontend/src/pages/roles/index.vue

@@ -6,10 +6,10 @@ import RolePermissionModal from '@/components/RolePermissionModal.vue'
 const roleStore = useRoleManageStore()
 
 const columns = [
-  { title: '角色名称', dataIndex: 'description', key: 'description' },
+  { title: '角色名称', dataIndex: 'label', key: 'label' },
   { title: '标识', dataIndex: 'name', key: 'name' },
-  { title: '用户数', dataIndex: 'user_count', key: 'user_count', width: 100 },
+  { title: '用户数', dataIndex: 'users_count', key: 'users_count', width: 100 },
-  { title: '路由组数', key: 'route_group_count', width: 120 },
+  { title: '路由组数', key: 'route_groups_count', width: 120 },
   { title: '操作', key: 'action', width: 120 },
 ]
 
@@ -41,9 +41,15 @@ onMounted(() => {
       size="middle"
     >
       <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'route_group_count'">
+        <template v-if="column.key === 'label'">
+          <div>
+            <div>{{ record.label }}</div>
+            <div class="text-xs text-gray-400">{{ record.description }}</div>
+          </div>
+        </template>
+        <template v-if="column.key === 'route_groups_count'">
           <a-tag v-if="record.name === 'administrator'" color="blue">全部</a-tag>
-          <span v-else>{{ record.route_group_count }}</span>
+          <span v-else>{{ record.route_groups_count }}</span>
         </template>
         <template v-if="column.key === 'action'">
           <a-button

frontend/src/stores/role-manage.ts

@@ -3,9 +3,10 @@ import { api } from '@/utils/request'
 export interface RoleRecord {
   id: number
   name: string
+  label: string
   description: string
-  user_count: number
+  users_count: number
-  route_group_count: number
+  route_groups_count: number
 }
 
 export interface RouteOverride {