atomicx-core sdk API 文档

atomicx-core sdk

atomicx-core sdk 是腾讯云最新推出的面向即时通信、音视频通话、视频直播、语聊房等场景的全新一代基于响应式的 API，您可以非常快速的在基于这组 API 构建自己的 UI 页面，它支持房间管理、屏幕分享、成员管理、麦位控制、基础美颜等丰富功能，同时确保720P和1080P高清画质，在70%丢包率的弱网环境下仍能保持高质量音视频传输。此外，SDK 采用48kHz高音质采样，结合腾讯天籁实验室的3A处理算法，消除回声和啸叫，实现全链路128kbps高音质立体声，为用户带来清晰沉浸的互动体验，本页面包含 atomicx-core sdk 的所有API接口，按功能模块分类展示。

State 模块列表

🔐 基础模块

LoginState - 用户身份认证与登录管理
DeviceState - 设备状态管理（摄像头、麦克风、扬声器）

🏠 房间模块

RoomState - 房间状态管理（创建、加入、预约等）
RoomParticipantState - 房间参与者管理（成员列表、权限控制）

📺 直播模块

LiveListState - 直播列表与直播间管理
LiveSeatState - 直播麦位管理
LiveAudienceState - 直播观众管理
LiveMonitorState - 直播监控管理

🎤 连麦与互动

CoGuestState - 观众连麦管理
CoHostState - 主播连麦管理
BattleState - 主播 PK 对战管理
BarrageState - 弹幕消息管理

💬 即时通信模块

MessageListState - 消息列表管理
MessageInputState - 消息输入管理
MessageActionState - 消息操作管理（转发、引用、撤回等）
ConversationListState - 会话列表管理
ContactListState - 联系人列表管理
SearchState - 搜索功能管理

⚙️ 设置模块

C2CSettingState - 单聊设置管理
GroupSettingState - 群聊设置管理

🎨 高级功能

VideoMixerState - 视频混流管理
VirtualBackgroundState - 虚拟背景管理
ASRState - 语音识别（ASR）管理
SeatStore - 麦位存储管理
FreeBeautyState - 免费美颜功能管理

📝 类型定义

Interface - 接口类型定义

LoginState

🔐 用户身份认证与登录管理模块

核心功能：提供用户登录、登出、个人信息管理等基础身份认证功能，是整个系统的用户身份基础。

技术特点：支持多种登录方式、用户信息缓存、登录状态持久化等功能，确保用户身份的安全性和可靠性。

业务价值：为所有业务模块提供统一的用户身份认证服务，是系统安全和用户体验的基础保障。

应用场景：用户登录、身份验证、个人信息管理、权限控制等核心身份认证场景。

响应式数据

loginUserInfo

const loginUserInfo: Ref<LoginUserInfo | null>

当前登录用户信息存储当前登录用户的详细信息，包括用户ID、昵称、头像等

类型: Ref<LoginUserInfo | null>

示例

import { useLoginState } from 'tuikit-atomicx-vue3';
const { loginUserInfo } = useLoginState();

// 监听用户信息变化
watch(loginUserInfo, (newUserInfo) => {
  if (newUserInfo) {
    console.log('用户信息更新:', newUserInfo);
    console.log('用户ID:', newUserInfo.userID);
    console.log('用户昵称:', newUserInfo.nickname);
    console.log('用户头像:', newUserInfo.avatarURL);
  }
});

// 获取当前用户信息
const currentUser = loginUserInfo.value;
if (currentUser) {
  console.log('当前登录用户:', currentUser.nickname);
}

接口函数

login

function login(loginParams: { userId: string; userSig: string; sdkAppId: number })

用户登录使用提供的参数进行登录，包括userId、userSig 和 sdkAppId

参数

参数名	类型	必填	描述
sdkAppId	`number`	是	应用的 SDKAppID
userId	`string`	是	用户ID
userSig	`string`	是	用户签名

示例

import { useLoginState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();

// 登录系统
await login({
  sdkAppId: 1400000001,
  userId: 'user_123456',
  userSig: 'xxx'
});

logout

function logout()

用户登出退出当前用户的登录状态，清空用户信息

示例

import { useLoginState } from 'tuikit-atomicx-vue3';

const { logout } = useLoginState();

// 退出登录
await logout();

setSelfInfo

function setSelfInfo(userInfo: { userName?: string; avatarUrl?: string; customInfo?: Record<string, any> })

设置用户个人信息更新当前登录用户的个人资料信息，包括昵称、头像URL和自定义信息

参数

参数名	类型	必填	描述
userName	`string`	否	用户昵称
avatarUrl	`string`	否	头像URL
customInfo	`Record<string, any>`	否	自定义信息

示例

import { useLoginState } from 'tuikit-atomicx-vue3';

const { setSelfInfo } = useLoginState();

// 设置用户个人信息
await setSelfInfo({
  userName: '张三',
  avatarUrl: 'https://example.com/avatar.png',
  customInfo: { level: 5 }
});

DeviceState

🎥 设备状态管理模块

核心功能：管理摄像头、麦克风等音视频设备的控制，提供设备状态监控、权限检查等基础设备服务。

技术特点：支持多设备管理、设备状态实时监控、权限动态检查、设备故障自动恢复等高级功能。

业务价值：为直播系统提供稳定的设备基础，确保音视频采集的可靠性和用户体验。

应用场景：设备管理、权限控制、音视频采集、设备故障处理等基础技术场景。

响应式数据

microphoneStatus

const microphoneStatus: Ref<DeviceStatus>

麦克风状态当前麦克风的开启/关闭状态

类型: Ref<DeviceStatus>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { microphoneStatus } = useDeviceState();

// 监听数据变化
watch(microphoneStatus, (newValue) => {
  console.log('microphoneStatus 更新:', newValue);
});

// 直接访问数据
console.log('当前 microphoneStatus:', microphoneStatus.value);

microphoneList

const microphoneList: Ref<TUIDeviceInfo[]>

麦克风设备列表系统中可用的麦克风设备列表

类型: Ref<TUIDeviceInfo[]>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { microphoneList } = useDeviceState();

// 监听数据变化
watch(microphoneList, (newValue) => {
  console.log('microphoneList 更新:', newValue);
});

// 直接访问数据
console.log('当前 microphoneList:', microphoneList.value);

currentMicrophone

const currentMicrophone: Ref<TUIDeviceInfo | null>

当前选中的麦克风设备当前正在使用的麦克风设备信息

类型: Ref<TUIDeviceInfo | null>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentMicrophone } = useDeviceState();

// 监听数据变化
watch(currentMicrophone, (newValue) => {
  console.log('currentMicrophone 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentMicrophone:', currentMicrophone.value);

microphoneLastError

const microphoneLastError: Ref<DeviceError>

麦克风最后一次错误信息记录麦克风操作的最后一次错误状态

类型: Ref<DeviceError>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { microphoneLastError } = useDeviceState();

// 监听数据变化
watch(microphoneLastError, (newValue) => {
  console.log('microphoneLastError 更新:', newValue);
});

// 直接访问数据
console.log('当前 microphoneLastError:', microphoneLastError.value);

captureVolume

const captureVolume: Ref<any>

麦克风采集音量麦克风音频采集的音量大小，范围0-100

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { captureVolume } = useDeviceState();

// 监听数据变化
watch(captureVolume, (newValue) => {
  console.log('captureVolume 更新:', newValue);
});

// 直接访问数据
console.log('当前 captureVolume:', captureVolume.value);

currentMicVolume

const currentMicVolume: Ref<any>

当前麦克风音量实时的麦克风音量检测值

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentMicVolume } = useDeviceState();

// 监听数据变化
watch(currentMicVolume, (newValue) => {
  console.log('currentMicVolume 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentMicVolume:', currentMicVolume.value);

isMicrophoneTesting

const isMicrophoneTesting: Ref<any>

麦克风测试状态是否正在进行麦克风设备测试

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isMicrophoneTesting } = useDeviceState();

// 监听数据变化
watch(isMicrophoneTesting, (newValue) => {
  console.log('isMicrophoneTesting 更新:', newValue);
});

// 直接访问数据
console.log('当前 isMicrophoneTesting:', isMicrophoneTesting.value);

testingMicVolume

const testingMicVolume: Ref<any>

测试时的麦克风音量麦克风测试过程中的音量检测值

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { testingMicVolume } = useDeviceState();

// 监听数据变化
watch(testingMicVolume, (newValue) => {
  console.log('testingMicVolume 更新:', newValue);
});

// 直接访问数据
console.log('当前 testingMicVolume:', testingMicVolume.value);

cameraStatus

const cameraStatus: Ref<DeviceStatus>

摄像头状态当前摄像头的开启/关闭状态

类型: Ref<DeviceStatus>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { cameraStatus } = useDeviceState();

// 监听数据变化
watch(cameraStatus, (newValue) => {
  console.log('cameraStatus 更新:', newValue);
});

// 直接访问数据
console.log('当前 cameraStatus:', cameraStatus.value);

cameraList

const cameraList: Ref<TUIDeviceInfo[]>

摄像头设备列表系统中可用的摄像头设备列表

类型: Ref<TUIDeviceInfo[]>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { cameraList } = useDeviceState();

// 监听数据变化
watch(cameraList, (newValue) => {
  console.log('cameraList 更新:', newValue);
});

// 直接访问数据
console.log('当前 cameraList:', cameraList.value);

currentCamera

const currentCamera: Ref<TUIDeviceInfo | null>

当前选中的摄像头设备当前正在使用的摄像头设备信息

类型: Ref<TUIDeviceInfo | null>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentCamera } = useDeviceState();

// 监听数据变化
watch(currentCamera, (newValue) => {
  console.log('currentCamera 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentCamera:', currentCamera.value);

cameraLastError

const cameraLastError: Ref<DeviceError>

摄像头最后一次错误信息记录摄像头操作的最后一次错误状态

类型: Ref<DeviceError>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { cameraLastError } = useDeviceState();

// 监听数据变化
watch(cameraLastError, (newValue) => {
  console.log('cameraLastError 更新:', newValue);
});

// 直接访问数据
console.log('当前 cameraLastError:', cameraLastError.value);

isCameraTesting

const isCameraTesting: Ref<any>

摄像头测试状态是否正在进行摄像头设备测试

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isCameraTesting } = useDeviceState();

// 监听数据变化
watch(isCameraTesting, (newValue) => {
  console.log('isCameraTesting 更新:', newValue);
});

// 直接访问数据
console.log('当前 isCameraTesting:', isCameraTesting.value);

isCameraTestLoading

const isCameraTestLoading: Ref<any>

摄像头测试加载状态摄像头测试是否正在加载中

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isCameraTestLoading } = useDeviceState();

// 监听数据变化
watch(isCameraTestLoading, (newValue) => {
  console.log('isCameraTestLoading 更新:', newValue);
});

// 直接访问数据
console.log('当前 isCameraTestLoading:', isCameraTestLoading.value);

isFrontCamera

const isFrontCamera: Ref<any>

是否为前置摄像头当前使用的是否为前置摄像头（移动端）

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isFrontCamera } = useDeviceState();

// 监听数据变化
watch(isFrontCamera, (newValue) => {
  console.log('isFrontCamera 更新:', newValue);
});

// 直接访问数据
console.log('当前 isFrontCamera:', isFrontCamera.value);

localMirrorType

const localMirrorType: Ref<any>

本地视频镜像类型本地视频画面的镜像显示模式

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { localMirrorType } = useDeviceState();

// 监听数据变化
watch(localMirrorType, (newValue) => {
  console.log('localMirrorType 更新:', newValue);
});

// 直接访问数据
console.log('当前 localMirrorType:', localMirrorType.value);

localVideoQuality

const localVideoQuality: Ref<any>

本地视频质量本地视频的画质设置

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { localVideoQuality } = useDeviceState();

// 监听数据变化
watch(localVideoQuality, (newValue) => {
  console.log('localVideoQuality 更新:', newValue);
});

// 直接访问数据
console.log('当前 localVideoQuality:', localVideoQuality.value);

speakerList

const speakerList: Ref<TUIDeviceInfo[]>

扬声器设备列表系统中可用的扬声器设备列表

类型: Ref<TUIDeviceInfo[]>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { speakerList } = useDeviceState();

// 监听数据变化
watch(speakerList, (newValue) => {
  console.log('speakerList 更新:', newValue);
});

// 直接访问数据
console.log('当前 speakerList:', speakerList.value);

currentSpeaker

const currentSpeaker: Ref<TUIDeviceInfo | null>

当前选中的扬声器设备当前正在使用的扬声器设备信息

类型: Ref<TUIDeviceInfo | null>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentSpeaker } = useDeviceState();

