From 50d8d7267b9e24d07918f2754752c99d3c63da67 Mon Sep 17 00:00:00 2001
From: Nick Zeng <Nick.Zeng@wpic.co>
Date: Mon, 30 Mar 2026 10:13:57 +0800
Subject: [PATCH] update role frontend

---
 frontend/src/components/RolePermissionModal.vue  |  2 +-
 .../__tests__/RolePermissionModal.spec.ts        |  7 ++++---
 frontend/src/pages/roles/index.vue               | 16 +++++++++++-----
 frontend/src/stores/role-manage.ts               |  5 +++--
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/RolePermissionModal.vue b/frontend/src/components/RolePermissionModal.vue
index b09b576..5299cd2 100644
--- a/frontend/src/components/RolePermissionModal.vue
+++ b/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"
diff --git a/frontend/src/components/__tests__/RolePermissionModal.spec.ts b/frontend/src/components/__tests__/RolePermissionModal.spec.ts
index 09ed6b9..777f2f9 100644
--- a/frontend/src/components/__tests__/RolePermissionModal.spec.ts
+++ b/frontend/src/components/__tests__/RolePermissionModal.spec.ts
@@ -33,9 +33,10 @@ import { api } from '@/utils/request'
 const mockRole = {
   id: 2,
   name: 'editor',
-  description: '编辑者',
-  user_count: 3,
-  route_group_count: 2,
+  label: '编辑者',
+  description: '可以编辑内容的角色',
+  users_count: 3,
+  route_groups_count: 2,
 }
 
 const mockGroups = [
diff --git a/frontend/src/pages/roles/index.vue b/frontend/src/pages/roles/index.vue
index 49dd50a..9bb5288 100644
--- a/frontend/src/pages/roles/index.vue
+++ b/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: '路由组数', key: 'route_group_count', width: 120 },
+  { title: '用户数', dataIndex: 'users_count', key: 'users_count', width: 100 },
+  { 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
diff --git a/frontend/src/stores/role-manage.ts b/frontend/src/stores/role-manage.ts
index fad24e2..60921b6 100644
--- a/frontend/src/stores/role-manage.ts
+++ b/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
-  route_group_count: number
+  users_count: number
+  route_groups_count: number
 }
 
 export interface RouteOverride {