atomicx-core sdk API 文档

atomicx-core sdk

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

LiveListState

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

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

const { liveList } = useLiveListState();

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

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

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

const { liveListCursor } = useLiveListState();

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

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

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

const { createLive } = useLiveListState();

// 创建带有自定义设置的直播间
await createLive({
  liveId: 'live_room_123456',
  liveName: 'My Live Room',
  coverUrl: 'https://example.com/cover.jpg',
  backgroundUrl: 'https://example.com/bg.jpg',
  isSeatEnabled: true,
  maxSeatCount: 8,
  isPublicVisible: true,
  isGiftEnabled: true
});

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

const { joinLive } = useLiveListState();

// 通过ID加入直播间
await joinLive({
  liveId: 'live_room_123456'
});

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

const { leaveLive } = useLiveListState();

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

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

const { endLive } = useLiveListState();

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

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

const { updateLiveInfo } = useLiveListState();

// 更新直播间信息
await updateLiveInfo({
  coverUrl: 'https://example.com/new-cover.jpg',
  backgroundUrl: 'https://example.com/new-bg.jpg',
  categoryList: [1, 2],
  isPublicVisible: true,
  activityStatus: 1
});

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

const { queryMetaData } = useLiveListState();

// 通过键查询元数据
await queryMetaData({
  keys: ['roomTitle', 'announcement', 'customData']
});

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

const { updateLiveMetaData } = useLiveListState();

// 更新直播间元数据
await updateLiveMetaData({
  metaData: {
    roomTitle: 'New Room Title',
    announcement: 'Welcome to my live room!'
  }
});

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

const { fetchLiveList, liveListCursor } = useLiveListState();

// 首次获取 - 获取初始列表
await fetchLiveList({
  cursor: '',
  count: 20
});

// 加载更多 - 使用游标进行分页
await fetchLiveList({
  cursor: liveListCursor.value,
  count: 20
});

LiveSeatState

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

const { seatList } = useLiveSeatState();

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

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

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

const { canvas } = useLiveSeatState();

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

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

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

const { speakingUsers } = useLiveSeatState();

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

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

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

const { networkQualities } = useLiveSeatState();

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

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

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

const { takeSeat } = useLiveSeatState();

// 上第1个麦位
await takeSeat({
  seatIndex: 1
});

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

const { leaveSeat } = useLiveSeatState();

// 离开第1个麦位
await leaveSeat({
  seatIndex: 1
});

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

const { lockSeat } = useLiveSeatState();

// 锁定第2个麦位
await lockSeat({
  seatIndex: 2
});

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

const { unLockSeat } = useLiveSeatState();

// 解锁第2个麦位
await unLockSeat({
  seatIndex: 2
});

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

const { kickUserOutOfSeat } = useLiveSeatState();

// 将用户踢下麦位
await kickUserOutOfSeat({
  seatIndex: 1,
  userId: 'user_123'
});

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

const { moveUserToSeat } = useLiveSeatState();

// 将用户移动到目标麦位（强制替换策略）
await moveUserToSeat({
  userId: 'user_123',
  targetIndex: 3,
  policy: MoveSeatPolicy.ForceReplace
});

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

const { openRemoteCamera } = useLiveSeatState();

// 允许用户打开摄像头
try {
  await openRemoteCamera({
    userId: 'user123',
    policy: DeviceControlPolicy.UnlockOnly
  });
  console.log('Camera unlocked');
} catch (error) {
  console.error('Failed to unlock camera:', error);
}

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

const { closeRemoteCamera } = useLiveSeatState();

// 关闭远端用户的摄像头
try {
  await closeRemoteCamera({ userId: 'user123' });
  console.log('Camera closed');
} catch (error) {
  console.error('Failed to close camera:', error);
}

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

const { openRemoteMicrophone } = useLiveSeatState();

// 允许用户打开麦克风
try {
  await openRemoteMicrophone({
    userId: 'user123',
    policy: DeviceControlPolicy.UnlockOnly
  });
  console.log('Microphone unlocked');
} catch (error) {
  console.error('Failed to unlock microphone:', error);
}

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

const { closeRemoteMicrophone } = useLiveSeatState();

// 关闭远端用户的麦克风
try {
  await closeRemoteMicrophone({ userId: 'user123' });
  console.log('Microphone closed');
} catch (error) {
  console.error('Failed to close microphone:', error);
}

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

const { muteMicrophone } = useLiveSeatState();

// 静音本地麦克风
await muteMicrophone();
console.log('Microphone muted');

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

const { unmuteMicrophone } = useLiveSeatState();

// 取消静音本地麦克风
await unmuteMicrophone();
console.log('Microphone unmuted');

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

const { startPlayStream } = useLiveSeatState();

// 开始在指定容器中播放流
try {
  await startPlayStream({ view: 'video-container' });
  console.log('Stream playing');
} catch (error) {
  console.error('Failed to play stream:', error);
}

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

const { stopPlayStream } = useLiveSeatState();

// 停止播放流
try {
  await stopPlayStream();
  console.log('Stream stopped');
} catch (error) {
  console.error('Failed to stop stream:', error);
}

LiveMonitorState

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

const { monitorLiveInfoList } = useLiveMonitorState();

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

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

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

const { init } = useLiveMonitorState();

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

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

const { getLiveList } = useLiveMonitorState();

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

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

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

const { closeRoom } = useLiveMonitorState();

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

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

const { sendMessage } = useLiveMonitorState();

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

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

const { startPlay } = useLiveMonitorState();

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

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

const { stopPlay } = useLiveMonitorState();

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

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

const { muteLiveAudio } = useLiveMonitorState();

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

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

MessageInputState

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

const { inputRawValue } = useMessageInputState();

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

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

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

const { isPeerTyping } = useMessageInputState();

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

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

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

const { updateRawValue } = useMessageInputState();

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

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

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

const { setEditorInstance } = useMessageInputState();

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

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

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

const { setContent } = useMessageInputState();

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

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

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

const { insertContent } = useMessageInputState();

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

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

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

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

const { focusEditor } = useMessageInputState();

// 聚焦编辑器
focusEditor();

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

const { blurEditor } = useMessageInputState();

// 失焦编辑器
blurEditor();

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

const { sendMessage } = useMessageInputState();

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

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

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

MessageActionState

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

const { forwardMessageIDList } = useMessageActionState();

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

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

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

const { isForwardMessageSelectionDone } = useMessageActionState();

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

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

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

const { forwardConversationIDList } = useMessageActionState();

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

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

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

const { quotedMessage } = useMessageActionState();

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

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

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

const { forwardMessage } = useMessageActionState();

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

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

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

const { setForwardMessageIDList } = useMessageActionState();

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

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

const { setIsForwardMessageSelectionDone } = useMessageActionState();

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

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

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

const { setForwardConversationIDList } = useMessageActionState();

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

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

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

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

// 取消引用
quoteMessage(undefined);

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

