tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/RoomParticipantList/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="participant-list">
+    <div class="search-container">
+      <div class="search-box">
+        <IconSearch class="search-icon" size="20" />
+        <input
+          v-model="searchText"
+          class="search-input"
+          type="text"
+          :placeholder="t('ParticipantList.Search')"
+        >
+      </div>
+    </div>
+
+    <!-- 标签页 -->
+    <div class="tabs">
+      <div
+        :class="['tab', { active: activeTab === 'joined' }]"
+        @click="activeTab = 'joined'"
+      >
+        <span class="title">{{ t('ParticipantList.Joined') }}({{ currentRoom?.participantCount || 0 }})</span>
+      </div>
+      <div
+        :class="['tab', { active: activeTab === 'unjoined' }]"
+        @click="activeTab = 'unjoined'"
+      >
+        <span class="title">{{ t('ParticipantList.NotJoined') }}({{ pendingParticipantList.length }})</span>
+      </div>
+    </div>
+
+    <template v-if="activeTab === 'joined'">
+      <!-- 成员列表 -->
+      <div class="participant-container">
+        <div v-if="filteredParticipants.length === 0" class="empty-state">
+          {{ t('ParticipantList.NoMember') }}
+        </div>
+        <ParticipantItem
+          v-for="participant in filteredParticipants"
+          :key="participant.userId"
+          :participant="participant"
+          :is-local="participant.userId === localParticipant?.userId"
+          :is-hovered="hoveredUserId === participant.userId"
+          @hover="handleParticipantHover"
+          @leave="handleParticipantLeave"
+        >
+          <template #actions>
+            <ParticipantAction
+              :participant="participant"
+              :is-local="participant.userId === localParticipant?.userId"
+            />
+          </template>
+        </ParticipantItem>
+      </div>
+
+      <!-- 底部操作 -->
+      <div class="footer">
+        <RoomAction v-if="activeTab === 'joined'" />
+      </div>
+    </template>
+
+    <template v-if="activeTab === 'unjoined'">
+      <div class="unjoined-user-container">
+        <PendingParticipantItem
+          v-for="userInfo in filteredParticipants"
+          :key="userInfo.userId"
+          :userInfo="userInfo"
+        />
+      </div>
+
+      <!-- 底部操作 -->
+      <div class="footer">
+        <TUIButton
+          v-if="pendingParticipantList.length > 0"
+          type="primary"
+          :style="{ minWidth: '80%' }"
+          @click="handleCallAllPendingParticipant"
+        >
+          {{ t('ParticipantList.CallAll') }}
+        </TUIButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { IconSearch, useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
+import { useRoomState } from '../../states/RoomState';
+import { RoomParticipantStatus, RoomParticipantRole, DeviceStatus } from '../../types';
+import { combineComparators, createComparator } from '../../utils/compare';
+import ParticipantAction from './ParticipantAction.vue';
+import ParticipantItem from './ParticipantItem.vue';
+import PendingParticipantItem from './PendingParticipantItem.vue';
+import RoomAction from './RoomAction.vue';
+import type { RoomParticipant } from '../../types';
+
+const { pendingParticipantList } = useRoomParticipantState();
+
+const { t } = useUIKit();
+const {
+  currentRoom,
+  callUserToRoom,
+} = useRoomState();
+const {
+  participantList,
+  localParticipant,
+  participantListCursor,
+  getParticipantList,
+} = useRoomParticipantState();
+
+watch(() => currentRoom.value?.roomId, (newVal, oldVal) => {
+  if (newVal && newVal !== oldVal && participantListCursor.value === '') {
+    getParticipantList({ cursor: participantListCursor.value });
+  }
+}, { immediate: true });
+
+const searchText = ref('');
+const activeTab = ref<'joined' | 'unjoined'>('joined');
+const hoveredUserId = ref<string | null>(null);
+
+const defaultUserListCompareFunction = combineComparators(
+  createComparator((userInfo: RoomParticipant) =>
+    Boolean(userInfo.userId === localParticipant.value?.userId),
+  ),
+  createComparator((userInfo: RoomParticipant) =>
+    Boolean(userInfo.role === RoomParticipantRole.Owner),
+  ),
+  createComparator((userInfo: RoomParticipant) =>
+    Boolean(userInfo.role === RoomParticipantRole.Admin),
+  ),
+  createComparator((userInfo: RoomParticipant) => Boolean(userInfo.screenShareStatus === DeviceStatus.On)),
+  createComparator((userInfo: RoomParticipant) =>
+    Boolean(userInfo.cameraStatus === DeviceStatus.On && userInfo.microphoneStatus === DeviceStatus.On),
+  ),
+  createComparator((userInfo: RoomParticipant) => Boolean(userInfo.cameraStatus === DeviceStatus.On)),
+  createComparator((userInfo: RoomParticipant) => Boolean(userInfo.microphoneStatus === DeviceStatus.On)),
+  createComparator((userInfo: RoomParticipant) => Boolean(userInfo.roomStatus === RoomParticipantStatus.InCalling)),
+);
+
+const showParticipantList = computed(() => {
+  if (activeTab.value === 'joined') {
+    return [...participantList.value].sort(defaultUserListCompareFunction);
+  }
+  if (activeTab.value === 'unjoined') {
+    return [...pendingParticipantList.value].sort(defaultUserListCompareFunction);
+  }
+  return [];
+});
+
+const filteredParticipants = computed(() => {
+  if (!searchText.value.trim()) {
+    return showParticipantList.value;
+  }
+
+  const searchLower = searchText.value.toLowerCase();
+  return showParticipantList.value.filter(participant =>
+    participant.userName.toLowerCase().includes(searchLower)
+    || participant.nameCard.toLowerCase().includes(searchLower)
+    || participant.userId.toLowerCase().includes(searchLower),
+  );
+});
+
+const handleParticipantHover = (userId: string) => {
+  hoveredUserId.value = userId;
+};
+
+const handleParticipantLeave = () => {
+  hoveredUserId.value = null;
+};
+
+async function handleCallAllPendingParticipant() {
+  const userIdList = pendingParticipantList.value.map(participant => participant.userId);
+  if (!currentRoom.value?.roomId) {
+    return;
+  }
+  await callUserToRoom({
+    roomId: currentRoom.value?.roomId || '',
+    userIdList,
+    timeout: 60,
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.participant-list {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-color-operate);
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-container {
+  padding: 16px 20px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+
+  .search-box {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 32px;
+    padding: 0 16px;
+    color: var(--text-color-primary);
+    background-color: var(--bg-color-input);
+    border-radius: 16px;
+
+    .search-input {
+      width: 100%;
+      margin-left: 8px;
+      font-size: 14px;
+      color: var(--text-color-primary);
+      background: none;
+      border: none;
+      outline: none;
+    }
+  }
+}
+
+.tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 36px;
+  padding: 3px 4px;
+  margin: 0 20px;
+  cursor: pointer;
+  background-color: var(--bg-color-input);
+  border-radius: 20px;
+
+  .tab {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 20px;
+
+    &.active {
+      background-color: var(--bg-color-operate);
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--text-color-primary);
+      filter: drop-shadow(0 2px 4px var(--base-color-black-8))
+        drop-shadow(0 6px 10px var(--base-color-black-8))
+        drop-shadow(0 3px 14px var(--base-color-black-8));
+      border-radius: 20px;
+      transform: translateX(4px);
+    }
+  }
+}
+
+.participant-container, .unjoined-user-container {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 10px;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #999999;
+  font-size: 14px;
+}
+
+.footer {
+  display: flex;
+  padding: 16px 20px;
+  gap: 12px;
+  justify-content: center;
+}
+</style>

package/src/components/RoomParticipantList/useParticpantAction/index.ts

@@ -0,0 +1,94 @@
+import { computed } from 'vue';
+import type { ComputedRef, CSSProperties } from 'vue';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { RoomParticipantRole, DeviceStatus } from '../../../types';
+import { useSetAdminAction, useRevokeAdminAction } from './useAdminAction';
+import { useMuteAudioAction, useUnmuteAudioAction } from './useAudioAction';
+import { useKickAction } from './useKickAction';
+import { useMessageAction } from './useMessageAction';
+import { useNameCardAction } from './useNameCardAction';
+import { useTransferOwnerAction } from './useTransferOwnerAction';
+import { useMuteVideoAction, useUnmuteVideoAction } from './useVideoAction';
+import type { RoomParticipant } from '../../../types';
+import type { TUIIcon } from '@tencentcloud/uikit-base-component-vue3';
+
+const {
+  localParticipant,
+} = useRoomParticipantState();
+
+export function useParticipantAction({ targetParticipant }: { targetParticipant: RoomParticipant }): {
+  controlList: ComputedRef<{ key: string; label: string; handler: () => void; icon?: typeof TUIIcon; style?: CSSProperties }[]>;
+} {
+  const canOperate = computed(() => {
+    if (!localParticipant.value) {
+      return false;
+    }
+    const isLocalOwner = localParticipant.value.role === RoomParticipantRole.Owner;
+    const isLocalAdmin = localParticipant.value.role === RoomParticipantRole.Admin;
+    const isTargetGeneralUser = targetParticipant.role === RoomParticipantRole.GeneralUser;
+    return isLocalOwner || (isLocalAdmin && isTargetGeneralUser);
+  });
+
+  const isTargetParticipantLocal = computed(() => targetParticipant.userId === localParticipant.value?.userId);
+
+  const canKick = computed(() => canOperate.value && targetParticipant.role !== RoomParticipantRole.Owner);
+
+  const canTransferOwner = computed(() => localParticipant.value?.role === RoomParticipantRole.Owner && targetParticipant.role !== RoomParticipantRole.Owner);
+
+  const canSetAdmin = computed(() => localParticipant.value?.role === RoomParticipantRole.Owner && !isTargetParticipantLocal.value && targetParticipant.role === RoomParticipantRole.GeneralUser);
+
+  const canRevokeAdmin = computed(() => localParticipant.value?.role === RoomParticipantRole.Owner && !isTargetParticipantLocal.value && targetParticipant.role === RoomParticipantRole.Admin);
+
+  const nameCardAction = useNameCardAction({ targetParticipant });
+  const messageAction = useMessageAction({ targetParticipant });
+  const kickAction = useKickAction({ targetParticipant });
+
+  const hasAudio = computed(() => targetParticipant.microphoneStatus === DeviceStatus.On);
+  const hasVideo = computed(() => targetParticipant.cameraStatus === DeviceStatus.On);
+
+  const controlList = computed(() => {
+    const controlListResult: { key: string; label: string; handler: () => void }[] = [];
+    if (canOperate.value && !isTargetParticipantLocal.value) {
+      if (hasAudio.value) {
+        const muteAudioAction = useMuteAudioAction({ targetParticipant });
+        controlListResult.push(muteAudioAction);
+      } else {
+        const unmuteAudioAction = useUnmuteAudioAction({ targetParticipant });
+        controlListResult.push(unmuteAudioAction);
+      }
+      if (hasVideo.value) {
+        const muteVideoAction = useMuteVideoAction({ targetParticipant });
+        controlListResult.push(muteVideoAction);
+      } else {
+        const unmuteVideoAction = useUnmuteVideoAction({ targetParticipant });
+        controlListResult.push(unmuteVideoAction);
+      }
+    }
+    if (canTransferOwner.value) {
+      const transferOwnerAction = useTransferOwnerAction({ targetParticipant });
+      controlListResult.push(transferOwnerAction);
+    }
+    if (canSetAdmin.value) {
+      const setAdminAction = useSetAdminAction({ targetParticipant });
+      controlListResult.push(setAdminAction);
+    }
+    if (canRevokeAdmin.value) {
+      const revokeAdminAction = useRevokeAdminAction({ targetParticipant });
+      controlListResult.push(revokeAdminAction);
+    }
+    if (canOperate.value || isTargetParticipantLocal.value) {
+      controlListResult.push(nameCardAction);
+    }
+    if (canOperate.value && !isTargetParticipantLocal.value) {
+      controlListResult.push(messageAction);
+    }
+    if (canKick.value) {
+      controlListResult.push(kickAction);
+    }
+    return controlListResult;
+  });
+
+  return {
+    controlList,
+  };
+}

package/src/components/RoomParticipantList/useParticpantAction/useAdminAction.ts

@@ -0,0 +1,56 @@
+import type { Component } from 'vue';
+import { computed } from 'vue';
+import { TUIToast, TOAST_TYPE, IconSetAdmin, IconRevokeAdmin, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import type { RoomParticipant } from '../../../types';
+
+const { t } = useUIKit();
+const { setAdmin, revokeAdmin } = useRoomParticipantState();
+
+export function useSetAdminAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const displayName = computed(() => targetParticipant.nameCard || targetParticipant.userName || targetParticipant.userId);
+
+  return {
+    key: 'setAdmin',
+    icon: IconSetAdmin,
+    label: t('ParticipantList.SetAdmin'),
+    handler: () => {
+      setAdmin({ userId: targetParticipant.userId });
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: t('ParticipantList.SetAdminSuccess', { name: displayName.value }),
+      });
+    },
+  };
+}
+
+export function useRevokeAdminAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const displayName = computed(() => targetParticipant.nameCard || targetParticipant.userName || targetParticipant.userId);
+
+  return {
+    key: 'revokeAdmin',
+    icon: IconRevokeAdmin,
+    label: t('ParticipantList.RemoveAdmin'),
+    handler: () => {
+      revokeAdmin({ userId: targetParticipant.userId });
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: t('ParticipantList.RemoveAdminSuccess', { name: displayName.value }),
+      });
+    },
+  };
+}