// 监听数据变化
watch(currentSpeaker, (newValue) => {
  console.log('currentSpeaker 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentSpeaker:', currentSpeaker.value);

outputVolume

const outputVolume: Ref<any>

扬声器输出音量扬声器音频输出的音量大小，范围0-100

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { outputVolume } = useDeviceState();

// 监听数据变化
watch(outputVolume, (newValue) => {
  console.log('outputVolume 更新:', newValue);
});

// 直接访问数据
console.log('当前 outputVolume:', outputVolume.value);

currentAudioRoute

const currentAudioRoute: Ref<AudioRoute>

当前音频路由当前音频输出的路由方式（扬声器/听筒等）

类型: Ref<AudioRoute>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentAudioRoute } = useDeviceState();

// 监听数据变化
watch(currentAudioRoute, (newValue) => {
  console.log('currentAudioRoute 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentAudioRoute:', currentAudioRoute.value);

isSpeakerTesting

const isSpeakerTesting: Ref<any>

扬声器测试状态是否正在进行扬声器设备测试

类型: Ref<any>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isSpeakerTesting } = useDeviceState();

// 监听数据变化
watch(isSpeakerTesting, (newValue) => {
  console.log('isSpeakerTesting 更新:', newValue);
});

// 直接访问数据
console.log('当前 isSpeakerTesting:', isSpeakerTesting.value);

screenStatus

const screenStatus: Ref<DeviceStatus>

屏幕分享状态当前屏幕分享的开启/关闭状态

类型: Ref<DeviceStatus>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { screenStatus } = useDeviceState();

// 监听数据变化
watch(screenStatus, (newValue) => {
  console.log('screenStatus 更新:', newValue);
});

// 直接访问数据
console.log('当前 screenStatus:', screenStatus.value);

networkInfo

const networkInfo: Ref<NetworkInfo | null>

网络信息当前网络连接的质量和状态信息

类型: Ref<NetworkInfo | null>

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { networkInfo } = useDeviceState();

// 监听数据变化
watch(networkInfo, (newValue) => {
  console.log('networkInfo 更新:', newValue);
});

// 直接访问数据
console.log('当前 networkInfo:', networkInfo.value);

接口函数

openLocalMicrophone

function openLocalMicrophone()

开启本地麦克风开启本地麦克风设备，开始音频采集，并处理各种可能的错误情况

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { openLocalMicrophone } = useDeviceState();

// 开启麦克风
try {
  await openLocalMicrophone();
  console.log('麦克风开启成功');
} catch (error) {
  console.error('麦克风开启失败:', error);
}

closeLocalMicrophone

function closeLocalMicrophone()

关闭本地麦克风关闭本地麦克风设备，停止音频采集

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { closeLocalMicrophone } = useDeviceState();

// 关闭麦克风
await closeLocalMicrophone();

muteLocalAudio

function muteLocalAudio()

静音本地音频静音本地音频，不关闭麦克风设备但停止音频传输

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { muteLocalAudio } = useDeviceState();

// 静音本地音频
await muteLocalAudio();

unmuteLocalAudio

function unmuteLocalAudio()

取消静音本地音频取消静音本地音频，恢复音频传输

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { unmuteLocalAudio } = useDeviceState();

// 取消静音本地音频
await unmuteLocalAudio();

getMicrophoneList

function getMicrophoneList()

获取麦克风设备列表获取系统中可用的麦克风设备列表

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { getMicrophoneList, microphoneList } = useDeviceState();

// 获取麦克风列表
try {
  await getMicrophoneList();
  console.log('麦克风列表:', microphoneList.value);
} catch (error) {
  console.error('获取麦克风列表失败:', error);
}

setCurrentMicrophone

function setCurrentMicrophone(deviceConfig: { deviceId: string })

设置当前麦克风设备切换到指定的麦克风设备

参数

参数名	类型	必填	描述
deviceId	`string`	是	麦克风设备ID

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCurrentMicrophone } = useDeviceState();

// 切换麦克风设备，输入您需要指定的麦克风 deviceId
await setCurrentMicrophone({
  deviceId: 'default'
});

startMicrophoneTest

function startMicrophoneTest(testConfig: { interval?: number })

开始麦克风测试开始麦克风音量检测，可设置检测间隔

参数

参数名	类型	必填	描述
interval	`number`	否	检测间隔时间（毫秒）

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startMicrophoneTest } = useDeviceState();

// 开始麦克风测试，例每 200ms 检测一次音量
await startMicrophoneTest({
  interval: 200
});

setCaptureVolume

function setCaptureVolume(volume: number)

设置音频采集音量设置麦克风的音频采集音量大小，范围0-100

参数

参数名	类型	描述
volume	`number`	音量大小（0-100）

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCaptureVolume } = useDeviceState();

// 例如设置采集音量为 80%
await setCaptureVolume(80);

setOutputVolume

function setOutputVolume(volume: number)

设置音频播放音量设置扬声器的音频播放音量大小，范围0-100

参数

参数名	类型	描述
volume	`number`	音量大小（0-100）

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setOutputVolume } = useDeviceState();

// 例如设置播放音量为 60%
await setOutputVolume(60);

stopMicrophoneTest

function stopMicrophoneTest()

停止麦克风测试停止当前正在进行的麦克风设备测试

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopMicrophoneTest } = useDeviceState();

// 停止麦克风测试
await stopMicrophoneTest();

getSpeakerList

function getSpeakerList()

获取扬声器设备列表获取系统中可用的扬声器设备列表

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { getSpeakerList, speakerList } = useDeviceState();

// 获取扬声器列表
try {
  await getSpeakerList();
  console.log('扬声器列表:', speakerList.value);
} catch (error) {
  console.error('获取扬声器列表失败:', error);
}

setCurrentSpeaker

function setCurrentSpeaker(deviceConfig: { deviceId: string })

设置当前扬声器设备切换到指定的扬声器设备

参数

参数名	类型	必填	描述
deviceId	`string`	是	扬声器设备ID

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCurrentSpeaker } = useDeviceState();

// 切换扬声器设备
await setCurrentSpeaker({
  deviceId: 'default'
});

setAudioRoute

function setAudioRoute(output: AudioRoute)

设置音频路由设置音频输出的路由方式（扬声器/听筒等）

参数

参数名	类型	描述
output	`AudioRoute`	音频路由类型

示例

import { useDeviceState, AudioRoute } from 'tuikit-atomicx-vue3';

const { setAudioRoute } = useDeviceState();

// 设置为扬声器模式
await setAudioRoute(AudioRoute.Speakerphone);

// 设置为听筒模式
await setAudioRoute(AudioRoute.Earpiece);

startSpeakerTest

function startSpeakerTest(testConfig: { filePath: string })

开始扬声器测试播放指定音频文件进行扬声器测试

参数

参数名	类型	必填	描述
filePath	`string`	是	测试音频文件路径

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startSpeakerTest } = useDeviceState();

// 播放测试音频进行扬声器测试
await startSpeakerTest({
  filePath: '/assets/audio/test.mp3'
});

stopSpeakerTest

function stopSpeakerTest()

停止扬声器测试停止当前正在进行的扬声器设备测试

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopSpeakerTest } = useDeviceState();

// 停止扬声器测试
await stopSpeakerTest();

openLocalCamera

function openLocalCamera()

开启本地摄像头开启本地摄像头设备，在移动端会根据前后摄像头设置进行开启

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { openLocalCamera } = useDeviceState();

// 开启摄像头
try {
  await openLocalCamera();
  console.log('摄像头开启成功');
} catch (error) {
  console.error('摄像头开启失败:', error);
}

closeLocalCamera

function closeLocalCamera()

关闭本地摄像头关闭本地摄像头设备，停止视频采集

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { closeLocalCamera } = useDeviceState();

// 关闭摄像头
await closeLocalCamera();

getCameraList

function getCameraList()

获取摄像头设备列表获取系统中可用的摄像头设备列表

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { getCameraList, cameraList } = useDeviceState();

// 获取摄像头列表
try {
  await getCameraList();
  console.log('摄像头列表:', cameraList.value);
} catch (error) {
  console.error('获取摄像头列表失败:', error);
}

setCurrentCamera

function setCurrentCamera(deviceConfig: { deviceId: string })

设置当前摄像头设备切换到指定的摄像头设备

参数

参数名	类型	必填	描述
deviceId	`string`	是	摄像头设备ID

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCurrentCamera } = useDeviceState();

// 切换摄像头设备
await setCurrentCamera({
  deviceId: 'default'
});

switchCamera

function switchCamera(cameraConfig: { isFrontCamera: boolean })

切换前后摄像头在前置和后置摄像头之间切换

参数

参数名	类型	必填	描述
isFrontCamera	`boolean`	是	是否使用前置摄像头

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { switchCamera } = useDeviceState();

// 切换到前置摄像头
await switchCamera({
  isFrontCamera: true
});

switchMirror

function switchMirror(mirrorConfig: { mirror: MirrorType })

切换视频镜像模式设置视频画面的镜像效果

参数

参数名	类型	必填	描述
mirror	`MirrorType`	是	镜像类型

示例

import { useDeviceState, MirrorType } from 'tuikit-atomicx-vue3';

const { switchMirror } = useDeviceState();

// 设置视频镜像模式
await switchMirror({
  mirror: MirrorType.Enable
});

updateVideoQuality

function updateVideoQuality(qualityParams: { quality: VideoQuality })

更新视频质量更新视频混流的质量参数

参数

参数名	类型	必填	描述
quality	`VideoQuality`	是	视频质量等级

示例

import { useDeviceState, VideoQuality } from 'tuikit-atomicx-vue3';

const { updateVideoQuality } = useDeviceState();

// 设置视频质量为高清720P
await updateVideoQuality({
  quality: VideoQuality.HD720P
});

startCameraDeviceTest

function startCameraDeviceTest(testConfig: { view: string })

开始摄像头设备测试在指定视图中显示摄像头预览

参数

参数名	类型	必填	描述
view	`string`	是	预览视图的DOM元素ID

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startCameraDeviceTest } = useDeviceState();

// 在指定DOM元素中预览摄像头
await startCameraDeviceTest({
  view: 'camera-preview-container'
});

startScreenShare

function startScreenShare(shareConfig?: { screenAudio?: boolean; view?: string })

开始屏幕分享开始分享屏幕内容，可选择是否包含系统音频

参数

参数名	类型	必填	描述
screenAudio	`boolean`	否	是否包含系统音频
view	`string`	否	屏幕分享预览视图的DOM元素ID

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startScreenShare } = useDeviceState();

// 开始屏幕分享，包含系统音频
await startScreenShare({
  screenAudio: true,
  view: 'screen-share-container'
});

stopScreenShare

function stopScreenShare()

停止屏幕分享停止当前的屏幕分享

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopScreenShare } = useDeviceState();

// 停止屏幕分享
await stopScreenShare();

stopCameraDeviceTest

function stopCameraDeviceTest()

停止摄像头设备测试停止当前正在进行的摄像头设备测试

示例

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopCameraDeviceTest } = useDeviceState();

// 停止摄像头测试
await stopCameraDeviceTest();

screenCaptureStopped

function screenCaptureStopped()

屏幕分享停止回调当屏幕分享停止时的回调函数

示例

// 内部使用，当屏幕分享停止时自动调用
screenCaptureStopped();

LiveListState

📺 直播列表管理模块

核心功能：管理直播间的完整生命周期，包括创建、加入、离开、结束等核心业务流程，支持直播列表的分页获取和实时更新。

技术特点：支持分页加载、实时状态同步、直播信息动态更新，采用响应式数据管理，确保UI与数据状态实时同步。新增liveList和liveListCursor响应式数据，提供fetchLiveList接口函数。

业务价值：为直播平台提供核心的直播间管理能力，支持大规模并发直播场景，是直播业务的基础设施。

应用场景：直播列表展示、直播间创建、直播状态管理、直播数据统计等核心业务场景。

响应式数据

currentLive

const currentLive: Ref<LiveInfo | null>

转换TUILiveInfo为LiveInfo格式将TUIRoomEngine返回的直播信息转换为应用内部使用的LiveInfo格式 @param {TUILiveInfo} liveInfo - TUIRoomEngine返回的直播信息 @returns {LiveInfo} 转换后的直播信息对象

类型: Ref<LiveInfo | null>

示例

const tuiLiveInfo = await roomEngine.getLiveInfo();
const liveInfo = getLiveInfo(tuiLiveInfo);
console.log('转换后的直播信息:', liveInfo);

liveList

const liveList: Ref<any>

直播列表数据，包含所有直播间的信息存储当前获取到的所有直播间信息列表

类型: Ref<any>

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { liveList } = useLiveListState();

// 监听数据变化
watch(liveList, (newValue) => {
  console.log('liveList 更新:', newValue);
});

// 直接访问数据
console.log('当前 liveList:', liveList.value);

liveListCursor

const liveListCursor: Ref<any>

直播列表分页游标，用于获取下一页数据用于分页获取直播列表的游标标识

类型: Ref<any>

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { liveListCursor } = useLiveListState();

// 监听数据变化
watch(liveListCursor, (newValue) => {
  console.log('liveListCursor 更新:', newValue);
});

// 直接访问数据
console.log('当前 liveListCursor:', liveListCursor.value);

接口函数

createLive

function createLive(liveParams: CreateLiveParams)

创建直播间创建一个新的直播间，支持设置直播间名称、封面、背景、麦位模式等配置

参数 (CreateLiveParams)

参数名	类型	必填	描述
liveId	`string`	是	直播间ID
liveName	`string`	是	直播间名称
notice	`string`	否	直播间公告
isMessageDisableForAllUser	`boolean`	否	是否禁止所有用户发送消息
isGiftEnabled	`boolean`	否	是否启用礼物功能
isLikeEnabled	`boolean`	否	是否启用点赞功能
isPublicVisible	`boolean`	否	是否公开可见
isSeatEnabled	`boolean`	否	是否启用麦位功能
keepOwnerOnSeat	`boolean`	否	是否保持房主在麦位上
seatLayoutTemplateId	`number`	否	麦位布局模板ID
maxSeatCount	`number`	否	最大麦位数量
seatMode	`TUISeatMode`	否	麦位模式
coverUrl	`string`	否	直播间封面URL
backgroundUrl	`string`	否	直播间背景URL
categoryList	`Array<number>`	否	分类列表
activityStatus	`number`	否	活动状态

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { createLive } = useLiveListState();

