即时通信 IM SDK 定制（Vue3）

一、概述

为方便后续升级本包以闭源交付模式发布，仅包含编译后的产物和类型声明（.js / .d.ts / .css）。

二、准备工作

环境要求：

·Node.js >= 18

·Vue 3 >= 3.2

·pnpm >= 7

·推荐使用 Chrome / Edge 浏览器进行开发

三、步骤1：开通服务

参见 开通 TUILiveKit 服务 获取 SDK 使用权限。

四、步骤2：配置并启动服务端

SDK 需要配合后端服务才能使用，请先启动服务端。参考 直播管理系统 > 步骤 3：配置服务端 完成配置后，运行：

pnpm run start:server

注意：默认端口为 9000。后续初始化 HTTP 客户端时，baseURL 需与此端口一致（例如 http://localhost:9000/api）。

五、步骤3：安装依赖

在 Vue 3 项目中安装本 SDK。使用 pnpm 安装时，Peer 依赖将自动一并安装：

pnpm add tuikit-live-manager-sdk-vue

六、步骤4：初始化 HTTP 客户端

在使用任何 Hook 之前，必须先调用 initHttpClient 注入 axios 实例。SDK 中有两类初始化，职责不同：initHttpClient 负责 HTTP 通信层（API 请求），useLiveMonitorState().init() 负责播放器等业务能力初始化，两者都需调用。

initHttpClient 会自动：

·注入 axios 实例（配置 baseURL、timeout 等）；

·注册凭证透传拦截器（自动携带认证头 x-sdk-app-id / x-user-id / x-user-sig）。

// src/main.ts 或应用入口文件import { initHttpClient } from 'tuikit-live-manager-sdk-vue';import axios from 'axios';const axiosInstance = axios.create({ baseURL: '/api', timeout: 10000,});initHttpClient(axiosInstance);

七、核心 Hooks

以下三个核心 Composables 覆盖了直播运营管理的主要场景。所有 Composable 均为单例模式，多组件共享同一实例。

·useLiveMonitorState()：直播间管理（列表、创建、编辑、结束直播、推拉流）；

·useGiftState()：礼物管理（CRUD、分类、多语言）；

·useRiskControlState(options)：风控管理（内容审核、成员管控、聊天管理）。

八、useLiveMonitorState()

直播监控核心 Composable，单例模式。管理直播间列表、创建/编辑/结束直播、推拉流操作。

