4. 用户角色定义页面：角色列表、角色CRUD、角色属性面板

4.1 用户场景与业务问题

权限管理员在为SaaS后台配置权限体系时，需要先定义一套完整的角色集合。例如，一家内容平台需要划分「超级管理员」「运营主管」「内容编辑」「数据分析师」「访客」五个角色，每个角色对应不同的功能权限和数据范围。以下是这一场景中常见的业务痛点：

• 角色定义混乱：角色名称与职责不匹配，运营人员能看到财务报表，数据权限边界模糊。
• 新增角色周期长：过去新增角色需要开发写代码并发布上线，平均耗时2～3天，无法响应快速变化的业务。
• 角色属性不统一：同一角色在不同模块的展示名称、编码、状态不一致，导致权限配置交叉冲突。
• 变更无追溯：角色被删除或属性被修改后没有操作记录，出现问题无法定位责任人。

4.2 需求拆解

角色定义页面可拆解为三个核心模块：角色列表、角色CRUD、角色属性面板。各模块的功能点如下表所示：

4.3 原型方案表达

在Axure中，角色定义页面采用「左列表 + 右面板」的双栏布局：左侧为角色列表，右侧为角色属性面板。顶部放置全局操作按钮「新增角色」和「刷新」。

角色列表表格设计：

• 列定义：角色名称（左对齐）、角色编码（左对齐）、状态（居中，开关组件）、描述（省略号溢出）、创建时间（右对齐）、操作（右对齐）。
• 行交互：单击行 → 选中并高亮 → 右侧面板加载该角色的完整属性。
• 状态列使用Axure的复选框或开关元件，切换后即时更新状态，并显示toast提示。

角色属性面板设计：

• 查看模式：所有字段只读显示，背景为浅灰色。
• 编辑模式：点击「编辑」按钮后，字段变为可编辑输入框/下拉选择/树形权限控件，背景变为白色。
• 权限配置区：采用树形勾选结构，第一层为模块（如用户管理、内容管理、数据看板），第二层为操作（查看、新增、编辑、删除、导出）。

CRUD操作入口与反馈：

• 新增：点击顶部「新增角色」→ 弹出表单弹窗 → 填写必填项（名称、编码）→ 点击「保存」→ 弹窗关闭 + 列表刷新 + 成功提示。
• 编辑：点击操作列「编辑」或双击行 → 右侧面板切换为编辑模式 → 修改后点击「保存」→ 面板恢复只读 + 列表更新 + 成功提示。
• 删除：点击操作列「删除」→ 弹出确认弹窗（展示关联用户数）→ 确认后删除 + 列表刷新。
• 查看：单击行 → 右侧面板展示属性，无需额外操作。

4.4 交互逻辑

以下为角色CRUD各操作的完整交互流程：

异常交互处理：

• 新增时，角色编码已存在 → 弹窗内显示红色错误提示「编码已被占用」，保存按钮不可点击。
• 删除时，角色关联用户数 > 0 → 确认弹窗中显示「该角色下关联 N 个用户，删除后这些用户将失去该角色权限」，用户必须勾选「我已确认」才能执行删除。
• 编辑时，如果其他管理员同时修改了该角色 → 保存时提示「角色信息已被修改，请刷新后重试」，面板刷新为最新数据。

4.5 验收标准

• 角色列表默认加载全部角色，支持按名称/编码搜索，按状态筛选，分页正常。
• 单击角色行，右侧面板正确展示该角色的名称、编码、状态、描述、权限配置、关联用户数。
• 新增角色：填写完整信息后保存成功，列表刷新后出现新角色；编码重复时有明确错误提示。
• 编辑角色：切换到编辑模式后字段可修改，保存后列表和面板同步更新；取消编辑后面板恢复修改前状态。
• 删除角色：确认弹窗展示关联用户数，确认后角色从列表中移除；关联用户数大于0时有二次确认勾选。
• 状态切换：开关切换即时生效，列表状态列更新，角色在权限校验时按新状态执行。
• 权限配置：树形勾选正确回显已选权限，保存后权限校验按最新配置生效。

角色权限管理核心流程

下图展示了从权限管理员发起，到角色定义完成并最终关联用户的完整流程，包含角色CRUD各分支路径：