可交互原型说明文档

1. 概述

1.1 文档目的

本文档详细说明系统可交互原型的页面结构、交互流程和状态定义，为前端开发和用户测试提供参考。

1.2 原型范围

本原型覆盖以下核心功能模块：

登录认证模块
首页仪表盘模块
用户管理模块
组织架构模块
权限管理模块

1.3 原型访问

在线原型链接: [待补充]
本地原型路径: 05-prototypes/html/
密码: [待补充]

2. 全局架构

2.1 页面结构

App
├── 登录页 (Login)
│   └── 密码找回 (ForgotPassword)
│
├── 布局框架 (Layout)
│   ├── 顶部导航栏 (Header)
│   │   ├── Logo
│   │   ├── 全局搜索
│   │   ├── 通知中心
│   │   ├── 全屏切换
│   │   └── 用户菜单
│   │       ├── 个人中心
│   │       ├── 系统设置
│   │       └── 退出登录
│   │
│   ├── 侧边菜单 (Sider)
│   │   ├── 首页
│   │   ├── 用户管理
│   │   │   ├── 用户列表
│   │   │   └── 用户详情
│   │   ├── 组织架构
│   │   │   ├── 部门管理
│   │   │   └── 岗位管理
│   │   ├── 权限管理
│   │   │   ├── 角色管理
│   │   │   └── 菜单管理
│   │   └── 系统设置
│   │       ├── 基础配置
│   │       ├── 安全设置
│   │       └── 操作日志
│   │
│   └── 内容区域 (Content)
│       ├── 面包屑导航
│       ├── 页面标题
│       └── 页面内容
│
└── 异常页面
    ├── 403 无权限
    ├── 404 页面不存在
    └── 500 服务器错误

2.2 路由定义

路由	页面名称	权限	说明
`/login`	登录页	公开	用户登录入口
`/forgot-password`	密码找回	公开	找回密码流程
`/`	首页仪表盘	登录用户	系统首页
`/user`	用户管理	用户管理权限	用户列表页
`/user/create`	新建用户	用户创建权限	用户创建表单
`/user/edit/:id`	编辑用户	用户编辑权限	用户编辑表单
`/user/detail/:id`	用户详情	用户查看权限	用户详情页
`/org/department`	部门管理	组织管理权限	部门树管理
`/org/position`	岗位管理	组织管理权限	岗位列表
`/permission/role`	角色管理	权限管理权限	角色列表
`/permission/menu`	菜单管理	权限管理权限	菜单配置
`/settings/basic`	基础配置	系统设置权限	系统参数
`/settings/security`	安全设置	系统设置权限	安全策略
`/settings/log`	操作日志	日志查看权限	日志列表

3. 页面详细说明

3.1.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   ┌─────────────────────┐    ┌─────────────────────────┐   │
│   │                     │    │                         │   │
│   │    品牌区域          │    │    登录表单              │   │
│   │                     │    │                         │   │
│   │  - Logo             │    │  - 用户名/邮箱输入框      │   │
│   │  - 系统名称          │    │  - 密码输入框            │   │
│   │  - Slogan           │    │  - 记住密码复选框         │   │
│   │  - 背景图/动画       │    │  - 忘记密码链接           │   │
│   │                     │    │  - 登录按钮              │   │
│   │                     │    │                         │   │
│   └─────────────────────┘    └─────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

3.1.2 交互流程

[用户访问] → [显示登录页]
    │
    ├──→ [输入用户名] → [失焦验证格式] → [显示验证结果]
    │
    ├──→ [输入密码] → [可切换显示/隐藏]
    │
    ├──→ [点击记住密码] → [勾选/取消勾选]
    │
    ├──→ [点击忘记密码] → [跳转密码找回页]
    │
    └──→ [点击登录] → [显示加载状态]
            │
            ├──→ [验证成功] → [存储Token] → [跳转首页]
            │
            └──→ [验证失败] → [显示错误提示] → [清空密码]

3.1.3 状态定义

