atomicx-core sdk API 文档

atomicx-core sdk

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

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 })
用户登录 使用用户ID、用户签名和应用ID进行登录认证

示例

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

const { login } = useLoginState();

// 调用函数
// 参数示例:
// loginParams: 对应的参数值
await login({ /* 参数对象 */ });

setSelfInfo

function setSelfInfo(userInfo: { nickName?: string; avatar?: string; signature?: string })
设置用户个人信息 更新当前用户的昵称、头像和个性签名

示例

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

const { setSelfInfo } = useLoginState();

// 调用函数
// 参数示例:
// userInfo: 对应的参数值
await setSelfInfo('userInfo示例值');

logout

function logout()
用户登出函数

示例

await logout();

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 })
设置当前麦克风设备 切换到指定的麦克风设备

示例

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

const { setCurrentMicrophone } = useDeviceState();

// 调用函数
// 参数示例:
// deviceConfig: 对应的参数值
await setCurrentMicrophone('deviceConfig示例值');

startMicrophoneTest

function startMicrophoneTest(testConfig: { interval?: number })
开始麦克风测试 开始麦克风音量检测，可设置检测间隔

示例

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

const { startMicrophoneTest } = useDeviceState();

// 调用函数
// 参数示例:
// testConfig: 对应的参数值
await startMicrophoneTest('testConfig示例值');

setCaptureVolume

function setCaptureVolume(volume: number)
设置音频采集音量

参数

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

示例

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

const { setCaptureVolume } = useDeviceState();

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

setOutputVolume

function setOutputVolume(volume: number)
设置音频播放音量

参数

参数名 类型 描述
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 })
设置当前扬声器设备 切换到指定的扬声器设备

示例

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

const { setCurrentSpeaker } = useDeviceState();

// 调用函数
// 参数示例:
// deviceConfig: 对应的参数值
await setCurrentSpeaker('deviceConfig示例值');

setAudioRoute

function setAudioRoute(output: AudioRoute)
设置音频路由

参数

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

示例

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

const { setAudioRoute } = useDeviceState();

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

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

startSpeakerTest

function startSpeakerTest(testConfig: { filePath: string })
开始扬声器测试 播放指定音频文件进行扬声器测试

示例

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

const { startSpeakerTest } = useDeviceState();

// 调用函数
// 参数示例:
// testConfig: 对应的参数值
await startSpeakerTest('testConfig示例值');

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 })
设置当前摄像头设备 切换到指定的摄像头设备

示例

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

const { setCurrentCamera } = useDeviceState();

// 调用函数
// 参数示例:
// deviceConfig: 对应的参数值
await setCurrentCamera('deviceConfig示例值');

switchCamera

function switchCamera(cameraConfig: { isFrontCamera: boolean })
切换前后摄像头 在前置和后置摄像头之间切换

示例

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

const { switchCamera } = useDeviceState();

// 调用函数
// 参数示例:
// cameraConfig: 对应的参数值
await switchCamera('cameraConfig示例值');

switchMirror

function switchMirror(mirrorConfig: { mirror: MirrorType })
切换视频镜像模式 设置视频画面的镜像效果

示例

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

const { switchMirror } = useDeviceState();

// 调用函数
// 参数示例:
// mirrorConfig: 对应的参数值
await switchMirror('mirrorConfig示例值');

updateVideoQuality

function updateVideoQuality(qualityParams: { quality: VideoQuality })
更新视频质量 更新视频混流的质量参数

示例

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

const { updateVideoQuality } = useDeviceState();

// 调用函数
// 参数示例:
// qualityParams: 对应的参数值
await updateVideoQuality({ /* 参数对象 */ });

startCameraDeviceTest

function startCameraDeviceTest(testConfig: { view: string })
开始摄像头设备测试 在指定视图中显示摄像头预览

示例

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

const { startCameraDeviceTest } = useDeviceState();

// 调用函数
// 参数示例:
// testConfig: 对应的参数值
await startCameraDeviceTest('testConfig示例值');

startScreenShare

function startScreenShare(shareConfig?: { screenAudio?: boolean; view?: string })
开始屏幕分享 开始分享屏幕内容，可选择是否包含系统音频

示例

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

const { startScreenShare } = useDeviceState();

// 调用函数
// 参数示例:
// shareConfig?: 对应的参数值
await startScreenShare('shareConfig?示例值');

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)
创建直播间 创建一个新的直播间，支持设置直播间名称、封面、背景、麦位模式等配置

示例

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

const { createLive } = useLiveListState();

// 调用函数
// 参数示例:
// liveParams: 对应的参数值
await createLive({ /* 参数对象 */ });

joinLive

function joinLive(joinParams: { liveId: string })
加入直播间 通过直播间ID加入指定的直播间

示例

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

const { joinLive } = useLiveListState();

// 调用函数
// 参数示例:
// joinParams: 对应的参数值
await joinLive({ /* 参数对象 */ });

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)
更新直播间信息 更新直播间的基本信息，如封面、背景、分类等

示例

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

const { updateLiveInfo } = useLiveListState();

// 调用函数
// 参数示例:
// updateParams: 对应的参数值
await updateLiveInfo({ /* 参数对象 */ });

queryMetaData

function queryMetaData(queryParams: { keys: string[] })
查询元数据 查询直播间的自定义元数据信息

示例

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

const { queryMetaData } = useLiveListState();

// 调用函数
// 参数示例:
// queryParams: 对应的参数值
await queryMetaData({ /* 参数对象 */ });

updateLiveMetaData

function updateLiveMetaData(metaParams: { metaData: Record })
更新直播间元数据 更新直播间的自定义元数据

示例

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

const { updateLiveMetaData } = useLiveListState();

// 调用函数
// 参数示例:
// metaParams: 对应的参数值
// string> }: 对应的参数值
await updateLiveMetaData({ /* 参数对象 */ });

fetchLiveList

function fetchLiveList(listParams: { cursor?: string; count?: number })
获取直播列表 支持分页获取直播列表，可指定游标和数量进行分页查询

示例

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

const { fetchLiveList } = useLiveListState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await fetchLiveList({ /* 参数对象 */ });

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 })
用户上麦 用户申请上到指定麦位，普通用户直接上麦

示例

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

const { takeSeat } = useLiveSeatState();

// 调用函数
// 参数示例:
// seatParams: 对应的参数值
await takeSeat({ /* 参数对象 */ });

leaveSeat

function leaveSeat(seatParams: { seatIndex: number })
用户下麦 用户从指定麦位下麦

示例

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

const { leaveSeat } = useLiveSeatState();

// 调用函数
// 参数示例:
// seatParams: 对应的参数值
await leaveSeat({ /* 参数对象 */ });

lockSeat

function lockSeat(lockParams: { seatIndex: number })
锁定麦位 锁定指定的麦位，防止其他用户上麦

示例

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

const { lockSeat } = useLiveSeatState();

// 调用函数
// 参数示例:
// lockParams: 对应的参数值
await lockSeat({ /* 参数对象 */ });

unLockSeat

function unLockSeat(unlockParams: { seatIndex: number })
解锁麦位 解锁指定的麦位，允许其他用户上麦

示例

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

const { unLockSeat } = useLiveSeatState();

// 调用函数
// 参数示例:
// unlockParams: 对应的参数值
await unLockSeat({ /* 参数对象 */ });

kickUserOutOfSeat

function kickUserOutOfSeat(kickParams: { seatIndex: number; userId: string })
踢用户下麦 将指定用户从麦位上踢下

示例

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

const { kickUserOutOfSeat } = useLiveSeatState();

// 调用函数
// 参数示例:
// kickParams: 对应的参数值
await kickUserOutOfSeat({ /* 参数对象 */ });

moveUserToSeat

function moveUserToSeat(moveParams: { userId: string; targetSeatIndex: number })
移动用户到指定麦位 将用户移动到目标麦位

示例

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

const { moveUserToSeat } = useLiveSeatState();

// 调用函数
// 参数示例:
// moveParams: 对应的参数值
await moveUserToSeat({ /* 参数对象 */ });

openRemoteCamera

function openRemoteCamera(cameraParams: { userId: string })
开启远端摄像头 开启指定用户的摄像头

示例

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

const { openRemoteCamera } = useLiveSeatState();

// 调用函数
// 参数示例:
// cameraParams: 对应的参数值
await openRemoteCamera({ /* 参数对象 */ });

closeRemoteCamera

function closeRemoteCamera(cameraParams: { userId: string })
关闭远端摄像头 关闭指定用户的摄像头

