tuikit-atomicx-vue3 0.1.0

package/src/components/UserList/UserItem/UserInfo/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <!-- User base information -->
+  <div :class="[isMobile ? 'member-info-mobile' : 'member-info']">
+    <div
+      :class="
+        !showStateIcon && isTargetUserAdmin
+          ? 'member-basic-info-admin'
+          : 'member-basic-info'
+      "
+    >
+      <Avatar class="avatar-url" :img-src="userInfo.avatarUrl" />
+      <div class="user-name">{{ getDisplayName(userInfo) }}</div>
+      <div class="role-info">
+        <IconUser
+          size="20"
+          v-if="isTargetUserRoomOwner || isTargetUserAdmin"
+          :class="isTargetUserAdmin ? 'admin-icon' : 'master-icon'"
+        />
+        <div
+          :class="`user-extra-info ${isTargetUserAdmin ? 'user-extra-info-admin' : ''}`"
+        >
+          {{ extraInfo }}
+        </div>
+      </div>
+    </div>
+    <!-- User audio and video status information -->
+    <div v-if="showStateIcon" class="member-av-state">
+      <template v-for="(item, index) in iconList" :key="index">
+        <component :is="item.icon" :class="['state-icon', { 'disable-icon': item.disable }]" :size="item.size" />
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue';
+import { TUIRole } from '@tencentcloud/tuiroom-engine-js';
+import Avatar from '../../../../baseComp/Avatar.vue';
+import {
+  IconVideoOpen,
+  IconVideoClose,
+  IconAudioOpen,
+  IconAudioClose,
+  IconScreenOpen,
+  IconApplyActive,
+  IconUser,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../../../locales';
+import { isMobile } from '../../../../utils/environment';
+import { SeatStatus, UserInfo, DeviceStatus } from '../../../../types';
+
+import { useRoomState } from '../../../../states/RoomState';
+import useUserState from '../../../../states/UserState/index';
+
+
+const { t } = useI18n();
+
+const { localUser, getDisplayName } = useUserState();
+const { currentRoom } = useRoomState();
+interface Props {
+  userInfo: UserInfo;
+  showStateIcon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showStateIcon: true,
+});
+
+const isMaster = computed(() => props.userInfo.userRole === TUIRole.kRoomOwner);
+const isMe = computed(() => localUser.value?.userId === props.userInfo.userId);
+
+const isTargetUserRoomOwner = computed(
+  () => props.userInfo.userRole === TUIRole.kRoomOwner
+);
+const isTargetUserAdmin = computed(
+  () => props.userInfo.userRole === TUIRole.kAdministrator
+);
+
+const extraInfo = computed(() => {
+  if (isMaster.value && isMe.value) {
+    return `${t('Host')}, ${t('Me')}`;
+  }
+  if (isTargetUserRoomOwner.value) {
+    return t('Host');
+  }
+  if (isTargetUserAdmin.value && isMe.value) {
+    return `${t('Admin')}, ${t('Me')}`;
+  }
+  if (isTargetUserAdmin.value) {
+    return t('Admin');
+  }
+  if (isMe.value) {
+    return t('Me');
+  }
+  return '';
+});
+
+const isAudienceRole = computed(
+  () => currentRoom.value?.isSeatEnabled && props.userInfo.seatStatus !== SeatStatus.On
+);
+
+const isUserApplyingToAnchor = computed(() =>
+  props.userInfo.seatStatus === SeatStatus.OffApplicationPending
+);
+
+const iconList = computed(() => {
+  const list = [];
+  if (props.userInfo.screenStatus === DeviceStatus.On) {
+    list.push({ icon: IconScreenOpen });
+  }
+  if (!isAudienceRole.value) {
+    list.push({
+      icon: props.userInfo.microphoneStatus === DeviceStatus.On ? IconAudioOpen : IconAudioClose,
+    });
+    list.push({
+      icon: props.userInfo.cameraStatus === DeviceStatus.On ? IconVideoOpen : IconVideoClose,
+    });
+  }
+  if (isAudienceRole.value && !isUserApplyingToAnchor.value) {
+    list.push({ icon: IconAudioClose, disable: true });
+    list.push({ icon: IconVideoClose, disable: true });
+  }
+  if (isAudienceRole.value && isUserApplyingToAnchor.value) {
+    list.push({ icon: IconApplyActive, size: 20 });
+  }
+  return list;
+});
+</script>
+
+<style lang="scss" scoped>
+.member-info,
+.member-info-mobile {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+
+  .member-basic-info,
+  .member-basic-info-admin {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .avatar-url {
+      display: flex;
+      align-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+
+    .user-name {
+      max-width: 100px;
+      margin-left: 12px;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: var(--text-color-secondary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .role-info {
+      display: flex;
+
+      .master-icon,
+      .admin-icon {
+        display: flex;
+        margin-left: 8px;
+        color: var(--text-color-link);
+      }
+
+      .admin-icon {
+        color: var(--text-color-warning);
+      }
+
+      .user-extra-info,
+      .user-extra-info-admin {
+        padding: 2px;
+        padding: 0 6px;
+        margin-left: 4px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: var(--text-color-link);
+      }
+
+      .user-extra-info-admin {
+        color: var(--text-color-warning);
+        transition: none;
+      }
+    }
+  }
+
+  .member-basic-info-admin {
+    .user-name {
+      max-width: 40px;
+    }
+  }
+
+  .member-invite {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .member-av-state {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--uikit-color-gray-7);
+
+    .state-icon {
+      margin-left: 16px;
+    }
+
+    .disable-icon {
+      opacity: 0.4;
+    }
+  }
+}
+
+.member-info-mobile {
+  align-items: center;
+  width: 80vw;
+}
+</style>
+../../../../states/RoomState

package/src/components/UserList/UserItem/UserInvite/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="member-invite-container">
+    <TUIButton
+      v-if="memberInviteControl.type === 'control'"
+      type="primary"
+      @click="memberInviteControl.handler"
+    >
+      {{ memberInviteControl?.label }}
+    </TUIButton>
+    <span v-if="memberInviteControl.type === 'info'" class="member-invite-info">
+      {{ memberInviteControl?.label }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { UserInfo } from '../../../../types'
+import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+// todo: 这里需要讨论邀请入会的逻辑是否单独抽离出来
+// import useMemberInviteAction from '../../../../core/hooks/useUserActions/useMemberInviteAction';
+
+interface Props {
+  userInfo: UserInfo;
+}
+const props = defineProps<Props>();
+
+// todo: 当前 invite 的业务逻辑太不通用了，考虑把 hooks 中的拒绝逻辑提取出来
+// const memberInviteControl = useMemberInviteAction(props.userInfo);
+</script>
+
+<style lang="scss" scoped>
+.member-invite-container {
+  display: flex;
+  justify-content: end;
+  width: 100%;
+
+  .member-invite-info {
+    display: flex;
+    align-items: center;
+    padding-right: 10px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-primary);
+  }
+
+  .button {
+    width: 68px;
+  }
+}
+</style>

package/src/components/UserList/UserItem/index.ts

@@ -0,0 +1,8 @@
+// import indexH5 from './indexH5.vue';
+import indexPC from './indexPC.vue';
+
+// import { isMobile } from '../../../utils/environment';
+
+// const index = isMobile ? indexH5 : indexPC;
+
+export default indexPC;

package/src/components/UserList/UserItem/indexH5.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="member-item-container"
+    ref="memberItemContainerRef"
+    v-tap="handleOpenMemberControl"
+    v-click-outside="handleDocumentTouchend"
+  >
+    <user-info-comp
+      :user-info="props.userInfo"
+      :show-state-icon="props.userInfo.userRoomStatus === 'InRoom' && !showUserAction"
+    />
+    <user-invite v-if="userInfo.userRoomStatus !== 'InRoom'" :user-info="props.userInfo" />
+    <user-action v-show="showUserAction" :user-info="props.userInfo" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps } from 'vue';
+import UserInfoComp from './UserInfo/index.vue';
+import UserInvite from './UserInvite/index.vue';
+import UserAction from './UserAction';
+import { UserInfo } from '../../../types';
+import { useUserActions } from '../../../hooks/useUserActions';
+import vTap from '../../../directives/vTap';
+import vClickOutside from '../../../directives/vClickOutside';
+
+interface Props {
+  userInfo: UserInfo;
+}
+
+const props = defineProps<Props>();
+
+const isMouseHover = ref(false);
+const memberItemContainerRef = ref();
+
+const handleOpenMemberControl = () => {
+  isMouseHover.value = true;
+};
+
+const handleDocumentTouchend = (event: any) => {
+  if (memberItemContainerRef.value?.contains(event?.target)) {
+    return;
+  }
+  isMouseHover.value = false;
+};
+
+const { userActions } = useUserActions({ userInfo: props.userInfo });
+const showUserAction = computed(
+  () => isMouseHover.value && props.userInfo.userRoomStatus === 'InRoom' && userActions.value?.length > 0
+);
+</script>
+
+<style lang="scss" scoped>
+.member-item-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 52px;
+  padding: 0 20px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--list-color-hover);
+  }
+}
+</style>

