观众列表

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

// 获取 LiveAudienceState 的实例
const { fetchAudienceList, audienceList } = useLiveAudienceState();

onMounted(async () => {
  try {
    // 获取观众列表，返回 Promise
    await fetchAudienceList();
    console.log('首次拉取观众列表成功');
  } catch (error) {
    console.error('首次拉取观众列表失败', error);
  }
});

// 监听 audienceList 的实时变更，用于驱动 UI 变更
watch(audienceList, (newVal) => {
  console.log('观众列表更新:', newVal);
});

import { onMounted, onUnmounted, watch } from 'vue';
import { useLiveAudienceState, LiveAudienceEvent } from "tuikit-atomicx-vue3";

const { 
  audienceList, 
  audienceCount, 
  subscribeEvent, 
  unsubscribeEvent 
} = useLiveAudienceState();

// 监听 audienceCount 的实时变更，用于驱动 UI 更新人数显示
watch(audienceCount, (newCount) => {
  console.log(`当前在线人数: ${newCount}`);
});

// 定义回调函数
const onAudienceJoined = (eventInfo) => {
  console.log(`观众 ${eventInfo.audience.userName} 加入了直播间`);
};

const onAudienceLeft = (eventInfo) => {
  console.log(`观众 ${eventInfo.audience.userName} 离开了直播间`);
};

onMounted(() => {
  // 订阅观众进入事件
  subscribeEvent(LiveAudienceEvent.onAudienceJoined, onAudienceJoined);
  // 订阅观众离开事件
  subscribeEvent(LiveAudienceEvent.onAudienceLeft, onAudienceLeft);
});

onUnmounted(() => {
  // 组件卸载时取消订阅
  unsubscribeEvent(LiveAudienceEvent.onAudienceJoined, onAudienceJoined);
  unsubscribeEvent(LiveAudienceEvent.onAudienceLeft, onAudienceLeft);
});

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

const { kickUserOutOfRoom } = useLiveAudienceState();

const handleKickUser = async (targetUserId: string) => {
  try {
    await kickUserOutOfRoom({ userId: targetUserId });
    console.log(`主播或管理员将 ${targetUserId} 踢出直播间`);
  } catch (error) {
    console.error(`主播或管理员将 ${targetUserId} 踢出直播间失败`, error);
  }
};

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

const { setAdministrator, revokeAdministrator } = useLiveAudienceState();

// 主播可设置或取消管理员权限
const promoteToAdmin = async (targetUserId: string) => {
  try {
    await setAdministrator({ userId: targetUserId });
    console.log(`成功将用户 ${targetUserId} 设置管理员`);
  } catch (error) {
    console.error(`将用户 ${targetUserId} 设置管理员失败`, error);
  }
};

// 主播可设置或取消管理员权限
const revokeAdmin = async (targetUserId: string) => {
  try {
    await revokeAdministrator({ userId: targetUserId });
    console.log(`成功将用户 ${targetUserId} 的管理员身份撤销`);
  } catch (error) {
    console.error(`撤销用户 ${targetUserId} 管理员身份失败`, error);
  }
};

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

const { disableSendMessage } = useLiveAudienceState();

// 禁言用户
const muteUser = async (targetUserId: string) => {
    await disableSendMessage({ userId: targetUserId, isDisable: true });
};

// 解除禁言
const unmuteUser = async (targetUserId: string) => {
    await disableSendMessage({ userId: targetUserId, isDisable: false });
};


import { onMounted, onUnmounted } from 'vue';
import { useLiveAudienceState, useBarrageState, LiveAudienceEvent } from "tuikit-atomicx-vue3";

const { subscribeEvent, unsubscribeEvent } = useLiveAudienceState();
// 假设 useBarrageState 提供了 appendLocalTip 方法
const { appendLocalTip } = useBarrageState();

const handleAudienceJoin = (eventInfo) => {
  const { audience } = eventInfo;
  
  // 创建一条本地提示消息
  const welcomeTip = {
    messageType: 'text',
    textContent: `欢迎 ${audience.userName || audience.userId} 进入直播间！`
  };
  
  // 插入本地弹幕
  appendLocalTip({ message: welcomeTip });
  console.log(`观众 ${audience.userName} 加入了直播间`);
};

onMounted(() => {
  subscribeEvent(LiveAudienceEvent.onAudienceJoined, handleAudienceJoin);
});

onUnmounted(() => {
  unsubscribeEvent(LiveAudienceEvent.onAudienceJoined, handleAudienceJoin);
});