role

src/api/modules/role.ts

@@ -12,7 +12,7 @@ import type {
  * 获取角色列表
  * @returns Promise<RoleListResponse> 角色列表数据
  */
-export async function getRoleList(): Promise<RoleListResponse> {
+export async function getRoleApi(): Promise<RoleListResponse> {
   return request.get<RoleListResponse>('/roles/list');
 }
 
@@ -21,7 +21,7 @@ export async function getRoleList(): Promise<RoleListResponse> {
  * @param params 角色名称、标题
  * @returns Promise<void>
  */
-export async function createRole(params: RoleFormParams): Promise<void> {
+export async function createRoleApi(params: RoleFormParams): Promise<void> {
   return request.post<void>('/roles/create', params);
 }
 
@@ -30,7 +30,7 @@ export async function createRole(params: RoleFormParams): Promise<void> {
  * @param params 角色ID、名称、标题
  * @returns Promise<void>
  */
-export async function editRole(params: RoleFormParams): Promise<void> {
+export async function editRoleApi(params: RoleFormParams): Promise<void> {
   return request.post<void>('/roles/edit', params);
 }
 
@@ -39,7 +39,7 @@ export async function editRole(params: RoleFormParams): Promise<void> {
  * @param params 角色ID
  * @returns Promise<void>
  */
-export async function deleteRole(params: DeleteRoleParams): Promise<void> {
+export async function deleteRoleApi(params: DeleteRoleParams): Promise<void> {
   return request.post<void>('/roles/del', params);
 }
 
@@ -48,7 +48,7 @@ export async function deleteRole(params: DeleteRoleParams): Promise<void> {
  * @param params 角色ID + 权限ID列表（逗号分隔字符串）
  * @returns Promise<void>
  */
-export async function setRolePermission(params: SetRolePermissionParams): Promise<void> {
+export async function setRolePermissionApi(params: SetRolePermissionParams): Promise<void> {
   return request.post<void>('/roles/setPermission', params);
 }
 
@@ -57,6 +57,6 @@ export async function setRolePermission(params: SetRolePermissionParams): Promis
  * @param params 角色ID
  * @returns Promise<PermissionIdsResponse> 权限ID数组
  */
-export async function getRolePermission(params: GetRolePermissionParams): Promise<PermissionIdsResponse> {
+export async function getRolePermissionApi(params: GetRolePermissionParams): Promise<PermissionIdsResponse> {
   return request.get<PermissionIdsResponse>('/roles/getPermission', { id: params.id });
 }

src/assets/styles/global.scss

@@ -1,5 +1,5 @@
 @use './user.scss';
-
+@use './system.scss';
 * {
   margin: 0;
   padding: 0;

src/assets/styles/system.scss

@@ -0,0 +1,8 @@
+.system {
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+}

src/views/system/menuManagement/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="menu-list">
+    <div class="system">
         <!-- 缺少通配搜索组件 -->
 
-        <div class="menu-action">
+        <div class="header">
             <h4>菜单列表</h4>
             <el-button type="primary" :icon="Plus" @click="handleAddMenu">新增菜单</el-button>
         </div>
@@ -253,15 +253,4 @@ const handleToggleStatus = async (row: any) => {
     row.status = row.status === 1 ? 0 : 1
     ElMessage.success(`已${row.status === 1 ? '启用' : '禁用'}`)
 }
-</script>
+</script>
-
-<style scoped lang="scss">
-.menu-list {
-    .menu-action {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20px;
-    }
-}
-</style>

src/views/system/roleManagement/index.vue

@@ -1,5 +1,92 @@
 <template>
-    <div class="role-list">
+    <div class="system">
-        <h1>角色列表</h1>
+        <!-- 缺少通配搜索组件 -->
+
+        <div class="header">
+            <h4>菜单列表</h4>
+            <el-button type="primary" :icon="Plus" @click="handleAddRole">新增角色</el-button>
+        </div>
+        <div class="table-container">
+            <el-table :data="roleTree" row-key="id" border highlight-current-row>
+                <el-table-column prop="name" label="角色名称" />
+                <el-table-column prop="title" label="角色描述" />
+                <el-table-column prop="status" label="角色状态">
+                    <template #default="{ row }">
+                        <el-tag size="small" :type="row.status === 1 ? 'success' : 'danger'">
+                            {{ row.status === 1 ? '启用' : '禁用' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="created_at" label="创建时间" />
+                <el-table-column label="操作">
+                    <template #default="{ row }">
+                        <el-button link type="primary" size="small" @click="handleEditMenu(row)">
+                            编辑
+                        </el-button>
+                        <el-button link type="danger" size="small" @click="handleDeleteMenu(row)">
+                            删除
+                        </el-button>
+                        <el-button link size="small" :type="row.status === 1 ? 'warning' : 'success'"
+                            @click="handleToggleStatus(row)">
+                            {{ row.status === 1 ? '禁用' : '启用' }}
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+        </div>
+
+        <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增角色' : '编辑角色'" width="600px"
+            destroy-on-close>
+            <el-form>
+                <el-form-item label="角色名称" prop="name">
+                    <el-input placeholder="请输入角色名称" />
+                </el-form-item>
+                <el-form-item label="角色描述" prop="path">
+                    <el-input placeholder="请输入角色描述" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="() => { { dialogVisible = false, dialogType = 'add' } }">取消</el-button>
+                <el-button type="primary" @click="handleSubmitRole">确定</el-button>
+            </template>
+        </el-dialog>
     </div>
-</template>
+</template>
+
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { createRoleApi, deleteRoleApi, editRoleApi, getRoleApi } from '@/api/modules/role'
+const roleTree = ref<any[]>([
+    {
+        id: 1,
+        name: "admin",
+        title: "平台",
+        status: 1,
+        created_at: "2026-02-05 06:12:03"
+    }
+])
+// 定义弹窗显示状态
+const dialogVisible = ref(true)
+// 新增：区分新增/编辑模式
+const dialogType = ref<'add' | 'edit'>('add')
+onMounted(async () => {
+    const res = await getRoleApi()
+    roleTree.value = res || []
+})
+const handleAddRole = () => {
+    console.log('新增角色');
+}
+const handleSubmitRole = () => {
+    console.log('提交角色');
+}
+const handleEditRole = (row: any) => {
+    console.log('编辑角色', row);
+}
+const handleDeleteRole = (row: any) => {
+    console.log('删除角色', row);
+}
+const handleToggleStatus = (row: any) => {
+    console.log('切换状态状态', row);
+}
+</script>