如何用Vue3和UniApp全端开发Markdown公式支持的沉浸式AI问答助手？
摘要：打造沉浸式智能AI问答助手：Vue3 + UniApp 全端实战（支持 Markdown公式多模态交互） 在移动互联网时代，用户期待的不再是一个简单的关键词匹配机器人，而是一个能理解上下文、支持富文本展示、甚至能解答数
打造沉浸式智能AI问答助手：Vue3 + UniApp 全端实战（支持 Markdown/公式/多模态交互）
在移动互联网时代，用户期待的不再是一个简单的关键词匹配机器人，而是一个能理解上下文、支持富文本展示、甚至能解答数学难题的智能对话助手。
本文将基于真实的 Vue3 + UniApp 项目代码，深入剖析如何构建一个企业级智能问答 H5/小程序应用。我们将重点讲解会话状态管理、Markdown 与 LaTeX 公式渲染、多模式推荐算法以及附件预览下载等核心功能的实现细节。
🎯 系统核心亮点
本系统不仅是一个聊天界面，它解决的是复杂知识表达与流畅交互体验的痛点：
双模式智能应答：支持“模型优化模式”（直接回答）与“知识匹配模式”（推荐相关问题），灵活适配不同业务场景。
专业内容渲染：集成 markdown-it 与 katex，完美支持富文本、代码高亮及复杂的数学公式渲染。
会话生命周期管理：自动检测会话超时，支持本地缓存恢复断点续聊，确保用户体验不中断。
多模态交互：支持图文混排、附件在线预览/下载、一键复制、满意度评价（已解决/未解决）等丰富操作。
🏗️ 核心模块深度解析
1. 沉浸式对话流与状态机
对话列表采用经典的“左问右答”布局，通过时间轴串联整个会话过程。系统内置严谨的状态机，处理新建会话、追加提问、超时结束等逻辑。
💾 会话持久化与断点续聊
利用 uni.setStorageSync 缓存 sessionId，用户刷新页面或重新进入时，自动恢复上次会话上下文。
const CACHE_KEY = 'intelligent_qa_session_id';
const CACHE_EXPIRE_TIME = 60 * 60 * 1000; // 1 小时过期
// 从本地缓存获取 sessionId
const getSessionFromCache = (): number | null => {
try {
const cacheData = uni.getStorageSync(CACHE_KEY);
if (!cacheData) return null;
const parsed = JSON.parse(cacheData);
// 检查缓存是否过期
if (Date.now() - parsed.timestamp > CACHE_EXPIRE_TIME) {
uni.removeStorageSync(CACHE_KEY);
return null;
}
return parsed.sessionId;
} catch (error) {
return null;
}
};
// 发送消息时自动创建或复用会话
const handleSend = async () => {
if (data.sessionId) {
// 复用现有会话
await AddSessionQARecord({ question: data.message, sessionId: data.sessionId });
} else {
// 创建新会话
const res = await AddSessionInfo({ question: data.message });
data.sessionId = res.data.sessionId;
saveSessionToCache(res.data.sessionId); // 缓存 ID
// 启动定时器轮询会话状态（判断是否超时）
addSessionTimer = setInterval(findSessionDetailById, 30000);
}
await findSessionQARecordList(); // 刷新列表并滚动到底部
};
⏳ 超时自动结束
后端返回 endTime 后，前端停止轮询并显示“会话已结束”提示，禁止继续发送消息。