山东大学软件学院项目实训：基于大模型的模拟面试系统项目总结（八）

吴尤的开发进展

吴尤本周主要致力于优化和完善多个前端组件，提升用户界面的视觉反馈和交互体验 。

1. 文件类型图标多样化

• 问题描述：原系统中文件列表缺乏对不同文件类型的明确视觉区分 。
• 解决方案：通过getFileIcon函数，根据文件扩展名动态显示不同的Element UI图标。例如，音频文件使用耳机图标，PDF文件使用文档图标，Word文档使用特定文档图标等 。进一步增加了对视频、图片、压缩文件、代码文件等多种类型的图标适配，增强了文件类型的视觉识别度 。
• 技术点：JavaScript (split, toLowerCase, switch语句)，Element UI图标库，文件扩展名判断 。

2. 思考中状态指示器

• 问题描述：AI生成回复时，简单的加载动画无法提供明确的AI状态信息 。
• 解决方案：在AI消息加载时，若AI正在思考，则显示“思考中…”并配有蓝色旋转加载动画；若AI进入特定工具调用阶段（如mcp类型），则显示“工具调用中…” 。通过解析AI返回的thoughts字段中的actionType来判断是否为mcp调用，并设置相应状态 。
• 技术点：Vue.js条件渲染 (v-if)，CSS动画，AI消息体解析 。

3. 可折叠边栏实现

• 问题描述：需要优化屏幕空间利用，提升聊天区域的可视面积 。
• 解决方案：为边栏容器添加collapsed类，通过CSS的width属性和transition动画效果实现平滑的折叠与展开。使用JavaScript的toggleSidebar方法切换边栏的isSidebarCollapsed状态，并更新按钮图标 。
• 技术点：HTML结构调整，CSS (width, transition)，JavaScript事件处理，动态类绑定 。

4. 音频波形可视化

• 问题描述：增强录音功能的交互体验，提供实时的音频反馈 。
• 解决方案：使用Web Audio API (AudioContext, createAnalyser) 获取音频数据，通过requestAnimationFrame在Canvas上动态绘制从右向左推进的音频波形。计算音频数据的平均振幅，并将其添加到历史记录中，绘制垂直线条表示波形 。
• 技术点：Web Audio API (AudioContext, AnalyserNode, getByteTimeDomainData), HTML5 Canvas API (getContext, fillRect, beginPath, moveTo, lineTo, stroke), requestAnimationFrame, this.$nextTick 。

5. 骨架屏和过渡效果

• 问题描述：优化数据加载体验，避免用户等待时的空白或卡顿感 。
• 解决方案：在进行异步数据请求（如fetchValuationData）前显示骨架屏 (this.showSkeleton = true)，数据获取成功或失败后隐藏骨架屏 (this.showSkeleton = false)，并确保在$nextTick中更新数据和初始化图表，以保证DOM更新后再执行相关操作 。
• 技术点：Vue.js响应式数据 (showSkeleton)，异步请求 (axios)，this.$nextTick，错误处理 。

6. 其他组件Bug修复

• 问题描述：存在shift+enter按键冲突、换对话评估重置、删除界面重置、新建话题刷新缓存、录音缓存等bug 。
• 解决方案：针对上述问题进行了修复，完善了相关组件的功能完整性 。
• 技术点：具体问题具体分析，涉及事件处理、状态管理、缓存逻辑等 。

吴浩明的开发进展

吴浩明本周主要完成了题库系统后端功能的开发与优化，包括数据爬取、查询逻辑优化、缓存机制实现等 。

1. LeetCode题库数据爬取与优化

• 任务概述：丰富系统题库资源，优化查询效率 。
• 实现过程：
  • LeetCode题库数据爬取：完成了LeetCode平台4000+题目的数据爬取，包括题目描述、难度、标签等信息，并定义了ProblemDTO作为数据传输对象 。
  • 题库查询逻辑优化：重构了题库查询逻辑，支持按难度、分类等多维度精准查询，并引入PageHelper进行物理分页，避免一次性加载大量数据 。
• 技术点：数据爬取，Java数据对象 (DTO)，MyBatis，PageHelper分页插件，多条件查询 。

2. Redis缓存实现

• 任务概述：提高系统响应速度，减轻数据库压力 。
• 实现过程：
  • 缓存策略设计：设计了基于Redis的多级缓存机制，定义了多种缓存键前缀（如CACHE_PROBLEM_PREFIX, CACHE_PROBLEMS_ALL）和过期时间 。
  • 缓存查询与更新机制：实现了“先查缓存，缓存未命中再查数据库”的模式。例如，在selectProblemById和selectProblemsWithPagination方法中，先尝试从Redis获取数据，若未命中则查询数据库并将结果存入缓存 。
  • 缓存刷新机制：实现了refreshCache方法，用于在数据更新时主动删除相关缓存键，确保数据一致性 。