const { clearQuotedMessage } = useMessageActionState();

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

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

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

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

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

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

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

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

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

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

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

const { resetMessageActionState } = useMessageActionState();

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

ConversationListState

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

const { conversationList } = useConversationListState();

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

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

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

const { activeConversation } = useConversationListState();

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

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

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

const { totalUnRead } = useConversationListState();

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

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

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

const { netStatus } = useConversationListState();

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

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

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

const { markConversationUnread } = useConversationListState();

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

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

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

const { setActiveConversation } = useConversationListState();

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

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

const { pinConversation } = useConversationListState();

// 置顶会话
await pinConversation('C2Cuser123', true);

// 取消置顶
await pinConversation('C2Cuser123', false);

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

const { deleteConversation } = useConversationListState();

// 删除会话
try {
  await deleteConversation('C2Cuser123');
  console.log('会话删除成功');
} catch (error) {
  console.error('删除会话失败:', error);
}

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

const { muteConversation } = useConversationListState();

// 开启免打扰
await muteConversation('C2Cuser123', true);

// 关闭免打扰
await muteConversation('C2Cuser123', false);

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

const { setConversationDraft } = useConversationListState();

// 设置会话草稿
await setConversationDraft({
  conversationID: 'C2Cuser123',
  draftText: '这是一条草稿消息'
});

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

const { createC2CConversation } = useConversationListState();

// 创建与用户的单聊会话
try {
  const conversation = await createC2CConversation('user123');
  console.log('单聊会话创建成功:', conversation);
} catch (error) {
  console.error('创建单聊会话失败:', error);
}

import { useConversationListState } from 'tuikit-atomicx-vue3';
import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite';

const { createGroupConversation } = useConversationListState();

// 创建群聊会话
try {
  const conversation = await createGroupConversation({
    name: '我的群聊',
    type: TUIChatEngine.TYPES.GRP_WORK,
    memberList: ['user1', 'user2']
  });
  console.log('群聊会话创建成功:', conversation);
} catch (error) {
  console.error('创建群聊会话失败:', error);
}

ContactListState

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

const { friendList } = useContactListState();

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

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

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

const { groupList } = useContactListState();

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

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

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

const { blackList } = useContactListState();

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

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

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

const { friendApplicationUnreadCount } = useContactListState();

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

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

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

const { friendGroupList } = useContactListState();

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

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

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

const { friendApplicationList } = useContactListState();

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

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

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

const { groupApplicationList } = useContactListState();

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

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

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

const { setGroupApplicationList } = useContactListState();

// 设置群申请列表
await setGroupApplicationList({
  applicationList: []
});

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

const { setFriendList } = useContactListState();

// 设置好友列表
await setFriendList({
  friendList: []
});

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

const { setGroupList } = useContactListState();

// 设置群组列表
await setGroupList({
  groupList: []
});

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

const { setBlackList } = useContactListState();

// 设置黑名单
await setBlackList({
  blackList: []
});

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

const { setFriendApplicationUnreadCount } = useContactListState();

// 设置好友申请未读数
await setFriendApplicationUnreadCount({
  count: 5
});

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

const { setFriendGroupList } = useContactListState();

// 设置好友分组列表
await setFriendGroupList({
  groupList: []
});

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

const { setFriendApplicationList } = useContactListState();

// 设置好友申请列表
await setFriendApplicationList({
  applicationList: []
});

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

const { initContactListWatcher } = useContactListState();

// 初始化通讯录监听器
await initContactListWatcher({
  autoUpdate: true
});

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

const { addFriend } = useContactListState();

// 添加好友
try {
  await addFriend({
    userID: 'user123',
    addSource: 'search',
    remark: '同事小王',
    groupName: '工作',
    wording: '我是小李，想加您为好友'
  });
  console.log('好友申请发送成功');
} catch (error) {
  console.error('添加好友失败:', error);
}

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

const { markFriendApplicationAsRead } = useContactListState();

// 标记好友申请为已读
try {
  await markFriendApplicationAsRead();
  console.log('好友申请已标记为已读');
} catch (error) {
  console.error('标记已读失败:', error);
}

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

const { acceptFriendApplication } = useContactListState();

// 接受好友申请
try {
  await acceptFriendApplication({
    userID: 'user123',
    remark: '新朋友',
    type: 1
  });
  console.log('好友申请已接受');
} catch (error) {
  console.error('接受申请失败:', error);
}

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

const { refuseFriendApplication } = useContactListState();

// 拒绝好友申请
try {
  await refuseFriendApplication('user123');
  console.log('好友申请已拒绝');
} catch (error) {
  console.error('拒绝申请失败:', error);
}

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

const { addToBlacklist } = useContactListState();

// 添加用户到黑名单
try {
  await addToBlacklist(['user123', 'user456']);
  console.log('用户已添加到黑名单');
} catch (error) {
  console.error('添加到黑名单失败:', error);
}

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

const { removeFromBlacklist } = useContactListState();

// 从黑名单移除用户
try {
  await removeFromBlacklist(['user123', 'user456']);
  console.log('用户已从黑名单移除');
} catch (error) {
  console.error('从黑名单移除失败:', error);
}

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

const { deleteFriend } = useContactListState();

// 删除好友
try {
  await deleteFriend({
    userID: 'user123',
    type: 'both'
  });
  console.log('好友删除成功');
} catch (error) {
  console.error('删除好友失败:', error);
}

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

const { setFriendRemark } = useContactListState();

// 设置好友备注
try {
  await setFriendRemark({
    userID: 'user123',
    remark: '小王同事'
  });
  console.log('好友备注设置成功');
} catch (error) {
  console.error('设置备注失败:', error);
}

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

const { createFriendGroup } = useContactListState();

// 创建好友分组
try {
  await createFriendGroup({
    name: '工作同事',
    userIDList: ['user123', 'user456']
  });
  console.log('好友分组创建成功');
} catch (error) {
  console.error('创建分组失败:', error);
}

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

const { deleteFriendGroup } = useContactListState();

// 删除好友分组
try {
  await deleteFriendGroup('工作同事');
  console.log('好友分组删除成功');
} catch (error) {
  console.error('删除分组失败:', error);
}

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

const { addToFriendGroup } = useContactListState();

// 添加好友到分组
try {
  await addToFriendGroup({
    name: '工作同事',
    userIDList: ['user789']
  });
  console.log('好友已添加到分组');
} catch (error) {
  console.error('添加到分组失败:', error);
}

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

const { removeFromFriendGroup } = useContactListState();

// 从分组移除好友
try {
  await removeFromFriendGroup({
    name: '工作同事',
    userIDList: ['user789']
  });
  console.log('好友已从分组移除');
} catch (error) {
  console.error('从分组移除失败:', error);
}

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

const { renameFriendGroup } = useContactListState();

