tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/LiveList/LiveListH5.vue

@@ -1,39 +1,52 @@
 <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"
-      class="live-list"
-      @scroll="handleScroll"
-      @wheel="handleWheel"
+      v-if="showLiveList.length > 0"
       ref="scrollContainerRef"
+      class="live-list"
     >
-      <div class="live-list-items">
-        <div class="live-item" v-for="item in liveList" :key="item.liveId" @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>
+      <PullToRefresh
+        :text="{
+          pull: t('Pull to refresh'),
+          release: t('Release to refresh'),
+          loading: t('Loading'),
+          success: t('Refresh success'),
+          error: t('Refresh failed'),
+        }"
+        @refresh="handleRefresh"
+        @load-more="fetchMoreLives"
+      >
+        <div class="live-list-items">
+          <div v-for="item in showLiveList" :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" />
+            </div>
+            <span class="live-name">{{ item.liveName }} </span>
+            <div class="owner-info">
+              <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>
-            <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" />
-            <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
           </div>
         </div>
-      </div>
-      <div class="bottom-text-no-more" v-if="!hasMoreLive">
-        <span>{{ t('No More') }}</span>
-      </div>
+        <div v-if="!hasMoreLive" class="bottom-text-no-more">
+          <span>{{ t('No More') }}</span>
+        </div>
+      </PullToRefresh>
     </div>
     <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 v-if="isShowMoreVisible">{{ t('Load More') }}</span>
+    <div v-if="liveList.length > 0 && isLoadingMore" class="bottom-text">
       <span v-if="isLoadingMore">{{ t('Loading...') }}</span>
     </div>
   </div>
@@ -43,13 +56,15 @@
 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';
+import PullToRefresh from './pullToRefresh.vue';
 
 const { liveList, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
+const showLiveList = ref<LiveInfo[]>([]);
 
 const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -60,14 +75,6 @@ const hasMoreLive = computed(() => currentCursor.value !== '');
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
 
-const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.value;
-});
-
-const isShowMoreVisible = computed(() => {
-  return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-});
-
 const emit = defineEmits<{
   (e: 'live-room-click', liveInfo: LiveInfo): void;
 }>();
@@ -77,7 +84,10 @@ watch(
   async user => {
     if (user && user.userId) {
       isLoadingMore.value = true;
+      currentCursor.value = '';
+      liveList.value.length = 0;
       await fetchLiveList({});
+      showLiveList.value = liveList.value.slice();
       isLoadingMore.value = false;
     }
   },
@@ -96,46 +106,33 @@ watch(scrollContainerRef, () => {
   }
 });
 
