aue/制度文件管理学习 AI 智能体页面设计文档.md

制度文件管理学习AI智能体页面设计文档

文档说明

本文档详细描述了制度文件管理学习AI智能体的页面设计方案，基于功能需求规格文档，涵盖了6个核心模块、24个具体功能点的页面布局、交互设计、视觉设计等内容，为前端开发提供详细的设计指导。

设计原则

1. 用户中心：以用户需求为中心，提供直观、易用的界面
2. 功能完整：覆盖所有功能点，确保系统功能完整可用
3. 视觉统一：保持一致的视觉风格，提升用户体验
4. 响应式设计：适配不同屏幕尺寸，确保在各种设备上的良好显示
5. 性能优化：优化页面加载速度，提升系统响应性能
6. 可访问性：确保系统对所有用户（包括残障用户）都可访问

整体页面结构

系统采用经典的三栏布局，包括：

1. 顶部导航栏：系统标题、用户信息、全局搜索、消息通知等
2. 左侧菜单栏：模块导航、功能菜单、快捷入口等
3. 右侧主内容区：功能操作、数据展示、表单输入等
4. 底部状态栏：版权信息、系统版本、技术支持等

页面布局尺寸

区域	宽度	高度	备注
顶部导航栏	100%	60px	固定高度
左侧菜单栏	240px	100%	可折叠，折叠后宽度为64px
右侧主内容区	剩余宽度	100%	自适应宽度
底部状态栏	100%	40px	固定高度

导航系统

1. 模块级导航

位于左侧菜单栏，包含6个核心模块：

• 制度文件查看和学习
• 制度文件管理
• 知识问答
• 考察和训练
• 纲要学习（思维导图）
• 综合看板

2. 功能级导航

位于各模块内部，根据功能点组织子菜单：

• 制度文件查看和学习：智能PDF阅读器、权限精细化管理、新岗人员学习地图、语音朗读、关联推荐
• 制度文件管理：版本管理、OA系统深度对接、知识库自动同步、题库智能维护
• 知识问答：多轮智能对话、答案溯源、问答质量闭环、会话管理
• 考察和训练：AI智能出题、题库管理、智能组卷、AI自动阅卷、互动式训练
• 纲要学习：自动化纲要生成、导图学习功能
• 综合看板：数据可视化、智能预警、决策支持

3. 面包屑导航

位于主内容区顶部，显示当前页面的层级路径，方便用户了解当前位置和返回上级页面。

4. 快捷导航

位于顶部导航栏，提供常用功能的快速访问入口，如全局搜索、消息通知、用户设置等。

模块页面设计

0. 通用流程设计

0.1 用户注册/登录流程

页面布局：

• 登录页：账号输入框、密码输入框、验证码输入框、登录按钮、忘记密码链接、OA单点登录按钮
• 注册页：用户名输入框、密码设置、确认密码、邮箱输入、手机输入、验证码输入、注册按钮
• 忘记密码页：账号输入、验证码输入、新密码设置、确认新密码、提交按钮

交互设计：

• 普通登录：用户输入账号密码 → 系统验证 → 登录成功进入系统
• OA单点登录：用户点击OA登录按钮 → 跳转至OA认证页面 → 认证成功后自动登录系统
• 注册流程：用户填写注册信息 → 系统验证 → 发送邮箱/手机验证码 → 用户输入验证码 → 注册成功
• 忘记密码：用户输入账号 → 系统发送验证码 → 用户输入验证码 → 设置新密码 → 密码重置成功

0.2 制度文件上传流程

页面布局：

• 上传页面：文件选择按钮、文件拖拽区域、文件信息预览、制度分类选择、版本说明输入、上传按钮
• 上传进度：进度条、上传状态提示
• 上传结果：成功/失败提示、查看文件按钮

交互设计：

• 用户选择/拖拽文件 → 系统验证文件格式 → 显示文件信息 → 用户填写版本说明 → 点击上传 → 系统处理文件 → 生成版本号 → 上传成功提示

0.3 权限管理审批流程

页面布局：

• 权限申请页：申请人信息、申请文件、申请权限类型、申请理由、提交按钮
• 审批页面：待审批列表、审批详情、审批意见输入、同意/拒绝按钮
• 审批记录：审批历史、审批状态、审批人、审批时间

交互设计：

• 权限申请：用户提交权限申请 → 系统发送审批通知给直属领导 → 领导审批 → 审批结果通知申请人
• 跨部门授权：系统管理员配置跨部门权限 → 相关部门负责人确认 → 权限生效

0.4 系统配置流程

页面布局：

