dwk-sse-chat
v1.5.0
Published
一个基于Vue3的聊天组件库，支持在Vue项目中导入使用，也支持在普通HTML页面中通过脚本标签直接引入使用。
Readme
DWK SSE Chat
一个基于Vue3的聊天组件库，支持在Vue项目中导入使用，也支持在普通HTML页面中通过脚本标签直接引入使用。
特性
- 支持多种使用方式（Vue组件、JS库）
- 悬浮球式聊天窗口
- 支持拖拽和边缘吸附
- 支持全屏/小窗模式切换
- 美观的UI和流畅的动画
安装
在Vue项目中使用
# npm
npm install dwk-sse-chat
# yarn
yarn add dwk-sse-chat
# pnpm
pnpm add dwk-sse-chat在HTML页面中直接使用
<script src="https://你的域名/chat.js"></script>使用方法
方法1: 直接在Vue项目中引入
<template>
<div class="chat-wrapper">
<ChatWindows />
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { ChatWindows } from 'dwk-sse-chat';
onMounted(() => {
// 初始化配置
window.dispatchEvent(new CustomEvent('chatConfigUpdate', {
detail: {
robotname: "机器人名称",
dwk_token: "你的token",
title: "聊天窗口标题",
baseUrl: "API基础URL",
isFullScreen: false // 是否全屏显示
}
}));
})
</script>
<style>
/* 重要：确保包装容器有正确的定位和层级 */
.chat-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
</style>方法2: 使用浏览器直接引入方式
<!DOCTYPE html>
<html>
<head>
<title>DWK Chat 示例</title>
</head>
<body>
<h1>聊天组件示例</h1>
<!-- 引入聊天组件 -->
<script src="path/to/chat.js"></script>
<script>
// 初始化聊天组件
var chat = new Chat({
robotname: "机器人名称",
dwk_token: "你的token",
title: "聊天窗口标题",
baseUrl: "API基础URL"
});
// 显示聊天窗口
chat.show();
</script>
</body>
</html>配置选项
| 选项 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|------|------| | robotname | string | 否 | 'AI助手' | 机器人名称 | | dwk_token | string | 是 | - | 认证token | | title | string | 否 | 'DWK SSE Chat' | 聊天窗口标题 | | baseUrl | string | 是 | - | API基础URL | | isFullScreen | boolean | 否 | false | 是否以全屏模式显示 |
API方法
show()
显示聊天窗口。
chat.show();hide()
隐藏聊天窗口。
chat.hide();sendMessage(message)
发送一条消息。
chat.sendMessage('你好，AI助手！');updateConfig(config)
更新配置。
chat.updateConfig({
title: '新标题',
isFullScreen: true
});常见问题
悬浮球不显示或位置不正确
确保包装组件具有正确的样式：
.chat-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}并且保证在初始化后调用配置更新事件：
window.dispatchEvent(new CustomEvent('chatConfigUpdate', {
detail: { /* 你的配置 */ }
}));聊天窗口平铺在应用中
这通常是因为包装容器缺少正确的CSS定位。确保包装组件设置了position: fixed且覆盖整个视口。
如何完全自定义样式？
可以通过全局CSS覆盖组件样式：
/* 自定义悬浮球 */
.custom-floating-ball {
background-color: #ff5500 !important; /* 自定义颜色 */
}
/* 自定义聊天窗口 */
#dwk-chat-app.dwk-chat-app {
border-radius: 0 !important; /* 移除圆角 */
}开发者指南
构建
npm run build调试
npm run dev