示例

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

const { closeRemoteCamera } = useLiveSeatState();

// 调用函数
// 参数示例:
// cameraParams: 对应的参数值
await closeRemoteCamera({ /* 参数对象 */ });

openRemoteMicrophone

function openRemoteMicrophone(micParams: { userId: string })
开启远端麦克风 开启指定用户的麦克风

示例

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

const { openRemoteMicrophone } = useLiveSeatState();

// 调用函数
// 参数示例:
// micParams: 对应的参数值
await openRemoteMicrophone({ /* 参数对象 */ });

closeRemoteMicrophone

function closeRemoteMicrophone(micParams: { userId: string })
关闭远端麦克风 关闭指定用户的麦克风

示例

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

const { closeRemoteMicrophone } = useLiveSeatState();

// 调用函数
// 参数示例:
// micParams: 对应的参数值
await closeRemoteMicrophone({ /* 参数对象 */ });

muteMicrophone

function muteMicrophone(muteParams: { userId: string })
静音麦克风 静音指定用户的麦克风

示例

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

const { muteMicrophone } = useLiveSeatState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await muteMicrophone({ /* 参数对象 */ });

unmuteMicrophone

function unmuteMicrophone(unmuteParams: { userId: string })
取消静音麦克风 取消静音指定用户的麦克风

示例

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

const { unmuteMicrophone } = useLiveSeatState();

// 调用函数
// 参数示例:
// unmuteParams: 对应的参数值
await unmuteMicrophone({ /* 参数对象 */ });

startPlayStream

function startPlayStream(streamParams: { userId: string; streamType: number })
开始播放流 开始播放指定用户的音视频流

示例

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

const { startPlayStream } = useLiveSeatState();

// 调用函数
// 参数示例:
// streamParams: 对应的参数值
await startPlayStream({ /* 参数对象 */ });

stopPlayStream

function stopPlayStream(streamParams: { userId: string; streamType: number })
停止播放流 停止播放指定用户的音视频流

示例

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

const { stopPlayStream } = useLiveSeatState();

// 调用函数
// 参数示例:
// streamParams: 对应的参数值
await stopPlayStream({ /* 参数对象 */ });

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(fetchParams: { cursor?: string; count?: number })
获取观众列表 分页获取直播间观众信息

示例

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

const { fetchAudienceList } = useLiveAudienceState();

// 调用函数
// 参数示例:
// fetchParams: 对应的参数值
await fetchAudienceList({ /* 参数对象 */ });

setAdministrator

function setAdministrator(adminParams: { userId: string })
设置管理员 将指定用户设置为直播间管理员

示例

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

const { setAdministrator } = useLiveAudienceState();

// 调用函数
// 参数示例:
// adminParams: 对应的参数值
await setAdministrator({ /* 参数对象 */ });

revokeAdministrator

function revokeAdministrator(revokeParams: { userId: string })
撤销管理员 撤销指定用户的管理员权限

示例

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

const { revokeAdministrator } = useLiveAudienceState();

// 调用函数
// 参数示例:
// revokeParams: 对应的参数值
await revokeAdministrator({ /* 参数对象 */ });

kickUserOutOfRoom

function kickUserOutOfRoom(kickParams: { userId: string })
踢出房间 将指定用户踢出直播间

示例

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

const { kickUserOutOfRoom } = useLiveAudienceState();

// 调用函数
// 参数示例:
// kickParams: 对应的参数值
await kickUserOutOfRoom({ /* 参数对象 */ });

disableSendMessage

function disableSendMessage(muteParams: { userId: string; duration?: number })
禁言用户 禁止指定用户发送消息

示例

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

const { disableSendMessage } = useLiveAudienceState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await disableSendMessage({ /* 参数对象 */ });

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(initParams: { sdkAppId: number; userId: string; userSig: string })
初始化监控 初始化直播监控服务

示例

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

const { init } = useLiveMonitorState();

// 调用函数
// 参数示例:
// initParams: 对应的参数值
await init({ /* 参数对象 */ });

getLiveList

function getLiveList(listParams: { cursor?: string; count?: number })
获取直播列表 获取当前正在进行的直播列表

示例

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

const { getLiveList } = useLiveMonitorState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await getLiveList({ /* 参数对象 */ });

closeRoom

function closeRoom(closeParams: { roomId: string })
关闭房间 强制关闭指定的直播间

示例

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

const { closeRoom } = useLiveMonitorState();

// 调用函数
// 参数示例:
// closeParams: 对应的参数值
await closeRoom({ /* 参数对象 */ });

sendMessage

function sendMessage(sendParams: { content: string; type?: string })
发送消息 发送输入框中的消息内容

示例

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

const { sendMessage } = useLiveMonitorState();

// 调用函数
// 参数示例:
// sendParams: 对应的参数值
await sendMessage({ /* 参数对象 */ });

startPlay

function startPlay(playParams: { roomId: string; userId: string })
开始播放 开始播放指定用户的直播流

示例

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

const { startPlay } = useLiveMonitorState();

// 调用函数
// 参数示例:
// playParams: 对应的参数值
await startPlay({ /* 参数对象 */ });

stopPlay

function stopPlay(stopParams: { roomId: string; userId: string })
停止播放 停止播放指定用户的直播流

示例

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

const { stopPlay } = useLiveMonitorState();

// 调用函数
// 参数示例:
// stopParams: 对应的参数值
await stopPlay({ /* 参数对象 */ });

muteLiveAudio

function muteLiveAudio(muteParams: { roomId: string; userId: string; isMuted: boolean })
静音直播音频 控制指定用户的音频播放状态

示例

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

const { muteLiveAudio } = useLiveMonitorState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await muteLiveAudio({ /* 参数对象 */ });

CoGuestState

🎤 连麦嘉宾管理模块

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

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

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

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

响应式数据

candidates

const candidates: Ref<any>
取消订阅连麦事件 取消订阅指定的连麦事件，移除之前注册的回调函数 @param {HostEvent | GuestEvent} event - 要取消订阅的事件类型 @param {Function} callback - 要移除的事件回调函数
类型: Ref<any>

示例

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

const { unsubscribeEvent, subscribeEvent } = useCoGuestState();

// 定义回调函数
const handleInvitation = (eventInfo) => {
  console.log('收到连麦邀请:', eventInfo.hostUser);
};

// 订阅事件
subscribeEvent(GuestEvent.onHostInvitationReceived, handleInvitation);

// 取消订阅事件
unsubscribeEvent(GuestEvent.onHostInvitationReceived, handleInvitation);

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);

接口函数

cancelApplication

function cancelApplication(cancelParams: { requestId: string })
取消申请 取消之前发送的上麦申请

示例

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

const { cancelApplication } = useCoGuestState();

// 调用函数
// 参数示例:
// cancelParams: 对应的参数值
await cancelApplication({ /* 参数对象 */ });

acceptApplication

function acceptApplication(acceptParams: { requestId: string })
接受申请 主播接受观众的上麦申请

示例

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

const { acceptApplication } = useCoGuestState();

// 调用函数
// 参数示例:
// acceptParams: 对应的参数值
await acceptApplication({ /* 参数对象 */ });

rejectApplication

function rejectApplication(rejectParams: { requestId: string })
拒绝申请 主播拒绝观众的上麦申请

示例

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

const { rejectApplication } = useCoGuestState();

// 调用函数
// 参数示例:
// rejectParams: 对应的参数值
await rejectApplication({ /* 参数对象 */ });

cancelInvitation

function cancelInvitation(cancelParams: { requestId: string })
取消邀请 取消之前发送的上麦邀请

示例

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

const { cancelInvitation } = useCoGuestState();

// 调用函数
// 参数示例:
// cancelParams: 对应的参数值
await cancelInvitation({ /* 参数对象 */ });

acceptInvitation

function acceptInvitation(acceptParams: { requestId: string })
接受邀请 观众接受主播的上麦邀请

示例

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

const { acceptInvitation } = useCoGuestState();

// 调用函数
// 参数示例:
// acceptParams: 对应的参数值
await acceptInvitation({ /* 参数对象 */ });

rejectInvitation

function rejectInvitation(rejectParams: { requestId: string })
拒绝邀请 观众拒绝主播的上麦邀请

示例

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

const { rejectInvitation } = useCoGuestState();

// 调用函数
// 参数示例:
// rejectParams: 对应的参数值
await rejectInvitation({ /* 参数对象 */ });

