前端项目初始化提交

This commit is contained in:
2026-06-03 13:16:30 +08:00
commit 0910ba9cbe
163 changed files with 110032 additions and 0 deletions

View File

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