最近在做一个电商项目需要集成客服功能。传统的客服系统用起来总感觉差点意思用户问个问题要么等半天要么机器人答非所问推荐的问题也经常是“牛头不对马嘴”。琢磨了一下决定用 Vue 3 从头搭建一个更“聪明”的对话框并且把 AI 辅助生成推荐问题的能力也整合进去。折腾完感觉收获不小把整个过程和踩过的坑记录一下。1. 背景与痛点为什么需要更智能的客服对话框以前项目里用的客服模块大多是现成的 SaaS 服务或者比较简单的开源组件普遍存在几个让人头疼的问题响应延迟与交互生硬很多是基于轮询Polling或者简单的长连接消息一来一回有明显的延迟感对话不流畅。对话框本身的 UI 交互也比较生硬弹出/关闭、消息滚动体验不佳。推荐问题“鸡同鸭讲”这是最核心的痛点。很多系统推荐的问题是静态配置的或者基于非常简单的关键词匹配。比如用户刚问完“我的订单什么时候发货”系统可能还在推荐“如何注册账号”这种完全不相关的问题用户体验很差。状态管理混乱对话历史、用户输入状态、客服连接状态、推荐问题列表……这些状态如果散落在各个组件里维护起来简直是噩梦尤其是需要持久化或跨组件同步时。扩展性差当想加入“正在输入”提示、消息撤回、富媒体消息图片/文件或者与后端 AI 服务深度集成时原有的架构往往牵一发而动全身。所以这次的目标很明确构建一个响应快、推荐准、状态清晰且易于扩展的智能客服对话组件。2. 技术选型Vue 3 WebSocket AI 服务为什么是它们面对这些痛点技术选型上主要考虑了以下几个方案纯前端静态方案所有逻辑和推荐问题写死在前端。优点是简单、快但完全无法解决“智能推荐”和“实时对话”的核心需求首先被排除。传统 Ajax 轮询这是老方案了延迟高、服务器压力大不适合实时性要求高的对话场景。Vue 3 WebSocket NLP API这是我们最终选择的方案。Vue 3 (Composition API)提供了更灵活、逻辑内聚的代码组织方式特别适合封装复杂的对话框逻辑如消息处理、推荐算法。响应式系统与 TypeScript 结合完美类型提示和代码可维护性大大提升。WebSocket实现真正的全双工实时通信消息即发即收配合心跳包和断线重连机制可以打造非常流畅的对话体验。NLP (自然语言处理) API这是实现“智能”的关键。我们不需要自己从头训练模型而是集成成熟的云服务如国内各大云厂商提供的 NLP 能力或开源模型 API对用户当前对话内容进行语义分析从而动态生成最相关的推荐问题。这个组合既能保证前端体验的流畅和可维护性又能通过后端 AI 能力赋予系统真正的“智能”。3. 核心实现拆解整个实现可以分为三大部分对话框 UI、状态管理和智能推荐。3.1 使用 Vue 3 Teleport 构建模态对话框对话框需要渲染在 body 根部避免父组件样式影响。Vue 3 的Teleport组件是为此而生的。!-- SmartChatDialog.vue -- template Teleport tobody div v-ifmodelValue classchat-dialog-overlay click.selfhandleClose div classchat-dialog-container !-- 对话框头部 -- div classdialog-header h3智能客服/h3 button clickhandleClose×/button /div !-- 消息列表区域 -- div classmessage-list refmessageListRef div v-formsg in messageList :keymsg.id :class[message-item, message-${msg.type}] {{ msg.content }} /div !-- 骨架屏在加载推荐问题时显示 -- div v-ifrecommendLoading classrecommend-skeleton div classskeleton-line/div div classskeleton-line/div /div /div !-- 推荐问题区域 -- div classrecommend-questions v-ifrecommendQuestions.length 0 div classrecommend-title猜你想问/div div classquestion-tags span v-for(q, idx) in recommendQuestions :keyidx classquestion-tag clicksendQuestion(q) {{ q }} /span /div /div !-- 输入区域 -- div classinput-area input v-modeluserInput keyup.entersendMessage placeholder请输入您的问题... / button clicksendMessage发送/button /div /div /div /Teleport /template script setup langts import { ref, watch, nextTick } from vue; // 假设我们使用 Pinia 来管理状态 import { useChatStore } from /stores/chat; interface Message { id: string; content: string; type: user | bot; timestamp: number; } const props defineProps{ modelValue: boolean; // 控制对话框显示隐藏 }(); const emit defineEmits{ update:modelValue: [value: boolean]; }(); const chatStore useChatStore(); const messageListRef refHTMLElement(); const userInput ref(); const recommendLoading ref(false); // 从 store 中获取状态 const { messageList, recommendQuestions } storeToRefs(chatStore); const handleClose () { emit(update:modelValue, false); }; const sendMessage async () { const content userInput.value.trim(); if (!content) return; // 1. 将用户消息添加到列表 chatStore.addUserMessage(content); userInput.value ; // 2. 滚动到底部 scrollToBottom(); // 3. 触发获取AI回复和推荐问题的逻辑 recommendLoading.value true; await chatStore.fetchBotResponse(content); recommendLoading.value false; scrollToBottom(); }; // 点击推荐问题直接发送 const sendQuestion (question: string) { userInput.value question; sendMessage(); }; // 保持消息列表滚动到底部 const scrollToBottom () { nextTick(() { if (messageListRef.value) { messageListRef.value.scrollTop messageListRef.value.scrollHeight; } }); }; // 监听对话框打开可以在这里初始化历史记录 watch(() props.modelValue, (newVal) { if (newVal) { chatStore.loadHistory(); nextTick(scrollToBottom); } }); /script3.2 基于 Pinia 管理对话状态机所有与对话相关的状态和逻辑都集中到 Pinia Store 中保持组件轻薄。// stores/chat.ts import { defineStore } from pinia; import { ref, computed } from vue; import { chatWebSocket } from /utils/websocket; import { fetchRecommendations } from /api/nlp; import { encrypt, decrypt } from /utils/crypto; export const useChatStore defineStore(chat, () { // 状态 const messageList refMessage[]([]); const connectionStatus refconnecting | connected | disconnected(connecting); const recommendQuestions refstring[]([]); // Getter const lastUserMessage computed(() { const msgs messageList.value; for (let i msgs.length - 1; i 0; i--) { if (msgs[i].type user) return msgs[i].content; } return ; }); // Actions const addUserMessage (content: string) { const msg: Message { id: user_${Date.now()}, content, type: user, timestamp: Date.now(), }; messageList.value.push(msg); // 消息持久化到本地存储加密 saveHistoryToLocal(); }; const addBotMessage (content: string) { const msg: Message { id: bot_${Date.now()}, content, type: bot, timestamp: Date.now(), }; messageList.value.push(msg); saveHistoryToLocal(); }; const fetchBotResponse async (userMessage: string) { // 1. 通过 WebSocket 发送消息给后端获取客服回复 chatWebSocket.send(JSON.stringify({ type: user_message, content: userMessage })); // 注意实际回复是通过 WebSocket onmessage 事件监听调用 addBotMessage 添加。 // 这里假设一个异步函数模拟等待回复。 // 2. 同时基于用户最后一条消息获取AI推荐问题 await updateRecommendQuestions(userMessage); }; const updateRecommendQuestions async (context: string) { try { // 调用 NLP API传入当前对话上下文 const response await fetchRecommendations(context); // 假设 API 返回 { questions: string[] } recommendQuestions.value response.questions.slice(0, 5); // 只取前5个 } catch (error) { console.error(获取推荐问题失败:, error); recommendQuestions.value []; // 失败时清空推荐 } }; // 本地历史记录加密存储 const saveHistoryToLocal () { const data encrypt(JSON.stringify(messageList.value)); localStorage.setItem(chat_history, data); }; const loadHistory () { const data localStorage.getItem(chat_history); if (data) { try { messageList.value JSON.parse(decrypt(data)); } catch (e) { console.error(读取历史记录失败:, e); messageList.value []; } } }; // WebSocket 事件监听通常在应用初始化时调用 const initWebSocket () { chatWebSocket.onmessage (event) { const data JSON.parse(event.data); if (data.type bot_message) { addBotMessage(data.content); } // 可以处理其他类型如连接状态更新 }; chatWebSocket.onopen () (connectionStatus.value connected); chatWebSocket.onclose () (connectionStatus.value disconnected); }; return { messageList, connectionStatus, recommendQuestions, lastUserMessage, addUserMessage, addBotMessage, fetchBotResponse, updateRecommendQuestions, loadHistory, initWebSocket, }; });3.3 推荐问题算法设计前端辅助处理虽然核心的语义理解交给后端 AI API但前端也可以做一些轻量级的预处理或备选方案比如在 AI 服务不可用时使用基于文本相似度的简易算法。// utils/recommendation.ts /** * 简易前端推荐算法TF-IDF余弦相似度思路简化版 * 用于在无AI服务时降级使用或对AI结果进行二次过滤。 * param userInput 用户当前输入 * param questionPool 问题池从后端获取或本地配置 * param topK 返回前几个推荐 */ export function getSimpleRecommendations( userInput: string, questionPool: string[], topK: number 3 ): string[] { // 1. 中文分词这里用简单按字拆分生产环境应用成熟分词库如 jieba-js const tokenize (text: string): string[] { // 移除标点按字符分割简易处理 return text.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, ).split(/\s/).filter(Boolean); }; const inputTokens tokenize(userInput); // 2. 计算每个问题的相似度得分 const scores questionPool.map((question) { const questionTokens tokenize(question); // 计算 Jaccard 相似度简易版替代余弦相似度 const union new Set([...inputTokens, ...questionTokens]); const intersection new Set(inputTokens.filter((t) questionTokens.includes(t))); return intersection.size / union.size; }); // 3. 获取得分最高的 topK 个问题的索引 const indexedScores scores.map((score, index) ({ score, index })); indexedScores.sort((a, b) b.score - a.score); const topIndices indexedScores.slice(0, topK).map((item) item.index); // 4. 返回对应的问题 return topIndices.map((idx) questionPool[idx]).filter((q) q); } // 在 Store 的 updateRecommendQuestions 中可以作为降级方案 // if (aiServiceAvailable) { call AI API } else { recommendQuestions.value getSimpleRecommendations(context, localQuestionPool); }4. 生产环境下的重要考量功能实现后要上线还需要考虑很多工程化问题。4.1 对话历史本地存储加密方案聊天记录可能包含敏感信息。直接存localStorage是明文的不安全。方案使用crypto-js或 Web Crypto API 进行对称加密如 AES。密钥管理密钥可以由后端在用户登录后下发并存储在内存中或安全的sessionStorage避免硬编码在前端代码里。代码示例简化版import CryptoJS from crypto-js; const SECRET_KEY import.meta.env.VITE_CHAT_SECRET_KEY; // 从环境变量获取应由后端动态提供 export function encrypt(text: string): string { return CryptoJS.AES.encrypt(text, SECRET_KEY).toString(); } export function decrypt(cipherText: string): string { const bytes CryptoJS.AES.decrypt(cipherText, SECRET_KEY); return bytes.toString(CryptoJS.enc.Utf8); }4.2 API 调用限流策略推荐问题的 AI API 通常是按次收费或有 QPS 限制的需要防止用户快速输入导致频繁调用。方案在触发推荐问题更新的地方如fetchBotResponse中调用updateRecommendQuestions前加入防抖Debounce或节流Throttle。选择对于推荐问题更适合用防抖即在用户停止输入一段时间如 500ms后再去调用 API避免中间过程的无意义调用。import { debounce } from lodash-es; // 在 Store 中 const updateRecommendQuestionsDebounced debounce(async (context: string) { // ... 原有的 API 调用逻辑 }, 500); // 在 fetchBotResponse 中调用 await updateRecommendQuestionsDebounced(userMessage);4.3 移动端适配注意事项视口与布局使用viewportmeta 标签对话框宽度使用max-width: 100%和vw单位高度使用vh单位确保在不同屏幕下显示正常。输入法遮挡在移动端聚焦输入框时键盘弹起可能会遮挡对话框。可以通过监听resize事件或VisualViewportAPI动态调整对话框位置或滚动消息列表。触摸反馈为推荐问题的标签question-tag添加:active样式或使用轻量级触觉反馈库提升触摸体验。5. 避坑指南与优化点实际开发中遇到了不少坑这里总结几个关键的。5.1 Vue 响应式数据在 WebSocket 场景下的优化WebSocket 消息是异步、高频的。如果直接将大量消息对象推入messageList这个响应式数组可能会导致不必要的全量渲染在消息快速滚动时卡顿。优化使用shallowRef或markRaw如果消息对象本身结构稳定内部属性不需要响应式可以用shallowRef包裹数组或者给每个消息对象用markRaw标记。虚拟列表如果对话历史可能非常长比如支持查看多天记录需要实现虚拟列表只渲染可视区域的消息。可以使用vue-virtual-scroller等库。分批更新不要每条消息都立即触发更新和滚动。可以设置一个微任务队列将短时间内的多条消息合并为一次更新。5.2 中文分词的特殊处理在前端做简易文本相似度计算时分词是关键一步。英文有天然的空格分隔中文则需要专门处理。不要自己造轮子用简单的按字拆分split()效果很差因为中文词汇有语义。例如“苹果手机”按字拆会失去“苹果”和“手机”这两个词元。推荐方案使用轻量级的前端中文分词库比如jieba-js结巴分词的 JavaScript 移植版。它可以在浏览器中运行提供基本的分词功能。注意包体积这类库可能不小如果只是备用方案可以考虑异步动态加载import()或者让后端分词后返回词元数组。5.3 异步加载的骨架屏实现在等待 AI 推荐问题返回时如果直接隐藏推荐区域界面会跳动。显示一个骨架屏能提升体验。实现如前面组件代码所示在recommendLoading为true时渲染一个带有 CSS 动画的骨架屏占位符。CSS 关键点.skeleton-line { height: 20px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 8px; } keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }6. 总结与思考通过 Vue 3 的组合式 API 和 Pinia我们构建了一个结构清晰、状态管理完善的智能客服对话框。利用 WebSocket 保证了实时性集成 AI NLP 服务实现了真正有意义的推荐问题。过程中从 UI 渲染优化、数据安全到性能限流都做了相应的考虑。最后抛出一个值得持续思考的问题我们如何科学地评估这个“智能”推荐算法的准确率仅仅靠线上用户的点击率CTR够吗是否需要在后台建立一套标注和 A/B 测试系统对比不同算法策略如纯关键词匹配 vs. 语义理解下推荐问题被用户采纳后最终解决用户问题的成功率这对于持续优化客服系统的“智商”至关重要。这次实践让我深刻体会到前端不仅仅是画界面当需要处理复杂的实时数据流、状态逻辑并与 AI 能力结合时一个良好的架构设计是多么重要。希望这篇笔记对你有帮助。