// Create a live room with custom settings
await createLive({
  liveId: 'live_room_123456',
  liveName: 'My Live Room',
  coverUrl: 'https://example.com/cover.jpg',
  backgroundUrl: 'https://example.com/bg.jpg',
  isSeatEnabled: true,
  maxSeatCount: 8,
  isPublicVisible: true,
  isGiftEnabled: true
});

joinLive

function joinLive(joinParams: JoinLiveParams)

加入直播间通过直播间ID加入指定的直播间

参数 (JoinLiveParams)

参数名	类型	必填	描述
liveId	`string`	是	直播间ID

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { joinLive } = useLiveListState();

// Join a live room by ID
await joinLive({
  liveId: 'live_room_123456'
});

leaveLive

function leaveLive()

离开直播间退出当前加入的直播间，清空直播间状态

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { leaveLive } = useLiveListState();

// 离开直播间
try {
  await leaveLive();
  console.log('成功离开直播间');
} catch (error) {
  console.error('离开直播间失败:', error);
}

endLive

function endLive()

结束直播主播结束当前直播，销毁直播间

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { endLive } = useLiveListState();

// 结束直播（主播操作）
try {
  await endLive();
  console.log('直播已结束');
} catch (error) {
  console.error('结束直播失败:', error);
}

updateLiveInfo

function updateLiveInfo(updateParams: UpdateLiveInfoParams)

更新直播间信息更新直播间的基本信息，如封面、背景、分类等

参数 (UpdateLiveInfoParams)

参数名	类型	必填	描述
liveId	`string`	否	直播间ID
activityStatus	`number`	否	活动状态
categoryList	`Array<number>`	否	分类列表
coverUrl	`string`	否	直播间封面URL
backgroundUrl	`string`	否	直播间背景URL
isPublicVisible	`boolean`	否	是否公开可见
layoutTemplate	`number`	否	布局模板

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { updateLiveInfo } = useLiveListState();

// Update live room info
await updateLiveInfo({
  coverUrl: 'https://example.com/new-cover.jpg',
  backgroundUrl: 'https://example.com/new-bg.jpg',
  categoryList: [1, 2],
  isPublicVisible: true,
  activityStatus: 1
});

queryMetaData

function queryMetaData(queryParams: { keys: string[] })

查询元数据查询直播间的自定义元数据信息

参数

参数名	类型	必填	描述
keys	`string[]`	是	要查询的元数据键名列表

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { queryMetaData } = useLiveListState();

// Query metadata by keys
await queryMetaData({
  keys: ['roomTitle', 'announcement', 'customData']
});

updateLiveMetaData

function updateLiveMetaData(metaParams: { metaData: Record<string, string> })

更新直播间元数据更新直播间的自定义元数据

参数

参数名	类型	必填	描述
metaData	`Record<string, string>`	是	要更新的元数据键值对

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { updateLiveMetaData } = useLiveListState();

// Update live room metadata
await updateLiveMetaData({
  metaData: {
    roomTitle: 'New Room Title',
    announcement: 'Welcome to my live room!'
  }
});

fetchLiveList

function fetchLiveList(listParams: { category?: string; cursor?: string; count?: number })

获取直播列表支持分页获取直播列表，可指定游标和数量进行分页查询

参数

参数名	类型	必填	默认值	描述
category	`string`	否	-	直播间分类
cursor	`string`	否	''	分页游标，首次获取传空字符串
count	`number`	否	20	每次获取的数量

示例

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { fetchLiveList, liveListCursor } = useLiveListState();

// First fetch - get initial list
await fetchLiveList({
  cursor: '',
  count: 20
});

// Load more - use cursor for pagination
await fetchLiveList({
  cursor: liveListCursor.value,
  count: 20
});

LiveSeatState

🪑 直播间座位管理模块

核心功能：实现多人连麦场景下的座位控制，支持复杂的座位状态管理和音视频设备控制，包括上麦、下麦、座位锁定等完整功能。

技术特点：基于WebRTC技术，支持多路音视频流管理，提供座位锁定、设备控制、权限管理等高级功能。新增seatList、canvas、speakingUsers、networkQualities响应式数据，以及完整的座位操作接口。

业务价值：为多人互动直播提供核心技术支撑，支持PK、连麦、多人游戏等丰富的互动场景。

应用场景：多人连麦、主播PK、互动游戏、在线教育、会议直播等需要多人音视频互动的场景。

响应式数据

seatList

const seatList: Ref<any>

麦位列表，包含所有麦位的状态和用户信息存储当前直播间的所有麦位信息

类型: Ref<any>

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { seatList } = useLiveSeatState();

// 监听数据变化
watch(seatList, (newValue) => {
  console.log('seatList 更新:', newValue);
});

// 直接访问数据
console.log('当前 seatList:', seatList.value);

canvas

const canvas: Ref<any>

画布配置，用于视频渲染和布局管理视频渲染的画布配置信息

类型: Ref<any>

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { canvas } = useLiveSeatState();

// 监听数据变化
watch(canvas, (newValue) => {
  console.log('canvas 更新:', newValue);
});

// 直接访问数据
console.log('当前 canvas:', canvas.value);

speakingUsers

const speakingUsers: Ref<any>

正在发言的用户列表当前正在发言的用户信息列表

类型: Ref<any>

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { speakingUsers } = useLiveSeatState();

// 监听数据变化
watch(speakingUsers, (newValue) => {
  console.log('speakingUsers 更新:', newValue);
});

// 直接访问数据
console.log('当前 speakingUsers:', speakingUsers.value);

networkQualities

const networkQualities: Ref<any>

网络质量信息，包含各用户的网络状态各用户的网络连接质量信息

类型: Ref<any>

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { networkQualities } = useLiveSeatState();

// 监听数据变化
watch(networkQualities, (newValue) => {
  console.log('networkQualities 更新:', newValue);
});

// 直接访问数据
console.log('当前 networkQualities:', networkQualities.value);

接口函数

takeSeat

function takeSeat(seatParams: { seatIndex: number })

用户上麦用户申请上到指定麦位，普通用户直接上麦，管理员需要使用其他方式

参数

参数名	类型	必填	描述
seatIndex	`number`	是	麦位索引

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { takeSeat } = useLiveSeatState();

// Take seat at index 1
await takeSeat({
  seatIndex: 1
});

leaveSeat

function leaveSeat(seatParams: { seatIndex: number })

用户下麦用户主动离开当前麦位

参数

参数名	类型	必填	描述
seatIndex	`number`	是	麦位索引

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { leaveSeat } = useLiveSeatState();

// Leave seat at index 1
await leaveSeat({
  seatIndex: 1
});

lockSeat

function lockSeat(lockParams: { seatIndex: number })

锁定麦位管理员锁定指定麦位，防止用户上麦

参数

参数名	类型	必填	描述
seatIndex	`number`	是	麦位索引

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { lockSeat } = useLiveSeatState();

// Lock seat at index 2
await lockSeat({
  seatIndex: 2
});

unLockSeat

function unLockSeat(unlockParams: { seatIndex: number })

解锁麦位管理员解锁指定麦位，允许用户上麦

参数

参数名	类型	必填	描述
seatIndex	`number`	是	麦位索引

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { unLockSeat } = useLiveSeatState();

// Unlock seat at index 2
await unLockSeat({
  seatIndex: 2
});

kickUserOutOfSeat

function kickUserOutOfSeat(kickParams: { seatIndex: number; userId: string })

踢用户下麦管理员强制将指定用户踢下麦位

参数

参数名	类型	必填	描述
seatIndex	`number`	是	麦位索引
userId	`string`	是	用户ID

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { kickUserOutOfSeat } = useLiveSeatState();

// Kick user out of seat
await kickUserOutOfSeat({
  seatIndex: 1,
  userId: 'user_123'
});

moveUserToSeat

function moveUserToSeat(moveParams: { userId: string; targetIndex: number; policy: MoveSeatPolicy })

移动用户到指定麦位管理员将用户移动到指定的麦位，支持不同的移动策略

参数

参数名	类型	必填	描述
userId	`string`	是	要移动的用户ID
targetIndex	`number`	是	目标麦位索引
policy	`MoveSeatPolicy`	是	移动策略：AbortWhenOccupied(0) - 目标麦位被占用时中止；ForceReplace(1) - 强制替换目标麦位用户；SwapPosition(2) - 与目标麦位用户交换位置

示例

import { useLiveSeatState, MoveSeatPolicy } from 'tuikit-atomicx-vue3';

const { moveUserToSeat } = useLiveSeatState();

// Move user to target seat with force replace policy
await moveUserToSeat({
  userId: 'user_123',
  targetIndex: 3,
  policy: MoveSeatPolicy.ForceReplace
});

openRemoteCamera

function openRemoteCamera(params: { userId: string; policy: DeviceControlPolicy })

开启远端摄像头管理员解锁指定用户的摄像头，允许用户开启摄像头

参数

参数名	类型	必填	描述
userId	`string`	是	要开启摄像头的用户ID
policy	`DeviceControlPolicy`	是	设备控制策略：UnlockOnly(1) - 仅解锁设备

示例

import { useLiveSeatState, DeviceControlPolicy } from 'tuikit-atomicx-vue3';

const { openRemoteCamera } = useLiveSeatState();

// Allow user to open camera
try {
  await openRemoteCamera({
    userId: 'user123',
    policy: DeviceControlPolicy.UnlockOnly
  });
  console.log('Camera unlocked');
} catch (error) {
  console.error('Failed to unlock camera:', error);
}

closeRemoteCamera

function closeRemoteCamera(params: { userId: string })

关闭远端摄像头管理员强制关闭指定用户的摄像头

参数

参数名	类型	必填	描述
userId	`string`	是	要关闭摄像头的用户ID

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { closeRemoteCamera } = useLiveSeatState();

// Close remote user's camera
try {
  await closeRemoteCamera({ userId: 'user123' });
  console.log('Camera closed');
} catch (error) {
  console.error('Failed to close camera:', error);
}

openRemoteMicrophone

function openRemoteMicrophone(params: { userId: string; policy: DeviceControlPolicy })

开启远端麦克风管理员解锁指定用户的麦克风，允许用户开启麦克风

参数

参数名	类型	必填	描述
userId	`string`	是	要开启麦克风的用户ID
policy	`DeviceControlPolicy`	是	设备控制策略：UnlockOnly(1) - 仅解锁设备

示例

import { useLiveSeatState, DeviceControlPolicy } from 'tuikit-atomicx-vue3';

const { openRemoteMicrophone } = useLiveSeatState();

// Allow user to open microphone
try {
  await openRemoteMicrophone({
    userId: 'user123',
    policy: DeviceControlPolicy.UnlockOnly
  });
  console.log('Microphone unlocked');
} catch (error) {
  console.error('Failed to unlock microphone:', error);
}

closeRemoteMicrophone

function closeRemoteMicrophone(params: { userId: string })

关闭远端麦克风管理员强制关闭指定用户的麦克风

参数

参数名	类型	必填	描述
userId	`string`	是	要关闭麦克风的用户ID

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { closeRemoteMicrophone } = useLiveSeatState();

// Close remote user's microphone
try {
  await closeRemoteMicrophone({ userId: 'user123' });
  console.log('Microphone closed');
} catch (error) {
  console.error('Failed to close microphone:', error);
}

muteMicrophone

function muteMicrophone(): Promise<void>

静音本地麦克风用户静音自己的麦克风

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { muteMicrophone } = useLiveSeatState();

// Mute local microphone
await muteMicrophone();
console.log('Microphone muted');

unmuteMicrophone

function unmuteMicrophone(): Promise<void>

取消静音本地麦克风用户取消静音自己的麦克风

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { unmuteMicrophone } = useLiveSeatState();

// Unmute local microphone
await unmuteMicrophone();
console.log('Microphone unmuted');

startPlayStream

function startPlayStream(params: { view: string }): Promise<any>

开始播放流开始播放麦位的音视频流到指定容器

参数

参数名	类型	必填	描述
view	`string`	是	视频容器元素ID

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { startPlayStream } = useLiveSeatState();

// Start playing stream to specified container
try {
  await startPlayStream({ view: 'video-container' });
  console.log('Stream playing');
} catch (error) {
  console.error('Failed to play stream:', error);
}

stopPlayStream

function stopPlayStream(): Promise<any>

停止播放流停止播放麦位的音视频流

示例

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { stopPlayStream } = useLiveSeatState();

// Stop playing stream
try {
  await stopPlayStream();
  console.log('Stream stopped');
} catch (error) {
  console.error('Failed to stop stream:', error);
}

LiveAudienceState

👥 直播间观众管理模块

核心功能：管理直播间观众列表，提供观众权限控制、管理员设置等直播间秩序维护功能，支持实时观众统计。

技术特点：支持实时观众列表更新、权限分级管理、批量操作等高级功能，确保直播间秩序和用户体验。新增audienceList和audienceCount响应式数据。

业务价值：为直播平台提供完整的观众管理解决方案，支持大规模观众场景下的秩序维护。

