@vue3-simple-bui/chat

一个功能丰富的 Vue3 聊天对话组件库，支持文本、图片等多种消息类型，提供完整的聊天界面交互功能。

✨ 特性

• 🎯 多种消息类型 - 支持文本、图片、语音、视频等多种消息展示
• 💬 完整交互 - 支持消息发送、接收、状态显示
• 🎨 样式自定义 - 提供丰富的 CSS 变量和类名，支持主题定制
• 📱 响应式布局 - 支持多种设备标识显示，自适应不同屏幕
• 🔄 实时更新 - 支持消息列表自动滚动和实时更新
• 🎯 专注模式 - 支持聊天专注模式切换
• 📝 只读模式 - 支持只读模式，适用于历史消息查看
• ⚡ 高性能 - 支持批量渲染，性能优秀
• 🛠️ TypeScript - 完整的 TypeScript 类型定义

📦 安装

# npm
npm install @vue3-simple-bui/chat

# yarn
yarn add @vue3-simple-bui/chat

# pnpm
pnpm add @vue3-simple-bui/chat

前置依赖

本组件库依赖以下包，请确保您的项目中已安装：

• vue >= 3.0.0
• dayjs >= 1.11.0
• pinia >= 2.0.0
• ant-design-vue >= 4.0.0
• @ant-design/icons-vue >= 7.0.0

如果您的项目中还未安装这些依赖，请先安装：

# npm
npm install vue dayjs pinia ant-design-vue @ant-design/icons-vue

# yarn
yarn add vue dayjs pinia ant-design-vue @ant-design/icons-vue

# pnpm
pnpm add vue dayjs pinia ant-design-vue @ant-design/icons-vue

🔨 快速开始

基础用法

<template>
  <l-chat-manage
    ref="chatRef"
    :messages="messages"
    :sender="sender"
    :receiver="receiver"
    :userId="userId"
    :readonly="false"
    :auto-scroll="true"
    @send-message="handleSendMessage"
    @upload-image="handleUploadImage"
  />
</template>

<script setup>
import { ref } from 'vue';
import { LChatManage } from '@vue3-simple-bui/chat';
import '@vue3-simple-bui/chat/dist/style.css';

const chatRef = ref();
const messages = ref([
  {
    id: '1232323453545',
    content: '医生，您好，我最近感觉有些不舒服！',
    time: '2025-05-23 10:00',
    type: 'text',
    currentUserId: '1910594595277893632',
    sender: {
      userId: '1919652661519732733',
      userName: 'LMX',
      sex: 1,
      device: ['WX'],
    },
    receiver: {
      userId: '1910594595277893632',
      userName: 'ZQQ',
      sex: 1,
      device: ['PC'],
    },
  },
]);

const sender = {
  userId: '1910594595277893632',
  userName: '李荣飞',
  device: ['PC'],
};

const receiver = {
  userId: '1919652661519732733',
  userName: '测试用户',
  device: ['WX'],
};

const userId = '1910594595277893632';

const handleSendMessage = (message) => {
  console.log('发送消息:', message);
  // 处理消息发送逻辑
};

const handleUploadImage = (imgInfo) => {
  console.log('上传图片:', imgInfo);
  // 处理图片上传逻辑
};

// 使用组件方法
const addNewMessage = (message) => {
  chatRef.value.addMessage(message);
};
</script>

📖 文档

完整文档请访问：https://www.liumingxin.site/bui/

消息类型

文本消息

{
  type: 'text',
  content: '这是一条文本消息',
  id: 'unique-id',
  time: '2025-05-23 10:00',
  currentUserId: 'user-id',
  sender: { /* ... */ },
  receiver: { /* ... */ }
}

图片消息

{
  type: 'img',
  content: 'https://example.com/image.jpg',
  uploading: false,
  id: 'unique-id',
  time: '2025-05-23 10:00',
  currentUserId: 'user-id',
  sender: { /* ... */ },
  receiver: { /* ... */ }
}

