成员管理（Web)

<template>
  <aside class="participant-panel">
    <RoomParticipantList />
  </aside>
</template>

<script setup lang="ts">
import { RoomParticipantList } from 'tuikit-atomicx-vue3/room';
</script>

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { useRoomParticipantState, useRoomState } from 'tuikit-atomicx-vue3/room';

const { currentRoom } = useRoomState();
const {
  participantList,
  participantListCursor,
  localParticipant,
  getParticipantList,
} = useRoomParticipantState();

onMounted(() => {
  watch(
    () => currentRoom.value?.roomId,
    async (roomId) => {
      if (!roomId) return;
      try {
        await getParticipantList({ cursor: '' });
      } catch (error) {
        console.error('获取成员列表失败:', error);
      }
    },
    { immediate: true },
  );
});

async function loadMoreParticipants() {
  if (!participantListCursor.value) return;
  try {
    await getParticipantList({ cursor: participantListCursor.value });
  } catch (error) {
    console.error('加载更多成员失败:', error);
  }
}
</script>

<template>
  <div class="participant-list">
    <div 
      v-for="item in participantList" 
      :key="item.userId" 
      class="participant-item"
    >
      <img :src="item.avatarUrl || defaultAvatar" class="avatar" />
      <div class="user-info">
        <span class="name">{{ item.userName || item.userId }}</span>
        <span v-if="item.role !== RoomParticipantRole.GeneralUser" class="role-tag">
          {{ item.role === RoomParticipantRole.Owner ? '房主' : '管理员' }}
        </span>
      </div>

      <div class="status-bar">
        <i :class="item.microphoneStatus === DeviceStatus.On ? 'icon-mic-on' : 'icon-mic-off'"></i>
        <i :class="item.cameraStatus === DeviceStatus.On ? 'icon-cam-on' : 'icon-cam-off'"></i>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { 
  useRoomParticipantState, 
  RoomParticipantRole, 
  DeviceStatus 
} from 'tuikit-atomicx-vue3/room';

const { participantList } = useRoomParticipantState();
const defaultAvatar = 'https://path-to-your-default-avatar.png';
</script>

<script setup lang="ts">
import { computed } from 'vue';
import {
  DeviceStatus,
  RoomParticipantRole,
  useRoomParticipantState,
} from 'tuikit-atomicx-vue3/room';

const {
  localParticipant,
  participantList,
  participantWithScreen,
  speakingUsers,
} = useRoomParticipantState();

const sortedParticipantList = computed(() => {
  return [...participantList.value].sort((a, b) => {
    const score = (participant) => {
      if (participant.userId === localParticipant.value?.userId) return 100;
      if (participant.role === RoomParticipantRole.Owner) return 90;
      if (participant.role === RoomParticipantRole.Admin) return 80;
      if (participant.userId === participantWithScreen.value?.userId) return 70;
      if (speakingUsers.value.has(participant.userId)) return 60;
      if (participant.cameraStatus === DeviceStatus.On) return 50;
      if (participant.microphoneStatus === DeviceStatus.On) return 40;
      return 0;
    };
    return score(b) - score(a);
  });
});
</script>


<script setup lang="ts">
import {
  DeviceStatus,
  RoomParticipant,
  RoomParticipantRole,
  useRoomParticipantState,
} from 'tuikit-atomicx-vue3/room';

const { localParticipant } = useRoomParticipantState();

function getRoleText(role: RoomParticipantRole) {
  if (role === RoomParticipantRole.Owner) return '房主';
  if (role === RoomParticipantRole.Admin) return '管理员';
  return '成员';
}

function isCameraOn(participant: RoomParticipant) {
  return participant.cameraStatus === DeviceStatus.On;
}

function isMicrophoneOn(participant: RoomParticipant) {
  return participant.microphoneStatus === DeviceStatus.On;
}

function isLocalUser(userId: string) {
  return userId === localParticipant.value?.userId;
}
</script>

