tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { ConversationType } from '../../../../types/engine';
@@ -28,20 +29,20 @@ const { t } = useUIKit();
 
 const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
-const renderText = () => {
+const renderText = computed(() => {
   if (messageContent.businessID === 'group_create') {
     return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
   }
   if (isCallMessage(props.message) && props.message.conversationType === ConversationType.GROUP) {
-    return parseCallMessageText(props.message);
+    return parseCallMessageText(props.message, t);
   }
   return resolveGroupTipMessage(props.message).text;
-};
+});
 </script>
 
 <template>
   <div :class="cs('group-tip-message')">
-    {{ renderText() }}
+    {{ renderText }}
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { MessageLayout } from './MessageLayout';
 import type { MessageAction } from '../../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types/engine';
 
 interface MessageProps {
   message: MessageModel;

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

@@ -82,17 +82,17 @@ const MessageComponent = computed(() => MessageComponentsFactory[props.message.t
 
 const isMessageOwner = computed(() => props.message.flow === 'out');
 
-const {
-  layoutClasses,
-  wrapperClasses,
-  avatarClasses,
-  bubbleClasses,
-  metaClasses,
-} = useMessageLayoutClasses({
+const messageLayoutClasses = computed(() => useMessageLayoutClasses({
   isMessageOwner: isMessageOwner.value,
   alignment: props.alignment,
   isAggregated: props.isAggregated,
-});
+}));
+
+const layoutClasses = computed(() => messageLayoutClasses.value.layoutClasses);
+const wrapperClasses = computed(() => messageLayoutClasses.value.wrapperClasses);
+const avatarClasses = computed(() => messageLayoutClasses.value.avatarClasses);
+const bubbleClasses = computed(() => messageLayoutClasses.value.bubbleClasses);
+const metaClasses = computed(() => messageLayoutClasses.value.metaClasses);
 
 function handleReadReceiptOpen() {
   isReadReceiptInfoOpen.value = true;

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

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
-interface IVideoMessageProps {
-  message: IMessageModel;
+interface VideoMessageProps {
+  message: MessageModel;
   isLastInChunk?: boolean;
 }
 
-interface IVideoMessageContent {
+interface VideoMessageContent {
   showName: string;
   snapshotHeight: number;
   snapshotWidth: number;
@@ -17,33 +17,51 @@ interface IVideoMessageContent {
   url: string;
 }
 
-const props = withDefaults(defineProps<IVideoMessageProps>(), {
+const props = withDefaults(defineProps<VideoMessageProps>(), {
   isLastInChunk: false,
-  message: () => ({} as IMessageModel),
+  message: () => ({} as MessageModel),
 });
 
-const messageContent = props.message.getMessageContent() as IVideoMessageContent;
+// SDK uses 200×200 as placeholder before actual dimensions are available
+const isPlaceholderSize = (width: number, height: number): boolean => width === 200 && height === 200;
 
-const windowResize = ref(false);
-const loaded = ref(false);
-const naturalSize = ref<{ height: number; aspectRatio: number } | null>(
-  messageContent.snapshotWidth && messageContent.snapshotHeight
-    ? {
-      height: messageContent.snapshotHeight,
-      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
-    }
-    : null,
+const messageContent = computed(() =>
+  props.message.getMessageContent() as VideoMessageContent,
 );
 
-const isMessageOwner = computed(() => props.message.flow === 'out');
+const videoNaturalSize = ref<{ height: number; aspectRatio: number } | null>(null);
+const loaded = ref(false);
+
+// Priority: video metadata > snapshot > null (for placeholder data)
+const naturalSize = computed(() => {
+  if (videoNaturalSize.value) {
+    return videoNaturalSize.value;
+  }
+
+  const content = messageContent.value;
+
+  if (isPlaceholderSize(content.snapshotWidth, content.snapshotHeight)) {
+    return null;
+  }
+
+  if (content.snapshotWidth && content.snapshotHeight) {
+    return {
+      height: content.snapshotHeight,
+      aspectRatio: content.snapshotWidth / content.snapshotHeight,
+    };
+  }
+
+  return null;
+});
 
 const displaySize = computed(() => {
-  const MAX_HEIGHT = 400;
+  const MAX_HEIGHT = 300;
+  const PLACEHOLDER_HEIGHT = 200;
   const DEFAULT_RATIO = 3 / 4;
 
   if (!naturalSize.value) {
     return {
-      height: MAX_HEIGHT,
+      height: PLACEHOLDER_HEIGHT,
       aspectRatio: DEFAULT_RATIO,
     };
   }
@@ -56,41 +74,30 @@ const displaySize = computed(() => {
       height: 200,
     };
   }
+
   return {
     aspectRatio,
     height: MAX_HEIGHT,
   };
 });
 
-const onResize = () => {
-  windowResize.value = true;
-};
+const isMessageOwner = computed(() => props.message.flow === 'out');
 
 const onVideoLoad = (e: Event) => {
   const video = e.target as HTMLVideoElement;
-  naturalSize.value = {
+
+  videoNaturalSize.value = {
     aspectRatio: video.videoWidth / video.videoHeight,
     height: video.videoHeight,
   };
+
   loaded.value = true;
 };
 
-onMounted(() => {
-  window.addEventListener('resize', onResize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize);
-});
-
+// Reset state when message ID changes (e.g., URL switches from blob to real)
 watch(() => props.message.ID, () => {
   loaded.value = false;
-  naturalSize.value = messageContent.snapshotWidth && messageContent.snapshotHeight
-    ? {
-      height: messageContent.snapshotHeight,
-      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
-    }
-    : null;
+  videoNaturalSize.value = null;
 });
 </script>
 
@@ -102,7 +109,6 @@ watch(() => props.message.ID, () => {
       'video-message--loaded': loaded
     })"
     :style="{
-      minHeight: windowResize ? 'auto' : `${displaySize.height}px`,
       maxHeight: `${displaySize.height}px`,
       aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
       width: !loaded ? `${displaySize.height * displaySize.aspectRatio}px` : undefined
@@ -150,10 +156,7 @@ watch(() => props.message.ID, () => {
 
 .video-placeholder {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   background:
     linear-gradient(
       90deg,

package/src/components/MessageList/Message/VideoMessage/index.ts

@@ -1,3 +1,3 @@
 import VideoMessage from './VideoMessage.vue';
 
-export { VideoMessage };
+export { VideoMessage };

package/src/components/MessageList/MessageList.vue

@@ -243,6 +243,8 @@ watch(messageList, (newMessages, oldMessages) => {
       // TODO: new message notification
     }
   }
+}, {
+  immediate: true,
 });
 
 watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {

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

@@ -72,7 +72,73 @@ const CallMessage = {
   no_answer_timeout: 'Call not answered (timeout)',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[RedPacket]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 };

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

@@ -1,9 +1,9 @@
-import { MessageList as MessageListEn, CallMessage as CallMessageEn } from './en-US';
-import { MessageList as MessageListZh, CallMessage as CallMessageZh } from './zh-CN';
+import { MessageList as MessageListEn, CallMessage as CallMessageEn, Emoji as EmojiEn } from './en-US';
+import { MessageList as MessageListZh, CallMessage as CallMessageZh, Emoji as EmojiZh } from './zh-CN';
 
 const resources = {
-  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn },
-  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh },
+  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn, Emoji: EmojiEn},
+  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh, Emoji: EmojiZh },
 };
 
 export { resources };

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

@@ -71,7 +71,73 @@ const CallMessage = {
   no_answer_timeout: '超时无应答',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[无语]',
+  '[TUIEmoji_Amazed]': '[惊讶]',
+  '[TUIEmoji_Sorrow]': '[悲伤]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[亲亲]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐惧]',
+  '[TUIEmoji_BareTeeth]': '[龇牙]',
+  '[TUIEmoji_FlareUp]': '[发怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[机智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[闭嘴]',
+  '[TUIEmoji_Sigh]': '[叹气]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收声]',
+  '[TUIEmoji_Surprised]': '[惊喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪兽]',
+  '[TUIEmoji_Daemon]': '[恶魔]',
+  '[TUIEmoji_Rage]': '[恶魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[猪]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髅]',
+  '[TUIEmoji_Bombs]': '[炸弹]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[爱心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太阳]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[红包]',
+  '[TUIEmoji_Celebrate]': '[庆祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[发]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[赞]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 }

package/src/components/RoomParticipantList/ParticipantAction.vue

@@ -0,0 +1,196 @@
+<template>
+  <TUIButton
+    v-if="singleControl"
+    type="primary"
+    @click="singleControl?.handler"
+  >
+    {{ singleControl?.label }}
+  </TUIButton>
+  <div class="actions">
+    <!-- 更多操作 -->
+    <div
+      v-if="showMoreActions"
+      class="more-actions"
+      @click.stop
+    >
+      <TUIButton @click="toggleMoreMenu">
+        {{ t('ParticipantList.More') }}
+        <IconArrowUp
+          size="12"
+          :class="['more-arrow', showMenu ? 'up' : 'down']"
+        />
+      </TUIButton>
+
+      <!-- 下拉菜单 -->
+      <div v-show="showMenu" class="dropdown-menu">
+        <div
+          v-for="item in moreControlList"
+          :key="item.key"
+          class="menu-item"
+          :style="item?.style || {}"
+          @click="item.handler"
+        >
+          <TUIIcon
+            v-if="item?.icon"
+            :icon="item?.icon"
+            size="16"
+          />
+          <span class="operate-text">{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineOptions, onUnmounted } from 'vue';
+import { TUIButton, IconArrowUp, useUIKit, TUIIcon } from '@tencentcloud/uikit-base-component-vue3';
+import { useParticipantAction } from './useParticpantAction';
+import type { RoomParticipant } from '../../types/participant';
+
+defineOptions({
+  name: 'ParticipantAction',
+});
+
+interface Props {
+  participant: RoomParticipant;
+  isLocal: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useUIKit();
+
+const showMenu = ref(false);
+
+const toggleMoreMenu = () => {
+  showMenu.value = !showMenu.value;
+};
+
+const { controlList } = useParticipantAction({ targetParticipant: props.participant });
+const singleControl = computed(() => !props.isLocal ? controlList.value[0] : null);
+const moreControlList = computed(() => !props.isLocal ? controlList.value.slice(1) : controlList.value);
+const showMoreActions = computed(() => moreControlList.value.length >= 1);
+
+// 点击外部关闭菜单
+const handleClickOutside = () => {
+  if (showMenu.value) {
+    showMenu.value = false;
+  }
+};
+
+// 监听点击外部事件
+if (typeof window !== 'undefined') {
+  window.addEventListener('click', handleClickOutside);
+}
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('click', handleClickOutside);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #e0e0e0;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666666;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #f5f5f5;
+    border-color: #d0d0d0;
+  }
+
+  &.active {
+    background: #1890ff;
+    border-color: #1890ff;
+    color: white;
+  }
+}
+
+.more-actions {
+  position: relative;
+}
+
+.more-arrow {
+  margin-left: 2px;
+
+  &.down {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  max-width: 160px;
+  padding: 20px;
+  background-color: var(--dropdown-color-default);
+  border-radius: 8px;
+  box-shadow:
+    0 3px 8px var(--uikit-color-black-8),
+    0 6px 40px var(--uikit-color-black-8);
+  z-index: 1;
+  margin-top: 10px;
+
+  &::before {
+    position: absolute;
+    top: -20px;
+    right: 20px;
+    width: 0;
+    content: '';
+    border-top: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid var(--dropdown-color-default);
+    border-left: 10px solid transparent;
+  }
+
+  &::after {
+    position: absolute;
+    top: -20px;
+    right: 0;
+    width: 100%;
+    height: 20px;
+    content: '';
+    background-color: transparent;
+  }
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  color: var(--text-color-secondary);
+  cursor: pointer;
+  gap: 10px;
+
+  .operate-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    white-space: nowrap;
+  }
+
+  &:not(:first-child) {
+    margin-top: 20px;
+  }
+}
+</style>