guxz/aue

Files

2026-06-03 13:16:30 +08:00

21 KiB

Raw Permalink Blame History

前端项目全面分析报告

项目名称: 制度文件管理学习AI智能体（前端Vue版本）
技术栈: Vue 3 + Vite + Ant Design Vue 4 + Axios
分析日期: 2026-05-13
项目路径: c:\Users\33520\Desktop\制度文件管理学习AI智能体 vue版本\

一、项目架构概览

1.1 技术栈详情

类别	技术	版本
框架	Vue 3 (Composition API / `<script setup>`)	^3.4.0
构建工具	Vite	^5.0.8
UI框架	Ant Design Vue	^4.1.0
路由	Vue Router	^4.2.5
HTTP客户端	Axios	^1.6.5
图标库	@ant-design/icons-vue	^7.0.1
工具库	@vueuse/core, lodash-es, dayjs	-
PDF渲染	pdfjs-dist, vue-pdf-embed	^4.8.69
文档解析	docx-preview, mammoth, xlsx, epubjs	-
代码高亮	highlight.js, marked	-

1.2 项目目录结构

src/
├── api/                    # API接口层 (6个文件)
│   ├── ai.js              # AI对话/智能助手 API
│   ├── auth.js            # 认证授权 API
│   ├── exam.js            # 考试题目 API
│   ├── file.js            # 文件管理 API
│   ├── question.js        # 题库管理 API
│   └── rag.js             # RAG检索 API
├── components/            # 组件层 (16个文件)
│   ├── LoginModule.vue    # 登录模块
│   ├── ReadModule.vue     # 文件阅读模块 (核心)
│   ├── ManageModule.vue   # 制度文件管理模块
│   ├── QAModule.vue       # 知识问答模块
│   ├── ExamModule.vue     # 考察训练模块
│   ├── MindModule.vue     # 纲要学习模块
│   ├── DashboardModule.vue # 综合看板模块
│   ├── PermissionModule.vue # 权限管理模块
│   ├── FileSelector.vue   # 文件选择器 (通用)
│   ├── UniversalFileReader.vue # 通用文件阅读器
│   ├── pdfReader/         # PDF阅读器子组件 (4个)
│   │   ├── AdvancedPDFReader.vue
│   │   ├── CommentPopup.vue
│   │   ├── PDFPage.vue
│   │   └── Toolbar.vue
│   └── ColorPicker.vue    # 颜色选择器
├── views/                 # 页面视图 (2个)
│   ├── Home.vue           # 主页 (模块容器)
│   └── ReaderPage.vue     # 阅读器页面 (15+格式)
├── router/                # 路由配置 (1个)
│   └── index.js
├── utils/                 # 工具函数 (4个)
│   ├── permission.js      # 权限管理
│   ├── eventBus.js        # 事件总线
│   ├── annotationUtils.js # 批注工具
│   └── mineruClient.js    # MinerU客户端
├── main.js                # 应用入口
├── App.vue                # 根组件
├── style.css              # 全局样式
└── index.css              # 基础样式

二、功能模块清单

2.1 模块总览

模块	路由标识	组件	文件大小	复杂度
登录认证	无路由	`LoginModule.vue`	中	低
文件查看学习	`read`	`ReadModule.vue`	超大	极高
制度文件管理	`manage`	`ManageModule.vue`	大	高
知识问答	`qa`	`QAModule.vue`	大	高
考察和训练	`exam`	`ExamModule.vue`	超大	极高
纲要学习	`mind`	`MindModule.vue`	中	中
综合看板	`dashboard`	`DashboardModule.vue`	中	中
权限管理	`permission`	`PermissionModule.vue`	大	高
文件阅读器	`/reader`	`ReaderPage.vue`	超大	极高

2.2 各模块子功能详细清单

模块1：登录认证 (`LoginModule.vue`)

用户名密码登录
"记住我"功能
"忘记密码"入口（UI占位）
登录后自动获取用户信息
Token存储到localStorage

模块2：文件查看学习 (`ReadModule.vue`)

文件列表：按部门筛选、搜索、分类导航（全部/政策/制度/规范/公告/其他）
文件审批：待审批文件列表、审批操作
文档阅读：
- 支持15+种文件格式（PDF/DOCX/XLSX/PPTX/TXT/MD/JSON/XML/CSV/HTML/EPUB/RTF/图片等）
- PDF：缩放、适应宽度/页面、页面跳转
- 图片：缩放、重置
- Excel：工作表切换
- 文本搜索（PDF/文本文件）
- 阅读进度追踪
- 跳转到ReaderPage进行深度阅读

模块3：制度文件管理 (`ManageModule.vue`)