TypeScript 类型定义

interface SenderInfoType {
  userId: string;
  userName: string;
  patPicBase64?: string;
  sex?: string;
  device: Array<'PC' | 'WX'>;
}

interface MessageType {
  id: number | string;
  content: string | any;
  time: string;
  businessType?: string; // 业务类型：10-在线问诊；20-在线复诊
  hospitalId?: string;
  type: 'text' | 'img' | 'voice' | 'video';
  uploading?: boolean;
  currentUserId: string;
  sender: SenderInfoType;
  receiver: SenderInfoType;
}

🎨 样式自定义

组件提供了丰富的 CSS 变量和类名，支持主题定制和样式覆盖：

// 自定义气泡颜色
.chat-message-bubble {
  &.sent {
    background-color: #1890ff; // 发送消息气泡颜色
  }

  &.received {
    background-color: #f0f0f0; // 接收消息气泡颜色
  }
}

// 自定义图片消息样式
.img-message-bubble {
  :deep(.upload-img-info) {
    border-radius: 8px;

    &:hover {
      transform: scale(1.02);
    }
  }
}

// 专注模式样式
.chat-container.focus-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: white;
}

📚 API

LChatManage 属性

| 参数 | 说明 | 类型 | 默认值 | 必需 | | --------------- | ------------------------------- | ---------------- | ------ | ---- | | readonly | 是否为只读模式 | Boolean | false | 否 | | messages | 消息列表数组 | MessageType[] | [] | 是 | | messagesLoading | 消息加载状态 | Boolean | false | 否 | | showSelfMessage | 是否显示自己发送的消息 | Boolean | true | 否 | | autoScroll | 是否自动滚动到最新消息 | Boolean | true | 否 | | dividerMinutes | 消息时间分隔线间隔（分钟） | Number | 5 | 否 | | userId | 当前用户 ID（用于判断消息方向） | String | '' | 是 | | sender | 发送者信息对象 | SenderInfoType | {} | 是 | | receiver | 接收者信息对象 | SenderInfoType | {} | 是 | | phrases | 常用语数组 | Array | [] | 否 |

LChatManage 方法

| 方法名称 | 说明 | 参数 | 返回值 | | ------------------- | -------------------- | ----------------------- | ---------------- | | toggleFocusMode | 切换聊天专注模式 | - | void | | addMessage | 添加新消息 | message: MessageType | void | | updateMessage | 更新已存在的消息 | message: MessageType | void | | getMessages | 获取所有消息 | - | MessageType[] | | getMessageById | 根据 ID 获取指定消息 | id: string | MessageType | | loadMessages | 加载消息列表 | messages: MessageType[] | void | | resetMessages | 重置消息列表 | - | void | | batchRenderMessages | 批量渲染消息 | messages: MessageType[] | void |

LChatManage 事件

| 事件名称 | 说明 | 回调参数 | | -------------- | -------------- | -------------------- | | send-message | 发送消息时触发 | message: MessageType | | upload-image | 上传图片时触发 | imgInfo: Object | | update-message | 更新消息时触发 | message: MessageType |

🗂️ 项目结构

chat/
├── chat-build/         # 构建配置
├── chat-components/    # 组件源码
├── chat-types/         # 类型定义
├── dist/              # 构建输出
├── package.json       # 包配置
├── README.md          # 项目说明
└── tsconfig.json      # TypeScript 配置

🔧 开发

# 安装依赖
pnpm install

# 类型检查
pnpm type-check

# 构建
pnpm chat-build

# 打包
pnpm chat-packtgz

# 发布
pnpm chat-publish

⚠️ 注意事项

• 由于组件正在持续开发中，部分功能和参数可能会有调整，请关注版本更新说明
• 建议在生产环境使用稳定版本
• 图片消息需要确保图片 URL 可访问
• 消息 ID 必须保证唯一性

📄 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

• 文档网站：https://www.liumingxin.site/bui/
• 作者：LMX