npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

vue2-component-demo

v1.0.0

Published

A reusable Vue 2 component demo

Readme

SeatAssistantBox 组件

一、组件简介

SeatAssistantBox 是一个悬浮式的坐席助手面板,集成了以下主要功能:

  • 实时语音转文字:通过 AudioTransWord 子组件展示实时转写文本。
  • 模型思考:点击下方机器人图标可展开/收起 AI 思考过程。
  • 智能问答(ChatGPT):左侧 iframe 嵌入智能问答页面,可与大模型交互。
  • 右侧功能区:支持要素识别、流程引导、知识推荐(基于 AI 推荐知识库)。

二、安装与引入

  1. 在项目中安装依赖(已集成 Axios/Fetch、Element-UI)
  2. 在父组件中引入并注册:
    <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 | 用户点击“一键填单”或单项填单后,返回识别结果对象 |

五、功能说明

  1. 实时语音转写:

    • 通过 AudioTransWord 组件接收外部转写列表 (ssrList) 并触发 handleHuaWord 事件,支持划词右键查询。
  2. 模型思考:

    • 点击机器人图标触发 handleShowThing,在底部面板展示 AI 思考过程 (thinkData)。
  3. 智能问答:

    • 左侧嵌入 iframe,可配置问答页面地址,通过 isShowSmartAnswer 控制显示/隐藏。
  4. 要素识别 & 一键填单:

    • 点击“要素识别”按钮,调用 handleIdentifyingEleIdent 并行轮询多个 AI 接口,处理后更新模型思考区;
    • 点击“一键填单”或单个填单,会触发 handleAddEleIdents 事件,将格式化后的字段对象回传给父组件。
  5. 知识推荐:

    • 划词触发 handleHuaWord,调用 GPT 接口获取知识推荐列表,并按匹配度降序展示。

六、样式与布局

  • 组件默认固定居中显示,支持拖拽移动,拖拽结束后会将位置保存在 sessionStorage。
  • 左右两侧分别为“智能问答”和“右侧功能区”,中间主体用于实时转写和模型思考。
  • 基于 SCSS 进行了样式封装,可根据项目主题自行调整。

七、注意事项

  • 依赖全局引入的 AiAPI、getToken、gptConfig 等工具模块,请确保已正确配置。
  • 若要修改智能问答 URL 或 GPT 配置,请在 index.vue 中调整对应常量。
  • 若使用其他 UI 库,请替换或移除 Element-UI 的相关组件。
  • 原则上其他项目需要添加坐席助手只复制这个文件夹即可实现全部功能,所以把相关组件都放到这个文件夹下了

如有疑问或需扩展功能,请在项目中阅读源码或联系维护人。