• 系统设置页：基本配置、邮件配置、短信配置、预警配置、存储配置
• 配置项列表：配置名称、当前值、操作（编辑）
• 配置编辑：输入框、选择器、保存按钮

交互设计：

• 管理员进入系统设置 → 选择配置类别 → 编辑配置项 → 保存配置 → 系统应用新配置

0.5 数据备份/恢复流程

页面布局：

• 备份管理页：备份列表、备份时间、备份大小、操作（恢复/删除）
• 备份设置：备份周期、备份路径、自动备份开关
• 手动备份按钮：立即备份
• 恢复确认：恢复前确认弹窗、恢复进度、恢复结果

交互设计：

• 自动备份：系统按设定周期自动执行备份 → 生成备份记录
• 手动备份：管理员点击立即备份 → 系统执行备份 → 显示备份结果
• 数据恢复：管理员选择备份文件 → 确认恢复 → 系统执行恢复 → 显示恢复结果

0.6 系统监控/日志流程

页面布局：

• 监控面板：系统状态、CPU使用率、内存使用率、磁盘使用率、在线用户数
• 日志查询：时间范围选择、日志类型选择、关键词搜索、日志列表
• 异常告警：告警列表、告警级别、告警时间、处理状态

交互设计：

• 实时监控：系统实时采集监控数据 → 展示监控面板 → 异常时触发告警
• 日志查询：管理员设置查询条件 → 系统检索日志 → 展示日志列表
• 告警处理：管理员查看告警 → 处理告警 → 记录处理结果

1. 制度文件查看和学习

页面布局：

• 顶部工具栏：
  • 文件信息区：制度名称、版本号、生效日期、密级标识
  • 阅读工具区：目录切换按钮、搜索框、缩放控制（50%-200%）、页面旋转、视图模式切换（单页/双页/连续滚动）
  • 批注工具区：高亮工具（多种颜色）、下划线、删除线、文本批注、便签批注、图形批注（矩形、圆形、箭头）、手写批注（钢笔、水彩笔、智能笔）
  • AI工具区：智能总结按钮、全文总结按钮、词句解释开关、引文提示开关
  • 功能按钮区：语音朗读、导出笔记、打印、下载、分享
• 左侧边栏（可切换标签页）：
  • 目录标签：文档目录树（可展开/收起，支持点击跳转）
  • 缩略图标签：页面缩略图预览（支持点击跳转）
  • 批注标签：批注列表（显示所有批注，支持点击定位）
  • 笔记标签：笔记汇总（按文档汇总所有笔记，支持搜索和导出）
• 中间主区域：
  • PDF内容区：文件内容展示（支持缩放、滚动、页面切换）
  • AI总结浮窗：右键或悬停时显示段落智能总结
  • 词句解释弹窗：划词选中后弹出解释说明
  • 引文提示浮窗：悬停引文时显示引用信息
• 右侧边栏：
  • 权限配置区：角色列表、菜单树、数据范围、文件权限设置
  • 关联推荐区："相关推荐"侧边栏（展示推荐项：标题、摘要、标签）
  • AI全文总结区：显示文章摘要、核心要点、关键结论
• 底部状态栏：
  • 阅读进度：当前页/总页数、阅读进度百分比、阅读时长统计
  • 导航控制：上一页/下一页按钮、页面跳转输入框、前进/后退按钮
  • 同步状态：多设备同步状态指示

交互设计：

• 智能PDF阅读器功能：
  • 基础阅读功能：点击目录项快速跳转到对应章节、搜索关键词后高亮显示匹配内容、支持页面缩放（50%-200%）、页面旋转、单页/双页/连续滚动视图切换
  • 批注与高亮功能：支持鼠标选择文本进行高亮（多种颜色）、下划线、删除线标记；支持添加文本批注、便签批注、图形批注（矩形、圆形、箭头）；支持手写批注（钢笔、水彩笔、智能笔）
  • AI智能辅助功能：
    • 智能总结：右键点击段落自动生成要点总结，鼠标悬停自动弹出对应段落总结
    • 全文总结：自动提取文章摘要、核心要点、关键结论
    • 词句解释：划词选中生僻词汇或专业术语，自动弹出解释说明
    • 引文提示：鼠标悬停在引文上自动显示引用信息，无需翻页
  • 笔记管理功能：所有批注和笔记自动汇总到笔记本，支持按文档查看所有笔记，支持笔记搜索和导出
  • 阅读进度功能：阅读进度自动保存，支持多设备同步阅读位置，显示当前页/总页数、阅读进度百分比
  • 文档导航功能：支持缩略图预览快速跳转、页面跳转输入、前进/后退导航
