tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/CoHostPanel/BattlePanel.vue

@@ -69,7 +69,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-import { TUIConnectionCode, TUILiveBattleManagerEvents } from '@tencentcloud/tuiroom-engine-js';
+import { TUIConnectionCode } from '@tencentcloud/tuiroom-engine-js';
 import { TUIButton, TUIToast, useUIKit, TOAST_TYPE, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
 import { useBattleState } from '../../states/BattleState';
 import { useCoHostState } from '../../states/CoHostState';
@@ -78,7 +78,6 @@ import { CoHostLayoutTemplate, CoHostEvent } from '../../types';
 import UserList from './UserList.vue';
 import RecommendHostList from './RecommendHostList.vue';
 import type { SeatUserInfo } from '../../types';
-import type { TUIBattleUser } from '@tencentcloud/tuiroom-engine-js';
 
 const { t } = useUIKit();
 const props = defineProps<{
@@ -98,8 +97,6 @@ const {
   battleUsers,
   requestBattle,
   exitBattle,
-  subscribeEvent: subscribeBattleEvent,
-  unsubscribeEvent: unsubscribeBattleEvent,
 } = useBattleState();
 
 const showExitCoHostDialog = ref(false);
@@ -120,7 +117,7 @@ const handleSendBattleRequest = async (user: SeatUserInfo) => {
     switch (result.get(user.liveId)) {
       case TUIConnectionCode.TUIConnectionCodeSuccess:
         pkUserIds.add(user.userId);
-        TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Battle invitation sent to user', { userName: user.userName }) });
+        TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Battle invitation sent to user', { userName: user.userName || user.userId }) });
         break;
       case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
         TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed, Room not exist') });
@@ -191,13 +188,13 @@ const handleCoHostRequestRejected = ({ invitee }: { invitee: SeatUserInfo }) =>
     return;
   }
   pkUserIds.delete(invitee.userId);
-  TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: invitee.userName }) });
+  TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: invitee.userName || invitee.userId }) });
 };
 
 const handleCoHostRequestTimeout = ({ inviter, invitee }: { inviter: SeatUserInfo; invitee: SeatUserInfo }) => {
   if (inviter.userId === loginUserInfo.value?.userId && pkUserIds.has(invitee.userId)) {
     pkUserIds.delete(invitee.userId);
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request timeout for user', { userName: invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request timeout for user', { userName: invitee.userName || invitee.userId}) });
   }
 };
 

package/src/components/CoHostPanel/CoHostPanel.vue

@@ -57,6 +57,7 @@ import { computed, ref, watch } from 'vue';
 import { useUIKit, TUIDialog, IconClose, IconLiveSetting } from '@tencentcloud/uikit-base-component-vue3';
 import { useBattleState } from '../../states/BattleState';
 import { useCoHostState } from '../../states/CoHostState';
+import { useLoginState } from '../../states/LoginState';
 import { CoHostStatus, CoHostLayoutTemplate } from '../../types';
 import BattlePanel from './BattlePanel.vue';
 import ConfigSettingPanel from './ConfigSettingPanel.vue';
@@ -66,8 +67,9 @@ const { t } = useUIKit();
 const props = defineProps<{
   visible: boolean;
 }>();
+const { loginUserInfo } = useLoginState();
 const { coHostStatus } = useCoHostState();
