vue2-component-demo
v1.0.0
Published
A reusable Vue 2 component demo
Readme
SeatAssistantBox 组件
一、组件简介
SeatAssistantBox 是一个悬浮式的坐席助手面板,集成了以下主要功能:
- 实时语音转文字:通过
AudioTransWord子组件展示实时转写文本。 - 模型思考:点击下方机器人图标可展开/收起 AI 思考过程。
- 智能问答(ChatGPT):左侧 iframe 嵌入智能问答页面,可与大模型交互。
- 右侧功能区:支持要素识别、流程引导、知识推荐(基于 AI 推荐知识库)。
二、安装与引入
- 在项目中安装依赖(已集成 Axios/Fetch、Element-UI)
- 在父组件中引入并注册:
<template> <div> <SeatAssistantBox :callId="currentCallId" :ssrList="transcriptList" :flowData="flowGuideData" :eleIdentList="elementList" @handleAddEleIdents="onAddIdentifiedElements" /> </div> </template> <script> import SeatAssistantBox from '@/components/seat_assistant_box.vue/index.vue'; export default { components: { SeatAssistantBox }, data() { return { currentCallId: '123456', transcriptList: [], // 语音转写列表 flowGuideData: {}, // 流程引导数据 elementList: [] // 要素识别候选列表 }; }, methods: { onAddIdentifiedElements(payload) { // payload 格式:{ key1: value1, key2: value2, ... } console.log('识别并填单数据:', payload); } } }; </script>
三、Props
| 名称 | 类型 | 默认值 | 说明 |
| --------------- | --------- | ----------- | ------------------------------------ |
| callId | String | '' | 通话唯一标识 |
| ssrList | Array | [] | 语音实时转写记录数组 |
| flowData | Object | {} | 流程引导数据(节点列表等) |
| eleIdentList | Array | [] | 要素识别候选字段列表 |
20250424改造:
改造组件只传callId,其他数据通过接口在组件内获取,不再通过父页面传入
四、事件 (Events)
| 事件名称 | 回调参数 | 说明 |
| ---------------------- | --------- | ------------------------------ |
| handleAddEleIdents | Object | 用户点击“一键填单”或单项填单后,返回识别结果对象 |
五、功能说明
实时语音转写:
- 通过
AudioTransWord组件接收外部转写列表 (ssrList) 并触发handleHuaWord事件,支持划词右键查询。
- 通过
模型思考:
- 点击机器人图标触发
handleShowThing,在底部面板展示 AI 思考过程 (thinkData)。
- 点击机器人图标触发
智能问答:
- 左侧嵌入
iframe,可配置问答页面地址,通过isShowSmartAnswer控制显示/隐藏。
- 左侧嵌入
要素识别 & 一键填单:
- 点击“要素识别”按钮,调用
handleIdentifyingEleIdent并行轮询多个 AI 接口,处理后更新模型思考区; - 点击“一键填单”或单个填单,会触发
handleAddEleIdents事件,将格式化后的字段对象回传给父组件。
- 点击“要素识别”按钮,调用
知识推荐:
- 划词触发
handleHuaWord,调用 GPT 接口获取知识推荐列表,并按匹配度降序展示。
- 划词触发
六、样式与布局
- 组件默认固定居中显示,支持拖拽移动,拖拽结束后会将位置保存在
sessionStorage。 - 左右两侧分别为“智能问答”和“右侧功能区”,中间主体用于实时转写和模型思考。
- 基于 SCSS 进行了样式封装,可根据项目主题自行调整。
七、注意事项
- 依赖全局引入的
AiAPI、getToken、gptConfig等工具模块,请确保已正确配置。 - 若要修改智能问答 URL 或 GPT 配置,请在
index.vue中调整对应常量。 - 若使用其他 UI 库,请替换或移除 Element-UI 的相关组件。
- 原则上其他项目需要添加坐席助手只复制这个文件夹即可实现全部功能,所以把相关组件都放到这个文件夹下了
如有疑问或需扩展功能,请在项目中阅读源码或联系维护人。