• 权限精细化管理功能：点击角色名称查看/编辑权限、勾选菜单树和组织树进行权限配置、批量授权功能支持选择多个用户和文件、权限变更实时生效（延迟≤5秒）
• 新岗人员学习地图功能：点击阶段卡片展开/收起该阶段任务、点击任务项开始学习或查看详情、学习进度实时同步、到期任务自动提醒
• 语音朗读功能：点击播放按钮开始朗读、调整语速和音调、选择朗读范围（当前段落、当前章节、全文）、支持后台播放
• 关联推荐功能：点击推荐项跳转到对应制度文件、滚动加载更多推荐内容、推荐结果可配置开关

2. 制度文件管理

页面布局：

• 顶部：制度文件名称、操作按钮（上传新版本、对比版本、回滚版本、扫描受影响题目、生成新题）、OA对接配置（接口地址、认证方式、同步策略）、同步配置（同步策略、调度时间、订阅管理）
• 左侧：版本列表（版本号、创建时间、创建人、变更说明、操作按钮）、受影响题目列表（题目ID、内容、关联制度、原版本、状态）
• 中间：同步日志（同步时间、同步内容、状态、错误信息）、同步记录（制度名称、变更类型、同步时间、状态、推送用户数）
• 右侧：对比视图（左右两栏展示不同版本差异，高亮显示新增/删除/修改）、AI生成题目预览（题型、题目内容、答案、解析、操作）
• 底部：反馈工单列表（工单编号、来源制度、反馈内容、处理状态）、订阅列表（用户姓名、订阅制度、接收方式）、试卷模板列表（模板名称、关联制度版本、题目分布、更新时间）

交互设计：

• 版本管理功能：点击版本号查看该版本详情、选择两个版本进行对比、点击回滚按钮回滚到指定版本、上传新版本时自动递增版本号
• OA系统深度对接功能：配置OA接口参数、查看同步日志和状态、处理反馈工单、支持增量更新
• 知识库自动同步功能：配置同步策略（全量/增量）、查看同步记录和状态、管理用户订阅、制度变更后自动推送更新提醒
• 题库智能维护功能：扫描制度变更影响的题目、审核AI生成的新题目、更新试卷模板、批量处理受影响题目

3. 知识问答

页面布局：

• 顶部：上下文提示（显示当前对话轮数）、答案区域（回答正文）、反馈按钮（点赞、点踩）
• 左侧：会话列表（会话标题、创建时间、最后更新时间、消息数）
• 中间：对话窗口（历史消息、输入框、发送按钮）、分析报告（报告周期、高频问题Top N、低分答案列表、未命中问题列表）
• 右侧：跳转按钮（点击来源后跳转到阅读器对应位置）、向量库管理（知识库状态、索引统计、重建索引按钮）
• 底部：引用来源列表（制度名称、条款号、片段）、置信度标签、FAQ管理（FAQ列表、支持增删改查）、学习报告（提问总数、高频知识点、薄弱环节、推荐学习内容）

交互设计：

• RAG向量数据库功能：用户提问 → 混合检索（关键词+语义+结构化） → 获取相关文本块 → 组装上下文 → 调用大模型生成答案 → 返回
• 多轮智能对话功能：点击会话列表项切换会话、在输入框中输入问题并发送、支持追问和多轮对话、会话历史自动保存
• 答案溯源功能：点击引用来源跳转到原文、查看答案的置信度评分、低置信度答案提示人工复核
• 问答质量闭环功能：对答案进行点赞/点踩反馈、查看质量分析报告、管理FAQ列表、定期生成报告并优化问答质量
• 会话管理功能：搜索和删除会话、回顾历史问答记录、查看个人学习报告、基于报告推荐学习内容

4. 考察和训练

页面布局：

• 顶部：出题配置（选择制度、题型、数量、难度等级）、筛选条件（按制度、题型、难度、状态、标签）、组卷配置（选择模板、或手动设置各题型数量、难度比例、关联制度）、考试结果页（总分、用时、各题得分）、训练模式选择（闯关模式、每日一练、错题本）
• 左侧：题目列表（题目ID、内容、题型、难度、关联制度、标签、状态、操作）、闯关地图（关卡列表、通关状态、得分）
• 中间：生成结果（题目预览、答案、解析、关联知识点）、试卷预览（题目列表、总分、建议时长）、主观题详情（考生答案、标准答案、AI评语）
• 右侧：统计图表（总题量、题型分布、使用率、正确率趋势）、每日一练（推荐题目、每日刷新）
• 底部：操作按钮（采纳、修改、重新生成、保存至题库、生成试卷、保存模板、发布考试、导出）、过期题目提示（高亮显示，支持批量处理）、申诉按钮（对主观题评分有异议时可提交人工复核）、错题本（错题列表、可重练、查看解析）