状态	触发条件	界面表现
初始状态	页面加载完成	表单为空，登录按钮可点击
输入中	用户正在输入	实时显示输入内容
验证中	点击登录按钮	按钮显示加载动画，禁用输入
验证成功	接口返回成功	显示成功提示，跳转页面
验证失败	接口返回失败	显示错误提示，密码清空
网络错误	请求超时/失败	显示网络错误提示

3.1.4 表单验证规则

字段	规则	错误提示
用户名	必填，邮箱格式	"请输入有效的邮箱地址"
密码	必填，6-20位	"密码长度应为6-20位"

3.2 首页仪表盘 (Dashboard)

3.2.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  首页                                         │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│              │  │ 用户总数│ │ 部门数量│ │ 在线用户│ │ 今日新增│ │
│              │  │ 1,234  │ │   56   │ │   89   │ │   12   │ │
│              │  └────────┘ └────────┘ └────────┘ └────────┘ │
│              │                                              │
│              │  ┌────────────────────┐ ┌──────────────────┐ │
│              │  │   用户增长趋势      │ │   部门分布       │ │
│              │  │   [折线图]         │ │   [饼图]         │ │
│              │  │                   │ │                  │ │
│              │  └────────────────────┘ └──────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │  最近活动                                   │ │
│              │  │  ─────────────────────────────────────── │ │
│              │  │  ● 张三 创建了用户 "李四"      2分钟前    │ │
│              │  │  ● 王五 修改了部门 "技术部"    5分钟前    │ │
│              │  │  ● 赵六 登录系统               10分钟前   │ │
│              │  │  ● ...                                    │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

3.2.2 交互流程

[页面加载] → [请求统计数据] → [显示加载状态]
    │
    ├──→ [数据加载成功] → [渲染统计卡片] → [渲染图表]
    │
    └──→ [数据加载失败] → [显示错误状态] → [提供重试按钮]

[统计卡片] → [悬停] → [显示趋势指示器 (↑/↓)]

[图表区域] → [数据点悬停] → [显示Tooltip详情]

[活动列表项] → [点击] → [跳转对应详情页]

3.2.3 数据刷新

数据类型	刷新频率	刷新方式
统计数据	5分钟	自动刷新
图表数据	5分钟	自动刷新
活动列表	实时	WebSocket推送

3.3 用户列表页 (UserList)

3.3.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  用户管理 > 用户列表                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 部门: [全部▼] 状态: [全部▼] 角色: [全部▼]  │ │
│              │  │ 🔍 搜索用户名/姓名/邮箱...                │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ [+ 新建]  [批量启用] [批量禁用] [批量删除] [导出] │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ ☑ │用户名│姓名│部门  │角色  │状态│操作    │ │
│              │  ├───┼──────┼────┼──────┼──────┼────┼───────┤ │
│              │  │ ☑ │admin │管理员│技术部│超级管理员│启用│编辑 删除│ │
│              │  │ ☑ │user01│张三 │产品部│用户  │启用│编辑 删除│ │
│              │  │ ☑ │user02│李四 │技术部│管理员│禁用│编辑 删除│ │
│              │  │...│...   │... │...   │...   │... │...    │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 共 100 条  < 1 2 3 4 5 ... 10 >  每页20条 │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

3.3.2 交互流程

筛选功能

[选择筛选条件] → [触发筛选] → [显示加载状态]
    │
    ├──→ [筛选成功] → [更新表格数据] → [重置分页到第1页]
    │
    └──→ [筛选失败] → [显示错误提示]

搜索功能

[输入关键词] → [按回车/点击搜索] → [触发搜索]
    │
    ├──→ [搜索成功] → [显示搜索结果] → [高亮匹配文本]
    │
    └──→ [搜索失败] → [显示错误提示]

批量操作

[勾选用户] → [激活批量操作按钮]
    │
    ├──→ [点击批量启用] → [确认对话框] → [执行操作] → [刷新列表]
    ├──→ [点击批量禁用] → [确认对话框] → [执行操作] → [刷新列表]
    └──→ [点击批量删除] → [确认对话框] → [执行操作] → [刷新列表]

单行操作

