llm-chat-web

天泽蓝塔大模型聊天助手 Vue 3 组件库，可以在其他项目中通过 npm 安装并直接使用。

安装

npm install llm-chat-web
# 或
yarn add llm-chat-web
# 或
pnpm add llm-chat-web

使用方式

方式一：通过组件 Props 传入（推荐，支持动态更新）

推荐使用此方式，因为当 token 等信息变化时，组件会自动更新。

在已登录环境中，通过传入 token、手机号和用户名来初始化组件。当 token 等信息变化时，组件会自动更新。

<template>
  <div id="app">
    <LlmChat :token="token" :phone="phone" :userName="userName" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import LlmChat from 'llm-chat-web'
import 'llm-chat-web/style'
import { useUserStore } from '@/stores/user' // 您的用户 store

const userStore = useUserStore()

// 从您的登录状态中获取（支持动态更新）
const token = computed(() => userStore.token)
const phone = computed(() => userStore.phone)
const userName = computed(() => userStore.userName)
</script>

优势：

• ✅ 支持动态更新：当 token 等信息变化时，组件会自动更新
• ✅ 响应式：使用 computed 或 ref，token 变化时组件会自动响应
• ✅ 灵活：可以在任何组件中使用，不受全局状态影响

方式二：通过 Vue.use() 安装插件

注意：此方式只在安装时初始化一次，如果 token 会变化，请使用方式一（Props）或方式三（动态更新）。

import { createApp } from 'vue'
import App from './App.vue'
import LlmChat from 'llm-chat-web'
import 'llm-chat-web/style'

const app = createApp(App)

// 安装插件并传入用户信息（可选，也可以在组件中通过 props 传入）
app.use(LlmChat, {
  token: 'your-token-here',
  phone: '13800138000',
  userName: '用户名'
})

app.mount('#app')

然后在模板中使用：

<template>
  <div id="app">
    <LlmChat />
  </div>
</template>

方式三：动态更新用户信息

如果使用插件方式安装，但需要动态更新 token 等信息，可以使用 updateUserInfo 方法：

import { updateUserInfo } from 'llm-chat-web'

// 当 token 更新时调用
function handleTokenUpdate(newToken: string, phone: string, userName?: string) {
  updateUserInfo({
    token: newToken,
    phone: phone,
    userName: userName
  })
}

// 或者在组件中通过全局属性调用
// this.$updateLlmChatUserInfo({ token, phone, userName })

关于 Token 动态更新

重要提示：token 信息每次登录都会变化，组件已支持动态更新。

推荐方案：使用 Props（方式一）

使用 Props 方式传入用户信息，组件会自动监听变化并更新：

<template>
  <LlmChat 
    :token="userToken" 
    :phone="userPhone" 
    :userName="userName" 
  />
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import LlmChat from 'llm-chat-web'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 使用 computed，当 store 中的 token 变化时，组件会自动更新
const userToken = computed(() => userStore.token)
const userPhone = computed(() => userStore.phone)
const userName = computed(() => userStore.userName)

// 或者监听登录状态变化
watch(() => userStore.isLoggedIn, (isLoggedIn) => {
  if (isLoggedIn) {
    // token 已更新，组件会自动响应
  }
})
</script>

替代方案：使用 updateUserInfo 方法

如果使用插件方式安装，可以通过 updateUserInfo 方法动态更新：

import { updateUserInfo } from 'llm-chat-web'

// 在登录成功后或 token 刷新时调用
function onLoginSuccess(token: string, phone: string, userName: string) {
  updateUserInfo({ token, phone, userName })
}

Props

| 参数 | 说明 | 类型 | 必填 | 默认值 | |------|------|------|------|--------| | token | 用户 token | string | 是 | - | | phone | 用户手机号 | string | 是 | - | | userName | 用户名 | string | 否 | '未知用户' |

注意事项

1. 依赖要求：此组件库需要以下 peer dependencies：

   • vue >= 3.3.0
   • vue-router >= 4.2.0
   • pinia >= 2.1.0
   • element-plus >= 2.5.0

   请确保您的项目已安装这些依赖。

2. 样式引入：使用组件时，需要引入样式文件：

   import 'llm-chat-web/style'

3. 路由配置：组件内部使用了 Vue Router，如果您的项目已有路由配置，请确保不会冲突。

4. Token 动态更新：

   • ✅ 推荐：使用 Props 方式传入用户信息，组件会自动监听变化
   • ✅ 使用 computed 从 store 中获取，token 变化时自动更新
   • ✅ 如果使用插件方式，可通过 updateUserInfo 方法动态更新
   • ⚠️ 插件安装时传入的 options 只在安装时执行一次，不会自动更新

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 类型检查
npm run type-check

# 代码检查
npm run lint

发布

# 构建库
npm run build:lib

# 发布到 npm
npm publish

License

MIT