tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/src/components/LiveList/LiveListH5.vue

@@ -1,32 +1,63 @@
 <template>
-  <div class="live-list-panel-h5" v-if="loginUserInfo">
-    <div v-if="liveList.length > 0" class="live-list" @scroll="handleScroll" @wheel="handleWheel" ref="scrollContainerRef">
+  <div
+    v-if="loginUserInfo"
+    class="live-list-panel-h5"
+  >
+    <div
+      v-if="liveList.length > 0"
+      ref="scrollContainerRef"
+      class="live-list"
+      @scroll="handleScroll"
+      @wheel="handleWheel"
+    >
       <div class="live-list-items">
-        <div class="live-item" v-for="item in liveList" :key="item.liveId" @click="liveRoomClick(item)">
+        <div
+          v-for="item in liveList"
+          :key="item.liveId"
+          class="live-item"
+          @click="liveRoomClick(item)"
+        >
           <div class="live-room-cover">
             <div class="header">
               <IconLiveCoverHeader :size="10" />
               <span class="viewer-count"> {{ item.currentViewerCount || 0 }} </span>
               <span> {{ t('people have watched the live') }} </span>
             </div>
-            <img :src="item.coverUrl || DEFAULT_COVER" alt="" @error="handleCoverImageError" />
+            <img
+              :src="item.coverUrl || DEFAULT_COVER"
+              alt=""
+              @error="handleCoverImageError"
+            >
           </div>
           <span class="live-name">{{ item.liveName }} </span>
           <div class="owner-info">
-            <Avatar :src="item.liveOwner.avatarUrl" :size="16" />
+            <Avatar
+              :src="item.liveOwner.avatarUrl"
+              :size="16"
+              :style="{ border: '1px solid var(--uikit-color-white-7)' }"
+            />
             <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
           </div>
         </div>
       </div>
-      <div class="bottom-text-no-more" v-if="!hasMoreLive">
+      <div
+        v-if="!hasMoreLive"
+        class="bottom-text-no-more"
+      >
         <span>{{ t('No More') }}</span>
       </div>
     </div>
-    <div v-else-if="!isLoadingLiveList" class="no-live">
+    <div
+      v-else-if="!isLoadingMore"
+      class="no-live"
+    >
       <IconNoLiveRoom :size="60" />
       <span>{{ t('No Live') }}</span>
     </div>
-    <div class="bottom-text" v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)">
+    <div
+      v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)"
+      class="bottom-text"
+    >
       <span v-if="isShowMoreVisible">{{ t('Load More') }}</span>
       <span v-if="isLoadingMore">{{ t('Loading...') }}</span>
     </div>
@@ -37,27 +68,26 @@
 import { ref, watch, computed, defineEmits, onMounted, onUnmounted } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveState } from '../../states/LiveState';
-import { LiveInfo } from '../../types';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
+import type { LiveInfo } from '../../types';
 
-const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+const { liveList, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 
 const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
 const scrollContainerRef = ref<HTMLElement | null>(null);
 
+const isLoadingMore = ref(false);
+const hasMoreLive = computed(() => currentCursor.value !== '');
+
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
 
-const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
-});
+const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
 
