从零到能用我只花了不到半天vue-bot-ui 聊天机器人界面搭建实录【免费下载链接】vue-bot-uiFor the one who is finding a customizable chatbot UI.项目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui上周五下午五点前端小周接到运营的加急需求官网要上一个聊天机器人界面最好明天就能演示给客户看。他第一反应是找现成的轮子于是遇到了 vue-bot-ui——一个专门为 Vue.js 项目准备的聊天机器人界面组件库。折腾到晚上七点他不仅把界面跑了起来连主题换肤、按钮选项、后端对话流程全部打通。这篇文章就把他的实践过程原样拆给你看你照着走一遍大概率比他还快。第一关动手之前先搞清楚它替你做了什么很多人一提到聊天界面就头大是因为要处理的琐碎细节太多右下角的悬浮按钮怎么摆、点开后的面板动画怎么过渡、消息气泡左右怎么对齐、输入框回车怎么拦截……vue-bot-ui 的思路很简单把这些全部做成现成零件。你只需要拿到一个组件传给它数据和配置它就把完整的界面长出来。组件基于 Vue 2 构建装起来是一条命令的事npm install vue-bot-ui # 或者用 yarn yarn add vue-bot-ui装完后别急着写业务先花两分钟把作者的示例看一遍。项目里的 src/App.vue 就是一份完整可运行的用法参考从初始化配置到消息收发都有比任何文档都直观。第二关三行代码让角落先冒出一个气泡先注册组件import { VueBotUI } from vue-bot-ui export default { components: { VueBotUI } }再把它放进模板VueBotUI :messagesmessageData :optionsbotOptions /这时候刷新页面右下角会出现一个圆形气泡按钮点一下带顶栏、消息区、输入框的完整聊天面板就弹出来了。到这里你其实什么都没写——注册、传 props界面已经活了。组件库的意义就在这把几周的活压缩成几行代码剩下的精力留给真正重要的业务。第三关传数据让对话真正滚动起来messages是一个数组每一项代表一条消息最少需要三个字段const messages [ { agent: bot, // 谁说的bot 是机器人user 是用户 type: text, // 消息类型text 或 button text: 你好有什么可以帮你 } ]agent决定气泡靠左还是靠右type决定渲染哪种气泡组件。目前内置两种普通文本气泡和带按钮选项的气泡。按钮型消息长这样{ agent: bot, type: button, text: 想先了解哪方面, options: [ { text: 查订单, value: order, action: postback }, { text: 去官网, value: https://example.com, action: url } ] }这里的action是精髓url会把按钮渲染成一个链接点击在新标签页打开postback则会把这个选项的value作为消息抛给你的逻辑层。这就是客服系统里最常见的快捷回复能力而且按钮自带选中态高亮交互细节不用你碰。第四关换个皮让它看起来像你家产品作者几乎把能想到的外观参数都做成了配置。想换颜色、换头像、换文案往botOptions里塞就行const botOptions { botTitle: 智能助手, // 面板顶部的机器人名字 colorScheme: #1890ff, // 气泡按钮和顶栏的主题色 botAvatarImg: require(./assets/bot.png), // 机器人头像 msgBubbleBgBot: #f6f6f6, // 机器人消息背景色 msgBubbleBgUser: #1890ff, // 用户消息背景色 inputPlaceholder: 请输入你的问题… }细心的话会发现颜色类配置几乎都是背景色 文字色成对出现msgBubbleBgBot配msgBubbleColorBotmsgBubbleBgUser配msgBubbleColorUser。按品牌色系成对替换基本就能融入现有产品了。连输入框被禁用时的底色和占位文字都有独立配置inputDisableBg、inputDisablePlaceholder细节控应该会很满意。实在找不到对应配置项也没关系组件的样式文件按模块拆在 src/assets/scss/ 里直接改样式是最后的兜底方案。第五关接后端让机器人真正开口说话界面是壳对话逻辑才是灵魂。vue-bot-ui 通过事件和你通信最核心的是msg-sendVueBotUI :messagesmessageData :bot-typingbotTyping :input-disableinputDisable initonInit msg-sendonMessage /methods: { onInit () { // 面板每次打开时触发适合在这里向机器人要开场白 this.botTyping true setTimeout(() { this.botTyping false this.messageData.push({ agent: bot, type: text, text: 您好我是智能客服请问有什么可以帮忙 }) }, 800) }, onMessage (value) { // 用户输入或点击 postback 按钮都会走到这里 this.messageData.push({ agent: user, type: text, text: value.text }) this.botTyping true // 把 value.text 发给你的机器人 API // 拿到回复后 push 一条 bot 消息然后置 this.botTyping false } }注意区分两件事输入框发出的消息是{ text }而点击 postback 按钮时组件会把整个选项对象原样抛给你方便你识别用户点了哪个分支。botTyping是正在输入的开关置为true时消息区会出现三个跳动的小点——AI 接口再快也有延迟给用户一个机器人在思考的反馈体验会好很多。另外作者还预留了三个全局控制事件botui-open、botui-close、botui-toggle。组件在document上监听它们你可以在页面任何位置触发来开关面板。比如导航栏放一个联系客服按钮和右下角的气泡按钮互不冲突。第六关打磨细节准备上线几个很实用的小开关逐个试一遍就懂:is-opentrue让面板在页面加载时自动弹出配合:open-delay800延迟 800 毫秒再弹避免一进来就糊用户一脸。:input-disabletrue禁用输入框。配合按钮型消息可以做出必须点按钮才能继续的引导式流程。:animationfalse关掉所有动画适合追求极简或对性能敏感的场景。插槽slot兜底sendButton能把发送图标换成文字actions能在输入框旁边塞表情或附件按钮header、botTyping也都能整个替换。还有个小技巧机器人回复的数据里可以带disableInput字段你在msg-send的处理函数里把它取出来赋值给input-disableprop就能做到按消息级别控制输入框——做多分支对话时这个能力非常有用。收尾小周的最后一条提交是晚上七点零六分。他以前从没写过聊天界面但那个下午他学会的其实就三件事装包、传数据、接事件。剩下的圆角、动画、气泡对齐、面板过渡全是 vue-bot-ui 替他干的。如果你手头正好有一个 Vue 2 项目等着上聊天机器人界面不妨照着小周的路线走一遍——前两关用不了半小时剩下的时间都留给你的业务逻辑吧。【免费下载链接】vue-bot-uiFor the one who is finding a customizable chatbot UI.项目地址: https://gitcode.com/gh_mirrors/vu/vue-bot-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考