From ec0fa7f5d11452dd7efa079dc73192e0ad193fa7 Mon Sep 17 00:00:00 2001
From: yuanfazheng <yuanfazheng@tencent.com>
Date: Thu, 2 Jul 2026 19:32:26 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90Electron=E3=80=91update=20packages/tui?=
 =?UTF-8?q?kit-atomicx-vue3-electron?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tuikit-atomicx-vue3-electron/package.json |   8 +-
 .../components/CoHostPanel/BattlePanel.vue    | 545 ++++++++---
 .../components/CoHostPanel/CoHostPanel.vue    | 529 ++++++-----
 .../CoHostPanel/ConfigSettingPanel.vue        |  39 +-
 .../CoHostPanel/ConnectionPanel.vue           | 497 ++++++++--
 .../CoHostPanel/RecommendHostList.vue         |  40 +-
 .../components/CoHostPanel/battleAutoStart.ts |  57 ++
 .../src/components/CoHostPanel/constants.ts   |  15 +
 .../CoHostPanel/i18n/en-US/index.ts           |  13 +-
 .../CoHostPanel/i18n/zh-CN/index.ts           |  14 +-
 .../src/components/CoHostPanel/index.ts       |  14 +-
 .../src/components/CoHostPanel/inviteMutex.ts |  62 ++
 .../LiveAudienceList/LiveAudienceList.vue     |   2 +-
 .../LiveAudienceList/LiveAudienceListH5.vue   |   2 +-
 .../components/LiveAudienceList/constants.ts  |  17 +
 .../src/components/LiveAudienceList/index.ts  |   2 +-
 .../CoreViewDecorate/BattleDecorate.vue       | 888 ++++++++++--------
 .../CoreViewDecorate/BattleUserDecorate.vue   |  24 +-
 .../CoreViewDecorate/LiveCoreDecorate.vue     |   2 +
 .../src/components/LiveView/index.vue         |   4 +-
 .../StreamMixer/LocalMixer/index.vue          |  92 +-
 .../components/StreamMixer/MacStreamMixer.vue |   1 -
 .../src/report/MetricsKey.ts                  |   1 +
 .../src/subEntry/live/live.ts                 |   3 +-
 .../src/types/coHost.ts                       |  23 +-
 .../src/types/index.ts                        |   1 +
 .../src/types/liveSummary.ts                  |  40 +
 .../src/types/seat.ts                         |  39 +-
 .../src/utils/loginCoordinator.ts             |  78 ++
 29 files changed, 2092 insertions(+), 960 deletions(-)
 create mode 100644 packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/battleAutoStart.ts
 create mode 100644 packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/inviteMutex.ts
 create mode 100644 packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/constants.ts
 create mode 100644 packages/tuikit-atomicx-vue3-electron/src/types/liveSummary.ts
 create mode 100644 packages/tuikit-atomicx-vue3-electron/src/utils/loginCoordinator.ts

diff --git a/packages/tuikit-atomicx-vue3-electron/package.json b/packages/tuikit-atomicx-vue3-electron/package.json
index 7dd5c9e..17ba3ad 100644
--- a/packages/tuikit-atomicx-vue3-electron/package.json
+++ b/packages/tuikit-atomicx-vue3-electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3-electron",
-  "version": "5.10.0",
+  "version": "6.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -40,9 +40,9 @@
     "@tencentcloud/lite-chat": "^1.6.4",
     "@tencentcloud/chat-uikit-engine-lite": "~1.0.7",
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@tencentcloud/tuiroom-engine-electron": "~4.1.1",
-    "@tencentcloud/uikit-base-component-vue3": "~1.4.3",
-    "trtc-electron-sdk": "13.3.801-alpha.3",
+    "@tencentcloud/tuiroom-engine-electron": "~4.2.0",
+    "@tencentcloud/uikit-base-component-vue3": "~1.4.5",
+    "trtc-electron-sdk": "13.3.802-beta.1",
     "vue": "^3.4.0"
   },
   "dependencies": {
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/BattlePanel.vue b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/BattlePanel.vue
index 24693ff..cd4d6cd 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/BattlePanel.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/BattlePanel.vue
@@ -15,6 +15,7 @@
           v-if="!isUserInvited(user.userId, user.liveId)"
           size="small"
           type="primary"
+          :disabled="pendingInviteLiveIds.has(user.liveId) || hasPendingConnectionInvite"
           @click="handleSendBattleRequest(user)"
         >
           {{ t('Invite battle') }}
@@ -30,93 +31,430 @@
       </template>
     </RecommendHostList>
   </div>
-  <div v-if="currentBattleInfo?.battleId" class="battle-panel-footer">
-    <TUIButton
-      type="primary"
-      :color="'red'"
-      @click="showExitCoHostDialog = true"
-    >
-      {{ t('End battle') }}
-    </TUIButton>
-  </div>
-  <TUIDialog
-    :visible="showExitCoHostDialog"
-    :showClose="false"
-    :modal="false"
-    :customClasses="['exit-co-host-dialog']"
-    @confirm="handleExitBattle"
-    @cancel="showExitCoHostDialog = false"
-  >
-    {{ t('Are you sure you want to exit the battle') }}
-    <template #footer>
-      <TUIButton
-        type="default"
-        color="gray"
-        @click="showExitCoHostDialog = false"
-      >
-        {{ t('Cancel') }}
-      </TUIButton>
-      <TUIButton
-        type="primary"
-        color="red"
-        @click="handleExitBattle"
-      >
-        {{ t('End battle') }}
-      </TUIButton>
-    </template>
-  </TUIDialog>
 </template>
 
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { TUIConnectionCode } from '@tencentcloud/tuiroom-engine-electron';
-import { TUIButton, TUIToast, useUIKit, TOAST_TYPE, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
+<script lang="ts">
+// ----------------------------------------------------------------------------
+// Module-level battle bookkeeping (genuinely module-level)
+//
+// Why a separate `<script>` block (not `<script setup>`)?
+//   Vue SFC compiles `<script setup>` body into the `setup()` function, so
+//   any `const`/`let`/function call declared there runs ONCE PER COMPONENT
+//   INSTANCE. We need real module-level semantics — runs exactly once at
+//   module evaluation and survives all panel mount/unmount cycles —
+//   otherwise:
+//     - `pendingBattleRequests` would be re-created per mount and each new
+//       BattlePanel would see an empty Map;
+//     - `subscribeCoHostEvent(...)` would re-subscribe a new handler closure
+//       per mount, leaking handlers into the core event bus and accumulating
+//       N copies after N open/close cycles of the parent CoHostPanel dialog
+//       (which internally uses `v-if` so BattlePanel really does mount and
+//       unmount).
+//
+// Why module-level at all?
+//   The user can close the CoHostPanel after sending a co-host invite that
+//   has `withBattle: true`. The dialog uses `v-if="visible"` internally, so
+//   closing it unmounts BattlePanel. When the invitee then accepts, the
+//   `onCoHostRequestAccepted` handler must still fire `requestBattle`,
+//   otherwise the two sides end up co-hosting without an actual PK ever
+//   starting (UX symptom: connection bar appears but no battle/score bar).
+//
+// What we keep here:
+//   - `pendingBattleRequests`: maps the still-outstanding invitee userId to the
+//     battle duration that was active at the time the invite was sent. Capturing
+//     the duration up-front means a later setting change (or panel teardown)
+//     does NOT affect a battle that the user has already initiated.
+//   - `acceptedBattleInvitees`: invitees who have already accepted in the
+//     current invite round, parked here until the round settles so we can fire
+//     ONE aggregated battle for all of them.
+//   - The four CoHost event handlers + their subscription: registered
+//     exactly once at module evaluation, surviving panel mount/unmount.
+//
+// Why aggregate instead of firing per-accept?
+//   A host may invite several hosts to a PK at once. If we called
+//   `requestBattle` the instant the first one accepted, that first accepter
+//   would lock in a 1-on-1 battle and later accepters would be left out (race).
+//   Instead we wait until EVERY invite in the round has settled — i.e.
+//   `pendingBattleRequests` is empty because each invite landed on
+//   accepted / rejected / timeout / cancel — AND every accepter has actually
+//   finished establishing its cross-room connection (appears in `connected`),
+//   then fire a single `needResponse: false` battle for all of them.
+//
+// Why also gate on connection readiness?
+//   `requestBattle` only pulls hosts that are ALREADY connected into the
+//   battle. An "accepted" co-host invite does not guarantee the cross-room
+//   connection (TRTC join + mixing) is live yet — and that handshake is
+//   markedly slower on Electron (Mac/Win) than on Web. Firing the battle the
+//   moment the round settles therefore drops any accepter that has not yet
+//   connected, leaving it stuck in plain co-host while the others PK. We wait
+//   for each accepter's `onCoHostUserJoined` (connection established) before
+//   including it, backed by a bounded safety timeout so a never-connecting
+//   accepter cannot stall the battle forever.
+//
+// Implementation notes (Electron kit specific):
+//   - `useBattleState()`, `useCoHostState()`, `useLoginState()` here are
+//     all pure getters in this kit — they only `return` module-level refs
+//     and functions, registering NO `watch` side effects on each call. So
+//     calling them at module top level is safe (unlike the Web kit, where
+//     the same hooks register `vueWatch` and would leak).
+//   - `loginUserInfo` returned by `useLoginState()` is itself a module-level
+//     `ref`, so reading `.value` outside any component instance is fine.
+//   - Subscription handlers are registered ONCE here. There is no paired
+//     `unsubscribe`: the kit's CoHostState lives for the whole page lifetime
+//     and HMR teardown is out of scope for this fix.
+//
+// Mirrors the same pattern in `uikit-component-vue3/.../BattlePanel.vue`
+// to keep three-end (Web kit / Mac kit / Win demo) PK invite flow behavior
+// aligned. See the corresponding block there for the canonical reference.
+// ----------------------------------------------------------------------------
+import { watch } from 'vue';
 import { useBattleState } from '../../states/BattleState';
 import { useCoHostState } from '../../states/CoHostState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
-import { CoHostLayoutTemplate, CoHostEvent } from '../../types';
+import { CoHostEvent, BattleEvent, CoHostStatus } from '../../types';
+import type { SeatUserInfo } from '../../types';
+import { setBattleAutoStartInProgress } from './battleAutoStart';
+
+interface PendingBattleRequest {
+  duration: number;
+}
+// Genuinely module-level state: created once on module evaluation and
+// shared by every BattlePanel instance for the lifetime of the page.
+const pendingBattleRequests = new Map<string, PendingBattleRequest>();
+// Invitees who have already accepted in the current round, parked here until
+// every pending invite has settled so we can fire ONE aggregated battle for
+// all of them. Value carries the duration captured at invite time.
+const acceptedBattleInvitees = new Map<string, PendingBattleRequest>();
+
+const { requestBattle: moduleRequestBattle, subscribeEvent: subscribeBattleEventAtModule } = useBattleState();
+const { loginUserInfo: moduleLoginUserInfo } = useLoginState();
+const {
+  subscribeEvent: subscribeCoHostEvent,
+  connected: moduleConnected,
+  coHostStatus: moduleCoHostStatus,
+} = useCoHostState();
+const { currentLive: moduleCurrentLive } = useLiveListState();
+
+// Safety timeout (ms) bounding how long we wait for accepters to finish
+// establishing their cross-room connection before firing the battle. If an
+// accepter never connects within this window (e.g. its connection fails after
+// the accept signal), we proceed with whoever IS connected so the PK is never
+// stalled indefinitely.
+const BATTLE_CONNECTION_READY_TIMEOUT_MS = 10000;
+// One-shot timer guarding the wait above. Module-level so it survives panel
+// mount/unmount, paired with the rest of the round bookkeeping.
+let connectionReadyTimer: ReturnType<typeof setTimeout> | null = null;
+
+const clearConnectionReadyTimer = () => {
+  if (connectionReadyTimer !== null) {
+    clearTimeout(connectionReadyTimer);
+    connectionReadyTimer = null;
+  }
+};
+
+// True only while the aggregated `requestBattle` call is actually in flight.
+// Combined with the three round-bookkeeping structures below, it lets us tell
+// the Connection panel whether a Battle-tab-initiated PK is still being set up,
+// covering the gap between firing the battle and `onBattleStarted`.
+let isFiringAggregatedBattle = false;
+
+// Recompute the shared "battle auto-start in progress" flag from all of the
+// round bookkeeping. The window is open while any invite is still pending, any
+// accepter is parked waiting to connect, the connection-ready safety timer is
+// armed, or the aggregated requestBattle is in flight. The Connection panel
+// disables its "Start battle" button while this is true to prevent a duplicate
+// requestBattle for the same round.
+const refreshBattleAutoStartFlag = () => {
+  setBattleAutoStartInProgress(
+    pendingBattleRequests.size > 0
+    || acceptedBattleInvitees.size > 0
+    || connectionReadyTimer !== null
+    || isFiringAggregatedBattle
+  );
+};
+
+// Subset of accepters whose cross-room connection is actually established
+// (present in CoHostState's `connected`). `requestBattle` only pulls
+// already-connected hosts into the battle, so firing before an accepter has
+// connected silently drops them — this is the root cause of the cross-end bug
+// where a slower Electron peer accepted but stayed in plain co-host instead of
+// joining the PK. We therefore only ever battle connected accepters.
+const getConnectedAccepterIds = (): string[] => {
+  const connectedUserIds = new Set(moduleConnected.value.map(user => user.userId));
+  return Array.from(acceptedBattleInvitees.keys()).filter(userId => connectedUserIds.has(userId));
+};
+
+// Fire the actual battle for the given accepters and reset all round
+// bookkeeping (accepted set + safety timer). A no-op when nobody is connected.
+const fireAggregatedBattle = async (userIdList: string[], duration: number) => {
+  // Assert the in-flight flag BEFORE clearing the round bookkeeping so the
+  // shared "auto-start in progress" signal stays continuously true across the
+  // clear -> requestBattle -> onBattleStarted hand-off (no flicker window where
+  // the Connection panel's "Start battle" button briefly re-enables).
+  isFiringAggregatedBattle = true;
+  acceptedBattleInvitees.clear();
+  clearConnectionReadyTimer();
+  refreshBattleAutoStartFlag();
+  if (userIdList.length === 0) {
+    isFiringAggregatedBattle = false;
+    refreshBattleAutoStartFlag();
+    return;
+  }
+  try {
+    await moduleRequestBattle({
+      config: {
+        duration,
+        needResponse: false,
+        extensionInfo: '',
+      },
+      userIdList,
+      timeout: 0,
+    });
+    // SUCCESS: deliberately keep `isFiringAggregatedBattle` asserted. The
+    // request resolving only means the SDK accepted the call, NOT that the PK
+    // has started — `onBattleStarted` (which closes the CoHostPanel) fires
+    // slightly later. Clearing the flag here would re-enable the Connection
+    // panel's "Start battle" button for that gap, which is exactly the brief
+    // un-disabled flicker we are preventing. The flag is instead cleared by
+    // `onBattleStartedAtModule` / `onBattleEndedAtModule` and the
+    // session-boundary watchers below.
+  } catch (error) {
+    // Toast is intentionally not shown here: the panel may already be closed
+    // when this handler runs; surfacing UI noise without context confuses
+    // the user. Errors are still observable via console for diagnostics.
+    console.error('[BattlePanel] aggregated requestBattle after co-host accepted failed:', error);
+    // FAILURE: no battle will start, so release the flag now (and recompute)
+    // so the user can retry via the Connection panel's "Start battle" button.
+    isFiringAggregatedBattle = false;
+    refreshBattleAutoStartFlag();
+  }
+};
+
+// Fire a single battle for every accepted invitee, but only once the whole
+// round has settled AND every accepter has actually finished connecting.
+// "Settled" means `pendingBattleRequests` is empty: every invite has landed on
+// accepted / rejected / timeout / cancel. Sending one `needResponse: false`
+// battle to all connected accepters avoids the race where the first accepter
+// locks in a 1-on-1 battle before the others have responded.
+//
+// Connection-readiness gate: an accepted invite only means the peer agreed to
+// co-host; the cross-room connection (TRTC join + mixing) may not be live yet,
+// and is markedly slower on Electron than on Web. Firing the battle before the
+// peer appears in `connected` would leave it out of the PK. So when not all
+// accepters are connected we wait for `onCoHostUserJoined` to re-trigger this,
+// backed by a bounded safety timeout.
+const maybeStartAggregatedBattle = async () => {
+  // Some invites are still outstanding — keep waiting for their events.
+  if (pendingBattleRequests.size > 0) {
+    return;
+  }
+  // Nobody accepted in this round; nothing to start. The round has fully
+  // settled, so clear the shared auto-start flag.
+  if (acceptedBattleInvitees.size === 0) {
+    refreshBattleAutoStartFlag();
+    return;
+  }
+  // All accepters in one round share a single battle; reuse the duration
+  // captured when the first of them was invited.
+  const duration = acceptedBattleInvitees.values().next().value?.duration ?? 0;
+  const connectedAccepterIds = getConnectedAccepterIds();
+  // Every accepter is connected → fire immediately for all of them.
+  if (connectedAccepterIds.length === acceptedBattleInvitees.size) {
+    await fireAggregatedBattle(connectedAccepterIds, duration);
+    return;
+  }
+  // Otherwise some accepters are still connecting. Wait for their
+  // `onCoHostUserJoined` to re-invoke us, and arm a one-shot safety timeout so
+  // a never-connecting accepter cannot stall the battle forever: when it fires
+  // we proceed with whoever is connected at that moment.
+  if (connectionReadyTimer === null) {
+    connectionReadyTimer = setTimeout(() => {
+      connectionReadyTimer = null;
+      const fallbackDuration = acceptedBattleInvitees.values().next().value?.duration ?? 0;
+      void fireAggregatedBattle(getConnectedAccepterIds(), fallbackDuration);
+    }, BATTLE_CONNECTION_READY_TIMEOUT_MS);
+  }
+  // Still waiting on connection readiness: keep the auto-start flag asserted.
+  refreshBattleAutoStartFlag();
+};
+
+const onCoHostRequestAcceptedAtModule = ({ invitee }: { invitee: SeatUserInfo }) => {
+  const ctx = pendingBattleRequests.get(invitee.userId);
+  if (!ctx) {
+    return;
+  }
+  // Move from "pending" to "accepted" and try to aggregate. We deliberately do
+  // NOT fire the battle right away: waiting until the round settles lets us
+  // include every accepter in a single battle.
+  pendingBattleRequests.delete(invitee.userId);
+  acceptedBattleInvitees.set(invitee.userId, ctx);
+  refreshBattleAutoStartFlag();
+  void maybeStartAggregatedBattle();
+};
+
+const onCoHostRequestCancelledAtModule = ({ inviter }: { inviter: SeatUserInfo }) => {
+  pendingBattleRequests.delete(inviter.userId);
+  refreshBattleAutoStartFlag();
+};
+
+const onCoHostRequestRejectedAtModule = ({ invitee }: { invitee: SeatUserInfo }) => {
+  pendingBattleRequests.delete(invitee.userId);
+  // A rejection may settle the round; aggregate the accepters gathered so far.
+  void maybeStartAggregatedBattle();
+};
+
+const onCoHostRequestTimeoutAtModule = ({ inviter, invitee }: { inviter: SeatUserInfo; invitee: SeatUserInfo }) => {
+  // Only clear if WE are the inviter that timed out; otherwise we are the
+  // invitee side and have nothing in the pending map.
+  if (inviter.userId === moduleLoginUserInfo.value?.userId) {
+    pendingBattleRequests.delete(invitee.userId);
+    // A timeout may settle the round; aggregate the accepters gathered so far.
+    void maybeStartAggregatedBattle();
+  }
+};
+
+// A previously-accepted battle invitee has now finished establishing its
+// cross-room connection (it just appeared in `connected`). Re-check whether
+// the round can fire now that this accepter is connection-ready. No-op for
+// joiners that are not part of the current battle round (plain co-host joins).
+const onCoHostUserJoinedAtModule = ({ userInfo }: { userInfo: SeatUserInfo }) => {
+  if (!acceptedBattleInvitees.has(userInfo.userId)) {
+    return;
+  }
+  void maybeStartAggregatedBattle();
+};
+
+// Genuinely one-shot subscription at module load. Intentionally not paired
+// with an `unsubscribe` because the consumer state module lives for the
+// whole page lifetime; HMR teardown is out of scope for this fix.
+subscribeCoHostEvent(CoHostEvent.onCoHostRequestAccepted, onCoHostRequestAcceptedAtModule);
+subscribeCoHostEvent(CoHostEvent.onCoHostRequestCancelled, onCoHostRequestCancelledAtModule);
+subscribeCoHostEvent(CoHostEvent.onCoHostRequestRejected, onCoHostRequestRejectedAtModule);
+subscribeCoHostEvent(CoHostEvent.onCoHostRequestTimeout, onCoHostRequestTimeoutAtModule);
+subscribeCoHostEvent(CoHostEvent.onCoHostUserJoined, onCoHostUserJoinedAtModule);
+
+// Reset all round bookkeeping (including the in-flight `isFiringAggregatedBattle`
+// flag) once the PK actually starts/ends, or when the session ends. This is the
+// counterpart that lets `fireAggregatedBattle` keep `isFiringAggregatedBattle`
+// asserted on its success path: without a reset here that flag (and therefore
+// the shared "auto-start in progress" signal) would stay stuck true and leave
+// the Connection panel's "Start battle" button disabled into the next round.
+const resetAggregatedBattleRound = () => {
+  pendingBattleRequests.clear();
+  acceptedBattleInvitees.clear();
+  clearConnectionReadyTimer();
+  isFiringAggregatedBattle = false;
+  refreshBattleAutoStartFlag();
+};
+const onBattleStartedAtModule = () => {
+  resetAggregatedBattleRound();
+};
+const onBattleEndedAtModule = () => {
+  resetAggregatedBattleRound();
+};
+subscribeBattleEventAtModule(BattleEvent.onBattleStarted, onBattleStartedAtModule);
+subscribeBattleEventAtModule(BattleEvent.onBattleEnded, onBattleEndedAtModule);
+// Session boundaries (mirrors ConnectionPanel.vue's reset triggers): drop any
+// in-flight auto-start state when the local host leaves the co-host connection
+// or exits the live room, so a stale flag can never bleed across sessions.
+// Module-level `watch` (no auto-dispose) is intentional and matches the rest
+// of this block's "lives for the whole page" subscriptions.
+watch(moduleCoHostStatus, (status) => {
+  if (status === CoHostStatus.Disconnected) {
+    resetAggregatedBattleRound();
+  }
+});
+watch(() => moduleCurrentLive.value?.liveId, (liveId) => {
+  if (!liveId) {
+    resetAggregatedBattleRound();
+  }
+});
+
+export { pendingBattleRequests };
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { TUIConnectionCode } from '@tencentcloud/tuiroom-engine-electron';
+import { TUIButton, TUIToast, useUIKit, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+// `useBattleState` / `useCoHostState` are already imported in the sibling
+// `<script>` block above; in a Vue SFC those top-level bindings are visible to
+// `<script setup>`, so re-importing them here would be a duplicate identifier.
+import { CoHostLayoutTemplate, LiveOrientation } from '../../types';
 import UserList from './UserList.vue';
 import RecommendHostList from './RecommendHostList.vue';
-import type { SeatUserInfo } from '../../types';
+import type { SeatUserInfo as SeatUserInfoSetup } from '../../types';
+import { COHOST_REQUEST_TIMEOUT_SECONDS } from './constants';
+import { markInviteType, useInviteMutex } from './inviteMutex';
 
 const { t } = useUIKit();
 const props = defineProps<{
   battleDuration: number;
   coHostLayoutTemplate: CoHostLayoutTemplate;
+  currentLiveOrientation: LiveOrientation;
 }>();
-const { loginUserInfo } = useLoginState();
 const {
   invitees,
   requestHostConnection,
   cancelHostConnection,
-  subscribeEvent: subscribeCoHostEvent,
-  unsubscribeEvent: unsubscribeCoHostEvent,
 } = useCoHostState();
 const {
   currentBattleInfo,
   battleUsers,
-  requestBattle,
-  exitBattle,
 } = useBattleState();
 
-const showExitCoHostDialog = ref(false);
+// Per-instance UI guard against double-clicking the "Invite battle" button:
+// the button only flips to "Cancel invitation" after `invitees` updates, which
+// happens asynchronously once `requestHostConnection` resolves. During that
+// await window the button is still clickable, so a second click would re-issue
+// the request for the same liveId and the SDK returns `Connecting`, surfacing a
+// "send failed" toast right after the "send success" one. We track in-flight
+// liveIds here to both disable the button immediately and ignore re-entrant
+// calls. (This is distinct from the module-level `pendingBattleRequests`, which
+// tracks the PK aggregation round across panel mount/unmount.)
+const pendingInviteLiveIds = ref<Set<string>>(new Set());
 const isUserInvited = (userId: string, liveId: string) => invitees.value.some(user => user.userId === userId && user.liveId === liveId);
 
-const pkUserIds = new Set<string>();
-const handleSendBattleRequest = async (user: SeatUserInfo) => {
+// Mutual exclusion with connection invites: while any "Invite connection" is
+// still pending, the "Invite battle" buttons are disabled (see inviteMutex.ts).
+const { hasPendingConnectionInvite } = useInviteMutex(invitees);
+
+// In landscape mode, force the co-host layout to the fixed 2-seat landscape template.
+const effectiveCoHostLayoutTemplate = computed(() => {
+  if (props.currentLiveOrientation === LiveOrientation.Landscape) {
+    return CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats;
+  }
+  return props.coHostLayoutTemplate;
+});
+
+const handleSendBattleRequest = async (user: SeatUserInfoSetup) => {
+  // Re-entrancy guard: ignore a second click while a request for the same
+  // liveId is still in flight (see `pendingInviteLiveIds` for details).
+  if (pendingInviteLiveIds.value.has(user.liveId)) {
+    return;
+  }
+  pendingInviteLiveIds.value.add(user.liveId);
   try {
     const result = await requestHostConnection({
       liveId: user.liveId,
-      layoutTemplate: props.coHostLayoutTemplate,
-      timeout: 10,
+      layoutTemplate: effectiveCoHostLayoutTemplate.value,
+      timeout: COHOST_REQUEST_TIMEOUT_SECONDS,
       extensionInfo: JSON.stringify({
-        timeout: 10,
+        timeout: COHOST_REQUEST_TIMEOUT_SECONDS,
         withBattle: true,
       }),
     });
     switch (result.get(user.liveId)) {
       case TUIConnectionCode.TUIConnectionCodeSuccess:
-        pkUserIds.add(user.userId);
+        // Capture the active battle duration at request time so a later
+        // settings change won't retroactively alter this battle. Writes go
+        // into the module-level `pendingBattleRequests` declared in the
+        // sibling `<script>` block above.
+        pendingBattleRequests.set(user.userId, { duration: props.battleDuration });
+        // Tag this liveId as a battle invite so all "Invite connection"
+        // buttons are disabled while it stays pending.
+        markInviteType(user.liveId, 'battle');
         TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Battle invitation sent to user', { userName: user.userName || user.userId }) });
         break;
       case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
@@ -138,91 +476,38 @@ const handleSendBattleRequest = async (user: SeatUserInfo) => {
         break;
     }
   } catch (error) {
-    pkUserIds.delete(user.userId);
+    // Defensive cleanup: under normal flow the entry is only set on the
+    // Success branch above so there is nothing to delete here, but keep
+    // the call as a safety net for any future code path that might add
+    // an entry before throwing.
+    pendingBattleRequests.delete(user.userId);
     TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed') });
-    throw error;
+    // Log instead of rethrow: the caller is a template `@click` handler
+    // which does not await us, so a rethrow would surface as an unhandled
+    // promise rejection. The toast above already informs the user, and
+    // console.error preserves the stack for diagnostics.
+    console.error('[BattlePanel] handleSendBattleRequest failed:', error);
+  } finally {
+    // Release the guard once the request settles. On success the button is
+    // already flipped to "Cancel invitation" by `invitees`; on failure it
+    // becomes clickable again so the user can retry.
+    pendingInviteLiveIds.value.delete(user.liveId);
+    // Recompute the shared auto-start flag: on success a new pending entry was
+    // added (flag -> true), on failure the entry was removed (flag may clear).
+    refreshBattleAutoStartFlag();
   }
 };
 
-const handleCancelBattleRequest = async (user: SeatUserInfo) => {
+const handleCancelBattleRequest = async (user: SeatUserInfoSetup) => {
   await cancelHostConnection({ liveId: user.liveId });
-  pkUserIds.delete(user.userId);
-};
-
-const handleExitBattle = () => {
-  if (currentBattleInfo.value?.battleId) {
-    exitBattle({ battleId: currentBattleInfo.value?.battleId });
-    showExitCoHostDialog.value = false;
-  }
+  pendingBattleRequests.delete(user.userId);
+  refreshBattleAutoStartFlag();
+  // Cancelling one outstanding invite may settle the round: if others have
+  // already accepted, start the aggregated battle for them now.
+  void maybeStartAggregatedBattle();
 };
-
-const handleCoHostRequestAccepted = async ({ invitee }: { invitee: SeatUserInfo }) => {
-  if (!pkUserIds.has(invitee.userId)) {
-    return;
-  }
-  try {
-    await requestBattle({
-      config: {
-        duration: props.battleDuration,
-        needResponse: false,
-      },
-      userIdList: [invitee.userId],
-      timeout: 0,
-    });
-    pkUserIds.delete(invitee.userId);
-  } catch (error) {
-    TUIToast({ type: TOAST_TYPE.ERROR, message: t('Request battle failed') });
-    throw error;
-  }
-};
-
-const handleCoHostRequestCancelled = ({ inviter }: { inviter: SeatUserInfo }) => {
-  if (!pkUserIds.has(inviter.userId)) {
-    return;
-  }
-  pkUserIds.delete(inviter.userId);
-};
-
-const handleCoHostRequestRejected = ({ invitee }: { invitee: SeatUserInfo }) => {
-  if (!pkUserIds.has(invitee.userId)) {
-    return;
-  }
-  pkUserIds.delete(invitee.userId);
-  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 || invitee.userId}) });
-  }
-};
-
-onMounted(() => {
-  subscribeCoHostEvent(CoHostEvent.onCoHostRequestAccepted, handleCoHostRequestAccepted);
-  subscribeCoHostEvent(CoHostEvent.onCoHostRequestCancelled, handleCoHostRequestCancelled);
-  subscribeCoHostEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
-  subscribeCoHostEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
-});
-
-onUnmounted(() => {
-  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestAccepted, handleCoHostRequestAccepted);
-  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestCancelled, handleCoHostRequestCancelled);
-  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
-  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
-});
 </script>
 