-const isShowMoreVisible = computed(() => {
-  return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-});
+const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
 
 const emit = defineEmits<{
   (e: 'live-room-click', liveInfo: LiveInfo): void;
@@ -65,12 +95,14 @@ const emit = defineEmits<{
 
 watch(
   loginUserInfo,
-  user => {
+  async (user) => {
     if (user && user.userId) {
-      fetchLiveList({});
+      isLoadingMore.value = true;
+      await fetchLiveList({});
+      isLoadingMore.value = false;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(scrollContainerRef, () => {
@@ -95,8 +127,8 @@ function isScrollAtBottom(threshold = 50) {
     return false;
   }
   return (
-    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >=
-    scrollContainerRef.value.scrollHeight - threshold
+    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight
+    >= scrollContainerRef.value.scrollHeight - threshold
   );
 }
 
@@ -106,7 +138,7 @@ function handleWheel(event: WheelEvent) {
   }
 
   if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchLiveList({ append: true });
+    fetchMoreLives();
   }
 }
 
@@ -116,7 +148,19 @@ function handleScroll() {
   }
 
   if (isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchLiveList({ append: true });
+    fetchMoreLives();
+  }
+}
+
+async function fetchMoreLives() {
+  if (!hasMoreLive.value || isLoadingMore.value) {
+    return;
+  }
+  try {
+    isLoadingMore.value = true;
+    await fetchLiveList({ cursor: currentCursor.value });
+  } finally {
+    isLoadingMore.value = false;
   }
 }
 
@@ -138,12 +182,12 @@ onUnmounted(() => {
     scrollContainerRef.value.removeEventListener('scroll', handleScroll);
   }
 });
-
 </script>
 
 <style lang="scss" scoped>
 $text-color1: var(--text-color-primary);
 $text-color2: var(--text-color-secondary);
+$text-color3: var(--text-color-tertiary);
 
 @mixin text-size-12 {
   font-size: 12px;
@@ -259,7 +303,7 @@ $text-color2: var(--text-color-secondary);
     align-items: center;
     margin-left: 10px;
     color: $text-color1;
-    @include text-size-12;
+    @include text-size-14;
   }
 
   .owner-info {
@@ -272,7 +316,7 @@ $text-color2: var(--text-color-secondary);
     margin-left: 10px;
     gap: 4px;
     color: $text-color2;
-    @include text-size-12;
+    @include text-size-14;
 
     .owner-name {
       max-width: 80px;
@@ -293,7 +337,7 @@ $text-color2: var(--text-color-secondary);
     bottom: 5px;
     text-align: center;
     transform: translate(-50%, 0);
-    color: $text-color1;
+    color: $text-color3;
     @include text-size-14;
   }
 }

package/src/components/LiveMonitorView/LiveMonitorView.vue

@@ -1,58 +1,76 @@
 <template>
-  <div ref="liveContainerRef" class="live-monitor-container">
+  <div
+    ref="liveContainerRef"
+    v-show="props.liveInfo.orientation"
+    class="live-monitor-container"
+    :class="{ landscape: isLandscape }"
+  >
     <div :id="viewId" class="live-monitor-view"></div>
     <div
       v-for="region in regionList"
+      :key="region.userInfo.userId"
       class="live-tag-mask"
       :class="{ 'hide-tag': !isFullscreen }"
       :style="styleList[region.userInfo.userId]"
     >
       <div class="live-id live-tag">{{ `${t('RoomId')}: ${region.liveId}` }}</div>
       <div class="user-id live-tag">{{ `${t('UserId')}: ${region.userInfo.userId}` }}</div>
-      <div class="force-close live-tag" @click="handleForceClose">
+      <div v-show="isCrossRoomConnection" class="destroy-button live-tag" @click="handleForceClose">
         <IconEndLive />
         <span>{{ t('Force Close') }}</span>
       </div>
-      <div :class="['toggle-audio-state', ' live-tag', { 'is-unmuted': !isMuted }]" @click="toggleMuteAudio">
-        <IconMute v-if="isMuted" />
-        <IconSpeakerPhone v-else />
-        <span>{{ isMuted ? t('Unmute Audio') : t('Mute Audio') }}</span>
-      </div>
+    </div>
+    <div
+      v-show="!isCrossRoomConnection && isFullscreen"
+      class="non-cross-room-destroy-button destroy-button live-tag"
+      @click="handleForceClose"
+    >
+      <IconEndLive />
+      <span>{{ t('Force Close') }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps, computed, ref, watch, onMounted, onUnmounted } from 'vue';
-import { useUIKit, IconEndLive, IconMute, IconSpeakerPhone } from '@tencentcloud/uikit-base-component-vue3';
+import { useUIKit, IconEndLive } from '@tencentcloud/uikit-base-component-vue3';
 import { MonitorLiveInfo } from '../../types';
 import { useLiveMonitorState } from '../../states/LiveMonitorState';
 import { exitFullScreen } from '../../utils/utils';
 
-const { monitorLiveInfoList, closeRoom, muteLiveAudio } = useLiveMonitorState();
-const { t } = useUIKit();
-
 interface Props {
   liveInfo: MonitorLiveInfo;
 }
-const isFullscreen = ref(false);
-const isMuted = ref(true);
-const styleList = ref<Record<string, any>>({});
+
+interface StyleList {
+  [userId: string]: {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+  };
+}
+
 const props = defineProps<Props>();
+const { monitorLiveInfoList, closeRoom } = useLiveMonitorState();
+const { t } = useUIKit();
+
+const isFullscreen = ref(false);
+const isCrossRoomConnection = ref(false);
+const styleList = ref<StyleList>({});
 const liveContainerRef = ref<HTMLDivElement>();
 
-const viewId = computed(() => {
-  return `live_monitor_view_${props.liveInfo.liveId}`;
-});
+const viewId = computed(() => `live_monitor_view_${props.liveInfo.liveId}`);
 
-const regionList = computed(() => {
-  return monitorLiveInfoList.value.find(liveInfo => liveInfo.liveId === props.liveInfo.liveId)?.regionList;
-});
+const currentLiveInfo = computed(() =>
+  monitorLiveInfoList.value.find(liveInfo => liveInfo.liveId === props.liveInfo.liveId)
+);
 
-const toggleMuteAudio = () => {
-  muteLiveAudio(props.liveInfo.liveId, !isMuted.value);
-  isMuted.value = !isMuted.value;
-};
+const regionList = computed(() => currentLiveInfo.value?.regionList);
+
+const isLandscape = computed(() => currentLiveInfo.value?.orientation === 'landscape');
+
+const isSingleStream = computed(() => (regionList.value?.length ?? 0) === 1);
 
 const handleForceClose = () => {
   closeRoom(props.liveInfo.liveId);
@@ -61,49 +79,58 @@ const handleForceClose = () => {
   }
 };
 
-const handleFullscreenChange = () => {
+const onFullscreenChange = () => {
   if (document.fullscreenElement) {
     isFullscreen.value = true;
   } else {
     isFullscreen.value = false;
-    muteLiveAudio(props.liveInfo.liveId, true);
-    isMuted.value = true;
   }
 };
 
+const updateStyleList = () => {
+  if (!liveContainerRef.value || !regionList.value) return;
+
+  const containerWidth = liveContainerRef.value.clientWidth;
+  const containerHeight = liveContainerRef.value.clientHeight;
+
+  const newStyleList: StyleList = {};
+
+  regionList.value.forEach(region => {
+    if (region.liveId !== props.liveInfo.liveId) {
+      isCrossRoomConnection.value = true;
+    }
+
+    newStyleList[region.userInfo.userId] = {
+      left: `${region.rect.x * containerWidth}px`,
+      top: `${region.rect.y * containerHeight}px`,
+      width: isSingleStream.value ? '100%' : `${region.rect.w * containerWidth}px`,
+      height: isSingleStream.value ? '100%' : `${region.rect.h * containerHeight}px`,
+    };
+  });
+
+  styleList.value = newStyleList;
+};
+
 onMounted(() => {
-  addEventListener('fullscreenchange', handleFullscreenChange);
+  addEventListener('fullscreenchange', onFullscreenChange);
 });
 
 onUnmounted(() => {
-  removeEventListener('fullscreenchange', handleFullscreenChange);
+  removeEventListener('fullscreenchange', onFullscreenChange);
 });
 
-watch(
-  regionList,
-  () => {
-    if (!liveContainerRef.value) return;
-    const containerWidth = liveContainerRef.value.clientWidth;
-    const containerHeight = liveContainerRef.value.clientHeight;
-    const isSingleStream = regionList.value?.length === 1;
-    regionList.value?.forEach(region => {
-      styleList.value[region.userInfo.userId] = {
-        left: `${region.rect.x * containerWidth}px`,
-        top: `${region.rect.y * containerHeight}px`,
-        width: `${isSingleStream ? '100%' : region.rect.w * containerWidth + 'px'}`,
-        height: `${isSingleStream ? '100%' : region.rect.h * containerHeight + 'px'}`,
-      };
-    });
-  },
-  { immediate: true }
-);
+watch(regionList, updateStyleList, { immediate: true });
 </script>
 
 <style lang="scss" scoped>
 .live-monitor-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
-  height: 100%;
   aspect-ratio: 9 / 16;
+  width: auto;
+  height: 100%;
 
   .live-monitor-view {
     width: 100%;
@@ -113,60 +140,57 @@ watch(
   .live-tag-mask {
     position: absolute;
 
-    .live-tag {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      color: #ffece5;
-      font-size: 12px;
-      font-weight: 500;
-      background-color: #e57849;
-      padding: 4px;
-      border-radius: 4px;
-    }
-
     .user-id {
       top: 44px;
     }
+  }
 
-    .force-close,
-    .toggle-audio-state {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 150px;
-      left: unset;
-      top: unset;
-      right: 10px;
-      font-weight: 500;
-      font-size: 14px;
-      cursor: pointer;
-
-      span {
-        margin-left: 4px;
-      }
-    }
+  .non-cross-room-destroy-button {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
 
-    .force-close {
-      background-color: #e54545;
-      color: #ffe7e5;
-      bottom: 10px;
-    }
+  .hide-tag {
+    display: none;
+  }
 
-    .toggle-audio-state {
-      background-color: #e54545;
-      color: #ffe7e5;
-      bottom: 50px;
-    }
+  .live-tag {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #ffece5;
+    font-size: 12px;
+    font-weight: 500;
+    background-color: #e57849;
+    padding: 4px;
+    border-radius: 4px;
+  }
 
-    .is-unmuted {
-      background-color: #0abf77;
-      color: #e6ffe5;
+  .destroy-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    left: unset;
+    top: unset;
+    right: 10px;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    color: #ffe7e5;
+    background-color: #e54545;
+    bottom: 10px;
+
+    span {
+      margin-left: 4px;
     }
   }
+}
 
-  .hide-tag {
-    display: none;
-  }
+.landscape {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
 }
 </style>

package/src/components/LiveScenePanel/MaterialRenameDialog.vue

@@ -2,7 +2,7 @@
   <TUIDialog
     :visible="true"
     :title="t('Rename')"
-    :confirmText="t('保存为新名称')"
+    :confirmText="t('Save as new name')"
     @confirm="handleRename"
     @close="closeMaterialRenameDialog"
     @cancel="closeMaterialRenameDialog"

package/src/components/LiveScenePanel/i18n/en-US/index.ts

@@ -44,4 +44,6 @@ export const resource = {
   'External Devices': 'External Devices',
   Multimedia: 'Multimedia',
   'Screen Capture': 'Screen Capture',
+  'Save as new name': 'Save as new name',
+  'Please check the current browser camera permission': 'Please check the current browser camera permission',
 };

package/src/components/LiveScenePanel/i18n/zh-CN/index.ts

@@ -44,4 +44,6 @@ export const resource = {
   'External Devices': '外接设备',
   Multimedia: '多媒体',
   'Screen Capture': '画面捕捉',
+  'Save as new name': '保存为新名称',
+  'Please check the current browser camera permission': '请检查当前浏览器摄像头权限',
 };

package/src/components/LiveScenePanel/index.vue

@@ -3,7 +3,7 @@
     <LiveSceneSelect :displayMode="mediaSourceList.length === 0 ? 'panel' : 'button'" @addMaterial="selectMaterial" />
     <!-- 素材列表区域 -->
     <div class="materials-list">
-      <template v-for="material in mediaSourceList" :key="material.id">
+      <template v-for="material in mediaSourceListWithZOrderSort" :key="material.id">
         <MaterialItem
           :material="material"
           @cameraSetting="updateCameraSetting(material)"
@@ -58,6 +58,12 @@ TUIRoomEngine.once('ready', async () => {
   await getCameraList();
 });
 
+const mediaSourceListWithZOrderSort = computed(() =>
+  [...mediaSourceList.value].sort(
+    (item1: MediaSource, item2: MediaSource) => item2.layout?.zOrder - item1.layout?.zOrder
+  )
+);
+
 // 状态数据
 const showMaterialDialog = ref(false);
 const showCameraSettingDialog = ref(false);

package/src/components/MessageInput/AttachmentPicker/AttachmentPicker.vue

@@ -70,13 +70,13 @@ const { t } = useUIKit();
 const isCollapsed = computed(() => props.attachmentPickerMode === 'collapsed');
 
 const pickerItems = computed(() => [
-  { type: 'File', Component: FilePicker },
-  { type: 'Image', Component: ImagePicker },
-  { type: 'Video', Component: VideoPicker },
+  { type: 'file', Component: FilePicker },
+  { type: 'image', Component: ImagePicker },
+  { type: 'video', Component: VideoPicker },
 ].map(({ type, Component }) => ({
   Component,
   props: {
-    label: isCollapsed.value ? t(`TUIChat.${type}`) : '',
+    label: isCollapsed.value ? t(`MessageInput.${type}`) : '',
     iconSize: isCollapsed.value ? ICON_SIZE.COLLAPSED : ICON_SIZE.EXPANDED,
   },
 })));

package/src/components/MessageInput/MessageInput.module.scss

@@ -5,7 +5,7 @@
   background-color: var(--bg-color-operate);
   height: 160px;
   flex-shrink: 0;
-  padding: 3px 10px 10px;
+  padding: 10px;
   gap: 4px;
 
   &__toolbar {

package/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue

@@ -32,7 +32,7 @@ import styles from './QuotedMessagePreview.module.scss';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
 const { t } = useUIKit();
-const { currentConversation } = useConversationListState();
+const { activeConversation } = useConversationListState();
 const { focusEditor } = useMessageInputState();
 const { quotedMessage, clearQuotedMessage } = useMessageActionState();
 
@@ -44,7 +44,7 @@ watch(quotedMessage, (newVal) => {
 });
 
 // Watch conversation changes
-watch(currentConversation, () => {
+watch(activeConversation, () => {
   clearQuotedMessage();
 });
 
@@ -60,19 +60,19 @@ const calculateReferenceContent = (message: IMessageModel | undefined): string =
     case TencentCloudChat.TYPES.MSG_TEXT:
       return message.payload?.text;
     case TencentCloudChat.TYPES.MSG_IMAGE:
-      return t('TUIChat.Image');
+      return t('MessageInput.image');
     case TencentCloudChat.TYPES.MSG_AUDIO:
-      return t('TUIChat.Audio');
+      return t('MessageInput.audio');
     case TencentCloudChat.TYPES.MSG_VIDEO:
-      return t('TUIChat.Video');
+      return t('MessageInput.video');
     case TencentCloudChat.TYPES.MSG_FILE:
-      return t('TUIChat.File');
+      return t('MessageInput.file');
     case TencentCloudChat.TYPES.MSG_LOCATION:
-      return t('TUIChat.Location');
+      return t('MessageInput.location');
     case TencentCloudChat.TYPES.MSG_CUSTOM:
-      return t('TUIChat.Custom message');
+      return t('MessageInput.custom_message');
     default:
-      return t('TUIChat.Unknown');
+      return t('MessageInput.unknown');
   }
 };
 </script>

package/src/components/MessageInput/SendButton/SendButton.vue

@@ -1,26 +1,28 @@
 <template>
   <TUIButton
     type="primary"
-    shape="round"
+    radius="round"
     size="medium"
     :disabled="disabled"
     @click="onSendButtonClick"
   >
-    {{ t('TUIChat.Send') }}
+    {{ t('MessageInput.send') }}
   </TUIButton>
 </template>
 
 <script setup lang="ts">
 import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
-interface Props {
-  onClick?: (e: MouseEvent) => void;
+interface SendButtonProps {
+  onClick?: (e: TouchEvent) => void;
   disabled?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = defineProps<SendButtonProps>();
+
 const { t } = useUIKit();
-function onSendButtonClick(e: MouseEvent) {
+
+function onSendButtonClick(e: TouchEvent) {
   if (!props.disabled && props.onClick) {
     props.onClick(e);
   }

package/src/components/MessageInput/TextEditor/Editor.scss

@@ -1,8 +1,9 @@
 @use '../../../styles//mixins/scrollbar' as scrollbar;
 
-.tiptap.ProseMirror {
+
+.message-input .tiptap.ProseMirror {
   height: auto;
-  flex: 1 0 auto;
+  flex: 1;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;