// 重命名好友分组
try {
  await renameFriendGroup({
    oldName: '工作同事',
    newName: '公司同事'
  });
  console.log('分组重命名成功');
} catch (error) {
  console.error('重命名分组失败:', error);
}

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

const { joinGroup } = useContactListState();

// 申请加入群组
try {
  await joinGroup({
    groupID: 'group123',
    applyMessage: '我想加入这个群组学习交流'
  });
  console.log('加群申请已发送');
} catch (error) {
  console.error('加入群组失败:', error);
}

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

const { acceptGroupApplication, groupApplicationList } = useContactListState();

// 接受群组申请
try {
  const application = groupApplicationList.value[0];
  await acceptGroupApplication({
    application: application,
    handleMessage: '欢迎加入群组'
  });
  console.log('群组申请已接受');
} catch (error) {
  console.error('接受群组申请失败:', error);
}

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

const { refuseGroupApplication, groupApplicationList } = useContactListState();

// 拒绝群组申请
try {
  const application = groupApplicationList.value[0];
  await refuseGroupApplication({
    application: application,
    handleMessage: '暂不接受新成员'
  });
  console.log('群组申请已拒绝');
} catch (error) {
  console.error('拒绝群组申请失败:', error);
}

GroupSettingState

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

const { groupID } = useGroupSettingState();

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

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

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

const { groupType } = useGroupSettingState();

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

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

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

const { groupName } = useGroupSettingState();

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

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

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

const { avatar } = useGroupSettingState();

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

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

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

const { introduction } = useGroupSettingState();

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

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

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

const { notification } = useGroupSettingState();

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

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

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

const { isMuted } = useGroupSettingState();

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

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

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

const { isPinned } = useGroupSettingState();

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

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

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

const { groupOwner } = useGroupSettingState();

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

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

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

const { adminMembers } = useGroupSettingState();

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

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

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

const { allMembers } = useGroupSettingState();

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

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

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

const { memberCount } = useGroupSettingState();

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

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

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

const { maxMemberCount } = useGroupSettingState();

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

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

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

const { currentUserID } = useGroupSettingState();

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

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

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

const { currentUserRole } = useGroupSettingState();

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

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

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

const { nameCard } = useGroupSettingState();

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

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

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

const { isMuteAllMembers } = useGroupSettingState();

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

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

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

const { isInGroup } = useGroupSettingState();

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

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

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

const { inviteOption } = useGroupSettingState();

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

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

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

const { getGroupMemberList } = useGroupSettingState();

// 获取群组成员列表
try {
  const members = await getGroupMemberList({
    groupID: 'group123',
    count: 50,
    offset: 0
  });
  console.log('群组成员:', members);
} catch (error) {
  console.error('获取成员列表失败:', error);
}

// 分页加载更多成员
const moreMembers = await getGroupMemberList({
  count: 50,
  offset: 50
});

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

const { updateGroupProfile } = useGroupSettingState();

// 更新群组资料
try {
  await updateGroupProfile({
    groupID: 'group123',
    name: '新的群组名称',
    introduction: '这是一个学习交流群',
    notification: '欢迎大家积极讨论',
    avatar: 'https://example.com/avatar.jpg'
  });
  console.log('群组资料更新成功');
} catch (error) {
  console.error('更新群组资料失败:', error);
}

// 只更新群名称
await updateGroupProfile({
  name: '技术交流群'
});

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

const { addGroupMember } = useGroupSettingState();

// 添加群组成员
try {
  const result = await addGroupMember({
    groupID: 'group123',
    userIDList: ['user1', 'user2', 'user3']
  });
  console.log('添加成功的用户:', result.successUserIDList);
  console.log('添加失败的用户:', result.failureUserIDList);
} catch (error) {
  console.error('添加群组成员失败:', error);
}

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

const { deleteGroupMember } = useGroupSettingState();

// 删除群组成员
try {
  await deleteGroupMember({
    groupID: 'group123',
    userIDList: ['user1', 'user2']
  });
  console.log('群组成员删除成功');
} catch (error) {
  console.error('删除群组成员失败:', error);
}

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

const { changeGroupOwner } = useGroupSettingState();

// 转让群主
try {
  await changeGroupOwner({
    groupID: 'group123',
    newOwnerID: 'user123'
  });
  console.log('群主转让成功');
} catch (error) {
  console.error('转让群主失败:', error);
}

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

const { setGroupMemberRole } = useGroupSettingState();

// 设置用户为管理员
try {
  await setGroupMemberRole({
    groupID: 'group123',
    userID: 'user123',
    role: GroupMemberRole.ADMIN
  });
  console.log('成员角色设置成功');
} catch (error) {
  console.error('设置成员角色失败:', error);
}

// 取消管理员权限
await setGroupMemberRole({
  userID: 'user123',
  role: GroupMemberRole.COMMON
});

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

const { setGroupMemberNameCard } = useGroupSettingState();

// 设置自己的群名片
try {
  await setGroupMemberNameCard({
    groupID: 'group123',
    nameCard: '技术负责人-小王'
  });
  console.log('群名片设置成功');
} catch (error) {
  console.error('设置群名片失败:', error);
}

// 设置其他成员的群名片（需要管理员权限）
await setGroupMemberNameCard({
  userID: 'user123',
  nameCard: '产品经理-小李'
});

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

const { setChatPinned } = useGroupSettingState();

// 置顶聊天
try {
  await setChatPinned(true);
  console.log('聊天置顶成功');
} catch (error) {
  console.error('设置置顶失败:', error);
}

// 取消置顶
await setChatPinned(false);

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

const { setChatMuted } = useGroupSettingState();

// 开启免打扰
try {
  await setChatMuted(true);
  console.log('免打扰设置成功');
} catch (error) {
  console.error('设置免打扰失败:', error);
}

// 关闭免打扰
await setChatMuted(false);

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

const { setGroupMemberMuteTime } = useGroupSettingState();

// 禁言用户10分钟
try {
  await setGroupMemberMuteTime({
    groupID: 'group123',
    userID: 'user123',
    time: 600 // 10分钟 = 600秒
  });
  console.log('用户禁言成功');
} catch (error) {
  console.error('设置禁言失败:', error);
}

// 取消禁言
await setGroupMemberMuteTime({
  userID: 'user123',
  time: 0
});

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

const { setMuteAllMember } = useGroupSettingState();

// 开启全员禁言
try {
  await setMuteAllMember(true);
  console.log('全员禁言开启成功');
} catch (error) {
  console.error('设置全员禁言失败:', error);
}

// 关闭全员禁言
await setMuteAllMember(false);

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

const { dismissGroup } = useGroupSettingState();

// 解散群组
try {
  await dismissGroup('group123');
  console.log('群组解散成功');
} catch (error) {
  console.error('解散群组失败:', error);
}

// 解散当前群组
await dismissGroup();

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

const { quitGroup } = useGroupSettingState();