package/src/components/RoomParticipantList/useParticpantAction/useAudioAction.ts

@@ -0,0 +1,66 @@
+import type { Component } from 'vue';
+import { computed } from 'vue';
+import {
+  IconAudioOpen,
+  IconAudioClose,
+  TUIToast,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { DeviceType } from '../../../types';
+import type { RoomParticipant } from '../../../types';
+
+const { t } = useUIKit();
+
+export function useMuteAudioAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const { closeParticipantDevice } = useRoomParticipantState();
+  async function muteUserAudio() {
+    await closeParticipantDevice({
+      userId: targetParticipant.userId,
+      deviceType: DeviceType.Microphone,
+    });
+  }
+  return {
+    key: 'muteAudio',
+    icon: IconAudioOpen,
+    label: t('ParticipantList.Mute'),
+    handler: muteUserAudio,
+  };
+}
+
+export function useUnmuteAudioAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const { inviteToOpenDevice } = useRoomParticipantState();
+  const displayName = computed(() => targetParticipant.nameCard || targetParticipant.userName || targetParticipant.userId);
+
+  async function unmuteUserAudio() {
+    await inviteToOpenDevice({
+      userId: targetParticipant.userId,
+      device: DeviceType.Microphone,
+      timeout: 30,
+    });
+    TUIToast.info({
+      message: `${t('ParticipantList.InviteMicSent', { name: displayName.value })}`,
+    });
+  }
+
+  return {
+    key: 'unmuteAudio',
+    icon: IconAudioClose,
+    label: t('ParticipantList.Unmute'),
+    handler: unmuteUserAudio,
+  };
+}