• 技术点：Redis，Spring Data Redis (redisTemplate), 缓存策略（Cache-Aside Pattern），缓存键设计，缓存过期与刷新 。

3. 分页查询优化

• 任务概述：优化前端加载体验，支持按需查询 。
• 实现过程：
  • 按需查询实现：开发了多个查询接口，如通用的getProblemList，支持按难度、分类等条件进行分页查询。在Service层调用优化后的分页查询方法，Controller层手动构建PageInfo对象并返回给前端 。
  • 分类查询接口：实现了专门的按分类查询接口 (getProblemsByCategory) 。
  • 难度查询接口：实现了专门的按难度查询接口 (getProblemsByDifficulty) 。
• 技术点：Spring Boot RESTful API (@GetMapping, @RequestParam, @PathVariable), PageInfo对象构建, 接口设计 。

4. 统计功能实现

• 任务概述：为用户提供刷题进度和难度分布等统计信息 。
• 实现过程：实现了getStatistics方法，从数据库查询题目统计数据（如各难度题目总数、已解决数、平均通过率），计算总体统计信息，并缓存结果到Redis 。
• 技术点：数据库聚合查询，数据处理，Redis缓存 。

5. 题目与面试官回调交互

• 任务概述：实现评测结果实时反馈给面试官的功能 。
• 实现过程：完成了题目评测结果与AI评测结果的回调交互机制，使得系统能将用户代码的评测结果和AI分析实时返回给面试官 。
• 技术点：系统间交互，回调机制 。

王博凡的开发进展

王博凡本周开发了“MCP动作记录系统”，用于记录AI在执行MCP相关操作时的行为，并向用户提供实时反馈，提升用户体验 。

1. MCP动作记录系统

• 问题描述：AI通过MCP工具修改或查询系统数据时，用户缺乏对这些后台行为的感知和反馈 。
• 解决方案：设计并实现了一个MCP动作记录系统。
  • 系统架构：包括前端（用户交互、轮询获取记录、UI更新）、后端（处理MCP操作、数据存入Redis、提供查询API）、Redis（临时存储MCP动作记录）、AI服务（调用外部API并触发记录存储）。
  • 后端实现：
    • MCP动作数据存储：AI服务（如调用DashScope后）获取信息后，将MCP动作数据（如action: "push", problemId等）以JSON格式存储到Redis中，键名包含chatId，并设置3分钟过期时间 。
    • MCP动作查询接口：后端提供/api/chat/getActions接口，前端通过chatId查询相关动作记录。查询后，从Redis中删除已获取的记录，避免重复处理 。
  • 前端实现：
    • AI聊天结束后的动作处理：当AI聊天结束（如轮询完成事件polling-completed触发后），调用方法查询MCP动作记录 。
    • 查询和处理MCP动作记录：前端通过axios请求后端API获取动作记录。根据返回的动作类型（如push、update_valuation），执行相应操作，如页面跳转 (this.$refs.chatArea.handleActionPush(actionObj.problemId)) 或更新评估数据 (handleValuationUpdate) 。
• 技术点：
  • 后端：Node.js (推测，根据server.tool语法和zod) / Java Spring (根据@GetMapping)，Redis (存储、过期)，REST API设计，JSON 。
  • 前端：Vue.js (推测，根据this.$emit, this.$refs, this.$message), axios异步请求，轮询机制，事件处理，条件逻辑判断 。

李一铭的开发进展

李一铭本周主要解决了Vditor编辑器图片上传后无法正常显示的问题，通过将图片上传至阿里云OSS进行存储和访问 。

1. Vditor编辑器图片上传功能优化

• 问题描述：Vditor编辑器上传图片后，返回的是后端相对路径，导致前端无法直接显示图片 。
• 解决方案：
  1. 定位问题API：通过浏览器开发者工具找到Vditor图片上传对应的后端API为/file/batch 。
  2. 分析原后端逻辑：UploadController.java中的batchFileUpload方法原逻辑为：接收MultipartFile[]，计算MD5去重，检查数据库中是否已存在相同MD5的文件，若无则保存到本地服务器，并将本地路径存入数据库的file_url和file_path字段 。
  3. 添加OSS上传方法：在OSSUpload.java中新增uploadFileToOSS(MultipartFile file, String folder)方法，该方法接收MultipartFile对象和目标文件夹路径，生成唯一文件名，将文件上传到阿里云OSS，并返回可公开访问的URL 。
  4. 修改batchFileUpload方法逻辑：
     • 在处理每个multipartFile时，保留MD5校验和数据库去重逻辑 。
     • 如果文件不存在或MD5不同，则调用新添加的ossUpload.uploadFileToOSS()方法将文件上传到OSS，获取返回的OSS URL 。
     • 将这个OSS URL存入数据库的file_url字段，同时本地服务器可能仍保存一份文件（savePath），或仅用于临时处理 。
     • 更新successMap，使其返回OSS URL给前端 。