package/src/components/UserList/UserItem/indexPC.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="member-item-container"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <user-info-comp
+      :user-info="props.userInfo"
+      :show-state-icon="props.userInfo.userRoomStatus === UserRoomStatus.InRoom && !showUserAction"
+    />
+    <!-- <user-invite v-if="!userInfo.isInRoom" :user-info="props.userInfo" /> -->
+    <user-action v-show="showUserAction" :user-info="props.userInfo" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps } from 'vue';
+import UserInfoComp from './UserInfo/index.vue';
+// import UserInvite from './UserInvite/index.vue';
+import UserAction from './UserAction';
+import { UserRoomStatus } from '../../../types';
+import { useUserActions } from '../../../hooks/useUserActions';
+import { UserInfo } from '../../../types';
+
+interface Props {
+  userInfo: UserInfo;
+}
+
+const props = defineProps<Props>();
+
+const isMouseHover = ref(false);
+
+function handleMouseEnter() {
+  isMouseHover.value = true;
+}
+
+function handleMouseLeave() {
+  isMouseHover.value = false;
+}
+const { userActions } = useUserActions({ userInfo: props.userInfo });
+const showUserAction = computed(
+  () => isMouseHover.value && props.userInfo.userRoomStatus === UserRoomStatus.InRoom && userActions.value.length > 0
+);
+</script>
+
+<style lang="scss" scoped>
+.member-item-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 52px;
+  padding: 0 20px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--list-color-hover);
+  }
+}
+</style>

