前言

一个完善的权限系统离不开对角色的有效管理。管理员需要能够方便地查看、创建、编辑和删除系统中的角色，以便后续为这些角色分配权限，并将角色赋予用户。

本文将实现以下前端功能：

1. 角色列表页面： 创建一个新的前端页面，用于展示所有角色。此列表不分页（因为角色数量通常不会非常庞大），但支持按角色名称或描述进行搜索。
2. 角色表单对话框： 实现一个可复用的表单对话框组件，用于创建新角色和编辑现有角色的基本信息（名称、描述）。
3. CRUD 操作联调： 将角色的创建、读取、更新、删除操作与后端 /api/roles/ API 进行完整的联调。
4. API 与类型整合： 角色相关的 API 调用函数和 TypeScript 类型定义将整合到现有的 src/api/user.ts 文件中，因为角色与用户管理紧密相关。

准备工作

1. 前端项目就绪： test-platform/frontend 项目可以正常运行 (npm run dev)。
2. 后端 API 运行中： Django 后端服务运行，/api/roles/ API 端点已按照《篇一》中的设计实现并可用。
3. JWT 认证可用： 管理员身份登录。
4. Axios 和 API 服务已封装： utils/request.ts 已配置。
5. src/api/user.ts 文件已存在。

第一部分：更新 API 服务以包含角色管理

我们将在现有的 user.ts 文件中添加角色相关的类型定义和 API 调用函数。

打开 frontend/src/api/user.ts，在文件末尾添加以下内容：

// test-platform/frontend/src/api/user.ts
// ... (已有的 User 相关类型和 API 函数保持不变) ...// --- 角色相关类型和 API ---
export interface Role {id: number;name: string;description: string | null;create_time?: string; update_time?: string; // permissions?: any[]; // 权限字段将在后续权限篇添加
}export type RoleListResponse = Role[] // 获取所有角色列表 (用于下拉选择)
export function getAllRoles(): AxiosPromise<RoleListResponse> {return request({url: '/roles/',method: 'get',params: { page_size: 1000 }})
}// 创建或更新角色时发送的数据类型
export interface UpsertRoleData {name: string;description?: string | null;
}// 1. 获取角色列表 (支持搜索，不分页)
export function getRoleList(params?: { search?: string }): AxiosPromise<RoleListResponse> {return request({url: '/roles/',method: 'get',params // params: { search: 'keyword' }})
}// 2. 创建角色
export function createRole(data: UpsertRoleData): AxiosPromise<Role> {return request({url: '/roles/',method: 'post',data})
}