disConnect

function disConnect(disconnectParams: { userId: string })
断开连接 断开与指定用户的连麦

示例

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

const { disConnect } = useCoGuestState();

// 调用函数
// 参数示例:
// disconnectParams: 对应的参数值
await disConnect({ /* 参数对象 */ });

applyForSeat

function applyForSeat(applyParams: { seatIndex: number; timeout?: number })
申请上麦 观众申请上到指定麦位，需要主播同意

示例

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

const { applyForSeat } = useCoGuestState();

// 调用函数
// 参数示例:
// applyParams: 对应的参数值
await applyForSeat({ /* 参数对象 */ });

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(requestParams: { targetUserId: string; timeout?: number })
请求主播连麦 向目标主播发起连麦请求

示例

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

const { requestHostConnection } = useCoHostState();

// 调用函数
// 参数示例:
// requestParams: 对应的参数值
await requestHostConnection({ /* 参数对象 */ });

cancelHostConnection

function cancelHostConnection(cancelParams: { targetUserId: string })
取消主播连麦 取消向目标主播的连麦请求

示例

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

const { cancelHostConnection } = useCoHostState();

// 调用函数
// 参数示例:
// cancelParams: 对应的参数值
await cancelHostConnection({ /* 参数对象 */ });

acceptHostConnection

function acceptHostConnection(acceptParams: { targetUserId: string })
接受主播连麦 接受目标主播的连麦请求

示例

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

const { acceptHostConnection } = useCoHostState();

// 调用函数
// 参数示例:
// acceptParams: 对应的参数值
await acceptHostConnection({ /* 参数对象 */ });

rejectHostConnection

function rejectHostConnection(rejectParams: { targetUserId: string })
拒绝主播连麦 拒绝目标主播的连麦请求

示例

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

const { rejectHostConnection } = useCoHostState();

// 调用函数
// 参数示例:
// rejectParams: 对应的参数值
await rejectHostConnection({ /* 参数对象 */ });

exitHostConnection

function exitHostConnection(exitParams: { targetUserId: string })
退出主播连麦 退出与目标主播的连麦

示例

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

const { exitHostConnection } = useCoHostState();

// 调用函数
// 参数示例:
// exitParams: 对应的参数值
await exitHostConnection({ /* 参数对象 */ });

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对战的实时比分
类型: 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(battleParams: { targetUserId: string; duration?: number })
请求PK 向目标主播发起PK请求

示例

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

const { requestBattle } = useBattleState();

// 调用函数
// 参数示例:
// battleParams: 对应的参数值
await requestBattle({ /* 参数对象 */ });

cancelBattleRequest

function cancelBattleRequest(cancelParams: { targetUserId: string })
取消PK请求 取消向目标主播的PK请求

示例

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

const { cancelBattleRequest } = useBattleState();

// 调用函数
// 参数示例:
// cancelParams: 对应的参数值
await cancelBattleRequest({ /* 参数对象 */ });

acceptBattle

function acceptBattle(acceptParams: { targetUserId: string })
接受PK 接受目标主播的PK请求

示例

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

const { acceptBattle } = useBattleState();

// 调用函数
// 参数示例:
// acceptParams: 对应的参数值
await acceptBattle({ /* 参数对象 */ });

rejectBattle

function rejectBattle(rejectParams: { targetUserId: string })
拒绝PK 拒绝目标主播的PK请求

示例

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

const { rejectBattle } = useBattleState();

// 调用函数
// 参数示例:
// rejectParams: 对应的参数值
await rejectBattle({ /* 参数对象 */ });

exitBattle

function exitBattle(exitParams: { targetUserId: string })
退出PK 退出与目标主播的PK

示例

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

const { exitBattle } = useBattleState();

// 调用函数
// 参数示例:
// exitParams: 对应的参数值
await exitBattle({ /* 参数对象 */ });

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(messageParams: { text: string; receiverList?: string[] })
发送文本消息 发送文本弹幕消息到直播间

示例

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

const { sendTextMessage } = useBarrageState();

// 调用函数
// 参数示例:
// messageParams: 对应的参数值
await sendTextMessage({ /* 参数对象 */ });

sendCustomMessage

function sendCustomMessage(customParams: { data: string; receiverList?: string[] })
发送自定义消息 发送自定义格式的消息到直播间

示例

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

const { sendCustomMessage } = useBarrageState();

// 调用函数
// 参数示例:
// customParams: 对应的参数值
await sendCustomMessage({ /* 参数对象 */ });

appendLocalTip

function appendLocalTip(tipParams: { message: string; type?: string })
添加本地提示 在本地添加提示消息，不发送到服务器

示例

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

const { appendLocalTip } = useBarrageState();

// 调用函数
// 参数示例:
// tipParams: 对应的参数值
await appendLocalTip({ /* 参数对象 */ });

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集合
类型: 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集合
类型: 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(receiptConfig: { enabled: boolean })
设置已读回执 开启或关闭消息已读回执功能

示例

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

const { setEnableReadReceipt } = useMessageListState();

// 调用函数
// 参数示例:
// receiptConfig: 对应的参数值
await setEnableReadReceipt('receiptConfig示例值');

setIsDisableScroll

function setIsDisableScroll(scrollConfig: { disabled: boolean })
设置滚动禁用 控制消息列表的滚动行为

示例

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

const { setIsDisableScroll } = useMessageListState();

// 调用函数
// 参数示例:
// scrollConfig: 对应的参数值
await setIsDisableScroll('scrollConfig示例值');

highlightMessage

function highlightMessage(highlightParams: { messageId: string; duration?: number })
高亮消息 高亮显示指定的消息

示例

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

const { highlightMessage } = useMessageListState();

// 调用函数
// 参数示例:
// highlightParams: 对应的参数值
await highlightMessage({ /* 参数对象 */ });

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(valueParams: { value: string })
更新原始值 更新输入框的原始文本内容

示例

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

const { updateRawValue } = useMessageInputState();

// 调用函数
// 参数示例:
// valueParams: 对应的参数值
await updateRawValue({ /* 参数对象 */ });

setEditorInstance

function setEditorInstance(editorParams: { editor: any })
设置编辑器实例 设置富文本编辑器的实例对象

示例

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

const { setEditorInstance } = useMessageInputState();

// 调用函数
// 参数示例:
// editorParams: 对应的参数值
await setEditorInstance({ /* 参数对象 */ });

setContent

function setContent(contentParams: { content: string })
设置内容 设置编辑器的内容

示例

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

const { setContent } = useMessageInputState();

// 调用函数
// 参数示例:
// contentParams: 对应的参数值
await setContent({ /* 参数对象 */ });

insertContent

function insertContent(insertParams: { content: string; position?: number })
插入内容 在指定位置插入内容

示例

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

const { insertContent } = useMessageInputState();

// 调用函数
// 参数示例:
// insertParams: 对应的参数值
await insertContent({ /* 参数对象 */ });

focusEditor

function focusEditor()
聚焦编辑器

示例

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

const { focusEditor } = useMessageInputState();

// 聚焦编辑器
focusEditor();

blurEditor

function blurEditor()
失焦编辑器

示例

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

const { blurEditor } = useMessageInputState();

// 失焦编辑器
blurEditor();

sendMessage

function sendMessage(sendParams: { content: string; type?: string })
发送消息 发送输入框中的消息内容

示例

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

const { sendMessage } = useMessageInputState();

// 调用函数
// 参数示例:
// sendParams: 对应的参数值
await sendMessage({ /* 参数对象 */ });

MessageActionState

🔧 消息操作管理模块

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

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

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

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

响应式数据

forwardMessageIDList

const forwardMessageIDList: Ref<any>
要转发的消息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列表
类型: 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(forwardParams: { messageIds: string[]; conversationIds: string[] })
转发消息 将选中的消息转发到指定会话

示例

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

const { forwardMessage } = useMessageActionState();

// 调用函数
// 参数示例:
// forwardParams: 对应的参数值
await forwardMessage({ /* 参数对象 */ });

setForwardMessageIDList

function setForwardMessageIDList(messageParams: { messageIds: string[] })
设置转发消息列表 设置要转发的消息ID列表

示例

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

const { setForwardMessageIDList } = useMessageActionState();

// 调用函数
// 参数示例:
// messageParams: 对应的参数值
await setForwardMessageIDList({ /* 参数对象 */ });

setIsForwardMessageSelectionDone

function setIsForwardMessageSelectionDone(selectionParams: { done: boolean })
设置转发选择完成 标记消息选择是否完成

