一、前言

在前几期开发中，项目已经完成了前端工程搭建、基础页面开发、简历上传分析、知识库问答、模拟面试等核心能力。本阶段的重点不再只是“页面能展示”，而是进一步围绕真实求职流程，完善面试训练链路，扩展更多高仿真场景。

本期主要完成了综合测评、代码评测、岗位浏览与简历匹配、面试中心整合等模块的前端开发与接口联调，使平台从单一的 AI 问答工具逐步升级为覆盖“测评、刷题、投递、面试、复盘”的完整求职训练系统。

二、本阶段开发目标

本阶段前端开发主要围绕以下目标展开：

• 完善面试前置能力：增加综合测评模块，模拟企业常见笔试与性格测评流程。
• 扩展技术训练能力：开发在线代码评测模块，支持算法题练习、运行、提交与 AI 错误分析。
• 增强求职场景闭环：新增岗位浏览、岗位收藏、简历岗位匹配功能，让简历分析结果能够真正服务投递决策。
• 整合面试入口：通过面试中心统一管理文字面试、语音面试、测评入口和最近面试记录，降低用户使用成本。
• 优化页面交互体验：完善加载状态、空状态、错误提示、历史记录恢复、按钮禁用等细节。

三、综合测评模块开发

1. 功能定位

综合测评模块用于模拟企业招聘中的前置测评环节，帮助用户提前适应校招、实习招聘中常见的测评形式。

目前系统支持四类题型：

1. 言语理解：考察文字阅读、信息提取与逻辑判断能力。
2. 资料分析：考察图表数据理解与计算能力。
3. 图形推理：考察空间想象与规律识别能力。
4. 性格测试：评估职业性格、抗压能力、团队协作、沟通表达等维度。

2. 前端页面流程

测评页面采用分阶段流程设计：

1. 选择测评类型：支持简短版与标准版。
2. 进入章节说明：每一类题型开始前给出章节提示。
3. 逐题答题：展示题目、选项、进度条与提交按钮。
4. 客观题解析：言语、资料、图形题提交后展示正确答案与解析。
5. 章节完成页：每完成一个部分后引导进入下一部分。
6. 报告生成页：全部完成后展示综合测评报告。

这种流程比一次性展示全部题目更接近真实测评体验，也能让用户清楚知道当前处于哪个环节。

3. 前端状态设计

测评页面内部使用阶段状态控制页面切换：

1. type-select：选择测评类型。
2. section-intro：章节介绍。
3. in-progress：答题中。
4. section-complete：章节完成。
5. loading：报告生成中。
6. report：报告展示。

通过这种状态机式的设计，页面逻辑更清晰，也方便后续扩展暂停、继续测评、历史报告查看等功能。

4. 测评记录与断点继续

为了提升可用性，前端支持从测评记录中继续未完成测评，也支持查看已完成测评报告。当用户进入历史记录时，系统会根据 sessionId 判断当前测评状态：若未完成，则恢复到上次答题位置。若已完成，则直接加载报告。这样即使用户中途退出，也不会丢失答题进度。

四、在线代码评测模块开发

1. 功能定位

代码评测模块面向算法笔试训练场景，目标是让用户在平台内完成从“看题、写代码、运行、提交、查看反馈”的完整流程。

该模块主要包括：

• 题目列表页
• 题目详情页
• 代码编辑器
• 示例用例运行
• 完整提交判题
• 提交历史记录
• LLM 错误分析

2. Monaco Editor 集成

前端代码编辑器采用 Monaco Editor，实现接近专业 IDE 的代码输入体验。

当前支持语言包括：

• Java
• C
• C++
• Python
• Go

每种语言都提供默认代码模板，用户切换语言后可以快速开始编写代码。同时，前端对用户代码做了本地缓存，避免刷新页面后代码丢失，提高刷题过程中的安全感。

3. 题目详情页布局

代码评测页面采用左右分栏结构：左侧展示题目描述、题解、提交记录、运行结果反馈。右侧展示代码编辑器与输出面板。页面支持左右拖拽调整宽度，也支持编辑器与输出区域上下拖拽调整高度。对于刷题场景来说，这种布局比普通表单页面更适合长时间使用。

4. 运行与提交交互

用户可以选择两种操作：

• 运行：只执行公开示例用例，方便调试。
• 提交：执行完整测试用例，返回最终判题结果。

判题结果根据状态进行区分展示：

1. ACCEPTED：绿色成功提示。
2. WRONG_ANSWER：展示错误用例、预期输出、实际输出。
3. TIMEOUT：提示执行超时。
4. ERROR：展示运行错误信息。

5. LLM 错误分析

