全栈 AI 对话应用完善方案

全栈 AI 对话应用完善方案现有架构分析后端 (master-nest-demo)NestJS Prisma MySQL (两个数据库: ai_multimodal_database, nest_database)已有 Chat 和 AiMultimodalChat 接口调用 Ollama 本地模型 (qwen3.5:9b)Prisma schema 有 Conversation/Message 模型 (AI库) 和 User 模型 (Nest库)无认证系统、无错误处理、Message 保存被注释掉、CORS 配置简陋所有控制器直接注册在 AppModule无模块化前端 (master-react-demo)Umi Max Redux Toolkit Ant Design ant-design/xChat 页面有基础布局 (Conversations Sender)但无消息展示user slice 仅有 setUser/clearUser无认证逻辑硬编码 API 地址无请求拦截器/token 管理无登录注册页面、无路由守卫Task 1: 后端 - 安装依赖包安装认证和验证相关依赖:pnpm add nestjs/jwt nestjs/passport passport passport-jwt bcryptjs class-validator class-transformer pnpm add -D types/passport-jwt types/bcryptjsTask 2: 后端 - 更新 Prisma Schema 并生成迁移schema-nest.prisma- 扩展 User 模型增加认证相关字段:model User { id Int id default(autoincrement()) uid String default(uuid()) unique email String? unique phone String? unique name String password String // 新增: 密码哈希 avatar String? // 新增: 头像URL role String default(user) // 新增: 角色 status Int default(1) // 新增: 状态 1-正常 0-禁用 createTime DateTime default(now()) updateTime DateTime updatedAt }schema.prisma- 改进 Conversation/Message 模型:model Conversation { id Int id default(autoincrement()) uuid String default(uuid()) unique userUid String title String? model String createdAt DateTime default(now()) updatedAt DateTime updatedAt messages Message[] } model Message { id Int id default(autoincrement()) conversationId Int conversation Conversation relation(fields: [conversationId], references: [id], onDelete: Cascade) role String // user / assistant / system content String createdAt DateTime default(now()) }运行pnpm update:nest和pnpm update:ai生成迁移。Task 3: 后端 - 创建 Auth 模块 (认证系统)文件结构:src/api/auth/ ├── auth.module.ts ├── auth.controller.ts ├── auth.service.ts ├── jwt.strategy.ts ├── jwt-auth.guard.ts └── dto/ ├── register.dto.ts └── login.dto.ts核心功能:POST /auth/register- 用户注册 (密码 bcrypt 哈希存储)POST /auth/login- 用户登录 (返回 JWT accessToken 用户信息)GET /auth/profile- 获取当前用户信息 (需 JWT 验证)JWT Strategy 基于 passport-jwt从 Authorization header 提取 tokenJwtAuthGuard 用于保护需要认证的路由auth.service.ts 关键逻辑:register: 校验邮箱/手机唯一性 → bcrypt.hash 加密 → 创建用户login: 查找用户 → bcrypt.compare 校验密码 → jwt.sign 生成 tokenvalidateUser: JWT 策略中调用通过 uid 查找用户Task 4: 后端 - 创建 User 模块文件结构:src/api/user/ ├── user.module.ts ├── user.controller.ts └── user.service.ts核心功能:GET /user/profile- 获取用户信息PUT /user/profile- 更新用户信息使用 nestPrisma (nest_database) 操作 User 表Task 5: 后端 - 重构 Chat 模块改进点:将 Chat 和 AiMultimodalChat 合并重构为统一的 Chat 模块添加 NestJS Module 封装实现完整的消息保存逻辑 (取消注释 Message 创建)添加错误处理 try-catch HttpException新增接口:POST /chat/send- 发送消息 (POST 替代 GET支持更长内容)GET /chat/conversations- 获取用户对话列表GET /chat/conversations/:uuid/messages- 获取对话消息历史POST /chat/conversations- 创建新对话DELETE /chat/conversations/:uuid- 删除对话chat.service.ts 改进:错误处理: 捕获 Ollama API 调用异常返回友好错误信息完整消息流: 用户消息 → 保存到DB → 调用AI → 保存AI回复 → 返回对话管理: 创建/获取/删除对话关联用户Task 6: 后端 - 修复 CORS 和全局配置main.ts 改进:app.enableCors({origin:[http://localhost:1113,http://localhost:3000],methods:GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS,credentials:true,});app.useGlobalPipes(newValidationPipe({transform:true,whitelist:true}));添加全局异常过滤器src/filters/http-exception.filter.ts:统一错误响应格式 { code, message, data }Task 7: 后端 - 更新 AppModule 整合所有模块将原来的扁平控制器注册改为模块化导入:imports:[ServeStaticModule.forRoot(...),AuthModule,UserModule,ChatModule,// 保留其他模块]删除直接注册的 controllers/providers。Task 8: 前端 - 创建认证相关服务和状态管理新建文件:src/services/auth.ts- 认证 API 调用 (login, register, getProfile)src/utils/request.ts- 基于 fetch 的请求封装 (自动添加 token、错误处理)src/store/user/index.ts- 更新 user slice (增加 token, isAuthenticated, loading 状态)src/store/user/asyncRequest.ts- 用户相关异步请求request.ts 核心逻辑:从 localStorage 读取 token请求头自动附带 Authorization: Bearer {token}401 响应自动跳转登录页统一错误处理Task 9: 前端 - 创建登录和注册页面新建文件:src/pages/Login/index.tsx- 登录页面src/pages/Register/index.tsx- 注册页面登录页面:Ant Design Form Input 组件支持邮箱/手机号 密码登录登录成功后存储 token 到 localStorage跳转 Chat 页面包含跳转到注册页面的链接注册页面:表单字段: 用户名、邮箱、手机号、密码、确认密码前端表单验证注册成功后自动登录或跳转登录页Task 10: 前端 - 更新路由和权限配置.umirc.ts 新增路由:routes:[{path:/login,component:./Login,layout:false},{path:/register,component:./Register,layout:false},{path:/,redirect:/chat},{path:/chat,component:./Chat},]access.ts 更新:canSeeAdmin 基于用户登录状态判断未登录用户重定向到登录页app.tsx 更新:getInitialState 中检查 localStorage token获取用户信息实现路由守卫逻辑Task 11: 前端 - 重构 Chat 页面Chat/index.tsx 改进:左侧对话列表: 点击切换对话显示对话标题新增/删除对话右侧消息区域: 展示用户和AI的对话气泡 (用 ant-design/x 的 Bubble 组件)底部输入框: 优化 Sender 组件支持 Enter 发送、ShiftEnter 换行加载状态: AI 回复时显示打字效果/loading 指示器错误提示: 网络错误、API 错误友好提示Chat 状态管理改进:chat slice 增加: currentConversation (当前选中对话), messages (当前对话消息列表)新增异步 action: fetchMessages (加载对话消息), createConversation, deleteConversationTask 12: 前端 - 优化 UI/UX使用 Ant Design 主题定制对话列表添加搜索/筛选消息气泡区分用户/AI样式空状态引导 (无对话时的欢迎界面)响应式布局适配Task 13: 更新 .env 配置后端 .env 新增:JWT_SECRETyour-secret-key-change-in-production JWT_EXPIRES_IN7d OLLAMA_BASE_URLhttp://localhost:11434前端 .env.local 新增:API_BASE_URLhttp://localhost:3000实施顺序后端依赖安装 → Schema 更新 → Auth 模块 → User 模块 → Chat 重构 → CORS/全局配置 → AppModule 整合前端请求封装 → 认证服务 → 登录/注册页面 → 路由权限 → Chat 重构 → UI 优化前后端联调测试