package/src/components/UserList/UserListContent/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="memberListContainer" class="user-list-content">
+    <template v-for="userInfo in showUserList" :key="userInfo.userId">
+      <slot v-if="$slots.userItem" name="userItem" :user-info="userInfo"></slot>
+      <user-item v-else :user-info="userInfo" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserItem from '../UserItem';
+import { ComputedRef, computed, defineProps, withDefaults } from 'vue';
+import useUserState from '../../../states/UserState/index';
+import { UserInfo } from '../../../types';
+import { Comparator } from '../../../utils/utils';
+
+interface Props {
+  searchFn?: (userInfo: UserInfo, searchText: string) => boolean;
+  sortFn?: Comparator<UserInfo>;
+  filterFn?: (userInfo: UserInfo) => boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  searchFn: (userInfo: UserInfo, searchText: string) =>
+    userInfo.nameCard?.includes(searchText) ||
+    userInfo.userName?.includes(searchText) ||
+    userInfo.userId.includes(searchText),
+});
+
+const { userList, userSearchText } = useUserState();
+
+const showUserList: ComputedRef<UserInfo[]> = computed(() => {
+  let tempUserList = userList.value;
+  if (props.filterFn) {
+    tempUserList = tempUserList.filter(props.filterFn);
+  }
+  if (userSearchText) {
+    tempUserList = tempUserList.filter(item =>
+      props.searchFn(item, userSearchText.value)
+    );
+  }
+  return tempUserList;
+});
+</script>
+
+<style lang="scss" scoped>
+.user-list-content {
+  flex: 1;
+  margin-top: 10px;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

package/src/components/UserList/UserListSearch/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="user-search-content">
+    <IconSearch size="20" />
+    <input
+      v-model="userSearchText"
+      class="search-input"
+      :placeholder="t('Search Member')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconSearch } from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../../locales';
+import useUserState from '../../../states/UserState/index';
+
+const { t } = useI18n();
+const { userSearchText } = useUserState();
+</script>
+
+<style scoped>
+.user-search-content {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 16px;
+  margin: 23px 20px 0;
+  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;
+  }
+}
+</style>

