feat(system): 完善系统管理接口及权限管理功能

- 删除 mock 中系统管理路由冗余数据，前端统一路由管理 - 飞书登录接口响应数据结构重构，新增登录状态及用户信息查询方法 - 重构系统接口模块，新增权限、角色、用户、部门、菜单等完整类型及API实现 - 新增项目初始化相关接口及数据类型支持 - 调整登录页及相关调用，适配飞书登录新接口返回 - 统一接口响应状态码判定，修正多处 code === 0 为 code === 200 - 新增系统管理路由模块，包含用户、角色、权限、菜单、部门页面 - 账号设置页面新增角色与权限展示，丰富用户信息显示 - 权限管理页面新增增删改查功能，提供表单校验与列表操作 - 优化权限表格展示和操作体验，支持批量删除及树形结构显示 - 兼容性优化，调整部门与菜单管理hook中code判断，避免误判 - 新增菜单和部门管理相关接口及类型定义 - 更新 OpenAPI 配置，规范角色菜单权限相关接口定义 - 新增权限管理表单组件及校验规则，支持增删改权限项 - 规范权限管理模块代码结构及变量命名，提高维护性
2026-03-27 20:06:58 +08:00
parent bd809479e6
commit 1b3271fa35
21 changed files with 1432 additions and 224 deletions
--- a/src/api/feishu.ts
+++ b/src/api/feishu.ts
@@ -1,28 +1,30 @@
 import { http } from "@/utils/http";

+/** 飞书登录响应数据 */
+export type FeishuLoginData = {
+  /** 真实姓名 */
+  realName: string;
+  /** 手机号 */
+  phone: string;
+  /** token名称 */
+  tokenName: string;
+  /** 头像 */
+  avatar: string;
+  /** 用户ID */
+  userId: number;
+  /** 邮箱 */
+  email: string;
+  /** token */
+  token: string;
+  /** 用户名 */
+  username: string;
+};
+
+/** 飞书登录响应结果 */
 export type FeishuLoginResult = {
  code: number;
+  data: FeishuLoginData;
  message: string;
-  data: {
-    /** 是否登录成功 */
-    isLogin: boolean;
-    /** 用户ID */
-    userId: string | number;
-    /** 用户名 */
-    username: string;
-    /** 真实姓名 */
-    realName: string;
-    /** 头像 */
-    avatar: string;
-    /** 手机号 */
-    phone: string;
-    /** 邮箱 */
-    email: string;
-    /** token */
-    token: string;
-    /** token名称 */
-    tokenName: string;
-  };
 };

 /** 飞书OAuth登录接口（前端回调后调用） */
@@ -31,3 +33,21 @@ export const getFeishuLogin = (code: string) => {
    params: { code }
  });
 };
+
+/** 检查当前登录状态 */
+export const checkFeishuLoginStatus = () => {
+  return http.request<{
+    code: number;
+    data: Record<string, any>;
+    message: string;
+  }>("get", "/api/v1/auth/feishu/check");
+};
+
+/** 获取当前登录用户信息 */
+export const getFeishuUserInfo = () => {
+  return http.request<{
+    code: number;
+    data: Record<string, any>;
+    message: string;
+  }>("get", "/api/v1/auth/feishu/user/info");
+};
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -1,17 +1,19 @@
 import { http } from "@/utils/http";

