基于现代前端技术栈构建的 AI 学习助手，支持 ChatGPT 式对话交互、用户认证和聊天记录持久化。
- 🤖 AI 智能对话 — 基于 DeepSeek 大语言模型的多轮对话，支持 Markdown 渲染
- 👤 用户认证系统 — 注册 / 登录 / JWT 身份认证
- 💾 聊天记录持久化 — 会话自动保存，重新登录后数据不丢失
- 📂 多会话管理 — 新建、切换、删除历史会话
- 🎨 现代化 UI — Tailwind CSS 响应式设计，支持移动端
- 📝 Markdown 渲染 — AI 回复支持代码高亮、表格、列表等富文本
- React 19 — 用户界面构建库
- Vite 8 — 极速前端构建工具
- TypeScript 6 — 类型安全的 JavaScript 超集
- Tailwind CSS 3 — 实用优先的原子化 CSS 框架
- React Router 7 — 客户端路由管理
- react-markdown + remark-gfm — Markdown 渲染
- Express 5 — 轻量级 Node.js Web 框架
- Prisma 5 — 现代化 Node.js ORM
- SQLite — 嵌入式关系型数据库（开发环境）
- JWT (jsonwebtoken) — 无状态身份认证
- bcryptjs — 密码哈希加密
- DeepSeek API — 大语言模型对话接口
- Node.js >= 18
- npm >= 9
git clone <repository-url>
cd ai-learning-assistant# 前端依赖
npm install
# 后端依赖
cd server && npm install && cd ..# 复制示例配置
cp .env.example .env
# 编辑 .env 文件.env 文件内容：
# DeepSeek API Key（必填）
# 前往 https://platform.deepseek.com/api_keys 创建
DEEPSEEK_API_KEY=sk-your-api-key-here
# JWT 签名密钥（可选，生产环境必须设置）
JWT_SECRET=your-jwt-secret-here
⚠️ .env已加入.gitignore，不会被提交到 Git。绝对不要在代码中硬编码 API Key。
cd server
npx prisma migrate dev
cd ..# 方式 1：分别启动（两个终端）
# 终端 1 — 后端
cd server && npm start
# 终端 2 — 前端
npm run dev
# 方式 2：同时启动
npm run dev:all前端访问 http://localhost:5173，后端运行在 http://localhost:3001。
npm run build构建产物输出到 dist/ 目录。
ai-learning-assistant/
├── public/ # 静态资源
├── server/ # 后端服务（Express 5）
│ ├── prisma/
│ │ ├── schema.prisma # 数据库 Schema（users/conversations/messages）
│ │ └── migrations/ # 数据库迁移文件
│ ├── routes/
│ │ ├── auth.js # /api/auth/register, /api/auth/login
│ │ ├── chat.js # /api/chat（需认证）
│ │ └── conversations.js # /api/conversations CRUD（需认证）
│ ├── utils/
│ │ ├── prisma.js # Prisma Client 单例
│ │ └── auth.js # JWT 生成 & 认证中间件
│ ├── index.js # 服务入口
│ ├── package.json # 后端依赖
│ └── .gitignore # 忽略 node_modules / .env / dev.db
├── src/ # 前端源代码
│ ├── components/
│ │ ├── chat/
│ │ │ ├── Sidebar.tsx # 会话列表侧边栏
│ │ │ ├── ChatArea.tsx # 消息展示区域
│ │ │ ├── ChatInput.tsx # 消息输入框
│ │ │ └── MessageBubble.tsx # 消息气泡（Markdown 渲染）
│ │ ├── Header.tsx # 导航栏（含用户状态）
│ │ ├── HeroSection.tsx # 首页英雄区
│ │ ├── FeatureCard.tsx # 功能卡片
│ │ └── Footer.tsx # 页脚
│ ├── contexts/
│ │ └── AuthContext.tsx # 认证上下文（JWT 管理）
│ ├── pages/
│ │ ├── HomePage.tsx # 首页
│ │ ├── ChatPage.tsx # 聊天页面
│ │ ├── LoginPage.tsx # 登录页面
│ │ └── RegisterPage.tsx # 注册页面
│ ├── types/
│ │ └── chat.ts # TypeScript 类型定义
│ ├── utils/
│ │ ├── api.ts # API 封装（含认证 header）
│ │ └── mockReply.ts # 模拟回复（已废弃）
│ ├── App.tsx # 根组件（路由配置）
│ ├── main.tsx # 应用入口
│ └── index.css # Tailwind CSS 入口
├── .env.example # 环境变量模板
├── .gitignore # Git 忽略规则
├── index.html # HTML 入口
├── package.json # 前端依赖与脚本
├── tsconfig.json # TypeScript 配置
├── tailwind.config.js # Tailwind CSS 配置
├── postcss.config.js # PostCSS 配置
├── vite.config.ts # Vite 构建配置（含 API 代理）
└── README.md # 项目说明
| 方法 | 路径 | 认证 | 说明 |
|---|---|---|---|
| POST | /api/auth/register |
否 | 用户注册 |
| POST | /api/auth/login |
否 | 用户登录 |
| POST | /api/chat |
是 | 发送消息，自动保存 |
| GET | /api/conversations |
是 | 获取会话列表 |
| GET | /api/conversations/:id/messages |
是 | 获取会话消息 |
| DELETE | /api/conversations/:id |
是 | 删除会话 |
浏览器 (localhost:5173)
│
│ /api/* (Vite Proxy)
▼
Express 后端 (server/ :3001)
│
├── JWT 认证中间件
├── Prisma ORM → SQLite (dev.db)
│
│ Bearer Token (DEEPSEEK_API_KEY)
▼
DeepSeek API (api.deepseek.com)
- 前端通过 Vite 代理将
/api/*请求转发到 Express 后端 - 后端负责认证、数据库操作、安全调用 DeepSeek API
- API Key 和 JWT Secret 只存在于服务端环境变量，前端不可见
- 密码使用 bcrypt (10 rounds) 哈希存储，永不存储明文
| 命令 | 说明 |
|---|---|
npm run dev |
启动 Vite 前端开发服务器 |
npm run dev:server |
启动 Express 后端服务 |
npm run dev:all |
同时启动前端 + 后端 |
npm run build |
TypeScript 类型检查 + Vite 生产构建 |
npm run lint |
运行 oxlint 代码检查 |
npm run preview |
预览已构建的生产版本 |
cd server && npm start |
启动后端（生产模式） |
cd server && npx prisma migrate dev |
执行数据库迁移 |
- AI 对话交互界面（DeepSeek API）
- 用户认证与登录（JWT + bcrypt）
- 聊天记录持久化（SQLite + Prisma）
- 多会话管理（新建 / 切换 / 删除）
- 学习内容推荐
- 学习进度追踪
- 知识库管理
- 学习数据分析面板
- PostgreSQL 数据库升级（生产环境）
- OAuth 第三方登录（GitHub / Google）
- 所有
.ts/.tsx文件包含中文注释说明文件用途和关键逻辑 - 使用 TypeScript 严格模式（
strict: true） - 组件使用函数式组件 + Hooks 模式
- 样式优先使用 Tailwind CSS 工具类