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

package/src/components/LiveList/LiveList.vue

@@ -1,8 +1,24 @@
 <template>
-  <div class="live-list-panel" v-if="loginUserInfo">
-    <div v-if="liveList.length > 0" class="live-list" @wheel="handleWheel" ref="scrollContainerRef">
-      <div class="live-list-items">
-        <div class="live-item" v-for="item in liveList" :key="item.liveId" @click="liveRoomClick(item)">
+  <div
+    v-if="loginUserInfo"
+    class="live-list-panel"
+  >
+    <div
+      v-if="liveList.length > 0"
+      ref="scrollContainerRef"
+      class="live-list"
+      @wheel="handleWheel"
+    >
+      <div
+        ref="liveListItemsRef"
+        class="live-list-items"
+      >
+        <div
+          v-for="item in liveList"
+          :key="item.liveId"
+          class="live-item"
+          @click="liveRoomClick(item)"
+        >
           <div class="live-room-cover">
             <div class="header">
               <div class="left">
@@ -14,26 +30,49 @@
                 <span> {{ t('people have watched the live') }} </span>
               </div>
             </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="24" />
+            <Avatar
+              :src="item.liveOwner.avatarUrl"
+              :size="24"
+              :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="!isLoadingMore" 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)">
-      <span class="load-more-lives" v-if="isShowMoreVisible">{{ t('Load More') }}</span>
-      <span class="loading" v-if="isLoadingMore">{{ t('Loading...') }}</span>
+    <div
+      v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)"
+      class="bottom-text"
+    >
+      <span
+        v-if="isShowMoreVisible"
+        class="load-more-lives"
+      >{{ t('Load More') }}</span>
+      <span
+        v-if="isLoadingMore"
+        class="loading"
+      >{{ t('Loading...') }}</span>
     </div>
   </div>
 </template>
@@ -42,9 +81,9 @@
 import { ref, computed, defineEmits, watch } 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, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
@@ -52,30 +91,48 @@ 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 liveListItemsRef = ref<HTMLElement | null>(null);
 
 const isLoadingMore = ref(false);
 const hasMoreLive = computed(() => currentCursor.value !== '');
 
-const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.value;
-});
+const liveItemWidth = ref('356px');
+const liveItemHeight = ref('270px');
+const coverWidth = ref('356px');
+const coverHeight = ref('210px');
+const columnCount = 5;
 