版本管理：
- 按部门筛选文件
- 文件名搜索
- 版本历史查看（版本号、修改日期、变更内容、修改人）
- 文件下载
- 版本对比（diff视图）
OA同步：
- OA系统文件同步配置
- 同步状态监控
- 同步日志
知识库管理：
- 知识库列表
- 新建/编辑/删除知识库
- 知识库路径配置
- 向量库索引状态
考试题库管理：
- 题目列表（分页、搜索、筛选）
- 题目审核（通过/拒绝）
- 题目编辑/删除
- 批量导入/导出

模块4：知识问答 (`QAModule.vue`)

智能对话：
- 多会话管理（新建/切换/删除会话）
- 流式响应显示（打字机效果）
- 支持Markdown渲染
- 支持代码高亮
- 停止生成
- Shift+Enter换行
- 消息历史加载
知识库问答：
- 选择知识库范围
- 基于知识库的精准问答
自由问答：
- 基于AI大模型的通用问答

模块5：考察和训练 (`ExamModule.vue`)

AI出题：
- 选择知识库和文档
- 配置题型（单选/多选/判断/填空/简答）及数量
- 难度设置
- 异步生成 + 轮询状态
- 实时显示生成进度
- 生成结果预览
题库管理：
- 题目列表（分页）
- 按类型筛选（单选/多选/判断/填空/简答）
- 题目搜索
- 审核状态筛选
- 题目预览/编辑/删除
- 批量审核
智能组卷：
- 组卷配置（题型数量/难度/部门范围）
- 自动组卷
- 试卷预览
- 试卷管理列表
- 删除试卷
互动训练：
- 选择试卷开始训练
- 逐题作答
- 实时批改反馈
- 成绩统计
试卷考核：
- 正式考试模式
- 倒计时
- 提交批改
- 成绩报告

模块6：纲要学习 (`MindModule.vue`)

纲要生成：
- 选择知识库/文件
- AI自动生成思维导图
- 导图可视化展示
- 导图保存/导出
互动学习：
- 基于纲要的结构化学习
- 知识点展开/折叠
- 学习进度追踪

模块7：综合看板 (`DashboardModule.vue`)

数据概览：
- 文件总数/新增/更新统计
- 用户活跃度统计
- 题目统计（按类型）
- 部门维度统计
预警管理：
- 文件过期预警
- 制度更新提醒
- 合规性检查
决策支持：
- 制度执行分析
- 学习数据报告

模块8：权限管理 (`PermissionModule.vue`)

角色管理：
- 角色CRUD
- 角色权限分配
- 系统默认角色保护
权限配置：
- 模块级权限开关（read/manage/qa/exam/mind/dashboard/permission）
- 细粒度权限设置
用户管理：
- 用户列表
- 角色分配
- 用户状态管理
权限规则：
- 权限规则查看
- 规则配置
组织管理：
- 部门树管理
- 部门CRUD

三、路由与页面流转

3.1 路由配置

/ (Home)        → Home.vue        → 登录状态检查 → 各功能模块
/reader         → ReaderPage.vue  → 文件阅读器（query: id, title, extension）

3.2 用户操作流程图

用户访问系统
    │
    ├─ 未登录 → LoginModule.vue → 登录成功 → token存储localStorage
    │                                              │
    │                                              ↓
    └─ 已登录 → Home.vue ← 权限加载 ← initUserPermissions()
                    │
                    ├─ [read]    → ReadModule.vue ─→ 文件列表 → 文件审批 → ┐
                    │                                              ↓       │
                    │                                        ReaderPage.vue │
                    │                                        (15+格式阅读)  │
                    ├─ [manage]  → ManageModule.vue                        │
                    │              ├─ 版本管理 (版本历史/diff对比)          │
                    │              ├─ OA同步 (同步配置/状态监控)            │
                    │              ├─ 知识库 (新建/编辑/索引)               │
                    │              └─ 考试题库 (审核/编辑/导入导出)         │
                    │                                                       │
                    ├─ [qa]      → QAModule.vue                            │
                    │              ├─ 智能对话 (多会话/流式响应/Markdown)   │
                    │              ├─ 知识库问答                            │
                    │              └─ 自由问答                              │
                    │                                                       │
                    ├─ [exam]    → ExamModule.vue                          │
                    │              ├─ AI出题 (异步生成/轮询/预览)          │
                    │              ├─ 题库管理 (审核/搜索/编辑)             │
                    │              ├─ 智能组卷 (配置/自动组卷/预览)         │
                    │              ├─ 互动训练 (逐题作答/实时批改)          │
                    │              └─ 试卷考核 (倒计时/提交/成绩报告)       │
                    │                                                       │
                    ├─ [mind]    → MindModule.vue                          │
                    │              ├─ 纲要生成 (AI生成思维导图)             │
                    │              └─ 互动学习 (结构化学习)                 │
                    │                                                       │
                    ├─ [dashboard] → DashboardModule.vue                   │
                    │              ├─ 数据概览 (统计卡片/图表)              │
                    │              ├─ 预警管理 (过期/更新提醒)              │
                    │              └─ 决策支持 (分析报告)                   │
                    │                                                       │
                    └─ [permission] → PermissionModule.vue                 │
                                   ├─ 角色管理 (CRUD/权限分配)              │
                                   ├─ 权限配置 (模块级/细粒度)              │
                                   ├─ 用户管理 (列表/角色分配)              │
                                   ├─ 权限规则                              │
                                   └─ 组织管理 (部门树/CRUD)                │

