tuikit-atomicx-vue3 0.1.1 → 3.3.0

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

@@ -8,7 +8,7 @@ import { View } from '../../../baseComp/View';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageActionState } from '../../../states/MessageActionState';
 import { UserPicker } from '../../UserPicker';
-import type { IUserPickerRef, IUserPickerRow } from '../../UserPicker/type';
+import type { UserPickerRef, UserPickerRow } from '../../UserPicker/type';
 import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 
 const { t } = useUIKit();
@@ -24,7 +24,7 @@ const {
 } = useConversationListState();
 
 // UserPicker ref
-const userPickerRef = ref<IUserPickerRef<undefined> | null>(null);
+const userPickerRef = ref<UserPickerRef<undefined> | null>(null);
 
 // Convert conversation list to UserPicker data format
 const forwardListDataSource = computed((): any[] => {
@@ -34,7 +34,7 @@ const forwardListDataSource = computed((): any[] => {
 
   return conversationList.value.map((conversation: IConversationModel) => {
     const { type, remark, groupProfile, userProfile } = conversation;
-    const userPickerRow: IUserPickerRow<undefined> = {
+    const userPickerRow: UserPickerRow<undefined> = {
       key: conversation.conversationID,
       label: '',
       avatarUrl: conversation.getAvatar() || '',
@@ -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);
 
@@ -75,6 +77,7 @@ const {
   activeConversationID,
   isDisableScroll,
   setIsDisableScroll,
+  setEnableReadReceipt,
 } = useMessageListState();
 
 const { scrollToBottom } = useScroll();
@@ -102,18 +105,23 @@ 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) => {
     const messageTime = message.time;
-    const lastChunk = chunks[chunks.length - 1];
+    const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const lastMessage = index > 0 ? messages[index - 1] : undefined;
 
     const shouldCreateNewChunk = !lastChunk
       || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
       || lastChunk.messages[0].from !== message.from
       || message.isRevoked
-      || (index > 0 && messages[index - 1].isRevoked);
+      || (lastMessage && lastMessage.isRevoked)
+      || message.status === 'fail'
+      || (lastMessage && lastMessage.status === 'fail')
+      || message.hasRiskContent
+      || (lastMessage && lastMessage.hasRiskContent);
 
     if (shouldCreateNewChunk) {
       chunks.push({
@@ -142,11 +150,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 +164,7 @@ const handleScroll = throttle(() => {
 const initializeMessageList = async () => {
   isFinishFirstRender.value = false;
   setIsDisableScroll(false);
+  isScrollToBottomVisible.value = false;
 };
 
 // Load more history messages
@@ -234,6 +245,12 @@ watch(messageList, (newMessages, oldMessages) => {
   }
 });
 
+watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {
+  setEnableReadReceipt(newEnableReadReceipt);
+}, {
+  immediate: true,
+});
+
 onMounted(() => {
   if (scrollContainer.value) {
     scrollContainer.value.addEventListener('scroll', handleScroll);
@@ -272,8 +289,8 @@ onUnmounted(() => {
         <!-- Time Divider -->
         <component
           :is="props.MessageTimeDivider || DefaultMessageTimeDivider"
-          :previous-message="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
-          :message="chunk.messages[0]"
+          :previousMessage="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
+          :currentMessage="chunk.messages[0]"
         />
 
         <!-- Message Chunk -->
@@ -307,8 +324,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 +401,10 @@ onUnmounted(() => {
     background-color: var(--primary-color-hover, #0057cc);
   }
 }
+
+.scroll-to-bottom {
+  position: absolute;
+  bottom: 95px;
+  right: 8px;
+}
 </style>

package/src/components/MessageList/MessageTimeDivider/MessageTimeDivider.vue

@@ -1,25 +1,25 @@
 <script lang="ts" setup>
 import { h, computed, Fragment } from 'vue';
 import { getTimeStampAuto } from '../../../utils/time';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types';
 
-interface IMessageTimeDividerProps {
-  previousMessage: IMessageModel | undefined;
-  message: IMessageModel;
+interface MessageTimeDividerProps {
+  previousMessage: MessageModel | undefined;
+  currentMessage: MessageModel;
 }
 
-const props = withDefaults(defineProps<IMessageTimeDividerProps>(), {
+const props = withDefaults(defineProps<MessageTimeDividerProps>(), {
   previousMessage: undefined,
-  message: () => ({}) as IMessageModel,
+  currentMessage: () => ({}) as MessageModel,
 });
 
 const shouldShowTimeDivider = computed(() => {
-  if (!props.message?.time) {
+  if (!props.currentMessage?.time) {
     return false;
   }
 
   const prevTime = props.previousMessage?.time || 0;
-  const currentTime = props.message.time;
+  const currentTime = props.currentMessage.time;
 
   return currentTime - prevTime > 5 * 60;
 });
@@ -29,7 +29,7 @@ const renderDefaultContent = () => {
     return h(Fragment, null, []);
   }
 
-  const currentTime = props.message.time;
+  const currentTime = props.currentMessage.time;
 
   return h('div', { class: 'message-time-divider' }, [
     h('span', {}, getTimeStampAuto(currentTime * 1000)),

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,11 +1,15 @@
-import { Message } from './Message';
-import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
-import MessageList from './MessageList.vue';
+import { Message as MessageComponent } from './Message';
+import MessageListComponent 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'] } });
+
+const Message = MessageComponent;
+const MessageList = MessageListComponent;
 
 export {
   Message,
   MessageList,
-  MessageActionDropdown,
 };

package/src/components/Search/Search.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .Search {
   display: flex;
   flex-direction: column;

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;