package/src/components/RoomParticipantList/useParticpantAction/useKickAction.ts

@@ -0,0 +1,46 @@
+import type { Component } from 'vue';
+import { reactive, markRaw, computed } from 'vue';
+import { useUIKit, IconKickOut, TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import type { RoomParticipant } from '../../../types';
+
+const { t } = useUIKit();
+const { kickParticipant } = useRoomParticipantState();
+export function useKickAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const displayName = computed(() => targetParticipant.nameCard || targetParticipant.userName || targetParticipant.userId);
+
+  async function kickUserFunc() {
+    TUIMessageBox.confirm({
+      title: t('ParticipantList.Note'),
+      content: t('ParticipantList.ConfirmKick', {
+        name: displayName.value,
+      }),
+      confirmText: t('ParticipantList.Confirm'),
+      cancelText: t('ParticipantList.Cancel'),
+      callback: async (action) => {
+        if (action === 'confirm') {
+          await kickParticipant({
+            userId: targetParticipant.userId,
+          });
+        }
+      },
+    });
+  }
+  const kickAction = reactive({
+    key: 'kick',
+    icon: markRaw(IconKickOut),
+    label: t('ParticipantList.KickOut'),
+    style: {
+      color: '#FF0000',
+    },
+    handler: kickUserFunc,
+  });
+  return kickAction;
+}