当代码提交失败时，用户可以点击 LLM 评估按钮，让 AI 根据错误信息、失败用例和用户代码生成分析反馈。反馈内容包括：

• 错误原因说明
• 可能的问题代码位置
• 解题思路提示
• 后续练习建议

这让代码评测模块不只是一个传统 OJ，而是具备“讲解能力”的智能刷题助手。

五、岗位浏览与简历匹配模块开发

1. 功能定位

岗位浏览模块用于连接“简历分析”和“实际投递”场景。用户可以浏览招聘岗位，收藏感兴趣岗位，并选择自己的简历进行 AI 匹配度分析。

2. 页面布局

岗位页面采用左右分栏布局：左侧为岗位列表，包含搜索、公司筛选、地点筛选、收藏筛选和分页。右侧为岗位详情，展示岗位名称、公司、薪资、地点、岗位描述和原始链接。这种布局适合快速浏览大量岗位，同时保持详情信息稳定展示。

3. 收藏与筛选

用户可以收藏岗位，并通过“全部 / 已收藏”快速切换列表。收藏状态在列表和详情页同步更新，避免出现用户点击收藏后页面状态不一致的问题。

4. 简历匹配度检测

用户点击“简历匹配”后，可以选择历史简历，系统调用后端 AI 匹配接口，返回：

• 匹配度评分
• 岗位与简历匹配分析
• 简历修改建议

该功能让用户能够判断当前简历是否适合目标岗位，也能根据岗位要求反向优化简历内容。

六、面试中心整合

随着功能越来越多，如果入口分散，用户会很难理解平台的主流程。因此本阶段对面试入口进行了整合，新增面试中心页面。

面试中心目前支持：

• 选择面试方向，如 Java 后端、前端、算法、系统设计等
• 选择难度等级
• 选择题目数量或计划面试时长
• 可选绑定历史简历
• 支持自定义 JD，并由 AI 解析面试方向
• 展示最近面试记录
• 进入综合测评模块

通过面试中心，用户可以更自然地完成“选择方向 → 配置参数 → 开始训练 → 查看记录”的流程。

七、前端开发难点

1. 多模块状态管理复杂

本阶段页面普遍不是简单表单，而是多阶段、多状态页面。例如测评模块需要处理章节、题目、答案、解析、报告；代码评测模块需要处理题目、代码、运行结果、提交结果、历史记录。

解决方式是将页面状态拆分为明确的阶段，并尽量让每个阶段只负责当前 UI 展示。

2. 交互细节较多

代码评测页面涉及编辑器、拖拽、折叠、全屏、标签切换、本地缓存等交互；岗位页面涉及筛选、分页、收藏、弹窗、匹配结果展示。这些细节虽然不属于核心算法，但会直接影响用户体验。

3. 接口数据结构多样

不同模块的后端接口返回结构不同，前端需要为简历、测评、岗位、代码提交、面试记录等分别定义 TypeScript 类型，保证接口调用更安全，也方便后续维护。

八、本阶段完成成果

• 完成综合测评页面开发，支持四类题型、章节流程、报告展示与历史恢复。
• 完成代码评测核心页面，集成 Monaco Editor，支持多语言代码运行与提交。
• 完成 LLM 错误反馈展示，让代码评测具备智能讲解能力。
• 完成岗位浏览页面，支持搜索、筛选、收藏、分页与岗位详情展示。
• 完成简历岗位匹配弹窗，支持选择历史简历并生成匹配报告。
• 完成面试中心页面整合，统一文字面试、语音面试、测评和最近记录入口。
• 完善多个页面的加载状态、空状态、错误提示和按钮禁用逻辑。

九、下一阶段计划

• 继续完善语音面试体验，优化 WebSocket 连接、实时字幕、音频播放和会话恢复。
• 完善交叉面试与 HR 面试模块，让平台覆盖更完整的真实招聘流程。
• 优化报告展示页面，增强评分图表、建议分级、能力雷达图等可视化效果。
• 开展前后端联调测试，修复接口异常、页面状态错乱、移动端适配等问题。
• 准备项目部署与答辩材料，梳理项目亮点和演示流程。

十、总结

本阶段开发使平台从“基础 AI 面试工具”进一步扩展为“综合求职训练平台”。综合测评、代码评测、岗位匹配等模块的加入，让用户不仅可以练习面试问答，还可以完成笔试训练、性格测评、岗位筛选和简历优化。

作为前端开发者，本阶段最大的收获是对复杂业务页面的状态组织、交互设计和接口联调有了更完整的实践经验。前端不只是把数据展示出来，更重要的是把复杂流程整理成用户容易理解、愿意持续使用的产品体验。