-function liveRoomClick(liveInfo: LiveInfo) {
-  console.log('liveRoomClick,liveInfo:', liveInfo);
-  emit('live-room-click', liveInfo);
-}
-
-function isScrollAtBottom(threshold = 50) {
-  if (!scrollContainerRef.value) {
-    return false;
+async function handleRefresh(completeRefresh: (success?: boolean) => void) {
+  try {
+    isLoadingMore.value = true;
+    currentCursor.value = '';
+    liveList.value.length = 0;
+    await fetchLiveList({});
+    showLiveList.value = liveList.value.slice();
+    isLoadingMore.value = false;
+    completeRefresh(true);
+  } catch (error) {
+    completeRefresh(false);
   }
-  return (
-    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >=
-    scrollContainerRef.value.scrollHeight - threshold
-  );
 }
 
-function handleWheel(event: WheelEvent) {
-  if (!scrollContainerRef.value) {
-    return;
-  }
-
-  if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchMoreLives();
-  }
+function liveRoomClick(liveInfo: LiveInfo) {
+  console.log('liveRoomClick,liveInfo:', liveInfo);
+  emit('live-room-click', liveInfo);
 }
 
-function handleScroll() {
-  if (!scrollContainerRef.value) {
+async function fetchMoreLives() {
+  if (!hasMoreLive.value || isLoadingMore.value) {
     return;
   }
-
-  if (isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchMoreLives();
-  }
-}
-
-async function fetchMoreLives() {
-  if (!hasMoreLive.value || isLoadingMore.value) return;
   try {
     isLoadingMore.value = true;
     await fetchLiveList({ cursor: currentCursor.value });
+    showLiveList.value = liveList.value.slice();
   } finally {
     isLoadingMore.value = false;
   }
@@ -164,6 +161,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 +277,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 +290,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;
@@ -305,6 +303,7 @@ $text-color2: var(--text-color-secondary);
 .bottom-text-no-more {
   flex: 1;
   min-height: 30px;
+  text-align: center;
   position: relative;
 
   span {
@@ -313,7 +312,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/i18n/en-US/index.ts

@@ -3,6 +3,11 @@ export const resource = {
   'people have watched the live': 'people have watched the live',
   'Load More': 'Load More',
   'Loading...': 'Loading...',
+  'Loading': 'Loading',
   'No More': 'No More',
   'No Live': 'No Live',
+  'Pull down to refresh': 'Pull down to refresh',
+  'Release to refresh': 'Release to refresh',
+  'Refresh success': 'Refresh success',
+  'Refresh failed': 'Refresh failed',
 };

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

@@ -3,6 +3,11 @@ export const resource = {
   'people have watched the live': '人看过',
   'Load More': '加载更多',
   'Loading...': '加载中...',
+  'Loading': '正在加载...',
   'No More': '没有更多',
   'No Live': '暂无直播间',
+  'Pull to refresh': '下拉刷新',
+  'Release to refresh': '松开刷新',
+  'Refresh success': '刷新成功',
+  'Refresh failed': '刷新失败',
 };

package/src/components/LiveList/pullToRefresh.vue

@@ -0,0 +1,364 @@
+<template>
+  <div
+    class="pull-to-refresh"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <!-- Refresh indicator -->
+    <div
+      class="refresh-indicator"
+      :class="[refreshState, { visible: isIndicatorVisible }]"
+      :style="{ transform: `translateY(${translateY}px)` }"
+    >
+              <!-- refresh-arrow -->
+        <IconArrowUpNew
+          v-if="refreshState !== RefreshState.Loading && refreshState !== RefreshState.Success && refreshState !== RefreshState.Error"
+          class="refresh-arrow"
+          :class="{ releasing: refreshState === RefreshState.Releasing }"
+          :size="16"
+        />
+      <!-- refresh-loading -->
+      <div v-if="refreshState === RefreshState.Loading" class="refresh-loading"></div>
+      <!-- refresh-success -->
+      <IconCheck v-if="refreshState === RefreshState.Success" class="refresh-success" :size="16" />
+      <!-- refresh-error -->
+      <IconErrorToast v-if="refreshState === RefreshState.Error" class="refresh-error" :size="16" />
+      <!-- refresh-text -->
+      <span class="refresh-text">{{ statusText }}</span>
+    </div>
+
+    <!-- Content slot -->
+    <div ref="contentRef" class="refresh-content" :style="{ transform: `translateY(${contentTranslateY}px)` }"
+      @scroll="handleScroll"
+      @wheel="handleWheel">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { IconCheck, IconArrowUpNew, IconErrorToast } from '@tencentcloud/uikit-base-component-vue3';
+
+interface Props {
+  threshold?: number;
+  resistance?: number;
+  disabled?: boolean;
+  resultDuration?: number;
+  text?: {
+    pull: string;
+    release: string;
+    loading: string;
+    success: string;
+    error: string;
+  };
+}
+
+/**
+ * Pull-to-refresh state enumeration
+ * Defines the various states that the component can be in during the entire pull-to-refresh flow
+ */
+enum RefreshState {
+  /**
+   * Pulling state
+   * - User is dragging down but hasn't reached the refresh threshold yet
+   * - Shows down arrow icon, indicating user can continue pulling down
+   * - Content area follows finger movement, providing visual feedback
+   */
+  Pulling = 'pulling',
+
+  /**
+   * Releasing state
+   * - User has pulled down to or beyond the threshold (props.threshold)
+   * - Shows up arrow icon, indicating user can release to trigger refresh
+   * - Releasing at this point will immediately enter refresh state
+   */
+  Releasing = 'releasing',
+
+  /**
+   * Loading state
+   * - Component enters refresh state after user releases
+   * - Shows loading animation (spinning circle)
+   * - Content area stays at threshold height, displaying refresh indicator
+   * - Parent component starts executing actual refresh logic
+   */
+  Loading = 'loading',
+
+  /**
+   * Success state
+   * - Parent component refresh operation completed successfully
+   * - Shows green checkmark icon and success text
+   * - Content area stays at threshold height, displaying success indicator
+   * - Automatically resets after displaying for props.resultDuration time
+   */
+  Success = 'success',
+
+  /**
+   * Error state
+   * - Parent component refresh operation failed (e.g., network error, API exception)
+   * - Shows red error icon and failure text
+   * - Content area stays at threshold height, displaying error indicator
+   * - Automatically resets after displaying for props.resultDuration time
+   */
+  Error = 'error',
+}
+
+const refreshState = ref(RefreshState.Pulling);
+const startY = ref(0);
+const currentY = ref(0);
+const isTouching = ref(false);
+const contentRef = ref<HTMLElement | null>(null);
+let timer: number | null = null;
+
+const props = withDefaults(defineProps<Props>(), {
+  threshold: 60,
+  resistance: 2.5,
+  disabled: false,
+  resultDuration: 500,
+  text: () => ({
+    pull: 'Pull to refresh',
+    release: 'Release to refresh',
+    loading: 'Loading...',
+    success: 'Refresh success',
+    error: 'Refresh failed',
+  }),
+});
+
+const emit = defineEmits<{
+  refresh: [completeRefresh: (success?: boolean) => void];
+  loadMore: [];
+}>();
+
+defineExpose({
+  completeRefresh,
+});
+
+const pullDistance = computed(() => {
+  if (refreshState.value === RefreshState.Loading) {
+    return props.threshold;
+  }
+  if (!isTouching.value) return 0;
+  return Math.max(0, (currentY.value - startY.value) / props.resistance);
+});
+
+const contentTranslateY = computed(() => {
+  if (refreshState.value === RefreshState.Loading || refreshState.value === RefreshState.Success || refreshState.value === RefreshState.Error) {
+    return props.threshold;
+  }
+  return Math.min(pullDistance.value, props.threshold);
+});
+
+const translateY = computed(() => {
+  if (refreshState.value === RefreshState.Loading || refreshState.value === RefreshState.Success || refreshState.value === RefreshState.Error) {
+    return 0;
+  }
+  return Math.min(pullDistance.value, props.threshold) - props.threshold;
+});
+
+const isIndicatorVisible = computed(() => {
+  if (refreshState.value === RefreshState.Loading || refreshState.value === RefreshState.Success || refreshState.value === RefreshState.Error) {
+    return true;
+  }
+  return pullDistance.value > 10;
+});
+
+const statusText = computed(() => {
+  switch (refreshState.value) {
+    case RefreshState.Releasing:
+      return props.text.release;
+    case RefreshState.Loading:
+      return props.text.loading;
+    case RefreshState.Success:
+      return props.text.success;
+    case RefreshState.Error:
+      return props.text.error;
+    default:
+      return props.text.pull;
+  }
+});
+
+function isScrollAtBottom(threshold = 50) {
+  if (!contentRef.value) {
+    return false;
+  }
+
+  return (
+    contentRef.value.scrollTop + contentRef.value.clientHeight >=
+    contentRef.value.scrollHeight - threshold
+  );
+}
+
+function handleWheel(event: WheelEvent) {
+  if (!contentRef.value) {
+    return;
+  }
+
+  if (event.deltaY > 0 && isScrollAtBottom()) {
+    emit('loadMore');
+  }
+}
+
+function handleScroll() {
+  if (!contentRef.value) {
+    return;
+  }
+
+  if (isScrollAtBottom()) {
+    emit('loadMore');
+  }
+}
+
+function checkIsAtTop() {
+  if (!contentRef.value) return true;
+  return contentRef.value.scrollTop === 0;
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (props.disabled || refreshState.value === RefreshState.Loading) return;
+  if (!checkIsAtTop()) return;
+
+  isTouching.value = true;
+  startY.value = event.touches[0].clientY;
+  currentY.value = startY.value;
+  refreshState.value = RefreshState.Pulling;
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!isTouching.value || props.disabled || refreshState.value === RefreshState.Loading) return;
+  currentY.value = event.touches[0].clientY;
+
+  if (pullDistance.value > 0 && checkIsAtTop()) {
+    event.preventDefault();
+  }
+
+  refreshState.value = pullDistance.value > props.threshold ? RefreshState.Releasing : RefreshState.Pulling;
+}
+
+function onTouchEnd() {
+  if (!isTouching.value || props.disabled) return;
+  isTouching.value = false;
+
+  if (refreshState.value === RefreshState.Loading) return;
+
+  if (refreshState.value === RefreshState.Releasing) {
+    startRefresh();
+  } else {
+    resetPullState();
+  }
+}
+
+function startRefresh() {
+  refreshState.value = RefreshState.Loading;
+  emit('refresh', completeRefresh);
+}
+
+function completeRefresh(success: boolean = true) {
+  refreshState.value = success ? RefreshState.Success : RefreshState.Error;
+  
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    resetPullState();
+  }, props.resultDuration) as unknown as number;
+}
+
+function resetPullState() {
+  startY.value = 0;
+  currentY.value = 0;
+  if (refreshState.value !== RefreshState.Loading) {
+    refreshState.value = RefreshState.Pulling;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pull-to-refresh {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  touch-action: pan-y;
+
+  .refresh-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: v-bind('props.threshold + "px"');
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #666;
+    font-size: 14px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-color: transparent;
+    z-index: 10;
+
+    &.visible {
+      opacity: 1;
+    }
+
+    .refresh-arrow {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      rotate: 180deg;
+      transition: transform 0.3s;
+      fill: currentColor;
+
+      &.releasing {
+        transform: rotate(180deg);
+      }
+    }
+
+    .refresh-loading {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      border: 2px solid #e0e0e0;
+      border-top: 2px solid #007aff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    .refresh-success {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      color: #4caf50;
+    }
+
+    .refresh-error {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      color: #f44336;
+    }
+
+    .refresh-text {
+      font-weight: 500;
+    }
+  }
+
+  .refresh-content {
+    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/LiveScenePanel/CameraSettingDialog.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, Ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { useDeviceState } from '../../states/DeviceState';
 import { MediaSource } from '../../types';
 import {
@@ -59,10 +59,6 @@ const props = defineProps<{
 
 const emits = defineEmits(['addCameraMaterial', 'updateCameraMaterial', 'close']);
 
-onUnmounted(async () => {
-  await previewTRTCCloud.stopCameraDeviceTest();
-});
-
 const title = computed(() => {
   return props.mediaSource ? t('Update Camera') : t('Add Camera');
 });
@@ -103,6 +99,11 @@ onMounted(async () => {
   await previewTRTCCloud.startCameraDeviceTest('video-preview');
 });
 
+onBeforeUnmount(async () => {
+  await previewTRTCCloud.stopCameraDeviceTest();
+  previewTRTCCloud.destroy();
+});
+
 watch(
   () => props.mediaSource,
   async (mediaSource: any) => {

package/src/components/LiveScenePanel/index.vue

@@ -39,7 +39,7 @@ import TUIRoomEngine, {
 } from '@tencentcloud/tuiroom-engine-js';
 import LiveSceneSelect from './LiveSceneSelect.vue';
 import { TUIToast, TOAST_TYPE, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { onUnmounted, ref, computed } from 'vue';
+import { onBeforeUnmount, ref, computed } from 'vue';
 import CameraSettingDialog from './CameraSettingDialog.vue';
 import MaterialRenameDialog from './MaterialRenameDialog.vue';
 import MaterialItem from './MaterialItem.vue';
@@ -241,7 +241,7 @@ const updateCameraSetting = (material: MediaSource) => {
   showCameraSettingDialog.value = true;
 };
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   clearMediaSource();
 })
 </script>

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

@@ -4,6 +4,7 @@
 
   &__icon {
     cursor: pointer;
+    display: flex;
   }
 
   &__popup {
@@ -20,12 +21,15 @@
   &--expanded {
     display: flex;
     flex-direction: row;
+    gap: 8px;
+
     .attachment-picker__item {
       padding: 4px;
     }
   }
 
   &__item {
+    outline: none !important;
     border: none;
     display: flex;
     flex-direction: row;