示例

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

const { setIsForwardMessageSelectionDone } = useMessageActionState();

// 调用函数
// 参数示例:
// selectionParams: 对应的参数值
await setIsForwardMessageSelectionDone({ /* 参数对象 */ });

setForwardConversationIDList

function setForwardConversationIDList(conversationParams: { conversationIds: string[] })
设置转发会话列表 设置要转发到的会话ID列表

示例

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

const { setForwardConversationIDList } = useMessageActionState();

// 调用函数
// 参数示例:
// conversationParams: 对应的参数值
await setForwardConversationIDList({ /* 参数对象 */ });

quoteMessage

function quoteMessage(quoteParams: { messageId: string })
引用消息 引用指定的消息进行回复

示例

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

const { quoteMessage } = useMessageActionState();

// 调用函数
// 参数示例:
// quoteParams: 对应的参数值
await quoteMessage({ /* 参数对象 */ });

clearQuotedMessage

function clearQuotedMessage()
清除引用消息

示例

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

const { clearQuotedMessage } = useMessageActionState();

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

copyTextMessage

function copyTextMessage(copyParams: { messageId: string })
复制文本消息 复制指定消息的文本内容

示例

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

const { copyTextMessage } = useMessageActionState();

// 调用函数
// 参数示例:
// copyParams: 对应的参数值
await copyTextMessage({ /* 参数对象 */ });

deleteMessage

function deleteMessage(deleteParams: { messageId: string })
删除消息 删除指定的消息

示例

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

const { deleteMessage } = useMessageActionState();

// 调用函数
// 参数示例:
// deleteParams: 对应的参数值
await deleteMessage({ /* 参数对象 */ });

recallMessage

function recallMessage(recallParams: { messageId: string })
撤回消息 撤回指定的消息

示例

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

const { recallMessage } = useMessageActionState();

// 调用函数
// 参数示例:
// recallParams: 对应的参数值
await recallMessage({ /* 参数对象 */ });

resetMessageActionState

function resetMessageActionState()
重置消息操作状态

示例

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(unreadParams: { conversationId: string; unreadCount: number })
标记会话未读 设置会话的未读消息数量

示例

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

const { markConversationUnread } = useConversationListState();

// 调用函数
// 参数示例:
// unreadParams: 对应的参数值
await markConversationUnread({ /* 参数对象 */ });

setActiveConversation

function setActiveConversation(activeParams: { conversationId: string })
设置活跃会话 切换到指定的会话

示例

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

const { setActiveConversation } = useConversationListState();

// 调用函数
// 参数示例:
// activeParams: 对应的参数值
await setActiveConversation({ /* 参数对象 */ });

pinConversation

function pinConversation(pinParams: { conversationId: string; isPinned: boolean })
置顶会话 设置会话的置顶状态

示例

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

const { pinConversation } = useConversationListState();

// 调用函数
// 参数示例:
// pinParams: 对应的参数值
await pinConversation({ /* 参数对象 */ });

deleteConversation

function deleteConversation(deleteParams: { conversationId: string })
删除会话 删除指定的会话

示例

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

const { deleteConversation } = useConversationListState();

// 调用函数
// 参数示例:
// deleteParams: 对应的参数值
await deleteConversation({ /* 参数对象 */ });

muteConversation

function muteConversation(muteParams: { conversationId: string; isMuted: boolean })
静音会话 设置会话的免打扰状态

示例

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

const { muteConversation } = useConversationListState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await muteConversation({ /* 参数对象 */ });

setConversationDraft

function setConversationDraft(draftParams: { conversationId: string; draft: string })
设置会话草稿 保存会话的草稿内容

示例

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

const { setConversationDraft } = useConversationListState();

// 调用函数
// 参数示例:
// draftParams: 对应的参数值
await setConversationDraft({ /* 参数对象 */ });

createC2CConversation

function createC2CConversation(c2cParams: { userId: string })
创建单聊会话 创建与指定用户的单聊会话

示例

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

const { createC2CConversation } = useConversationListState();

// 调用函数
// 参数示例:
// c2cParams: 对应的参数值
await createC2CConversation({ /* 参数对象 */ });

createGroupConversation

function createGroupConversation(groupParams: { groupId: string })
创建群聊会话 创建指定群组的群聊会话

示例

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

const { createGroupConversation } = useConversationListState();

// 调用函数
// 参数示例:
// groupParams: 对应的参数值
await createGroupConversation({ /* 参数对象 */ });

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();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await setGroupApplicationList({ /* 参数对象 */ });

setFriendList

function setFriendList(listParams: { friendList: any[] })
设置好友列表 更新好友列表数据

示例

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

const { setFriendList } = useContactListState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await setFriendList({ /* 参数对象 */ });

setGroupList

function setGroupList(listParams: { groupList: any[] })
设置群组列表 更新群组列表数据

示例

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

const { setGroupList } = useContactListState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await setGroupList({ /* 参数对象 */ });

setBlackList

function setBlackList(listParams: { blackList: any[] })
设置黑名单列表 更新黑名单列表数据

示例

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

const { setBlackList } = useContactListState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await setBlackList({ /* 参数对象 */ });

setFriendApplicationUnreadCount

function setFriendApplicationUnreadCount(countParams: { count: number })
设置好友申请未读数 更新好友申请的未读数量

示例

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

const { setFriendApplicationUnreadCount } = useContactListState();

// 调用函数
// 参数示例:
// countParams: 对应的参数值
await setFriendApplicationUnreadCount({ /* 参数对象 */ });

setFriendGroupList

function setFriendGroupList(listParams: { groupList: any[] })
设置好友分组列表 更新好友分组列表数据

示例

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

const { setFriendGroupList } = useContactListState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await setFriendGroupList({ /* 参数对象 */ });

setFriendApplicationList

function setFriendApplicationList(listParams: { applicationList: any[] })
设置好友申请列表 更新好友申请列表数据

示例

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

const { setFriendApplicationList } = useContactListState();

// 调用函数
// 参数示例:
// listParams: 对应的参数值
await setFriendApplicationList({ /* 参数对象 */ });

initContactListWatcher

function initContactListWatcher(watcherParams?: { autoUpdate?: boolean })
初始化联系人监听器 初始化联系人列表的数据监听

示例

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

const { initContactListWatcher } = useContactListState();

// 调用函数
// 参数示例:
// watcherParams?: 对应的参数值
await initContactListWatcher({ /* 参数对象 */ });

addFriend

function addFriend(friendParams: { userId: string; remark?: string; addSource?: string })
添加好友 向指定用户发送好友申请

示例

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

const { addFriend } = useContactListState();

// 调用函数
// 参数示例:
// friendParams: 对应的参数值
await addFriend({ /* 参数对象 */ });

markFriendApplicationAsRead

function markFriendApplicationAsRead(readParams: { applicationList: string[] })
标记好友申请为已读 将指定的好友申请标记为已读状态

示例

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

const { markFriendApplicationAsRead } = useContactListState();

// 调用函数
// 参数示例:
// readParams: 对应的参数值
await markFriendApplicationAsRead({ /* 参数对象 */ });

acceptFriendApplication

function acceptFriendApplication(acceptParams: { userId: string; remark?: string })
接受好友申请 接受指定用户的好友申请

示例

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

const { acceptFriendApplication } = useContactListState();

// 调用函数
// 参数示例:
// acceptParams: 对应的参数值
await acceptFriendApplication({ /* 参数对象 */ });

refuseFriendApplication

function refuseFriendApplication(refuseParams: { userId: string })
拒绝好友申请 拒绝指定用户的好友申请

示例

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

const { refuseFriendApplication } = useContactListState();

// 调用函数
// 参数示例:
// refuseParams: 对应的参数值
await refuseFriendApplication({ /* 参数对象 */ });

addToBlacklist

function addToBlacklist(blacklistParams: { userId: string })
添加到黑名单 将指定用户添加到黑名单

示例

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

const { addToBlacklist } = useContactListState();

// 调用函数
// 参数示例:
// blacklistParams: 对应的参数值
await addToBlacklist({ /* 参数对象 */ });

removeFromBlacklist

function removeFromBlacklist(removeParams: { userId: string })
从黑名单移除 将指定用户从黑名单中移除

示例

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

const { removeFromBlacklist } = useContactListState();

// 调用函数
// 参数示例:
// removeParams: 对应的参数值
await removeFromBlacklist({ /* 参数对象 */ });

deleteFriend