-const isShowMoreVisible = computed(() => {
-  return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-});
+const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
+
+const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
 
 watch(
   loginUserInfo,
-  async user => {
+  async (user) => {
     if (user && user.userId) {
       isLoadingMore.value = true;
       await fetchLiveList({});
       isLoadingMore.value = false;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
+watch(liveListItemsRef, () => {
+  if (liveListItemsRef.value && screen.width > screen.height) {
+    const { width } = liveListItemsRef.value.getBoundingClientRect();
+    const gapWidth = 20 * (columnCount - 1);
+    const newItemWidth = (width - gapWidth) / columnCount;
+    const newItemHeight = newItemWidth * 0.75;
+
+    liveItemWidth.value = `${newItemWidth}px`;
+    liveItemHeight.value = `${newItemHeight}px`;
+
+    coverWidth.value = `${newItemWidth}px`;
+    coverHeight.value = `${newItemHeight - 52}px`;
+  }
+});
+
 const emit = defineEmits<{
   (e: 'live-room-click', liveInfo: LiveInfo): void;
 }>();
@@ -90,8 +147,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 +163,9 @@ function handleWheel(event: WheelEvent) {
 }
 
 async function fetchMoreLives() {
-  if (!hasMoreLive.value || isLoadingMore.value) return;
+  if (!hasMoreLive.value || isLoadingMore.value) {
+    return;
+  }
   try {
     isLoadingMore.value = true;
     await fetchLiveList({ cursor: currentCursor.value });
@@ -126,6 +185,7 @@ function handleCoverImageError(event: Event) {
 <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;
@@ -164,7 +224,8 @@ $text-color2: var(--text-color-secondary);
   flex-direction: column;
   overflow: hidden;
   align-items: center;
-  width: 100%;
+  margin: 0px 16px;
+  width: calc(100% - 32px);
   height: 100%;
 }
 
@@ -181,7 +242,7 @@ $text-color2: var(--text-color-secondary);
 .live-list-items {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 356px);
+  grid-template-columns: repeat(auto-fill, v-bind(liveItemWidth));
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
@@ -191,8 +252,8 @@ $text-color2: var(--text-color-secondary);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  width: 356px;
-  height: 270px;
+  width: v-bind(liveItemWidth);
+  height: v-bind(liveItemHeight);
   white-space: nowrap;
   text-overflow: ellipsis;
   gap: 5px;
@@ -204,8 +265,8 @@ $text-color2: var(--text-color-secondary);
 
   .live-room-cover {
     position: relative;
-    width: 356px;
-    height: 210px;
+    width: v-bind(coverWidth);
+    height: v-bind(coverHeight);
     overflow: hidden;
 
     img {
@@ -244,11 +305,12 @@ $text-color2: var(--text-color-secondary);
 
   .live-name {
     margin: 5px 0px;
+    height: 18px;
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     color: $text-color1;
-    @include text-size-12;
+    @include text-size-14;
   }
 
   .owner-info {
@@ -257,19 +319,13 @@ $text-color2: var(--text-color-secondary);
     align-items: center;
     gap: 10px;
     color: $text-color2;
-    @include text-size-12;
+    @include text-size-14;
 
     .owner-name {
       max-width: 200px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-    }
   }
 }
 
@@ -284,7 +340,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/LiveList/LiveListH5.vue

@@ -1,38 +1,63 @@
 <template>
-  <div class="live-list-panel-h5" v-if="loginUserInfo">
+  <div
+    v-if="loginUserInfo"
+    class="live-list-panel-h5"
+  >
     <div
       v-if="liveList.length > 0"
+      ref="scrollContainerRef"
       class="live-list"
       @scroll="handleScroll"
       @wheel="handleWheel"
-      ref="scrollContainerRef"
     >
       <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="!isLoadingMore" 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>
@@ -43,9 +68,9 @@
 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, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
@@ -60,13 +85,9 @@ const hasMoreLive = computed(() => currentCursor.value !== '');
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
 
-const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.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;
@@ -74,14 +95,14 @@ const emit = defineEmits<{
 
 watch(
   loginUserInfo,
-  async user => {
+  async (user) => {
     if (user && user.userId) {
       isLoadingMore.value = true;
       await fetchLiveList({});
       isLoadingMore.value = false;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(scrollContainerRef, () => {
@@ -106,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
   );
 }
 
@@ -132,7 +153,9 @@ function handleScroll() {
 }
 
 async function fetchMoreLives() {
-  if (!hasMoreLive.value || isLoadingMore.value) return;
+  if (!hasMoreLive.value || isLoadingMore.value) {
+    return;
+  }
   try {
     isLoadingMore.value = true;
     await fetchLiveList({ cursor: currentCursor.value });
@@ -164,6 +187,7 @@ onUnmounted(() => {
 <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;
@@ -279,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 {
@@ -292,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;
@@ -313,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/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();
 });
 

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

@@ -1,7 +1,7 @@
 <template>
   <TUIButton
     type="primary"
-    shape="round"
+    radius="round"
     size="medium"
     :disabled="disabled"
     @click="onSendButtonClick"

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;

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

@@ -22,4 +22,5 @@
 .editor {
   flex: 1;
   display: flex;
+  flex-direction: column;
 }

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -51,6 +51,8 @@ onMounted(() => {
     return;
   }
 
+  element.classList.add('message-input');
+
   if (!element.dataset.editorCreated) {
     editorInstance = createEditor({
       element,

package/src/components/MessageInput/i18n/index.ts

@@ -1,13 +1,7 @@
-import { i18next } from '@tencentcloud/uikit-base-component-vue3';
-
 import enUS from './en-US';
 import zhCN from './zh-CN';
 
-const resources = {
+export const resources = {
   'en-US': enUS,
   'zh-CN': zhCN,
 };
-
-Object.entries(resources).forEach(([lng, resource]) => {
-  i18next.addResourceBundle(lng, 'translation', { MessageInput: resource }, true, false);
-});

package/src/components/MessageInput/index.ts

@@ -1,16 +1,33 @@
-import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
-import { EmojiPicker } from './EmojiPicker';
-import MessageInput from './MessageInput.vue';
-import { TextEditor } from './TextEditor';
+import {
+  AttachmentPicker as AttachmentPickerComponent,
+  FilePicker as FilePickerComponent,
+  ImagePicker as ImagePickerComponent,
+  VideoPicker as VideoPickerComponent,
+} from './AttachmentPicker';
+import { EmojiPicker as EmojiPickerComponent } from './EmojiPicker';
+import { TextEditor as TextEditorComponent } from './TextEditor';
+import MessageInputComponent from './MessageInput.vue';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
+
+addI18n('en-US', { translation: { MessageInput: resources['en-US'] } });
+addI18n('zh-CN', { translation: { MessageInput: resources['zh-CN'] } });
+
+const AttachmentPicker = AttachmentPickerComponent;
+const FilePicker = FilePickerComponent;
+const ImagePicker = ImagePickerComponent;
+const VideoPicker = VideoPickerComponent;
+const EmojiPicker = EmojiPickerComponent;
+const TextEditor = TextEditorComponent;
+const MessageInput = MessageInputComponent;
 
-import './i18n';
 
 export {
-  TextEditor,
-  MessageInput,
-  EmojiPicker,
   AttachmentPicker,
   FilePicker,
   ImagePicker,
   VideoPicker,
+  EmojiPicker,
+  TextEditor,
+  MessageInput,
 };

package/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue

@@ -12,16 +12,16 @@ import {
 import { useMessageActions } from '../../../../../hooks/useMessageActions';
 import classes from './MessageActionDropdown.module.scss';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
 interface IMessageActionDropdownProps {
-  message: IMessageModel;
+  message: MessageModel;
   messageActionList?: MessageAction[] | undefined;
 }
 
 const props = withDefaults(defineProps<IMessageActionDropdownProps>(), {
   messageActionList: undefined,
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as MessageModel,
 });
 
 const { t } = useUIKit();
@@ -74,7 +74,7 @@ const bodyElement = document.body;
             :message="message"
           />
           <template v-else-if="action.visible">
-            <span>{{ t(`TUIChat.${action.label}`, { defaultValue: action.label }) }}</span>
+            <span>{{ t(`MessageList.${action.label}`, { defaultValue: action.label }) }}</span>
             <template v-if="action.icon">
               <span v-if="typeof action.icon === 'string'">{{ action.icon }}</span>
               <component

package/src/components/MessageList/Message/MessageLayout/MessageLayout.vue

@@ -197,7 +197,6 @@ $message-avatar-gap: 8px;
     &.message-layout__wrapper--left {
       padding-left: calc(#{$message-avatar-size} + #{$message-avatar-gap});
     }
-    // 右侧聚合时反转 padding
     &.message-layout__wrapper--right {
       padding-right: calc(#{$message-avatar-size} + #{$message-avatar-gap});
     }