应用场景：观众管理、权限控制、直播间秩序维护、观众互动管理等核心业务场景。

响应式数据

audienceList

const audienceList: Ref<any>

观众列表，包含直播间所有观众的信息当前直播间的观众用户列表

类型: Ref<any>

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { audienceList } = useLiveAudienceState();

// 监听数据变化
watch(audienceList, (newValue) => {
  console.log('audienceList 更新:', newValue);
});

// 直接访问数据
console.log('当前 audienceList:', audienceList.value);

audienceCount

const audienceCount: Ref<any>

观众总数统计当前直播间的观众总人数

类型: Ref<any>

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { audienceCount } = useLiveAudienceState();

// 监听数据变化
watch(audienceCount, (newValue) => {
  console.log('audienceCount 更新:', newValue);
});

// 直接访问数据
console.log('当前 audienceCount:', audienceCount.value);

接口函数

fetchAudienceList

function fetchAudienceList(): Promise<AudienceInfo[]>

获取观众列表从房间引擎获取当前房间的用户列表，过滤掉主播，并更新观众列表状态

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { fetchAudienceList, audienceList } = useLiveAudienceState();

// Fetch audience list
try {
  const list = await fetchAudienceList();
  console.log('Audience list:', list);
} catch (error) {
  console.error('Failed to fetch audience list:', error);
}

setAdministrator

function setAdministrator(adminParams: { userId: string })

设置管理员将指定用户设置为房间管理员，管理员拥有更高的权限

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { setAdministrator } = useLiveAudienceState();

// Set user as administrator
await setAdministrator({
  userId: 'user_123'
});

revokeAdministrator

function revokeAdministrator(revokeParams: { userId: string })

撤销管理员权限将指定用户的管理员权限撤销，恢复为普通用户

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { revokeAdministrator } = useLiveAudienceState();

// Revoke administrator privileges
await revokeAdministrator({
  userId: 'user_123'
});

kickUserOutOfRoom

function kickUserOutOfRoom(kickParams: { userId: string })

将用户踢出房间将指定用户从当前房间中移除，该用户将无法继续参与直播

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { kickUserOutOfRoom } = useLiveAudienceState();

// Kick user out of room
await kickUserOutOfRoom({
  userId: 'user_123'
});

disableSendMessage

function disableSendMessage(muteParams: { userId: string; duration?: number })

禁用/启用用户发送消息管理员可以禁用或启用指定用户在房间中发送消息的权限

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID
duration	`number`	否	禁言时长（秒）

示例

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { disableSendMessage } = useLiveAudienceState();

// Disable user from sending messages for 10 minutes
await disableSendMessage({
  userId: 'user_123',
  duration: 600
});

LiveMonitorState

📊 直播监控管理模块

核心功能：提供直播间实时监控功能，包括直播状态监控、数据统计、异常检测等核心监控能力，支持多直播间监控。

技术特点：支持实时数据采集、多维度监控指标、智能告警机制，确保直播服务的稳定性和可靠性。新增monitorLiveInfoList响应式数据，优化监控接口。

业务价值：为直播平台提供全方位的监控保障，及时发现和处理异常情况，提升服务质量。

应用场景：直播质量监控、性能分析、异常告警、数据统计等运营管理场景。

响应式数据

monitorLiveInfoList

const monitorLiveInfoList: Ref<any>

监控的直播间信息列表正在监控的直播间信息列表

类型: Ref<any>

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { monitorLiveInfoList } = useLiveMonitorState();

// 监听数据变化
watch(monitorLiveInfoList, (newValue) => {
  console.log('monitorLiveInfoList 更新:', newValue);
});

// 直接访问数据
console.log('当前 monitorLiveInfoList:', monitorLiveInfoList.value);

接口函数

init

function init(config: InitConfig)

初始化直播监控模块初始化监控配置和播放器管理器，必须在使用其他功能前调用

参数

参数名	类型	必填	描述
config	`InitConfig`	是	初始化配置对象
baseUrl	`string`	是	API服务器基础URL
account	`Account`	是	账户信息，包含 userId 和 userSig

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { init } = useLiveMonitorState();

// 初始化监控模块
init({
  baseUrl: 'https://api.example.com',
  account: {
    userId: 'user123',
    userSig: 'signature'
  }
});

getLiveList

function getLiveList(page: number, pageSize: number): Promise<MonitorLiveInfo[]>

获取直播列表分页获取直播间列表，用于监控管理

参数

参数名	类型	必填	描述
page	`number`	是	页码，从1开始
pageSize	`number`	是	每页数量

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { getLiveList } = useLiveMonitorState();

// 获取第一页直播列表
try {
  const liveList = await getLiveList(1, 20);
  console.log('直播列表:', liveList);
} catch (error) {
  console.error('获取直播列表失败:', error);
}

// 获取更多页
const moreLives = await getLiveList(2, 20);

closeRoom

function closeRoom(liveId: string): Promise<void>

关闭直播间强制关闭指定的直播间，并从监控列表中移除

参数

参数名	类型	必填	描述
liveId	`string`	是	要关闭的直播间ID

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { closeRoom } = useLiveMonitorState();

// 关闭违规直播间
try {
  await closeRoom('live_123');
  console.log('直播间已关闭');
} catch (error) {
  console.error('关闭直播间失败:', error);
}

sendMessage

function sendMessage(liveId: string, message: MonitorMessage): void

发送监控消息向指定直播间发送监控消息（一期暂不支持）

参数

参数名	类型	必填	描述
liveId	`string`	是	直播间ID
message	`MonitorMessage`	是	要发送的消息

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { sendMessage } = useLiveMonitorState();

// 发送警告消息（暂不支持）
sendMessage('live_123', {
  type: 'warning',
  content: '请遵守直播规范'
});

startPlay

function startPlay(liveId: string, viewId: string): Promise<void>

开始播放直播开始播放指定直播间的内容，创建播放器并绑定事件监听

参数

参数名	类型	必填	描述
liveId	`string`	是	直播间ID
viewId	`string`	是	视频容器元素ID

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { startPlay } = useLiveMonitorState();

// 开始播放直播流
try {
  await startPlay('live_123', 'video-container');
  console.log('已开始播放直播');
} catch (error) {
  console.error('播放失败:', error);
}

stopPlay

function stopPlay(liveId: string): Promise<void>

停止播放直播停止播放指定直播间的内容，销毁播放器并清理资源

参数

参数名	类型	必填	描述
liveId	`string`	是	直播间ID

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { stopPlay } = useLiveMonitorState();

// 停止播放直播流
try {
  await stopPlay('live_123');
  console.log('已停止播放');
} catch (error) {
  console.error('停止播放失败:', error);
}

muteLiveAudio

function muteLiveAudio(liveId: string, mute: boolean): Promise<void>

控制直播音频静音控制指定直播间的音频静音状态

参数

参数名	类型	必填	描述
liveId	`string`	是	直播间ID
mute	`boolean`	是	是否静音，true为静音，false为取消静音

示例

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { muteLiveAudio } = useLiveMonitorState();

// 静音直播音频
await muteLiveAudio('live_123', true);

// 取消静音直播音频
await muteLiveAudio('live_123', false);

CoGuestState

🎤 连麦嘉宾管理模块

核心功能：处理观众与主播之间的连麦互动，管理连麦申请、邀请、接受、拒绝等完整的连麦流程，支持连麦状态管理。

技术特点：基于实时音视频技术，支持连麦状态实时同步、音视频质量自适应、网络状况监控等高级功能。新增connected、invitees、applicants、candidates响应式数据和applyForSeat接口。

业务价值：为直播平台提供观众参与互动的核心能力，增强用户粘性和直播趣味性。

应用场景：观众连麦、互动问答、在线K歌、游戏直播等需要观众参与的互动场景。

响应式数据

candidates

const candidates: Ref<any>

候选连麦用户列表可邀请连麦的候选用户列表，排除自己、已连麦用户、已邀请用户和申请者

类型: Ref<any>

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { candidates } = useCoGuestState();

// 监听数据变化
watch(candidates, (newValue) => {
  console.log('candidates 更新:', newValue);
});

// 直接访问数据
console.log('当前 candidates:', candidates.value);

connected

const connected: Ref<any>

连麦连接状态当前已连麦用户的信息列表

类型: Ref<any>

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { connected } = useCoGuestState();

// 监听数据变化
watch(connected, (newValue) => {
  console.log('connected 更新:', newValue);
});

// 直接访问数据
console.log('当前 connected:', connected.value);

invitees

const invitees: Ref<any>

被邀请的用户列表当前已发出连麦邀请的用户列表

类型: Ref<any>

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { invitees } = useCoGuestState();

// 监听数据变化
watch(invitees, (newValue) => {
  console.log('invitees 更新:', newValue);
});

// 直接访问数据
console.log('当前 invitees:', invitees.value);

applicants

const applicants: Ref<any>

申请连麦的用户列表当前申请连麦的用户信息列表

类型: Ref<any>

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { applicants } = useCoGuestState();

// 监听数据变化
watch(applicants, (newValue) => {
  console.log('applicants 更新:', newValue);
});

// 直接访问数据
console.log('当前 applicants:', applicants.value);

接口函数

applyForSeat

function applyForSeat(options: { seatIndex: number; timeout: number }): Promise<void>

申请连麦座位向主播申请连麦座位，发起连麦请求并等待主播响应

参数

参数名	类型	必填	描述
seatIndex	`number`	是	座位索引，指定要申请的座位位置
timeout	`number`	是	超时时间（毫秒），超过该时间未响应则自动取消

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { applyForSeat } = useCoGuestState();

// 申请连麦座位
try {
  await applyForSeat({
    seatIndex: 1,
    timeout: 30000
  });
  console.log('连麦申请已发送');
} catch (error) {
  console.error('申请座位失败:', error);
}

cancelApplication

function cancelApplication(): Promise<void>

取消连麦申请取消当前用户发起的连麦申请，撤回等待主播响应的请求

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { cancelApplication } = useCoGuestState();

// 取消连麦申请
await cancelApplication();
console.log('连麦申请已取消');

acceptApplication

function acceptApplication(options: { userId: string }): Promise<void>

接受连麦申请主播接受观众的连麦申请，允许观众上麦

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID，指定要接受连麦申请的用户

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { acceptApplication } = useCoGuestState();

// 接受连麦申请
await acceptApplication({ userId: 'user123' });
console.log('连麦申请已接受');

rejectApplication

function rejectApplication(options: { userId: string }): Promise<void>

拒绝连麦申请主播拒绝观众的连麦申请，不允许观众上麦

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID，指定要拒绝连麦申请的用户

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { rejectApplication } = useCoGuestState();

// 拒绝连麦申请
await rejectApplication({ userId: 'user123' });
console.log('连麦申请已拒绝');

inviteToSeat

function inviteToSeat(options: { userId: string; seatIndex: number; timeout: number }): Promise<void>

邀请用户连麦主播主动邀请观众连麦，向指定用户发送连麦邀请

参数

参数名	类型	必填	描述
userId	`string`	是	用户ID，指定要邀请的用户
seatIndex	`number`	是	座位索引，指定连麦的座位位置
timeout	`number`	是	超时时间（毫秒），超过该时间未响应则自动取消

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { inviteToSeat } = useCoGuestState();

// 邀请用户连麦
try {
  await inviteToSeat({
    userId: 'user123',
    seatIndex: 1,
    timeout: 30000
  });
  console.log('连麦邀请已发送');
} catch (error) {
  console.error('邀请失败:', error);
}

cancelInvitation

function cancelInvitation(options: { inviteeId: string }): Promise<void>

取消连麦邀请主播取消已发送的连麦邀请，撤回等待用户响应的邀请

参数

参数名	类型	必填	描述
inviteeId	`string`	是	被邀请用户ID，指定要取消邀请的用户

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { cancelInvitation } = useCoGuestState();

// 取消连麦邀请
await cancelInvitation({ inviteeId: 'user123' });
console.log('连麦邀请已取消');

acceptInvitation

function acceptInvitation(options: { inviterId: string }): Promise<void>

接受连麦邀请观众接受主播的连麦邀请，同意上麦连麦

参数

参数名	类型	必填	描述
inviterId	`string`	是	邀请者用户ID，指定发送邀请的主播用户

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { acceptInvitation } = useCoGuestState();

// 接受连麦邀请
await acceptInvitation({ inviterId: 'host123' });
console.log('连麦邀请已接受');

rejectInvitation

function rejectInvitation(options: { inviterId: string }): Promise<void>

拒绝连麦邀请观众拒绝主播的连麦邀请，不同意上麦连麦

参数

参数名	类型	必填	描述
inviterId	`string`	是	邀请者用户ID，指定发送邀请的主播用户

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { rejectInvitation } = useCoGuestState();

// 拒绝连麦邀请
await rejectInvitation({ inviterId: 'host123' });
console.log('连麦邀请已拒绝');

disConnect

function disConnect(): Promise<void>

断开连麦连接连麦嘉宾主动断开连麦连接，离开座位

示例

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { disConnect } = useCoGuestState();

// 断开连麦连接
await disConnect();
console.log('连麦连接已断开');

CoHostState

🤝 连麦主播管理模块

核心功能：实现主播间的连麦功能，支持主播邀请、连麦申请、连麦状态管理等主播间互动功能，提供完整的主播连麦流程。