[悬停行] → [显示操作按钮]
    │
    ├──→ [点击编辑] → [跳转编辑页/打开编辑弹窗]
    ├──→ [点击删除] → [确认对话框] → [删除] → [刷新列表]
    └──→ [点击查看] → [跳转详情页/打开详情抽屉]

3.3.3 状态定义

状态	说明
加载中	表格显示骨架屏
空数据	显示空状态插图和提示
有数据	正常显示表格
筛选无结果	显示"无匹配结果"提示
错误状态	显示错误信息和重试按钮

3.4 用户创建页 (UserCreate)

3.4.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  用户管理 > 新建用户                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │  ●──────○──────○                          │ │
│              │  │  基本信息  角色权限  完成                   │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │                                          │ │
│              │  │  基本信息                                  │ │
│              │  │  ═══════════════════════════════════════ │ │
│              │  │                                          │ │
│              │  │  用户名 *                                  │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │ 请输入用户名                         │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │  [√] 用户名可用                          │ │
│              │  │                                          │ │
│              │  │  姓名 *                                    │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │ 请输入真实姓名                        │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  邮箱 *                                    │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │ example@company.com                  │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  部门 *                                    │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │ 请选择部门 ▼                         │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  手机号码                                  │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │ 13800138000                          │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  ┌──────────────┐    ┌──────────────┐   │ │
│              │  │  │    取 消     │    │   下一步 >   │   │ │
│              │  │  └──────────────┘    └──────────────┘   │ │
│              │  │                                          │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

3.4.2 步骤流程

步骤1: 基本信息
    │
    ├──→ [填写表单] → [实时验证] → [验证通过]
    │
    └──→ [点击下一步] → [保存草稿] → [进入步骤2]

步骤2: 角色权限
    │
    ├──→ [选择角色] → [自动分配权限]
    │
    ├──→ [自定义权限] → [勾选/取消权限]
    │
    ├──→ [点击上一步] → [返回步骤1]
    │
    └──→ [点击下一步] → [进入步骤3]

步骤3: 完成
    │
    ├──→ [显示成功信息] → [显示用户摘要]
    │
    ├──→ [点击创建另一个] → [返回步骤1]
    │
    └──→ [点击返回列表] → [跳转用户列表]

3.4.3 表单验证

字段	规则	实时验证	错误提示
用户名	必填，3-20字符，字母开头	是	"用户名格式不正确"
姓名	必填，2-20字符	是	"请输入真实姓名"
邮箱	必填，邮箱格式	是	"邮箱格式不正确"
部门	必填	否	"请选择部门"
手机号	选填，手机号格式	是	"手机号格式不正确"

3.5 部门管理页 (Department)

3.5.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  组织架构 > 部门管理                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────┬──────────────────────┐ │
│              │  │                  │                      │ │
│              │  │  [+ 根部门]       │   技术部              │ │
│              │  │                  │   ═══════════════════ │ │
│              │  │  ▼ 技术部         │                      │ │
│              │  │    ├─ 前端组      │   部门信息            │ │
│              │  │    ├─ 后端组      │   ──────────────────  │ │
│              │  │    └─ 测试组      │   负责人：张三         │ │
│              │  │  ▶ 产品部         │   成员数：25人         │ │
│              │  │  ▶ 运营部         │   创建时间：2024-01-15 │ │
│              │  │                  │                      │ │
│              │  │                  │   [编辑] [删除]       │ │
│              │  │                  │                      │ │
│              │  │                  │   ──────────────────  │ │
│              │  │                  │   部门成员            │ │
│              │  │                  │   ──────────────────  │ │
│              │  │                  │   ┌────────────────┐  │ │
│              │  │                  │   │ ☑ │姓名│职位│操作│  │ │
│              │  │                  │   ├───┼────┼────┼────┤  │ │
│              │  │                  │   │ ☑ │张三│经理│调岗│  │ │
│              │  │                  │   │ ☑ │李四│开发│调岗│  │ │
│              │  │                  │   └────────────────┘  │ │
│              │  │                  │                      │ │
│              │  └──────────────────┴──────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