-<style lang="scss">
-.exit-co-host-dialog {
-  width: 300px;
-  border-radius: 16px;
-  border: 1px solid var(--stroke-color-module);
-  background: var(--bg-color-operate);
-  box-shadow: 0 1px 8px 0 var(---Black-5), 0 4px 12px 0 var(---Black-5), 0 10px 30px 0 var(---Black-5);
-}
-</style>
-
 <style scoped lang="scss">
 .battle-panel {
   width: 100%;
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/CoHostPanel.vue b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/CoHostPanel.vue
index b990779..a12d8ed 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/CoHostPanel.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/CoHostPanel.vue
@@ -1,231 +1,306 @@
 <template>
-  <div />
+  <TUIDialog
+    :title="title"
+    :visible="props.visible"
+    :custom-classes="['co-host-dialog']"
+    @close="close"
+    @confirm="close"
+    @cancel="close"
+  >
+    <template #header>
+      <div class="dialog-header">
+        <span class="dialog-title">{{ title }}</span>
+        <div class="icon-buttons">
+          <IconLiveSetting
+            v-if="!inPk && !inConnection"
+            class="icon-button"
+            size="20"
+            @click="settingVisible = true"
+          />
+          <IconClose class="icon-button" @click="close" />
+        </div>
+      </div>
+    </template>
+    <div class="panel-content">
+      <div v-if="!inConnection && !inPk" class="panel-header">
+        <div class="tabs">
+          <span :class="['tab-item', { active: activeTab === 'battleTab' }]" @click="activeTab = 'battleTab'">
+            {{ t('Host Battle') }}
+          </span>
+          <span :class="['tab-item', { active: activeTab === 'coHostTab' }]" @click="activeTab = 'coHostTab'">
+            {{ t('Host Connection') }}
+          </span>
+        </div>
+      </div>
+      <div class="panel-body">
+        <div v-show="activeTab === 'battleTab'" class="battle-content">
+          <BattlePanel :currentLiveOrientation="currentLiveOrientation" :battleDuration="configForm.battleDuration" :coHostLayoutTemplate="configForm.coHostLayoutTemplate" />
+        </div>
+        <div v-show="activeTab === 'coHostTab'" class="coHost-content">
+          <ConnectionPanel :currentLiveOrientation="currentLiveOrientation" :battleDuration="configForm.battleDuration" :coHostLayoutTemplate="configForm.coHostLayoutTemplate" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div />
+    </template>
+    <ConfigSettingPanel
+      v-model:visible="settingVisible"
+      :form="configForm"
+      :currentLiveOrientation="currentLiveOrientation"
+      @confirm="handleSettingConfirm"
+    />
+  </TUIDialog>
 </template>
-<!--<template>-->
-<!--  <TUIDialog-->
-<!--    :title="title"-->
-<!--    :visible="props.visible"-->
-<!--    :custom-classes="['co-host-dialog']"-->
-<!--    @close="close"-->
-<!--    @confirm="close"-->
-<!--    @cancel="close"-->
-<!--  >-->
-<!--    <template #header>-->
-<!--      <div class="dialog-header">-->
-<!--        <span class="dialog-title">{{ title }}</span>-->
-<!--        <div class="icon-buttons">-->
-<!--          <IconLiveSetting-->
-<!--            v-if="!inPk && !inConnection"-->
-<!--            class="icon-button"-->
-<!--            size="20"-->
-<!--            @click="settingVisible = true"-->
-<!--          />-->
-<!--          <IconClose class="icon-button" @click="close" />-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </template>-->
-<!--    <div class="panel-content">-->
-<!--      <div v-if="!inConnection && !inPk" class="panel-header">-->
-<!--        <div class="tabs">-->
-<!--          <span :class="['tab-item', { active: activeTab === 'battleTab' }]" @click="activeTab = 'battleTab'">-->
-<!--            {{ t('Host Battle') }}-->
-<!--          </span>-->
-<!--          <span :class="['tab-item', { active: activeTab === 'coHostTab' }]" @click="activeTab = 'coHostTab'">-->
-<!--            {{ t('Host Connection') }}-->
-<!--          </span>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div class="panel-body">-->
-<!--        <div v-show="activeTab === 'battleTab'" class="battle-content">-->
-<!--          <BattlePanel :battle-duration="configForm.battleDuration" :coHostLayoutTemplate="configForm.coHostLayoutTemplate" />-->
-<!--        </div>-->
-<!--        <div v-show="activeTab === 'coHostTab'" class="coHost-content">-->
-<!--          <ConnectionPanel :battleDuration="configForm.battleDuration" :coHostLayoutTemplate="configForm.coHostLayoutTemplate" />-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <template #footer>-->
-<!--      <div />-->
-<!--    </template>-->
-<!--    <ConfigSettingPanel-->
-<!--      v-model:visible="settingVisible"-->
-<!--      :form="configForm"-->
-<!--      @confirm="handleSettingConfirm"-->
-<!--    />-->
-<!--  </TUIDialog>-->
-<!--</template>-->
-
-<!--<script setup lang="ts">-->
-<!--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';-->
-<!--import ConnectionPanel from './ConnectionPanel.vue';-->
-
-<!--const { t } = useUIKit();-->
-<!--const props = defineProps<{-->
-<!--  visible: boolean;-->
-<!--}>();-->
-<!--const { loginUserInfo } = useLoginState();-->
-<!--const { coHostStatus } = useCoHostState();-->
-<!--const { battleUsers } = useBattleState();-->
-<!--const emit = defineEmits(['update:visible']);-->
-<!--const close = () => {-->
-<!--  emit('update:visible', false);-->
-<!--};-->
-<!--const activeTab = ref('battleTab');-->
-<!--const settingVisible = ref(false);-->
-<!--const inConnection = computed(() => coHostStatus.value === CoHostStatus.Connected);-->
-<!--const inPk = computed(() => battleUsers.value.some(user => user.userId === loginUserInfo.value?.userId));-->
-
-<!--const title = computed(() => {-->
-<!--  if (inPk.value) {-->
-<!--    return t('Anchor battling...');-->
-<!--  }-->
-
-<!--  if (inConnection.value) {-->
-<!--    return t('Anchor connecting...');-->
-<!--  }-->
-<!--  return t('CoHost');-->
-<!--});-->
-
-<!--const configForm = ref({-->
-<!--  battleDuration: 5 * 60,-->
-<!--  coHostLayoutTemplate: CoHostLayoutTemplate.HostDynamicGrid,-->
-<!--});-->
-
-<!--const handleSettingConfirm = (form: {-->
-<!--  battleDuration: number;-->
-<!--  coHostLayoutTemplate: CoHostLayoutTemplate;-->
-<!--}) => {-->
-<!--  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);-->
-<!--    activeTab.value = 'battleTab';-->
-<!--  }-->
-<!--  if (newVal !== oldVal && !newVal) {-->
-<!--    activeTab.value = 'coHostTab';-->
-<!--  }-->
-<!--}, {-->
-<!--  immediate: true,-->
-<!--});-->
-<!--</script>-->
-
-<!--<style lang="scss" scoped>-->
-<!--.dialog-header {-->
-<!--  display: flex;-->
-<!--  align-items: center;-->
-<!--  padding: 0;-->
-<!--  width: 100%;-->
-<!--  justify-content: space-between;-->
-
-<!--  .dialog-title {-->
-<!--    font-size: 16px;-->
-<!--    line-height: 24px;-->
-<!--    font-weight: 600;-->
-<!--    color: var(&#45;&#45;text-color-primary);-->
-<!--  }-->
-<!--  .icon-buttons {-->
-<!--    display: flex;-->
-<!--    align-items: center;-->
-<!--    gap: 8px;-->
-<!--  }-->
-<!--  .icon-button {-->
-<!--    cursor: pointer;-->
-<!--  }-->
-<!--}-->
-<!--.panel-content {-->
-<!--  position: relative;-->
-<!--  overflow: hidden;-->
-<!--  display: flex;-->
-<!--  flex-direction: column;-->
-<!--  width: 100%;-->
-<!--  height: 100%;-->
-<!--  min-height: 200px;-->
-<!--  max-height: 530px;-->
-
-<!--  .panel-header {-->
-<!--    display: flex;-->
-<!--    align-items: center;-->
-
-<!--    .tabs {-->
-<!--      display: flex;-->
-<!--      gap: 24px;-->
-<!--      flex-grow: 1;-->
-
-<!--      .tab-item {-->
-<!--        background: none;-->
-<!--        border: none;-->
-<!--        color: var(&#45;&#45;text-color-secondary);-->
-<!--        font-size: 16px;-->
-<!--        padding: 12px 0;-->
-<!--        cursor: pointer;-->
-<!--        position: relative;-->
-<!--        transition: color 0.3s ease;-->
-<!--        user-select: none;-->
-
-<!--        &.active {-->
-<!--          color: var(&#45;&#45;text-color-link);-->
-<!--          font-weight: 500;-->
-
-<!--          &::after {-->
-<!--            content: '';-->
-<!--            position: absolute;-->
-<!--            bottom: 0;-->
-<!--            left: 0;-->
-<!--            right: 0;-->
-<!--            height: 3px;-->
-<!--            background-color: var(&#45;&#45;text-color-link);-->
-<!--            border-radius: 1.5px;-->
-<!--          }-->
-<!--        }-->
-<!--      }-->
-<!--    }-->
-<!--  }-->
-
-<!--  .panel-body {-->
-<!--    flex: 1;-->
-<!--    display: flex;-->
-<!--    flex-direction: column;-->
-<!--    overflow: auto;-->
-
-<!--    &::-webkit-scrollbar {-->
-<!--      width: 4px;-->
-<!--    }-->
-
-<!--    &::-webkit-scrollbar-thumb {-->
-<!--      background: #414756;-->
-<!--      border-radius: 2px;-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-
-<!--.battle-content,-->
-<!--.coHost-content {-->
-<!--  display: flex;-->
-<!--  flex-direction: column;-->
-<!--  gap: 12px;-->
-<!--  width: 100%;-->
-<!--  height: 100%;-->
-<!--  overflow: hidden;-->
-<!--}-->
-
-<!--:deep(.co-host-dialog) {-->
-<!--  width: 520px;-->
-<!--}-->
-<!--</style>-->
+
 <script setup lang="ts">
+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 { useLiveListState } from '../../states/LiveListState';
+import { CoHostStatus, CoHostLayoutTemplate, LiveOrientation } from '../../types';
+import BattlePanel from './BattlePanel.vue';
+import ConfigSettingPanel from './ConfigSettingPanel.vue';
+import ConnectionPanel from './ConnectionPanel.vue';
+
+const { t } = useUIKit();
+const props = defineProps<{
+  visible: boolean;
+}>();
+const { loginUserInfo } = useLoginState();
+const { currentLive } = useLiveListState();
+const { coHostStatus, connected, getCoHostCandidates } = useCoHostState();
+const { battleUsers } = useBattleState();
+const emit = defineEmits(['update:visible']);
+const close = () => {
+  emit('update:visible', false);
+};
+const activeTab = ref('coHostTab');
+const settingVisible = ref(false);
+const inConnection = computed(() => coHostStatus.value === CoHostStatus.Connected);
+const inPk = computed(() => battleUsers.value.some(user => user.userId === loginUserInfo.value?.userId));
+
+const title = computed(() => {
+  if (inPk.value) {
+    return t('Anchor battling...');
+  }
+
+  if (inConnection.value) {
+    return t('Anchor connecting...');
+  }
+  return t('CoHost');
+});
+
+const configForm = ref({
+  battleDuration: 5 * 60,
+  coHostLayoutTemplate: CoHostLayoutTemplate.HostDynamicGrid,
+});
+
+// Determine the current live orientation based on layoutTemplate range.
+// Landscape templates fall within [200, 599]; portrait otherwise.
+const currentLiveOrientation = computed(() => {
+  const layout = currentLive.value?.layoutTemplate;
+  if (typeof layout === 'number' && layout >= 200 && layout <= 599) {
+    return LiveOrientation.Landscape;
+  }
+  return LiveOrientation.Portrait;
+});
+
+// Keep `configForm.coHostLayoutTemplate` in sync with the current live
+// orientation so that:
+//   1) Opening the settings dialog always shows a default option highlighted
+//      (the bug was: form stuck on `HostDynamicGrid` while landscape only
+//      offers `HostVideoLandscapeFixed2Seats`, leaving nothing selected).
+//   2) The actual `requestHostConnection` / battle requests use a template
+//      that is valid for the running live's orientation.
+// We only override the template when the current value is not legal for the
+// new orientation; in portrait this preserves the user's choice between the
+// 9-grid and 1v6 layouts across re-opens of the dialog.
+watch(currentLiveOrientation, (orientation) => {
+  if (orientation === LiveOrientation.Landscape) {
+    if (configForm.value.coHostLayoutTemplate !== CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats) {
+      configForm.value.coHostLayoutTemplate = CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats;
+    }
+  } else if (configForm.value.coHostLayoutTemplate === CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats) {
+    // Coming back to a portrait live after using the landscape-only template:
+    // fall back to the portrait default so the dialog has a valid selection.
+    configForm.value.coHostLayoutTemplate = CoHostLayoutTemplate.HostDynamicGrid;
+  }
+}, { immediate: true });
+
+const handleSettingConfirm = (form: {
+  battleDuration: number;
+  coHostLayoutTemplate: CoHostLayoutTemplate;
+}) => {
+  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);
+    activeTab.value = 'battleTab';
+    return;
+  }
+  if (oldVal === true) {
+    activeTab.value = 'coHostTab';
+  }
+});
+
+// Refresh the candidate host list whenever the panel transitions to visible.
+// Without this, reopening the panel keeps a stale snapshot — for example, a
+// host whose connection was just ended would not reappear in "Recommend
+// hosts" until the user manually pulled to refresh. We swallow errors here
+// because RecommendHostList already surfaces a toast when the user explicitly
+// refreshes; this best-effort sync on open should never block the dialog.
+//
+// Side-effect note: passing '' resets the candidates pagination cursor in
+// the kit store. If the user had paged past the first screen before closing
+// the panel, that scroll position is discarded on reopen — we trade scroll
+// retention for "just-disconnected host shows up at the top", which is the
+// higher-priority UX here.
+watch(() => props.visible, (newVisible) => {
+  if (!newVisible) return;
+  getCoHostCandidates('').catch((error) => {
+    console.warn('[CoHostPanel] refresh candidates on open failed', error);
+  });
+});
+
+// Refresh candidates whenever the connected list shrinks (i.e. someone just
+// disconnected). The kit's connection user-list event handler only removes
+// joiners from candidates; it does NOT add disconnected hosts back. Pulling
+// a fresh page here makes the host who just left reappear so they can be
+// re-invited, without the user having to close/reopen the panel. Gated on
+// `props.visible` so we don't burn rate-limit budget while the panel is
+// closed.
+//
+// Edge case: this only fires on a net length decrease. A same-tick join+leave
+// (e.g. SDK batches `connectionUserListChanged` with both add and remove in
+// one event) leaves `connected.length` unchanged and the watcher is silent.
+// Acceptable trade-off — RecommendHostList's manual refresh button is the
+// fallback for this rare case. If misses become noticeable in production,
+// switch to `watch(connected, …, { deep: true })` with a Set diff against
+// previous user ids to detect leavers regardless of net length.
+watch(() => connected.value.length, (newCount, oldCount) => {
+  if (!props.visible) return;
+  if (newCount >= oldCount) return;
+  getCoHostCandidates('').catch((error) => {
+    console.warn('[CoHostPanel] refresh candidates after disconnect failed', error);
+  });
+});
 </script>
+
+<style lang="scss" scoped>
+.dialog-header {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  width: 100%;
+  justify-content: space-between;
+
+  .dialog-title {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--text-color-primary);
+  }
+  .icon-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .icon-button {
+    cursor: pointer;
+  }
+}
+.panel-content {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  max-height: 530px;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+
+    .tabs {
+      display: flex;
+      gap: 24px;
+      flex-grow: 1;
+
+      .tab-item {
+        background: none;
+        border: none;
+        color: var(--text-color-secondary);
+        font-size: 16px;
+        padding: 12px 0;
+        cursor: pointer;
+        position: relative;
+        transition: color 0.3s ease;
+        user-select: none;
+
+        &.active {
+          color: var(--text-color-link);
+          font-weight: 500;
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background-color: var(--text-color-link);
+            border-radius: 1.5px;
+          }
+        }
+      }
+    }
+  }
+
+  .panel-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #414756;
+      border-radius: 2px;
+    }
+  }
+}
+
+.battle-content,
+.coHost-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+:deep(.co-host-dialog) {
+  width: 520px;
+
+  > .tui-dialog-header {
+    padding-right: 0;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConfigSettingPanel.vue b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConfigSettingPanel.vue
index 1761432..d762504 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConfigSettingPanel.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConfigSettingPanel.vue
@@ -2,9 +2,9 @@
   <TUIDialog
     v-model:visible="dialogVisible"
     :title="t('Anchor battle settings')"
-    :confirmText="t('Confirm')"
-    :cancelText="t('Cancel')"
     :custom-classes="['co-host-dialog']"
+    :confirm-text="t('Confirm')"
+    :cancel-text="t('Cancel')"
     @cancel="cancel"
     @confirm="confirm"
   >
@@ -68,7 +68,7 @@
 <script setup lang="ts">
 import { defineProps, defineEmits, ref, watch, computed } from 'vue';
 import { useUIKit, TUIDialog, IconDynamic1v6Layout, IconDynamicGridLayout } from '@tencentcloud/uikit-base-component-vue3';
-import { CoHostLayoutTemplate } from '../../types';
+import { CoHostLayoutTemplate, LiveOrientation } from '../../types';
 
 const { t } = useUIKit();
 const props = defineProps<{
@@ -77,6 +77,7 @@ const props = defineProps<{
     coHostLayoutTemplate: CoHostLayoutTemplate;
     battleDuration: number;
   };
+  currentLiveOrientation: LiveOrientation;
 }>();
 const emit = defineEmits(['update:visible', 'cancel', 'confirm']);
 
@@ -118,14 +119,30 @@ watch(dialogVisible, (newVal) => {
   emit('update:visible', newVal);
 });
 
-const layoutOptions = computed(() => [
-  {
-    id: 'PortraitDynamic_Grid9',
-    icon: IconDynamicGridLayout,
-    templateId: CoHostLayoutTemplate.HostDynamicGrid,
-    label: t('Dynamic Grid9 Layout'),
-  },
-]);
+const layoutOptions = computed(() => {
+  if (props.currentLiveOrientation === LiveOrientation.Landscape) {
+    return [{
+      id: 'HostVideoLandscapeFixed2Seats',
+      icon: IconDynamicGridLayout,
+      templateId: CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats,
+      label: t('Landscape Fixed 2 Seats Layout'),
+    }]
+  } else {
+    return [{
+      id: 'PortraitDynamic_Grid9',
+      icon: IconDynamicGridLayout,
+      templateId: CoHostLayoutTemplate.HostDynamicGrid,
+      label: t('Dynamic Grid9 Layout'),
+    },
+    // {
+    //   id: 'PortraitDynamic_1v6',
+    //   icon: IconDynamic1v6Layout,
+    //   templateId: CoHostLayoutTemplate.HostDynamic1v6,
+    //   label: t('Dynamic 1v6 Layout'),
+    // }
+  ];
+  }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConnectionPanel.vue b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConnectionPanel.vue
index 69cc975..0a604a7 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConnectionPanel.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/ConnectionPanel.vue
@@ -27,7 +27,16 @@
             <div class="user-info">
               <span class="user-name">{{ user.userName || user.userId }}</span>
             </div>
-            <div class="user-status">
+            <div class="user-actions" v-if="user.userId !== loginUserInfo?.userId">
+              <TUIButton
+                size="small"
+                :type="isMuted(user.liveId) ? 'primary' : 'default'"
+                @click="handleToggleMuteHost(user)"
+              >
+                {{ isMuted(user.liveId) ? t('Unmute Audio') : t('Mute Audio') }}
+              </TUIButton>
+            </div>
+            <div v-else class="user-status">
               {{ t('Connecting') }}...
             </div>
           </div>
@@ -47,6 +56,7 @@
           v-if="!isUserInvited(user.userId, user.liveId)"
           size="small"
           :type="coHostStatus === CoHostStatus.Connected ? 'default' : 'primary'"
+          :disabled="pendingInviteLiveIds.has(user.liveId) || hasPendingBattleInvite"
           @click="handleSendCoHostRequest(user)"
         >
           {{ t('Invite connection') }}
@@ -63,16 +73,30 @@
     </RecommendHostList>
   </div>
   <div v-if="coHostStatus === CoHostStatus.Connected" class="connection-panel-footer">
-    <TUIButton :color="'red'" @click="showExitCoHostDialog = true">
+    <!-- Disable "Exit connection" during the two-phase Battle-tab auto-start
+         window (connection established but `onBattleStarted` not yet fired,
+         see battleAutoStart.ts): leaving now would tear down the connection
+         mid hand-off and abort the PK. `isBattleAutoStartInProgress` covers the
+         inviter side; `isPendingBattleAsReceiver` covers the invitee side (a
+         connection accepted from a withBattle invite), both share the same
+         two-phase window. Reuses the same flags as "Start battle". -->
+    <TUIButton :color="'red'" :disabled="isBattleAutoStartInProgress || isPendingBattleAsReceiver" @click="showExitCoHostDialog = true">
       {{ t('Exit connection') }}
     </TUIButton>
     <template v-if="!currentBattleInfo?.battleId">
-      <TUIButton type="primary" @click="handleBattleRequest" v-if="!inPk && battleRequestList.size === 0">
+      <!-- Connected hosts auto-accept the PK: `handleBattleRequest` issues
+           `requestBattle` with `needResponse: false`, so the receiver gets no
+           accept/reject prompt and the battle starts immediately. There is
+           therefore no pending invitation to revoke, so no "Cancel battle"
+           button is shown here. -->
+      <TUIButton
+        type="primary"
+        :disabled="isSendingBattleRequest || hasPendingConnectionInvite || isBattleAutoStartInProgress || isPendingBattleAsReceiver"
+        @click="handleBattleRequest"
+        v-if="!inPk"
+      >
         {{ t('Start battle') }}
       </TUIButton>
-      <TUIButton @click="handleCancelBattleRequest" v-if="!inPk && battleRequestList.size > 0">
-        {{ t('Cancel battle') }}
-      </TUIButton>
     </template>
   </div>
   <TUIDialog
@@ -80,7 +104,7 @@
     :showClose="false"
     :modal="false"
     :customClasses="['exit-co-host-dialog']"
-    @confirm="exitHostConnection"
+    @confirm="handleExitCoHost"
     @cancel="showExitCoHostDialog = false"
   >
     {{ t('Are you sure you want to exit the connection') }}
@@ -103,22 +127,212 @@
   </TUIDialog>
 </template>
 
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { TUIBattleInfo, TUIConnectionCode } from '@tencentcloud/tuiroom-engine-electron';
-import { TUIButton, TUIToast, useUIKit, TOAST_TYPE, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
+<script lang="ts">
+// ----------------------------------------------------------------------------
+// Module-level battle-request bookkeeping for the connection panel.
+//
+// Why a separate `<script>` block (not `<script setup>`)?
+//   The parent CoHostPanel dialog uses `v-if` internally, so closing it
+//   unmounts ConnectionPanel. If the "Start battle" pending state lived in
+//   `<script setup>` (per-instance refs) it would be destroyed on unmount and
+//   reset to empty on the next mount, flipping the footer button back to
+//   "Start battle" even though an outstanding battle invitation is still
+//   pending on the SDK side. Declaring the state at module level makes it
+//   survive every panel mount/unmount cycle.
+//
+//   For the same reason the battle-request event handlers are subscribed once
+//   here at module evaluation: handlers registered in `onMounted` stop firing
+//   while the panel is closed, so accept/reject/timeout/started/ended would be
+//   missed and the pending state could never be cleared.
+//
+// Mirrors the established pattern in `BattlePanel.vue` (see its top `<script>`
+// block) and is kept aligned with the Web kit's ConnectionPanel.vue.
+// ----------------------------------------------------------------------------
+import { ref, watch } from 'vue';
 import { useBattleState } from '../../states/BattleState';
 import { useCoHostState } from '../../states/CoHostState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
-import { CoHostLayoutTemplate, CoHostStatus, CoHostEvent, BattleEvent } from '../../types';
+import { BattleEvent, CoHostStatus, CoHostEvent } from '../../types';
+import type { SeatUserInfo as ModuleSeatUserInfo } from '../../types';
+
+// Tracks the invitees of the battle invitation that the local host initiated
+// from the connection panel via "Start battle", plus the associated battleId.
+// Module-level so the footer "Start battle / Cancel battle" toggle survives the
+// CoHostPanel dialog's v-if unmount/remount.
+const battleRequestList = ref<Set<string>>(new Set());
+const requestBattleId = ref('');
+
+// In-flight guard for the manual "Start battle" action. Declared at module
+// level (not in `<script setup>`) so the guard survives the CoHostPanel
+// dialog's v-if unmount/remount and, more importantly, stays locked across the
+// whole `requestBattle resolve -> onBattleStarted` window. On success it is
+// intentionally NOT released in `handleBattleRequest`; it is only cleared by
+// `resetConnectionBattleRequestState` (started / ended / session boundary) or
+// on failure, so a second click during that async gap cannot re-issue the
+// request. Mirrors the `isFiringAggregatedBattle` pattern used for auto-start.
+const isSendingBattleRequest = ref(false);
+
+// Receiver-side counterpart of the inviter's `isBattleAutoStartInProgress`
+// (battleAutoStart.ts). A PK started via "Invite battle" reaches the invitee
+// first as a plain co-host request carrying `extensionInfo.withBattle: true`;
+// the PK itself only begins later when the inviter fires the aggregated
+// `requestBattle` (onBattleStarted). Between the invitee accepting
+// (coHostStatus -> Connected, which auto-switches this panel to the connection
+// tab) and onBattleStarted, the footer briefly shows an enabled
+// "Exit connection" / "Start battle" pair. Acting in that window tears down the
+// hand-off and aborts the PK, so both buttons must be disabled here too.
+// Module-level so it survives the CoHostPanel dialog's v-if unmount/remount.
+const isPendingBattleAsReceiver = ref(false);
+// Set when the most recent inbound co-host invite carried withBattle=true, and
+// consumed on the next coHostStatus -> Connected transition to raise
+// `isPendingBattleAsReceiver`. A plain invite (withBattle=false), a
+// cancelled/timed-out invite, or initiating our own outbound request clears it
+// so a later plain co-host connection never inherits the receiver guard.
+const receiverBattleInvitePending = ref(false);
+
+// Module-level composable reads (mirrors BattlePanel.vue): grabbing these
+// refs/functions outside any component instance is intentional so they survive
+// the panel's mount/unmount cycles. The returned values are nanostore-backed,
+// so reading `.value` and `watch`-ing them works without a component scope.
+const { subscribeEvent: subscribeBattleEventAtModule } = useBattleState();
+const { loginUserInfo: moduleLoginUserInfo } = useLoginState();
+const { coHostStatus: moduleCoHostStatus, subscribeEvent: subscribeCoHostEventAtModule } = useCoHostState();
+const { currentLive: moduleCurrentLive } = useLiveListState();
+
+// Clear the pending battle-request state. Called when the round resolves
+// (started/ended) and as a defensive reset when the local host leaves the
+// co-host connection or the live room (see the watchers below), so a stale
+// "Cancel battle" state never leaks into the next session.
+const resetConnectionBattleRequestState = () => {
+  requestBattleId.value = '';
+  battleRequestList.value.clear();
+  // Release the manual "Start battle" in-flight guard here: this is the single
+  // place that clears it on success, covering started / ended / disconnect /
+  // live-end so the button never stays stuck disabled into the next session.
+  isSendingBattleRequest.value = false;
+  // Clear the Battle-tab auto-start flag too, so a session boundary
+  // (disconnect / live-end) or a started/ended battle never leaves the
+  // Connection panel's "Start battle" button stuck disabled.
+  resetBattleAutoStart();
+  // Clear the receiver-side two-phase battle guard as well, so a started/ended
+  // PK or a session boundary (disconnect / live-end) never leaves the
+  // receiver's "Exit connection" / "Start battle" buttons stuck disabled.
+  isPendingBattleAsReceiver.value = false;
+  receiverBattleInvitePending.value = false;
+};
+
+const onBattleRequestAccept = (eventInfo: { battleId: string; inviter: ModuleSeatUserInfo; invitee: ModuleSeatUserInfo }) => {
+  if (eventInfo.inviter.userId === moduleLoginUserInfo.value?.userId) {
+    battleRequestList.value.delete(eventInfo.invitee.userId);
+  }
+};
+
+const onBattleRequestRejected = (eventInfo: { battleId: string; inviter: ModuleSeatUserInfo; invitee: ModuleSeatUserInfo }) => {
+  if (eventInfo.inviter.userId === moduleLoginUserInfo.value?.userId) {
+    battleRequestList.value.delete(eventInfo.invitee.userId);
+  }
+};
+
+const onBattleRequestTimeout = (eventInfo: { battleId: string; inviter: ModuleSeatUserInfo; invitee: ModuleSeatUserInfo }) => {
+  if (eventInfo.inviter.userId === moduleLoginUserInfo.value?.userId) {
+    battleRequestList.value.delete(eventInfo.invitee.userId);
+  }
+};
+
+const onBattleStarted = () => {
+  resetConnectionBattleRequestState();
+};
+
+const onBattleEnded = () => {
+  resetConnectionBattleRequestState();
+};
+
+// Receiver-side battle detection: an "Invite battle" arrives on the invitee as
+// a plain co-host request whose extensionInfo carries `withBattle: true`.
+// Record the marker; it is consumed on the next coHostStatus -> Connected
+// transition below to raise `isPendingBattleAsReceiver`.
+const onCoHostRequestReceivedAsReceiver = ({ extensionInfo }: { inviter: ModuleSeatUserInfo; extensionInfo: string }) => {
+  let withBattle = false;
+  try {
+    withBattle = Boolean(extensionInfo && JSON.parse(extensionInfo)?.withBattle);
+  } catch (e) {
+    // Malformed extensionInfo: treat it as a plain co-host invite.
+  }
+  // Latest invite wins: a plain co-host invite must clear a stale PK marker.
+  receiverBattleInvitePending.value = withBattle;
+};
+
+// The withBattle invite was cancelled by the inviter or timed out before we
+// accepted it: drop the marker so a later plain co-host connection is not
+// mistaken for a battle hand-off.
+const onCoHostRequestGoneAsReceiver = () => {
+  receiverBattleInvitePending.value = false;
+};
+
+// One-shot subscription at module load. Intentionally not paired with an
+// unsubscribe: the handlers only mutate module-level state and must keep
+// firing while the panel is unmounted; the module lives for the whole page.
+subscribeBattleEventAtModule(BattleEvent.onBattleRequestAccept, onBattleRequestAccept);
+subscribeBattleEventAtModule(BattleEvent.onBattleRequestReject, onBattleRequestRejected);
+subscribeBattleEventAtModule(BattleEvent.onBattleRequestTimeout, onBattleRequestTimeout);
+subscribeBattleEventAtModule(BattleEvent.onBattleStarted, onBattleStarted);
+subscribeBattleEventAtModule(BattleEvent.onBattleEnded, onBattleEnded);
+
+// Receiver-side subscriptions (see `isPendingBattleAsReceiver`). Same one-shot,
+// never-unsubscribed module-level pattern as the battle handlers above: the
+// withBattle invite typically arrives with the CoHost panel closed, so these
+// must fire while the panel is unmounted.
+subscribeCoHostEventAtModule(CoHostEvent.onCoHostRequestReceived, onCoHostRequestReceivedAsReceiver);
+subscribeCoHostEventAtModule(CoHostEvent.onCoHostRequestCancelled, onCoHostRequestGoneAsReceiver);
+subscribeCoHostEventAtModule(CoHostEvent.onCoHostRequestTimeout, onCoHostRequestGoneAsReceiver);
+
+// Defensive cleanup gates, aligned with `resetBattleState`'s triggers in
+// BattleState: drop any pending battle-request state when the local host
+// leaves the co-host connection or exits the live room, so the next session
+// never opens the panel showing a stale "Cancel battle" button. Module-level
+// `watch` (no auto-dispose) is intentional and matches BattleState.ts.
+watch(moduleCoHostStatus, (status) => {
+  if (status === CoHostStatus.Connected) {
+    // Connection established. If it originated from a withBattle invite we
+    // received, raise the receiver-side two-phase guard; it is cleared later by
+    // resetConnectionBattleRequestState (onBattleStarted / onBattleEnded /
+    // session boundary).
+    if (receiverBattleInvitePending.value) {
+      isPendingBattleAsReceiver.value = true;
+      receiverBattleInvitePending.value = false;
+    }
+  } else if (status === CoHostStatus.Disconnected) {
+    resetConnectionBattleRequestState();
+  }
+});
+watch(() => moduleCurrentLive.value?.liveId, (liveId) => {
+  if (!liveId) {
+    resetConnectionBattleRequestState();
+  }
+});
+</script>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { TUIBattleCode, TUIBattleInfo, TUIConnectionCode } from '@tencentcloud/tuiroom-engine-electron';
+import { TUIButton, TUIToast, useUIKit, TOAST_TYPE, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
+// `useBattleState` / `useCoHostState` / `useLoginState`, as well as
+// `CoHostStatus` and `BattleEvent`, are already imported in the sibling
+// `<script>` block above; in a Vue SFC those top-level bindings are visible to
+// `<script setup>`, so re-importing them here would be a duplicate identifier.
+import { CoHostLayoutTemplate, LiveOrientation } from '../../types';
 import { Avatar } from '../Avatar';
 import RecommendHostList from './RecommendHostList.vue';
 import type { SeatUserInfo } from '../../types';
-import { ERROR_MESSAGE } from './constants';
+import { ERROR_MESSAGE, COHOST_REQUEST_TIMEOUT_SECONDS, BATTLE_REQUEST_TIMEOUT_SECONDS } from './constants';
+import { markInviteType, useInviteMutex } from './inviteMutex';
+import { useBattleAutoStart, resetBattleAutoStart } from './battleAutoStart';
 
 const props = defineProps<{
   battleDuration: number;
   coHostLayoutTemplate: CoHostLayoutTemplate;
+  currentLiveOrientation: LiveOrientation;
 }>();
 
 const { t } = useUIKit();
@@ -127,9 +341,11 @@ const {
   coHostStatus,
   connected,
   invitees,
+  mutedHosts,
   requestHostConnection,
   cancelHostConnection,
   exitHostConnection,
+  muteRemoteHostAudio,
   subscribeEvent,
   unsubscribeEvent,
 } = useCoHostState();
@@ -138,41 +354,112 @@ const {
   battleUsers,
   requestBattle,
   cancelBattleRequest,
-  subscribeEvent: subscribeBattleEvent,
-  unsubscribeEvent: unsubscribeBattleEvent,
 } = useBattleState();
 
+// In landscape mode, force the co-host layout to the fixed 2-seat landscape template.
+const effectiveCoHostLayoutTemplate = computed(() => {
+  if (props.currentLiveOrientation === LiveOrientation.Landscape) {
+    return CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats;
+  }
+  return props.coHostLayoutTemplate;
+});
+
 const seatNumber = computed(() => {
-  const seatNumberMap = {
+  const seatNumberMap: Record<CoHostLayoutTemplate, number> = {
     [CoHostLayoutTemplate.HostDynamicGrid]: 9,
     [CoHostLayoutTemplate.HostDynamic1v6]: 7,
+    [CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats]: 2,
   };
-  return seatNumberMap[props.coHostLayoutTemplate];
+  return seatNumberMap[effectiveCoHostLayoutTemplate.value];
 });
 
 const showExitCoHostDialog = ref(false);
-const battleRequestList = ref<Set<string>>(new Set());
-const requestBattleId = ref('');
 
 const isUserInvited = (userId: string, liveId: string) => invitees.value.some(user => user.userId === userId && user.liveId === liveId);
 const inPk = computed(() => battleUsers.value.some(user => user.userId === loginUserInfo.value?.userId));
 
+// Mutual exclusion with battle invites: while any "Invite battle" is still
+// pending, the "Invite connection" buttons are disabled (see inviteMutex.ts).
+// `hasPendingConnectionInvite` mirrors the reverse direction: while any
+// "Invite connection" is still pending, starting a PK is blocked so the host
+// cannot kick off a battle with only the already-connected hosts and leave a
+// later accepter stranded in plain co-host (AB in PK while BC co-host).
+const { hasPendingBattleInvite, hasPendingConnectionInvite } = useInviteMutex(invitees);
+
+// While a Battle-tab-initiated PK is auto-starting (co-host connection
+// established but `onBattleStarted` not yet fired, see battleAutoStart.ts),
+// disable "Start battle" so the user cannot fire a duplicate `requestBattle`
+// for the same round.
+const { isBattleAutoStartInProgress } = useBattleAutoStart();
+
 const sentCoHostRequestUserList = ref<Set<string>>(new Set());
+// Guard against double-clicking the "Invite connection" button: the button's
+// "invited" state flips to "Cancel invitation" only after `invitees` is
+// updated, which happens asynchronously once the SDK request resolves. During
+// that await window the button is still clickable, so a second click would
+// re-issue the request for the same liveId and the SDK returns an error code
+// (e.g. Connecting), surfacing a confusing "send failed" toast right after the
+// "send success" toast. We track the in-flight liveIds here to both disable
+// the button immediately and ignore re-entrant calls authoritatively.
+const pendingInviteLiveIds = ref<Set<string>>(new Set());
+// Map userId -> close() callback of the most recent "invitation sent" toast.
+// Used to dismiss the toast when the invitation is rejected/cancelled/timed
+// out, so the user does not see "invitation sent" and "invitation rejected"
+// at the same time (typically when invitee is busy on another connection).
+const sentToastHandles = ref<Map<string, () => void>>(new Map());
+
+const closeSentToast = (userId: string) => {
+  const close = sentToastHandles.value.get(userId);
+  if (close) {
+    try {
+      close();
+    } catch (e) {
+      // Ignore: toast may already be closed.
+    }
+    sentToastHandles.value.delete(userId);
+  }
+};
 
 const handleSendCoHostRequest = async (user: SeatUserInfo) => {
+  // Re-entrancy guard: ignore a second click while a request for the same
+  // liveId is still in flight (see `pendingInviteLiveIds` for details).
+  if (pendingInviteLiveIds.value.has(user.liveId)) {
+    return;
+  }
+  pendingInviteLiveIds.value.add(user.liveId);
+  // We are now the inviter, not an invitee: drop any stale receiver-side
+  // withBattle marker so this outbound connection can never be mistaken for a
+  // battle hand-off we were invited into.
+  receiverBattleInvitePending.value = false;
   try {
     const result = await requestHostConnection({
       liveId: user.liveId,
-      layoutTemplate: props.coHostLayoutTemplate,
-      timeout: 10,
+      layoutTemplate: effectiveCoHostLayoutTemplate.value,
+      timeout: COHOST_REQUEST_TIMEOUT_SECONDS,
       extensionInfo: JSON.stringify({
-        timeout: 10,
+        timeout: COHOST_REQUEST_TIMEOUT_SECONDS,
         withBattle: false,
       }),
     });
     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 || user.userId }) });
+      // Tag this liveId as a connection invite so all "Invite battle" buttons
+      // are disabled while it stays pending.
+      markInviteType(user.liveId, 'connection');
+      // Keep a handle to the "invitation sent" toast so we can close it later.
+      // When the invitee is already busy on another co-host connection, the
+      // SDK returns Success here and then fires `onConnectionRequestReject`
+      // almost immediately, which surfaces an "Invitation rejected" toast in
+      // the host app. To avoid showing two conflicting toasts at the same
+      // time, we proactively dismiss the "sent" toast on reject/timeout
+      // (see `handleCoHostRequestRejected` / `handleCoHostRequestTimeout`).
+      const sentToast = TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: t('Co-host invitation sent to user', { userName: user.userName || user.userId }),
+      });
+      if (sentToast?.close) {
+        sentToastHandles.value.set(user.userId, sentToast.close);
+      }
     } else {
       switch (result.get(user.liveId)) {
         case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
@@ -197,7 +484,12 @@ const handleSendCoHostRequest = async (user: SeatUserInfo) => {
     }
   } catch (error) {
     TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send co-host request failed') });
-    throw error;
+    console.warn('Send co-host request failed:', error);
+  } finally {
+    // Release the guard once the request settles. On success the button is
+    // already flipped to "Cancel invitation" by `invitees`; on failure it
+    // becomes clickable again so the user can retry.
+    pendingInviteLiveIds.value.delete(user.liveId);
   }
 };
 
@@ -205,117 +497,158 @@ const handleCancelCoHostRequest = async (user: SeatUserInfo) => {
   try {
     await cancelHostConnection({ liveId: user.liveId });
     sentCoHostRequestUserList.value.delete(user.userId);
+    closeSentToast(user.userId);
   } catch (error) {
     TUIToast({ type: TOAST_TYPE.ERROR, message: t('Cancel co-host request failed') });
-    throw error;
+    console.warn('Cancel co-host request failed:', error);
+  }
+};
+
+const isMuted = (liveId: string) => mutedHosts.value.includes(liveId);
+
+const handleToggleMuteHost = async (user: SeatUserInfo) => {
+  const muted = isMuted(user.liveId);
+  try {
+    // The store updates `mutedHosts` on success, so the toggle state
+    // persists across CoHostPanel dialog (v-if) close/reopen.
+    await muteRemoteHostAudio(user.liveId, !muted);
+  } catch (error) {
+    TUIToast({ type: TOAST_TYPE.ERROR, message: t('Mute failed') });
   }
 };
 
-const handleExitCoHost = () => {
+const handleExitCoHost = async () => {
+  // If a battle invitation initiated from the connection panel is still
+  // pending (sent via "Start battle" but not yet accepted), cancel it before
+  // leaving the connection. Otherwise a remote invitee could accept the battle
+  // after we have already exited and be wrongly pushed into the PK state.
+  if (requestBattleId.value && battleRequestList.value.size > 0) {
+    try {
+      await cancelBattleRequest({
+        battleId: requestBattleId.value,
+        userIdList: Array.from(battleRequestList.value),
+      });
+    } catch (error) {
+      console.warn('Cancel pending battle request on exit co-host failed:', error);
+    }
+    requestBattleId.value = '';
+    battleRequestList.value.clear();
+  }
   exitHostConnection();
   showExitCoHostDialog.value = false;
 };
 
 const handleBattleRequest = async () => {
+  if (isSendingBattleRequest.value) {
+    return;
+  }
+  // Defensive guard against a race where the button's :disabled state has not
+  // caught up yet: never start a PK while connection invites are still pending
+  // (accept / reject / cancel / timeout all clear them). Keeps the button-level
+  // disable and the handler-level guard in agreement.
+  if (hasPendingConnectionInvite.value) {
+    return;
+  }
+  // Defensive guard mirroring the button's :disabled state: never fire a manual
+  // PK while a Battle-tab-initiated PK is still auto-starting for the same
+  // round, otherwise the SDK rejects the duplicate `requestBattle` and a
+  // "Request battle failed" toast is shown (see battleAutoStart.ts).
+  if (isBattleAutoStartInProgress.value) {
+    return;
+  }
+  // Receiver-side counterpart of the guard above: while a PK we were invited
+  // into is still auto-starting (connection accepted, `onBattleStarted` not yet
+  // fired), block the manual "Start battle" so we cannot fire a duplicate
+  // `requestBattle` against the same round.
+  if (isPendingBattleAsReceiver.value) {
+    return;
+  }
+  isSendingBattleRequest.value = true;
   const userIdList = connected.value.filter(item => item.userId !== loginUserInfo.value?.userId).map(item => item.userId);
   try {
     const battleRes = await requestBattle({
       config: {
         duration: props.battleDuration,
-        needResponse: true,
+        // Connected hosts auto-join the PK without a per-invitee prompt: the
+        // receiver no longer gets `onBattleRequestReceived`, so no accept/reject
+        // dialog is shown and the battle starts immediately.
+        needResponse: false,
         extensionInfo: '',
       },
       userIdList,
-      timeout: 10,
+      timeout: 0,
     });
+    // `battleRes.result` maps each invitee userId to a `TUIBattleCode`. The
+    // request only counts as failed when every invitee failed (none returned
+    // `kSuccess`); if at least one invitee succeeded the battle is under way,
+    // so no error toast is shown.
+    const inviteeResults = (battleRes?.result ?? {}) as Record<string, TUIBattleCode>;
+    const resultCodes = Object.values(inviteeResults);
+    const allInviteesFailed = resultCodes.length > 0 && resultCodes.every(code => code !== TUIBattleCode.kSuccess);
+    if (allInviteesFailed) {
+      TUIToast.error({ message: t('Request battle failed') });
+      // Every invitee failed: release the guard so the host can retry.
+      isSendingBattleRequest.value = false;
+      return;
+    }
     requestBattleId.value = battleRes.battleId;
-    userIdList.forEach(userId => battleRequestList.value.add(userId))
+    // Only track invitees who actually accepted the request (returned
+    // `kSuccess`); invitees that failed must not be added to the pending list.
+    Object.entries(inviteeResults).forEach(([userId, code]) => {
+      if (code === TUIBattleCode.kSuccess) {
+        battleRequestList.value.add(userId);
+      }
+    })
+    // Success: intentionally keep `isSendingBattleRequest` locked. It is
+    // released only by `resetConnectionBattleRequestState` (onBattleStarted /
+    // onBattleEnded / session boundary), which closes the
+    // `resolve -> onBattleStarted` gap where `inPk` is still false and a second
+    // click could otherwise re-issue the request.
   } catch (error: any) {
     const message = t(ERROR_MESSAGE[error.code as keyof typeof ERROR_MESSAGE] || 'Request battle failed');
     TUIToast.error({ message });
+    // Request threw: release the guard so the host can retry.
+    isSendingBattleRequest.value = false;
   }
 };
 
-const handleCancelBattleRequest = async () => {
-  await cancelBattleRequest({
-    battleId: requestBattleId.value,
-    userIdList: Array.from(battleRequestList.value)
-  });
-  requestBattleId.value = '';
-  battleRequestList.value.clear();
-};
-
 const handleCoHostRequestAccepted = ({ invitee }: { invitee: SeatUserInfo }) => {
   if (sentCoHostRequestUserList.value.has(invitee.userId)) {
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
+  // Drop the toast handle without closing — the "invitation sent" toast can
+  // finish its normal life-cycle since the invitation was actually accepted.
+  sentToastHandles.value.delete(invitee.userId);
 };
 
 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 || invitee.userId }) });
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
+  // Dismiss the just-shown "invitation sent" toast to avoid showing it
+  // alongside the host app's "invitation rejected" toast.
+  closeSentToast(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 || invitee.userId }) });
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
-};
-
-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: { 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: { battleId: string, inviter: SeatUserInfo, invitee: SeatUserInfo }) => {
-  if (eventInfo.inviter.userId === loginUserInfo.value?.userId) {
-    battleRequestList.value.delete(eventInfo.invitee.userId);
+  if (inviter.userId === loginUserInfo.value?.userId) {
+    closeSentToast(invitee.userId);
   }
 };
 
-const onBattleStarted = () => {
-  requestBattleId.value = '';
-  battleRequestList.value.clear();
-}
-
-const onBattleEnded = () => {
-  requestBattleId.value = '';
-  battleRequestList.value.clear();
-}
-
 onMounted(() => {
   subscribeEvent(CoHostEvent.onCoHostRequestAccepted, handleCoHostRequestAccepted);
   subscribeEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
   subscribeEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
-
-  subscribeBattleEvent(BattleEvent.onBattleRequestAccept, onBattleRequestAccept);
-  subscribeBattleEvent(BattleEvent.onBattleRequestReject, onBattleRequestRejected);
-  subscribeBattleEvent(BattleEvent.onBattleRequestTimeout, onBattleRequestTimeout);
-  subscribeBattleEvent(BattleEvent.onBattleStarted, onBattleStarted);
-  subscribeBattleEvent(BattleEvent.onBattleEnded, onBattleEnded);
 });
 
 onUnmounted(() => {
   unsubscribeEvent(CoHostEvent.onCoHostRequestAccepted, handleCoHostRequestAccepted);
   unsubscribeEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
   unsubscribeEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
-
-  unsubscribeBattleEvent(BattleEvent.onBattleRequestAccept, onBattleRequestAccept);
-  unsubscribeBattleEvent(BattleEvent.onBattleRequestReject, onBattleRequestRejected);
-  unsubscribeBattleEvent(BattleEvent.onBattleRequestTimeout, onBattleRequestTimeout);
-  unsubscribeBattleEvent(BattleEvent.onBattleStarted, onBattleStarted);
-  unsubscribeBattleEvent(BattleEvent.onBattleEnded, onBattleEnded);
 });
 </script>
 
@@ -325,7 +658,9 @@ onUnmounted(() => {
   border-radius: 16px;
   border: 1px solid var(--stroke-color-module, #48494F);
   background: var(--bg-color-operate, #1F2024);
-  box-shadow: 0 1px 8px 0 var(---Black-5, rgba(0, 0, 0, 0.40)), 0 4px 12px 0 var(---Black-5, rgba(0, 0, 0, 0.40)), 0 10px 30px 0 var(---Black-5, rgba(0, 0, 0, 0.40));
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.40),
+              0 4px 12px 0 rgba(0, 0, 0, 0.40),
+              0 10px 30px 0 rgba(0, 0, 0, 0.40);
 }
 </style>
 
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/RecommendHostList.vue b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/RecommendHostList.vue
index d200b6b..93e0916 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/RecommendHostList.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/RecommendHostList.vue
@@ -7,7 +7,7 @@
       <div class="recommend-host-list-content" ref="recommendHostListContentRef">
         <div class="recommend-host-list">
           <div
-            v-for="user in [...invitees, ...candidates]"
+            v-for="user in displayUserList"
             :key="`${user.userId}-${user.liveId}`"
             class="user-item"
           >
@@ -55,13 +55,33 @@ import { IconRefresh, useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit
 import { TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useCoHostState } from '../../states/CoHostState';
-import { useLiveListState } from '../../states/LiveListState';
 import { Avatar } from '../Avatar';
 import { CoHostStatus } from '../../types';
 
 const { t } = useUIKit();
-const { liveListCursor, fetchLiveList } = useLiveListState();
-const { coHostStatus, invitees, candidates } = useCoHostState();
+const { coHostStatus, connected, invitees, candidates, candidatesCursor, getCoHostCandidates } = useCoHostState();
+
+/**
+ * Merge invitees and candidates into a unified list for rendering.
+ * - Exclude users that are already connected (they should not appear in "Invite more").
+ * - De-duplicate by `${userId}-${liveId}` so the same user never appears twice
+ *   when they exist in both `invitees` and `candidates`.
+ * Invitees come first to preserve the "already invited" visual order.
+ */
+const displayUserList = computed(() => {
+  const connectedKeys = new Set(connected.value.map(u => `${u.userId}-${u.liveId}`));
+  const seen = new Set<string>();
+  const result: typeof invitees.value = [];
+  for (const user of [...invitees.value, ...candidates.value]) {
+    const key = `${user.userId}-${user.liveId}`;
+    if (connectedKeys.has(key) || seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    result.push(user);
+  }
+  return result;
+});
 
 const recommendHostListContentRef = ref<HTMLElement | null>(null);
 const loadMoreRef = ref<HTMLElement | null>(null);
@@ -69,7 +89,7 @@ let intersectionObserver: IntersectionObserver | null = null;
 
 const refreshInviteesLoading = ref(false);
 const loadMoreLoading = ref(false);
-const hasMoreLive = computed(() => liveListCursor.value !== '');
+const hasMoreLive = computed(() => candidatesCursor.value !== '');
 async function handleRefreshInvitees() {
   refreshInviteesLoading.value = true;
   if (recommendHostListContentRef.value) {
@@ -77,10 +97,7 @@ async function handleRefreshInvitees() {
   }
   Promise.all([
     new Promise((resolve) => setTimeout(resolve, 500)),
-    fetchLiveList({
-      cursor: '',
-      count: 20,
-    }),
+    getCoHostCandidates(''),
   ])
   .catch(error => {
     if (error.code === TUIErrorCode.ERR_FREQ_LIMIT) {
@@ -101,10 +118,7 @@ onMounted(() => {
       if (item.isIntersecting && !loadMoreLoading.value && hasMoreLive.value) {
         loadMoreLoading.value = true;
         try {
-          await fetchLiveList({
-            cursor: liveListCursor.value,
-            count: 20,
-          });
+          await getCoHostCandidates(candidatesCursor.value);
         } catch (error) {
           console.error('Load more users failed:', error);
         } finally {
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/battleAutoStart.ts b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/battleAutoStart.ts
new file mode 100644
index 0000000..15ffbd9
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/battleAutoStart.ts
@@ -0,0 +1,57 @@
+import { ref, computed } from 'vue';
+
+// ----------------------------------------------------------------------------
+// Shared "battle auto-start in progress" signal between BattlePanel and
+// ConnectionPanel.
+//
+// Background:
+//   A PK initiated from the Battle tab is a two-phase flow. An "Invite battle"
+//   first establishes a plain co-host connection (`withBattle: true`), and only
+//   AFTER every accepter has actually connected does BattlePanel fire ONE
+//   aggregated `requestBattle` (`needResponse: false`) to truly start the PK.
+//   Between "connection established" and "onBattleStarted" the CoHostPanel
+//   auto-switches to the Connection tab, whose footer shows a "Start battle"
+//   button. Clicking it in that window issues a SECOND `requestBattle` for the
+//   same round, which the SDK rejects as a duplicate and surfaces a
+//   "Request battle failed" toast.
+//
+// Fix:
+//   BattlePanel owns the auto-start lifecycle and keeps this flag in sync at
+//   every transition of its round bookkeeping (invites pending, accepters
+//   waiting to connect, the connection-ready safety timer armed, or the
+//   aggregated requestBattle in flight). ConnectionPanel reads it to disable
+//   its "Start battle" button (and to guard the handler) for the whole
+//   auto-start window, so the two `requestBattle` paths can never collide.
+//   Note: this intentionally does NOT block sending more "Invite battle"
+//   invitations to other hosts — multiple hosts may be invited at once and
+//   every accepter joins the same aggregated PK.
+//
+// Why module-level + reactive:
+//   The CoHostPanel dialog uses an internal `v-if`, so both panels mount and
+//   unmount together; a module-level Vue `ref` is the single source of truth
+//   that survives those cycles and is shared across both panels. Mirrors the
+//   same pattern used by `inviteMutex.ts`.
+//
+// Mirrors the identical module in
+// `uikit-component-vue3/.../battleAutoStart.ts` to keep the three-end
+// (Web kit / Mac kit / Win demo) PK invite flow behavior aligned.
+// ----------------------------------------------------------------------------
+
+const battleAutoStartInProgress = ref(false);
+
+// Set by BattlePanel at every transition of its auto-start bookkeeping.
+export const setBattleAutoStartInProgress = (value: boolean) => {
+  battleAutoStartInProgress.value = value;
+};
+
+// Defensive reset, called when the local host leaves the co-host connection or
+// the live room (and when a battle starts/ends), so a stale flag can never
+// leave "Start battle" disabled into the next session.
+export const resetBattleAutoStart = () => {
+  battleAutoStartInProgress.value = false;
+};
+
+export const useBattleAutoStart = () => {
+  const isBattleAutoStartInProgress = computed(() => battleAutoStartInProgress.value);
+  return { isBattleAutoStartInProgress };
+};
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/constants.ts b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/constants.ts
index 2a67d0e..1d8488c 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/constants.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/constants.ts
@@ -1,3 +1,18 @@
 export const ERROR_MESSAGE = {
   100412: 'there is no one valid room for battle',
 };
+
+/**
+ * Default timeout (in seconds) for outbound co-host connection invitations
+ * dispatched via `requestHostConnection`. The same value is mirrored into
+ * `extensionInfo` so the invitee can render a matching countdown.
+ */
+export const COHOST_REQUEST_TIMEOUT_SECONDS = 30;
+
+/**
+ * Default timeout (in seconds) for outbound battle (PK) invitations
+ * dispatched via `requestBattle`. Kept as a separate constant from
+ * `COHOST_REQUEST_TIMEOUT_SECONDS` so the two flows can diverge later
+ * without affecting each other.
+ */
+export const BATTLE_REQUEST_TIMEOUT_SECONDS = 30;
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/en-US/index.ts b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/en-US/index.ts
index 3007f95..4884c0b 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/en-US/index.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/en-US/index.ts
@@ -1,7 +1,5 @@
 export const resource = {
   'Host Battle': 'Host Battle',
-  'Host Connection': 'Host Connection',
-  'CoHost': 'Co-host',
   'Current seat': 'Current seat',
   'Seat is empty': 'Seat is empty',
   'Invite more': 'Invite more',
@@ -16,6 +14,10 @@ export const resource = {
   'Exit connection': 'Exit connection',
   'No hosts available to invite': 'No hosts available to invite',
   'Disconnect': 'Disconnect',
+  // Co-host audio mute toggle. Dedicated keys so they never collide with the
+  // global 'Mute'/'Unmute' used by the audience chat-ban menu.
+  'Mute Audio': 'Mute Audio',
+  'Unmute Audio': 'Unmute Audio',
   'Cancel': 'Cancel',
   'Invite': 'Invite',
   'Inviting': 'Inviting',
@@ -30,8 +32,9 @@ export const resource = {
   'Are you sure you want to exit the connection': 'Are you sure you want to exit the connection?',
   'Layout Template': 'Layout Template',
   'Dynamic Grid Layout': 'Dynamic Grid Layout',
-  'Dynamic Grid9 Layout': 'Dynamic Grid9 Layout',
+  'Dynamic Grid9 Layout': 'Dynamic Grid Layout',
   'Dynamic 1v6 Layout': 'Dynamic 1v6 Layout',
+  'Landscape Fixed 2 Seats Layout': 'Landscape Fixed 2 Seats Layout',
   // Toast messages with specific error codes
   'Send co-host request failed, Room not exist': 'Send co-host request failed, Room does not exist',
   'Send co-host request failed, Room is connecting': 'Send co-host request failed, Room is connecting',
@@ -41,8 +44,6 @@ export const resource = {
   'Co-host invitation sent to user': 'Co-host invitation sent',
   'Co-host invitation cancelled for user': 'Co-host invitation cancelled',
   'Co-host request cancelled by user': 'Co-host request cancelled',
-  'Co-host request rejected by user': 'Co-host request rejected',
-  'Co-host request timeout for user': 'Co-host request timeout',
   'Co-host user joined event': 'Co-host user joined',
   'Co-host user left event': '{{ userName }} Co-host user left',
   // Battle Panel content
@@ -72,8 +73,6 @@ export const resource = {
   'Send battle request failed': 'Send battle request failed',
   'Battle invitation sent to user': 'PK invitation has been sent to {{ userName }}',
   'Battle request cancelled by user': '{{ userName }} canceled the PK request',
-  'Battle request rejected by user': '{{ userName }} rejected the PK request',
-  'Battle request timeout for user': 'PK request timeout for {{ userName }}',
   'Anchor battle settings': 'Anchor battle settings',
   'Battle duration': 'Battle duration',
   'Number minutes': '{{number}} minutes',
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/zh-CN/index.ts b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/zh-CN/index.ts
index 328a182..ed6cd4b 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/zh-CN/index.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/i18n/zh-CN/index.ts
@@ -1,7 +1,6 @@
 export const resource = {
   'Host Battle': '主播 PK',
   'Host Connection': '主播连线',
-  'CoHost': '连主播',
   'No application for co-host': '暂无连主播申请',
   'Current seat': '当前麦位',
   'Seat is empty': '麦位为空',
@@ -17,6 +16,10 @@ export const resource = {
   'Start battle': '发起 PK',
   'Exit connection': '退出连线',
   'Disconnect': '断开连接',
+  // Co-host audio mute toggle. Dedicated keys so they never collide with the
+  // global 'Mute'/'Unmute' used by the audience chat-ban menu.
+  'Mute Audio': '静音',
+  'Unmute Audio': '取消静音',
   'Cancel': '取消',
   'Invite': '邀请',
   'Inviting': '邀请中',
@@ -31,8 +34,9 @@ export const resource = {
   'Are you sure you want to exit the connection': '确定要退出连线吗？',
   'Layout Template': '布局模板',
   'Dynamic Grid Layout': '动态网格布局',
-  'Dynamic Grid9 Layout': '动态宫格布局',
+  'Dynamic Grid9 Layout': '动态九宫格布局',
   'Dynamic 1v6 Layout': '动态1v6布局',
+  'Landscape Fixed 2 Seats Layout': '横屏 2 人固定布局',
   // Toast messages with specific error codes
   'Send co-host request failed, Room not exist': '发起连线失败，对方主播房间不存在',
   'Send co-host request failed, Room is connecting': '发起连线失败，对方主播正在建立连线中',
@@ -41,8 +45,6 @@ export const resource = {
   // Success messages with parameters - using simple strings for now
   'Co-host invitation sent to user': '已向{{ userName }}发送连线邀请',
   'Co-host request cancelled by user': '{{ userName }}取消了连线请求',
-  'Co-host request rejected by user': '{{ userName }}已拒绝连线',
-  'Co-host request timeout for user': '发给{{ userName }}的连线请求无应答',
   'Co-host user joined event': '{{ userName }}已加入连线',
   'Co-host user left event': '{{ userName }}已离开连线',
   // Battle Panel content
@@ -72,9 +74,7 @@ export const resource = {
   'Send battle request failed': '发起PK失败',
   'Battle invitation sent to user': '已向{{ userName }}发送PK邀请',
   'Battle request cancelled by user': '{{ userName }}取消了PK请求',
-  'Battle request rejected by user': '{{ userName }}已拒绝PK',
-  'Battle request timeout for user': '发给{{ userName }}的PK请求无应答',
-  'Anchor battle settings': '主播PK设置',
+  'Anchor battle settings': '主播 PK 设置',
   'Battle duration': '发起 PK 时长',
   'Number minutes': '{{number}} 分钟',
   'Connection Layout': '连线布局',
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/index.ts b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/index.ts
index 5e0857e..d6ad132 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/index.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/index.ts
@@ -1,7 +1,7 @@
-// import CoHostPanelPC from './CoHostPanel.vue';
-// import { addI18n } from '../../i18n';
-// import { enResource, zhResource } from './i18n';
-// addI18n('en-US', { translation: enResource });
-// addI18n('zh-CN', { translation: zhResource });
-// const CoHostPanel = CoHostPanelPC;
-// export { CoHostPanel };
+import CoHostPanelPC from './CoHostPanel.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+const CoHostPanel = CoHostPanelPC;
+export { CoHostPanel };
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/inviteMutex.ts b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/inviteMutex.ts
new file mode 100644
index 0000000..0e4606c
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/CoHostPanel/inviteMutex.ts
@@ -0,0 +1,62 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
+import type { SeatUserInfo } from '../../types';
+
+// ----------------------------------------------------------------------------
+// Mutual exclusion between the two CoHost invite kinds: "Invite battle" (PK)
+// and "Invite connection" (plain co-host).
+//
+// Background:
+//   Both invites are issued through the SAME SDK call (`requestHostConnection`)
+//   and are only distinguished by `extensionInfo.withBattle`. Both pending
+//   invites land in the SAME authoritative, reactive `invitees` list, which
+//   does NOT carry the `withBattle` flag. So the invite kind cannot be told
+//   apart from `invitees` alone and must be recorded separately.
+//
+// Rule:
+//   Once a PK invite is outstanding, ALL "Invite connection" buttons are
+//   disabled (but more PK invites may still be sent), and vice-versa. The two
+//   kinds are mutually exclusive globally; the same kind may be sent multiple
+//   times. When every invite of a kind settles (accept / reject / cancel /
+//   timeout / join), `invitees` empties out and the mutual exclusion lifts
+//   automatically.
+//
+// Why module-level + reactive:
+//   The parent CoHostPanel dialog mounts BattlePanel and ConnectionPanel at the
+//   same time but uses an internal `v-if`, so both tabs must share one source
+//   of truth that also survives the dialog's mount/unmount cycles. A
+//   module-level Vue `ref` satisfies both.
+//
+// Mirrors `uikit-component-vue3/.../CoHostPanel/inviteMutex.ts` to keep the
+// three-end (Web kit / Mac kit / Win demo) invite behavior aligned.
+// ----------------------------------------------------------------------------
+
+export type InviteType = 'battle' | 'connection';
+
+// Module-level reactive map: liveId -> the invite kind last sent to it.
+// Created once on module evaluation and shared by every panel instance.
+const inviteTypeByLiveId = ref<Map<string, InviteType>>(new Map());
+
+// Record the invite kind sent to a given liveId. We replace the whole Map so
+// Vue reactivity reliably observes the mutation. Stale entries are harmless:
+// the derived flags below intersect this map with the authoritative `invitees`
+// list, so an entry whose invite has already settled is naturally filtered out.
+export const markInviteType = (liveId: string, type: InviteType) => {
+  const next = new Map(inviteTypeByLiveId.value);
+  next.set(liveId, type);
+  inviteTypeByLiveId.value = next;
+};
+
+// Derive the two mutual-exclusion flags from the authoritative, reactive
+// `invitees` list. A pending invite counts as a battle (resp. connection)
+// invite only when its liveId was tagged accordingly.
+export const useInviteMutex = (
+  invitees: Ref<SeatUserInfo[]> | ComputedRef<SeatUserInfo[]>
+) => {
+  const hasPendingBattleInvite = computed(() =>
+    invitees.value.some(user => inviteTypeByLiveId.value.get(user.liveId) === 'battle')
+  );
+  const hasPendingConnectionInvite = computed(() =>
+    invitees.value.some(user => inviteTypeByLiveId.value.get(user.liveId) === 'connection')
+  );
+  return { hasPendingBattleInvite, hasPendingConnectionInvite };
+};
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceList.vue b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceList.vue
index 8266010..a1a2902 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceList.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceList.vue
@@ -80,7 +80,7 @@ import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 import UserActionMenu from './UserActionMenu.vue';
 import type { AudienceInfo } from '../../types';
-import { MAX_AUDIENCE_COUNT } from './index';
+import { MAX_AUDIENCE_COUNT } from './constants';
 
 const { t } = useUIKit();
 const currentViewerTarget = ref<HTMLElement | null>(null);
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceListH5.vue b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceListH5.vue
index 51323e1..0587263 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceListH5.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/LiveAudienceListH5.vue
@@ -30,7 +30,7 @@ import { useLiveAudienceState } from '../../states/LiveAudienceState';
 import { type AudienceInfo } from '../../types';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../Avatar';
-import { MAX_AUDIENCE_COUNT } from './index';
+import { MAX_AUDIENCE_COUNT } from './constants';
 
 const { t } = useUIKit();
 const currentViewerTarget = ref<HTMLElement | null>(null);
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/constants.ts b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/constants.ts
new file mode 100644
index 0000000..fab3514
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/constants.ts
@@ -0,0 +1,17 @@
+/**
+ * Shared constants for the LiveAudienceList component.
+ *
+ * Kept as a dependency-free leaf module so that both the barrel (`index.ts`)
+ * and the component SFCs can import these constants without creating a
+ * circular dependency. The previous `*.vue -> ./index` reverse import formed
+ * an `index.ts <-> *.vue` cycle, which made the bundler interleave the
+ * barrel body between the component definitions and triggered a
+ * "Cannot access '...' before initialization" (TDZ) error in production.
+ *
+ * This is the Electron-package mirror of the same fix originally landed for
+ * the Web package in commit `059e74bfe` (`tuikit-atomicx-vue3`). Do NOT move
+ * these constants back into `index.ts`.
+ */
+
+/** Maximum number of audiences shown in the live audience list. */
+export const MAX_AUDIENCE_COUNT = 200;
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/index.ts b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/index.ts
index d9a775a..c3f8fc8 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/index.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveAudienceList/index.ts
@@ -3,8 +3,8 @@ import LiveAudienceListH5 from './LiveAudienceListH5.vue';
 import { addI18n } from '../../i18n';
 import { enResource, zhResource } from './i18n';
 import { isMobile } from '../../utils/environment';
+import { MAX_AUDIENCE_COUNT } from './constants';
 
-const MAX_AUDIENCE_COUNT = 200;
 const LiveAudienceList = isMobile ? LiveAudienceListH5 : LiveAudienceListPC;
 
 addI18n('en-US', { translation: enResource });
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleDecorate.vue b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleDecorate.vue
index 461cd27..0585b3c 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleDecorate.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleDecorate.vue
@@ -1,417 +1,475 @@
 <template>
-  <div />
+  <div class="battle-decorate" v-if="showBattleDecorate">
+    <div class="battle-score-container" v-if="showPkBar">
+      <div class="battle-score-item" :style="battleStyle[user.userId]" v-for="user, key in battleUsers" :key="user.userId">
+        <span class="battle-score-value">{{ battleScore?.get(user.userId) || 0 }}</span>
+        <div class="battle-score-icon" v-if="key === 1">
+          <IconPK size="18" />
+        </div>
+      </div>
+    </div>
+    <div :class="['battle-time-container', { 'more-top': showPkBar }]">
+      <div class="battle-time-background"></div>
+      <div class="battle-time-content">
+        <IconTime size="16" />
+        <span class="battle-time">{{ time }}</span>
+      </div>
+    </div>
+    <div :class="['battle-start-container', { 'disappearing': showBattleStartDisappearAnimation }]" v-if="showBattleStart">
+      <img :src="redBkgSvg" alt="red-bkg" class="red-bkg" />
+      <img :src="blueBkgSvg" alt="blue-bkg" class="blue-bkg" />
+      <img :src="vSvg" alt="v" class="letter-v" />
+      <img :src="sSvg" alt="s" class="letter-s" />
+    </div>
+    <div :class="['battle-result-container', showBattleResult ? 'show' : '']">
+      <img :src="battleResultImg" alt="battle-result" />
+    </div>
+  </div>
 </template>
-<!--<template>-->
-<!--  <div class="battle-decorate" v-if="showBattleDecorate">-->
-<!--    <div class="battle-score-container" v-if="showPkBar">-->
-<!--      <div class="battle-score-item" :style="battleStyle[user.userId]" v-for="user, key in battleUsers" :key="user.userId">-->
-<!--        <span class="battle-score-value">{{ battleScore?.get(user.userId) || 0 }}</span>-->
-<!--        <div class="battle-score-icon" v-if="key === 1">-->
-<!--          <IconPK size="18" />-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div :class="['battle-time-container', { 'more-top': showPkBar }]">-->
-<!--      <div class="battle-time-background"></div>-->
-<!--      <div class="battle-time-content">-->
-<!--        <IconTime size="16" />-->
-<!--        <span class="battle-time">{{ time }}</span>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div :class="['battle-start-container', { 'disappearing': showBattleStartDisappearAnimation }]" v-if="showBattleStart">-->
-<!--      <img :src="redBkgSvg" alt="red-bkg" class="red-bkg" />-->
-<!--      <img :src="blueBkgSvg" alt="blue-bkg" class="blue-bkg" />-->
-<!--      <img :src="vSvg" alt="v" class="letter-v" />-->
-<!--      <img :src="sSvg" alt="s" class="letter-s" />-->
-<!--    </div>-->
-<!--    <div :class="['battle-result-container', showBattleResult ? 'show' : '']">-->
-<!--      <img :src="battleResultImg" alt="battle-result" />-->
-<!--    </div>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script setup lang="ts">-->
-<!--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 { useLiveListState } from '../../../states/LiveListState';-->
-<!--import { convertSecondsToHMS } from '../../../utils/utils';-->
-<!--import defeatResult from '../assets/img/defeat.png';-->
-<!--import victoryResult from '../assets/img/victory.png';-->
-<!--import drawResult from '../assets/img/draw.png';-->
-<!--import redBkgSvg from '../assets/svg/redBkg.svg';-->
-<!--import blueBkgSvg from '../assets/svg/blueBkg.svg';-->
-<!--import vSvg from '../assets/svg/v.svg';-->
-<!--import sSvg from '../assets/svg/s.svg';-->
-
-<!--const { currentLive } = useLiveListState();-->
-<!--const { currentBattleInfo, battleUsers, battleScore, subscribeEvent, unsubscribeEvent} = useBattleState();-->
-<!--const { seatList } = useLiveSeatState();-->
-<!--const { t } = useUIKit();-->
-
-<!--const showBattleDecorate = ref(false);-->
-<!--const showPkBar = computed(() => {-->
-<!--  return currentLive.value?.layoutTemplate === CoHostLayoutTemplate.HostDynamicGrid-->
-<!--    && battleUsers.value.length === 2-->
-<!--    && seatList.value?.filter(seat => seat.userInfo).length === 2;-->
-<!--});-->
-<!--const showBattleStart = ref(false);-->
-<!--const showBattleStartDisappearAnimation = ref(false);-->
-
-<!--watch(() => currentBattleInfo.value?.battleId, (newVal) => {-->
-<!--  if (newVal) {-->
-<!--    showBattleDecorate.value = true;-->
-<!--    showBattleStart.value = true;-->
-<!--    setTimeout(() => {-->
-<!--      showBattleStartDisappearAnimation.value = true;-->
-<!--      setTimeout(() => {-->
-<!--        showBattleStart.value = false;-->
-<!--        showBattleStartDisappearAnimation.value = false;-->
-<!--      }, 300);-->
-<!--    }, 2000);-->
-<!--  }-->
-<!--}, { immediate: true });-->
-
-<!--watch(() => currentLive.value?.liveId, (val, oldVal) => {-->
-<!--  if (oldVal && !val) {-->
-<!--    stopTimer();-->
-<!--    showBattleDecorate.value = false;-->
-<!--    showBattleStart.value = false;-->
-<!--    showBattleStartDisappearAnimation.value = false;-->
-<!--    showBattleResult.value = false;-->
-<!--  }-->
-<!--}, { immediate: true });-->
-
-<!--const battleStyle: Ref<Record<string, { width: string }>> = ref({});-->
-
-<!--watch(battleScore, (newVal) => {-->
-<!--  if (!newVal) return;-->
-<!--  const totalScore = [...newVal?.values()].reduce((acc, curr) => acc + curr, 0);-->
-<!--  [...newVal?.keys()].forEach(key => {-->
-<!--    battleStyle.value[key] = {-->
-<!--      width: (newVal.get(key) || 0) / totalScore * 100 + '%',-->
-<!--    };-->
-<!--  });-->
-<!--}, { immediate: true });-->
-
-<!--let timer: ReturnType<typeof setInterval> | null = null;-->
-
-<!--const currentTime = ref(0);-->
-
-<!--const leftBattleTime = computed(() => {-->
-<!--  if (!currentBattleInfo.value) return 0;-->
-<!--  currentTime.value = Date.now();-->
-<!--  return currentBattleInfo.value?.config.duration - ((Math.floor(currentTime.value / 1000) - currentBattleInfo.value?.startTime));-->
-<!--});-->
-
-<!--watch(() => currentBattleInfo.value?.battleId, (newVal) => {-->
-<!--  if (newVal) {-->
-<!--    startTimer();-->
-<!--  } else {-->
-<!--    stopTimer();-->
-<!--  }-->
-<!--}, { immediate: true });-->
-
-<!--function startTimer() {-->
-<!--  stopTimer();-->
-<!--  timer = setInterval(() => {-->
-<!--    currentTime.value = Date.now();-->
-<!--  }, 1000);-->
-<!--}-->
-
-<!--function stopTimer() {-->
-<!--  if (timer) {-->
-<!--    clearInterval(timer);-->
-<!--    timer = null;-->
-<!--  }-->
-<!--}-->
-
-<!--function convertToTwoDigits(value: number) {-->
-<!--  return value.toString().padStart(2, '0');-->
-<!--}-->
-
-<!--const time = computed(() => {-->
-<!--  const { minutes, seconds } = convertSecondsToHMS(leftBattleTime.value);-->
-<!--  if (minutes <= 0 && seconds <= 0) {-->
-<!--    return t('LiveView.BattleEnded');-->
-<!--  }-->
-<!--  return `${convertToTwoDigits(minutes)}:${convertToTwoDigits(seconds)}`;-->
-<!--});-->
-
-<!--const showBattleResult = ref(false);-->
-<!--const battleResultImg = ref(drawResult);-->
-
-<!--function handleBattleEnded(eventInfo: { battleInfo: BattleInfo; reason: BattleEndedReason }) {-->
-<!--  stopTimer();-->
-<!--  showBattleResult.value = true;-->
-<!--  const maxScore = Math.max(...[...battleScore.value.values()]);-->
-<!--  const minScore = Math.min(...[...battleScore.value.values()]);-->
-<!--  const selfScore = battleScore.value.get(currentLive.value?.liveOwner.userId || '') || 0;-->
-<!--  if (maxScore === minScore) {-->
-<!--    battleResultImg.value = drawResult;-->
-<!--  } else {-->
-<!--    if (selfScore === maxScore) {-->
-<!--      battleResultImg.value = victoryResult;-->
-<!--    } else if (selfScore === minScore) {-->
-<!--      battleResultImg.value = defeatResult;-->
-<!--    }-->
-<!--  }-->
-<!--  setTimeout(() => {-->
-<!--    showBattleResult.value = false;-->
-<!--    showBattleDecorate.value = false;-->
-<!--  }, 5000);-->
-<!--}-->
-
-<!--onMounted(() => {-->
-<!--  subscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);-->
-<!--});-->
-
-<!--onUnmounted(() => {-->
-<!--  unsubscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);-->
-<!--});-->
-<!--</script>-->
-
-<!--<style scoped lang="scss">-->
-
-<!--.battle-score-container {-->
-<!--  display: flex;-->
-<!--  align-items: center;-->
-<!--  width: 100%;-->
-<!--  height: 14px;-->
-<!--  .battle-score-item {-->
-<!--    position: relative;-->
-<!--    display: flex;-->
-<!--    align-items: center;-->
-<!--    justify-content: center;-->
-<!--    width: 100%;-->
-<!--    height: 100%;-->
-<!--    box-sizing: border-box;-->
-<!--    transition: width 0.3s ease;-->
-<!--    &:nth-child(1) {-->
-<!--      background-color: #1C66E5;-->
-<!--      justify-content: flex-start;-->
-<!--      padding: 0 18px 0 8px;-->
-<!--    }-->
-<!--    &:nth-child(2) {-->
-<!--      background-color: #F15065;-->
-<!--      justify-content: flex-end;-->
-<!--      padding: 0 8px 0 18px;-->
-<!--    }-->
-<!--    .battle-score-value {-->
-<!--      color: #fff;-->
-<!--      font-size: 12px;-->
-<!--      font-style: normal;-->
-<!--      font-weight: 500;-->
-<!--      line-height: 20px;-->
-<!--    }-->
-<!--  }-->
-<!--  .battle-score-icon {-->
-<!--    position: absolute;-->
-<!--    top: -2px;-->
-<!--    left: 0;-->
-<!--    transform: translateX(-50%);-->
-<!--  }-->
-<!--}-->
-
-<!--.battle-time-container {-->
-<!--  position: absolute;-->
-<!--  top: 0px;-->
-<!--  left: 50%;-->
-<!--  transform: translateX(-50%);-->
-<!--  width: 110px;-->
-<!--  height: 24px;-->
-<!--  &.more-top {-->
-<!--    top: 14px;-->
-<!--  }-->
-<!--  .battle-time-background {-->
-<!--    width: 100%;-->
-<!--    height: 100%;-->
-<!--    border-bottom-left-radius: 10px;-->
-<!--    border-bottom-right-radius: 10px;-->
-<!--    background-color: var(&#45;&#45;bg-color-mask, rgba(0, 0, 0, 0.55));-->
-<!--    transform: perspective(50px) rotateX(-20deg) rotateY(0deg) translateZ(0);-->
-<!--  }-->
-
-<!--  .battle-time-content {-->
-<!--    pointer-events: auto;-->
-<!--    cursor: pointer;-->
-<!--    position: absolute;-->
-<!--    display: flex;-->
-<!--    align-items: center;-->
-<!--    justify-content: center;-->
-<!--    top: 0;-->
-<!--    left: 0;-->
-<!--    width: 100%;-->
-<!--    height: 100%;-->
-<!--    text-align: center;-->
-<!--    color: var(&#45;&#45;text-color-primary, rgba(255, 255, 255, 0.90));-->
-<!--    font-size: 12px;-->
-<!--    font-style: normal;-->
-<!--    font-weight: 500;-->
-<!--    line-height: 20px;-->
-<!--    gap: 4px;-->
-<!--    transform: translateY(-2px);-->
-<!--  }-->
-<!--}-->
-
-<!--.battle-result-container {-->
-<!--  position: absolute;-->
-<!--  top: 50%;-->
-<!--  left: 50%;-->
-<!--  opacity: 0;-->
-<!--  transform: translate(-50%, -50%) scale(0);-->
-<!--  transform-origin: center center;-->
-<!--  transition:-->
-<!--    transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),-->
-<!--    opacity 0.3s ease-out;-->
-
-<!--  &.show {-->
-<!--    opacity: 1;-->
-<!--    transform: translate(-50%, -50%) scale(1.5);-->
-<!--    animation: battleResultBouncePC 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;-->
-<!--    @media screen and (max-width: 768px) {-->
-<!--      animation: battleResultBounceMobile 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-
-<!--.battle-start-container {-->
-<!--  position: absolute;-->
-<!--  top: 50%;-->
-<!--  left: 50%;-->
-<!--  transform: translate(-50%, -50%) scale(1.5);-->
-<!--  width: 218px;-->
-<!--  height: 64px;-->
-<!--  display: flex;-->
-<!--  align-items: center;-->
-<!--  justify-content: center;-->
-<!--  pointer-events: none;-->
-<!--  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);-->
-
-<!--  &.disappearing {-->
-<!--    transform: translate(-50%, -50%) scale(0);-->
-<!--    opacity: 0;-->
-<!--  }-->
-
-<!--  .red-bkg {-->
-<!--    position: absolute;-->
-<!--    width: 118px;-->
-<!--    height: 50px;-->
-<!--    left: 0;-->
-<!--    top: 0px;-->
-<!--    animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;-->
-<!--  }-->
-
-<!--  .blue-bkg {-->
-<!--    position: absolute;-->
-<!--    width: 118px;-->
-<!--    height: 50px;-->
-<!--    right: 0;-->
-<!--    bottom: 0px;-->
-<!--    animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;-->
-<!--  }-->
-
-<!--  .letter-v {-->
-<!--    position: absolute;-->
-<!--    width: 40px;-->
-<!--    height: 40px;-->
-<!--    left: calc(50% - 30px);-->
-<!--    top: 50%;-->
-<!--    transform: translateX(-50%) translateY(-50%) scale(0);-->
-<!--    animation: scaleInFromCenter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;-->
-<!--  }-->
-
-<!--  .letter-s {-->
-<!--    position: absolute;-->
-<!--    width: 40px;-->
-<!--    height: 40px;-->
-<!--    left: calc(50% - 10px);-->
-<!--    top: 50%;-->
-<!--    transform: translateX(-50%) translateY(-50%) scale(0);-->
-<!--    animation: scaleInFromCenter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;-->
-<!--  }-->
-<!--}-->
-
-<!--@keyframes slideInFromLeft {-->
-<!--  0% {-->
-<!--    transform: translateX(-100%);-->
-<!--    opacity: 0;-->
-<!--  }-->
-<!--  100% {-->
-<!--    transform: translateX(0);-->
-<!--    opacity: 1;-->
-<!--  }-->
-<!--}-->
-
-<!--@keyframes slideInFromRight {-->
-<!--  0% {-->
-<!--    transform: translateX(100%);-->
-<!--    opacity: 0;-->
-<!--  }-->
-<!--  100% {-->
-<!--    transform: translateX(0);-->
-<!--    opacity: 1;-->
-<!--  }-->
-<!--}-->
-
-<!--@keyframes scaleInFromCenter {-->
-<!--  0% {-->
-<!--    transform: translateY(-50%) scale(0);-->
-<!--    opacity: 0;-->
-<!--  }-->
-<!--  50% {-->
-<!--    transform: translateY(-50%) scale(1.2);-->
-<!--    opacity: 0.8;-->
-<!--  }-->
-<!--  100% {-->
-<!--    transform: translateY(-50%) scale(1);-->
-<!--    opacity: 1;-->
-<!--  }-->
-<!--}-->
-
-<!--@keyframes battleResultBouncePC {-->
-<!--  0% {-->
-<!--    transform: translate(-50%, -50%) scale(0);-->
-<!--    opacity: 0;-->
-<!--  }-->
-
-<!--  50% {-->
-<!--    transform: translate(-50%, -50%) scale(1.5);-->
-<!--    opacity: 0.8;-->
-<!--  }-->
-
-<!--  70% {-->
-<!--    transform: translate(-50%, -50%) scale(1.8);-->
-<!--    opacity: 1;-->
-<!--  }-->
-
-<!--  100% {-->
-<!--    transform: translate(-50%, -50%) scale(1.5);-->
-<!--    opacity: 1;-->
-<!--  }-->
-<!--}-->
-
-<!--@keyframes battleResultBounceMobile {-->
-<!--  0% {-->
-<!--    transform: translate(-50%, -50%) scale(0);-->
-<!--    opacity: 0;-->
-<!--  }-->
-
-<!--  50% {-->
-<!--    transform: translate(-50%, -50%) scale(0.9);-->
-<!--    opacity: 0.8;-->
-<!--  }-->
-
-<!--  70% {-->
-<!--    transform: translate(-50%, -50%) scale(1.15);-->
-<!--    opacity: 1;-->
-<!--  }-->
-
-<!--  100% {-->
-<!--    transform: translate(-50%, -50%) scale(1);-->
-<!--    opacity: 1;-->
-<!--  }-->
-<!--}-->
-<!--</style>-->
+
+<script setup lang="ts">
+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 { useLiveListState } from '../../../states/LiveListState';
+import { convertSecondsToHMS } from '../../../utils/utils';
+import defeatResult from '../assets/img/defeat.png';
+import victoryResult from '../assets/img/victory.png';
+import drawResult from '../assets/img/draw.png';
+import redBkgSvg from '../assets/svg/redBkg.svg';
+import blueBkgSvg from '../assets/svg/blueBkg.svg';
+import vSvg from '../assets/svg/v.svg';
+import sSvg from '../assets/svg/s.svg';
+
+const { currentLive } = useLiveListState();
+const { currentBattleInfo, battleUsers, battleScore, subscribeEvent, unsubscribeEvent} = useBattleState();
+const { seatList } = useLiveSeatState();
+const { t } = useUIKit();
+
+const showBattleDecorate = ref(false);
+// Show PK bar only when exactly 2 hosts are battling on a layout that renders them side-by-side.
+// - HostDynamicGrid (600): portrait grid, 2 of 9 seats occupied -> classic 1v1 PK
+// - HostVideoLandscapeFixed2Seats (400): landscape 1v1, 2 fixed seats -> landscape PK
+const showPkBar = computed(() => {
+  const layoutTemplate = currentLive.value?.layoutTemplate;
+  const isSupportedLayout = layoutTemplate === CoHostLayoutTemplate.HostDynamicGrid
+    || layoutTemplate === CoHostLayoutTemplate.HostVideoLandscapeFixed2Seats;
+  return isSupportedLayout
+    && battleUsers.value.length === 2
+    && seatList.value?.filter(seat => seat.userInfo).length === 2;
+});
+const showBattleStart = ref(false);
+const showBattleStartDisappearAnimation = ref(false);
+const showBattleResult = ref(false);
+const battleResultImg = ref(drawResult);
+
+// Timer handles for the PK intro ("VS") animation and the post-battle result
+// animation. They MUST be tracked so a rapid battle end -> start cycle can
+// cancel timers left over from the previous battle. Otherwise a stale 5s
+// "hide result" timer registered by the previous battle's handleBattleEnded
+// fires while the NEW battle is already running and wrongly hides its
+// decorate, leaving the PK animation/decorate invisible even though the
+// battle state (battleUsers / currentBattleInfo) is still correct.
+let battleStartHideTimer: ReturnType<typeof setTimeout> | null = null;
+let battleStartFinishTimer: ReturnType<typeof setTimeout> | null = null;
+let battleResultHideTimer: ReturnType<typeof setTimeout> | null = null;
+
+function clearBattleStartTimers() {
+  if (battleStartHideTimer) {
+    clearTimeout(battleStartHideTimer);
+    battleStartHideTimer = null;
+  }
+  if (battleStartFinishTimer) {
+    clearTimeout(battleStartFinishTimer);
+    battleStartFinishTimer = null;
+  }
+}
+
+function clearBattleResultTimer() {
+  if (battleResultHideTimer) {
+    clearTimeout(battleResultHideTimer);
+    battleResultHideTimer = null;
+  }
+}
+
+watch(() => currentBattleInfo.value?.battleId, (newVal) => {
+  if (newVal) {
+    // A new battle is starting. Cancel any timers left over from a previous
+    // battle (the 5s result-hide timer in particular); otherwise that stale
+    // timer would fire mid-battle and hide this battle's decorate. Also reset
+    // the intro-animation flags so a fresh "VS" intro always plays cleanly.
+    clearBattleResultTimer();
+    clearBattleStartTimers();
+    showBattleResult.value = false;
+    showBattleDecorate.value = true;
+    showBattleStart.value = true;
+    showBattleStartDisappearAnimation.value = false;
+    battleStartHideTimer = setTimeout(() => {
+      showBattleStartDisappearAnimation.value = true;
+      battleStartFinishTimer = setTimeout(() => {
+        showBattleStart.value = false;
+        showBattleStartDisappearAnimation.value = false;
+      }, 300);
+    }, 2000);
+  }
+}, { immediate: true });
+
+watch(() => currentLive.value?.liveId, (val, oldVal) => {
+  if (oldVal && !val) {
+    stopTimer();
+    clearBattleStartTimers();
+    clearBattleResultTimer();
+    showBattleDecorate.value = false;
+    showBattleStart.value = false;
+    showBattleStartDisappearAnimation.value = false;
+    showBattleResult.value = false;
+  }
+}, { immediate: true });
+
+const battleStyle: Ref<Record<string, { width: string }>> = ref({});
+
+watch(battleScore, (newVal) => {
+  if (!newVal) return;
+  const totalScore = [...newVal?.values()].reduce((acc, curr) => acc + curr, 0);
+  [...newVal?.keys()].forEach(key => {
+    battleStyle.value[key] = {
+      width: (newVal.get(key) || 0) / totalScore * 100 + '%',
+    };
+  });
+}, { immediate: true });
+
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const currentTime = ref(0);
+
+const leftBattleTime = computed(() => {
+  if (!currentBattleInfo.value) return 0;
+  currentTime.value = Date.now();
+  // `startTime` is a unix-second timestamp from the SDK (server clock),
+  // while `currentTime.value` is `Date.now()` (this device's wall clock).
+  // If the local clock drifts behind the server, the raw elapsed below can
+  // go negative, which would make `duration - elapsed` exceed `duration`
+  // and the UI would briefly show e.g. "2:03" for a 2-minute battle.
+  // Symmetrically, if the local clock runs ahead, elapsed could be larger
+  // than `duration`, producing a negative remaining time. Clamping
+  // `elapsed` into `[0, duration]` keeps the displayed countdown inside
+  // `[0, duration]` regardless of clock skew between server and client.
+  const duration = currentBattleInfo.value.config.duration;
+  const elapsedRaw = Math.floor(currentTime.value / 1000) - currentBattleInfo.value.startTime;
+  const elapsed = Math.max(0, Math.min(duration, elapsedRaw));
+  return duration - elapsed;
+});
+
+watch(() => currentBattleInfo.value?.battleId, (newVal) => {
+  if (newVal) {
+    startTimer();
+  } else {
+    stopTimer();
+  }
+}, { immediate: true });
+
+function startTimer() {
+  stopTimer();
+  timer = setInterval(() => {
+    currentTime.value = Date.now();
+  }, 1000);
+}
+
+function stopTimer() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+function convertToTwoDigits(value: number) {
+  return value.toString().padStart(2, '0');
+}
+
+const time = computed(() => {
+  const { minutes, seconds } = convertSecondsToHMS(leftBattleTime.value);
+  if (minutes <= 0 && seconds <= 0) {
+    return t('LiveView.BattleEnded');
+  }
+  return `${convertToTwoDigits(minutes)}:${convertToTwoDigits(seconds)}`;
+});
+
+function handleBattleEnded(eventInfo: { battleInfo: BattleInfo; reason: BattleEndedReason }) {
+  stopTimer();
+  showBattleResult.value = true;
+  const maxScore = Math.max(...[...battleScore.value.values()]);
+  const minScore = Math.min(...[...battleScore.value.values()]);
+  const selfScore = battleScore.value.get(currentLive.value?.liveOwner.userId || '') || 0;
+  if (maxScore === minScore) {
+    battleResultImg.value = drawResult;
+  } else {
+    if (selfScore === maxScore) {
+      battleResultImg.value = victoryResult;
+    } else if (selfScore === minScore) {
+      battleResultImg.value = defeatResult;
+    }
+  }
+  clearBattleResultTimer();
+  battleResultHideTimer = setTimeout(() => {
+    showBattleResult.value = false;
+    showBattleDecorate.value = false;
+    battleResultHideTimer = null;
+  }, 5000);
+}
+
+onMounted(() => {
+  subscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);
+});
+
+onUnmounted(() => {
+  unsubscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);
+  stopTimer();
+  clearBattleStartTimers();
+  clearBattleResultTimer();
+});
+</script>
+
+<style scoped lang="scss">
+
+.battle-score-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 14px;
+  .battle-score-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    transition: width 0.3s ease;
+    &:nth-child(1) {
+      background-color: #1C66E5;
+      justify-content: flex-start;
+      padding: 0 18px 0 8px;
+    }
+    &:nth-child(2) {
+      background-color: #F15065;
+      justify-content: flex-end;
+      padding: 0 8px 0 18px;
+    }
+    .battle-score-value {
+      color: #fff;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+    }
+  }
+  .battle-score-icon {
+    position: absolute;
+    top: -2px;
+    left: 0;
+    transform: translateX(-50%);
+  }
+}
+
+.battle-time-container {
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 110px;
+  height: 24px;
+  &.more-top {
+    top: 14px;
+  }
+  .battle-time-background {
+    width: 100%;
+    height: 100%;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    background-color: var(--bg-color-mask, rgba(0, 0, 0, 0.55));
+    transform: perspective(50px) rotateX(-20deg) rotateY(0deg) translateZ(0);
+  }
+
+  .battle-time-content {
+    pointer-events: auto;
+    cursor: pointer;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: var(--text-color-primary, rgba(255, 255, 255, 0.90));
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    gap: 4px;
+    transform: translateY(-2px);
+  }
+}
+
+.battle-result-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: center center;
+  transition:
+    transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    opacity 0.3s ease-out;
+
+  &.show {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.5);
+    animation: battleResultBouncePC 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    @media screen and (max-width: 768px) {
+      animation: battleResultBounceMobile 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    }
+  }
+}
+
+.battle-start-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1.5);
+  width: 218px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  &.disappearing {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  .red-bkg {
+    position: absolute;
+    width: 118px;
+    height: 50px;
+    left: 0;
+    top: 0px;
+    animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  }
+
+  .blue-bkg {
+    position: absolute;
+    width: 118px;
+    height: 50px;
+    right: 0;
+    bottom: 0px;
+    animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  }
+
+  .letter-v {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    left: calc(50% - 30px);
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) scale(0);
+    animation: scaleInFromCenter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+  }
+
+  .letter-s {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    left: calc(50% - 10px);
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) scale(0);
+    animation: scaleInFromCenter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+  }
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleInFromCenter {
+  0% {
+    transform: translateY(-50%) scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(-50%) scale(1.2);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes battleResultBouncePC {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0.8;
+  }
+
+  70% {
+    transform: translate(-50%, -50%) scale(1.8);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 1;
+  }
+}
+
+@keyframes battleResultBounceMobile {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0.8;
+  }
+
+  70% {
+    transform: translate(-50%, -50%) scale(1.15);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue
index 36dbeb4..c308c06 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue
@@ -27,7 +27,7 @@ import { SeatUserInfo, CoHostLayoutTemplate } from '../../../types';
 import { useBattleState } from '../../../states/BattleState';
 import { useLiveListState } from '../../../states/LiveListState';
 import { useCoHostState } from '../../../states/CoHostState';
-import { ref, computed, watch } from 'vue';
+import { computed } from 'vue';
 import BattleTopBadge from '../assets/svg/BattleTopBadge.svg';
 import BattleOrdinaryBadge from '../assets/svg/BattleOrdinaryBadge.svg';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
@@ -48,7 +48,15 @@ const { currentLive } = useLiveListState();
 const { connected } = useCoHostState();
 const { currentBattleInfo, battleScore } = useBattleState();
 
-const isInBattle = ref(false);
+// The PK badge overlay is gated strictly on an active battle: it appears only
+// after `onBattleStarted` populates `currentBattleInfo.battleId`, and hides the
+// moment the battle ends (battleId cleared). Driving this directly off
+// `battleId` avoids showing the overlay on a mere invitee-accept (which fills
+// `battleScore` via `onUserJoinBattle` before the battle officially starts) and
+// prevents stale state from a previous battle leaking into the next one.
+const isInBattle = computed(
+  () => currentBattleInfo.value?.battleId !== null && currentBattleInfo.value?.battleId !== undefined
+);
 
 const showBattleUserDecorate = computed(() => {
   const showUserDecorateInGrid = currentLive.value?.layoutTemplate === CoHostLayoutTemplate.HostDynamicGrid;
@@ -65,18 +73,6 @@ function getBattleLevel(userId: string) {
   return currentBattleScoreList.value.indexOf(battleScore.value.get(userId) || 0) + 1;
 };
 
-let battleTimer: NodeJS.Timeout | null = null;
-watch(() => currentBattleInfo.value?.battleId, (newVal) => {
-  if(newVal !== null && newVal !== undefined) {
-    isInBattle.value = true;
-  } else {
-    if(battleTimer) return;
-    battleTimer = setTimeout(() => {
-      isInBattle.value = false;
-    }, 5000);
-  }
-}, { immediate: true });
-
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/LiveCoreDecorate.vue b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/LiveCoreDecorate.vue
index 58373f0..2fb70c2 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/LiveCoreDecorate.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/CoreViewDecorate/LiveCoreDecorate.vue
@@ -66,5 +66,7 @@ const maxWidth = computed(() => {
   top: 0;
   left: 0;
   pointer-events: none;
+  // Keep PK animations above .live-core-ui (z-index: 1) so they render on top of stream-cover.
+  z-index: 2;
 }
 </style>
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/index.vue b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/index.vue
index f904b02..1742c1f 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/index.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/LiveView/index.vue
@@ -206,8 +206,8 @@ function handleLandscapeVideoLayoutForAudioConnect(layoutList: any[]) {
     audioLayoutTemplate.push({ x: 20, y: 140, w: 150, h: 150 });
   } else {
     audioLayoutTemplate.push({ x: 20, y: 510, w: 120, h: 120 });
-    audioLayoutTemplate.push({ x: 20, y: 380, w: 120, h: 120 });
-    audioLayoutTemplate.push({ x: 20, y: 250, w: 120, h: 120 });
+    audioLayoutTemplate.push({ x: 20, y: 385, w: 120, h: 120 });
+    audioLayoutTemplate.push({ x: 20, y: 260, w: 120, h: 120 });
   }
 
   for (let i = 1; i < layoutList.length && (i - 1) < audioLayoutTemplate.length; ++i) {
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/LocalMixer/index.vue b/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/LocalMixer/index.vue
index a01e93c..639221e 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/LocalMixer/index.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/LocalMixer/index.vue
@@ -34,7 +34,9 @@ import TUIRoomEngine, {
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { TRTCStreamLayoutMode } from 'trtc-electron-sdk';
 import { useRoomEngine } from '../../../hooks/useRoomEngine';
+import { useCoHostState } from '../../../states/CoHostState';
 import { useLiveListState } from '../../../states/LiveListState';
+import { useSeatStore } from '../../../states/SeatStore';
 import { useVideoMixerState } from '../../../states/VideoMixerState';
 import { LiveOrientation } from '../../../types';
 import { debounce } from '../../../utils/utils';
@@ -43,6 +45,19 @@ import MixerControl from './MixerControl.vue';
 const { t } = useUIKit();
 
 const { currentLive } = useLiveListState();
+const { seatList } = useSeatStore();
+const { connected: coHostConnectedList } = useCoHostState();
+
+// CoGuest (audience mic-link) participants, counted by occupied seats.
+const coGuestSeatCount = computed(() => seatList.value.filter(seat => !!seat.userInfo).length);
+// CoHost (cross-room PK / connection) participants. The list includes the local
+// host once connected, so it is empty / 1 while broadcasting alone.
+const coHostConnectedCount = computed(() => coHostConnectedList.value.length);
+// Whether the local video shares the canvas with others. Mirrors the Windows
+// behavior: Fit when the host broadcasts alone, Fill once others join.
+const isMultiPersonLayout = computed(
+  () => coGuestSeatCount.value > 1 || coHostConnectedCount.value > 1,
+);
 
 const mixControlRef = ref<InstanceType<typeof MixerControl> | null>(null);
 const {
@@ -248,41 +263,50 @@ onMounted(() => {
     }
   });
 
-  watch(() => currentLive.value?.layoutTemplate, (newVal) => {
-    if (newVal !== null && newVal !== undefined) {
-      let fillMode;
-      if (newVal < 200 || newVal >= 600) {
-        // Portrait template
-        fillMode = TRTCVideoFillMode.TRTCVideoFillMode_Fill;
-      } else {
-        // Landscape template
-        fillMode = TRTCVideoFillMode.TRTCVideoFillMode_Fit;
-      }
-
-      const mixerView = document.getElementById('local-video-mixer');
-      if (!mixerView) {
-        return;
-      }
-      const width = mixerView.offsetWidth;
-      const height = mixerView.offsetHeight;
-
-      const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-      mediaSourceManager?.setStreamLayout({
-        layoutMode: TRTCStreamLayoutMode.Custom,
-        userList: [{
-          userId: '',
-          fillMode,
-          rect: {
-            left: 0,
-            top: 0,
-            right: width,
-            bottom: height,
-          },
-          zOrder: 1,
-        }],
-      });
+  // Apply the local-mixer stream layout, aligning the fill mode with Windows:
+  // Fit when broadcasting alone (whole frame, letterboxed) and Fill once others
+  // join via CoHost (cross-room PK / connection) or CoGuest (audience mic-link),
+  // so the host tile fills its cell without black bars.
+  const applyStreamLayout = () => {
+    const layoutTemplate = currentLive.value?.layoutTemplate;
+    if (layoutTemplate === null || layoutTemplate === undefined) {
+      return;
     }
-  });
+
+    const fillMode = isMultiPersonLayout.value
+      ? TRTCVideoFillMode.TRTCVideoFillMode_Fill
+      : TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+
+    const mixerView = document.getElementById('local-video-mixer');
+    if (!mixerView) {
+      return;
+    }
+    const width = mixerView.offsetWidth;
+    const height = mixerView.offsetHeight;
+
+    const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
+    mediaSourceManager?.setStreamLayout({
+      layoutMode: TRTCStreamLayoutMode.Custom,
+      userList: [{
+        userId: '',
+        fillMode,
+        rect: {
+          left: 0,
+          top: 0,
+          right: width,
+          bottom: height,
+        },
+        zOrder: 1,
+      }],
+    });
+  };
+
+  watch(
+    () => [currentLive.value?.layoutTemplate, isMultiPersonLayout.value],
+    () => {
+      applyStreamLayout();
+    },
+  );
 });
 
 onBeforeUnmount(async () => {
diff --git a/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/MacStreamMixer.vue b/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/MacStreamMixer.vue
index 93823b6..bd1bc5a 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/MacStreamMixer.vue
+++ b/packages/tuikit-atomicx-vue3-electron/src/components/StreamMixer/MacStreamMixer.vue
@@ -1,4 +1,3 @@
-
 <template>
   <live-core-view :ignore-local-video="true">
     <template #localVideo="{ style }">
diff --git a/packages/tuikit-atomicx-vue3-electron/src/report/MetricsKey.ts b/packages/tuikit-atomicx-vue3-electron/src/report/MetricsKey.ts
index 9d2eee1..051c693 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/report/MetricsKey.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/report/MetricsKey.ts
@@ -18,6 +18,7 @@ export enum MetricsKey {
   T_METRICS_STATE_API_AUDIENCE_FETCH_LIST_COUNT = 192050,
   T_METRICS_STATE_API_CO_GUEST_REQUEST_CONNECTION_COUNT = 192060,
   T_METRICS_STATE_API_CO_HOST_REQUEST_CONNECTION_COUNT = 192070,
+  T_METRICS_STATE_API_CO_HOST_MUTE_REMOTE_HOST_AUDIO_COUNT = 192071,
   T_METRICS_STATE_API_MUSIC_START_PLAY_COUNT   = 192080,
   T_METRICS_STATE_API_MUSIC_PAUSE_PLAY_COUNT   = 192081,
   T_METRICS_STATE_API_MUSIC_RESUME_PLAY_COUNT  = 192082,
diff --git a/packages/tuikit-atomicx-vue3-electron/src/subEntry/live/live.ts b/packages/tuikit-atomicx-vue3-electron/src/subEntry/live/live.ts
index 35230f5..dc4e344 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/subEntry/live/live.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/subEntry/live/live.ts
@@ -8,6 +8,7 @@ export { useLiveGiftState } from '../../states/LiveGiftState';
 export { useLiveListState } from '../../states/LiveListState';
 export { useLiveMonitorState } from '../../states/LiveMonitorState';
 export { useLiveSeatState } from '../../states/LiveSeatState';
+export { useLiveSummaryState } from '../../states/LiveSummaryState';
 export { useMusicState } from '../../states/MusicState';
 export { useVideoMixerState } from '../../states/VideoMixerState';
 
@@ -15,7 +16,7 @@ export { BarrageInput } from '../../components/BarrageInput';
 export { BarrageList } from '../../components/BarrageList';
 export { CameraButton } from '../../components/CameraButton';
 export { CoGuestPanel } from '../../components/CoGuestPanel';
-// export { CoHostPanel } from '../../components/CoHostPanel';
+export { CoHostPanel } from '../../components/CoHostPanel';
 export { LiveAudienceList } from '../../components/LiveAudienceList';
 export { LiveGift } from '../../components/LiveGift';
 export { LiveList } from '../../components/LiveList';
diff --git a/packages/tuikit-atomicx-vue3-electron/src/types/coHost.ts b/packages/tuikit-atomicx-vue3-electron/src/types/coHost.ts
index d839cda..e352399 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/types/coHost.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/types/coHost.ts
@@ -15,7 +15,8 @@ export enum CoHostEvent {
   onCoHostRequestReceived = 'onCoHostRequestReceived',
   /**
    * @param {object} options
-   * @param {SeatUserInfo} options.inviter User info who initiated the request
+   * @param {SeatUserInfo} options.inviter User info who cancelled the request (the original inviter)
+   * @param {SeatUserInfo} options.invitee Local user info (the invitee whose pending request was cancelled)
    */
   onCoHostRequestCancelled = 'onCoHostRequestCancelled',
   /**
@@ -31,6 +32,7 @@ export enum CoHostEvent {
   /**
    * @param {object} options
    * @param {SeatUserInfo} options.inviter User info who initiated the request
+   * @param {SeatUserInfo} options.invitee User info who was invited
    */
   onCoHostRequestTimeout = 'onCoHostRequestTimeout',
   /**
@@ -46,8 +48,12 @@ export enum CoHostEvent {
 }
 
 export enum CoHostLayoutTemplate {
+  /** Dynamic grid layout. */
   HostDynamicGrid = 600,
+  /** Dynamic 1v6 layout. */
   HostDynamic1v6 = 601,
+  /** Fixed 2-seat landscape layout. */
+  HostVideoLandscapeFixed2Seats = 400,
 }
 
 export interface ICoHostState {
@@ -55,12 +61,25 @@ export interface ICoHostState {
   connected: Ref<SeatUserInfo[]>;
   applicant: Ref<SeatUserInfo | null>;
   invitees: Ref<SeatUserInfo[]>;
-  candidates: ComputedRef<SeatUserInfo[]>;
+  candidates: Ref<SeatUserInfo[]>;
+  candidatesCursor: Ref<string>;
+  /**
+   * Live IDs of remote co-hosts whose audio is currently muted by the local
+   * user. Owned by the store (not the panel component) so the mute toggle
+   * survives the CoHostPanel dialog's `v-if` unmount/remount cycle. Mirrors
+   * the Web kit's `mutedHosts`.
+   */
+  mutedHosts: Ref<string[]>;
+
   requestHostConnection: (params: { liveId: string; layoutTemplate: CoHostLayoutTemplate; timeout: number; extensionInfo: string }) => Promise<Map<string, any>>;
   cancelHostConnection: (params: { liveId: string }) => Promise<void>;
   acceptHostConnection: (params: { liveId: string }) => Promise<void>;
   rejectHostConnection: (params: { liveId: string }) => Promise<void>;
   exitHostConnection: () => Promise<void>;
+  getCoHostCandidates: (cursor: string) => Promise<void>;
+  muteRemoteHostAudio: (liveId: string, isMuted: boolean) => Promise<void>;
+  
   subscribeEvent: (event: CoHostEvent, callback: (eventInfo: any) => void) => void;
   unsubscribeEvent: (event: CoHostEvent, callback: (eventInfo: any) => void) => void;
 }
+
diff --git a/packages/tuikit-atomicx-vue3-electron/src/types/index.ts b/packages/tuikit-atomicx-vue3-electron/src/types/index.ts
index af9ca25..0ef39c1 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/types/index.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/types/index.ts
@@ -23,6 +23,7 @@ export * from './battle';
 export * from './barrage';
 export * from './gift';
 export * from './music';
+export * from './liveSummary';
 // room
 export * from './room';
 export * from './participant';
diff --git a/packages/tuikit-atomicx-vue3-electron/src/types/liveSummary.ts b/packages/tuikit-atomicx-vue3-electron/src/types/liveSummary.ts
new file mode 100644
index 0000000..c8cb067
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3-electron/src/types/liveSummary.ts
@@ -0,0 +1,40 @@
+import type { DeepReadonly, Ref } from 'vue';
+
+/**
+ * Live summary statistics.
+ *
+ * Mirrors the underlying TUILiveStatisticsData fields.
+ */
+export interface LiveSummaryData {
+  /** Cumulative live duration in seconds. */
+  totalDuration: number;
+  /** Total viewers received from the SDK statistics event. */
+  totalViewers: number;
+  /** Total gifts sent. */
+  totalGiftsSent: number;
+  /** Total unique gift senders. */
+  totalGiftUniqueSenders: number;
+  /** Total gift coins. */
+  totalGiftCoins: number;
+  /** Total likes received. */
+  totalLikesReceived: number;
+  /** Total messages sent. */
+  totalMessageSent: number;
+}
+
+/**
+ * Return contract of `useLiveSummaryState()`.
+ */
+export interface ILiveSummaryState {
+  /**
+   * Reactive live summary statistics. Exposed as `DeepReadonly` so the
+   * underlying singleton cannot be mutated from the outside; mutations
+   * must go through the store, which in turn keeps the SDK state and the
+   * local timer-driven duration in sync.
+   *
+   * The store updates this whenever the SDK emits
+   * `onLiveStatisticsChanged`, and ticks `totalDuration` every second
+   * while the user is in a live.
+   */
+  summaryData: DeepReadonly<Ref<LiveSummaryData>>;
+}
diff --git a/packages/tuikit-atomicx-vue3-electron/src/types/seat.ts b/packages/tuikit-atomicx-vue3-electron/src/types/seat.ts
index 76e78e3..d702b16 100644
--- a/packages/tuikit-atomicx-vue3-electron/src/types/seat.ts
+++ b/packages/tuikit-atomicx-vue3-electron/src/types/seat.ts
@@ -3,21 +3,58 @@ import { DeviceStatus } from './device';
 import type { NetworkInfo } from './device';
 import type { EventCallback } from '../utils/eventCenter';
 
+/**
+ * User suspend status enum.
+ * @description Defines the suspend status of a user, e.g. moved to background or in a phone call.
+ * Aligned with the Android `SuspendStatus` enum.
+ */
+export enum SuspendStatus {
+  /** Not suspended. */
+  None = 0,
+  /** User has moved the app to background. */
+  InBackground = 1,
+  /** User is currently on a phone call. */
+  InCalling = 2,
+}
+
+/**
+ * Seat user info.
+ * @description Detailed information of a user on a seat, including basic profile,
+ * live room id, role, device status, device control permissions and suspend status.
+ */
 export type SeatUserInfo = {
+  /** User ID. */
   userId: string;
+  /** User nickname. */
   userName: string;
+  /** User avatar URL. */
   avatarUrl: string;
-  // role: Role;  // 暂不支持，等 roomEngine 支持
+  /** Live room ID. */
   liveId: string;
+  /** User role in the live room. */
+  role: Role;
+  /** Microphone status. */
   microphoneStatus: DeviceStatus;
+  /** Whether opening the microphone is allowed. */
   allowOpenMicrophone: boolean;
+  /** Camera status. */
   cameraStatus: DeviceStatus;
+  /** Whether opening the camera is allowed. */
   allowOpenCamera: boolean;
+  /** User suspend status. */
+  userSuspendStatus: SuspendStatus;
 }
 
+/**
+ * Role enum.
+ * @description Defines the role of a user in the live room: owner, administrator or general user.
+ */
 export enum Role {
+  /** Live room owner. */
   Owner = 0,
+  /** Live room administrator. */
   Administrator = 1,
+  /** General audience / co-host user. */
   GeneralUser = 2,
 }
 
diff --git a/packages/tuikit-atomicx-vue3-electron/src/utils/loginCoordinator.ts b/packages/tuikit-atomicx-vue3-electron/src/utils/loginCoordinator.ts
new file mode 100644
index 0000000..77ee68e
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3-electron/src/utils/loginCoordinator.ts
@@ -0,0 +1,78 @@
+/**
+ * Internal module for coordinating login sequence between LoginState and various servers.
+ * Ensures that server logins wait for LoginState.login to complete.
+ * Uses reference counting to handle concurrent login() calls correctly.
+ */
+
+let loginPromise: Promise<void> | null = null;
+let loginResolve: (() => void) | null = null;
+let loginCount = 0;
+// Tracks whether at least one login cycle has fully completed since module
+// load. Once `true`, `waitForLogin` resolves immediately and we no longer
+// gate consumers on a promise. This intentionally does NOT reset on logout
+// to preserve the previous behaviour of `waitForLogin` returning immediately
+// in the gap between logout and the next login.
+let hasCompletedOnce = false;
+
+/**
+ * Lazily ensures `loginPromise` exists. Called by both `startLogin` and
+ * `waitForLogin`, so that consumers calling `waitForLogin` BEFORE
+ * `startLogin` (e.g. eager candidate fetch on module load) still observe
+ * a pending promise instead of a falsy short-circuit.
+ */
+function ensureLoginPromise(): void {
+  if (!loginPromise) {
+    loginPromise = new Promise((resolve) => {
+      loginResolve = resolve;
+    });
+  }
+}
+
+/**
+ * Called when LoginState.login starts.
+ * Uses reference counting to handle concurrent calls.
+ * @internal
+ */
+export function startLogin(): void {
+  loginCount++;
+  ensureLoginPromise();
+}
+
+/**
+ * Called when LoginState.login completes (success or failure).
+ * Only resolves the promise when all concurrent login calls have finished.
+ * @internal
+ */
+export function finishLogin(): void {
+  loginCount = Math.max(0, loginCount - 1);
+  if (loginCount === 0) {
+    hasCompletedOnce = true;
+    if (loginResolve) {
+      loginResolve();
+    }
+    loginPromise = null;
+    loginResolve = null;
+  }
+}
+
+/**
+ * Wait for LoginState.login to complete.
+ *
+ * Behaviour:
+ * - If a login cycle is in progress, await it.
+ * - If `waitForLogin` is called BEFORE `startLogin` is ever invoked, lazily
+ *   create the pending promise so the consumer is parked until the first
+ *   `finishLogin` resolves it. This fixes the early-mount race where a
+ *   consumer such as `getCoHostCandidates` could otherwise short-circuit
+ *   and trigger `not inited` SDK errors.
+ * - Once the first login cycle has completed, returns immediately for the
+ *   rest of the module's lifetime (including any later logout / re-login).
+ * @internal
+ */
+export async function waitForLogin(): Promise<void> {
+  if (hasCompletedOnce) {
+    return;
+  }
+  ensureLoginPromise();
+  await loginPromise;
+}