package/src/components/RoomParticipantList/useParticpantAction/useMessageAction.ts

@@ -0,0 +1,42 @@
+import type { Component } from 'vue';
+import { computed, reactive, markRaw } from 'vue';
+import { TUIToast, TOAST_TYPE, IconChatForbidden, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import type { RoomParticipant } from '../../../types';
+
+const { t } = useUIKit();
+const { muteParticipantMessage } = useRoomParticipantState();
+export function useMessageAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  async function disableUserChat() {
+    const { isMessageDisabled } = targetParticipant;
+    try {
+      await muteParticipantMessage({
+        userId: targetParticipant.userId,
+        mute: !isMessageDisabled,
+      });
+    } catch (error: any) {
+      TUIToast({
+        type: TOAST_TYPE.ERROR,
+        message: t('ParticipantList.DisableChatFailed'),
+      });
+    }
+  }
+
+  const chatControl = reactive({
+    key: 'chatAction',
+    icon: markRaw(IconChatForbidden),
+    label: computed(() =>
+      targetParticipant.isMessageDisabled ? t('ParticipantList.EnableChat') : t('ParticipantList.DisableChat'),
+    ),
+    handler: disableUserChat,
+  });
+
+  return chatControl;
+}

package/src/components/RoomParticipantList/useParticpantAction/useNameCardAction/changeNameCardDialog.vue

