LINGPAPL 英语学习与 AI 智能对话平台

项目概览

• 项目类型：全栈 AI 英语学习平台
• 核心方向：AI 对话、学习记录、支付闭环、前端监控、工程化部署
• 负责角色：全栈开发
• 当前状态：内容可继续按真实项目细节补充

项目背景

LINGPAPL 是一个基于 Monorepo 架构的全栈英语学习平台，集成 DeepSeek 实现智能化学习体验，支持多场景对话、深度思考、单词练习、支付和学习记录等功能。

技术栈

• 前端：Vue 3、TypeScript、Element Plus、SSE
• 后端：NestJS、Socket.io、PostgreSQL
• AI：LangChain、LangGraph、ReAct Agent、DeepSeek
• 工程化：Monorepo、pnpm workspace、GitHub Actions、前端监控 SDK

我的职责

• 搭建 AI 对话模块，支持多角色对话、会话隔离和流式响应。
• 使用 LangGraph 实现对话状态持久化，降低上下文遗忘对学习体验的影响。
• 封装前端 SSE 请求，优化 AI 回答的首屏响应和持续输出体验。
• 集成支付宝 SDK 和异步回调，通过 Socket 通知前端支付结果。
• 设计前端监控 SDK，覆盖 JS 错误、白屏和性能指标。
• 配置 CI/CD 自动化构建与发布流程。

核心功能

• AI 智能对话：支持多轮对话、角色上下文和流式输出。
• 学习记录：沉淀用户练习过程和学习状态。
• 支付闭环：覆盖下单、支付回调和前端状态同步。
• 前端监控：采集运行时错误、资源异常和性能指标。

技术亮点

AI 对话链路

通过 LangChain 搭建 ReAct Agent，将用户输入、工具调用、模型输出和上下文状态组织成清晰链路。前端使用 SSE 流式接收模型回答，让用户不用等待完整响应结束。

支付闭环

后端接收支付宝异步回调后，校验订单状态并通过 Socket 通知对应会话的前端页面，实现支付成功后的实时 UI 更新。

前端监控

监控 SDK 覆盖运行时错误、资源加载错误、白屏检测和性能指标采集，帮助定位线上异常。

难点与解决方案

难点	解决方案
AI 长对话上下文容易丢失	使用 LangGraph 维护会话状态和关键上下文
流式响应需要稳定更新 UI	使用 @microsoft/fetch-event-source 管理 SSE 生命周期
支付回调和前端状态不同步	后端回调确认后通过 Socket 精准通知前端
前后端类型和依赖分散	使用 Monorepo 管理共享类型与构建流程

项目截图

后续替换为真实页面截图，建议包含首页、AI 对话页、学习记录页和支付结果页。

面试可讲点

• 为什么 AI 对话选择 SSE，而不是普通 HTTP 请求。
• ReAct Agent 的核心流程是什么，工具调用如何组织。
• 支付异步回调如何保证订单状态可信。
• 前端监控 SDK 如何设计采集、上报和定位链路。
• Monorepo 对全栈项目的依赖管理有什么收益。

后续优化

• 补充真实页面截图和关键链路流程图。
• 将 AI 对话链路拆成更清晰的架构图。
• 补充监控 SDK 的采集字段和上报时机。