tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

package/src/components/BarrageList/MessageForward/MessageForward.vue

@@ -1,388 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { useUIKit, IconSearch, IconCloseInput, IconClose } from '@tencentcloud/uikit-base-component-vue3';
-import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogClose, DialogTitle } from 'reka-ui';
-import { useConversationListState } from '../../../states/ConversationListState';
-import { useMessageActionState } from '../../../states/MessageActionState';
-import ForwardListItem from './ForwardListItem.vue';
-import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-
-const { t } = useUIKit();
-const { forwardMessageIDList, forwardConversationIDList, isForwardMessageSelectionDone, forwardMessage } =
-  useMessageActionState();
-
-const { conversationList } = useConversationListState();
-
-const searchValue = ref('');
-const searchedConversationList = ref<IConversationModel[]>([]);
-
-function searchConversation() {
-  if (searchValue.value) {
-    const results = conversationList.value!.filter(conversation => {
-      const name = conversation.getShowName()!.toLowerCase();
-      const ID = conversation.conversationID.toLowerCase();
-      const searchTerm = searchValue.value.trim().toLowerCase();
-      return ID.includes(searchTerm) || name.includes(searchTerm);
-    });
-    searchedConversationList.value = results;
-  } else {
-    searchedConversationList.value = [];
-  }
-}
-
-function handleConversationSelect(conversationID: string) {
-  const hasAlreadySelected = forwardConversationIDList.value.includes(conversationID);
-  if (hasAlreadySelected) {
-    forwardConversationIDList.value = forwardConversationIDList.value.filter(ID => ID !== conversationID);
-  } else {
-    forwardConversationIDList.value.push(conversationID);
-  }
-}
-
-const isConversationSelected = (conversationID: string) => forwardConversationIDList.value.includes(conversationID);
-
-function getConversationName(conversationID: string) {
-  const conversation = conversationList.value?.find(_conversation => _conversation.conversationID === conversationID);
-  return conversation?.getShowName() || conversation?.conversationID || '';
-}
-
-function forward() {
-  if (!isForwardMessageSelectionDone.value) {
-    return;
-  }
-
-  if (forwardConversationIDList.value.length > 0) {
-    forwardMessage({
-      messageIDList: forwardMessageIDList.value,
-      conversationIDList: forwardConversationIDList.value,
-      isMergeForward: false,
-    });
-    closeMessageForward();
-  }
-}
-
-function closeMessageForward() {
-  forwardMessageIDList.value = [];
-  forwardConversationIDList.value = [];
-  isForwardMessageSelectionDone.value = false;
-}
-</script>
-
-<template>
-  <DialogRoot :open="isForwardMessageSelectionDone">
-    <DialogPortal>
-      <DialogOverlay class="forward-overlay" @click="closeMessageForward" />
-      <DialogContent class="forward-container">
-        <div class="forward-header">
-          <DialogClose class="forward-header__close" @click="closeMessageForward">
-            <IconClose size="14" />
-          </DialogClose>
-          <DialogTitle class="forward-header__title">
-            {{ t('TUIChat.Forward') }}
-          </DialogTitle>
-        </div>
-
-        <div class="forward-search">
-          <IconSearch class="forward-search__icon" />
-          <input v-model="searchValue" class="forward-search__input" type="text" @input="searchConversation" />
-          <IconCloseInput v-if="searchValue" class="forward-search__icon--clear" @click="searchValue = ''" />
-        </div>
-
-        <div class="forward-middle">
-          <template v-if="searchValue">
-            <div class="forward-section-title">
-              {{ t('TUIChat.Search Result') }}
-            </div>
-            <template v-if="searchedConversationList.length > 0">
-              <div class="forward-list-container">
-                <ForwardListItem
-                  v-for="conversation in searchedConversationList"
-                  :key="conversation.conversationID"
-                  :conversationID="conversation.conversationID"
-                  :is-selected="isConversationSelected(conversation.conversationID)"
-                  @on-click="handleConversationSelect(conversation.conversationID)"
-                />
-              </div>
-            </template>
-            <template v-else>
-              <div class="forward-empty">
-                {{ t('TUIChat.No Result') }}
-              </div>
-            </template>
-          </template>
-          <template v-else>
-            <div class="forward-section-title">
-              {{ t('TUIChat.Recent Chats') }}
-            </div>
-            <div v-if="conversationList && conversationList.length > 0" class="forward-list-container">
-              <ForwardListItem
-                v-for="conversation in conversationList"
-                :key="conversation.conversationID"
-                :conversationID="conversation.conversationID"
-                :is-selected="isConversationSelected(conversation.conversationID)"
-                @click="handleConversationSelect(conversation.conversationID)"
-              />
-            </div>
-            <div v-else class="forward-empty">
-              {{ t('TUIChat.No Conversation') }}
-            </div>
-          </template>
-        </div>
-
-        <div v-if="forwardConversationIDList.length > 0" class="forward-selected__abstract-list">
-          <div v-for="ID in forwardConversationIDList" :key="ID" class="forward-selected__abstract-list__item">
-            <div class="forward-selected__abstract-list__item__name">
-              {{ getConversationName(ID) }}
-            </div>
-            <div class="forward-selected__abstract-list__item__remove" @click.stop="handleConversationSelect(ID)">
-              <IconCloseInput />
-            </div>
-          </div>
-        </div>
-
-        <div class="forward-footer">
-          <button class="forward-footer__button" :disabled="forwardConversationIDList.length === 0" @click="forward">
-            {{ t('TUIChat.Forward') }}
-          </button>
-        </div>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>
-
-<style lang="scss" scoped>
-@use '../../../styles/mixins' as mixin;
-
-$animationDuration: 200ms;
-
-.forward-overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  inset: 0;
-
-  &[data-state='open'] {
-    animation: overlayIn $animationDuration ease-out;
-  }
-
-  &[data-state='closed'] {
-    animation: overlayOut $animationDuration ease-out;
-  }
-}
-
-.forward-container {
-  border-radius: 8px;
-  box-shadow:
-    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
-    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
-  max-width: 500px;
-  max-height: 85vh;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  height: 80vh;
-  background-color: var(--bg-color-operate);
-  color: var(--text-color-primary);
-
-  &[data-state='open'] {
-    animation: contentIn $animationDuration ease-out;
-  }
-
-  &[data-state='closed'] {
-    animation: contentOut $animationDuration ease-out;
-  }
-}
-
-.forward-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  &__close {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 8px;
-    color: inherit;
-  }
-
-  &__title {
-    flex: 1;
-    font-size: 18px;
-    font-weight: bold;
-    text-align: center;
-    margin-right: 24px;
-  }
-}
-
-.forward-search {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  border-radius: 8px;
-  padding: 8px 12px;
-  background: var(--bg-color-input);
-
-  &__icon {
-    &--clear {
-      cursor: pointer;
-    }
-  }
-
-  &__input {
-    flex: 1;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    background-color: transparent;
-    color: var(--text-color-primary, white);
-    caret-color: var(--text-color-primary, white);
-  }
-}
-
-.forward-middle {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  gap: 8px;
-}
-
-.forward-section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-color-primary);
-}
-
-.forward-list-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  @include mixin.scrollbar-base;
-}
-
-.forward-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  color: var(--text-color-secondary);
-  font-size: 14px;
-}
-
-.forward-selected__abstract-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  max-height: 70px;
-  overflow-y: auto;
-  gap: 8px;
-
-  @include mixin.scrollbar-base;
-
-  &__item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    background-color: var(--bg-color-input);
-    border-radius: 16px;
-    padding: 4px 8px 4px 4px;
-
-    &__name {
-      margin: 0 8px;
-      font-size: 12px;
-      max-width: 100px;
-
-      @include mixin.text-ellipsis;
-    }
-
-    &__remove {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        color: var(--text-color-error);
-      }
-    }
-  }
-}
-
-.forward-footer {
-  display: flex;
-
-  &__button {
-    background-color: var(--button-color-primary-default);
-    color: var(--text-color-button);
-    border: none;
-    border-radius: 4px;
-    padding: 8px 16px;
-    font-size: 14px;
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-color-primary-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--button-color-primary-active);
-    }
-
-    &:disabled {
-      background-color: var(--button-color-primary-disabled);
-      cursor: not-allowed;
-    }
-  }
-}
-
-@keyframes overlayIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes overlayOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes contentIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -46%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes contentOut {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -46%) scale(0.96);
-  }
-}
-</style>