四、API接口映射关系表

4.1 API文件与后端Controller对应关系

前端API文件	后端Controller	基础路径	主要功能
`api/auth.js`	`AuthController`	`/api/auth`	登录、用户信息、Token刷新
`api/file.js`	`FileController`	`/api/file`	文件CRUD、预览、状态查询、版本管理
`api/exam.js`	`ExamController`	`/exam`	题目生成、批改、组卷
`api/question.js`	`QuestionController`	`/api/question`	题目CRUD、审核、分页查询
`api/ai.js`	-	`/api/ai`	AI对话、流式响应
`api/rag.js`	-	`/api/rag`	RAG检索、知识库操作

4.2 核心接口明细

认证模块 (auth.js)

接口	方法	路径	参数	说明
login	POST	`/api/auth/login`	username, password	用户登录
getUserInfo	GET	`/api/auth/user/info`	-	获取用户信息
refreshToken	POST	`/api/auth/refresh`	refreshToken	刷新Token

文件管理 (file.js)

接口	方法	路径	参数	说明
getFileList	GET	`/api/file/list`	deptId, keyword, page	文件列表
getFileInfo	GET	`/api/file/info/{id}`	id	文件详情+状态
previewFile	GET	`/api/file/preview/{id}`	id	文件预览（Blob）
uploadFile	POST	`/api/file/upload`	FormData	文件上传
getVersions	GET	`/api/file/versions/{id}`	id	版本历史
getDiff	GET	`/api/file/diff/{id}`	id, v1, v2	版本对比
approveFile	POST	`/api/file/approve/{id}`	id, status	文件审批

考试模块 (exam.js)

接口	方法	路径	参数	说明
generateQuestions	POST	`/exam/generate`	题型配置、知识库、文件路径	异步生成题目
gradeAnswers	POST	`/exam/grade`	答案列表	批改答案
generatePaper	POST	`/exam/paper/generate`	组卷配置	智能组卷
startExam	POST	`/exam/paper/{id}/start`	paperId	开始考试
getExamResult	GET	`/exam/record/{id}/result`	recordId	考试结果
getRecords	GET	`/exam/records`	type	考试记录

题目管理 (question.js)

接口	方法	路径	参数	说明
getQuestionPage	GET	`/api/question/page`	type, status, keyword, page	分页查询题目
getQuestionById	GET	`/api/question/{id}`	id	题目详情
updateQuestion	PUT	`/api/question/{id}`	题目数据	编辑题目
deleteQuestion	DELETE	`/api/question/{id}`	id	删除题目
approveQuestion	POST	`/api/question/{id}/approve`	id, status	审核题目
batchApprove	POST	`/api/question/batch-approve`	ids, status	批量审核

AI对话 (ai.js)

接口	方法	路径	参数	说明
chat	POST	`/api/ai/chat`	message, sessionId	AI对话（流式）
getSessions	GET	`/api/ai/sessions`	-	会话列表
deleteSession	DELETE	`/api/ai/sessions/{id}`	id	删除会话

RAG检索 (rag.js)

接口	方法	路径	参数	说明
search	POST	`/api/rag/search`	query, collection	知识库检索
getCollections	GET	`/api/rag/collections`	-	知识库列表

权限管理

接口	方法	路径	参数	说明
getRoleList	GET	`/api/role/list`	-	角色列表
getPermissionList	GET	`/api/permission/list`	-	权限列表
getUserList	GET	`/api/user/list`	-	用户列表
assignRole	POST	`/api/user/assign-role`	userId, roleId	分配角色
getDeptList	GET	`/api/dept/list`	-	部门列表

五、页面设计规范分析

5.1 布局结构

┌──────────────────────────────────────────────┐
│  Header (60px)                               │
│  [Logo] [模块选择下拉框]    [角色] [用户名▼] │
├──────────────────────────────────────────────┤
│                                              │
│  内容区域 (flex: 1, 全宽)                    │
│  ┌────────────────────────────────────────┐  │
│  │  main-tabs-bar (子模块标签栏)           │  │
│  ├────────────────────────────────────────┤  │
│  │  exam-header (标题+描述)                │  │
│  ├────────────────────────────────────────┤  │
│  │  stats-row (统计卡片)                   │  │
│  ├────────────────────────────────────────┤  │
│  │  exam-card (主内容卡片)                 │  │
│  │  ┌──────────────────────────────────┐  │  │
│  │  │  card-header / card-title        │  │  │
│  │  ├──────────────────────────────────┤  │  │
│  │  │  表单/列表/表格 内容区域          │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
│                                              │
└──────────────────────────────────────────────┘