-type Result = {
+/** 通用响应结果 */
+type Result<T = any> = {
  code: number;
  message: string;
-  data?: Array<any>;
+  data?: T;
 };

-type ResultTable = {
+/** 分页响应结果 */
+type ResultTable<T = any> = {
  code: number;
  message: string;
  data?: {
    /** 列表数据 */
-    list: Array<any>;
+    list: Array<T>;
    /** 总条目数 */
    total?: number;
    /** 每页显示条目个数 */
@@ -21,34 +23,444 @@ type ResultTable = {
  };
 };

-/** 获取系统管理-用户管理列表 */
-export const getUserList = (data?: object) => {
-  return http.request<ResultTable>("post", "/user", { data });
+/** 后端分页数据结构 */
+type PageResult<T = any> = {
+  records: Array<T>;
+  total: number;
+  size: number;
+  current: number;
+  pages?: number;
 };

-/** 系统管理-用户管理-获取所有角色列表 */
+/** 后端分页响应 */
+type BasePageResponse<T = any> = {
+  code: number;
+  message: string;
+  data: PageResult<T>;
+};
+
+// ==================== 权限管理 ====================
+
+/** 权限对象 */
+export type SysPermission = {
+  id?: number;
+  parentId?: number;
+  permissionCode?: string;
+  permissionName?: string;
+  permissionType?: number;
+  path?: string;
+  component?: string;
+  icon?: string;
+  apiUrl?: string;
+  apiMethod?: string;
+  sortOrder?: number;
+  visible?: number;
+  status?: number;
+  createTime?: string;
+  updateTime?: string;
+  deleted?: number;
+};
+
+/** 分页查询权限列表 */
+export const getPermissionList = (params?: {
+  pageNum?: number;
+  pageSize?: number;
+  keyword?: string;
+}) => {
+  return http.request<BasePageResponse<SysPermission>>(
+    "get",
+    "/api/v1/system/permission/list",
+    { params }
+  );
+};
+
+/** 查询权限树 */
+export const getPermissionTree = () => {
+  return http.request<Result<SysPermission[]>>(
+    "get",
+    "/api/v1/system/permission/tree"
+  );
+};
+
+/** 根据ID查询权限 */
+export const getPermissionById = (id: number) => {
+  return http.request<Result<SysPermission>>(
+    "get",
+    `/api/v1/system/permission/${id}`
+  );
+};
+
+/** 新增权限 */
+export const addPermission = (data: SysPermission) => {
+  return http.request<Result<number>>("post", "/api/v1/system/permission", {
+    data
+  });
+};
+
+/** 修改权限 */
+export const updatePermission = (data: SysPermission) => {
+  return http.request<Result<void>>("put", "/api/v1/system/permission", {
+    data
+  });
+};
+
+/** 删除权限 */
+export const deletePermission = (id: number) => {
+  return http.request<Result<void>>(
+    "delete",
+    `/api/v1/system/permission/${id}`
+  );
+};
+
+// ==================== 角色管理 ====================
+
+/** 角色对象 */
+export type SysRole = {
+  id?: number;
+  roleCode?: string;
+  roleName?: string;
+  roleType?: string;
+  description?: string;
+  dataScope?: number;
+  sortOrder?: number;
+  status?: number;
+  createBy?: number;
+  createTime?: string;
+  updateBy?: number;
+  updateTime?: string;
+  deleted?: number;
+};
+
+/** 分页查询角色列表 */
+export const getRoleList = (params?: {
+  pageNum?: number;
+  pageSize?: number;
+  keyword?: string;
+}) => {
+  return http.request<BasePageResponse<SysRole>>(
+    "get",
+    "/api/v1/system/role/list",
+    { params }
+  );
+};
+
+/** 查询所有角色（用于下拉选择） */
 export const getAllRoleList = () => {
-  return http.request<Result>("get", "/list-all-role");
+  return http.request<Result<SysRole[]>>("get", "/api/v1/system/role/all");
 };

-/** 系统管理-用户管理-根据userId，获取对应角色id列表（userId：用户id） */
-export const getRoleIds = (data?: object) => {
-  return http.request<Result>("post", "/list-role-ids", { data });
+/** 根据ID查询角色 */
+export const getRoleById = (id: number) => {
+  return http.request<Result<SysRole>>("get", `/api/v1/system/role/${id}`);
 };

-/** 获取系统管理-角色管理列表 */
-export const getRoleList = (data?: object) => {
-  return http.request<ResultTable>("post", "/role", { data });
+/** 新增角色 */
+export const addRole = (data: SysRole) => {
+  return http.request<Result<number>>("post", "/api/v1/system/role", { data });
 };

-/** 获取系统管理-菜单管理列表 */
-export const getMenuList = (data?: object) => {
-  return http.request<Result>("post", "/menu", { data });
+/** 修改角色 */
+export const updateRole = (data: SysRole) => {
+  return http.request<Result<void>>("put", "/api/v1/system/role", { data });
 };

-/** 获取系统管理-部门管理列表 */
-export const getDeptList = (data?: object) => {
-  return http.request<Result>("post", "/dept", { data });
+/** 删除角色 */
+export const deleteRole = (id: number) => {
+  return http.request<Result<void>>("delete", `/api/v1/system/role/${id}`);
+};
+
+/** 查询角色的权限列表（返回完整权限对象列表） */
+export const getRolePermissions = (id: number) => {
+  return http.request<Result<SysPermission[]>>(
+    "get",
+    `/api/v1/system/role/${id}/permissions`
+  );
+};
+
+/** 为角色分配权限 */
+export const assignRolePermissions = (id: number, permissionIds: number[]) => {
+  return http.request<Result<void>>(
+    "post",
+    `/api/v1/system/role/${id}/permissions`,
+    { data: permissionIds }
+  );
+};
+
+// ==================== 用户管理 ====================
+
+/** 用户对象 */
+export type SysUser = {
+  id?: number;
+  username?: string;
+  password?: string;
+  realName?: string;
+  nickname?: string;
+  avatar?: string;
+  gender?: number;
+  phone?: string;
+  email?: string;
+  deptId?: number;
+  position?: string;
+  employeeNo?: string;
+  entryDate?: string;
+  status?: number;
+  lastLoginTime?: string;
+  lastLoginIp?: string;
+  createBy?: number;
+  createTime?: string;
+  updateBy?: number;
+  updateTime?: string;
+  deleted?: number;
+};
+
+/** 分页查询用户列表 */
+export const getUserList = (params?: {
+  pageNum?: number;
+  pageSize?: number;
+  keyword?: string;
+}) => {
+  return http.request<BasePageResponse<SysUser>>(
+    "get",
+    "/api/v1/system/user/list",
+    { params }
+  );
+};
+
+/** 根据ID查询用户 */
+export const getUserById = (id: number) => {
+  return http.request<Result<SysUser>>("get", `/api/v1/system/user/${id}`);
+};
+
+/** 新增用户 */
+export const addUser = (data: SysUser) => {
+  return http.request<Result<number>>("post", "/api/v1/system/user", { data });
+};
+
+/** 修改用户 */
+export const updateUser = (data: SysUser) => {
+  return http.request<Result<void>>("put", "/api/v1/system/user", { data });
+};
+
+/** 删除用户 */
+export const deleteUser = (id: number) => {
+  return http.request<Result<void>>("delete", `/api/v1/system/user/${id}`);
+};
+
+/** 查询用户的角色列表 */
+export const getUserRoles = (id: number) => {
+  return http.request<Result<SysRole[]>>(
+    "get",
+    `/api/v1/system/user/${id}/roles`
+  );
+};
+
+/** 为用户绑定角色 */
+export const assignUserRoles = (id: number, roleIds: number[]) => {
+  return http.request<Result<void>>("post", `/api/v1/system/user/${id}/roles`, {
+    data: roleIds
+  });
+};
+
+/** 查询用户角色ID列表（用于回显） */
+export const getUserRoleIds = (id: number) => {
+  return http.request<Result<number[]>>(
+    "get",
+    `/api/v1/system/user/${id}/roleIds`
+  );
+};
+
+// ==================== 项目初始化 ====================
+
+/** 项目信息 */
+export type ProjectInfo = {
+  project_name?: string;
+  project_type?: string;
+  description?: string;
+  objectives?: string;
+  plan_start_date?: string;
+  plan_end_date?: string;
+  budget?: number;
+  currency?: string;
+  priority?: string;
+  tags?: string[];
+};
+
+/** 里程碑信息 */
+export type MilestoneInfo = {
+  milestone_name?: string;
+  description?: string;
+  plan_date?: string;
+  deliverables?: string;
+  owner_role?: string;
+};
+
+/** 任务信息 */
+export type TaskInfo = {
+  task_id?: string;
+  task_name?: string;
+  parent_task_id?: string;
+  description?: string;
+  plan_start_date?: string;
+  plan_end_date?: string;
+  estimated_hours?: number;
+  priority?: string;
+  assignee_role?: string;
+  dependencies?: string[];
+  deliverables?: string;
+};
+
+/** 成员信息 */
+export type MemberInfo = {
+  name?: string;
+  role_code?: string;
+  responsibility?: string;
+  department?: string;
+  weekly_hours?: number;
+};
+
+/** 资源信息 */
+export type ResourceInfo = {
+  resource_name?: string;
+  resource_type?: string;
+  quantity?: number;
+  unit?: string;
+  unit_price?: number;
+  supplier?: string;
+};
+
+/** 风险信息 */
+export type RiskInfo = {
+  risk_name?: string;
+  category?: string;
+  description?: string;
+  probability?: number;
+  impact?: number;
+  mitigation_plan?: string;
+};
+
+/** 时间节点信息 */
+export type TimelineNodeInfo = {
+  node_name?: string;
+  node_type?: string;
+  plan_date?: string;
+  description?: string;
+  kb_scope?: string[];
+};
+
+/** 项目初始化结果 */
+export type ProjectInitResult = {
+  project: ProjectInfo;
+  milestones: MilestoneInfo[];
+  tasks: TaskInfo[];
+  members: MemberInfo[];
+  resources: ResourceInfo[];
+  risks: RiskInfo[];
+  timeline_nodes: TimelineNodeInfo[];
+};
+
+/** 上传文件并生成项目初始化预览数据 */
+export const previewProjectInit = (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  return http.request<Result<ProjectInitResult>>(
+    "post",
+    "/api/v1/project-init/preview",
+    { data: formData }
+  );
+};
+
+/** 确认并保存项目初始化数据 */
+export const confirmProjectInit = (data: ProjectInitResult) => {
+  return http.request<Result<ProjectInitResult>>(
+    "post",
+    "/api/v1/project-init/confirm",
+    { data }
+  );
+};
+
+// ==================== 部门管理 ====================
+
+/** 部门对象 */
+export type SysDept = {
+  id?: number;
+  parentId?: number;
+  deptName?: string;
+  deptCode?: string;
+  leader?: string;
+  phone?: string;
+  email?: string;
+  sortOrder?: number;
+  status?: number;
+  createTime?: string;
+};
+
+/** 获取部门列表（树形结构） */
+export const getDeptList = () => {
+  return http.request<Result<SysDept[]>>("get", "/api/v1/system/dept/tree");
+};
+
+/** 获取部门详情 */
+export const getDeptById = (id: number) => {
+  return http.request<Result<SysDept>>("get", `/api/v1/system/dept/${id}`);
+};
+
+/** 新增部门 */
+export const addDept = (data: SysDept) => {
+  return http.request<Result<number>>("post", "/api/v1/system/dept", { data });
+};
+
+/** 修改部门 */
+export const updateDept = (data: SysDept) => {
+  return http.request<Result<void>>("put", "/api/v1/system/dept", { data });
+};
+
+/** 删除部门 */
+export const deleteDept = (id: number) => {
+  return http.request<Result<void>>("delete", `/api/v1/system/dept/${id}`);
+};
+
+// ==================== 菜单管理 ====================
+
+/** 菜单对象 */
+export type SysMenu = {
+  id?: number;
+  parentId?: number;
+  menuName?: string;
+  menuType?: number;
+  icon?: string;
+  path?: string;
+  component?: string;
+  permission?: string;
+  sortOrder?: number;
+  status?: number;
+  visible?: number;
+  keepAlive?: number;
+  createTime?: string;
+};
+
+/** 获取菜单列表（树形结构） */
+export const getMenuList = () => {
+  return http.request<Result<SysMenu[]>>("get", "/api/v1/system/menu/tree");
+};
+
+/** 获取菜单详情 */
+export const getMenuById = (id: number) => {
+  return http.request<Result<SysMenu>>("get", `/api/v1/system/menu/${id}`);
+};
+
+/** 新增菜单 */
+export const addMenu = (data: SysMenu) => {
+  return http.request<Result<number>>("post", "/api/v1/system/menu", { data });
+};
+
+/** 修改菜单 */
+export const updateMenu = (data: SysMenu) => {
+  return http.request<Result<void>>("put", "/api/v1/system/menu", { data });
+};
+
+/** 删除菜单 */
+export const deleteMenu = (id: number) => {
+  return http.request<Result<void>>("delete", `/api/v1/system/menu/${id}`);
 };

 /** 获取系统监控-在线用户列表 */
@@ -77,11 +489,23 @@ export const getSystemLogsDetail = (data?: object) => {
 };

 /** 获取角色管理-权限-菜单权限 */
-export const getRoleMenu = (data?: object) => {
-  return http.request<Result>("post", "/role-menu", { data });
+export const getRoleMenu = () => {
+  return http.request<Result<SysMenu[]>>("get", "/api/v1/system/menu/tree");
 };

 /** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
-export const getRoleMenuIds = (data?: object) => {
-  return http.request<Result>("post", "/role-menu-ids", { data });
+export const getRoleMenuIds = (roleId: number) => {
+  return http.request<Result<number[]>>(
+    "get",
+    `/api/v1/system/role/${roleId}/menu-ids`
+  );
+};
+
+/** 为角色分配菜单权限 */
+export const assignRoleMenus = (roleId: number, menuIds: number[]) => {
+  return http.request<Result<void>>(
+    "post",
+    `/api/v1/system/role/${roleId}/menus`,
+    { data: menuIds }
+  );
 };
--- a/src/api/默认模块.openapi.json
+++ b/src/api/默认模块.openapi.json
@@ -7,20 +7,30 @@
  },
  "tags": [],
  "paths": {
-    "/api/v1/auth/feishu/login": {
-      "post": {
-        "summary": "飞书OAuth登录接口（前端回调后调用）",
+    "/api/v1/system/role/{id}/menu-ids": {
+      "get": {
+        "summary": "查询角色的菜单权限ID列表（只返回菜单类型的权限）",
        "deprecated": false,
-        "description": "前端从飞书回调中获取code，然后调用此接口完成登录",
+        "description": "",
        "tags": [],
        "parameters": [
          {
-            "name": "code",
-            "in": "query",
-            "description": "飞书授权码",
+            "name": "id",
+            "in": "path",
+            "description": "",
            "required": true,
            "schema": {
-              "type": "string"
+              "type": "integer"
+            }
+          },
+          {
+            "name": "Authorization",
+            "in": "header",
+            "description": "",
+            "example": "Bearer 000b7e25-53b2-42a3-a39b-9f4cb03644ba",
+            "schema": {
+              "type": "string",
+              "default": "Bearer 000b7e25-53b2-42a3-a39b-9f4cb03644ba"
            }
          }
        ],
@@ -30,8 +40,7 @@
            "content": {
              "application/json": {
                "schema": {
-                  "$ref": "#/components/schemas/BaseResponseMapObject",
-                  "description": "登录结果（包含token和用户信息）"
+                  "$ref": "#/components/schemas/BaseResponseListLong"
                }
              }
            }
@@ -43,7 +52,7 @@
  },
  "components": {
    "schemas": {
-      "BaseResponseMapObject": {
+      "BaseResponseListLong": {
        "type": "object",
        "properties": {
          "code": {
@@ -51,26 +60,17 @@
            "description": ""
          },
          "data": {
-            "type": "object",
-            "properties": {
-              "isLogin": {
-                "type": "boolean"
-              },
-              "userId": {
-                "$ref": "#/components/schemas/userId"
-              }
+            "type": "array",
+            "items": {
+              "type": "integer"
            },
            "description": ""
          },
          "message": {
-            "description": "",
-            "type": "null"
+            "type": "string",
+            "description": ""
          }
        }
-      },
-      "userId": {
-        "type": "object",
-        "properties": {}
      }
    },
    "responses": {},
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -0,0 +1,64 @@
+import { $t } from "@/plugins/i18n";
+import { system } from "@/router/enums";
+
+export default {
+  path: "/system",
+  redirect: "/system/user",
+  meta: {
+    icon: "ri:settings-3-line",
+    title: $t("menus.pureSysManagement"),
+    rank: system
+  },
+  children: [
+    {
+      path: "/system/user",
+      name: "SystemUser",
+      component: () => import("@/views/system/user/index.vue"),
+      meta: {
+        icon: "ri:admin-line",
+        title: $t("menus.pureUser"),
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/role",
+      name: "SystemRole",
+      component: () => import("@/views/system/role/index.vue"),
+      meta: {
+        icon: "ri:admin-fill",
+        title: $t("menus.pureRole"),
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/permission",
+      name: "SystemPermission",
+      component: () => import("@/views/system/permission/index.vue"),
+      meta: {
+        icon: "ep:key",
+        title: "权限管理",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/menu",
+      name: "SystemMenu",
+      component: () => import("@/views/system/menu/index.vue"),
+      meta: {
+        icon: "ep:menu",
+        title: $t("menus.pureSystemMenu"),
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/dept",
+      name: "SystemDept",
+      component: () => import("@/views/system/dept/index.vue"),
+      meta: {
+        icon: "ri:git-branch-line",
+        title: $t("menus.pureDept"),
+        roles: ["admin"]
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
--- a/src/views/account-settings/components/Profile.vue
+++ b/src/views/account-settings/components/Profile.vue
@@ -24,7 +24,15 @@ const userInfos = reactive({
  nickname: "",
  email: "",
  phone: "",
-  description: ""
+  description: "",
+  realName: "",
+  username: "",
+  gender: 0,
+  position: "",
+  employeeNo: "",
+  deptName: "",
+  roles: [] as string[],
+  permissions: [] as string[]
 });

 const rules = reactive<FormRules<UserInfo>>({
@@ -74,7 +82,7 @@ const handleSubmitImage = () => {
  });
  formUpload(formData)
    .then(({ code }) => {
-      if (code === 0) {
+      if (code === 200) {
        message("更新头像成功", { type: "success" });
        handleClose();
      } else {
@@ -100,7 +108,7 @@ const onSubmit = async (formEl: FormInstance) => {

 onMounted(async () => {
  const { code, data } = await getMine();
-  if (code === 0) {
+  if (code === 200) {
    Object.assign(userInfos, data);
  }
 });
@@ -162,6 +170,48 @@ onMounted(async () => {
          show-word-limit
        />
      </el-form-item>
+
+      <el-divider />
+
+      <h4 class="mb-4">角色与权限</h4>
+      <el-form-item label="所属部门">
+        <el-input v-model="userInfos.deptName" disabled />
+      </el-form-item>
+      <el-form-item label="职位">
+        <el-input v-model="userInfos.position" disabled />
+      </el-form-item>
+      <el-form-item label="工号">
+        <el-input v-model="userInfos.employeeNo" disabled />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-tag
+          v-for="role in userInfos.roles"
+          :key="role"
+          class="mr-2"
+          type="primary"
+        >
+          {{ role }}
+        </el-tag>
+        <span v-if="!userInfos.roles?.length" class="text-gray-400"
+          >暂无角色</span
+        >
+      </el-form-item>
+      <el-form-item label="权限">
+        <div class="flex flex-wrap gap-2">
+          <el-tag
+            v-for="perm in userInfos.permissions"
+            :key="perm"
+            size="small"
+            type="info"
+          >
+            {{ perm }}
+          </el-tag>
+          <span v-if="!userInfos.permissions?.length" class="text-gray-400"
+            >暂无权限</span
+          >
+        </div>
+      </el-form-item>
+
      <el-button type="primary" @click="onSubmit(userInfoFormRef)">
        更新信息
      </el-button>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -144,7 +144,7 @@ const handleFeishuCallback = async (code: string) => {
  feishuLoading.value = true;
  try {
    const res = await getFeishuLogin(code);
-    if (res.code === 0 && res.data?.isLogin) {
+    if (res.code === 200 && res.data?.token) {
      const { data } = res;
      // 设置token（适配后端返回的字段名）
      setToken({
--- a/src/views/system/dept/utils/hook.tsx
+++ b/src/views/system/dept/utils/hook.tsx
@@ -75,7 +75,7 @@ export function useDept() {
  async function onSearch() {
    loading.value = true;
    const { code, data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
-    if (code === 0) {
+    if (code === 200) {
      let newData = data;
      if (!isAllEmpty(form.name)) {
        // 前端搜索部门名称
--- a/src/views/system/menu/utils/hook.tsx
+++ b/src/views/system/menu/utils/hook.tsx
@@ -107,7 +107,7 @@ export function useMenu() {
  async function onSearch() {
    loading.value = true;
    const { code, data } = await getMenuList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
-    if (code === 0) {
+    if (code === 200) {
      let newData = data;
      if (!isAllEmpty(form.title)) {
        // 前端搜索菜单名称
--- a/src/views/system/permission/form/index.vue
+++ b/src/views/system/permission/form/index.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { formRules } from "./rules";
+import type { FormInstance, FormRules } from "element-plus";
+import { FormItemProps } from "../utils/types";
+
+const props = withDefaults(defineProps<FormItemProps>(), {
+  id: 0,
+  parentId: 0,
+  permissionName: "",
+  permissionCode: "",
+  permissionType: 1,
+  path: "",
+  component: "",
+  icon: "",
+  apiUrl: "",
+  apiMethod: "",
+  sortOrder: 0,
+  visible: 1,
+  status: 1
+});
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<FormItemProps>({ ...props });
+
+const getRef = () => ruleFormRef.value;
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="formRules as FormRules"
+    label-width="100px"
+  >
+    <el-form-item label="权限名称" prop="permissionName">
+      <el-input
+        v-model="ruleForm.permissionName"
+        placeholder="请输入权限名称"
+        clearable
+      />
+    </el-form-item>
+    <el-form-item label="权限编码" prop="permissionCode">
+      <el-input
+        v-model="ruleForm.permissionCode"
+        placeholder="请输入权限编码"
+        clearable
+      />
+    </el-form-item>
+    <el-form-item label="权限类型" prop="permissionType">
+      <el-radio-group v-model="ruleForm.permissionType">
+        <el-radio :label="1">菜单</el-radio>
+        <el-radio :label="2">按钮</el-radio>
+        <el-radio :label="3">接口</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="路由路径" prop="path">
+      <el-input
+        v-model="ruleForm.path"
+        placeholder="请输入路由路径"
+        clearable
+      />
+    </el-form-item>
+    <el-form-item label="组件路径" prop="component">
+      <el-input
+        v-model="ruleForm.component"
+        placeholder="请输入组件路径"
+        clearable
+      />
+    </el-form-item>
+    <el-form-item label="图标" prop="icon">
+      <el-input
+        v-model="ruleForm.icon"
+        placeholder="请输入图标类名"
+        clearable
+      />
+    </el-form-item>
+    <el-form-item label="API地址" prop="apiUrl">
+      <el-input
+        v-model="ruleForm.apiUrl"
+        placeholder="请输入API地址"
+        clearable
+      />
+    </el-form-item>
+    <el-form-item label="请求方法" prop="apiMethod">
+      <el-select
+        v-model="ruleForm.apiMethod"
+        placeholder="请选择请求方法"
+        clearable
+        class="w-full"
+      >
+        <el-option label="GET" value="GET" />
+        <el-option label="POST" value="POST" />
+        <el-option label="PUT" value="PUT" />
+        <el-option label="DELETE" value="DELETE" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="排序" prop="sortOrder">
+      <el-input-number
+        v-model="ruleForm.sortOrder"
+        :min="0"
+        :max="999"
+        controls-position="right"
+        class="w-full"
+      />
+    </el-form-item>
+    <el-form-item label="是否可见" prop="visible">
+      <el-radio-group v-model="ruleForm.visible">
+        <el-radio :label="1">可见</el-radio>
+        <el-radio :label="0">隐藏</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="状态" prop="status">
+      <el-radio-group v-model="ruleForm.status">
+        <el-radio :label="1">启用</el-radio>
+        <el-radio :label="0">禁用</el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </el-form>
+</template>
--- a/src/views/system/permission/form/rules.ts
+++ b/src/views/system/permission/form/rules.ts
@@ -0,0 +1,13 @@
+import type { FormRules } from "element-plus";
+
+export const formRules: FormRules = {
+  permissionName: [
+    { required: true, message: "权限名称为必填项", trigger: "blur" }
+  ],
+  permissionCode: [
+    { required: true, message: "权限编码为必填项", trigger: "blur" }
+  ],
+  permissionType: [
+    { required: true, message: "权限类型为必填项", trigger: "change" }
+  ]
+};
--- a/src/views/system/permission/index.vue
+++ b/src/views/system/permission/index.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { usePermission } from "./utils/hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "~icons/ep/delete";
+import EditPen from "~icons/ep/edit-pen";
+import AddFill from "~icons/ri/add-circle-line";
+import Refresh from "~icons/ep/refresh";
+
+defineOptions({
+  name: "SystemPermission"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  selectedNum,
+  pagination,
+  buttonClass,
+  deviceDetection,
+  onSearch,
+  resetForm,
+  onbatchDel,
+  openDialog,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCurrentChange,
+  handleSelectionChange
+} = usePermission(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
+    >
+      <el-form-item label="权限名称：" prop="permissionName">
+        <el-input
+          v-model="form.permissionName"
+          placeholder="请输入权限名称"
+          clearable
+          class="w-45!"
+        />
+      </el-form-item>
+      <el-form-item label="权限编码：" prop="permissionCode">
+        <el-input
+          v-model="form.permissionCode"
+          placeholder="请输入权限编码"
+          clearable
+          class="w-45!"
+        />
+      </el-form-item>
+      <el-form-item label="状态：" prop="status">
+        <el-select
+          v-model="form.status"
+          placeholder="请选择"
+          clearable
+          class="w-45!"
+        >
+          <el-option label="已开启" :value="1" />
+          <el-option label="已关闭" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri/search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar title="权限管理" :columns="columns" @refresh="onSearch">
+      <template #buttons>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
+          新增权限
+        </el-button>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-(--el-fill-color-light) w-full h-11.5 mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1!"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 108 }"
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="{ ...pagination, size }"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          row-class-name="permission-table-row"
+          @selection-change="handleSelectionChange"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(EditPen)"
+              @click="openDialog('修改', row)"
+            >
+              修改
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除权限编号为${row.id}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(Delete)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-button:focus-visible) {
+  outline: none;
+}
+
+.main {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+
+:deep(.permission-table-row) {
+  &.level-1 {
+    background-color: var(--el-fill-color-light);
+  }
+}
+</style>
--- a/src/views/system/permission/utils/hook.tsx
+++ b/src/views/system/permission/utils/hook.tsx
@@ -0,0 +1,292 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { addDialog } from "@/components/ReDialog";
+import type { PaginationProps } from "@pureadmin/table";
+import type { FormItemProps } from "./types";
+import editForm from "../form/index.vue";
+import { getPermissionTree } from "@/api/system";
+import { type Ref, h, ref, computed, reactive, onMounted } from "vue";
+import { getKeyList, deviceDetection } from "@pureadmin/utils";
+import { ElMessageBox } from "element-plus";
+
+export function usePermission(tableRef: Ref) {
+  const form = reactive({
+    permissionName: "",
+    permissionCode: "",
+    status: undefined as number | undefined
+  });
+  const formRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const switchLoadMap = ref({});
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+
+  const columns: TableColumnList = [
+    {
+      label: "勾选列",
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true
+    },
+    {
+      label: "权限编号",
+      prop: "id",
+      width: 90
+    },
+    {
+      label: "权限名称",
+      prop: "permissionName",
+      minWidth: 150,
+      align: "left",
+      cellRenderer: ({ row }) => (
+        <span style={{ paddingLeft: `${(row.level || 0) * 20}px` }}>
+          {row.permissionName}
+        </span>
+      )
+    },
+    {
+      label: "权限编码",
+      prop: "permissionCode",
+      minWidth: 150
+    },
+    {
+      label: "权限类型",
+      prop: "permissionType",
+      minWidth: 100,
+      cellRenderer: ({ row }) => {
+        const typeMap = {
+          1: { text: "菜单", type: "primary" },
+          2: { text: "按钮", type: "warning" },
+          3: { text: "接口", type: "success" }
+        };
+        const typeInfo = typeMap[row.permissionType] || {
+          text: "未知",
+          type: "info"
+        };
+        return (
+          <el-tag type={typeInfo.type} effect="plain">
+            {typeInfo.text}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "路径",
+      prop: "path",
+      minWidth: 150
+    },
+    {
+      label: "排序",
+      prop: "sortOrder",
+      width: 80
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 90,
+      cellRenderer: scope => (
+        <el-switch
+          size={scope.props.size === "small" ? "small" : "default"}
+          loading={switchLoadMap.value[scope.index]?.loading}
+          v-model={scope.row.status}
+          active-value={1}
+          inactive-value={0}
+          active-text="已启用"
+          inactive-text="已停用"
+          inline-prompt
+          onChange={() => onChange(scope as any)}
+        />
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 120,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        createTime ? dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") : "-"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 180,
+      slot: "operation"
+    }
+  ];
+
+  const buttonClass = computed(() => {
+    return [
+      "h-5!",
+      "reset-margin",
+      "text-gray-500!",
+      "dark:text-white!",
+      "dark:hover:text-primary!"
+    ];
+  });
+
+  function onChange({ row, index }) {
+    const action = row.status === 0 ? "停用" : "启用";
+    ElMessageBox.confirm(
+      `确认要<strong>${action}</strong><strong style='color:var(--el-color-primary)'>${row.permissionName}</strong>权限吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        switchLoadMap.value[index] = { loading: true };
+        setTimeout(() => {
+          switchLoadMap.value[index] = { loading: false };
+          message(`已成功${action}权限`, { type: "success" });
+        }, 300);
+      })
+      .catch(() => {
+        row.status = row.status === 0 ? 1 : 0;
+      });
+  }
+
+  function handleDelete(row) {
+    message(`您删除了权限编号为${row.id}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    tableRef.value?.setAdaptive();
+  }
+
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    tableRef.value?.getTableRef().clearSelection();
+  }
+
+  function onbatchDel() {
+    const curSelected = tableRef.value?.getTableRef().getSelectionRows();
+    message(`已删除权限编号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value?.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    try {
+      const { code, data } = await getPermissionTree();
+      if (code === 200) {
+        dataList.value = data || [];
+        pagination.total = data?.length || 0;
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    }
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}权限`,
+      props: {
+        formInline: {
+          title,
+          id: row?.id ?? "",
+          parentId: row?.parentId ?? 0,
+          permissionName: row?.permissionName ?? "",
+          permissionCode: row?.permissionCode ?? "",
+          permissionType: row?.permissionType ?? 1,
+          path: row?.path ?? "",
+          component: row?.component ?? "",
+          icon: row?.icon ?? "",
+          apiUrl: row?.apiUrl ?? "",
+          apiMethod: row?.apiMethod ?? "",
+          sortOrder: row?.sortOrder ?? 0,
+          visible: row?.visible ?? 1,
+          status: row?.status ?? 1
+        }
+      },
+      width: "46%",
+      draggable: true,
+      fullscreen: deviceDetection(),
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value?.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了权限名称为${curData.permissionName}的这条数据`, {
+            type: "success"
+          });
+          done();
+          onSearch();
+        }
+        FormRef?.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            if (title === "新增") {
+              chores();
+            } else {
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    selectedNum,
+    pagination,
+    buttonClass,
+    deviceDetection,
+    onSearch,
+    resetForm,
+    onbatchDel,
+    openDialog,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
--- a/src/views/system/permission/utils/types.ts
+++ b/src/views/system/permission/utils/types.ts
@@ -0,0 +1,15 @@
+export interface FormItemProps {
+  id?: number;
+  parentId?: number;
+  permissionName?: string;
+  permissionCode?: string;
+  permissionType?: number;
+  path?: string;
+  component?: string;
+  icon?: string;
+  apiUrl?: string;
+  apiMethod?: string;
+  sortOrder?: number;
+  visible?: number;
+  status?: number;
+}
--- a/src/views/system/role/form.vue
+++ b/src/views/system/role/form.vue
@@ -5,9 +5,13 @@ import { FormProps } from "./utils/types";

 const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
-    name: "",
-    code: "",
-    remark: ""
+    roleName: "",
+    roleCode: "",
+    roleType: "custom",
+    description: "",
+    dataScope: 1,
+    sortOrder: 0,
+    status: 1
  })
 });

@@ -28,26 +32,43 @@ defineExpose({ getRef });
    :rules="formRules"
    label-width="82px"
  >
-    <el-form-item label="角色名称" prop="name">
+    <el-form-item label="角色名称" prop="roleName">
      <el-input
-        v-model="newFormInline.name"
+        v-model="newFormInline.roleName"
        clearable
        placeholder="请输入角色名称"
      />
    </el-form-item>

-    <el-form-item label="角色标识" prop="code">
+    <el-form-item label="角色编码" prop="roleCode">
      <el-input
-        v-model="newFormInline.code"
+        v-model="newFormInline.roleCode"
        clearable
-        placeholder="请输入角色标识"
+        placeholder="请输入角色编码"
      />
    </el-form-item>

-    <el-form-item label="备注">
+    <el-form-item label="角色类型">
+      <el-radio-group v-model="newFormInline.roleType">
+        <el-radio label="system">系统角色</el-radio>
+        <el-radio label="custom">自定义角色</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-form-item label="数据权限">
+      <el-select v-model="newFormInline.dataScope" placeholder="请选择数据权限">
+        <el-option :value="1" label="全部数据" />
+        <el-option :value="2" label="本部门及以下" />
+        <el-option :value="3" label="本部门" />
+        <el-option :value="4" label="仅本人" />
+        <el-option :value="5" label="自定义" />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="描述">
      <el-input
-        v-model="newFormInline.remark"
-        placeholder="请输入备注信息"
+        v-model="newFormInline.description"
+        placeholder="请输入描述信息"
        type="textarea"
      />
    </el-form-item>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -95,18 +95,18 @@ onMounted(() => {
      :model="form"
      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
-      <el-form-item label="角色名称：" prop="name">
+      <el-form-item label="角色名称：" prop="roleName">
        <el-input
-          v-model="form.name"
+          v-model="form.roleName"
          placeholder="请输入角色名称"
          clearable
          class="w-45!"
        />
      </el-form-item>
-      <el-form-item label="角色标识：" prop="code">
+      <el-form-item label="角色编码：" prop="roleCode">
        <el-input
-          v-model="form.code"
-          placeholder="请输入角色标识"
+          v-model="form.roleCode"
+          placeholder="请输入角色编码"
          clearable
          class="w-45!"
        />
@@ -144,7 +144,7 @@ onMounted(() => {
      <PureTableBar
        :class="[isShow && !deviceDetection() ? 'w-[60vw]!' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
-        title="角色管理（仅演示，操作后不生效）"
+        title="角色管理"
        :columns="columns"
        @refresh="onSearch"
      >
@@ -191,7 +191,7 @@ onMounted(() => {
                修改
              </el-button>
              <el-popconfirm
-                :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                :title="`是否确认删除角色名称为${row.roleName}的这条数据`"
                @confirm="handleDelete(row)"
              >
                <template #reference>
@@ -214,7 +214,7 @@ onMounted(() => {
                :icon="useRenderIcon(Menu)"
                @click="handleMenu(row)"
              >
-                权限
+                分配权限
              </el-button>
              <!-- <el-dropdown>
              <el-button
@@ -279,7 +279,7 @@ onMounted(() => {
            <span :class="[iconClass, 'ml-2']">
              <IconifyIconOffline
                v-tippy="{
-                  content: '保存菜单权限'
+                  content: '保存权限'
                }"
                class="dark:text-white"
                width="18px"
@@ -290,13 +290,13 @@ onMounted(() => {
            </span>
          </div>
          <p class="font-bold truncate">
-            菜单权限
-            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
+            权限设置
+            {{ `${curRow?.roleName ? `（${curRow.roleName}）` : ""}` }}
          </p>
        </div>
        <el-input
          v-model="treeSearchValue"
-          placeholder="请输入菜单进行搜索"
+          placeholder="请输入权限名称进行搜索"
          class="mb-1"
          clearable
          @input="onQueryChanged"
@@ -316,7 +316,7 @@ onMounted(() => {
          :filter-method="filterMethod"
        >
          <template #default="{ node }">
-            <span>{{ transformI18n(node.label) }}</span>
+            <span>{{ node.label }}</span>
          </template>
        </el-tree-v2>
      </div>
--- a/src/views/system/role/utils/hook.tsx
+++ b/src/views/system/role/utils/hook.tsx
@@ -9,13 +9,18 @@ import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
 import { getKeyList, deviceDetection } from "@pureadmin/utils";
-import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
-import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
+import {
+  getRoleList,
+  getPermissionList,
+  getRolePermissions,
+  assignRolePermissions
+} from "@/api/system";
+import { type Ref, reactive, ref, onMounted, h, watch } from "vue";

 export function useRole(treeRef: Ref) {
  const form = reactive({
-    name: "",
-    code: "",
+    roleName: "",
+    roleCode: "",
    status: ""
  });
  const curRow = ref();
@@ -33,7 +38,7 @@ export function useRole(treeRef: Ref) {
  const { switchStyle } = usePublicHooks();
  const treeProps = {
    value: "id",
-    label: "title",
+    label: "permissionName",
    children: "children"
  };
  const pagination = reactive<PaginationProps>({
@@ -49,11 +54,23 @@ export function useRole(treeRef: Ref) {
    },
    {
      label: "角色名称",
-      prop: "name"
+      prop: "roleName"
    },
    {
-      label: "角色标识",
-      prop: "code"
+      label: "角色编码",
+      prop: "roleCode"
+    },
+    {
+      label: "角色类型",
+      prop: "roleType",
+      cellRenderer: ({ row }) => (
+        <el-tag
+          type={row.roleType === "system" ? "danger" : "info"}
+          effect="plain"
+        >
+          {row.roleType === "system" ? "系统角色" : "自定义角色"}
+        </el-tag>
+      )
    },
    {
      label: "状态",
@@ -74,8 +91,8 @@ export function useRole(treeRef: Ref) {
      minWidth: 90
    },
    {
-      label: "备注",
-      prop: "remark",
+      label: "描述",
+      prop: "description",
      minWidth: 160
    },
    {
@@ -107,7 +124,7 @@ export function useRole(treeRef: Ref) {
      `确认要<strong>${
        row.status === 0 ? "停用" : "启用"
      }</strong><strong style='color:var(--el-color-primary)'>${
-        row.name
+        row.roleName
      }</strong>吗?`,
      "系统提示",
      {
@@ -134,7 +151,7 @@ export function useRole(treeRef: Ref) {
              loading: false
            }
          );
-          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.roleName}`, {
            type: "success"
          });
        }, 300);
@@ -145,7 +162,7 @@ export function useRole(treeRef: Ref) {
  }

  function handleDelete(row) {
-    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "success" });
    onSearch();
  }

@@ -163,12 +180,16 @@ export function useRole(treeRef: Ref) {

  async function onSearch() {
    loading.value = true;
-    const { code, data } = await getRoleList(toRaw(form));
-    if (code === 0) {
-      dataList.value = data.list;
+    const { code, data } = await getRoleList({
+      pageNum: pagination.currentPage,
+      pageSize: pagination.pageSize,
+      keyword: form.roleName || form.roleCode || undefined
+    });
+    if (code === 200) {
+      dataList.value = data.records;
      pagination.total = data.total;
-      pagination.pageSize = data.pageSize;
-      pagination.currentPage = data.currentPage;
+      pagination.pageSize = data.size;
+      pagination.currentPage = data.current;
    }

    setTimeout(() => {
@@ -187,9 +208,13 @@ export function useRole(treeRef: Ref) {
      title: `${title}角色`,
      props: {
        formInline: {
-          name: row?.name ?? "",
-          code: row?.code ?? "",
-          remark: row?.remark ?? ""
+          roleName: row?.roleName ?? "",
+          roleCode: row?.roleCode ?? "",
+          roleType: row?.roleType ?? "custom",
+          description: row?.description ?? "",
+          dataScope: row?.dataScope ?? 1,
+          sortOrder: row?.sortOrder ?? 0,
+          status: row?.status ?? 1
        }
      },
      width: "40%",
@@ -202,7 +227,7 @@ export function useRole(treeRef: Ref) {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;
        function chores() {
-          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+          message(`您${title}了角色名称为${curData.roleName}的这条数据`, {
            type: "success"
          });
          done(); // 关闭弹框
@@ -225,15 +250,18 @@ export function useRole(treeRef: Ref) {
    });
  }

-  /** 菜单权限 */
+  /** 权限设置 */
  async function handleMenu(row?: any) {
    const { id } = row;
    if (id) {
      curRow.value = row;
      isShow.value = true;
-      const { code, data } = await getRoleMenuIds({ id });
-      if (code === 0) {
-        treeRef.value.setCheckedKeys(data);
+      // 获取该角色的权限列表
+      const { code, data } = await getRolePermissions(id);
+      if (code === 200) {
+        // 从返回的权限对象列表中提取已选中的权限ID
+        const checkedIds = data.map(item => item.id);
+        treeRef.value.setCheckedKeys(checkedIds);
      }
    } else {
      curRow.value = null;
@@ -249,14 +277,19 @@ export function useRole(treeRef: Ref) {
    };
  }

-  /** 菜单权限-保存 */
-  function handleSave() {
-    const { id, name } = curRow.value;
-    // 根据用户 id 调用实际项目中菜单权限修改接口
-    console.log(id, treeRef.value.getCheckedKeys());
-    message(`角色名称为${name}的菜单权限修改成功`, {
-      type: "success"
-    });
+  /** 权限保存 */
+  async function handleSave() {
+    const { id, roleName } = curRow.value;
+    const checkedKeys = treeRef.value.getCheckedKeys();
+    const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();
+    const permissionIds = [...checkedKeys, ...halfCheckedKeys];
+
+    const { code } = await assignRolePermissions(id, permissionIds);
+    if (code === 200) {
+      message(`角色名称为${roleName}的权限修改成功`, {
+        type: "success"
+      });
+    }
  }

  /** 数据权限 可自行开发 */
@@ -267,15 +300,20 @@ export function useRole(treeRef: Ref) {
  };

  const filterMethod = (query: string, node) => {
-    return transformI18n(node.title)!.includes(query);
+    return node.label?.includes(query);
  };

  onMounted(async () => {
    onSearch();
-    const { code, data } = await getRoleMenu();
-    if (code === 0) {
-      treeIds.value = getKeyList(data, "id");
-      treeData.value = handleTree(data);
+    // 获取所有权限列表用于构建树
+    const { code, data } = await getPermissionList({
+      pageNum: 1,
+      pageSize: 1000
+    });
+    if (code === 200) {
+      treeIds.value = getKeyList(data.records, "id");
+      // 将权限数据转换为树形结构
+      treeData.value = handleTree(data.records);
    }
  });

--- a/src/views/system/role/utils/rule.ts
+++ b/src/views/system/role/utils/rule.ts
@@ -3,6 +3,6 @@ import type { FormRules } from "element-plus";

 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
-  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+  roleName: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  roleCode: [{ required: true, message: "角色编码为必填项", trigger: "blur" }]
 });
--- a/src/views/system/role/utils/types.ts
+++ b/src/views/system/role/utils/types.ts
@@ -2,11 +2,19 @@

 interface FormItemProps {
  /** 角色名称 */
-  name: string;
-  /** 角色编号 */
-  code: string;
-  /** 备注 */
-  remark: string;
+  roleName: string;
+  /** 角色编码 */
+  roleCode: string;
+  /** 角色类型 */
+  roleType?: string;
+  /** 描述 */
+  description: string;
+  /** 数据权限 */
+  dataScope?: number;
+  /** 排序 */
+  sortOrder?: number;
+  /** 状态 */
+  status?: number;
 }
 interface FormProps {
  formInline: FormItemProps;
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -30,16 +30,7 @@ import {
  ElProgress,
  ElMessageBox
 } from "element-plus";
-import {
-  type Ref,
-  h,
-  ref,
-  toRaw,
-  watch,
-  computed,
-  reactive,
-  onMounted
-} from "vue";
+import { type Ref, h, ref, watch, computed, reactive, onMounted } from "vue";

 export function useUser(tableRef: Ref, treeRef: Ref) {
  const form = reactive({
@@ -187,11 +178,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

  function onChange({ row, index }) {
    ElMessageBox.confirm(
-      `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
-      }</strong><strong style='color:var(--el-color-primary)'>${
-        row.username
-      }</strong>用户吗?`,
+      `确认要<strong>${row.status === 0 ? "停用" : "启用"}</strong><strong style='color:var(--el-color-primary)'>${row.username}</strong>用户吗?`,
      "系统提示",
      {
        confirmButtonText: "确定",
@@ -272,12 +259,16 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

  async function onSearch() {
    loading.value = true;
-    const { code, data } = await getUserList(toRaw(form));
-    if (code === 0) {
-      dataList.value = data.list;
+    const { code, data } = await getUserList({
+      pageNum: pagination.currentPage,
+      pageSize: pagination.pageSize,
+      keyword: form.username || form.phone || undefined
+    });
+    if (code === 200) {
+      dataList.value = data.records;
      pagination.total = data.total;
-      pagination.pageSize = data.pageSize;
-      pagination.currentPage = data.currentPage;
+      pagination.pageSize = data.size;
+      pagination.currentPage = data.current;
    }

    setTimeout(() => {
@@ -500,7 +491,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

    // 归属部门
    const { code, data } = await getDeptList();
-    if (code === 0) {
+    if (code === 200) {
      higherDeptOptions.value = handleTree(data);
      treeData.value = handleTree(data);
    }