用户管理模块设计
1. 模块概述
1.1 模块信息
| 项目 | 内容 |
|---|---|
| 模块编号 | M-001 |
| 模块名称 | 用户管理 |
| 模块描述 | 管理系统用户信息，包括用户创建、编辑、删除、查询、启用/禁用等功能 |
| 设计优先级 | P0 |
| 负责人 | UI/UX设计师 |
1.2 功能清单
| 功能编号 | 功能点 | 优先级 | 设计状态 |
|---|---|---|---|
| F-001-001 | 用户创建 | P0 | ✓ 已完成 |
| F-001-002 | 用户编辑 | P0 | ✓ 已完成 |
| F-001-003 | 用户删除 | P0 | ✓ 已完成 |
| F-001-004 | 用户启用/禁用 | P0 | ✓ 已完成 |
| F-001-005 | 用户查询 | P0 | ✓ 已完成 |
| F-001-006 | 批量操作 | P1 | ✓ 已完成 |
| F-001-007 | 用户导入 | P1 | ✓ 已完成 |
| F-001-008 | 用户导出 | P1 | ✓ 已完成 |
| F-001-015 | 个人信息查看 | P0 | ✓ 已完成 |
| F-001-016 | 个人信息编辑 | P0 | ✓ 已完成 |
| F-001-017 | 头像上传 | P1 | ✓ 已完成 |
| F-001-018 | 密码修改 | P0 | ✓ 已完成 |
2. 页面设计
2.1 用户列表页面
2.1.1 页面布局
┌─────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├──────────────┬──────────────────────────────────────────────┤
│ │ 用户管理 > 用户列表 │
│ 侧边菜单 ├──────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 筛选: [部门▼] [状态▼] [角色▼] 🔍搜索... │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ [+ 新建] [批量启用] [批量禁用] [批量删除] [导出] │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ ☑ │用户名│姓名│部门 │角色 │状态│操作 │ │
│ │ ├───┼──────┼────┼──────┼──────┼────┼───────┤ │
│ │ │ ☑ │admin │管理员│技术部│超级管理员│启用│编辑 删除│ │
│ │ │ ☑ │user01│张三 │产品部│用户 │启用│编辑 删除│ │
│ │ │ ☑ │user02│李四 │技术部│管理员│禁用│编辑 删除│ │
│ │ │...│... │... │... │... │... │... │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 共 100 条 < 1 2 3 4 5 ... 10 > 每页20条 │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘2.1.2 功能说明
筛选区域
- 部门筛选：下拉选择，支持多选
- 状态筛选：全部/启用/禁用
- 角色筛选：全部/超级管理员/管理员/用户
- 搜索框：支持用户名、姓名、邮箱模糊搜索
操作区域
- 新建用户：打开用户创建弹窗
- 批量启用：需先勾选用户，批量启用选中用户
- 批量禁用：需先勾选用户，批量禁用选中用户
- 批量删除：需先勾选用户，二次确认后删除
- 导出：导出当前筛选结果到Excel
表格区域
- 支持列排序（用户名、姓名、部门）
- 支持行悬停显示操作按钮
- 支持复选框批量选择
- 分页控件支持跳转和每页条数设置
2.1.3 交互流程
[页面加载] → [请求用户列表数据] → [显示加载状态]
│
├──→ [数据加载成功] → [渲染表格]
│
└──→ [数据加载失败] → [显示错误提示] → [提供重试]
[筛选操作] → [触发筛选请求] → [更新表格数据] → [重置分页]
[搜索操作] → [输入关键词] → [回车/失焦] → [触发搜索] → [高亮匹配文本]
[批量操作] → [勾选用户] → [激活批量按钮] → [点击操作] → [二次确认] → [执行操作]
[单行操作] → [悬停行] → [显示操作按钮] → [点击编辑/删除/查看]2.2 用户创建/编辑页面
2.2.1 页面布局（分步表单）
┌─────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├──────────────┬──────────────────────────────────────────────┤
│ │ 用户管理 > 新建用户 │
│ 侧边菜单 ├──────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ ●──────○──────○ │ │
│ │ │ 基本信息 角色权限 完成 │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ │ │
│ │ │ 基本信息 │ │
│ │ │ ═══════════════════════════════════════ │ │
│ │ │ │ │
│ │ │ 用户名 * │ │
│ │ │ ┌─────────────────────────────────────┐ │ │
│ │ │ │ 请输入用户名 │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ │ │ [√] 用户名可用 │ │
│ │ │ │ │
│ │ │ 姓名 * │ │
│ │ │ ┌─────────────────────────────────────┐ │ │
│ │ │ │ 请输入真实姓名 │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ 邮箱 * │ │
│ │ │ ┌─────────────────────────────────────┐ │ │
│ │ │ │ example@company.com │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ 部门 * │ │
│ │ │ ┌─────────────────────────────────────┐ │ │
│ │ │ │ 请选择部门 ▼ │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ 手机号码 │ │
│ │ │ ┌─────────────────────────────────────┐ │ │
│ │ │ │ 13800138000 │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ 头像上传 │ │
│ │ │ ┌──────────────┐ │ │
│ │ │ │ │ 支持jpg/png，最大2MB │ │
│ │ │ │ [上传头像] │ │ │
│ │ │ │ │ │ │
│ │ │ └──────────────┘ │ │
│ │ │ │ │
│ │ │ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ │ 取 消 │ │ 下一步 > │ │ │
│ │ │ └──────────────┘ └──────────────┘ │ │
│ │ │ │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘2.2.2 表单字段说明
基本信息（步骤1）
| 字段 | 类型 | 必填 | 验证规则 | 说明 |
|---|---|---|---|---|
| 用户名 | Input | 是 | 3-20字符，字母开头，字母数字下划线 | 系统登录账号 |
| 姓名 | Input | 是 | 2-20字符 | 真实姓名 |
| 邮箱 | Input | 是 | 邮箱格式 | 用于接收通知 |
| 部门 | Select | 是 | - | 选择所属部门 |
| 手机号 | Input | 否 | 手机号格式 | 用于短信通知 |
| 头像 | Upload | 否 | jpg/png，最大2MB | 用户头像 |
角色权限（步骤2）
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 角色 | Select | 是 | 超级管理员/管理员/用户 |
| 自定义权限 | Checkbox | 否 | 可单独配置权限 |
完成（步骤3）
- 显示用户摘要信息
- 提供"创建另一个"和"返回列表"按钮
2.2.3 表单验证规则
| 字段 | 验证时机 | 验证规则 | 错误提示 |
|---|---|---|---|
| 用户名 | 实时+失焦 | 必填，3-20字符，字母开头 | "用户名格式不正确" |
| 姓名 | 实时+失焦 | 必填，2-20字符 | "请输入真实姓名" |
| 邮箱 | 实时+失焦 | 必填，邮箱格式 | "邮箱格式不正确" |
| 部门 | 提交时 | 必填 | "请选择部门" |
| 手机号 | 实时+失焦 | 手机号格式 | "手机号格式不正确" |
| 头像 | 选择时 | 格式+大小 | "图片格式或大小不符合要求" |
2.3 用户详情页面
2.3.1 页面布局（抽屉组件）
┌─────────────────────────────────────────────────────────────┐
│ 用户列表页面 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 用户详情 [X] │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌────────┐ │ │
│ │ │ │ 张三 │ │
│ │ │ 头像 │ 技术部 | 管理员 │ │
│ │ │ │ user01@company.com │ │
│ │ └────────┘ │ │
│ │ │ │
│ │ ═══════════════════════════════════════════════ │ │
│ │ 基本信息 │ │
│ │ ─────────────────────────────────────────────── │ │
│ │ 用户名: user01 │ │
│ │ 姓名: 张三 │ │
│ │ 邮箱: user01@company.com │ │
│ │ 手机号: 138****8000 │ │
│ │ 部门: 技术部 │ │
│ │ 角色: 管理员 │ │
│ │ 状态: 启用 │ │
│ │ 创建时间: 2024-01-15 10:30:00 │ │
│ │ 最后登录: 2024-03-09 15:20:00 │ │
│ │ │ │
│ │ ═══════════════════════════════════════════════ │ │
│ │ 操作记录 │ │
│ │ ─────────────────────────────────────────────── │ │
│ │ ● 2024-03-09 修改了个人信息 │ │
│ │ ● 2024-02-15 登录系统 │ │
│ │ ● 2024-01-15 创建账号 │ │
│ │ │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐│ │
│ │ │ 编 辑 │ │ 禁 用 │ │ 删 除 ││ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘│ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘2.4 个人中心页面
2.4.1 页面布局
┌─────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├──────────────┬──────────────────────────────────────────────┤
│ │ 个人中心 │
│ 侧边菜单 ├──────────────────────────────────────────────┤
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ │ │
│ │ │ ┌────────┐ │ │
│ │ │ │ │ 张三 │ │
│ │ │ │ 头像 │ 技术部 | 管理员 │ │
│ │ │ │ │ │ │
│ │ │ └────────┘ [更换头像] │ │
│ │ │ │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 基本信息 [编辑] │ │
│ │ │ ─────────────────────────────────────── │ │
│ │ │ 用户名: user01 (不可修改) │ │
│ │ │ 姓名: 张三 │ │
│ │ │ 邮箱: user01@company.com │ │
│ │ │ 手机号: 138****8000 │ │
│ │ │ 部门: 技术部 │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 账号安全 [修改] │ │
│ │ │ ─────────────────────────────────────── │ │
│ │ │ 登录密码: ******** [修改密码] │ │
│ │ │ 手机绑定: 138****8000 [更换手机] │ │
│ │ │ 邮箱绑定: use****@company.com [更换] │ │
│ │ │ 二次验证: 已开启 [关闭] │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ 登录日志 │ │
│ │ │ ─────────────────────────────────────── │ │
│ │ │ 时间 IP地址 设备 │ │
│ │ │ 2024-03-09 15:20 192.168.1.1 Chrome │ │
│ │ │ 2024-03-08 09:10 192.168.1.2 Firefox │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
└──────────────┴──────────────────────────────────────────────┘3. 批量操作设计
3.1 批量操作流程
[用户列表页] → [勾选多个用户] → [批量操作按钮激活]
│
├──→ [点击批量启用] → [确认对话框] → [执行启用] → [刷新列表]
│
├──→ [点击批量禁用] → [确认对话框] → [执行禁用] → [刷新列表]
│
└──→ [点击批量删除] → [二次确认对话框] → [执行删除] → [刷新列表]3.2 确认对话框
批量启用确认
┌─────────────────────────────────────────┐
│ 确认启用 [X] │
├─────────────────────────────────────────┤
│ │
│ 确定要启用选中的 5 个用户吗？ │
│ │
│ 启用后，这些用户将可以正常登录系统。 │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 取 消 │ │ 确 定 │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────┘4. 导入导出设计
4.1 用户导入
4.1.1 导入流程
[点击导入按钮] → [打开导入弹窗] → [下载模板] → [填写数据] → [上传文件]
│
├──→ [解析成功] → [预览数据] → [确认导入] → [导入成功]
│
└──→ [解析失败] → [显示错误信息] → [重新上传]4.1.2 导入弹窗
┌─────────────────────────────────────────┐
│ 导入用户 [X] │
├─────────────────────────────────────────┤
│ │
│ 步骤1: 下载模板 │
│ [下载Excel模板] │
│ │
│ 步骤2: 填写数据 │
│ 请按照模板格式填写用户数据 │
│ │
│ 步骤3: 上传文件 │
│ ┌─────────────────────────────────┐ │
│ │ 点击或拖拽文件到此处 │ │
│ │ 支持 .xlsx, .xls 格式 │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 取 消 │ │ 下一步 │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────┘4.2 用户导出
4.2.1 导出选项
- 导出当前页：导出当前页显示的用户
- 导出全部：导出所有筛选结果
- 导出选中：导出勾选的用户
4.2.2 导出字段
| 字段 | 说明 |
|---|---|
| 用户名 | 系统登录账号 |
| 姓名 | 真实姓名 |
| 邮箱 | 邮箱地址 |
| 手机号 | 手机号码 |
| 部门 | 所属部门 |
| 角色 | 用户角色 |
| 状态 | 启用/禁用 |
| 创建时间 | 账号创建时间 |
| 最后登录 | 最后登录时间 |
5. 头像上传设计
5.1 上传流程
[点击上传] → [选择图片] → [本地预览] → [裁剪调整] → [确认上传]
│
├──→ [上传成功] → [显示新头像]
│
└──→ [上传失败] → [显示错误] → [重新上传]5.2 上传限制
| 项目 | 限制 |
|---|---|
| 格式 | jpg, png |
| 大小 | 最大 2MB |
| 尺寸 | 建议 200x200px |
| 裁剪 | 支持圆形裁剪预览 |
6. 密码修改设计
6.1 修改密码流程
[点击修改密码] → [验证身份] → [输入新密码] → [确认修改]
│
├──→ [修改成功] → [重新登录提示]
│
└──→ [修改失败] → [显示错误原因]6.2 密码修改表单
| 字段 | 类型 | 必填 | 验证规则 |
|---|---|---|---|
| 原密码 | Password | 是 | 验证原密码正确性 |
| 新密码 | Password | 是 | 8-20位，包含字母和数字 |
| 确认密码 | Password | 是 | 与新密码一致 |
6.3 密码强度提示
| 强度 | 规则 | 颜色 |
|---|---|---|
| 弱 | 仅字母或仅数字 | 红色 |
| 中 | 字母+数字 | 橙色 |
| 强 | 字母+数字+特殊字符 | 绿色 |
7. 状态定义
7.1 用户状态
| 状态 | 说明 | 操作 |
|---|---|---|
| 启用 | 用户可以正常登录和使用 | 可禁用、删除 |
| 禁用 | 用户无法登录系统 | 可启用、删除 |
| 锁定 | 密码错误次数过多被锁定 | 管理员可解锁 |
7.2 页面状态
| 状态 | 说明 |
|---|---|
| 加载中 | 显示骨架屏 |
| 空数据 | 显示空状态插图 |
| 有数据 | 正常显示表格 |
| 筛选无结果 | 显示"无匹配结果" |
| 错误状态 | 显示错误信息和重试按钮 |
8. 权限控制
8.1 功能权限
| 功能 | 超级管理员 | 管理员 | 用户 |
|---|---|---|---|
| 查看用户列表 | ✓ | ✓ | ✗ |
| 创建用户 | ✓ | ✓ | ✗ |
| 编辑用户 | ✓ | ✓ | ✗ |
| 删除用户 | ✓ | ✗ | ✗ |
| 批量操作 | ✓ | ✓ | ✗ |
| 导入导出 | ✓ | ✓ | ✗ |
| 查看个人中心 | ✓ | ✓ | ✓ |
| 编辑个人信息 | ✓ | ✓ | ✓ |
9. 修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，完成用户管理模块设计 |