---
url: https://www.lingpapl.cn/projects/lingpapl.md
description: 基于 Vue3、TypeScript、NestJS、LangChain、PostgreSQL 的 AI 英语学习平台项目复盘。
---

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

![LINGPAPL 项目截图占位](/images/project-placeholder.svg)

## 项目概览

* 项目类型：全栈 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 的采集字段和上报时机。