交互设计：

• AI智能出题功能：配置出题参数、查看AI生成的题目、编辑和审核题目、保存题目至题库
• 题库管理功能：增删改查题目、批量导入导出题目、查看题目统计数据、处理过期题目
• 智能组卷功能：配置组卷条件、生成试卷并预览、调整题目顺序、保存模板和发布考试
• AI自动阅卷功能：查看考试成绩和各题得分、查看主观题评语和得分点/失分点、提交申诉进行人工复核、支持同义词匹配（如“三日”=“3天”）
• 互动式训练功能：选择训练模式、进行闯关练习、完成每日一练、重练错题并查看解析

5. 纲要学习（思维导图）

页面布局：

• 顶部：操作按钮（生成思维导图、导出图片、导出PDF、全屏、重置视图、查看详情、添加笔记、编辑节点、分享）
• 中间：思维导图视图（可拖拽、缩放、展开/收起的节点图）
• 右侧：节点信息（节点标题、核心要点）、节点详情弹窗（节点对应原文片段、跳转原文链接）
• 底部：笔记区域（在节点旁显示笔记图标，点击可查看/编辑）

交互设计：

• 自动化纲要生成功能：点击“生成思维导图”按钮解析文件、拖拽和缩放思维导图、展开/收起节点、导出思维导图为图片或PDF
• 导图学习功能：点击节点查看详情和原文片段、添加和编辑笔记、自定义思维导图节点、分享思维导图

6. 综合看板

页面布局：

• 顶部：筛选条件（时间范围、组织范围）、预警规则配置（学习预警阈值、更新预警提前天数、风险预警问题频次阈值）、报告模板配置（报告名称、周期、包含内容）
• 中间：全局概览（卡片、趋势折线图）、预警看板（预警类型、预警内容、级别、时间、操作）、报告列表（报告名称、生成时间、状态、操作）
• 右侧：组织架构视图（树形结构，点击部门显示学习完成率、考试通过率、活跃度排名）
• 底部：制度维度分析（制度热度排行榜、冷门制度列表、宣贯效果评估）、处理记录（已处理预警的历史记录）、推送设置（接收邮箱、推送时间）

交互设计：

• 数据可视化功能：切换时间范围和组织范围、下钻查看部门详情、导出图表和数据、实时刷新数据（延迟≤10秒）
• 智能预警功能：配置预警规则、查看预警信息和详情、处理预警事项、查看处理历史记录
• 决策支持功能：配置报告模板、生成和下载报告、设置报告推送、查看历史报告

响应式设计

1. 桌面端（≥1200px）

• 完整三栏布局
• 左侧菜单栏展开状态
• 所有功能完整显示

2. 平板端（768px-1199px）

• 左侧菜单栏可折叠
• 主内容区自适应宽度
• 部分表格和图表调整为横向滚动

3. 移动端（<768px）

• 左侧菜单栏隐藏（可通过汉堡菜单展开）
• 顶部导航栏简化
• 内容垂直堆叠
• 表单和按钮适配触摸操作

页面交互设计

1. 通用交互

• 悬停效果：按钮、链接、卡片等元素悬停时显示反馈
• 点击效果：按钮点击时显示按压效果
• 加载状态：数据加载时显示加载动画
• 错误提示：操作失败时显示错误提示
• 成功提示：操作成功时显示成功提示
• 确认对话框：重要操作前显示确认对话框

2. 特殊交互

• 拖拽排序：支持拖拽调整题目顺序、节点位置等
• 批量操作：支持选择多个项目进行批量处理
• 实时搜索：输入关键词时实时显示搜索结果
• 自动保存：编辑内容时自动保存
• 键盘快捷键：常用操作支持键盘快捷键

页面元素设计

1. 按钮

类型	样式	用途
主要按钮	蓝色背景，白色文字	主要操作，如提交、保存、确认
次要按钮	白色背景，蓝色边框和文字	次要操作，如取消、返回
危险按钮	红色背景，白色文字	危险操作，如删除、回滚
文本按钮	无背景，蓝色文字	辅助操作，如查看详情、编辑
图标按钮	无背景，仅图标	空间有限时的操作，如搜索、刷新

2. 表单元素

类型	样式	用途
输入框	白色背景，灰色边框，聚焦时蓝色边框	文本输入
下拉框	白色背景，灰色边框，右侧下拉箭头	选择选项
复选框	方形，未选中时灰色边框，选中时蓝色背景和白色对勾	多选
单选框	圆形，未选中时灰色边框，选中时蓝色背景和白色圆点	单选
日期选择器	输入框+日历图标，点击弹出日历	选择日期
上传组件	虚线边框，点击或拖拽上传文件	文件上传