5.2 通用组件复用模式

复用模式	出现位置	说明
`main-tabs-bar`	ReadModule, ManageModule, ExamModule, MindModule, DashboardModule, PermissionModule	子模块标签栏（顶部水平导航按钮）
`exam-header`	所有模块	页面标题+描述区域
`exam-card`	所有模块	圆角卡片容器（12px圆角、阴影、边框）
`stats-row` → `stat-card`	ExamModule, MindModule, DashboardModule	统计数字卡片（图标/数值/标签）
`card-title`	ManageModule, QAModule	卡片内标题
FileSelector	ExamModule, MindModule	文件选择弹窗

5.3 当前色彩体系分析

主色调

用途	色值	位置
主蓝色（渐变）	`#1890ff → #096dd9`	Header, 主按钮, 菜单选中项
辅助紫蓝（渐变）	`#667eea → #764ba2`	多处按钮, 统计卡片, 幻灯片头部
背景灰	`#f5f7fa`	页面背景
卡片白	`#ffffff`	卡片/面板背景
黑色文字	`#1a1a2e`	标题文字
正文灰色	`#333/#595959`	正文/描述

辅助色（渐变按钮样式类 `btn-gradient-*`）

类名	渐变色值
`btn-gradient-primary`	`#667eea → #764ba2` (紫蓝)
`btn-gradient-success`	`#11998e → #38ef7d` (绿)
`btn-gradient-warning`	`#f093fb → #f5576c` (粉红)
`btn-gradient-info`	`#4facfe → #00f2fe` (青蓝)
`btn-gradient-orange`	`#fa709a → #fee140` (橙黄)
`btn-gradient-purple`	`#a18cd1 → #fbc2eb` (紫粉)

标签色（`.tag-` 和 `.progress-`）

颜色	语义
蓝	信息 / 进行中
绿	成功 / 已通过
橙	警告 / 待处理
红	错误 / 已拒绝
紫	特殊标记
青	补充信息

问题诊断

色彩过多：6种渐变按钮 + 6种渐变卡片 + 6种标签 + 4种进度条 = 22+种色彩变体
品牌不一致：主蓝色 #1890ff 与多处使用的紫蓝色 #667eea→#764ba2 冲突
白色利用不足：白色仅用于卡片背景，未形成层级体系
可访问性风险：部分渐变按钮文字对比度可能不满足WCAG标准

5.4 组件尺寸规范现状

组件	当前尺寸	问题
Header	height: 64px (antd默认)	占用垂直空间较大
`main-tabs-bar` 按钮	padding: 14px 20px	按钮过大
`exam-header`	未标准化	各模块高度不一
`stat-card`	未标准化	各模块尺寸不统一
`exam-card`	padding: 24px	内边距较大
表格行高	antd默认 ~57px	信息密度低
表单间距	antd默认 24px	垂直间距大
文件卡片 `file-card`	~200px × 160px	占用面积大

5.5 交互模式分析

交互模式	使用情况	评价
下拉选择模块切换	Home.vue `<a-select>`	不符合主流导航习惯，应为标签/侧边栏
子模块标签栏	各模块 `main-tabs-bar`	统一但有碎片化感
表格分页	antd默认分页	标准可用
模态弹窗	antd Modal	标准可用
文件选择器	自定义 FileSelector	三步流程复杂
轮询状态	ExamModule	实现正确但用户体验可优化
流式响应	QAModule	实现良好

六、当前架构问题总结

6.1 结构性问题

问题	严重程度	说明
单文件组件过大	🔴 高	ExamModule、ReadModule 等文件超过2000行，难以维护
色彩体系混乱	🔴 高	22+种色彩变体，缺乏统一品牌色
组件碎片化	🟡 中	各模块重复实现相似的UI结构
信息密度低	🟡 中	组件间距大，屏幕利用率不高
CSS重复	🟡 中	多处渐变样式重复定义
导航体验差	🟡 中	下拉选择模块的方式不符合主流习惯

6.2 功能性问题

问题	严重程度	说明
权限加载时序问题	🔴 高	模块显示依赖异步权限加载结果
错误处理不一致	🟡 中	各组件错误处理方式不同
文件选择器步骤过多	🟡 中	选择文档需3步（选知识库→选文件→选版本）
缺少响应式适配	🟡 中	未针对移动端/平板做适配

21 KiB Raw Permalink Blame History Unescape Escape