浙大儿院
62.44MB · 2025-11-20
我近期完成了一个兼具实用性与技术深度的多模态 AI 项目 ——智能汇 AI。这个项目整合了对话、写作、绘画三大核心能力，从技术选型到落地部署全程踩坑无数，也沉淀了一套完整的开发方法论。本文将从技术架构、核心功能实现、工程化实践三个维度，带你吃透全栈 AI 应用的开发逻辑。
在实际开发中，开发者和创作者往往面临「工具分散、效率低下、AI 能力割裂」的问题：学习编程需要查文档 + 问 AI，写文案要切换编辑器 + 设计工具，多模态能力集成更是涉及流式响应、跨端适配等技术难点。
智能汇 AI 的核心目标就是：用现代化全栈架构，封装复杂的 AI 能力，打造一个「开箱即用」的一站式工作台。既解决技术层面的「多模态集成、实时响应、性能优化」问题，也满足用户层面的「高效协作、功能闭环」需求。
| 技术栈 | 选型理由 | 核心作用 |
| Node.js + Express 5.1 | 轻量无侵入，中间件生态完善，适合快速迭代 AI 接口 | 构建 RESTful API，处理 AI 请求转发与响应 |
| Prisma ORM + MySQL | 类型安全特性适配 TypeScript，迁移工具简化数据库迭代 | 用户数据、会话记录、生成内容的持久化 |
| JWT 认证 | 无状态设计，适配分布式部署，减少数据库查询 | 用户身份校验与权限控制 |
| SSE 流式响应 | 相比 WebSocket 更轻量，无需双向通信，适配 AI 文本流式输出 | 实现 AI 回复「打字机效果」，降低前端等待感 |
| 技术栈 | 选型理由 | 核心作用 |
| Vue 3.5 + Composition API | 组合式 API 更适合复杂逻辑复用，响应式系统性能优于 Vue 2 | 构建组件化、高复用的前端界面 |
| Element Plus | 企业级组件库，支持按需引入，减少 UI 开发工作量 | 快速搭建一致的交互界面（表单、弹窗、导航等） |
| Pinia | 相比 Vuex 更简洁，原生支持 TypeScript，状态管理更清晰 | 管理全局状态（用户信息、会话列表、AI 模型配置） |
| Vite | 冷启动速度快，热更新高效，适配大型前端项目 | 提升开发效率，优化生产环境构建体积 |
| @tanstack/vue-virtual | 专为 Vue 3 优化，内存占用低，支持大数据量渲染 | 解决长对话列表卡顿问题 |
AI 对话的核心体验痛点是「等待感」和「格式错乱」—— 流式输出能解决等待问题，但逐段返回的文本容易导致 Markdown 代码块、表格被分割。我们的解决方案如下：
// 优化后的流式处理核心代码
class StreamParser {
constructor(modelType) {
this.buffer = '';
this.modelType = modelType;
this.inCodeBlock = false; // 标记是否处于代码块中
}
parse(chunk) {
this.buffer += chunk.toString('utf-8');
const results = [];
// 代码块处理逻辑：未结束则不分割
if (this.inCodeBlock) {
const codeEndIndex = this.buffer.indexOf('```');
if (codeEndIndex === -1) return results; // 代码块未结束，返回空
// 提取完整代码块
results.push(this.buffer.slice(0, codeEndIndex + 3));
this.buffer = this.buffer.slice(codeEndIndex + 3);
this.inCodeBlock = false;
}
// 分割完整行（非代码块状态）
const lines = this.buffer.split('n');
this.buffer = lines.pop() || ''; // 保留最后一行（可能不完整）
for (const line of lines) {
if (line.includes('```')) {
this.inCodeBlock = true;
}
// 区分思维链和最终答案（深度模型）
if (this.modelType === 'thinking' && line.startsWith('thinking:')) {
results.push({ type: 'thinking', content: line.slice(9) });
} else {
results.push({ type: 'answer', content: line });
}
}
return results;
}
}
传统 SQL 开发中，「字段名写错」「类型不匹配」是高频 bug。使用 Prisma 后，这些问题几乎消失：
// 用户模型
model User {
id String @id @default(uuid())
username String @unique
email String @unique
passwordHash String
sessions Session[] // 关联会话
notes Note[] // 关联笔记
createdAt DateTime @default(now())
}
// 会话模型（AI对话）
model Session {
id String @id @default(uuid())
title String
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
messages Message[] // 关联消息
modelType String // 模型类型：flash/thinking
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
长对话列表是 AI 应用的常见场景，传统渲染方式会导致 DOM 节点过多、内存占用飙升。我们的优化方案：
**编辑
// 前端触发AI润色功能
async function aiPolish(content) {
const loading = ElMessage.info('AI润色中...');
try {
// 发起SSE请求，携带当前笔记内容和操作类型（polish）
const stream = await fetchSSE('/api/note/ai-assist', {
method: 'POST',
body: JSON.stringify({
content,
type: 'polish' // 支持polish/summary/translate/continue
}),
headers: { 'Content-Type': 'application/json' }
});
// 流式接收AI生成的内容，实时插入编辑器
let result = '';
for await (const chunk of stream) {
result += chunk;
editor.setHtml(result); // 实时更新编辑器内容
restoreCursorPosition(); // 恢复光标位置
}
} catch (err) {
ElMessage.error('润色失败：' + err.message);
} finally {
loading.close();
}
}
**编辑
**编辑
编辑
// 成功响应
res.json({ code: 200, message: 'success', data: result });
// 错误响应
res.status(400).json({ code: 400, message: '参数错误', error: err.message });
流式响应 + 格式保护：解决 AI 对话实时性与完整性的核心矛盾
多模态能力无缝集成：文本、图像生成一站式实现，接口设计统一
工程化规范完善：从代码规范到部署流程，可直接复用为企业级项目模板
性能优化到位：虚拟滚动、懒加载等技术确保大规模数据下的流畅体验
TypeScript 全栈覆盖：类型安全提升开发效率，降低维护成本
这个项目的完整开发流程已整理成视频教程，包含：
感兴趣的朋友可以扫码查看详细教程和源码：
智能汇 AI 项目的核心价值，在于将复杂的多模态 AI 能力与现代化全栈技术结合，提供了一套「可复用、可扩展」的开发方案。从技术角度看，SSE 流式响应、Prisma 类型安全、虚拟滚动这三大技术亮点，解决了 AI 应用开发中的核心痛点；从工程化角度看，完整的开发流程、规范的代码结构、便捷的部署方案，让项目具备了实际落地价值。
对于开发者而言，这个项目不仅是一次技术实践，更是对 AI 时代开发模式的探索 —— 未来的应用开发，将更多是「AI 能力封装 + 用户体验优化」的结合。希望本文能为你提供一份清晰的开发指南，帮助你快速上手全栈 AI 应用开发！