技术特点：支持多主播音视频同步、画中画显示、音视频质量优化等高级技术，确保连麦体验的流畅性。新增coHostStatus、connected、applicant、invitees、candidates响应式数据和完整的连麦控制接口。

业务价值：为直播平台提供主播间协作的核心能力，支持PK、合作直播等高级业务场景。

应用场景：主播PK、合作直播、跨平台连麦、主播互动等高级直播场景。

响应式数据

coHostStatus

const coHostStatus: Ref<any>

连麦主播状态当前用户的连麦状态，根据是否在已连麦列表中判断

类型: Ref<any>

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { coHostStatus } = useCoHostState();

// 监听数据变化
watch(coHostStatus, (newValue) => {
  console.log('coHostStatus 更新:', newValue);
});

// 直接访问数据
console.log('当前 coHostStatus:', coHostStatus.value);

connected

const connected: Ref<any>

连麦连接状态当前已连麦用户的信息列表

类型: Ref<any>

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { connected } = useCoHostState();

// 监听数据变化
watch(connected, (newValue) => {
  console.log('connected 更新:', newValue);
});

// 直接访问数据
console.log('当前 connected:', connected.value);

applicant

const applicant: Ref<any>

申请连麦的主播信息当前申请连麦的主播用户信息

类型: Ref<any>

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { applicant } = useCoHostState();

// 监听数据变化
watch(applicant, (newValue) => {
  console.log('applicant 更新:', newValue);
});

// 直接访问数据
console.log('当前 applicant:', applicant.value);

invitees

const invitees: Ref<any>

被邀请的用户列表当前已发出连麦邀请的用户列表

类型: Ref<any>

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { invitees } = useCoHostState();

// 监听数据变化
watch(invitees, (newValue) => {
  console.log('invitees 更新:', newValue);
});

// 直接访问数据
console.log('当前 invitees:', invitees.value);

candidates

const candidates: Ref<any>

候选用户列表可邀请连麦的候选用户列表

类型: Ref<any>

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { candidates } = useCoHostState();

// 监听数据变化
watch(candidates, (newValue) => {
  console.log('candidates 更新:', newValue);
});

// 直接访问数据
console.log('当前 candidates:', candidates.value);

接口函数

requestHostConnection

function requestHostConnection(params: { liveId: string; layoutTemplate: CoHostLayoutTemplate; timeout: number; extensionInfo: string }): Promise<Map<string, TUIConnectionCode>>

请求主播连麦向指定直播间发起连麦请求，可以配置布局模板和超时时间

参数

参数名	类型	必填	描述
liveId	`string`	是	目标直播间ID
layoutTemplate	`CoHostLayoutTemplate`	是	连麦布局模板
timeout	`number`	是	请求超时时间（秒）
extensionInfo	`string`	是	扩展信息

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { requestHostConnection } = useCoHostState();

// 发起连麦请求
try {
  const result = await requestHostConnection({
    liveId: 'live_123',
    layoutTemplate: CoHostLayoutTemplate.Grid,
    timeout: 30,
    extensionInfo: JSON.stringify({ type: 'music' })
  });

  const code = result.get('live_123');
  if (code === TUIConnectionCode.TUIConnectionCodeSuccess) {
    console.log('连麦请求发送成功');
  }
} catch (error) {
  console.error('连麦请求异常:', error);
}

cancelHostConnection

function cancelHostConnection(params: { liveId: string }): Promise<void>

取消连麦请求取消已发出的连麦请求

参数

参数名	类型	必填	描述
liveId	`string`	是	目标直播间ID

示例

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { cancelHostConnection } = useCoHostState();

// 取消连麦请求
try {
  await cancelHostConnection({
    liveId: 'live_123'
  });
  console.log('连麦请求已取消');
} catch (error) {
  console.error('取消连麦请求失败:', error);
}

acceptHostConnection

function acceptHostConnection(params: { liveId: string }): Promise<void>

接受连麦请求接受收到的连麦请求，开始连麦

参数

参数名	类型	必填	描述
liveId	`string`	是	发起连麦的直播间ID

示例

import { useCoHostState, CoHostEvent } from 'tuikit-atomicx-vue3';

const { acceptHostConnection, subscribeEvent } = useCoHostState();

// 监听连麦请求并接受
subscribeEvent(CoHostEvent.onCoHostRequestReceived, async (eventInfo) => {
  const { inviter } = eventInfo;
  console.log(`收到来自 ${inviter.userName} 的连麦请求`);

  // 接受连麦请求
  try {
    await acceptHostConnection({ liveId: inviter.liveId });
    console.log('已接受连麦请求');
  } catch (error) {
    console.error('接受连麦请求失败:', error);
  }
});

rejectHostConnection

function rejectHostConnection(params: { liveId: string }): Promise<void>

拒绝连麦请求拒绝收到的连麦请求

参数

参数名	类型	必填	描述
liveId	`string`	是	发起连麦的直播间ID

示例

import { useCoHostState, CoHostEvent } from 'tuikit-atomicx-vue3';

const { rejectHostConnection, subscribeEvent } = useCoHostState();

// 监听连麦请求并拒绝
subscribeEvent(CoHostEvent.onCoHostRequestReceived, async (eventInfo) => {
  const { inviter } = eventInfo;
  console.log(`收到来自 ${inviter.userName} 的连麦请求`);

  // 拒绝连麦请求
  try {
    await rejectHostConnection({ liveId: inviter.liveId });
    console.log('已拒绝连麦请求');
  } catch (error) {
    console.error('拒绝连麦请求失败:', error);
  }
});

exitHostConnection

function exitHostConnection(): Promise<void>

退出连麦退出当前的连麦状态，断开连麦连接

示例

import { useCoHostState, CoHostStatus } from 'tuikit-atomicx-vue3';

const { exitHostConnection, coHostStatus } = useCoHostState();

// 退出连麦
const handleExitCoHost = async () => {
  if (coHostStatus.value === CoHostStatus.Connected) {
    try {
      await exitHostConnection();
      console.log('已退出连麦');
    } catch (error) {
      console.error('退出连麦失败:', error);
    }
  }
};

BattleState

⚔️ PK对战管理模块

核心功能：管理主播间的PK对战功能，包括对战邀请、接受、拒绝、结束等完整的PK流程，支持实时比分统计。

技术特点：支持实时对战状态同步、比分计算、对战结果统计等功能。新增battleScore响应式数据，提供完整的PK对战体验。

业务价值：为直播平台提供竞技互动功能，增强直播趣味性和用户参与度。

应用场景：主播PK、才艺比拼、游戏对战、互动竞技等娱乐场景。

响应式数据

currentBattleInfo

const currentBattleInfo: Ref<BattleInfo>

当前PK信息存储当前正在进行的PK的详细信息

类型: Ref<BattleInfo>

示例

import { useBattleState } from 'tuikit-atomicx-vue3';

const { currentBattleInfo } = useBattleState();

