山东大学软件学院项目实训进展记录8

一、本周工作概述

本周进入前端主导联调阶段，核心目标是：把所有后端真实数据完整接入前端页面、保证全链路数据一致性、完成页面加载与交互性能优化，满足页面加载≤2 秒、数据 100% 匹配、交互流畅的验收标准。我聚焦三大块：亮点分析全量落地、错误高亮最终优化、个性化学习页面完整闭环，同时配合前端负责人完成整体页面性能优化，从 “功能可用” 推进到 “体验达标”。本周不再只关注接口连通，而是深度打磨细节，确保用户操作流畅、数据呈现精准、异常处理友好。

二、核心工作进展

1. 亮点分析：完整落地，细节打磨

本周完成亮点模块全量功能上线，覆盖原文标注、详情弹窗、词云可视化，同时修复联调遗留的小瑕疵，实现从 “能用” 到 “好用” 的升级。

（1）亮点弹窗交互优化

之前亮点详情仅静态展示，本周新增hover 预览 + 点击弹窗交互，用户鼠标悬停高亮文本时显示简要赏析，点击后弹出完整说明，兼顾简洁与详细。核心交互逻辑：

function bindHighlightEvents(span: HTMLSpanElement, highlight: Highlight) { // 悬停预览 span.addEventListener("mouseenter", () => { tooltip.value = `${highlight.type}：${highlight.explanation.slice(0, 50)}...`; showTooltip.value = true; }); span.addEventListener("mouseleave", () => { showTooltip.value = false; }); // 点击弹窗 span.addEventListener("click", () => { currentHighlight.value = highlight; showHighlightModal.value = true; }); }

这段逻辑实现了轻量预览 + 深度查看的分层交互，避免信息过载，提升用户阅读效率。

（2）词云可视化接入

完成WordCloudSvg.vue与真实亮点数据对接，自动提取高频高级词汇生成词云，数据从assessmentStore.highlights动态获取，随评估结果实时更新。词云样式简洁，突出词汇优先级，直观展示作文亮点分布。

2. 错误高亮：最终优化，解决重叠与边界问题

本周重点攻克高亮重叠、特殊字符错位、移动端适配三大遗留问题，完成错误高亮模块最终验收，确保所有场景渲染精准、样式清晰。

（1）重叠优先级完善

联调时偶发同一位置同时存在错误 + 亮点，本周明确错误优先、亮点后置规则，重叠时仅显示错误高亮，点击后可切换查看亮点，避免视觉混乱。核心样式优先级：

.highlight--error { z-index: 2; } /* 错误层级更高 */ .highlight--highlight { z-index: 1; } /* 亮点层级更低 */

（2）特殊字符适配

修复换行、引号、破折号等特殊字符导致的偏移错位，优化字符校正逻辑，覆盖更多边界场景，确保 100% 文本位置精准匹配后端评估结果。

3. 个性化学习页面：全闭环，体验优化

本周完成ProfilePage、NotebookPage所有功能闭环，补充历史数据联动、交互细节打磨，同时优化页面加载速度，满足≤2 秒的要求。

（1）错题本交互优化

完善错题筛选、详情切换、标记复习的流畅度，新增筛选结果为空提示、加载动画、操作反馈，避免用户困惑。关键状态提示逻辑：

const showNotebookFilterEmpty = computed(() => notebookStore.hasFetched && !notebookStore.errorMessage && !filteredItems.value.length );

筛选无结果时友好提示，提升用户体验。

（2）个人画像数据联动

完成历史评估记录与画像数据联动，平均分趋势图、错误分布随历史数据实时更新，无数据时显示友好占位，保证页面完整性。

（3）页面性能优化

配合前端负责人完成懒加载、组件按需引入，精简冗余代码，ProfilePage、NotebookPage 加载时间均控制在 2 秒内，符合任务书指标。

4. 全链路回归测试

本周完成登录→提交作文→多 Agent 评估→结果展示→错题沉淀→个性化学习全流程测试，覆盖文本、OCR 图片两种提交方式，验证所有模块数据一致性、功能稳定性，无数据错乱、功能异常问题。

三、核心优化与问题解决

1. 页面加载慢

问题：初期页面加载超 2 秒，组件、数据请求集中阻塞。

解决：组件懒加载、路由分包、数据请求异步化，拆分首屏与非首屏组件，首屏优先渲染，非首屏延迟加载，最终加载≤2 秒。

2. 数据更新延迟

问题：历史数据、错题更新后，页面渲染滞后。

解决：优化 Pinia 状态响应式，依赖数据用 computed 自动监听，数据变更实时渲染，无需手动刷新。

四、本周感悟

功能能跑只是基础，流畅的交互、精准的渲染、友好的提示，才是用户真正需要的。之前只关注功能实现，本周打磨 hover、点击、空提示、适配等细节，才明白前端不仅是 “做页面”，更是 “做体验”。同时，联调阶段的严谨性至关重要，一个小的渲染偏差、数据延迟，都可能影响用户对系统的信任。本周反复回归测试、边界验证，深刻理解 “精准、稳定、友好” 对学习类产品的重要性。