function deleteFriend(deleteParams: { userId: string })
删除好友 删除指定的好友关系

示例

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

const { deleteFriend } = useContactListState();

// 调用函数
// 参数示例:
// deleteParams: 对应的参数值
await deleteFriend({ /* 参数对象 */ });

setFriendRemark

function setFriendRemark(remarkParams: { userId: string; remark: string })
设置好友备注 为指定好友设置备注名称

示例

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

const { setFriendRemark } = useContactListState();

// 调用函数
// 参数示例:
// remarkParams: 对应的参数值
await setFriendRemark({ /* 参数对象 */ });

createFriendGroup

function createFriendGroup(groupParams: { groupName: string; userList?: string[] })
创建好友分组 创建新的好友分组

示例

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

const { createFriendGroup } = useContactListState();

// 调用函数
// 参数示例:
// groupParams: 对应的参数值
await createFriendGroup({ /* 参数对象 */ });

deleteFriendGroup

function deleteFriendGroup(deleteParams: { groupName: string })
删除好友分组 删除指定的好友分组

示例

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

const { deleteFriendGroup } = useContactListState();

// 调用函数
// 参数示例:
// deleteParams: 对应的参数值
await deleteFriendGroup({ /* 参数对象 */ });

addToFriendGroup

function addToFriendGroup(addParams: { groupName: string; userList: string[] })
添加到好友分组 将好友添加到指定分组

示例

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

const { addToFriendGroup } = useContactListState();

// 调用函数
// 参数示例:
// addParams: 对应的参数值
await addToFriendGroup({ /* 参数对象 */ });

removeFromFriendGroup

function removeFromFriendGroup(removeParams: { groupName: string; userList: string[] })
从好友分组移除 将好友从指定分组中移除

示例

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

const { removeFromFriendGroup } = useContactListState();

// 调用函数
// 参数示例:
// removeParams: 对应的参数值
await removeFromFriendGroup({ /* 参数对象 */ });

renameFriendGroup

function renameFriendGroup(renameParams: { oldGroupName: string; newGroupName: string })
重命名好友分组 修改好友分组的名称

示例

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

const { renameFriendGroup } = useContactListState();

// 调用函数
// 参数示例:
// renameParams: 对应的参数值
await renameFriendGroup({ /* 参数对象 */ });

joinGroup

function joinGroup(joinParams: { groupId: string; message?: string })
加入群组 申请加入指定群组

示例

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

const { joinGroup } = useContactListState();

// 调用函数
// 参数示例:
// joinParams: 对应的参数值
await joinGroup({ /* 参数对象 */ });

acceptGroupApplication

function acceptGroupApplication(acceptParams: { groupId: string; userId: string })
接受群组申请 接受用户的入群申请

示例

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

const { acceptGroupApplication } = useContactListState();

// 调用函数
// 参数示例:
// acceptParams: 对应的参数值
await acceptGroupApplication({ /* 参数对象 */ });

refuseGroupApplication

function refuseGroupApplication(refuseParams: { groupId: string; userId: string; reason?: string })
拒绝群组申请 拒绝用户的入群申请

示例

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

const { refuseGroupApplication } = useContactListState();

// 调用函数
// 参数示例:
// refuseParams: 对应的参数值
await refuseGroupApplication({ /* 参数对象 */ });

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);

userIDRef

const userIDRef: Ref<string | undefined>
用户ID 当前C2C会话对方的用户ID
类型: Ref<string | undefined>

示例

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

const { userIDRef } = useC2CSettingState();

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

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

nickRef

const nickRef: Ref<string | undefined>
用户昵称 当前C2C会话对方的昵称
类型: Ref<string | undefined>

示例

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

const { nickRef } = useC2CSettingState();

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

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

avatarRef

const avatarRef: Ref<string | undefined>
用户头像 当前C2C会话对方的头像URL
类型: Ref<string | undefined>

示例

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

const { avatarRef } = useC2CSettingState();

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

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

signatureRef

const signatureRef: Ref<string | undefined>
用户个性签名 当前C2C会话对方的个性签名
类型: Ref<string | undefined>

示例

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

const { signatureRef } = useC2CSettingState();

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

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

remarkRef

const remarkRef: Ref<string | undefined>
好友备注名 当前用户对C2C会话对方设置的备注名
类型: Ref<string | undefined>

示例

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

const { remarkRef } = useC2CSettingState();

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

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

isMutedRef

const isMutedRef: Ref<boolean | undefined>
会话静音状态 当前C2C会话是否处于静音状态
类型: Ref<boolean | undefined>

示例

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

const { isMutedRef } = useC2CSettingState();

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

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

isPinnedRef

const isPinnedRef: Ref<boolean | undefined>
会话置顶状态 当前C2C会话是否处于置顶状态
类型: Ref<boolean | undefined>

示例

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

const { isPinnedRef } = useC2CSettingState();

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

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

isContactRef

const isContactRef: Ref<boolean | undefined>
好友关系状态 当前用户与C2C会话对方是否为好友关系
类型: Ref<boolean | undefined>

示例

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

const { isContactRef } = useC2CSettingState();

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

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

userID

const userID: Ref<any>
用户ID
类型: Ref<any>

示例

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

const { userID } = useC2CSettingState();

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

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

avatar

const avatar: Ref<any>
用户头像URL
类型: Ref<any>

示例

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

const { avatar } = useC2CSettingState();

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

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

signature

const signature: Ref<any>
用户个性签名
类型: Ref<any>

示例

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

const { signature } = useC2CSettingState();

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

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

remark

const remark: Ref<any>
用户备注名
类型: Ref<any>

示例

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

const { remark } = useC2CSettingState();

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

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

isMuted

const isMuted: Ref<any>
是否已静音
类型: Ref<any>

示例

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

const { isMuted } = useC2CSettingState();

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

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

isPinned

const isPinned: Ref<any>
是否已置顶
类型: Ref<any>

示例

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

const { isPinned } = useC2CSettingState();

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

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

isContact

const isContact: Ref<any>
是否为联系人
类型: Ref<any>

示例

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

const { isContact } = useC2CSettingState();

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

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

接口函数

setChatPinned

function setChatPinned(pinParams: { conversationId: string; isPinned: boolean })
设置聊天置顶 设置单聊会话的置顶状态

示例

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

const { setChatPinned } = useC2CSettingState();

// 调用函数
// 参数示例:
// pinParams: 对应的参数值
await setChatPinned({ /* 参数对象 */ });

setChatMuted

function setChatMuted(muteParams: { conversationId: string; isMuted: boolean })
设置聊天免打扰 设置单聊会话的免打扰状态

示例

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

const { setChatMuted } = useC2CSettingState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await setChatMuted({ /* 参数对象 */ });

setUserRemark

function setUserRemark(remarkParams: { userId: string; remark: string })
设置用户备注 为指定用户设置备注名称

示例

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

const { setUserRemark } = useC2CSettingState();

// 调用函数
// 参数示例:
// remarkParams: 对应的参数值
await setUserRemark({ /* 参数对象 */ });

GroupSettingState

👥 群聊设置管理模块

核心功能：管理群聊的各种设置和操作，包括群信息管理、成员管理、权限控制等完整的群管理功能。

技术特点：支持群权限管理、成员操作、群设置同步等功能。新增groupID、groupType、groupName等完整的群信息响应式数据和管理接口。

业务价值：为群主和管理员提供完整的群管理能力，维护群秩序。

应用场景：群管理、成员管理、权限控制、群设置等场景。

响应式数据

groupID

const groupID: Ref<any>
群组ID
类型: Ref<any>

示例

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

const { groupID } = useGroupSettingState();

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

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

groupType

const groupType: Ref<any>
群组类型
类型: Ref<any>

示例

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

const { groupType } = useGroupSettingState();

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

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

groupName

const groupName: Ref<any>
群组名称
类型: Ref<any>

示例

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

const { groupName } = useGroupSettingState();

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

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

avatar

const avatar: Ref<any>
用户头像URL
类型: Ref<any>

示例

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

const { avatar } = useGroupSettingState();

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

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

introduction

const introduction: Ref<any>
群组介绍
类型: Ref<any>

示例

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

const { introduction } = useGroupSettingState();

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

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

notification

const notification: Ref<any>
群组公告
类型: Ref<any>

示例

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

const { notification } = useGroupSettingState();

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

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

isMuted

const isMuted: Ref<any>
是否已静音
类型: Ref<any>

示例

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

const { isMuted } = useGroupSettingState();

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

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

