Leather Dress Collection 在智能客服场景的应用：基于Vue3的前端交互实现

Leather Dress Collection 在智能客服场景的应用基于Vue3的前端交互实现最近和几个做电商的朋友聊天他们都在头疼同一个问题客服成本越来越高尤其是像皮衣皮裙这类客单价高、咨询又特别细致的品类。用户问得细从皮质、尺码、保养到搭配问题五花八门人工客服压力巨大还容易因为回复不及时丢单。这不我们团队正好在探索用大模型来优化这类场景。我们尝试了Leather Dress Collection一个在时尚和商品描述上表现不错的模型把它接入了客服系统。后端负责处理智能问答前端则用Vue 3搭了个实时聊天界面。跑了一段时间效果挺让人惊喜的不仅响应速度快回答也相当专业用户满意度上来了客服同事也能腾出手来处理更复杂的问题。今天我就来聊聊我们是怎么做的重点放在Vue 3前端这一块的实现思路上。如果你也在考虑给业务加一个“AI客服助手”特别是对商品知识有要求的场景这篇内容或许能给你一些参考。1. 为什么选择Leather Dress Collection做智能客服在做技术选型的时候我们对比过好几个模型。最后盯上Leather Dress Collection主要是看中了它在特定领域的“专业素养”。普通的通用大模型聊天没问题但一涉及到具体商品比如用户问“这件绵羊皮夹克和山羊皮的在手感上有什么区别”、“亮面皮裙日常怎么打理不容易刮花”回答就容易流于表面或者干脆开始“编造”信息。Leather Dress Collection在这方面就扎实很多。它似乎“学习”过大量的时尚资料、商品详情页和用户评价对皮革种类像头层牛皮、羊羔皮、漆皮、工艺特点比如水洗做旧、铆钉装饰、保养方式忌暴晒、专用护理油这些细节掌握得比较到位。用它来回答用户关于皮衣皮裙的咨询准确性和可信度都高出一截。当然光有“专业知识”还不够客服场景还得“快”和“稳”。模型需要能快速理解用户问题中的关键信息比如款式编号、尺寸问题并给出流畅、清晰的回答。我们测试下来Leather Dress Collection在这方面的表现也符合预期生成速度稳定回答风格也偏实用、直接很适合客服场景。所以我们的技术方案就定下来了后端用Leather Dress Collection构建问答引擎通过API提供智能回复前端则要打造一个体验流畅的聊天界面让用户感觉就像在和真人客服对话一样。2. 前端技术栈与项目搭建前端这块我们选择了Vue 3 TypeScript Pinia的组合。Vue 3的Composition API写起来更灵活TypeScript能帮我们在开发阶段就卡住不少类型错误对于这种有复杂状态交互的项目来说非常合适。Pinia则是状态管理的不二之选比Vuex更简洁。首先我们初始化项目并安装核心依赖# 创建Vue3 TypeScript项目 npm create vuelatest leather-dress-chat-frontend # 按照提示选择TypeScript, Pinia等特性 # 进入项目并安装额外依赖 cd leather-dress-chat-frontend npm install # 安装UI组件库、HTTP客户端和图标库这里以Element Plus和Axios为例 npm install element-plus axios element-plus/icons-vue npm install --save-dev sass项目的基础结构大概长这样重点在src/views/ChatView.vue这个聊天主页面以及src/stores/chat.ts这个用于管理所有聊天状态消息列表、连接状态等的仓库src/ ├── assets/ ├── components/ │ ├── MessageBubble.vue # 消息气泡组件 │ └── TypingIndicator.vue # “对方正在输入”指示器 ├── stores/ │ └── chat.ts # Pinia Store管理聊天状态 ├── views/ │ └── ChatView.vue # 聊天主页面 ├── utils/ │ └── api.ts # 封装后端API请求 ├── App.vue └── main.ts在main.ts中我们需要全局引入UI组件库和状态管理// main.ts import { createApp } from vue import { createPinia } from pinia import ElementPlus from element-plus import element-plus/dist/index.css import * as ElementPlusIconsVue from element-plus/icons-vue import App from ./App.vue import router from ./router const app createApp(App) app.use(createPinia()) app.use(router) app.use(ElementPlus) // 注册所有图标组件 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.mount(#app)这样前端的基础架子就搭好了。接下来我们进入最核心的部分实现实时对话的界面与逻辑。3. 构建实时聊天界面与交互聊天界面的核心是让消息能一来一回地实时展示。我们设计了一个简单的双栏布局左侧是对话区域右侧可以展示当前咨询的商品信息比如皮衣的详情。首先我们在Pinia Store (stores/chat.ts) 里定义聊天所需的核心状态// stores/chat.ts import { defineStore } from pinia import { ref } from vue import type { ChatMessage } from /types/chat export const useChatStore defineStore(chat, () { // 消息列表 const messageList refChatMessage[]([ { id: 1, content: 您好欢迎咨询我们的皮革服饰系列请问有什么可以帮您, sender: bot, timestamp: new Date() } ]) // 当前用户输入 const userInput ref() // 是否正在等待AI回复用于显示“正在输入”指示器 const isAIThinking ref(false) // WebSocket连接实例用于流式响应 const socket refWebSocket | null(null) // 连接状态 const isConnected ref(false) // 添加消息的方法 const addMessage (msg: ChatMessage) { messageList.value.push(msg) // 简单模拟实际中这里会触发滚动到底部 } // 发送消息的方法核心 const sendMessage async () { const content userInput.value.trim() if (!content || isAIThinking.value) return // 1. 添加用户消息到列表 const userMsg: ChatMessage { id: Date.now(), content, sender: user, timestamp: new Date() } addMessage(userMsg) userInput.value // 清空输入框 // 2. 设置AI“正在思考”状态 isAIThinking.value true // 3. 调用API获取AI回复这里先展示HTTP方式下文会讲WebSocket try { const response await fetchAIResponse(content) const botMsg: ChatMessage { id: Date.now() 1, content: response.answer, sender: bot, timestamp: new Date() } addMessage(botMsg) } catch (error) { console.error(获取回复失败:, error) addMessage({ id: Date.now() 1, content: 抱歉我暂时无法回答这个问题。请稍后再试或联系人工客服。, sender: bot, timestamp: new Date() }) } finally { isAIThinking.value false } } // 模拟API调用函数 const fetchAIResponse async (query: string): Promise{ answer: string } { // 这里是模拟实际应调用你的后端API await new Promise(resolve setTimeout(resolve, 800)) // 模拟网络延迟 return { answer: 关于您提到的“${query}”我们的皮革服饰通常采用...这里是Leather Dress Collection生成的回复 } } return { messageList, userInput, isAIThinking, isConnected, sendMessage, addMessage } })有了状态管理聊天界面的Vue组件 (views/ChatView.vue) 就专注于展示和交互了!-- views/ChatView.vue -- template div classchat-container div classchat-main !-- 消息列表区域 -- div classmessage-area refmessageAreaRef MessageBubble v-formsg in chatStore.messageList :keymsg.id :messagemsg / !-- “对方正在输入”指示器 -- TypingIndicator v-ifchatStore.isAIThinking / /div !-- 输入区域 -- div classinput-area el-input v-modelchatStore.userInput typetextarea :rows2 placeholder请输入您关于皮革服饰的问题例如这件皮衣是什么皮质如何保养 keyup.enter.exacthandleSend / el-button typeprimary :loadingchatStore.isAIThinking clickhandleSend :iconPromotion 发送 /el-button /div /div !-- 右侧商品信息侧边栏可选 -- div classsidebar div classproduct-card h3当前咨询商品/h3 el-image :srccurrentProduct.image fitcover / pstrong款式/strong经典修身绵羊皮夹克/p pstrong皮质/strong精选绵羊皮/p pstrong特点/strong柔软细腻保暖性好/p !-- 更多商品信息 -- /div /div /div /template script setup langts import { onMounted, ref, nextTick } from vue import { useChatStore } from /stores/chat import MessageBubble from /components/MessageBubble.vue import TypingIndicator from /components/TypingIndicator.vue import { Promotion } from element-plus/icons-vue const chatStore useChatStore() const messageAreaRef refHTMLElement() // 发送消息处理 const handleSend () { if (!chatStore.userInput.trim()) return chatStore.sendMessage() // 发送后滚动到底部 nextTick(() { scrollToBottom() }) } // 滚动消息区域到底部 const scrollToBottom () { if (messageAreaRef.value) { messageAreaRef.value.scrollTop messageAreaRef.value.scrollHeight } } // 组件挂载时滚动到底部 onMounted(() { scrollToBottom() }) /script style scoped langscss .chat-container { display: flex; height: 80vh; max-width: 1200px; margin: 20px auto; border: 1px solid #e4e7ed; border-radius: 8px; overflow: hidden; } .chat-main { flex: 1; display: flex; flex-direction: column; } .message-area { flex: 1; padding: 20px; overflow-y: auto; background-color: #fafafa; } .input-area { display: flex; padding: 16px; border-top: 1px solid #e4e7ed; background: white; gap: 12px; .el-textarea { flex: 1; } } .sidebar { width: 280px; border-left: 1px solid #e4e7ed; padding: 20px; background: white; overflow-y: auto; } .product-card { h3 { margin-top: 0; color: #303133; } .el-image { width: 100%; height: 180px; border-radius: 4px; margin-bottom: 12px; } p { margin: 6px 0; font-size: 14px; color: #606266; } } /style这样一个基本的、能发送和接收消息的聊天界面就完成了。但静态的问答体验还不够好真正的智能客服需要那种“实时回复”的感觉这就需要用到流式响应。4. 实现流式响应与消息管理为了让用户看到AI是“一个字一个字”打出来的而不是长时间等待后突然出现一大段文字我们采用WebSocket来接收后端Leather Dress Collection模型的流式输出。我们在之前的Pinia Store里增强sendMessage方法并建立WebSocket连接// 在 stores/chat.ts 中新增和修改方法 export const useChatStore defineStore(chat, () { // ... 之前的状态定义 ... // 初始化WebSocket连接 const initWebSocket () { if (socket.value socket.value.readyState WebSocket.OPEN) { return } // 替换为你的后端WebSocket地址 const wsUrl ws://your-backend.com/ws/chat const ws new WebSocket(wsUrl) ws.onopen () { console.log(WebSocket连接成功) isConnected.value true } ws.onmessage (event) { // 处理后端推送的流式消息 const data JSON.parse(event.data) if (data.type chunk) { // 收到一个文本块追加到当前AI消息中 appendToLastBotMessage(data.content) } else if (data.type end) { // 消息结束停止“正在输入”状态 isAIThinking.value false finalizeLastBotMessage() } } ws.onerror (error) { console.error(WebSocket错误:, error) isConnected.value false } ws.onclose () { console.log(WebSocket连接关闭) isConnected.value false } socket.value ws } // 发送消息改用WebSocket const sendMessage async () { const content userInput.value.trim() if (!content || isAIThinking.value || !isConnected.value) { // 可以在这里尝试重连 if (!isConnected.value) initWebSocket() return } // 添加用户消息 const userMsg: ChatMessage { id: Date.now(), content, sender: user, timestamp: new Date() } addMessage(userMsg) userInput.value // 先添加一个空的AI消息占位用于后续流式追加内容 const botMsgId Date.now() 1 const botMsg: ChatMessage { id: botMsgId, content: , sender: bot, timestamp: new Date(), isStreaming: true // 标记为流式消息 } addMessage(botMsg) currentStreamingMessageId.value botMsgId // 记录当前正在流式接收的消息ID isAIThinking.value true // 通过WebSocket发送用户问题 if (socket.value?.readyState WebSocket.OPEN) { socket.value.send(JSON.stringify({ query: content })) } else { // 如果WebSocket未就绪回退到HTTP请求 fallbackToHTTP(content, botMsgId) } } // 流式消息追加 const appendToLastBotMessage (chunk: string) { const index messageList.value.findIndex(msg msg.id currentStreamingMessageId.value) if (index ! -1) { messageList.value[index].content chunk } } // 流式消息结束处理 const finalizeLastBotMessage () { const index messageList.value.findIndex(msg msg.id currentStreamingMessageId.value) if (index ! -1) { messageList.value[index].isStreaming false currentStreamingMessageId.value null } } // HTTP回退方案 const fallbackToHTTP async (query: string, botMsgId: number) { try { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ query }) }) const data await response.json() const index messageList.value.findIndex(msg msg.id botMsgId) if (index ! -1) { messageList.value[index].content data.answer messageList.value[index].isStreaming false } } catch (error) { console.error(HTTP请求失败:, error) const index messageList.value.findIndex(msg msg.id botMsgId) if (index ! -1) { messageList.value[index].content 网络似乎不太稳定请稍后再试。 messageList.value[index].isStreaming false } } finally { isAIThinking.value false currentStreamingMessageId.value null } } // 组件卸载时关闭连接 const closeConnection () { if (socket.value) { socket.value.close() socket.value null } } return { // ... 返回状态和方法 ... initWebSocket, closeConnection } })对应的我们需要稍微调整一下MessageBubble组件让它能优雅地展示流式消息!-- components/MessageBubble.vue -- template div :class[message, message-${message.sender}] div classavatar el-avatar :iconmessage.sender user ? User : Robot / /div div classbubble div classcontent !-- 如果是流式消息可以添加一个微妙的闪烁光标 -- {{ message.content }} span v-ifmessage.isStreaming classstreaming-cursor▌/span /div div classmeta span classtime{{ formatTime(message.timestamp) }}/span /div /div /div /template这样一来前端就能实时接收并逐字显示AI的回复了体验上会流畅很多。消息历史的管理比如保存到本地、分页加载也可以基于这个Store进一步扩展。5. 增强用户体验满意度评价与上下文管理一个完整的客服系统除了问答还需要收集反馈和维持对话上下文。我们在聊天界面里加入了两个实用功能。满意度评价每条AI回复后面我们添加了“有帮助”和“没帮助”的快速反馈按钮。这个数据对我们优化模型和了解用户需求非常关键。!-- 在MessageBubble组件中追加 -- div classfeedback v-ifmessage.sender bot !message.isStreaming span classfeedback-text回答有帮助吗/span el-button link typeprimary clickhandleFeedback(message.id, helpful) el-iconCircleCheck //el-icon 有帮助 /el-button el-button link typeinfo clickhandleFeedback(message.id, unhelpful) el-iconCircleClose //el-icon 没帮助 /el-button /div对话上下文管理Leather Dress Collection这类模型支持在请求时携带历史对话这样它就能理解之前聊过什么。我们在发送请求前会把最近几轮对话比如最近5条一起发给后端。// 在 stores/chat.ts 的发送函数中 const getRecentConversationContext (): Array{role: string, content: string} { const recentMessages messageList.value.slice(-10) // 取最近10条消息 return recentMessages.map(msg ({ role: msg.sender user ? user : assistant, content: msg.content })) } // 在发送WebSocket消息或HTTP请求时附加上下文 const context getRecentConversationContext() // 将 context 随 query 一起发送给后端此外像消息复制、对话导出、清空历史这类小功能也能显著提升用户体验用Element Plus的组件很容易就能实现。6. 总结把这个基于Leather Dress Collection和Vue 3的智能客服前端跑起来后最直观的感受就是响应变快了用户体验也更好了。流式响应让等待过程不再枯燥专业的商品回答也提升了信任感。前端这套组合Vue 3, TypeScript, Pinia在开发效率和代码维护性上表现都不错状态管理清晰组件复用也方便。当然实际应用中还会遇到更多细节问题比如网络不稳定时的重连机制、移动端的适配、更复杂的消息类型图片、商品卡片支持等。但核心的实时对话、流式接收、状态管理这套思路是通用的。如果你正在为你的电商平台或者需要专业咨询的业务寻找客服解决方案不妨考虑一下这个方向。从我们实践来看把专业领域的大模型能力通过一个体验良好的前端界面释放给用户确实能解决不少实际问题。你可以先从我们上面提到的核心功能开始尝试跑通一个最简单的原型然后再根据你的业务需求慢慢添加更多高级特性。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。