@@ -0,0 +1,51 @@
+<template>
+  <TUIDialog
+    :visible="isShowDialog"
+    :title="t('ParticipantList.ChangeName')"
+    :confirmDisabled="isConfirmButtonDisable"
+    :cancel-text="t('ParticipantList.Cancel')"
+    :confirm-text="t('ParticipantList.Confirm')"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+    @close="handleCancel"
+  >
+    <TUIInput
+      :model-value="inputUserName"
+      class="dialog-input"
+      :placeholder="t('ParticipantList.InputUserName')"
+      @input="inputUserName = $event"
+    />
+  </TUIDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, computed } from 'vue';
+import { TUIDialog, TUIInput, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import type { RoomParticipant } from '../../../../types';
+
+interface Props {
+  userInfo: RoomParticipant;
+  confirmFunction: (name: string) => void;
+}
+
+const props = defineProps<Props>();
+const { t } = useUIKit();
+
+const inputUserName = ref(props.userInfo.nameCard || props.userInfo.userName || '');
+const isShowDialog = ref(true);
+const isConfirmButtonDisable = computed(() => !inputUserName.value.trim());
+
+async function handleConfirm() {
+  await props.confirmFunction(inputUserName.value);
+  isShowDialog.value = false;
+}
+
+function handleCancel() {
+  inputUserName.value
+    = props.userInfo.nameCard || props.userInfo.userName || '';
+  isShowDialog.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+</style>