3.5.2 交互流程

树形操作

[点击展开/收起] → [切换子部门显示]

[点击部门名称] → [选中部门] → [右侧显示详情]

[右键部门] → [显示上下文菜单]
    │
    ├──→ [新增子部门] → [打开创建弹窗]
    ├──→ [编辑部门] → [打开编辑弹窗]
    └──→ [删除部门] → [确认对话框] → [删除]

部门详情

[显示部门信息] → [可编辑基本信息]

[成员列表] → [显示部门成员]
    │
    ├──→ [点击调岗] → [选择目标部门] → [确认调岗]
    └──→ [点击移除] → [确认移除] → [从部门移除]

[点击添加成员] → [选择用户] → [添加到部门]

4. 全局交互

4.1 顶部导航

4.1.1 全局搜索

[点击搜索图标] → [展开搜索框]
    │
    ├──→ [输入关键词] → [实时显示搜索结果]
    │       │
    │       ├──→ [点击用户] → [跳转用户详情]
    │       ├──→ [点击部门] → [跳转部门管理]
    │       └──→ [点击菜单] → [跳转对应页面]
    │
    └──→ [按ESC/点击外部] → [关闭搜索]

4.1.2 通知中心

[点击铃铛图标] → [下拉显示通知列表]
    │
    ├──→ [点击通知] → [标记已读] → [跳转相关页面]
    ├──→ [点击全部已读] → [标记所有已读]
    └──→ [点击查看全部] → [跳转通知列表页]

4.1.3 用户菜单

[点击头像] → [下拉显示菜单]
    │
    ├──→ [个人中心] → [跳转个人资料页]
    ├──→ [系统设置] → [跳转系统设置页]
    └──→ [退出登录] → [确认对话框] → [清除登录态] → [跳转登录页]

4.2 侧边菜单

4.2.1 菜单展开/收起

[点击收起按钮] → [侧边栏折叠] → [只显示图标]

[点击展开按钮] → [侧边栏展开] → [显示完整菜单]

[点击菜单项] → [展开子菜单] → [高亮当前项]
    │
    └──→ [路由跳转] → [内容区域更新]

4.2.2 菜单权限

根据用户角色动态显示/隐藏菜单
无权限菜单不显示或禁用
支持菜单收藏（常用菜单置顶）

5. 异常处理

5.1 页面级异常

异常类型	触发条件	处理方式
403 无权限	访问无权限页面	显示403页面，提供返回首页按钮
404 不存在	访问不存在的路由	显示404页面，提供返回首页按钮
500 服务器错误	服务器内部错误	显示500页面，提供刷新按钮

5.2 操作级异常

异常类型	触发条件	处理方式
网络错误	请求超时/失败	Toast提示"网络异常，请重试"
权限变更	操作过程中权限被收回	提示权限不足，刷新页面
数据冲突	并发修改冲突	提示数据已更新，请刷新后重试
数据不存在	操作已被删除的数据	提示数据不存在，返回列表

5.3 表单验证错误

错误类型	提示方式	位置
必填项为空	红色文字提示	字段下方
格式错误	红色文字提示	字段下方
重复数据	红色文字提示	字段下方
提交时错误	Message提示	页面右上角

6. 状态管理

6.1 全局状态

状态	说明	存储位置
用户信息	当前登录用户信息	LocalStorage + Vuex
权限信息	用户权限列表	Vuex
菜单状态	侧边栏展开/收起	LocalStorage
主题设置	主题颜色/模式	LocalStorage
语言设置	当前语言	LocalStorage

6.2 页面状态

状态	说明	存储位置
筛选条件	列表页筛选条件	URL参数
分页信息	当前页码/每页条数	URL参数
表单草稿	未提交的表单数据	SessionStorage

7. 性能优化

7.1 加载优化

优化点	实现方式
路由懒加载	按路由分割代码
组件懒加载	弹窗/抽屉按需加载
图片懒加载	使用loading="lazy"
数据预加载	鼠标悬停时预加载

7.2 渲染优化