// 退出群组
try {
  await quitGroup('group123');
  console.log('退出群组成功');
} catch (error) {
  console.error('退出群组失败:', error);
}

// 退出当前群组
await quitGroup();

import { useGroupSettingState, GroupPermission, GroupMemberRole, GroupType } from 'tuikit-atomicx-vue3';

const { hasPermission } = useGroupSettingState();

// 检查当前用户是否有删除成员的权限
const canDeleteMember = hasPermission(GroupPermission.DELETE_MEMBER);

// 检查管理员在工作群中是否有修改群资料的权限
const canModifyProfile = hasPermission(
  GroupPermission.MODIFY_GROUP_INFO,
  GroupMemberRole.ADMIN,
  GroupType.WORK
);

if (canDeleteMember) {
  console.log('可以删除群成员');
}

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

const { canOperateOnMember, allMembers } = useGroupSettingState();

// 检查是否可以对某个成员进行操作
const member = allMembers.value?.find(m => m.userID === 'user123');
if (member && canOperateOnMember(member)) {
  console.log('可以对该成员进行管理操作');
  // 显示删除、禁言等操作按钮
} else {
  console.log('无权限操作该成员');
}

// 权限规则：
// - 群主可以操作所有人（除自己）
// - 管理员只能操作普通成员
// - 普通成员不能操作任何人
// - 任何人都不能操作自己

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

const { getAvailablePermissions } = useGroupSettingState();

// 获取当前用户的所有权限
const permissions = getAvailablePermissions();

// 根据权限显示不同的功能按钮
if (permissions.includes(GroupPermission.DELETE_MEMBER)) {
  console.log('显示删除成员按钮');
}

if (permissions.includes(GroupPermission.MODIFY_GROUP_INFO)) {
  console.log('显示编辑群资料按钮');
}

if (permissions.includes(GroupPermission.MUTE_MEMBER)) {
  console.log('显示禁言成员按钮');
}

// 该函数在模块加载时自动调用，监听以下数据变化：
// - 当前会话变化：自动更新群组信息和用户状态
// - 群组资料变化：同步更新群组ID等信息
// - 会话切换：自动重置或更新相关状态
// 通常不需要手动调用此函数

VideoMixerState

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

const { publishVideoQuality } = useVideoMixerState();

// 监听视频质量变化
watch(publishVideoQuality, (newValue) => {
  console.log('视频质量更新:', newValue);
});

// 设置视频质量
publishVideoQuality.value = TUIVideoQuality.kVideoQuality_720p;

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

const { isVideoMixerEnabled, enableLocalVideoMixer } = useVideoMixerState();

// 监听混流状态变化
watch(isVideoMixerEnabled, (newValue) => {
  console.log('视频混流状态:', newValue ? '已启用' : '未启用');
});

// 检查混流状态
if (!isVideoMixerEnabled.value) {
  enableLocalVideoMixer();
}

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

const { mediaSourceList } = useVideoMixerState();

// 监听媒体源列表变化
watch(mediaSourceList, (newValue) => {
  console.log('媒体源数量:', newValue.length);
});

// 遍历所有媒体源
mediaSourceList.value.forEach(source => {
  console.log('媒体源:', source.id, source.type);
});

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

const { activeMediaSource, updateMediaSource } = useVideoMixerState();

// 监听活跃媒体源变化
watch(activeMediaSource, (newValue) => {
  if (newValue) {
    console.log('当前选中的媒体源:', newValue.id);
  }
});

// 更新当前活跃媒体源的布局
if (activeMediaSource.value) {
  updateMediaSource(activeMediaSource.value, {
    layout: { rect: { left: 0, top: 0, right: 640, bottom: 480 } }
  });
}

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

const { enableLocalVideoMixer, isVideoMixerEnabled } = useVideoMixerState();

// 启用视频混流
enableLocalVideoMixer();
console.log('视频混流已启用:', isVideoMixerEnabled.value);

import { useVideoMixerState } from 'tuikit-atomicx-vue3';
import { TRTCMediaSourceType } from '@tencentcloud/tuiroom-engine-js';

const { addMediaSource } = useVideoMixerState();

// 添加摄像头媒体源
await addMediaSource({
  type: TRTCMediaSourceType.kCamera,
  camera: { cameraId: 'default' },
});

// 添加屏幕分享媒体源
await addMediaSource({
  type: TRTCMediaSourceType.kScreen,
  screen: { sourceId: 'screen' },
});

// 添加图片媒体源
await addMediaSource({
  type: TRTCMediaSourceType.kImage,
  image: { imagePath: '/path/to/image.png' },
});

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

const { updateMediaSource, mediaSourceList } = useVideoMixerState();

// 更新媒体源布局
const source = mediaSourceList.value[0];
if (source) {
  await updateMediaSource(source, {
    layout: {
      rect: { left: 100, top: 100, right: 500, bottom: 400 }
    }
  });
  console.log('媒体源布局已更新');
}

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

const { removeMediaSource, mediaSourceList } = useVideoMixerState();

// 移除第一个媒体源
const source = mediaSourceList.value[0];
if (source) {
  await removeMediaSource(source);
  console.log('媒体源已移除');
}

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

const { clearMediaSource, mediaSourceList } = useVideoMixerState();

// 清空所有媒体源
clearMediaSource();
console.log('所有媒体源已清空，当前数量:', mediaSourceList.value.length);

ASRState

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

const { recentTranscripts } = useASRState();

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

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

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

const { transcriptHistory } = useASRState();

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

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

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

const { setRecentTranscriptsDuration } = useASRState();

// 设置最近消息窗口为5秒
setRecentTranscriptsDuration(5000);

// 设置最近消息窗口为10秒
setRecentTranscriptsDuration(10000);

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

const { clearHistory, transcriptHistory } = useASRState();

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

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

const { exportTranscripts } = useASRState();

// 导出转写记录
const transcriptText = exportTranscripts();