// 监听数据变化
watch(currentBattleInfo, (newValue) => {
  console.log('currentBattleInfo 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentBattleInfo:', currentBattleInfo.value);

battleUsers

const battleUsers: Ref<SeatUserInfo[]>

PK参与用户列表存储当前PK中所有参与用户的信息

类型: Ref<SeatUserInfo[]>

示例

import { useBattleState } from 'tuikit-atomicx-vue3';

const { battleUsers } = useBattleState();

// 监听数据变化
watch(battleUsers, (newValue) => {
  console.log('battleUsers 更新:', newValue);
});

// 直接访问数据
console.log('当前 battleUsers:', battleUsers.value);

battleScore

const battleScore: Ref<any>

PK对战的实时比分当前PK对战中双方的实时得分数据

类型: Ref<any>

示例

import { useBattleState } from 'tuikit-atomicx-vue3';

const { battleScore } = useBattleState();

// 监听数据变化
watch(battleScore, (newValue) => {
  console.log('battleScore 更新:', newValue);
});

// 直接访问数据
console.log('当前 battleScore:', battleScore.value);

接口函数

requestBattle

function requestBattle(options: { config: BattleConfig; userIdList: string[]; timeout: number }): Promise<void>

发起PK邀请向指定用户发起PK邀请，可以配置PK参数和超时时间

参数

参数名	类型	必填	描述
config	`BattleConfig`	是	PK配置信息，包含 duration（持续时间）、needResponse（是否需要响应）、extensionInfo（扩展信息）
userIdList	`string[]`	是	被邀请用户ID列表
timeout	`number`	是	邀请超时时间（秒）

示例

import { useBattleState } from 'tuikit-atomicx-vue3';

const { requestBattle } = useBattleState();

// 发起PK邀请
try {
  await requestBattle({
    config: {
      duration: 300, // 5分钟PK
      needResponse: true,
      extensionInfo: { theme: 'singing' }
    },
    userIdList: ['user123', 'user456'],
    timeout: 30 // 30秒超时
  });
  console.log('PK邀请发送成功');
} catch (error) {
  console.error('PK邀请发送失败:', error);
}

cancelBattleRequest

function cancelBattleRequest(options: { battleId: string; userIdList: string[] }): Promise<void>

取消PK邀请取消已发出的PK邀请

参数

参数名	类型	必填	描述
battleId	`string`	是	PK ID
userIdList	`string[]`	是	要取消邀请的用户ID列表

示例

import { useBattleState } from 'tuikit-atomicx-vue3';

const { cancelBattleRequest } = useBattleState();

// 取消PK邀请
try {
  await cancelBattleRequest({
    battleId: 'battle_123',
    userIdList: ['user123', 'user456']
  });
  console.log('PK邀请已取消');
} catch (error) {
  console.error('取消PK邀请失败:', error);
}

acceptBattle

function acceptBattle(options: { battleId: string }): Promise<void>

接受PK邀请接受收到的PK邀请，开始PK

参数

参数名	类型	必填	描述
battleId	`string`	是	PK ID

示例

import { useBattleState, BattleEvent } from 'tuikit-atomicx-vue3';

const { acceptBattle, subscribeEvent } = useBattleState();

// 监听PK邀请
subscribeEvent(BattleEvent.onBattleRequestReceived, async (eventInfo) => {
  const { battleId, inviter } = eventInfo;
  console.log(`收到来自 ${inviter.userName} 的PK邀请`);

  // 接受PK邀请
  try {
    await acceptBattle({ battleId });
    console.log('已接受PK邀请');
  } catch (error) {
    console.error('接受PK邀请失败:', error);
  }
});

rejectBattle

function rejectBattle(options: { battleId: string }): Promise<void>

拒绝PK邀请拒绝收到的PK邀请

参数

参数名	类型	必填	描述
battleId	`string`	是	PK ID

示例

import { useBattleState, BattleEvent } from 'tuikit-atomicx-vue3';

const { rejectBattle, subscribeEvent } = useBattleState();

// 监听PK邀请并拒绝
subscribeEvent(BattleEvent.onBattleRequestReceived, async (eventInfo) => {
  const { battleId, inviter } = eventInfo;
  console.log(`收到来自 ${inviter.userName} 的PK邀请`);

  // 拒绝PK邀请
  try {
    await rejectBattle({ battleId });
    console.log('已拒绝PK邀请');
  } catch (error) {
    console.error('拒绝PK邀请失败:', error);
  }
});

exitBattle

function exitBattle(options: { battleId: string }): Promise<void>

退出PK 退出当前正在进行的PK

参数

参数名	类型	必填	描述
battleId	`string`	是	PK ID

示例

import { useBattleState } from 'tuikit-atomicx-vue3';

const { exitBattle, currentBattleInfo } = useBattleState();

// 退出当前PK
const handleExitBattle = async () => {
  if (currentBattleInfo.value) {
    try {
      await exitBattle({
        battleId: currentBattleInfo.value.battleId
      });
      console.log('已退出PK');
    } catch (error) {
      console.error('退出PK失败:', error);
    }
  }
};

BarrageState

💬 弹幕消息管理模块

核心功能：处理直播间内的文本消息、自定义消息等弹幕功能，支持弹幕发送、消息状态同步等完整弹幕系统，提供本地提示功能。

技术特点：支持高并发消息处理、实时消息同步、消息过滤、表情包支持等高级功能。新增sendTextMessage、sendCustomMessage、appendLocalTip接口函数。

业务价值：为直播平台提供核心的互动能力，增强用户参与度和直播氛围。

应用场景：弹幕互动、消息管理、表情包、聊天室等社交互动场景。

响应式数据

messageList

const messageList: Ref<Barrage[]>

弹幕消息列表存储当前直播间的所有弹幕消息，包括文本消息和自定义消息

类型: Ref<Barrage[]>

示例

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { messageList } = useBarrageState();

// 监听数据变化
watch(messageList, (newValue) => {
  console.log('messageList 更新:', newValue);
});

// 直接访问数据
console.log('当前 messageList:', messageList.value);

接口函数

sendTextMessage

function sendTextMessage(options: { text: string; extensionInfo?: Record<string, string> }): Promise<void>

发送文本弹幕消息向当前直播间发送文本弹幕消息，支持扩展信息

参数

参数名	类型	必填	描述
text	`string`	是	要发送的文本内容
extensionInfo	`Record<string, string>`	否	扩展信息，可用于自定义弹幕样式等

示例

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { sendTextMessage } = useBarrageState();

// 发送普通文本消息
try {
  await sendTextMessage({
    text: '大家好，欢迎来到直播间！'
  });
  console.log('消息发送成功');
} catch (error) {
  console.error('消息发送失败:', error);
}

// 发送带扩展信息的文本消息
await sendTextMessage({
  text: '这是一条彩色弹幕',
  extensionInfo: {
    color: '#ff0000',
    fontSize: '16px'
  }
});

sendCustomMessage

function sendCustomMessage(options: { businessId: string; data: string }): Promise<void>

发送自定义弹幕消息向当前直播间发送自定义弹幕消息，用于发送特殊业务数据如礼物、点赞等

参数

参数名	类型	必填	描述
businessId	`string`	是	业务标识ID，用于区分不同类型的自定义消息
data	`string`	是	自定义数据内容，通常为JSON字符串

示例

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { sendCustomMessage } = useBarrageState();

// 发送礼物消息
try {
  await sendCustomMessage({
    businessId: 'gift',
    data: JSON.stringify({
      giftId: 1,
      giftName: '玫瑰花',
      count: 5,
      price: 10
    })
  });
  console.log('礼物消息发送成功');
} catch (error) {
  console.error('礼物消息发送失败:', error);
}

// 发送点赞消息
await sendCustomMessage({
  businessId: 'like',
  data: JSON.stringify({
    action: 'like',
    count: 1
  })
});

appendLocalTip

function appendLocalTip(message: Barrage): void

添加本地提示消息向消息列表中添加本地生成的提示消息，不会发送到服务器

参数

参数名	类型	必填	描述
message	`Barrage`	是	要添加的弹幕消息对象

示例

import { useBarrageState, BarrageType } from 'tuikit-atomicx-vue3';

const { appendLocalTip } = useBarrageState();

// 添加系统提示消息
const systemTip = {
  liveId: 'live123',
  sender: {
    userId: 'system',
    userName: '系统',
    avatarUrl: ''
  },
  sequence: Date.now(),
  timestampInSecond: Math.floor(Date.now() / 1000),
  messageType: BarrageType.text,
  textContent: '欢迎进入直播间！',
  extensionInfo: { type: 'system' }
};

appendLocalTip(systemTip);

MessageListState

📝 消息列表管理模块

核心功能：管理聊天消息列表，支持消息加载、滚动控制、已读回执、消息高亮等完整的消息展示功能。

技术特点：支持虚拟滚动、消息优化、实时更新等高性能消息处理。新增activeConversationID、messageList、hasMoreOlderMessage等响应式数据。

业务价值：为即时通信提供核心的消息展示能力，确保良好的聊天体验。

应用场景：即时通信、群聊、私聊、消息管理等通信场景。

响应式数据

activeConversationID

const activeConversationID: Ref<any>

当前活跃的会话ID 当前正在进行的聊天会话标识

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { activeConversationID } = useMessageListState();

// 监听数据变化
watch(activeConversationID, (newValue) => {
  console.log('activeConversationID 更新:', newValue);
});

// 直接访问数据
console.log('当前 activeConversationID:', activeConversationID.value);

messageList

const messageList: Ref<any>

消息列表数据当前会话的消息列表

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { messageList } = useMessageListState();

// 监听数据变化
watch(messageList, (newValue) => {
  console.log('messageList 更新:', newValue);
});

// 直接访问数据
console.log('当前 messageList:', messageList.value);

hasMoreOlderMessage

const hasMoreOlderMessage: Ref<any>

是否有更多旧消息标识是否还有更早的历史消息可以加载

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { hasMoreOlderMessage } = useMessageListState();

// 监听数据变化
watch(hasMoreOlderMessage, (newValue) => {
  console.log('hasMoreOlderMessage 更新:', newValue);
});

// 直接访问数据
console.log('当前 hasMoreOlderMessage:', hasMoreOlderMessage.value);

hasMoreNewerMessage

const hasMoreNewerMessage: Ref<any>

是否有更多新消息标识是否还有更新的消息可以加载

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { hasMoreNewerMessage } = useMessageListState();

// 监听数据变化
watch(hasMoreNewerMessage, (newValue) => {
  console.log('hasMoreNewerMessage 更新:', newValue);
});

// 直接访问数据
console.log('当前 hasMoreNewerMessage:', hasMoreNewerMessage.value);

enableReadReceipt

const enableReadReceipt: Ref<any>

是否启用已读回执标识当前会话是否开启消息已读回执功能

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { enableReadReceipt } = useMessageListState();

// 监听数据变化
watch(enableReadReceipt, (newValue) => {
  console.log('enableReadReceipt 更新:', newValue);
});

// 直接访问数据
console.log('当前 enableReadReceipt:', enableReadReceipt.value);

isDisableScroll

const isDisableScroll: Ref<any>

是否禁用滚动标识消息列表是否禁用自动滚动

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { isDisableScroll } = useMessageListState();

// 监听数据变化
watch(isDisableScroll, (newValue) => {
  console.log('isDisableScroll 更新:', newValue);
});

// 直接访问数据
console.log('当前 isDisableScroll:', isDisableScroll.value);

recalledMessageIDSet

const recalledMessageIDSet: Ref<any>

已撤回消息的ID集合存储已被撤回的消息ID集合

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { recalledMessageIDSet } = useMessageListState();

// 监听数据变化
watch(recalledMessageIDSet, (newValue) => {
  console.log('recalledMessageIDSet 更新:', newValue);
});

// 直接访问数据
console.log('当前 recalledMessageIDSet:', recalledMessageIDSet.value);

highlightMessageIDSet

const highlightMessageIDSet: Ref<any>

高亮消息的ID集合需要高亮显示的消息ID集合

类型: Ref<any>

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { highlightMessageIDSet } = useMessageListState();

// 监听数据变化
watch(highlightMessageIDSet, (newValue) => {
  console.log('highlightMessageIDSet 更新:', newValue);
});

// 直接访问数据
console.log('当前 highlightMessageIDSet:', highlightMessageIDSet.value);

接口函数

setEnableReadReceipt

function setEnableReadReceipt(enableReadReceipt: boolean | undefined): void

设置已读回执功能启用或禁用消息已读回执功能

参数

参数名	类型	必填	描述
enableReadReceipt	`boolean \| undefined`	是	是否启用已读回执

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { setEnableReadReceipt } = useMessageListState();

// 启用已读回执
setEnableReadReceipt(true);

// 禁用已读回执
setEnableReadReceipt(false);

setIsDisableScroll

function setIsDisableScroll(isDisableScroll: boolean): void

设置滚动禁用状态设置消息列表是否禁用滚动功能

参数

参数名	类型	必填	描述
isDisableScroll	`boolean`	是	是否禁用滚动

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { setIsDisableScroll } = useMessageListState();

// 禁用滚动
setIsDisableScroll(true);

// 启用滚动
setIsDisableScroll(false);

highlightMessage

function highlightMessage(options: { messageID: string; duration: number }): void

高亮显示消息临时高亮显示指定的消息，在指定时间后自动取消高亮

参数

参数名	类型	必填	描述
messageID	`string`	是	要高亮的消息ID
duration	`number`	是	高亮持续时间（毫秒）

示例

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { highlightMessage } = useMessageListState();

// 高亮消息3秒
highlightMessage({ messageID: 'msg123', duration: 3000 });

MessageInputState

✏️ 消息输入管理模块

核心功能：管理消息输入框的状态和行为，支持文本输入、表情包、@功能、输入状态提示等完整的输入体验。

技术特点：支持富文本编辑、输入状态同步、草稿保存等功能。新增inputRawValue、isPeerTyping响应式数据。

业务价值：为用户提供便捷的消息输入体验，提升沟通效率。

应用场景：消息编辑、表情输入、文件发送、语音输入等输入场景。

响应式数据

inputRawValue

const inputRawValue: Ref<any>

输入框的原始文本内容消息输入框中的原始文本内容

类型: Ref<any>

示例

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { inputRawValue } = useMessageInputState();

// 监听数据变化
watch(inputRawValue, (newValue) => {
  console.log('inputRawValue 更新:', newValue);
});

// 直接访问数据
console.log('当前 inputRawValue:', inputRawValue.value);

isPeerTyping

const isPeerTyping: Ref<any>

对方是否正在输入标识对方用户是否正在输入消息

类型: Ref<any>

示例

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { isPeerTyping } = useMessageInputState();

// 监听数据变化
watch(isPeerTyping, (newValue) => {
  console.log('isPeerTyping 更新:', newValue);
});

// 直接访问数据
console.log('当前 isPeerTyping:', isPeerTyping.value);

接口函数

updateRawValue

function updateRawValue(value: string | InputContent[]): void

更新输入框原始值更新消息输入框的原始值，支持文本和结构化内容，同时触发输入状态

参数

参数名	类型	必填	描述
value	`string \| InputContent[]`	是	要设置的值，可以是字符串或结构化内容数组

示例

import { useMessageInputState, MessageContentType } from 'tuikit-atomicx-vue3';

const { updateRawValue } = useMessageInputState();

// 更新文本内容
updateRawValue('Hello World');

// 更新结构化内容
updateRawValue([
  { type: MessageContentType.TEXT, content: 'Hello ' },
  { type: MessageContentType.EMOJI, content: { key: '[smile]', text: '😊' } }
]);

setEditorInstance

function setEditorInstance(instance: Editor | null): void

设置编辑器实例设置或更新编辑器实例，如果已存在编辑器实例则先销毁再设置新实例

参数

参数名	类型	必填	描述
instance	`Editor \| null`	是	编辑器实例，传入 null 表示清除当前实例

示例

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { setEditorInstance } = useMessageInputState();

// 设置编辑器实例
setEditorInstance(editorInstance);

// 清除编辑器实例
setEditorInstance(null);

setContent

function setContent(content: string | InputContent[]): void

设置编辑器内容设置编辑器的内容，支持文本和结构化内容，设置后会自动聚焦编辑器

参数

参数名	类型	必填	描述
content	`string \| InputContent[]`	是	要设置的内容

示例

import { useMessageInputState, MessageContentType } from 'tuikit-atomicx-vue3';

const { setContent } = useMessageInputState();

// 设置文本内容
setContent('Hello World');

// 设置结构化内容
setContent([
  { type: MessageContentType.TEXT, content: 'Hello ' },
  { type: MessageContentType.EMOJI, content: { key: '[smile]', text: '😊' } }
]);

insertContent

function insertContent(content: string | InputContent[], focus?: boolean): void

插入内容到编辑器在编辑器当前光标位置插入内容，支持文本和结构化内容

参数

参数名	类型	必填	描述
content	`string \| InputContent[]`	是	要插入的内容
focus	`boolean`	否	插入后是否聚焦编辑器，默认为 true

示例

import { useMessageInputState, MessageContentType } from 'tuikit-atomicx-vue3';

const { insertContent } = useMessageInputState();

// 插入文本内容
insertContent('Hello World');

// 插入表情
insertContent([
  { type: MessageContentType.EMOJI, content: { key: '[smile]', text: '😊' } }
]);

// 插入内容但不聚焦
insertContent('Hello', false);

focusEditor

function focusEditor(): void

聚焦编辑器将焦点设置到编辑器，使用户可以直接输入内容

示例

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { focusEditor } = useMessageInputState();

// 聚焦编辑器
focusEditor();

blurEditor

function blurEditor(): void

失焦编辑器移除编辑器的焦点，通常用于隐藏键盘或结束编辑状态

示例

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { blurEditor } = useMessageInputState();

// 失焦编辑器
blurEditor();

sendMessage

function sendMessage(msg?: string | InputContent[]): Promise<void>

发送消息发送消息到当前会话，支持文本、图片、视频、文件等多种类型的消息

参数

参数名	类型	必填	描述
msg	`string \| InputContent[]`	否	要发送的消息内容，如果不提供则使用当前输入框的值

示例

import { useMessageInputState, MessageContentType } from 'tuikit-atomicx-vue3';

const { sendMessage } = useMessageInputState();

// 发送文本消息
await sendMessage('Hello World');

// 发送结构化消息
await sendMessage([
  { type: MessageContentType.TEXT, content: 'Check this image: ' },
  { type: MessageContentType.IMAGE, content: imageFile }
]);

// 发送当前输入框内容
await sendMessage();

MessageActionState

🔧 消息操作管理模块

核心功能：管理消息的各种操作，包括转发、引用、复制、删除、撤回等完整的消息操作功能。

技术特点：支持批量操作、操作状态管理、权限控制等功能。新增forwardMessageIDList、isForwardMessageSelectionDone等响应式数据。

业务价值：为用户提供丰富的消息操作能力，提升使用体验。

应用场景：消息转发、消息引用、消息管理、批量操作等场景。

响应式数据

forwardMessageIDList

const forwardMessageIDList: Ref<any>

要转发的消息ID列表选中需要转发的消息ID列表

类型: Ref<any>

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { forwardMessageIDList } = useMessageActionState();

// 监听数据变化
watch(forwardMessageIDList, (newValue) => {
  console.log('forwardMessageIDList 更新:', newValue);
});

// 直接访问数据
console.log('当前 forwardMessageIDList:', forwardMessageIDList.value);

isForwardMessageSelectionDone

const isForwardMessageSelectionDone: Ref<any>

消息转发选择是否完成标识消息转发目标选择是否已完成

类型: Ref<any>

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { isForwardMessageSelectionDone } = useMessageActionState();

// 监听数据变化
watch(isForwardMessageSelectionDone, (newValue) => {
  console.log('isForwardMessageSelectionDone 更新:', newValue);
});

// 直接访问数据
console.log('当前 isForwardMessageSelectionDone:', isForwardMessageSelectionDone.value);

forwardConversationIDList

const forwardConversationIDList: Ref<any>

转发目标会话ID列表消息转发的目标会话ID列表

类型: Ref<any>

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { forwardConversationIDList } = useMessageActionState();

// 监听数据变化
watch(forwardConversationIDList, (newValue) => {
  console.log('forwardConversationIDList 更新:', newValue);
});

// 直接访问数据
console.log('当前 forwardConversationIDList:', forwardConversationIDList.value);

quotedMessage

const quotedMessage: Ref<any>

被引用的消息信息当前被引用回复的消息信息

类型: Ref<any>

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { quotedMessage } = useMessageActionState();

// 监听数据变化
watch(quotedMessage, (newValue) => {
  console.log('quotedMessage 更新:', newValue);
});

// 直接访问数据
console.log('当前 quotedMessage:', quotedMessage.value);

接口函数

forwardMessage

function forwardMessage(params: IForwardMessageParams): Promise<Array<PromiseSettledResult<unknown>>>

转发消息将选中的消息转发到指定会话，支持合并转发和逐条转发两种模式

参数

参数名	类型	必填	描述
isMergeForward	`boolean`	是	是否合并转发
messageIDList	`string[]`	是	要转发的消息ID列表
conversationIDList	`string[]`	是	目标会话ID列表
useOfflinePush	`boolean`	否	是否使用离线推送

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { forwardMessage } = useMessageActionState();

// 合并转发消息
const results = await forwardMessage({
  isMergeForward: true,
  messageIDList: ['msg_001', 'msg_002'],
  conversationIDList: ['C2C_user123', 'GROUP_group456']
});

// 逐条转发消息
await forwardMessage({
  isMergeForward: false,
  messageIDList: ['msg_001'],
  conversationIDList: ['C2C_user123']
});

setForwardMessageIDList

function setForwardMessageIDList(messageIDList: string[]): void

设置转发消息ID列表设置要转发的消息ID列表，新的ID会与现有列表合并并去重

参数

参数名	类型	必填	描述
messageIDList	`string[]`	是	要转发的消息ID列表

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { setForwardMessageIDList } = useMessageActionState();

// 设置转发消息ID列表
setForwardMessageIDList(['msg_001', 'msg_002', 'msg_003']);

setIsForwardMessageSelectionDone

function setIsForwardMessageSelectionDone(isSelectionDone: boolean): void

设置转发消息选择完成状态标记转发消息选择是否完成

参数

参数名	类型	必填	描述
isSelectionDone	`boolean`	是	是否完成消息选择

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { setIsForwardMessageSelectionDone } = useMessageActionState();

// 标记消息选择完成
setIsForwardMessageSelectionDone(true);

// 重置消息选择状态
setIsForwardMessageSelectionDone(false);

setForwardConversationIDList

function setForwardConversationIDList(conversationIDList: string[]): void

设置转发目标会话ID列表设置要转发到的会话ID列表，新的ID会与现有列表合并并去重

参数

参数名	类型	必填	描述
conversationIDList	`string[]`	是	目标会话ID列表

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { setForwardConversationIDList } = useMessageActionState();

// 设置转发目标会话
setForwardConversationIDList(['C2C_user123', 'GROUP_group456']);

quoteMessage

function quoteMessage(message: MessageModel | undefined): void

引用消息设置要引用的消息，该消息将在发送新消息时作为引用显示

参数

参数名	类型	必填	描述
message	`MessageModel \| undefined`	是	要引用的消息对象，传入 undefined 取消引用

示例

import { useMessageActionState, useMessageListState } from 'tuikit-atomicx-vue3';

const { quoteMessage } = useMessageActionState();
const { messageList } = useMessageListState();

// 引用消息
const messageToQuote = messageList.value[0];
quoteMessage(messageToQuote);

// 取消引用
quoteMessage(undefined);

clearQuotedMessage

function clearQuotedMessage(): void

清除引用消息清除当前引用的消息，取消消息引用状态

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { clearQuotedMessage } = useMessageActionState();

// 清除引用消息
clearQuotedMessage();

copyTextMessage

function copyTextMessage(message: MessageModel): Promise<boolean>

复制文本消息复制指定消息的文本内容到剪贴板，会自动将表情键转换为表情名称

参数

参数名	类型	必填	描述
message	`MessageModel`	是	要复制的消息对象

示例

import { useMessageActionState, useMessageListState } from 'tuikit-atomicx-vue3';

const { copyTextMessage } = useMessageActionState();
const { messageList } = useMessageListState();

// 复制消息文本
const message = messageList.value[0];
const success = await copyTextMessage(message);
if (success) {
  console.log('复制成功');
}

deleteMessage

function deleteMessage(message: MessageModel): Promise<unknown>

删除消息删除指定的消息，将其从会话中移除

参数

参数名	类型	必填	描述
message	`MessageModel`	是	要删除的消息对象

示例

import { useMessageActionState, useMessageListState } from 'tuikit-atomicx-vue3';

const { deleteMessage } = useMessageActionState();
const { messageList } = useMessageListState();

// 删除消息
const message = messageList.value[0];
try {
  await deleteMessage(message);
  console.log('消息删除成功');
} catch (error) {
  console.error('删除失败:', error);
}

recallMessage

function recallMessage(message: MessageModel): Promise<unknown>

撤回消息撤回已发送的消息，消息将显示为"已撤回"状态

参数

参数名	类型	必填	描述
message	`MessageModel`	是	要撤回的消息对象

示例

import { useMessageActionState, useMessageListState } from 'tuikit-atomicx-vue3';

const { recallMessage } = useMessageActionState();
const { messageList } = useMessageListState();

// 撤回消息
const message = messageList.value[0];
try {
  await recallMessage(message);
  console.log('消息撤回成功');
} catch (error) {
  console.error('撤回失败（可能超过时间限制）:', error);
}

resetMessageActionState

function resetMessageActionState(): void

重置消息操作状态重置所有消息操作相关状态，包括引用消息和转发列表

示例

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { resetMessageActionState } = useMessageActionState();

// 重置所有消息操作状态
resetMessageActionState();

ConversationListState

💼 会话列表管理模块

核心功能：管理用户的会话列表，支持会话排序、未读统计、会话操作等完整的会话管理功能。

技术特点：支持实时会话更新、智能排序、网络状态监控等功能。新增conversationList、activeConversation、totalUnRead、netStatus响应式数据。

业务价值：为用户提供清晰的会话管理界面，提升沟通效率。

应用场景：会话管理、联系人列表、群组管理、消息中心等场景。

响应式数据

conversationList

const conversationList: Ref<any>

会话列表数据所有会话的列表数据

类型: Ref<any>

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { conversationList } = useConversationListState();

// 监听数据变化
watch(conversationList, (newValue) => {
  console.log('conversationList 更新:', newValue);
});

// 直接访问数据
console.log('当前 conversationList:', conversationList.value);

activeConversation

const activeConversation: Ref<any>

当前活跃的会话当前选中并正在进行的会话

类型: Ref<any>

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { activeConversation } = useConversationListState();

// 监听数据变化
watch(activeConversation, (newValue) => {
  console.log('activeConversation 更新:', newValue);
});

// 直接访问数据
console.log('当前 activeConversation:', activeConversation.value);

totalUnRead

const totalUnRead: Ref<any>

未读消息总数所有会话的未读消息总数统计

类型: Ref<any>

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { totalUnRead } = useConversationListState();

// 监听数据变化
watch(totalUnRead, (newValue) => {
  console.log('totalUnRead 更新:', newValue);
});

// 直接访问数据
console.log('当前 totalUnRead:', totalUnRead.value);

netStatus

const netStatus: Ref<any>

网络连接状态当前网络连接的状态信息

类型: Ref<any>

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { netStatus } = useConversationListState();

// 监听数据变化
watch(netStatus, (newValue) => {
  console.log('netStatus 更新:', newValue);
});

// 直接访问数据
console.log('当前 netStatus:', netStatus.value);

接口函数

markConversationUnread

function markConversationUnread(conversationID: string, isUnread: boolean): Promise<void>

标记会话未读状态标记指定会话为已读或未读状态，智能处理不同的未读状态场景

参数

参数名	类型	必填	描述
conversationID	`string`	是	会话ID
isUnread	`boolean`	是	是否标记为未读

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { markConversationUnread } = useConversationListState();

// 标记会话为未读
await markConversationUnread('C2Cuser123', true);

// 标记会话为已读
await markConversationUnread('C2Cuser123', false);

setActiveConversation

function setActiveConversation(conversationID: string): Promise<void>

设置活跃会话切换到指定的会话，如果与当前活跃会话不同，会自动标记为已读并切换会话

参数

参数名	类型	必填	描述
conversationID	`string`	是	要设置为活跃的会话ID

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { setActiveConversation } = useConversationListState();

// 切换到指定会话
await setActiveConversation('C2Cuser123');

pinConversation

function pinConversation(conversationID: string, isPin: boolean): Promise<unknown>

置顶会话设置指定会话的置顶状态，置顶的会话会显示在会话列表顶部

参数

参数名	类型	必填	描述
conversationID	`string`	是	会话ID
isPin	`boolean`	是	是否置顶

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { pinConversation } = useConversationListState();

// 置顶会话
await pinConversation('C2Cuser123', true);

// 取消置顶
await pinConversation('C2Cuser123', false);

deleteConversation

function deleteConversation(conversationID: string): Promise<unknown>

删除会话删除指定的会话，删除后会话将从会话列表中移除

参数

参数名	类型	必填	描述
conversationID	`string`	是	要删除的会话ID

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { deleteConversation } = useConversationListState();

// 删除会话
try {
  await deleteConversation('C2Cuser123');
  console.log('会话删除成功');
} catch (error) {
  console.error('删除会话失败:', error);
}

muteConversation

function muteConversation(conversationID: string, isMuted: boolean): Promise<unknown>

会话免打扰设置设置指定会话的免打扰状态，免打扰的会话不会显示消息通知

参数

参数名	类型	必填	描述
conversationID	`string`	是	会话ID
isMuted	`boolean`	是	是否开启免打扰

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { muteConversation } = useConversationListState();

// 开启免打扰
await muteConversation('C2Cuser123', true);

// 关闭免打扰
await muteConversation('C2Cuser123', false);

setConversationDraft

function setConversationDraft(options: SetConversationDraftParams): Promise<unknown>

设置会话草稿为指定会话设置草稿内容，用于保存用户未发送的消息内容

参数

参数名	类型	必填	描述
conversationID	`string`	是	会话ID
draftText	`string`	是	草稿内容

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { setConversationDraft } = useConversationListState();

// 设置会话草稿
await setConversationDraft({
  conversationID: 'C2Cuser123',
  draftText: '这是一条草稿消息'
});

createC2CConversation

function createC2CConversation(userID: string): Promise<ConversationModel>

创建单聊会话创建与指定用户的单聊会话

参数

参数名	类型	必填	描述
userID	`string`	是	目标用户ID

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { createC2CConversation } = useConversationListState();

// 创建与用户的单聊会话
try {
  const conversation = await createC2CConversation('user123');
  console.log('单聊会话创建成功:', conversation);
} catch (error) {
  console.error('创建单聊会话失败:', error);
}

createGroupConversation

function createGroupConversation(options: CreateGroupParams): Promise<ConversationModel>

创建群聊会话创建群聊并返回对应的会话对象，支持不同类型的群组

参数

参数名	类型	必填	描述
groupID	`string`	否	群组ID（可选）
name	`string`	是	群组名称
type	`string`	是	群组类型
memberList	`string[]`	否	初始成员列表

示例

import { useConversationListState } from 'tuikit-atomicx-vue3';
import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite';

const { createGroupConversation } = useConversationListState();

// 创建群聊会话
try {
  const conversation = await createGroupConversation({
    name: '我的群聊',
    type: TUIChatEngine.TYPES.GRP_WORK,
    memberList: ['user1', 'user2']
  });
  console.log('群聊会话创建成功:', conversation);
} catch (error) {
  console.error('创建群聊会话失败:', error);
}

ContactListState

👥 联系人管理模块

核心功能：管理用户的联系人列表，包括好友管理、群组管理、黑名单管理等完整的联系人功能。

技术特点：支持联系人分组、好友申请处理、群组申请管理等功能。新增friendList、groupList、blackList等响应式数据和完整的联系人操作接口。

业务价值：为用户提供完整的社交关系管理能力，构建社交网络。

应用场景：好友管理、群组管理、联系人搜索、社交网络等场景。

响应式数据

friendList

const friendList: Ref<any>

好友列表

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendList } = useContactListState();

// 监听数据变化
watch(friendList, (newValue) => {
  console.log('friendList 更新:', newValue);
});

// 直接访问数据
console.log('当前 friendList:', friendList.value);

groupList

const groupList: Ref<any>

群组列表

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { groupList } = useContactListState();

// 监听数据变化
watch(groupList, (newValue) => {
  console.log('groupList 更新:', newValue);
});

// 直接访问数据
console.log('当前 groupList:', groupList.value);

blackList

const blackList: Ref<any>

黑名单列表

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { blackList } = useContactListState();

// 监听数据变化
watch(blackList, (newValue) => {
  console.log('blackList 更新:', newValue);
});

// 直接访问数据
console.log('当前 blackList:', blackList.value);

friendApplicationUnreadCount

const friendApplicationUnreadCount: Ref<any>

好友申请未读数

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendApplicationUnreadCount } = useContactListState();

