Hello大家好,权限管理可以说是每个系统都必备的一个功能,也有可能是一个权限系统管理同一个企业多个系统的用户权限。所以作者今天和大家分享一个权限管理系统的高保真原型及制作教程。
这个原型包括了角色管理、用户管理和权限管理共计17个页面内容。而且大部分内容是用中继器完成的,使用方便,只需要填写表格即可。当然了,这个原型交互效果和真的一样,你们也可以学到几个中继器之间的交互。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/pro/34cea0d26344c9bb/#g=1
【原型下载】
方式2:https://weidian.com/item.html?itemID=3596483091
【原型效果】
1. 角色管理
角色管理应包括角色名称、说明、状态、成员和权限
1.1创建角色
创建角色只需要简单的填写名称和说明即可,默认启用状态。
这里注意角色名是唯一的。
添加角色后,可以在用户管理和权限管理处看到该角色
1.2选择角色成员
新增角色后,可以为该角色快速选择用户,可以高效管理相同角色用户的权限。
在角色管理页维护角色用户后,联动到角色详情页、用户管理和用户详细页,可以看到该用户已经选中该角色。
1.3选择角色权限
同样,在角色管理页维护角色权限后,联动到角色详情页和权限管理页面,都可以看到该用户选中的权限。
1.4模糊搜索角色
1.5启用和禁用
启用或禁用后,同样可以在角色详情页显示同样状态
1.6删除角色
可以在角色管理页或者角色详细页删除角色。如果在详细页删除,会联动至角色管理页。
1.7查看角色详细信息
点击角色名称可以查看不同角色的详细信息
1.8批量操作
同样的也会联动交互至其他页面,大家可以自行体验。
2. 用户管理
用户管理应包括角色账号、基本信息、状态、角色和权限。
2.1创建用户
创建用户包括账号,用户名,手机号码,邮箱,输入框等,提交时系统能进行判断,如果输入不正确会有相应的提示。同样,添加用户后,也会联动至角色管理、角色详情、权限管理等页面,大家可以自己体验。
注:用户账号是唯一的,但是用户名不唯一,毕竟人有同名
2.2选择用户角色
选择用户角色后,也会联动至角色管理、角色详情、权限管理等页面,大家可以自己体验。
2.3选择用户权限
如果需要单独设置该角色的某项权限,也可以在这里进行设置。
2.4模糊搜索用户
输入用户账号或名称,可以模糊搜索用户
2.5启用和禁用
同样的启用或禁用后,能联动到用户详细页
2.6删除用户
可以在用户管理页或者用户详细页删除角色。如果在详细页删除,会联动至用户管理页。
2.7查看用户详细信息
点击角色名称可以查看不同用户的详细信息