前言

一個完善的權限系統離不開對角色的有效管理。管理員需要能夠方便地查看、創建、編輯和刪除系統中的角色，以便后續為這些角色分配權限，并將角色賦予用戶。

本文將實現以下前端功能：

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})
}