-const { currentBattleInfo } = useBattleState();
+const { battleUsers } = useBattleState();
 const emit = defineEmits(['update:visible']);
 const close = () => {
   emit('update:visible', false);
@@ -75,7 +77,7 @@ const close = () => {
 const activeTab = ref('battleTab');
 const settingVisible = ref(false);
 const inConnection = computed(() => coHostStatus.value === CoHostStatus.Connected);
-const inPk = computed(() => currentBattleInfo.value?.battleId !== undefined);
+const inPk = computed(() => battleUsers.value.some(user => user.userId === loginUserInfo.value?.userId));
 
 const title = computed(() => {
   if (inPk.value) {
@@ -99,7 +101,13 @@ const handleSettingConfirm = (form: {
 }) => {
   configForm.value = form;
 };
-
+watch(inConnection, (newVal) => {
+  if (newVal && !inPk.value) {
+    activeTab.value = 'coHostTab';
+  }
+}, {
+  immediate: true,
+});
 watch(inPk, (newVal, oldVal) => {
   if (newVal) {
     emit('update:visible', false);

package/src/components/CoHostPanel/ConfigSettingPanel.vue

@@ -107,7 +107,8 @@ const confirm = () => {
 
 const handleDurationChange = (event: any) => {
   templateForm.value.battleDuration = Number(event.target.value);
-}
+};
+
 watch(() => props.visible, (newVal) => {
   dialogVisible.value = newVal;
 });
@@ -122,12 +123,6 @@ const layoutOptions = computed(() => [
     templateId: CoHostLayoutTemplate.HostDynamicGrid,
     label: t('Dynamic Grid9 Layout'),
   },
-  {
-    id: 'PortraitFixed_1v6',
-    icon: IconDynamic1v6Layout,
-    templateId: CoHostLayoutTemplate.HostDynamic1v6,
-    label: t('Dynamic 1v6 Layout'),
-  },
 ]);
 </script>
 
@@ -211,7 +206,6 @@ const layoutOptions = computed(() => [
   }
 }
 
-
 .layout-template-options {
   display: flex;
   flex-direction: row;

package/src/components/CoHostPanel/ConnectionPanel.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="AtomicxCoHostPanel" class="connection-panel">
-    <!-- 当前麦位 -->
     <div
       v-if="coHostStatus === CoHostStatus.Connected"
       id="userListContainer"
@@ -42,7 +41,6 @@
       </div>
     </div>
 
-    <!-- 推荐主播 -->
     <RecommendHostList class="recommend-host-list">
       <template #host-item-actions="{ user }">
         <TUIButton
@@ -107,15 +105,16 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { TUIBattleInfo, TUIBattleStoppedReason, TUIBattleUser, TUIConnectionCode, TUILiveBattleManagerEvents } from '@tencentcloud/tuiroom-engine-js';
+import { TUIBattleInfo, TUIConnectionCode } from '@tencentcloud/tuiroom-engine-js';
 import { TUIButton, TUIToast, useUIKit, TOAST_TYPE, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
 import { useBattleState } from '../../states/BattleState';
 import { useCoHostState } from '../../states/CoHostState';
 import { useLoginState } from '../../states/LoginState';
-import { CoHostLayoutTemplate, CoHostStatus, CoHostEvent } from '../../types';
+import { CoHostLayoutTemplate, CoHostStatus, CoHostEvent, BattleEvent } from '../../types';
 import { Avatar } from '../Avatar';
 import RecommendHostList from './RecommendHostList.vue';
 import type { SeatUserInfo } from '../../types';
+import { ERROR_MESSAGE } from './constants';
 
 const props = defineProps<{
   battleDuration: number;
@@ -136,7 +135,7 @@ const {
 } = useCoHostState();
 const {
   currentBattleInfo,
-  battleUsers, 
+  battleUsers,
   requestBattle,
   cancelBattleRequest,
   subscribeEvent: subscribeBattleEvent,
@@ -173,7 +172,7 @@ const handleSendCoHostRequest = async (user: SeatUserInfo) => {
     });
     if (result.get(user.liveId) === TUIConnectionCode.TUIConnectionCodeSuccess) {
       sentCoHostRequestUserList.value.add(user.userId);
-      TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Co-host invitation sent to user', { userName: user.userName }) });
+      TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Co-host invitation sent to user', { userName: user.userName || user.userId }) });
     } else {
       switch (result.get(user.liveId)) {
         case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
@@ -219,21 +218,27 @@ const handleExitCoHost = () => {
 
 const handleBattleRequest = async () => {
   const userIdList = connected.value.filter(item => item.userId !== loginUserInfo.value?.userId).map(item => item.userId);
-  const battleRes = await requestBattle({
-    config: {
-      duration: props.battleDuration,
-      needResponse: true,
-    },
-    userIdList,
-    timeout: 10,
-  });
-  requestBattleId.value = battleRes.battleId;
-  userIdList.forEach(userId => battleRequestList.value.add(userId))
+  try {
+    const battleRes = await requestBattle({
+      config: {
+        duration: props.battleDuration,
+        needResponse: true,
+        extensionInfo: '',
+      },
+      userIdList,
+      timeout: 10,
+    });
+    requestBattleId.value = battleRes.battleId;
+    userIdList.forEach(userId => battleRequestList.value.add(userId))
+  } catch (error: any) {
+    const message = t(ERROR_MESSAGE[error.code as keyof typeof ERROR_MESSAGE] || 'Request battle failed');
+    TUIToast.error({ message });
+  }
 };
 
 const handleCancelBattleRequest = async () => {
-  await cancelBattleRequest({ 
-    battleId: requestBattleId.value, 
+  await cancelBattleRequest({
+    battleId: requestBattleId.value,
     userIdList: Array.from(battleRequestList.value)
   });
   requestBattleId.value = '';
@@ -248,43 +253,43 @@ const handleCoHostRequestAccepted = ({ invitee }: { invitee: SeatUserInfo }) =>
 
 const handleCoHostRequestRejected = ({ invitee }: { invitee: SeatUserInfo }) => {
   if (sentCoHostRequestUserList.value.has(invitee.userId)) {
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request rejected by user', { userName: invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request rejected by user', { userName: invitee.userName || invitee.userId }) });
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
 };
 
 const handleCoHostRequestTimeout = ({ inviter, invitee }: { inviter: SeatUserInfo; invitee: SeatUserInfo }) => {
   if (inviter.userId === loginUserInfo.value?.userId && sentCoHostRequestUserList.value.has(invitee.userId)) {
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request timeout for user', { userName: invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request timeout for user', { userName: invitee.userName || invitee.userId }) });
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
 };
 
-const onBattleRequestAccept = (eventInfo: { battleInfo: TUIBattleInfo, inviter: TUIBattleUser, invitee: TUIBattleUser }) => {
+const onBattleRequestAccept = (eventInfo: { battleId: string, inviter: SeatUserInfo, invitee: SeatUserInfo }) => {
   if (eventInfo.inviter.userId === loginUserInfo.value?.userId) {
     battleRequestList.value.delete(eventInfo.invitee.userId);
   }
 };
 
-const onBattleRequestRejected = (eventInfo: { battleInfo: TUIBattleInfo, inviter: TUIBattleUser, invitee: TUIBattleUser }) => {
+const onBattleRequestRejected = (eventInfo: { battleId: string, inviter: SeatUserInfo, invitee: SeatUserInfo }) => {
   if (eventInfo.inviter.userId === loginUserInfo.value?.userId) {
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: eventInfo.invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: eventInfo.invitee.userName || eventInfo.invitee.userId }) });
     battleRequestList.value.delete(eventInfo.invitee.userId);
   }
 };
 
-const onBattleRequestTimeout = (eventInfo: { battleInfo: TUIBattleInfo, inviter: TUIBattleUser, invitee: TUIBattleUser }) => {
+const onBattleRequestTimeout = (eventInfo: { battleId: string, inviter: SeatUserInfo, invitee: SeatUserInfo }) => {
   if (eventInfo.inviter.userId === loginUserInfo.value?.userId) {
     battleRequestList.value.delete(eventInfo.invitee.userId);
   }
 };
 
-const onBattleStarted = (eventInfo: { battleInfo: TUIBattleInfo, }) => {
+const onBattleStarted = () => {
   requestBattleId.value = '';
   battleRequestList.value.clear();
 }
 
-const onBattleEnded = (eventInfo: { battleInfo: TUIBattleInfo, reason: TUIBattleStoppedReason }) => {
+const onBattleEnded = () => {
   requestBattleId.value = '';
   battleRequestList.value.clear();
 }
@@ -294,11 +299,11 @@ onMounted(() => {
   subscribeEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
   subscribeEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
 
-  subscribeBattleEvent(TUILiveBattleManagerEvents.onBattleRequestAccept, onBattleRequestAccept);
-  subscribeBattleEvent(TUILiveBattleManagerEvents.onBattleRequestReject, onBattleRequestRejected);
-  subscribeBattleEvent(TUILiveBattleManagerEvents.onBattleRequestTimeout, onBattleRequestTimeout);
-  subscribeBattleEvent(TUILiveBattleManagerEvents.onBattleStarted, onBattleStarted);
-  subscribeBattleEvent(TUILiveBattleManagerEvents.onBattleEnded, onBattleEnded);
+  subscribeBattleEvent(BattleEvent.onBattleRequestAccept, onBattleRequestAccept);
+  subscribeBattleEvent(BattleEvent.onBattleRequestReject, onBattleRequestRejected);
+  subscribeBattleEvent(BattleEvent.onBattleRequestTimeout, onBattleRequestTimeout);
+  subscribeBattleEvent(BattleEvent.onBattleStarted, onBattleStarted);
+  subscribeBattleEvent(BattleEvent.onBattleEnded, onBattleEnded);
 });
 
 onUnmounted(() => {
@@ -306,11 +311,11 @@ onUnmounted(() => {
   unsubscribeEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
   unsubscribeEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
 
-  unsubscribeBattleEvent(TUILiveBattleManagerEvents.onBattleRequestAccept, onBattleRequestAccept);
-  unsubscribeBattleEvent(TUILiveBattleManagerEvents.onBattleRequestReject, onBattleRequestRejected);
-  unsubscribeBattleEvent(TUILiveBattleManagerEvents.onBattleRequestTimeout, onBattleRequestTimeout);
-  unsubscribeBattleEvent(TUILiveBattleManagerEvents.onBattleStarted, onBattleStarted);
-  unsubscribeBattleEvent(TUILiveBattleManagerEvents.onBattleEnded, onBattleEnded);
+  unsubscribeBattleEvent(BattleEvent.onBattleRequestAccept, onBattleRequestAccept);
+  unsubscribeBattleEvent(BattleEvent.onBattleRequestReject, onBattleRequestRejected);
+  unsubscribeBattleEvent(BattleEvent.onBattleRequestTimeout, onBattleRequestTimeout);
+  unsubscribeBattleEvent(BattleEvent.onBattleStarted, onBattleStarted);
+  unsubscribeBattleEvent(BattleEvent.onBattleEnded, onBattleEnded);
 });
 </script>
 
@@ -466,7 +471,6 @@ onUnmounted(() => {
   padding: 20px 0 0 0;
 }
 
-// 布局模板选择样式
 .layout-template-container {
   padding: 16px;
   margin-bottom: 16px;

package/src/components/CoHostPanel/RecommendHostList.vue

@@ -4,7 +4,7 @@
         <span class="recommend-host-list-title-text">{{ coHostStatus === CoHostStatus.Connected ? t('Invite more') : t('Recommend hosts') }}</span>
         <IconRefresh :class="['refresh-icon', refreshInviteesLoading ? 'loading' : '']" @click="handleRefreshInvitees"></IconRefresh>
       </div>
-      <div class="recommend-host-list-content">
+      <div class="recommend-host-list-content" ref="recommendHostListContentRef">
         <div class="recommend-host-list">
           <div
             v-for="user in [...invitees, ...candidates]"
@@ -33,7 +33,7 @@
             <div class="loading-spinner"></div>
             <span>{{ t('Loading more users...') }}</span>
           </div>
-          <div v-else-if="!hasMoreUsers && candidates.length > 0" class="no-more-content">
+          <div v-else-if="!hasMoreLive && candidates.length > 0" class="no-more-content">
             <span>{{ t('No more users') }}</span>
           </div>
           <div v-else class="load-more-trigger-content">
@@ -53,24 +53,28 @@
 <script setup lang="ts">
 import { IconRefresh, useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
 import { TUIErrorCode } from '@tencentcloud/tuiroom-engine-js';
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useCoHostState } from '../../states/CoHostState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { Avatar } from '../Avatar';
 import { CoHostStatus } from '../../types';
 
 const { t } = useUIKit();
-const { currentCursor, liveList, fetchLiveList } = useLiveState();
+const { liveListCursor, fetchLiveList } = useLiveListState();
 const { coHostStatus, invitees, candidates } = useCoHostState();
 
+const recommendHostListContentRef = ref<HTMLElement | null>(null);
 const loadMoreRef = ref<HTMLElement | null>(null);
 let intersectionObserver: IntersectionObserver | null = null;
 
 const refreshInviteesLoading = ref(false);
 const loadMoreLoading = ref(false);
-const hasMoreUsers = ref(true);
+const hasMoreLive = computed(() => liveListCursor.value !== '');
 async function handleRefreshInvitees() {
   refreshInviteesLoading.value = true;
+  if (recommendHostListContentRef.value) {
+    recommendHostListContentRef.value.scrollTop = 0;
+  }
   Promise.all([
     new Promise((resolve) => setTimeout(resolve, 500)),
     fetchLiveList({
@@ -94,18 +98,13 @@ onMounted(() => {
   if (loadMoreRef.value) {
     intersectionObserver = new IntersectionObserver(async (changes) => {
       let item = changes[0];
-      if (item.isIntersecting && !loadMoreLoading.value && hasMoreUsers.value) {
+      if (item.isIntersecting && !loadMoreLoading.value && hasMoreLive.value) {
         loadMoreLoading.value = true;
         try {
-          const previousLength = liveList.value.length;
           await fetchLiveList({
-            cursor: currentCursor.value === '' ? liveList.value.length + '' : currentCursor.value,
+            cursor: liveListCursor.value,
             count: 20,
           });
-          const newLength = liveList.value.length;
-          if (newLength - previousLength < 20) {
-            hasMoreUsers.value = false;
-          }
         } catch (error) {
           console.error('Load more users failed:', error);
         } finally {

package/src/components/CoHostPanel/constants.ts

@@ -0,0 +1,3 @@
+export const ERROR_MESSAGE = {
+  100412: 'there is no one valid room for battle',
+};

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

@@ -75,4 +75,5 @@ export const resource = {
   'Battle duration': 'Battle duration',
   'Number minutes': '{{number}} minutes',
   'Connection Layout': 'Connection Layout',
+  'there is no one valid room for battle': 'There is no one valid room for battle',
 };

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

@@ -54,7 +54,7 @@ export const resource = {
   'Refresh error, please try again later': '刷新失败，请稍后再试',
   'Are you sure you want to exit the battle': '确定要退出 PK 吗？',
   'Request battle failed': '发起 PK 失败',
-  'Battle ended': 'PK 已结束',
+  'Battle ended': 'PK 结束',
   'Battle started': 'PK 已开始',
   'User joined battle': '用户{{userName}}已加入 PK',
   'User exited battle': '用户{{userName}}已退出 PK',
@@ -76,4 +76,5 @@ export const resource = {
   'Battle duration': '发起 PK 时长',
   'Number minutes': '{{number}} 分钟',
   'Connection Layout': '连线布局',
+  'there is no one valid room for battle': '发起的 PK 中无有效的房间',
 };

package/src/components/ContactList/ContactInfo/BlacklistInfo/BlacklistInfo.vue

@@ -67,5 +67,5 @@ const handleRemoveFromBlacklist = async () => {
 </script>
 
 <style scoped lang="scss">
-@import './BlacklistInfo.scss';
+@use './BlacklistInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/ContactInfo.vue

@@ -260,5 +260,5 @@ const handleJoinGroup = (data: GroupModel, note: string) => emit('joinGroup', da
 </script>
 
 <style scoped lang="scss">
-@import './ContactInfo.scss';
+@use './ContactInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/FriendApplicationInfo/FriendApplicationInfo.vue

@@ -84,5 +84,5 @@ const handleRefuse = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendApplicationInfo.scss';
+@use './FriendApplicationInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/FriendInfo/FriendInfo.vue

@@ -215,5 +215,5 @@ const handleSendMessage = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendInfo.scss';
+@use './FriendInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/GroupApplicationInfo/GroupApplicationInfo.vue

@@ -95,5 +95,5 @@ const handleRefuse = () => {
 </script>
 
 <style scoped lang="scss">
-@import './GroupApplicationInfo.scss';
+@use './GroupApplicationInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/GroupInfo/GroupInfo.vue

@@ -143,5 +143,5 @@ const handleGroupAction = () => {
 }
 </script>
 <style scoped lang="scss">
-@import './GroupInfo.scss';
+@use './GroupInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/SearchGroupInfo/SearchGroupInfo.vue

@@ -143,5 +143,5 @@ const handleJoinGroup = async () => {
 </script>
 
 <style scoped lang="scss">
-@import './SearchGroupInfo.scss';
+@use './SearchGroupInfo.scss';
 </style>

package/src/components/ContactList/ContactInfo/SearchUserInfo/SearchUserInfo.vue

@@ -124,5 +124,5 @@ const handleAddFriend = async () => {
 </script>
 
 <style scoped lang="scss">
-@import './SearchUserInfo.scss';
+@use './SearchUserInfo.scss';
 </style>

package/src/components/ContactList/ContactList.vue

@@ -310,5 +310,5 @@ const emptyText = computed(() => props.emptyText || t('TUIContact.No contacts'))
 </script>
 
 <style scoped lang="scss">
-@import './ContactList.scss';
+@use './ContactList.scss';
 </style>

package/src/components/ContactList/ContactListItem/BlacklistItem/BlacklistItem.vue

@@ -43,5 +43,5 @@ const handleClick = () => {
 </script>
 
 <style scoped lang="scss">
-@import './BlacklistItem.scss';
+@use './BlacklistItem.scss';
 </style>

package/src/components/ContactList/ContactListItem/FriendApplicationItem/FriendApplicationItem.vue

@@ -66,5 +66,5 @@ const handleAccept = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendApplicationItem.scss';
+@use './FriendApplicationItem.scss';
 </style>

package/src/components/ContactList/ContactListItem/FriendItem/FriendItem.vue

@@ -43,5 +43,5 @@ const handleClick = () => {
 </script>
 
 <style scoped lang="scss">
-@import './FriendItem.scss';
+@use './FriendItem.scss';
 </style>

package/src/components/ContactList/ContactListItem/GroupApplicationItem/GroupApplicationItem.vue

@@ -74,5 +74,5 @@ const handleAction = (action: 'accept' | 'refuse', event: Event) => {
 </script>
 
 <style scoped lang="scss">
-@import './GroupApplicationItem.scss';
+@use './GroupApplicationItem.scss';
 </style>

package/src/components/ContactList/ContactListItem/GroupItem/GroupItem.vue

@@ -43,5 +43,5 @@ const handleClick = () => {
 </script>
 
 <style scoped lang="scss">
-@import './GroupItem.scss';
+@use './GroupItem.scss';
 </style>

package/src/components/ContactList/ContactSearch/ContactSearch.vue

@@ -94,5 +94,5 @@ const CustomSearchBar = (searchBarProps: SearchBarProps) => h('div', { class: 'c
 </script>
 
 <style scoped lang="scss">
-@import './ContactSearch.scss';
+@use './ContactSearch.scss';
 </style>

package/src/components/ConversationList/ConversationActions/ConversationActions.vue

@@ -25,11 +25,11 @@
     <TUIDropdown
       v-else
       trigger="click"
+      :teleported="false"
       placement="bottom-end"
     >
       <div
         :class="$style['conversationActions__popup-icon']"
-        @click="toggleClick"
       >
         <IconEllipsis size="18px" />
       </div>
@@ -81,7 +81,6 @@ const { t } = useUIKit();
 const { markConversationUnread } = useConversationListState();
 
 const markUnreadStatus = ref(true);
-const anchor = ref<HTMLElement | null>(null);
 const conversationActions = ref<Record<string, ConversationActionItem>>({});
 
 const enabledActions = computed(() => Object.entries(conversationActions.value)
@@ -151,12 +150,7 @@ watch(
   { immediate: true, deep: true },
 );
 
-const toggleClick = (e: Event) => {
-  anchor.value = anchor.value ? null : (e.currentTarget as HTMLElement);
-};
-
 const onClickMenuItem = (e: Event, key: string) => {
-  toggleClick(e);
   emit('click', e, key, props.conversation);
 
   const action = conversationActions.value[key];
@@ -178,5 +172,5 @@ const handleMaskClick = (e: Event) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationActions.scss';
+@use './ConversationActions.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreate.vue

@@ -195,7 +195,7 @@ const handleCreateGroupConversation = async () => {
 
 const generateGroupName = (userList: Friend[]) => {
   const selfName = loginUserInfo.value?.userName || loginUserInfo.value?.userId || '';
-  const name = `${selfName}、` + userList.map(item => item?.remark || item?.nick || item?.userID).join('、');
+  const name = `${selfName}、${userList.map(item => item?.remark || item?.nick || item?.userID).join('、')}`;
   return name.length >= GROUP_NAME_LIMIT ? name.slice(0, GROUP_NAME_LIMIT) : name;
 };
 
@@ -231,5 +231,5 @@ const handleCancel = () => {
 </script>
 
 <style lang="scss" scoped>
-@import './ConversationCreate.scss';
+@use './ConversationCreate.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateButton/ConversationCreateButton.vue

@@ -83,5 +83,5 @@ const handleClick = (action: CreateConvTypes) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationCreateButton.scss';
+@use './ConversationCreateButton.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue

@@ -120,5 +120,5 @@ const groupInfoChange = (value: string, type: string) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationCreateGroupDetail.scss';
+@use './ConversationCreateGroupDetail.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue

@@ -61,5 +61,5 @@ const handleSelectListUpdate = (list: UserPickerResult) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationCreateUserSelectList.scss';
+@use './ConversationCreateUserSelectList.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationGroupTypeInfo/ConversationGroupTypeInfo.vue

@@ -57,5 +57,5 @@ const selectGroupType = (type: GroupType) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationGroupTypeInfo.scss';
+@use './ConversationGroupTypeInfo.scss';
 </style>

package/src/components/ConversationList/ConversationList.vue

@@ -44,7 +44,7 @@
         :Preview="Preview"
         :ConversationActions="ConversationActions"
         :actions-config="actionsConfig"
-        @select="handleSelectConversation"
+        @select-conversation="handleSelectConversation"
       />
     </component>
   </div>
@@ -185,5 +185,5 @@ const handleCreated = (conversation: ConversationModel) => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationList.scss';
+@use './ConversationList.scss';
 </style>

package/src/components/ConversationList/ConversationListContent/ConversationListContent.vue

@@ -46,5 +46,5 @@ const props = withDefaults(defineProps<ConversationListContentProps>(), {
 </script>
 
 <style lang="scss" module>
-@import './ConversationListContent.scss';
+@use './ConversationListContent.scss';
 </style>