完成角色管理功能开发

1. 后端实现：
   - 创建RoleController、RoleService及相关DTO
   - 实现角色的增删改查功能
   - 实现角色权限管理功能
   - 实现角色用户管理功能
   - 修复实体类表名和字段名问题

2. 前端实现：
   - 创建RoleManagement.vue组件
   - 创建UserSelectDialog.vue通用组件
   - 实现角色列表查询、新增、修改、删除功能
   - 实现权限树状控件，支持父子节点联动选择
   - 实现人员管理功能，支持用户选择和移除
   - 按照用户管理布局优化角色管理排版
   - 实现表格列头排序功能（数据库级排序）
   - 实现Loading状态管理
   - 实现固定列和连续序号

3. 文档更新：
   - 创建角色管理功能需求文档
   - 更新web前端最佳实践文档，添加表格高度宽度规范、Loading状态管理、图标按钮使用规范

4. 路由配置：
   - 更新前端路由，添加角色管理路由

.trae/rules/web-dev-best-practices.md

@@ -111,6 +111,18 @@
   display: flex;
   flex-direction: column;
 }
+
+.pagination {
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 ```
 
 **关键间距说明：**
@@ -127,6 +139,69 @@
 
 **注意：** 所有间距都应保持紧凑，避免过大的空白区域，确保界面紧凑、专业。
 
+### 1.3 表格高度和宽度规范
+
+```vue
+<el-table
+  :data="tableData"
+  stripe
+  border
+  size="default"
+  :header-cell-style="{ background: '#f5f7fa', color: '#303133', fontWeight: 'bold' }"
+  style="width: calc(100vw - 331px); height: calc(100vh - 395px);">
+```
+
+**说明：**
+- 表格宽度：`calc(100vw - 331px)`，确保表格宽度适应视口宽度，减去侧边栏和边距
+- 表格高度：`calc(100vh - 395px)`，确保表格高度适应视口高度，减去标题、查询条件、操作按钮和分页的高度
+- 使用`size="default"`确保表格使用紧凑模式
+
+### 1.4 Loading状态管理
+
+```javascript
+const loading = ref(false)
+const deleteLoading = ref(false)
+
+const getUsers = async () => {
+  if (loading.value) return
+  
+  loading.value = true
+  try {
+    const response = await request.get('/user/list', {
+      params: {
+        ...queryForm,
+        page: currentPage.value,
+        pageSize: pageSize.value,
+        sortBy: sortMap.value.sortBy,
+        sortOrder: sortMap.value.sortOrder
+      }
+    })
+    userList.value = response.data.content
+    total.value = response.data.totalElements
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+    ElMessage.error('获取用户列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+```
+
+**Loading状态应用：**
+```vue
+<el-button type="primary" @click="getUsers" :loading="loading">查询</el-button>
+<el-button @click="resetSearchForm" :loading="loading">重置</el-button>
+<el-button type="danger" @click="deleteSelectedUsers" :disabled="selectedIds.length === 0" :loading="deleteLoading">删除</el-button>
+<el-table v-loading="loading" :data="userList">...</el-table>
+```
+
+**注意：**
+- 查询和重置按钮使用`loading`状态
+- 删除按钮使用`deleteLoading`状态
+- 表格使用`loading`状态
+- 在方法开始时检查`loading.value`，防止重复点击
+- 使用`try-finally`确保loading状态一定会被恢复
+
 ## 2. 表格设计规范
 
 ### 2.1 表格属性
@@ -145,20 +220,24 @@
 
 ### 2.2 列设计规范
 
-- **序号列**：宽度50px，固定居中
+- **序号列**：宽度60px，固定居中，使用自定义模板实现连续序号
 - **选择列**：宽度55px，固定居中
-- **操作列**：宽度120px，固定右侧
+- **操作列**：宽度180px，固定右侧，使用图标按钮
 - **状态列**：宽度80px，居中显示，使用el-tag
 - **日期时间列**：宽度160px，居中显示
 - **用户名列**：宽度100px
 - **账号列**：宽度100px
 - **用户角色列**：宽度150px
 - **企业微信账号列**：宽度120px
-- **其他文本列**：使用min-width，支持文本溢出显示
+- **其他文本列**：使用固定宽度，支持文本溢出显示
 
 ```vue
 <el-table-column type="selection" width="55" fixed align="center"></el-table-column>
-<el-table-column type="index" label="序号" width="50" fixed align="center"></el-table-column>
+<el-table-column label="序号" width="60" fixed align="center">
+  <template #default="{ $index }">
+    {{ (currentPage - 1) * pageSize + $index + 1 }}
+  </template>
+</el-table-column>
 <el-table-column prop="name" label="用户名" width="100" sortable show-overflow-tooltip></el-table-column>
 <el-table-column prop="loginId" label="账号" width="100" sortable show-overflow-tooltip></el-table-column>
 <el-table-column prop="roleName" label="用户角色" width="150" sortable show-overflow-tooltip></el-table-column>
@@ -180,18 +259,23 @@
     {{ formatDateTime(scope.row.modifyTime) }}
   </template>
 </el-table-column>
-<el-table-column label="操作" width="120" align="center" fixed="right">
+<el-table-column label="操作" width="180" align="center" fixed="right">
   <template #default="{ row }">
-    <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
-    <el-button link type="danger" size="small" @click="delete(row.id)">删除</el-button>
+    <el-tooltip content="编辑" placement="top">
+      <el-button type="primary" :icon="Edit" circle size="small" @click="edit(row)"></el-button>
+    </el-tooltip>
+    <el-tooltip content="删除" placement="top">
+      <el-button type="danger" :icon="Delete" circle size="small" @click="delete(row.id)"></el-button>
+    </el-tooltip>
   </template>
 </el-table-column>
 ```
 
 **重要说明：**
 - 使用固定宽度（width）而不是最小宽度（min-width）可以避免标题栏分行
-- 序号列使用50px而不是60px，更加紧凑
-- 操作列使用120px，足够容纳两个按钮
+- 序号列使用自定义模板实现连续序号，公式为`(currentPage - 1) * pageSize + $index + 1`，确保分页时序号连续
+- 序号列宽度使用60px，比原来的50px更合适，可以显示更大的页码
+- 操作列使用180px，足够容纳3个图标按钮
 - 状态列使用80px，足够显示状态标签
 - 用户名和账号列使用100px，适合大多数情况
 - 用户角色列使用150px，可以容纳多个角色名称（用逗号分隔）

JavaBackend/src/main/java/com/lianda/backend/controller/RoleController.java

@@ -0,0 +1,114 @@
+package com.lianda.backend.controller;
+
+import com.lianda.backend.dto.*;
+import com.lianda.backend.service.RoleService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+/**
+ * 角色管理Controller
+ */
+@RestController
+@RequestMapping("/role")
+public class RoleController {
+
+    private static final Logger logger = LoggerFactory.getLogger(RoleController.class);
+
+    @Autowired
+    private RoleService roleService;
+
+    /**
+     * 查询角色列表
+     */
+    @GetMapping("/list")
+    public Page<RoleDTO> listRoles(RoleQueryDTO queryDTO) {
+        logger.info("接收到查询角色列表请求");
+        return roleService.queryRoles(queryDTO);
+    }
+
+    /**
+     * 获取功能代码树
+     */
+    @GetMapping("/functionCodeTree")
+    public List<FunctionCodeTreeNodeDTO> getFunctionCodeTree() {
+        logger.info("接收到获取功能代码树请求");
+        return roleService.getFunctionCodeTree();
+    }
+
+    /**
+     * 获取角色的功能代码列表
+     */
+    @GetMapping("/{roleId}/functionCodes")
+    public List<String> getRoleFunctionCodes(@PathVariable String roleId) {
+        logger.info("接收到获取角色功能代码列表请求，角色ID：{}", roleId);
+        return roleService.getRoleFunctionCodes(roleId);
+    }
+
+    /**
+     * 新增角色
+     */
+    @PostMapping("/create")
+    public RoleDTO createRole(@RequestBody RoleSaveDTO roleSaveDTO) {
+        logger.info("接收到创建角色请求，角色名称：{}", roleSaveDTO.getRoleName());
+        return roleService.createRole(roleSaveDTO);
+    }
+
+    /**
+     * 修改角色
+     */
+    @PostMapping("/update")
+    public RoleDTO updateRole(@RequestBody RoleSaveDTO roleSaveDTO) {
+        logger.info("接收到修改角色请求，角色ID：{}", roleSaveDTO.getRoleId());
+        return roleService.updateRole(roleSaveDTO);
+    }
+
+    /**
+     * 删除角色
+     */
+    @DeleteMapping("/delete/{roleId}")
+    public void deleteRole(@PathVariable String roleId) {
+        logger.info("接收到删除角色请求，角色ID：{}", roleId);
+        roleService.deleteRole(roleId);
+    }
+
+    /**
+     * 批量删除角色
+     */
+    @DeleteMapping("/delete")
+    public void deleteRoles(@RequestBody List<String> roleIds) {
+        logger.info("接收到批量删除角色请求，角色ID列表：{}", roleIds);
+        roleService.deleteRoles(roleIds);
+    }
+
+    /**
+     * 获取角色的用户列表
+     */
+    @GetMapping("/{roleId}/users")
+    public Page<UserDTO> getRoleUsers(@PathVariable String roleId, UserQueryDTO queryDTO) {
+        logger.info("接收到获取角色用户列表请求，角色ID：{}", roleId);
+        return roleService.getRoleUsers(roleId, queryDTO);
+    }
+
+    /**
+     * 添加用户到角色
+     */
+    @PostMapping("/{roleId}/addUsers")
+    public void addUsersToRole(@PathVariable String roleId, @RequestBody List<String> userIds) {
+        logger.info("接收到添加用户到角色请求，角色ID：{}，用户ID列表：{}", roleId, userIds);
+        roleService.addUsersToRole(roleId, userIds);
+    }
+
+    /**
+     * 从角色中移除用户
+     */
+    @DeleteMapping("/{roleId}/user/{userId}")
+    public void removeUserFromRole(@PathVariable String roleId, @PathVariable String userId) {
+        logger.info("接收到从角色中移除用户请求，角色ID：{}，用户ID：{}", roleId, userId);
+        roleService.removeUserFromRole(roleId, userId);
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/dto/FunctionCodeTreeNodeDTO.java

@@ -0,0 +1,64 @@
+package com.lianda.backend.dto;
+
+import java.util.List;
+
+/**
+ * 功能代码树节点DTO
+ */
+public class FunctionCodeTreeNodeDTO {
+
+    private String id;
+    private String label;
+    private String functionCode;
+    private String parentFunctionCode;
+    private Integer orderNo;
+    private List<FunctionCodeTreeNodeDTO> children;
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getLabel() {
+        return label;
+    }
+
+    public void setLabel(String label) {
+        this.label = label;
+    }
+
+    public String getFunctionCode() {
+        return functionCode;
+    }
+
+    public void setFunctionCode(String functionCode) {
+        this.functionCode = functionCode;
+    }
+
+    public String getParentFunctionCode() {
+        return parentFunctionCode;
+    }
+
+    public void setParentFunctionCode(String parentFunctionCode) {
+        this.parentFunctionCode = parentFunctionCode;
+    }
+
+    public Integer getOrderNo() {
+        return orderNo;
+    }
+
+    public void setOrderNo(Integer orderNo) {
+        this.orderNo = orderNo;
+    }
+
+    public List<FunctionCodeTreeNodeDTO> getChildren() {
+        return children;
+    }
+
+    public void setChildren(List<FunctionCodeTreeNodeDTO> children) {
+        this.children = children;
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/dto/RoleDTO.java

@@ -0,0 +1,92 @@
+package com.lianda.backend.dto;
+
+import java.util.Date;
+import java.util.List;
+
+/**
+ * 角色DTO
+ */
+public class RoleDTO {
+
+    private String roleId;
+    private String roleName;
+    private String description;
+    private Boolean isSystemRole;
+    private Integer recordStatus;
+    private String recordStatusName;
+    private Date createTime;
+    private Date modifyTime;
+    private List<String> functionCodes;
+
+    public String getRoleId() {
+        return roleId;
+    }
+
+    public void setRoleId(String roleId) {
+        this.roleId = roleId;
+    }
+
+    public String getRoleName() {
+        return roleName;
+    }
+
+    public void setRoleName(String roleName) {
+        this.roleName = roleName;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public Boolean getIsSystemRole() {
+        return isSystemRole;
+    }
+
+    public void setIsSystemRole(Boolean isSystemRole) {
+        this.isSystemRole = isSystemRole;
+    }
+
+    public Integer getRecordStatus() {
+        return recordStatus;
+    }
+
+    public void setRecordStatus(Integer recordStatus) {
+        this.recordStatus = recordStatus;
+    }
+
+    public String getRecordStatusName() {
+        return recordStatusName;
+    }
+
+    public void setRecordStatusName(String recordStatusName) {
+        this.recordStatusName = recordStatusName;
+    }
+
+    public Date getCreateTime() {
+        return createTime;
+    }
+
+    public void setCreateTime(Date createTime) {
+        this.createTime = createTime;
+    }
+
+    public Date getModifyTime() {
+        return modifyTime;
+    }
+
+    public void setModifyTime(Date modifyTime) {
+        this.modifyTime = modifyTime;
+    }
+
+    public List<String> getFunctionCodes() {
+        return functionCodes;
+    }
+
+    public void setFunctionCodes(List<String> functionCodes) {
+        this.functionCodes = functionCodes;
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/dto/RoleQueryDTO.java

@@ -0,0 +1,71 @@
+package com.lianda.backend.dto;
+
+/**
+ * 角色查询DTO
+ */
+public class RoleQueryDTO {
+
+    private String roleName;
+    private Boolean isSystemRole;
+    private Integer recordStatus;
+    private Integer page = 0;
+    private Integer pageSize = 10;
+    private String sortBy;
+    private String sortOrder;
+
+    public String getRoleName() {
+        return roleName;
+    }
+
+    public void setRoleName(String roleName) {
+        this.roleName = roleName;
+    }
+
+    public Boolean getIsSystemRole() {
+        return isSystemRole;
+    }
+
+    public void setIsSystemRole(Boolean isSystemRole) {
+        this.isSystemRole = isSystemRole;
+    }
+
+    public Integer getRecordStatus() {
+        return recordStatus;
+    }
+
+    public void setRecordStatus(Integer recordStatus) {
+        this.recordStatus = recordStatus;
+    }
+
+    public Integer getPage() {
+        return page;
+    }
+
+    public void setPage(Integer page) {
+        this.page = page;
+    }
+
+    public Integer getPageSize() {
+        return pageSize;
+    }
+
+    public void setPageSize(Integer pageSize) {
+        this.pageSize = pageSize;
+    }
+
+    public String getSortBy() {
+        return sortBy;
+    }
+
+    public void setSortBy(String sortBy) {
+        this.sortBy = sortBy;
+    }
+
+    public String getSortOrder() {
+        return sortOrder;
+    }
+
+    public void setSortOrder(String sortOrder) {
+        this.sortOrder = sortOrder;
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/dto/RoleSaveDTO.java

@@ -0,0 +1,46 @@
+package com.lianda.backend.dto;
+
+import java.util.List;
+
+/**
+ * 角色保存DTO
+ */
+public class RoleSaveDTO {
+
+    private String roleId;
+    private String roleName;
+    private String description;
+    private List<String> functionCodes;
+
+    public String getRoleId() {
+        return roleId;
+    }
+
+    public void setRoleId(String roleId) {
+        this.roleId = roleId;
+    }
+
+    public String getRoleName() {
+        return roleName;
+    }
+
+    public void setRoleName(String roleName) {
+        this.roleName = roleName;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public List<String> getFunctionCodes() {
+        return functionCodes;
+    }
+
+    public void setFunctionCodes(List<String> functionCodes) {
+        this.functionCodes = functionCodes;
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/model/SysFunctionCode.java

@@ -0,0 +1,56 @@
+package com.lianda.backend.model;
+
+import javax.persistence.*;
+
+/**
+ * 功能代码表实体类
+ */
+@Entity
+@Table(name = "Sys_FunctionCode")
+public class SysFunctionCode {
+
+    @Id
+    @Column(name = "FunctionCode")
+    private String functionCode;
+
+    @Column(name = "FunctionName")
+    private String functionName;
+
+    @Column(name = "ParentFunctionCode")
+    private String parentFunctionCode;
+
+    @Column(name = "OrderNo")
+    private Integer orderNo;
+
+    public String getFunctionCode() {
+        return functionCode;
+    }
+
+    public void setFunctionCode(String functionCode) {
+        this.functionCode = functionCode;
+    }
+
+    public String getFunctionName() {
+        return functionName;
+    }
+
+    public void setFunctionName(String functionName) {
+        this.functionName = functionName;
+    }
+
+    public String getParentFunctionCode() {
+        return parentFunctionCode;
+    }
+
+    public void setParentFunctionCode(String parentFunctionCode) {
+        this.parentFunctionCode = parentFunctionCode;
+    }
+
+    public Integer getOrderNo() {
+        return orderNo;
+    }
+
+    public void setOrderNo(Integer orderNo) {
+        this.orderNo = orderNo;
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/model/SysRoleFunctionCode.java

@@ -0,0 +1,22 @@
+package com.lianda.backend.model;
+
+import javax.persistence.*;
+
+/**
+ * 角色功能代码关联表实体类
+ */
+@Entity
+@Table(name = "Sys_Role_Sys_FunctionCode")
+public class SysRoleFunctionCode {
+
+    @EmbeddedId
+    private SysRoleFunctionCodeId id;
+
+    public SysRoleFunctionCodeId getId() {
+        return id;
+    }
+
+    public void setId(SysRoleFunctionCodeId id) {
+        this.id = id;
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/model/SysRoleFunctionCodeId.java

@@ -0,0 +1,46 @@
+package com.lianda.backend.model;
+
+import java.io.Serializable;
+import javax.persistence.*;
+
+/**
+ * 角色功能代码关联表复合主键类
+ */
+@Embeddable
+public class SysRoleFunctionCodeId implements Serializable {
+
+    @Column(name = "RoleID")
+    private String roleId;
+
+    @Column(name = "FunctionCode")
+    private String functionCode;
+
+    public String getRoleId() {
+        return roleId;
+    }
+
+    public void setRoleId(String roleId) {
+        this.roleId = roleId;
+    }
+
+    public String getFunctionCode() {
+        return functionCode;
+    }
+
+    public void setFunctionCode(String functionCode) {
+        this.functionCode = functionCode;
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+        SysRoleFunctionCodeId that = (SysRoleFunctionCodeId) o;
+        return roleId.equals(that.roleId) && functionCode.equals(that.functionCode);
+    }
+
+    @Override
+    public int hashCode() {
+        return roleId.hashCode() + functionCode.hashCode();
+    }
+}

JavaBackend/src/main/java/com/lianda/backend/repository/SysFunctionCodeRepository.java

@@ -0,0 +1,29 @@
+package com.lianda.backend.repository;
+
+import com.lianda.backend.model.SysFunctionCode;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+/**
+ * 功能代码Repository接口
+ */
+@Repository
+public interface SysFunctionCodeRepository extends JpaRepository<SysFunctionCode, String> {
+
+    /**
+     * 根据父功能代码查询
+     */
+    List<SysFunctionCode> findByParentFunctionCode(String parentFunctionCode);
+
+    /**
+     * 根据父功能代码为空查询顶级功能代码
+     */
+    List<SysFunctionCode> findByParentFunctionCodeIsNull();
+
+    /**
+     * 查询所有功能代码并按序号排序
+     */
+    List<SysFunctionCode> findAllByOrderByOrderNoAsc();
+}

JavaBackend/src/main/java/com/lianda/backend/repository/SysRoleFunctionCodeRepository.java

@@ -0,0 +1,35 @@
+package com.lianda.backend.repository;
+
+import com.lianda.backend.model.SysRoleFunctionCode;
+import com.lianda.backend.model.SysRoleFunctionCodeId;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+/**
+ * 角色功能代码关联表Repository接口
+ */
+@Repository
+public interface SysRoleFunctionCodeRepository extends JpaRepository<SysRoleFunctionCode, SysRoleFunctionCodeId> {
+
+    /**
+     * 根据角色ID查询所有功能代码
+     */
+    @Query(value = "SELECT FunctionCode FROM Sys_Role_Sys_FunctionCode WHERE RoleID = :roleId", nativeQuery = true)
+    List<String> findFunctionCodesByRoleId(@Param("roleId") String roleId);
+
+    /**
+     * 根据角色ID删除所有功能代码关联
+     */
+    @Query(value = "DELETE FROM Sys_Role_Sys_FunctionCode WHERE RoleID = :roleId", nativeQuery = true)
+    void deleteByRoleId(@Param("roleId") String roleId);
+
+    /**
+     * 根据角色ID和功能代码查询
+     */
+    @Query(value = "SELECT * FROM Sys_Role_Sys_FunctionCode WHERE RoleID = :roleId AND FunctionCode = :functionCode", nativeQuery = true)
+    SysRoleFunctionCode findByRoleIdAndFunctionCode(@Param("roleId") String roleId, @Param("functionCode") String functionCode);
+}

JavaBackend/src/main/java/com/lianda/backend/service/RoleService.java

@@ -0,0 +1,435 @@
+package com.lianda.backend.service;
+
+import com.lianda.backend.dto.*;
+import com.lianda.backend.model.*;
+import com.lianda.backend.repository.*;
+import com.lianda.backend.config.DataSource;
+import com.lianda.backend.config.RoutingDataSourceConfig;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.*;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.text.SimpleDateFormat;
+import java.util.*;
+import java.util.stream.Collectors;
+
+/**
+ * 角色管理Service
+ */
+@Service
+public class RoleService {
+
+    private static final Logger logger = LoggerFactory.getLogger(RoleService.class);
+
+    @Autowired
+    private SysRoleRepository sysRoleRepository;
+
+    @Autowired
+    private SysFunctionCodeRepository sysFunctionCodeRepository;
+
+    @Autowired
+    private SysRoleFunctionCodeRepository sysRoleFunctionCodeRepository;
+
+    @Autowired
+    private SysUserRoleRepository sysUserRoleRepository;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    /**
+     * 查询角色列表
+     */
+    @Transactional(readOnly = true)
+    public Page<RoleDTO> queryRoles(RoleQueryDTO queryDTO) {
+        logger.info("开始查询角色列表，查询条件：{}", queryDTO.getRoleName());
+
+        try {
+            List<SysRole> roles;
+            long total = 0;
+
+            if (queryDTO.getRoleName() != null && !queryDTO.getRoleName().isEmpty()) {
+                roles = sysRoleRepository.findByRoleNameContaining(queryDTO.getRoleName());
+            } else {
+                roles = sysRoleRepository.findAll();
+            }
+
+            total = roles.size();
+
+            List<RoleDTO> roleDTOs = roles.stream()
+                    .map(this::convertToDTO)
+                    .collect(Collectors.toList());
+
+            int start = queryDTO.getPage() * queryDTO.getPageSize();
+            int end = Math.min(start + queryDTO.getPageSize(), roleDTOs.size());
+            List<RoleDTO> pageData = roleDTOs.subList(start, end);
+
+            logger.info("角色列表查询成功，共{}条记录", total);
+            return new PageImpl<>(pageData, PageRequest.of(queryDTO.getPage(), queryDTO.getPageSize()), total);
+        } catch (Exception e) {
+            logger.error("角色列表查询失败", e);
+            throw new RuntimeException("角色列表查询失败", e);
+        }
+    }
+
+    /**
+     * 获取功能代码树
+     */
+    @Transactional(readOnly = true)
+    public List<FunctionCodeTreeNodeDTO> getFunctionCodeTree() {
+        logger.info("开始获取功能代码树");
+
+        try {
+            List<SysFunctionCode> allFunctionCodes = sysFunctionCodeRepository.findAllByOrderByOrderNoAsc();
+            List<FunctionCodeTreeNodeDTO> tree = buildFunctionCodeTree(allFunctionCodes, null);
+
+            logger.info("功能代码树获取成功，共{}个节点", tree.size());
+            return tree;
+        } catch (Exception e) {
+            logger.error("功能代码树获取失败", e);
+            throw new RuntimeException("功能代码树获取失败", e);
+        }
+    }
+
+    /**
+     * 构建功能代码树
+     */
+    private List<FunctionCodeTreeNodeDTO> buildFunctionCodeTree(List<SysFunctionCode> allFunctionCodes, String parentCode) {
+        List<FunctionCodeTreeNodeDTO> tree = new ArrayList<>();
+
+        for (SysFunctionCode functionCode : allFunctionCodes) {
+            if (parentCode == null && functionCode.getParentFunctionCode() == null) {
+                FunctionCodeTreeNodeDTO node = convertToTreeNode(functionCode);
+                node.setChildren(buildFunctionCodeTree(allFunctionCodes, functionCode.getFunctionCode()));
+                tree.add(node);
+            } else if (parentCode != null && parentCode.equals(functionCode.getParentFunctionCode())) {
+                FunctionCodeTreeNodeDTO node = convertToTreeNode(functionCode);
+                node.setChildren(buildFunctionCodeTree(allFunctionCodes, functionCode.getFunctionCode()));
+                tree.add(node);
+            }
+        }
+
+        return tree;
+    }
+
+    /**
+     * 获取角色的功能代码列表
+     */
+    @Transactional(readOnly = true)
+    public List<String> getRoleFunctionCodes(String roleId) {
+        logger.info("开始获取角色功能代码列表，角色ID：{}", roleId);
+
+        try {
+            List<String> functionCodes = sysRoleFunctionCodeRepository.findFunctionCodesByRoleId(roleId);
+            logger.info("角色功能代码列表获取成功，共{}个功能代码", functionCodes.size());
+            return functionCodes;
+        } catch (Exception e) {
+            logger.error("角色功能代码列表获取失败", e);
+            throw new RuntimeException("角色功能代码列表获取失败", e);
+        }
+    }
+
+    /**
+     * 新增角色
+     */
+    @Transactional
+    public RoleDTO createRole(RoleSaveDTO roleSaveDTO) {
+        logger.info("开始创建角色，角色名称：{}", roleSaveDTO.getRoleName());
+
+        try {
+            SysRole existingRole = sysRoleRepository.findByRoleName(roleSaveDTO.getRoleName());
+            if (existingRole != null) {
+                throw new RuntimeException("角色名称已存在，请使用其他角色名称");
+            }
+
+            SysRole role = new SysRole();
+            role.setRoleId(UUID.randomUUID().toString());
+            role.setRoleName(roleSaveDTO.getRoleName());
+            role.setDescription(roleSaveDTO.getDescription());
+            role.setIsSystemRole(false);
+            role.setRecordStatus(1);
+
+            String currentUserId = getCurrentUserId();
+            role.setCreateUserId(currentUserId);
+            role.setCreateTime(new Date());
+            role.setModifyUserId(currentUserId);
+            role.setModifyTime(new Date());
+
+            role = sysRoleRepository.save(role);
+
+            if (roleSaveDTO.getFunctionCodes() != null && !roleSaveDTO.getFunctionCodes().isEmpty()) {
+                saveRoleFunctionCodes(role.getRoleId(), roleSaveDTO.getFunctionCodes());
+            }
+
+            RoleDTO roleDTO = convertToDTO(role);
+            roleDTO.setFunctionCodes(roleSaveDTO.getFunctionCodes());
+
+            logger.info("角色创建成功，角色ID：{}", role.getRoleId());
+            return roleDTO;
+        } catch (RuntimeException e) {
+            logger.error("角色创建失败：{}", e.getMessage());
+            throw e;
+        } catch (Exception e) {
+            logger.error("角色创建失败", e);
+            throw new RuntimeException("角色创建失败", e);
+        }
+    }
+
+    /**
+     * 修改角色
+     */
+    @Transactional
+    public RoleDTO updateRole(RoleSaveDTO roleSaveDTO) {
+        logger.info("开始修改角色，角色ID：{}", roleSaveDTO.getRoleId());
+
+        try {
+            SysRole role = sysRoleRepository.findById(roleSaveDTO.getRoleId())
+                    .orElseThrow(() -> new RuntimeException("角色不存在"));
+
+            SysRole existingRole = sysRoleRepository.findByRoleName(roleSaveDTO.getRoleName());
+            if (existingRole != null && !existingRole.getRoleId().equals(roleSaveDTO.getRoleId())) {
+                throw new RuntimeException("角色名称已存在，请使用其他角色名称");
+            }
+
+            if (role.getIsSystemRole()) {
+                throw new RuntimeException("系统角色不允许修改");
+            }
+
+            role.setRoleName(roleSaveDTO.getRoleName());
+            role.setDescription(roleSaveDTO.getDescription());
+
+            String currentUserId = getCurrentUserId();
+            role.setModifyUserId(currentUserId);
+            role.setModifyTime(new Date());
+
+            role = sysRoleRepository.save(role);
+
+            sysRoleFunctionCodeRepository.deleteByRoleId(role.getRoleId());
+            if (roleSaveDTO.getFunctionCodes() != null && !roleSaveDTO.getFunctionCodes().isEmpty()) {
+                saveRoleFunctionCodes(role.getRoleId(), roleSaveDTO.getFunctionCodes());
+            }
+
+            RoleDTO roleDTO = convertToDTO(role);
+            roleDTO.setFunctionCodes(roleSaveDTO.getFunctionCodes());
+
+            logger.info("角色修改成功，角色ID：{}", role.getRoleId());
+            return roleDTO;
+        } catch (RuntimeException e) {
+            logger.error("角色修改失败：{}", e.getMessage());
+            throw e;
+        } catch (Exception e) {
+            logger.error("角色修改失败", e);
+            throw new RuntimeException("角色修改失败", e);
+        }
+    }
+
+    /**
+     * 删除角色
+     */
+    @Transactional
+    public void deleteRole(String roleId) {
+        logger.info("开始删除角色，角色ID：{}", roleId);
+
+        try {
+            SysRole role = sysRoleRepository.findById(roleId)
+                    .orElseThrow(() -> new RuntimeException("角色不存在"));
+
+            if (role.getIsSystemRole()) {
+                throw new RuntimeException("系统角色不允许删除");
+            }
+
+            sysUserRoleRepository.deleteByRoleId(roleId);
+            sysRoleFunctionCodeRepository.deleteByRoleId(roleId);
+            sysRoleRepository.deleteById(roleId);
+
+            logger.info("角色删除成功，角色ID：{}", roleId);
+        } catch (RuntimeException e) {
+            logger.error("角色删除失败：{}", e.getMessage());
+            throw e;
+        } catch (Exception e) {
+            logger.error("角色删除失败", e);
+            throw new RuntimeException("角色删除失败", e);
+        }
+    }
+
+    /**
+     * 批量删除角色
+     */
+    @Transactional
+    public void deleteRoles(List<String> roleIds) {
+        logger.info("开始批量删除角色，角色ID列表：{}", roleIds);
+
+        try {
+            for (String roleId : roleIds) {
+                deleteRole(roleId);
+            }
+
+            logger.info("批量删除角色成功，共删除{}个角色", roleIds.size());
+        } catch (Exception e) {
+            logger.error("批量删除角色失败", e);
+            throw new RuntimeException("批量删除角色失败", e);
+        }
+    }
+
+    /**
+     * 保存角色功能代码关联
+     */
+    private void saveRoleFunctionCodes(String roleId, List<String> functionCodes) {
+        for (String functionCode : functionCodes) {
+            SysRoleFunctionCodeId id = new SysRoleFunctionCodeId();
+            id.setRoleId(roleId);
+            id.setFunctionCode(functionCode);
+
+            SysRoleFunctionCode roleFunctionCode = new SysRoleFunctionCode();
+            roleFunctionCode.setId(id);
+
+            sysRoleFunctionCodeRepository.save(roleFunctionCode);
+        }
+    }
+
+    /**
+     * 转换为DTO
+     */
+    private RoleDTO convertToDTO(SysRole role) {
+        RoleDTO dto = new RoleDTO();
+        dto.setRoleId(role.getRoleId());
+        dto.setRoleName(role.getRoleName());
+        dto.setDescription(role.getDescription());
+        dto.setIsSystemRole(role.getIsSystemRole());
+        dto.setRecordStatus(role.getRecordStatus());
+        dto.setRecordStatusName(role.getRecordStatus() == 1 ? "启用" : "禁用");
+        dto.setCreateTime(role.getCreateTime());
+        dto.setModifyTime(role.getModifyTime());
+        return dto;
+    }
+
+    /**
+     * 转换为树节点DTO
+     */
+    private FunctionCodeTreeNodeDTO convertToTreeNode(SysFunctionCode functionCode) {
+        FunctionCodeTreeNodeDTO dto = new FunctionCodeTreeNodeDTO();
+        dto.setId(functionCode.getFunctionCode());
+        dto.setLabel(functionCode.getFunctionName());
+        dto.setFunctionCode(functionCode.getFunctionCode());
+        dto.setParentFunctionCode(functionCode.getParentFunctionCode());
+        dto.setOrderNo(functionCode.getOrderNo());
+        return dto;
+    }
+
+    /**
+     * 获取角色的用户列表
+     */
+    @Transactional(readOnly = true)
+    @DataSource(value = RoutingDataSourceConfig.DataSourceType.BRANCH)
+    public Page<UserDTO> getRoleUsers(String roleId, UserQueryDTO queryDTO) {
+        logger.info("开始获取角色用户列表，角色ID：{}，查询条件：{}", roleId, queryDTO.getKeyword());
+
+        try {
+            logger.info("开始查询角色用户关联数据");
+            List<SysUserRole> userRoles = sysUserRoleRepository.findByRoleId(roleId);
+            logger.info("查询到{}条角色用户关联数据", userRoles.size());
+            
+            List<User> roleUsers = new ArrayList<>();
+
+            for (SysUserRole userRole : userRoles) {
+                logger.info("处理用户角色关联，用户ID：{}", userRole.getUserId());
+                User user = userRepository.findById(userRole.getUserId()).orElse(null);
+                if (user != null) {
+                    logger.info("找到用户，用户ID：{}，姓名：{}，登录账号：{}", user.getId(), user.getName(), user.getLoginId());
+                    if (queryDTO.getKeyword() == null || queryDTO.getKeyword().isEmpty() ||
+                        user.getName().contains(queryDTO.getKeyword()) ||
+                        user.getLoginId().contains(queryDTO.getKeyword())) {
+                        roleUsers.add(user);
+                        logger.info("用户符合查询条件，已添加到列表");
+                    }
+                } else {
+                    logger.warn("未找到用户，用户ID：{}", userRole.getUserId());
+                }
+            }
+
+            long total = roleUsers.size();
+            logger.info("开始转换用户DTO，共{}条记录", total);
+            List<UserDTO> userDTOs = roleUsers.stream()
+                    .map(this::convertUserToDTO)
+                    .collect(Collectors.toList());
+
+            int start = queryDTO.getPage() * queryDTO.getPageSize();
+            int end = Math.min(start + queryDTO.getPageSize(), userDTOs.size());
+            List<UserDTO> pageData = userDTOs.subList(start, end);
+
+            logger.info("角色用户列表获取成功，共{}条记录", total);
+            return new PageImpl<>(pageData, PageRequest.of(queryDTO.getPage(), queryDTO.getPageSize()), total);
+        } catch (Exception e) {
+            logger.error("角色用户列表获取失败", e);
+            throw new RuntimeException("角色用户列表获取失败", e);
+        }
+    }
+
+    /**
+     * 添加用户到角色
+     */
+    @Transactional
+    @DataSource(value = RoutingDataSourceConfig.DataSourceType.BRANCH)
+    public void addUsersToRole(String roleId, List<String> userIds) {
+        logger.info("开始添加用户到角色，角色ID：{}，用户ID列表：{}", roleId, userIds);
+
+        try {
+            for (String userId : userIds) {
+                SysUserRole userRole = new SysUserRole();
+                userRole.setUserId(userId);
+                userRole.setRoleId(roleId);
+
+                sysUserRoleRepository.save(userRole);
+            }
+
+            logger.info("添加用户到角色成功，共添加{}个用户", userIds.size());
+        } catch (Exception e) {
+            logger.error("添加用户到角色失败", e);
+            throw new RuntimeException("添加用户到角色失败", e);
+        }
+    }
+
+    /**
+     * 从角色中移除用户
+     */
+    @Transactional
+    @DataSource(value = RoutingDataSourceConfig.DataSourceType.BRANCH)
+    public void removeUserFromRole(String roleId, String userId) {
+        logger.info("开始从角色中移除用户，角色ID：{}，用户ID：{}", roleId, userId);
+
+        try {
+            sysUserRoleRepository.deleteByUserIdAndRoleId(userId, roleId);
+            logger.info("从角色中移除用户成功");
+        } catch (Exception e) {
+            logger.error("从角色中移除用户失败", e);
+            throw new RuntimeException("从角色中移除用户失败", e);
+        }
+    }
+
+    /**
+     * 转换User为DTO
+     */
+    private UserDTO convertUserToDTO(User user) {
+        UserDTO dto = new UserDTO();
+        dto.setId(user.getId());
+        dto.setEmployeeId("");
+        dto.setName(user.getName());
+        dto.setLoginId(user.getLoginId());
+        dto.setRoleName("");
+        dto.setWeChatUserId(user.getWechatUserId() != null ? user.getWechatUserId() : "");
+        dto.setRecordStatus(user.getRecordStatus());
+        dto.setRecordStatusName("");
+        dto.setCreateTime(user.getCreateTime());
+        dto.setModifyTime(user.getModifyTime());
+        return dto;
+    }
+
+    /**
+     * 获取当前登录用户ID
+     */
+    private String getCurrentUserId() {
+        return "admin";
+    }
+}

docs/角色管理功能需求文档.md

@@ -0,0 +1,364 @@
+# 角色管理功能需求文档
+
+## 1. 功能概述
+
+角色管理功能是系统权限管理的核心模块，用于管理系统中的角色信息、角色权限分配以及角色与用户的关联关系。该功能提供了完整的CRUD操作，支持角色的新增、修改、删除、查询，以及权限管理和人员管理功能。
+
+## 2. 功能需求
+
+### 2.1 角色列表查询
+
+#### 2.1.1 查询条件
+- **角色名称**：支持模糊查询
+- **查询按钮**：点击查询按钮执行查询操作
+- **重置按钮**：清空查询条件并重新加载数据
+
+#### 2.1.2 列表显示
+列表显示以下字段：
+- **选择框**：支持多选，用于批量删除操作
+- **序号**：连续序号，支持跨页连续显示
+- **角色名称**：显示角色名称，支持排序
+- **备注**：显示角色描述信息，支持排序
+- **是否系统角色**：显示是否为系统角色（是/否），支持排序
+- **创建时间**：显示角色创建时间，格式为yyyy-MM-dd，支持排序
+- **操作**：提供人员管理、修改、删除按钮
+
+#### 2.1.3 列表功能
+- **排序**：支持按角色名称、备注、是否系统角色、创建时间进行排序（数据库级排序）
+- **分页**：支持分页显示，每页显示10/20/50/100条记录
+- **Loading状态**：查询时显示loading状态，防止重复点击
+
+### 2.2 新增角色
+
+#### 2.2.1 新增按钮
+- 位置：操作按钮区
+- 功能：打开新增角色对话框
+
+#### 2.2.2 新增对话框
+- **标题**：新增角色
+- **表单字段**：
+  - 角色名称：必填，文本输入框
+  - 备注：选填，文本输入框
+  - 权限管理：树状控件，显示Sys_FunctionCode表的FunctionName
+
+#### 2.2.3 权限树状控件
+- **数据源**：从Sys_FunctionCode表获取数据
+- **显示字段**：FunctionName
+- **选择逻辑**：
+  - 勾选父节点时，自动勾选所有子节点
+  - 勾选子节点时，自动勾选父节点
+  - 清除子节点时，不清除父节点的勾选
+- **数据保存**：选中的FunctionCode保存到Sys_Role_Sys_FunctionCode表中
+
+#### 2.2.4 保存逻辑
+- 校验角色名称是否重复
+- 保存角色信息到Sys_Role表
+- 保存角色权限关系到Sys_Role_Sys_FunctionCode表
+- 设置公共字段：
+  - RecordStatus：1（启用）
+  - CreateUserID：当前登录用户ID
+  - CreateTime：当前时间
+  - ModifyUserID：当前登录用户ID
+  - ModifyTime：当前时间
+
+### 2.3 修改角色
+
+#### 2.3.1 修改按钮
+- 位置：操作列
+- 形式：图标按钮（Edit图标）
+- 功能：打开修改角色对话框
+
+#### 2.3.2 修改对话框
+- **标题**：修改角色
+- **表单字段**：与新增对话框相同
+- **默认值**：回显当前角色的数据
+- **权限树**：根据Sys_Role_Sys_FunctionCode表的数据默认勾选
+
+#### 2.3.3 保存逻辑
+- 校验角色名称是否与其他角色重复
+- 更新角色信息到Sys_Role表
+- 更新角色权限关系到Sys_Role_Sys_FunctionCode表（先删除旧的，再插入新的）
+- 更新公共字段：
+  - ModifyUserID：当前登录用户ID
+  - ModifyTime：当前时间
+
+### 2.4 删除角色
+
+#### 2.4.1 单个删除
+- **删除按钮**：操作列中的删除按钮（Delete图标）
+- **确认对话框**：显示删除确认提示
+- **删除逻辑**：
+  - 先删除Sys_User_Sys_Role表中的用户角色关联数据
+  - 再删除Sys_Role_Sys_FunctionCode表中的角色权限关联数据
+  - 最后删除Sys_Role表中的角色数据
+
+#### 2.4.2 批量删除
+- **批量删除按钮**：操作按钮区
+- **启用条件**：选中至少一条记录时启用
+- **确认对话框**：显示删除确认提示
+- **删除逻辑**：循环删除选中的角色，删除顺序与单个删除相同
+
+### 2.5 人员管理
+
+#### 2.5.1 人员管理按钮
+- **位置**：操作列
+- **形式**：图标按钮（User图标）
+- **功能**：打开人员管理对话框
+
+#### 2.5.2 人员管理对话框
+- **标题**：角色名称
+- **查询条件**：
+  - 文本框：支持按姓名或登录名模糊查询
+  - 查询按钮：执行查询操作
+- **查询结果列表**：
+  - 显示所有拥有该角色的用户
+  - 字段：姓名、登录账号
+  - 操作：删除按钮（移除该用户的角色）
+
+#### 2.5.3 新增拥有该角色的用户
+- **新增按钮**：人员管理对话框中
+- **功能**：打开用户选择对话框
+
+#### 2.5.4 用户选择对话框（通用组件）
+- **查询条件**：
+  - 登录账号：模糊查询
+  - 姓名：模糊查询
+- **查询结果列表**：
+  - 勾选框
+  - 登录账号
+  - 姓名
+- **查询功能**：
+  - 支持数据库级分页
+  - 可多次查询，选中结果累加到选中区
+- **选中区**：
+  - 显示已选中的用户
+  - 支持取消选中
+- **确定按钮**：
+  - 将选中的用户添加到角色中
+  - 维护Sys_User_Sys_Role表数据
+
+## 3. 技术实现
+
+### 3.1 后端实现
+
+#### 3.1.1 实体类
+- **Role**：角色实体类，对应Sys_Role表
+- **SysRoleFunctionCode**：角色权限关联实体类，对应Sys_Role_Sys_FunctionCode表
+- **SysUserRole**：用户角色关联实体类，对应Sys_User_Sys_Role表
+
+#### 3.1.2 Repository
+- **RoleRepository**：角色数据访问接口
+- **SysRoleFunctionCodeRepository**：角色权限关联数据访问接口
+- **SysUserRoleRepository**：用户角色关联数据访问接口
+
+#### 3.1.3 Service
+- **RoleService**：角色业务逻辑服务
+  - queryRoles：分页查询角色列表
+  - createRole：创建角色
+  - updateRole：更新角色
+  - deleteRoles：删除角色
+  - getFunctionCodeTree：获取权限树数据
+  - getRoleUsers：获取角色用户列表
+  - addUsersToRole：添加用户到角色
+  - removeUserFromRole：从角色中移除用户
+
+#### 3.1.4 Controller
+- **RoleController**：角色控制器
+  - GET /role/list：查询角色列表
+  - POST /role/create：创建角色
+  - PUT /role/update：更新角色
+  - DELETE /role/delete/{id}：删除角色
+  - DELETE /role/batchDelete：批量删除角色
+  - GET /role/functionCodeTree：获取权限树
+  - GET /role/{roleId}/users：获取角色用户列表
+  - POST /role/{roleId}/addUsers：添加用户到角色
+  - DELETE /role/{roleId}/removeUser/{userId}：从角色中移除用户
+
+### 3.2 前端实现
+
+#### 3.2.1 组件结构
+- **RoleManagement.vue**：角色管理主组件
+- **UserSelectDialog.vue**：用户选择对话框通用组件
+
+#### 3.2.2 主要功能方法
+- **getRoles**：获取角色列表
+- **handleSearch**：查询操作
+- **resetSearchForm**：重置查询条件
+- **handleSortChange**：排序处理
+- **handleAdd**：打开新增对话框
+- **handleEdit**：打开修改对话框
+- **handleDelete**：删除角色
+- **handleBatchDelete**：批量删除角色
+- **handleSubmit**：提交新增/修改
+- **handleUserManagement**：打开人员管理对话框
+- **getRoleUsers**：获取角色用户列表
+- **openUserSelectDialog**：打开用户选择对话框
+- **handleUserSelectConfirm**：确认添加用户到角色
+- **removeUserFromRole**：从角色中移除用户
+
+#### 3.2.3 状态管理
+- **queryForm**：查询条件表单
+- **roleList**：角色列表数据
+- **selectedRows**：选中的角色
+- **currentPage**：当前页码
+- **pageSize**：每页显示数量
+- **total**：总记录数
+- **loading**：查询loading状态
+- **deleteLoading**：删除loading状态
+- **sortMap**：排序参数
+
+### 3.3 数据库设计
+
+#### 3.3.1 Sys_Role表
+- **RoleID**：角色ID（主键）
+- **RoleName**：角色名称
+- **Description**：角色描述
+- **IsSystemRole**：是否系统角色
+- **RecordStatus**：记录状态
+- **CreateUserID**：创建人ID
+- **CreateTime**：创建时间
+- **ModifyUserID**：修改人ID
+- **ModifyTime**：修改时间
+
+#### 3.3.2 Sys_Role_Sys_FunctionCode表
+- **ID**：主键
+- **RoleID**：角色ID（外键）
+- **FunctionCode**：功能代码（外键）
+
+#### 3.3.3 Sys_User_Sys_Role表
+- **ID**：主键
+- **UserID**：用户ID（外键）
+- **RoleID**：角色ID（外键）
+
+## 4. 界面设计
+
+### 4.1 布局结构
+- **页面标题**：角色管理
+- **查询条件区**：包含角色名称查询条件和查询/重置按钮
+- **操作按钮区**：包含新增和删除按钮
+- **表格区**：显示角色列表
+- **分页区**：分页控件
+
+### 4.2 样式规范
+- **页面背景**：白色
+- **卡片样式**：白色背景，圆角4px，阴影效果
+- **表格样式**：
+  - 表头背景色：#f5f7fa
+  - 表头字体颜色：#303133
+  - 表头字体粗细：bold
+  - 表格字体大小：12px
+  - 单元格内边距：8px 0
+- **按钮样式**：使用Element Plus默认样式
+- **Loading状态**：查询和删除操作时显示loading状态
+
+### 4.3 响应式设计
+- 表格宽度：calc(100vw - 331px)
+- 表格高度：calc(100vh - 395px)
+- 固定列：选择框、序号、操作列固定
+- 文本截断：长文本显示省略号
+
+## 5. 业务规则
+
+### 5.1 角色名称唯一性
+- 角色名称在系统中必须唯一
+- 新增时校验角色名称是否已存在
+- 修改时校验角色名称是否与其他角色重复
+
+### 5.2 系统角色保护
+- 系统角色（IsSystemRole=true）不允许删除
+- 系统角色的权限不允许修改
+
+### 5.3 级联删除
+- 删除角色时，必须先删除关联的用户角色关系
+- 删除角色时，必须先删除关联的角色权限关系
+- 删除角色时，必须最后删除角色本身
+
+### 5.4 权限树选择逻辑
+- 勾选父节点时，自动勾选所有子节点
+- 勾选子节点时，自动勾选父节点
+- 清除子节点时，不清除父节点的勾选
+
+## 6. 性能优化
+
+### 6.1 数据库级排序
+- 排序在数据库层面执行，提高查询效率
+- 避免在前端进行大数据量的排序操作
+
+### 6.2 分页查询
+- 使用数据库分页，避免一次性加载大量数据
+- 支持自定义每页显示数量
+
+### 6.3 Loading状态管理
+- 查询、删除操作时显示loading状态
+- 防止用户重复点击，避免重复提交
+
+### 6.4 缓存优化
+- 权限树数据可以缓存，减少数据库查询
+- 字典数据可以缓存，减少数据库查询
+
+## 7. 安全性
+
+### 7.1 权限控制
+- 只有拥有角色管理权限的用户才能访问该功能
+- 删除操作需要二次确认，防止误操作
+
+### 7.2 数据验证
+- 前端进行表单验证
+- 后端进行业务逻辑验证
+- 防止SQL注入、XSS攻击等安全漏洞
+
+### 7.3 操作日志
+- 记录所有角色的增删改操作
+- 记录操作人、操作时间、操作内容
+
+## 8. 测试要点
+
+### 8.1 功能测试
+- 测试角色的增删改查功能
+- 测试权限树的选择逻辑
+- 测试人员管理功能
+- 测试批量删除功能
+- 测试排序和分页功能
+
+### 8.2 界面测试
+- 测试界面布局是否符合设计要求
+- 测试响应式布局是否正常
+- 测试Loading状态是否正常显示
+- 测试固定列是否正常工作
+
+### 8.3 性能测试
+- 测试大数据量下的查询性能
+- 测试并发操作的性能
+- 测试内存使用情况
+
+### 8.4 安全测试
+- 测试权限控制是否生效
+- 测试数据验证是否完善
+- 测试SQL注入、XSS攻击等安全漏洞
+
+## 9. 版本历史
+
+| 版本 | 日期 | 修改内容 | 修改人 |
+|------|------|----------|--------|
+| 1.0 | 2026-03-05 | 初始版本，完成角色管理功能开发 | AI Assistant |
+
+## 10. 附录
+
+### 10.1 相关文档
+- [后端开发最佳实践](../.trae/rules/backend-dev-best-practices.md)
+- [Web前端开发最佳实践](../.trae/rules/web-dev-best-practices.md)
+- [数据库结构文档](../database_structure.md)
+
+### 10.2 代码文件
+- 后端：
+  - `JavaBackend/src/main/java/com/lianda/backend/model/Role.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/model/SysRoleFunctionCode.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/model/SysUserRole.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/repository/RoleRepository.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/repository/SysRoleFunctionCodeRepository.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/repository/SysUserRoleRepository.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/service/RoleService.java`
+  - `JavaBackend/src/main/java/com/lianda/backend/controller/RoleController.java`
+- 前端：
+  - `vue-frontend/src/components/RoleManagement.vue`
+  - `vue-frontend/src/components/UserSelectDialog.vue`

vue-frontend/src/components/UserSelectDialog.vue

@@ -0,0 +1,331 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="选择用户"
+    width="900px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <div class="user-select-content">
+      <!-- 查询条件 -->
+      <div class="search-section">
+        <el-form :inline="true" :model="queryForm">
+          <el-form-item label="登录账号">
+            <el-input
+              v-model="queryForm.loginId"
+              placeholder="请输入登录账号"
+              clearable
+              style="width: 200px"
+              @clear="searchUsers"
+              @keyup.enter="searchUsers">
+            </el-input>
+          </el-form-item>
+          <el-form-item label="姓名">
+            <el-input
+              v-model="queryForm.name"
+              placeholder="请输入姓名"
+              clearable
+              style="width: 200px"
+              @clear="searchUsers"
+              @keyup.enter="searchUsers">
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchUsers" :loading="loading">查询</el-button>
+            <el-button @click="resetSearchForm">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 用户列表和选中区 -->
+      <div class="user-list-section">
+        <!-- 左侧：查询结果列表 -->
+        <div class="user-list-left">
+          <div class="section-header">
+            <span>查询结果</span>
+            <el-button type="primary" size="small" @click="addToSelected" :disabled="selectedQueryUsers.length === 0">
+              添加到选中区 ({{ selectedQueryUsers.length }})
+            </el-button>
+          </div>
+          <el-table
+            :data="userList"
+            border
+            stripe
+            size="small"
+            height="400"
+            @selection-change="handleQuerySelectionChange"
+            v-loading="loading">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column prop="loginId" label="登录账号" min-width="120" />
+            <el-table-column prop="name" label="姓名" min-width="100" />
+          </el-table>
+          <div class="pagination-container">
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[10, 20, 50, 100]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              small
+            />
+          </div>
+        </div>
+
+        <!-- 右侧：已选中用户 -->
+        <div class="user-list-right">
+          <div class="section-header">
+            <span>已选中用户 ({{ selectedUsersList.length }})</span>
+            <el-button type="danger" size="small" @click="clearSelected" :disabled="selectedUsersList.length === 0">
+              清空
+            </el-button>
+          </div>
+          <el-table
+            :data="selectedUsersList"
+            border
+            stripe
+            size="small"
+            height="450">
+            <el-table-column prop="loginId" label="登录账号" min-width="120" />
+            <el-table-column prop="name" label="姓名" min-width="100" />
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{ row }">
+                <el-button type="danger" link @click="removeFromSelected(row)">移除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleConfirm" :disabled="selectedUsersList.length === 0">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import request from '@/utils/request'
+
+export default {
+  name: 'UserSelectDialog',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    selectedUsers: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue', 'confirm'],
+  setup(props, { emit }) {
+    const dialogVisible = ref(false)
+    const queryForm = reactive({
+      loginId: '',
+      name: ''
+    })
+    const userList = ref([])
+    const selectedQueryUsers = ref([])
+    const loading = ref(false)
+    const currentPage = ref(1)
+    const pageSize = ref(10)
+    const total = ref(0)
+    const selectedUsersList = ref([])
+
+    watch(() => props.modelValue, (newVal) => {
+      dialogVisible.value = newVal
+      if (newVal) {
+        selectedUsersList.value = [...props.selectedUsers]
+        searchUsers()
+      }
+    })
+
+    watch(dialogVisible, (newVal) => {
+      if (!newVal) {
+        emit('update:modelValue', false)
+      }
+    })
+
+    /**
+     * 查询用户列表
+     */
+    const searchUsers = async () => {
+      try {
+        loading.value = true
+        const response = await request.get('/user/list', {
+          params: {
+            loginId: queryForm.loginId,
+            name: queryForm.name,
+            page: currentPage.value,
+            pageSize: pageSize.value
+          }
+        })
+        userList.value = response.data.data.content
+        total.value = response.data.data.totalElements
+      } catch (error) {
+        console.error('查询用户列表失败:', error)
+        ElMessage.error('查询用户列表失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    /**
+     * 重置查询条件
+     */
+    const resetSearchForm = () => {
+      queryForm.loginId = ''
+      queryForm.name = ''
+      currentPage.value = 1
+      searchUsers()
+    }
+
+    /**
+     * 处理查询结果选择变化
+     */
+    const handleQuerySelectionChange = (selection) => {
+      selectedQueryUsers.value = selection
+    }
+
+    /**
+     * 添加到选中区
+     */
+    const addToSelected = () => {
+      const existingIds = selectedUsersList.value.map(u => u.id)
+      const newUsers = selectedQueryUsers.value.filter(user => !existingIds.includes(user.id))
+      selectedUsersList.value = [...selectedUsersList.value, ...newUsers]
+      selectedQueryUsers.value = []
+    }
+
+    /**
+     * 从选中区移除
+     */
+    const removeFromSelected = (row) => {
+      selectedUsersList.value = selectedUsersList.value.filter(user => user.id !== row.id)
+    }
+
+    /**
+     * 清空选中区
+     */
+    const clearSelected = () => {
+      selectedUsersList.value = []
+    }
+
+    /**
+     * 分页变化
+     */
+    const handleSizeChange = (size) => {
+      pageSize.value = size
+      currentPage.value = 1
+      searchUsers()
+    }
+
+    const handleCurrentChange = (page) => {
+      currentPage.value = page
+      searchUsers()
+    }
+
+    /**
+     * 确认选择
+     */
+    const handleConfirm = () => {
+      emit('confirm', selectedUsersList.value)
+      handleClose()
+    }
+
+    /**
+     * 关闭对话框
+     */
+    const handleClose = () => {
+      dialogVisible.value = false
+      resetSearchForm()
+      selectedQueryUsers.value = []
+      selectedUsersList.value = []
+    }
+
+    return {
+      dialogVisible,
+      queryForm,
+      userList,
+      selectedQueryUsers,
+      loading,
+      currentPage,
+      pageSize,
+      total,
+      selectedUsersList,
+      searchUsers,
+      resetSearchForm,
+      handleQuerySelectionChange,
+      addToSelected,
+      removeFromSelected,
+      clearSelected,
+      handleSizeChange,
+      handleCurrentChange,
+      handleConfirm,
+      handleClose
+    }
+  }
+}
+</script>
+
+<style scoped>
+.user-select-content {
+  padding: 10px 0;
+}
+
+.search-section {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.user-list-section {
+  display: flex;
+  gap: 20px;
+}
+
+.user-list-left {
+  flex: 1;
+}
+
+.user-list-right {
+  flex: 1;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 8px 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  font-weight: bold;
+  color: #606266;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 15px;
+}
+
+:deep(.el-table) {
+  font-size: 13px;
+}
+
+:deep(.el-table th) {
+  background-color: #f5f7fa;
+  font-weight: bold;
+  color: #606266;
+}
+
+:deep(.el-table td) {
+  padding: 6px 0;
+}
+</style>

vue-frontend/src/router/index.js

@@ -31,9 +31,8 @@ const routes = [
         component: () => import('../components/Announcement.vue')
       },
       {
-        path: 'role',
+        path: 'RoleManagement',
         name: 'home.settings_role',
-        // 懒加载角色管理页面组件
         component: () => import('../components/RoleManagement.vue')
       },
       {