超好用的AI聊天框组件库，打字机效果，自动编译markdown语法和echarts图表

原创于 2025-07-08 14:06:39 发布 · 336 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #echarts #前端

依赖名称：l-ai-chat

AI聊天输入框组件库
效果图

视频演示

一、组件说明

1. LAIChatComponent (容器组件)

提供整体布局框架
插槽：
- #content - 放置聊天内容区域
- #input - 放置输入控制区域

2. LChatContent (内容展示组件)

Props:

props	注释	类型	默认值
dataSource	消息数据	Array	[]

dataSource - 格式示例：

[
  {
    id: '主键',
    content: '提问内容', // 我的提问内容 
    type: 'myMsg', // type: 'myMsg' 是指我的提问
    avatar: '头像地址', // 我的头像（在线图片地址）
  },
  { 
    id: '主键',
    content: 'AI的响应内容',// 支持markdown语法
    type: 'ai', // type: 'ai' 是指AI的回答
    avatar: '头像地址', // AI的头像（在线图片地址）
    contentLoading: false, // ai内容是否处于加载中，默认false
    echartsType: false, // 是否有echarts图标，默认false
    echartsData: {}, // 要渲染的echarts数据，参考echarts官网：https://echarts.apache.org/zh/index.html
  }
]

3. LChatInput (输入控制组件)

Props:

props	注释	类型	默认值
value（v-model）	输入框内容	String
stopAnswerShow	是否显示【停止回答】按钮	Boolean	false

Events（事件）:

事件名称	注释	回调
send	发送消息事件，返回最新的消息	function(e)
stopAnswer	停止回答事件	function()
input	输入变化事件，返回最新的消息	function(e)

二、安装使用

1. 下载依赖

npm install l-ai-chat

2. 在main.js中导入样式文件

import 'l-ai-chat/l-ai-chat.css'

3. .vue文件中使用的示例代码：

<template>
  <LAIChatComponent>
    <template #content>
      <LChatContent :data-source="messages"/>
    </template>
    <template #input>
      <LChatInput 
        :value="inputVal"
        :stop-answer-show="isResponding"
        @send="handleSend"
        @stop-answer="handleStopAnswer"
        @input="handleInput"
      />
    </template>
  </LAIChatComponent>
</template>

<script>
import { LAIChatComponent, LChatContent, LChatInput } from 'l-ai-chat'
export default {
  components: {
    LAIChatComponent, LChatContent, LChatInput
  },
  data() {
    return {
      // 输入框内容
      inputVal:'',
      // 消息数据
      messages: [
          { content: '测试提问', type: 'myMsg', avatar: 'psn-avatar.png' },
          {
              "content": "- 测试项目人员数量和研发转化率\n     - 转化率以百分比形式显示，保留两位小数\n     - 结果按日期和代码排序\n<br></br>\n| 人员 | 人员转化率 | 日期       | 工号   | 金额       | 研发转化率 | 项目名称   |\n|------|------------|------------|------------|------------|------------|------------|\n| 001    | 0.06%      | 2025-05-01 | 001 | 100        | 0.18%      | 测试项目01     |\n",
              "type": "otherMsg",
              "id": "98b75c98a27dbad33e195bd516a185f7",
              "avatar": "ai-robot.png",
              "contentLoading": false,
              "echartsType": true,
              "echartsData": {
                  "title": {
                      "text": "人员和研发转化率"
                  },
                  "tooltip": {},
                  "legend": {
                      "data": [
                          "人员转化率",
                          "研发转化率"
                      ]
                  },
                  "xAxis": [
                      {
                          "type": "category",
                          "data": [
                              "2025-05-01",
                              "2025-05-02",
                              "2025-05-03",
                              "2025-05-04",
                              "2025-05-05"
                          ]
                      }
                  ],
                  "yAxis": [
                      {
                          "type": "value",
                          "name": "转化率"
                      }
                  ],
                  "series": [
                      {
                          "name": "人员转化率",
                          "type": "line",
                          "stack": "转化率",
                          "data": [
                              100.06,
                              90.06,
                              100.06,
                              90.06,
                              100.06
                          ]
                      },
                      {
                          "name": "研发转化率",
                          "type": "line",
                          "stack": "转化率",
                          "data": [
                              100.18,
                              110.18,
                              100.18,
                              110.18,
                              100.18
                          ]
                      }
                  ]
              }
          }
      ],
    }
  },
  methods:{
    /**
     * 发送消息事件，返回最新的消息
     * @param {*} value 输入框内容
     */
    handleSend(value){
      console.log(value)
    },
    /**
     * 输入框输入事件，返回最新的消息
     * @param {*} value 输入框内容
     */
    handleInput(value){
      console.log(value)
    },
    // 停止回答事件
    stopAnswer() {},
  }
}
</script>

NPM地址

NPM: https://www.npmjs.com/package/l-ai-chat