山东大学软件学院创新实训项目博客_04

本周我们的英语故事生成学习平台继续推进，围绕提升用户的学习体验，完成了两个关键方向的开发工作：

1. 新增了英文翻译功能，让用户可以更方便地理解生成内容；

2. 实现了首页多功能模块切换，使整个应用的可扩展性和交互体验更上一层楼。

以下是详细内容汇报👇

---

1. 新增翻译功能：提升故事理解力

针对用户在阅读英语故事时可能遇到的语言障碍，我们开发并上线了一个一键翻译功能，支持将 AI 生成的英文故事实时翻译成中文。

功能亮点：

• 自动翻译故事内容：点击按钮即可将整个英语故事翻译为中文。

• 使用大模型翻译 API：翻译结果语言自然，贴近上下文。

• 支持切换显示：用户可以在原文和译文之间自由切换，更加灵活。

这项功能极大降低了用户理解故事的门槛，尤其对初中级英语学习者非常友好。

---

 2. 实现首页模块切换：支持多功能入口

随着项目功能的不断扩展，仅靠单一页面已经不能满足我们的需求。因此，本周我们设计并实现了一个主页导航模块，用于在不同功能间灵活切换。

目前主页包含的主要功能入口有：

• 故事生成：输入关键词自动生成英文故事

• 翻译学习：展示中英文对照版本

• 思考过程：展示 AI 构思过程

• 历史记录：查看过去生成过的故事

技术实现：

• 使用 Vue Router 管理路由跳转

• 使用组件化设计，将每个功能区封装成独立模块

• 首页采用按钮或卡片式入口，清晰展示各项功能

这个主页模块的引入不仅提升了整体用户体验，也为未来拓展更多学习功能（如：词汇测验、语音练习等）打下了良好基础。

---

 技术细节补充

• 翻译功能目前支持使用大语言模型（如 OpenAI 或 DeepSeek）实现语义级翻译；

• 页面切换逻辑使用了动态 <router-view> + Vue 的条件渲染，保证页面加载效率；

• 每个模块都有独立状态管理（通过 Pinia 实现），避免状态污染。

---

 下周计划预告

接下来，我们将聚焦以下几个方向：

• 进一步完善翻译模块，加入逐句高亮功能

• 设计“我的生词本”，结合故事内容提取难词

• 开始语音评分模块 MVP 的开发，初步实现用户跟读打分

• 对主页进行样式美化，提升整体视觉体验

---

 总结

本周的开发工作不仅完善了学习体验中的关键环节——“理解故事”，也通过模块化设计，为未来功能迭代建立了清晰的框架。相信随着功能逐步推进，这个平台将会成为真正帮助用户“看得懂、读得出、记得住”的英语学习助手。