<script setup lang="ts">
import { useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const { speakingUsers } = useRoomParticipantState();

function isSpeaking(userId: string) {
  return speakingUsers.value.has(userId);
}

function getVolume(userId: string) {
  return speakingUsers.value.get(userId) || 0;
}
</script>

<script setup lang="ts">
import { useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const {
  participantListWithVideo,
  participantWithScreen,
} = useRoomParticipantState();

function isSharingScreen(userId: string) {
  return participantWithScreen.value?.userId === userId;
}
</script>

<script setup lang="ts">
import { useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const {
  updateParticipantNameCard,
  updateParticipantMetaData,
} = useRoomParticipantState();

async function updateUserNameCard(userId: string) {
  try {
    await updateParticipantNameCard({
      userId,
      nameCard: '产品经理',
    });
  } catch (error) {
    console.error('修改成员名片失败:', error);
  }
}

async function updateUserMetaData(userId: string) {
  try {
    await updateParticipantMetaData({
      userId,
      metaData: {
        level: '1',
        department: 'Product',
      },
    });
  } catch (error) {
    console.error('更新成员扩展信息失败:', error);
  }
}
</script>

import { computed } from 'vue';
import { RoomParticipantRole, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const {
  localParticipant,
  transferOwner,
  setAdmin,
  revokeAdmin,
} = useRoomParticipantState();

const hasOwnerPermission = computed(() => localParticipant.value?.role === RoomParticipantRole.Owner);

async function setUserAsAdmin(userId: string) {
  if (!hasOwnerPermission.value) return;
  await setAdmin({ userId });
}

async function revokeUserAdmin(userId: string) {
  if (!hasOwnerPermission.value) return;
  await revokeAdmin({ userId });
}

async function transferRoomOwner(userId: string) {
  if (!hasOwnerPermission.value) return;
  await transferOwner({ userId });
}

import { DeviceType, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const { closeParticipantDevice } = useRoomParticipantState();

async function closeUserMicrophone(userId: string) {
  await closeParticipantDevice({
    userId,
    deviceType: DeviceType.Microphone,
  });
}

async function closeUserCamera(userId: string) {
  await closeParticipantDevice({
    userId,
    deviceType: DeviceType.Camera,
  });
}

import { DeviceType, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const { disableAllDevices } = useRoomParticipantState();

async function disableAllMicrophones() {
  await disableAllDevices({
    deviceType: DeviceType.Microphone,
    disable: true,
  });
}

async function enableAllMicrophones() {
  await disableAllDevices({
    deviceType: DeviceType.Microphone,
    disable: false,
  });
}

import { useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const { disableUserMessage, disableAllMessages } = useRoomParticipantState();

async function disableUserChat(userId: string) {
  await disableUserMessage({
    userId,
    disable: true,
  });
}

async function disableRoomChat() {
  await disableAllMessages({ disable: true });
}

import { DeviceType, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';

const { requestToOpenDevice, cancelOpenDeviceRequest } = useRoomParticipantState();

async function requestToOpenMicrophone() {
  await requestToOpenDevice({
    device: DeviceType.Microphone,
    timeout: 60,
  });
}

async function cancelMicrophoneRequest() {
  await cancelOpenDeviceRequest({
    device: DeviceType.Microphone,
  });
}

<template>
  <div class="device-application-list">
    <div
      v-for="application in pendingDeviceApplications"
      :key="`${application.senderUserId}-${application.deviceType}-${application.timestamp}`"
      class="device-application-item"
    >
      <img :src="application.senderAvatarUrl" class="avatar" />
      <div class="application-info">
        <span class="name">
          {{ application.senderNameCard || application.senderUserName || application.senderUserId }}
        </span>
        <span class="desc">
          申请开启{{ getDeviceName(application.deviceType) }}
        </span>
      </div>
      <button @click="approveDeviceApplication(application)">同意</button>
      <button @click="rejectDeviceApplication(application)">拒绝</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue';
import {
  type DeviceRequestInfo,
  DeviceType,
  RoomParticipantEvent,
  useRoomParticipantState,
} from 'tuikit-atomicx-vue3/room';

const {
  pendingDeviceApplications,
  approveOpenDeviceRequest,
  rejectOpenDeviceRequest,
  subscribeEvent,
  unsubscribeEvent,
} = useRoomParticipantState();

function getDeviceName(deviceType: DeviceType) {
  if (deviceType === DeviceType.Microphone) return '麦克风';
  if (deviceType === DeviceType.Camera) return '摄像头';
  return '屏幕分享';
}

async function approveDeviceApplication(application: DeviceRequestInfo) {
  await approveOpenDeviceRequest({
    userId: application.senderUserId,
    device: application.deviceType,
  });
}

async function rejectDeviceApplication(application: DeviceRequestInfo) {
  await rejectOpenDeviceRequest({
    userId: application.senderUserId,
    device: application.deviceType,
  });
}
</script>