import { useLiveMonitorState } from 'tuikit-live-manager-sdk-vue';const { init, // 初始化播放器等业务能力（幂等） liveList, // 直播列表 Ref<MonitorLiveInfo[]> hasMore, // 是否还有更多数据 Ref<boolean> currentLive, // 当前选中的直播 Ref<MonitorLiveInfo | null> setCurrentLive, // 设置当前直播间（传入 liveId） fetchLiveList, // 获取直播列表（支持分页） createLive, // 创建直播 → Promise<MonitorLiveInfo> updateLive, // 更新当前直播间信息 endLive, // 结束直播（支持指定 liveId 或使用 currentLive） fetchLiveDetail, // 获取直播间详情（含推流信息） fetchLiveStats, // 获取直播间统计 startPlay, // 开始播放（liveId + containerId） stopPlay, // 停止播放} = useLiveMonitorState();

注意：警告：

注意：init(config) 用于初始化业务能力，需传入 ServerConfig（含服务端地址 baseURL、超时、播放器工厂 playerFactory 等配置）。其中 playerFactory 用于 startPlay / stopPlay 等播放相关能力，不传时 SDK 内部自动创建默认实现。HTTP 通信层由 initHttpClient 负责，两者的 baseURL 相互独立。这是一个单例 Composable，多组件共享同一实例。

示例：自定义直播间列表

<script setup>import { useLiveMonitorState } from 'tuikit-live-manager-sdk-vue';import { onMounted, ref } from 'vue';const { init, liveList, fetchLiveList, createLive, setCurrentLive, fetchLiveDetail } = useLiveMonitorState();const name = ref('');onMounted(() => { init({ baseURL: 'http://localhost:9000/api' }); fetchLiveList();});const handleCreate = async () => { const live = await createLive({ anchorId: 'anchor_001', liveName: name.value, coverUrl: '' }); setCurrentLive(live.liveId); await fetchLiveDetail();};</script><template> <div> <input v-model="name" /> <button @click="handleCreate">创建直播间</button> <ul> <li v-for="live in liveList" :key="live.liveId" @click="setCurrentLive(live.liveId)"> {{ live.liveName }} — {{ live.onlineCount }} 人 </li> </ul> </div></template>

分页加载示例：

<script setup>import { useLiveMonitorState } from 'tuikit-live-manager-sdk-vue';import { onMounted } from 'vue';const { init, liveList, hasMore, fetchLiveList } = useLiveMonitorState();onMounted(() => { init({ baseURL: 'http://localhost:9000/api' }); fetchLiveList();});const loadMore = () => { if (hasMore.value) { fetchLiveList(); }};</script><template> <div> <ul> <li v-for="live in liveList" :key="live.liveId"> {{ live.liveName }} — {{ live.onlineCount }} 人 </li> </ul> <button v-if="hasMore" @click="loadMore">加载更多</button> </div></template>

九、useGiftState()

礼物管理核心 Composable，单例模式。管理礼物的 CRUD 操作、分类管理和多语言配置。

import { useGiftState } from 'tuikit-live-manager-sdk-vue';const { giftList, // 礼物列表 Ref<GiftItem[]> giftCategoryList, // 分类列表 Ref<GiftCategoryItem[]> fetchGiftList, // 获取礼物列表（同时返回分类） createGift, // 创建礼物 → Promise<string> updateGift, // 更新礼物 deleteGift, // 删除礼物（传入 giftId） createGiftCategory, // 创建礼物分类 updateGiftCategory, // 更新礼物分类 deleteGiftCategory, // 删除礼物分类 addGiftCategoryRelations, // 添加礼物-分类关联 deleteGiftCategoryRelations, // 移除礼物-分类关联 // 多语言管理 getGiftLanguage, // 获取礼物多语言信息 setGiftLanguage, // 设置礼物多语言信息 deleteGiftLanguage, // 删除礼物多语言 getGiftCategoryLanguage, // 获取分类多语言信息 setGiftCategoryLanguage, // 设置分类多语言信息 deleteGiftCategoryLanguage, // 删除分类多语言信息} = useGiftState();

示例：礼物管理页面

<script setup>import { useGiftState } from 'tuikit-live-manager-sdk-vue';import { onMounted, ref } from 'vue';const { giftList, giftCategoryList, fetchGiftList, createGift, updateGift, deleteGift, createGiftCategory, deleteGiftCategory,} = useGiftState();const newGiftName = ref('');const selectedCategory = ref('');onMounted(() => { fetchGiftList();});const handleCreateGift = async () => { await createGift({ id: `gift_${Date.now()}`, name: newGiftName.value, iconUrl: '', price: 100 }); newGiftName.value = ''; await fetchGiftList();};const handleDelete = async (giftId: string) => { await deleteGift(giftId); await fetchGiftList();};const handleCreateCategory = async () => { await createGiftCategory({ name: '热门礼物' }); await fetchGiftList();};</script><template> <div> <input v-model="newGiftName" placeholder="礼物名称" /> <button @click="handleCreateGift">创建礼物</button> <button @click="handleCreateCategory">创建分类</button> <div v-for="cat in giftCategoryList" :key="cat.id"> <h3>{{ cat.name }}</h3> <ul> <li v-for="gift in giftList.filter(g => g.categoryIds?.includes(cat.id))" :key="gift.id"> {{ gift.name }} — {{ gift.price }} 金币 <button @click="() => handleDelete(gift.id)">删除</button> </li> </ul> </div> </div></template>

十、useRiskControlState(options)

风控管理核心 Composable。管理内容审核、成员管控和聊天管理。必须传入 liveId。

import { useRiskControlState } from 'tuikit-live-manager-sdk-vue';const { // 审核管理 textModerationAvailable, // 审核能力是否可用 Ref<boolean> moderationMode, // 审核模式：cloud | custom Ref<ModerationMode> customModerationToggleEnabled, // 全员审核开关状态（custom 模式）Ref<boolean> updateCustomModerationToggleEnabled, // 设置全员审核开关（custom 模式） textModerationList, // 文本审核记录列表 Ref<TextModerationItem[]> textModerationTotal, // 审核记录总数 Ref<number> textModerationPageNum, // 当前审核列表页码 Ref<number> textModerationLoading, // 审核列表加载状态 Ref<boolean> fetchTextModerationList, // 获取审核列表（支持分页参数） approveTextModerationItems, // 批量放行审核记录 bypassCorrectionKeyword, // 绕过纠错关键词 params: { content: string; liveId?: string } deleteModerationItems, // 删除审核项 ids: string[] // 成员管理 muteMember, // 禁言成员 unmuteMember, // 取消禁言 banMember, // 封禁成员 unbanMember, // 取消封禁 mutedList, // 禁言列表 Ref<MutedMember[]> bannedList, // 封禁列表 Ref<BannedMember[]> fetchMutedList, // 获取禁言列表 fetchBannedList, // 获取封禁列表 // 聊天管理 sendViolationWarning, // 发送违规警告 sendAdminMessage, // 发送管理员消息 content: string} = useRiskControlState({ liveId: 'xxx', pageSize: 20 });

示例：自定义审核列表

<script setup>import { useRiskControlState } from 'tuikit-live-manager-sdk-vue';import { onMounted } from 'vue';const props = defineProps<{ liveId: string }>();const { textModerationList, fetchTextModerationList, approveTextModerationItems, muteMember } = useRiskControlState({ liveId: props.liveId, pageSize: 20 });onMounted(() => { fetchTextModerationList(); });</script><template> <div v-for="item in textModerationList" :key="item.id"> <span>{{ item.content }}</span> <button @click="approveTextModerationItems({ ids: [item.id] })">放行</button> <button @click="muteMember({ memberAccounts: [item.userId], muteTime: 300 })">禁言5分钟</button> </div></template>

十一、tuikit-atomicx-vue3 渲染能力

完整的应用开发需要配合 tuikit-atomicx-vue3 提供的音视频与 IM 渲染能力：

十二、相关文档

·TUILiveKit Manager 完整文档

·准备工作（Web Vue3）

·开通 TUILiveKit 服务

·TUILiveKit 管理员账号管理