3. 卡片

• 白色背景，轻微阴影
• 圆角设计（4px-8px）
• 顶部标题栏
• 底部操作栏（可选）

4. 表格

• 白色背景
• 表头灰色背景
• 行交替颜色（白色和浅灰色）
• 悬停行高亮
• 支持排序、筛选、分页

5. 图表

• 使用现代图表库（如ECharts）
• 配色方案统一
• 支持交互（如悬停提示、点击下钻）
• 响应式调整

配色方案

1. 主色调

• 主色：蓝色 (#1890FF) - 代表专业、信任、科技
• 辅助色：绿色 (#52C41A) - 代表成功、进步
• 警告色：黄色 (#FAAD14) - 代表警告、提醒
• 错误色：红色 (#F5222D) - 代表错误、危险

2. 中性色

• 背景色：白色 (#FFFFFF)、浅灰色 (#F5F5F5)、中灰色 (#E8E8E8)
• 文字色：深灰色 (#333333)、中灰色 (#666666)、浅灰色 (#999999)
• 边框色：浅灰色 (#E8E8E8)、中灰色 (#D9D9D9)

3. 功能色

• 链接色：蓝色 (#1890FF)
• 高亮色：蓝色 (#E6F7FF)
• 禁用色：浅灰色 (#BFBFBF)

字体方案

1. 字体选择

• 主要字体：微软雅黑、宋体（中文）
• 备选字体：Arial、Helvetica（英文）

2. 字体大小

级别	大小	用途
标题1	20px	页面标题
标题2	16px	模块标题
标题3	14px	区域标题
正文	14px	正文内容
小字体	12px	辅助文字、提示信息

3. 字体粗细

• 粗体：600 - 标题、强调文字
• 常规：400 - 正文内容
• 细体：300 - 辅助文字

图标方案

1. 图标库

• 使用 Ant Design Icons 或 Font Awesome
• 保持图标风格统一

2. 图标分类

类别	示例图标	用途
导航图标	菜单、首页、设置	导航菜单
操作图标	编辑、删除、添加、搜索	功能操作
状态图标	成功、警告、错误、信息	状态提示
功能图标	文件、PDF、Word、Excel	功能标识

3. 图标尺寸

• 导航图标：20px × 20px
• 操作图标：16px × 16px
• 状态图标：14px × 14px
• 小图标：12px × 12px

页面加载与性能优化

1. 加载策略

• 懒加载：图片、非首屏内容懒加载
• 按需加载：模块按需加载，减少初始加载时间
• 预加载：预加载可能需要的资源

2. 性能优化

• 代码分割：将代码分割为多个小块，按需加载
• 资源压缩：压缩CSS、JS、图片等资源
• 缓存策略：合理设置缓存，减少重复请求
• CDN加速：使用CDN加速静态资源

3. 响应时间

• 页面加载时间：≤3秒
• 操作响应时间：≤1秒
• 数据加载时间：≤2秒（大数据除外）

附录

1. 页面设计规范

• 所有页面遵循统一的设计规范
• 保持视觉一致性和用户体验一致性
• 确保所有功能点都有对应的页面设计

2. 前端技术栈

• 框架：React / Vue
• UI库：Ant Design / Element UI
• 图表库：ECharts
• 状态管理：Redux / Vuex
• 路由：React Router / Vue Router
• 构建工具：Webpack / Vite

3. 设计工具

• 原型设计：Figma / Sketch / Axure
• UI设计：Figma / Sketch
• 图标设计：Iconfont / Sketch

4. 交付物

• 页面设计文档（本文档）
• 高保真原型图
• UI设计稿
• 前端代码实现

版本历史

版本	修订日期	修订内容	修订人
V1.2	2026-04-01	1. 重新整合各模块结构，将次级功能作为大功能中的小功能，使模块结构更加清晰
2. 优化页面布局和交互设计描述，确保功能完整性和一致性
3. 增强知识问答模块的RAG向量数据库功能描述
4. 完善通用流程设计，确保系统流程的完整性	系统设计团队
V1.1	2026-04-01	1. 整合次级功能到主级功能描述中，使每个模块成为完整功能单元
2. 添加通用流程设计部分，包括用户注册/登录、文件上传、权限审批、系统配置、数据备份/恢复、系统监控/日志等流程
3. 在知识问答模块中添加RAG向量数据库功能
4. 更新功能级导航，使用更准确的功能名称	系统设计团队
V1.0	2026-04-01	初始版本	系统设计团队