// 监听数据变化
watch(friendApplicationUnreadCount, (newValue) => {
  console.log('friendApplicationUnreadCount 更新:', newValue);
});

// 直接访问数据
console.log('当前 friendApplicationUnreadCount:', friendApplicationUnreadCount.value);

friendGroupList

const friendGroupList: Ref<any>

好友分组列表

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendGroupList } = useContactListState();

// 监听数据变化
watch(friendGroupList, (newValue) => {
  console.log('friendGroupList 更新:', newValue);
});

// 直接访问数据
console.log('当前 friendGroupList:', friendGroupList.value);

friendApplicationList

const friendApplicationList: Ref<any>

好友申请列表

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendApplicationList } = useContactListState();

// 监听数据变化
watch(friendApplicationList, (newValue) => {
  console.log('friendApplicationList 更新:', newValue);
});

// 直接访问数据
console.log('当前 friendApplicationList:', friendApplicationList.value);

groupApplicationList

const groupApplicationList: Ref<any>

群申请列表

类型: Ref<any>

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { groupApplicationList } = useContactListState();

// 监听数据变化
watch(groupApplicationList, (newValue) => {
  console.log('groupApplicationList 更新:', newValue);
});

// 直接访问数据
console.log('当前 groupApplicationList:', groupApplicationList.value);