• 技术点：Vditor编辑器，Spring Boot (@PostMapping, MultipartFile, @Transactional)，阿里云OSS SDK集成，Java IO (ByteArrayInputStream)，文件MD5计算 (DigestUtils)，数据库交互 (forestFileService)，配置文件读取 (Utils.getProperty) 。

孙旭的开发进展

孙旭本周致力于为AI面试官智能推荐算法题的功能准备结构化数据，目标是让AI能根据面试上下文和用户表现推荐合适的题目，而非随机选择 。

1. 为AI推荐算法题准备结构化数据

• 问题描述：AI面试官在出最后一道算法题时随机性较大，缺乏针对性。提示词工程效果不佳，需要通过微调提升AI出题的智能性和真实感 。
• 解决方案：
  1. 思路准备：设计能够反映“对话内容-题目推荐”关系的结构化文档。输入特征包括对话中提及的技术关键词、用户回答质量评估、用户对算法的熟悉程度；输出为题目代码。核心思路是维护一个考察向量，根据面试过程动态更新，最后匹配合适的题目 。
  2. 数据来源：初期尝试从Hugging Face、Kaggle、牛客网、LeetCode等公开数据源获取，但发现不适用或处理困难。最终决定基于项目自有数据库的题库（包含tags, difficulty等属性）创建结构化数据 。
  3. 创建结构化数据 (XLSX)：
     • 提取唯一标签：使用SQL查询 (SELECT DISTINCT jt.tag FROM oj_problem, JSON_TABLE(...)) 提取数据库中所有题目tags字段（JSON数组）中的唯一标签，作为XLSX文件的列标题（特征）。
     • 提取其他属性：使用SQL查询 (SELECT difficulty FROM oj_problem ORDER BY id ASC) 提取如difficulty等属性，并填充到XLSX相应列 。
     • 标签向量化处理 (One-Hot Encoding)：
       • 将每个题目的tags (如 ["递归", "链表"]) 导出为CSV 。
       • 在WPS/Excel中对导出的CSV进行预处理：去除特殊符号，按逗号分列 。
       • 编写Python脚本 (使用pandas库)：读取预处理后的标签数据和包含所有唯一标签作为列的XLSX模板。脚本遍历每个题目（每一行），根据其拥有的标签，在XLSX模板对应题目的行中，将相应标签列的值置为1，其余为0 。
  4. 数据应用方案：
     • 初始化一个与标签数量相同的“考察向量”，所有元素为1（表示都需要考察）。
     • 面试中讨论到某个知识点后，将考察向量中对应标签的元素置为0 。
     • 推荐题目时，计算考察向量与每个题目标签向量的点积，选择匹配度最高的题目 。
• 技术点：SQL（包括用于在MySQL中解析JSON数组的JSON_TABLE），CSV导出/导入，WPS/Excel用于数据预处理（删除符号、按列分割），Python（pandas库）用于自动化数据转换和创建结构化的XLSX文件（独热编码），AI微调概念，特征工程

总结

本周团队成员在各自的开发任务上均取得了重要进展：

1. 前端体验优化：吴尤通过多样化文件图标、增加AI思考状态指示器、实现可折叠边栏、音频波形可视化及骨架屏等，显著增强了系统的视觉反馈和交互流畅度 。
2. 后端性能与功能强化：吴浩明完成了大量题库数据的爬取与管理，通过优化查询逻辑、引入Redis多级缓存及完善分页查询，大幅提升了题库模块的性能和响应速度，并实现了统计与回调功能 。
3. AI交互反馈增强：王博凡开发的MCP动作记录系统，使得AI的后台操作能够被记录并反馈给用户，弥补了用户感知空白，提升了系统的透明度和用户体验 。
4. 核心功能完善：李一铭解决了Vditor编辑器图片上传至阿里云OSS的问题，确保了用户生成内容中图片的正确存储和显示 。
5. AI智能化提升准备：孙旭通过深入分析和巧妙的数据处理，成功为AI面试官的算法题推荐功能构建了关键的结构化数据集，为后续AI微调和智能化提升奠定了坚实基础 。