# 制度文件管理学习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 | 初始版本 | 系统设计团队 |