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

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { CSSProperties } from 'vue';
+import { computed, useCssModule } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
 import { View } from '../../../../../baseComp/View';
 import { getTimeStampAuto } from '../../../../../utils/time';
 
@@ -19,23 +17,20 @@ interface MessageMetaProps {
     isPeerRead: boolean;
   };
   status?: 'unSend' | 'success' | 'fail' | string;
-  class?: string;
-  style?: CSSProperties;
 }
 
 const props = withDefaults(defineProps<MessageMetaProps>(), {
   timestamp: 0,
-  flow: '',
+  flow: 'in',
   needReadReceipt: false,
   readReceiptInfo: undefined,
   status: undefined,
-  class: undefined,
-  style: undefined,
 });
 
 const emits = defineEmits(['onReadReceiptTextClick']);
 
 const { t } = useUIKit();
+const classes = useCssModule();
 
 const displayTime = computed(() => getTimeStampAuto(props.timestamp));
 
@@ -50,7 +45,12 @@ const shouldShowStatusIcon = computed(() => (
     || props.status === 'fail')));
 
 const readReceiptText = computed(() => {
-  if (!props.needReadReceipt || props.status !== 'success' || !props.readReceiptInfo) {
+  if (
+    !props.needReadReceipt
+    || props.status !== 'success'
+    || !props.readReceiptInfo
+    || props.flow === 'in'
+  ) {
     return '';
   }
 
@@ -69,10 +69,9 @@ const readReceiptText = computed(() => {
 
 <template>
   <View
-    :class="cs('message-meta', props.class)"
+    :class="classes['message-meta']"
     dir="row"
     align="center"
-    :style="props.style"
   >
     <!-- Show status icon case -->
     <template v-if="shouldShowStatusIcon">
@@ -83,23 +82,23 @@ const readReceiptText = computed(() => {
     </template>
 
     <!-- Show read receipt text case -->
-    <template v-else>
+    <template v-else-if="Boolean(readReceiptText)">
       <span
         v-if="readReceiptText && !props.isGroup"
-        class="message-meta__read-status"
+        :class="classes['message-meta__read-status']"
       >
         {{ readReceiptText }}
       </span>
       <span
         v-else-if="readReceiptText && props.isGroup && props.readReceiptInfo && props.readReceiptInfo.unreadCount > 0"
-        class="message-meta__group-unread"
+        :class="classes['message-meta__group-unread']"
         @click="handleGroupUnreadClick"
       >
         {{ readReceiptText }}
       </span>
       <span
         v-else-if="readReceiptText && props.isGroup"
-        class="message-meta__group-all-read"
+        :class="classes['message-meta__group-all-read']"
       >
         {{ readReceiptText }}
       </span>
@@ -108,14 +107,14 @@ const readReceiptText = computed(() => {
     <!-- Time display -->
     <span
       v-if="displayTime"
-      class="message-meta__time"
+      :class="classes['message-meta__time']"
     >
       {{ displayTime }}
     </span>
   </View>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .message-meta {
   gap: 4px;
   font-size: 12px;

package/src/components/MessageList/MessageForward/MessageForward.vue

@@ -125,7 +125,7 @@ function closeMessageForward() {
 
     <View class="forward-footer">
       <TUIButton
-        shape="rect"
+        radius="rect"
         color="blue"
         type="primary"
         :disabled="isDisableConfirm"
@@ -202,7 +202,7 @@ $animationDuration: 200ms;
   }
 
   &__placeholder {
-    width: $icon-size; // 与关闭按钮同宽，保持视觉平衡
+    width: $icon-size;
     height: $icon-size;
   }
 }

package/src/components/MessageList/MessageList.vue

@@ -20,17 +20,18 @@ import { Message as DefaultMessage } from './Message';
 import { MessageForward } from './MessageForward';
 import { MessageListContextSymbol } from './MessageListContext';
 import { MessageTimeDivider as DefaultMessageTimeDivider } from './MessageTimeDivider';
+import { ScrollToBottom } from './ScrollToBottom';
 import type { MessageAction } from '../../hooks/useMessageActions';
 import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
 // Define message chunk interface
-interface IMessageChunk {
+interface MessageChunk {
   timestamp: number;
   messages: MessageModel[];
   key: string;
 }
 
-interface IMessageListProps {
+interface MessageListProps {
   alignment?: 'left' | 'right' | 'two-sided';
   /** max time between message group */
   messageAggregationTime?: number | undefined;
@@ -46,7 +47,7 @@ interface IMessageListProps {
   MessageTimeDivider?: Component | undefined;
 }
 
-const props = withDefaults(defineProps<IMessageListProps>(), {
+const props = withDefaults(defineProps<MessageListProps>(), {
   /** props */
   alignment: 'two-sided',
   messageAggregationTime: 5 * 60,
@@ -66,6 +67,7 @@ const isFinishFirstRender = ref<boolean>(false);
 const distanceToBottom = ref<number>(0);
 const isLoadingHistory = ref<boolean>(false);
 const scrollContainer = ref<HTMLElement | null>(null);
+const isScrollToBottomVisible = ref<boolean>(false);
 
 const storeDistanceToBottom = ref<number>(0);
 
@@ -102,7 +104,7 @@ const messageChunks = computed(() => {
   }
 
   // Perform message aggregation
-  const chunks: IMessageChunk[] = [];
+  const chunks: MessageChunk[] = [];
   const MAX_TIME_BETWEEN_MESSAGE_GROUP = props.messageAggregationTime;
 
   filteredMessageList.forEach((message, index, messages) => {
@@ -142,11 +144,13 @@ const handleScroll = throttle(() => {
 
   if (distanceToBottom.value > autoScrollThreshold) {
     setIsDisableScroll(true);
+    isScrollToBottomVisible.value = true;
   }
 
   // Reset user scroll state if scrolled near bottom
   if (distanceToBottom.value < autoScrollThreshold) {
     setIsDisableScroll(false);
+    isScrollToBottomVisible.value = false;
   }
 }, 100);
 
@@ -154,6 +158,7 @@ const handleScroll = throttle(() => {
 const initializeMessageList = async () => {
   isFinishFirstRender.value = false;
   setIsDisableScroll(false);
+  isScrollToBottomVisible.value = false;
 };
 
 // Load more history messages
@@ -307,8 +312,13 @@ onUnmounted(() => {
         </div>
       </View>
     </div>
+    <MessageForward />
+    <ScrollToBottom
+      v-if="isScrollToBottomVisible"
+      :class="cs('scroll-to-bottom')"
+      @click="scrollToBottom({ behavior: 'smooth' })"
+    />
   </div>
-  <MessageForward />
 </template>
 
 <style lang="scss" scoped>
@@ -379,4 +389,10 @@ onUnmounted(() => {
     background-color: var(--primary-color-hover, #0057cc);
   }
 }
+
+.scroll-to-bottom {
+  position: absolute;
+  bottom: 105px;
+  right: 8px;
+}
 </style>

package/src/components/MessageList/ScrollToBottom/ScrollToBottom.vue

@@ -0,0 +1,50 @@
+<template>
+  <button
+    :class="$style['scroll-to-bottom__button']"
+    @click="emits('click')"
+  >
+    <IconArrowStrokeSelectDown
+      :customClass="$style['scroll-to-bottom__button--icon']"
+      :size="18"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { IconArrowStrokeSelectDown } from '@tencentcloud/uikit-base-component-vue3';
+
+const emits = defineEmits(['click']);
+</script>
+
+<style lang="scss" module>
+.scroll-to-bottom__button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+
+  box-shadow:
+    0 12px 26px 0 var(--shadow-color),
+    0 8px 12px 0 var(--shadow-color);
+  background: var(--dropdown-color-default);
+
+  &:hover {
+    background: var(--dropdown-color-hover);
+  }
+
+  &:active {
+    background: get(dropdown-color-active);
+    box-shadow: none;
+  }
+
+  &--icon {
+    color: var(--text-color-link);
+  }
+}
+</style>

package/src/components/MessageList/ScrollToBottom/index.ts

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

package/src/components/MessageList/i18n/en-US.ts

@@ -29,6 +29,10 @@ const MessageList = {
   reedit: 'Re-edit',
   origin_message_has_been_recalled: 'Original message has been recalled',
   forward: 'Forward',
+  copy: 'Copy',
+  recall: 'Recall',
+  quote: 'Quote',
+  delete: 'Delete',
   max_count_exceed: 'Max Count Exceed',
   read_receipt_detail: 'Read Receipt Detail',
   read_count: 'Read Count',
@@ -37,6 +41,7 @@ const MessageList = {
   no_read_members: 'No Read Members',
   no_more: 'No More',
   no_unread_members: 'No Unread Members',
+  yesterday: 'Yesterday',
 };
 
 export default MessageList;

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

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

package/src/components/MessageList/i18n/zh-CN.ts

@@ -28,6 +28,10 @@ const MessageList = {
   reedit: '重新编辑',
   origin_message_has_been_recalled: '原消息已被撤回',
   forward: '转发',
+  copy: '复制',
+  recall: '撤回',
+  quote: '引用',
+  delete: '删除',
   max_count_exceed: '超过最大数量限制',
   read_receipt_detail: '已读详情',
   read_count: '已读人数',
@@ -36,6 +40,7 @@ const MessageList = {
   no_read_members: '暂无已读成员',
   no_more: '已加载全部',
   no_unread_members: '暂无未读成员',
+  yesterday: '昨天',
 };
 
 export default MessageList;

package/src/components/MessageList/index.ts

@@ -1,8 +1,11 @@
 import { Message } from './Message';
 import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
 import MessageList from './MessageList.vue';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
 
-import './i18n';
+addI18n('en-US', { translation: { MessageList: resources['en-US'] } });
+addI18n('zh-CN', { translation: { MessageList: resources['zh-CN'] } });
 
 export {
   Message,

package/src/components/Search/Search.vue

@@ -84,10 +84,8 @@ const {
 
 const searchValue = ref(keyword.value);
 
-// 用于区分内部更新和外部更新
 const isExternalUpdate = ref(false);
 
-// 防抖搜索函数
 const debouncedSearch = debounce(async (searchKeyword: string) => {
   try {
     isExternalUpdate.value = true;
@@ -97,7 +95,6 @@ const debouncedSearch = debounce(async (searchKeyword: string) => {
   }
 }, props.debounceTime);
 
-// 监听 searchValue 变化
 watch(
   searchValue,
   (newValue) => {
@@ -108,7 +105,6 @@ watch(
   { immediate: false },
 );
 
-// 监听 keyword 变化
 watch(keyword, (newKeyword) => {
   if (isExternalUpdate.value) {
     isExternalUpdate.value = false;

package/src/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.vue

@@ -1,27 +1,54 @@
 <!-- eslint-disable import/extensions -->
 <template>
-  <!-- H5 版本 -->
-  <div v-if="isH5" :class="$style['SearchDateRangePicker__h5-mask']" @click="handleH5Cancel">
-    <div :class="$style['SearchDateRangePicker__h5-panel']" @click.stop>
-      <div :class="$style['SearchDateRangePicker__h5-header']">{{ t('DateRangePicker.Time') }}</div>
+  <div
+    v-if="isH5"
+    :class="$style['SearchDateRangePicker__h5-mask']"
+    @click="handleH5Cancel"
+  >
+    <div
+      :class="$style['SearchDateRangePicker__h5-panel']"
+      @click.stop
+    >
+      <div :class="$style['SearchDateRangePicker__h5-header']">
+        {{ t('DateRangePicker.Time') }}
+      </div>
       <div :class="$style.SearchDateRangePicker__calendar">
         <div :class="$style['SearchDateRangePicker__calendar-header']">
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, false)"
+          >
             &lt;&lt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, false)"
+          >
             &lt;
           </button>
-          <span :class="$style['SearchDateRangePicker__current-month-year']" @click="handlePickerToggle(true)">
+          <span
+            :class="$style['SearchDateRangePicker__current-month-year']"
+            @click="handlePickerToggle(true)"
+          >
             {{ leftDate.getFullYear() }} {{ MONTH_NAMES[leftDate.getMonth()] }}
           </span>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, true)"
+          >
             &gt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, true)"
+          >
             &gt;&gt;
           </button>
-          <div v-if="isPickerOpenLeft" :class="$style['SearchDateRangePicker__picker-dropdown']" ref="pickerRefLeft">
+          <div
+            v-if="isPickerOpenLeft"
+            ref="pickerRefLeft"
+            :class="$style['SearchDateRangePicker__picker-dropdown']"
+          >
             <div :class="$style['SearchDateRangePicker__picker-header']">
               <button
                 :class="$style['SearchDateRangePicker__picker-nav-button']"
@@ -50,7 +77,13 @@
           </div>
         </div>
         <div :class="$style['SearchDateRangePicker__week-days']">
-          <div v-for="day in WEEK_DAYS" :key="day" :class="$style['SearchDateRangePicker__week-day']">{{ day }}</div>
+          <div
+            v-for="day in WEEK_DAYS"
+            :key="day"
+            :class="$style['SearchDateRangePicker__week-day']"
+          >
+            {{ day }}
+          </div>
         </div>
         <div :class="$style.SearchDateRangePicker__days">
           <div
@@ -75,28 +108,48 @@
     </div>
   </div>
 
-  <!-- PC 版本 -->
-  <div v-else :class="[$style.SearchDateRangePicker, className]">
+  <div
+    v-else
+    :class="[$style.SearchDateRangePicker, className]"
+  >
     <div :class="$style.SearchDateRangePicker__calendars">
-      <!-- 左侧日历 -->
       <div :class="$style.SearchDateRangePicker__calendar">
         <div :class="$style['SearchDateRangePicker__calendar-header']">
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, false)"
+          >
             &lt;&lt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, false)"
+          >
             &lt;
           </button>
-          <span :class="$style['SearchDateRangePicker__current-month-year']" @click="handlePickerToggle(true)">
+          <span
+            :class="$style['SearchDateRangePicker__current-month-year']"
+            @click="handlePickerToggle(true)"
+          >
             {{ leftDate.getFullYear() }} {{ MONTH_NAMES[leftDate.getMonth()] }}
           </span>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(true, true)"
+          >
             &gt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(true, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(true, true)"
+          >
             &gt;&gt;
           </button>
-          <div v-if="isPickerOpenLeft" :class="$style['SearchDateRangePicker__picker-dropdown']" ref="pickerRefLeft">
+          <div
+            v-if="isPickerOpenLeft"
+            ref="pickerRefLeft"
+            :class="$style['SearchDateRangePicker__picker-dropdown']"
+          >
             <div :class="$style['SearchDateRangePicker__picker-header']">
               <button
                 :class="$style['SearchDateRangePicker__picker-nav-button']"
@@ -125,7 +178,13 @@
           </div>
         </div>
         <div :class="$style['SearchDateRangePicker__week-days']">
-          <div v-for="day in WEEK_DAYS" :key="day" :class="$style['SearchDateRangePicker__week-day']">{{ day }}</div>
+          <div
+            v-for="day in WEEK_DAYS"
+            :key="day"
+            :class="$style['SearchDateRangePicker__week-day']"
+          >
+            {{ day }}
+          </div>
         </div>
         <div :class="$style.SearchDateRangePicker__days">
           <div
@@ -148,25 +207,43 @@
         </div>
       </div>
 
-      <!-- 右侧日历 -->
       <div :class="$style.SearchDateRangePicker__calendar">
         <div :class="$style['SearchDateRangePicker__calendar-header']">
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(false, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(false, false)"
+          >
             &lt;&lt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(false, false)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(false, false)"
+          >
             &lt;
           </button>
-          <span :class="$style['SearchDateRangePicker__current-month-year']" @click="handlePickerToggle(false)">
+          <span
+            :class="$style['SearchDateRangePicker__current-month-year']"
+            @click="handlePickerToggle(false)"
+          >
             {{ rightDate.getFullYear() }} {{ MONTH_NAMES[rightDate.getMonth()] }}
           </span>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleMonthChange(false, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleMonthChange(false, true)"
+          >
             &gt;
           </button>
-          <button :class="$style['SearchDateRangePicker__nav-button']" @click="handleYearChange(false, true)">
+          <button
+            :class="$style['SearchDateRangePicker__nav-button']"
+            @click="handleYearChange(false, true)"
+          >
             &gt;&gt;
           </button>
-          <div v-if="isPickerOpenRight" :class="$style['SearchDateRangePicker__picker-dropdown']" ref="pickerRefRight">
+          <div
+            v-if="isPickerOpenRight"
+            ref="pickerRefRight"
+            :class="$style['SearchDateRangePicker__picker-dropdown']"
+          >
             <div :class="$style['SearchDateRangePicker__picker-header']">
               <button
                 :class="$style['SearchDateRangePicker__picker-nav-button']"
@@ -195,7 +272,13 @@
           </div>
         </div>
         <div :class="$style['SearchDateRangePicker__week-days']">
-          <div v-for="day in WEEK_DAYS" :key="day" :class="$style['SearchDateRangePicker__week-day']">{{ day }}</div>
+          <div
+            v-for="day in WEEK_DAYS"
+            :key="day"
+            :class="$style['SearchDateRangePicker__week-day']"
+          >
+            {{ day }}
+          </div>
         </div>
         <div :class="$style.SearchDateRangePicker__days">
           <div
@@ -223,8 +306,8 @@
 
 <script lang="ts" setup>
 import { ref, watch, onMounted, onUnmounted, defineProps } from 'vue';
-import { isH5 } from '../../../../utils';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { isH5 } from '../../../../utils';
 
 interface DateRangePickerProps {
   value?: [Date | null, Date | null];
@@ -242,7 +325,7 @@ const rightDate = ref(
     const date = new Date();
     date.setMonth(date.getMonth() + 1);
     return date;
-  })()
+  })(),
 );
 const internalDates = ref<[Date | null, Date | null]>([null, null]);
 const isPickerOpenLeft = ref(false);
@@ -290,16 +373,14 @@ const setEndOfDay = (date: Date): Date => {
   return newDate;
 };
 
-// 监听外部值变化
 watch(
   () => props.value,
-  newValue => {
+  (newValue) => {
     internalDates.value = newValue || [null, null];
   },
-  { immediate: true }
+  { immediate: true },
 );
 
-// 点击外部关闭选择器
 const handleClickOutside = (event: MouseEvent) => {
   if (pickerRefLeft.value && !pickerRefLeft.value.contains(event.target as Node)) {
     isPickerOpenLeft.value = false;
@@ -431,7 +512,9 @@ const handlePickerMonthSelect = (isLeft: boolean, month: number) => {
 
 const isDateSelected = (date: Date): boolean => {
   const [start, end] = internalDates.value;
-  if (!start || !end) return false;
+  if (!start || !end) {
+    return false;
+  }
   const dayTime = date.setHours(0, 0, 0, 0);
   const startTime = new Date(start).setHours(0, 0, 0, 0);
   const endTime = new Date(end).setHours(0, 0, 0, 0);
@@ -440,7 +523,9 @@ const isDateSelected = (date: Date): boolean => {
 
 const isStartDate = (date: Date): boolean => {
   const [start] = internalDates.value;
-  if (!start) return false;
+  if (!start) {
+    return false;
+  }
   const dayTime = date.setHours(0, 0, 0, 0);
   const startTime = new Date(start).setHours(0, 0, 0, 0);
   return startTime === dayTime;
@@ -448,7 +533,9 @@ const isStartDate = (date: Date): boolean => {
 
 const isEndDate = (date: Date): boolean => {
   const [, end] = internalDates.value;
-  if (!end) return false;
+  if (!end) {
+    return false;
+  }
   const dayTime = date.setHours(0, 0, 0, 0);
   const endTime = new Date(end).setHours(0, 0, 0, 0);
   return endTime === dayTime;