tuikit-atomicx-vue3 3.4.1 → 4.3.0

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/LiveAudienceList/LiveAudienceList.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
     <div
-      v-if="loginUserInfo && localLiveStatus === LiveStatus.Live && !isOwner"
+      v-if="loginUserInfo && currentLive?.liveId && !isOwner"
       class="viewer-item current-user-item"
     >
       <span class="rank">-</span>
@@ -75,12 +75,11 @@ import type { CSSProperties } from 'vue';
 import { computed, defineProps, ref, onMounted, onUnmounted } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
-import { LiveStatus } from '../../types';
+import { Avatar } from '../Avatar';
 import UserActionMenu from './UserActionMenu.vue';
 import type { AudienceInfo } from '../../types';
-import { Avatar } from '../Avatar';
 
 const { t } = useUIKit();
 const currentViewerTarget = ref<HTMLElement | null>(null);
@@ -92,7 +91,7 @@ const props = defineProps<{
 }>();
 const { loginUserInfo } = useLoginState();
 const { audienceList, audienceCount, fetchAudienceList } = useLiveAudienceState();
-const { localLiveStatus, currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const getRankClass = (rank: number) => {
   switch (rank) {

package/src/components/LiveAudienceList/LiveAudienceListH5.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { CSSProperties, computed, defineProps, ref } from 'vue';
 import { useLoginState } from '../../states/LoginState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
 import { type AudienceInfo } from '../../types';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
@@ -38,7 +38,7 @@ const props = defineProps<{
 }>();
 const { loginUserInfo } = useLoginState();
 const { audienceList, audienceCount } = useLiveAudienceState();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const showActionMenu = ref(false);
 const selectedViewer = ref<AudienceInfo | null>(null);

package/src/components/LiveAudienceList/UserActionMenu.vue

@@ -37,8 +37,9 @@ import { computed, defineProps, defineEmits, ref, onMounted, onUnmounted } from
 import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import { useCoGuestState } from '../../states/CoGuestState';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
+import { useLiveSeatState } from '../../states/LiveSeatState';
 import { Avatar } from '../Avatar';
 
 const { t } = useUIKit();
@@ -57,18 +58,9 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
-const { currentLive } = useLiveState();
-const {
-  userListInCoGuest,
-  receivedCoGuestUserList,
-  sentCoGuestUserList,
-  availableCoGuestUserList,
-  sendCoGuestRequest,
-  cancelCoGuestRequest,
-  acceptCoGuestRequest,
-  rejectCoGuestRequest,
-  disconnect,
-} = useCoGuestState();
+const { currentLive } = useLiveListState();
+const { connected } = useCoGuestState();
+const { kickUserOutOfSeat } = useLiveSeatState();
 const { disableSendMessage, audienceList, kickUserOutOfRoom } = useLiveAudienceState();
 const { loginUserInfo } = useLoginState();
 const currentUserInfo = computed(() => audienceList.value.find(user => user.userId === props.userId));
@@ -78,10 +70,7 @@ const actions = computed(() => {
   if (!isOwner.value) {
     return [];
   }
-  const isInCoGuest = userListInCoGuest.value.some(user => user.userId === props.userId);
-  const isSentCoGuest = sentCoGuestUserList.value.some(user => user.userId === props.userId);
-  const isAvailableCoGuest = availableCoGuestUserList.value.some(user => user.userId === props.userId);
-  const isReceivedCoGuest = receivedCoGuestUserList.value.some(user => user.userId === props.userId);
+  const isInCoGuest = connected.value.some(user => user.userId === props.userId);
   const isDisableSendMessage = currentUserInfo.value?.isMessageDisabled;
   if (!isDisableSendMessage) {
     tempActions.push({
@@ -98,38 +87,8 @@ const actions = computed(() => {
     });
   }
   if (isInCoGuest) {
-    tempActions.push({ label: t('Kick out'), action: 'disconnect', actionFn: () => disconnect(props.userId) });
+    tempActions.push({ label: t('Kick out'), action: 'disconnect', actionFn: () => kickUserOutOfSeat({ userId: props.userId }) });
   }
-  // if (isAvailableCoGuest) {
-  //   tempActions.push({
-  //     label: t('Invite to seat'),
-  //     action: 'takeSeat',
-  //     actionFn: () =>
-  //       sendCoGuestRequest({
-  //         userId: props.userId,
-  //         seatIndex: -1,
-  //       }),
-  //   });
-  // }
-  // if (isSentCoGuest) {
-  //   tempActions.push({
-  //     label: t('Cancel invitation'),
-  //     action: 'cancelCoGuestRequest',
-  //     actionFn: () => cancelCoGuestRequest({ userId: props.userId }),
-  //   });
-  // }
-  // if (isReceivedCoGuest) {
-  //   tempActions.push({
-  //     label: t('Accept invitation'),
-  //     action: 'acceptCoGuestRequest',
-  //     actionFn: () => acceptCoGuestRequest({ userId: props.userId }),
-  //   });
-  //   tempActions.push({
-  //     label: t('Reject invitation'),
-  //     action: 'rejectCoGuestRequest',
-  //     actionFn: () => rejectCoGuestRequest({ userId: props.userId }),
-  //   });
-  // }
   tempActions.push({
     label: t('Kick out of room'),
     action: 'kickUserOutOfRoom',

package/src/components/LiveList/LiveList.vue

@@ -39,11 +39,11 @@
 <script lang="ts" setup>
 import { ref, computed, defineEmits, watch } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 import type { LiveInfo } from '../../types';
-const { liveList, currentCursor, fetchLiveList } = useLiveState();
+const { liveList, liveListCursor, fetchLiveList } = useLiveListState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 const props = defineProps({
@@ -57,7 +57,7 @@ const scrollContainerRef = ref<HTMLElement | null>(null);
 const liveListItemsRef = ref<HTMLElement | null>(null);
  
 const isLoadingMore = ref(false);
-const hasMoreLive = computed(() => currentCursor.value !== '');
+const hasMoreLive = computed(() => liveListCursor.value !== '');
 
 const liveItemWidth = ref('356px');
 const liveItemHeight = ref('270px');
@@ -71,7 +71,7 @@ watch(
   async (user) => {
     if (user && user.userId) {
       isLoadingMore.value = true;
-      currentCursor.value = '';
+      liveListCursor.value = '';
       liveList.value.length = 0;
       await fetchLiveList({});
       isLoadingMore.value = false;
@@ -128,7 +128,7 @@ async function fetchMoreLives() {
   }
   try {
     isLoadingMore.value = true;
-    await fetchLiveList({ cursor: currentCursor.value });
+    await fetchLiveList({ cursor: liveListCursor.value });
   } finally {
     isLoadingMore.value = false;
   }

package/src/components/LiveList/LiveListH5.vue

@@ -55,13 +55,13 @@
 <script lang="ts" setup>
 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 { useLiveListState } from '../../states/LiveListState';
 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 { liveList, liveListCursor, fetchLiveList } = useLiveListState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 const showLiveList = ref<LiveInfo[]>([]);
@@ -70,7 +70,7 @@ const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.
 const scrollContainerRef = ref<HTMLElement | null>(null);
 
 const isLoadingMore = ref(false);
-const hasMoreLive = computed(() => currentCursor.value !== '');
+const hasMoreLive = computed(() => liveListCursor.value !== '');
 
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
@@ -84,7 +84,7 @@ watch(
   async user => {
     if (user && user.userId) {
       isLoadingMore.value = true;
-      currentCursor.value = '';
+      liveListCursor.value = '';
       liveList.value.length = 0;
       await fetchLiveList({});
       showLiveList.value = liveList.value.slice();
@@ -109,7 +109,7 @@ watch(scrollContainerRef, () => {
 async function handleRefresh(completeRefresh: (success?: boolean) => void) {
   try {
     isLoadingMore.value = true;
-    currentCursor.value = '';
+    liveListCursor.value = '';
     liveList.value.length = 0;
     await fetchLiveList({});
     showLiveList.value = liveList.value.slice();
@@ -131,7 +131,7 @@ async function fetchMoreLives() {
   }
   try {
     isLoadingMore.value = true;
-    await fetchLiveList({ cursor: currentCursor.value });
+    await fetchLiveList({ cursor: liveListCursor.value });
     showLiveList.value = liveList.value.slice();
   } finally {
     isLoadingMore.value = false;

package/src/components/LiveScenePanel/index.vue

@@ -45,12 +45,12 @@ import MaterialRenameDialog from './MaterialRenameDialog.vue';
 import MaterialItem from './MaterialItem.vue';
 import { useVideoMixerState } from '../../states/VideoMixerState';
 import { useDeviceState } from '../../states/DeviceState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { getNanoId } from '../../utils/utils';
 import { LiveOrientation, MediaSource } from '../../types';
 const { t } = useUIKit();
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { mediaSourceList, publishVideoQuality, addMediaSource, updateMediaSource, clearMediaSource } = useVideoMixerState();
 const { getCameraList } = useDeviceState();