package/src/components/UserList/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="user-list-container">
+    <user-list-search />
+    <div class="user-category-content" v-if="userCategoryList?.length">
+      <div
+        v-for="(item, index) in userCategoryList"
+        :key="index"
+        :class="[
+          'user-category',
+          {
+            'user-category-active': item.key === activeCategoryKey,
+          },
+        ]"
+        @click="handleSwitchCategory(item)"
+      >
+        <span class="user-category-title">
+          {{ `${item.title} (${filterUserListObj?.[item.key]?.length})` }}
+        </span>
+      </div>
+    </div>
+    <user-list-content
+      :filterFn="activeCategory?.filterFn"
+      :sortFn="props.sortFn"
+    >
+      <template #userItem="{ userInfo }" v-if="$slots.userItem">
+        <slot name="userItem" :userInfo="userInfo"></slot>
+      </template>
+    </user-list-content>
+    <all-user-actions
+      :activeCategoryKey="activeCategoryKey"
+      :userCategoryNumber="filterUserListObj?.[activeCategoryKey]?.length || 0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, computed, Ref } from 'vue';
+import UserListSearch from './UserListSearch/index.vue';
+import UserListContent from './UserListContent/index.vue';
+import AllUserActions from './AllUserActions';
+import { Comparator } from '../../utils/utils';
+import useUserState from '../../states/UserState/index';
+import { UserInfo } from '../../types';
+
+interface UserCategory {
+  key: string;
+  title: string;
+  filterFn: (userInfo: UserInfo) => boolean;
+}
+interface Props {
+  sortFn?: Comparator<UserInfo>;
+  userCategoryList?: UserCategory[];
+}
+const props = defineProps<Props>();
+
+const { userList } = useUserState();
+const activeCategoryKey: Ref<string> = ref(
+  props.userCategoryList?.[0]?.key || ''
+);
+const activeCategory = computed(() =>
+  props.userCategoryList?.find(item => item.key === activeCategoryKey.value)
+);
+function handleSwitchCategory(item: UserCategory) {
+  activeCategoryKey.value = item.key;
+}
+
+const filterUserListObj = computed(() => {
+  const filterUserCategoryObj: Record<string, UserInfo[]> = {};
+  props.userCategoryList?.forEach(item => {
+    if (item.filterFn) {
+      filterUserCategoryObj[item.key] = userList.value.filter(item.filterFn);
+    } else {
+      filterUserCategoryObj[item.key] = userList.value;
+    }
+  });
+  return filterUserCategoryObj;
+});
+</script>
+
+<style lang="scss" scoped>
+.user-list-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .user-category-content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 36px;
+    padding: 3px 4px;
+    margin: 16px 20px 0;
+    cursor: pointer;
+    background-color: var(--bg-color-input);
+    border-radius: 20px;
+
+    .user-category {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-radius: 20px;
+
+      &.user-category-active {
+        background-color: var(--bg-color-operate);
+      }
+    }
+
+    .user-category-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);
+    }
+  }
+
+  .global-setting {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 0;
+    cursor: pointer;
+  }
+
+  .button-bottom {
+    width: 80%;
+  }
+}
+
+.cancel-button {
+  margin-left: 12px;
+}
+</style>