tuikit-atomicx-vue3 3.4.2 → 4.3.0

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,
@@ -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 = '';
@@ -260,31 +265,31 @@ const handleCoHostRequestTimeout = ({ inviter, invitee }: { inviter: SeatUserInf
   }
 };
 
-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 || 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();
 

package/src/components/LiveView/CoreViewDecorate/BattleDecorate.vue

@@ -11,7 +11,7 @@
     <div :class="['battle-time-container', { 'more-top': showPkBar }]">
       <div class="battle-time-background"></div>
       <div class="battle-time-content">
-        <span class="battle-status">{{ t('In battle') }}</span>
+        <IconTime size="16" />
         <span class="battle-time">{{ time }}</span>
       </div>
     </div>
@@ -28,13 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { IconPK, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { TUILiveBattleManagerEvents, TUIBattleStoppedReason } from '@tencentcloud/tuiroom-engine-js';
-import { ref, computed, watch, Ref, onMounted, onUnmounted, nextTick } from 'vue';
-import { CoHostLayoutTemplate } from '../../../types';
+import { IconPK, IconTime, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, computed, watch, Ref, onMounted, onUnmounted } from 'vue';
+import { BattleEndedReason, BattleEvent, BattleInfo, CoHostLayoutTemplate } from '../../../types';
 import { useBattleState } from '../../../states/BattleState';
 import { useLiveSeatState } from '../../../states/LiveSeatState';
-import { useLiveState } from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 import { convertSecondsToHMS } from '../../../utils/utils';
 import defeatResult from '../assets/img/defeat.png';
 import victoryResult from '../assets/img/victory.png';
@@ -44,7 +43,7 @@ import blueBkgSvg from '../assets/svg/blueBkg.svg';
 import vSvg from '../assets/svg/v.svg';
 import sSvg from '../assets/svg/s.svg';
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { currentBattleInfo, battleUsers, battleScore, subscribeEvent, unsubscribeEvent} = useBattleState();
 const { seatList } = useLiveSeatState();
 const { t } = useUIKit();
@@ -133,7 +132,7 @@ function convertToTwoDigits(value: number) {
 const time = computed(() => {
   const { minutes, seconds } = convertSecondsToHMS(leftBattleTime.value);
   if (minutes <= 0 && seconds <= 0) {
-    return '00:00';
+    return t('Battle ended');
   }
   return `${convertToTwoDigits(minutes)}:${convertToTwoDigits(seconds)}`;
 });
@@ -141,7 +140,7 @@ const time = computed(() => {
 const showBattleResult = ref(false);
 const battleResultImg = ref(drawResult);
 
-function handleBattleEnded(eventInfo: { battleId: string; reason: TUIBattleStoppedReason }) {
+function handleBattleEnded(eventInfo: { battleInfo: BattleInfo; reason: BattleEndedReason }) {
   stopTimer();
   showBattleResult.value = true;
   const maxScore = Math.max(...[...battleScore.value.values()]);
@@ -163,11 +162,11 @@ function handleBattleEnded(eventInfo: { battleId: string; reason: TUIBattleStopp
 }
 
 onMounted(() => {
-  subscribeEvent(TUILiveBattleManagerEvents.onBattleEnded, handleBattleEnded);
+  subscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);
 });
 
 onUnmounted(() => {
-  unsubscribeEvent(TUILiveBattleManagerEvents.onBattleEnded, handleBattleEnded);
+  unsubscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);
 });
 </script>
 
@@ -252,10 +251,6 @@ onUnmounted(() => {
     line-height: 20px;
     gap: 4px;
     transform: translateY(-2px);
-
-    .battle-time {
-      width: 30px;
-    }
   }
 }
 

package/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { SeatUserInfo, CoHostLayoutTemplate } from '../../../types';
 import { useBattleState } from '../../../states/BattleState';
-import { useLiveState } from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 import { useCoHostState } from '../../../states/CoHostState';
 import { ref, computed, watch } from 'vue';
 import BattleTopBadge from '../assets/svg/BattleTopBadge.svg';
@@ -44,7 +44,7 @@ const props = defineProps<{
   }}>;
 }>();
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { connected } = useCoHostState();
 const { currentBattleInfo, battleScore } = useBattleState();