实时音视频 SDK 定制（Vue3）

概述
本文档介绍 TUILiveKit Manager Vue SDK 的核心 Hooks，帮助开发者定制直播管理后台。如果想快速体验开箱即用的管理后台，可直接查看 直播管理系统。
为方便后续升级本包以闭源交付模式发布，仅包含编译后的产物和类型声明（.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 渲染能力：
类别
导入
说明
视频播放
LiveView
直播视频画面渲染组件。
弹幕消息
BarrageList, BarrageInput
弹幕列表展示与输入框。
观众列表
LiveAudienceList, useLiveAudienceState
观众列表组件与状态。
直播操作
useLiveListState, LiveListEvent
加入/离开直播、事件订阅。
登录认证
useLoginState
登录及用户信息获取。
播放器控制
useLivePlayerState
控制栏显隐、播放器设置。
相关文档
﻿TUILiveKit Manager 完整文档﻿
﻿准备工作（Web Vue3）﻿
﻿开通 TUILiveKit 服务﻿
﻿TUILiveKit 管理员账号管理﻿
类别	导入	说明
视频播放	`LiveView`	直播视频画面渲染组件。
弹幕消息	`BarrageList`, `BarrageInput`	弹幕列表展示与输入框。
观众列表	`LiveAudienceList`, `useLiveAudienceState`	观众列表组件与状态。
直播操作	`useLiveListState`, `LiveListEvent`	加入/离开直播、事件订阅。
登录认证	`useLoginState`	登录及用户信息获取。
播放器控制	`useLivePlayerState`	控制栏显隐、播放器设置。
SDK 定制（Vue3）

本页目录：

概述

准备工作

快速接入

步骤1：开通服务

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

步骤3：安装依赖

步骤4：初始化 HTTP 客户端

核心 Hooks

useLiveMonitorState()

useGiftState()

useRiskControlState(options)

tuikit-atomicx-vue3 渲染能力

相关文档
