tuikit-atomicx-vue3 3.3.4 → 3.4.1

package/src/components/LiveList/LiveList.vue

@@ -1,24 +1,8 @@
 <template>
-  <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 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">
@@ -27,56 +11,31 @@
               </div>
               <div class="right">
                 <span> {{ item.currentViewerCount || 0 }} </span>
-                <span> {{ t('people have watched the live') }} </span>
+                <span> {{ t('people watched') }} </span>
               </div>
             </div>
-            <img
-              :src="item.coverUrl || DEFAULT_COVER"
-              alt=""
-              @error="handleCoverImageError"
-            >
+            <div class="gradient"></div>
+            <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"
-              :style="{ border: '1px solid var(--uikit-color-white-7)' }"
-            />
+            <Avatar :src="item.liveOwner.avatarUrl" :size="20"
+              :style="{ border: '1px solid var(--uikit-color-white-7)' }" />
             <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
           </div>
         </div>
       </div>
-      <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
-      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 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>
-
 <script lang="ts" setup>
 import { ref, computed, defineEmits, watch } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
@@ -84,15 +43,19 @@ import { useLiveState } from '../../states/LiveState';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 import type { LiveInfo } from '../../types';
-
 const { liveList, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
-
+const props = defineProps({
+  columnCount: {
+    type: Number,
+    default: 5,
+  },
+});
 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 !== '');
 
@@ -100,12 +63,9 @@ const liveItemWidth = ref('356px');
 const liveItemHeight = ref('270px');
 const coverWidth = ref('356px');
 const coverHeight = ref('210px');
-const columnCount = 5;
-
+const itemGap = ref('20px');
 const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
-
 const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