isPinned

const isPinned: Ref<any>
是否已置顶
类型: Ref<any>

示例

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

const { isPinned } = useGroupSettingState();

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

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

groupOwner

const groupOwner: Ref<any>
群主信息
类型: Ref<any>

示例

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

const { groupOwner } = useGroupSettingState();

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

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

adminMembers

const adminMembers: Ref<any>
管理员列表
类型: Ref<any>

示例

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

const { adminMembers } = useGroupSettingState();

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

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

allMembers

const allMembers: Ref<any>
所有成员列表
类型: Ref<any>

示例

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

const { allMembers } = useGroupSettingState();

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

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

memberCount

const memberCount: Ref<any>
成员总数
类型: Ref<any>

示例

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

const { memberCount } = useGroupSettingState();

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

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

maxMemberCount

const maxMemberCount: Ref<any>
最大成员数
类型: Ref<any>

示例

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

const { maxMemberCount } = useGroupSettingState();

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

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

currentUserID

const currentUserID: Ref<any>
当前用户ID
类型: Ref<any>

示例

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

const { currentUserID } = useGroupSettingState();

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

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

currentUserRole

const currentUserRole: Ref<any>
当前用户角色
类型: Ref<any>

示例

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

const { currentUserRole } = useGroupSettingState();

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

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

nameCard

const nameCard: Ref<any>
用户名片
类型: Ref<any>

示例

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

const { nameCard } = useGroupSettingState();

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

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

isMuteAllMembers

const isMuteAllMembers: Ref<any>
是否禁言所有成员
类型: Ref<any>

示例

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

const { isMuteAllMembers } = useGroupSettingState();

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

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

isInGroup

const isInGroup: Ref<any>
是否在群组中
类型: Ref<any>

示例

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

const { isInGroup } = useGroupSettingState();

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

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

inviteOption

const inviteOption: Ref<any>
邀请选项
类型: Ref<any>

示例

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

const { inviteOption } = useGroupSettingState();

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

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

接口函数

getGroupMemberList

function getGroupMemberList(memberParams: { groupId: string; filter?: number; nextSeq?: number })
获取群成员列表 分页获取群组成员信息

示例

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

const { getGroupMemberList } = useGroupSettingState();

// 调用函数
// 参数示例:
// memberParams: 对应的参数值
await getGroupMemberList({ /* 参数对象 */ });

updateGroupProfile

function updateGroupProfile(profileParams: { groupId: string; groupName?: string; avatar?: string; introduction?: string; notification?: string })
更新群资料 更新群组的基本信息

示例

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

const { updateGroupProfile } = useGroupSettingState();

// 调用函数
// 参数示例:
// profileParams: 对应的参数值
await updateGroupProfile({ /* 参数对象 */ });

addGroupMember

function addGroupMember(addParams: { groupId: string; userList: string[] })
添加群成员 向群组添加新成员

示例

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

const { addGroupMember } = useGroupSettingState();

// 调用函数
// 参数示例:
// addParams: 对应的参数值
await addGroupMember({ /* 参数对象 */ });

deleteGroupMember

function deleteGroupMember(deleteParams: { groupId: string; userList: string[]; reason?: string })
删除群成员 从群组中移除指定成员

示例

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

const { deleteGroupMember } = useGroupSettingState();

// 调用函数
// 参数示例:
// deleteParams: 对应的参数值
await deleteGroupMember({ /* 参数对象 */ });

changeGroupOwner

function changeGroupOwner(ownerParams: { groupId: string; newOwnerUserId: string })
转让群主 将群主身份转让给指定成员

示例

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

const { changeGroupOwner } = useGroupSettingState();

// 调用函数
// 参数示例:
// ownerParams: 对应的参数值
await changeGroupOwner({ /* 参数对象 */ });

setGroupMemberRole

function setGroupMemberRole(roleParams: { groupId: string; userId: string; role: number })
设置群成员角色 设置群成员的角色权限

示例

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

const { setGroupMemberRole } = useGroupSettingState();

// 调用函数
// 参数示例:
// roleParams: 对应的参数值
await setGroupMemberRole({ /* 参数对象 */ });

setGroupMemberNameCard

function setGroupMemberNameCard(nameCardParams: { groupId: string; userId: string; nameCard: string })
设置群成员名片 设置群成员的群名片

示例

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

const { setGroupMemberNameCard } = useGroupSettingState();

// 调用函数
// 参数示例:
// nameCardParams: 对应的参数值
await setGroupMemberNameCard({ /* 参数对象 */ });

setChatPinned

function setChatPinned(pinParams: { conversationId: string; isPinned: boolean })
设置聊天置顶 设置单聊会话的置顶状态

示例

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

const { setChatPinned } = useGroupSettingState();

// 调用函数
// 参数示例:
// pinParams: 对应的参数值
await setChatPinned({ /* 参数对象 */ });

setChatMuted

function setChatMuted(muteParams: { conversationId: string; isMuted: boolean })
设置聊天免打扰 设置单聊会话的免打扰状态

示例

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

const { setChatMuted } = useGroupSettingState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await setChatMuted({ /* 参数对象 */ });

setGroupMemberMuteTime

function setGroupMemberMuteTime(muteParams: { groupId: string; userId: string; muteTime: number })
设置群成员禁言 设置群成员的禁言时间

示例

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

const { setGroupMemberMuteTime } = useGroupSettingState();

// 调用函数
// 参数示例:
// muteParams: 对应的参数值
await setGroupMemberMuteTime({ /* 参数对象 */ });

setMuteAllMember

function setMuteAllMember(muteAllParams: { groupId: string; isMuted: boolean })
设置全员禁言 设置群组的全员禁言状态

示例

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

const { setMuteAllMember } = useGroupSettingState();

// 调用函数
// 参数示例:
// muteAllParams: 对应的参数值
await setMuteAllMember({ /* 参数对象 */ });

dismissGroup

function dismissGroup(dismissParams: { groupId: string })
解散群组 解散指定的群组

示例

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

const { dismissGroup } = useGroupSettingState();

// 调用函数
// 参数示例:
// dismissParams: 对应的参数值
await dismissGroup({ /* 参数对象 */ });

quitGroup

function quitGroup(quitParams: { groupId: string })
退出群组 退出指定的群组

示例

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

const { quitGroup } = useGroupSettingState();

// 调用函数
// 参数示例:
// quitParams: 对应的参数值
await quitGroup({ /* 参数对象 */ });

hasPermission

function hasPermission(permissionParams: { permission: string })
检查权限 检查当前用户是否具有指定权限

示例

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

const { hasPermission } = useGroupSettingState();

// 调用函数
// 参数示例:
// permissionParams: 对应的参数值
await hasPermission({ /* 参数对象 */ });

canOperateOnMember

function canOperateOnMember(operationParams: { targetUserId: string; operation: string })
检查成员操作权限 检查是否可以对指定成员执行操作

示例

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

const { canOperateOnMember } = useGroupSettingState();

// 调用函数
// 参数示例:
// operationParams: 对应的参数值
await canOperateOnMember({ /* 参数对象 */ });

getAvailablePermissions

function getAvailablePermissions(queryParams?: { userId?: string })
获取可用权限 获取当前用户或指定用户的可用权限列表

示例

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

const { getAvailablePermissions } = useGroupSettingState();

// 调用函数
// 参数示例:
// queryParams?: 对应的参数值
await getAvailablePermissions({ /* 参数对象 */ });

initWatcher

function initWatcher(watcherParams?: { autoUpdate?: boolean })
初始化监听器 初始化群组设置的数据监听

示例

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

const { initWatcher } = useGroupSettingState();

// 调用函数
// 参数示例:
// watcherParams?: 对应的参数值
await initWatcher({ /* 参数对象 */ });

VideoMixerState

🎬 视频混流管理模块

核心功能：管理视频混流功能，支持多路视频合成、布局管理、媒体源控制等高级视频处理功能。

技术特点：支持实时视频混流、动态布局调整、媒体源管理等功能。新增isVideoMixerEnabled、mediaSourceList、activeMediaSource响应式数据和完整的混流控制接口。

业务价值：为直播平台提供专业的视频制作能力，提升直播质量。

应用场景：多人直播、画中画、视频合成、专业制作等场景。

响应式数据

publishVideoQuality

const publishVideoQuality: Ref<any>
根据分辨率获取尺寸 @param {TRTCVideoResolution} resolution - 视频分辨率 @returns {Object} 包含宽度和高度的对象
类型: Ref<any>