if (transcriptText) {
  // 保存到文件
  const blob = new Blob([transcriptText], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '会议转录记录.txt';
  a.click();
  URL.revokeObjectURL(url);
} else {
  console.log('没有转录记录可导出');
}

SearchState

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

const { keyword } = useSearchState();

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

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

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

const { results } = useSearchState();

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

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

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

const { isLoading } = useSearchState();

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

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

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

const { error } = useSearchState();

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

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

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

const { searchAdvancedParams } = useSearchState();

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

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

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

const { selectedSearchType } = useSearchState();

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

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

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

const { setKeyword } = useSearchState();

// 设置搜索关键词
setKeyword('hello world');

// 清除搜索关键词
setKeyword('');

import { useSearchState } from 'tuikit-atomicx-vue3';
import { SearchType } from '@tencentcloud/chat-uikit-engine-lite';

const { loadMore } = useSearchState();

// 加载更多消息搜索结果
await loadMore(SearchType.MESSAGE);

// 加载更多用户搜索结果
await loadMore(SearchType.USER);

import { useSearchState } from 'tuikit-atomicx-vue3';
import { SearchType } from '@tencentcloud/chat-uikit-engine-lite';

const { setSelectedType } = useSearchState();

// 设置搜索类型为消息
setSelectedType(SearchType.MESSAGE);

// 设置搜索类型为全部
setSelectedType('all');

import { useSearchState } from 'tuikit-atomicx-vue3';
import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite';

const { setSearchMessageAdvancedParams } = useSearchState();

// 设置消息搜索高级参数
setSearchMessageAdvancedParams({
  conversationID: 'C2C_user123',
  senderUserIDList: ['user1', 'user2'],
  messageTypeList: [TUIChatEngine.TYPES.MSG_TYPE_TEXT]
});

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

const { setSearchUserAdvancedParams } = useSearchState();

// 设置用户搜索高级参数
setSearchUserAdvancedParams({
  // 用户搜索参数
});

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

const { setSearchGroupAdvancedParams } = useSearchState();

// 设置群组搜索高级参数
setSearchGroupAdvancedParams({
  // 群组搜索参数
});

SeatStore

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

const { liveOwnerUserId } = useSeatStore();

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

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

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

const { localUserId } = useSeatStore();

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

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

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

const { seatList } = useSeatStore();

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

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

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

const { coHostUserList } = useSeatStore();

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

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

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

const { sentDeviceRequestMap } = useSeatStore();

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

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

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

const { receivedDeviceRequestMap } = useSeatStore();

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

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

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

const { userInfoMap } = useSeatStore();

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

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

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

const { getUserInfo } = useSeatStore();

// 通过userId获取用户信息
const userInfo = await getUserInfo('user_123');
console.log('用户信息:', userInfo);
// 输出: { userId, userName, avatarUrl, customInfo, userRole, isMessageDisabled }

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

const { convertUserInfoToAudienceInfo } = useSeatStore();

// 将TUIUserInfo转换为AudienceInfo格式
const tuiUserInfo = {
  userId: 'user_123',
  userName: 'John',
  avatarUrl: 'https://example.com/avatar.png',
  roomCustomInfo: {},
  userRole: 0,
  isMessageDisabled: false
};

const audienceInfo = convertUserInfoToAudienceInfo(tuiUserInfo);
console.log('观众信息:', audienceInfo);
// 输出: { userId, userName, avatarUrl, customInfo, userRole, isMessageDisabled }

AITranscriberState

import { watch } from 'vue';
import { useAITranscriberState } from 'tuikit-atomicx-vue3';

const { realtimeMessageList } = useAITranscriberState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => realtimeMessageList.value, (newValue) => {
  console.log('realtimeMessageList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => realtimeMessageList.value?.length, (newLength, oldLength) => {
  console.log('realtimeMessageList 长度变化:', oldLength, '->', newLength);
});

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

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

const { startRealtimeTranscriber } = useAITranscriberState();
const transcriberRobotId = await startRealtimeTranscriber({
  sourceLanguage: 'zh',
  translationLanguages: ['en'],
});

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

const { stopRealtimeTranscriber } = useAITranscriberState();
await stopRealtimeTranscriber();

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

const { updateRealTimeTranscriber } = useAITranscriberState();
await updateRealTimeTranscriber({
  sourceLanguage: 'zh',
  translationLanguages: ['en'],
});

import { useAITranscriberState, RealtimeTranscriberEvent } from 'tuikit-atomicx-vue3';

const { subscribeEvent } = useAITranscriberState();
subscribeEvent(RealtimeTranscriberEvent.onReceiveTranscriberMessage, (eventInfo) => {
  console.log('onReceiveTranscriberMessage', eventInfo);
});

import { useAITranscriberState, RealtimeTranscriberEvent } from 'tuikit-atomicx-vue3';

const { unsubscribeEvent } = useAITranscriberState();
unsubscribeEvent(RealtimeTranscriberEvent.onReceiveTranscriberMessage, (eventInfo) => {
  console.log('onReceiveTranscriberMessage', eventInfo);
});

BarrageState

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

const { messageList } = useBarrageState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => messageList.value, (newValue) => {
  console.log('messageList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => messageList.value?.length, (newLength, oldLength) => {
  console.log('messageList 长度变化:', oldLength, '->', newLength);
});

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

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

const { sendTextMessage } = useBarrageState();

// 调用函数
await sendTextMessage();

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

const { sendCustomMessage } = useBarrageState();

// 调用函数
await sendCustomMessage();

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

const { appendLocalTip } = useBarrageState();

// 调用函数
await appendLocalTip();

BattleState

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

const { currentBattleInfo } = useBattleState();

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

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

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

const { battleUsers } = useBattleState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => battleUsers.value, (newValue) => {
  console.log('battleUsers 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => battleUsers.value?.length, (newLength, oldLength) => {
  console.log('battleUsers 长度变化:', oldLength, '->', newLength);
});

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

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

const { battleScore } = useBattleState();

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

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

const { subscribeEvent } = useBattleState();

// 订阅PK开始事件
subscribeEvent(BattleEvent.onBattleStarted, (eventInfo) => {
  console.log('PK开始了:', eventInfo.battleInfo);
  console.log('发起者:', eventInfo.inviter.userName);
  console.log('被邀请者:', eventInfo.invitees.map(u => u.userName));
});

// 订阅PK结束事件
subscribeEvent(BattleEvent.onBattleEnded, (eventInfo) => {
  console.log('PK结束:', eventInfo.reason);
});

const { subscribeEvent, unsubscribeEvent } = useBattleState();

const handleBattleStart = (eventInfo) => {
  console.log('PK开始:', eventInfo);
};

// 订阅事件
subscribeEvent(BattleEvent.onBattleStarted, handleBattleStart);

// 取消订阅
unsubscribeEvent(BattleEvent.onBattleStarted, handleBattleStart);

const { requestBattle } = useBattleState();

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

const { cancelBattleRequest } = useBattleState();

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

const { acceptBattle, subscribeEvent } = useBattleState();

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

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

const { rejectBattle, subscribeEvent } = useBattleState();

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

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

const { exitBattle, currentBattleInfo } = useBattleState();

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

C2CSettingState

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

const { userID } = useC2CSettingState();

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

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

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

const { nick } = useC2CSettingState();

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

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

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

const { avatar } = useC2CSettingState();

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

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

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

const { signature } = useC2CSettingState();

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

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

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

const { remark } = useC2CSettingState();

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

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

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

const { isMuted } = useC2CSettingState();

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

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

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

const { isPinned } = useC2CSettingState();

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

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

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

const { isContact } = useC2CSettingState();

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

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

const { setChatPinned, isPinned } = useC2CSettingState();

// 置顶会话
setChatPinned(true);

// 取消置顶
setChatPinned(false);

// 切换置顶状态
const togglePin = () => {
  setChatPinned(!isPinned.value);
};

const { setChatMuted, isMuted } = useC2CSettingState();

// 静音会话
setChatMuted(true);

// 取消静音
setChatMuted(false);

// 切换静音状态
const toggleMute = () => {
  setChatMuted(!isMuted.value);
};

const { setUserRemark, userID, isContact } = useC2CSettingState();

// 设置好友备注
const updateRemark = async (newRemark: string) => {
  if (isContact.value && userID.value) {
    try {
      await setUserRemark(newRemark);
      console.log('备注设置成功');
    } catch (error) {
      console.error('备注设置失败:', error);
    }
  } else {
    console.log('只能为好友设置备注');
  }
};

// 使用示例
updateRemark('我的好朋友');

CoGuestState

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

const { connected } = useCoGuestState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => connected.value, (newValue) => {
  console.log('connected 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => connected.value?.length, (newLength, oldLength) => {
  console.log('connected 长度变化:', oldLength, '->', newLength);
});

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

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

const { invitees } = useCoGuestState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => invitees.value, (newValue) => {
  console.log('invitees 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => invitees.value?.length, (newLength, oldLength) => {
  console.log('invitees 长度变化:', oldLength, '->', newLength);
});

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

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

const { applicants } = useCoGuestState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => applicants.value, (newValue) => {
  console.log('applicants 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => applicants.value?.length, (newLength, oldLength) => {
  console.log('applicants 长度变化:', oldLength, '->', newLength);
});

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

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

const { candidates } = useCoGuestState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => candidates.value, (newValue) => {
  console.log('candidates 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => candidates.value?.length, (newLength, oldLength) => {
  console.log('candidates 长度变化:', oldLength, '->', newLength);
});

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

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

const { applyForSeat } = useCoGuestState();

// 调用函数
await applyForSeat({
  seatIndex: 0,
  timeout: 30,
});

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

const { cancelApplication } = useCoGuestState();

// 调用函数
await cancelApplication();

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

const { acceptApplication } = useCoGuestState();

// 调用函数
await acceptApplication({
  userId: 'user_001',
});

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

const { rejectApplication } = useCoGuestState();

// 调用函数
await rejectApplication({
  userId: 'user_001',
});

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

const { inviteToSeat } = useCoGuestState();

// 调用函数
await inviteToSeat({
  userId: 'user_001',
  seatIndex: 0,
  timeout: 30,
});

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

const { cancelInvitation } = useCoGuestState();

// 调用函数
await cancelInvitation({
  inviteeId: 'example_inviteeId',
});

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

const { acceptInvitation } = useCoGuestState();

// 调用函数
await acceptInvitation({
  inviterId: 'example_inviterId',
});

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

const { rejectInvitation } = useCoGuestState();

// 调用函数
await rejectInvitation({
  inviterId: 'example_inviterId',
});

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

const { disConnect } = useCoGuestState();

// 调用函数
await disConnect();

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

const { subscribeEvent } = useCoGuestState();

// 调用函数
await subscribeEvent({ event: /* HostEvent | GuestEvent */, callback: /* Function */ });

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

const { unsubscribeEvent } = useCoGuestState();

// 调用函数
await unsubscribeEvent({ event: /* HostEvent | GuestEvent */, callback: /* Function */ });

CoHostState

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

const { coHostStatus } = useCoHostState();

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

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

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

const { connected } = useCoHostState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => connected.value, (newValue) => {
  console.log('connected 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => connected.value?.length, (newLength, oldLength) => {
  console.log('connected 长度变化:', oldLength, '->', newLength);
});

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

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

const { applicant } = useCoHostState();

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

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

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

const { invitees } = useCoHostState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => invitees.value, (newValue) => {
  console.log('invitees 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => invitees.value?.length, (newLength, oldLength) => {
  console.log('invitees 长度变化:', oldLength, '->', newLength);
});

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

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

const { candidates } = useCoHostState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => candidates.value, (newValue) => {
  console.log('candidates 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => candidates.value?.length, (newLength, oldLength) => {
  console.log('candidates 长度变化:', oldLength, '->', newLength);
});

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

const { requestHostConnection } = useCoHostState();

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

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

const { cancelHostConnection } = useCoHostState();

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

const { acceptHostConnection, subscribeEvent } = useCoHostState();

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

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

const { rejectHostConnection, subscribeEvent } = useCoHostState();

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

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

const { exitHostConnection, coHostStatus } = useCoHostState();

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

const { subscribeEvent } = useCoHostState();

// 订阅连麦请求事件
subscribeEvent(CoHostEvent.onCoHostRequestReceived, (eventInfo) => {
  console.log('收到连麦请求:', eventInfo.inviter);
});

// 订阅用户加入连麦事件
subscribeEvent(CoHostEvent.onCoHostUserJoined, (eventInfo) => {
  console.log('用户加入连麦:', eventInfo.userInfo.userName);
});

// 订阅用户离开连麦事件
subscribeEvent(CoHostEvent.onCoHostUserLeft, (eventInfo) => {
  console.log('用户离开连麦:', eventInfo.userInfo.userName);
});

const { subscribeEvent, unsubscribeEvent } = useCoHostState();

const handleCoHostRequest = (eventInfo) => {
  console.log('连麦请求:', eventInfo);
};

// 订阅事件
subscribeEvent(CoHostEvent.onCoHostRequestReceived, handleCoHostRequest);

// 取消订阅
unsubscribeEvent(CoHostEvent.onCoHostRequestReceived, handleCoHostRequest);

DeviceState

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

const { microphoneStatus } = useDeviceState();

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

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

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

const { microphoneList } = useDeviceState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => microphoneList.value, (newValue) => {
  console.log('microphoneList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => microphoneList.value?.length, (newLength, oldLength) => {
  console.log('microphoneList 长度变化:', oldLength, '->', newLength);
});

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

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

const { currentMicrophone } = useDeviceState();

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

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

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

const { microphoneLastError } = useDeviceState();

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

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

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

const { isMicrophoneTesting } = useDeviceState();

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

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

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

const { currentMicVolume } = useDeviceState();

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

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

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

const { captureVolume } = useDeviceState();

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

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

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

const { testingMicVolume } = useDeviceState();

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

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

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

const { cameraStatus } = useDeviceState();

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

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

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

const { cameraList } = useDeviceState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => cameraList.value, (newValue) => {
  console.log('cameraList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => cameraList.value?.length, (newLength, oldLength) => {
  console.log('cameraList 长度变化:', oldLength, '->', newLength);
});

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

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

const { currentCamera } = useDeviceState();

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

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

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

const { cameraLastError } = useDeviceState();

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

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

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

const { isCameraTesting } = useDeviceState();

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

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

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

const { isCameraTestLoading } = useDeviceState();

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

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

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

const { isFrontCamera } = useDeviceState();

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

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

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

const { localMirrorType } = useDeviceState();

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

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

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

const { localVideoQuality } = useDeviceState();

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

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

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

const { speakerList } = useDeviceState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => speakerList.value, (newValue) => {
  console.log('speakerList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => speakerList.value?.length, (newLength, oldLength) => {
  console.log('speakerList 长度变化:', oldLength, '->', newLength);
});

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

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

const { currentSpeaker } = useDeviceState();

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

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

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

const { outputVolume } = useDeviceState();

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

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

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

const { currentAudioRoute } = useDeviceState();

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

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

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

const { isSpeakerTesting } = useDeviceState();

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

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

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

const { screenStatus } = useDeviceState();

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

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

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

const { screenLastError } = useDeviceState();

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

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

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

const { networkInfo } = useDeviceState();

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

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

const { openLocalMicrophone } = useDeviceState();

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

const { closeLocalMicrophone } = useDeviceState();

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

const { muteLocalAudio } = useDeviceState();

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

const { unmuteLocalAudio } = useDeviceState();

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

const { getMicrophoneList, microphoneList } = useDeviceState();

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

const { setCurrentMicrophone } = useDeviceState();

// 切换麦克风设备
await setCurrentMicrophone({ deviceId: 'microphone-device-id' });

const { startMicrophoneTest } = useDeviceState();

// 开始麦克风测试（默认200ms间隔）
await startMicrophoneTest({});

// 开始麦克风测试（自定义间隔）
await startMicrophoneTest({ interval: 100 });

const { stopMicrophoneTest } = useDeviceState();

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

const { setCaptureVolume } = useDeviceState();

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

const { getSpeakerList, speakerList } = useDeviceState();

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

const { setCurrentSpeaker } = useDeviceState();

// 切换扬声器设备
await setCurrentSpeaker({ deviceId: 'speaker-device-id' });

const { setAudioRoute } = useDeviceState();

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

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

const { startSpeakerTest } = useDeviceState();

// 开始扬声器测试
await startSpeakerTest({ filePath: '/path/to/test-audio.mp3' });

const { stopSpeakerTest } = useDeviceState();

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

const { setOutputVolume } = useDeviceState();

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

const { openLocalCamera } = useDeviceState();

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

const { closeLocalCamera } = useDeviceState();

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

const { getCameraList, cameraList } = useDeviceState();

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

const { setCurrentCamera } = useDeviceState();

// 切换摄像头设备
await setCurrentCamera({ deviceId: 'camera-device-id' });

const { switchCamera } = useDeviceState();

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

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

const { switchMirror } = useDeviceState();

// 启用镜像
await switchMirror({ mirror: MirrorType.Enable });

// 禁用镜像
await switchMirror({ mirror: MirrorType.Disable });

// 自动镜像
await switchMirror({ mirror: MirrorType.Auto });

const { updateVideoQuality } = useDeviceState();

// 设置为720P
await updateVideoQuality({ quality: VideoQuality.Quality720P });

// 设置为1080P
await updateVideoQuality({ quality: VideoQuality.Quality1080P });

const { startCameraTest } = useDeviceState();

// 开始摄像头测试
try {
  await startCameraTest({ view: 'camera-preview' });
  console.log('摄像头测试开始');
} catch (error) {
  console.error('摄像头测试失败:', error);
}

const { stopCameraTest } = useDeviceState();

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

const { startScreenShare } = useDeviceState();

// 开始屏幕分享（包含系统音频）
try {
  await startScreenShare({ screenAudio: true });
  console.log('屏幕分享开始成功');
} catch (error) {
  console.error('屏幕分享开始失败:', error);
}

// 开始屏幕分享（指定视图）
await startScreenShare({ view: 'window-123' });

const { stopScreenShare } = useDeviceState();

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

FreeBeautyState

import { watch } from 'vue';
import { useFreeBeautyState } from 'tuikit-atomicx-vue3';

const { beautyConfig } = useFreeBeautyState();

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

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

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

const { setFreeBeauty } = useFreeBeautyState();

// 调用函数
await setFreeBeauty({
  beautyLevel: 50,
  whitenessLevel: 30,
  ruddinessLevel: 20,
});

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

const { saveBeautySetting } = useFreeBeautyState();

// 调用函数
await saveBeautySetting();

LiveAudienceState

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

const { audienceList } = useLiveAudienceState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => audienceList.value, (newValue) => {
  console.log('audienceList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => audienceList.value?.length, (newLength, oldLength) => {
  console.log('audienceList 长度变化:', oldLength, '->', newLength);
});

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

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

const { audienceCount } = useLiveAudienceState();

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

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

const { fetchAudienceList, audienceList } = useLiveAudienceState();

// 获取观众列表
try {
  const list = await fetchAudienceList();
  console.log('观众列表:', list);
} catch (error) {
  console.error('获取观众列表失败:', error);
}

const { setAdministrator } = useLiveAudienceState();

// 设置用户为管理员
await setAdministrator({ userId: 'user123' });

const { revokeAdministrator } = useLiveAudienceState();

// 撤销用户管理员权限
await revokeAdministrator({ userId: 'user123' });

const { kickUserOutOfRoom } = useLiveAudienceState();

// 将用户踢出房间
await kickUserOutOfRoom({ userId: 'user123' });

const { disableSendMessage } = useLiveAudienceState();

// 禁用用户发送消息
await disableSendMessage({ userId: 'user123', isDisable: true });

// 启用用户发送消息
await disableSendMessage({ userId: 'user123', isDisable: false });

const { subscribeEvent } = useLiveAudienceState();

// 订阅观众加入事件
subscribeEvent(LiveAudienceEvent.onAudienceJoined, (eventInfo) => {
  console.log('观众加入:', eventInfo.audience);
});

const { unsubscribeEvent } = useLiveAudienceState();

// 定义回调函数
const handleAudienceJoined = (eventInfo) => {
  console.log('观众加入:', eventInfo.audience);
};

// 取消订阅观众加入事件
unsubscribeEvent(LiveAudienceEvent.onAudienceJoined, handleAudienceJoined);

LoginState

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

const { loginUserInfo } = useLoginState();

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

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

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

const { logout } = useLoginState();

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

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

await login({
  userId: 'user123',
  userSig: 'signature',
  sdkAppId: 123456
});

await setSelfInfo({
  userName: '新昵称',
  avatarUrl: 'https://example.com/avatar.jpg',
  customInfo: { level: 5 }
});

MessageListState

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

const { activeConversationID } = useMessageListState();

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

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

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

const { messageList } = useMessageListState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => messageList.value, (newValue) => {
  console.log('messageList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => messageList.value?.length, (newLength, oldLength) => {
  console.log('messageList 长度变化:', oldLength, '->', newLength);
});

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

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

const { hasMoreOlderMessage } = useMessageListState();

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

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

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

const { hasMoreNewerMessage } = useMessageListState();

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

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

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

const { enableReadReceipt } = useMessageListState();

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

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

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

const { isDisableScroll } = useMessageListState();

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

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

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

const { recalledMessageIDSet } = useMessageListState();

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

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

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

const { highlightMessageIDSet } = useMessageListState();

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

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

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

const { loadMoreOlderMessage } = useMessageListState();

// 调用函数
await loadMoreOlderMessage();

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

const { loadMoreNewerMessage } = useMessageListState();

// 调用函数
await loadMoreNewerMessage();

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

const { setEnableReadReceipt } = useMessageListState();

// 调用函数
await setEnableReadReceipt({ enableReadReceipt: /* boolean | undefined */ });

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

const { setIsDisableScroll } = useMessageListState();

// 调用函数
await setIsDisableScroll({ isDisableScroll: true });

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

const { highlightMessage } = useMessageListState();

// 调用函数
await highlightMessage({
  messageID: 'example_messageID',
  duration: 0,
});

RoomParticipantState

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { participantList } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => participantList.value, (newValue) => {
  console.log('participantList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => participantList.value?.length, (newLength, oldLength) => {
  console.log('participantList 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { participantListCursor } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { adminList } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => adminList.value, (newValue) => {
  console.log('adminList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => adminList.value?.length, (newLength, oldLength) => {
  console.log('adminList 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { audienceList } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => audienceList.value, (newValue) => {
  console.log('audienceList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => audienceList.value?.length, (newLength, oldLength) => {
  console.log('audienceList 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { audienceListCursor } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { messageDisabledUserList } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => messageDisabledUserList.value, (newValue) => {
  console.log('messageDisabledUserList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => messageDisabledUserList.value?.length, (newLength, oldLength) => {
  console.log('messageDisabledUserList 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { participantListWithVideo } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => participantListWithVideo.value, (newValue) => {
  console.log('participantListWithVideo 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => participantListWithVideo.value?.length, (newLength, oldLength) => {
  console.log('participantListWithVideo 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { participantWithScreen } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { localParticipant } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { pendingDeviceApplications } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => pendingDeviceApplications.value, (newValue) => {
  console.log('pendingDeviceApplications 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => pendingDeviceApplications.value?.length, (newLength, oldLength) => {
  console.log('pendingDeviceApplications 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { pendingDeviceInvitations } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => pendingDeviceInvitations.value, (newValue) => {
  console.log('pendingDeviceInvitations 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => pendingDeviceInvitations.value?.length, (newLength, oldLength) => {
  console.log('pendingDeviceInvitations 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { speakingUsers } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { networkQualities } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { pendingParticipantList } = useRoomParticipantState();

// 方式一：使用 getter 函数监听（推荐，可检测引用变化）
watch(() => pendingParticipantList.value, (newValue) => {
  console.log('pendingParticipantList 已更新:', newValue);
});

// 方式二：监听数组长度变化
watch(() => pendingParticipantList.value?.length, (newLength, oldLength) => {
  console.log('pendingParticipantList 长度变化:', oldLength, '->', newLength);
});

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { searchUser } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { promoteToParticipant } = useRoomParticipantState();

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

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

import { watch } from 'vue';
import { useRoomParticipantState } from 'tuikit-atomicx-vue3';

const { demoteToAudience } = useRoomParticipantState();

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

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

import { useRoomParticipantState } from '@tuikit-atomicx-vue3/room';
const { participantList, getParticipantList } = useRoomParticipantState();

// 获取房间参与者列表
try {
  const { participantList, cursor } = await getParticipantList({ cursor: '' });
  console.log('参与者列表:', participantList);
  console.log('下一页游标:', cursor);
} catch (error) {
  console.error('获取参与者列表失败:', error);
}

import { useRoomParticipantState } from '@tuikit-atomicx-vue3/room';
const { audienceList, getAudienceList } = useRoomParticipantState();

// 获取房间观众列表
try {
  const { audienceList, cursor } = await getAudienceList({ cursor: '' });
  console.log('观众列表:', audienceList);
  console.log('下一页游标:', cursor);
} catch (error) {
  console.error('获取观众列表失败:', error);
}

import { useRoomParticipantState } from '@tuikit-atomicx-vue3/room';
const { transferOwner } = useRoomParticipantState();

// 转移房间所有者权限
try {
  await transferOwner({ userId: 'user123' });
  console.log('房间所有者权限转移成功');
} catch (error) {
  console.log('房间所有者权限转移失败:', error);
}

import { useRoomParticipantState } from '@tuikit-atomicx-vue3/room';
const { setAdmin } = useRoomParticipantState();

// 设置用户为管理员
try {
  await setAdmin({ userId: 'user123' });
  console.log('用户设置为管理员成功');
} catch (error) {
  console.error('设置管理员失败:', error);
}

import { useRoomParticipantState } from '@tuikit-atomicx-vue3/room';
const { revokeAdmin } = useRoomParticipantState();

// 撤销用户管理员权限
try {
  await revokeAdmin({ userId: 'user123' });
  console.log('管理员权限撤销成功');
} catch (error) {
  console.error('撤销权限失败:', error);
}

import { useRoomParticipantState } from '@tuikit-atomicx-vue3/room';
const { kickParticipant } = useRoomParticipantState();

// 踢出参与者
try {
  await kickParticipant({ userId: 'user123' });
  console.log('用户踢出成功');
} catch (error) {
  console.error('踢出用户失败:', error);
}

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

const { updateParticipantNameCard } = useRoomParticipantState();

// 调用函数
await updateParticipantNameCard({
  userId: 'user_001',
  nameCard: '我的名片',
});

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

const { updateParticipantMetaData } = useRoomParticipantState();

// 调用函数
await updateParticipantMetaData({
  userId: 'user_001',
  metaData: { key: 'value' },
});

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

const { closeParticipantDevice } = useRoomParticipantState();

// 调用函数
await closeParticipantDevice({
  userId: 'user_001',
  deviceType: 'Camera',
});

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

const { muteParticipantMessage } = useRoomParticipantState();

// 调用函数
await muteParticipantMessage({
  userId: 'user_001',
  mute: true,
});

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

const { disableAllDevices } = useRoomParticipantState();

// 调用函数
await disableAllDevices({
  deviceType: 'Camera',
  disable: true,
});

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

const { disableAllMessages } = useRoomParticipantState();

// 调用函数
await disableAllMessages({
  disable: true,
});

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

const { requestToOpenDevice } = useRoomParticipantState();

// 调用函数
await requestToOpenDevice({
  device: 'Camera',
  timeout: 30,
});

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

const { cancelOpenDeviceRequest } = useRoomParticipantState();

// 调用函数
await cancelOpenDeviceRequest({
  device: 'Camera',
});

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

const { approveOpenDeviceRequest } = useRoomParticipantState();

// 调用函数
await approveOpenDeviceRequest({
  device: 'Camera',
  userId: 'user_001',
});