优化点	实现方式
虚拟滚动	长列表使用虚拟滚动
分页加载	大数据量分页展示
防抖节流	搜索/滚动事件处理
骨架屏	数据加载时显示骨架屏

8. 附录

8.1 快捷键

快捷键	功能	适用场景
`Ctrl + K`	打开全局搜索	全局
`Ctrl + /`	显示快捷键帮助	全局
`ESC`	关闭弹窗/抽屉	弹窗/抽屉打开时
`Ctrl + S`	保存表单	表单编辑时
`Ctrl + Enter`	提交表单	表单编辑时

8.2 浏览器兼容

浏览器	最低版本	支持状态
Chrome	80+	✓ 完全支持
Firefox	75+	✓ 完全支持
Safari	13+	✓ 完全支持
Edge	80+	✓ 完全支持

修订记录

版本	日期	作者	变更内容
1.0	2026-03-09	UI/UX设计师	初始版本，定义可交互原型说明

可交互原型说明文档 ​

1. 概述 ​

1.1 文档目的 ​

1.2 原型范围 ​

1.3 原型访问 ​

2. 全局架构 ​

2.1 页面结构 ​

2.2 路由定义 ​

3. 页面详细说明 ​

3.1 登录页 (Login) ​

3.1.1 页面布局 ​

3.1.2 交互流程 ​

3.1.3 状态定义 ​

3.1.4 表单验证规则 ​

3.2 首页仪表盘 (Dashboard) ​

3.2.1 页面布局 ​

3.2.2 交互流程 ​

3.2.3 数据刷新 ​

3.3 用户列表页 (UserList) ​

3.3.1 页面布局 ​

3.3.2 交互流程 ​

3.3.3 状态定义 ​

3.4 用户创建页 (UserCreate) ​

3.4.1 页面布局 ​

3.4.2 步骤流程 ​

3.4.3 表单验证 ​

3.5 部门管理页 (Department) ​

3.5.1 页面布局 ​

3.5.2 交互流程 ​

4. 全局交互 ​

4.1 顶部导航 ​

4.1.1 全局搜索 ​

4.1.2 通知中心 ​

4.1.3 用户菜单 ​

4.2 侧边菜单 ​

4.2.1 菜单展开/收起 ​

4.2.2 菜单权限 ​

5. 异常处理 ​

5.1 页面级异常 ​

5.2 操作级异常 ​

5.3 表单验证错误 ​

6. 状态管理 ​

6.1 全局状态 ​

6.2 页面状态 ​

7. 性能优化 ​

7.1 加载优化 ​

7.2 渲染优化 ​

8. 附录 ​

8.1 快捷键 ​

8.2 浏览器兼容 ​

修订记录 ​

可交互原型说明文档

1. 概述

1.1 文档目的

1.2 原型范围

1.3 原型访问

2. 全局架构

2.1 页面结构

2.2 路由定义

3. 页面详细说明

3.1 登录页 (Login)

3.1.1 页面布局

3.1.2 交互流程

3.1.3 状态定义

3.1.4 表单验证规则

3.2 首页仪表盘 (Dashboard)

3.2.1 页面布局

3.2.2 交互流程

3.2.3 数据刷新

3.3 用户列表页 (UserList)

3.3.1 页面布局

3.3.2 交互流程

3.3.3 状态定义

3.4 用户创建页 (UserCreate)

3.4.1 页面布局

3.4.2 步骤流程

3.4.3 表单验证

3.5 部门管理页 (Department)

3.5.1 页面布局

3.5.2 交互流程

4. 全局交互

4.1 顶部导航

4.1.1 全局搜索

4.1.2 通知中心

4.1.3 用户菜单

4.2 侧边菜单

4.2.1 菜单展开/收起

4.2.2 菜单权限

5. 异常处理

5.1 页面级异常

5.2 操作级异常

5.3 表单验证错误

6. 状态管理

6.1 全局状态

6.2 页面状态

7. 性能优化

7.1 加载优化

7.2 渲染优化

8. 附录

8.1 快捷键

8.2 浏览器兼容

修订记录