前端项目初始化提交

docs/前端项目分析报告.md

@@ -0,0 +1,485 @@
+# 前端项目全面分析报告
+
+**项目名称**: 制度文件管理学习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-*`）
+| 颜色 | 语义 |
+|------|------|
+| 蓝 | 信息 / 进行中 |
+| 绿 | 成功 / 已通过 |
+| 橙 | 警告 / 待处理 |
+| 红 | 错误 / 已拒绝 |
+| 紫 | 特殊标记 |
+| 青 | 补充信息 |
+
+#### 问题诊断
+1. **色彩过多**：6种渐变按钮 + 6种渐变卡片 + 6种标签 + 4种进度条 = 22+种色彩变体
+2. **品牌不一致**：主蓝色 `#1890ff` 与多处使用的紫蓝色 `#667eea→#764ba2` 冲突
+3. **白色利用不足**：白色仅用于卡片背景，未形成层级体系
+4. **可访问性风险**：部分渐变按钮文字对比度可能不满足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步（选知识库→选文件→选版本） |
+| 缺少响应式适配 | 🟡 中 | 未针对移动端/平板做适配 |