接口函数

setGroupApplicationList

function setGroupApplicationList(listParams: { applicationList: any[] })

设置群组申请列表更新群组申请列表数据

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setGroupApplicationList } = useContactListState();

// Set group application list
await setGroupApplicationList({
  applicationList: []
});

setFriendList

function setFriendList(listParams: { friendList: any[] })

设置好友列表更新好友列表数据

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendList } = useContactListState();

// Set friend list
await setFriendList({
  friendList: []
});

setGroupList

function setGroupList(listParams: { groupList: any[] })

设置群组列表更新群组列表数据

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setGroupList } = useContactListState();

// Set group list
await setGroupList({
  groupList: []
});

setBlackList

function setBlackList(listParams: { blackList: any[] })

设置黑名单列表更新黑名单列表数据

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setBlackList } = useContactListState();

// Set black list
await setBlackList({
  blackList: []
});

setFriendApplicationUnreadCount

function setFriendApplicationUnreadCount(countParams: { count: number })

设置好友申请未读数更新好友申请的未读数量

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendApplicationUnreadCount } = useContactListState();

// Set friend application unread count
await setFriendApplicationUnreadCount({
  count: 5
});

setFriendGroupList

function setFriendGroupList(listParams: { groupList: any[] })

设置好友分组列表更新好友分组列表数据

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendGroupList } = useContactListState();

// Set friend group list
await setFriendGroupList({
  groupList: []
});

setFriendApplicationList

function setFriendApplicationList(listParams: { applicationList: any[] })

设置好友申请列表更新好友申请列表数据

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendApplicationList } = useContactListState();

// Set friend application list
await setFriendApplicationList({
  applicationList: []
});

initContactListWatcher

function initContactListWatcher(watcherParams?: { autoUpdate?: boolean })

初始化联系人监听器初始化联系人列表的数据监听

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { initContactListWatcher } = useContactListState();

// Initialize contact list watcher
await initContactListWatcher({
  autoUpdate: true
});

addFriend

function addFriend(options: AddFriendParams): Promise<unknown>

添加好友向指定用户发送好友申请，支持设置备注、分组、申请理由等信息

参数

参数名	类型	必填	描述
userID	`string`	是	要添加的用户ID
addSource	`string`	是	添加来源
remark	`string`	否	好友备注
groupName	`string`	否	好友分组名称
wording	`string`	否	申请理由
type	`number`	否	申请类型

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { addFriend } = useContactListState();

// 添加好友
try {
  await addFriend({
    userID: 'user123',
    addSource: 'search',
    remark: '同事小王',
    groupName: '工作',
    wording: '我是小李，想加您为好友'
  });
  console.log('好友申请发送成功');
} catch (error) {
  console.error('添加好友失败:', error);
}

markFriendApplicationAsRead

function markFriendApplicationAsRead(): Promise<unknown>

标记好友申请为已读将所有未读的好友申请标记为已读状态，清除未读数量

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { markFriendApplicationAsRead } = useContactListState();

// 标记好友申请为已读
try {
  await markFriendApplicationAsRead();
  console.log('好友申请已标记为已读');
} catch (error) {
  console.error('标记已读失败:', error);
}

acceptFriendApplication

function acceptFriendApplication(options: FriendApplicationParams): Promise<unknown>

接受好友申请接受指定用户的好友申请，可以设置好友备注

参数

参数名	类型	必填	描述
userID	`string`	是	申请用户的ID
remark	`string`	否	好友备注
type	`number`	是	申请类型

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { acceptFriendApplication } = useContactListState();

// 接受好友申请
try {
  await acceptFriendApplication({
    userID: 'user123',
    remark: '新朋友',
    type: 1
  });
  console.log('好友申请已接受');
} catch (error) {
  console.error('接受申请失败:', error);
}

refuseFriendApplication

function refuseFriendApplication(userID: string): Promise<unknown>

拒绝好友申请拒绝指定用户的好友申请

参数

参数名	类型	必填	描述
userID	`string`	是	申请用户的ID

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { refuseFriendApplication } = useContactListState();

// 拒绝好友申请
try {
  await refuseFriendApplication('user123');
  console.log('好友申请已拒绝');
} catch (error) {
  console.error('拒绝申请失败:', error);
}

addToBlacklist

function addToBlacklist(userIDList: string[]): Promise<unknown>

添加到黑名单将指定用户添加到黑名单，被拉黑的用户无法发送消息

参数

参数名	类型	必填	描述
userIDList	`string[]`	是	要添加到黑名单的用户ID列表

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { addToBlacklist } = useContactListState();

// 添加用户到黑名单
try {
  await addToBlacklist(['user123', 'user456']);
  console.log('用户已添加到黑名单');
} catch (error) {
  console.error('添加到黑名单失败:', error);
}

removeFromBlacklist

function removeFromBlacklist(userIDList: string[]): Promise<unknown>

从黑名单移除将指定用户从黑名单中移除，恢复正常的消息收发

参数

参数名	类型	必填	描述
userIDList	`string[]`	是	要从黑名单移除的用户ID列表

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { removeFromBlacklist } = useContactListState();

// 从黑名单移除用户
try {
  await removeFromBlacklist(['user123', 'user456']);
  console.log('用户已从黑名单移除');
} catch (error) {
  console.error('从黑名单移除失败:', error);
}

deleteFriend

function deleteFriend(options: DeleteFriendParams): Promise<unknown>

删除好友从好友列表中删除指定的好友

参数

参数名	类型	必填	描述
userID	`string`	是	要删除的好友用户ID
type	`string`	否	删除类型

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { deleteFriend } = useContactListState();

// 删除好友
try {
  await deleteFriend({
    userID: 'user123',
    type: 'both'
  });
  console.log('好友删除成功');
} catch (error) {
  console.error('删除好友失败:', error);
}

setFriendRemark

function setFriendRemark(options: FriendRemarkParams): Promise<unknown>

设置好友备注修改指定好友的备注名称

参数

参数名	类型	必填	描述
userID	`string`	是	好友用户ID
remark	`string`	是	新的备注名称

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendRemark } = useContactListState();

// 设置好友备注
try {
  await setFriendRemark({
    userID: 'user123',
    remark: '小王同事'
  });
  console.log('好友备注设置成功');
} catch (error) {
  console.error('设置备注失败:', error);
}

createFriendGroup

function createFriendGroup(options: FriendGroupParams): Promise<unknown>

创建好友分组创建一个新的好友分组，用于管理和分类好友

参数

参数名	类型	必填	描述
name	`string`	是	分组名称
userIDList	`string[]`	否	要添加到分组的用户ID列表

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { createFriendGroup } = useContactListState();

// 创建好友分组
try {
  await createFriendGroup({
    name: '工作同事',
    userIDList: ['user123', 'user456']
  });
  console.log('好友分组创建成功');
} catch (error) {
  console.error('创建分组失败:', error);
}

deleteFriendGroup

function deleteFriendGroup(name: string): Promise<unknown>

删除好友分组删除指定的好友分组，分组中的好友会移到默认分组

参数

参数名	类型	必填	描述
name	`string`	是	要删除的分组名称

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { deleteFriendGroup } = useContactListState();

// 删除好友分组
try {
  await deleteFriendGroup('工作同事');
  console.log('好友分组删除成功');
} catch (error) {
  console.error('删除分组失败:', error);
}

addToFriendGroup

function addToFriendGroup(options: FriendGroupParams): Promise<unknown>

添加好友到分组将指定好友添加到指定的分组中

参数

参数名	类型	必填	描述
name	`string`	是	分组名称
userIDList	`string[]`	是	要添加的好友用户ID列表

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { addToFriendGroup } = useContactListState();

// 添加好友到分组
try {
  await addToFriendGroup({
    name: '工作同事',
    userIDList: ['user789']
  });
  console.log('好友已添加到分组');
} catch (error) {
  console.error('添加到分组失败:', error);
}

removeFromFriendGroup

function removeFromFriendGroup(options: FriendGroupParams): Promise<unknown>

从分组移除好友将指定好友从指定分组中移除

参数

参数名	类型	必填	描述
name	`string`	是	分组名称
userIDList	`string[]`	是	要移除的好友用户ID列表

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { removeFromFriendGroup } = useContactListState();

// 从分组移除好友
try {
  await removeFromFriendGroup({
    name: '工作同事',
    userIDList: ['user789']
  });
  console.log('好友已从分组移除');
} catch (error) {
  console.error('从分组移除失败:', error);
}

renameFriendGroup

function renameFriendGroup(options: RenameFriendGroupParams): Promise<unknown>

重命名好友分组修改指定好友分组的名称

参数

参数名	类型	必填	描述
oldName	`string`	是	原分组名称
newName	`string`	是	新分组名称

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { renameFriendGroup } = useContactListState();

// 重命名好友分组
try {
  await renameFriendGroup({
    oldName: '工作同事',
    newName: '公司同事'
  });
  console.log('分组重命名成功');
} catch (error) {
  console.error('重命名分组失败:', error);
}

joinGroup

function joinGroup(options: JoinGroupParams): Promise<unknown>

加入群组申请加入指定的群组

参数

参数名	类型	必填	描述
groupID	`string`	是	要加入的群组ID
applyMessage	`string`	否	申请加群的理由
type	`string`	否	加群类型

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { joinGroup } = useContactListState();

// 申请加入群组
try {
  await joinGroup({
    groupID: 'group123',
    applyMessage: '我想加入这个群组学习交流'
  });
  console.log('加群申请已发送');
} catch (error) {
  console.error('加入群组失败:', error);
}

acceptGroupApplication

function acceptGroupApplication(options: GroupApplicationParams): Promise<unknown>

接受群组申请接受用户的入群申请，并从申请列表中移除该申请

参数

参数名	类型	必填	描述
application	`GroupApplication`	是	群组申请对象
handleMessage	`string`	否	处理消息

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { acceptGroupApplication, groupApplicationList } = useContactListState();

// 接受群组申请
try {
  const application = groupApplicationList.value[0];
  await acceptGroupApplication({
    application: application,
    handleMessage: '欢迎加入群组'
  });
  console.log('群组申请已接受');
} catch (error) {
  console.error('接受群组申请失败:', error);
}

refuseGroupApplication

function refuseGroupApplication(options: GroupApplicationParams): Promise<unknown>

拒绝群组申请拒绝用户的入群申请，并从申请列表中移除该申请

参数

参数名	类型	必填	描述
application	`GroupApplication`	是	群组申请对象
handleMessage	`string`	否	拒绝理由

示例

import { useContactListState } from 'tuikit-atomicx-vue3';

const { refuseGroupApplication, groupApplicationList } = useContactListState();

// 拒绝群组申请
try {
  const application = groupApplicationList.value[0];
  await refuseGroupApplication({
    application: application,
    handleMessage: '暂不接受新成员'
  });
  console.log('群组申请已拒绝');
} catch (error) {
  console.error('拒绝群组申请失败:', error);
}

C2CSettingState

👤 单聊设置管理模块

核心功能：管理单聊会话的各种设置，包括用户信息、聊天设置、权限控制等功能。

技术特点：支持实时设置同步、权限管理、个性化配置等功能。更新响应式数据为userID、avatar、signature等标准化字段。

业务价值：为用户提供个性化的单聊体验，提升沟通质量。

应用场景：单聊设置、用户信息管理、聊天权限控制等场景。

响应式数据

currentConversationRef

const currentConversationRef: Ref<IConversationModel | undefined>

当前会话引用存储当前C2C会话的模型对象

类型: Ref<IConversationModel | undefined>

示例

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { currentConversationRef } = useC2CSettingState();

// 监听数据变化
watch(currentConversationRef, (newValue) => {
  console.log('currentConversationRef 更新:', newValue);
});

// 直接访问数据
console.log('当前 currentConversationRef:', currentConversationRef.value);