-
 watch(
   loginUserInfo,
   async (user) => {
@@ -119,31 +79,32 @@ watch(
   },
   { 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`;
-
+    let itemGapWidth = 20;
+    if (width <= 1000) {
+      itemGapWidth = 12;
+    } else {
+      itemGapWidth = 20;
+    }
+ 
+    itemGap.value = `${itemGapWidth}px`;
+    const gapWidth = itemGapWidth * (props.columnCount - 1);
+    const newItemWidth = (width - gapWidth) / props.columnCount;
     coverWidth.value = `${newItemWidth}px`;
-    coverHeight.value = `${newItemHeight - 52}px`;
+    coverHeight.value = `${newItemWidth * 0.6}px`;
+    liveItemWidth.value = `${newItemWidth}px`;
+    liveItemHeight.value = `${coverHeight.value + 52}px`;
   }
 });
-
 const emit = defineEmits<{
   (e: 'live-room-click', liveInfo: LiveInfo): void;
 }>();
-
 function liveRoomClick(liveInfo: LiveInfo) {
   console.log('liveRoomClick,liveInfo:', liveInfo);
   emit('live-room-click', liveInfo);
 }
-
 function isScrollAtBottom(threshold = 50) {
   if (!scrollContainerRef.value) {
     return false;
@@ -153,17 +114,14 @@ function isScrollAtBottom(threshold = 50) {
     >= scrollContainerRef.value.scrollHeight - threshold
   );
 }
-
 function handleWheel(event: WheelEvent) {
   if (!scrollContainerRef.value) {
     return;
   }
-
   if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
     fetchMoreLives();
   }
 }
-
 async function fetchMoreLives() {
   if (!hasMoreLive.value || isLoadingMore.value) {
     return;
@@ -175,7 +133,6 @@ async function fetchMoreLives() {
     isLoadingMore.value = false;
   }
 }
-
 function handleCoverImageError(event: Event) {
   const image = event.target as HTMLImageElement;
   if (image) {
@@ -183,44 +140,36 @@ function handleCoverImageError(event: Event) {
   }
 }
 </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;
   font-weight: 400;
 }
-
 @mixin text-size-14 {
   font-size: 14px;
   font-weight: 400;
 }
-
 @mixin scrollbar {
   &::-webkit-scrollbar {
     width: 6px;
     background: transparent;
   }
-
   &::-webkit-scrollbar-track {
     background: transparent;
   }
-
   &::-webkit-scrollbar-thumb {
     background: var(--uikit-color-gray-3);
     border-radius: 3px;
     border: 2px solid transparent;
     background-clip: padding-box;
-
     &:hover {
       background: var(--uikit-color-gray-3);
     }
   }
 }
-
 .live-list-panel {
   display: flex;
   flex-direction: column;
@@ -230,7 +179,6 @@ $text-color3: var(--text-color-tertiary);
   width: calc(100% - 32px);
   height: 100%;
 }
-
 .live-list {
   flex: 1;
   display: flex;
@@ -240,36 +188,44 @@ $text-color3: var(--text-color-tertiary);
   align-items: center;
   @include scrollbar;
 }
-
 .live-list-items {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, v-bind(liveItemWidth));
   flex-wrap: wrap;
   justify-content: center;
-  gap: 20px;
+  gap: v-bind(itemGap);
 }
-
+ 
 .live-item {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   width: v-bind(liveItemWidth);
   height: v-bind(liveItemHeight);
   white-space: nowrap;
   text-overflow: ellipsis;
-  gap: 5px;
   border-radius: 10px;
 
   :hover {
     cursor: pointer;
   }
-
   .live-room-cover {
     position: relative;
     width: v-bind(coverWidth);
     height: v-bind(coverHeight);
     overflow: hidden;
+    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 8px 18px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+
+    .gradient {
+      position: absolute;
+      width: 100%;
+      height: 25%;
+      object-fit: cover;
+      border-radius: 10px;
+      background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0));
+      z-index: 1;
+    }
 
     img {
       width: 100%;
@@ -277,7 +233,6 @@ $text-color3: var(--text-color-tertiary);
       object-fit: cover;
       border-radius: 10px;
     }
-
     .header {
       position: absolute;
       display: flex;
@@ -285,9 +240,10 @@ $text-color3: var(--text-color-tertiary);
       width: 100%;
       height: 20px;
       justify-content: space-between;
-      color: $text-color1;
+      color: var(--uikit-color-white-1);
       @include text-size-12;
       align-items: center;
+      z-index: 10;
 
       .left {
         display: flex;
@@ -295,7 +251,6 @@ $text-color3: var(--text-color-tertiary);
         align-items: center;
         gap: 5px;
       }
-
       .right {
         display: flex;
         align-items: center;
@@ -307,8 +262,8 @@ $text-color3: var(--text-color-tertiary);
   }
 
   .live-name {
-    margin: 5px 0px;
-    height: 18px;
+    margin-top: 4px;
+    height: 24px;
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -317,10 +272,10 @@ $text-color3: var(--text-color-tertiary);
   }
 
   .owner-info {
-    height: 24px;
+    height: 20px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 4px;
     color: $text-color2;
     @include text-size-14;
 
@@ -331,12 +286,10 @@ $text-color3: var(--text-color-tertiary);
     }
   }
 }
-
 .bottom-text-no-more {
   flex: 1;
   min-height: 30px;
   position: relative;
-
   span {
     width: 200px;
     position: absolute;
@@ -347,27 +300,29 @@ $text-color3: var(--text-color-tertiary);
     @include text-size-14;
   }
 }
-
 .bottom-text {
   padding: 8px;
   color: $text-color1;
   @include text-size-14;
 }
-
 .load-more-lives:hover {
   cursor: pointer;
 }
-
 .no-live {
   display: flex;
   flex-direction: column;
   flex: 1;
   align-items: center;
   justify-content: center;
-
   span {
     color: $text-color1;
     @include text-size-12;
   }
 }
-</style>
+@media screen and (max-width: 1000px) {
+  .live-list-panel {
+    margin: 0px 8px;
+    width: calc(100% - 16px);
+  }
+}
+</style>

package/src/components/LiveList/LiveListH5.vue

@@ -22,7 +22,7 @@
               <div class="header">
                 <IconLiveCoverHeader :size="10" />
                 <span class="viewer-count"> {{ item.currentViewerCount || 0 }} </span>
-                <span> {{ t('people have watched the live') }} </span>
+                <span> {{ t('people watched') }} </span>
               </div>
               <img :src="item.coverUrl || DEFAULT_COVER" alt="" @error="handleCoverImageError" />
             </div>

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

@@ -1,6 +1,6 @@
 export const resource = {
   LIVE: 'LIVE',
-  'people have watched the live': 'people have watched the live',
+  'people watched': 'viewers',
   'Load More': 'Load More',
   'Loading...': 'Loading...',
   'Loading': 'Loading',

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

@@ -1,6 +1,6 @@
 export const resource = {
   LIVE: 'LIVE',
-  'people have watched the live': '人看过',
+  'people watched': '人看过',
   'Load More': '加载更多',
   'Loading...': '加载中...',
   'Loading': '正在加载...',

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

@@ -2,17 +2,19 @@
   <div :class="[styles['attachment-picker']]">
     <template v-if="isCollapsed">
       <PopoverRoot>
-        <PopoverTrigger as="span">
-          <IconPlus
-            :class="styles['attachment-picker__icon']"
-            size="20"
-          />
+        <PopoverTrigger as="div">
+          <slot>
+            <IconPlus
+              :class="styles['attachment-picker__icon']"
+              size="20"
+            />
+          </slot>
         </PopoverTrigger>
         <PopoverPortal>
           <PopoverContent
-          side="top"
-          align="start"
-          :side-offset="5"
+            side="top"
+            align="start"
+            :side-offset="5"
           >
             <div :class="styles['attachment-picker__popup']">
               <component

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

@@ -1,25 +1,19 @@
 <template>
   <View>
-    <template v-if="label">
-      <button
-        :class="[styles['attachment-picker__item'], className]"
-        :style="style"
-        @click="handleButtonClick"
-      >
-        <IconFile
-          :size="iconSize"
-          :class="styles['attachment-picker__item-icon']"
-        />
-        <div>{{ label }}</div>
-      </button>
-    </template>
-    <template v-else>
-      <IconFile
-        :size="iconSize"
-        :class="styles['attachment-picker__item-icon']"
-        @click="handleButtonClick"
-      />
-    </template>
+    <div @click="handleButtonClick">
+      <slot>
+        <div
+          :class="cs(styles['file-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconFile
+            :size="props.iconSize"
+            :class="cs(styles['file-picker__icon'])"
+          />
+        </div>
+      </slot>
+    </div>
     <input
       ref="fileInputRef"
       type="file"
@@ -31,11 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, useCssModule } from 'vue';
 import { IconFile } from '@tencentcloud/uikit-base-component-vue3';
-import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
+import cs from 'classnames';
 import { View } from '../../../baseComp/View';
-import styles from './AttachmentPicker.module.scss';
+import { MessageContentType, useMessageInputState } from '../../../states/MessageInputState';
 
 const PICKER_CONSTANTS = {
   ACCEPT_TYPE: '*/*',
@@ -44,23 +38,25 @@ const PICKER_CONSTANTS = {
 interface Props {
   label?: string;
   iconSize?: number;
-  onClose?: () => void;
-  className?: string;
-  style?: Record<string, string>;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: '',
-  className: '',
-  style: undefined,
-  onClose: () => {},
-  iconSize: 24,
+  disabled: false,
+  iconSize: 20,
 });
 
+const styles = useCssModule();
 const { sendMessage } = useMessageInputState();
+
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
 function handleButtonClick() {
+  if (props.disabled) {
+    return;
+  }
+
   fileInputRef.value?.click();
 }
 
@@ -73,6 +69,38 @@ function handleFileInput(e: Event) {
 
   sendMessage([{ type: MessageContentType.FILE, content: file }]);
   target.value = '';
-  props.onClose?.();
 }
 </script>
+
+<style lang="scss" module>
+.file-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--text-color-primary);
+  }
+}
+</style>