示例

const size = getSizeByResolution(TRTCVideoResolution.TRTCVideoResolution_1280_720);
console.log(size.width, size.height); // 输出: 1280, 720

isVideoMixerEnabled

const isVideoMixerEnabled: Ref<any>
视频混流是否启用
类型: Ref<any>

示例

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

const { isVideoMixerEnabled } = useVideoMixerState();

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

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

mediaSourceList

const mediaSourceList: Ref<any>
媒体源列表
类型: Ref<any>

示例

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

const { mediaSourceList } = useVideoMixerState();

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

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

activeMediaSource

const activeMediaSource: Ref<any>
当前活跃的媒体源
类型: Ref<any>

示例

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

const { activeMediaSource } = useVideoMixerState();

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

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

接口函数

getVideoDataByQuality

function getVideoDataByQuality(qualityParams: { quality: VideoQuality })
根据质量获取视频数据 获取指定质量的视频编码参数

示例

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

const { getVideoDataByQuality } = useVideoMixerState();

// 调用函数
// 参数示例:
// qualityParams: 对应的参数值
await getVideoDataByQuality({ /* 参数对象 */ });

getSizeByQuality

function getSizeByQuality(qualityParams: { quality: VideoQuality })
根据质量获取尺寸 获取指定质量对应的视频尺寸

示例

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

const { getSizeByQuality } = useVideoMixerState();

// 调用函数
// 参数示例:
// qualityParams: 对应的参数值
await getSizeByQuality({ /* 参数对象 */ });

getSizeByResolution

function getSizeByResolution(resolutionParams: { resolution: VideoResolution })
根据分辨率获取尺寸 获取指定分辨率对应的视频尺寸

示例

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

const { getSizeByResolution } = useVideoMixerState();

// 调用函数
// 参数示例:
// resolutionParams: 对应的参数值
await getSizeByResolution({ /* 参数对象 */ });

transformTUIVideoQualityToTRTCVideoResolution

function transformTUIVideoQualityToTRTCVideoResolution(qualityParams: { quality: VideoQuality })
转换视频质量到TRTC分辨率 将TUI视频质量转换为TRTC分辨率

示例

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

const { transformTUIVideoQualityToTRTCVideoResolution } = useVideoMixerState();

// 调用函数
// 参数示例:
// qualityParams: 对应的参数值
await transformTUIVideoQualityToTRTCVideoResolution({ /* 参数对象 */ });

transformTRTCVideoResolutionToTUIVideoQuality

function transformTRTCVideoResolutionToTUIVideoQuality(resolutionParams: { resolution: TRTCVideoResolution })
转换TRTC分辨率到视频质量 将TRTC分辨率转换为TUI视频质量

示例

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

const { transformTRTCVideoResolutionToTUIVideoQuality } = useVideoMixerState();

// 调用函数
// 参数示例:
// resolutionParams: 对应的参数值
await transformTRTCVideoResolutionToTUIVideoQuality({ /* 参数对象 */ });

transformTRTCVideoResModeToTUIVideoResMode

function transformTRTCVideoResModeToTUIVideoResMode(modeParams: { mode: TRTCVideoResMode })
转换TRTC分辨率模式 将TRTC分辨率模式转换为TUI分辨率模式

示例

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

const { transformTRTCVideoResModeToTUIVideoResMode } = useVideoMixerState();

// 调用函数
// 参数示例:
// modeParams: 对应的参数值
await transformTRTCVideoResModeToTUIVideoResMode({ /* 参数对象 */ });

changeActiveMediaSource

function changeActiveMediaSource(sourceParams: { sourceId: string })
切换活跃媒体源 切换当前活跃的媒体源

示例

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

const { changeActiveMediaSource } = useVideoMixerState();

// 调用函数
// 参数示例:
// sourceParams: 对应的参数值
await changeActiveMediaSource({ /* 参数对象 */ });

updateVideoQuality

function updateVideoQuality(qualityParams: { quality: VideoQuality })
更新视频质量 更新视频混流的质量参数

示例

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

const { updateVideoQuality } = useVideoMixerState();

// 调用函数
// 参数示例:
// qualityParams: 对应的参数值
await updateVideoQuality({ /* 参数对象 */ });

getDefaultLayoutByMediaSource

function getDefaultLayoutByMediaSource(sourceParams: { sourceType: MediaSourceType })
根据媒体源获取默认布局 获取指定媒体源类型的默认布局

示例

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

const { getDefaultLayoutByMediaSource } = useVideoMixerState();

// 调用函数
// 参数示例:
// sourceParams: 对应的参数值
await getDefaultLayoutByMediaSource({ /* 参数对象 */ });

addMediaSource

function addMediaSource(sourceParams: { sourceId: string; sourceType: number; sourceInfo: any })
添加媒体源 向混流器添加新的媒体源

示例

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

const { addMediaSource } = useVideoMixerState();

// 调用函数
// 参数示例:
// sourceParams: 对应的参数值
await addMediaSource({ /* 参数对象 */ });

updateMediaSource

function updateMediaSource(updateParams: { sourceId: string; sourceInfo: any })
更新媒体源 更新指定的媒体源配置

示例

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

const { updateMediaSource } = useVideoMixerState();

// 调用函数
// 参数示例:
// updateParams: 对应的参数值
await updateMediaSource({ /* 参数对象 */ });

removeMediaSource

function removeMediaSource(removeParams: { sourceId: string })
移除媒体源 从混流器中移除指定的媒体源

示例

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

const { removeMediaSource } = useVideoMixerState();

// 调用函数
// 参数示例:
// removeParams: 对应的参数值
await removeMediaSource({ /* 参数对象 */ });

enableLocalVideoMixer

function enableLocalVideoMixer(enableParams: { enable: boolean })
启用本地视频混流 开启或关闭本地视频混流功能

示例

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

const { enableLocalVideoMixer } = useVideoMixerState();

// 调用函数
// 参数示例:
// enableParams: 对应的参数值
await enableLocalVideoMixer({ /* 参数对象 */ });

clearMediaSource

function clearMediaSource()
清空所有媒体源

示例

// 清空所有媒体源
clearMediaSource();

initMediaSourceManager

function initMediaSourceManager(initParams?: { config?: any })
初始化媒体源管理器 初始化媒体源管理器配置

示例

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

const { initMediaSourceManager } = useVideoMixerState();

// 调用函数
// 参数示例:
// initParams?: 对应的参数值
await initMediaSourceManager({ /* 参数对象 */ });

initVideoMixerState

function initVideoMixerState(initParams?: { config?: any })
初始化视频混流状态 初始化视频混流器的状态

示例

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

const { initVideoMixerState } = useVideoMixerState();

// 调用函数
// 参数示例:
// initParams?: 对应的参数值
await initVideoMixerState({ /* 参数对象 */ });

VirtualBackgroundState

🖼️ 虚拟背景管理模块

核心功能：管理虚拟背景功能，支持背景替换、背景模糊、自定义背景等视频美化功能。

技术特点：基于AI技术实现实时背景分割和替换。新增virtualBackgroundConfig响应式数据和isSupported、setVirtualBackground接口函数。

业务价值：为用户提供隐私保护和视频美化功能，提升视频通话体验。

应用场景：视频通话、在线会议、直播美化、隐私保护等场景。

响应式数据

virtualBackgroundConfig

const virtualBackgroundConfig: Ref<any>
虚拟背景配置
类型: Ref<any>

示例

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

const { virtualBackgroundConfig } = useVirtualBackgroundState();

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

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

接口函数

initVirtualBackground

function initVirtualBackground(initParams: { config: VirtualBackgroundConfig })
初始化虚拟背景 初始化虚拟背景功能配置

示例

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

const { initVirtualBackground } = useVirtualBackgroundState();

// 调用函数
// 参数示例:
// initParams: 对应的参数值
await initVirtualBackground({ /* 参数对象 */ });

saveVirtualBackground

function saveVirtualBackground(saveParams: { config: VirtualBackgroundConfig })
保存虚拟背景 保存虚拟背景配置到本地

示例

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

const { saveVirtualBackground } = useVirtualBackgroundState();

// 调用函数
// 参数示例:
// saveParams: 对应的参数值
await saveVirtualBackground({ /* 参数对象 */ });

isSupported

function isSupported(checkParams?: { feature?: string })
检查是否支持 检查当前设备是否支持虚拟背景功能

示例

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

const { isSupported } = useVirtualBackgroundState();

