Lingxi UI

Appearance

快速开始 ​

Lingxi UI 的目标用户是 Vue2.6 项目。组件本身基于 Vue3 和上游 AI 组件库实现，Vue2 项目通过 SDK 挂载和更新。

安装 ​

bash
npm install @zhiyongui/lingxi-ui

Vue2.6 推荐用法 ​

在 Vue2 页面中准备一个容器，然后通过 mountAiChat 挂载。

html
<template>
  <div ref="chatContainer"></div>
</template>

<script>
import { mountAiChat } from '@zhiyongui/lingxi-ui/sdk'
import '@zhiyongui/lingxi-ui/style.css'

export default {
  data() {
    return {
      instance: null,
      messages: [{ id: 1, role: 'assistant', content: 'Hello' }]
    }
  },
  mounted() {
    this.instance = mountAiChat({
      container: this.$refs.chatContainer,
      props: {
        messages: this.messages,
        onSend: this.handleSend
      }
    })
  },
  beforeDestroy() {
    this.instance && this.instance.unmount()
  },
  methods: {
    handleSend(content) {
      this.messages = this.messages.concat({ id: Date.now(), role: 'user', content })
      this.instance.update({ messages: this.messages })
    }
  }
}
</script>

IIFE 用法 ​

非工程化 Vue2 页面可以使用构建后的 IIFE 文件。只接入基础聊天能力时，优先使用轻量聊天包：

html
<link rel="stylesheet" href="/lingxi-ui/lingxi-chat.css" />
<script src="/vendor/vue2/vue.js"></script>
<script src="/lingxi-ui/lingxi-chat.iife.js"></script>
<script>
new Vue({
  el: '#app',
  mounted: function () {
    this.instance = window.LingxiChat.mountAiChat({
      container: this.$refs.chatContainer,
      props: { messages: [] }
    })
  }
})
</script>

如果页面确实需要一次性使用聊天、文件预览、富内容、脑图、图谱、表格等全部能力，可以继续使用全量包：

html
<link rel="stylesheet" href="/lingxi-ui/style.css" />
<script src="/vendor/vue2/vue.js"></script>
<script src="/lingxi-ui/lingxi-ui.iife.js"></script>

按能力拆分的 IIFE 产物如下：

产物全局变量推荐场景
lingxi-chat.iife.js + lingxi-chat.csswindow.LingxiChat基础聊天、输入框、消息列表
lingxi-file-preview.iife.js + lingxi-file-preview.csswindow.LingxiFilePreviewPDF / OnlyOffice 文件预览
lingxi-visualization.iife.js + lingxi-visualization.csswindow.LingxiVisualization富内容、脑图、知识图谱、表格
lingxi-ui.iife.js + style.csswindow.LingxiUI需要全部能力的兼容入口

Vue3 直接用法 ​

如果项目本身已经是 Vue3，可以直接引入组件：

ts
import { AiChatPanel } from '@zhiyongui/lingxi-ui'
import '@zhiyongui/lingxi-ui/style.css'
vue
<AiChatPanel :messages="messages" @send="handleSend" />

按需引入 ​

Vue3 项目可以按需引入组件和 CSS。Vue2 项目优先使用 SDK/IIFE 全量入口。

ts
import { AiSender } from '@zhiyongui/lingxi-ui/ai-sender'
import '@zhiyongui/lingxi-ui/ai-sender/style.css'