conference-core
v1.0.11
Published
可复用的 IM/RTC 组件库
Readme
conference-core
企业级 IM 组件库,基于 Vue 3 + TypeScript,支持消息、群组、禁言、已读回执等核心功能。
特性
- 🚀 Vue 3 + TypeScript:完整的类型支持
- 🎨 可定制样式:支持 CSS 变量主题定制
- 🧩 组件化设计:按需引入,灵活组合
- 🔌 适配层架构:支持自定义 IM 后端(默认 Turms)
- 📦 开箱即用:提供完整组件和 Composables
安装
npm install conference-core快速开始
使用组件
<template>
<ConferenceProvider :client="client">
<ChatContainer
:user-id="userId"
:group-id="groupId"
:ws-url="wsUrl"
/>
</ConferenceProvider>
</template>
<script setup lang="ts">
import { ConferenceClient, ConferenceProvider, ChatContainer } from 'conference-core'
import 'conference-core/style.css'
const client = new ConferenceClient()
const userId = 'user-123'
const groupId = 'group-456'
const wsUrl = 'ws://localhost:8080/ws'
</script>使用 Composables
<script setup lang="ts">
import { ConferenceClient, useAuth, useChat } from 'conference-core'
const client = new ConferenceClient()
const { login, loading, error } = useAuth(client)
const { messages, sendText } = useChat(client)
// 登录
await login({
userId: 'user-123',
groupId: 'group-456',
wsUrl: 'ws://localhost:8080/ws',
})
</script>文档
核心模块
| 模块 | 说明 |
|------|------|
| ConferenceClient | 门面类,统一管理所有 Service |
| MessageService | 消息服务(发送、撤回、加载) |
| MemberService | 成员服务(查询、缓存、状态) |
| MuteService | 禁言服务(禁言、解禁、全员禁言) |
| ReadReceiptService | 已读回执服务 |
组件
| 组件 | 说明 |
|------|------|
| ConferenceProvider | 提供 ConferenceClient 实例 |
| ChatContainer | 聊天容器(完整界面) |
| ChatHeader | 聊天头部(群组信息) |
| MessageList | 消息列表 |
| MessageItem | 消息项 |
| ChatInput | 消息输入框 |
Composables
| Composable | 说明 |
|------------|------|
| useAuth | 认证生命周期 |
| useChat | 消息收发 |
| useMembers | 群成员管理 |
| useMutes | 禁言管理 |
| useReadReceipts | 已读回执 |
| useEventBus | 事件总线 |
示例
# 构建库
npm run build
# 进入示例目录
cd examples/basic-usage
# 安装依赖
npm install
# 启动示例
npm run dev
# 访问 http://localhost:3001详见 examples/basic-usage/README.md
开发
# 安装依赖
npm install
# 开发模式
npm run dev
# 运行测试
npm run test:run
# 类型检查
npm run type-check
# 构建
npm run build许可证
MIT