// 调用函数
// 参数示例:
// checkParams?: 对应的参数值
await isSupported({ /* 参数对象 */ });

setVirtualBackground

function setVirtualBackground(bgParams: { backgroundType: number; backgroundValue?: string })
设置虚拟背景 设置虚拟背景的类型和内容

示例

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

const { setVirtualBackground } = useVirtualBackgroundState();

// 调用函数
// 参数示例:
// bgParams: 对应的参数值
await setVirtualBackground({ /* 参数对象 */ });

ASRState

🎙️ 语音识别管理模块

核心功能：管理语音识别功能，支持实时语音转文字、转录历史管理、转录导出等功能。

技术特点：基于先进的ASR技术，支持多语言识别、实时转录、历史记录等功能。新增recentTranscripts、transcriptHistory响应式数据和exportTranscripts接口。

业务价值：为用户提供语音转文字服务，提升沟通效率和可访问性。

应用场景：会议记录、语音转录、无障碍通信、内容记录等场景。

响应式数据

recentTranscripts

const recentTranscripts: Ref<any>
最近的语音转录记录
类型: Ref<any>

示例

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

const { recentTranscripts } = useASRState();

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

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

transcriptHistory

const transcriptHistory: Ref<any>
语音转录历史记录
类型: Ref<any>

示例

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

const { transcriptHistory } = useASRState();

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

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

接口函数

setRecentTranscriptsDuration

function setRecentTranscriptsDuration(durationParams: { duration: number })
设置最近转录时长 设置保留最近转录内容的时长

示例

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

const { setRecentTranscriptsDuration } = useASRState();

// 调用函数
// 参数示例:
// durationParams: 对应的参数值
await setRecentTranscriptsDuration({ /* 参数对象 */ });

clearHistory

function clearHistory()
清空转录历史记录

示例

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

const { clearHistory, transcriptHistory } = useASRState();

// 清空所有转录记录
clearHistory();
console.log('转录记录已清空:', transcriptHistory.value.length === 0);

exportTranscripts

function exportTranscripts(exportParams: { format?: string; timeRange?: { start: number; end: number } })
导出转录内容 导出指定时间范围的转录内容

示例

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

const { exportTranscripts } = useASRState();

// 调用函数
// 参数示例:
// exportParams: 对应的参数值
await exportTranscripts({ /* 参数对象 */ });

SearchState

🔍 搜索功能管理模块

核心功能：管理全局搜索功能，支持消息搜索、用户搜索、群组搜索等多维度搜索能力。

技术特点：支持高级搜索、搜索历史、搜索建议等功能。重构响应式数据为keyword、results、isLoading等标准化字段，提供完整的搜索接口。

业务价值：为用户提供快速查找信息的能力，提升使用效率。

应用场景：消息搜索、联系人搜索、内容查找、历史记录等场景。

响应式数据

keyword

const keyword: Ref<any>
搜索关键词
类型: Ref<any>

示例

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

const { keyword } = useSearchState();

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

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

results

const results: Ref<any>
搜索结果
类型: Ref<any>

示例

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

const { results } = useSearchState();

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

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

isLoading

const isLoading: Ref<any>
是否正在加载
类型: Ref<any>

示例

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

const { isLoading } = useSearchState();

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

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

error

const error: Ref<any>
错误信息
类型: Ref<any>

示例

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

const { error } = useSearchState();

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

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

searchAdvancedParams

const searchAdvancedParams: Ref<any>
高级搜索参数
类型: Ref<any>

示例

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

const { searchAdvancedParams } = useSearchState();

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

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

selectedSearchType

const selectedSearchType: Ref<any>
选中的搜索类型
类型: Ref<any>

示例

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

const { selectedSearchType } = useSearchState();

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

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

接口函数

setKeyword

function setKeyword(keywordParams: { keyword: string })
设置关键词 设置搜索的关键词

示例

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

const { setKeyword } = useSearchState();

// 调用函数
// 参数示例:
// keywordParams: 对应的参数值
await setKeyword({ /* 参数对象 */ });

setSelectedType

function setSelectedType(typeParams: { searchType: string })
设置选中类型 设置当前选中的搜索类型

示例

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

const { setSelectedType } = useSearchState();

// 调用函数
// 参数示例:
// typeParams: 对应的参数值
await setSelectedType({ /* 参数对象 */ });

setSearchMessageAdvancedParams

function setSearchMessageAdvancedParams(messageParams: { conversationId?: string; timeRange?: { start: number; end: number }; senderList?: string[] })
设置消息搜索高级参数 设置消息搜索的高级筛选参数

示例

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

const { setSearchMessageAdvancedParams } = useSearchState();

// 调用函数
// 参数示例:
// messageParams: 对应的参数值
await setSearchMessageAdvancedParams({ /* 参数对象 */ });

setSearchUserAdvancedParams

function setSearchUserAdvancedParams(userParams: { userType?: string; isOnline?: boolean })
设置用户搜索高级参数 设置用户搜索的高级筛选参数

示例

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

const { setSearchUserAdvancedParams } = useSearchState();

// 调用函数
// 参数示例:
// userParams: 对应的参数值
await setSearchUserAdvancedParams({ /* 参数对象 */ });

setSearchGroupAdvancedParams

function setSearchGroupAdvancedParams(groupParams: { groupType?: string; memberCountRange?: { min: number; max: number } })
设置群组搜索高级参数 设置群组搜索的高级筛选参数

示例

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

const { setSearchGroupAdvancedParams } = useSearchState();

// 调用函数
// 参数示例:
// groupParams: 对应的参数值
await setSearchGroupAdvancedParams({ /* 参数对象 */ });

loadMore

function loadMore(loadParams?: { cursor?: string; count?: number })
加载更多 加载更多搜索结果

示例

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

const { loadMore } = useSearchState();

// 调用函数
// 参数示例:
// loadParams?: 对应的参数值
await loadMore({ /* 参数对象 */ });

SeatStore

🪑 座位存储管理模块

核心功能：提供座位状态的底层存储和管理，支持座位信息缓存、用户信息映射、设备请求处理等核心功能。

技术特点：采用响应式存储设计，支持实时状态同步、事件驱动更新等功能。新增liveOwnerUserId、localUserId、seatList等响应式数据和getUserInfo、convertUserInfoToAudienceInfo接口。

业务价值：为座位管理提供可靠的数据基础，确保座位状态的一致性。

应用场景：座位状态管理、用户信息存储、设备状态跟踪等底层场景。

响应式数据

liveOwnerUserId

const liveOwnerUserId: Ref<any>
直播间主播用户ID
类型: Ref<any>

示例

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

const { liveOwnerUserId } = useSeatStore();

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

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

localUserId

const localUserId: Ref<any>
本地用户ID
类型: Ref<any>

示例

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

const { localUserId } = useSeatStore();

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

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

seatList

const seatList: Ref<any>
麦位列表，包含所有麦位的状态和用户信息
类型: Ref<any>

示例

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

const { seatList } = useSeatStore();

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

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

coHostUserList

const coHostUserList: Ref<any>
连麦主播列表
类型: Ref<any>

示例

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

const { coHostUserList } = useSeatStore();

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

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

sentDeviceRequestMap

const sentDeviceRequestMap: Ref<any>
已发送的设备请求映射
类型: Ref<any>

示例

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

const { sentDeviceRequestMap } = useSeatStore();

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

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

receivedDeviceRequestMap

const receivedDeviceRequestMap: Ref<any>
已接收的设备请求映射
类型: Ref<any>

示例

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

const { receivedDeviceRequestMap } = useSeatStore();

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

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

userInfoMap

const userInfoMap: Ref<any>
用户信息映射表
类型: Ref<any>

示例

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

const { userInfoMap } = useSeatStore();

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

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

接口函数

getUserInfo

function getUserInfo(userParams: { userId: string })
获取用户信息 获取指定用户的详细信息

示例

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

const { getUserInfo } = useSeatStore();

// 调用函数
// 参数示例:
// userParams: 对应的参数值
await getUserInfo({ /* 参数对象 */ });

convertUserInfoToAudienceInfo

function convertUserInfoToAudienceInfo(convertParams: { userInfo: any })
转换用户信息为观众信息 将用户信息转换为观众信息格式

示例

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

const { convertUserInfoToAudienceInfo } = useSeatStore();

// 调用函数
// 参数示例:
// convertParams: 对应的参数值
await convertUserInfoToAudienceInfo({ /* 参数对象 */ });