package/src/components/BarrageList/MessageForward/index.ts

@@ -1,3 +0,0 @@
-import MessageForward from './MessageForward.vue';
-
-export { MessageForward };

package/src/components/StreamView/Layout/MixLayout.vue

@@ -1,144 +0,0 @@
-<template>
-  <div class="mix-layout-container">
-    <StreamRegion v-if="innerUserStore.mixUserInfo" :user-info="innerUserStore.mixUserInfo" :stream-type="TUIVideoStreamType.kCameraStream"
-      :aspect-ratio="aspectRatio">
-      <template #stream-cover>
-        <div class="mix-stream-cover" ref="streamCoverRef">
-          <div class="mix-stream-cover-item" v-for="item in layoutList" :key="`${item.userId}-${item.streamType}`" :style="getStreamCoverStyle(item)">
-            <StreamCover :user-info="innerUserStore.getUserInfo({ userId: item.userId }) as UserInfo" :stream-type="item.streamType" />
-          </div>
-        </div>
-      </template>
-      <template #streamViewUI="slotProps">
-        <slot name="streamViewUI" v-bind="slotProps" />
-      </template>
-    </StreamRegion>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, reactive, watch } from 'vue';
-import { UserInfo } from '../../../types';
-import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import useLiveState from '../../../states/LiveState';
-import StreamRegion from '../common/StreamRegion';
-import StreamCover from '../common/StreamCover/index.vue';
-import { innerUserStore } from '../../../states/UserState/store';
-
-interface Props {
-  config?: string;
-  filterFn?: (userInfo: UserInfo, index: number) => boolean;
-  sortFn?: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
-}
-
-interface LayoutItem {
-  userId: string;
-  streamType: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  zOrder: number;
-  backgroundColor: string;
-}
-
-const { currentLive } = useLiveState();
-defineProps<Props>();
-
-const streamCoverRef = ref<HTMLDivElement>();
-
-const aspectRatio = computed(() => {
-  if (currentLive.value && currentLive.value.layoutTemplateParams.canvas) {
-    return `${currentLive.value.layoutTemplateParams.canvas.width}:${currentLive.value.layoutTemplateParams.canvas.height}`;
-  }
-  return '16:9';
-});
-
-const layoutList = computed<LayoutItem[]>(() => {
-  if (currentLive.value && currentLive.value.layoutTemplateParams.layoutList) {
-    return currentLive.value.layoutTemplateParams.layoutList;
-  }
-  return [];
-});
-
-// 保存每个item的样式
-const itemStyles = reactive<Record<string, Record<string, string | number>>>({});
-
-watch(() => layoutList.value.length, () => {
-  updateAllItemStyles();
-}, { deep: true });
-
-const resizeObserver = new ResizeObserver(() => {
-  if (!streamCoverRef.value) {
-    return;
-  }
-  // 在尺寸变化时更新所有item的样式
-  updateAllItemStyles();
-});
-
-onMounted(() => {
-  streamCoverRef.value && resizeObserver.observe(streamCoverRef.value);
-});
-
-onBeforeUnmount(() => {
-  streamCoverRef.value && resizeObserver.unobserve(streamCoverRef.value);
-});
-
-// 更新所有item的样式
-function updateAllItemStyles() {
-  layoutList.value.forEach(item => {
-    updateItemStyle(item);
-  });
-}
-
-// 更新单个item的样式
-function updateItemStyle(item: LayoutItem) {
-  const key = `${item.userId}-${item.streamType}`;
-  if (!streamCoverRef.value) {
-    itemStyles[key] = {};
-    return;
-  }
-
-  const streamCoverWidth = streamCoverRef.value?.clientWidth;
-  const streamCoverHeight = streamCoverRef.value?.clientHeight;
-
-  itemStyles[key] = {
-    left: streamCoverWidth * item.x + 'px',
-    top: streamCoverWidth * item.y + 'px',
-    width: streamCoverWidth * item.width + 'px',
-    height: item.height === -1 ? streamCoverHeight + 'px' : streamCoverWidth * item.height + 'px',
-    zIndex: item.zOrder,
-    backgroundColor: item.backgroundColor,
-  };
-}
-
-// 获取item的样式
-function getStreamCoverStyle(item: LayoutItem) {
-  const key = `${item.userId}-${item.streamType}`;
-  // 确保样式对象已经创建
-  if (!itemStyles[key]) {
-    updateItemStyle(item);
-  }
-  return itemStyles[key];
-}
-
-</script>
-
-<style lang="scss" scoped>
-.mix-layout-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.mix-stream-cover {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .mix-stream-cover-item {
-    position: absolute;
-  }
-}
-</style>
-../../../states/LiveState